@import url("common.css");



#header.nofixed {}
/* ¼­ºêž */
#visual{position:relative;width:100%;height:var(--vh);background: #585656;}
#visual .visual_in {position:relative; height:100%; display:flex; flex-wrap:wrap; align-content:center; box-sizing:border-box;}
#visual .visual_in .v_txt {width:62%; z-index:1;}
#visual .visual_in .v_txt p {font-size: 1rem; font-weight: 500; line-height: 140%; color:rgba(255,255,255,0.6); opacity:0; transform: translateY(60px); animation: slide-up 0.9s ease; animation-delay:0.3s; animation-fill-mode: both;}
#visual .visual_in .v_txt h3 {font-size: 4.375rem;font-weight: 500;line-height: 100%;color:var(--white);margin:0 0 0;font-family: 'NEXON Lv1 Gothic OTF';}
#visual .visual_in .v_txt h3.visual-tit.splitting .char {animation: slide-up 0.9s ease; animation-fill-mode: both; animation-delay:calc( 0.6s + (.05s * var(--char-index)) ); line-height:1.55;}

#visual .v_bg{position:absolute; left:0; top:0; width:100%; height:100%; overflow: hidden;}
#visual .v_bg .bg{position:absolute;left:0;top:0;opacity: 0.4;width:100%;height:100%;transform: scale(1);animation: m_vsImg 1.8s;filter: grayscale(1);}
#visual2 .v_bg2{position:absolute;left:0;top:0;width:100%;height: 300px;overflow: hidden;}
#visual2 .v_bg2 .bg{position:absolute;left:0;top:0;opacity: 0.4;width:100%;height:100%;transform: scale(1);animation: m_vsImg 1.8s;filter: grayscale(1);}

#visual .scr {position:absolute; bottom:52px; left:50%; margin-left:-675px; display:flex; flex-wrap:wrap; align-items:center;  z-index:91;}
#visual .scr svg {opacity:0.6;}
#visual .scr span::after {content:'\ead0'; font-family:var(--icon); font-size:20px; margin-left:3px; display:block; color:var(--white); opacity:0.6; animation: scroll_down 1.5s linear infinite; }


#visual2{position:relative;width:100%;height: 358px;background: #7f7f7f;}
#visual2 .visual_in {position:relative; height:100%; display:flex; flex-wrap:wrap; align-content:center; box-sizing:border-box;}
#visual2 .visual_in .v_txt {width: auto;
    z-index: 10;
    margin: auto;}
#visual2 .visual_in .v_txt p {font-size: 1rem; font-weight: 500; line-height: 140%; color:rgba(255,255,255,0.6); opacity:0; transform: translateY(60px); animation: slide-up 0.9s ease; animation-delay:0.3s; animation-fill-mode: both;}
#visual2 .visual_in .v_txt h3 {font-size: 4.375rem;font-weight: 500;line-height: 100%;color:var(--white);margin:0 0 0;font-family: 'NEXON Lv1 Gothic OTF';text-align: center;}

#visual2 .visual_in .v_txt h3.visual-tit.splitting .char {animation: slide-up 0.9s ease; animation-fill-mode: both; animation-delay:calc( 0.6s + (.05s * var(--char-index)) ); line-height:1.55;}

#visual2 .scr {position:absolute; bottom:52px; left:50%; margin-left:-675px; display:flex; flex-wrap:wrap; align-items:center;  z-index:91;}
#visual2 .scr svg {opacity:0.6;}
#visual2 .scr span::after {content:'\ead0'; font-family:var(--icon); font-size:20px; margin-left:3px; display:block; color:var(--white); opacity:0.6; animation: scroll_down 1.5s linear infinite; }


@keyframes scroll_down {
	0%,100% { transform:translateY(-25%); opacity: 1;}
	50% { transform:translateY(25%); opacity: 0.6;}
}

@keyframes m_vsImg {
	0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}
