/* 메인 */

 
#main {width:100%; font-size:18px; }
#main a {  }

body {/* cursor: none; */; }
 

 hr.main_hr {height:120px; background-color:#fff}
 hr.main_hr2 {height:70px; background-color:#fff}
 
.tit {display:flex; color:#222;  align-items:flex-end; font-size:1.5em; font-weight:800}
.tit a {margin-left:auto; font-size:17px; font-weight:400}

 @media all and (max-width:900px) {
	#main { font-size:15px; }
   .tit { font-size:1.3em; }

}




.main_vi {width:100%; height:100vh; positioN:relative}

@media all and (max-width:900px) {
		.main_vi { height:94vh}


}


.sample {width:20%; border:1px solid #ddd; display:flex; align-items:center;  background: linear-gradient( to bottom, #6d819c, #6d819c );  box-sizing:border-box; padding:3%; border-radius:10px }
.sample_in {width:100%;  text-align:center; }
.sample_in h3 {font-size:23px; font-weight:600;  margin-bottom:20px; color:#FFF }
.sample_in a {width:100%; border-radius:5px; line-height:50px; background-color:#fff; color:#222; display:inline-block; font-size:18px;  margin-bottom:10px  } 
.sample_in a:hover {background-color:var(--main_c); color:#fff }
 
 .side_text {position:absolute; z-index:999999999; right:4%; bottom:0; writing-mode: vertical-rl;
    font-size: 16px;
    color: #fff;
    font-weight:400;
    letter-spacing: .4em;
    padding-bottom: 120px;
 	}

.side_line {position: absolute;
    width:2px;
    height: 100px;
    background:rgba(255,255,255,.2);
    transition: all 0.3s;
    display: block;
    left: 7px;
    bottom: 0; overflow:hidden}

.side_line p {
position: absolute;
    width: 2px;
    height: 50px;
    background: #fff;
    transition: all 0.3s;
    display: block;
    left: 0;
    top: 0;
	-webkit-animation: side_line 4s infinite linear;
	  -moz-animation: side_line 4s infinite linear;
	  -ms-animation: side_line 4s infinite linear;
	  -o-animation: side_line 4s infinite linear;
	  animation: side_line 4s infinite linear;
}



@-webkit-keyframes side_line {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
 100% {
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
	}
 

}
 


@keyframes opacity {
			0% {opacity:.2}
			50% {opacity:1 }
			100% {opacity:.2} 
    }


#section1  {width:100%; display:inline-block;  background-color:#fff;  }
#section1 .ct  {width:100%; max-width:1300px; margin:0 auto; display:flex; justify-content:space-between}
#section1 .ct .box1  {width:35%; border:1px solid #f2f2f2; box-sizing:border-box; padding:35px 30px 30px 30px; background-color:#fff;  border-radius:10px; box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.1);}
#section1 .ct .box2  {width:35%; border:1px solid #f2f2f2; box-sizing:border-box;  padding:35px 30px 30px 30px;  background-color:#fff;border-radius:10px; box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.1);  }
#section1 .ct .box3  {width:27%; border:1px solid #f2f2f2; box-sizing:border-box;  padding:35px 30px 30px 30px;  background-color:#fff;border-radius:10px; box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.1);  }
 

.count {width:100%;  float:left;  margin-top:22px; height:260px; overflow:hidden }
.count .count_p {width:100%; display:flex;  align-items:center; font-weight:500; color:#111;  font-size:20px;}
.count .count_p .no  {width:55px; line-height:55px; border-radius:5px; color:#fff; margin:0 2px; text-align:center;  display:inline-block;  font-size:40px;  font-family:'Montserrat'; font-weight:600}
.count .bg1  { background-color:var(--main_c);}
.count .bg2  { background-color:#6d819c}
 
 

.ul_slide {width:100%; border-top:1px solid #111;  margin-top:20px;  }
.ul_slide ul {width:100%}
.ul_slide li {background-color:#fff; width:100%; border-bottom:1px solid #ddd; font-size:17px; font-weight:400;  color:#444; height:40px; display:flex; align-items:center;  }
.ul_slide li .font_span {  margin-left:auto; background:var(--main_c); margin-right:5px; border-radius:50px; padding:5px 10px; line-height:1; color:#fff;  font-size:16px}

.main_review {margin-top:22px; }
.main_review .swiper {
  width: 100%;
  height: 100%;
   
}

.main_review  .swiper-slide {
		height:100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		box-sizing:border-box; padding-bottom:40px
	
}

 .main_review .box {width:100%; box-sizing:border-box;    }

 .main_review div.content_div {width:100%; display:inline-block; height:163px;  box-sizing:border-box;   }

 .main_review div.content_div p {  overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
   font-size:.97em; 
	color:#333; 
	line-height:1.4;
	
}
 .main_review div.content_div  span {font-size:.95em; font-weight:300; color:#666}
 
.main_review  div.name {margin-top:-1px; width:100%; font-weight:600;  border:1px solid #ddd;  padding:10px;  box-sizing:border-box;  display:flex;          align-items:center; }
.main_review  div.name span {flex-shrink:0; width:33px; height:33px; display:flex; align-items:center; justify-content:center; border-radius:50%;   background-color:var(--main_c); margin-right:10px; color:#fff; }
.main_review  div.name p { 
      overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	 font-size:.95em; 
   
 }
@media all and (max-width:1300px) {
		#section1 .ct  {flex-wrap:wrap; gap:20px; box-sizing:border-box; padding:0 3%}
		#section1 .ct .box1  {  flex:1 1 calc(30% - 20px)}
		#section1 .ct .box3  {  flex:1 1 calc(30% - 20px)}
		#section1 .ct .box2 {display:none}
}

@media all and (max-width:900px) {
		#section1 .ct .box1  {  flex:1 1 calc(100% - 20px); padding:35px 20px 10px 20px}
		#section1 .ct .box2  {display:block;  flex:1 1 calc(100% - 20px);  padding:35px 20px 10px 20px}
		#section1 .ct .box3  { flex:1 1 calc(100% - 20px);  padding:35px 20px 32px 20px}
		.count .count_p .no  {width:40px; line-height:40px; font-size:30px;   }
		.count {margin-top:15px}
		.ul_slide li {font-size:1em; }
		.ul_slide li .font_span {  font-size:14px}
		.main_review {margin-top:15px; }
		.main_review div.content_div {height:110px;   }
		.main_review div.content_div p {  -webkit-line-clamp: 3; font-size:1em;  }
 
}
 
/*수출바우처*/
.bg_bar {position:relative; overflow:hidden;   width:100%;  display:inline-block; padding:120px 0 90px 0; box-sizing:border-box; background-color:#f4f6f8; }
.bg_bar .bg_ci {position:absolute; right:180px; top:-175px;  width:300px; height:480px;  transform: rotate(-30deg);}
.bg_bar:after {content:''; background:url('/common/img2/bg_bar_img.png') no-repeat center; background-size:cover;  width:41%;  height:100%; position:absolute; left:0; top:0; display:inline-block}
.bg_bar:before {content:''; background-color:#f4f6f8; width:41%; z-index:9;  height:100%; position:absolute; left:0; top:0; display:inline-block; transition: all .8s ease-out;}
.bg_bar.active:before {width:0; left:41%}
 
.bg_bar .in {position:Relative; max-width:auto; width:59%; padding:0 5%;  box-sizing:border-box; z-index:9; margin:0;  float:right }
.bg_bar  h2 {color:#222; font-size:53px; letter-spacing:-1px; font-weight:600;  line-height:1.3; /* text-shadow:1px 1px 3px #333;  */width:100%; display:inline-block;  }
 
.bg_bar h2 b {color:#222; font-weight:800;  }
.bg_bar h2 + p {color:#111; font-size:1.3em; line-height:1.5; font-weight:300;  width:100%; flex-wrap:wrap; display:inline-block; padding:10px 0; }
.bg_bar div.box_wrap {display:flex; margin:0 auto; gap:15px; margin-top:25px}
.bg_bar div.box_wrap div { width:calc(25% - 15px); color:#fff; font-size:19px; line-height:1.4;   display:flex;  align-items:center;   padding:50px 30px;  box-sizing:border-box; background-color:#6d819c; text-align:center; border-radius:10px; font-weight:300; position:relative }
.bg_bar div.box_wrap div:nth-child(2n) { background-color:var(--main_c) }
.bg_bar div.box_wrap div p {width:100%; text-align:center}
.bg_bar div.box_wrap div b {font-weight:700; font-size:1.25em; line-height:1.3; margin-top:5px; display:block }
    
 
 @media all and (max-width:1300px) {
			.bg_bar div.box_wrap { flex-wrap:wrap; width:100%}
			.bg_bar div.box_wrap div { width:calc(50% - 15px); padding:25px;   }


}
@media all and (max-width:900px) {
			.bg_bar {padding:0;  display:flex; flex-wrap:wrap}
			.bg_bar .bg_ci {display:none}
			.bg_bar:after {  width:100%; height:200px;  position:static; order:1}
			.bg_bar:before {display:none}

			.bg_bar .in {  width:100%; padding:60px 5%; order:2; }
			.bg_bar h2 {font-size:1.7em; text-align:center}
			.bg_bar h2 + p {font-size:1em; text-align:center}
 			.bg_bar div.box_wrap div { font-size:1em }
			.bg_bar div.box_wrap div b { font-size:1.2em; margin-top:3px  }

}

.portfolio {width:100%; display:inline-block; box-sizing:border-box; padding:0 0;}
.portfolio ul {display:flex; flex-wrap:wrap}
.portfolio ul li {width:25%;}
.portfolio ul  li img {width:100%;  cursor:none } 
.portfolio ul + div {margin-top:70px}


@media all and (max-width:1300px) {
   .portfolio ul li {width:33.333%;}

}

@media all and (max-width:900px) {
		.portfolio ul li {width:50%;}
		.portfolio ul + div {margin-top:40px}

}

.main_service ul {display:flex;  box-sizing:border-box; padding-bottom:20px; margin-top:50px; justify-content:space-between}
.main_service ul li {width:32%; box-sizing:border-box; transition: all 0.3s ease-out; position:relative; padding:40px 30px 0 30px; border:1px solid #f1f1f1; border-radius:10px; overflow:hidden; display:flex;  flex-direction:column; box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.1);}


.main_service ul li img {width:calc(100% + 60px); margin-left:-30px}
.main_service ul li h2 { line-height:1.1;  text-align:left; font-size:48px; font-weight:400;  margin-bottom:13px;  }
.main_service ul li h3 { line-height:1.1; font-weight:700;  text-align:left; font-size:1.4em; display:block; margin-bottom:20px; color:#111}
.main_service ul li p {color:#555; line-height:1.4; font-size:.96em; margin-bottom:20px}
.main_service ul li b  {color:var(--main_c); font-weight:900}
.main_service ul li .img {margin-top:auto;  display:inline-block; overflow:hidden;  width:calc(100% + 60px); margin-left:-30px; height:300px; }
.main_service ul li .img div {width:100%; height:100%; display:inline-block;  transition: all .5s ease-out;}
.main_service ul li:hover .img div {transform:scale(1.1); }

.main_service ul li a {color:#111; display:flex; align-items:center}

@media all and (max-width:900px) {
		.main_service ul {flex-wrap:wrap; gap:30px}
		.main_service ul li {width:100%; padding:30px 18px 0 18px}
		.main_service ul li p {margin-bottom:10px}

.main_service ul li .img {height:200px }
  		.main_service ul li h2 { font-size:35px }

}
.main_h2 {width:100%; text-align:center; }
.main_h2 h2 { font-family:'Montserrat';   margin-bottom:12px; width:auto; display:inline-block; font-weight:400; font-size:60px; position:relative;  }
.main_h2 b { font-family:'Montserrat';  color:#000; font-weight:700}
.main_h2 p {font-size:1.1em; color:#555}

 .text_point {  display:inline-block;  position:relative; color:var(--main_c) }
 .text_point:after {content:''; width:12px; height:12px; background-color:var(--main_c); border-radius:50%; position:absolute; top:-12px; left:50%; margin-left:-6px;
 -moz-animation: bounce 1.5s infinite;
  -webkit-animation: bounce 1.52s infinite;
  animation: bounce 1.5s infinite;
 }

.text_point:nth-child(2):after {    animation-delay:.5s;}
.text_point:nth-child(3):after {  animation-delay:1s;}
 
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(-7px);
  }
}

.main_contact {background:url('/common/img2/main_contact_bg.png') no-repeat; background-size:cover; padding:100px 0}
.main_contact .table_wrap {padding:40px 20px; box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.1); background:rgba(255,255,255,1); width:800px; border:none; margin-left:auto}
.main_contact .write tr {border-bottom:0; }
.main_contact .write th { padding:0}
.main_contact .write td { padding:0; padding:7px 0}
.main_contact .main_h2 {padding-left:20px; padding-top:70px;  width:auto}
.main_contact h2 {letter-spacing:-1px; } 

/* .main_contact ul {background-color:#fff; padding:20px 0;  margin:20px 0 30px 0; border-radius:5px;  box-sizing:border-box}
 */
 
 .main_contact ul { margin:20px 0 30px 0; }
 .main_contact ul li {color:#333; margin-bottom:3px; font-weight:600}
 .main_contact a.s_btn  {font-weight:500; line-height:45px}

 @media all and (max-width:900px) {
		.main_h2 h2 {  font-size:40px;   }
		.main_h2 p {font-size:1em}
		.text_point:after { display:none}
		.main_contact { background:#f4f6f8; padding:70px 0}
		.main_contact .main_h2 {padding:0}
		.main_contact .table_wrap {margin-top:40px}
		.main_contact table.write tr {  padding-bottom:10px}
		.main_contact a.s_btn  { line-height:40px}


}