@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

.w1200 {
	width:1200px;
	margin-left:auto;
	margin-right:auto
}
#container_index .title h2{
    font-weight: 700;
    font-size: 50px;
}
#container_index .title h2 p{
    color: #686868;
    font-size: 25px;
    font-weight: 600;
}
#container_index .title span{
	display: block;
	font-size:18px;
	color:#2e2e2e;
	margin-top: 30px;
}
#container_index .title span.st2{
	font-size:17px;
	/*width: 50%;*/
	margin: 30px auto;
	word-break: keep-all;
}
.cont {}
#program {
	background: #cbe2e2;
	position: relative;
}
#program:after{
	content:'';
	display:block;
	width:100%;
	height: 608px;
	background:url(../img/main/bg_prog.jpg) no-repeat;
	background-size:100%;
	position: absolute;
	top: 0;
	z-index: 1;
}
#program .cont {
    margin-top: 180px;
}
#program .title  *{
	color:#FFF !important
}
#program .cont ol{
    display: flex;
    justify-content: space-between;
}
#program .cont ol li{
    background: #FFF;
    width: 340px;
    height: 350px;
    padding: 60px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
}
#program .cont ol li:after{
	content:'';
	display:inline-block;
	position: absolute;
	right: -90px;
	width: 90px;
	background: url(../img/main/ico_next2.png) no-repeat center center;
	top: 0;
	bottom: 0;
}
#program .cont ol li:last-child:after{
	display:none
}
#program .cont ol li span.num{
	display: block;
	font-family: 'GmarketSansBold';
	color:#dee2e4;
	font-size: 70px;
	margin-top: -10px;
	position:relative
}
#program .cont ol li span.num:after{
	content:'';
	display:inline-block;
	position:absolute;
	right:0;
	top:0;
	width: 50%;
	height:90px;
}
#program .cont ol li:nth-child(1) span.num:after{
	background: url(../img/main/ico_ol01.png) no-repeat right center;
}
#program .cont ol li:nth-child(2) span.num:after{
	background: url(../img/main/ico_ol02.png) no-repeat right center;
}
#program .cont ol li:nth-child(3) span.num:after{
	background: url(../img/main/ico_ol03.png) no-repeat right center;
}
/*#program .cont ol li:nth-child(3){
	background:#f7918c;
}
#program .cont ol li:nth-child(3)  *{
	color:#FFF !important
}
#program .cont ol li:nth-child(3) span.num {
	color:#f9aaa7
}*/
#program .cont ol li .tit{font-size: 28px;font-weight: 600;margin-top: 15px;}
#program .cont ol li .tBox{margin-top: 15px;}
#program .cont ol li .tBox p{font-size: 17px;color: #2b3738;line-height: 29px;padding-left: 16px;background: url(../img/main/ico_dot.png) no-repeat left 13px;}
.companyList {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 120px;
}
.ceoBox {
    display: flex;
    justify-content: center;
    padding-top: 35px;
}
.ceoBox img{
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.ceoBox .ceoT{
    padding: 25px;
    width: 25%;
}
.ceoBox .ceoT li{
    margin-bottom: 15px;
    font-size: 15px;
    padding-left: 11px;
    position: relative;
}
.ceoBox .ceoT li:before{
	content:'·';
	display:inline-block;
	position:absolute;
	left: 0;
	color: #177790;
	font-weight: 800;
}
/*인사말*/
.ceoBox2{padding-top: 35px; width:1000px; margin:0 auto; font-size:1.5em; line-height:1.6em; word-break:keep-all;}
.ceoBox2 h3{font-size:1.3em; margin-bottom:10px; line-height:1.7em;}
.ceoBox2 h3 strong{font-size:1.2em; color:#177790}
.ceoBox2 p{word-break:keep-all; padding:10px 0; position:relative;}
.ceoBox2 p:before{ content:""; display:block; width:40px; height:2px; background:#666; position:absolute; top:0; left:0;}

#program .cont ol li:nth-child(3) .tBox p{
	/*background:url(../img/main/ico_dot_w.png) no-repeat left 15px*/
	background:url(../img/main/ico_dot.png) no-repeat left 15p
}

#program .newBox{}
#program .newBox .titleBox{
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: #25373d;
    margin-top: 130px;
}
#program .newBox .titleBox:after{
	content:'';
	display:block;
	height: 100px;
	width:100%;
}
#program .newBox .titleBox p{
	position:relative;
	height: 90px;
	margin-bottom: 10px;
}
#program .newBox .titleBox p:before{
	content:'';
	display:inline-block;
	width:20%;
	position:absolute;
	left: 10%;
	top:0;
	bottom:0;
	background: url(../img/main/t_left.png) no-repeat center center;
	z-index: 1;
}
#program .newBox .titleBox p:after{
	content:'';
	display:inline-block;
	width:20%;
	position:absolute;
	right: 10%;
	top:0;
	bottom:0;
	background: url(../img/main/t_right.png) no-repeat center center;
}
#program .newBox ul{
   display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-lines: single; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
}
#program .newBox ul{
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	/* overflow:hidden; */
	z-index:2;
}
#program .newBox ul.st2{	
	-webkit-border-radius:0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;
	border-radius: 0 0 10px 10px;
	z-index:1;
}
#program .newBox ul li{
    width: 33.3333%;
    background: #56A3DB url(../img/main/ico_new06.png) no-repeat 280px 230px;
    padding: 60px;
    height: 340px;
	position:relative
}
#program .newBox ul.st2{
	-webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;
}
#program .newBox ul li.typ01{
	background: #FFF url(../img/main/ico_new01.png) no-repeat 280px 230px;
}
#program .newBox ul li.typ02{
	background: #85D1DE url(../img/main/ico_new02.png) no-repeat 287px 230px;
}
#program .newBox ul li.typ03{
	background: #99DAEE url(../img/main/ico_new03.png) no-repeat 280px 230px;
}
#program .newBox ul li.typ04{
    background: #6CD0DF url(../img/main/ico_new04.png) no-repeat 280px 230px;
    font-size: 27px;
    font-weight: 500;
    padding: 60px 50px;
    letter-spacing: -2px;
}
#program .newBox ul li.typ05{
	background: #6DBFE4 url(../img/main/ico_new05.png) no-repeat 280px 230px;
}