@keyframes v_txt {
	0% { transform:translateY(60px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}


/* ºñÁÖ¾ó lnb */
.visual_lnb {position:absolute;margin-top: -39px;width:100%;/* position:sticky; top:0; left:0; margin-top:-88px;  */background-color: #00000059;z-index: 9;transition:top 1s ease;}

.visual_lnb {}
.visual_lnb dl {display: flex; flex-wrap:wrap; justify-content:flex-end; max-width:1350px; width:100%; margin:0 auto;}
.visual_lnb dl a {position:relative;}
.visual_lnb dl a::after {content:''; width:1px; height:100%; background:rgba(255,255,255,0.12); position:absolute; right:0; top:0;}
.visual_lnb dl dt {width: 65px; position:relative;}
.visual_lnb dl dt::before {content:''; width:1px; height:100%; background:rgba(255,255,255,0.12); position:absolute; left:0; top:0;}
.visual_lnb dl dt a {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;height:100%;align-items: center;}
.visual_lnb dl dt a::before {content:'\e58c'; font-family:var(--icon); color:rgba(255,255,255,.7); font-size:24px;}
.visual_lnb dl dd {position:relative; max-width:305px; width:calc((100% - 65px) / 2);}
.visual_lnb dl dd .txt {width:100%; padding:0 50px 0 20px; box-sizing:border-box; position: relative; font-size:1rem; line-height:38px; color:rgba(255,255,255,.7); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; transition:all 0s ease;}
.visual_lnb dl dd .txt:before {content:'\e5c6'; font-family:var(--icon); color:inherit; position:absolute; top:50%; right:20px; font-size:20px; margin-top:-10px; font-weight:300; line-height:1; transition:all 0.4s ease;}
.visual_lnb dl dd .txt.on:before {transform:rotate(180deg); transition:all 0.4s ease;}
.visual_lnb dl dd .dlst {position: absolute;transform:translateY(-100%);top: 0;z-index: 9999999999999999999999999999;margin: 0 0 0;width:100%;background-color: var(--white);padding: 15px 20px;box-sizing:border-box;display: none;box-shadow:5px 5px 15px rgba(0,0,0,0.05);}
/* 드롭다운 위치 수정 */
.visual_lnb dl dd .dlst{
  position:absolute;
  top: 103%;      /* dd 바로 아래에 붙도록 */
  left:0;
  width:100%;
  transform:none;    /* ← 이게 위로 올리던 주범 */
  margin:0;
  background-color:var(--white);
  padding:15px 20px;
  box-sizing:border-box;
  display:none;
  box-shadow:5px 5px 15px rgba(0,0,0,0.05);
  z-index: 1;   /* 아래 2번에서 부모 z-index를 올리면 이 값은 크게 안 중요 */
}
.visual_lnb dl dd .dlst.on{ display:block; }

.visual_lnb dl dd .dlst ul {}
.visual_lnb dl dd .dlst ul li {padding: 0 0 4px;}
.visual_lnb dl dd .dlst ul li:last-child {padding: 0;}
.visual_lnb dl dd .dlst ul li a {font-size:1rem; transition:all .2s linear; line-height: 120%; }
.visual_lnb dl dd .dlst ul li a::after {display:none;}
.visual_lnb dl dd .dlst ul li a.on {color:var(--main);}

/*.visual_lnb dl dd .dlst ul.prd li:last-of-type {display:none;}*/

.visual_lnb.fixed {position:fixed; background:var(--white); top:0; margin-top:0; /* box-shadow:5px 1px 15px rgb(0 0 0 / 5%); margin-top:0; */ border-bottom:1px solid var(--border);}
.visual_lnb.fixed dl a::after {background:var(--border);}
.visual_lnb.fixed dl dt::before {background:var(--border);}
.visual_lnb.fixed dl dt a::before {color:var(--black);}
.visual_lnb.fixed dl dd .txt {color:var(--basic); line-height:60px; transition:all 0s ease;}
.visual_lnb.fixed dl dd .txt:before {color:var(--black);}
.visual_lnb.fixed dl dd .dlst {margin:1px 0 0; transform:translateY(0); top:60px; border:1px solid var(--border); border-top:0; box-sizing:border-box;}
#header.fixed + #visual + .visual_lnb.fixed {top:81px; transition:top 1s ease;}









/*** °øÅë css ***/
#contents {
    padding: 30px 0 0;
    background-image: url(/img/back_main.jpg);
    background-size: 1126px;
    }
.contents_in {padding: 20px 0 140px;}

.subpage_tit {margin:0 0 40px;}
.subpage_tit .fs23 {color:var(--black);}
.subpage_tit .stxt {margin:20px 0 0;}

.sub_tit_wrap {margin: 0 0 30px 0;}
.sub_tit_wrap .stxt {margin:20px 0 0;}


.no_scroll {overflow:hidden;}

.layer_popup {position:fixed; top:0; left:0; width:100%; height:var(--vh); display:flex; flex-wrap:wrap; align-content:center; justify-content:center; z-index:9999; opacity:0; visibility:hidden;}
.layer_popup.visible {opacity:1; visibility:visible;}
.layer_popup::before {content:''; width:100%; height:0; background:rgba(0,0,0,0.7); position:absolute; top:0; left:0; z-index:-1; transition:all 1s ease;}
.layer_popup.visible::before {height:100%; transition:all 1s ease;}
.layer_popup .w800 {max-width:800px; width:90%; transform:scale(0.7); opacity:0; visibility:hidden; transition:all 1s ease;}
.layer_popup.visible .w800 {transform:scale(1); opacity:1; visibility:visible; transition:all 1s ease; transition-delay:0.3s;}
.layer_popup .pop_close {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:50px; height:50px; border:1px solid rgba(255,255,255,0.2); border-radius:100%; box-sizing:border-box; margin:0 0 20px auto; transition:all 0.4s ease; }
.layer_popup .pop_close::before {content:'\f508'; font-size:32px; color:var(--white); font-family:var(--icon); transition:all 0.4s ease;}
.layer_popup .pop_close:hover {border:1px solid var(--white); background:var(--white); transition:all 0.4s ease;}
.layer_popup .pop_close:hover::before {color:Var(--black); transition:all 0.4s ease;}
.layer_popup .pop_tit {padding:60px 25px; box-sizing:border-box; background: var(--main); text-align:center;}
.layer_popup .pop_tit h4 {width:100%; font-family: var(--eng); font-size: 4.062rem; font-weight: 500; line-height: 100%; letter-spacing: -1.3px; color:var(--sub);}
.layer_popup .pop_tit p {width:100%; color:var(--white); margin:18px 0 0;}
.layer_popup .layer_popup_in {position:relative; padding:50px 45px 114px 50px; box-sizing:border-box; background:var(--white); }
.layer_popup_scroll {width:100%; height:100%; overflow-y:auto; padding-right:5px; box-sizing:border-box; height:45vh;}
/* .layer_popup_scroll::-webkit-scrollbar {width: 3px;}
.layer_popup_scroll::-webkit-scrollbar-thumb {background-color: var(--main); border-radius: 10px;}
.layer_popup_scroll::-webkit-scrollbar-track {background-color: #ddd; border-radius: 10px;} */
.mCSB_inside>.mCSB_container {margin-right:10px !important;}
.mCSB_scrollTools {width:4px !important;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background:var(--black) !important;;}

.table_style {width:100%; border-collapse:separate; border-spacing:0; border-top:2px solid var(--black); text-align:center;}
.table_style th {font-size:  0.937rem; font-weight: 600; letter-spacing: -0.028rem; color:var(--black); padding:16px 10px; box-sizing:border-box; background:var(--grayBg); border-bottom:1px solid var(--border);}
.table_style td {font-size: 0.937rem; letter-spacing: -0.028rem; color:var(--basic); padding:20px 15px; box-sizing:border-box; border-bottom:1px solid var(--border);}
.table_style td .file_name {display:flex; flex-wrap:Wrap; align-items:center; justify-content:center;  letter-spacing: -0.45px; color:var(--black);}
.table_style td .file_name::before {content:'\e2bc'; font-size:20px; color:var(--black); font-family:var(--icon); display:block; margin-right:5px;}

.table_style td .mo_line {display:none;}


/* õ¸íÈ£Ãß°¡(2016-07-20) */
.pay_add_tit {font-size: 11px; color: #555;}
.pay_add_tit2 {font-size: 11px; color: #ee2d7a;}


/* »çÀÌÆ®¸Ê */
.sitemap_cont {display:flex; flex-wrap:wrap;}
.sitemap_cont dl {width:calc((100% - 90px) / 4); margin: 0 30px 50px 0; text-align:center; text-align:center; border-top: 2px solid var(--main);}
.sitemap_cont dl:nth-child(4n) {margin-right:0;}
.sitemap_cont dl dt{border-bottom:1px solid var(--border); font-weight:500; color:var(--black); letter-spacing:-0.35pt; padding:20px 0; line-height:120%; font-size:1.125rem;}
.sitemap_cont dl dd {border-bottom:1px solid var(--border); }
.sitemap_cont dl dd a{display:block; width:100%; padding:17px 0; line-height:120%; letter-spacing:-0.3pt; transition:all 0.3s linear; font-size:1rem;}
.sitemap_cont dl dd a:hover{color:var(--main); transition:all 0.3s linear; font-weight:500;}



/* ÀÌ¿ë¾à°ü, °³ÀÎÁ¤º¸Ãë±Þ¹æħ */
.policy_cont{position:relative; overflow:hidden; font-size:1rem;}
.policy_cont br{display:block;}
.policy_cont strong{font-weight:500; color:var(--black);}
.policy_cont .cont_title{font-size:1.412rem; color:var(--black); padding-bottom:18px; letter-spacing:-0.02em; font-weight:500;}
.policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--black) !important; letter-spacing:-0.02em;}
.policy_cont .cont_txt {padding:0px 0px 35px 0;}
.policy_cont .cont_txt2 {padding-bottom:35px;}
.policy_cont .cont_box {padding:25px; background:var(--grayBg); margin:7px 0px 10px 0px; display:block;  letter-spacing:-0.02em; line-height:1.7;}
.policy_cont .sm_txt {display:block; padding-left:15px; box-sizing:border-box;  font-size:0.937rem; margin:7px 0 0;}
.privacy_list {width:91%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px solid var(--border); margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--black);} 





/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){


.subpage_tit br {display:none;}
.sub_tit_wrap br {display:none;}

#visual .scr {margin-left:0; left:5%;}



}
/*******************************************************************************
    @media 1300px
*******************************************************************************/
@media all and (max-width:1300px){







}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


