@charset "utf-8";

/* ----- pc - 1200px 기준 ----- */
.inner{width: 100%;max-width:1200px;margin:0 auto;}
.pc_only{}
.mobile_only{display: none !important;}

/* ----- header ----- */
#header{position:fixed;width:100%;left:0;top:0;z-index: 99;background-color: #ffffff;border-bottom: 1px solid #e5e5e5;}
#header .inner{font-size: 0;}
#header .inner > *{display: inline-block;vertical-align: middle;}
#header .menu_wrap{margin-left: 5%;}
#gnb{font-size: 0;}
#gnb > li{display: inline-block;vertical-align: middle;position:relative;}
#gnb > li > a{padding:40px 0;}
#gnb > li > a span{display: inline-block;width:100%;padding:0 40px;font-size: 16px;line-height: 1;color:#222222;letter-spacing: -0.025em;font-weight: 300;text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#gnb > li + li > a span{border-left: 1px solid #e3e3e3;}
#gnb > li.on > a span,
#gnb > li:hover > a span{color: #3b85d6;}
#header .util{float:right;font-size: 0;padding: 35px 0;}
#header .util > div{display: inline-block;vertical-align: top;}
#header .note{cursor:pointer;}
#header .note .ico{display: inline-block;vertical-align: middle;}
#header .note .ico img{width: 21px;}
#header .note .ico img img{width: 100%;}
#header .note .ico span{display: inline-block;padding:0 5px;margin:-7px 0 0 -10px;background-color: #168ecb;border-radius:20px;font-size: 14px;line-height: 20px;font-weight: 300;color:#ffffff;text-align: center;}
#header .note .user{display: inline-block;vertical-align: middle;margin:0 10px;font-size: 16px;color: #666666;font-weight: 200;}
#header .search_wrap{}
#header .search_wrap .search_box{position:relative;width:152px;overflow: hidden;}
#header .search_wrap .text_box{border:0;width:100%;padding:0 15px;border-radius:15px;background-color: #ababab;border: 1px solid #ababab;background-color: #ffffff;font-size: 16px;color: #666666;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#header .search_wrap .search_btn{display:block;width: 16px;position:absolute;right: 12px;top: 4px;}
#header .search_wrap .search_btn img{width: 100%;}
#header .language{width: 60px;margin-left:15px;position:relative;}
#header .language ul{position:absolute;top: 0;left: 0;width:100%;height: 24px;overflow:hidden;background:url('/img/arrow_gray.png') no-repeat right 10px;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
#header .language ul.open{height: 48px;}
#header .language li a{font-size: 16px;color:#666666;font-weight: 300;}
#header .lnb{display: none;width: 100%;position:absolute;top:100%;z-index: 8;}
#header .lnb li{}
#header .lnb li a{font-size: 14px;line-height: 34px;color: #666666;font-weight: 300;text-align: center;}
#header .lnb li:hover a{font-weight: bold;}
#header .lnb_bg{display: none;position:absolute;top:100%;left:0;z-index: 5;width:100%;height: 300px;background-color: #f7fcfe;}
#header:after{content:'';display:block;width:100%;clear:both;}
#header + div{padding-top: 96px;}


/* ----- footer ----- */
#footer{padding:70px 0;background-color: #303536;}
#footer .inner{font-size: 0;}
#footer .inner > *{display: inline-block;vertical-align: middle;}
#footer .logo{width: 133px;}
#footer .logo img{width: 100%;}
#footer .address{margin-left: 25px;}
#footer .address span{display: inline-block;vertical-align: top;font-size: 16px;line-height: 1.375;color: #6c7475;}
#footer .address span + span{margin-left: 15px;}
#footer .address span a{font-size: inherit;color:inherit;}
#footer .copyright{margin-top: 20px;}
#footer .footer_util{margin-left: 190px;}
#footer .footer_util ul{font-size: 0;}
#footer .footer_util li{display: inline-block;vertical-align: top;width: 175px;}
#footer .footer_util li + li{margin-left: 10px;}
#footer .footer_util a{padding: 9px 0;font-size: 16px;color:#6c7475;letter-spacing: 0;font-weight: 200;text-align: center;background-color: #1e2526;}




