@charset "UTF-8";
/*-------------------------------------------------------------------
  공통
-------------------------------------------------------------------*/
*{word-break: keep-all !important;}
*,
*::before,
*::after{box-sizing: border-box;}
*::-webkit-scrollbar{width: 1rem; border-radius: 1rem;}
*::-webkit-scrollbar-thumb{background-color: #8b8b8b; border-radius: 1rem;}
*::-webkit-scrollbar-track{background-color: #fcfcfc; border-radius: 1rem;}
html, body{overflow: hidden; height: 100%; margin: 0; padding: 0;}
#header{position: static; height: 0;}
#header #logo{position: absolute; left: 2rem; top: 0; z-index: 2;}
#logo >a{background-image: url(../../../images/site/kor/layout/logo_eng.svg);}
.fp-viewing-1 #header #logo >a,
.fp-viewing-2 #header #logo >a,
.fp-viewing-3 #header #logo >a{background-image: url(../../../images/site/kor/layout/logo_w_eng.svg);}
#header .r_menu{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; position: absolute; top: 0; right: 2rem; z-index: 2; width: auto; height: 8rem;}
#header .r_menu .lang{display: inline-flex; justify-content: flex-start; align-items: center; font-weight: 500; line-height: 1.2; font-size: 2rem; color: #17469E;}
#header .r_menu .home_link{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;min-width:18rem;height:8rem;margin-right:-2rem;padding:0 2.4rem;line-height:1.3;background:#18469D url(../../../images/site/kor/onepage/btn_home_bg.jpg) center/cover no-repeat;color:#fff;font-size:2rem;font-weight:700;border-bottom-left-radius:2rem}
#header .r_menu .home_link::after{content:"";display:block;width:24px;height:24px;background:url(../../../images/site/kor/onepage/icon_cc_right.svg) center/contain no-repeat}
#header .r_menu .home_link:hover::after{animation:h_move .8s infinite linear}
@keyframes h_move{
    50%{transform:translateX(.7rem)}
    100%{transform:translateX(0)}
}
.fp-viewing-4 #header .lang,
.fp-viewing-5 #header .lang{color: #fff;}
#header .lang:before{content: ""; display: block; width: 2.4rem; height: 2.4rem; margin-right: 0.6rem; background: url(../../../images/site/kor/onepage/h_img01.svg) no-repeat center center / 2rem auto;}
.fp-viewing-4 #header .lang:before,
.fp-viewing-5 #header .lang:before{background-image: url(../../../images/site/kor/onepage/h_img02.svg);}
#container{max-width: 100%; padding-bottom: 0; padding: 0; height: calc(var(--vh, 1vh) * 100);}
#container #fullpage{width: 100%; height: calc(var(--vh, 1vh) * 100) !important;}
#container .fp-tableCell{display: block; width: 100%; height: 100%;}
#container .section{width: 100%; height: calc(var(--vh, 1vh) * 100) !important;}
#container #footer,
#container #footer .fp-tableCell{height: auto !important;}
[id^="sec"]{overflow: hidden; width: 100%; height: calc(var(--vh, 1vh) * 100) !important;}
[id^="sec"] .inner{position: relative; width: 100%; height: 100% !important; padding: 0 2rem;}
.eng #footer .inner .t_swiper{gap: 3rem;}
.eng #footer .inner .t_swiper .f_title{width: 23rem;}
.eng #footer .inner .t_swiper .f_title strong{max-width: calc(100% - 9rem);}
.eng #footer .inner .t_swiper .f_slide{width: calc(100% - 23rem - 3rem);}
.eng #footer .inner .t_swiper .f_slide .swiper-wrapper .swiper-slide{margin-right: 10.2rem;}
.eng #footer .inner .t_swiper .f_slide .swiper-wrapper .swiper-slide:last-child{margin-right: 0;}
.fp-watermark{display: none;}
#fix_top{display: block !important;}
.fp-viewing-0 #fix_top{display: none !important;}

@media screen and (max-width: 1024px){
    #header .r_menu{height: 8rem;}
}
@media screen and (max-width: 640px){
    #header .r_menu{height: 7rem;}
}

/*-------------------------------------------------------------------
  #sec01
-------------------------------------------------------------------*/
#sec01{overflow: hidden; display: block; width: 100%; height: calc(var(--vh, 1vh) * 100) !important; background-color: #fff;}
#sec01 .fp-overflow{overflow: hidden; width: 100%; height: 100%;}
#sec01 .inner .info{display: flex; flex-wrap: wrap; width: 100%; height: 100%; justify-content: center; align-items: center; position: relative; z-index: 1;}
#sec01 .inner .info .txts{display: inline-flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-content: center; align-items: center; position: relative; width: auto; height: 100%; padding-bottom: 23vh;}
#sec01 .inner .info .txts strong{color: #000; font-family: 'Paperlogy'; font-size: 10rem; font-weight: 700; letter-spacing: 1rem; line-height: 1;}
#sec01 .inner .info .txts strong em{display: block; color: #151515; font-family: 'Hanwha'; font-size: 0.7em; letter-spacing: 0;}
#sec01 .inner .info .txts p{display: block; width: 100%; margin-top: 1.5rem; color: #151515; font-size: 3rem; font-weight: 500; text-align: right;}
#sec01 .inner .scrolldown{position: absolute; bottom: 0; left:0; width: 100%;}
#sec01 .inner .scrolldown p{color: #151515; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.016rem; text-transform: uppercase;; text-align: center; font-family: Paperlogy;}
#sec01 .inner .scrolldown .bar{display: block; position: relative; width: 2px; height: 5rem; background-color: #ddd; margin: 1rem auto 0;}
#sec01 .inner .scrolldown .bar i{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #000 50%, rgba(255, 255, 255, 0) 50%); background-position: 0 -5rem; background-size: 100% 200%;
  animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
#sec01 .obj{position: absolute; top: 50%; left: 50%;}
#sec01 .obj:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
#sec01 .obj.obg01{top: 12%; left: 17%; width: calc(16.378% * 0.9); height: 0; padding-top: calc(15.6434% * 0.9);
}
#sec01 .obj.obg02{top: 3%; left: auto; right: 9%; width: calc(13.124% * 0.9); height: 0; padding-top: calc(25.302% * 0.9);}
#sec01 .obj.obg03{top: auto; bottom: 0; left: 0; width: calc(17.323% * 0.9); height: 0; padding-top: calc(17.323% * 0.9);}
#sec01 .obj.obg04{top: auto; bottom: 0; left: 21%; width: calc(25.145% * 0.9); height: 0; padding-top: calc(25.145% * 0.9);}
#sec01 .obj.obg05{top: 61%; left: 62%; width: calc(10.6565% * 0.9); height: 0; padding-top: calc(10.6565% * 0.9);}
#sec01 .obj.obg06{top: auto; bottom: 0; left: auto; right: 0; width: calc(22.048% * 0.9); height: 0; padding-top: calc(22.048% * 0.9);}
#sec01 .obj.obg01:before{background-image: url(../../../images/site/kor/onepage/sec01_img01.png);}
#sec01 .obj.obg02:before{background-image: url(../../../images/site/kor/onepage/sec01_img02.png);}
#sec01 .obj.obg03:before{background-image: url(../../../images/site/kor/onepage/sec01_img03.png);}
#sec01 .obj.obg04:before{background-image: url(../../../images/site/kor/onepage/sec01_img04.png);}
#sec01 .obj.obg05:before{background-image: url(../../../images/site/kor/onepage/sec01_img05.png);}
#sec01 .obj.obg06:before{background-image: url(../../../images/site/kor/onepage/sec01_img06.png);}
#sec01 .cir{
    position: absolute; bottom: 3.5rem; left: 95%; width: 36.735%; z-index: 11; height: 0; padding-top: 36.735%; background: #000 url(../../../images/site/kor/onepage/sec01_img11.svg) no-repeat center center / 100% auto; border-radius: 50%; box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.14);
    -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
#sec01 .cir em{overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 10%; color: #FFF; font-size: 1.5rem; font-weight: 600; line-height: 1.33; border-radius: 50%;}
#sec01 .cir em span{display: block; width: 100%; margin-top: 1rem; margin-bottom: 0.4rem; text-align: center; font-size: 2.1rem;}
.eng #sec01 .cir em span{margin-top: 1.4rem; font-size: 1.5rem;}
#sec01 .btn_obj{
    position: absolute; top: calc((100% - 23vh - 35%) / 2); right: -35%; width: 32.656%; z-index: 11; height: 0; padding-top: 32.656%; text-indent: -9999px; border-radius: 50%; box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.14);
    transform: translate(-50%,-50%);
    animation: bounce 1.2s infinite;
}
#sec01 .btn_obj:focus{outline: none;}
#sec01 .btn_obj:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../../images/site/kor/onepage/sec01_img07.png) no-repeat center center / 100% auto;}
#sec01 [data-skin="popup"][data-name="1"]{}
#sec01 [data-skin="popup"][data-name="1"] .bx{width: 100%; max-width: calc(840px + 10rem); height: auto; max-height: calc(100vh - 10rem);}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in{overflow-y: auto; width: 100%; padding: 6rem; background-color: #17469E;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in::-webkit-scrollbar{width: 0.5rem;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in::-webkit-scrollbar-thumb{background-color: #8b8b8b; border-radius: 5rem;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in::-webkit-scrollbar-track{background-color: #fcfcfc;border-radius: 5rem;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in >strong{display: block; color: #FFF; font-size: 3rem; font-weight: 600; line-height: 1.5;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in >p{margin-top: 3.6rem; color: #fff; font-size: 2.4rem; font-weight: 300; line-height: 1.5;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul{margin-top: 3.6rem;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li{display: flex; font-size: 2.4rem; color: #fff;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li:not(:first-child){margin-top: 0.5rem;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li >em{display: block; margin-right: 4.8rem;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li >div{display: flex; flex-wrap: wrap; gap: 0 3rem; flex: 1;}
#sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li >div >img{display: block; width: auto; height: 4.4rem; margin-top: 1rem;}

