/*#fullpage .section {min-height: 920px;} #fullpage .fp-auto-height.fp-section, #fullpage .fp-auto-height .fp-slide, #fullpage .fp-auto-height .fp-tableCell {min-height: auto;}*/ #wait {text-align:center} #wait img {max-width: 100%;} /**/ #skipBtnWrap a {display: block;width: 1px;height: 0;line-height: 0;text-align: center;background: #333;color: #fff;} #skipBtnWrap a:focus, #skipBtnWrap a:hover, #skipBtnWrap a:active {width: 100%;height: 30px;line-height: 30px;} /**/ #poplayer{position:absolute;z-index:99999;top:120px;left:50%;margin:0 0 0 -280px;width:560px;height:595px;} #poplayer *{margin:0;padding:0;border:0} #poplayer img{display:block} #poplayer .todays{padding:2px 20px 8px 20px;text-align:right;background:#323232} #poplayer .todays a{font-size:14px;color:#fff} #poplayer area{cursor:pointer} /**/ #popupbar{position:relative;background:#0e6faf url(../img/popupbarbg.png) no-repeat 50% 50%;overflow:hidden;display:none} #popupbar .popupbar{max-height:117px !important;overflow:hidden} #popupbar .popupbar .slide h3{display:inline-block;margin:0;padding:0 20px 5px 0;font-size:26px;color:#fff;text-shadow:-1px -1px 2px rgba(0,0,0,0.2)} #popupbar .popupbar .slide .close{display:inline-block} #popupbar .popupbar .slide .close button{font-size:14px;font-weight:800;letter-spacing:-1px;color:#fff;border:0;background:none} #popupbar .popupbar img{display:block} #popupbar .bx-controls{position:absolute;z-index:100;bottom:3px;left:50%} #popupbar .bx-pager{float:left;display:block} #popupbar .bx-pager .bx-pager-item{display:inline;*zoom:1} #popupbar .bx-pager.bx-default-pager a{display:inline-block;margin-right:5px;width:12px;height:12px;border:2px solid #fff;background:transparent;border-radius:50px;text-indent:-9999px} #popupbar .bx-pager.bx-default-pager a.active{border:2px solid #00558b;background:#00558b} #popupbar .bx-prev{position:absolute;top:0px;right:80px;display:none;width:10px;height:19px;text-indent:-9999px;background:url(../img/banner_prev.png) no-repeat} #popupbar .bx-next{position:absolute;top:0px;right:20px;display:none;width:10px;height:19px;text-indent:-9999px;background:url(../img/banner_next.png) no-repeat} #popupbar i.b1{position:absolute;z-index:3;top:0px;left:0%;display:block;width:100%;height:5px;background:#00558b} #popupbar i.b2{position:absolute;z-index:4;top:0px;left:50%;margin:0 0 0 570px;display:block;width:100%;height:5px;background:#ffbd3f} #popupbar .holidays{padding-top:40px;text-align:center} #popupbar .opens{text-align:center} #popupbar .opens a{display:block;text-align:center} #popupbar .opens a img{display:block;margin:0 auto} /* 1300 - all */ @media all and (min-width: 1300px) { #divpop { display:none;} #mm-blocker{display:none} #popupWindow{position:absolute} #OpenLayer {position: absolute;top: 150px;left: 100px;z-index: 9999;background: #fff;padding: 10px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 14px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} #Wrap {overflow: hidden;width: 100%;} /* header */ #header {width: 100%;background-color: #fff;} #header.header_active {background-color: var(--colorNavy);} #header .header-top {background-color:#222;} #header .header-top .layout {height: 50px;width: 94%;max-width: 1520px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;color:#9f9f9f;} #header .header-top .h-left a:nth-child(2):before {content:''; display:inline-block; width:1px; height:12px; margin:0 20px; background-color:rgba(255,255,255,0.2);} #header .header-top .h-right {display:flex; gap:0 25px;} #header .header-top .h-right a {width:25px; height:25px; font-size:0; opacity:0.5; background-size:100%;} #header .header-top .h-right a:nth-child(1) {background:url(../img/sns_f.svg) 0 0 no-repeat;} #header .header-top .h-right a:nth-child(2) {background:url(../img/sns_x.svg) 0 0 no-repeat;} #header .header-top .h-right a:nth-child(3) {background:url(../img/sns_insta.svg) 0 0 no-repeat;} #header .header-top .h-right a:hover {opacity:1;} #header .header-top a:hover {color:#fff;} #header .header-nav {position: relative; background-color:#2baa71;} #header .header-nav .layout {height: 90px;width: 94%;max-width: 1520px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;} #header h1 {position: relative;} #header h1 a {display: block;font-size: 26px;} #header h1 a img {height: 34px; margin-right:10px;} #header button.btn-menu {display:none} /**/ nav.menu_wrap {} #gnb .depth1 {display: flex;justify-content: space-between;align-items: center;} #gnb .depth1 > li {position: relative;display: inline-block;vertical-align: top;} #gnb .depth1 > li > a {display:block;position: relative;margin: 0;padding:32px 40px; font-size:22px; font-weight:600; color:var(--colorDarkgray);} #header.header_active #gnb .depth1 > li > a, #header.bg_white #gnb .depth1 > li > a {color: var(--colorWhite);} #header #gnb .depth1 > li.sel > a {color: #fff;} #header.header_active #gnb .depth1 > li.sel > a, #header.bg_white #gnb .depth1 > li.sel > a {color: #fff;font-weight: 500;text-decoration: underline;} #header #gnb .depth1 > li:hover > a, #header #gnb .depth1 > li > a:hover {color: #fff;} #header .top_util .btn_sitemap {position:relative; width:46px; height:46px; border-radius:50px; display:flex; justify-content:center; align-items:center;} #header .top_util .line_box {width:23px; height:21px;} #header .top_util .line_box span {float:right; display:block; margin:0 auto; 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 .top_util .line_box span:nth-child(2) {margin:6px auto;} #header #gnb .depth1 > li:hover .depth2 {display:block;} #gnb .depth2 {display: none;overflow:hidden;position:absolute;top: 85px;left:50%; transform: translateX(-50%); min-width:165px;box-sizing: border-box;text-align:center; background:#222;z-index: 100;} #gnb .depth2 > li {margin: 2px;} #gnb .depth2 > li a {display:block; padding:10px 15px; font-size:17px; font-weight:500; line-height:1.4rem; color:#fff; text-align:left;} #gnb .depth2 > li a:hover {background:#fff; color:var(--mainColor);} #gnb .depth2 > li a i.window {width:16px; height:16px; display:inline-block; background:url(../img/icon_blank.svg) 0 0 no-repeat; vertical-align:middle;} #gnb .depth2 > li a:hover i.window {background:url(../img/icon_blank_c.svg) 0 0 no-repeat;} #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 {position: relative;width: 100%;} .section_inner {max-width: 1520px;margin: 0 auto;padding: 70px 0;} /**/ .main_con_title {position:relative; display:flex; align-items: baseline; gap:0 20px; margin-bottom:45px;} .main_con_title h3 {position:relative; font-size:40px; font-weight:800; color:#222;} .main_con_title h3:before {content:''; position:absolute; top:-19px; left:0; display:block; width:32px; height:11px; background:url(../img/icon_h3.svg) 0 0 no-repeat; background-size:100%;} .main_con_title p {font-size:20px; font-weight:400; color:#7f7f7f;} .main_con_title a.more {position:absolute; top:0; right:0; font-size:18px; font-weight:500; color:#222;} .main_con_title a.more:after {content:''; display:inline-block; vertical-align:middle; width:16px; height:12px; background:url(../img/icon_more.png) 0 0 no-repeat;} /**/ .section .controls {} .section .controls .slick-arrow {overflow: hidden;width: 55px;height: 55px;border-radius: 50%;border-width: 1px;border-style: solid;border-color: #000;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: middle;} .section .controls .slick-prev {margin-right: 15px;background-image: url(../img/arrow_b_prev.png);} .section .controls .slick-next {margin-left: 15px;background-image: url(../img/arrow_b_next.png);} .section .controls.white .slick-arrow {border-color: #fff;} .section .controls.white .slick-prev {background-image: url(../img/arrow_w_prev.png);} .section .controls.white .slick-next {background-image: url(../img/arrow_w_next.png);} .section .controls .slider_dots {display: inline-block;vertical-align: middle;} .section .controls .slider_dots ul li {display: none;} .section .controls .slider_dots ul li.slick-active {display: block;} /* 메인비주얼 */ #section0 {position: relative; z-index: 1;} .literature-hero {position: relative; width: 100%; height: 100vh; min-height: 700px; max-height:820px; overflow: hidden;} .literatureSwiper, .literatureSwiper .swiper-wrapper, .literatureSwiper .swiper-slide {width: 100%; height: 100%;} /* 배경 */ .slide-bg {position: absolute; inset: 0;} .slide-bg img {display: block; width: 100%; height: 100%; object-fit: cover;} /* 어두운 오버레이 */ .slide-bg::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, 0) 75%);} /* 내부 영역 */ .slide-inner {position: relative; z-index: 2; width: 94%; max-width: 1520px; height: 100%; margin: 0 auto; padding: 0; box-sizing: border-box;} /* 텍스트 */ .slide-content {position: absolute; left: 0; bottom: 20%; color: #fff;} .slide-content h2 {margin: 0 0 18px; font-size: 56px; line-height: 1.1; font-weight: 700; letter-spacing: -3px;} .slide-content p {margin: 0 0 32px; font-size: 22px; line-height: 1.6; font-weight: 500; letter-spacing: -1px;} /* 버튼 */ .slide-link {display: inline-flex; align-items: center; gap: 12px; padding: 16px 20px; background: #18a865; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .25s ease;} .slide-link:hover {background: #128d55;} .slide-link span {font-size: 0; display:inline-block; width:8px; height:8px; border-top:2px #fff solid; border-right:2px #fff solid; transform: rotate(48deg);} /* 컨트롤 */ .hero-control {position: absolute; z-index: 10; left: 50%; bottom: 45px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;} /* 이전/다음 */ .hero-control button {position: relative; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(0,0,0,.1); cursor: pointer;} .hero-prev span, .hero-next span {position: absolute; width: 8px; height: 8px; top: 50%; border-top: 2px solid #fff; border-right: 2px solid #fff;} .hero-prev span {left: 15px; transform: translateY(-50%) rotate(-135deg);} .hero-next span {left: 12px; transform: translateY(-50%) rotate(45deg);} /* 페이지네이션 */ .hero-pagination {display: flex; align-items: center; gap: 8px; width:auto !important;} .hero-pagination .swiper-pagination-bullet {background:#fff !important; opacity:1 !important; transition: all 0.3s ease; margin:0 !important;} .hero-pagination .swiper-pagination-bullet-active {width:26px !important; background:#2baa71 !important; border-radius:5px !important;} /**/ #section1 {padding:20px 0;} #section1 .section_inner {position: relative;} #section1 .main_event_list .poster-img {display: block; width: 100%; padding-top: 125%; box-sizing: border-box; overflow: hidden; position: relative; background: #fff; border: 1px solid #eee;} #section1 .main_event_list .poster-img img {max-width: 101%; max-height: 100%; width: 101%; display: block; position: absolute; top: 0; left: -1px; z-index:0; transition: transform .4s ease;} #section1 .main_event_list .swiper-slide:hover .poster-img img {transform: scale(1.04);} #section1 .main_event_list .poster-img .event-type {position:absolute; top:0; right:0; padding:12px 15px; font-size:16px; font-weight:600; color:#fff; background-color:#2a9857; z-index:1;} #section1 .main_event_list .poster-info .title {display:block; margin:27px 0; color:#333; font-size:25px; font-weight:600; line-height:34px;} #section1 .main_event_list .poster-info dl {display: flex; gap:0 20px; margin:3px 0; line-height:22px;} #section1 .main_event_list .poster-info dl dt {color:#333; font-weight: 600; width:30px;} #section1 .main_event_list .poster-info dl dd {color:#444; font-weight: 500; width:calc(100% - 30px - 20px);} /* swiper Controls */ #section1 .swiper-indicator {position: absolute; top: 70px; right: 0; display: flex; align-items: center; justify-content: flex-end; flex-direction: row; gap:0.8rem;} #section1 .swiper-count {display: flex; gap: 4px; font-size: 16px;} #section1 .swiper-count .current {color: #159447;} #section1 .swiper-button-next svg, .swiper-button-prev svg {display: none;} #section1 [class^=swiper-button-] {display: flex; align-items: center; justify-content: center; flex-direction: row; width: 36px; height: 36px; flex-shrink: 0;} #section1 [class^=swiper-button-]::after {content: ""; display: inline-flex; width: 18px; height: 18px; font-size: 0 !important;} #section1 .swiper-indicator .swiper-navigation {display: inline-flex; gap: 0.8rem;} #section1 .swiper-button-next::after, #section1 .swiper-button-prev::after {background: url(../img/ico_angle.svg) center no-repeat;} #section1 .swiper-button-next::after {transform: rotate(-180deg);} #section1 .swiper-button-prev {left: 0;} #section1 .swiper-button-next {right: 0;} #section1 .swiper-button-next, #section1 .swiper-button-prev {position: relative; top: auto; bottom: auto; left: auto !important; right: auto !important; margin: 0 !important;} #section1 .swiper-button-more::after {background: url(../img/ico_plus.svg) center no-repeat; transition: all 0.3s ease;} #section1 .swiper-button-more:hover:after {transform: rotate(180deg);} #section1 .swiper-button-play::after {background: url(../img/ico_play.svg) center no-repeat;} #section1 .swiper-button-stop::after {background: url(../img/ico_stop.svg) center no-repeat;} .swiper-button-pause {width: 36px; height: 36px; background: url(../img/ico_stop.svg) center no-repeat;} .swiper-button-pause.play {background: url(../img/ico_play.svg) center no-repeat;} /**/ #section2 {padding:20px 0 50px; background-color:#f8f9fc;} #section2 .section_inner {width:94%; max-width:1520px; margin:0 auto;} #section2 .m_notice ul {display:flex; flex-wrap: wrap; justify-content: space-between; gap:22px;} #section2 .m_notice ul > li {width:calc(100% / 4 - 17px); background-color:#fff; border:1px #fff solid; transition: box-shadow 0.3s, transform 0.3s, background-color 0.3s;} #section2 .m_notice ul > li:hover {border-color:#119347; box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.12); transform: translateY(-20px);} #section2 .m_notice ul > li:hover p {color:#119347;} #section2 .m_notice ul > li > a {display:block; padding:40px 35px 30px;} #section2 .m_notice ul > li p {display: -webkit-box; display: -ms-flexbox; max-height:80px; margin-bottom: 40px; overflow:hidden; vertical-align:top; text-overflow: ellipsis; word-break:break-all; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:20px; font-weight:600; color:#222; line-height:30px;} #section2 .m_notice ul > li .date {display:block; text-align: right; font-size:15px; font-weight:600; color:#999;} /* Footer */ footer {border-top:1px #dedede solid;} footer .layout {width:94%; max-width:1520px; margin:0 auto; padding:55px 0 70px;} footer .layout .fix_f_top {display:flex; justify-content: space-between; align-items: center; margin-bottom:70px;} footer .layout .f_banner {display:flex; gap: 0 30px;} footer .layout .f_nav {display:flex; gap:0 40px;} footer .layout .f_nav a {font-size:16px; font-weight:600; color:#000;} footer .layout .f_nav a:hover {color:var(--mainColor);} footer .layout .fix_f_bottom {display:flex; align-items: center; gap:0 10%;} footer .layout .f_logo {width:83px;} footer .layout .f_info {display:flex; justify-content: space-between; gap:0 5%; width:calc(100% - 83px - 10%);} footer .layout .f_info address { font-size:15px; line-height:24px;} footer .layout .f_info address .tel {margin-right:20px;} footer .layout .f_info strong {display:block; font-size:17px;} footer .layout .f_info cite {font-size:16px;} footer .layout .f_info address:nth-child(2), footer .layout .f_info cite {margin-top:20px;} /**/ #contain {overflow: hidden;position: relative;z-index: 10;width: 100%;} #contain .contain {width:96%; max-width: 1520px;margin: 80px auto 120px;min-height: 500px;} /* 서브비주얼 */ #subVisual {overflow: hidden;position: relative;height: auto; margin:0 auto; padding:0; /*background: url(../img/bg_sub_visual.jpg) center center no-repeat; background-size: cover;*/ z-index: 90;} #subVisual .sub_visual {width:96%;max-width: 1520px;height: 100%;margin: 5.5rem auto 0;} #subVisual .sub_visual .visual_wp {height: 100%;} #subVisual .sub_visual .visual_wp .visual {position: relative; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: space-between; align-items: flex-end; gap:20px 0; width: 100%; height: 100%; z-index: 9;} #subVisual .sub_visual .visual_wp .visual .page_title {} #subVisual .sub_visual .visual_wp .visual h2 {font-size:60px; color:#222;} #subVisual .sub_visual .visual_wp .visual p {font-size:20px; color:var(--mainColor); font-weight:600; margin-bottom:20px;} #subVisual:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(1px); z-index: 1;} #subVisual .sub_visual .locator {display:flex; justify-content:space-between;} #subVisual .sub_visual .locator > ol {display:flex; align-items:center;} #subVisual .sub_visual .locator > ol li {list-style: none;} #subVisual .sub_visual .locator > ol > li.home {width:20px; height:20px; font-size: 0 !important; background: url(../img/icon_homeline.svg) 0 0 no-repeat;} #subVisual .sub_visual .locator > ol > li.home a {display:block; width:100%; height:100%; font-size:0;} #subVisual .sub_visual .locator > ol > li a, #subVisual .sub_visual .locator > ol > li span, #subVisual .sub_visual .locator > ol > li button {display:block; padding:0; font-size:17px; font-weight:500; color:rgba(0,0,0,0.8); background-color:transparent; letter-spacing:0; cursor: revert;} #subVisual .sub_visual .locator > ol > li button::before, #subVisual .sub_visual .locator > ol > li span::before {content: ''; display:inline-block; width:6px; height:8px; margin:0 10px; vertical-align:2px; background:url(../img/path_arrow.svg) 0 0 no-repeat;} #subVisual .sub_visual .locator .navi {display: none !important;} /*각 컨텐츠 이용안내*/ #design .guide_box{margin-bottom:30px;padding:30px 30px;border:1px solid #ccc;border-radius:10px;} #design .guide_box h3{color:#551ca9;font-size:17px} #design .guide_box > ul > li {position: relative;padding-left: 20px;font-size: 16px;font-weight: 400;color: #333;} #design .guide_box > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li::before {content: '';position: absolute;top: 8px;left: 0;width: 6px;height: 6px;background-color: var(--subColor1);border-radius: 50%;} #design .guide_box > ul > li > ul {margin-top:3px;} #design .guide_box > ul > li > ul > li {position: relative;padding-left: 20px;font-size: 16px;font-weight: 400;color: #333;} #design .guide_box > ul > li > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li > ul > li::before {content: '';position: absolute;top: 11px;left: 0;width: 10px;height: 1px;background-color: #aaa;} /* #design */ #design {position: relative;width: 100%;} #blind{position:absolute;z-index:99998;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft{display:none;} #gotop, #gotop a{display:none !important} @keyframes mv00 {from {background-position:center 110px; }to {background-position:center 0px; }} @keyframes mv01 {from {top:100px; opacity:0;}to {top:170px; opacity:1;}} @keyframes mv02 {from {top:200px;opacity:0;}to {top:295px;opacity:1;}} @keyframes v_img {from {right:50px; opacity:0}to {right:0px; opacity:1}} @keyframes v_text {from {padding-left:30px; opacity:0}to {padding-left:0px; opacity:1}} @keyframes v_navi {from {margin-top:-20px; opacity:0}to {margin-top:0px; letter-spacing:-1px; opacity:1}} @keyframes con_bg {from {background:url(../img/sub_con_bg.png) repeat-x left -30px; }to {background:url(../img/sub_con_bg.png) repeat-x left 138px; }} } /* 841 ~ 1399 */ @media all and (min-width: 841px) and (max-width: 1299px) { #divpop { display:none;} #mm-blocker{display:none} #popupWindow{position:absolute} #hCheon {position:relative;top:0px;padding:0; margin:0;width:100%;} #OpenLayer {position: absolute;top: 180px;left: 100px;z-index: 9999;background: #fff;padding: 10px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 14px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} #Wrap {overflow: hidden;} /* header */ #header {width: 100%;background-color: #fff;} #header.header_active {background-color: var(--colorNavy);} #header .header-top {background-color:#222;} #header .header-top .layout {height: 50px;width: 94%;max-width: 1520px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;color:#9f9f9f;} #header .header-top .h-left a:nth-child(2):before {content:''; display:inline-block; width:1px; height:12px; margin:0 20px; background-color:rgba(255,255,255,0.2);} #header .header-top .h-right {display:flex; gap:0 25px;} #header .header-top .h-right a {width:25px; height:25px; font-size:0; opacity:0.5; background-size:100%;} #header .header-top .h-right a:nth-child(1) {background:url(../img/sns_f.svg) 0 0 no-repeat;} #header .header-top .h-right a:nth-child(2) {background:url(../img/sns_x.svg) 0 0 no-repeat;} #header .header-top .h-right a:nth-child(3) {background:url(../img/sns_insta.svg) 0 0 no-repeat;} #header .header-top .h-right a:hover {opacity:1;} #header .header-top a:hover {color:#fff;} #header .header-nav {position: relative; background-color:#2baa71;} #header .header-nav .layout {height: 90px;width: 94%;max-width: 1520px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;} #header h1 {position: relative;} #header h1 a {display: block;font-size: 26px;} #header h1 a img {height: 34px; margin-right:10px;} #header button.btn-menu {display:none} /**/ nav.menu_wrap {} #gnb .depth1 {display: flex;justify-content: space-between;align-items: center;} #gnb .depth1 > li {position: relative;display: inline-block;vertical-align: top;} #gnb .depth1 > li > a {display:block;position: relative;margin: 0;padding:32px 30px; font-size:20px; font-weight:600; color:var(--colorDarkgray);} #header.header_active #gnb .depth1 > li > a, #header.bg_white #gnb .depth1 > li > a {color: var(--colorWhite);} #header #gnb .depth1 > li.sel > a {color: #fff;text-decoration: underline;text-underline-offset: 10px;} #header.header_active #gnb .depth1 > li.sel > a, #header.bg_white #gnb .depth1 > li.sel > a {color: #fff;font-weight: 500;text-decoration: underline;} #header #gnb .depth1 > li:hover > a, #header #gnb .depth1 > li > a:hover {color: #fff;} #header .top_util .btn_sitemap {position:relative; width:46px; height:46px; border-radius:50px; display:flex; justify-content:center; align-items:center;} #header .top_util .line_box {width:23px; height:21px;} #header .top_util .line_box span {float:right; display:block; margin:0 auto; 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 .top_util .line_box span:nth-child(2) {margin:6px auto;} #header #gnb .depth1 > li:hover .depth2 {display:block;} #gnb .depth2 {display: none;overflow:hidden;position:absolute;top: 85px;left:50%; transform: translateX(-50%); min-width:165px;box-sizing: border-box;text-align:center; background:#222;z-index: 100;} #gnb .depth2 > li {margin: 2px;} #gnb .depth2 > li a {display:block; padding:10px 15px; font-size:17px; font-weight:500; line-height:1.4rem; color:#fff; text-align:left;} #gnb .depth2 > li a:hover {background:#fff; color:var(--mainColor);} #gnb .depth2 > li a i.window {width:16px; height:16px; display:inline-block; background:url(../img/icon_blank.svg) 0 0 no-repeat; vertical-align:middle;} #gnb .depth2 > li a:hover i.window {background:url(../img/icon_blank_c.svg) 0 0 no-repeat;} #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} /**/ #mainCon {position: relative;width: 100%;} .section_inner {width: 94%;margin: 0 auto;padding: 50px 0;} /**/ .main_con_title {position:relative; display:flex; align-items: baseline; gap:0 20px; margin-bottom:45px;} .main_con_title h3 {position:relative; font-size:36px; font-weight:800; color:#222;} .main_con_title h3:before {content:''; position:absolute; top:-19px; left:0; display:block; width:32px; height:11px; background:url(../img/icon_h3.svg) 0 0 no-repeat; background-size:100%;} .main_con_title p {font-size:18px; font-weight:400; color:#7f7f7f;} .main_con_title a.more {position:absolute; top:20px; right:0; font-size:16px; font-weight:500; color:#222;} .main_con_title a.more:after {content:''; display:inline-block; vertical-align:middle; width:16px; height:12px; background:url(../img/icon_more.png) 0 0 no-repeat;} /**/ .section .controls {} .section .controls .slick-arrow {overflow: hidden;width: 55px;height: 55px;border-radius: 50%;border-width: 1px;border-style: solid;border-color: #000;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: middle;} .section .controls .slick-prev {margin-right: 15px;background-image: url(../img/arrow_b_prev.png);} .section .controls .slick-next {margin-left: 15px;background-image: url(../img/arrow_b_next.png);} .section .controls.white .slick-arrow {border-color: #fff;} .section .controls.white .slick-prev {background-image: url(../img/arrow_w_prev.png);} .section .controls.white .slick-next {background-image: url(../img/arrow_w_next.png);} .section .controls .slider_dots {display: inline-block;vertical-align: middle;} .section .controls .slider_dots ul li {display: none;} .section .controls .slider_dots ul li.slick-active {display: block;} /* 메인비주얼 */ #section0 {position: relative; z-index: 1;} .literature-hero {position: relative; width: 100%; height: 80vh; min-height: 600px; max-height:800px; overflow: hidden;} .literatureSwiper, .literatureSwiper .swiper-wrapper, .literatureSwiper .swiper-slide {width: 100%; height: 100%;} /* 배경 */ .slide-bg {position: absolute; inset: 0;} .slide-bg img {display: block; width: 100%; height: 100%; object-fit: cover;} /* 어두운 오버레이 */ .slide-bg::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, 0) 75%);} /* 내부 영역 */ .slide-inner {position: relative; z-index: 2; width: 94%; height: 100%; margin: 0 auto; padding: 0; box-sizing: border-box;} /* 텍스트 */ .slide-content {position: absolute; left: 0; bottom: 20%; color: #fff;} .slide-content h2 {margin: 0 0 18px; font-size: 50px; line-height: 1.1; font-weight: 700;} .slide-content p {margin: 0 0 30px; font-size: 20px; line-height: 1.4; font-weight: 500;} /* 버튼 */ .slide-link {display: inline-flex; align-items: center; gap: 12px; padding: 16px 20px; background: #18a865; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .25s ease;} .slide-link:hover {background: #128d55;} .slide-link span {font-size: 0; display:inline-block; width:8px; height:8px; border-top:2px #fff solid; border-right:2px #fff solid; transform: rotate(48deg);} /* 컨트롤 */ .hero-control {position: absolute; z-index: 10; left: 50%; bottom: 45px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;} /* 이전/다음 */ .hero-control button {position: relative; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(0,0,0,.1); cursor: pointer;} .hero-prev span, .hero-next span {position: absolute; width: 8px; height: 8px; top: 50%; border-top: 2px solid #fff; border-right: 2px solid #fff;} .hero-prev span {left: 15px; transform: translateY(-50%) rotate(-135deg);} .hero-next span {left: 12px; transform: translateY(-50%) rotate(45deg);} /* 페이지네이션 */ .hero-pagination {display: flex; align-items: center; gap: 8px; width:auto !important;} .hero-pagination .swiper-pagination-bullet {background:#fff !important; opacity:1 !important; transition: all 0.3s ease; margin:0 !important;} .hero-pagination .swiper-pagination-bullet-active {width:26px !important; background:#2baa71 !important; border-radius:5px !important;} /**/ #section1 {padding-top:20px;} #section1 .section_inner {position: relative;} #section1 .main_event_list .poster-img {display: block; width: 100%; padding-top: 142.5%; box-sizing: border-box; overflow: hidden; position: relative; background: #fff; border: 1px solid #eee;} #section1 .main_event_list .poster-img img {max-width: 101%; max-height: 100%; width: 101%; height: 100%; object-fit: cover; display: block; position: absolute; top: 0; left: -1px; z-index:0; transition: transform .4s ease;} #section1 .main_event_list .swiper-slide:hover .poster-img img {transform: scale(1.04);} #section1 .main_event_list .poster-img .event-type {position:absolute; top:0; right:0; padding:12px 15px; font-size:16px; font-weight:600; color:#fff; background-color:#2a9857; z-index:1;} #section1 .main_event_list .poster-info .title {display:block; margin:20px 0; color:#333; font-size:22px; font-weight:600;} #section1 .main_event_list .poster-info dl {display: flex; gap:0 15px; margin:3px 0; line-height:21px; font-size:15px;} #section1 .main_event_list .poster-info dl dt {color:#333; font-weight: 600; width:30px;} #section1 .main_event_list .poster-info dl dd {color:#444; font-weight: 500; width:calc(100% - 30px - 15px);} /* swiper Controls */ #section1 .swiper-indicator {position: absolute; top: 70px; right: 0; display: flex; align-items: center; justify-content: flex-end; flex-direction: row; gap:0.8rem;} #section1 .swiper-count {display: flex; gap: 4px; font-size: 16px;} #section1 .swiper-count .current {color: #159447;} #section1 .swiper-button-next svg, .swiper-button-prev svg {display: none;} #section1 [class^=swiper-button-] {display: flex; align-items: center; justify-content: center; flex-direction: row; width: 36px; height: 36px; flex-shrink: 0;} #section1 [class^=swiper-button-]::after {content: ""; display: inline-flex; width: 18px; height: 18px; font-size: 0 !important;} #section1 .swiper-indicator .swiper-navigation {display: inline-flex; gap: 0.8rem;} #section1 .swiper-button-next::after, #section1 .swiper-button-prev::after {background: url(../img/ico_angle.svg) center no-repeat;} #section1 .swiper-button-next::after {transform: rotate(-180deg);} #section1 .swiper-button-prev {left: 0;} #section1 .swiper-button-next {right: 0;} #section1 .swiper-button-next, #section1 .swiper-button-prev {position: relative; top: auto; bottom: auto; left: auto !important; right: auto !important; margin: 0 !important;} #section1 .swiper-button-more::after {background: url(../img/ico_plus.svg) center no-repeat; transition: all 0.3s ease;} #section1 .swiper-button-more:hover:after {transform: rotate(180deg);} #section1 .swiper-button-play::after {background: url(../img/ico_play.svg) center no-repeat;} #section1 .swiper-button-stop::after {background: url(../img/ico_stop.svg) center no-repeat;} .swiper-button-pause {width: 36px; height: 36px; background: url(../img/ico_stop.svg) center no-repeat;} .swiper-button-pause.play {background: url(../img/ico_play.svg) center no-repeat;} /**/ #section2 {padding:20px 0 50px; background-color:#f8f9fc;} #section2 .section_inner {width:94%; max-width:1520px; margin:0 auto;} #section2 .m_notice ul {display:flex; flex-wrap: wrap; justify-content: space-between; gap:20px;} #section2 .m_notice ul > li {width:calc(100% / 4 - 15px); background-color:#fff; border:1px #fff solid; transition: box-shadow 0.3s, transform 0.3s, background-color 0.3s;} #section2 .m_notice ul > li:hover {border-color:#119347; box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.12); transform: translateY(-20px);} #section2 .m_notice ul > li:hover p {color:#119347;} #section2 .m_notice ul > li > a {display:block; padding:20px;} #section2 .m_notice ul > li p {display: -webkit-box; display: -ms-flexbox; max-height:70px; margin-bottom: 20px; overflow:hidden; vertical-align:top; text-overflow: ellipsis; word-break:break-all; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:18px; font-weight:600; color:#222; line-height:24px;} #section2 .m_notice ul > li .date {display:block; text-align: right; font-size:13px; font-weight:600; color:#999;} /* Footer */ footer {border-top:1px #dedede solid;} footer .layout {width:94%; max-width:1520px; margin:0 auto; padding:45px 0 45px;} footer .layout .fix_f_top {display:flex; justify-content: space-between; align-items: center; margin-bottom:50px;} footer .layout .f_banner {display:flex; gap: 0 30px;} footer .layout .f_banner img {max-width:40%;} footer .layout .f_nav {display:none;} footer .layout .f_nav a {font-size:16px; font-weight:600; color:#000;} footer .layout .f_nav a:hover {color:var(--mainColor);} footer .layout .fix_f_bottom {display:flex; align-items: flex-start; gap:0 8%;} footer .layout .f_logo {width:80px;} footer .layout .f_info {display:flex; flex-wrap: wrap; justify-content: space-between; gap:0 5%; width:calc(100% - 80px - 5%);} footer .layout .f_info address {width:45%; font-size:15px; line-height:24px;} footer .layout .f_info address .tel {margin-right:20px;} footer .layout .f_info strong {display:block; font-size:17px;} footer .layout .f_info cite {width:100%; font-size:16px;} footer .layout .f_info address:nth-child(2), footer .layout .f_info cite {margin-top:20px;} /**/ #contain {overflow: hidden;position: relative;width: 100%;} #contain .contain {width: 94%;margin: 40px auto 80px;} #contain .contain::after {content: '';display: block;clear: both;} /* 서브비주얼 */ #subVisual {overflow: hidden;position: relative;height: auto; margin:0 auto; padding:0; /*background: url(../img/bg_sub_visual.jpg) center center no-repeat; background-size: cover;*/ z-index: 90;} #subVisual .sub_visual {width:96%;max-width: 1520px;height: 100%;margin: 5rem auto 2rem;} #subVisual .sub_visual .visual_wp {height: 100%;} #subVisual .sub_visual .visual_wp .visual {position: relative; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: space-between; align-items: flex-end; gap:20px 0; width: 100%; height: 100%; z-index: 9;} #subVisual .sub_visual .visual_wp .visual h2 {font-size:50px; color:#222;} #subVisual .sub_visual .visual_wp .visual p {font-size:20px; color:var(--mainColor); font-weight:600; margin-bottom:20px;} #subVisual:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(1px); z-index: 1;} #subVisual .sub_visual .locator {display:flex; justify-content:space-between;} #subVisual .sub_visual .locator > ol {display:flex; align-items:center;} #subVisual .sub_visual .locator > ol li {list-style: none;} #subVisual .sub_visual .locator > ol > li.home {width:20px; height:20px; font-size: 0 !important; background: url(../img/icon_homeline.svg) 0 0 no-repeat;} #subVisual .sub_visual .locator > ol > li.home a {display:block; width:100%; height:100%; font-size:0;} #subVisual .sub_visual .locator > ol > li a, #subVisual .sub_visual .locator > ol > li span, #subVisual .sub_visual .locator > ol > li button {display:block; padding:0; font-size:17px; font-weight:500; color:rgba(0,0,0,0.8); background-color:transparent; letter-spacing:0;} #subVisual .sub_visual .locator > ol > li button::before, #subVisual .sub_visual .locator > ol > li span::before {content: ''; display:inline-block; width:6px; height:8px; margin:0 10px; vertical-align:2px; background:url(../img/path_arrow.svg) 0 0 no-repeat;} #subVisual .sub_visual .locator .navi {display: none !important;} /*각 컨텐츠 이용안내*/ #design .guide_box{margin:30px 0;padding:30px 30px;border:1px solid #ccc;border-radius:10px;} #design .guide_box h3{color:#551ca9;font-size:17px} #design .guide_box > ul > li {position: relative;padding-left: 20px;font-size: 16px;font-weight: 400;color: #333;} #design .guide_box > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li::before {content: '';position: absolute;top: 8px;left: 0;width: 6px;height: 6px;background-color: var(--subColor1);border-radius: 50%;} #design .guide_box > ul > li > ul {margin-top:3px;} #design .guide_box > ul > li > ul > li {position: relative;padding-left: 20px;font-size: 16px;font-weight: 400;color: #333;} #design .guide_box > ul > li > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li > ul > li::before {content: '';position: absolute;top: 11px;left: 0;width: 10px;height: 1px;background-color: #aaa;} /* #design */ #design {width: 100%;} /**/ #blind {position:absolute;z-index:9999;top:0px;left:0px; bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft {display:none;position:absolute;z-index:10;left:0px;top:0px;width:100%;height: 100%;background:#1e2c5d;padding-bottom: 60px;} #dkleft .lefttit{text-align:left;width: 100%;box-sizing: border-box;background:#1e2c5d;} #dkleft .lefttit img{height: 25px;} #dkleft .select {height: 100%;overflow-y: auto;} #dkleft .lefttit button {display:block;position:relative;padding: 20px 15px;font-size: 16px;color:#fff;border:0;background:transparent;font-family: 'Montserrat';font-weight: 500;} #dkleft .lefttit button i {display: inline-block;padding: 0 7px 0 0;font-size: 15px;color:#fff;vertical-align: middle;} #dkleft .lefttit > div {background-color: #eee;padding: 0 15px;} #dkleft .lefttit .join{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .join i{padding:0 7px 0 0;font-size:24px;color:#1e2c5d} #dkleft .lefttit .idpw{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .sel_btn {display:inline-block;position:relative;padding:0 8px;height:36px;line-height:36px;margin:5px 0;font-size:14px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .mobile_member {display: block;padding-bottom: 5px;border-top: 1px solid rgba(255,255,255,0.3);} #dkleft .lefttit .mobile_member > a {display: block;padding: 10px 0 10px 35px;color: #fff;font-size: 15px;box-sizing: border-box;background: url(../img/member_icon.png) no-repeat 0 50%;} #dkleft .select .modify{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .modify span {display:inline-block;padding:0 16px;height:36px;line-height:36px;background:#2e4287;color:#fff;border-radius:5px;} #dkleft .select .modify i{display:inline-block;position:relative;top:1px;padding:0 7px 0 0;font-size:24px;color:#fff} #dkleft .depth1{display:block;width: 100%;position:relative;padding: 0 15px;line-height:50px;font-size:16px;color:#fff;text-align:left;border-bottom: 1px solid rgba(255, 255, 255, .1);transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 strong {position:relative;top:-2px;padding:0 4px;height:14px;line-height:14px;font-size:10px;background:#ff0000;border-radius:30px} #dkleft .depth1 span{font-style:normal;color:#ffa800} #dkleft .depth1 em{position:absolute;z-index:2;top:0;right:4px;width:39px;height:39px;background:url(/web/seomun/img/common/plus.png) no-repeat 50% 50%;background-size:11px 11px} #dkleft .depth1.sel {background: #2e4287;color:#fff;border-bottom:1px solid #596170} /*#dkleft .depth1 i {font-family:Linearicons-Free;display:block;margin:15px 15px 0 0;color:#aaa;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s}*/ #dkleft .depth1 i {display:block;width: 20px;height: 20px;margin: 15px 15px 0 0;background-image: url(../img/ico_dkleft_arrow.png);background-size: auto 7px;text-indent: -9999px;background-repeat: no-repeat;background-position: 50% 50%;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 i.rightico {float:right} #dkleft .depth1.sel i.rightico{color:#fff;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s} #dkleft .depth2{display:none;background:#fff} #dkleft .depth2 a{display:block;padding:0 20px;line-height:40px;font-size:14px;color:#555;border-bottom:1px solid #ddd;text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #dkleft .depth2 .depth3 {background-color: #f4f4f4;} #dkleft .depth2 .depth3 > li > a {display: block;font-size: 13px;padding: 7px 20px;color: #555;border-bottom: 0;line-height: 1.2em;} #dkleft .depth2 .depth3 > li:first-child > a {padding-top: 15px;} #dkleft .depth2 .depth3 > li:last-child > a {padding-bottom: 15px;border-bottom: 1px solid #ddd;} #closeleft{position: absolute;z-index: 9999999;left: -45px;top: 15px;width: 35px;height: 35px;display: block;text-align: center;font-size: 30px;font-family: Linearicons-Free;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;color: #fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870";font-size:30px;line-height:1;} #gotop{display: none;position:fixed;z-index:90000;bottom:20px;right:20px;display:none} #gotop a{display:block;width:40px;height:30px;padding:30px 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} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:100px; opacity:0;} to {top:170px; opacity:1;} } @keyframes mv02 { from {top:200px;opacity:0;} to {top:295px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } } @media all and (max-width: 840px) { /**/ #Wrap {overflow: hidden;} #gnb {display: none;} nav.menu_wrap {} /**/ #design {float: none;width: 100%;} /**/ #aside {float: none;display: none;} /**/ #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;} #OpenLayer {position: absolute;top: 150px;left: 10px;width: 70%;z-index: 9999;background: #fff;padding: 5px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 12px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} #OpenLayer img {width: 100%;} html.fp-enabled, .fp-enabled body {overflow: visible;} /* header */ #header {width: 100%;background-color: #fff;} #header.header_active {background-color: var(--colorNavy);} #header .header-top {display:none;} #header .header-nav {position: relative; background-color:#2baa71;} #header .header-nav .layout {height: 60px;width: 94%;margin: 0 auto;display: flex; justify-content: center; align-items: center;} #header h1 {position: relative;} #header h1 a {display: block;font-size: 22px;} #header h1 a img {max-width: 95%; height: 28px !important; margin-right:10px;} #header .btn-menu {position:absolute;top: 5px;left: 5px;z-index: 10; width:50px; height:50px; display:flex; justify-content:center; align-items:center;} #header .btn-menu .line_box {width:23px; height:21px;} #header .btn-menu .line_box span {float:right; display:block; margin:0 auto; 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 .btn-menu .line_box span:nth-child(2) {margin:6px auto;} #header button.btn-page{height:40px;width:40px;text-align:center;top:36px;right:10px;display:block;line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page2{height:40px;width:48px;text-align:center;top:36px;right:55px;display:block; line-height:14px;font-size:11px;font-family:'Roboto';} #header button.btn-page i{display:block !important;padding:5px 0 0 0;height:20px;font-size:18px !important; } /**/ .section .kind.lib1 {background-color: var(--mainColor);color: var(--colorWhite);} .section .kind.lib2 {background-color: var(--libColor2);color: var(--colorWhite);} .section .kind.lib3 {background-color: var(--libColor3);color: var(--colorWhite);} .section .lib1 {color: var(--mainColor);} .section .lib2 {color: var(--libColor2);} .section .lib3 {color: var(--libColor3);} /**/ .section .controls {} .section .controls .slick-arrow {overflow: hidden;width: 40px;height: 40px;border-radius: 50%;border-width: 1px;border-style: solid;border-color: #000;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;vertical-align: middle;background-size: auto 15px;} .section .controls .slick-prev {margin-right: 15px;background-image: url(../img/arrow_b_prev.png);} .section .controls .slick-next {margin-left: 15px;background-image: url(../img/arrow_b_next.png);} .section .controls.white .slick-arrow {border-color: #fff;} .section .controls.white .slick-prev {background-image: url(../img/arrow_w_prev.png);} .section .controls.white .slick-next {background-image: url(../img/arrow_w_next.png);} .section .controls .slider_dots {display: inline-block;vertical-align: middle;font-size: 13px;} .section .controls .slider_dots ul li {display: none;} .section .controls .slider_dots ul li.slick-active {display: block;} /**/ #mainCon {position: relative;width: 100%;} .section_inner {width: 94%;margin: 0 auto;padding: 50px 0;} /**/ .main_con_title {position:relative; display:flex; flex-direction: column; align-items: baseline; gap:10px 0; margin-bottom:30px;} .main_con_title h3 {position:relative; font-size:30px; font-weight:800; color:#222;} .main_con_title h3:before {content:''; position:absolute; top:-19px; left:0; display:block; width:32px; height:11px; background:url(../img/icon_h3.svg) 0 0 no-repeat; background-size:100%;} .main_con_title p {font-size:16px; font-weight:400; color:#7f7f7f;} .main_con_title a.more {position:absolute; top:8px; right:0; font-size:16px; font-weight:500; color:#222;} .main_con_title a.more:after {content:''; display:inline-block; vertical-align:middle; width:16px; height:12px; background:url(../img/icon_more.png) 0 0 no-repeat;} /* 메인비주얼 */ /* 메인비주얼 */ #section0 {position: relative; z-index: 1;} .literature-hero {position: relative; width: 100%; height: 100vh; min-height: 300px; max-height:500px; overflow: hidden;} .literatureSwiper, .literatureSwiper .swiper-wrapper, .literatureSwiper .swiper-slide {width: 100%; height: 100%;} /* 배경 */ .slide-bg {position: absolute; inset: 0;} .slide-bg img {display: block; width: 100%; height: 100% !important; object-fit: cover;} /* 어두운 오버레이 */ .slide-bg::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, 0) 75%);} /* 내부 영역 */ .slide-inner {position: relative; z-index: 2; width: 94%; height: 100%; margin: 0 auto; padding: 0; box-sizing: border-box;} /* 텍스트 */ .slide-content {position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); width:100%; color: #fff; text-align:center;} .slide-content h2 {margin: 0 0 18px; font-size: 30px; line-height: 1; font-weight: 700;} .slide-content p {margin: 0 0 20px; font-size: 16px; line-height: 1.25; font-weight: 500;} /* 버튼 */ .slide-link {display: inline-flex; align-items: center; gap: 12px; padding: 13px 15px; background: #18a865; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .25s ease;} .slide-link:hover {background: #128d55;} .slide-link span {font-size: 0; display:inline-block; width:8px; height:8px; border-top:2px #fff solid; border-right:2px #fff solid; transform: rotate(48deg);} /* 컨트롤 */ .hero-control {position: absolute; z-index: 10; left: 50%; bottom: 45px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;} /* 이전/다음 */ .hero-control button {position: relative; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(0,0,0,.1); cursor: pointer;} .hero-prev span, .hero-next span {position: absolute; width: 8px; height: 8px; top: 50%; border-top: 2px solid #fff; border-right: 2px solid #fff;} .hero-prev span {left: 15px; transform: translateY(-50%) rotate(-135deg);} .hero-next span {left: 12px; transform: translateY(-50%) rotate(45deg);} /* 페이지네이션 */ .hero-pagination {display: flex; align-items: center; gap: 8px; width:auto !important;} .hero-pagination .swiper-pagination-bullet {background:#fff !important; opacity:1 !important; transition: all 0.3s ease; margin:0 !important;} .hero-pagination .swiper-pagination-bullet-active {width:26px !important; background:#2baa71 !important; border-radius:5px !important;} /**/ #section1 {padding-top:20px;} #section1 .section_inner {position: relative;} #section1 .main_event_list .poster-img {display: block; width: 100%; padding-top: 142.5%; box-sizing: border-box; overflow: hidden; position: relative; background: #fff; border: 1px solid #eee;} #section1 .main_event_list .poster-img img {max-width: 101%; max-height: 100%; width: 101%; height: 100%; object-fit: cover; display: block; position: absolute; top: 0; left: -1px; z-index:0; transition: transform .4s ease;} #section1 .main_event_list .swiper-slide:hover .poster-img img {transform: scale(1.04);} #section1 .main_event_list .poster-img .event-type {position:absolute; top:0; right:0; padding:12px 15px; font-size:16px; font-weight:600; color:#fff; background-color:#2a9857; z-index:1;} #section1 .main_event_list .poster-info .title {display:block; margin:20px 0; color:#333; font-size:18px; font-weight:600; line-height:24px;} #section1 .main_event_list .poster-info dl {display: flex; gap:0 15px; margin:3px 0; line-height:18px; font-size:14px;} #section1 .main_event_list .poster-info dl dt {color:#333; font-weight: 600; width:30px;} #section1 .main_event_list .poster-info dl dd {color:#444; font-weight: 500; width:calc(100% - 30px - 15px);} /* swiper Controls */ #section1 .swiper-indicator {position: absolute; top: 50px; right: 0; display: flex; align-items: center; justify-content: flex-end; flex-direction: row; gap:0.5rem;} #section1 .swiper-count {display: flex; gap: 4px; font-size: 15px;} #section1 .swiper-count .current {color: #159447;} #section1 .swiper-button-next svg, .swiper-button-prev svg {display: none;} #section1 [class^=swiper-button-] {display: flex; align-items: center; justify-content: center; flex-direction: row; width: 36px; height: 36px; flex-shrink: 0;} #section1 [class^=swiper-button-]::after {content: ""; display: inline-flex; width: 18px; height: 18px; font-size: 0 !important;} #section1 .swiper-indicator .swiper-navigation {display: inline-flex; gap: 0.5rem;} #section1 .swiper-button-next::after, #section1 .swiper-button-prev::after {background: url(../img/ico_angle.svg) center no-repeat;} #section1 .swiper-button-next::after {transform: rotate(-180deg);} #section1 .swiper-button-prev {left: 0;} #section1 .swiper-button-next {right: 0;} #section1 .swiper-button-next, #section1 .swiper-button-prev {position: relative; top: auto; bottom: auto; left: auto !important; right: auto !important; margin: 0 !important;} #section1 .swiper-button-more::after {background: url(../img/ico_plus.svg) center no-repeat; transition: all 0.3s ease;} #section1 .swiper-button-more:hover:after {transform: rotate(180deg);} #section1 .swiper-button-play::after {background: url(../img/ico_play.svg) center no-repeat;} #section1 .swiper-button-stop::after {background: url(../img/ico_stop.svg) center no-repeat;} .swiper-button-pause {width: 36px; height: 36px; background: url(../img/ico_stop.svg) center no-repeat;} .swiper-button-pause.play {background: url(../img/ico_play.svg) center no-repeat;} /**/ #section2 {padding:20px 0; background-color:#f8f9fc;} #section2 .section_inner {width:94%; max-width:1520px; margin:0 auto;} #section2 .m_notice ul {display:flex; flex-wrap: wrap; justify-content: space-between; gap:10px 0;} #section2 .m_notice ul > li {width:100%; background-color:#fff; border:1px #fff solid; transition: box-shadow 0.3s, transform 0.3s, background-color 0.3s;} #section2 .m_notice ul > li > a {display:block; padding:15px;} #section2 .m_notice ul > li p {display: -webkit-box; display: -ms-flexbox; max-height:60px; margin-bottom: 10px; overflow:hidden; vertical-align:top; text-overflow: ellipsis; word-break:break-all; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:17px; font-weight:600; color:#222; line-height:24px;} #section2 .m_notice ul > li .date {display:block; font-size:13px; font-weight:500; color:#999;} /* Footer */ footer {border-top:1px #dedede solid;} footer .layout {width:94%; margin:0 auto; padding:30px 0 30px;} footer .layout .fix_f_top {display:flex; justify-content: center; align-items: center; margin-bottom:30px;} footer .layout .f_banner {display:flex; justify-content: center; gap: 0 30px;} footer .layout .f_banner img {max-width:40%;} footer .layout .f_nav {display:none;} footer .layout .fix_f_bottom {display:flex; align-items: center; flex-direction: column; gap:20px 0;} footer .layout .f_logo {width:65px;} footer .layout .f_info {display:flex; flex-direction: column; justify-content: space-between; gap:0 10px; width:100%; text-align:center;} footer .layout .f_info address { font-size:.85rem; line-height:1.2rem;} footer .layout .f_info address .tel {margin-right:20px;} footer .layout .f_info strong {display:none;} footer .layout .f_info cite {display:block; font-size:.9rem; color:#888;} footer .layout .f_info address:nth-child(2), footer .layout .f_info cite {margin-top:10px;} /* 서브비주얼 */ #subVisual {overflow: hidden;position: relative;height: auto; margin:0 auto; padding:0; /*background: url(../img/bg_sub_visual.jpg) center center no-repeat; background-size: cover;*/ z-index: 90;} #subVisual .sub_visual {width:96%;max-width: 1520px;height: 100%;margin: 3rem auto 1rem;} #subVisual .sub_visual .visual_wp {height: 100%;} #subVisual .sub_visual .visual_wp .visual {position: relative; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap:25px 0; width: 100%; height: 100%; z-index: 9;} #subVisual .sub_visual .visual_wp .visual h2 {font-size:30px; color:#222;} #subVisual .sub_visual .visual_wp .visual p {font-size:17px; color:var(--mainColor); font-weight:600; margin-bottom:15px;} #subVisual:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(1px); z-index: 1;} @media all and (max-width: 599px) { } #subVisual .sub_visual .locator {display:flex; justify-content:space-between;} #subVisual .sub_visual .locator > ol {display:flex; align-items:center;} #subVisual .sub_visual .locator > ol li {list-style: none;} #subVisual .sub_visual .locator > ol > li.home {width:20px; height:20px; font-size: 0 !important; background: url(../img/icon_homeline.svg) 0 0 no-repeat;} #subVisual .sub_visual .locator > ol > li.home a {display:block; width:100%; height:100%; font-size:0;} #subVisual .sub_visual .locator > ol > li a, #subVisual .sub_visual .locator > ol > li span, #subVisual .sub_visual .locator > ol > li button {display:block; padding:0; font-size:15px; font-weight:500; color:rgba(0,0,0,0.8); background-color:transparent; letter-spacing:0; padding:0;} #subVisual .sub_visual .locator > ol > li button::before, #subVisual .sub_visual .locator > ol > li span::before {content: ''; display:inline-block; width:6px; height:8px; margin:0 10px; vertical-align:2px; background:url(../img/path_arrow.svg) 0 0 no-repeat;} #subVisual .sub_visual .locator .navi {display: none !important;} /*각 컨텐츠 이용안내*/ #design .guide_box{margin: 20px 0;padding: 15px 10px;border:1px solid #ccc;border-radius:10px;} #design .guide_box h3{color:#551ca9;font-size: 17px;} #design .guide_box > ul > li {position: relative;padding-left: 20px;font-size: 15px;font-weight: 400;color: #333;} #design .guide_box > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li::before {content: '';position: absolute;top: 8px;left: 0;width: 6px;height: 6px;background-color: var(--subColor1);border-radius: 50%;} #design .guide_box > ul > li > ul {margin-top:3px;} #design .guide_box > ul > li > ul > li {position: relative;padding-left: 20px;font-size: 14px;font-weight: 400;color: #333;} #design .guide_box > ul > li > ul > li + li {margin-top: 5px;} #design .guide_box > ul > li > ul > li::before {content: '';position: absolute;top: 11px;left: 0;width: 10px;height: 1px;background-color: #aaa;} /* #design */ #design {position: relative;width: 94%;margin: 30px auto 60px;} #aside {display: none;} /**/ #blind{position:absolute;z-index:39999;top:0px;left:0px; bottom:0;width:100%;height:100%;background: rgba(0,0,0,0.7)} #dkleft{display:none;position:fixed;z-index:100 !important;left:0px;top:0px;width: 100%;max-width: 320px;height: 100%;background-color: var(--mainColor);padding-bottom: 105px;} #dkleft div.logo {padding: 10px 20px;background-color: #fff;font-size: 0;} #dkleft div.logo img {height: 60px !important;} #dkleft .lefttit{text-align:left;width: 100%;box-sizing: border-box;background:#1e2c5d;} #dkleft .lefttit img{height: 25px;} #dkleft .select {height: 100%;overflow-y: auto;} #dkleft .lefttit button {display:block;position:relative;padding: 20px 15px;font-size: 16px;color:#fff;border:0;background:transparent;font-family: 'Montserrat';font-weight: 500;} #dkleft .lefttit button i {display: inline-block;padding: 0 7px 0 0;font-size: 15px;color:#fff;vertical-align: middle;} #dkleft .lefttit > div {background-color: #eee;padding: 0 15px;} #dkleft .lefttit .join{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .join i{padding:0 7px 0 0;font-size:24px;color:#1e2c5d} #dkleft .lefttit .idpw{display:inline-block;position:relative;padding:0 10px;height:36px;line-height:36px;margin:5px 0;font-size:15px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .sel_btn {display:inline-block;position:relative;padding:0 8px;height:36px;line-height:36px;margin:5px 0;font-size:14px;color:#1e2c5d;border:1px solid #1e2c5d;border-radius:5px;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .lefttit .mobile_member {display: block;padding-bottom: 5px;border-top: 1px solid rgba(255,255,255,0.3);} #dkleft .lefttit .mobile_member > a {display: block;padding: 10px 0 10px 35px;color: #fff;font-size: 15px;box-sizing: border-box;background: url(../img/member_icon.png) no-repeat 0 50%;} #dkleft .select .modify{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .modify span {display:inline-block;padding:0 16px;height:36px;line-height:36px;background:#005744;color:#fff;border-radius:5px;} #dkleft .select .modify i{display:inline-block;position:relative;top:1px;padding:0 7px 0 0;font-size:24px;color:#fff} #dkleft .depth1 {overflow: hidden;display:block;width: 100%;position:relative;padding: 0 15px;line-height:70px;font-size:20px;font-weight:600;color:#fff;text-align:left;border-bottom: 1px solid rgba(255, 255, 255, .1);transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 strong{position:relative;top:-2px;padding:0 4px;height:14px;line-height:14px;font-size:10px;background:#ff0000;border-radius:30px} #dkleft .depth1 span{font-style:normal;color:#ffa800} #dkleft .depth1 em{position:absolute;z-index:2;top:0;right:4px;width:39px;height:39px;background:url(/web/seomun/img/common/plus.png) no-repeat 50% 50%;background-size:11px 11px} #dkleft .depth1.sel{background: #333;color:#fff;} #dkleft .depth1 i {display:block;width: 20px;height: 20px;margin:0;background-image: url(../img/ico_dkleft_arrow.png);background-size: auto 7px;text-indent: -9999px;background-repeat: no-repeat;background-position: 50% 50%;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 i.rightico {position:absolute; top:50%; right:15px; transform: translateY(-50%);} #dkleft .depth1.sel i.rightico {color:#fff;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:translateY(-50%) rotate(180deg);transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s} #dkleft .depth2{display:none;background:#fff} #dkleft .depth2 a{display:block;padding:0 20px;line-height:55px;font-size:16px;color:#333;font-weight:500;border-bottom:1px solid #ddd;text-decoration:none} #dkleft .depth2 a img {width:16px; vertical-align:middle;} #dkleft .depth2 a.sel{color:#81c341} #dkleft .depth2 .depth3 {background-color: #f4f4f4;} #dkleft .depth2 .depth3 > li > a {display: block;font-size: 13px;padding: 7px 20px;color: #333;border-bottom: 0;line-height: 1.2em;} #dkleft .depth2 .depth3 > li:first-child > a {padding-top: 15px;} #dkleft .depth2 .depth3 > li:last-child > a {padding-bottom: 15px;border-bottom: 1px solid #ddd;} #closeleft{position: absolute;z-index: 9999999;right: 10px;top: 25px;width: 35px;height: 35px;display: block;text-align: center;font-size: 30px;font-family: Linearicons-Free;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;color: #333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870";font-size:30px;line-height:1;} /*#gotop{display: none;position:fixed;z-index:90000;bottom:20px;right:20px;display:none} #gotop a{display:block;width:40px;height:30px;padding:30px 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}*/ #gotop{position:fixed;z-index: 10000;bottom:0px;right:0px;display:none} #gotop a{display:block;width: 54px;height: 60px;padding: 32px 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 50% 32%;border-radius:0px;overflow:hidden} #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;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:0px; opacity:0;} to {top:34px; opacity:1;} } @keyframes mv02 { from {top:180px;opacity:0;} to {top:240px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } } @media all and (max-width: 767px) { /*#section0 .visual_wp {padding: 30px 0 50px;} #section0 .visual_wp .m_member {display: block !important;text-align: center;font-size: 0;} #section0 .visual_wp .m_member > a {display: inline-block;width: 50%;margin-bottom: 3vh;font-size: 16px;color: #fff;font-weight: 500;} #section0 .visual_wp .m_member > a::before {content: '';display: block;width: 15vw;max-width: 50px;height: 15vw;max-height: 50px;margin: 0 auto 10px;background-color: #333;border-radius: 50%;background-repeat: no-repeat;background-position: 50% 50%;} #section0 .visual_wp .m_member > a.m_login1 {padding-left: 10%;} #section0 .visual_wp .m_member > a.m_login1::before {background-image: url(../img/ico_m_login1.png);background-size: auto 45%;} #section0 .visual_wp .m_member > a.m_login2 {padding-right: 10%;} #section0 .visual_wp .m_member > a.m_login2::before {background-image: url(../img/ico_m_login2.png);background-size: auto 45%;}*/ } @media all and (max-width: 500px) { #foot_section .f_lib > ul {display: block;max-width: none;vertical-align: top;padding: 0;} #foot_section .f_lib > ul:nth-child(odd) {padding-left: 0;} #foot_section .f_lib > ul:nth-child(even) {padding-right: 0;} #foot_section .f_lib > ul + ul {margin-top: 12px;} #foot_section .f_lib > ul > li {position: relative;min-height: 50px;padding-left: 0px;font-size: 13px;font-weight: 400;color: #fff;} #foot_section .f_lib > ul > li + li {margin-top: 12px;} #foot_section .f_lib > ul > li .lib {position: static;display: inline-block;width: auto;padding: 5px 10px;margin-bottom: 6px;border: 1px solid #fff;text-align: center;} #foot_section .f_lib > ul > li .lib .line {display: inline;} #foot_section .f_lib > ul > li .con {} #foot_section .f_lib > ul > li .con > span {display: block;} #foot_section .f_lib > ul > li .con > span + span {margin-top: 3px;} #foot_section .f_lib > ul > li .con .contact > span + span {display: block;margin: 3px 0 0;} #foot_section .site_info .sns_wp {margin-top: 10px;} #foot_section .site_info .sns_wp > a {display: inline-block;width: 20px;height: 20px;margin-left: 7px;vertical-align: middle;text-indent: -9999px;background-repeat: no-repeat;background-position: 50% 50%;} #foot_section .site_info .sns_wp > a.facebook {background-image: url(../img/ico_f_facebook.png);} #foot_section .site_info .sns_wp > a.yutube {background-image: url(../img/ico_f_yutube.png);} #foot_section .site_info .sns_wp > a:first-child {margin-left: 0;} } @media all and (max-width: 400px) { #foot_section .f_link > ul > li {float: none;width: 100%;border: 1px solid #dde1df;border-bottom: 0;} #foot_section .f_link > ul > li:last-child {border-bottom: 1px solid #dde1df;} #foot_section .f_link > ul > li:nth-child(-n+2) {border-top: 1px solid #dde1df;} #foot_section .f_link > ul > li:first-child {border-top: 0;} } @keyframes direct_hover { 0% {width: 0;height: 0;border-radius: 50%;} 100% {width: 130%;height: 130%;} } @keyframes arr_left { 0% {transform: translateX(0);} 100% {transform: translateX(10px);} }