@charset "utf-8";

.main-gall-latest .img-gallery-item{ position:relative; width:100%; height:0; overflow:hidden; padding-bottom:65%; }
.main-gall-latest .img-gallery-item .img-item { position:absolute; top:0; left:0; width:100%; height:100%; }
.main-gall-latest{ position:relative; }
.main-gall-latest .owl-theme .owl-dots{ position:absolute; bottom:0 !important; right:5px !important; }
.main-gall-latest .owl-theme .owl-dots { text-align:center; -webkit-tap-highlight-color:transparent; }
.main-gall-latest .owl-theme .owl-dots .owl-dot{ display:inline-block; zoom:1; *display:inline; }

.gallery-more{ text-align:right; }
.gallery-more a{ display:inline-block; margin-top:10px; font-size:12px; font-family:"dotum"; color:#888; }
.gallery-more a:hover{ background-color:none !important; }

/*
<section id="main">을 먼저 넣은 후 적용을해야 함 </section>
*/
#main .inner{ width: 1260px; margin: 0 auto; }
#main .con01{ padding-top: 100px; padding-bottom: 130px; }
#main .con01 ul:after{ content: ""; display: table; clear: both; }
#main .con01 ul > li{ float: left; width: 31.333333333%; margin-right: 3%; transform: translate(0,40px); opacity: 0; transition: 0.8s; }
#main .con01.on ul > li{ opacity: 1; transform: translate(0,0);}
#main .con01.on ul > li:nth-child(2){ transition-delay: 0.3s; }
#main .con01.on ul > li:nth-child(3){ transition-delay: 0.6s; }
#main .con01 ul > li:last-child{ margin-right: 0; }
#main .con01 ul > li .img_box{ overflow: hidden; transition: 1s; }
#main .con01 ul > li .img_box img{ width: 100%; display: block; transition: 1s; }
#main .con01 ul > li a:hover .img_box{ box-shadow: 15px 15px 20px rgba(0,0,0,0.2); }
#main .con01 ul > li a:hover .img_box img{ transform: scale(1.1); }
#main .con01 ul > li .text_box{ padding-top: 40px; }
#main .con01 ul > li .text_box span{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.5px; color:#222; margin-bottom: 15px; }
#main .con01 ul > li .text_box strong{ display: block; font-size: 25px; line-height: 46px; letter-spacing: -1px; color: #222222; word-break: keep-all; white-space: normal; height: 92px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#main .con01 ul > li .text_box p{ font-size: 16px; font-weight: 400; letter-spacing: -1px; color:#222222; line-height: 34px; word-break: keep-all; white-space: normal; margin-top: 10px; overflow: hidden; height: 102px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

@media (max-width:1280px){
  #main .inner{ width: 100%; padding: 0 40px; }  
}
@media (max-width:1216px){
  #main .con01 ul > li .text_box strong{ font-size: 20px; line-height: 40px; height: 80px; }
  #main .con01 ul > li .text_box p{ font-size: 14px; line-height: 32px; height: 96px; }
}
@media (max-width:800px){
  #main .con01 ul > li .text_box strong{ font-size: 18px; line-height: 36px; }
  #main .con01 ul > li .text_box p{ margin-top: 0; }
}
@media (max-width:640px){
  #main .con01{ padding: 70px 0; }
  #main .con01 ul > li{ width: 100%; max-width: 396px; margin: 0 auto; margin-bottom: 40px; float: none; }
  #main .con01 ul > li:last-child{ margin: 0 auto; }
}