@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Noto+Serif+Thai:wght@100..900&family=Orelega+One&family=Pochaevsk&family=Sorts+Mill+Goudy:ital@0;1&display=swap');

:root {
    --pink-:#E7286A;
    --light-pink-:#FC6599;
    --purple-:#833593;
    --light-purple-:#AD80B6;
}

*{margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth;}
body{font-family: "Noto Sans Thai", sans-serif; line-height: 1.6; max-width: 1920px; margin: 0 auto; user-select: none;}
h1, h2, h3, h4{line-height: 1.4; font-weight: 700;}
h1{font-size: 50px;}
h2{font-size: 40px;}
h3{font-size: 30px;}
h4{font-size: 24px;}
ul, li{list-style: none; margin: 0; padding: 0;}
a{text-decoration: none; color: inherit;}
button{font: inherit; color: inherit; cursor: pointer; background: none; border: none;}
.ft_mill{font-family: "Sorts Mill Goudy", serif; font-weight: 400; line-height: 1.2;}
.ft_poch{font-family: "Pochaevsk", serif;}
.bold{font-weight: 700;}

@media (min-width: 992px){
    .m_only{display: none;}
}

@media (max-width: 991.99px){
    .pc_only{display: none;}
}

@media (max-width: 991.99px){
    h1{font-size: 36px;}
    h2{font-size: 28px;}
    h3{font-size: 24px;}
    h4{font-size: 20px;}
}

img{vertical-align: bottom; max-width: 100%;}
.icon{vertical-align: middle;}
.thumb{overflow: hidden;}
.thumb img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.divider{width: 60px; height: 4px; margin: 0 auto 20px; background-color: var(--light-purple-);}
.symbol{width: 119px; margin: 0 auto 20px;}

@media (max-width: 991.99px){
    .symbol{width: 79px;}
}

section{padding: 140px 0;}
[class*="container"]{margin: 0 auto; padding: 0 20px; width: 100%;}
.container{max-width: 1400px;}
.full_container{max-width: 100%;}

@media (max-width: 1199.99px){
    section{padding: 100px 0;}
}

@media (max-width: 991.99px){
    section{padding: 60px 0;}
}

.title{margin-bottom: 100px; text-align: center;}
.title .top{margin-bottom: 40px;}
.title .top > *:not(:last-child){margin-bottom: 20px;}
.title h2{color: var(--purple-);}
.title p{font-size: 24px;}

@media (max-width: 1199.99px){
    .title{margin-bottom: 60px;}
}

@media (max-width: 991.99px){
    .title{margin-bottom: 40px;}
    .title .top{margin-bottom: 20px;}
    .title .top > *:not(:last-child){margin-bottom: 10px;}
    .title p{font-size: 16px;}
}

