@charset "utf-8";

/* =========================================================
 * MAIN NAVI
 * ========================================================= */
.main_navi { position:fixed; right:2.8646vw; top:50%; z-index:99; margin-top:-60px; opacity:0; transform:translateY(30%); transition: opacity .8s ease, transform .8s ease, top .3s ease;}
.main_navi ul { display:flex; flex-direction:column; align-items:center; gap:12px;}
.main_navi li button { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.3); transition:var(--ease);}
.main_navi li.active button { width:12px; height:12px; background:var(--color-white);}
.main_navi.bl li button { background:rgba(33,42,81,.3);}
.main_navi.bl li.active button { background:var(--color-navy);}
.active .main_navi { opacity:1; transform:none; transition-delay:3s, 3s, 0s;}

@media all and (max-width:768px) {
	.main_navi { display:none;}
}

/* =========================================================
 * MAIN COMMON
 * ========================================================= */
.main .section { overflow:hidden; /*min-height:calc(var(--vh) * 100);*/clip-path: rect(0 100% 100% 0);}
.main #sec4,
.main #sec5{min-height:calc(var(--vh) * 100);}
.main .tit_box span { font-size:clamp(15px,1.5625vw,30px); letter-spacing:-.25px;}
.main .tit_box h2 { margin-top:clamp(8px,.8333vw,16px); font-size:clamp(35px,3.6458vw,70px); font-weight:600; letter-spacing:-.25px;}

@media all and (max-width:1024px) {
	.main #sec4,
	.main #sec5{min-height:auto;}
}

/* =========================================================
 * VISUAL
 * ========================================================= */
