@charset "utf-8";

html{
    scroll-behavior: smooth;
}
/*!
* fullPage 2.9.7
* https://github.com/alvarotrigo/fullPage.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
*/
.fp-enabled body,html.fp-enabled {
    margin:0;
    padding:0;
    overflow:hidden;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}
.fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell, .fp-auto-height.fp-section{
    height : auto !important;
}
.fp-section {
    position:relative;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.fp-slide {
    float:left
}
.fp-slide,.fp-slidesContainer {
    height:100%;
    display:block
}
.fp-slides {
    z-index:1;
    height:100%;
    overflow:hidden;
    position:relative;
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out
}
.fp-section.fp-table,.fp-slide.fp-table {
    display:table;
    table-layout:fixed;
    width:100%
}
.fp-tableCell {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%
}
.fp-slidesContainer {
    float:left;
    position:relative
}
.fp-controlArrow {
    -webkit-user-select:none;
    -moz-user-select:none;
    -khtml-user-select:none;
    -ms-user-select:none;
    position:absolute;
    z-index:4;
    top:50%;
    cursor:pointer;
    width:0;
    height:0;
    border-style:solid;
    margin-top:-38px;
    -webkit-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
.fp-controlArrow.fp-prev {
    left:15px;
    width:0;
    border-width:38.5px 34px 38.5px 0;
    border-color:transparent #fff transparent transparent
}
.fp-controlArrow.fp-next {
    right:15px;
    border-width:38.5px 0 38.5px 34px;
    border-color:transparent transparent transparent #fff
}
.fp-scrollable {
    overflow:hidden;
    position:relative
}
.fp-scroller {
    overflow:hidden
}
.iScrollIndicator {
    border:0!important
}
.fp-notransition {
    -webkit-transition:none!important;
    transition:none!important
}

/*# sourceMappingURL=jquery.fullpage.min.css.map */
::-webkit-scrollbar {
    display:none
}
.fp-viewing-2 #fullpage.delay {
    transition-delay:0.5s!important
}
.fp-viewing-3 #fullpage.delay {
    transition-delay:0.4s!important
}
#fullpage {
    background-color:#f1efeb
}
.section {
    position:relative;
    overflow:hidden
}
/* header */
header {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    padding:0 3%!important;
    z-index:100;
    background-color:#fff;
    transition:0.3s
}
header.main {
    background:transparent
}
header .head_in {
    height:90px;
    position:relative
}
header h1 {
    position:absolute;
    left:0;
    top:50%;
    margin-top:-28px;
    z-index:5
}
header h1 a {
    display:block;
    width:178px;
    height:57px;
    background-image:url(../img/logo-co.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    transition:0.3s
}
header .gnb {
    text-align:center;
    position:relative;
    padding-right:0;
    transition:0.3s
}
header .gnb .depth1-list {
    display:flex;
    justify-content:center
}
header .gnb .depth1-list>li {
    position:relative
}
header .gnb .depth1-list>li>a {
    display:block;
    line-height:90px;
    padding:0 30px;
    font-family:"Marcellus";
    font-size:.9rem;
    letter-spacing:.02em;
    color:#171717;
    transition:0.3s;
    font-family:"Noto Sans KR";
    font-weight:400
}
header .gnb .depth1-list>li a:nth-child(2) {
    padding:0 20px!important
}
header .gnb .depth2-list {
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    display:none;
    box-sizing:border-box
}
header .gnb .depth2-list ul {
    background-color:#0793aa;
    padding:20px 0;
    max-width:150px;
    margin:0 5px;
    box-sizing:border-box
}
header .gnb .depth2-list ul li a {
    display:block;
    color:#fff;
    font-size:.88rem;
    line-height:2em;
    font-weight:300
}
header .head_info {
    display:flex;
    align-items:center;
    position:absolute;
    right:0;
    top:50%;
    transform:translate(0,-50%);
    z-index:4;
    padding-left:2rem
}
header .head_info:before {
    content:"";
    width:1.188rem;
    height:1.188rem;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:url(../img/tel.png) center no-repeat;
    transform:translateY(0);
    background-size:cover;
    transition:0.3s
}
header .head_info p {
    display:flex;
    align-items:flex-end;
    margin-right:0
}
header .head_info p span {
    margin-right:10px;
    font-size:.938rem;
    color:#282828;
    transition:0.3s
}
header .head_info p strong {
    font-weight:900;
    font-size:1.5rem;
    color:#0793aa;
    letter-spacing:0;
    transition:0.3s
}
header .head_info .open {
    font-size:.875rem;
    padding:0 15px;
    line-height:33px;
    border-radius:30px;
    color:#0793aa;
    border:1px solid #0793aa;
    transition:0.3s
}
header .gnb {
    text-align:center;
    position:relative;
    padding-right:0;
    transition:0.3s
}
header .gnb .depth1-list {
    display:flex;
    justify-content:center
}
header.head_info .open strong {
    font-weight:600;
    letter-spacing:0em
}
header .menu {
    position:absolute;
    right:0;
    top:50%;
    transform:translate(0,-50%);
    display:flex;
    align-items:center;
    background:none;
    border:none;
    z-index:5
}
header .menu .line {
    display:none;
    width:23px
}
header .menu .line span {
    display:block;
    background-color:#0793aa;
    height:2px;
    width:100%;
    position:relative;
    transition:0.3s
}
header .menu .line span~span {
    margin-top:5px
}
header .menu p {
    font-family:"Marcellus";
    font-size:1.063rem;
    padding-left:10px;
    position:relative;
    color:#111;
    transition:0.3s
}
header .menu .dot {
    display:block;
    width:3px;
    height:3px;
    transition:0.3s;
    position:absolute;
    left:0;
    background-color:#111
}
header .menu .dot.top {
    top:2px
}
header .menu .dot.bot {
    bottom:3px
}
header .menu.close p {
    color:#111!important
}
header .menu.close .dot {
    width:3px;
    height:14px;
    background-color:#111
}
header .menu.close .dot.top {
    transform:rotate(45deg);
    top:1px
}
header .menu.close .dot.bot {
    transform:rotate(-45deg);
    bottom:2px
}
header .menu.close .line span:first-child {
    transform:rotate(45deg);
    top:7px
}
header .menu.close .line span:nth-child(2) {
    opacity:0
}
header .menu.close .line span:last-child {
    transform:rotate(-45deg);
    top:-7px
}
 header h1 a,.fp-viewing-2 header h1 a {
    background-image:url(../img/logo-co.png)
}
 header .gnb .depth1-list>li>a,.fp-viewing-2 header .gnb .depth1-list>li>a {
    color:#171717
}
.fp-viewing-6 header .gnb .depth1-list>li>a {
    color:#fff
}
.fp-viewing-7 header .gnb .depth1-list>li>a {
    color:#fff
}

.fp-viewing-7 header .head_info:before {
    background:url(../img/logo_wh.png) center no-repeat;
    background-size:cover
}
 header .head_info p span,.fp-viewing-2 header .head_info p span {
    color:#282828
}
 header .head_info p strong,.fp-viewing-2 header .head_info p strong {
    color:#0793aa
}
.fp-viewing-3 header .head_info p span,.fp-viewing-7 header .head_info p strong {
    color:#fff
}
 header .head_info .open,.fp-viewing-2 header .head_info .open {
    color:#0793aa;
    border:1px solid #0793aa
}
.fp-viewing-3 header .head_info .open {
    color:#fff;
    border:1px solid #fff
}
 header .dot,.fp-viewing-2 header .dot {
    background-color:#111
}

.fp-viewing-8 header {
    opacity:0
}
 header .menu .line span,.fp-viewing-2 header .menu .line span {
    background-color:#0793aa
}
.fp-viewing-7 header .menu .line span {
    background-color:#fff
}
header:hover {
    background-color:#fff
}
header:hover h1 a {
    background-image:url(../img/logo-co.png)
}
header:hover .gnb .depth1-list>li>a {
    color:#171717
}
header .gnb .depth1-list>li>a:hover {
    color:#0793aa
}
header:hover .menu p {
    color:#111
}
header:hover .dot {
    background-color:#111
}
header:hover .head_info p span {
    color:#282828
}
header:hover .head_info p strong {
    color:#0793aa
}
header:hover .head_info .open {
    color:#0793aa;
    border:1px solid #0793aa
}
header:hover .menu .line span {
    background-color:#0793aa
}
header.nav_on {
    background-color:transparent
}
header.nav_on h1 a {
    background-image:url(../img/logo-co.png)
}
header.nav_on:hover .menu p {
    color:#111
}
header.nav_on .gnb,header.nav_on .head_info {
    opacity:0;
    z-index:-1
}
header.nav_on .menu .line span {
    background-color:#111
}
.ham_wrap {
    position:fixed;
    width:100%;
    left:0;
    right:0;
    margin:auto!important;
    z-index:99;
    top:100%
}
.ham {
    z-index:99;
    position:absolute;
    left:65px;
    bottom:62px;
    width:87px;
    height:87px;
    border-radius:23%;
    background-color:#0793aa;
    cursor:pointer;
    opacity:1;
    transition:0.3s
}
.ham span {
    display:block;
    background:#070707;
    margin:auto;
    width:25px;
    height:2px;
    border-radius:0;
    transition:0.25s
}
.ham .bar1 {
    margin-top:34px;
    margin-bottom:6px
}
.ham .bar2 {
    width:14px;
    transform:translateX(5px)
}
.ham .bar3 {
    margin-top:6px
}
.ham_bg {
    width:137px;
    height:136px;
    background:url(../img/ham_bg_b.png) center no-repeat;
    background-size:cover;
    transition:0.3s;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(0);
    animation:ham_bg 6s 0s linear infinite;
    max-width:revert
}
 .ham_bg,.ham_bg,.fp-viewing-2 .ham_bg,.fp-viewing-7 .ham_bg {
    background:url(../img/ham_bg.png) center no-repeat;
    background-size:cover
}

@keyframes ham_bg {
    from {
        transform:translate(-50%,-50%) rotate(-180deg)
    }
}
.ham span {
    background-color:#fff
}
.ham.active {
    transition:0s
}
.ham.active span {
    background-color:#fff
}
.ham.active .bar1 {
    transform:rotate(45deg);
    margin-top:42px
}
.ham.active .bar2 {
    opacity:0
}
.ham.active .bar3 {
    transform:rotate(-45deg);
    margin-top:-10px
}
/* footer */
footer {
    background-color:#f1efeb;
    padding:95px 60px 125px;
    text-align:center
}
footer .foot_in {
    position:relative
}
footer .top {
    position:absolute;
    right:50px;
    top:25px;
    cursor:pointer;
    display:none
}
footer .top p {
    color:#6b6b6b;
    font-weight:500;
    padding-right:25px;
    background:url(../img/foot-top.png) no-repeat right center
}
footer .foot_logo {
    margin-bottom:45px
}
footer .foot_logo span {
    display:block;
    background:url(../img/foot-logo.png) no-repeat center;
    background-size:contain;
    width:300px;
    height:95px;
    margin:0 auto
}
footer .foot_brand {
    margin-bottom:20px
}
footer .foot_brand_txt {
    color:#363636;
    font-size:.875rem;
    font-weight:300;
    margin-bottom:15px;
    line-height:1.3em
}
footer .foot_info {
    color:#363636;
    font-size:1rem;
    font-weight:300;
    margin-bottom:25px;
    line-height:1.5em
}
footer .copy {
    margin-bottom:35px;
    font-weight:300;
    color:#696969;
    font-size:.875rem
}
footer .ori {
    font-weight:300;
    color:#696969;
    font-size:.875rem;
    line-height:2em
}
#section3 footer .top {
    display:block;
    opacity:0;
    transition:0.6s;
    transition-delay:0.1s
}
#section3 footer .foot_logo {
    opacity:0;
    transition:0.6s
}
#section3 footer .foot_brand {
    opacity:0;
    transform:translate(0,30px);
    transition:0.6s;
    transition-delay:0.2s
}
#section3 footer .foot_brand_txt {
    opacity:0;
    transform:translate(0,30px);
    transition:0.6s;
    transition-delay:0.4s
}
#section3 footer .foot_info {
    opacity:0;
    transform:translate(0,30px);
    transition:0.6s;
    transition-delay:0.6s;
    width:80%;
    margin:0 auto
}
#section3 footer .copy {
    opacity:0;
    transform:translate(0,30px);
    transition:0.6s;
    transition-delay:0.8s;
    margin-top:15px
}
#section3 footer .ori {
    opacity:0;
    transform:translate(0,30px);
    transition:0.6s;
    transition-delay:1s
}
#section3.fp-completely footer .top,#section3.fp-completely footer .foot_logo,#section3.fp-completely footer .foot_brand,#section3.fp-completely footer .foot_brand_txt,#section3.fp-completely footer .foot_info,#section3.fp-completely footer .copy,#section3.fp-completely footer .ori {
    opacity:1;
    transform:none
}
.fp-viewing-0 .sec_menu li em, .fp-viewing-1 .sec_menu li em, .fp-viewing-2 .sec_menu li em, .fp-viewing-3 .sec_menu li em, .fp-viewing-4 .sec_menu li em, .fp-viewing-5 .sec_menu li em, .fp-viewing-6 .sec_menu li em{
    background-color: #1a1a1a;
}
.fp-viewing-0 .sec_menu .menu1 span{
    transform: scale(1);
}
.fp-viewing-1 .sec_menu .menu0b span{
        transform: scale(1);
}
.fp-viewing-2 .sec_menu .menu2 span{
    transform: scale(1);
}
.fp-viewing-3 .sec_menu .menu3 span{
    transform: scale(1);
}
.fp-viewing-4 .sec_menu .menu4 span{
    transform: scale(1);
}
.fp-viewing-5 .sec_menu .menu5 span{
    transform: scale(1);
}
.fp-viewing-6 .sec_menu .menu6 span{
    transform: scale(1);
}
.fp-viewing-7 .sec_menu .menu7 span{
    transform: scale(1);
}
.fp-viewing-8 .sec_menu .menu8 span{
    transform: scale(1);
}

