@charset "utf-8"; /* 레이아웃 */ #main * { box-sizing:border-box;} [data-main-con] {position:relative;padding:100px 0;} @media all and (max-width:1468px){ [data-main-con] {padding:80px 0;} } @media all and (max-width:1268px){ [data-main-con] {padding:60px 0;} } @media all and (max-width:1024px){ [data-main-con] {padding:50px 0;} } @media all and (max-width:768px){ [data-main-con] {padding:40px 0;} } /* 타이틀 */ .title { position:relative;display:flex;justify-content: space-between;margin-bottom:2.25em;} .title h2 {display: flex; flex-flow: column;gap:10px;line-height: 1; font-size: 1em;} .title h2 .small {font-size:1.5em;font-weight:600;} .title h2 strong {font-family:var(--font-TTT);line-height:1; color:var(--color-base); font-size:2.375em;font-weight:700;margin-top: .25em;} /* 더보기 */ .btn_more {position:relative;display:block;align-self: center;margin-top: calc(1.875em + .25em);} .btn_more:before {content:'';display:block;width:15px;height:26px;background:url(/resource/gukhwa/images/main/icon_next.svg) no-repeat center center / auto 26px;filter:invert(32%) sepia(3%) saturate(24%) hue-rotate(55deg) brightness(101%) contrast(97%);} /* tab */ .control_main_tab .conts_tab { display:none; } .control_main_tab .conts_tab.active { display:block; position:relative } .tab_menu { display:flex; flex-flow:row;justify-content: center; } .tab_menu>li { position:relative; } @media (max-width: 1268px) { .title {margin-bottom:2em;} .title h2 {gap:8px;} .title h2 .small {font-size:1.375em;} .title h2 strong {font-size:2.125em;} .btn_more {margin-top: calc(1.625em + .25em);} } @media (max-width: 1024px) { .title {margin-bottom:1.75em;} .title h2 {gap:6px;} .title h2 .small {font-size:1.25em;} .title h2 strong {font-size:2em;} .btn_more {margin-top: calc(1.25em + .25em);} } @media (max-width: 768px) { .title {margin-bottom:1.5em;} .title h2 {gap:4px;} .title h2 .small {font-size:1.125em;} .title h2 strong {font-size:1.875em;} .btn_more {margin-top: calc(1em + .25em);} } @media (max-width: 468px) { .title {margin-bottom:1.375em;} .title h2 {gap:2px;} .title h2 .small {font-size:1.063em;} .title h2 strong {font-size:1.75em;} .btn_more {margin-top: calc(.875em + .25em);} .btn_more:before {width:12px;background-size:auto 20px;} } @media (max-width: 319px) { .title {margin-bottom:1.125em;} .title h2 {gap:0px;} .title h2 .small {font-size:1em;} .title h2 strong {font-size:1.5em;} .btn_more {margin-top: calc(.75em + .25em);} } [data-main-con] .swiper_control .control {} [data-main-con] .swiper_control .control button {position:absolute;top:50%;;transform:translateY(-50%);background:var(--color-white);border:1px solid #edb9cd;border-radius:100%;width:50px;height:50px;z-index:1;} [data-main-con] .swiper_control .control .swiper_prev {left:2%;} [data-main-con] .swiper_control .control .swiper_prev::before {content:'';width:12px;height:20px;background:url("/resource/gukhwa/images/main/icon_prev.svg") no-repeat center center / 100%;} [data-main-con] .swiper_control .control .swiper_next {right:2%;} [data-main-con] .swiper_control .control .swiper_next::before {content:'';width:12px;height:20px;background:url("/resource/gukhwa/images/main/icon_next.svg") no-repeat center center / 100%;} [data-main-con] .swiper_control .page {display:flex;gap:12px;align-items:center;flex-wrap:wrap;z-index:99;justify-content: center;} [data-main-con] .swiper_control .page .swiper_bullet { display:flex; width:auto;flex-wrap:wrap;align-items:center; justify-content:center; gap:6px; line-height:1;} [data-main-con] .swiper_control .page .swiper-pagination-bullet {position:relative;width:20px;height:20px;background:transparent;border:1px solid transparent;border-radius:100%;opacity:1;} [data-main-con] .swiper_control .page .swiper-pagination-bullet::before {content:'';position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);width:8px;height:8px;background:#edb9cd;border-radius:100%;opacity:.8;} [data-main-con] .swiper_control .page .swiper-pagination-bullet-active {border-color:rgba(215,0,78,.5);} [data-main-con] .swiper_control .page .swiper-pagination-bullet-active::before {background:var(--color-point);} [data-main-con] .swiper_control .page .swiper_auto {width:20px;height:20px;opacity:.8;transition:var(--trans-ani);} [data-main-con] .swiper_control .page .swiper_auto:focus, [data-main-con] .swiper_control .page .swiper_auto:hover {opacity:1;} [data-main-con] .swiper_control .page .swiper_auto::before {content:'';background: url("/resource/gukhwa/images/main/icon_stop.svg") no-repeat center center / auto 12px;} [data-main-con] .swiper_control .page .swiper_auto.paused::before {content:'';background: url("/resource/gukhwa/images/main/icon_play.svg") no-repeat center center / auto 12px;} [data-main-con] .swiper .none_data { display:flex; justify-content:center; align-items:center; } @media (max-width: 768px) { [data-main-con] .swiper_control .control button {width:40px;height:40px;} } @media (max-width: 468px) { [data-main-con] .swiper_control .control button {width:35px;height:35px;} [data-main-con] .swiper_control .control .swiper_prev::before {width:9px;height:15px;} [data-main-con] .swiper_control .control .swiper_next::before {width:9px;height:15px;} [data-main-con] .swiper_control .page {gap:0;} [data-main-con] .swiper_control .page .swiper_bullet {gap:0;} [data-main-con] .swiper_control .page .swiper-pagination-bullet {width:18px;height:18px;} [data-main-con] .swiper_control .page .swiper-pagination-bullet::before {width:6px;height:6px;} } /********************************************************************** 비주얼 **********************************************************************/ .visual { position:relative;} .visual .text { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; text-align:center; color:var(--color-base); line-height:1;} .visual .text .txt {display:flex;align-items:center;justify-content: center;flex-flow:column;} .visual .text .txt .title {background:url("/resource/gukhwa/images/main/visual_txt.png") no-repeat center center; background-size:100%;width:610px;height:222px;margin-bottom:0;} .visual .text .txt .info {margin-top:3.75em;display:flex;justify-content: space-between;gap:2.5em;} .visual .text .txt .info p {font-size:1.5625em;color:var(--color-base);font-weight:500;} .visual .text .txt .info p strong {font-size:1.28em;font-weight:700;} .visual .text .d-day {display:inline-flex;margin-top:3.25em;align-items: flex-end;} .visual .text .d-day::before {content:'';display:block;margin-right:-6px;background:url("/resource/gukhwa/images/main/seodong.svg") no-repeat center center;background-size:100%;width:80px;height:101px;z-index:9;} .visual .text .d-day::after {content:'';display:block;margin-left:-6px;background:url("/resource/gukhwa/images/main/seonhwa.svg") no-repeat center center;background-size:100%;width:80px;height:109px;z-index:9;} .visual .text .d-day ul {display:flex;gap:0 5px;} .visual .text .d-day ul li {--sizeHig:78px;width:60px;height:var(--sizeHig);text-align:center;background:url("/resource/gukhwa/images/main/d-day_bg.jpg") no-repeat center center;background-size:cover; border-radius:12px;} .visual .text .d-day ul li span {display:block;line-height:var(--sizeHig);color:var(--color-white);font-size:3.125em;font-weight:900;} .visual .text .d-day ul li:nth-child(2) span {margin-top:-.085em; } .visual .img { position:relative; width:100%; height:100vh; overflow:hidden; min-height:600px; } .visual .img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform: translate(-50%,-50%); object-fit:cover; -o-object-fit:cover; z-index:1} .visual .swiper_control .control button {position:absolute;top:50%;;transform:translateY(-50%);background:rgba(0,0,0,.6);border-radius:100%;width:50px;height:50px;z-index:1;} .visual .swiper_control .control .swiper_prev {left:2%;} .visual .swiper_control .control .swiper_prev::before {content:'';width:12px;height:20px;background:url("/resource/gukhwa/images/main/icon_prev.svg") no-repeat 50% 50% / 100%;filter: brightness(0) invert(1);} .visual .swiper_control .control .swiper_next {right:2%;} .visual .swiper_control .control .swiper_next::before {content:'';width:12px;height:20px;background:url("/resource/gukhwa/images/main/icon_next.svg") no-repeat 50% 50% / 100%;filter: brightness(0) invert(1);} .visual .swiper_control .page {display:flex;gap:0 12px;align-items:center;justify-content: center;flex-wrap:wrap;position:absolute;bottom:1.875em;width:100%;z-index:99;} .visual .swiper_control .page .swiper_bullet { display:flex; width:auto;flex-wrap:wrap;align-items:center; justify-content:center; gap:6px; line-height:1;} .visual .swiper_control .page .swiper-pagination-bullet {position:relative;width:20px;height:20px;background:transparent;border:1px solid transparent;border-radius:100%;opacity:1;} .visual .swiper_control .page .swiper-pagination-bullet::before {content:'';position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);width:8px;height:8px;background:var(--color-white);border-radius:100%;opacity:.8;} .visual .swiper_control .page .swiper-pagination-bullet-active {border-color:rgba(255,255,255,.5);} .visual .swiper_control .page .swiper-pagination-bullet-active::before {opacity:1;} .visual .swiper_control .page .swiper_auto {width:20px;height:20px;opacity:.8;transition:var(--trans-ani);} .visual .swiper_control .page .swiper_auto:focus, .visual .swiper_control .page .swiper_auto:hover {opacity:1;} .visual .swiper_control .page .swiper_auto::before {content:'';filter: brightness(0) invert(1);background: url("/resource/gukhwa/images/common/icon_stop.svg") no-repeat center center /auto 12px;} .visual .swiper_control .page .swiper_auto.paused::before {content:'';background: url("/resource/gukhwa/images/common/icon_play.svg") no-repeat center center /auto 12px;} @media all and (max-width:1268px){ .visual .text .txt .title {width:580px;height:211px;} .visual .text .txt .info {margin-top:3em;gap: 1.875em;} .visual .text .txt .info p {font-size: 1.4375em;} .visual .text .d-day {margin-top:3em;} .visual .text .d-day ul li {width:58px;--sizeHig:74px;} .visual .text .d-day ul li span {font-size:2.875em;} .visual .text .d-day ul li:nth-child(2) span {margin-top:-0.075em;} .visual .text .d-day:before {width:75px;height:94px;} .visual .text .d-day::after {width:75px;height:102px;} } @media all and (max-width:1024px){ .visual .text .txt .title {width:480px;height:175px;} .visual .text .txt .info {margin-top:2.5em;gap: 1.75em;} .visual .text .txt .info p {font-size:1.25em;} .visual .text .d-day {margin-top:2.5em;} .visual .text .d-day ul li {width:54px;--sizeHig:69px;} .visual .text .d-day ul li span {font-size:2.75em;} .visual .text .d-day:before {width:70px;height:88px;} .visual .text .d-day::after {width:70px;height:95px;} } @media all and (max-width:768px) { .visual .text {transform: translate(-50%, -40%);} .visual .text .txt .title {width:70%;height:0;padding-top:25%;} .visual .text .txt .info {margin-top:2em;flex-flow: column;gap:1.25em;text-shadow: 1px 1px 5px rgba(255, 255, 255, .8);} .visual .text .d-day {margin-top:2em;} .visual .text .d-day::before {width:65px;height:81px;} .visual .text .d-day::after {width:65px;height:88px;} .visual .text .d-day ul {gap:0 3px;} .visual .text .d-day ul li {width:48px;--sizeHig:62px;} .visual .text .d-day ul li span {font-size:2.5em;} .visual .img {height:600px;min-height:auto;} .visual .swiper_control .control button {width:40px;height:40px;} } @media all and (max-width:468px) { .visual .text .txt .info {margin-top:1.5em;} .visual .text .txt .info p {font-size:1.125em;} .visual .text .d-day {margin-top:1em;} .visual .text .d-day::before {width:58px;height:73px;} .visual .text .d-day::after {width:58px;height:78px;} .visual .text .d-day ul {gap:2px;} .visual .text .d-day ul li {width:42px;--sizeHig:54px;} .visual .text .d-day ul li span {font-size:2.25em;} .visual .img {height:480px;} .visual .swiper_control .control button {width:35px;height:35px;} .visual .swiper_control .control .swiper_prev::before {width:9px;height:15px;} .visual .swiper_control .control .swiper_next::before {width:9px;height:15px;} .visual .swiper_control .page {gap:0;} .visual .swiper_control .page .swiper_bullet {gap:0;} .visual .swiper_control .page .swiper-pagination-bullet {width:18px;height:18px;} .visual .swiper_control .page .swiper-pagination-bullet::before {width:6px;height:6px;} } @media all and (max-width:379px) { .visual .text .txt .info {gap:1em;} .visual .text .txt .info p {font-size:.88em;} .visual .text .d-day {margin-top:1.5em;} .visual .text .d-day:before, .visual .text .d-day::after {display:none;} .visual .text .d-day ul li {width:38px;--sizeHig:49px;} .visual .text .d-day ul li span {font-size:2em;} .visual .text .d-day ul li:nth-child(2) span {margin-top: -0.05em;} .visual .img {height:400px;} } @media all and (max-width:268px) { .visual .text .d-day ul li {width:32px;--sizeHig:41px;border-radius:8px;} .visual .text .d-day ul li span {font-size:1.75em;} .visual .text .d-day ul li:nth-child(2) span {margin-top: -0.075em;} } /********************************************************************** 빠른 메뉴 찾기 **********************************************************************/ [data-main-con="quick"] {background:var(--color-white);} [data-main-con="quick"] .title {margin-bottom:0;} [data-main-con="quick"] .list {display:flex;align-items: flex-start;justify-content: space-between;gap:2.5em;} [data-main-con="quick"] .list li {width:12.5%;} [data-main-con="quick"] .list li a {display:block;text-align:center;line-height:1.2;} [data-main-con="quick"] .list li a .icon {display:block;width:100%;height:0;padding-top:100%;background:var(--color-white);border:1px solid transparent;box-shadow:1px 1px 20px rgba(0,0,0,.1);border-radius:40px;margin-bottom:40px;transition:var(--trans-ani);} [data-main-con="quick"] .list li a:focus .icon, [data-main-con="quick"] .list li a:hover .icon {animation-name:iconShow;animation-duration:.6s;border-color:var(--color-point);} [data-main-con="quick"] .list li a .icon1 {background:url("/resource/gukhwa/images/main/icon_quick01.png") no-repeat center center / auto 100%;} [data-main-con="quick"] .list li a .icon2 {display:block;background:url("/resource/gukhwa/images/main/icon_quick02.svg") no-repeat center center / auto 100%;} [data-main-con="quick"] .list li a .icon3 {display:block;background:url("/resource/gukhwa/images/main/icon_quick03.svg") no-repeat center center / auto 100%;} [data-main-con="quick"] .list li a .icon4 {display:block;background:url("/resource/gukhwa/images/main/icon_quick04.svg") no-repeat center center / auto 100%;} [data-main-con="quick"] .list li a .icon5 {display:block;background:url("/resource/gukhwa/images/main/icon_quick05.svg") no-repeat center center / auto 100%;} [data-main-con="quick"] .list li a .icon6 {display:block;background:url("/resource/gukhwa/images/main/icon_quick06.svg") no-repeat center center / auto 100%;} [data-main-con="quick"] .list li a .icon7 {display:block;background:url("/resource/gukhwa/images/main/icon_quick07.svg") no-repeat center center / auto 100%;} [data-main-con="quick"] .list li a .icon8 {display:block;background:url("/resource/gukhwa/images/main/icon_quick08.svg") no-repeat center center / auto 100%;} [data-main-con="quick"] .list li a strong {font-size:1.25em;color:var(--color-base);} @media all and (max-width:1468px){ [data-main-con="quick"] .list li a strong {font-size:1.125em;} } @media all and (max-width:1268px){ [data-main-con="quick"] .list {gap:2em;} [data-main-con="quick"] .list li a .icon {border-radius:1.374em;margin-bottom:1.5em;} [data-main-con="quick"] .list li a strong {font-size:1.063em;} } @media all and (max-width:1024px){ [data-main-con="quick"] .list {gap:1.5em;} } @media all and (max-width:968px){ [data-main-con="quick"] .list {flex-wrap:wrap;justify-content: center;gap:2em;} [data-main-con="quick"] .list li {width: calc(20% - 12em / 5);} } @media all and (max-width:668px) { [data-main-con="quick"] .list {gap:1.75em;} [data-main-con="quick"] .list li { width: calc(25% - 8.75em / 4);} [data-main-con="quick"] .list li a .icon {margin-bottom:1.25em;box-shadow: 1px 1px 14px rgba(0, 0, 0, .1);} [data-main-con="quick"] .list li a strong {font-size:1em;} } @media all and (max-width:379px) { [data-main-con="quick"] .list {gap:1em;} [data-main-con="quick"] .list li { width: 28%;} [data-main-con="quick"] .list li a .icon {border-radius:1em;} } /********************************************************************** 주요 프로그램 **********************************************************************/ [data-main-con="program"] {padding:80px 0;background:url("/resource/gukhwa/images/main/program_bg.jpg") no-repeat center center / cover;--sizeTabHig: 50px;} [data-main-con="program"] .title {text-align:center;justify-content:center;} [data-main-con="program"] .title h2 .small {color:var(--color-point);} [data-main-con="program"] .control_main_tab .tab_menu {margin-bottom:3.125em;gap:15px;} [data-main-con="program"] .control_main_tab .tab_menu li {min-width:178px;} [data-main-con="program"] .control_main_tab .tab_menu li>button{display:inline-flex; width:100%; align-items:center; height:var(--sizeTabHig); box-sizing:border-box; font-size:1.125em;; font-weight:600; color:var(--color-white); transition:var(--trans-ani);transition-property:background; background:#edb9cd; border-radius:2em; padding-left:30px; position:relative} [data-main-con="program"] .control_main_tab .tab_menu li>button:focus {outline-color:#fff !important;} [data-main-con="program"] .control_main_tab .tab_menu li>button .icon { position:absolute; display:flex;align-items:center;justify-content:center;width:40px; height:40px; top:50%; right:5px; transform:translateY(-50%); border-radius:100%; background-color:var(--color-white); transition:var(--trans-ani);} [data-main-con="program"] .control_main_tab .tab_menu li>button .icon::before, [data-main-con="program"] .control_main_tab .tab_menu li>button .icon::after {content: ''; position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;background-color: #edb9cd; } [data-main-con="program"] .control_main_tab .tab_menu li>button .icon::before {width: 14px;height: 2px;} [data-main-con="program"] .control_main_tab .tab_menu li>button .icon::after {width: 2px;height: 14px;opacity:0;visibility:hidden;} [data-main-con="program"] .control_main_tab .tab_menu li.active>button {background-color:var(--color-point); font-weight:700;transition:var(--trans-ani);} [data-main-con="program"] .control_main_tab .tab_menu li.active>button .icon::before, [data-main-con="program"] .control_main_tab .tab_menu li.active>button .icon::after {background-color:var(--color-point);} [data-main-con="program"] .control_main_tab .tab_menu li.active>button .icon::after { opacity:1;visibility:visible;} [data-main-con="program"] .conts_tab .swiper {width: calc(100% + 40px);max-width: 1640px;} [data-main-con="program"] .conts_tab .swiper-wrapper {align-items:stretch;} [data-main-con="program"] .conts_tab .swiper-slide {width:25%; } [data-main-con="program"] .conts_tab .swiper-slide a {display:block;background:var(--color-white);border:1px solid var(--color-white);margin:0 20px;;border-radius:40px;transition:var(--trans-ani);} [data-main-con="program"] .conts_tab .swiper-slide a:focus, [data-main-con="program"] .conts_tab .swiper-slide a:hover {border-color:var(--color-point);} [data-main-con="program"] .conts_tab .swiper-slide a .img {position:Relative;overflow: hidden;display: block;height: 0;padding-top: 66.76%;border-radius:40px 40px 0 0;} [data-main-con="program"] .conts_tab .swiper-slide a .img img {position: absolute;top: 50%;left: 50%; min-width: 100%;min-height: 100%;height: 100%;transform: translate(-50%, -50%) scale(1) rotate(0.001deg);object-fit: cover;-o-object-fit: cover;transition: 0.5s ease 0s;transition-property: transform;} [data-main-con="program"] .conts_tab .swiper-slide a:focus .img img, [data-main-con="program"] .conts_tab .swiper-slide a:hover .img img {transform: translate(-50%, -50%) scale(1.1) rotate(0.001deg) } [data-main-con="program"] .conts_tab .swiper-slide a .cont {padding: 1.75em 1.5em;} [data-main-con="program"] .conts_tab .swiper-slide a .cont .cate {color:var(--color-point);font-family:var(--font-TTT);font-size:1.125em;font-weight:600;} [data-main-con="program"] .conts_tab .swiper-slide a .cont dl dt {font-family:var(--font-TTT);font-size:1.375em;font-weight:600;margin-bottom:.375em;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;} [data-main-con="program"] .conts_tab .swiper-slide a .cont dl dd {font-size:1em;color:#555;height:2.7em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} [data-main-con="program"] .conts_tab .swiper-slide a .cont dl dd strong {color:var(--color-base);font-weight:700;} [data-main-con="program"] .swiper_control {margin-top:2.5em;} @media all and (max-width:1800px){ [data-main-con="program"] .control_main_tab .tab_menu {width:88%;} [data-main-con="program"] .conts_tab .swiper {width:88%;} [data-main-con="program"] .conts_tab .swiper-slide a {margin:0 10px;} } @media all and (max-width:1468px){ [data-main-con="program"] {padding:60px 0;} [data-main-con="program"] .conts_tab .swiper-slide a .cont {padding:1.5em 1.375em;} [data-main-con="program"] .conts_tab .swiper-slide a .cont .cate{font-size:1.063em;} [data-main-con="program"] .conts_tab .swiper-slide a .cont dl dt{font-size:1.25em;} [data-main-con="program"] .conts_tab .swiper-slide a .cont dl dd{font-size:inherit; height:inherit;} [data-main-con="program"] .swiper_control {margin-top:2.25em;} } @media all and (max-width:1268px){ [data-main-con="program"] {--sizeTabHig: 48px;} [data-main-con="program"] .control_main_tab .tab_menu {width:80%;} [data-main-con="program"] .control_main_tab .tab_menu {margin-bottom:3em;} [data-main-con="program"] .control_main_tab .tab_menu li {min-width:148px;} [data-main-con="program"] .control_main_tab .tab_menu li>button .icon{width:38px;height:38px;} [data-main-con="program"] .conts_tab .swiper {width:85%;} [data-main-con="program"] .conts_tab .swiper-slide {width:33.3%;} [data-main-con="program"] .conts_tab .swiper-slide a {border-radius:1.374em;} [data-main-con="program"] .conts_tab .swiper-slide a .img {border-radius:1.374em 1.375em 0 0;} [data-main-con="program"] .conts_tab .swiper-slide a .cont {padding: 1.375em 1.25em;} [data-main-con="program"] .conts_tab .swiper-slide a .cont .cate{font-size:1em;} [data-main-con="program"] .conts_tab .swiper-slide a .cont dl dt{font-size:1.125em;margin-bottom: .25em;} [data-main-con="program"] .swiper_control {margin-top:2em;} } @media all and (max-width:1024px){ [data-main-con="program"] {padding:50px 0;--sizeTabHig: 46px;} [data-main-con="program"] .control_main_tab .tab_menu {flex-wrap:wrap;width:77%;gap:12px;margin-bottom:2em;} [data-main-con="program"] .control_main_tab .tab_menu li {width: calc(33.3% - 48px / 3);max-width:190px;} [data-main-con="program"] .control_main_tab .tab_menu li>button .icon{width:36px;height:36px;} [data-main-con="program"] .conts_tab .swiper {width:82%;} [data-main-con="program"] .conts_tab .swiper-slide {width:50%;} [data-main-con="program"] .swiper_control {margin-top:1.875em;} } @media all and (max-width:768px){ [data-main-con="program"] {padding:40px 0;--sizeTabHig: 40px;} [data-main-con="program"] .control_main_tab .tab_menu {gap:10px;margin-bottom:1.75em;} [data-main-con="program"] .control_main_tab .tab_menu li>button{padding-left:25px;font-size:1.063em;} [data-main-con="program"] .control_main_tab .tab_menu li>button .icon{width:30px;height:30px;} [data-main-con="program"] .swiper_control {margin-top:1.75em;} } @media all and (max-width:668px){ [data-main-con="program"] .control_main_tab .tab_menu {width:75%;} [data-main-con="program"] .control_main_tab .tab_menu li{min-width:100px;} [data-main-con="program"] .control_main_tab .tab_menu li>button{padding-left:20px;font-size:1em;} [data-main-con="program"] .conts_tab .swiper {width:75%;} [data-main-con="program"] .conts_tab .swiper-slide {width:100%;} [data-main-con="program"] .conts_tab .swiper-slide a {margin:0;} } @media all and (max-width:468px){ [data-main-con="program"] .control_main_tab .tab_menu {margin-bottom:1.5em;} [data-main-con="program"] .control_main_tab .tab_menu li {min-width:94px;} [data-main-con="program"] .control_main_tab .tab_menu li>button{padding-left:14px;} [data-main-con="program"] .swiper_control {margin-top:1.5em;} } @media all and (max-width:379px){ [data-main-con="program"] .control_main_tab .tab_menu {width:80%;margin-bottom:1.375em;gap:5px;} [data-main-con="program"] .conts_tab .swiper-slide a {border-radius:1em;} [data-main-con="program"] .conts_tab .swiper-slide a .img {border-radius:1em 1em 0 0;} [data-main-con="program"] .swiper_control {margin-top:1.375em;} [data-main-con="program"] .conts_tab .swiper {width:80%;} } @media (max-width: 289px) { [data-main-con="program"] .control_main_tab .tab_menu li{width: calc(50% - 5px / 2);min-width:auto;} [data-main-con="program"] .control_main_tab .tab_menu li>button{padding:0 14px; justify-content: center;} [data-main-con="program"] .control_main_tab .tab_menu li>button .icon{display:none;} } /********************************************************************** 공지사항 & 홍보영상 **********************************************************************/ [data-main-con="board"] {display:flex;flex-wrap:wrap;justify-content: space-between;gap:80px;padding-bottom: 80px;} [data-main-con="board"] .title h2 .small {color:var(--color-point2);} [data-main-con="board"] .news_wrap {width:calc(50% - 80px / 2);} [data-main-con="board"] .news_wrap .box {background:#eefaf1;border-radius:40px;padding:2.5em;min-height:427.5px;} [data-main-con="board"] .news_wrap .box .list {display:flex;flex-flow:column;gap:0.938em;justify-content: space-between;} [data-main-con="board"] .news_wrap .box .list li a {display:flex;justify-content: space-between;align-items: center;gap:40px;background:var(--color-white);border:1px solid transparent;border-radius:20px;padding: 1.25em 2.5em;transition:var(--trans-ani);} [data-main-con="board"] .news_wrap .box .list li a:hover, [data-main-con="board"] .news_wrap .box .list li a:focus {border:1px solid var(--color-point2);} [data-main-con="board"] .news_wrap .box .list li a .date {width:60px;display:flex;flex-flow:column;text-align:center;} [data-main-con="board"] .news_wrap .box .list li a .date strong {color:var(--color-point2);font-weight:800;font-size:2.1875em;line-height: 1.1;} [data-main-con="board"] .news_wrap .box .list li a .date span {color:#555;} [data-main-con="board"] .news_wrap .box .list li a dl {width:calc(100% - 60px - 40px);} [data-main-con="board"] .news_wrap .box .list li a dl dt {font-size:1.125em;font-weight:700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; margin-bottom: .25em;} [data-main-con="board"] .news_wrap .box .list li a dl dd {font-size:1em;color:#555;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } [data-main-con="board"] .video_wrap {width:calc(50% - 80px / 2);} [data-main-con="board"] .video {position:relative;height:0;padding-bottom:56.25%;min-height:427.5px;border-radius:40px;overflow:hidden;} [data-main-con="board"] .video iframe {position:absolute;top:0;left:0;width:100%;height:100%;} [data-main-con="board"] .video iframe .ytp-large-play-button-red-bg .ytp-large-play-button-bg {fill:rgba(0,0,0,8) !important;} @media all and (max-width:1468px){ [data-main-con="board"] {gap:60px;padding-bottom:80px;} [data-main-con="board"] .news_wrap {width:calc(50% - 60px / 2);} [data-main-con="board"] .news_wrap .box {padding:1.75em;min-height:371.22px;} [data-main-con="board"] .news_wrap .box .list li {gap:12px;} [data-main-con="board"] .news_wrap .box .list li a {padding: 1.125em 2.25em;gap:20px;} [data-main-con="board"] .news_wrap .box .list li a .date strong {font-size:2em;line-height:1;} [data-main-con="board"] .news_wrap .box .list li a .date span {font-size:0.938em;} [data-main-con="board"] .news_wrap .box .list li a dl {width:calc(100% - 60px - 20px);} [data-main-con="board"] .news_wrap .box .list li a dl dt {font-size:1.063em;margin-bottom: .15em;} [data-main-con="board"] .news_wrap .box .list li a dl dd {font-size:.938em;} [data-main-con="board"] .video_wrap {width:calc(50% - 60px / 2);} [data-main-con="board"] .video {min-height:371.22px;} } @media all and (max-width:1268px){ [data-main-con="board"] {gap:60px;padding-bottom:60px;} [data-main-con="board"] .news_wrap {width:100%;} [data-main-con="board"] .news_wrap .box {min-height:auto;border-radius: 1.375em;} [data-main-con="board"] .news_wrap .box .list li a {border-radius:1em;padding:1.25em 1.5em;} [data-main-con="board"] .video_wrap {width:100%;} [data-main-con="board"] .video {min-height:auto;border-radius: 1.375em;} } @media all and (max-width:1024px){ [data-main-con="board"] {gap:50px;padding-bottom:50px;} } @media all and (max-width:768px){ [data-main-con="board"] {gap:40px;padding-bottom:40px;} [data-main-con="board"] .news_wrap .box {padding:1.375em;} [data-main-con="board"] .news_wrap .box .list li a {padding:1.125em 1.25em;gap:12px;} [data-main-con="board"] .news_wrap .box .list li a dl {width:calc(100% - 60px - 12px);} } @media all and (max-width:568px){ [data-main-con="board"] .news_wrap .box .list li a .date {width:50px;} [data-main-con="board"] .news_wrap .box .list li a .date strong {font-size:1.625em;} [data-main-con="board"] .news_wrap .box .list li a dl {width:calc(100% - 50px - 10px);} [data-main-con="board"] .news_wrap .box .list li a dl dt {margin-bottom:0;} [data-main-con="board"] .news_wrap .box .list li a dl dd {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} } @media all and (max-width:379px){ [data-main-con="board"] .news_wrap .box {border-radius: 1em;} [data-main-con="board"] .video {border-radius: 1em;} } /********************************************************************** 배너 **********************************************************************/ [data-main-con="banner"] {position:relative;background:#fff url(/resource/gukhwa/images/main/banner_bg.png) no-repeat center top / cover;min-height:582px;padding:0;} [data-main-con="banner"] .txt {margin-top: 1.125em;font-family:var(--font-TTT);font-size:2.5em;font-weight:600;} [data-main-con="banner"] .txt strong {color:var(--color-point);font-weight:600;} [data-main-con="banner"] .img .dragonfly {position:absolute;animation-name:updown;animation-duration:1s;animation-iteration-count:infinite;} [data-main-con="banner"] .img .dragonfly.left {top:0;left:2%;width:65px;height:212px;background:url(/resource/gukhwa/images/main/dragonfly_left.png) no-repeat center center / 100%;animation-delay:.5s;} [data-main-con="banner"] .img .dragonfly.center {top:5%;left:41.5%;width:430px;height:188px;background:url(/resource/gukhwa/images/main/dragonfly_center.png) no-repeat center center / 100%} [data-main-con="banner"] .img .dragonfly.right {top:36%;right:3%;width:37px;height:31px;background:url(/resource/gukhwa/images/main/dragonfly_right.png) no-repeat center center / 100%;animation-delay:.2s;} @media all and (max-width:1668px){ [data-main-con="banner"] .img .dragonfly.left {left:1%;} [data-main-con="banner"] .img .dragonfly.right {right:1%;} } @media all and (max-width:1468px){ [data-main-con="banner"] {background-position:right 30% top;} [data-main-con="banner"] .txt {margin-top:1em;} [data-main-con="banner"] .img .dragonfly.left, [data-main-con="banner"] .img .dragonfly.right {display:none;} [data-main-con="banner"] .img .dragonfly.center {top:11%;left:39%;width:360px;height:157px;} } @media all and (max-width:1268px){ [data-main-con="banner"] {min-height:480px;} [data-main-con="banner"] .txt {font-size:2.25em;margin-top:0;} [data-main-con="banner"] .img .dragonfly.center {top:8%;left:37%;width:340px;height:149px;} } @media all and (max-width:1168px){ [data-main-con="banner"] .img .dragonfly.center {top:11%;left:40%;width:280px;height:122px;} } @media all and (max-width:1024px){ [data-main-con="banner"] {min-height:360px;} [data-main-con="banner"] .txt {font-size:2em} [data-main-con="banner"] .img .dragonfly.center {top:12%;left:38%;width:240px;height:105px;} } @media all and (max-width:768px){ [data-main-con="banner"] {min-height:280px;background-position:right 20% top;background-size:1000px;} [data-main-con="banner"] .txt {width:60%;font-size:1.75em;} [data-main-con="banner"] .img .dragonfly.center {display:none;} } @media all and (max-width:468px){ [data-main-con="banner"] {background-position: left 22% center;} [data-main-con="banner"] .txt {width:100%;} } @media all and (max-width:389px){ [data-main-con="banner"] {min-height:260px;} [data-main-con="banner"] .txt {font-size:1.5em} }