/* 서브 비주얼 이미지 */
#visual.visual1{ background: url("/img/sub/about_bg.jpg") no-repeat center center / cover; }
#visual.visual2{ background: url("/img/sub/showreels_bg.jpg") no-repeat center center / cover; }
#visual.visual3{ background: url("/img/sub/project_bg.jpg") no-repeat center center / cover; }
#visual.visual4{ background: url("/img/sub/edit_bg.jpg") no-repeat center center / cover; }
#visual.visual5{ background: url("/img/sub/ai_bg.jpg") no-repeat center center / cover; }
#visual.visual6{ background: url("/img/sub/contact_bg.jpg") no-repeat center center / cover; }
#visual.visual10{ background: url("/img/sub/contact_bg.jpg") no-repeat center center / cover; }


/* visual */
#visual{ min-height: 260px; padding-bottom: 37.5%; position: relative; z-index: 15; }
#visual .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; }
#visual .text h2{ font-family: var(--engFont); font-size: 7rem; font-weight: 700; margin-bottom: 40px; }


/* lnb */
#lnb img{ opacity: 0.4; }
#lnb a{ display: block; font-family: var(--engFont); font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 0.4); line-height: 1.3; padding: 5px 20px; }

#lnb ul{ display: flex; justify-content: center; align-items: center; margin: -5px -20px; }
#lnb ul li{ position: relative; }
#lnb ul li::before{ content: ""; width: 3px; height: 3px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#lnb ul li:first-of-type::before{ display: none; }
#lnb ul li:last-of-type a{ color: #FFF; }
#lnb ul li.local01 a{ color: rgba(255, 255, 255, 0.4); }


/* common */
#sub{
	--subPt: 160px;
	--subPb: 200px;
}
#wrap{ position: relative; }
.sub-content{ padding: var(--subPt) 0 var(--subPb); position: relative; z-index: 20; }
.eng{ font-family: var(--engFont) !important; }


/* 간격 */
.pt200{ padding-top: 200px; }
.pb200{ padding-bottom: 200px; }
.pt160{ padding-top: 160px; }
.pb160{ padding-bottom: 160px; }
.pt120{ padding-top: 120px; }
.pb120{ padding-bottom: 120px; }
.pt100{ padding-top: 100px; }
.pb100{ padding-bottom: 100px; }


/* sec-title */
.sec-title span{ display: block; font-family: var(--engFont); font-size: 20px; font-weight: 700; color: var(--orange); margin-bottom: 30px; }
.sec-title h3{ font-size: 6rem; font-weight: 500; line-height: 1.5; }
.sec-title h4{ font-size: 5rem; font-weight: 500; line-height: 1.5; }
.sec-title h5{ font-size: 4.8rem; font-weight: 500; line-height: 1.5; }
.sec-title p{ font-size: 20px; font-weight: 200; color: rgba(255, 255, 255, 0.7); line-height: 1.8; }


/* curtain */
.curtain-box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.curtain-box::before{ content: ""; display: block; min-height: 260px; padding-bottom: 37.5%; box-sizing: border-box; }
.curtain-box .bg{ height: 100vh; background: url("/img/sub/curtain_bg.png") no-repeat center right / cover; position: sticky; top: 0; left: 0; }


