@import url("common.css");



/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; transition:all .3s linear; z-index: 9999; width:70px; aspect-ratio: 1 / 1;  border-radius:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background: rgba(255, 255, 255, 0.10); z-index:30;}
.slick-arrow::before {content:'\e2ea'; font-family:var(--icon); font-size:35px; line-height:1; display:block; color:var(--white); transition:all 0.3s; font-weight:300;}
.slick-arrow:hover {border-color:var(--white); background:var(--white);}
.slick-arrow:hover::before {color:var(--main); transition:all 0.3s;}
.slick-next::before {content:'\e5e1';}


.moreBtn { position: relative; width: 120px; overflow: hidden; aspect-ratio: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: var(--main); border-radius: 100%; }
.moreBtn::before { content: '\f3dd'; font-size: 22px; display: block; line-height: 1; font-family: var(--icon); color: var(--white); font-weight: 400; z-index: 20; }
.moreBtn::after { content: ''; width: 100%; height: 100%; background: url("/img/btn_inner.svg") no-repeat center; position: absolute; top: 0; left: 0; animation: spinInfinite 6s linear infinite; }
.moreBtn:hover::after { animation-play-state: paused; }

@keyframes spinInfinite {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/*** Visual ***/
#visual{width:100%; height: var(--fullvh); overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--fullvh);}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); z-index: 9999; }
#visual .visual_in .roll .v_txt b.fs18 {display:block; font-weight: 500; color:var(--white); transition:all .6s 0.2s linear; transform:translateY(60px); opacity:0; margin:0 0 10px;}
#visual .visual_in .roll .v_txt h2 {position:relative; color:var(--white); transition:all .6s 0.4s linear; transform:translateY(60px); opacity:0; z-index:10;}
#visual .visual_in .roll .v_txt h2 .moreBtn {position: absolute; right: -80px; bottom: 19px; z-index:-1;}
#visual .visual_in .roll .v_txt p.fs18 {color:rgba(255,255,255,0.8); transition:all .6s 0.8s linear; transform:translateY(60px); opacity:0; margin:30px 0 0;}
#visual .visual_in .roll .v_txt .tag {display:flex; flex-wrap:wrap; gap:4px; color:var(--white); transition:all .6s 1s linear; transform:translateY(60px); opacity:0; margin:60px 0 0;}
#visual .visual_in .roll .v_txt .tag li {border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.50); opacity: 0.9; color:var(--white); padding:7px 14px; box-sizing:border-box; font-size: 0.8888888888888889rem; font-weight: 400; line-height: 175%; letter-spacing: -0.8px;}
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg{width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center;-webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out; transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll .v_bg .bg.pc {}
#visual .visual_in .roll .v_bg .bg.mo {display:none;}
#visual .visual_in .roll .v_bg .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}

#visual .visual_in .roll .v_txt .more_wrap {margin: 60px 0 0; transition:all 0.6s 1.2s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .visual_more {width: 160px; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 5px; background: var(--white); color: var(--main); box-sizing: border-box; position: relative; overflow: hidden;}
#visual .visual_in .roll .v_txt .visual_more span.btn_txt {font-size: 0.889rem; font-weight: 700; line-height: 175%; letter-spacing: 0.01em; font-family: var(--eng); position: relative; z-index: 10;}
#visual .visual_in .roll .v_txt .visual_more span.btn_icon {display: flex; position: relative; z-index: 10; transition:all 0.3s;}
#visual .visual_in .roll .v_txt .visual_more span.btn_icon::before {content:'\f3dd'; font-family:var(--icon); font-size:18px; line-height:1; display:block; transition:all 0.3s; font-variation-settings: 'wght' 800;}


#visual .visual_in .roll .v_txt .visual_more::before {content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--main); transform: translateX(-100%); transition: transform 0.3s; z-index: 1;}
#visual .visual_in .roll .v_txt .visual_more:hover::before {transform: translateX(0);}
#visual .visual_in .roll .v_txt .visual_more:hover {color: var(--white); background: var(--main);}
#visual .visual_in .roll .v_txt .visual_more:hover span.btn_icon {transform: rotate(180deg);}

/* 스크롤 */
#visual .scroll_down{display:inline-block; font-size:13px; font-weight:500; color:var(--white); line-height:120%; font-family:var(--eng); text-align:center; position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index: 9999;}
#visual .scroll_down span{display:block; width:20px; height:30px; border-radius:20px; box-sizing:border-box; border:1px solid rgba(255,255,255,.5); position:relative; margin:12px auto 0;}
#visual .scroll_down span:after{content:''; display:block; width:2px; height:5px; background:var(--white); border-radius:2px; position:absolute; left:50%; top:8px; margin-left:-1px; animation:scroll_down 1s linear infinite;}


@keyframes scroll_down {
	0%,100% { transform:translateY(0); opacity: 1;}
	50% { transform:translateY(2px); opacity: 0.5;}
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}


/* 화살표 */
#visual .slick-arrow {position:absolute; top:50%; margin-top:-35px;}
#visual .slick-prev {left:2%;}
#visual .slick-next {right:2%;}




/* 도트 */
#visual .slick-dots{font-size:0; position: absolute; left: 50%; top:60%; transform:translate(-50%,-50%); z-index: 9999; margin-bottom: 120px;}
#visual .slick-dots li{display:inline-block; vertical-align:top; width:20px; height:20px; border:1px solid transparent; box-sizing:border-box; margin: 0 15px 0 0; cursor:pointer; transition:all .3s linear; border-radius:50%; position: relative;}
#visual .slick-dots li:last-child{margin: 0;}
#visual .slick-dots li.slick-active{border-color:rgba(255,255,255,.3);}
#visual .slick-dots li:after{content:''; display:block; width:10px; height:10px; border-radius:50%; background:var(--white); position: absolute; left:50%; top:50%; margin-left: -5px; margin-top: -5px; opacity: 0.3; transition:all .3s linear;}
#visual .slick-dots li.slick-active:after{opacity: 1;}
#visual .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer;}


/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{ -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);  }
#visual .visual_in .roll.action .v_txt h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs18{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .tag{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .more_wrap {transform:translateY(0); opacity:1;}




/* fullpage */
.section {position:relative; display: block; width: 100%; height: var(--fullvh) !important; overflow: hidden !important;}
.section .fp-overflow{width: 100%; height: 100%; overflow: hidden !important; display: flex; flex-direction: column; justify-content: center;}
.section .bg {position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; transform:scale(1.25); transition:all 2s; background:var(--black);}
.section .bg .bg_in {width:100%; height:100%; filter: blur(10px); opacity: 0.5;}
.section.action .bg {transform:scale(1); transition:all 2s 0.1s;}

.section_arrow { display: flex; justify-content: center; width: 36px; height: 60px; border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.50); position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); overflow: hidden; z-index:999;}
.section_arrow::before { content: '\ead0'; font-size: 20px; display: block; line-height: 1; font-family: var(--icon); color: var(--black); animation: scrollDown 2s ease-in-out infinite; }
.section_arrow.w_ver {border: 1px solid rgba(255, 255, 255, 0.50);}
.section_arrow.w_ver::before {color:var(--white);}

