@media (max-width:1579px) {
  .hero_sec .inner{ padding-top: 60px;}
  .hero_sec h1{ font-size: 80px;}
  .hero_sec p{ font-size: 26px;}
  .system_sec h2{ font-size: 74px;}
  .system_sec .info{ font-size: 26px;}
  .mission_sec h2 { font-size: 48px; line-height: 48px;}
  .mission_sec p{ font-size: 18px; line-height: 27px;}
  .engage_sec h2{ font-size: 80px;}
  .engage_sec p{ font-size: 26px;}
}

@media (max-width: 1199px) {
  .btns{ font-size: 16px; padding: 13px 40px;}
  .video_btn{ font-size: 16px;}
  .sec_title{ font-size: 44px; line-height: 110%; margin-bottom: 40px;}

  .hero_sec figure{ margin-top: -4%;}
  .hero_sec h1{ font-size: 68px;}
  .hero_sec p{ font-size: 24px; letter-spacing: 1px;}
  .communites_sec .sec_title{ margin-bottom: 55px;}
  .value_sec .detail{ padding-left: 20px;}
  .value_sec .blocks{ padding-left: 20px;}
  .community h3{ font-size: 18px; line-height: 28px;}
  .value_sec .info{ font-size: 18px; line-height: 28px;}
  .system_sec h2{ font-size: 64px;}
  .system_sec .info{ font-size: 24px; letter-spacing: 1px;}
  .system_sec .inner::before, .system_sec .inner::after { height: 73%; background-size: auto 100%;}
  .system h3{ font-size: 18px;}
  .system ul li{ font-size: 16px;}
  .mission_sec h2 { font-size: 42px; line-height: 45px;}
  .mission_sec h2 span{ line-height: 61px;}
  .mission_sec p{ font-size: 18px; line-height: 27px;}
  .engage_sec h2{ font-size: 68px;}
  .engage_sec p{ font-size: 24px; letter-spacing: 1px;}
  .value_sec .bg::before { width: 100%;}
}

@media (max-width: 991px) {
  .header_sec{ padding: 20px 0 10px;}
  .navbar-toggler{ background:#f1f8fe; border:none; position:relative; right:0; top:0; width: 34px; height: 34px; box-shadow:none !important; padding: 0 10px; border-radius: 50%;}
  .navbar-toggler:focus,.navbar-toggler:active { outline: 0;}
  .navbar-toggler span {display: block; background-color:var(--primary); height:2px; width:14px; margin-top:4px; margin-bottom:4px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);-o-transform: rotate(0deg);  transform: rotate(0deg); position: relative; left: 0;opacity: 1;}
  .navbar-toggler span:nth-child(1),.navbar-toggler span:nth-child(3) { -webkit-transition: transform .35s ease-in-out; -moz-transition: transform .35s ease-in-out; -o-transition: transform .35s ease-in-out; transition: transform .35s ease-in-out;}
  .navbar-toggler:not(.collapsed) span:nth-child(1) { position: absolute; left: 10px; top: 12px; -webkit-transform: rotate(135deg);  -moz-transform: rotate(135deg); -o-transform: rotate(135deg);transform: rotate(135deg); opacity: 0.9;}
  .navbar-toggler:not(.collapsed) span:nth-child(2) {height: 12px; visibility: hidden; background-color: transparent;}
  .navbar-toggler:not(.collapsed) span:nth-child(3) {position: absolute;left: 10px;top: 12px;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg); -o-transform: rotate(-135deg);transform: rotate(-135deg);opacity: 0.9;}  
  .navbar-collapse{ order: 3;}
  .navbar-collapse .navbar-nav{ padding-top: 10px;}
  .header_sec .navbar-light .navbar-nav .nav-item{ margin: 0;}
  .header_sec .navbar-light .navbar-nav .nav-link{ padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.1);}
  .header_sec .dropdown-menu{ margin: 0 !important; border: none; box-shadow: none; border-radius: 0;}
  .header_sec .dropdown-item{ border-bottom: 1px solid rgba(0,0,0,0.1);}
  .hero_sec{ overflow: hidden;}
  .logo_sec{ padding-bottom: 40px;}
  .hero_sec figure{ margin: -4% -72px -20px;}
  .logo_sec ul{ gap: 30px; justify-content: space-between;}
  .communites_sec{ padding: 40px 0 0;}
  .value_sec .inner{ width: 90%;}
  .value_sec .bg{ padding: 80px 0 10px;}
  .value_sec .detail{ padding: 0 0 20px; max-width: 400px; margin: 0 auto; text-align: center;}
  .value_sec .blocks{ padding-left: 0; margin-left: 0; padding-top: 0;}
  .value_sec .blocksinn{ padding-bottom: 40;}
  .system_sec .inner{ padding-top: 60px;}
  .mission_sec{ padding: 80px 0; text-align: center;}
  .mission_sec figure{ margin: 60px auto 30px; max-width: 400px;}
  .mission_sec h2{ margin-top: 0;}
  .footer_sec .copyright{ font-size: 13px;}
  .footer_bottom{ padding: 10px 0;}
  .footer_bottom p{ margin-bottom: 10px; text-align: center;}
  .option_btns{ justify-content: center; width: 100%;}
  .engage_sec .inner{ padding-top: 60px;}
}

