@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; display: flex; align-items: center; justify-content: center; width:100%; height:100%; background:#fff; transition:all .5s ease-in 2s;}
 .main-cover svg {width: 100%; height:75%;}
 .motion-on .main-cover{opacity:0;visibility:hidden;z-index: -1;}
 .main-cover.hide {display: none;}

 .cover-logo__item {opacity: 0; visibility: hidden; animation: 1s ease-in forwards; background: transparent;}
 .cover-logo__item.right02 {animation-name: logoItem_1;}
 .cover-logo__item.right03 {animation-name: logoItem_2; animation-delay: .1s;}
 .cover-logo__item.right01 {animation-name: logoItem_3; animation-delay:.2s;}
 .cover-logo__item.left02 {animation-name: logoItem_4;}
 .cover-logo__item.left03 {animation-name: logoItem_5; animation-delay:.1s;}
 .cover-logo__item.left01 {animation-name: logoItem_6; animation-delay: .2s;}
 .st1 {fill:#EB550A}

#cover-logo {animation: logoScale 0.8s ease-in 1.2s forwards;}

@keyframes logoItem_1 {
	from {transform: translateX(10%);}
	to {opacity: 1; visibility: visible; transform: translateX(0);}
}

@keyframes logoItem_2 {
	from {transform: translateX(30%);}
	to {opacity: 1; visibility: visible; transform: translateX(0);}
}

@keyframes logoItem_3 {
	from {transform: translateX(50%);}
	to {opacity: 1; visibility: visible; transform: translateX(0);}
}


@keyframes logoItem_4 {
	from {transform: translateX(-10%);}
	to {opacity: 1; visibility: visible; transform: translateX(0);}
}

@keyframes logoItem_5 {
	from {transform: translateX(-30%);}
	to {opacity: 1; visibility: visible; transform: translateX(0);}
}

@keyframes logoItem_6 {
	from {transform: translateX(-50%);}
	to {opacity: 1; visibility: visible; transform: translateX(0);}
}

@keyframes logoScale {
	to{opacity: 0; visibility: hidden; transform: scale(3);}
}

#footer .btn-quick {display: none;}

@media (max-width:540px){
	.main-cover svg {height: 50%;}
}

/* **************************************** *
 * Site custom
 * **************************************** */

 /* common */
body:has(#section02.active, #section03.active, #section06.active, #section07.active) #logo a span {background-image: url(../img/layout/logo.svg);}
body:has(#section02.active, #section03.active, #section06.active, #section07.active) #logo i {background-image: url(../img/layout/partner-logo.png);}
body:has(#section02.active, #section03.active, #section06.active, #section07.active) #gnb .gnb-item > a {color: var(--b-01);}
body:has(#section02.active, #section03.active, #section06.active, #section07.active) .lnag-menu__icon {background-image: url(../img/common/ic-lang.svg);}
body:has(#section02.active, #section03.active, #section06.active, #section07.active) .lang-menu i {color: var(--b-01);}
body:has(#section02.active, #section03.active, #section06.active, #section07.active) .lang-menu .select-link__btn::after {background-image: url(../img/board/arrow-select.svg);}
body:is(.fp-viewing-8) .btn-quick {bottom:100rem}

.main-title em {display: block; margin-bottom: 12rem; font-weight: 700; color: var(--c-01);}
.main-title h3 {font-size: var(--font-37); font-weight: 700;}
.main-title h3.lang-en {font-size: var(--font-37);}
.main-title h3 + p {margin-top: 12rem;}

@media (max-width:1280px){
	.main-title em {margin-bottom: 22rem;}
}

@media (max-width:540px){
	.main-title em {margin-bottom: 12rem; font-size: 12rem;}
	.main-title h3 {line-height: 1.4; word-break: keep-all;}
	.main-title h3 + p {margin-top: 10rem;}
}

/* nav */
body:has(#main) #fp-nav {z-index: 51; top: 50%; bottom: auto; transform: translateY(-50%);}
body:has(#main) #fp-nav ul {flex-direction: column; gap:10rem;}
body:has(#main) #fp-nav ul li {margin: 0; padding: 12rem;}
body:has(#main) #fp-nav ul li a::after {opacity: .3; position: absolute; left: 50%; top: 50%; content:''; width: 7rem; height: 7rem; background: var(--f-01); border-radius: 100%; transform: translate(-50%, -50%);}
body:has(#main) #fp-nav ul li a > * {display: none !important;}
body:has(#main) #fp-nav ul li a.active::after {opacity: 1; background: var(--bg-01) !important;}
body:has(#section02.active, #section06.active, #section07.active) #fp-nav ul li a::after {opacity: 1; background: #ddd;}
body:has(#section09.active) #fp-nav {display: none;}

@media (max-width:1680px){
	#fp-nav {left: 20rem !important;}
}

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


@media (max-width: 540px){
	body:is(.fp-viewing-8) .btn-quick {bottom: 300rem;}
}

/* main visual */
#section01 .fp-overflow,
.main-visual {height: 100%;}
.main-visual__video {position: absolute; left:0; top:0; width: 100%; height: 100%;}
.main-visual__video iframe {object-fit: cover;position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);}
.main-visual__video::after {position: absolute; width: 100%; height: 100%; content:'';}
.main-visual__title {position: absolute; left: 0; bottom: 80rem; width: 100%; padding-left: 60rem; line-height: 1.4; font-size: var(--font-47); font-weight: 700; color: var(--f-01); word-break: keep-all;}
/*.main-visual__title br:last-child {display: none;} */

@media (min-aspect-ratio: 16/9) {
	.main-visual__video iframe{height: 56.25vw;}
}
@media (max-aspect-ratio: 16/9) {
	.main-visual__video iframe{width: 177.78vh;}
}

@media (max-width:1280px){
	.main-visual {height: 100vh;}
	.main-visual__title {padding-left: 40rem;}
}

@media (max-width:1200px){
	.main-visual__title br:last-child {display: block;}
}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
}

@media (max-width:860px){
	.main-visual {height: 860rem;}
}

@media (max-width:540px){
	.main-visual {height: 600rem;}
	.main-visual__title {bottom: 50rem; padding-left: 20rem; padding-right: 20rem;}
	.main-visual__title br {display: none !important;}
}

/* main-tech */
.main-tech {padding-top: 80rem;}
.main-tech .main-title h3 br {display: none;}
.main-tech__list {gap: 20rem; margin-top: 40rem; padding-bottom: 30rem;}
.main-tech__list a {position: relative; display: block; border-radius: var(--br-12); background: linear-gradient(154deg, #F4F4F4 -3.93%, #ECECEC 85.07%); transition: var(--trans-01);}
.main-tech__list a::after {opacity: 0; visibility: hidden; position: absolute; left: 30rem; bottom: -30rem; content:''; display: block; width: 60rem; height: 60rem; border-radius: 100%; background-color: var(--bg-01); background-image: url(../img/layout/arrow-basic_w.svg); background-repeat: no-repeat; background-size: 20rem; background-position: 50% 50%; box-shadow: 2rem 3rem 5rem rgba(0, 0, 0, .12); transform: translateX(-30rem); transition: var(--trans-01);}
.main-tech__inr {overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 500rem;  padding: 25rem 30rem 60rem;}
.main-tech__inr * {transition: var(--trans-01);}
.main-tech__inr figure {position: absolute; left:5rem; top:35rem; width: 100%; height: 300rem;}
.main-tech__inr figure img {width: auto; object-fit: inherit; }
.main-tech__text {transform: translateY(80rem);}
.main-tech__text strong {display: block; margin-bottom: 10rem; font-size: var(--font-30); font-weight: 800;}
.main-tech__text p {opacity: 0; visibility: hidden;}

@media (max-width:1480px){
	.main-tech__inr { word-break: keep-all;}
	.main-tech__list li:first-child .main-tech__text {transform: translateY(106rem);}
}

@media (max-width:1280px){
	.main-tech {padding: 150rem 0; padding-bottom: 120rem;}
	.main-tech__list li:first-child .main-tech__inr figure img {height: 260rem; margin-top: 20rem;}
}

@media (hover: hover) and (pointer: fine){
	.main-tech__list a:hover {background: linear-gradient(154.29deg, #4D413B -3.93%, #201D1B 85.07%);}
	.main-tech__list a:hover::after {opacity: 1; visibility: visible; transform: translateX(0);}
	.main-tech__list a:hover .main-tech__text *  {color: var(--f-01);}
	.main-tech__list a:hover .main-tech__text {transform: translateY(0) !important;}
	.main-tech__list a:hover .main-tech__text p {opacity: 1; visibility: visible;}
}

@media (max-width:1023px){
	.main-tech__list {grid-template-columns: repeat(2, 1fr); gap: 60rem 20rem;}
	.main-tech__list li:first-child .main-tech__text {transform: translateY(80rem);}
	.main-tech__inr figure {left: 0; top: 50rem;}
	.main-tech__inr figure img {width: 100%;}
	.main-tech__list li:first-child .main-tech__inr figure img {margin-left: -15rem;}
}

@media (max-width:860px){
	.main-tech {padding: 120rem 0;}
	.main-tech__list {grid-template-columns: 1fr; gap: 20rem; margin-top: 50rem; padding-bottom: 0;}
	.main-tech__inr {justify-content: flex-start; padding: 40rem 30rem 53rem;}
	.main-tech__inr figure {position: relative; top: auto; margin-top: 10rem; height: 300rem; text-align: center;}
	.main-tech__inr figure img {display: inline-block; width: auto;}
	.main-tech__list li:first-child .main-tech__inr {padding:80rem 30rem 60rem}
	.main-tech__list li:first-child .main-tech__inr figure {margin-top: 0;}
	.main-tech__list li:first-child .main-tech__inr figure img {height: 100%; margin-left: 0; margin-top: 0;}
	.main-tech__list a::after {display: none;}
	.main-tech__list li:first-child .main-tech__text {transform: translateY(0);}
	.main-tech__text {margin-top: 10rem; text-align: center; transform: translateY(0);}
	.main-tech__list li:first-child .main-tech__text {margin-top: 40rem;}
	.main-tech__text p {opacity: 1; visibility: visible;}
}

@media (max-width:540px){
	.main-tech {padding: 60rem 0;}
	.main-tech .main-title h3 br {display: block;}
	.main-tech__list {margin-top: 20rem; gap: 10rem;}
	.main-tech__inr {min-height: auto;}
	.main-tech__inr figure {height: 150rem;}
	.main-tech__inr figure img {width: auto; height: auto; max-width: 100%; max-height: 100%;}
	.main-tech__text {margin-top: 20rem;}
	.main-tech__list li:first-child .main-tech__inr {padding: 50rem 20rem;}
	.main-tech__list li:first-child .main-tech__text {margin-top: 30rem;}
}

/* main-3d */
#section03 {background: linear-gradient(116.35deg, #D9E1EC 16.88%, #ECF0F4 83.12%);}
.main-3d {overflow: hidden;}
.main-3d__text {z-index: 1; padding-top: 100rem;}
.main-3d__text .main-title {margin-bottom: 50rem;}
.main-3d__text .main-title em {margin-bottom: 30rem;}
.main-3d__text .main-title p {opacity: .6;}
.main-3d__img {position: relative;}
.main-3d__img figure {height: 460rem; mix-blend-mode: multiply;}
.main-3d__img figure:nth-child(1) {opacity: .2; position: absolute; left:0; top: 0; transform: translateX(-50%);}
.main-3d__img figure:nth-child(2) {height: 100%; transform: translateX(12%);}
.main-3d__img figure:nth-child(2) img {width: auto; height: 100%; object-fit: inherit;}
.main-3d .wrap {margin-top: 30rem;}
.main-3d .rolling-img {opacity: .7; position: absolute; left:0; bottom:30rem; width: 100%;} 
.main-3d .rolling-img__box {animation-duration: 200s;}
.main-3d .rolling-img__box p {line-height: 1; text-transform: uppercase;  color: transparent; font-size: 200rem; font-weight: 800; background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); -webkit-background-clip: text; background-clip: text;  }

@media (max-width:1280px){
	.main-3d__text {width: 50%; padding-top: 150rem;}
	.main-3d__img {overflow: hidden; padding-bottom: 74rem;}
	.main-3d__img figure:nth-child(1) {height: 240rem; top: 12vh; transform: translateX(-21%) rotate(18deg);}
	.main-3d__img figure:nth-child(2) {height: 61vh; margin-top: 18vh; transform: translateX(4%);}
	.main-3d .wrap {margin-top: 0;}
}

@media (max-width:1023px){
	.main-3d {padding-bottom: 100rem;}
	.main-3d__img figure:nth-child(1) {height: 240rem; top: 8vh; transform: translateX(-30%) rotate(18deg);}
	.main-3d__img figure:nth-child(2) {height: 58vh; margin-top: 21vh;}
	.main-3d .rolling-img {bottom: 50rem;}
	.main-3d .rolling-img__box p {font-size: 150rem;}
}

@media (max-width:860px){
	.main-3d {padding-bottom: 70rem;}
	.main-3d .wrap {flex-direction: column;}
	.main-3d__text {width: 100%; padding-top: 120rem;}
	.main-3d__text .main-title {margin-bottom: 42rem;}
	.main-3d__img {margin-top: -18%; padding-bottom: 0;}
	.main-3d__img figure:nth-child(1) {display: none;}
	.main-3d__img figure:nth-child(2) {height: 50vh; margin-top: 0; text-align: right;}
	.main-3d__img figure:nth-child(2) img {display: inline-block;}
}

@media (max-width:540px){
	#section03 {background: #ecf0f4;}
	.main-3d {padding-bottom: 40rem;}
	.main-3d__text {padding-top: 60rem;}
	.main-3d__text .main-title {margin-bottom: 25rem;}
	.main-3d__text .main-title em {margin-bottom: 17rem;}
	.main-3d .main-title h3 {line-height: 1.4; font-weight: 800; letter-spacing: -0.5px;}
	.main-3d__img {margin-top: 0;}
	.main-3d__img figure:nth-child(2) {mix-blend-mode: normal; width: 100%; height: 47vh; margin-top: 30rem; text-align: center; background: url(../img/main/3d01_m.png) no-repeat center / contain; transform: translateX(0);}
	.main-3d__img figure:nth-child(2) img {display: none;}
	.main-3d .rolling-img {z-index: 1; bottom: 30rem;}
	.main-3d .rolling-img__box p {font-size: 92rem;}
}

/* main-global */
#section04 {background: #020303;}
.main-global .wrap {height: var(--height-full);}
.main-global .main-title {margin-bottom: 50rem;}
/* .main-global::before {position: absolute; top: 40rem; right: 60rem; content:''; width: 70%; max-width: 1200rem; height: 100%; background: url(../img/main/global-map.png) no-repeat center / contain;} */
.main-global__text {display: inline-block; margin-top: 50rem;}
.main-global .rolling-img {display: flex; flex-direction: column; width: 240rem; height: 45vh;}
.main-global .rolling-img__box {flex-direction: column;animation:rolling_img_v 40s linear infinite;}
.main-global .rolling-img__box div {display: inline-flex; align-items: center; justify-content: center; width: 100%; height:90rem; margin:5rem 0; border-radius: var(--br-12); border: 1px solid rgba(255, 255, 255, .1);}
.main-global .rolling-img__box div img {max-width: 100%; max-height: 100%; margin: 0;}

.main-global__map {position: absolute; right: -100rem; width: 80%;}
.main-global__map figure {position: relative; width: 100%; margin-top: 50rem;}
.main-global__map figure img {object-fit: contain;}

.global-map__area {z-index: 1; position: absolute; line-height: normal;}
.global-map__area span {position: relative; top: 0; display: inline-flex; align-items: center; font-size: var(--font-15); font-weight: 800; color: var(--f-01); transition: var(--trans-01);}
.global-map__area span::before {content:''; width: 15rem; height: 20rem; margin-right: 8rem; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; background-image: url(../img/sub/ic-spot_c.svg);}
.global-map__area:hover span {top: -8rem; color: var(--c-01);}
.global-map__company {position: absolute; right: 12%; top: 26.5%;}
.global-map__company i {position: relative; display: flex; align-items: center; justify-content: center; width: 120rem; height: 120rem; margin-bottom: 22rem; border-radius: 100%; background-color: var(--c-01); background-repeat: no-repeat; background-size: 80%; background-position: 50% 40%; background-image: url(../img/main/map-logo.svg); transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);}
.global-map__company i img {height: 55rem; width: auto; object-fit: contain; margin-top: -10rem;}
.global-map__company i::before {position: absolute; left: 50%; bottom: -10rem; content:'';border-style: solid; border-width: 20rem 8rem 0 8rem; border-color: var(--c-01) transparent transparent transparent; transform: translateX(-50%); transition: var(--trans-01);}
[data-spot] {position: absolute; display: block; width: 8rem; height: 8rem; border-radius: 100%; background: var(--f-01); box-shadow: 0 0 13rem 3rem rgba(235, 85, 10, 1);}
[data-spot="1"] {left: 19%; top: 40%;}
[data-spot="2"] {left: 29%; top:85%;}
[data-spot="3"] {left: 62.5%; top: 27%;}
[data-spot="4"] {left: 49.3%; top: 38.2%;}
[data-spot="5"] {left: 47.5%; top: 40.5%;}
[data-spot="6"] {left: 47.5%; top: 52%;}
[data-spot="7"] {left: 78.5%; top:48%;}
[data-spot="8"] {left: 86.3%; top: 46.5%;}
[data-spot="9"] {left: 50.9%; top: 43.5%;}
[data-spot="10"] {left: 77%; top: 69%;}
[data-spot="11"] {left: 56.4%; top: 45.5%;}

.global-map__area:nth-child(2) {left: 18%; top: 49%;}
.global-map__area:nth-child(3) {left: 54%; top: 39%;}
.global-map__area:nth-child(4) {left: 70%; top: 29%;}
.global-map__area:nth-child(5) {left: 71.42%; top: 45.52%;}
.global-map__area:nth-child(5) span,
.global-map__area:nth-child(6) span {flex-direction: row-reverse;}
.global-map__area:nth-child(5) span::before,
.global-map__area:nth-child(6) span::before {margin-left: 8rem; margin-right: 0;}
.global-map__area:nth-child(5)::before,
.global-map__area:nth-child(6)::before {left: auto; right: 4rem; bottom: -4rem;}
.global-map__area:nth-child(6) {left: 67.39%; top:66.5%;}

.popup-layer-close {background: #ccc;}
.popup-layer-close::after,
.popup-layer-close::before {background: var(--b-01);}

@media (max-width:1480px){
	.global-map__company {right: 11.3%; top: 25.5%;}
	.global-map__area:nth-child(4) {left: 68%; top: 30%;}
	.global-map__area:nth-child(5) {left: 70.42%; top: 46.52%;}
	.global-map__area:nth-child(6) {left: 68.3%; top: 63.2%;}
	[data-spot="7"] {left: 78.4%; top: 49.3%;}
}

@media (max-width:1280px){
	.main-global {padding-top: 150rem; padding-bottom: 80rem;}
	.main-global .wrap {display: block; height: auto;}
	.main-global .main-title br {display: none;}
	.main-global__text {width: 100%; margin-top: 0; text-align: center;}
	.main-global::before {display: none;}
	/* .main-global .main-title::after {content:''; display: block; width: 100%; margin-top:30rem; aspect-ratio: 16/9; background: url(../img/main/global-map.png) no-repeat center / contain;} */
	.main-global .rolling-img {width: 100%; height: auto; flex-direction: row;}
	.main-global .rolling-img__box {flex-direction: row; animation-name: rolling_img; gap: 10rem;}
	.main-global .rolling-img__box div {width: 240rem; margin: 0;}

	.main-global__map {position: relative; right: auto; width: 100%; margin-top: 62rem;}
	.global-map__company {right: 12.5%; top: 22.5%;}
	.global-map__area:nth-child(2) {top: 45%;}
	.global-map__area:nth-child(3) {top: 35%;}
	.global-map__area:nth-child(4) {top: 24%;}
	.global-map__area:nth-child(5) {left: 72%; top: 43%;}
	.global-map__area:nth-child(6) {left: 70.35%; top: 60.5%;}
	[data-spot="1"] {left: 20%; top: 37%;}
	[data-spot="2"] {top: 84%;}
	[data-spot="3"] {top: 21%;}
	[data-spot="4"] {top: 33.2%;}
	[data-spot="5"] {top: 35.2%;}
	[data-spot="6"] {left: 47.5%; top: 47%;}
	[data-spot="7"] {left: 78.45%; top: 45.7%;}
	[data-spot="8"] {top: 42%;}
	[data-spot="9"] {top: 39%;}
	[data-spot="10"] {top: 63%;}
	[data-spot="11"] {top: 41%;}
}

@media (max-width:1200px){
	.global-map__company {right: 11.5%; top: 18.5%;}
	.global-map__area:nth-child(4) {left: 68%;}
	.global-map__area:nth-child(5) {left: 70.85%; top: 42.7%;}
	.global-map__area:nth-child(6) {left: 68.65%; top: 60%;}
}

@media (max-width:1023px){
	.main-global .rolling-img__box div {width: 200rem; height: 100rem;}
	.global-map__company {right: 11.5%; top: 18.5%;}
	.global-map__company i {width: 100rem; height: 100rem;}
	.global-map__company i img {height: 42rem;}
	.global-map__area span::before {margin-right: 5rem;}
	.global-map__area:nth-child(3) {left: 54%; top: 33%;}
	.global-map__area:nth-child(5) {left: 69%; top: 42%;}
	.global-map__area:nth-child(6) {left: 66.5%; top: 59.5%;}
	.global-map__area:nth-child(5) span::before,
	.global-map__area:nth-child(6) span::before {margin-left: 5rem;}
	[data-spot="7"] {left: 78%;}
	[data-spot="10"] {left: 79%;}
}

@media (max-width:860px){
	.main-global {padding-top: 120rem; padding-bottom: 0;}
	.main-global .main-title {margin-bottom: 40rem;}
	.main-global .main-title::after {margin-top: 40rem;}
	.main-global .rolling-img__box div {width: 180rem; height: 80rem;}
	.global-map__area span {font-size: 14rem;}
	.global-map__area span::before {width: 12rem; height: 15rem;}
	.global-map__area::before {left: 1px; width: 7rem; height: 7rem;}
	.global-map__area:nth-child(4) {left: 67%;}
	.global-map__area:nth-child(5) {left: 67.8%;}
	.global-map__area:nth-child(6) {left: 64.7%;}
	.global-map__company {z-index: 1; right: 11%; top: 14.5%;}
	.global-map__company i {width: 90rem; height: 90rem;}
}

@media (max-width:540px){
	.main-global {padding-top: 65rem;}
	.main-global .main-title {margin-bottom: 25rem;}
	.main-global .main-title::after {margin-top: 20rem;}
	.main-global .rolling-img__box {gap: 0 5rem;}
	.main-global .rolling-img__box div {width: 110rem; height: 55rem;}
	.main-global__map {margin-top: 0;}
	.main-global__map figure {margin-top: 35rem;}
	.global-map__area {z-index: 1;}
	.global-map__area::before {left: 3rem; bottom: 2rem; width: 5rem; height: 5rem; margin-right: 0;}
	.global-map__area span {font-size: 0;}
	.global-map__area span::before {width: 12rem; height:18rem; margin-right: 0;}
	.global-map__area:nth-child(2) {left: 17%; top: 39%;}
	.global-map__area:nth-child(3) {left: 53%; top: 28%;}
	.global-map__area:nth-child(4) {top: 21%;}
	.global-map__area:nth-child(5) {left: 75.5%; top: 34%;}
	.global-map__area:nth-child(6) {left: 76.4%; top: 51.5%;}
	.global-map__company {top: 10%; right: 9.8%;}
	[data-spot],
	.global-map__company::before {width: 4rem; height: 4rem;}
	.global-map__company i {width: 50rem; height: 50rem; margin-bottom: 12rem;}
	.global-map__company i img {height: 20rem; margin-top: -3rem;}
	.global-map__company i::before {bottom: -6rem; border-width: 10rem 5rem 0 5rem;}

	.popup-layer-close {background: #111;}
}

/* main-company */
#section05 {background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../img/main/company01.jpg); transition: var(--trans-01);}
#section05:has(.main-company__item:nth-child(1):hover) {background-image:url(../img/main/company01.jpg);}
#section05:has(.main-company__item:nth-child(2):hover) {background-image:url(../img/main/company02.jpg);}
#section05:has(.main-company__item:nth-child(3):hover) {background-image:url(../img/main/company03.jpg);}
.main-company__list {margin-top: 40rem;}
.main-company__item {overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-width: 320rem; min-height: 400rem; margin: 0 10rem; padding: 0 20rem; backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); border-radius: var(--br-12); background: rgba(255, 255, 255, .1); transition: var(--trans-01);}
.main-company__item > * {transition: var(--trans-01);}
.main-company__item i {display: block; width: 80rem; height: 80rem; margin: 0 auto 30rem; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 100%; border: 1px solid rgba(255, 255, 255, .2);}
.main-company__item:nth-child(1) i {background-size: 32rem; background-image: url(../img/main/ic-company01.svg);} 
.main-company__item:nth-child(2) i {background-size: 26rem; background-image: url(../img/main/ic-company02.svg);} 
.main-company__item:nth-child(3) i {background-size: 27rem; background-image: url(../img/main/ic-company03.svg);} 
.main-company__item strong {display: block; margin-bottom: 9rem; font-size: 26rem; font-weight: 700;}
.main-company__item .btn-wrap {opacity: 0; visibility: hidden; height: 0; transform: translateY(20rem); transition: none;}

@media (max-width:1280px){
	.main-company {padding-top: 130rem; padding-bottom: 150rem;}
}

@media (max-width:1023px){
	.main-company__list {display: grid; grid-template-columns: repeat(3, 1fr);}
	.main-company__item {min-width: auto;}
}

@media (min-width: 861px){
	@media (hover: hover) and (pointer: fine){
		.main-company__item:hover {background-color: #fff;}
		.main-company__item:hover i {border-color: var(--bd-03);}
		.main-company__item:hover strong {color: var(--b-01);}
		.main-company__item:hover p {line-height: 1.5; color: var(--b-04);}
		.main-company__item:hover .btn-wrap {opacity: 1; visibility: visible; margin-top: 22rem; height: 52rem; transform: translateY(0); transition: var(--trans-01);}
	
		.main-company__item:nth-child(1):hover i {background-image: url(../img/main/ic-company01_c.svg);} 
		.main-company__item:nth-child(2):hover i {background-image: url(../img/main/ic-company02_c.svg);} 
		.main-company__item:nth-child(3):hover i {background-image: url(../img/main/ic-company03_c.svg);} 
	}
}

@media (max-width:860px){
	#section05 {background: #020303; background-image: none !important;}
	.main-company {padding-top: 150rem; padding-bottom: 120rem;}
	.main-company__item {min-height: auto; margin: 0; padding:60rem 40rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
	.main-company__item:nth-child(1) {background-image:url(../img/main/company01.jpg);}
	.main-company__item:nth-child(2) {background-image:url(../img/main/company02.jpg);}
	.main-company__item:nth-child(3) {background-image:url(../img/main/company03.jpg);}

	.main-company__item .btn-wrap {opacity: 1; visibility: visible; height: auto; margin-top: 22rem; transform: none !important;}
	.main-company__list {grid-template-columns: 1fr; gap: 10rem;}
}

@media (max-width:540px){
	.main-company {padding-top: 80rem; padding-bottom: 60rem;}
	.main-company__item {padding: 60rem 20rem;}
	.main-company__item strong {margin-bottom: 7rem; font-size: 18rem;}
	.main-company__item i {width: 60rem; height: 60rem; margin-bottom: 20rem;}
	.main-company__item:nth-child(1)::before {opacity: 0.05; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);}
	.main-company__item:nth-child(1) i {background-size: 25rem;}
	.main-company__item:nth-child(2) i,
	.main-company__item:nth-child(3) i {background-size: 22rem;}
}

/* notice */
#section06 {background: url(../img/main/symbole.svg) no-repeat right 110rem center / contain;}
.main-board .wrap {height: 100vh;}
.main-board__inr {width: 56%;}
.main-board__inr .main-title {margin-bottom: 40rem;}

@media (max-width:1600px){
	#section06 {background-position: right 60rem center;}
}

@media (max-width:1280px){
	#section06 {background-position: right 40rem top; background-size: 33%;}
	.main-board {padding-top: 150rem;}
	.main-board__inr {min-height: 45vw;}
	.main-board .wrap {height: auto;}
}

@media (max-width:1023px){
	#section06 {background: #fff;}
	.main-board {padding-top: 130rem;}
	.main-board__inr {width: 100%;}
}

@media (max-width:860px){
	.main-board {padding-top: 100rem;}
}

@media (max-width:540px){
	.main-board {padding-top: 60rem;}
	.main-board__inr .main-title {margin-bottom: 15rem;}	
}

/* quick */
#section07 {padding-top:70rem;}
.main-quick__list {gap: 20rem;}
.main-quick__item {overflow: hidden; position: relative; min-height: 640rem; padding: 60rem 40rem; border-radius: var(--br-12);}
.main-quick__bg {position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size: cover; background-position: 50% 50%; transition: var(--trans-01);}
.main-quick__item h4 {position: relative; margin-bottom: 30rem; line-height: 1.5; color: var(--f-01); font-family: var(--lang-ko); font-size: var(--font-27); font-weight: 700;}
.main-quick__item .btn-basic {position: relative;}
.main-quick__item:nth-child(1) .main-quick__bg {background-image: url(../img/main/banner01.jpg);}
.main-quick__item:nth-child(2) .main-quick__bg {background-image: url(../img/main/banner02.jpg);}
.main-quick__item:nth-child(3) .main-quick__bg {background-image: url(../img/main/banner03.jpg);}

@media (max-width:1280px){
	#section07 {padding-top: 50rem;}
	.main-quick__item {min-height: auto; aspect-ratio: 3/4;}
}

@media (max-width:1023px){
	.main-quick__list {grid-template-columns: 1fr;}
	.main-quick__item {aspect-ratio: auto; padding: 80rem 40rem;}
	.main-quick__item h4 br:last-child {display: none;}
	.main-quick__item:nth-child(1) .main-quick__bg {background-image: url(../img/main/banner01_m.jpg);}
	.main-quick__item:nth-child(2) .main-quick__bg {background-image: url(../img/main/banner02_m.jpg);}
	.main-quick__item:nth-child(3) .main-quick__bg {background-image: url(../img/main/banner03_m.jpg);}
}

@media (hover: hover) and (pointer: fine){
	.main-quick__item:hover	.main-quick__bg {transform: scale(1.15);}
}

@media (max-width:540px){
	#section07 {padding-top: 40rem;}
	.main-quick__list {gap: 10rem;}
	.main-quick__item {min-height: 320rem; padding: 40rem 20rem;}
	.main-quick__item h4 {margin-bottom: 20rem;}

	.main-quick__bg::after {opacity: .3; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: #000;}
	.main-quick__item:nth-child(1) .main-quick__bg {background-image: url(../img/main/banner01.jpg); background-position: center bottom -25rem;}
	.main-quick__item:nth-child(2) .main-quick__bg {background-image: url(../img/main/banner02.jpg);}
	.main-quick__item:nth-child(3) .main-quick__bg {background-image: url(../img/main/banner03.jpg);}
}

/* bottom */
.main-bottom {position: relative; height: 100vh; background: var(--bg-02);}
.main-bottom .wrap {height: 100%; align-items: center;}
.main-bottom .main-title {margin-top: -19vh; margin-bottom: 50rem;}
.main-bottom .main-title em {margin-bottom: 35rem;}
.main-bottom .main-title h3 + p {opacity: .5; margin-top: 15rem;}
.main-bottom .btn-basic {z-index: 1; position: relative; }
.main-bottom figure {position: absolute; bottom: 0; width: 100%; height: 528rem;}
.main-bottom figure::After {position: absolute; left:0; bottom:0; content:''; width: 100%; height: 177rem; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, #111111 100%);}

@media (max-width:1280px){
	.main-bottom {height: auto; margin-top: 150rem;}
	.main-bottom .wrap {height: auto; min-height: 760rem; justify-content: flex-start; padding: 120rem 0 170rem;}
	.main-bottom .main-title {margin-top: 0;}
	.main-bottom figure {height: 460rem;}
}


@media (max-width:1023px){
	.main-bottom .wrap {min-height: 670rem; margin:0 auto !important;}
	.main-bottom figure {height: 350rem;}
}

@media (max-width:860px){
	.main-bottom {margin-top: 120rem;}
	.main-bottom .wrap {padding: 100rem 0 120rem;}
}

@media (max-width:540px){
	.main-bottom {margin-top: 60rem;}
	.main-bottom .wrap {min-height: 400rem; padding: 60rem 0 100rem;}
	.main-bottom .main-title {margin-bottom: 30rem;}
	.main-bottom .main-title em {margin-bottom: 15rem;}
	.main-bottom .main-title h3 + p {padding: 0 20rem;}
	.main-bottom figure {height: 150rem;}
}