.clearfix { display: block;  *display: inline;
 *zoom: 1;
}
.clearfix:after { visibility: hidden; display: block; content: ""; clear: both; font-size: 0; height: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part { font-family: "Microsoft Yahei"; }
.part .content { width: 1210px; margin: 0 auto; }
body, html { height: 100%;  *height: auto;
}
.part-1 { text-align: center; height: 464px; background: url("../Themes/IndexDIY3/part-bg-1.jpg") no-repeat top center; color: #fff; }
.part-1 h1 { font-size: 42px; padding-top: 56px; margin-bottom: 28px; }
.part-1 small { display: block; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgMAAAAFCAYAAADYHe9jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTUtMDctMDJUMTE6MzE6MjcrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE1LTA3LTAyVDE3OjE1OjE0KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE1LTA3LTAyVDE3OjE1OjE0KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOTcyMjM0QzIwOUExMUU1QTQyQUJFNzNGOEY0MUUyQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOTcyMjM0RDIwOUExMUU1QTQyQUJFNzNGOEY0MUUyQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ5NzIyMzRBMjA5QTExRTVBNDJBQkU3M0Y4RjQxRTJDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ5NzIyMzRCMjA5QTExRTVBNDJBQkU3M0Y4RjQxRTJDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Ko+I5QAAAJxJREFUeNrs2TsKg0AUheEZ0KQRAu4mpWCpq41dmlRJVhOQVI7F9QQCcYIr8P4fHGTacwvnEc0sAE4clYtyVh5Kr0zUwswB7yKbAThyVdrV+qY01MLMATYDZid9S6rIzMpIDbvzVqrVOn1PjmDm8KNWDtSQSQU/PTjy/Dsl3qmEmcOdFxVs3wzQArz4nAiH8Hs/7gLvx8wcQFgEGAA1DiiSVSX4EwAAAABJRU5ErkJggg==") no-repeat center center; font-size: 16px; }
.part-1 small span { margin: 0 34px; }
.part-1 .btn-box { margin-top: 100px; }
.part-1 .btn-box a { display: inline-block; border-radius: 25px; text-align: center; color: #fff; }
.part-1 .btn-box > a { width: 180px; height: 50px; line-height: 50px; font-size: 22px; background-color: #f25546; margin-bottom: 50px; }
.part-1 .btn-box > a:hover { text-decoration: none; background-color: #ff6556; }
.part-1 .btn-box p a { font-size: 14px; border: 2px solid #fff; width: 110px; height: 32px; line-height: 32px; margin: 0 20px; }
.part-1 .btn-box p a:hover { text-decoration: none; background-color: rgba(0, 0, 0, 0.2); }
.part-1 .q-team { font-family: "sont"; color: #fff; font-size: 14px; text-align: right; margin-top: -20px; }
.part-2 { height: 530px; text-align: center; background: url("../Themes/IndexDIY3/part-bg-2.png") no-repeat top center; }
.part-2 .content { overflow: hidden; }
.part-2 .content > div { float: left; height: 530px; width: 50%; }
.part-2 .c-left { background: url("../Themes/IndexDIY3/c-left-bg.png") no-repeat left 32px; }
.part-2 .c-right { background: url("../Themes/IndexDIY3/c-right-bg.png") no-repeat 70px 32px; }
.part-2 .c-right > div { margin-left: 130px; }
.part-2 .h-group { color: #fff; margin-top: 24px; }
.part-2 .h-group span { display: inline-block; vertical-align: middle; font-size: 24px; margin-right: 20px; position: relative; }
.part-2 .h-group span:after { position: absolute; content: "·"; top: 0; right: -14px; }
.part-2 .h-group h2 { display: inline-block;  *display: inline;
 *zoom: 1;
vertical-align: middle; font-size: 28px; font-weight: bold; margin: 6px 0 12px; }
.part-2 .h-group p { font-size: 14px; }
.part-2 .wrapper { position: relative; width: 320px; height: 320px; margin: 28px auto 0; }
.part-2 .wrapper:hover .design-link { display: block; }
.part-2 .wrapper .design-link { display: none; position: absolute; left: 115px; top: 142px; font-size: 14px; border: 2px solid #fff; width: 90px; height: 34px; line-height: 34px; color: #fff; border-radius: 18px; background-color: rgba(0, 0, 0, 0.5); }
.part-2 .wrapper .design-link:hover { text-decoration: none; background-color: rgba(0, 0, 0, 0.8); }
.part-2 .wrapper ul { position: relative; left: 0; }
.part-2 .wrapper ul li { display: none; position: absolute; left: 0; top: 0; height: 320px; }
.part-2 .wrapper ul li:first-child { display: block; }
.part-2 .wrapper ul li img { display: block; width: 320px; height: 320px; }
.part-2 .swiper-pagnation { margin-top: 18px; }
.part-2 .swiper-pagnation span { display: inline-block; width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.5);  *background-color: #ffffff;
 *filter: alpha(opacity=50);
border-radius: 10px; cursor: pointer; margin: 0 5px;  -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -ms-transition: all .5s;
 -transition: all .5s;
}
.part-2 .swiper-pagnation span.curr-dot { width: 20px; background-color: #fff; }
.part-3 { height: 370px; }
.part-3 .content { text-align: center; overflow: hidden; margin-top: 70px; }
.part-3 .content dl { float: left; padding-top: 170px; width: 25%;  *width: 24.5%;
background: url("../Themes/IndexDIY3/icon-middle.png") no-repeat left top; }
.part-3 .content dl.d-1 { background-position: 92px top; }
.part-3 .content dl.d-2 { background-position: -207px top; }
.part-3 .content dl.d-3 { background-position: -509px top; }
.part-3 .content dl.d-4 { background-position: -815px top; }
.part-3 .content dt { color: #333333; font-size: 18px; margin-bottom: 10px; }
.part-3 .content dd { color: #666666; font-size: 12px; line-height: 1.8; }
.part-4 { position: relative; left: 0; top: 0; width: 100%; z-index: 100; background-color: #e1f3fc; height: 1000px;  *height: 600px;
backface-visibility: hidden; }
.part-4.fixedPage { position: fixed; }
.part-4 .part-wrapper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #e1f3fc; }
.part-4 .part-wrapper.fixedPage { position: fixed; }
.part-4 .tab-container { text-align: center; padding-top: 44px; position: relative; width: 1210px; margin: 0 auto; }
.part-4 .tab-container .hgroup { margin-bottom: 20px; }
.part-4 .tab-container .hgroup small { color: #666666; font-size: 16px; }
.part-4 .tab-container .pic-wrapper { display: inline-block; vertical-align: middle;  *display: inline;
 *zoom: 1;
}
.part-4 .tab-container h2 { font-size: 36px; margin-bottom: 12px; color: #333333; }
.part-4 .tab-container li { position: absolute; left: 0; top: 44px; width: 1210px; display: none; }
.part-4 .tab-container li.active { display: block; }
.part-4 .tab-container li img { display: block; height: 100%; }
.part-4 .tab-container .last-box { position: relative; display: inline-block; vertical-align: middle;  *display: inline;
 *zoom: 1;
width: 800px; height: 600px; }
.part-4 .tab-container .last-box img { display: none; position: absolute; left: 0; top: 0; height: 100%; margin: 0 auto; }
.part-4 .tab-container .last-box .show { display: block; }
.part-4 .tab-container .paganation-bottom { display: inline-block; vertical-align: middle;  *display: inline;
 *zoom: 1;
margin-left: 12px; }
.part-4 .tab-container .paganation-bottom span { display: block; margin: 10px 0; width: 10px; height: 10px; border-radius: 10px; background-color: #666666; cursor: pointer;  -webkit-transition: .4s all;
 -moz-transition: .4s all;
 -ms-transition: .4s all;
 transition: .4s all;
}
.part-4 .tab-container .paganation-bottom span.current-dot { height: 20px; }
.part-4 .content { position: relative; }
.part-4 .left-side { position: absolute; top: 44px; left: 0; color: #889399; font-size: 12px; }
.part-4 .left-side ul { background: url("../Themes/IndexDIY3/icon-left-bg.png") no-repeat left 9px; padding-left: 30px; margin-top: 120px; margin-left: 10px; }
.part-4 .left-side ul.ul-bg-1 { background-position: left -248px; }
.part-4 .left-side ul.ul-bg-2 { background-position: left -505px; }
.part-4 .left-side ul.ul-bg-3 { background-position: left -761px; }
.part-4 .left-side > span { display: inline-block; width: 100px; height: 100px; background: url("../Themes/IndexDIY3/icon-number.png") no-repeat -5px -4px; -webkit-transition: all 0.4s; }
.part-4 .left-side span.page-0 { background-position: -5px -4px; }
.part-4 .left-side span.page-1 { background-position: -5px -128px; }
.part-4 .left-side span.page-2 { background-position: -5px -252px; }
.part-4 .left-side span.page-3 { background-position: -5px -376px; }
.part-4 .left-side .curr-tab { color: #0fadff; }
.part-4 .left-side li { height: 34px; line-height: 34px; margin-bottom: 30px; }
.part-5 { position: relative; height: 100%; height: 100vh;  *height: 600px;
text-align: center; background-color: #ccc; }
.part-5 .mask-over { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: #000000; filter: alpha(opacity=50); background-color: rgba(0, 0, 0, 0.5); }
.part-5 .content { position: absolute; left: 0; top: 0; width: 100%; z-index: 10; color: #fff; padding-top: 120px; }
.part-5 .content h2 { font-size: 46px; }
.part-5 .content h3 { font-size: 22px; margin: 12px 0 60px; }
.part-5 .content a { font-size: 22px; color: #fff; display: inline-block; width: 180px; text-align: center; height: 48px; line-height: 48px; border: 2px solid #fff; border-radius: 24px; }
.part-5 .content a:hover { text-decoration: none; background-color: rgba(0, 0, 0, 0.2); }
@media screen and (max-height: 770px) {
 .part-4 .tab-container li {
 top: 15px;
}
 .part-4 .tab-container .paganation-bottom {
 margin-top: 12px;
}
 .part-4 .tab-container .last-box {
 margin-top: 0;
}
}