#program .newBox ul li:after{
	content:'';
	display:inline-block;
	position: absolute;
	width: 46px;
	height: 56px;
	top: 50%;
	right: -40px;
	z-index: 1;
	margin-top: -24px;
}

#program .newBox ul li.typ01:after{
	  width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-left: 60px solid #fff;
      border-bottom: 30px solid transparent;
}
#program .newBox ul li.typ02:after{
	  width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-left: 60px solid #85D1DE;
      border-bottom: 30px solid transparent;

}
#program .newBox ul li.typ03:after{
	margin-top: 0;
	top: inherit;
	left: 50%;
	bottom: -45px;
	right: inherit;
	margin-left: -30px;

      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-top: 60px solid #99DAEE;
	  z-index:999;

}
#program .newBox ul li.typ04:after{
      width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-right: 60px solid #6CD0DF;
      border-bottom: 30px solid transparent;


	left: -40px;
	right: inherit;
}
#program .newBox ul li.typ05:after{
      width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-right: 60px solid #6DBFE4;
      border-bottom: 30px solid transparent;

	right: inherit;
	left: -40px;
}

#program .newBox ul li .t{
    font-size: 24px;
    font-weight: 600;
    color: #3d3d3d;
}
#program .newBox ul li.typ04 .t{
    color: #FFF !important;
}
#program .newBox ul li .box{
    margin-top: 20px;
    width: 84%;
}
#program .newBox ul li .box span{
    display: inline-block;
    width: 50%;
    font-size: 17px;
    margin-bottom: 5px;
    color: #222;
    padding-left: 14px;
    background: url(../img/main/ico_dot.png) no-repeat left 9px;
}
#program .newBox ul li .box.st2{
	width:100%
}
#program .newBox ul li .box.st2 span{
	display:block
}

#program .newBox ul li .bigT{
    font-size: 50px;
    font-weight: 700;
    color: #FFF;
    letter-spacing: -2px;
}
.companyList li{
    margin: 0 23px;
    background: #FFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    height: 330px;
}
.companyList li img{width:100%}
.companyList li:nth-child(2),
.companyList li:nth-child(3) {
	margin-top: 60px;
}
.companyList li .tit{
    margin-top: 30px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}
