@charset "utf-8";
.is-pc .at-body { padding: 0;}
.main { color: #333; font-size: 17px;}
.main p { margin: 0; word-break:keep-all; ;}
.main article { padding: 80px 0 80px; }
.main article .title { padding: 0 10px 40px; text-align: center;}
.main article .title h3 { padding: 0 0 25px; font-size: 35px; font-weight: 500; }
.main article .title h3 b { font-weight: 500; color: #8b0017;}
.main article .title h3 p { }
.main a { color:inherit;  }

@media (max-width:991px){
    .main article { padding: 70px 0 40px; }
}
@media (max-width:768px){
    .main article { padding: 60px 0 40px; }
    .main article .title { padding: 0 10px 30px;}
}
@media (max-width:576px){
    .main article { padding: 50px 0 30px; }
}



.main .about .content { margin: 0 -15px;}
.main .about .content .con_area { overflow: hidden; position: relative; flex:1; height: 370px; margin: 0 15px; border: 1px solid #bdc1c5; background-repeat: no-repeat; background-size: cover; background-position: center;}

.main .about .content .con_area .txt { position: relative; left: 0; top: 75%;; padding: 20px 30px; background: rgba(0,0,0,.6); color: #fff; transition: all .2s;}
.main .about .content .con_area .txt h4 { padding: 0 0 40px; font-size: 25px; font-weight: 500;}
.main .about .content .con_area .txt h4 span { display: block; padding: 10px 0 0; font-size: 15px; font-weight: 300;}
.main .about .content .con_area .txt p { font-size: 15px; font-weight: 300; }
.main .about .content .con_area .txt p span { display: block;}
.main .about .content .con_area .txt i { position: absolute; bottom: 20px; right: 30px; display: flex; justify-content: center; align-items: center;; width: 45px; height: 45px; border-radius: 50%; background: #8b0017; }
.main .about .content .con_area:nth-of-type(1) { background-image: url('/data/main/about_img1.jpg');}
.main .about .content .con_area:nth-of-type(2) { background-image: url('/data/main/about_img2.jpg');}
.main .about .content .con_area:nth-of-type(3) { background-image: url('/data/main/about_img3.jpg');}
.main .about .content .con_area:hover .txt { top: 55%;}
.main .about .content .con_area:hover { border-color: #8b0017;  }
.main .about .content .con_area:after { content:''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #8b0017; opacity:0; transition: all .2s; }
.main .about .content .con_area:hover:after { opacity:1;  }

@media (max-width:1199px){
    .main .about .content { margin: 0 -5px;}
    .main .about .content .con_area { margin: 0 5px;}
    .main .about .content .con_area .txt { padding: 20px 15px;}
    .main .about .content .con_area .txt h4 { padding: 0 0 30px; }
    .main .about .content .con_area .txt i { display: none;}
    .main .about .content .con_area:hover .txt { top: 58%; }
}
@media (max-width:991px){
    .main .about .content .con_area .txt { position: absolute; width: 100%; top: auto; bottom: 0; ; }
    .main .about .content .con_area .txt h4 { padding: 0 0 20px; font-size: 22px;}
    .main .about .content .con_area .txt p span { display: inline;}
}
@media (max-width:991px){
    .main .about .content .con_area .txt h4 { padding: 0 0 20px; font-size: 22px;}
    .main .about .content .con_area .txt p span { display: inline;}
}
@media (max-width:650px){
    .main .about .content { flex-direction: column; margin: -10px 0;}
    .main .about .content .con_area { flex:auto; margin: 10px 0; height: 300px;}
    .main .about .content .con_area:hover .txt { top: inherit; }
    .main .about .content .con_area .txt { padding: 20px 25px;}
    .main .about .content .con_area .txt h4 { padding: 0 0 15px;}
    .main .about .content .con_area .txt h4 span { display: inline-block; padding: 0 0 0 5px;}
}

@media (max-width:576px){
    .main .about .content { padding: 0 10px; }
}

@media (max-width:480px){
    .main .about .content { margin: -5px 0px;}
    .main .about .content .con_area {  margin: 5px 0; }
    .main .about .content .con_area .txt { padding: 20px 15px;}
    .main .about .content .con_area .txt h4 { font-size: 20px;}
}


.main .products { background: url('/data/main/product_bg.jpg') no-repeat center / cover; color: #fff;}
.main .products .content { padding: 0 0 80px; align-items: center;}
.main .products .content .con_area { display: flex;flex:1;  flex-direction:column; justify-content: center; align-items: center; height: 260px; border-right: 1px solid rgba(255,255,255,.5);  text-align: center; }
.main .products .content .con_area:first-of-type { border-left: 1px solid rgba(255,255,255,.5)}
.main .products .content .con_area .img { transition: all .3s cubic-bezier(0,-0.51,.29,-0.81);}
.main .products .content .con_area h4 { padding: 15px 0 0; font-size: 18px; font-weight: 400; transition: all .3s cubic-bezier(0,-0.51,.29,-0.81);}
.main .products .content .con_area p { opacity:0;  display: inline-block; margin: 0px 0 ; width: 100px; height: 0px; font-size: 14px; font-weight: 300; line-height: 35px; border-radius: 18px; border: 1px solid #fff; transition: all .2s .1s;}
.main .products .content .con_area:hover .img,
.main .products .content .con_area:hover h4 { transform: rotateY(360deg);}



@media (max-width:768px){
    .main .products .content { padding: 0 0 50px;}
}

@media (min-width:769px){
    .main .products .content .con_area:hover p { opacity:1;  margin: 20px 0 ; height: 35px; }
}
@media (max-width:768px){
    .main .products { position: relative; padding-bottom: 0;}
    .main .products:after { content:''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4);}
    .main .products .title { position: relative; z-index: 5;}
    .main .products .content { flex-wrap:wrap; padding: 0;}
    .main .products .content .con_area {  flex:auto; position: relative; z-index: 5; width: 50%; height: 190px; border-bottom: 1px solid rgba(255,255,255,.5);}
    .main .products .content .con_area:nth-of-type(1),
    .main .products .content .con_area:nth-of-type(2) { border-top: 1px solid rgba(255,255,255,.5);}
}

.main .contact {}

.main .contact .content .map { overflow:hidden; flex:29;}
.main .contact .content .map .root_daum_roughmap { padding: 0; width: 100%; }
.main .contact .content .info { flex:21; padding: 80px  0 0 50px; background: #f9f9f9 url('/data/main/contact_bg.png') no-repeat right bottom ;  }
.main .contact .content .info dl { flex-wrap:wrap;}
.main .contact .content .info dl dt { margin: 0 0 20px; width: 50px; height: 50px; text-indent:-999999px; background: url('/data/main/ico_tel.png') no-repeat right center /cover; }
.main .contact .content .info dl dt:nth-of-type(2) {  background-image: url('/data/main/ico_fax.png');}
.main .contact .content .info dl dd { padding: 0 0 0 15px; width: calc(100% - 50px); height: 50px; font-size: 35px; font-weight: 700; line-height: 50px; color: #8b0017;}
.main .contact .content .info dl dd:nth-of-type(2) { color: #555555;}
.main .contact .content .info p { padding: 0 0 12px; font-size: 20px; font-weight: 500; }

@media (max-width:1199px){
    .main .contact .content .map { flex:25;}
    .main .contact .content .info { padding: 80px 0 0 20px;}
}
@media (max-width:991px){
    .main .contact .content { flex-direction:column; }
    .main .contact .content .map { flex:inherit; height: 400px;}
    .main .contact .content .info { flex:inherit;  padding: 40px 20px;}
}
@media (max-width:768px){
    .main .contact { padding-bottom: 0;}
    .main .contact .content .map {  height: 350px;}
}

@media (max-width:576px){
    .main .contact .content .map {  height: 300px;}
    .main .contact .content .info { padding: 30px 20px; }
    .main .contact .content .info dl dt { width: 40px; height: 40px;  }
    .main .contact .content .info dl dd { width: calc(100% - 40px); height: 40px; font-size: 32px; line-height: 40px;}
    .main .contact .content .info dl dt:nth-of-type(2) { margin: 0 0 20px ;}
}

@media (min-width:481px){
    .main .contact .content .info dl dt:nth-of-type(2) { margin: 0 0 35px; }
}

@media (max-width:480px){
    .main .contact .content .map {  height: 300px;}
    .main .contact .content .info { padding: 30px 20px; background-size: 30%; }
    .main .contact .content .info dl dt {  margin: 0 0 15px;  }
    .main .contact .content .info dl dd { padding: 0 0 0 10px;}
    .main .contact .content .info p { padding: 0 0 10px; font-size: 17px;}
}

@media (max-width:400px){
    .main .contact .content .info { padding: 30px 10px; }
    .main .contact .content .info dl dt { margin: 0 0 15px; font-size: 28px; }
    .main .contact .content .info dl dd { }
    .main .contact .content .info p { padding: 0 0 10px; font-size: 17px;}
}