@charset "utf-8";
/*-------------------------------------------------
Basic Style Sheet
Version : 1.0
Author : LODEV. Lee hyun ju
Create date : 2021. 01. 19.
-------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
/*@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/fonts/slick.eot?");*/

/**/
html{font-size:16px;line-height:1.5}
body{font-family:"Source Sans Pro",sans-serif;overflow-y:scroll; color:#333}
html,body {padding:0; margin:0; height:100%}
a,button{color:#999}
button {border-radius: 0;}
a, button {transition: .3s color,.3s background-color,.3s border-color,.3s opacity; color: #333; background-color: transparent;}
a {color: #464646; text-decoration: none;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button, select {text-transform: none;}
button {_overflow: visible; border:none}
button:focus {_outline:none; padding:0}
button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0;}
*, *:after, *:before {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-break: keep-all;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased;
}
* button {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    _cursor: hand;
    text-decoration: none;
    overflow: visible;

    font-weight: 300;
    white-space: nowrap;
}
input::-webkit-input-placeholder {color: #999;  opacity: 1 !important; /* for chrome */	letter-spacing:-0.2pt;}
input:-moz-placeholder { /* Firefox 18- */    color: #999;}
input::-moz-placeholder {  /* Firefox 19+ */    color: #999;}
input:-ms-input-placeholder { /* Internet Explorer 10+ */   color: #999;}
input{appearance: none;-webkit-appearance: none;-webkit-border-radius: 0;}
select{
-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;
background: url('/z00_images/select_down.gif') no-repeat 95% 50% #fff; 
background-size:8px 8px;
-webkit-border-radius: 0;
}
select::-ms-expand{ display:none;}




/* Table Style */
table  		{border-collapse:collapse;}
caption {text-indent: -10000px; height: 0;}

/* From Style */
textarea	{border:1px solid #d3d0c9; padding:10px;}
textarea:focus	{border:1px solid #245396}
select:focus	{border:1px solid #245396}
select option:focus	{border:1px solid #245396}
input:focus		{border:1px solid #245396}

*, *:before, *:after {box-sizing: border-box;;}
::selection {background: rgba(51,51,51,.99) !important; color: #fff !important;}
ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none;}
p {padding:0; margin:0}
h1, h2, h3, h4, h5 {padding:0; margin:0}
strong {font-weight:600}


/* Font Class Style */
.b		{font-weight:bold;}
.u		{text-decoration:underline}

a		{selector-dummy: expression(this.hideFocus=true);} /* 일반 링크포커스 감추기 */
a,img {selector-dummy: expression(this.hideFocus=true);} /* 이미지맵 링크포커스 감추기 */


/* float */
.overflow {overflow:hidden;}
.f_left {float:left;}
.f_right {float:right;}
.f_center {text-align:center;}
.clear	{clear:both;}
.overflow {overflow:hidden;}

/* skip */
#accessibility {position: relative; width: 100%; margin: 0 auto; font-size: 1.3rem; z-index: 200;}
#accessibility dt {width: 100%; height: 0; font-size:  0; line-height: 0;}
#accessibility a {display:block; position: absolute; top: -10000px; left: 0; width: 100%; height: 0; text-align:center; font-size: 1rem;z-index: 200;}
#accessibility a:hover, #accessibility a:focus, #accessibility a:active{position: absolute; top: 0; padding: 10px 0 25px;background: #1d60a7;color: #fff; z-index: 200;}
.skip {display: block; width: 100%; height: 1px; margin-top: -1px; color: transparent; font-size: .5rem; overflow: hidden;}

#wrap {position:relative; _height:100% }

/*head*/
#head {background:#fff; width:100%; position:fixed; border-bottoM: 1px solid #ccc; height:80px; z-index:999}
#head .header {width:1320px; margin:0 auto; padding:20px 0; position:relative;}
#head .header h1 {left:0; top:20px; position:absolute; }
#head .header h1 img {width:250px}
#head .header .menu {position: absolute; width: 40px; height: 40px;  right:0; transition-duration: 0.5s; padding:0}
#head .header .menu .icon {transition-duration: 0.5s; position: absolute;height: 2px; width: 22px;top:20px; background-color: #666666; font-size:0; right:8px}
#head .header .menu .icon:before {transition-duration: 0.5s; position: absolute; width: 22px; height: 2px; background-color: #666666; content: ""; top: -5px;right:0}
#head .header .menu .icon::after {transition-duration: 0.5s; position: absolute; width: 22px; height: 2px; background-color: #666666; content: ""; top: 5px;right:0}
#head .header .menu.open .icon {transition-duration: 0.5s; background: transparent;}
#head .header .menu.open .icon:before {transform: rotateZ(45deg) scaleX(0.9) translate(3.5px, 3.5px);}
#head .header .menu.open .icon:after {transform: rotateZ(-45deg) scaleX(0.9) translate(4px, -4px);}
#head .menu_open {overflow:hidden; transition: .5s all; top:80px; position:absolute; width:100%; height:0; z-index:99}
#head .menu_open> .inner {background:#fff;  width:1320px; margin:20px auto 0; visibility: hidden;}
#head .menu_open> .inner > .gnb {margin-left:315px; }
#head .menu_open> .inner > .gnb li {float:left; width:25%; text-align:left; padding-right:3%}
#head .menu_open> .inner > .gnb li  h2 a {font-size:1.4rem; color:#3bbcce; font-weight:400}
#head .menu_open> .inner > .gnb li > ul {width:100%;}
#head .menu_open> .inner > .gnb li > ul > li {font-size:1rem; display:block; width:100%; font-weight:500; padding:8px 0}
#head .menu_open> .inner > .gnb li > ul > li a {display:block}
#head .menu_open> .inner > .gnb li > ul > li a:hover, #head .menu_open> .inner > .gnb li > ul > li.on a {color:#3bbcce}
#head .menu_open> .inner > .gnb li > ul > li.line {line-height:1.2}
#head .menu_open.active {height:430px;transition: all .5s; box-shadow: 0 1px 4px rgba(0,0,0,.2); background:#fff}
#head .menu_open.active > .inner  {visibility:visible}
#head .header .lan {position:absolute; right:-55px; border-left:1px solid #000; padding-left:15px; line-height:1; font-weight:600; toP:32px;}
#head .header .lan.open {background:url('../z00_images/up_icon.png') 53px center no-repeat; padding-right:20px}
.lan_view {background:#fff; width:70px; position:absolute; right:-90px; top:79px; overflow:hidden;transition: all .2s; height:0}
.lan_view li {display:block; line-height:1.5; font-weight:600; border-bottom:1px dashed #ccc}
.lan_view li:last-child {border:none}
.lan_view.open {transition: all .2s; height:50px; padding:10px; border:1px solid #ccc; }

/*footer */
#footer {width:100%; background:#474a4a; position:absolute; z-index:9; line-height:1 }
#footer .footerarea {margin:0 auto; width:1320px; font-size:0.8rem; padding:40px 0 40px; overflow:hidden;}
#footer .footerarea .logo {display:inline-block;  vertical-align:top;}
#footer .footerarea .logo img {width:210px}
#footer .footerarea .add {display:inline-block; padding-left:70px; color:#b2b2b2}
#footer .footerarea .sns {float:right;}
#footer .footerarea .sns a {padding-left:20px;}
#footer .footerarea .sns a img {width:25px}
#footer .footerarea .lang {display:inline-block; width:220px; border:1px solid #ccc; padding:10px;  margin-left:180px;}
.menu_bg {position: absolute; left: 0; top: 0; z-index: 3; background-color: #000; display: none; width: 100%; height: 100%; opacity: 0.5; transition: .3s opacity}
.menu_bg.active { display:block}

/*top_btn*/
#top_btn {width: 52px; height: 52px; font-size: 0.9rem; position: fixed; bottom: 50px; right: 10px; display: none; z-index:99; background:#3bbcce; border-radius: 50px; color: #fff;}


/*여백*/
.pl10 {padding-left:10px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}
.pl40 {padding-left:40px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}

/*page*/
.page_area {text-align:center; margin-top:50px;}
.page_area li {display:inline-block; margin:0 5px;}
.page_area li a {width:36px; height:36px; display:inline-block; border:1px solid #ccc; border-radius:100%; line-height:33px; text-align:center;}
.page_area li a.on, .page_area li a.on:hover {background:#3bbcce; color:#fff; border:none}

.page_area li a:hover {background:#eeeeee}
.page_area li a.next, .page_area li a.prev { border:none}

@media all and (max-width: 1480px) {
	#head .header .menu {right:80px;}
	#head .header .lan {right:0}
}

@media all and (max-width: 1320px) {
	#head .header {width:100%}
	#head .header h1 {padding-left:3%}
	#head .header .menu {right:6%;}
	#head .header .lan, .lan_view {right:0}
	#footer .footerarea .logo {margin-left:2%}
	#footer .footerarea .sns {margin-right:5%}
}

@media all and (max-width: 1319px) {
	#head .header h1 {left:2%}
	#head .header .lan {padding-left:10px;}
	#head .menu_open> .inner > .gnb {margin-left:30px}
	#head .menu_open> .inner > .gnb li {width:22%}
	#footer .footerarea {width:100%}
	.auto_wrap::-webkit-scrollbar { -webkit-appearance: none; } 
	.auto_wrap::-webkit-scrollbar:vertical { width: 12px; } 
	.auto_wrap::-webkit-scrollbar:horizontal { height:9px; } 
	.auto_wrap::-webkit-scrollbar-thumb { background-color: #39bcce; border-radius: 10px; border: 2px solid #ffffff; } 
	.auto_wrap::-webkit-scrollbar-track { border-radius: 10px; background-color: #e2e2e2;  border: 2px solid #ffffff; }
}

@media all and (max-width: 1330px) {
	#head .header .lan, .lan_view {right:10px;}
}


@media all and (max-width: 1020px) {
	#head .header .menu {right:8%}
	#head .header .lan, .lan_view {right:10px}
}

@media all and (max-width: 1000px) {
	#head .header .menu {right:2%}
	#head .header .lan, .lan_view {display:none;}
	#head .menu_open> .inner > .gnb {margin-left:3%}
	#head .menu_open> .inner > .gnb li {width:17%}
	#footer .footerarea {padding:20px 0}
	#footer .footerarea .lang {margin:20px auto 0; display:block;}
	#footer .footerarea .add {padding:0 0 0 10px; }
}

@media all and (max-width: 950px) {
	#footer .footerarea .sns {float:none; text-align:center; margin-top:10px;}
}

@media all and (max-width: 800px) {
	#head {positioN:absolute;}
	#head .menu_open> .inner {width:100%;visibility: unset;}
	#head .menu_open.active {height:800px; }
	#head .menu_open> .inner {margin-top:0}
	#head .menu_open.active > .inner > .gnb {width:100%; padding:3%; margin:0; }
	#head .menu_open> .inner > .gnb li {width:100%; float:none;  padding-bottom:20px }
	#head .menu_open> .inner > .gnb li h2 a {background:#3bbcce; color:#fff; display:block; padding:0 3%}
	#head .menu_open> .inner > .gnb li > ul > li {border-bottom:1px dashed #ccc; padding-left:20px;}
	#footer .footerarea .logo {padding-left:0px; display:block; text-align:center; padding-bottom:15px; margin:0}
	#footer .footerarea .add {padding:0}
	#footer .footerarea .add p {padding:0 10px; display:none; text-align:center; }
	#footer .footerarea .add p.coy {display:block; }
	#footer .footerarea .add { text-align:center; display:block;}
	#footer .footerarea .sns {margin-right:0; margin-top:15px;}
	#footer .footerarea .sns a.first {padding-left:0}

}

@media all and (max-width: 500px) {
	/*.notice_area .notice_view .notice_insights li {height:auto; }
	.notice_area .notice_view .notice_insights li .photo {float:left; width:30%;height:auto; }
	.notice_area .notice_view .notice_insights li .info {float:left; width:65%; border-top:0}*/
	.page_area li {margin:5px 1px}
	.page_area li a {width:20px; height:20px; line-height:19px;}
}

@media all and (max-width: 450px) {
	#head .header h1 img {width:210px}
}
