@charset "utf-8";

@media (max-width: 1600px){
	.lnb .s-nav ul li br {display: block;}
	
	/* s2_2 */
	.s2_2 .arti03 .why {gap: 40px;}
	.s2_2 .arti03 .why .num-box {flex: 0 0 calc(50% - 20px);}
	.s2_2 .arti03 .why .num-box dl dd {flex-wrap: wrap; height: 80px; align-items: center; justify-content: left; gap: 0 20px; line-height: 1;}
	
	/* s2_4 */
	.s2_4 .arti01 .why {gap: 60px;}
}

@media (max-width: 1400px){
	.lnb > ul {gap: 30px;}
	.lnb > ul li a {font-size: 20px;}
	
	.s1_1 .arti02 .cnt {gap: 100px;}
	.s1_1 .arti02 .cnt figure {max-width: 600px;}
	
	/* s2_1 */
	.s2_1 .nav-btn {height: 60px;}
	.s2_1 .nav-btn .design-btns {width: 60px; height: 60px;}
	.s2_1 .design {width: calc(100% - 120px);}
	
	/* s2_3 */
	.s2_3 .arti02 .why {gap: 40px;}
	
	/* s2_4 */
	article > p br {display: none;}
	.s2_3 .controls {height: 60px;}
	.s2_3 .controls .cnt-btns {width: 60px; height: 60px;}
	.s2_3 .arti06 .cnt .swiper {width: calc(100% - 140px);}
	.s2_3 .arti06 .inner .tab a {padding: 0 20px; background-position: calc(100% - 20px) 30%;}
	.s2_3 .arti06 .inner .tab a:nth-of-type(4) {background-position: calc(100% - 20px) 50%;}
	
	
	/* s5_1 */
	.s5_1 .process ul li dl dd > h6 br {display: none;}
	
}

@media (max-width: 1200px) {
	
	.s1_1 .arti02 .cnt figure {max-width: 500px;}
	
	/* s1_3 */
	.s1_3 .map-info {gap: 40px;}
	.s1_3 .map-info figure {max-width: 550px;}
	
	/* s2_1 */
	.s2_1 .banner {gap: 40px;}
	.s2_1 .banner .tab {max-width: 220px;}
	
	.s2_1 .arti05 .why .img-box {max-width: 530px;}
	.s2_1 .arti05 .why .num-box .box dl dt {font-size: 22px;}
	.s2_1 .arti05 .why .num-box .box dl dd {font-size: 22px;}
	.s2_1 .arti05 .why .num-box .box p.dot {font-size: 20px;}
	
	.s2_1 .arti06 .app .ess figure figcaption {max-width: 300px; font-size: 20px;}
	
	/* s2_2 */
	.s2_2 .arti01 {padding-left: 200px;}
	.s2_2 .arti03 .why .num-box dl dt {font-size: 22px;}
	.s2_2 .arti03 .why .num-box dl dd {font-size: 22px;}
	.s2_2 .arti03 .why .num-box p.dot {font-size: 20px;}
	
	/* s2_3 */
	.s2_3 .arti06 .inner .tab a {font-size: 20px;}
	
	.s2_3 .arti07 .item {gap: 40px;}
	.s2_3 .arti07 .item figure {max-width: 500px;}
	.s2_3 .arti07 .item .txt p {font-size: 22px;}
	.s2_3 .arti07 .item .txt ul li p {font-size: 20px;}
	
	.s2_3 .arti08 ul {gap: 60px;}
	
	/* s2_4 */
	.s2_4 .arti01 .why .img-box {max-width: 420px;}
	
	/* s5_1 */
	.s5_1 .process ul li dl dd > h6 {font-size: 20px;}
	.s5_1 .process ul li dl dd > p {font-size: 18px;}
}

