@charset "utf-8";

/**폰트 사이즈*/
/**********************************************************************************************
기본폰트 13px, 0.813em
22px ---> 11px ---> 0.846em
24px ---> 12px ---> 0.923em
26px ---> 13px ---> 0.813em
28px ---> 14px ---> 1.077em
30px ---> 15px ---> 1.154em
32px ---> 16px ---> 1.231em
34px ---> 17px ---> 1.308em
36px ---> 18px ---> 1.385em
38px ---> 19px ---> 1.462em
48px ---> 24px ---> 1.846em
58px ---> 29px ---> 2.231em
**********************************************************************************************/

/*main_header*/
.main_wrap #header_wrap {background: none; border-bottom:0;}
.main_wrap #header_wrap .header_cont .logo {background: url(../images/mobile_gnb_logo.png) left 12px no-repeat;  background-size: 120px 36px;}
.main_wrap #header_wrap .header_cont .left_wrap .left_more a.btn_open_more {background: url(../images/main_icon_more.png) left top no-repeat; background-size:18px 18px;}
.main_wrap #header_wrap .header_cont .right_wrap .right_menu a {background: url(../images/main_icon_menu.png) left top no-repeat; background-size:20px 18px;}

/*main_visual*/
.content {position:relative; height:100%; transition: 0.5s all;}
.main_visual {position:relative; height:100%;}
.main_visual [class^="list_"] {position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;  padding:0 15px; box-sizing:border-box; -webkit-transition-duration:1s; transition-duration:1s;}
.main_visual .list_bg { position:absolute; left:0; top:0; right:0; height:100%; overflow: hidden; opacity: 0.5; -webkit-transition-duration:1s; -webkit-transition-delay:0.3s; transition-duration:1s; transition-delay:0.3s;}
.main_visual .list_01 .list_bg.type01 {background:url(../images/visual_type01_01.jpg) 50% 50% no-repeat; background-size:cover;}
.main_visual .list_01 .list_bg.type02 {background:url(../images/visual_type01_02.jpg) 50% 50% no-repeat; background-size:cover;}
.main_visual .list_01 .list_bg.type03 {background:url(../images/visual_type01_03.jpg) 50% 50% no-repeat; background-size:cover;}

.main_visual .list_02 .list_bg.type01 {background:url(../images/visual_type02_01.jpg) 50% 50% no-repeat; background-size:cover;}
.main_visual .list_02 .list_bg.type02 {background:url(../images/visual_type02_02.jpg) 50% 50% no-repeat; background-size:cover;}
.main_visual .list_02 .list_bg.type03 {background:url(../images/visual_type02_03.jpg) 50% 50% no-repeat; background-size:cover;}

.main_visual .list_03 .list_bg.type01 {background:url(../images/visual_type03_01.jpg) 50% 50% no-repeat; background-size:cover;}
.main_visual .list_03 .list_bg.type02 {background:url(../images/visual_type03_02.jpg) 50% 50% no-repeat; background-size:cover;}
.main_visual .list_03 .list_bg.type03 {background:url(../images/visual_type03_03.jpg) 50% 50% no-repeat; background-size:cover;}

.main_visual .list_04 .list_bg.type01 {background:url(../images/visual_type04_01.jpg) 50% 50% no-repeat; background-size:cover;}
.main_visual .list_04 .list_bg.type02 {background:url(../images/visual_type04_02.jpg) 50% 50% no-repeat; background-size:cover;}
.main_visual .list_04 .list_bg.type03 {background:url(../images/visual_type04_03.jpg) 50% 50% no-repeat; background-size:cover;}