.eng #sec01 .inner .info .txts strong{font-size: 8.5rem; font-weight: 800; letter-spacing: 0.5rem;}
.eng #sec01 .inner .info .txts strong em{font-size: 0.67em; margin-bottom: 0.5rem;}
.eng #sec01 .inner .info .txts p{font-size: 2.7rem;}


@keyframes scrolldown{
    0%{background-position: 0 -5rem;}
    75%{background-position: 0 0;}
    100%{background-position: 0 5rem;}
}
@keyframes bounce{
    0%{margin-top: 0;}
    55%{margin-top: 1.5rem;}
    100%{margin-top: 0;}
}

@media screen and (max-width: 1024px){
    #sec01 .inner .info .txts{}
    /*#sec01 .btn_obj{left: 68%; width: 8rem; height: 8rem; padding: 0;}*/
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in{padding: 4rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >strong{font-size: 2.6rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >p{font-size: 2rem; margin-top: 2rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul{margin-top: 2rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li{font-size: 2rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li >em{margin-right: 3rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li >div{gap: 0.4rem 3rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li >div >img{height: 4rem;}
    #sec01 .obj.obg01{width: calc(16.378% * 1.5); padding-top: calc(15.6434% * 1.5);}
    #sec01 .obj.obg02{width: calc(13.124% * 1.5); padding-top: calc(25.302% * 1.5);}
    #sec01 .obj.obg03{width: calc(17.323% * 1.5); padding-top: calc(17.323% * 1.5);}
    #sec01 .obj.obg04{width: calc(25.145% * 1.5); padding-top: calc(25.145% * 1.5); left: 19%; bottom: 20%;}
    #sec01 .obj.obg05{width: calc(10.6565% * 1.5); padding-top: calc(10.6565% * 1.5); top: 53%;}
    #sec01 .obj.obg06{width: calc(22.048% * 1.5); padding-top: calc(22.048% * 1.5);}
}
@media screen and (max-width: 640px){
    #sec01 .inner .info .txts{padding-bottom: 14vh;}
    #sec01 .inner .info .txts strong{font-size: 7rem;}
    #sec01 .inner .info .txts p{font-size: 2.5rem;}
    #sec01 .cir{width: 32%; padding-top: 32%;}
    #sec01 .cir em{font-size: 1.3rem; padding: 14%; padding-top: 25%; align-items: flex-start; text-align: center; }
    #sec01 .cir em span{width: 100%; margin-top: 0.6rem; margin-bottom: 0.4rem; text-align: center; font-size: 1.4rem;}
    .eng #sec01 .cir em span{margin-top: 0.2rem; font-size: 1.4rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in{padding: 3rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >strong{font-size: 2.2rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >p{font-size: 1.8rem; margin-top: 1.6rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul{margin-top: 1.6rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li{font-size: 1.8rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li >em{margin-right: 2rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li >div{gap: 0.4rem 2rem;}
    #sec01 [data-skin="popup"][data-name="1"] .bx >.in >ul >li >div >img{height: 3rem;}
    #sec01 .btn_obj{
        left: auto; right: calc((50% - 44vw)); bottom: auto; top: calc((50% - 19vh)); width: 25%; padding-top: 25%;
        -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    }

    .eng #sec01 .inner .info .txts strong{font-size: 5.7rem; letter-spacing: 0.5rem;}
    .eng #sec01 .inner .info .txts strong em{font-size: 0.7em; margin-bottom: 0.5rem;}
    .eng #sec01 .inner .info .txts p{font-size: 2rem;}
    .eng #sec01 .cir {left: 92.5%}
    .eng #sec01 .cir em{font-size: 1.1rem; font-weight: 400;}

    @keyframes bounce{
        0%{top: calc(50% - 19vh);}
        55%{top: calc(50% - 18vh);}
        100%{top: calc(50% - 19vh);}
   }
}
@media screen and (max-width: 520px){
    #sec01 .obj.obg01{width: calc(16.378% * 1.6); padding-top: calc(15.6434% * 1.6); top: 21%;}
    #sec01 .obj.obg02{width: calc(13.124% * 1.6); padding-top: calc(25.302% * 1.6);}
    #sec01 .obj.obg03{width: calc(17.323% * 1.6); padding-top: calc(17.323% * 1.6);}
    #sec01 .obj.obg04{width: calc(25.145% * 1.6); padding-top: calc(25.145% * 1.6); left: 19%; bottom: 20%;}
    #sec01 .obj.obg05{width: calc(10.6565% * 1.6); padding-top: calc(10.6565% * 1.6); top: 53%;}
    #sec01 .obj.obg06{width: calc(22.048% * 1.6); padding-top: calc(22.048% * 1.6);}
}


/*-------------------------------------------------------------------
  #sec02
-------------------------------------------------------------------*/
#sec02{position: relative; background-color: #fff; height: calc(var(--vh, 1vh) * 100) !important;}
#sec02 .fp-overflow{overflow-x: hidden; overflow-y: auto; width: 100%; height: calc(var(--vh, 1vh) * 100); max-height: calc(var(--vh, 1vh) * 100);}
#sec02 .inner{overflow: hidden; position: relative; width: 100%; height: 100%; padding: 0;}
#sec02 .inner > [class^="box"]{width: 100%; height: calc(var(--vh, 1vh) * 100);}
#sec02 .inner .box1{display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; font-size: 10px;}
#sec02 .inner .box1 .in{display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: 0 3rem;}
#sec02 .inner .box1 .in .l_t{
    display: inline-block; color: #000; font-size: 9rem; font-weight: 400;
    -webkit-transform: translate(0,0); transform: translate(0,0);
    -webkit-transition: transform 0.2s linear; transition: transform 0.2s linear;
}
#sec02 .inner .box1 .in.on .l_t{
    -webkit-transform: translate(-16rem,0); transform: translate(-16rem,0);
}
#sec02 .inner .box1 .in .r_t{
    display: inline-block; color: #151515; font-size: 13rem; font-weight: 700;
    -webkit-transform: translate(0,0); transform: translate(0,0);
    -webkit-transition: transform 0.2s linear; transition: transform 0.2s linear;
}
#sec02 .inner .box1 .in.on .r_t{
    -webkit-transform: translate(10rem,0); transform: translate(10rem,0);
}
#sec02 .inner .box2{display: block; width: 100%; height: 100vh;}
#sec02 .inner .box2 .copy,
#sec02 .inner .box2 .in{position: relative; width: 100%; height: 100%;}
#sec02 .inner .box2 .copy{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0 !important;}
#sec02 .inner .box2 .in li{position: absolute; width: 11.797%; height: 0; padding-top: 18.4456%; text-indent: -9999px; transform-origin: center center;}
#sec02 .inner .box2 .in li:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 2rem;}
#sec02 .inner .box2 .in li:nth-child(1){top: 12%; left: 2%;}
#sec02 .inner .box2 .in li:nth-child(2){top: 12%; left: 50%;}
#sec02 .inner .box2 .in li:nth-child(3){top: 12%; left: 98%;}
#sec02 .inner .box2 .in li:nth-child(4){top: 50%; left: 25%; }
#sec02 .inner .box2 .in li:nth-child(5){top: 50%; left: 75%;}
#sec02 .inner .box2 .in li:nth-child(6){top: 88%; left: 2%;}
#sec02 .inner .box2 .in li:nth-child(7){top: 88%; left: 50%;}
#sec02 .inner .box2 .in li:nth-child(8){top: 88%; left: 98%;}
#sec02 .inner .box2 .in li:nth-child(1):before{background-image: url(../../../images/site/kor/onepage/sec02_img01.png);}
#sec02 .inner .box2 .in li:nth-child(2):before{background-image: url(../../../images/site/kor/onepage/sec02_img02.png);}
#sec02 .inner .box2 .in li:nth-child(3):before{background-image: url(../../../images/site/kor/onepage/sec02_img03.png);}
#sec02 .inner .box2 .in li:nth-child(4):before{background-image: url(../../../images/site/kor/onepage/sec02_img04.png);}
#sec02 .inner .box2 .in li:nth-child(5):before{background-image: url(../../../images/site/kor/onepage/sec02_img05.png);}
#sec02 .inner .box2 .in li:nth-child(6):before{background-image: url(../../../images/site/kor/onepage/sec02_img06.png);}
#sec02 .inner .box2 .in li:nth-child(7):before{background-image: url(../../../images/site/kor/onepage/sec02_img07.png);}
#sec02 .inner .box2 .in li:nth-child(8):before{background-image: url(../../../images/site/kor/onepage/sec02_img08.png);}
#sec02 .inner .box2.on .in li:before{animation: zoomOut 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;}
#sec02 .inner .box2.on .in li:nth-child(2):before{animation-delay: 0.15s;}
#sec02 .inner .box2.on .in li:nth-child(3):before{animation-delay: 0.3s;}
#sec02 .inner .box2.on .in li:nth-child(4):before{animation-delay: 0.45s;}
#sec02 .inner .box2.on .in li:nth-child(5):before{animation-delay: 0.6s;}
#sec02 .inner .box2.on .in li:nth-child(6):before{animation-delay: 0.75s;}
#sec02 .inner .box2.on .in li:nth-child(7):before{animation-delay: 0.9s;}
#sec02 .inner .box2.on .in li:nth-child(8):before{animation-delay: 1.05s;}
#sec02 .inner .box3{display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width: 100%; height: 100vh; z-index: 10;}
#sec02 .inner .box3 .in{width: 100%; max-width: 55rem;}
#sec02 .inner .box3 .in >strong{display: block; font-size: 7rem; font-family: 'Paperlogy'; color: #000; font-weight: 700; line-height: 1.18; mix-blend-mode: multiply;}
#sec02 .inner .box3 .in >p{display: block; margin-top: 1.4rem; font-size: 3rem; line-height: 1.4; letter-spacing: -0.03rem; color: #151515; word-break: auto-phrase;}
#sec02 .inner .box1,
#sec02 .inner .box2,
#sec02 .inner .box3{position: relative; top: auto; left: auto;
  -webkit-transform: none; transform: none;
}
#sec02 .inner .box1,
#sec02 .inner .box3{position: absolute; top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
#sec02 .inner .box2,
#sec02 .inner .box3{opacity: 0;}
#sec02 .inner .box3{z-index: 1;}

@keyframes zoomOut {
    0% {
        opacity: 1;
        transform:translateY(0);
    }
    10% {
        opacity: 0.2;
    }
    15% {
        opacity:0;
    }
    20% {
        opacity: 0;
        transform: translateY(-100vh);
    }
    21% {
        opacity: 0;
        transform: translateY(100vh);
    }
    30% {
        opacity: 0.75;
    }
    33.33% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.eng #sec02 .inner .box1 .in{gap: 0rem;}
.eng #sec02 .inner .box1 .in .l_t,
.eng #sec02 .inner .box1 .in .r_t{display: block; width: 100%; text-align: center}
.eng #sec02 .inner .box1 .in .l_t{font-size: 8rem;}
.eng #sec02 .inner .box1 .in .r_t{font-size: 12rem;}
.eng #sec02 .inner .box1 .in.on .l_t{
    -webkit-transform: translate(0,-20rem); transform: translate(0,-20rem);
}
.eng #sec02 .inner .box1 .in.on .r_t{
    -webkit-transform: translate(0,20rem); transform: translate(0,20rem);
}
.eng #sec02 .inner .box2 .in li:nth-child(4){top: 50%; left: 17%; }
.eng #sec02 .inner .box2 .in li:nth-child(5){top: 50%; left: 85%;}
.eng #sec02 .inner .box3 .in{max-width: 61rem;}
.eng #sec02 .inner .box3 .in >strong{font-size: 6rem;}
.eng #sec02 .inner .box3 .in >p{font-size: 2.7rem;}

