@charset "utf-8";
/* CSS Document */

html,body{width:100%;margin:0;padding:0;font-family:"Microsoft YaHei","宋体","黑体","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100% !important;text-size-adjust:100% !important;-moz-text-size-adjust:100% !important;}
html,body,div,span,h1,h2,h3,h4,h5,h6,em,img,strong,sub,sup,tt,dd,dl,dt,form,label,table,caption,tbody,tfoot,thead,tr,th,td,ul,li,p,a,section,a{margin:0;padding:0;font-weight:normal;}
a{text-decoration:none !important;}
input,select,textarea{vertical-align:middle;}
img{border:0;margin:0;padding:0;display:block;width:100%;}
ul,li{list-style-type:none;}
a{blr:expression(this.onFocus=this.blur());text-decoration:none;}
*{margin:0;padding:0;border:0;}
div,a{tap-highlight-color:rgba(0,0,0,0);focus-ring-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-focus-ring-color:rgba(0,0,0,0);-moz-tap-highlight-color:rgba(0,0,0,0);-moz-focus-ring-color:rgba(0,0,0,0);}

select{
	/* 解决select下拉箭头在ios上不兼容的问题 */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* background: url('../../assets/arrow_drop_down.png') no-repeat scroll right center transparent; */
	background: transparent;
	border: 1px solid #749ccb;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

.clearfix:after {content:"\20"; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{display:inline-block; }
.clearfix{display:block;}
.clearbox{border-top:transparent 0px solid;clear:both;font-size:0;margin-top:0px;visibility:hidden; overflow:hidden;height:0;}

.edit-container{ width: 72.916vw; margin-right: auto; margin-left: auto; position: relative;}
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
.visible-xs{ display: none !important;}

body{ background-color: #f1f1f1;}
.bodymain{ width:100%; overflow: hidden; position: relative; left: 0;}

.header{ height: 68px; background-color: #fff; box-shadow: 0 3px 25px rgba(18, 27, 53, .2); position: relative; z-index: 9; display: flex; align-items: center; justify-content: space-between;}
.header .logo{ width: 8%; margin-left: 7%;}
.header .logo img{ display: block; width: 100%;}

.home-banner{ position: relative; overflow: hidden;}
.home-banner img{ display: block; width: 100%;}
.home-banner .banner-inner{ width: 100%; position: absolute; left: 0; top: 50%; transform:translateY(-45%);}
.home-banner .banner-inner .banner-inner-cont{}
.home-banner .banner-inner .banner-inner-cont .pic{ float: right; width: 23.125vw; margin-right: 8.072vw;}
.home-banner .banner-inner .banner-inner-cont .pic img{ display: block; width: 100%;}
.home-banner .banner-inner .banner-inner-cont .cont-inner{ float: left; width: 32vw; margin-left: 5vw; font-size: 20px; margin-top: 5%;}
.home-banner .banner-inner .banner-inner-cont .cont-inner .title-box{ font-size: 24px;}
.home-banner .banner-inner .banner-inner-cont .cont-inner .title-box .title{ font-size: 78px; font-weight: bold; color: #b8a085;}
.home-banner .banner-inner .banner-inner-cont .cont-inner .name{ font-size: 24px; font-weight: bold; margin-top: 1.822vw;}
.home-banner .banner-inner .banner-inner-cont .cont-inner .cont{ line-height: 2; margin-top: 1.822vw;}
.home-banner .banner-inner .banner-inner-cont .cont-inner .btn-box{ margin-top: 1.822vw;}
.home-banner .banner-inner .banner-inner-cont .cont-inner .btn-box a{ display: block; width: 10.416vw; line-height: 2.604vw; background-color: #b8a085; font-size: 20px; color: #fff; text-align: center;}

.main-container{ padding-bottom: 25px;}
.main-section1{ margin-top: 25px; background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section1-bg.jpg) center repeat; background-size: cover;}
.main-section1 .video-box{ float: left; width: 50%;}
.main-section1 .video-box video{ display: block; width: 100%; height: 100%;}
.main-section1 .cont-inner{ float: right; width: 50%; padding: 3.8vw 4.166vw; position: relative; font-size: 20px; line-height: 2.5;}
.main-section1 .cont-inner::before{ content: ''; width: 7.656vw; height: 4.218vw; background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section1-horn.jpg) center no-repeat; background-size: cover; position: absolute; right: 0; bottom: 0;}
.main-section1 .cont-inner::before,.main-section1 .cont-inner::after{ content: ''; width: 2.187vw; height: 1.822vw; background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute;}
.main-section1 .cont-inner::before{ background-image: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/icon-quotation-marks1.png); left: 1.8vw; top: 2vw;}
.main-section1 .cont-inner::after{ background-image: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/icon-quotation-marks2.png); right: 1.8vw; bottom: 2vw;}
.main-section1 .cont-inner .cont{ /* text-align: center; */ text-decoration: underline; text-underline-offset: 0.52vw; text-decoration-color: rgba(134, 134, 134, .7);}
.main-section1 .cont-inner .signature{ text-align: right;}

.main-section2{ background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section2-bg.jpg) center no-repeat; background-size: cover; margin-top: 25px; padding: 5.208vw 9.114vw 4.687vw 9.114vw; position: relative;}
.main-section2 .pic{ float: right; width: 28.697vw;}
.main-section2 .pic img{ display: block; width: 100%;}
.main-section2 .cont-inner{ width: 28.645vw; position: absolute; top: 50%; transform:translateY(-50%);}
.main-section2 .cont-inner .title{ font-size: 38px; font-weight: bold; color: #b8a085; line-height: 1.5;}
.main-section2 .cont-inner .cont{ font-size: 20px; line-height: 2; margin-top: 2.604vw;}

.main-section3{ margin-top: 25px;}
.main-section3 .top-box{ background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section3-top-bg.jpg) center no-repeat; background-size: cover; padding: 4.427vw 5.208vw 0 5.208vw; position: relative;}
.main-section3 .top-box .cont-inner{ float: right; width: 25.52vw;}
.main-section3 .top-box .cont-inner .title-box{ color: #b8a085; line-height: 2;}
.main-section3 .top-box .cont-inner .title-box .title1{ font-size: 30px; font-weight: bold;}
.main-section3 .top-box .cont-inner .title-box .title1 span{ text-decoration: underline; text-underline-offset: 0.52vw; font-weight: bold;}
.main-section3 .top-box .cont-inner .title-box .title2{ font-size: 38px; font-weight: bold;}
.main-section3 .top-box .cont-inner .cont{ font-size: 20px; line-height: 1.75; margin-top: 1.562vw;}
.main-section3 .bottom-box{ background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section3-bottom-bg.jpg) top center no-repeat; background-size: cover; padding: 7.812vw 5.208vw 4.1666vw 5.208vw; position: relative; font-size: 22px; font-weight: bold; line-height: 2; text-align: center;}

.main-section4{ margin-top: 25px;}
.main-section4 img{ display: block; width: 100%;}

.main-section5{ background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section5-bg.jpg) top center no-repeat; background-size: cover; padding: 5.208vw 0 8.072vw 0;}
.main-section5 .top-title-box{ font-size: 42px; font-weight: bold; color: #b8a085; text-align: center;}
.main-section5-list{ width: 75%; margin: 0 auto; padding-top: 2.343vw;}
.main-section5-list-block{ margin-top: 2.604vw;}
.main-section5-list-block .name-box{ font-size: 18px; padding: 0 3.125vw;}
.main-section5-list-block .name-box .name{ font-size: 30px; font-weight: bold;}
.main-section5-list-block .name-box .title{ margin-top: 0.781vw;}
.main-section5-list-block .cont-box{ background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section5-box-block1.jpg) center repeat; background-size: cover; margin-top: 20px; padding: 1.562vw 3.125vw; font-size: 18px; line-height: 1.8; position: relative;}
.main-section5-list-block .cont-box::before{ content: ''; width: 5.781vw; height: 3.229vw; background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section5-box-horn1.jpg) center no-repeat; background-size: cover; position: absolute; right: 0; bottom: 0;}
.main-section5-list-block .cont-box .cont{ position: relative; z-index: 5;}
.main-section5-list-block .cont-box .cont p{ text-indent: 2em;}