.visual { overflow:hidden; position:relative; height:calc(var(--vh) * 100);}
.vis { position:relative; width:100%; height:100%;}
.vis .wh_bg { position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; background:var(--color-white); clip-path:inset(0 0 0 0); transition:var(--ease-long); transition-delay:1.8s;}
.vis .mask { position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/mask.png) center/cover no-repeat;}
.vis .tit { overflow:hidden; position:absolute; left:7.8125vw; bottom:6.3542vw; z-index:5;}
.vis .tit dl { overflow:hidden; margin-top:2.0833vw;}
.vis .tit dl .bl { color:var(--color-black);}
.vis .tit dl .wh { color:var(--color-white);}
.vis .tit dl dt { overflow:hidden; position:relative; margin-bottom:0; font-size:4.8958vw; font-weight:700; line-height:1.1; letter-spacing:.025em; transform:none; transition:.6s; transition-delay:1s;}
.vis .tit dl dt p { display:flex; transition:.8s; transition-delay:1.8s;}
.vis .tit dl dt p span { display:block; font-style:normal; transform:translateY(100%) scaleY(0); transition:.8s;}
.vis .tit dl dt p span:nth-child(2) { transition-delay:.04s;}
.vis .tit dl dt p span:nth-child(3) { transition-delay:.08s;}
.vis .tit dl dt p span:nth-child(4) { transition-delay:.12s;}
.vis .tit dl dt p span:nth-child(5) { transition-delay:.16s;}
.vis .tit dl dt p span:nth-child(6) { transition-delay:.2s;}
.vis .tit dl dt p span:nth-child(7) { transition-delay:.24s;}
.vis .tit dl dd { overflow:hidden; position:relative; margin-bottom:.7813vw; font-size:2.8646vw; font-weight:300; letter-spacing:.025em; transform:translateY(-105%); transition:.6s; transition-delay:1s;}
.vis .tit dl dd p { transition:.8s; transition-delay:1.8s;}
.vis .tit .t3 { margin-top:1.0417vw; font-size:1.1458vw; color:var(--color-white); line-height:1.64;}
.vis .tit .t3 p { overflow:hidden;}
.vis .tit .t3 p span { display:block; transform:translateY(100%); transition:.8s; transition-delay:3s;}
.vis .tit .t3 strong { font-weight:700;}
.vis > .tit dl { transform:translateY(4.8vw); transition:.6s; transition-delay:2.8s;}
.vis .vis_sd { position:relative; height:100%; background:#02101f;}
.vis .vis_sd .vd { height:100%; opacity:0; transition:.8s;}
.vis .vis_sd .vd span { display:flex; align-items:flex-end; position:relative; height:100%;}
.vis .vis_sd .sd1 .vd span { opacity:0; transform:scale(1.3); transition:1.5s; transition-delay:1.8s;}
.vis .vis_sd .vd span video { width:100%;}
.vis .vis_sd .vd span .fit { height:100%; object-fit:cover;}
.vis .vis_sd .swiper-slide-active .vd { opacity:1; transition:1.6s; transition-delay:.6s;}
.vis .scroll { overflow:hidden; position:absolute; right:3.6458vw; bottom:0; z-index:10; width:1px; height:4.1667vw; background:rgba(255,255,255,.3); transform:translateY(101%); transition:.8s; transition-delay:2.5s;}
.vis .scroll span { display:block; width:100%; height:100%; background:var(--color-white); transform:translateY(-101%); animation:scroll 3s 3s linear infinite;}
.active .vis .wh_bg { clip-path:inset(0 0 100% 0);}
.active .vis .tit dl dt,
.active .vis .tit dl dt p span,
.active .vis .tit dl dd,
.active .vis .tit .t3 p span,
.active .vis .scroll,
.active .vis .vis_sd .sd1 .vd span,
.active .vis > .tit dl { opacity:1; transform:none;}

@keyframes scroll {
	0% { transform:translateY(-101%);}
	80% { transform:translateY(101%);}
	100% { transform:translateY(101%);}
}

@media all and (max-width:1400px) {
	.vis .vis_sd .vd span video { height:100%; object-fit:cover;}
}

@media all and (max-width:1024px) {
	.vis .tit { left:clamp(20px,5.5556vw,40px); bottom:clamp(40px,16.9444vw,80px);}
	.vis .tit dl dd p { font-size:clamp(24px,7.6389vw,45px);}
	.vis .tit dl dt { line-height:1.4;}
	.vis .tit dl dt p { font-size:clamp(36px,11.1111vw,70px);}
	.vis .tit .t3 { font-size:clamp(11px,3.0556vw,18px); letter-spacing:-.5px;}
	.vis .scroll { height:clamp(40px,11.1111vw,80px);}
}

@media screen and (max-width:1024px) and (max-height:600px) {
	.vis .tit { left:clamp(20px,5.5556vw,40px); bottom:24px;}
	.vis .vis_sd .vd span video { height:100%; object-fit:cover;}
	.vis .tit dl dd p { font-size:20px;}
	.vis .tit dl dt p { font-size:28px;}
	.vis .tit .t3 { font-size:14px; letter-spacing:-.5px;}
}

/* =========================================================
 * SEC2
 * ========================================================= */
#sec2 { overflow:hidden; background:url(../images/sec2_bg.jpg?v=2) center/cover no-repeat;}
#sec2 .inner { display:flex; flex-direction:column; justify-content:center; max-width:var(--inner-wide); padding:8.3333vw 0; min-height:calc(var(--vh) * 100); box-sizing:border-box;}
#sec2 .tit_box { color:var(--color-text); text-align:center;}
#sec2 .sec2_slide { overflow:visible; width:100%; margin-top:clamp(60px,6.25vw,120px);}
#sec2 .swiper-slide { width:clamp(320px,22.5vw,432px); pointer-events:none;}
#sec2 .swiper-slide a { display:flex; flex-direction:column; position:relative; cursor:default;}
#sec2 .swiper-slide .img { width:100%; transition:var(--ease-mid);}
#sec2 .swiper-slide .img::after { content:''; position:absolute; left:0; right:0; top:50%; height:100%; background:linear-gradient(180deg,var(--color-navy),var(--color-red)); transform:translateY(-50%); opacity:0; transition:transform .5s .1s, opacity .2s;}
#sec2 .swiper-slide:hover .img::after { transform:translateY(-50%) scaleY(1.18); opacity:1;}
#sec2 .swiper-slide .txt { overflow:hidden; position:absolute; left:0; right:0; top:0; bottom:0; padding:clamp(24px,2.8125vw,54px); color:var(--color-white); letter-spacing:-.5px; transition:var(--ease-mid);}
#sec2 .swiper-slide .txt strong { display:block; font-size:clamp(20px,1.4583vw,28px); font-weight:600; opacity:0; transform:translateY(10%); transition:var(--ease-mid);}
#sec2 .swiper-slide .txt span { display:block; margin-top:clamp(8px,.7813vw,15px); font-family:'Roboto'; font-size:clamp(11px,.8333vw,16px); letter-spacing:.25px; opacity:0; transform:translateY(10%); transition:.5s .2s;}
#sec2 .swiper-slide .txt p { margin-top:clamp(24px,2.5vw,48px); font-size:clamp(12px,0.9375vw,18px); line-height:1.75; opacity:0; transform:translateY(10%); transition:.5s .2s;}
#sec2 .swiper-slide:hover .txt p,
#sec2 .swiper-slide .txt.on strong,
#sec2 .swiper-slide .txt.on span { opacity:1; transform:none;}
#sec2 .swiper-pagination { display:none;}

@media all and (max-width:1640px) {
	#sec2 .inner { padding:0 40px;}
}

@media all and (max-width:1024px) {
	#sec2 { min-height:auto; padding:clamp(60px,16.6667vw,120px) 0 clamp(60px,16.6667vw,160px); background-image:url(../images/msec2_bg.jpg); background-size:cover;}
	#sec2 .inner { min-height:auto;}
	#sec2 .sec2_slide { padding-bottom:48px;}
	#sec2 .swiper-slide { width:clamp(250px,42.1875vw,432px);}
	#sec2.spread .swiper-slide:not(.swiper-slide-active) .img,
	#sec2.spread .swiper-slide:not(.swiper-slide-active) .txt { transform:scale(.9); transition:transform .5s;}
	#sec2 .swiper-slide:hover .img::after { display:none;}
	#sec2 .swiper-slide .txt { display:flex; flex-direction:column; justify-content:space-between; padding:clamp(30px,6.9444vw,50px) clamp(20px,4.1667vw,30px); background:linear-gradient(360deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,0)) 60%;}
	#sec2 .swiper-slide .txt.on strong,
	#sec2 .swiper-slide .txt.on span,
	#sec2 .swiper-slide .txt.on p { opacity:0; transform:translateY(30%); transition:.5s;}
	#sec2 .swiper-slide-active .txt.on strong { opacity:1; transform:none; transition-delay:.4s;}
	#sec2 .swiper-slide-active .txt.on span { opacity:1; transform:none; transition-delay:.6s;}
	#sec2 .swiper-slide-active .txt.on p { opacity:1; transform:none; transition-delay:.8s;}
	#sec2 .swiper-pagination { display:flex; justify-content:center; align-items:center; gap:0 5px;}
	#sec2 .swiper-pagination-bullet { background:#aaa; opacity:1; margin:0;}
	#sec2 .swiper-pagination-bullet-active { background:var(--color-white);}
}

@media all and (max-width:768px) {
	#sec2 { padding:80px 0;}
	#sec2 .inner { padding:0; min-height:auto;}
}

@media screen and (max-width:1024px) and (max-height:600px) {
	#sec2 .inner { height:auto;}
}

/* =========================================================
 * SEC3
 * ========================================================= */
#sec3 { overflow:hidden; position:relative; background:#ebe8e4; z-index:1;}
#sec3 .bg { position:fixed; left:0; top:0; width:100%; height:100%; inset: 0; background: url(../images/sec3_bg.jpg) center /cover no-repeat; opacity:0; z-index:-1; transform:translateY(30%);  will-change: transform;}
#sec3 .sec3_con { position:relative; z-index:2; display:flex; align-items:center; min-height:calc(var(--vh) * 100); padding:8.3333vw 0; box-sizing:border-box;}
#sec3 .inner { display:flex; z-index:2; max-width:var(--inner-wide);}
#sec3 .lef,
#sec3 .rig { width:50%; opacity:0; transform:translateY(60px);}
#sec3 .box1,
#sec3 .box2{ opacity:0; transform:translateY(40px); transition:.6s;}
#sec3 .tit_box,
#sec3 .txt_box { color:var(--color-black);}
#sec3 .txt_box { margin-top:2.2917vw;}
#sec3 .txt_box p { font-size:clamp(11px,.8854vw,17px); line-height:1.6; letter-spacing:-.5px;}
#sec3 .btn_box { margin-top:3.125vw;}
#sec3 .btn_view01 { position:relative; display:inline-block; padding-bottom:.3208vw; font-size:clamp(12px,0.8333vw,16px); color:var(--color-black); line-height:1;}
#sec3 .rig .box ~ .box { margin-top:3.6458vw;}
#sec3 .rig .box_tit { position:relative; padding-left:22px; font-size:clamp(13px,1.3542vw,26px); color:var(--color-black); font-weight:500; letter-spacing:-.5px;}
#sec3 .rig .box_tit::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:var(--color-black);}
#sec3 .rig ul { display:flex; flex-wrap:wrap; gap:0 3.6458vw; margin-top:1.0417vw; line-height:1;}
#sec3 .rig ul li { width:calc((100% - 3.65vw) / 2); padding:clamp(6px,1.1458vw,22px) 0; border-top:1px solid var(--color-text);}
#sec3 .rig ul li:nth-child(2) ~ li { border-bottom:1px solid var(--color-text);}
#sec3 .rig ul li em { font-size:clamp(14px,1.4583vw,28px); color:var(--color-navy-2); font-weight:700;}
#sec3 .rig ul li .num { display:block; text-align:right; font-size:clamp(25px,2.6042vw,50px); color:var(--color-black); font-weight:700;}

@media all and (max-width:1640px) {
	#sec3 .inner { padding:0 40px;}
}

@media all and (max-width:1024px) {
	#sec3 .bg { display:block; position:fixed; left:0; top:0; width:100%; height:100%; inset: 0; background: url(../images/sec3_bg.jpg) center/cover no-repeat; opacity:0; z-index:-1;}
	#sec3 .inner { flex-direction:column; gap:13.1944vw; position:relative; z-index:2;}
	#sec3 .lef,
	#sec3 .rig { width:100%;}
}

@media all and (max-width:768px) {
	#sec3 .bg { background-image:url(../images/msec3_bg.jpg);}
	#sec3 .inner { padding:0 clamp(20px,2.8571vw,40px);}
	#sec3 .txt_box { margin-top:6.25vw;}
	#sec3 .txt_box p br { display:none;}
	#sec3 .lef,
	#sec3 .rig { opacity:1; transform:translateY(0);}
	#sec3 .rig ul { flex-direction:column; margin-top:2.5vw;}
	#sec3 .rig ul li { width:100%;}
	#sec3 .rig ul li:nth-child(4) { border-top:none;}
	#sec3 .rig .box ~ .box { margin-top:7.8056vw;}
	#sec3 .rig .box_tit { padding-left:2.7778vw;}
	#sec3 .rig .box_tit::before { width:5px; height:5px;}
}

/* =========================================================
 * SEC4
 * ========================================================= */
#sec4 { overflow:hidden; position:relative; background:#e7e7e8; box-sizing:border-box; will-change: transform; transform: translateZ(0);}
#sec4 .inner { display:flex;}
#sec4 .tit_area { display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; width:100%; height:calc(var(--vh) * 100); padding-bottom:8.8542vw; color:var(--color-black); text-align:center; box-sizing:border-box;}
#sec4 .tit_area .txt { margin-top:1.9792vw; font-size:clamp(15px,1.5625vw,30px); line-height:1.3;}
#sec4 .tit_area .txt p { font-weight:300;}
#sec4 .tit_area .txt strong { font-weight:800;}
#sec4 .tit_area .bg { display:none;}
#sec4 .sd_area { overflow:hidden; position:absolute; left:0; top:8%; z-index:10; width:100%; height:calc(var(--vh) * 100); clip-path:inset(50% 40% 36% round 5px);}
#sec4 .sd_area .imageSwiper { overflow:hidden;}
#sec4 .sd_area .imageSwiper .swiper-slide img { width:100%; transform:scale(.5) translate(-20px,58%);}
#sec4 .sd_area .thumbSwiper { margin-top:3.6458vw; padding:0 12.7604vw;}
#sec4 .sd_area .thumbSwiper .swiper-slide { cursor:pointer; font-size:clamp(12px,0.7292vw,14px); color:rgba(0,0,0,.75); text-align:center;}
#sec4 .sd_area .thumbSwiper .swiper-slide .img {overflow:hidden; position: relative;}
#sec4 .sd_area .thumbSwiper .swiper-slide .img img {transition:.4s;}
#sec4 .sd_area .thumbSwiper .swiper-slide:hover .img img { transform:scale(1.05);}
#sec4 .sd_area .thumbSwiper .swiper-slide span { position:relative; display:inline-block; margin-top:8px; line-height:1.3; letter-spacing:-1.4px;}
#sec4 .sd_area .thumbSwiper .swiper-slide span::after { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:1px; background:var(--color-black); transition:.5s;}
#sec4 .sd_area .thumbSwiper .swiper-slide .img::before { content: ''; position: absolute; z-index:2; inset: 0; pointer-events: none;
	background: linear-gradient(var(--color-black), var(--color-black)) left top / 0 2px no-repeat,linear-gradient(var(--color-black), var(--color-black)) right top / 2px 0 no-repeat,
		linear-gradient(var(--color-black), var(--color-black)) right bottom / 0 2px no-repeat,linear-gradient(var(--color-black), var(--color-black)) left bottom / 2px 0 no-repeat;
	transition: background-size .8s ease;
}
#sec4 .sd_area .thumbSwiper .swiper-slide-thumb-active .img::before { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;}
#sec4 .sd_area .thumbSwiper .swiper-slide-thumb-active span { color:var(--color-black); font-weight:500;}
#sec4 .sd_area .thumbSwiper .swiper-slide-thumb-active span::after { width:100%;} 
#sec4 .sd_area .textSwiper { overflow:hidden; position:absolute; left:0; top:19.0625vw; max-width:50%; padding-left:8.3333vw; color:var(--color-white); opacity:0; transform:translateY(50px);}
#sec4 .sd_area .textSwiper .tit_box strong { display:block; font-size:clamp(25px,1.8229vw,35px); font-weight:600; opacity:0; transform:translateY(100%);}
#sec4 .sd_area .textSwiper .tit_box span { display:block; margin-top:.8333vw; font-size:clamp(13px,1.3021vw,25px); opacity:0; transform:translateY(100%); text-transform:uppercase;}
#sec4 .sd_area .textSwiper .txt_box { margin-top:1.3021vw;}
#sec4 .sd_area .textSwiper .txt_box p { font-size:clamp(12px,.8333vw,16px); line-height:1.8; opacity:0; transform:translateY(50%);}
#sec4 .sd_area .textSwiper .btn_box { margin-top:3.125vw;}
/*#sec4 .sd_area .textSwiper .btn_view02 { display:inline-block; position:relative; font-size:clamp(11px,.625vw,12px); color:var(--color-white); line-height:1.3; opacity:0; transform:translateY(100%);}
#sec4 .sd_area .textSwiper .btn_view02::before,
#sec4 .sd_area .textSwiper .btn_view02::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--color-white);}
#sec4 .sd_area .textSwiper .btn_view02::before{transform:scaleX(0);transform-origin:left;transition:transform .4s ease .4s;}
#sec4 .sd_area .textSwiper .btn_view02::after{transform:scaleX(1);transform-origin:right;transition:transform .4s ease;}
#sec4 .sd_area .textSwiper .btn_view02:hover::before{transform:scaleX(1);}
#sec4 .sd_area .textSwiper .btn_view02:hover::after{transform:scaleX(0);}
#sec4 .sd_area .textSwiper .btn_view02 { padding-right: 24px; background:url(../images/board_arrow_wh.png) no-repeat right 4px center / 12px auto; font-size:clamp(12px,0.8333vw,16px); font-weight:600;}
#sec4 .sd_area .textSwiper .btn_view02:hover { background-position:right center;}*/

