@import url("reset.css");

/* Layout */
#wrap{width:100%;background:#eee}
#header{width:100%;background:#0d3575; height: 135px; }
#container{width: 90%; margin: 0 auto; background-color: #fff}
#CN{float:left;width:90%;}
#SN{width:8.33%;}
#CT{float: left;}
#CTC{width:100%;float: left; padding: 35px 10px 30px 30px}
#footer{width: 90%;}
#aside{position: fixed; right: 0; top:310px; width: 70px;}

/* You must delete below style */
#header .inner {position: relative; height: 40px; border-bottom: 1px solid #3d5d91; margin: 0 auto;*zoom: 1;}
/* #container div,#content{background:#fff} */
#footer{background:#ddd}

/* top menu */
.top-link {width:90%;font-size: 11px; color: #fff; margin:0 auto;}
.top-link ul{float: right; padding: 0}
.top-link li{float: left}
.top-link li a{color: #fff;display: block;text-align: center;padding: 11px 16px;text-decoration: none;}
.top-link li a:hover{color: #21afbf;background-color: #0d3575;}

/* Top Navigation */
.TN {width:90%;height: 75px; margin: 0 auto;background-color: #0d3575}
.TN .logo{float: left;width: 250px; margin-top: 20px; margin-left: 10px;}
.TN ul {float: right; margin: 20px; padding: 0;font-size: 18px}
.TN li {float: left}
.TN .TNI {display: none}
	li a, .TNDB {display: block;color: #fff;text-align: center;padding: 14px 20px; text-decoration: none}
	li a:hover, .TND:hover .TNDB {background-color: #21afbf;color: #fff; opacity: 0.8}
	li.TND {display: block}
.TNDC {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1}
.TNDC a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}
.TNDC a:hover {background-color: #088da5}
.TND:hover .TNDC {display: block}
* {box-sizing: border-box}

/* GNB Mobile */
.hamburger {display:none; position:relative; float:right; width:30px; height:30px; margin-top:-8px; text-indent:999999px; background:url('../images/btn_hamburger.png') 0 0 no-repeat; overflow:hidden;}
.hamburger.active {background-position:0 -30px;}
.mobile-gnb-panel{position:absolute; top:135px; right:0; width:40%; max-width:475px; height:calc(100% - 135px); background:#21afbf; visibility: hidden;overflow-y:auto; z-index:999;}
.mobile-gnb > ul.accordion > li > a.toggle {position:relative; display:block;padding: 7px; background:#1b8ca6; border-bottom:1px solid rgba(255,255,255,.1); font-size:16px; color:#fff; line-height:40px;}
.mobile-gnb > ul.accordion > li > a.toggle .icon {position:absolute; top:50%; right:20px; width:24px; height:24px; margin:-12px 0; background:url('../images/icon_accordian.png') 0 0 no-repeat;}
.mobile-gnb > ul.accordion > li > a.toggle.on .icon {background-position:0 -24px;}
.mobile-gnb > ul.accordion .innerm {/*display:none;*/ background:#fff; overflow:hidden;}
.mobile-gnb > ul.accordion .innerm a {position:relative; display:block; padding:10px; background:#fff; border-bottom:1px solid #ccc; color:#333;}
.mobile-gnb > ul.accordion .innerm a.toggle.on {border-color:transparent; color:#0057a4;}
.mobile-gnb > ul.accordion .innemr a.toggle .icon {position:absolute; top:50%; right:20px; width:24px; height:24px; margin:-12px 0; background:url('../images/icon_accordian.png') 0 -48px no-repeat;}
.mobile-gnb > ul.accordion .innerm a.toggle.on .icon {background-position:0 -72px;}
.mobile-gnb > ul.accordion .sub-inner {padding:0 0 15px 15px;}
.mobile-gnb > ul.accordion .sub-inner.show {border-bottom:1px solid #ccc;}
.mobile-gnb > ul.accordion .sub-inner a {padding:5px; border:none; color:#666;}
.mobile-gnb > ul.accordion .sub-inner a:before {display:inline-block; margin-right:5px; content:'-';}
.mobile-util-wrap {margin:5px 0; font-size:0; text-align:center;}
.mobile-util-wrap li {display:inline-block; /*margin:0 8px;*/}
.mobile-util-wrap li a {display:block; font-size:12px; color:#fff; line-height:40px;padding: 0 5px}
.mobile-util-wrap li .icon {display:inline-block; height:40px; margin-top:-5px;}
.mobile-util-wrap li .icon.login {margin-right:5px;}
.mobile-util-wrap li .icon.login:before, .mobile-util-wrap li .icon.vet:after {display:none;}
.mobile-util-wrap li .icon.med2 {margin-right:5px; background-position:0 -160px;}
.dimd-gnb-panel {display:none; position:fixed; top:70px; left:0; width:100%; height:calc(100% - 70px); background:#000; opacity:.7; filter:alpha(opacity=70); z-index:998;}  

/* left navigation bar */
.CN{}
.CN::after {content: "";clear: both;display: block}
[class*="col-"] {float: left;padding: 0}
[class*="col-"] .CTL {padding: 0;text-align: center}
[class*="col-"] .CTC {padding: 5px 30px}
[class*="col-"] .CTL button {background-color: #08a56f;color: white;padding: 14px 20px;margin: 0px;border: none;cursor: pointer;width: 200px}
.menu ul {list-style-type: none;margin: 0;padding: 0}
.menu li {padding: 0px;background-color: #21afbf;color: #ffffff;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)}
.menu li:hover {background-color: #08a56f;opacity: 0.8}
.menu li button {background-color: #1b8ca6;border-top: 1px solid #20a8ba;border-bottom: 1px solid #076c83 }
.menu li .dh3 {display: block}
.menu li .dh3 a {display: block;color: #fff;text-align: center;padding: 14px 20px;border-top: 1px solid #0ecbe0;border-bottom: 1px solid #088e9d;text-decoration: none}
.menu li .dh3 a:hover{background-color: #99b4df;color: white;border-top: 1px solid #20a8ba;border-bottom: 1px solid #076c83;opacity: 0.8}

/* Contents */
.CT{width: 100%}
.paging{width: 100%; height: 48px;border-bottom: 1px solid #b5b5b5;}
.paging ul{}
.paging li{float:left; padding: 0 20px; line-height: 48px; border-right:1px solid #b5b5b5;}

/* right follow menu */
.aside01 {position: fixed; right: 0; top:310px; width: 70px; height: 70px; background-color: #21afbf;padding: 15px;color: #ffffff;text-align: center;font-size: 14px;z-index: 101;cursor: pointer}
.aside01.on {width: 60px;background-color: #fff;background-image: url("../images/right_btn_close.png");}
.aside01.on img {opacity: 0;filter: alpha(opacity=0);}
.aside01 img {position: absolute;right: 5px;top: 50%;margin-top: -28px;-webkit-transition: opacity 0.2s ease;-o-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -ms-transition: opacity 0.2s ease;-kthtml-transition: opacity 0.2s ease;transition: opacity 0.2s ease;}
.aside01-panel {position: absolute;width: 330px;height: 528px; padding-left: 30px;left: 100%;top:135px;z-index: 999;background-color: #99b4df;}

.aside02 {position: fixed; right: 0; top:382px;width: 70px; height: 70px;background-color: #99b4df;padding: 15px;color: #ffffff;text-align: center;font-size: 14px;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)}

.footer {background-color: #1b1b1b; color: #ffffff; text-align: center; font-size: 12px; padding: 15px}

/* For desktop: */
.col-1 {width: 8.33%}
.col-2 {width: 16.66%}
.col-3 {width: 25%}
.col-4 {width: 33.33%}
.col-5 {width: 41.66%}
.col-6 {width: 50%}
.col-7 {width: 58.33%}
.col-8 {width: 66.66%}
.col-9 {width: 75%}
.col-10 {width: 83.33%}
.col-11 {width: 91.66%}
.col-12 {width: 100%;margin: 0 !important}
.col-13 {width: 0%}
.col-130{width:130px}

.AD {display: none}
[class*="sna-"] {float: left;padding: 0px}
.SNA {display: none}
.NO {display: block}
button {background-color: #08a56f;color: white;padding: 14px 20px;margin: 0px;border: none;cursor: pointer;width: 100%}
button .a:hover {background-color: #ffffff}
[class*="col-"] input[type=text], input[type=password] {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;box-sizing: border-box;text-align: center}
[class*="col-"] input[type=submit] {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;background-color: #4ebdae;border: 0px solid #4ebdae;box-sizing: border-box;font-weight: bold;color: white}
[class*="col-"] .CTC button {width: 100%;}

/* Button */
.btn_Group {clear: both;padding: 60px 0}
.btn_login {padding: 14px 20px;margin: 20px auto 0;font-size: 14px;color: #FFFFFF;border: none;cursor: pointer;width: 100%;background-color: #005cac}
.btn {margin: 0 2px;padding-left: 20px;padding-right: 20px;height: 30px;font-size: 14px;line-height: 14px;color: #ffffff;cursor: pointer;border:none;background-color: transparent}

/* 버튼 공통 */
.btn_Close {float: right;background-color: #666666}
.btn_Gray {background-color: #626262}

/* Search Form */
.moaSearchDiv{clear:both; height:50px; padding:9px 6px; margin:0 0 10px 0; border-bottom:dotted 1px #a3a3a3}

.moaSearchForm{float:left; height:32px}

.moacsForm{width:50%; height:30px; font-weight:bold; font-size:12px; color:#7b7979; vertical-align:middle; border:solid 1px #706e6e}

.moaForm{height:30px; font-weight:bold; font-size:12px; color:#7b7979; vertical-align:middle; border:solid 1px #706e6e}

.moaDate{width:120px; height:30px; font-weight:bold; font-size:12px; color:#7b7979; vertical-align:middle; border:solid 1px #706e6e}

.moaResult{padding:0 4px 10px}

.moaDiv{padding:10px}

.divMoa{padding:4px 6px 6px}

.moaIcon{ padding:0 0 0 23px; background:url(../images/sub/icon_pp2.gif) no-repeat 0.3em 0.1em; }
.moaRtitle{ font-size:15px; font-weight:bold; color:#000000; padding:0 0 6px 0; text-align:left; }
.moaLoginDiv{ clear:both; height:32px; padding:9px 3px 9px 3px; margin:0 0 9px 0; border-bottom:dotted 1px #a3a3a3; }
.moaLoginForm{ float:left; width:25%; height:28px; padding:0 1% 0 0;  }
.moaLcsForm{ float:left; width:40%; height:28px; font-weight:bold; font-size:18px; color:#7b7979; vertical-align:middle;  }
.moaLoginErr{ clear:both; height:32px; font-size:15px; font-weight:bold; color:#ff0000; padding:0 0 6px 0; vertical-align:middle; text-align:center; }

/* table type A */
.table {width: 100%;text-align: center;border-top: 1px solid #c3c1c1;}
.table thead th, .table thead td {padding: 12px 0 11px;background-color: #eee;border-left: 1px solid #4a4a4a;border-top: 2px solid #4a4a4a;text-align: center;font: bold 1.2em Noto Sans KR;color: #636363;text-shadow: 1px 1px 0px #fff;letter-spacing: 0.05em}
.table tbody th {padding: 9px;background-color: #eee;border-top: 2px solid #4a4a4a;border-right: 1px solid #4a4a4a;text-align: center;font: bold 1.2em Noto Sans KR;color: #636363;text-shadow: 1px 1px 0px #fff;letter-spacing: 0.05em}
.table tbody th.end {padding: 9px;background-color: #eee;border-top: 2px solid #4a4a4a;border-right: 1px solid #4a4a4a;border-bottom: 1px solid #4a4a4a;text-align: center;font: bold 1.2em Noto Sans KR;color: #636363;letter-spacing: 0.05em}
.table thead th {border-bottom: 1px solid #4a4a4a;}
.table tbody td {color: #777;font: 12px Noto Sans KR;border-left: 1px solid #d6d6d6;border-bottom: 1px solid #d6d6d6;padding: 8px 0;}
.table > thead > tr:first-child > th:first-child {border-left: none;}
.table > tbody > tr:first-child > td:first-child {border-left: none;}
.table tr:hover {background-color: #f9f9f9;}
.combo {width: 100%; border: 0px solid #f1f1f1;}

/* UI Object */
.paginate_regular{padding:15px 0;text-align:center;line-height:normal}
.paginate_regular a,
.paginate_regular strong{display:inline-block;position:relative;margin:0 -2px;padding:2px 8px;font-weight:bold;font-size:12px;font-family:Tahoma, Sans-serif;color:#333;line-height:normal;text-decoration:none;vertical-align:middle}
.paginate_regular a:hover,
.paginate_regular a:active,
.paginate_regular a:focus{background-color:#f8f8f8}
.paginate_regular strong{color:#21afbf}
.paginate_regular .direction{font-weight:normal;color:#767676;white-space:nowrap}
.paginate_regular .direction span{font-weight:bold;font-size:14px}
.paginate_regular .direction:hover,
.paginate_regular .direction:active,
.paginate_regular .direction:focus{background-color:#fff;color:#333}

/* footer */
.footer_comm {width:100%;padding:10px 0;font-size:11px;text-align:center;clear:both;color:#d2d2d2}
.footer_comm .link_info {color:#fff;letter-spacing:-1px}
.footer_comm .link_daum {color:#7c7c7c;letter-spacing:0}
.footer_comm .wrap_link_news {padding-top:3px}
.footer_comm .txt_info {color:#666;letter-spacing:-1px}
.footer_comm .txt_copyright {padding-top:13px;font-style:normal;color:#7c7c7c}
.footer_comm .desc_copyright {color:#7c7c7c;letter-spacing:-1px}

/* 반응형 */
@media screen and (max-width: 800px) {
[class*="col-"] {width: 100%}
#CTC{width:100%;float: left; padding: 35px 10px 30px 10px}
.TN .TND {display: none;width: 100%}
.TN .TNI {float: right;display: block}
.CN .menu {display: none}
.CN .RS {display: block}
span.pw {display: block;float: none}
.aside01{display: none}
.inner{display: none}
.top-link{display: none}
#header{width:100%;background:#0d3575; height: 95px; }
.mobile-gnb-panel {position:absolute; top:95px; right:0; width:40%; max-width:475px; height:calc(100% - 95px); background:#21afbf; overflow-y:auto; z-index:999;}
.aside01-panel{display: none}
}
/*
@media only screen and (max-width: 1024px) {
[class*="col-"] {width: 100%;}
}For mobile phones: */

@media (max-width:533px){
	#CTC{width:100%;float: left; padding: 35px 10px 30px 10px}
	#gnb-wrap {height:50px;}
	.gnb-wrap-inner {padding-top:18px;}
	.mobile-gnb-panel {top:95px; height:calc(100% - 95px);}
	.dimd-gnb-panel {top:95px; height:calc(100% - 95px);}
	.gnb-wrap-inner h1 a {width:80%;}
	.mobile-gnb > ul.accordion > li > a.toggle {padding:10px; font-size:18px;}
	.mobile-gnb > ul.accordion > li > a.toggle .icon {width:16px; height:16px; margin:-8px 0; background-size:16px 64px;}
	.mobile-gnb > ul.accordion > li > a.toggle.on .icon {background-position:0 -16px;}
	.mobile-gnb > ul.accordion .inner a {padding:10px;}
	.mobile-gnb > ul.accordion .inner a.toggle .icon {width:16px; height:16px; margin:-8px 0; background-position:0 -32px; background-size:16px 64px;}
	.mobile-gnb > ul.accordion .inner a.toggle.on .icon {background-position:0 -48px;}
	.mobile-gnb > ul.accordion .sub-inner a {padding:5px;}
	.mobile-util-wrap li {margin:0 5px;}
	.mobile-util-wrap li a {line-height:30px;}
	.mobile-util-wrap li .icon {width:30px; height:30px; background-size:30px auto;}
	.mobile-util-wrap li .icon.tw {background-position:0 -30px;}
	.mobile-util-wrap li .icon.ut {background-position:0 -60px;}
	.mobile-util-wrap li .icon.vet {background-position:0 -90px;}
	.mobile-util-wrap li .icon.med2 {background-position:0 -120px;}
	.aside01-panel{display: none}

}
@media (max-width:400px){
	#CTC{width:100%;float: left; padding: 35px 10px 30px 10px}
	.mobile-util-wrap li {margin:0 3px;}
	.mobile-util-wrap li a {line-height:24px;}
	.mobile-util-wrap li .icon {width:24px; height:24px; background-size:24px auto;}
	.mobile-util-wrap li .icon.tw {background-position:0 -24px;}
	.mobile-util-wrap li .icon.ut {background-position:0 -48px;}
	.mobile-util-wrap li .icon.vet {background-position:0 -72px;}
	.mobile-util-wrap li .icon.med2 {background-position:0 -96px;}
	.aside01-panel{display: none}
}