/* sticky-tab */
.sticky-tab{ background: rgba(5, 5, 5, 0.05); backdrop-filter: blur(10px); position: sticky; top: 0; left: 0; z-index: 100; }
.sticky-tab ul{ display: flex; flex-wrap: wrap; }
.sticky-tab ul li > *{ min-height: 70px; display: flex; justify-content: center; align-items: center; background: transparent; border: none; font-family: var(--engFont); font-size: 20px; font-weight: 500; color: #FFF; text-align: center; padding: 10px 60px; transition: background 0.3s, color 0.3s; }
.sticky-tab ul li.on > *{ background: #FFF; font-weight: 800; color: #111; }


/* tab-menu */
.tab-menu{ overflow: hidden; margin-bottom: 60px; }
.tab-menu ul{ display: flex; flex-wrap: wrap; margin: 0 -30px; }
.tab-menu ul li a{ display: block; font-family: var(--engFont); font-size: 22px; font-weight: 600; color: rgba(255, 255, 255, 0.4); line-height: 1.3; padding: 5px 30px; position: relative; }
.tab-menu ul li a::before{ content: ""; width: calc(100% - 60px); height: 1px; background: #FFF; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: none; }

.tab-menu ul li.on a{ color: #FFF; }
.tab-menu ul li.on a::before{ display: block; }


/* slide-info */
.slide-info{ display: flex; align-items: center; margin-top: 40px; }
.slide-info .bar{ flex: 1 0 auto; background: rgba(255, 255, 255, 0.4); }
.slide-info .bar div{ width: 0; height: 2px; background: #FFF; }

.slide-info .btns{ display: flex; margin: -10px 0; margin-left: 20px; }
.slide-info .btns button{ background: none; border: none; padding: 10px; opacity: 1; transition: opacity 0.3s; }
.slide-info .btns button i{ display: inline-block; width: 31px; height: 39px; opacity: 1; transition: opacity 0.3s; }
.slide-info .btns .prev i{ background: url("/img/sub/icon_prev.svg") no-repeat center center / contain; }
.slide-info .btns .next i{ background: url("/img/sub/icon_next.svg") no-repeat center center / contain; }
.slide-info .btns .none{ opacity: 0.2; }
.slide-info .btns .none i{ opacity: 0.8; }


/* cursor */
.cursor-box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 500; overflow: hidden; pointer-events: none; }
.cursor{ width: 180px; height: 180px; padding: 10px; position: absolute; top: 0; left: 0; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.4s, opacity 0.4s; }
.cursor div{ background: rgba(5, 5, 5, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; padding: 10px; opacity: 0.3; }
.cursor div::before{ content: ""; display: block; padding-bottom: 100%; background: rgba(5, 5, 5, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: inherit; }
.cursor span{ font-family: var(--engFont); font-size: 24px; font-weight: 400; color: #FFF; text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }

@media screen and (hover: hover) and (pointer: fine){
	.cursor.active{ transform: translate(-50%, -50%) scale(1); opacity: 1 }
}

@media screen and (max-width: 1600px){
	/* common */
	#sub{
		--subPt: 100px;
		--subPb: 160px;
	}

	/* visual */
	#visual .text h2{ margin-bottom: 30px; }

	/* lnb */
	#lnb a{ font-size: 17px; }

	/* 간격 */
	.pt200{ padding-top: 160px; }
	.pb200{ padding-bottom: 160px; }
	.pt160{ padding-top: 120px; }
	.pb160{ padding-bottom: 120px; }
	.pt120{ padding-top: 80px; }
	.pb120{ padding-bottom: 80px; }
	.pt100{ padding-top: 80px; }
	.pb100{ padding-bottom: 80px; }

	/* sec-title */
	.sec-title span{ font-size: 18px; margin-bottom: 20px; }
	.sec-title p{ font-size: 18px; }

	/* sticky-tab */
	.sticky-tab ul li > *{ min-height: 60px; font-size: 18px; padding: 10px 45px; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 40px; }
	.tab-menu ul{ margin: 0 -20px; }
	.tab-menu ul li a{ font-size: 20px; padding-inline: 20px; }
	.tab-menu ul li a::before{ width: calc(100% - 40px); }

	/* slide-info */
	.slide-info{ margin-top: 30px; }

	/* cursor */
	.cursor{ width: 140px; height: 140px; }
	.cursor span{ font-size: 22px; }
}

@media screen and (max-width: 1280px){
	/* visual */
	#visual .text h2{ margin-bottom: 20px; }

	/* lnb */
	#lnb img{ width: 25px; height: auto; }
	#lnb a{ font-size: 16px; padding: 5px 15px; }
	#lnb ul{ margin: -5px -15px; }

	/* common */
	#sub{
		--subPt: 60px;
		--subPb: 100px;
	}

	/* 간격 */
	.pt200{ padding-top: 100px; }
	.pb200{ padding-bottom: 100px; }
	.pt160{ padding-top: 80px; }
	.pb160{ padding-bottom: 80px; }
	.pt120{ padding-top: 60px; }
	.pb120{ padding-bottom: 60px; }
	.pt100{ padding-top: 60px; }
	.pb100{ padding-bottom: 60px; }

	/* sec-title */
	.sec-title span{ font-size: 16px; margin-bottom: 10px; }
	.sec-title p{ font-size: 17px; }

	/* sticky-tab */
	.sticky-tab ul li > *{ min-height: 50px; font-size: 17px; padding: 10px 30px; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 30px; }
	.tab-menu ul{ margin: 0 -15px; }
	.tab-menu ul li a{ font-size: 18px; padding-inline: 15px; }
	.tab-menu ul li a::before{ width: calc(100% - 30px); }

	/* slide-info */
	.slide-info{ margin-top: 20px; }
	.slide-info .btns button i{ width: 26px; height: 39px; }

	/* cursor */
	.cursor{ width: 120px; height: 120px; }
	.cursor div{ padding: 5px; }
	.cursor span{ font-size: 19px; }
}

@media screen and (max-width: 900px){
	/* visual */
	#visual .text h2{ margin-bottom: 15px; }

	/* title-box */
	.sec-title h4{ font-size: 5.5rem; }
	.sec-title h5{ font-size: 5rem; }

	/* sticky-tab */
	.sticky-tab ul li > *{ min-height: 45px; font-size: 16px; padding: 10px 15px; }

	/* slide-info */
	.slide-info{ margin-top: 10px; }

	/* cursor */
	.cursor{ width: 100px; height: 100px; }
	.cursor span{ font-size: 17px; }
}


/* ABOUT - ABOUT US */
/* about */
#about{ padding-top: 0; clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#about section{ background: var(--baseBg); }
#about section:last-of-type{ background: transparent; }

#about .about{ padding-top: 85px; }
#about .about .grid-box{ display: grid; grid-template-columns: 49% 51%; align-items: center; }

#about .about .left{ padding-inline: 80px; position: relative; z-index: 10; }
#about .about .left h3{ line-height: 1.4; margin: 65px 0 60px; }

#about .about .diagram{
	--circle: 180px;
}
#about .about .diagram{ text-align: center; padding: calc(var(--circle) / 2); }
#about .about .diagram .inner{ position: relative; }
#about .about .diagram .border::before{ content: ""; display: block; border: 2px dashed #FFF; border-radius: 50%; padding-bottom: 100%; animation-name: rotate360; animation-timing-function: linear; animation-iteration-count: infinite; }
#about .about .diagram .border02{ width: 195.5%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#about .about .diagram .border02::before{ opacity: 0.1; animation-duration: 80s; }
#about .about .diagram .border01::before{ opacity: 0.3; animation-duration: 50s; }

#about .about .diagram .item-box{ width: 100%; height: calc(100% + var(--circle)); display: grid; grid-template-columns: var(--circle) calc(100% - (var(--circle) * 2)) var(--circle); position: absolute; top: calc((var(--circle) / 2) * -1); left: 0; }
#about .about .diagram .item01{ grid-column: auto / span 3; margin-bottom: -12%; } 
#about .about .diagram .item03{ grid-column: 3 / 4; margin-bottom: 9%; }
#about .about .diagram .item05{ grid-column: 3 / 4; }
#about .about .diagram .item07{ grid-column: 3 / 4; }

#about .about .diagram .circle{ --translate: translateX(0); width: var(--circle); display: inline-block; position: relative; transform: var(--translate) scale(0.5); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); transition-delay: inherit; }
#about .about .diagram .circle::before{ content: ""; display: block; background: var(--baseBg); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; padding-bottom: 100%; }
#about .about .diagram .circle span{ font-family: var(--engFont); font-size: 24px; font-weight: 600; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
	
#about .about .diagram .item02 .circle{ --translate: translateX(-20%); }
#about .about .diagram .item03 .circle{ --translate: translateX(20%); }
#about .about .diagram .item04 .circle{ --translate: translateX(-50%); }
#about .about .diagram .item05 .circle{ --translate: translateX(50%); }
#about .about .diagram .item06 .circle{ --translate: translateX(50%); }
#about .about .diagram .item07 .circle{ --translate: translateX(-50%); }
#about .about .diagram .item.aos-animate .circle{ transform: var(--translate) scale(1); opacity: 1; }

#about .about .diagram .center{ padding: calc(var(--circle) - 25px); position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#about .about .diagram .center .logo{ padding: 2px; background: linear-gradient(-138deg, #02717F, var(--orange)); border-radius: 50%; position: relative; }
#about .about .diagram .center .logo::before{ content: ""; width: 100%; height: 100%; background: linear-gradient(-138deg, #02717F, var(--orange)); border-radius: 50%; position: absolute; top: 0; left: 0; filter: blur(40px); -webkit-filter: blur(40px); will-change: filter; }
#about .about .diagram .center .logo::after{ content: ""; display: block; background: #050505; border-radius: 50%; padding-bottom: 100%; position: relative; z-index: 100; }
#about .about .diagram .center figure{ padding: 0 40px; position: absolute; top: 53%; left: 0; right: 0; transform: translateY(-50%); z-index: 150; }
#about .about .diagram .center figure img{ width: auto; height: auto; }


#about .pipeline{ margin-bottom: -500px; }
#about .pipeline .grid-box{ display: grid; grid-template-columns: 55% 45%; }
#about .pipeline svg{ max-width: 100%; height: auto; filter: drop-shadow(0 0 200px rgba(255, 255, 255, 0.09)); -webkit-filter: drop-shadow(0 0 200px rgba(255, 255, 255, 0.09)); overflow: visible; }
#about .pipeline svg .circle{ transform: scale(0); transform-box: content-box; transform-origin: center; opacity: 0; animation: mapCircle 1.5s linear infinite; }
#about .pipeline svg .logo{ transform: translateY(0); transform-box: content-box; animation: mapFloating 2s infinite; }

#about .pipeline .right{ padding-inline: 80px; padding-top: 21%; position: relative; z-index: 10; }
#about .pipeline .right span{ font-size: 18px; }
#about .pipeline .right h4{ margin: 40px 0 50px; }
#about .pipeline .right p{ font-size: 18px; }


/* history */
#about .history{ padding-top: 250px; }
#about .history > div{ position: relative; }
#about .history .cover{ width: calc(100% - 900px); padding: 0 20px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#about .history .sec{ display: grid; grid-template-columns: calc(100% - 900px) 900px; opacity: 1 !important; }
#about .history .sec:not(:last-of-type){ margin-bottom: 200px; }
#about .history .sticky{ padding: 190px 0 305px; text-align: center; position: sticky; top: calc(50% - (var(--stickyH) / 2)); left: 0; }
#about .history .sticky strong{ display: inline-block; font-family: var(--engFont); font-size: 12rem; font-weight: 700; }
#about .history .sticky strong span{ color: transparent; }

#about .history .left .sticky strong{ color: var(--orange); margin-left: -0.2em; }
#about .history .right{ transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); }
#about .history .aos-animate .right{ transform: translateY(0); opacity: 1; }
#about .history .content dl, 
#about .history .project ul li{ display: grid; grid-template-columns: 90px calc(100% - 90px); align-items: baseline; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 30px 0; }

#about .history .content dl{ font-family: var(--engFont); }
#about .history .content dl dt{ font-size: 20px; font-weight: 600; }
#about .history .content dl dd{ font-size: 19px; font-weight: 200; }
#about .history .content dl dd p:not(:last-of-type){ margin-bottom: 10px; }

#about .history .project{ margin-top: 60px; }
#about .history .project h5{ background: #FFF; font-family: var(--engFont); font-size: 24px; font-weight: 700; color: #111; padding: 10px 20px; }
#about .history .project ul li .span span:not(:last-of-type){ margin-bottom: 10px; }
#about .history .project ul li span{ height: 35px; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 14px; font-weight: 300; text-align: center; }
#about .history .project ul li p{ font-size: 20px; font-weight: 500; padding-left: 60px; }


/* pipeline */
#about .partnership .grid{ display: grid; grid-template-columns: 42.5% 57.5%; }

#about .partnership .top{ align-items: center; padding: 360px 0 370px; }
#about .partnership .top .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); align-items: flex-start; margin: -10px; }
#about .partnership .top .item{ background: #151515; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; backdrop-filter: blur(10px); padding: 70px 70px 50px; margin: 10px; }
#about .partnership .top .item:nth-of-type(even){ margin-top: 135px; }
#about .partnership .top dl{ margin-top: 40px; }
#about .partnership .top dl dt{ font-size: 26px; font-weight: 600; margin-bottom: 15px; }
#about .partnership .top dl dd{ font-size: 17px; font-weight: 200; color: rgba(255, 255, 255, 0.8); line-height: 1.8; }

#about .partnership .bottom .left ul{ margin-top: 40px; }
#about .partnership .bottom .left ul li{ font-size: 20px; font-weight: 200; color: rgba(255, 255, 255, 0.8); padding-left: 13px; position: relative; }
#about .partnership .bottom .left ul li:not(:last-of-type){ margin-bottom: 15px; }
#about .partnership .bottom .left ul li::before{ content: ""; width: 3px; height: 3px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

#about .partnership .bottom .right{ text-align: right; }
#about .partnership .bottom .flex{ display: inline-flex; padding: 20px; position: relative; }
#about .partnership .bottom .dashed{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#about .partnership .bottom .dashed svg{ width: 100%; height: auto; animation: lineDashed 0.7s linear infinite; }
#about .partnership .bottom .circle{ width: 300px; position: relative; }
#about .partnership .bottom .circle:not(:last-of-type){ margin-right: 60px; }
#about .partnership .bottom .circle::before{ content: ""; display: block; border-radius: 50%; padding-bottom: 100%; }
#about .partnership .bottom .circle figure{ text-align: center; padding: 0 30px; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#about .partnership .bottom .circle figure img{ width: auto; height: auto; }

#about .partnership .bottom .cir01::before{ background: #151515; border: 1px solid rgba(255, 255, 255, 0.2); }
#about .partnership .bottom .cir01 figure{ top: 55%; }
#about .partnership .bottom .cir01 figure img{ height: 79px; }

#about .partnership .bottom .cir02{ transition-delay: calc((var(--aosT) / 3) * 2); }
#about .partnership .bottom .cir02::before{ background: #FFF; }

@media screen and (max-width: 1600px){
	/* about */
	#about .about .diagram{
		--circle: 150px;
	}
	#about .about .left{ padding-left: 0; }
	#about .about .left h3{ margin: 45px 0 40px; }
	#about .about .diagram .circle span{ font-size: 20px; }

	#about .pipeline .right{ padding-right: 20px; }
	#about .pipeline .right span{ font-size: 16px; }
	#about .pipeline .right h4{ margin: 30px 0 35px; }

	#about .history .sticky strong{ font-size: 10rem; }

	/* history */
	#about .history .sticky{ padding: 150px 0 250px; }
	#about .history .sec:not(:last-of-type){ margin-bottom: 160px; }

	#about .history .content dl, 
	#about .history .project ul li{ padding: 25px 0; }
	#about .history .content dl dt{ font-size: 19px; }
	#about .history .content dl dd{ font-size: 18px; }

	#about .history .project h5{ font-size: 22px; }
	#about .history .project ul li p{ font-size: 18px; padding-left: 40px; }

	/* pipeline */
	#about .partnership .top{ padding: 200px 0 250px; } 
	#about .partnership .top .item{ padding: 50px; }
	#about .partnership .top .item:nth-of-type(even){ margin-top: 100px; }
	#about .partnership .top dl dt{ font-size: 23px; }

	#about .partnership .bottom .left ul{ margin-top: 30px; }
	#about .partnership .bottom .left ul li{ font-size: 18px; }
	#about .partnership .bottom .circle{ width: 250px; }
	#about .partnership .bottom .circle:not(:last-of-type){ margin-right: 40px; }
}

@media screen and (max-width: 1450px){
	/* pipeline */
	#about .partnership .top .item br{ display: none; }
}

@media screen and (max-width: 1400px){
	/* about */
	#about .pipeline .right br{ display: none; }

	/* history */
	#about .history .cover{ width: 300px; }
	#about .history .sec{ grid-template-columns: 300px calc(100% - 300px); }

	#about .history .sticky{ padding: 100px 0 200px; }
}

@media screen and (max-width: 1280px){
	/* about */
	#about .about .diagram{
		--circle: 120px;
	}
	#about .about .left h3{ margin: 25px 0 20px; }
	#about .about .diagram .item06 .circle{ transform: translateX(40%); }
	#about .about .diagram .item07 .circle{ transform: translateX(-40%); }
	#about .about .diagram .circle span{ font-size: 19px; }

	#about .pipeline{ margin-bottom: -300px; }
	#about .pipeline .right span{ font-size: 15px; }
	#about .pipeline .right h4{ margin: 15px 0 20px; }
	#about .pipeline .right p{ font-size: 17px; }

	/* history */
	#about .history{ padding-top: 130px; }
	#about .history .sticky{ padding: 70px 0 150px; }
	#about .history .sticky strong{ font-size: 8rem; }
	#about .history .sec:not(:last-of-type){ margin-bottom: 100px; }

	#about .history .content dl, 
	#about .history .project ul li{ grid-template-columns: 80px calc(100% - 80px); padding: 20px 0; }
	#about .history .content dl dt{ font-size: 18px; }
	#about .history .content dl dd{ font-size: 17px; }

	#about .history .project{ margin-top: 40px; }
	#about .history .project h5{ font-size: 20px; padding: 7px 15px; }
	#about .history .project ul li span{ height: 32px; }
	#about .history .project ul li p{ font-size: 17px; padding-left: 20px; }

	/* partnership */
	#about .partnership .top{ padding: 100px 0 120px; } 
	#about .partnership .top .item{ padding: 30px; }
	#about .partnership .top .item:nth-of-type(even){ margin-top: 70px; }
	#about .partnership .top .item figure img{ max-height: 80px; }
	#about .partnership .top dl{ margin-top: 30px; }
	#about .partnership .top dl dt{ font-size: 21px; margin-bottom: 10px; }

	#about .partnership .bottom .left ul{ margin-top: 20px; }
	#about .partnership .bottom .left ul li{ font-size: 17px; }
	#about .partnership .bottom .circle{ width: 200px; }
	#about .partnership .bottom .circle:not(:last-of-type){ margin-right: 50px; }
}

@media screen and (max-width: 1100px){
	/* pipeline */
	#about .partnership .grid{ grid-template-columns: repeat(1, 100%); }
	#about .partnership .grid .left{ padding-bottom: 30px; }

	#about .partnership .bottom .flex{ width: 100%; }
	#about .partnership .bottom .circle{ width: calc((100% - 60px) / 2); }
	#about .partnership .bottom .circle:not(:last-of-type){ margin-right: 60px; }
}

@media screen and (max-width: 1000px){
	/* about */
	#about .about .grid-box{ grid-template-columns: repeat(1, 100%); }
	#about .about .left{ padding-right: 0; padding-bottom: 30px; }

	#about .about .diagram{ max-width: 700px; margin-inline: auto; }
	#about .about .diagram .border02{ width: 150%; }

	#about .history .right{ border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 10px; }

	#about .pipeline{ margin-bottom: -200px; }
	#about .pipeline .grid-box{ display: flex; flex-direction: column-reverse; }
	#about .pipeline .left{ padding-right: 20px; }
	#about .pipeline .right{ padding: 0 20px; margin-bottom: -7%; }

	/* history */
	#about .history{ padding-top: 80px; }
	#about .history .cover{ display: none; }
	#about .history .sticky{ padding: 0 0 10px; }
	#about .history .sticky strong span{ color: #FFF; }

	#about .history .sec{ grid-template-columns: repeat(1, 100%); transform: translateY(var(--aosP)); opacity: 0 !important; transition: transform var(--aosT), opacity var(--aosT); }
	#about .history .sec.aos-animate{ transform: translateY(0); opacity: 1 !important; }
	#about .history .right{ transform: unset; opacity: 1; transition: unset; }
	#about .history .project h5{ font-size: 18px; }

	/* pipeline */
	#about .partnership .top .item{ padding: 20px; }
	#about .partnership .top dl{ margin-top: 20px; }
	#about .partnership .top dl dt{ font-size: 19px; }
}

@media screen and (max-width: 900px){
	/* history */
	#about .history .sticky strong{ font-size: 7rem; }

	/* pipeline */
	#about .partnership .bottom .flex{ padding: 10px; }
	#about .partnership .bottom .circle{ width: calc((100% - 40px) / 2); }
	#about .partnership .bottom .circle:not(:last-of-type){ margin-right: 40px; }
}

@media screen and (max-width: 600px){
	/* about */
	#about .about .diagram{
		--circle: 100px;
	}
	#about .about .diagram .circle span{ font-size: 17px; }
	#about .about .diagram .center figure{ padding: 0 25px; }
}


/* AI */
#ai{ padding-top: 0; }
#ai br.m{ display: none; }
#ai .overflow{ overflow: hidden; }
#ai .sec-box section:first-of-type{ padding-top: var(--subPt); }
#ai .sec-title{ text-align: center; margin-bottom: 60px; }
#ai .sec-title h4{ font-weight: 600; line-height: 1.3; }
#ai .sec-title p{ margin-top: 25px; }
#ai .video video{ width: 100%; }

#ai .concept-wrap,
#ai .concept-wrap .slick-list{ overflow: visible; }
#ai .concept-wrap .slick-list{ margin-right: -20px; }
#ai .concept{ margin-right: 20px; }
#ai .concept figure{ display: block; padding-bottom: 60.76%; position: relative; overflow: hidden; }
#ai .concept figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


#ai .clip-box{
	--side: 200px;
}
#ai .clip-box{ position: relative; cursor: none; }
#ai .clip-box .after,
#ai .clip-box .cover{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

