@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* nav */
#fp-nav {z-index: 31 !important;}
#fp-nav.fp-bottom {left: 50%; top: auto; bottom: 50rem; display: flex !important; transform: translateX(-50%);}
#fp-nav.fp-bottom > ul {display: flex; align-items: center; justify-content: center; height: 62rem; padding: 0 40rem; gap: 22rem; border-radius: 100rem; border: 1px solid var(--op-b05); box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.07); background: var(--w);}
#fp-nav.fp-bottom > ul span {display: none !important;}
#fp-nav.fp-bottom > ul li,
#fp-nav.fp-bottom .nav-name {margin: 0 !important; font-family: var(--lang-en); font-size: var(--font-14); color: var(--op-b30);}
#fp-nav.fp-bottom a.active .nav-name {font-weight: 600; color: var(--c-primary);}

/* **************************************** *
 * Site custom
 * **************************************** */
 /* common */
 .center-line {position: absolute; left: 50%; top: 0; width: 1px; height: 0; background: rgba(0, 0, 0, .03); transition: 5s;}
 body:is(.white-ver) .center-line {background: var(--op-w10);}
 .section.active .center-line {height: 100%;}

 [data-font-en="sheriff"] {font-weight: normal; font-size: 200rem; letter-spacing: -10px;}

 @media (max-width:1680px){
	[data-font-en="sheriff"] {font-size: 11vw;}
}

@media (max-width:1280px){
	.fp-section {height: auto !important; min-height: auto !important;}
	#fp-nav.fp-bottom {display: none !important;}
}

@media (max-width:860px){
	[data-font-en="sheriff"] {letter-spacing: -1px;}
}

@media (max-width:540px){
	[data-font-en="sheriff"] {font-size: var(--font-75);}
}

 /* visual */
#section01 {background: url(../img/main/main-visual.jpg) no-repeat center / cover;}
.main-visual__txt {padding-left: 171rem;}
.main-visual__txt h2 br:nth-child(1) {display: none;}
.main-visual__txt strong {display: block; margin-top: 34rem;}
.main-visual__txt strong {color: var(--b-title);}
.main-visual__txt p {margin-top: 15rem; color: var(--op-b60);}

.main-scroll {position: absolute; left: var(--margin); bottom: var(--margin); opacity: 0.2; display: flex; align-items: center; justify-content: center; width: 90rem; height: 90rem; font-size: 0; border-radius: 100%; border: 1px solid var(--b-default); transition: var(--trans-01);}
.main-scroll::after {content:''; width: 40rem; height: 40rem; background-image: url(../img/layout/arrow-basic.png); background-repeat: no-repeat; background-size: contain; background-position: center center; transform: rotate(90deg); transition: var(--trans-01);}

.main-video {position: absolute; right: 50rem; bottom: 50rem; width: 260rem; transition: transform 0.5s ease, opacity 0.5s ease;}
.main-video button {position: absolute; left: -35rem; top: 0; display: inline-flex; flex-direction: column; align-items: flex-start; width: 65rem; height: 110rem; padding:23rem 13rem; color: var(--w); border-start-start-radius: 25rem; border-end-start-radius: 25rem; background:var(--b-default)}
.main-video button i {position: relative; width: 15rem; height: 15rem;} 
.main-video button i::before,
.main-video button i::after {position: absolute; left:0; top:50%; content:''; width: 15rem; height: 1px; background: var(--w); transform-origin: center center;}
.main-video button i::before {transform: rotate(45deg);}
.main-video button i::after {transform: rotate(-45deg);}
.main-video button p {display: inline-block; margin-top: -3rem; font-size: var(--font-10); text-transform: uppercase; transform: rotate(90deg); transform-origin:0% 100%;}
.video-list__item {z-index: 1; position: relative; display: block; padding: 10rem; background: var(--w); box-shadow: 10rem 15rem 20rem 0 var(--op-b05);}
.video-list__img {position: relative; width: 100%; height: 160rem;}
.video-list__img::after {position: absolute; left: 50%; top: 50%; content:''; width: 40rem; height: 40rem; border-radius: 100%; background-color: var(--w); background-image: url(../img/board/arrow-select.svg); background-repeat: no-repeat; background-position: center; background-size: 17rem; transform: translate(-50%, -50%) rotate(-90deg); transition: var(--trans-01);}
.video-list__title {position: relative; margin-top: 7rem; padding: 10rem;}
.video-list__title strong {display: block; margin-bottom: 9rem; padding-right: 80rem; color: var(--b-title);}
.video-list__title p {color: var(--op-b50);}
.video-list__title::after {position: absolute; right: 10rem; top: 10rem; content:'video'; display: inline-block; padding: 3rem 5rem; text-transform: uppercase; font-size: var(--font-10); color: var(--b-title); border-radius: 100rem; border: 1px solid var(--b-title);}

