@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,500);
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
@import url(http://cdn.jsdelivr.net/font-notosans-kr/1.0.0-v1004/NotoSansKR-2350.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url(https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css);


@media screen and (max-width:320px) {
     body {zoom:50%;}
 }
 @media screen and (min-width:321px) and (max-width:359px) {
     body {zoom:50%;}
 }
 @media screen and (min-width:360px) and (max-width:374px) {
     body {zoom:56.2%;}
 }
 @media screen and (min-width:375px) and (max-width:375px) {
     body {zoom:58.5%;}
 }
 @media screen and (min-width:376px) and (max-width:479px) {
     body {zoom:64.22%;}
 }
 @media screen and (min-width:480px) and (max-width:639px) {
     body {zoom:75%;}
 }
  /* 아이패드(1024X768)보다 큰 스크린 사이즈와 해상도를 갖는 모든 기기에서의 해상도 설정
 @media all and (min-width: 640px) {
     body {width:640px; margin:0 auto;}
  */
  @media all and (min-width: 640px) {
     body {zoom:100%; margin:0 auto;}
 }

/* 갤럭시 S20 설정 */
 @media only screen and
(device-width: 360px) and
(device-height: 800px) and
(-webkit-device-pixel-ratio: 4.0) {
  body {zoom:56.2%;}
}


*{margin:0; padding:0; box-sizing:border-box;color:inherit; letter-spacing: -0.07em;}
img {border:0;vertical-align:top;}
a {border:0; text-decoration:none; color:inherit;}
ul, li {list-style:none;}
div {display:block;}
body {width:100%;max-width:640px;font-family: 'NotoSansKR','Noto Sans Korean','Noto Sans KR','Nanum Gothic','Roboto',sans-serif; color:#505050;}
.clearfix {clear:both}
.inner {width:600px;margin:auto;position: relative;}
.inner2 {width:540px;margin:auto;position: relative;}
.c_main {color: #048ce0 !important;}
.c_sub {color: #0b5275 !important;}
.c_red {color:#c20005 !important;}
.c_lightgray {color:#c0c0c0 !important;}
.c_gray {color:#808080 !important;}
.c_white {color:#fff !important;}
.c_black {color:#303030 !important;}

h1 {font-size:50px;}
h2 {font-size:40px;}
h3 {font-size:30px;}
h4 {font-size:24px;}
h5 {font-size:20px;line-height:1.6}
h1,h2,h3 {font-weight:200;line-height:1.2}
h4,h5 {font-weight:300;}
b {letter-spacing:inherit;font-weight:700}
p {font-size:17px;font-weight:300;line-height:1.7;color:inherit;word-break:keep-all }
p.small {font-size:15px;}
.font36 {font-size: 36px;}
.roboto {font-family: "Roboto";}
.loose {letter-spacing: 0.1em;}
.thin {font-weight: 100 !important;}
.bold {font-weight: 700 !important;}
.txtshadow {text-shadow: 2px 2px 1px rgba(0,0,0,0.3);}

span {color:inherit}

.float {float:left;}
.float_r {float:right !important;}
.center {text-align:center !important;}
.left {text-align:left !important;}
.right {text-align:right !important;}
.flex {display: flex;}
.flex .col {flex: 1;}


hr {width:100%;height:1px;background:#d0d0d0;border:0;}


/* 폭 설정 */
.half {width:50% !important}
.col6 {width:16.66% !important;}
.col5 {width:20% !important;}
.col4 {width:25% !important;}
.col3 {width:33.33% !important;}
.col3x2 {width:66.66% !important;}
.w30 {width:30% !important;}
.w40 {width:40% !important;}
.w48 {width:48% !important;}
.w55 {width:55% !important;}
.w60 {width:60% !important;}
.w70 {width:70% !important;}
.w75 {width:75% !important;}
.w80 {width:80% !important;}

.w90 {width:90% !important;}
.w100 {width:100% !important;}
.w600 {width:600px !important;}


/* 마진,패딩 설정 */
.mg0 {margin-left:0 !important;margin-right:0 !important}

.mt05 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}
.mt70 {margin-top:70px !important;}
.mt80 {margin-top:80px !important;}
.mt120 {margin-top:120px !important;}

.mb05 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mb30 {margin-bottom:30px !important;}
.mb40 {margin-bottom:40px !important;}
.mb50 {margin-bottom:50px !important;}
.mb60 {margin-bottom:60px !important;}
.mb70 {margin-bottom:70px !important;}
.mb80 {margin-bottom:80px !important;}
.mb120 {margin-bottom:120px !important;}

.pl03 {padding-left:3%}
.pl05 {padding-left:5%}
.pl10 {padding-left:10%}
.pl15 {padding-left:15%}
.pl20 {padding-left:20%}
.pl25 {padding-left:25%}
.pl30 {padding-left:30%}
.pl50 {padding-left:50px}

.pr03 {padding-right:3%}
.pr05 {padding-right:5%}
.pr10 {padding-right:10%}
.pr15 {padding-right:15%}
.pr20 {padding-right:20%}
.pr25 {padding-right:25%}
.pr30 {padding-right:30%}
.pr50 {padding-right:50px}

.padding80 {padding: 80px 0;}


.bd_b {border-bottom:1px #d0d0d0 solid}
.bd_t {border-top:1px #d0d0d0 solid}
.bd_l {border-left:1px #d0d0d0 solid}
.bd_r {border-right:1px #d0d0d0 solid}




#wrap {width:100%; display:inline-block; position:relative;background:#fff}
#header {width:100%; height:172px; float: left;}
#header a.logo {width:400px;height:73px;display:block;text-indent:-3333px;background-image:url(images/logo.png);background-size:contain;background-repeat:no-repeat;}
#header a.logo {position:absolute; top:22px; left:50%; margin-left: -200px;}
#header #gnb {width: 100%;height: 62px; position:absolute; top: 110px; border-top: 1px #d0d0d0 solid; border-bottom: 2px #505050 solid; padding: 0 10px;}
#header #gnb li {float: left; line-height: 59px; text-align: center; font-size: 20px; letter-spacing: -0.02em; margin: 0 20px;}
#header #gnb li a.on {font-weight: 700; color: #044e7c;}
#header #gnb li.last {}
#header #gnb li.last a {background-color: #044e7c; color: #fff; font-weight: 700; padding: 5px 10px; border-radius: 4px;}


/* 공통 하단 */
#footer {width:100%; margin:auto;position:relative;float:left; background-color: #303030; color: #989898; padding: 30px 0;}
#footer .logo {width: 350px; height: 64px; background: url(images/footer_logo.png) no-repeat; text-indent: -3333px; display: block; margin: 15px auto;}
#footer .txt {font-size:18px; line-height: 1.7; text-align: center;}
#footer .txt span {display:inline-block ;margin:0 10px; font-weight:300}
#footer .txt span.member {color: #fff;}
#footer a#back-top {width: 50px; height: 50px; border: 2px #989898 solid; display: block; text-align: center; margin: 20px auto 0;}
#footer a#back-top i {font-size: 30px; line-height: 46px;}


/* 메인 */
#main {width:100%; float:left; position:relative; display:inline-block; padding: 40px 0; background: url(images/main_bg.jpg) top center no-repeat; background-size: cover;}

#main .inner .section {float: left;}

#main .flexslider {height:350px !important; overflow: hidden; border-radius: 10px;}

#main .inner #icon a.icon {width: 190px; display: block; text-indent: -3333px; height: 170px; margin-top: 15px; margin-left: 15px; float: left;}
#main .inner #icon a.icon.first {margin-left: 0;}
#main .inner #icon a.icon.icon1 {background: url(images/main_icon1.png) center; width: 395px;}
#main .inner #icon a.icon.icon2 {background: url(images/main_icon2.png) center;}
#main .inner #icon a.icon.icon3 {background: url(images/main_icon3.png) center;}
#main .inner #icon a.icon.icon4 {background: url(images/main_icon4.png) center;}
#main .inner #icon a.icon.icon5 {background: url(images/main_icon5.png) center;}

#main .inner #output {width:100%; background-color: rgba(0,0,0,0.5); height: 190px; color: #fff; padding: 20px 30px; margin-top: 15px;}
#main .inner #output .output {width: 100%; margin-top: 10px; font-size: 17px; line-height: 1.5; color: #fff !important; position: relative;}
#main .inner #output .output a.more {position: absolute; top: -60px; right: 0; font-size: 30px;}

/* Tabs */
#main #output ul.tabs { width:100%; display:inline-block; line-height: 30px;}
#main #output ul.tabs li {float:left; display:inline-block; margin-right: 15px;}
#main #output ul.tabs li.tabs-item a {	display:block; letter-spacing:-1px;	font-size:24px; color:#a0a0a0;}

/* Hovered Tab */
#main #output li.tabs-item a:hover, #main #output li.tabs-item a:active {	color:#fff !important; font-size:30px !important;}

/* Active Tab */
#main #output li.ui-tabs-selected a, #main #output li.ui-tabs-selected a:hover, #main #output  li.ui-tabs-selected a:active {	color:#fff !important; font-size:30px !important;}

/* Content Panels */
#main #output .ui-tabs-hide {	display:none;}
#main #output .btn_get_started {	float:left;	height:30px;	width:99px;	text-indent:-9999em;	margin-right:7px; 	overflow:hidden; 	background:transparent url(images/getstarted.gif) no-repeat}


#with {width: 100%; position: relative; display: inline-block; padding: 20px 0;}
#with .swiper-container {padding: 0 30px; }
#with .swiper-slide {width: 190px; height: 52px; border: 1px #e0e0e0 solid;}
#with .swiper-slide img {width: 100%; height: 100%;}

.swiper-button-black {zoom:50%; margin-top: -20px !important;}
.swiper-button-next {right: 10px !important;}
.swiper-button-prev {left: 10px  !important;}


/* 서브 */
#sub {width:100%; display:inline-block; float: left; background: url(images/subtop.jpg) top center no-repeat #505050; padding: 50px 0 60px;}

#sub .snb {width:100%; line-height: 56px; margin-bottom: 40px;}
#sub .snb ul {display: flex; margin-bottom: 1px;}
#sub .snb li {flex:1; text-align: center; padding-right: 1px; }
#sub .snb li a {display:block; height: inherit; font-size:20px; background-color: #fff; }
#sub .snb li a.on {background-color:#008158;color:#fff;font-weight: 600;}

#sub #content {width:100%; display:inline-block; background-color: #fff;}
#sub #content .title {width: 100%; height: 144px; border-bottom: 1px #d0d0d0 solid; margin-bottom: 40px; background: url(images/title_bg.jpg) right top no-repeat;}
#sub #content .title h2 {width: 100%; font-weight: bold; background: url(images/title_slogan.gif) left 92px no-repeat; padding: 30px 0;}

#sub #content .paragraph {width:100%;display:inline-block; position:relative; padding-bottom: 60px;}
#sub #content .paragraph .row {width:100%; display:inline-block; position:relative;}
#sub #content .paragraph .temp {width: 100%; min-height: 600px; background-color: #f5f5f5; padding: 200px 0;}
#sub #content .paragraph h3.subject {background: url(images/h3_subject.png) left 5px no-repeat; padding-left: 35px; margin-bottom: 20px; font-weight: 600; color:#333;}

#sub #content .paragraph .bullet { margin: 2px 0; padding-left: 18px;}
#sub #content .paragraph .bullet:before {content: "\e93f"; font-family: "xeicon"; color: #0b5275; margin-left: -17px; padding-right: 2px;}

#sub #content .paragraph .txt_box {background-color: #f5f5f5; border-top: 3px #0b5275 solid !important; border: 1px #e0e0e0 solid; padding: 30px;}


/* 연혁 */
#sub #content .paragraph .history {border-top: 1px #0b5275 solid; position:relative;}
#sub #content .paragraph .history ul.history_box {width: 100%; padding: 20px 0; display: inline-block; border-bottom: 1px #e0e0e0 solid;}
#sub #content .paragraph .history ul.history_box li.years {width: 100%; float: left; margin-bottom: 5px;}
#sub #content .paragraph .history ul.history_box li.years h3 {background-color: #505050; color: #fff; font-weight: 700; border-radius: 50px; padding: 10px 30px; text-align: center; margin: auto;}
#sub #content .paragraph .history ul.history_box.first li.years h3 {background-color: #044e7c; }
#sub #content .paragraph .history ul.history_box li.record {width: 100%; float: right; padding: 0 5px; margin: 3px 0;}
#sub #content .paragraph .history ul.history_box li.record h5 {float: left;}
#sub #content .paragraph .history ul.history_box li.record h5.date {width: 18%; font-weight: 700;}
#sub #content .paragraph .history ul.history_box li.record h5.info {width: 82%;}


/* 버튼 */
#sub #content .paragraph .btn_area .btn {width: 540px; height: 200px; border: 1px #d0d0d0 solid; background-color: #f5f5f5; padding: 30px 45px;}
#sub #content .paragraph .btn_area .btn img {padding-right: 40px;}

#sub #content .paragraph a.link {padding: 0 20px; line-height: 40px; border-radius: 40px; background-color: #048ce0; color: #fff; display: block; font-size: 18px; overflow: hidden; text-align: center;}
#sub #content .paragraph a.link.second {background-color: #eb8b23;}
#sub #content .paragraph a.link i {padding-left: 10px; font-weight: 600;}

#sub #content .paragraph a.link {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#sub #content .paragraph a.link:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
#sub #content .paragraph a.link:hover, #sub #content .paragraph a.link:focus, #sub #content .paragraph a.link:active {
}
#sub #content .paragraph a.link:hover:before, #sub #content .paragraph a.link:focus:before, #sub #content .paragraph a.link:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}



/* 테이블 설정 */
#sub #content .paragraph table.table {width:100%; border-top:3px #0b5275 solid; border-right: 1px #e0e0e0 solid; border-collapse:collapse;}
#sub #content .paragraph table.table td,#sub #content .paragraph table.table th {padding:8px 12px;  border-left:1px #e0e0e0 solid;}
#sub #content .paragraph table.table th {background-color: #e3f0f8; border-bottom:1px #d0d0d0 solid;}
#sub #content .paragraph table.table th h5 {font-weight: 600;}
#sub #content .paragraph table.table .bg_gray {background-color:#f5f5f5;}
#sub #content .paragraph table.table .first { border-left: 0; }
#sub #content .paragraph table.table td {border-bottom: 1px #e0e0e0 solid; background-color: #fff;}
#sub #content .paragraph table.table td.price {text-align:right; }


/* 테이블 설정 */
#sub #content .paragraph .site > div { width: 50%; float: left; padding: 0 2%; margin-bottom: 40px;}
#sub #content .paragraph .site > div img {width: 100%; height: auto; border: 1px #e0e0e0 solid;}
#sub #content .paragraph .site > div p {color: #999; margin-top: 2px; text-align: center; display: none;}



/* 탭 */
#sub #content .tabs {width:100%;text-align:center;float:left;}
#sub #content .tabs ul {}
#sub #content .tabs li {line-height:50px;border-bottom:1px #e0e0e0 solid;}
#sub #content .tabs li a {display: block; height: inherit;}
#sub #content .tabs li.active a {background-color: #888; color: #fff;}
#sub #content .tab_content {width:100%;padding-top:35px;padding-bottom:80px;display:inline-block;}




/* 게시판 */
#sub #content .board_box {font-size:18px !important;display:inline-block;width:100%;min-height:600px; line-height: 1.5;}
#sub #content .board_box font {font-size: inherit !important;}
#sub #content .board_box .board_bgcolor span {font-size: inherit !important;}
#sub #content .board_box .imgList td.bbsnewf5 > table > tbody > tr > td > a > img {width:560px !important;height:410px !important;}

#post_area img {width:100% !important; height:auto !important;}






/* 230720 역대회장 카테고리 추가 */
#sub #content .presidentbox {width: 540px; height: 290px; border: 1px #e0e0e0 solid; border-top: 2px #0b5275 solid; background: url(images/presidentbox_bg.gif) center bottom repeat-x; padding: 45px 40px; position: relative;}
#sub #content .presidentbox .genbox {width: 60px; height: 71px; display: block; background: url(images/genbox.png) no-repeat center; background-size: contain; color: #fff; font-weight: bold; font-size: 20px; line-height: 70px; text-align: center; float: left;}
#sub #content .presidentbox .name {line-height: 70px; float: left; margin-left: 10px;}
#sub #content .presidentbox .term {clear: both;}
 {}
#sub #content .presidentbox .picture {position: absolute; right: 40px; top: 45px;}
#sub #content .presidentbox .boxopen {position: absolute; bottom: 50px;}

.flex {display: flex;}
.flex .col1 {flex:1 !important;}
.flex .col2 {flex:2 !important;}
.flex .col3 {flex:3 !important;}
.flex .col4 {flex:4 !important;}
.flex .col5 {flex:5 !important;}

.needpopup {border-top: 3px #0b5275 solid; background: url(images/presidentpop_bg.jpg) top right no-repeat #f2fbff !important; position: relative;}
.needpopup .genbox {width: 86px; height: 102px; display: block; background: url(images/genbox.png) no-repeat center; background-size: contain; color: #fff; font-weight: bold; font-size: 24px; padding: 15px 0; text-align: center; margin-right: 20px; margin-top: 30px; float: left;}
.needpopup .name {font-weight: bold; margin-top: 45px;}
.needpopup .picture {box-shadow: 4px 4px 0px rgba(0,0,0,0.1); float: left;}
.needpopup h4.subject {background: url(images/h3_subject.png) left center no-repeat; padding-left: 35px; margin-bottom: 20px; font-weight: 600; color:#333;}
.needpopup .profile {border-top: 1px #0b5275 solid; border-bottom: 1px #e0e0e0 solid;}




/*250423 업무 및 위탁근거 추가 */
#sub #content .paragraph.sub4_7 .inner2 {position: relative; z-index: 1;}

#sub #content .titlebox {border: 1px #0b5275 solid;}
#sub #content .titlebox > h5 {background-color: #0b5275; color: #fff; text-align: center; padding: 6px 0;}
#sub #content .titlebox .box {padding: 6px 4px;} 

#sub #content .arrow {display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 30px;}
.flex .colr {}
.flex .col10 {flex:10 !important;}
.flex .col11 {flex:11 !important;}

#sub #content .downbox {background-color: #e3f0f8; border: 1px #048ce0 solid; height: 100%; padding: 10px; }
#sub #content .flex .row {height: 100%;}

.down_pdf {width: 36px; height: 40px; background: url(images/down_pdf.png); background-size: contain; display: block; text-indent: -10000px; cursor: pointer; position: absolute; right: 10px; bottom: 15px;}

#sub #content .nextstep::before {content: url(images/sub4_7_next.png); margin-right: 5px;}
#sub #content .prevstep::before {content: url(images/sub4_7_prev.png); margin-right: 5px;}

#sub #content .arrowbox > * {position: absolute; z-index: 0; }
#sub #content .arrowbox .object1 {left:10px; top: 330px;}
#sub #content .arrowbox .object2 {left:17px; top: 395px;}