@charset "utf-8";

:root {
	--page-theme-color: #2955b6;
}

.middle-head{padding:10px !important;}
#header { position: fixed; width: 100%; z-index: 1000; top:0; transition:all .3s; border-bottom:transparent;}
#header.active {border-bottom:1px solid #e7e7e7; background:#fff;}
#header .container { display: table; height: 100%; }
#header .logo { width: 300px; float: left; vertical-align: middle; }

.top-head {background: var(--page-theme-color); height: 50px;line-height: 50px;}
.top-head .go-micro-site {color: #fff;float: left;font-size: 20px;border-left: 1px solid #2f61d0;border-right: 1px solid #2f61d0;padding: 0 15px;transition: all .3s; }
.top-head .go-micro-site:hover,
.top-head .go-micro-site.active {background:#1b3878;border-left: 1px solid #1b3878;border-right: 1px solid #1b3878; }

/* 레이어팝업 */
/* 공통 */
.layer-popup-wrap { display: none; }
.layer-popup-wrap:after { content:""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 9998; }
.layer { position: fixed; z-index: 9999; background: #fff; box-shadow: 0 5px 15px rgb(0 0 0 / 20%); border-radius: 3px; left: 50%; transform: translateX(-50%); top: 10%; padding: 32px 24px; }
.layer .layer-title { font-size: 24px; text-align: center; font-weight: bold; margin-bottom: 35px; }
.layer .layer-input { border: 1px solid #e0e0e0; width: 100%; padding: 10px; height: 42px; font-size: 15px; margin-top: -1px; }
.layer .close-layer-style { background: url(../img/close_layer.png) no-repeat; width: 16px; height: 16px; position: absolute; top: 25px; right: 24px; background-size: cover; cursor: pointer; }
.layer .close-layer-style:hover { background:url(../img/close_layer_on.png) no-repeat; background-size:cover; }
#header .free-call {display:none;}

/* 미디어쿼리 */
@media (max-width: 1270px){
 .container { width: 100%; padding: 0 10px; }
 .top-head .container {padding-left:0;}
}
@media (max-width: 1000px) { /* 태블릿,모바일 레이아웃 변경 */

 #header { position: fixed; background: #fff; left: 0; height: auto; border-bottom:1px solid #e7e7e7;}
 #header .logo { width: 180px; position: relative; left: 50%; transform: translate(-50%, 0px); float: none; display: block; }
 #header .free-call {display:block; border: 1px solid #d3d3d3; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #fff; background: var(--page-theme-color); font-size: 13px; padding: 5px 10px; transition: all 0.3s; }
 #header .free-call:hover { background: #f5f5f5; color: #212121; }

.top-head { position:relative; display:block; height:40px; line-height:40px; }
.top-head .go-micro-site { font-size: 16px; padding:0 10px; }
}
@media (max-width:480px) {
.top-head .go-micro-site { font-size:13px; padding:0 8px; }
}
@media (max-width: 420px){
 #header .logo { width: 160px; }
 #header .free-call { padding: 3px; font-size: 12px; }
}