.mobile{ width: 100%; float: left; } .mobile-inner{ width: 100%; margin-right: auto; margin-left: auto; position: relative; height: 50px; } .mobile-inner img{ margin-top: 8px; } .mobile-inner p{ color: #676767; line-height: 25px; font-size: 16px; padding-bottom: 30px; padding-right: 30px; padding-left: 30px; margin:0px; } .mobile-inner-header{ width: 100%; position: absolute; top: 0px; left: 0px; } .mobile-inner-header-icon{ color: #007aff; height: 50px; font-size:25px; text-align: center; float:right; width: 50px; position: relative; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; transition: background 0.5s; } .mobile-inner-header-icon:hover{ background-color: rgba(255,255,255,0.2); cursor: pointer; } .mobile-inner-header-icon span{ position: absolute; left: calc((100% - 25px) / 2); top: calc((100% - 1px) / 2); width: 25px; height: 3px; background-color: #007aff; } .mobile-inner-header-icon span:nth-child(1){ transform: translateY(4px) rotate(0deg); } .mobile-inner-header-icon span:nth-child(2){ transform: translateY(-4px) rotate(0deg); } .mobile-inner-header-icon-click span:nth-child(1){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickfirst; } .mobile-inner-header-icon-click span:nth-child(2){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: clicksecond; } .mobile-inner-img { width: 60%; } @keyframes clickfirst { 0% { transform: translateY(4px) rotate(0deg); } 100% { transform: translateY(0) rotate(45deg); } } @keyframes clicksecond { 0% { transform: translateY(-4px) rotate(0deg); } 100% { transform: translateY(0) rotate(-45deg); } } .mobile-inner-header-icon-out span:nth-child(1){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .mobile-inner-header-icon-out span:nth-child(2){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } @keyframes outfirst { 0% { transform: translateY(0) rotate(-45deg); } 100% { transform: translateY(-4px) rotate(0deg); } } @keyframes outsecond { 0% { transform: translateY(0) rotate(45deg); } 100% { transform: translateY(4px) rotate(0deg); } } .mobile-inner-nav{ width: 100%; position: absolute; top: 50px; left: 0px; padding-top: 15px; display: none; z-index: 9;background-color: #fff; } .mobile-inner-nav a{ display: inline-block; line-height: 50px; text-decoration: none; width: 90%; margin-left: 5%; color: #5a5a5a; border-bottom: solid 1px rgba(40, 40, 40, 0.4); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; font-weight:300; font-size: 14px; } .mobile-inner-nav a:hover{ color: rgba(46, 148, 239, 0.9); border-bottom: solid 1px rgba(46, 148, 239, 0.5); }