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

#about { margin: 0 auto; padding: 60px 0; }
#about>.title { text-align: center; margin: 0 auto; padding: 50px 0; }
#about>.title>h3 { font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto; }

#about>.statistics { padding: 20px 0; text-align: center; margin: 0 auto; }
#about>.statistics .item { display: inline-block; float: left; width: 25%; vertical-align: top; box-sizing: border-box; text-align: center; }
#about>.statistics .item>.icon { text-align: center; }
#about>.statistics .item>.icon>i { font-size: 3rem; color: #999; }
#about>.statistics .item>.num { color: rgba(0,175,110,1); padding-bottom: 10px; }
#about>.statistics .item>.num>span { display: inline-block; vertical-align: top; font-size: 6rem; font-weight: bold; }
#about>.statistics .item>.num>em { position: relative; top: 30px; font-size: 2.4rem; padding: 0 5px; font-style: normal; }
#about>.statistics .item>.num>em.big { font-size: 4.2rem; font-weight: 200; top: 20px; }
#about>.statistics .item>.txt { font-size: 1.6rem; color: #999; }

#about>.profile { margin: 0 auto; padding: 50px 0; }
#about>.profile>.text { font-size: 1.6rem; color: #333; line-height: 2.8rem; }
#about>.profile>.text>p { margin-bottom: 20px; }

#about>.rd { position: relative; margin: 50px auto; }
#about>.rd .tab-box { float: left; width: 64%; }
#about>.rd .tab-box>.tab-item { position: relative; display: none; text-align: left; background: #666; }
#about>.rd .tab-box>.tab-item>.box { position: absolute; z-index: 20; left: 0; top: 0; box-sizing: border-box; padding: 80px 10%; width: 70%; background: rgba(255,255,255,.8); }
#about>.rd .tab-box>.tab-item>.box>.tit { font-size: 3rem; color: rgba(0,175,110,1); }
#about>.rd .tab-box>.tab-item>.box>.txt { padding: 20px 0; font-size: 2rem; line-height: 3rem; color: #666; }
#about>.rd .tab-box>.tab-item>.img { text-align: right; }
#about>.rd .tab-box>.tab-item>.img>img { width: 100%; height: auto; }
#about>.rd .tab-box>.current { display: block; }
#about>.rd .tab-nav { position: absolute; z-index: 10; right: 0; top: 0; width: 36%; height: 100%; box-sizing: border-box; padding: 5% 0; background: rgba(0,175,110,1); overflow: hidden; }
#about>.rd .tab-nav:after { position: absolute; z-index: 1; right: -10%; bottom: -25%; width: 100%; height: 100%; opacity: .085; background: url("../img/logo_big.png") no-repeat; content: ''; }
#about>.rd .tab-nav>ul { position: relative; z-index: 30; display: block; }
#about>.rd .tab-nav>ul>li { display: block; text-align: left; margin-bottom: 3px; }
#about>.rd .tab-nav>ul>li>a { position: relative; display: block; width: 300px; font-size: 1.6rem; color: #fff; background: rgba(0,0,0,.5); height: 60px; line-height: 60px; padding: 0 20px; transition: all .35s; }
#about>.rd .tab-nav>ul>li>a:after { position: absolute; z-index: 10; left: -30px; bottom: 0; width: 0; height: 0; border-bottom: 60px solid rgba(255,255,255,1); border-left: 30px solid transparent; opacity: 0; content: ''; transition: all .35s; }
#about>.rd .tab-nav>ul>li.active>a { width: 340px; background: rgba(255,255,255,1); color: rgba(0,175,110,1); }
#about>.rd .tab-nav>ul>li.active>a:after { opacity: 1; }

