@charset "utf-8";

/*
* File       : sub-set.css
* Author     : B-WORKER
*      
 * SUMMARY:
 * 1) SUB VISUAL
 * 2) SUB LNB
*/

/* Sub title  */
.page-title-wrap {margin-bottom: 80rem;text-align: center;display: none;}
.page-title-wrap em {display: block; margin-bottom: 50rem; font-weight: 700; font-size: 20rem; color: var(--c-03);}
.page-title-wrap h2 {font-weight: 700; font-size: 50rem; color: var(--f-01);}

/* SUB VISUAL */
#sub-visual{position:relative;height: 770rem;background: var(--b-01);}
#sub-visual::after {position: absolute;left:0;bottom: 0;content:'';width: 100%;height: 40%;background: linear-gradient(0deg, rgba(17,17,17,1) 0%, rgba(17,17,17,0) 100%);}
#sub-visual .wrap {height: 100%;}
#sub-visual h2{font-weight:800;font-size: 95rem;color:var(--f-01);}

.sub-visual__desc{margin-top:17rem; font-weight:600; font-size:20rem;}
.sub-visual__bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;overflow: hidden;border-bottom-left-radius: 15rem;border-bottom-right-radius: 15rem;}
.sub-visual__bg > i{opacity: .5 !important;position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:50% 50%;transition:var(--trans-01);background-repeat:no-repeat;}
.sub-visual__inner{z-index: 31; position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: center;}