@media screen and (max-width: 1600px){
    #sec02 .inner .box2 .in li{width: calc(11.797% * 1.3); padding-top: calc(18.4456% * 1.3);}
    #sec02 .inner .box2 .in li:nth-child(1),
    #sec02 .inner .box2 .in li:nth-child(2),
    #sec02 .inner .box2 .in li:nth-child(3){top: 5%;}
    #sec02 .inner .box2 .in li:nth-child(4),
    #sec02 .inner .box2 .in li:nth-child(5){top: 50%;}
    #sec02 .inner .box2 .in li:nth-child(6),
    #sec02 .inner .box2 .in li:nth-child(7),
    #sec02 .inner .box2 .in li:nth-child(8){top: 95%;}
    #sec02 .inner .box2 .in li:nth-child(4){left: 2%;}
    #sec02 .inner .box2 .in li:nth-child(5){left: 98%}

    .eng #sec02 .inner .box2 .in li:nth-child(4){top: 50%; left: 2%; }
    .eng #sec02 .inner .box2 .in li:nth-child(5){top: 50%; left: 98%;}
}
@media screen and (max-width: 1440px){
    #sec02 .inner .box1 .in{gap: 0rem;}
    #sec02 .inner .box1 .in .l_t,
    #sec02 .inner .box1 .in .r_t{display: block; width: 100%; text-align: center;}
    #sec02 .inner .box1 .in.on .l_t{
        -webkit-transform: translate(0,0); transform: translate(0,-12vh);
    }
    #sec02 .inner .box1 .in.on .r_t{
        -webkit-transform: translate(0,0); transform: translate(0,17vh);
    }

    .eng #sec02 .inner .box1 .in .l_t{font-size: 6rem;}
    .eng #sec02 .inner .box1 .in .r_t{font-size: 10rem;}
    .eng #sec02 .inner .box1 .in.on .l_t{
        -webkit-transform: translate(0,-20rem); transform: translate(0,-20rem);
    }
    .eng #sec02 .inner .box1 .in.on .r_t{
        -webkit-transform: translate(0,20rem); transform: translate(0,20rem);
    }
}
@media screen and (max-width: 1024px){
    #sec02 .inner .box1 .in .l_t{font-size: 8rem;}
    #sec02 .inner .box1 .in .r_t{font-size: 11rem;}
    #sec02 .inner .box1 .in.on .l_t{
        -webkit-transform: translate(0,0); transform: translate(0,-10vh);
    }
    #sec02 .inner .box1 .in.on .r_t{
        -webkit-transform: translate(0,0); transform: translate(0,14vh);
    }
    #sec02 .inner .box3 .in{max-width: 50rem;}
    #sec02 .inner .box3 .in >strong{font-size: 6.4rem;}
    #sec02 .inner .box3 .in >p{margin-top: 1.2rem; font-size: 2.7rem;}

    .eng #sec02 .inner .box1 .in .l_t,
    .eng #sec02 .inner .box1 .in .r_t{display: block; width: 100%; text-align: center}
    .eng #sec02 .inner .box1 .in .l_t{font-size: 5rem;}
    .eng #sec02 .inner .box1 .in .r_t{font-size: 8rem;}
    .eng #sec02 .inner .box1 .in.on .l_t{
        -webkit-transform: translate(0,-16rem); transform: translate(0,-18rem);
    }
    .eng #sec02 .inner .box1 .in.on .r_t{
        -webkit-transform: translate(10rem,0); transform: translate(0,18rem);
    }
    .eng #sec02 .inner .box3 .in{width: 79rem; max-width: 70%;}
    .eng #sec02 .inner .box3 .in >strong{font-size: 6.3rem;}
    .eng #sec02 .inner .box3 .in >p{font-size: 2.7rem;}


}
@media screen and (max-width: 840px){
    #sec02 .inner .box1 .in .l_t{font-size: 7rem;}
    #sec02 .inner .box1 .in .r_t{font-size: 10rem;}
    #sec02 .inner .box1 .in.on .l_t{
        -webkit-transform: translate(0,0); transform: translate(0,-8vh);
    }
    #sec02 .inner .box1 .in.on .r_t{
        -webkit-transform: translate(0,0); transform: translate(0,12vh);
    }
}
@media screen and (max-width: 640px){
    #sec02 .inner .box1 .in .l_t{font-size: 4rem;}
    #sec02 .inner .box1 .in .r_t{font-size: 7rem;}
    #sec02 .inner .box2 .in li:nth-child(2){left: 62%}
    #sec02 .inner .box2 .in li:nth-child(3){top: 20%; left: 34%;}
    #sec02 .inner .box2 .in li:nth-child(4){top: 20%; left: 98%;}
    #sec02 .inner .box2 .in li:nth-child(5){top: 78%; left: 2%;}
    #sec02 .inner .box2 .in li:nth-child(6){top: 78%; left: 62%}
    #sec02 .inner .box2 .in li:nth-child(7){top: 95%; left: 34%;}
    #sec02 .inner .box2 .in li:nth-child(8){top: 95%; left: 98%;}
    #sec02 .inner .box3 .in{max-width: calc(100% - calc(11.797% * 1.3) - 8rem);}
    #sec02 .inner .box3 .in >strong{font-size: 5.4rem; text-align: center; }
    #sec02 .inner .box3 .in >p{margin-top: 1.2rem; font-size: 2.2rem;text-align: center; }


    .eng #sec02 .inner .box1 .in .l_t{font-size: 4rem;}
    .eng #sec02 .inner .box1 .in .r_t{font-size: 7rem;}
    .eng #sec02 .inner .box2 .in li:nth-child(4){top: 20%; left: 98%;}
    .eng #sec02 .inner .box2 .in li:nth-child(5){top: 78%; left: 2%;}
    .eng #sec02 .inner .box3 .in >strong{font-size: 4.2rem;}
    .eng #sec02 .inner .box3 .in >p{font-size: 2rem;}

}
@media screen and (max-width: 480px){
    .eng #sec02 .inner .box1 .in .l_t{font-size: 3rem;}
    .eng #sec02 .inner .box1 .in .r_t{font-size: 5rem;}
    .eng #sec02 .inner .box1 .in.on .l_t{
        -webkit-transform: translate(0,0); transform: translate(0,-6vh);
    }
    .eng #sec02 .inner .box1 .in.on .r_t{
        -webkit-transform: translate(0,0); transform: translate(0,8vh);
    }
}

