@charset "euc-kr";

@import url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo.css');

#wrapper{width:auto; min-width:1100px; margin-top:0;}
.mask{
	width: 1100px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
.mask .thumb{	
	position: relative;
	left: 50%;
	transform:translateX(-50%);
}

/* click text default */
#wrapper .btn {
    display: inline-block;
    text-indent: -9999px;
}

/* visual */
.visual{background:url(img/visual.png) no-repeat center,linear-gradient(to right, rgba(142,212,255,1) 0%,rgba(18,119,255,1) 100%); overflow:hidden;}
.visual .mask{width:1328px;}
.visual .circle_box{position:absolute; right:250px; top:795px;}
.visual .circle_box > .inner{position:relative;}
.visual .circle_box > .inner *{position:absolute; }
.visual .circle_box > .inner .circle{left:0; top:0;}
.visual .circle_box > .inner .txt{left:16px; top:13px; animation: blinker 1s step-start infinite;}
.visual .rolling{position:absolute; right:135px; top:0; overflow:hidden; height:100%;}
.visual .rolling:before{content:""; display:block; position:absolute; bottom:0; left:0; width:300px; height:69px; background:url(img/visual_roll_gradient.png) 0 0 no-repeat; z-index:10;}
.visual .rolling .roller.original{animation: 100s linear 0s infinite normal forwards running rollingTop1;}
.visual .rolling .roller.clone{animation: 100s linear 0s infinite normal none running rollingTop2;}
.visual .rolling .roller img{margin:10px 0;}
.visual .btn{left:160px; bottom:315px; width:610px; height:125px; position: absolute}
.visual .btn::before {content: ''; width: 79px; height: 88px; position: absolute; top: 80px; right: 20px; background: url(img/click_01.png) no-repeat; animation: blinker 1s step-start infinite;}

@keyframes rollingTop1 {
    0% {transform: translateY(0);}
    50% {transform: translateY(-100%);}
    50.01%{transform: translateY(100%);}
    100%{transform: translateY(0);}
}
@keyframes rollingTop2 {
    0% {transform: translateY(0);}
    100% {transform: translateY(-200%);}
}


.spin2 {
  -webkit-animation: spin2 3s linear 0s infinite normal;
          animation: spin2 3s linear 0s infinite normal;
}
@keyframes spin2 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes blinker {
	50% {
		opacity: 0;
	}	
}

/* cont1 */
.cont1{}
.cont1 .mask{width:1200px; padding:0 50px;}
/*.cont1_2 .tab01 ul li a {cursor: default;}*/

