@charset "utf-8";
body,
html {height: 100%; } 

#wrap {position: relative;min-width: 1200px;min-height: 100%;overflow: hidden; } 

/* 상단(로고 및 메뉴) */
.area_header {position: relative;top: 0;left: 0;z-index: 20;width: 100%;height: 126px;background: #fff; } 
.area_header .top_wrap {position: relative;width:100%; max-width:1200px;height: 76px;margin: 0 auto; } 
.area_header header h1 {position: absolute;left: 5px;top: 17px; } 
.area_header header h1 a {display: block; } 

.area_header .top_menu {position: absolute; right: 210px; top: 21px; z-index: 1;}
.top_menu ul {display: flex;}
.top_menu li {padding: 0 10px; position: relative;}
.top_menu li + li:before {content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; color: #9da7b1; position: absolute; left: -2px; top: 50%; background: #9ea6af; border-radius: 50%;}
.top_menu li a {display: inline-block; font-size: 14px; line-height: 27px; color: #555; vertical-align: middle;}
.top_menu a:hover { text-decoration:underline}

/* 검색 - 웹버전 */
.box_search_0 {position: absolute;right: 0;top: 19px;width: 200px;height: 40px;overflow: hidden;background: #eeeeee;border-radius: 20px; } 
.box_search_0 input {position: absolute;top: 0;left: 0;width: 169px;height: 40px;line-height: 40px;padding: 0 25px 0 15px;border: 2px solid transparent;background: #eeeeee;border-radius: 20px;font-size: 12px;color: #666;font-family: '돋움', Dotum;box-sizing: border-box; } 
.box_search_0 button {text-indent: -99999px;position: absolute;top: 0;right: 0;width: 40px;height: 40px;border-radius: 50%;border: none;background: #26bed7 url("/images/sch/web/hsgd-k/common/btn_search_w.png") no-repeat center;cursor: pointer; } 
.box_search_0 input::-webkit-input-placeholder {color: #b2b2b2;font-family: 'Dotum'; } 

/* ie8 미디어쿼리 핵 */
@media \0screen {.box_search_0 input {line-height: 28px} }

/* 웹네비게이션 */
#webNavi {background: #38bc74;/* 메뉴위치 탑 */}
#gnb {position: relative;display: table;width:100%; max-width:1200px;margin: 0 auto; } 
#gnb:after {display: block;clear: both;content: ""; } 
#gnb>li {position: relative;display: table-cell; } 
#gnb>li a {display: block;letter-spacing: -1px;color: #fff;font-size: 19px; font-family:'NotoM'; padding: 15px 10px 15px;line-height: 20px;text-align: center; } 
#gnb li a:hover,
#gnb li a:focus,
#gnb li.on a {color: #ffee8e; } 

/* 세로메뉴 */
#gnb li ul.box {position: absolute;top: 50px;left: calc(50% - 70px);width: 140px;padding: 15px 10px;background-color: #fff;border: 3px solid #38bc74; } 
#gnb li ul.box li {padding: 0;margin: 0;float: none; } 
#gnb li ul.box li a {display: block;padding: 3px;margin: 0;letter-spacing: 0;font-family: 'Dotum';font-size: 12px;color: #666;background: none; } 
#gnb li ul.box li a:hover,
#gnb li ul.box li a:focus {color: #38bc74;text-decoration: underline; } 

/* mobile layout */
#tablet {display: none;width: 100%}
#tabletHeader {width: 100%;height: 74px;margin: 0 auto;position: fixed;top: 0;left: 0;z-index: 20;background-color: #fff;border-bottom: 1px solid #d2d2d2;box-sizing: border-box; } 
#tabletLogo {text-align: center;padding: 17px 0 0; } 
#tabletLogo a {display: inline-block; } 
#tabletGnb #menuOpen {position: fixed; left: 1rem; top: calc(37px - 1.25rem); z-index:101}
#tabletGnb #menuOpen a {display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: #38bc74; font-size: 1.4rem; color: #fff;}

/* mobile 검색영역 */
#tabletSearch #searchOpen {position: fixed; right: 1rem; top: calc(37px - 1.25rem); z-index: 21}
#tabletSearch #searchOpen a {display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: #26bed7; font-size: 1.4rem; color: #fff;}

#mSearch {position: fixed;top: -90px;left: 0;width: 100%;height: 90px;z-index: 19;background-color: #26BED7; } 
#mSearch .con p {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;position: relative;width: 90%;margin: 0 auto;padding: 21px 200px 0 0}
#mSearch .con .inputText {border-color:transparent; width:100%; background:#fff; border-radius: 3px 0 0 3px; height: 2.2rem; border:none; padding:0 10px 0}
#mSearch .con .btnSearch {position: absolute;top: 21px;right: 90px;min-width: 80px;font-size: 15px}
#mSearch .btnSearch,
#mSearch a.btnSearch {display: inline-block; height: 2.2rem; padding: 0 15px; background-color: #1f9aae;font-size: 16px;color: #fff;border: none;border-radius: 0 3px 3px 0;cursor: pointer; } 
#mSearch .btnSearchClose {font-size: 0;line-height: 0;text-indent: -9999em;position: absolute;top: 25px;right: 5%;width: 25px;height: 33px;background: url('/images/sch/web/hsgd-k/common/btn_search_close.png') no-repeat 50% 0;cursor: pointer; } 

/* mobile navi */
#mNavi {position:fixed;left: -250px;top: 0;width: 250px;height: 100%;z-index: 9999;background-color: #30394a; overflow-y: auto; } 
#mNavi #mtitle {width: 100%;height: 50px;background: #30394a;border-bottom: 1px solid #434d5e; } 
#mNavi #mtitle a {z-index: 10000;font-size: 0;line-height: 0;text-indent: -9999em;display: inline-block;width: 26px;height: 23px;position: absolute;left: 18px;top: 14px;background: url(/images/sch/web/hsgd-k/common/btn_close.gif) no-repeat;background-size: 100% auto; } 
#mNavi #mgnb .snb {width: 100%;border-bottom: 1px solid #535c6c;padding: 5px 0; } 
#mNavi #mgnb .snb,
#mNavi #mgnb .snb ul li {background-color: #30394a}
#mNavi #mgnb .snb li {float: left;width: 30%;border-bottom: 0; } 
#mNavi #mgnb .snb li a {display: inline-block;height: 26px;line-height: 26px;text-align: left;font-size: 12px;color: #fff;vertical-align: middle}
#mNavi #mgnb ul {width: 100%;overflow: hidden}
#mNavi #mgnb ul li {border-bottom: 1px solid #535c6c;background-color: #30394a;position: relative}
#mNavi #mgnb ul li a {display: block;padding: 0 0 0 20px;height: 42px;line-height: 42px;font-size: 16px;font-family: "NotoM";color: #fff}
#mNavi #mgnb ul li a:hover,
#mNavi #mgnb ul li a:focus,
#mNavi #mgnb ul li a:active {color: #2eaced}
#mNavi #mgnb ul li ul {display: none;background-color: #202631;padding: 10px 0; } 
#mNavi #mgnb ul li ul li {border-bottom: 0;background-color: #202631}
#mNavi #mgnb ul li ul li a {display: block;padding: 0 0 0 20px;height: 28px;line-height: 28px;font-size: 14px;color: #fff}
#mNavi #mgnb ul li ul li a:hover,
#mNavi #mgnb ul li ul li a:focus,
#mNavi #mgnb ul li ul li a:active {color: #2eaced}
#mNavi #mgnb ul li ul li ul {display: none;background-color: #202631;padding: 4px 0; } 
#mNavi #mgnb ul li ul li ul li {border-bottom: 0;background-color: #202631}
#mNavi #mgnb ul li ul li ul li a {display: block;padding: 0 0 0 30px;height: 22px;line-height: 22px;font-size: 12px;color: #ccc}
#mNavi #mgnb ul li ul li ul li a:hover,
#mNavi #mgnb ul li ul li ul li a:focus,
#mNavi #mgnb ul li ul li ul li a:active {color: #2eaced}
#mNavi #mgnb ul li ul li.row>a:before,
#mNavi #mgnb ul li ul li.row>a:after {display: block;position: absolute;background-color: #a7a8aa;content: ''; } 
#mNavi #mgnb ul li ul li.row>a:before {width: 9px;height: 1px;right: 18px;top: 14px; } 
#mNavi #mgnb ul li ul li.row>a:after {width: 1px;height: 9px;right: 22px;top: 10px; } 
#mNavi #mgnb ul li ul li.on>a:after {display: none}

/* footer */
.area_footer {background: #2e353b; border-top: 1px solid #e5e5e5; padding-top: 1rem; position: relative; z-index: 20;}
.footer_link {max-width: 60rem; margin: 0 auto; overflow: hidden;}
.footer_link ul {display: flex; flex-wrap: wrap; width: calc(100% + 1.2rem); margin: 0 -.6rem;}
.footer_link li {padding: 0 .6rem; line-height: 1.5rem; position: relative;}
.footer_link li:before {content: ""; display: block; width: 1px; height: .6rem; background: #bbb; position: absolute; left: 0; top: .5rem;}
.footer_link li a {display: block; font-size: .75rem; color: #fff; letter-spacing: -1px;}
.footer_link li.point a {font-family:'NotoM'; color: #00abea;}
.footer_link li a:hover,
.footer_link li a:focus {text-decoration:underline;}
.box_footer {width: 100%; max-width: 1200px; padding-top: .75rem; padding-bottom: 2.5rem; font-size: .75rem; color: #939ca3; line-height: 2; margin: 0 auto;}
.box_footer .box_info span {margin-left: 10px;}
.box_footer .box_info address{color: #fff;}
.btn_top {position: fixed; right: 0; bottom: 1.75rem; z-index: 100;}

/********** media query mobile *************/
@media screen and (max-width: 1240px){
    
.area_header header h1 {left: 1rem;}
.box_search_0 {right: 1rem;}
.area_header .top_menu {right: 11.5rem;}
.area_footer {padding: 1rem 1rem 0;}
}

@media screen and (max-width: 1024px){
	
#wrap{min-width:320px; overflow:visible; height:100%}
.area_header{ display:none}	
#wrap, .area_footer{ width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}

#web {display: none; } 

#tablet,
.tabletlogo {display: block; } 

.box_mot_1 {background: #fff;overflow: hidden;width: 100%;padding-top: 74px; } 

/* .box_mot_1.on { position: fixed; top: 0 } */

.box_mot_1.on2 {position: relative;top: 92px}
}

@media (max-width:560px) {
/* mobile 검색영역 */
#mSearch .con p {padding: 21px 150px 0 0}
#mSearch .con .btnSearch {right: 50px;min-width: 70px;font-size: 14px}

}

@media screen and (max-width: 480px) {
#tabletLogo {text-align: center;padding: 21px 0 0;width: 150px;margin: 0 auto}

#tabletLogo img {width: 100%;height: auto}
    
#tabletGnb #menuOpen {left: .5rem;}
#tabletSearch #searchOpen {right: .5rem;}
}