/*-------------------------------------------------------------------
  #sec03
-------------------------------------------------------------------*/
#sec03{overflow: hidden; position: relative; width: 100%; height: calc(var(--vh, 1vh) * 100) !important;}
#sec03 .inner{overflow: hidden; position: relative; padding: 0; width: 100%; height: 100%;}
#sec03 .inner .box1{display: block; position: relative; z-index: 1; width: 100%; height: calc(var(--vh, 1vh) * 100); background-repeat: no-repeat; background-position: center center; background-size: cover;}
#sec03 .inner:before{content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 20vh; background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);}
#sec03 .inner .box2,
#sec03 .inner .box3{opacity: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: flex-start; position: absolute; top: 50%; left: 50%; width: 100%; max-width: calc(1440px + 4rem); height: calc(var(--vh, 1vh) * 100); padding: 22vh 2rem; transform: translate(-50%, -50%); transition: opacity 0.2s linear; z-index: 2;}
#sec03 .inner .box2{align-content: flex-start;}
#sec03 .inner .box2 > strong{display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; align-items: baseline; color: #000;}
#sec03 .inner .box2 > strong span{font-size: 7rem; font-weight: 300; line-height: 1.2;}
#sec03 .inner .box2 > strong span.t1{margin-top: 0; margin-bottom: auto; margin-right: 2.2rem;}
#sec03 .inner .box2 > strong span b{font-weight: 500;}
#sec03 .inner .box2 > strong em{font-family: 'Paperlogy'; color: #151515; font-size: 13rem; font-weight: 700; line-height: 1;}
#sec03 .inner .box3{align-content: space-between; padding: 12vh 2rem;}
#sec03 .inner .box3 .t1{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; gap: 3rem 7rem;}
#sec03 .inner .box3 .t1 .t_l{display: block; width: 50rem; color: #000; font-family: 'Paperlogy'; font-size: 7rem; line-height: 1.2;}
#sec03 .inner .box3 .t1 .t_l b{display: block; width: 100%; font-size: 13rem; font-weight: 700; line-height: 1;}
#sec03 .inner .box3 .t1 .t_r{width: calc(100% - 50rem - 7rem); font-size: 3rem; line-height: 1.4; letter-spacing: -0.03rem;}
#sec03 .inner .box3 .t2{display: block; width: 100%; text-align: center; color: #fff; font-size: 4rem; font-family: 'Paperlogy'; line-height: 1.3; font-weight: 400;}
#sec03 .inner .box3 .t2 strong{font-size: 5rem; font-weight: 700;}
#sec03 .inner .box3 .sun{position: absolute; top: -50vh; left: 50%; z-index: -1; width: 100vw; height: 100vh; margin-left: -50vw; background: url(../../../images/site/kor/onepage/sec03_img03.png) no-repeat center center / contain;}

