@import url("common.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200");


.header {background:transparent;}


/* ����ž */
#visual {position:relative; padding-top:250px;}
#visual br {display:none;}
#visual::after {content:''; width:516px; aspect-ratio: 516 / 505; background:url("/eng/img/subtop_ci.svg")no-repeat center / 100% auto; position:absolute; top:10%; right:0; z-index:-1;}
#visual .v_bg {position:relative; overflow:hidden; width:100%; height:500px; z-index:10;}
#visual .v_bg .bg {position:absolute; left:0; top:0; width:100%; height:100%; transform: scale(1); animation: m_vsImg 1.8s;}
#visual .v_bg.pr_v_bg .bg {background-position:center 62% !important}




@keyframes m_vsImg {
	0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}
@keyframes v_txt {
	0% { transform:translateY(60px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}





/* ��ũ�� */
/* ��ũ�� �ٿ� */
.no-scroll-view {position:absolute; bottom:0; right:0; z-index:999; width:150px; aspect-ratio: 1 / 1; background:var(--white); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:25px 0 0 0;}
.no-scroll-view::after {content:''; width:25px; aspect-ratio: 1 / 1; background:url("/eng/img/edge.svg")no-repeat center / 100% auto; position:absolute; bottom:0; left:0; transform:translateX(-100%);}
.no-scroll-view .no-scroll-inner{display: flex; align-items:center; flex-wrap:wrap; justify-content:center;}
.no-scroll-view .no-en{font-size:14px; margin:0 0 15px; display: inline-block; font-weight:700; font-family:var(--eng); color:var(--black); line-height: 171.429%; width:100%; text-align:center; }
.no-scroll-view .mouse_wrap {position:relative;}
.no-scroll-view .mouse {background: var(--white) linear-gradient(transparent 0%, transparent 50%, rgba(34,34,34,0.2) 50%, rgba(34,34,34,0.2) 100%); position: relative; width: 28px; height: 48px; box-sizing:border-box; border-radius: 100px; background-size: 100% 200%; animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite; mask: url(/eng/img/mouse_src.svg) no-repeat 50% 50%; mask-size:cover}
.no-scroll-view .mouse span{display: block; box-sizing:border-box; position: absolute; left:0; top:0; width: 100%; height: 100%; border-radius:100px;}

@keyframes colorSlide {
	0% {
		background-position: 0% 100%;
	}
	20% {
		background-position: 0% 0%;
	}
	21% {
		background-color: var(--white20);
	}
	29.99% {
		background-color: rgba(34,34,34,0.2);
		background-position: 0% 0%;
	}
	30% {
		background-color: var(--white20);
		background-position: 0% 100%;
	}
	50% {
		background-position: 0% 0%;
	}
	51% {
		background-color: var(--white20);
	}
	59% {
		background-color: rgba(34,34,34,0.2);
		background-position: 0% 0%;
	}
	60% {
		background-color: var(--white20);
		background-position: 0% 100%;
	}
	80% {
		background-position: 0% 0%;
	}
	81% {
		background-color: var(--white20);
	}
	90%, 100% {
		background-color: rgba(34,34,34,0.2);
	}
}


@keyframes nudgeMouse {
	0% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(8px);
	}
	30% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(8px);
	}
	60% {
		transform: translateY(0);
	}
	80% {
		transform: translateY(8px);
	}
	90% {
		transform: translateY(0);
	}
}

.no-scroll-view .mouse:before,
.no-scroll-view .mouse_wrap:after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
.no-scroll-view .mouse:before {width: 24px; height: 44px; background-color: var(--white20); border-radius: 100px;}
.no-scroll-view .mouse_wrap::after {background-color: var(--black); width: 6px; height: 6px; border-radius: 100%; animation: trackBallSlide 10s linear infinite;}

@keyframes trackBallSlide {

	0% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	6% {
		opacity: 1;
		transform: scale(0.9) translateY(10px);
	}
	14% {
		opacity: 0;
		transform: scale(0.4) translateY(48px);
	}
	15%, 19% {
		opacity: 0;
		transform: scale(0.4) translateY(-10px);
	}
	28%, 29.99% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	30% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	36% {
		opacity: 1;
		transform: scale(0.9) translateY(10px);
	}
	44% {
		opacity: 0;
		transform: scale(0.4) translateY(48px);
	}
	45%, 49% {
		opacity: 0;
		transform: scale(0.4) translateY(-10px);
	}
	58%, 59.99% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	60% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	66% {
		opacity: 1;
		transform: scale(0.9) translateY(10px);
	}
	74% {
		opacity: 0;
		transform: scale(0.4) translateY(48px);
	}
	75%, 79% {
		opacity: 0;
		transform: scale(0.4) translateY(-10px);
	}
	88%, 100% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
}