#ai .clip-box .after{ clip-path: inset(0 0 0 var(--side)); -webkit-clip-path: inset(0 0 0 var(--side)); transition: clip-path 0.5s; }

#ai .clip-box .cover{ display: flex; justify-content: space-between; padding: 20px; }
#ai .clip-box .cover::before{ content: ""; width: 2px; height: 100%; background: rgba(255, 255, 255, 0.6); position: absolute; top: 0; left: var(--side); transition: left 0.5s; }
#ai .clip-box .cover span{ width: 90px; height: 43px; display: inline-flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, 0.6); line-height: 1; border: 1px solid rgba(255, 255, 255, 0.3); transition: color 0.3s, border-color 0.3s; }
#ai .clip-box .cover span.on{ border-color: rgba(255, 255, 255, 0.6); color: #FFF; }

#ai .clip-box.active .after{ clip-path: inset(0 0 0 calc(100% - var(--side))); -webkit-clip-path: inset(0 0 0 calc(100% - var(--side))); }
#ai .clip-box.active .cover::before{ left: calc(100% - var(--side)); }



#ai .wave{
	--titH: 382px;
	--side: calc((100% - 1600px) / 2);
	--videoH: 400px;
}

#ai .wave{ height: 200vh; }
#ai .wave .vh{ height: 100vh; position: sticky; top: 0; left: 0; opacity: 1 !important; }
#ai .wave .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; overflow: hidden; clip-path: inset(var(--titH) var(--side) calc(100% - var(--titH) - var(--videoH)) var(--side)); -webkit-clip-path: inset(var(--titH) var(--side) calc(100% - var(--titH) - var(--videoH)) var(--side)); transition: clip-path 1.2s; }
#ai .wave .bg::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1.2s; }
#ai .wave .bg video{ 
	min-height: 110vh;
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	width: 100vw;
	height: 60vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	pointer-events: none;
}