.main-video.close {transform: translateX(100rem);opacity: 0;pointer-events: none;}

@media (hover: hover) and (pointer: fine){
	.main-scroll:hover {opacity: 1; border-color: var(--c-primary);}
	.main-scroll:hover::after {background-image: url(../img/layout/arrow-basic_c.png);}
	.video-list__item:hover .video-list__img::after {background-color: var(--c-primary); background-image: url(../img/board/arrow-select_w.svg);}

}

@media (max-width:1480px){
	.main-visual__txt {padding-left: 50rem;}
}

@media (max-width:1280px){
	.main-visual {height: 100vh; display: flex; align-items: center;}
}

@media (max-width:1023px){
	.main-visual::before {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: var(--op-w30);}
	.main-visual__txt {position: relative; padding-left: 40rem;}
	.main-scroll {width: 80rem; height: 80rem;}
	.main-scroll::after {width: 30rem; height: 30rem;}

	.main-video {right: 40rem;}
}

@media (max-width:860px){
	.main-visual__txt p {margin-top: 12rem;}
	.main-visual__txt strong {margin-top: 30rem;}
}

@media (max-width:540px){
	.main-video {display: none;}
	.main-visual::before {background: var(--op-w50);}
	.main-visual__txt {margin-top: -30rem; padding: 0 20rem; word-break: keep-all;}
	.main-visual__txt br {display: none;}
	.main-visual__txt h2 br {display: block !important;}

	.main-scroll {left: 20rem; width: 60rem; height: 60rem;}
	.main-scroll::after {width: 20rem; height: 20rem; background-image: url(../img/layout/arrow-basic.svg);}
}

/* about */
.main-about__rolling figure {width: 470rem; height: 210rem; border-radius: 200rem;}
.main-about__rolling figure img {margin: 0; height: 100%; object-fit: cover; border-radius: 0;}
.main-about__rolling .rolling-img__box > * {margin: 0 25rem; line-height: 1;}
.main-about__txt {margin-top: 80rem;}
.main-about__txt .wrap-wide {width: 100%; align-items: flex-start;}
.main-about__txt .wrap-wide > * {width: 50%;}
.main-about__txt strong {padding: 0 var(--margin); text-align: right;}
.main-about__txt strong span {font-weight: 600; color: var(--op-w20);}
.main-about__con {padding: 0 var(--margin);}
.main-about__con h5 {margin-bottom: 18rem;}
.main-about__con .btn-wrap {margin-top: 46rem;}

 @media (max-width:1680px){
	.main-about__rolling figure {width: 24vw; height: 10vw;}
}

@media (max-width:1280px){
	.main-about {padding: var(--space250) 0;}
}

@media (max-width:1023px){
	.main-about__rolling figure {width: 20vw;}
	.main-about__txt strong {display: none;}
	.main-about__txt .wrap-wide > * {width: 100%;}
	.main-about__con {text-align: center;}

	.main-about [fullpage-ani="left"]{transform:translateY(70rem);}
}

@media (max-width:860px){
	.main-about__rolling .rolling-img__box > * {margin: 0 12rem;}
	.main-about__txt {margin-top:60rem;}
}

@media (max-width:540px){
	.main-about__rolling figure {height: 12vw;}
	.main-about__txt {margin-top: 42rem;}
	.main-about__con {padding: 0;}
	.main-about__con br {display: none;}
	.main-about__con .btn-wrap {margin-top: 40rem;}
}