.companyList li .txt{
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
    font-weight: 500;
    line-height: 1.5;
}
.aboutTab_list,
 .startTab_list{
    text-align: center;
    margin-top: 20px;
}
.aboutTab_list li,
 .startTab_list li{
    display: inline-block;
    position:relative;
    margin: 0 18px;
}
.aboutTab_list li:after,
 .startTab_list li:after{
    content:'';
    display:inline-block;
    position: absolute;
    width:1px;
    height: 25px;
    background: #b1b1b1;
    top: 10px;
    right: -19px;
}
.aboutTab_list li:last-child:after,
 .startTab_list li:last-child:after{
    content:'';
	display:none
}
.aboutTab_list li a,
.startTab_list li a{
    display: inline-block;
    padding: 10px 15px;
    position: relative;
    font-size: 20px;
    font-weight: 600;
    outline:0;
}
.aboutTab_list li a:before,
.startTab_list li a:before{
	content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
}

.aboutTab_list li a:hover,
.ui-state-active a{
	    color: #ffffff !important;
    background: #ed462d;
    border-radius: 50px;
}

/*
.aboutTab_list li a:hover:before,
.ui-state-active a:before{
	background:#177790;
	height: 2px;
}*/

#startup{
	background:#ebf1f1;
	position:relative;
	padding:100px 0 90px !important
}
#startup:before{
	content:'';
	display:none;
	position:absolute;
	z-index:1;
	width:100%;
	left:0;
	top: -520px;
	background: #ebf1f1;
	height: 540px;
}
#startup img{max-height: 80px; /*max-width: 50%;*/transition: all 0.5s;}
@media all and (max-width:600px){
#startup img{max-height: 75px; /*max-width: 50%;*/transition: all 0.5s;}
}
#youtubeWrap {background:#ebf1f1}
.youtubeBox {
    padding-top: 50px;
	position:relative;
	z-index:2;
}
.youtubeBox .titleBox{
    text-align: center;
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 50px;
}
.youtubeBox .titleBox p{
    font-size: 50px;
    line-height: 1;
}
.youtubeBox .titleBox .smTxt{
    font-weight: 400;
    font-size: 18px;
    color: #25373d;
    line-height: 60px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
	display:none
}
.swiper-button-next,
.swiper-button-prev{
	background:red
}
.swiper-button-next_new {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -22px;
    width: 36px;
    height: 55px;
    background: url(../img/main/ico_next.png) no-repeat;
    z-index: 999;
    cursor: pointer;
	
}
.swiper-button-prev_new {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -22px;
    width: 36px;
    height: 55px;
    background: url(../img/main/ico_pre.png) no-repeat;
    z-index: 999;
    cursor: pointer;
}

.youtube_slide .swiper-slide{
	width:100%;
	text-align: center;
}
.youtube_slide .swiper-slide iframe{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	overflow:hidden
}
.tab_slide .swiper-wrapper {
    flex-wrap: wrap;
    height: 240px;
    flex-direction: column;
}
.tab_slide .swiper-slide{
	text-align: center;
	font-size: 18px;
	height: calc((100% - 30px) / 2);

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	text-align: center;
}
.tab_slide .swiper-slide{

	background: #FFF;
	width:100%;
	height: 90px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.tabBox {text-align:center;margin-top: 60px;}

footer {
    background: #111b1f;
    padding: 60px 0;
}
footer address{
	font-family: 'Montserrat', 'Noto Sans KR' , sans-serif;
    color: #b4b4b4;
    font-size: 14px;
}
footer h1{
    float: left;
    display: inline-block;
    margin-right: 20px;
}
footer h1 img{}
footer .ftop{
   /* display: inline-block;
    float: left;*/
    line-height: 28px;
}
footer .ftop span{
	margin-right:13px
}
footer .foot_text{
    padding-top: 60px;
}
footer .foot_text p{
    line-height: 1.5;
    letter-spacing: -.5px;
    margin-bottom: 4px;
}
footer .foot_text p span{
    display: inline-block;
    margin-right: 10px;
}
footer .foot_text p span{
    display: inline-block;
    margin-right: 10px;
}

footer .copyright {text-align:left;color: #b6b6b6;font-size: 14px;font-weight: 400 !important;}
.pcVer {display:block}
.mobVer {display:none}

@media all and (max-width:1200px){
	.w1200 {
		width:96%;
	}
	.companyList {
    flex-wrap: wrap;
    margin-top: 50px;
}
	.companyList li {margin:20px auto}
	.companyList li:nth-child(2), .companyList li:nth-child(3) {margin-top:20px}
}



/*CENTER*/
#center{
	text-align:center;
    margin: 30px auto;
	background:#fff;
	border-radius:10px;
	overflow:hidden;
	padding:40px 0;
	box-shadow: 0px 0px 10px 10px #e3e3e3;
}


}
#center .nav-tabs{border:0; text-align:center;}
#center .nav-tabs li{ line-height:40px; border:0; border-radius:10px; display:inline-block; float:none;}
#center .nav-tabs>li a{margin:0; background:none; border:0; font-size:20px; color:#666; font-weight:600;}
/*#center .nav-tabs li a:after{content:""; display:inline-block; width:1px; height:15px; background:#ddd; vertical-align:middle; margin-left:30px;}
#center .nav-tabs li:last-child a:after{display:none;}*/