#ai .wave .bg + div{ height: 100%; }
#ai .wave .sec-title{ margin-bottom: 0; position: relative; top: 0; transform: translateY(0); transition: top 1.2s, transform 1.2s; }
#ai .wave .sec-title h4{ transition: font-size 1.2s; }

#ai .wave .vh.aos-animate .bg{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#ai .wave .vh.aos-animate .bg::after{ opacity: 1; }
#ai .wave .vh.aos-animate .sec-title{ top: 50%; transform: translateY(-50%); }
#ai .wave .vh.aos-animate .sec-title h4{ font-size: 12rem; }

@media screen and (max-width: 1640px){
	#ai .wave{
		--side: 20px;
	}
}

@media screen and (max-width: 1600px){
	#ai .sec-title{ margin-bottom: 40px; }

	#ai .clip-box{
		--side: 150px;
	}
	#ai .clip-box .cover{ padding: 15px 20px; }
	#ai .clip-box .cover span{ width: 80px; height: 36px; font-size: 17px; }

	#ai .wave{
		--titH: 302px;
	}
	#ai .wave .vh.aos-animate .sec-title h4{ font-size: 10rem; }
}

@media screen and (max-width: 1280px){
	#ai .sec-title{ margin-bottom: 25px; }
	#ai .sec-title p{ margin-top: 10px; }

	#ai .clip-box{
		--side: 100px;
	}
	#ai .clip-box .cover{ padding: 10px 20px; }
	#ai .clip-box .cover span{ width: 70px; height: 33px; font-size: 16px; }

	#ai .wave{
		--titH: 222px;
	}
	#ai .wave .vh.aos-animate .sec-title h4{ font-size: 8rem; }
}

