@charset "utf-8";

/********************* 서브 wrap ********************/
.section-service, .company-wrap, .service-wrap {margin: 0 auto; text-align: center;}
.qna-wrap, .price-wrap, .inquiry-wrap, .process-wrap, .templete-wrap, .payment-wrap, .product-wrap {/* max-width: var(--common-width); */ margin: 0 auto; text-align: center;}


/********************* 서브 - 공통 **********************/
/* 타이틀 */
[class*=section-] .title {max-width: var(--common-width); margin: 1rem auto; text-align: center; font-size: 2rem; box-sizing: border-box;}
[class*=section-] .section-tit {font-size: 5.8rem; font-weight: 700; padding-bottom: 2rem;}
[class*=section-] .section-tt {font-size: 3.85rem; font-weight: 500; padding-bottom: 2rem;}
[class*=section-] .section-st {font-size: 2.85rem; padding-bottom: 2rem;}
[class*=section-] .section-scon {font-size: 2.0rem; padding-bottom: 2rem;}
[class*=section-] .section-tit span, [class*=section-] .section-tt span, [class*=section-] .section-st span,[class*=section-] .section-scon span {color: var(--main-color);}
/* 소타이틀 */
[class*=section-] .stitle {max-width: var(--common-width); margin: 0 auto; text-align: center; font-size: 2rem; box-sizing: border-box;}
[class*=section-] .tit {font-size: 2.0rem; font-weight: 800; color: var(--main-color); text-transform: uppercase; padding-bottom: 0rem; margin-top: 3rem; position: relative;}
[class*=section-] .tit:after {content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); box-sizing: border-box;	display: inline-block;	width: 2rem; height: 0.4rem; border-radius: 10rem; background: var(--main-color);}
[class*=section-] .tt {font-size: 3.0rem; font-weight: 600; color: var(--darkgray); padding-bottom: 1rem;}
[class*=section-] .st {font-size: 2.2rem; color: var(--darkgray); display: inline-block; padding-bottom: 1rem;}
[class*=section-] .ss {font-size: 2.0rem; color: var(--darkgray); padding-bottom: 1rem;}
[class*=section-] .sss {font-size: 2.0rem; color: var(--darkgray); padding-bottom: 1rem;height: 40px; }
[class*=section-] .scon {font-size: 1.8rem; color: var(--darkgray); padding-bottom: 1rem;}
[class*=section-] .tit span,
[class*=section-] .tt span,
[class*=section-] .st span,
[class*=section-] .desc span,
[class*=section-] .st span em,
[class*=section-] .ss span, .sss span,
[class*=section-] .scon span {color: var(--main-color); /* font-weight: 600; */}
/* 스퀘어박스 */
[class*=square-item] .txt-box .tt {font-size: 2.0rem;}
[class*=square-item] .txt-box .st {font-size: 1.6rem;}
[class*=square-item] .txt-box .ss {font-size: 1.4rem;}
[class*=square-item] .txt-box .sss {font-size: 1.4rem;}
[class*=square-item] .txt-box .scon {font-size: 1.4rem; font-weight: 300;}
/* 노랑밑줄강조 */
.deco {position: relative;}
.deco:after {content: ''; display: inline-block; position: absolute; width: 100%; height: 1rem; bottom: 0.5rem; left: 0rem; background: rgba(255, 245, 73, 0.8); z-index: -1;}
.decos {display: flex; margin-left: 3rem; /* gap: 0.5rem; */ padding-bottom: 0.5rem;}
.decos:before {content: '\e92b'; font-family: var(--xeicon); /* font-size: 0.8rem; line-height: 4.3; */ display: flex; align-items: flex-start; justify-content: center; margin-left: -3rem; padding-right: 0.5rem; padding-top: 0.02rem; color:var(--mudgray);}
/* 서브 bg */
.company-bg {position: relative; width: 100%; height: 0; padding-top: 35%; margin: 10rem 0; background: center / cover no-repeat url(../images/sub/company_bg.jpg);}
.process-bg {position: relative; width: 100%; height: 0; padding-top: 35%; margin: 10rem 0; background: center / cover no-repeat url(../images/sub/process_bg.jpg);}
.service-bg {position: relative; width: 100%; height: 0; padding-top: 35%; margin: 10rem 0; background: center / cover no-repeat url(../images/sub/service_bg.jpg);}
@media all and (max-width: 1280px) {
}
@media all and (max-width: 1024px) {
}
@media all and (max-width: 800px) {	
  [class*=section-] .section-tit {font-size: 2.4rem; padding-bottom: 1rem;}
  [class*=section-] .section-tt {font-size: 2.0rem; padding-bottom: 1rem;}
  [class*=section-] .section-st {font-size: 1.6rem; padding-bottom: 1rem;}
  [class*=section-] .section-scon {font-size: 1.5rem; padding-bottom: 1rem;}
  [class*=section-] .tt {font-size: 2.0rem;}
  [class*=section-] .tit {font-size: 1.8rem;}
  [class*=section-] .st {font-size: 1.6rem;}
  [class*=section-] .ss {font-size: 1.5rem;}
  [class*=section-] .scon {font-size: 1.6rem;}
  /* .decos:before {font-size: 0.5rem; line-height: 4.4;}   */
}
@media all and (max-width: 640px) {  
}
@media all and (max-width: 480px) {	
}







/******************** 회사소개 *********************/
/* 회사소개 */
.company {max-width: var(--common-width); margin: 0 auto;}
.company .txt-box {text-align: center; font-size: 3.85rem; line-height: 1.5em; letter-spacing: -0.0045em; color: var(--black);}
.company .circle-box {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 1rem;	padding: 5rem 0;	justify-content: center;	justify-items: center;}
.company .circle-box .circle {width: 30rem; height: 30rem; border-radius: 50%; position: relative;}
.company .circle-box .circle.gray {background-color:var(--white2);}
.company .circle-box .circle.yellow {background-color:var(--lightyellow);}
.company .circle-box .circle.cyan {background-color:var(--lightcyan);}
.company .circle-box .circle .txt-box {position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; height: 100%;}
.company .circle-box .circle .txt-box {font-size: 1.5rem; font-weight: 300; line-height: 1.8em; letter-spacing: -0.05em; color: var(--black); padding-top: 0rem;}
.company .circle-box .circle .txt-box figure {margin-bottom: 2rem; width: 95px; height: 100px;}
.company .circle-box .circle .txt-box figure.img01 {background: url(../images/common/ico_company_01.png);}
.company .circle-box .circle .txt-box figure.img02 {background: url(../images/common/ico_company_02.png);}
.company .circle-box .circle .txt-box figure.img03 {background: url(../images/common/ico_company_03.png);}
.company .circle-box .circle .txt-box figure.img04 {background: url(../images/common/ico_company_04.png);}
.company .circle-box .circle .txt-box .txt {font-size: 2.4rem; font-weight: 400;}
.company .circle-box .circle .txt-box .txt .number {font-size: 3.8rem; font-weight: 800; letter-spacing: -0.08em;}
/* 비전 */
.vision {max-width: var(--common-width); margin: 0 auto; }
.vision .vision-txt-box {display: flex; justify-content: center; align-items: start; flex-direction: row; flex-wrap: nowrap;}
.vision .vision-txt-box .txt-box {flex: 1; text-align: center; font-size: 2.8rem; line-height: 1.5em; letter-spacing: -0.0045em; color: var(--black); padding: 2rem; box-sizing: border-box;}
.vision .vision-txt-box .txt-box .com-vision-tit {font-weight: 800;}
.vision .vision-txt-box .txt-box .com-vision-tt {font-weight: 500; padding: 1.2rem 0; color: var(--main-color);}
.vision .vision-txt-box .txt-box .com-vision-st {font-weight: 300; font-size: 2rem; line-height: 1.35em;}
.vision .vision-txt-box .txt-box .com-vision-st em {font-weight: 500; color: var(--main-color);}
.vision .vision-txt-box .vision-img {height: 50rem; flex:1;	background: url(../images/sub/vision_img01.jpg) no-repeat center center / cover;}
.vision .vision-square-box {display: grid; grid-template-columns: 1fr 1fr 1fr 0.8fr; grid-template-rows: auto; grid-gap: 2rem; padding: 5rem 0rem; /* width: 100%; */}
.vision .vision-square-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--white); border-radius: 0px; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); height: 30rem; box-sizing: border-box; padding: 3rem;}
.vision .vision-square-box .square-item .img-box img {max-width: 100%;}
.vision .vision-square-box .square-item .txt-box { text-align: center; 	letter-spacing: -0.05em; color: var(--black);	margin-top: 2rem;}
.vision .vision-square-box .square-item .txt-box .tt {font-weight: 700; font-size: 2.8rem; line-height: 4rem;}
.vision .vision-square-box .square-item .txt-box .st {font-weight: 300; font-size: 1.85rem; line-height: 1.2em;}
.vision .vision-square-box .square-item .txt-box.marginMin {margin-top: 4.3rem;}
/* 오시는길 */
.location {margin: 0 auto; padding:5rem 0 0 0;}
/* .location div{width: 100%;} */
/* kakao 지도 */
.root_daum_roughmap{max-width: 100%!important; margin: 1rem auto 0 !important; padding:0 !important; border:0 !important;  border-radius:0 !important; box-sizing: border-box;}
.root_daum_roughmap .map_border{display:none !important;}
.wrap_controllers{display: none!important;}
.root_daum_roughmap div {/* position: absolute;	margin: -48px 0px 0px -18px;	z-index: 2;	left: 747px;	top: 229px;	display: block; */} 
/* 상담 */
.contact {margin: 0 auto; padding:5rem 0;}
.contact.contact-bg {background:url(../images/sub/contact_bg.jpg) no-repeat center center / cover;}
/* 분양이야기 */
.story {margin: 0 auto; padding:5rem 0; display: none;}
.story.story-bg {background:url(../images/sub/story_bg.jpg) no-repeat center center / cover;}
/* 회사소개 responsive */
@media all and (max-width: 1280px) {
  .company,
  .vision,
  .location,
  .contact,
  .story {padding: var(--common-padding);}
  .company .circle-box .circle {width: 25rem; height: 25rem;}
  .company .circle-box .circle .txt-box .txt {font-size: 2rem;}
  .company .circle-box .circle .txt-box .txt .number {font-size: 3rem;}
}
@media all and (max-width: 1024px) {
	.company .circle-box {grid-template-columns: 1fr 1fr; grid-gap: 2rem; padding: 2rem 0rem;}
  .company .circle-box .circle {width: 32rem; height: 32rem}
  .company-bg {padding-top: 50%; margin: 5rem 0 10rem;}
  .vision .vision-txt-box .txt-box {padding: 0 2rem 5rem; line-height: 1.2em;}
  .vision .vision-txt-box .txt-box .com-vision-tt {font-size: 2.2rem; line-height: 1.2em;}
  .vision .vision-txt-box .txt-box .com-vision-st {font-size: 1.65rem; line-height: 1.35em;}
  .vision .vision-txt-box .vision-img {height: 40rem}
  .vision .vision-square-box {grid-template-columns: 1fr 1fr 1fr;}  
}
@media all and (max-width: 800px) {	  
  .company .circle-box {grid-template-columns: 1fr;}
	.company .circle-box .circle {width: 100%; height: 25rem; border-radius: 0;}
  .company-bg {padding-top: 40%; margin: 3rem 0 5rem;}
	.vision .vision-square-box {grid-template-columns: 1fr;}
	.vision .vision-txt-box {display: block;}	  
}
@media all and (max-width: 640px) {  
}
@media all and (max-width: 480px) {	
  .root_daum_roughmap_landing {height: 35rem;}
}