#center .nav-tabs>li.active>a,
#center .nav-tabs>li.active>a:focus,
#center .nav-tabs>li.active>a:hover{ margin:0; border:0; color:#ed462d !important; background:none;}


#center .tab-content{padding:40px; width:100%;}
#center .tab-content:after{content:""; display:inline-block; clear:both;}
#center .tab-content .img{ width:100%; height:auto; min-height:300px; overflow:hidden; float:left; background:#ffffff; border-radius:10px; border:1px solid #E3E3E3;}
#center .tab-content #product2-1 .img,#center .tab-content #product2-2 .img{ margin-bottom: 20px; }
#center .tab-content #product1-2 .img{ 
    width: 50%;
    height: auto;
    min-height: 300px;
    overflow: hidden;
    float: left;
    border-radius: 0px;  border: none; background: #ffffff;; }
#center .tab-content dl{ float:left; text-align:left; width:calc(100% - 300px); padding-left:20px;}
#center .tab-content #product1-1 dl, #center .tab-content #product1-3 dl{ clear:both; width:100%; padding-left:0;}
#center .tab-content #product1-1 dl dd p:not(.semi_title):before, #center .tab-content #product1-2 dl dt:before, #center .tab-content #product1-3 dl dt:before,#center .tab-content #product2-2 dl dt:before, #center .tab-content #product2-1 dl dt:before{ content:'';
  display:inline-block;
  width:8px;
  height:2px;
  margin:-5px 10px auto auto;
  vertical-align:middle;
  background:#ed462d;
}
#center .tab-content dl dt{font-size:30px; margin-bottom:20px;}
#center .tab-content dl dt span{font-size:20px; opacity:0.8;}
#center .tab-content dl dd{font-size:16px; line-height:25px;}
#center .tab-content dl dd span{color:#ed462d;}
#center .tab-content dl dd p{margin-bottom:10px;    word-break: keep-all;}
#center .tab-content dl dd.addr{font-size:12px; color:#999; margin-top:10px;margin-bottom:0}

#center .tab-content .tab_table { width:100%;overflow:auto; margin-bottom: 25px; }
#center .tab-content .tab_table table {white-space:nowrap;border-collapse:collapse;    width: 100%;  line-height: 20pt;    font-size: 10pt; border-top: 2px solid #555; }
#center .tab-content .tab_table table th,#center .tab-content  .tab_table table td {border-bottom: 2px solid #ececec;    text-align: center;}
/*연혁*/
#history{font-size:15px; display:flex; justify-content:center; margin: 120px auto; border-top:1px solid #ddd; padding:20px 0;}
#history dl{ margin:0 20px;}
#history dl dt:before{content:""; display:block; width:20px; height:20px; border-radius:50%; border:5px solid #177790; background:#fff; margin-left:20px; margin-bottom:10px;}
#history dl dt{ font-size:24px; float:left; color:#177790; margin-top:-30px;}
#history dl dd{margin-left:90px; line-height:1.8em;}
#history dl dd strong{margin-right:5px;}


.inr{position:relative; width:1200px; margin:0 auto;}
.inr.v2{position:relative; width:1300px; margin:0 auto;}
.inr:after{content:''; display:block; clear:both;}