@media screen and (max-width: 900px){
	#ai .clip-box{
		--side: 10px;
	}
	#ai .clip-box .cover span{ width: 60px; height: 30px; font-size: 15px; }

	#ai .wave{
		--titH: 215px;
	}
}

@media screen and (max-width: 550px){
	#ai br.m{ display: block; }
}


/* CONTACT - CAREERS */
#career{ overflow: hidden; }
#career .sec-title{ margin-bottom: 80px; }
#career .sec-title *{ font-weight: 600; }

#career .dl{ display: grid; grid-template-columns: repeat(2, 50%); margin: 0 -10px; }
#career .dl dl{ border-top: 1px solid #2A2A2A; border-bottom: 1px solid #2A2A2A; padding: 40px; margin: 0 10px; margin-bottom: -1px; }
#career .dl dl.block{ grid-column: auto / span 2; }
#career .dl dl dt{ font-size: 24px; font-weight: 500; margin-bottom: 20px; }
#career .dl dl dd{ font-size: 22px; font-weight: 200; color: rgba(255, 255, 255, 0.8); }
#career .dl dl dd strong{ display: inline-block; font-weight: 500; padding-right: 15px; }
#career .dl ul li{ padding-left: 18px; position: relative; }
#career .dl ul li:not(:last-of-type){ margin-bottom: 10px; }
#career .dl ul li::before{ content: ""; width: 3px; height: 3px; background: #FFF; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

