:root{
	--btnH: 50px;
}

/* common */
#main{ overflow: hidden; }
h4{ font-size: 46px; font-weight: 400; color: #151515; letter-spacing: -0.02em; }

/* colorClip */
.colorClip{ color: transparent !important; background: linear-gradient(to right, var(--mainColor) 0 50%, #333 50% 100%); background-clip: text; -webkit-background-clip: text; background-size: 200% 100%; background-position: 100% 0; transition: background-position 0.5s 1s; }

.aos-animate .colorClip{ background-position: 0 0; }

/* btns */
.btns{ display: flex; }
.btns > *:not(:last-child){ margin-right: 12px; }
.btns button{ width: var(--btnH); height: var(--btnH); background: transparent; border: 1px solid #FFF; border-radius: 50%; padding: 0; transition: background 0.3s; }
.btns button svg{ width: auto; height: auto; }
.btns button svg path{ transition: stroke 0.3s; }

@media screen and (hover: hover){
	.btns button:hover{ background: #FFF; }
	.btns button:hover svg path{ stroke: var(--navy); }  
}


/* viewmore */
.viewmore{
	--icon: 20px;
	--gap: 10px;
}
.viewmore{ max-width: max-content; display: flex; align-items: center; font-size: 16px; font-weight: 400; color: #151515; letter-spacing: -0.02em; line-height: 1; padding: 12px 20px; position: relative; z-index: 10; }
.viewmore:active,
.viewmore:hover,
.viewmore:link,
.viewmore:visited{ color: #151515; }
.viewmore::before{ content: ""; width: calc(100% - var(--icon) - var(--gap)); height: 100%; background: var(--skyblue); border-radius: 999px; position: absolute; top: 0; left: 0; z-index: -1; transition: width 0.4s; box-sizing: border-box; }
.viewmore span{ display: inline-block; }
.viewmore i{ display: inline-block; width: calc(var(--icon) + var(--gap)); height: var(--icon); background: url("/img/main/viewmore.svg") no-repeat center right / contain; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transition: clip-path 0.4s; }

.viewmore.white{ color: #FFF; }
.viewmore.white:active,
.viewmore.white:hover,
.viewmore.white:link,
.viewmore.white:visited{ color: #FFF; }
.viewmore.white::before{ background: transparent; border: 1px solid #FFF; }
.viewmore.white i{ filter: invert(1) brightness(5); -webkit-filter: invert(1) brightness(5); }

@media screen and (hover: hover){
	.viewmore:hover::before{ width: 100%; }
	.viewmore:hover i{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
}

@media screen and (max-width: 1700px){
	/* common */
	h4{ font-size: 40px; }

	/* viewmore */
	.viewmore{ padding: 10px 15px; }
}

@media screen and (max-width: 1280px){
	:root{
		--btnH: 45px;
	}
	
	/* common */
	h4{ font-size: 30px; }	
	
	/* viewmore */
	.viewmore{
		--icon: 17px;
		--gap: 5px;
	}
	.viewmore{ font-size: 15px; padding: 8px 12px; }
}

@media screen and (max-width: 900px){
	/* common */
	h4{ font-size: 24px; }
}


/* visual */
#visual{ height: var(--vh); padding-top: calc(var(--headerH) + var(--contentG)); }
#visual *{ color: #FFF; }
#visual .padding{ padding: var(--contentG); }
#visual .padding,
#visual .padding > div,
#visual .slick-slider,
#visual .slick-list,
#visual .slick-track,
#visual .slick-wrapper,
#visual .slick-slide{ height: 100%; }

#visual .padding > div{ position: relative; }
#visual .visual{ position: relative; border-radius: var(--contentR); overflow: hidden; }
#visual .visual::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to right, #000, transparent); opacity: 0.25; position: absolute; top: 0; left: 0; z-index: 10; }
#visual .visual video{ 
	pointer-events:none;
	z-index:1;
	width:100vw;
	height:60vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height:110vh;
	min-width:177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
#visual .text-box{ padding-bottom: 150px; position: absolute; bottom: 0; left: 0; right: 0; }
#visual .text-box ul li:not(.active){ position: absolute; bottom: 0; left: 0; opacity: 0; pointer-events: none; }
#visual .text-box h2{ font-size: 8rem; font-weight: 400; letter-spacing: -0.03em; }
#visual .btns{ margin-bottom: 45px; }

#visual .text-box ul li.active h2{ animation: textClip 1s 0.3s both; }

#visual .scrolldown{ display: flex; align-items: center; font-size: 20px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; position: absolute; bottom: 40px; right: 40px; }
#visual .scrolldown span{ margin-right: 8px; }
#visual .scrolldown i{ width: 20px; height: 20px; display: inline-block; overflow: hidden; position: relative; }
#visual .scrolldown i::before,
#visual .scrolldown i::after{ content: ""; width: 100%; height: 100%; background: url("/img/main/scrolldown.svg") no-repeat center center / contain; }
#visual .scrolldown i::before{ display: inline-block; position: relative; animation: scrollDown1 2s infinite; }
#visual .scrolldown i::after{ position: absolute; top: 0; left: 0; transform: translateY(-100%); animation: scrollDown2 2s infinite; }

@media (hover: hover) and (pointer: fine) {
	#visual{ height: 100vh; }
}

@media screen and (max-width: 1700px){
	#visual .btns{ margin-bottom: 30px; }
	#visual .text-box{ padding-bottom: 120px; }

	#visual .scrolldown{ font-size: 18px; }
} 

@media screen and (max-width: 1280px){
	#visual .btns{ margin-bottom: 20px; }
	#visual .text-box{ padding-bottom: 100px; }
	
	#visual .scrolldown{ font-size: 16px; bottom: 25px; right: 25px; }
	#visual .scrolldown i{ width: 18px; height: 18px; }
} 

@media screen and (max-width: 900px){
	#visual .text-box h2{ font-size: 7rem; }
}


/* service */
#service h3{ font-size: 5.4rem; font-weight: 400; color: #333; letter-spacing: -0.02em; line-height: 1.6; text-align: center; padding: 115px 0 125px; }
#service .title{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; }
#service h5{ font-size: 36px; font-weight: 400; color: #353535; letter-spacing: -0.02em; }

#service .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -5px; }
#service .grid-box > div{ margin: 5px; position: relative; border-radius: var(--contentR); overflow: hidden; }
#service .grid-box > div::before{ content: ""; display: block; }
#service .grid-box .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#service .grid-box .bg img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.4s; }
#service .text{ display: flex; flex-direction: column; justify-content: flex-end; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; color: #FFF; }
#service .text h4{ color: #FFF; }

#service .item{ padding-bottom: 77%; }
#service .item .text{ padding: 35px; }
#service .item .text span{ display: block; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 20px; }

#service .block{ grid-column: auto / span 2; padding-bottom: 46%; }
#service .block .text{ padding: 80px 100px; }
#service .block .text a{ margin-top: 40px; }

@media screen and (hover: hover){
	#service .item:hover .bg img{ transform: scale(1.05); }
}

@media screen and (max-width: 1700px){
	#service h3{ padding: 95px 0 100px; }
	#service .title{ margin-bottom: 40px; }
	#service h5{ font-size: 30px; }
	
	#service .item .text span{ font-size: 18px; }
	
	#service .block .text{ padding: 50px; }
	#service .block .text a{ margin-top: 30px; }
}

@media screen and (max-width: 1280px){
	#service h3{ padding: 60px 0 80px; }
	#service .title{ margin-bottom: 20px; }
	#service h5{ font-size: 26px; }
	
	#service .item .text{ padding: 20px; }
	#service .item .text span{ font-size: 16px; margin-bottom: 10px; }
	
	#service .block .text{ padding: 25px; }
	#service .block .text a{ margin-top: 20px; }
}

@media screen and (max-width: 750px){
	#service .grid-box{ grid-template-columns: repeat(1, 1fr); }
	#service .grid-box > div{ padding: 0; }
	#service .text{ position: relative; padding-top: 100px !important; }
	#service .block{ grid-column: auto / span 1; }
}

@media screen and (max-width: 600px){
	#service h3 br{ display: none; }
	#service h5{ font-size: 22px; }
}



/* financial */
#financial{ background: url("/img/main/financial_bg.jpg") no-repeat bottom center / contain; padding: 160px 0 240px; overflow: hidden; }
#financial h4{ margin-bottom: 80px; }

#financial .financial-wrap .slick-list{ margin-right: -10px; overflow: visible; }
#financial .financial{ position: relative; z-index: 10; margin-right: 10px; transform: translateY(var(--aosPlus)); }
#financial .financial.aos-animate{ transform: translate(0, 0) !important; }
#financial .financial::before{ content: ""; display: block; padding-bottom: 79%; }
#financial .financial a{ display: block; }
#financial .financial a > div{ width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; }
#financial .financial .bg img{ width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--contentR) + 2px); }

#financial .financial .text{ display: flex; flex-direction: column; background: #F5F5F5; border-radius: var(--contentR); padding: 50px; transition: background 0.5s; }
#financial .financial .text .top{ flex: 1 0 auto; }
#financial .financial .text span{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: #000; border-radius: 50%; font-size: 16px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; line-height: 1; transition: background 0.5s, color 0.5s; }
#financial .financial .text h6{ font-size: 30px; font-weight: 400; color: #353535; letter-spacing: -0.02em; line-height: 1.4; margin: 60px 0 20px; transition: color 0.5s; }
#financial .financial .text i::before{ content: ""; display: inline-block; width: 40px; height: 40px; background: url("/img/main/big_arrow.svg") no-repeat center center / contain; filter: unset; -webkit-filter: unset; transition: filter 0.5s; }

#financial .slide-info{ display: none; margin-top: 20px; }
#financial .slide-info .flex-box{ display: flex; align-items: center; }
#financial .slide-info .bar{ flex: 1 0 auto; height: 3px; background: #EFEFEF; }
#financial .slide-info .bar div{ width: 0; height: 100%; background: #333; }
#financial .slide-info .btns{ margin-left: 20px; }
#financial .slide-info .btns button{ border-color: #333; }
#financial .slide-info .btns button svg path{ stroke: #333; }
#financial .slide-info .btns button:not(:last-of-type){ margin-right: 10px; }

#financial .bottom{ padding-top: 200px; }
#financial .bottom .grid-box{ display: grid; grid-template-columns: 500px auto; }
#financial .bottom span{ font-size: 18px; font-weight: 400; color: #959595; }
#financial .bottom h3{ font-size: 50px; font-weight: 400; color: #333; letter-spacing: -0.02em; }
#financial .bottom h3 em{ color: var(--mainColor); }

@media screen and (hover: hover){
	#financial .financial:hover .text{ background: transparent; }
	#financial .financial:hover span{ background: #272727; color: #FFF; }
	#financial .financial:hover h6{ color: #FFF; }
	#financial .financial:hover i::before{ filter: invert(1) brightness(3); -webkit-filter: invert(1) brightness(3); }
	
	#financial .slide-info .btns button:hover{ background: #333; }
	#financial .slide-info .btns button:hover svg path{ stroke: #FFF; }
}

@media screen and (max-width: 1700px){
	#financial{ padding: 120px 0 150px; }
	#financial h4{ margin-bottom: 60px; }
	
	#financial .financial .text{ padding: 40px; }
	#financial .financial .text span{ width: 35px; height: 35px; }
	#financial .financial .text h6{ font-size: 26px; margin: 40px 0 20px; }
	#financial .financial .text i::before{ width: 35px; heihgt: 35px; }
	
	#financial .bottom{ padding-top: 150px; }
	#financial .bottom .grid-box{ grid-template-columns: 350px auto; }
	#financial .bottom span{ font-size: 17px; }
	#financial .bottom h3{ font-size: 40px; }
}

@media screen and (max-width: 1280px){
	#financial{ padding: 80px 0 100px; }
	#financial h4{ margin-bottom: 30px; }
	#financial .financial .text{ padding: 30px; }
	#financial .financial .text span{ width: 30px; height: 30px; font-size: 15px; }
	#financial .financial .text h6{ font-size: 22px; margin: 30px 0 20px; }
	#financial .financial .text i::before{ width: 30px; height: 30px; }
	
	#financial .bottom{ padding-top: 100px; }
	#financial .bottom .grid-box{ grid-template-columns: 200px auto; }
	#financial .bottom span{ font-size: 15px; }
	#financial .bottom h3{ font-size: 30px; }
}

@media screen and (max-width: 1100px){
	#financial{ background-size: auto; }
	#financial .financial-wrap{ width: calc(100% + 20px); }
	#financial .financial-wrap .slick-list{overflow: hidden; }
	#financial .financial{ width: 350px; transform: translateX(var(--aosPlus)); }
	#financial .financial::before{ padding-bottom: 85%; }

	#financial .slide-info{ display: block; }
}

@media screen and (max-width: 950px){
	#financial .bottom .grid-box{ grid-template-columns: repeat(1, 1fr); }
	#financial .bottom h3{ margin-top: 10px; }
}

@media screen and (max-width: 900px){
	#financial .financial .text h6{ font-size: 20px; }
	
	#financial .bottom h3{ font-size: 28px; }
}

@media screen and (max-width: 750px){
	#financial .bottom br{ display: none; }
}


/* news */
#news{
	--gap: 40px;
}
#news{ background: url("/img/main/news_bg.jpg") no-repeat center center / cover; padding: 100px 0 140px; overflow: hidden; }
#news h4{ color: #FFF; margin-bottom: 120px; }
#news .flex-box{ display: flex; align-items: flex-end; }
#news .left{ width: 39%; }
#news .right{ width: 61%; }

#news .news-wrap{ width: calc(100% +  var(--side)); }
#news .news-wrap .slick-list{ margin-right: calc(var(--gap) * -1); }
#news .news{ width: 370px; margin-right: var(--gap); clip-path: inset(0 0 0 0 round var(--contentR)); -webkit-clip-path: inset(0 0 0 0 round var(--contentR)); transform: translateX(0); opacity: 1; }
#news .news a{ display: block; background: #FFF; border-radius: var(--contentR); padding: 35px; backdrop-filter: blur(4px); transition: background 0.4s; }
#news .news i{ display: block; width: 40px; height: 40px; background: url("/img/main/big_arrow.svg") no-repeat center center / contain; margin-left: auto; transition: filter 0.4s; }
#news .news h6{ height: 4.5em; display: -webkit-box; font-family: var(--subFont); font-size: 24px; font-weight: 600; color: #151515; letter-spacing: -0.02em; line-height: 1.5; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 65px 0 40px; transition: color 0.4s; }
#news .news span{ font-size: 16px; font-weight: 400; color: #BBB; letter-spacing: -0.02em; transition: color 0.4s; }

#news .news.slick-now{ clip-path: inset(0 0 0 0 round var(--contentR)); -webkit-clip-path: inset(0 0 0 0 round var(--contentR)); transform: translateX(0); opacity: 1; }
#news .news.prev{ clip-path: inset(50% 0 50% 0 round var(--contentR)); -webkit-clip-path: inset(50% 0 50% 0 round var(--contentR)); transform: translateX(calc(100% + var(--gap))); opacity: 0; transition: opacity var(--duration), transform var(--duration), clip-path var(--duration); }

@media screen and (hover: hover){
	#news .news:hover a{ background: rgba(255, 255, 255, 0.1); }
	#news .news:hover i{ filter: invert(1) brightness(4); -webkit-filter: invert(1) brightness(4); }
	#news .news:hover h6{ color: #FFF; }
	#news .news:hover span{ color: rgba(255, 255, 255, 0.3); }
}

@media screen and (max-width: 1700px){
	#news{
		--gap: 30px;
	}
	#news{ padding: 80px 0 100px; }
	#news h4{ margin-bottom: 80px; }

	#news .left{ width: 350px; }
	#news .right{ width: calc(100% - 350px); }
	
	#news .news{ width: 330px; }
	#news .news i{ width: 35px; height: 35px; }
	#news .news h6{ font-size: 22px; margin: 50px 0 30px; }
}

@media screen and (max-width: 1280px){	
	#news{
		--gap: 20px;
	}
	#news{ padding: 70px 0; }
	#news h4{ margin-bottom: 30px; }

	#news .news{ width: 300px; }
	#news .news a{ padding: 25px; }
	#news .news i{ width: 30px; height: 30px; }
	#news .news h6{ font-size: 20px; margin: 50px 0 20px; }
	#news .news span{ font-size: 15px; }
}

@media screen and (max-width: 1000px){
	#news{ position: relative; }
	#news::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); position: absolute; top: 0; left: 0; }
	#news h4{ position: relative; z-index: 10; }
	#news .flex-box{ flex-direction: column-reverse; position: relative; z-index: 10; }
	#news .left{ width: 100%; }
	#news .left .btns{ justify-content: center; }
	#news .left .btns > *:not(:last-child){ margin-right: 7px; }
	#news .right{ width: 100%; margin-bottom: 20px; }
}

@media screen and (max-width: 600px){
	#news h4 br{ display: none; }
}



/* insight */
#insight{
	--img: 250px;
	--icon: 36px;
	--before: 120px;
	--gap: 20px;
	--textP: 60px;
}
#insight{ padding: 160px 0 170px; }
#insight h4{ margin-bottom: 80px; }
#insight .insight-wrap .insight:not(:last-of-type){ margin-bottom: 10px; }
#insight .insight a{ display: block; background: #EEE; border-radius: var(--contentR); padding: 0 var(--before); transition: background 0.4s, padding 0.4s; }
#insight .inner{ display: flex; align-items: center; padding: 20px 0; }

#insight .img{ width: var(--img); }
#insight .img figure{ display: block; position: relative; padding-bottom: 57.275%; border-radius: var(--contentR); overflow: hidden; }
#insight .img figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#insight .text{ width: calc(100% - var(--img)); padding-left: var(--textP); padding-right: calc(var(--textP) + var(--icon)) !important; position: relative; }
#insight .text h6{ font-size: 24px; font-weight: 400; color: #151515; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10px; }
#insight .text span{ font-size: 16px; font-weight: 400; color: #BBB; letter-spacing: -0.02em; transition: color 0.4s; }
#insight .text i{ width: var(--icon); height: var(--icon); background: url("/img/main/small_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

#insight .slide-info{ display: none; margin-top: 10px; }
#insight .slide-info .flex-box{ display: flex; align-items: center; }
#insight .slide-info .bar{ flex: 1 0 auto; height: 3px; background: #EFEFEF; }
#insight .slide-info .bar div{ width: 0; height: 100%; background: #333; }
#insight .slide-info .btns{ margin-left: 20px; }
#insight .slide-info .btns button{ border-color: #333; }
#insight .slide-info .btns button svg path{ stroke: #333; }
#insight .slide-info .btns button:not(:last-of-type){ margin-right: 10px; }

#insight .center{ margin-top: 80px; }
#insight .center a{ margin: 0 auto; }

@media screen and (hover: hover){
	#insight .insight:hover a{ background: #D7F2FD; padding: 0 calc(var(--before) + var(--gap)); }
	#insight .insight:hover span{ color: var(--mainColor); }
}

@media screen and (max-width: 1600px){
	#insight{
		--img: 220px;
		--before: 80px;
	}
	#insight{ padding: 120px 0; }
	#insight h4{ margin-bottom: 50px; }

	#insight .text h6{ font-size: 22px; }

	#insight .center{ margin-top: 60px; }
}

@media screen and (max-width: 1280px){
	#insight{
		--img: 200px;
		--icon: 30px;
		--before: 40px;
		--textP: 40px;
	}
	#insight{ padding: 80px 0 100px; }
	#insight h4{ margin-bottom: 20px; }

	#insight .text h6{ font-size: 20px; margin-bottom: 5px; }
	#insight .text span{ font-size: 15px; }

	#insight .center{ margin-top: 40px; }
}

@media screen and (max-width: 900px){
	#insight{
		--before: 30px;
		--textP: 30px;
	}
	#insight .inner{ padding: 15px 0; }
	#insight .text h6{ font-size: 19px; }
}

@media screen and (max-width: 750px){
	#insight{
		--icon: 25px;
		--textP: 20px;
	}
	#insight .insight-wrap .slick-list{ margin-right: -20px; }
	#insight .insight{ width: 300px; margin-right: 20px; }
	#insight .insight a{ padding: 25px !important; }
	#insight .inner{ flex-direction: column; padding: 0; }

	#insight .img{ width: 100%; }
	#insight .text{ width: 100%; padding: 0; margin-top: 25px; }

	#insight .slide-info{ display: block; }
}


/* #insight{
	--icon: 35px;
	--span: 100px;
	--padding: 160px;
}
#insight{ padding: 160px 0 170px; }
#insight h4{ margin-bottom: 80px; }
#insight ul li:not(:last-of-type){ margin-bottom: 10px; }
#insight ul li a{ display: block; background: #EEE; border-radius: var(--contentR); padding: 50px; position: relative; transition: background 0.4s; }

#insight .inner{ max-width: 1540px; display: flex; align-items: center; padding: 0; transition: padding 0.4s; margin: 0 auto; position: relative; }
#insight .inner i{ display: inline-block; width: var(--icon); }
#insight .inner i::before{ content: ""; display: inline-block; width: var(--icon); height: var(--icon); background: url("/img/main/small_arrow.svg") no-repeat center center / contain; }
#insight .inner h6{ width: calc(100% - var(--icon) - var(--span)); font-size: 24px; font-weight: 400; color: #151515; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0 var(--padding); }
#insight .inner span{ width: var(--span); display: inline-block; font-size: 16px; font-weight: 400; color:#BBB; letter-spacing: -0.02em; text-align: right; }

#insight .img{ width: 330px; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); position: absolute; top: 25%; right: 230px; transform: translateY(-100%); transition: clip-path 0.5s; pointer-events: none; }
#insight .img figure{ display: block; position: relative; padding-bottom: 57.275%; border-radius: var(--contentR); overflow: hidden; }
#insight .img figure img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#insight .center{ margin-top: 80px; }
#insight .center a{ margin: 0 auto; }

@media screen and (hover: hover){
	#insight ul li:hover a{ background: #D7F2FD; }
	#insight ul li:hover .inner{ padding: 0 20px; }
	#insight ul li:hover .img{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); pointer-events: auto; }
}

@media screen and (max-width: 1600px){
	#insight{
		--padding: 120px;
	}
	#insight{ padding: 120px 0; }
	#insight h4{ margin-bottom: 60px; }
	#insight ul li a{ padding: 40px; }

	#insight .inner h6{ font-size: 20px; }
	#insight .img{ width: 300px; right: 150px; }

	#insight .center{ margin-top: 60px; }
}

@media screen and (max-width: 1280px){
	#insight{
		--icon: 30px;
		--padding: 80px;
	}
	#insight{ padding: 80px 0 100px; }
	#insight h4{ margin-bottom: 20px; }
	#insight ul li a{ padding: 30px 25px; }

	#insight .inner h6{ font-size: 19px; }
	#insight .img{ width: 270px; right: 100px; }

	#insight .center{ margin-top: 40px; }
}

@media screen and (max-width: 900px){
	#insight{
		--padding: 40px;
	}
	#insight .img{ width: 250px; right: 40px; }
}

@media screen and (max-width: 750px){
	#insight{
		--padding: 30px;
	}
	#insight ul li a{ padding: 25px 20px; }
	#insight .inner{ flex-wrap: wrap; }
	#insight .inner i{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: right 0.4s; }
	#insight .inner h6{ width: calc(100% - var(--icon)); padding-left: 0; }
	#insight .inner span{ margin-top: 5px; text-align: left; }
}

@media screen and (max-width: 750px) and (hover: hover){
	#insight ul li:hover i{ right: 20px; }
} */