@keyframes scrollDown {
	0% { opacity: 0; transform: translateY(-25%); }
	35% { opacity: 1; transform: translateY(55%); }
	65% { opacity: 1; transform: translateY(55%); }
	100% { opacity: 0; transform: translateY(100%); }
}

/* #careers .bg .bg_in {background:url("/img/career_bg.jpg")no-repeat center / cover;}
#store .bg .bg_in {background:url("/img/store_bg.jpg")no-repeat center / cover;} */

#careers .bg .bg_in,
#store .bg .bg_in {background-repeat:no-repeat; background-size:cover; background-position:center;}

/* fullpage */


#about {}
#about .basic_in { display: flex; align-items: center; flex-wrap: wrap; height: 100%; }
#about .basic_in .tBox { margin-right: -218px; position: relative; z-index: 10; top: 30px; }
#about .basic_in .tBox .fs60 { font-weight: 200; margin: 0 0 30px; }
#about .basic_in .tBox .fs60 b { font-weight: 700; line-height: inherit; letter-spacing: inherit; }
#about .basic_in .tBox .fs18+.fs18 { margin: 10px 0 0; }
/* #about .basic_in .imgBox { }
#about .basic_in .imgBox .moreBtn { position: absolute; top: 38px; right: -58px; }
#about .basic_in .imgBox img { max-width: 100%; } */

