@font-face {
	font-family:interRegular;src:url(https://www.stata.com/includes/js/cart/order/fonts/inter/interRegular/inter-regular-webfont.woff2) format("woff2"),url(https://www.stata.com/includes/js/cart/order/fonts/inter/interRegular/inter-regular-webfont.woff) format("woff"),url(https://www.stata.com/includes/js/cart/order/fonts/inter/interRegular/inter-regular-webfont.ttf) format("truetype"),url(https://www.stata.com/includes/js/cart/order/fonts/inter/interRegular/inter-regular-webfont.svg#inter_vregular) format("svg");font-weight:400;font-style:normal
}
@font-face {
	font-family:interBold;src:url(https://www.stata.com/includes/js/cart/order/fonts/inter/interBold/inter-bold-webfont.woff2) format("woff2"),url(https://www.stata.com/includes/js/cart/order/fonts/inter/interBold/inter-bold-webfont.woff) format("woff"),url(https://www.stata.com/includes/js/cart/order/fonts/inter/interBold/inter-bold-webfont.ttf) format("truetype"),url(https://www.stata.com/includes/js/cart/order/fonts/inter/interBold/inter-bold-webfont.svg#inter_vregular) format("svg");font-weight:400;font-style:normal
}

@font-face {
	font-family:iconfont;src:url(https://www.stata.com/includes/js/cart/order/fonts/iconFont/iconfont.eot);src:url(https://www.stata.com/includes/js/cart/order/fonts/iconFont/iconfont.eot?#iefix) format("embedded-opentype"),url(https://www.stata.com/includes/js/cart/order/fonts/iconFont/iconfont.woff2) format("woff2"),url(https://www.stata.com/includes/js/cart/order/fonts/iconFont/iconfont.woff) format("woff"),url(https://www.stata.com/includes/js/cart/order/fonts/iconFont/iconfont.ttf) format("truetype"),url(https://www.stata.com/includes/js/cart/order/fonts/iconFont/iconfont.svg#iconfont) format("svg")
}
.iconfont {
	font-family: iconfont!important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
.iconcart:before {
	content: "\e613"
}

.iconuser:before {
	content: "\e619"
}

.iconicon-close:before {
	content: "\e663"
}

.iconlinkedin:before {
	content: "\e614"
}

.iconyoutube:before {
	content: "\e615"
}

.iconinstagram:before {
	content: "\e616"
}

.icontwitter:before {
	content: "\e617"
}

.iconfacebook:before {
	content: "\e618"
}

.iconblog:before {
	content: "\e611"
}

.iconorders:before {
	content: "\e61e"
}

.iconwenhao:before {
	content: "\e61f"
}

.iconinfor:before {
	content: "\e620"
}

html {
	font-size: 62.5%
}

div#sitebody {
	margin-bottom: -41px;
}

body {
	font-size: 1.4rem;
	padding: 0;
	margin: 0;
	font-family: Inter;
	font-weight: normal;
}

a,em,img,ol,ol li,p,span,ul,ul li {
	padding: 0;
	margin: 0;
	border: none;
	font-style: normal;
	font-size: 1em;
	color: #222934;
	text-decoration: none;
	list-style: none
}

h1,h2,h3 {
	margin: 0;
	font-family: Inter;
	font-weight: normal;
}

h1 {
	font-family: Inter;
	font-weight: 700;
	font-size: 72px;
	line-height: 1.5;
	color: #101A4C;
}

#stata17_logo {
	display: inline-block;
	height: 80px;
}

#stata17_logo path {
	fill: #101A4C;
}

h2 {
	font-size: 1.8rem;
	color: #101A4C;
}

.hidden {
	display: none
}

.disFlex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	display: -moz-flex;
	display: -ms-flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

#menu {
	font-family: 'Roboto', Arial, sans-serif;
}

#locationbar {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 11pt;
}

.mainContainer {
	margin: 0 7%
}

a,button,span,ul li {
	outline: 0
}

select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	background: #fff url(https://www.stata.com/includes/js/cart/order/images/arrowDown.png) no-repeat 98% center;
	border: 2px solid #8a94a4;
	border-radius: 5px;
	line-height: 56px;
	font-size: 1.8rem;
	width: 100%;
	padding: 0 10px
}

