@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
.slick-list,.slick-track,.slick-slide{width:100%;height: 100%;position: relative;}
.section{width:100%;position: relative;}
.background{background-size: cover;background-position: center;}
h3{   font-family: 'Play', sans-serif;}
/*메인배너 : s*/
.main_bn{
    width:100%;height: 100vh;
    background-color: #ddd;
}
.main_bn_wrap{
    width:100%;height: 100%;
}
.main_tit{
    width:1240px;
    position: absolute;
    top:50%;left:50%;transform: translate(-50%,-50%);
    font-family: 'Play', sans-serif;
    text-align: center;
}
.main_tit .tit{
    position: relative;    
    display: inline-block;
}
.main_tit .tit::after{
    content:"";
    width:100%;
    height: 3px;
    background-color: #fff;
    position: absolute;bottom: 0;left: 0;
}
.main_tit .tit,
.main_tit .s_tit{
    overflow: hidden;
    color:#fff;
}
.main_tit .s_tit{
    margin-top: 5px;;
}
.main_tit h3{
    font-family: 'Play', sans-serif;
    font-size: 95px;
    transform: translateY(150%);
    line-height: 1;
}
.main_tit p{
    font-size: 29px;
    transform: translateY(100%);
}
.slick-current .main_tit h3,
.slick-current .main_tit p{
    transform: translateY(0);
    transition: .5s linear;
}
.main_controll{
    display: flex;
    width:95%;
    position: absolute;
    top:50%;left:50%;transform: translate(-50%,-50%);
    justify-content: space-between;
}
.main_controll i{
    font-size: 85px;
    cursor: pointer;
    color:#fff
}

.main_arrow:last-child{
    margin-left: 5px;
}

