@charset "utf-8";

/* RESET */
html,body,div,span,h1,h2,h3,h4,h5,p,a,img,strong,dl,dt,dd,ul,ol,li,article,aside,footer,header,nav,section{margin:0;padding:0;border:0;vertical-align:baseline;box-sizing: border-box;}
body,button{font-family:'맑은 고딕','malgun gothic','돋움','dotum','sans-serif'; font-size: 16px;}
h1,h2,h3,h4,h5{font-size: 16px;}
ul, ol{list-style-type:none}
a,img{vertical-align:top}
a,a:link,a:visited{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
a:hover{text-decoration:none}
a, button {color: inherit}
button{display:block;position:relative;padding:0;border:0;background-color:transparent;outline:none;cursor:pointer}
button:focus,button:active{padding:0}

/* COMMON */
.clearfix::after {display: block; content: ''; clear: both;}
.sr_only{overflow:hidden;visibility:hidden;position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-height:0}

/* LAYOUT */
html, body {width: 100%;}
html, body, .wrap, main {height: 100%; min-height: 100vh;}
.wrap {position: relative; width: 100%; background-color: #000000; z-index:999;}
.wrap .section {position: relative; width: 1280px; padding: 0 40px; margin: 0 auto;}

/* HEADER */
.header {position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1920px; height: 120px; z-index: 101; padding-left:52px; padding-right:28px;}
.header .logo {position: absolute; top: 27px; left: 52px; width: 165px; height: 39px; background-image: url('../images/bi_logo.png'); background-repeat:no-repeat;}
.header .logo a {display: block; height: 100%;}
.header .gnb {position: absolute; right: 30px; top: 32px;}
.header .gnb ul {display: flex;}
.header .gnb ul li {margin-right:4px; background-repeat: no-repeat; }
.header .gnb ul li a,
.header .gnb ul li button {display: block; width: 100%; height: 100%;}
.header .gnb ul li:nth-child(1) {background-image:url('../images/home.png'); width:29px; height:26px; position:relative; top:-3px; cursor:pointer;}
.header .gnb ul li:nth-child(2),
.header .gnb ul li:nth-child(4) {
  background-image:url('../images/menu_divider.png');
  width:1px;
  height:21px;
  margin: 0 15px
}
.header .gnb ul li:nth-child(3) {background-image:url('../images/hamburg.png'); width:25px; height:22px; cursor:pointer;}
.header .gnb ul li:nth-child(5) {background-image:url('../images/star.png'); width:27px; height:27px; position:relative; top:-3px; cursor:pointer;}
.header .gnb ul li:nth-child(6) {background-image:url('../images/btn_close.png'); width:140px; height:31px; margin-left:25px; position:relative; top:-3px; cursor:pointer;}
/* .header .gnb .btn_close {display: block; width: 135px; height: 18px; margin: 10px 0 0 auto; background: url('../images/gnb.png') -10px -78px / auto no-repeat} */

/* .lnb {position: absolute; width:100%; transform:translateX(-50%); left: 50%; top:400px; z-index:101; max-width:148px;} */
.lnb {position: absolute; width:100%; left: 0; top:400px; z-index:101; max-width:148px;}
/* .lnb {position: absolute; width:100%; max-width:148px; left: 640px; top:400px; z-index:101;} */
.lnb ul { position:relative; z-index:11; width:100%; left:20px; max-width:148px;}
.lnb li {position: relative; width: 148px; height: 45px; overflow: hidden; z-index:12;}
.lnb li a, 
.lnb li button {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat:no-repeat; z-index: 100; z-index:13}
/* .lnb li:nth-child(1) button {background-position-y: -370px;} */
.lnb li.update:nth-child(1) button {
  background-image:url('../images/lnb1_off.png');
}
.lnb li.update:hover:nth-child(1) button,
.lnb li.update.active:nth-child(1) button {
  background-image:url('../images/lnb1_on.png');
  left:-6px;
  background-position-y:-5px;
}
.lnb li.update:nth-child(3) button {
  background-image:url('../images/lnb2_off.png');
  /* margin-top:43px; */
}
.lnb li.update:hover:nth-child(3) button,
.lnb li.update.active:nth-child(3) button {
  background-image:url('../images/lnb2_on.png');
  left:-6px;
  background-position-y:-7px;
}
.lnb li.update:nth-child(5) button {
  background-image:url('../images/lnb3_off.png');

}
.lnb li.update:hover:nth-child(5) button,
.lnb li.update.active:nth-child(5) button {
  background-image:url('../images/lnb3_on.png');
  left:-6px;
  background-position-y:-7px;
}

.lnb li.line{
  position:relative;
  top:-7px;
  left:6px;
  width:1px;
  height:40px;
  background-image:url('../images/lnb_line.png');
  background-repeat: no-repeat;
}
/* .lnb li:nth-child(2) button {background-position-y: -250px;}
.lnb li:nth-child(3) button {background-position-y: -310px;} */
/* .lnb li:nth-child(4) a {background-position-y: -190px;}
.lnb li:nth-child(5) a {background-position-y: -130px;} */
/* .lnb li:hover:nth-child(1) button,
.lnb li.active:nth-child(1) button {background-position-y: -550px;}
.lnb li:hover:nth-child(2) button,
.lnb li.active:nth-child(2) button {background-position-y: -430px;}
.lnb li:hover:nth-child(3) button,
.lnb li.active:nth-child(3) button {background-position-y: -490px;}
.lnb li:hover:nth-child(4) a {background-position-y: -70px;}
.lnb li:hover:nth-child(5) a {background-position-y: -10px;} */
/* .lnb li::before {position: absolute; top: 0; left: 0; width: 250px; height: 40px; background: url('../images/lnb_bg.png') 0 0 / auto no-repeat; transition: all .3s ease-in; transform: translateX(-100%); z-index: 1; content: '';}
.lnb li:hover::before,
.lnb li.active::before {transform: translateX(0);} */

.qmenu {position: absolute; top: 50%; right:30px; transform: translateY(-50%); z-index: 101; display: none;}
.qmenu button.btn_top {display: block; width: 100px; height: 40px; background-repeat:no-repeat; background-image: url('../images/top_button.png'); transition: all .2s ease-in;}
.qmenu button.stepup {display: block; width: 100px; height: 55px; background-repeat:no-repeat; background-image: url('../images/stepup_button.png'); transition: all .2s ease-in;}
.qmenu button.return {display: block; width: 100px; height: 55px; background-repeat:no-repeat; background-image: url('../images/return_button.png'); transition: all .2s ease-in;}
/* .qmenu button:hover {transform: translateY(-4px);} */

.swiper {width: 100%; height: 100%;}
.container {opacity: 0;}
.container.load {opacity: 1;}
.container .swiper-slide {min-width: 1200px; min-height: 920px; height: 100%;}
.container .swiper-slide > div {position: absolute; top: 50%; left: 50%; width: 1280px; height: 1080px; transform: translate(-50%, -50%);}

main {position: relative; width: 100%; min-width: 1280px; max-width: 2560px; margin: 0 auto; background: url('../images/bg_main.jpg') center / cover no-repeat; transition: all .5s ease;}
main.sub {background-image: url('../images/bg_update.png'); transition: all 800ms ease-out;}

.num {display: none; position: absolute; top: 80px; left: 50%; width: 785px; height: 22px; background: url('../images/update.png') 0 0 / auto no-repeat; transform: translateX(-50%);}
.num.active {display: block;}
.num .char {position: absolute; top: -8px;  background-repeat:no-repeat; transition: background-position .5s cubic-bezier(0.6, -0.28, 0.735, 0.045)}
.num1 .char {width:196px; height:40px; background-image:url('../images/update_num1.png'); background-position-y: 0px; right: 294px;}
.num2 .char {width:203px; height:40px; background-image:url('../images/update_num2.png'); background-position-y: 0px;right: 288px;}
/* .num3 .char {background-position-y: -74px;} */
.main h2 {
  position:relative;
  right:195px;
  top:233px;
  background-image:url('../images/main_title_group.png');
  background-repeat:no-repeat;
  background-position:center -100px;
  width:919px;
  height:516px;
  /* height:500px; */
}

/* .main h2 div {position: absolute; background: url('../images/title.png') 0 0 / auto no-repeat;}
.main h2 div:nth-child(1) {top: 236px; left: 59px; width: 464px; height: 146px; background-position: -10px -371px;}
.main h2 div:nth-child(2) {top: 234px; left: 780px; width: 144px; height: 148px; background-position: -10px -537px;}
.main h2 div:nth-child(3) {top: 398px; left: 258px; width: 182px; height: 101px; background-position: -10px -128px;}
.main h2 div:nth-child(4) {top: 398px; left: 783px; width: 454px; height: 102px; background-position: -10px -249px;} */
/* .main p {position: absolute; top: 200px; left: 80px; width: 325px; height: 21px;  background: url('../images/title.png') -10px -10px / auto no-repeat;}
.main strong {position: absolute; top: 534px; right: 49px; width: 240px; height: 57px;  background: url('../images/title.png') -10px -51px / auto no-repeat;} */


.section .title {margin: 100px auto 47px; animation: floating1 3s ease infinite;}
.section .content {position: relative; width: 1401px; height: 633px; margin: 0 auto; background-repeat: no-repeat; animation: floating2 2s ease infinite; left:-50px}

@keyframes floating1 {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-8px);}
}

