@charset "utf-8";
/*****************
	템플릿 type2 그린 main.css 
	2023-10-31 
******************/

/* main-wrap */
.main-area{position:relative; max-width:1200px; margin:0 auto; box-sizing:border-box; }
.main-section1{ position:relative; width:100%; height:720px; overflow:hidden; box-sizing:border-box;}
.main-section1:before {content:"";position:absolute;top:0; left:0; width:100%; height:100%; background:url(../img/section1_topbg.png) no-repeat center/cover; z-index:1;
	-webkit-animation: kenburns-top 2s ease-out both;
	        animation: kenburns-top 2s ease-out both;}				

/** ----------------------------------------
 * animation kenburns-top
 * --------------------------------------- */
@-webkit-keyframes kenburns-top {
  0% {
	-webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
	opacity:0;
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
    opacity:1;
  }
}
@keyframes kenburns-top {
  0% {
	-webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
	opacity:0;
  }
  100% {
	  -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
	opacity:1;
    
  }
}
.main-overlay {background: #000; width: 100%; height: inherit; position: absolute; top: 0; opacity: 0.65; z-index:2}

/* text underline */
.main-conts .u-line{ position:relative; display:inline-block;}
.main-conts .u-line:before{content: ''; width: 100%; height: 28px; position: absolute; bottom: 5px; background: #0c855b; z-index: -1;}

/*메인타이틀*/
.main-conts{position:relative;text-align:center;z-index:99;}
.main-conts .main-txt-area {width: 55%; text-align:right;  margin-top: 20%; color: #fff}
.main-conts .mtitle-text{padding:0;font-size:40px; font-weight:800; }
.main-conts .mtitle-text .fc-point-main{color: #f8ff88;}
.main-conts .greentitle-topbtn {margin: 50px 0 }
.main-conts .greentitle-topbtn .hover-btn {border: 4px solid #fff; padding: 15px 30px; border-radius: 15px; display:inline-flex;}
.main-conts .greentitle-topbtn .hover-btn span {font-size: 26px; color: #fff; font-weight:600; margin-right:80px;}
.main-conts .greentitle-topbtn .hover-btn:hover {background: #00ab6f; border: 4px solid #00ab6f; transition:0.5s;}
.main-conts .mtitle-img img{max-width:100%;}
.main-conts .sub-text{padding:30px 5px;font-size:26px; font-weight:300; color: #555}
.ico24{width:24px;height:24px;}

/*2번 섹션 (놓친 환급액) & 서브섹션(사업자 평균)*/
.main-section2{position:relative;  background:#f7f7f7; overflow:hidden; padding-bottom:50px;}
.main-section2 .mtitle-text{padding-top:100px !important; font-size:36px;}
.sub-text-wrap{margin:60px 0; text-align:center;  padding: 0 10px;}

.sub-text-wrap .sub-text-item {position: relative;height: 185px; max-width: 1090px; margin: 0 auto; display: inline-flex; align-items: center;}
.sub-text-wrap .sub-text-item p{display:block; position: relative; width: fit-content;background: #fff;padding: 25px 40px;border-radius: 100px;box-shadow: 0 0 20px 2px rgba(0,0,0,0.15);font-weight: 700;color: #444;font-size: 22px;}
.sub-text-wrap .sub-text-item p:after {content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 30px solid transparent;  border-top-color: #fff; border-bottom: 0; border-left: 0; margin-left: -10px; margin-bottom: -25px; }
.sub-text-wrap .sub-text-item p:nth-child(1) {left:40px}
.sub-text-wrap .sub-text-item p:nth-child(2) {top: 50px;}
.sub-text-wrap .sub-text-item p:nth-child(3) {left: -40px;}
.sub-text-wrap .sub-text-item p em {color: #ffb688;}

.sub-section { position:relative; height: 220px; background-color:#00ab6f; padding: 55px; box-sizing:border-box; overflow:hidden;}
.sub-section p {position: relative; z-index:99;}
.sub-section .line1 {color: #fff; font-size: 48px; font-weight:800; cursor:pointer;} /* 2023.10.31 수정*/
.sub-section .line1:hover{color:#f0ffd3;} /* 2023.10.31 추가 */
.sub-section .line1 i{ vertical-align:middle; margin-top:-3px;} /* 2023.10.31 추가 */

.sub-section .line2 {margin-top: 15px; color: #feffa0; font-size: 24px; font-weight:700}
.sub-section .sub-section-bg { display: block; width: 300px; height: 220px; background: url(../img/main_bg_item_coin.png); position: absolute; top: -55px; right: 9%; opacity: 0.4; transform:rotate(45deg)}

/*섹션 3,4,5 공통 */
.grid-cont {display: flex; justify-items: stretch; justify-content: center; align-items: center; height: inherit; flex-direction: row;}
.grid-cont.reverse {flex-direction: row-reverse}
.grid-cont.at {align-items: flex-start}
.text-cont , .mtitle-img{width: 50%; box-sizing: border-box; position:relative;}
.text-cont {padding:0 30px;}
.text-cont.t01 {text-align: right}
.text-cont.t02 {text-align: left}
.main-section3,.main-section4,.main-section5{position:relative; overflow:hidden; height: 600px;}

/*3번 섹션 (무료환급조회)*/
.main-section3 .mtitle-img .img01{position: relative; bottom: -90px;}
.speech-bubble01 {font-size: 23px; font-weight:600; color: #fff; position: absolute; background: #00ab6f; border-radius: 50px; top: 5%; left: 3%; z-index: 20; padding: 5px 50px; box-shadow: 0 3px 10px 2px rgb(71 88 65 / 34%);}
.speech-bubble01:after {content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 15px solid transparent; border-top-color: #00ab6f; border-bottom: 0; border-right: 0; margin-left: 30px; margin-bottom: -13px;}
.main-section3 .mtitle-img .img02{position: absolute; position: absolute; top: 15%; left: 20%; background: #fff; border-radius: 400px; box-shadow: 0 0 20px 5px rgba(0,0,0,0.15);}

/*4번 섹션 (카톡 조회)*/
.main-section4{position:relative; padding-bottom:0; background:#eff8f3; overflow:hidden; }
.main-section4 .mtitle-img img{margin-top: 50px;}
.speech-bubble02 {font-size: 20px; font-weight:400; color: #333; position: absolute; background: #fff; border-radius: 50px; top: 110px; right: 60px; z-index: 20; padding: 5px 30px; box-shadow: 0 3px 10px 2px rgb(100 100 100 / 34%);}
.speech-bubble02:after {content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 15px solid transparent; border-top-color: #fff; border-bottom: 0; border-left: 0; margin-left: -30px; margin-bottom: -13px;}

/****** 자주묻는질문 *******/
.main-section6{position:relative; padding:60px 0; background:#f3f3f3; overflow:hidden; height: 630px;}
.main-section6 .mtitle-text {padding:10px 0 0 0;font-size:38px; font-weight:700; width: 30%;}
.main-section6 .mtitle-img{display: inline-block; position: relative; top: -5px; width: fit-content;}
.main-section6 .bg-text {position: absolute; font-size: 470px; font-weight: 900; color: rgba(0,0,0,0.03); left: 70px; bottom: -5px;}

/* FAQ 아코디언 */
.main-faq-list{max-width:800px; margin:0 auto; width: 70%; padding: 0 10px;}
.main-faq-list .faq-list-item{position:relative; margin:16px 0; padding:0; background:#fff; text-align:left; border-radius:20px; box-sizing:border-box; box-shadow: 0 0 10px 1px rgb(0 0 0 / 10%);}
.main-faq-list .faq-title{cursor:pointer;}
.faq-title .title-item{position:relative; padding:18px 30px 22px; }
.faq-title .title-item .question{display:inline-block; margin-left:-25px; margin-right:8px; color:#323090; font-size:22px; font-weight:600;}
.faq-title .title-item .mtitle{display:inline-block; padding-left:26px; font-size:20px; font-weight:600;}
.faq-list-item.open .mtitle{font-weight:800;}
.faq-title .title-item .right-btn{position:absolute; right:20px; top:50%; margin-top:-16px;}
.faq-title .title-item .right-btn .arrowicon-down:before{content:"\e940"; font-family:xeicon !important; font-size:26px;}
.faq-title .title-item .right-btn .arrowicon-down{display:inline-block; cursor:pointer; width:24px; height:24px;}
.faq-title .title-item .right-btn .arrowicon-up:before{content:"\e946"; font-family:xeicon !important; font-size:26px;}
.faq-title .title-item .right-btn .arrowicon-up{display:inline-block; cursor:pointer; width:24px; height:24px;}
.faq-detail-view{padding:0 55px 30px 55px; font-weight:300; font-size:17px; line-height:1.5;}

/* 메인 푸터 환급액 간편조회 버튼 */
.main-section7{ width:100%; height:310px; background-color: #15b77e; padding: 50px 0;}
.main-section7 .main-conts .mtitle-topbtn{padding-top:80px; margin:0 auto;}
.main-section7 .main-conts .mtitle-topbtn button{border: 4px solid #fff; padding: 15px 30px; border-radius: 15px; display:inline-flex; position: relative; z-index: 20; top: 20px; background: #15b77e;}
.main-section7 .main-conts .mtitle-topbtn button span {font-size: 26px; color: #fff; font-weight:600; margin-right:80px;}
.main-section7 .main-conts .mtitle-topbtn button p {content: ''; width: 32px; height: 32px; background: url(../img/icon_main_btn.png) no-repeat;}
.main-section7 .main-conts .mtitle-topbtn button:after {content:''; width: 150px; height: 95px; display:block; position: absolute;  background: url(../img/main_visual_img04.png); left: 55%;bottom: 100%;}
.main-section7 .main-conts .mtitle-topbtn button:hover,
.main-section7 .main-conts .mtitle-topbtn button:focus{border: 4px solid #fff; background: #fff; transition: 0.4s; box-shadow: 0 5px 20px 3px rgba(0,51,20,0.4)}
.main-section7 .main-conts .mtitle-topbtn button:hover p,
.main-section7 .main-conts .mtitle-topbtn button:focus p{ background: url(../img/icon_main_btn02.png) no-repeat;}
.main-section7 .main-conts .mtitle-topbtn button:hover  span,
.main-section7 .main-conts .mtitle-topbtn button:focus span { color: #009f62;  transition: 0.4s;}

/*푸터 수정 + 녹색테마*/
#footer-wrap.green-dark {margin-top: 0px; background-color: #2e2e2e}
#footer-wrap.green-dark .footer-middle-con {background-color: #2e2e2e}
#footer-wrap.green-dark .footer-inner {border-bottom: 1px solid rgba(204,204,204,0.2)}
#footer-wrap.green-dark .foot-menu ul li a {color: #ddd;}
#footer-wrap.green-dark .addresstext p {color: #999}

/**************** modal popup 이용약관/개인정보처리방침 *****************/
.agreebox{overflow-x:hidden;overflow-y:scroll; margin:0 auto;padding:20px 10px; width:100%; height:480px; line-height:1.4; box-sizing:border-box;}
.agreebox h2 {margin-top: 5px; text-align:left; font-size: 20px;font-weight:600}
.agreebox .titleBox {position:relative;}
.agreebox .titleBox dl dt {padding-left:25px; position:relative; font-size:24px; font-weight:500;}
.agreebox .titleBox dl dt::before {content:''; width:12px; height:12px; position:absolute; top:7px; left:0; background:#fff; border-radius:50%; border: 5px #2dc4a2 solid; }
.agreebox .titleBox dl dd {padding-left: 25px; font-size: 16px; font-weight: 300;}
.agreebox .titleBox dl dd span {margin:20px 0; display:block; font-weight:500; }
.agreebox dl dt span.left {display:block; float:left; font-size:16px;}
.agreebox dl dt span.left i.red {color:#e42424;}
.agreebox dl dt span.right {display:block; float:right; font-size:16px;}
.agreebox dl dd {width:100%; height:180px; overflow:hidden;}
.agreebox dl dd textarea {width:100%; height:90%; border:1px #c8cece  solid; box-sizing:border-box;}
.agreebox p {margin-top: 20px; font-weight: bold; font-size: 16px;}
.agreebox strong.title {margin-top:20px; display:block; font-size:16px;}
.agreebox ol.one {margin: 10px 0; font-size: 14px; font-weight: 500;}
.agreebox ol.two {margin: 10px 0 0 15px; font-size: 14px; color: #737373;}
.agreebox ol.two .stitle{color:#333; font-weight:bold; margin-bottom:5px;}
.agreebox ol.two li {margin-top: 10px;}
.agreebox ol.three {margin: 0 0 0 15px; font-size: 13px; color: #737373;}
.agreebox ol.three li {margin-top: 3px;}
.agreebox ol.four {margin: 0 0 0 15px; font-size: 13px; color: #737373;}
.agreebox ol.four li {margin-top: 3px;}

/* 테이블스타일3 : 약관 테이블 */
.agreebox .tbtype {width:100%; margin-top: 15px;background:#fff}
.agreebox .tbtype th { padding:6px 0;  background:#e9effc;  border: 1px #ddd solid;  box-sizing: border-box; text-align: center; font-size: 15px;}
.agreebox .tbtype th.border-leftnone {border-left: none;}
.agreebox .tbtype th.border-rightnone {border-right: none;}
.agreebox .tbtype td { padding:10px 3px; border:1px #ddd solid;  box-sizing: border-box; text-align: center; font-size: 13px;}
.agreebox .tbtype td.left {padding-left: 10px; text-align: left !important;}

/* 메인 약관/개인정보보방침 팝업 사이즈 */
.modal-conts.policy-pop{max-width: 800px !important;}
.modal-conts.policy-pop .footer-fixed-btn-wrap .inner-btn{text-align:center;}
.modal-conts.policy-pop  .main-popbtn{width:110px !important; height:48px;}

@media all and ( max-width: 800px ){
	/* 메인 약관/개인정보보방침 팝업 사이즈 */
	.modal-conts.policy-pop{width:100% !important; height:100% !important; max-height:100vh;  border-radius:0 !important; box-shadow:none;}
	.modal-popup-area .policy-pop .popup-conts{position: relative; max-height:100vh; overflow-x: hidden; overflow-y: hidden; padding:20px 0px;}
	.agreebox{ height:100vh; max-height: calc(100vh - 200px); padding:16px 20px 50px 20px;}
}



/*--------------------------------------*/
			 /* 반응형 */
		   /* responsive */
/*--------------------------------------*/

@media all and ( max-width: 1024px ){
	.main-conts .main-txt-area {width: 100%; text-align: center;}
	.main-section3 .mtitle-img .img02 {left: 60PX;}
	}	
@media all and ( max-width: 800px ){
	.text-cont {padding: 0 10px;}
}


@media all and ( max-width: 640px ){
	.main-section1:before  {background-position-x: 60%;}
	.text-cont,.mtitle-img {width: 100%}
	/* main section1 */
	.main-conts .mtitle-text {font-size: 32px; padding: 0 20px;}
	 section .main-conts {padding: 6% 0}
	.sub-section .line1 {font-size: 32px;}
	.main-section1 {height:550px; background-size: 420%;  background-position-x: 50%;}
 	.main-overlay {height:550px;}
	.main-conts .greentitle-topbtn .hover-btn {padding: 10px 20px; zoom: 0.8;}
	.main-conts .greentitle-topbtn .hover-btn span {margin-right: 20px;}	
	
	/*2번 섹션 (놓친 환급액) & 서브섹션(사업자 평균)*/
	.sub-text-wrap .sub-text-item {flex-direction: column; }
	.sub-text-wrap .sub-text-item p{margin-bottom:40px; font-size: 18px; padding: 15px 20px;}
	.sub-text-wrap .sub-text-item p:nth-child(1) {left:0px; }
	.sub-text-wrap .sub-text-item p:nth-child(2) {top: 0px;}
	.sub-text-wrap .sub-text-item p:nth-child(3) {left: 0px;}
	.sub-section {padding: 5px; height: auto;}
	.main-conts .u-line:before  {left: 0;}
	
	.grid-cont,.grid-cont.reverse {flex-direction: column; justify-content: flex-start}
	.text-cont.t01,.text-cont.t02 {text-align: center}
	.text-cont {padding: 20px 10px 0 10px;}
	.main-section3,.main-section4,.main-section5 { padding-top: 40px; padding-bottom: 30px; }
	.main-section4,.main-section5 {height: auto;}
	
	.main-section3 {height: 720px;}
	.main-section3 .mtitle-img .img01 {bottom: -10px;}
	.speech-bubble01 {top: 50px;}
	.main-section3 .mtitle-img .img02 {display: none}
	.main-section3 .mtitle-img img{width: 70%}
	
	.speech-bubble02 {top: 5px;}
	.main-section5 .mtitle-img img{width: 80%}
	
	/* main section6 */
	.main-section6 {padding:40px 20px; height: auto;}
	.main-section6 .mtitle-text{font-size:28px;}
	.main-section6 .bg-text {font-size: 100px; top: 50px; left: 0px; color: rgba(0,0,0,0.2);}
	.main-faq-list{width: 100%;  margin-top: 80px;}
	.faq-title .title-item .right-btn .arrowicon-down:before{content:"\e93f";}
	.faq-title .title-item .right-btn .arrowicon-up:before{content:"\e945";}


	.faq-title .title-item{position:relative; padding: 15px 50px 15px 10px;}
	
	.faq-title .title-item .question{font-size:20px;}
	.faq-title .title-item .mtitle{font-size:16px;  padding-left: 15px;}
	.faq-detail-view{padding:0 35px 20px 35px; font-size:15px;}
	.main-section6 .mtitle-text  {width: 100%; text-align:center}
	.main-section7 .main-conts .mtitle-topbtn button {zoom: 0.9;}
	.main-section7 .main-conts .mtitle-topbtn button span {margin-right: 20px;}
}

/******** 2023.09.06 메인 상단 스크롤 유도 화살표 *********/
.arrowdown-ani {
  position:absolute; bottom:-150px; left:50%;
  -webkit-animation: fade-in-top 1s;
          animation: fade-in-top 1s;
}
@media all and ( max-width: 640px ){
	.arrowdown-ani { bottom:-20px;}	
}
.arrowdown-ani span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -7px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}
.arrowdown-ani span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.arrowdown-ani span:nth-of-type(2) {
  top: 14px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
.arrowdown-ani span:nth-of-type(3) {
  top: 28px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}