@media (max-width: 1024px) {
	.page-header {height: auto;}
	.lnb {flex-wrap: wrap; flex-direction: column-reverse;}
	.lnb ul {width: 100%;}
	.lnb .s-nav {margin-right: auto;}
	.lnb .s-nav ul li br {display: none;}
	
	article h3 {font-size: 30px;}
	.article-tit {margin-left: 0;}
	.article-tit h5 {font-size: 24px;}
	.article-tit h5::before {top: 8px}
	.article-tit p {font-size: 20px;}
	article > p {font-size: 20px; padding-left: 0;}
	article p.dot {font-size: 20px; margin-left: 0;}
	article > h4 {margin-left: 0; font-size: 22px;}

	/* s1_1 */
	.s1_1 .arti01 {padding: 0;}
	.s1_1 .intro {flex-wrap: wrap; gap: 30px;}
	.s1_1 .intro .intro-main {width: 100%;}
	.s1_1 .intro .intro-thumb {max-width: 100%;}
/* 	.s1_1 .intro .intro-thumb .swiper-wrapper {display: flex; gap: 30px;}
	.s1_1 .intro .intro-thumb .swiper-slide {width: 1% !important; flex: 1 1 auto;}
	.s1_1 .intro .intro-thumb .swiper-slide ~ .swiper-slide {margin-top: 0;}
	.s1_1 .intro .intro-thumb .swiper-slide img {width: 100%;} */
	
	.s1_1 .arti01 dl {gap: 20px;}
	.s1_1 .arti01 dl dt {font-size: 20px;}
	.s1_1 .arti01 dl dd {font-size: 20px;}
	
	.s1_1 .arti02 .cnt {padding: 0 0 80px; gap: 40px;}
	.s1_1 .arti02 .cnt figure {max-width: 400px;}
	.s1_1 .arti02 .cnt.ty2 ul {gap: 20px;}
	.s1_1 .arti02 .cnt.ty2 ul li figure figcaption {padding: 20px 5px 0; font-size: 20px;}
	
	/* s1_2 */
	.s1_2 .arti01 {padding: 0;}
	.s1_2 .arti01 ul li h5 {font-size: 35px;}
	.s1_2 .arti01 ul li p {font-size: 20px;}
	
	/* s1_3 */
	.s1_3 .arti01 {padding: 0;}
	/* .s1_3 .map-info .info {gap: 30px; padding: 30px 15px;}
	.s1_3 .map-info > h5 {font-size: 20px;}
	.s1_3 .map-info > h5 > span {font-size: 24px;} */
	.s1_3 .map-info .info h5 {font-size: 24px;}
	.s1_3 .map-info .info p {font-size: 20px;}
	.s1_3 .map-info .info dl dt {max-width: 40px;}
	.s1_3 .map-info .info dl dd {font-size: 20px;}
	.s1_3 .map-info figure {max-width: 450px;}
	.s1_3 .map-info figure figcaption {font-size: 20px;}
	
	/* s1_4 */
	.s1_4 .arti01 {padding: 0;}
	
	/* s2_1 */
	.s2_1 article h3 {margin-left: 0;}
	.s2_1 .img-box {padding: 30px;}
	
	.s2_1 .banner {padding: 0; flex-wrap: wrap;}
	.s2_1 .banner .tab {display: flex; gap: 10px; max-width: 100%;}
	.s2_1 .banner .tab a {width: 1%; flex: 1 1 auto; padding: 0 25px; background-position: calc(100% - 25px) 50%; font-size: 20px;}
	.s2_1 .banner .tab a ~ a {margin-top: 0px;}
	.s2_1 .banner .img {gap: 20px; width: 100%;}
	.s2_1 .banner .img p {font-size: 20px;}
	
	.s2_1 .arti03 {padding: 0 0 100px;}
	.s2_1 .nav-btn {height: 50px;}
	.s2_1 .nav-btn .design-btns {width: 50px; height: 50px;}
	.s2_1 .swiper-pagination-progressbar.design-paging {max-width: 600px;}
	
	.s2_1 .arti05 .why {padding: 0; gap: 20px}
	.s2_1 .arti05 .why .num-box .box p.dot {margin-left: 0;}
	.s2_1 .arti05 .why .num-box .box dl dd {font-size: 20px; gap: 10px; padding: 0 10px;}
	.s2_1 .arti05 .why .num-box .box dl dd span {font-size: 16px;}
	.s2_1 .arti05 .why .img-box {max-width: 400px; gap: 20px;}
	.s2_1 .arti05 .why .img-box figure {flex: 0 0 calc(50% - 10px);}
	
	.s2_1 .arti06 .app {gap: 150px; padding: 0;}
	.s2_1 .arti06 .app .ess::before {right: -135px;}
	.s2_1 .arti06 .app .ess dl dt {font-size: 20px;}
	.s2_1 .arti06 .app .ess dl dd {font-size: 20px;}
	
	.s2_1 .arti07 .ev {padding: 35px 20px;}
	.s2_1 .arti07 ul {gap: 20px; flex-wrap:wrap;}
	.s2_1 .arti07 ul li {flex: 0 0 calc(50% - 10px);}
	
	/* s2_2 */
	.s2_2 .arti01 {width: 100%; padding: 0;}
	.s2_2 .arti01 > figure {position: static; margin: 0 auto; max-width: 604px; width: 100%; height: auto; margin-bottom: 40px;}
	.s2_2 .arti01 .img-box {padding: 20px; gap: 20px;}
	
	.s2_2 .arti02 figure {padding: 0;}
	
	.s2_2 .arti03 .ess {padding: 0;}
	.s2_2 .arti03 .why .num-box p.dot {margin-left: 0;}
	.s2_2 .arti03 .why .num-box dl dd {font-size: 20px; padding: 0 10px; gap: 0 10px;}
	.s2_2 .arti03 .why .num-box dl dd span {font-size: 16px;}
	.s2_2 .arti03 .why .num-box dl dd > i {margin-left: -5px;}

	.s2_2 .arti02 .why .num-box {margin-left: 0;}
	
	/* s2_3 */
	.s2_3 .arti06 .inner {padding: 0;}
	.s2_3 .arti06 .inner .tab {flex-wrap: wrap;}
	.s2_3 .arti06 .inner .tab a {font-size: 18px; flex: 0 0 calc(50% - 5px); background-position: calc(100% - 20px) 50%;} 
	.s2_3 .arti06 .inner .tab a > span {font-size: 14px;}
	
	.s2_3 .controls {height: 50px;}
	.s2_3 .controls .cnt-btns {width: 50px; height: 50px;}
	.s2_3 .swiper-pagination-progressbar.cnt-paging {max-width: 600px;}
	
	.s2_3 .arti06 > figure {padding: 0;}
	
	.s2_3 .arti07 .item {padding: 0;}
	.s2_3 .arti07 .item figure {max-width: 300px;}
	.s2_3 .arti07 .item .txt p {font-size: 20px;}
	.s2_3 .arti07 .item .txt ul li {padding: 0 5px;}
	.s2_3 .arti07 .item .txt ul li p {font-size: 18px;}
	
	.s2_3 .arti08 ul {gap: 40px; padding: 0;}
	.s2_3 .arti08 ul li dl dd {margin-top: 20px; font-size: 18px;}
	
	.s2_5 .dep3 ul li a {font-size: 18px;}
	
	.s2_4 .arti01 ul li dl dt {font-size: 20px;}
	.s2_4 .arti01 ul li dl dd {font-size: 20px;}
	
	.s2_4 .arti01 .why .img-box {max-width: 350px;}
	.s2_4 .arti01 .why .num-box .box p.round {width: 100%;}
	.s2_4 .arti01 .why .num-box .box p.dot br {display: none;}
	
	.s2_4 .arti02 .table-wrap table th {font-size: 22px; line-height: 60px;}
	.s2_4 .arti02 .table-wrap table td {padding: 15px;}
	.s2_4 .arti02 .table-wrap table td p {font-size: 18px; line-height: 1.5;}
	.s2_4 .arti02 .table-wrap table td p.dot::before {top: 10px}
	
	.s2_4 .arti03 .system {padding: 0;}
	.s2_4 .arti03 .system .img .img-tit {max-width: 300px; font-size: 20px;}
	
	.s2_4 .arti04 .generator {width: 100%; padding: 30px;}
	.s2_4 .arti04 .generator .spec .spec-box {flex-wrap: wrap;}
	.s2_4 .arti04 .generator .spec .spec-box figure {max-width: 100%;;}
	
	
	/* s5_1 */
	.s5_1 .arti01 .apply {margin-left: 0; font-size: 18px; line-height: 58px; max-width: 200px; padding: 0 20px; background-position: calc(100% - 20px) 50%;}
	.s5_1 .arti01 a {font-size: 20px; margin-left: 0;}
	.s5_1 .process {padding: 0;}
	.s5_1 .process ul li dl {padding: 20px 15px;}
	.s5_1 .process ul li dl::after {right: 10px;}
	
	.s5_1 .ideal {gap: 30px; justify-content: center;}
	.s5_1 .ideal .circle {width: 240px; height: 240px;}
	.s5_1 .ideal .circle dl dt {font-size: 24px;}
	.s5_1 .ideal .circle dl dd {font-size: 18px;}
	.s5_1 .ideal .circle ~ .circle::before {width: 30px; left: -30px;}
	
	/* s6_1 */
	.s6_1 .partner {padding: 0;}
}

