/*@media all and (min-width: 321px) and (max-width: 768px) {*/ .dk_view h2 {background:none !important;} #program .lib_ma{ display:block; width:44px; height:20px; line-height:20px; font-size:11px !important; font-weight:bold; background:#fff; margin:0 auto; color:#5087c7 !important; border:1px solid #5087c7 !important; border-radius:3px;} #program .lib_mb{ display:block; width:44px; height:20px; line-height:20px; font-size:11px !important; font-weight:bold; background:#fff; margin:0 auto; color:#ef5998 !important; border:1px solid #ef5998 !important; border-radius:3px;} #program .lib_tol{ display:block; width:44px; height:20px; line-height:20px; font-size:11px !important; font-weight:bold; background:#fff; margin:0 auto; color:#333 !important; border:1px solid #333 !important; border-radius:3px;} #program .lib_za{ display:block; width:44px; height:20px; line-height:20px; font-size:11px !important; font-weight:bold; background:#fff; margin:0 auto; color:#5ea71c !important; border:1px solid #5ea71c !important; border-radius:3px;} #wait{text-align:center} #wait img {max-width: 100%;} #header , #header.sel , #container .search *, #container .direct *, #container .calendar *, #container .culture *, #design .sub_head h1, #design .sub_head h2, #design .sub_head .locator, #design .sub_head i, #design .tabmenu, #design .depthmenu, #aside * {/*transition: all 0.4s cubic-bezier(0.785, 0.135, 0.150, 0.860);*/} /**/ #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} #popupbar {display: none;} /* 완료 페이지 스타일 */ .pg-complete-section {min-height: 60vh;padding: 40px 20px;display: flex;align-items: center;justify-content: center;} .pg-complete-container {background: #fff;border-radius: 16px;padding: 50px 40px;max-width: 600px;width: 100%;box-shadow: 0 4px 20px rgba(0,0,0,0.1);text-align: center;} .pg-complete-icon {margin-bottom: 30px;} .pg-icon-check {display: inline-flex;align-items: center;justify-content: center;width: 100px;height: 100px;background: #28a745;color: #fff;border-radius: 50%;font-size: 60px;font-weight: 700;box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);} .pg-complete-header {margin-bottom: 40px;} .pg-complete-title {font-size: 28px;font-weight: 700;color: #333;margin-bottom: 10px;} .pg-complete-subtitle {font-size: 16px;color: #666;} .pg-complete-info {background: #f8f9fa;border-radius: 12px;padding: 30px;margin-bottom: 30px;text-align: left;} .pg-info-item {display: flex;justify-content: space-between;align-items: flex-start;padding: 15px 0;border-bottom: 1px solid #e9ecef;} .pg-info-item:last-child {border-bottom: none;} .pg-info-label {font-size: 15px;font-weight: 600;color: #666;min-width: 100px;flex-shrink: 0;} .pg-info-value {font-size: 15px;color: #333;text-align: right;flex: 1;word-break: break-word;} .pg-complete-notice {background: #e7f3ff;border-left: 4px solid #4079e6;border-radius: 8px;padding: 20px;margin-bottom: 30px;text-align: left;} .pg-notice-text {font-size: 14px;color: #333;line-height: 1.8;margin: 0;} .pg-complete-buttons {display: flex;gap: 15px;justify-content: center;flex-wrap: wrap;} .pg-btn-complete-primary {display: inline-flex;align-items: center;gap: 8px;padding: 16px 40px;background: #4079e6;color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;text-decoration: none;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 2px 8px rgba(64, 121, 230, 0.2);} .pg-btn-complete-primary:hover {background: #2d5aa0;color: #fff;text-decoration: none;box-shadow: 0 4px 12px rgba(64, 121, 230, 0.3);transform: translateY(-2px);} .pg-btn-complete-secondary {display: inline-flex;align-items: center;justify-content: center;padding: 16px 40px;background: #fff;color: #333;border: 1px solid #dee2e6;border-radius: 8px;font-size: 16px;font-weight: 600;text-decoration: none;cursor: pointer;transition: all 0.3s ease;} .pg-btn-complete-secondary:hover {background: #f8f9fa;border-color: #adb5bd;color: #333;text-decoration: none;} .pg-btn-icon {font-size: 18px;} @media screen and (max-width: 768px) { /* 완료 페이지 스타일 */ .pg-complete-section {padding: 20px 15px;} .pg-complete-container {padding: 30px 20px;} .pg-icon-check {width: 80px;height: 80px;font-size: 50px;} .pg-complete-title {font-size: 24px;} .pg-complete-subtitle {font-size: 14px;} .pg-complete-info {padding: 20px;} .pg-info-item {flex-direction: column;align-items: flex-start;gap: 8px;} .pg-info-label {min-width: auto;} .pg-info-value {text-align: left;} .pg-complete-buttons {flex-direction: column;} .pg-btn-complete-primary,.pg-btn-complete-secondary {justify-content: center;} } @media (max-width: 632px) {#program .login_wrap, .banner_wrap {width:100%;padding: 0px;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%;max-width: 300px;height: 36px;font-size: 16px;font-weight: 400;line-height: 22px;letter-spacing: -.2px;color: #1e1e23;z-index: 5;outline: 0;border: none;border-radius: 5px;margin-top: 5px;} #program .login_wrap .login_box input.input_id {position: relative;bottom: 0px;display: block;width: 100%;max-width: 300px;height: 36px;font-size: 16px;font-weight: 400;line-height: 22px;letter-spacing: -.2px;color: #1e1e23;z-index: 5;outline: 0;border: none;border-radius: 5px;margin-top: 5px;} .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: 35px;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: 80px;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: 80px;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;top: 10px;left: 7px;bottom: 30px;font-size: 14px;color: #333;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} .country_form {position: relative} .country_list_cover {position: absolute;padding-bottom: 10px;background-color: transparent} @media all and (max-width: 320px) {.country_list_cover {left:0!important}} .country_list_area {overscroll-behavior: contain;position: relative;display: block;width: 280px;min-height: 200px;border-radius: 4px;background-color: #fff;border: 1px solid #a5adb8;border-radius: 6px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.08);box-sizing: border-box;z-index: 100} @media all and (max-width: 320px) {.country_list_area {left:0}} @media all and (max-width: 280px) {.country_list_area {width:240px}} @media all and (min-width: 768px) {.country_list_area {width:360px}} .country_list_area::-webkit-scrollbar {display: none} .country_list .country_item {display: flex;overflow: hidden;padding: 13px 16px 15px 11px;align-items: center;justify-content: flex-start;box-sizing: border-box;cursor: pointer} .country_list .country_item:hover {background-color: #e1e3e5} .country_list .country_item.check_bg {background-color: #f5f6f7} .country_list .country_item.check_bg:hover {background-color: #e1e3e5} .country_list .country_item .text {font-size: 15px;font-weight: 400;line-height: 21px;letter-spacing: -.4px;color: #303038} .country_list .country_name {position: relative;flex: 1;padding-left: 28px;align-self: center} .country_list .country_name .text {word-break: keep-all} .country_list .country_number {flex: none;padding-left: 6px} .country_list .icon_country_check {position: absolute;top: 0;left: 0;background-position: -176px -292px;background-repeat: no-repeat;width: 20px;height: 20px} #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;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;} /* 진행중 강좌 없음 메시지 */ #section3 .culture_content ul li.no-lecture-message {background:#fff; border-radius:30px; box-shadow:0px 0 10px rgba(0, 0, 0, 0.1); margin:0 23px;} #section3 .culture_content ul li.no-lecture-message .no-lecture-content {display:flex; align-items:center; justify-content:center; padding:80px 30px; min-height:200px;} #section3 .culture_content ul li.no-lecture-message .no-lecture-content p {font-size:18px; font-weight:500; color:#999; text-align:center; margin:0;} /*1140*/ @media all and (min-width: 1441px) { #divpop { display:none;} #mm-blocker{display:none} #popupWindow{position:absolute} #wrap {position:relative;top:0px;width:100%;height:100%} #wrap .tmovie{position:fixed !important;position:absolute;z-index:15;bottom:0px;right:0px;display:block;width:86px;height:43px;background:#999 url(../img/ddea/btn_tmovie.png) no-repeat 50% 50%;text-indent:-9999em;overflow:hidden} /* Header */ #header{width:100%; height:100px; background:#fff; border-bottom:1px #e5e5e5 solid; /*transition: all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860);*/} #header.sel {height:290px; border-bottom:0; transition: all 0.4s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #header .header {position:relative; width:94%; max-width:1680px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; z-index:30002;} #header .header h1 {position:absolute; top:22px; left:0;} #header .header h1 a {display:block; width:212px;} #header .header button {display:none;} #header ul.right_info {position:absolute; top:25px; right:0; display:flex; align-items:center;} #header ul.right_info li {position:relative;} #header ul.right_info li:first-child {padding-right:20px;} #header ul.right_info li a {display:block; height:30px; line-height:30px; font-size:16px; font-weight:500; text-align:center; color:#666; letter-spacing:-0.5px;} #header ul.right_info li.btn_sitemap {margin-left:20px;} #header ul.right_info li.btn_sitemap a {position:relative; width:46px; height:46px; border-radius:50px; display:flex; justify-content:center; align-items:center;} #header ul li .line_box {width:22px; height:19px;} #header ul li .line_box span {float:right; display:block; margin:0 auto 5px; width:100%; height:3px; background:#000; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;} #header ul li .line_box span:nth-child(3) {position:relative; width:15px; float:left;} #header ul li .line_box span:nth-child(3):after {content:''; position:absolute; right:-7px; bottom:0; display:inline-block; width:3px; height:3px; background-color:var(--mainColor);} /**/ #gnb {font-family:var(--fontPointSet); width:100%; margin:0 auto;} #gnb .depth1 {display:flex; height:100px; gap:0 3%; justify-content:center;} #gnb .depth1 > li {position:relative; text-align:center;} #gnb .depth1 > li > a {display:block; position:relative; height:100px; line-height:100px; font-size:22px; font-weight:700; color:#222;} #gnb .depth1 > li > a:hover {color:var(--mainColor);} #gnb .depth1 > li > a em {display:none; transform:translateX(-5px);} #gnb .depth1 > li:hover > a em {position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); display:block; width:14px; height:14px; border-radius:14px; background:var(--mainColor); transition: all 0.3s; z-index:3;} #gnb .depth1 > li.sel > a {color:var(--mainColor);} #gnb .depth1:hover .depth2 {display:block;} #gnb .depth2 {display:none; position:absolute; top:100px; left:50%; transform:translateX(-50%); width:160px; padding:20px 10px; margin:0 auto; border-radius:20px; box-shadow:5px 5px 10px 0 rgba(0, 0, 0, 0.1); background-color:#fff; visibility: hidden;} #header.sel #gnb .depth2 {display:block;} #gnb .depth2 li a {position:relative; display:block; padding:10px 0; line-height:18px; font-family:var(--fontMainSet); font-size:17px; font-weight:500; text-align:center; color:#333; word-break:keep-all; z-index:2;} #gnb .depth2 li a:hover {color:var(--mainColor);} #gnb .depth2 li.sel a {color:var(--mainColor);} #gnb .depth2 li:last-child a {border-bottom:0;} #gnb.sel {height:400px;} #gnb.sel depth1 {height:300px !important} #gnb .mobile{display:none} #allbg{position:fixed;z-index:30000;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);display:none} /**/ #menu{position:absolute !important;z-index:10;top:0px;right:0;float:none} #menu a{display:block;margin:0 !important;padding:0 !important;height:42px;background:url(../img/menu.png) no-repeat right center;text-indent:-9999em;overflow:hidden} #gnb .depth1 > #menu:hover > a:before { display:none;} #menu a.sel{background:url(../img/menu.png) no-repeat 100% 50%} /* section1 */ #section1 {width:100%; padding:70px 0 100px; background:url(../img/bg_visual.jpg) center bottom no-repeat;} #section1 .section_inner {width:94%; max-width:1680px; margin:0 auto; display:flex;flex-wrap:wrap; justify-content:space-between; align-items:center;} #section1 .mpopup {position:relative; width:60%; max-width:960px;} #section1 .mpopup h2 {color:#ec501f;} #section1 .zone_wp .slider {max-width:820px; margin:0 auto; border-radius:20px; overflow:hidden;} #section1 .zone_wp .slider li {border-radius:5px;} #section1 .zone_wp .slider li a {display:block;width:100%; height:100%; max-height:500px; border-radius:20px; overflow:hidden;} #section1 .zone_wp .slider li img {width:100%; height:auto; max-height:500px;} #section1 .zone_wp .slick-dots {display:flex; justify-content:flex-end; padding-right:30px; margin-top:10px; cursor:pointer;} #section1 .zone_wp .slick-dots li {margin-left:5px; width:15px; height:15px; border:2px solid #3a718e; border-radius:50px; background:transparent; text-indent:-9999px} #section1 .zone_wp .slick-dots li.slick-active {background:#3a718e;} #section1 .zone_wp .slick-slide {margin:0 10px;} #section1 .zone_wp .slick-list {margin:0 -10px;} #section1 .zone_wp .controls {position:absolute; bottom:-25px; left:105px; display:flex; align-items:center; padding:17px 24px; color:#fefefe; line-height:0; border-radius:30px; background-color:#51555d;} #section1 .zone_wp .controls h3 {font-size:14px; font-weight:800;} #section1 .zone_wp .controls .slider_dots {display:flex; align-items:center; margin:0 20px; font-size:15px; font-family:var(--fontSubSet); font-weight:700;} #section1 .zone_wp .controls .slider_dots strong {color:#f8c327; font-weight:700;} #section1 .zone_wp .controls .slider_dots em {margin:0 7px;} #section1 .zone_wp .ctrl_arrow .slick-arrow {position:absolute; top:calc(50% - 26px); width:54px; height:54px; border:0; font-size:0; cursor:pointer; border-radius:50%; background-color:#fff; box-shadow:18px 28px 50px 0px rgba(43, 63, 122, 0.1); transition: background-color 250ms ease-in-out;} #section1 .zone_wp .ctrl_arrow .slick-arrow:hover {background-color:#4d4d4d;} #section1 .zone_wp .ctrl_arrow .slick-prev {left:0;} #section1 .zone_wp .ctrl_arrow .slick-next {right:0;} #section1 .zone_wp .ctrl_arrow button:before {content:''; display:block; width:100%; height:100%; background-size:70% !important;} #section1 .zone_wp .ctrl_arrow .slick-prev:before {background:url(../img/ico_arrow_prev.svg) center no-repeat;} #section1 .zone_wp .ctrl_arrow .slick-next:before {background:url(../img/ico_arrow_next.svg) center no-repeat;} #section1 .zone_wp .ctrl_arrow .slick-prev:hover:before {background:url(../img/ico_arrow_w_prev.svg) center no-repeat;} #section1 .zone_wp .ctrl_arrow .slick-next:hover:before {background:url(../img/ico_arrow_w_next.svg) center no-repeat;} #section1 .zone_wp .controls button.slider_btn {display:inline-block; width:20px; height:20px; padding:0; vertical-align:middle; cursor:pointer; background-color:#3c414b; border-radius:20px; font-size:0; text-indent:-9999px;} #section1 .zone_wp .controls button.slider_btn:before {content:''; display:block; width:100%; height:100%;} #section1 .zone_wp .controls button.slider_btn.stop:before {background:url(../img/ico_m_w_stop.png) center no-repeat; background-size:7px;} #section1 .zone_wp .controls button.slider_btn.play:before {background:url(../img/ico_m_w_play.svg) center no-repeat; background-size:15px;} #section1 .right_group {width:36%; max-width:578px; margin-right:4%; text-align:center;} .yuga_link {display:flex; flex-wrap:wrap; gap:5px; width:80%; margin:43px auto;} .yuga_link li {width:calc(50% - 2.5px); border-radius:10px;} .yuga_link li a {position:relative; display:flex; align-items:center; padding:15px 20px; font-size:20px; font-weight:600; color:#fff; text-align:left;} .yuga_link li a:before {content:''; display:inline-block; width:21px; height:21px; margin-right:10px; transition: transform 250ms ease-in-out;} .yuga_link li a:hover:before {transform: translateX(4px);} .yuga_link li a:after {content:''; position:absolute; top:calc(50% - 10px); right:20px; display:inline-block; width:21px; height:21px; background:url(../img/icon_yuga.png) 0 0 no-repeat;} .yuga_link li:nth-child(1) {background-color:#f8c327;} .yuga_link li:nth-child(1) a:before {background:url(../img/yuga_link1.svg) 0 0 no-repeat;} .yuga_link li:nth-child(2) {background-color:#579bfe;} .yuga_link li:nth-child(2) a:before {background:url(../img/yuga_link2.svg) 0 0 no-repeat;} .yuga_link li:nth-child(3) {background-color:#37ac7c;} .yuga_link li:nth-child(3) a:before {background:url(../img/yuga_link3.svg) 0 0 no-repeat;} .yuga_link li:nth-child(4) {background-color:#9577d9;} .yuga_link li:nth-child(4) a:before {background:url(../img/yuga_link4.svg) 0 0 no-repeat;} #section1 .search_area fieldset label {display:none;} #section1 .search_area {width:100%; max-width:630px; margin:0 auto;} #section1 .search_area .input_wp {position:relative; text-align:left;} #section1 .search_area .input_wp input {width:calc(100% - 30px); height:80px; padding:0 40px; font-size:22px; font-weight:500; color:#333; border:5px #f79220 solid; border-radius:30px; 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:40px 40px 15px 40px; background-color:#f5942e; background-image:url(../img/ico_m_search.svg);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 29px;text-indent: -9999px;} #section1 .direct {width:58%; max-width:880px; margin-top:60px; z-index:1;} #section1 .direct h2 {position:relative; margin-bottom:35px; color:#51555d; font-size:36px; font-weight:800;} #section1 .direct h2:after {content:''; position:absolute; top:34px; right:0; width:60%; height:1px; background-color:#51555d;} #section1 .direct h2 strong {color:var(--mainColor);} #section1 .direct h2 strong:after {content:''; display:inline-block; width:19px; height:20px; margin-left:8px; background:url(../img/icon_heart.svg) 0 0 no-repeat;} #section1 .direct ul {display:flex; justify-content:space-between; gap:0 30px;} #section1 .direct li {width:calc(100% / 5);} #section1 .direct li a {display:flex; flex-wrap:wrap; justify-content:center; position:relative; padding:20px 0; transition:all 0.3s; background-color:#fff; border-radius:30px; box-shadow:2px 0 10px rgba(0, 0, 0, 0.1);} #section1 .direct li strong {display:block; width:100%; height:70px; transition:all 0.3s} #section1 .direct li span{display:block; margin-top:10px; text-align:center; font-size:19px; font-weight:600; color:#000; transition:all 0.3s; letter-spacing:-1px} #section1 .direct li.bn1 a strong{background:url(../img/icon_direct1.svg) no-repeat center center;} #section1 .direct li.bn2 a strong{background:url(../img/icon_direct2.svg) no-repeat center center;} #section1 .direct li.bn3 a strong{background:url(../img/icon_direct3.svg) no-repeat center center; background-size:auto 53px;} #section1 .direct li.bn4 a strong{background:url(../img/icon_direct4.svg) no-repeat center center; background-size:auto 65px;} #section1 .direct li.bn5 a strong{background:url(../img/icon_direct5.svg) no-repeat center center;} #section1 .direct li a:hover{transition:all 0.3s} #section1 .direct li a:hover strong { -webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);} #section1 .direct li a:hover span {} #section1 .center_info {width:40%; max-width:750px; padding:40px; margin-top:50px; background-color:#fff; border-radius:30px; border:1px #dfdfdf solid;} #section1 .center_info .lib_tabs {display:flex; gap:0 6px; position:relative; margin-bottom:23px;} #section1 .center_info .lib_tabs > a {position:relative; width:calc(100% / 3); height:57px; line-height:50px; padding:2px 20px; font-size:20px; font-weight:600; color:#777; text-align:center; border-radius:15px; border:1px #eee solid;} #section1 .center_info .lib_tabs > a.tab_on {color:#fff; border:0;} #section1 .center_info .lib_tabs > a:nth-child(1).tab_on {background-color:var(--libColor1);} #section1 .center_info .lib_tabs > a:nth-child(2).tab_on {background-color:var(--libColor2);} #section1 .center_info .lib_tabs > a:nth-child(3).tab_on {background-color:var(--libColor3);} #section1 .center_info .lib_content {min-height:100px;} #section1 .center_info .lib_content h4 {display:none;} #section1 .center_info .lib_content > div {display:none;} #section1 .center_info .lib_content > div.tab_on {display:flex; align-items:center; gap:0 25px;} #section1 .center_info .lib_content > div > div p {font-size:16px; font-weight:300;} #section1 .center_info .lib_content > div .lib_img {border-radius:10px; overflow:hidden; line-height:0; max-width:194px;} #section1 .center_info .lib_content > div .lib_time {} #section1 .center_info .lib_content > div .lib_time .title {display:none;} #section1 .center_info .lib_content > div .lib_time li {position:relative; padding-left:22px; font-size:16px; font-weight:500;} #section1 .center_info .lib_content > div .lib_time li + li {margin-top: 5px;} #section1 .center_info .lib_content > div .lib_time li span {display:inline-block; color:var(--mainColor); font-weight:600; margin-right:4px;} #section1 .center_info .lib_content > div .lib_time li span:before {content:''; position:absolute; top:2px; left:0; width:15px; height:16px; display:inline-block;} #section1 .center_info .lib_content > div .lib_time li:nth-child(1) span:before {background:url(../img/ico_address.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li:nth-child(2) span:before {background:url(../img/ico_call.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li:nth-child(3) span:before {background:url(../img/ico_closed.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li:nth-child(4) span:before {background:url(../img/ico_time.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li dd {display:inline-block; margin-left:3px; vertical-align:middle; word-break: break-all; overflow-wrap: break-word;} /* section2 */ #section2 {position:relative; width:100%; background:url(../img/bg_section2.jpg) right 0 no-repeat;} #section2:before {content:''; position:absolute; top:0; right:0; width:47%; height:100%; background-color:#f7f6fb; z-index:-1; border-radius:0 0 0 150px;} #section2 .section_inner {width:94%; max-width:1680px; margin:0 auto; padding:120px 0 100px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;} /* 공지사항 */ #section2 .mnotice {position:relative; float:left; width:50%; max-width:790px;} #section2 h2 {position:relative; display:inline-block; margin-bottom:50px; font-size:46px; font-weight:800;} #section2 h2:after {content:''; position:absolute; top:-7px; right:-15px;display:inline-block; width:15px; height:15px; background-color:var(--mainColor); border-radius:15px;} #section2 .mnotice .board_tabs {display:flex; float:right; margin-top:10px;} #section2 .mnotice .board_tabs li {position:relative; display:inline-block; font-size:22px; font-weight:700; color:#333; margin-right:60px;} #section2 .mnotice .board_tabs li a {display:flex; padding:10px; align-items:center; padding:5px 10px;} #section2 .mnotice .board_tabs li.tab_on {color:#fff; border-radius:30px;} #section2 .mnotice .board_tabs li.tab_on a:before {content:''; display:inline-block; width:27px; height:27px; margin-right:10px; background:url(../img/icon_tab_on.png) 0 0 no-repeat; vertical-align:middle;} #section2 .mnotice .board_tabs li:nth-child(1).tab_on {background-color:var(--libColor0);} #section2 .mnotice .board_tabs li:nth-child(2).tab_on {background-color:var(--libColor1);} #section2 .mnotice .board_tabs li:nth-child(3).tab_on {background-color:var(--libColor2);} #section2 .mnotice .board_tabs li:nth-child(4).tab_on {background-color:var(--libColor3);} #section2 .mnotice .board_tabs li:after {content:''; display:block; position:absolute; top:20px; right:-30px; width:5px; height:5px; border-radius:50%; background-color:#d1d1d1;} #section2 .mnotice .board_tabs li:last-child:after {display:none;} #section2 .mnotice .board_content > div {display:none;} #section2 .mnotice .board_content > div.tab_on {display:block;} #section2 .mnotice .board_content > div ul {border-top:1px #000 solid;} #section2 .mnotice .board_content > div ul li {padding:25px 0; border-bottom:1px #ddd solid;} #section2 .mnotice .board_content > div ul li a {position:relative; display:flex; padding-left:80px;} #section2 .mnotice .board_content > div ul li a:hover strong {color:#437dea;} #section2 .mnotice .board_content > div ul li span.date {position:absolute; left:0; top:5px; font-family:var(--fontSubSet); font-size:15px; font-weight:700; color:#333;} #section2 .mnotice .board_content > div ul li span.kind {display:inline-block; width:60px; height:29px; line-height:26px; margin-right:30px; overflow:hidden; font-size:16px; font-weight:600; color:#fff; text-align:center; border:1px #fff solid; border-radius:30px; vertical-align:middle;} #section2 .mnotice .board_content > div ul li span.kind.lib0 {background-color:var(--libColor0);} #section2 .mnotice .board_content > div ul li span.kind.lib1 {background-color:var(--libColor1);} #section2 .mnotice .board_content > div ul li span.kind.lib2 {background-color:var(--libColor2);} #section2 .mnotice .board_content > div ul li span.kind.lib3 {background-color:var(--libColor3);} #section2 .mnotice .board_content > div ul li strong {width:calc(100% - 170px); font-size:19px; font-weight:600; color:#1a1a1a; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; vertical-align:middle;} #section2 .more_btn {position:absolute; top:10px; right:0; display:flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:0; background-color:#363637; border-radius:50%;} #section2 .more_btn i.i_plus {position:relative; display:flex; justify-content:center; align-items:center; width:15px; height:15px;} #section2 .more_btn i.i_plus:before {width:14px; height:2px;} #section2 .more_btn i.i_plus:before, #section2 .more_btn i.i_plus:after {content:''; position:absolute; display:block; background-color:#fff; transition:all 0.3s ease;} #section2 .more_btn i.i_plus:after {width:2px; height:14px; transform:rotate(180deg);} #section2 .more_btn:hover i.i_plus:before, #section2 .more_btn:hover i.i_plus:after {transform:rotate(-180deg);} /* 행사일정 */ .mcalendar {width:40%; max-width:737px;} .mcalendar .calendar_wp {position:relative; display:flex;} .mcalendar .calendar_wp .more_btn {top:-100px !important;} .mcalendar .calendar_wp > div {background-color:#fff; border-radius:30px; box-shadow:15px 0 29px rgba(0, 0, 0, 0.1);} .mcalendar .calendar_wp .calendar {width:50%; padding:30px; z-index:2;} .mcalendar .calendar_wp .c_content {width:50%; padding:30px 30px 30px 50px; z-index:1;} .mcalendar .calendar_wp .c_content ul {height:340px; overflow-y:auto;} .mcalendar .calendar_wp .c_content ul::-webkit-scrollbar {width:5px; background-color:#f0f4ff; border-radius:10px;} .mcalendar .calendar_wp .c_content ul::-webkit-scrollbar-thumb {background-color:#3b79dc; border-radius:10px;} .mcalendar .calendar_wp .c_content ul li {display:flex; margin-top:15px; padding-bottom:15px; border-bottom:1px #e5e5e5 dashed;} .mcalendar .calendar_wp .c_content ul li:first-child {margin-top:0;} .mcalendar .calendar_wp .c_content ul li .date {display:flex; justify-content:center; align-items:center; line-height:18px; width:70px; height:62px; padding:5px; margin-right:12px; font-size:15px; font-weight:800; color:#3b79dc; border:1px #3b79dc solid; border-radius:10px;} .mcalendar .calendar_wp .c_content ul li p {font-size:16px; line-height:20px;} .mcalendar .calendar_wp .c_content ul li p span {display:block; width:100%; margin-bottom:5px;} .mcalendar .calendar_wp .calendar_arrow {display:flex; justify-content:center; align-items:center;} .mcalendar .calendar_wp .calendar_arrow .calendar_arrow {display:inline-block; width:40px; height:40px; text-indent:-9999px; background-repeat:no-repeat; background-position:50% 50%;} .mcalendar .calendar_wp .calendar_arrow .calendar_arrow.prev {margin-right:30px;background-image: url(../img/ico_arrow_prev.png);} .mcalendar .calendar_wp .calendar_arrow .calendar_arrow.next {margin-left:30px;background-image: url(../img/ico_arrow_next.png);} .mcalendar .calendar_wp .calendar_arrow strong {font-size:26px; font-weight:700;} .mcalendar .calendar_wp .day table {width:100%; margin-top:20px;} .mcalendar .calendar_wp .day table th {padding:5px 2px; font-size:16px; font-weight:600; color:#191919;} .mcalendar .calendar_wp .day table td {position:relative; padding:2px 0; font-size:13px; font-weight:700; color:#191919; font-family:var(--fontSubSet); text-align:center; z-index:0;} .mcalendar .calendar_wp .day table td span {display: block;padding: 6px 2px;} .mcalendar .calendar_wp .day table td.holi1 span, .mcalendar .calendar_wp .day table td.holi2 span, .mcalendar .calendar_wp .day table td.event span {color: #fff;} .mcalendar .calendar_wp .day table td span::after {content: '';position: absolute;top: 50%;left: 50%;z-index: -1;width: 32px;height: 32px;border-radius: 50%;transform: translate(-50%, -50%);} .mcalendar .calendar_wp .day table td.holi1 span::after {background-color:#666;} .mcalendar .calendar_wp .day table td.holi2 span::after {background-color:#ff7f00;} .mcalendar .calendar_wp .day table td.event span::after {background-color:#007ff9;} .mcalendar .calendar_wp .day table td.today span::after {border: 2px dashed #000;} .mcalendar .calendar_wp .day table .sun {color:#de5a5a;} .mcalendar .calendar_wp .day table .sat {color:#007ff9;} .mcalendar .calendar_wp .cal_mark {display:flex;padding:16px 0 0;margin-top:20px;border-top:1px solid #e8e6e4;flex-wrap: wrap;justify-content: flex-start;gap: 10px;} .mcalendar .calendar_wp .cal_mark span {display:inline-flex; font-size:16px;font-weight:500; align-items:center;} .mcalendar .calendar_wp .cal_mark span + span {/*margin-left:30px;*/} .mcalendar .calendar_wp .cal_mark span::before {content: ''; width:12px; height:12px; margin-right:8px; border-radius:14px;} .mcalendar .calendar_wp .cal_mark span.holi1::before {background-color:#666;} .mcalendar .calendar_wp .cal_mark span.holi2::before {background-color:#ff7f00;} .mcalendar .calendar_wp .cal_mark span.rest::before {background-color:#666;} .mcalendar .calendar_wp .cal_mark span.event::before {background-color:#007ff9;} .mcalendar .calendar_wp .cal_mark span.today::before {width:10px; height:10px; border:2px dotted #000;} /* section3 */ #section3 {position:relative; padding:100px 0;} #section3 h2 {position:relative; display:inline-block; margin-bottom:50px; font-size:46px; font-weight:800; line-height:50px;} #section3 h2:after {content:''; position:absolute; top:-7px; right:-15px;display:inline-block; width:15px; height:15px; background-color:var(--mainColor); border-radius:15px;} #section3 .section_inner {width:94%; max-width:1680px; margin:0 auto; display:flex;flex-wrap:wrap; justify-content:space-between; align-items:center;} #section3 .left_group {width:25%; max-width:322px; padding-right:70px;} #section3 .left_group:after {content:''; position:absolute; left:0; bottom:0; display:block; width:25%; height:100%; background:url(../img/bg_tab.png) right 0 no-repeat; z-index:-1; background-size:cover;} #section3 .left_group ul.culture_tabs {} #section3 .left_group ul.culture_tabs li {margin-bottom:5px;} #section3 .left_group ul.culture_tabs li a {display:flex; align-items:center; justify-content:space-between; padding:12px 20px; font-size:22px; font-weight:700; color:#222;} #section3 .left_group ul.culture_tabs li.tab_on a {background-color:var(--mainColor); color:#fff; border-radius:20px; box-shadow:0px 0 10px rgba(0, 0, 0, 0.2);} #section3 .left_group ul.culture_tabs li a:after {content:''; display:none; width:27px; height:27px; background:url(../img/bg_arrow_w.png) 0 0 no-repeat;} #section3 .left_group ul.culture_tabs li.tab_on a:after {display:inline-block;} #section3 .culture_content {width:75%; margin-top:100px;} #section3 .culture_content:after {content:''; position:absolute; right:3%; bottom:0; display:block; width:90%; height:80%; background-color:#fcf7f7; border-radius:0 0 150px 0; z-index:-2;} #section3 .culture_content > div {display:none;} #section3 .culture_content > div.tab_on {display:block;} #section3 .culture_content .slick-list {padding:15px 0; min-height:290px;} #section3 .culture_content ul li {position:relative; margin:0 23px; background:#fff url(../img/icon_culture.png) 30px 30px no-repeat; transition: all ease .3s; border-radius:30px; box-shadow:0px 0 10px rgba(0, 0, 0, 0.1);} #section3 .culture_content ul li a {display:block; padding:80px 30px 30px;} #section3 .culture_content ul li:hover {box-shadow: 0 0 0 1px #3b79dc inset;} #section3 .culture_content ul li .spot {position:absolute; right:-15px; top:-15px; width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:30px 30px 30px 0; font-size:16px; font-weight:700; color:#fff;} #section3 .culture_content ul li .spot.ST01 {background-color:var(--libColor1);} #section3 .culture_content ul li .spot.ST02 {background-color:var(--libColor2);} #section3 .culture_content ul li .spot.ST03 {background-color:var(--libColor3);} #section3 .culture_content ul li .state {position:absolute; left:30px; top:22px;} #section3 .culture_content ul li .state .kind {display:flex; align-items:center; justify-content:center; min-width:85px; height:38px; padding:0 10px; font-size:16px; font-weight:600; border-radius:10px;} #section3 .culture_content ul li .state .kind.wait {background-color:#f5ac10; color: #fff;} #section3 .culture_content ul li .state .kind.ing {background-color:#379c00; color:#fff;} #section3 .culture_content ul li .state .kind.add {background-color:#f5ac10; color:#fff;} #section3 .culture_content ul li .state .kind.end {background-color:#efefef; color:#777;} #section3 .culture_content ul li .con {} #section3 .culture_content ul li .con .title {display:block; font-size:23px; font-weight:600; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #section3 .culture_content ul li .con dl {display:flex; margin-bottom:5px; font-family:var(--fontSubSet); font-size:15px; font-weight:500;} #section3 .culture_content ul li .con strong + dl {margin-top:20px;} #section3 .culture_content ul li .con dl dt {color:#333; width:63px;} #section3 .culture_content ul li .con dl dd {color:#424242; margin-left:3px; width:calc(100% - 66px);} #section3 .culture_content ul li .con dl dd span {color:#3b79dc; letter-spacing:-1.5px;} #section3 .controls {display:flex; align-items:center; justify-content:flex-end; margin-top:50px;} #section3 .controls a {display:inline-block; width:52px; height:52px; margin-right:7px; border:2px #333 solid; border-radius:50%; text-indent:-9999px;} #section3 .controls .stop {display:none; background:url(../img/btn_stop.png) 50% no-repeat;} #section3 .controls .play {display:none; background:url(../img/btn_play.png) 50% no-repeat;} #section3 .controls .prev {background:url(../img/btn_prev.png) 50% no-repeat;} #section3 .controls .next {background:url(../img/btn_next.png) 50% no-repeat;} #section3 .controls .more {background:#333 url(../img/btn_more.png) 50% no-repeat;} .progress {display:block; width:calc(100% - 230px); height:3px; margin-right:30px; border-radius:10px; overflow:hidden; background-color:#f2e9e9; background-image: linear-gradient(to right, black, black); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .4s ease-in-out;} .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;} /* banner */ #banner {padding:30px 0; background:#fff; overflow:hidden; border-top:1px #ebebeb solid;} #banner .banner {position:relative; width:100%; max-width:1680px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} #banner .banner h3 {width:200px; font-size:0;} #banner .banner .bx-wrapper {width: calc(100% - 200px) !important; margin: 0 !important;} #banner .banner .bx-controls {position:absolute; top:12px; left:0; display:flex; justify-content:space-between; width:100px; line-height:0;} #banner .banner .bx-controls-direction a {display:inline-block; width:25px; height:25px; text-indent:-9999em;} #banner .banner .bx-controls-direction a.bx-prev {background:url(../img/ico_arrow_prev.svg) center no-repeat;} #banner .banner .bx-controls-direction a.bx-next {position:absolute; bottom:0; right:0; background:url(../img/ico_arrow_next.svg) center no-repeat;} #banner .banner .bx-controls-auto {position:absolute; top:0; left:calc(50% - 13px);} #banner .banner .bx-controls-auto a {display:block; position:relative; width:25px; height:25px; outline:0; text-indent:-9999em; z-index:1;} #banner .banner .bx-controls-auto a.active {display:none;} #banner .banner .bx-controls-auto .bx-start{background:url(../img/ico_m_play.svg) center no-repeat; background-size:23px;} #banner .banner .bx-controls-auto .bx-stop{background:url(../img/ico_stop.png) center no-repeat;} /* #footer */ #footer {width:100%; padding:60px 0; background-color:#232733;} #footer .footer_inner {position:relative; width:94%; max-width:1680px; margin:0 auto; color:#fff;} #footer .f_link li {display:inline-block;} #footer .f_link li + li {margin-left:36px;} #footer .f_link li a {font-size:18px; font-weight:600; color:#999c9f;} #footer .f_link li a:hover {color:#fff !important;} #footer .f_link li a.privacy {color:#cbcfd3;} #footer .f_info {margin-top:40px;} #footer .f_info * {font-style:normal; font-size:18px; font-weight:600; letter-spacing:0;} #footer .f_info address {color:#b9bdc1; margin-bottom:15px;} #footer .f_info address span + span {margin-left:50px;} #footer .f_info cite {color:#999c9f;} #footer .f_sns {position:absolute; right:0; top:40%; display:flex; gap:0 10px;} #footer .f_sns li {width:44px; height:44px;} #footer .f_sns li a {display:block; height:100%; font-size:0; background-size:100% !important; border-radius:12px;} #footer .f_sns li a:hover {background-color:rgba(255,255,255,0.2) !important;} #footer .f_sns li:nth-child(1) a {background:rgba(255,255,255,0.1) url(../img/icon_instargram.png) 0 0 no-repeat;} #footer .f_sns li:nth-child(2) a {background:rgba(255,255,255,0.1) url(../img/icon_blog.png) 0 0 no-repeat;} #footer .f_sns li:nth-child(3) a {background:rgba(255,255,255,0.1) url(../img/icon_kakao.png) 0 0 no-repeat;} #footer .f_sns li:nth-child(4) a {background:rgba(255,255,255,0.1) url(../img/icon_youtube.png) 0 0 no-repeat;} #footer fieldset{position:absolute; right:0; top:34px} #footer select{padding:8px;width:170px;font-size:14px;color:#333;font-weight:normal;background:#676767;color:#eaeaea;border-radius:0} #footer select option {background:#fff; color:#555; font-size:13px} #footer button{position:relative;padding:0 10px;height:34px;font-size:10px;cursor:pointer;font-family:Arial, Helvetica, sans-serif;color:#eaeaea;background:#676767;vertical-align: top;} /**/ #mCard2 {display:none;} /**/ #contain{} #contain .sub_visual {overflow:hidden; width:100%; height:310px; background-color:#f9f3e7; border-bottom:1px #f2f2f2 solid;} #contain .sub_visual > div {position:relative; display:flex; flex-wrap:wrap; align-content:center; vertical-align:middle; position:relative; width:100%; max-width:1440px; height:100%; margin:0 auto;} #contain .sub_visual > div:after {position:absolute; top:0; right:0; width:676px; height:242px; z-index:100; content:'';} #contain .sub_visual h2 {width:100%; margin-top:-74px; font-size:42px; color:#3a3a3a;} .visual_intro > div:after {background:url(../img/visual_intro.png) 0 bottom no-repeat;} .visual_toylib > div:after {background:url(../img/visual_toylib.png) 0 bottom no-repeat;} .visual_plays > div:after {background:url(../img/visual_plays.png) 0 bottom no-repeat;} .visual_program > div:after {background:url(../img/visual_program.png) 0 bottom no-repeat;} .visual_onedu > div:after {background:url(../img/visual_onedu.png) 0 bottom no-repeat;} .visual_info > div:after {background:url(../img/visual_info.png) 0 bottom no-repeat;} .visual_community > div:after {background:url(../img/visual_community.png) 0 bottom no-repeat;} .visual_etc > div:after {background:url(../img/visual_etc.png) 0 bottom no-repeat;} .visual_member > div:after {background:url(../img/visual_etc.png) 0 bottom no-repeat;} .visual_mypage > div:after {background:url(../img/visual_etc.png) 0 bottom no-repeat;} /**/ #contain .sub_visual .locator {} #contain .sub_visual .locator .path * {font-size:16px;font-weight:400;color:#333} #contain .sub_visual .locator .path li {position:relative; display:inline-block; padding-right:25px;} #contain .sub_visual .locator .path li + li {margin-left:10px;} #contain .sub_visual .locator .path li:last-child {padding-right:0;} #contain .sub_visual .locator .path li:last-child:after {display:none;} #contain .sub_visual .locator .path li button {border:0; padding:0; color:#333; letter-spacing:-0.5px; vertical-align:middle;} #contain .sub_visual .locator .path li:after {content:''; display:inline-block; position:absolute; top:calc(50% - 2px); right:4px; width:8px; height:8px; border-top:2px solid #797979; border-right:2px solid #797979; box-sizing:border-box; transform: rotate(45deg);} #contain .sub_visual .locator .path li.sel button {color:#000; font-weight:600;} #contain .sub_visual .locator .path li.home {text-transform:uppercase; letter-spacing: 0;} #contain .sub_visual .locator .path li.home a {display:inline-block; width:20px; height:20px; background:no-repeat center / contain; background-image: url(../img/icon_home.svg); font-size:0;} #contain .vepth .navi {display:none !important} #contain .datelist{line-height:20px;text-align:center} #contain .datelist strong{padding:0 10px;font-size:20px} #contain .datelist a{display:none} #contain .sub_visual i.img {position:absolute;z-index:2;top:-20px;right:0;width: 400px;height: 122px;background:url(../img/v1.png) no-repeat 100%;transition:all 0.5s cubic-bezier(0.785, 0.135, 0.150, 0.860);animation-duration: 0s;animation-name: v_img;} /**/ #contain .contain {position:relative; margin:-70px auto 70px; max-width:1440px;} /**/ #content h1 {margin-bottom: 0;padding: 0 0 10px 28px;font-size: 22px;line-height: 1.2em;font-weight: 600;color:#000;background: url(../img/h1_bullet.gif) no-repeat 0 3px;} h3.on_mark {font-size: 20px !important;color:#333;padding: 0 0 0 35px !important;margin-bottom:10px;background: url(../img/h3_bullet.png) no-repeat 0 50%;letter-spacing: -1px;} /**/ #aside {width:100%; margin-bottom:70px;} #aside:has(li.sel .side3m) {margin-bottom:130px;} #aside > div {display:flex; /*box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.04);*/ border-radius:20px;} #aside div .home {position:relative; display:inline-block; width:70px; height:70px; font-size:0; background-color:#ff8363; border-radius:20px 20px 0 0;} #aside div .home:before {content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:21px; height:21px; background:url(../img/icon_home_f.svg) 0 0 no-repeat;} #aside div > ul {display:flex; width:calc(100% - 70px); background-color:#fff; border-radius:20px 20px 0 0; border-bottom:1px #f2f2f2 solid;} #aside div > ul > li {} #aside ul > li > a {display:block; padding:0 40px; line-height:70px; font-size:20px; font-weight:600; color:#333; transition:all 0s;} #aside ul > li > a img {padding:0 0 0 5px;vertical-align:middle} #aside ul > li > a:hover {color:#f79220; box-sizing: border-box;} #aside ul > li.sel {border-color:#f79220; /*border-bottom: 2px solid transparent; border-image: linear-gradient(150deg, #37ac7c, #f8c327); border-image-slice: 1;*/} #aside ul > li.sel > a {position:relative; color:#f79220; transition:all 0s;} #aside ul > li.sel > a:after {content:''; position:absolute; right:0; bottom:0; width:100%; height:3px; background-color:#f79220; border-radius:3px; transition-duration: .3s;} #aside ul > li ul {display:none; width:100%; padding:0 20px 0 110px; background-color:#f7f7f7; border:1px #e9e9e9 solid; border-radius:0 0 20px 20px;} #aside ul > li.sel ul {position:absolute; left:0; display:block;} #aside ul > li li {display:inline-block; margin-right:40px;} #aside ul > li li a {display:block; line-height:58px; font-size:18px; height:auto; padding:0; margin:0; color:#8f908f;} #aside ul > li li a.sel {color:#f79220;} #aside ul > li li a.sel:before {background-color:#f79220;} /**/ #aside .sub_quick { overflow:hidden; padding:16px 4px;} #aside .sub_quick a { float:left; width:33.3%; display:block; padding:68px 0 5px 0; background:url(../img/sub_quick01.png) no-repeat center top; font-size:13px; text-align:center; } #aside .sub_quick a.a02 { background:url(../img/sub_quick02.png) no-repeat center top;} #aside .sub_quick a.a03 { background:url(../img/sub_quick03.png) no-repeat center top;} #aside .sub_quick a:hover { opacity:.8;} /**/ #design {position:relative; width:100%; min-height:650px;} #design #content , #design #program {padding-bottom:40px; letter-spacing:0;} #design .sub_head {display:none; position:relative; padding-top:35px; padding-bottom:25px; margin-bottom:50px; z-index:1; border-bottom:2px solid #333;} #design .sub_head h2 {padding:0; font-size:36px; font-weight:700; 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 .sub_head p {font-size:16px; color:#626262;} #design .sb_quick {position:absolute; right: 0; top: 0;z-index:10;} #design .sb_quick li {float:left;border-right:1px solid #e2e2e2;background:#fff;} #design .sb_quick li > a { display:block; width:46px; height:48px; line-height:48px !important; text-align:center; } #design .sb_quick li > a > i { font-size:24px; color:#888;} #design .sb_quick li.no02 > div { position:absolute;overflow:hidden; left:47px; top:48px;width:46px; display:none; box-shadow: 2px 2px 2px rgba(0,0,0,0.3)} #design .sb_quick li.no02 > div a { display:block;float:left; width:46px; height:45px;border-top:1px solid #333;color:#fff;font-weight:bold;font-size:17px; background:#444; text-align:center; line-height:46px !important;transition:0.5s;} #design .sb_quick li.no02 > div a span {text-indent:-9999px !important; font-size:0;} #design .sb_quick li.no02 > a.on { background-color:#009893; transition: 0.5s;} #design .sb_quick li.no02 > a.on i {color:#fff;} #design .sb_quick li.no02 > div a * {color:#fff !important; line-height:45px !important;} #design .sb_quick li.no02 > div a.fb:hover {background:#4d62a0; transition:0.5s;} #design .sb_quick li.no02 > div a.tw:hover {background:#11ace6; transition:0.5s;} #design .sb_quick li.no02 > div a.blog:hover {background:#00c905; transition:0.5s;} /**/ #design #tabmenu {margin-bottom:50px;} #design #tabmenu ul {display:table; flex-wrap:wrap; width:100%; overflow:hidden; box-sizing:border-box;} #design #tabmenu ul li {display:table-cell; height:62px; text-align:center;} #design #tabmenu ul li + li a {border-left:0;} #design #tabmenu ul li:first-child a {border-radius:20px 0 0 0;} #design #tabmenu ul li:last-child a {border-radius:0 0 20px 0;} #design #tabmenu ul li a {display:block; padding:15px 30px; font-size:20px; font-weight:600; color:#555; background-color:#fff; border:1px solid #e2e1e1; box-sizing:border-box;} #design #tabmenu ul li.on a {color:#fff; background-color:#ff8363; border-color:#ff8363; box-sizing:border-box;} #design #tabmenu ul li a.sel {color:#fff; background-color:#ff8363; border-color:#ff8363; box-sizing:border-box;} /**/ /**/ #blind{position:absolute;z-index:99998;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:260px;height:100%;background:#fff; overflow-y:scroll;} #dkleft .lefttit {position:fixed; width:260px; padding:15px 25px; color:#fff; background-color:#ff8363; z-index: 99999;} #dkleft .lefttit .mn-tit {font-size:17px; font-weight:600; padding-bottom:10px; border-bottom: 1px solid rgba(255, 255, 255, .2);} #dkleft .lefttit > button {display:none;position:relative;font-size:14px;color:red;border:0;background:transparent} #dkleft .lefttit i {display:none;padding:5px 0 0 0;height:25px;font-size:20px;color:red} #dkleft .lefttit .members_nav {margin-top:10px;} #dkleft .lefttit .members_nav button, #dkleft .lefttit .members_nav a {display:inline-block; margin-right:30px; font-size:16px; font-weight:600; vertical-align:middle; cursor:pointer;} #dkleft .lefttit .members_nav button:hover, #dkleft .lefttit .members_nav a:hover {text-decoration:underline;} #dkleft .select {margin-top:100px;} #dkleft .select .join{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 .join i{padding:0 7px 0 0;font-size:24px;color:#333} #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 i{display:inline-block;position:relative;top:5px;padding:0 7px 0 0;font-size:24px;color:#333} #dkleft .depth1{display:block;position:relative;padding:0 25px;line-height:66px;font-size:18px;font-weight:500;color:#333;border-bottom:1px solid #ddd;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s;cursor:pointer;} #dkleft .depth1:after {content:''; display:block; width:10px; height:10px; position:absolute; top:21px; left:inherit; right:25px; background:none; border:2px solid #333; transform:rotate(45deg); border-top:0; border-left:0; transition:0.5s;} #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 {color:#ff8363;border-bottom:1px solid #ddd} #dkleft .depth1.sel:after {transform:rotate(225deg) translateY(-50%);} #dkleft .depth1 i {display:none;} #dkleft .depth2{display:none; padding:10px 25px; background:#f6f6f6; border-bottom:1px solid #ddd} #dkleft .depth2 a{display:block;line-height:40px;font-size:16px;color:#555; text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #dkleft .m_login{width:100%;border-bottom:1px solid #e2e2e2;height:60px;} #dkleft .m_login ul{width:100%;} #dkleft .m_login li{float:left;width:50%;text-align:center;padding:20px 0px;} #closeleft{position:absolute;z-index:9999999;left:-50px;top:12px;display:block;font-size:26px;font-family:Linearicons-Free;speak:none;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; cursor:pointer;} #closeleft:before{content:"\e870";font-size:26px;} #gotop, #gotop a{display:block;} #gotop{position:fixed;z-index:90000;bottom:10px;right:1%;display:block;} #gotop a{display:block;margin-left:600px;width:50px;height:50px;padding:22px 0 0 0;font-size:10px;font-weight:800;text-align:center;color:#fff;background:rgba(0,0,0,0.2) url(../img/gotop.png) no-repeat 48% 30%;border-radius:50px;overflow:hidden} } @media all and (min-width: 940px) and (max-width: 1440px) { /* header */ #header {width:100%; z-index:30002;} #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:5px; display:inline-block;} #header h1 a {display:block; font-size:19px; font-weight:700;} #header h1 a img {width:175px; 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 ul.right_info {position:absolute; top:0; right:2%; display:flex; align-items:center;} #header ul.right_info li {position:relative;} #header ul.right_info li:first-child {padding-right:20px;} #header ul.right_info li a {display:block; height:30px; line-height:30px; font-size:16px; font-weight:500; text-align:center; color:#666; letter-spacing:-0.5px;} #header ul.right_info li.btn_sitemap {margin-left:20px;} #header ul.right_info li.btn_sitemap a {position:relative; width:46px; height:46px; border-radius:50px; display:flex; justify-content:center; align-items:center;} #header ul li .line_box {width:22px; height:19px;} #header ul li .line_box span {float:right; display:block; margin:0 auto 5px; width:100%; height:3px; background:#000; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;} #header ul li .line_box span:nth-child(3) {position:relative; width:15px; float:left;} #header ul li .line_box span:nth-child(3):after {content:''; position:absolute; right:-7px; bottom:0; display:inline-block; width:3px; height:3px; background-color:var(--mainColor);} /**/ #gnb {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 {position:relative; width:calc(100% / 7); display:inline-block; vertical-align:top; text-align:center;} #gnb .depth1 > li > a {display:block; position:relative; margin:0; padding:30px 0; font-size:21px; font-weight:700; color:var(--colorDarkgray); line-height:20px;} #gnb .depth1 > li > a:hover {color:var(--mainColor);} #gnb .depth1 > li > a em {display:none; transform:translateX(-5px);} #gnb .depth1 > li:hover > a em {position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); display:block; width:14px; height:14px; border-radius:14px; background:var(--mainColor); transition: all 0.3s; z-index:4;} #gnb .depth1 > li.sel > a {color:var(--mainColor);} #gnb .depth1:hover .depth2 {display:block;} #gnb .depth2 {display:none; position:absolute; top:80px; left:50%; transform:translateX(-50%); width:140px; padding:20px; margin:0 auto; border-radius:20px; box-shadow:5px 5px 10px 0 rgba(0, 0, 0, 0.1); background-color:#fff; visibility: hidden; z-index:3;} #header.sel #gnb .depth2 {display:block;} #gnb .depth2 li a {position:relative; display:block; padding:10px 0; line-height:18px; font-family:var(--fontMainSet); font-size:16px; font-weight:500; text-align:center; color:#333; word-break:keep-all; z-index:2;} #gnb .depth2 li a:hover {color:var(--mainColor);} #gnb .depth2 li.sel a {color:var(--mainColor);} #gnb .depth2 li:last-child a {border-bottom:0;} #gnb.sel {height:400px;} #gnb.sel depth1 {height:300px !important} #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:132px;*/} } @media all and (min-width: 1025px) and (max-width: 1440px) { #divpop {display:none;} #mm-blocker {display:none} #popupWindow {position:absolute} #wrap {position:relative;top:0px;padding:0; margin:0;width:100%;height:100%} #wrap .tmovie {position:fixed !important;position:absolute;z-index:15;bottom:0px;right:0px;display:block;width:86px;height:43px;background:#999 url(../img/ddea/btn_tmovie.png) no-repeat 50% 50%;text-indent:-9999em;overflow:hidden} /* section1 */ #section1 {width:100%; padding:50px 0 70px; background:url(../img/bg_visual.jpg) center bottom no-repeat;} #section1 .section_inner {width:94%; max-width:1680px; margin:0 auto; display:flex;flex-wrap:wrap; justify-content:space-between; align-items:center;} #section1 .mpopup {position:relative; width:60%; max-width:960px;} #section1 .mpopup h2 {color:#ec501f;} #section1 .zone_wp .slider {max-width:820px; margin:0 auto; border-radius:20px; overflow:hidden;} #section1 .zone_wp .slider li {border-radius:5px;} #section1 .zone_wp .slider li a {display:block;width:100%; height:100%; max-height:500px;} #section1 .zone_wp .slider li img {width:100%; height:auto; max-height:500px;} #section1 .zone_wp .slick-dots {display:flex; justify-content:flex-end; padding-right:30px; margin-top:10px; cursor:pointer;} #section1 .zone_wp .slick-dots li {margin-left:5px; width:15px; height:15px; border:2px solid #3a718e; border-radius:50px; background:transparent; text-indent:-9999px} #section1 .zone_wp .slick-dots li.slick-active {background:#3a718e;} #section1 .zone_wp .slick-slide {margin:0 10px;} #section1 .zone_wp .slick-list {margin:0 -10px;} #section1 .zone_wp .controls {position:absolute; bottom:-25px; left:105px; display:flex; align-items:center; padding:17px 24px; color:#fefefe; line-height:0; border-radius:30px; background-color:#51555d;} #section1 .zone_wp .controls h3 {font-size:14px; font-weight:800;} #section1 .zone_wp .controls .slider_dots {display:flex; align-items:center; margin:0 20px; font-size:15px; font-family:var(--fontSubSet); font-weight:700;} #section1 .zone_wp .controls .slider_dots strong {color:#f8c327; font-weight:700;} #section1 .zone_wp .controls .slider_dots em {margin:0 7px;} #section1 .zone_wp .ctrl_arrow .slick-arrow {position:absolute; top:calc(50% - 26px); width:54px; height:54px; border:0; font-size:0; cursor:pointer; border-radius:50%; background-color:#fff; box-shadow:18px 28px 50px 0px rgba(43, 63, 122, 0.1); transition: background-color 250ms ease-in-out;} #section1 .zone_wp .ctrl_arrow .slick-arrow:hover {background-color:#4d4d4d;} #section1 .zone_wp .ctrl_arrow .slick-prev {left:0;} #section1 .zone_wp .ctrl_arrow .slick-next {right:0;} #section1 .zone_wp .ctrl_arrow button:before {content:''; display:block; width:100%; height:100%; background-size:70% !important;} #section1 .zone_wp .ctrl_arrow .slick-prev:before {background:url(../img/ico_arrow_prev.svg) center no-repeat;} #section1 .zone_wp .ctrl_arrow .slick-next:before {background:url(../img/ico_arrow_next.svg) center no-repeat;} #section1 .zone_wp .ctrl_arrow .slick-prev:hover:before {background:url(../img/ico_arrow_w_prev.svg) center no-repeat;} #section1 .zone_wp .ctrl_arrow .slick-next:hover:before {background:url(../img/ico_arrow_w_next.svg) center no-repeat;} #section1 .zone_wp .controls button.slider_btn {display:inline-block; width:20px; height:20px; padding:0; vertical-align:middle; cursor:pointer; background-color:#3c414b; border-radius:20px; font-size:0; text-indent:-9999px;} #section1 .zone_wp .controls button.slider_btn:before {content:''; display:block; width:100%; height:100%;} #section1 .zone_wp .controls button.slider_btn.stop:before {background:url(../img/ico_m_w_stop.png) center no-repeat; background-size:7px;} #section1 .zone_wp .controls button.slider_btn.play:before {background:url(../img/ico_m_w_play.svg) center no-repeat; background-size:15px;} #section1 .right_group {width:36%; max-width:578px; text-align:center;} .mainSlogan {width:80%; max-width:393px; margin:0 auto;} .yuga_link {display:flex; flex-wrap:wrap; gap:5px; width:90%; margin:35px auto;} .yuga_link li {width:calc(50% - 2.5px); border-radius:10px;} .yuga_link li a {position:relative; display:flex; align-items:center; padding:13px 20px; font-size:18px; font-weight:600; color:#fff; text-align:left;} .yuga_link li a:before {content:''; display:inline-block; width:21px; height:21px; margin-right:10px; transition: transform 250ms ease-in-out;} .yuga_link li a:hover:before {transform: translateX(4px);} .yuga_link li a:after {content:''; position:absolute; top:calc(50% - 10px); right:15px; display:inline-block; width:21px; height:21px; background:url(../img/icon_yuga.png) 0 0 no-repeat;} .yuga_link li:nth-child(1) {background-color:#f8c327;} .yuga_link li:nth-child(1) a:before {background:url(../img/yuga_link1.svg) 0 0 no-repeat;} .yuga_link li:nth-child(2) {background-color:#579bfe;} .yuga_link li:nth-child(2) a:before {background:url(../img/yuga_link2.svg) 0 0 no-repeat;} .yuga_link li:nth-child(3) {background-color:#37ac7c;} .yuga_link li:nth-child(3) a:before {background:url(../img/yuga_link3.svg) 0 0 no-repeat;} .yuga_link li:nth-child(4) {background-color:#9577d9;} .yuga_link li:nth-child(4) a:before {background:url(../img/yuga_link4.svg) 0 0 no-repeat;} #section1 .search_area fieldset label {display:none;} #section1 .search_area {width:90%; margin:0 auto;} #section1 .search_area .input_wp {position:relative; text-align:left;} #section1 .search_area .input_wp input {width:calc(100% - 30px); height:65px; padding:0 30px; font-size:20px; font-weight:500; color:#333; border:5px #f79220 solid; border-radius:25px; box-shadow: 4px 0 15px 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:40px 40px 15px 40px; background-color:#f5942e; background-image:url(../img/ico_m_search.svg);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 29px;text-indent: -9999px;} #section1 .direct {width:60%; margin-top:60px; z-index:1;} #section1 .direct h2 {position:relative; margin-bottom:35px; color:#51555d; font-size:36px; font-weight:800;} #section1 .direct h2:after {content:''; position:absolute; top:34px; right:0; width:60%; height:1px; background-color:#51555d; z-index:0;} #section1 .direct h2 strong {position:relative; color:var(--mainColor); padding-right:10px; background-color:#fff9ed; z-index:1;} #section1 .direct h2 strong:after {content:''; display:inline-block; width:19px; height:20px; margin-left:8px; background:url(../img/icon_heart.svg) 0 0 no-repeat;} #section1 .direct ul {display:flex; justify-content:space-between; gap:0 20px;} #section1 .direct li {width:calc(100% / 5);} #section1 .direct li a {display:flex; flex-wrap:wrap; justify-content:center; position:relative; padding:20px 0; transition:all 0.3s; background-color:#fff; border-radius:20px; box-shadow:2px 0 10px rgba(0, 0, 0, 0.1);} #section1 .direct li strong {display:block; width:100%; height:60px; transition:all 0.3s} #section1 .direct li span{display:block; margin-top:10px; text-align:center; font-size:17px; font-weight:600; color:#000; transition:all 0.3s; letter-spacing:-1px} #section1 .direct li.bn1 a strong{background:url(../img/icon_direct1.svg) no-repeat center center;} #section1 .direct li.bn2 a strong{background:url(../img/icon_direct2.svg) no-repeat center center;} #section1 .direct li.bn3 a strong{background:url(../img/icon_direct3.svg) no-repeat center center; background-size:auto 53px;} #section1 .direct li.bn4 a strong{background:url(../img/icon_direct4.svg) no-repeat center center; background-size:auto 65px;} #section1 .direct li.bn5 a strong{background:url(../img/icon_direct5.svg) no-repeat center center;} #section1 .direct li a:hover{transition:all 0.3s} #section1 .direct li a:hover strong { -webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);} #section1 .direct li a:hover span {} #section1 .center_info {width:37%; margin-top:60px; padding:25px 20px; background-color:#fff; border-radius:30px; border:1px #dfdfdf solid;} #section1 .center_info .lib_tabs {display:flex; gap:0 6px; position:relative; margin-bottom:23px;} #section1 .center_info .lib_tabs > a {position:relative; width:calc(100% / 3); padding:7px 20px; font-size:18px; font-weight:600; color:#777; text-align:center; border-radius:10px; border:1px #eee solid;} #section1 .center_info .lib_tabs > a.tab_on {color:#fff; border:0;} #section1 .center_info .lib_tabs > a:nth-child(1).tab_on {background-color:var(--libColor1);} #section1 .center_info .lib_tabs > a:nth-child(2).tab_on {background-color:var(--libColor2);} #section1 .center_info .lib_tabs > a:nth-child(3).tab_on {background-color:var(--libColor3);} #section1 .center_info .lib_content {min-height:100px;} #section1 .center_info .lib_content h4 {display:none;} #section1 .center_info .lib_content > div {display:none;} #section1 .center_info .lib_content > div.tab_on {display:flex; align-items:center; gap:0 25px;} #section1 .center_info .lib_content > div > div p {font-size:16px; font-weight:300;} #section1 .center_info .lib_content > div .lib_img {display:none; border-radius:10px; overflow:hidden; line-height:0; max-width:194px;} #section1 .center_info .lib_content > div .lib_time {} #section1 .center_info .lib_content > div .lib_time .title {display:none;} #section1 .center_info .lib_content > div .lib_time li {position:relative; padding-left:22px; font-size:16px; font-weight:500;} #section1 .center_info .lib_content > div .lib_time li + li {margin-top: 5px;} #section1 .center_info .lib_content > div .lib_time li span {display:inline-block; color:var(--mainColor); font-weight:600; margin-right:4px;} #section1 .center_info .lib_content > div .lib_time li span:before {content:''; position:absolute; top:2px; left:0; width:15px; height:16px; display:inline-block;} #section1 .center_info .lib_content > div .lib_time li:nth-child(1) span:before {background:url(../img/ico_address.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li:nth-child(2) span:before {background:url(../img/ico_call.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li:nth-child(3) span:before {background:url(../img/ico_closed.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li:nth-child(4) span:before {background:url(../img/ico_time.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li dd {display:inline-block; margin-left:3px; vertical-align:middle; word-break: break-all; overflow-wrap: break-word;} /* section2 */ #section2 {position:relative; width:100%; background:url(../img/bg_section2.jpg) right 0 no-repeat;} #section2:before {content:''; position:absolute; top:0; right:0; width:47%; height:100%; background-color:#f7f6fb; z-index:-1; border-radius:0 0 0 150px;} #section2 .section_inner {width:94%; max-width:1680px; margin:0 auto; padding:80px 0 100px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;} /* 공지사항 */ #section2 .mnotice {position:relative; float:left; width:50%; max-width:790px;} #section2 h2 {position:relative; display:inline-block; margin-bottom:30px; font-size:36px; font-weight:800;} #section2 h2:after {content:''; position:absolute; top:-7px; right:-15px;display:inline-block; width:15px; height:15px; background-color:var(--mainColor); border-radius:15px;} #section2 .mnotice .board_tabs {display:flex; margin-bottom:20px;} #section2 .mnotice .board_tabs li {position:relative; display:inline-block; font-size:22px; font-weight:700; color:#333; margin-right:60px;} #section2 .mnotice .board_tabs li a {display:flex; padding:10px; align-items:center; padding:5px 10px;} #section2 .mnotice .board_tabs li.tab_on {color:#fff; border-radius:30px;} #section2 .mnotice .board_tabs li.tab_on a:before {content:''; display:inline-block; width:27px; height:27px; margin-right:10px; background:url(../img/icon_tab_on.png) 0 0 no-repeat; vertical-align:middle;} #section2 .mnotice .board_tabs li:nth-child(1).tab_on {background-color:var(--libColor0);} #section2 .mnotice .board_tabs li:nth-child(2).tab_on {background-color:var(--libColor1);} #section2 .mnotice .board_tabs li:nth-child(3).tab_on {background-color:var(--libColor2);} #section2 .mnotice .board_tabs li:nth-child(4).tab_on {background-color:var(--libColor3);} #section2 .mnotice .board_tabs li:after {content:''; display:block; position:absolute; top:20px; right:-30px; width:5px; height:5px; border-radius:50%; background-color:#d1d1d1;} #section2 .mnotice .board_tabs li:last-child:after {display:none;} #section2 .mnotice .board_content > div {display:none;} #section2 .mnotice .board_content > div.tab_on {display:block;} #section2 .mnotice .board_content > div ul {border-top:1px #000 solid;} #section2 .mnotice .board_content > div ul li {padding:25px 0; border-bottom:1px #ddd solid;} #section2 .mnotice .board_content > div ul li a {position:relative; display:flex; padding-left:80px;} #section2 .mnotice .board_content > div ul li a:hover strong {color:#437dea;} #section2 .mnotice .board_content > div ul li span.date {position:absolute; left:0; top:5px; font-family:var(--fontSubSet); font-size:15px; font-weight:700; color:#333;} #section2 .mnotice .board_content > div ul li span.kind {display:inline-block; width:60px; height:29px; line-height:26px; margin-right:30px; overflow:hidden; font-size:16px; font-weight:600; color:#fff; text-align:center; border:1px #fff solid; border-radius:30px; vertical-align:middle;} #section2 .mnotice .board_content > div ul li span.kind.lib0 {background-color:var(--libColor0);} #section2 .mnotice .board_content > div ul li span.kind.lib1 {background-color:var(--libColor1);} #section2 .mnotice .board_content > div ul li span.kind.lib2 {background-color:var(--libColor2);} #section2 .mnotice .board_content > div ul li span.kind.lib3 {background-color:var(--libColor3);} #section2 .mnotice .board_content > div ul li strong {width:calc(100% - 150px); font-size:18px; font-weight:600; color:#1a1a1a; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; vertical-align:middle;} #section2 .more_btn {position:absolute; top:80px; right:0; display:flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:0; background-color:#363637; border-radius:50%;} #section2 .more_btn i.i_plus {position:relative; display:flex; justify-content:center; align-items:center; width:15px; height:15px;} #section2 .more_btn i.i_plus:before {width:14px; height:2px;} #section2 .more_btn i.i_plus:before, #section2 .more_btn i.i_plus:after {content:''; position:absolute; display:block; background-color:#fff; transition:all 0.3s ease;} #section2 .more_btn i.i_plus:after {width:2px; height:14px; transform:rotate(180deg);} #section2 .more_btn:hover i.i_plus:before, #section2 .more_btn:hover i.i_plus:after {transform:rotate(-180deg);} /* 행사일정 */ .mcalendar {width:40%; max-width:737px;} .mcalendar .calendar_wp {position:relative; display:flex; flex-wrap:wrap;} .mcalendar .calendar_wp .more_btn {top:-80px !important;} .mcalendar .calendar_wp > div {background-color:#fff; border-radius:30px; box-shadow:15px 0 29px rgba(0, 0, 0, 0.1);} .mcalendar .calendar_wp .calendar {width:100%; padding:25px 30px; z-index:2;} .mcalendar .calendar_wp .c_content {width:100%; padding:30px; z-index:1;} .mcalendar .calendar_wp .c_content ul {height:100px; overflow-y:auto;} .mcalendar .calendar_wp .c_content ul::-webkit-scrollbar {width:5px; background-color:#f0f4ff; border-radius:10px;} .mcalendar .calendar_wp .c_content ul::-webkit-scrollbar-thumb {background-color:#3b79dc; border-radius:10px;} .mcalendar .calendar_wp .c_content ul li {display:flex; margin-top:15px; padding-bottom:15px; border-bottom:1px #e5e5e5 dashed;} .mcalendar .calendar_wp .c_content ul li:first-child {margin-top:0;} .mcalendar .calendar_wp .c_content ul li:last-child {border-bottom:0;} .mcalendar .calendar_wp .c_content ul li .date {display:flex; justify-content:center; align-items:center; line-height:18px; width:70px; height:62px; padding:5px; margin-right:12px; font-size:15px; font-weight:800; color:#3b79dc; border:1px #3b79dc solid; border-radius:10px;} .mcalendar .calendar_wp .c_content ul li p {font-size:16px; line-height:20px;} .mcalendar .calendar_wp .c_content ul li p span {display:block; width:100%; margin-bottom:5px;} .mcalendar .calendar_wp .calendar_arrow {display:flex; justify-content:center; align-items:center;} .mcalendar .calendar_wp .calendar_arrow .calendar_arrow {display:inline-block; width:40px; height:40px; text-indent:-9999px; background-repeat:no-repeat; background-position:50% 50%;} .mcalendar .calendar_wp .calendar_arrow .calendar_arrow.prev {margin-right:30px;background-image: url(../img/ico_arrow_prev.png);} .mcalendar .calendar_wp .calendar_arrow .calendar_arrow.next {margin-left:30px;background-image: url(../img/ico_arrow_next.png);} .mcalendar .calendar_wp .calendar_arrow strong {font-size:26px; font-weight:700;} .mcalendar .calendar_wp .day table {width:100%; margin-top:15px;} .mcalendar .calendar_wp .day table th {padding:5px 2px; font-size:16px; font-weight:600; color:#191919;} .mcalendar .calendar_wp .day table td {position:relative; padding:2px 0; font-size:13px; font-weight:700; color:#191919; font-family:var(--fontSubSet); text-align:center; z-index:0;} .mcalendar .calendar_wp .day table td span {display: block;padding: 6px 2px;} .mcalendar .calendar_wp .day table td.holi1 span, .mcalendar .calendar_wp .day table td.holi2 span, .mcalendar .calendar_wp .day table td.event span {color: #fff;} .mcalendar .calendar_wp .day table td span::after {content: '';position: absolute;top: 50%;left: 50%;z-index: -1;width: 32px;height: 32px;border-radius: 50%;transform: translate(-50%, -50%);} .mcalendar .calendar_wp .day table td.holi1 span::after {background-color:#666;} .mcalendar .calendar_wp .day table td.holi2 span::after {background-color:#ff7f00;} .mcalendar .calendar_wp .day table td.event span::after {background-color:#007ff9;} .mcalendar .calendar_wp .day table td.today span::after {border: 2px dashed #000;} .mcalendar .calendar_wp .day table .sun {color:#de5a5a;} .mcalendar .calendar_wp .day table .sat {color:#007ff9;} .mcalendar .calendar_wp .cal_mark {display:flex; padding:16px 0 0; margin-top:20px; border-top:1px solid #e8e6e4;} .mcalendar .calendar_wp .cal_mark span {display:inline-flex; font-size:16px;font-weight:500; align-items:center;} .mcalendar .calendar_wp .cal_mark span + span {margin-left:30px;} .mcalendar .calendar_wp .cal_mark span::before {content: ''; width:12px; height:12px; margin-right:8px; border-radius:14px;} .mcalendar .calendar_wp .cal_mark span.holi1::before {background-color:#666;} .mcalendar .calendar_wp .cal_mark span.holi2::before {background-color:#007ff9;} .mcalendar .calendar_wp .cal_mark span.rest::before {background-color:#666;} .mcalendar .calendar_wp .cal_mark span.event::before {background-color:#007ff9;} .mcalendar .calendar_wp .cal_mark span.today::before {width:10px; height:10px; border:2px dotted #000;} /* section3 */ #section3 {position:relative; padding:60px 0;} #section3 h2 {position:relative; display:inline-block; margin-bottom:40px; font-size:36px; font-weight:800; line-height:40px;} #section3 h2:after {content:''; position:absolute; top:-7px; right:-15px;display:inline-block; width:15px; height:15px; background-color:var(--mainColor); border-radius:15px;} #section3 .section_inner {width:94%; max-width:1680px; margin:0 auto; display:flex;flex-wrap:wrap; justify-content:space-between; align-items:center;} #section3 .left_group {width:25%; max-width:322px; padding-right:70px;} #section3 .left_group:after {content:''; position:absolute; left:0; bottom:0; display:block; width:25%; height:100%; background:url(../img/bg_tab.png) right 0 no-repeat; z-index:-1;} #section3 .left_group ul.culture_tabs {} #section3 .left_group ul.culture_tabs li {margin-bottom:5px;} #section3 .left_group ul.culture_tabs li a {display:flex; align-items:center; justify-content:space-between; padding:11px 20px; font-size:21px; font-weight:700; color:#222;} #section3 .left_group ul.culture_tabs li.tab_on a {background-color:var(--mainColor); color:#fff; border-radius:20px; box-shadow:0px 0 10px rgba(0, 0, 0, 0.2);} #section3 .left_group ul.culture_tabs li a:after {content:''; display:none; width:27px; height:27px; background:url(../img/bg_arrow_w.png) 0 0 no-repeat;} #section3 .left_group ul.culture_tabs li.tab_on a:after {display:inline-block;} #section3 .culture_content {width:75%; margin-top:100px;} #section3 .culture_content:after {content:''; position:absolute; right:0; bottom:0; display:block; width:100%; height:80%; background-color:#fcf7f7; z-index:-2;} #section3 .culture_content > div {display:none;} #section3 .culture_content > div.tab_on {display:block;} #section3 .culture_content .slick-list {padding:15px 0; min-height:274;} #section3 .culture_content ul li {position:relative; margin:0 23px; background:#fff url(../img/icon_culture.png) 30px 30px no-repeat; transition: all ease .3s; border-radius:30px; box-shadow:0px 0 10px rgba(0, 0, 0, 0.1);} #section3 .culture_content ul li a {display:block; padding:75px 30px 30px;} #section3 .culture_content ul li:hover {box-shadow: 0 0 0 1px #3b79dc inset;} #section3 .culture_content ul li .spot {position:absolute; right:-15px; top:-15px; width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:30px 30px 30px 0; font-size:16px; font-weight:700; color:#fff;} #section3 .culture_content ul li .spot.ST01 {background-color:var(--libColor1);} #section3 .culture_content ul li .spot.ST02 {background-color:var(--libColor2);} #section3 .culture_content ul li .spot.ST03 {background-color:var(--libColor3);} #section3 .culture_content ul li .state {position:absolute; left:30px; top:22px;} #section3 .culture_content ul li .state .kind {display:flex; align-items:center; justify-content:center; min-width:80px; height:34px; padding:0 10px; font-size:16px; font-weight:600; border-radius:10px;} #section3 .culture_content ul li .state .kind.wait {background-color:#f5ac10; color: #fff;} #section3 .culture_content ul li .state .kind.ing {background-color:#379c00; color:#fff;} #section3 .culture_content ul li .state .kind.add {background-color:#f5ac10; color:#fff;} #section3 .culture_content ul li .state .kind.end {background-color:#efefef; color:#777;} #section3 .culture_content ul li .con {} #section3 .culture_content ul li .con .title {display:block; font-size:20px; line-height:26px; font-weight:600; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #section3 .culture_content ul li .con dl {display:flex; margin-bottom:5px; font-family:var(--fontSubSet); font-size:15px; font-weight:500;} #section3 .culture_content ul li .con strong + dl {margin-top:20px;} #section3 .culture_content ul li .con dl dt {color:#333;} #section3 .culture_content ul li .con dl dd {color:#424242; margin-left:3px;} #section3 .culture_content ul li .con dl dd span {color:#3b79dc; letter-spacing:-1.5px;} #section3 .controls {display:flex; align-items:center; justify-content:flex-end; margin-top:30px;} #section3 .controls a {display:inline-block; width:52px; height:52px; margin-right:7px; border:2px #333 solid; border-radius:50%; text-indent:-9999px;} #section3 .controls .stop {display:none; background:url(../img/btn_stop.png) 50% no-repeat;} #section3 .controls .play {display:none; background:url(../img/btn_play.png) 50% no-repeat;} #section3 .controls .prev {background:url(../img/btn_prev.png) 50% no-repeat;} #section3 .controls .next {background:url(../img/btn_next.png) 50% no-repeat;} #section3 .controls .more {background:#333 url(../img/btn_more.png) 50% no-repeat;} .progress {display:block; width:calc(100% - 230px); height:3px; margin-right:30px; border-radius:10px; overflow:hidden; background-color:#f2e9e9; background-image: linear-gradient(to right, black, black); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .4s ease-in-out;} .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;} /* banner */ #banner {padding:25px 0; background:#fff; overflow:hidden; border-top:1px #ebebeb solid;} #banner .banner {position:relative; width:100%; max-width:1680px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} #banner .banner h3 {width:150px; font-size:0;} #banner .banner .bx-wrapper {width: calc(100% - 150px) !important; margin: 0 !important;} #banner .banner .bx-controls {position:absolute; top:12px; left:0; display:flex; justify-content:space-between; width:100px; line-height:0;} #banner .banner .bx-controls-direction a {display:inline-block; width:25px; height:25px; text-indent:-9999em;} #banner .banner .bx-controls-direction a.bx-prev {background:url(../img/ico_arrow_prev.svg) center no-repeat;} #banner .banner .bx-controls-direction a.bx-next {position:absolute; bottom:0; right:0; background:url(../img/ico_arrow_next.svg) center no-repeat;} #banner .banner .bx-controls-auto {position:absolute; top:0; left:calc(50% - 13px);} #banner .banner .bx-controls-auto a {display:block; position:relative; width:25px; height:25px; outline:0; text-indent:-9999em; z-index:1;} #banner .banner .bx-controls-auto a.active {display:none;} #banner .banner .bx-controls-auto .bx-start{background:url(../img/ico_m_play.svg) center no-repeat; background-size:23px;} #banner .banner .bx-controls-auto .bx-stop{background:url(../img/ico_stop.png) center no-repeat;} /* #footer */ #footer {width:100%; padding:50px 0; background-color:#232733;} #footer .footer_inner {position:relative; width:94%; margin:0 auto; color:#fff;} #footer .f_link li {display:inline-block;} #footer .f_link li + li {margin-left:36px;} #footer .f_link li a {font-size:17px; font-weight:600; color:#999c9f;} #footer .f_link li a:hover {color:#fff !important;} #footer .f_link li a.privacy {color:#cbcfd3;} #footer .f_info {margin-top:30px;} #footer .f_info * {font-style:normal; font-size:16px; font-weight:600; letter-spacing:0;} #footer .f_info address {color:#b9bdc1; margin-bottom:5px;} #footer .f_info address span + span {margin-left:50px;} #footer .f_info cite {color:#999c9f;} #footer .f_sns {position:absolute; right:0; top:-20px; display:flex; gap:0 10px;} #footer .f_sns li {width:44px; height:44px;} #footer .f_sns li a {display:block; height:100%; font-size:0; background-size:100% !important; border-radius:12px;} #footer .f_sns li a:hover {background-color:rgba(255,255,255,0.2) !important;} #footer .f_sns li:nth-child(1) a {background:rgba(255,255,255,0.1) url(../img/icon_instargram.png) 0 0 no-repeat;} #footer .f_sns li:nth-child(2) a {background:rgba(255,255,255,0.1) url(../img/icon_blog.png) 0 0 no-repeat;} #footer .f_sns li:nth-child(3) a {background:rgba(255,255,255,0.1) url(../img/icon_kakao.png) 0 0 no-repeat;} #footer .f_sns li:nth-child(4) a {background:rgba(255,255,255,0.1) url(../img/icon_youtube.png) 0 0 no-repeat;} #footer fieldset{position:absolute; right:0; top:34px} #footer select{padding:8px;width:170px;font-size:14px;color:#333;font-weight:normal;background:#676767;color:#eaeaea;border-radius:0} #footer select option {background:#fff; color:#555; font-size:13px} #footer button{position:relative;padding:0 10px;height:34px;font-size:10px;cursor:pointer;font-family:Arial, Helvetica, sans-serif;color:#eaeaea;background:#676767;vertical-align: top;} /**/ #mCard2 {display:none;} /**/ #contain{} #contain .sub_visual {overflow:hidden; width:100%; height:280px; background-color:#f9f3e7; border-bottom:1px #f2f2f2 solid;} #contain .sub_visual > div {position:relative; display:flex; flex-wrap:wrap; align-content:center; vertical-align:middle; position:relative; width:100%; max-width:1440px; height:100%; margin:0 auto; padding-left:2%;} #contain .sub_visual > div:after {position:absolute; top:0; right:0; width:676px; height:222px; background-size:100%; z-index:1; content:'';} #contain .sub_visual h2 {width:100%; margin-top:-60px; font-size:40px; color:#3a3a3a;} .visual_intro > div:after {background:url(../img/visual_intro.png) right bottom no-repeat;} .visual_toylib > div:after {background:url(../img/visual_toylib.png) right bottom no-repeat;} .visual_plays > div:after {background:url(../img/visual_plays.png) right bottom no-repeat;} .visual_program > div:after {background:url(../img/visual_program.png) right bottom no-repeat;} .visual_onedu > div:after {background:url(../img/visual_onedu.png) right bottom no-repeat;} .visual_info > div:after {background:url(../img/visual_info.png) right bottom no-repeat;} .visual_community > div:after {background:url(../img/visual_community.png) right bottom no-repeat;} .visual_etc > div:after {background:url(../img/visual_etc.png) right bottom no-repeat;} .visual_member > div:after {background:url(../img/visual_etc.png) right bottom no-repeat;} .visual_mypage > div:after {background:url(../img/visual_etc.png) right bottom no-repeat;} /**/ #contain .sub_visual .locator {} #contain .sub_visual .locator .path * {font-size:16px;font-weight:400;color:#333} #contain .sub_visual .locator .path li {position:relative; display:inline-block; padding-right:25px;} #contain .sub_visual .locator .path li + li {margin-left:10px;} #contain .sub_visual .locator .path li:last-child {padding-right:0;} #contain .sub_visual .locator .path li:last-child:after {display:none;} #contain .sub_visual .locator .path li button {border:0; padding:0; color:#333; letter-spacing:-0.5px; vertical-align:middle;} #contain .sub_visual .locator .path li:after {content:''; display:inline-block; position:absolute; top:calc(50% - 2px); right:4px; width:8px; height:8px; border-top:2px solid #797979; border-right:2px solid #797979; box-sizing:border-box; transform: rotate(45deg);} #contain .sub_visual .locator .path li.sel button {color:#000; font-weight:600;} #contain .sub_visual .locator .path li.home {text-transform:uppercase; letter-spacing: 0;} #contain .sub_visual .locator .path li.home a {display:inline-block; width:20px; height:20px; background:no-repeat center / contain; background-image: url(../img/icon_home.svg); font-size:0;} #contain .vepth .navi {display:none !important} #contain .datelist{line-height:20px;text-align:center} #contain .datelist strong{padding:0 10px;font-size:20px} #contain .datelist a{display:none} #contain .sub_visual i.img {position:absolute;z-index:2;top:-20px;right:0;width: 400px;height: 122px;background:url(../img/v1.png) no-repeat 100%;transition:all 0.5s cubic-bezier(0.785, 0.135, 0.150, 0.860);animation-duration: 0s;animation-name: v_img;} /**/ #contain .contain {position:relative; margin:-60px auto 70px; max-width:1440px; width:96%;} /**/ #aside {width:100%; margin-bottom:70px;} #aside:has(li.sel .side3m) {margin-bottom:130px;} #aside > div {display:flex; box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.04); border-radius: 20px;} #aside div .home {position:relative; display:inline-block; width:60px; height:60px; font-size:0; background-color:#ff8363; border-radius:20px 0 0 0;} #aside div .home:before {content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:21px; height:21px; background:url(../img/icon_home_f.svg) 0 0 no-repeat;} #aside div > ul {display:flex; width:calc(100% - 60px); background-color:#fff; border-radius:0 20px 0 0; border-bottom:1px #f2f2f2 solid;} #aside div > ul > li {} #aside ul > li > a {display:block; padding:0 30px; line-height:60px; font-size:18px; font-weight:600; color:#333; transition:all 0s;} #aside ul > li > a img {padding:0 0 0 5px;vertical-align:middle} #aside ul > li > a:hover {color:#f79220; box-sizing: border-box;} #aside ul > li.sel {border-color:#f79220; /*border-bottom: 2px solid transparent; border-image: linear-gradient(150deg, #37ac7c, #f8c327); border-image-slice: 1;*/} #aside ul > li.sel > a {position:relative; color:#f79220; transition:all 0s;} #aside ul > li.sel > a:after {content:''; position:absolute; right:0; bottom:0; width:100%; height:3px; background-color:#f79220; border-radius:3px; transition-duration: .3s;} #aside ul > li ul {display:none; width:100%; padding:0 20px 0 90px; background-color:#f7f7f7; border:1px #e9e9e9 solid; border-radius:0 0 20px 20px;} #aside ul > li.sel ul {position:absolute; left:0; display:block;} #aside ul > li li {display:inline-block; margin-right:40px;} #aside ul > li li a {display:block; line-height:58px; font-size:17px; height:auto; padding:0; margin:0; color:#8f908f;} #aside ul > li li a.sel {color:#f79220;} #aside ul > li li a.sel:before {background-color:#f79220;} /**/ #aside .sub_quick { overflow:hidden; padding:16px 4px;} #aside .sub_quick a { float:left; width:33.3%; display:block; padding:68px 0 5px 0; background:url(../img/sub_quick01.png) no-repeat center top; font-size:13px; text-align:center; } #aside .sub_quick a.a02 { background:url(../img/sub_quick02.png) no-repeat center top;} #aside .sub_quick a.a03 { background:url(../img/sub_quick03.png) no-repeat center top;} #aside .sub_quick a:hover { opacity:.8;} /**/ #design {position:relative; width:100%; min-height:650px;} #design #content , #design #program {padding-bottom:40px; letter-spacing:0;} #design .sub_head {display:none; position:relative; padding-top:35px; padding-bottom:25px; margin-bottom:50px; z-index:1; border-bottom:2px solid #333;} #design .sub_head h2 {padding:0; font-size:36px; font-weight:700; 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 .sub_head p {font-size:16px; color:#626262;} #design .sb_quick {position:absolute; left:-20px; top:1px; z-index:10; height:48px;border-left:1px solid #e2e2e2;} #design .sb_quick li {float:left;border-right:1px solid #e2e2e2;background:#fff;} #design .sb_quick li > a { display:block; width:46px; height:48px; line-height:48px !important; text-align:center; } #design .sb_quick li > a > i { font-size:24px; color:#888;} #design .sb_quick li.no02 > div { position:absolute;overflow:hidden; left:47px; top:48px;width:46px; display:none; box-shadow: 2px 2px 2px rgba(0,0,0,0.3)} #design .sb_quick li.no02 > div a { display:block;float:left; width:46px; height:45px;border-top:1px solid #333;color:#fff;font-weight:bold;font-size:17px; background:#444; text-align:center; line-height:46px !important;transition:0.5s;} #design .sb_quick li.no02 > div a span {text-indent:-9999px !important; font-size:0;} #design .sb_quick li.no02 > a.on { background-color:#009893; transition: 0.5s;} #design .sb_quick li.no02 > a.on i {color:#fff;} #design .sb_quick li.no02 > div a * {color:#fff !important; line-height:45px !important;} #design .sb_quick li.no02 > div a.fb:hover {background:#4d62a0; transition:0.5s;} #design .sb_quick li.no02 > div a.tw:hover {background:#11ace6; transition:0.5s;} #design .sb_quick li.no02 > div a.blog:hover {background:#00c905; transition:0.5s;} /**/ #design #tabmenu {margin-bottom:30px;} #design #tabmenu ul {display:table; flex-wrap:wrap; width:100%; overflow:hidden; box-sizing:border-box;} #design #tabmenu ul li {display:table-cell; height:62px; text-align:center;} #design #tabmenu ul li + li a {border-left:0;} #design #tabmenu ul li:first-child a {border-radius:20px 0 0 0;} #design #tabmenu ul li:last-child a {border-radius:0 0 20px 0;} #design #tabmenu ul li a {display:block; padding:15px 30px; font-size:20px; font-weight:600; color:#555; background-color:#fff; border:1px solid #e2e1e1; box-sizing:border-box;} #design #tabmenu ul li.on a {color:#fff; background-color:#ff8363; border-color:#ff8363; box-sizing:border-box;} #design #tabmenu ul li a.sel {color:#fff; background-color:#ff8363; border-color:#ff8363; box-sizing:border-box;} /**/ #content h1 {margin-bottom: 0;padding: 0 0 10px 28px;font-size: 20px;line-height: 1.2em;font-weight: 600;color:#000;background: url(../img/h1_bullet.gif) no-repeat 0 2px;} h3.on_mark {font-size: 20px !important;color:#333;padding: 0 0 0 25px !important;margin-bottom:10px;background: url(../img/h3_bullet.png) no-repeat 0 50%;letter-spacing: -1px;} /**/ /**/ #blind{position:absolute;z-index:99998;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:260px;height:100%;background:#fff; overflow-y:scroll;} #dkleft .lefttit {position:fixed; width:260px; padding:15px 25px; color:#fff; background-color:#ff8363; z-index: 99999;} #dkleft .lefttit .mn-tit {font-size:17px; font-weight:600; padding-bottom:10px; border-bottom: 1px solid rgba(255, 255, 255, .2);} #dkleft .lefttit > button {display:none;position:relative;font-size:14px;color:red;border:0;background:transparent} #dkleft .lefttit i {display:none;padding:5px 0 0 0;height:25px;font-size:20px;color:red} #dkleft .lefttit .members_nav {margin-top:10px;} #dkleft .lefttit .members_nav button, #dkleft .lefttit .members_nav a {display:inline-block; margin-right:30px; font-size:16px; font-weight:600; vertical-align:middle; cursor:pointer;} #dkleft .lefttit .members_nav button:hover, #dkleft .lefttit .members_nav a:hover {text-decoration:underline;} #dkleft .select {margin-top:100px;} #dkleft .select .join{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 .join i{padding:0 7px 0 0;font-size:24px;color:#333} #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 i{display:inline-block;position:relative;top:5px;padding:0 7px 0 0;font-size:24px;color:#333} #dkleft .depth1{display:block;position:relative;padding:0 25px;line-height:66px;font-size:18px;font-weight:500;color:#333;border-bottom:1px solid #ddd;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s;cursor:pointer;} #dkleft .depth1:after {content:''; display:block; width:10px; height:10px; position:absolute; top:21px; left:inherit; right:25px; background:none; border:2px solid #333; transform:rotate(45deg); border-top:0; border-left:0; transition:0.5s;} #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 {color:#ff8363;border-bottom:1px solid #ddd} #dkleft .depth1.sel:after {transform:rotate(225deg) translateY(-50%);} #dkleft .depth1 i {display:none;} #dkleft .depth2{display:none; padding:10px 25px; background:#f6f6f6; border-bottom:1px solid #ddd} #dkleft .depth2 a{display:block;line-height:40px;font-size:16px;color:#555; text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #dkleft .m_login{width:100%;border-bottom:1px solid #e2e2e2;height:60px;} #dkleft .m_login ul{width:100%;} #dkleft .m_login li{float:left;width:50%;text-align:center;padding:20px 0px;} #closeleft{position:absolute;z-index:9999999;left:-50px;top:12px;display:block;font-size:26px;font-family:Linearicons-Free;speak:none;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; cursor:pointer;} #closeleft:before{content:"\e870";font-size:26px;} #gotop{position:fixed;z-index:90000;bottom:20px;right:20px;display:none} #gotop a{display:block;width:40px;height:40px;padding:20px 0 0 0;font-size:10px;font-weight:800;text-align:center;color:#fff;background:rgba(0,0,0,0.3) url(../img/gotop.png) no-repeat 48% 28%;border-radius:50px;overflow:hidden} } @media all and (max-width: 940px) { #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} #wrap {min-width:320px; overflow-x:hidden;} /**/ #topWrap {border-bottom: 1px solid #ededed;} #topWrap .top_wrap {height: 40px;} #topWrap .top_wrap ul {float: right;margin: 0;} #topWrap .top_wrap ul li {float: left;} #topWrap .top_wrap ul li a {padding: 0 12px;font-size: 14px;line-height: 40px;text-transform: uppercase;} #header{position:relative; background:#fff} #header .header{height: 70px;} #header ul.right_btn { display:none;} #header ul.right_btn li { margin-left:1px;} #header .header h1 {text-align:center; padding-top:13px;} #header .header h1 a {display:block; margin:0 auto;} #header .header h1 img {width:100%; max-width:205px;} #header .header .btn-menu {position:absolute; top:0; left:0; width:70px; height:70px; display:flex; align-items:center; justify-content:center;} #header .header .line_box {width:22px; height:19px;} #header .header .line_box span {float:right; display:block; margin:0 auto 5px; width:100%; height:3px; background:#000; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;} #header .header .line_box span:nth-child(3) {position:relative; width:15px; float:left;} #header .header .line_box span:nth-child(3):after {content:''; position:absolute; right:-7px; bottom:0; display:inline-block; width:3px; height:3px; background-color:var(--mainColor);} #header ul.right_info {display:none;} #header .header button.btn-page{top:10px;right:0px;display:block;height:auto;line-height:14px;font-size:11px;font-family:'Roboto';border:0;background:transparent} #header .header button.btn-page i{display:block !important;padding:5px 0 0 0;height:20px;font-size:18px !important; } #header .header .lib{position:absolute;top:0;width:100%;height:25px;line-height:25px;background:#014fbb} #header .header .lib ul{overflow:hidden} #header .header .lib li{float:left;width:33.33%} #header .header .lib li a{display:block;font-size:11px;text-align:center;color:rgba(255,255,255,0.7)} #header .header .lnb{display:none} /**/ #gnb{display:none} /**/ #menu{position:absolute !important;z-index:10;top:-2px;right:0} #menu a{display:block;width:46px;height:46px;background:url(../img/ico_menuw.png) no-repeat 100% 50%;text-indent:-9999em;overflow:hidden} #menu a.sel{background:url(../img/ddea/ico_menu.png) no-repeat 100% 50%} } @media all and (max-width: 1024px) { /* section1 */ #section1 {width:100%; padding:50px 0 30px; background:#fff9ed url(../img/bg_visual.jpg) center top no-repeat;} #section1 .section_inner {width:94%; max-width:1680px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; flex-direction:column;} #section1 .mpopup {position:relative; width:100%; order:2;} #section1 .mpopup h2 {color:#ec501f;} #section1 .zone_wp .slider {max-width:820px; margin:0 auto; border-radius:20px; overflow:hidden;} #section1 .zone_wp .slider li {border-radius:5px;} #section1 .zone_wp .slider li a {display:block;width:100%; height:100%; max-height:500px; border-radius:20px; overflow:hidden;} #section1 .zone_wp .slider li img {width:100%; height:auto; max-height:500px;} #section1 .zone_wp .slick-dots {display:flex; justify-content:flex-end; padding-right:30px; margin-top:10px; cursor:pointer;} #section1 .zone_wp .slick-dots li {margin-left:5px; width:15px; height:15px; border:2px solid #3a718e; border-radius:50px; background:transparent; text-indent:-9999px} #section1 .zone_wp .slick-dots li.slick-active {background:#3a718e;} #section1 .zone_wp .slick-slide {margin:0 10px;} #section1 .zone_wp .slick-list {margin:0 -10px;} #section1 .zone_wp .controls {position:absolute; bottom:-25px; left:calc(50% - 120px); display:flex; align-items:center; padding:17px 24px; color:#fefefe; line-height:0; border-radius:30px; background-color:#51555d;} #section1 .zone_wp .controls h3 {font-size:14px; font-weight:800;} #section1 .zone_wp .controls .slider_dots {display:flex; align-items:center; margin:0 20px; font-size:15px; font-family:var(--fontSubSet); font-weight:700;} #section1 .zone_wp .controls .slider_dots strong {color:#f8c327; font-weight:700;} #section1 .zone_wp .controls .slider_dots em {margin:0 7px;} #section1 .zone_wp .ctrl_arrow .slick-arrow {position:absolute; top:calc(50% - 26px); width:54px; height:54px; border:0; font-size:0; cursor:pointer; border-radius:50%; background-color:#fff; box-shadow:18px 28px 50px 0px rgba(43, 63, 122, 0.1); transition: background-color 250ms ease-in-out;} #section1 .zone_wp .ctrl_arrow .slick-arrow:hover {background-color:#4d4d4d;} #section1 .zone_wp .ctrl_arrow .slick-prev {left:0;} #section1 .zone_wp .ctrl_arrow .slick-next {right:0;} #section1 .zone_wp .ctrl_arrow button:before {content:''; display:block; width:100%; height:100%; background-size:70% !important;} #section1 .zone_wp .ctrl_arrow .slick-prev:before {background:url(../img/ico_arrow_prev.svg) center no-repeat;} #section1 .zone_wp .ctrl_arrow .slick-next:before {background:url(../img/ico_arrow_next.svg) center no-repeat;} #section1 .zone_wp .ctrl_arrow .slick-prev:hover:before {background:url(../img/ico_arrow_w_prev.svg) center no-repeat;} #section1 .zone_wp .ctrl_arrow .slick-next:hover:before {background:url(../img/ico_arrow_w_next.svg) center no-repeat;} #section1 .zone_wp .controls button.slider_btn {display:inline-block; width:20px; height:20px; padding:0; vertical-align:middle; cursor:pointer; background-color:#3c414b; border-radius:20px; font-size:0; text-indent:-9999px;} #section1 .zone_wp .controls button.slider_btn:before {content:''; display:block; width:100%; height:100%;} #section1 .zone_wp .controls button.slider_btn.stop:before {background:url(../img/ico_m_w_stop.png) center no-repeat; background-size:7px;} #section1 .zone_wp .controls button.slider_btn.play:before {background:url(../img/ico_m_w_play.svg) center no-repeat; background-size:15px;} #section1 .right_group {width:100%; max-width:578px; margin-bottom:50px; text-align:center; order:1;} .mainSlogan {width:80%; max-width:393px; margin:0 auto;} .yuga_link {display:flex; flex-wrap:wrap; gap:5px; width:90%; margin:35px auto;} .yuga_link li {width:calc(50% - 2.5px); border-radius:10px;} .yuga_link li a {position:relative; display:flex; align-items:center; padding:13px 20px; font-size:18px; font-weight:600; color:#fff; text-align:left;} .yuga_link li a:before {content:''; display:inline-block; width:21px; height:21px; margin-right:10px; transition: transform 250ms ease-in-out;} .yuga_link li a:hover:before {transform: translateX(4px);} .yuga_link li a:after {content:''; position:absolute; top:calc(50% - 10px); right:15px; display:inline-block; width:21px; height:21px; background:url(../img/icon_yuga.png) 0 0 no-repeat;} .yuga_link li:nth-child(1) {background-color:#f8c327;} .yuga_link li:nth-child(1) a:before {background:url(../img/yuga_link1.svg) 0 0 no-repeat;} .yuga_link li:nth-child(2) {background-color:#579bfe;} .yuga_link li:nth-child(2) a:before {background:url(../img/yuga_link2.svg) 0 0 no-repeat;} .yuga_link li:nth-child(3) {background-color:#37ac7c;} .yuga_link li:nth-child(3) a:before {background:url(../img/yuga_link3.svg) 0 0 no-repeat;} .yuga_link li:nth-child(4) {background-color:#9577d9;} .yuga_link li:nth-child(4) a:before {background:url(../img/yuga_link4.svg) 0 0 no-repeat;} #section1 .search_area fieldset label {display:none;} #section1 .search_area {width:90%; margin:0 auto;} #section1 .search_area .input_wp {position:relative; text-align:left;} #section1 .search_area .input_wp input {width:calc(100% - 30px); height:65px; padding:0 30px; font-size:20px; font-weight:500; color:#333; border:5px #f79220 solid; border-radius:25px; box-shadow: 4px 0 15px 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:40px 40px 15px 40px; background-color:#f5942e; background-image:url(../img/ico_m_search.svg);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 29px;text-indent: -9999px;} #section1 .direct {width:100%; margin-top:60px; z-index:1; order:3;} #section1 .direct h2 {position:relative; margin-bottom:35px; color:#51555d; font-size:36px; font-weight:800;} #section1 .direct h2:after {content:''; position:absolute; top:34px; right:0; width:60%; height:1px; background-color:#51555d; z-index:0;} #section1 .direct h2 strong {position:relative; color:var(--mainColor); padding-right:10px; background-color:#fff9ed; z-index:1;} #section1 .direct h2 strong:after {content:''; display:inline-block; width:19px; height:20px; margin-left:8px; background:url(../img/icon_heart.svg) 0 0 no-repeat;} #section1 .direct ul {display:flex; justify-content:space-between; gap:0 20px;} #section1 .direct li {width:calc(100% / 5);} #section1 .direct li a {display:flex; flex-wrap:wrap; justify-content:center; position:relative; padding:20px 0; transition:all 0.3s; background-color:#fff; border-radius:20px; box-shadow:2px 0 10px rgba(0, 0, 0, 0.1);} #section1 .direct li strong {display:block; width:100%; height:60px; transition:all 0.3s} #section1 .direct li span{display:block; margin-top:10px; text-align:center; font-size:17px; font-weight:600; color:#000; transition:all 0.3s; letter-spacing:-1px} #section1 .direct li.bn1 a strong{background:url(../img/icon_direct1.svg) no-repeat center center;} #section1 .direct li.bn2 a strong{background:url(../img/icon_direct2.svg) no-repeat center center;} #section1 .direct li.bn3 a strong{background:url(../img/icon_direct3.svg) no-repeat center center; background-size:auto 53px;} #section1 .direct li.bn4 a strong{background:url(../img/icon_direct4.svg) no-repeat center center; background-size:auto 65px;} #section1 .direct li.bn5 a strong{background:url(../img/icon_direct5.svg) no-repeat center center;} #section1 .direct li a:hover{transition:all 0.3s} #section1 .direct li a:hover strong { -webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);} #section1 .direct li a:hover span {} #section1 .center_info {width:100%; margin-top:40px; padding:20px 15px; background-color:#fff; border-radius:30px; border:1px #dfdfdf solid; order:4;} #section1 .center_info .lib_tabs {display:flex; gap:0 6px; position:relative; margin-bottom:23px;} #section1 .center_info .lib_tabs > a {position:relative; width:calc(100% / 3); padding:7px 20px; font-size:18px; font-weight:600; color:#777; text-align:center; border-radius:10px; border:1px #eee solid;} #section1 .center_info .lib_tabs > a.tab_on {color:#fff; border:0;} #section1 .center_info .lib_tabs > a:nth-child(1).tab_on {background-color:var(--libColor1);} #section1 .center_info .lib_tabs > a:nth-child(2).tab_on {background-color:var(--libColor2);} #section1 .center_info .lib_tabs > a:nth-child(3).tab_on {background-color:var(--libColor3);} #section1 .center_info .lib_content {min-height:100px;} #section1 .center_info .lib_content h4 {display:none;} #section1 .center_info .lib_content > div {display:none;} #section1 .center_info .lib_content > div.tab_on {display:flex; align-items:center; gap:0 25px;} #section1 .center_info .lib_content > div > div p {font-size:16px; font-weight:300;} #section1 .center_info .lib_content > div .lib_img {display:none; border-radius:10px; overflow:hidden; line-height:0; max-width:194px;} #section1 .center_info .lib_content > div .lib_time {} #section1 .center_info .lib_content > div .lib_time .title {display:none;} #section1 .center_info .lib_content > div .lib_time li {position:relative; padding-left:22px; font-size:15px; font-weight:500;} #section1 .center_info .lib_content > div .lib_time li + li {margin-top: 5px;} #section1 .center_info .lib_content > div .lib_time li span {display:inline-block; color:var(--mainColor); font-weight:600; margin-right:4px;} #section1 .center_info .lib_content > div .lib_time li span:before {content:''; position:absolute; top:2px; left:0; width:15px; height:16px; display:inline-block;} #section1 .center_info .lib_content > div .lib_time li:nth-child(1) span:before {background:url(../img/ico_address.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li:nth-child(2) span:before {background:url(../img/ico_call.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li:nth-child(3) span:before {background:url(../img/ico_closed.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li:nth-child(4) span:before {background:url(../img/ico_time.svg) center no-repeat;} #section1 .center_info .lib_content > div .lib_time li dd {display:inline-block; margin-left:3px; vertical-align:middle; word-break: break-all; overflow-wrap: break-word;} /* section2 */ #section2 {position:relative; width:100%;} #section2 .section_inner {width:100%; padding:50px 0 50px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;} /* 공지사항 */ #section2 .mnotice {position:relative; float:left; width:94%; margin:0 auto;} #section2 h2 {position:relative; display:inline-block; margin-bottom:30px; font-size:36px; font-weight:800;} #section2 h2:after {content:''; position:absolute; top:-7px; right:-15px;display:inline-block; width:15px; height:15px; background-color:var(--mainColor); border-radius:15px;} #section2 .mnotice .board_tabs {display:flex; margin-bottom:15px;} #section2 .mnotice .board_tabs li {position:relative; display:inline-block; font-size:20px; font-weight:700; color:#333; margin-right:30px;} #section2 .mnotice .board_tabs li a {display:flex; padding:10px; align-items:center; padding:5px 10px;} #section2 .mnotice .board_tabs li.tab_on {position:relative; border-radius:30px;} #section2 .mnotice .board_tabs li:nth-child(1).tab_on {color:var(--libColor0);} #section2 .mnotice .board_tabs li:nth-child(2).tab_on {color:var(--libColor1);} #section2 .mnotice .board_tabs li:nth-child(3).tab_on {color:var(--libColor2);} #section2 .mnotice .board_tabs li:nth-child(4).tab_on {color:var(--libColor3);} #section2 .mnotice .board_tabs li.tab_on a:before {content:''; position:absolute; left:0; bottom:-16px; display:inline-block; width:100%; height:3px; vertical-align:middle; z-index:1;} #section2 .mnotice .board_tabs li:nth-child(1).tab_on a:before {background-color:var(--libColor0);} #section2 .mnotice .board_tabs li:nth-child(2).tab_on a:before {background-color:var(--libColor1);} #section2 .mnotice .board_tabs li:nth-child(3).tab_on a:before {background-color:var(--libColor2);} #section2 .mnotice .board_tabs li:nth-child(4).tab_on a:before {background-color:var(--libColor3);} #section2 .mnotice .board_tabs li:after {content:''; display:block; position:absolute; top:20px; right:-15px; width:5px; height:5px; border-radius:50%; background-color:#d1d1d1;} #section2 .mnotice .board_tabs li:last-child:after {display:none;} #section2 .mnotice .board_content > div {display:none;} #section2 .mnotice .board_content > div.tab_on {display:block;} #section2 .mnotice .board_content > div ul {border-top:1px #000 solid;} #section2 .mnotice .board_content > div ul li {padding:20px 0; border-bottom:1px #ddd solid;} #section2 .mnotice .board_content > div ul li a {position:relative; display:flex;} #section2 .mnotice .board_content > div ul li a:hover strong {color:#437dea;} #section2 .mnotice .board_content > div ul li span.date {font-family:var(--fontSubSet); font-size:14px; font-weight:700; color:#666; margin-left:20px;} #section2 .mnotice .board_content > div ul li span.kind {display:inline-block; width:55px; height:29px; line-height:26px; margin-right:15px; overflow:hidden; font-size:16px; font-weight:600; color:#fff; text-align:center; border:1px #fff solid; border-radius:30px; vertical-align:middle;} #section2 .mnotice .board_content > div ul li span.kind.lib0 {background-color:var(--libColor0);} #section2 .mnotice .board_content > div ul li span.kind.lib1 {background-color:var(--libColor1);} #section2 .mnotice .board_content > div ul li span.kind.lib2 {background-color:var(--libColor2);} #section2 .mnotice .board_content > div ul li span.kind.lib3 {background-color:var(--libColor3);} #section2 .mnotice .board_content > div ul li strong {width:calc(100% - 150px); font-size:17px; font-weight:600; color:#1a1a1a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /*display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;*/ vertical-align:middle;} #section2 .more_btn {position:absolute; top:5px; right:0; display:flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:0; background-color:#363637; border-radius:50%;} #section2 .more_btn i.i_plus {position:relative; display:flex; justify-content:center; align-items:center; width:15px; height:15px;} #section2 .more_btn i.i_plus:before {width:14px; height:2px;} #section2 .more_btn i.i_plus:before, #section2 .more_btn i.i_plus:after {content:''; position:absolute; display:block; background-color:#fff; transition:all 0.3s ease;} #section2 .more_btn i.i_plus:after {width:2px; height:14px; transform:rotate(180deg);} #section2 .more_btn:hover i.i_plus:before, #section2 .more_btn:hover i.i_plus:after {transform:rotate(-180deg);} /* 행사일정 */ .mcalendar {position:relative; width:100%; margin-top:50px; padding:50px 3%; background-color:#f7f6fb;} .mcalendar:before {content:''; position:absolute; top:0; right:0; width:100%; height:100%; background-color:#f7f6fb; z-index:-1; border-radius:0 0 0 150px;} .mcalendar .calendar_wp {position:relative; display:flex; flex-wrap:wrap;} .mcalendar .calendar_wp .more_btn {top:-80px !important;} .mcalendar .calendar_wp > div {background-color:#fff; border-radius:30px; box-shadow:15px 0 29px rgba(0, 0, 0, 0.1);} .mcalendar .calendar_wp .calendar {width:100%; padding:25px 30px; z-index:2;} .mcalendar .calendar_wp .c_content {width:100%; padding:30px; z-index:1;} .mcalendar .calendar_wp .c_content ul {height:170px; overflow-y:auto;} .mcalendar .calendar_wp .c_content ul::-webkit-scrollbar {width:5px; background-color:#f0f4ff; border-radius:10px;} .mcalendar .calendar_wp .c_content ul::-webkit-scrollbar-thumb {background-color:#3b79dc; border-radius:10px;} .mcalendar .calendar_wp .c_content ul li {display:flex; margin-top:15px; padding-bottom:15px; border-bottom:1px #e5e5e5 dashed;} .mcalendar .calendar_wp .c_content ul li:first-child {margin-top:0;} .mcalendar .calendar_wp .c_content ul li:last-child {border-bottom:0;} .mcalendar .calendar_wp .c_content ul li .date {display:flex; justify-content:center; align-items:center; line-height:18px; width:70px; height:62px; padding:5px; margin-right:12px; font-size:15px; font-weight:800; color:#3b79dc; border:1px #3b79dc solid; border-radius:10px;} .mcalendar .calendar_wp .c_content ul li p {font-size:15px; line-height:20px;} .mcalendar .calendar_wp .c_content ul li p span {display:block; width:100%; margin-bottom:5px;} .mcalendar .calendar_wp .calendar_arrow {display:flex; justify-content:center; align-items:center;} .mcalendar .calendar_wp .calendar_arrow .calendar_arrow {display:inline-block; width:40px; height:40px; text-indent:-9999px; background-repeat:no-repeat; background-position:50% 50%;} .mcalendar .calendar_wp .calendar_arrow .calendar_arrow.prev {margin-right:30px;background-image: url(../img/ico_arrow_prev.png);} .mcalendar .calendar_wp .calendar_arrow .calendar_arrow.next {margin-left:30px;background-image: url(../img/ico_arrow_next.png);} .mcalendar .calendar_wp .calendar_arrow strong {font-size:26px; font-weight:700;} .mcalendar .calendar_wp .day table {width:100%; margin-top:15px;} .mcalendar .calendar_wp .day table th {padding:5px 2px; font-size:16px; font-weight:600; color:#191919;} .mcalendar .calendar_wp .day table td {position:relative; padding:2px 0; font-size:13px; font-weight:700; color:#191919; font-family:var(--fontSubSet); text-align:center; z-index:0;} .mcalendar .calendar_wp .day table td span {display: block;padding: 6px 2px;} .mcalendar .calendar_wp .day table td.holi1 span, .mcalendar .calendar_wp .day table td.holi2 span, .mcalendar .calendar_wp .day table td.event span {color: #fff;} .mcalendar .calendar_wp .day table td span::after {content: '';position: absolute;top: 50%;left: 50%;z-index: -1;width: 32px;height: 32px;border-radius: 50%;transform: translate(-50%, -50%);} .mcalendar .calendar_wp .day table td.holi1 span::after {background-color:#666;} .mcalendar .calendar_wp .day table td.holi2 span::after {background-color:#ff7f00;} .mcalendar .calendar_wp .day table td.event span::after {background-color:#007ff9;} .mcalendar .calendar_wp .day table td.today span::after {border: 2px dashed #000;} .mcalendar .calendar_wp .day table .sun {color:#de5a5a;} .mcalendar .calendar_wp .day table .sat {color:#007ff9;} .mcalendar .calendar_wp .cal_mark {display:flex;padding:16px 0 0;margin-top:20px;border-top:1px solid #e8e6e4;flex-wrap: wrap;gap: 10px;} .mcalendar .calendar_wp .cal_mark span {display:inline-flex; font-size:16px;font-weight:500; align-items:center;} .mcalendar .calendar_wp .cal_mark span + span {/*margin-left:30px;*/} .mcalendar .calendar_wp .cal_mark span::before {content: ''; width:12px; height:12px; margin-right:8px; border-radius:14px;} .mcalendar .calendar_wp .cal_mark span.holi1::before {background-color:#666;} .mcalendar .calendar_wp .cal_mark span.holi2::before {background-color:#ff7f00;} .mcalendar .calendar_wp .cal_mark span.rest::before {background-color:#666;} .mcalendar .calendar_wp .cal_mark span.event::before {background-color:#007ff9;} .mcalendar .calendar_wp .cal_mark span.today::before {width:10px; height:10px; border:2px dotted #000;} /* section3 */ #section3 {position:relative; padding:60px 0;} #section3 h2 {position:relative; display:inline-block; margin-bottom:40px; font-size:36px; font-weight:800; line-height:40px;} #section3 h2:after {content:''; position:absolute; top:-7px; right:-15px;display:inline-block; width:15px; height:15px; background-color:var(--mainColor); border-radius:15px;} #section3 .section_inner {width:94%; max-width:1680px; margin:0 auto; /*display:flex;flex-wrap:wrap; justify-content:space-between; align-items:center;*/} #section3 .left_group {width:100%;} #section3 .left_group h2 br {display:none;} #section3 .left_group:after {content:''; position:absolute; left:0; bottom:0; display:block; width:100%; height:100%; background:url(../img/bg_tab.png) right 0 no-repeat; z-index:-1; background-size:100%;} #section3 .left_group ul.culture_tabs {display:flex; flex-wrap:wrap; gap:0 5px; width:100%;} #section3 .left_group ul.culture_tabs li {min-width:170px; margin-bottom:5px;} #section3 .left_group ul.culture_tabs li a {display:flex; align-items:center; justify-content:space-between; padding:11px 20px; font-size:19px; font-weight:700; color:#222; background-color:#fff; border-radius:20px;} #section3 .left_group ul.culture_tabs li.tab_on a {background-color:var(--mainColor); color:#fff; border-radius:20px; box-shadow:0px 0 10px rgba(0, 0, 0, 0.2);} #section3 .left_group ul.culture_tabs li a:after {content:''; display:none; width:20px; height:20px; margin-left:5px; background:url(../img/bg_arrow_w.png) 0 0 no-repeat; background-size:100%;} #section3 .left_group ul.culture_tabs li.tab_on a:after {display:inline-block;} #section3 .culture_content {width:100%; margin-top:40px;} #section3 .culture_content:after {content:''; position:absolute; right:0; bottom:0; display:block; width:100%; height:60%; background-color:#fcf7f7; z-index:-2;} #section3 .culture_content > div {display:none;} #section3 .culture_content > div.tab_on {display:block;} #section3 .culture_content .slick-list {padding:15px 0; min-height:274;} #section3 .culture_content ul li {position:relative; margin:0 20px; background:#fff url(../img/icon_culture.png) 30px 30px no-repeat; transition: all ease .3s; border-radius:30px; box-shadow:0px 0 10px rgba(0, 0, 0, 0.1);} #section3 .culture_content ul li a {display:block; padding:75px 30px 30px;} #section3 .culture_content ul li:hover {box-shadow: 0 0 0 1px #3b79dc inset;} #section3 .culture_content ul li .spot {position:absolute; right:-15px; top:-15px; width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:30px 30px 30px 0; font-size:16px; font-weight:700; color:#fff;} #section3 .culture_content ul li .spot.ST01 {background-color:var(--libColor1);} #section3 .culture_content ul li .spot.ST02 {background-color:var(--libColor2);} #section3 .culture_content ul li .spot.ST03 {background-color:var(--libColor3);} #section3 .culture_content ul li .state {position:absolute; left:30px; top:22px;} #section3 .culture_content ul li .state .kind {display:flex; align-items:center; justify-content:center; min-width:80px; padding:0 10px; height:34px; font-size:16px; font-weight:600; border-radius:10px;} #section3 .culture_content ul li .state .kind.wait {background-color:#f5ac10; color: #fff;} #section3 .culture_content ul li .state .kind.ing {background-color:#379c00; color:#fff;} #section3 .culture_content ul li .state .kind.add {background-color:#f5ac10; color:#fff;} #section3 .culture_content ul li .state .kind.end {background-color:#efefef; color:#777;} #section3 .culture_content ul li .con {} #section3 .culture_content ul li .con .title {display:block; font-size:20px; line-height:26px; font-weight:600; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #section3 .culture_content ul li .con dl {display:flex; margin-bottom:5px; font-family:var(--fontSubSet); font-size:15px; font-weight:500;} #section3 .culture_content ul li .con strong + dl {margin-top:20px;} #section3 .culture_content ul li .con dl dt {color:#333; width:63px;} #section3 .culture_content ul li .con dl dd {color:#424242; margin-left:3px; width:calc(100% - 66px);} #section3 .culture_content ul li .con dl dd span {color:#3b79dc; letter-spacing:-1.5px;} #section3 .controls {display:flex; align-items:center; justify-content:flex-end; margin-top:30px;} #section3 .controls a {display:inline-block; width:52px; height:52px; margin-right:7px; border:2px #333 solid; border-radius:50%; text-indent:-9999px;} #section3 .controls .stop {display:none; background:url(../img/btn_stop.png) 50% no-repeat;} #section3 .controls .play {display:none; background:url(../img/btn_play.png) 50% no-repeat;} #section3 .controls .prev {background:url(../img/btn_prev.png) 50% no-repeat;} #section3 .controls .next {background:url(../img/btn_next.png) 50% no-repeat;} #section3 .controls .more {background:#333 url(../img/btn_more.png) 50% no-repeat;} .progress {display:block; width:calc(100% - 230px); height:3px; margin-right:30px; border-radius:10px; overflow:hidden; background-color:rgba(255,255,255,0.5); background-image: linear-gradient(to right, black, black); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .4s ease-in-out;} .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;} /* banner */ #banner {padding:25px 0; background:#fff; overflow:hidden; border-top:1px #ebebeb solid;} #banner .banner {position:relative; width:100%; max-width:1680px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} #banner .banner h3 {width:150px; font-size:0;} #banner .banner .bx-wrapper {width: calc(100% - 150px) !important; margin: 0 !important;} #banner .banner .bx-controls {position:absolute; top:12px; left:0; display:flex; justify-content:space-between; width:100px; line-height:0;} #banner .banner .bx-controls-direction a {display:inline-block; width:25px; height:25px; text-indent:-9999em;} #banner .banner .bx-controls-direction a.bx-prev {background:url(../img/ico_arrow_prev.svg) center no-repeat;} #banner .banner .bx-controls-direction a.bx-next {position:absolute; bottom:0; right:0; background:url(../img/ico_arrow_next.svg) center no-repeat;} #banner .banner .bx-controls-auto {position:absolute; top:0; left:calc(50% - 13px);} #banner .banner .bx-controls-auto a {display:block; position:relative; width:25px; height:25px; outline:0; text-indent:-9999em; z-index:1;} #banner .banner .bx-controls-auto a.active {display:none;} #banner .banner .bx-controls-auto .bx-start{background:url(../img/ico_m_play.svg) center no-repeat; background-size:23px;} #banner .banner .bx-controls-auto .bx-stop{background:url(../img/ico_stop.png) center no-repeat;} /* #footer */ #footer {width:100%; padding:30px 0; background-color:#232733;} #footer .footer_inner {position:relative; width:94%; margin:0 auto; color:#fff; text-align:center;} #footer .f_link li {display:inline-block;} #footer .f_link li + li {margin-left:12px;} #footer .f_link li a {font-size:16px; font-weight:600; color:#999c9f;} #footer .f_link li a:hover {color:#fff !important;} #footer .f_link li a.privacy {color:#cbcfd3;} #footer .f_info {margin-top:20px;} #footer .f_info * {font-style:normal; font-size:14px; font-weight:600; letter-spacing:0;} #footer .f_info address {color:#b9bdc1;} #footer .f_info address span {display:block; margin-top:2px;} #footer .f_info address span + span {display:inline-block;} #footer .f_info address span:last-child {margin-left:30px;} #footer .f_info cite {display:block; margin-top:20px; color:#999c9f;} #footer .f_sns {display:flex; justify-content:center; gap:0 10px; margin-top:30px;} #footer .f_sns li {width:44px; height:44px;} #footer .f_sns li a {display:block; height:100%; font-size:0; background-size:100% !important; border-radius:12px;} #footer .f_sns li a:hover {background-color:rgba(255,255,255,0.2) !important;} #footer .f_sns li:nth-child(1) a {background:rgba(255,255,255,0.1) url(../img/icon_instargram.png) 0 0 no-repeat;} #footer .f_sns li:nth-child(2) a {background:rgba(255,255,255,0.1) url(../img/icon_blog.png) 0 0 no-repeat;} #footer .f_sns li:nth-child(3) a {background:rgba(255,255,255,0.1) url(../img/icon_kakao.png) 0 0 no-repeat;} #footer .f_sns li:nth-child(4) a {background:rgba(255,255,255,0.1) url(../img/icon_youtube.png) 0 0 no-repeat;} #footer fieldset{position:absolute; right:0; top:34px} #footer select{padding:8px;width:170px;font-size:14px;color:#333;font-weight:normal;background:#676767;color:#eaeaea;border-radius:0} #footer select option {background:#fff; color:#555; font-size:13px} #footer button{position:relative;padding:0 10px;height:34px;font-size:10px;cursor:pointer;font-family:Arial, Helvetica, sans-serif;color:#eaeaea;background:#676767;vertical-align: top;} /**/ #mCard2 {display:none;} /**/ #contain{} #contain .sub_visual {overflow:hidden; width:100%; height:150px; background-color:#f9f3e7; border-bottom:1px #f2f2f2 solid;} #contain .sub_visual > div {position:relative; display:flex; flex-wrap:wrap; text-align:center; justify-content:center; align-content:center; vertical-align:middle; position:relative; width:100%; max-width:1440px; height:100%; margin:0 auto; padding-left:2%;} #contain .sub_visual h2 {width:100%; font-size:30px; color:#3a3a3a;} /**/ #contain .sub_visual .locator {} #contain .sub_visual .locator .path * {font-size:15px;font-weight:400;color:#333} #contain .sub_visual .locator .path li {position:relative; display:inline-block; padding-right:22px;} #contain .sub_visual .locator .path li + li {margin-left:5px;} #contain .sub_visual .locator .path li:last-child {padding-right:0;} #contain .sub_visual .locator .path li:last-child:after {display:none;} #contain .sub_visual .locator .path li button {border:0; padding:0; color:#333; letter-spacing:-0.5px; vertical-align:middle;} #contain .sub_visual .locator .path li:after {content:''; display:inline-block; position:absolute; top:calc(50% - 2px); right:4px; width:8px; height:8px; border-top:2px solid #797979; border-right:2px solid #797979; box-sizing:border-box; transform: rotate(45deg);} #contain .sub_visual .locator .path li.sel button {color:#000; font-weight:600;} #contain .sub_visual .locator .path li.home {text-transform:uppercase; letter-spacing: 0;} #contain .sub_visual .locator .path li.home a {display:inline-block; width:20px; height:20px; background:no-repeat center / contain; background-image: url(../img/icon_home.svg); font-size:0;} #contain .sub_visual .vepth .navi {display:none !important} #contain .sub_visual .datelist{line-height:20px;text-align:center} #contain .sub_visual .datelist strong{padding:0 10px;font-size:20px} #contain .sub_visual .datelist a{display:none} /**/ #contain .contain {position:relative; margin:0 auto 70px;} #design #content {width:94%; margin:60px auto;} #aside {display:none} #dkboard {width:94%; margin:30px auto 50px;} #program {width:94%; margin:30px auto 50px;} /**/ #design .sb_quick {position:absolute; right:12px; top:110px; z-index:200;} #design .sb_quick li {float:left;} #design .sb_quick li > a { display:block; width:34px; height:34px; background:#fff; border:1px solid #aaa; border-radius:36px; line-height:34px !important; text-align:center; } #design .sb_quick li > a > i { font-size:24px; color:#888;} #design .sb_quick li.no01 , #design .sb_quick li.no03 {display:none;} #design .sb_quick li.no02 > div { position:absolute;overflow:hidden; left:0px; top:44px;width:36px; display:none; box-shadow: 2px 2px 2px rgba(0,0,0,0.3)} #design .sb_quick li.no02 > div a { display:block;float:left; width:36px; height:35px;border-top:1px solid #333;color:#fff;font-weight:bold;font-size:17px; background:#444; text-align:center; line-height:36px !important;transition:0.5s;} #design .sb_quick li.no02 > div a span {text-indent:-9999px !important; font-size:0;} #design .sb_quick li.no02 > a.on { background-color:#009893; transition: 0.5s;} #design .sb_quick li.no02 > a.on i {color:#fff;} #design .sb_quick li.no02 > div a * {color:#fff !important; font-size:14px;line-height:35px !important;} #design .sb_quick li.no02 > div a.fb:hover {background:#4d62a0; transition:0.5s;} #design .sb_quick li.no02 > div a.tw:hover {background:#11ace6; transition:0.5s;} #design .sb_quick li.no02 > div a.blog:hover {background:#00c905; transition:0.5s;} /**/ #design .sub_head h1, #design .sub_head h2 {display:none;} #design .sub_head p {position:absolute; left:10px; top:90px;} #design .sub_head .locator {position:relative; z-index:2; background-color:#ff8363;} #design .sub_head .locator .path {display:flex;} #design .sub_head .locator .path *{font-size:16px;font-weight:500;color:#555} #design .sub_head .locator .path li{position:relative;width:50%;white-space:nowrap} #design .sub_head .locator .path li:before {width:1px; height:40px; content:''; display:block;position:absolute; right:0; top:0;} #design .sub_head .locator .path li:last-child{border-right:0;} #design .sub_head .locator .path li:nth-child(2) {display: none;} #design .sub_head .locator .path li a{display:block;padding:12px 20px;color:#555;} #design .sub_head .locator .path li button{display:block !important;width:100%;height:60px; padding:0 20px;color:#fff;text-align:left;background:#ff8363 url(../img/ico_path.png) no-repeat 95% 50%;white-space:nowrap;overflow:hidden} #design .sub_head .locator .path li button.sel{color:#fff;font-weight:700;} #design .sub_head .locator .path li.home{display:none} #design .vepth .navi{position:absolute;top:60px;left:0px;width:100%;border:1px solid #ff8363;border-top: 0;background:#fff} #design .vepth > div {display:none;} #design .vepth .navi div a{display:block;padding:20px;font-size:12px;color:#333;border-top:1px solid #eee;} #design .vepth .navi div a:hover, #design .vepth .navi div a.on{color:#fff;background:#fabe1f;} #design .sub_head i.img {position:absolute;z-index:2;bottom:0px;right:0px;width:100%;height:90px; background:url(../img/v1.png) no-repeat 98% 100%; background-size:auto 84px;transition:all 0.6s cubic-bezier(0.785, 0.135, 0.150, 0.860);animation-duration: 2s;animation-name: v_img_m;} /**/ #design #tabmenu {margin-bottom:30px;} #design #tabmenu ul {display:table; flex-wrap:wrap; width:100%; overflow:hidden; box-sizing:border-box;} #design #tabmenu ul li {display:table-cell; height:50px; text-align:center; width: calc(100% / 4);} #design #tabmenu ul li + li a {border-left:0;} #design #tabmenu ul li:first-child a {border-radius:20px 0 0 0;} #design #tabmenu ul li:last-child a {border-radius:0 0 20px 0;} #design #tabmenu ul li a {display:block; padding:13px 10px; font-size:17px; font-weight:600; color:#555; background-color:#fff; border:1px solid #e2e1e1; box-sizing:border-box;} #design #tabmenu ul li.on a {color:#fff; background-color:#ff8363; border-color:#ff8363; box-sizing:border-box;} #design #tabmenu ul li a.sel {color:#fff; background-color:#ff8363; border-color:#ff8363; box-sizing:border-box;} /**/ #design .sb_quick {position:absolute; right:12px; top:110px; z-index:200;} #design .sb_quick li {float:left;} #design .sb_quick li > a { display:block; width:34px; height:34px; background:#fff; border:1px solid #aaa; border-radius:36px; line-height:34px !important; text-align:center; } #design .sb_quick li > a > i { font-size:24px; color:#888;} #design .sb_quick li.no01 , #design .sb_quick li.no03 {display:none;} #design .sb_quick li.no02 > div { position:absolute;overflow:hidden; left:0px; top:44px;width:36px; display:none; box-shadow: 2px 2px 2px rgba(0,0,0,0.3)} #design .sb_quick li.no02 > div a { display:block;float:left; width:36px; height:35px;border-top:1px solid #333;color:#fff;font-weight:bold;font-size:17px; background:#444; text-align:center; line-height:36px !important;transition:0.5s;} #design .sb_quick li.no02 > div a span {text-indent:-9999px !important; font-size:0;} #design .sb_quick li.no02 > a.on { background-color:#009893; transition: 0.5s;} #design .sb_quick li.no02 > a.on i {color:#fff;} #design .sb_quick li.no02 > div a * {color:#fff !important; font-size:14px;line-height:35px !important;} #design .sb_quick li.no02 > div a.fb:hover {background:#4d62a0; transition:0.5s;} #design .sb_quick li.no02 > div a.tw:hover {background:#11ace6; transition:0.5s;} #design .sb_quick li.no02 > div a.blog:hover {background:#00c905; transition:0.5s;} /**/ #blind{position:absolute;z-index:99998;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:260px;height:100%;background:#fff; overflow-y:scroll;} #dkleft .lefttit {position:fixed; width:260px; padding:15px 25px; color:#fff; background-color:#ff8363; z-index: 99999;} #dkleft .lefttit .mn-tit {font-size:17px; font-weight:600; padding-bottom:10px; border-bottom: 1px solid rgba(255, 255, 255, .2);} #dkleft .lefttit > button {display:none;position:relative;font-size:14px;color:red;border:0;background:transparent} #dkleft .lefttit i {display:none;padding:5px 0 0 0;height:25px;font-size:20px;color:red} #dkleft .lefttit .members_nav {margin-top:10px;} #dkleft .lefttit .members_nav button, #dkleft .lefttit .members_nav a {display:inline-block; margin-right:30px; font-size:16px; font-weight:600; vertical-align:middle; cursor:pointer;} #dkleft .lefttit .members_nav button:hover, #dkleft .lefttit .members_nav a:hover {text-decoration:underline;} #dkleft .select {margin-top:100px;} #dkleft .select .join{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 .join i{padding:0 7px 0 0;font-size:24px;color:#333} #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 i{display:inline-block;position:relative;top:5px;padding:0 7px 0 0;font-size:24px;color:#333} #dkleft .depth1{display:block;position:relative;padding:0 25px;line-height:66px;font-size:18px;font-weight:500;color:#333;border-bottom:1px solid #ddd;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s;cursor:pointer;} #dkleft .depth1:after {content:''; display:block; width:10px; height:10px; position:absolute; top:21px; left:inherit; right:25px; background:none; border:2px solid #333; transform:rotate(45deg); border-top:0; border-left:0; transition:0.5s;} #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 {color:#ff8363;border-bottom:1px solid #ddd} #dkleft .depth1.sel:after {transform:rotate(225deg) translateY(-50%);} #dkleft .depth1 i {display:none;} #dkleft .depth2{display:none; padding:10px 25px; background:#f6f6f6; border-bottom:1px solid #ddd} #dkleft .depth2 a{display:block;line-height:40px;font-size:16px;color:#555; text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #dkleft .m_login{width:100%;border-bottom:1px solid #e2e2e2;height:60px;} #dkleft .m_login ul{width:100%;} #dkleft .m_login li{float:left;width:50%;text-align:center;padding:20px 0px;} #closeleft{position:absolute;z-index:9999999;left:-50px;top:12px;display:block;font-size:26px;font-family:Linearicons-Free;speak:none;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; cursor:pointer;} #closeleft:before{content:"\e870";font-size:26px;} #gotop{position:fixed;z-index:90000;bottom:20px;right:20px;display:none} #gotop a{display:block;width:40px;height:40px;padding:20px 0 0 0;font-size:10px;font-weight:800;text-align:center;color:#fff;background:rgba(0,0,0,0.3) url(../img/gotop.png) no-repeat 48% 28%;border-radius:50px;overflow:hidden} } @media (max-width: 768px) { #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: 50px;font-size: 18px;font-weight: 500;line-height: 50px;border-radius: 20px 0 0 0;background-color: #058849;color: #fff;border-radius: 20px 0 0 0;background-image: url(../img/arrow_lib_next.png);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;} #gotop{position:fixed;z-index:90000;bottom: 0px;right: 0px;display:none} #gotop a{height: 50px;border-radius: 0px;} } @media (max-width:640px) { #section1 .direct ul {gap:20px; flex-wrap:wrap;} #section1 .direct li {width:calc(50% - 10px);} /* section3 */ #section3 .left_group:after {content:''; position:absolute; left:0; bottom:0; display:block; width:100%; height:100%; background:url(../img/bg_tab.png) right 0 no-repeat; z-index:-1; background-size:100%;} #section3 .left_group ul.culture_tabs {display:flex; flex-wrap:wrap; gap:0 5px; width:100%;} #section3 .left_group ul.culture_tabs li {min-width:auto;} #section3 .left_group ul.culture_tabs li a {padding:11px 15px; font-size:16px;} #section3 .left_group ul.culture_tabs li.tab_on a {background-color:var(--mainColor); color:#fff; border-radius:20px; box-shadow:0px 0 10px rgba(0, 0, 0, 0.2);} #section3 .left_group ul.culture_tabs li a:after {width:17px; height:17px; margin-left:4px;} #section3 .culture_content {width:100%; margin-top:20px;} #section3 .controls {display:flex; align-items:center; justify-content:flex-end; margin-top:20px;} #section3 .controls a {display:inline-block; width:42px; height:42px; margin-right:7px; border:2px #333 solid; border-radius:50%; text-indent:-9999px;} .progress {width:calc(100% - 200px);} } @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:140px; opacity:0;} to {top:84px; opacity:1;} } @keyframes mv02 { from {top:100px;opacity:0;} to {top:55px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:96px; 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; } }