@media (min-width: 768px) {
::-webkit-scrollbar {width: 5px; background-color: rgba(203, 153, 111, .3);}
::-webkit-scrollbar-corner {background-color: rgba(0, 0, 0, 0);}
::-webkit-scrollbar-thumb {width: 5px; margin: 1px; border-radius: 4px; border: 0; background-color: #cb996f;}
::-webkit-scrollbar:horizontal {height: 5px; margin: 1px;}    
  .header:hover {background: rgba(42,80, 81, 1);}
  .header .dropmenu {background: var(--cyan);}
  .header .dropmenu li:last-child {margin-bottom:10rem;}
  .navbar {float: right; margin-right: -30rem;}
  .navbar li {text-align: center;}
  .navbar > li:last-child .dropmenu {left: 16rem;}
  .navbar > li:hover .dropmenu {z-index: 11; pointer-events: all; opacity: 1; transform: translateY(0);}
  .footer .col-sm-3 {width: 15%;}
  .idx5 .des {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; word-wrap: break-word;}
  .idx6 li a:hover::before, .idx6 li:hover .after {opacity: 1;}
  .idx6 li a:hover .date {top: -40rem;}
  .idx6 li a:hover .date .f46, .idx6 li:hover .before {opacity: 0;}
  .idx6 li a:hover .date .f12 {border-radius: 5rem;}
  .idx6 li a:hover .tit {bottom: 24%; color: #fff;}
  .idx6 li a:hover .imgbox {opacity: 1; transform: scale(1);}
  .contact .header:hover .logo .before {display: block;}
  .contact .header:hover .logo .after {display: none;}
  .contact .header:hover .navbar a {color: #fff;}
  .contact .header:hover .navbar .icon-earch {display: inline-block;}
  .contact .header:hover .navbar .icon-earch1 {display: none;}
  .contact .header:hover .menubtn i {background-color: #fff;}
  .career1 .textbox {width: 50%;}
  .career1 .imgbox, .idx1 .imgbox {right: -16%; width: 67%;}
  .career2 .outbox .col-sm-3 {width: 27.765%;}
  .career2 .outbox .col-sm-9 {width: 72.235%;}
  .business3 ul {display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start;}
  .business3 li:not(:nth-child(3n)) {border-right: 1px solid #DFDFDF;}
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer .nav {width: 12%;}
  .idx4::after {width: 21%;}
  .idx6 .imgbox {height: calc(29vw * (374 / 369));}
  .business3 .iconbox {height: 15vw; margin-bottom: 30rem;}
}
@media (min-width: 1200px) {
  .container {width: 63.186%;}
  .header a:hover, .contact .header:not(.on) .navbar a:hover {color: #cb996f;}
  .footer .nav a:hover {opacity: 1;}
  .idx2 li {width: auto; margin-right: 6%;}
  .idx2 li:last-child {margin-right: 0;}
  .contact .iconbox a:nth-child(1):hover circle {fill: #00b178;} 
  .contact .iconbox a:nth-child(2):hover circle {fill: #3588e5;} 
  .morebtn:hover::after {bottom: 9rem; transform: rotate(-45deg);}
  .news li h3 a:hover {color: #d2a87e;}
  .career2 .innerbox li:hover img {transform: scale(1.1);}
  .about .col-sm-5, .business .col-sm-5 {width: 45%;}
  .about .col-sm-7, .business .col-sm-7 {width: 55%;}
  .about3 .tabs-panel .imgbox {width: 78.135%; height: calc(20.938vw * (503 / 402))}
  .about3 .tabs-panel li {display: -webkit-box; display: -webkit-flex; display: flex;}
  .about3 .tabs-panel li .col-sm-7 {min-width: 1px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
  .business3 .iconbox:hover img {filter: grayscale(0); opacity: 1;}
}
@media (min-width: 1700px) {
  .idx2 li:last-child span.f22 {height: 76rem; display: flex; align-items: end;}
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .f12 {font-size: 10px;}
  .f14 {font-size: 12px;}
  .f16 {font-size: 14px;}
  .idx6 .date {top: 5%;}
  .career2 .innerbox li p {padding: 15rem 20rem;}
}
@media (max-width: 1700px) {
  .idx3 .after p {-webkit-line-clamp: 10;}
}
@media (max-width: 1440px) {
  .footer > i {width: 42%;}
  .idx3 .after p {-webkit-line-clamp: 8;}
}
@media (max-width: 1366px) {
  .footer > i {width: 44%;}
  .bgfixed2 {bottom: -5%;}
}
@media (max-width: 1024px) {
  .footer > i {width: 48%;}
  .idx3 .after p {-webkit-line-clamp: 7;}
}
@media (max-width: 767px) {
  .f12, .business3 .swiper-pagination-bullet {font-size: 10px;}
  .f14 {font-size: 12px;}
  .f16, body {font-size: 14px;}
  .f18 {font-size: 15px;}
  .f20 {font-size: 16px;}
  .f22 {font-size: 17px;}
  .f24 {font-size: 18px;}
  .f26 {font-size: 19px;}
  .f28 {font-size: 20px;}
  .container-fluid {padding-left: 5%; padding-right: 5%;}
  .container {width: 87%;}
  .header .logo {left: 6%; width: 170rem; height: auto; margin-top: 0; transform: translateY(-50%);}
  .navbar {position: fixed; z-index: 1001; top: 0; right: 0; bottom: 0; padding-top: 80rem; width: 60%; overflow-y: auto; background: #fff; display: block !important; opacity: 0; transform: translateX(100%); transition: all .5s;}
  .navbar.on {opacity: 1; transform: translateX(0);}
  .navbar > li {display: block; border-bottom: 1px solid #ebebeb;}
  .navbar > li > a  {color: #333;}
  .navbar > li.on .dropmenu {display: block;}
  .dropmenu {position: static; pointer-events: all; display: none; padding-bottom: 20rem; opacity: 1; transform: translateY(0);}
  .dropmenu a {padding: 12rem; color: #999;}
  .footer .nav {margin-top: 50rem; width: 33.33333%;}
  .footer .row:first-child {margin-right: -6%; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start;}
  .footer .row:first-child .col-sm-3 {padding-right: 6%;}
  .footer .col-sm-3 i {width: 17px; height: 22px;}
  .footer > i {right: 0; width: 100%;}
  .swiper-button-next, .swiper-button-prev {width: 50rem !important; height: 50rem !important;}
  .idx3 li {height: auto; margin: 15rem 0;}
  .idx3 .after p {-webkit-line-clamp: 13;}
  .idx4 {z-index: 3;}
  .idx4 .container {width: 100%; padding: 0;}
  .idx4 h2 {margin-left: 15px; margin-right: 15px;}
  .idx4::after {display: none;}
  .idx4 {background: var(--cyan) url(../img/logo_white.png) no-repeat center center; background-size: 150% 50%; background-attachment: fixed;}
  .idx5 .swiper-button-prev, .idx6 .swiper-button-prev {display: none;}
  .idx5 .swiper-button-next, .idx6 .swiper-button-next {display: none;}
  .idx5 .container, .idx6 .container {width: 100%;}
  .idx5 h2, .idx6 h2 {width: 85%; margin-left: auto; margin-right: auto;}
  .idx6 .imgbox {height: calc(65vw * (374 / 369));}
  .idx6 li .date {top: -6%;}
  .idx6 li::before, .idx6 li .after {opacity: 1;}
  .idx6 li .date .f46, .idx6 li .before {opacity: 0;}
  .idx6 li .date .f12 {border-radius: 5rem;}
  .idx6 li .tit {bottom: 24%; color: #fff;}
  .idx6 li .imgbox {opacity: 1; transform: scale(1);}
  .bgfixed1 {width: 68%;}
  .bgfixed2 {display: none !important;}
  .about2 .f46 {font-size: 42rem;}
  .about3 .tabs {margin-top: 30rem;}
  .about3 .tabs-panel h3 {margin-top: 55rem;}
  .business2 h3 {margin-bottom: 30rem;}
  .business3 .iconbox {height: auto; margin-bottom: 55rem;}
  .business3 .swiper-pagination-bullet {width: 40rem; height: 40rem; line-height: 40rem;}
  .career2 .innerbox li p {font-size: 46rem;}
  .contact .header {background-color: #f9f9f9;}
  .contact .header.on .logo .before {display: none;}
  .contact .header.on .logo .after {display: block;}
  .contact .header.on .navbar a {color: #333;}
  .contact .header.on .navbar .icon-earch {display: none;}
  .contact .header.on .navbar .icon-earch1 {display: inline-block;}
  .contact .header.on .menubtn i {background-color: #333;}
  .banner .imgbox {position: absolute;}
  .about2, .business2 {background-attachment: initial;}
}
@media (max-width: 480px) {
  .idx3 .after p {-webkit-line-clamp: 11;}
}
@media (max-width: 400px) {
  .about2 .f46 {font-size: 38rem;}
}