.box_img{margin:0 0 50px; width:100%; height:0; padding-bottom:35%; box-shadow: 2.868px 4.096px 16px 4px rgba(0, 0, 0, 0.07);}
.box_img.history{background:url(../img/sub/img_history01.jpg)no-repeat center; background-size:cover !important;}
.box.history{position:relative; margin:50px 0 50px;}
.box.history > h3{font-size:26px; font-weight:300; color:#333; line-height:1.4em;}
.box.history > h3 .txt_blue{font-weight:600;}
.box.history > span{display:inline-block; position:absolute; top:40px; left:50%; width:2px; height:100%; background:#eee;}
.box.history > ul{width:100%;}
.box.history > ul:after{content:''; display:block; clear:both;}
.box.history > ul > li{position:relative; content:''; margin:0 0 50px; padding:0; width:50%; border:none; transition:all 0.3s ease;}
.box.history > ul > li.active{opacity:1;  transform:translateY(0px); transition:all 0.3s ease;}
.box.history > ul > li.active em:after{background:#273069;}
.box.history > ul > li > em{position:relative; display:block; font-style:normal; font-size:40px; font-weight:800; color:#333; line-height:1.6em;}
.box.history > ul > li > em:after{content:''; position:absolute; top:30px;; width:12px; height:12px; background:#177790; border-radius:50px;}
.box.history > ul > li:nth-child(even) > em:after{margin-left:-5px; left:0;}
.box.history > ul > li:nth-child(odd) > em:after{margin-right:-6px; right:0;}
.box.history > ul > li > ul{display:block;}
.box.history > ul > li > ul > li{display:block;}
.box.history > ul > li > ul > li > p{position:relative; display:inline-block; padding:0 0 0 10px;font-size:16px; font-weight:400; color:#333; line-height:1.7em; word-break:keep-all;}
.box.history > ul > li > ul > li > p:before{content:''; position:absolute; top:13px; left:0; width:4px; height:1px; background:#333;}
.box.history > ul > li > .area_img.v1{margin:20px 38px 0 0;}
.box.history > ul > li > .area_img.v2{margin:20px 38px 0 45px; }
.box.history > ul > li:nth-child(even){float:right; margin-left:50%;}
.box.history > ul > li:nth-child(even) > em{padding:0 0 5px 38px;}
.box.history > ul > li:nth-child(even) > ul{padding:0 0 0 38px;}
.box.history > ul > li:nth-child(odd){float:left; margin-right:50%; text-align:right;}
.box.history > ul > li:nth-child(odd) > em{padding:0 38px 5px 0;}
.box.history > ul > li:nth-child(odd) > ul{padding:0 38px 0 0;}
.box.history #historyLine{display:block; width:2px; height:100%; background:#177790;}
.txt_blue{color:#273069; font-weight:400;}

@media (max-width:850px) {
	.box.history > span{left:0; top:35px;}
	.box.history > ul{margin:50px 0 0;}
	.box.history > ul > li{width:100%; margin:0 0 30px;}
	.box.history > ul > li > em{font-size:32px;}
	.box.history > ul > li > em:after{top:25px;}
	.box.history > ul > li:nth-child(even){float:left; margin-left:0;}
	.box.history > ul > li:nth-child(odd){text-align:left;}
	.box.history > ul > li:nth-child(odd) > em{padding:0 0 5px 38px;}
	.box.history > ul > li:nth-child(odd) > em:after{right:unset; left:-5px;}
	.box.history > ul > li:nth-child(odd) > ul{padding:0 0 0 38px;}
	.box.history > ul > li > .area_img.v1{margin:20px 0 0 38px;}
}
@media (max-width:550px) {
	.box_img{margin:0 0 30px; padding-bottom:45%;}
	.box.history > ul{margin:30px 0 0;}
	.box.history > ul > li:nth-child(even) > em{padding:0 0 5px 20px;}
	.box.history > ul > li:nth-child(even) > ul{padding:0 0 0 20px;}
	.box.history > ul > li:nth-child(odd) > em{padding:0 0 5px 20px;}
	.box.history > ul > li:nth-child(odd) > ul{padding:0 0 0 20px;}
	.box.history > ul > li > .area_img.v1,
	.box.history > ul > li > .area_img.v2{margin:20px 0 0 20px;}
	.box.history > ul > li > em:after{top:20px;}
}
@media (max-width:450px) {
	.box.history > h3{font-size:22px;}
	.box.history > ul > li > .area_img{width:80%;}
	.box.history > ul > li > .area_img img{max-width:100%;}
}