button.action {
	background: #236194;
	padding: 18px 0;
	color: #fff;
	font-size: 2rem;
	width: 222px;
	border: none;
	margin-top: 32px;
	cursor: pointer
}
/*
#locationbar font {
	font-size: 1.4rem;
}
*/
.mainPage {
//        background: url(../images/bg.png) repeat-x top left;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4ecf1+0,f3f6f8+50,f3f6f8+50,e4ecf1+100 */
background: rgb(31,71,119);
background: linear-gradient(351deg, rgba(31,71,119,1) 0%, rgba(235,244,255,1) 75%);
	position: relative;
	overflow: hidden
}

.mainPage .bottomDottle {
	margin: 88px 0 75px 32px
}

.mainPage .rightDottle {
	position: absolute;
	right: -30%;
	top: -36%
}

.mainPage .page-title {
	margin-top: 120px;
	font-size: 6rem;
	text-align: center;
	color: #091e38;
	font-family: interBold
}

.mainPage .main .left-block {
	margin: 60px 77px 0 14%;
	width: 35%;
	position: relative;
	z-index: 2
}

.mainPage .main .right-block {
	margin-right: 14%;
	margin-left: 77px;
	position: relative;
	z-index: 2;
	width: 28%
}

.mainPage .main .right-block img {
	width: 100%;
	height: auto
}

.mainPage .main .right-block img.earthImg {
	position: relative;
	z-index: 3
}

.mainPage .main h2 {
	font-size: 3rem;
	margin-bottom: 32px;
	color: #236194;
}

.mainPage .main p {
	font-size: 2rem;
	margin-bottom: 20px
}

.mainPage .boxs {
	background: #11345b;
	padding: 144px 0
}

.mainPage .boxs .boxGroup {
	margin: 0 140px
}

.mainPage .boxs .box {
	width: 28%;
	background: #fff;
	padding: 48px 32px;
	border-radius: 15px
}

.mainPage .boxs .box a {
	color: #236194;
	font-size: 1.8rem;
	font-weight: 700
}

.mainPage .boxs .box .title {
	color: #236194;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 24px
}

.mainPage .boxs .box .title span {
	color: #236194;
	font-size: 2.2rem;
	margin-bottom: 24px
}

.mainPage .boxs .box p {
	font-size: 1.6rem
}

.mainPage .left-block #country {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size: 1.8rem;
	line-height: 56px;
}

#country:active, #country:hover {
	outline-color: #236194;
}

@media (max-width:1600px) {
	.mainPage .boxs .box {
		width: 27%
	}
}

@media (max-width:1400px) {
	button.action,select {
		font-size: 1.6rem;
		display: block
	}

	.mainPage .page-title {
		margin-top: 80px;
		font-size: 4rem
	}

	.mainPage .main {
		margin-top: 50px
	}

	.mainPage .main p {
		font-size: 1.6rem
	}

	.mainPage .main .left-block {
		margin-left: 70px;
		margin-top: 0
	}

	.mainPage .main .right-block {
		margin-right: 70px;
		margin-left: 0;
		width: 38%
	}

	.mainPage .boxs {
		padding: 98px 0
	}

	.mainPage .boxs .box {
		width: 27.5%;
		padding: 24px 20px
	}

	.mainPage .boxs .box .title {
		font-size: 2rem;
		margin-bottom: 16px
	}

	.mainPage .boxs .box .title span {
		font-size: 1.8rem
	}

	.mainPage .boxs .boxGroup {
		margin: 0 70px
	}
}

@media (max-width:980px) {
	select {
		max-width: 398px
	}

	.mainPage .page-title {
		font-size: 3rem;
		margin-top: 48px
	}

	.mainPage .boxs {
		padding: 48px 0
	}

	.mainPage .boxs .boxGroup {
		margin: 0 30px
	}

	.mainPage .main .right-block {
		margin-right: 30px
	}

	.mainPage .main .left-block {
		margin-left: 30px
	}
}