#about .imgBox { position: relative; opacity: 1 !important; flex-shrink: 0; position: relative; max-width: 780px; flex: 1; margin-right: 80px; }
#about .imgBox .img_wrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
#about .imgBox .img_wrap img { opacity: 0; width: 100%; display: block; }
#about .imgBox .img_wrap::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--main); transform-origin: right; z-index: 1; }
#about .imgBox .moreBtn { position: absolute; top: 38px; right: -58px; z-index: 10; opacity: 0; } 


#about .basic_in .infoBox { flex-shrink: 0; width: 325px; position: relative; top: 30px; }
#about .basic_in .infoBox dl { padding: 35px 0; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; }
#about .basic_in .infoBox dl:first-of-type { padding-top: 0; }
#about .basic_in .infoBox dl:last-of-type { padding-bottom: 0; }
#about .basic_in .infoBox dl+dl { border-top: 1px solid var(--border); }
#about .basic_in .infoBox dl dt { width: 110px; }
#about .basic_in .infoBox dl dd { flex: 1; }
#about .basic_in .infoBox dl dd .fs16 { font-family: var(--eng); letter-spacing: 0.16px; text-transform: uppercase; font-weight: 500; }
#about .basic_in .infoBox dl dd .fs20 { font-weight: 500; color: var(--black); }





#works {display:flex; align-items:center; flex-wrap:wrap;}

#works .arr_wrap {display:flex; flex-wrap:wrap; gap:0 10px; position:absolute; bottom:15px; right:0;}
#works .slick-arrow {width:auto;}
#works .slick-arrow::before {font-size:50px; opacity: 0.3; color:var(--black);}
#works .slick-arrow:hover::before {opacity: 1; color:var(--main);}

#works .tit_wrap {position:relative; display:flex; flex-wrap:wrap;gap:20px; align-items:flex-end; margin:0 0 60px;}
#works .works_list {margin-left:-30px;}
#works .works_list dl {position:relative; margin-left:30px;}
#works .works_list dl dt {overflow: hidden; aspect-ratio: 375 / 485;}
#works .works_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
#works .works_list dl dd {position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(23, 28, 97, 0.90); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex-direction:column; padding:20px; box-sizing:border-box; opacity:0; visibility:hidden; transition:all 0.5s;}
#works .works_list dl dd .in {width:100%; text-align:center; opacity:0; visibility:hidden; transform:translateY(70px); transition:all 0.5s;}
#works .works_list dl dd .in::after {content:'\f3dd'; font-family:var(--icon); font-size:30px; line-height:1; display:block; color:var(--white); transition:all 0.3s; font-weight:300; margin:22px auto 0; }
#works .works_list dl dd .fs16 {color: var(--sub); font-weight: 600;}
#works .works_list dl dd .fs20 {font-weight: 700; color: var(--white);}


#works .works_list dl:hover dd {opacity:1; visibility:visible; transition:all 0.5s;}
#works .works_list dl:hover dd .in {opacity:1; visibility:visible; transform:translateY(0); transition:all 0.5s 0.1s;}






#careers {display:flex; flex-wrap:wrap; align-items:center;}
#careers .basic_in {display:flex; flex-wrap:wrap; align-items:center;}
#careers .basic_in .tBox {width:70%; margin-right:-45%; position:relative; z-index:10;}
#careers .basic_in .tBox .fs85 {color:var(--white); display:inline; position:relative; z-index:10;}
#careers .basic_in .tBox .fs85 .moreBtn {position: absolute; right: -90px; top: -40px; z-index:-1;}
#careers .basic_in .tBox .fs20 {margin:15px 0; color:var(--white); font-weight:500;}
#careers .basic_in .tBox .fs18 {color:rgba(255,255,255,0.7);}
#careers .basic_in .imgBox {max-width:1185px; width:75%; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.30);}
#careers .basic_in .imgBox img {max-width:100%;}



#store.on .basic_in {opacity:0.5; transition:all 0.5s;}
#store {display: flex; flex-direction: column; height: 100%; }
#store .basic_in {flex: 1; display: flex; flex-wrap:wrap; justify-content: center; transition:all 0.5s;}
#store .bg+.basic_in {align-items:center;}
#store .basic_in .tBox {width:60%; margin-left:-35%; position:relative; z-index:10; text-align:right;}
#store .basic_in .tBox .fs85 {color:var(--white); display:inline; position:relative; z-index:10;}
#store .basic_in .tBox .fs85 .moreBtn {position: absolute; left: -90px; top: 30px; z-index:-1;}
#store .basic_in .tBox .fs20 {margin:15px 0; color:var(--white); font-weight:500;}
#store .basic_in .tBox .fs18 {color:rgba(255,255,255,0.7);}
#store .basic_in .imgBox {max-width:1185px; width:75%; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.30);}
#store .basic_in .imgBox img {max-width:100%;}