.main-section5-list-block:nth-child(even) .name-box{ text-align: right;}
.main-section5-list-block:nth-child(even) .cont-box{ background-image: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section5-box-block2.jpg);}
.main-section5-list-block:nth-child(even) .cont-box::before{ background-image: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section5-box-horn2.jpg); right: auto; left: 0;}

.main-section6{ background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section6-bg.jpg) center no-repeat; background-size: cover; padding: 2.604vw 9.114vw 3.906vw 9.114vw; position: relative;}
.main-section6 .pic{ /* float: right; */ width: 23.177vw; position: absolute; bottom: 0; right: 3.125vw;}
.main-section6 .pic img{ display: block; width: 100%;}
.main-section6 .cont-inner{ width: 35.677vw; padding-top: 3.906vw; /* position: absolute; left: 9.114vw; top: 50%; transform:translateY(-40%); */}
.main-section6 .cont-inner .top-title-box{ font-size: 40px; font-weight: bold; color: #b8a085;}
.main-section6 .cont-inner .cont{ font-size: 18px; line-height: 1.5; margin-top: 3.125vw;}
.main-section6 .cont-inner .cont .title{ font-size: 30px; font-weight: bold;}
.main-section6 .cont-inner .cont p{ margin-top: 20px;}

.main-section7{ background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/section7-bg.jpg) center no-repeat; background-size: cover; padding-top: 1.562vw; position: relative; margin-top: 25px;}
.main-section7 .pic{ float: left; width: 35.052vw; margin-left: 12.5vw;}
.main-section7 .pic img{ display: block; width: 100%;}
.main-section7 .cont-inner{ width: 44%; position: absolute; right: 9vw; top: 16%;}
.main-section7 .cont-inner .top-title-box{ font-size: 0; text-align: center;}
.main-section7 .cont-inner .top-title-box .icon{ display: inline-block; vertical-align: middle; width: 1.979vw;}
.main-section7 .cont-inner .top-title-box .icon img{ display: block; width: 100%;}
.main-section7 .cont-inner .top-title-box span{ display: inline-block; vertical-align: middle; font-size: 34px; font-weight: bold; margin-left: 10px;}
.main-section7 .cont-inner .shop-list{ margin-top: 1.562vw; font-size: 0; text-align: center;}
.main-section7 .cont-inner .shop-list ul{ margin: 0 -0.52vw;}
.main-section7 .cont-inner .shop-list li{ display: inline-block; vertical-align: top; width: 20%; padding: 0 0.52vw;}
.main-section7 .cont-inner .shop-list li .block-box .icon{ width: 100%; height: 5.2vw; position: relative; font-size: 0; display: flex; align-items: flex-end;}
.main-section7 .cont-inner .shop-list li .block-box .icon img{ display: inline-block; vertical-align: bottom; width: auto; height: 3.958vw; border: 0.208vw solid #fff; border-radius: 0.833vw; overflow: hidden; box-shadow: 0.52vw -0.52vw 16px rgba(150,123,93,0.2); margin: 0 auto;}
.main-section7 .cont-inner .shop-list li .block-box .title{ font-size: 14px; color: #000; margin-top: 0.52vw; height: 3em;}
.main-section7 .cont-inner .shop-list li .block-box .arrow{ width: 2.083vw; height: 1.718vw; background: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/icon-shop-arrow.png) center no-repeat; background-size: cover; margin: 0.4vw auto 0 auto;}
.main-section7 .cont-inner .shop-list li .block-box:hover .icon img{ height: 5.2vw; transition: 0.3s ease;}
.main-section7 .cont-inner .shop-list li .block-box:hover .arrow{ background-image: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/icon-shop-arrow2.png);}