#career .dl .mark{ display: flex; flex-wrap: wrap; }
#career .dl .mark span{ display: inline-block; background: rgba(255, 255, 255, 0.05); font-size: 16px; font-weight: 400; padding: 10px 15px; margin: 5px; }


#career .intro > div{ position: relative; }
#career .intro .symbol{ max-width: 998px; width: 70%; position: absolute; top: 100%; left: 0; }
#career .intro .symbol::before{ content: ""; display: block; padding-bottom: 50.301%; background: url("/img/sub/contact/symbol_bg.svg") no-repeat center right / contain; }

#career .intro .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); margin-top: 60px; }
#career .intro .left{ padding-right: 20px; }
#career .intro .sec-title{ margin-bottom: 0; }

#career .intro .right{ padding-top: 90px; position: relative; }
#career .intro .right::before{ content: ""; width: 25px; height: 2px; background: #FFF; position: absolute; top: 70px; left: 0; }
#career .intro .right p{ font-size: 20px; font-weight: 200; color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin-top: 25px; }
#career .intro .right p.bold{ font-size: 22px; font-weight: 500; color: #FFF; }


#career .position{ position: relative; z-index: 10; }
#career .position .sec-title{ margin-bottom: 60px; }


#career .tab-slide{ border-top: 1px solid rgba(255, 255, 255, 0.15); }
#career .tab-slide .tit{ min-height: 90px; display: grid; grid-template-columns: calc(100% - 22px) 22px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-family: var(--engFont); font-size: 26px; padding: 10px 30px; cursor: pointer; transition: background 0.3s; }
#career .tab-slide .tit h6{ font-weight: 400; color: #FFF; text-stroke: 0.015em transparent; -webkit-text-stroke: 0.015em transparent; padding-right: 30px; transition: color 0.3s, text-stroke-color 0.3s; }
#career .tab-slide .tit i{ display: inline-block; position: relative; }
#career .tab-slide .tit i::before,
#career .tab-slide .tit i::after{ content: ""; width: 100%; height: 2px; background: #FFF; transition: background 0.3s, transform 0.3s; }
#career .tab-slide .tit i::before{ display: block; }
#career .tab-slide .tit i::after{ position: absolute; top: 0; left: 0; transform: rotate(90deg); }

#career .tab-slide .content{ display: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 40px; padding-bottom: 60px; }
#career .tab-slide .content dl:not(:last-of-type){ margin-bottom: 40px; }
#career .tab-slide .content dl dt{ font-size: 16px; font-weight: 400; margin-bottom: 20px; }
#career .tab-slide .content dl dt span{ display: inline-block; background: #151515; border: 1px solid rgba(255, 255, 255, 0.3); line-height: 1; padding: 11px 20px; }
#career .tab-slide .content dl dd{ font-size: 19px; font-weight: 200; padding-left: 18px; position: relative; }
#career .tab-slide .content dl dd:not(:last-of-type){ margin-bottom: 5px; }
#career .tab-slide .content dl dd::before{ content: ""; width: 3px; height: 3px; background: #FFF; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

#career .tab-slide .on .tit{ background: #FFF; }
#career .tab-slide .on .tit h6{ color: #111; text-stroke-color: #111; }
#career .tab-slide .on .tit i::before,
#career .tab-slide .on .tit i::after{ background: #111; }
#career .tab-slide .on .tit i::after{ transform: rotate(180deg); }


