@charset "utf-8";
#inc02{overflow:hidden;position:relative;z-index:0;width:100%;height:100%;background-color:#f7f7f7}
#inc02:before{content:"THIS IS";position:absolute;top:40%;left:-25px;z-index:-1;font-size:110px;font-weight:800;color:#fff}
#inc02:after{content:"";visibility:hidden;clear:both;display:block}
#inc02 > div{float:left;width:50%;height:100%}
#inc02 .left{display:table;overflow:hidden;position:relative;z-index:0;background:url(/sh_img/include/include_02/container_bg.png) repeat-y}
#inc02 .left:after{content:"FOR YOU";position:absolute;bottom:30%;right:-20px;z-index:-1;font-size:110px;font-weight:800;color:#fff}
#inc02 .left .cont{display:table-cell;position:relative;z-index:0;vertical-align:middle;font-size:15px;line-height:1.6;color:#606060}
#inc02 .left .cont p{padding-left:25%;font-size:43px;font-weight:700;line-height:1.2;color:#222}
#inc02 .left .cont .txt{padding-left:25%}
#inc02 .left .cont .circle_wrap{position:relative;width:220px;height:220px;margin:50px auto 70px;transition:width .3s}
#inc02 .left .cont .circle{overflow:hidden;position:relative;width:220px;height:220px;border-radius:100%;background:url(/sh_img/include/include_02/right_bg.jpg) center no-repeat;background-size:120%}
#inc02 .left .cont .circle_b{position:absolute;top:0;right:0;z-index:-1;width:220px;height:220px;border-radius:100%;opacity:0;transition:opacity .3s;
background:#f8598b;
background:-webkit-gradient(left top, right top, color-stop(0%, rgba(247,189,0,1)), color-stop(49%, rgba(248,89,140,1)), color-stop(100%, rgba(151,57,153,1)));
background:-webkit-linear-gradient(left, rgba(247,189,0,1) 0%, rgba(248,89,140,1) 49%, rgba(151,57,153,1) 100%);
background:-ms-linear-gradient(left, rgba(247,189,0,1) 0%, rgba(248,89,140,1) 49%, rgba(151,57,153,1) 100%);
background:linear-gradient(to right, rgba(247,189,0,1) 0%, rgba(248,89,140,1) 49%, rgba(151,57,153,1) 100%)}
#inc02 .left:hover .circle_wrap{width:350px}
#inc02 .left:hover .circle_b{opacity:1}
#inc02 .right{display:table;position:relative;background:url(/sh_img/include/include_02/right_bg.jpg) center no-repeat}
#inc02 .right:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background-color:#555;background-color:rgba(0,0,0,.4);opacity:0;transition:opacity .3s}
#inc02 .right .cont{display:table-cell;position:relative;z-index:0;vertical-align:middle}
#inc02 .right .cont .box{overflow:hidden;position:relative;width:500px;height:500px;margin:0 auto;border:15px solid #fff;font-size:68px;font-weight:200;text-align:center;opacity:0;transition:opacity .3s}
#inc02 .right .cont .box a:before{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:60px;border:1px solid rgba(255,255,255,.3)}
#inc02 .right .cont .box a{display:block;width:100%;height:100%;padding-top:170px;color:#fff}
#inc02 .right .cont .box p{position:absolute;left:0;bottom:-75px;width:100%;height:60px;padding-right:10px;line-height:60px;font-size:15px;color:#222;text-align:right;background-color:#fff;transition:bottom .3s;font-family:arita-medium}
#inc02 .right:hover:before{opacity:1}
#inc02 .right:hover .box{opacity:1}
#inc02 .right:hover .box p{bottom:-15px}