@media (max-width:840px) {
	.disFlex {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}

	.mainPage .main p {
		font-size: 2rem
	}

	.mainPage .main .left-block {
		width: 100%;
		margin: 0 43px
	}

	.mainPage .main .right-block {
		width: 100%;
		margin: 56px auto 0 auto;
		max-width: 536px
	}

	.mainPage .main .boxs .box {
		width: 100%;
		margin: 12px auto;
		max-width: 536px
	}
}

@media (max-width:768px) {
	button.action {
		width: 398px;
	}

	.mainPage .page-title {
		font-size: 2.6rem;
		margin-top: 30px
	}

	.mainPage .main {
		margin-top: 30px
	}

	.mainPage .main p {
		font-size: 1.6rem
	}

	.mainPage .main .right-block {
		margin: 50px 20px
	}

	.mainPage .main .left-block {
		margin: 0 20px
	}

	.mainPage .bottomDottle,.mainPage .rightDottle {
		display: none
	}

	.mainPage .boxs .boxGroup {
		margin: 0 20px
	}

	.mainPage .boxs .box p {
		font-size: 1.4rem
	}

	.mainPage .boxs .box a {
		font-size: 1.6rem
	}
}

.popBg {
	background: rgba(51,51,51,.55);
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 3;
	display: none
}

.modal-popup {
	display: none;
	position: fixed;
	max-width: 720px;
	border-radius: 10px;
	background: #135f90;
	margin: 0 auto;
	z-index: 4;
	top: 50%;
	left: 50%;
	width: 75%;
	min-height: 30px;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%)
}

.modal-popup .modal-inner-wrap {
	background: #fff;
	margin-top: 10px;
	padding: 30px 48px
}

.modal-popup header {
	padding: 0;
	position: relative;
	margin-bottom: 20px
}

.modal-popup .modal-title {
	border-bottom: 2px solid #135f90;
	font-size: 24px;
	font-weight: 700;
	padding-bottom: 10px;
	color: #135f90
}

.modal-popup .content-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 32px
}

.modal-popup .content-wrapper .product-img {
	margin-right: 30px
}

.modal-popup .content-wrapper .product-img img {
	width: 108px;
	height: auto
}

.modal-popup .content-wrapper .product-detail h3 {
	font-size: 24px;
	margin-bottom: 20px;
	font-weight: 400;
	color: #135f90
}

.modal-popup .content-wrapper .product-detail .price {
	font-size: 20px
}

.modal-popup .tolinks {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.modal-popup .tolinks a {
	padding: 14px 36px;
	margin: 0 20px;
	cursor: pointer;
	display: inline-block;
	font-size: 18px
}

.modal-popup .tolinks a.primary {
	color: #fff;
	background: #135f90
}

.modal-popup .tolinks a.secondary {
	color: #135f90;
	border: 2px solid #135f90
}

@media (max-width:768px) {
	.modal-popup {
		width: 97%;
		top: auto;
		bottom: 0;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%)
	}

	.modal-popup .tolinks {
		display: block
	}

	.modal-popup .tolinks a {
		display: block;
		margin-bottom: 20px;
		text-align: center
	}
	.modal-popup .content-wrapper .product-detail h3 {
		font-size: 2rem
	}
}

@media (max-width:580px) {
	.modal-popup .modal-title {
		font-size: 20px
	}

	.modal-popup .content-wrapper .product-detail h3 {
		font-size: 18px
	}

	h1 {
		font-size: 58px;
	}

	#stata17_logo {
		height: 60px;
	}
}

@media (max-width:480px) {
	#country {
		width: 100%;
		max-width: 100%;
	}

	button.action {
		width: 100%;
	}

	h1 {
		font-size: 48px;
	}

	#stata17_logo {
		height: 50px;
		margin-left: -10px;
	}

	.modal-popup .modal-title {
		font-size: 16px
	}

	.modal-popup .content-wrapper .product-detail h3 {
		font-size: 14px
	}

	.modal-popup .content-wrapper .product-detail .price {
		font-size: 1.4rem
	}

	.modal-popup .tolinks a {
		font-size: 1.4rem
	}
}
