@import url("common.css");


/*** css 공통 ***/
.tbox{text-align:center; padding: 0 5% 30px; box-sizing:border-box;}
.tbox .fs18{padding: 8px 0 0; line-height: 150%;}



/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; transition:all .3s linear; z-index: 9999; background:transparent;}
.slick-arrow::before {content:'\e5e1'; font-family:var(--icon); font-size:20px; line-height:1; display:block; color:var(--white); transition:all 0.3s;}
.slick-arrow:hover::before {color:var(--main); transition:all 0.3s;}
.slick-prev {transform: scaleX(-1);}






/*** Visual ***/
#visual{width:100%; height: var(--vh); overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); z-index: 9999; text-align:center;}
#visual .visual_in .roll .v_txt .fs28 {display:block; color:var(--white); transition:all .6s 0.1s linear; transform:translateY(60px); opacity:0; margin:0 0 25px; letter-spacing:0 !important; font-weight: 400 !important; letter-spacing:0 !important; line-height:135.714%;}
#visual .visual_in .roll .v_txt .fs70 {color:var(--white); transition:all .6s 0.2s linear; transform:translateY(60px); opacity:0;}


#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; -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); -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;}
#visual .visual_in .roll .v_bg .bg.mo {display:none !important}
#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;}


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


/* 화살표 */


/* 도트 */

#visual .v_control {position:absolute; bottom:30px; left:50%; z-index:999; transform:translateX(-50%); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
#visual .v_control .scroll_down {display:flex; flex-wrap:wrap; align-items:center; font-size: 12px; font-weight: 700; line-height: 183.333%; color:var(--white); gap:0 20px; font-family:var(--eng);}
#visual .v_control .scroll_down span { position: relative; display: block; width: 5px; height: 50px; background: rgba(255,255,255,0.3); border-radius: 5px; }
#visual .v_control .scroll_down span::after { content: ''; width: 100%; height: 50%; background: var(--white); border-radius: 5px; position: absolute; top: 0; left: 0; animation: scrollDrop 1.5s ease-in-out infinite; }
@keyframes scrollDrop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
#visual .v_control .slick-dots {display:flex; flex-wrap:wrap; align-items:center; gap:0 15px; order:1;}
#visual .v_control .slick-dots li {}
#visual .v_control .slick-dots li button {border:0; background:transparent; cursor:pointer;  font-size: 16px; font-weight: 600; line-height: 175%; letter-spacing: -0.48px; color:rgba(255,255,255,0.3); margin:0; padding:5px 3px; box-sizing:border-box; display:block; position:relative;}
#visual .v_control .slick-dots li.slick-active button {color:var(--white);}
#visual .v_control .slick-dots li.slick-active button::after {content:''; width:100%; height:3px; background:var(--white); position:absolute; bottom:0; left:0;}
#visual .v_control .control_box {display:flex; flex-wrap:wrap; align-items:center; gap:0 30px;}
#visual .v_control .control_box .control_arr {order:2; display:flex; flex-wrap:wrap; align-items:center; gap:0 20px;}


/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_txt .fs28 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs70 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .moreBtn {transform:translateY(0); opacity:1;}









/*** Shinhan main sections (Figma 8370:1599 / 1668 / 1619 / 1770) ***/


.sh-eyebrow{display:flex; align-items:center; /* gap:6px; */ line-height:1;}
.sh-eyebrow--center{justify-content:center;}
/* .sh-dot{width:11px;  aspect-ratio: 1 / 1; border-radius:50%; background:var(--main); display:block;} */
.sh-eyebrow__text{font-size:0.7778rem; font-weight:700; letter-spacing:0; color:var(--main); font-family:var(--eng); line-height:1;}