#career .step .diagram{ overflow: hidden; }
#career .step .diagram ul{ display: grid; grid-template-columns: repeat(4, 25%); margin: -40px; }
#career .step .diagram ul li{ padding: 10px; position: relative; border: 1px dashed rgba(255, 255, 255, 0.6); border-radius: 50%; margin: 40px; }
#career .step .diagram ul li::before{ content: ""; display: block; background: transparent; border-radius: 50%; padding-bottom: 100%; transition: background 0.4s; }
#career .step .diagram ul li::after{ content: ""; width: 50px; height: 50px; background: url("/img/sub/contact/step_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: -40px; transform: translate(50%, -50%); }
#career .step .diagram ul li:last-of-type::after{ display: none; }
#career .step .diagram .txt{ text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#career .step .diagram .txt span{ font-family: var(--engFont); font-size: 17px; font-weight: 400; text-stroke: 0.02em transparent; -webkit-text-stroke: 0.02em transparent; opacity: 0.8; transition: color 0.4s, text-stroke-color 0.4s; }
#career .step .diagram .txt .icon{ margin: 20px 0; }
#career .step .diagram .txt .icon img{ transition: filter 0.4s; }
#career .step .diagram .txt p{ font-size: 24px; font-weight: 500; text-stroke: 0.015em transparent; -webkit-text-stroke: 0.015em transparent; transition: color 0.4s, text-stroke-color 0.4s; }

#career .step .diagram ul li.on::before{ background: #FFF; }
#career .step .diagram ul li.on .txt span{ color: #111; text-stroke-color: #111; -webkit-text-stroke-color: #111; }
#career .step .diagram ul li.on .icon img{ filter: invert(1); -webkit-filter: invert(1); }
#career .step .diagram ul li.on .txt p{ color: #111; text-stroke-color: #111; -webkit-text-stroke-color: #111; }

#career .step .dl dl dd{ font-family: var(--engFont); }

#career .step .asterisk{ margin-top: 40px; }
#career .step .asterisk li{ font-size: 17px; font-weight: 100; color: rgba(255, 255, 255, 0.6); padding-left: 21px; position: relative; }
#career .step .asterisk li:not(:last-of-type){ margin-bottom: 10px; }
#career .step .asterisk li::before{ content: ""; width: 11px; height: 12px; background: url("/img/sub/contact/asterisk.svg") no-repeat center center / contain; position: absolute; top: 1px; left: 0; }


#career .environment .dl ul{ margin-bottom: -20px; }
#career .environment .dl ul li{ margin-bottom: 20px; }
#career .environment .dl ul.grid{ display: grid; grid-template-columns: repeat(2, 50%); margin-inline: -50px; }
#career .environment .dl ul.grid li{ margin-inline: 50px; }
#career .environment .dl ul li.flex{ display: flex; align-items: center; }
#career .environment .dl ul li.flex::before{ top: 50%; }
#career .environment .dl ul li.flex p{ margin-right: 15px; }
#career .environment .dl ul li.flex .mark{ margin: -5px 0; }

#career .environment .metro{ display: flex; flex-wrap: wrap; align-items: center; margin-top: 15px; }
#career .environment .metro p{ position: relative; padding-left: 34px; margin-right: 5px; }
#career .environment .metro p::before{ content: ""; width: 24px; height: 24px; background: url("/img/sub/contact/icon_metro.svg") no-repeat center center / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }


#career .welfare ul{ display: grid; grid-template-columns: repeat(5, 20%); margin: -10px; }
#career .welfare ul li{ background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); text-align: center; padding: 50px 20px; margin: 10px; transition: background 0.3s; }
#career .welfare ul li img{ transition: filter 0.3s; }
#career .welfare ul li p{ font-size: 22px; font-weight: 500; color: #FFF; text-stroke: 0.015em transparent; -webkit-text-stroke: 0.015em transparent; margin-top: 30px; transition: color 0.3s, text-stroke-color 0.3s; }

@media screen and (hover: hover) and (pointer: fine){
	#career .welfare ul li:hover{ background: #FFF; }
	#career .welfare ul li:hover img{ filter: invert(1); -webkit-filter: invert(1); }
	#career .welfare ul li:hover p{ color: #111; text-stroke-color: #111; -webkit-stroke-color: #111; }
}

@media screen and (max-width: 1600px){
	#career .sec-title{ margin-bottom: 50px; }

	#career .dl dl{ padding: 30px; }
	#career .dl dl dt{ font-size: 22px; }
	#career .dl dl dd{ font-size: 20px; }
	#career .dl .mark span{ padding: 8px 12px; }

	#career .intro .grid-box{ margin-top: 40px; }
	#career .intro .right{ padding-top: 72px; }
	#career .intro .right::before{ top: 52px; }
	#career .intro .right br{ display: none; }
	#career .intro .right p{ font-size: 18px; }
	#career .intro .right p.bold{ font-size: 20px; }

	#career .position .sec-title{ margin-bottom: 40px; }
	#career .tab-slide .tit{ min-height: 80px; font-size: 24px; padding-inline: 20px; }
	#career .tab-slide .content{ padding: 25px 25px 40px; }
	#career .tab-slide .content dl dt span{ padding: 9px 12px; }
	#career .tab-slide .content dl dd{ font-size: 18px; }

	#career .step .diagram .txt span{ font-size: 16px; }
	#career .step .diagram .txt p{ font-size: 21px; }

	#career .step .asterisk{ margin-top: 30px; }
	#career .step .asterisk li{ font-size: 16px; }
	
	#career .environment .dl ul{ margin-bottom: -15px; }
	#career .environment .dl ul li{ margin-bottom: 15px; }
	#career .environment .dl ul.grid{ margin-inline: -40px; }
	#career .environment .dl ul.grid li{ margin-inline: 40px; }

	#career .welfare ul li{ padding-block: 40px; }
	#career .welfare ul li p{ font-size: 20px; margin-top: 20px; }
}

@media screen and (max-width: 1400px){
	#career .intro .grid-box{ grid-template-columns: 45% 55%; }

	#career .step .diagram ul{ margin: -25px; }
	#career .step .diagram ul li{ margin: 25px; }
	#career .step .diagram ul li::after{ right: -25px; }

	#career .environment .metro{ margin-top: 10px; }
}

