/* ------------------------------------------
 * IT书包
 * 网址：www.itshubao.com
 * 整理：yinq<3331653644@qq.com> 
 -------------------------------------------- */
.phoneBox,
.phoneBox .phoneInfo,
.phoneBox header,
.phoneBox .phoneSingle {
   position: relative;
   float: left;
   width: 100%;
}

.phoneBox {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.phoneBox .phoneInfo {
   height: 20px;
   overflow: hidden;
}

.phoneBox header {
   height: 70px;
   overflow: hidden;
}

.phoneBox .materialButton {
   width: 60px;
   height: 60px;
   background: #FC4B6B;
   border-radius: 50%;
   position: absolute;
   right: 30px;
   top: 60px;
   z-index: 2;
   cursor: pointer;
}

.phoneBox .materialButton:before,
.phoneBox .materialButton:after {
   content: "";
   background: #fff;
   z-index: 2;
   position: absolute;
   top: 50%;
   left: 50%;
   transition: 200ms cubic-bezier(.4, 0, .2, 1);
   -webkit-transition: 200ms cubic-bezier(.4, 0, .2, 1);
   -ms-transition: 200ms cubic-bezier(.4, 0, .2, 1);
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

.phoneBox .materialButton.active:before,
.phoneBox .materialButton.active:after {
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%) rotate(45deg);
   -ms-transform: translate(-50%, -50%);
}

.phoneBox .materialButton:before {
   width: 15px;
   height: 3px;
}

.phoneBox .materialButton:after {
   width: 3px;
   height: 15px;
}

.phoneBox .materialButton .scale {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

.phoneBox .materialButton .scale:before {
   content: "";
   width: 60px;
   height: 60px;
   background: #FC4B6B;
   border-radius: 50%;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   z-index: 2;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

.phoneBox .materialButton .scale .scaleColor {
   width: 25px;
   height: 0px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -0px;
   margin-left: -12.5px;
   border-radius: 25px;
   transition: 200ms cubic-bezier(.4, 0, .2, 1);
   -webkit-transition: 200ms cubic-bezier(.4, 0, .2, 1);
   -ms-transition: 200ms cubic-bezier(.4, 0, .2, 1);
   transform: rotate(0deg) translate(0px, 50%);
   -webkit-transform: rotate(0deg) translate(0px, 50%);
   -ms-transform: rotate(0deg) translate(0px, 50%);
}

.phoneBox .materialButton .scale .scaleColor:hover {
   height: 55px !important;
   margin-top: -27.5px !important;
}

.phoneBox .materialButton .scale .scaleColor:nth-child(1) {
   transform: rotate(90deg) translate(0px, 50%);
   -webkit-transform: rotate(90deg) translate(0px, 50%);
   -ms-transform: rotate(90deg) translate(0px, 50%);
   background: #F44336;
}

.phoneBox .materialButton .scale .scaleColor:nth-child(2) {
   transform: rotate(135deg) translate(0px, 50%);
   -webkit-transform: rotate(135deg) translate(0px, 50%);
   -ms-transform: rotate(135deg) translate(0px, 50%);
   background: #9C27B0;
}

.phoneBox .materialButton .scale .scaleColor:nth-child(3) {
   transform: rotate(180deg) translate(0px, 50%);
   -webkit-transform: rotate(180deg) translate(0px, 50%);
   -ms-transform: rotate(180deg) translate(0px, 50%);
   background: #3F51B5;
}

.phoneBox .materialButton .scale .scaleColor:nth-child(4) {
   transform: rotate(225deg) translate(0px, 50%);
   -webkit-transform: rotate(225deg) translate(0px, 50%);
   -ms-transform: rotate(225deg) translate(0px, 50%);
   background: #03A9F4;
}

.phoneBox .materialButton .scale .scaleColor:nth-child(5) {
   transform: rotate(270deg) translate(0px, 50%);
   -webkit-transform: rotate(270deg) translate(0px, 50%);
   -ms-transform: rotate(270deg) translate(0px, 50%);
   background: #009688;
}

.phoneBox .materialButton .scale .scaleColor:nth-child(6) {
   transform: rotate(315deg) translate(0px, 50%);
   -webkit-transform: rotate(315deg) translate(0px, 50%);
   -ms-transform: rotate(315deg) translate(0px, 50%);
   background: #8BC34A;
}

.phoneBox .materialButton .scale .scaleColor:nth-child(7) {
   transform: rotate(360deg) translate(0px, 50%);
   -webkit-transform: rotate(360deg) translate(0px, 50%);
   -ms-transform: rotate(360deg) translate(0px, 50%);
   background: #FFEB3B;
}

.phoneBox .materialButton .scale .scaleColor:nth-child(8) {
   transform: rotate(405deg) translate(0px, 50%);
   -webkit-transform: rotate(405deg) translate(0px, 50%);
   -ms-transform: rotate(405deg) translate(0px, 50%);
   background: #FF9800;
}

.phoneBox .phoneSingle {
   background: #fff;
}

.box-color {
   width: 60px;
   height: 60px;
   position: absolute;
   border-radius: 50%;
}

.color {
   width: 0px;
   height: 0px;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

.color.first-active {
   width: 5000px;
   height: 5000px;
}

.color.active {
   z-index: 2;
}

.color.body-color-1 {
   background: #E57373;
}

.color.phoneInfo-color-1 {
   background: #D32F2F;
}

.color.header-color-1 {
   background: #F44336;
}

.color.body-color-2 {
   background: #BA68C8;
}

.color.phoneInfo-color-2 {
   background: #7B1FA2;
}

.color.header-color-2 {
   background: #9C27B0;
}

.color.body-color-3 {
   background: #7986CB;
}

.color.phoneInfo-color-3 {
   background: #303F9F;
}

.color.header-color-3 {
   background: #3F51B5;
}

.color.body-color-4 {
   background: #4FC3F7;
}

.color.phoneInfo-color-4 {
   background: #0288D1;
}

.color.header-color-4 {
   background: #03A9F4;
}

.color.body-color-5 {
   background: #4DB6AC;
}

.color.phoneInfo-color-5 {
   background: #00796B;
}

.color.header-color-5 {
   background: #009688;
}

.color.body-color-6 {
   background: #AED581;
}

.color.phoneInfo-color-6 {
   background: #689F38;
}

.color.header-color-6 {
   background: #8BC34A;
}

.color.body-color-7 {
   background: #FFF176;
}

.color.phoneInfo-color-7 {
   background: #FBC02D;
}

.color.header-color-7 {
   background: #FFEB3B;
}

.color.body-color-8 {
   background: #FFB74D;
}

.color.phoneInfo-color-8 {
   background: #F57C00;
}

.color.header-color-8 {
   background: #FF9800;
}

.materialContainer {
   width: 100%;
   max-width: 380px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   z-index: 10;
}

.row {
   margin: 0 -20px;
}

html,
body {
   overflow: hidden;
}

*,
*:after,
*::before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   text-decoration: none;
   list-style-type: none;
   outline: none;
}