/*********************** 홈페이지제작 ***********************/
/* 탭메뉴 tab css */
.tab{width: var(--common-width); margin: 0 auto; }
.tabnav{font-size:0; width:100%; /* border-bottom:2px solid var(--main-color); */}
.tabnav li{display: inline-block; text-align:center; /* width:50%; */ padding:0 1px; box-sizing: border-box; }
.tabnav li a{position:relative; display: block; color: var(--lightgray); background: var(--gray); padding: 2rem 10rem; line-height: 2em; font-size: 2.25rem; border-radius: 5em; transition:var(--transition)!important;}
.tabnav li a:hover,
.tabnav li a.active {color: var(--white); background: var(--lightgray);}
.tabcontent{padding: 10rem 0; color: var(--black);}
/* 홈페이지제작 */
/* 템플릿박스 */
.templete {max-width: var(--common-width); margin: 0 auto;}
.templete .templete-box {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 2rem 2rem; margin: 5rem 0;}
.templete .templete-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* height: 560px; */ box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); box-sizing: border-box; padding: 0rem; transition: var(--transition); position: relative;}
.templete .templete-box .square-item .label_hit {position: absolute; z-index: 11111; top: 0px; left: 0px; background: url(../images/sub/label_hit.png)no-repeat center center; width: 10rem; height: 10rem; display: flex;	align-items: center; justify-content: center;}
.templete .templete-box .square-item .label_hit em {color: var(--white); font-size: 1.68rem;	font-weight: 500;}
.templete .templete-box .square-item:hover {background-color: var(--white3); border:0px solid var(--gray); border-radius: 0px; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.3);}
.templete .templete-box .square-item:nth-of-type(9) {display: none;}
.templete .templete-box .square-item .img-box {max-width: 100%; font-size: 0; overflow: hidden; background-size:cover !important;}
.templete .templete-box .square-item .img-box img {max-width: 100%; transition: var(--transition);}
.templete .templete-box .square-item .img-box:hover img { transform: scale(1.1,1.1);}
.templete .templete-box .square-item .txt-box {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 3rem; text-align: left; /*  gap: 1rem;  width: calc(100% - 10rem); */ width: 100%; flex: 1; box-sizing: border-box;}
.templete .templete-box .square-item .txt-box .check i:hover::before {content: "\e9c7"; transition: var(--transition);}
.templete .templete-box .square-item .txt-box .check.select i::before {content: "\e9c7";}
.templete .templete-box .square-item .txt-box .type-tt {font-size: 2.65rem; font-weight: 700; margin-bottom: 1rem;}
.templete .templete-box .square-item .txt-box .type-st {font-size: 2rem; word-break: break-all; margin-bottom: 1rem;}
.templete .templete-box .square-item .txt-box .type-ss {font-size: 1.6rem; word-break: break-all; margin-bottom: 2rem;}
.templete .templete-box .square-item .txt-box .btn-controls-row {gap: 1rem; overflow: unset; margin: unset; width: 100%;}
/* 라디오버튼 */
.templete .templete-box .square-item .txt-box input {display: none;}
.templete .templete-box .square-item .txt-box .type-tt label {position: relative; padding-left: 0rem;}
.templete .templete-box .square-item .txt-box .type-tt label i {position: absolute; top: 0; left: 0px; font-size: 2.3rem; line-height: 1.35em; color: var(--lightgray);display: none;}
.templete .templete-box .square-item .txt-box .type-tt label i::before {content: "\e9c6"; transition: var(--transition);}
.templete .templete-box .square-item .txt-box .type-tt input:checked + label i::before {content: "\e9c7"; color: var(--darkgray);}
.templete .templete-box .square-item .arrow {position: absolute; bottom: 0; right: 0; transition: var(--transition);}
.templete .templete-box .square-item .arrow a {display: flex; justify-content: center; align-items: center; width: 7rem; height: 6rem; background: var(--graycolor); color:var(--white); }
.templete .templete-box .square-item .arrow a:hover {background: var(--black); transition: var(--transition);}

@media all and (max-width: 1280px) {
  .templete {padding: var(--common-padding);}
  .templete .templete-box {grid-template-columns: 1fr 1fr; margin: 2rem 0;}
}
@media all and (max-width: 1024px) {
  .templete .templete-box .square-item .txt-box {width: calc(100% - 8rem);}
}
@media all and (max-width: 800px) {  
  .templete .templete-box .square-item .txt-box {width: calc(100% - 5rem); padding: 3rem 0;}
  .templete .templete-box .square-item .txt-box .btn-controls-row > button {font-size: 1.75rem; padding: 1.5rem 2rem}
  /* .templete .templete-box .square-item .txt-box .type-tt {font-size: 1.8rem; font-weight: 600;}
  .templete .templete-box .square-item .txt-box .type-st {font-size: 1.8rem; font-weight: 400; line-height: 1.3;} */
}	
@media all and (max-width: 640px) {	
  .templete .templete-box {grid-template-columns: 1fr; grid-gap: 5rem;}
}





/********* 제작과정 *********/
.process {max-width: var(--common-width); margin: 0 auto; }
.process .process-txt-box {text-align: center; font-size: 3.85rem; line-height: 1.5em; letter-spacing: -0.0045em; color: var(--black);}
.process .process-tit {font-weight: 800; padding-bottom: 1.2rem;}
.process .process-tit em {font-weight: 500; color: var(--main-color);}
.process .process-tt {font-weight: 300;}
.process .process-st {font-weight: 300; font-size: 2.3rem; line-height: 1.2em;}
/* 제작과정박스 */
.process .process-square-box {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 2rem 2rem; margin: 5rem 0;}
.process .process-square-box .square-check {text-align: center; margin: 0 2.5rem 3rem;}
.process .process-square-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--white); border-radius: 2.5rem; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); height: 30rem; box-sizing: border-box; padding: 3rem; position: relative; z-index: 10;}
.process .process-square-box .square-item:before {content:""; clear: both; display: block; position: absolute; z-index: 11; top: 10px; left: 10px;  width: 5rem; height: 5rem; background: var(--white); border-radius: 10rem; box-shadow: 5px 1px 5px -1px rgba(100, 100, 100, 0.1); display: flex; align-items: center; justify-content: center; color: var(--lightgray); font-size: 2rem; font-weight: 800;}
.process .process-square-box .square-item:nth-of-type(1):before {content:"";}/* check */
.process .process-square-box .square-item:nth-of-type(2):before {content:"01";}
.process .process-square-box .square-item:nth-of-type(3):before {content:"02";}
.process .process-square-box .square-item:nth-of-type(4):before {content:"03";}
.process .process-square-box .square-item:nth-of-type(5):before {content:"04";}
.process .process-square-box .square-item:nth-of-type(6):before {content:"05";}
.process .process-square-box .square-item:nth-of-type(7):before {content:"";}/* check */
.process .process-square-box .square-item:nth-of-type(8):before {content:"06";}
.process .process-square-box .square-item:nth-of-type(9):before {content:"07";}
.process .process-square-box .square-item:nth-of-type(10):before {content:"";}/* check */
.process .process-square-box .square-item:nth-of-type(11):before {content:"08";}
.process .process-square-box .square-item:nth-of-type(12):before {content:"09";}
/* .process .process-square-box .square-item:nth-of-type(13) {display: none;} */
.process .process-square-box .square-item .img-box {max-width: 100%; width: 120px; height: 100px;}
.process .process-square-box .square-item .img-box.img01 {background: url(../images/sub/ico_process_01.png);}
.process .process-square-box .square-item .img-box.img02 {background: url(../images/sub/ico_process_02.png);}
.process .process-square-box .square-item .img-box.img03 {background: url(../images/sub/ico_process_03.png);}
.process .process-square-box .square-item .img-box.img04 {background: url(../images/sub/ico_process_04.png);}
.process .process-square-box .square-item .img-box.img05 {background: url(../images/sub/ico_process_05.png);}
.process .process-square-box .square-item .img-box.img06 {background: url(../images/sub/ico_process_06.png);}
.process .process-square-box .square-item .img-box.img07 {background: url(../images/sub/ico_process_07.png);}
.process .process-square-box .square-item .img-box.img08 {background: url(../images/sub/ico_process_08.png);}
.process .process-square-box .square-item .img-box.img09 {background: url(../images/sub/ico_process_09.png);}
.process .process-square-box .square-item .txt-box { text-align: center; 	letter-spacing: -0.05em; color: var(--black);	margin-top: 2rem;}
/* .process .process-square-box .square-item .txt-box >p.tt {font-weight: 700; font-size: 2.8rem; line-height: 4rem;}
.process .process-square-box .square-item .txt-box >p.st {font-weight: 300; font-size: 1.85rem; line-height: 1.2em;} */
.process .process-square-box .square-item .txt-box.marginMin {margin-top: 4.3rem;}

@media all and (max-width: 1280px) {
	.process {padding: var(--common-padding);}
}
@media all and (max-width: 1024px) {
  .process .process-square-box {grid-template-columns: 1fr 1fr 1fr;}
}
@media all and (max-width: 800px) {
  .process .process-square-box {grid-template-columns: 1fr 1fr;}
}
@media all and (max-width: 640px) {
  .process .process-square-box {grid-template-columns: 1fr;}
}
@media all and (max-width: 480px) {
}

/* 서비스신청-홈페이지기본정보입력 home_info.html */
.payment {max-width: var(--common-width); margin: 0 auto;}



