main {background-color: #fff; color: #222;}

.intro-inner {padding: 10rem 0;}
.intro-title {line-height: 132%; margin-top: 1.89rem; text-align: center;}
.intro-title-st {font-weight: 500;}
.intro-feature {display: flex; flex-wrap: wrap; column-gap: 1.88rem; row-gap: 3.76rem; margin-top: 5rem;}
.intro-feature-content {width: calc(100% / 2 - 1.88rem / 2); position:relative; padding: 1.88rem 2.5rem; box-sizing: border-box; border-radius: 1.25rem; background: var(--color-background-secondary); flex: 1 1 auto;}
.intro-feature-no {position: absolute; top: 0.625rem; left: 0.625rem; transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; font-size: 1.25rem; background: var(--color-secondary); color: #fff; font-weight: 700; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.intro-feature-title {font-size: 1.38rem;}
.intro-feature-desc {font-size: 1.1rem; margin-top: 0.75rem; color: var(--color-tertiary);}

.kiosk-explanation {background:url('https://www.picosoft.kr/image/kiosk/kiosk-main.png') no-repeat; background-size: cover; color: #fff}
.kiosk-explanation-inner {display: flex; justify-content: space-between;}
.kiosk-explanation-content {padding: 7.5rem 0;}
.kiosk-explanation-title-st {font-weight: 500;}
.kiosk-explanation-desc {display: flex; flex-direction: column; gap: 1.25rem; margin-top: 3.88rem;}
.kiosk-explanation-desc-p {font-weight: 300;}
.kiosk-explanation-img-wrap {align-self: flex-end; width: 47.88rem; aspect-ratio: 766 / 465; margin-right: 1rem;}
.kiosk-explanation-img {display: block; width: 100%; height: 100%; object-fit: cover;}
.kiosk-explanation-con-wrap {display: flex; align-items: center; padding: 3.5rem 0;}
.kiosk-explanation-con {background-color: rgba(255, 255, 255, 0.1); padding: 4em 2.5em; height: fit-content; border-radius: 20px;}
.kiosk-explanation-con:first-child {margin-right: 1rem;}
.kiosk-explanation-con-smalltext {color: rgba(255, 255, 255, 0.8); margin-bottom: 1.88em;} 
.kiosk-explanation-con-title {font-size: 1.88em;}
.kiosk-explanation-con-title br {display: none;}
.kiosk-explanation-con-subtext {margin-top: 3.25em;}

.kiosk-info-inner {padding: 7.5rem 0;}
.kiosk-info-title { white-space: pre-line;}
.kiosk-info-desc {white-space: pre-line;}
.kiosk-info-list {display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 5rem} 
.kiosk-info-item {width: calc((100% - 2 * 2rem) / 3); box-sizing: border-box; background-color: var(--color-background-tertiary); border-radius: 2.5rem; padding: 4.5rem 4rem; text-align: center;}
.kiosk-info-item-head {display: flex; justify-content: space-between; align-items: center;}
.kiosk-info-item-head-l {flex: 1}
.kiosk-info-item-head-l img {width: 5.5rem; height: 5.5rem;}
.kiosk-info-item-ico {width: 5.5rem; height: 5.5rem; fill: #403898}
.kiosk-info-item-title {margin-top: 1.7rem; font-size: 1.6rem; font-weight: 600;}
.kiosk-info-item-simple-desc {font-size: 1.25rem; white-space: pre-line}
.kiosk-info-item-body {align-items: center; margin-top: 0.5rem;}
.kiosk-info-item-content-desc {font-size: 0.875rem; color: #757575; margin-top: 0.5rem; white-space: pre-line;}


#contents section.kiosk-type div.subTitle{margin: 0 auto}

.kiosk-type-mid-ul{display: flex}
.kiosk-type-mid-ul-li{display: flex; box-sizing: border-box}
.kiosk-type-mid-ul-li-in{width: 100%; border-radius: 20px; border: 1px solid #A6B9E5; box-sizing: border-box; background: #fff}
.kiosk-type-mid-ul-li:nth-child(1) .kiosk-type-mid-ul-li-in{background: url(/image/kiosk/table-kiosk.svg) no-repeat}
.kiosk-type-mid-ul-li:nth-child(2) .kiosk-type-mid-ul-li-in{background: url(/image/kiosk/kiosk-2.svg) no-repeat}
.kiosk-type-mid-ul-li:nth-child(3) .kiosk-type-mid-ul-li-in{background: url(/image/kiosk/counter-kiosk.svg) no-repeat}
.kiosk-type-mid-ul-li:nth-child(4) .kiosk-type-mid-ul-li-in{background: url(/image/kiosk/wall-kiosk.svg) no-repeat}
.kiosk-type-mid-ul-li-in-h4{color: var(--color-primary)}
.kiosk-type-mid-ul-li-in-p{color: var(--color-tertiary)}

.kiosk-type-bottom-ul{display: flex}
.kiosk-type-bottom-ul-li{display: flex; box-sizing: border-box}
.kiosk-type-bottom-ul-li-in{background: #F0F4FB; border-radius: 20px; width: 100%}
.kiosk-type-bottom-ul-li-in-p{color: var(--color-secondary); text-align:center}
.kiosk-type-bottom-ul-li-in-p span{font-weight:600}


.kiosk-about {background: url(https://www.picosoft.kr/image/kiosk/kiosk-about-bg.png) no-repeat 50%}
.kiosk-about h2{color: #fff; white-space: pre-line; font-weight: 600; line-height: 132%; text-align: center; }
.kiosk-about .button{display: flex; justify-content: center}
.kiosk-about .button a{color: #fff; display: block; font-weight: 700; border: 1px solid #fff; border-radius: 500px}



.sect-pre {text-align: center;}

/* -----------미디어쿼리------------- */

@media screen and (max-width:1600px) {
	 .kiosk-type-mid-ul-li-in {padding: 2.5em 1.88em 9em;}
	 .kiosk-type-mid-ul-li-in-p {font-size: 15px;}
}

@media screen and (min-width:1281px){
	.kiosk-about {padding: 7.5em 1.25em;}
	.kiosk-about .button{margin-top: 1.88em}
	.kiosk-about .button a{font-size: 1.25em; padding: 1em 3em}
	.kiosk-about h2{max-width: 1600px; margin: 0 auto 0.2em; font-size: 3em;}
	
	#contents section.kiosk-type div.subTitle{padding-bottom: 5em}
	#contents section.kiosk-type h2{text-align:left}
	#contents section.kiosk-type div.subTitle div.comment{text-align:left}
	.kiosk-type-mid-ul{margin:-10px -10px 0; padding-bottom: 5em;}
	.kiosk-type-mid-ul-li{width: calc(100% / 4); padding: 10px}
	.kiosk-type-mid-ul-li-in{padding: 2.5em 1.88em 6em}
	.kiosk-type-mid-ul-li:nth-child(1) .kiosk-type-mid-ul-li-in{background-position:90% 80%; background-size: 4rem}
	.kiosk-type-mid-ul-li:nth-child(2) .kiosk-type-mid-ul-li-in{background-position:90% 80%; background-size: 4rem}
	.kiosk-type-mid-ul-li:nth-child(3) .kiosk-type-mid-ul-li-in{background-position:90% 80%; background-size: 4rem}
	.kiosk-type-mid-ul-li:nth-child(4) .kiosk-type-mid-ul-li-in{background-position:90% 80%; background-size: 4rem}
	.kiosk-type-mid-ul-li-in-h4{font-size: 1.5em; margin-bottom: 0.42em}
	.kiosk-type-mid-ul-li-in-p{white-space: pre-line}
	
	.kiosk-type-bottom-ul{margin:0 -10px}
	.kiosk-type-bottom-ul-li{width: calc(100% / 2); padding: 10px}
	.kiosk-type-bottom-ul-li-in{padding: 2.5em 1.88em}
	.kiosk-type-bottom-ul-li-in-p{font-size: 1.13em; white-space:pre-line}
}

@media screen and (max-width:1280px){
	.intro-inner {padding: 4rem 3vw;}

	.kiosk-explanation-inner {flex-direction: column; padding: 4rem 3vw 2rem;}
	.kiosk-explanation-content {padding: 3.5rem 0;}
	.kiosk-explanation-con-wrap {justify-content: center; padding: 1.5rem 0;}
	.kiosk-explanation-con {width: 100%;}
	
	.kiosk-info-inner {padding: 4rem 3vw;}
	.kiosk-info-list {column-gap: 2rem; row-gap: 1.5rem;} 
	.kiosk-info-item {width: calc((100% - 2rem) / 2); border-radius: 2.5rem; padding: 2.5rem 2rem;}
	
	.kiosk-spec {padding-top: 0;} 
	.kiosk-spec-inner {padding: 4rem 3vw;}
	.kiosk-spec-size-desc {font-size: 1.25rem;}
	
	#contents section.kiosk-type div.subTitle{background-size:31.33em}
	.kiosk-type {padding: 4rem 3vw;}
	.kiosk-type-mid-ul{margin:-5px -5px 0;}
	.kiosk-type-mid-ul-li{padding: 5px}
	.kiosk-type-mid-ul-li-in{padding: 2em 1.33em 6em}
	.kiosk-type-mid-ul-li:nth-child(1) .kiosk-type-mid-ul-li-in{background-position:90% 90%}
	.kiosk-type-mid-ul-li:nth-child(2) .kiosk-type-mid-ul-li-in{background-position:90% 90%}
	.kiosk-type-mid-ul-li:nth-child(3) .kiosk-type-mid-ul-li-in{background-position:90% 90%}
	.kiosk-type-mid-ul-li:nth-child(4) .kiosk-type-mid-ul-li-in{background-position:90% 90%}
	.kiosk-type-mid-ul-li-in-h4{font-size: 1.5em; margin-bottom: 0.42em}
	
	.kiosk-type-bottom-ul{margin:0 -5px}
	.kiosk-type-bottom-ul-li{padding: 5px}
	.kiosk-type-bottom-ul-li-in{padding: 1.33em}
	.kiosk-type-bottom-ul-li-in-p{font-size: 1.13em; white-space:pre-line}

	.kiosk-spec-notice {margin-top: 4rem;}
	.kiosk-spec-notice-cards {margin-top: 4rem;}
	.kiosk-spec-notice-card {width: 46%;}
	.kiosk-spec-notice-card-title {font-size: 1.5rem; margin-top: 2rem;}	
	.kiosk-spec-notice-card-desc {font-size: 1.1rem; margin-top: 1.25rem;}	

	.feature-inner {padding: 4rem 3vw;}
	.feature-item-title {font-size: 1.25rem;}
	.feature-item-desc {font-size: 1rem;}
	
	.kiosk-about {padding: 4em 0.8em;}
	.kiosk-about h2 {font-size: 1.8em; margin: 0 0 0.2em 0;}
	.kiosk-about .button{margin-top: 1.33em}
	.kiosk-about .button a{font-size: 1.07em; padding: 0.94em 2.5em}
	
}

@media screen and (max-width:767px){
	#contents section.kiosk-type div.subTitle{padding-bottom: 3em}
	.kiosk-type-mid-ul{flex-wrap:wrap}
	.kiosk-type-mid-ul-li{width: calc(100% / 2)}
	.kiosk-type-mid-ul-li:nth-child(1) .kiosk-type-mid-ul-li-in{background-size: 2.86em}
	.kiosk-type-mid-ul-li:nth-child(2) .kiosk-type-mid-ul-li-in{background-size: 2.86em}
	.kiosk-type-mid-ul-li:nth-child(3) .kiosk-type-mid-ul-li-in{background-size: 2.86em}
	.kiosk-type-mid-ul-li:nth-child(4) .kiosk-type-mid-ul-li-in{background-size: 2.86em}
	.kiosk-type-bottom-ul{flex-wrap:wrap}
	.kiosk-type-bottom-ul-li{width:100%}
}

@media screen and (max-width: 768px) {
	.kiosk-info-title {white-space: normal;}
	.kiosk-info-desc {white-space: normal;}

	.kiosk-info-list {column-gap: 2rem; row-gap: 1.5rem;} 
	.kiosk-info-item {width: 100%; border-radius: 2.5rem; padding: 1.5rem 2rem;}
	
	.kiosk-info-item-head-l img {width: 4.5rem; height: 4.5rem;}

	
}

@media screen and (min-width:768px) and (max-width:1280px){
	#contents section.kiosk-type div.subTitle{ padding-bottom: 5em}
	#contents section.kiosk-type h2{text-align:center}
	#contents section.kiosk-type div.subTitle div.comment{text-align:left}
	
	.kiosk-type-mid-ul-li{width: calc(100% / 4)}
	.kiosk-type-mid-ul-li:nth-child(1) .kiosk-type-mid-ul-li-in{background-size: 3.33em}
	.kiosk-type-mid-ul-li:nth-child(2) .kiosk-type-mid-ul-li-in{background-size: 3.33em}
	.kiosk-type-mid-ul-li:nth-child(3) .kiosk-type-mid-ul-li-in{background-size: 3.33em}
	.kiosk-type-mid-ul-li:nth-child(4) .kiosk-type-mid-ul-li-in{background-size: 3.33em}
	
	.kiosk-type-bottom-ul-li{width: calc(100% / 2)}
}

@media screen and (max-width:320px){
	.intro-title {font-size: 1.8rem;}
	.kiosk-spec-notice-cards{flex-direction: column; gap: 5rem;}
	.kiosk-spec-notice-card{width: 100%;}
}
@media screen and (min-width:321px) and (max-width:360px){
	.intro-title {font-size: 1.8rem;}
	.kiosk-spec-notice-cards{flex-direction: column; gap: 5rem;}
	.kiosk-spec-notice-card{width: 100%;}
}
@media screen and (min-width:361px) and (max-width:428px){
	.intro-title {font-size: 1.8rem;}
	.kiosk-spec-notice-cards{flex-direction: column; gap: 5rem;}
	.kiosk-spec-notice-card{width: 100%;}
}

@media screen and (max-width:640px) {
	.kiosk-explanation-con-subtext br {display:none;}
}

@media screen and (max-width:520px) {
	.kiosk-explanation-con-title br {display: block;}
}