@charset "utf-8";

.sub-header {height:14rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.sub-header:before,
.sub-header:after {content:"";display:block;position:absolute;z-index:-1;}
.sub-header:before {top:-380px;right:0;width:498px;height:498px;background:url(../img/Sub/sub-header_bg_01.svg) no-repeat center center /100% 100%;}
.sub-header:after {bottom:-270px;left:0;width:352px;height:352px;;background:url(../img/Sub/sub-header_bg_02.svg) no-repeat center center /100% 100%;}
.sub-header .title {text-align:center;margin-bottom:1rem;}
.sub-header .title span {line-height:140%;font-size:3rem;font-family:var(--font-point);background:var(--gradient);-webkit-background-clip: text;color: transparent;text-align:center;}
.sub-header .text {line-height:140%;text-align:center;}

.sub-header:before {opacity:0;transform-origin:center center;animation: sb-bg-bloom 1s ease-out forwards, sb-bg-spin-A 4s linear infinite;}
.sub-header:after {opacity:0;transform-origin:center center;animation: sb-bg-bloom 1s ease-out forwards, sb-bg-spin-B 4s linear infinite;}
@keyframes sb-bg-bloom {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes sb-bg-spin-A {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(15%, 3%) scale(1.1); }
    75% { transform: translate(-5%, -3%) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes sb-bg-spin-B {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-10%, -3%) scale(1.1); }
    75% { transform: translate(10%, 3%) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}

.subnav {height:7rem;display:flex;border:1px solid var(--border-gray);border-radius:10px;background:var(--bg-lgray);}
.subnav .home {display:block;border-right:1px solid var(--border-gray);aspect-ratio: 1 / 1;background:url(../img/Sub/subnav_home.svg) no-repeat center center}
.sbmn_dp {position:relative;width:24rem;border-right:1px solid var(--border-gray);}
.sbmn_list {display:none;position:absolute;top:100%;left:-1px;min-width:calc(100% + 1px);border:1px solid var(--border-gray);background:var(--bg-lgray);padding:1rem 0;z-index:10;}
.sbmn_a1 {height:100%;display:flex;align-items:center;padding:0 3rem;}
.sbmn_a1 span {font-weight:600;}
.sbmn_a1:after {content:"";margin-left:auto;display:block;width:2.4rem;height:2.4rem;border-radius:50%;background:url(../img/Sub/subnav_mn_arrow.svg) no-repeat center center #fff;}
.on .sbmn_a1:after {transform:rotate(180deg);}
.sbmn_a2,
.sbmn_a3,
.sbmn_a4 {display:block;padding:1.2rem 2rem;}
.sbmn_a2 span,
.sbmn_a3 span,
.sbmn_a4 span {white-space:nowrap;}
.subnav .print {margin-left:auto;display:block;border-left:1px solid var(--border-gray);aspect-ratio: 1 / 1;background:url(../img/Sub/subnav_print.svg) no-repeat center center}
.sbmn_dp.on .sbmn_a1 {background:#D2E0F2;}
.sbmn_a2.sb-link span {display:flex;align-items:center;gap:1rem;}
.sbmn_a2.sb-link span:after {flex:none;content:"";display:block;width:8px;height:7px;background:url(../img/Layout/gnb_outlink.svg) no-repeat center center /100% 100%;}


#sub-content {margin:4rem 0 7rem;}
	
	@media (hover: none) and (pointer: coarse) {
	  .subnav .print {display:none;}
	}

	@media screen and (min-width:1200px) {
		.sbmn_a1:hover,
		.sbmn_a1:focus {background:#D2E0F2;}
		.sbmn_a2:hover,
		.sbmn_a2:focus {background:#D2E0F2;}
	}
	
	@media screen and (max-width:1200px) {
		.sub-header:before {width:152px;height:152px;top: -110px;right:10px;}
		.sub-header:after {width:150px;height:150px;bottom: -110px;left:10px;}
		
		.sbmn_dp:not(:last-of-type) {display:none;}
		.sbmn_dp {flex:1;width:auto;border-right:none;}
		.subnav {position:relative;}
		.sbmn_list {border-radius:10px;top:calc(100% + 0.5rem);}
		.sbmn_dp {position:static;}
		.subnav .print {display:none;}
		
		
	}