@charset "utf-8";

div.mainContainer + div.footerWrap{margin-top: 39px;}
div.mainVisTxtWrap{position: relative;top:30%;width: 1400px;margin: 0 auto; text-align: center;}
div.mainVisTxtWrap p{ display: block;display: -webkit-box;overflow:hidden; vertical-align:top; text-overflow: ellipsis; word-break: break-word;; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-height: 1.3em;max-height: 4em;width: 85%;margin: 0 auto;text-align: center;}
div.mainVisTxtWrap p.mainVisTit{color:#fff;font-size: 55px;font-weight: 800; font-family: Manrope;}
div.mainVisTxtWrap h1.mainVisTit{color:#fff;font-size: 55px;font-weight: 800; font-family: Manrope;}
div.mainVisTxtWrap p.mainVisSubTit{color:#fff;font-size: 20px;margin-top: 15px;}
.mainMoreBtnWrap {text-align: center}
.mainMoreBtn{background: #0480ff url("../img/main/mainBtnArr.png") no-repeat right 20px center;color: #fff;display: inline-block;margin: 250px 0;font-size: 25px;font-weight:bold; width: 200px;line-height: 60px;text-align: left;padding-left: 20px;}
.mainMoreBtnOrg{background: #ff6000 url("../img/main/mainBtnArr.png") no-repeat right 20px center;color: #fff;display: inline-block;margin: 50px 0;font-size: 18px;width: 190px;line-height: 50px;text-align: left;padding-left: 20px;}


div.mainVisualWrap .item{height: 700px;overflow: hidden;position: relative;}
div.mainVisualWrap .owl-carousel .owl-item img{position: absolute;top: 50%;left: 50%;transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);width: auto;max-width: inherit;}
div.mainVisualWrap .owl-dots{position: absolute;bottom: 11%;text-align: center;width: 100%;}
div.mainVisualWrap .owl-carousel button.owl-dot{width:8px;height: 8px;border: 1px solid #fff;opacity: 0.5;border-radius: 50%;margin-left: 10px;}
div.mainVisualWrap .owl-carousel button.owl-dot:first-child{margin-left: 0;}
div.mainVisualWrap .owl-carousel button.owl-dot.active{width: 30px;background: #fff;opacity: 1;border-radius: 20px;}
div.mainVisualWrap .owl-carousel .owl-nav button{width:80px;height: 80px;position: absolute;top: 50%;margin-top: -40px;}
div.mainVisualWrap .owl-carousel .owl-nav .owl-prev{background: url("../img/main/mainVisPrev.png") no-repeat 0 0;background-size: 100% 100%;left: 13.5%;}
div.mainVisualWrap .owl-carousel .owl-nav .owl-next{background: url("../img/main/mainVisNext.png") no-repeat 0 0;background-size: 100% 100%;right: 13.5%;}

div.mainSolutionsWrap{min-height: 800px;background:url("../img/main/mainSolutionsBg.jpg") no-repeat center center;background-size: cover;position: relative}
.mainSolutionTit{font-size: 45px;font-weight: bold;text-align: center;color: #fff;padding-top: 90px;}
.mainSolutionTit a{color: #fff;}

div.mainSolutionCont .mainMoreBtnWrap {position: absolute; right: 16%; bottom: 20%}
/*div.mainSolutionCont .mainMoreBtn {display: none}*/

/*
div.mainSolutionCont .bt-more {position: absolute; bottom: 11%; right: 16%; display: table; width: 190px; height: 190px; padding: 0; font-size: 18px; z-index: 9; background-color: #ff6000}
div.mainSolutionCont .bt-more a {height: 190px; display: table-cell; vertical-align: middle; text-align: center; color: #fff}
.bt-more a::before {content: ''; width: 20px; height: 20px; display: block; margin: 0 auto 10px; background: url(../img/ic_plus3.png) 50% 50% no-repeat;}
*/

.mainSolutionList{overflow: hidden;margin-top: 90px;}
.mainSolutionList li{float: left;width: 32%;margin-left: 2%;border-top:2px solid rgba(255,255,255,0.2);padding: 30px 4%;padding-right: 0;list-style:none;}
.mainSolutionList li:nth-child(3n+1){margin-left: 0;list-style:none;}
.mainSolutionTxtWrap{display: inline-block;margin-left:9%;vertical-align: top;width: 60%;color: #fff;}
.mainSolutionNum{font-size:60px;font-weight: bold;word-break: break-all;letter-spacing: -1.1px;}
.mainSolutionDesc{margin-top: 20px;font-size: 18px;line-height: 30px;    letter-spacing: -1.5px;}
.mainSolutionDesc strong{display: block;}

.mainVisIframe{position: relative;    height: 100%;}
.mainVisIframe iframe{position: absolute;left: 0;top: 0; width: 100%;height: 100%;}


div.mainService{min-height: 950px;background:url("../img/main/mainServiceBg.jpg") no-repeat center center;background-size: cover;}

.mainServiceListWrap{padding-top: 150px;text-align: center;}
.mainServiceList{text-align: right;}
.mainServiceList > li{display: inline-block;vertical-align: top;width: 21%;margin-left: 2%;position: relative;list-style:none;}
.mainServiceList > li:first-child{margin-left: 0;list-style:none;}
.mainServiceList > li:nth-child(2n){margin-top: 90px;list-style:none;}
.mainServiceCont{min-height: 500px;background: #21ab7b;opacity: 0.8;transition-timing-function: ease-in;transition: 0.7s;}
.equipment{background:url("../img/main/mainServiceImg01.jpg") no-repeat center center;background-size: cover; opacity:1;overflow: hidden;position: relative;cursor: pointer;}
.equipment:hover{background:url("../img/main/mainServiceImg01_hover.jpg") no-repeat center center;background-size: cover;transition-timing-function: ease-in;transition: 0.7s;}
.technical{background:url("../img/main/mainServiceImg02.jpg") no-repeat center center;background-size: cover;opacity:1;overflow: hidden;position: relative;cursor: pointer;}
.technical:hover{background:url("../img/main/mainServiceImg02_hover.jpg") no-repeat center center;background-size: cover;transition-timing-function: ease-in;transition: 0.7s;}
.logistics{background:url("../img/main/mainServiceImg03.jpg") no-repeat center center;background-size: cover;opacity:1;overflow: hidden;position: relative;cursor: pointer;}
.logistics:hover{background:url("../img/main/mainServiceImg03_hover.jpg") no-repeat center center;background-size: cover;transition-timing-function: ease-in;transition: 0.7s;}

.mainServiceTxt{position: absolute;left: -120px;top: 35%;text-align: left;}
.mainServiceTit{font-size: 55px;font-weight: bold;text-shadow: 6px 2px 6px rgba(0,0,0,0.5);color:#fff;}
.mainServiceTit:after{display: inline-block;content: '';vertical-align: bottom;width: 160px;height: 2px;background: #fff;    margin: 0 0 10px 30px;}
.mainServiceDesc{font-size: 18px;color: #fff;line-height: 25px;margin-top: 20px;}

.mainStoryTxtWrap{text-align: left;color: #fff;padding: 0 30px; position: absolute;bottom: -53%;transition-timing-function: ease-in;transition: 0.7s;width: 100%;}
.equipment .mainStoryTxtWrap{bottom: -55%}
.equipment:hover .mainStoryTxtWrap{bottom: 30px;transition-timing-function: ease-in;transition: 0.7s;}
.technical:hover .mainStoryTxtWrap{bottom: 30px;transition-timing-function: ease-in;transition: 0.7s;}
.logistics:hover .mainStoryTxtWrap{bottom: 30px;transition-timing-function: ease-in;transition: 0.7s;}
.technical .mainStoryTxtWrap{bottom: -35%;}
.logistics .mainStoryTxtWrap{bottom: -23%;}

.mainStoryTxtWrap h4{font-size: 25px;line-height: 30px;}
.mainStoryTxtWrap ul{margin-top: 30px;}
.mainStoryTxtWrap ul li{font-size: 16px;line-height: 30px;position: relative;padding: 0 0 0 10px;list-style:none;}
.mainStoryTxtWrap ul li:after{display: inline-block;content: '';width: 3px;height: 3px;background: #fff;position: absolute;top: 13px;left: 0;list-style:none;}

.mainMediaWrap{background: #d3e3f3;padding: 100px 0;}
.mainMediaTit {text-align: center;margin-bottom: 50px;}
.mainMediaTit a {font-size: 45px;color: #191919;}
.mainMediaCont{overflow: hidden;}
.mainStoryWrap{float: left;width: 74.5%; position: relative}
.mainStImgWrap{position: relative;height: 512px;}
.mainStoryRight .mainStImgWrap{height: 246px;}
.storyTag{font-size: 20px;font-weight: 500;color: #fff;background: #0054a3;text-align: center;padding: 8px 29px;position: absolute;bottom: -20px;}
.mainStImgWrap > a{display: block;height: 100%;background: #fff;}
.mainStImgWrap > a > img{height: 100%;display: block;margin: 0 auto;}
.mainStImgWrap > a > img.videoPlay, .mainStImgWrap > a > img.video_play{height: auto;position: absolute;left: 50%;top: 50%;margin-left: -29px;margin-top:-31px;}
.mainStTitWrap{margin-top: 50px; position: relative}
.mainStTitWrap .video {position: absolute; right: 0; top: 0; text-indent: -9999px; background: url(../img/youtube.png) no-repeat; width: 25px; height: 25px; background-size: 100% 100%}
.mainStoryLeft .video {right: 5%; top: 10%}

.mainStTit{font-size: 26px;color: #191919;display: block;display: -webkit-box;overflow: hidden;vertical-align: top;text-overflow: ellipsis;word-break: keep-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-height: 1.3em;max-height: 2.6em; width: 88%}
/*.mainStTit.video {background: url(../img/youtube.png) no-repeat right}*/
.mainStMore{font-size: 18px;display: inline-block;color: #191919;background: url("../img/readMoreC_arr.png") no-repeat right center;padding: 0 30px 0 0;margin-top:20px;}
.mainStoryLeft{float: left;width: 65.7%;}
.mainStoryRight{float: right;width: 31.3%;}
.mainStoryRight .mainStTit{font-size: 18px;}
.mainStoryRight .mainStTitWrap{margin: 30px 0;}
.mainNewsWrap{float: right;width: 23.5%; position: relative}
.mainNewsWrap ul li{background: #fff;padding:12px 25px;border-top: 1px solid #e8e8e8;cursor: pointer;list-style:none;}
.mainNewsWrap ul li:hover{background: #f3f3f3;list-style:none;}
.mainNewsWrap ul li:first-child{border-top: 0;list-style:none;}
.mainNewsTit{font-size: 15px;color: #c34b02;font-weight: bold;}
.mainNewsDesc{display: block; display: -webkit-box;overflow: hidden;vertical-align: top;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-height: 1.5em;max-height: 3em;color:#333333;font-size: 18px;margin:15px 0;}
.mainNewsDate{text-align: right;font-size: 15px;color: #636363;}

.mainMediaWrap .w1400>.mainMoreBtnWrap a {margin-top: 0}
.mainMediaWrap .mediaMoreBtnWrap {text-align: right}
.mainMediaWrap .mediaMoreBtnWrap a {margin: 2% 3% 0 0}
.mainNewsWrap .newsMoreBtnWrap {text-align: center}
.mainNewsWrap .newsMoreBtnWrap a {margin: 22% 0 0}



.mainSocialInner{overflow: hidden;background: #fff;font-size: 0;}

.mainSocialCarousel.owl-carousel .owl-item img, .mainSocialTxtWrap{display: inline-block;vertical-align: top;width: 50%;float: left;}
.mainSocialTxtWrap{padding: 8% 10% 0 5%;}
.mainSocialDept{font-size:20px;font-weight: bold;color: #0054a3;}
.mainSocialTxtWrap h5{font-size: 45px;color: #191919;margin:40px 0 30px 0;line-height: 50px;}
.mainSocialDesc{font-size: 18px;line-height: 25px;word-break: break-word;}
.mainSocialCarousel.owl-carousel .owl-nav{position: absolute;bottom:10%;width: 41%;right: 0;z-index: 10;}
.mainSocialCarousel.owl-carousel .owl-dots{position: absolute;bottom:10%;width: 44%;right: 0;z-index: 0;    }
.mainSocialCarousel.owl-carousel .owl-dot{counter-increment: slides-num;}
/*.mainSocialCarousel.owl-carousel .owl-dot{ background: #333; color: inherit; border: none; padding: 0 !important; font: inherit; width: 8px; height: 8px; opacity: 0.5; border-radius: 50%; margin-left: 10px; cursor: pointer}*/
/*.mainSocialCarousel.owl-carousel .owl-dot.active {background: #0054a3; opacity: 1}*/

.mainSocialCarousel.owl-carousel .owl-nav button{width: 15px;height: 26px;font-size: 0;text-indent: -999999px;margin-left: 25px;}
.mainSocialCarousel.owl-carousel .owl-nav .owl-prev{background: url("../img/main/scPrev.png") no-repeat 0 0;background-size: 100% 100%;}
.mainSocialCarousel.owl-carousel .owl-nav .owl-next{background: url("../img/main/scNext.png") no-repeat 0 0;background-size: 100% 100%;}

.mainSocialCarousel .owl-dot.active:before {
    content: counter(slides-num);
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    color:#191919;
    font-size: 20px;
}
.mainSocialCarousel .owl-dots:after {
    content:  " / " counter(slides-num);
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
    padding-left: 5px;
    color:#555555;
}

.counterA{position: relative; width: 60%}
.counterB{position: relative;}
.counterC{position: relative; width: 116%}
.plus{position: absolute;right: -10px;top: 0;font-size: 60px;}


@media screen and (min-width:1920px){
    
    div.mainVisualWrap .owl-carousel .owl-item img{width: 100%;}
}

@media screen and (max-width:1800px){
    
    div.mainVisualWrap .owl-carousel .owl-nav .owl-prev{left: 10%;}
    div.mainVisualWrap .owl-carousel .owl-nav .owl-next{right: 10%;}
}

@media screen and (max-width:1500px){
    
    div.mainSolutionCont .mainMoreBtnWrap {right: 10%}
/*    div.mainSolutionCont .bt-more {right: 11%}*/
    
    div.mainVisualWrap .owl-carousel .owl-nav .owl-prev{left: 2%;}
    div.mainVisualWrap .owl-carousel .owl-nav .owl-next{right: 2%;}
    div.mainVisTxtWrap p.mainVisTit{font-size: 4vw;}
    div.mainVisTxtWrap h1.mainVisTit{font-size: 4vw;}
    div.mainVisTxtWrap p.mainVisSubTit{font-size: 2vw;}
    .mainMoreBtn{font-size: 15px;line-height: 45px;}
    div.mainVisTxtWrap{width: 95%;}
    .mainSolutionList li{padding: 30px 1%;list-style:none;}
    .mainSolutionNum, .plus{font-size: 4vw;}
    .plus{right: 0;}
    .mainSolutionList li > img{width: 100px;list-style:none;}
    .mainStoryTxtWrap{padding: 0 15px;}
    .mainStoryTxtWrap h4{font-size: 1.6vw;}
    .mainStoryTxtWrap ul li {font-size: 1.2vw;list-style:none;}
    .mainServiceTxt{left: -40%;}
    .mainServiceTit{font-size: 45px;}
    .mainServiceTit:after{width: 40%;    margin: 0 0 10px 20px;}
    .mainServiceDesc{font-size: 18px;}
    
    
    .mainSocialTxtWrap{    padding: 7% 3%;}
    .mainSocialTxtWrap h5{font-size: 3vw;}
    .mainSocialDesc{font-size: 13px;line-height: 2.5vw;}
    .mainSocialCarousel.owl-carousel .owl-dots{width: 47%;bottom: 5%;}
    .mainSocialCarousel.owl-carousel .owl-nav{width: 42%;bottom: 5%;}
}

@media screen and (max-width:1400px){
    div.mainSolutionCont .mainMoreBtnWrap {right: 10%; bottom: 23%}    
}

@media screen and (max-width:1200px){
    div.mainSolutionCont .mainMoreBtnWrap {right: 8%}    
    
    .mainNewsWrap .newsMoreBtnWrap a {margin: 10% 0 0}
    
    div.mainSolutionCont .bt-more {bottom: 13%; right: 8%}
    
    .storyTag{font-size: 15px;padding: 8px 20px;}
    .mainStTit{font-size: 20px;}
    .mainStMore{font-size: 15px;padding: 10px 30px 10px 0;}
    .mainStoryRight .mainStTit{font-size: 16px; width: 85%}
    .mainNewsWrap ul li{padding: 20px;list-style:none;}
    .mainNewsDesc{font-size: 15px;}
    .mainNewsTit, .mainNewsDate{font-size: 13px;}
    .mainStImgWrap{height: 420px;}
    .mainStoryRight .mainStImgWrap{height: 200px;}
    .mainSocialTxtWrap h5{    margin: 10px 0;}
    
}

@media screen and (max-width:1111px){
    div.mainSolutionCont .bt-more {bottom: 10%}
}
@media screen and (max-width:1024px){
    div.mainSolutionCont .mainMoreBtnWrap {right: 6%}
    .mainServiceDesc {font-size: 15px}
    div.mainSolutionCont .bt-more {bottom: 7%}
}

@media screen and (max-width:900px){
    
    .mainSolutionList li{width: 49%;min-height: 250px;list-style:none;}
    .mainSolutionList li:nth-child(3n+1){margin-left: 2%;list-style:none;}
    .mainSolutionList li:nth-child(2n+1){margin-left: 0;list-style:none;}
    .mainSolutionDesc{font-size: 16px;}
    .mainServiceListWrap{padding: 50px 0;}
    .mainServiceList > li:nth-child(2n){margin-top: 1%;list-style:none;}
    .mainServiceList > li{margin:1%;width: 47%;list-style:none;}
    .mainServiceCont{min-height: 400px;}
    .mainServiceTxt{width: 100%;left:-30px;}
/*    .mainServiceTit{font-size: 6vw;}*/
/*    .mainServiceDesc{font-size:2vw;}*/
    .mainStoryTxtWrap h4{font-size: 2.7vw;}
    .mainStoryTxtWrap ul li {font-size: 1.7vw;list-style:none;}
    .logistics .mainStoryTxtWrap{bottom: -30%;}
    .technical .mainStoryTxtWrap {bottom: -38%;}
    .mainSocialTxtWrap h5{line-height: 4vw;list-style:none;}
    .mainSocialTxtWrap .mainMoreBtn{margin-top: 20px;}
    .plus{right: 35%;}
    
    div.mainSolutionCont .mainMoreBtnWrap {right: 15%; bottom: 10%}
    
}

@media screen and (max-width:800px){
    div.mainVisualWrap .item{height: 500px;}
    div.mainVisualWrap .owl-carousel .owl-nav button{width: 50px;height: 50px;margin-top: -25px;}

    div.mainVisTxtWrap p{width: 80%;}
    
    .mainStoryWrap, .mainNewsWrap{width: 100%;}
    .mainMediaWrap{padding: 50px 0;}
    
    .mainSocialTxtWrap{padding: 5% 3%;}
    .mainSocialCarousel .owl-dots:after, .mainSocialCarousel .owl-dot.active:before{font-size: 14px;}
    .mainSocialCarousel .owl-dots:after{vertical-align: bottom;}
    .mainSocialCarousel.owl-carousel .owl-nav button{width: 10px;height: 21px;margin-left: 20px;}
    
}

@media screen and (max-width:768px){
    div.mainSolutionCont .mainMoreBtnWrap {position: relative; right: 36%}
    
    .mainMediaWrap .mediaMoreBtnWrap a {margin: 10% 5% 5% 0}
    .mainNewsWrap .newsMoreBtnWrap a {margin: 5% 0 0}
    
    div.mainSolutionCont .bt-more {display: none}
    div.mainSolutionCont .mainMoreBtn {display: inline-block; position: relative; left: 50%; transform: translateX(-50%)}
    
    .mainSocialCarousel.owl-carousel .owl-item img, .mainSocialTxtWrap{display: block;width: 100%;float: none;}
    .mainSocialTxtWrap{padding:10% 5%;}
    .mainSocialTxtWrap h5 {font-size: 6vw;line-height: 8vw;}
    .mainSocialDesc{font-size: 3vw;    line-height: 5vw;}
    .mainSocialCarousel.owl-carousel .owl-dots{width: 95%;}
    .mainSocialCarousel.owl-carousel .owl-nav{width: 90%;}
    .mainSocialCarousel{padding-bottom: 10%;}
    .mainSocialCarousel .owl-dots:after, .mainSocialCarousel .owl-dot.active:before{font-size: 20px;}
    .mainSocialCarousel .owl-dots:after{vertical-align: bottom;}
    .mainSocialCarousel.owl-carousel .owl-nav button{width: 15px;height: 26px;margin-left: 25px;}
    .mainSocialCarousel.owl-carousel .owl-nav, .mainSocialCarousel.owl-carousel .owl-dots{bottom: 3%;}
    .mainSocialDesc{word-break: break-all;}
    
    .mainSolutionList li{width: 100%;margin: 10px 0;min-height: 100%;padding: 0;border: 0;list-style:none;}
    .mainSolutionList li:nth-child(3n+1){margin-left: 0;list-style:none;}
    .mainSolutionTxtWrap{margin-left: 2%;width:75%;}
    .mainSolutionDesc{margin: 0;}
    .mainSolutionList li > img{width: 50px;list-style:none;}
    .mainSolutionNum{font-size: 1.2rem;}
    .mainSolutionTit{font-size: 1.4rem;padding-top: 2rem;}
    .mainSolutionList{margin: 1rem 0 0 1rem;}
    .mainServiceList{text-align: center;}
    .mainServiceList > li{margin:20px 0;width: 80%;list-style:none;}
    .mainServiceList > li:nth-child(2n){margin-top: 20px;list-style:none;}
    .mainStoryTxtWrap h4 {font-size: 4vw;}
    .mainStoryTxtWrap ul li{font-size: 3vw;list-style:none;}
    .mainServiceTxt{left: -10%;}
    .plus {top: -29%; font-size: 1.8rem}
    
    .counterA {width: 35%}
    .counterA .plus {right: 70%}
    .counterB {width: 25%}
    .counterB .plus {right: 40%}
    .counterC {width: 31%}
    .counterC .plus {right: 44%}
    
    .mainMoreBtn {margin: 30px 0}
    
    div.mainSolutionsWrap {min-height: 600px}
    
    .mainServiceTxt {top: 0}
    .mainServiceList li:first-child .mainServiceCont {min-height: 140px;list-style:none;}
    .mainServiceCont {min-height: 360px}
    .equipment .mainStoryTxtWrap {bottom: 20px}
    .equipment:hover .mainStoryTxtWrap {bottom: 20px}
    .technical .mainStoryTxtWrap {bottom: 20px}
    .technical:hover .mainStoryTxtWrap {bottom: 20px}
    .logistics .mainStoryTxtWrap {bottom: 20px}
    .logistics:hover .mainStoryTxtWrap {bottom: 20px}
}

@media screen and (max-width:640px){
    div.mainSolutionCont .mainMoreBtnWrap {right: 33%}
    
    .mainStTit {width: 85%}
    
    div.mainVisTxtWrap p.mainVisTit{font-size: 6vw;word-break: break-word;}
    div.mainVisTxtWrap h1.mainVisTit{font-size: 6vw;word-break: break-word;}
    div.mainVisTxtWrap p.mainVisSubTit{font-size: 3vw;word-break: break-word;}
    div.mainVisTxtWrap p{width: 70%;}
    
    .counterB {width: 30%}
    .counterC {width: 37%}
}

@media screen and (max-width:520px){
    .mainStTit{font-size: 16px;}
    .mainStTitWrap {margin-top: 30px}
    .mainStTitWrap .video {right: 5%; top: 0}
    .mainMediaWrap .mediaMoreBtnWrap {text-align: center}
    .mainMediaWrap .mediaMoreBtnWrap a {margin: 0 0 10% 0}
    
    .mainMoreBtn{width: 150px;font-size: 12px;line-height: 40px;}
    div.mainVisualWrap .item{height: 400px;}
    div.mainVisualWrap .owl-dots{bottom: 3%;}
    .mainStoryLeft, .mainStoryRight{width: 100%;margin-bottom: 20px;}
    .mainStImgWrap {height: 370px;}
    .mainStoryRight .mainStImgWrap {height: 380px;}
    .mainMediaTit{font-size: 30px;margin-bottom: 25px;}
    .mainSocialDept{font-size: 15px;}
    .mainSocialCarousel .owl-dots:after, .mainSocialCarousel .owl-dot.active:before{font-size: 14px;}
    .mainSocialCarousel .owl-dots:after{vertical-align: bottom;}
    .mainSocialCarousel.owl-carousel .owl-nav button{width: 10px;height: 21px;margin-left: 20px;}
    div.mainSolutionsWrap{min-height: 550px;}
    .mainSolutionDesc{font-size: 14px;line-height: 20px;}
    
    .counterA {width: 47%}
    .counterB {width: 38%}
    .counterC {width: 47%}
}
@media screen and (max-width:420px){ 
    .counterA {width: 59%}
    .counterB {width: 46%}
    .counterC {width: 55%}
    
    .mainServiceList li:first-child .mainServiceCont {min-height: 140px;list-style:none;}
    div.mainSolutionCont .mainMoreBtnWrap {right: 28%}
}

@media screen and (max-width:375px){
        
    div.mainSolutionCont .mainMoreBtnWrap {right: 31%}
    
    div.mainVisualWrap .owl-carousel .owl-nav button{width: 40px;height: 40px;margin-top: -20px;}
    div.mainVisTxtWrap{top: 20%;}
    div.mainVisTxtWrap p.mainVisTit{font-size: 6vw;}
    div.mainVisTxtWrap h1.mainVisTit{font-size: 6vw;}
    div.mainVisTxtWrap p.mainVisSubTit{font-size: 4vw;}
    .mainMoreBtn{margin-top: 30px;width: 120px;    background-position: right 10px center;padding-left: 10px;}
   
    
    .mainServiceList > li{width: 90%;list-style:none;}
    .mainStoryTxtWrap h4 {font-size: 5vw;}
    .mainStoryTxtWrap ul li{font-size: 4vw;list-style:none;}
    .mainServiceTxt{left: -5%;}
    .mainServiceTit{font-size: 30px}
/*    .mainServiceDesc{font-size:16px;}*/
/*    .technical .mainStoryTxtWrap {bottom: -45%;}*/
    .mainStImgWrap {height: 300px;}
    .mainStoryRight .mainStImgWrap {height: 270px;}  
    .mainSocialDesc {font-size: 4vw;line-height: 6vw;list-style:none;}
    div.mainSolutionsWrap{min-height: 600px;}
    
    .counterA {width: 62%}
    .counterB {width: 51%}
    .counterC {width: 60%}
    
}

@media screen and (max-width:320px){
    .counterA {width: 72%}
    .counterB {width: 60%}
    .counterC {width: 72%}
    
    .mainServiceList li:first-child .mainServiceCont {min-height: 120px;list-style:none;}
    div.mainSolutionCont .mainMoreBtnWrap {right: 27%}
}