.fp-viewing-0 .sec_menu li span, .fp-viewing-1 .sec_menu li span, .fp-viewing-2 .sec_menu li span, .fp-viewing-3 .sec_menu li span, .fp-viewing-4 .sec_menu li span, .fp-viewing-5 .sec_menu li span, .fp-viewing-6 .sec_menu li span{
    background-color: rgba(26, 26, 26, 0.1);
}
.sec_menu {
    position:fixed;
    right:50px;
    top:50%;
    z-index:50;
    transform:translate(0,-50%);
    transition:0.3s
}
.sec_menu li {
    width:35px;
    height:35px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.sec_menu li~li {
    margin-top:25px
}
.sec_menu li span {
    position:absolute;
    left:0;
    top:0;
    display:block;
    border-radius:50%;
    width:100%;
    height:100%;
    transform:scale(0);
    transition:0.3s
}
.sec_menu li em {
    width:5px;
    height:5px;
    border-radius:50%;
    transition:0.3s
}
/* nav */
nav {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:-1;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:0.6s
}
nav ul {
    text-align:center;
    position:relative;
    z-index:5
}
nav ul li {
    opacity:0;
    transform:translate(0,60%);
    transition:0.8s
}
nav ul li~li {
    margin-top:50px
}
nav ul li>a {
    font-family:"Marcellus";
    display:block;
    color:transparent;
    font-size:2.125rem;
    line-height:1.2em;
    background:linear-gradient(180deg,#fff 0%,#fff 50%,#111 50%,#111 100%);
    -webkit-background-clip:text;
    background-size:100% 200%;
    background-repeat:no-repeat;
    transition:0.8s
}
nav.on ul li:nth-child(1) {
    transition-delay:0.3s
}
nav.on ul li:nth-child(2) {
    transition-delay:0.4s
}
nav.on ul li:nth-child(3) {
    transition-delay:0.5s
}
nav.on ul li:nth-child(4) {
    transition-delay:0.6s
}
nav.on ul li:nth-child(5) {
    transition-delay:0.7s
}
nav.on ul li:nth-child(6) {
    transition-delay:0.8s
}
nav.on ul li:nth-child(7) {
    transition-delay:0.9s
}
nav.on ul li:nth-child(8) {
    transition-delay:1s
}
nav ul li:hover>a {
    background-position:0% 100%
}
nav ul li .dep2 {
    margin-top:-1.125rem;
    opacity:0;
    position:relative;
    z-index:-1;
    transition:0.5s
}
nav ul li:hover .dep2 {
    margin:1.675rem;
    opacity:1;
    z-index:1
}
nav ul li .dep2 p {
    display:flex;
    justify-content:center
}
nav ul li .dep2 p a {
    font-weight:500;
    color:transparent;
    background:linear-gradient(180deg,#fff 0%,#fff 50%,#111 50%,#111 100%);
    -webkit-background-clip:text;
    background-size:100% 200%;
    background-repeat:no-repeat;
    font-size:1.125rem;
    transition:0.3s
}
nav ul li .dep2 p a~a {
    margin-left:30px
}
nav ul li .dep2 p a:hover {
    background-position:0% 100%
}
.nav_bg {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(202,239,245,.95);
    opacity:0;
    transition:0.6s
}
nav.on {
    z-index:90;
    opacity:1
}
nav.on ul li {
    transform:none;
    opacity:1
}
.nav_bg.on {
    z-index:89;
    opacity:1
}
.intro {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:200;
    background-color:#fff;
    cursor:none;
    transition:0.6s
}
.intro .intro_wrap {
    position:absolute;
    left:50%;
    top:50%;
    z-index:10;
    opacity:0;
    transition:1s;
    transition-delay:1s
}
.intro .intro_wrap .intro_logo {
    position:absolute;
    left:0;
    top:0;
    margin:0 auto;
    margin-left:-23px;
    margin-top:-39px;
    transition:1s
}
.intro .intro_wrap .intro_logo img {
    display:block;
    width:45px;
    height:64px;
    max-width:none;
    transition:1s
}
.intro .intro_wrap .intro_logo .intro_logo_co {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:0;
    background:#fff url(../img/intro-logo-co.png) no-repeat center bottom;
    background-size:cover;
    transition:0.8s;
    transition-delay:1.5s
}
.intro .intro_wrap .intro_txt {
    position:absolute;
    left:0;
    top:0;
    margin:0 auto;
    margin-left:-85px;
    margin-top:39px;
    transition:1s
}
.intro .intro_wrap .intro_txt img {
    width:169px;
    height:24px;
    max-width:none;
    transition:1s
}
.intro .intro_wrap .intro_txt span {
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:0;
    background:#fff url(../img/intro-txt.png) no-repeat center bottom;
    background-size:cover;
    transition:0.6s;
    transition-delay:1.5s
}
.intro .line {
    position:relative;
    left:0;
    top:0;
    width:100%;
    height:100%
}
.intro .line li {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center
}
.intro .line li::after {
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    background-color:#fff
}
.intro .line .l1 {
    background-image:url(../img/intro-line1.png);
    z-index:3
}
.intro .line .l2 {
    background-image:url(../img/intro-line2.png);
    z-index:2
}
.intro .line .l3 {
    background-image:url(../img/intro-line3.png);
    z-index:1
}
.intro .skip_ball {
    position:absolute;
    top:-100px;
    left:-100px;
    z-index:10
}
.intro .skip_ball>div {
    position:relative
}
.intro .skip_ball p {
    width:45px;
    height:45px;
    background:#0793aa;
    color:#fff;
    border-radius:50%;
    text-align:center;
    line-height:45px;
    position:relative;
    font-size:.813rem;
    z-index:5
}
.intro .skip_ball span {
    background:#0793aa85;
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border-radius:50%;
    z-index:0;
    -webkit-animation:skip 2s ease infinite;
    -moz-animation:skip 2s ease infinite;
    -ms-animation:skip 2s ease infinite;
    -o-animation:skip 2s ease infinite;
    animation:skip 2s ease infinite
}
@keyframes skip {
    0% {
        opacity:1
    }
    50% {
        opacity:.6
    }
    100% {
        transform:scale(1.4);
        opacity:0
    }
}
.intro.on .line li::after {
    width:0;
    transition:1s
}
.intro.on .line .l1::after {
    transition-timing-function:cubic-bezier(.42,0,1,1)
}
.intro.on .line .l2::after {
    transition-delay:0.1s;
    transition-timing-function:ease-in
}
.intro.on .line .l3::after {
    transition-delay:0.2s;
    transition-timing-function:ease-in
}
.intro.on .intro_wrap {
    opacity:1
}
.intro.on .intro_wrap .intro_logo_co {
    opacity:1;
    height:100%
}
.intro.on .intro_wrap .intro_txt span {
    height:100%
}
.intro.move .intro_wrap {
    left:60px;
    top:17px;
    transition-delay:0s
}
.intro.move .intro_wrap .intro_logo {
    margin:0
}
.intro.move .intro_wrap .intro_logo img {
    width:34px;
    height:49px
}
.intro.move .intro_wrap .intro_txt {
    margin:0;
    left:47px;
    top:20px
}
.intro.move .intro_wrap .intro_txt img {
    width:131px;
    height:19px
}
.intro.move .intro_wrap .intro_logo .intro_logo_co,.intro.move .intro_wrap .intro_txt span {
    opacity:0;
    transition-delay:0s
}
.intro.end {
    opacity:0;
    z-index:-1
}
.vis,.vis_sd {
    height:100%;
    position:relative
}
.vis_sd .bg_wrap {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:1;
    perspective:2000px;
    transition-delay:0.5s;
    opacity : 1;
    
}
.vis_sd .bg_3d {
    width:100%;
    height:100%;
    transform-style:preserve-3d
}
.vis_sd .bg {
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    transition: all 2s ease;
    perspective:2000px;
}
.vis_sd .sd1 .bg {
    background-image:url(../img/main_img_2.jpg);
    transform:scale(1.2);
    background-size : cover;
}
.video_wrap {
    position:relative;
    width:702px;
    border-radius:20px;
    overflow:hidden;
    margin:25px auto;
    transition:4s;
    transition-delay:.5;
    transform:translate3d(2px,1px,1px)
}
.vis_sd .vis_txt {
    position:absolute;
    text-align:center;
    left:0;
    right:0;
    margin:auto;
    top:18%;
    z-index:10;
    color:#000
}
.vis_sd .vis_txt h3 {
    font-size:2.25rem;
    line-height:100%;
    font-weight:200
}
.vis_sd .vis_txt h1 {
    font-family:"Nanum Myeongjo";
    font-size:3.25rem;
    line-height:100%;
    font-weight:600;
    color:#0793aa;
    margin-top:.85rem
}
.vis_sd .vis_txt p {
    font-size:1rem;
    line-height:1.875rem;
    margin-top:2.2rem
}
.vis_sd .vis_txt p span {
    font-size:1.125rem
}
.vis_sd .vis_txt dl {
    position:absolute;
    transform:translate(50%,-50%);
    right:35%;
    top:44%;
    letter-spacing:-.05em
}
.vis_sd .vis_txt dl dt {
    font-family:"Nanum Myeongjo";
    color:#1c1c19;
    font-weight:600;
    margin-bottom:25px;
    font-size:1.375rem
}
.vis_sd .vis_txt dl dd {
    font-family:"Nanum Myeongjo";
    color:#1c1c19;
    font-weight:400;
    font-size:4.5rem;
    line-height:1.194em
}
.vis_sd .vis_txt dl dd span {
    color:#897159;
    font-weight:800
}
.vis.start .vis_sd .swiper-slide-active .bg {
    transform:none;
}
.sns-list {
    position:fixed;
    bottom:50px;
    right:60px;
    z-index:10;
    display:flex
}
.sns-list li~li {
    margin-left:15px
}
.sns-list li a {
    display:block;
    width:46px;
    height:46px;
    background-repeat:no-repeat;
    background-size:cover;
    transition:0.3s
}
.sns-list li.main_open a {
    background-color:#0793aa;
    color:#fff;
    text-align:center;
    border-radius:22px;
    font-weight:600;
    line-height:normal;
    padding:12px 20px;
    height:auto;
    font-size:1.1rem;
    width:200px
}
.sns-list li.insta a {
    background-image:url(../img/sns-icon1b.png)
}
.sns-list li.youtube a {
    background-image:url(../img/sns-icon2b.png)
}
.sns-list li.kakao a {
    background-image:url(../img/sns-icon3b.png)
}
.sns-list li.insta a:hover {
    background-image:url(../img/sns-icon1.png)!important
}
.sns-list li.youtube a:hover {
    background-image:url(../img/sns-icon2.png)!important
}
.sns-list li.kakao a:hover {
    background-image:url(../img/sns-icon3.png)!important
}
.vis_cont {
    display:flex;
    align-items:center;
    position:absolute;
    left:60px;
    bottom:70px;
    z-index:50
}
.vis_cont .arr {
    border:none;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-color:transparent;
    width:10px;
    height:15px
}
.vis_cont .vis_prev {
    background-image:url(../img/vis-prev.png)
}
.vis_cont .vis_next {
    background-image:url(../img/vis-next.png);
    margin-left:20px
}
.vis_cont .vis_pagination {
    color:#fff;
    font-size:.875rem;
    font-family:"Jost";
    font-weight:600;
    width:auto;
    letter-spacing:.05em;
    margin-left:20px
}
.vis_cont .btn {
    width:9px;
    height:13px;
    border:none;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-color:transparent;
    margin-left:15px
}


.scroll_wrap {
    width:12px;
    height:100%;
    margin:auto;
    overflow:hidden
}
.scroll_img {
    width:9px;
    margin:auto;
    height:38px;
    background:url(../img/scroll_b.png) center no-repeat;
    transition:0.3s
}
.scroll {
    width:1px;
    height:125px;
    background-color:rgba(0,0,0,.4);
    margin:auto;
    margin-top:15px;
    position:relative;
    transition:0.3s
}
.scroll span {
    position:absolute;
    content:"";
    width:10px;
    height:10px;
    background-color:#0793aa;
    left:-4px;
    top:0;
    border-radius:100%
}
.fp-viewing-2 .scroll,.fp-viewing-7 .scroll {
    background-color:rgba(255,255,255,.4)
}
.fp-viewing-2 .scroll_img,.fp-viewing-7 .scroll_img {
    background:url(../img/scroll_w.png) center no-repeat
}

@keyframes scr {
    0% {
        bottom:70px
    }
    50% {
        bottom:60px
    }
    100% {
        bottom:70px
    }
}
@keyframes scroll_arr {
    0% {
        opacity:0
    }
    50% {
        opacity:1
    }
    100% {
        opacity:0
    }
}
@keyframes vis_txt {
    0% {
        background-position:200%
    }
    100% {
        background-position:0%
    }
}


#section1.fp-completely .mask {
    display:none
}
#section1 .mask {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:50
}
#section1 .black_mask {
    position:absolute;
    z-index:3;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#f1efeb;
    opacity:0;
    transition:0.4s
}
#section1 .mobile_mask {
    display:none;
    position:absolute;
    z-index:60;
    left:0;
    top:0;
    width:100%;
    height:100%
}
.scroll_wrap {
    height:100%;
    overflow-y:scroll;
    position:relative;
    z-index:5
}
.scroll_con {
    height:300vh;
    position:relative
}
.scroll_wrap::-webkit-scrollbar {
    display:none
}
.trigger1 {
    position:absolute;
    left:0;
    top:0;
    opacity:0
}
.ball_bg {
    border-radius:50%;
    width:0;
    height:0;
    background-color:#fff;
    display:flex;.
    align-items:center;
    justify-content:center;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    overflow:hidden;
    transition:0.1s;
    transition-timing-function:cubic-bezier(1,1,1,1);
    z-index:1;
    will-change:auto
}
.ball_bg .bg {
    background:url(../img/brand-bg.jpg) no-repeat center;
    background-size:cover;
    width:100vw;
    height:100vh;
    opacity:0;
    transition:0.1s
}
.brand_txt {
    position:absolute;
    left:calc(61% - 60px);
    top:55%;
    transform:translate(-50%,-50%);
    transition:0.1s;
    transition-timing-function:cubic-bezier(1,1,1,1);
    z-index:2;
    will-change:auto
}
.brand_txt .tit ul {
    display:flex
}
.brand_txt .tit span {
    display:block;
    color:#171717;
    font-size:1.25rem;
    font-weight:200;
    margin-bottom:5px
}
.brand_txt .tit p {
    font-size:6.46vw;
    font-family:"Poppins";
    font-weight:700
}
.brand_txt .tit .black p {
    color:#111
}
.brand_txt .tit .white p {
    color:transparent;
    -webkit-text-stroke:1px #111
}
.brand_txt .tit p em {
    padding:0 40px;
    font-weight:600;
    color:#111;
    -webkit-text-stroke:transparent
}
.brand_txt .txt {
    margin-top:70px;
    color:#171717;
    font-weight:300;
    line-height:1.5em
}
.fp-viewing-2 #section1 .black_mask {
    transition:0.6s;
    transition-delay:1.1s
}
.fp-viewing-3 #section1 .black_mask {
    opacity:1
}
.cal_box {
    font-family:"Noto Sans KR";
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-between;
    text-align:center
}
.cal_left {
    width:33%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:url(../img/cal_left_bg.jpg) center no-repeat;
    background-size:cover
}
.cal_right {
    width:67%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: #fff;
    background-size:cover
}
.cal_left_txt {
    transform:translateY(-100px)
}
.cal_left_txt h4 {
    font-size:1.375rem;
    line-height:1.875rem;
    color:#000;
    font-weight:400;
    opacity:0;
    transform:translateY(-3.5rem)
}
.cal_left_txt>div {
    width:1px;
    height:4rem;
    background-color:#6d6d6d;
    margin:auto;
    margin-top:2rem;
    opacity:0;
    transform:translateY(-3.5rem)
}
.cal_logo {
    margin-top:2rem;
    opacity:0;
    transform:translateY(-3.5rem)
}
.cal_right>div {
    width:100%;
    transform:translateY(-20px)
}
.cal_tit {
    opacity:0;
    transform:translateY(3.5rem)
}
.cal_tit h2 {
    font-family:"Carisma Gothic";
    font-weight:700;
    font-size:5.625rem;
    line-height:100%;
    color:#0793aa;
}
.cal_tit p {
    font-size:1.2rem;
    line-height:100%;
    color:#505050;
    margin-top:.8rem
}
.cal_right ul {
    width:90%;
    margin:auto;
    max-width:790px;
    height:auto;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:4rem;
    opacity:0;
    transform:translateY(3.5rem)
}
.cal_right ul li {
    width:32%;
    height:150px;
    box-sizing:border-box;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#fff;
    border-radius:21px;
    box-shadow:0 0 20px 0px #3a3a3a0d;
    margin-bottom : 1rem;
}
.cal_right ul li:nth-child(1) {
    font-family:"Pretendard"
}
.cal_right ul li:nth-child(1) h5 {
    font-weight:500
}

