﻿/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 15 version
*/

/* 公共 */
.safe-zone {max-width: 1400px;margin: 0 auto;width: 100%;padding-left:50px;padding-right:50px;position: relative;}
.module{padding-top:120px;padding-bottom: 120px;}

/* culture */
.page-culture .culture{padding: 60px 0 0 ;}
.page-culture .culture .content{width: 560px;height: 560px;border-radius: 50%;margin: 0 auto;position: relative;}
.page-culture .culture .center{position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-45%);transform: translate(-50%,-45%);}
.page-culture .culture #svg{-webkit-transition: all .5s ease;transition: all .5s ease;}
.page-culture .culture .tab{width: 50px;height: 50px;border-radius: 50%;background-color: #fff;position: absolute;-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .08);box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .08);cursor: pointer;z-index: 10;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-transition: all .5s ease;transition: all .5s ease;}
.page-culture .culture .tab.active{background-color: #d3291a;}
.page-culture .culture .tab i{font-size: 24px;color: #d3291a;}
.page-culture .culture .tab.active i{color: #fff;}
.page-culture .culture .tab1{top: 75px;left: 50%;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}
.page-culture .culture .tab2{right: 90px;bottom: 155px;}
.page-culture .culture .tab3{left: 90px;bottom: 155px;}
.page-culture .culture .tab p{position: absolute;left: 50%;font-size: 20px;white-space: nowrap;line-height: 1;cursor: default;color: #333;}
.page-culture .culture .tab1 p{top: -30px;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}
.page-culture .culture .tab2 p{bottom: -30px;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}
.page-culture .culture .tab3 p{bottom: -30px;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}
.page-culture .culture .text-wrap p{position: absolute;font-size: 17px;line-height: 1.6;text-align: center;}
.page-culture .culture .text-wrap p.active{font-weight: bold;color:#d3291a;}
.page-culture .culture .text-wrap p:first-child{top: -50px;left: 50%;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}
.page-culture .culture .text-wrap p:nth-child(2){bottom: 58px;right: -490px; text-align: left;}
.page-culture .culture .text-wrap p:nth-child(2).active{right: -530px;}
.page-culture .culture .text-wrap p:nth-child(3){bottom: 58px;left: -220px; text-align: right;}
.page-culture .culture .text-wrap p:nth-child(3).active{left: -220px;}

@media screen and (max-width:1199px){

  /* 公共 */
  .module{padding-top:80px;padding-bottom: 160px;}

  /* culture */
  .page-culture .culture .tab p{font-size: 18px;}
  .page-culture .culture .text-wrap{margin-top: 20px;}
  .page-culture .culture .text-wrap p{font-size: 15px;display: none;position: static;-webkit-transform: translate(0,0)!important;transform: translate(0,0)!important;}
  .page-culture .culture .text-wrap p.active{display: block;}

}

@media screen and (max-width:767px){

  /* 公共 */
  .module{padding-top:30px;padding-bottom: 100px;}
  .safe-zone {padding-left:15px;padding-right:15px;}

  /* culture */
  .page-culture .culture .content{width: 90vw;height: 90vw;}
  .page-culture .culture .center{width: 50vw;}
  .page-culture .culture .tab{width: 40px;height: 40px;}
  .page-culture .culture .tab i{font-size: 20px;}
  .page-culture .culture .tab1{top: 12vw;left: 50%;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}
  .page-culture .culture .tab2{right: 15vw;bottom: 25vw;}
  .page-culture .culture .tab3{left: 15vw;bottom: 25vw;}
  .page-culture .culture .tab p{font-size: 16px;}
  .page-culture .culture .text-wrap p{font-size: 14px;line-height: 1.6;}
  .page-culture .culture .tab1 p{top: -6vw;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}
  .page-culture .culture .tab2 p{bottom: -6vw;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}
  .page-culture .culture .tab3 p{bottom: -6vw;-webkit-transform: translate(-50%,0);transform: translate(-50%,0);}

}