#sec4 .sd_area .textSwiper .btn_view02 { display:inline-flex; align-items:center; justify-content:center; min-width:150px; height:40px; position:relative;  padding-right: 16px; background:url(../images/board_arrow_wh.png) no-repeat right 18px center / 12px auto; font-size:clamp(12px,0.8333vw,16px); font-weight:600; color:var(--color-white); line-height:1; opacity:0; transform:translateY(100%); border:1px solid #fff; transition:.3s; transition-delay:0s;}
#sec4 .sd_area .textSwiper .btn_view02:hover { background-position:right 15px center; background-image:url(../images/board_arrow.png); background-color:var(--color-white); color:var(--color-black); transition-delay:0s;}

#sec4 .sd_area .textSwiper .swiper-slide-active .tit_box strong,
#sec4 .sd_area .textSwiper .swiper-slide-active .tit_box span,
#sec4 .sd_area .textSwiper .swiper-slide-active .txt_box p,
#sec4 .sd_area .textSwiper .swiper-slide-active .btn_view02 { opacity:1; transform:none; transition:.5s;}
#sec4 .sd_area .textSwiper .swiper-slide-active .tit_box span { transition-delay:.2s;}
#sec4 .sd_area .textSwiper .swiper-slide-active .txt_box p { transition-delay:.4s;}
#sec4 .sd_area .textSwiper .swiper-slide-active .btn_view02 {transition:transform .5s, opacity .5s; transition-delay: 0.6s, 0.6s;}
#sec4 .sd_area .textSwiper .swiper-slide-active .btn_view02:hover { transition-delay:0s;} 

