/*COPYRIGHT ©  손승목, 이두환*/

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
body{font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';}




/*상단헤드*/
#header {position: fixed;top: 0;left: 0;border-bottom: 1px solid rgba(255,255,255,0.4);background-color: transparent; width: 100%;z-index: 100;}
#header.scrolled { border-bottom: 1px solid rgba(0,0,0,0.4);background-color: #fff;}
#logo-box {position: relative;width: 246px;height: 40px;overflow: hidden;}
#logo-box > .logo-bg a {display:inline-block; width:100%; height:100%;text-indent:-9999px;}
#logo-box > .logo-bg {display:block; width: 122px; height:40px; background-size:cover; position:absolute;left:0px; }
#logo-box > .logo-bg.white {background-image:url("./../img/logo-white.png"); top:0px;transition:top 0.3s ease-out}
#logo-box > .logo-bg.color {background-image:url("./../img/logo-color.png"); top:40px;transition:top 0.3s ease-out}
.scrolled #logo-box > .logo-bg.white {top:-40px;transition:top 0.3s ease-out}
.scrolled #logo-box > .logo-bg.color {top:0px;transition:top 0.3s ease-out}
.header-content {position:relative; padding:20px 10px;}
/*상단헤드*/



/*메인 슬라이드*/
html,body{height:100%;margin:0;padding:0}
#index-slider {margin: 0;padding: 0;list-style:none;}
#index-slider .box {height:100vh; background-repeat:no-repeat;background-size:cover; background-position:center;margin:0;padding:0;}
#index-slider .box .inner-wrap-center{text-align:center;padding:175px 20px 20px}
#index-slider .box .inner-wrap-center .title{font-size:38px;line-height:34px;text-shadow:1px 1px 1px rgba(22,6,12,.14);letter-spacing:-.5px;color:#FFF}
#index-slider .box .inner-wrap-center .subtitle{margin-top:25px;font-size:15px;letter-spacing:-.3px;line-height:2.2;text-shadow:2px 2px 2px rgba(22,6,12,.14);color:#FFF}
#index-slider .box .inner-wrap-center .title2 { width:100px; height:35px; margin:auto;  background:rgba(0,102,255,0.7);  text-align:center; margin-top:50px; line-height:35px; color:#FFF; padding:0; font-size:16px}
#index-slider .box .inner-wrap-center .subtitle2{margin-top:20px;font-size:15px;letter-spacing:-.3px;line-height:1.6;text-shadow:2px 2px 2px rgba(22,6,12,.14);color:#FFF}



@media screen and (min-width:414px) {
#index-slider .box {min-height:630px;}
}


#index-slider-wrapper {position:relative;}
#index-slider-wrapper .bx-controls-direction {position:absolute;display:inline-block;bottom:30px;right:30px;}
#index-slider-wrapper .bx-controls-direction > a {display:inline-block;width:40px;height:40px;line-height:40px;text-align:center; padding-top:6px; box-sizing:border-box;}
#index-slider-wrapper .bx-controls-direction .bx-prev { background-color:#fff; color:#37b2d3;}
#index-slider-wrapper .bx-controls-direction .bx-next { background-color:#37b2d3; color:#FFF}


#index-slider-wrapper #index-slider .m-img01 {background:url("./../img/m-roll01.jpg"); background-size:cover;}
#index-slider-wrapper #index-slider .m-img02 {background:url("./../img/m-roll02.jpg"); background-size:cover;}
#index-slider-wrapper #index-slider .m-img03 {background:url("./../img/m-roll03.jpg"); background-size:cover;}
/*메인 슬라이드*/




/*오른쪽 버튼*/
#open-button{position:fixed;z-index:2000;right:5px;top:20px;width:40px;height:40px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer;display:block;}
#open-button .navicon-line{position:absolute;width:20px;height:2px;border-radius:1px;background:#fff;-webkit-transition:all .7s ease-out;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;transition:all .7s ease-out}
#open-button .nl1 {top: 11px;right: 10px; width:30px;}
#open-button .nl2 {top: 19px;right: 10px; width:24px;}
#open-button .nl3 {top: 27px;right: 10px; width:30px;}
#open-button.on>div>div{transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);width:25px;position:absolute;top:15px;right:10px;margin:0;padding:0;background-color:#000;}
#open-button.on>div>div:first-child{transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg)}
#open-button.scrolled .navicon-line {background-color: #666;}
#open-button.on.scrolled >div>div{background-color:#666;}
/*오른쪽 버튼*/



/* 화면 전환 */
#blockui {position:fixed;left:0; top:0; width:100%;height:100vh; background-color:#000; opacity:0.5;  z-index:100; display:none;}
#sub-content-block {position:absolute;left:0; top:0; width:100%;height:100vh; background-color:#000; opacity:0.5;  z-index:10; display:none;}




/*오른쪽 버튼 UI 시작*/
.logo_top {width:100%; height:70px; padding:18px 0 0 25px; box-sizing:border-box;}
.join {position:relative; font-size:0;}
.join span {display:inline-block; width:50%; height:43px;  font-size:14px; text-align:center; line-height:43px; border-left:1px solid #333; border-top:1px solid #333; box-sizing:border-box; vertical-align:top;  padding:0; background-color:#000;}
.join span:first-child {border-left:0;}
.join span a {display:block; color:#FFF; padding-left:10px;}
.join span .login-btn { background:url("./../img/log_in.gif"); background-repeat:no-repeat; background-size:10% auto; background-position:34px center; margin-left:-1px;}
.join span .join-btn { background:url("./../img/join.gif"); background-repeat:no-repeat; background-size:10% auto; background-position:30px center; }


#lnb-a{position:fixed;top:0px;width:350px;right:-350px;background-color:#fff;z-index:1000;box-sizing:border-box;-webkit-transition:right .4s;transition:right .4s;border-bottom:1px solid #ddd;height:100vh;}
#lnb-a.on{right:0; -webkit-transition:right .4s;transition:right .4s;}
#lnb-a li, #lnb-a ul, .m-top li, .m-top ul{margin:0;padding:0;list-style:none}
#lnb-a>ul>li{display:block;background-size:50px 48px;background-repeat:no-repeat;background-position:20px 0;border-bottom:1px solid #f4f1f1;}
#lnb-a>ul>li>ul{-webkit-transition:transform .5s;transition:transform .5s;display:none}
#lnb-a>ul>li.on>ul{display:block}
#lnb-a>ul>li>a{display:block;font-size:16px;font-weight:nomal;text-decoration:none;height:50px;width:100%;line-height:50px;text-indent:35px;background:url("./../img/lnb_arrow.png") 290px 20px no-repeat;background-size:14.5px 50px}
#lnb-a>ul>li.on>a{background:url("./../img/lnb_arrow.png") 290px -23px no-repeat;background-size:14.5px 50px}
#lnb-a>ul>li ul{background-color:#ddd}
#lnb-a>ul>li ul:after{content:" ";visibility:hidden;display:block;height:0;clear:both}
#lnb-a>ul>li ul>li{float:left;width:50%}
#lnb-a>ul>li ul>li>a{white-space:nowrap;display:block;line-height:45px;height:45px; text-align:center;font-size:14px;border-bottom:1px solid #fff;overflow:hidden;text-overflow:ellipsis}
#lnb-a>ul>li ul>li:nth-child(odd)>a{border-right:1px solid #fff}
/*오른쪽 버튼 Ul 끝*/




/*서브 백그라운드 이미지 고정*/
.sub-page-header{padding: 20px 0;background-position:center;background-color:#222;-webkit-background-size:cover;background-size:cover; height:220px;}
.sub-page-header>.inner-wrap{width:100%;height:100%;color:#fff;text-align:center;vertical-align:middle;letter-spacing:-0.5px}
.sub-page-header .big-title{font-size:1.5em;font-weight:400;line-height:24px;word-break:keep-all; padding-top:115px;}
/*서브 백그라운드 이미지 고정*/




/*서브 백그라운드 카피*/
.section-title .subtitle{display:block;margin-bottom:0.625rem;font-size:14px;font-weight:600;color:#869ea9;letter-spacing:2px; padding:0;}
.section-title .title{font-size:26px; display:block; margin-bottom:10px; letter-spacing:-0.03125rem; font-weight:normal;}
/*서브 백그라운드 카피*/




/*서브 백그라운드 이미지 교체*/
#visual_img01 {background-image: url("./../img/m-visual01.jpg");}
#visual_img02 {background-image: url("./../img/m-visual02.jpg");}
#visual_img03 {background-image: url("./../img/m-visual03.jpg");}
#visual_img04 {background-image: url("./../img/m-visual04.jpg");}
#visual_img05 {background-image: url("./../img/m-visual05.jpg");}
#visual_img06 {background-image: url("./../img/m-visual06.jpg");}
/*서브 백그라운드 이미지 교체*/





/*탭*/
.sub_navi { margin-top:50px}
.sub_navi ul {text-align: center;padding: 0; width:100%; margin:auto}
.sub_navi li {display: inline-block;margin-left: -5px;width: 33.3333%;/*margin:0 -1px 0 0*/ list-style:none}
.sub_navi li a {display: block;box-sizing: border-box;color: #666;border: 1px solid #ddd;text-align: center;position: relative;height: 55px;line-height: 55px}
.sub_navi li a:hover {backface-visibility: hidden}
.sub_navi li a.on {color: #fff;background-color: #d04242;border: 1px solid #d04242;}
/*탭*/





/* 서브메뉴 이동 네비게이션 시작 */
em { font-style:normal}
.location{position:relative;z-index:85;}
.location .area{position:relative;height:50px;font-size:16px;color:#8c8c8c;line-height:50px;background-color:#f9f9f9; border-bottom:1px solid #ddd;}
.location .area>em.bgnone{margin-left:0;padding-left:0;background:0 0}
.location .area.one strong{padding-left:0;background:0 0!important}
.location .area strong{display:inline-block;padding-left:18px;background-repeat:no-repeat;background-position:left center;-webkit-background-size:30px 20px;background-size:20px 20px}
.location .area>em{margin-left:5px;padding-left:19px;font-weight:700;background:url("./../img/location_arrow.png") left center no-repeat;-webkit-background-size:9px 14.5px;-moz-background-size:9px 14.5px;background-size:9px 14.5px}
.location .pr>a{position:absolute;right:10px;top:11.5px;z-index:95;width:30px;height:25px;text-indent:-9999px;background-image:url(./../img/location_arrow_bt.png);background-repeat:no-repeat;background-position:8px -2px;-webkit-background-size:14.5px 60px;-moz-background-size:14.5px 60px;background-size:14.5px 60px;background-color:#00c0dc}
.location .pr > a.on {background-position: center -33px;}
.location .pr ul{position:absolute;right:0;top:51px;list-style:none;margin:0;padding:0;display:none}
.location .pr>ul>li>a{display:block;width:185px;padding-left:20px;height:45px;font-size:16px;font-weight:700;color:#fff;line-height:45px;background-color:#00c0dc;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#8ddbfe}
/* 서브메뉴 이동 네비게이션 끝 */



/*서브 컨텐츠 박스*/
.m_title-page { padding:90px 20px 20px 20px;}
.m_cont{font-size:16px;font-weight:400;letter-spacing:0.1px;margin:0; padding:0 20px 40px 20px; line-height:27px;word-break: break-all;}
.m_cont .underline {background-color: #333;height: 1px;width: 35px;margin:10px 0 20px 0;}
.m_title-page .underline {background-color: #333;height: 1px;width: 35px;margin:30px 0 20px 0;}
.m_cont h2 {font-size: 18px;letter-spacing: 1px;background-image: url(./../img/tit.png);background-repeat: no-repeat;padding-left: 25px;padding-top:4px;background-position: 1px;margin-bottom:10px;}
.m_cont p{padding:10px 0 10px 0;display:block}
.m_cont ul { padding:0;  margin:0}
.m_cont ul li { padding:0 0 7px 17px; margin:0; line-height:1.5;  background-image: url(./../img/icon_dot.gif); 
background-repeat:no-repeat; background-position: 7px 8px;}
.m_cont .notice p{ line-height:25px; padding:0; margin:0;}
/*서브 컨텐츠 박스*/

/*step_ul1*/
#step_ul1 a{font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; display:block; margin-bottom:30px;}
#step_ul1::after { clear: both; display: block; content: "";}
#step_ul1{width:100%}
#step_ul1 li {width:29.3%; float:left; list-style:none;  background-image: none; padding: 0px 15px 0px 0px !important;overflow:hidden;}
#step_ul1 li a span{width:100%}
#step_ul1 li .step_eng{font-weight:bold; font-size:12px; color:#24bbdb;}
#step_ul1 li .tit{font-weight:bold;}
#step_ul1 li .txt{padding-bottom:30px;}
a:hover{text-decoration:none;}

#btn_top_scroll{position:fixed;z-index:10;right:30px;bottom:50px;border:1px solid #ddd;font-size:13px; text-align:center;display:none;width:40px;height:40px;line-height:40px;background:#fff;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;text-decoration:none;}
#btn_top_scroll.scrolled{display:block;}

footer .f_list { padding:0; display:block; width:100%; margin-bottom:20px; zoom:1;}
footer .f_list:after {content:"";display:block;clear:both;}
footer .f_list > li { display:block; float:left; width:50%; background-color:#fff;}
footer .f_list > li > a { display:block; margin-top: -1px; margin-left:-1px; padding:0; text-align:center; line-height:34px; font-size:13px; border:1px solid #d9d9d9; color:#666;}

@media(max-width:767px){
	#step_ul1 li {width:45%;}
}