/*nav sub end*/ /* nav */ html.overflow { height: auto; overflow: hidden;} html.overflow .p-menuModal { -webkit-overflow-scrolling: touch; overflow-y: scroll; max-height: 100%;} .menu_btn { float: right; margin-top: 43px; display: inline-block; width: 32px; padding: 10px;} .menu_btn.is-hidden { visibility: hidden;} .menu_btn > * { display: block; height: 2px; background-color: #fff; -webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0s; transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0s; margin-bottom: 8px;} .is-white .menu_btn > * { background-color: #fff;} .menu_btn .-top { width: 32px;} .menu_btn .-middle { width: 32px;} .menu_btn .-bottom { width: 32px; margin-bottom: 0;} .menu_btn:hover .-top { width: 30px;} .menu_btn:hover .-middle { width: 40px;} .menu_btn:hover .-bottom { width: 50px;} .p-menuModal { position: fixed; z-index: 999; left: 0;left: 100%; top: 0; width: 100%; height: 100%; color: #fff; background-color: #333333; overflow: auto; opacity:1!important; transform:translate(0)!important;} .p-menuModal.is-hidden {} .modal_closebtn { display: block; width: 52px; height: 42px; width: 22px; height: 22px; padding: 10px 15px; position: absolute; z-index: 999; right: 2.5%; top: 21px;} .modal_closewrap { position: relative; display: block; width: 30px; height: 30px;} .modal_closewrap .-left { position: absolute; left: 0; top: 50%; display: block; width: 28px; height: 2px; background-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);} .modal_closewrap .-left:before { content: ""; position: absolute; z-index: 1; left: 0; top: 50%; display: block; width: 32px; height: 4px; background-color: #333333; margin-top: -2px; margin-left: -1px; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform .8s ease 0s; transition: -webkit-transform .8s ease 0s; transition: transform .8s ease 0s; transition: transform 0.8s ease 0s, -webkit-transform 0.8s ease 0s;} :hover > .modal_closewrap .-left:before { -webkit-transform: translateX(100%); transform: translateX(100%);} .modal_closewrap .-right { display: block; position: absolute; left: 0; top: 50%; width: 28px; height: 2px; background-color: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} .modal_closewrap .-right:after { content: ""; position: absolute; z-index: 1; left: 0; top: 50%; display: block; width: 32px; height: 4px; background-color: #333333; margin-top: -2px; margin-left: -1px; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform .8s ease .1s; transition: -webkit-transform .8s ease .1s; transition: transform .8s ease .1s; transition: transform 0.8s ease 0.1s, -webkit-transform 0.8s ease 0.1s;} :hover > .modal_closewrap .-right:after { -webkit-transform: translateX(100%); transform: translateX(100%);} .modal_content { 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; height: 100%;} .modal_menu { padding-top: 20px;} .modal_menu ul li { margin-bottom: 20px; text-align: center;} .modal_menu ul li > a { display: block; position: relative; padding-bottom: 12px; margin-bottom: 6px; font-size: 18px; color: #d8d7d7;} .modal_menu ul li > a:after { position: absolute; left: 50%; margin-left: -10px; bottom: 0; width: 20px; height: 1px; background: #fe8f00; content: "";} .modal_menu dl dd { display: inline-block;} .modal_menu dl dd a { line-height: 30px; font-size: 14px; color: #a4a4a4; -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);} .modal_menu dl dd a:hover { color: #fff;} .modal_menu dl dd i { font-size: 14px; color: #a4a4a4;} .modal_menu dl dd:last-child i { display: none;} .modal_menu ul li a em { display: block; position: relative; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);} .modal_menu ul li a em:before { left: 0; position: absolute; top: 0; clip: rect(0, 0, 100px, 0); content: attr(data-content); color: #fe8f00; display: inline-block; zoom: 1; -webkit-transition: clip 1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: clip 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%;} .modal_menu ul li:hover em:before { clip: rect(0, 200px, 100px, 0);} .modal_menu ul li > a:before { content: ""; width: 30px; height: 1px; background: #fe8f00; position: absolute; left: 50%; margin-left: -15px; bottom: 0; transform-origin: center; -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9;} .modal_menu ul li:hover > a:before { -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform-origin: 0; transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9;} .menu_btn { display: none;} /*popup*/ .hidden_search .text { width: 100%; height: 20px; padding: 8px 0; font-size: 14px; color: #444;} .hidden_search .btn { display: block; background: url(../images/search_icon2.jpg) no-repeat center center; position: absolute; right: 0; top: 0; height: 36px; width: 36px; text-indent: -999em;} .hidden_search .search_wrap { border: 1px solid #e4eaec; position: relative; padding-right: 56px; padding-left: 20px; height: 36px;} .hidden_search .close_btn { position: absolute; right: 0; top: 0; padding: 10px; width: 22px; height: 22px; transition: 0.5s;} .hidden_search .close_btn:after, .hidden_search .close_btn:before { background: #cccccc; width: 20px; height: 3px; display: block; transition: all 0.3s ease 0s; content: ""; position: absolute; left: 10px; top: 11px;} .hidden_search .close_btn:before { transform-origin: left bottom; transform: rotate(45deg);} .hidden_search .close_btn:after { transform-origin: left top; transform: rotate(-45deg); top: 25px;} .hidden_search .close_btn:hover { transform: rotate(360deg);} .hidden_search .close_btn:hover:after, .hidden_search .close_btn:hover:before { background: #3e2528;} .pop .cd-popup-close { position: absolute; right: 0; top: 0; padding: 10px; width: 22px; height: 22px; transition: 0.5s;} .pop .cd-popup-close:after, .pop .cd-popup-close:before { background: #cccccc; width: 20px; height: 3px; display: block; transition: all 0.3s ease 0s; content: ""; position: absolute; left: 10px; top: 11px;} .pop .cd-popup-close:before { transform-origin: left bottom; transform: rotate(45deg);} .pop .cd-popup-close:after { transform-origin: left top; transform: rotate(-45deg); top: 25px;} .pop .cd-popup-close:hover { transform: rotate(360deg);} .pop .cd-popup-close:hover:after, .pop .cd-popup-close:hover:before { background: #2d1b1d;} .hidden_search.on { display: block;} .cd-popup { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; z-index: 9999;} .cd-popup.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s; transition: opacity 0.3s 0s, visibility 0s 0s;} .cd-popup-container { position: relative; height: 36px; padding: 40px; background: #fff; width: 60%; margin: 0 auto; top: 50%; margin-top: -58px; background: #FFF; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s;} .is-visible .cd-popup-container { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} @media only screen and (max-width: 1200px) { .theme_header .theme_right{ display: none;} .menu_btn { display: block;} .modal_content { align-items: flex-start;} } @media only screen and (max-width: 991px) { } @media only screen and (max-width: 768px) { }