@charset "utf-8";

/* LHI 2025.11.05
   layout - sub board content login
*/

/* basic */
.inner {position:relative; width:100%; max-width:1280px; margin:0 auto;}
.cont_wrap {position:relative; min-height:max(500px, calc(100vh - 324px)); padding:4rem 6rem; background:url('/images/nationTask/common/img_idx_bg.png') center right no-repeat;}
.cont_wrap.sub_wrap {background:var(--white);}
.sub_tit_wrap {position:relative;}
.sub_tit {padding:2.5rem 3rem; border-radius:1.5rem 0.5rem 1rem 0.5rem; background:var(--blue-20);}
.sub_tit > h2 {position:relative; padding-left:4.5rem; font-family:var(--font-title); font-size:2.4rem; font-weight:600; line-height:1.2;}
.sub_tit > h2:before {content:""; position:absolute; top:0; left:0; width:2.5rem; height:2.9rem; background:url(/images/nationTask/common/icon_sub_tit.png) no-repeat; background-size:cover;}
.sub_link {position:absolute; bottom:-9.2rem; right:0;}
.sub_link a {position:relative; padding:1.6rem 2rem; color:#fff; font-size:2.1rem; font-weight:700; border-radius:1.5rem 0.5rem 0.5rem 0.5rem; background:var(--gradient-blue);}
.sub_link a:after {content:""; display:inline-block; width:2.5rem; height:2.5rem; margin:-0.2rem 0 0 1.5rem; vertical-align:middle; background:url('/images/nationTask/common/icon_btn_link.png') no-repeat; background-size:cover;}

/* header */
.header {position:sticky; top:-1px; display:flex; justify-content:space-between; align-items:center; width:100%; padding:1.9rem 6rem; border-bottom:1px solid var(--black-30); background:var(--white); z-index:3;}
.header .h_logo img {height:4rem;}
/* 20260715 YJS 추가 Start */
.header .shortcut_wrap{display: flex;flex-wrap: wrap;align-items: center;gap: 20px;}
.header .policy-link-btn{position: relative;display: block;padding: 12px 42px 12px 16px;color: #fff;font-size: 18px;white-space: nowrap;font-family: var(--font-title);border-radius: 12px;background: linear-gradient(112deg, #0046A2 40%, #045CD0 76%, #1B7CF9 100%);}
.header .policy-link-btn::before{content: "";position: absolute;top:10px;right: 12px;transform: rotate(-45deg);width:2.2rem; height:2.2rem; background:url('../../images/nationTask/common/icon_btn_link.png') no-repeat; background-size:contain;}
/* 20260715 YJS 추가 End */
.header .sns_wrap {display:flex; gap:1rem;}
.header .sns_wrap > li > a {width:3.7rem; height:3.7rem; border-radius:50%; background-size:contain; background-repeat:no-repeat;}
.header .sns_wrap .home {background-image:url(/images/nationTask/common/icon_home.svg);}
.header .sns_wrap .youtube {background-image:url(/images/nationTask/common/icon_sns_youtube.svg);}
.header .sns_wrap .instagram {background-image:url(/images/nationTask/common/icon_sns_instagram.svg);}
.header .sns_wrap .facebook {background-image:url(/images/nationTask/common/icon_sns_facebook.svg);}
.header .sns_wrap .twitter {background-image:url(/images/nationTask/common/icon_sns_x.svg);}
.header .sns_wrap .blog {background-image:url(/images/nationTask/common/icon_sns_blog.svg);}

/* footer */
.footer {padding:4rem 6rem; font-size:max(1.7rem, 15px);  background:var(--black-20);}
.footer .f_logo img {height:4rem;}
.footer .f_top_wrap {display:flex; justify-content:space-between; flex-wrap:wrap; padding:0 7rem 3rem 0; border-bottom:1px solid var(--blue-40);}
.footer .f_info address {margin-top:3rem; font-weight:500;}
.footer .f_info address span {display:block; margin-top:2rem; font-weight:700;}
.footer .f_util {margin-right:50px;}
.footer .f_util > li:not(:last-child) {margin-bottom:1rem;}
.footer .f_util > li > a {font-size:1.8rem; font-weight:700; padding-right:4.5rem; background:url(/images/nationTask/common/icon_ft_arrow.png) no-repeat right center; display: flex; justify-content: space-between;}
.footer .f_bottom_wrap {display:flex; align-items:center; gap:3rem; flex-wrap:wrap; margin-top:2rem;} /*justify-content:space-between;*/
.footer .link_wrap {display:flex; gap:0 3rem;}
.footer .link_wrap > li > a > b {color:var(--orange);}
.footer .f_copy {font-size:max(1.5rem, 14px); font-weight:300;}

/* index */
.banner_slogan {margin:1rem 0 5rem 0; font-family:var(--font-title); font-size:6rem; font-weight:500; text-align:center; word-break:keep-all;}
.banner_slogan > b {font-weight:800; color:var(--blue);}
.banner_slogan > img {width:100%; border-radius:1rem;}
.banner_slogan > img.banner_m {display:none;}
.banner_wrap {display:flex; justify-content:space-between; gap:6rem; color:var(--white);}
.banner_wrap img {border-radius:4rem;}
.banner_wrap .banner_btn {position:fixed; right:1rem; bottom:1rem; width:14rem; zoom:1; z-index:1;}
.thumb_wrap {position:relative; flex:1 0 25%;}
.thumb_wrap .thumb_cont {overflow:hidden; position:relative; height:84rem; min-height:calc(100vh - 55rem); padding-right:0.5rem; scrollbar-gutter:stable;}
.thumb_wrap .thumb_cont:hover + .thumb_overlay {display:none;}
.thumb_wrap .thumb_list {display:grid; grid-template-columns:repeat(3, 1fr); gap:4rem; padding-bottom:3rem; will-change:transform;}
.thumb_wrap .thumb_item {position:relative; display:flex; border-radius:1.5rem; box-shadow:4px 6px 3px rgb(169,162,145,0.5); cursor:pointer;}
.thumb_wrap .thumb_item:nth-child(3n-1) {transform:translateY(5rem);}
.thumb_wrap .thumb_item img {display:block; width:100%; border-radius:1rem;}
.thumb_wrap .thumb_item:before {content:""; position:absolute; inset:0; padding:0; border-radius:1rem; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:padding .25s ease; pointer-events:none;}
.thumb_wrap .thumb_item:not(.thumb_main):before {background:var(--blue);}
.thumb_wrap .thumb_item:not(.thumb_main).on:before, .thumb_wrap .thumb_item:not(.thumb_main):hover:before {padding:0.5rem;}
.thumb_wrap .thumb_item.thumb_main {box-shadow:4px 6px 3px #A9A291;}
.thumb_wrap .thumb_item.thumb_main:before {padding:0.5rem; background:linear-gradient(147.47deg, #D4A764 0%, #D59C35 12.98%, #EBE3D1 21.63%, #D59C35 27.88%, #F7DD86 75%, #D5A24D 85%, #F0EFE0 100%); transition:background .25s ease;}
.thumb_wrap .thumb_item.thumb_main:after {content:""; position:absolute; bottom:-2.5rem; right:-0.5rem; width:29%; min-width:6.4rem; height:27%; min-height:7.4rem; background:url(/images/nationTask/common/icon_badge.svg) no-repeat; background-size:contain;}
.thumb_wrap .thumb_overlay {content:""; position:absolute; left:50%; bottom:22%; width:8rem; height:8rem; background:url(/images/nationTask/common/icon_scroll_down.png); background-size: contain; transform: translateX(-50%); animation:bounce 1s infinite alternate; pointer-events:none; z-index:2;}
.thumb_wrap .banner_btn {display:none;}
.panel_wrap {position:relative; flex:1 0 35%; display:flex; justify-content:center; align-items:center;}
.panel_wrap .panel_cont {max-width:60rem;}
.panel_wrap .panel_item {position:relative; display:none; flex-direction:column; justify-content:center; align-items:center; gap:2.7rem; height:84rem;}
.panel_wrap .panel_item.on {display:flex;}
.panel_wrap .panel_item .panel_main {position:relative;}
.panel_wrap .panel_item .panel_main:after {content:""; position:absolute; bottom:-2.5rem; right:-1rem; width:17%; min-width:6.4rem; height:14%; min-height:7.4rem; background:url(/images/nationTask/common/icon_badge.svg) no-repeat; background-size:contain;}
.panel_wrap .panel_item .panel_main img {padding:1rem; background:linear-gradient(147.47deg, #D4A764 0%, #D59C35 12.98%, #EBE3D1 21.63%, #D59C35 27.88%, #F7DD86 75%, #D5A24D 85%, #F0EFE0 100%);}
.panel_wrap .panel_link {display:flex; width:100%;}
.panel_wrap .panel_link a {position:relative; display:flex; justify-content:space-between; align-items:center; flex:1 0; padding:2rem 2.5rem; font-family:var(--font-title); font-size:2rem; border-radius:1rem 0 0 1rem; background:var(--blue-90);}
.panel_wrap .panel_link a:nth-child(2) {border-radius:0; background:var(--blue-80);}
.panel_wrap .panel_link a:nth-child(3) {border-radius:0 1rem 1rem 0; background:var(--blue-70);}
.panel_wrap .panel_link a:after {content:""; display:block; width:2.5rem; height:2.5rem; background:url('/images/nationTask/common/icon_btn_link.png') no-repeat; background-size:contain;}
.panel_wrap .panel_btn div {position:absolute; top:50%; left:4rem; margin-top:-4rem; width:8rem; height:8rem; border-radius:50%; background:var(--navy-90) url('/images/nationTask/common/icon_slide_left.png') center center no-repeat; cursor:pointer;}
.panel_wrap .panel_btn div.panel_next {left:auto; right:4rem; background:var(--navy-90) url('/images/nationTask/common/icon_slide_right.png') center center no-repeat;}
.panel_wrap .panel_btn div.disabled {opacity:0.5; pointer-events:none;}
.panel_wrap .panel_close {display:none; width:7rem; height:7rem; margin:0 auto; border-radius:50%; background:var(--white-20) url('/images/nationTask/common/icon_layer_close_w.png') center center no-repeat;}

/* banner list popup */
.banner_list {display:flex; gap:1rem; flex-wrap:wrap; font-size:max(1.6rem, 15px); font-weight:600; line-height:1.2; word-break:keep-all;}
.banner_list > li {display:flex; align-items:center; gap:1.5rem; width:100%; padding:2rem; color:var(--black-80); border-radius:1.5rem; background:linear-gradient(140deg, #E8ECEE 10%, #F3E9EB 30%,#F4F5F6 50%);}
.banner_list > li > span {flex-shrink:0; padding:0 2rem; font-size:max(1.6rem, 15px); font-weight:600; color:var(--blue-70); text-align:center; line-height:3rem; border-radius:20rem; background:var(--white); cursor:pointer;}
.banner_list > li > p {cursor:pointer;}
.banner_list > li > a > span {flex-shrink:0; padding:0 2rem; font-size:max(1.6rem, 15px); font-weight:600; color:var(--blue-70); text-align:center; line-height:3rem; border-radius:20rem; background:var(--white); display: block;}

@keyframes bounce {
    0% {transform:translateX(-50%) translateY(10px); opacity:0.7;}
    100% {transform:translateX(-50%) translateY(-10px); opacity:1;}
}
@media (min-width: 851px) {
    .thumb_wrap .thumb_cont:hover, .thumb_wrap .thumb_cont.scroll {overflow-y:auto;}
    .thumb_wrap .thumb_cont:hover .thumb_overlay {display:none;}
}
@media (max-width: 1500px) {
    .panel_wrap .panel_btn div {left:-2rem;}
    .panel_wrap .panel_btn div.panel_next {left:auto; right:-2rem}
}
@media (max-width: 1280px) {
    .thumb_wrap .thumb_list {gap:2.5rem;}
}
@media (max-width: 1024px) {
    .header {padding:1.5rem 3rem;}
    .cont_wrap {padding:3rem; background-position-x:center;}
    .banner_slogan {margin:0 0 4.5rem 0;}
    .thumb_wrap {flex:1 0 20%;}
    .thumb_wrap .thumb_list {grid-template-columns:repeat(2, 1fr);}
    .thumb_wrap .thumb_item:nth-child(3n-1) {transform:translateY(0);}
    .thumb_wrap .thumb_item:nth-child(2n) {transform:translateY(5rem);}
    .panel_wrap {flex:1 0 40%;}
}
@media (max-width: 850px) {
    .cont_wrap {padding:2.5rem; background:none;}
    .sub_link {position:relative; bottom:auto; right:auto; margin-bottom:2rem;}
    .sub_link a {width:100%; text-align:center;}
	/* 20260715 YJS 추가 Start */  
    .header {flex-direction: column;align-items: flex-start;gap: 10px;padding:1.5rem;}
    .header .shortcut_wrap{width: 100%;justify-content: space-between;gap: 5px;}
    .header .policy-link-btn{padding: 8px 28px 8px 10px;font-size: 14px;}
    .header .policy-link-btn::before{top:8px;right: 10px;width: 1.8rem;height: 1.8rem;}
    .header .sns_wrap {gap:0.5rem;zoom: 0.9;}
    /* 20260715 YJS 추가 End */
    .footer {padding:2rem 1.5rem;}
    .footer .f_top_wrap {flex-direction:column; gap:2.2rem; padding:0 0 3rem 0;}
    .footer .f_info address {margin-top:2rem;}
    .footer .f_info address span {margin-top:1.2rem;}
    .banner_slogan {margin:0 0 2.5rem 0; font-size:3.8rem;}
    .banner_slogan > img.banner_pc {display:none;}
    .banner_slogan > img.banner_m {display:block;}
    .banner_wrap {flex-direction:column; gap:0;}
    .banner_wrap .banner_btn {display:none;}
    .thumb_wrap {flex:1 0 100%;}
    .thumb_wrap .thumb_cont {height:auto; min-height:0; scrollbar-gutter:auto;}
    .thumb_wrap .thumb_cont:hover .thumb_overlay {display:block;}
    .thumb_wrap .thumb_list {gap:4rem; padding-bottom:12rem;}
    .thumb_wrap .thumb_item:not(.thumb_main).on:before, .thumb_wrap .thumb_item:not(.thumb_main):hover:before {padding:0;}
    .thumb_wrap .thumb_overlay {position:fixed; bottom:5%;}
    .thumb_wrap .banner_btn {display:block;}
    .panel_wrap .panel_item.on {position:fixed; top:0; left:0; right:0; bottom:0; gap:2rem; height:100vh; padding:2rem; background:rgba(0,0,0,0.9); z-index:9;}
    .panel_wrap .panel_item.on .panel_close {display:block;}
    .panel_wrap .panel_item img {width:100%; max-width:60rem; border-radius:2rem;}
    .panel_wrap .panel_link {max-width:60rem;}
    .panel_wrap .panel_btn {display:none;}
}
@media (max-width: 500px) {
    .banner_slogan > b {margin-bottom:0.5rem;}
    .banner_list > li {flex-wrap:wrap;}
    .banner_list > li > p {width:100%;}
    .banner_btn {right:0; bottom:0;}
    .thumb_wrap .thumb_list {gap:2.5rem;}
}
@media (max-width: 360px){
    .header .policy-link-btn{font-size: 13px;}
    .header .sns_wrap {zoom: 0.8;}
}