/* section01 */
#section01{ overflow: hidden; position: relative; width: 100%; height: 100vh; background-color: #000; }
#section01 > .img{ opacity: .6; }
#section01 .videoWrap{position:relative; width: 100%; height:100%; top: 0; left: 0; margin:0; pointer-events: none;}
#section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    display: block;
 }
#section01 .fullSlogan { position: absolute; top: calc(50% - 130px); left: 0; right: 0; margin: 0 auto; z-index: 10; text-align: left;}
#section01 .fullSlogan p{ display: inline-block; font-size: 18px; line-height: 24px; padding-bottom: 25px; position: relative;}
#section01 .fullSlogan h3{ font-size: 60px; line-height: 64px; padding-bottom: 50px;}
#section01 .fullSlogan .a-wrap{ font-size: 0;}
#section01 .fullSlogan a{ border: 1px solid #fff; color: #fff; transition: .3s; margin-right: 10px;}
#section01 .fullSlogan a:hover{ border: 1px solid #133e6e;}
#section01 .control{ z-index: 1; font-size: 0; position: absolute; bottom: 100px; left: 0; right: 0; margin: 0 auto; width: 170px; text-align: center; z-index: 100;}
#section01 .control li{ display: inline-block; padding: 0 5px;}
#section01 .control li a{ display: block; font-size: 18px; color: #fff; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; border: 1px solid #fff;}
#section01 .control li i{ color: #fff; position: relative; }
#section01 .scroll-down{ position: absolute; width: 34px; height: 23px; z-index: 10; bottom: 30px; left: 0; right: 0; margin: 0 auto;}
#section01 .play-pause a.hide{ display: none;}
#section01 .control .mute-onoff a.hide{ display: none;}
.vidbox .ratio iframe, .end-video .videoWrap iframe, #cutvideo1, #cutvideo2{pointer-events: none;}
.m-play{ display: none;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section01 { width: 100%; height:128.21vw; padding-top: 0; }
  #section01 .videoWrap{position:absolute; width: 100%; height:100%; top: 0; left: 0;  }
  #section01 .videoWrap, #section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ pointer-events: unset;}
  #section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ opacity: 1; }
  #section01 .fullSlogan { top: calc(50% - 100px); }
  #section01 .control{ bottom: 25px; }
  #section01 .control li a{ display: block; font-size: 12px; width: 28px; height: 28px; line-height: 29px; }
}


#section02{ width: 100%; position: relative; padding: 120px 0 180px; text-align: center;}
#section02 .swiper-container{ margin-bottom: 80px;}
#section02 .text-wrap h3{ font-size: 40px; line-height: 56px; padding-bottom: 50px;}
#section02 .text-wrap p{ font-size: 15px; line-height: 25px; padding-bottom: 20px; font-weight:300; color: #888;}
#section02 .text-wrap p.color2{ padding-bottom: 0; padding-top: 20px; color:#E8D0A4;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section02{ width: 100%; position: relative; padding: 0 0 100px; text-align: center;}
  #section02 .wrap1740{ padding: 0;}
  #section02 .swiper-container{ margin-bottom: 30px;}
  #section02 .text-wrap h3{ font-size: 24px; line-height: 36px; padding-bottom: 30px;}
  #section02 .text-wrap p{ padding-bottom: 20px;}
  #section02 .text-wrap p.color2{ padding-bottom: 0; padding-top: 0;}
}