@media all and (max-width:1600px) {
	#sec4 .sd_area { clip-path:inset(60% 40% 25% round 5px); top:2%;}
	#sec4 .sd_area .imageSwiper .swiper-slide img { max-height:75vh; object-position:center;}
}

@media all and (max-width:1400px) {
	#sec4 .sd_area { clip-path:inset(40% 40% 50% round 5px); top:15%;}
}

@media all and (max-width:1200px) {
	#sec4 .sd_area { clip-path:inset(30% 40% 60% round 5px); top:25%;}
}

@media all and (max-width:1024px) {
	#sec4 { min-height:auto;}
	#sec4 .tit_area { position:relative; left:0; right:0; top:0; z-index:2; padding:80px 0 24px; height:100%; transform:none;}
	#sec4 .tit_area .bg { display:none;}
	#sec4 .sd_area { position:relative; z-index:3; height:auto; padding-bottom:80px; clip-path:inset(0 0 0 0); top:0;}
	#sec4 .sd_area .imageSwiper {overflow:hidden; clip-path:inset(30% round 5px);}
	#sec4 .sd_area .imageSwiper .swiper-slide img { transform:scale(1.1); object-fit:cover;}
	#sec4 .sd_area .imageSwiper .swiper-slide img.pc { display:none;}
	#sec4 .sd_area .thumbSwiper { padding:0 5.5556vw;}
	#sec4 .sd_area .thumbSwiper .swiper-slide { width:clamp(75px,20.8333vw,150px);}
	#sec4 .sd_area .textSwiper { position:relative; top:0; max-width:100%; margin-top:5vw; padding-left:5.5556vw; color:var(--color-black);}
	#sec4 .sd_area .textSwiper .btn_view02 { color:var(--color-black); border-color:var(--color-black); background-image:url(../images/board_arrow.png); background-size:10px auto;}
}