.cal_right ul li h3 {
    font-family:"Pretendard";
    font-weight:700;
    font-size:1.7rem;
    line-height:100%;
    color:#181818
}
.cal_right ul li h5 {
    font-size:.9rem;
    line-height:100%;
    font-weight:400;
    color:#181818;
    margin-top:.2rem
}
.cal_right ul li:hover {
    background-color:#0793aa;
    cursor:pointer
}
.cal_right ul li:hover h3 {
    color:#fff
}
.cal_right ul li:hover h5 {
    color:#fff
}
.cal_box.active .cal_left_txt h4 {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.cal_box.active .cal_left_txt>div {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.cal_box.active .cal_left_txt .cal_logo {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.cal_box.active .cal_tit {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.cal_box.active .cal_right ul {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.location_box {
    font-family:"Noto Sans KR";
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-between;
    text-align:center
}
.location_con {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    background-color:#e3f2f7;
    overflow:hidden
}
.location_con:after {
    content:"";
    width:1px;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    background-color:#d0d0d0
}
.location_con:last-child:after {
    display:none
}
.location_img {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    transform:scale(1.2);
    opacity:0;
    z-index:1;
    transition:1s
}
.location_img.img01 {
    background:url(../img/location_img01.jpg) center no-repeat;
    background-size:cover
}
.location_img.img02 {
    background:url(../img/location_img02.jpg) center no-repeat;
    background-size:cover
}
.location_img.img03 {
    background:url(../img/location_img03.jpg) center no-repeat;
    background-size:cover
}
.location_img.img04 {
    background:url(../img/location_img04.jpg) center no-repeat;
    background-size:cover
}
.location_con .location_txt_box {
    z-index:9;
    transform:translateY(-20px)
}
.location_icon_box {
    width:105px;
    height:105px;
    position:relative;
    margin:auto;
    border-radius:100%;
    border:1px solid #fff;
    background-color:#fff
}
.location_icon_box>img {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto
}
.location_icon_box .icon_b {
    opacity:1
}
.location_icon_box .icon_w {
    opacity:0
}
.location_con h3 {
    font-size:1.25rem;
    line-height:1.5rem;
    font-weight:600;
    margin-top:2.625rem;
    color:#252525;
    transition:0.3s
}
.location_con p {
    font-size:.875rem;
    line-height:1.5rem;
    font-weight:400;
    margin-top:1.875rem;
    color:#252525;
    opacity:.7;
    transition:0.3s
}
.location_con h4 {
    font-family:"Carisma Gothic";
    font-size:1.125rem;
    line-height:100%;
    color:#0793aa;
    font-weight:700;
    margin-top:3rem
}
.location_line {
    width:1px;
    height:4.25rem;
    margin:auto;
    margin-top:2.75rem;
    background-color:#0793aa;
    transition:0.3s
}
.location_obj {
    mix-blend-mode:multiply;
    margin-top:3rem;
    transition:0.3s
}
.location_con:hover .location_img {
    transform:scale(1);
    opacity:1
}
.location_con:hover h3 {
    color:#fff
}
.location_con:hover p {
    color:#fff
}
.location_con:hover .location_line {
    opacity:0
}
.location_con:hover .location_obj {
    opacity:0
}
.complex_box {
    font-family:"Noto Sans KR";
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center
}
.complex_left_bg {
    width:50%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:#e9fcff;
    background-size:cover
}
.complex_right_bg {
    width:50%;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    background-color:#fff;
    background-size:cover
}
.complex_content {
    width:90%;
    max-width:1400px;
    margin:auto;
    position:relative;
    z-index:9;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.swiper_complex {
    width:62.14%;
    opacity:0;
    transform:translateX(-4.5rem);
    margin:revert
}
.swiper-button-next {
    height:81px;
    position:absolute;
    right:-110px;
    top:0;
    bottom:0;
    margin:auto;
    width:auto;
    opacity:0
}
.swiper-button-prev {
    height:81px;
    position:absolute;
    left:-110px;
    top:0;
    bottom:0;
    margin:auto;
    width:auto;
    opacity:0
}
.swiper-button-next img,.swiper-button-prev img {
    max-width:revert
}
.complex_img_box {
    width:100%;
    position:relative;
    border-radius:77px;
    overflow:hidden
}
.complex_img {
    width:100%;
    max-width:revert
}
.complex_img_box h6 {
    font-size:.875rem;
    line-height:100%;
    position:absolute;
    right:52px;
    bottom:30px;
    color:#fff;
    font-weight:300;
    text-shadow:0 0 5px rgba(0,0,0,.8),0 0 5px rgba(0,0,0,.8),0 0 5px rgba(0,0,0,.8)
}
.complex_txt_box {
    text-align:left;
    color:#000;
    opacity:0;
    transform:translateX(4.5rem)
}
.complex_txt_box h4 {
    font-size:1.25rem;
    line-height:100%;
    font-weight:400;
    margin-top:2.25rem
}
.complex_txt_box h2 {
    font-size:2.25rem;
    line-height:2.875rem;
    font-weight:200;
    margin-top:.4rem;
    margin-bottom:1.5rem
}
.complex_txt_box h2 b {
    font-weight:700
}
.complex_txt_box h2 span {
    color:#0793aa
}
.complex_txt_box p {
    font-size:.938rem;
    line-height:100%;
    font-weight:400;
    margin-bottom:1.6rem
}
.complex_txt_box h5 {
    font-size:1.5rem;
    line-height:100%;
    font-weight:600;
    color:#0793aa;
    margin-bottom:.4rem
}
.complex_box.active .swiper_complex {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.complex_box.active .complex_txt_box {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.complex_box.active .swiper-button-next {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.complex_box.active .swiper-button-prev {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.prus_box {
    font-family:"Noto Sans KR";
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#e6f4f7
}
.prus_bg {
    width:50%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    background-color:#fff
}
.prus_content_box {
    width:90%;
    max-width:1540px;
    height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:8;
    position:relative
}
.prus_tit {
    position:absolute;
    left:0;
    top:0;
    transform:translateX(-4.5rem);
    opacity:0
}
.prus_tit h5 {
    font-size:1.25rem;
    line-height:1.875rem;
    color:#000;
    font-weight:400;
    margin-top:2rem
}
.prus_tit h2 {
    position:relative;
    left:-3px;
    font-size:3.5rem;
    line-height:4.063rem;
    color:#363636;
    font-weight:200;
    margin-top:1.4rem
}
.prus_tit h2 b {
    font-weight:700
}
.prus_ori {
    position:absolute;
    right:0;
    bottom:0;
    text-align:right;
    color:#000;
    transform:translateX(4.5rem);
    opacity:0
}
.prus_ori h5 {
    font-size:1.125rem;
    line-height:100%;
    font-weight:400;
    margin-top:1.25rem
}
.prus_ori p {
    font-size:.875rem;
    line-height:100%;
    opacity:.7;
    font-weight:400;
    margin-top:.625rem
}
.prus_content {
    width:100%;
    margin:auto;
    position:relative
}
.prus_img_box {
    width:100%;
    border-radius:7rem;
    overflow:hidden;
    position:relative
}
.prus_img_box>img {
    width:100%;
    opacity:1;
    overflow: hidden;
}
.prus_img_box:before {
    content:"";
    width:100%;
    height:100%;
    border-radius:10rem;
    position:absolute;
    left:0;
    top:0;
    z-index:9
}
.prus_txt_box {
    width:450px;
    position:absolute;
    right:-135%;
    top:5%;
    transform:rotate(90deg) translateX(80px);
    transform-origin:left top;
    opacity:0
}
.prus_txt_box h4 {
    font-family:"Nanum Myeongjo";
    font-size:1.875rem;
    line-height:100%;
    color:#0793aa;
    font-weight:600
}
.prus_txt_box p {
    font-size:.938rem;
    line-height:1.563rem;
    margin-top:1rem;
    color:#000;
    opacity:.8
}
.prus_num {
    font-family:"Carisma Gothic";
    font-size:11.75rem;
    line-height:100%;
    color:#d6d6d6;
    font-weight:100;
    position:absolute;
    right:-125%;
    top:0;
    opacity:0
}
.prus_leaf {
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    bottom:0;
    z-index:9;
    transform:translate(-200px,5.5rem);
    opacity:0;
    width:12.188rem
}
.swiper1 {
    width:100%;
    width:28.18%;
    margin:auto;
    overflow:visible;
    transform:translateY(5.5rem);
    opacity:0
}
.swiper1 .swiper-slide.swiper-slide-active .prus_img_box img {
    animation:prus_img 1.6s 0s both
}
.swiper1 .swiper-slide.swiper-slide-active .prus_img_box:before {
    animation:prus_img2 1.6s 0s both
}
.swiper1 .swiper-slide.swiper-slide-active .prus_txt_box {
    animation:prus_txt_box 1s 0s both
}
.swiper1 .swiper-slide.swiper-slide-active .prus_num {
    animation:prus_num 1s 0s both
}
.swiper-button-next2 {
    height:81px;
    position:absolute;
    right:270px;
    top:0;
    bottom:0;
    margin:auto;
    width:auto;
    transform:translateY(5.5rem);
    opacity:0
}
.swiper-button-prev2 {
    height:81px;
    position:absolute;
    left:410px;
    top:0;
    bottom:0;
    margin:auto;
    width:auto;
    transform:translateY(5.5rem);
    opacity:0
}
.swiper-button-next2 img,.swiper-button-prev2 img {
    max-width:revert
}
@keyframes prus_img {
    from {
        opacity:0;
        transform:scale(1.22)
    }
    to {
        opacity:1
    }
}
@keyframes prus_img2 {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}
@keyframes prus_txt_box {
    from {
        opacity:0;
        transform:rotate(90deg) translateX(80px)
    }
    to {
        opacity:1;
        transform:rotate(90deg) translateX(0)
    }
}
@keyframes prus_num {
    from {
        opacity:0;
        transform:translateX(-120px)
    }
    to {
        opacity:1
    }
}
.sec04_bt_wrap {
    width:250px;
    height:32px;
    position:relative;
    margin-top:5rem;
    z-index:2
}
.sec04_play_bt {
    width:20px;
    height:30px;
    color:#fff;
    position:absolute;
    right:0;
    top:0;
    margin:auto;
    bottom:0
}
.sec04_play_bt>div {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    border-radius:100%
}
.sec04_play_bt>div>img {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto
}
.swiper-button-play {
    display:none
}
.swiper1-2 {
    width:180px;
    height:32px;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    z-index:99
}
.swiper1-2 .swiper-slide {
    width:32px;
    height:32px;
    cursor:pointer;
    border:none;
    overflow:hidden;
    box-sizing:border-box;
    border-radius:100%
}
.swiper1-2 .swiper-slide-thumb-active {
    opacity:1
}
.swiper1-2 .swiper-slide:before {
    content:"";
    width:6px;
    height:6px;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    background-color:#000;
    z-index:9;
    border-radius:100%;
    opacity:.5
}
.swiper1-2 .swiper-slide-thumb-active:after {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    border:1px solid #000;
    z-index:9;
    border-radius:100%;
    box-sizing:border-box
}
.swiper1-2 .swiper-slide-thumb-active:before {
    opacity:1
}
.prus_box.active .prus_tit {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.prus_box.active .prus_ori {
    opacity:1;
    transform:translate(0);
    transition:0.8s 0.5s
}
.prus_box.active .swiper1 {
    opacity:1;
    transform:translate(0);
    transition:0.8s 1s
}
.prus_box.active .swiper-button-prev2 {
    opacity:1;
    transform:translate(0);
    transition:0.8s 1s
}
.prus_box.active .swiper-button-next2 {
    opacity:1;
    transform:translate(0);
    transition:0.8s 1s
}
.prus_box.active .prus_leaf {
    opacity:1;
    transform:translate(-200px,0);
    transition:0.8s 1s
}
.unit_wrap {
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
    background-color:#fff
}
.unit_left {
    width:33%;
    height:100%;
    float:left;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative
}
#section2 .unit_left{
    float : right;
}
.unit_left:after {
    content:"";
    width:120%;
    height:120%;
    background-color:#fff;
    position:absolute;
    left:-10%;
    top:-10%;
    z-index:999
}
.unit_right {
    width:67%;
    height:100%;
    float:left;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative
}
.unit_bg {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:url(../img/unit_bg.jpg) center no-repeat;
    background-size:cover;
    z-index:1
}
.unit_txt_bg {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:2
}
.unit_tit {
    position:relative;
    z-index:9;
    color:#fff;
    text-align:center;
    transform:translateY(3.5rem);
    opacity:0
}
.unit_tit h4 {
    font-family:"Nanum Myeongjo",serif;
    font-size:1.875rem;
    line-height:140%
}
.unit_tit p {
    font-size:1.3rem;
    line-height:1.875rem;
    margin-top:1.6rem
}
.unit_tit h2 {
    -webkit-text-stroke:.4px #fff;
    color:transparent;
    font-size:5.625rem;
    line-height:100%;
    margin-top:3.2rem;
    font-weight:700;
    letter-spacing:0
}
.unit_tit_bt {
    width:21.875rem;
    height:3rem;
    text-align:center;
    line-height:2.875rem;
    font-size:.875;
    border-radius:1.875rem;
    margin:auto;
    margin-top:3.13rem;
    display:flex;
    justify-content:space-between
}
.unit_tit_bt a {
    width:100%;
    height:100%;
    display:block;
    margin-right:10px;
    border:1px solid #fff;
    border-radius:1.875rem;
    color:#fff;
    box-sizing:border-box;
    transition:0.3s
}
.unit_tit_bt a:last-child {
    margin-right:0
}
.unit_tit_bt a:hover {
    background-color:#fff;
    color:#000
}
.unit_right_box {
    width:90%;
    max-width:840px;
    position:relative;
    transform:translateY(-4rem);
    opacity:0
}
.unit_con {
    text-align:center
}
.unit_con h2 {
    font-size:5.938rem;
    line-height:100%;
    font-family:'Pretendard',sans-serif;
    font-weight:700;
    color:#222;
    letter-spacing:-.125rem
}
.unit_con h2 span {
    font-size:4.125rem;
    font-weight:700
}
.unit_con h2 b {
    font-weight:400;
    margin-left:.8rem
}
.unit_con ul {
    width:100%;
    text-align:center;
    color:#202020;
    border-bottom:1px solid #cecece;
    margin-top:2.5rem
}
.unit_con ul li {
    color:#202020;
    display:inline-block;
    font-size:1rem;
    line-height:1.75rem;
    vertical-align:middle;
    font-weight:400;
    padding:1rem .813rem;
    padding-left:.625rem;
    position:relative
}
.unit_con ul li:after {
    content:"";
    position:absolute;
    width:1px;
    height:.875rem;
    background-color:#a8a8a8;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    transform:translateY(1px)
}
.unit_con ul li:last-child:after {
    display:none
}
.unit_right_box .tabs2 {
    position:absolute;
    top:6.35rem;
    left:0;
    display:flex;
    justify-content:space-between;
    float:none
}
.unit_right_box .tabs2>li {
    width:100%;
    height:2.813rem;
    text-align:center;
    margin:0;
    border:none;
    border-bottom:.313rem solid #bbb
}
.unit_right_box .tabs2>li>a {
    padding:0;
    font-size:.875rem;
    line-height:2.688rem;
    letter-spacing:0;
    display:block;
    color:#a5a5a5
}
.unit_right_box .tabs2 li.selected {
    background:none;
    border:none;
    border-bottom:.313rem solid #8ed3df
}
.unit_right_box .tabs2 li.selected a {
    color:#9e826f
}
.unit_right_box .tabs2 li:hover {
    background:none;
    border-bottom:.313rem solid #0793aa
}
.unit_right_box .tabs2 li:hover a {
    color:#9e826f
}
.unit_img {
    margin-top:.625rem
}
.twentytwenty-container {
    width:70%;
    margin:auto;
    height:500px
}
.twentytwenty-container img {
    position:relative;
    display:inline-block
}
.unit_img_box {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    text-align:center
}
.unit_img_bt {
    width:10rem;
    height:2.813rem;
    line-height:2.688rem;
    color:#fff;
    background-color:#aeaeae;
    border-radius:1.875rem;
    margin:auto;
    margin-top:.625rem;
    font-size:1rem
}
.twentytwenty-horizontal .twentytwenty-handle:before {
    height:300%;
    background:linear-gradient(transparent,#fff)
}
.twentytwenty-horizontal .twentytwenty-handle:after {
    height:300%;
    background:linear-gradient(#fff,transparent)
}
.twentytwenty-handle {
    top:41%;
    box-shadow:inset 0 0 50px #0793aa,0 0 50px #0793aa,0 0 100px rgb(0 0 0 / 100%)
}
.twentytwenty-left-arrow:after {
    content:"mouse";
    font-size:12px;
    font-weight:700;
    color:#fff;
    line-height:100%;
    text-shadow:0 0 8px rgba(0,0,0,.8);
    position:absolute;
    left:-96px;
    top:-6px;
    text-transform:uppercase;
    letter-spacing:0;
    width:100px
}
.twentytwenty-right-arrow:after {
    content:"drag";
    font-size:12px;
    font-weight:700;
    color:#fff;
    line-height:100%;
    text-shadow:0 0 8px rgba(0,0,0,.8);
    position:absolute;
    right:-95px;
    top:-6px;
    text-transform:uppercase;
    letter-spacing:0;
    width:110px
}
.unit_left.active:after {
    width:0;
    transition:1s 0.3s
}
.unit_left.active .unit_tit {
    transform:translate(0);
    opacity:1;
    transition:1s 0.85s
}
.unit_right.active .unit_right_box {
    transform:translate(0);
    opacity:1;
    transition:1s 0.85s
}
.outro_box {
    font-family:"Noto Sans KR";
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center
}
.outro_bg {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:url(../img/last.jpg) center no-repeat;
    background-size:cover;
    z-index:9;
    transform:scale(1.1);
    filter:brightness(.7)
}
.outro_content {
    width:90%;
    max-width:1600px;
    margin:auto;
    position:relative;
    z-index:9;
    transform:translateY(-5rem)
}
.outro_logo_box {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    transform:translateY(-3.5rem);
    opacity:0
}
.outro_logo_box img {
    max-width:revert;
    width:450px
}
.outro_logo_box>div {
    width:1.75rem;
    height:1.75rem;
    position:relative;
    transform:rotate(45deg);
    margin:0 1.25rem
}
.outro_logo_box>div:after {
    content:"";
    width:100%;
    height:1px;
    background-color:#fff;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    opacity:1
}
.outro_logo_box>div:before {
    content:"";
    width:1px;
    height:100%;
    background-color:#fff;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    opacity:1
}
.outro_txt_box {
    color:#fff;
    text-shadow:1px 1px 20ox rgba(0,0,0,.5)
}
.outro_txt_box h4 {
    font-size:1.5rem;
    line-height:150%;
    font-weight:200;
    transform:translateY(3.5rem);
    opacity:0
}
.outro_txt_box h2 {
    font-family:"Nanum Myeongjo",serif;
    font-size:3rem;
    line-height:100%;
    margin-top:1rem;
    font-weight:600;
    transform:translateY(3.5rem);
    opacity:0
}
.outro_txt_box p {
    font-size:.938rem;
    line-height:1.563rem;
    margin-top:2.25rem;
    font-weight:200;
    transform:translateY(3.5rem);
    opacity:0
}
.outro_txt_box p span {
    color:#e1c7ab
}
.outro_box.active .outro_bg {
    transform:scale(1);
    transition:4s 0s
}
.outro_box.active .outro_logo_box {
    transform:translate(0);
    opacity:1;
    transition:1.2s 0.8s
}
.outro_box.active .outro_txt_box h4 {
    transform:translate(0);
    opacity:1;
    transition:1.2s 1.5s
}
.outro_box.active .outro_txt_box h2 {
    transform:translate(0);
    opacity:1;
    transition:1.2s 1.5s
}
.outro_box.active .outro_txt_box p {
    transform:translate(0);
    opacity:1;
    transition:1.2s 1.5s
}

.sub_top {
    padding-top:90px
}
.sub_top .svis {
    background:url(../img/svis.jpg) no-repeat center;
    background-size:cover;
    padding:105px 0;
    text-align:center
}
.sub_top .svis h2 {
    color:#171717;
    font-family:"Marcellus";
    font-size:3.75rem;
    font-weight:400
}
.submenu {
    padding:0 15px
}
.submenu_in {
    display:flex;
    align-items:center;
    justify-content:flex-end
}
.submenu_in>li {
    position:relative
}
.submenu_in .home {
    padding:30px 15px
}
.submenu_in .home::before {
    content:"";
    width:1px;
    height:16px;
    background-color:#d9d9d9;
    position:absolute;
    right:0;
    top:50%;
    margin-top:-8px
}
.submenu_in .home a {
    display:block;
    width:28px;
    height:28px;
    background:url(../img/home-icon.png) no-repeat center;
    background-size:contain
}
.submenu_in .depth>a {
    display:block;
    color:#171717;
    font-size:.938rem;
    line-height:88px;
    padding:0 20px
}
.submenu_in .dep1>a {
    background:url(../img/submenu-right.png) no-repeat right 20px center;
    width:220px
}
.submenu_in .dep2>a {
    background:url(../img/submenu-bottom.png) no-repeat right center;
    width:205px;
    display:none
}
.submenu_in .dep2>a.on {
    display:block
}
.submenu_in .depth ul {
    display:none;
    padding:10px 0;
    background-color:#fff;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    z-index:50;
    box-shadow:0 0 15px rgb(0 0 0 / 10%)
}
.submenu_in .depth ul li a {
    padding:0 20px;
    line-height:30px;
    color:#171717;
    font-weight:300;
    display:block;
    font-size:.875rem
}
.submenu_in .depth:hover ul {
    display:block
}
.content {
    padding:50px 0 190px
}
.inner_fit {
    padding:0 15px
}
.inner {
    position:relative;
    margin:0 auto
}
.in_1400 {
    max-width:1400px
}
.con_tit {
    padding-bottom:35px;
    border-bottom:1px solid #e0e0e0;
    margin-bottom:80px
}
.con_tit p {
    color:#171717;
    font-weight:500;
    font-size:2.375rem
}
.con_ori {
    padding:35px 20px 35px 120px;
    margin-top:70px;
    background:#f9f9f9 url(../img/ori-icon.png) no-repeat left 50px center
}
.con_ori p {
    color:#8e8e8e;
    font-weight:300;
    font-size:.875rem;
    line-height:1.571em
}
.img_box {
    text-align:center
}

.location .map_box_p,.location .map_box_m {
    position:relative;
    overflow:hidden
}
.location .map-zoom {
    width:100%;
    position:absolute;
    top:0;
    left:0;
    cursor:none
}
.location .magnifier {
    width:300px;
    height:300px;
    position:absolute;
    border-radius:100%;
    border:7px solid #0793aa;
    box-shadow:0 0 10px rgb(0 0 0 / 80%);
    display:none;
    background-image:url(../img/location-zoom.jpg?ver=1);
    background-repeat:no-repeat
}
.location .map_area {
    width:100%;
    position:absolute;
    top:0;
    left:0;
    padding:0 20px
}

.html5-video-player:not(.ytp-transparent),.html5-video-player.unstarted-mode,.html5-video-player.ad-showing,.html5-video-player.ended-mode {
    background-color:none
}

/* brand_page */

.brand_page,.brand_page .inner_fit,.brand_page .inner {
    height:100%;
    position:relative
}
.brand_page .inner_fit {
    background-color:#000
}
.brand_page .inner {
    background-image:url(../img/marketing_bg.jpg);
    width:100%;
    background-repeat:no-repeat
}
.brand_page .sec1 {
    height:calc(100% + 180px);
    padding-bottom:180px;
    position:relative
}
.brand_page .sec1_wrap {
    width:100%;
    height:100%;
    /* padding-top:160px; */
    left:0;
    top:0;
    background-color:#000;
    z-index:10;
    min-height:700px
}
.brand_page .sec1 .top_txt {
    color:#171717;
    font-family:"Century";
    font-size:1.375rem;
    letter-spacing:0;
    text-align:right;
    padding-top:30px;
    opacity:0;
    transition:0.6s;
    transition-delay:0.6s
}

.brand_page .sec1 .before_tit {
    position:absolute;
    left:0;
    bottom:calc(50% + 80px);
    transform:translate(0,50%);
    width:100%;
    text-align:center;
    overflow:hidden;
    transition:0.5s ease;
    transition-delay:0.4s
}
.brand_page .sec1 .before_tit p {
    color:#fff;
    font-weight:500;
    font-size:4.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translate(0,100%);
    transition:0.8s;
    margin-bottom:50px;
    text-shadow:1px 1px 5px rgba(0,0,0,.6)
}
.brand_page .before_tit p {
    display:flex;
    flex-direction:column;
    justify-content:center;
    column-gap:25px
}
.brand_page .before_tit a {
    display:block;
    font-size:2rem;
    background-color:#fff;
    border-radius:20px;
    padding:15px 85px;
    color:#000;
    text-shadow:none;
    margin-top:30px;
    cursor:pointer;
    transition:1s
}
.before_tit a:hover {
    background-color:#0793aa;
    color:#fff
}
.brand_page .sec1 .before_tit em::before {
    content:"";
    display:block;
    width:100%;
    height:12px;
    background-color:#202020;
    position:absolute;
    left:0;
    top:50%;
    margin-top:-6px
}
.brand_page .sec1 .before_tit em::after {
    content:"";
    display:block;
    width:12px;
    height:100%;
    background-color:#202020;
    position:absolute;
    left:50%;
    top:0;
    margin-left:-6px
}
.brand_page .sec1 .logo_box {
    position:absolute;
    bottom:60px;
    width:100%;
    height:70px;
    /* background:url(../img/logo_wh.png) no-repeat center; */
    background-size:contain;
    opacity:0;
    transition:0.8s;
    transition-delay:0.2s
}
.brand_page .sec1 .bg_box {
    width:360px;
    height:228px;
    position:absolute;
    bottom:0;
    left:50%;
    overflow:hidden;
    perspective:100px;
    transform:translate(0,100%);
    transition:0.8s
}
.brand_page .sec1 .bg_box::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0;
    mix-blend-mode:overlay;
    transition:0.8s
}
.brand_page .sec1 .bg_box::after {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#fff;
    opacity:0;
    mix-blend-mode:overlay;
    transition:0.8s;
    padding-top:70px
}
.brand_page .sec1 .bg_box>div {
    height:100%;
    transform:rotateX(-70deg);
    transform-origin:100% 0 0;
    overflow:hidden;
    transition:0.8s
}
.brand_page .sec1 .bg_box span {
    position:absolute;
    right:calc(50% - 50vw);
    top:calc(50% - 370px);
    width:100vw;
    height:740px;
    display:block;
    background:#fff;
    background-size:cover;
    transform:translate(-160px,50px) scale(.6);
    opacity:.7;
    transition:all 0.8s,opacity 0.8s;
    transition-delay:0s,0.4s
}
.brand_page .sec1 .bg_box .down {
    mix-blend-mode:normal
}
.brand_page .sec1 .bg_box .up {
    mix-blend-mode:luminosity;
    opacity:0
}
.brand_page .sec1 .bg_box span::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-size:cover;
    opacity:0;
    mix-blend-mode:screen;
    transition:0.8s
}
.brand_page .sec1 .after_box {
    position:absolute;
    left:0;
    bottom:100px;
    z-index:1;
    width:100%;
    top:55%;
    padding:0 3%
}
.brand_page .sec1.on .after_tit p span,.brand_page .sec1.on .after_txt p span {
    transform:none;
    transition:0.6s
}
.brand_page .sec1.on .after_tit p:nth-child(1) {
    color:#0793aa
}
.brand_page .sec1.on .after_tit p:nth-child(2) {
    color:#505050;
    font-size:1.5rem;
    font-weight:300;
    letter-spacing:normal;
    width:40%;
    display:inline;
    float:left;
    margin-top:20px
}
.brand_page .sec1.on .after_tit p:nth-child(3) a {
    color:#505050;
    font-size:1.3rem;
    font-weight:300;
    letter-spacing:normal;
    width:45%;
    display:block;
    float:right;
    text-align:center;
    margin-top:10px;
    display:block;
    border:1px solid #aeaeae;
    border-radius:20px;
    box-sizing:border-box;
    line-height:normal;
    padding:10px 5px;
}
.brand_page .sec1 .after_tit p {
    color:#202020;
    font-weight:800;
    font-size:5.625rem;
    overflow:hidden
}
.brand_page .sec1 .after_tit p span {
    display:block;
    transform:translate(0,100%);
    transition:0.8s
}
.after_txt p a {
    border:1px solid #aaa;
    display:block;
    padding:10px 17px;
    border-radius:15px;
    font-size:1rem
}
.brand_page .sec1.on .after_tit p:nth-child(3) a:hover {
    background-color:#0793aa;
    color:#fff!important;
    border:none;
    font-weight:500;
    box-sizing:border-box;
    transition:all 0.5s ease
}
.brand_page .sec1 .after_txt p span {
    transform:translate(0,100%);
    transition:0.4s
}
.brand_page .sec1.open .top_txt,.brand_page .sec1.open .logo_box {
    opacity:1
}
.brand_page .sec1.open .bg_box>div,.brand_page .sec1.open .before_tit p,.brand_page .sec1.open .before_tit em {
    transform:none
}
.brand_page .sec1.fix .sec1_wrap {
    position:fixed
}
.brand_page .sec1.on .before_tit {
    bottom:calc(100% + 200px);
    transform:none;
    transition-delay:0s
}
.brand_page .sec1.on .logo_box {
    left:0;
    bottom:calc(100% - 95px);
    margin-left:0;
    transition-delay:0s
}
.brand_page .sec1.on .bg_box {
    width:100%;
    height:740px;
    left:0;
    margin-left:0;
    bottom:-250px;
    transform:none;
    background-color:#fff
}
.brand_page .sec1.on .bg_box::before,.brand_page .sec1.on .bg_box::after {
    opacity:.4;
    transition-delay:0.4s
}
.brand_page .sec1.on .bg_box span {
    transform:none;
    opacity:1;
    transition-delay:0.6s
}
.brand_page .sec1 .bg_box .down {
    opacity:0
}
.brand_page .sec1 .bg_box .up {
    opacity:1
}
.brand_page .sec1.on .bg_box span::before {
    opacity:1;
    transition-delay:0.4s
}
.brand_page .sec1.on .after_tit p span:nth-child(1),.brand_page .sec1.on .after_txt p span {
    transform:none
}
.brand_mask {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:20;
    overscroll-behavior:contain
}
.brand_mask.none {
    display:none
}
.brand_page .sec2 {
    height:300%;
    position:relative
}
.brand_page .sec2 .trigger1 {
    position:absolute;
    left:0;
    top:0;
    opacity:0
}
.brand_page .sec2 .sec2_wrap {
    height:33.3333%;
    width:100%;
    position:sticky;
    top:0;
    left:0;
    overflow:hidden;
    background-color:#fff
}
.brand_page .sec2 .sec2_box {
    width:100%;
    height:100%
}
.brand_page .sec2 .ball_bg .bg {
    height:101vh
}

.btn_area {
    text-align:center;
    margin:2rem auto 0;
    position:relative
}

.pro-ani {
    animation:proBar 5s 1;
    width:100%
}
@keyframes proBar {
    0% {
        width:100%;
        right:100%
    }
    100% {
        width:100%;
        right:0%
    }
}


ul.tabs2 {
    font-family:"Noto Sans KR","Malgun Gothic",dotum,"돋움","굴림",Gulim,sans-serif;
    margin:0;
    padding:0;
    float:left;
    list-style:none;
    width:100%;
    font-size:.9rem
}
ul.tabs2 li {
    margin-bottom:-1px;
    color:#232222;
    float:left;
    text-align:center;
    cursor:pointer;
    border:1px solid #ccc;
    font-weight:400;
    background:#fff;
    overflow:hidden;
    position:relative;
    width:24.5%
}
ul.tabs2 li.selected,ul.tabs li.selected:hover {
    position:relative;
    top:0;
    color:#fff;
    background:#0793aa;
    border:1px solid #0793aa
}
ul.tabs2 li.selected a,ul.tabs li.selected a:hover {
    color:#fff
}
ul.tabs2 li a {
    width:100%;
    height:100%;
    display:block;
    color:#444;
    font-size:1.3rem;
    padding:20px auto
}
ul.tabs2 li.selected a:hover {
    text-decoration:none
}
ul.tabs2 li.active {
    color:#fff;
    background:#0793aa;
    border:1px solid #0793aa
}
.tab_container2 {
    border:none;
    border-top:none;
    clear:both;
    float:left;
    width:100%;
    background:#fff;
    max-width:900px
}
.tab_content2 {
    position:absolute;
    margin:40px 0 0 0;
    padding-right:60px;
    font-size:1em;
    display:none
}
.tab_container2 .tab_content2 ul {
    width:100%;
    margin:0;
    padding:0
}
.tab_container2 .tab_content2 ul li {
    padding:5px;
    list-style:none
}
#container2 {
    width:1100px;
    margin:0 auto
}
.view_top {
    width:1200px;
    margin:0 auto
}
ul.tabs3 {
    font-family:"Noto Sans KR","Malgun Gothic",dotum,"돋움","굴림",Gulim,sans-serif;
    margin:0;
    padding:0;
    float:left;
    list-style:none;
    width:100%;
    font-size:.9rem
}
ul.tabs3 li {
    margin-bottom:-1px;
    color:#232222;
    margin-left:1%;
    float:left;
    text-align:center;
    cursor:pointer;
    width:16.5%;
    height:2.813rem;
    line-height:2.688rem;
    border:1px solid #ccc;
    font-weight:400;
    background:#fff;
    overflow:hidden;
    position:relative;
    box-sizing:border-box
}
ul.tabs3 li.selected,ul.tabs li.selected:hover {
    position:relative;
    top:0;
    color:#fff;
    background:#0793aa;
    border:1px solid #0793aa!important
}
ul.tabs3 li.selected a,ul.tabs li.selected a:hover {
    color:#fff
}
ul.tabs3 li a {
    width:100%;
    height:100%;
    display:block;
    color:#444
}
ul.tabs3 li.selected a:hover {
    text-decoration:none
}
ul.tabs3 li.active {
    color:#fff;
    background:#0793aa;
    border:1px solid #0793aa
}
.unit_img_box .unit_img02 .unit_img_bt {
    background-color:#0793aa;
    font-weight:800
}

.depth2-list:nth-child(2) {
    width:120px
}

@media all and (max-height:870px) and (min-width:641px) {
    .brand_page .sec1_wrap {
        padding-top:100px
    }
    .brand_page .sec1.on .bg_box,.brand_page .sec1 .bg_box span {
        height:640px
    }
    .brand_page .sec1 .bg_box span {
        top:calc(50% - 320px)
    }
    .brand_page .sec1 .after_box {
        bottom:320px
    }
}
@media all and (max-width:1600px) {
    header .gnb .depth1-list>li>a {
        padding:0 25px;
        font-size:.95rem
    }
}
@media all and (max-width:1400px) {
    html {
        font-size:14px
    }
    header {
        padding:0 3%
    }
    header h1 {
        margin-top:-20px
    }
    header h1 a {
        width:125px;
        height:40px
    }
    header .menu.close .dot {
        width:2px;
        height:12px
    }
    header .head_info p {
        margin-right:10px
    }
    header .head_info .open {
        padding:0 10px
    }
    header .gnb .depth1-list>li>a {
        padding:0 15px;
        font-size:.9rem
    }
    header .gnb .depth2-list ul {
        width:100%
    }
    .intro.move .intro_wrap {
        left:15px
    }
    .vis_cont {
        right:15px
    }
    .sec_menu {
        right:15px
    }
    .fp-viewing-1 .sec_menu ul .menu1::before,.fp-viewing-2 .sec_menu ul .menu2::before,.fp-viewing-3 .sec_menu ul .menu3::before {
        width:25px
    }
    .brand_txt {
        left:calc(63% - 20px)
    }
    .brand_txt .tit p {
        font-size:6vw
    }
    .brand_txt .tit p em {
        padding:0 30px
    }
    .brand_page .sec1 .before_tit p,.brand_page .sec1 .after_tit p {
        font-size:4.625rem
    }
    .brand_page .sec1 .before_tit em {
        width:50px;
        height:50px;
        margin:0 40px
    }
    .ham {
        top:revert;
        width:74px;
        height:74px;
        transform:translateY(0)
    }
    .ham span {
        display:block;
        background:#fff;
        margin:auto;
        width:24px;
        height:2px;
        border-radius:0;
        transition:0.25s
    }
    .ham .bar1 {
        margin-top:28px;
        margin-bottom:6px
    }
    .ham .bar2 {
        width:13px;
        transform:translateX(4.5px)
    }
    .ham .bar3 {
        margin-top:6px
    }
    .ham_bg {
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%) scale(.85) rotate(0);
        animation:ham_bg 6s 0s linear infinite;
        z-index:-1
    }
    @keyframes ham_bg {
        from {
            transform:translate(-50%,-50%) scale(.85) rotate(-180deg)
        }
    }
    .ham.active .bar1 {
        transform:rotate(45deg);
        margin-top:36px
    }
    .ham.active .bar2 {
        opacity:0
    }
    .ham.active .bar3 {
        transform:rotate(-45deg);
        margin-top:-10px
    }
    .ham:hover .bar1 {
        transform:rotate(90deg);
        margin-top:36px
    }
    .ham:hover .bar2 {
        opacity:0
    }
    .ham:hover .bar3 {
        transform:rotate(0);
        margin-top:-10px
    }
    .ham.active:hover .bar1 {
        transform:rotate(45deg);
        margin-top:36px
    }
    .ham.active:hover .bar2 {
        opacity:0
    }
    .ham.active:hover .bar3 {
        transform:rotate(-45deg);
        margin-top:-10px
    }
    nav ul li>a {
        font-size:2rem
    }
    nav ul li~li {
        margin-top:40px
    }
    .complex_content {
        width:73%
    }
    .swiper_complex {
        width:57%
    }
    .swiper-button-next {
        right:-90px
    }
    .swiper-button-prev {
        left:-90px
    }
    .complex_txt_box h4 {
        margin-top:0
    }
    .complex_txt_box h2 {
        margin-bottom:2.5rem
    }
    .prus_content_box {
        width:80%
    }
    .prus_txt_box {
        width:400px;
        right:-165%;
        top:4%
    }
    .prus_num {
        font-size:10.7rem
    }
    .prus_leaf {
        transform:translate(-140px,5.5rem)
    }
    .prus_ori {
        bottom:-7%
    }
    .swiper1 {
        width:100%;
        width:28.18%;
        margin:auto;
        overflow:visible;
        transform:translateY(5.5rem);
        opacity:0
    }
    .swiper1 .swiper-slide.swiper-slide-active .prus_img_box img {
        animation:prus_img 1.6s 0s both
    }
    .swiper1 .swiper-slide.swiper-slide-active .prus_img_box:before {
        animation:prus_img2 1.6s 0s both
    }
    .swiper1 .swiper-slide.swiper-slide-active .prus_txt_box {
        animation:prus_txt_box 1s 0s both
    }
    .swiper1 .swiper-slide.swiper-slide-active .prus_num {
        animation:prus_num 1s 0s both
    }
    .swiper-button-next2 {
        display:none
    }
    .swiper-button-prev2 {
        display:none
    }
    .prus_box.active .prus_leaf {
        transform:translate(-140px,0)
    }
    .outro_logo_box img {
        transform:scale(.85)
    }
}
@media all and (max-width:1200px) {
    .brand_page .sec1 .bg_box span {
        right:calc(50% - 600px);
        min-width:1200px
    }
}
@media all and (max-width:1024px) {
    html {
        font-size:12px
    }
    header .head_in {
        height:50px
    }
    header h1 {
        margin-top:-16px
    }
    header h1 a {
        width:100px;
        height:32px
    }
    header .menu.close .dot {
        height:10px
    }
    header .head_info {
        right:0
    }
    header .head_info p {
        margin-right:0;
        align-items:center
    }
    header .head_info p span {
        margin-right:0;
        font-size:.8rem
    }
    header .head_info p strong {
        font-size:1rem
    }
    header .head_info .open {
        padding:0;
        line-height:15px;
        font-size:.8rem;
        width:80px;
        margin:0 auto;
        text-align:center
    }
    header .gnb {
        display:none
    }
    header .menu .dot,header .menu p {
        display:none
    }
    header .menu .line {
        display:block
    }
    footer {
        padding:40px 15px 100px
    }
    footer .foot_logo {
        margin-bottom:20px
    }
    footer .foot_logo span {
        width:70px;
        height:50px
    }
    footer .top {
        top:5px;
        right:10px
    }
    footer .top p {
        font-size:.9rem;
        padding-right:15px;
        background-size:8px auto
    }
    footer .foot_brand {
        max-width:75%;
        margin:0 auto;
        margin-bottom:20px
    }
    footer .foot_info {
        margin-bottom:15px
    }
    footer .copy {
        margin-bottom:15px;
        font-size:.8rem
    }
    footer .ori {
        font-size:.8rem;
        line-height:1.5em
    }
   
    nav ul li~li {
        margin-top:35px
    }
    nav ul li a {
        font-size:2.5rem
    }
    .sub_top {
        padding-top:50px
    }
    .sub_top .svis {
        background-image:url(../img/msvis.jpg);
        padding:14% 0
    }
    .sub_top .svis h2 {
        font-size:3rem
    }
    .content {
        padding:50px 0 80px
    }
    .submenu {
        border-bottom:1px solid #eee
    }
    .submenu_in .home {
        padding:0;
        width:40px
    }
    .submenu_in .home a {
        width:22px;
        height:22px
    }
    .submenu_in .depth {
        width:calc(50% - 20px)
    }
    .submenu_in .depth>a {
        line-height:50px;
        padding:0 15px
    }
    .submenu_in .dep1>a {
        width:100%;
        background-size:6px auto;
        background-position:right center
    }
    .submenu_in .dep2>a {
        width:100%;
        background-size:8px auto
    }
    .submenu_in .depth ul li a {
        padding:0 15px;
        line-height:25px
    }
    .con_tit {
        padding-bottom:0;
        border-bottom:none;
        margin-bottom:40px;
        text-align:center
    }
    .con_tit p {
        font-size:2.1rem
    }
    .con_ori {
        padding:20px;
        margin-top:50px;
        background:#f9f9f9
    }
    
    
    
    .sec_menu {
        display:none
    }
    /* .intro .line .l1 {
        background-image:url(../img/intro-line-m1.png)
    }
    .intro .line .l2 {
        background-image:url(../img/intro-line-m2.png)
    }
    .intro .line .l3 {
        background-image:url(../img/intro-line-m3.png)
    } */
    .intro .intro_wrap {
        top:calc(50% - 20px)
    }
    .intro .intro_wrap .intro_logo {
        margin-left:-15px;
        margin-top:-26px
    }
    .intro .intro_wrap .intro_logo img {
        width:30px;
        height:42px
    }
    .intro .intro_wrap .intro_txt {
        margin-left:-56px;
        margin-top:26px
    }
    .intro .intro_wrap .intro_txt img {
        width:113px;
        height:16px
    }
    .intro.move .intro_wrap {
        top:9px
    }
    .intro.move .intro_wrap .intro_logo img {
        width:20px;
        height:28px
    }
    .intro.move .intro_wrap .intro_txt {
        left:26px;
        top:10px
    }
    .intro.move .intro_wrap .intro_txt img {
        width:74px;
        height:11px
    }
    .intro .skip_ball {
        top:calc(50% + 60px)!important;
        left:50%!important;
        transform:translate(-50%,-50%);
        opacity:0;
        transition:0.3s
    }
    .intro .skip_ball p {
        width:40px;
        height:40px;
        line-height:40px
    }
    .intro.on .skip_ball {
        opacity:1
    }
    .vis_sd .vis_txt dl {
        position:static;
        transform:none
    }
    .vis_sd .vis_txt dl dt {
        font-size:3.5vw;
        margin-bottom:20px
    }
    .vis_sd .vis_txt dl dd {
        font-size:11vw
    }
    .vis .scroll {
        bottom:20px;
        right:15px;
        margin:0
    }
    .vis .scroll p {
        width:7px;
        height:62px
    }
    .vis .scroll ul {
        margin-top:5px
    }
    .vis .scroll ul li {
        width:7px;
        height:5px
    }
    .sns-list {
        bottom:25px;
        right:40px
    }
    .sns-list li.main_open {
        line-height:40px;
        border-radius:22px
    }
    .sns-list li.main_open a {
        display:block;
        width:150px;
        vertical-align:middle;
        padding-top:-10px
    }
    .sns-list li~li {
        margin-left:10px
    }
    .sns-list li a {
        width:40px;
        height:40px
    }
    .vis_cont {
        bottom:20px
    }
    @keyframes scr {
        0% {
            bottom:20px
        }
        50% {
            bottom:30px
        }
        100% {
            bottom:20px
        }
    }
    #section1 .mobile_mask.top,#section1 .mobile_mask.bot {
        display:block
    }
    .scroll_wrap {
        overflow:hidden;
        display:none
    }
    .brand_txt {
        width:100%;
        left:0!important;
        top:50%;
        text-align:center;
        transform:translate(0,-50%);
        padding:0 15px
    }
    .brand_txt .tit ul {
        display:block
    }
    .brand_txt .tit span {
        font-size:3vw
    }
    .brand_txt .tit p {
        font-size:7vw
    }
    .brand_txt .tit p em {
        padding:0;
        display:block;
        transform:rotate(0deg);
        transition:0.1s;
        transition-timing-function:cubic-bezier(1,1,1,1)
    }
    .brand_txt .txt {
        margin-top:30px;
        font-size:.8rem
    }
    #section1.mo_active .ball_bg {
        transition:1s;
        transition-delay:0.8s
    }
    #section1.mo_active .ball_bg .bg {
        opacity:1;
        transition:0.6s;
        transition-delay:0.8s
    }
    
    .brand_page .sec1_wrap {
        padding-top:120px
    }
    .brand_page .sec1 .top_txt {
        font-size:1.3rem;
        padding-top:20px
    }
    .brand_page .sec1 .logo_box {
        width:81px;
        height:60px;
        margin-left:-40px;
        bottom:100px
    }
    .brand_page .sec1 .before_tit p,.brand_page .sec1 .after_tit p {
        font-size:7vw;
        line-height:1.2em
    }
    .brand_page .sec1 .after_txt {
        margin-top:4vh
    }
    .brand_page .sec1 .after_txt p {
        font-size:3.5vw
    }
    .brand_page .sec1 .before_tit em {
        margin:0 3vw;
        width:4vw;
        height:4vw
    }
    .brand_page .sec1 .before_tit em::before {
        margin-top:-.5vw;
        height:1vw
    }
    .brand_page .sec1 .before_tit em::after {
        margin-left:-.5vw;
        width:1vw
    }
 
   
    .ham_wrap {
        top:revert;
        bottom:5%
    }
    .ham {
        left:4%;
        bottom:10%;
        top:revert;
        width:60px;
        height:60px;
        transform:translateY(0)
    }
    .ham span {
        margin:auto;
        width:21px
    }
    .ham .bar1 {
        margin-top:22px;
        margin-bottom:6px
    }
    .ham .bar2 {
        width:15px;
        transform:translateX(3px)
    }
    .ham .bar3 {
        margin-top:6px
    }
    .ham_bg {
        transform:translate(-50%,-50%) scale(.7) rotate(0)
    }
    @keyframes ham_bg {
        from {
            transform:translate(-50%,-50%) scale(.7) rotate(-180deg)
        }
    }
    .ham.active .bar1 {
        transform:rotate(45deg);
        margin-top:29px
    }
    .ham.active .bar2 {
        opacity:0
    }
    .ham.active .bar3 {
        transform:rotate(-45deg);
        margin-top:-10px
    }
    .ham:hover .bar1 {
        transform:rotate(0deg);
        margin-top:22px
    }
    .ham:hover .bar2 {
        opacity:1
    }
    .ham:hover .bar3 {
        transform:rotate(0);
        margin-top:6px
    }
    .ham.active:hover .bar1 {
        transform:rotate(45deg);
        margin-top:29px
    }
    .ham.active:hover .bar2 {
        opacity:0
    }
    .ham.active:hover .bar3 {
        transform:rotate(-45deg);
        margin-top:-10px
    }
    nav ul li {
        opacity:0;
        transform:translate(0,60%);
        transition:0.8s
    }
    nav ul li~li {
        margin-top:30px
    }
    nav ul li>a {
        font-size:2.125rem;
        line-height:1.2em
    }
    nav ul li .dep2 {
        margin-top:-1.125rem;
        opacity:0;
        z-index:-1;
        transition:0.3s
    }
    nav ul li:hover .dep2 {
        margin:1.675rem;
        opacity:1
    }
    nav ul li .dep2 p a {
        font-size:1.125rem
    }
    nav ul li .dep2 p a~a {
        margin-left:30px
    }
    nav ul li .dep2 p a:hover {
        background-position:0% 100%
    }
    .cal_right ul li {
        height:115px
    }
    .complex_content {
        width:84%
    }
    .swiper_complex {
        width:56%
    }
    .swiper-button-next {
        display:none
    }
    .swiper-button-prev {
        display:none
    }
    .prus_content_box {
        width:86%;
        display:block
    }
    .prus_txt_box {
        width:360px;
        right:-195%;
        top:4%
    }
    .prus_num {
        right:-135%;
        font-size:9.5rem
    }
    .prus_leaf {
        transform:translate(-100px,-3.5rem)
    }
    .prus_ori {
        position:relative;
        bottom:0;
        margin-top:1rem
    }
    .swiper-button-next2 {
        display:none
    }
    .swiper-button-prev2 {
        display:none
    }
    .prus_box.active .prus_leaf {
        transform:translate(-100px,-8.5rem)
    }
    .unit_con h2 {
        font-size:4.938rem
    }
    .unit_con h2 span {
        font-size:3.7rem
    }
    .unit_con ul {
        margin-top:2.95rem
    }
    .unit_right_box .tabs2 {
        top:5.35rem
    }
    .unit_img {
        width:85%;
        margin:auto;
        margin-top:.625rem
    }
    .twentytwenty-container {
        width:70%;
        margin:auto;
        height:400px
    }
    .twentytwenty-container img {
        position:relative;
        display:inline-block
    }
    .unit_img_box {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        text-align:center
    }
    .unit_img_bt {
        width:10rem;
        height:2.813rem;
        line-height:2.688rem;
        color:#fff;
        background-color:#aeaeae;
        border-radius:1.875rem;
        margin:auto;
        margin-top:.625rem;
        font-size:1rem
    }
    .twentytwenty-horizontal .twentytwenty-handle:before {
        height:300%;
        background:linear-gradient(transparent,#fff)
    }
    .twentytwenty-horizontal .twentytwenty-handle:after {
        height:300%;
        background:linear-gradient(#fff,transparent)
    }
    .twentytwenty-handle {
        top:41%;
        box-shadow:inset 0 0 50px rgb(0 0 0 / 50%),0 0 50px rgb(0 0 0 / 100%),0 0 100px rgb(0 0 0 / 100%)
    }
    .twentytwenty-left-arrow:after {
        content:"mouse";
        font-size:12px;
        font-weight:700;
        color:#fff;
        line-height:100%;
        text-shadow:0 0 8px rgba(0,0,0,.8);
        position:absolute;
        left:-96px;
        top:-6px;
        text-transform:uppercase;
        letter-spacing:0;
        width:100px
    }
    .twentytwenty-right-arrow:after {
        content:"drag";
        font-size:12px;
        font-weight:700;
        color:#fff;
        line-height:100%;
        text-shadow:0 0 8px rgba(0,0,0,.8);
        position:absolute;
        right:-95px;
        top:-6px;
        text-transform:uppercase;
        letter-spacing:0;
        width:110px
    }
    .outro_logo_box img {
        transform:scale(.75)
    }
}
@media all and (max-width:640px) {
    header {
        padding:0 5%
    }
    header .head_info {
        right:38px
    }
    .ham_wrap {
        left:revert;
        right:2%;
        top:0;
        bottom:revert;
        z-index:120
    }
    .ham {
        left:revert;
        right:0;
        bottom:revert;
        top:0;
        width:50px;
        height:50px;
        transform:translateY(0);
        background:none
    }
    .ham span {
        margin:auto;
        width:20px;
        background-color:#111
    }
    .ham .bar1 {
        margin-top:18px;
        margin-bottom:4px
    }
    .ham .bar2 {
        width:13px;
        transform:translateX(4px)
    }
    .ham .bar3 {
        margin-top:4px
    }
    .ham_bg {
        transform:translate(-50%,-50%) scale(.7) rotate(0);
        display:none
    }
    .ham.active .bar1 {
        transform:rotate(45deg);
        margin-top:25px
    }
    .ham.active .bar2 {
        opacity:0
    }
    .ham.active .bar3 {
        transform:rotate(-45deg);
        margin-top:-8px
    }
    .ham:hover .bar1 {
        transform:rotate(0deg);
        margin-top:18px
    }
    .ham:hover .bar2 {
        opacity:1
    }
    .ham:hover .bar3 {
        transform:rotate(0);
        margin-top:4px
    }
    .ham.active:hover .bar1 {
        transform:rotate(45deg);
        margin-top:25px
    }
    .ham.active:hover .bar2 {
        opacity:0
    }
    .ham.active:hover .bar3 {
        transform:rotate(-45deg);
        margin-top:-8px
    }
    nav ul {
        width:100%
    }
    nav ul li {
        opacity:0;
        transform:translate(0,60%);
        transition:0.8s
    }
    nav ul li~li {
        margin-top:30px
    }
    nav ul li>a {
        font-size:2rem;
        line-height:1.2em
    }
    nav ul li .dep2 {
        margin-top:-1.125rem;
        opacity:0;
        z-index:-1;
        transition:0.3s
    }
    nav ul li:hover .dep2 {
        margin:1.675rem;
        opacity:1
    }
    nav ul li .dep2 p a {
        font-size:1.125rem
    }
    nav ul li .dep2 p a~a {
        margin-left:23px
    }
    nav ul li .dep2 p a:hover {
        background-position:0% 100%
    }
    .fp-viewing-3 header h1 a {
        background-image:url(../img/logo-wh.png)
    }
    .fp-viewing-3 header .gnb .depth1-list>li>a {
        color:#fff
    }
    .fp-viewing-3 header .menu p {
        color:#fff
    }
    .fp-viewing-3 header .head_info:before {
        background:url(../img/tel_w.png) center no-repeat;
        background-size:cover
    }
    .fp-viewing-3 header .head_info p strong {
        color:#fff
    }
    .fp-viewing-3 header .dot {
        background-color:rgba(255,255,255,.5)
    }
    .fp-viewing-3 header .menu .line span {
        background-color:#fff
    }
    .fp-viewing-3 .ham span,.fp-viewing-7 .ham span {
        background-color:#fff
    }
    .fp-viewing-3 .sns-list li.insta a {
        background-image:url(../img/sns-icon1.png)
    }
    .fp-viewing-3 .sns-list li.youtube a {
        background-image:url(../img/sns-icon2.png)
    }
    .fp-viewing-3 .sns-list li.kakao a {
        background-image:url(../img/sns-icon3.png)
    }
    .brand_page .sec1 {
        height:calc(100% + 15vw);
        padding-bottom:15vw
    }
    .brand_page .sec1_wrap {
        min-height:auto
    }
    .brand_page .sec1 .before_tit {
        bottom:calc(57% + 40px)
    }
    .brand_page .sec1 .after_box {
        bottom:45%
    }
    .brand_page .sec1 .bg_box {
        width:66%;
        margin-left:-33%;
        height:35%
    }
    .brand_page .sec1 .bg_box span,.brand_page .sec1 .bg_box span::before {
        background-image:url(../img/brandpage-bg-m.jpg)
    }
    .brand_page .sec1 .bg_box span {
        min-width:auto;
        top:calc(50% - 57.5vw);
        right:calc(50% - 50vw);
        height:115vw;
        transform:translate(0,30px) scale(.8)
    }
    .brand_page .sec1.on .before_tit {
        bottom:calc(100% + 140px)
    }
    .brand_page .sec1.on .logo_box {
        bottom:calc(100% - 54px);
        width:74px;
        height:54px
    }
    .brand_page .sec1.on .bg_box {
        height:90vw;
        bottom:-15vw
    }
    .brand_page .sec1.fix .sec1_wrap {
        position:static
    }
    .brand_page .sec2,.brand_page .sec2 .sec2_wrap {
        height:100%
    }
    .brand_page .sec2 .ball_bg {
        transition:0.8s
    }
    .brand_page .sec2 .ball_bg .bg {
        transition:0.6s
    }
    .sns-list {
        bottom:20px;
        left:0;
        right:0;
        margin:auto;
        justify-content:center
    }
    .vis_sd .sd1 .bg {
        background:url(../img/m_bg.jpg) bottom center no-repeat;
        transform:scale(1.2);
        background-size:cover
    }
    .vis_sd .vis_txt {
        top:37%;
        color:#fff
    }
    .vis,.vis_sd {
        top:0
    }
    .vis_sd .vis_txt h3 {
        font-size:1.9rem
    }
    .vis_sd .vis_txt h1 {
        font-size:2.75rem;
        line-height:120%;
        margin-top:3rem;
        color:#fff
    }
    .vis_sd .vis_txt p {
        display:none
    }
    .cal_box {
        flex-direction:column
    }
    .cal_left {
        width:70%;
        height:30%;
        display:none
    }
    .cal_right {
        width:100%;
        height:100%
    }
    .cal_tit h2 {
        font-size:4.2rem
    }
    .cal_tit p {
        font-size:.9rem;
        margin-top:.7rem
    }
    .cal_right ul {
        width:90%;
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        margin-top:3rem
    }
    .cal_right ul li {
        width:32.33%;
        height:100px
    }
    .cal_right ul li:nth-child(6) {
        margin-left:0
    }
    .cal_right ul li:nth-child(n+4) {
        width:49.4%;
        margin-top:1.2%
    }
    .location_box {
        flex-wrap:wrap;
        background-color:#000
    }
    .location_con {
        width:100%;
        height:25%;
        background-color:#000;
        position:relative
    }
    .location_con:after {
        content:"";
        width:100%;
        height:1px;
        position:absolute;
        right:revert;
        top:revert;
        left:0;
        bottom:0;
        background-color:#fff;
        opacity:0;
        z-index:9
    }
    .location_con:last-child:after {
        display:none
    }
    .location_img {
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        transform:scale(1);
        opacity:.8
    }
    .location_img.img01 {
        background:url(../img/location_img01_m.jpg) center no-repeat;
        background-size:cover
    }
    .location_img.img02 {
        background:url(../img/location_img02_m.jpg) center no-repeat;
        background-size:cover
    }
    .location_img.img03 {
        background:url(../img/location_img03_m.jpg) center no-repeat;
        background-size:cover
    }
    .location_img.img04 {
        background:url(../img/location_img04_m.jpg) center no-repeat;
        background-size:cover
    }
    .location_con .location_txt_box {
        z-index:9;
        transform:translateY(0);
        position:absolute
    }
    .location_con:nth-child(1) .location_txt_box {
        left:5%;
        bottom:12%
    }
    .location_con:nth-child(2) .location_txt_box {
        left:5%;
        bottom:12%
    }
    .location_con:nth-child(3) .location_txt_box {
        right:5%;
        top:12%
    }
    .location_con:nth-child(4) .location_txt_box {
        right:5%;
        top:12%
    }
    .location_con:nth-child(1) {
        left:-100%
    }
    .location_con:nth-child(2) {
        left:100%
    }
    .location_con:nth-child(3) {
        left:-100%
    }
    .location_con:nth-child(4) {
        left:100%
    }
    .location_icon_box {
        display:none
    }
    .location_icon_box .icon_b {
        opacity:1
    }
    .location_icon_box .icon_w {
        opacity:0
    }
    .location_con h3 {
        color:#fff
    }
    .location_con p {
        display:none
    }
    .location_con h4 {
        color:#fff;
        margin-top:0
    }
    .location_line {
        display:none
    }
    .location_obj {
        display:none
    }
    .location_con:hover .location_img {
        transform:scale(1.05)
    }
    .location_box.active .location_con {
        left:0;
        transition:0.8s 0.5s
    }
    .complex_box {
        font-family:"Noto Sans KR";
        width:100%;
        height:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        text-align:center
    }
    .complex_left_bg {
        width:100%;
        height:50%;
        position:absolute;
        left:0;
        top:0;
        background:#fff;
        background-size:cover
    }
    .complex_right_bg {
        width:100%;
        height:50%;
        position:absolute;
        right:0;
        top:revert;
        bottom:0;
        background:#e9fcff;
        background-size:cover
    }
    .complex_content {
        transform:translateY(-13px);
        flex-direction:column
    }
    .swiper_complex {
        width:100%
    }
    .complex_img_box {
        width:100%;
        height:130px;
        display:flex;
        justify-content:center;
        align-items:center;
        border-radius:0;
        overflow:hidden
    }
    .complex_img {
        width:100%;
        max-width:revert
    }
    .complex_img_box h6 {
        font-size:.875rem;
        right:16px;
        bottom:12px
    }
    .complex_txt_box {
        width:100%;
        text-align:left;
        color:#000;
        opacity:0;
        transform:translateX(4.5rem)
    }
    .complex_txt_box h4 {
        font-size:1rem;
        margin-top:2.25rem
    }
    .complex_txt_box h2 {
        font-size:1.85rem;
        line-height:2.275rem;
        margin-top:.4rem;
        margin-bottom:2.2rem
    }
    .complex_txt_box h2 b {
        font-weight:700
    }
    .complex_txt_box h2 span {
        color:#0793aa
    }
    .complex_txt_box p {
        width:120%;
        font-size:.938rem;
        margin-top:1.2rem
    }
    .complex_txt_box h5 {
        font-size:1rem;
        margin-top:.3rem
    }
    .prus_bg {
        width:100%;
        height:50%;
        position:absolute;
        left:0;
        top:0
    }
    .prus_content_box {
        width:90%;
        max-width:1540px;
        flex-direction:column;
        transform:translateY(-13px)
    }
    .prus_tit {
        position:relative;
        left:0;
        top:0;
        transform:translateX(-4.5rem);
        opacity:0
    }
    .prus_tit h5 {
        font-size:1rem;
        line-height:1.475rem;
        margin-top:0rem
    }
    .prus_tit h2 {
        position:relative;
        left:-2px;
        font-size:2.3rem;
        line-height:2.85rem;
        margin-top:1.1rem
    }
    .prus_ori {
        display:none
    }
    .prus_content {
        width:100%;
        margin:auto;
        position:relative
    }
    .prus_img_box {
        width:100%;
        height:120px;
        border-radius:0;
        overflow:hidden;
        position:relative;
        display:flex;
        justify-content:center;
        align-items:center
    }
    .prus_img_box>img {
        width:100%;
        opacity:1
    }
    .prus_img_box:before {
        border-radius:0
    }
    .prus_txt_box {
        width:100%;
        position:relative;
        right:revert;
        top:0;
        left:0;
        transform:rotate(0) translateX(80px)
    }
    .prus_txt_box h4 {
        font-size:1.875rem;
        line-height:100%;
        margin-top:1.7rem
    }
    .prus_txt_box p {
        font-size:.938rem;
        line-height:1.563rem;
        margin-top:.8rem;
        color:#000;
        opacity:.8
    }
    .prus_num {
        font-size:8.75rem;
        right:0;
        top:-90%;
        color:#999
    }
    .prus_leaf {
        display:none
    }
    .swiper1 {
        width:100%;
        margin-top:3rem
    }
    .before_tit p .free_tit {
        font-size:7.5vw
    }
    .before_tit a {
        font-size:5vw;
        padding:10px 80px;
        border-radius:30px
    }
    .brand_page .sec1 .logo_box {
        display:none
    }
    @keyframes prus_txt_box {
        from {
            opacity:0;
            transform:rotate(0) translateX(80px)
        }
        to {
            opacity:1;
            transform:rotate(0) translateX(0)
        }
    }
    .after_tit {
        margin:0
    }
    .brand_page .sec1 .after_box {
        top:62%
    }
    .sec04_bt_wrap {
        margin-top:2.5rem;
        margin-left:-1.5rem;
        z-index:2;
        transform:scale(.85)
    }
    .sec04_play_bt {
        right:20px
    }
    .unit_left {
        display:none
    }
    .unit_right {
        width:100%
    }
    .unit_right_box {
        width:90%
    }
    .unit_con h2 {
        font-size:4.5rem;
        letter-spacing:-.125rem
    }
    .unit_con h2 span {
        font-size:3.5rem
    }
    .unit_con h2 b {
        margin-left:.4rem
    }
    .unit_con ul {
        padding:1rem 0;
        margin-top:2.95rem
    }
    .unit_con ul li {
        font-size:.875rem;
        line-height:1.85rem;
        padding:0 .813rem;
        padding-left:.625rem
    }
    .unit_con ul li:after {
        width:1px;
        height:.875rem;
        transform:translateY(1px)
    }
    .unit_right_box .tabs2 {
        top:5.35rem
    }
    .unit_img {
        width:100%;
        margin-top:.625rem
    }
    .unit_img_box img {
        width:80%
    }
    .twentytwenty-container {
        width:100%;
        margin:auto;
        height:82vw
    }
    .twentytwenty-container img {
        position:relative;
        display:inline-block
    }
    .unit_img_box {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        text-align:center
    }
    .unit_img_bt {
        width:10rem;
        height:2.813rem;
        line-height:2.688rem;
        color:#fff;
        background-color:#aeaeae;
        border-radius:1.875rem;
        margin:auto;
        margin-top:.625rem;
        font-size:1rem
    }
    .twentytwenty-horizontal .twentytwenty-handle:before {
        height:300%;
        background:linear-gradient(transparent,#fff);
        bottom:46%
    }
    .twentytwenty-horizontal .twentytwenty-handle:after {
        height:300%;
        background:linear-gradient(#fff,transparent);
        top:46%
    }
    .twentytwenty-handle {
        width:2.4rem;
        height:2.4rem;
        top:38%;
        box-shadow:inset 0 0 3.125rem rgb(0 0 0 / 50%),0 0 3.125rem rgb(0 0 0 / 100%),0 0 6.25rem rgb(0 0 0 / 100%)
    }
    .twentytwenty-left-arrow,.twentytwenty-right-arrow,.twentytwenty-up-arrow,.twentytwenty-down-arrow {
        border:.375rem inset transparent
    }
    .twentytwenty-left-arrow,.twentytwenty-right-arrow {
        margin-top:-.375rem
    }
    .twentytwenty-right-arrow {
        border-left:.375rem solid #fff;
        margin-right:-1.063rem;
        right:53%
    }
    .twentytwenty-left-arrow {
        border-right:.375rem solid #fff;
        margin-left:-1.063rem;
        left:53%
    }
    .twentytwenty-left-arrow:after {
        content:"mouse";
        font-size:.75rem;
        font-weight:700;
        color:#fff;
        line-height:100%;
        text-shadow:0 0 8px rgba(0,0,0,.8);
        position:absolute;
        left:-6rem;
        top:-.375rem;
        text-transform:uppercase;
        letter-spacing:0;
        width:6.25rem
    }
    .twentytwenty-right-arrow:after {
        content:"drag";
        font-size:.75rem;
        font-weight:700;
        color:#fff;
        line-height:100%;
        text-shadow:0 0 8px rgba(0,0,0,.8);
        position:absolute;
        right:-6rem;
        top:-.375rem;
        text-transform:uppercase;
        letter-spacing:0;
        width:6.875rem
    }
    .unit_right.active .unit_right_box {
        transform:translateY(-13px);
        opacity:1;
        transition:1s 0.5s
    }
    .outro_logo_box {
        width:300%;
        margin-left:-100%
    }
    .outro_logo_box img {
        transform:scale(1)
    }
    .outro_logo_box img:nth-child(1) {
        width:18%
    }
    .outro_logo_box img:nth-child(3) {
        width:61px
    }
    .outro_logo_box img:nth-child(5) {
        width:69px
    }
    .outro_logo_box>div {
        width:1.55rem;
        height:1.55rem;
        margin:0 1rem
    }
    .outro_txt_box {
        margin-top:2.5rem
    }
    .outro_txt_box h4 {
        font-size:1.6rem
    }
    .outro_txt_box h2 {
        font-size:2.2rem;
        line-height:125%;
        margin-top:1rem
    }
    .outro_txt_box p {
        font-size:.938rem;
        line-height:1.563rem;
        margin-top:2.25rem
    }

}