@charset "utf-8";

/*
* File       : site-custom.css
* Author     : B-WORKER
*      
 * SUMMARY:
 * 0) ROOT
 * 1) WRAP
 * 2) SITE CUSTOM 
    - 사이트 전반적으로 함께 쓰이는 속성
	- 메인, 서브 함께 쓰이는 속성
*/

/* **************************************** *
 * font set
 * **************************************** */
body,p{font-size:var(--default); color:var(--b-02)}
body,input,textarea,button,select{font-family:'Pretendard', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
p{font-language-override: 1.5;}
@media (max-width:860px){
	body{font-size:16rem;}
	/* body,
	p,
	li,
	a{font-family:-apple-system, BlinkMacSystemFont, Sans-serif;} */
}

@media (max-width:540px){
	body{letter-spacing: -0.1rem; font-size:15rem;}
	p {line-height: 1.6;}
}

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #39B54A;
	--c-02: #211D70;

	--b-01: #1C1B1D;
	--b-02: #666666;
	--b-03: #aaaaaa;

	--w: #fff;

	--bg-01: #39B54A;
	--bg-02: #020716;
	--bg-03: #F1F3F2;
	--bg-04: #FAFAFA;

	--br-01: #ddd;
	--br-02: #EFEFEF;

	/* 게시판용 root */
	--border-01: #eee;

	--trans-01:all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-02:all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-03:all 0.5s ease;

	--lang-en:'Roboto';
	--lang-ko:"Pretendard";

	--font-84:84rem;
	--font-72:72rem;
	--font-70:70rem;
    --font-62:62rem;
	--font-59:59rem;
	--font-55:55rem;
	--font-44:44rem;
	--font-42:42rem;
	--font-40:40rem;
	--font-32:32rem;
	--font-30:30rem;
	--font-27:27rem;
	--font-24:24rem;
	--font-22:22rem;
	--font-20:20rem;
	--font-18:18rem;
    --font-17:17rem;
	--font-16:16rem;
	--font-15:15rem;
	--font-14:14rem;
	--default:17rem;

	--margin: 80rem;

    --space180:180rem;
    --space140:140rem;
    --space130:130rem;
    --space120:120rem;
    --space110:110rem;
    --space100:100rem;
    --space70:70rem;
	--space40:40rem;

    --op-b10:rgba(0,0,0,.1);
    --op-b20:rgba(0,0,0,.2);
    --op-b30:rgba(0,0,0,.3);
    --op-b40:rgba(0,0,0,.4);
    --op-b50:rgba(0,0,0,.5);
    --op-b60:rgba(0,0,0,.6);
    --op-b70:rgba(0,0,0,.7);
    --op-b80:rgba(0,0,0,.8);
    --op-b90:rgba(0,0,0,.9);

    --op-w10:rgba(255,255,255,.1);
    --op-w20:rgba(255,255,255,.2);
    --op-w30:rgba(255,255,255,.3);
    --op-w40:rgba(255,255,255,.4);
    --op-w50:rgba(255,255,255,.5);
    --op-w60:rgba(255,255,255,.6);
    --op-w70:rgba(255,255,255,.7);
    --op-w80:rgba(255,255,255,.8);
    --op-w90:rgba(255,255,255,.9);
}

.font-h2,h2{font-size:var(--font-72); line-height: 1.2; font-weight: 700;}
.font-h3,h3{font-size:var(--font-56); line-height: 1.375; font-weight: 700;}
.font-h4,h4{font-size:var(--font-28); line-height: 1.32; font-weight: 700;}
.font-en {font-family: var(--lang-en);}


 /* 컬러 기본 셋 */
 [data-color="c1"]{color:var(--c-01) !important;}
 [data-color="c2"]{color:var(--c-02) !important;}
 [data-color="b1"]{color:var(--b-01) !important;}
 [data-color="b2"]{color:var(--b-02) !important;}

 [data-color="w"],
 [data-color="w"] *{color: var(--w);} /* 영역만 글자 흰색 */

 [data-bg="1"]{background-color: var(--bg-01) !important;}
 [data-bg="2"]{background-color: var(--bg-02) !important;}
 [data-bg="3"]{background-color: var(--bg-03) !important;}
 [data-bg="4"]{background-color: var(--bg-04) !important;}
 
 /* boarder 값 기본 셋 */
 [data-border]{border:1px solid;}
 [data-radius]{overflow:hidden;}
 [data-radius="5"]{border-radius:max(0.2604vw, 5rem);}
 [data-radius="10"]{border-radius:max(0.5208vw, 10rem);}
 [data-radius="20"]{border-radius:max(1.0417vw, 20rem);}
 [data-radius="30"]{border-radius:max(1.5625vw, 30rem);}


@media all and (max-width:1919px){
	:root {
		--margin: 60rem;
	}
}

@media (max-width:1480px){
	:root {
		--font-56:48rem;
	}
}

@media all and (max-width:1200px){
	:root {
		--font-84:75rem;
	}
}

