@charset "utf-8";

#include02_wrapper{position:relative;height:561px;margin-top:90px;padding:83px 0;box-sizing:border-box;background:url(/sh_img/include/include_02/img/in02_bg.jpg) center fixed;font-family:'Poppins'}
#include02_wrapper .scroll_wrap{position:absolute;left:50%;top:0px;width:78px;height:36px;margin-left:-39px;background:url(/sh_img/include/include_02/img/scroll_bg.png) center no-repeat}
#include02_wrapper .scroll-down{position:absolute;z-index:999;bottom:0;left:46.2%;width:9px;height:12px;-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);
-webkit-animation:arr 1.6s infinite linear;-ms-animation:arr 1.6s infinite linear;animation:arr 1.6s infinite linear}
@-webkit-keyframes arr{from{bottom:25px}15%{bottom:30px}30%{bottom:25px}45%{bottom:30px}60%{bottom:25px}100%{bottom:25px}}
@keyframes arr{from{bottom:25px}15%{bottom:30px}30%{bottom:25px}45%{bottom:30px}60%{bottom:25px}100%{bottom:25px}}
#include02_wrapper .scroll-down i{color:#c59d72}
#include02_wrapper .cont_wrap{width:1200px;margin:0 auto}
#include02_wrapper .tit_wrap{font-size:32px;line-height:50px;color:#fff;text-align:right;font-family:'Poppins'}
#include02_wrapper .tit_wrap span{font-weight:700}
#include02_wrapper .service_li{padding-top:60px;overflow:hidden}
#include02_wrapper .service_li li{float:left;position:relative;width:288px;height:256px;padding:90px 22px 0;margin-right:10px;font-size:13px;line-height:1.5;color:rgba(255, 255, 255, 0.72);box-sizing:border-box;z-index:10;transition:all 0.3s}
#include02_wrapper .service_li li:hover{padding:32px 30px 0}
#include02_wrapper .service_li li p{color:rgba(255, 255, 255, 0.7490196078431373)}
#include02_wrapper .service_li li:last-child{margin-right:0}
#include02_wrapper .service_li li .b_tit{padding-bottom:20px;color:#fff;z-index:10;height:40px;font-size:17px;word-break:keep-all}
#include02_wrapper .service_li li .service_go_btn{display:none;width:139px;height:41px;margin-top:23px;border-radius:2px;font-size:12px;font-weight:500;line-height:41px;color:#fff;background:#303030;text-align:center;z-index:10;font-family:'Poppins'}
#include02_wrapper .service_li li .service_go_btn i{font-size:10px;padding-left:5px}
#include02_wrapper .service_li li:before{display:block;position:absolute;bottom:0;left:0;width:291px;height:256px;border-radius:2px;background:rgba(0, 0, 0, 0.3215686274509804);content:'';z-index:-1;-webkit-transition:all 0.3s;transition:all 0.3s}
#include02_wrapper .service_li li:hover:before{height:306px;background:rgb(214, 174, 130);z-index:0;
background: -webkit-linear-gradient(-45deg, rgb(214, 174, 130) 0%, rgb(176, 136, 93) 100%);background: -webkit-linear-gradient(315deg, rgb(214, 174, 130) 0%,rgb(176, 136, 93) 100%);background:linear-gradient(135deg, rgb(214, 174, 130) 0%,rgb(176, 136, 93) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6ae82', endColorstr='#b0885d',GradientType=1);z-index:-1}
#include02_wrapper .service_li li:hover .service_go_btn{display:block}

#include02_wrapper .service_li .icon{position:absolute;right:30px;top:20px;width:41px;height:34px;transition:all 0.3s}
#include02_wrapper .service_li .li01 .icon{background:url(/sh_img/include/include_02/img/icon04_off.png) no-repeat}
#include02_wrapper .service_li .li01:hover .icon{top:-10px;background:url(/sh_img/include/include_02/img/icon04_on.png) no-repeat}
#include02_wrapper .service_li .li02 .icon{background:url(/sh_img/include/include_02/img/icon02_off.png) no-repeat}
#include02_wrapper .service_li .li02:hover .icon{top:-10px;background:url(/sh_img/include/include_02/img/icon02_on.png) no-repeat}
#include02_wrapper .service_li .li03 .icon{background:url(/sh_img/include/include_02/img/icon03_off.png) no-repeat}
#include02_wrapper .service_li .li03:hover .icon{top:-10px;background:url(/sh_img/include/include_02/img/icon03_on.png) no-repeat}
#include02_wrapper .service_li .li04 .icon{background:url(/sh_img/include/include_02/img/icon01_off.png) no-repeat}
#include02_wrapper .service_li .li04:hover .icon{top:-10px;background:url(/sh_img/include/include_02/img/icon01_on.png) no-repeat}

/* 효과css */
.animated {-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fadeInUp {-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUp {from {opacity:0;webkit-transform:translate3d(0, 50%, 0);transform:translate3d(0, 50%, 0)}to {opacity:1;webkit-transform:none;transform:none}}
@keyframes fadeInUp {from {opacity:0;webkit-transform:translate3d(0, 50%, 0);transform:translate3d(0, 50%, 0)}to {opacity:1;webkit-transform:none;transform:none}}
#include02_wrapper .service_li .li01{-webkit-animation-delay:.2s;-ms-animation-delay:.2s;animation-delay:.2s}
#include02_wrapper .service_li .li02 {-webkit-animation-delay:.4s;-ms-animation-delay:.4s;animation-delay:.4s}
#include02_wrapper .service_li .li03 {-webkit-animation-delay:.6s;-ms-animation-delay:.6s;animation-delay:.6s}
#include02_wrapper .service_li .li04 {-webkit-animation-delay:.8s;-ms-animation-delay:.8s;animation-delay:.8s}

/* 익스 8 */
@media \0screen {
#include02_wrapper .scroll-down{bottom:25px;left:43%}
#include02_wrapper .service_li li:before{background:#333}
#include02_wrapper .service_li li p{color:#fff}
#include02_wrapper .service_li li {filter:alpha(opacity=100}
}

/* 익스 9 */
@media screen\0 {
#include02_wrapper .scroll-down{bottom:30px}
}