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

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

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

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

*/


/* Reset
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
html{height:100%;}
body{height:100%; font-family:'Nanum Gothic', sans-serif; font-size:16px; font-weight:normal; color:#555;}
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 Gothic', sans-serif;}
h1,h2,h3,h4,h5,h6{font-family:'Nanum Square';}
dl,ul,ol,menu,li {list-style:none; 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:#20160c;}
.back-to-top i{color: #fff; font-size: 15px; display: block; line-height: 33px;}


/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#wrapper{position:relative; min-width:320px; width:100%; height:100%;}
#header{z-index:99; position:fixed; width:250px; min-width:250px; height:100%; background:#B5DDD6; box-shadow:2px 0px 10px rgba(0,0,0,0.7);}
#L_SITE_LOGO{padding:40px 0; text-align:center;}

#container{z-index:88; position:relative; padding-left:250px; width:100%; height:100%; box-sizing:border-box;}

#footer{display:none;}

@media only screen and (max-width: 980px){
	#header{position:static;width:100%;height:65px;min-width:auto;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
	#L_SITE_LOGO{}
	#L_SITE_LOGO img{width:55px;}

	#container{padding-left:0; height:auto;}

	#footer{display:block;}
}
@media only screen and (max-width: 767px){
}


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


.m-menu-open, .m-menu-close, .gnb-bg{display:none;}
#gnb .navigation{height:450px;overflow-y:scroll;position:relative;}
.navigation:after{content:"";display:block;clear:both;}
.navigation .menu-item{position:relative;}
.navigation .menu-item > a{display:block; padding:0 30px; width:100%; height:45px;font-weight:bold;font-family:'Nanum Square'; font-size:15px; line-height:45px; box-sizing:border-box;color:#00AB97;border-top:1px solid #00ab97;background-repeat:no-repeat;background-position:right 25px center;background-image:url('/images/kor17r-17-0376/common/navi_arrow.gif');background-color:#b5ddd6;background-size:7px auto;}
.navigation .menu-item:last-child > a{border-bottom:1px solid #00ab97;}
.navigation .menu-item > a:hover{background-position:right 15px center;background-color:#d6ebe7;}

.sub-menu{z-index:11000; display:none; padding:10px 0; width:100%; background:#00ab97;}
.sub-menu li a{display:block; padding:0 30px; width:100%; height:35px; font-size:14px; box-sizing:border-box; line-height:35px;  color:#fff;}
.sub-menu li:first-child a{border-top:0;}
.sub-menu li a:hover{background:#00484F;}

/* scroll */
#gnb .navigation::-webkit-scrollbar{width:10px;}
#gnb .navigation::-webkit-scrollbar-track{background:#00ab97;}
#gnb .navigation::-webkit-scrollbar-thumb{background:#008e7d;}
#gnb .navigation::-webkit-scrollbar-thumb:hover{background:#006f62;}
#gnb .navigation::-webkit-scrollbar-button:start:decrement,
#gnb .navigation::-webkit-scrollbar-button:end:increment{width:10px;height:10px;background:#00473f;}


