@charset "utf-8";

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

/* 상단(로고 및 메뉴) */
.area_header { position:relative; top:0; left:0; z-index:20; width:100%; height:120px; background:url("/tempSample/20002/images/common/header_bg.png") repeat-x left top;}
.area_header header { position:relative; width:980px; margin:0 auto;}
.area_header header h1 { position:absolute; left:0; top:18px; }

.area_header .top_menu { position:absolute; right:195px; top:21px; padding:0 15px; z-index:1;}
.top_menu li { float:left; background:url('/tempSample/20002/images/common/bg_top_menu.png') no-repeat left center; }
.top_menu li:first-child { background:none;}
.top_menu li a { display:inline-block; font-size:14px; line-height:30px; padding:0 10px; color:#666; vertical-align:middle; font-family:'NotoR';}
.top_menu a:hover { text-decoration:underline}

/* 검색 - 웹버전 */
.box_search_0 { position:absolute; right:0; top:20px; width:200px; height:30px; overflow:hidden;}
.box_search_0 input { position:absolute; top:0; left:0; width:160px; height:30px; line-height:29px; padding:0 10px 0 15px; border-radius:15px; font-size:12px; color:#000; background:#ff7300; border:none;  }
.box_search_0 button {position:absolute;top:0;right: 22px;width:30px;height:30px;border:none;background:url("/tempSample/20002/images/common/btn_search_w.png") no-repeat;text-indent:-10000px;} /*221220*/
.box_search_0 input::-webkit-input-placeholder { color:#000; font-family:'Dotum';}

/* 웹네비게이션 */
#webNavi {position:absolute;left:0;top: 60px;width:100%;display:block; /* 메뉴위치 탑 */}
#gnb {position:relative;height: 60px;}
#gnb li { position:relative; float:left;}
#gnb li a {display:inline-block;font-family:'NotoM';letter-spacing:-1px;color:#fff;font-size:18px;padding: 18px 65px 18px 65px;line-height:24px;vertical-align:middle;}
#gnb li a:hover, #gnb li a:focus, #gnb li.on a { color:#fff79d;}

/* 세로메뉴 */
#gnb li ul.box {position:absolute;top: 58px;left:50%;transform: translateX(-50%);width:140px;padding: 8px 8px;background-color:#fff;border:2px solid #5674b9;}
#gnb li ul.box li { padding:0; margin:0; float:none; line-height:20px; }
#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:#1033ad; text-decoration:underline;}

/* mobile layout */
#tablet { display:none; width:100%}
#tabletHeader { width:100%; height:67px; margin:0 auto; position:fixed; top:0; left:0; z-index:20; border-bottom:3px solid #4168c3; background:#fff;}
#tabletLogo { text-align:center; padding:15px 0 0}
#tabletGnb #menuOpen a { position:fixed; width:45px; height:45px; border-radius:23px; background:#e7573f; left:2.5%; top:12px; z-index:21; text-align:center;}
#tabletGnb #menuOpen a img { margin-top:14px;}

/* mobile 검색영역 */
#tabletSearch #searchOpen a { position:fixed; width:45px; height:45px; border-radius:23px; background:#5674b9; right:2.5%; top:12px; z-index:21; text-align:center; }
#tabletSearch #searchOpen a img { margin-top:12px; }

#mSearch { position:fixed; top:-90px; left:0; width:100%; height:90px; z-index:18; background-color:#6e89c7;}
#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; height:39px; line-height:39px; padding:0 10px 0}
#mSearch .con .btnSearch { position:absolute; top:21px; right:90px; min-width:80px; font-size:15px}
#mSearch  .btnSearch, #mSearch  a.btnSearch { font-family:"NotoR"; display:inline-block; padding:12px; background-color:#1033ad; font-size:16px; color:#fff; border:none; border-radius:0 3px 3px 0; }
#mSearch .btnSearchClose { font-size:0; line-height:0; text-indent:-9999em; position:absolute; top:25px; right:5%; width:25px; height:33px; background:url('/tempSample/20002/images/common/btn_search_close.png') no-repeat 50% 0}

/* mobile navi */
#mNavi { position:absolute; left:-250px; top:0; width:250px; height:100%; z-index:9999; background-color:#354052}
#mNavi #mtitle { width:100%; height:50px; background:#354052; 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(/tempSample/20002/images/common/btn_close.png) 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; font-family:"NotoR"; 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; font-family:"NotoR"; 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; font-family:"NotoR"; 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 { position:relative; z-index:20; padding:0 0 30px; border-top:1px solid #c8d1db; background:#43484d;}
.footer_link { width:100%; font-family:'NotoR'; font-size:13px; border-bottom:1px solid #5e6369; overflow:hidden;}
.footer_link ul { width:980px; height:auto; margin:10px auto; overflow:hidden; }
.footer_link li { float:left; line-height:28px; }
.footer_link li a {display:block;padding: 0 24px 0 0;letter-spacing:-1px;color:#c9cfd5;}
.footer_link li:last-child a{padding:0;} 
.footer_link li.point a { color:#bcbaed; }
.footer_link li a img {vertical-align:middle;}
.box_footer { position:relative; width:980px; margin:20px auto 0; word-break:keep-all;}
.box_footer .WAmark{ position:absolute; right: 235px; bottom: 10px;}
.box_footer .box_info { font-size:14px; }
.box_footer .box_info address { line-height:18px; color:#c4c4c4; font-style:normal; }
.box_footer .box_info span { margin-left:10px;}
p.copyright { font-size:14px; color:#c4c4c4; padding:3px 0 0;}

/* 방문자수 */
.visitant {position:absolute; top:0; right:0;  width:23%; height:40px; font-family:'NotoM'; background:#605ca9; border-radius:40px;}
.visitant h2 {text-indent:-10000em; font-size:0;}
.visitant ul {overflow:hidden;}
.visitant ul li {position:relative; width:49%; float:left; line-height:40px; text-align:center; color:#fff; font-size:13px;}
.visitant ul li:after {content:""; display:block; position:absolute; left:0; top:50%; width:1px; height:10px; margin-top:-5px; background:#fff; opacity:0.7;}
.visitant li:first-child:after { display:none;}
.visitant ul li strong {margin-right:10px; }
.visitant ul li.today strong {padding:5px 0; color:#d1cfff; }
.visitant ul li.total strong {padding:5px 0; color:#d1cfff;}

.btn_top{ position:fixed; right:50%; bottom:35px; z-index:100; margin-right:-540px;}
.btn_top img {width:40px; height:40px; }

/********** media query mobile *************/
@media screen and (max-width:1080px) {

	#wrap { min-width:320px; overflow:visible; height:100%}
	.area_header { display:none}
	#wrap, .area_footer, .box_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 { overflow:hidden; width:100%}
	.box_mot_1.on { position:fixed; top:0}
	.box_mot_1.on2 { position:relative; top:92px}

	/* footer */
	.footer_link {border-bottom:none;}
	.footer_link ul { width:95%; background:#fff;}
	.footer_link li {width:50%; margin:-1px 0 0 -1px; text-align:center; border:1px solid #ccc; border-right:none; }
	.footer_link li a {padding:0; color:#666;}
	.footer_link li.point a { color:#1033ad; }
	.box_footer { width:95%; margin:0 auto;}
	.box_footer .WAmark{ right: 0; bottom: 50px;}


	/* 방문자수 */
	.visitant {position:relative; top:0; right:0; width:100%; margin:10px 0;}

	.btn_top{bottom:2.5%; right:2.5%; margin-right:0;}


}

@media (max-width:560px) {

	/* mobile 검색영역 */
	#mSearch .con p { padding:21px 150px 0 0}
	#mSearch .con .btnSearch { right:50px; min-width:70px; font-size:14px}
	.box_footer .WAmark a img{max-width: 55% !important;}
	.box_footer .WAmark {right: -25px;}

}

@media (max-width:480px) {


	/* footer */
	.footer_link li {width:100%; margin:0; border:none; border-top:1px solid #ccc; }
	.footer_link li:first-child {border-top:none;}




}