.eng #sec03 .inner .box2 > strong >span{display: block; width: 100%; margin: 0; text-align: center; font-size: 6rem; font-weight: 400;}
.eng #sec03 .inner .box2 > strong i{display: block; width: 100%; margin: 1.2rem 0; text-align: center;}
.eng #sec03 .inner .box2 > strong em{font-size: 11rem;}
.eng #sec03 .inner .box3 .t1 .t_l{font-size: 5rem;}
.eng #sec03 .inner .box3 .t1 .t_l b{font-size: 11rem; margin-bottom: 2rem;}
.eng #sec03 .inner .box3 .t1 .t_r{font-size: 2.6rem;}
.eng #sec03 .inner .box3 .t2{font-size: 3rem;}
.eng #sec03 .inner .box3 .t2 strong{font-size: 4.5rem;}

@media screen and (max-width: 1440px){
    #sec03 .inner .box2,
    #sec03 .inner .box3{padding: 12vh 2rem;}
    #sec03 .inner .box2 > strong{gap: 0.8rem;}
    #sec03 .inner .box2 > strong span.t1,
    #sec03 .inner .box2 > strong i{display: block; width: 100%; margin-bottom: 0; margin-right: 0; text-align: center;}
    #sec03 .inner .box2 > strong span{font-size: 6rem;}
    #sec03 .inner .box2 > strong em{font-size: 11rem;}
    #sec03 .inner .box3 .t1{display: block; text-align: center;}
    #sec03 .inner .box3 .t1 .t_l{width: 100%; font-size: 6rem;}
    #sec03 .inner .box3 .t1 .t_l b{display: inline-block; width: auto; margin-right: 2rem; font-size: 11rem;}
    #sec03 .inner .box3 .t1 .t_r{width: 100%; max-width: 800px; margin: 0 auto; margin-top: 2rem; font-size: 2.6rem;}
    #sec03 .inner .box3 .t2{font-size: 3.6rem;}
    #sec03 .inner .box3 .t2 strong{font-size: 4.7rem;}

    .eng #sec03 .inner .box2 > strong >span{font-size: 5rem;}
    .eng #sec03 .inner .box2 > strong i{margin: 0.8rem 0;}
    .eng #sec03 .inner .box2 > strong em{font-size: 10rem;}
    .eng #sec03 .inner .box3 .t1 .t_l{font-size: 5.5rem;}
    .eng #sec03 .inner .box3 .t1 .t_l b{font-size: 9rem; margin-bottom: 1rem;}
    .eng #sec03 .inner .box3 .t1 .t_r{font-size: 2.5rem;}
    .eng #sec03 .inner .box3 .t2{font-size: 3.4rem;}
    .eng #sec03 .inner .box3 .t2 strong{font-size: 4.8rem;}
}
@media screen and (max-width: 1024px){
    #sec03 .inner .box2,
    #sec03 .inner .box3{padding: 12vh 2rem 8vh;}
    #sec03 .inner .box3 .t1 .t_l{font-size: 5rem;}
    #sec03 .inner .box3 .t1 .t_l b{font-size: 10rem;}
    #sec03 .inner .box3 .t1 .t_r{margin-top: 1.8rem; font-size: 2.5rem;}
    #sec03 .inner .box3 .t2{font-size: 3.4rem;}
    #sec03 .inner .box3 .t2 strong{font-size: 4.5rem;}

    .eng #sec03 .inner .box3 .t1 .t_l{font-size: 4rem;}
    .eng #sec03 .inner .box3 .t1 .t_l b{font-size: 8rem; margin-bottom: 1rem;}
    .eng #sec03 .inner .box3 .t1 .t_r{font-size: 2.5rem;}
    .eng #sec03 .inner .box3 .t2{font-size: 3.4rem;}
    .eng #sec03 .inner .box3 .t2 strong{font-size: 4.5rem;}
}
@media screen and (max-width: 768px){
    .eng #sec03 .inner .box2 > strong >span{font-size: 5rem;}
    .eng #sec03 .inner .box2 > strong i{margin: 0.7rem 0;}
    .eng #sec03 .inner .box2 > strong em{font-size: 9rem;}
}
@media screen and (max-width: 640px){
    #sec03 .inner .box2{padding: 15vh 2rem 8vh;}
    #sec03 .inner .box3{padding: 12vh 2rem 8vh;}
    #sec03 .inner .box2 > strong span{font-size: 4rem;}
    #sec03 .inner .box2 > strong em{font-size: 7rem;}
    #sec03 .inner .box3 .t1 .t_l{font-size: 4rem;}
    #sec03 .inner .box3 .t1 .t_l b{font-size: 7rem; margin-right: 1.2rem;}
    #sec03 .inner .box3 .t1 .t_r{margin-top: 1.4rem; font-size: 2rem;}
    #sec03 .inner .box3 .t2{font-size: 2.5rem;}
    #sec03 .inner .box3 .t2 br{display: none;}
    #sec03 .inner .box3 .t2 strong{font-size: 3.8rem;}

    .eng #sec03 .inner .box2 > strong{gap: 0.4rem;}
    .eng #sec03 .inner .box2 > strong >span{font-size: 3rem;}
    .eng #sec03 .inner .box2 > strong i{margin: 0.7rem 0;}
    .eng #sec03 .inner .box2 > strong em{font-size: 6.2rem;}
    .eng #sec03 .inner .box3 .t1 .t_l{font-size: 2.7rem;}
    .eng #sec03 .inner .box3 .t1 .t_l b{font-size: 5rem; margin-bottom: 1rem;}
    .eng #sec03 .inner .box3 .t1 .t_r{font-size: 1.9rem;}
    .eng #sec03 .inner .box3 .t2{font-size: 2rem;}
    .eng #sec03 .inner .box3 .t2 strong{word-wrap: break-word; font-size: 3.5rem;}
}


