@charset "UTF-8";
/* CSS Document */

body{marging:0; padding: 0; background: #35AAE1; color:#fff; width: 100%; height: 100%; overflow: hidden; position: relative;font-family: "Microsoft Yahei","Helvetica Neue", Helmet, Freesans, sans-serif;}
img{display:inline-block; border: 0; max-width: 100%; height: auto}
a{color:#fff; text-decoration: none;}
.sidearea{position: fixed; right:20px; top: 50%; height: 240px; margin-top: -120px; width: 320px; z-index: 10}
.sidearea .logo{width:200px; height: 70px; margin-top: 30px; float: left;}
.sidearea .sidebar{float: right; display: inline-block; width:120px}
.sidearea .sidebar .circle{width:20px; display: inline-block; float: left; margin-top: 30px; height: 60px;}
.sidearea .sidebar .circle span{display:block; width:10px; height: 10px; margin: 5px 0; background: rgba(0,0,0,.5); border-radius: 10px; cursor: pointer}
.sidearea .sidebar .circle span.on{background:#fff;}
.sidearea .sidebar .nav{line-height:40px; width: 84px; display: inline-block;  text-align: center;}
.sidearea .sidebar .nav a{display:block; font-size: 18px}

.footer{position:fixed; width: 100%; bottom:0; left: 0; text-align: center; line-height: 80px; z-index: 2; font-size: 14px;}
.footer a{font-size: 14px;}

.box{position:relative; width: 100%; height: 100vh;}
#index .whale{width:82%; position: absolute; left: -16%; height: 100%; z-index: 1; background:url(../images/whale_left.png) right center no-repeat; background-size:100% auto}
#index .content{position: absolute; left: 55%; top: 60%; z-index: 2; font-size: 18px; line-height: 22px; padding: 16px;}
#index .content:before{content:"";display: block; width: 20px; height: 20px; position: absolute; left: 0; top: 0; border:solid #fff; border-width: 2px 0 0 2px}
#index .content a{display:block; background: #fff; font-size: 15px; color:#35AAE1; line-height: 18px; margin-top: 20px; width: 90px; height:90px; box-sizing: border-box; position:relative; padding:49px 5px 5px 5px; overflow: hidden;}
#index .content a i{display:block; background: #35AAE1; width: 30px; height: 30px; position: absolute; right: -15px; bottom:-15px; transform: rotate(45deg); z-index: 1}
#index .content a:after{content:""; width: 10px; height: 10px; display: block; border:solid #fff; border-width: 0 2px 2px 0; position: absolute; right:0; bottom:0; z-index: 2;}

#service .whale{width:76%; height: 90%; position: absolute; left: 30%; top: 0; z-index: 1; background: url(../images/whale_view_right.png) left bottom no-repeat; background-size:contain}
#service .content{width:84.5%; height:90%; position: absolute; left:7.2%; top:0; z-index: 2; background: url(../images/project_intro.png) right bottom no-repeat; background-size: contain;}

#case .whale{width:100%; height: 100%; position:absolute; bottom:0; left: 0; background: url(../images/whale_bottom.png) center bottom no-repeat;}
#case .content{width:80%; left: 10%; top:0; position:absolute; height: 100%; display: table;}
#case .content .case-roll{display:table-cell; vertical-align: middle;}
#case .content .preview{float:left; max-width: 40%; position: relative; display: inline-block;}
#case .content .intro{float:left; display: inline-block; max-width: 60%; box-sizing: border-box; padding-left:40px; padding-top: 40px}
#case .content .intro .desc{max-width:640px;}
#case .content .preview .cover{position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: 3; background: url(../images/iphoneX_front.png) center no-repeat; background-size:contain; pointer-events: none}
#case .content .preview .case{position:absolute;height: 93%;width: 87%;left: 6.5%;top: 3.5%; overflow: auto}
#case .content .preview .case img{width:100%; height:auto}
#case .content .preview img{max-width: 100%; height: auto;}
#case .content .case-roll .item{width:60%;}
#case .content .order{color:#35AAE1; font-size: 12px; background:#fff; padding: 2px 5px;}
#case .content .title{font-weight:normal; font-size: 30px;}
#case .content .customer{font-size:18px; color:#000; font-weight: normal;}
#case .content .desc{font-size:18px; color:#000; line-height:24px;}
#case .prev-btn,#case .next-btn{display:block; height: 130px; width: 130px; background: url(../images/left_arrow.png) center no-repeat; position: absolute; left: -130px; top: 50%; margin-top: -65px; cursor: pointer; z-index: 5}
#case .next-btn{left:60%; background-image: url(../images/right_arrow.png);}
#case .building{display: table-cell; vertical-align: middle; text-align: center; font-size: 20px;}