@media screen and (max-width: 1280px){
	#career .sec-title{ margin-bottom: 30px; }

	#career .dl dl{ padding: 20px; }
	#career .dl dl dt{ font-size: 20px; margin-bottom: 10px; }
	#career .dl dl dd{ font-size: 18px; }
	#career .dl ul li{ padding-left: 13px; }
	#career .dl ul li:not(:last-of-type){ margin-bottom: 5px; }

	#career .dl .mark span{ font-size: 15px; padding: 7px 10px; }

	#career .intro .grid-box{ margin-top: 20px; }
	#career .intro .right{ padding-top: 57px; }
	#career .intro .right::before{ top: 40px; }
	#career .intro .right p{ font-size: 17px; margin-top: 15px; }
	#career .intro .right p.bold{ font-size: 19px; }

	#career .position .sec-title{ margin-bottom: 20px; }
	#career .tab-slide .tit{ min-height: 70px; grid-template-columns: calc(100% - 18px) 18px; font-size: 22px; padding-inline: 15px; }
	#career .tab-slide .content{ padding: 25px 15px; }
	#career .tab-slide .content dl dt{ margin-bottom: 15px; }
	#career .tab-slide .content dl dt span{ font-size: 15px; padding: 8px 10px; }
	#career .tab-slide .content dl dd{ font-size: 17px; padding-left: 13px; }

	#career .step .diagram .txt span{ font-size: 15px; }
	#career .step .diagram .txt .icon{ margin: 15px 0; }
	#career .step .diagram .txt .icon img{ height: 70px; }
	#career .step .diagram .txt p{ font-size: 18px; }

	#career .step .asterisk{ margin-top: 20px; }
	#career .step .asterisk li{ font-size: 15px; }
	#career .step .asterisk li:not(:last-of-type){ margin-bottom: 5px; }

	#career .environment .metro{ margin-top: 5px; }
	#career .environment .dl ul{ margin-bottom: -10px; }
	#career .environment .dl ul li{ margin-bottom: 10px; }
	#career .environment .dl ul.grid{ margin-inline: -30px; }
	#career .environment .dl ul.grid li{ margin-inline: 30px; }

	#career .welfare ul li{ padding-block: 30px; }
	#career .welfare ul li .icon img{ height: 85px; }
	#career .welfare ul li p{ font-size: 18px; margin-top: 15px; }
}

@media screen and (max-width: 1200px){
	#career .step .diagram ul{ margin: -15px; }
	#career .step .diagram ul li{ margin: 15px; }
	#career .step .diagram ul li::after{ width: 40px; height: 40px; right: -15px; }
	#career .step .diagram .txt .icon{ margin: 10px 0; }
}

@media screen and (max-width: 1100px){
	#career .welfare ul{ grid-template-columns: repeat(4, 25%); }
}

@media screen and (max-width: 1000px){
	#career .intro .grid-box{ grid-template-columns: repeat(1, 100%); }
	#career .intro .left{ padding-right: 0; }
	#career .intro .right{ padding-top: 30px; }
	#career .intro .right::before{ top: 25px; }

	#career .step .diagram{ max-width: 500px; margin: 0 auto; }
	#career .step .diagram ul{ grid-template-columns: repeat(2, 50%); }
	#career .step .diagram ul li:nth-of-type(2n)::after{ display: none; }
	#career .step .diagram .txt .icon img{ height: 60px; }
}

@media screen and (max-width: 900px){
	#career .dl{ grid-template-columns: repeat(1, 100%); }
	#career .dl dl{ padding: 17px 15px; }
	#career .dl dl.block{ grid-column: unset; }
	#career .dl dl dt{ font-size: 18px; }
	#career .dl dl dd{ font-size: 17px; }

	#career .tab-slide .tit{ min-height: 60px; font-size: 20px; }

	#career .environment .dl ul.grid{ grid-template-columns: repeat(1, 100%); }

	#career .welfare ul{ grid-template-columns: repeat(3, calc(100% / 3)); }
	#career .welfare ul li{ padding-block: 20px; }
	#career .welfare ul li p{ font-size: 17px; }
}

@media screen and (max-width: 650px){
	#career .welfare ul{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 600px){
	#career .environment .metro{ margin-top: 10px; }
	#career .environment .metro .mark{ width: 100%; margin-top: 7px; margin-left: -5px; }
}


/* CONTACT - CONTACT */
#contact .sec-title{ text-transform: uppercase; margin-bottom: 60px; }
#contact .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); }
#contact section .grid-box:not(:last-of-type){ margin-bottom: 20px; }
#contact .left{ padding-right: 20px; }
#contact .right{ display: flex; flex-direction: column; justify-content: center; background: #111; padding: 30px 60px; }

#contact .map{ min-height: 320px; position: relative; }
#contact .map iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

#contact address dl dt{ font-size: 34px; font-weight: 500; margin-bottom: 30px; }
#contact address dl dd{ display: flex; align-items: baseline; font-size: 19px; font-weight: 200; color: rgba(255, 255, 255, 0.8); }
#contact address dl dd strong{ display: inline-block; font-family: var(--engFont); font-weight: 600; color: #FFF; padding-right: 15px; }

@media screen and (max-width: 1600px){
	#contact .sec-title{ margin-bottom: 40px; }

	#contact .right{ padding: 30px 40px; }
	#contact address dl dt{ font-size: 28px; margin-bottom: 20px; }
	#contact address dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#contact .sec-title{ margin-bottom: 20px; }

	#contact .right{ padding: 30px; }
	#contact address dl dt{ font-size: 24px; margin-bottom: 15px; }
	#contact address dl dd{ font-size: 17px; }
}

@media screen and (max-width: 1000px){
	#contact .grid-box{ grid-template-columns: repeat(1, 100%); }
	#contact section .grid-box:not(:last-of-type){ margin-bottom: 60px; }
	#contact .left{ padding-right: 0; padding-bottom: 20px; }
}

@media screen and (max-width: 900px){
	#contact .right{ padding: 20px; }
	#contact address dl dt{ font-size: 21px; }
	#contact address dl dd{ font-size: 16px; }
}