/* -----미디어 쿼리----- */
/* 해상도 ~1200px */
@media all and (max-width:1200px){
	.inner{padding:0 10px;-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; box-sizing: border-box;}

	/* ----- header ----- */
	#header .menu_wrap{margin-left: 0;}
	#gnb > li > a span{min-width:100px;padding:0 20%;}
	#header .search_wrap{width: 150px;}


	/* ----- footer ----- */
	#footer .inner > *{display: block;}
	#footer .footer_util{margin-left: 0;}
	#footer .logo{margin:0 auto 25px;}
	#footer .address{text-align: center;margin-left: 0;}
	#footer .address span{-ms-word-break: keep-all;	word-break: keep-all;}
	#footer .footer_util ul{text-align: center;margin-top: 50px;}
	#footer .footer_util li{width: 48%;}
	#footer .footer_util li + li{margin-left: 4%;}
}

/* 해상도 ~1000px */
@media all and (max-width:1000px){
	.inner{padding:0 5%;}
	.pc_only{display: none !important;}
	.mobile_only{display: block !important;}

	/* ----- header ----- */
	#header + div{padding-top: 83px;}
	#header .inner{position:relative;}
	#header .inner > *{}
	#header .mobile_btn{position:absolute;width: 30px;top: 30px;left:5%;z-index: 1;}
	#header .mobile_btn img{width: 100%;}
	#header .logo{display: block;text-align: center;padding:27px 0 29px;}
	#header .util{float:none;position:absolute;top:35px;right:5%;padding:0;}
	#header .search_wrap{position:relative;width: 30px;top: -10px;}
	#header .mobile_search{width: 30px;}
	#header .mobile_search img{width: 100%;}
	#header .search_wrap .search_box{padding:15px;width:200px;position:absolute;top: 59px;right:0;background-color: #fff;border:1px solid #e5e5e5;border-top: 0;}
	#header .search_wrap .search_btn{top: 19px;right: 27px;}

	#header .inner > .menu_wrap{display: block;}

	#header .menu_wrap,
	#header .black_bg{-webkit-transition:left 0.3s;-moz-transition:left 0.3s;-ms-transition:left 0.3s;-o-transition:left 0.3s;transition:left 0.3s;}
	#header .menu_wrap{position:fixed;width:78%;height: 100vh;top:0;left:-100%;z-index: 9;background-color: #ffffff;}
	#header .black_bg{position:fixed;top:0;left: -100%;z-index: 8;width:100%;height: 100vh;background-color: rgba(125,125,125,0.59);}
	#header.on .menu_wrap,
	#header.on .black_bg{left: 0;}

	#header .menu_top{position:relative;}
	#header .menu_top .logo{padding:27px 0 29px;}
	#header .menu_top .mobile_close{position:absolute;right:20px;top:30px;width: 25px;height: 25px;}
	#header .menu_top .mobile_close img{width: 100%;}
	#header .menu_top .bottom{padding:25px 5%;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;background-color: #f7fcfe;}
	#header .menu_top .note{float:left;}
	#header .menu_top .language{float:right;}
	#header .menu_top .language ul{position:static}
	#header .menu_top .bottom:after{content:'';display:block;clear:both;}

	#header .menu_wrap{overflow-y:scroll;}
	#gnb > li{display: block;border-bottom: 1px solid #e5e5e5;}
	#gnb > li > a{font-size: 26px;padding:35px 0;}
	#gnb > li > a span{padding:0 5%;font-size: 26px;text-align: left;}
	#header .lnb{padding:20px 0;position:relative;background-color: #f8f8f8;border-top: 1px solid #e5e5e5;}
	#header .lnb li a{text-align: left;font-size: 18px;line-height: 46px;padding:0 5%;}


}

/* 해상도 ~640px */
@media all and (max-width:640px){
	/* ----- header ----- */
	#header .mobile_btn{width: 30px;}
	#header .mobile_search{width: 30px;}

	#gnb > li > a span{font-size: 18px;}
	#header .lnb li a{font-size: 15px;line-height: 2.5;}
}