@charset "utf-8";

/* Font */
@import url(font.css);
 
/* Guide
----------------------------------------------------------------------------------------------------------------------------------------------------------

▶사이즈
pc : 1200px
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:'NotoSansKR', sans-serif; font-weight:300; font-size:15px; color:#555;}
	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:#ff4e00;}
	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;}
    ::selection {
        background:#0575ab;
        color: #fff;
        text-shadow: none;
    }
    ::-moz-selection {
        background:#0575ab;
        color: #fff;
        text-shadow: none;
    }
    ::-webkit-selection {
        background:#0575ab;
        color: #fff;
        text-shadow: none;
    }


/* 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:80px; height:80px; position:fixed; bottom:60px; right:20px; display:none; text-align: center; z-index: 10000; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background:#ffa800; box-shadow: 0px 15px 29px rgba(0,0,0,.3);}
	.back-to-top i{color: #fff; font-size: 30px; display: block; line-height: 78px;}
    
    @media only screen and (max-width: 980px) {
		.back-to-top {width: 60px; height: 60px;}
        .back-to-top i {line-height: 58px; font-size: 20px;}
	}

    @media only screen and (max-width: 768px) {
		.back-to-top {width: 40px; height: 40px;}
        .back-to-top i {line-height: 40px; font-size: 15px;}
	}
/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#wrapper{position:relative; width:100%; min-width:320px; height:100%;}


/* Header
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
    #header {z-index :666; width: 100%; height: 65px; background-color: #f9f9f9;}
    #header h1{float:left; padding-top:8px;}
    #header h1 a{display: block;}
    #header #header_in{position: relative; margin: 0 auto; width: 100%; max-width: 1200px; height: 65px;}
    #nav{display: inline-block; margin-left: 1116px;}

   
    .nav-btn{display:none;}
	.nav-bg{z-index:888; display:none; position:absolute; top:65px; width:100%; height:250px; background:#fff; border-top:1px solid #d4d4d4; border-bottom:3px solid #0575ab;}


    .util-menu{position:absolute; top:18px; right:0; line-height:0; font-size:0;}
    .util-menu ul{display:inline-block;}
    .util-menu li{display: inline-block; float: left; height: 30px; border: 1px solid #e1e1e1; text-align: center; margin-left: 10px;}
    .util-menu li:first-child{border-color: #1886a2; margin-left: 0;}
    .util-menu a{display:inline-block; line-height:28px; font-size:12px; font-weight: 400; color: #333; padding: 0 10px;}
    .util-menu li:first-child a{color:#1886a2; font-size: 14px;}

    .navigation:after{content:""; display:block; clear:both;}
    .navigation > li{position:relative; float:left; height:100%; line-height: 66px; text-align:center;}
    .navigation .main-menu{display:block; /*padding: 0 39px;*/ width:100%; font-weight:500; font-size:18px; color:#333;}
    .navigation .sub-menu{display:none; z-index:998; position:absolute; top:65px; left:0; width:100%; height: 247px;}
    .navigation .sub-menu a{display:block; text-align:center; line-height:40px; letter-spacing:-1px; font-size:14px; font-weight: normal; color:#333;}
    .navigation .sub-menu .intro-menu{display:none;}

    .navigation > li:hover {background:#ff6c00;}
    .navigation > li:hover > a {color:#fff;}
    .navigation > li:hover a {color:#fff;}
    .navigation > li:hover .sub-menu{background:#ff6c00;}
    .navigation > li:hover:after {content:''; position:absolute; height:1px; width:100%; left:0; bottom:0; background-color:#d65b00; z-index:999;}

    .navigation .sub-menu a:hover{background:#cd5700; color:#fff;}

    @media only screen and (min-width: 1201px) {
        /*#nav {margin-left: 52px;}*/
        .navigation .main-menu {width:160px;}
        .util-menu {right: 20px;}
	}

	@media only screen and (min-width: 1201px) {
		/*#header > div{width:1200px;}*/
        #nav {margin-left: 60px;}
        /*.navigation .main-menu {padding: 0 39px;}*/
        .util-menu {right: 0;}
	}

	@media only screen and (max-width: 1200px) {
		/*#header > div{padding:0 20px;}*/
	}

	@media only screen and (max-width: 1200px) {
		#header{z-index:666; width:100%; height:65px; background:#f9f9f9; border-bottom: 1px solid #e1e1e1;}
		#header > div{padding:0 20px;}

		#header h1{float:left; height:65px;}
		#header h1 a{display:block;}
		

		.nav-btn{z-index:999; display:block; position:absolute; top:20px; right:20px; width:30px; height:23px; cursor:pointer;}
		.nav-btn span{position:absolute; left:50%; display:block; margin-left:-15px; width:30px; height:3px; background:#ff4e00; 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);}

		.nav-bg{z-index:777; display:none; position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7);}

		#nav{z-index:888; position:fixed; top:64px; right:-100%; display:block; padding:0 0 20px; width:100%; height:100%; background:#fff;}

		.util-menu{position:relative; top:0; padding:17px 30px; width:100%; max-height:65px; border-top:1px solid #e1e1e1; border-bottom:1px solid #eee;}
        .util-menu ul {width: 100%;}
        .util-menu li {width: calc(33.33% - 10px); margin-left: 15px;}
        .util-menu a {width: 100%; padding: 0;}
        
		.navigation .main-menu{display:block; padding:0 30px; width:100%; line-height:50px; font-weight:400; font-size:16px; color:#000; transition:none;}
        
        .navigation > li {width:100%; text-align:left; border-top:1px solid #e1e1e1;}
        .navigation > li:hover {background:#1886a2; border-color:#095c71;}
        .navigation > li:first-child {border-top:none;}
        .navigation > li:hover:after {display:none;}
        .navigation > li.active {background:#1886a2;}
        .navigation > li a {color:#000;}
        .navigation > li.active > a {color:#fff;}
        .navigation > li.active > ul li a {color:#555;}
        
        .navigation > li:hover .sub-menu {background:inherit;}
        .navigation .sub-menu {display:none; position:relative; top:0; height:inherit; background:#e8e8e8 !important;} 
        .navigation .sub-menu li {border-top:1px solid #b0b0b0;}
        .navigation .sub-menu li:first-child {border-top:none;}
		.navigation .sub-menu a{display:block; padding:0 30px; line-height:35px; font-size:14px; color:#555; text-align: left;}
		.navigation .sub-menu a:before{content:""; display:inline-block; margin:-2px 10px 0 0; width:5px; height:5px; vertical-align:middle; background:#b0b0b0;}
		.navigation .sub-menu a:hover{background:#b0b0b0;}
		.navigation .sub-menu a:hover:before{background:#fff;}
	}

	@media only screen and (max-width: 768px) {
		.nav-btn{right:10px;}
		#header h1{padding-top:8px;}
		#header h1 img{width:146px;}
	}


/* 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:#509591; border-color: #509591; color:#fff;}
	.btn-custom:hover, .btn-custom:focus{background-color:#447774; border-color:#447774; 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: #509591;}

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

	}


/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#footer{position:relative; width:100%; background:#fff; color:#727272; padding-bottom:60px; border-top:2px solid #e1e1e1;}
    #footer:after{content:''; position:absolute; top:74px; left:0; width:100%; height:1px; background-color:#e1e1e1;}
	.footer-area{position:relative; margin:0 auto; width:100%; box-sizing:border-box;}
	.footer-area:after{content:""; display:block; clear:both;}
    .footer-sns{position:absolute; top:0; right:0; padding:22px 0;}
    .footer-sns li{float:left; display:inline; margin-left:10px;}
    .footer-sns li:first-child{margin-left:0;}
    .footer-sns li a{display:block; width:30px; height:30px; background-color:#ffa800;}

    #footer p, #footer li{font-size:15px; font-weight:300; letter-spacing:0; color:#666;}

	.foot-logo{float:left; margin:22px 50px 0 0;}
	.foot-info{float:left; width:calc(100% - 150px);}

	.footer-menu{margin:0 auto 30px; line-height:0; font-size:0;}
	.footer-menu li{position:relative; display:inline-block; margin-left:10px;	padding-left:10px; vertical-align:middle; line-height:75px; color:#fff;}
	.footer-menu li:first-child{margin-left:0; padding-left:0; border-left:0;}
    .footer-menu li:before{content:''; position:absolute; top:33px; left:0; width:1px; height:10px; background-color:#727272;}
    .footer-menu li:first-child:before{display:none;}
	.footer-menu li a{line-height:10px; font-size:14px; font-weight:500; color:#727272;}

	.footer-info{width:1000px; line-height:1.3; margin-bottom:15px;}
	.footer-info span{color:#9c9a9a;}
    .footer-info a {color:#1886a2;  font-weight:500;}
	
    @media only screen and (min-width: 1201px) {
		.footer-area{width:1200px;}
	}

	@media only screen and (max-width: 1200px) {
		.footer-area{padding:0 20px;}
        
        .footer-sns{right:20px;}
        .footer-info{width:100%;}
	}

	@media only screen and (max-width:768px) {
        
         #footer p, #footer li{white-space:normal; font-size:12px;}
        
		.footer-area{padding:0 10px; text-align:center;}
        
        .footer-sns{display:none;}
        
        .footer-menu li{margin-left:5px; padding-left:5px;}
        .footer-menu li a{font-size:13px;}
        
        .foot-info{float:none; width:100%;}
        .footer-info{width:100%; line-height: 20px; white-space:pre;}
        .footer-info br{display:block;}
        
        .footer-copy {white-space:pre-line;}
        
		.foot-logo{float:none; margin:0 0 20px 0;}		
	}