/* ���־� lnb */
.visual_lnb {}
.visual_lnb dl{display: flex; align-items:center; gap:0 20px;}
.visual_lnb dl dt a {display: flex; justify-content:center; align-items:center; transition:all 0.5s; font-size:0;}
.visual_lnb dl dt a svg {display:block; line-height:1;}
.visual_lnb dl dd {position:relative; display:flex; flex-wrap:wrap; align-items:center; }
.visual_lnb dl dd .txt {position: relative; font-size: 14px; font-weight: 400; line-height: 171.429%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; padding-right:25px;}
.visual_lnb dl dd .txt:after{content:'\e5c5'; box-sizing:border-box; position: absolute; right:0; top:50%; transition:all .3s linear;  font-size:20px; display:block; line-height:1; font-family:var(--icon); color:var(--black); margin-top:-10px; font-weight:400;}
.visual_lnb dl dd .txt.on:after{transform:rotate(180deg);}
.visual_lnb dl dd .dlst{position: absolute; left:-10px; top:30px; z-index: 999; margin: 10px 0 0; width: 150px; background-color: var(--white); padding: 10px 15px; box-sizing:border-box; display: none; box-shadow:5px 5px 15px rgba(0,0,0,0.05);}
.visual_lnb dl dd .dlst.on{display: block;}
.visual_lnb dl dd .dlst ul{}
.visual_lnb dl dd .dlst ul li{padding: 0 0 10px;}
.visual_lnb dl dd .dlst ul li:last-child{padding: 0;}
.visual_lnb dl dd .dlst ul li a{font-size: 0.844rem; font-weight: 400; line-height: 155%; letter-spacing: var(--letter-spacing-button); display:block;}
.visual_lnb dl dd .dlst ul li a.on{color:var(--main);}
.search_none .visual_lnb dl dd:last-child{display: none;}
.visual_lnb dl dd:last-of-type .txt {color:var(--main); font-weight:600;}




/* ����� lnb */
.mobile_snb {display:none;}

#contents {overflow:hidden;}

.sub_titbox {margin-bottom:50px; text-align:center;}
.sub_titbox .fs40 {line-height: 125%;}
.sub_titbox .fs18 {margin-top:20px;}


/* Ÿ��Ʋ */
#subtitle {margin:25px 0 50px;}

.subpad {padding:150px 0;}
.subpad_t {padding:150px 0 0;}
.subpad_b {padding:0 0 150px;}

.dots {position:relative; padding-left:10px; box-sizing:border-box; line-height: 144.444%;}
.dots+.dots {margin:5px 0 0;}
.dots::before {content:''; width:3px; aspect-ratio: 1 / 1; border-radius:100%; background:var(--black); position:absolute; top:12px; left:0;}


/*** ���� css ***/
.basic_cont{max-width:1560px; width: 90%; margin:0 auto 150px;}




.grid4 {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:32px;}

.grid2 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:30px;}
.grid2 img {max-width:100%;}

.sub_prd_list.grid2 dl dt {aspect-ratio: 765 / 417;}

.sub_prd_list {}
.sub_prd_list dl {text-align:center;}
.sub_prd_list dl dt {overflow: hidden; aspect-ratio: 3 / 3;}
.sub_prd_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
.sub_prd_list dl dd {padding:15px 0 0;}
.sub_prd_list dl dd .fs18 {color: var(--black); font-weight: 600;}
.sub_prd_list dl dd .fs16 {}

.strategy_wrap {overflow:hidden;}
.strategy_list {perspective: 1000px;}
.strategy_list dl {display:flex; flex-wrap:wrap; align-items:center; padding:40px; box-sizing:border-box; gap:0 60px; background:var(--white); will-change: transform, opacity, filter; transition: transform 0.1s ease-out, opacity 0.1s ease-out, filter 0.1s ease-out;}
.strategy_list dl+dl {margin-top:20px;}
.strategy_list dl dt {max-width:540px; width:40%;}
.strategy_list dl dt img {width:100%;}
.strategy_list dl dd {flex:1;}
.strategy_list dl dd .fs24 {margin:0 0 10px;}
.strategy_list dl dd .moreBtn {margin:50px 0 0;}

.upcycle_wrap .strategy_list dl {background:var(--grayBg);}



.responsive-dim{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);z-index: 100; display:none;}
.responsive-dim .stock-scroll-drag-guide{position: absolute;top: 50%; left: 0;right: 0; text-align: center; transform: translate(0,-50%);}
.sanctions_box .img_box img {max-width:100%;}

.stock-scroll-drag-guide {display:flex; justify-content:center;}
	.stock-scroll-drag-guide .stock-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.stock-scroll-drag-guide .stock-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:rgba(255,255,255,0.5); content:""; border-radius:5px;}
	.stock-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:stock-drag-hand 3s both infinite; }
	.stock-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color:#fff; border-radius:5px; opacity:1; }
	.stock-scroll-drag-guide .drag-tail .hand-icon{margin-top: 5px; display: block;}
	@keyframes stock-drag-hand {
		0% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		10% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
	



/* �̿���, ����������޹�ħ */
.policy_cont{position:relative; overflow:hidden; font-size:1rem;}
.policy_cont br{display:block;}
.policy_cont strong{font-weight:500; color:var(--black);}
.policy_cont .cont_title{font-size:1.412rem; color:var(--black); padding-bottom:18px; font-weight:500;}
.policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--black) !important;}
.policy_cont .cont_txt {padding:0px 0px 35px 0;}
.policy_cont .cont_txt2 {padding-bottom:35px;}
.policy_cont .cont_box {padding:25px; background:var(--grayBg); margin:7px 0px 10px 0px; display:block;  line-height:1.7;}

