@charset "utf-8";
/* Font */
@import url(font.css);

/* Guide
----------------------------------------------------------------------------------------------------------------------------------------------------------

▶사이즈
pc : 981px
tablet : 980px ~
mobile : 767px ~ 320px

▶미디어쿼리는 (주석으로 구분 되어있는)파트마다 각각 작성함.

*/


/* Reset
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0; padding:0;}
body,th,td,input,select,textarea,button{ font-family:"Noto Sans KR", "NotoSansKR", "Malgun Gothic", sans-serif; font-weight:300; font-size:16px; line-height:1.8; color:#666;}
dl,ul,ol,menu,li {list-style:none;}
*, *:before, *:after{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
:focus{outline:0 !important;}
iframe{border:none; width:100%;}
a{color:inherit; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out;}
a:hover, a:focus ,a:active{text-decoration:none; color:#00aeef;}
img{max-width:100%;}
textarea{max-width:100%; resize:none;}

.mobile { display:none; }

@media only screen and (min-width: 320px){
	body{overflow-x:hidden;}
}

@media only screen and (max-width: 767px){
	.mobile { display:block; }
	.pc { display:none; }
}

.hidden{font-size:0; line-height:0; text-indent:-9999em; overflow:hidden;}


/* Parallax
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.parallax{background-position:0 0; background-repeat:no-repeat; background-size:100% auto; width:100%; background-size:cover; background-attachment:fixed;}


/* Preloader
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.animationload{position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index:999999;}
.loader {width:200px; height:200px; font-size: 24px; text-align: center; position:absolute; left:50%; top:50%; background-image:url(/images/basic_resp/img/preloader.gif); background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px;}


/* Back to top (탑 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.back-to-top{width:40px; height:40px; position:fixed; bottom:10px; right:20px; display:none; text-align: center; z-index: 10000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius:50%; background:#00aeef;}
.back-to-top i{color: #fff; font-size: 15px; display: block; line-height: 33px;}


/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#wrapper{min-width:1200px;}

#header{z-index:1000; width:100%; background:url('/images/kor06r-18-0404/common/header_bg.gif') repeat-x 0 0; border-bottom:1px solid #e1e4e8;}
#header > div{position:relative; margin:0 auto; width:1200px;}

#L_SITE_LOGO{ box-sizing:border-box; text-align:center;}
#L_SITE_LOGO img{vertical-align:middle;}


@media only screen and (max-width: 1200px){
	#wrapper{min-width:320px;}

	#header > div{width:100%;}
}

@media only screen and (max-width: 980px){
	#header{background:#fff;}

	#L_SITE_LOGO{margin:0 auto; padding-top:8px; height:60px;}
	#L_SITE_LOGO img{width:auto; height:40px; }
}

@media only screen and (max-width: 767px){
	#L_SITE_LOGO{padding-top:5px; height:50px;}
	#L_SITE_LOGO img{ height:30px; }
}



/* Login (로그인 메뉴)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.login-menu{position:absolute; top:15px; right:0;}

.login-menu ul{text-align:right;}
.login-menu li{display:inline-block; margin-left:5px; padding-left:5px; border-left:1px solid #bbb; line-height:10px;}
.login-menu li:first-child{margin-left:0; padding-left:0; border-left:0;}
.login-menu li a{font-size:13px; line-height:10px; color:#808080;}

.m_newsletter { display:none; }

@media only screen and (max-width: 980px) {
	.login-menu{position:static;}
	.login-menu ul{padding:10px; text-align:center;}
	.login-menu ul:after{content:""; display:block;	clear:both;}
	.login-menu li{float:left; display:block; margin:0 5px; padding:0; width:calc(33.33% - 10px); border:0;}
	.login-menu li:first-child{margin:0 5px;}
	.login-menu li a{display:block; padding:8px 5px; width:100%; border:1px solid #ddd; box-sizing:border-box; line-height:1;}

	.m_newsletter { display:block; padding:10px; }
}


/* Navigation (상단 메뉴)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.nav-btn {
        z-index: 999;
        display: block;
        position: absolute;
        top: 25px;
        right: 0px;
        width: 30px;
        height: 23px;
        cursor: pointer;
    }
    .nav-btn span {
        position: absolute;
        left: 50%;
        display: block;
        margin-left: -15px;
        width: 30px;
        height: 3px;
        background: #00aeef;
        transition: .2s all linear;
    }
    .nav-btn span:nth-child(1) {
        top: 0;
    }
    .nav-btn span:nth-child(2) {
        top: 10px;
    }
    .nav-btn span:nth-child(3) {
        top: 20px;
    }
    /*.nav-btn.nav-close {
        position: fixed;
    }*/
    .nav-btn.nav-close span:nth-child(1) {
        top: 50%;
        transform: rotate(45deg);
    }
    .nav-btn.nav-close span:nth-child(2) {
        margin-left: 0;
        width: 0;
    }
    .nav-btn.nav-close span:nth-child(3) {
        top: 50%;
        transform: rotate(-45deg);
    }
	
