@charset "utf-8";

#include03_wrapper{width:1200px;margin:18px auto 67px}
#include03_wrapper .box_banner_area{display:flex}
#include03_wrapper .box_banner_area a{display:block;height:100%;padding:35px 40px;box-sizing:border-box}
#include03_wrapper .box_banner_area:after{display:block;visibility:hidden;clear:both;content:""}
#include03_wrapper .box_banner_area .box_banner{position:relative;box-sizing:border-box;z-index:0}
#include03_wrapper .box_banner_area .b_tit{font-size:25px;font-weight:700;color:#fff;letter-spacing:0.3px;-webkit-transform: translateY(25px);z-index:10;
transform: translateY(25px);-webkit-transition: -webkit-transform .6s cubic-bezier(0.77, 0, 0.175, 1);transition:-webkit-transform .6s cubic-bezier(0.77, 0, 0.175, 1);transition: transform .6s cubic-bezier(0.77, 0, 0.175, 1);transition: transform .3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform .3s cubic-bezier(0.77, 0, 0.175, 1)}
#include03_wrapper .box_banner_area .b_tit:after{display:block;margin:15px 0;width:19px;height:1px;background:#fff;content:'';z-index:1}
#include03_wrapper .box_banner_area .b_txt{color:#f2f2f2;opacity:0;z-index:1;-webkit-transform:translateY(-25px);transform: translateY(-25px);-webkit-transition:all .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);transition: all.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
#include03_wrapper .box_banner_area .right_banner{width:calc(100% / 3 * 2);margin-bottom:15px}
#include03_wrapper .box_banner_area .box_banner:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(0, 171, 255);z-index:0;
background: -webkit-linear-gradient(-45deg,  rgb(0, 171, 255) 0%,rgb(22, 98, 192) 100%);background: -webkit-linear-gradient(315deg,  rgb(0, 171, 255) 0%,rgb(22, 98, 192) 100%);background:linear-gradient(135deg, rgb(0, 171, 255) 0%,rgb(22, 98, 192) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00abff', endColorstr='#1662c0',GradientType=1);opacity:0;-webkit-transition:all .3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all .3s cubic-bezier(0.645, 0.045, 0.355, 1)}
#include03_wrapper .box_banner_area .box_banner:hover .b_txt{opacity:1;z-index:9;-webkit-transform:translateY(0);transform:translateY(0)}
#include03_wrapper .box_banner_area .bottom_box_area:after{display:block;visibility:hidden;clear:both;content:""}
#include03_wrapper .box_banner_area .bottom_box_area{display:flex}
#include03_wrapper .box_banner_area .bottom_box_area > div{width:50%}
#include03_wrapper .box_banner_area .box01{width:calc(100% / 3);height:550px;margin-right:15px;background-image:url(./img/banner01_bg.png);background-size:cover;background-position:center}
#include03_wrapper .box_banner_area .box01 .b_tit{padding-top:350px}
#include03_wrapper .box_banner_area .box01 .go_btn{position:absolute;right:30px;top:30px}
#include03_wrapper .box_banner_area .box02{width:100%;height:267px;margin-bottom:15px;background-image:url(./img/banner02_bg.png);background-size:cover;background-position:center}
#include03_wrapper .box_banner_area .box02 .go_btn{position:absolute;right:30px;bottom:30px}
#include03_wrapper .box_banner_area .box03{height:267px;margin-right:15px;background-image:url(./img/banner03_bg.png);background-size:cover}
#include03_wrapper .box_banner_area .box03 .go_btn{position:absolute;right:30px;bottom:30px}
#include03_wrapper .box_banner_area .box04{height:267px;background-image:url(./img/banner04_bg.png);background-size:cover}
#include03_wrapper .box_banner_area .box04 .go_btn{position:absolute;right:30px;bottom:30px}

@media \0screen{
#include03_wrapper .box_banner_area .box_banner:before{display:none}	
}
@media(hover:hover){
#include03_wrapper .box_banner_area .box_banner:hover .b_tit{-webkit-transform:translateY(0);transform:translateY(0)}
#include03_wrapper .box_banner_area .box_banner:hover:before{opacity:.5;z-index:-1}
}
@media(max-width:1230px){
#include03_wrapper{width:100%;padding:0 15px}
}
@media(max-width:1024px){
#include03_wrapper .box_banner_area a{padding:25px 30px}
#include03_wrapper .box_banner_area .b_tit{font-size:20px}
}
@media(max-width:800px){
#include03_wrapper .box_banner_area{flex-wrap:wrap}
#include03_wrapper .box_banner_area .box01{width:100%;height:250px;margin:0 0 15px;background:url(./img/banner01_bg_800.png) no-repeat right bottom #686b6a;background-size:cover}
#include03_wrapper .box_banner_area .box01 .b_tit{padding-top:0}
#include03_wrapper .box_banner_area .right_banner{width:100%}
#include03_wrapper .box_banner_area .box02{height:250px}
}
@media(max-width:550px){
#index_wrapper .idx_tit_wrap .pl{white-space:normal;}
#include03_wrapper .box_banner_area .bottom_box_area{flex-wrap:wrap}
#include03_wrapper .box_banner_area .bottom_box_area > div{width:100%;background:center/cover no-repeat}
#include03_wrapper .box_banner_area .box01 .go_btn{bottom:30px;top:auto}
#include03_wrapper .box_banner_area .bottom_box_area .box03{height:250px;margin:0 0 15px;background-image:url(./img/banner03_bg.png)}
#include03_wrapper .box_banner_area .bottom_box_area .box04{height:250px;background-image:url(./img/banner04_bg.png)}
}
@media(max-width:480px){
#include03_wrapper{margin-bottom:30px}
#include03_wrapper .box_banner_area a{padding:10px 30px}
#include03_wrapper .box_banner_area .b_tit{font-size:16px}
#include03_wrapper .box_banner_area .box01,#include03_wrapper .box_banner_area .box02, #include03_wrapper .box_banner_area .bottom_box_area .box03, #include03_wrapper .box_banner_area .bottom_box_area .box04{height:195px}
}