@media (max-width: 767px) {
html { -webkit-text-size-adjust:none;}
.container{ width:90%; margin:0 auto; padding:0; max-width: inherit;}
.sec_title{ font-size: 48px; line-height: 100%;}

.hero_sec .container{ width:100%;}
.hero_sec figure { margin: -7% -49% -20px -52%;}
.hero_sec h1{ line-height: 90%; margin-bottom: 20px; font-size: 86px;}
.hero_sec p{ line-height: 35px; font-size: 29px;}
.logo_sec ul { gap: 30px 60px; justify-content: center; flex-wrap: wrap;}
.community h3{ font-size: 20px; line-height: 30px;}
.community{ margin-bottom: 60px;}
.value_sec{ padding-top: 20px;}
.value_sec .container{ width:96%;}
.value_sec .sec_title{ font-size: 56px;}
.value_sec .info{ font-size: 20px; line-height: 30px;}
.system_sec .container{ width:100%; overflow: hidden;}
.system_sec .inner::before, .system_sec .inner::after { display: none;}
.system_sec figure { margin: 40px -80% 0;}
.system_sec h2{ line-height: 90%; margin-bottom: 20px; font-size: 76px;}
.system_sec .info{ line-height: 35px; font-size: 29px;}
.system h3{ font-size: 20px;}
.system ul li{ font-size: 18px;}
.system_sec::before { width: 100%;}
.mission_sec h2{ font-size: 52px; line-height: 100%; max-width: 339px; margin: 0 auto; text-align: left;}
.mission_sec h2 span{ line-height: 70px;}
.mission_sec p{ text-align: left; max-width: 380px; font-size: 20px; line-height: 30px; margin: 30px auto 0;}
.engage_sec h2{ font-size: 82px; line-height: 90%; margin-bottom: 20px;}
.engage_sec p{ line-height: 35px; font-size: 29px;}
.engage_sec figure{ margin: 40px -25% 0;}
.country{ margin-top: 6px;}
.footer_sec h3{ margin-top: 50px;}
.input-group{ justify-content: flex-end;}
.footer_sec .copyright{ font-size: 14px;}
}

/************ iphone **************/
@media (max-width:575px) {
html { -webkit-text-size-adjust:none;}
.header_sec .container{ width: 96%;}
.header_sec .navbar-brand{ margin-right: 10px;}
.sign_btn:not(.fill){ padding: 4px 7px;}
.sign_btn:not(.fill):hover{ background: none;}
.value{ max-width: 280px; margin: 0 auto 21px;}
.value_sec .btns{ font-size: 14px; margin: 1rem auto 0 auto !important; display: block; width: 167px; text-align: center;}
.vroll2 { padding-top: 0;}
.system_sec figure { margin: 40px -94% 0;}
.engage_sec figure { margin: 40px -33% 0;}
}

@media (max-width:479px) {
  .btns { padding: 11px 24px;}
  .video_btn{ padding: 11px 24px 11px 50px;}
  .video_btn::before { left: 17px;}
  
  .sign_btn.fill{ width: auto;}
  .sign_btn{ font-size: 13px; padding: 4px 14px 6px 14px;}
  .head_btns{ align-items: center;}
  .hero_sec h1{ font-size: 62px;}
  .hero_sec p{ line-height: 26px; font-size: 22px;}
  .logo_sec ul{ gap: 30px;}
  .sec_title{ font-size: 42px;}
  .community figure{ margin-bottom: 20px;}
  .value_sec .sec_title{ font-size: 42px; margin-bottom: 20px;}
  .value_sec .info{ line-height: 24px; font-size: 18px;}  
  .system_sec h2{ font-size: 62px;}
  .system_sec .info{ line-height: 26px; font-size: 22px;}
  .mission_sec h2{ font-size: 44px; max-width: 296px;}
  .mission_sec h2 span { line-height: 63px;}
  .mission_sec p{ font-size: 18px; line-height: 26px;}
  .engage_sec h2{ font-size: 68px;}
  .engage_sec p{ line-height: 26px; font-size: 22px;}
  .engage_sec figure { margin: 40px -37% 0;  }
  ul.ft_social li img{ height: 20px;}
  .footer_sec .copyright{ font-size: 13px;}
  .footer_sec h3 { margin-top: 30px;  }
  .footer_inn .container{ padding: 60px 0 30px;}
}