@media only screen and (min-width: 1201px) {
	.nav-btn{display:none;}
    #header {
        z-index: 999;
        width: 100%;
    	position:relative;
		transition:all 0.5s;
		border-bottom:1px solid #ddd;
		background:#fff;
    }
    #header:after {
		display:block;
		content:"";
		clear:both;
	}
	#header.scroll_on {background: #fff; transition:all 0.5s; border-top:1px solid #eaeaea;}
	#header.sub_page:after {content:''; display:block; width:100%; height:1px; background:#eaeaea; position:absolute; left:0;}
    #header > div {
        position: relative;
        margin: 0 auto;
        width: 1200px;
        height: 80px;
		text-align: center;
    }
	#L_SITE_LOGO {float: left;}
    #header h1 {
        float: left;
		height:80px;
		line-height:80px;
    }

    #header h1 a > img {
        vertical-align: middle;
    } 

.lang_select { font-size:14px; float: right; position: absolute; right: 70px; top: 32px;}
.lang_select > li {float:left;line-height: 1; padding-right:12px; margin-left:12px; border-right:1px solid #666;}
.lang_select > li:last-child {padding-right:0px; border-right:none;}
.lang_select > li a {color:#666; line-height: 1;}
.lang_select > li a.active {color:#000; font-weight:400;}
    .nav-bg {
        z-index:-1;
        display: none;
        position: absolute;
        top: 80px;
        left: -500%;
        width: 1000%;
        height: 250px;
        background: #fff;
		box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
		/*border-bottom:1px solid #ededed;*/
    }
    #nav {
		display:inline-block;
		vertical-align: top;
		z-index: 999;
		float:right;
    }
	.navigation{float:left;}
    .navigation:after {
        content: "";
        display: block;
        clear: both;
    }
    .navigation > li {
        position: relative;
        float: left;
        width: 150px;
        text-align: center;
    }

	.navigation > li:nth-of-type(2) { width:180px; }
    .navigation .main-menu {
        display: block;
        width: 100%;
        font-weight: 400;
        font-size: 18px;
        color: #1e1e1e;
       line-height: 80px;
    }

    .navigation .sub-menu {
        display: none;
        z-index: 999;
        position: absolute;
        top: 80px;
        left: 0;
        padding:15px 0;
        width: 100%;
        height: 160px;
    }
    .navigation .sub-menu a {
        display: block;
        text-align: center;
        font-size: 16px;
        color: #666;
		box-sizing:border-box;
		vertical-align:middle;
		line-height:40px;
		height:42px;
		font-weight:400;
    }
    .navigation .sub-menu .intro-menu {
        display: none;
    }
    .navigation .sub-menu a:hover {
		color:#fff;
    }
	
	.navigation > li:hover .main-menu{color:#00aeef;}
	.navigation > li:hover:before {content:'';  display:block; width:100%; height:3px; background:#00aeef; position: absolute; bottom: 0;}
	.navigation > li:hover .sub-menu a:hover {color:#00aeef;}
	/*.navigation > li:hover .sub-menu a:hover:after {content:'';  display:block; width:100%; height:1px; background:#00aeef; position: absolute; margin-bottom:-10px;}*/
	
}

@media only screen and (max-width: 1200px) {
    #header {
		position: fixed;
        z-index: 666;
        width: 100%;
        height: 65px;
        background: #fff;
		padding: 0px;
		border-bottom:1px solid #eaeaea;
    }
    #header > div {
        padding: 0;
    }
    #header h1 {
        float: left;
        padding: 13px 20px;
        height: 65px;
    }
    #header h1 a {
        display: block;
    }
    #header h1 img {
        width: auto;
        vertical-align: baseline
    }
    .login-bar {
        float: none;
		padding-top: 10px;
    }
    .login-bar li {
        border: 1px solid #ffffff;
	    margin-left: 0;
    }
	.login-bar li:first-child {
		border: 1px solid #fff;
	}
    .login-bar li a {
        color: #fff;
    }
    .login-bar .material-icons {
        color: #fff;
    }
   .nav-btn {
        right: 20px;
		top:20px;
    }
    .nav-bg {
        z-index: 777;
        display: none;
        top: 0;
		position:fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
    }
    #nav {
        z-index: 888;
        position: fixed;
        top:0;
		right: -100%;
        display: block;
        padding: 65px 0 20px;
        width: 70%;
        height: 100%;
        background: #fff;
    }
	.navigation > li {width: 100%;}
	.navigation .sub-menu {width: 100%;} 
    .navigation .main-menu {
        display: block;
        padding: 0 30px;
        width: 100%;
        line-height: 45px;
        font-weight: 400;
        font-size: 18px;
        color: #000;
        transition: none;
    }
	.navigation > li a:hover{color:#00aeef;}
    .navigation li.active .main-menu {
        background: #00aeef;
        color: #fff;
    }
    .navigation .sub-menu {
        display: none;
        padding: 10px 0;
        background: #f1f1f1;
    }
    .navigation .sub-menu a {
        display: block;
        padding: 0 30px;
        line-height: 38px;
        font-size: 16px;
        color: #555;
    }
    .navigation .sub-menu a:before {
        content: "";
        display: inline-block;
        margin: 0 5px 0 0;
        width: 4px;
        height: 1px;
        vertical-align: middle;
        background: #888;
    }
    .navigation .sub-menu a:hover {
        color: #282595;
    }
    .navigation .sub-menu a:hover:before {
        background: #282595;
    }
	.lang_select { font-size:14px; display:inline-block; padding-left:20px; margin-top: 30px; }
    .lang_select > li {float:left;line-height: 1; padding-right:12px; margin-left:12px; border-right:1px solid #b6b6b6;}
    .lang_select > li:last-child {padding-right:0px; border-right:none;}
    .lang_select > li a {color:#b6b6b6; line-height: 1;}
    .lang_select > li a.active {color:#046ab4;}
}

@media only screen and (max-width: 768px) {
    #header h1 {
        padding: 10px 10px;
    }
    #header h1 a > img {
        width: auto;
		height:28px; 
    }
}

/* Button (공통 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.btn{ text-transform:uppercase; border-radius:0; line-height:24px;}
.btn:focus, .btn:active{outline:none; color:#fff;}

.btn-custom{border-radius:3px; padding:0.8em 1.8em; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:#f03417; border-color: #f03417; color:#fff;}
.btn-custom:hover, .btn-custom:focus{background-color: #00208e; border-color: #00208e; color:#fff;}

.btn-custom-outline{border-radius:3px; padding:0.8em 1.8em; color:#fff; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:transparent; border-color:#fff;}
.btn-custom-outline:hover, .btn-custom-outline:focus{color:#fff; background-color:rgba(255,255,255,.5);}
.btn-bar a{margin-right:10px;}

.form-control{box-shadow:none; -webkit-box-shadow:none; border-radius:3px; height:38px;}
.form-control:focus{outline:none; box-shadow:none; -webkit-box-shadow:none; border-color: #f03417;}



/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#footer{position:relative; background:#303030;}
#footer > div{margin:0 auto; width:1200px;}

.footer-menu{height:50px;}
.footer-menu:after{content:""; display:block; clear:both;}
.footer-menu .menu{float:left; padding-top:17px;}
.footer-menu .menu li{display:inline-block; margin-left:10px; padding-left:10px; line-height:12px; border-left:1px solid #c9c9c9; color:#333;}
.footer-menu .menu li:first-child{margin-left:0; padding-left:0; border-left:0;}
.footer-menu .menu li a{line-height:12px; font-size:16px;}
.footer-menu .sns{float:right; padding-top:9px;}
.footer-menu .sns li{display:inline-block; margin-left:10px; line-height:1;}
.footer-menu .sns li:first-child{margin-left:0;}

.footer-info{padding:30px 0;}
.footer-info:after{content:""; display:block; clear:both;}
.footer-info .footer-logo{float:left; }
.footer-info .info{ float:right; width:calc(100% - 330px); font-size:15px; font-weight:500; color:#666;}

@media only screen and (max-width:1200px) {
	#footer > div{width:100%;}

	.footer-menu{padding:0 15px;}
	.footer-menu .menu li a{font-size:14px;}

	.footer-info .footer-logo img { height:30px; }
	.footer-info .info{ width:calc(100% - 220px); font-size:13px;}
	.footer-info{padding:15px;}
}

@media only screen and (max-width:767px) {
	#footer{border-top:none;  }
	#footer:after{display:none;}

	.footer-menu{padding:0; height:auto;}
	.footer-menu .menu{float:none; padding-top:0;}
	.footer-menu .menu li{display:block; margin-left:0; padding-left:0; line-height:40px; text-align:center; border-left:0; border-bottom:1px solid #e5e5e5;}
	.footer-menu .menu li:first-child{margin-left:0; padding-left:0; border-left:0; border-top:1px solid #e5e5e5;}
	.footer-menu .menu li a{line-height:40px;}
	.footer-menu .sns{float:none; padding-top:20px; text-align:center;}

	.footer-info{padding:20px; text-align:center;}
	.footer-info .footer-logo{ float:none; margin-bottom:10px; width:100%; text-align:center; }
	.footer-info .footer-logo img { height:30px; }
	.footer-info .info{ float:none; width:100%; padding:0;}
	.footer-info .copyright{margin-top:5px;}
}



/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main-contents > div { padding:70px 0; }
.main-contents > div > section { margin:0 auto; width:1200px; }
.main-contents > div > section:after{content:""; display:block; clear:both;}
.main-contents .sec_title { margin-bottom:50px; text-align:center; }
.main-contents .sec_title h2 { font-size:42px; font-weight:700; color:#121212; }
.main-contents .sec_title p { font-size:18px; }
.main-contents .main_center .sec_title h2 { color:#fff; }
.main-contents .main_center .sec_title p { color:rgba(255,255,255,0.5); }

.main_top dl { float:left; width:48%; margin-right:4%; }
.main_top dl:nth-of-type(1) { width:100%; margin-right:0; }
.main_top dl:last-child { margin-right:0; }
.main_top dt { position:relative; padding-bottom:20px; font-size:24px; font-weight:700; color:#121212; border-bottom:1px solid #121212; }
.main_top dl:nth-of-type(1) dt {  padding-bottom:0; border-bottom:none; }
.main_top dt .more { position:absolute; right:0; top:15px; font-size:16px; font-weight:300; color:#666; }
.main_top dt .more:hover { border-bottom:1px solid #00aeef; color:#00aeef; }
.main_top dd { padding-top:20px; }

.main_center { background:url(/images/kor06r-18-0404/main/main_center_bg.jpg) center center/cover fixed no-repeat; }
.main_center .cont { display:flex; flex-wrap:wrap; justify-content:space-between; }
.main_center .cont dl {position:relative; width:32%; background:#fff; }
.main_center .cont dl > a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; }
.main_center .cont dl dt { text-align:center; border-bottom:1px solid #dadada; }
/*.main_center .cont dl:nth-of-type(1) dt { background:url(/images/kor06r-18-0404/main/main_center_img01.jpg) center center/cover no-repeat; }
.main_center .cont dl:nth-of-type(2) dt { background:url(/images/kor06r-18-0404/main/main_center_img02.jpg) center center/cover no-repeat; }
.main_center .cont dl:nth-of-type(3) dt { background:url(/images/kor06r-18-0404/main/main_center_img03.jpg) center center/cover no-repeat; }*/
.main_center .cont dd { padding:40px; text-align:center; }
.main_center .cont p.tit { font-size:24px; font-weight:500; color:#121212; }
.main_center li { position:relative; font-size:18px;  margin-bottom:10px; word-break:keep-all; }
.main_center li:before { content:"-"; display:inline-block; margin-right:5px; }

.main-contents > div.main-bottom { padding:50px 0 0px; background:#f5f5f5; }
.main-bottom ul:after { content:""; display:block; clear:both; }
.main-bottom .cont1 li { position:relative; float:left; padding:40px 20px 0; width:23.5%; margin-right:2%; height:100px; border:1px solid #dadada; }
.main-bottom .cont1 li:nth-of-type(1) { background:url(/images/kor06r-18-0404/main/main_bn_icon01.png) #fff right 20px top 20px no-repeat; }
.main-bottom .cont1 li:nth-of-type(2) { background:url(/images/kor06r-18-0404/main/main_bn_icon02.png) #fff right 20px top 20px no-repeat; }
.main-bottom .cont1 li:nth-of-type(3) { background:url(/images/kor06r-18-0404/main/main_bn_icon03.png) #fff right 20px top 20px no-repeat; }
.main-bottom .cont1 li:nth-of-type(4) { background:url(/images/kor06r-18-0404/main/main_bn_icon04.png) #fff right 20px top 20px no-repeat; }
.main-bottom .cont1 li:before { position:absolute; content:""; left:20px; top:30px; width:34px; height:2px; background:#00aeef; }
.main-bottom .cont1 li a { position:absolute; display:block; width:100%; height:100%; font-size:20px; font-weight:500; color:#000; }
.main-bottom .cont1 li:last-child { margin-right:0; }
.main-bottom .cont2 { margin-top:50px; }
.main-bottom .cont2 li {position:relative; float:left; padding:70px 0; width:50%; height:250px; text-align:center; color:#fff; }
.main-bottom .cont2 li:first-child { width:calc(50% - 1px); border-right:1px solid #fff; background:url(/images/kor06r-18-0404/main/main_bottom_bg01.jpg) center center/cover no-repeat;  }
.main-bottom .cont2 li:nth-of-type(2) { background:url(/images/kor06r-18-0404/main/main_bottom_bg02.jpg) center center/cover no-repeat;  }
.main-bottom .cont2 li a { position:absolute; left:0; top:0; display:block; width:100%; height:100%; }
.main-bottom .cont2 li p { margin-bottom:10px; font-size:18px; font-weight:500; line-height:1.2; color:rgba(255,255,255,0.5); }
.main-bottom .cont2 li p.tit { font-size:42px; font-weight:700; color:#fff;  }


.link_banner { background:#fff; }

@media only screen and (max-width:1200px) {
	.main-contents > div { padding:50px 20px; }
	.main-contents > div > section {width:100%; }
}

@media only screen and (max-width:980px) {
	.main_center .cont dd { padding:20px; }
	.main_center .cont  p.tit { font-size:20px; }
}

@media only screen and (max-width:767px) {
	.main-contents > div { padding:20px; }
	.main-contents .sec_title { margin-bottom:20px; }
	.main-contents .sec_title h2 { font-size:32px; }
	.main-contents .sec_title p { font-size:15px; }

	.main_top dl { float:none; margin-bottom:40px; width:100%; margin-right:0; }
	.main_top dl:last-child { margin-bottom:0; }
	.main_top dt { padding-bottom:10px; font-size:20px; }
	.main_top dt .more { top:5px; font-size:14px; }

	.main_center .cont { display:block;}
	.main_center .cont dl { margin-bottom:30px; width:100%; }
	.main_center .cont dl:last-child { margin-bottom:0; }
	/*.main_center .cont dl dt { height:150px; }*/
	.main_center .cont dd { padding:20px; }
	.main_center .cont  p.tit { font-size:18px; }
	.main_center li { font-size:15px; margin-bottom:5px; }
	.main_center li:before { margin-right:3px; }

	.main-contents > div.main-bottom { padding:20px 0 0px; }
	.main-bottom > section { padding:0 20px; }
	.main-bottom .cont1 li { padding:30px 10px 0; width:49%; margin-bottom:2%; margin-right:2%; height:80px; background-size:auto 40px !important; }
	.main-bottom .cont1 li:nth-of-type(2n) { margin-right:0; }
	.main-bottom .cont1 li:nth-of-type(3), .main-bottom .cont1 li:nth-of-type(4) { margin-bottom:0; }
	.main-bottom .cont1 li:before { left:10px; top:25px; width:24px; height:2px; }
	.main-bottom .cont1 li a { font-size:16px; }
	.main-bottom .cont2 { margin-top:20px; }
	.main-bottom .cont2 li { float:none; padding:30px 0; width:100% !important; height:auto;}
	.main-bottom .cont2 li:nth-of-type(1) { border-right:none; margin-bottom:1px;}
	.main-bottom .cont2 li p { margin-bottom:10px; font-size:16px; }
	.main-bottom .cont2 li p.tit { font-size:32px; }

	.link_banner { overflow:hidden; }
}

@media only screen and (max-width:680px) {

}

@media only screen and (max-width:480px) {

}