@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

.sub_title{text-align: center; margin: 80px 0; font-size: 2rem; font-weight: 600;}
.sub_title::before{content: ''; height: 3px; width: 80px; margin: 0 auto 10px; background-color: #EF3139; display: block;}
.sub_tit{font-weight: 600; font-size: 1.5em; margin-top: 50px; margin-bottom: 10px; position: relative; z-index: 2; display: inline-block; padding: 0 2px;}
/*.sub_tit::before{content: '';display: block; position: absolute; bottom: 3px; left: 0; background-color: #EF3139; width: 100%; height: 7px; z-index: -1}*/
.intro{padding-bottom: 80px;}
.sub_exp{text-align: center; font-size: 2em; word-break: keep-all;}
.sub_exp b{color: #e30613}

@media all and (max-width:999px){
	.sub_title{font-size: 1.75em;}
	.sub_exp{font-size: 1.75em;}
}
@media all and (max-width:480px){
	.sub_exp{font-size: 1.5em;}
}

/* tabs */
.tabs{margin: 60px 0; display: flex; justify-content: center;}
.tabs li{}
.tabs li.on{}
.tabs li a{padding: 10px 40px; border: 1px solid #dedede;}
.tabs li.on a{background-color: #1fb96d; color: #fff; border: 1px solid #1fb96d;}


/* intro1 */ 
.intro1{display: flex; justify-content: space-between;}
.intro1 .text{width: 38vw; max-width: 660px;}
.intro1 .img{width: 57%; order: -1;}
.intro1 .img img{max-width: 100%;}
.intro1 .img dl{padding: 30px; padding-bottom: 15px; background-color: #f8f8f8; box-shadow: 2px 3px 15px rgba(0,0,0,0.05); width: 90%; border: 1px solid #eee; margin-top: 30px; text-align: left;}
.intro1 .img dl dt{font-weight: 600; width: 15%; display: inline-block; vertical-align:top; margin-bottom: 5px;}
.intro1 .img dl dd{width: 80%; display: inline-block; vertical-align:top; line-height: 1.4em; font-weight: 300; margin-bottom: 15px; word-break: keep-all;}
.intro1 .text h4{margin-bottom: 20px;}
.intro1 .text h3{font-size: 36px; margin-bottom: 30px; color: #212121; letter-spacing: -0.05em; font-weight: 500;}
.intro1 .text h3 span{color: #e30613}
.intro .text .stxt1{font-size: 16px; font-weight: 300; line-height: 1.8em; margin-bottom: 1em; color: #666; letter-spacing: -0.03em; word-break: keep-all;}
.intro1 .text .stxt1.name{margin-top: 2em; color: #555; font-weight: 500; font-size: 15px;}
.intro1 .text .stxt1.name span{color: #000; font-size: 18px; font-weight: 600;}

@media all and (max-width:1280px){
	.intro1{flex-direction: column;}
	.intro1 .img{order: -1; width: 100%; text-align: center;}
	.intro1 .text{width: 100%; padding: 30px; margin-top: 20px;}
	.intro .text .stxt1 br{display: none;}
	.intro1 .img dl{width: 100%;}
}
@media all and (max-width:999px){
	.intro1 .img dl dt{width: 20%}
	.intro1 .img dl dd{width: calc(78% - 10px); margin-left: 10px;}
}
@media all and (max-width:640px){
	.intro1 .text{padding: 15px;}
	.intro1 .text h3{font-size: 22px;}
	.intro .text .stxt1{margin-bottom: .75em;}
}


/* intro2 */
.intro2{}
.intro2 .ci_box{display: flex; justify-content: center; align-items: center; background-color: #f8f8f8; border: 1px solid #dedede; padding: 100px 0; margin-top: 20px;}
.intro2 .ci_box img{margin: 0 30px; max-width: 100%;}
.intro2 .btn_box{display: flex; justify-content: center; margin-top: 35px; margin-bottom: 80px;}
.intro2 .btn_box a{display: block; border: 1px solid #ccc; margin: 0 10px; color: #333; padding: 8px 20px;}
.intro2 .btn_box a i{margin-left: 15px;}
.intro2 .color{margin-top: 30px;}
.intro2 .color ul{display: flex; justify-content: center;}
.intro2 .color ul li{padding: 0 30px;}
.intro2 .color ul li:nth-child(1){border-right: 1px solid #dedede;}
.intro2 .color ul li .bg{width: 140px; height: 140px; margin-bottom: 15px;}
.intro2 .color ul li:nth-child(1) .bg{background-color: #2dbdb6;}
.intro2 .color ul li:nth-child(2) .bg{background-color: #24958a;}
.intro2 .color ul li:nth-child(3) .bg{background-color: #218c81;}
.intro2 .color ul li .txt{}
.intro2 .color ul li .txt h3{font-size: 1.125em;}
.intro2 .color ul li .txt h4{font-weight: 400; color: #333; margin-bottom: 15px;}
.intro2 .color ul li .txt p{color: #666; font-weight: 300;}

@media all and (max-width:999px){
	.intro2 .ci_box{flex-direction: column; padding: 50px 0;}
	.intro2 .ci_box img{margin: 30px 0; max-width: 80%;}
}
@media all and (max-width:640px){
	.intro2 .ci_box{padding: 30px 0;}
	.intro2 .color ul{flex-direction: column;}
	.intro2 .color ul li{margin-bottom: 40px; padding: 0;}
	.intro2 .color ul li .bg{width: 100%;}
	.intro2 .btn_box{flex-direction: column; margin-top: 20px; margin-bottom: 60px;}
	.intro2 .btn_box a{margin: 6px 0; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center;}
}



/*연혁*/
#history{padding-bottom: 6em;padding: 60px 0 100px; background-color: #fafafa; border-top: 1px solid #eee; margin-top: 60px;}
/*
.history-top { text-align: center; color:#fff; width: 100%; height: 350px; position: relative; display: table;
                    background: url("/images/sub/history_top.png") no-repeat center; background-size: cover; }
.history-top.emp3-t {  background: url("/images/sub/emp3-bg.png") no-repeat center; } 
*/
.history-top{text-align: center; margin-bottom: 60px;}
.history-top dl { display: table-cell; vertical-align: middle;}
.history-top dl dt { font-size: 2.25em; font-weight: 600; }
.history-top dl dd { font-size: 1.25em; }
.history-top p { position: absolute; bottom:-0.2em; left:0; width: 100%; line-height: 1.0em; opacity: 0.4;
                      font-size: 6vw; font-family: 'Montserrat'; letter-spacing: 0.25em; font-weight: 900; }


@media all and (max-width:1480px) {
/*  .history-top { height: 30vw; }*/
}

@media all and (max-width:999px) {
  .history-top {text-align: left;}
  .history-top p { font-size: 9vw; }
	#history{padding: 40px 0 80px; margin-top: 40px;}
}

@media all and (max-width:568px) {
/*  .history-top { height: auto; padding: 15% 5%;  }*/
  .history-top dl dt { font-size: 1.5em; }
  .history-top dl dd { font-size: 1em; }
  .history-top p { font-size: 11vw; }
}

.his_wrap {overflow:hidden; box-sizing:border-box; position:relative; }
.his_wrap:before{content:""; position:absolute; top:0; left:50%; margin-left:-0.5px; width:1px; height:100%; background:#ddd; z-index:1;}

.his_wrap .his_bx{box-sizing:border-box; padding-top:5em; position:relative; overflow:hidden;}
.his_wrap .his_bx .in{clip: rect(auto, auto, auto, auto); top:0; left:0; width:100%; height:100%; position:absolute; z-index:0; overflow:hidden;}
.his_wrap .his_bx .in .bg{position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background-repeat:no-repeat; background-position:center center; transform: translateZ(0); will-change: transform; }
.his_wrap .his_bt{padding-bottom:8em}

.his_wrap li {position:relative; z-index:2;  width:100%; float:right; text-align:left; padding:0 20px 3.5em; box-sizing:Border-box; display: flex; align-items: center;}
.his_wrap li+li{clear:both;}

.his_wrap li .t { position:relative; font-size:32px;  /* margin-bottom:20px; */ color:#218c81; font-weight: 600; line-height: 1.4em; width: 50%; padding: 0 20px;}
.his_wrap li:nth-child(odd) .t{order: 2;}
.his_wrap li .t:before {content:""; position:absolute; top:0.45em; left:-10px; width:20px; height:20px; border-radius:100%; background:#218c81; border:6px solid #dcffda;}
.his_wrap li .c { font-size: 1em; line-height: 1.8em; width: 50%; padding: 0 20px;}
.his_wrap li .c dt{ width:40px; display:inline-block; vertical-align:top; margin-bottom:8px; color:#212121; font-weight: 700; line-height: 1.5em; float: right}
.his_wrap li:nth-child(even) .c dt{float: left;}
.his_wrap li .c dd{width:calc(100% - 60px); display:inline-block; vertical-align:top; margin-bottom:8px; line-height: 1.5em; color: #666; font-weight: 300; text-align: right;}
.his_wrap li:nth-child(even) .c dd{text-align: left;}
.his_wrap li .c p { position: relative; margin-bottom:10px; padding: 0 15px; }
.his_wrap li .c p::before { content:''; width: 3px; height: 3px; background: #ff484c; position: absolute; left:0; top: 50%; margin-top: -1.8px; }

.his_wrap li:nth-of-type(2n) {float:left; text-align:right; }
.his_wrap li:nth-of-type(2n) .t:before{left:unset; right:-10px;}
.his_wrap li:nth-of-type(2n) dt{float:right; }
.his_wrap li:nth-of-type(2n) .c p::before { left: unset; right:0; }

@media all and (max-width:999px) {
	.his_wrap li{display: block;}
	.his_wrap li .t{margin-bottom: 20px; width: 100%;}
	.his_wrap li .t:before{left: -30px;}
	.his_wrap .his_bx{ padding-left:10px; padding-top: 3em;}
	.his_wrap:before{ margin-left:0; left:10px;  }
	.his_wrap li{ width:100%;}
  .his_wrap li .t { font-size: 28px; line-height: 1.4em;}
  .his_wrap li .t:before { top:0.35em;  }
	.his_wrap li .c{width: 100%;}
  .his_wrap li .c dt{ width:40px; float: left;}
  .his_wrap li .c dd{width:calc(100% - 40px); text-align: left;}

	.his_wrap li:nth-of-type(2n){float:right; text-align:left; }
	.his_wrap li:nth-of-type(2n) .t:before{left:-30px; right:inherit;}
	.his_wrap li:nth-of-type(2n) dt{float:left; }

	.his_wrap li:nth-of-type(2n) .c p::before { right:unset; left: 0;  }
}

@media all and (max-width:568px) {
/*  .history-top { padding: 12% 0; }*/
  .history-top {margin-bottom: 40px;}
	.history-top img{max-width: 116px;}
  .history-top h4 { font-size: 2.2em; }
}

/* intro3 */
.intro3{text-align: center;}
.intro3 .ideo{}
.intro3 .ideo h4{font-weight: 300; font-size: 1.25em; color: #666; margin-top: 5px;}
.intro3 .ideo h3{font-size: 2em; color: #1fb96d; line-height: 1.4em;}
.intro3 .ideo h3 span{color: #fff; text-shadow: -1px 0 #1fb96d, 0 1px #1fb96d, 1px 0 #1fb96d, 0 -1px #1fb96d; font-size: 1.125em;}
.intro3_bg{background-color: #f8f8f8; padding: 80px 0;}
.intro3_bg .sub_tit{text-align: center; margin-left:  auto;}
.intro3_bg .value{text-align: center; }
.intro3_bg .value .box{position: relative; margin-bottom: 80px; width: 100%; clear: both; overflow: hidden;}
.intro3_bg .value .box .bg{background-repeat: no-repeat; background-position: center; background-size: cover; height: 320px; width: 55%; max-width: 1400px; position: relative; float: left;}
.intro3_bg .value .box:nth-child(1) .bg{background-image: url(/images/sub/intro3_bg1.png);}
.intro3_bg .value .box:nth-child(2) .bg{background-image: url(/images/sub/intro3_bg2.png);}
.intro3_bg .value .box:nth-child(3) .bg{background-image: url(/images/sub/intro3_bg3.png);}
.intro3_bg .value .box:nth-child(4) .bg{background-image: url(/images/sub/intro3_bg4.png);}
.intro3_bg .value .box:nth-child(5) .bg{background-image: url(/images/sub/intro3_bg5.png);}
.intro3_bg .value .box .bg span{ color: rgba(255,255,255,0.75); font-size: 2em; font-weight: 600; line-height: 1em; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
.intro3_bg .value .box .txt{background-color: #fff; width: 55%; position: absolute; padding: 40px 50px; padding-bottom: 45px; box-shadow: 2px 3px 15px rgba(0,0,0,0.05); right: 0; top: 50%; transform: translateY(-50%); text-align: left; height: 75%; display: flex; flex-direction: column; justify-content: center;}

.intro3_bg .value .box:nth-child(even) .bg{float: right;}
.intro3_bg .value .box:nth-child(even) .txt{left: 0;}
.intro3_bg .value .box .txt h4{font-size: 1.5em; color: #000; word-break: keep-all; line-height: 1.3em;}
.intro3_bg .value .box .txt h4::after{content: '';display: block; width: 60px; height: 2px; background-color: #e30613; margin: 20px 0;}
.intro3_bg .value .box .txt h4 b{color: #e30613;}
.intro3_bg .value .box .txt h3{font-weight: 300; font-size: 1em; color: #666; margin-bottom: 5px; word-break: keep-all;}
.intro3_bg .value .box .txt h3 br{display: none;}
.intro3_bg .value .box .txt ul{margin-top: 20px;}
.intro3_bg .value .box .txt ul li{font-size: 1.125em; font-weight: 300; margin-bottom: 8px; color: #666; border-bottom: 1px dashed #dedede; padding-bottom: 4px;}

.sub_vis_wrap{width:100%; max-width:1600px; margin:0 auto; position:Relative; overflow:hidden; box-sizing:Border-box; }
.sub_vis_wrap .txt_in2{position:relative; z-index:3; margin-left:auto; margin-right:auto;  color:#FFF; padding:6.5em 4em;}
.sub_vis_wrap .txt_in2 .e{ font-family: 'GmarketSansLight'; font-size:2em; font-weight: 600;}
.sub_vis_wrap .txt_in2 .t{font-size:1.25em;}
.sub_vis_wrap .txt_in2 .line{width:40px; height:1px; background:#FFF; margin:1em auto; opacity:0.4;}
.sub_vis_wrap .txt_in2 .c{font-size:1em; color: rgba(255,255,255,0.8);}

.sub_vis_wrap .bg_in2{clip: rect(auto, auto, auto, auto); top:0; left:0; width:100%; height:100%; position:absolute; z-index:0; overflow:hidden;}
.sub_vis_wrap .bg2{position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background-repeat:no-repeat; background-position:center center; transform: translateZ(0); will-change: transform; background-size:cover;}

@media all and (max-width:999px){
	.sub_vis_wrap .txt_in2{padding:5em 2em;}
	.intro3_bg .value .box{margin-bottom: 60px;}
	.intro3_bg .value .box .bg{width: 100%; height: 240px;}
	.intro3_bg .value .box .bg span{font-size: 1.75em;}
	.intro3_bg .value .box .txt{position: static; transform: translateY(0); width: 100%; padding: 30px;}
	.intro3_bg .value .box .txt h4{font-size: 1.375em;}
}


/* intro5 */
.intro5{padding: 60px 0 100px;  margin-top: 60px; border-top: 1px solid #eee;}
.intro5 .img{text-align: center; padding-top: 40px;}
.intro5 .img.pc{}
.intro5 .img.mo{display: none;}
@media all and (max-width:780px){
	.intro5 .img{padding-top: 0%; margin-bottom: 8%;}
	.intro5 .img.pc{display: none;}
	.intro5 .img.mo{display: block;}
	.intro5 .img.mo img{width: 95%;}
}

/* intro6 */
#certList { overflow: hidden; text-align: center; max-width: 1600px; display: flex; flex-wrap: wrap;}
#certList li { float: left; width: calc((100% - 120px) / 4); margin-left: 40px; margin-bottom: 40px;  }
#certList li:nth-child(4n+1) { margin-left:0; }
#certList li .img { border: 1px solid #dedede; padding: 10px; background-color: #fff;}
#certList li img { max-width: 100%; border: 1px solid #f2f2f2; }
#certList li p { margin-top: 1em; font-size: 1em; font-weight: 300; color:#212121;  }


@media all and (max-width:1280px) {
  #certList li { width: calc((100% - 60px) / 4); margin-left: 20px; }
}

@media all and (max-width:976px) {
  #certList li { width: calc((100% - 40px) / 3);  }
  #certList li:nth-child(4n+1) { margin-left:20px; }
  #certList li:nth-child(3n+1) { margin-left:0; }
}

@media all and (max-width:640px) {
  #certList li { width: calc((100% - 20px) / 3); margin-left: 10px;  }
  #certList li:nth-child(4n+1) { margin-left:10px; }
  #certList li:nth-child(3n+1) { margin-left:0; }
}

@media all and (max-width:568px) {
  #certList li { width: calc(50% - 5px); margin-left: 10px !important; margin-bottom: 20px;  }
  #certList li:nth-child(odd) { margin-left: 0 !important; }
}


/* intro7 */
#sMap_info { background: #fff; display: table; table-layout: fixed; width: 90%; margin: 50px auto 80px; padding: 4% 5%;  position: relative; z-index: 999;} /*box-shadow: 1px 1px 3px rgba(0,0,0,0.1);*/
#sMap_info > div { display: table-cell; vertical-align: top; }
#sMap_info .tit { width: 25%; }
#sMap_info .tit h4 { font-size: 2rem; color:#212121;  font-family: 'Poppins'; line-height: 1.2em; }
#sMap_info .tit p { font-size: 1rem; margin-top: 0.5em;  }
#sMap_info .txt { font-size: 1rem; border-left: 1px solid #e5e5e5;  padding-left: 5%; padding-top: 0.2em;  }
#sMap_info .txt p + p { margin-top: 0.5em; }
#sMap_info .txt p { display: inline-block; width:100%; vertical-align: middle; }
#sMap_info .txt p::before { content:''; width: 18px; height: 22px; display: inline-block; vertical-align: middle; margin-right: 1em; opacity: 0.4;
                                        background-size: 100% auto; background-repeat; background-position: center; background-repeat: no-repeat; }
#sMap_info .txt p.add::before { background-image:url("/images/sub/ico_map.png"); }
#sMap_info .txt p.tel::before { background-image:url("/images/sub/ico_tel.png"); }
#sMap_info .txt p.fax::before { background-image:url("/images/sub/ico_fax.png"); }
#sMap_info .txt p.mail::before { background-image:url("/images/sub/ico_mail.png"); }


@media all and (max-width:976px) {
  #sMap .root_daum_roughmap .wrap_map  { height: 50vw !important;   }
  #sMap_info { margin-top: -8vw; }
  #sMap_info .tit { width: 30%; }
	#sMap_info .tit h4{font-size: 1.5rem;}
	#sMap_info .txt p{font-size: .875em;}
	#sMap_info{padding: 8% 6%;}
}

@media all and (max-width:767px) {
  #sMap_info,
  #sMap_info > div { display: block; }
  #sMap_info .tit { width: 100%; }
  #sMap_info .txt { padding-left:0; border-left:0; border-top: 1px solid #e5e5e5; padding-top: 5%; margin-top: 5%; }
  #sMap_info .txt p + p { margin-top: 0.3em; }

  #sMap_info .txt p::before { width: 15px; height: 18px; }
}