/* 서브 비주얼 */
#visual .bg1{ background: url("/img/sub/bg_company.jpg") no-repeat center left 20% / cover; }
#visual .bg2{ background: url("/img/sub/bg_rnd.jpg") no-repeat center left 55% / cover; }
#visual .bg3{ background: url("/img/sub/bg_product.jpg") no-repeat center center / cover; }
#visual .bg4{ background: url("/img/sub/bg_pr.jpg") no-repeat center center / cover; }
#visual .bg5{ background: url("/img/sub/bg_contact.jpg") no-repeat center center / cover; }


/* visual */
#visual{ padding-top: 100px; overflow: hidden; }
#visual h2{ font-family: var(--engFont); font-size: 5.4rem; font-weight: 600; color: #111; text-align: center; padding: 40px 0 80px; }
#visual h2::before{ content: ""; width: 54px; height: 50px; display: inline-block; background: url("/img/sub/icon_symbol.svg") no-repeat center center / contain; vertical-align: middle; margin-right: 20px; transform: translateY(-5px); }
#visual .overflow{ min-height: 250px; padding-bottom: 25.197%; position: relative; overflow: hidden; }
#visual .bg{ height: 100%; position: absolute; top: 0; left: 0; right: 0; transform: scale(1.2); clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); animation: visualMotion01 1.4s 0.3s both; }
#visual .bg::after{ content: ""; width: 100%; height: 100%; background: var(--mainColor); position: absolute; top: 0; left: 0; clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); animation: visualMotion02 0.7s 1s both; }


/* lnb */
#lnb ul{ display: flex; flex-wrap: wrap; align-items: center; margin: -22px; }
#lnb ul li{ position: relative; }
#lnb ul li::before{ content: ""; width: 6px; height: 10px; background: url("/img/sub/icon_lnb_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#lnb ul li:first-of-type::before{ display: none; }
#lnb ul li a{ display: inline-flex; font-family: var(--engFont); font-size: 18px; font-weight: 500; color: #111; padding: 22px; }


/* common */
#sub{
	--subPt: 120px;
	--subPb: 200px;
}
#sub{ padding-top: var(--headerH); }
.sub-content{ padding: var(--subPt) 0 var(--subPb); }
#visual.false + #content .sub-content{ padding-top: 0; }
.grayBg{ background: var(--grayBg); }
.tc{ text-align: center; }