/*-------------------------------------------------------------------
  #sec04
-------------------------------------------------------------------*/
#sec04{position: relative; background-color: #153E93;}
#sec04 .inner{overflow: hidden; position: relative; display: grid; height: 100%; padding: 0;}
#sec04 .inner [class*="box"]{grid-area: 1 / 1; height: 100%; object-fit: cover; transition: opacity 0.2s ease;}
#sec04 .inner [class*="box"] .svg_wrap{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
#sec04 .inner [class*="box"] .svg_wrap svg{display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: auto;
  transform: translate(-50%,-50%);
}
#sec04 .inner [class*="box"] >.in{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; position: absolute; top: 0; left: 50%; width: 100%; max-width: calc(1440px + 4rem); height: 100%; padding: 15% 2rem 0;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
#sec04 .inner [class*="box"] >.in strong{display: block; font-weight: 400; line-height: 1.2; font-size: 5rem; color: #fff;}
#sec04 .inner [class*="box"] >.in strong span{display: block; margin-top: 0.6rem; font-size: 7rem; font-weight: 600; font-family: 'Paperlogy';}
#sec04 .inner .box3{
    position: relative; top: auto; left: auto; width: 100%; height: 100vh; padding: 0; transform: translate(0px, 0px);  background-color: #153E93;
    -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear;
}
#sec04 .inner .box3 .tit{display: none;}
#sec04 .inner .box3 .ins{position: relative; width: 100%; height: 100%; max-width: none; margin: 0 auto;}
#sec04 .inner .box3 img{display: block; width: 100%; height: auto;}
#sec04 .box3 .ins .txts{display: flex; flex-wrap: nowrap; align-items: center; gap: 1.5vw; position: absolute; color: white; text-align: left;}
#sec04 .box3 .ins .txts >span{display: flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; width: 8.438vw; height: 8.438vw; border-radius: 50%; background-color: transparent;}
#sec04 .box3 .txts span:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(253, 191, 80, 0.3); border: 1px solid #FDBF50; border-radius: 50%;}
#sec04 .box3.on .txts span:before{animation: pin 1.2s linear infinite;}
#sec04 .box3 .ins .txts > span i{display: block; position: relative; width: 33.34%; height: 33.34%; background: url(../../../images/site/kor/onepage/sec04_img16.png) no-repeat center center; background-size: contain; text-indent: -9999px;}
#sec04 .box3 .ins .txts strong{display: block; font-size: clamp(1.2rem, 2.6vw, 5rem); font-weight: 400; line-height: 1.2; color: #fff; white-space: nowrap;}
#sec04 .box3 .ins .txts strong em{display: block; font-style: normal; font-weight: 700; font-size: clamp(1.5rem, 4vw, 7rem); margin-top: 0.2em;}
#sec04 .inner .ins{display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: flex-start; position: absolute; top: 50%; left: 50%; width: 100%; max-width: calc(1440px + 4rem); height: calc(var(--vh, 1vh) * 100); transform: translate(-50%, -50%); transition: opacity 0.2s linear; z-index: 2;}
#sec04 .inner .box4 p{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; font-size: 10rem; color: #000; transform: translateY(-17vh);}
#sec04 .inner .box4 p i{display: inline-block; width: 22%; height: 0; padding-top: 28.681%; margin: 0 4rem; background: url(../../../images/site/kor/onepage/sec03_img02.png) no-repeat center center / 100% auto; text-indent: -9999px;}
#sec04 .inner .box4 p b{font-family: 'Paperlogy'; color: #151515; font-weight: 700;}
#sec04 .inner .box4{position: relative; padding: 0 2rem; transform-origin: 50% 70%; transform: translate(0px, 0px); background-repeat: no-repeat; background-position: center center; background-size: cover; transition: opacity 0.2s linear;
}
#sec04 .inner .box4 .bg{
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; transform-origin: 50% 70%;
    transform: translate(0px, 0px);
}
#sec04 .inner .box1{z-index: 1; display: block; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(../../../images/site/kor/onepage/sec04_img02.svg);}
#sec04 .inner .box1 i{
    display: block; position: absolute; top: 81%; left: 47.5%; width: 8.504%; height: 0; padding-top: 8.504%; text-indent: -9999px;
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
#sec04 .inner .box1 i:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../../images/site/kor/onepage/sec04_img03.png) no-repeat center center / 100% auto;}
#sec04 .inner .box2{z-index: 1; display: block; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(../../../images/site/kor/onepage/sec04_img05.svg);}
#sec04 .inner .box2 >.in{display: none;}
#sec04 .inner .box2 >i{
    display: block; position: absolute; top: 54.8%; left: 47.6%; width: 3.675%; height: 0; padding-top: 3.675%; text-indent: -9999px;
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
#sec04 .inner .box2 >i:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../../images/site/kor/onepage/sec04_img09.png) no-repeat center center / 100% auto;}
#sec04 .inner .box2 .btn_list{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#sec04 .inner .box2 .btn_list >li{
    position: absolute; top: 50%; left: 50%; width: 3.36%; height: 0; padding-top: 3.36%;
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
#sec04 .inner .box2 .btn_list >li:nth-child(1){top: 47.5%; left: 44%;}
#sec04 .inner .box2 .btn_list >li:nth-child(2){top: 33.5%; left: 33%;}
#sec04 .inner .box2 .btn_list >li >[data-popup]{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7);box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.2); backdrop-filter: blur(0.7rem); text-indent: -9999px; border-radius: 50%;}
#sec04 .inner .box2 .btn_list >li >[data-popup] >i{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../../images/site/kor/onepage/sec04_img10.svg) no-repeat center center / contain; border-radius: 50%;}
#sec04 .inner .box2 .btn_list >li >[data-popup] >i:after{content: ""; display: block; position: absolute; top: -1px; left: -1px; width: calc(100% + 1px); height: calc(100% + 1px); border: 1px solid #fff; border-radius: 50%;}
#sec04 .inner .box2 .btn_list >li >[data-popup] >i:before{
    content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; border-radius: 100%;
    -webkit-transform: scale(0); transform: scale(0);
    -webkit-transition: all 0.15s linear; transition: all 0.15s linear;
}
#sec04 .inner .box2 .btn_list >li >[data-popup]:hover >i:before{
    -webkit-transform: scale(1);transform: scale(1);
}
#sec04 .inner .box2 .sns_list{position: absolute; bottom: 3.5rem; right: 12rem; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1.2rem;}
#sec04 .inner .box2 .sns_list >li{}
#sec04 .inner .box2 .sns_list >li >a{display: block; width: 6rem; height: 6rem; border-radius: 2rem; text-indent: -9999px; background: #fff url(../../../images/site/kor/onepage/sec04_img06.png) no-repeat center center / 100% auto;}
#sec04 .inner .box2 .sns_list >li:nth-child(2) >a{background-image: url(../../../images/site/kor/onepage/sec04_img07.png);}
#sec04 .inner .box2 .sns_list >li:nth-child(3) >a{background-color: #fae100; background-image: url(../../../images/site/kor/onepage/sec04_img08.png);}

.eng #sec04 .inner .box4 p{font-size: 8rem; line-height: 1.2;}
.eng #sec04 .inner .box4 p span{}
.eng #sec04 .inner .box4 p i{order: 2; width: 14%; margin-top: 2rem; padding-top: 18%;}
.eng #sec04 .inner .box4 p b{width: 100%; text-align: center;}
.eng #sec04 .inner .box1{background-image: url(../../../images/site/kor/onepage/sec04_img18.svg);}
.eng #sec04 .inner .box2{background-image: url(../../../images/site/kor/onepage/sec04_img16.svg);}

@keyframes pin{
    0%{transform: scale(70%);}
    35%,65%{transform: scale(100%);}
    100%{transform: scale(70%);}
}