#about>.video { position: relative; margin: 0 auto; text-align: center; }
#about>.video>a { position: absolute; z-index: 30; display: block; top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); }
#about>.video>a>.icon { width: 100%; height: 100%; background: url("../img/play_button.png") center/contain no-repeat; }
#about>.video>a:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; content: ''; z-index: -1; }
#about>.video>a:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; content: ''; z-index: -1; }
#about>.video>a:before { animation: scale 2s ease-out infinite; background: #fff; opacity: 0.5; animation-delay: 0; }
#about>.video>a:after { animation: scale2 2s ease-out infinite; background: #fff; opacity: 0.3; animation-delay: 0; }
#about>.video>.img { position: relative; text-align: center; margin: 0 auto; border-radius: 50px; overflow: hidden; }
#about>.video>.img:after { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); content: ''; transition: all .35s; }
#about>.video>.img>img { width: 100%; height: auto; }
#about>.video>.img:hover:after { background: rgba(0,0,0,0); }
#about>.video>.media { display: none; width: 86%; height: 530px; box-sizing: border-box; padding: 0 30px; background: #000; border-radius: 50px; overflow: hidden; margin: 0 auto; }
#about>.video>iframe { display: none; width: 86%; height: 530px; box-sizing: border-box; padding: 0 30px; background: #000; border-radius: 50px; overflow: hidden; margin: 0 auto; }

@keyframes scale {0% {transform:translate(-50%, -50%) scale(1);opacity:.9;}100% {transform:translate(-50%, -50%) scale(7);opacity:0;}}
@keyframes scale2 {0% {transform:translate(-50%, -50%) scale(1);opacity:.9;}100% {transform:translate(-50%, -50%) scale(10);opacity:0;}}

#about>.nav { margin: 0 auto; padding: 50px 0 100px 0; }
#about>.nav .item { display: block; float: left; width: 25%; padding: 0 30px; text-align: center; border-radius: 10px; }
#about>.nav .item>a { position: relative; display: block; padding: 30px 20px; background: #edf5f5; border: 2px solid #edf5f5; border-radius: 10px; transition: all .35s; }
#about>.nav .item>a:after { position: absolute; z-index: 10; left: 50%; bottom: -10px; margin-left: -10%; width: 20%; height: 2px; background: #999; border-radius: 100%; content: ''; filter: blur(1px); opacity: 0; transition: all .35s; }
#about>.nav .item>a>.icon { text-align: center; padding-bottom: 20px; }
#about>.nav .item>a>.icon>i { font-size: 5.6rem; color: #999; transition: all .35s; }
#about>.nav .item>a>.tit { font-size: 2rem; font-weight: 600; color: rgba(0,175,110,1); }
#about>.nav .item>a:hover { background: none; transform: translateY(-10px); }
#about>.nav .item>a:hover:after { bottom: -30px; opacity: 1; margin-left: -15%; width: 30%; filter: blur(5px); }
#about>.nav .item>a:hover>.tit { color: rgba(0,175,110,1); }

@media only screen and (max-width: 1480px) {
#about>.rd .tab-box>.tab-item>.box>.txt { font-size: 1.8rem; line-height: 2.8rem; }
}

@media only screen and (max-width: 1280px) {
#about>.rd .tab-box>.tab-item>.box>.tit { font-size: 2.4rem; }
#about>.rd .tab-box>.tab-item>.box>.txt { font-size: 1.6rem; line-height: 2.4rem; }
#about>.nav .item { width: 50%; margin-bottom: 30px; }
}

@media only screen and (max-width: 1200px) {
#about>.statistics .item>.num>span { font-size: 5rem; }
#about>.statistics .item>.num>em { top: 24px; }
#about>.statistics .item>.num>em.big { top: 10px; }

#about>.rd .tab-box { float: none; width: 100%; padding: 0; }
#about>.rd .tab-box>.tab-item>.box { bottom: 0; top: auto; }
#about>.rd .tab-nav { float: none; position: relative; width: 100%; height: auto; padding: 80px 0; }
#about>.rd .tab-nav>ul { width: 70%; margin: 0 auto; }
#about>.rd .tab-nav>ul>li { display: block; float: left; width: 32.66%; margin-right: 1%; text-align: center; margin-bottom: 0; }
#about>.rd .tab-nav>ul>li:last-child { margin-right: 0; }
#about>.rd .tab-nav>ul>li>a { position: relative; display: block; width: auto; font-size: 1.6rem; color: #fff; background: rgba(0,0,0,.5); height: 60px; line-height: 60px; padding: 0 20px; transition: all .35s; }
#about>.rd .tab-nav>ul>li.active>a { width: auto; }
#about>.rd .tab-nav>ul>li.active>a:after { opacity: 0; }
}