#visual .visual_in .v_txt h3 {font-size:4.4rem;}
#visual .scr {bottom:auto; left:auto; right:5%; top:50%; transform:translateY(-50%);}
#visual .v_bg_partners .bg {background-position:center right 15% !important;}

#header.fixed + #visual + .visual_lnb.fixed {top:66px;}
.visual_lnb.fixed dl dd .txt {line-height:54px;}
.visual_lnb.fixed dl dd .dlst {top:54px;}

.contents_in {padding:120px 0 180px;}








/* »çÀÌÆ®¸Ê */
.sitemap_cont dl {width:calc((100% - 60px) / 4); margin: 0 20px 30px 0;}
.sitemap_cont dl:nth-child(4n) {margin-right:0;}
.sitemap_cont dl dt{padding:15px 0;}
.sitemap_cont dl dd a{padding:12px 0;}



/* ÀÌ¿ë¾à°ü, °³ÀÎÁ¤º¸Ãë±Þ¹æħ */
.policy_cont{}
.policy_cont p.cont_tit {font-size:1.2em !important; padding-bottom:5px;}
.policy_cont .cont_txt {padding:0px 0px 25px 0; }
.policy_cont .cont_txt2 {padding-bottom:25px;}
.policy_cont .cont_box {padding:18px 18px; }