.main_visual [class^="list_"] .list_cont {position:absolute; left:0; right:0; top:50%; margin-top:-115px; text-align:center; color:#fff; height:auto;}

/*visualBg_on 활성화*/
.main_visual .section.on .list_bg {opacity:1; }
.main_visual .section.on .tit_wrap span.border_line {border-bottom:1px solid #fff;}
/*s::visual_text*/
/*tit*/
.main_visual .tit_wrap{position:relative; display: block; height: 17px; margin:0 auto; color:#f9f9f9;}
.main_visual .tit_wrap span {position: absolute; display: block; top:0; left:0; opacity: 0; font-size:0.923em; font-weight:bold;}
.main_visual .section.on .tit_wrap span {opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s;}

/*list_01*/
.main_visual .list_01 .tit_wrap {width:36px;}
.main_visual .list_01 .tit_wrap span.l_1 {top:0px; left:0px;}
.main_visual .list_01 .tit_wrap span.l_2 {top:0px; left:12px;}
.main_visual .list_01 .tit_wrap span.l_3 {top:0px; left:24px;}
.main_visual .list_01 .tit_wrap span.l_4 {top:0px; left:36px;}
.main_visual .list_01 .tit_wrap span.l_5 {top:0px; left:48px;}
.main_visual .list_01 .tit_wrap span.l_6 {top:0px; left:60px;}
.main_visual .list_01 .tit_wrap span.l_7 {top:0px; left:72px;}
.main_visual .list_01 .tit_wrap span.l_8 {top:0px; left:84px;}
.main_visual .list_01 .tit_wrap span.border_line {top:16px;}

.main_visual .list_01.section.on .tit_wrap span.l_1 {-webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
.main_visual .list_01.section.on .tit_wrap span.l_2 {-webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
.main_visual .list_01.section.on .tit_wrap span.l_3 {-webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
.main_visual .list_01.section.on .tit_wrap span.l_4 {-webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
.main_visual .list_01.section.on .tit_wrap span.l_5 {-webkit-transition-delay: 0.5s; transition-delay: 0.5s;}
.main_visual .list_01.section.on .tit_wrap span.l_6 {-webkit-transition-delay: 0.6s; transition-delay: 0.6s;}
.main_visual .list_01.section.on .tit_wrap span.l_7 {-webkit-transition-delay: 0.7s; transition-delay: 0.7s;}
.main_visual .list_01.section.on .tit_wrap span.l_8 {-webkit-transition-delay: 0.8s; transition-delay: 0.8s;}
.main_visual .list_01.section.on .tit_wrap span.border_line {width:36px; -webkit-transition-delay: 1.0s; -webkit-transition-duration: 0.5s; transition-delay: 1.0s; transition-duration: 0.5s;}

/*list02*/
.main_visual .list_02 .tit_wrap {width:96px;}
.main_visual .list_02 .tit_wrap span.l_1 {top:0px; left:0px;}
.main_visual .list_02 .tit_wrap span.l_2 {top:0px; left:12px;}
.main_visual .list_02 .tit_wrap span.l_3 {top:0px; left:24px;}
.main_visual .list_02 .tit_wrap span.l_4 {top:0px; left:36px;}
.main_visual .list_02 .tit_wrap span.l_5 {top:0px; left:48px;}
.main_visual .list_02 .tit_wrap span.l_6 {top:0px; left:60px;}
.main_visual .list_02 .tit_wrap span.l_7 {top:0px; left:72px;}
.main_visual .list_02 .tit_wrap span.l_8 {top:0px; left:84px;}
.main_visual .list_02 .tit_wrap span.border_line {top:16px; left:0px;}

.main_visual .list_02.section.on .tit_wrap span.l_1 {-webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
.main_visual .list_02.section.on .tit_wrap span.l_2 {-webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
.main_visual .list_02.section.on .tit_wrap span.l_3 {-webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
.main_visual .list_02.section.on .tit_wrap span.l_4 {-webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
.main_visual .list_02.section.on .tit_wrap span.l_5 {-webkit-transition-delay: 0.5s; transition-delay: 0.5s;}
.main_visual .list_02.section.on .tit_wrap span.l_6 {-webkit-transition-delay: 0.6s; transition-delay: 0.6s;}
.main_visual .list_02.section.on .tit_wrap span.l_7 {-webkit-transition-delay: 0.7s; transition-delay: 0.7s;}
.main_visual .list_02.section.on .tit_wrap span.l_8 {-webkit-transition-delay: 0.8s; transition-delay: 0.8s;}
.main_visual .list_02.section.on .tit_wrap span.border_line {width:96px; -webkit-transition-delay: 1.0s; -webkit-transition-duration: 0.5s; transition-delay: 1.0s; transition-duration: 0.5s;}

/*list03*/
.main_visual .list_03 .tit_wrap {width:72px;}
.main_visual .list_03 .tit_wrap span.l_1 {top:0px; left:0px;}
.main_visual .list_03 .tit_wrap span.l_2 {top:0px; left:12px;}
.main_visual .list_03 .tit_wrap span.l_3 {top:0px; left:24px;}
.main_visual .list_03 .tit_wrap span.l_4 {top:0px; left:36px;}
.main_visual .list_03 .tit_wrap span.l_5 {top:0px; left:48px;}
.main_visual .list_03 .tit_wrap span.l_6 {top:0px; left:60px;}
.main_visual .list_03 .tit_wrap span.border_line {top:16px; left:0px;}

.main_visual .list_03.section.on .tit_wrap span.l_1 {-webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
.main_visual .list_03.section.on .tit_wrap span.l_2 {-webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
.main_visual .list_03.section.on .tit_wrap span.l_3 {-webkit-transition-delay: 0.5s; transition-delay: 0.5s;}
.main_visual .list_03.section.on .tit_wrap span.l_4 {-webkit-transition-delay: 0.6s; transition-delay: 0.6s;}
.main_visual .list_03.section.on .tit_wrap span.l_5 {-webkit-transition-delay: 0.7s; transition-delay: 0.7s;}
.main_visual .list_03.section.on .tit_wrap span.l_6 {-webkit-transition-delay: 0.8s; transition-delay: 0.8s;}
.main_visual .list_03.section.on .tit_wrap span.border_line {width:72px; -webkit-transition-delay: 0.7s; -webkit-transition-duration: 0.5s; transition-delay: 0.7s; transition-duration: 0.5s;}

/*list04*/
.main_visual .list_04 .tit_wrap {width:60px;}
.main_visual .list_04 .tit_wrap span.l_1 {top:0px; left:0px;}
.main_visual .list_04 .tit_wrap span.l_2 {top:0px; left:12px;}
.main_visual .list_04 .tit_wrap span.l_3 {top:0px; left:24px;}
.main_visual .list_04 .tit_wrap span.l_4 {top:0px; left:36px;}
.main_visual .list_04 .tit_wrap span.l_5 {top:0px; left:48px;}
.main_visual .list_04 .tit_wrap span.l_6 {top:0px; left:60px;}
.main_visual .list_04 .tit_wrap span.border_line {top:16px; left:0px;}

.main_visual .list_04.section.on .tit_wrap span.l_1 {-webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
.main_visual .list_04.section.on .tit_wrap span.l_2 {-webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
.main_visual .list_04.section.on .tit_wrap span.l_3 {-webkit-transition-delay: 0.5s; transition-delay: 0.5s;}
.main_visual .list_04.section.on .tit_wrap span.l_4 {-webkit-transition-delay: 0.6s; transition-delay: 0.6s;}
.main_visual .list_04.section.on .tit_wrap span.l_5 {-webkit-transition-delay: 0.7s; transition-delay: 0.7s;}
.main_visual .list_04.section.on .tit_wrap span.l_6 {-webkit-transition-delay: 0.8s; transition-delay: 0.8s;}
.main_visual .list_04.section.on .tit_wrap span.border_line {width:60px; -webkit-transition-delay: 0.9s; -webkit-transition-duration: 0.5s; transition-delay: 0.9s; transition-duration: 0.5s;}

/*txt*/
.main_visual .txt_wrap {margin-top:25px; position:relative;}
.main_visual .txt_wrap h2.vi_tit {top:8px; left:0; opacity: 0; position: relative;}
.main_visual .list_01 .txt_wrap h2.vi_tit > p > img {width:135px; height:63px;}
.main_visual .list_02 .txt_wrap h2.vi_tit > p > img {width:170px; height:62px;}
.main_visual .list_03 .txt_wrap h2.vi_tit > p > img {width:245px; height:62px;}
.main_visual .list_04 .txt_wrap h2.vi_tit > p > img {width:171px; height:63px;}
.main_visual .txt_wrap h2 + p.vi_txt {top:8px; left:0; opacity: 0;  position: relative; margin-top:20px;}
.main_visual .txt_wrap h2 + p.vi_txt span {display:block; line-height:1.49em; font-size:1.05em;}
/*txt_on 활성화*/
.main_visual .section.on .vi_tit {
  top:0;
  opacity: 1;
  -webkit-transition-duration: 1.0s; -webkit-transition-delay: 0.8s;
  transition-duration: 1.0s; transition-delay: 0.8s;
}
.main_visual .section.on .vi_txt {
  top:0;
  opacity: 1;
  -webkit-transition-duration: 1.0s; -webkit-transition-delay: 0.8s; 
  transition-duration: 1.0s; transition-delay: 0.8s;
}
/*e::visual_text*/

/*알아보기Btn*/
.btn_wrap {opacity:0; position:relative; width:100%; margin-top:40px;}
.main_visual .section.on .btn_wrap {opacity: 1; -webkit-transition-duration: 1.5s; -webkit-transition-delay: 1.0s; transition-duration: 1.5s; transition-delay: 1.0s;}

/*icon_drop*/
.content .icon_arrow {position:absolute; top:90%; left:50%; margin-left:-12px; background: url(../images/icon_main_arrow_bg.png) left top no-repeat; width:25px; height:35px; background-size: 25px 35px; z-index: 9; opacity: 0;}

.content #fullpage.active + .icon_arrow {opacity:1; transition-delay:1.0s; transition-duration:0.5s;}

.content .icon_arrow span {position:absolute; width:11px; height:6px; animation-duration:1s; animation-iteration-count:infinite;}
.content .icon_arrow span.arrow1 {background: url(../images/icon_main_arrow_01.png) left top no-repeat; top:12px; left:50%; margin-left:-6px; background-size: 11px 6px; animation-name:arrow_tp; animation-delay:1s; anomation-timing-function:ease-out; animation-play-state: running;}
.content .icon_arrow span.arrow2 {background: url(../images/icon_main_arrow_02.png) left top no-repeat; top:20px; left:50%; margin-left:-6px; background-size: 11px 6px; animation-name:arrow_bt; animation-delay:1.2s; anomation-timing-function:ease-out; animation-play-state: running;}

@keyframes arrow_tp {from {opacity:0; top:9px;} to {opacity:1; top:12px;}}
@keyframes arrow_bt {from {opacity:0; top:14px;} to {opacity:1; top:20px;}}


@media only screen and (min-width:568px) and (max-width:960px) {

  .main_visual .section.on .vi_txt {display:none;}
  .content #fullpage.active + .icon_arrow {display:none;}
  .main_visual [class^="list_"] .list_cont {margin-top:-65px;}
  
}