@charset "utf-8";

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

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #E21919;
	--c-02: #0041A0;
	--b-01: #1a1a1a;
    --b-02: #464646;
	--f-01: #fff;
	--g-01: #BAB8B6;
	/* --g-02: #848484; */

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

	--bg-01 : #0E1623;

	--gr-01: linear-gradient(180deg, #0950B0 6%, #052C5C 100%);
	--gr-02: linear-gradient(180deg, #F54949 0%, #E21919 100%);
	--gr-03: linear-gradient(96deg, #181818 0.49%, #2F2F2F 99.51%);
	
	--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 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-04:all 0.5s ease;
	
	--lang-en:'Barlow';
	--lang-ko:"Pretendard";

	--font-size-138:138rem;
	--font-size-120:120rem;
	--font-size-76:76rem;
	--font-size-60:60rem;
	--font-size-56:56rem;
    --font-size-42:42rem;
	--font-size-26:26rem;
	--font-size-25:25rem;
	--font-size-20:20rem;
	--font-size-16:16rem;
	--font-size-15:15rem;
	--font-size-14:14rem;
	--font-size-12:12rem;
}

.font-tp--00 {letter-spacing: 7rem; font-size:var(--font-size-20); font-weight: 700;  text-transform: uppercase;}
.font-tp--01 {font-size:var(--font-size-120); line-height: 1.18; font-weight: 700; color: var(--b-01);}
.font-tp--02 {font-size:var(--font-size-76); line-height: 1.2; font-weight: 700; color: var(--b-01); text-transform: uppercase;}
.font-tp--03 {font-size:var(--font-size-56); line-height: 1.3; font-weight: 700;}
.font-tp--04{font-size: var(--font-size-42); line-height: 1.35; font-weight: 700;}
.font-tp--05 {font-size:var(--font-size-20); line-height: 1.3; font-weight: 700;}
.font-tp--06 {font-size:var(--font-size-26); line-height: 1.4; font-weight: 700;}


[data-color="white"] .is_moved .font-tp--00,
[data-color="white"] .font-tp--00  {opacity: .5 !important;}


@media all and (max-width:1200px){
	:root {
		--font-size-76: 65rem;
		 --font-size-20: 17rem;
	}
}

@media all and (max-width:1023px){
	:root {
		--font-size-120: 80rem;
		--font-size-76: 47rem;
		--font-size-60: 40rem;
        --font-size-42:38rem;
		--font-size-56: 36rem;
		--font-size-26: 21rem;
		--font-size-25: 20rem;
		--font-size-20: 16rem;
		--font-size-16: 15rem;
		--font-size-15:15rem;
		--font-size-14:14rem;
		--font-size-12:12rem;
	}
}

@media (max-width:860px){
	:root {
        --font-size-42: 30rem;
        /* --lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif; */
	}
}

@media (max-width: 540px){
	:root {
		--font-size-120:50rem;
		--font-size-76: 30rem;
		--font-size-60: 27rem;
		--font-size-56: 26rem;
		--font-size-42: 23rem;
		--font-size-26: 18rem;
		--font-size-25: 20rem;
		--font-size-20: 15rem;
		--font-size-16: 15rem;
		--font-size-15: 14rem;
		--font-size-14: 14rem;
		--font-size-12: 13rem;
	}

    .font-tp--00{letter-spacing: 4rem;}
}

/* **************************************** *
 * wrapper
 * **************************************** */
 *[class^="wrap"]{position:relative;margin:0 auto;}

 .wrap{max-width: 1520rem;}
 .wrap-wide{margin: 0 90rem;}
 .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;}
 }

/* **************************************** *
 * component set
 * **************************************** */
 /* 컬러 기본 셋 */
[data-color="1"]{color:var(--c-01) !important;}
[data-color="2"]{color:var(--c-02) !important;}
[data-color="3"]{color:var(--c-03) !important;}
[data-bg="1"]{background-color: var(--bg-01) !important;}
[data-bg="2"]{background-color: var(--c-02) !important;}
[data-color="white"],
[data-color="white"] *{color: var(--f-01);} /* 영역만 글자 흰색 */

/* boarder 값 기본 셋 */
[data-border]{border:1px solid;}
[data-radius]{overflow:hidden;}
[data-radius="10"]{border-radius:max(0.5208vw, 5rem);}
[data-radius="20"]{border-radius:max(1.0417vw, 10rem);}

 /* **************************************** *
 * swiper set
 * **************************************** */
 .swiper-controls .wrap *{cursor:pointer;}
 .swiper-container img{width:100%;     object-fit: contain;}
 .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: 14rem;}
 .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(90deg);}
 .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;}