/* oem, odm */
.main-merit,
.main-merit .wrap-wide {height: 100%; justify-content: center;}
.main-merit .main-title {margin-bottom: 30rem;}
.main-merit__slider {width: 100%;}
.main-merit__slider .swiper-pagination {display: none;}
.main-merit__item a {position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 414 / 555; padding:45rem 33rem;}
.main-merit__item a::before {z-index: 1; opacity: 0; visibility: hidden; -webkit-backdrop-filter: blur(15rem); backdrop-filter: blur(15rem); position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: var(--op-b60); transition: var(--trans-01);}
.main-merit__item a > img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover;}
.main-merit__item a strong, 
.main-merit__item a p {z-index: 12; position: relative;}
.main-merit__item a strong {margin-bottom: 8rem;}
.main-merit__thumb {opacity: 0; visibility: hidden; z-index: 21; position: absolute; left: 50%; top: 80rem; width: calc(100% - 160rem); aspect-ratio: 254 / 300; border-radius: 15rem; transform: translateX(-50%); box-shadow: 10rem 20rem 30rem rgba(0, 0, 0, .1); transition: var(--trans-01);}

@media (hover: hover) and (pointer: fine){
	.main-merit__item:hover a::before {opacity: 1; visibility: visible;}
	.main-merit__item:hover .main-merit__thumb {opacity: 1; visibility: visible;}
}

@media (max-width:1280px){
	.main-merit {padding: var(--space200) 0;}
	.main-merit__slider .swiper-pagination {display: flex; position: relative; justify-content: center; margin-top: var(--margin);}
}

@media (max-width:1023px){
	.main-merit {padding-top: var(--space150);}
	.main-merit__item a {padding: 30rem 25rem;}
	.main-merit__thumb {top: 60rem; width: calc(100% - 120rem);}
}

@media (max-width:860px){
	.main-merit {padding: var(--space150) 0;}
	.main-merit .main-title {margin-bottom: 20rem;}
}

@media (max-width:540px){
	.main-merit .btn-wrap {display: none;}
}


/* brand */
.main-brand {height: 100%;}
.main-brand__item {background: var(--bg-light);}
.main-brand__item figure {width: 50%; height: 100vh;}
.main-brand__item figure img {height: 100%;}
.main-brand__txt {width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh;}
.main-brand__txt h6 {margin-bottom: 30rem;}
.main-brand__txt ul {margin-bottom: 40rem; gap: 20rem;}
.main-brand__txt ul li {width: 300rem; height: 360rem;}
.main-brand__txt ul li img {height: 100%; object-fit: cover;}
.main-brand__txt strong {margin-bottom: 13rem;}
.main-brand__txt .btn-basic {z-index: 1; display: inline-flex; width: auto; margin-top: 20rem;}
.main-brand .swiper-pagination {left: 50%; bottom: 80rem; width: 50%;}
/* .main-brand .swiper-pagination-bullet {width: 7rem; height: 7rem; background: var(--op-b10);}
.main-brand .swiper-pagination-bullet-active {background: var(--c-primary) !important;} */
.main-brand .swiper-slide {pointer-events: none;}
.main-brand .swiper-slide-active { z-index: 2; pointer-events: auto;}

@media (max-width:1480px){
	.main-brand__txt ul li {width: 240rem; height:300rem;}
}

@media (max-width:1280px){
	.main-brand {border-top: 1px solid var(--op-b05);}
	.main-brand__item figure {height: auto;}
	.main-brand__txt {height: auto; padding: var(--space200) 0;}
	.main-brand__item .swiper-slide {height: auto;}
}

@media (max-width:1023px){
	.main-brand__item figure {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
	.main-brand__item figure::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: var(--op-b80);}
	.main-brand__txt {position: relative; width: 100%;}
	.main-brand__txt h6,
	.main-brand__txt strong,
	.main-brand__txt p {color: var(--w);}
	.main-brand__txt p {min-height: 50rem;}
	.main-brand .swiper-pagination-bullet {background: var(--op-w20);}
	.main-brand .swiper-pagination-bullet-active {background: var(--c-primary);}
	.main-brand .swiper-pagination {left: 0; width: 100%;}
}

@media (max-width:540px){
	.main-brand__txt {padding: var(--space200) 20rem 120rem;}
	.main-brand__txt ul {display: grid; gap: 20rem; grid-template-columns: repeat(2, 1fr);}
	.main-brand__txt ul li {width: 100%; height: 200rem;}
	.main-brand .swiper-pagination {bottom: 50rem;}
}

