@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');




* { margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: normal; font-style: normal; color: #000; }
input, button, textarea, select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { outline: 0; border: 1px solid #ff4838;  height: 50px; padding: 0 20px; font-family: 'GT America Bold';  font-size: 16px; width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; height: auto; }
textarea { padding: 15px 20px; height: 100px; }
input[type=submit], button { width: auto; border: 0; cursor: pointer; background: url(images/blank.png) no-repeat left top #01adf1; font-size: 16px; line-height: 24px; font-weight: 700; padding: 8px 20px; color: #fff; display: inline-block; }

ul.hs-error-msgs { margin: 0; padding: 0; list-style: none; float: left; width: 100%; }
p {  font-size: 16px; line-height:26px; color: #000;}
a{ text-decoration:none;color: #ff4838;font-size: 18px;line-height: 28px;font-weight: bold;}
h1,h2,h3,h4,h5,h6 { margin-top:0; font-weight:700; margin-bottom:10px;  }
h1{font-size: 140px;line-height: 140px;color: #fff; }
h1{font-size: 54px;line-height: 75px;}

h2{font-size: 48px;line-height: 70px;color: #1d2932;}
h3{font-size: 36px;line-height: 45px;}
h4{font-size: 28px;line-height: 36px;}
h5{font-size: 24px;line-height: 30px;}
h6{font-size: 20px;line-height: 26px;}
span{font-size: 20px;line-height: 26px;font-weight: bold;}
em{ font-size: 16px; line-height:26px;}
ul, li{ font-size: 16px; line-height:26px;}
i{ font-size: 16px; line-height:26px;}

.container{max-width: 1366px;margin: 0 auto; padding: 0 15px;}



section.banner {width: 100%;display: inline-block;padding: 90px 0 40px 0;background-size: cover;background-position: center;background-repeat: no-repeat;}
section.banner .logo {width: 100%;display: inline-block;}
section.banner .logo a img {object-fit: cover;object-position: center;width: 300px;display: inline-block;}
section.banner .logo a {width: 100%;display: inline-block;}
section.banner .action {width: 100%;display: inline-block;}
section.banner .action h1 {font-size: 80px;font-weight: 400;display: inline-block;width: 100%;max-width: 990px;line-height: 96px;padding: 264px 0 65px 0;}
section.join {width: 100%;display: inline-block;background: #3CB6CE;padding: 55px 0;}
section.join .wrapper {width: 100%;display: flex;align-items: center;justify-content: space-around;}
section.join .wrapper .left-imag {width: 15%;display: inline-block;margin: 0;}
section.join .wrapper .right-title {width: 65%;display: inline-block;margin: 0;}
section.join .wrapper .right-title a { width: 100%; display: inline-block; vertical-align: top; }
section.join .wrapper .right-title h2 {color: #c2217d;font-size: 65px;border-bottom: 10px solid #c2217d;width: 100%;display: inline-block; max-width: max-content; }
section.join .wrapper .right-title p {width: 100%;display: inline-block;color: #fff;font-size: 30px;line-height: 41px;max-width: 863px;}
section.join.give {background: #B6C900;}
section.join.give .wrapper .right-title h2 {color: #3f3579;border-bottom: 10px solid #3f3579;}
section.join.give.connect {background: #C0257D;}
section.join.give.connect .wrapper .right-title h2 {color: #F2A900;border-bottom: 10px solid #F2A900;max-width: max-width: max-content; }
section.boxs-tree {width: 100%;display: inline-block;padding: 55px 0;background: #382D7A;}
section.boxs-tree .wrapper {flex-wrap: wrap;width: calc(100% + 30px);display: flex;align-items: stretch;justify-content: flex-start;margin: 0 -15px;}
section.boxs-tree .wrapper .col {width: calc(100% / 3 - 30px);display: inline-block;vertical-align: top;margin: 0 15px;text-align: center;padding: 0px 30px;}
section.boxs-tree .wrapper .col img {width: 135px;height: 135px;display: inline-block;object-fit: contain;object-position: center;}
section.join .wrapper .left-imag img {width: 188px;height: 188px;object-fit: contain;object-position: center;}
section.join .wrapper .left-imag a { width: 100%; display: flex; flex-wrap: wrap; }
section.boxs-tree .wrapper .col a { width: 100%; display: inline-block; vertical-align: top; }
section.boxs-tree .wrapper .col h3 {color: #B6C900;font-size: 26px;font-weight: 500;line-height: 30px;padding: 22px 0 16px 0px;}
section.boxs-tree .wrapper .col p {width: 100%;display: inline-block;color: #fff;font-size: 20px;line-height: 35px;padding: 0 23px;}
section.boxs-tree .wrapper .col.one h3 {color: #f3a91c;}
section.boxs-tree .wrapper .col.tow h3 {color: #3cb5cd;}
footer.footer {width: 100%;display: inline-block;padding: 80px 0 120px;}
footer.footer .footer-logo {width: 100%;display: inline-block;}
footer.footer .footer-logo img {width: 230px;height: 45px;object-fit: contain;object-position: center;}
footer.footer .footer-logo h4 {width: 100%;display: inline-block;color: #382D7A;font-size: 30px;font-weight: 400;padding: 25px 0;line-height: 38px;}
footer.footer .footer-logo p {width: 100%;display: inline-block;line-height: 39px;font-size: 25px;font-style: italic;color: #382d7a;margin-bottom: 45px;}
footer.footer .footer-logo a { display: inline-block; vertical-align: top; background: #f2a900;color: #fff;padding: 14px 25px;font-size: 26px;font-weight: 600;}
footer.footer .footer-logo a:hover { background: #63666a; }

@media(max-width: 1199px){
	section.banner {padding: 80px 0 33px 0;}
	section.banner .action h1 {font-size: 76px;line-height: 92px;padding: 238px 0 60px 0;}
	section.join { padding: 50px 0;}
	section.join .wrapper .left-imag {width: 35%;}
	section.join .wrapper .right-title p br {display: none;}
	section.join .wrapper .right-title h2 {font-size: 60px;border-bottom: 8px solid #c2217d;}
	section.join.give .wrapper .right-title h2 {border-bottom: 8px solid #3f3579;}
	section.join .wrapper .left-imag img {width: 170px;height: 170px;}
	section.join.give.connect .wrapper .right-title h2 {border-bottom: 8px solid #F2A900; max-width: max-content; }
	section.boxs-tree .wrapper .col{padding: 0px 15px;}
	section.boxs-tree .wrapper .col p{padding: 0;}

}

@media(max-width: 991px){
	 section.banner {padding: 65px 0 0px 0;}
	 section.banner .logo a img {width: 275px;}
	 section.banner .action h1 { font-size: 48px; line-height: 58px; padding: 145px 0 43px 0;}
	 section.join {padding: 40px 0;}
	 section.join .wrapper .left-imag img {width: 140px;height: 140px;}
	 section.join .wrapper .right-title h2 {font-size: 32px; line-height: 42px; border-bottom: 7px solid #c2217d;}
	 section.join .wrapper .right-title p { max-width: 100%; font-size: 20px; line-height: 30px; }
	 section.boxs-tree { padding: 55px 0 15px; }
	 section.boxs-tree .wrapper .col { width: calc(100% / 1 - 30px); margin: 0 15px 40px; }
	 footer.footer { padding: 60px 0; }
	 footer.footer .footer-logo h4 { font-size: 26px; line-height: 30px; }
	 footer.footer .footer-logo p { font-size: 20px; line-height: 30px; }
	 footer.footer .footer-logo a { font-size: 20px; }

}

@media(max-width: 767px){
	section.banner .logo a img { width: 175px; }
	footer.footer .footer-logo img { width: 175px; }
}

@media(max-width: 576px){
	section.banner .action h1 { font-size: 36px; line-height: 46px; }
	section.join .wrapper { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
	section.join .wrapper .left-imag { width: 100%; }
	section.join .wrapper .left-imag img { width: 100px; height: 100px; }
	section.join .wrapper .right-title { width: 100%; text-align: center; margin-top: 25px; } 
	section.join .wrapper .right-title h2 { margin-bottom: 15px; }
	section.join .wrapper .right-title p { font-size: 18px; line-height: 28px; }
	section.boxs-tree .wrapper .col img { width: 100px; height: 100px; }
	section.boxs-tree .wrapper .col p { font-size: 18px; line-height: 28px; }
	footer.footer .footer-logo h4 { font-size: 20px; }
	footer.footer .footer-logo p { font-size: 18px; line-height: 28px; }
    footer.footer .footer-logo a { font-size: 18px; }
}