#body #btn-more .inner, #body #btn-safety .inner, #body #btn-about-industry .inner { width:100%; height:100%; position:relative; overflow:hidden; cursor:pointer; padding:0} #body #btn-more .inner-text, #body #btn-safety .inner-text, #body #btn-about-industry .inner-text { padding:10px; color:#fff; font-size:16px; font-weight:500; line-height:1.4;} #body #btn-more .arrow, #body #btn-safety .arrow, #body #btn-about-industry .arrow { background:url(../images/btn-arrow-left-right.png) 17px 0; height:34px; width:17px; position:absolute; bottom:10px; right:10px;} #body #btn-more:hover .arrow, #body #btn-safety:hover .arrow, #body #btn-about-industry:hover .arrow { background-position: 17px 34px;} #body #btn-more .close, #body #btn-safety .close, #body #btn-about-industry .close { background:url(../images/btn-close.png);height:53px; width:53px; position:absolute; bottom:-53px; right:0px; display:none;} #body #btn-more .close:hover, #body #btn-safety .close:hover, #body #btn-about-industry .close:hover { background-position: 0 53px;} #body #btn-more.selected .inner, #body #btn-safety.selected .inner, #body #btn-about-industry.selected .inner { cursor:default;} #body #btn-more.selected .arrow, #body #btn-safety.selected .arrow, #body #btn-about-industry.selected .arrow { display:none!important;} #body #btn-more.selected .close, #body #btn-safety.selected .close, #body #btn-about-industry.selected .close { display:block!important; cursor:pointer} /* #btn-about-industry .inner{padding:0px;width:100%;height:100%;position:relative;overflow:hidden;cursor:pointer;} #btn-about-industry .inner-text{padding:10px; color:#fff; font-size:16px;font-weight:bold;font-family: Arial, Helvetica, sans-serif;} #btn-about-industry .arrow{background:url(/Content/images/btn-arrow-left-right.png) 17px 0;height:34px; width:17px; position:absolute; bottom:10px; right:10px;} #btn-about-industry:hover .arrow {background-position: 17px 34px;} #btn-about-industry .close{background:url(/Content/images/btn-close.png);height:53px; width:53px;position:absolute; bottom:-53px; right:0px;display:none;} #btn-about-industry .close:hover{background-position: 0 53px;} #btn-about-industry.selected .inner{cursor:default;} #btn-about-industry.selected .arrow{display:none!important;} #btn-about-industry.selected .close{display:block!important;cursor:pointer} /*#btn-about-industry.selected .black-mask{display:none!important;}*/ /* #btn-safety .black-mask { width:100%; background:#000;height:100%;position:absolute; top:0; left:0;}*/ /* #btn-safety.selected .black-mask { display:none!important;}*/ #btn-safety.ec-circle, #btn-more.ec-circle, #btn-about-industry.ec-circle { width: 199px; height: 163px; border:1px solid #ffffff; display:block; outline:none; -webkit-box-shadow: inset 0 0 0px 199px rgba(0,0,0,0.6), inset 0 0 0 0px #fff; -moz-box-shadow: inset 0 0 0px 199px rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff; box-shadow: inset 0 0 0px 199px rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff; -webkit-transition: box-shadow 400ms ease-in-out; -moz-transition: box-shadow 400ms ease-in-out; -o-transition: box-shadow 400ms ease-in-out; -ms-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } #btn-safety.ec-circle:hover, #btn-more.ec-circle:hover, #btn-about-industry.ec-circle:hover { -webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff, 0 0 10px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff, 0 0 10px rgba(0,0,0,0.3); box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff, 0 0 10px rgba(0,0,0,0.3); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";} #btn-safety.selected, #btn-more.selected, #btn-about-industry.selected { -webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff, 0 0 10px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff, 0 0 10px rgba(0,0,0,0.3); box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff, 0 0 10px rgba(0,0,0,0.3); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* ========================================================================== Media Style ============================================================================= */ @media only screen and (max-width:767px) { #body #btn-more .close, #body #btn-safety .close, #body #btn-about-industry .close { background: none; height: auto; bottom: 0; } #btn-safety.ec-circle, #btn-more.ec-circle, #btn-about-industry.ec-circle { width:100%; height:auto; background-size:cover;} #btn-safety .arrow, #btn-more .arrow, #btn-about-industry .arrow { display:none; } #btn-safety .inner-text, #btn-more .inner-text, #btn-about-industry .inner-text { height:40px; font-size:14px;} #btn-safety .inner-text:after, #btn-more .inner-text:after, #btn-about-industry .inner-text:after { content:">"; display:inline-block; padding-left:5px; line-height:0; font-size:20px; } #btn-safety .close, #btn-more .close, #btn-about-industry .close { background-image:none; background-color:#06c; width:40px; height:40px; position:absolute; top: 0;} #btn-safety .close:after, #btn-more .close:after, #btn-about-industry .close:after { content:"X"; display:block; line-height:0; font-size:20px; color:#fff; text-align:center; margin:0 auto; margin-top:20px; } #btn-safety.ec-circle:hover, #btn-more.ec-circle:hover, #btn-about-industry.ec-circle:hover { webkit-box-shadow: inset 0 0 0px 199px rgba(0,0,0,0.6), inset 0 0 0 0px #fff; -moz-box-shadow: inset 0 0 0px 199px rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff; box-shadow: inset 0 0 0px 199px rgba(0,0,0,0.6), inset 0 0 0 0px #ffffff; -webkit-transition: box-shadow 400ms ease-in-out; -moz-transition: box-shadow 400ms ease-in-out; -o-transition: box-shadow 400ms ease-in-out; -ms-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" } }