/* news */
.main-news h3 {margin-top: 30rem; text-transform: none;}
.main-news h3 + p {margin-top: -20rem;}
.main-news .btn-wrap {margin-top: var(--margin);}

#fullpage #section05 .gallery-list__item {transform: scale(0); transition: transform 1s ease; transition-delay:0.2s;}
#fullpage #section05.active .gallery-list__item {transform: scale(1);}
#fullpage #section05.active .gallery-list__item:nth-child(4) {transition-delay: 2.2s;}
#fullpage #section05.active .gallery-list__item:nth-child(5) {transition-delay: 2s;}
#fullpage #section05.active .gallery-list__item:nth-child(6) {transition-delay: 1.8s;}
#fullpage #section05.active .gallery-list__item:nth-child(7) {transition-delay: 1.6s;}

@media (max-width:1280px){
	.main-news {height: 100vh;}
	.main-news .wrap-wide {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;}
	.gallery-list__item:nth-child(4) {right: 0; top: 62%;}
	.gallery-list__item:nth-child(5) {top: 17%;}
	.gallery-list__item:nth-child(6) {left: 25%; top: 8%;}
	.gallery-list__item:nth-child(7) {left: 0;}
}

@media (max-width:1023px){
	.main-news {height: auto; padding: var(--space200) 0;}
	.main-news h3 {margin-top: 0rem;}
	.main-news h3 + p {margin-top: 0;}
	.main-news .btn-wrap {margin-top: 40rem; margin-bottom: var(--space80);}
	.gallery-list__item {position: relative; width: 100%; left:0 !important; top:0 !important;}
	.gallery-list__item:not(:last-child) {margin-bottom: 20rem;}
	.gallery-list__item a {width: 100%; height: 160rem;}

	#fullpage #section05 .gallery-list__item {transform: none;}
}

@media (max-width:860px){
	.main-news h3 {letter-spacing: -3px;}
	.main-news h3 + p {margin-top: 10rem;}
}

@media (max-width:540px){
	.main-news h3 + p {font-size: var(--font-24);}
	.main-news .btn-wrap {margin-top: 30rem;}
	.gallery-list__item a {height: 215rem;}
}

/* consult */
.main-consult {height: 100%;}
.main-consult__1step {z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/main/consult-bg.jpg) no-repeat center / cover; transition: all 1.5s ease; transition-delay: .2s;}
.main-consult__1step .wrap-wide {height: 100%; padding-top: 80rem;}
.main-consult__1step h3 {line-height: 1; text-transform: none; transition: all 1.5s ease; transition-delay: .2s;}
.main-consult__1step h3:nth-child(1) {padding-left: 15%;}
.main-consult__1step h3:nth-child(2) {text-align: right; padding-right: 15%;}

.main-consult__2step {opacity: 0; position: relative; height: 100%; padding-top: 60rem; transition: all 1.5s ease; transition-delay: .2s;}
.main-consult__2step::before {opacity: .2; position: absolute; left: 50%; top: 50%; content:''; width: 100%; height: 100%; background: url(../img/layout/symbol.svg) no-repeat; background-position:center 62%; background-size: 70%; transform: translate(-50%, -50%);}
.main-consult__txt {z-index: 1; position: relative;}
.main-consult__2step h3 {margin-bottom: 28rem;}
.main-consult__2step .btn-wrap {margin-top: 46rem;}

.main-consult__img {position: absolute; left:0; top:0; width: 100%; height: 100%;}
.main-consult__img img {width: 100%; height: 100%; object-fit: cover;}
.main-consult__img li {position: absolute; transform: scale(0); transition: transform 1s ease; transition-delay:0.2s;}
.main-consult__img li:nth-child(1) {left: 8%; top: 18%; width: 300rem; height: 260rem;}
.main-consult__img li:nth-child(2) {left: 62%; top: 11%; width: 164rem; height: 142rem;}
.main-consult__img li:nth-child(3) {left: 25.5%; top: 61%; width: 230rem; height: 200rem;}
.main-consult__img li:nth-child(4) {left: 76%; top: 41%; width: 300rem; height: 260rem;}
.main-consult__img li:nth-child(5) {left: 64%; top: 79%; width: 104rem; height: 90rem;}