.sh-title{font-size:2.7778rem; font-weight:700; letter-spacing:0; color:var(--black); font-family:var(--eng); line-height:1.2;}
.sh-title--center{text-align:center;}
.sh-title--white{color:var(--white);}
.sh-subtitle{font-size:1.3333rem; font-weight:600; letter-spacing:-0.72px; color:var(--black); line-height:1.4167; margin:15px 0 0;}
.sh-desc{font-size:1rem; font-weight:400; letter-spacing:-0.54px; color:#777777; line-height:1.6667; margin:20px 0 0;}
.sh-desc--center{text-align:center;}
.sh-desc--white{color:rgba(255,255,255,0.7);}


.sh-link{display:flex; align-items:center; width:143px; padding:0 0 18px; border-bottom:1px solid var(--border); position:relative; align-items:center; justify-content:space-between;}
.sh-link__text{font-size:0.8889rem; font-weight:600; letter-spacing:0; color:var(--black); font-family:var(--eng); line-height:1.75; transition:all 0.3s linear;}
.sh-link__icon {display:block; line-height:1;}
.sh-link__icon:before {content:'\eaaa'; font-family:var(--icon); font-size:20px; line-height:1; font-variation-settings: 'FILL' 1; color:var(--black); transition:all 0.3s linear;}
.sh-link:after {content:''; position:absolute; left:0; bottom:-1px; width:30px; height:1px; background:var(--black); transition:all 0.3s linear; transition:all 0.3s linear;}
/* .sh-link:hover .sh-link__text {color:var(--main); transition:all 0.3s linear;}
.sh-link:hover .sh-link__icon:before {color:var(--main); transition:all 0.3s linear;} */
.sh-link:hover:after {width:100%; transition:all 0.3s linear; /* background:var(--main); */}
.sh-link--white{border-bottom-color:rgba(255,255,255,0.2);}
.sh-link--white .sh-link__text{color:var(--white);}
.sh-link--white .sh-link__icon{border-color:var(--white);}
.sh-link--white .sh-link__icon:before{color:var(--white);}
.sh-link--white:after{background:var(--white);}


/* About */
.sh-about {overflow:hidden; position:relative;}
.sh-about__bg{position:absolute; right:0; top:0; width:28.5%; height:100%; background:var(--grayBg);}
.sh-about__inner{display:flex; justify-content:space-between; gap:160px;}
.sh-about__copy {flex:1; max-width:620px; display:flex; gap:15px; padding:80px 0; box-sizing:border-box;  align-content:flex-end; flex-wrap:wrap; position:relative; z-index:10;}
.sh-about__text {}
.sh-about__text .fs24 {margin:20px 0 15px;}
.sh-about__text .fs18+.fs18 {margin:30px 0 0;}
.sh-about__text .sh-link {margin:80px 0 0;}
.sh-about__media{flex:none; width:50%; max-width:780px; aspect-ratio:780/880; border-radius:20px; overflow:hidden; position:relative;}
.sh-about__media img{width:100%; height:100%; object-fit:cover; display:block;}
.sh-about:before{content:''; position:absolute; left:50%; top:50%; width:700px; aspect-ratio: 1 / 1;  transform:translate(-50%,-50%); border-radius:50%; border:1px solid var(--border); background:url("/img/about_circle.png")no-repeat center; pointer-events:none; border-radius:100%; box-sizing:border-box; animation: spinCircle 13s linear infinite;}


@keyframes spinCircle {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



/* Products */
#sh_products {overflow:hidden;}
.sh-products{}
.sh-products__head {display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 50px;}
.sh-products__head .slick-arrow:hover {opacity:0.4; transition:all 0.3s linear;}
.sh-products__head .slick-arrow::before {display:none;}
.sh-products__title {flex:1; }
.sh-products__title .fs50 {margin:15px 0 20px;}
.sh-nav{width:20px; height:37px; border:0; padding:0; background:transparent; cursor:pointer; opacity:0.8; transition:all 0.3s ease;}
.sh-nav:hover{opacity:0.5; transition:all 0.3s ease;}
.sh-nav:before{content:'\ef7d'; font-family:var(--icon); font-size:28px; line-height:1; display:block; color:var(--black); font-weight:300;}
.sh-nav--next:before{transform:scaleX(-1);}

.sh-products__list {}
.sh-products__list .slick-list {margin-left:-30px;}
.sh-card {background:var(--grayBg); border-radius:20px; overflow:hidden; margin-left:30px; position:relative;}
.sh-card::after {content:''; width:100%; height:100%; border:1px solid var(--border); border-radius:20px; position:absolute; top:0; left:0; box-sizing:border-box; pointer-events: none;}
.sh-card__media{width:100%;  aspect-ratio: 500 / 375; background:var(--white); border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.sh-card__media img{display: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.3s linear;}
.sh-card:hover .sh-card__media img {transform:scale(1.1); transition:all 0.3s linear;}
.sh-card__body{padding:30px; text-align:center;}
.sh-card__body .fs20 {margin:0 0 4px; color:var(--black); font-weight: 600;}
/* Marquee */

.sh-marquee { padding:30px 0; border-top:1px solid var(--main); border-bottom:1px solid var(--main); opacity:0.10; overflow:hidden; }

.sh-marquee__track { display:flex; width:max-content; will-change:transform; animation:sh_marquee 50s linear infinite; }

.sh-marquee__row { display:flex; align-items:center; gap:50px; padding-right:50px; flex-shrink:0; }

.sh-marquee__row span { white-space:nowrap; display:block; line-height:1; }
.sh-marquee__row span svg { display:block; line-height:1; }

@keyframes sh_marquee { 0% {transform:translateX(0);} 100% {transform:translateX(-50%);} }
/* Gallery */
.sh-gallery__mobile { display: none; }
.sh-gallery{background:var(--black); padding:0; height:var(--vh); position:relative;}
.sh-gallery__bg{position:absolute; left:0; top:0; width:100%; height:100%; background:var(--black) url('/img/work_bg.png') no-repeat center/cover;}
.sh-gallery__inner{position:relative; display:flex; gap:50px 0; align-items:flex-start; justify-content:space-between; height:100%;}
.sh-gallery__copy{flex:none; width:400px; color:var(--white); position:sticky; top:0; left:0; box-sizing:border-box;}
.sh-gallery__copy .fs50 {margin:15px 0 20px; color:var(--white);}
.sh-gallery__copy .sh-link {margin:60px 0 0;}
.sh-gallery__grid{flex: 1; display: flex; justify-content: flex-end; gap: 30px; height: var(--vh); overflow: hidden; max-width:900px;}
.sh-gallery__col{display:flex; flex-direction:column; gap:30px;}
.sh-gallery__col:first-child { animation: marqueeDown 15s linear infinite; will-change: transform; }
.sh-gallery__col.sh-gallery__col--offset { animation: marqueeUp 15s linear infinite; will-change: transform; }
.sh-gallery__grid:hover .sh-gallery__col { animation-play-state: paused; }
.sh-work {backdrop-filter:blur(5px); background:rgba(255,255,255,0.10); border-radius:20px; box-sizing:border-box; overflow:hidden; flex-shrink: 0; transition:all 0.3s linear;}
.sh-work a {padding:20px; box-sizing:border-box; display:block; }
.sh-work__thumb{width:100%; aspect-ratio: 395 / 296; border-radius:10px; overflow:hidden;}
.sh-work__thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.sh-work .fs14 {font-weight:700; color:var(--white); text-align:center; margin:20px 0 0; transition:all 0.3s linear;}
.sh-work .fs20 {font-weight:600; color:var(--white); text-align:center; margin:5px 0 0; transition:all 0.3s linear;}

@keyframes marqueeUp { 0% { transform: translateY(0); } 100% { transform: translateY(calc(-50% - 15px)); } }
@keyframes marqueeDown { 0% { transform: translateY(calc(-50% - 15px)); } 100% { transform: translateY(0); } }


.sh-work:hover {background:var(--white); transition:all 0.3s linear;}
.sh-work:hover .fs14 {color:var(--main); transition:all 0.3s linear;}
.sh-work:hover .fs20 {color:var(--black); transition:all 0.3s linear;}



.shopping_mall {background:url("/img/shop_banner_bg.jpg")no-repeat center / cover; padding:100px 0;}
.shopping_mall .mo_block {display:none;}
.shopping_mall .sh-eyebrow .sh-dot {background:var(--white);}
.shopping_mall .sh-eyebrow .sh-eyebrow__text {color:var(--white); font-size: 1rem; font-weight: 600; line-height: 166.667%; letter-spacing: var(--letter-spacing-default);}
.shopping_mall .flex_box {display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; margin:25px 0 0; gap:20px;}
.shopping_mall .flex_box .fs100 {color: var(--white); leading-trim: both; text-edge: cap; font-family: var(--eng); font-size: 100px; font-weight: 700; line-height: 70%; /*display:inline-flex; flex-wrap:wrap; align-items:flex-end;  gap:0 20px; */}
.shopping_mall .flex_box .fs100 svg {display:inline-block; margin-left:20px;}
/* .shopping_mall .flex_box .fs100::after {content:''; width:52px;  aspect-ratio: 52 / 28; background:url("/img/shop_arr.svg")no-repeat center / 100% auto; display:block; position:relative;} */
.shopping_mall .flex_box .shop_btn {width:220px; height:70px; border-radius: 50px; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(5px); padding:0 30px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; color:var(--white); font-weight: 600;}
.shopping_mall .flex_box .shop_btn::after {content:'\ea12'; font-size:20px; display:block; line-height:1; font-family:var(--icon); font-weight:400;}
.shopping_mall .flex_box .shop_btn:hover {background:var(--white); color:var(--main);}




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


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


.sh-about__inner {gap:0 6%;}

.shopping_mall .flex_box .fs100 {font-size:70px;}
.shopping_mall .flex_box .shop_btn {width:200px;}

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

.sh-about__copy {padding:40px 0;}
.sh-about:before {width:50%; background-size:60% auto;}



.sh-work a {padding:15px;}
.sh-gallery__grid {gap:15px;}
.sh-gallery__col {gap:15px;}



	#sh_gallery {overflow:hidden;}
    .sh-gallery { height: auto; padding: 120px 0; }
    .sh-gallery__inner { flex-direction: column; gap: 50px; height: auto; align-items: stretch; }
    
    .sh-gallery__copy { width: 100%; position: static; padding:0;}
    .sh-gallery__copy .sh-link { margin: 30px 0 0; }
    
    .sh-gallery__grid { display: none; }
    .sh-gallery__mobile { display: block;}
    .sh-gallery__mobile .slick-slide { margin: 0 10px; }
    .sh-gallery__mobile .slick-list {overflow:visible !important; margin: 0 -10px; }
	
	.shopping_mall {padding:70px 0;}
	.shopping_mall .flex_box {margin:10px 0 0;}
	.shopping_mall .flex_box .fs100 {font-size:60px; line-height:100%;}
	.shopping_mall .flex_box .shop_btn {height:60px;}
	
}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


.slick-arrow::before {font-size:16px;}

/* .sh-dot {width:7px;} */
.sh-eyebrow__text {font-size:12px;}
.sh-link {padding:0 0 14px; width:117px;}

#visual .visual_in .roll .v_bg .bg.pc {display:none !important}
#visual .visual_in .roll .v_bg .bg.mo {display:block !important}
#visual .visual_in .roll .v_txt .fs28 {margin:0 0 10px;}
#visual .v_control {bottom:20px;}
#visual .v_control .slick-dots {gap:0 8px;}
#visual .v_control .slick-dots li button {font-size:12px; padding:5px 3px;}
#visual .v_control .control_box {gap:0 20px;}
#visual .v_control .control_box .control_arr {gap:0 10px;}


#sh_about {overflow:hidden;}
.sh-about__bg {display:none;}
.sh-about:before {top:0; left:auto; right:0; transform:translate(36%,-36%); width:100%; background-size:70% auto;}
.sh-about__inner {flex-wrap:wrap;}
.sh-about__copy {display:block; width:100%; max-width:100%; flex:none; padding:0;}
.sh-about__copy .sh-eyebrow {margin:0 0 5px;}
.sh-about__media {display:block; width:100%; max-width:100%; flex:none; margin:40px 0 0; aspect-ratio: 400 / 260; border-radius:15px;}
.sh-about__text .fs24 {margin:15px 0 5px;}
.sh-about__text .fs18+.fs18 {margin:15px 0 0;}
.sh-about__text .sh-link {margin:30px 0 0;}


@keyframes spinCircle {
    0% {
        transform: translate(36%, -36%) rotate(0deg);
    }
    100% {
        transform: translate(36%, -36%) rotate(360deg);
    }
}

.sh-marquee {padding:10px 0;}
.sh-marquee__row {gap:30px;}
.sh-marquee__row span svg {width:273px; height:auto;}


#sh_products {}
#sh_products .basic_in {padding:0 0 40px; position:relative;}
#sh_products .slick-arrow {position:absolute; bottom:0;}
#sh_products .slick-arrow svg {width:10px; height:auto; display:block; line-height:1;}
#sh_products .sh-nav--prev {left:calc(50% - 15px); transform:translateX(-100%); }
#sh_products .sh-nav--next {right:calc(50% - 15px); transform:translateX(100%);}
.sh-products__head {margin:0 0 30px;}
.sh-products__title .fs50 {margin:5px 0 15px;}
.sh-products__list {width:90%; margin:0 auto;}
.sh-products__list .slick-list {overflow:visible !important; margin-left:-15px;}
.sh-card {margin-left:15px; border-radius:15px;}
.sh-card::after {border-radius:15px;}
.sh-card__body {padding:20px 15px;}


#sh_gallery {padding:60px 0;}
.sh-work {border-radius:15px;}
.sh-work__thumb {border-radius:8px;}
.sh-gallery__copy br {display:none;}
.sh-gallery__copy .fs50 {margin:5px 0 15px;}
.sh-gallery__mobile {width:90%; margin:0 auto;}
.sh-gallery__mobile .slick-slide { margin: 0 7px; }
.sh-gallery__mobile .slick-list {overflow:visible !important; margin: 0 -7px; }


.shopping_mall {padding:40px 0; background: url("/img/shop_banner_bg.jpg")no-repeat center left 20% / cover;}
.shopping_mall .mo_block {display:block;}
.shopping_mall .flex_box {margin:10px 0 0;}
.shopping_mall .flex_box .fs100 {font-size:40px; line-height:100%; width:100%;}
.shopping_mall .flex_box .fs100 svg {width:34px; height:auto;}
.shopping_mall .flex_box .shop_btn {height:50px; padding:0 25px; width:180px;}


}