/* common */
.common1{padding: 0;}
.common1 .full_container{padding: 0;}
.common1 .list{display: flex;}
.common1 .list .item{text-align: center; flex-basis: 100%; height: 100%; align-content: center; color: #FFF; padding: 0 20px;}
.common1 .list .item:nth-of-type(1){background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/common/common1_img1.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.common1 .list .item:nth-of-type(2){background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/common/common1_img2.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.common1 .list .item:nth-of-type(3){background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/common/common1_img3.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.common1 .list .item:nth-of-type(4){background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/common/common1_img4.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.common1 .list .item div:not(:last-child){margin-bottom: 20px;}
.common1 .list .item .tit p{font-size: 80px; font-weight: 700; line-height: 1;}
.common1 .list .item .subtit p{font-size: 24px;}
.common1 .list .item .subtit p:nth-child(1){font-size: 30px; font-weight: 700;}

@media (min-width: 1200px){
    .common1 .list{height: 800px;}
}

@media (max-width: 1199.99px){
    .common1 .list{flex-direction: column;}
    .common1 .list .item{padding: 60px 20px;}

}

@media (max-width: 991.99px){
    .common1 .list .item .tit p{font-size: 40px;}
    .common1 .list .item .subtit p{font-size: 16px;}
    .common1 .list .item .subtit p:nth-child(1){font-size: 30px;}
}


.common2{background-image: url(../images/common/common2_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}

.common2 .list .item{display: flex; background-color: #FFF; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);}
.common2 .list .item:not(:last-child){margin-bottom: 40px;}
.common2 .list .item > *{width: 50%;}
.common2 .list .item .thumb{aspect-ratio: 4/3;}
.common2 .list .item .text{padding: 60px; align-content: center; font-size: 20px;}
.common2 .list .item .text .top{color: var(--purple-); margin-bottom: 20px;}
.common2 .list .item .text .num{font-size: 50px;}
.common2 .list .item .text h4{color: var(--purple-);}

@media (max-width: 1199.99px){
    .common2 .list .item:not(:last-child){margin-bottom: 20px;}
    .common2 .list .item .text{padding: 50px;}
}

@media (min-width: 992px){
    .common2 .list .item:nth-child(even){flex-direction: row-reverse;}
}

@media (max-width: 991.99px){
    .common2 .list .item{flex-direction: column-reverse; border-radius: 10px;}
    .common2 .list .item > *{width: 100%;}
    .common2 .list .item .thumb{aspect-ratio: 5/3;}
    .common2 .list .item .text{padding: 30px; text-align: center; font-size: 16px;}
    .common2 .list .item .text .num{font-size: 30px;}
}

.common3{background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/common/common3_bg.png); background-size: cover; background-position: center center; background-repeat: repeat-x; padding: 0; height: 432px; align-content: center; animation: slidebg 60s linear infinite;}
.common3 .title{margin-bottom: 0; color: #FFF;}
.common3 .title h2{font-size: 60px; line-height: 1; color: #FFF;}
.common3 .title .divider{background-color: #FFF;}

@keyframes slidebg{
  from {background-position: 0 0;}
  to {background-position: -3744px 0;}
}

@media (max-width: 991.99px){
    .common3 .title h2{font-size: 30px;}
}

/* main */
.main1{background-image: url(../images/main/main1_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 1920/1080;}

.main2{background-image: url(../images/main/main2_bg.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat; color: var(--purple-); text-align: center; width: 100%; overflow: hidden; height: 905px;}
.main2 .txt1{position: relative; width: 100%; text-align: center; transform: translateY(-100px); opacity: 0; filter: blur(6px); transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0s;}
.main2 .txt2{position: relative; width: 100%; height: 200px; margin-top: 100px; font-family: "Pochaevsk", serif; font-size: 100px; line-height: 1;}
.main2 .txt2 div{position: absolute;}
.main2 .txt3{position: relative; width: 100%; text-align: center; transform: translateY(100px); opacity: 0; filter: blur(6px); transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0s; margin-top: 100px; font-size: 24px;}

@media (max-width: 1199.99px){
    .main2{height: 805px;}
    .main2 .txt2{font-size: 60px;}
}

@media (min-width: 992px){
    .main2 .txt2 .t1{opacity: 0; top: 50%; left: 0; transform: translate(-50%, -50%);}
    .main2 .txt2 .t2{opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .main2 .txt2 .t3{opacity: 0; top: 50%; right: 0; transform: translate(50%, -50%);}

    .main2.active .txt1{transform: translateY(0); opacity: 1; filter: blur(0px); transition: all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0s;}
    .main2.active .txt2 .t1{animation: m2t1 3.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; transform: translate(0, -50%);}
    .main2.active .txt2 .t2{animation: m2t2 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.8s;}
    .main2.active .txt2 .t3{animation: m2t3 3.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; transform: translate(0, -50%);}
    .main2.active .txt3{transform: translateY(0); opacity: 1; filter: blur(0px); transition: all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 3.6s;}

    @keyframes m2t1 {
        0%{left: 10%; opacity: 0; filter: blur(6px);}
        30%{left: 18%; opacity: 1; filter: blur(0px);}
        70%{left: 18%; opacity: 1; filter: blur(0px);}
        71%{left: 18%; opacity: 1; filter: blur(12px);}
        100%{left: 0; opacity: 1; filter: blur(0px);}
    }

    @keyframes m2t2 {
        0%{letter-spacing: -0.5em; -webkit-filter: blur(12px); filter: blur(12px); opacity: 0;}
        100%{-webkit-filter: blur(0px); filter: blur(0px); opacity: 1;}
    }

    @keyframes m2t3 {
        0%{right: 10%; opacity: 0; filter: blur(6px);}
        30%{right: 18%; opacity: 1; filter: blur(0px);}
        70%{right: 18%; opacity: 1; filter: blur(0px);}
        71%{right: 18%; opacity: 1; filter: blur(12px);}
        100%{right: 0; opacity: 1; filter: blur(0px);}
    }
}

@media (max-width: 991.99px){
    .main2{background-image: url(../images/main/main2_bg_m.jpg); height: 630px;}
    .main2 .txt1{transform: translateY(-60px);}
    .main2 .txt2{height: 240px; margin-top: 60px; font-size: 40px; width: 100%;}
    .main2 .txt2 div.t1{opacity: 0; top: 0; left: 50%; transform: translate(-50%, 50%); width: 100%;}
    .main2 .txt2 div.t2{opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .main2 .txt2 div.t3{opacity: 0; bottom: 0; left: 50%; transform: translate(-50%, 50%); width: 100%;}
    .main2 .txt3{margin-top: 60px; transform: translateY(60px); font-size: 16px;}

    .main2.active .txt1{transform: translateY(0px); opacity: 1; filter: blur(0px); transition: all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0s;}
    .main2.active .txt2 div.t1{animation: m2t1 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; transform: translate(-50%, 0);}
    .main2.active .txt2 div.t2{animation: m2t3 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.4s;}
    .main2.active .txt2 div.t3{animation: m2t2 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s; transform: translate(-50%, 0);}
    .main2.active .txt3{transform: translateY(0); opacity: 1; filter: blur(0px); transition: all 1.1s cubic-bezier(0.25, 1, 0.5, 1) 1.8s;}

    @keyframes m2t1 {
        0%{top: 10%; opacity: 0; filter: blur(6px);}
        35%{top: 30%; opacity: 1; filter: blur(0px);}
        70%{top: 30%; opacity: 1; filter: blur(0px);}
        71%{top: 30%; opacity: 1; filter: blur(12px);}
        100%{top: 0; opacity: 1; filter: blur(0px);}
    }

    @keyframes m2t2 {
        0%{bottom: 10%; opacity: 0; filter: blur(6px);}
        35%{bottom: 30%; opacity: 1; filter: blur(0px);}
        70%{bottom: 30%; opacity: 1; filter: blur(0px);}
        71%{bottom: 30%; opacity: 1; filter: blur(12px);}
        100%{bottom: 0; opacity: 1; filter: blur(0px);}
    }

    @keyframes m2t3 {
        0% {
            letter-spacing: -0.5em;
            -webkit-filter: blur(12px);
                    filter: blur(12px);
            opacity: 0;
        }
        100% {
            -webkit-filter: blur(0px);
                    filter: blur(0px);
            opacity: 1;
        }
    }
}

.main3{position: relative; overflow: hidden; isolation: isolate;}
.main3::before{content: ""; position: absolute; inset: 0; background-image: var(--slide-bg); background-size: cover; background-position: center; filter: blur(20px); transform: scale(1.15); opacity: 0.35; transition: background-image .6s ease; z-index: -2;}
.main3::after{content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: -1;}
.main3 > *{position: relative; z-index: 1;}
.main3 .title .top > *{color: #FFF;}

#main_solution{width: 100%; position: relative;}
#main_solution.dragging{cursor: grabbing;}
#main_solution .slide{display: flex; align-items: center; will-change: transform; cursor: grab;}
#main_solution .item{width: 440px; min-width: 440px; margin: 0 20px; flex-shrink: 0; user-select: none; overflow: hidden; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);}
#main_solution .item img{width: 100%; pointer-events: none;}
#main_solution .control{font-size: 24px; text-align: center; line-height: 1; color: #FFF; margin-top: 40px;}
#main_solution .control > *{display: inline-block;}
#main_solution .btn button{font-family: "Pochaevsk", serif; color: #FFF; text-shadow: 0 2px 10px #666;}
#main_solution .btn span{font-size: 0.8em;}
#main_solution .page{display: inline-block; border-radius: 100px; border: 1px solid #FFF; padding: 10px 25px; margin-left: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);}
#main_solution .page .current{font-weight: 700;}

@media (max-width: 1199.99px){
    #main_solution .item{width: 326px;min-width: 326px;}
}

@media (max-width: 991.99px){
    #main_solution .control{font-size: 16px; margin-top: 20px;}
    #main_solution .page{padding: 10px 20px;}
}

@media (max-width: 567.99px){
    #main_solution .item{width: calc(100vw - 40px); min-width: calc(100vw - 40px); margin: 0 20px;}
}

.main4{background-image: url(../images/main/main4_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.main4 .row{display: flex; gap: 40px;}
.main4 .image img{width: 100%;}
.main4 .text{flex: 1;}
.main4 .wrap{position: relative;}
.main4 .wrap:not(:last-child){margin-bottom: 30px;}
.main4 .bubble{padding: 20px; border-radius: 20px; font-size: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);}
.main4 .bubble::after{content: ""; position: absolute; top: 20px; width: 0; height: 0; border: 10px solid #DDD; border-bottom-color: transparent; border-right-color: transparent;}
.main4 .wrap:has(.right){padding-right: 20px;}
.main4 .bubble.right{background: #FFF;}
.main4 .bubble.right::after{right: 1px;}
.main4 .wrap:has(.left){padding-left: 20px;}
.main4 .bubble.left{background: var(--light-purple-); color: #FFF; font-weight: 700;}
.main4 .bubble.left::after{left: 1px; border: 10px solid var(--light-purple-); border-bottom-color: transparent; border-left-color: transparent;}
.main4 .bubble.left p{background-image: url(../images/main/main4_img2.png); background-size: 60px; background-position: right bottom; background-repeat: no-repeat;}

@media (min-width: 992px){
    .main4 .image{flex-basis: 500px;}
}

@media (max-width: 991.99px){
    .main4 .row{flex-direction: column;}
    .main4 .bubble{font-size: 16px; border-radius: 10px;}
}

/* 헤더 */
header{position: fixed; top: 20px; z-index: 100; width: 100%; max-width: 1920px;}
header.scrolled .wrap{background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); padding: 0 40px; transition: 0.5s; border-radius: 100px;}
header .wrap{display: flex; justify-content: space-between; align-items: center; height: 80px; transition: 0.2s;}
header:not(.scrolled) .wrap{color: #FFF;}
header:not(.scrolled) img{filter: brightness(100);}
header:not(.scrolled) .icon{filter: brightness(100) invert(1);}
header .left{display: flex; gap: 20px; align-items: center;}
header .logo{height: 50px;}
header .lang{font-size: 24px;}
header .right{position: relative;}

@media (max-width: 991.99px){
    header.scrolled .wrap{padding: 0 20px;}
    header .wrap{height: 50px;}
    header .logo{height: 30px;}
    header .left{gap: 10px;}
    header .left .icon{width: 30px;}
    header .lang{font-size: 16px;}
    header .lang .icon{width: 16px;}
}

.lang_open{width: 200px; position: absolute; z-index: 101; right: 0; top: 50px;}
.lang_open .link{display: flex; flex-direction: column; gap: 5px;}
.lang_open .link a{width: 100%; height: 40px; padding: 0 20px; background: var(--light-purple-); border-radius: 100px; align-content: center; color: #FFF; font-family: "Noto Serif Thai"; padding-top: 3px;}
.lang_open .link a:hover{background: var(--purple-);}

.menu{position: fixed; z-index: 1000; width: 100%; max-width: 1920px; height: 100vh; display: none;}
.menu .overlay{position: relative; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4);}
.menu .nav{position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: #393053; padding: 100px 200px; color: #FFF;}
.menu .top{font-size: 20px; font-weight: 700; margin-bottom: 40px; line-height: 1.4;}
.menu .top .tit{font-size: 28px; font-family: "Orelega One"; font-weight: 400; margin-top: 5px;}
.menu .accordion .tit{font-family: "Orelega One"; color: #8C9FE5; margin-bottom: 20px;}
.menu .accordion_btn{display: flex; justify-content: space-between; align-items: center; height: 60px; font-size: 22px; font-weight: 700; width: 100%; border-top: 1px solid #5B4C84;}
.menu .accordion_btn .icon{transition: .3s; transform: rotate(180deg);}
.menu .accordion_btn.active .icon{transform: rotate(0deg);}
.menu .accordion_cnt{padding: 30px 40px; border-top: 1px solid #5B4C84;}
.menu .accordion_cnt a{display: inline-block; color: #FFF0D5;}
.menu .accordion_cnt a:hover{color: #FFF;}
.menu .accordion_cnt a:not(:last-child){margin-right: 40px;}
.menu .close{position: absolute; top: 60px; right: 60px; z-index: 1; width: 40px; height: 40px;}
.menu .close .icon{width: 100%;}

@media (max-width: 1199.99px){
    .menu .nav{padding: 100px;}
    .menu .accordion_cnt a:not(:last-child){margin-right: 20px;}
}

@media (max-width: 991.99px){
    .menu .nav{width: 100%; padding: 100px 30px;}
    .menu .top{font-size: 18px;}
    .menu .accordion_btn{font-size: 18px;}
    .menu .accordion_cnt{padding: 20px;}
    .menu .close{top: 30px; right: 30px; width: 30px; height: 30px;}

    .lang_open{width: 160px;}
    .lang_open .link a{height: 34px; font-size: 14px;}
}

/* 하단정보 */
footer{background: #111; padding-top: 60px; padding-bottom: 80px;}
footer .top{color: #FFF; background-image: url(../images/logo/foot_symbol.png); background-size: 199px; background-position: bottom 20px right 20px; background-repeat: no-repeat; padding-bottom: 60px;}
footer .box{background: #202020; border-radius: 20px; padding: 40px; text-align: center; margin-bottom: 40px;}
footer .box .image{display: flex; gap: 30px; justify-content: center; align-items: center; margin-bottom: 30px;}
footer .box .image .logo{height: 60px;}
footer .list{display: flex; gap: 20px; color: #525252; font-weight: 700; line-height: 1.4;}
footer .list > *{flex: 1;}
footer .list .tit{color: #838383; margin-bottom: 5px;}
footer .list .tel{color: #FFF;}
footer .list .tel > *:not(.tit){font-size: 24px; line-height: 1.2;}
footer .copyright{color: #4D4D4D; text-align: center; border-top: 1px solid #4D4D4D; padding: 10px 0;}

@media (min-width: 1200px){
    footer .list{align-items: end;}
    footer .list .tel{text-align: right;}
}

@media (max-width: 1199.99px){
    footer{padding-top: 30px;}
    footer .top{background-size: 199px; padding-bottom: 30px;}
    footer .box{margin-bottom: 30px;}
    footer .list{flex-direction: column;}
}

@media (max-width: 991.99px){
    footer{padding-top: 20px; padding-bottom: 70px;}
    footer .top{background-size: 79px; padding-bottom: 20px;}
    footer .box{margin-bottom: 20px;}
    footer .box .image{gap: 10px;}
    footer .box .image .icon{height: 24px;}
    footer .box .image .logo{height: 30px;}
    footer .box{border-radius: 10px; padding: 20px;}
    footer .list .tel > *:not(.tit){font-size: 20px;}
}

/* 플로팅 */
#float{position: fixed; width: 100%; max-width: 1920px; bottom: 20px; z-index: 5;}
.float .box{background: linear-gradient(45deg, var(--pink-), var(--purple-)); color: #FFF; border-radius: 30px; font-weight: 700;}
.float .link{padding: 40px; display: flex; gap: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
.float .link a{flex: 1; display: flex; justify-content: space-between; align-items: center; border-radius: 100px; background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2); height: 50px; padding: 0 20px;}
.float .link a .tit{display: flex; gap: 20px; align-items: center;}
.float .btn{display: flex; align-items: center; height: 60px; padding: 0 20px; font-size: 20px;}
.float .btn button{height: 40px;}
.float .btn button .icon{transition: transform .3s ease;}
.float:not(.closed) .btn button .icon{transform: rotate(180deg);}
.float:not(.closed) .right a{display: none;}
.float .btn > *{flex: 1;}
.float .btn button{display: flex; gap: 10px; justify-content: center; align-items: center; color: #FFF;}
.float .btn .right{display: flex; gap: 10px; justify-content: right; align-items: center;}

@media (max-width: 991.99px){
    .float .box{border-radius: 25px;}
    .float .link{padding: 20px; flex-direction: column; gap: 10px;}
    .float .link a{flex-basis: 40px;}
    .float .link a .tit{gap: 10px;}
    .float .link .icon{width: 16px;}
    .float .btn{height: 50px; font-size: 16px;}
}

/* sub */
.sub1{padding: 0;}
.sub1 .full_container{padding: 0;}
.sub1 .banner img{width: 100%;}

@media (min-width: 1200px){
    .banner_pc{display: block;}
    .banner_t{display: none;}
    .banner_m{display: none;}
}

@media (max-width: 1199.99px){
    .banner_pc{display: none;}
    .banner_t{display: block;}
    .banner_m{display: none;}

}
@media (max-width: 991.99px){
    .banner_pc{display: none;}
    .banner_t{display: none;}
    .banner_m{display: block;}
}

.sub2{background-image: url(../images/sub/sub2_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}

#bna_slide{position: relative; overflow: hidden;}
#bna_slide .slide{display: flex; transition: transform .4s ease; will-change: transform;}
#bna_slide .item{width: calc(50% - 10px); margin-right: 20px; flex-shrink: 0; border-radius: 20px; overflow: hidden;}
#bna_slide .item:last-child{margin-right: 0;}
#bna_slide .item img{width: 100%; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none;}
#bna_slide .scroll{max-width: 800px; width: 100%; height: 6px; background: #EADEED; border-radius: 100px; overflow: hidden; position: relative; margin: 40px auto 0}
#bna_slide .scroll::before{content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: var(--light-purple-); border-radius: 100px; transform: translateX(var(--move, 0)); transition: transform .4s ease;}

@media (max-width: 1199.99px){
    #bna_slide .scroll{margin: 30px auto 0;}
}

@media (max-width: 991.99px){
    #bna_slide .item{width: 100%; border-radius: 10px;}
    #bna_slide .scroll{margin: 20px auto 0;}
}

.sub3 .full_container{overflow: hidden;}

#gallery_slide .wrap{position: relative; max-width: 800px; margin-right: auto; margin-left: auto;}
#gallery_slide .slide{display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; transition: transform 0.5s ease-in-out; will-change: transform; gap: 40px; align-items: stretch;}
#gallery_slide .slide .item{min-width: 100%; height: auto; align-content: center; transition: .5s;}
#gallery_slide .slide .item:not(.active){opacity: 0.3; scale: 90%; transition: .5s;}
#gallery_slide .control{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 200px); height: 65px; display: flex; justify-content: space-between;}
#gallery_slide .control button{width: 60px;}

#gallery_slide .image{position: relative; width: 100%; overflow: hidden; aspect-ratio: 3/2; border-radius: 20px;}
#gallery_slide .image img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}

#gallery_slide .thumb{display: flex; gap: 10px; justify-content: center; margin-top: 20px; overflow: hidden; position: relative;}
#gallery_slide .thumb button{border: none; padding: 0; background: none; cursor: pointer; opacity: 0.5; width: 25%; border-radius: 10px; overflow: hidden;}
#gallery_slide .thumb button.active{opacity: 1;}
#gallery_slide .thumb img{object-fit: cover;}

.indicator{display: flex; justify-content: center; align-items: center; margin-top: 50px;}
.indicator button{width: 24px; height: 24px; background: none; border: 0; padding: 0; display: flex; justify-content: center; align-items: center;}
.indicator button.active .circle{width: 12px; height: 12px; border: 1px solid #212529; border-radius: 100%; background: none; transition: .2s;}
.indicator button .circle{width: 6px; height: 6px; background: #666; border-radius: 100%;}
.indicator button:hover .circle{width: 12px; height: 12px; border: 1px solid #212529; border-radius: 100%; background: none; transition: .2s ease-in-out;}

@media (min-width: 992px){
    .sub3 .full_container{padding: 0;}
}

@media (max-width: 1199.99px){
    #gallery_slide .wrap{max-width: 600px;}
    .indicator{margin-top: 40px;}
}

@media (max-width: 991.99px){
    #gallery_slide .control{display: none;}
    #gallery_slide .image{border-radius: 10px;}
    #gallery_slide .thumb{margin-top: 10px;}
    #gallery_slide .thumb button{border-radius: 4px;}
    .indicator{margin-top: 30px;}
}

.sub4{background-image: url(../images/sub/sub4_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.sub4 .row{display: flex; gap: 100px;}
.sub4 .thumb{aspect-ratio: 440/540; border-radius: 20px;}
.sub4 .text{flex: 1; align-content: center;}
.sub4 .text .top{margin-bottom: 50px; font-weight: 700; color: var(--purple-); font-size: 24px;}
.sub4 .text .top .name{font-size: 50px; margin-right: 10px;}
.sub4 .text .top span{display: inline-block;}
.sub4 .text .bottom{display: flex; gap: 20px;}
.sub4 .text .bottom > *{flex: 1;}

#doctor_slide{position: relative; overflow: hidden; touch-action: pan-y;}
#doctor_slide .slide{display: flex; transition: transform .5s ease; will-change: transform;}
#doctor_slide .row{width: 100%; flex-shrink: 0;}

@media (max-width: 1199.99px){
    .sub4 .row{display: flex; gap: 60px;}
    .sub4 .text .top .name{margin-right: 0;}
    .sub4 .text .top span{display: block;}
}

@media (min-width: 992px){
    .sub4 .thumb{flex-basis: 440px;}
}

@media (max-width: 991.99px){
    .sub4 .row{flex-direction: column; gap: 30px;}
    .sub4 .thumb{border-radius: 10px; max-width: 440px; margin: 0 auto;}
    .sub4 .text{text-align: center;}
    .sub4 .text .top{font-size: 16px; margin-bottom: 20px;}
    .sub4 .text .top .name{font-size: 28px;}
    .sub4 .text .bottom{flex-direction: column; gap: 0;}
}

/* 모션 */
.fade_up{opacity: 0; transform: translateY(50px); transition: opacity .3s ease-in, transform .6s ease-in-out;}
.fade_up.show{opacity: 1; transform: translateY(0);}

.fade_down{opacity: 0; transform: translateY(-50px); transition: opacity .3s ease-in, transform .6s ease-in-out;}
.fade_down.show{opacity: 1; transform: translateY(0);}

.fade_left{opacity: 0; transform: translateX(50px); transition: opacity .3s ease-in, transform .6s ease-in-out;}
.fade_left.show{opacity: 1; transform: translateX(0);}

.fade_right{opacity: 0; transform: translateX(-50px); transition: opacity .3s ease-in, transform .6s ease-in-out;}
.fade_right.show{opacity: 1; transform: translateX(0);}