.privacy_list {margin-bottom:30px;}
.privacy_list li {width:100%;  }

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


#visual .visual_in .v_txt h3 {font-size:3rem; margin:12px 0 0;}
#visual .scr svg {width:18px; height:auto;}
#visual .scr span::after {font-size:17px;}

.visual_lnb dl dt {width:46px;height: 40px;}
.visual_lnb dl dt::before {display:none;}
.visual_lnb dl dt a::before {font-size:18px;margin-top: 0px;}
.visual_lnb dl dd {width:calc((100% - 46px) / 2);}
.visual_lnb dl dd:last-of-type a::after {display:none;}
.visual_lnb dl dd .txt {padding:0 45px 0 15px;}
.visual_lnb dl dd .txt:before {right:14px; font-size:18px; margin-top:-9px;}
.visual_lnb dl dd .dlst {padding:10px 15px; width:calc(200% + 46px); left:-46px;}
 .visual_lnb { position: relative; z-index: 50; }
  .visual_lnb dl,
  .visual_lnb dl dd { position: relative; overflow: visible; }

  /* 기본은 숨김, .on에서 보이기 */
  .visual_lnb dl dd .dlst { display: none; }

  .visual_lnb dl dd .dlst.on{
    display: block;
    position: absolute;
    top: 100%;          /* 부모(dd) 바로 아래 */
    left: 0;
    right: 0;
    transform: none !important;     /* 기존 translate 제거 */
    width: 100% !important;         /* calc(200% + 46px) 같은 것 무시 */
    padding: 10px 15px !important;  /* 필요 시 조절 */
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    background: #fff;               /* 배경 필요 시 */
  }

  /* 혹시 남아있는 특수 규칙 무력화 */
  .visual_lnb dl dd:last-of-type .dlst{
    left: 0 !important;
    top: 102% !important;
  }