#section03{ padding-bottom: 180px;}
#section03 .wrap1740 > div{ position: relative; width: 100%; height: 648px;}
#section03 .wrap1740 .top{ margin-bottom: 120px;}
#section03 .wrap1740 > div .box{ position: absolute; width: 100%; height: 100%; background-color: #FCFAF6; display: block; z-index: -1;}
#section03 .wrap1740 .video-wrap{ width: 1152px; height: 100%; overflow: hidden; position: relative;}
#section03 .wrap1740 .video-wrap iframe{ position: absolute; width: 110%; height: 110%; left: -5%; top: -5%;}
#section03 .wrap1740 .text-wrap{ width: calc(100% - 1152px); }
#section03 .wrap1740 .text-wrap h3{ font-size: 40px; line-height: 56px; padding-bottom: 40px;}
#section03 .wrap1740 .text-wrap p{ font-size: 15px; line-height: 25px; padding-bottom: 30px; font-weight:300; color: #888;}
#section03 .wrap1740 .text-wrap p.color2{ padding-bottom: 0; color:#E8D0A4;}
#section03 .wrap1740 .top .text-wrap{ padding-right: 150px; text-align: right;}
#section03 .wrap1740 .btm .text-wrap{ padding-left: 150px; text-align: left;}
#section03 .wrap1740 .btm .video-wrap{ order: 2;}
/* =================== 1780px =================== */
@media (max-width: 1780px) {
  #section03 .wrap1740 > div{ height: 36.40vw;}
  #section03 .wrap1740 .video-wrap{ width: 64.72vw; }
  #section03 .wrap1740 .text-wrap{ width: calc(100% - 64.72vw); }
  #section03 .wrap1740 .text-wrap h3{ font-size: 2.25vw; line-height: 3.15vw; padding-bottom: 2.25vw;}
  #section03 .wrap1740 .text-wrap p{ font-size: 0.79vw; line-height: 1.35vw; padding-bottom: 1.69vw;}
  #section03 .wrap1740 .top .text-wrap{ padding-right: 8.43vw; }
  #section03 .wrap1740 .btm .text-wrap{ padding-left: 8.43vw;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section03{ padding-bottom: 100px;}
  #section03 .wrap1740{padding: 0;}
  #section03 .wrap1740 > div{ height: auto;}
  #section03 .wrap1740 .top{ margin-bottom: 60px;}
  #section03 .wrap1740 > div .box{ position: absolute; width: 301px; height: 171px; bottom: -20px;}
  #section03 .wrap1740 .top .box{ left: 0;}
  #section03 .wrap1740 .btm .box{ left: unset; right: 0;}
  #section03 .wrap1740 .btm{ margin-left: 15px;}
  #section03 .wrap1740 .video-wrap{ width: calc(100% - 15px); height: 54.13vw; }
  #section03 .wrap1740 .text-wrap{ width: calc(100% - 15px);  }
  #section03 .wrap1740 .text-wrap h3{ font-size: 24px; line-height: 36px; padding-bottom: 20px;}
  #section03 .wrap1740 .text-wrap p{ font-size: 14px; line-height: 24px; padding-bottom: 0;}
  #section03 .wrap1740 .top .text-wrap{ padding: 20px 15px 0; text-align: left;}
  #section03 .wrap1740 .btm .text-wrap{ padding: 20px 15px 0; text-align: right; }
  #section03 .wrap1740 .btm .video-wrap{ order: 0;}
}


#section04{ position: relative;}
#section04 .text-wrap{ position: absolute; top: calc(50% - 8.33vw); left: 0; right: 0; margin: 0 auto; z-index: 50; text-align: center; width: fit-content; transition: .5s;}
#section04 .text-wrap img{ padding-bottom: 20px;}
#section04 .text-wrap h3{ font-size: 60px; line-height: 72px; padding-bottom: 10px;}
#section04 .text-wrap p{ font-size: 15px; font-weight: 300; padding-bottom: 40px;}
#section04 .text-wrap a{ display: block; width: 200px ; height: 36px; line-height: 34px; text-align: center; border-radius: 20px; border: 1px solid #fff; color: #fff;font-size: 16px; position: relative; left: 0; right: 0; margin: 0 auto;}
#section04 .text-wrap.hide{ opacity: 0;}
#section04 .swiper-container{ background-color: #202427; }
#section04 .swiper-slide{ opacity: .4; transition: .5s;}
#section04 .swiper-slide.show{ opacity: 1;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section04 .text-wrap{ position: relative; top: unset; width: 100%; padding-bottom: 40px;}
  #section04 .text-wrap img{ padding-bottom: 35px;}
  #section04 .text-wrap h3{ font-size: 24px; line-height: 26px; padding-bottom: 20px; color: #333;}
  #section04 .text-wrap p{ font-size: 14px; padding-bottom: 30px; color: #333;}
  #section04 .text-wrap a{ width: 140px ; height: 30px; line-height: 28px; border: 1px solid #333; color: #333; font-size: 12px; }
  #section04 .swiper-slide{ opacity: 1; }
}


