@charset "utf-8";
/*******************************
	택스메이트 홍보 랜딩페이지
	main.css 
	2023-10-16
*******************************/

/* main-wrap */
.main-area{position:relative; max-width:1200px; margin:0 auto; box-sizing:border-box;}
.main-area2{position:relative; max-width:1300px; 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/landing_mainvisual_img.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:720px; background: rgba(82, 191, 238, 0.9); 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; /*height:100%;*/ text-align:left; z-index:99;}
.main-conts .mtitle-text{padding:180px 0 0 0;font-size:56px; font-weight:700; color:#fff; font-family: 'GmarketSans'; }
.main-conts .subtitle-text{margin-top:30px; font-size:30px; font-weight:500; color:#fff;}
.main-conts .mtitle-topbtn{margin:56px 0 59px;}
.main-conts .mtitle-topbtn button{width:318px; height:67px; font-size:20px; 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:1px solid #002a54; color:#fff; background:#003972; }
.main-conts .mtitle-topbtn .btn-primary:hover{background: #002a54; border-color: #002a54;}
.main-conts .mtitle-topbtn i{margin-left:8px; font-size:18px;}

.ico24{width:24px;height:24px;}

.main-conts .mainvisual-icon{position:absolute; right:-100px; top:90px; max-width:663px; z-index:1;}
.main-conts .mainvisual-icon img{max-width:100%;}
.main-txt-inner{position:relative; display:block; z-index:33;}

@media all and (max-width:1160px){ 
	/* section1 */
	.main-txt-inner{padding-left:24px;}
	.main-conts .mainvisual-icon{right:-110px; top:210px; max-width:600px;}
	.main-conts .mainvisual-icon img{max-width:80%;}
}

@media all and (max-width:1160px){ 
	/* section1 */
	.main-conts .mainvisual-icon{right:-140px; top:210px; max-width:600px;}
	.main-conts .mainvisual-icon img{max-width:70%;}
}

@media all and (max-width:800px){ 
	/* section1 */
	.main-section1{height:980px;}
	.main-section1:after{height:980px;}
	
	.main-txt-inner{padding-left:0 !important;}
	.main-section1 .main-conts{text-align:center;}
	.main-conts .mtitle-text{padding:120px 0 0 0; font-size:46px; }
	.main-conts .subtitle-text{font-size:24px;}
	
	.main-txt-inner{padding-left:24px;}
	.main-conts .mainvisual-icon{position: relative; text-align:center; right:auto; top:auto; max-width:100%;}
	.main-conts .mainvisual-icon img{max-width:70%;}
}
@media all and (max-width:480px){ 
	/* section1 */
	.main-section1{height:780px;}
	.main-section1:after{height:780px;}
	
	.main-conts .mtitle-topbtn{display:none;}
	.main-conts .mainvisual-icon img{max-width:80%; margin-top:30px;}
}



/* section2 */
.main-section2{position:relative; padding:80px 0 }
.main-section2 .both-style-tbl{display:flex;justify-content: center;}

.both-style-tbl{position:relative; display:flex; justify-content: space-around; flex-direction:wrap; }

.flexitem{ display:flex; border:1px solid #1275bc; border-left:none; border-radius: 0 10px 10px 10px; margin:0 16px;}
.flexitem.right-tbl{ border:1px solid #00b4c6 !important;}

.left-tbl .title-item{background:#1275bc;}
.right-tbl .title-item{background:#00b4c6}
.left-tbl .list-item{text-align:center;}
.right-tbl .list-item{text-align:center;}

.flexitem .title-item{ min-width:184px; display:flex; align-items:center; justify-content: space-around; color:#fff; font-weight:bold; border-left:none;font-size:24px; text-align:center; border-radius:0 10px 0 10px; box-sizing:border-box;}
.flexitem .list-item li{border-bottom:1px solid #ccc; padding:10px; font-size:17px; min-width:290px;}
.flexitem .list-item li:last-child{border-bottom:none;}

@media all and (max-width:800px){ 
	/* section2 */
	.both-style-tbl{position:relative; display:block; flex-direction:column;}
	.flexitem:first-child{margin-bottom:20px;}
	
	.flexitem .title-item{width:34%; min-width:34%; font-size:16px;}
	.flexitem .list-item{width:67%;}
	.flexitem .list-item li{min-width:100%;}
}


/* section3 */
.section3-titlebg{position:relative; background:#212752; padding:77px 0 50px 0; text-align:center;}
.section3-titlebg .mtitle-text{color:#fff; font-family: 'GmarketSans'; font-weight:700; font-size:48px;}
.section3-conbg{ position:relative; padding:0 0 0;background: #d5f0ff url(../img/landing_section3_deco_balloon.png) center top no-repeat;}
.section3-conbg:after{content:""; background:#212752; height:49px; width:100%; display:block; position:absolute; bottom:0;}

.section3-cont-area{position:relative; max-width:1200px; margin:0 auto; box-sizing:border-box; background: url("../img/landing_section3_dotbg.png") 36px 0 repeat-y; padding:80px 0;}
.section3-inner-txtcon{position: relative; padding:20px 0 80px 0; margin:20px 0 80px 0 }
.section3-inner-txtcon .rbox-number{ float:left; display:inline-block; width:72px; height:72px; line-height:42px; text-align:center; border:14px solid #212752; background:#d5f0ff; border-radius: 36px; font-family: "roboto"; font-size:23px; font-weight: bold;}
.section3-inner-txtcon .text-wrap{float:left; display:inline-block; position:relative; padding:10px 0 0 25px;}
.section3-inner-txtcon .text-wrap .title{font-size:32px; font-weight:700;}
.section3-inner-txtcon .text-wrap .sub-text{font-size:20px;padding-top:14px;}
.section3-inner-txtcon .right-img{position:absolute; right:0; top:-20px;}
.section3-inner-txtcon .right-img img{max-width:100%;}

.section3-inner-txtcon .text-wrap .sub-text.ico{padding-left:25px;}
.section3-inner-txtcon .text-wrap .sub-text.ico i{color:#1275bc; font-size:24px; margin-left:-25px; vertical-align:middle;}

@media all and (max-width:1280px){ 
	/* section3 */
	.section3-inner-txtcon{position: relative; padding:20px 0 40px 0; margin:20px 0 40px 0 }
	.section3-inner-txtcon .text-wrap{padding:10px 0 0 35px;}
	.section3-inner-txtcon .text-wrap .title{font-size:28px;}
	.section3-inner-txtcon .text-wrap .sub-text{font-size:18px;}
	.section3-inner-txtcon .right-img{position: relative; padding:0 24px 0 65px;  top:auto; right:auto;}
	.section3-inner-txtcon .right-img img {margin-top:20px;}
	
}
@media all and (max-width:800px){ 
	/* section3 */
	.section3-titlebg .mtitle-text{font-size:42px;}
	
	.section3-inner-txtcon{position: relative; padding:20px 0 40px 0; margin:20px 0 40px 0 }
	.section3-inner-txtcon .text-wrap{padding:0 0 0 65px;}
	.section3-inner-txtcon .text-wrap .sub-text{font-size:18px;}
	.section3-inner-txtcon .right-img{position: relative; padding:0 24px 0 65px;  top:auto; right:auto;}
	.section3-inner-txtcon .right-img img {margin-top:20px;}
	
}


/* section4 :: 택스메이트 미리보기 */
.main-section4 .mtitle-text{padding:80px 0 0 0;font-size:56px; font-weight:700; color:#212752; font-family: 'GmarketSans'; text-align:center;}
.main-section4 .section4-round-box{position:relative; margin:40px 0 80px; padding:20px 20px 60px 20px; width:100%; border-radius:20px; border:1px solid #f7f7f7; -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);}
.main-section4 .section4-inner-conts{position:relative; width:100%}
.main-section4 .section4-inner-conts .left-items{float:left;width: calc(27% - 30px); margin-right:10px; margin-left:10px;}
.main-section4 .section4-inner-conts .right-items{float:right;width: calc(73% - 5px); margin-right:5px; min-height:530px; border:2px solid #ddd;}
.main-section4 .section4-inner-conts .right-items img{max-width:100%;}

.main-section4 .section4-inner-conts .title1{font-size:24px; font-weight:bold; color:#212752;}
.main-section4 .section4-inner-conts .title-box{width:100%; margin:8px 0; font-size:24px; font-weight:bold; color:#212752; border:1px solid #d7e6f1; background:#ecf7ff; padding:10px; box-sizing:border-box;}
.main-section4 .section4-inner-conts .title2{font-size:20px; font-weight:bold;  color:#1275bc;}
.main-section4 .section4-inner-conts .title3{display:block;margin-top:5px;font-size:18px; color:#212752; line-height:1.2;}

.main-section4 .section4-inner-conts .text-list li{position:relative; font-weight:500; padding-left:30px; margin:8px 0;}
.main-section4 .section4-inner-conts .text-list li .number{position:absolute; left:0; top:0;width: 21px;height: 21px; display:inline-block; font-size:14px; font-weight:600; line-height: 21px; color:#fff; vertical-align:middle; text-align:center; font-family:roboto; border-radius: 11px; background: #212752; box-sizing:border-box;}

@media all and (max-width:800px){ 
	/* section4 */
	.main-section4 .mtitle-text{font-size:46px;}

	.main-section4 .section4-inner-conts .left-items{float:none;width: 100%; margin-right:0; margin-left:0;}
	.main-section4 .section4-inner-conts .right-items{float:none;width:100%; margin-right:0; min-height:auto; margin-top:14px;}	
}

/***************************************************** 
   택스메이트 미리보기 slick slide   
*****************************************************/
/*  Dots  */
.main-section4 .section4-round-box .slick-dotted.slick-slider{}
.main-section4 .section4-round-box .slick-dots{position: absolute; left:0; bottom: 24px; display: block; width: 100%; padding: 0; margin: 0;list-style: none; text-align: center;z-index:9;}
.main-section4 .section4-round-box .slick-dots li{position: relative; display: inline-block; width: 20px; height: 20px; padding: 0; cursor: pointer;} 
.main-section4 .section4-round-box .slick-dots li button{font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px;cursor: pointer; color: transparent; border: 0; outline: none; background: transparent;}
.main-section4 .section4-round-box .slick-dots li button:hover,
.main-section4 .section4-round-box .slick-dots li button:focus{outline: none;}
.main-section4 .section4-round-box .slick-dots li button:hover:before,
.main-section4 .section4-round-box .slick-dots li button:focus:before{ opacity: 1;}
.main-section4 .section4-round-box .slick-dots li button:before{ font-family:xeicon; content:"\eb0d"; font-size: 10px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.main-section4 .section4-round-box .slick-dots li.slick-active button:before{ opacity: .75;color: black;}
/*****  //택스메이트 미리보기 slick slide  **********/


/* section5 :: 특징 */
.section5-bg{position:relative; background:#f5f5f5; padding:120px 0; text-align:center;}
.main-section5 .mtitle-text{padding:40px 0;font-size:40px; font-weight:700; color:#212752; font-family: 'GmarketSans'; text-align:center;}

.main-section5 .sub-txt-box{max-width:1200px; margin:30px auto 0;}
.main-section5 .sub-txt-box li{position:relative; display:inline-block; float:left; width:calc(33.33% - 50px); min-height:266px; margin-left:50px; padding:45px 0 0 0; font-size:22px; color:#fff; font-weight:600; text-align:center; border:1px solid #a3b8e1; border-radius:10px; box-shadow: 2px 3px 10px 4px rgba(178, 193, 233, 0.3); -webkit-box-shadow: 2px 3px 10px 4px rgba(178, 193, 233, 0.3); box-sizing:border-box;}
.main-section5 .sub-txt-box li:first-child{margin-left:0;}
.main-section5 .sub-txt-box li .img-rbox{padding-top:30px; display:block; }

.box1-bg{background:#52bfee;}
.box2-bg{background:#178de2;}
.box3-bg{background:#2f7df2;}
@media all and (max-width:800px){ 
	/* section5 :: 특징 */
	.section5-bg{padding:60px 20px;}
	.main-section5 .mtitle-text{font-size:32px;}
	
	.main-section5 .sub-txt-box{margin:30px auto 0;}
	.main-section5 .sub-txt-box li{float:none; width:100%; margin-left:0; margin-bottom:20px; min-height:250px; display:block; font-size:18px;}
	.main-section5 .sub-txt-box li:last-child{margin-bottom:0;}
}


/* section6 :: 메일문의 / 고객지원 */
.section6-bg{position:relative; background:#212752; padding:120px 0; text-align:center;}
.main-section6 .mtitle-text{padding:40px 0;font-size:42px; font-weight:700; color:#fff; font-family: 'GmarketSans'; text-align:center;}

.Inquire-form,
.customer-list{position:relative; display:inline-block; background-color:rgba(255,255,255,0.1); color:#fff; border-radius:5px; }

.Inquire-form{width: calc(66% - 40px); margin-right:40px; padding:40px 30px;}
.customer-list{width:34%; padding:50px 10px;}

.section6-flex{display:flex;}

/* 고객지원 */
.cs-mtitle{font-size:32px; font-weight:bold;}
.cs-stitle{margin:10px 0;font-size:20px; font-weight:400;}
.cs-ico{width:76px; height:76px; margin:20px auto 0; background:#212752 url(../img/landing_ico_customer.png) center no-repeat;/* display:flex; align-items:center; justify-content: space-around; */ border-radius:40px;}

.num-txt-box{ padding-top: 8px; line-height: 1.8; letter-spacing: -0.1px; color: #aaa; -webkit-transition: all 0.3s; transition: all 0.3s;} 
.num-txt-box p{position: relative; text-align: center; padding:12px 0;}
.num-txt-box em{ display: inline-block; color: #aaa; font-size:18px; min-width:80px; margin-top:-2px; vertical-align:middle; text-align:left;}
.num-txt-box span{font-size:20px;  font-weight:300; min-width:200px; display:inline-block; text-align:left; color:#fff;}
.num-txt-box span.tel{font-size:30px; color:#bce1ff; font-weight:bold;}

/* 메일문의하기*/
.border-none-tbl2{ /*flex-direction: row;  justify-content: space-between;*/ }
.border-none-tbl2 .list-group{display:flex; width:100%;}
.border-none-tbl2 .list-group .tbl-items{display:flex; width:50%; align-items: center; padding:8px 0;}
.border-none-tbl2 .list-group .tbl-items .cell-title{ width:85px; text-align: left; display:inline-block; }
.border-none-tbl2 .list-group .tbl-items .cell{ width:75%; display:inline-block;}

.border-none-tbl2 .tbl-items{display:flex; padding:8px 0;}
.border-none-tbl2 .tbl-items .cell-title{ width:85px; text-align: left; display:inline-block; font-size:17px; font-weight:400;}
.border-none-tbl2 .tbl-items .cell{ width:88%;isplay:inline-block;}

.border-none-tbl2 input[type="text"]{width:100% !important; height: 42px; padding: 0 8px;  border: 1px solid #ccc;  color: #333; font-size: 17px; background-color: #fff; border-radius: 5px;}
.border-none-tbl2 textarea{ width:100% !important; height:200px; padding: 12px 10px;  border: 1px solid #ccc;  color: #333; font-size: 17px; background-color: #fff; border-radius: 5px;}
.border-none-tbl2 input[type="text"]:focus,
.border-none-tbl2 textarea:focus{background-color:#d5f0ff;}

.border-none-tbl2 input::placeholder,
.border-none-tbl2 textarea::placeholder{color: rgba(0,0,0, 0.5);}

.btn-mail { margin-top:10px; width:235px; height:60px; border-radius:30px; border:3px solid #fff; color:#fff; font-size:18px; vertical-align:middle;}
.btn-mail:focus,
.btn-mail:hover{background:#fff; color:#212752}
.btn-mail i{ vertical-align:middle; margin-top:-3px; font-size:20px; margin-right:8px;}
@media all and (max-width:800px){ 
	/* 메일문의하기 */
	.border-none-tbl2 .list-group{display:block; width:100%;}
	.border-none-tbl2 .list-group .tbl-items{width:100%; }
	
	.border-none-tbl2 .list-group .tbl-items .cell-title{ width:20%;}
	.border-none-tbl2 .list-group .tbl-items .cell{ width:80%; }

	.border-none-tbl2 .tbl-items .cell-title{ width:20%;}
	.border-none-tbl2 .tbl-items .cell{ width:80%;}
	
	.border-none-tbl2 .ac{text-align:left !important;}
	
	.Inquire-form,
	.customer-list{display:block; }

	.Inquire-form{width: 100%; margin-bottom:20px; padding:40px 30px;}
	.customer-list{width:100%; padding:50px 10px;}
	
	.section6-flex{display:block; padding:24px;}
}

@media all and (max-width:480px){ 
	/* 메일문의하기 */
	.border-none-tbl2 .list-group .tbl-items .cell-title{display:none !important;}
	.border-none-tbl2 .list-group .tbl-items .cell{ width:100%; }

	.border-none-tbl2 .tbl-items .cell-title{display:none !important;}
	.border-none-tbl2 .tbl-items .cell{ width:100%;}
	
	.num-txt-box em{font-size:16px; min-width:60px;}
	.num-txt-box span.tel{font-size:24px; color:#bce1ff; font-weight:bold;}
}


/* quickbanner*/
.quickbanner-wrap{position: fixed;  top: 350px;  width: 120px;  margin-right: 670px;  right: 50%;  border-radius: 16px; -webkit-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.15);box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.15);box-sizing:border-box; z-index: 77;}
.quickbanner-wrap .banner-img{position:relative; text-align:center; border:1px solid #bfeafc; background:#fff; border-radius: 16px;}
.quickbanner-wrap .banner-img a:hover{color:#1275bc;}
.quickbanner-wrap .banner-img a{position:relative; display:block;  width:100%; height:100%;  padding:20px 0 40px; color:#212752; font-size:22px; font-weight:bold; line-height:1.2;}
.quickbanner-wrap .banner-img a span{display:block; margin:10px 0;}
.quickbanner-wrap .banner-img a .click-img{position:absolute; bottom:-16px; right:12px; z-index:22;}
.quickbanner-wrap .banner-img:after{content:"";position:absolute; bottom:0; left:0; width:100%; height:20px; border-radius: 0 0 16px 16px; background:#212752; cursor:pointer;}
@media all and (max-width:800px){ 
	/* quickbanner*/
	.quickbanner-wrap{display:none;}
}

/***************** 2023.12.28 청년창업감면공제 오픈 팝업 퍼블리싱********************/
.main-layerpopup{position: fixed; width:510px; min-height:250px; padding:10px 24px; background:#09407e url(../img/main_layerpopup_1228.png) center top no-repeat; background-size:102%; border:1px solid #000; border-radius:10px; -webkit-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.15);box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.15);box-sizing:border-box; z-index:999; }
.main-layerpopup *{box-sizing:border-box;}
.main-layerpopup .top-title{padding:36px 0 30px; font-size:32px; text-align:center; color:#fff; font-family: 'GmarketSans';  font-weight: 700;  text-shadow: 3px 4px 10px rgba(0,0,0,0.4);}
.main-layerpopup .point-c{color:#c3ff7c;}

.main-layerpopup .inner-bg{ background:#fff;border-radius:5px; padding:20px;}

.main-layerpopup .inner-cont1{display:flex; border:1px solid #ddd; border-radius:10px 0 10px 0; margin:6px 0 14px; }
.main-layerpopup .inner-cont2{display:flex; border:2px solid #3c91dc; border-radius:10px 0 10px 0; margin:8px 0; }

.main-layerpopup .inner-cont1 .stitle{display:flex; align-items:center; justify-content:center; padding:13px 10px; width:120px; /*background: #6CF;*/ background:#eee; color:#222;  font-size:15px; text-align:center; border-radius:10px 0 0 0;}
.main-layerpopup .inner-cont1 .txt{display:flex; align-items:center; padding:13px 10px;}

.main-layerpopup .inner-cont2 .stitle{display:flex; align-items:center; justify-content:center; padding:13px 10px; width:120px; background: #3c91dc; color:#fff; font-size:16px; font-weight:bold; text-align:center; border-radius:8px 0 0 0;}
.main-layerpopup .inner-cont2 .txt{display:flex; align-items:center; padding:13px 10px; font-size:15px; color:#000; }
.main-layerpopup .inner-cont2 .txt li{margin:2px 0;}
.main-layerpopup .inner-cont2 .txt i{color: #3c91dc; font-size:18px; vertical-align:middle; margin-top:-2px;}
.main-layerpopup .ar{text-align:right;}

.main-layerpopup .layerpop-footer{position:relative;height:30px;padding:10px 0 0 0;text-align:right; font-size:13px;color:#fff;box-sizing:border-box;line-height:1;}
.main-layerpopup .layerpop-footer a{display:inline-block;cursor:pointer;margin:0 5px 0 10px;text-decoration:none;color:#fff}
.main-layerpopup .layerpop-footer .bar{display:inline-block;cursor:pointer;margin:0 5px; font-weight:normal; opacity:0.7}

@media all and ( max-width: 800px ){
	.main-layerpopup {right:0 !important;}
}