/********** 구독안내 *********/
.price {max-width: var(--common-width); margin: 0 auto;}
.price .price-box {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 4rem; margin: 5rem 0; }
.price .price-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: space-between; background-color: var(--white); border:1px solid var(--white2); border-radius: 2rem; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); /* height: 68rem;  */box-sizing: border-box; padding: 5rem; transition: var(--transition);}
.price .price-box .square-item:hover {background-color: var(--white3); border:1px solid var(--lightgray); border-radius: 25px; box-shadow: 0px 0px 5px 0px rgba(100, 100, 100, 0.2);}
.price .price-box .square-item:nth-of-type(9) {display: none;}
.price .price-box .square-item .img-box img {max-width: 100%;}
.price .price-box .square-item .txt-box {display: flex; flex-direction: column; align-items: center; justify-content: center;  color: var(--black); gap: 0.7rem;  margin: 1rem 0;/* 	margin-top: 0rem; text-align: center; letter-spacing: -0.038em; line-height: 1.35em;  *//* height: 220px; */}
.price .price-box .square-item .txt-box .tt {font-weight: 700; font-size: 2.8rem; color:var(--main-color); line-height: unset; padding-bottom: unset;}
.price .price-box .square-item .txt-box .st {font-weight: 600; font-size: 2.5rem; line-height: unset; padding-bottom: unset;}
.price .price-box .square-item .txt-box .ss {font-weight: 400; font-size: 1.65rem; color: var(--graycolor); line-height: unset; padding-bottom: unset;}
.price .price-box .square-item .txt-box .ss >span {font-weight: 300; display: inline-flex; align-items: center; justify-content: center; position: relative; margin-right: 0.4rem; gap: 0.2rem; line-height: 1.3;}
.price .price-box .square-item .txt-box .ss >span:after {content: '';	display: block;	width: 100%; height: 1rem; background: rgba(255, 245, 73, 0.5); position: absolute; top: 1rem;	z-index: -1;}
.price .price-box .square-item .txt-box .ss >span:before {content: '\e92c';	display: inline-block; font-family: var(--xeicon); font-size: 1.65rem; }
.price .price-box .square-item .txt-box .sss {font-weight: 400; font-size: 1.65rem; color: var(--graycolor); line-height: unset; padding-bottom: unset; height: 40px;}
.price .price-box .square-item .txt-box .sss >span {font-weight: 300; display: inline-flex; align-items: center; justify-content: center; position: relative; /*margin-right: 0.4rem;*/ gap: 0.2rem; line-height: 1.3;}
/* .price .price-box .square-item .txt-box .sss >span:after {content: '';	display: block;	width: 100%; height: 1rem; background: rgba(255, 245, 73, 0.5); position: absolute; top: 1rem;	z-index: -1; }
.price .price-box .square-item .txt-box .sss >span:before {content: '\e92c';	display: inline-block; font-family: var(--xeicon); font-size: 1.65rem; display: none;} */
/* add */
.price .price-box .square-item .txt-box .sss span:nth-of-type(1)::after {content:"+"; display: block; clear: both;}
.price .price-box .square-item .txt-box .sss span:nth-of-type(3)::before {content:"+"; display: block; clear: both;}

.price .price-box .square-item .select-box {position: relative; padding: 1rem 0; width: 100%; margin-bottom: 20px;}
.price .price-box .square-item .select-box .hosting-select { width: 100%; height: 4.85rem;	border-radius: 0.5rem; border: 1px solid var(--gray);	font-size: 2.0rem;	font-weight: 400;	line-height: 1.5em;	color: var(--black); background: var(--white2);	padding-left: 1.2rem;}
.price .price-box .square-item .select-box .select-arrow {position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; display: none;}
.price .price-box .square-item .total-box {display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 0; letter-spacing: -0.08em;}
.price .price-box .square-item .total-box .total-num {font-size: 3.0rem; color: var(--garycolor);}
.price .price-box .square-item .total-box .total-num-normal {font-size: 2.5rem; color: var(--graycolor); position: relative; display: inline-block;}
.price .price-box .square-item .total-box .total-num-normal+br {display: none;}
.price .price-box .square-item .total-box .total-num-normal>.total-num-s {position: relative;}
.price .price-box .square-item .total-box .total-num-normal::before {content: ""; display: block; clear: both; position: absolute; top: 0; left: -5px; width: 110%; height: 3px; background: var(--red); transform: translateY(1.2rem); z-index: 11;}
.price .price-box .square-item .total-box .total-num-normal::after {content: ""; display: block; clear: both; position: absolute; top: 18px; right: -7px; width: 17px; height: 3px; background: var(--red); transform: rotate(138deg); z-index: 11;}
.price .price-box .square-item .total-box .total-num small {font-size: 2.0rem;}
.price .price-box .square-item .hosting-box {font-size: 1.65rem; padding: 0rem 0 1rem; color: var(--graycolor); line-height: 2em;}
/* add */
.price .desc {display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; padding-top:5rem;}
.price .desc .desc-box {display: flex; flex-direction: row; align-items: baseline; gap: 2rem; }
.price .desc .desc-box .stitle {text-align: left; display: flex; flex-direction: row; align-items: baseline; word-break: break-all; }
.price .desc .desc-box .stitle i {margin-right: .5rem;}
.price .desc .desc-box .stitle a {}
/* .price .desc .desc-box .stitle:hover a {text-decoration: underline;} */

.price .desc .desc-box .point {/*color:var(--main-color);*/ font-weight:600;}
/*.price .desc .desc-box .add-link {width: fit-content; margin-left:1rem;}*/
.price .desc .desc-box a.add-link {background: var(--white2); color: var(--darkgray); border: 1px solid var(--lightgray); border-radius:.5rem; font-size: 1.5rem; font-weight: 400; padding: 0 1rem; letter-spacing: -0.03em; transition:var(--transition); width: fit-content;display: flex; gap: 0rem; align-items: center; line-height: 1.2; height: 3rem;}
.price .desc .desc-box a.add-link:hover {background: var(--lightyellow);}