#header.fixed + #visual + .visual_lnb.fixed {top:50px;}
.visual_lnb.fixed dl dd .txt {line-height:44px;}
.visual_lnb.fixed dl dd .dlst {top:44px;}

.contents_in {padding:0px 0 120px;}

.subpage_tit {margin:0 0 25px;}
.subpage_tit .stxt {margin:12px 0 0;}

.sub_tit_wrap {margin:0 0 25px;}
.sub_tit_wrap .stxt {margin:12px 0 0;}


.layer_popup .pop_close {width:36px; height:36px;}
.layer_popup .pop_close::before {font-size:22px;}
.layer_popup .pop_tit {padding:40px 20px;}
.layer_popup .pop_tit h4 {font-size:2rem;}
.layer_popup .pop_tit p {margin:12px 0 0;}
.layer_popup .layer_popup_in {padding:25px 20px 70px 25px;}

.table_style th {padding:0;}
.table_style td {padding:0; text-align:left !important;}
.table_style td .file_name {justify-content:flex-start; margin-bottom:2px;}
.table_style td .file_name::before {font-size:16px; margin-right:3px;}

.table_style th {display:none;}
.table_style  .pc_line {display:none !important;}
.table_style td .mo_line {display:block; padding:10px 0;}


/* »çÀÌÆ®¸Ê */
.sitemap_cont dl {width:calc((100% - 40px) / 3); margin: 0 20px 30px 0;}
.sitemap_cont dl:nth-child(4n) {margin-right:20px;}
.sitemap_cont dl:nth-child(3n) {margin-right:0;}
.sitemap_cont dl dt{padding:12px 0;}
.sitemap_cont dl dd a{padding:10px 0;}



}


.gallery_container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 images per row */
            gap: 16px;
            padding: 16px;
        }

        .gallery_item {
            position: relative;
            overflow: hidden;
        }

        .gallery_item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Maintain aspect ratio and cover space */
            cursor: pointer;
        }

        .gallery_caption {
    text-align: center;
    margin-top: 8px;
    font-size: 16px;
    color: #fff; /* 텍스트 색상을 흰색으로 변경 */
    background-color: rgba(0, 0, 0, 0.6); /* 텍스트 배경 추가 */
    padding: 4px 8px; /* 텍스트 주변 여백 추가 */
    border-radius: 4px; /* 부드러운 모서리 */
    position: absolute; /* 이미지 위에 고정 */
    bottom: 8px; /* 이미지 아래쪽에 위치 */
    left: 50%; /* 수평 가운데 정렬 */
    transform: translateX(-50%);
}
#visual .visual_in .v_txt p {
    
    width: 85%;
}

        /* Modal styling */
        .designpop {
            display: none; /* Hidden by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .designpop img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
        }

        .designpop_close {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 24px;
            color: #fff;
            cursor: pointer;
        }

        .designpop_nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: #fff;
            cursor: pointer;
            user-select: none;
        }

        .designpop_prev {
            left: 16px;
        }

        .designpop_next {
            right: 16px;
        }

        /* Media query for mobile */
        @media (max-width: 768px) {
            .gallery_container {
                grid-template-columns: repeat(2, 1fr); /* 2 images per row for mobile */
            }
			#header.nofixed {
    background: none;
}
#visual2 .visual_in .v_txt h3 {
    font-size: 2.375rem;
    font-weight: 500;
    line-height: 100%;
    color: var(--white);
    margin: 0 0 0;
    font-family: 'NEXON Lv1 Gothic OTF';
    text-align: center;
}
#visual2 {
    position: relative;
    width: 100%;
    height: 226px;
    background: #7f7f7f;
}
        }



  .new_gallery_container .ytwrap { position:relative; width:100%; aspect-ratio:16/9; }
  .new_gallery_container .ytwrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }