/* intro */
#intro{ width: 100%; height: 100%; /* background: var(--mainColor); */ position: fixed; top: 0; left: 0; z-index: 1000; overflow: hidden; }
#intro .bg{ width: 100%; height: 100%; background: var(--mainColor); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#intro .opacity{ animation: introOpacity 3s 0.7s both; }
#intro .mask{ 
	mask: url("/img/common/intro_mask.svg") no-repeat center center / 0 0,
    linear-gradient(#000 0 0);
	-webkit-mask: url("/img/common/intro_mask.svg") no-repeat center center / 0 0,
    linear-gradient(#000 0 0);
	mask-size: 0 0; 
	-webkit-mask-size: 0 0;
	mask-composite: exclude;
	animation: introMask 3s 1s both;
}
#intro .logo{ text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); animation: introLogo 3s 1s both; }
#intro .logo svg{ max-width: 50%; width: auto; height: auto; }

@media screen and (max-width: 700px){
	#intro .logo svg{ max-width: 60%; }
}


/* 메인 비주얼 이미지 */
#visual .bg01{ background: url("/img/main/visual01.jpg") no-repeat center center / cover; }
#visual .bg02{ background: url("/img/main/visual02.jpg") no-repeat center center / cover; }
#visual .bg03{ background: url("/img/main/visual03.jpg") no-repeat center center / cover; }


/* scroll motion */
#main{ background: transparent !important; position: relative; padding-top: 100vh; }
#mainT{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#mainB{ background: #FFF; border-radius: var(--secR); position: relative; z-index: 100; }

#scT{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#scT .contents{ width: 100%; position: sticky; position: -webkit-sticky; top: calc(var(--stickyT) * -1); left: 0; opacity: 1; }
#scT .contents::after{ content: ""; width: 100%; height: 100%; background: var(--mainColor); position: absolute; top: 0; left: 0; border-radius: var(--secR) var(--secR) 0 0; z-index: 100; opacity: 1; transition: opacity 1s; }
#scT .contents.aos-animate::after{ opacity: 0; pointer-events: none; }
#scB{ position: relative; z-index: 100; }
#scB .grayBg{ background: var(--grayBg); border-radius: var(--secR); }

@media screen and (hover: none){
	#main{ padding-top: var(--vh); }
}


/* flex-layout */
.flex-layout{
	--icon: 80px;
}

.flex-layout{ display: flex; margin-bottom: -20px; }
.flex-layout .item{ border-radius: 20px; overflow: hidden; margin-right: 20px; margin-bottom: 20px; position: relative; clip-path: inset(0 100% 0 0 round 20px); -webkit-clip-path: inset(0 100% 0 0 round 20px); opacity: 1; transition: width 0.5s, background 0.5s, clip-path 1s; }
.flex-layout .item a{ height: 100%; display: block; position: relative; z-index: 10; }
.flex-layout dl{ color: #FFF; }
.flex-layout dl dt{ display: flex; justify-content: space-between; align-items: center; font-family: var(--engFont); font-size: 6.2rem; font-weight: 400; letter-spacing: -0.03em; }
.flex-layout dl dd{ font-size: 21px; font-weight: 500; letter-spacing: -0.02em; }
.flex-layout dl dd *{ line-height: inherit; }

.flex-layout em{ display: inline-block; background: linear-gradient(to top, #FFF 0 3px, transparent 3px 100%) no-repeat left bottom; background-size: 0 auto !important; line-height: 1.3; transition: background 0.5s; }
.flex-layout i{ display: inline-block; width: var(--icon); height: var(--icon); background: #FFF; border-radius: 50%; padding: 30px; }
.flex-layout i::before{ content: ""; display: block; background: url("/img/main/more_arrow.svg") no-repeat center center / contain; padding-bottom: 100%; filter: brightness(100) invert(1); -webkit-filter: brightness(100) invert(1); transform: rotate(0); transition: fill 0.5s, transform 0.5s; }

.flex-layout .item.aos-animate{ clip-path: inset(0 0 0 0 round 20px); -webkit-clip-path: inset(0 0 0 0 round 20px); }

@media screen and (hover: hover){
	.flex-layout .item:hover em{ background-size: 100% auto !important; }
	.flex-layout .item:hover i::before{ filter: unset; -webkit-filter: unset; transform: rotate(45deg); }

	.flex-layout.bg .item:hover{ background: var(--mainColor) !important; }
}

@media screen and (max-width: 1700px){
	.flex-layout{
		--icon: 70px;
	}
	.flex-layout dl dd{ font-size: 19px; }

	.flex-layout i{ padding: 25px; }
}

@media screen and (max-width: 1280px){
	.flex-layout{
		--icon: 60px;
	}
	.flex-layout dl dd{ font-size: 17px; }

	.flex-layout em{ background: linear-gradient(to top, #FFF 0 2px, transparent 2px 100%) no-repeat left bottom; }
	.flex-layout i{ padding: 20px; }
}

@media screen and (max-width: 900px){
	.flex-layout{
		--icon: 50px;
	}
	.flex-layout i{ padding: 17px; }
}


/* visual */
#visual{
	--before: scale(1.1);
}
#visual{ background: #FFF; width: 100%; position: sticky; position: -webkit-sticky; top: 0; left: 0; color: #FFF; margin-bottom: calc(var(--secR) * 2); }
#visual::after{ content: ""; width: 100%; height: var(--secR); background: #FFF; position: absolute; bottom: 0; left: 0; transform: translateY(100%); }
#visual .visual{ overflow: hidden; animation: bgScale 2s linear both; }
#visual .visual .bg{ height: 100vh; transform: var(--before); transition: transform 2s 1s linear; }
#visual .visual.slick-active .bg{ transform: scale(1); transition-delay: unset; }

#visual .text-box{ text-align: center; position: absolute; bottom: 50%; left: 0; right: 0; transform: translateY(50%); padding: var(--headerH) 30px 0; }
#visual .text-box .flex-box{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
#visual .text-box .right{ margin-top: 60px; }
#visual .text-box h2{ font-family: var(--engFont); font-size: 8.4rem; font-weight: 600; /* font-weight: 400; */ letter-spacing: -0.02em; margin-bottom: 80px; }
#visual .text-box h2 span, 
#visual .text-box p{ transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
#visual .text-box h2 span{ display: block; }
#visual .text-box p{ font-size: 23px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.7; }

#visual.animated .text-box h2 span, 
#visual.animated .text-box p{ animation: textClip 1s both; }

#visual .scrollDown{ margin-left: auto; }

@media (hover: hover) and (pointer: fine) {
	#visual .text-box{ text-align: left; bottom: 0; transform: translateY(0); padding: 0; padding-bottom: 80px; }
	#visual .text-box .flex-box{ flex-direction: row; align-items: flex-end; }
	#visual .text-box .left{ width: calc(100% - 100px); }
	#visual .text-box .right{ width: 100px; margin-top: 0; }
}

@media screen and (hover: none){
	#visual .visual .bg{ height: var(--vh); }
}

@media screen and (max-width: 1700px){
	#visual .text-box h2{ margin-bottom: 60px; }
	#visual .text-box p{ font-size: 21px; }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1700px) {
	#visual .text-box{ padding-bottom: 60px; }
}

@media screen and (max-width: 1280px){
	#visual .text-box{ padding-bottom: 30px; }
	#visual .text-box h2{ margin-bottom: 40px; }
	#visual .text-box p{ font-size: 19px; }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1280px) {
	#visual .text-box{ padding-bottom: 30px; }
}

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

@media screen and (max-width: 800px){
	#visual .text-box p br{ display: none; }
}


/* about */
#about{ padding: 150px 0 180px; position: relative; }
#about .flex-layout{
	--pm: 125px;
}
#about .item{ width: calc((100% - 20px) / 2); background: var(--grayBg); clip-path: inset(0 100% 0 0 round 20px); -webkit-clip-path: inset(0 100% 0 0 round 20px); }
#about .item:last-of-type{ margin-right: 0; }
#about .item a{ padding: 40px; }
#about .item .dl{ height: 100%; position: relative; }
#about .item dl{ height: 100%; display: flex; flex-direction: column; }
#about .item dl dt{ flex: 1 0 auto; color: #111; transition: color 0.5s; }
#about .item dl dd{ color: #555; line-height: 1.5; padding-bottom: 225px; position: relative; }
#about .item dl dd p{ position: absolute; bottom: 0; left: 0; right: 0; opacity: 1; transition: opacity 0.5s, color 0.5s; }
#about .item .icon{ display: flex; position: absolute; bottom: 0; left: 0; opacity: 0; transition: opacity 0.5s; }
#about .item .icon svg{ width: auto; height: auto; }

#scT .contents.aos-animate #about .item{ clip-path: inset(0 0 0 0 round 20px); -webkit-clip-path: inset(0 0 0 0 round 20px); }

@media (hover: hover) and (pointer: fine) {
	#about .item dl dd{ color: rgba(255, 255, 255, 0.7); }
	#about .item dl dd p{ opacity: 0; }
	#about .item .icon{ opacity: 1; }

	#about .item:hover dl dt{ color: #FFF; }
	#about .item:hover dl dd p{ opacity: 1; }
	#about .item:hover .icon{ opacity: 0; }

	#about .flex-layout.active .item{ width: calc((100% - 20px - var(--pm)) / 2); }
	#about .flex-layout .item:hover{ width: calc(calc((100% - 20px) / 2) + var(--pm)) !important; }
}

@media screen and (max-width: 1700px){
	#about{ padding: 100px 0 140px; }
	#about .flex-layout{
		--pm: 100px;
	}

	#about .item a{ padding: 30px; }
	#about .item dl dd{ padding-bottom: 200px; }
	#about .item .icon{ height: 65px; }
}

@media screen and (max-width: 1280px){
	#about{ padding: 60px 0 100px; }
	#about .flex-layout{
		--pm: 80px;
	}

	#about .item br{ display: none; }
	#about .item a{ padding: 25px; }
	#about .item dl dd{ padding-bottom: 150px; }
	#about .item .icon{ height: 60px; }
}

@media screen and (max-width: 900px){
	#about{ padding: 60px 0 50px; }
	#about .item .icon{ height: 55px; }
}

@media screen and (max-width: 800px){
	#about .flex-layout{ flex-wrap: wrap; }
	#about .item{ width: 100% !important; margin-right: 0; }
}

@media screen and (max-width: 800px) and (hover: hover){
	#about .flex-layout.active .item{ width: 100% !important; }
	#about .flex-layout .item:hover{ width: 100% !important; }
}


/* sustainability */
#sustainability .sticky-box{ height: 200vh; position: relative; }
#sustainability .sticky{ width: 100%; position: sticky; position: -webkit-sticky; top: var(--headerH); left: 0; }
#sustainability .absolute{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; opacity: 1; mix-blend-mode: unset; transition: mix-blend-mode 1s; pointer-events: none; }
#sustainability .absolute h2{ font-family: var(--engFont); font-size: 18rem; font-weight: 600; color: #000; letter-spacing: -0.02em; }
#sustainability .absolute h2 span{ display: inline-block; position: relative; left: -100%; transform: translateX(25%); }
#sustainability .absolute h2 em{ mix-blend-mode: unset; transition: color 1s, mix-blend-mode 1s; }
#sustainability .flex-box{ display: flex; flex-wrap: wrap; padding: 20px; position: relative; }
#sustainability .flex-box::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: visible; transition: visibility 0.3s 1.1s; }

#sustainability .item{ width: calc((100% - 15px) / 4); margin-right: 5px; position: relative; overflow: hidden; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transition: clip-path 1s; }
#sustainability .item:first-of-type{ border-radius: 20px 0 0 20px; }
#sustainability .item:last-of-type{ border-radius: 0 20px 20px 0; margin-right: 0; }
#sustainability .item:only-of-type{ border-radius: 20px; }
#sustainability .item .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1.05); transition: transform 0.8s 0.3s; }
#sustainability .item .bg img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.5s; }
#sustainability .item a{ height: calc(100vh - var(--headerH) - 40px); display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 10; padding: 40px; }
#sustainability .item a::before{ content: ""; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; opacity: 1; transition: opacity 0.5s; }
#sustainability .item p{ font-size: 32px; font-weight: 600; color: #FFF; letter-spacing: -0.02em; text-align: center; }
#sustainability .item p::after{ content: ""; display: inline-block; width: 14px; height: 14px; background: url("/img/main/sustainability_arrow.svg") no-repeat center center / contain; vertical-align: middle; margin-left: 15px; margin-top: -7px; transform: rotate(0); transition: transform 0.5s; }
#sustainability .item p em{ display: inline-block; background: linear-gradient(to top, #FFF 0 3px, transparent 3px 100%) no-repeat left bottom; background-size: 0 auto !important; line-height: 1.3; transition: background 0.5s; }

/* sustainability - active */
#sustainability.active .absolute{ mix-blend-mode: soft-light; transition-delay: var(--durationS); }
#sustainability.active .absolute h2 span{ animation: sustainabilityStart var(--durationS) both; }
#sustainability.active .absolute h2 em{ color: #FFF; transition-delay: var(--durationS); }
#sustainability.active .flex-box::after{ visibility: hidden; transition-delay: var(--durationS); }
#sustainability.active .item{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); transition-delay: var(--durationS); }
#sustainability.active .item .bg{ transform: scale(1); transition-delay: var(--durationS); }

@media screen and (hover: hover){
	#sustainability .item:hover .bg img{ transform: scale(1.05) !important; }
	#sustainability .item:hover a::before{ opacity: 0; }
	#sustainability .item:hover p::after{ transform: rotate(45deg); }
	#sustainability .item:hover p em{ background-size: 100% auto !important; }
}

@media (hover: hover) and (pointer: fine) {
	/* sustainability - active */
	#sustainability.active .absolute{ mix-blend-mode: unset; transition-delay: unset; }
	#sustainability.active .absolute h2 em{ color: var(--grayBg); }
	#sustainability.active .flex-box::after{ visibility: visible; transition-delay: unset; }
	#sustainability.active .item{ clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transition-delay: unset; }
	#sustainability.active .item .bg{ transform: scale(1.05); transition-delay: unset; }

	/* sustainability - end */
	#sustainability.end .absolute{ mix-blend-mode: soft-light; }
	#sustainability.end .absolute h2 em{ color: #FFF; transition-delay: unset; }
	#sustainability.end .flex-box::after{ visibility: hidden; }
	#sustainability.end .item{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
	#sustainability.end .item .bg{ transform: scale(1); }
}

@media screen and (max-width: 1700px){
	#sustainability .absolute h2{ font-size: 15rem; }

	#sustainability .item p{ font-size: 28px; }
}

@media screen and (max-width: 1280px){
	#sustainability .absolute h2{ font-size: 14rem; }
	#sustainability .item p{ font-size: 26px; }
	#sustainability .item p em{ background: linear-gradient(to top, #FFF 0 2px, transparent 2px 100%) no-repeat left bottom; }
	#sustainability .item p::after{ width: 11px; height: 11px; margin-left: 10px; margin-top: -3px; }
}

@media screen and (max-width: 1050px){
	#sustainability .flex-box{ flex-wrap: wrap; margin-bottom: -5px; }
	#sustainability .item{ width: calc((100% - 5px) / 2); margin-bottom: 5px; }
	#sustainability .item:nth-of-type(2n){ margin-right: 0; }
	#sustainability .item:nth-of-type(1){ border-radius: 20px 0 0 0; }
	#sustainability .item:nth-of-type(2){ border-radius: 0 20px 0 0; }
	#sustainability .item:nth-of-type(3){ border-radius: 0 0 0 20px; }
	#sustainability .item:nth-of-type(4){ border-radius: 0 0 20px 0; }
	#sustainability .item a{ height: calc((100vh - 45px - var(--headerH)) / 2); justify-content: center; }
}

@media screen and (max-width: 900px){
	#sustainability .item p{ font-size: 20px; }
}

@media screen and (max-width: 800px){
	#sustainability .absolute h2{ font-size: 9rem; }
}


/* rnd */
#rnd{ overflow: hidden; padding: 180px 0; }
#rnd .title{ display: flex; justify-content: space-between; margin-bottom: 80px; }
#rnd .title h2{ width: calc(100% - 120px); font-family: var(--engFont); font-size: 8.4rem; font-weight: 500; color: #111; letter-spacing: -0.02em; }
#rnd .title .icon svg{ width: auto; height: auto; }
#rnd .inner{ max-width: 1080px; margin-left: auto; margin-bottom: 180px; }
#rnd .inner p{ font-size: 21px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.7; }

#rnd .flex-layout{
	--pm: 90px;
}
#rnd .item{ width: calc((100% - 40px) / 3); background: #FFF; margin-right: 20px; }
#rnd .item:last-of-type{ margin-right: 0; }
#rnd .item a{ display: flex; justify-content: space-between; align-items: center; padding: 60px 40px; }
#rnd .item .left{ width: calc(100% - var(--icon) - 20px); }
#rnd .item span{ display: block; font-family: var(--engFont); font-size: 21px; font-weight: 300; color: #333; letter-spacing: -0.02em; margin-bottom: 10px; transition: color 0.5s; }
#rnd .item h5{ font-size: 32px; font-weight: 600; color: #111; letter-spacing: -0.02em; transition: color 0.5s; }
#rnd .item i{ background: #F8F8F8; transition: background 0.5s; }

@media screen and (hover: hover){
	#rnd .item:hover span,
	#rnd .item:hover h5{ color: #FFF !important; }
	#rnd .item:hover i{ background: #FFF; }

	#rnd .flex-layout.active .item{ width: calc((100% - 40px - var(--pm)) / 3); }
	#rnd .flex-layout .item:hover{ width: calc(calc((100% - 40px) / 3) + var(--pm)) !important; }
}

@media screen and (max-width: 1700px){
	#rnd{ padding: 140px 0; }
	#rnd .title{ margin-bottom: 60px; }
	#rnd .title h2{ width: calc(100% - 110px); }
	#rnd .title .icon svg{ height: 90px; }
	#rnd .inner{ margin-bottom: 140px; }
	#rnd .inner p{ font-size: 19px; }

	#rnd .flex-layout{
		--pm: 70px;
	}
	#rnd .item a{ padding: 35px 30px; }
	#rnd .item span{ font-size: 19px; }
	#rnd .item h5{ font-size: 28px; }
}

@media screen and (max-width: 1280px){
	#rnd{ padding: 100px 0; }
	#rnd .title{ margin-bottom: 40px; }
	#rnd .title h2{ width: calc(100% - 100px); }
	#rnd .title .icon svg{ height: 80px; }
	#rnd .inner{ margin-bottom: 100px; }
	#rnd .inner p{ font-size: 17px; }


	#rnd .flex-layout{
		--pm: 40px;
		--icon: 50px;
	}
	#rnd .item a{ padding: 35px 20px; }
	#rnd .item span{ font-size: 17px; }
	#rnd .item h5{ font-size: 24px; }
	#rnd .flex-layout i{ padding: 18px; }
}