/*****  *****/
.price-page .price-wrap {margin-top: 6.7rem;}
/***   ***/
.price-page .price-item-box {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 0 2.8rem;}
.price-page .price-item-box .price-item {box-sizing: border-box; border-radius: 25px; box-shadow: 11px 18px 40px 0px rgba(32, 12, 12, 0.07); text-align: center; padding: 0 3.5rem;}
.price-page .price-item-box .price-item.light-blue {border: 1px solid var(--main-color);}
.price-page .price-item-box .price-item.middle-blue {border: 1px solid #086a91;}
.price-page .price-item-box .price-item.deep-blue {border: 1px solid #113966;}
.price-page .price-item-box .price-item .item-tit-box {width: 22.6rem; height: 6.4rem; box-sizing: border-box; margin: 0 auto; transform: translateY(-50%); padding: 2rem 3rem;}
.price-page .price-item-box .price-item .item-tit-box > h5 {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; font-size: 2.6rem; font-weight: 500; line-height: 1.5em; letter-spacing: -0.015em; color: #fff;}
.price-page .price-item-box .price-item .item-top-txt {padding: 3.5rem 0 3.7rem 0;}
.price-page .price-item-box .price-item .item-bottom-txt {padding: 5rem 0;}
.price-page .price-item-box .price-item .item-bottom-txt {border-top: 1px solid rgba(0, 0, 0, 0.1);}
.price-page .price-item-box .price-item .item-tit-box > h5 span {font-size: 1.6rem; font-weight: 500; line-height: 1.5em; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.6);}
.price-page .price-item-box .price-item.light-blue .item-tit-box {background: center / cover no-repeat url("../images/content/price_item_title_img01.png");}
.price-page .price-item-box .price-item.middle-blue .item-tit-box {background: center / cover no-repeat url("../images/content/price_item_title_img02.png");}
.price-page .price-item-box .price-item.deep-blue .item-tit-box {background: center / cover no-repeat url("../images/content/price_item_title_img03.png");}
.price-page .price-item-box .price-item .item-member {font-size: 1.9rem; font-weight: 600; line-height: 1.6em; letter-spacing: -0.025em;}
.price-page .price-item-box .price-item.light-blue .item-member {color: var(--main-color);}
.price-page .price-item-box .price-item.middle-blue .item-member {color: #086a91;}
.price-page .price-item-box .price-item.deep-blue .item-member {color: #113966;}
.price-page .price-item-box .price-item .item-member.non {color: #000;}
.price-page .price-item-box .price-item .item-won {display: block; font-size: 4.2rem; font-weight: 600; line-height: 1.5em; letter-spacing: -0.025em; color: #222; padding-top: 0.6rem;}
.price-page .price-item-box .price-item .item-sub-won {display: block; font-size: 3rem; font-weight: 600; line-height: 1.5em; letter-spacing: -0.025em; color: #222; padding-top: 0.6rem;}
.price-page .price-item-box .price-item .item-charge {display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 500; line-height: 1.5em; letter-spacing: -0.025em; color: rgba(0, 0, 0, 0.7); padding-top: 1.4rem;}
.price-page .price-item-box .price-item .item-charge i {font-size: 2rem; color: #7e7e7e; padding-right: 0.5rem;}
.price-page .price-item-unit {text-align: right; font-size: 1.6rem; font-weight: 500; line-height: 2em; letter-spacing: -0.025em; color: #444; margin-top: 2rem;}
/*** 참고사항 ***/
.price-page .price-reference-box {display: flex; align-items: flex-start; margin-top: 7.4rem;}
.price-page .price-reference-box .reference-tit {width: 19.7%; display: flex; align-items: center; font-size: 3rem; font-weight: 500; line-height: 1.8em; letter-spacing: -0.015em; color: #000;}
.price-page .price-reference-box .reference-tit i {font-size: 3.6rem; color: var(--main-color); margin-right: 1.5rem;}
.price-page .price-reference-box ul {width: 80.3%; display: flex; flex-wrap: wrap; align-items: center;}
.price-page .price-reference-box ul li {position: relative; display: flex; align-items: center; width: 33%; margin-right: 3rem; font-size: 1.7rem; font-weight: 500; line-height: 2em; letter-spacing: -0.025em; color: #222; padding-left: 1rem;}
.price-page .price-reference-box ul li:nth-child(2), .price-page .price-reference-box ul li:last-child {margin-right: 0;}
.price-page .price-reference-box ul li::before {position: absolute; top: 1.5rem; left: 0; content: ""; width: 4px; height: 4px; background-color: #000; border-radius: 50%;}

@media all and (max-width: 1280px) {
	.price {padding: var(--common-padding);}	
  /* .price .price-box .square-item .txt-box .tt {font-size: 2.5rem;}
  .price .price-box .square-item .txt-box .st {font-size: 2.0rem;} */
}
@media all and (max-width: 1200px) {
  .price .price-box {grid-gap: 1rem;}
  .price .price-box .square-item {padding: 2.5rem;}
  .price .desc {gap:2rem;}
  
}
@media all and (max-width: 1024px) {
  .price .price-box {grid-template-columns: 1fr 1fr; grid-gap: 2rem;}
  .price .price-box .square-item {padding: 4rem;}
  /* .price .price-box .square-item .txt-box .tt {font-size: 2.0rem;} 
  .price .price-box .square-item .txt-box .st {font-size: 2.0rem;}
  .price .price-box .square-item .txt-box .ss {font-size: 1.5rem;}
  .price .price-box .square-item .total-box .total-num {font-size: 2.5rem;}*/  
}
@media all and (max-width: 800px) {		
  /* .price .price-box {grid-template-columns: 1fr;}
  .price .price-box .square-item .select-box {width: 80%;} */
}
@media all and (max-width: 640px) {
  .price .price-box {grid-template-columns: 1fr;}
  .price .price-box .square-item {padding: 4rem;}
  .price .price-box .square-item .select-box {width: 100%;}
  .price .desc {gap: 5rem;}
  .price .desc .desc-box {flex-direction: column; align-items: center; gap:0;}
  .price .desc .desc-box .stitle {font-size:1.8rem;}
}
@media all and (max-width: 540px) {	
  
}
@media all and (max-width: 480px) {	
  .price .price-box .square-item {padding: 2rem;}
  .price .desc {gap:3rem;}  
  
}

/********************* 구독안내 - 상품 ***********************/
/* 구독상품 */
.product-wrap {}
.product-page {max-width: var(--common-width); margin: 0 auto 5rem;}
/* 샘플 아이프레임 */
.sample-wrap {display: flex; align-items: center; justify-content: center; position: relative;}
.sample-wrap .sample-icon {display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: 7rem; background: var(--yellow);  font-size: 2rem; position: absolute; bottom: 5rem; left: 0; z-index: 11; border-radius: 0 0 2rem 2rem; box-shadow: 0px -11px 4px -11px rgba(0, 0, 0, .2);}
.sample-wrap .sample-icon:before {content: '\e9aa'; font-family: var(--xeicon); clear: both; color: var(--black); font-size: 2.3rem;}
.product-page .product-sample {display: inline-grid; grid-template-columns: 1fr; position: relative; width: 100%; gap: 4rem; padding: 5rem 0;}
/* .product-page .product-sample .product-iframe-pc {grid-column: 1 / 3; grid-row: 1 / 3;} */
.product-page .product-sample iframe {max-width: var(--common-width); margin: 0 auto; border-radius: 2rem; box-shadow: 1px 1px 5px 1px rgba(0,0,0,.2);}
/* .product-page .product-sample:before {content: '\e9aa sample'; font-family: var(--xeicon); text-transform: uppercase; clear: both; color: var(--white); position: absolute; bottom: 0%; left: 0%; transform: translate(0%,0%); background: var(--main-color); border-radius: 0 1rem 1rem 0; padding: 2rem 2rem 3rem; z-index: 11; font-size: 5rem; display: inline-flex; align-items: center; justify-content: center; } */
/* .product-page .product-sample:after {content: 'sample'; font-family: var(--xeicon); text-transform: uppercase; clear: both; color: var(--white); position: absolute; bottom: 0%; left: 50%; transform: translate(0%,-50%); background: var(--main-color); border-radius: 10rem; padding: 2rem; z-index: 11; font-size: 5rem; display: inline-flex; align-items: center; justify-content: center;} */
/* 구독상품내용 */
.product-page .product-square-box {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 2rem; padding: 5rem 0rem;}
.product-page .product-square-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--white); border-radius: 2rem; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); box-sizing: border-box; padding: 5rem 2rem;}
.product-page .product-square-box .square-item .img-box {max-width: 100%; font-size: 0; width: 67px; height: 60px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.product-page .product-square-box .square-item .img-box.img01 {background-image: url(../images/sub/ico_product_01.png);}
.product-page .product-square-box .square-item .img-box.img02 {background-image: url(../images/sub/ico_product_02.png);}
.product-page .product-square-box .square-item .img-box.img03 {background-image: url(../images/sub/ico_product_03.png);}
.product-page .product-square-box .square-item .img-box.img04 {background-image: url(../images/sub/ico_product_04.png);}
.product-page .product-square-box .square-item .txt-box { text-align: center; 	letter-spacing: -0.05em; color: var(--black);	margin-top: 2rem;}
.product-page .product-square-box .square-item .txt-box .tt {font-weight: 700; font-size: 2.35rem; line-height: 3rem;}
.product-page .product-square-box .square-item .txt-box .st {font-weight: 300; font-size: 1.85rem;}
/* responsive */
@media all and (max-width: 1280px) {
	.product-page {padding: var(--common-padding);}
}
@media all and (max-width: 1024px) { 
  .product-page .product-square-box .square-item {padding: 3rem 2rem;} 
}
@media all and (max-width: 800px) {	
  .product-page .product-square-box {grid-template-columns: 1fr 1fr;} 
  
}
@media all and (max-width: 640px) {	
}
@media all and (max-width: 480px) {	
  .product-page .product-square-box {grid-template-columns: 1fr;} 
  .sample-wrap .sample-icon {font-size: 1.56rem; gap: 0.5rem; height: 5rem;}
}







/************* 서비스 ***************/
/* 서비스박스 */
.service {max-width: var(--common-width); margin: 0 auto; }
.service .service-box {display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-gap: 5rem; max-width: var(--common-width);}
.service .service-box .service-item {display: flex; gap: 8rem; padding-bottom: 10rem;}
.service .service-box .service-item .img-box {max-width: 100%; flex:1;}
.service .service-box .service-item .img-box img {width: 100%;}
.service .service-box .service-item .txt-box {flex:1; display: flex; flex-direction: column; align-items: flex-start; padding: 3rem 0rem; letter-spacing: -0.001em; text-align: left;}
.service .service-box .service-item .txt-box .btn-style-round-maincolor {margin: 3rem 2rem;}
.service .service-box .service-item:nth-of-type(2n) {flex-direction:row-reverse;}
.service .service-box.bg {margin: 0 auto; padding:10rem 0; position:relative;}
.service .service-box.bg:before {position:absolute; content:""; width:800px; height:117px; background:url('../images/sub/text_bg_01.png')50% 50% no-repeat; background-size:contain; right:0; bottom:0;}
.main-intro-btn{position: absolute; bottom: 5rem; left: 0; width: 100%; text-align: center; }
.main-intro-btn a{display: inline-block; font-size: 1.45rem; line-height: 4rem; font-weight: 500; width: 200px; background: var(--main-color); color: var(--white);}
.main-intro-btn a i{margin-left: 1.2rem; font-size: 1.9rem; font-weight: 400; position: relative; top: 0.1rem; transition:var(--transition); transition-property:transform;}
/* 서비스 리스트 */
.service-list {padding:100px 0 0;}
.service-list.bg {padding:100px 0; position:relative;}
.service-list.bg:before {position:absolute; content:""; width:800px; height:117px; background:url('../images/sub/text_bg_01.png')50% 50% no-repeat; background-size:contain; right:0; bottom:0;}
.listbox {width:100%; max-width:var(--common-width); margin:0 auto;}
.listbox:after {content:" "; display:block; clear:both;}
.listbox span {color: var(--main-color); font-weight: 700;}
.listbox ul {margin-bottom:-80px;}
.listbox ul li {display:flex; margin-bottom:15rem;}
.listbox ul li:nth-of-type(2n) {flex-direction:row-reverse;}
.listbox ul li:nth-of-type(2n) .tt-box {margin-left:0; margin-right:6rem;}
.listbox ul li .img {width:50%;}
.listbox ul li .img img {width:100%; filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.05)); border-radius: 0rem 5rem 0 5rem;}
.listbox ul li .tt-box {margin-left:6rem; flex:1 1 auto; min-width:0; width:1%;}
.listbox ul li .tt-box .doc-tit {font-size:3.85rem; letter-spacing:-0.003em; margin-top:3rem;}
.listbox ul li .tt-box .doc-tt {font-size:2.65rem; font-weight: 500; letter-spacing:-0.003em; line-height:1.35em; margin-top:2rem;}
.listbox ul li .tt-box .doc-st {font-size:2.0rem; letter-spacing:-0.03em; line-height:1.5em; margin:2rem 0;}
/* 서비스하단bg박스 */
.bottom-box-bg {display: flex; align-items: center; justify-content: center; width: 100%; height: 35vw; /* padding: 15rem 0; */ /* background: url(../images/sub/bottom_banner_bg.jpg) no-repeat center / cover; */}
.bottom-box-bg.bg-01 {background: url(../images/sub/bottom_banner_bg.jpg)fixed no-repeat center / cover;}
.bottom-box-bg.smart-bg {background: url(../images/sub/bottom_banner_smart_bg.jpg)fixed no-repeat center / cover;}
.bottom-box-bg.munja-bg {background: url(../images/sub/bottom_banner_munja_bg.jpg)fixed no-repeat center / cover;}
.bottom-box-bg.product-bg {background: url(../images/sub/bottom_banner_product_bg.jpg)fixed no-repeat center / cover;}
.bottom-box-txt {max-width: var(--common-width); display: flex; justify-content: center; flex-direction: column; gap: 3rem; text-align: center; box-sizing: border-box;}
.bottom-box-txt .box-tit {font-size: 3.6rem; font-weight: 600; line-height: 1.35em; letter-spacing: -0.015em; color: var(--white2);}
.bottom-box-txt .box-tit span {color:var(--yellow); font-weight: 600;}
.bottom-box-txt .box-tit span.deco {position: relative;}
.bottom-box-txt .box-tit span.deco:after {content: '';  display: inline-block;  position: absolute;  width: 100%;  height: 1rem;  bottom: 0.5rem;  left: 0rem;  background: var(--main-color);  z-index: -1;}

/* 서비스 responsive */
@media all and (max-width: 1280px) {
	.service,
  .bottom-box-txt {padding: var(--common-padding); gap: 1rem;}
	.service .service-box .service-item:nth-of-type(2n),
	.service .service-box .service-item {gap: 5rem; padding-bottom: 5rem;}
  .service .service-box .service-item .txt-box {padding: 0;}
}
@media all and (max-width: 1024px) {
  .bottom-box-bg {padding: 5rem 0;}
  .bottom-box-txt .box-tit {font-size: 2rem;}
  .service .service-box.bg {padding:0rem 0;}
	.service .service-box .service-item:nth-of-type(2n),
	.service .service-box .service-item {flex-direction: column; gap: 0; padding-bottom: 0;}
	.service .service-box .service-item .txt-box {padding: 3rem 0rem;  background: rgba(255,255,255,.0);}
  .service .service-box .service-item .txt-box .btn-style-round-maincolor {margin: 1rem auto;}
  
}
@media all and (max-width: 800px) {	
  
}
@media all and (max-width: 640px) {	 
}
@media all and (max-width: 480px) {
}



/************************** 스마트아이피 **************************/
.service-smart {max-width: var(--common-width); margin: 0 auto;}
/* 스마트아이피 핵심기능 */
.service-smart .smart-square-box {display: grid; grid-template-columns: repeat(4, minmax(20%, auto)); grid-template-rows: auto; gap: 2rem; padding: 5rem 0rem 10rem 0;}
.service-smart .smart-square-box .square-item {display: flex; flex-direction: column; align-items: center; background-color: var(--white); border-radius: 2rem; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); box-sizing: border-box; padding:5rem 3rem;}
.service-smart .smart-square-box .square-item .img-box {max-width: 100%; font-size: 0; width: 67px; height: 60px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.service-smart .smart-square-box .square-item .img-box.img01 {background-image: url(../images/sub/ico_smart_01.png);}
.service-smart .smart-square-box .square-item .img-box.img02 {background-image: url(../images/sub/ico_smart_02.png);}
.service-smart .smart-square-box .square-item .img-box.img03 {background-image: url(../images/sub/ico_smart_03.png);}
.service-smart .smart-square-box .square-item .img-box.img04 {background-image: url(../images/sub/ico_smart_04.png);}
.service-smart .smart-square-box .square-item .txt-box { text-align: center; 	letter-spacing: -0.05em; color: var(--black);	margin-top: 2rem;}
.service-smart .smart-square-box .square-item .txt-box .tt {font-size: 2.0rem;}
.service-smart .smart-square-box .square-item .txt-box .st {font-size: 1.6rem;}
/* 부정클릭 */
.service-smart .negative-square-box{display: flex; flex-direction: column; align-items: center; justify-items: center; gap: 1rem; padding: 3rem 0 10rem 0;}
.service-smart .negative-square-box .square-item {}
.service-smart .negative-square-box .square-item .img-box {max-width: 100%; font-size: 0; width: 100rem; height: 50rem; background-position: center center; background-repeat: no-repeat; background-size: cover;}
/* 자동차단 */
.service-smart .cutoff-square-box{display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 2rem; align-items: center; justify-items: center; padding: 3rem 0rem 10rem 0rem;}
.service-smart .cutoff-square-box .square-item .txt-box .tt {font-size: 3.85rem; font-weight: 700; letter-spacing: -0.015em; color: var(--darkgray); padding-bottom: 1rem; line-height: 1.2em;}
.service-smart .cutoff-square-box .square-item .txt-box .tt span {font-size: 3.85rem; font-weight: 700; letter-spacing: -0.015em; color: var(--main-color); padding-bottom: 1rem; line-height: 1.2em;}
.service-smart .cutoff-square-box .square-item .txt-box .st {font-size: 1.85rem; font-weight: 400; line-height: 1.385em; letter-spacing: -0.015em; color: var(--darkgray); padding-bottom: 1rem;}
.service-smart .cutoff-square-box .square-item .txt-box .scon .deco{position: relative;}
/* 통계자료 */
.service-smart .statistical-square-box{display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 2rem; align-items: center; justify-items: center; padding: 3rem 0rem 10rem 0rem;}
/* 스마트IP설치 */
.service-smart .installation-square-box{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: 0; align-items: center; justify-items: center; padding: 5rem 0rem 10rem 0rem;}
.service-smart .installation-square-box .square-item {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 3rem; width: 100%;}
.service-smart .installation-square-box .square-item .st {font-size: 1.85rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--darkgray);}
.service-smart .installation-square-box .square-item .st span {font-size: 1.85rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--main-color);}
.service-smart .installation-square-box .square-item .img-box {max-width: 100%; font-size: 0; width: 30rem; height: 30rem; background-position: center center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; justify-content: flex-end;}
/* .service-smart .installation-square-box .square-item:not(:last-child) .img-box::before {content: '\e93f'; font-family: var(--xeicon); font-size: 4rem; margin-right: -5rem; color: var(--main-color); z-index: 11; background: var(--white); border-radius: 5rem; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; box-shadow: 2px 0px 4px 0px rgba(100, 100, 100, 0.2);} */
.service-smart .installation-square-box .square-item .img-box.img01 {background-image: url(../images/sub/installation_img01.png);}
.service-smart .installation-square-box .square-item .img-box.img02 {background-image: url(../images/sub/installation_img02.png);}
.service-smart .installation-square-box .square-item .img-box.img03 {background-image: url(../images/sub/installation_img03.png);}
/* 스마트아이피 사용후기 */
.service-smart .after-square-box {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 2rem; padding: 5rem 0rem 10rem;}
.service-smart .after-square-box .square-item {display: flex; flex-direction: column; align-items: center; /* justify-content: center; */ background-color: var(--white); border-radius: 2rem; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); gap: 1rem; box-sizing: border-box; padding: 5rem;}
.service-smart .after-square-box .square-item:nth-of-type(4) {display: none;}
.service-smart .after-square-box .square-item .img-box {max-width: 100%; font-size: 0; width: 16rem; height: 20rem; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.service-smart .after-square-box .square-item .img-box.img01 {background-image: url(../images/sub/after_img01.png);}
.service-smart .after-square-box .square-item .img-box.img02 {background-image: url(../images/sub/after_img02.png);}
.service-smart .after-square-box .square-item .img-box.img03 {background-image: url(../images/sub/after_img03.png);}
.service-smart .after-square-box .square-item .img-box.img04 {background-image: url(../images/sub/after_img04.png);}
.service-smart .after-square-box .square-item .txt-box { text-align: center; 	letter-spacing: -0.05em; color: var(--black);	margin-top: 2rem;}
.service-smart .after-square-box .square-item .txt-box .tt {font-size: 2.35rem; line-height: 3rem;}
.service-smart .after-square-box .square-item .txt-box .st {font-size: 1.85rem;}
.service-smart .after-square-box .square-item .txt-box .scon {font-size: 1.65rem;}
/*  스마트아이피 responsive */
@media all and (max-width: 1280px) {
  .service-smart {padding: var(--common-padding);}
  .service-smart .negative-square-box .square-item .st {word-break: keep-all;}
  /* .service-smart .installation-square-box{ grid-gap: 8rem;}
	.service-smart {padding: var(--common-padding);}
  .service-smart .installation-square-box .square-item .img-box {width: 250px; height: 250px;} */
  .service-smart {padding: var(--common-padding);}
  .service-smart .smart-square-box .square-item .txt-box .tt {font-size: 2.25rem;}
  .service-smart .smart-square-box .square-item .txt-box .st {font-size: 1.65rem;}
  .service-smart .after-square-box .square-item .txt-box .tt {font-size: 2.25rem;}
  .service-smart .after-square-box .square-item .txt-box .st {font-size: 1.65rem;}
  .service-smart .after-square-box .square-item .txt-box .scon {font-size: 1.5rem;}
}
@media all and (max-width: 1024px) {  
  .service-smart .smart-square-box {grid-template-columns: repeat(2, minmax(48%, auto));}
  /* .service-smart .installation-square-box .square-item .img-box.img01::after{left: 28%;} */
  .service-smart .installation-square-box .square-item .img-box {width: 20rem; height: 20rem;}
  .service-smart .after-square-box {grid-template-columns: 1fr 1fr;} 
  .service-smart .after-square-box .square-item:nth-of-type(4) {display: flex;} 
}
@media all and (max-width: 960px) {  
  /* .service-smart .installation-square-box .square-item .img-box {width: 200px; height: 200px;}
  .service-smart .installation-square-box .square-item .img-box.img01::after{top: 25%;}
  .service-smart .installation-square-box .square-item .img-box.img02::after{top: 25%;} */
}
@media all and (max-width: 800px) {	
  .service-smart .installation-square-box {grid-template-columns:1fr; gap: 5rem;}
  .service-smart .installation-square-box .square-item {gap: 2rem;}
  .service-smart .installation-square-box .square-item .img-box {width: 40rem; height: 40rem;}
  .service-smart .installation-square-box .square-item:not(:last-child) .img-box::before {display: none;}
  /* .service-smart .installation-square-box {grid-template-columns: 1fr; grid-gap: 10rem;}
  .service-smart .installation-square-box .square-item .img-box {width: 300px; height: 300px;}
  .service-smart .installation-square-box .square-item .img-box.img01::after{transform: translate(-50%, -50%) rotate(90deg); left: 50%;top: 31%;}
  .service-smart .installation-square-box .square-item .img-box.img02::after{transform: translate(-50%, -50%) rotate(90deg); left: 50%; top: 63%;} */
  .service-smart .smart-square-box {grid-template-columns: 1fr 1fr;}
  .service-smart .after-square-box {grid-template-columns: 1fr;}
}
@media all and (max-width: 640px) {	
  .service-smart .installation-square-box .square-item .img-box {width: 30rem; height: 30rem;}
  .service-smart .smart-square-box {grid-template-columns: 1fr;}
  .service-smart .smart-square-box .square-item .txt-box .tt {font-size: 2.0rem;}
  .service-smart .smart-square-box .square-item .txt-box .st {font-size: 1.8rem;}
  .service-smart .after-square-box .square-item .txt-box .tt {font-size: 1.6rem;}
  .service-smart .after-square-box .square-item .txt-box .st {font-size: 1.5rem;}
  .service-smart .after-square-box .square-item .txt-box .scon {font-size: 1.2rem;}  
}
@media all and (max-width: 480px) {	
  .service-smart .installation-square-box .square-item .img-box {width: 20rem; height: 20rem;}
}








/********************* 문자랑 *********************/
.service-munja {max-width: var(--common-width); margin: 0 auto;}
/* 문자랑 기능 */
.service-munja .munja-square-box {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 2rem; padding: 5rem 0rem;}
.service-munja .munja-square-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--white); border-radius: 2rem; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); box-sizing: border-box; padding: 5rem 2rem;}
.service-munja .munja-square-box .square-item .img-box {max-width: 100%; font-size: 0; width: 67px; height: 60px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.service-munja .munja-square-box .square-item .img-box.img01 {background-image: url(../images/sub/ico_munja_01.png);}
.service-munja .munja-square-box .square-item .img-box.img02 {background-image: url(../images/sub/ico_munja_02.png);}
.service-munja .munja-square-box .square-item .img-box.img03 {background-image: url(../images/sub/ico_munja_03.png);}
.service-munja .munja-square-box .square-item .img-box.img04 {background-image: url(../images/sub/ico_munja_04.png);}
.service-munja .munja-square-box .square-item .txt-box { text-align: center; 	letter-spacing: -0.05em; color: var(--black);	margin-top: 2rem;}
/* 문자랑 활용사례 */
.munja-sample {max-width: var(--common-width); margin: 0 auto;}
.munja-sample .sample-square-box {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 2rem; padding: 5rem 0;}
.munja-sample .sample-square-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box; padding: 0rem;}
.munja-sample .sample-square-box .square-item .img-box {border-radius: 3rem 3rem 3rem 3rem;  box-shadow: 2px 0px 5px 0px rgba(100, 100, 100, 0.2); box-sizing: border-box; padding: 0rem; font-size: 0; height: 50rem; width: 100%; background-position: top center; background-repeat: no-repeat; background-size: cover;}
.munja-sample .sample-square-box .square-item .img-box.img01 {background-image: url(../images/sub/munja_sample_img01.jpg);}
.munja-sample .sample-square-box .square-item .img-box.img02 {background-image: url(../images/sub/munja_sample_img02.jpg);}
.munja-sample .sample-square-box .square-item .img-box.img03 {background-image: url(../images/sub/munja_sample_img03.jpg);}
.munja-sample .sample-square-box .square-item .img-box.img04 {background-image: url(../images/sub/munja_sample_img04.jpg);}
.munja-sample .sample-square-box .square-item .txt-box {text-align: center; color: var(--black);	padding: 2rem 0 5rem 0; }
/* 문자랑 bg */
.munjarang-bg {position: relative; width: 100%; height: 0; padding-top: 35%; margin: 10rem 0; background: center / cover no-repeat url(../images/sub/munjarang_bg.jpg) fixed;}
/* 문자랑 responsive */
@media all and (max-width: 1280px) {
	.service-munja,
  .munja-sample {padding: var(--common-padding);}
  .munjarang-bg {padding-top: 40%; margin: 5rem 0;}
}
@media all and (max-width: 1024px) {
  .munja-sample .sample-square-box {grid-template-columns: 1fr 1fr;}
  .service-munja .munja-square-box {grid-template-columns: 1fr 1fr;}
}
@media all and (max-width: 800px) {	
  
}
@media all and (max-width: 640px) {	
  .service-munja .munja-square-box {grid-template-columns: 1fr;}
  .munja-sample .sample-square-box {grid-template-columns: 1fr;}
  .munja-sample .sample-square-box .square-item .img-box {border-radius: 2rem 2rem; height: 60rem;}
  .munjarang-bg {padding-top: 50%; margin: 1rem 0;}
}
@media all and (max-width: 480px) {	
  .munjarang-bg {padding-top: 60%; margin: 0 0;}
}






/********************* 문자랑 추가작업 *********************/
/*** 공통 ***/
[class*=wider] {max-width: 100%;}
[class*=wider].bg {background: var(--munjabg);}
[class*=munjarang-]:not(.munjarang-bgimg) {max-width: var(--common-width); margin: 0 auto; padding: 5rem 0; width: 100%; box-sizing: border-box;}
/* square-item */
[class*=munjarang-] [class*=square-item] .txt-box {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1rem; margin-bottom: auto; padding: 0 0vw;}
[class*=munjarang-] [class*=square-item] .txt-box .num {font-size: 2.4rem; color: var(--main-color); font-weight: 700;}
[class*=munjarang-] [class*=square-item] .txt-box .tt {font-size: 2.2rem; color: var(--main-color); padding-bottom: 0rem;}
[class*=munjarang-] [class*=square-item] .txt-box .st {font-size: 1.8rem; padding-bottom: 0rem; word-break: auto-phrase; margin: 0 2rem;}
[class*=munjarang-] [class*=square-item] .txt-box .desc {font-size: 1.6rem;}
/* square-box */
[class*=munjarang-] [class*=-square-box] {display: grid; grid-template-columns: repeat(auto-fit, minmax(17%,auto)); gap: 2rem; padding: 5rem 0;}
[class*=munjarang-] [class*=-square-box] [class*=square-item] {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box; gap: 2rem; padding: 0rem 0rem; /* border-radius: 3rem; box-shadow: 2px 0px 5px 0px rgba(100, 100, 100, 0.1); */}
[class*=munjarang-] [class*=-square-box] [class*=square-item] .img-box {/* border-radius: 3rem 3rem 3rem 3rem;  box-shadow: 2px 0px 5px 0px rgba(100, 100, 100, 0.2); */ box-sizing: border-box; padding: 0rem; font-size: 0; max-width: 18vw; /* max-height: 57vh; */  min-height: 40vh; height: 32vmax; width: 45vmin; background-position: center center; background-repeat: no-repeat; background-size: contain;}
@media all and (max-width: 1280px) {
}
@media all and (max-width: 1024px) {  
}
@media all and (max-width: 800px) { 
  [class*=munjarang-] [class*=square-item] .txt-box .tt {font-size: 1.8rem;}
  [class*=munjarang-] [class*=square-item] .txt-box .st {font-size: 1.6rem;}  
  [class*=munjarang-] [class*=square-item] .txt-box .desc {font-size: 1.4rem;}   
}
@media all and (max-width: 640px) {	
}
@media all and (max-width: 480px) {
}
/* 문자랑 기능 */
.service-munjarang {max-width: var(--common-width); margin: 0 auto; padding-bottom: 5rem; width: 100%; box-sizing: border-box;}
.service-munjarang .munjarang-square-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--white); border-radius: 2rem; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); box-sizing: border-box; padding: 5rem 2rem; display: none;}
.service-munjarang .munjarang-square-box .square-item .img-box {max-width: 100%; font-size: 0; width: 67px; height: 60px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.service-munjarang .munjarang-square-box .square-item .img-box.img01 {background-image: url(../images/sub/ico_munja_01.png);}
.service-munjarang .munjarang-square-box .square-item .img-box.img02 {background-image: url(../images/sub/ico_munja_02.png);}
.service-munjarang .munjarang-square-box .square-item .img-box.img03 {background-image: url(../images/sub/ico_munja_03.png);}
.service-munjarang .munjarang-square-box .square-item .img-box.img04 {background-image: url(../images/sub/ico_munja_04.png);}
.service-munjarang .munjarang-square-box .square-item .txt-box { text-align: center; 	letter-spacing: -0.05em; color: var(--black);	margin-top: 2rem;}



/* 문자랑서비스-타이틀-동글메뉴 */
[class*=wider].bg.donggle {background: url(../images/munja/munja_donggle_bg.png)no-repeat center center / cover; padding: 0rem 0; margin-bottom: 5rem;}
.munjarang-donggle {width: 100%; height: inherit; display: grid; grid-template-columns: 80rem; grid-auto-columns: 5fr 1fr; justify-content: center; align-items: center; margin: 0 auto; position: relative; /* overflow: hidden; */}
.munjarang-donggle .left {display: flex; flex-direction: column; gap: 3rem; /* grid-column: 1; margin-right: auto; */ /* padding: 4rem 60rem 4rem 0; */}
.munjarang-donggle .right {/* background: url(../images/munja/munjarang_people.png) no-repeat right bottom / contain; width: 100%; height: 100%; */ grid-column: 2;}
.munjarang-donggle .left .tt {font-size: 5rem; font-weight:700;}
.munjarang-donggle .left .st {color: var(--main-color);}
.munjarang-donggle .right img {position: absolute; bottom: 0; right: 0; z-index: -1; min-width: 65rem;  width: 30vw; }
.munjarang-donggle .donggle-circle-box {display: grid; /* flex-wrap: wrap; flex-direction: row; */ align-items: center; justify-content: center; justify-items: center; gap: 1rem; padding: 0rem 0 1rem; grid-template-columns: repeat(auto-fill, minmax(20%, auto)); box-sizing: border-box;}
.munjarang-donggle .donggle-circle-box .circle-item {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 15rem; height: 15rem; border-radius: 15rem; border: 2px solid var(--main-color); background: var(--white);}
.munjarang-donggle .donggle-circle-box .circle-item .tt {font-size: 1.8rem; font-weight: 500; padding-bottom: unset; margin: 0 3vw; line-height: 1.2;}
.munjarang-donggle .donggle-circle-box .circle-item .img {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 5rem; height: 5rem;}
.munjarang-donggle .donggle-circle-box .circle-item .img.img01 {background-image: url(../images/munja/munja_donggle_img01.png);}
.munjarang-donggle .donggle-circle-box .circle-item .img.img02 {background-image: url(../images/munja/munja_donggle_img02.png);}
.munjarang-donggle .donggle-circle-box .circle-item .img.img03 {background-image: url(../images/munja/munja_donggle_img03.png);}
.munjarang-donggle .donggle-circle-box .circle-item .img.img04 {background-image: url(../images/munja/munja_donggle_img04.png);}
.munjarang-donggle .donggle-circle-box .circle-item .img.img05 {background-image: url(../images/munja/munja_donggle_img05.png);}
.munjarang-donggle .donggle-circle-box .circle-item .img.img06 {background-image: url(../images/munja/munja_donggle_img06.png);}
/* hover */
.munjarang-donggle .donggle-circle-box .circle-item:hover {background: var(--main-color); /* transition: .2s; transition-property: all; */}
.munjarang-donggle .donggle-circle-box .circle-item:hover .tt {font-size: 1.8rem; color: var(--white);}
.munjarang-donggle .donggle-circle-box .circle-item:hover .img.img01 {background-image: url(../images/munja/munja_donggle_img01_on.png);}
.munjarang-donggle .donggle-circle-box .circle-item:hover .img.img02 {background-image: url(../images/munja/munja_donggle_img02_on.png);}
.munjarang-donggle .donggle-circle-box .circle-item:hover .img.img03 {background-image: url(../images/munja/munja_donggle_img03_on.png);}
.munjarang-donggle .donggle-circle-box .circle-item:hover .img.img04 {background-image: url(../images/munja/munja_donggle_img04_on.png);}
.munjarang-donggle .donggle-circle-box .circle-item:hover .img.img05 {background-image: url(../images/munja/munja_donggle_img05_on.png);}
.munjarang-donggle .donggle-circle-box .circle-item:hover .img.img06 {background-image: url(../images/munja/munja_donggle_img06_on.png);}

/* 아이콘타이틀 공통 */
[class*=munjarang-] .stitle .tit {display: none;}
[class*=munjarang-] .stitle .tt {font-size: 4rem; display: flex; align-items: center; justify-content: center; letter-spacing: -0.03em; gap: 1rem; padding-bottom: 2rem;}
[class*=munjarang-] .stitle .tt .img {display: flex; align-items: center; justify-content: center; background: var(--main-color); width: 7rem; height: 7rem; border-radius: 50rem;}
[class*=munjarang-] .stitle .tt .img::before {content: ""; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.munjarang-auto .stitle .tt .img::before {background-image: url(../images/munja/munja_donggle_img01_on.png)}
.munjarang-sample .stitle .tt .img::before {background-image: url(../images/munja/munja_donggle_img02_on.png)}
.munjarang-bulk .stitle .tt .img::before {background-image: url(../images/munja/munja_donggle_img03_on.png)}
.munjarang-data .stitle .tt .img::before {background-image: url(../images/munja/munja_donggle_img04_on.png)}
.munjarang-passive .stitle .tt .img::before {background-image: url(../images/munja/munja_donggle_img05_on.png)}
.munjarang-exception .stitle .tt .img::before {background-image: url(../images/munja/munja_donggle_img06_on.png)}


/**** 자동문자 전송 ****/
[class*=wider].bg.auto {background: url(../images/munja/munja_auto_bg.png)no-repeat center center / cover; padding: 5rem 0;}
.munjarang-auto .auto-list-box {display: grid; grid-template-columns: 1fr .2fr 1fr;}
.munjarang-auto .auto-list-box .list-item {display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; gap: 2rem; box-sizing: border-box;}
.munjarang-auto .auto-list-box .list-item .txt-box {display: grid; gap: 0 1rem; width: 80%; grid-template-columns: 10rem; grid-auto-columns: 1fr 3fr;}
.munjarang-auto .auto-list-box .list-item .txt-box img {grid-column: 1 / 2; grid-row: 1 / 3; justify-self: center;}
.munjarang-auto .auto-list-box .list-item .txt-box .tt,
.munjarang-auto .auto-list-box .list-item .txt-box .st  {grid-column: 2; color: var(--white); line-height: 1.2; padding-bottom: unset;text-align: left; word-break: break-all; }
.munjarang-auto .auto-list-box .list-item .txt-box .tt {font-size: 2.4rem; align-self: end;}
.munjarang-auto .auto-list-box .list-item .txt-box .st {font-size: 1.8rem; align-self: start;}
.munjarang-auto .auto-list-box .list-item.img03 .txt-box .tt,
.munjarang-auto .auto-list-box .list-item.img03 .txt-box .st {color: inherit;}
.munjarang-auto .auto-list-box .list-item .img-box {display: flex; flex-direction: column; gap: 2rem; align-items: center; justify-content: center; width: 40%; margin-bottom: auto;}
.munjarang-auto .auto-list-box .list-item .desc {font-size: 1.6rem;}
.munjarang-auto .auto-list-box .list-item:not(.img03) .desc {color: var(--white);}
.munjarang-auto .auto-list-box .list-item.img02 .arrow {background: url(../images/munja/munja_auto_img_arrow.png)no-repeat center center / cover; width: 10rem; height: 10rem;}


/**** 상황별문자 전송 ****/
[class*=wider].bg.sample {background: url(../images/munja/munja_sample_bg.png)no-repeat center center / cover; padding: 5rem 0;}
.munjarang-sample .sample-square-box .square-item .txt-box .ico {width: 5rem; height: 5rem; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.munjarang-sample .sample-square-box .square-item .txt-box .ico.ico01 {background-image: url(../images/munja/munja_sample_ico01.png);}
.munjarang-sample .sample-square-box .square-item .txt-box .ico.ico02 {background-image: url(../images/munja/munja_sample_ico02.png);}
.munjarang-sample .sample-square-box .square-item .txt-box .ico.ico03 {background-image: url(../images/munja/munja_sample_ico03.png);}
.munjarang-sample .sample-square-box .square-item .txt-box .ico.ico04 {background-image: url(../images/munja/munja_sample_ico04.png);}

.munjarang-sample .sample-square-box .square-item:nth-child(odd) {/* background: var(--blue); */}
.munjarang-sample .sample-square-box .square-item .img-box.img01 {background-image: url(../images/munja/munja_sample_img01.png);}
.munjarang-sample .sample-square-box .square-item .img-box.img02 {background-image: url(../images/munja/munja_sample_img02.png);}
.munjarang-sample .sample-square-box .square-item .img-box.img03 {background-image: url(../images/munja/munja_sample_img03.png);}
.munjarang-sample .sample-square-box .square-item .img-box.img04 {background-image: url(../images/munja/munja_sample_img04.png);}


/**** 대량문자 전송 ****/
/* .munjarang-bulk {max-width: var(--common-width); margin: 0 auto;} */
/* .munjarang-bulk .bulk-square-box .square-item .img-box {height: 45rem;} */
.munjarang-bulk .bulk-square-box .square-item .img-box.img01 {background-image: url(../images/munja/munja_bulk_img01.png);}
.munjarang-bulk .bulk-square-box .square-item .img-box.img02 {background-image: url(../images/munja/munja_bulk_img02.png);}
.munjarang-bulk .bulk-square-box .square-item .img-box.img03 {background-image: url(../images/munja/munja_bulk_img03.png);}
.munjarang-bulk .bulk-square-box .square-item .img-box.img04 {background-image: url(../images/munja/munja_bulk_img04.png);}
.munjarang-bulk .bulk-square-box .square-item .img-box.img05 {background-image: url(../images/munja/munja_bulk_img05.png);}


/**** 문자발송 통계 ****/
/* .munjarang-data {max-width: var(--common-width); margin: 0 auto; } */
[class*=wider].bg.data {background: url(../images/munja/munja_data_bg.png)no-repeat center center / cover; padding: 5rem 0;}
.munjarang-data .data-square-box .square-item .img-box.img01 {background-image: url(../images/munja/munja_data_img01.png);}
.munjarang-data .data-square-box .square-item .img-box.img02 {background-image: url(../images/munja/munja_data_img02.png);}
.munjarang-data .data-square-box .square-item .img-box.img03 {background-image: url(../images/munja/munja_data_img03.png);}


/**** 수동발송 기능 ****/
/* .munjarang-passive {max-width: var(--common-width); margin: 0 auto;} */
.munjarang-passive .passive-square-box .square-item .img-box.img01 {background-image: url(../images/munja/munja_passive_img01.png);}
.munjarang-passive .passive-square-box .square-item .img-box.img02 {background-image: url(../images/munja/munja_passive_img02.png);}
.munjarang-passive .passive-square-box .square-item .img-box.img03 {background-image: url(../images/munja/munja_passive_img03.png);}


/**** 문자발송 제외번호 등록 ****/
/* .munjarang-exception {max-width: var(--common-width); margin: 0 auto;} */
.munjarang-exception .exception-square-box .square-item .img-box.img01 {background-image: url(../images/munja/munja_exception_img01.png);}
.munjarang-exception .exception-square-box .square-item .img-box.img02 {background-image: url(../images/munja/munja_exception_img02.png);}
.munjarang-exception .exception-square-box .square-item .img-box.img03 {background-image: url(../images/munja/munja_exception_img03.png);}


/*** 문자랑 bg ***/
.munjarang-bgimg {/* position: relative; width: 100%; height: 0; padding-top: 35%; margin: 10rem 0;  */background: center / cover no-repeat url(../images/sub/munjarang_bg.jpg) fixed;}

/* 문자랑 추가작업 responsive */
@media all and (max-width: 1280px) {	
  .service-munjarang,
  [class*=munjarang-]:not(.munjarang-bgimg) {padding: var(--common-padding);} 
  .munjarang-donggle .right img {min-width: 58rem;}
}
@media all and (max-width: 1024px) {  
  .munjarang-donggle {display: flex; flex-direction: column;} 
  .munjarang-donggle .right {display: none;} 
}
@media all and (max-width: 800px) {
  .munjarang-donggle .donggle-circle-box .circle-item {width: 13rem; height: 13rem; gap: 1rem;}
  .munjarang-donggle .donggle-circle-box .circle-item .img {width: 3rem; height: 3rem;}
  .munjarang-donggle .donggle-circle-box .circle-item .tt {font-size: 1.6rem; margin: 0 2vw;}
  [class*=munjarang-] [class*=-square-box] {grid-template-columns: repeat(auto-fit, minmax(45%,auto));}
  [class*=munjarang-] [class*=square-item] .txt-box .st {margin: 0;}
}
@media all and (max-width: 640px) {  
  .munjarang-donggle .donggle-circle-box {grid-template-columns:repeat(auto-fill, minmax(30%, auto)); gap: .5rem; justify-items: unset;} 
  .munjarang-donggle .donggle-circle-box a {background: var(--main-color); color: var(--white); height: 5rem; border-radius: 5rem; border: 1px solid var(--main-color);}
  .munjarang-donggle .donggle-circle-box a:hover {background: var(--white); color: var(--main-color); transition: .2s; transition-property: all;}
  .munjarang-donggle .donggle-circle-box .circle-item:hover {background: unset;}
  .munjarang-donggle .donggle-circle-box .circle-item .tt {font-size: 1.6rem; margin: 0 3vw; color: inherit;}
  .munjarang-donggle .donggle-circle-box :hover .circle-item .tt {font-size: 1.6rem; margin: 0 3vw; color: var(--main-color);}
  .munjarang-donggle .donggle-circle-box .circle-item { gap: 0; width: unset; height: inherit; border-radius:unset; border:unset; background:unset;}  
  .munjarang-donggle .donggle-circle-box .circle-item .img[class*=img0] {display: none;}  
  
  /* 자동문자전송 */
  [class*=wider].bg.auto {background: url(../images/munja/munja_auto_bg_mo.png) no-repeat center center / cover;}
  .munjarang-auto .auto-list-box {grid-template-columns: 1fr;}
  .munjarang-auto .auto-list-box .list-item.img02 .arrow {transform: rotateZ(90deg);}
}
@media all and (max-width: 480px) {
  [class*=munjarang-] [class*=-square-box] {grid-template-columns: repeat(auto-fit, minmax(80%,auto));}	  
}















/************************* 자주묻는 질문 *************************/
/* .faq-page .faq-list-con2 .faq-item {box-sizing: border-box;}
.faq-page .faq-list-con2 .faq-item dt {display: flex; padding: 2.2rem 1.8rem;}
.faq-page .faq-list-con2 .faq-item dd {padding: 2.2rem 1.8rem;}
.faq-page .faq-list-con2 .faq-item .faq-subject {display: flex; align-items: center; width: 100%;}
.faq-page .faq-list-con2.faq-category-list-con dl dt .faq-title {width: 100%; font-size: 1.8rem; font-weight: 600; line-height: 1.8em; letter-spacing: -0.015em; color: #000;}
.faq-page .faq-list-con2 .faq-item dt .question-icon, .faq-page .faq-list-con2 .faq-item dd .answer-icon {position: static; padding-right: 1.2rem; font-size: 2.2rem;}
.faq-page .faq-list-con2 .faq-item dt .question-icon {color: var(--main-color);}
.faq-page .faq-list-con2 .faq-item dd .answer-icon {color: #222;}
.faq-page .faq-list-con2 .faq-item dt .arrow {position: static; width: auto; height: auto;}
.faq-page .faq-list-con2 .faq-item dt .arrow i {font-size: 2.2rem; color: #333;}
.faq-page .faq-list-con2 .faq-item dd .answer-inner {display: flex;}
.faq-page .faq-list-con2 .faq-item dd .answer-inner .editor > p {font-size: 1.7rem; font-weight: 500; line-height: 1.7em; letter-spacing: -0.015em; color: #333;}
.faq-page .faq-list-con2 .faq-item.open dt {background-color: rgba(36, 170, 225, 0.1);}
.faq-page .faq-list-con2 .faq-item.open {border: 2px solid var(--main-color);}
.faq-page .faq-list-con2 .faq-item.open dt .question-icon {color: var(--main-color);} */

/******************** 공지사항 *********************/
.notice {max-width: var(--common-width); margin: 0 auto;}

/***************** 자주묻는질문 *****************/
/* 자주묻는질문박스 */
.qna {max-width: var(--common-width); margin: 0 auto;}
.qna .question {text-align: left; padding: 2rem; border-bottom: 1px solid var(--gray);	/* position: relative; */ cursor: pointer; display: grid; grid-template-columns: 2rem 1fr; align-items: center; justify-content: center; gap: 1rem;}
.qna .question:first-child {border-top: 3px solid var(--main-color);}
.qna .question.answer-open {/* background: url('../images/common/ico_angle_up.png') no-repeat 1130px 22px;	transition: var(--transition); */}
.question .qna-q {/* display: inline-block; position: absolute; left: 38px; */ font-size: 2.5rem; font-weight: 600; /* line-height: 1em;  */color: var(--graycolor); transition: var(--transition);}
.question .qna-q.answer-open {color: var(--main-color);	transition: var(--transition);}
.question-tit {background: url(../images/common/ico_angle_down.png) no-repeat right center;}
.question-tit.answer-open {line-height: 1.5; /* font-family: var(--xeicon); content:"\e946"; color: var(--darkgray); font-size: 3rem; */background: url(../images/common/ico_angle_up.png) no-repeat right center;}
.question-tit .q-list {font-size: 2rem;	color: var(--darkgray);}
.answer {display: none; grid-column: 1 / span 2;/* 몇칸을차지할지지정 */  grid-row: 2 / 3;}
.answer-txt {padding: 2rem; background: var(--white2);}
.answer-txt > p {font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.005em;}
.qna .no-data {text-align: center;	height: 180px;	line-height: 180px;	font-size: 16px;	color: var(--gray);	background: var(--white);}
/* 검색박스 */
.search-box {/* position: relative; */ display: flex; align-items: center; justify-content: center; max-width: var(--min-width); margin: 0rem auto 5rem;}
.search-box .search-input {flex: 1; background: var(--input-color); border-radius: 5rem; border:2px solid var(--gray); height: 6rem; padding: 1.8rem 0rem 2rem 3rem; font-size: 2rem;}
.search-box .search-btn {margin-left: -6rem; width: 6rem; padding-right: 2rem; font-size: 0;/*  width: 4rem; height: 4rem; */ /* position: absolute; top: 1rem; right: 2rem; */}
.search-box .search-btn:after {display: block; font-size: 3.58rem; font-family: var(--xeicon); content: "\e97a";}
/* 페이징 */
.pagination-list-wrap {display: flex; justify-content: center; align-items: center; height: 5rem; padding:2rem 0;}
.pagination-list-wrap .prev-btn-wrap .prev-btn-list,
.pagination-list-wrap .next-btn-wrap .next-btn-list {display: flex; align-items: center; justify-content: center; gap: 2rem;}
.pagination-list-wrap .paging-wrap {padding: 0 3em;}
.pagination-list-wrap .pagination-list {display: flex; align-items: center; justify-content: center;}
.pagination-list-wrap .pagination-list .paging-num {width: 4rem;}
.pagination-list-wrap .pagination-list .paging-num .pagination {font-size: 2rem;}
.pagination-list-wrap .pagination-list .paging-num .pagination.active {color: var(--main-color); font-weight: 700;}
@media all and (max-width: 1280px) {
	.qna {padding: var(--common-padding);}
  .notice {padding: var(--common-padding)}
}
@media all and (max-width: 1024px) {
}
@media all and (max-width: 800px) {	   
  .qna .question {padding:2rem 1rem; gap: 0;} 
  .question .qna-q {font-size: 1.6rem;}
  .question-tit .q-list {font-size: 1.6rem;}
  .question-tit,
  .question-tit.answer-open {background-size: 2rem 2rem;}
  .answer-txt {margin-top: 1rem;}
  /* .search-box .search-btn:after {font-size: 2.58rem;} */
  /* .qna .question {padding: 2rem 0rem 2rem 2.5rem;}
  .question .qna-q {left: 0px; font-size: 2.3rem;}
  .question-tit .q-list {font-size: 1.65rem;}
  .answer-txt {padding: 3rem 0 1rem; font-size: 1.65rem;} */
  .search-box .search-input {font-size: 1.6rem;}
}
@media all and (max-width: 640px) {	
}
@media all and (max-width: 480px) {  
}






/******************** 빠른제작문의 *********************/
.inquiry {max-width: var(--common-width); margin: 0 auto;}
/* 상담폼박스 */
.contact-box {margin:2rem auto; text-align: center; max-width: var(--common-width);}
.contact-box-style {padding: 0rem;}
.contact-box-style .required-txt {display: flex; align-items: flex-end; justify-content: flex-end; font-size: 1.85rem; font-weight: 400; padding: 1rem 0;}
.contact-box-style .check i {color: var(--main-color); margin: 0 0.5rem;}
.contact-box-style .box-cols {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-gap: 0 2rem;}
.contact-box-style .contents {margin-bottom: 2rem; border: 1px solid var(--gray); background: var(--white2); height: 6rem; line-height: 1.5em; font-size: 1.85rem; text-align: left; display: flex; align-items: center; width: 100%; padding: 0; border-radius: 1rem; box-sizing: border-box; overflow: hidden;}
.contact-box-style .contents dt {display: flex; flex: 0 0 15rem; padding: 0 2rem; box-sizing: border-box; font-weight: 600;}
.contact-box-style .contents dt.blind {display: none;}
.contact-box-style .contents dd {/* width: calc(100% - 15rem); */ flex:1;}
.contact-box-style .contents input,
.contact-box-style .contents textarea,
.contact-box-style .write-textarea,
.contact-box-style .write-input {border:none; width: calc(100% - 3rem); font-weight: 300; font-size: 1.85rem; line-height: 2em; outline: none; background: none;}
.contact-box-style .write-textarea {height: 20rem;}
.contact-box-style .contents.textarea-box {height: 22rem;}
/* 개인정보처리방침 */
.contact-box-style .contents:nth-of-type(3){background-color: transparent; border:none;}
/* 약관확인하기 */
.contact-box-style .contents.agree-con {margin-top: 2rem;}
.contact-box-style .contents.agree-con dd {display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2rem; padding: 0; box-sizing: border-box;}
.contact-box-style .contents .agree-txt {font-size: 1.85rem; font-weight: 400; letter-spacing: -0.01em; color: var(--black);}
.contact-box-style .contents .agree-txt a {font-weight: 700; text-decoration: underline; transition: var(--transition);}
.contact-box-style .contents .agree-txt a:hover {color:var(--main-color);}
.contact-box-style .contents .agree-txt input{display:none;}
.contact-box-style .contents .agree-txt label{position:relative; padding-left:26px;}
.contact-box-style .contents .agree-txt label i{position:absolute; top: 0; left:0px; font-size: 2.3rem; line-height: 1.0em; color: var(--lightgray);}
.contact-box-style .contents .agree-txt label i::before {content: "\e92b"; transition: var(--transition);}
.contact-box-style .contents .agree-txt input:checked + label i::before{content: "\e92b"; color: var(--main-color);}
@media all and (max-width: 1280px) {
	.inquiry {padding: var(--common-padding);}
	.payment {padding: var(--common-padding);}
}
@media all and (max-width: 1024px) {
}
@media all and (max-width: 800px) {		
}
@media all and (max-width: 640px) {	
  .contact-box-style .required-txt {font-size: 1.4rem;}
  .contact-box-style .contents {height: 5rem; border-radius: 0.3rem; font-size: 1.4rem; margin-bottom: 0.5rem;}
  .contact-box-style .box-cols {grid-gap: 0 1rem; grid-template-columns: 1fr;}
  .contact-box-style .contents dt {flex:0 0 10rem; padding: 0 1.2rem; font-weight: 500;}
  .contact-box-style .contents dd {}
  .contact-box-style .contents input,
  .contact-box-style .contents textarea, .contact-box-style .write-textarea,
  .contact-box-style .write-input {font-size: 1.6rem;}
  .contact-box-style .contents .agree-txt {font-size: 1.4rem;}
  .contact-box-style .contents.agree-con {margin-top: 1rem;}
}
@media all and (max-width: 480px) {	
}






/*********** 상담심플폼 고정 ***********/
.consult-wrap {position: fixed; display: none; bottom: calc(var(--footer-height) / 2); left:0; z-index: 1111; margin-top: 5rem; font-size: 1.5rem; font-weight: 400; line-height: 1.7em; letter-spacing: -0.025em; color:var(--white2); background: var(--main-color);}