@use "sass:math";
@use '../../common/' as *;
@use '../../common/variables' as var;
@use '../../common/color' as color;
@use '../flex/mixin' as flex;

.sub_visual{
    z-index: -1;
    font-size: 1rem;
    //position: relative;
    height: rem(var.$svH);
    width: 100%;
    margin : {
        top: 0;
        left: auto;
        right:auto;
    };
    overflow: hidden;

    position: static;

    @include flex.flex-box();
    @include flex.align-items('flex-end');



    @for $i from 1 to 20  {
        &.st_#{$i}{
             .sv_img {
                 background-image: url('/resource/images/sub/sub_visual#{if($i < 10, '0'+$i, $i)}.jpg');
             }
             &.int {
                 // 기업소개
                 .sv_img {
                     background-image: url('/resource/images/sub/sub_visual_int#{if($i < 10, '0'+$i, $i)}.jpg');
                     background-position: right center;
                 }
             }
             &.pm {
                 // 홍보센터
                 .sv_img {
                     background-image: url('/resource/images/sub/sub_visual_pm#{if($i < 10, '0'+$i, $i)}.jpg');
                 }
             }
        }
    }
    @for $i from 1 to 5 {
        &.st_#{$i} {
            &.cs {
                // 고객서비스
                .sv_img {
                    background-image: url('/resource/images/sub/sub_visual_cs#{if($i < 10, '0'+$i, $i)}.jpg');
                }
            }
        }
    }
    @for $i from 1 to 5 {
        &.st_#{$i} {
            &.lft {
                // 고객서비스
                .sv_img {
                    background-image: url('/resource/images/sub/sub_visual_lft#{if($i < 10, '0'+$i, $i)}.jpg');
                }
            }
        }
    }
    .move_scroll {
        display: none;
    }

    &.ios{
        position: relative !important;
    }
    &.txt {
        height: auto;
        position: relative;
        .location {
            // position: static;
            padding-top: em(96);
        }
        &:not(.left) {
            .sv_img { display: none; }
            .sv_text_box {
                color: #222;
                display: none;
            }
        }
    }
    &.left {
        position: fixed; top: 0; left: 0;
        width: em(550); height: 100%;
        z-index: 10;
        @include flex.align-items('flex-start');
        padding: {
            top: em(100);
            bottom: em(100);
        }
        .sv_img {
            display: block;
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            transform: none !important;
            background-image: url('/resource/images/sub/sub_visual_left.jpg');
        }
        .sv_tit {
            font-size: em(54);
        }
        .sv_txt {
            margin-top: em(24, 20);
            line-height: 1.5;
            font-weight: 400;
            position: relative;
        }
        .sv_text_box {
            max-width: 340px;
            width: 100%;
            margin-left: auto;
            margin-right: 0;
        }
        & .location {
            position: static;
            padding-top: 0;
            margin-top: em(56);
            .wrap { padding-left: 0; padding-right: 0; width :100%; }
            margin-bottom: em(40);
            .home { padding-left: 0; }
            // position: fixed; top: rem(57); left: 0;

        }
        & ~ #con,
        & ~ .ft {
            padding-left: rem(550);
        }
        & ~ #con {
            padding-top: em(96);
            min-height: calc(var(--vh, 1vh) * 100 - rem(316));
            & > .wrap,
            .fixed_status > .wrap {
                padding-left: rem(56);
                margin-right: auto;
                margin-left: 0;
                max-width: calc(1075px + 76px);
                @include mob {
                    padding-left: rem(16);
                }
            }
            .fixed_status > .wrap {
                & > .statusBar > .inner {
                    background-color: #f6f6f6;
                }
            }
        }
        @include pc-small {
            position: relative;
            width: 100%; height: auto;
            & ~ #con,
            & ~ .ft {
                padding-left: 0;
            }
            & ~ #con {
                padding-top: em(56);
                & > .wrap,
                .fixed_status > .wrap {
                    max-width: 92.5rem;
                    padding-left: 1.25rem;
                }
            }
            .sv_img {
                background-image: url('/resource/images/sub/sub_visual_left_m.jpg') !important;
            }
            &.lft {
                @for $i from 1 to 5  {
                    &.st_#{$i} .sv_img{
                        background-image: url('/resource/images/sub/sub_visual_lft#{if($i < 10, '0'+$i, $i)}_m.jpg?var=2') !important;
                    }
                }
            }
            .sv_text_box {
                max-width: none;
                margin-left: 0;
                margin-top: rem(120);
                br { display: none; }
            }
        }
        @include mob {
            .sv_txt {
                margin-top: em(16);
            }
        }
    }
    &.full {
        position: relative;
        height: calc(var(--vh, 1vh) * 100);
        transition: all .01s;
        @include flex.align-items('center');
        z-index: 0;
        & ~ .move_scroll {
            display: block;
        }
        .sv_img {
            background-image: url('/resource/images/sub/sub_visual_full05.jpg');
            height: 100%;
        }
        @for $i from 1 to 20  {
            &.st_#{$i} .sv_img{
                background-image: url('/resource/images/sub/sub_visual_full#{if($i < 10, '0'+$i, $i)}.jpg?var=2');
            }
            @include mob {
                &.st_#{$i} .sv_img{
                    background-image: url('/resource/images/sub/sub_visual_full#{if($i < 10, '0'+$i, $i)}_m.jpg?var=2');
                }
            }
        }
        &.business {
            @for $i from 1 to 22  {
                &.st_#{$i} .sv_img{
                    background-image: url('/resource/images/sub/business/sub_visual#{if($i < 10, '0'+$i, $i)}.jpg?var=2');
                }
                @include mob {
                    &.st_#{$i} .sv_img{
                        background-image: url('/resource/images/sub/business/sub_visual#{if($i < 10, '0'+$i, $i)}_m.jpg?var=2');
                    }
                }
            }
        }
        .sv_text_box {
            padding-bottom: 0;
            text-align: center;
        }

        .move_scroll {
            position: absolute; bottom: 0; left: 50%;
            margin-bottom: em(24);
            width: em(80); height: em(80);
            margin-left: em(-40);
            border-radius: 50%;
            border: 1px solid  #ffffff;
            @include flex.flex-box;
            @include flex.align-items('center');
            @include flex.justify-content('center');
            z-index: 10;
            @include vendor(transition, 'background .3s');
            background-color: rgba(255,255,255,0);
            svg {
                -moz-animation-duration: .5s;
                -webkit-animation-duration: .5s;
                animation-duration: .5s;
                -moz-animation-timing-function: ease-in;
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
                -moz-animation-name: toBottom;
                -webkit-animation-name: toBottom;
                animation-name: toBottom;
                -moz-animation-iteration-count: infinite;
                -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
                -moz-animation-direction: alternate;
                -webkit-animation-direction: alternate;
                animation-direction: alternate;
            }
            &:hover {
                background-color: rgba(255,255,255,0.1);
            }
            @include tab {
                & {
                    width: em(60); height: em(60);
                    margin-left: em(-30);
                    svg {
                        width: em(15); height: em(21);
                    }
                }
            }
        }
        @include pc-small {
            .sv_tit {
                text-align: center;
            }
        }
        @include mob {
            padding-bottom: 5rem;
            .sv_tit {
                font-size: em(40);
            }
        }
    }

    .sv{
        &_img{
            position: fixed;
            top: 0;
            left:0%;
            transform: rotate(0.001deg) scale(1.15) !important;
            opacity: 1 !important;
            // width: 115%;
            width: 102%;
            // transform: scale(1.2);
            height: rem(var.$svH);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-color: #ddd;
            transition: transform 1.5s ease-out;
            transition-duration: 1.5s !important;
            &.aos-animate{
                width: 102%;
                transform: rotate(0.001deg) scale(1.001) !important;
            }
            @at-root .ios#{&}{
                position: absolute !important;
            }

        }
        &_text_box{
            width: 100%;
            text-align: left;
            color: #fff;
            @include wrap(var.$wrap);
            // padding-top: rem(var.$headerH);
            padding-bottom: rem(56);
            &.on {
                .sv_tit,
                .sv_txt {
                    transform: none;
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
        &_tit{
            font-size: em(60);
            position: relative;
            line-height: normal;
            font-weight: 800;
            // font-family: var.$font-gep;
            transition: transform .85s, opacity .85s;
            opacity: 0;
            visibility: hidden;
            @include vendor(transform, 'translateY(50%)');
        }
        &_txt {
            font-size: em(20);
            margin-top: em(13, 20);
            position: relative;
            transition: transform .85s, opacity .85s;
            transition-delay: .425s;
            opacity: 0;
            visibility: hidden;
            @include vendor(transform, 'translateY(50%)');
        }
    }
    @include pc-small {
        .sv_tit {
            text-align: left;
        }
        &,
        &.left {
            padding: {
                top: rem(96);
                bottom: 0;
            }
        }
    }
    @include tab{
        &{
            height: rem(396);
        }
        @for $i from 1 to 20  {
            &.st_#{$i} {
                .sv_img {
                    background-image: url('/resource/images/sub/sub_visual#{if($i < 10, '0'+$i, $i)}_m.jpg?var=2');
                }
                &.int {
                    .sv_img {
                        background-image: url('/resource/images/sub/sub_visual_int#{if($i < 10, '0'+$i, $i)}_m.jpg?var=2');
                    }
                }
                &.pm {
                    // 홍보센터
                    .sv_img {
                        background-image: url('/resource/images/sub/sub_visual_pm#{if($i < 10, '0'+$i, $i)}_m.jpg');
                    }
                }
            }
        }
        @for $i from 1 to 5 {
            &.st_#{$i} {
                &.cs {
                    // 고객서비스
                    .sv_img {
                        background-image: url('/resource/images/sub/sub_visual_cs#{if($i < 10, '0'+$i, $i)}_m.jpg');
                    }
                }
            }
        }
        @for $i from 1 to 5 {
            &.st_#{$i} {
                &.lft {
                    // 고객서비스
                    .sv_img {
                        background-image: url('/resource/images/sub/sub_visual_lft#{if($i < 10, '0'+$i, $i)}_m.jpg');
                    }
                }
            }
        }
        .sv{
            &_img{
                top: 0;
                height: rem(396);
            }
        }
    }
    @include mob{
        // &{
        //     height: rem((248));
        // }
        &,
        &.left {
            padding: {
                top: rem(80);
            }
        }
        & {
            height: rem(306);
        }
        .sv{
            &_img{
                height: rem(306);
            }
            // &_text_box{
            //     padding-top: rem(72);
            // }
            &_tit {
                font-size: em(40);
            }
            &_txt {
                font-size: em(16);
            }
            &_text_box {
                padding-bottom: em(24);
            }
            @at-root .sub_visual.left {
                .sv_tit {
                    font-size: em(40);
                }
            }
        }
    }
}


@-webkit-keyframes toBottom {
	0% {
		@include vendor(transform, 'translate(0%, -25%)');
	}
	100% {
		@include vendor(transform, 'translate(0%, 25%)');
	}
}
@-ms-keyframes toBottom {
	0% {
		@include vendor(transform, 'translate(0%, -25%)');
	}
	100% {
		@include vendor(transform, 'translate(0%, 25%)');
	}
}
@-o-keyframes toBottom {
	0% {
		@include vendor(transform, 'translate(0%, -25%)');
	}
	100% {
		@include vendor(transform, 'translate(0%, 25%)');
	}
}
@keyframes toBottom {
	0% {
		@include vendor(transform, 'translate(0%, -25%)');
	}
	100% {
		@include vendor(transform, 'translate(0%, 25%)');
	}
}