@keyframes floating2 {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-6px);}
}

/* .update1 .title, */
.update1 .caption,
/* .update1 .btn {background: url('../images/update1.png') 0 0 / auto no-repeat;} */
.update1 .title {display: block; background-image: url('../images/update1_title.png'); background-repeat: no-repeat; width: 662px; height: 190px;}
/* .update1 .title {display: block; width: 461px; height: 77px; background-position: -10px -10px; } */
.update1 .content {background-image: url('../images/update1_content.png'); width: 1401px; height:633px}
.update1 .content ol {display: flex; justify-content: space-between; width: 857px; margin: 0 auto; padding-top: 514px;}
.update1 .content .btn {width: 180px; height: 40px; background-position: -10px -182px; transition: transform .5s ease;}
.update1 .content .btn:hover {transform: translateY(-10px);}

.update2 .title {
  display:block;
  background-image:url('../images/update2_title.png');
  background-repeat:no-repeat;
  width:722px;
  height:190px;
}
/* .update2 .caption, */
/* .update2 .btn {background: url('../images/update2.png') 0 0 / auto no-repeat;} */
/* .update2 .title {display: block; width: 536px; height: 77px; background-position: -10px -275px;} */
.update2 .content {background-image: url('../images/update2_content.png'); width:1401px; height:633px;}
/* .update2 .btn {position: absolute; width: 260px; height: 54px;}
.update2 .btn button, .update2 .btn a {display: block; height: 100%;}
.update2 .btn1 {bottom: 66px; left: 340px; background-position: -10px -52px;}
.update2 .btn2 {bottom: 66px; left: 600px; background-position: -10px -126px;} */