@media only screen and (max-width: 980px) {
#about { padding: 30px 0; }
#about>.title { padding: 10px 0; }
#about>.title>h3 { font-size: 3.2rem; }
#about>.statistics .item>.num>span { font-size: 4rem; }
#about>.video>a { width: 60px; height: 60px; }
}

@media only screen and (max-width: 860px) {
#about>.statistics .item>.icon>i { font-size: 2.4rem; ; }
#about>.statistics .item>.num>span { font-size: 4rem; }
#about>.statistics .item>.num>em { top: 20px; font-size: 1.8rem; }
#about>.statistics .item>.num>em.big { font-size: 3.2rem; top: 12px; }
#about>.statistics .item>.txt { font-size: 1.4rem; }

#about>.profile>.text { font-size: 1.4rem; line-height: 2.4rem; }

#about>.video>.media { height: 330px; }
#about>.video>iframe { height: 330px; }

#about>.rd .tab-nav>ul>li>a { font-size: 1.4rem; }
}

@media only screen and (max-width: 780px) {
#about>.statistics .item { width: 50%; padding-bottom: 30px; }
#about>.profile { padding: 30px 0; }
}

@media only screen and (max-width: 640px) {
#about>.title>h3 { font-size: 2.8rem; }

#about>.rd .tab-nav { padding: 40px 0; }
#about>.rd .tab-nav>ul>li>a { height: 40px; line-height: 40px; padding: 0 10px; }

#about>.rd .tab-box>.tab-item>.box { padding: 30px 10%; width: 100%; }

#about>.nav .item { float: none; width: 100%; }

#about>.video>.media { height: 240px; border-radius: 0; padding: 0; }
#about>.video>iframe { height: 240px; border-radius: 0; padding: 0; }
}

@media only screen and (max-width: 520px) {
#about>.title>h3 { font-size: 2.4rem; }

#about>.statistics .item { display: block; float: none; width: 100%; background: #f7f7f7; margin-bottom: 3px; padding: 20px 0; }

#about>.video>a { width: 40px; height: 40px; }
#about>.video>a:before { width: 10px; height: 10px; }
#about>.video>a:after { width: 10px; height: 10px; }
#about>.video>.img { width: 100% !important; border-radius: 30px; }

#about>.video>.media { height: 200px; }
#about>.video>iframe { height: 200px; }

#about>.rd .tab-nav>ul { text-align: center; }
#about>.rd .tab-nav>ul>li { display: block; float: none; width: 100%; margin-right: 0; margin-bottom: 3px; }
#about>.rd .tab-nav>ul>li>a { display: block; }
#about>.rd .tab-box>.tab-item>.box { position: relative; }
#about>.rd .tab-box>.tab-item>.box>.tit { font-size: 2rem; }
#about>.rd .tab-box>.tab-item>.box>.txt { font-size: 1.4rem; line-height: 2.4rem; }

#about>.nav { padding: 30px 0; }
#about>.nav .item { padding: 0 10px; }
#about>.nav .item>a { position: relative; display: block; padding: 30px 20px; background: #edf5f5; border: 2px solid #edf5f5; border-radius: 10px; transition: all .35s; }
#about>.nav .item>a>.icon>i { font-size: 5rem; }
#about>.nav .item>a>.tit { font-size: 1.8rem; }
}