#section05{ padding: 100px 0 20px; background-color: #FDFCF9;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section05{ padding: 40px 0 20px; }
}



#section06{ position: relative; text-align: center; padding: 100px 0 120px;}
#section06 .tit{ padding-bottom: 100px;}
#section06 .tit h3{ font-size: 40px; padding-bottom: 60px;}
#section06 .tit p{ font-size: 15px; line-height: 25px; font-weight: 300; color: #888;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section06{ position: relative; text-align: center; padding: 60px 0 100px;}
  #section06 .tit{ padding-bottom: 40px;}
  #section06 .tit h3{ font-size: 24px; line-height: 36px; padding-bottom: 30px;}
  #section06 .tit p{ font-size: 14px; line-height: 24px;}
}


#section07{ position: relative; text-align: center; background-color: #FCFAF6; padding: 0 0 110px;}
#section07 > .bgi{ width: 100%; height: 36.46vw;}
#section07 .tit{ padding-bottom: 80px; padding-top: 100px;}
#section07 .tit h3{ font-size: 40px; line-height: 56px; padding-bottom: 40px;}
#section07 .tit p{ font-size: 15px; font-weight: 300; color: #888; line-height: 28px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section07{ position: relative; text-align: center; padding: 0 0 40px;}
  #section07 > .bgi{ height: 74.93vw;}
  #section07 .tit{ padding-bottom: 40px;  padding-top: 40px;}
  #section07 .tit h3{ font-size: 24px; line-height: 36px; padding-bottom: 30px;}
  #section07 .tit p{ font-size: 14px; line-height: 24px;}
}


#section08{ position: relative; text-align: center; padding: 100px 0 200px;}
#section08 .tit{ padding-bottom: 100px;}
#section08 .tit h3{ font-size: 40px; line-height: 56px; padding-bottom: 40px;}
#section08 .tit p{ font-size: 15px; line-height: 25px; font-weight: 300; color:#888;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section08{ position: relative; text-align: center; padding: 60px 0;}
  #section08 .tit{ padding-bottom: 40px; }
  #section08 .tit h3{ font-size: 24px; line-height: 36px; padding-bottom: 30px;}
  #section08 .tit p{ font-size: 14px; line-height: 24px; font-weight: 300;}
}

#section09{ padding-bottom: 180px; overflow: hidden;}
#section09 .marquee_wrap { white-space: nowrap; font-size: 40px; display: flex; align-items: center; will-change: transform; width: 100%}
#section09 .marquee_box { will-change: transform; animation: marquee 30s linear infinite; font-family: '넥슨Lv1고딕'; font-weight: 700; }
@keyframes marquee {
  from { transform: translateZ(0) }
  to { transform: translate3d(-100%,0,0) }
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section09{ padding-bottom: 60px;}
  #section09 .marquee_wrap { font-size: 16px; }
}


#section10{ font-size: 0;}
#section10 .videoWrap{ width: 100%; height: 56.25vw; position: relative;}
#section10 .videoWrap iframe{ position: absolute; width: 100%; height: 100%;}





#special-offer{ position: relative; text-align: center; padding: 100px 0 40px;}
#special-offer .tit{ padding-bottom: 100px;}
#special-offer .tit h3{ font-size: 40px; line-height: 56px; padding-bottom: 40px;}
#special-offer .tit p {
    font-size: 15px;
    line-height: 25px;
    font-weight: 300;
    color: #888;
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #special-offer{ position: relative; text-align: center; padding: 60px 0;}
  #special-offer .tit{ padding-bottom: 40px; }
  #special-offer .tit h3{ font-size: 24px; line-height: 36px; padding-bottom: 30px;}
  #special-offer .tit p {
    font-size: 14px;
    line-height: 24px;
    font-weight: 300;
}
}