@charset "utf-8";

/* 공통 */
/* :root {
	--c-01:#F53E3E;
    --b-01:#282828;
	--p-01: #909090;
	--f-01: #fff;
	--g-01: #eee;
	--g-02: #aaa;
	
    --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:'Play';
    --lang-ko:"Pretendard";

	--font-18:18rem;  
    --font-21:21rem;
    --font-23:23rem;  
} */

.view-more {color: #282828; font-size: var(--font-20); font-family:var(--lang-en); font-weight: 700; transition: .3s;}
.view-more:hover {color: var(--c-01);} 


/* news */
.main-news {position:relative;padding: 110rem 0 160rem; background: #fff; border-radius: 0 0 100rem 100rem;}
.main-news:before{content:''; z-index:-1; position:absolute; left:0; bottom:0; display:block; width:100%; height:100%; background:#282828;}
.main-news:before{content:''; z-index:-1; position:absolute; left:0; bottom:0; display:block; width:100%; height:100%; background:#282828;}
.main-news .main-news__title{text-align:center;}
.main-news .main-news__title h3 {margin-top:11rem;  color: #282828; text-transform: capitalize;}
.main-news .main-news__title span{color:#ccc; font-size:20rem; font-weight:bold;}
.main-news .view-more {display: flex; justify-content: flex-end; align-items: center; margin-top:26rem;}
.main-news .view-more i{position:relative; display:inline-block; margin-left:15rem; width:10rem; height:10rem; }
.main-news .view-more i:before{content:''; position:absolute; display:block; width:10rem; height:2rem; left:50%; top:50%; background:#bebebe; transform:translate(-50%, -50%)}
.main-news .view-more i:after{content:''; position:absolute; display:block; width:2rem; height:10rem;  left:50%;  top:50%; background:#bebebe;transform:translate(-50%, -50%)}

.main-news__board .colum-slider{margin-left:265rem;}
.main-news__board li {padding: 40rem 0 0 0;}
.main-news__board li:not(:last-child){border-bottom:0}
.main-news__board a {justify-content: space-between;transition:0.5s;display: block;width: 100%;}
.main-news__board .link-button {flex-shrink: 0; margin: auto 0 40rem;}
.main-news__board .link-button * {stroke: #d6d6d6;}
.main-news__board .gallery-list__wrap{}
.main-news__image {overflow: hidden;position: relative;flex-shrink: 0;width: 100%;height: 200rem;border-radius: 20rem 20rem 0 0;background: #fff;border: 1px solid #e9e9e9;}
.main-news__image img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: .3s;}
.main-news__image:not(:has(img))::after {position: absolute; left: 50%; top: 50%; content: ''; width: 150rem; height: 60rem; background: url(../img/layout/logo.svg) no-repeat center / cover; transform: translate(-50%, -50%);}
.main-news__text {display: flex;flex-direction: column;justify-content: flex-end;background:#f8f8f8;padding: 35rem 30rem; border-radius: 0 0 20rem 20rem;}
.main-news__text * {}
.main-news__text .date {font-size:12rem;color: #9f9f9f;}
.main-news__text strong {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size: 18rem; font-weight: 800; color:#282828;}
.main-news__text p {overflow: hidden; margin:8rem 0 18rem 0; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size: 16rem; color: #464646;}
.main-news__board a:hover .link-button {background-color: var(--c-01); border-color: var(--c-01);}
.main-news__board a:hover .link-button * {stroke: #fff !important;}
.main-news__board a:hover .main-news__image img {transform: scale(1.1);}
.main-news__board a:hover .main-news__text strong{text-decoration:underline}
.main-news__board a:hover{margin-top:-30rem; transition:0.5s}
.main-news__board .empty_li {padding: 100rem 0; text-align: center; font-family: var(--lang-ko); font-weight: 500;}

.main-news__board .swiper-pagination{display:none !important; width:calc(100% - 80rem); display: flex; justify-content: center;}
.main-news__board .swiper-pagination-bullet{background: #f0f0f0; opacity: 1;border-radius: 100%; width:10rem; height:10rem}
.main-news__board .swiper-pagination-bullet-active{background: var(--c-01); }
.main-news__board .swiper-pagination-bullet + .swiper-pagination-bullet{ margin-left: 10rem;}
.main-news__board .swiper-pagination-bullet-active{width:10rem; height:10rem;}

@media all and (max-width:1680px){
	.main-news__board .colum-slider{margin-left:165rem}
}


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

}

@media all and (max-width:1023px){
	.main-news__board .colum-slider{margin-left:0; padding:0 40rem}
	.main-news__board .swiper-pagination{display:block !important; margin-top:30rem;}
	.main-news__board a:hover{margin-top:0}
	.main-news .main-news__title span{font-size:16rem}

	.main-news{border-radius:0 0 80rem 80rem;}

}

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

@media all and (max-width:540px){
	
	.main-news{border-radius:0 0 30rem 30rem;padding: 60rem 0 100rem;border-top: 2rem solid #f3f3f3;margin-top: 60rem;}
	.main-news .main-news__title{padding-left:20rem; text-align:left;}
	.main-news .main-news__title span{font-size:13rem}
	.main-news .main-news__title h3{margin-top:6rem}
	.main-news .view-more{font-size:13rem;}
	.main-news__image{height:150rem; border-radius:10rem 10rem 0 0;}
	.main-news__image:not(:has(img))::after{width:60rem; height:24rem;}
	.main-news__text{padding: 25rem 15rem; border-radius:0 0 10rem 10rem;}
	.main-news__text strong{font-size:16rem;}
	.main-news__text p{margin: 5rem 0 10rem 0; font-size:14rem;}
	.main-news__board .colum-slider{padding:0 20rem;}
	.main-news__board .swiper-pagination{width: calc(100% - 40rem);}
	.main-news__board li{padding-top:20rem;}
	.main-news .view-more{margin-top:16rem;}
}



/* news */
.main-customer {position: relative;}
.main-customer__title > span {display: block; font-family: var(--lang-en); font-weight: 700;}
.main-customer__grobal {position: relative}
.main-customer__grobal img {width: 100%; max-width:100%;}
.main-customer__grobal img.grobal-pc{display:block;}
.main-customer__grobal img.grobal-mobile{display:none;}
.main-customer__dot {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
[data-dot] {position: absolute; display:flex; flex-direction: row-reverse; align-items: center; font-size: 16rem; font-weight: 700; color: var(--f-01); text-transform: uppercase;}
[data-dot] em {margin:15rem 10rem;font-family: var(--lang-ko); font-size:20rem}
[data-dot] i {position: relative;width:16rem;height: 16rem;border-radius: 100%;background:#e12424;z-index: 2;}

[data-dot] i::after {position: absolute;left: 50%;top: 50%;content:'';aspect-ratio: 1/1;border-radius: 100%;background: #e12424;transform: translate(-50%, -50%);animation:motion 3s ease-in infinite 1s;z-index: 1;}
[data-dot] i::before {position: absolute;left: 50%;top: 50%;content:'';aspect-ratio: 1/1;border-radius: 100%;background: #e12424;transform: translate(-50%, -50%);animation:motion 3s ease-in infinite 0s;z-index: 1;}

[data-dot="04"] i::after {animation:motion2 3s ease-in infinite 1s;z-index: 1;}
[data-dot="04"] i::before {animation:motion2 3s ease-in infinite 0s;z-index: 1;}


[data-dot="04"],
[data-dot="09"],
[data-dot="10"]{flex-direction: column;}
[data-dot="01"],
[data-dot="02"],
[data-dot="03"],
[data-dot="05"],
[data-dot="06"],

[data-dot="11"],
[data-dot="12"],
[data-dot="13"],
[data-dot="14"]{flex-direction: column-reverse;}

[data-dot="07"],
[data-dot="08"]{flex-direction: row;}

[data-dot="04"] em {}
[data-dot="08"] em {position: absolute; left: -15rem; bottom: 0; margin: 0; transform: translateX(-100%);}
 
[data-dot="01"] {right: 38.5%;top: 46.5%;}
[data-dot="02"] {right: 32%;top: 52%;}
[data-dot="03"] {right: 20%;top: 59%;}
[data-dot="04"] {right: 14%;top: 60%;}
[data-dot="05"] {right: 12%;top: 70.5%;}
[data-dot="06"] {right: 16.5%;top: 69.65%;}
[data-dot="07"] {right: 22%;top: 67%;}
[data-dot="08"] {right: 22%;top: 73%;}
[data-dot="09"] {left: 30%; top: 62%;}
[data-dot="10"] {left: 36.5%;top: 54%;}
[data-dot="11"] {left: 36%;top: 63%;}
[data-dot="12"] {left: 29%;top: 69%;}
[data-dot="13"] {left: 39.5%; top: 60%;}
[data-dot="14"] {left: 53%; top: 44%;}

@keyframes motion{
	0%{
		opacity:0.1;
		width:10rem;height:10rem;
	}
	50%{
		opacity:0.3;
	}
	100%{
		opacity:0;
		width:70rem;height:70rem;
	}
}

@keyframes motion2{
	0%{
		opacity:0.1;
		width:10rem;height:10rem;
	}
	50%{
		opacity:0.3;
	}
	100%{
		opacity:0;
		width:110rem;height:110rem;
	}
}

[data-dot="04"] i{width:32rem; height:32rem;}

.main-customer__total {position: absolute; right: 15%; bottom: 150rem; color: var(--f-01);}
.main-customer__total * {font-family: var(--lang-en);}
.main-customer__total p {display: block; margin-bottom: 10rem; font-size: 18rem; font-weight: 700; text-transform: uppercase;}
.main-customer__total [data-flex] {align-items: flex-end; font-weight: 700; line-height: 1;} 
.main-customer__total strong {letter-spacing: -3rem; color:var(--c-01); font-size: 105rem; font-family: var(--lang-en); font-weight: 700;}
.main-customer__total span {margin-bottom: 10rem; font-size: 32rem; font-weight: 700;}

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

}

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

	[data-dot] em{display:none; font-size:16rem}
	[data-dot] i{width:9rem; height:9rem;}
}

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

@media all and (max-width:540px){
	[data-dot] i {
		width: 7rem;
		height: 7rem;
	}
	@keyframes motion{
		0%{
			opacity:0.1;
			width:10rem;height:10rem;
		}
		50%{
			opacity:0.2;
		}
		100%{
			opacity:0;
			width:40rem;height:40rem;
		}
	}
@keyframes motion2{
	0%{
		opacity:0.1;
		width:10rem;height:10rem;
	}
	50%{
		opacity:0.3;
	}
	100%{
		opacity:0;
		width:70rem;height:70rem;
	}
}

}