@media all and (max-width:768px) {
	#sec4 { min-height:auto;}
	#sec4 .sd_area .imageSwiper {overflow:hidden; clip-path:inset(30% 20% round 5px);}
	#sec4 .sd_area .imageSwiper .swiper-slide img { object-fit:cover;}
	#sec4 .sd_area .thumbSwiper { margin-top:clamp(20px,2.0833vw,40px); padding:0 5.5556vw;}
	#sec4 .sd_area .thumbSwiper .swiper-slide { width:clamp(75px,20.8333vw,150px); font-size:clamp(10px,.7813vw,15px);}
	#sec4 .sd_area .textSwiper { position:relative; top:0; margin-top:clamp(20px,2.0833vw,40px); padding-left:5.5556vw; padding-right: 5.5556vw; color:var(--color-black);}
	#sec4 .sd_area .textSwiper .tit_box span { margin-top:3vw; letter-spacing:-1px;}
	#sec4 .sd_area .textSwiper .txt_box { margin-top:2.25vw;}
	#sec4 .sd_area .textSwiper .txt_box br { display:none;}
	#sec4 .sd_area .textSwiper .btn_box { margin-top:4.7222vw;}
	#sec4 .sd_area .textSwiper .btn_view02 {min-width:120px; height:30px; color:var(--color-black);}
	#sec4 .sd_area .textSwiper .btn_view02::before,
	#sec4 .sd_area .textSwiper .btn_view02::after{background:var(--color-black);}
}

@media screen and (min-width:2000px) {
	#sec4 .sd_area .imageSwiper .swiper-slide img { max-height:65vh; object-fit:cover;}
	#sec4 .sd_area .thumbSwiper { margin-top:2vw;}
	#sec4 .sd_area .textSwiper { top:10vw;}
}

@media screen and (max-width:1024px) and (max-height:600px) {
	#sec4 .sd_area .thumbSwiper { margin-top:1vw;}
	#sec4 .sd_area .thumbSwiper .swiper-slide { max-width:90px;}
	#sec4 .sd_area .textSwiper { margin-top:.3vw;}
	#sec4 .sd_area .textSwiper .txt_box,
	#sec4 .sd_area .textSwiper .btn_box { margin-top:.2vw;}
}

