@charset "utf-8";
/*****************
	템플릿 type4 네이비(다크변형1) main.css 
	2023-11-15
******************/

/* main-wrap */
.main-area{position:relative; max-width:1200px; margin:0 auto; box-sizing:border-box;}

.main-section1{ position:relative; width:100%; height:913px; 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.jpg) no-repeat center/cover; z-index:1;
	-webkit-animation: kenburns-top 5s ease-out both;
	        animation: kenburns-top 5s ease-out both;
}
.main-section1:after{content:""; position:absolute;top:0; left:0;width:100%; height:768px; background: rgba(9, 15, 28, 0.5); z-index:2;}
/** ----------------------------------------
 * 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.2;
  }
  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.2;
  }
  100% {
	  -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
	opacity:1;
    
  }
}

.main-conts{position:relative;text-align:center;z-index:99;}
.main-conts .mtitle-text{padding:240px 0 0 0;font-size:40px; font-weight:700; color:#fff;}
.main-conts .mtitle-topbtn{margin:56px 0 59px;}
.main-conts .mtitle-topbtn button{width:410px; height:66px; font-size:19px; letter-spacing:0; border-radius:10px !important; -webkit-box-shadow: 0px 1px 8px 1px rgba(29, 32, 38, 0.1); box-shadow: 0px 1px 8px 1px rgba(29, 32, 38, 0.1);}
.main-conts .mtitle-topbtn .btn-primary{border:2px solid #fff; color:#fff; background:rgba(0, 37, 79, 0); }
.main-conts .mtitle-topbtn .btn-primary:hover{background: #09407e; border-color: #09407e;}
/*.main-conts .mtitle-topbtn .btn-primary{border:2px solid #00254f;background:rgba(0, 37, 79, 1); }
.main-conts .mtitle-topbtn .btn-primary:hover{ border-color:#fff ;color:#fff; background:rgba(0, 37, 79, 0); }*/
.main-conts .mtitle-topbtn button img{margin-right:12px;}
.main-conts .mtitle-img img{max-width:100%;}
.main-conts .sub-text{padding:30px 0 60px 0;font-size:20px; font-weight:500;}
.ico24{width:24px;height:24px;}
.main-conts .mtitle-text .fc-point2 {color: #9dd3f3;} /* 2023.09.06 추가*/

.main-section2{position:relative; margin-top:-145px; padding-bottom:110px; background: rgba(0, 37, 79, 0.92); overflow:hidden; z-index:3;}
.main-section2 .mtitle-text{padding-top:100px !important; font-size:36px; }
.sub-text-wrap{margin-top:73px; text-align:center;}
.sub-text-wrap .sub-text-item1{display:inline-block; vertical-align:middle;width:380px; min-height:164px; padding:24px 30px; color:#00254f; border:1px solid #fff; background:rgba(255, 255, 255, 1); border-radius:20px; -webkit-box-shadow: 0px 1px 8px 1px rgba(29, 32, 38, 0.2); box-shadow: 0px 1px 8px 1px rgba(29, 32, 38, 0.2); box-sizing:border-box;}
.sub-text-wrap .sub-text-item1 p{display:block; margin:8px 0; text-align:left; font-size:20px; font-weight:500; vertical-align:middle; letter-spacing:-0.01em;}
.sub-text-wrap .sub-text-item1 p img{margin-right:8px;}
.sub-text-wrap .sub-text-item2 {display:inline-block; vertical-align:middle;width:82px; height:70px; margin:0 20px 0 20px; background:url(../img/section2_icon_arrow.png) no-repeat;}
.sub-text-wrap .sub-text-item3 {display:inline-block;vertical-align:middle; width:350px; height:164px; padding:34px 0 20px 0; border:1px solid #fff; background:rgba(255, 255, 255, 1); border-radius:100px;  -webkit-box-shadow: 0px 1px 8px 1px rgba(29, 32, 38, 0.2); box-shadow: 0px 1px 8px 1px rgba(29, 32, 38, 0.2); box-sizing:border-box;}
.sub-text-wrap .sub-text-item3 .line1{margin-top:8px;font-size:27px; color:#00254f; font-weight:800; cursor:pointer;} /* 2023.10.31 수정*/
.sub-text-wrap .sub-text-item3 .line1:hover{color:#004ba0;} /* 2023.10.31 추가 */
.sub-text-wrap .sub-text-item3 .line1 i{ vertical-align:middle; margin-top:-3px;} /* 2023.10.31 추가 */
.sub-text-wrap .sub-text-item3 .line2{margin-top:5px; font-size:18px; color:#ed1c24; font-weight:500;}
.sub-text-wrap .sub-text-item3 .line1 .u-line:before{content: ''; width: 100%; height: 6px; position: absolute; bottom: 5px; background: #9dc9fb; z-index: -1;}
@media all and ( max-width: 800px ){
	/* main section2 */	
	.main-section2{padding-bottom:80px; padding-left:24px; padding-right:24px;}
	.main-section2 .mtitle-text{padding-top:80px !important;}
	.sub-text-wrap{margin-top:40px;}
	.sub-text-wrap .sub-text-item1{display:block;width:100%; height:auto;  padding:24px 20px; }
	.sub-text-wrap .sub-text-item1 p{display:block; font-size:17px;}
	.sub-text-wrap .sub-text-item2 {display:block; width:70px; height:82px; margin:20px auto; background:url(../img/section2_icon_arrow_down.png) no-repeat;}
	.sub-text-wrap .sub-text-item3 {display:block; width:100%; height:auto; padding:34px 0;}
	.sub-text-wrap .sub-text-item3 .line1{/*font-size:34px;*/}
	.sub-text-wrap .sub-text-item3 .line2{font-size:16px;}
}

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

/* 좌우정렬 section 3-6 */
.main-both-inner{position:relative; display:flex; max-width:1100px; margin:0 auto; box-sizing:border-box; z-index:99;}

.main-section3{position:relative; padding-top:70px; padding-bottom:70px; background:#f2f2f2; overflow:hidden; }
.main-section3 .mtitle-text{padding-top:66px !important; color:#333}
.main-section3 .main-both-inner .leftcon{width:45%; text-align:left;}
.main-section3 .main-both-inner .rightcon{width:55%; text-align:left;}
.main-section3 .main-both-inner{flex-direction: row-reverse;}

.main-section4{position:relative; padding-top:70px; padding-bottom:70px;  background:#e2e2e2; overflow:hidden; }
.main-section4 .mtitle-text{padding-top:66px !important; color:#333}
.main-section4 .main-both-inner .leftcon{width:55%; text-align:left; padding-left:80px;}
.main-section4 .main-both-inner .rightcon{width:45%; text-align:right;}

.main-section5{position:relative;padding-top:70px; padding-bottom:70px; background:#f2f2f2; overflow:hidden; }
.main-section5 .mtitle-text{padding-top:66px !important; color:#333}
.main-section5 .main-both-inner .leftcon{width:45%; text-align:left;}
.main-section5 .main-both-inner .rightcon{width:55%; text-align:left;}
.main-section5 .main-both-inner{flex-direction: row-reverse;}

@media all and ( max-width: 1024px ){
	/* main section3~5 */
	.main-section3 .mtitle-img img{max-width:90%;}
	.main-section4 .mtitle-img img{max-width:90%;}
	.main-section5 .mtitle-img img{max-width:90%;}
}
@media all and ( max-width: 800px ){
	/* main section1 */
	.main-section1{height:670px;}
	.main-conts .mtitle-text{padding:134px 20px 0 20px;font-size:28px; font-weight:700;}
	.main-conts .mtitle-topbtn{margin:36px 0 39px;}
	.main-conts .mtitle-topbtn button{width:80%; font-size:17px;}
	.main-conts .sub-text{padding:20px 0 40px 0;font-size:18px; font-weight:500;}

	/* main section3~5 */
	.main-section3 {padding-top:30px; padding-bottom:30px; }
	.main-section4 {padding-top:30px; padding-bottom:30px; }
	.main-section5 {padding-top:30px; padding-bottom:30px; }
	
	.main-both-inner {display:block; flex-direction: row; padding-bottom:60px;}
	
	.main-section3 .mtitle-img img,
	.main-section4 .mtitle-img img,
	.main-section5 .mtitle-img img{max-width:65%;}	
	
	.main-section3 .main-both-inner .leftcon,
	.main-section4 .main-both-inner .leftcon,
	.main-section5 .main-both-inner .leftcon{ width:100%; text-align:center; padding-left:0;}
	.main-section3 .main-both-inner .rightcon,
	.main-section4 .main-both-inner .rightcon,
	.main-section5 .main-both-inner .rightcon{ width:100%; text-align:center;}
}


/****** 자주묻는질문 *******/
.main-section6{position:relative; padding:96px 0; background:#e2e2e2;}
.main-section6 .mtitle-text{padding:0 30px 15px; font-size:38px; font-weight:700; border-bottom:1px solid #d2d2d2;}
.main-section6 .main-both-inner .fl{width:45%;}
.main-section6 .main-both-inner .fr{width:55%;padding-right:30px;}

/* FAQ 아코디언 */
.main-faq-list{max-width:520px; margin:30px auto 0;}
.main-faq-list .faq-list-item{position:relative; margin:20px 0; padding:0; background:#fff; text-align:left; box-shadow: 1px 3px 5px 3px rgba(128, 137, 201, 0.1); border-radius:20px; box-sizing:border-box;}
.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:#162c9b; font-size:22px; font-weight:600;}
.faq-title .title-item .mtitle{display:inline-block; padding-left:26px; font-size:18px; 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:"\e942"; 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:"\e945"; 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:400; font-size:17px; line-height:1.5;}

@media all and ( max-width: 1024px ){
	/* main section6 */
	.main-section6 .main-both-inner .fl img{width:90%;}
}
@media all and ( max-width: 800px ){
	/* main section6 */
	.main-section6 {padding:40px 20px;}
	.main-section6 .mtitle-text{margin-top:30px; font-size:28px; text-align:center;}
	
	.main-section6 .main-both-inner .fl{float:none !important; width:100%; text-align:center;}
	.main-section6 .main-both-inner .fl img{width:65%;}
	.main-section6 .main-both-inner .fr{float:none !important; width:100%; padding-right:0;}
	
	.faq-title .title-item{position:relative; padding:18px 35px 18px 16px; }
	
	.faq-title .title-item .question{font-size:20px;}
	.faq-title .title-item .mtitle{font-size:16px;  padding-left:20px;}
	.faq-title .title-item .right-btn{right:10px;}
	.faq-detail-view{padding:0 35px 20px 35px; font-size:15px;}
}


/* 메인 푸터 환급액 간편조회 버튼 */
.main-section7{ width:100%; height:231px; background: url(../img/footer_btn_bg.png) no-repeat center/cover; }
.main-section7 .main-conts .mtitle-topbtn{padding-top:80px; margin:0 auto;}
.main-section7 .main-conts .mtitle-topbtn button{border:2px solid #fff; color:#fff; background:rgba(29, 32, 38, 0.2); -webkit-box-shadow: 0px 1px 8px 1px rgba(47, 53, 79, 0.5); box-shadow: 0px 1px 8px 1px rgba(47, 53, 79, 0.5);}
.main-section7 .main-conts .mtitle-topbtn button:hover,
.main-section7 .main-conts .mtitle-topbtn button:focus{background:rgba(255, 255, 255, 1); color:#00254f; font-weight:700;}
.main-section7 .main-conts .mtitle-topbtn button .f-icon{width:24px; height:24px; display:inline-block; vertical-align:middle; background:url(../img/icon_main_search02.png) no-repeat center/contain; margin-right:12px;}
.main-section7 .main-conts .mtitle-topbtn button:hover .f-icon,
.main-section7 .main-conts .mtitle-topbtn button:focus .f-icon{background:url(../img/icon_main_search02_hover.png) no-repeat center/contain;}


/**************** 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;}
}

/******** 2023.09.06 메인 상단 스크롤 유도 화살표 *********/
.arrowdown-ani {
  position:absolute; bottom:-190px; left:50%;
  -webkit-animation: fade-in-top 1s;
          animation: fade-in-top 1s;  
}
@media all and ( max-width: 640px ){
	.arrowdown-ani { bottom:-40px;}	
}
.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;
  }
}