@charset 'utf-8'; #wait {text-align:center} #wait img {max-width: 100%;} /**/ #skipBtnWrap a {display: block;width: 1px;height: 0;line-height: 0;text-align: center;background: #333;color: #fff;} #skipBtnWrap a:focus, #skipBtnWrap a:hover, #skipBtnWrap a:active {width: 100%;height: 30px;line-height: 30px;} /**/ #poplayer{position:absolute;z-index:99999;top:120px;left:50%;margin:0 0 0 -280px;width:560px;height:595px;} #poplayer *{margin:0;padding:0;border:0} #poplayer img{display:block} #poplayer .todays{padding:2px 20px 8px 20px;text-align:right;background:#323232} #poplayer .todays a{font-size:14px;color:#fff} #poplayer area{cursor:pointer} /* .mr-box-rt {position: absolute;top: 0;right: 0;height: 120px;width: 140px;} .mr-right-top {position: inherit;top: 0px;right: 0px;height: 90px;width: 110px;background-color: #fff;border-radius: 0 0 0 30px;} .mr-2-round {position: relative;top: 0px;left: 0px;width: 30px;height: 30px;background: #ffffff;clip-path: path("M 0 0 L 30 0 L 30 30 Q 30 2 0 0 Z ");} .mr-3-round {position: absolute;bottom: 0px;right: 0px;margin: 0px;padding: 0px;width: 30px;height: 30px;background: #ffffff;clip-path: path("M 0 0 L 30 0 L 30 30 Q 30 2 0 0 Z");} .mr-box-lt {position: absolute;bottom: 0;left: 0;height: 120px;width: 140px;} .mr-left-bottom {position: inherit;bottom: 0px;left: 0px;height: 90px;width: 110px;background-color: #fff;border-radius: 0 30px 0 0px;} .mr-1-round {position: relative;top: 0px;left: 0px;width: 30px;height: 30px;background: #ffffff;clip-path: path("M 0 0 L 30 0 L 30 30 Q 30 2 0 0 Z ");transform: rotate(180deg);} .mr-4-round {position: absolute;bottom: 0px;right: 0px;margin: 0px;padding: 0px;width: 30px;height: 30px;background: #ffffff;clip-path: path("M 0 0 L 30 0 L 30 30 Q 30 2 0 0 Z");transform: rotate(180deg);} */ /**/ #popupbar{position:relative;background:#0e6faf url(../img/popupbarbg.png) no-repeat 50% 50%;overflow:hidden;display:none} #popupbar .popupbar{max-height:117px !important;overflow:hidden} #popupbar .popupbar .slide h3{display:inline-block;margin:0;padding:0 20px 5px 0;font-size:26px;color:#fff;text-shadow:-1px -1px 2px rgba(0,0,0,0.2)} #popupbar .popupbar .slide .close{display:inline-block} #popupbar .popupbar .slide .close button{font-size:14px;font-weight:800;letter-spacing:-1px;color:#fff;border:0;background:none} #popupbar .popupbar img{display:block} #popupbar .bx-controls{position:absolute;z-index:100;bottom:3px;left:50%} #popupbar .bx-pager{float:left;display:block} #popupbar .bx-pager .bx-pager-item{display:inline;*zoom:1} #popupbar .bx-pager.bx-default-pager a{display:inline-block;margin-right:5px;width:12px;height:12px;border:2px solid #fff;background:transparent;border-radius:50px;text-indent:-9999px} #popupbar .bx-pager.bx-default-pager a.active{border:2px solid #00558b;background:#00558b} #popupbar .bx-prev{position:absolute;top:0px;right:80px;display:none;width:10px;height:19px;text-indent:-9999px;background:url(../img/banner_prev.png) no-repeat} #popupbar .bx-next{position:absolute;top:0px;right:20px;display:none;width:10px;height:19px;text-indent:-9999px;background:url(../img/banner_next.png) no-repeat} #popupbar i.b1{position:absolute;z-index:3;top:0px;left:0%;display:block;width:100%;height:5px;background:#00558b} #popupbar i.b2{position:absolute;z-index:4;top:0px;left:50%;margin:0 0 0 570px;display:block;width:100%;height:5px;background:#ffbd3f} #popupbar .holidays{padding-top:40px;text-align:center} #popupbar .opens{text-align:center} #popupbar .opens a{display:block;text-align:center} #popupbar .opens a img{display:block;margin:0 auto} /*로그인*/ @media (max-width: 632px) {#program .login_wrap, .banner_wrap {width:100%;padding: 0 20px;box-sizing: border-box}} @media (min-width: 633px) {#program .login_wrap {width: 460px;margin: 0 auto;box-sizing: border-box}} #program .login_wrap .menu_wrap {display: table;table-layout: fixed;width: 100%;border-collapse: collapse} #program .login_wrap .menu_item {position: relative;display: table-cell;vertical-align: top} #program .login_wrap .menu_id,.menu_card {display: block;position: relative;height: 61px; padding-top: 17px; border: 1px solid #e1e3e5; border-bottom: 0; border-radius: 12px 12px 0 0; background-color: #f5f6f7; text-align: center; box-sizing: border-box; z-index: 2} #program .login_wrap .menu_id .menu_text,.menu_card .menu_text {position: relative;padding-left: 0px;font-size: 14px;font-weight: 500;line-height: 20px;letter-spacing: -.5px;color: #777;vertical-align: middle} #program .login_wrap .menu_id .menu_text::before,.menu_card .menu_text::before {content: '';position: absolute;top: 1px;left: 0} #program .login_wrap .menu_id.on,.menu_card.on {border-color: #e1e3e5;background-color: #fff;z-index: 5} #program .login_wrap .menu_id.on .menu_text,.menu_card.on .menu_text{color: #333} #program .login_wrap .menu_id {border-top: 0;border-left: 0;border-right: 0;border-radius: 12px 0 0 0} #program .login_wrap .menu_id .menu_text::before {background-position: -72px -314px;background-repeat: no-repeat;width: 16px;height: 16px} #program .login_wrap .menu_id.on {border-top: 1px solid #e1e3e5;border-left: 1px solid #e1e3e5} #program .login_wrap .menu_id.on::after {content: '';position: absolute;top: -1px;right: -13px;background-position: -225px -104px;background-repeat: no-repeat;width: 25px;height: 62px} #program .login_wrap .menu_id.on .menu_text::before {background-position: -54px -314px;background-repeat: no-repeat;width: 16px;height: 16px} #program .login_wrap .menu_card {border-top: 0;border-right: 0;border-radius: 0 12px 0 0;} #program .login_wrap .menu_card .menu_text::before {background-position: -316px -294px;background-repeat: no-repeat;width: 16px;height: 16px} #program .login_wrap .menu_card.on {border-top: 1px solid #e1e3e5} #program .login_wrap .menu_card.on::before {content: '';position: absolute;top: -1px;left: -13px;background-position: 0 -202px;background-repeat: no-repeat;width: 25px;height: 62px} #program .login_wrap .menu_card.on::after {content: '';position: absolute;top: -1px;right: -12px;background-position: -225px -104px;background-repeat: no-repeat;width: 25px;height: 62px} #program .login_wrap .menu_card.on .menu_text::before {background-position: -316px -276px;background-repeat: no-repeat;width: 16px;height: 16px} #program .login_wrap .login_box input[type="password"].input_pw {position: relative;display: block;width: 100%;height: 30px;font-size: 16px;font-weight: 400;line-height: 22px;letter-spacing: -.2px;color: #1e1e23;z-index: 5;outline: 0;border: none;} #program .login_wrap .login_box input.input_id {position: relative;display: block;width: 100%;height: 30px;font-size: 16px;font-weight: 400;line-height: 22px;letter-spacing: -.2px;color: #1e1e23;z-index: 5;outline: 0;border: none;} .blind {position: absolute;clip: rect(0 0 0 0);width: 1px;height: 1px;margin: -1px;overflow: hidden;} .tooltip::before, .icon_beta, .icon_delete, .keep_check .keep_text::before {background-image: url(../img/icon_delete.png);background-size: 18px;background-repeat: no-repeat} .panel_wrap {position: relative;z-index: 3;margin-top: -8px} .btn_delete {position: absolute;top: 10px;right: 3px;width: 40px;height: 40px;z-index: 7} .icon_delete {display: inline-block;background-repeat: no-repeat;width: 18px;height: 18px;} .panel_item {border: 1px solid #e1e3e5;border-radius: 12px;background-color: #fff} .panel_inner {padding: 24px} ::-webkit-input-placeholder {color: #929294} input[type=text]::-webkit-input-placeholder {color: #929294} .captcha_input,.input_row {position: relative;display: block;height: 100%;border: 1px solid #c5ccd2;background-color: #fff;padding: 16px 18px 15px;border-radius: 6px;box-sizing: border-box;text-align: left} .captcha_input+.captcha_input,.captcha_input+.input_row,.input_row+.captcha_input,.input_row+.input_row {margin-top: -1px} .captcha_input.focus::before,.input_row.focus::before {content: '';position: absolute;top: -1px;left: -1px;right: -1px;bottom: -1px;border: solid 2px #09aa5c;border-radius: 6px;z-index: 5} .captcha_input.readonly,.input_row.readonly {border: 1px solid #c5ccd2} .captcha_input.onetime,.input_row.onetime {padding: 13px 11px} .captcha_input.onetime .input_text,.input_row.onetime .input_text {padding: 0 25px 0 10px;text-align: center} .captcha_input.onetime .btn_delete,.input_row.onetime .btn_delete {top: 5px;z-index: 7} .input_text {position: relative;display: block;width: 100%;font-size: 16px;font-weight: 400;line-height: 22px;letter-spacing: -.2px;color: #1e1e23;box-sizing: border-box;z-index: 6} .top_message_wrap {margin-top: -26px;padding-bottom: 23px;text-align: center;box-sizing: border-box} .message_wrap {min-height: 48px;padding: 10px 0 24px;text-align: center;box-sizing: border-box} .message_text {display: inline-block;font-size: 15px;font-weight: 400;line-height: 21px;letter-spacing: -.6px;color: #303038;vertical-align: middle} .message_text .accent {color: #09aa5c;font-weight: 700} .message_desc {display: block;padding-top: 10px;font-size: 14px;font-weight: 400;line-height: 21px;letter-spacing: -.6px;color: #303038} #capsLockWarning {padding: 10px 0 0;} .login_form {position: relative} .beta_area {display: block;padding-right: 16px;text-align: right} .icon_beta {display: inline-block;margin-bottom: 8px;vertical-align: top;background-position: -169px -182px;background-repeat: no-repeat;width: 26px;height: 12px} #program .login_wrap .input_item {position: relative;padding: 27px 15px 8px;border: 1px solid #c5ccd2;border-radius: 8px;box-sizing: border-box;z-index: 1} #program .login_wrap .input_item input:autofill+label {left: 7px;bottom: 30px;font-size: 12px;padding: 0 8px;letter-spacing: -.8px;white-space: nowrap;width: auto} #program .login_wrap .input_item input:-webkit-autofill+label {left: 7px;bottom: 30px;font-size: 12px;padding: 0 8px;letter-spacing: -.8px;white-space: nowrap;width: auto} #program .login_wrap .input_item input:-webkit-autofill:focus,.input_item input:-webkit-autofill:hover {font-size: 16px!important} #program .login_wrap .input_item input::-ms-reveal {display: none} #program .login_wrap .input_item.id {height: 60px;border-radius: 8px 8px 0 0} #program .login_wrap .input_item.id.focus::after {border-radius: 8px 8px 0 0} #program .login_wrap .input_item.pw {height: 59px;border-top: 0;border-radius: 0 0 8px 8px} #program .login_wrap .input_item.pw.focus::after {border-radius: 0 0 8px 8px} #program .login_wrap .input_item.focus::after {content: '';position: absolute;top: -1px;left: -1px;right: -1px;bottom: -1px;border: 2px solid #09aa5c;transition: all .2s cubic-bezier(.4,0,.2,1);z-index: 2} #program .login_wrap .input_item.focus .text_label {left: 7px;bottom: 30px;font-size: 12px;padding: 0 8px;letter-spacing: -.8px;white-space: nowrap;width: auto} #program .login_wrap .input_item.on.id {padding-right: 34px} #program .login_wrap .input_item.on.pw {padding-right: 76px} #program .login_wrap .input_item.on .text_label {position: absolute;left: 7px;bottom: 30px;font-size: 12px;color:#888;padding: 0 8px;letter-spacing: -.8px;white-space: nowrap;width: 80%;height: unset;line-height: unset;} #program .login_wrap .input_item.country.id {padding-left: 94px} #program .login_wrap .input_item.country .text_label {bottom: 30px;font-size: 12px;left: 7px;padding: 0 8px;letter-spacing: -.8px;white-space: nowrap;width: auto} #program .login_wrap .input_item.country .country_code {position: absolute;bottom: 9px;left: 15px;min-width: 73px;text-align: left;cursor: pointer;z-index: 5} #program .login_wrap .input_item.country .country_code::after {content: '';position: absolute;top: 2px;right: 0;background-position: -316px -202px;background-repeat: no-repeat;width: 16px;height: 18px} #program .login_wrap .input_item.country .country_select {position: relative;padding-right: 20px;font-size: 16px;font-weight: 400;line-height: 22px;letter-spacing: -.2px;color: #1e1e23;z-index: 5} #program .login_wrap .input_item.country .input_id,.input_item.country .input_pw {display: inline-block;box-sizing: border-box} #program .login_wrap .login_keep_wrap {position: relative;margin-top: 12px;} #program .login_wrap .keep_check {position: relative;} #program .login_wrap .keep_check .input_keep {position: absolute;top: 0px;left: 0px;width: 15px;height: 15px} #program .login_wrap .keep_check label {padding: 5px 0 5px 35px;background-image: url(../img/ico_check_login_off.png);background-repeat: no-repeat;background-position: 0 50%;background-size: auto 22px;font-size: 16px;color: #333;font-weight: 500;} #program .login_wrap .keep_check input[type="checkbox"]:checked + label {background-image: url(../img/ico_check_login_on.png?v=1);} #program .login_wrap .keep_check .chk {display:none;} #program .login_wrap .keep_check .keep_text {display: inline-block;font-size: 14px;font-weight: 400;line-height: 20px;color: #767678} #program .login_wrap .keep_check .keep_text::before {content: '';position: absolute;top: 0;left: 0;background-position: -286px -292px;background-repeat: no-repeat;width: 20px;height: 20px;background-color: #fff} #program .login_wrap .keep_check input:checked+.keep_text {color: #303038} #program .login_wrap .keep_check input:checked+.keep_text::before {background-position: 0 -292px;background-repeat: no-repeat;width: 20px;height: 20px} #program .login_wrap .btn_login_wrap { margin-top: 20px} #program .login_wrap .btn_ones_wrap {margin-top: 10px} #program .login_wrap .btn_login {display: block;width: 100%;padding: 13px 20px;border-radius: 8px;background-color: var(--colorNavy);box-sizing: border-box} #program .login_wrap .btn_login .btn_text {font-size: 17px;font-weight: 500;line-height: 24px;letter-spacing: -.4px;color: #fff} #program .login_wrap .btn_login.off {background-color: #a5adb8} #program .login_wrap .btn_login.off .btn_text {font-weight: 400} #program .login_wrap .btn_reconfirm_wrap {margin-top: 12px} #program .login_wrap .nudge_banner {padding: 4px 20px 3px 9px;margin-top: 10px;border-radius: 6px;box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);border: solid 1px var(--colorGreen);background-color: #fff;box-sizing: border-box;} #program .login_wrap .nudge_banner .nudge_text {display: inline-block;font-size: 13px;font-weight: 500;line-height: 14px;letter-spacing: -.56px;color: #1e1e23;vertical-align: top} #program .login_wrap .nudge_banner .nudge_close {position: absolute;top: -2px;right: 0;width: 24px;height: 25px} #program .login_wrap .nudge_banner .nudge_close .icon_nudge_close {display: inline-block;background-position: -292px -280px;background-repeat: no-repeat;width: 9px;height: 9px} #program .login_wrap .find_wrap,.relogin_find_wrap {padding: 20px 0;text-align: center} #program .login_wrap .find_wrap li,.relogin_find_wrap li {position: relative;display: inline-block} #program .login_wrap .find_wrap li+li,.relogin_find_wrap li+li {padding-left: 28px} #program .login_wrap .find_wrap li+li::before,.relogin_find_wrap li+li::before {content: '';position: absolute;top: 3px;left: 12px;width: 1px;height: 12px;border-radius: .5px;background-color: #dadada} #program .login_wrap .find_wrap .en_find_text,.find_wrap .find_text,.relogin_find_wrap .en_find_text,.relogin_find_wrap .find_text {display: inline-block;font-size: 14px;line-height: 17px;text-decoration: none;color: #555;padding: 3px 5px;} #program .login_wrap .find_wrap .en_find_text,.relogin_find_wrap .en_find_text {text-decoration: underline} #program .login_wrap .find_wrap a:hover {border-radius: 5px;background-color: #eee !important;transition: $transition-base;} /*찾아오시는길 - 다중마커*/ #design .location #map {width: 100%;height: 500px;} #design .location #map * {box-sizing: content-box;} #design .location .lib_map {font-size: 0;} #design .location .lib_map > li {display: inline-block;width: 32%;margin: 15px 1% 0;vertical-align: top;} #design .location .lib_map > li:nth-child(3n-2) {margin-left: 0;} #design .location .lib_map > li:nth-child(3n) {margin-right: 0;} #design .location .lib_map > li:nth-child(-n+3) {margin-top: 0;} #design .location .lib_map > li > a {display: block;border: 1px solid #ddd;} #design .location .lib_map > li > a:hover {display: block;border-color: #333;box-shadow: 3px 3px 15px rgba(0,0,0,0.15);transition: all 0.5s;} #design .location .lib_map > li p.title {padding: 15px 20px;font-size: 17px;font-weight: 500;border-bottom: 1px solid #ddd;} #design .location .lib_map > li div.con {padding: 15px 20px;} #design .location .lib_map > li div.con > span {display: block;min-height: 30px;padding-left: 0px;font-size: 16px;font-weight: 400;background-repeat: no-repeat;background-position: 0 0;} #design .location .lib_map > li div.con > span + span {margin-top: 15px;} #design .location .lib_map > li div.con > span.loc {} #design .location .lib_map > li div.con > span.tel {} #design .location .lib_map > li div.con > span i {margin-right:7px; color:var(--subColor);font-size:18px;font-weight: 500;} /* 1420 - all */ @media all and (min-width: 1440px) { #divpop { display:none;} #mm-blocker{display:none} #popupWindow{position:absolute} #OpenLayer {position: absolute;top: 150px;left: 100px;z-index: 9999;background: #fff;padding: 10px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 14px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} /* gnbWrap */ #gnbWrap {border-bottom:1px #e7e7e7 solid;} #gnbWrap .gnbNav {position:relative; width:96%; max-width:1800px; margin:0 auto; padding:10px 0;} #gnbWrap .gnbNav li {display:inline-block;} #gnbWrap .gnbNav li + li {margin-left:20px;} /* header */ #header {position:absolute; top:0; left:0; z-index:30002; width:100%; height:157px;} #header.header_active::before {content:''; position:absolute; left:0; top:147px; width:100%; height:1px; background-color:#d9dfe9; z-index:998;} #header.header_active {background-color:#fff; border-bottom:1px #d9dfe9 solid;} #header .header {position:relative; width:96%; height:100px; max-width:1800px; margin:0 auto;} #header h1 {position:relative; top:12px; display:inline-block;} #header h1 a {display:block;font-size:22px;font-weight:900;} #header h1 a img {width:130px; margin-right:5px; vertical-align:middle;} #header h1 a span {display: block;position: absolute;line-height: normal;padding-left: 45px;width: 210px;} #header h1 a span:before {content: '';position: absolute;left: 0;top: 50%;width: 35px;height: 23px;background-image: url('../img/logo_symbol.png');background-size: contain;background-repeat: no-repeat;transform: translateY(-50%);} #header button.btn-menu {display:none;} /**/ #header .etc_btn {position:absolute; top:35px; right:0;} #header .etc_btn > ul {display:flex; align-items:center;} #header .etc_btn > ul > li {position:relative;} #header .etc_btn > ul > li:first-child {padding-right:25px;} #header .etc_btn > ul > li:first-child:after {position:absolute; top:8px; right:10px; width:5px; height:5px; background:#e2e2e2; display:block; border-radius:10px; content: '';} #header .etc_btn > ul > li > a {display:block; font-size:15px; font-weight:500;color:#333;} #header a.sitemap {position:relative; width:30px; height:30px; margin-left:40px; text-indent:-9999px;} #header a.sitemap:before {content:''; position:absolute; top:7px; left:0; display:inline-block; width:100%; height:4px; background:#333; transition-duration:0.3s;} #header a.sitemap:after {content:''; position:absolute; bottom:7px; left:0; display:inline-block; width:100%; height:4px; background:#333; transition-duration:0.3s;} /**/ nav.menu_wrap {width:100%;} #gnb .gnb {display:flex; justify-content:center;} #gnb .depth1 {display:flex; max-width:calc(100% - 100px); padding-left:0px; justify-content: center; align-items:center; flex-grow:1;} #gnb .depth1 > li {display: inline-block;vertical-align: top;} #gnb .depth1 > li + li {margin-left:40px;} #gnb .depth1 > li > a {display:block;position: relative;margin: 0;font-size: 22px;font-weight: 700;color: var(--colorDarkgray);} #header.header_active #gnb .depth1 > li > a, #header.bg_white #gnb .depth1 > li > a {} #header #gnb .depth1 > li.sel > a {color: var(--mainColor);font-weight: 800;text-decoration: underline;text-underline-offset: 10px;} #header.header_active #gnb .depth1 > li.sel > a, #header.bg_white #gnb .depth1 > li.sel > a {color: var(--colorBlue);font-weight: 500;text-decoration: underline;} /*#header #gnb .depth1 > li > a::after {content: "";position:absolute;bottom: 0;left: 0;display:none;width: 100%;height: 5px;background: #558fff;}*/ #header #gnb .depth1 > li:hover > a, #header #gnb .depth1 > li > a:hover {color: var(--colorBlue);} #header #gnb .depth1 > li > .m1:hover::after {width: 100%;} #header #gnb .depth1 > li > .m1::after {content: "";position: absolute;left: 0;bottom: -3px;width: 0;height: 2px; background-color: var(--colorBlue); transition: width 0.5s ease;} #gnb .depth2 {display:block !important; overflow:hidden;position:absolute; top:100px; left:0; width:12%; height:360px; padding:25px 30px 35px; box-sizing: border-box;text-align:center; opacity:0; visibility: hidden; border-top:1px #d9dfe9 solid; border-left:1px #d9dfe9 solid; z-index:999; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;} #gnb .depth2:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:#d9dfe9;} #header.header_active #gnb .depth2 {opacity:1; visibility: visible;} #gnb li:hover .depth2 {background-color:var(--mainColor);} #gnb .depth2 > li a {display:block; line-height:26px; padding:6px 10px; font-size:17px; font-weight:500; color:#666; text-align:left;} #gnb li:hover .depth2 > li a {color:#fff;} #gnb li:hover .depth2 > li a:hover {text-decoration:underline;} #header #gnb .depth1 > li:nth-child(1) .depth2 {left:8%;} #header #gnb .depth1 > li:nth-child(2) .depth2 {left:20%;} #header #gnb .depth1 > li:nth-child(3) .depth2 {left:32%;} #header #gnb .depth1 > li:nth-child(4) .depth2 {left:44%;} #header #gnb .depth1 > li:nth-child(5) .depth2 {left:56%;} #header #gnb .depth1 > li:nth-child(6) .depth2 {left:68%;} #header #gnb .depth1 > li:nth-child(7) .depth2 {left:80%; border-right:1px #d9dfe9 solid;} #header.fix_menu {position:fixed; top: 0;background:#fff;border-bottom:1px solid #ddd;} #header.fix_menu #gnb .depth1 > li > a {color:#333;} #header.fix_menu #gnb .depth1 > li.sel > a {color:#558fff} #allbg{position:fixed;z-index:30000;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.35);display:none} /* #menu{position:absolute;z-index:10;top:0;right:0;background: #252525;} #menu a{display:block;width: 50px;height: 50px;background:url(../img/menu.png) no-repeat 50%;text-indent:-9999em;overflow:hidden} */ /**/ #mainCon {width:100%;} .section_inner {position:relative; width:96%; max-width:var(--maxWidthPC); margin: 0 auto; padding:50px 0;} .section_inner .more_btn {position:absolute; right:0; top:0; display:inline-block; font-size:18px; font-weight:500; color:#333;} .section_inner .more_btn:after {content:''; display:inline-block; vertical-align:middle; width:46px; height:46px; margin-left:13px; border-radius:50%; background:#363637 url(../img/btn_more.png) 50% no-repeat;} .section h3 {font-size: 30px;font-weight: 700;color: #000;} .section h3.white {color: #fff;} .section h4 {font-size: 28px;font-weight: 500;color: var(--mainColor);} .section .sub_title {font-size: 17px;font-weight: 500;color: #757575;} /**/ .section .kind.lib1 {background-color: var(--mainColor);color: var(--colorWhite);} .section .kind.lib2 {background-color: var(--libColor2);color: var(--colorWhite);} .section .kind.lib3 {background-color: var(--libColor3);color: var(--colorWhite);} .section .lib1 {color: var(--mainColor);} .section .lib2 {color: var(--libColor2);} .section .lib3 {color: var(--libColor3);} .section .btn_wrap {margin-top: 80px;text-align: center;} .section .btn_wrap > a {display: inline-block;width: 216px;height: 62px;border: 1px solid #333;font-size: 18px;font-weight: 400;color: #333;line-height: 62px;} /**/ .section .controls {} .section .controls .slick-arrow {overflow: hidden;width: 40px;height: 40px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: top;} .section .controls .slick-prev {background-image: url(../img/ico_arrow_prev.svg);} .section .controls .slick-next {background-image: url(../img/ico_arrow_next.svg);} .section .controls.white .slick-arrow {} .section .controls.white .slick-prev {background-image: url(../img/ico_arrow_w_prev.svg);} .section .controls.white .slick-next {background-image: url(../img/ico_arrow_w_next.svg);} .section .controls .slider_dots {display: inline-block;vertical-align: middle;} .section .controls .slider_dots > span {font-size:18px; font-weight:600; color:rgba(0,0,0,0.6);} .section .controls.white .slider_dots > span {color:rgba(255,255,255,0.6);} .section .controls .slider_dots > span.now {color:#363637;} .section .controls .slider_dots > span.all {position: relative;z-index: 0;padding-left: 12px;margin-left: 12px;} .section .controls .slider_dots > span.all::before {content: '';position: absolute;top: 50%;left: 0;width: 2px;height: 16px;margin-top: -8px;background-color:#363637; transform: skew(-20deg);} .section .controls.white .slider_dots > span.now {color:rgba(255,255,255,1);} .section .controls.white .slider_dots > span.all::before {content: '';position: absolute;top: 50%;left: 0;width: 2px;height: 16px;margin-top: -8px;background-color: rgba(255,255,255,0.3); transform: skew(-20deg);} .section .controls .slider_dots ul li {display: none;} .section .controls .slider_dots ul li.slick-active {display: block;} .section .controls .ctrl button {overflow: hidden;width: 40px;height: 40px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;} .section .controls .ctrl button.stop {background-image: url(../img/ico_m_stop.png);} .section .controls .ctrl button.play {background-image: url(../img/ico_m_play.svg); background-size:30px;} .section .controls.white .ctrl button.stop {background-image: url(../img/ico_m_w_stop.png);} .section .controls.white .ctrl button.play {background-image: url(../img/ico_m_w_play.svg); background-size:30px;} /**/ .section .m_tabs {} .section .m_tabs > ul {display:flex;} .section .m_tabs > ul > li + li {margin-left:35px;} .section .m_tabs > ul > li > a {font-size:42px; font-weight:700; color:#555;} .section .m_tabs > ul > li > .tit {font-size:38px; font-weight:700; color:#555;} .section .m_tabs > ul > li > a.active {color:var(--subColor); text-decoration:underline;} .section .m_tabs_con > div {opacity: 0;height: 0;overflow: hidden;transition: all 0.3s ease;} .section .m_tabs_con > div.active {opacity: 1;height: auto;overflow: visible;} .section .m_tabs_con > div a.m_more {position: absolute;top: 0;right: 0;width: 55px;height: 55px;border: 1px solid #c0c0c6;text-indent: -9999px;background-image: url(../img/ico_m_more.gif);background-repeat: no-repeat;background-position: 50% 50%;} /**/ #mainCon {padding-top:146px; background:url(../img/bg_maintop.gif) center 146px no-repeat;} /* 메인 상단 - 검색창 */ #section1 {position:relative; width:100%; max-width:1920px; margin:0 auto;} #section1 .section_inner {} #section1 .search_wp {} #section1 .search_area {width:100%; max-width:630px; margin:0 auto;} #section1 .search_area .input_wp {position:relative;} #section1 .search_area .input_wp input {width:calc(100% - 52px); height:80px; padding:0 40px; font-size:22px; font-weight:500; color:#333; border:5px #b35a9a solid; border-radius:50px; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1); outline:none;} #section1 .search_area .input_wp button {position:absolute; top:0; right:0; width:74px; height:74px; border-radius:30px; background-color:#b65995; background-image:url(../img/ico_m_search.svg);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 29px;text-indent: -9999px;} #section1 .search_area .search_word {display:flex; width:90%; margin:25px auto 0; font-size:16px; color:#757b8e; align-items:center;} #section1 .search_area .search_word .title {font-weight:700;} #section1 .search_area .search_word .word_list {margin-left: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} #section1 .search_area .search_word .word_list > a {display: inline-block;margin-left: 20px;font-weight: 500;} /* 움직이는 라인 */ .wavy {position:absolute; top:44px; right:123px; width:99px; height:13px; overflow:hidden;} .wavy:before {content:''; display:block; width:100%; height:100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 8'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23f5d155' stroke-width='2' class='squiggle' d='M0,6c5,0,5-5,10-5s5,5,10,5s5-5,10-5s5,5,10,5'/%3E%3C/svg%3E"); background-position: 0 100%; background-size: auto 11px; background-repeat: repeat-x;} .wavy2 {position:absolute; top:77px; right:36px; width:99px; height:13px; overflow:hidden;} .wavy2:after {content:''; display:block; width:100%; height:100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 8'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%238fa1fb' stroke-width='2' class='squiggle' d='M0,6c5,0,5-5,10-5s5,5,10,5s5-5,10-5s5,5,10,5'/%3E%3C/svg%3E"); background-position: 0 100%; background-size: auto 11px; background-repeat: repeat-x;} @keyframes shift { from { transform:translateX(0); } to { transform:translateX(-20px); } } /* #section2 - 공지사항/팝업창 */ #section2 {position:relative;} #section2 .section_inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; padding:0 0 90px 0;} #section2 .popupzone {position:relative; width:950px; margin-right:3%; overflow:hidden; border-radius:30px;} #section2 .popupzone .controls {position:absolute; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between;width:auto; padding:15px 25px 15px 45px; background-color:rgba(42,34,81,0.8); border-radius:30px 0 30px 0;} #section2 .popupzone .controls > div {display:flex; align-items:center;} #section2 .popupzone .controls .slider_dots {margin-right:20px; font-size:16px;} #section2 .popupzone .controls .ctrl button {width:30px; height:30px;} #section2 .popupzone .controls .ctrl button.stop {background-size:13px;} #section2 .popupzone .controls .ctrl button.play {background-size:25px;} #section2 .popupzone .controls.white .slider_dots > span.all::before {content: ''; position: absolute; top:50%; left:-5px; width:11px; height:1px; margin-top:0; background-color: rgba(255, 255, 255, 0.3); transform: skew(0);} #section2 .notice_wp {position:relative; width:calc(97% - 950px); max-width:670px; padding:20px 40px 15px; background-color:#fff; border-radius:30px; border:1px #f1eff9 solid;} #section2 .notice_wp .more_btn {top:25px; right:40px;} #section2 .notice_wp h2 {margin-bottom:15px; font-size:34px; font-weight:800;} #section2 .notice_wp ul {} #section2 .notice_wp ul li {position:relative; display:flex; width:100%; margin-bottom:15px;} #section2 .notice_wp ul li a {display:flex; justify-content:space-between; align-items:center; width:100%;} #section2 .notice_wp ul li h3.title {width:calc(100% - 152px); font-size:18px; font-weight:600; color:#1a1a1a; line-height:28px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} #section2 .notice_wp ul li a:hover h3.title {text-decoration:underline;} #section2 .notice_wp ul li p {display:none;} #section2 .notice_wp ul li .date {display:inline-block; width:60px; font-size:14px; font-weight:500; color:#999; letter-spacing:-0.5px; text-align:right;} #section2 .notice_wp ul li .date em.year {display:none;} #section2 .notice_wp ul li .date .day:before {content:'-';} #section2 .notice_wp ul li span[class^="lib"] {display:inline-block; width:80px; height:29px; padding:4px 10px; margin-right:12px; text-align:center; font-size:15px; font-weight:500; border-radius:15px;} #section2 .notice_wp ul li span.lib0 {color:#333; background-color:#f5f5f5;} #section2 .notice_wp ul li span.lib1 {color:var(--mainColor); background-color:#e5eaf4;} #section2 .notice_wp ul li span.lib2 {color:var(--libColor2); background-color:#f6edf3;} #section2 .notice_wp ul li span.lib3 {color:var(--libColor3); background-color:#f0f8f6;} #section2 .notice_wp ul li:first-child {min-height:110px; padding-bottom:10px; padding-left:120px; margin-bottom:20px; border-bottom:1px #cccac9 dashed;} #section2 .notice_wp ul li:first-child .date {display:flex; flex-wrap:wrap; flex-direction:column; position:absolute; left:0; top:0px; font-size:15px; color:#333; width:90px; box-sizing:border-box; text-align:center; border:7px solid #f6edf3; border-radius:20px; padding:6px 0 1px;} #section2 .notice_wp ul li:first-child .date .year {display:inline-block;} #section2 .notice_wp ul li:first-child .date .day {display:block; font-size:40px; font-weight:900; margin-top:-10px;} #section2 .notice_wp ul li:first-child .date .day:before {content:'';} #section2 .notice_wp ul li:first-child a {background:#fff; box-sizing: border-box; transition: all .2s; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 10px;} #section2 .notice_wp ul li:first-child h3.title {width:calc(100% - 92px); font-size:21px; font-weight:700;} #section2 .notice_wp ul li:first-child p {width:100%; margin-top:10px; font-weight:400; font-size:17px; color:#666; line-height:24px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* section2 - 바로가기 */ #section2 .m_direct {width:100%; margin:70px auto 0; display:flex; justify-content:space-between; align-items: center; flex-grow:1;} #section2 .m_direct .title_wp {width:295px;} #section2 .m_direct .title_wp h3 {font-size:34px; font-weight:900; letter-spacing:-2px;} #section2 .m_direct .title_wp h3 strong {color:#3379e7; font-weight:inherit;} #section2 .m_direct .title_wp .sub {font-size:16px; font-weight:500;} #section2 .m_direct .direct_list {display: flex; width: calc(100% - 295px); justify-content: space-between;} #section2 .m_direct .direct_list a {display:block; text-align:center; font-size:18px;font-weight:700;} #section2 .m_direct .direct_list a::before {content:''; display:block; width:100px; height:100px; margin:0 auto 20px; background-color:#f1f0f9; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 49px; border-radius:30px; transition:all 0.3s ease;} #section2 .m_direct .direct_list a.direct1::before {background-image: url(../img/ico_m_direct1.svg);} #section2 .m_direct .direct_list a.direct2::before {background-image: url(../img/ico_m_direct2.svg);} #section2 .m_direct .direct_list a.direct3::before {background-image: url(../img/ico_m_direct3.svg);} #section2 .m_direct .direct_list a.direct4::before {background-image: url(../img/ico_m_direct4.svg);} #section2 .m_direct .direct_list a.direct5::before {background-image: url(../img/ico_m_direct5.svg);} #section2 .m_direct .direct_list a.direct6::before {background-image: url(../img/ico_m_direct6.svg);} #section2 .m_direct .direct_list a.direct7::before {background-image: url(../img/ico_m_direct7.svg);} #section2 .m_direct .direct_list a.direct8::before {background-image: url(../img/ico_m_direct8.svg);} #section2 .m_direct .direct_list a:hover {color:var(--mainColor); text-decoration:underline; text-underline-offset:4px;} #section2 .m_direct .direct_list a:hover::before {background-color:var(--mainColor); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);} /* #section3 */ #section3 {padding:50px 0; background:#f4f6fa url(../img/bg_section3.gif) 50% 0 no-repeat;} #section3 h2 {margin-bottom:35px; font-size:42px; font-weight:700;} #section3 h2 strong {display:block; font-size:24px; font-weight:700; color:var(--subColor);} #section3 .more_btn {top:85px;} #section3 .culture_wp .culture_list {display:flex; align-items:center;} #section3 .culture_wp .slick-list {width:calc(100% - 100px); margin-left:20px; padding:15px 0;} #section3 .culture_wp ul li {position:relative; padding:80px 30px 30px; margin-right:30px; background:#fff url(../img/icon_culture.png) 30px 30px no-repeat; transition: all ease .3s;} #section3 .culture_wp ul li:hover {box-shadow:2px 2px 15px rgba(0,0,0,.10);} #section3 .culture_wp ul li .state {position:absolute; right:30px; top:22px;} #section3 .culture_wp ul li .state .kind {display:flex; align-items:center; justify-content:center; width:90px; height:38px; font-size:18px; font-weight:600; border-radius:30px;} #section3 .culture_wp ul li .state .kind.wait {background-color: var(--colorGreen);color: #fff;} #section3 .culture_wp ul li .state .kind.ing {background-color: var(--colorBlue);color: #fff;} #section3 .culture_wp ul li .state .kind.add {background-color: var(--colorOrange);color: #fff;} #section3 .culture_wp ul li .state .kind.end {background-color: #666;color: #fff;} #section3 .culture_wp ul li .con {} #section3 .culture_wp ul li .con .title {display:block; font-size:22px; font-weight:600; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #section3 .culture_wp ul li .con dl {display:flex; margin-bottom:5px; font-size:16px; font-weight:500;} #section3 .culture_wp ul li .con strong + dl {margin-top:20px; padding-top:20px; border-top:1px #e1e2e5 solid;} #section3 .culture_wp ul li .con dl dt {color:#333;} #section3 .culture_wp ul li .con dl dd {color:#666; margin-left:3px;} #section3 .culture_wp .slick-arrow {overflow: hidden;width: 40px;height: 40px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: top;} #section3 .culture_wp .slick-prev {background-image: url(../img/ico_arrow_prev.svg);} #section3 .culture_wp .slick-next {background-image: url(../img/ico_arrow_next.svg);} /* #section4 */ #section4 {overflow: hidden;position: relative;z-index: 0;} #section4 .section_inner {padding:100px 0 50px;} #section4 .m_books {position:relative;} #section4 .m_books .m_tabs {position:relative; display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:50px;} #section4 .m_books .m_tabs:before {content:''; position:absolute; top:50px; right:250px; width:70%; height:1px; background-color:#000;} #section4 .m_books .m_tabs:after {content:'다양한 이야기, 다양한 시선'; font-size:23px; font-weight:700; color:#000;} #section4 .m_books .m_tabs ul {} #section4 .m_books .m_tabs ul li {} #section4 .m_books .m_tabs_con {position:relative;} #section4 .m_books .m_tabs_con h3 {display:none;} #section4 .m_books .m_tabs_con .book_list {display:flex; justify-content:space-between;} #section4 .m_books .m_tabs_con .book_list li.slick-current {padding:0; width:30% !important; max-width:595px !important;} #section4 .m_books .m_tabs_con .book_list li[data-slick-index="12"] {display:none;} #section4 .m_books .m_tabs_con .book_list li[data-slick-index="13"] {display:none;} #section4 .m_books .m_tabs_con .book_list li {box-sizing:border-box;} #section4 .m_books .m_tabs_con .book_list li img {max-width:235px;min-height: 340px;} #section4 .m_books .m_tabs_con .book_list li div.info {display:none; color:#000;} #section4 .m_books .m_tabs_con .book_list li div.info p {font-size:18px; font-weight:400; line-height:24px;} #section4 .m_books .m_tabs_con .book_list li span {display:block;} #section4 .m_books .m_tabs_con .book_list li span.title {overflow: hidden; font-size:33px;font-weight: 800;text-overflow: ellipsis;white-space: nowrap;} #section4 .m_books .m_tabs_con .book_list li span.writer {overflow: hidden; margin:20px 0 35px;font-size: 18px;font-weight: 500;text-overflow: ellipsis;white-space: nowrap;} #section4 .slick-track {} #section4 .slick-slide {padding-top:35px;} #section4 .slick-current a {position:relative; display:flex; align-items:center; padding:35px 0; margin-right:70px; z-index:1;} #section4 .slick-current a:before {content: ''; display:block; width:80%; height:100%; background-color:#e4d4f1; position:absolute; top:0; left:20%; z-index:-1;} #section4 .slick-current .img {width:50%; max-width:267px !important; margin-right:5%; box-shadow:4px 0 20px rgba(0, 0, 0, 0.1);} #section4 .slick-current .info {display:block !important; width:40%;} #section4 .slick-current .info .more_btn {top:auto; right:auto; bottom:auto !important; position:relative; margin-top:25px;} #section4 .section_inner .more_btn {top:auto; bottom:-5px !important;} #section4 .controls {display:flex; align-items:center; justify-content:flex-end; position:relative; bottom:0; right:120px;} /* #section5 */ #section5 {overflow: hidden;position: relative;z-index: 0;margin-bottom: 50px;} #section5 .section_inner {padding:100px 0 50px;} #section5 .m_books {position:relative;} #section5 .m_books .m_tabs {position:relative; display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:50px;} #section5 .m_books .m_tabs:before {content:''; position:absolute; top:50px; right:250px; width:70%; height:1px; background-color:#000;} #section5 .m_books .m_tabs:after {content:'옥천군공공도서관 인기도서'; font-size:23px; font-weight:700; color:#000;} #section5 .m_books .m_tabs ul {} #section5 .m_books .m_tabs ul li {} #section5 .m_books .m_tabs_con {position:relative;} #section5 .m_books .m_tabs_con h3 {display:none;} #section5 .m_books .m_tabs_con .book_list {display:flex; justify-content:space-between;} #section5 .m_books .m_tabs_con .book_list li.slick-current {padding:0; width:30% !important; max-width:595px !important;} #section5 .m_books .m_tabs_con .book_list li[data-slick-index="12"] {display:none;} #section5 .m_books .m_tabs_con .book_list li[data-slick-index="13"] {display:none;} #section5 .m_books .m_tabs_con .book_list li {box-sizing:border-box;} #section5 .m_books .m_tabs_con .book_list li img {max-width:235px;min-height: 340px;} #section5 .m_books .m_tabs_con .book_list li div.info {display:none; color:#000;} #section5 .m_books .m_tabs_con .book_list li div.info p {font-size:18px; font-weight:400; line-height:24px;} #section5 .m_books .m_tabs_con .book_list li span {display:block;} #section5 .m_books .m_tabs_con .book_list li span.title {overflow: hidden; font-size:33px;font-weight: 800;text-overflow: ellipsis;white-space: nowrap;} #section5 .m_books .m_tabs_con .book_list li span.writer {overflow: hidden; margin:20px 0 35px;font-size: 18px;font-weight: 500;text-overflow: ellipsis;white-space: nowrap;} #section5 .slick-track {} #section5 .slick-slide {padding-top:35px;} #section5 .slick-current a {position:relative; display:flex; align-items:center; padding:35px 0; margin-right:70px; z-index:1;} #section5 .slick-current a:before {content: ''; display:block; width:80%; height:100%; background-color:#e4d4f1; position:absolute; top:0; left:20%; z-index:-1;} #section5 .slick-current .img {width:50%; max-width:267px !important; margin-right:5%; box-shadow:4px 0 20px rgba(0, 0, 0, 0.1);} #section5 .slick-current .info {display:block !important; width:40%;} #section5 .slick-current .info .more_btn {top:auto; right:auto; bottom:auto !important; position:relative; margin-top:25px;} #section5 .section_inner .more_btn {top:auto; bottom:-5px !important;} #section5 .controls {display:flex; align-items:center; justify-content:flex-end; position:relative; bottom:0; right:120px;} /* 이용안내 */ #cs-info .section_inner {display:flex; align-content:center; justify-content:space-between; align-items:center; margin:80px auto; padding:40px 250px 40px 60px; background:#f4f6fa url(../img/bg_csinfo.png) right bottom no-repeat;} #cs-info .section_inner h2 {margin-right:90px; font-size:42px; font-weight:700; line-height:52px;} #cs-info .section_inner > div {display:flex; flex-wrap:wrap; font-size:22px; font-weight:700;} #cs-info .section_inner > div dl {display:flex;} #cs-info .section_inner > div dl.closed {margin-right:130px;} #cs-info .section_inner > div dl.closed dd {color:#d63434;} #cs-info .section_inner > div dl.open dt {color:#0883bf;} #cs-info .section_inner > div dl + dl {} #cs-info .section_inner > div dl dt {margin-right:50px;width: 80px;} #cs-info .section_inner > div dl dd {font-size:20px;} #cs-info .section_inner > div dl dd p {margin-bottom:7px;} #cs-info .section_inner > div dl dd strong {font-size:28px; font-family:'g-market-sans'; font-weight:700; vertical-align:middle; margin-left:10px; letter-spacing:0;} #cs-info .section_inner > div dl dd + dd {margin-left:55px;} #cs-info .section_inner > div dl.tel {width:100%; margin-left:0; margin-top:20px; padding-top:25px; border-top:1px #dbdde1 solid;} #cs-info .section_inner > div dl.tel em {font-family:'g-market-sans'; font-weight:700; vertical-align:middle; letter-spacing:0;} /**/ #banner .banner_wp {display: flex;align-items: center;} #banner .banner_wp .banner_title {display: inline-flex;width: 250px;margin-right: 10px;align-items: center;} #banner .banner_wp .banner_title h3 {margin: 0 30px 0 0;font-size: 20px;font-weight: 700;} #banner .banner_wp .banner_title .controls button {width: 30px;height: 30px;margin: 3px;border: 1px solid #d3d3e5;border-radius: 50%;background-size: auto 12px;} #banner .banner_wp .banner_title .controls button.stop {background-size: auto 10px;} #banner .banner_wp .slick_wp {width: calc(100% - 260px);} /* Footer */ #foot_section {} #foot_section .section_inner {position:relative; padding:65px 0 70px; border-top:2px #000 solid; font-size:17px; font-weight:500;} #foot_section .footer {} #foot_section .f_top {display:flex; justify-content:space-between; margin-bottom:30px;} #foot_section .f_top .f_link {display:inline-flex;} #foot_section .f_top .f_link > a {font-size:20px; font-weight:600;} #foot_section .f_top .f_link > a:hover {text-decoration:underline;} #foot_section .f_top .f_link > a + a {margin-left: 35px;} #foot_section .f_top #gotop {display:none !important; width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,0.2) url(../img/ico_gotop.svg) 50% 50% no-repeat; text-indent:-9999px; cursor:pointer;} #foot_section .f_info ul {display: flex;} #foot_section .f_info ul li {display:flex; align-items:flex-start; margin-bottom:20px; line-height:28px;} #foot_section .f_info ul li + li {margin-left:60px;} #foot_section .f_info ul li strong {padding:10px 10px; margin-right:10px; border:1px #111 solid; border-radius:6px;min-width: 130px;text-align: center;} #foot_section .f_info ul li .f-tel {display: flex;} #foot_section .f_info address {font-style:normal; letter-spacing:-0.5px;} #foot_section .f_info address span + span {margin-left:15px;} #foot_section .f_info cite {display: block;margin-top:10px; font-style:normal; letter-spacing:-0.5px;} #foot_section .link_wp {position:absolute; right:0; top:50px; border:1px #000 solid; border-radius:14px;} #foot_section .link_wp button.btn_link {width:220px; padding:17px 25px; text-align:left; font-size:16px; font-weight:600; display:inline-flex; align-items:center; justify-content:space-between;} #foot_section .link_wp button.btn_link:after {content: ''; display:block; width:12px; height:7px; background:url(../img/ico_arrow_top.png) center center no-repeat; transition:transform .4s ease;} #foot_section .link_wp button.btn_link.active:after {transform:rotate(-180deg);} #foot_section .link_wp .link_list {display:none; position:absolute; bottom:59px; left:0; width:100%; padding:10px; background-color:#fff; border:1px #000 solid; border-radius:14px;} #foot_section .link_wp .link_list ul {overflow-x:hidden; overflow-y:auto; max-height:200px;} #foot_section .link_wp .link_list ul::-webkit-scrollbar {width:5px;} #foot_section .link_wp .link_list ul::-webkit-scrollbar-thumb {background-color:#2f3542; border-radius:5px;} #foot_section .link_wp .link_list a {display:block; padding:7px 20px; font-weight:500;} #foot_section .link_wp .link_list a:hover {text-decoration:underline;} #mCard2 {display: none;} /**/ #contain {overflow: hidden;position: relative;width: 100%;} #contain .contain {display:flex; justify-content:space-between; width:96%; max-width:1680px; margin:100px auto 100px;} /* 서브비주얼 */ #contain #subVisual {position:absolute; top:0; left:0; width:100%; padding-top:146px; z-index:0; border-radius:0 0 130px 130px; overflow:hidden;} #contain #subVisual .sub_visual .visual_wp {position: relative; width:100%; height:180px; background:#fbf6f3 url(../img/bg_subvisual.jpg) center bottom no-repeat; border-top:1px #eee solid;} #contain #subVisual .sub_visual .visual_wp::before {} #contain #subVisual .sub_visual .visual {max-width: 1460px;margin: 0 auto;height: 100%;} #contain #subVisual .sub_visual .visual .visual_top {display:table; width:100%; height:100%; text-align:center;} #contain #subVisual .sub_visual .visual .visual_top > div {display:table-cell; vertical-align:middle;} #contain #subVisual .sub_visual .visual .visual_top h2 {font-size:36px; font-weight:700; color:#333; letter-spacing:0;} #contain #subVisual .sub_visual .visual_wp .visual .locator {margin-top: 10px;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li {display:inline-block; vertical-align:middle;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li.home {width:20px; height:20px; font-size: 0 !important; background: url(../img/icon_homeline.svg) 0 0 no-repeat;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li.home a {display:block; width:100%; height:100%; font-size:0;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li a, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button {display:block; font-size:17px; font-weight:500; color:#737a8c; background-color:transparent; letter-spacing:0;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button::before, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span::before {content: ''; display:inline-block; width:6px; height:8px; margin:0 10px; vertical-align:3px; background:url(../img/path_arrow.svg) 0 0 no-repeat;} #contain #subVisual .sub_visual .visual_wp .visual .locator .navi {display: none;} /*#contain #subVisual .sub_visual::after {content: '';position: absolute;top: 88px;right: -14%;width: 923px;height: 526px;background-image: url(../img/bg_sub_contents.png);background-repeat: no-repeat;background-position: 50% 50%;}*/ #contain #subTitle {padding: 35px 0;background-image: url(../img/bg_sub_title.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;text-align: center;} #contain #subTitle h3 {margin-bottom: 0;font-size: 45px;font-weight: 700;color: #fff;} #contain #subTitle .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subTitle .locator > ul > li a, #contain #subTitle .locator > ul > li span, #contain #subTitle .locator > ul > li button {display: block;font-size: 15px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;} #contain #subTitle .locator > ul > li button::before, #contain #subTitle .locator > ul > li span::before {content: '>';display: inline-block;width: 20px;vertical-align: top;text-align: center;font-size: inherit;font-family: inherit;} #contain #subTitle .locator .navi {display: none;} /**/ #aside {position:relative; width:300px; margin-top:110px;} #aside h2 {display:flex; align-items:center; justify-content:center; height:150px; overflow:hidden; font-size:32px; color:#fff; background:linear-gradient(-45deg, #ee678f 0%, #3379e7 100%); border-radius:20px 50px; } #aside .left_menu {position:relative; top:-10px; padding:25px 30px; background-color:#fff; border-radius:30px; border:1px solid #e4e4e4; box-shadow: 12px 9px 40px 0px rgba(24, 36, 70, 0.05);} #aside .left_menu > li {overflow:hidden; border-bottom:1px solid #e4e4e4;} #aside .left_menu > li:last-child {border-bottom:0;} #aside .left_menu > li > div > a {position: relative; z-index:0; display:block; padding:17px 0; font-size:18px; font-weight:500; color:#555;} #aside .left_menu > li > div > a:hover {text-decoration: underline; text-underline-offset:4px;} #aside .left_menu > li > div.acco-btn > a::after {content: '';position: absolute;top: 50%;right: 20px;z-index: -1;width: 15px;height: 100%;background-image: url(../img/ico_arrow_down.png);background-repeat: no-repeat;background-position: 50% 50%;transform: translateY(-50%);} #aside .left_menu > li.sel > div > a {color:var(--mainColor);} #aside .left_menu > li.sel > div.acco-btn > a::after {background-image: url(../img/ico_arrow_w_top.png);} #aside .left_menu > li > div + ul {padding: 15px 20px;} #aside .left_menu > li > div + ul > li + li {margin-top: 7px;} #aside .left_menu > li > div + ul > li a {position: relative;z-index: 0;padding-left: 12px;font-size: 16px;font-weight: 500;color: #555;} #aside .left_menu > li > div + ul > li a:hover {text-decoration: underline;} #aside .left_menu > li > div + ul > li a.sel {color: var(--mainColor);} #aside .left_menu > li > div + ul > li a::before {content: '';position: absolute;top: 50%;left: 0;z-index: -1;width: 4px;height: 4px;margin-top: -2px;border-radius: 50%;background-color: #555;} #aside .left_menu > li > div + ul > li a.sel::after{content: '→';display: inline-block;margin-left: 10px;vertical-align: top;} /*#aside ul.left_menu > li {} #aside ul.left_menu > li > div a {position: relative;z-index: 0;display:block;padding: 0 30px 0 0;font-size: 21px;font-weight: 500;color:#000;transition:all 0.3s;} #aside ul.left_menu > li + li > div a {} #aside ul.left_menu > li > div a:hover {color: var(--mainColor);text-decoration: underline;font-weight: 500;transition: all 0.3s;} #aside ul.left_menu > li > a::after {content: '';position: absolute;top: 50%;right: 10px;z-index: -1;width: 10px;height: 10px;margin-top: -5px;} #aside ul.left_menu > li.sel > div a::after {content: '';display: inline-block;width: 16px;height: 16px;margin-left: 15px;background-image: url(../img/ico_left_down.png);background-repeat: no-repeat;background-position: 50% 50%;} #aside ul.left_menu > li.sel > div a {color: var(--mainColor);} #aside ul.left_menu > li ul {display: none;padding-left: 20px;margin: 15px 0 30px;border-left: 5px solid #eee;} #aside ul.left_menu > li > div {padding: 8px 0;} #aside ul.left_menu > li > div:hover {background-color:#f2f2f2; border-radius:10px;} #aside ul.left_menu > li.sel ul {display: block;} #aside ul.left_menu > li li a {display: block;font-size: 17px; height:auto;margin: 0;color: #333;} #aside ul.left_menu > li li + li {margin-top: 12px;} #aside ul.left_menu > li li:last-child a{border:0} #aside ul.left_menu > li li a:hover {color: var(--subColor1);text-decoration: underline;} #aside ul.left_menu > li li a.sel {color: var(--colorOrange);} #aside ul.left_menu > li li a.sel::after {content: '→';display: inline-block;font-size: 20px;margin-left: 10px;vertical-align: middle;} #aside ul.left_menu > li .acco-btn {display: inline-flex;position: relative;width: 100%;} #aside ul.left_menu > li .acco-btn::after {content:"";position: absolute;display: inline-flex;top: 40%;right: 0;width: 10px;height: 10px;padding-right:30px;background-image: url(../img/arrow_down.png);background-repeat: no-repeat;background-position: center;background-size: 50%;transition: 0.4s ease-in-out;} #aside ul.left_menu > li.sel .acco-btn::after {transform: rotate(-180deg);}*/ /* 초기 상태: acco-body 닫힘 */ .acco-body {overflow: hidden;transition: max-height 0.5s ease;display:none;} /*각 컨텐츠 이용안내*/ #design .guide_box{margin-bottom:30px;padding:30px 30px;border:1px solid #ccc;border-radius:10px;} #design .guide_box h3{color:#551ca9;font-size:17px} #design .guide_box > ul > li {position: relative;padding-left: 20px;font-size: 16px;font-weight: 400;color: #333;} #design .guide_box > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li::before {content: '';position: absolute;top: 8px;left: 0;width: 6px;height: 6px;background-color: var(--subColor1);border-radius: 50%;} #design .guide_box > ul > li > ul {margin-top:3px;} #design .guide_box > ul > li > ul > li {position: relative;padding-left: 20px;font-size: 16px;font-weight: 400;color: #333;} #design .guide_box > ul > li > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li > ul > li::before {content: '';position: absolute;top: 11px;left: 0;width: 10px;height: 1px;background-color: #aaa;} /* #design */ #design {position:relative; width:calc(100% - 380px); margin-top:260px; min-height:650px; font-family: var(--fontMainSet); font-size:18px;} #blind{position:absolute;z-index:99998;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft{display:none;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:100px; opacity:0;} to {top:170px; opacity:1;} } @keyframes mv02 { from {top:200px;opacity:0;} to {top:295px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } } /* 768 ~ 1500 Header */ @media all and (min-width: 769px) and (max-width: 1500px) { /* gnbWrap */ #gnbWrap {border-bottom:1px #e7e7e7 solid;} #gnbWrap .gnbNav {position:relative; width:96%; max-width:1800px; margin:0 auto; padding:10px 0;} #gnbWrap .gnbNav li {display:inline-block;} #gnbWrap .gnbNav li + li {margin-left:20px;} /* header */ #header {position:absolute; top:0; left:0; z-index:30002; width:100%;} #header.header_active {background-color:#fff; border-bottom:1px #d9dfe9 solid;} #header .header {position:relative; max-width:1800px; margin:0 auto; padding-top:50px;} #header h1 {position:absolute; left:2%; top:15px; display:inline-block;} #header h1 a {display:block;font-size: 19px;font-weight:700;} #header h1 a img {width: 120px;margin-right:5px;vertical-align: baseline;} #header h1 a span {position: absolute;line-height: normal;padding-left: 40px;width: 250px; display:inline-block;} #header h1 a span:before {content: '';position: absolute;left: 0;top: 50%;width: 36px;height: 22px;background-image: url('../img/logo_symbol.png');background-size: contain;background-repeat: no-repeat;transform: translateY(-50%);} #header button.btn-menu {display:none;} /**/ #header .etc_btn {position:absolute; top:10px; right:2%;} #header .etc_btn > ul {display:flex; align-items:center;} #header .etc_btn > ul > li {position:relative;} #header .etc_btn > ul > li:first-child {padding-right:25px;} #header .etc_btn > ul > li:first-child:after {position:absolute; top:8px; right:10px; width:5px; height:5px; background:#e2e2e2; display:block; border-radius:10px; content: '';} #header .etc_btn > ul > li > a {display:block; font-size:15px; font-weight:500;color:#333;} #header a.sitemap {position:relative; width:30px; height:30px; margin-left:40px; text-indent:-9999px;} #header a.sitemap:before {content:''; position:absolute; top:7px; left:0; display:inline-block; width:100%; height:4px; background:#333; transition-duration:0.3s;} #header a.sitemap:after {content:''; position:absolute; bottom:7px; left:0; display:inline-block; width:100%; height:4px; background:#333; transition-duration:0.3s;} /**/ nav.menu_wrap {width:100%; padding:0; border-top:1px #e6e6e6 solid; border-bottom:1px #e6e6e6 solid;} #gnb .gnb {display: flex;justify-content: space-between;} #gnb .depth1 {display:flex; justify-content:space-around; align-items:center; flex-grow:1;} #gnb .depth1 > li {width:calc(100% / 7); display:inline-block; vertical-align:top; text-align:center;} #gnb .depth1 > li > a {display:block; position:relative; margin:0; padding:15px 0; font-size:20px; font-weight:800; color:var(--colorDarkgray);} #header.header_active #gnb .depth1 > li > a, #header.bg_white #gnb .depth1 > li > a {} #header #gnb .depth1 > li {position:relative;} #header #gnb .depth1 > li.sel > a {color: var(--mainColor);font-weight: 500;text-decoration: underline;text-underline-offset: 10px;} #header.header_active #gnb .depth1 > li.sel > a, #header.bg_white #gnb .depth1 > li.sel > a {color: var(--colorBlue);font-weight: 500;text-decoration: underline;} /*#header #gnb .depth1 > li > a::after {content: "";position:absolute;bottom: 0;left: 0;display:none;width: 100%;height: 5px;background: #558fff;}*/ #header #gnb .depth1 > li:hover > a, #header #gnb .depth1 > li > a:hover {color: var(--colorBlue);} #header #gnb .depth1 > li > .m1:hover::after {width: 100%;} #header #gnb .depth1 > li > .m1::after {content: "";position: absolute;left: 0;bottom: -3px;width: 0;height: 2px; background-color: var(--colorBlue); transition: width 0.5s ease;} #gnb .depth2 {display:block !important; overflow:hidden; position:absolute; top:59px; left:0; width:100%; height:360px; padding:20px 15px 30px; box-sizing: border-box;text-align:center; opacity:0; visibility: hidden; border-left:1px #d9dfe9 solid; z-index:999; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;} #header.header_active #gnb .depth2 {opacity:1; visibility: visible;} #gnb li:hover .depth2 {background-color:var(--mainColor);} #gnb .depth2 > li a {display:block; line-height:26px; padding:6px 10px; font-size:17px; font-weight:500; color:#666; text-align:left;} #gnb li:hover .depth2 > li a {color:#fff;} #gnb li:hover .depth2 > li a:hover {text-decoration:underline;} #header.fix_menu {position:fixed; top: 0;background:#fff;border-bottom:1px solid #ddd;} #header.fix_menu #gnb .depth1 > li > a {color:#333;} #header.fix_menu #gnb .depth1 > li.sel > a {color:#558fff} #allbg{position:fixed;z-index:30000;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.35);display:none} /**/ #mainCon {width:100%; padding-top:157px; background: url(../img/bg_maintop.gif) center 157px no-repeat;} } /* 1300 ~ 1439 공지사항 팝업창 바로가기*/ @media all and (min-width: 1201px) and (max-width: 1439px) { /* #section2 - 공지사항/팝업창 */ #section2 {position:relative;} #section2 .section_inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; padding:0 0 70px 0;} #section2 .popupzone {position:relative; width:850px; margin-right:3%; overflow:hidden; border-radius:30px;} #section2 .popupzone .controls {position:absolute; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between;width:auto; padding:15px 25px 15px 45px; background-color:rgba(42,34,81,0.8); border-radius:30px 0 30px 0;} #section2 .popupzone .controls > div {display:flex; align-items:center;} #section2 .popupzone .controls .slider_dots {margin-right:20px; font-size:16px;} #section2 .popupzone .controls .ctrl button {width:30px; height:30px;} #section2 .popupzone .controls .ctrl button.stop {background-size:13px;} #section2 .popupzone .controls .ctrl button.play {background-size:25px;} #section2 .popupzone .controls.white .slider_dots > span.all::before {content: ''; position: absolute; top:50%; left:-5px; width:11px; height:1px; margin-top:0; background-color: rgba(255, 255, 255, 0.3); transform: skew(0);} #section2 .notice_wp {position:relative; width:calc(97% - 850px); max-width:670px; padding:25px 30px 20px; background-color:#fff; border-radius:30px; border:1px #f1eff9 solid;} #section2 .notice_wp .more_btn {top:25px; right:30px;} #section2 .notice_wp h2 {margin-bottom:10px; font-size:28px; font-weight:800;} #section2 .notice_wp ul {} #section2 .notice_wp ul li {position:relative; display:flex; width:100%; margin-bottom:15px;} #section2 .notice_wp ul li a {display:flex; justify-content:space-between; align-items:center; width:100%;} #section2 .notice_wp ul li h3.title {width:calc(100% - 142px); font-size:18px; font-weight:600; color:#1a1a1a; line-height:28px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} #section2 .notice_wp ul li a:hover h3.title {text-decoration:underline;} #section2 .notice_wp ul li p {display:none;} #section2 .notice_wp ul li .date {display:inline-block; width:60px; font-size:14px; font-weight:500; color:#999; letter-spacing:-0.5px; text-align:right;} #section2 .notice_wp ul li .date em.year {display:none;} #section2 .notice_wp ul li .date .day:before {content:'-';} #section2 .notice_wp ul li span[class^="lib"] {display:inline-block; width:70px; height:29px; padding:4px 10px; margin-right:12px; text-align:center; font-size:15px; font-weight:500; border-radius:15px;} #section2 .notice_wp ul li span.lib0 {color:#333; background-color:#f5f5f5;} #section2 .notice_wp ul li span.lib1 {color:var(--mainColor); background-color:#e5eaf4;} #section2 .notice_wp ul li span.lib2 {color:var(--libColor2); background-color:#f6edf3;} #section2 .notice_wp ul li span.lib3 {color:var(--libColor3); background-color:#f0f8f6;} #section2 .notice_wp ul li:last-child {display:none;} #section2 .notice_wp ul li:first-child {min-height:110px; padding-bottom:10px; padding-left:110px; margin-bottom:20px; border-bottom:1px #cccac9 dashed;} #section2 .notice_wp ul li:first-child .date {display:flex; flex-direction:column; flex-wrap:wrap; position:absolute; left:0; top:0px; font-size:15px; color:#333; width:90px; box-sizing:border-box; text-align:center; border:7px solid #f6edf3; border-radius:20px; padding:6px 0 1px;} #section2 .notice_wp ul li:first-child .date .year {display:inline-block;} #section2 .notice_wp ul li:first-child .date .day {display:block; font-size:40px; font-weight:900; margin-top:-10px;} #section2 .notice_wp ul li:first-child .date .day:before {content:'';} #section2 .notice_wp ul li:first-child a {background:#fff; box-sizing: border-box; transition: all .2s; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 10px;} #section2 .notice_wp ul li:first-child h3.title {width:calc(100% - 82px); font-size:20px; font-weight:700;} #section2 .notice_wp ul li:first-child p {width:100%; margin-top:10px; font-weight:400; font-size:17px; color:#666; line-height:24px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* section2 - 바로가기 */ #section2 .m_direct {width:100%; margin:70px auto 0; display:flex; justify-content:space-between; align-items: center; flex-grow:1;} #section2 .m_direct .title_wp {display:none;} #section2 .m_direct .title_wp h3 {font-size:34px; font-weight:900; letter-spacing:-2px;} #section2 .m_direct .title_wp h3 strong {color:#3379e7; font-weight:inherit;} #section2 .m_direct .title_wp .sub {font-size:16px; font-weight:500;} #section2 .m_direct .direct_list {display: flex; width:100%; justify-content: space-between;} #section2 .m_direct .direct_list a {display:block; text-align:center; font-size:18px;font-weight:700;} #section2 .m_direct .direct_list a::before {content:''; display:block; width:100px; height:100px; margin:0 auto 20px; background-color:#f1f0f9; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 49px; border-radius:30px; transition:all 0.3s ease;} #section2 .m_direct .direct_list a.direct1::before {background-image: url(../img/ico_m_direct1.svg);} #section2 .m_direct .direct_list a.direct2::before {background-image: url(../img/ico_m_direct2.svg);} #section2 .m_direct .direct_list a.direct3::before {background-image: url(../img/ico_m_direct3.svg);} #section2 .m_direct .direct_list a.direct4::before {background-image: url(../img/ico_m_direct4.svg);} #section2 .m_direct .direct_list a.direct5::before {background-image: url(../img/ico_m_direct5.svg);} #section2 .m_direct .direct_list a.direct6::before {background-image: url(../img/ico_m_direct6.svg);} #section2 .m_direct .direct_list a.direct7::before {background-image: url(../img/ico_m_direct7.svg);} #section2 .m_direct .direct_list a.direct8::before {background-image: url(../img/ico_m_direct8.svg);} #section2 .m_direct .direct_list a:hover {color:var(--mainColor); text-decoration:underline; text-underline-offset:4px;} #section2 .m_direct .direct_list a:hover::before {background-color:var(--mainColor); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);} } /* 768 ~ 1300 공지사항 팝업창 바로가기*/ @media all and (min-width: 769px) and (max-width: 1200px) { /* #section2 - 공지사항/팝업창 */ #section2 {position:relative;} #section2 .section_inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; padding:0 0 50px 0;} #section2 .popupzone {position:relative; width:100%; margin-bottom:40px; overflow:hidden; border-radius:30px;} #section2 .popupzone .controls {position:absolute; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between;width:auto; padding:15px 25px 15px 45px; background-color:rgba(42,34,81,0.8); border-radius:30px 0 30px 0;} #section2 .popupzone .controls > div {display:flex; align-items:center;} #section2 .popupzone .controls .slider_dots {margin-right:20px; font-size:16px;} #section2 .popupzone .controls .ctrl button {width:30px; height:30px;} #section2 .popupzone .controls .ctrl button.stop {background-size:13px;} #section2 .popupzone .controls .ctrl button.play {background-size:25px;} #section2 .popupzone .controls.white .slider_dots > span.all::before {content: ''; position: absolute; top:50%; left:-5px; width:11px; height:1px; margin-top:0; background-color: rgba(255, 255, 255, 0.3); transform: skew(0);} #section2 .popupzone .slick-slide img {width:100%} #section2 .notice_wp {position:relative; width:50%; padding:25px 30px 20px; background-color:#fff; border-radius:30px; border:1px #f1eff9 solid;} #section2 .notice_wp .more_btn {top:25px; right:30px; font-size:0;} #section2 .notice_wp .more_btn:after {margin-left:0;} #section2 .notice_wp h2 {margin-bottom:25px; font-size:28px; font-weight:800;} #section2 .notice_wp ul {} #section2 .notice_wp ul li {position:relative; display:flex; width:100%; margin-bottom:15px;} #section2 .notice_wp ul li a {display:flex; justify-content:space-between; align-items:center; width:100%;} #section2 .notice_wp ul li h3.title {width:calc(100% - 142px); font-size:17px; font-weight:600; color:#1a1a1a; line-height:28px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} #section2 .notice_wp ul li a:hover h3.title {text-decoration:underline;} #section2 .notice_wp ul li p {display:none;} #section2 .notice_wp ul li .date {display:inline-block; width:60px; font-size:14px; font-weight:500; color:#999; letter-spacing:-0.5px; text-align:right;} #section2 .notice_wp ul li .date em.year {display:none;} #section2 .notice_wp ul li .date .day:before {content:'-';} #section2 .notice_wp ul li span[class^="lib"] {display:inline-block; width:70px; height:29px; padding:4px 10px; margin-right:12px; text-align:center; font-size:15px; font-weight:500; border-radius:15px;} #section2 .notice_wp ul li span.lib0 {color:#333; background-color:#f5f5f5;} #section2 .notice_wp ul li span.lib1 {color:var(--mainColor); background-color:#e5eaf4;} #section2 .notice_wp ul li span.lib2 {color:var(--libColor2); background-color:#f6edf3;} #section2 .notice_wp ul li span.lib3 {color:var(--libColor3); background-color:#f0f8f6;} #section2 .notice_wp ul li:last-child {display:none;} #section2 .notice_wp ul li:first-child {min-height:110px; padding-bottom:10px; padding-left:110px; margin-bottom:20px; border-bottom:1px #cccac9 dashed;} #section2 .notice_wp ul li:first-child .date {display:flex; flex-direction:column; flex-wrap:wrap; position:absolute; left:0; top:0px; font-size:15px; color:#333; width:90px; box-sizing:border-box; text-align:center; border:7px solid #f6edf3; border-radius:20px; padding:6px 0 1px;} #section2 .notice_wp ul li:first-child .date .year {display:inline-block;} #section2 .notice_wp ul li:first-child .date .day {display:block; font-size:40px; font-weight:900; margin-top:-10px;} #section2 .notice_wp ul li:first-child .date .day:before {content:'';} #section2 .notice_wp ul li:first-child a {background:#fff; box-sizing: border-box; transition: all .2s; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 10px;} #section2 .notice_wp ul li:first-child h3.title {width:calc(100% - 82px); font-size:18px; font-weight:700;} #section2 .notice_wp ul li:first-child p {width:100%; margin-top:10px; font-weight:400; font-size:16px; color:#666; line-height:22px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* section2 - 바로가기 */ #section2 .m_direct {width:calc(50% - 50px); margin-left:50px; display:flex; justify-content:space-between; align-items:center; flex-grow:1;} #section2 .m_direct .title_wp {display:none;} #section2 .m_direct .title_wp h3 {font-size:34px; font-weight:900; letter-spacing:-2px;} #section2 .m_direct .title_wp h3 strong {color:#3379e7; font-weight:inherit;} #section2 .m_direct .title_wp .sub {font-size:16px; font-weight:500;} #section2 .m_direct .direct_list {display: flex; width:100%; flex-wrap:wrap; gap:30px 0;} #section2 .m_direct .direct_list a {width:calc(100% / 3); display:block; text-align:center; font-size:16px;font-weight:700;} #section2 .m_direct .direct_list a::before {content:''; display:block; width:80px; height:80px; margin:0 auto 10px; background-color:#f1f0f9; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 40px; border-radius:30px; transition:all 0.3s ease;} #section2 .m_direct .direct_list a.direct1::before {background-image: url(../img/ico_m_direct1.svg);} #section2 .m_direct .direct_list a.direct2::before {background-image: url(../img/ico_m_direct2.svg);} #section2 .m_direct .direct_list a.direct3::before {background-image: url(../img/ico_m_direct3.svg);} #section2 .m_direct .direct_list a.direct4::before {background-image: url(../img/ico_m_direct4.svg);} #section2 .m_direct .direct_list a.direct5::before {background-image: url(../img/ico_m_direct5.svg);} #section2 .m_direct .direct_list a.direct6::before {background-image: url(../img/ico_m_direct6.svg);} #section2 .m_direct .direct_list a.direct7::before {background-image: url(../img/ico_m_direct7.svg);} #section2 .m_direct .direct_list a.direct8::before {background-image: url(../img/ico_m_direct8.svg);} #section2 .m_direct .direct_list a:hover {color:var(--mainColor); text-decoration:underline; text-underline-offset:4px;} #section2 .m_direct .direct_list a:hover::before {background-color:var(--mainColor); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);} } /* 768 ~ 1339 */ @media all and (min-width: 769px) and (max-width: 1439px) { #divpop { display:none;} #mm-blocker{display:none} #popupWindow{position:absolute} #hCheon {position:relative;top:0px;padding:0; margin:0;width:100%;} #OpenLayer {position: absolute;top: 180px;left: 100px;z-index: 9999;background: #fff;padding: 10px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 14px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} /* #menu{position:absolute;z-index:10;top:0;right:0;background: #252525;} #menu a{display:block;width: 50px;height: 50px;background:url(../img/menu.png) no-repeat 50%;text-indent:-9999em;overflow:hidden} */ .section_inner {position:relative; width:96%; max-width:var(--maxWidthPC); margin:0 auto; padding:50px 0;} .section_inner .more_btn {position:absolute; right:0; top:0; display:inline-block; font-size:18px; font-weight:500; color:#333;} .section_inner .more_btn:after {content:''; display:inline-block; vertical-align:middle; width:46px; height:46px; margin-left:13px; border-radius:50%; background:#363637 url(../img/btn_more.png) 50% no-repeat;} .section h3 {font-size: 30px;font-weight: 700;color: #000;} .section h3.white {color: #fff;} .section h4 {font-size: 28px;font-weight: 500;color: var(--mainColor);} .section .sub_title {font-size: 17px;font-weight: 500;color: #757575;} /**/ .section .kind.lib1 {background-color: var(--mainColor);color: var(--colorWhite);} .section .kind.lib2 {background-color: var(--libColor2);color: var(--colorWhite);} .section .kind.lib3 {background-color: var(--libColor3);color: var(--colorWhite);} .section .lib1 {color: var(--mainColor);} .section .lib2 {color: var(--libColor2);} .section .lib3 {color: var(--libColor3);} .section .btn_wrap {margin-top: 80px;text-align: center;} .section .btn_wrap > a {display: inline-block;width: 216px;height: 62px;border: 1px solid #333;font-size: 18px;font-weight: 400;color: #333;line-height: 62px;} /**/ .section .controls {} .section .controls .slick-arrow {overflow: hidden;width: 40px;height: 40px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: top;} .section .controls .slick-prev {background-image: url(../img/ico_arrow_prev.svg);} .section .controls .slick-next {background-image: url(../img/ico_arrow_next.svg);} .section .controls.white .slick-arrow {} .section .controls.white .slick-prev {background-image: url(../img/ico_arrow_w_prev.svg);} .section .controls.white .slick-next {background-image: url(../img/ico_arrow_w_next.svg);} .section .controls .slider_dots {display: inline-block;vertical-align: middle;} .section .controls .slider_dots > span {font-size:18px; font-weight:600; color:rgba(0,0,0,0.6);} .section .controls.white .slider_dots > span {color:rgba(255,255,255,0.6);} .section .controls .slider_dots > span.now {color:#363637;} .section .controls .slider_dots > span.all {position: relative;z-index: 0;padding-left: 12px;margin-left: 12px;} .section .controls .slider_dots > span.all::before {content: '';position: absolute;top: 50%;left: 0;width: 2px;height: 16px;margin-top: -8px;background-color:#363637; transform: skew(-20deg);} .section .controls.white .slider_dots > span.now {color:rgba(255,255,255,1);} .section .controls.white .slider_dots > span.all::before {content: '';position: absolute;top: 50%;left: 0;width: 2px;height: 16px;margin-top: -8px;background-color: rgba(255,255,255,0.3); transform: skew(-20deg);} .section .controls .slider_dots ul li {display: none;} .section .controls .slider_dots ul li.slick-active {display: block;} .section .controls .ctrl button {overflow: hidden;width: 40px;height: 40px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;} .section .controls .ctrl button.stop {background-image: url(../img/ico_m_stop.png);} .section .controls .ctrl button.play {background-image: url(../img/ico_m_play.svg); background-size:30px;} .section .controls.white .ctrl button.stop {background-image: url(../img/ico_m_w_stop.png);} .section .controls.white .ctrl button.play {background-image: url(../img/ico_m_w_play.svg); background-size:30px;} /**/ .section .m_tabs {} .section .m_tabs > ul {display:flex;} .section .m_tabs > ul > li + li {margin-left:35px;} .section .m_tabs > ul > li > a {font-size:32px; font-weight:700; color:#555;} .section .m_tabs > ul > li > .tit {font-size:32px; font-weight:700; color:#555;} .section .m_tabs > ul > li > a.active {color:var(--subColor); text-decoration:underline;} .section .m_tabs_con > div {opacity: 0;height: 0;overflow: hidden;transition: all 0.3s ease;} .section .m_tabs_con > div.active {opacity: 1;height: auto;overflow: visible;} .section .m_tabs_con > div a.m_more {position: absolute;top: 0;right: 0;width: 55px;height: 55px;border: 1px solid #c0c0c6;text-indent: -9999px;background-image: url(../img/ico_m_more.gif);background-repeat: no-repeat;background-position: 50% 50%;} /* 메인 상단 - 검색창 */ #section1 {position:relative; width:100%; max-width:1920px; margin:0 auto;} #section1 .section_inner {} #section1 .search_wp {} #section1 .search_area {width:100%; max-width:630px; margin:0 auto;} #section1 .search_area .input_wp {position:relative;} #section1 .search_area .input_wp input {width:calc(100% - 52px); height:80px; padding:0 40px; font-size:22px; font-weight:500; color:#333; border:5px #b35a9a solid; border-radius:50px; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1); outline:none;} #section1 .search_area .input_wp button {position:absolute; top:0; right:0; width:74px; height:74px; border-radius:30px; background-color:#b65995; background-image:url(../img/ico_m_search.svg);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 29px;text-indent: -9999px;} #section1 .search_area .search_word {display:flex; width:90%; margin:25px auto 0; font-size:16px; color:#757b8e; align-items:center;} #section1 .search_area .search_word .title {font-weight:700;} #section1 .search_area .search_word .word_list {margin-left: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} #section1 .search_area .search_word .word_list > a {display: inline-block;margin-left: 20px;font-weight: 500;} /* 움직이는 라인 */ .wavy {position:absolute; top:44px; right:123px; width:99px; height:13px; overflow:hidden;} .wavy:before {content:''; display:block; width:100%; height:100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 8'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23f5d155' stroke-width='2' class='squiggle' d='M0,6c5,0,5-5,10-5s5,5,10,5s5-5,10-5s5,5,10,5'/%3E%3C/svg%3E"); background-position: 0 100%; background-size: auto 11px; background-repeat: repeat-x;} .wavy2 {position:absolute; top:77px; right:36px; width:99px; height:13px; overflow:hidden;} .wavy2:after {content:''; display:block; width:100%; height:100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 8'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%238fa1fb' stroke-width='2' class='squiggle' d='M0,6c5,0,5-5,10-5s5,5,10,5s5-5,10-5s5,5,10,5'/%3E%3C/svg%3E"); background-position: 0 100%; background-size: auto 11px; background-repeat: repeat-x;} @keyframes shift { from { transform:translateX(0); } to { transform:translateX(-20px); } } /* #section3 */ #section3 {padding:50px 0; background:#f4f6fa url(../img/bg_section3.gif) 50% 0 no-repeat;} #section3 h2 {margin-bottom:35px; font-size:32px; font-weight:700;} #section3 h2 strong {display:block; font-size:24px; font-weight:700; color:var(--subColor);} #section3 .more_btn {top:85px;} #section3 .culture_wp .culture_list {display:flex; align-items:center;} #section3 .culture_wp .slick-list {width:calc(100% - 100px); margin-left:20px; padding:15px 0;} #section3 .culture_wp ul li {position:relative; padding:80px 30px 30px; margin-right:30px; background:#fff url(../img/icon_culture.png) 30px 30px no-repeat; transition: all ease .3s;} #section3 .culture_wp ul li:hover {box-shadow:2px 2px 15px rgba(0,0,0,.10);} #section3 .culture_wp ul li .state {position:absolute; right:30px; top:30px;} #section3 .culture_wp ul li .state .kind {display:flex; align-items:center; justify-content:center; width:90px; height:38px; font-size:18px; font-weight:600; border-radius:30px;} #section3 .culture_wp ul li .state .kind.wait {background-color: var(--colorGreen);color: #fff;} #section3 .culture_wp ul li .state .kind.ing {background-color: var(--colorBlue);color: #fff;} #section3 .culture_wp ul li .state .kind.add {background-color: var(--colorOrange);color: #fff;} #section3 .culture_wp ul li .state .kind.end {background-color: #666;color: #fff;} #section3 .culture_wp ul li .con {} #section3 .culture_wp ul li .con .title {display:block; font-size:22px; font-weight:600; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #section3 .culture_wp ul li .con dl {display:flex; margin-bottom:5px; font-size:16px; font-weight:500;} #section3 .culture_wp ul li .con strong + dl {margin-top:20px; padding-top:20px; border-top:1px #e1e2e5 solid;} #section3 .culture_wp ul li .con dl dt {color:#333;} #section3 .culture_wp ul li .con dl dd {color:#666; margin-left:3px;} #section3 .culture_wp .slick-arrow {overflow: hidden;width: 40px;height: 40px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: top;} #section3 .culture_wp .slick-prev {background-image: url(../img/ico_arrow_prev.svg);} #section3 .culture_wp .slick-next {background-image: url(../img/ico_arrow_next.svg);} /* #section4 */ #section4 {overflow: hidden;position: relative;z-index: 0;} #section4 .section_inner {} #section4 .m_books {position:relative;} #section4 .m_books .m_tabs {position:relative; display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:50px;} #section4 .m_books .m_tabs:before {content:''; position:absolute; top:39px; right:220px; width:53%; height:1px; background-color:#000;} #section4 .m_books .m_tabs:after {content:'다양한 이야기, 다양한 시선'; font-size:20px; font-weight:700; color:#000;} #section4 .m_books .m_tabs ul {} #section4 .m_books .m_tabs ul li {} #section4 .m_books .m_tabs_con {position:relative;} #section4 .m_books .m_tabs_con h3 {display:none;} #section4 .m_books .m_tabs_con .book_list {display:flex; justify-content:space-between;min-height:500px;} #section4 .m_books .m_tabs_con .book_list li.slick-current {padding:0;width: 30% !important;max-width: 550px !important;} #section4 .m_books .m_tabs_con .book_list li[data-slick-index="12"] {display:none;} #section4 .m_books .m_tabs_con .book_list li[data-slick-index="13"] {display:none;} #section4 .m_books .m_tabs_con .book_list li {/*float:none; /*width:15% !important;*/ box-sizing:border-box;} #section4 .m_books .m_tabs_con .book_list li img {max-width: 193px;min-height: 279px;} #section4 .m_books .m_tabs_con .book_list li div.info {display:none; color:#000;} #section4 .m_books .m_tabs_con .book_list li div.info p {font-size: 16px;font-weight:400;line-height:24px;} #section4 .m_books .m_tabs_con .book_list li span {display:block;} #section4 .m_books .m_tabs_con .book_list li span.title {overflow: hidden;font-size: 26px;font-weight: 800;text-overflow: ellipsis;white-space: nowrap;} #section4 .m_books .m_tabs_con .book_list li span.writer {overflow: hidden;margin:20px 0 35px;font-size: 18px;font-weight: 500;text-overflow: ellipsis;white-space: nowrap;} #section4 .slick-track {/*display:flex;*/} #section4 .slick-slide {padding-top:35px;} #section4 .slick-current a {position:relative;display:flex;align-items:center;padding:35px 0;margin-right: 50px;z-index:1;} #section4 .slick-current a:before {content: ''; display:block; width:80%; height:100%; background-color:#e4d4f1; position:absolute; top:0; left:20%; z-index:-1;} #section4 .slick-current .img {width: 50%;max-width: 230px !important;margin-right:5%;box-shadow:4px 0 20px rgba(0, 0, 0, 0.1);} #section4 .slick-current .info {display:block !important; width:40%;} #section4 .slick-current .info .more_btn {top:auto; right:auto; bottom:auto !important; position:relative; margin-top:25px;} #section4 .section_inner .more_btn {top:auto; bottom:-5px !important;} #section4 .controls {display:flex; align-items:center; justify-content:flex-end; position:relative; bottom:0; right:120px;} /* #section5 */ #section5 {overflow: hidden;position: relative;z-index: 0;margin-bottom: 50px;} #section5 .section_inner {} #section5 .m_books {position:relative;} #section5 .m_books .m_tabs {position:relative; display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:50px;} #section5 .m_books .m_tabs:before {content:''; position:absolute; top:39px; right:220px; width:53%; height:1px; background-color:#000;} #section5 .m_books .m_tabs:after {content:'옥천공공도서관 인기도서'; font-size:20px; font-weight:700; color:#000;} #section5 .m_books .m_tabs ul {} #section5 .m_books .m_tabs ul li {} #section5 .m_books .m_tabs_con {position:relative;} #section5 .m_books .m_tabs_con h3 {display:none;} #section5 .m_books .m_tabs_con .book_list {display:flex; justify-content:space-between;min-height:500px;} #section5 .m_books .m_tabs_con .book_list li.slick-current {padding:0;width: 30% !important;max-width: 550px !important;} #section5 .m_books .m_tabs_con .book_list li[data-slick-index="12"] {display:none;} #section5 .m_books .m_tabs_con .book_list li[data-slick-index="13"] {display:none;} #section5 .m_books .m_tabs_con .book_list li {/*float:none; /*width:15% !important;*/ box-sizing:border-box;} #section5 .m_books .m_tabs_con .book_list li img {max-width: 193px;min-height: 279px;} #section5 .m_books .m_tabs_con .book_list li div.info {display:none; color:#000;} #section5 .m_books .m_tabs_con .book_list li div.info p {font-size: 16px;font-weight:400;line-height:24px;} #section5 .m_books .m_tabs_con .book_list li span {display:block;} #section5 .m_books .m_tabs_con .book_list li span.title {overflow: hidden;font-size: 26px;font-weight: 800;text-overflow: ellipsis;white-space: nowrap;} #section5 .m_books .m_tabs_con .book_list li span.writer {overflow: hidden;margin:20px 0 35px;font-size: 18px;font-weight: 500;text-overflow: ellipsis;white-space: nowrap;} #section5 .slick-track {/*display:flex;*/} #section5 .slick-slide {padding-top:35px;} #section5 .slick-current a {position:relative;display:flex;align-items:center;padding:35px 0;margin-right: 50px;z-index:1;} #section5 .slick-current a:before {content: ''; display:block; width:80%; height:100%; background-color:#e4d4f1; position:absolute; top:0; left:20%; z-index:-1;} #section5 .slick-current .img {width: 50%;max-width: 230px !important;margin-right:5%;box-shadow:4px 0 20px rgba(0, 0, 0, 0.1);} #section5 .slick-current .info {display:block !important; width:40%;} #section5 .slick-current .info .more_btn {top:auto; right:auto; bottom:auto !important; position:relative; margin-top:25px;} #section5 .section_inner .more_btn {top:auto; bottom:-5px !important;} #section5 .controls {display:flex; align-items:center; justify-content:flex-end; position:relative; bottom:0; right:120px;} /* 이용안내 */ #cs-info .section_inner {margin:80px auto; padding:40px 250px 40px 60px; background:#f4f6fa url(../img/bg_csinfo.png) right bottom no-repeat;} #cs-info .section_inner h2 {margin-bottom:20px; font-size:32px; font-weight:700; line-height:32px;} #cs-info .section_inner h2 br {display:none;} #cs-info .section_inner > div {display:flex; flex-wrap:wrap; font-size:20px; font-weight:700;} #cs-info .section_inner > div dl {display:flex; margin-right:3%;} #cs-info .section_inner > div dl.closed dd {color:#d63434;} #cs-info .section_inner > div dl.open dt {color:#0883bf;} #cs-info .section_inner > div dl + dl {margin-left:0;} #cs-info .section_inner > div dl dt {margin-right:40px;} #cs-info .section_inner > div dl dd {font-size:18px;} #cs-info .section_inner > div dl dd p {margin-bottom:7px;} #cs-info .section_inner > div dl dd strong {font-size:25px; font-family:'g-market-sans'; font-weight:700; vertical-align:middle; margin-left:10px; letter-spacing:0;} #cs-info .section_inner > div dl dd + dd {margin-left:55px;} #cs-info .section_inner > div dl.tel {width:100%; margin-left:0; margin-top:15px; padding-top:15px; border-top:1px #dbdde1 solid;} #cs-info .section_inner > div dl.tel em {font-family:'g-market-sans'; font-weight:700; vertical-align:middle; letter-spacing:0;} /**/ #banner .banner_wp {display: flex;align-items: center;} #banner .banner_wp .banner_title {display: inline-flex;width: 250px;margin-right: 10px;align-items: center;} #banner .banner_wp .banner_title h3 {margin: 0 30px 0 0;font-size: 20px;font-weight: 700;} #banner .banner_wp .banner_title .controls button {width: 30px;height: 30px;margin: 3px;border: 1px solid #d3d3e5;border-radius: 50%;background-size: auto 12px;} #banner .banner_wp .banner_title .controls button.stop {background-size: auto 10px;} #banner .banner_wp .slick_wp {width: calc(100% - 260px);} /* Footer */ #foot_section {} #foot_section .section_inner {position:relative; padding:40px 0 60px; border-top:2px #000 solid; font-size:16px; font-weight:500;} #foot_section .footer {} #foot_section .f_top {display:flex; justify-content:space-between; margin-bottom:30px;} #foot_section .f_top .f_link {display:inline-flex;} #foot_section .f_top .f_link > a {font-size:20px; font-weight:600;} #foot_section .f_top .f_link > a:hover {text-decoration:underline;} #foot_section .f_top .f_link > a + a {margin-left: 35px;} #foot_section .f_top #gotop {display:none !important; width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,0.2) url(../img/ico_gotop.svg) 50% 50% no-repeat; text-indent:-9999px; cursor:pointer;} #foot_section .f_info ul {display: grid;grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));max-width: 1300px;} #foot_section .f_info ul li {display:flex; align-items:flex-start; margin-bottom:10px;} #foot_section .f_info ul li strong {padding:10px 10px; margin-right:10px; border:1px #111 solid; border-radius:6px;min-width: 130px; text-align:center;} #foot_section .f_info ul li .f-tel {display: flex;} #foot_section .f_info address {font-style:normal; letter-spacing:-0.5px;} #foot_section .f_info address span {margin-right:30px;} #foot_section .f_info cite {display: block; margin-top:10px; font-style:normal; letter-spacing:-0.5px;} #foot_section .link_wp {position:absolute; right:0; top:20px; border:1px #000 solid; border-radius:14px;} #foot_section .link_wp button.btn_link {width:220px; padding:17px 25px; text-align:left; font-size:16px; font-weight:600; display:inline-flex; align-items:center; justify-content:space-between;} #foot_section .link_wp button.btn_link:after {content: ''; display:block; width:12px; height:7px; background:url(../img/ico_arrow_top.png) center center no-repeat; transition:transform .4s ease;} #foot_section .link_wp button.btn_link.active:after {transform:rotate(-180deg);} #foot_section .link_wp .link_list {display:none; position:absolute; bottom:59px; left:0; width:100%; padding:10px; background-color:#fff; border:1px #000 solid; border-radius:14px;} #foot_section .link_wp .link_list ul {overflow-x:hidden; overflow-y:auto; max-height:200px;} #foot_section .link_wp .link_list ul::-webkit-scrollbar {width:5px;} #foot_section .link_wp .link_list ul::-webkit-scrollbar-thumb {background-color:#2f3542; border-radius:5px;} #foot_section .link_wp .link_list a {display:block; padding:7px 20px; font-weight:500;} #foot_section .link_wp .link_list a:hover {text-decoration:underline;} #mCard2 {display: none;} /**/ #contain {overflow: hidden;position: relative;width: 100%;} #contain .contain {display:flex; justify-content:space-between; width:96%; max-width:1680px; margin:100px auto 100px;} /* 서브비주얼 */ #contain #subVisual {position:absolute; top:0; left:0; width:100%; padding-top:157px; z-index:0; border-radius:0 0 130px 130px; overflow:hidden;} #contain #subVisual .sub_visual .visual_wp {position: relative; width:100%; height:170px; background:#fbf6f3 url(../img/bg_subvisual.jpg) center bottom no-repeat; border-top:1px #eee solid;} #contain #subVisual .sub_visual .visual_wp::before {} #contain #subVisual .sub_visual .visual {max-width: 1460px;margin: 0 auto;height: 100%;} #contain #subVisual .sub_visual .visual .visual_top {display:table; width:100%; height:100%; text-align:center;} #contain #subVisual .sub_visual .visual .visual_top > div {display:table-cell; vertical-align:middle;} #contain #subVisual .sub_visual .visual .visual_top h2 {font-size:36px; font-weight:700; color:#333; letter-spacing:0;} #contain #subVisual .sub_visual .visual_wp .visual .locator {margin-top: 10px;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li {display:inline-block; vertical-align:middle;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li.home {width:18px; height:20px; font-size: 0 !important; background: url(../img/icon_homeline.svg) 0 0 no-repeat;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li.home a {display:block; width:100%; height:100%; font-size:0;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li a, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button {display:block; font-size:16px; font-weight:500; color:#737a8c; background-color:transparent; letter-spacing:0;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button::before, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span::before {content: ''; display:inline-block; width:6px; height:8px; margin:0 10px; vertical-align:3px; background:url(../img/path_arrow.svg) 0 0 no-repeat;} #contain #subVisual .sub_visual .visual_wp .visual .locator .navi {display: none;} /*#contain #subVisual .sub_visual::after {content: '';position: absolute;top: 88px;right: -14%;width: 923px;height: 526px;background-image: url(../img/bg_sub_contents.png);background-repeat: no-repeat;background-position: 50% 50%;}*/ #contain #subTitle {padding: 35px 0;background-image: url(../img/bg_sub_title.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;text-align: center;} #contain #subTitle h3 {margin-bottom: 0;font-size: 42px;font-weight: 700;color: #fff;} #contain #subTitle .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subTitle .locator > ul > li a, #contain #subTitle .locator > ul > li span, #contain #subTitle .locator > ul > li button {display: block;font-size: 15px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;} #contain #subTitle .locator > ul > li button::before, #contain #subTitle .locator > ul > li span::before {content: '>';display: inline-block;width: 20px;vertical-align: top;text-align: center;font-size: inherit;font-family: inherit;} #contain #subTitle .locator .navi {display: none;} /*각 컨텐츠 이용안내*/ #design .guide_box{margin:30px 0;padding:30px 30px;border:1px solid #ccc;border-radius:10px;} #design .guide_box h3{color:#551ca9;font-size:17px} #design .guide_box > ul > li {position: relative;padding-left: 20px;font-size: 16px;font-weight: 400;color: #333;} #design .guide_box > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li::before {content: '';position: absolute;top: 8px;left: 0;width: 6px;height: 6px;background-color: var(--subColor1);border-radius: 50%;} #design .guide_box > ul > li > ul {margin-top:3px;} #design .guide_box > ul > li > ul > li {position: relative;padding-left: 20px;font-size: 16px;font-weight: 400;color: #333;} #design .guide_box > ul > li > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li > ul > li::before {content: '';position: absolute;top: 11px;left: 0;width: 10px;height: 1px;background-color: #aaa;} /* #design */ #design {position:relative; width:calc(80% - 50px); margin-top:250px; min-height:650px; font-family: var(--fontMainSet); font-size:18px;} /**/ #aside {position:relative; width:20%; margin-top:110px;} #aside h2 {display:flex; align-items:center; justify-content:center; height:150px; overflow:hidden; font-size:32px; color:#fff; background:linear-gradient(-45deg, #ee678f 0%, #3379e7 100%); border-radius:20px 50px; } #aside .left_menu {position:relative; top:-10px; padding:25px 30px; background-color:#fff; border-radius:30px; border:1px solid #e4e4e4; box-shadow: 12px 9px 40px 0px rgba(24, 36, 70, 0.05);} #aside .left_menu > li {overflow:hidden; border-bottom:1px solid #e4e4e4;} #aside .left_menu > li:last-child {border-bottom:0;} #aside .left_menu > li > div > a {position: relative; z-index:0; display:block; padding:17px 0; font-size:18px; font-weight:500; color:#555;} #aside .left_menu > li > div > a:hover {text-decoration: underline; text-underline-offset:4px;} #aside .left_menu > li > div.acco-btn > a::after {content: '';position: absolute;top: 50%;right: 20px;z-index: -1;width: 15px;height: 100%;background-image: url(../img/ico_arrow_down.png);background-repeat: no-repeat;background-position: 50% 50%;transform: translateY(-50%);} #aside .left_menu > li.sel > div > a {color:var(--mainColor);} #aside .left_menu > li.sel > div.acco-btn > a::after {background-image: url(../img/ico_arrow_w_top.png);} #aside .left_menu > li > div + ul {padding: 15px 20px;} #aside .left_menu > li > div + ul > li + li {margin-top: 7px;} #aside .left_menu > li > div + ul > li a {position: relative;z-index: 0;padding-left: 12px;font-size: 16px;font-weight: 500;color: #555;} #aside .left_menu > li > div + ul > li a:hover {text-decoration: underline;} #aside .left_menu > li > div + ul > li a.sel {color: var(--mainColor);} #aside .left_menu > li > div + ul > li a::before {content: '';position: absolute;top: 50%;left: 0;z-index: -1;width: 4px;height: 4px;margin-top: -2px;border-radius: 50%;background-color: #555;} #aside .left_menu > li > div + ul > li a.sel::after{content: '→';display: inline-block;margin-left: 10px;vertical-align: top;} /* 초기 상태: acco-body 닫힘 */ .acco-body {overflow: hidden;transition: max-height 0.5s ease;display:none;} /* #design{position:relative; padding:0 20px;background: url(../img/sub-patten.png) no-repeat 100% 0} #design #content > div {} #design #content .sub_visual {margin: 0;} #design #program > div {margin-top: 20px;} #design #program .sub_visual {margin: 0;} #design #content , #design #program { padding-bottom:40px;} #design .visual{padding-bottom: 16px;border-bottom:1px solid #ddd; z-index:1;} #design .visual h1,#design .visual h2{position:relative;z-index:2;padding:20px 0 0;font-size:30px;font-weight:600;letter-spacing:-1px;color:#333; transition:all 0.6s cubic-bezier(0.785, 0.135, 0.150, 0.860); animation-duration: 1s; animation-name: v_text; } #design .visual p{font-size:15px;color:#626262;} #design #wait img {width: auto;} #subVisual {position:relative;} #subVisual h1 {padding: 90px 0;font-size: 26px;font-weight: 600;color:#fff;text-align:center;} #subVisual h1 .en {display:block;padding-top: 8px;color:#fcdd4b;font-size: 16px;font-weight: 500;text-transform: uppercase;} #subVisual .visual .locator{position:absolute;bottom: 0;left: 0;z-index: 10;width: 100%;height: 48px;background: rgba(51,54,64,0.7);} #subVisual .visual .locator .path {overflow:hidden;width: 96%;margin: 0 2%;} #subVisual .visual .locator .path li{float:left;width: 27%;text-align:left;border-right: 1px solid rgba(255,255,255,0.3);} #subVisual .visual .locator .path li button{display:block;width: 100%;padding:0 20px;box-sizing: border-box;border:0;font-size: 16px;line-height: 48px;color:#fff;background:url(../img/loc_arrow.png) no-repeat 90% 50%;cursor: pointer;text-align:left;} #subVisual .visual .locator .path li.sel button{color:#666} #subVisual .visual .locator .path li.home {width: 48px;border-left: 1px solid rgba(255,255,255,0.3);background: none;} #subVisual .visual .locator .path li.home a {display: block;height: 48px;line-height:48px;font-size:16px;color:#fff;text-align:center;} #subVisual .vepth .navi{display:none;background: #fff;border: 1px solid #ddd;} #subVisual .vepth .navi div a {position:relative;display:block;padding: 10px 8px;font-size: 15px;border-bottom: 1px solid #ddd;color:#555;letter-spacing: -0.4px;} #subVisual .vepth .navi div a:last-child {border-bottom: 0;} #subVisual .vepth .navi div a:hover {background:#445db2;color:#fff;} @keyframes naviEf { from {width: 0;} to {width: 100%;} } #subVisual .datelist{line-height:20px;text-align:center} #subVisual .datelist strong{padding:0 10px;font-size:20px} #subVisual .datelist a{display:none}*/ /**/ #blind {position:absolute;z-index:9999;top:0px;left:0px; bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft {display:none;position:absolute;z-index:10;left:0px;top:0px;width:100%;height: 100%;background:#1e2c5d;padding-bottom: 60px;} #dkleft .lefttit{text-align:left;width: 100%;box-sizing: border-box;background:#1e2c5d;} #dkleft .lefttit img{height: 25px;} #dkleft .select {height: 100%;overflow-y: auto;} #dkleft .lefttit button {display:block;position:relative;padding: 20px 15px;font-size: 16px;color:#fff;border:0;background:transparent;font-family: 'Montserrat';font-weight: 500;} #dkleft .lefttit button i {display: inline-block;padding: 0 7px 0 0;font-size: 15px;color:#fff;vertical-align: middle;} #dkleft .lefttit > div {background-color: #eee;padding: 0 15px;} #dkleft .lefttit .join{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .join i{padding:0 7px 0 0;font-size:24px;color:#1e2c5d} #dkleft .lefttit .idpw{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .sel_btn {display:inline-block;position:relative;padding:0 8px;height:36px;line-height:36px;margin:5px 0;font-size:14px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .mobile_member {display: block;padding-bottom: 5px;border-top: 1px solid rgba(255,255,255,0.3);} #dkleft .lefttit .mobile_member > a {display: block;padding: 10px 0 10px 35px;color: #fff;font-size: 15px;box-sizing: border-box;background: url(../img/member_icon.png) no-repeat 0 50%;} #dkleft .select .modify{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .modify span {display:inline-block;padding:0 16px;height:36px;line-height:36px;background:#2e4287;color:#fff;border-radius:5px;} #dkleft .select .modify i{display:inline-block;position:relative;top:1px;padding:0 7px 0 0;font-size:24px;color:#fff} #dkleft .depth1{display:block;width: 100%;position:relative;padding: 0 15px;line-height:50px;font-size:16px;color:#fff;text-align:left;border-bottom: 1px solid rgba(255, 255, 255, .1);transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 strong {position:relative;top:-2px;padding:0 4px;height:14px;line-height:14px;font-size:10px;background:#ff0000;border-radius:30px} #dkleft .depth1 span{font-style:normal;color:#ffa800} #dkleft .depth1 em{position:absolute;z-index:2;top:0;right:4px;width:39px;height:39px;background:url(/web/seomun/img/common/plus.png) no-repeat 50% 50%;background-size:11px 11px} #dkleft .depth1.sel {background: #2e4287;color:#fff;border-bottom:1px solid #596170} /*#dkleft .depth1 i {font-family:Linearicons-Free;display:block;margin:15px 15px 0 0;color:#aaa;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s}*/ #dkleft .depth1 i {display:block;width: 20px;height: 20px;margin: 15px 15px 0 0;background-image: url(../img/ico_dkleft_arrow.png);background-size: auto 7px;text-indent: -9999px;background-repeat: no-repeat;background-position: 50% 50%;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 i.rightico {float:right} #dkleft .depth1.sel i.rightico{color:#fff;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s} #dkleft .depth2{display:none;background:#fff} #dkleft .depth2 a{display:block;padding:0 20px;line-height:40px;font-size:14px;color:#555;border-bottom:1px solid #ddd;text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #dkleft .depth2 .depth3 {background-color: #f4f4f4;} #dkleft .depth2 .depth3 > li > a {display: block;font-size: 13px;padding: 7px 20px;color: #555;border-bottom: 0;line-height: 1.2em;} #dkleft .depth2 .depth3 > li:first-child > a {padding-top: 15px;} #dkleft .depth2 .depth3 > li:last-child > a {padding-bottom: 15px;border-bottom: 1px solid #ddd;} #closeleft{position: absolute;z-index: 9999999;left: -45px;top: 15px;width: 35px;height: 35px;display: block;text-align: center;font-size: 30px;font-family: Linearicons-Free;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;color: #fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870";font-size:30px;line-height:1;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:100px; opacity:0;} to {top:170px; opacity:1;} } @keyframes mv02 { from {top:200px;opacity:0;} to {top:295px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } } @media (max-width: 1080px) { /**/ #section3 .section_inner {display: block;width: 96%;} #section3 .section_inner .popupzone {width: 100%;} #section3 .section_inner .popupzone .slider img {width: 100%;} #section3 .board_wp {width: 100%;margin: 50px 0 0;} /**/ #section4 .section_inner {display: block;} #section4 .m_books {width: 100%;} } @media all and (max-width: 768px) { /**/ #poplayer{position:absolute;z-index:1000;top:120px;left:50%;margin:0 0 0 -150px;width:300px;cursor:move} img{width:auto;max-width:100%;height:auto !important;} #OpenLayer {position: absolute;top: 150px;left: 10px;width: 70%;z-index: 9999;background: #fff;padding: 5px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 12px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} #OpenLayer img {width: 100%;} html.fp-enabled, .fp-enabled body {overflow: visible;} /* gnbWrap */ #gnbWrap {display:none;} /* header */ #header {position:absolute; top:0; left:0; z-index:30002; width:100%; height:auto !important; border-bottom:1px #e6e6e6 solid;} #header.sel {height: 510px;box-sizing: border-box;background:#fff;} #header.header_active {background-color:#fff; border-bottom:1px #d9dfe9 solid;} #header.bg_white {background-color: #fff;border-bottom: 1px solid #d9d9d9;} #header .header {position:relative; height:60px; padding:0; margin:0 auto; display: flex; justify-content: center; align-items: center;} #header .header::after {content: '';display: block;clear: both;} #header #gnb {display: none;} #header .etc_btn {display: none;} #header h1 {display:inline-block;} #header h1 a {display:flex; align-items:center; font-size:18px; font-weight:700;} #header h1 a img {width:110px; margin-right:5px; vertical-align:middle;} #header h1 a span {position: relative;line-height: normal;padding-left: 40px;} #header h1 a span:before {content: '';position: absolute;left: 0;top: 50%;width: 34px;height: 22px;background-image: url('../img/logo_symbol.png');background-size: contain;background-repeat: no-repeat;transform: translateY(-50%);} /*#header.header_active h1 a, #header.bg_white h1 a {background-image: url(../img/logo_on.png);}*/ /*#header button.btn-menu {position:absolute;top: 0;right: 0;z-index: 10;width: 20%;min-width: 60px;height: 60px;padding: 0 !important;background: url(../img/ico_menu.png) no-repeat;background-position: calc(100% - 15px) 50%;}*/ #header button.btn-menu {position:absolute;top: 0;left: 0;z-index: 10;width: 60px;height: 60px;padding: 0 !important;} #header button.btn-menu:before {content:''; position:absolute; top:calc(50% - 8px); left:50%; transform:translateX(-50%); display:inline-block; width:100%; max-width:24px; height:3px; background:#333; transition-duration:0.3s;} #header button.btn-menu:after {content:''; position:absolute; bottom:calc(50% - 8px); left:50%; transform:translateX(-50%); display:inline-block; width:100%; max-width:24px; height:3px; background:#333; transition-duration:0.3s;} #header button.btn-menu i{display: none !important;font-size:24px !important;color: #000;} #header button.btn-page{height:40px;width:40px;text-align:center;top:36px;right:10px;display:block;line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page2{height:40px;width:48px;text-align:center;top:36px;right:55px;display:block; line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page i{display:block !important;padding:5px 0 0 0;height:20px;font-size:18px !important; } /**/ #mainCon {width: 100%;} .section_inner {position:relative; width:96%; max-width:var(--maxWidthPC); margin:0 auto; padding:50px 0;} .section_inner .more_btn {position:absolute; right:0; top:0; display:inline-block; font-size:16px; font-weight:500; color:#333; font-size:0;} .section_inner .more_btn:after {content:''; display:inline-block; vertical-align:middle; width:40px; height:40px; border-radius:50%; background:#363637 url(../img/btn_more.png) 50% no-repeat;} .section h3 {font-size: 28px;font-weight: 700;color: #000;} .section h3.white {color: #fff;} .section h4 {font-size: 26px;font-weight: 500;color: var(--mainColor);} .section .sub_title {font-size: 17px;font-weight: 500;color: #757575;} /**/ .section .kind.lib1 {background-color: var(--mainColor);color: var(--colorWhite);} .section .kind.lib2 {background-color: var(--libColor2);color: var(--colorWhite);} .section .kind.lib3 {background-color: var(--libColor3);color: var(--colorWhite);} .section .lib1 {color: var(--mainColor);} .section .lib2 {color: var(--libColor2);} .section .lib3 {color: var(--libColor3);} .section .btn_wrap {margin-top: 80px;text-align: center;} .section .btn_wrap > a {display: inline-block;width: 216px;height: 62px;border: 1px solid #333;font-size: 18px;font-weight: 400;color: #333;line-height: 62px;} /**/ .section .controls {} .section .controls .slick-arrow {overflow: hidden;width: 40px;height: 40px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: top;} .section .controls .slick-prev {background-image: url(../img/ico_arrow_prev.svg);} .section .controls .slick-next {background-image: url(../img/ico_arrow_next.svg);} .section .controls.white .slick-arrow {} .section .controls.white .slick-prev {background-image: url(../img/ico_arrow_w_prev.svg);} .section .controls.white .slick-next {background-image: url(../img/ico_arrow_w_next.svg);} .section .controls .slider_dots {display: inline-block;vertical-align: middle;} .section .controls .slider_dots > span {font-size:16px; font-weight:600; color:rgba(0,0,0,0.6);} .section .controls.white .slider_dots > span {color:rgba(255,255,255,0.6);} .section .controls .slider_dots > span.now {color:#363637;} .section .controls .slider_dots > span.all {position: relative;z-index: 0;padding-left: 12px;margin-left: 12px;} .section .controls .slider_dots > span.all::before {content: '';position: absolute;top: 50%;left: 0;width: 2px;height: 16px;margin-top: -8px;background-color:#363637; transform: skew(-20deg);} .section .controls.white .slider_dots > span.now {color:rgba(255,255,255,1);} .section .controls.white .slider_dots > span.all::before {content: '';position: absolute;top: 50%;left: 0;width: 2px;height: 16px;margin-top: -8px;background-color: rgba(255,255,255,0.3); transform: skew(-20deg);} .section .controls .slider_dots ul li {display: none;} .section .controls .slider_dots ul li.slick-active {display: block;} .section .controls .ctrl button {overflow: hidden;width: 35px;height: 35px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;} .section .controls .ctrl button.stop {background-image: url(../img/ico_m_stop.png);} .section .controls .ctrl button.play {background-image: url(../img/ico_m_play.svg); background-size:30px;} .section .controls.white .ctrl button.stop {background-image: url(../img/ico_m_w_stop.png);} .section .controls.white .ctrl button.play {background-image: url(../img/ico_m_w_play.svg); background-size:30px;} /**/ .section .m_tabs {} .section .m_tabs > ul {display:flex;} .section .m_tabs > ul > li + li {margin-left:35px;} .section .m_tabs > ul > li > a {font-size:28px; font-weight:700; color:#555;} .section .m_tabs > ul > li > .tit {font-size:28px; font-weight:700; color:#555;} .section .m_tabs > ul > li > a.active {color:var(--subColor); text-decoration:underline;} .section .m_tabs_con > div {display: none;} .section .m_tabs_con > div.active {display: block;} .section .m_tabs_con > div a.m_more {position: absolute;top: 0;right: 0;width: 55px;height: 55px;border: 1px solid #c0c0c6;text-indent: -9999px;background-image: url(../img/ico_m_more.gif);background-repeat: no-repeat;background-position: 50% 50%;} /**/ #mainCon {padding-top:60px; background:url(../img/bg_maintop.gif) center 60px no-repeat;} /* 메인 상단 - 검색창 */ #section1 {position:relative; width:100%; max-width:1920px; margin:0 auto;} #section1 .section_inner {padding:40px 0 30px;} #section1 .search_wp {} #section1 .search_area {width:100%; max-width:630px; margin:0 auto;} #section1 .search_area .input_wp {position:relative; width:92%; margin:0 auto;} #section1 .search_area .input_wp input {width:calc(100% - 52px); height:60px; padding:0 20px; font-size:18px; font-weight:500; color:#333; border:5px #b35a9a solid; border-radius:20px; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1); outline:none;} #section1 .search_area .input_wp button {position:absolute; top:0; right:0; width:60px; height:60px; border-radius:20px; background-color:#b65995; background-image:url(../img/ico_m_search.svg);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 29px;text-indent: -9999px;} #section1 .search_area .search_word {display:flex; width:90%; margin:20px auto 0; font-size:16px; color:#757b8e; align-items:center;} #section1 .search_area .search_word .title {font-weight:700;} #section1 .search_area .search_word .word_list {margin-left: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} #section1 .search_area .search_word .word_list > a {display: inline-block;margin-left: 20px;font-weight: 500;} /* 움직이는 라인 */ .wavy {position:absolute; top:44px; right:123px; width:99px; height:13px; overflow:hidden;} .wavy:before {content:''; display:block; width:100%; height:100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 8'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23f5d155' stroke-width='2' class='squiggle' d='M0,6c5,0,5-5,10-5s5,5,10,5s5-5,10-5s5,5,10,5'/%3E%3C/svg%3E"); background-position: 0 100%; background-size: auto 11px; background-repeat: repeat-x;} .wavy2 {position:absolute; top:77px; right:36px; width:99px; height:13px; overflow:hidden;} .wavy2:after {content:''; display:block; width:100%; height:100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 8'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%238fa1fb' stroke-width='2' class='squiggle' d='M0,6c5,0,5-5,10-5s5,5,10,5s5-5,10-5s5,5,10,5'/%3E%3C/svg%3E"); background-position: 0 100%; background-size: auto 11px; background-repeat: repeat-x;} @keyframes shift { from { transform:translateX(0); } to { transform:translateX(-20px); } } /* #section2 - 공지사항/팝업창 */ #section2 {position:relative;} #section2 .section_inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; padding:0 0 40px 0;} #section2 .popupzone {position:relative; width:100%; max-width:950px; margin-bottom:40px; overflow:hidden; border-radius:20px;} #section2 .popupzone .controls {position:absolute; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between;width:auto; padding:7px 15px 7px 15px; background-color:rgba(42,34,81,0.8); border-radius:20px 0 20px 0;} #section2 .popupzone .controls > div {display:flex; align-items:center;} #section2 .popupzone .controls .slider_dots {margin-right:10px; font-size:15px;} #section2 .popupzone .controls .ctrl {display:flex;} #section2 .popupzone .controls .ctrl button {width:20px; height:20px;} #section2 .popupzone .controls .ctrl button.stop {background-size:9px;} #section2 .popupzone .controls .ctrl button.play {background-size:17px;} #section2 .popupzone .controls.white .slider_dots > span.all::before {content: ''; position: absolute; top:50%; left:-5px; width:11px; height:1px; margin-top:0; background-color: rgba(255, 255, 255, 0.3); transform: skew(0);} #section2 .notice_wp {position:relative; width:100%; padding:20px 10px 20px; border-bottom:1px #f1eff9 solid; background-color:#fff; border-radius:20px 20px 0 0;} #section2 .notice_wp .more_btn {top:20px; right:15px;} #section2 .notice_wp h2 {margin-bottom:20px; font-size:26px; font-weight:800;} #section2 .notice_wp ul {} #section2 .notice_wp ul li {position:relative; display:flex; width:100%; margin-bottom:15px;} #section2 .notice_wp ul li a {display:flex; justify-content:space-between; align-items:center; width:100%;} #section2 .notice_wp ul li h3.title {width:calc(100% - 120px); font-size:16px; font-weight:600; color:#1a1a1a; line-height:28px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} #section2 .notice_wp ul li p {display:none;} #section2 .notice_wp ul li .date {display:inline-block; width:45px; font-size:14px; font-weight:500; color:#999; letter-spacing:-0.5px; text-align:right;} #section2 .notice_wp ul li .date em.year {display:none;} #section2 .notice_wp ul li .date .day:before {content:'-';} #section2 .notice_wp ul li span[class^="lib"] {display:inline-block; width:65px; height:29px; padding:4px 5px; margin-right:10px; text-align:center; font-size:15px; font-weight:500; border-radius:15px;} #section2 .notice_wp ul li span.lib0 {color:#333; background-color:#f5f5f5;} #section2 .notice_wp ul li span.lib1 {color:var(--mainColor); background-color:#e5eaf4;} #section2 .notice_wp ul li span.lib2 {color:var(--libColor2); background-color:#f6edf3;} #section2 .notice_wp ul li span.lib3 {color:var(--libColor3); background-color:#f0f8f6;} #section2 .notice_wp ul li:first-child {padding-bottom:15px; margin-bottom:20px; border-bottom:1px #cccac9 dashed;} #section2 .notice_wp ul li:first-child .date {width:auto; margin-top:5px;} #section2 .notice_wp ul li:first-child .date .year {display:inline-block;} #section2 .notice_wp ul li:first-child .date .day {} #section2 .notice_wp ul li:first-child .date .day:before {content:'-';} #section2 .notice_wp ul li:first-child a {background:#fff; box-sizing: border-box; transition: all .2s; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 10px;} #section2 .notice_wp ul li:first-child h3.title {width:calc(100% - 75px); font-size:17px; font-weight:700;} #section2 .notice_wp ul li:first-child p {width:100%; margin-top:10px; font-weight:400; font-size:15px; color:#666; line-height:22px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* section2 - 바로가기 */ #section2 .m_direct {width:100%; margin:30px auto 0; display:flex; justify-content:space-between; align-items: center; flex-grow:1;} #section2 .m_direct .title_wp {display:none;} #section2 .m_direct .title_wp h3 {font-size:34px; font-weight:900; letter-spacing:-2px;} #section2 .m_direct .title_wp h3 strong {color:#3379e7; font-weight:inherit;} #section2 .m_direct .title_wp .sub {font-size:16px; font-weight:500;} #section2 .m_direct .direct_list {display:flex; flex-wrap:wrap; justify-content:center; gap:25px 0; width:100%;} #section2 .m_direct .direct_list a {width:calc(100% / 4); display:block; text-align:center; font-size:15px; font-weight:600;} #section2 .m_direct .direct_list a::before {content:''; display:block; width:80px; height:80px; margin:0 auto 10px; background-color:#f1f0f9; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 40px; border-radius:25px; transition:all 0.3s ease;} #section2 .m_direct .direct_list a.direct1::before {background-image: url(../img/ico_m_direct1.svg);} #section2 .m_direct .direct_list a.direct2::before {background-image: url(../img/ico_m_direct2.svg);} #section2 .m_direct .direct_list a.direct3::before {background-image: url(../img/ico_m_direct3.svg);} #section2 .m_direct .direct_list a.direct4::before {background-image: url(../img/ico_m_direct4.svg);} #section2 .m_direct .direct_list a.direct5::before {background-image: url(../img/ico_m_direct5.svg);} #section2 .m_direct .direct_list a.direct6::before {background-image: url(../img/ico_m_direct6.svg);} #section2 .m_direct .direct_list a.direct7::before {background-image: url(../img/ico_m_direct7.svg);} #section2 .m_direct .direct_list a.direct8::before {background-image: url(../img/ico_m_direct8.svg);} #section2 .m_direct .direct_list a:hover {color:var(--mainColor); text-decoration:underline; text-underline-offset:4px;} #section2 .m_direct .direct_list a:hover::before {background-color:var(--mainColor); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);} /* #section3 */ #section3 {background:#f4f6fa url(../img/bg_section3.gif) 50% 0 no-repeat;} #section3 h2 {margin-bottom:35px; font-size:26px; font-weight:700;} #section3 h2 strong {display:block; font-size:20px; font-weight:700; color:var(--subColor);} #section3 .more_btn {top:78px;} #section3 .culture_wp .culture_list {display:flex; align-items:center;} #section3 .culture_wp .slick-list {width:100%; margin-left:20px; padding:15px 0;} #section3 .culture_wp ul li {position:relative; padding:60px 30px 30px; margin-right:20px; background:#fff url(../img/icon_culture.png) 30px 25px no-repeat; background-size:30px; transition: all ease .3s;} #section3 .culture_wp ul li:hover {box-shadow:2px 2px 15px rgba(0,0,0,.10);} #section3 .culture_wp ul li .state {position:absolute; right:30px; top:20px;} #section3 .culture_wp ul li .state .kind {display:flex; align-items:center; justify-content:center; width:80px; height:34px; font-size:16px; font-weight:600; border-radius:30px;} #section3 .culture_wp ul li .state .kind.wait {background-color: var(--colorGreen);color: #fff;} #section3 .culture_wp ul li .state .kind.ing {background-color: var(--colorBlue);color: #fff;} #section3 .culture_wp ul li .state .kind.add {background-color: var(--colorOrange);color: #fff;} #section3 .culture_wp ul li .state .kind.end {background-color: #666;color: #fff;} #section3 .culture_wp ul li .con {} #section3 .culture_wp ul li .con .title {display:block; font-size:18px; font-weight:600; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #section3 .culture_wp ul li .con dl {display:flex; margin-bottom:5px; font-size:14px; font-weight:500;} #section3 .culture_wp ul li .con strong + dl {margin-top:10px; padding-top:10px; border-top:1px #e1e2e5 solid;} #section3 .culture_wp ul li .con dl dt {color:#333;} #section3 .culture_wp ul li .con dl dd {color:#666; margin-left:3px;} #section3 .culture_wp .slick-arrow {overflow: hidden;width: 40px;height: 40px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: top;} #section3 .culture_wp .slick-prev {background-image: url(../img/ico_arrow_prev.svg);} #section3 .culture_wp .slick-next {background-image: url(../img/ico_arrow_next.svg);} /* #section4 */ #section4 {overflow: hidden;position: relative;z-index: 0;} #section4 .section_inner {} #section4 .m_books {position:relative;} #section4 .m_books .m_tabs {position:relative; display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:25px;} #section4 .m_books .m_tabs ul {} #section4 .m_books .m_tabs ul li {} #section4 .m_books .m_tabs_con {position:relative;} #section4 .m_books .m_tabs_con h3 {display:none;} #section4 .m_books .m_tabs_con .book_list {display:flex; justify-content:space-between;} #section4 .m_books .m_tabs_con .book_list li {padding:0 10px; box-sizing:border-box;} #section4 .m_books .m_tabs_con .book_list li img {} #section4 .m_books .m_tabs_con .book_list li div.info {display:none; color:#000;} #section4 .m_books .m_tabs_con .book_list li div.info p {font-size:18px; font-weight:400; line-height:24px;} #section4 .m_books .m_tabs_con .book_list li span {display:block;} #section4 .m_books .m_tabs_con .book_list li span.title {overflow: hidden; font-size:33px;font-weight: 800;text-overflow: ellipsis;white-space: nowrap;} #section4 .m_books .m_tabs_con .book_list li span.writer {overflow: hidden; margin:20px 0 35px;font-size: 18px;font-weight: 500;text-overflow: ellipsis;white-space: nowrap;} #section4 .slick-track {/*display:flex;*/} #section4 .slick-current a {position:relative; z-index:1;} #section4 .slick-current .info {display:none !important;} #section4 .section_inner .more_btn {top:-65px;} #section4 .controls {display:none; align-items:center; justify-content:flex-end; position:absolute; bottom:0; right:120px;} /* #section5 */ #section5 {overflow: hidden;position: relative;z-index: 0;} #section5 .section_inner {} #section5 .m_books {position:relative;} #section5 .m_books .m_tabs {position:relative; display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:25px;} #section5 .m_books .m_tabs ul {} #section5 .m_books .m_tabs ul li {} #section5 .m_books .m_tabs_con {position:relative;} #section5 .m_books .m_tabs_con h3 {display:none;} #section5 .m_books .m_tabs_con .book_list {display:flex; justify-content:space-between;} #section5 .m_books .m_tabs_con .book_list li {padding:0 10px; box-sizing:border-box;} #section5 .m_books .m_tabs_con .book_list li img {} #section5 .m_books .m_tabs_con .book_list li div.info {display:none; color:#000;} #section5 .m_books .m_tabs_con .book_list li div.info p {font-size:18px; font-weight:400; line-height:24px;} #section5 .m_books .m_tabs_con .book_list li span {display:block;} #section5 .m_books .m_tabs_con .book_list li span.title {overflow: hidden; font-size:33px;font-weight: 800;text-overflow: ellipsis;white-space: nowrap;} #section5 .m_books .m_tabs_con .book_list li span.writer {overflow: hidden; margin:20px 0 35px;font-size: 18px;font-weight: 500;text-overflow: ellipsis;white-space: nowrap;} #section5 .slick-track {/*display:flex;*/} #section5 .slick-current a {position:relative; z-index:1;} #section5 .slick-current .info {display:none !important;} #section5 .section_inner .more_btn {top:-65px;} #section5 .controls {display:none; align-items:center; justify-content:flex-end; position:absolute; bottom:0; right:120px;} /* 이용안내 */ #cs-info .section_inner {margin:40px auto 50px; padding:20px 20px 20px 20px; background:#f4f6fa url(../img/bg_csinfo.png) right bottom no-repeat;} #cs-info .section_inner h2 {margin-bottom:20px; font-size:28px; font-weight:700; line-height:28px;} #cs-info .section_inner h2 br {display:none;} #cs-info .section_inner > div {display:flex; flex-wrap:wrap; font-size:18px; font-weight:700;} #cs-info .section_inner > div dl {display:flex; margin-right:3%;} #cs-info .section_inner > div dl.closed dd {color:#d63434;} #cs-info .section_inner > div dl.open dt {color:#0883bf;} #cs-info .section_inner > div dl + dl {margin-left:0;} #cs-info .section_inner > div dl dt {margin-right:40px;} #cs-info .section_inner > div dl dd {font-size:16px;} #cs-info .section_inner > div dl dd p {margin-bottom:7px;} #cs-info .section_inner > div dl dd strong {font-size:20px; font-family:'g-market-sans'; font-weight:700; vertical-align:middle; margin-left:10px; letter-spacing:0;} #cs-info .section_inner > div dl dd + dd {margin-left:55px;} #cs-info .section_inner > div dl.tel {width:100%; margin-left:0; margin-top:15px; padding-top:15px; border-top:1px #dbdde1 solid;} #cs-info .section_inner > div dl.tel em {font-family:'g-market-sans'; font-weight:700; vertical-align:middle; letter-spacing:0;} /**/ #banner .section_inner {padding: 25px 0 35px;} #banner .banner_wp {display: block;align-items: center;} #banner .banner_wp .banner_title {display: inline-flex;width: 100%;margin: 0 0 15px;align-items: center;} #banner .banner_wp .banner_title h3 {margin: 0 15px 0 0;font-size: 20px;font-weight: 700;} #banner .banner_wp .banner_title .controls button {width: 30px;height: 30px;margin: 3px;border: 1px solid #d3d3e5;border-radius: 50%;background-size: auto 12px;} #banner .banner_wp .banner_title .controls button.stop {background-size: auto 10px;} #banner .banner_wp .slick_wp {width: 100%;} /* Footer */ #foot_section {} #foot_section .section_inner {position:relative; padding:30px 0 80px; border-top:2px #000 solid; font-size:15px; font-weight:500;} #foot_section .footer {} #foot_section .f_top {display:flex; justify-content:center; margin-bottom:30px;} #foot_section .f_top .f_link {display:inline-flex;} #foot_section .f_top .f_link > a {font-size:16px; font-weight:600;} #foot_section .f_top .f_link > a:hover {text-decoration:underline;} #foot_section .f_top .f_link > a + a {margin-left:25px;} #foot_section .f_top #gotop {display:none !important; width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,0.2) url(../img/ico_gotop.svg) 50% 50% no-repeat; text-indent:-9999px; cursor:pointer;} #foot_section .f_info ul li {display:flex;align-items:flex-start;margin-bottom:15px;} #foot_section .f_info ul li strong {width: 145px;margin: 0 10px 10px 0;padding:4px 10px;border:1px #111 solid;border-radius:6px;text-align:center;} #foot_section .f_info ul li .f-tel {display: flex;} #foot_section .f_info ul li div {width:100%;} #foot_section .f_info ul li div .addr {display:block; width:100%;} #foot_section .f_info address {font-style:normal; letter-spacing:-0.5px; margin-top:100px;} #foot_section .f_info address span {margin-right:30px;} #foot_section .f_info cite {display: block; margin-top:10px; font-style:normal; letter-spacing:-0.5px;} #foot_section .link_wp {position:absolute; left:50%; top:70px; transform: translateX(-50%); width:90%; border:1px #000 solid; border-radius:14px;} #foot_section .link_wp button.btn_link {width:100%; padding:15px 20px; text-align:left; font-size:16px; font-weight:600; display:inline-flex; align-items:center; justify-content:space-between;} #foot_section .link_wp button.btn_link:after {content: ''; display:block; width:12px; height:7px; background:url(../img/ico_arrow_top.png) center center no-repeat; transition:transform .4s ease;} #foot_section .link_wp button.btn_link.active:after {transform:rotate(-180deg);} #foot_section .link_wp .link_list {display:none; position:absolute; bottom:53px; left:0; width:100%; padding:10px; background-color:#fff; border:1px #000 solid; border-radius:14px;} #foot_section .link_wp .link_list ul {overflow-x:hidden; overflow-y:auto; max-height:200px;} #foot_section .link_wp .link_list ul::-webkit-scrollbar {width:5px;} #foot_section .link_wp .link_list ul::-webkit-scrollbar-thumb {background-color:#2f3542; border-radius:5px;} #foot_section .link_wp .link_list a {display:block; padding:7px 20px; font-weight:500;} #foot_section .link_wp .link_list a:hover {text-decoration:underline;} /* 서브비주얼 */ #contain #subVisual {width:100%; padding-top:60px; z-index:0; border-radius:0 0 50px 50px; overflow:hidden;} #contain #subVisual .sub_visual .visual_wp {position: relative; width:100%; height:140px; background:#fbf6f3 url(../img/bg_subvisual.jpg) center bottom no-repeat; border-top:1px #eee solid;} #contain #subVisual .sub_visual .visual_wp::before {} #contain #subVisual .sub_visual .visual {max-width: 1460px;margin: 0 auto;height: 100%;} #contain #subVisual .sub_visual .visual .visual_top {display:table; width:100%; height:100%; text-align:center;} #contain #subVisual .sub_visual .visual .visual_top > div {display:table-cell; vertical-align:middle;} #contain #subVisual .sub_visual .visual .visual_top h2 {font-size:30px; font-weight:700; color:#333; letter-spacing:0;} #contain #subVisual .sub_visual .visual_wp .visual .locator {margin-top: 5px;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li {display:inline-block; vertical-align:middle;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li.home {width:18px; height:21px; font-size: 0 !important; background: url(../img/icon_homeline.svg) 0 0 no-repeat;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li.home a {display:block; width:100%; height:100%; font-size:0;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li a, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button {display:block; font-size:15px; font-weight:500; color:#737a8c; background-color:transparent; letter-spacing:0;} #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li button::before, #contain #subVisual .sub_visual .visual_wp .visual .locator > ul > li span::before {content: ''; display:inline-block; width:6px; height:8px; margin:0 7px; vertical-align:2px; background:url(../img/path_arrow.svg) 0 0 no-repeat;} #contain #subVisual .sub_visual .visual_wp .visual .locator .navi {display: none;} /*#contain #subVisual .sub_visual::after {content: '';position: absolute;top: 88px;right: -14%;width: 923px;height: 526px;background-image: url(../img/bg_sub_contents.png);background-repeat: no-repeat;background-position: 50% 50%;}*/ #contain #subTitle {padding: 30px 0;background-image: url(../img/bg_sub_title.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;text-align: center;} #contain #subTitle h3 {margin-bottom: 5px;font-size: 27px;font-weight: 700;color: #fff;} #contain #subTitle .locator > ul > li {display: inline-block;vertical-align: middle;} #contain #subTitle .locator > ul > li a, #contain #subTitle .locator > ul > li span, #contain #subTitle .locator > ul > li button {display: block;font-size: 14px;font-weight: 400;color: #fff;font-family: inherit;background-color: transparent;} #contain #subTitle .locator > ul > li button::before, #contain #subTitle .locator > ul > li span::before {content: '>';display: inline-block;width: 20px;vertical-align: top;text-align: center;font-size: inherit;font-family: inherit;} #contain #subTitle .locator .navi {display: none;} /*각 컨텐츠 이용안내*/ #design .guide_box{margin: 20px 0;padding: 15px 10px;border:1px solid #ccc;border-radius:10px;} #design .guide_box h3{color:#551ca9;font-size: 17px;} #design .guide_box > ul > li {position: relative;padding-left: 20px;font-size: 15px;font-weight: 400;color: #333;} #design .guide_box > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li::before {content: '';position: absolute;top: 8px;left: 0;width: 6px;height: 6px;background-color: var(--subColor1);border-radius: 50%;} #design .guide_box > ul > li > ul {margin-top:3px;} #design .guide_box > ul > li > ul > li {position: relative;padding-left: 20px;font-size: 14px;font-weight: 400;color: #333;} #design .guide_box > ul > li > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li > ul > li::before {content: '';position: absolute;top: 11px;left: 0;width: 10px;height: 1px;background-color: #aaa;} /* #design */ #design {position:relative; width:94%; margin:40px auto 60px; font-size:15px;} #aside {display: none;} /**/ #blind{position:absolute;z-index:39999;top:0px;left:0px; bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft{display:none;position:fixed;z-index:100 !important;left:0px;top:0px;width: 100%;max-width: 320px;height: 100%;background:#1e2c5d;padding-bottom: 105px;} #dkleft .lefttit{text-align:left;width: 100%;box-sizing: border-box;background:#1e2c5d;} #dkleft .lefttit img{height: 25px;} #dkleft .select {height: 100%;overflow-y: auto;} #dkleft .lefttit button {display:block;position:relative;padding: 20px 15px;font-size: 16px;color:#fff;border:0;background:transparent;font-family: 'Montserrat';font-weight: 500;} #dkleft .lefttit button i {display: inline-block;padding: 0 7px 0 0;font-size: 15px;color:#fff;vertical-align: middle;} #dkleft .lefttit > div {background-color: #eee;padding: 0 15px;} #dkleft .lefttit .join{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .join i{padding:0 7px 0 0;font-size:24px;color:#1e2c5d} #dkleft .lefttit .idpw{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .sel_btn {display:inline-block;position:relative;padding:0 8px;height:36px;line-height:36px;margin:5px 0;font-size:14px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .mobile_member {display: block;padding-bottom: 5px;border-top: 1px solid rgba(255,255,255,0.3);} #dkleft .lefttit .mobile_member > a {display: block;padding: 10px 0 10px 35px;color: #fff;font-size: 15px;box-sizing: border-box;background: url(../img/member_icon.png) no-repeat 0 50%;} #dkleft .select .modify{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .modify span {display:inline-block;padding:0 16px;height:36px;line-height:36px;background:#2e4287;color:#fff;border-radius:5px;} #dkleft .select .modify i{display:inline-block;position:relative;top:1px;padding:0 7px 0 0;font-size:24px;color:#fff} #dkleft .depth1 {overflow: hidden;display:block;width: 100%;position:relative;padding: 0 15px;line-height:50px;font-size:16px;color:#fff;text-align:left;border-bottom: 1px solid rgba(255, 255, 255, .1);transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 strong{position:relative;top:-2px;padding:0 4px;height:14px;line-height:14px;font-size:10px;background:#ff0000;border-radius:30px} #dkleft .depth1 span{font-style:normal;color:#ffa800} #dkleft .depth1 em{position:absolute;z-index:2;top:0;right:4px;width:39px;height:39px;background:url(/web/seomun/img/common/plus.png) no-repeat 50% 50%;background-size:11px 11px} #dkleft .depth1.sel{background: #2e4287;color:#fff;border-bottom:1px solid #596170} #dkleft .depth1 i {display:block;width: 20px;height: 20px;margin: 15px 0 0 0;background-image: url(../img/ico_dkleft_arrow.png);background-size: auto 7px;text-indent: -9999px;background-repeat: no-repeat;background-position: 50% 50%;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 i.rightico {float:right} #dkleft .depth1.sel i.rightico {color:#fff;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s} #dkleft .depth2{display:none;background:#fff} #dkleft .depth2 a{display:block;padding:0 20px;line-height:40px;font-size:14px;color:#555;border-bottom:1px solid #ddd;text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #dkleft .depth2 .depth3 {background-color: #f4f4f4;} #dkleft .depth2 .depth3 > li > a {display: block;font-size: 13px;padding: 7px 20px;color: #555;border-bottom: 0;line-height: 1.2em;} #dkleft .depth2 .depth3 > li:first-child > a {padding-top: 15px;} #dkleft .depth2 .depth3 > li:last-child > a {padding-bottom: 15px;border-bottom: 1px solid #ddd;} /*#closeleft{position: absolute;z-index: 9999999;left: -45px;top: 15px;width: 35px;height: 35px;display: block;text-align: center;font-size: 30px;font-family: Linearicons-Free;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;text-indent: -9999px;line-height: 1;color: #fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*/ #closeleft{position: absolute;z-index: 9999999;right: 5px;top: 15px;width: 35px;height: 35px;display: block;text-align: center;font-size: 30px;font-family: Linearicons-Free;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;color: #fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870";font-size:30px;line-height:1;} #mCard {position: fixed;bottom: 0;left: 0;z-index: 9999;width: 100%;} #mCard2 {position: fixed;bottom: 0;left: 0;z-index: 9999;width: 100%;padding-left: 5%;} #mCard > a {display: block;height: 55px;padding: 0 5px;font-size: 15px;line-height: 55px;border-top: 1px solid rgba(255,255,255,0.4);} #mCard2 > a {overflow: hidden;display: block;height: 60px;font-size: 18px;font-weight: 500;line-height: 60px;border-radius: 20px 0 0 0;background-color: #058849;color: #fff;border-radius: 20px 0 0 0;background-repeat: no-repeat;background-position: calc(100% - 70px) 50%;background-size: auto 15px;} #mCard > a > span {vertical-align: middle;} #mCard > a::before {content: '';display: inline-block;width: 50px;height: 55px;background-image: url(../img/ico_m_card.png);background-repeat: no-repeat;background-position: 50%;vertical-align: middle;background-size: auto 30px;} #mCard2 > a span.ico {overflow: hidden;position: relative;z-index: 0;display: inline-block;width: 76px;height: 60px;margin-right: 15px;vertical-align: top;} #mCard2 > a span.ico::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url(../img/ico_mobile_card_blue.png);background-repeat: no-repeat;background-position: 40% 50%;background-size: auto 52px;} #mCard2 > a span.ico::after {content: '';position: absolute;top: 50%;right: 0;z-index: -1;width: 100px;height: 100px;margin-top: -50px;border-radius: 50%;background-color: #047a42;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:0px; opacity:0;} to {top:34px; opacity:1;} } @keyframes mv02 { from {top:180px;opacity:0;} to {top:240px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } } @media (max-width: 640px) { /**/ #section3 .board_wp .culture_wp ul {padding: 18px 0;} #section3 .board_wp .culture_wp ul li {display: block;} #section3 .board_wp .culture_wp ul li + li {margin-top: 12px;} #section3 .board_wp .culture_wp ul li .state {width: auto;margin: 0 0 5px;} #section3 .board_wp .culture_wp ul li .state .kind {display: inline-block;padding: 5px 12px;text-align: center;font-size: 13px;font-weight: 500;} #section3 .board_wp .culture_wp ul li .con {width: 100%;} #section3 .board_wp .culture_wp ul li .con > a {overflow: hidden;display: block;font-size: 16px;color: #000;text-overflow: ellipsis;white-space: nowrap;} #section3 .board_wp .culture_wp ul li .con > span {display: block;font-size: 14px;color: #888;} /* 이용안내 */ #cs-info .section_inner {margin:10px auto 50px; padding:20px 20px 20px 20px; background:#f4f6fa url(../img/bg_csinfo.png) right bottom no-repeat; background-size:30%;} #cs-info .section_inner h2 {margin-bottom:20px; font-size:28px; font-weight:700; line-height:28px;} #cs-info .section_inner h2 br {display:none;} #cs-info .section_inner > div {display:flex; flex-wrap:wrap; font-size:18px; font-weight:700;} #cs-info .section_inner > div dl {display:flex; flex-wrap:wrap; width:100%; margin-right:0 !important; margin-top:10px;} #cs-info .section_inner > div dl.closed dd {color:#d63434;} #cs-info .section_inner > div dl.open dt {color:#0883bf;} #cs-info .section_inner > div dl.open dd + dd {margin-top:10px;} #cs-info .section_inner > div dl + dl {margin-left:0;} #cs-info .section_inner > div dl dt {width:80px; margin-right:0;} #cs-info .section_inner > div dl dd {width:calc(100% - 110px); font-size:16px;} #cs-info .section_inner > div dl dd p {margin-bottom:5px;} #cs-info .section_inner > div dl dd strong {font-size:20px; font-family:'g-market-sans'; font-weight:700; vertical-align:middle; margin-left:10px; letter-spacing:0;} #cs-info .section_inner > div dl dd + dd {margin-left:80px;} #cs-info .section_inner > div dl.tel {width:100%; margin-left:0; margin-top:15px; padding-top:15px; border-top:1px #dbdde1 solid;} #cs-info .section_inner > div dl.tel em {font-family:'g-market-sans'; font-weight:700; vertical-align:middle; letter-spacing:0;} /*찾아오시는길 - 다중마커*/ #design .location .lib_map > li {display: block;margin: 10px 0;width: 100%;vertical-align: top;} } @media (max-width: 360px) { }