@import url("reset.css");
@import url("main.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%;background:#ddd}
#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;}

/* 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}
.TN .TNI	li a, .TNDB {display: block;color: #fff;text-align: center;padding: 15px 20px; text-decoration: none}/* 20170628 Add */
.TN .TNI	li a:hover, .TND:hover .TNDB {background-color: #21afbf;color: #fff; opacity: 0.8}/* 20170628 Add */
.TN .TNI	li.TND {display: block}/* 20170628 Add */
.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 */
.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}

/* Location */
.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;}
.paging li a{float:left; padding: 0 20px; line-height: 48px;color:#000}

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

/* 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:99%; height:30px; font-weight:bold; font-size:16px; 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;}

/* Table Page Number */
.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}

/* Login */
.login_wrap {position: relative;overflow: hidden;width: 700px;height: 440px;margin: 20px auto 0;background-color: #ffffff;-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px;-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px;box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px;}
.login_wrap .half {float: left;width: 50%;height: 100%;padding: 38px 40px 10px;}
.login_wrap .half.bg {background-image: url("../images/login_bg.jpg");background-size: 400px;background-repeat: no-repeat;}
.login_wrap h1 {font-size: 18px;font-weight: 700;text-align: center;text-indent: 6px;letter-spacing: 7px;text-transform: uppercase;color: #263238;}
.login_wrap .tabs {width: 100%;margin-bottom: 29px;border-bottom: 1px solid #d9d9d9;}
.login_wrap .tabs .tab {display: inline-block;margin-bottom: -1px;padding: 20px 15px 10px;cursor: pointer;letter-spacing: 0;border-bottom: 1px solid #d9d9d9;-moz-user-select: -moz-none;-ms-user-select: none;-webkit-user-select: none;user-select: none;transition: all 0.1s ease-in-out;}
.login_wrap .tabs .tab a {font-size: 11px;text-decoration: none;text-transform: uppercase;color: #d9d9d9;transition: all 0.1s ease-in-out;}
.login_wrap .tabs .tab.active a, body .login_wrap .tabs .tab:hover a {color: #263238;}
.login_wrap .tabs .tab.active {border-bottom: 1px solid #263238;}
.login_wrap .login form {position: relative;height: 240px;}
.login_wrap .login label:first-of-type, body .login_wrap .login input:first-of-type, body .login_wrap .login .more:first-of-type {
  -moz-animation: slideIn 0.4s cubic-bezier(0.37, 0.82, 0.2, 1);
  -webkit-animation: slideIn 0.4s cubic-bezier(0.37, 0.82, 0.2, 1);
  animation: slideIn 0.4s cubic-bezier(0.37, 0.82, 0.2, 1);
}
.login_wrap .login label:nth-of-type(2), body .login_wrap .login input:nth-of-type(2), body .login_wrap .login .more:nth-of-type(2) {
  -moz-animation: slideIn 0.5s cubic-bezier(0.37, 0.82, 0.2, 1);
  -webkit-animation: slideIn 0.5s cubic-bezier(0.37, 0.82, 0.2, 1);
  animation: slideIn 0.5s cubic-bezier(0.37, 0.82, 0.2, 1);
}
.login_wrap .login label:nth-of-type(3), body .login_wrap .login input:nth-of-type(3), body .login_wrap .login .more:nth-of-type(3) {
  -moz-animation: slideIn 0.6s cubic-bezier(0.37, 0.82, 0.2, 1);
  -webkit-animation: slideIn 0.6s cubic-bezier(0.37, 0.82, 0.2, 1);
  animation: slideIn 0.6s cubic-bezier(0.37, 0.82, 0.2, 1);
}
.login_wrap .login label {
  font-size: 12px;
  color: #263238;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.login_wrap .login label:not([for='remember']) {display: none;}
.login_wrap .login input.inpt {font-size: 12px;display: block;width: 100%;height: 42px;margin-bottom: 12px;padding: 16px 13px;color: #999999;border: 1px solid #d9d9d9;background: transparent;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;text-align: left;}
.login_wrap .login input.inpt::-webkit-input-placeholder {font-size: 14px;color: #999999;font-family: 'Lato', sans-serif;}
.login_wrap .login input.inpt:-moz-placeholder {font-size: 14px;color: #999999;font-family: 'Lato', sans-serif;}
.login_wrap .login input.inpt::-moz-placeholder {font-size: 14px;color: #999999;font-family: 'Lato', sans-serif;}
.login_wrap .login input.inpt:-ms-input-placeholder {font-size: 14px;color: #999999;font-family: 'Lato', sans-serif;}
.login_wrap .login input.inpt:focus {border-color: #999999;}
.login_wrap .login input.submit {font-size: 12px;display: block;width: 100%;height: 42px;cursor: pointer;vertical-align: middle;letter-spacing: 2px;text-transform: uppercase;color: #263238;border: 1px solid #263238;background: transparent;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;}
.login_wrap .login input.submit:hover {background-color: #263238;color: #ffffff;-moz-transition: all 0.2s;-o-transition: all 0.2s;-webkit-transition: all 0.2s;transition: all 0.2s;}
.login_wrap .login input:focus {outline: none;}
.login_wrap .login .checkbox {margin-top: 4px;overflow: hidden;clip: rect(0 0 0 0);width: 10px;height: 10px;margin: 17px -1px;padding: 0;border: 0;}
.login_wrap .login .checkbox + label {vertical-align: middle;display: inline-block;width: 50%;}
.login_wrap .login .checkbox + label:before {login: "\A";color: #999999;font-family: Verdana;font-weight: bold;font-size: 8px;line-height: 10px;text-align: center;display: inline-block;vertical-align: middle;position: relative;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;background: transparent;border: 1px solid #d9d9d9;width: 11px;height: 11px;margin: -2px 8px 0 0;}
.login_wrap .login .checkbox:checked + label:before {login: "✓";}
.login_wrap .login .submit-wrap {position: absolute;bottom: 0;width: 100%;}
.login_wrap .login .submit-wrap a {font-size: 12px;display: block;margin-top: 20px;text-align: center;text-decoration: none;color: #999999;}
.login_wrap .login .submit-wrap a:hover {text-decoration: underline;}
.login_wrap .login .signup-cont {display: none;}

@keyframes slideIn {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    margin-left: -320px;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    margin-left: 0px;
  }
}
@-webkit-keyframes slideIn {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    margin-left: -320px;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    margin-left: 0px;
  }
}
.credits {display: block;position: absolute;right: 0;bottom: 0;color: #999999;font-size: 14px;margin: 0 10px 10px 0;}
.credits a {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity: 0.8;color: inherit;font-weight: 700;text-decoration: none;}

/* footer */
.footer {position: relative;float: left;width: 100%;background-color: #1b1b1b; color: #ffffff; text-align: center; font-size: 12px; padding: 15px} /* 20170628 Add */
.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}
}