/**************** font ****************/ @font-face { font-family:"Pretendard"; src:url('fonts/Pretendard-Regular.eot'); src:url('fonts/Pretendard-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Pretendard-Regular.woff') format('woff'), url('fonts/Pretendard-Regular.ttf') format('truetype'); src:local(¢®¨ª), url('fonts/Pretendard-Regular.woff') format('woff'); } @font-face { font-family:"PretendardT"; src:url('fonts/Pretendard-Thin.eot'); src:url('fonts/Pretendard-Thin.eot?#iefix') format('embedded-opentype'), url('fonts/Pretendard-Thin.woff') format('woff'), url('fonts/Pretendard-Thin.ttf') format('truetype'); src:local(¢®¨ª), url('fonts/Pretendard-Thin.woff') format('woff'); } @font-face { font-family:"PretendardM"; src:url('fonts/Pretendard-Medium.eot'); src:url('fonts/Pretendard-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/Pretendard-Medium.woff') format('woff'), url('fonts/Pretendard-Medium.ttf') format('truetype'); src:local(¢®¨ª), url('fonts/Pretendard-Medium.woff') format('woff'); } @font-face { font-family:"PretendardSB"; src:url('fonts/Pretendard-SemiBold.eot'); src:url('fonts/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'), url('fonts/Pretendard-SemiBold.woff') format('woff'), url('fonts/Pretendard-SemiBold.ttf') format('truetype'); src:local(¢®¨ª), url('fonts/Pretendard-SemiBold.woff') format('woff'); } @font-face { font-family:"PretendardB"; src:url('fonts/Pretendard-Bold.eot'); src:url('fonts/Pretendard-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Pretendard-Bold.woff') format('woff'), url('fonts/Pretendard-Bold.ttf') format('truetype'); src:local(¢®¨ª), url('fonts/Pretendard-Bold.woff') format('woff'); } @font-face { font-family:"PretendardEB"; src:url('fonts/Pretendard-ExtraBold.eot'); src:url('fonts/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'), url('fonts/Pretendard-ExtraBold.woff') format('woff'), url('fonts/Pretendard-ExtraBold.ttf') format('truetype'); src:local(¢®¨ª), url('fonts/Pretendard-ExtraBold.woff') format('woff'); } *{box-sizing: border-box;} html, body {padding: 0; margin: 0; scroll-behavior: smooth; font-family: 'Pretendard',Dotum,Helvetica,"Apple SD Gothic Neo",sans-serif; letter-spacing: -0.03em; font-size: clamp(16px, 3vw, 18px); line-height: 1.8; overflow-x: hidden;} body{margin-top: 115px;} ul,ol,li,dl,dt,dd {list-style: none; padding: 0; margin: 0;} p {padding: 0; margin: 0;} a:hover {text-decoration:underline; cursor: pointer; transition: all 0.3s;} a {text-decoration: none!important; color: #000; cursor: pointer;} b {font-family: 'PretendardSB'; font-weight: normal;} .h1, h1,.h2, h2,.h3, h3,.h4, h4,.h5, h5 {font-family: 'Pretendard'; font-weight: normal;} .blind {position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden;} .panel {height: 100vh;/* position: sticky; */ /* causes problems! */ top: 0;} .thumb img {transition: all .3s;} .thumb:hover img {transform: scale(1.1);} .pc-hide {display: none;} #top {position: fixed; bottom: 3%; right: 3%; opacity: 0.8;; z-index: 9999999;} #top:hover {opacity: 1; transition: all 0.3s;} #mask {display: none; position: fixed; top: 0; right: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 999999999;} .m-0 {margin: 0px!important;} .m-25 {margin: 25px;} .m-50 {margin: 50px;} .mt-0 {margin-top: 0!important;} .mt-10 {margin-top: 10px!important;} .mt-15 {margin-top: 15px!important;} .mt-20 {margin-top: 20px!important;} .mt-25 {margin-top: 25px!important;} .mt-30 {margin-top: 30px!important;} .mt-50 {margin-top: 50px!important;} .ml-auto{margin-left: auto;} .ml-0 {margin-left: 0;} .ml-20 {margin-left: 20px!important;} .ml-25 {margin-left: 25px!important;} .ml-50 {margin-left: 50px!important;} .mr-0 {margin-right: 0;} .mr-25 {margin-right: 25px!important;} .mr-50 {margin-right: 50px!important;} .mb-0 {margin-bottom: 0!important;} .mb-5 {margin-bottom: 5px!important;} .mb-10 {margin-bottom: 10px!important;} .mb-25 {margin-bottom: 25px!important;} .mb-30 {margin-bottom: 30px!important;} .mb-50 {margin-bottom: 50px!important;} .p-0 {padding: 0px!important;} .p-5 {padding: 5px!important;} .p-10 {padding: 10px!important;} .p-15 {padding: 15px!important;} .p-25 {padding: 25px!important;} .p-30 {padding: 30px!important;} .p-40 {padding: 40px!important;} .p-50 {padding: 50px!important;} .pt-0 {padding-top: 0;} .pt-25 {padding-top: 25px;} .pt-50 {padding-top: 50px;} .pl-0 {padding-left: 0!important;;} .pl-10 {padding-left: 10px;} .pl-25 {padding-left: 25px;} .pl-50 {padding-left: 50px;} .pr-0 {padding-right: 0;} .pr-10 {padding-right: 10px;} .pr-25 {padding-right: 25px;} .pr-50 {padding-right: 50px;} .pb-0 {padding-bottom: 0;} .pb-25 {padding-bottom: 25px;} .pb-50 {padding-bottom: 50px;} .px-10 {padding-left: 10px; padding-right: 10px;} .px-20 {padding-left: 20px; padding-right: 20px;} .px-25 {padding-left: 25px; padding-right: 25px;} .px-30 {padding-left: 30px; padding-right: 30px;} .py-5 {padding-top: 5px; padding-bottom: 5px;} .py-10 {padding-top: 10px; padding-bottom: 10px;} .py-15 {padding-top: 15px; padding-bottom: 15px;} .py-20 {padding-top: 20px; padding-bottom: 20px;} .m-auto {margin: 0 auto;} .w-auto {width: auto} .w-15 {width: 15%;} .w-25 {width: 25%;} .w-50 {width: 50%;} .w-75 {width: 75%;} .w-100 {width: 100%;} .center {justify-content: center;} .d-flex {display: flex;} .border {border: 1px #ddd solid;} @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-right { from { right: -90%; } to { right: 0; } } @keyframes slide-down { from { top: 25px; } } [id^="p"]::before { content: ""; display: block; height: 115px; /* 고정 헤더의 높이만큼 설정 */ margin-top: -115px; visibility: hidden; pointer-events: none; } /**************** header ****************/ .header {position:fixed; width:100%; top:0; left:0; background-color:#fff; -webkit-transition-duration:0.2s; -webkit-transition-timing-function:linear; transition-duration:0.2s; transition-timing-function:linear; box-sizing: border-box; z-index: 9999999;} .header::before {content: ""; border-bottom: 4px transparent solid; border-image: linear-gradient(90deg, #4DAC26 50%, #0969B3 50%); border-image-slice: 1; position: absolute; bottom: 0; width: 100%; z-index: 1;} .header::after {content: ""; border-bottom: 4px #0969B3 solid; position: absolute; transform: translateX(-50%); left: 50%; bottom: 0; width: 1350px; z-index: 1;} .header .gnb-inner {width: 100%; height: 115px; display: flex; align-items: center; justify-content: center; padding: 0 25px;} .header h1{display: flex; flex: auto; height: 100%; align-self: stretch; align-items: center; margin: 0; z-index: 9999999;} .header h1 .header-logo {float: left; background: url(../img/logo.png) no-repeat; width: 220px; height: 70px; background-size: 100% !important;} .header .gnb-nav {display: flex; align-self: stretch; align-items: center; position: relative; white-space: nowrap; cursor: pointer; width: 1350px; gap: 50px; margin-left: 25px; /*border-bottom: 4px #0969B3 solid;*/ z-index: 999999;} .header .gnb-nav li {display: flex; align-self: stretch; align-items: center; /*position: relative;*/ /*padding: 0 25px;*/} .header .gnb-nav li, .header .gnb-nav li a {font-family: 'PretendardM'; font-size: 22px; color: #000; cursor: pointer; z-index: 999999;} .header .gnb-nav li:hover,.header .gnb-nav li:hover a {color: #0969B3!important; font-family: 'PretendardSB'; transition: all 0.2s;} .header .util-wrap {display: flex; flex: auto; height: 100%; align-self: stretch; align-items: center; justify-content:end; gap:30px; z-index: 999999;} .header .util-menu {display: flex; align-items: center; gap:20px;} .header .util-menu li{display: flex;} .header .util-menu li a {width: 100%; display: flex; height: 100%; align-items: center; justify-content: center;} .header .util-menu .login {width: 50px; justify-content: center; height: 25px; text-align: right; background: none;} .header .util-menu .logout {width: 62px; height: 27px; background: none; background-size: contain;} .header .util-menu .search {width: 25px; height: 25px; background: url(../img/ico-search.png)no-repeat; background-size: 100%;} .util-wrap .lang {padding: 2px 13px; border-radius: 5px; background: #fff; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25); position: relative;} .util-wrap .lang dropdown ul li:first-child{padding-top: 10px;} .util-wrap .lang dropdown ul li:last-child {padding-bottom: 10px;} .util-wrap .lang dropdown ul li a {display: block; font-size: 14px;} .util-wrap .lang dropdown label:hover, dropdown ul li:hover{box-sizing: border-box; cursor: pointer;} .util-wrap .lang dropdown label{font-size: 16px; display: flex; align-items: center; gap: 3px;} .util-wrap .lang dropdown label::before {content: ""; background: url(../img/ico-lang.png)no-repeat; width: 16px; height: 16px;} .util-wrap .lang dropdown label::after {content: ""; background: url(../img/ico-arrow-bt.png)no-repeat; width: 14px; height: 8px;} .util-wrap .lang dropdown input:checked + label::after {transform:rotate(180deg); transition: all .1s;} .util-wrap .lang dropdown input{display: none;} .util-wrap .lang dropdown input ~ ul{visibility: hidden; opacity: 0; position: absolute; left: 0; top: -20px; width: 100%; height: auto; text-align: center; display: flex; flex-direction: column; border: 1px #ccc solid; background: #fff; border-radius: 5px;} .util-wrap .lang dropdown input:checked ~ ul{visibility: visible; opacity: 1; top: 37px; animation: slide-down 0.3s;} .header:has(.gnb-nav.active) .header-logo {background: url(../img/logo.png) no-repeat!important;} .header .gnb-nav.active li, .header .gnb-nav.active li a {color: #333;} .header .gnb-nav.active li:hover, .header .gnb-nav.active li:hover a {color: #fff!important;} .header .gnb-nav::before{content: ""; position: absolute; left: -100%; top: 0; width: 1000%; height: 0; background: #fff; opacity: 0; z-index: 0; transition: all .2s;} .header .gnb-nav.active::before{height: 100%; opacity: 1;} .header:has(.gnb-nav.active) .all-menu-btn button {background: url(../img/btn_allmenu.png) no-repeat!important;} .header .gnb-nav li .depth02-bg {visibility:hidden; display: flex; justify-content: center; background: #fff; color: #333; z-index: -99999; padding: 40px 0; width: 100%; position: absolute; top: 115px; left: 0; z-index: 9999999;} .header .gnb-nav li:hover > .depth02-bg {visibility:visible; animation: fade-in 0.3s;} .header .gnb-nav li .depth02-bg::before {content: ""; width: 100vw; height: 100%; background: #fff; position: absolute; top: 0; left: calc(-50vw + 50%); z-index: 0; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);} .header .gnb-nav li .depth02-bg .depth01-title {display: flex; width: auto; z-index: 0; display: none;} .header .gnb-nav li .depth02-bg .depth01-title,.header .gnb-nav li .depth02-bg .depth01-title a{font-size: 34px; font-family: 'PretendardSB'; color: #000;} .header .gnb-nav li .depth02-wrap {display: flex; gap: 15px; flex-wrap: wrap; align-content:start; width: 100%; min-width: 1350px; animation: fade_in_1 3s ease-out infinite; position: relative;} .header .gnb-nav li .depth02-wrap .depth02-box {display:flex; flex-direction: column; justify-content: center; position: relative; background: #f9f9f9; border-radius: 10px; padding: 30px; gap: 20px;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box {/*width: calc((100% - 45px) / 4);*/ width: 22%!important; justify-content: start;} .header .gnb-nav li .depth02-wrap.menu-03 .depth02-box {width: calc((100% - 45px) / 4);} .header .gnb-nav li .depth02-wrap.menu-04 .depth02-box {width: calc((100% - 30px) / 3);} .header .gnb-nav li .depth02-wrap.menu-05 .depth02-box {width: calc((100% - 60px)/5);} .header .gnb-nav li .depth02-wrap .depth02-box:hover {} .header .gnb-nav li .depth02-wrap .depth02-box .tit a {} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box .tit a {} .header .gnb-nav li .depth02-wrap .depth02-box .tit,.header .gnb-nav li .depth02-wrap .depth02-box .tit a{font-family: 'PretendardB'; font-size: 19px; color:#000!important; display: block;} .header .gnb-nav li .depth02-wrap .depth02-box:hover .tit a {color: #0969B3!important; transition: all 0.2s;} .header .gnb-nav li .depth02-wrap .depth02-box .depth03 {display: flex; flex-direction: column; gap: 10px;} .header .gnb-nav li .depth02-wrap .depth02-box .depth03 li{padding: 0;} .header .gnb-nav li .depth02-wrap .depth02-box .depth03 li,.header .gnb-nav li .depth02-wrap .depth02-box .depth03 li a{font-family: 'PretendardSB'; font-size: 17px; color: #333!important;} .header .gnb-nav li .depth02-wrap .depth02-box .depth03 li:hover a {font-family: 'PretendardB'; color: #0969B3!important; transition: all 0.2s;} .header .gnb-nav li .depth02-wrap .depth02-box .depth03 li:hover + .header .gnb-nav li .depth02-wrap .depth02-box .tit a{color: #0969B3!important;} .header .gnb-nav li .depth02-wrap.menu-01 {flex-wrap: nowrap;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) { width: auto!important;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 {display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto;} /* 왼쪽(1열) */ .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(1) {grid-column: 1;grid-row: 1;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(2) {grid-column: 1;grid-row: 2;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(3) {grid-column: 1;grid-row: 3;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(4) {grid-column: 1;grid-row: 4;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(5) {grid-column: 1;grid-row: 5;} /* 오른쪽(2열) */ .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(6) {grid-column: 2;grid-row: 1; margin-left: 25px;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(7) {grid-column: 2;grid-row: 2; margin-left: 25px;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(8) {grid-column: 2;grid-row: 3; margin-left: 25px;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(9) {grid-column: 2;grid-row: 4; margin-left: 25px;} .header .gnb-nav li .depth02-wrap.menu-01 .depth02-box:nth-child(4) .depth03 > li:nth-child(10) {grid-column: 2;grid-row: 5; margin-left: 25px;} /*header 스크롤시*/ .header.fixed {} .all-menu-btn button {width: 23px; height: 21px; background: url(../img/ico-allmenu.png) no-repeat; background-size: 100%; border: none; cursor: pointer;} .all-menu-wrap {display: none; width: 100%; height: 100%; box-sizing: border-box; background: #fff; position:fixed; top: 0; left: 0; z-index: 999999999; overflow-y: auto; transition: all 0.5s; animation: fade-in 0.5s;} .all-menu-wrap .all-menu-top {display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; background: #0969B3; z-index: 9999999;} .all-menu-wrap h1 {margin: 0; width: 88%; height: 115px; display: flex; align-items: center;} .all-menu-wrap h1 .header-logo {float: left; background: url(../img/logo_wh.png) no-repeat; width: 220px; height: 70px; background-size: 100% !important;} .all-menu-wrap .util-wrap {width: 100%; height: 80px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); background: #fff;} .all-menu-wrap .util-menu {display: flex; align-items: center; gap:30px; width: 88%; height: 100%; margin: 0 auto;} .all-menu-wrap .util-menu li {text-indent: 35px;} .all-menu-wrap .util-menu .login {background: url(../img/ico-login.png)no-repeat 0;} .all-menu-wrap .util-menu .logout {background: url(../img/ico-logout.png)no-repeat 0;} .all-menu-wrap .util-menu .search {background: url(../img/ico-search.png)no-repeat 0;} .all-menu-wrap .util-menu a {display: block; width: 100%; height: 100%; font-size: clamp(14px, 3vw, 16px);} .all-menu-wrap .util-wrap .lang {position: absolute; top: 140px; right: 85px; box-shadow: none; padding: 0;} .all-menu-wrap .btn-close {background: url(../img/btn_close_wh.png)no-repeat; background-size: 100% !important; opacity: 0.3; width: 25px; height: 25px; -webkit-transform: rotate(-90edg); transform: rotate(-90edg); -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 9999999; position: absolute; top: 46px; right: 86px;} .all-menu-wrap .btn-close:hover{transform: rotate(90deg) ; opacity: 1} .depth01-toggle, #depth01-btn {display: none;} .all-menu-wrap .menu-list-wrap {display: flex; flex-direction: column; gap: 0;} .all-menu-wrap .menu-list {display: flex; flex-direction: column; gap: 10px; width: 70%; margin: 0 auto; padding: 50px 0; background: #fff;} .all-menu-wrap .menu-list:last-child {border-bottom: none;} .all-menu-wrap .menu-list .depth01 {width: 20%;} .all-menu-wrap .menu-list .depth01,.all-menu-wrap .menu-list .depth01 a{font-family: 'PretendardB'; font-size: clamp(22px, 2vw, 26px);} .all-menu-wrap .menu-list .depth02-wrap {display: flex; flex-wrap: wrap; width: 100%; gap: 15px;} .all-menu-wrap .menu-list .depth02-box {display: flex; flex-direction: column; position: relative; background: #f9f9f9; border-radius: 10px; padding: 30px; gap: 20px; width: calc((100% - 45px) / 4);} .all-menu-wrap .menu-list .depth02-wrap .depth02-box .tit,.all-menu-wrap .menu-list .depth02-wrap .depth02-box .tit a {font-family: 'PretendardSB'; font-size: clamp(16px, 2vw, 19px); color: #000; display: block;} .all-menu-wrap .menu-list .depth02-wrap.menu-01 .depth02-box .tit a{font-family: 'PretendardB';} .all-menu-wrap .menu-list .depth02-wrap .depth02-box:hover .tit a{color: #0969B3;} .all-menu-wrap .menu-list .depth02-box,.all-menu-wrap .menu-list .depth02-box a{font-family: 'PretendardB'; font-size: 18px; color: #000;} .all-menu-wrap .menu-list .depth02-wrap .depth02-box .depth03 {display: flex; flex-direction: column; gap: 10px;} .all-menu-wrap .menu-list .depth02-wrap .depth02-box .depth03 li,.all-menu-wrap .menu-list .depth02-wrap .depth02-box .depth03 li a{font-family: 'PretendardSB'; font-size: clamp(15px, 2vw, 17px); color: #333!important;} .all-menu-wrap .menu-list .depth02-wrap .depth02-box .depth03 li:hover a {color: #0969B3!important; transition: all 0.2s;} /**************** main ****************/ .container {display: table; width: 1350px; margin: 0 auto;} #wrap {float: left; width: 100%; background: #fff;} .section-title {font-family: 'PretendardB'; font-size: clamp(20px, 3vw, 28px); color: #333; display: flex; align-items: center; max-width: 1350px; margin: 0 auto 20px;} .section-title .more a{text-indent: -99999px; background: url(../img/ico-more.png)no-repeat; width: 22px; height: 22px; display: flex;} .section {float: left; width: 100%; height: 100%;} #section1 {float: left; width: 100%; background: #F2F6F9; padding: 40px 0; margin-bottom: 35px;} #section1 .main-slider {position: relative;} #section1 .main-slider .bx-viewport {width: 100%; height: 450px!important; border-radius: 10px;} #section1 .main-slider .slide img {width: 100%; height: 450px; object-fit: cover; display: block;} #section1 .main-slider .bx-controls-direction {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; width: 1430px; pointer-events: none;} #section1 .main-slider .bx-prev,#section1 .main-slider .bx-next {text-indent: -999999px; width: 80px; height: 80px; pointer-events: auto;} #section1 .main-slider .bx-prev {background: url(../img/slide-arrow.png)no-repeat center;} #section1 .main-slider .bx-prev:hover {background: url(../img/slide-arrow-on.png)no-repeat center; transition: all 0.3s;} #section1 .main-slider .bx-next {background: url(../img/slide-arrow.png)no-repeat center; transform: rotate(180deg);} #section1 .main-slider .bx-next:hover {background: url(../img/slide-arrow-on.png)no-repeat center; transition: all 0.3s;} #section1 .main-slider .slide-counter {position: absolute; bottom: 20px; right: 88px; background: rgba(0,0,0,0.4); padding: 5px 15px; border-radius: 20px; color: #fff; font-size: clamp(12px, 3vw, 14px); z-index: 99999;} #section1 .main-slider .slide-counter .current{font-weight: 700;} .main-slider .bx-controls-auto{position: absolute; bottom: 20px; right: 30px; background: rgba(0,0,0,0.4);padding: 5px 15px; border-radius: 20px; display: flex; align-items: center; gap: 5px; height: 35px;} .main-slider .bx-wrapper .bx-controls-auto .bx-stop {display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(../img/controls.png) -86px -55px no-repeat;} .main-slider .bx-wrapper .bx-controls-auto .bx-start {display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(../img/controls.png) -86px -22px no-repeat;} #section2 .container {display: flex; flex-wrap: wrap; gap: 70px;} #section2 .container .main-notice {flex: 1;} #section2 .section-title {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px #000 solid; padding-bottom: 10px;} #section2 ul {display: flex; flex-direction: column; gap: 5px; } #section2 li {display: flex; justify-content: space-between; align-items: center; /*border-bottom: 1px #ddd solid; padding-bottom: 4%;*/} #section2 li .title {max-width: 520px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #section2 li .title,#section2 li .title a{font-family: 'PretendardM'; font-size: clamp(17px, 3vw, 20px); color: #333;} #section2 li .date {font-family: 'PretendardM'; font-size: clamp(14px, 3vw, 15px); color: #999;} #section3 {background: #DEF2F5; display: flex; padding: 40px 0 60px; margin: 60px 0 40px;} #section3 .section-title {display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; font-family: 'PretendardSB'; font-size: clamp(20px, 3vw, 28px); gap: 5px; margin-bottom:3%} #section3 .section-title span {background: url(../img/section3-title.png)no-repeat; width: 177px; height: 57px; text-indent: -99999px;} #section3 .section-title p {margin-left: auto; font-family: 'PretendardSB'; font-size: clamp(13px, 3vw, 18px); color: #1266B1; position: relative; top: 20px;} #section3 .con-box-wrap {display: flex; gap: 30px;} #section3 .con-box {width: 330px; height: 400px; background: #000; border-radius: 10px; position: relative; overflow: hidden; z-index: 0; box-shadow: 0 0 2rem 0 #0000000a;} #section3 .con-box::before {content: ""; background: linear-gradient(360deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 36%); width: 100%; height: 100%; position: absolute; bottom: 0; z-index: 0;} #section3 .con-box a {display: flex; width: 100%; height: 100%; align-items:center;} #section3 .con-box a:hover .thumb img{transform: scale(1.1);} #section3 .con-box .thumb {position: absolute; z-index: -1; opacity: 0.8;} #section3 .con-box .thumb img{width: 330px; height: 400px; object-fit: cover;} #section3 .con-box .title-wrap {display: flex; flex-direction: column; gap: 20px; width: 100%; height: 100%; padding: 30px; z-index: 9999;} #section3 .con-box .boxtitle {color: #fff; margin-bottom: auto; font-family: 'PretendardSB'; font-size: clamp(14px, 3vw, 16px);} #section3 .con-box .title,#section3 .con-box .title a{color: #fff; font-family: 'PretendardSB'; font-size: clamp(19px, 3vw, 24px); line-height: 1.5;} #section3 .con-box .name{color: #fff; font-family: 'PretendardM'; font-size: clamp(14px, 3vw, 15px);} #section3 .con-text {background: #fff; width: 630px;} #section3 .con-text::before {display: none;} #section3 .con-text .title-wrap {height: 400px; gap: 12px; padding: 30px 45px 35px;} #section3 .con-text .boxtitle {color: #003975; margin: 0;} #section3 .con-text .title {margin-bottom: auto;} #section3 .con-text .title,#section3 .con-text .title a {color: #282828;} #section3 .con-text ul {display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px #ddd solid;} #section3 .con-text ul:last-child {border-bottom: none; padding-bottom: 0!important;} #section3 .con-text li.title {max-width: 480px; margin-right: auto;} #section3 .con-text li.title,#section3 .con-text li.title a{color: #282828; font-family: 'PretendardM'; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.4;} #section3 .con-text li.name {color: #555; font-family: 'PretendardM';} #section3 .con-text .col-4 {display: flex; flex-direction: column; gap: 15px;} #section3 .con-text .col-4 ul {padding-bottom: 15px;} #section3 .con-text .col-3 {display: flex; flex-direction: column; gap: 25px;} #section3 .con-text .col-3 ul {padding-bottom: 25px;} #section3 .con-text .col-6 {display: flex; flex-wrap: wrap; gap: 20px 30px;} #section3 .con-text .col-6 ul {padding-bottom: 20px; width: calc((100% - 30px) / 2);} #section3 .con-text .col-6 ul:nth-child(5) {border-bottom: none; padding-bottom: 0!important;} #section3 .con-text .col-7 {display: flex; flex-wrap: wrap; gap: 15px 30px;} #section3 .con-text .col-7 ul {padding-bottom: 15px; width: calc((100% - 30px) / 2);} #section3 .con-text .col-7 ul:nth-child(7) {border-bottom: none; padding-bottom: 0!important;} #section3 .con-text .col-7 li.title {max-width: 200px;} #section3 .bx-controls {position: absolute; top: 30px; right: 35px;} #section3 .bx-controls-direction {display: flex; justify-content: space-between; gap: 5px;} #section3 .bx-controls-direction .bx-prev {text-indent: -999999px; background: #f1f2f3 url(../img/btn-arrow.png)no-repeat center; transform: rotate(180deg);} #section3 .bx-controls-direction .bx-next {text-indent: -999999px; background: #f1f2f3 url(../img/btn-arrow.png)no-repeat center;} #section3 .bx-controls-direction a {transition: all 0.3s; width: 38px; height: 38px; border-radius: 50%;} #section3 .bx-controls-direction a:hover{opacity: 0.8;} #section3 .bx-controls-direction a.disabled {opacity: 0.5;} /* #section4 {margin-bottom: 70px;} #section4 .con-box-wrap {display: flex; align-items: center; gap: 30px;} #section4 .con-box {display: flex; flex-direction: column; width: 430px; height: 400px; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 0 2rem 0 #0000000a;} #section4 .con-box .thumb {width: 430px; height: 240px; min-height: 240px; overflow: hidden; position: relative;} #section4 .con-box .thumb a {display: block; width: 430px; height: 240px;} #section4 .con-box .thumb img{width: 100%; height: 100%; object-fit: cover; transform: scale(1.03);} #section4 .con-box .thumb img:hover {transform: scale(1.13);} #section4 .con-box .thumb a::after {content: ""; background: url(../img/ico-play.png)no-repeat; width: 80px; height: 81px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #section4 .con-box .thumb a:hover::after {background: url(../img/ico-play-on.png)no-repeat; transition: all 0.3s;} #section4 .con-box .title {width: 84%; height: 160px; display: flex; align-items: center; margin: 0 auto;} #section4 .con-box .title,#section4 .con-box .title a{font-family: 'PretendardSB'; font-size: clamp(19px, 2vw, 24px); color: #282828; line-height: 1.4; word-break: keep-all;} #section4 .con-list {width: 430px; height: 400px; justify-content: space-between; padding: 40px;} #section4 .con-list .title {width: auto; height: auto; margin: 0;} #section4 .con-list .title,#section4 .con-list .title a{font-family: 'PretendardSB'; font-size: clamp(18px, 2vw, 22px); color: #282828; line-height: 1.4; word-break: keep-all;} #section4 .con-list .name,#section4 .con-list .name a{font-family: 'PretendardM'; font-size: clamp(14px, 2vw, 16px); color: #555; line-height: 1.4; word-break: keep-all;} #section4 .con-list .line {border-bottom: 1px #ddd solid;} #section4 .con-list ul {position: relative; display: flex; flex-direction: column; gap: 10px;} #section4 .con-list ul::after {content: ""; background: url(../img/ico-play-s.png)no-repeat; width: 30px; height: 30px; position: absolute; right: 0; top: 50%; transform: translate(0, -50%);} #section4 .con-list ul:hover::after {background: url(../img/ico-play-s-on.png)no-repeat; transition: all 0.3s; cursor: pointer;} */ #section4 {margin-bottom: 40px;} #section4 .section-title .on {color: #da2626;} #section4 .con-box-wrap {display: flex; align-items: center; gap: 30px;} #section4 .con-box {display: flex; flex-direction: column; flex: 1; overflow: hidden; background: #fff;} #section4 .con-box .thumb {width: 100%; height: 240px; min-height: 240px; overflow: hidden; position: relative; border-radius: 10px; } #section4 .con-box .thumb a {display: block; width: 100%; height: 240px;} #section4 .con-box .thumb img{width: 100%; height: 100%; object-fit: cover; /*transform: scale(1.03);*/} #section4 .con-box .thumb img:hover {transform: scale(1.1);} #section4 .con-box .thumb a::after {content: ""; background: url(../img/ico-play.png)no-repeat; width: 80px; height: 81px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #section4 .con-box .thumb a:hover::after {background: url(../img/ico-play-on.png)no-repeat; transition: all 0.3s;} #section4 .con-box .title {display: none!important; width: 100%; height: 120px; display: flex; align-items: center; margin: 0 auto;} #section4 .con-box .title,#section4 .con-box .title a{font-family: 'PretendardSB'; font-size: clamp(19px, 2vw, 24px); color: #282828; line-height: 1.5; word-break: keep-all;} #section4 .con-list {display: none; width: 100%; max-width: 420px; margin-left: 10px; justify-content: space-between; gap: 35px;} #section4 .con-list .title {width: auto; height: auto; margin: 0;} #section4 .con-list .title,#section4 .con-list .title a{font-family: 'PretendardSB'; font-size: clamp(18px, 2vw, 22px); color: #282828; line-height: 1.4; word-break: keep-all;} #section4 .con-list .name,#section4 .con-list .name a{font-family: 'PretendardM'; font-size: clamp(14px, 2vw, 16px); color: #555; line-height: 1.4; word-break: keep-all;} #section4 .con-list .line {border-bottom: 1px #ddd solid;} #section4 .con-list ul {position: relative; display: flex; flex-direction: column; gap: 10px;} #section4 .con-list ul::after {content: ""; background: url(../img/ico-play-s.png)no-repeat; width: 30px; height: 30px; position: absolute; right: 0; top: 50%; transform: translate(0, -50%);} #section4 .con-list ul:hover::after {background: url(../img/ico-play-s-on.png)no-repeat; transition: all 0.3s; cursor: pointer;} #section7 {margin-bottom: 60px;} #section7 .con-box-wrap {display: flex; flex-wrap: wrap; align-items: center; gap: 30px;} #section7 .con-box {flex: 1; width: auto; max-width: 315px; height: 500px; background: #000; border-radius: 10px; position: relative; overflow: hidden; z-index: 0; box-shadow: 0 0 2rem 0 #0000000a; cursor: pointer;} /* #section7 .con-box::before {content: ""; background: linear-gradient(360deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 36%); width: 100%; height: 100%; position: absolute; bottom: 0; z-index: 0;} */ #section7 .con-box .thumbnail-wrapper{width: 100%;} #section7 .con-box .thumb {position: absolute; z-index: -1; opacity: 0.8;} #section7 .con-box .thumb,#section7 .con-box iframe {width: 100%; height: 500px; object-fit: cover; display: block;} #section7 .con-box .thumb img{width: 100%; height: 500px; object-fit: cover;} /* #section7 .con-box .title-wrap {display: flex; align-items: end; width: 100%; height: 100%; padding: 30px; position: absolute; z-index: 9999;} */ #section7 .con-box .boxtitle {color: #fff; margin-bottom: auto; font-family: 'PretendardSB'; font-size: clamp(14px, 3vw, 16px);} #section7 .con-box .title,#section7 .con-box .title a{color: #fff; font-family: 'PretendardSB'; font-size: clamp(19px, 3vw, 24px); line-height: 1.5;} #section7 .con-box .name{color: #fff; font-family: 'PretendardM'; font-size: clamp(14px, 3vw, 15px);} #section7 .con-box.shorts .thumbnail-wrapper { position: relative; overflow: hidden; height: 100%;;} #section7 .con-box.shorts .thumb { position: relative; width: 100%; height: 100%;} #section7 .con-box.shorts .thumb img { display: block; width: 100%; height: 100%; object-fit: cover;} #section7 .con-box.shorts .thumb iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; z-index: 2; pointer-events: none;} #section5 {margin-bottom: 60px;} #section5 .section-title {justify-content: space-between;} #section5 .col-tab {max-width: 1350px;} #section5 .col-tab .col {width: calc((100% - 40px) / 5); flex: none;} #section5 .tab-contents {max-width: 1430px; margin: 0 auto; transition: opacity .15s linear; margin-top: 40px;} #section5 .tab-contents:not {opacity: 0;} #section5 .swiper-slide { flex-shrink:0; width:auto; height:100%; position:relative; transition-property:transform; display:flex; flex-direction: column; align-items: center; gap: 15px;} #section5 .swiper-slide .thumb {width: 190px; height: 293px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25); overflow: hidden; margin:10px 0 30px;} #section5 .swiper-slide .thumb img {width: 190px; height: 293px; object-fit: cover;} #section5 .swiper-slide .biz {max-width: 200px; white-space: nowrap; overflow: hidden; font-family: 'PretendardSB'; font-size: clamp(14px, 3vw, 16px); color: #1266B1; text-align: center;} #section5 .swiper-slide .title,#section5 .swiper-slide .title a {max-width: 190px; font-family: 'PretendardB'; font-size: clamp(17px, 3vw, 21px); line-height: 1.4; color: #333; word-break: keep-all; text-align: center; display: flex; justify-content: center;} #section5 .swiper-slide .lang {max-width: 190px; overflow: hidden; font-family: 'PretendardM'; font-size: 14px; color: #333; background: #F7F8FC; border-radius: 8px; padding: 6px 10px; text-align: center;} #section5 .swiper-slide .writer {max-width: 190px; overflow: hidden; font-family: 'PretendardM'; font-size: clamp(14px, 3vw, 15px); color: #555; line-height: 1.4; text-align: center;} #section6 {float: left; width: 100%; background: #F9F9F9; border-top: 1px #ddd solid;} #section6 .site-link {display: flex; flex-wrap: wrap; justify-content:space-between; align-items: center; padding: 30px 0;} #section6 .site-link li img {mix-blend-mode: darken;} .side-banner {position: absolute; right: 4%; top: 175px; z-index: 2; background: #fff; border-radius: 100px; width: 134px; overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);} .side-banner .bn-tt {background: #0969B3; width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; font-family: 'PretendardSB'; font-size: 18px; color: #fff; position: relative; line-height: 1.4;} .side-banner .bn-tt::after {content: ""; background:#fff url(../img/ico-arrow.png) no-repeat center; width: 25px; height: 25px; border: 2px #0969B3 solid; border-radius: 50%; position: absolute; bottom: -13px;} .side-banner ul { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 25px; padding: 30px 0 25px;} .side-banner li {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin-bottom: 18px;} .side-banner li,.side-banner li a {font-family: 'PretendardM'; font-size: 18px; line-height: 1.4;} .side-banner li a:hover {color: #0969B3;} .side-banner li::after{content: ""; border-bottom: 1px #ccc solid; width: 90px; position: relative; top: 18px;} .side-banner li:last-child::after{display: none;} /**************** 메인 공모 배너 추가 ****************/ .button-wrap {display: flex; align-items: center; gap: 30px; margin-bottom: 30px;} .btn-wrap {display: flex; align-items: center; gap: 30px; width: 100%; } .btn-wrap a {height: 90px; text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; font-size: 1.2rem; font-weight: 600; border-radius: 8px;} .btn-wrap .orange {background-color: #ff7f27;} .btn-wrap .blue {background-color: #00a2e8;} .btn-wrap .green {background-color: #54ce00;} .btn-wrap a span {font-size: 16px; font-weight: 500;} .btn-wrap .close {background-color: rgb(0 0 0 / 14%); padding: 0 10px; border-radius: 6px; margin-top: 2px;} @media screen and (max-width: 768px){ .button-wrap {gap: 10px !important;} .btn-wrap {gap: 10px !important;} .btn-wrap a {line-height: 1.2rem; font-size: 0.8rem; padding: 10px; justify-content: flex-start;} .btn-wrap a span {font-size: 11px; line-height: 16px;} } /**************** sub ****************/ .sub-container {float: left; width: 100%;} .sub-container.bg {background: #F2F6F9;} .sub-main-top {display: flex; flex-direction: column; width: 100%; height: auto; padding: 50px 0; position: relative; /*background: #F2F6F9 url(../img/sub-top-bg.png) no-repeat right;*/} .sub-main-top.bg {background: #F2F6F9;} .sub-main-top.center{padding: 80px 0;} .sub-main-top h2 {display: flex; width: 1350px; margin: 0 auto; font-family: 'PretendardB'; font-size: clamp(27px, 4vw, 50px); color: #000; line-height: normal; margin-bottom: 30px!important; justify-content: center;} .sub-main-top h2.center {text-align: center;justify-content: center;} .sub-main-top h2.small {font-size: 44px;} .page-nav {display: flex; flex-wrap: wrap; align-items: center; width: 1350px; margin: 0 auto; gap: 20px; flex-wrap: wrap; margin-bottom: 60px!important;} .page-nav .home a {float: left; background:url(../img/ico-home.png)no-repeat; width: 16px; height: 17.5px; text-indent: -99999px;} .page-nav .home::before {display: none;} .page-nav li {position: relative; display: flex; align-items: center; gap: 20px;} .page-nav li::before{content: "/"; font-family: 'PretendardT'; font-size: 18px; color: #999;} .page-nav li, .page-nav li a {font-family: 'PretendardM'; font-size:clamp(15px, 3vw, 18px); color: #333; line-height: normal;} .page-nav li:last-child, .page-nav li:last-child a.dropdown-toggle {font-family: 'PretendardSB';} .dropdown-toggle {cursor: pointer; display: flex; gap: 8px; align-items: center;} .dropdown-toggle::after {content: ""; background:url(../img/ico-sub-top-arrow.png) no-repeat; width: 24px; height: 24px; background-size: 100%;} .dropdown-toggle.active::after {transform:rotate(-180deg); transition: all .1s;} .page-nav-menu {display: none; position: absolute; top: 35px; left: 50%; transform: translate(-50%, 0); white-space: nowrap; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding:20px; z-index: 999999; animation: slide-down 0.3s;} .page-nav-menu li a {padding: 8px 0; width: 100%;} .page-nav-menu li::before {display: none;} .page-nav-menu li,.page-nav-menu li a {font-family: 'PretendardM'; font-size: clamp(15px, 3vw, 16px); color: #555;} .ico-newwin {text-indent: -999999px; background: url(../img/ico-newwin.png)no-repeat; background-size:100%; width:15px; height:15px; display: inline-block; position: relative; top: 10px; left: 6px;} .page-nav-menu li a .ico-newwin {width:12px; height:12px; left: 3px; top: 4px;} .col-tab {display: flex; flex-wrap: wrap; width: 100%; max-width: 1350px; margin: 0 auto; gap: 10px;} .col-tab .col {flex: auto; text-align: center; max-width: 670px;} .col-tab .col a {display: flex; justify-content: center; align-items: center; height: 60px; background: #fff; border-radius: 10px; font-family: 'PretendardM'; font-size: clamp(15px, 3vw, 18px);} .col-tab .col.bg a {background: #F9F9F9;} .col-tab .col a:hover {background: #0969B3!important; transition: all 0.3s; color: #fff!important;} .col-tab .col.on a {background: #0969B3!important; color: #fff!important;} .col-tab .col-2 {width: calc(100%/2);} .col-tab.select {display: none;} .sub-tab {display: flex; justify-content: center; gap: 30px; padding: 50px 0;} .sub-tab li,.sub-tab li a {font-family: 'PretendardSB'; font-size: clamp(17px, 3vw, 25px);} .sub-tab li.current,.sub-tab li.current a{font-family: 'PretendardB'; color: #0969B3;} .sub-tab li.current{border-bottom: 4px #0969B3 solid;} .sub-table {width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; margin: 20px 0;} .sub-table table {width: 100%;border-collapse: collapse;} .sub-table tr {border-bottom: 1px #ddd solid;} .sub-table tr.bg {background: #F2F6F9;} .sub-table tr:first-child {border-bottom: none;} .sub-table tr:first-child th{font-weight: normal; font-family: 'PretendardSB'; color: #000;border-bottom: 2px #000 solid;} .sub-table tr.notice {background: #F2F6F9;} .sub-table th,.sub-table td{padding: 20px 10px; font-size: clamp(18px, 3vw, 18px); text-align: center; position: relative;} .sub-table th {font-weight: normal; font-family: 'PretendardSB'; color: #000;white-space: nowrap;} .sub-table td {font-family: 'PretendardM'; color: #666; font-size: clamp(14px, 3vw, 18px);} .sub-table td.strong{font-family: 'PretendardSB'; color: #000;} .sub-table td.title,.sub-table td.subject {text-align: left; max-width: 850px; line-height: 1.5;} .sub-table td.title,.sub-table td.subject,.sub-table td.title a,.sub-table td.subject a {font-size: clamp(15px, 3vw, 19px); color: #000;} .sub-table td.title,.sub-table td.year {font-family: 'PretendardSB'; font-size: clamp(18px, 3vw, 22px); color: #000;} .sub-table td.title a:hover {color: #0969B3; transition: all 0.3s; text-decoration: underline!important;} .sub-table td.no span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 5px; font-size: clamp(13px, 3vw, 16px); line-height: 1; background: #0969B3; color: #fff; padding: 7px 10px; white-space: nowrap;} .sub-table td.file a {display: flex; align-items: center; justify-content: center;} .sub-table.border table {border-top: none!important;} .sub-table.border table,.sub-table.border th,.sub-table.border td{border : 1px solid #ddd;} .sub-table a.btn-file {display: flex; justify-content: center; align-items: center; gap: 5px; width: 90px; height: 40px; border: 1px #ddd solid; background: #f9f9f9; border-radius: 5px; margin: 0 auto; line-height: 1;} .sub-table a.btn-file:hover {border: 1px #555 solid;} .sub-table a.btn-file::after {content: ""; background: url(../img/ico-down.png)no-repeat; width: 15px; height: 15px;} .sub-table .top {display: flex; gap: 5px;} .sub-table .top p {font-size: 14px; margin-left: auto;} .state span {display: flex; justify-content: center; align-items: center; margin: 0 auto; border-radius: 5px; width: 70px; padding: 7px; font-size: 14px;} .state span.st1{border: 1px #0969B3 solid; color: #0969B3;} .state span.st2{border: 1px #999 solid; color: #666;} /* 검색창 */ .search-wrap {display: flex; justify-content: center; margin: 30px 0 50px;} .search-inner {display: flex; gap: 5px;} .search-inner select{width: 100px;} .search-inner button{width: 100px;} /* 통합검색 */ .result-wrap {display: flex; flex-direction: column; justify-content: center; width: 1350px; margin: 0 auto;} .result-top {display: flex; align-items: end; justify-content: space-between; border-bottom: 1px #333 solid; font-family: 'PretendardB'; font-size: 25px; padding: 25px 0; margin-top: 50px; margin-bottom: 25px;} .result-top:first-child {margin-top: 0;} .result-top:first-child strong {color: #0969B3;} .result-top span {font-family: 'Pretendard'; font-size: 16px; color: #555; margin-left: 5px;} .result-top div:last-child {font-family: 'Pretendard'; font-size: clamp(14px, 3vw, 16px); color: #555; margin-left: 5px;} .result-top div:last-child strong {color: #000;} .result-box {display: flex; border-bottom: 2px #ddd dashed; padding-bottom: 25px; margin-bottom: 25px; gap: 50px;} .result-box li.text {display: flex; flex-direction: column;} .result-box li.thumb {width: 100%; max-width: 200px; height: 140px; overflow: hidden; border: 1px #ddd solid;} .result-box li.thumb a {display: flex; align-items: center; height: 100%;} .result-box li.thumb img {width: 100%; height: 100%; object-fit: contain;} .result-box:not(:has(.thumb img)) {gap: 0;} .result-box:not(:has(.thumb img)) .thumb {display: none;} .result-box:not(:has(.thumb img)) .text {flex: 1;} .result-box .tit {font-family: 'PretendardSB'; font-size: clamp(16px, 3vw, 20px); color: #333; margin-bottom: 10px;} .result-box .tit span {font-family: 'PretendardSB'; background: #eee; border-radius: 10px; padding: 3px 15px; font-size: clamp(14px, 3vw, 16px); margin-right: 5px;} .result-box .cont {text-align: justify; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; height: auto; text-overflow: ellipsis; overflow: hidden;} .result-box .cont, .result-box .cont a{font-family: 'Pretendard'; font-size: clamp(14px, 3vw, 17px); line-height: 1.5; color: #555;} .result-box .date {margin-top: auto; font-family: 'Pretendard'; font-size: clamp(14px, 3vw, 15px); color: #666;} .result-wrap .result-box a:hover {text-decoration: underline!important;} #bbs_skin1_view {display: flex; flex-direction: column; margin-bottom: 5%;} #bbs_skin1_view .title {padding: 50px 0; font-family: 'PretendardB'; font-size: clamp(18px, 3vw, 26px); line-height: normal; color: #000; text-align: center; background: #fff; border-top: 2px solid #333; border-bottom: 1px solid #333;} #bbs_skin1_view .etc {display: flex; justify-content: space-between; background: #f7f7f7; padding: 20px;} #bbs_skin1_view .etc div{display: flex; gap: 10px; font-size: clamp(14px, 3vw, 16px);} #bbs_skin1_view .etc div span{font-family: 'PretendardSB'} #bbs_skin1_view .contents {font-family: 'Pretendard'!important; font-size: clamp(16px, 3vw, 18px); line-height: 1.6; padding: 1% 0 5%; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; text-align: justify;} #bbs_skin1_view .contents iframe {width: 100%;} #bbs_skin1_view .contents,#bbs_skin1_view .contents p, #bbs_skin1_view .contents span, #bbs_skin1_view .contents div {font-family: 'Pretendard'!important; line-height: 1.6!important; font-size: clamp(16px, 3vw, 19px)!important;} #bbs_skin1_view .contents .ip {font-size: clamp(14px, 3vw, 15px)!important; color: #999; margin-top: 40px;} #bbs_skin1_view .contents .center{text-align: center; margin: 0 auto;} #bbs_skin1_view .contents .bold{font-family: 'PretendardSB'!important} #bbs_skin1_view .contents .fdawn_file {padding: 1% 1% 0; font-size: clamp(14px, 3vw, 16px);} #bbs_skin1_view .contents .fdawn_file .fdawn_file_box a {text-decoration: underline!important;} #bbs_skin1_view .contents table {width: auto!important; max-width: 1350px;} #bbs_skin1_view .bbs-btn {display: flex; justify-content: space-between; border-top: 1px #000 solid; padding-top: 10px;} #bbs_skin1_view .bbs-btn div{display: flex; gap: 5px;} #bbs_skin1_view .bbs-btn div a{display: flex; justify-content: center; align-items: center; padding: 5px 15px; color: #0969B3; font-family: 'PretendardSB'; border:1px #0969B3 solid; border-radius: 5px; font-size: clamp(14px, 3vw, 16px); line-height: normal;} .bbs_write {position:relative; text-align:left;} .bbs_write table {width:100%; padding:0; border-top:1px solid #a0a0a0; border-collapse:collapse;} .bbs_write th {width:120px; background:#f3f3f3; font:normal 14px/16px 'PretendardSB'; color:#333; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0; padding:8px 0 8px 7px; text-align:left;} .bbs_write td {border-bottom:1px solid #e0e0e0; padding:5px; font:normal 13px/16px 'Pretendard'; color:#666;} .bbs_write td input {font-family: 'Pretendard'; font-size:14px; color:#000; height: auto!important;} .bbs_write td .input {height:35px!important; padding:0 10px; box-sizing: border-box; border:1px solid #d0d0d0; background:#fff; font-family: 'Pretendard'; font-size:16px; color:#000; border-radius: 5px;} .bbs_write textarea {width: 100%;} .bbs_write td span.red {color:#ff0000;} .bbs_write td span.name {font:normal 14px/16px 'PretendardSB'; color:#000;} .bbs_write .bt_box {width:100%; text-align:center; padding:15px 0;} .btn-bbs-write {display: flex; justify-content: end; margin: 30px 0 0;} .btn-bbs-write a {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; color: #0969B3; font-family: 'PretendardSB'; border:1px #0969B3 solid; border-radius: 5px; font-size: clamp(14px, 3vw, 16px); line-height: normal;} .page-limit,.page_limit,.page_view {display: flex; justify-content: center; align-items: center; margin: 30px 0; overflow-x: auto;} .paging {display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; border: 1px #ddd solid;} .paging a,.paging strong {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-right: 1px #ddd solid; font-size: clamp(14px, 3vw, 15px);} .paging a:last-child {border-right: none;} .paging a:hover {background: #f7f7f7;} .paging strong{color: #007DDD; font-family: 'PretendardSB'; border-bottom:2px #007DDD solid;} .paging a.pre,.paging a.next {text-indent: -99999em; white-space: nowrap; overflow: hidden; background: #f7f7f7; color: transparent;} .paging a.pre img,.paging a.next img{display: none;} .paging a.pre::before {content: "";background: url(../img/ico-arrow.png)no-repeat center; transform: rotate(90deg); width: 12px; height: 6px; z-index: 999999;position: absolute;} .paging a.next::before {content: "";background: url(../img/ico-arrow.png)no-repeat center; transform: rotate(-90deg); width: 12px; height: 6px; z-index: 999999;position: absolute;} /* 이용약관,개인정보처리방짐 */ .policy-list {display:flex; justify-content: center; gap: 70px; background: #F9F9F9; border-radius: 10px; padding: 50px; z-index: 1;} .policy-list ol {display: flex; flex-direction: column; gap: 10px;} .policy-list li span {margin-right: 5px;} .policy-contents .h3 {border-top: 1px #ddd dashed;} .policy-contents div:first-child .h3 {border-top: none; margin-top: 0; padding-top: 0;} .policy-contents .box {display: table;} /* 로그인 */ .login-wrap {display: flex; justify-content: center; align-items: center; width: 800px; margin: 0 auto 50px; background: #F9F9F9; border: 1px #ddd solid; /*box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);*/ border-radius: 10px; padding: 50px;} .login-inner{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;} .sub-title {font-family: 'PretendardB'; font-size: clamp(24px, 3vw, 34px); text-align: center;} .login-form {display: flex; flex-direction: column; gap: 10px; width: 400px; margin-top: 10px;} .login-link {display: flex; justify-content: center; gap: 15px;} .login-link a {display: flex; align-items: center;} .login-link,.login-link a {font-family: 'PretendardM'; font-size: clamp(14px, 3vw, 16px); color: #333;} .login-link li{display: flex; gap: 15px;} .login-link li:first-child::after{content: "｜"; display: flex; font-family: 'PretendardT'; font-size: 14px; color: #999;} .login-link li a::before {content: ""; float: left; width: 15px; height: 15px; opacity: 0.8; margin-right: 5px; position: relative; top:-1px;} .login-link li.join a::before {background: url(../img/ico-login.png) no-repeat; background-size: 100%;} .login-link li.find a::before {background: url(../img/ico-search.png)no-repeat; background-size: 100%;} .login-link li a:hover {text-decoration: underline!important;} /* 아이디/패스워드 찾기 */ .login-find-wrap {display: flex; flex-wrap: wrap; gap: 30px;} .login-find-box {display: flex; flex: 1; justify-content: center; align-items: center; background: #F9F9F9; border: 1px #ddd solid; border-radius: 10px; padding: 50px;} .login-find-box .sub-title {font-size: 28px;} .login-find-box .sub-title p{font-family: 'Pretendard'; font-size: 16px; margin-top: 7px;} /*회원가입*/ .join-wrap {display: flex; flex-direction: column; margin: 0 auto;} .join-wrap .join-process {display: flex; flex-wrap: wrap; width: 70%; margin: 0 auto 50px;} .join-wrap .join-process li {flex: 1; display: flex; align-items: center; justify-content: center; gap: 15px; text-align: center; position: relative; font-family: 'PretendardB'; font-size: clamp(15px, 3vw, 18px); color: #999;} .join-wrap .join-process li::after {content: ""; background: url(../img/ico-caret.png) no-repeat; width: 13px; height: 18px; position: absolute; right: -7px;} .join-wrap .join-process li:last-child:after{display: none;} .join-wrap .join-process li .num {display: flex; justify-content: center; align-items: center; font-family: 'PretendardB'; font-size: 22px; position: relative; color: #666;} .join-wrap .join-process li .num::before {/*content:"";*/ background: #999; width: 35px; height: 35px; border-radius: 50%; position: absolute; z-index: -99999;} .join-wrap .join-process li.on {color: #0969B3;} .join-wrap .join-process li.on .num {color: #0969B3;} .join-wrap .join-process li.on .num::before {background: #0969B3;} .join-wrap .sub-box p {text-align: center; font-family: 'PretendardM'; font-size: clamp(16px, 3vw, 19px); line-height: 1.6; word-break: keep-all;} .join-qna-wrap {display: flex; flex-direction: column; gap: 20px; margin: 50px 0 0;} .join-qna-wrap .join-qna {display: flex; flex-direction: column; gap: 10px; background: #f9f9f9; border-radius: 10px; padding: 30px; position: relative;} .join-qna-wrap .join-qna::before {content: "Q."; font-size: 25px; font-family: 'PretendardB'; color: #035ca0; line-height: 1; position: absolute;} .join-qna-wrap .join-qna li {margin-left: 30px;} .join-qna-wrap .join-qna li:first-child {font-family: 'PretendardB'; font-size: clamp(17px, 3vw, 19px); line-height: 1.4;} .join-qna-wrap .join-qna li:last-child {font-family: 'Pretendard'; font-size: clamp(15px, 3vw, 17px); line-height: 1.4;} .agree-cont {display: flex; flex-direction: column;} .agree-cont .agree-title{font-family: 'PretendardB'; font-size: clamp(15px, 3vw, 22px);} .agree-cont .agree-box {background: #fff; border: 1px #ddd solid; padding: 20px; margin: 10px 0 30px; overflow-y: auto; max-height: 250px; font-family: 'Pretendard'; font-size: clamp(14px, 3vw, 16px); line-height: 1.6; color: #282828; word-break: break-all;} .agree-cont .agree-check {display: flex; justify-content: end; align-items: center; gap: 5px;} .agree-cont .agree-check label {font-family: 'PretendardB'; font-size: clamp(15px, 3vw, 18px);} .agree-cont .agree-check label span {color: red;} .agree-cont .agree-check.center {justify-content: center;} .join-form {display: flex; flex-direction: column; gap: 20px; margin: 0 auto;} .join-form ul{display: flex; align-items: center;} .join-form li.title {width: 130px; font-family: 'PretendardSB'; font-size: 17px;} .join-form li {width: 100%; line-height: 1.5;} .join-form li .col {width: 100%;} .join-form li.state span {margin: 0;} .join-form button {white-space: nowrap; width: auto!important;} .join-form .col2{display: flex; gap: 5px; flex-wrap: nowrap;} .join-form .col2 p.col {font-family: 'PretendardM'; font-size: 15px; text-align: left; white-space: nowrap; width: auto!important;} .join-form .col3{display: flex; gap: 5px; flex-wrap: nowrap;} .join-form .col3 .col {width: calc(100% / 3);} .join-step03-bg {background: #0969B3 url(../img/ico-check-wh.png) no-repeat center; width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%;} /* form control */ .form-control {border-radius: 8px; font-size: clamp(14px, 3vw, 16px)!important; font-family: 'PretendardM'; padding: 15px; border: 1px #dedede solid; color: #333;} .form-control::placeholder {color: #999;} .form-control:hover {border-color: #0969B3; transition: all 0.3s;} button.form-control {cursor: pointer; color: #fff; border: none;} button.form-control.btn {background: #5c636a;} button.form-control.btn:hover {background: #3f474f; transition: all 0.3s;} button.form-control.btn-bl {background: #0969B3;} button.form-control.btn-bl:hover {background: #064c82; transition: all 0.3s;} button.form-control.btn-rd {background: #da2626;} button.form-control.btn-rd:hover {background: #cb1313; transition: all 0.3s;} textarea.form-control {height: 220px;} .btn-wrap {display: flex; justify-content: center; gap: 5px;} .btn-wrap .btn {min-width: 20%;} .btn-wrap.col2 .btn {width: calc(100% / 2)} input[type="checkbox"] {width: 20px; height: 20px; cursor: pointer; margin: 0; padding: 0;} select.form-control {appearance: none; background: #fff url(../img/ico-arrow.png) no-repeat right 20px center; color: #999; cursor: pointer;} h3, .h3 {font-size: clamp(17px, 3vw, 20px); font-family: 'PretendardSB'} .sub-content {float: left; width: 100%; font-family: 'Pretendard'; font-size: 18px; line-height: 1.6; color: #282828;} .sub-inner {display: flex; flex-direction: column; justify-content: center; max-width: 1350px; margin: 0 auto; font-size: clamp(15px, 3vw, 17px); margin-bottom: 100px;} .sub-box {/*background: #F9F9F9; border: 1px #ddd solid;*/ background: #fff; box-shadow: 0 0 2rem 0 #0000000a; border: 1px #ededed solid; border-radius: 10px; padding: 60px; word-break: keep-all;} .sub-box-gy {/*float: left;*/ width: 100%; background: #F9F9F9; border-radius: 10px; padding: 50px;} .sub-box-gy.small {font-size: clamp(15px, 3vw, 17px);} .sub-box-bg {float: left; width: 100%; background: #F9F9F9; border-radius: 10px; padding: 50px;} .sub-box-bg.small {font-size: clamp(15px, 3vw, 17px);} .info-text {text-align: center; font-family: 'Pretendard'; line-height: 1.4; font-size: clamp(14px, 3vw, 17px); word-break: keep-all;} .info-text strong {font-family: 'PretendardR'; text-decoration: underline;} .greeting-wrap {display: flex; gap: 80px;} .greeting-wrap .greeting-img {text-align: center;} .greeting-wrap .greeting-img img{max-width: 250px;} .greeting-wrap .greeting-text {font-size: clamp(16px, 3vw, 19px); text-align: justify; text-align-last: left; display: flex; flex-direction: column; gap: 50px;} .greeting-wrap .greeting-text .title {font-family: 'PretendardB'; font-size: clamp(28px, 3vw, 44px); line-height: 1.4; letter-spacing: -0.05em; background: url(../img/kb-symbol.png) no-repeat right bottom; padding-bottom: 6%; background-size: 15%; border-bottom: 1px #ddd solid;;} .greeting-wrap .greeting-text .sign p{display: flex; justify-content: end; align-items: center; gap: 15px;} .greeting-wrap .greeting-text .sign .sign-img {background: url(../img/intro-sign.png)no-repeat; display: flex; width: 104px; height: 54px;} .profile-wrap {display: flex; gap: 100px;} .profile-wrap div {width: calc(100% / 2); display: flex; flex-direction: column; gap: 15px;} .profile-wrap .title{font-family: 'PretendardEB'; font-size: clamp(20px, 3vw, 30px); padding-bottom:2%} .profile-wrap ul {display: flex;} .profile-wrap li.year{/*width: 30%;*/ font-family: 'PretendardSB'; font-size: clamp(16px, 3vw, 20px); word-break: break-word; margin-right: auto;} .profile-wrap li.cont{width: 70%; font-size: clamp(16px, 3vw, 18px); line-height: 1.6;} .profile-wrap div:last-child li.year {/*width: 15%;*/} .profile-wrap div:last-child li.cont {width: 85%;} .sub-cont-list {display: flex; border-bottom: 2px #dedede dashed; padding-bottom: 40px; margin-bottom: 40px;} .sub-cont-list:last-child{border-bottom: none; padding-bottom: 0; margin-bottom: 0;} .sub-cont-list .title {font-family: 'PretendardB'; font-size: clamp(18px, 2vw, 28px); line-height: normal; display: flex; gap: 35px; position: relative; /*margin-left: 60px;*/ max-width: 220px;} .sub-cont-list .title::before {/*content: "";*/ background: url(../img/ico-sub-list.png)no-repeat; width: 36px; height: 37px; display: inline-flex; position: absolute; left: -60px;} .sub-cont-list .cont {font-size: clamp(16px, 3vw, 20px); word-break: keep-all; width: 1100px; margin-left: auto; display: flex; flex-direction: column; gap: 10px;} .sub-cont-list .cont .col-2{display: flex; gap: 20px;} .sub-cont-list .cont .stitle{font-family: 'PretendardB'; font-size: clamp(17px, 3vw, 21px); margin-top: 15px;} .sub-cont-list .cont .stitle:first-child {margin-top: 0;} .sub-cont-list .cont .ref{font-family: 'PretendardM'; font-size: clamp(15px, 3vw, 17px); color: #888; line-height: 1.6;} .sub-cont-list .cont .year {font-family: 'PretendardSB'; font-size: clamp(16px, 3vw, 20px); min-width: 10%; } .sub-cont-list .cont .list {display: flex; flex-direction: column; gap: 10px;} .sub-cont-list .cont .list li {display: flex; gap: 10px; position: relative; margin-left: 18px;} .sub-cont-list .cont .list li b {white-space: nowrap;} .sub-cont-list .cont .list li .dt {font-family: 'PretendardSB';} .sub-cont-list .cont .list li::before {content: ""; background: url(../img/ico-dot.png)no-repeat; min-width: 7px; height: 7px; position: absolute; top: 12px; left: -18px; background-size: 100%;} .sub-cont-list .cont .list li.mark-no::before{display: none;} .ct_tab01 {padding: 60px 0 0;} .ct_tab01 img {display: none;} .ct_tab01 dl {display: flex; border-bottom: 2px #dedede dashed; padding-bottom: 6%; margin-bottom: 6%; flex-wrap: wrap;} .ct_tab01 dl:last-child{border-bottom: none; padding-bottom: 0; margin-bottom: 0;} .ct_tab01 dl dt {font-family: 'PretendardB'; font-size: clamp(18px, 3vw, 26px); white-space: nowrap; line-height: normal; display: flex;gap: 35px; width: 300px;} .ct_tab01 dl dt::before {content: ""; background: url(../img/ico-sub-list.png)no-repeat; width: 36px; height: 37px; display: inline-flex; display: none;} .ct_tab01 dl dt::after {content: ""; border-bottom: 2px #dedede dashed; padding-bottom: 6%; margin-bottom: 6%;} .ct_tab01 dl dd {font-size: clamp(16px, 3vw, 19px); text-align: justify; margin-left: auto; display: flex; flex-direction: column; width: 1050px;} .ct_tab01 dl dd::after {content: ""; border-bottom: 2px #dedede dashed; padding-bottom: 6%; margin-bottom: 6%;} .ct_tab01 dl dd .b {font-family: 'PretendardB'; font-size: clamp(16px, 3vw, 21px);} .ct_tab01 dl dd .col-2{display: flex; gap: 20px;} .ct_tab01 dl dd .year {font-family: 'PretendardSB'; font-size: clamp(16px, 3vw, 20px); min-width: 10%; } .ct_tab01 dl dd br {display: none;} .ct_tab02 {position: relative; padding: 0 0 0; overflow: hidden; z-index: 99999;} .ct_tab02 .bx-wrapper {display: flex; margin: 3% auto; background: #FFF; overflow: hidden;} .ct_tab02 .ntime-tab {display: none;} .ct_tab02 .ntime {z-index: 99999; display: flex; overflow: hidden;} .ct_tab02 .ntime li {text-align: center;} .ct_tab02 .ntime li,.ct_tab02 .ntime li a {font-family: 'PretendardM'; font-size: clamp(17px, 3vw, 24px); line-height: normal;} .ct_tab02 .ntime li.sel,.ct_tab02 .ntime li.sel a{color: #0969B3; font-family: 'PretendardSB';} .ct_tab02 .bx-controls {position: absolute; left: 50%; transform: translate(-50%, 0); width: 100%; max-width: 1150px!important;} .ct_tab02 .bx-controls-direction {display: flex; justify-content: space-between;} .ct_tab02 .bx-controls-direction .bx-prev {text-indent: -999999px; background: url(../img/btn-controls-arrow.png)no-repeat; width: 16px; height: 27px;} .ct_tab02 .bx-controls-direction .bx-next {text-indent: -999999px; background: url(../img/btn-controls-arrow.png)no-repeat; width: 16px; height: 27px; transform: rotate(180deg);} .ct_tab02 .bx-controls-direction a {opacity: 0.5; transition: all 0.3s;} .ct_tab02 .bx-controls-direction a:hover{opacity: 0.8;} .ct_tab02 .ntime_tit {padding: 40px 0; display: flex; width: 100%; justify-content: center; align-items: center; flex-direction: column; font-family: 'PretendardB'; font-size: clamp(22px, 3vw, 44px); line-height: normal;} .ct_tab02 .ntime_tit .year {font-family: 'PretendardSB'; font-size: clamp(16px, 3vw, 28px);} .ct_tab02 dl {display: flex; border-bottom: 2px #dedede dashed; padding-bottom: 6%; margin-bottom: 6%; flex-wrap: wrap;} .ct_tab02 dl:last-child{border-bottom: none; padding-bottom: 0; margin-bottom: 0;} .ct_tab02 dl dt {font-family: 'PretendardB'; font-size: clamp(18px, 3vw, 28px); white-space: nowrap; line-height: normal; display: flex; align-items: center; gap: 20px; width: 100%; border-top: 2px #dedede dashed; padding-top: 40px; margin-top: 40px; margin-bottom: 20px;} .ct_tab02 dl dt span {font-family: 'PretendardSB'; font-size: clamp(15px, 3vw, 20px); color: #666;} .ct_tab02 dl dt:first-child{border-top: none; padding-top: 0; margin-top: 0;} .ct_tab02 dl dt::before {content: ""; background: url(../img/ico-sub-list.png)no-repeat; width: 36px; height: 37px; display: inline-flex; display: none;} .ct_tab02 dl dd {font-size: clamp(16px, 3vw, 19px); text-align: justify; /*display: flex;*/ flex-direction: column; gap: 10px; width: 100%;} .ct_tab02 dl dd .stab {display: flex; margin-bottom: 3%;} .ct_tab02 dl dd .stab li{display: flex; flex: 1; justify-content: center; border-right: 1px #fff solid;} .ct_tab02 dl dd .stab li:last-child{border-right: none;} .ct_tab02 dl dd .stab li a{display: flex; width: 100%; height: 50px; justify-content: center; align-items: center; background: #d9d9d9; font-family: 'PretendardM'; font-size: clamp(14px, 3vw, 18px); line-height: normal; white-space: nowrap;} .ct_tab02 dl dd .list{display: flex; flex-direction: column; gap: 10px;} .ct_tab02 dl dd .list li {display: flex; gap: 10px;} .ct_tab02 dl dd .list li b {white-space: nowrap;} .ct_tab02.dt_view2 .sub-table td {font-size: clamp(14px, 3vw, 20px);} .ct_tab03 {position: relative; padding: 60px 0 0} .ct_tab03 .form_dn {display: none;} .ct_tab04 {display: flex; flex-direction: column;} .ct_tab04 .tab_le03 {display: flex; margin-bottom: 3%; order: -1;} .ct_tab04 .tab01_box{display: flex; flex-wrap: wrap; width: 100%; gap: 10px;} .ct_tab04 .tab01_box li{display: flex; flex: 1; justify-content: center; border: 1px #ddd solid; border-radius: 10px; transition: all 0.3s;} .ct_tab04 .tab01_box li:hover{border: 1px #0969B3 solid; cursor: pointer;} .ct_tab04 .tab01_box li:hover a {color: #0969B3;} .ct_tab04 .tab01_box li.current {border: 1px #0969B3 solid;} .ct_tab04 .tab01_box li.current a {color: #0969B3;} .ct_tab04 .tab01_box li a{font-family: 'PretendardSB'; font-size: clamp(14px, 3vw, 17px); line-height:1.4; color: #777; display: flex; align-items: center; justify-content:center; width: 100%; height: 50px} .ct_tab04 .book {display: flex; flex-wrap: wrap; gap: 47px;} .ct_tab04 .book li {width: calc((100% - 47px) / 2); border: 1px #ddd solid; border-radius: 10px; padding: 35px; display: flex; gap: 40px; align-items: start; position: relative;} .ct_tab04 .book li .img {display: flex;} .ct_tab04 .book li .img img {width: 180px; height: auto; object-fit: cover; box-shadow: 0 0 2rem 0 #0000000a; border: 1px #ededed solid;} .ct_tab04 .book li .info {display: flex; flex-direction: column; gap: 25px;} .ct_tab04 .book li .info .title {display: flex; flex-direction: column; gap: 5px; font-family: 'PretendardB'; font-size: clamp(17px, 3vw, 24px); line-height: 1.2; color: #333;} .ct_tab04 .book li .info .title .sec {font-family: 'PretendardSB'; font-size: clamp(13px, 3vw, 18px); line-height: 1.6; color: #0969B3;} .ct_tab04 .book li .info .info-li {display: flex; flex-direction: column; gap: 8px; font-family: 'PretendardM'; font-size: clamp(13px, 3vw, 16px); color: #555;} .ct_tab04 .book li .info .info-li dl{display: flex; width: 100%; border: none; padding: 0; gap:20px; line-height: normal;} .ct_tab04 .book li .info .info-li dl dt {font-family: 'PretendardSB'; font-size: clamp(13px, 3vw, 16px); color: #333; width: 55px; min-width: 55px; text-align: justify; letter-spacing: -2px; text-align-last: justify;/* 한 줄일 때도 양쪽 정렬 */ text-justify: inter-character; /* 한글 간격 균등 */} .ct_tab04 .book li .info .info-li dl dd {font-size: clamp(13px, 3vw, 16px); letter-spacing: 0; word-break: break-all;} .ct_tab04 .book li .info .summ {display: none; font-family: 'Pretendard'; font-size: clamp(13px, 3vw, 15px); line-height: 1.6; color: #555; text-align: justify;} .ct_tab04 .book li .info .btn {position: absolute; top: 20px; right: 20px;} .ct_tab04 .book li .info .l {display: none;} .history-book {display: flex; gap: 50px;} .history-book .book-img {} .history-book .book-img img {width: 160px; border:1px #ddd solid} .history-book .book-text{} .ideo-wrap {margin: 80px 0;} .ideo-wrap .cont.strong{font-family: 'PretendardB'; font-size: clamp(17px, 3vw, 24px); line-height: normal;} .ideo-top {width: 100%; /*background: url(../img/ideo-top-bg.png) no-repeat; background-size: cover;*/ position: relative; margin-bottom: 80px; padding-bottom: 80px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 35px; border-bottom: 2px #dedede dashed;} .ideo-top .title{font-size: clamp(28px, 3vw, 46px); font-family: 'PretendardB'; position: relative; z-index: 0;} .ideo-top .title span {color: #0969B3;} /* .ideo-top .title::before {content: ""; background: #EAF6FF; z-index: -1; width: 48px; height: 48px; position: absolute; top: 22px; left: 43%; transform: translate(-50%, -50%); border-radius: 50%;} */ .ideo-top .title::after {content: ""; background: #000; width: 50px; height: 2px; position: absolute; top: 90px; left: 50%; transform: translate(-50%, -50%);} .ideo-top .cont {font-size: clamp(17px, 3vw, 30px); font-family: 'PretendardSB';} .ideo-symbol {display: flex;} .ideo-symbol ul {display: flex; justify-content: space-between; width: 70%; margin: 0 auto;} .ideo-symbol li {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: 'PretendardB'; font-size: clamp(15px, 3vw, 27px); line-height: 1.4; width: calc(100% / 3);} .ideo-symbol li p .highlight{display: flex; font-family: 'PretendardSB'; font-size: clamp(14px, 3vw, 30px); position: relative; z-index: 0; padding: 0 10px;} .ideo-symbol .symbol {display: flex; width: 210px; margin-bottom: 4%; border-radius: 50%; border: 25px #EAF6FF solid; display: none;} .ideo-symbol .symbol::before{content:""; display:block; padding-top:100%;} .ideo-symbol .symbol-1 {background: url(../img/ideo-img1.png)no-repeat center;} .ideo-symbol .symbol-2 {background: url(../img/ideo-img2.png)no-repeat center;} .ideo-symbol .symbol-3 {background: url(../img/ideo-img3.png)no-repeat center;} .intro2-box {width: 100%; /*background: url(../img/ideo-top-bg.png) no-repeat; background-size: cover;*/ position: relative; margin-bottom: 80px; text-align: center; display: flex; flex-direction: column; justify-content: center;} .intro2-box .title{font-size: clamp(20px, 3vw, 30px); font-family: 'PretendardEB'; position: relative; z-index: 0; line-height: 1.4;} .intro2-box .title p{font-size: clamp(16px, 3vw, 24px); font-family: 'PretendardB';} .intro2-box .cont {font-size: clamp(16px, 3vw, 19px); word-break: keep-all; display: flex; flex-direction: column; gap: 10px;} .intro2-box .greeting-img img {max-width: 158px;} .intro2-wrap {margin-bottom: 0;} .intro2-wrap .greeting-text.center {margin: 0 auto; text-align: center; text-align-last: auto;} .intro2-wrap .profile-wrap li.cont {width: 80%!important;} .intro2-img {display: inline-block!important;} .intro2-img img {float: left; margin-right: 30px;} .intro2-img p {display: flex;} .root_daum_roughmap .cont {display: none;} .value-wrap ul {display: flex; gap: 40px;} .value-wrap li {width: calc(100% / 3); display: flex; flex-direction: column; gap: 20px; position: relative;} .value-wrap li p{display: flex; flex-direction: column; font-family: 'PretendardB'; font-size: clamp(18px, 3vw, 27px); line-height: 1.6;} .value-wrap li p span {font-family: 'PretendardM'; font-size: clamp(13px, 3vw, 18px); line-height: normal;} .value-wrap li .text{font-size: clamp(14px, 3vw, 17px); line-height: 1.6;} .company-wrap {display: flex; flex-wrap: wrap; gap: 30px;} .company-wrap dl{width: calc((100% - 60px) / 3); display: flex; box-shadow: 0 0 1rem 0 #0000000a; border: 1px #ededed solid; padding: 40px; border-radius: 10px;} .company-wrap dl a {display: flex; flex-direction: column; gap: 20px;} .company-wrap dt {display: flex; align-items: center; justify-content: center; width: 100%; height: 180px ;border: 1px #ededed solid;} .company-wrap dt img {max-height: 60px; max-width: 230px;} .company-wrap dd {display: flex; flex-direction: column;} .company-wrap dd .title{font-family: 'PretendardB'; font-size: clamp(18px, 3vw, 22px); line-height: normal;} .company-wrap dd .text {color: #666; font-size: clamp(15px, 3vw, 16px); line-height: 1.5; text-align: justify; margin-top: 10px;} .company-wrap dd.addr {color: #666; font-size: clamp(13px, 3vw, 15px); margin-top: auto;} .transpo-li ul li:first-child {font-family: 'PretendardB'; color: #0969B3;} .fs-file-list {display: flex; flex-wrap: wrap; gap: 1px; background: #ddd; border: 1px #ddd solid;} .fs-file-list dl {display: flex; gap: 15px; flex-direction: column; width: calc((100% - 2px) / 3); padding: 35px; background: #fff;} .fs-file-list dl:first-child {background: #F2F6F9;} .fs-file-list dt {font-family: 'PretendardB'; font-size: clamp(23px, 3vw, 30px); line-height: normal;} .fs-file-list dd {display: flex; flex-direction: column; gap: 15px; width: 100%;} .fs-file-list dd a {display: flex; align-items: center; gap: 5px; font-size: clamp(15px, 3vw, 16px); line-height: normal;} .fs-file-list dd a::before {content: ""; background: url(../img/ico-down.png)no-repeat; width: 15px; height: 15px;} .report-li {display: flex; gap:80px;} .report-li li{display: flex; flex-direction: column; justify-content: space-between; gap: 20px;} .report-li li img {max-width: 400px; border: 1px #ddd solid;} .report-li li .title {font-family: 'PretendardB'; font-size: clamp(22px, 3vw, 32px); line-height: normal;} .report-li li .content {display: flex; flex-direction: column; line-height: 1.6;} .report-li li .content strong{font-family: 'PretendardB'; color: #0969B3; margin-top: 2%;} .report-li li .content strong:first-child {margin-top: 0;} .report-li li button span{display: flex; align-items: center; gap: 10px;} .report-li li button span::before {content: ""; background: url(../img/ico-pdf.png)no-repeat center; width: 20px; height: 22px; display: inline-flex;} .munhag-image {display: flex; justify-content: center; align-items: center; margin: 30px 0 50px;} .img-m { display: none; } /* 모바일 이미지 숨김 */ /**************** footer ****************/ #footer {float: left; width: 100%; border-top: 1px #ddd solid; padding: 30px 0; background: #fff;} .footer-wrap {display: flex; width: 1350px; margin: 0 auto;} .footer-logo {float: left; background: url(../img/logo-bt.png) no-repeat; width: 172px; height: 45px; margin-right: 70px;} .footer-info .footer-link ul {display: flex; gap: 20px; margin-bottom: 20px;} .footer-info .footer-link li,.footer-info .footer-link li a {font-family: 'PretendardSB'; font-size: clamp(14px, 3vw, 16px); color: #555;} .footer-info .footer-link li:first-child:before {display: none;} .footer-info .footer-link li::before{content: "｜"; font-family: 'PretendardT'; font-size: 16px; color: #666; padding-right: 20px;} .footer-info .copyright {font-family: 'Pretendard'; font-size: clamp(13px, 3vw, 15px); line-height: 1.4; color: #666;} .footer-info .copyright span {font-size: clamp(12px, 3vw, 14px); letter-spacing: 0;}