/* ==============================
   기본 공통
   ============================== */
p { word-break: keep-all; }

.lead {
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: -0.02em;
    color: #555;
    font-weight: 300;
    word-break: keep-all;
}

@media screen and (max-width: 640px) {
    .lead { font-size: 16px; font-weight: 400; }
}


/* ==============================
   헤더 / GNB
   ============================== */
#header_wrap {
    position: fixed;
    width: 100%;
    height: 81px;
    background: rgba(0,0,0,0.5);
    z-index: 10;
}
.scrolled #header_wrap {
    background-color: #000;
    border-bottom: none;
    transition: all .3s ease;
}
#header {
    position: absolute;
    left: 50%;
    top: 0;
    max-width: 1400px;
    width: 100%;
    transform: translateX(-50%);
    z-index: 6;
    transition: all .3s ease;
}
#header .header-inner { width: 100%; height: 100%; }

#header .gnb {
    list-style: none;
    height: 100%;
    position: absolute;
    right: 0;
    margin: 0;
    padding: 0;
}
#header .gnb > li {
    float: left;
    position: relative;
    display: inline-block;
    width: 100px;
    vertical-align: middle;
    text-align: center;
}
#header .gnb > li,
#header #right-side-open {
    height: 80px;
    line-height: 80px;
    transition: all .3s ease;
}
#header .gnb > li > a {
    display: inline-block;
    line-height: 1em;
    width: 100%;
    color: #ddd;
    font-size: 16px;
    letter-spacing: -0.5px;
    font-weight: 600;
    text-decoration: none;
}
#header .gnb > li > a:hover { color: #fff; }
#header .gnb > li.active { background-color: #b0905e; }
#header .gnb > li.active > a { color: #fff; }

#header .gnb .login  { font-size: 12px; width: 70px; color: #fff; }
#header .gnb .join   { font-size: 12px; color: #fff; margin-left: 20px; }
#header .gnb .login a,
#header .gnb .join a { color: #ddd; font-size: 12px; }
#header .gnb .login a:hover,
#header .gnb .join a:hover { color: #fff; }

#header .header-inner .menu {
    cursor: pointer;
    text-indent: -9999px;
    position: absolute;
    top: 29px;
    left: 50%;
    width: 25px;
    height: 20px;
    background-image: url(../img/cate_more.gif);
    margin-left: 200px;
    border: 0;
    display: none;
}
#header .header-inner .menu.on { background-image: url(../img/cate_close.gif); }

#header #right-side-open {
    position: absolute;
    right: 0;
    width: 100px;
    cursor: pointer;
    border-left: 1px solid rgba(255,255,255,0.3);
    text-align: center;
    display: inline-block;
}
#header #right-side-open span {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1em;
    margin-top: -10px;
    margin-left: -10px;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
}

#header #logo { margin-left: 25px; padding: 0; }
#header #logo a { display: block; width: 240px; height: 80px; line-height: 80px; }
#header #logo img { width: 100%; }

/* 서브메뉴 */
#header .gnb .snb {
    display: none;
    position: absolute;
    right: -82px;
    width: 200px;
    top: 80px;
    border-top: 0;
    background-color: #000;
    z-index: 2;
    list-style: none;
    padding: 0;
    margin: 0;
}
#header .gnb .snb li {
    font-size: 14px;
    line-height: 3.1;
    text-align: left;
    border-top: 1px solid #414141;
}
#header .gnb .snb li a { color: #fff; display: block; padding-left: 20px; }
#header .gnb .snb li a:hover {
    color: #fff;
    display: block;
    background-color: #2253b8;
    text-decoration: none;
    line-height: 3.1;
}
#header .gnb .snb li:first-child { border-top: 0; }

@media screen and (max-width: 960px) {
    #header {
        display: block;
        background-color: transparent;
        top: 0;
        border-bottom: 0;
        position: fixed;
    }
    #header #logo { width: 120px; display: block; }
    #header .gnb  { display: none; }
}


/* ==============================
   모바일 햄버거 버튼
   ============================== */
@media screen and (max-width: 960px) {
    #open-button {
        position: fixed;
        z-index: 10000;
        right: 15px;
        padding-top: 18px;
        width: 75px;
        height: 80px;
        transition: all .3s ease-out;
        cursor: pointer;
        display: block;
    }
    #open-button .navicon-line {
        position: absolute;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        transition: all .7s ease-out;
    }
    #open-button .nl1 { top: 11px; right: 10px; width: 30px; }
    #open-button .nl2 { top: 19px; right: 10px; width: 24px; }
    #open-button .nl3 { top: 27px; right: 10px; width: 30px; }
    #open-button.on > div > div {
        transform: rotate(225deg);
        width: 25px;
        position: absolute;
        top: 15px;
        right: 10px;
        margin: 0;
        padding: 0;
        background-color: #fff;
    }
    #open-button.on > div > div:first-child { transform: rotate(135deg); }
    #open-button.scrolled .navicon-line { background-color: #333; }
    #open-button.on.scrolled > div > div { background-color: #fff; }
}