#fullpage #section06.active .main-consult__1step h3 {transition-delay: 1s;}
#fullpage #section06.active .main-consult__1step h3:nth-child(1) {padding-left: 0;}
#fullpage #section06.active .main-consult__1step h3:nth-child(2) {padding-right: 0;}
#fullpage #section06.active .main-consult__1step {opacity: 0; transition-delay: 1.2s;}
#fullpage #section06.active .main-consult__2step {opacity: 1; z-index: 21; transition-delay: 1.2s;}

#fullpage #section06.active .main-consult__img li {transform: scale(1);}
#fullpage #section06.active .main-consult__img li:nth-child(1) {transition-delay: 2s;}
#fullpage #section06.active .main-consult__img li:nth-child(2) {transition-delay: 2.2s;}
#fullpage #section06.active .main-consult__img li:nth-child(3) {transition-delay: 2.3s;}
#fullpage #section06.active .main-consult__img li:nth-child(4) {transition-delay: 2.5s;}
#fullpage #section06.active .main-consult__img li:nth-child(5) {transition-delay: 2.6s;}

 @media (max-width:1680px){
	.main-consult__img li:nth-child(1) {left: 5%;}
	.main-consult__img li:nth-child(3) {left: 19.5%;}
	.main-consult__img li:nth-child(5) {top: 73%;}
	.main-consult__2step::before {background-position: center 55%;}
}

@media (max-width:1480px){
	.main-consult__1step .wrap-wide {padding-top: 0rem;}
}

@media (max-width:1280px){
	.main-consult {height: 100vh;}
	.main-consult__img li:nth-child(1) {left:50rem;}
}

@media (max-width:1023px){
	.main-consult__2step::before {background-size: 90%;}
	.main-consult__img li:nth-child(1) {left: 50rem; top: 10%; width: 240rem; height: 200rem;}
	.main-consult__img li:nth-child(2) {left: 66%; top: 19%; width: 150rem; height: 120rem;}
	.main-consult__img li:nth-child(3) {left: 13.5%; top: 68%; width: 180rem; height: 160rem;}
	.main-consult__img li:nth-child(4) {left: auto; right: 30rem; top: 62%; width: 240rem; height: 200rem;}
	.main-consult__img li:nth-child(5) {left: 60%; top: 82%; width: 80rem; height: 70rem;}

	#fullpage #section06.active .main-consult__img li:nth-child(1) {transition-delay: 1.6s;}
	#fullpage #section06.active .main-consult__img li:nth-child(2) {transition-delay: 1.8s;}
	#fullpage #section06.active .main-consult__img li:nth-child(3) {transition-delay: 2s;}
	#fullpage #section06.active .main-consult__img li:nth-child(4) {transition-delay: 2.2s;}
	#fullpage #section06.active .main-consult__img li:nth-child(5) {transition-delay: 2.4s;}
}

@media (max-width:860px){
	.main-consult__1step h3 {margin: 10rem 0; letter-spacing: -3px;}
	.main-consult__2step h3 {margin-bottom: 20rem;}
	.main-consult__2step .btn-wrap {margin-top: 30rem;}

	.main-consult__img li:nth-child(1) {top: 8%; height: 190rem;}
	.main-consult__img li:nth-child(2) {left: 69%; top: 22%; width: 140rem; height: 120rem;}
	.main-consult__img li:nth-child(3) {left: 12.5%; top: 70%; width: 160rem; height: 140rem;}
	.main-consult__img li:nth-child(4) {top: 66%; width: 200rem; height: 170rem;}
	.main-consult__img li:nth-child(5) {left: 57%; top: 83%;}
}


@media (max-width:540px){
	.main-consult__1step h3 {margin: 7rem 0; font-size: 55rem;}
	.main-consult__txt {padding: 0 20rem;}
	.main-consult__2step h3 {margin-bottom: 12rem;}
	.main-consult__2step .btn-wrap {margin-top: 20rem;}

	.main-consult__img li:nth-child(1){top: 10%; left: 20rem; width: 120rem; height: 100rem;}
	.main-consult__img li:nth-child(2) {left: auto; right: 20rem; top: 20%; width: 90rem; height: 80rem;}
	.main-consult__img li:nth-child(3) {left: 13%; top: 86%; width: 85rem; height: 75rem;}
	.main-consult__img li:nth-child(4) {top: 75%; right: 20rem; width: 120rem; height: 100rem;}
	.main-consult__img li:nth-child(5) {display: none;}

}