#c_navigation_051_P_011-1681366070148 .e_container-7 .cbox-7-2{ flex:0 0 24%!important; } @media only screen and (max-width: 768px){ .active1 { background:#06c; } .nav_active { min-height:480px; background:#333; } .li1,.li2 ,.li3,.li4,.li5,.li6{ width:100%; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; min-height:480px; margin-bottom:10px; } } @media only screen and (min-width: 769px){ .li1,.li2 ,.li3,.li4 ,.li5,.li6{ width:calc((100% - 0px)/3); transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; min-height:540px; margin-right:0px; } .active1 { width:calc(46% - 0px) !important; background:#06c; } .nav_active { width:calc(27% - 0px) !important; min-height:540px; background:#333; } } #company li { position: relative; display: block; overflow: hidden; float:left; } #company li img { -moz-transition:all 2.4s ease 0s; -ms-transition:all 2.4s ease 0s; -o-transition:all 2.4s ease 0s; -webkit-transition:all 2.4s ease 0s; transition:all 2.4s ease 0s; } #company li { overflow:hidden; } #company li:hover img { -moz-transform:scale(1.3,1.3); -ms-transform:scale(1.3,1.3); -o-transform:scale(1.3,1.3); -webkit-transform:scale(1.3,1.3); transform:scale(1.3,1.3); } .list_img { position: absolute; top: 0; right: 0; width: auto; height: auto; max-width: none; moz-transition: all 2.4s ease 0s; -ms-transition: all 2.4s ease 0s; -o-transition: all 2.4s ease 0s; -webkit-transition: all 2.4s ease 0s; transition: all 2.4s ease 0s; display:block; height:100%; } .list_title { font-weight:bold; font-size:22px; line-height:46px; } .list_box { padding: 30px 30px 40px 30px; color: #fff; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.5); transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; flex-direction: column; justify-content: center; align-items: center; display:flex; } .list_box:hover{ color:#fff; text-shadow:0px 1px 0px rgba(0,0,0,0.75); } .active1 .list_box { background-color: rgba(0,0,0,0.4); } .list_text { font-weight:100; font-size:12px; line-height:26px; width:30em; } .more_btn { padding:0px 20px; margin-top:15%; float:left; display:block; line-height:36px; height:40px; border:2px solid rgba(255,255,255,0.5); font-size:12px; font-weight:bold; } .hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:rgba(0,0,0,0.15); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active1 { color: white; } .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active1:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .hvr-sweep-to-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:rgba(0,0,0,0.3); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active1 { color: white; } .hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active1:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .codrops-header { margin: 0 auto; padding: 2em; text-align: center; } .codrops-header h1 { margin: 0; font-weight: 300; font-size: 2.5em; } .codrops-header h1 span { display: block; padding: 0 0 0.6em 0.1em; font-size: 0.6em; opacity: 0.7; } .codrops-top { width: 100%; text-transform: uppercase; font-weight: 700; font-size: 0.69em; line-height: 2.2; } .codrops-top a { display: inline-block; padding: 0 1em; text-decoration: none; letter-spacing: 1px; } .codrops-top span.right { float: right; } .codrops-top span.right a { display: block; float: left; } .codrops-icon:before { margin: 0 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content: "\e001"; } .codrops-icon-prev:before { content: "\e004"; } section { text-align: center; } section h2 { font-weight: 300; font-size: 2em; padding: 1em 0; } .codrops-header + section { padding-top: 1.5em; } .bt6{ font-weight:bold; line-height:2em; font-size:1.25rem; color:#454545; } @media screen and (max-width: 25em){ .codrops-icon span { display:none; } } .li1{ width:calc((100% - 0px)/3); } .li2{ width:calc((100% - 0px)/3); } .li3{ width:calc((100% - 0px)/3); } .li4{ width:calc(18% - 25px); } .li5{ width:calc(13% - 5px); } .li6{ width:calc(13% - 5px);margin-right:0} @media only screen and (max-width: 768px){ .list_title{ font-size:18px!important; } .li3{ width:100% !important } .li1{ width:100% !important } .li2{ width:100% !important } .more_btn{ opacity: 1!important; } #c_static_001_P_516-1645059733196 .e_html-1 { display-radio: 1; background_radio: 1; min-width: 0px; max-height: 100%; min-height: 550px; max-width: 1560px; width: 94%; margin-left: auto; margin-right: auto; margin-top: 30px; height: 3000px !important; } } .more_btn{ padding:0px 20px; margin-top:15%; float:left; line-height:36px; height:40px; border:1px solid #b10a13; background:#b10a13; font-size:12px; font-weight:bold; opacity: 0; text-align:center; transition: all .5s ease; width:90%; } .active1 .more_btn{ margin-top:15%; width:90%; opacity: 1; } .list_title{ font-weight:bold; font-size:26px; line-height:46px; text-align:left; } .list_text{ font-weight:100; font-size:14px; line-height:30px; margin-top:30px; width:100%; text-align:center; } #company li img{ -moz-transition:all 2.4s ease 0s; -ms-transition:all 2.4s ease 0s; -o-transition:all 2.4s ease 0s; -webkit-transition:all 2.4s ease 0s; transition:all 2.4s ease 0s; display:block; } .list_box{ padding:65px 30px 40px 30px; color:#fff; position:absolute; top:0; left:0; box-sizing:border-box; width:100%; height:100%; z-index:1; background-color:rgba(0,0,0,0.5); transition:0.8s; -moz-transition:0.8s; -webkit-transition:0.8s; -o-transition:0.8s; } @media only screen and (max-width: 768px){ #company li img{ width:100%; } .list_box { padding: 25px 30px 40px 20px; } .li1, .li2, .li3, .li4, .li5, .li6 { width: 100%; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; min-height: 180px; margin-bottom: 10px; width: 100% !important; } } .list_title{ font-weight:bold; font-size:26px; line-height:33px; text-align:left; }