@import url("/00_common/css/webfont.css");
@import url("/00_common/font/SCDream/fonts.css");
@import url("/00_common/font/XEIcon-2.3.3/xeicon.css");

#wrap {position: relative; overflow:hidden; }
.container {position: relative; margin: 0 auto; max-width: 980px;}
.container::after{display: block; content: ""; clear: both;}

/* �긽�떒(濡쒓퀬 諛� 硫붾돱) */
#header {position: relative;margin: 0 auto;height: 140px;background: url('/images/template/30338/main/header_bg.png') repeat-x bottom;  z-index:10;}
#header h1 {position: absolute; top: 23px; left: 0;}
#header h1 a { display:block; }

.top {height: 80px;}
.top:after {clear: both; display: block; content: "";}
.top_menu {position: absolute; top: 21px; right: 230px;}
.top_menu li {float: left;}
.top_menu li a {position: relative; display: inline-block; padding: 0 10px; line-height: 38px; vertical-align: middle; font-size: 14px; color: #3e3e3f;}
.top_menu li a:hover,
.top_menu li a:focus { text-decoration:underline; }
.top_menu li + li a:before {position: absolute; top: 17.5px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #9ea6af; content: "";}

/* 寃��깋 - �쎒踰꾩쟾 */
.box_search_0 {position: absolute; top: 21px; right: 0; width: 220px; height: 38px; border-radius: 19px; overflow: hidden; background: #ff9c8d;}
.box_search_0 input {width: 160px; padding: 0 10px 0 10px; height: 38px; line-height: 38px; font-size:12px; border: none; background: none;}
.box_search_0 button {position: absolute; top: -1px; right: -1px; padding: 0; width: 38px; height: 38px; background: #ff9c8d url('/tempSample/20002/images/common/btn_search_w.png') no-repeat center; border: none; border-radius: 50%;} /*210517*/
.box_search_0 input::-webkit-input-placeholder {color: #fff;}

/* �쎒�꽕鍮꾧쾶�씠�뀡 */
#gnb {width: 100%; line-height: 60px; height:60px; overflow:hidden; font-family:"SCDream"; font-weight: 400; }
#gnb:before { content:""; position:absolute; left:-100%; top:140px; width:300%; height:0; background:#fff; border-bottom:none; box-shadow:5px 5px 10px rgba(0,0,0,0.2); z-index:3; }
#gnb .lstDep1 {position:relative; display: table; table-layout:fixed; width: 100%; line-height: 68px; z-index:10; overflow:hidden;}
#gnb .lstDep1 > li {position: relative; display: table-cell; text-align: center; vertical-align:top; }
#gnb .lstDep1 > li:before { content:""; position:absolute; left:0; top:60px; width:100%; height:100vh; border-left:1px solid #c8d2e7; }
#gnb .lstDep1 > li:last-child:after { content:""; position:absolute; right:0; top:60px; width:1px; height:100vh; background:#c8d2e7; }
#gnb .lstDep1 > li > a {display: block; width:100%; font-size:18px; height:60px; color: #fff; font-weight:600; letter-spacing: -2px; overflow:hidden;}

#gnb .lstDep2 { padding: 15px 0; width:100%; text-align:left;}
#gnb .lstDep2 > li > a {position:relative; display: block; color: #222; font-size:15px; line-height:24px; padding:8px 15px; -webkit-transition:background-color 0.2s; -ms-transition:background-color 0.2s; -moz-transition:background-color 0.2s; transition:background-color 0.2s;}
#gnb .lstDep2 > li.dep > a { padding-right:23px;}
#gnb .lstDep2 > li.dep > a:before { position:absolute; right:5px; top:10px; content:"\e942"; font-size:20px; font-family:"xeicon"; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s; }
#gnb .lstDep3 { position:relative; display:none; background:#e1fff3; border-left:1px solid #c8d2e7; border-bottom:1px solid #c8d2e7; padding:10px; }
#gnb .lstDep3 > li > a {position:relative;display: block; line-height:20px; font-size:14px; padding:5px 0 5px 10px; }
#gnb .lstDep3 > li > a:before { content:""; position:absolute; left:0; top:14px; display:block; width:2px; height:2px; background:#555;  }
#gnb .lstDep3 > li > a:hover,
#gnb .lstDep3 > li > a:focus { text-decoration:underline; }

/* ��硫붾돱 : active */
#gnb.active { height:auto; overflow:inherit; }
#gnb.active:before { border-bottom:2px solid #425b9b;  height:calc(100% - 138px); }
#gnb .lstDep1 > li.active:before{ background:#f6fffd;}
#gnb .lstDep2 > li.dep.active .lstDep3 { display:block; }
#gnb .lstDep2 > li.dep.active > a:before { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);}
#gnb .lstDep2 > li > a:hover,
#gnb .lstDep2 > li > a:focus,
#gnb .lstDep2 > li.active > a{background:#50cf9b; color:#fff; }

/* mobile layout */
#tablet {display: none; width: 100%;}
#tabletHeader {position: fixed; top: 0; left: 0; margin: 0 auto; width: 100%; height: 68px; background: #fff; border-bottom: 2px solid #425b9b; z-index: 10;}
#tabletLogo {padding: 15px 0 0; text-align: center;}
#menuOpen {position: fixed; top:11px; left:10px;z-index: 11;width: 45px;height: 45px;border-radius: 10px;background: #009b8b;}
#menuOpen a { display:block; overflow:hidden; width:100%; height:100%; line-height: 45px; text-align: center; color: #fff; font-size:30px;}

/* mobile 寃��깋�쁺�뿭 */
#searchOpen { position: fixed; right:10px; top:11px; z-index: 11; width: 45px; height: 45px; border-radius:10px; background: #f15100;}
#searchOpen a { display:block; overflow: hidden; width:100%; height:100%; line-height: 45px; text-align:center; color: #fff; font-size:30px;}

#mSearch {position: fixed; top: 68px; left: 0; width: 100%; height: 0; background-color: #425b9b; overflow: hidden; z-index: 11; transition: 0.25s ease; -webkit-transition: 0.25s ease;}
#mSearch .con p {position: relative; margin:26px 80px 25px 30px; }
#mSearch .con .inputText {width: calc(100% - 80px); height: 39px; box-sizing:border-box; line-height: 39px; background: #fff; border-radius: 3px 0 0 3px; border-color: transparent;}
#mSearch .con .btnSearch {position: absolute; top:0; right:0; min-width: 80px; font-size: 15px;}
#mSearch .btnSearch,
#mSearch a.btnSearch {display: inline-block; height:39px; line-height:39px; color: #fff; background-color: #f9a828; border: none; border-radius: 0 3px 3px 0;}
#mSearch .btnSearchClose {position: absolute; top: 30px; right: 30px; width: 25px; height: 33px; color: transparent; background: url('/tempSample/20002/images/common/btn_search_close.png') no-repeat 50% 0; overflow: hidden;}
#mSearch.active {height: 90px;}

/* mobile navi */
#mNavi {position: absolute; top: 0; left: -80%; width: 80%; height: 100%; background-color: #30394a; transition: 0.25s ease; -webkit-transition: 0.25s ease;}
#mNavi::before {position: fixed; top: 0; left: -80%; width: 80%; height: 100%; background-color: #30394a; z-index: 11; content: ""; transition: 0.25s ease; -webkit-transition: 0.25s ease;}
#mNavi #mtitle {position: relative; width: 100%; height: 68px; background: #354052; border-bottom: 1px solid #434d5e; z-index: 12;}
#mNavi #mtitle a {position: absolute; top: 18px; left: 18px; display: inline-block; width: 34px; height: 34px; color: transparent; background:url('/tempSample/20002/images/common/btn_close.gif') no-repeat; background-size: 100% auto; overflow: hidden;}
#mNavi.active {left: 0;}
#mNavi.active::before {left: 0;}

#mNavi #mgnb {position: relative; z-index: 12;}
#mNavi #mgnb .snb {border-bottom: 1px solid #535c6c;}
#mNavi #mgnb .snb, #mNavi #mgnb .snb ul li {background-color: #30394a;}
#mNavi #mgnb .snb li {float: left; border-bottom: 0;}
#mNavi #mgnb .snb li a {display: inline-block; padding: 0 20px; height: 50px; line-height: 50px; text-align: left; font-size: 14px; color: #fff; vertical-align: middle;}

#mNavi #mgnb ul {overflow: hidden}
#mNavi #mgnb ul li {position: relative; border-bottom: 1px solid #535c6c; background-color: #30394a;}
#mNavi #mgnb ul li a {display: block; padding: 0 0 0 20px; height: 50px; line-height: 50px; 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; padding: 10px 0; background-color: #202631;}
#mNavi #mgnb ul li ul li {border-bottom: 0; background-color: #202631}
#mNavi #mgnb ul li ul li a {height: 40px; line-height: 40px; font-size: 14px;}

#mNavi #mgnb ul li ul li ul {display: none; padding: 5px 0;}
#mNavi #mgnb ul li ul li ul li a {padding: 0 0 0 30px; height: 30px; line-height: 30px; font-size: 12px; color: #ccc;}

#mNavi #mgnb ul li ul li.row > a:before,
#mNavi #mgnb ul li ul li.row > a:after {position: absolute; display: block; background-color: #a7a8aa; content: '';}
#mNavi #mgnb ul li ul li.row > a:before {top: 14px; right: 18px; width: 9px; height: 1px;}
#mNavi #mgnb ul li ul li.row > a:after {top: 10px; right: 22px; width: 1px; height: 9px;}
#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 25px 0 0; letter-spacing:-1px; color:#c9cfd5;}
.footer_link li.point a {color: #cbe7ce;}
.box_footer { position:relative; width:980px; margin:20px auto 0; word-break:keep-all;}
.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:#777; padding:3px 0 0;}

/* 諛⑸Ц�옄�닔 */
.visitant {position:absolute; top:0; right:0;  width:23%; height:40px; font-family:'NotoM';background: #009b8b; 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: #cbe7ce;}
.visitant ul li.total strong {padding:5px 0;color: #cbe7ce;}

.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: 1024px){
	.box_mot_1 { overflow:hidden; width:100%}
	.box_mot_1.on { position:fixed; top:0}
	.box_mot_1.on2 { position:relative; top:92px}

	#wrap { min-width:280px; overflow:visible; height:100%}
	#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;}


	/* �긽�떒(濡쒓퀬 諛� 硫붾돱) */
	#header {height: 68px; border-bottom: none;}
	#header:before {display: none;}
	#web {display: none;}
	#tablet,
	.tabletlogo {display: block;}

	/*留⑥쐞濡쒓�湲�*/
	.btn_top{bottom:2.5%; right:2.5%;}

	/* 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;}

	/* �쟾泥� 媛�濡� �뒪�겕濡� �뀒�씠釉�  */
	#all-scroll{display: block; position:relative; overflow:hidden; overflow-x: auto; margin:0}
	#all-scroll .page{white-space: nowrap; border-bottom:0; border-right:0}

	/* 諛⑸Ц�옄�닔 */
	.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 { margin:25px 55px 25px 15px; }
	#mSearch .btnSearchClose { right:15px; }


}

@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;}


}