@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; font-family:'Nanum Barun Gothic', sans-serif;}
dl,ul,ol,menu,li {list-style:none; color:#666;}
body{font-family:'Nanum Barun Gothic', sans-serif; font-size:16px; font-weight:normal; color:#666;}
*, *: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:#aec213;}
img{max-width:100%;}
textarea{max-width:100%; resize:none;}

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

.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:#aec213;}
.back-to-top i{color: #fff; font-size: 15px; display: block; line-height: 33px;}


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

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

#header .logo_area {  height:93px; }
#header .logo_area:after { content:""; display:block; clear:both; }
#header .logo_area h1 { float:left; margin-top:25px; }
#header .logo_area .lang { float:right; margin-top:25px; }
#header .logo_area .lang:after { content:""; display:block; clear:both; }
#header .logo_area .lang > li { float:left; width:110px; margin-left:10px; }
#header .logo_area .lang > li > a { display:block; padding:5px 20px; width:100%; border:2px solid #345629; text-align:center; border-radius:30px; color:#345629; }
#header .logo_area .lang > li.active > a { background:#345629; color:#fff; }

#L_SITE_LOGO{padding-top:25px; height:93px; box-sizing:border-box; text-align:center;}
#L_SITE_LOGO img{vertical-align:middle;}


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

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

	#L_SITE_LOGO{margin:0 auto; padding-top:8px; width:150px; height:60px;}
	#L_SITE_LOGO img{width:100%;}
}
@media only screen and (max-width: 767px){
	#L_SITE_LOGO{padding-top:5px; width:115px; height:50px;}

	#header .logo_area { height:50px; }
	#header .logo_area h1 { margin:0px 0 0 20px !important; }
	#header .logo_area h1 img { width:115px; }
	.eng #header .m-menu-open { top:10px; }
	#header .logo_area .lang { margin:5px 50px 0 0;}
	#header .logo_area .lang > li { margin-left:5px; width:35px; height:35px; }
	#header .logo_area .lang > li > a { padding:7px 0; height:35px; border-radius:50%; font-size:11px; }
	#header .logo_area .lang > li > a > span { display:none; }
}



/* 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;}

@media only screen and (max-width: 980px) {
	.login-menu{position:static;}

	.login-menu ul{padding:20px 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;}
}


/* Navigation (상단 메뉴)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#gnb{z-index:11000;}

.m-menu-open, .m-menu-close, .gnb-bg{display:none;}

.navigation:after{content:""; display:block; clear:both;}
.navigation .menu-item{position:relative; float:left; width:20%; box-sizing:border-box; text-align:center; border-right:1px solid #e1e4e8;}
.eng .navigation .menu-item { width:25%; }
.navigation .menu-item:first-child{border-left:1px solid #e1e4e8;}
.navigation .menu-item > a{display:block; width:100%; height:50px; font-size:16px; line-height:50px; box-sizing:border-box; color:#393939; font-weight:600;}
.navigation .menu-item.on > a{line-height:46px; border-top:4px solid #aec213;}

.sub-menu{z-index:11000; display:none; position:absolute; top:50px; left:0; width:100%;}
.sub-menu li a{display:block; padding:0 18px; width:100%; height:40px; font-size:13px; box-sizing:border-box; line-height:40px; background:#aec213; color:#fff; border-top:1px solid #c6d45a;}
.sub-menu li:first-child a{border-top:0;}
.sub-menu li a:hover{background:#92a40a;}

@media only screen and (min-width: 980px){
	#gnb{display:block !important;}
	.navigation .menu-item:hover > a, .navigation .menu-item:active > a{line-height:46px; border-top:4px solid #aec213;}
}
@media only screen and (max-width: 980px){
	#gnb{display:none; position:fixed; top:0; right:0; padding-top:50px; width:40%; height:100%; box-sizing:border-box; background:#fff;}

	.m-menu-open{display:block; position:absolute; top:20px; right:20px; width:32px; cursor:pointer;}
	.m-menu-open img{width:100%;}
	.m-menu-close{z-index:1000; display:block; position:absolute; top:17px; right:15px; width:20px; cursor:pointer;}
	.m-menu-close img{width:100%;}

	.navigation .menu-item{float:none; width:100%; text-align:left; border:0; border-bottom:1px solid #ddd;}
	.eng .navigation .menu-item { width:100%; }
	.navigation .menu-item:first-child{border-left:0; border-top:1px solid #ddd;}
	.navigation .menu-item > a{padding:0 25px; width:100%; height:40px; line-height:40px; font-size:14px; transition:none; background:#fff url('/images/kor06r-17-0372/common/navi_arrow2.png') no-repeat 95% center; color:#393939;}
	.navigation .menu-item.on > a{line-height:40px; font-weight:bold; border-top:0; border-left:4px solid #393939;}

	.sub-menu{position:static; padding:10px 0; min-width:auto; background:#aec213;}
	.sub-menu li a{padding:0 25px; font-size:14px; color:#fff;}

	.gnb-bg{z-index:10000; display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
}
@media only screen and (max-width: 767px){
	#gnb{width:80%;}

	.m-menu-open{top:16px; right:10px; width:25px;}
}


/* Button (공통 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.btn{font-family:"Malgun Gothic", sans-serif; 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:#aec213; border-color: #aec213; 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: #aec213;}



/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#footer{position:relative; border-top:1px solid #e5e5e5;}
#footer:after{position:absolute; top:50px; content:""; display:block; width:100%; height:1px; background:#e5e5e5;}
.eng #footer:after { display:none; } 
#footer > div{margin:0 auto; width:980px;}

.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:20px 0;}
.footer-info::after{content:""; display:block; clear:both;}
.footer-info .footer-logo{float:left; margin-right:50px;}
.footer-info .info{padding:10px 0; font-size:14px; color:#adadad; word-break:keep-all; }
.footer-info .copyright{margin-top:10px; color:#333;}
.footer-info .copyright strong{color:#aec213;}

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

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

	.footer-info{padding:15px;}
	.footer-info .info{font-size:13px;}
}
@media only screen and (max-width:767px) {
	#footer{padding-top:0px;}
	#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; width:100%; text-align:center; margin-right:0; }
	.footer-info .info{padding:0;}
	.footer-info .copyright{margin-top:5px;}
}



/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main-contents{position:relative; margin:0 auto; padding-bottom:50px; width:980px;}
.main-contents:after{content:""; display:block; clear:both;}

.com_down {position:relative; margin:0 auto; padding-bottom:50px; width:980px;}
.com_box {position:relative; float:left; width:100%; }

/* 배너 배경 */
.main-contents > div{position:relative; float:left; width:50%; box-sizing:border-box; text-align:center; overflow:hidden;}
.main-contents .banner01, .main-contents .banner04{color:#fff;}
.main-contents .banner02{color:#825d23;}
.main-contents .banner03{position:absolute; bottom:50px; left:0; color:#fff;}

/* 배너 콘텐츠 */
.main-contents > div > div{position:absolute; top:50%; padding:20px; box-sizing:border-box;}
.main-contents .banner01 .left_ {
	float:left;
	width:50%;
	background-image:url('/images/kor06r-17-0372/main/main_banner01.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
.main-contents .banner01 .right_ {
	float:right;
	width:50%;
	background-image:url('/images/kor06r-17-0372/main/main_banner04.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
.main-contents .banner01 {
	position:relative;
	height:386px;
}
.main-contents .banner01:after {
	display:block;
	content:"";
	clear:both;
}
.main-contents .banner01 > div > div {
    /* left: 50%; */
    top: 30%;
    position: absolute;
    padding: 20px;
    /* width: 100%; */
    /* -webkit-transform: translate(-50%, -50%); */
    /* -ms-transform: translate(-50%, -50%); */
    /* transform: translate(-50%, -50%); */
}
.main-contents .banner04 > div{left:50%; width:100%; -webkit-transform:translate(-50%, -50%);- ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.main-contents .banner04 {
	background-image:url('/images/kor06r-17-0372/main/main_04.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	height:386px;
}

.main-contents .banner02 > div{right:0; width:50%; -webkit-transform:translateY(-50%);- ms-transform:translateY(-50%); transform:translateY(-50%);}
.main-contents .banner03 > div{right:0; width:50%; -webkit-transform:translateY(-50%);- ms-transform:translateY(-50%); transform:translateY(-50%);}
.main-contents .banner01 > div {
	position:relative;
	top:0;
	padding:0;
	height:386px;
}



.main-contents h3{font-weight:bold; font-size:28px; line-height:1;}
.main-contents h3:after{content:""; display:block; margin:20px auto; width:60px; height:1px; background:#fff;}
.main-contents .banner02 h3:after{background:#825d23;}
.main-contents h3 img{display:block; margin:0 auto 20px; width:50px;}

.main-contents > div p{margin-bottom:40px; line-height:1.4; font-size:20px;}
.main-contents .banner02 p, .main-contents .banner03 p{margin-bottom:0;}

.main-contents .more-btn{display:block; margin:0 auto; padding:10px 20px; width:155px; line-height:1; font-size:15px; text-align:center; border:1px solid #fff;}
.main-contents .more-btn:hover, .main-contents .more-btn:active{background:rgba(255, 255, 255, 0.3); color:#fff;}
.main-contents .more-btn img{margin-left:15px;}

.main-contents .more-btn-small{display:block; margin:20px auto 0; width:35px; height:35px; line-height:30px; text-align:center; border:1px solid #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.main-contents .banner02 .more-btn-small{border:1px solid #825d23;}
.main-contents .more-btn-small:hover, .main-contents .more-btn-small:active{background:rgba(255, 255, 255, 0.3); color:#fff;}
.main-contents .more-btn-small img{-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

.eng .main-contents .banner01 > div > div {  top:20%; }
.eng .main-contents .banner04 { background-image:url('/images/kor06r-17-0372/main/emain_04.jpg'); }
.eng .main-contents .banner04 .more-btn { color:#fff; } 


@media only screen and (max-width:980px) {
	.main-contents{width:100%;}
	
	.main-contents h3{font-size:23px;}
	.main-contents > div p{font-size:14px;}
	.main-contents br{display:none;}

	.com_box {margin:0 auto; width:100%; text-align:center;}
}

@media only screen and (max-width:767px) {
	.main-contents h3{font-size:21px;}
	.main-contents h3:after{margin:15px auto;}
	.main-contents > div p{margin-bottom:20px; font-size:13px;}
	.main-contents br{display:block;}

	.main-contents .more-btn{font-size:13px;}
}

@media only screen and (max-width:680px) {
	.main-contents{padding-bottom:0;}
	.main-contents > div{float:none; width:100%;}
	.main-contents > img{width:100%;}

	.main-contents .banner01 { height:200px; }
	.main-contents .banner01 > div { height:200px; }
	.main-contents .banner01 > div > div { top:20px !important; }
	.main-contents .banner03{position:relative; top:0;}

	.main-contents h3{font-size:23px;}
	.main-contents h3:after{margin:40px auto;}
	.main-contents > div p{margin-bottom:40px; font-size:14px;}
	.main-contents br{display:none;}

	.main-contents .more-btn{font-size:15px;}

	.eng .main-contents .banner04 { height:200px; }
}

@media only screen and (max-width:480px) {
	.main-contents h3{font-size:21px;}
	.main-contents h3:after{margin:15px auto;}
	.main-contents > div p{margin-bottom:20px; font-size:13px;}
	.main-contents br{display:block;}

	.main-contents .more-btn{font-size:13px;}
}