@media all and (max-width:1023px){
	:root {
		--font-84:62rem;
		--font-72:62rem;
        --font-62:50rem;
		--font-55:50rem;
        --font-42:32rem;
        --font-32:27rem;
        --font-30:27rem;
		--font-24:22rem;
		--font-20: 18rem;

		--margin: 40rem;

		--space180:160rem;
		--space140:120rem;
		--space120:100rem;
	}
}

@media (max-width:860px){
	:root {
		--font-72:55rem;
        --font-62:42rem;
		--font-55:42rem;
	}
}

@media (max-width: 540px){
	:root {
		--font-84:36rem;
		--font-72:36rem;
        --font-62:32rem;
		--font-55:27rem;
		--font-44:24rem;
		--font-42:24rem;
        --font-32:20rem;
        --font-30:20rem;
		--font-24:18rem;
        --font-20:16rem;
        --font-18:16rem;
		--font-17:15rem;
		--font-16:15rem;
		--font-15:14rem;
		--font-14:13rem;
		--default:15rem;

    	--margin: 20rem;

		--space180:80rem;
		--space140:60rem;
		--space120:60rem;
		--space70:50rem;
		--space40:20rem;
	}
}

/* **************************************** *
 * wrapper
 * **************************************** */
  #container {z-index: 1; position: relative; background: var(--w);} 
  #content {position: relative;}
  #content:has(.main-about-container) {overflow: hidden;}
 *[class^="wrap"]{position:relative;margin:0 auto;}

 .wrap{max-width:1400rem;}
 .wrap-wide{max-width: none; margin: 0 var(--margin);}
 .wrap-narrow{max-width:1206rem;} /* 빼지마세요 */
 
 @media all and (max-width:1919px){
	 .wrap-wide{margin: 0 60rem; max-width: none;}
 }
 
 @media all and (max-width:1680px){
	 .wrap{margin:0 60rem; max-width:none;}
 }
 
 @media all and (max-width:1023px){
	 *[class^="wrap"]{margin:0 40rem;max-width:none;width: auto;}
 }
 
 @media all and (max-width:540px){
	 *[class^="wrap"]{margin:0 20rem;}
 }

 /* **************************************** *
 * swiper set
 * 
 * 사이트 기본 슬라이드 스타일에 맞게 마음껏 수정하면 됩니다.
 * 특정 페이지에서만 다른 스타일 슬라이드를 사용한다면 부모 클레스 상쇄하여 사용 
 * **************************************** */
 .swiper-controls .wrap *{cursor:pointer;}
 .swiper-container img{width:100%;}
 .swiper-controls > div{cursor: pointer;}
 .button-next.swiper-button-disabled,
 .button-prev.swiper-button-disabled{opacity:0.5;}
 
 .swiper-controls{display:flex; justify-content:center; align-items:center;}
 .swiper-controls *[class^="swiper-btn--"]{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem; font-weight: 600;}
 .swiper-controls *[class^="swiper-btn--"]::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(/theme/basic/img/common/arrow-basic.svg) no-repeat 50% 50%;background-size: 8rem;}
 .swiper-controls .swiper-btn--prev{flex-direction: row-reverse;}
 
 .swiper-controls .swiper-btn--next::after{/* transform:rotate(-90deg); */}
 .swiper-controls .swiper-btn--prev::after{transform: rotate(180deg);}
 .swiper-controls .swiper-button-disabled{opacity: 0.5;}
 
 .swiper-pagination-bullet{width:10rem; height:10rem; background:#fff; border-radius:100%;}
 .swiper-pagination{display:flex; gap:15rem;}


/* **************************************** *
 * site custom
 * **************************************** */

/* tag common */
p{line-height:1.6; font-weight:300;}

/* button common */
.btn-wrap{display: flex;}
*.btn-defualt{position: relative; width: 60rem; height: 60rem; background-color: rgba(255,255,255,.02); gap: 20rem; display: flex; align-items: center; justify-content: center;}

.btn-basic {display: inline-flex;}
.btn-basic > p {overflow: hidden; position: relative; display: inline-flex; align-items: center; height: 55rem; margin-right: 3rem; padding: 0 27rem; border-radius: 3rem; background-color: #fff;}
.btn-basic > p::before {position: absolute; left:0; top:100%; content:''; width: 100%; height: 100%; background: var(--c-02); transition: var(--trans-01);}
.btn-basic > p span {position: relative; font-size: var(--font-16); font-weight: 600; color: var(--b-01); transition: var(--trans-01);}
.btn-basic__arrow{z-index: 1; overflow: hidden; position: relative; display: block; width: 55rem; height: 55rem; border-radius: 3rem; background-color: #fff;}
.btn-basic__arrow:is(:not(.color))::before {position: absolute; left:0; top:100%; content:''; width: 100%; height: 100%; background: var(--c-02); transition: var(--trans-01);}
.btn-basic__arrow::after {position: absolute; left:0; top:0; content:''; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 13rem; background-image: url(../img/layout/arrow-basic.svg);}
.btn-basic.gray > p, 
.btn-basic.gray .btn-basic__arrow {background-color: #EFEFEF;}
.btn-basic.black > p, 
.btn-basic.black .btn-basic__arrow{background-color: var(--bg-02);}
.btn-basic.black > p span {color: var(--w);}
.btn-basic.line > p, 
.btn-basic.line .btn-basic__arrow {border: 1px solid var(--br-01);}
.btn-basic__arrow.line {border: 1px solid var(--br-01);}
.btn-basic__arrow.color {background-color: var(--c-02);}
.btn-basic.black .btn-basic__arrow::after,
.btn-basic__arrow.color::after {background-image: url(../img/layout/arrow-basic_w.svg);}

.scroll-down {z-index: 1; display: inline-flex; justify-content: center; align-items: center; width: 130rem; height: 55rem; font-family: var(--lang-en); font-weight:600; font-size:var(--font-14); color:var(--w); text-transform: uppercase; border-radius: 3rem; background: var(--bg-02);}
.scroll-down i {margin-top: -1px;}
.scroll-down i span {opacity: 0; will-change: opacity; display: block; width: 12rem; height: 11rem; margin-right: 11rem; background: url(../img/layout/arrow-basic_w.svg) no-repeat center / cover; transform: rotate(90deg); animation: scroll-motion 2s infinite;}
.scroll-down i span:nth-of-type(1) {animation-delay: 0s;}
.scroll-down i span:nth-of-type(2) {animation-delay: .3s;}

@keyframes scroll-motion {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

@media (hover: hover) and (pointer: fine){
    *.btn-defualt:hover .round{width: 10rem; height: 10rem; opacity: 1;}
    *.btn-defualt:hover .plus{width: 0; height: 0; opacity: 0;}

	.btn-basic:hover > p::before {top: 0;}
	.btn-basic:hover > p span {color: var(--w);}
	.btn-basic:hover .btn-basic__arrow:is(:not(.color))::before {top: 0;}
	.btn-basic:hover .btn-basic__arrow:is(:not(.color))::after {background-image: url(../img/layout/arrow-basic_w.svg);}
	.btn-basic.line:hover {border-color: transparent;}
}

@media all and (max-width:1023px){

}

@media (max-width: 540px){
	.scroll-down {width: 100rem; height: 45rem; font-size: 12rem;}
	.scroll-down i span {width: 8rem; height: 7rem; margin-right: 8rem; }
	.btn-basic > p {height: 50rem; padding: 0 20rem;}
    .btn-basic > p span {font-size: var(--font-15);}
    .btn-basic__arrow {width: 50rem; height: 50rem;}
}

/* 마우스 커스텀 */
#cursor{mix-blend-mode:normal;position:fixed; top:0; left:0; z-index:1000; pointer-events:none; will-change:transform;}
#cursor .cur_cir{opacity:0; width:32px; height:32px; margin-top:-50%; margin-left:-50%; transition:opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s cubic-bezier(0.25, 1, 0.5, 1); border-radius:50%;}

#cursor.on .cur_cir{backdrop-filter: blur(15rem); -webkit-backdrop-filter: blur(15rem); mix-blend-mode: hard-light; position:relative; opacity:1; display:flex; justify-content:space-between; align-items:center; width:180rem; height:180rem; padding:22rem; background-color:rgba(2, 7, 22, .9); transform:rotate(0) scale(1) translate(0, 0) !important;}
#cursor.on .cur_cir::before{width:100%; text-align:center;display:block; position:absolute; top:50%; left:50%; font-weight:700; font-size:14rem; color:var(--w); transform:translate(-50%, -50%);}
#cursor.on .cur_cir p::before{font-family:var(--lang-en); font-size:var(--font-14); font-weight:700; color:var(--w);}
#cursor.on .cur_cir i {display:inline-flex;}
#cursor.on .cur_cir i:first-child {transform:scaleX(-1);}
#cursor.on .cur_cir i span {opacity:0; will-change: opacity; width:6rem; height:12rem; margin:0 2rem; background:url(../img/layout/arrow-basic_w.svg) no-repeat center / cover; animation: scroll-motion 2s infinite;}
#cursor.on .cur_cir i span:nth-of-type(1) {animation-delay: 0s;}
#cursor.on .cur_cir i span:nth-of-type(2) {animation-delay: .3s;}

#cursor.drag .cur_cir p:before{content:"DRAG";}

#cursor.scroll .cur_cir {flex-direction: column;}
#cursor.scroll .cur_cir p::before{content:"SCROLL";}
#cursor.scroll .cur_cir i:first-child {transform: rotate(-90deg);}
#cursor.scroll .cur_cir i {transform: rotate(90deg);}

[cursor-type]{cursor: pointer;}

@media (max-width: 1023px){
	#cursor{display: none !important;}
} 

/* main & sub slider */
.main-about-container {overflow: initial !important;}
.main-about__item {transition: var(--trans-01);}
.main-about__item:first-child {margin-left: var(--margin);}
.main-about__item:nth-last-child(1) {margin-right: var(--margin) !important;}

@media (hover: hover) and (pointer: fine){
	.main-about__item:hover {margin-top: -40rem; box-shadow: 22rem 25rem 45rem rgba(0, 0, 0, .25);}
}