@media screen and (max-width: 1000px){
	#rnd .flex-layout{ flex-wrap: wrap; }
	#rnd .item{ width: 100%; margin-right: 0; }
}

@media screen and (max-width: 1000px) and (hover: hover){
	#rnd .flex-layout.active .item{ width: 100%; }
	#rnd .flex-layout .item:hover{ width: 100% !important; }
}

@media screen and (max-width: 900px){
	#rnd{ padding: 50px 0 70px; }
	#rnd .title{ margin-bottom: 20px; }
	#rnd .title h2{ width: calc(100% - 90px); font-size: 7rem; }
	#rnd .title .icon svg{ height: 60px; }
	#rnd .inner{ margin-bottom: 40px; }

	#rnd .item a{ padding: 25px 20px; }
	#rnd .item span{ font-size: 15px; }
	#rnd .item h5{ font-size: 20px; }
}

@media screen and (max-width: 800px){
	#rnd br{ display: none; }
}

@media screen and (max-width: 600px){
	#rnd .title h2 em{ display: block; }
}


/* notice */
#notice{ overflow: hidden; padding-bottom: 200px; }
#notice .whiteBg{ background: #FFF; border-radius: var(--secR); padding: 80px 50px; margin-bottom: 80px; clip-path: inset(100% 0 0 0 round var(--secR)); -webkit-clip-path: inset(100% 0 0 0 round var(--secR)); opacity: 1; transition: clip-path 1s; }
#notice .title{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; }
#notice .title h4{ font-family: var(--engFont); font-size: 5.4rem; font-weight: 500; color: #111; letter-spacing: -0.02em; opacity: 0; transform: translateX(var(--aosMinus)); transition: opacity 1s 0.5s, transform 1s 0.5s; }

#notice .btns{ width: 160px; display: flex; align-items: center; margin: -10px 0; margin-right: -10px; opacity: 0; transform: translateX(var(--aosPlus)); transition: opacity 1s 0.5s, transform 1s 0.5s; }
#notice .btns button{ background: none; border: none; padding: 10px; }
#notice .btns button svg{ width: auto; height: auto; }
#notice .btns .bar{ flex: 1 0 auto; height: 4px; background: #EEE; border-radius: 100px; margin: 0 10px; }
#notice .btns .bar div{ width: 0; height: 100%; background: var(--mainColor); border-radius: inherit; }

#notice .news-wrap .slick-list{ margin-right: -20px; }
#notice .news{ background: var(--grayBg); border-radius: 20px; margin-right: 20px; transition: background 0.5s; }
#notice .news a{ display: block; padding: 60px 40px; }
#notice .news *{ transition: color 0.5s; }
#notice .news .tit{ border-bottom: 1px solid #E5E5E5; }
#notice .news span{ display: block; font-family: var(--engFont); font-size: 18px; font-weight: 500; color: var(--mainColor); letter-spacing: -0.02em; }
#notice .news h6,
#notice .news p{ display: -webkit-box; white-space: normal; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; -webkit-box-orient: vertical; margin: 30px 0; }
#notice .news h6{ height: 3em; font-size: 25px; font-weight: 500; color: #111; letter-spacing: -0.02em; line-height: 1.5; letter-spacing: -0.02em; -webkit-line-clamp: 2; }
#notice .news p{ height: 4.8em; font-size: 18px; font-weight: 300; color: #555; letter-spacing: -0.02em; line-height: 1.6; letter-spacing: -0.02em; -webkit-line-clamp: 3; }
#notice .news .date{ color: #CCC; }

#notice .flex-layout{
	--pm: 110px;
}
#notice .flex-layout .career{ background: url("/img/main/career_bg.jpg") no-repeat center left / cover; }
#notice .flex-layout .inquiry{ background: url("/img/main/inquiry_bg.jpg") no-repeat center right / cover; }
#notice .flex-layout .item{ width: calc((100% - 20px) / 2); }
#notice .flex-layout .item a{ padding: 95px 50px; }
#notice .flex-layout .item i{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#notice .flex-layout .item dl{ padding-right: calc(var(--icon) + 20px); position: relative; }
#notice .flex-layout .item dl dd{ margin-top: 20px; padding-bottom: 1.3em; position: relative; }
#notice .flex-layout .item p{ color: rgba(255, 255, 255, 0.7); transition: color 0.5s; position: absolute; top: 0; left: 0; right: 0; }

#notice .whiteBg.aos-animate{ clip-path: inset(0 0 0 0 round var(--secR)); -webkit-clip-path: inset(0 0 0 0 round var(--secR)); }
#notice .whiteBg.aos-animate .title h4,
#notice .whiteBg.aos-animate .btns,
#notice .whiteBg.aos-animate .news-wrap{ opacity: 1; transform: translate(0, 0); }

@media screen and (hover: hover){
	#notice .news:hover{ background: var(--mainColor); }
	#notice .news:hover *{ color: rgba(255, 255, 255, 0.7); }
	#notice .news:hover h6{ color: #FFF; }

	#notice .flex-layout.active .item{ width: calc((100% - 20px - var(--pm)) / 2); }
	#notice .flex-layout .item:hover{ width: calc(calc((100% - 20px) / 2) + var(--pm)) !important; }
	#notice .flex-layout .item:hover p{ color: #FFF; }
}

@media screen and (max-width: 1700px){
	#notice{ padding-bottom: 150px; }
	#notice .whiteBg{ padding: 60px 40px; margin-bottom: 60px; }
	#notice .title{ margin-bottom: 40px; }

	#notice .news a{ padding: 40px 30px; }
	#notice .news span{ font-size: 16px; }
	#notice .news h6,
	#notice .news p{ margin: 20px 0; }
	#notice .news h6{ font-size: 21px; }
	#notice .news p{ font-size: 17px; }

	#notice .flex-layout .item a{ padding: 60px 40px; }
}

@media screen and (max-width: 1280px){
	#notice{ padding-bottom: 100px; }
	#notice .whiteBg{ padding: 35px 25px; margin-bottom: 40px; }
	#notice .title{ margin-bottom: 20px; }

	#notice .btns .bar{ margin: 0; }
	#notice .btns button svg{ height: 15px; }

	#notice .news a{ padding: 30px 20px; }
	#notice .news span{ font-size: 15px; }
	#notice .news h6,
	#notice .news p{ margin: 15px 0; }
	#notice .news h6{ font-size: 19px; }
	#notice .news p{ font-size: 16px; }

	#notice .flex-layout .item a{ padding: 40px 25px; }
	#notice .flex-layout .item dl dd{ margin-top: 10px; }
}

@media screen and (max-width: 1000px){
	#notice .flex-layout .item dl dd{ padding-bottom: 2.6em; }
}

@media screen and (max-width: 900px){
	#notice .whiteBg{ margin-bottom: 20px; }
	#notice .flex-layout{ flex-wrap: wrap; }
	#notice .flex-layout .item{ width: 100%; margin-right: 0; }
	#notice .flex-layout .item a{ padding: 30px 25px; }
	#notice .flex-layout .item dl dd{ padding-bottom: 1.3em; }
}

@media screen and (max-width: 900px) and (hover: hover){
	#notice .flex-layout.active .item{ width: 100%; }
	#notice .flex-layout .item:hover{ width: 100% !important; }
}