@media screen and (max-width: 1440px){
    #sec04 .inner .box4{padding: 12vh 2rem;}
    #sec04 .inner .box4 p{font-size: 7rem; justify-content: center; line-height: 1.3; transform: translateY(-17vh);}

    .eng #sec04 .inner .box4 p{font-size: 6.85rem; line-height: 1.2;}
}
@media screen and (max-width: 1024px){
    #sec04 .inner .box4{padding: 12vh 2rem 8vh;}
    #sec04 .inner .box4 p{font-size: 7rem; transform: translateY(-15vh);}
    #sec04 .inner .box4 p i{width: calc(22% * 0.8); padding-top: calc(28.681% * 0.8);}
    #sec04 .inner .box2{background-position: center 60%; background-size: 100% auto; background-image: url(../../../images/site/kor/onepage/sec04_img13.png); background-color: #153E93;}
    #sec04 .inner .box2 .svg_wrap{display: none;}
    #sec04 .inner .box2 .btn_list{
        width: 100%; height: 0; left: 0; top: 60%; padding-top: 68.119%;
        transform: translate(0,-60%);
    }
    #sec04 .inner .box2 .btn_list >li{width: calc(3.36% * 1.75); padding-top: calc(3.36% * 1.75);}
    #sec04 .inner .box2 .btn_list >li:nth-child(1){top: 31.4%; left: auto; right: 34%;}
    #sec04 .inner .box2 .btn_list >li:nth-child(2){top: 16%; left: auto; right: 52%;}
    #sec04 .inner .box2 >i{display: none;}
    #sec04 .inner .box2 .sns_list{bottom: 3rem; right: 10rem;}
    #sec04 .inner .box2 .sns_list >li >a{width: 5rem; height: 5rem; border-radius: 1.2rem;}



    #sec04 .inner .box3 .tit{
        display: block; width: 100%; padding: 0 2rem; position: absolute; top: 15%; left: 50%; z-index: 1; font-size: 5rem; color: #fff; font-weight: 400; text-align: left; line-height: 1.2;
        -webkit-transform: translateX(-50%); transform: translateX(-50%);
    }
    #sec04 .inner .box3 .tit em{display: block; font-size: 7rem; font-weight: 600;}
    #sec04 .box3 .ins .txts strong{display: none;}
    #sec04 .box3 .ins{top: 58.5%;}
    #sec04 .box3 .ins .txts > span{
        -webkit-transform: scale(1.4); transform: scale(1.4);
    }
    .eng #sec04 .inner .box2{background-image: url(../../../images/site/kor/onepage/sec04_img17.png); background-position: center center;}
    .eng #sec04 .inner .box2 .btn_list{
        top: 50vh;
        transform: translate(0,-50%);
    }
}
@media screen and (max-width: 768px){
    #sec04 .inner .box1 .in{display: none;}
    #sec04 .inner .box2 >.in{display: block;}
}
@media screen and (max-width: 640px){
    #sec04 .inner .box4{padding: 12vh 2rem 8vh;}
    #sec04 .inner .box4 p{font-size: 5.4rem; justify-content: center; line-height: 1.3; transform: translateY(-12vh);}
    #sec04 .inner .box4 p i{order: 2; margin-left: auto; margin-right: auto; margin-top: 1rem;}
    #sec04 .inner .box4 p b{display: block; width: 100%; text-align: center;}
    #sec04 .inner .box1 >.in{display: none;}
    #sec04 .inner .box1{background-size: auto 100%; background-image: url(../../../images/site/kor/onepage/sec04_img12.svg); background-position: left 55% center;}
    #sec04 .inner [class*="box"] .svg_wrap,
    #sec04 .inner .box1 i{display: none;}
    #sec04 .inner [class*="box"] >.in{padding: 15vh 2rem;}
    #sec04 .inner [class*="box"] >.in strong{font-size: 3.4rem;}
    #sec04 .inner [class*="box"] >.in strong span{font-size: 5.5rem;}
    #sec04 .inner .box2 .sns_list{
        right: auto; left: 50%; bottom: 2.2rem; width: 100%; justify-content: center;
        -wekbkit-transform: translateX(-50%); transform: translateX(-50%);
    }
    #sec04 .inner .box3 .tit{top: 15vh; font-size: 3rem;}
    #sec04 .inner .box3 .tit em{font-size: 5rem;}

    .eng #sec04 .inner .box1{background-image: url(../../../images/site/kor/onepage/sec04_img19.png);}
    .eng #sec04 .inner [class*="box"] >.in strong{font-size: 3rem;}
    .eng #sec04 .inner [class*="box"] >.in strong span{font-size: 5rem;}
    .eng #sec04 .inner .box4 p{font-size: 5rem; line-height: 1.2;}
    .eng #sec04 .inner .box4 p i{width: calc(22% * 0.8); padding-top: calc(28.681% * 0.8);}

    #sec04 .inner .box2 .btn_list{}
}

/*-------------------------------------------------------------------
  #sec05
-------------------------------------------------------------------*/
#sec05{}
#sec05 .inner{overflow: hidden; position: relative; height: 100%; padding: 0;}
#sec05 .inner .box1{position: relative; z-index: 1; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
#sec05 .inner .box1 .in{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; width: 100%; max-width: calc(1440px + 4rem); height: 100%; margin: 0 auto; padding: 9.5% 2rem;}
#sec05 .inner .box1 .in strong{display: inline-flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 2rem; color: #FFF; font-size: 5rem; font-weight: 400; line-height: 1.4;}
#sec05 .inner .box1 .in strong span{font-family: 'Paperlogy'; font-size: 7rem; font-weight: 700; color: #fff; line-height: 1.8;}
#sec05 .inner .box2{
    display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: flex-start; align-items: flex-end; gap: 5rem 5rem; z-index: 3; position: absolute; top: 50%; left: 50%; z-index: 2; width: 100%; max-width: calc(1440px + 4rem); height: 100%; padding: 10vh 2rem;
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear;
}
#sec05 .inner .box2 ol{flex: 1;}
#sec05 .inner .box2 ol li{
    display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 3.2rem;
    -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear;
}
#sec05 .inner .box2 ol li:not(:first-child){margin-top: 4rem;}
#sec05 .inner .box2 ol li em{color: #FFF; font-size: 4rem; font-weight: 400; line-height: 1.2;}
#sec05 .inner .box2 ol li div{flex: 1;}
#sec05 .inner .box2 ol li div strong{display: block; color: #FFF;; font-size: 4rem; font-weight: 600; line-height: 1.2;}
#sec05 .inner .box2 ol li div p{margin-top: 1.2rem; font-size: 2.1rem; font-weight: 500; color: #fff; margin-top: 1.2rem;}
#sec05 .inner .box2 .vdo{overflow: hidden; position: relative; width: 58rem; margin-bottom: 3.7rem; border-radius: 0.6rem;}
#sec05 .inner .box2 .vdo a{display: block; position: relative; width: 100%; height: 0; padding-top: 56.208%;}
#sec05 .inner .box2 .vdo a:before{
    content: ""; display: block; position: absolute; top: 50%; left: 50%; z-index: 1; width: 13.794%; height: 24.54%; background: rgba(0,0,0,0.6) url(../../../images/site/kor/onepage/sec05_img03.svg) no-repeat center center / 100% auto; border-radius: 50%;
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
#sec05 .inner .box2 .vdo a img{
    display: block; position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; max-width: none; height: 100%; transform-origin: left top;
    -webkit-transform: scale(1) translate(-50%,-50%); transform: scale(1) translate(-50%,-50%);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sec05 .inner .box2 .vdo a:hover img{
    -webkit-transform: scale(1.15) translate(-50%,-50%); transform: scale(1.15) translate(-50%,-50%);
}
#sec05 .inner .box2 [data-skin="popup"] >.bx >.in{border-radius: 0;}
#sec05 .inner .box2 [data-skin="popup"] >.bx >.in video{width: 100%; max-width: 1000px; border-radius: 3rem;}

.eng #sec05 .inner .box2 ol li:not(:first-child){margin-top: 2.5rem;}
.eng #sec05 .inner .box2 ol li em,
.eng #sec05 .inner .box2 ol li div strong{font-size: 3.2rem;}
.eng #sec05 .inner .box2 ol li div p{font-size: 2rem;}