@media only screen and (min-width: 980px){
	#gnb{display:block !important;}
}
@media only screen and (max-width: 980px){
	#gnb{display:none; position:fixed; top:0; right:0; padding-top:80px; width:40%; height:100%; box-sizing:border-box; background:#b5ddd6;}

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

	.navigation .menu-item{float:none; width:100%; text-align:left;}
	.navigation .menu-item.on > a, .navigation .menu-item > a{padding:0 30px;width:100%;height:45px;line-height:45px;font-size:16px;transition:none;}

	.sub-menu{position:static; padding:10px 0; min-width:auto;}
	.sub-menu li a{padding:0 30px; 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.6);}
}
@media only screen and (max-width: 767px){
	#gnb{width:80%;}

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



/* Login (로그인 메뉴)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.login-menu{margin-top:30px;padding:0 30px;}
.login-menu ul:after{content:""; display:block; clear:both;}
.login-menu li{float:left; width:50%; text-align:center;}
.login-menu li a{display:inline-block; padding:15px 0; width:100%; box-sizing:border-box; font-size:12px; line-height:1; background:#00ab97; border:1px solid #009987; color:#fff;}
.login-menu li:first-child a{border-right:0; background:#00ab97 ;}
.login-menu li a:hover, .login-menu li a:active{background:none;}


@media only screen and (max-width: 980px) {
	.login-menu{margin-top:100px;}
}



/* Button (공통 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.btn{font-family:"Nanum 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;}

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

}


/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* PC일 때 좌측 */
.pc-footer .footer-area{padding:30px; box-sizing:border-box; text-align:left;}
.pc-footer .footer-menu{margin-bottom:12px;}
.pc-footer .footer-menu li{line-height:1.2;}
.pc-footer .footer-menu li a{line-height:1.2; font-size:12px; color:#00484F;}
.pc-footer .footer-menu li a:hover, .footer-menu li a:active{text-decoration:underline;}
.pc-footer .footer-info p{line-height:1.2; font-size:12px; color:#00ab97;}
.pc-footer .footer-info p.copy{margin-top:12px;}
.pc-footer .footer-info a:hover{color:#ffaa4f;}

/* Tablet / Mobile 일때 하단 */
#footer .footer-area{width:100%; text-align:center; border-top:1px solid #bbb;}
#footer .footer-menu{padding:10px 20px;}
#footer .footer-menu li{display:inline-block; margin-left:7px;	padding-left:7px; line-height:8px; border-left:1px solid #ccc;}
#footer .footer-menu li:first-child{margin-left:0; padding-left:0; border-left:0;}
#footer .footer-menu li a{line-height:8px; font-weight:bold; font-size:14px; color:#999;}
#footer .footer-info{padding:25px 20px; line-height:1.2; background:#f7f6f5; border-top:1px solid #bbb;}
#footer .footer-info p{display:inline-block; line-height:1.2; font-size:12px; color:#999;}
#footer .footer-info p.copy{display:block; margin-top:12px;}

@media only screen and (max-width:980px) {
	.pc-footer{display:none;}
}

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

@media only screen and (max-width:480px) {
	#footer .footer-menu{padding:5px 10px;}
	#footer .footer-menu li a{font-size:12px;}
	#footer .footer-info{padding:20px 10px;}
}



/* Main Visual (메인 비주얼 이미지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main-visual{position:relative;width:100%;height:100vh;background:#fff;display:table;}
.main-visual .vis_inner{display:table-cell;vertical-align:middle;}
.main-visual .image{}
.main-visual .image img{display:block;margin:0 auto;max-width:100%;}
.main-visual .image.text{margin:10px auto;}
.main-visual .image.middle{margin:30px auto;}
.main-visual .slogan{box-sizing:border-box;}
.main-visual .slogan h3,.main-visual .slogan h4,.main-visual .slogan h5{font-family:'Nanum Square';text-align:center;line-height:1.5;font-weight:bold;letter-spacing:-1px;word-break:keep-all;color:#00AB97;}
.main-visual .slogan h5{font-size:30px;letter-spacing:0px;font-weight:normal;}
.main-visual .slogan h4{color:#00484F;font-size:36px;}
.main-visual .slogan h3{margin-top:30px;font-size:40px;}
.main-visual .slogan strong{display:inline-block;padding:7px;line-height:1;background:#dbedea;text-shadow:none;}

.vis_banner{position:absolute;top:50px;right:50px;padding:25px 15px;width:250px;background:#b5ddd5;}
.vis_banner h5,.vis_banner h6,.vis_banner p{font-weight:bold;letter-spacing:-1px;line-height:1.5;word-break:keep-all;}
.vis_banner h5{font-size:18px;color:#fff;}
.vis_banner h6{font-size:18px;color:#00484F;}
.vis_banner p{margin:10px 0;font-size:15px;color:#00AB97;}


@media only screen and (max-width:980px) {
	.main-visual{height:60vh;padding:50px 20px;}
	.main-visual .slogan h5{font-size:24px;}
	.main-visual .slogan h4{font-size:30px;}
	.main-visual .slogan h3{font-size:36px;}
}

@media only screen and (max-width: 767px) {
	.main-visual{padding:40px 15px;}
	.main-visual .slogan h5{font-size:20px;}
	.main-visual .slogan h4{font-size:25px;}
	.main-visual .slogan h3{margin-top:20px;font-size:30px;}
	.vis_banner{display:none;}
} 

@media only screen and (max-width: 480px) {
	.main-visual{padding:30px 10px;}
	.main-visual .slogan h5{font-size:18px;}
	.main-visual .slogan h4{font-size:20px;}
	.main-visual .slogan h3{margin-top:15px;font-size:24px;}
}


/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main-contents{position:relative;}


.inquiry-box{position:absolute; top:50px; right:50px; padding:25px 15px; width:250px; background:#ffb25f;}
.inquiry-box h3{margin-bottom:20px; text-align:center; font-weight:bold; font-size:20px; color:#3b2106;}
.inquiry-box h3 img{margin:-3px 7px 0 0;}
.inquiry-box h4{font-size:13px; color:#3b2106;}
.inquiry-box h4 img{margin:-2px 4px 0 0;}
.inquiry-box textarea, .inquiry-box input, .inquiry-box select{font-size:12px;}
.inquiry-box .chkbox span{font-size:12px; color:#3b2106;}

.inquiry-box .btn-block{font-weight:bold; font-weight:13px; background:#483826; color:#fff;}

@media only screen and (max-width:980px) {
	.inquiry-box{position:static; top:0; right:0; width:100%;}
}

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

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