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

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

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

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

*/


/*---------------------------------------- Reset*/
html,body{margin:0; padding:0; width:100%; height:100%;}
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,a{
	margin:0; 
	padding:0;
	font-size:1em; 
	line-height:1; 
	font-family:'Noto Sans KR', dotum, sans-serif; 
	color:#333; 
	font-weight:300;
	box-sizing:border-box;
}
body{position:relative; overflow-y: scroll;min-width:320px;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
fieldset,img {border:0 none;}
dl,ul,ol,menu,li {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}
img,input,select,textarea,button {vertical-align:middle;}
body {background:#fff;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{ text-decoration:none; -webkit-transition:all .4s ease-out; -moz-transition:all .4s ease-out; transition:all .4s ease-out;display:block;}
a:active, a:hover {text-decoration:none;}
address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;}
table{border-collapse:collapse; border-spacing:0;border:0;width:100%}
caption{text-align:left;}
fieldset{border:0 none;}
hr{display:none;}
em, i{font-style:normal;}

input{border:0;}
select::-ms-expand { display: none; }
select, input, button,textarea{
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	/*-webkit-appearance: none ;
	-moz-appearance: none;
	appearance: none;*/
-webkit-border-radius:0 ;
	border:0;
	box-sizing: border-box;
-webkit-box-sizing: border-box;
outline:0;
	border-radius:0
}
button{outline:0;cursor:pointer}

@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:#494949;}
.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:9999
}
#L_SITE_LOGO{padding:110px 0 70px; text-align:center;}

#container{padding-left:110px; width:100%; height:100%; box-sizing:border-box;}



/* 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;}
.navigation .menu-item > a{display:block; padding:0 20px; width:100%; height:50px; font-family:'Nanum Square'; font-size:18px; line-height:46px; box-sizing:border-box; color:#fff; border-top:1px solid #646464; background:url('/images/kor01r-18-0401/common/navi_arrow.gif') no-repeat 169px center;}
.navigation .menu-item:last-child > a{border-bottom:1px solid #646464;}
.navigation .menu-item.on > a{font-weight:bold; color:#ffe074; background:url('/images/kor01r-18-0401/common/navi_arrow2.gif') no-repeat 169px center;}

.sub-menu{z-index:11000; display:none; width:100%; background:#e09d00;}
.sub-menu li a{display:block; padding:0 18px; width:100%; height:40px; font-size:14px; box-sizing:border-box; line-height:40px; background:#fff; color:#fff; border-top:1px solid #fff;}
.sub-menu li:first-child a{border-top:0;}
.sub-menu li a:hover, .sub-menu li a:active{background:#fff;}



/* Login (로그인 메뉴)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.login-menu{padding:50px 20px;}
.login-menu h2{font-family:'Nanum Square'; line-height:1; font-size:18px; color:#fff;}
.login-menu h2 + p{font-family:'Nanum Square'; font-size:25px; font-weight:bold; color:#ffe074;}
.login-menu a:hover{color:#ffe074;}
.login-menu ul{margin-top:15px;}
.login-menu ul:after{content:""; display:block; clear:both;}
.login-menu li{float:left; margin-left:10px; width:calc(50% - 5px); text-align:center;}
.login-menu li:first-child{margin-left:0;}
.login-menu li a{display:inline-block; padding:5px; width:100%; box-sizing:border-box; font-size:13px; line-height:1; line-height:1; background:#969595; border:1px solid #969595; border-radius:5px; color:#fff;}
.login-menu li a:hover, .login-menu li a:active{background:none;}

@media only screen and (max-width: 980px) {
	.login-menu h2 + p{font-size:30px;}
	.login-menu li a{padding:10px; font-size:16px;}
}



/* 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:0; height:38px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.form-control:focus{outline:none; box-shadow:none; -webkit-box-shadow:none; border-color: #555;}


/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#footer{padding:80px 20px; width:100%; border-top:1px solid #e5e5e5; background: #f9f9f9;}
.footer-area{margin:0 auto; width:100%; box-sizing:border-box; text-align:center;}

.footer-menu li{
display: inline-block;
margin: 0 15px;
}
.footer-menu li a{
	font-weight: 500;
font-size: 15px;
color: #333;
}

.footer-info{display: inline-block; margin:15px 0}
.footer-info:after{
	clear:both;
	display:block;
	content:'';
}
.footer-info li{
	display:inline-block;
}
.footer-info li:after{
	content:'';
	display:inline-block;
	width:1px; 
	height:13px;
	background:#888888;
	margin:0 12px;
}
.footer-info li:last-child:after{width:0}

.footer-info li, .footer-area a, .footer-area p{

font-size: 13px;
line-height: 21px;
color: #888888;
}
.footer-area a{display:inline-block;}



/* Main Visual (메인 비주얼 이미지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main-visual {position: relative;width: 100%;background: url(/images/kor01r-18-0401/main/main_visual.jpg) no-repeat center center/cover; height: 790px;}
.visual-title *{color: #fff; letter-spacing:-1px; font-size: 43px; word-break: keep-all; letter-spacing:-2px}
.visual-title {text-align: center; position: absolute; top:50%; left:50%; margin-left: -500px; height:441px; width:1000px; background: url(/images/kor01r-18-0401/main/main_slogan.png) no-repeat center center; -webkit-transform:translateY(-50%); -ms-transformY:translate(-50%); transform:translateY(-50%); display:table;}
.visual-title p {font-weight:500; line-height:120%; display:table-cell; vertical-align:middle;}


/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main-contents{padding: 80px;overflow: hidden;background: #f1f1f1;}

.main-contents ul{display: inline-block;width: 100%;}
.main-contents ul:after{display:block; clear:both; content:'';}
.main-contents ul li{float: left;margin-right: 40px; width:492px;width: calc((100%/3) - 27px);height: 350px;max-height: 492px; position:relative; transition: .6s; }
.main-contents ul li:last-child{margin-right: 0px ;}
.main-contents ul li *{color:#fff}
.main-contents ul li a{height: 100%;width: 100%; padding: 10%; transition:.6s; position:relative; z-index:3}
.main-contents ul li a h5{font-size: 32px;}
.main-contents ul li a h5:after{content: '';display: block;background: #fff;width: 54px;height: 2px;margin: 17px 0 12px;}
.main-contents ul li a p{font-size: 17px; line-height:22px;}
.main-cont-1 {background:url(/images/kor01r-18-0401/main/sec1-1.png) no-repeat center/cover;}
.main-cont-2 {background:url(/images/kor01r-18-0401/main/sec1-2.png) no-repeat center/cover;}
.main-cont-3 {background:url(/images/kor01r-18-0401/main/main_banner3.jpg) no-repeat center/cover;}

.main-contents ul li:before{opacity: 0;content: '';z-index: 2;position: absolute;top: 0;left: 0;width: 100%;height: 100%; transition: .6s;}
.main-contents ul li:hover{transition: .6s; box-shadow: 8px 9px 14px 0px rgba(0, 0, 0, 0.2)}
.main-contents ul li.main-cont-1:before{
	background: rgb(255,156,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(255,156,0,0.9) 30%, rgb(196,78,0,0.9) 100%), url(/images/kor01r-18-0401/main/sec1-1.png) no-repeat center/cover; /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(/images/kor01r-18-0401/main/sec1-1.png) no-repeat center/cover; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(/images/kor01r-18-0401/main/sec1-1.png) no-repeat center/cover; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#c44e00',GradientType=0 ); /* IE6-9 */
	opacity:0;
	content:'';
}
.main-contents ul li.main-cont-2:before{
	background: rgb(255,156,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(255,156,0,0.9) 30%, rgb(196,78,0,0.9) 100%), url(/images/kor01r-18-0401/main/sec1-2.png) no-repeat center/cover; /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(/images/kor01r-18-0401/main/sec1-2.png) no-repeat center/cover; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(/images/kor01r-18-0401/main/sec1-2.png) no-repeat center/cover; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#c44e00',GradientType=0 ); /* IE6-9 */
}

