* { font-family: PingFangSC-Regular, sans-serif, Microsoft Yahei; font-size: .14rem; box-sizing: border-box; }
a { color: #005372; text-decoration: none; }
.nav { min-width: 7rem; }
.nav a{ font-size: .24rem; padding: 0 .2rem; border-left: 1px solid #EC6D34; }
.nav a:hover{ color: #EC6D34; transition: color .3s; }
.nav a:last-of-type{ border-right: 1px solid #EC6D34; }
.main_box{ max-width: 18rem; max-height: 10rem; margin: auto; width: 90%; height: 8.8rem; padding: .4rem 0; }

.home {}
.home .home_main{}
.home .home_main{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.home .home_main .home_clothes{ width: 5rem; height: 7rem; background-image: url(../img/home_1.png); background-size: 100% 100%; position: relative; }
.home .home_main .home_clothes_info{ width: 3rem; height: 4.2rem; background-image: url(../img/home_2.png); background-size: 100% 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; }
.home .home_main .home_clothes_info p{ margin: 0 .45rem; font-weight: bold; height: .2rem; font-size: .24rem; }
.home .home_main .home_clothes_info p:not(:last-of-type){ margin-bottom: .26rem; }
.home .home_main .home_main_logo{ margin-left: 1rem; }
.home .home_main .home_main_logo img{ width: 4rem; display: block; margin: auto; }
.home .home_main .home_main_logo .nav{ margin-top: .6rem; }
.home .home_main .home_main_bottom{ width: 100%; font-size: .21rem; text-align: center; line-height: .3rem; margin-top: .4rem; }

.main_box{ display: flex; justify-content: space-between; position: relative;}
.main_box .nav { position: absolute; bottom: .3rem; left: .8rem; }
.main_box .title { position: absolute; top: .5rem; right: .8rem; font-size: .65rem; margin: 0; }
.main_box .left{ background-image: url(../img/pcbg_left.png); background-repeat: no-repeat; background-size: auto 100%; }
.main_box .right{ padding-top: 1rem; background-image: url(../img/pcbg_right.png); background-repeat: no-repeat; background-size: auto 100%; background-position: bottom right; padding-right: .8rem; flex: 1;}

.section2{}
.section2 .main_box .left { padding-left: .8rem; }
.section2 .main_box .left img{ width: 5.8rem; margin: .7rem 1rem .7rem 0; }
.section2 .main_box .right p { font-size: .24rem; line-height: 1.8; position: relative; clear: both; }
.section2 .main_box .right p:first-of-type { float: left; }
.section2 .main_box .right p:first-of-type::after{ content: '®'; font-size: .16rem; text-align: center; position: absolute; }

.section3{}
.section3 .main_box .left { padding-left: .07rem; }
.section3 .main_box .left img{ width: 4rem; margin: 0rem 3.2rem 0 1rem; }
.section3 .main_box .right p { width: 4.6rem; font-size: .24rem; line-height: 1.8; color: #005372; text-align: center; }
.section3 .main_box .right .button_bar { margin-top: 1.6rem; width: 4.6rem; display: flex; justify-content: space-between; }
.section3 .main_box .right .button_bar img{ width: .9rem; height: .9rem; cursor: pointer;  transition: filter .5s; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); }
.section3 .main_box .right .button_bar .active{ transition: filter .5s; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); }
.section3 .main_box .right .er { width: 4.6rem; }
.section3 .main_box .right .er img{ display: block; margin: 0 auto; width: 1.9rem; }

.section4{}
.section4 .main_box .left { padding-left: .07rem; }
.section4 .main_box .left img{ width: 5rem; margin: .7rem 3rem .7rem 1rem; }
.section4 .main_box .right .button_item { display: flex; margin: .2rem 0; }
.section4 .main_box .right .button_item>img{ width: .9rem; height: .9rem; cursor: pointer; }
.section4 .main_box .right .button_item .buy_info { margin-left: .4rem; }
.section4 .main_box .right .button_item .buy_info p { width: 4.6rem; font-size: .24rem; line-height: 1.5; color: #005372; text-align: left; margin: .05rem; }
.section4 .main_box .right .button_item .buy_info .er { width: 4.6rem; }
.section4 .main_box .right .button_item .buy_info .er img{ display: block; margin-left: .4rem; width: 1.9rem; height: 1.9rem; }

.section5{}
.section5 .main_box .left { padding-left: .07rem; }
.section5 .main_box .left img{ width: 3.4rem; margin: .7rem 3.8rem .7rem 1rem; }
.section5 .main_box .right { display: flex; flex-direction: column; justify-content: center; }
.section5 .main_box .right .button_item { display: flex; margin-bottom: .4rem; }
.section5 .main_box .right .button_item>img{ width: .9rem; height: .9rem; cursor: pointer; }
.section5 .main_box .right .button_item .buy_info { margin-left: .4rem; }
.section5 .main_box .right .button_item .buy_info p { width: 4.6rem; font-size: .24rem; line-height: 1.5; color: #005372; text-align: left; margin: .05rem; }
.section5 .main_box .right .button_item .buy_info .er { width: 4.6rem; }
.section5 .main_box .right .button_item .buy_info .er img{ display: block; width: 1.9rem; height: 1.9rem; }

@media screen and (max-width: 750px) {
  .nav { display: none }
  .nav a{ font-size: .12rem; padding: 0 .08rem; border-left: 1px solid #EC6D34; }

  .main_box{ width: 100%; flex-direction: column; height: 100vh; padding: 0.2rem .3rem; display: flex; justify-content: space-around; position: relative; }
  .main_box .nav { position: absolute; bottom: .3rem; left: .8rem; }
  .main_box .title { position: absolute; top: .25rem; right: .6rem; font-size: .26rem; margin: 0; line-height: 1; }
  .main_box .left{ background-image: none; padding-left: 0 !important; margin: .2rem auto 0; }
  .main_box .right{ background-image: none; padding-top: 0; padding-left: .08rem; padding-right: .18rem; margin-bottom: .4rem; flex: none; }
  .main_box::before{ content: ''; width: calc(100% - .6rem); height: calc(100% - .825rem); position: absolute; top: .2rem; background-image: url(../img/phone_top.png); background-size: 100% auto; }
  .main_box::after{ content: ''; width: calc(100% - .6rem); height: .447rem; position: absolute; bottom: .2rem; background-image: url(../img/phone_bottom.png); background-size: auto 100%; background-repeat: no-repeat;}

  .home .home_main { height: 90%; }
  .home .home_main{ flex-direction: column; align-items: center; justify-content: space-between; height: calc(100% - 1rem); }
  .home .home_main .home_clothes{ width: 1.8rem; height: 2.6rem; margin: 0 auto; order: 1; }
  .home .home_main .home_clothes_info{ width: 1.4rem; height: 1.8rem; }
  .home .home_main .home_clothes_info p{ margin: 0 .2rem; font-size: .12rem; height: .16rem;}
  .home .home_main .home_clothes_info p:not(:last-of-type){ margin-bottom: .05rem; }
  .home .home_main .home_main_logo{ margin: 0; order: 0; }
  .home .home_main .home_main_logo img{ width: 1.6rem; }
  .home .home_main .home_main_logo .nav{ display: none; }
  .home .home_main .home_main_bottom{ height: .6rem; font-size: .12rem; line-height: .2rem; margin: 0; order: 2;}

  .section2 .main_box .left { margin-top: .4rem; }
  .section2 .main_box .left img { width: 2.2rem; margin: 0 .18rem .1rem 0; }
  .section2 .main_box .right p { font-size: .12rem; margin: 0; margin-bottom: .1rem; line-height: 1.3; }
  .section2 .main_box .right p:first-of-type::after { font-size: .1rem; top: -.06rem;}

  .section3{}
  .section3 .main_box .left { margin: .3rem .18rem 0 0; }
  .section3 .main_box .left img { width: 1.2rem; margin: 0rem 1rem 0;}
  .section3 .main_box .right p { width: 100%; font-size: .14rem; }
  .section3 .main_box .right .button_bar { margin-top: 0; width: 100%; justify-content: space-around; }
  .section3 .main_box .right .button_bar img{ width: .5rem; height: .5rem; }
  .section3 .main_box .right .button_item .buy_info { flex:1; width: 100%; margin: 0; }
  .section3 .main_box .right .er { width: 100%; }
  .section3 .main_box .right .er img{ width: 1.2rem; }

  .section4{}
  .section4 .main_box .left { margin: .5rem .18rem 0 0; }
  .section4 .main_box .left img { width: 1.7rem; margin: 0rem .5rem 0; }
  .section4 .main_box .right .button_item { display: flex; margin: .2rem 0; justify-content: flex-end; }
  .section4 .main_box .right .button_item>img{ margin-left: 0.5rem; width: .35rem; height: .35rem; cursor: pointer; }
  .section4 .main_box .right .button_item .buy_info { margin-left: 0.1rem; flex:1;}
  .section4 .main_box .right .button_item .buy_info p { width: auto; font-size: .14rem; line-height: 1; }
  .section4 .main_box .right .button_item .buy_info .er { width: 100%; text-align: left; }
  .section4 .main_box .right .button_item .buy_info .er img{ width: 1rem; height: 1rem; margin-left: 0; }

  .section5{}
  .section5 .main_box .left { margin: .4rem auto 0; }
  .section5 .main_box .left img { width: 1.4rem; margin: 0rem .5rem 0; }
  .section5 .main_box .right .button_item { display: flex; margin: .2rem 0; justify-content: center; }
  .section5 .main_box .right .button_item>img{ width: .35rem; height: .35rem; cursor: pointer; }
  .section5 .main_box .right .button_item .buy_info { margin-left: .1rem; }
  .section5 .main_box .right .button_item .buy_info p { width: auto; font-size: .14rem; line-height: 1; }
  .section5 .main_box .right .button_item .buy_info .er { width: auto; }
  .section5 .main_box .right .button_item .buy_info .er img{ width: 1rem; height: 1rem; margin: .2rem auto 0; }
}