/*-------------------------------
	공통
------------------------------*/
dl,ol,ul { margin: 0; padding: 0;}

.smartPage {background: #fff;padding: 0;font-size: 16px;max-width: 1240px;margin: 0 auto;}

.smartPage h2 {font-size: 1.4em;margin: 0;color: #000;}
.smartPage .desc {font-size: 1.0em;color: #555;font-weight: 400;padding: 15px;}

/*스마트상점 기술보급사업 안내자료*/
.smartPage .guide {background: #fff4f1;border-radius: 40px;margin-top: 70px;border: 1px solid #ffeae5;}
.smartPage .guide .btns {display: flex; grid-gap: 10px;}
.smartPage .guide a {border: 1px solid #ff896b;background: #ffffff;padding: 6px 10px 6px 6px;color: #bf2525;align-items: center;border-radius: 5px;}
.smartPage .guide a i {color:#f30;align-self: center;font-size: 24px;}

.smartPage article {display: block;padding: 30px;margin-bottom: 40px; border-radius: 5px;background: #fff;}
.smartPage article.notice {margin-top: 40px;}
.smartPage article.usage_wrap {border: 3px solid #d6e8ff;border-radius: 15px;}
.smartPage article.additional {border: 0;border-radius: 15px;background: #f2f2f2;}

.title-section {display: block;text-align: left;margin-bottom: 30px;}
.title-section h1 {color: #0f67c5; margin: 0; font-size: 28px;}

@media (max-width: 768px) {
	.smartPage {max-width:100%; padding:0 10px;}
	.smartPage .guide .btns {display: block;}
	.title-section h1 {font-size: 22px; line-height: 1.5}

}

/*-------------------------------
	smart_flow
------------------------------*/

.flow_section {margin-bottom: 40px;}


.smart_flow .title {font-size: 23px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; color: #2363a7;}
.smart_flow .title span {display: inline-block; background: #007bff; color: #fff; font-size: 1rem; width: 28px; height: 28px; text-align: center; line-height: 28px; border-radius: 50%; margin-right: 10px;}


.smart_flow .contents {background-color: #f5f9ff;padding: 20px;border-radius: 10px;font-size: 15px;line-height: 1.6;color: #333;}
.smart_flow .contents a {color: #007bff; text-decoration: underline;}
.smart_flow .contents ul {padding-left: 20px;}
.smart_flow .contents li {margin-bottom: 5px;}
.smart_flow .contents {background-color: #f9f9f9; padding: 20px; border-radius: 10px; font-size: 15px; line-height: 1.6; color: #333;}
.smart_flow .contents ul {padding: 7px 20px; margin: 0;}
.smart_flow .contents li {margin-bottom: 6px; list-style: none; padding: 0 10px;}
.smart_flow .contents li strong {font-size: 17px; color: #333; margin-left: -15px;}
.smart_flow .contents li .empasis {color: #f30; font-weight: 600;}


.smart_flow .contents .btn {color: #fff; vertical-align: middle;}
.smart_flow .content-section p {font-size: 15px;}

/*移댁뭅�� 梨꾨꼸 �곷떞�섍린*/
.wrap_qr {display: inline-block; border: 1px solid #ddd; background: #fff; padding: 20px 30px; border-radius: 20px; margin: 10px 0 10px 0;}
.wrap_qr h1 {font-size: 20px; margin-bottom: 5px;}
.wrap_qr h3 {font-size: 15px; margin-bottom: 10px; color: #777
}
.screen_out {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}
.wrap_qr .box_qr {display: flex; grid-gap: 30px; padding: 10px 30px 0; align-items: center;}
.wrap_qr .box_qr img {max-height: 90px; align-self: center;}
.wrap_qr .btn_channel_add {display: flex; justify-content: center; align-items: center; width: calc(100% - 6px); height: 32px; margin: 10px 3px 0; font-size: 12px; color: #191919; border-radius: 68px; background: #fff;}

/*toggle_tip*/
.toggle_tip {display: block; margin: 0 20px; overflow: hidden; position: relative; margin-top: 10px;}
.toggle_tip summary {position: relative; display: inline-block; padding: 12px 45px 12px 12px; cursor: pointer; font-weight: 500; font-size: 16px; line-height: 1; background-color: #f1e9ff; color: #673AB7; list-style: none; border: 1px solid #d2cadf; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);}
.toggle_tip summary::-webkit-details-marker {display: none;}
.toggle_tip summary::after {content: ""; position: absolute; right: 15px; top: 14px; width: 8px; height: 8px; border-right: 2px solid #673AB7; border-bottom: 2px solid #673AB7; transform: rotate(45deg); transition: transform 0.3s ease;}
.toggle_tip[open] summary::after {transform: rotate(225deg); margin-top: 4px;}
.toggle_tip .toggle-content {padding: 10px 30px; background: #ffffff; border-top: 1px solid #eee; color: #555; font-size: 15px; line-height: 1.6;}
.toggle_tip .toggle-content ul {display: block; padding: 5px 0;}
.toggle_tip .toggle-content span {display: block; font-size: 15px; line-height: 1.4; color: #000000; padding: 3px 0; align-self: center;}
.toggle_tip .toggle-content dl {padding: 10px 20px; margin: 0;}
.toggle_tip .toggle-content dd {display: block; padding: 5px 0; margin: 0; font-size: 14px; color: #777; line-height: 1.2;}
.toggle_tip[open] {background-color: #f1e9ff; border: 1px solid #d2cadf; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);}
.toggle_tip[open] summary {background: none; border: 0; box-shadow: none; position: inherit; margin: 0; display: block;}


/*�숈쁺��*/
.smart_flow .video-link {display: inline-flex; color: #333 !important; font-size: 14px; padding: 7px; margin: 10px 10px 0 10px; border-radius: 5px; gap: 5px; line-height: 22px; border:1px solid  #dc3545;}
.smart_flow .video-link:hover {background: #fee;}
.youtube-icon {width: 30px; height: 22px; background-color: #FF0000; border-radius: 3px; position: relative; display: inline-block; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); vertical-align: middle;}
.youtube-icon::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-left: 9px solid white; border-top: 5px solid transparent; border-bottom: 5px solid transparent;}


.youtube-icon::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-left: 9px solid white; border-top: 5px solid transparent; border-bottom: 5px solid transparent;}



/*reviewing_zoom*/
.reviewing_zoom {display: grid;grid-template-columns: 40px auto 140px;grid-gap: 15px;background: #2d8cff;border-radius: 20px;padding: 20px;width: 100%;margin-bottom: 50px;}
.reviewing_zoom ul {align-self: center;margin: 0;border-radius: 15px;padding: 0;}
.reviewing_zoom .zoom_logo {height: 40px;}
.reviewing_zoom .ttl {font-size: 24px;color: #ffffff;font-weight: 700;padding: 0;}
.reviewing_zoom .desc {font-size: 15px;color: #eee;font-weight: 400;line-height: 1.5;padding: 5px 0;}
.reviewing_zoom iframe {margin-bottom: 0;}


.reviewing_zoom .btn {position: relative;padding-right: 40px;}
.reviewing_zoom .btn::before {content: '';position: absolute;top: 50%;right: 10px;transform: translate(-40%, -50%);width: 0;height: 0;border-left: 12px solid white;border-top: 8px solid transparent;border-bottom: 7px solid transparent;}

.smart-info .content-section .docu-list h6 {font-size:1.3rem;}
.docu-list li {padding-left:1rem; color:#777;}
.docu-list li strong {color: #1a70cb;font-weight: 400; font-size:1.1rem;}
.docu-list li p {margin-bottom:5px; padding-left:1rem; margin-top:0.1rem;}
.docu-list li p strong {font-size:1em;}
.docu-list li p > .btn {margin-top:0.5rem;}


.docu-list.pc {display: none;}
.docu-list.mobile {display: inline-block; width:100%;}
.smart-info .content-section ul.docu-list {margin-bottom:1rem;}


@media (max-width: 768px) {
	.reviewing_zoom {grid-template-columns: 1fr;}
	
	.fixed_btn {display: flex;justify-content: flex-end;grid-gap: 5px;right: 0;bottom: 0;background: #f5f5f5;border-top: 1px solid #ddd;padding: 10px;width: 100%;}
	.fixed_btn a {border-radius: 10px;padding: 5px;font-size: 14px;line-height: 16px;width: auto;align-self: center;}
	.fixed_btn a i {display: none;}

	.smart_flow {padding:0px;}
}

/*-------------------------------
	smart_shop
------------------------------*/

.smartPage article.info_wrap {border: 1px solid #ddd;border-radius: 15px;}
.smartPage article.service_wrap {border: 1px solid #ddd;border-radius: 15px;}
.smartPage article.inquiry_wrap {border: 0;border-radius: 15px;background: #f2f2f2;}


/*바우처 본문*/
.voucherImg {width: 900px; max-width:100%; margin: 0 auto; text-align: center; border: 1px solid #ddd; padding: 50px;}
.voucherTop{margin: 0 auto;max-width: 1200px; margin-top:20px;}
.voucherTop ul li{width:100%;display:inline-block;text-align: left;vertical-align:top;}
.voucherTop dl{margin-bottom: 15px;display: flex;justify-content: flex-start;grid-gap: 10px;}
.voucherTop dt{padding:3px;height: 35px;font-size: 0.9em;background:#0085cd;color:#fff;border-radius: 10px;line-height: 35px;display: block;width: 120px;vertical-align:middle;text-align: center;align-self: top;padding: 0;}
.voucherTop dd{width: calc(100% - 140px);display: block;text-align: left;vertical-align: middle;margin: 0;margin-top: 5px;font-size: 1em;align-self: center;line-height: 1.5;color: #555;}

@media (max-width:768px) {
	.voucherImg {padding:30px;}
}
@media (max-width:575px) {
	.voucherImg {padding:20px 0;}

	.voucherTop dt {height:32px; line-height: 1.2}
	.voucherTop dd {width:100%;}
}

/* 파란소프트 제품*/
.smart_service {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 30px;}


.service_item {cursor: pointer;background: #d4ffc4;border-radius: 30px;padding: 40px 30px;text-align: center;}
.service_item h3 {display:block;color: #00561c;font-weight: 700;font-size: 1em;}
.service_item h3 img {display: block;margin: 0 auto;max-height: 45px;}
.service_item h3 strong {display: block;font-size: 1.1em;font-weight: 400;margin-top: 15px;}
.service_item p {display: inline-block;color: rgba(0,0,0,0.7);font-size: 0.98em;line-height: 1.5;text-align: left;margin-top: 10px;} 
.service_item a {display: block;width: 200px;margin: 0 auto;background: rgba(0,0,0,0.2);padding: 10px;border-radius: 7px;margin-top: 10px;color: #fff;}
.service_item.yellow {background: #ffe89f;}
.service_item.yellow h3 {color: #644200;}

.smart_service .img {width: 100%; height:250px; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; margin-bottom: 15px;}
.smart_service .ttl + p {font-size: 14px;line-height: 22px;text-align: left;}


/*문의상담*/
.inquiry_con dl{margin-bottom: 10px;display: grid;grid-template-columns: 160px auto;grid-gap: 10px;}
.inquiry_con dt{align-self: center;}
.inquiry_con dd{width: calc(100% - 140px);display: block;text-align: left;vertical-align: middle;margin: 0;font-size: 1em;align-self: center;line-height: 1.5;color: #555;}