.privacy_list {width:91%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px solid var(--border); margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%; padding: 0 20px 1%; box-sizing: border-box;}
.privacy_list li a {font-weight:500; color:var(--black);} 






/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1500px){






}
/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){







}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* ����ž */
#visual {padding-top:150px;}
#visual::after {width:50%; top:10%; right:0;}

/* ���־� lnb */




#contents {}

/* Ÿ��Ʋ */
#subtitle {}

/*** ���� css ***/
.basic_cont{margin:0 auto 120px;}


.subpad {padding:120px 0;}
.subpad_t {padding:120px 0 0;}
.subpad_b {padding:0 0 120px;}

.dots::before {top:10px;}

.grid4 {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:28px;}

.strategy_list dl {gap:30px; padding:20px; align-items:flex-start;}



/* �̿���, ����������޹�ħ */
.policy_cont{}
.policy_cont p.cont_tit {font-size:1.2em !important; padding-bottom:5px;}
.policy_cont .cont_txt {padding:0px 0px 25px 0; }
.policy_cont .cont_txt2 {padding-bottom:25px;}
.policy_cont .cont_box {padding:18px 18px; }

.privacy_list {margin-bottom:30px;}
.privacy_list li {width:100%;  padding: 0 0 1%;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* ����ž */
#visual {padding-top:66px;}
#visual::after {width:200px; top:100px;}
#visual .basic_in {width:100%;}
#visual .v_bg {height:220px;}

/* ���־� lnb */
.visual_lnb dl {position:relative; gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.visual_lnb dl::before {content:''; width:1px; height:100%; background:var(--border); position:absolute; top:0; left:50%;}
.visual_lnb dl dt {display:none;}
.visual_lnb dl dd {flex:1;}
.visual_lnb dl dd .txt {width:100%; padding:10px 5%; box-sizing:border-box; padding-right:15%;}
.visual_lnb dl dd .txt:after {right:5%;}
.visual_lnb dl dd .dlst {left:0; top:44px; border:1px solid var(--border); width:100%; margin:0;}


#contents {margin:0 auto;}

/* Ÿ��Ʋ */
#subtitle {margin:50px 0 30px; padding:0 5%; box-sizing:border-box;}



.no-scroll-view {width:80px; border-radius:15px 0 0 0;}
.no-scroll-view::after {width:15px;}
.no-scroll-view .no-en {font-size:11px; margin:0 0 5px;}
.no-scroll-view .mouse {width:20px; height:35px;}
.no-scroll-view .mouse_wrap::after {width: 4px; height: 4px;}

@keyframes trackBallSlide {

	0% {
		opacity: 1;
		transform: scale(1) translateY(-5px);
	}
	6% {
		opacity: 1;
		transform: scale(0.9) translateY(5px);
	}
	14% {
		opacity: 0;
		transform: scale(0.4) translateY(30px);
	}
	15%, 19% {
		opacity: 0;
		transform: scale(0.4) translateY(-5px);
	}
	28%, 29.99% {
		opacity: 1;
		transform: scale(1) translateY(-5px);
	}
	30% {
		opacity: 1;
		transform: scale(1) translateY(-5px);
	}
	36% {
		opacity: 1;
		transform: scale(0.9) translateY(5px);
	}
	44% {
		opacity: 0;
		transform: scale(0.4) translateY(30px);
	}
	45%, 49% {
		opacity: 0;
		transform: scale(0.4) translateY(-5px);
	}
	58%, 59.99% {
		opacity: 1;
		transform: scale(1) translateY(-5px);
	}
	60% {
		opacity: 1;
		transform: scale(1) translateY(-5px);
	}
	66% {
		opacity: 1;
		transform: scale(0.9) translateY(5px);
	}
	74% {
		opacity: 0;
		transform: scale(0.4) translateY(30px);
	}
	75%, 79% {
		opacity: 0;
		transform: scale(0.4) translateY(-5px);
	}
	88%, 100% {
		opacity: 1;
		transform: scale(1) translateY(-5px);
	}
}


/*** ���� css ***/
.basic_cont{margin:0 auto 80px;}

.subpad {padding:70px 0;}
.subpad_t {padding:70px 0 0;}
.subpad_b {padding:0 0 70px;}

.dots::before {top:8px;}

.sub_titbox {margin-bottom:30px;}


.grid4 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:20px 15px;}

.grid2 {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap:15px;}

.sub_prd_list dl dd {padding:10px 0 0;}

.strategy_list dl {padding:15px; display:block;}
.strategy_list dl dt {max-width:100%; width:100%; margin:0 0 20px;}
.strategy_list dl dd .moreBtn {margin:25px 0 0;}

 .sanctions_box{position: relative; overflow-y: hidden; overflow-x: auto;}
 .sanctions_box .responsive-dim.show{display: block;}
 .sanctions_box .img_box{width: 860px;}


}