@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: 1100px;}
.container::after{display: block; content: ""; clear: both;}

/* 상단(로고 및 메뉴) */
#header {position: relative;margin: 0 auto;height: 140px;z-index:10;background: url('/tempSample/20006/images/common/header_bg.png') repeat-x bottom;}
#header h1 {position: absolute; top: 26px; 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:1px solid #5f61ce; overflow: hidden;}
.box_search_0 input {width: 160px; padding: 0 10px 0 10px; height: 38px; line-height: 38px; font-size:12px; border: none; background: none; color:#555;}
.box_search_0 button {position: absolute; top: 0; right: -1px; padding: 0; width: 38px; height: 38px; background: #5f61ce url('/tempSample/20006/images/common/btn_search_w.png') no-repeat center; border: none;} /*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: 64px; 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 #cdc5e2; }
#gnb .lstDep1 > li:last-child:after { content:""; position:absolute; right:0; top:60px; width:1px; height:100vh; background:#cdc5e2; }
#gnb .lstDep1 > li > a {display: block; width:100%; font-size:18px; height:60px; color: #fff; font-weight:600; letter-spacing: -1px; 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:#e4e0ff; border-left:1px solid #cdc5e2; border-bottom:1px solid #cdc5e2; 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:#f8f8ff;}
#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:#5f61ce; 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 #ccc;z-index: 10;}
#tabletLogo {padding: 18px 0 0; text-align: center;}
#menuOpen {position: fixed;top:11px;left:10px;z-index: 11;width: 45px;height: 45px;border-radius:50%;background: #8284e5;}
#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:50%; background: #439dea;}
#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: #8284e5;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: #439dea;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/20006/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/20006/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:5; 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: 1100px;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:last-child a{padding-right:0;}
.footer_link li.point a { color:#bcbaed; }
.box_footer {position:relative;width: 1100px;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:#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){
	.footer_link ul, .box_footer{
    width: 92%;}
	.footer_link li a{padding:0 17px 0 0;}
}
@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 {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;}


}