@media (max-width: 768px) {
	.lnb {z-index: 5; border: 0;}
	.lnb .btn-drop {position: relative; display: block; width: 100%; height: 50px; padding: 0 15px; text-align: left; background-color: #31964C; color: #fff; font-size: 18px; font-weight: 600; border-radius: 10px;}
	.lnb .btn-drop::after {position: absolute; content:''; width: 9px; height: 5px; top: 50%; right: 15px; transform: translateY(-50%); background: url(../images/sub/btn-drop.png) 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
	.lnb.on .btn-drop::after {transform: translateY(-50%) rotate(180deg);}
	.lnb > ul {display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 11px 10.4px 0 rgba(0, 0, 0, 0.1); border-radius: 0 0 10px 10px;}
	.lnb > ul li ~ li  {border-top: 1px solid #ddd;}
	.lnb > ul li a {font-size: 18px; color: #767676; padding: 0 15px; text-align: left; line-height: 48px;}
	.lnb > ul li a:after {display: none;}
	.lnb.on > ul {display: block;}
	
	.page-header.type5 .lnb {border-bottom: 1px solid #ddd;}
	.page-header.type6 .lnb {border-bottom: 1px solid #ddd;}
	.page-header.type5 .lnb .btn-drop {display: none;}
	.page-header.type6 .lnb .btn-drop {display: none;}
	
	section {padding: 80px 0 150px;}
	.real-cont {padding: 80px 0 150px;}
	
	.article-tit h5 {font-size: 22px;}
	.article-tit p {font-size: 18px; margin-top: 40px;}
	article > p {font-size: 18px; margin-top: 5px;}
	article p.dot {font-size: 18px;}
	article > h4 {font-size: 20px;}
	
	.s1_1 .intro {gap: 20px;}
	/* .s1_1 .intro .intro-thumb .swiper-wrapper {gap: 20px}
	.s1_1 .intro .intro-thumb .swiper-slide {height: auto !important;} */
	.s1_1 .intro .intro-thumb {margin-top: 20px;}
	.s1_1 .intro .intro-thumb .swiper-slide::after {border: 3px solid #31964c;}
	
	.s1_1 .arti01 dl dt {font-size: 18px;}
	.s1_1 .arti01 dl dt::before {top: 11px;}
	.s1_1 .arti01 dl dd {font-size: 18px;}
	
	
	.s1_1 .arti02 {margin-top: 100px; padding: 100px 0 150px;}
	.s1_1 .arti02 .cnt {flex-wrap: wrap;}
	.s1_1 .arti02 .cnt .article-tit {width: 100%;}
	.s1_1 .arti02 .cnt figure {max-width: 100%;}
	.s1_1 .arti02 .cnt .article-tit p.dot {margin-top: 20px;}
	
	.s1_1 .arti02 .cnt.ty2 ul {flex-wrap: wrap; gap: 40px 20px;}
	.s1_1 .arti02 .cnt.ty2 ul li {flex: 0 0 calc(50% - 10px);}
	.s1_1 .arti02 .cnt.ty2 ul li figure figcaption {font-size: 18px; line-height: 1.5;}
	.s1_1 .arti02 .cnt.ty2 ul li figure figcaption > span {margin-top: 10px;}
	
	/* s1_2 */
	.s1_2 .arti01 ul {flex-wrap: wrap; gap: 40px 10px;}
	.s1_2 .arti01 ul li {flex: 0 0 calc(33.333% - 7px);}
	.s1_2 .arti01 ul li h5 {font-size: 30px; padding-bottom: 70px;}
	.s1_2 .arti01 ul li h5::before {bottom: 25px;}
	.s1_2 .arti01 ul li h5::after {width: 40px; height: 40px; background-size: 40px auto; left: 10px;}
	.s1_2 .arti01 ul li p {margin-top: 20px; font-size: 18px; padding-left: 15px;}
	.s1_2 .arti01 ul li p::before {top: 12px;}
	
	/* s1_3 */
	.s1_3 .map {height: 300px;}
	.s1_3 .map-info {flex-wrap: wrap; margin-top: 40px;}
	.s1_3 .map-info .info {width: 100%;}
	.s1_3 .map-info .info h5 {font-size: 20px;}
	.s1_3 .map-info .info p {font-size: 18px; padding-bottom: 20px;}
	.s1_3 .map-info .info dl {margin-top: 20px;}
	.s1_3 .map-info .info dl ~ dl {margin-top: 10px;}
	.s1_3 .map-info .info dl dd {font-size: 18px;}
	.s1_3 .map-info figure {max-width: 100%;}
	.s1_3 .map-info figure figcaption {font-size: 18px;}
	/* .s1_3 .map-info {margin-top: 40px;}
	.s1_3 .map-info > h5 {font-size: 18px; flex-wrap: wrap; justify-content: left;}
	.s1_3 .map-info > h5 > span {font-size: 22px;}
	.s1_3 .map-info .info {flex-wrap: wrap; gap: 20px}
	.s1_3 .map-info .info dl {flex: 1 1 calc(50% - 10px)}
	.s1_3 .map-info .info dl dd {font-size: 18px;} */
	
	/* s2_1 */
	.s2 article ~ article {margin-top: 100px;}
	
	.s2_1 .img-box {padding: 20px; margin-top: 40px;}
	.s2_1 .img-box ul {flex-wrap: wrap; gap: 20px;}
	.s2_1 .img-box ul li {flex: 0 0 calc(50% - 10px);}
	
	.s2_1 .banner {margin-top: 40px;}
	.s2_1 .banner .tab {flex-wrap: wrap;}
	.s2_1 .banner .tab a {line-height: 48px; font-size: 18px; flex: 0 0 calc(33.333% - 7px);}
	.s2_1 .banner .img {gap:20px 10px;}
	.s2_1 .banner .img p {font-size: 18px;}
	
	.s2_1 .design {width: 100%; margin-top: 40px;}
	.s2_1 .nav-btn {top: initial; bottom: 30px; transform: none; transform: translateX(-50%); max-width: 110px}
	
	.s2_1 .arti05 {margin-top: 100px;}
	.s2_1 .arti05 .why {flex-wrap: wrap; flex-direction: column-reverse; margin-top: 40px;}
	.s2_1 .arti05 .why .num-box {width: 100%;}
	.s2_1 .arti05 .why .num-box .box dl dt {line-height: 60px;}
	.s2_1 .arti05 .why .num-box .box dl dd {line-height: 60px;}
	.s2_1 .arti05 .why .img-box {max-width: 100%; margin-top: 0;}
	.s2_1 .arti05 .why .num-box .box p.dot {margin-top: 20px; font-size: 18px;}
	
	.s2_1 .arti06 .app {flex-wrap: wrap; gap: 200px; margin-top: 65px;}
	.s2_1 .arti06 .app .ess {width: 100%;}
	.s2_1 .arti06 .app .ess::before {background-image:url(../images/sub/mo_poly.png); width: 407px; height: 120px; top: initial; right: initial; left: 50%; bottom: -160px; transform: translateX(-50%);}
	.s2_1 .arti06 .app .ess dl dt {font-size: 18px;}
	.s2_1 .arti06 .app .ess dl dd {font-size: 18px;}
	
	.s2_1 .arti07 .ev {padding: 20px; margin-top: 40px;}
	.s2_1 .arti07 .article-tit h5 > span {font-size: 16px; line-height: 28px;}
	
	/* s2_2 */
	.s2_2 .arti01 .img-box {flex-wrap: wrap;}
	.s2_2 .arti01 .img-box figure {flex: 0 0 calc(50% - 10px);}
	.s2_2 .arti02 {margin-top: 100px;}
	.s2_2 .arti03 {padding: 0; margin-top: 100px;}
	.s2_2 .arti03 .article-tit ~ .article-tit {margin-top: 100px;}
	.s2_2 .arti03 .why {gap: 40px;}
	.s2_2 .arti03 .why .num-box {flex: 100%;}
	.s2_2 .arti03 .why .num-box p.dot {margin-top: 20px; font-size: 18px;}
	
	
	/* s2_3 */
	.s2_3 .arti06 .inner .tab a {padding: 0 10px; background-position: calc(100% - 10px) 50%;} 
	.s2_3 .arti06 .cnt .swiper {width: 100%;}
	.s2_3 .controls {top: initial; bottom: 30px; transform: none; transform: translateX(-50%); max-width: 110px;}
	
	.s2_3 .arti06 .cnt .df-cnt {flex-wrap: wrap;}
	.s2_3 .arti06 .cnt .df-cnt figure {flex: 0 0 calc(50% - 5px);}
	
	.s2_3 .article-tit ~ .article-tit p {margin-top: 100px;}
	
	.s2_3 .arti07 {margin-top: 100px; padding-bottom: 120px;}
	.s2_3 .arti07 .item {flex-wrap: wrap;}
	.s2_3 .arti07 .item figure {max-width: 100%;}
	.s2_3 .arti07 .item .txt {width: 100%;}
	.s2_3 .arti07 .item .txt p {font-size: 18px;}
	.s2_3 .arti07 .item .txt ul li {min-height: 90px;}
	.s2_3 .arti07 .item .txt ul li p {font-size: 16px;}
	.s2_3 .arti07 .item:not(:last-child) {margin-bottom: 100px;}
	
	.s2_3 .arti08 {padding-bottom: 150px; margin-top: 100px;}
	.s2_3 .arti08 ul {flex-wrap: wrap;}
	.s2_3 .arti08 ul li {flex: 0 0 calc(33.333% - 27px);}
	
	.s2_3 .arti08 h5 {font-size: 22px;}
	
	/* s2_4 */
	.s2_4 .arti01 .why .num-box .box p.round {gap: 20px; height: 50px; font-size: 20px;}
	.s2_4 .arti02 .table-wrap table colgroup {display: none;}
	.s2_4 .arti02 .table-wrap table th {font-size: 18px;}
	.s2_4 .arti02 .table-wrap table td {padding: 15px 10px;}
	.s2_4 .arti02 .table-wrap table td p {font-size: 16px;}
	.s2_4 .arti02 .table-wrap table td p.dot {padding-left: 15px;}
	.s2_4 .arti02 .table-wrap table td p.dot::before {width: 4px; height: 4px; top: 8px;}
	.s2_4 .arti02 .table-wrap table th:nth-of-type(1) {width: 100px;}
	
	.s2_4 .arti03 .system .img {flex: 100%;}
	.s2_4 .arti03 .system .img .img-tit {font-size: 16px; max-width: 250px; height: 40px; top: -25px;}
	.s2_4 .arti03 .system .img .img-tit span {font-size: 14px; width: 22px; height: 22px;}
	
	.s2_4 .arti04 .generator .spec .spec-box .txt dl {flex-wrap: wrap; gap: 5px;}
	.s2_4 .arti04 .generator .spec .spec-box .txt dl ~ dl {margin-top: 15px;}
	.s2_4 .arti04 .generator .spec .spec-box .txt dl dt {max-width: 100%;}
	
	/* s2_5 */
	.s2_5 .dep3 {margin-bottom: 60px;}
	.s2_5 .dep3 ul {flex-wrap: wrap; gap: 10px;}
	.s2_5 .dep3 ul li {flex: 0 0 calc(33.333% - 7px)}
	.s2_5 .dep3 ul li a {font-size: 16px; height: 60px; border-radius: 10px !important; border: 1px solid #ddd !important;}
	
	.s2_5 h5 {font-size: 20px;}
	
	.s2_4 .arti01 ul {gap: 40px 20px;}
	.s2_4 .arti01 ul li {flex: 0 0 calc(50% - 10px);}
	.s2_4 .arti01 ul li dl dt {font-size: 18px;}
	.s2_4 .arti01 ul li dl dd {font-size: 18px;}
	.s2_4 p {font-size: 20px;}
	.s2_4 .arti02 {margin-top: 100px;}
	
	.s2_4 .arti03 .why .num-box .box dl dt {line-height: 80px !important;}
	.s2_4 .arti03 .why .num-box .box dl dd {flex-wrap:wrap; line-height: 1 !important; height: 80px !important; gap: 0 !important;}
	
	.s2_4 .arti04 .why .num-box .box dl dt {line-height: 80px !important;}
	.s2_4 .arti04 .why .num-box .box dl dd {flex-wrap:wrap; line-height: 1 !important; height: 80px !important; gap: 0 !important;}
	
	
	
	/* s5_1 */
	.s5_1 .arti01 .apply {font-size: 16px; max-width: 180px; line-height: 48px;}
	.s5_1 .arti01 figure {margin-top: 60px;}
	.s5_1 .arti01 a {font-size: 18px;}
	
	.s5_1 .arti02 {margin-top: 100px;}
	
	.s5_1 .process {margin-top: 40px;}
	.s5_1 .process ul {flex-wrap: wrap;}
	.s5_1 .process ul li {flex: 0 0  calc(50% - 10px);}
	.s5_1 .process ul li ~ li::before {display: none;}
	.s5_1 .process ul li dl::after {width: 60px; height: 60px; background-size: 60px auto;}
	.s5_1 .process ul li dl dt {line-height: 50px; font-size: 16px;}
	.s5_1 .process ul li dl dt span {width: 30px; line-height: 30px;}
	.s5_1 .process ul li dl dd > h6 {font-size: 18px;}
	.s5_1 .process ul li dl dd > p {font-size: 16px;}
	
	.s5_1 .ideal {gap: 10px; justify-content: center;}
	.s5_1 .ideal .circle {width: 150px; height: 150px;}
	.s5_1 .ideal .circle dl dt {font-size: 18px;}
	.s5_1 .ideal .circle dl dd {font-size: 14px;}
	.s5_1 .ideal .circle ~ .circle::before {width: 10px; left: -10px;}
	
	/* s6_1 */
	.s6_1 .arti02 {margin-top: 100px;}
	.s6_1 .partner {gap: 10px; margin-top: 40px;}
	.s6_1 .partner figure {flex: 0 0 calc(33.333% - 7px);}
	.s6_1 .arti02 > figure {margin-top: 40px;}
}

@media (max-width: 480px) {
	.page-header > .container {padding-top: 160px;;}
	.lnb .btn-drop {font-size: 16px;}
	.lnb > ul li a {font-size: 16px;}
	.lnb .s-nav ul li:nth-of-type(3) {display: none;}
	
	article h3 {font-size: 24px;}
	.article-tit h5 {font-size: 20px; padding-left: 15px;}
	.article-tit h5::before {top: 9px; height: 16px; }
	article p.dot {font-size: 16px;}
	article p.dot::before {top: 10px;}
	
	.s1_1 .arti01 dl {gap: 0; flex-wrap: wrap;}
	.s1_1 .arti01 dl dt {max-width: 100%; font-size: 16px; padding-left: 15px;}
	.s1_1 .arti01 dl dd {width: 100%; font-size: 16px; padding-left: 15px;}
	
	.s1_1 .arti02 .cnt.ty2 ul li figure figcaption {font-size: 16px;}
	
	/* s1_2 */
	.s1_2 {background-position: 20% 50%;}
	.s1_2 .arti01 ul li {flex: 0 0 calc(50% - 5px);}
	.s1_2 .arti01 ul li h5 {font-size: 24px;}
	.s1_2 .arti01 ul li p {font-size: 16px;}
	.s1_2 .arti01 ul li p::before {top: 10px;}
	
	/* s1_3 */
	/* .s1_3 .map-info .info {gap: 10px; padding: 15px;}
	.s1_3 .map-info .info dl {width: 100%; flex: none;} */
	.s1_3 .map-info .info h5 {font-size: 18px;}
	.s1_3 .map-info .info p {margin-top: 10px; font-size: 16px;}
	.s1_3 .map-info .info dl dd {font-size: 16px;} 
	.s1_3 .map-info figure figcaption {font-size: 16px;}
	
	/* s2_1 */
	.s2_1 .banner .tab a {font-size: 16px; padding: 0 15px; background-position: calc(100% - 15px) 50%;}
	.s2_1 .banner .img p {font-size: 16px;}
	.s2_1 .nav-btn {height: 40px; max-width: 90px;}
	.s2_1 .nav-btn .design-btns {width: 40px; height: 40px;} 
	
	.s2_1 .arti05 .why .num-box .box ~ .box {margin-top: 40px;}
	.s2_1 .arti05 .why .num-box .box dl dt {line-height: 50px; font-size: 18px;}
	.s2_1 .arti05 .why .num-box .box dl dd {line-height: 50px; font-size: 18px;}
	.s2_1 .arti05 .why .num-box .box p.dot {font-size: 16px;}
	
	.s2_1 .arti06 .app .ess figure figcaption {font-size: 18px; max-width: 260px;}
	.s2_1 .arti06 .app .ess::before {width: 330px; background-size: 330px auto;}
	.s2_1 .arti06 .app .ess dl dt {font-size: 16px;}
	.s2_1 .arti06 .app .ess dl dd {font-size: 16px;}
	
	/* s2_2 */
	.s2_2 .arti01 .img-box figure {width: 100%; flex: none;}
	.s2_2 .arti03 .why .num-box dl dt {font-size: 18px;}
	.s2_2 .arti03 .why .num-box dl dd {font-size: 18px;}
	.s2_2 .arti03 .why .num-box dl dd span {font-size: 14px;}
	.s2_2 .arti03 .why .num-box p.dot {font-size: 16px;}
	
	/* s2_3 */
	
	.s2_1 .arti07 .article-tit h5 {flex-wrap: wrap; gap: 10px;}
	.s2_1 .arti07 .article-tit h5 > span {padding: 0 10px; font-size: 14px; margin-left: 0;}
	
	/* s2_3 */
	.s2_3 .arti06 .inner .tab a {flex: none; width: 100%; padding: 0 30px; background-position: calc(100% - 30px) 50%; height: 55px;}
	
	.s2_3 .arti07 ul {gap: 20px; margin-top: 40px;}
	.s2_3 .arti07 ul li {flex: 0 0 calc(50% - 10px);}
	.s2_3 .arti07 ul li dl dt {max-width: 120px; margin: 0 auto;}
	
	.s2_3 .arti08 h5 {font-size: 20px;}
	
	/* s2_5 */
	.s2_5 .dep3 ul li {flex: 0 0 calc(50% - 5px)}
	
	.s2_4 .arti01 ul {gap: 40px 10px;}
	.s2_4 .arti01 ul li {flex: 0 0 calc(50% - 5px);}
	.s2_4 .arti01 ul li dl {flex-wrap: wrap; gap: 5px;}
	.s2_4 .arti01 ul li dl dt {width: 100%; font-size: 16px; text-align: center; padding-right: 0;}
	.s2_4 .arti01 ul li dl dt::after {display: none;}
	.s2_4 .arti01 ul li dl dd {font-size: 16px; width: 100%; text-align: center;}
	
	.s2_4 .arti01 .why .num-box .box dl dd span {font-size: 14px;}
	.s2_4 .arti01 .why .num-box .box p.round {font-size: 18px; height: 40px;}
	
	.s2_4 .arti02 .table-wrap {overflow: auto; margin-top: 40px;}
	.s2_4 .arti02 .table-wrap table th {width: 120px !important;}
	
	.s2_4 .arti03 .why .num-box .box dl dd span {font-size: 14px; padding: 0 10px;}
	.s2_4 .arti03 .system {margin-top: 65px;}
	
	.s2_4 .arti04 .generator {padding: 30px 15px; margin-top: 40px;}
	.s2_4 .arti04 .generator .spec h5 {font-size: 18px; padding: 10px;}
	
	/* s5_1 */
	.s5_1 .arti01 a {line-height: 1.5;} 
	.s5_1 .arti01 a .mo {display: block;}
	.s5_1 .process ul li {flex: none; width: 100%; min-height: 200px;} 
	.s5_1 .process ul li dl {padding-bottom: 70px;}
	.s5_1 .process ul li dl::after {width: 55px; height: 55px; background-size: 55px auto;}
	.s5_1 .process ul li dl dd > h6 {font-size: 16px; min-height: auto;}
	
	.s5_1 .ideal {gap:0 10px;flex-wrap: wrap;}
	.s5_1 .ideal .circle {width: 160px; height: 160px;}
	.s5_1 .ideal .circle ~ .circle::before {display: none;}
}