/* 스크롤바 커스텀 */
.scroll-x{ overflow-x: auto; overflow-y: clip; }
.scroll-y{ overflow-x: clip; overflow-y: auto; }
.scroll-x::-webkit-scrollbar, 
.scroll-y::-webkit-scrollbar{ width: 45px; height: 45px; }
.scroll-x::-webkit-scrollbar-thumb, 
.scroll-y::-webkit-scrollbar-thumb{ background: var(--mainColor); background-clip: padding-box; border: 20px solid transparent; border-radius: 100px; }
.scroll-x::-webkit-scrollbar-track,
.scroll-y::-webkit-scrollbar-track{ background: #EEE; background-clip: padding-box; border: 20px solid transparent; border-radius: 100px; }


/* 간격 */
.pt120{ padding-top: 120px; }
.pb120{ padding-bottom: 120px; }
.pt180{ padding-top: 180px; }
.pb180{ padding-bottom: 180px; }


/* page-title */
.page-title{ text-align: center; margin-bottom: 80px; }
.page-title h3{ font-size: 5.4rem; font-weight: 600; color: #111; }
.page-title p{ font-size: 21px; font-weight: 300; color: #11; line-height: 1.5; margin-top: 30px; }


/* sec-title */
.sec-title{ margin-bottom: 80px; }
.sec-title h4{ font-size: 32px; font-weight: 600; color: #111; }
.sec-title p{ font-size: 21px; font-weight: 300; color: #111; line-height: 1.5; margin-top: 30px; }


/* tab-menu */
.tab-menu{ text-align: center; margin-bottom: 80px; }
.tab-menu ul{ max-width: 100%; display: inline-flex; justify-content: center; align-items: center; background: var(--grayBg); border-radius: 99px; padding: 10px; }
.tab-menu ul li{ flex-grow: 1; flex-shrink: 1; width: 235px; }
.tab-menu ul li a{ width: 100%; min-height: 50px; display: inline-flex; justify-content: center; align-items: center; background: transparent; border: none; border-radius: 99px; font-size: 19px; font-weight: 500; color: #CCC; padding: 10px; }
.tab-menu ul li.on a{ background: var(--mainColor); color: #FFF; }


/* viewmore */
.viewmore{ display: inline-flex; justify-content: center; align-items: center; font-family: var(--engFont); font-size: 21px; font-weight: 500; color: #FFF; }
.viewmore i{ width: 36px; height: 36px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 50%; margin-left: 20px; }
.viewmore i::before{ content: ""; width: 100%; height: 12px; display: block; background: url("/img/sub/icon_viewmore.svg") no-repeat center center / contain; }

/* btn */
.btn{ width: 320px; height: 85px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 100px; font-size: 21px; font-weight: 500; color: #FFF !important; }


/* icon-dl */
.icon-dl{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -12px; }
.icon-dl > *{ margin: 12px; }
.icon-dl .item{ background: var(--grayBg); border-radius: 20px; text-align: center; padding: 70px 30px; }
.icon-dl .item dl dt{ font-size: 27px; font-weight: 600; color: #111; margin: 30px 0; }
.icon-dl .item dl dd{ font-size: 17px; font-weight: 500; color: #888; line-height: 1.7; }

@media screen and (max-width: 1700px){
	/* visual */
	#visual{ padding-top: 60px; }
	#visual h2{ padding-bottom: 60px; }
	#visual h2::before{ width: 40px; height: 38px; }

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

	/* common */
	#sub{
		--subPt: 90px;
		--subPb: 150px;
	}

	/* 간격 */
	.pt120{ padding-top: 80px; }
	.pb120{ padding-bottom: 80px; }
	.pt180{ padding-top: 140px; }
	.pb180{ padding-bottom: 140px; }

	/* page-title */
	.page-title{ margin-bottom: 60px; }
	.page-title p{ font-size: 19px; margin-top: 20px; }

	/* sec-title */
	.sec-title{ margin-bottom: 60px; }
	.sec-title h4{ font-size: 28px; }
	.sec-title p{ font-size: 19px; margin-top: 20px; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 60px; }
	.tab-menu ul li{ width: 170px; }
	.tab-menu ul li a{ font-size: 18px; }

	/* viewmore */
	.viewmore{ font-size: 19px; }
	.viewmore i{ width: 33px; height: 33px; margin-left: 15px; }
	.viewmore i::before{ height: 10px; }

	/* btn */
	.btn{ width: 260px; height: 75px; font-size: 19px; }

	/* icon-dl */
	.icon-dl .item{ padding-block: 50px; }
	.icon-dl .item dl dt{ font-size: 24px; margin: 25px 0; }
}

@media screen and (max-width: 1280px){
	/* visual */
	#visual{ padding-top: 30px; }
	#visual h2{ padding-bottom: 45px; }
	#visual h2::before{ width: 32px; height: 30px; margin-right: 10px; }

	/* lnb */
	#lnb ul{ margin: -15px; }
	#lnb ul li a{ font-size: 16px; padding: 15px; }
	#lnb ul .home img{ width: auto; height: 13px; }

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

	/* 간격 */
	.pt120{ padding-top: 60px; }
	.pb120{ padding-bottom: 60px; }
	.pt180{ padding-top: 100px; }
	.pb180{ padding-bottom: 100px; }

	/* page-title */
	.page-title{ margin-bottom: 30px; }
	.page-title p{ font-size: 17px; margin-top: 15px; }

	/* sec-title */
	.sec-title{ margin-bottom: 30px; }
	.sec-title h4{ font-size: 24px; }
	.sec-title p{ font-size: 17px; margin-top: 15px; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 30px; }
	.tab-menu ul{ padding: 7px; }
	.tab-menu ul li{ width: 140px; }
	.tab-menu ul li a{ min-height: 45px; font-size: 17px; padding: 7px; }

	/* viewmore */
	.viewmore{ font-size: 18px; }
	.viewmore i{ width: 28px; height: 28px; margin-left: 10px; }

	/* btn */
	.btn{ width: 200px; height: 65px; font-size: 18px; }

	/* icon-dl */
	.icon-dl .item{ padding-block: 30px; }
	.icon-dl .item dl dt{ font-size: 21px; margin: 20px 0; }
}

@media screen and (max-width: 1000px){
	/* icon-dl */
	.icon-dl{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 900px){
	/* visual */
	#visual h2{ font-size: 5rem; padding: 30px 0 35px; }
	#visual h2::before{ width: 25px; height: 23px; transform: translateY(-3px); }

	/* page-title */
	.page-title h3{ font-size: 5rem; }

	/* btn */
	.btn{ width: 180px; height: 60px; }

	/* icon-dl */
	.icon-dl .item dl dt{ font-size: 19px; margin: 15px 0 10px; }
	.icon-dl .item dl dd{ font-size: 16px; }
}

@media screen and (max-width: 650px){
	/* icon-dl */
	.icon-dl{ grid-template-columns: repeat(1, 100%); }
}


/* COMPANY - ABOUT */
#about{ overflow: hidden; }
#about .grid-box{ display: grid; grid-template-columns: 57% 43%; }
#about .img img{ width: 100%; height: 100%; object-fit: cover; }

#about .text{ padding: 18px 0; padding-right: 60px; }
#about .text h3{ font-size: 5.4rem; font-weight: 600; color: #111; }
#about .text h3 em{ color: var(--mainColor); }
#about .text p{ font-size: 32px; font-weight: 600; color: #111; line-height: 1.8; }
#about .text .p-box{ padding: 60px 0 30px; }
#about .text .p-box p{ font-size: 19px; font-weight: 300; color: #333; line-height: 1.8; }
#about .text .p-box p:not(:last-of-type){ margin-bottom: 30px; }  

@media screen and (max-width: 1700px){
	#about .text p{ font-size: 28px; }
	#about .text .p-box{ padding: 40px 0 20px; }
	#about .text .p-box p{ font-size: 18px; }
	#about .text .p-box p br{ display: none; }
}

@media screen and (max-width: 1280px){
	#about .text p{ font-size: 24px; }
	#about .text .p-box{ padding-top: 30px; }
	#about .text .p-box p{ font-size: 17px; }
	#about .text .p-box p:not(:last-of-type){ margin-bottom: 20px; } 
}

@media screen and (max-width: 1000px){
	#about .grid-box{ grid-template-columns: repeat(1, 100%); }
	#about .img{ order: 1; }
	#about .text{ order: 2; padding: 35px 0 0; }
}

@media screen and (max-width: 900px){
	#about .text h3{ font-size: 5rem; }
	#about .text p{ font-size: 21px; }
	#about .text p br{ display: none; }
}

@media screen and (max-width: 499px){
	#about .text h3{ font-size: 4.8rem; }
}


/* COMPANY - 회사연혁 */
#history section:not(:last-of-type){ padding-bottom: 180px; }
#history .grid-box{ display: grid; grid-template-columns: 580px calc(100% - 580px); }
#history .left{ padding-right: 180px; }
#history .left h6{ font-family: var(--engFont); font-size: 6.4rem; font-weight: 700; color: #111; text-align: right; }

#history .right{ border-top: 1px solid #000; }
#history .right dl{ display: grid; grid-template-columns: 200px calc(100% - 200px); font-size: 19px; padding: 25px; }
#history .right dl:not(:first-of-type){ border-top: 1px solid var(--borderC); }
#history .right dl:not(:last-of-type){ margin-bottom: 25px; }
#history .right dl dt{ font-family: var(--engFont); font-weight: 600; color: #111; }
#history .right dl dd{ font-weight: 300; color: #333; }

@media screen and (max-width: 1700px){
	#history section:not(:last-of-type){ padding-bottom: 130px; }
	#history .grid-box{ grid-template-columns: 450px calc(100% - 450px); }
	#history .left{ padding-right: 100px; }
	#history .right dl{ grid-template-columns: 170px calc(100% - 170px); font-size: 18px; }
}

@media screen and (max-width: 1400px){
	#history .grid-box{ grid-template-columns: 320px calc(100% - 320px); }
	#history .left{ padding-right: 70px; }
	#history .right dl{ grid-template-columns: 130px calc(100% - 130px); }
}

@media screen and (max-width: 1280px){
	#history section:not(:last-of-type){ padding-bottom: 80px; }
	#history .grid-box{ grid-template-columns: 200px calc(100% - 200px); }
	#history .right dl{ grid-template-columns: 100px calc(100% - 100px); font-size: 17px; padding: 18px 10px; }
	#history .right dl:not(:last-of-type){ margin-bottom: 15px; }
}

@media screen and (max-width: 900px){
	#history section:not(:last-of-type){ padding-bottom: 60px; }
	#history .grid-box{ grid-template-columns: repeat(1, 100%); }
	#history .left{ padding: 0 0 15px 0; }
	#history .left h6{ font-size: 5.5rem; text-align: left; }
	#history .right dl{ grid-template-columns: 70px calc(100% - 70px); }
}


/* COMPANY - 리더쉽 & 어드바이저 */
#leadership .grid-box{ display: grid; }
#leadership .item dl dt{ border-bottom: 1px dashed #AAA; font-weight: 600; color: #111; }
#leadership .item dl dd{ font-size: 19px; font-weight: 300; color: #333; }

#leadership .leadership .grid-box{ grid-template-columns: repeat(2, 50%); margin: -20px; }
#leadership .leadership .grid-box > *{ margin: 20px; }
#leadership .leadership .item{ background: var(--grayBg); border-radius: 40px; padding: 80px; }
#leadership .leadership .block{ grid-column: auto / span 2; }
#leadership .leadership .grid{ height: 100%; display: grid; grid-template-columns: calc(100% - 220px) 220px; position: relative; }
#leadership .leadership .grid::before{ content: ""; height: 35px; background: url("/img/sub/company/icon_symbol.svg") no-repeat bottom right / contain; position: absolute; bottom: 0; left: 0; right: 0; }
#leadership .leadership .img{ order: 2; }
#leadership .leadership .img figure{ display: block; border-radius: 10px; padding-bottom: 127.275%; position: relative; overflow: hidden; }
#leadership .leadership .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#leadership .leadership dl{ order: 1; height: 100%; position: relative; padding-right: 40px; }
#leadership .leadership dl dt{ font-size: 30px; padding-bottom: 30px; margin-bottom: 30px; }
#leadership .leadership dl dt span{ display: inline-block; font-size: 19px; padding-left: 10px; }
#leadership .leadership ul li{ padding-left: 12px; position: relative; }
#leadership .leadership ul li:not(:last-of-type){ margin-bottom: 15px; }
#leadership .leadership ul li::before{ content: "-"; position: absolute; top: 0; left: 0; }

#leadership .advisors .grid-box{ grid-template-columns: repeat(4, 25%); margin: -10px; }
#leadership .advisors .item{ border: 1px solid var(--borderC); border-radius: 20px; padding: 50px; margin: 10px; }
#leadership .advisors dl dt{ font-size: 22px; padding-bottom: 20px; margin-bottom: 20px; }

@media screen and (max-width: 1700px){
	#leadership .item dl dd{ font-size: 18px; }

	#leadership .leadership .item{ padding: 50px; }
	#leadership .leadership dl dt{ font-size: 27px; }
	#leadership .leadership dl dt span{ font-size: 18px; }

	#leadership .advisors .item{ padding: 35px; }
	#leadership .advisors dl dt{ font-size: 21px; }
}

@media screen and (max-width: 1400px){
	#leadership .leadership .grid{ grid-template-columns: calc(100% - 180px) 180px; }
}

@media screen and (max-width: 1280px){
	#leadership .item dl dd{ font-size: 17px; }

	#leadership .leadership .item{ padding: 40px; }
	#leadership .leadership .grid::before{ height: 30px; }
	#leadership .leadership dl dt{ font-size: 24px; padding-bottom: 30px; margin-bottom: 30px; }
	#leadership .leadership dl dt span{ font-size: 17px; }
	#leadership .leadership ul li:not(:last-of-type){ margin-bottom: 10px; }

	#leadership .advisors .item{ padding: 25px; }
	#leadership .leadership dl{ padding-right: 30px; }
	#leadership .advisors dl dt{ font-size: 19px; }
}

@media screen and (max-width: 1200px){
	#leadership .leadership .grid-box{ margin: -10px; grid-template-columns: repeat(1, 100%); }
	#leadership .leadership .grid-box > *{ margin: 10px; }
	#leadership .leadership .block{ grid-column: unset; }

	#leadership .advisors .grid-box{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 900px){
	#leadership .leadership .item{ border-radius: 30px; padding: 25px; }
	#leadership .leadership .grid::before{ height: 25px; }
	#leadership .leadership dl{ padding-bottom: 40px; }
	#leadership .leadership dl dt{ font-size: 22px; padding-bottom: 20px; margin-bottom: 20px; }
	#leadership .leadership dl dt span{ font-size: 16px; padding-left: 7px; }

	#leadership .advisors .grid-box{ grid-template-columns: repeat(2, 50%); }
	#leadership .advisors .item{ padding: 20px; }
}

@media screen and (max-width: 700px){
	#leadership .leadership .grid{ grid-template-columns: repeat(1, 100%); justify-content: center; }
	#leadership .leadership .img{ max-width: 180px; width: 100%; order: unset; margin: 0 auto 20px; }
	#leadership .leadership dl{ order: unset; padding-right: 0; }
	#leadership .leadership dl dt{ text-align: center; }
}

@media screen and (max-width: 600px){
	#leadership .advisors .grid-box{ grid-template-columns: repeat(1, 100%); }
}


/* R&D - 연구분야 */
#research{ overflow: hidden; }
#research .sec-title{ margin-bottom: 0; }
#research .sec-title h4{ line-height: 1.7; }

#research .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); margin: -20px; }
#research .grid-box > *{ margin: 20px; }
#research .item{ padding: 80px; position: relative; z-index: 10; }
#research .item::before{ content: ""; width: 100%; height: 100%; background: var(--grayBg); border: 5px solid transparent; border-radius: 20px; position: absolute; top: 0; left: 0; z-index: -1; transition: background 0.3s, border-color 0.3s; }
#research .item dl dt{ display: flex; align-items: flex-start; border-bottom: 1px dashed #AAA; font-size: 27px; font-weight: 500; color: #111; padding-bottom: 30px; margin-bottom: 30px; transition: color 0.3s; }
#research .item dl dt .icon{ padding-right: 20px; position: relative; top: calc(1.3em / 2); transform: translateY(-50%); }
#research .item dl dd{ font-size: 19px; font-weight: 300; color: #333; line-height: 1.8; }

@media screen and (hover: hover) and (pointer: fine){
	#research .item:hover::before{ background: rgba(var(--mainRGB), 0.05); border-color: var(--mainColor); }
	#research .item:hover dl dt{ color: var(--mainColor); }
}

@media screen and (max-width: 1700px){
	#research .item{ padding: 60px; }
	#research .item dl dt{ font-size: 24px; }
	#research .item dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1520px){
	#research .item br{ display: none; }
}

@media screen and (max-width: 1280px){
	#research .item{ padding: 35px 30px 30px; }
	#research .item dl dt{ font-size: 21px; padding-bottom: 20px; margin-bottom: 20px; }
	#research .item dl dd{ font-size: 17px; }
}

@media screen and (max-width: 1000px){
	#research .grid-box{ grid-template-columns: repeat(1, 100%); }
	#research .item br{ display: block; }
}

@media screen and (max-width: 900px){
	#research .sec-title h4{ font-size: 23px; }

	#research .item::before{ border-width: 4px; }
	#research .item dl dt{ font-size: 19px; padding-bottom: 15px; margin-bottom: 15px; }
	#research .item dl dt .icon{ padding-right: 15px; }
	#research .item dl dt .icon img{ height: 30px; }
}

@media screen and (max-width: 700px){
	#research br, 
	#research .item br{ display: none; }
}


/* PRODUCT */
#product .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); margin: -20px; }
#product .grid-box > *{ margin: 20px; }

#product .item{ border-radius: 40px; text-align: center; overflow: hidden; position: relative; z-index: 10; }
#product .item .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
#product .item .bg img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.4s; }
#product .item a{ display: block; padding: 123px 60px; }
#product .item dl{ font-family: var(--engFont); margin-bottom: 60px; }
#product .item dl dt{ font-size: 5.4rem; font-weight: 600; color: #FFF; }
#product .item dl dd{ font-size: 21px; font-weight: 500; color: rgba(255, 255, 255, 0.5); margin-top: 20px; }

@media screen and (hover: hover) and (pointer: fine){
	#product .item:hover .bg img{ transform: scale(1.07); }
}

@media screen and (max-width: 1700px){
	#product .item a{ padding: 80px 40px; }
	#product .item dl dd{ font-size: 19px; }
}

@media screen and (max-width: 1280px){
	#product .grid-box{ margin: -10px; }
	#product .grid-box > *{ margin: 10px; }

	#product .item a{ padding: 50px 25px; }
	#product .item dl{ margin-bottom: 40px; }
	#product .item dl dd{ font-size: 17px; margin-top: 10px; }
}

@media screen and (max-width: 900px){
	#product .item a{ padding-block: 35px; }
	#product .item dl dt{ font-size: 5rem; }
}

@media screen and (max-width: 800px){
	#product .grid-box{ grid-template-columns: repeat(1, 100%); }
}


/* PRODUCT  - Gnosis-K */
#gnosisk{ padding-bottom: 0; overflow: hidden; }
#gnosisk .grayBg{ padding-bottom: var(--subPb); }
#gnosisk .sec-title{ text-align: center; }


#gnosisk .potassium{
	--arrowW: 280px;
}
#gnosisk .potassium .grid-box{ display: grid; grid-template-columns: calc((100% - var(--arrowW)) / 2) var(--arrowW) calc((100% - var(--arrowW)) / 2); }
#gnosisk .potassium .arrow{ text-align: center; padding-top: 43px; }
#gnosisk .potassium .arrow div{ max-width: 174px; width: 100%; background: url("/img/sub/product/icon_arrow_center.svg") no-repeat center center / contain; margin: 0 auto; position: relative; }
#gnosisk .potassium .arrow div::before{ content: ""; display: block; padding-bottom: 106.33%; }
#gnosisk .potassium .arrow p{ display: flex; flex-direction: column; justify-content: center; font-size: 16px; font-weight: 600; color: #FFF; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#gnosisk .potassium .arrow p span{ display: block; }
#gnosisk .potassium .arrow p span:not(:last-of-type){ margin-bottom: 5px; }

#gnosisk .potassium .item p{ display: flex; justify-content: flex-end; align-items: center; font-size: 17px; font-weight: 700; color: var(--color); margin-bottom: 20px; }
#gnosisk .potassium .item p i{ width: 30px; height: 10px; display: inline-block; margin: 0 20px; }
#gnosisk .potassium .item dl{ text-align: center; }
#gnosisk .potassium .item dl dt{ background: var(--color); border-radius: 10px; font-size: 19px; font-weight: 400; color: #FFF; padding: 15px; margin-bottom: 10px; }
#gnosisk .potassium .item ul{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -5px; }
#gnosisk .potassium .item ul li{ min-height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--subColor); border-radius: 10px; font-size: 17px; font-weight: 500; color: #AAA; text-align: center; margin: 5px; padding: 10px; }
#gnosisk .potassium .item ul li strong{ display: block; width: 100%; font-size: 19px; font-weight: 600; color: #333; margin-top: 10px; }

#gnosisk .potassium .blue{ --color: #5D6684; --subColor: #E9ECF5; }
#gnosisk .potassium .blue p i{ background: url("/img/sub/product/icon_arrow_blue.svg") no-repeat center center / contain; }

#gnosisk .potassium .green{ --color: var(--mainColor); --subColor: #F0FBE9; }
#gnosisk .potassium .green p{ flex-direction: row-reverse; }
#gnosisk .potassium .green p i{ background: url("/img/sub/product/icon_arrow_green.svg") no-repeat center center / contain; }


#gnosisk .led{
	--min: 30px;
	--direction: right;
}
#gnosisk .led{ text-align: center; }
#gnosisk .led .flex-box{ display: flex; padding-bottom: 17px; }
#gnosisk .led .item{ width: calc((100% / 4) + 40px); padding: 0 40px; margin: 0 -20px; position: relative; z-index: 10; }
#gnosisk .led .item::before{ content: ""; width: 100%; height: 4px; position: absolute; bottom: calc(var(--min) / 2); left: 50%; z-index: -1; transform: translate(-50%, 50%); }  
#gnosisk .led .item:last-of-type::before{ width: calc(100% - 25px); left: 0; transform: translateY(50%); }
#gnosisk .led .item:last-of-type::after{ content: ""; width: 30px; height: 30px; background: #E994AF; clip-path: polygon(0 0, 0% 100%, 100% 50%); -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%); position: absolute; bottom: calc(var(--min) / 2); right: 17px; transform: translateY(50%); }
#gnosisk .led .item p{ height: var(--min); display: inline-flex; justify-content: center; align-items: center; border-radius: 100px; font-size: 17px; font-weight: 500; color: #FFF; line-height: var(--min); padding: 5px 30px 7px; margin-top: 60px; } 
#gnosisk .led .arrow{ display: inline-flex; align-items: center; font-family: var(--engFont); font-size: 17px; font-weight: 600; color: #AAA; position: absolute; bottom: 0; right: 20px; transform: translate(50%, 100%); }
#gnosisk .led .arrow span{ display: inline-block; line-height: 1; padding: 0 30px; }
#gnosisk .led .arrow i{ display: inline-block; width: 30px; height: 10px; background: url("/img/sub/product/icon_arrow_gray.svg") no-repeat center center / contain; }
#gnosisk .led .arrow i:last-of-type{ transform: rotate(180deg); }

#gnosisk .led .item01::before{ background: linear-gradient(to var(--direction), var(--grayBg), var(--mainColor)); }
#gnosisk .led .item01 p{ background: #CCC; }

#gnosisk .led .item02::before{ background: linear-gradient(to var(--direction), var(--mainColor), #B3C673); }
#gnosisk .led .item02 p{ background: var(--mainColor); }

#gnosisk .led .item03::before{ background: linear-gradient(to var(--direction), #B3C673, #E9B295); }
#gnosisk .led .item03 p{ background: #E9C585; }

#gnosisk .led .item04::before{ background: linear-gradient(to var(--direction), #E9B295, #E994AF); }
#gnosisk .led .item04 p{ background: #E994AF; }


#gnosisk .use{ max-width: 1300px; width: 100%; text-align: center; margin: 0 auto; }
#gnosisk .use ul{ display: flex; justify-content: space-between; margin-bottom: -40px; }
#gnosisk .use ul li{ width: calc((100% - 300px) / 4); margin-bottom: 40px; }
#gnosisk .use ul li span{ display: block; font-size: 17px; font-weight: 600; color: #111; margin-bottom: 20px; }  
#gnosisk .use ul li figure{ display: block; position: relative; }
#gnosisk .use ul li figure::after{ content: ""; width: 100px; height: 18px; background: url("/img/sub/product/icon_arrow_two.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 0; transform: translate(100%, -50%); } 
#gnosisk .use ul li:nth-of-type(4n) figure::after{ display: none; }

@media screen and (max-width: 1700px){
	#gnosisk .led .item:last-of-type::after{ width: 25px; height: 25px; }
	#gnosisk .led .arrow span{ padding: 0 25px; }
}

@media screen and (max-width: 1280px){
	#gnosisk .icon-dl .icon img{ max-height: 55px; }

	#gnosisk .potassium {
		--arrowW: 200px;
	}
	#gnosisk .potassium .arrow{ padding-top: 36px; }
	#gnosisk .potassium .arrow div::before{ padding-bottom: 93.33%; }
	#gnosisk .potassium .arrow p{ font-size: 15px; }
	#gnosisk .potassium .item p{ font-size: 16px; margin-bottom: 15px; }
	#gnosisk .potassium .item p i{ margin: 0 15px; }
	#gnosisk .potassium .item dl dt{ font-size: 18px; }
	#gnosisk .potassium .item ul li{ min-height: 100px; font-size: 16px; }
	#gnosisk .potassium .item ul li strong{ font-size: 18px; }

	#gnosisk .led .item:last-of-type::after{ width: 20px; height: 20px; }
	#gnosisk .led .arrow span{ padding: 0 20px; }

	#gnosisk .use ul li span{ margin-bottom: 10px; }
}

@media screen and (max-width: 1200px){
	#gnosisk .icon-dl br{ display: none; } 

	#gnosisk .use ul li{ width: calc((100% - 210px) / 4); }
	#gnosisk .use ul li figure::after{ width: 70px; height: 14px; }
}

@media screen and (max-width: 1100px){
	#gnosisk .potassium .grid-box{ grid-template-columns: repeat(1, 100%); }
	#gnosisk .potassium .arrow{ order: 1; padding-top: 0; }
	#gnosisk .potassium .item{ order: 2; margin-top: 30px; }

	#gnosisk .use{ max-width: 700px; margin: 0 auto; }
	#gnosisk .use ul{ flex-wrap: wrap; }
	#gnosisk .use ul li{ width: calc((100% - 70px) / 2); }
	#gnosisk .use ul li:nth-of-type(2n) figure::after{ display: none; }
}

@media screen and (max-width: 950px){
	#gnosisk .led{
		--direction: bottom;
		--left: 140px;
	}
	#gnosisk .led{ max-width: 350px; margin: 0 auto; }
	#gnosisk .led .flex-box{ flex-direction: column; }
	#gnosisk .led .item{ width: 100%; padding-inline: var(--left) 0; margin: 0; }
	#gnosisk .led .item:not(:last-of-type){ padding-bottom: 30px; }
	#gnosisk .led .item::before{ width: 4px !important; height: 100% !important; left: calc(var(--left) / 2) !important; transform: translateX(-50%) !important; }
	#gnosisk .led .item:last-of-type::after{ right: unset; left: calc(var(--left) / 2); transform: translate(-50%, 100%) rotate(90deg); }
	#gnosisk .led .item p{ margin-top: 0; position: absolute; top: calc(50% - 30px); left: calc(var(--left) / 2); transform: translate(-50%, -50%); }
	#gnosisk .led .item:last-of-type p{ top: 50%; }
	#gnosisk .led .arrow{ flex-direction: column; right: unset; left: calc(var(--left) / 2); transform: unset; }
	#gnosisk .led .arrow span{ padding: 20px 13px; }
	#gnosisk .led .arrow i:first-of-type{ transform: rotate(90deg); }
	#gnosisk .led .arrow i:last-of-type{ transform: rotate(-90deg); }
}

@media screen and (max-width: 900px){
	#gnosisk .icon-dl .icon img{ max-height: 50px; }
}

@media screen and (max-width: 650px){
	#gnosisk .icon-dl br{ display: block; } 	
}


/* PRODUCT - TranSPHERO */
#transphero{ overflow: hidden; }
#transphero .sec-title{ text-align: center; }
#transphero .sec-title p{ font-size: 19px; margin-top: 20px; }

#transphero .icon-dl{ grid-template-columns: repeat(2, 50%); }
#transphero .icon-dl dl dd p{ padding-left: 10px; text-indent: -10px; }


#transphero .spheroid{ text-align: center; }
#transphero .spheroid .img{ max-width: 1150px; margin: 0 auto; }
#transphero .spheroid .img ul{ display: flex; justify-content: center; margin-bottom: -40px; }
#transphero .spheroid .img ul li{ width: calc((100% - 400px) /5); margin-right: 100px; margin-bottom: 40px; }
#transphero .spheroid .img ul li:last-of-type{ margin-right: 0 !important; }
#transphero .spheroid .img ul li p{ font-size: 17px; font-weight: 600; color: #333; margin-top: 30px; }

#transphero .spheroid .dl{ border: 3px solid var(--mainColor); border-radius: 10px; display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin-top: 80px; }
#transphero .spheroid .dl dl{ display: grid; grid-template-columns: 180px calc(100% - 180px); font-family: var(--engFont); font-size: 17px; }
#transphero .spheroid .dl dl > *{ padding: 17px; }
#transphero .spheroid .dl dl dt{ background: var(--mainColor); font-family: var(--engFont); font-weight: 500; color: #FFF; }
#transphero .spheroid .dl dl dd{ background: transparent; font-weight: 400; color: #333; }


#transphero .table{ 
	--radius: 20px;
}
#transphero .table{ border: 1px solid var(--borderC); border-radius: 20px; overflow: hidden; }
#transphero .table table tr:not(:last-child){ border-bottom: 1px solid var(--borderC); }
#transphero .table table th,
#transphero .table table td{ font-size: 19px; padding: 30px; }
#transphero .table table th{ width: 400px; background: var(--grayBg); border-right: 1px solid var(--borderC); font-weight: 500; color: #111; }
#transphero .table table td{ font-weight: 300; color: #333; }
#transphero .table table ul li{ padding-left: 12px; position: relative; }
#transphero .table table ul li:not(:last-of-type){ margin-bottom: 15px; }
#transphero .table table ul li::before{ content: "-"; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1700px){
	#transphero .sec-title p{ font-size: 18px; }

	#transphero .spheroid .img ul li{ width: calc((100% - 240px) / 5); margin-right: 60px; }
	#transphero .spheroid .img ul li p{ margin-top: 20px; }
	#transphero .spheroid .dl{ margin-top: 50px; }
	#transphero .spheroid .dl dl > *{ padding: 13px 15px; }

	#transphero .table table th,
	#transphero .table table td{ font-size: 18px; padding: 25px; }
	#transphero .table table th{ width: 300px; }
}

@media screen and (max-width: 1280px){
	#transphero .sec-title p{ font-size: 17px; margin-top: 15px; }

	#transphero .spheroid .img ul li{ width: calc((100% - 160px) / 5); margin-right: 40px; }
	#transphero .spheroid .img ul li p{ margin-top: 15px; }
	#transphero .spheroid .dl{ margin-top: 40px; }
	#transphero .spheroid .dl dl{ grid-template-columns: 130px calc(100% - 130px); }

	#transphero .table table th,
	#transphero .table table td{ font-size: 17px; padding: 20px 15px; }
	#transphero .table table th{ width: 200px; }
	#transphero .table table ul li:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 1000px){
	#transphero .icon-dl{ grid-template-columns: repeat(1, 100%); }

	#transphero .spheroid .dl{ grid-template-columns: repeat(1, 100%); border: none; }
	#transphero .spheroid .dl dl{ border: 3px solid var(--mainColor); border-radius: 10px; }
	#transphero .spheroid .dl dl:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 900px){
	#transphero .spheroid .img ul{ flex-wrap: wrap; }  
	#transphero .spheroid .img ul li{ width: calc((100% - 60px) / 3); margin-right: 30px; }
	#transphero .spheroid .img ul li:nth-of-type(3n){ margin-right: 0; }

	#transphero .table table th{ width: 95px; }
}



/* CONTACT - 문의하기 */
#inquiry .flex-box{ display: flex; justify-content: space-between; }
#inquiry .flex-box > *{ width: calc((100% - 80px) / 2); }

#inquiry .location .iframe{ border: 1px solid #D9D9D9; border-radius: 10px; overflow: hidden; }
#inquiry .location .root_daum_roughmap{ width: 100%; }
#inquiry .location .root_daum_roughmap .wrap_map{ height: 395px; }
#inquiry .location .root_daum_roughmap .map_border{ display: none; }
#inquiry .location .root_daum_roughmap .cont{ display: none; }

#inquiry .location address{ margin: 40px 0; }
#inquiry .location address h5{ font-size: 28px; font-weight: 600; color: #111; margin-bottom: 30px; }
#inquiry .location address p{ font-family: var(--engFont); font-size: 23px; font-weight: 500; color: #111; padding-left: 45px; margin-bottom: 30px; position: relative; }
#inquiry .location address p::before{ content: ""; width: 25px; height: 30px; background: url("/img/sub/contact/icon_marker.svg") no-repeat center center / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#inquiry .location address ul li{ font-family: var(--engFont); font-size: 21px; font-weight: 300; color: #333; padding-left: 40px; position: relative; }
#inquiry .location address ul li:not(:last-of-type){ margin-bottom: 15px; }
#inquiry .location address ul li::before{ content: ""; width: 19px; height: 19px; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#inquiry .location address ul li.tel::before{ background: url("/img/sub/contact/icon_tel.svg") no-repeat center center / contain; }
#inquiry .location address ul li.fax::before{ background: url("/img/sub/contact/icon_fax.svg") no-repeat center center / contain; }
#inquiry .location address ul li.mail::before{ background: url("/img/sub/contact/icon_mail.svg") no-repeat center center / contain; }

#inquiry .location .btns{ display: flex; justify-content: flex-end; }
#inquiry .location .btns a{ width: 180px; height: 55px; border-radius: 10px; display: inline-flex; justify-content: center; align-items: center; }
#inquiry .location .btns a:not(:last-child){ margin-right: 10px; }
#inquiry .location .btns a.kakao{ background: #F9E000; }
#inquiry .location .btns a.naver{ background: #03C75A; }

@media screen and (max-width: 1700px){
	#inquiry .location address{ margin: 30px 0; }
	#inquiry .location address h5{ font-size: 24px; margin-bottom: 25px; }
	#inquiry .location address p{ font-size: 21px; padding-left: 35px; margin-bottom: 25px; }
	#inquiry .location address p::before{ width: 20px; height: 24px; }
	#inquiry .location address ul li{ font-size: 19px; }
}

@media screen and (max-width: 1400px){
	#inquiry .flex-box > *{ width: calc((100% - 50px) / 2); }
}

@media screen and (max-width: 1280px){
	#inquiry .location address{ margin-top: 25px; }
	#inquiry .location address h5{ font-size: 21px; margin-bottom: 20px; }
	#inquiry .location address p{ font-size: 19px; padding-left: 30px; margin-bottom: 10px; }
	#inquiry .location address p::before{ width: 17px; height: 21px; }
	#inquiry .location address ul li{ font-size: 18px; padding-left: 30px; }
	#inquiry .location address ul li::before{ width: 17px; height: 17px; }
	#inquiry .location .btns a{ width: 150px; height: 50px; }
}

@media screen and (max-width: 1200px){
	#inquiry .flex-box{ flex-direction: column; }
	#inquiry .flex-box > *{ width: 100%; }
	#inquiry .flex-box > *:not(:last-of-type){ margin-bottom: 80px; }
}


/* 개인정보처리방침 */
#policy h3{ font-family: var(--engFont); font-size: 5.4rem; font-weight: 600; color: #111; border-bottom: 1px solid #000; padding: 40px 0; margin-bottom: var(--subPt); }

.privacy *{ font-size: 17px; font-weight: 300; color: #333; }
.privacy > *:not(:last-child){ margin-bottom: 120px; }
.privacy dl dt{ font-size: 21px; font-weight: 500; color: #111; padding-block: calc((35px - 1.3em) / 2); padding-left: 55px; position: relative; margin-bottom: 30px; }
.privacy dl dt span{ display: inline-flex; justify-content: center; align-items: center; width: 35px; height: 35px; background: #000; border-radius: 5px; font-family: var(--engFont); font-size: 17px; font-weight: 500; color: #FFF; line-height: 1; text-align: center; position: absolute; top: 0; left: 0; }
.privacy ul li{ padding-left: 12px; position: relative; line-height: 1.5; }
.privacy ul li::before{ content: "-"; line-height: inherit; position: absolute; top: 0; left: 0; }
.privacy ul li:not(:last-child){ margin-bottom: 10px; }

@media screen and (max-width: 1700px){
	#policy h3{ padding-bottom: 30px; }

	.privacy > *:not(:last-child){ margin-bottom: 80px; }
	.privacy dl dt{ font-size: 19px; padding-block: calc((32px - 1.3em) / 2); padding-left: 50px; margin-bottom: 20px; }
	.privacy dl dt span{ width: 32px; height: 32px; font-size: 16px; }
}

@media screen and (max-width: 1280px){
	#policy h3{ padding-bottom: 20px; }

	.privacy *{ font-size: 16px; }
	.privacy > *:not(:last-child){ margin-bottom: 50px; }
	.privacy dl dt{ font-size: 18px; padding-block: calc((29px - 1.3em) / 2); padding-left: 42px; margin-bottom: 15px; }
	.privacy dl dt span{ width: 29px; height: 29px; font-size: 15px; }
}