/********** design.php **********/
#design .year-wrap {width: 100%; max-width: 620px; height: 130px; margin: 0 auto; text-align: center; display: flex; justify-content: center; align-items: center;}
#design .year-wrap img {padding-bottom: 20px;}
#design .year-wrap > div {display: inline-flex; flex-direction: column; width: 110px; justify-content: center; align-items: center; cursor: pointer;}
#design .year-wrap > div > a {font-size: 18px; font-weight: bold;}

#design .year-wrap a {/* display: inline-table; */ position: relative; overflow: hidden; padding: 0 4px;}
#design .year-wrap a > span {position: relative; z-index: 2;}
#design .year-wrap a::before {content: ""; display: block; width: 100%; height: 13px;
  background-color: #7c8fcc; position: absolute; top: 9px; left: -100%; transition: all 0.5s;}
#design .year-wrap > div:hover a::before {left: 0;}
#design .year-wrap a.active::before {left: 0;}

#design_tab {margin-top: 50px; width: 100%; text-align: center; margin-bottom: 100px;}
#design_tab > div {width: 180px; height: 50px; display: inline-block; margin: 0 20px; color: #808181; background-color: #eee; text-align: center; line-height: 50px; font-size: 18px; cursor: pointer; font-weight: bold;}
#design_tab > div.on {color: #111; background-color: #fff; border: 1px solid #111; box-shadow: 10px 10px 12px rgba(0,0,0,0.15);}
#design_top {width: 100%; position: relative; margin-bottom: 50px;}
#design_top .design_top_img {width: 100%; min-height: 332px;}
#design_top .design_top_img.prod {background: url(../images/design_top1.jpg) no-repeat center center; background-size: cover;}
#design_top .design_top_img.uiux {background: url(../images/design_top2.jpg) no-repeat center center; background-size: cover;}
#design_top .design_top_img.space {background: url(../images/design_top3.jpg) no-repeat center center; background-size: cover;}
#design_top .design_top_img.ent {background: url(../images/design_top4.jpg) no-repeat center center; background-size: cover;}
#design_top img {width: 100%;}
#design_top .design_top_txt {text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 60px 20px; display: flex; flex-direction: column; justify-content: center; transform: rotate(-0.03deg);}
#design_top .title {color: #fff; font-size: 30px; padding-bottom: 60px;}
#design_top .desc {color: #fff; font-size: 18px; padding-bottom: 20px;}
#design_top .desc:last-child {padding-bottom: 45px;}
#design_top .grey {color: #999; font-size: 14px;}
#design_boxs {width: 100%;}
#design_box_wrapper {width: 100%; max-width: 1300px; padding: 0 10px;  margin: 0 auto;}
#design_box_wrap {width: 100%;text-align: center; display: flex; justify-content: left; flex-wrap: wrap; margin-bottom: 145px;}
#design_box_wrap .design_box {position: relative; cursor: pointer; overflow: hidden; max-width: 400px; max-height: 400px; width: 31.33%; /* padding: 0 1.8229vw 3.6458vw; */ margin: 0 1% 2% 1%;}
#design_box_wrap .design_box img {width: 100%; height: 100%;}
#design_box_wrap .design_box.box_none {cursor: alias; visibility: hidden;}
#design_box_wrap .box_desc {position: absolute; width: 100%; height: 100%; bottom: -100%; left: 0; transition: all 0.5s; background: rgba(0,0,0,0.7); transition: all 0.7s; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#design_box_wrap .design_box:hover .box_desc {bottom: 0;}
#design_box_wrap .box_title {font-size: 30px; font-weight: bold; color: #fff; padding-bottom: 9%;}
#design_box_wrap .box_name {font-size: 18px; color: #999; padding-bottom: 15%; line-height: 170%;}
#design_box_wrap .detail_btn {font-size: 14px; color: #fff; border: 1px solid #fff; padding: 15px 30px; transition: all 0.3s;}
#design_box_wrap .detail_btn:hover {background-color: #fff; color: #111; font-weight: bold;}

#design_view {width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 10px; position: relative;}
#design_view .view_btn {height: 80px; color: #111; line-height: 80px;}
#design_view .view_btn a {font-size: 18px; font-weight: bold;}
#design_view .view_btn .share_btn {font-size: 18px; font-weight: bold; border: 0; background-color: transparent; line-height: 80px; cursor: pointer; border: 0; outline: 0;}
#design_view .view_btn span {margin-right: 10px;}
#design_view .view_btn .view_btn_lt {float: left; display: flex;}
#design_view .view_btn .view_btn_lt a {margin-right: 50px;}
#design_view .view_btn .view_btn_rt {float: right; border: 0; outline: 0; text-align: right;}
#design_view_img {/* border: 1px solid #dfdfdf;  */margin-bottom: 35px;}
#design_view_img figure {margin-left: 0; margin-right: 0;}
#design_view_img img {width: 100%;}

@media screen and (max-width: 1280px) {
  #design_top .title {font-size: 25px; padding-bottom: 35px;}
  #design_top .desc {font-size: 16px; padding-bottom: 10px;}
  #design_top .grey {font-size: 12px; padding-top: 20px;}
  #design_box_wrap .box_title {font-size: 27px;}
  #design_box_wrap .box_name {font-size: 16px;}
  /* #design_view {padding: 0 30px;} */
  #design_view {padding: 0;}
  #design_view .view_btn {padding: 0 30px;}
  #shareBtnContainer {right: 30px;}
}

@media screen and (max-width: 1000px) {
  #design_tab {margin-bottom: 10px; margin-top: 30px; padding: 0 10px;}
  #design_tab > div {width: 30%; min-width: 180px; margin-bottom: 25px;}
}

@media screen and (max-width: 860px) {
  #design_top .title {font-size: 20px; padding-bottom: 15px;}
  #design_top .desc {font-size: 14px; padding-bottom: 5px;}
  #design_top .grey {font-size: 11px; padding-top: 10px;}
  #design_box_wrap .box_title {font-size: 20px; padding-bottom: 5%;}
  #design_box_wrap .box_name {font-size: 13px; padding-bottom: 6%;}
  #design_box_wrap .detail_btn {padding: 10px 20px;}
}

@media screen and (max-width: 768px) {
  #design .year-wrap {padding: 0 20px; max-width: 510px;}
  #design .year-wrap > div {width: 21%; margin: 0 2%;}
  #design .year-wrap > div > a {font-size: 16px;}
  #design_view .view_btn .view_btn_lt a {margin-right: 20px;}
  #design_view .view_btn a {font-size: 14px;}
  #design_view .view_btn .share_btn {font-size: 14px;}
}

@media screen and (max-width: 540px) {
  #design_tab > div {margin: 0 10px 25px 10px; min-width: 150px; font-size: 16px;}
  #design_box_wrap .box_title {font-size: 18px; padding-bottom: 5%;}
  #design_box_wrap .box_name {font-size: 11px; padding-bottom: 6%;}
  #design_box_wrap .detail_btn {padding: 7px 15px; font-size: 12px;}
}

@media screen and (max-width: 400px) {
  #design_tab > div {margin: 0 5px 25px 5px;}
  #design_box_wrap .box_title {font-size: 14px; padding-bottom: 2%;}
  #design_box_wrap .box_name {font-size: 10px; padding-bottom: 5%;}
  #design_box_wrap .detail_btn {padding: 4px 8px; font-size: 10px;}
}