@media screen and (min-width:1025px) and (max-height:600px) {
	#sec4 .sd_area { clip-path:inset(40% 40% 45% round 5px); top:15%;}
}

/* =========================================================
 * SEC5
 * ========================================================= */
#sec5 { position:relative; padding-top:11.4583vw; padding-bottom: 2.0833vw; text-align:center; box-sizing:border-box;}
#sec5 .bg { display:block; position:fixed; left:0; top:0; width:100%; height:100%; inset: 0; background: url(../images/sec5_bg.jpg) center/cover no-repeat; transform:scale(1.3); z-index:-1; transform:translateY(30%);  will-change: transform;}
#sec5 .inner { max-width:1462px; z-index:2;}
#sec5 .txt_wrap { color:var(--color-white);}
#sec5 .txt_box p { margin-top:2.0833vw; font-size:clamp(14px,.8854vw,17px); line-height:1.6; letter-spacing:-.5px;}
#sec5 .search_wrap { margin-top:3.125vw;}
#sec5 .search_wrap .search { display:flex; align-items:center; justify-content:space-between; gap:0 10px; max-width:29.1667vw; margin:0 auto; border-bottom:1px solid rgba(255,255,255,.5);}
#sec5 .search_wrap input { flex:1; padding:.8333vw 8px; background:transparent; border:0; font-size:clamp(15px,1.1458vw,22px); color:var(--color-white);}
#sec5 .search_wrap input:focus { outline:none;}
#sec5 .search_wrap input::placeholder { color:rgba(255,255,255,.5);}
#sec5 .tab_container { margin-top:2.0833vw;}
#sec5 .tab_list { display:flex; align-items:stretch; justify-content:center; gap:0 10px; position:relative; width:100%;}
#sec5 .tab_list > li { flex:1;}
#sec5 .tab_list .tab_tit { display:flex; align-items:center; gap:0 10px; position:relative; height:9.8958vh; padding:0 clamp(15px,1.5625vw,30px); background-color:rgba(255,255,255,.25); background-position:right clamp(10px,2.7778vw,20px) center; background-repeat:no-repeat; background-size:auto 2.1875vw; cursor:pointer;}
#sec5 .tab_list .tab_tit::before { content:''; position:absolute; left:0; right:0; top:0; height:calc(100% + 11px); border:1px solid var(--color-white); border-bottom:0; opacity:0;}
#sec5 .tab_list .tab_tit::after { content:''; position:absolute; left:0; bottom:-11px; width:calc(100% + 10px); height:1px; background:var(--color-white); opacity:0;}
#sec5 .tab_list li:first-child .tab_tit::after { left:auto; right:-10px;}
#sec5 .tab_list li:first-child.active + li:nth-child(2) .tab_tit::after { left:-10px;}
#sec5 .tab_list li:last-child .tab_tit::after { left:-10px;}
#sec5 .tab_list li:nth-child(1) .tab_tit { background-image:url(../images/sec5_ico01.svg);}
#sec5 .tab_list li:nth-child(2) .tab_tit { background-image:url(../images/sec5_ico02.svg);}
#sec5 .tab_list li:nth-child(3) .tab_tit { background-image:url(../images/sec5_ico03.svg);}
#sec5 .tab_list .tab_tit strong { font-size:clamp(15px,1.3542vw,26px); color:var(--color-white); font-weight:700;}
#sec5 .tab_list .tab_tit span { font-size:clamp(12px,1.0417vw,20px); color:rgba(255,255,255,.5);}
#sec5 .tab_list .tab_con { display:none; position:absolute; left:0; right:0; margin-top:11px; padding:clamp(15px,1.25vw,24px);}
#sec5 .tab_list .tab_con ul { display:flex; flex-wrap:wrap; gap:1.3625vw 80px; text-align:left;}
#sec5 .tab_list .tab_con ul li { width:calc((100% - 400px) / 6);}
#sec5 .tab_list .tab_con ul li a { display:inline-block; position:relative; padding-bottom:6px; font-size:clamp(12px,.8333vw,16px); color:var(--color-white); font-weight:500; line-height:1.3;}
#sec5 .tab_list .tab_con ul li a::after { content:''; position:absolute; left:50%; bottom:0; width:0; height:1px; background:var(--color-white); transform:translateX(-50%); transition:var(--ease-mid);}
#sec5 .tab_list .tab_con ul li:hover a::after { width:100%;}
#sec5 .tab_list li.active .tab_tit { background-color:transparent;}
#sec5 .tab_list li.active .tab_tit::after { opacity:0;}
#sec5 .tab_list li.notActive .tab_tit::after { opacity:1;}
#sec5 .tab_list li.active .tab_tit::before { opacity:1;}
#sec5 .tab_list li.active .tab_con { display:block; border:1px solid var(--color-white); border-top-color:transparent;}


@media all and (max-width:1462px) {
	#sec5 .inner { padding:0 clamp(20px,2.8571vw,40px);}
}