.bg-line {position: absolute;left: 50%;top: 0;display: none;justify-content: space-between;width: 1520rem;height: 100%;transform: translateX(-50%);z-index: -3;}
.bg-line li {width: 1px; height: 100%; background: var(--br-01);}
[data-bg] .bg-line li {opacity: .05; background: var(--f-01);}

/* scrolldown */
.scroll-down {display: inline-block; text-align: center;}
.scroll-down i {display: block; width: 15rem; margin: 0 auto;}
.scroll-down i span { display: block; width: 100%; height: 10rem; margin: -1px 0; background: url(../img/layout/ic-scrolldown.svg) no-repeat center / contain;animation: scroll 1s infinite alternate;}
.scroll-down i span:nth-child(2) {animation-delay:.1s;}
.scroll-down i span:nth-child(2) {animation-delay:.2s;}
.scroll-down i span:nth-child(3) {animation-delay:.3s;}
.scroll-down p {margin-top: 8rem; font-size: 12rem; font-weight: 700; color: var(--b-01);}

/* keyframe */
@keyframes scroll {
	0% {opacity: 0;} 
    100% {opacity: 1;}
}

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

@media all and (max-width:1680px){
	.bg-line {width: 100%;}
	.bg-line li:first-child,
	.bg-line li:last-child {background:transparent !important;}

}

/* button common */
*.btn-circle {position: relative; display: inline-flex; align-items: center; justify-content: center; width: 158rem; height: 158rem; font-weight: 800; color: var(--f-01); border-radius: 100%; background:var(--gr-02);}
*.btn-circle.play {width: auto; height: auto; padding: 85rem; background: transparent;}
*.btn-circle.play::before {backdrop-filter: blur(10rem); position: absolute; left: 0; top: 0; content:''; width: 100%; height: 100%; border-radius: 100%; background: rgba(96, 96, 96, .09); animation:motion-scale 1.2s infinite alternate; transition: var(--trans-01);}
*.btn-circle.play span {position: relative; width: 150rem; height: 150rem; font-size: 0; border-radius: 100%; background-size: 30rem; background-color: var(--f-01); background-repeat: no-repeat; background-position:left 52% center; background-image: url(../img/layout/ic-play.svg); transition: var(--trans-01);}
*.btn-basic{position:relative;display: inline-block;min-width:170rem;padding: 17rem 35rem;text-align: center;font-weight: 700;font-size:15rem;color:var(--f-01);background:var(--gr-01);border-radius: 100rem;transition: var(--trans-01);box-sizing:border-box;}

/* keyframe */
@keyframes btnHover01 {
	0% {box-shadow: 0 0 0 0 var(--c-01);}
	70% {box-shadow: 0 0 0 20rem rgb(226 25 25 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(226 25 25 / 0%);}
}

@keyframes btnHover02 {
	0% {box-shadow: 0 0 0 0 var(--c-02);}
	70% {box-shadow: 0 0 0 10rem rgb(0 65 160 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(0 65 160 / 0%);}
}

@media (hover: hover) and (pointer: fine){
	*.btn-circle:hover {-webkit-animation: btnHover01 1.2s infinite; animation: btnHover01 1.2s infinite;}
	*.btn-circle.play:hover {animation: none;}
	*.btn-circle.play:hover::before {background: rgba(96, 96, 96, .18);}
	*.btn-circle.play:hover span {background-color: var(--c-01); background-image: url(../img/layout/ic-play_w.svg);}
	*.btn-basic:hover {-webkit-animation: btnHover02 1.2s infinite; animation: btnHover02 1.2s infinite;}
}

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

@media (max-width: 540px){
	*.btn-circle {width: 105rem; height: 105rem; font-size: 13rem; font-weight: 700;}
	*.btn-basic{padding:19rem 20rem;font-size:14rem;display: flex;justify-content: center}

	@keyframes btnHover01 {
		0% {box-shadow: 0 0 0 0 var(--c-01);}
		70% {box-shadow: 0 0 0 10rem rgb(226 25 25 / 0%);}
		100% {box-shadow: 0 0 0 0 rgb(226 25 25 / 0%);}
	}
	
	@keyframes btnHover02 {
		0% {box-shadow: 0 0 0 0 var(--c-02);}
		70% {box-shadow: 0 0 0 5rem rgb(0 65 160 / 0%);}
		100% {box-shadow: 0 0 0 0 rgb(0 65 160 / 0%);}
	}
}