@media screen and (max-width: 1440px){
    #sec05 .inner .box2{gap: 3rem;}
    #sec05 .inner .box2 ol li{gap: 2.6rem;}
    #sec05 .inner .box2 ol li:not(:first-child){margin-top: 3rem;}
    #sec05 .inner .box2 ol li em{font-size: 3.6rem;}
    #sec05 .inner .box2 ol li div strong{font-size: 3.6rem;}
    #sec05 .inner .box2 ol li div p{margin-top: 0.8rem; font-size: 1.9rem;}
    #sec05 .inner .box2 .vdo{width: 45rem;}
}
@media screen and (max-width: 1200px){
    #sec05 .inner .box1 .in{padding: 13vh 2rem;}
    #sec05 .inner .box1 .in strong{font-size: 4.6rem;}
    #sec05 .inner .box1 .in strong span{font-size: 6.4rem; line-height: 1.6;}
    #sec05 .inner .box2{padding: 10vh 2rem 7vh;}
    #sec05 .inner .box2 ol{flex: none; order: 2; width: 100%;}
    #sec05 .inner .box2 ol li{gap: 2rem;}
    #sec05 .inner .box2 ol li:not(:first-child){margin-top: 2rem;}
    #sec05 .inner .box2 ol li em{font-size: 3rem;}
    #sec05 .inner .box2 ol li div strong{display: inline-block; font-size: 3rem; margin-right: 1.6rem;}
    #sec05 .inner .box2 ol li div p{display: inline-block;}
    #sec05 .inner .box2 .vdo{order: 1; margin-bottom: 0;}
}
@media screen and (max-width: 1024px){
    #sec05 .inner .box2 ol li:not(:first-child){margin-top: 1.8rem;}
    #sec05 .inner .box2 ol li em,
    #sec05 .inner .box2 ol li div strong{font-size: 2.8rem;}
    #sec05 .inner .box2 ol li div p{font-size: 1.8rem;}

    .eng #sec05 .inner .box2 ol li:not(:first-child){margin-top: 1.8rem;}
    .eng #sec05 .inner .box2 ol li em,
    .eng #sec05 .inner .box2 ol li div strong{font-size: 2.8rem;}
    .eng #sec05 .inner .box2 ol li div p{font-size: 1.8rem;}
}
@media screen and (max-width: 640px){
    #sec05 .inner .box1 .in strong{gap: 0rem 2rem; font-size: 4rem; line-height: 1.2;}
    #sec05 .inner .box1 .in strong span{font-size: 5.4rem; line-height: 1.5;}
    #sec05 .inner .box2 ol li{text-shadow:1px 1px 2px rgba(0,0,0,1)}
    #sec05 .inner .box2 ol li:not(:first-child){margin-top: 1.4rem;}
    #sec05 .inner .box2 ol li em,
    #sec05 .inner .box2 ol li div strong{font-size: 2.4rem;}
    #sec05 .inner .box2 ol li div p{font-size: 1.6rem;}

    .eng #sec05 .inner .box1 .in strong span{font-size: 5rem;}
    .eng #sec05 .inner .box2 ol li:not(:first-child){margin-top: 1rem;}
    .eng #sec05 .inner .box2 ol li em,
    .eng #sec05 .inner .box2 ol li div strong{font-size: 2rem;}
    .eng #sec05 .inner .box2 ol li div p{font-size: 1.6rem;}
}



/*-------------------------------------------------------------------
    footer
-------------------------------------------------------------------*/
#footer {position:relative; padding: 2rem 0 9rem; border-top: 1px solid #DDD;}
#footer .inner{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; width: 100%; max-width: calc(1440px + 4rem); margin: 0 auto; padding: 0 2rem;}
#footer .inner .t_swiper{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 5.3rem; width: 100%;}
#footer .inner .t_swiper .f_title{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 20rem; height: 100%;}
#footer .inner .t_swiper .f_title strong{display: block; color: #151515; font-size: 1.6rem; font-weight: 700;}
#footer .inner .t_swiper .f_title .f_btns{display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.8rem; margin-left: auto;}
#footer .inner .t_swiper .f_title .f_btns .s_prev,
#footer .inner .t_swiper .f_title .f_btns .s_next{
    display: block; width: 4rem; height: 4rem; background: #F1F1F1 url(../../../images/site/kor/layout/f_img01.svg) no-repeat center center / 100% auto; border-radius: 50%; text-indent: -9999px;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#footer .inner .t_swiper .f_title .f_btns .s_prev{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
#footer .inner .t_swiper .f_title .f_btns .s_prev:hover,
#footer .inner .t_swiper .f_title .f_btns .s_next:hover{background-color: #e5e5e5;}
#footer .inner .t_swiper .f_slide{overflow: hidden; width: calc(100% - 20rem - 5.3rem);}
#footer .inner .t_swiper .f_slide .swiper-wrapper{}
#footer .inner .t_swiper .f_slide .swiper-wrapper .swiper-slide{display: block; width: auto; margin-right: 10.5rem;}
#footer .inner .t_swiper .f_slide .swiper-wrapper .swiper-slide:last-child{margin-right: 0;}
#footer .inner .t_swiper .f_slide .swiper-wrapper .swiper-slide img{display: block;}
#footer .inner .info{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 2.4rem; width: 100%; margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid #EEE; font-size: 10px;}
#footer .inner .info:before{content: ""; display: block; width: 18.5em; height: 5em; background: url(../../../images/site/kor/layout/logo_eng.svg) no-repeat center center / 100% auto;}
#footer .inner .info .l{color: #353535; font-size: 1.6rem; font-weight: 500;}
#footer .inner .info .l .copy{display: block; margin-top: 1.2rem; color: #919191; font-size: 1.5rem; font-weight: 400;}
#footer .inner .info .l a{color: #717171; font-weight: 400;}
#footer .inner .info .l span{color: #AAA;}
#footer .inner .info .r{margin-left: auto;}
#footer .inner .info .r .email{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; color: #555; font-size: 1.8rem; font-weight: 500;}
#footer .inner .info .r .email em{display: inline-flex; align-items: center; gap: 0.6rem; margin-right: 2.4rem;}
#footer .inner .info .r .email em:before{content: ""; display: block; width: 2rem; height: 1.6rem; background: url(../../../images/site/kor/layout/f_img02.svg) no-repeat center center / 100% auto;}
#footer .inner .info .r .email a{color: #005596; font-weight: 700;}
#footer .inner .info .r >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 2.4rem;}
#footer .inner .info .r >ul >li{}
#footer .inner .info .r >ul >li >a{font-size: 1.8rem; font-weight: 500; color: #555;}
#footer .inner .info .r >ul >li:first-child >a{color: #005596; font-weight: 700;}

@media screen and (max-width: 1440px){
    #footer .inner .info:before{order: 1;}
    #footer .inner .info .l{order: 3; width: 100%;}
    #footer .inner .info .r{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; order: 2;}
    #footer .inner .info .l .copy{margin-top: 0.8rem;}
    #footer .inner .info .l .copy{margin-top: 0.8rem;}
    #footer{padding: 2rem 0 7rem;}
}
@media screen and (max-width: 1024px){
    #footer{padding: 1.6rem 0 6rem;}
    #footer .inner .t_swiper{gap: 3rem;}
    #footer .inner .t_swiper .f_slide{width: calc(100% - 20rem - 3rem);}
    #footer .inner .t_swiper .f_slide .swiper-wrapper .swiper-slide{margin-right: 4.5rem;}
    #footer .inner .info{margin-top: 1.6rem; padding-top: 1.6rem; font-size: 8px;}
}
@media screen and (max-width: 768px){
    #footer .inner .info{gap: 1.2rem;}
    #footer .inner .info .r{width: 100%; margin-top: 1rem;}
    #footer .inner .info .r >ul{gap: 0.2rem 2rem;}
}
@media screen and (max-width: 640px){
    #footer{padding: 1.6rem 0 5rem;}
    #footer .inner .info{font-size: 6px;}
}
@media screen and (max-width: 480px){
    #logo{font-size: 6px;}
}