@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* 비주얼 */
.area_visual{position:relative; height:900px; overflow:hidden;}
.area_visual .visual_txt{position:absolute; top:320px; left:50%; width:100%; max-width:1200px; margin-left:-600px; text-align:center; z-index:20;}
.area_visual .visual_txt > span{display:block; padding-bottom:50px; font-family:'Lato', sans-serif; color:#fff; font-weight:300; font-size:30px;}
.area_visual .visual_txt p{font-size:46px; color:#fff; font-weight:200;}
.area_visual .list{height:900px;}
.area_visual .list li{height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.area_visual .visual_txt > span,
.area_visual .visual_txt p{opacity:0;}
.area_visual .show{opacity:1 !important; transform:translateX(0px) !important;}

/* products */
.products{position:relative; padding:100px 0;}
.products:before{content:''; display:block; position:absolute; top:0; right:0; width:82.5%; height:100%; background-color:#f8f8f8; z-index:-1;}
.products.color_bg:before{background-color:#e2eeef;}
.products .products_txt{padding-left:60px; padding-bottom:60px;}
.products .products_txt span{font-size:18px; color:#059ca9; font-family:'Montserrat', sans-serif; font-weight:500;}
.products .products_txt h2{font-size:36px; color:#111; font-family:'Montserrat', sans-serif; font-weight:600;}
.list_wrap{position:relative; width:100%; max-width:1700px; margin: 0 auto; font-size: 0;}
.list_wrap .duct_list{overflow:hidden; width:100%; margin-right: -20px;}
.list_wrap .duct_list .list{float: left; padding:0 20px;}
.list_wrap .duct_list .list a{position:relative; display:block; width: 100%; height: 100%; transition:all 0.3s ease 0s; background:#e1e1e1;}
.list_wrap .duct_list .list a .list_txt{opacity:0; position:absolute; bottom:-60px; width:100%; height:60px; line-height:60px; background:rgba(0,0,0,0.5); text-align:center; font-size:20px; color:#fff; font-family:'Lato', sans-serif; transition:all 0.5s ease 0.3s;}
.list_wrap .duct_list .list a:hover .list_txt{opacity:1; bottom:0; transition:all 0.5s ease 0.3s;}
.list_wrap .duct_list .list a .img{display:block; width:100%; height:330px; overflow:hidden;}
.list_wrap .duct_list .list a .img img{height:100%; width:100%;}
.list_wrap .duct_list .slick-arrow{position:absolute; top:-100px; right:250px; width:40px; height:40px; background-color:#000; border-radius:50%;}
.list_wrap .duct_list .slick-arrow.slick-prev{margin-right:50px;}
.list_wrap .duct_list .slick-arrow.slick-prev:before{content:''; display:block; width:14px; height:8px; margin:0 auto; background:url(/images/main/icon_prev.png)no-repeat 50% 50%; background-size:contain;}
.list_wrap .duct_list .slick-arrow.slick-next:before{content:''; display:block; width:14px; height:8px; margin:0 auto; background:url(/images/main/icon_prev.png)no-repeat 50% 50%; background-size:contain; transform:rotate(-180deg);}

.banner_area{padding:60px 0 30px;}
.banner_area ul{font-size:0;}
.banner_area ul li{display:inline-block; width:20%; margin-bottom:35px; text-align:center;}

.no_list{position:relative; max-width:1700px; width:100%; height:330px; margin:0 auto; text-align:center; background:#eee; border:1px solid #ccc; box-sizing:border-box;}
.no_list p{line-height:330px; font-size:16px; color:#999; font-weight:300;}

@media all and (max-width:1700px){
    .products{padding:60px 0;}
    .list_wrap{width:96%;}
}

@media all and (max-width:1400px){
    .list_wrap .duct_list .list a .img{height:280px;}
}

@media all and (max-width:1200px){
    .area_visual .visual_txt{width:96%; margin-left:-48%;}
    .list_wrap .duct_list .list a .img{height:260px;}
    .list_wrap .duct_list .slick-arrow{right:100px;}
    .banner_area .bx-wrapper{max-width:100% !important;}
}

@media all and (max-width:980px){
    .area_visual{height:700px;}
    .area_visual .list{height:700px;}
    .area_visual .visual_txt{top:280px;}
    .area_visual .visual_txt > span{padding-bottom:30px; font-size:26px;}
    .area_visual .visual_txt p{font-size:36px;}
    .list_wrap .duct_list .list a .img{height:210px;}
}

@media all and (max-width:900px){
    .list_wrap .duct_list .slick-arrow{right:60px;}
}

@media all and (max-width:780px){
    .area_visual,
    .area_visual .list{height:560px;}
    .area_visual .visual_txt{top:210px;}
    .area_visual .visual_txt > span{font-size:22px;}
    .area_visual .visual_txt p{font-size:32px;}
}

@media all and (max-width:680px){
    .area_visual,
    .area_visual .list{height:480px;}
    .area_visual .visual_txt{top:170px;}
}

@media all and (max-width:640px){
    .products{padding:40px 0;}
    .products:before{width:100%;}
    .products .products_txt{padding-left:0; padding-bottom:40px;}
    .products .products_txt span{font-size:14px;}
    .products .products_txt h2{font-size:26px;}
    .list_wrap .duct_list .slick-arrow{right:0; top:-80px; width:30px; height:30px;}
    .list_wrap .duct_list .slick-arrow.slick-prev{margin-right:40px;}
    .area_visual,
    .area_visual .list{height:420px;}
    .area_visual .visual_txt{top:145px;}
    .area_visual .visual_txt > span{padding-bottom:15px; font-size:18px;}
    .area_visual .visual_txt p{font-size:26px;}
    
    .banner_area ul li{width:calc(100% / 3);}
}

@media all and (max-width:480px){
    .area_visual,
    .area_visual .list{height:320px;}
    .area_visual .visual_txt{top:120px;}
    .area_visual .visual_txt > span{font-size:14px;}
    .area_visual .visual_txt p{font-size:20px;}
    .products .products_txt h2{font-size:20px;}
}

@media all and (max-width:400px){
    .list_wrap .duct_list .list a .img{height:250px;}
}