@charset "utf-8";

.iframe iframe{display: none;}
.iframe iframe:nth-child(1){display: block; width: 100%;}
.iframe iframe:nth-child(2){ width: 1700px;}
.iframe iframe:nth-child(3){ width: 1024px;}
.iframe iframe:nth-child(4){ width: 800px;}

.res{position: fixed;left: 50%;top: 0;transform: translateX(-50%);}
.res ul{ display: none;position: absolute;left: 50%;top: 0;min-width: 224px; transform: translateX(-50%);text-align: center; }
.res ul:first-child{display: block;}
.res li{ float: left; position: relative;padding-top:20px; width: 56px;text-align: center;}
.res li:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 3px;background:transparent; transition: all .5s;}
.res li.on:after{ background: #000;}
.res li:hover:after{ background: #8c8b8c;}
.res li a i{font-size: 32px;}
.res li a img{width: 35px;height: 35px;}

.common{position: fixed;left: 50%;top: 0;transform: translateX(-50%);}
.common li a i{font-size: 32px;}
.common li{ position: relative;padding-top:20px; width: 56px;text-align: center;}
.common li:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 3px;background:transparent; transition: all .5s;}
.common li.on:after{ background: #000;}
.common li:hover:after{ background: #8c8b8c;}
.common li a img{width: 35px;height: 35px;}