/* cont2 */
.cont2 {background: #f2f2f2;}
.cont2 .cont1_1{margin-bottom:60px;}
.cont2 .tabArea {background: #2c2e45;}
.cont2 .tabArea > ul{width: 1100px; margin: 0 auto; display:flex; height:94px; background:#2c2e45;}
.cont2 .tabArea li{width: 100%;}
.cont2 .tabArea li a{background:#2c2e45; color:#a7b3c1; font-size:28px; text-align:center; height: 100%; display: flex;align-items: center;justify-content: center; font-family:"NanumSquareNeo"; font-weight:800;}
.cont2 .tabArea li.on a{background:#f2f2f2; font-weight:900; color:#2c2e45;}
.cont2 .cont1_1 .tab_contents{position: relative; margin-top: 70px; background-color:#fff; border-radius: 15px; overflow: hidden;}
.cont2 .cont1_1 .tab_contents a {position:absolute; bottom:85px; right: 115px; width:380px; height:80px;}
.cont2 .cont1_1 .tab_contents a::before {content: ''; width: 43px; height: 47px; position: absolute; top: 50px; right: 5px; background: url(img/click_02.png) no-repeat; animation: blinker 1s step-start infinite;}
.cont2 .cont1_2{padding:50px 40px; background-color:#fff; text-align:center; border-radius: 15px; overflow: hidden;}
.cont2 .cont1_2 > .tab,
.cont2 .cont1_2 > .tab *{-webkit-box-sizing:initial; -moz-box-sizing:initial; box-sizing:initial;}
.cont2 .cont1_2 > .tab{width:850px; margin:0 auto;}
.cont2 .cont1_2 > .tab:after{content:""; display:block; clear:both;}
.cont2 .cont1_2 > .tab li{float:left; position:relative; background:#fafbfc; z-index:1; width:9.2%; height:46px; border:1px solid #d7d7d9; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:2px solid #4e4e4e; text-align:center; font-weight:bold; line-height:1.2; padding:9px 0 0; margin:0 0 0 -1px;}
.cont2 .cont1_2 > .tab li a{width:100%; height:100%; display:block; color:#777;}
.cont2 .cont1_2 > .tab li.on{border:2px solid #4e4e4e; color:#4e4e4e; background:#fff; z-index:2; border-bottom:none; padding:8px 0 0;}
.cont2 .cont1_2 > .tab li.on a{color:#4e4e4e;}
.cont2 .cont1_2 .btn_area{position:relative;}
.cont2 .cont1_2 .btn_area a{position:absolute; top:60px; left:50%; transform:translateX(-50%); width:583px; height:100px;}

/*attention_box*/
.attention_box {margin-bottom: 100px;}
.attention_btn button {width: 1200px; height: 70px; background: url(img/attention_open.png) no-repeat; font-size: 0;}
.attention_box.active button {background: url(img/attention_close.png) no-repeat;}
.attention_box .attention_list{display:none; padding:50px; background-color:#f6f6f6; border-radius:40px; text-align:left; letter-spacing:-1px;}
.attention_box .attention_list .tit{margin-bottom:10px; padding-left:10px; font-weight:900; font-size:20px; color:#333;}
.attention_box .attention_list ul+p{margin-top:25px;}
.attention_box .attention_list ul li{position:relative; padding-left:10px; font-weight:500; font-size:16px; color:#777;}
.attention_box .attention_list ul li:before{content:""; display:block; position:absolute; top:13px; left:0; width:5px; height:1px; background-color:#777;}
.attention_box .attention_list ul li:not(:first-child){margin-top:4px;}


/* event2 */
.event2 {position:relative; padding: 120px 0 100px;}
.event2 button.thumb {margin-top: 50px;}
.event2 .attention_box {margin-top: 60px; margin-bottom: 0;}

/* cont3 */
.cont3{padding-bottom:120px; background-color:#2e4055;}
.cont3 .tab{display:flex;}
.cont3 .tab button{display:flex; flex:1; align-items:center; justify-content:center; height:84px; background-color:#6c7988; font-family:"NanumSquareNeo"; font-weight:800; font-size:28px; color:#a7b3c1; cursor:pointer;}
.cont3 .tab button.on{background-color:#00ffd8; font-weight:900; color:#001c3b;}
.cont3 .tabCon{height:730px; background-color:#fff; text-align:center;}
.cont3 .tabCon .swiper-pagination{bottom:36px;}
.cont3 .tabCon .swiper-pagination span{width:12px; height:12px; background-color:#ddd; opacity:1;}
.cont3 .tabCon .swiper-pagination span.swiper-pagination-bullet-active{background-color:#0039ad;}
.cont3 .tabCon .top{margin-bottom:24px;}
.cont3 .tabCon .top{display:flex; justify-content:center; flex-wrap:wrap; gap:60px;}
.cont3 .tabCon .top .video{width:420px; height:236px; background-color:#444;}
.cont3 .tabCon .top .video video{width:100%; height:100%;}
.cont3 .tabCon .top .tab_slider2_1{position:relative; overflow:hidden; width:421px; padding-bottom:27px;}
.cont3 .tabCon .top .tab_slider2_1 .swiper-pagination{bottom:-4px;}
.cont3 .tabCon .bottom{position:relative; padding:0 80px;}
.cont3 .tabCon .bottom .tab_slider2_2{overflow:hidden;}
.cont3 .tabCon .bottom .tab_slider2_2 .swiper-wrapper{align-items:end;}
.cont3 .tabCon .bottom .swiper-button-next{right:28px;}
.cont3 .tabCon .bottom .swiper-button-prev{left:28px;}
.cont3 .tabCon .bottom .swiper-button-next:after,
.cont3 .tabCon .bottom .swiper-button-prev:after{display:none;}

/* cont4 */
.cont4{overflow:hidden; background-color:#cde3f2;}
.cont4 .mask{overflow:visible;}
.cont4 .btn{position:absolute; bottom:146px; left:50%; transform:translateX(-50%); width:550px; height:100px;}

/* noticeBox */
.noticeBox{position:relative; background:#3f3f3f;}
.noticeBox .mask{width:1200px; padding:70px 50px;}
.noticeBox .tit{position:relative; margin-bottom:12px; font-family:"NanumSquareNeo"; font-weight:900; color:#fff; font-size:28px;}
.noticeBox ol{margin:5px 0 0; letter-spacing:-1px;}
.noticeBox li{position:relative; font-family:'Noto Sans KR'; font-weight:400; font-size:18px; color:#aaa; line-height:23px; text-indent:-18px; padding:0 0 0 18px; letter-spacing:-1px;}
.noticeBox li:not(:first-child){margin-top:8px;}

#only1_rnb_sky_banner{display:none;}
#ch-plugin{display:none !important;}