.opacity-ani{ transition: 1s; transform: translateY(15px); opacity: 0;}
.opacity-ani.animation{ transform: translateY(0); opacity: 1;}




/*底部*/
.bottom{width:100%;height:60px;background-color:#404043;text-align:center;font-size:12px;line-height:60px;color:#ccc;}
.bottom .main{margin:0 auto;}
.bottom img{width:auto;vertical-align:middle;display:inline-block;padding-left:1%;padding-right:0.5%;}


@media (max-width:1680px) {
	.home-banner .banner-inner .banner-inner-cont .cont-inner{ font-size: 16px;}
	.home-banner .banner-inner .banner-inner-cont .cont-inner .title-box{ font-size: 20px;}
	.home-banner .banner-inner .banner-inner-cont .cont-inner .title-box .title{ font-size: 62px;}
	.home-banner .banner-inner .banner-inner-cont .cont-inner .name{ font-size: 20px;}
	.home-banner .banner-inner .banner-inner-cont .cont-inner .btn-box a{ font-size: 16px;}
	
	.main-section1 .cont-inner{ font-size: 16px;}
	
	.main-section2 .cont-inner .title{ font-size: 30px;}
	.main-section2 .cont-inner .cont{ font-size: 16px;}
	
	.main-section3 .top-box .cont-inner .title-box .title1{ font-size: 24px;}
	.main-section3 .top-box .cont-inner .title-box .title2{ font-size: 30px;}
	.main-section3 .top-box .cont-inner .cont{ font-size: 16px;}
	.main-section3 .bottom-box{ font-size: 18px;}
	
	.main-section5 .top-title-box{ font-size: 34px;}
	.main-section5-list-block .name-box{ font-size: 14px;}
	.main-section5-list-block .name-box .name{ font-size: 24px;}
	.main-section5-list-block .cont-box{ font-size: 14px;}
	
	.main-section6 .cont-inner .top-title-box{ font-size: 32px;}
	.main-section6 .cont-inner .cont{ font-size: 14px;}
	.main-section6 .cont-inner .cont .title{ font-size: 24px;}
	
	.main-section7 .cont-inner .top-title-box span{ font-size: 28px;}
	.main-section7 .cont-inner .shop-list li .block-box .title{ font-size: 12px;}
	
}

@media (max-width:1440px) {
	.home-banner .banner-inner .banner-inner-cont .cont-inner{ font-size: 14px;}
	.home-banner .banner-inner .banner-inner-cont .cont-inner .title-box{ font-size: 16px;}
	.home-banner .banner-inner .banner-inner-cont .cont-inner .title-box .title{ font-size: 54px;}
	.home-banner .banner-inner .banner-inner-cont .cont-inner .name{ font-size: 16px;}
	.home-banner .banner-inner .banner-inner-cont .cont-inner .btn-box a{ font-size: 14px;}
	
	.main-section1 .cont-inner{ font-size: 14px;}
	.main-section2 .cont-inner .title{ font-size: 26px;}
	.main-section2 .cont-inner .cont{ font-size: 14px;}
	
	.main-section3 .top-box .cont-inner .title-box .title1{ font-size: 20px;}
	.main-section3 .top-box .cont-inner .title-box .title2{ font-size: 26px;}
	.main-section3 .top-box .cont-inner .cont{ font-size: 14px;}
	.main-section3 .bottom-box{ font-size: 16px;}
	
	.main-section5 .top-title-box{ font-size: 30px;}
	.main-section5-list-block .name-box .name{ font-size: 20px;}
	
	.main-section6 .cont-inner .top-title-box{ font-size: 28px;}
	.main-section6 .cont-inner .cont .title{ font-size: 20px;}
	
	.main-section7 .cont-inner{ width: 52%; right: 3.5vw; top: 13%;}
	
	
	
}

@media (max-width:1200px) {
	.edit-container{ width: 960px;}
	
	.home-banner .banner-inner .banner-inner-cont .cont-inner{ width: 38vw;}
	.home-banner .banner-inner .banner-inner-cont .cont-inner .title-box .title{ font-size: 40px;}
	
	.main-section2 .cont-inner .title{ font-size: 20px;}
	.main-section2 .cont-inner{ width: 38vw;}
	
	.main-section3 .top-box .cont-inner{ width: 38vw;}
	.main-section3 .top-box .cont-inner .title-box .title1{ font-size: 16px;}
	.main-section3 .top-box .cont-inner .title-box .title2{ font-size: 20px;}
	.main-section3 .bottom-box{ font-size: 14px;}
	
	.main-section5 .top-title-box{ font-size: 22px;}
	.main-section5-list-block .name-box .name{ font-size: 16px;}
	
	.main-section6 .cont-inner{ width: 51.5vw;}
	.main-section6 .cont-inner .top-title-box{ font-size: 20px;}
	.main-section6 .cont-inner .cont .title{ font-size: 16px;}
	
	.main-section7 .cont-inner{ width: 51.5vw;}
	.main-section7 .cont-inner .top-title-box span{ font-size: 18px;}
	
	
}

@media (max-width:960px) {
	.edit-container{ width: 92.3%;}
	.visible-xs{ display: block !important;}
	.hidden-xs{ display: none !important;}
	
	.header{ height: auto; padding: 2% 0;}
	.header .logo{ width: 18.7%; margin-left: 4%; margin-top: 0;}
	
	.banner-inner-cont-mobile{ width: 100%; padding: 0 5.333vw; position: absolute; left: 0; top: 50%; transform:translateY(-50%);}
	.banner-inner-cont-mobile .title-box{ font-size: 3.733vw; text-align: center;}
	.banner-inner-cont-mobile .title-box .title{ font-size: 12.4vw; font-weight: bold; color: #b8a085;}
	.banner-inner-cont-mobile .name{ font-size: 3.733vw; font-weight: bold; text-align: center; margin-top: 2.666vw;}
	.banner-inner-cont-mobile .cont-box{ margin-top: 6vw;}
	.banner-inner-cont-mobile .cont-box .cont-box-inner{ float: left; width: 40vw; margin-top: 5%;}
	.banner-inner-cont-mobile .cont-box .cont-box-inner .cont{ font-size: 3.2vw; line-height: 1.75;}
	.banner-inner-cont-mobile .cont-box .cont-box-inner .btn-box{ margin-top: 5.333vw;}
	.banner-inner-cont-mobile .cont-box .cont-box-inner .btn-box a{ display: block; width: 18.666vw; line-height: 6.266vw; background-color: #b8a085; font-size: 3.2vw; color: #fff; text-align: center;}
	
	.banner-inner-cont-mobile .cont-box .pic{ float: right; width: 42vw; margin-right: -4vw;}
	.banner-inner-cont-mobile .cont-box .pic img{ display: block; width: 100%;}
	
	.main-section1{ margin-top: 4vw;}
	.main-section1 .video-box{ float: none; width: 100%;}
	.main-section1 .cont-inner{ float: none; width: 100%; font-size: 3.2vw; padding: 5.333vw 10.666vw;}
	.main-section1 .cont-inner::before, .main-section1 .cont-inner::after{ width: 4.48vw; height: 3.733vw;}
	.main-section1 .cont-inner::before{ left: 3vw; top: 4vw;}
	.main-section1 .cont-inner::after{ right: 3vw; bottom: 4vw;}
	.main-section1 .cont-inner .cont{ text-align: left;}
	
	.main-section2{ margin-top: 4vw; padding: 5.333vw;}
	.main-section2 .pic{ float: none; width: 100%; text-align: right;}
	.main-section2 .pic img{ display: inline-block; width: 45vw;}
	.main-section2 .cont-inner{ position: initial; transform: translateY(0); width: 100%;}
	.main-section2 .cont-inner .title{ font-size: 4.266vw;}
	.main-section2 .cont-inner .cont{ font-size: 3.2vw;}
	
	.main-section3{ margin-top: 4vw;}
	.main-section3 .top-box{ padding: 5.333vw 5.333vw 0 5.333vw;}
	.main-section3 .top-box .cont-inner{ float: none; width: 100%;}
	.main-section3 .top-box .cont-inner .title-box .title1{ font-size: 3.733vw;}
	.main-section3 .top-box .cont-inner .title-box .title2{ font-size: 4.266vw;}
	.main-section3 .top-box .cont-inner .cont{ font-size: 3.2vw;}
	.main-section3 .bottom-box{ font-size: 3.2vw; padding: 15vw 5.333vw 5.333vw 5.333vw;}
	
	.main-section4{ margin-top: 4vw;}
	
	.main-section5{ padding: 5.333vw;}
	.main-section5 .top-title-box{ font-size: 4.533vw;}
	.main-section5-list{ width: 100%;}
	.main-section5-list-block{ margin-top: 30px;}
	.main-section5-list-block .name-box{ font-size: 3.2vw; padding: 0 5.333vw;}
	.main-section5-list-block .name-box .name{ font-size: 3.733vw;}
	.main-section5-list-block .name-box .title{ margin-top: 10px;}
	.main-section5-list-block .cont-box{ font-size: 3.2vw; padding: 5.333vw;}
	.main-section5-list-block .cont-box::before{ width: 14.8vw; height: 8.266vw;}
	
	.main-section6{ padding: 5.333vw;}
	.main-section6 .pic{ position: initial; float: left; width: 40vw; margin: 0 5vw 3vw 0;}
	.main-section6 .cont-inner{ width: 100%;}
	.main-section6 .cont-inner .top-title-box{ font-size: 4.266vw;}
	.main-section6 .cont-inner .cont .title{ font-size: 3.2vw;}
	.main-section6 .cont-inner .cont{ font-size: 3.2vw;}
	.main-section6 .cont-inner .cont p{ margin-top: 15px;}
	
	.main-section7{ margin-top: 4vw; padding: 5.333vw; background: #e9e9e9;}
	.main-section7 .pic{ width: 80vw; float: none; margin-left: 30%;}
	.main-section7 .cont-inner{ width: 100%; position: initial; margin-top: 4vw;}
	.main-section7 .cont-inner .top-title-box .icon{ width: 4.266vw;}
	.main-section7 .cont-inner .top-title-box span{ font-size: 3.733vw;}
	.main-section7 .cont-inner .shop-list{ margin-top: 0; text-align: left;}
	.main-section7 .cont-inner .shop-list li{ width: 33.333%; text-align: center; margin-top: 4vw;}
	.main-section7 .cont-inner .shop-list li .block-box .icon{ height: auto; width: 50%; display: block; margin: 0 auto;}
	.main-section7 .cont-inner .shop-list li .block-box .icon img{ height: auto; width: 100%; margin: 0 auto; border: 0.416vw solid #fff; border-radius: 1.3vw;}
	.main-section7 .cont-inner .shop-list li .block-box .title{ font-size: 3.2vw; margin-top: 2vw;}
	.main-section7 .cont-inner .shop-list li .block-box .arrow{ width: 5.333vw; height: 4.4vw;}
	.main-section7 .cont-inner .shop-list li .block-box:hover .icon img{ height: 100%; transition: 0.3s ease;}
	.main-section7 .cont-inner .shop-list li .block-box:hover .arrow{ background-image: url(//m.natachou.com/cn/pub/minisite/202407/newbook/images/icon-shop-arrow.png);}
	
	
	
	
	
}