.main_news{
    width:1000px;
    position: absolute;
    bottom: 0px;right: 0px;
    background-color: #fff;
    display: flex;align-items: center;justify-content: space-between;
}
.main_latest{
    width:50%;padding:25px;
    display: flex;align-items: center;
}
.main_latest h3{font-size: 18px;padding-right: 15px;border-right: 1px solid #333;}
.main_latest ul{width:70%;}
.main_latest ul li{width:100%;padding-left:15px}
.main_latest ul li a{font-size: 16px;width:100%;display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.main_latest i{font-size: 20px;cursor: pointer;}

.main_dot{position: absolute;left:50%;transform: translateX(-50%);bottom: 150px;}
.main_dot ul{display: flex;align-items: center;}
.main_dot ul button{position: relative;border: none;font-size: 0;border-radius: 100%;background-color: transparent;width:25px;height: 25px;margin:0px 10px;border: 2px solid #fff;display: flex;align-items: center;justify-content: center;}
.main_dot ul .slick-active button::after{opacity: 1;}
.main_dot ul button::after{opacity: 0;;content: "";background-color: #fff;width:13px;height: 13px;border-radius: 100%;}


/*메인배너 : e*/

/*section area : s*/

.section .inner{width:1500px;margin:0 auto;position: relative;}
.area{padding:120px 0;}
.area_tit_wrap{display: flex;align-items: flex-end;justify-content: space-between;padding:0px 30px;}

.area_tit_ani{overflow: hidden;}
.area_tit_ani p{font-size: 38px;line-height: 1.3;transform: translateY(100%);transition: .7s ease;}
.area_tit_ani.on p{transform: translate(0);}
.area_tit_rt p{font-size: 18px;color:#787878}
.area_tit_rt a{display: inline-block;margin-top: 15px;font-size: 20px;}
.area_tit_rt a:hover i{animation: movearrow infinite .3s linear;}
@keyframes movearrow {
    0%{

    }
    100%{

    }
}

.area_contents{width:100%;height: 590px;margin-top: 40px;position: relative;overflow: hidden;}
.area_contents>ul{width:100%;display: flex;height: 100%;position: absolute;top: 0;left:0;background-image: url("../img/area_back.jpg");transition: .7s linear;z-index: 9999999999999;}
.area_contents>ul li{width:25%;height: 100%;cursor: pointer;border-right: 1px solid #fff;display: flex;flex-flow: row wrap;align-content: center;justify-content: center;}
.area_contents>ul li:last-child{border-right: none;}
.area_contents>ul li p{width:100%;text-align: center;font-size: 21px;color:#fff;}
.area_contents>ul li i{font-size: 130px;color:#fff;margin-bottom: 20px;}


.area_contents.on>ul{transform: translateY(-100%);opacity: 0;z-index: 999999;}

.area_tab ul{position: absolute;top:0;left: 0;width:100%;display: flex;z-index: 99999;}
.area_tab ul li{width:25%;padding:30px;color:#e3e3e3;border-bottom: 1px solid #e3e3e3;font-size: 18px;text-align:center;cursor: pointer;}
.area_tab ul li{transition: .5s linear;transform: translateY(0);background-color: rgba(0, 0, 0, 0.3);}
 .area_tab ul li.on{color:#fff;border-bottom: 1px solid #fff;transition-delay:0s;}

.area_con{position: absolute;width:100%;height: 100%;top:0;left: 0;display: flex;align-items: center;padding-left: 70px;display: none;}
.area_con.on{display: flex;}

.area_con_tit{color:#fff;}
.area_con_tit>i{font-size: 45px;}
.area_con_tit>p{font-size: 35px;line-height: 1.3;margin-top: 20px;}

.area_con_tit a{width:50px;height: 50px;border-radius: 100%;color:#333;display: flex;align-items: center;background-color: #fff;position: relative;margin-top: 20px;}
.ani_btn{width:100%;height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.ani_btn p{font-size: 15px;transform: translateX(-100%);opacity: 0;white-space: nowrap;}
.ani_btn i{font-size: 20px;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);}

.area_con_tit a:hover i{position: inherit;transform: translate(0);}
.area_con_tit a:hover{width:165px;border-radius: 20px;transition: .5s ease;}
.area_con_tit a:hover p{padding-right: 10px;transform: translateX(0);opacity: 1;transition: .5s ease;transition-delay: .3s;}


/*section area: e*/

/*section gallery : s*/

.gallery{width:100%;padding:150px 0px;;background-image: url("../img/gall_Back.jpg");}
.gallery .inner{display: flex;width:1440px}
.gall_tit{min-width:30%;padding-top: 25px;}
.gall_tit .title{font-size: 38px;line-height: 1.4;}
.gall_arrow{margin-top: 20px;display: flex;}
.gall_arrow i{font-size: 25px;cursor: pointer;}
.gall_arrow .slick-arrow{width:45px;height: 45px;border:1px solid #333;display: flex;align-items: center;justify-content: center;}
.gall_arrow i:last-child{margin-left: 5px;}
.gall_con_wrap{min-width:100%;}

.gall_contents{width:100%;}
.gall_contents .slick-slide{padding:10px;}
.gall_con{width:100%;position: relative;display: flex;align-items: flex-end;}
.gall_con img{width:100%;}
.gall_con dl{position: absolute;bottom: 0;z-index: 999999999;padding:15px;color: #fff;transform: translateY(46px);}
.gall_con:hover dl{transform: translateY(0);transition: .5s ease;}

.gall_con dl dt{font-size: 25px;margin-bottom: 10px;}
.gall_con dl dd{font-size: 17px;line-height: 23px;max-height: 46px;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2;
        -webkit-box-orient: vertical;
        opacity: 0;       
        word-break: keep-all;
}
.gall_con dl dd br{display: none;}
.gall_con:hover dl dd{opacity: 1;        transition: .5s ease;}

.progress{
    width:90%;height: 3px;
    position: relative;
    background-color: #ddd;
    background-image: linear-gradient(to right,#333, #333);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size .4s ease-in-out;
    border-radius: 3px;
    margin-top: 15px;
}

.gall_tit a{width:50px;height: 50px;border-radius: 100%;color:#fff;display: flex;align-items: center;background-color: #333;position: relative;margin-top: 20px;}

.gall_tit a:hover i{position: inherit;transform: translate(0);}
.gall_tit a:hover{width:165px;border-radius: 20px;transition: .5s ease;}
.gall_tit a:hover p{padding-right: 10px;transform: translateX(0);opacity: 1;transition: .5s ease;transition-delay: .3s;}



/*section gallery : e*/

/* section product : s */
.product{padding:150px 0;padding-top: 70px;}
.product .slick-list{overflow: visible;}
.product .title{font-size: 38px;}
.pro_tit dd{font-size: 17px;}
.pro_tit{width:100%;display: flex;align-items: center;justify-content: space-between;}

.pro_contents{width:100%;margin-top: 40px;}
.pro_slick{width:100%;}
.pro_slick .slick-slide{padding:10px;opacity: 0.3;}
.pro_slick .slick-active{opacity: 1;}
.pro_con{width:100%;}
.pro_con_img{width:100%;position: relative;overflow: hidden;}
.pro_con img{width:100%;}
.pro_con a>p{padding:10px 20px;white-space: nowrap;text-align: center;font-size: 16px;overflow: hidden;text-overflow: ellipsis;}

.pro_con_info{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);padding:45px;background-color: rgba(255, 255, 255, 0.65);}
.pro_con_info{transform: translate(-50%,200%);} 
.pro_con_info p{font-size: 16px;white-space: nowrap;}
.pro_con_info li{margin:10px 0px;}
.pro_con_info span{display: inline-block;margin-right: 20px;}
 .pro_con:hover .pro_con_info{transform: translate(-50%,-50%);transition: .5s ease;} 

.pro_controll{display: flex;}
.pro_controll a{display: inline-block;margin-right: 15px;width:140px;height: 45px;line-height: 45px;text-align: center;font-size: 16px;border:1px solid #333}
.pro_arrow{display: flex;}
.pro_arrow i{font-size: 25px;cursor: pointer;}
.pro_arrow .slick-arrow{width:45px;height: 45px;border:1px solid #333;display: flex;align-items: center;justify-content: center;}
.pro_arrow i:last-child{margin-left: 5px;}
/* section product : e */

/* section news : s */
.news{padding:100px 0px;}

.news .inner{display: flex;align-items: flex-start;justify-content: space-between;}

.news_lt,.news_rt{width:46%}
.news_tit{display: flex;align-items: center;justify-content: space-between;}
.news_tit .title{font-size: 30px;}
.news_tit span{font-size: 45px;font-weight: 100;cursor: pointer;}

.news_contents{width:100%;margin-top: 20px;}
.news_contents ul{width:100%;display: flex;align-items:flex-start;justify-content: space-between;}
.news_contents ul li{width: 48%;}
.news_contents img{width:100%;}
.news_contents dl{padding:6px;line-height: 1.3;}
.news_contents dl dt{color:#000;margin:10px 0px;;font-size: 19px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news_contents dl dd{font-size: 15px;line-height: 1.4;max-height: 4.2;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient:vertical;}

.news_contents2{margin-top: 20px;}
.news_contents2 ul{width:100%;border-top: 2px solid #333;}
.news_contents2 ul li{width:100%;border-bottom: 1px solid #ddd;padding:20px 0px}
.news_contents2 ul li a{width:100%;height: 100%;display: flex;align-items: center;justify-content: space-between;}
.news_contents2 ul li a p{font-size: 18px;width:70%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news_contents2 ul li a span{font-size: 16px;color:#666}

.news_contents2 ul li a p i{
    font-size: 23px;
    margin-right: 10px;
}

/* secton news : e */


@media screen and (max-width:1540px){

    .section .inner{width:90%}

    /*main banner : s*/
    .main_bn{height: 750px;}
    .main_tit{width:90%}
    .main_controll{width:90%}

    .main_tit h3{font-size: 75px;}

    /*main banner : s*/

    /*section area : s */
    .area_tit_ani p{font-size: 33px;}
    .area_contents{margin-top: 20px;height: 460px;}
    .area_tit_rt p{font-size: 16px;}

    .area_tab ul li{padding:25px;font-size: 17px;}
    .area_con_tit>p{font-size: 26px;}
    /*section area : e */

    /*section product : s */

    .product .title{font-size: 33px;}

    /*section product : e */


    /*section gallery : s */
    .gall_tit .title{font-size: 33px;}
    .gall_con dl dt{font-size: 20px;}
    .gall_con dl dd{font-size: 16px;}
    /*section gallery : e */


    /* section news: s */
    .news_tit .title{font-size: 26px;}

    .news_lt, .news_rt{width:48%}

    .news_contents dl{padding:3px;}
    .news_contents img{height: 340px;}

    /* section news: e */

}

@media screen and (max-width:1240px) {

    .main_news{width:100%}
    .main_tit h3{font-size: 55px;}
    .main_tit .tit{display: inline-block;}
    .main_tit .tit::after{width:100%}
    .main_tit .s_tit{margin-top: 10px;}
    .main_controll i{font-size: 55px;}

    .area{padding:100px 0px 70px}
    .area_tit_wrap{padding:0px 10px}
    .area_tit_ani p{font-size: 24px;}
    .area_tit_rt p{font-size: 15px;}

    .area_con{padding-left: 45px;}


    .product .title{font-size: 27px;}

    .gallery{padding:80px 0px;}
    .gall_con_wrap{min-width:80%}
    .gall_tit .title{font-size: 27px;}
    .gall_con dl dt{font-size: 19px;}

    .news_tit .title{font-size: 24px;}
    .news_tit span{font-size: 35px;}

    .news_contents2 ul li{padding:12px 0px;}
    .news_contents img{height: auto;}
    .news_contents dl dd{word-break: keep-all;}
    .news_contents2 ul li a p{font-size: 16px;}
    .news_contents dl dt{font-size: 17px;margin:5px 0px;}


}

@media screen and (max-width:900px) {
    .main_latest{padding:15px 10px;}
    .main_latest ul{width:80%;}

    .main_notice{display: none;}
    .main_latest{width:100%;justify-content: space-between;}

    .area .inner{width:95%}
    .area_tit_wrap{flex-flow: row wrap;}
    .area_tit_rt{width:100%;margin-top: 15px;}
    .area_contents{height: 400px;}
    .area_con_tit>p{font-size: 20px;}

    .area_con_tit a{width:165px;border-radius: 20px;}

    .pro_con a>p{font-size: 21px;}
    .pro_con_info{padding:15px;transform: translate(0);position: absolute;top: inherit;left: 0;bottom: 0;width:100%}
    .pro_con_info li{margin:5px 0px}
    .pro_con:hover .pro_con_info{transform:inherit} 

    .gall_tit a{width:165px;border-radius: 20px;}

    .gall_tit{width:50%;}    
    .gall_con_wrap{min-width:50%;width:50%}
    .gall_contents .slick-slide{padding: 0;}
    .gall_con dl dd{opacity: 1;}
    .gall_con dl{transform: translateY(0);}

    .news .inner{flex-flow: row wrap;}
    .news_lt, .news_rt{width:100%;}
    .news_rt{margin-top: 70px;}

    .ani_btn p{opacity: 1;transform: translate(0);}
    .ani_btn i{position: inherit;transform: translate(0);}

}
@media screen and (max-width:600px) {
    /*.main_bn{height: 600px;}*/
    .main_bn{height: 288px;}
    .main_latest ul{width:65%}
    .main_controll{width:95%}
    .main_controll i{font-size: 35px;}
    .main_tit h3{font-size: 35px;padding-bottom: 3px;}
    .main_tit p{font-size: 20px;}
    .main_tit .s_tit{margin-top: 0;;}

    .area_tit_rt p{display: inline;word-break: keep-all;}
    .area_tab ul li{padding:15px 5px;}
    .area_tab ul li{font-size: 15px;}
    .area_con{padding-left: 15px;}
    .area_con_tit>i{font-size: 35px;}
    .area_contents{height: 330px;}
    .area_con_tit>p{font-size: 17px;}
    .area_con_tit a{width:140px;height: 40px;}

    .ani_btn p{font-size: 13px;}
    .ani_btn i{padding-left:5px}

    .pro_tit{flex-flow: row wrap;}
    .product .title{font-size: 24px;}
    .pro_tit dd{font-size: 15px;}
    .pro_controll{margin-top: 20px;}
    .pro_con a>p{font-size: 16px;}
    .pro_controll a{width:120px;height: 40px;font-size: 14px;line-height: 42px;margin-right: 5px;}
    .pro_arrow .slick-arrow{width:40px;height: 40px;}
    .pro_arrow i{font-size: 20px;}

    .gall_tit .title {font-size: 24px;}
    .gall_arrow .slick-arrow{width:40px;height: 40px;font-size: 20px;}
    .gall_tit a{width:140px;height: 40px;margin-top: 10px;}
    .gallery .inner{flex-flow: row wrap;}
    .gall_tit{width:100%}
    .gall_con_wrap{width:100%}
    .gall_con{margin-top: 20px;}
    .progress{width:100%}


    .news_contents ul{flex-flow: row wrap;}
    .news_contents ul li{width:100%;}
    .news_contents ul li:nth-of-type(2){margin-top: 60px;}
    .news_contents2 ul li a p{width:80%}
    .news_contents dl dt{font-size: 20px;}
}