@charset "utf-8";

html{width:100%; overflow-x:hidden; }
#wrap{position:relative; }
.container{position:relative; margin:0 auto; width:1200px; }
.container:after{content:""; display:block; clear:both; }

/* 상단(로고 및 메뉴) */
#header{position:relative; margin:0 auto; height:140px; background:#fff; border-bottom:1px solid #e0e0e0; }
#header:before{position:absolute; top:80px; left:0; width:100%; height:1px; background:#e0e0e0; content:""; }
#header h1{position:absolute; top:20px; left:0; }
#header h1 a{display:block; }

.top{ position:relative; width:96%; max-width:1200px; margin:0 auto; height:80px; }/* 210521 */
.top:after{clear:both; display:block; content:""; }
.top_menu{position:absolute; top:20px; right:280px; } /* 210521 */
.top_menu li{float:left; }
.top_menu li a{position:relative; display:block; padding:0 10px; line-height:38px; font-size:.7rem; color:#666; }
.top_menu li a:hover,
.top_menu li a:focus{text-decoration:underline; }
.top_menu li + li a:before{position:absolute; top:18px; left:0; width:4px; height:4px; background:#9ea6af; content:""; border-radius:50%; }

/* 화면 축소,확대 버튼 */ 
.size_set a { float:left; width:22px; height:22px; border:1px solid #000; margin:8px 2px; opacity:0.4; }
.size_set a.minus { background:url('/images/template/10218/common/ico_minus.png') no-repeat center; }
.size_set a.plus { background:url('/images/template/10218/common/ico_plus.png') no-repeat center; }
.size_set a:before { display:none; }
.size_set a:hover,
.size_set a:focus { opacity:1; }

/* 검색 - 웹버전 : 210521 */
.box_search_0{position:absolute; top:20px; right:0; width:265px; height:38px; border:2px solid #554ba0; background:transparent; border-radius:19px; overflow:hidden; } 
.box_search_0 select { position:absolute; left:0; top:0; height:36px; border:none; padding:0 0 0 5px; font-size:12px; }
.box_search_0 input{padding:0 40px 0 100px; width:100%; height:36px; line-height:36px; font-size:.6rem; border:none; }
.box_search_0 button{position:absolute; top:-1px; right:-1px; padding:0; width:38px; height:38px; background:#554ba0 url('/images/template/10218/common/search.png') no-repeat center center; border:none; border-radius:50%; }
.box_search_0 input::-webkit-input-placeholder{color:#555; }

/* 웹네비게이션 : 210521 */
#webNavi { width:100%; max-width: 1200px; margin:0 auto; height:57px; }
#webNavi #gnb {display:flex;align-items:center;justify-content: space-between;width:100%;height:100%;} 
#webNavi #gnb > li {position: relative;display:table-cell;text-align: center;padding: 0 10px;}
#webNavi #gnb > li > a {display: block;  position:relative;  font-weight: 400;  font-size: 1rem;  line-height: 3rem;  color: #333;  letter-spacing: -1px; }
#webNavi #gnb > li > a:hover,
#webNavi #gnb > li > a:focus,
#webNavi #gnb > li.on > a {color: #685fab; }


/* 세로메뉴 */
#webNavi .box {display: none;position: absolute;top: 58px;left: 14%;z-index: 10;margin-left: -70px;padding: 15px;width: 11rem;background: #fff;border: 2px solid #685fab;text-align: center;/* 210521 */}
#webNavi .box li{float:none; margin:0; padding:0; }
#webNavi .box li a{display:block; margin:0; padding:3px; color:#666; line-height:normal; }
#webNavi .box li a:hover, #webNavi li ul.box li a:focus{color:#685fab; text-decoration:underline; }
#webNavi #gnb > li.on .box{display:block; }

/* mobile layout : 210521 */
#tablet{display:none; width:100%; }
#tabletHeader{position:fixed; top:0; left:0; width:100%; height:70px; background:#fff; border-bottom:2px solid #334c82; z-index:10; }
#tabletLogo{padding:17px 0 0; text-align:center; }
#tabletLogo a{display:inline-block; }
#tabletLogo a img{vertical-align:middle; }
#menuOpen {position: fixed; top: 22px; left: 2.5%; z-index: 11; width: 24px; height: 23px;}
#menuOpen a { display:block; overflow:hidden; width:100%; height:100%; }
#menuOpen img { width:100%; height:100%; }

/* mobile 검색영역 : 210521 */
#searchOpen { position: fixed; right: 2.5%; top: 22px; z-index: 11; width: 24px; height: 23px;}
#searchOpen a { display:block; overflow: hidden; width:100%; height:100%; }
#searchOpen img { width:100%; height:100%; }

#mSearch{overflow:hidden; position:fixed; top:70px; left:0; z-index:11; width:100%; height:0; background-color:#334c82; -webkit-transition:.25s ease; -ms-transition:.25s ease; transition:.25s ease; }/* 210521 */
#mSearch .con p{position:relative; margin:0 auto; padding:20px 170px 0 0; width:90%; }
#mSearch .con select { position:absolute; left:0; top:20px; height:39px; border:none; width:120px; }/* 210521 */
#mSearch .con .inputText{width:100%; padding:0 10px 0 130px; height:39px; line-height:39px; background:#fff; border-radius:3px 0 0 3px; border:0; }/* 210521 */
#mSearch .con .btnSearch{position:absolute; top:20px; right:90px; min-width:80px; font-size:.75rem; }
#mSearch .btnSearch,
#mSearch a.btnSearch{display:inline-block; height:39px; color:#fff; background-color:#5b80ce; border:0; border-radius:0 3px 3px 0; line-height:39px; }
#mSearch .btnSearchClose{position:absolute; top:25px; right:5%; width:25px; height:33px; padding:0; color:transparent; background:url('/images/template/10218/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:.25s ease; -webkit-transition:.25s ease; }
#mNavi::before{position:fixed; top:0; left:-80%; width:80%; height:100%; background-color:#30394a; z-index:11; content:""; transition:.25s ease; -webkit-transition:.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('/images/template/10218/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 1rem; height:2.5rem; line-height:2.5rem; text-align:left; font-size:.7rem; 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 1rem; height:2.5rem; line-height:2.5rem; 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:.5rem 0; background-color:#202631; }
#mNavi #mgnb ul li ul li{border-bottom:0; background-color:#202631}
#mNavi #mgnb ul li ul li a{height:2rem; line-height:2rem; font-size:.7rem; }

#mNavi #mgnb ul li ul li ul{display:none; padding:.25rem 0; }
#mNavi #mgnb ul li ul li ul li a{padding:0 0 0 1.5rem; height:1.5rem; line-height:1.5rem; font-size:.6rem; 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 */
#footer{position:relative; padding:.5rem 0 2.5rem; color:#737373; font-weight:200; font-size:.7rem; background:#fff; border-top:1px solid #dbdadf; }
.footer_link{margin:0.5rem 0; }
.footer_link ul{overflow:hidden; }
.footer_link li{float:left; line-height:2; }
.footer_link li a{display:block; padding:0 12px; letter-spacing:-0.025em; background:url('/images/template/10218/common/bar_footer.png') no-repeat left center; }
.footer_link li:first-child a{padding-left:0; background:none; }
.footer_link li a:hover,
.footer_link li a:focus{text-decoration:underline; }
.footer_link li a strong{color:#db2929; font-weight:400; }
#footer address{line-height:2; font-weight:500; }
#footer address span{display:block; }
#footer .copyright{}
#footer .btn_top{display:block; overflow:hidden; position:fixed; right:0; bottom:35px; z-index:100; width:2.6rem; height:2.6rem; }
#footer .btn_top img{width:100%; height:100%; }

/* 방문자수 */
.visitant{position:absolute; top:3rem; right:0; width:23%; height:2rem; background:#554ba0; border-radius:40px; }
.visitant h2{text-indent:-10000em; font-size:0; }
.visitant ul{overflow:hidden; }
.visitant ul li{width:49%; float:left; line-height:2rem; text-align:center; font-size:.65rem; color:#fff; }
.visitant ul li + li{background:url('/images/template/10218/common/bar_visitant.png') no-repeat left center; }
.visitant ul li strong{margin-right:.5rem; }

/* 서브레이아웃 */
#sub_container{position:relative; background:#fff; }
#sub_container:after{content:""; display:block; clear:both; }

.S_visual{position:relative; width:100%; }
.S_visual p img{width:100%; height:auto; vertical-align:middle; }

.sub_content{position:relative; z-index:7; max-width:1200px; margin:0 auto; overflow:hidden; min-height:600px; }

.box_line_map_1 .sp_home,
.box_line_map_1 .span_gt{display:block; overflow:hidden; height:0; font-size:0; line-height:100px; text-indent:-10000px; }

/* 왼쪽메뉴 */
#sideContent2{width:190px; height:100%; overflow:hidden; min-height:1px; float:left; margin-bottom:50px; }
#sideContent2 h1{background:url('/images/template/10218/sub/left_mn_tit.png') no-repeat #5b90ff; text-align:center; height:120px; line-height:120px; border-radius:15px 15px 0 0; font-size:1.75em; font-weight:400; color:#fff; letter-spacing:-1px; margin:35px 0 0; }
.sideNavi{display:block; border:1px solid #d9d9d9; overflow:hidden}
.sideNavi li{border-top:1px solid #d9d9d9; background:#fff; }
.sideNavi li:first-child{border-top:none}
.sideNavi li a{display:block; padding:15px 0 15px 14px; font-size:14px; color:#333; font-weight:400; }
.sideNavi li a:hover,
.sideNavi li a:focus,
.sideNavi li a:active,
.sideNavi li a.on,
.sideNavi li a.lock{color:#5b90ff; background:url('/images/template/10218/sub/bgSideNavi.png') 94% center no-repeat; }
.sideNavi li ul{display:none; padding:12px 0 12px 14px; border-top:1px solid #d9d9d9; background:#f5f5f5; }
.sideNavi li ul li{border:0; margin:0 0 5px 0; background:#f5f5f5; }
.sideNavi li ul li a{padding:1px 0 1px 10px; font-size:13px; background:url('/images/template/10218/sub/bgSideNaviSub.gif') 0 9px no-repeat; }
.sideNavi li ul li a:hover,
.sideNavi li ul li a:focus,
.sideNavi li ul li a:active,
.sideNavi li ul li a.on,
.sideNavi li ul li a.lock{background:url('/images/template/10218/sub/bgSideNaviSub_on.png') 0 7px no-repeat; }

/* 서브페이지 */
#subContent{position:relative; width:calc(100% - 230px); margin:0 0 50px 40px; float:left; }
.subContent_body{position:relative; min-height:600px; }

/* 로케이션 */
#location{position:relative; display:block; overflow:hidden; font-size:12px; vertical-align:middle; padding-top:40px; }
#location img{vertical-align:middle; margin-top:-2px}
#location span,
#location strong{display:inline-block; padding-left:13px; margin-left:7px; background:url('/images/template/10218/sub/bgLocation.gif') no-repeat 0 5px; }
#location span{color:#666; }
#location strong{color:#333; }

.box_line_map{display:none; }

/* 페이지 타이틀 */
#subContent #pageTitle{font-size:30px; letter-spacing:-1px; color:#111; font-weight:400; padding-top:9px; border-bottom:1px solid #ddd; margin-bottom:30px; }
#subContent #pageTxt{margin:8px 0 30px 0; color:#666; font-size:13px; line-height:150%; font-weight:200; }

/* etc :sns*/
.snsBox{position:absolute; top:17px; right:0; text-align:right; }
.snsBox button{display:inline-block; width:26px; height:26px; overflow:hidden; background:url("/images/template/10218/sub/btnSns.gif") no-repeat 0 0; cursor:pointer}
.snsBox button + button{margin-left:5px; }
.snsBox button > span{text-indent:-1000px; font-size:0; line-height:0; }
.snsBox .btnPrint{background-position:0 0; }
.snsBox .btnFbook{background-position:-29px 0; }
.snsBox .btnTwt{background-position:-58px 0; }
.snsBox .btnBlog{background-position:-87px 0; }
.snsBox .btnYtb{background-position:-116px 0; }
.snsBox .btnInstar{background-position:-145px 0; }
.snsBox .btnShare{background-position:-174px 0; }
.snsBox .sns_more{display:none; position:absolute; top:35px; right:0; width:170px; *width:145px; border:1px solid #bbb; border-radius:2px; padding:10px 10px 10px 7px; z-index:30; background-color:#fff; font-size:0; line-height:0; }

/* media query mobile */
@media screen and (max-width:1280px){
	.w_quickArea{display:none; }

	.container{width:95%; margin:auto; }

	.sub_content{width:95%; }
}

@media screen and (max-width:1200px){
	#gnb .lstDep1 > li > a{padding:.6rem 1.5rem; font-size:.9rem; }
}

@media screen and (max-width:1024px){
	/* 상단(로고 및 메뉴) : 210521 */
	#wrap { padding-top:70px;}
	#header{display:none;}  
	#tablet,
	.tabletlogo{display:block; }

	/* footer */
	#footer:before{display:none; }

	/* 방문자수 */
  .visitant{position:relative; top:0; right:0; width:50%; margin-top:.3rem; margin-bottom:.5rem; }

	/*맨위로가기*/
	.btn_top{bottom:2.5%; right:2.5%; }

	/** 서브레이아웃 **/
	#sub_container,
	.sub_content,
	.S_visual{width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	#sub_container{margin-top:0; }
	#sideContent2{display:none; }

	#subContent{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; width:100%; margin:0 0 50px 0; }
	.subContent_body{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; padding:0 2% 0; min-height:auto; }

	.S_visual p{width:100%; }

	#location{display:none; }

	/* 페이지 타이틀 */
	#pageTitle{font-size:27px; padding-top:16px; }
	/* etc :sns*/
	.snsBox{position:absolute; top:21px; right:2%; }

	/* linemap */
	.box_line_map_1 .span_gt,
	.box_line_map_1 .sp_home,
	.box_line_map_2 > a .sp_img{background-image:url("/images/template/10218/common/sp_sub.png"); background-repeat:no-repeat; }
	.box_line_map{display:block; width:100%; position:relative; z-index:80; height:39px; padding:0; margin:0; border-bottom:1px solid #eee; background-color:#f3f3f3; }
	.box_line_map_1{position:relative; width:800px; }
	.box_line_map_1 > p,
	.box_line_map_1 > p > span,
	.box_line_map_1 .box_line_map_2{float:left; margin:0 7px; }
	.box_line_map_1 .box_line_map_2{margin:0; }
	.box_line_map_1 > p{height:39px; font-weight:400; color:#555; }
	.box_line_map_1 > p > span{font-weight:400; }
	.box_line_map_1 .txt{line-height:39px; }
	.box_line_map_1 .sp_home{width:15px; margin:14px 7px 0 13px; padding-top:13px; background-position:0 0; }
	.box_line_map_1 .span_gt{width:9px; margin-top:12px; padding-top:17px; background-position:-40px 0; }
	.box_line_map_2{position:relative; }
	.box_line_map_2.on{width:200px; }
	.box_line_map_2 > a{display:block; float:left; position:relative; padding-right:23px; line-height:39px; font-weight:400; color:#555; }
	.box_line_map_2 > a .sp_img{display:block; position:absolute; top:18px; right:5px; width:9px; height:5px; background-position:-20px 0; }
	.box_line_map_2.on > a .sp_img{background-position:-30px 0; }
	.box_line_map_2.on > a{color:#151515; }
	.box_snb_1{display:none; overflow:hidden; position:absolute; top:35px; left:-5px; z-index:1; max-height:0; }
	.box_snb_1 ul{border-top:1px solid #d5d5d5; border-left:1px solid #d5d5d5; border-right:1px solid #d5d5d5; }
	.box_snb_1 a{display:block; font-size:12px; padding:0 20px; border-bottom:1px solid #d5d5d5; background-color:#fff; color:#555; line-height:39px; white-space:nowrap; }
	.box_snb_1 a:hover,
	.box_snb_1 li.on a{background-color:#5b90ff; color:#fff; text-decoration:underline; }

	/* 전체 가로 스크롤 테이블  */
	#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}
}

@media (max-width:690px){
  /** 서브레이아웃 **/
	/* 페이지 타이틀 */
	#pageTitle{font-size:24px; padding-top:18px; }
}

@media (max-width:560px){
	/* mobile 검색영역 */
	#mSearch .con p{padding-right:120px; }
	#mSearch .con .btnSearch{right:50px; min-width:70px; }
}
@media screen and (max-width:480px){

	/* 방문자수 */
  .visitant{width:70%; }
  
  /* 모바일검색 : 210521 */ 
	#mSearch .con p { padding-right:80px; }
	#mSearch .con select { width:90px; font-size:12px; }
	#mSearch .con .inputText { padding:0 0 0 90px; font-size:13px; }
	#mSearch .con .btnSearch { min-width:40px; right:40px;  }

	/** 서브레이아웃 **/
	/* 페이지 타이틀 */
	#pageTitle{font-size:20px}

	/* etc :sns*/
	.snsBox{top:17px}

	/* linemap */
	.box_line_map_2 > a{padding-right:0; }
	.box_line_map_2 > a .sp_img,
	.box_line_map_1 .sp_home,
	.box_line_map_1 .sp_home + .span_gt{display:none}
	.box_line_map_1 .span_gt{overflow:hidden; position:relative; width:23px; height:39px; margin-top:0; padding-top:0; background-image:none; /* Old browsers */ background:#f3f3f3; /* FF3.6+ */ background:-moz-linear-gradient(left,  #bababa 0%, #f3f3f3 100%); /* Chrome,Safari4+ */ background:-webkit-gradient(linear, left top, right top, color-stop(0%,#bababa), color-stop(100%,#f3f3f3)); /* Chrome10+,Safari5.1+ */  background:-webkit-linear-gradient(left, #bababa 0%, #f3f3f3 100%); /* Opera 11.10+ */ background:-o-linear-gradient(left,  #bababa 0%,#f3f3f3 100%); /* IE10+ */ background:-ms-linear-gradient(left, #bababa 0%, #f3f3f3 100%); /* W3C */ background:linear-gradient(to right, #bababa 0%, #f3f3f3 100%); /* IE6-9 */filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#f3f3f3', GradientType=1 ); }
	.box_line_map_1 .span_gt:before{display:block; position:absolute; top:20px; left:-40px; width:40px; height:40px; border:1px solid #fff; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; background-color:#f3f3f3; content:''; }
	.box_line_map_1 > p > span,
	.box_line_map_1 > p{margin:0 3px; }
	.box_line_map_1 > p:first-child{padding-left:10px; }
}

@media (max-width:380px){
	/* mobile navi */
	#mNavi #mgnb .snb li a{padding:0 .75rem; }

	/* footer */
	.box_footer .box_info span:before{content:''; display:block; }

	/** 서브레이아웃 **/
	/* 페이지 타이틀 */
	#pageTxt{font-size:12px; margin:6px 0 20px 0; }
}