.main-contents ul li.main-cont-3:before{
	background: rgb(255,156,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(255,156,0,0.9) 30%, rgb(196,78,0,0.9) 100%), url(/images/kor01r-18-0401/main/main_banner3.jpg) no-repeat center/cover; /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(/images/kor01r-18-0401/main/main_banner3.jpg) no-repeat center/cover; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(255,156,0,0.9) 30%,rgb(196,78,0,0.9) 100%), url(/images/kor01r-18-0401/main/main_banner3.jpg) no-repeat center/cover; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#c44e00',GradientType=0 ); /* IE6-9 */
}
.main-contents ul li:hover:before{
	opacity:1;
}


/*SECTION TITLE*/

.section-title{font-size: 50px;text-align: center;text-transform: uppercase;color: #111;font-weight: 400;letter-spacing: -2px;margin-bottom: 50px;}
.section-title:before{content: '';display: block;width: 35px;height: 2px;background: #ffb500;margin: 0px auto 15px;transform: rotate(-45deg);}


/*--------------------------- gnb*/
.gnb-area{position: fixed;width: 110px;height: 100%;vertical-align: top;background: #fff;border-right: 1px solid #e5e5e5;box-sizing: border-box;top: 0;left: 0;z-index: 999;}
.fix-menu{position: relative;background: #fff;height: 100%;}
.hbg{width:40px; height:33px; position: absolute;top: 30px;left: 30px; cursor:pointer;}
.hbg, .hbg span{display:inline-block; box-sizing: border-box;}
.hbg span{position: absolute;left: 0;width: 100%;height: 2px;background-color: #333;border-radius: 4px	}
.hbg span:nth-of-type(1) {top: 0;}
.hbg span:nth-of-type(2) {top: 15px;}
.hbg span:nth-of-type(3) {bottom: 0;}

.gnb-util{position: absolute;bottom: 40px;left: 0;width: 100%;text-align: center;}
.gnb-util li{margin-bottom:20px;}
.gnb-util li:last-child{margin-bottom:0}


/*nav-open*/

.open-menu{	position: fixed;top: 0;left: 0;width: 350px;height: 100%;background: #fff;right: 0;bottom: 0;transition: .5s; opacity: 0; transform: translateX(-100%); z-index: 999;}
.open-menu.on{transform: translateX(0%); opacity:1; transition: .5s;}
.open-menu .hbg{left: auto;right: 40px;}
.open-menu .hbg span:nth-of-type(1) {-webkit-transform: translateY (10px) rotate (-45deg);transform: translateY(10px) rotate(-45deg);}
.open-menu .hbg span:nth-of-type(2) {opacity: 0;}
.open-menu .hbg span:nth-of-type(3) {-webkit-transform: translateY(-22px) rotate(45deg);transform: translateY(-22px) rotate(45deg);}

.dep-1{padding: 0 50px;}
.dep-1>li{font-size: 21px;color: #333;font-weight: 400;letter-spacing: -1px;padding: 15px 0;position: relative;cursor: pointer;}
.dep-1>li:after{content: '+';font-size: 30px;font-weight: 100;position: absolute;right: 0;top: 9px;color: #999;}
.dep-1>li.on{	color:#ffb400;}
.dep-1>li.on:after{	 content: ''; width:17px; height:1px; background:#ffb400; top:24px; }
.dep-2{	display:none; margin-top:8px}
.dep-2 li a{font-size: 16px;color: #888;height: 30px;line-height: 30px;}
.open-bim{background: #000;opacity: .8;position: fixed;top: 0;left: 0;z-index: 99;width: 100%;height: 100%;right: 0;bottom: 0; display:none}

/*이용약관 등*/
.user-cont-area .user-txt{border: 1px solid #e5e5e5;padding: 50px;overflow-y: scroll;height: 550px;background: #f9f9f9;}
.user-cont-area .user-txt p{font-size: 14px !important;line-height: 24px !important;}
.user-cont-area .user-txt p b{display:block; padding:10px 0 0 ; line-height:22px; color:#303030;}



/*------------------------------------------ 1024*/

@media only screen and (max-width: 1024px){
	.main-visual{height:600px;}
	.visual-title *{font-size:36px;}
	.visual-title{margin-left: 0; width:90%; left:5%; padding: 0 20px; background-size:contain;}

	.main-contents{padding:60px 30px}
	.main-contents ul li{margin-right: 20px; width: calc((100%/3) - 14px);}
}


/*------------------------------------------ 900*/

@media only screen and (max-width: 900px){
	.gnb-area{width: 100%; background: none; border-right: 0; height:auto	}
	.fix-menu{height: 70px;	border-bottom: 1px solid #e5e5e5; box-sizing: border-box;	}
	.fix-menu .hbg{top:20px}
	.gnb-util{right: 30px; left: auto; width: auto; bottom: auto; top: 15px;	}
	.gnb-util li{margin-bottom: 0; display: inline-block; margin-left: 10px; vertical-align: middle;	}
	.gnb-util li img{width: 75%;	}

	#container{padding-left: 0; padding-top: 70px;}
}

/*------------------------------------------ 767*/

@media only screen and (max-width: 767px){
	.main-visual {height:500px;}
	.visual-title * {font-size:26px;}
	.visual-title {height:auto; padding:100px 0;}
	.main-contents ul li {margin-right: 0; width: 100%; margin-bottom: 20px;	}
	.main-contents ul li a{padding:8%}
	.visual-title {top:233px}
	.visual-title p {font-weight: 300;}
}

/*------------------------------------------ 480*/

@media only screen and (max-width: 480px){
	.main-visual {height:450px;}
	#L_SITE_LOGO { padding: 90px 0 40px;}

	.visual-title br {display:none;}
	
	.fix-menu{height: 55px;}
	.hbg{width: 32px; height: 25px;}
	.hbg span:nth-of-type(2){top:11px}

	#container{padding-top: 55px;}
	.fix-menu .hbg{top:16px;left: 20px;}

	.gnb-util{right:12px}
	.gnb-util li img {width: 60%;}
	.gnb-util li{margin-left:0}

	.open-menu{width:80%}
	.open-menu .hbg span:nth-of-type(3) {
		-webkit-transform: translateY(-14px) rotate(45deg);
		transform: translateY(-14px) rotate(45deg);
	}
	.main-contents {padding: 20px}

	.partners{padding: 40px 20px 130px;}
	.section-title{margin-bottom: 40px; font-size: 35px;}

	#footer{padding:50px 20px}
	.footer-menu li {margin: 0 5px;}
	.footer-menu li a{font-size: 13px;}
	
}
@media only screen and (max-width: 420px){
	.visual-title * {font-size:24px;}
}