.footer {background: url("/img/foot_bg_new.jpg") center/ cover no-repeat; height: 100%;}
.footer .foot_in {background: none; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0; gap: 30px;}
.footer .foot_area {width: 100%; display: block;}
.footer .foot_menu {margin-top: 40px; width: auto;}
.footer .foot_menu ul {display: flex; gap: 4px;}
.footer .foot_menu ul li a {width: 200px;}
.footer .foot_menu li+li {margin-top: 0;}

.footer .inquiry_list {flex-shrink: 0; display: flex;}
.footer .inquiry_list li:first-child {margin-right: -25px;}
.footer .inquiry_list a {display: flex; width: 320px; aspect-ratio: 1/1; text-align: center; justify-content: center; align-items: center; box-sizing: border-box;}
.footer .inquiry_list a .inquiry_card_in {height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.50); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); transition:all 0.3s; box-sizing: border-box;}
.footer .inquiry_list a .inquiry_card_in .icon {display: flex; justify-content: center; margin: 0 0 14px;}
.footer .inquiry_list a .eng {color: var(--sub); text-transform: uppercase; font-weight: 700; letter-spacing: 0; margin: 0 0 2px;}
.footer .inquiry_list a h3 {font-size: 1.222rem; font-weight: 300; line-height: 163.636%; letter-spacing: -0.04em; color: var(--white);}

.footer .inquiry_list li:has(a:hover) {z-index: 2;}
.footer .inquiry_list a:hover .inquiry_card_in {background: var(--main); border-color: var(--main);}