body[class^="sub01_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual-01.jpg);}
body.sub02_01 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual-0201.jpg);}
body.sub02_02 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual-0202.jpg);}
body[class^="sub04_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual-04.jpg);}
body[class^="sub03_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual-05.png);}

/* board visual set */
body:is(.gallery, .gallery_en) .sub-visual__bg > i{opacity: .6 !important; background-image:url(../img/sub/sub-visual-03.jpg);}
body:is(.notice, .qa, .notice_en, .qa_en) .sub-visual__bg > i{opacity: .6 !important; background-image:url(../img/sub/sub-visual-04.jpg);}

/* lnb */
#lnb{position: absolute;right: 0; top: 50%;z-index: 10;}
#lnb .select-link{min-width: 200rem;}
#lnb .depth1 .sub-menu,
#lnb .select-link__btn{display:none;}

#lnb.lnb-select .select-link__btn{z-index: 1; display:inline-flex; align-items:center; min-width: 200rem; height: 80rem; padding: 0 30rem; padding-right: 60rem; font-size:17rem; font-weight: 600; color:var(--f-01); white-space: nowrap; border-radius: 40rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .4); transition: var(--trans-01);}
#lnb.lnb-select .select-link__btn::after{content:""; position:absolute; right:30rem; width:7rem; height:7rem; margin-top: -1px; border:solid var(--f-01); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); border-radius: 0; background: none;}
#lnb.lnb-select .select-link__btn.on {color: var(--c-01); background: #fff;}
#lnb.lnb-select .select-link__btn.on::after {border-color: var(--c-01); border-width: 0 2rem 2rem 0;}
#lnb.lnb-select:has(.select-link:nth-child(2)){display:flex;align-items: center;}
#lnb.lnb-select .select-link + .select-link:has(.depth2){margin-left:20rem;}
#lnb .select-link > ul {padding: 20rem 0; border-radius: 40rem;}
#lnb .select-link > ul a {padding: 10rem 30rem;}

a.lnb-home{display:block; width:15rem; margin-right:20rem; background:url(../img/common/ic-nav-home_w.svg) no-repeat 50% 50%; font-size:0; min-height:100%;}

/* sub nav */
#sub-nav{display: flex; align-items: center; margin-bottom:50rem; padding-left: 5rem;}
#sub-nav > *{opacity: .3; position: relative;}
#sub-nav .sub-home{position: relative; display: inline-flex; align-items: center;}
#sub-nav .sub-home::before {content:''; width: 17rem;height: 15rem; margin-top: -1px; margin-right: 12rem; background:url(../img/common/ic-nav-home_w.svg) no-repeat center / contain;}
#sub-nav i {position: relative; width: 15rem; height: 15rem; margin: 0 15rem;}
#sub-nav i::after {position: absolute; left: 50%; top: 50%; content:''; width: 7rem; height: 7rem; margin-top: 1px; border: solid var(--f-01); border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 0;}
#sub-nav span{color: var(--f-01); display: block; font-size: 16rem;}
#sub-nav > span:last-child {opacity: 1; font-weight: 600;}
#sub-nav:not(:has(.depth02)) .depth01 {opacity: 1; font-weight: 600;}
#sub-nav:not(:has(.depth02)) i:last-child {display: none;}

@media all and (max-width:1023px){
	#sub-visual{height:650rem;}	
	#sub-visual h2{padding-right: 30%; font-size:80rem;}

	.page-title-wrap {margin-bottom: 60rem;}
	.page-title-wrap em {margin-bottom: 40rem;}
	.page-title-wrap h2 {font-size: 45rem;}

	#sub-nav {margin: 30rem 0;}

	#lnb {margin-top: 10rem;}
	#lnb.lnb-select .select-link__btn{white-space: inherit;}
}

@media (max-width: 860px){
	#sub-visual h2{font-size:70rem;}
	#lnb.lnb-select .select-link__btn {height: 70rem; margin-top: 4rem;}
}

@media (max-width: 540px){
	#sub-visual{height:430rem; border-bottom-left-radius:5rem; border-bottom-right-radius:5rem;}
	#sub-visual h2{padding-right: 0;text-align: center;font-size: 40rem;}
	.sub-visual__title:has(.title-ko.none) .title-ko{display:block !important; margin-top:5rem; font-weight:700 !important; font-size:18rem !important;}
	.sub-visual__bg{border-bottom-left-radius:5rem; border-bottom-right-radius:5rem;}

	.page-title-wrap {margin-bottom: 40rem;}
	.page-title-wrap em {margin-bottom: 20rem; font-size: 14rem;}
	.page-title-wrap h2 {line-height: 1.4; font-size: 27rem;}

	#sub-nav {justify-content: center; margin: 0 0 20rem;}
	#sub-nav span{font-size:13rem;white-space: nowrap;}
	#sub-nav .sub-home::before {width: 12rem; height: 12rem; margin-top: -2rem; margin-right: 8rem;}
	#sub-nav i {width: 12rem;height: 12rem;margin: 0 4rem;margin-left: 8rem;}
	#sub-nav i::after {width: 5rem; height: 5rem;}

	
	#lnb{top:auto; bottom:40rem; width: 100%; z-index:10;}
	#lnb .lnb-inner{display:block;margin:0;width:100%; box-sizing:border-box;}
	#lnb.lnb-select .select-link{width:100%; box-sizing:border-box; margin-left:0;}
	#lnb.lnb-select .select-link__btn{display:-webkit-box; overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis; width: 100%; height: 60rem; padding: 0 25rem; line-height: 58rem; font-size: 14rem; white-space: inherit;}
	#lnb.lnb-select  .select-link__btn::after{right:20rem; top: 25rem; background-color:inherit;}
	#lnb .select-link > ul{margin-top:5rem; padding:15rem 0; border-radius: 30rem;}
	#lnb .select-link > ul a{padding: 8rem 25rem;font-weight:200;font-size:14rem;}

	#lnb:not(.lnb-select) .select-destroy li a{white-space:nowrap;}
	#lnb:not(.lnb-select) {width:100% !important; margin:0 !important; background:none;}
	#lnb:not(.lnb-select) .select-destroy{padding-left:20rem; overflow-x:scroll;}
	#lnb:not(.lnb-select) .select-destroy li:last-child{padding-right:40rem;}
	#lnb:not(.lnb-select) .select-destroy li a{opacity:0.5; color:#fff;}
	#lnb:not(.lnb-select) .select-destroy li.on a{opacity:1;}
	#lnb:not(.lnb-select) .select-destroy li + li{margin-left: 10rem;}
	#lnb:has(.select-destroy):not(.lnb-select) .select-link__btn::after{display:none;}
}