/* CSS Document */
@import url("core.css");
@import url("animate.css");
/*******/
@import url("fonts.css?v=106");
@import url("menu.css?v=11");
/* Scroll
========================================================================== */
.header { background:#fff }
.column_solution { background:#f1f2f6; }
.column { max-width:1530px; margin:0 auto; width:100vw; padding:100px 0px }
/* Scroll
========================================================================== */
.mouse { width: 15px; height:22px; border:2px solid #fff; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; position:absolute; bottom:4.71%; left:50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index:10; cursor:pointer; }
.mouse:before { position: absolute; content: "SCROLL"; margin: auto; top: -26px; left: -1.5em; font-size:12px; letter-spacing: .1em; color:#fff }
.mouse:after { content: ''; position: absolute; top: 4px; left: 50%; margin-left: -1px; background-color: #fff; width: 2px; height: 3px; border-radius: 2px; opacity: 1; -webkit-transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px); transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px); -webkit-animation: scroll 1.5s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; animation: scroll 1.5s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
@media screen and (max-width:767px) {
.mouse {
display: none;
}
}
@-webkit-keyframes scroll { 0%, 20% {
 -webkit-transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
 transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
}
 10% {
 -webkit-transform: translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);
 transform: translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);
 opacity: 1;
}
 100% {
 -webkit-transform: translateY(10px) scaleY(2.5) scaleX(0.5) translateZ(0px);
 transform: translateY(10px) scaleY(2.5) scaleX(0.5) translateZ(0px);
 opacity: 0.01;
}
}
@keyframes scroll { 0%, 20% {
 -webkit-transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
 transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
}
 10% {
 -webkit-transform: translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);
 transform: translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);
 opacity: 1;
}
 100% {
 -webkit-transform: translateY(10px) scaleY(2.5) scaleX(0.5) translateZ(0px);
 transform: translateY(10px) scaleY(2.5) scaleX(0.5) translateZ(0px);
 opacity: 0.01;
}
}
/*****/
.case_h1 { position:relative; float:left; width:100% }
.case_h1 img { display:block; max-width:100%; height:auto; float:right }
.case_h1 .justify-content { position:absolute; left:0; top:0; color:#fff; z-index:10; padding-top:0px; }
.case_h1 h1 { font-style:normal; font-size:40px; }
.case_h1 span { width:100%; height:100%; display:block; position:absolute; left:0; top:0; z-index:1; filter:alpha(opacity=50); -webkit-opacity:.5; -moz-opacity:.5; -khtml-opacity:.5; -ms-opacity:.5; -o-opacity:.5; opacity:.5 }
.column_solution img { width:100%; height:auto; display:block }
.column_info { margin-top:-100px; position:relative; z-index:9; }
.column_info .column { padding-top:50px; background:#fff; position:relative; padding-bottom:0; }
.column_solution .label { width:350px; height:100px; position:absolute; left:0; bottom:-99px; z-index:11; -webkit-border-bottom-right-radius:80px; border-bottom-right-radius:80px; -moz-border-bottom-right-radius:80px; font-size:30px; font-weight:bold; color:#fff; padding-left:50px; line-height:90px; }
.case_lt { float:left; padding-top:70px; padding-left:50px; font-size:16px; width:45%; margin-right:5% }
.case_lt b { font-size:40px; font-weight:bold; }
.case_rt { float:left; width:40%; font-size:16px; }
.case_rt b { font-size:20px; font-weight:bold; display:block; margin-bottom:15px; }
.case_view { float:right; padding-right:50px }
.case_view span { font-size:25px; border:1px solid #005480; color:#fff; background:#005480; width:60px; height:60px; text-align:center; line-height:60px; -webkit-border-radius: 50%; border-radius: 50%; -moz-border-radius: 50%; cursor:pointer; }
.column_desc .column { padding-top:50px; font-size:16px; }
.column_desc img { max-width:100%; vertical-align:top; height:auto }
.case_rt p{ position:relative; padding-left:78px}
.case_rt p span{ position:absolute; left:0; top:0}
.column_desc{ border:1px solid #eee; margin-top:40px}
@media(max-width:1650px){
.case_h1 .justify-content{ padding-top:0}
.column{ max-width:100%; padding:100px 40px}
}
@media(max-width:1430px){
.column{ max-width:100%; padding:100px 80px}	
.column_solution .column{ padding:0 80px}	
.column_info{ margin-top:0}
.case_view{ padding-right:0}
.case_rt{ width:45%}
.case_lt{ width:50%; margin-right:0; padding-left:0; padding-right:60px}
.case_rt{ width:50%}
.case_view{ position:absolute; right:80px; top:50px}
.case_h1 h1{ text-align:center}
}
@media(max-width:1300px){
.case_h1 .justify-content{ padding:0 50px}	
.column_solution .column{ padding:0}
.case_h1 h1{ font-size:30px}
}
@media (max-width: 1250px){
#fixed_height{ height:117px}
.case_view{ right:40px}
}
@media (max-width:1000px){
.case_lt{ width:100%; padding-right:0}
.case_rt{ width:100%;    margin-top: 20px;}
.column_solution .label {
    width: 300px;
    height: 80px;
    position: absolute;
    left: 0;
    bottom: -80px;
    z-index: 11;
    -webkit-border-bottom-right-radius: 80px;
    border-bottom-right-radius: 80px;
    -moz-border-bottom-right-radius: 80px;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    padding-left:40px;
    line-height: 80px;
}
.case_h1 h1{ font-size:25px; line-height:1.5}
}
@media (max-width:800px){
#fixed_height{ height:82px}
.case_view{ right:25px; top: 25px;}
.column_solution .label{ padding-left:25px;}
}
@media (max-width:620px){
.case_lt{ padding-top:50px}
}

@media(max-width:1400px){
.column{ padding:80px 80px}
}
@media(max-width:1200px){
.column{ padding:80px 50px}
}
@media(max-width:1000px){
.column{ padding:50px 40px}
}
@media (max-width:500px){
#fixed_height{ height:63px}
.column{ padding:30px 25px}
.case_h1 .justify-content{ padding:0 25px}
.column_solution .label{    height: 65px;
    line-height: 65px;
    bottom: -65px;
    font-size: 20px; width:250px}
.case_view{top:15px;}	
}
@media (max-width:400px){
.case_h1 h1{ font-size:20px; line-height:1.5}
}