/* ==============================================
   디졸브 & 페이드업 애니메이션 정의
============================================== */
@keyframes fade-up {
	0% { transform: translateY(50px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes reveal-cover {
	0% { transform: scaleX(1); }
	100% { transform: scaleX(0); }
}

@keyframes img-zoom-in {
	0% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

@keyframes fade-left {
	0% { transform: translateX(50px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}

@keyframes fade-right {
	0% { transform: translateX(-50px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}

/* ==============================================
   애니메이션 적용 전 초기 상태 (숨김)
============================================== */
#about .tBox h3, #about .tBox p, #about .infoBox dl,
#works .tit_wrap h3, #works .tit_wrap p, #works .works_list,
#careers .tBox h2, #careers .tBox p, #careers .imgBox,
#store .tBox h2, #store .tBox p, #store .imgBox { opacity: 0; }



/* ==============================================
   섹션 도달 시 (.action) 애니메이션 실행
============================================== */

/* --- #ABOUT 섹션 --- */
#about.action .tBox h3 { animation: fade-up 0.8s 0.3s forwards; }
#about.action .tBox p:nth-of-type(1) { animation: fade-up 0.8s 0.5s forwards; }
#about.action .tBox p:nth-of-type(2) { animation: fade-up 0.8s 0.7s forwards; }
#about.action .tBox p:nth-of-type(3) { animation: fade-up 0.8s 0.9s forwards; }
#about.action .imgBox .img_wrap::after { animation: reveal-cover 0.8s 0.2s cubic-bezier(0.77, 0, 0.175, 1) forwards; }
#about.action .imgBox .img_wrap img { opacity: 1; animation: img-zoom-in 1.2s 0.2s cubic-bezier(0.77, 0, 0.175, 1) forwards; }
#about.action .imgBox .moreBtn { animation: fade-up 0.8s 1s forwards; } 
#about.action .infoBox dl:nth-child(1) { animation: fade-up 0.8s 0.5s forwards; }
#about.action .infoBox dl:nth-child(2) { animation: fade-up 0.8s 0.7s forwards; }
#about.action .infoBox dl:nth-child(3) { animation: fade-up 0.8s 0.9s forwards; }
#about.action .infoBox dl:nth-child(4) { animation: fade-up 0.8s 1.1s forwards; }

/* --- #WORKS 섹션 --- */
#works.action .tit_wrap h3 { animation: fade-up 0.8s 0.4s forwards; }
#works.action .tit_wrap p { animation: fade-up 0.8s 0.6s forwards; }
/* 리스트 아이템 순차적 등장 (캐스케이딩 효과) */
#works.action .works_list { animation: fade-up 0.8s 0.8s forwards; }

/* --- #CAREERS 섹션 --- */
#careers.action .tBox h2 { animation: fade-up 0.8s 0.3s forwards; }
#careers.action .tBox p.fs20 { animation: fade-up 0.8s 0.5s forwards; }
#careers.action .tBox p.fs18 { animation: fade-up 0.8s 0.7s forwards; }
#careers.action .imgBox { animation: fade-left 0.8s 0.8s forwards; } 

/* --- #STORE 섹션 --- */
#store.action .imgBox { animation: fade-right 0.8s 0.3s forwards; } 
#store.action .tBox h2 { animation: fade-up 0.8s 0.5s forwards; }
#store.action .tBox p.fs20 { animation: fade-up 0.8s 0.7s forwards; }
#store.action .tBox p.fs18 { animation: fade-up 0.8s 0.9s forwards; }




/*******************************************************************************
	@media ~1700px
*******************************************************************************/
@media all and (max-width:1700px) { 

#visual .slick-arrow {top:auto; bottom:35px; margin-top:0;}
#visual .slick-prev {left:5%}
#visual .slick-next {right:5%}
}
/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

#careers .basic_in .tBox .fs85 .moreBtn {right:-195px;}


.footer .inquiry_list a {width: 280px;}
}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 
	
	
	.footer .inquiry_list {flex-direction: column;}
	.footer .inquiry_list li:first-child {margin-right: 0;}
	.footer .inquiry_list li:last-child {margin-top: -25px;}
	.footer .inquiry_list a {width: 220px;}
	.footer .inquiry_list a .inquiry_card_in .icon svg {height: 70px; width: auto;}

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

.moreBtn {width:100px;}
.moreBtn::after {background-size:100%;}

.section { height: auto !important; padding: 120px 0; }
.section .fp-overflow { display: block; height: auto !important; overflow: visible !important;}

.slick-arrow {width:50px;}
.slick-arrow::before {font-size:24px;}

	#visual {padding:0;}
	#visual .visual_in .roll .v_txt .tag {margin:30px 0 0;}
	#visual .visual_in .roll .v_txt .more_wrap {margin:30px 0 0;}
	
	#about .basic_in { display: flex; flex-direction: column; align-items: flex-start; }
	#about .basic_in .tBox { margin: 0 0 40px 0; width: 100%; top: 0; }
	#about .basic_in .tBox br {display:none;}
	#about .basic_in .imgBox { width: 100%; max-width: 100%; margin: 0 0 40px 0; }
	#about .basic_in .imgBox .moreBtn { top: -30px; right: 0; }
	#about .basic_in .infoBox { width: 100%; top: 0; }
	#about .basic_in .infoBox dl {padding:25px 0}
	
	#works {padding-top:0 !important;}
	#works .slick-arrow::before {font-size:40px;}
	#works .tit_wrap { gap:10px; margin: 0 0 40px 0; }
	#works .tit_wrap .fs20 {width:100%;}
	#works .works_list {margin-left:-20px;}
	#works .works_list dl {margin-left:20px;}
	
	#careers .basic_in { display: flex; flex-direction: column; align-items: flex-start; }
	#careers .basic_in .tBox { width: 100%; margin: 0 0 40px 0; }
	#careers .basic_in .tBox .fs85 {display:block;}
	#careers .basic_in .tBox .fs85 .moreBtn { right: 0; top: auto; bottom:0; }
	#careers .basic_in .imgBox { width: 100%; max-width: 100%; }
	
	#store .basic_in { display: flex; flex-direction: column; align-items: flex-start; }
	#store .basic_in .tBox { width: 100%; margin: 0 0 40px 0; text-align: right; order: 1; }
	#store .basic_in .tBox .fs85 .moreBtn {top: auto;; bottom:-30px;}
	#store .basic_in .imgBox { width: 100%; max-width: 100%; order: 2; }
	
	
	.footer {background: none;}
	.section:has(.footer) {background: url("/img/foot_bg_new.jpg") center/ cover no-repeat;}
	.footer .foot_in {flex-direction: column-reverse; gap: 60px;}
	.footer .inquiry_list {flex-direction: row; width: 100%; gap: 5px;}
	.footer .inquiry_list li {width: 50%;}
	.footer .inquiry_list li a {width: 100%; aspect-ratio: auto;}
	.footer .inquiry_list li a .inquiry_card_in {width: 100%; border-radius: 0; padding: 20px; position: relative; min-height: 110px; align-items: flex-start; padding-left: 110px;}
	.footer .inquiry_list li a .inquiry_card_in .icon {position: absolute; left: 20px; top:20px; margin-bottom: 0;}
	.footer .inquiry_list li:last-child {margin-top: 0;}
	
	.footer .foot_menu {margin-top: 30px;}
	.footer .foot_menu ul li a {width: 100%;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 



.moreBtn {width:80px;}
.moreBtn::before {font-size:20px;}

.section { height: auto !important; padding: 100px 0; }

#visual .visual_in .roll .v_txt {top:15%; transform:translate(-50%,0);}
#visual .visual_in .roll .v_txt br {display:none;}
#visual .visual_in .roll .v_txt b.fs18 {margin:0 0 8px;}
#visual .visual_in .roll .v_txt p.fs18 {margin:15px 0 0;}
#visual .visual_in .roll .v_txt .tag {margin:25px 0 0;}
#visual .visual_in .roll .v_txt .tag li {padding:5px 11px;}
#visual .visual_in .roll .v_txt h2 .moreBtn {right:-63px; bottom:3px;}
#visual .visual_in .roll .v_txt .more_wrap {margin:20px 0 0;}
#visual .visual_in .roll .v_txt .visual_more {width:120px; padding:10px 15px;}
#visual .visual_in .roll .v_txt .visual_more span.btn_icon::before {font-size:16px;}

#visual .visual_in .roll .v_bg:has(.bg.mo) .bg.pc {display:none;}
#visual .visual_in .roll .v_bg .bg.mo {display:block;}

	#about .basic_in .tBox { margin: 0 0 20px 0;}
	#about .basic_in .tBox .fs60 {margin: 0 0 12px;}
	#about .basic_in .tBox .fs18+.fs18 {margin:6px 0 0;}
	#about .basic_in .imgBox { margin: 0 0 20px 0; }
	#about .basic_in .infoBox dl {padding:20px 0}
	#about .basic_in .infoBox dl dt {width:70px;}
	#about .basic_in .infoBox dl dt img {height:auto; width:50px;}
	
	

	#works .tit_wrap {display:block;}
	#works .slick-arrow::before {font-size:30px;}
	#works .arr_wrap {justify-content: flex-end; bottom: 0; gap:0 5px;}
	#works .tit_wrap .fs20 {width:100%; margin:10px 0 0;}
	#works .works_list dl dd .in::after {margin:15px auto 0;}
	
	
	#careers .basic_in .tBox .fs20 {margin:12px 0;}
	#careers .basic_in .tBox {margin:0 0 20px;}
	
	#store.on .basic_in {opacity:1;}
	#store .basic_in .tBox {margin:0 0 20px;}
	#store .basic_in .tBox .fs20 {margin:12px 0;}
	#store .basic_in .tBox .fs85 .moreBtn {bottom:-50px; left:-40px;}
	
	
	.footer .foot_in {gap: 40px;}
	.footer .foot_menu ul {gap: 2px;}
	
	.footer .inquiry_list li a .inquiry_card_in .icon {top:15px; left:15px;}
	.footer .inquiry_list a .inquiry_card_in .icon svg {height: 55px;}
	.footer .inquiry_list li a .inquiry_card_in {padding: 15px; padding-left: 82px; min-height: 85px;}
	
	
	
}
/*******************************************************************************
	@media 480px
*******************************************************************************/
@media all and (max-width:480px) { 
	.footer .inquiry_list {flex-direction: column;}
	.footer .inquiry_list li {width: 100%;}


}

/*******************************************************************************
	@media 393px
*******************************************************************************/
@media all and (max-width:430px) { 


#visual .visual_in .roll .v_txt h2 {display:block; padding-right:40px; box-sizing:border-box;}
#visual .visual_in .roll .v_txt h2 .moreBtn {bottom:auto; top:-50px; right:0;}


}

/*******************************************************************************
	@media 393px
*******************************************************************************/
@media all and (max-width:393px) { 


#store .basic_in .tBox .fs85 .moreBtn {bottom:5px; left:-57px;}

}