@media all and (max-width:1024px) {
	#sec5 { min-height:auto; padding-bottom:5.5556vw; z-index:1; background:none;}
	#sec5 .tab_list { flex-direction:column; gap:1.0417vw;}
	#sec5 .tab_list .tab_tit { height:auto; padding:clamp(15px,1.5625vw,30px);}
	#sec5 .tab_list li .tab_tit::before,
	#sec5 .tab_list li .tab_tit::after { display:none;}
	#sec5 .tab_list .tab_con { position:static; margin-top:0;}
	#sec5 .tab_list .tab_con ul { display:flex; flex-wrap:wrap; gap:1.5625vw 0;}
	#sec5 .tab_list .tab_con ul li { width:33.333%;}
	#sec5 .tab_list li.active { border:1px solid var(--color-white);}
	#sec5 .tab_list li.active .tab_con { border:0;}
}

@media all and (max-width:768px) {
	#sec5 { padding:22.2222vw 0;}
	#sec5 .bg {background-image:url(../images/msec5_bg.jpg);}
	#sec5 .txt_box p { margin-top:5.5556vw; font-size:clamp(11px,.8854vw,17px);}
	#sec5 .search_wrap { margin-top:8.3333vw;}
	#sec5 .search_wrap .search { max-width:calc(100% - 11.1111vw);}
	#sec5 .search_wrap input { padding:2.5vw 0; font-size:clamp(12px,1.1458vw,22px);}
	#sec5 .tab_container { margin-top:5.5556vw;}
	#sec5 .tab_list { flex-direction:column; gap:1.0417vw;}
	#sec5 .tab_list .tab_tit { gap:0 5px; background-size:auto 21px;}
	#sec5 .tab_list .tab_con { position:static;}
	#sec5 .tab_list .tab_con ul { display:flex; flex-wrap:wrap; gap:4.1667vw 0;}
	#sec5 .tab_list .tab_con ul li { width:50%;}
	#sec5 .tab_list li.active { border:1px solid var(--color-white);}
	#sec5 .tab_list li.active .tab_con { border:0;}
}

/* =========================================================
 * SEC6
 * ========================================================= */
#sec6 { background:url(../images/sec6_bg.jpg) center/cover repeat; letter-spacing:-.5px;}
#sec6 .inner { display:flex; align-items:center; max-width:var(--inner-wide); height:calc(var(--vh) * 100);}
#sec6 .sec_flex { display:flex; width:100%; /*padding-top:6.25vw;*/}
#sec6 .lef,
#sec6 .rig { width:50%; color:var(--color-black);}
#sec6 .lef .tit { font-size:clamp(20px,1.8229vw,35px); font-weight:300; line-height:1.4;}
#sec6 .lef .tit b { font-weight:800;}
#sec6 .lef .desc { margin-top:1.7708vw; font-size:clamp(15px,.8854vw,17px); line-height:1.6;}
#sec6 .lef .info { margin-top:4.0625vw;}
#sec6 .lef .info li { display:flex; font-size:clamp(15px,.8854vw,17px);}
#sec6 .lef .info li ~ li { margin-top:.7292vw;}
#sec6 .lef .info li span { display:block; min-width:5.7292vw;}
#sec6 .lef .link { display:flex; align-items:center; gap:0 10px; margin-top:2.3438vw;}
#sec6 .lef .link > li > a { display:flex; align-items:center; justify-content:center; gap:0 10px; height:50px; padding:0 1.0417vw; background:var(--color-white); font-size:clamp(14px,.7813vw,15px); color:var(--color-black); font-weight:500;}
#sec6 .lef .link li.link_pop { position:relative;}
#sec6 .lef .link li.link_pop > a { width:50px; height:50px; padding:0; box-sizing:border-box; background:var(--color-white) url(../images/ico-share.svg) no-repeat center / 50% auto; border:1px solid var(--color-red);}
#sec6 .lef .link li.link_pop > a:hover { background-image:url(../images/ico-share-on.svg); background-color:var(--color-red);}
#sec6 .lef .link li.link_pop .hidden{ position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0);}
#sec6 .lef .link li.link_pop > a.active { background-image:url(../images/ico-close.png);}
#sec6 .lef .link li.link_pop > a.active:hover { background-image:url(../images/ico-close-on.png);}
#sec6 .lef .link li .link_btn_box { display:none; position:absolute; right:0; bottom:calc(100% + 10px); z-index:10; padding:0.5208vw 0; width:100%; background:var(--color-red);}
#sec6 .lef .link li .link_btn_box > span { display:flex; align-items:center; justify-content:center; width:50px; height:50px;}
#sec6 .lef .link li .link_btn_box > span ~ span { margin-top: 5px;}
#sec6 .rig .tab_top { position:relative; margin-bottom:2.5vw;}
#sec6 .rig .tab_menu { display:flex; align-items:stretch; gap:0 2px;}
#sec6 .rig .tab_menu li { display:inline-flex; align-items:center; justify-content:center; min-width:6.25vw; height:2.8646vw; border:1px solid var(--color-wine); font-size:clamp(14px,1.0417vw,20px); color:var(--color-wine); font-weight:500; cursor:pointer;}
#sec6 .rig .tab_menu li.active { background:var(--color-wine); color:var(--color-white);}
#sec6 .btn_view01 { display:inline-block; position:absolute; right:0; bottom:0; font-size:clamp(12px,0.8333vw,16px); color:var(--color-black); letter-spacing:.5px; line-height:1.3;}
#sec6 .rig .tab_con ul { border-top:1px solid var(--color-text);}
#sec6 .rig .tab_con ul li { border-bottom:1px solid var(--color-text);}
#sec6 .rig .tab_con ul li.nodata { text-align:center; pointer-events:none;}
#sec6 .rig .tab_con ul li a { display:block; padding:2.3438vw 0; color:var(--color-black);}
#sec6 .rig .tab_con ul li strong { overflow:hidden; display:block; max-width:100%; margin-bottom:10px; font-size:clamp(16px,1.0417vw,20px); font-weight:600; text-overflow:ellipsis; white-space:nowrap; line-height:1.2;}
#sec6 .rig .tab_con ul li span { font-size:clamp(12px,.8333vw,16px);}
#sec6 .rig .tab_con ul li:hover strong { color:var(--color-wine); transition:.3s;}

