@charset "utf-8";

/* page-wrap */
.page-wrap {min-width: 1000px; color: #454545;letter-spacing: -0.5px; word-break: keep-all;}


/* 코로나 현황 */
.tb_wrap {position: relative;z-index: 10;height: 105px;background: #bde7ff;}
.tb_container {width: 1100px; padding:0 10px; margin: 0 auto; position: relative; height:105px; background:url(../images/corona-bg.png), url(../images/corona-bg2.png) 0% 32% no-repeat,
url(../images/corona-bg3.png) 100% 29% no-repeat}

.tb_btn {display: block; width:250px; height: 30px; line-height: 32px; background: #213b56; color: #fff; text-align: center; font-size: 13px; font-weight: 600; border-bottom-left-radius: 5px; -moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; position: absolute; left:10px; bottom:-30px; z-index: 5;}
.tb_btn:hover {text-decoration: none;}
.tb_btn:before {width:240px; height: 1px; display: block; content: ''; position: absolute; left:50%; bottom: 0; background: #213b56; margin-left:-120px;}
.tb_btn:after {display: block; content: '';border-left: 125px solid transparent;border-right: 120px solid transparent;border-top: 10px solid #213b56;width: 0;position: absolute;left: 2px;bottom: -10px;z-index: -1;}
.tb_btn strong {color: #ffdb89; font-weight: 600;}
.tb_btn strong:after {content:''; width:4px; height:4px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); transform: rotate(-135deg);  border-bottom:2px solid #ffdb89; border-right:2px solid #ffdb89; display: inline-block; vertical-align: middle; margin:-2px 0 0 6px;}
.tb_btn.active strong:after {margin:-5px 0 0 6px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}

.top_banner {position: relative;}
.top_banner:after {content:''; display:table; clear:both;}
.top_banner div {float:left;}
.tb_tit_wrap {width:180px;margin-left: 10px;margin: 9px 0 0 30px;}
.tb_tit {font-size: 24px;  line-height: 26px; font-weight: 600;}
.tb_tit span{ font-weight: 500; color: #0072ff;}
.tb_time {font-size: 16px;position: relative;padding: 3px 10px 5px;background: #000;color: #FFE146;margin-top: 9px;}
.tb_sub {/*transform: translateY(50%); margin-left: 60px;*/  float: right !important;}
.tb_sub .tb_contents {margin-left: 25px;}
.tb_sub .tb_contents:nth-child(1) {margin:0;}
.tb_sub .tb_contents:last-child {margin-right:20px;}
.tb_sub .tb_contents .tb_c_tit{ font-size: 17px;  font-weight: 700; position:relative; transform: translateY(-50%);  position: relative;  top: 50px;}
.tb_sub .tb_contents .tb_c_tit span{color: #0072ff;}
.tb_sub .tb_contents .tb_c_tit span.point{color: #da204c;font-size: 22px;}
.tb_sub .tb_contents .tb_c_tit:before {top: 7px;  margin: 0 auto;  border-width: 0px 6px 6px 6px;  border-color: #004870 transparent;  display: block;  width: 0px;  content: "";  position: absolute;  border-style: solid;  left: -18px;   z-index: 1;}
.tb_sub .tb_contents .tb_c_tit:after {top: 13px;  margin: 0 auto;  border-width: 6px 6px 0px 6px;  border-color: #004870 transparent;  display: block;  width: 0px;  content: "";  position: absolute;  border-style: solid;  left: -18px;   z-index: 1;}
.tb_sub .tb_contents .tb_c_sub {margin-left: 10px; transform: translateY(-50%);  position: relative;  top: 50px;}
.tb_sub .tb_contents .tb_c_sub .tb_c_box { padding: 4px 8px;  background: #fff;border-radius: 15px;clear: both;margin-top: 4px;}
.tb_sub .tb_contents .tb_c_sub .tb_c_box .tb_c_l {}
.tb_sub .tb_contents .tb_c_sub .tb_c_box .tb_c_t {font-size: 18px;font-weight: 800; color:#0072ff;; }
.tb_sub .tb_contents .tb_c_sub .tb_c_box .tb_c_r {font-weight: 500; color: #04527e; }



#header {position: absolute; left:0; top: 0; width: 100%; z-index: 9001; text-align:center; padding: 15px; 
border-bottom: 1px solid #737373; background-color: rgba(0, 0, 0, .5);}
  #header h1 {float: left; width: auto; margin-left: 80px;}
 
#btn-menu {position: absolute; left: 0; top: 0; height: 100%; border-right: 1px solid #fff; padding: 0 10px;}
#btn-search {position: absolute; right: 0; top: 0; padding: 0 20px; height: 100%; border-left: 1px solid #fff;}
.page-header {position: absolute; left: 0; top: 0; width: 100%; height: 250px; z-index: 100; color: #fff; text-align: center; background-size: cover;}
#gnb {position: fixed; width: 92% !important; background: #fff; left: 50%; top: 85px; opacity: 1; transform: translate(-50%, 35%); visibility: hidden; -webkit-transition: all .4s; transition: all .4s;}
.gnb-show {background: #fff !important; transform: translate(-50%, 0) !important; opacity: 1 !important; visibility: visible !important; z-index: 9999 !important; transition: all .6s;}
#gnb .pack {float: left; width: 16.66%; padding: 28px; height: 610px; border-right: 1px solid #e5e5e5;}
#gnb > div:nth-last-of-type(1) {border-right-style: none;}
#gnb .pack h2 {font-size: 30px; font-weight: normal; margin-bottom: 10px;}
#gnb .pack li {line-height: 32px; text-align: left;}
#gnb .pack li a {color: #000; font-size: 18px; position: relative; padding-left: 12px;}
#gnb .pack li a:after {content: '-'; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#gnb .active {background: #243f8f;}
#gnb .active h2 {color: #ffe956;}
#gnb .active a {color: #fff !important;}
#gnb .active a:hover, #gnb .active a:focus {color: #ffe956 !important;}
#gnb .btn-close {position: absolute; right: 20px; bottom: 20px; font-size: 18px; padding: 15px; text-align: center; border: 2px solid #000; width: 200px; background: #fff; color: #000;}
#gnb-med-down {padding: 70px 0; background: #152c70; position: fixed; left: 0; top: 0; width: 90%; height: 100%; z-index: 1000; transform: translateX(-100%);}
#gnb-med-down h2 {font-size: 18px; color: #fff; padding: 2% 4%; border-top: 1px solid #3a539a; position: relative; background: #243f8f; font-weight: 500;}
#gnb-med-down h2 span {right: 8%; opacity: .4;}
#gnb-med-down h2:nth-last-of-type(1) {border-bottom: 1px solid #3a539a;}
#gnb-med-down h2:hover, #gnb-med-down h2:focus {color: #ffe955;}
#gnb-med-down h2.active img {-webkit-transform: scaleY(-1); transform: scaleY(-1);}
#gnb-med-down h2 + ul {font-size: 15px; background: #152c70; padding: 2% 4%; display: none;}
#gnb-med-down h2.active + ul {display: block;}
#gnb-med-down h2 + ul li {line-height: 30px; font-weight: 300;}
#gnb-med-down h2 + ul li a {color: #fff; position: relative; padding-left: 12px;}
#gnb-med-down h2 + ul li a:hover, #gnb-med-down h2 + ul li a:focus {color: #ffe955; text-decoration: underline;}
#gnb-med-down h2 + ul li a:after {content: '-'; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#gnb-med-down .btn-close {width: 50px; height: 50px; text-align: center; background: #000; position: absolute; right: 10px; top: 10px;}
.inner {width: 96%; margin: 0 auto;}
#visual {position: absolute; left: 0; top: 0; width: 100%; overflow: hidden;}
#visual .prev {left: 1%; z-index: 100;}
#visual .next {right: 1%; z-index: 100;}
#visual .prev img, #visual .next img {width: 100%; height: auto;}
#visual .slick img {width: 100%; height: auto;}
#visual .pager {bottom: 45px; z-index: 100;}
#visual .pager button {float: left; padding: 0 4px; color: #fff;}
#visual .txt {text-align: center; width: 665px; height: 394px;}
#visual .txt > div {width: 100%;}
#visual .txt p {font-size: 30px; color: #fff;}
#visual .txt h2 {font-size: 60px; color: #fffea1;}
#visual .txt img {position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: -1;}
#content {padding-bottom: 40px;}
#introduce section {float: left; width: 50%; background: url(../images/bg_introduce.png) no-repeat top center; color: #fff; text-align: center; padding: 50px 0; background-size: cover;}
#introduce section:last-child {background: url(../images/bg_onesystem.jpg) no-repeat top center; background-size: cover;}
#introduce section h2 {font-size: 40px;font-weight: 400; margin-bottom: 35px;}
#introduce section ul {width: 80%; margin: 0 auto;}
#introduce section li {float: left; width: 25%;}
#introduce section li a {font-size: 20px; color: #fff;}
#introduce section li span {display: block; margin-top: 10px; height:30px}
.title-style1 {text-align: center; padding: 20px; position: relative; font-size: 40px; color: #fff; font-weight: 400;}
.title-style1:after {content: ''; display: block; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 2px; width: 50px; background: #fff;}
#business {background: #284ca0; padding: 45px 0; color: #fff;}
#business > p {text-align: center; margin-top: 15px; font-size: 20px;}
#business .clearfix {width: 80%; margin: 60px auto 0;}
#business article {float: left; width: 19.2%; margin-right: 1%;}
#business article div {height: 98px;}
#business article h3 {font-size: 20px; margin: 20px 0 10px;}
#business article p {font-size: 16px; color: #92b5f7;}
#business article:last-child {margin-right: 0;}
#news {background: #fff; padding-top: 65px;}
#news section {position: relative; float: left; width: 49.5%;}
#news section > button {position: absolute; width: calc(100% / 3); padding: 10px; text-align: center; background: #ddd; left: 0; top: 50px; border: 1px solid #ddd; background: #fff;}
#news section > button:nth-of-type(2) {left: calc(100% / 3); border-left: 0;}
#news section > button:nth-of-type(3) {left: auto; right: 0; border-left: 0;}
#news section > button.active {background: #ddd;}
#news > article {position: relative; float: right; width: 49.5%;}
#news section > div:nth-of-type(1), #news > article > div {position: relative;}
#news section > div:nth-of-type(1) {margin-bottom: 50px;}
#news section h2, #news > article h2 {font-size: 40px; font-weight: 400; text-align: center; margin-bottom: 60px;}
#news section > div:nth-of-type(1) a, #news > article > div a {position: absolute; right: 4%; top: 15px; color: #555; font-size: 16px;}
#news section article {border-bottom: 1px solid #555; padding: 30px 22px 30px 0; position: relative;}
#news section article > p {font-size: 18px; color:#ddd; text-align: center; float: left; margin: -15px 25px 0 0;}
#news section article > p span {display: block; font-size: 40px; font-weight: 400;}
#news section article div {float: left;} 
#news section article h3 {font-size: 20px; width: 380px;}
#news section article h3 a {color: #000; font-weight: normal;}
#news section article h3 span {font-size: 16px; color: #284ca0; width: 66px; padding: 4px 0; text-align: center; border: 1px solid #284ca0; display: inline-block; margin-right: 20px;}
#news section article div p {margin-top: 10px; font-size: 16px; width: 380px;}
#news section article div p a {color: #666;}
#news section article div > a {position: absolute; right: 22px;}
#news > article figure img {width: 100%; max-width:570px; height: 400px;}
#news > article figure a {position: static; right: auto; top: auto;}
#news .control {position: absolute; top: -20px; left: 0; width: 100%;}
#news .control .feather {width:20px; height: 20px; fill: #ccc; stroke: #ccc; margin-left:15px}
#news .control > button {float: left;}
#news .control .play {display: none;}
#news .slick {position: relative; top: 15px; margin-left:20px; }
#news .slick-dots {float: right;}
#news .slick-dots li {float: left; padding: 0 3px;}
#news .slick-dots li button {background: #ccc; border-radius: 50%; text-indent: -10000px; width: 12px; height: 12px; opacity: 0.7; cursor: pointer;}
#news .slick-dots li.slick-active button {border-radius: 9px; width: 28px; opacity: 1;}
#news .tabs {display: none;}
#news .tabs.active {display: block;}
#story {margin-top: 70px;}
#story > div:first-child {position: relative; width: 80%; margin: 0 auto 60px;}
#story h2 {font-size: 40px; font-weight: 400; text-align: center; margin-bottom: 60px;}
#story h2 + a {position: absolute; right: 3%; bottom: 1%; color: #555; font-size: 16px;}
#story .clearfix {width: 80%; margin: 0 auto;}
#story figure {float: left; width: 23.875%; margin-right: 1%; border: 1px solid #ddd; margin-top:10px}
#story figure img {width: 95%; height: auto;}
#story figure:last-child {margin-right: 0;}
#story figcaption {padding: 25px; background: #fff; font-size: 16px;}
#story figcaption a {color: #000;}
#story figcaption span {display: block; font-size: 20px; margin-top: 15px;}
#story .active figcaption {background: #1a72e1; color: #fff;}
#story .active figcaption a {color: #fff;}
#footer {background: #363940; padding: 0 0 90px;}
#agency {border-top: 1px solid #000; background: #fff; border-top: 1px solid #000;}
#agency > .inner {padding: 12px 0; position: relative;}
#agency .inner > div:first-child {float: left; margin-right: 2%; margin-top:8px}
#agency .inner > div:first-child .play {display: none;}
#agency .inner > div:first-child button {float: left; margin-right: 12px;}
#agency .inner > div:first-child button:last-child {margin-right: 0;}
#agency .slick {float: right; width: 71%;}
#agency .slick a {display: block; padding: 0 15px; font-size: 12px; color: #000; text-align: center; position: relative;}
#agency .slick a:after {content: ''; display: block; position: absolute; height: 12px; width: 1px; background: #000; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#footer .inner {position: relative;}
#footer .footer-menu {width: 90%; padding: 20px 10% 0 0; margin-bottom: 20px;}
#footer .footer-menu li {float: left; padding: 0 12px; width: 50%; text-align: left; font-size: 12px; font-weight: 300; position: relative;}
#footer .footer-menu li:after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #717378; display: none;}
#footer .footer-menu li:nth-child(2n):after {display: none;}
#footer .footer-menu li a {color: #fff;}
#footer .footer-menu li em {font-weight: bold; color: #ffcc00;}
#btn-top {position: absolute; right: 0; top: 20px;}
#footer .information {color: #fff; font-size: 12px; font-weight: 400;}
#footer .information > .clearfix {min-width:520px; position: absolute; bottom: -80px; left: 50%;  text-align: center; }
#footer .information > .clearfix div {float: left;  }
 #footer .information > .clearfix div img  {height:50px; margin:4px}

/* Extra Small */
@media (max-width: 320px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    #visual .prev, #visual .next {width: 50px;}
    #visual .txt {width: 230px; height: 136px;}
    #visual .txt > div {margin: -5px 0 0 10px;}
    #visual .txt p {font-size: 14px;}
    #visual .txt h2 {font-size: 18px;}
    #introduce section {width: 100%;}
    #introduce section h2 {font-size: 30px;}
    #introduce section ul {width: 96%;}
    #introduce section ul img {width: 80%; height: auto;}
    #introduce section li a {font-size: 16px;}
    .title-style1 {font-size: 30px;}
    #business {padding: 2% 0 5%;}
    #business > p {font-size: 14px;}
    #business article {width: 47.5%; margin: 5% 5% 0 0; min-height: 219px;}
    #business article:nth-child(2n) {margin-right: 0;}
    #business article:nth-child(2n) {margin-right: 0;}
    #business article p {font-size: 14px;}
    #news {padding-top: 6%; width: 100%;}
    #news section, #news > article {width: 100%; padding: 0 2%;}
    #news section h2 {font-size: 30px; margin-bottom: 10px;}
    #news > article h2 {font-size: 30px; margin-top: 30px;}
    #news section > div a, #news > article > div a {font-size: 14px;}
    #news section article {padding: 12px 0;}
    #news section article > p {font-size: 14px; margin: -6px 0 0 0; width: 10%;}
    #news section article > p span {font-size: 24px;}
    #news section article div {float: right; width: 85%;} 
    #news section article h3 {font-size: 14px; width: 100%; padding-right: 50px}
    #news section article h3 span {font-size: 14px; width: 40px; margin-right: 1%;}
    #news section article div p {font-size: 14px; width: 100%; margin-top: 1%; padding-right: 50px;}
    #news > article figure img {width: 100%; height: auto;}
    #news section article div > a {width: 40px; right: 0;}
    #news section article div > a img {width: 100%; height: auto;}
    .inner {width: 96%;}
    #story h2 {font-size: 19px; margin-bottom: 30px;}
    #story h2 + a {right: 0; bottom: 3px; font-size: 12px;}
    #story figure {width: 48.5%; margin: 0 1.5% 1.5% 0;}
    #story figure:nth-child(2n) {margin-right: 0;}
    #story figcaption {padding: 3%; font-size: 14px;}
    #story figcaption span {font-size: 16px; margin-top: 1%;}

	#footer .information > .clearfix {  left: 0 }
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    #header h1 {width: 36%;}
    #header h1 img {width: 80%;}
    .inner {width: 94%;}
    #visual .txt {width: 550px; height: 326px;}
    #visual .txt > div {margin: -5px 0 0 10px;}
    #visual .txt p {font-size: 26px;}
    #visual .txt h2 {font-size: 40px;}
    #introduce section {width: 100%;}
    #introduce section h2 {font-size: 30px;}
    #introduce section ul {width: 70%;}
    #introduce section ul img {width: 80%; height: auto;}
    #introduce section li a {font-size: 18px;}
    #business .clearfix {width: 90%;}
    #business article h3 {font-size: 18px;}
    #news {padding-top: 6%; width: 100%;}
    #news section, #news > article {width: 100%; padding: 0 2%;}
    #news section h2 {margin-bottom: 20px;}
    #news > article h2 {margin-top: 30px;}
    #news section > button {top: 60px;}
    #news section > div a, #news > article > div a {font-size: 16px; top: 15px;}
    #news section article {padding: 12px 0;}
    #news section article > p {font-size: 16px; margin: -6px 0 0 0; width: 10%;}
    #news section article > p span {font-size: 24px;}
    #news section article div {float: right; width: 85%;} 
    #news section article h3 {font-size: 16px; width: 100%; padding-right: 50px}
    #news section article h3 span {font-size: 16px; width: 40px; margin-right: 1%;}
    #news section article div p {font-size: 16px; width: 100%; margin-top: 1%; padding-right: 50px;}
    #news > article figure img {width: 100%; height: auto;}
    #news section article div > a {width: 40px; right: 0;}
    #news section article div > a img {width: 100%; height: auto;}
    #story figcaption {padding: 3%; font-size: 14px;}
    #agency .slick {width: 86%;}
    #agency .slick a {font-size: 16px;}
    #footer .footer-menu {width: auto; padding-right: 0; margin-bottom: 40px;}
    #footer .footer-menu li {width: auto; text-align: center; font-size: 16px;}
    #footer .footer-menu li:first-child {padding-left: 0;}
    #footer .footer-menu li:after {content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #717378;}
    #footer .footer-menu li:nth-child(2n):after {display: block;}
    #footer .information {font-size: 16px; font-weight: 400; line-height: 25px;}
    #footer .information > .clearfix {width: 50%; bottom: -80px; }
    #footer .information > .clearfix div {float: left;  }
 	#footer .information > .clearfix {  left: 0 }
     
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    #header h1 {width: 36%;}
    #header h1 img {width: 80%;}
    #visual .txt {width: 550px; height: 326px; margin-top: 30px;}
    #visual .txt > div {margin: -5px 0 0 10px;}
    #visual .txt p {font-size: 26px;}
    #visual .txt h2 {font-size: 40px;}
    #news section > button {top: 90px;}
    #agency .slick {width: 86%;}
    #agency .slick a {font-size: 16px;}
    #footer .inner {position: relative;}
    #footer .footer-menu {width: auto; padding-right: 0; margin-bottom: 40px;}
    #footer .footer-menu li {width: auto; text-align: center; font-size: 16px;}
    #footer .footer-menu li:first-child {padding-left: 0;}
    #footer .footer-menu li:after {content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #717378;}
    #footer li:nth-child(2n):after {display: block;}
    #footer .information {font-size: 16px; font-weight: 400; line-height: 25px;}
    #footer .information > .clearfix {  min-width:460px;  bottom: 0;   text-align: center;}
    #footer .information > .clearfix div {width: auto; padding: 0; margin-right: 15px;}
    #footer .information > .clearfix div:last-child {margin-right: 0;}
 
}


/* Large desktops and laptops */
@media (min-width: 1200px) {
    .inner {width: 1200px;}
    #header h1 {float: left; width: auto; margin-right: 145px;}
    #header button {color: #fff; font-size: 22px; margin: 10px 20px 0 0;}
    #btn-search {width: 85px; height: 85px; background: #da1a1a; padding: 0; border-style: none; margin: 0 !important;}
    #footer {padding-bottom: 30px;}
    #agency .slick {width: 90%;}
    #agency .slick a {font-size: 16px;}
    #news section > button {top: 90px;}
    #footer .inner {position: relative;}
    #footer .footer-menu {width: auto; padding-right: 0; margin-bottom: 40px;}
    #footer .footer-menu li {width: auto; text-align: center; font-size: 16px;}
    #footer .footer-menu li:first-child {padding-left: 0;}
    #footer .footer-menu li:after {content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #717378;}
    #footer li:nth-child(2n):after {display: block;}
    #footer .information {font-size: 16px; font-weight: 400; line-height: 25px;}
    #footer .information > .clearfix {width: auto; min-width:460px; left: 670px; bottom: 0; transform: none; text-align: center;}
    #footer .information > .clearfix div {width: auto; padding: 0; margin-right: 15px;}
    #footer .information > .clearfix div:last-child {margin-right: 0;}
  
}
@media (min-width: 1200px) and (max-width: 1300px) {
 #header button { margin: 5px 20px 0 0;}
 }
/* print */
@media print {
}