/* .footer {position: absolute; bottom: 160px; left: 50%; min-width: 1200px; width: 100%; height: 62px; background: url('../images/footer.png') center center / auto no-repeat; transform: translateX(-50%); z-index: 100;} */
.footer {position: absolute; bottom:100px; left: 50%; min-width: 1200px; width: 100%; height: 62px; background: url('../images/footer.png') center center / auto no-repeat; transform: translateX(-50%); z-index: 100;}

/* .pop_wrap {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2222;}
.pop_wrap.active {display: block;}
.pop_wrap .dimmed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);}
.pop {height: 100%;}
.pop .btn {background: url('../images/pop.png') no-repeat;}
.pop .pop_inner {position: relative; width : 1200px; height: 100%; margin: 0 auto;}
.pop .btn_close {position: absolute; right: 30px; top: 123px; width: 63px; height: 63px; background-position: -10px -157px;}
.pop .pop_content {display: none; position: absolute; left: 50%; top: 208px; width: 100%; height: 612px; transform: translateX(-50%);}
.pop .pop_content.active {display: block;}

.pop1 {background: url('../images/pop1_bg.png') center top / auto no-repeat;}
.pop1.index1 {background: url('../images/pop2_bg.png') center top / auto no-repeat;}
.pop1.index2 {background: url('../images/pop3_bg.png') center top / auto no-repeat;}
.pop1 .pop_inner {position: absolute; top: 0; left: 50%; width: 550px; margin-left: 50px;}
.pop1 li .text {position: absolute; top: 66px; left: 0;}
.pop1 li .btn {position: absolute; bottom: 48px; left: 1px; width: 325px; height: 29px; z-index: 3333; transition: transform 500ms ease;}
.pop1 li .btn:hover {transform: translateX(10px);}
.pop1 li:nth-child(1) .text {width: 486px; height: 338px; background: url('../images/pop1_content.png') left top / auto no-repeat;}
.pop1 li:nth-child(1) .btn {background-position: -10px -10px;}
.pop1 li:nth-child(2) .text {width: 486px; height: 338px; background: url('../images/pop2_content.png') left top / auto no-repeat;}
.pop1 li:nth-child(2) .btn {background: url('../images/arrow2.png')}
.pop1 li:nth-child(3) .text {width: 492px; height: 338px; background: url('../images/pop3_content.png') left top / auto no-repeat;}
.pop1 li:nth-child(3) .btn {background-position: -10px -108px;}

.pop2 {background: url('../images/pop4.png') center top / auto no-repeat;}
.pop_login .pop {position: absolute; top: 50%; left: 50%;  width: 440px; height: 256px; background: url('../images/pop_login.png') center center / auto no-repeat; transform: translate(-50%, -50%); z-index: 3333;}
.pop_login .pop > div {position: absolute; left: 50%; bottom: 40px; display: flex; justify-content: space-between; width: 281px; height: 48px; transform: translateX(-50%);}
.pop_login button {display: block; width: 137px; height: 100%;} */

@media screen and (max-width: 1560px) {
  .feathers .f_4 {display: none;}
}

@media screen and (max-width: 1280px) {
  .main .fog {width: 100%;}
}

.mobile, .mobile body {position: fixed; left: 50%; transform: translateX(-50%); width:1280px; height: 100vh;}
.mobile .wrap {width: 100%;}
.mobile .header {width: 1280px;}
.mobile .container {width: 1280px; touch-action: manipulation !important;}
.mobile .container .swiper-slide > div {height: 927px;}
.mobile .pop .btn_close {top: calc(50% - 360px); transform: translateY(-50%);}
.mobile .pop .pop_content {top: 50%; transform: translate(-50%, -50%);}

.visual_content {
  width:100%;
  max-width:1920px;
  min-width:1280px;
  height:1080px;
  position:absolute;
  margin: 0 auto;
  left:50%;
  top:50%;
  z-index:1;
  transform:translateY(-50%) translateX(-50%);
}
.swiper{
  z-index:100;
  position:relative;
}