.btn_view01 { padding-right: 24px; background:url(../images/board_arrow.png) no-repeat right 4px top 2px / 12px auto; font-weight:600; transition:.4s;}
.btn_view01:hover { background-position:right top 2px;}
.btn_view01::before,
.btn_view01::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--color-black);}
.btn_view01::before{transform:scaleX(0);transform-origin:left;transition:transform .4s ease .4s;}
.btn_view01::after{transform:scaleX(1);transform-origin:right;transition:transform .4s ease;}
.btn_view01:hover::before{transform:scaleX(1);}
.btn_view01:hover::after{transform:scaleX(0);}

@media all and (max-width:1462px) {
	#sec6 .inner { padding:0 clamp(20px,2.8571vw,40px);}
}

@media all and (max-width:1024px) {
	#sec6 .inner { height:auto; padding-top:120px; padding-bottom:80px;}
	#sec6 .sec_flex { flex-direction:column; gap:7.2917vw;}
	#sec6 .lef,
	#sec6 .rig { width:100%;}
	#sec6 .lef .desc,
	#sec6 .lef .link { margin-top:3.9063vw;}
	#sec6 .lef .info { margin-top:4.1667vw;}
	#sec6 .lef .info li ~ li { margin-top:1.5625vw;}
	#sec6 .lef .info li span { min-width:13.8889vw;}
	#sec6 .lef .link > li > a { padding:0 1.7578vw;}
	#sec6 .rig .tab_menu li { min-width:11.7188vw; height:5.2734vw;}
    #sec6 .lef .link li.link_pop > a,
	#sec6 .lef .link li .link_btn_box > span { width:45px; height:45px;}
	.btn_view01 {background-size:10px auto;}
}

@media all and (max-width:768px) {
	#sec6 { background-image:url(../images/msec6_bg.jpg);}
	#sec6 .inner { padding-top:60px; padding-bottom:60px;}
	#sec6 .sec_flex { flex-direction:column; gap:min(18.75vw,70px);}
	#sec6 .lef,
	#sec6 .rig { width:100%;}
	#sec6 .lef .info { margin-top: min(11.1111vw,45px);}
	#sec6 .lef .desc,
	#sec6 .lef .info li { font-size:clamp(12px,2.7778vw,16px); line-height:1.3;}
	#sec6 .lef .info li ~ li { margin-top:2.7778vw;}
	#sec6 .lef .info li span { min-width:13.8889vw;}
	#sec6 .lef .link { gap:0 5px;}
	#sec6 .lef .link > li > a { height:9.7222vw; max-height:50px; padding:0 5.5556vw;  font-size:clamp(12px,.7813vw,15px);}
	#sec6 .lef .link > li > a img { width:auto; max-height:30%;}
	#sec6 .lef .link > li:nth-child(2) > a img { max-height:40%;}
	#sec6 .rig .tab_top { margin-bottom:6.9444vw;}
	#sec6 .rig .tab_menu li { min-width:22.2222vw; height:9.7222vw; max-height:50px; font-size:clamp(14px,3.3333vw,18px);}
	#sec6 .rig .tab_con ul li a { padding:clamp(20px,5.5556vw,30px) 0;}
	#sec6 .rig .tab_con ul li strong { margin-bottom:5px; font-size:clamp(14px,3.3333vw,16px);}
	#sec6 .rig .tab_con ul li span { font-size:clamp(11px,2.7778vw,14px);}
	#sec6 .lef .link li.link_pop > a { width:9.7222vw; max-width:50px; height:9.7222vw;}
	#sec6 .lef .link li .link_btn_box { bottom:calc(100% + 5px);}
	#sec6 .lef .link li .link_btn_box > span { width:100%; height:40px;}
	#sec6 .lef .link li .link_btn_box span a{ display:block; max-width:100%;}
	#sec6 .lef .link li .link_btn_box > span ~ span { margin-top:0;}
	#sec6 .lef .link li .link_btn_box span a img { width:18px;}
	.btn_view01 { padding-right: 18px; background-size:8px auto;}
	#sec6 .btn_view01 { font-size:11px; background:none; padding-right: 0;}
}