@charset "utf-8";

.sec-01{position:relative; padding: 13rem 0 10rem; }
.sec-01:after{content:''; display:block; width:100%; height: 76%; background: var(--color-red); position: absolute; inset: 0;}
.sec-01 .hero-visual{position:relative;width:100%;}
.sec-01 .vs_top_desc{width:100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);padding: 0 2rem; z-index: 2;display: flex; flex-direction: column;  gap: 5rem;}
.sec-01 .vs_title{font-family: var(--font-sebang); color: #fff; text-align:center;}
.sec-01 .vs_title .mtit{font-size:2.5rem; line-height:1.4;}
.sec-01 .vs_title .htit{font-size:5rem; font-weight:700; line-height:1.4; margin-top: 2rem;}
.sec-01 .hero-visual .controls-wrap{width: 27rem;border-radius: 1rem;padding: 2.4rem 2rem;backdrop-filter: blur(4px);background: rgba(34, 34, 34, 0.8);margin:0 auto; display: flex;align-items: center;justify-content: center; gap:4rem;}
.sec-01 .hero-visual .pager{font-family: var(--font-sebang);  font-size: 1.8rem; color: #fff; display:flex; align-items:center; gap:2rem;}
.sec-01 .hero-visual .pager .devide{width:0.5rem; height:0.5rem; border-radius:50%; background:var(--bg-gray); margin-top: -0.3rem;}
.sec-01 .hero-visual .pager .total{opacity:0.5;}
.sec-01 .hero-visual .controler{display: flex; align-items: center; gap: 2rem;}
.sec-01 .hero-visual .controler button:focus-visible {outline: 2px dashed #FFF;}
.sec-01 .visual-slide{width: 100%;}
.sec-01 .visual-slide .swiper{border-radius:2rem;}
.sec-01 .visual-slide .swiper:before{content: ''; display: block; width: 100%; height: 100%; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5);  z-index: 2;}
.sec-01 .hero-visual .swiper-slide a{display:block; width: 100%; position: relative; border-radius: 2rem; overflow:hidden;}
.sec-01 .hero-visual .swiper-slide a:focus-visible:before{content:'';display:block;width: 100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;border: 2px dashed #000;z-index: 1;border-radius: 2rem;}
.sec-01 .hero-visual .swiper-slide a:after {content: ""; display: block; padding-bottom: 40%;}
.sec-01 .hero-visual .swiper-slide a img{width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.sec-01 .hero-visual .swiper-slide > div{display:block; width: 100%; position: relative; border-radius: 2rem; overflow:hidden;}
.sec-01 .hero-visual .swiper-slide > div:focus-visible:before{content:'';display:block;width: 100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;border: 2px dashed #000;z-index: 1;border-radius: 2rem;}
.sec-01 .hero-visual .swiper-slide > div:after {content: ""; display: block; padding-bottom: 40%;}
.sec-01 .hero-visual .swiper-slide > div img{width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}

.sec-02 .inwrap{display:flex; align-items: stretch; border-bottom:1px solid var(--line-gray); padding-bottom:3rem;}
.sec-02 .bcf-text-area{flex:1; font-family: var(--font-sebang); background:url(../img/en/txt_BSCF.svg) no-repeat left bottom; }
.sec-02 .bcf-title{font-size:4.5rem; font-weight:700; line-height:1.4;}
.sec-02 .bcf-desc{font-size:2.5rem;line-height:1.4; margin-top:6rem;}
.sec-02 .bcf-info-list{flex:0 0 60rem; border-left:1px solid var(--line-gray);}
.sec-02 .bcf-info-item + .bcf-info-item{border-top:1px solid var(--line-gray);}
.sec-02 .bcf-info-item a{width:100%; display: flex; align-items: center; gap:3rem; padding:3rem; transition:all 0.3s; }
.sec-02 .bcf-icon-box {flex-shrink: 0; width: 12rem; height: 12rem; background: var(--bg-gray01); border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.sec-02 .bcf-icon-box .ico01{width:6rem; height:4rem; background:url(../img/en/bscf_icon01.svg) no-repeat center center / 6rem;}
.sec-02 .bcf-icon-box .ico02{width:4.5rem; height:5.5rem; background:url(../img/en/bscf_icon02.svg) no-repeat center center / 4.5rem;}
.sec-02 .bcf-icon-box .ico03{width:5.8rem; height:6.8rem; background:url(../img/en/bscf_icon03.svg) no-repeat center center / 5.8rem;}
.sec-02 .bcf-info-text {display: flex; flex-direction: column; gap: 2rem;}
.sec-02 .info-title{line-height: 1.4; font-family: var(--font-sebang); font-size: 2.4rem;}
.sec-02 .info-desc{font-size: 2rem;}

.sec-03 {padding: 10rem 0 12rem;}
.sec-03 .card-grid {display: flex; flex-wrap: wrap; gap: 6rem;}
.sec-03 .card-item {display: block; flex: 1 1 calc(33.333% - 6rem);position: relative; width: 100%; overflow: hidden; color: #fff;}
.sec-03 .card-imgbox {position: relative; padding-top: 90%;}
.sec-03 .card-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.sec-03 .card-overlay {position: absolute; bottom: 0; left: 0; width: 100%; height: 14rem; padding: 2rem 5.5rem; display: flex;justify-content: space-between; align-items: center; z-index: 10; background: rgba(0,0,0,0.3); backdrop-filter: blur(3px);}
.sec-03 .title { font-family: var(--font-sebang); font-size: 2.6rem; font-weight: 600;}
.sec-03 .link-icon {width: 1.5rem; height: 1.5rem;background: url(../img/default/diagonal_arrow.svg) no-repeat center / 1.2rem;transition: transform 0.4s ease;}

@media screen and (min-width:1200px){
	.sec-02 .bcf-info-item a:hover,
	.sec-02 .bcf-info-item a:focus {background: var(--color-red); color: #fff;}
	.sec-02 .bcf-info-item a:hover .bcf-icon-box,
	.sec-02 .bcf-info-item a:focus .bcf-icon-box{background:#fff;}
	
	.sec-03 .card-item:hover .card-image, 
	.sec-03 .card-item:focus .card-image {transform: scale(1.05);}
	.sec-03 .card-item:hover .link-icon{transform: rotate(45deg);}
	
}
@media (max-width: 1540px) {
    .sec-02 .bcf-info-list{flex: 0 0 45rem;}
    
    .sec-03 .card-grid{gap:3rem;}
}

@media (max-width: 1200px) {
    .sec-01 .vs_title .mtit{font-size:2.2rem;}
    .sec-01 .vs_title .htit{font-size:4.5rem;}
    .sec-01 .hero-visual .swiper-slide a:after{padding-bottom:60%;}
    
    .sec-02 .inwrap{flex-direction: column; gap: 5rem; border-bottom:0;}
    .sec-02 .bcf-text-area{background:none;}
    .sec-02 .bcf-title{font-size:4rem;}
    .sec-02 .bcf-desc{font-size:2rem;}
    .sec-02 .bcf-info-list{border-left:0; }
    .sec-02 .info-title{font-size:2.2rem;}
    .sec-02 .info-desc{font-size:1.8rem;}
    
    .sec-03 .card-item{flex: 1 1 100%;}
}

@media (max-width: 980px) {
   .sec-01 .hero-visual .swiper-slide a:after{padding-bottom:85%;}
}

@media (max-width: 768px) {
	.sec-01 .vs_title .mtit{font-size:1.8rem;}
    .sec-01 .vs_title .htit{font-size:3.5rem;}
    
   .sec-02 .bcf-info-item a{padding:3rem 0;}
}
@media (max-width: 640px) {
   .sec-01 .hero-visual .swiper-slide a:after{padding-bottom:100%;}
}
@media (max-width: 480px) {
   .sec-02 .bcf-icon-box{width:11rem; height:11rem;}
   .sec-02 .bcf-icon-box .ico01{width: 5.5rem; background: url(../img/en/bscf_icon01.svg) no-repeat center center / 5.5rem;}
   .sec-02 .bcf-icon-box .ico02 {width: 4rem; background: url(../img/en/bscf_icon02.svg) no-repeat center center / 4rem;}
   .sec-02 .bcf-icon-box .ico03 {width: 5.3rem; height: 6.8rem; background: url(../img/en/bscf_icon03.svg) no-repeat center center / 5.3rem;}
}