/* ==============================
   퀵메뉴 (우측 고정)
   ============================== */
@keyframes floating_quick {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

.right_quick-area {
    border: 1px solid #cb863d;
    box-shadow: 0 10px 14px -7px #a98f83;
    text-shadow: 0 1px 0 #a98f83;
    background: linear-gradient(#cb863d, #da8023);
    position: fixed;
    right: -120px;
    opacity: 0;
    border-radius: 40px;
    width: 85px;
    bottom: 120px;
    z-index: 100;
    padding: 25px 0 10px 0;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.right_quick-area.active {
    opacity: 1;
    right: 20px;
    animation: floating_quick 3s ease-in-out infinite;
}
.right_quick-area:hover { animation-play-state: paused; }

.right_quick-area .xi-apps { font-size: 22px; color: #fff; margin-bottom: 5px; display: block; text-align: center; }
.right_quick-area .quick {
    width: 100%;
    line-height: 1.3;
    text-align: center;
    color: #fff;
    font-size: 15px;
    display: block;
    margin-bottom: 15px;
}

.right_quick-area ul { margin: 0; padding: 0; list-style: none; }
.right_quick-area li { padding: 8px 0; position: relative; text-align: center; }

.right_quick-area li span {
    position: absolute;
    color: #b15610;
    border-radius: 8px;
    padding: 8px 12px;
    white-space: nowrap;
    background: #fff;
    right: 120px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    display: block;
    opacity: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    border: 1px solid #f0f0f0;
    pointer-events: none;
}
.right_quick-area li a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    width: 56px;
    height: 56px;
    margin: auto;
    border-radius: 50%;
}
.right_quick-area li img {
    width: 70px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: all 0.4s ease;
}
.right_quick-area li:hover a        { background: #fff; transform: scale(1.1); }
.right_quick-area li:hover img      { filter: none; opacity: 1; }
.right_quick-area li:hover span     { right: 95px; opacity: 1; }

.right_quick-area .btn_top_wrap { margin-top: 10px; padding-top: 10px; }
.right_quick-area .btn_top { background: rgba(0,0,0,0.1); }
.right_quick-area .btn_top i { font-size: 24px; color: #fff; transition: all 0.4s ease; }
.right_quick-area li:hover .btn_top i { color: #b15610; }

@media (max-width: 1200px) {
    .right_quick-area { display: none; }
}


/* ==============================
   모바일 오른쪽 사이드 메뉴
   ============================== */
#right-side {
    background-color: #333;
    position: fixed;
    z-index: 10;
    top: 0;
    right: -400px;
    max-width: 400px;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 30px;
    transition: right .3s ease;
    box-sizing: border-box;
    overflow: auto;
}
#right-side .side_gnb .call a {
    text-align: center;
    display: block;
    position: relative;
    background: #6cc043;
    color: #fff;
    font-weight: bold;
    height: 5em;
    line-height: 5em;
    border-radius: 3px;
    margin-top: 10px;
    padding: 2px 0 4px 0;
}
#right-side #btn-close-right-side {
    position: absolute;
    top: 20px;
    right: 0;
    color: #fff;
    width: 60px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    cursor: pointer;
}
#right-side #btn-close-right-side .fa.fa-times { font-size: 18px; padding-top: 20px; }
.right-side-on #right-side  { right: 0; }
.right-side-on #wrapper     { left: -300px; }
.right-side-on #header      { left: -300px; }
.right-side-on #rs-overlay  { display: block; }

/* 퀵 메뉴 (사이드바 내부) */
.quick_menu { width: 100%; margin: auto; padding-top: 20px; }
.quick_menu ul { text-align: center; padding: 0; margin: 0; list-style: none; }
.quick_menu li {
    display: inline-block;
    margin-left: -3px;
    width: 80px;
    border-right: 1px solid #ddd;
}
.quick_menu li:last-child { border: 0; }
.quick_menu li a {
    display: block;
    box-sizing: border-box;
    color: #f5f5f5;
    letter-spacing: -0.8px;
    text-align: center;
    position: relative;
    font-size: 12px;
}
.quick_menu li a:hover  { color: #fff; backface-visibility: hidden; }
.quick_menu li a.on {
    color: #fff;
    border-bottom: 2px solid #ff3300;
}

/* 카카오 */
.quick_kakao { text-align: center; height: 35px; background-color: #ffd800; display: inline-block; clear: both; }
.quick_kakao a { display: block; position: relative; background: #ffd800; }
.quick_kakao a img { display: block; margin: 0 auto; }

/* 사이드 GNB */
.side_gnb { position: relative; width: 100%; float: left; padding-top: 20px; }
.side_gnb p { color: #fff; text-align: center; padding: 20px; }
.side_gnb .menu-list { display: block; position: relative; border-bottom: 1px solid #555; margin-top: 60px; padding: 0; list-style: none; }
.side_gnb .menu-list > li > a {
    display: block;
    position: relative;
    color: #fff;
    font-size: 16px;
    line-height: 3.8em;
    padding: 0 1em;
    border-top: 1px solid #555;
    text-decoration: none;
}
.side_gnb .menu-list > li > a span.btn-toggle {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 10px;
    right: 0;
}
.side_gnb .menu-list > li > a i {
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-75%) rotate(135deg);
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-left-width: 0;
    border-bottom-width: 0;
    transition: transform .3s ease;
}
.side_gnb .menu-list > li.on > a i { transform: translateY(-25%) rotate(315deg); }
.side_gnb .menu-list > li > a i:before { content: ""; display: block; position: relative; padding-top: 100%; }

.side_gnb .depth-2 { display: none; padding: 0; margin: 0; list-style: none; }
.side_gnb .depth-2 > li { background-color: #ddd; }
.side_gnb .depth-2 > li > a {
    display: block;
    font-size: 1.2em;
    line-height: 3em;
    padding: 0 1.5em 0 2.2em;
    border-bottom: 1px solid #fff;
    color: #000;
}


/* ==============================
   이미지 슬라이드 (Swiper)
   ============================== */
#ad-box {
    max-width: 1200px;
    margin: 50px auto 0;
}
#ad-box .swiper-slide {
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom-right-radius: 20px;
}
#ad-box.swiper {
    overflow: visible;
    margin-top: 150px;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#ad-box.swiper .swiper-button-next:after,
#ad-box.swiper .swiper-button-prev:after { color: #fff; }

#ad-box .swiper-slide img {
    border-bottom-right-radius: 20px;
    max-width: 100%;
}
#ad-box .swiper-pagination-bullet { vertical-align: middle; position: relative; }
#ad-box .swiper-pagination-bullet .bullet-bar {
    display: block;
    width: 0;
    height: 8px;
    background-color: tomato;
    position: absolute;
    right: 0;
    top: 3px;
    opacity: 0;
    transition: all 0.5s;
    border-radius: 2px;
}
#ad-box .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 20px;
    height: 20px;
    background-color: tomato;
    position: relative;
    margin-right: 50px;
}
#ad-box .swiper-pagination-bullet.swiper-pagination-bullet-active .bullet-bar {
    display: block;
    width: 40px;
    height: 8px;
    background-color: tomato;
    position: absolute;
    right: -38px;
    top: 6px;
    opacity: 1;
}

/* 카피 영역 */
.copy_area {
    max-width: 1200px;
    color: #fff;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    margin: auto;
    padding: 0 80px;
}
.copy_area h2 {
    max-width: 450px;
    font-size: 44px;
    font-weight: bold;
    line-height: 1.3;
    text-align: left;
    font-family: 'GmarketSansMedium';
    letter-spacing: -2px;
}
.copy_area h3 {
    font-size: 16px;
    font-weight: 300;
    margin: 20px 0;
    color: #efefef;
    line-height: 1.5;
    text-align: left;
    max-width: 400px;
    word-break: keep-all;
}

@media screen and (max-width: 1150px) {
    .swiper-button-prev,
    .swiper-button-next   { display: none !important; }
    #ad-box.swiper        { margin-top: 50px; }
    #ad-box .swiper-slide img { border-radius: 0; }
}
@media screen and (max-width: 576px) {
    .copy_area        { padding: 0 24px; }
    .copy_area h2     { font-size: 28px; }
    .copy_area h3     { font-size: 14px; }
    #ad-box.swiper    { height: 320px; }
}


/* ==============================
   contents1
   ============================== */
.contents1 { width: 100%; padding: 150px 0; }
.contents1 h1 {
    text-align: center;
    font-weight: bold;
    margin-top: 0;
    font-size: 65px;
    font-family: 'GmarketSansLight';
}
.contents1 h1 strong { font-family: 'GmarketSansBold'; }
.contents1 p {
    color: #555;
    font-weight: 300;
    max-width: 600px;
    font-size: 16px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.5;
}

@media screen and (max-width: 1399px) {
    .contents1 h1 { font-size: 32px; }
    .contents1 .cardset .card { width: 49%; margin-bottom: 10%; padding-bottom: 45%; }
    .contents1 .card-text p { width: auto; position: absolute; top: 40%; left: 0; right: 0; }
}
@media screen and (max-width: 640px) {
    .contents1 { padding: 80px 20px; }
    .contents1 h1 { font-size: 26px; }
    .contents1 .cardset .card { width: 100%; padding-bottom: 65%; margin-bottom: 5%; }
}


/* ==============================
   contents2
   ============================== */
.contents2 {
    padding: 30px 0 0;
    text-align: center;
    overflow: hidden;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}
.wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.contents2 .wrap .box { width: 49%; position: relative; margin-bottom: 5%; }

/* left */
.contents2 .wrap .left {
    border-radius: 10px;
    padding: 0;
    height: 685px;
}
.contents2 .wrap .left h2 { font-size: 18px; letter-spacing: 0; }
.contents2 .wrap .left h1 { font-size: 50px; padding: 20px 0 0; letter-spacing: -1px; }
.contents2 .wrap .left p  { color: #555; padding: 10px 0 0; line-height: 1.5; font-size: 16px; }

/* right */
.contents2 .wrap .right { height: 685px; display: flex; flex-direction: column; }
.contents2 .wrap .right .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: 1;
}
.contents2 .wrap .right .top .color_box {
    width: 49%;
    background-color: #fbf7f3;
    border-radius: 10px;
    padding: 10px 20px 30px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    transition: background-color 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color     0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.contents2 .wrap .right .top .color_box:hover { background-color: #f7f1ea; border-color: #ccc; }

.contents2 .wrap .right .top .color_box .img_wrap { overflow: hidden; border-radius: 8px; display: inline-block; }
.contents2 .wrap .right .top .color_box .img_wrap img {
    display: block;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
    transform: scale(0.7);
}
.contents2 .wrap .right .top .color_box:hover .img_wrap img { transform: scale(0.8); }

.contents2 .wrap .right .top .color_box h2,
.contents2 .wrap .right .top .color_box p {
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity  0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color    0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.contents2 .wrap .right .top .color_box h2 {
    font-size: 25px;
    font-weight: 600;
    color: #000;
    letter-spacing: 0;
    padding: 0;
    transform: translateY(0);
    opacity: 0.85;
}
.contents2 .wrap .right .top .color_box:hover h2 { transform: translateY(6px); opacity: 1; color: #111; }

.contents2 .wrap .right .top .color_box p {
    padding-top: 10px;
    font-size: 16px;
    color: #000;
    opacity: 0.5;
    font-weight: 300;
    line-height: 1.3;
    transform: translateY(8px);
    transition-delay: 0.05s;
}
.contents2 .wrap .right .top .color_box:hover p { opacity: 0.7; transform: translateY(0); }
.contents2 .wrap .right .top .photo02 { margin-left: 2%; }

/* 배너 하단 */
.contents2 .wrap .right .bottom {
    padding: 50px;
    clear: both;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0) 100%),
        url("../img/m_banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: 10px;
    margin-top: 23px;
    text-align: left;
    box-sizing: border-box;
    flex-shrink: 0;
    color: #fff;
}
.contents2 .wrap .right .bottom h2 { font-size: 26px; color: #fff; font-weight: 700; margin-bottom: 5px; }
.contents2 .wrap .right .bottom h3 {
    font-family: 'GapyeongHanseokbongBigBrush';
    font-size: 42px;
    color: #ffff00;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -1px;
}
.contents2 .wrap .right .bottom p {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    padding: 0;
    max-width: 100%;
    line-height: 1.3;
    margin-bottom: 10px;
}
.contents2 .wrap .right .bottom span { display: block; font-size: 17px; color: #ccc; line-height: 1.5; }

/* CMS 박스 */
.contents2 .wrap .right .bottom em.cms_info_area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 12px 20px;
    color: #fff;
    font-style: normal;
    width: fit-content;
    box-sizing: border-box;
    margin-top: 20px;
}
.contents2 .wrap .right .bottom em.cms_info_area span { font-size: 18px; font-weight: 700; color: #d9ffe4; line-height: 1.2; }
.contents2 .wrap .right .bottom em.cms_info_area .btn_glass {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.9);
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 10px 20px;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    transition: all 0.3s ease;
}
.contents2 .wrap .right .bottom em.cms_info_area .btn_glass i { font-size: 20px; margin-left: 2px; display: block; }
.contents2 .wrap .right .bottom em.cms_info_area .btn_glass:hover { background: rgba(255,255,255,1); transform: translateY(-2px); }

/* contents2 반응형 */
@media screen and (max-width: 978px) {
    .contents2 .wrap .box { width: 100%; margin-bottom: 20px; }
    .contents2 .wrap .left,
    .contents2 .wrap .right { height: auto; }

    .contents2 .wrap .left {margin-top:50px;}
    .contents2 .wrap .right .bottom { padding: 30px; }
    .contents2 .wrap .right .bottom h3 { font-size: 32px; }
}
@media screen and (max-width: 576px) {	
	.contents2 {padding: 80px 0 0;}
    .contents2 .wrap .right .top .color_box    { width: 100%; }
    .contents2 .wrap .right .top .photo02      { margin-left: 0; margin-top: 2%; }
    .contents2 .wrap .right .bottom            { padding: 24px; }
    .contents2 .wrap .right .bottom h2         { font-size: 20px; }
    .contents2 .wrap .right .bottom h3         { font-size: 26px; }
    .contents2 .wrap .right .bottom p          { font-size: 15px; }
    .contents2 .wrap .right .bottom em.cms_info_area {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
}


/* ==============================
   contents3
   ============================== */
.contents3 { width: 100%; padding: 0; }
.contents3 .wrap .latest { border-radius: 20px; padding: 10px 30px 30px; }
.contents3 .wrap .latest h2 { color: #000; text-align: center; font-size: 30px; padding-top: 20px; font-weight: bold; }
.contents3 .wrap .latest p  { text-align: center; font-size: 16px; color: #fff; opacity: 0.8; padding: 20px 0; word-break: keep-all; line-height: 1.5; font-weight: 300; }

.contents3 .wrap .latest1 {
    border: 1px solid #e4e4e4;
    width: 18.4%;
    float: left;
    margin-right: 1.6%;
    background-color: #fff;
    transition: all 0.4s ease;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.contents3 .wrap .latest1:last-child { margin-right: 0; }
.contents3 .wrap .latest1 h2 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    padding: 20px 0 0 0;
    text-align: center;
    transition: color 0.3s ease;
}
.contents3 .wrap .latest1 img { transition: transform 0.4s ease; }
.contents3 .wrap .latest1:hover {
    border: 1px solid #eee;
    background-color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.contents3 .wrap .latest1:hover h2  { color: #000; }
.contents3 .wrap .latest1:hover img { transform: scale(1.2); }

.contents3 .wrap .latest2 { background-color: #b0773a; width: 23.8%; }
.contents3 .wrap .latest3 { background-color: #b08539; width: 23.8%; }
.contents3 .wrap .latest4 { background-color: #b09338; width: 23.8%; }
.contents3 .wrap .latest03 {
    background-color: #fff;
    width: 48%;
    height: 351px;
    background-image: url(../img/content7.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* 탭 */
.contents3 .tab_wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid #ddd;
}
.contents3 .tab_wrap .notice { width: 33.3333%; text-align: center; }
.contents3 .tab_wrap .notice a { display: block; padding: 10px 0; margin-left: -1px; font-size: 18px; }
.contents3 .tab_wrap .notice .on { border-bottom: 2px solid #ff5555; color: #ff5555; font-weight: bold; font-size: 18px; }

@media screen and (max-width: 978px) {
    .contents3 .wrap .latest01,
    .contents3 .wrap .latest02,
    .contents3 .wrap .latest03 { width: 100%; margin-top: 20px; }
}
@media screen and (max-width: 768px) {
    .contents3 .wrap .latest1 { width: 48%; margin-right: 2%; margin-bottom: 10px; }
    .contents3 .wrap .latest1:nth-child(2n) { margin-right: 0; }
    .contents3 .wrap .latest03 { height: 220px; }
}
@media screen and (max-width: 480px) {
    .contents3 .wrap .latest1 { width: 100%; margin-right: 0; }
    .contents3 .tab_wrap .notice a { font-size: 14px; }
}


/* ==============================
   contents4
   ============================== */
.contents4 { width: 100%; padding: 30px 0; margin-top: 50px; clear: both; }
.contents4 .inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.contents4 .wrap .box {
    width: 49%;
    position: relative;
    margin-bottom: 5%;
    border: 1px solid #ddd;
    padding: 50px 50px 20px;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.contents4 .icon p  { font-size: 16px; color: #000; opacity: 0.8; font-weight: 400; padding: 10px 0; max-width: 160px; word-break: keep-all; }
.contents4 .icon i  { text-align: center; font-size: 38px; font-weight: 400; display: block; color: #000; }
.contents4 .icon .txt a { display: block; height: 165px; width: 14.2%; }

.contents4 .box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.contents4 .box-header h1 { font-size: 30px; color: #000; font-weight: 500; letter-spacing: -1px; text-align: left; padding: 0 0 5px; }
.contents4 .box-header h2 { font-size: 25px; color: #000; text-align: center; font-weight: 300; letter-spacing: -1px; }
.contents4 .more-btn {
    font-size: 13px;
    color: rgba(0,0,0,0.7);
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.4);
    padding: 4px 12px;
    white-space: nowrap;
    border-radius: 5px;
}
.contents4 .more-btn:hover { background: rgba(0,0,0,0.8); color: #fff; }

@media screen and (max-width: 978px) {
    .contents4 { margin-top: 50px; }
    .contents4 .icon { width: 50%; }
    .contents4 .icon:nth-child(3) { border-left: 0; }
    .contents4 .icon:nth-child(5) { border-left: 0; }
}
@media screen and (max-width: 768px) {
    .contents4 .wrap .box { width: 100%; padding: 30px 20px 20px; }
    .contents4 .box-header h1 { font-size: 22px; }
}
@media screen and (max-width: 480px) {
    .contents4 .icon .txt a { width: 25%; height: 100px; }
}


/* ==============================
   contents5
   ============================== */
.contents5 { background-color: #fff; padding-bottom: 150px; }

@media screen and (max-width: 978px) {
    .contents5 { padding-bottom: 50px; }
}


/* ==============================
   contents6
   ============================== */
.contents6 {
    width: 100%;
    margin-top: 80px;
    padding: 50px 0;
    background-color: #fbf7f3;
}
.contents6 .inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.contents6 .event01 {
    width: 40%;
    background-image: url("../img/contents6_bg.png");
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: left bottom;
    background-attachment: fixed;
}
.contents6 .event02 { width: 60%; }
.contents6 .event .top    { clear: both; padding-top: 30px; }
.contents6 .event .bottom { clear: both; }
.contents6 .event01 h2 { font-size: 20px; color: #000; font-weight: 300; }
.contents6 .event01 h3 {
    font-family: 'GapyeongHanseokbongBigBrush';
    font-size: 50px;
    font-weight: 500;
    color: #333;
    line-height: 1.1;
    padding-top: 10px;
}
.contents6 .event01 p {
    font-size: 16px;
    color: #555;
    font-weight: 300;
    padding-top: 20px;
    display: inline-block;
    max-width: 400px;
    word-break: keep-all;
    line-height: 1.5;
}

@media screen and (max-width: 978px) {
    .contents6 .event01,
    .contents6 .event02 { width: 100%; }
	.contents6 .event01 {background-size:60%;text-align:right;padding-top:70px;padding-right:30px;}
    .contents6 .event .top { padding-bottom: 20px; }
    .contents6 .event01 h3 { font-size: 38px; }
}
@media screen and (max-width: 576px) {
    .contents6 { margin-top: 40px; padding: 30px 20px; }
    .contents6 .event .top { padding-bottom: 100px; }
	.contents6 .event01 {background-position: 0 80px;}
    .contents6 .event01 h2 { font-size: 16px; text-align:right;}
    .contents6 .event01 h3 { font-size: 28px; text-align:right; }
    .contents6 .event01 p  { font-size: 14px; text-align:right; }
}


/* ==============================
   스크롤 애니메이션
   ============================== */
.contents1, .contents2, .contents3,
.contents4, .contents5, .contents6 {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.contents1.is-visible, .contents2.is-visible, .contents3.is-visible,
.contents4.is-visible, .contents5.is-visible, .contents6.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.contents1 { transition-delay: 0s; }
.contents2 { transition-delay: 0.1s; }
.contents3 { transition-delay: 0.15s; }
.contents4 { transition-delay: 0.2s; }
.contents5 { transition-delay: 0.1s; }
.contents6 { transition-delay: 0.15s; }

/* 내부 요소 순차 애니메이션 */
.contents1 .inner h1,
.contents1 .inner p {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.contents1.is-visible .inner h1 { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.contents1.is-visible .inner p  { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }

.contents2 .wrap .left {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.contents2 .wrap .right {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.contents2.is-visible .wrap .left  { opacity: 1; transition-delay: 0.2s; }
.contents2.is-visible .wrap .right { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }

.contents3 .wrap .latest {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.contents3.is-visible .wrap .latest1 { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.contents3.is-visible .wrap .latest2 { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.contents3.is-visible .wrap .latest3 { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.contents3.is-visible .wrap .latest4 { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

.contents4 .icon {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.contents4.is-visible .icon:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.contents4.is-visible .icon:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.contents4.is-visible .icon:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.contents4.is-visible .icon:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.contents4.is-visible .icon:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.contents4.is-visible .icon:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }

.contents6 .event01,
.contents6 .event02 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.contents6.is-visible .event01 { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.contents6.is-visible .event02 { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }

@media (max-width: 768px) {
    .contents1, .contents2, .contents3,
    .contents4, .contents5, .contents6 { transform: translateY(30px); }
}


/* ==============================
   서브 상단 비주얼
   ============================== */
.sub_visual { position: relative; max-width: 2560px; margin: 0 auto; overflow: hidden; background-repeat: no-repeat; background-position: center top; }
.sub_visual.visual01 .bg { background-image: url(../img/sub_visual01.jpg); }
.sub_visual.visual02 .bg { background-image: url(../img/sub_visual02.jpg); }
.sub_visual.visual03 .bg { background-image: url(../img/sub_visual03.jpg); }
.sub_visual.visual04 .bg { background-image: url(../img/sub_visual04.jpg); }
.sub_visual.visual05 .bg { background-image: url(../img/sub_visual05.jpg); }
.sub_visual.visual06 .bg { background-image: url(../img/sub_visual06.jpg); }

.sub_visual .title_warp { max-width: 1240px; margin: 0 auto; display: table; }
.sub_visual .title_warp .title_page { height: 200px; position: relative; display: table-cell; vertical-align: middle; text-align: center; margin: 0 auto; z-index: 2; }
.sub_visual h3          { font-size: 16px; font-weight: 500; padding: 30px 0 10px; letter-spacing: 1px; color: #fff; opacity: 0.8; }
.sub_visual .main_title { font-family: 'BookkMyungjo'; font-size: 42px; font-weight: 500; text-align: center; color: #fff; letter-spacing: -1px; }
.sub_visual .inBox      { font-size: 14px; padding-top: 10px; color: #fff; }
.sub_visual .inBox i    { font-size: 14px; color: #fff; display: inline-block; }
.sub_visual .inBox a    { padding: 0 13px 0 0; }
.sub_visual .inBox span { padding: 0 13px; opacity: 0.8; font-size: 14px; font-weight: 400; color: #fff; }
.sub_visual .inBox span.strong { opacity: 1; padding: 0 0 0 13px; }

.sub_visual .cover {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url(../img/sub_visual_cover.png) center bottom no-repeat;
    background-size: cover;
    min-width: 100%;  /* 1200px → 100% 로 수정 */
    opacity: .6; z-index: 1;
}
.sub_visual .bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    transition: all .5s ease;
}
.sub_visual.tmp { height: 80px; background-color: #000; }
.sub_visual.tmp .title_warp { display: none; }

@media screen and (max-width: 960px) {
    .sub_visual { margin: 50px auto 0; }
}
@media screen and (max-width: 640px) {
    .sub_visual .title_warp { width: 100%; }
    .sub_visual .title_warp .title_page { height: 300px; }
    .sub_visual h3          { font-size: 12px; }
    .sub_visual .main_title { font-size: 28px; }
    .sub_visual .inBox      { font-size: 12px; }
}


/* ==============================
   SNS 공유 영역
   ============================== */
.share-area { float: right; display: block; padding-top: 16px; box-sizing: border-box; }
.share-area .hide-wrap { width: 151px; height: 34px; overflow: hidden; float: left; }
.share-area .hide-wrap .hide-area { width: 151px; height: 34px; position: relative; left: 200px; }
.share-area .hide-wrap .hide-area ul { overflow: hidden; padding: 0; margin: 0; }
.share-area .hide-wrap .hide-area ul li { float: left; margin-left: 13px; cursor: pointer; }
.share-area .hide-wrap .hide-area ul li:first-child { margin-left: 0; }
.share-area .share-btn {
    width: 34px; height: 34px;
    background-image: url(../img/share_open_bt.png);
    float: right;
    text-indent: -9999px;
    padding-left: 18px;
    box-sizing: unset;
    background-repeat: no-repeat;
    background-position-x: right;
    transition: all .5s ease;
    background-color: inherit;
    border: 0;
    margin-right: 20px;
}
.share-area .share-btn.active { background-image: url(../img/share_close_bt.png); border-left: 1px solid #fff; }

@media screen and (max-width: 768px) {
    .share-area { display: none; }
}


/* ==============================
   서브 콘텐츠 제목
   ============================== */
.content_wrap { width: 100%; }
.content_wrap .txtCon { max-width: 1400px; margin: 0 auto; padding: 20px 20px 50px; clear: both; }
.content_wrap .txtCon .sub_title { margin: 40px 0 30px; padding: 0; text-align: center; }
.content_wrap .txtCon .sub_title h2 {
    font-family: 'GapyeongHanseokbongBigBrush';
    font-size: 35px;
    font-weight: 100;
    line-height: 36px;
    padding-bottom: 20px;
    margin-bottom: 50px;
}
.content_wrap .txtCon .sub_title p { font-size: 16px; color: #555; font-weight: 300; word-break: keep-all; }
.content_wrap .txtCon .content_area { width: 100%; }
.content_wrap .txtboard { max-width: 1400px; margin: 0 auto; padding: 20px 20px 50px; font-size: 12px; line-height: 1.75; letter-spacing: -0.02em; clear: both; }
.content_wrap .txtboard span { font-size: 14px; }

@media screen and (max-width: 640px) {
    .content_wrap .txtCon .sub_title { margin: 50px 0; }
    .content_wrap .txtCon .sub_title h2 { font-size: 26px; }
}


/* ==============================
   푸터
   ============================== */
#footer { width: 100%; height: auto; background-color: #5f3f26; clear: both; }
.foot_menu { width: 100%; padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.1); }
.foot_menu .inner { max-width: 1400px; margin: 0 auto; }
.foot_menu .fm { float: left; padding: 0; margin: 0; list-style: none; }
.foot_menu .fm li { display: inline-block; line-height: 2em; margin-right: 15px; padding-right: 15px; border-right: 1px solid rgba(255,255,255,0.15); }
.foot_menu .fm li a { font-size: 1.08em; color: #efebe9; }
.foot_menu .fm li a:hover { color: #fff; }
.foot_menu .fm li a.point { color: #32c0eb; }
.foot_menu .fm li:last-child { border-right: 0; margin-right: 0; }

.foot_box { width: 100%; padding: 20px; }
.footer_in {
    max-width: 1400px;
    padding: 30px 20px 0;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.footer_in address {
    flex: 1 1 auto;
    font-style: normal;
    margin-bottom: 30px;
    min-width: 260px;
}
.footer_in address h5   { font-size: 20px; letter-spacing: 3px; line-height: 1.8; padding-bottom: 20px; color: #fff; font-weight: bold; }
.footer_in address p    { overflow: hidden; font-size: 1.05em; color: #efebe9; }
.footer_in address p strong { font-weight: 500; color: #ccc; }
.footer_in address p span   { font-size: 15px; display: inline-block; margin-right: 10px; line-height: 1.8em; }
.footer_in address p.addr   { margin-top: 18px; }
.footer_in .sns {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding-top: 4px;
}
.footer_in .sns .sns_icon {
    display: inline-block; margin-left: 10px;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 10px; border-radius: 50%;
    width: 40px; height: 40px;
    text-align: center; line-height: 20px;
    color: #efebe9;
}
.footer_in .sns .sns_icon:hover { color: #1a1a1a; background-color: #fff; border-color: #fff; }
.footer_in .copylight {
    width: 100%;
    font-size: 10px;
    color: #eee;
    margin-top: 10px;
    padding-bottom: 20px;
    letter-spacing: 2px;
}

/* ==============================
   공통 SNS 버튼 베이스
   ============================== */
.btn_youtube_white,
.btn_band_white {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #333333;
    padding: 30px 20px 30px 5px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    outline: none;
    text-decoration: none;
    white-space: nowrap;
    width: 260px;
    height: 52px;
    box-sizing: border-box;
}
.btn_youtube_white img,
.btn_band_white img { filter: none; flex-shrink: 0; }

/* ==============================
   유튜브 버튼
   ============================== */
.btn_youtube_white:hover {
    background-color: #ff0000;
    border-color: #ff0000;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,0,0,0.3);
}
.btn_youtube_white:hover img { filter: brightness(0) invert(1); }
.btn_youtube_white:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(255,0,0,0.1); }

/* ==============================
   밴드 버튼
   ============================== */
.btn_band_white:hover {
    background-color: #55b246;
    border-color: #55b246;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(85,178,70,0.3);
}
.btn_band_white:hover img { filter: brightness(0) invert(1); }
.btn_band_white:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(85,178,70,0.15); }

/* ==============================
   아이패드 (769px ~ 1024px)
   ============================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .footer_in {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer_in .sns {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10px 0 20px;
    }
    .btn_youtube_white,
    .btn_band_white {
        width: 290px;
        height: 52px;
    }
    .foot_menu .fm li { margin-right: 8px; padding-right: 8px; }
}

/* ==============================
   모바일 (~768px)
   ============================== */
@media screen and (max-width: 768px) {
    .footer_in {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer_in .sns {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10px 0 20px;
    }
    .btn_youtube_white,
    .btn_band_white {
        width: 240px;
        height: 52px;
    }
    .foot_menu .fm li { margin-right: 8px; padding-right: 8px; }
}

/* ==============================
   모바일 (~640px)
   ============================== */
@media screen and (max-width: 640px) {
    .footer_in { text-align: center; }
    .footer_in address { width: 100%; text-align: left; }
    .footer_in .sns {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 20px;
        gap: 10px;
    }
    .btn_youtube_white,
    .btn_band_white {
        width: 100%;
        height: 48px;
        font-size: 15px;
        justify-content: center;
    }
    .foot_menu .fm li { display: block; border-right: 0; }
    .footer_in .customer { width: 100%; border-left: 0; margin-left: 0; padding-left: 0; }
}


/* ==============================
   팝업 (약관 등)
   ============================== */
.tl_pop_con { background: #fff; }
.tl_pop_con h2.f_pop_tit { width: 100%; height: 80px; line-height: 80px; background: #076aa3; font-size: 20px; color: #fff; }
.tl_pop_con h2.f_pop_tit img   { display: inline-block; margin-left: 50px; margin-right: 5px; margin-top: -10px; width: 120px; }
.tl_pop_con h2.f_pop_tit span  { display: inline-block; padding-left: 50px; }
.f_pop_wrap { line-height: 23px; text-align: justify; word-break: break-all; font-size: 16px; overflow-y: auto; }
.f_pop_wrap strong { color: #00a19a; font-weight: normal; }
.f_pop_wrap p { color: #333; padding: 40px 50px; line-height: 1.6; }

.mfp-close {
    width: 40px; height: 40px;
    text-indent: -999px;
    opacity: 1;
    overflow: hidden;
    background-color: transparent;
    border: 0;
}
.mfp-close:after {
    content: '';
    display: block;
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    background: url("../img/btn_close_w.png") no-repeat center center;
    transition: transform 300ms;
    border-radius: 50%;
}
button.mfp-close:hover:after { transform: rotate(270deg); }

@media screen and (max-width: 576px) {
    .f_pop_wrap p { padding: 24px 20px; font-size: 14px; }
    .tl_pop_con h2.f_pop_tit { font-size: 16px; }
    .tl_pop_con h2.f_pop_tit img { margin-left: 20px; width: 90px; }
    .tl_pop_con h2.f_pop_tit span { padding-left: 20px; }
}