@charset "utf-8";

/*------------------------  app  ------------------------*/


/*------------  main  ------------*/
.app_main { background: #fbf8ed; }
.app_main .main_inner { position: relative; margin: 0 auto; padding: 0 4%; height: 380px; max-width: 1080px; overflow: hidden; }
.app_main .main_block {  display: flex; flex-wrap: wrap; flex-direction: column; }
.app_main .main_block .title_block { display: flex; align-items: center; padding: 80px 2% 50px; width: 420px; }
.app_main .main_block .title_block .icon { display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 2.2%; width: 88px; height: 88px; background: #fff; border: 1px solid #d8cfaf; border-radius: 14%; overflow: hidden; }
.app_main .main_block .title_block .title { padding: 0 0 0 20px; font-weight: 700; font-size: 28px; }
.app_main .main_block .title_block .title .sub { display: block; padding: 0 0 6px; font-family: 'Montserrat', sans-serif; font-size: 16px; color: #6abf4b; }
.app_main .main_block .btn_set { display: flex; align-items: center; padding: 0 2%; width: 420px; }
.app_main .main_block .dl_btn { box-sizing: border-box; max-width: 200px; padding: 0 5% 0 0; }
.app_main .main_block .dl_btn .link { display: block; border-radius: 6px; overflow: hidden; }
.app_main .screen { position: absolute; bottom: 0; right: 22%; width: 270px; }
.app_main .balloon { position: absolute; top: 60px; right: 5%; width: 160px; }


/*------------  function  ------------*/
.function { padding: 20px 0 80px; text-align: center; }
.function .title { position: relative; display: inline-block; margin: 0 auto; padding: 5px 1em; font-weight: 700; font-size: 28px; color: #d7282f; text-align: center; }
.function .title::before, .function .title::after { content: ''; position: absolute; top: 50%; width: 1px; height: 1.6em; background: #d7282f; }
.function .title::before { left: 0; transform: translate(0, -45%) rotate(-28deg); }
.function .title::after { right: 0; transform: translate(0, -45%) rotate(28deg); }
.function .title .sp { display: none; }
.function .function_inner { display: flex; justify-content: center; margin: 0 auto; padding: 45px 0 20px; }
.function .function_block { flex-basis: 33.33333%; box-sizing: border-box; padding: 0 3%; }
.function .function_block .pic { margin: 0 auto; max-width: 230px; }
.function .function_block .txt_block { padding: 28px 0 0; font-size: 16px; line-height: 1.5; }
.function .function_block .txt_block h4 { padding: 0 0 5px; font-weight: 700px; font-size: 22px; color: #d7282f; }


/*------------  faq  ------------*/
.faq { padding: 0 0 90px; }
.faq .title { padding: 0 0 25px; font-weight: 700; font-size: 24px; }
.faq .faq_list { margin: 0 auto; border-top: 1px solid #e8e8e8; }
.faq .faq_list a { color: #07d; text-decoration: underline; }
.faq .toggle { display: none; }
.faq .option { position: relative; border-bottom: 1px solid #e8e8e8; font-size: 16px; line-height: 1.5; }
.faq .qt, .faq .aw { backface-visibility: hidden; transform: translateZ(0); transition: all .3s; }
.faq .qt { position: relative; display: block; padding: 18px 44px; font-weight: 500; cursor: pointer; }
.faq .qt::after, .faq .qt::before { content: ""; position: absolute; right: 1em; top: 50%; width: 2px; height: 0.75em; background: #d7282f; transform: translate(0, -50%); transition: all .3s; }
.faq .qt::after { transform: translate(0, -50%) rotate(90deg); }
.faq .qt_icon { position: absolute; top: 18px; left: 7px; display: block; width: 24px; height: 24px; background: url('/images/app_qt.png'); background-size: contain; }
.faq .aw_icon { position: absolute; top: 10px; left: 7px; display: block; width: 24px; height: 24px; background: url('/images/app_aw.png'); background-size: contain; }
.faq .aw { position: relative; max-height: 0; overflow: hidden; }
.faq .aw .txt { padding: 9px 44px 35px; }
.faq .aw .txt .cap { display: block; padding: .9em 0 0; }
.faq .toggle:checked + .qt + .aw { max-height: 800px; transition: all 1.6s; }
.faq .toggle:checked + .qt::before { transform: translate(0, -50%) rotate(90deg) !important; }


/*------------  download  ------------*/
.download { padding: 0 0 80px; }
.download .download_inner { display: flex; justify-content: center; align-items: center; height: 180px; background: #d7282f; color: #fff; border-radius: 6px; overflow: hidden; }
.download .title_block { position: relative; display: flex; align-items: center; padding: 0 8% 0 0; }
.download .title_block::after { content: ''; position: absolute; top: 50%; right: 9%; width: 16px; height: 16px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: translate(0, -50%) rotate(45deg); }
.download .title_block .icon { display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 2.2%; width: 78px; height: 78px; background: #fff; border-radius: 14%; overflow: hidden; }
.download .title_block .title { padding: 0 0 0 20px; font-weight: 700; font-size: 22px; }
.download .title_block .title .sub { display: block; padding: 0 0 10px; font-size: 18px; }
.download .btn_set { display: flex; align-items: center; }
.download .dl_btn { box-sizing: border-box; max-width: 190px; padding: 0 2.5%; }
.download .dl_btn .link { display: block; border-radius: 6px; overflow: hidden; }


.note { padding: 25px 0 0; border-top: 1px solid #e8e8e8; font-size: 12px; line-height: 1.5; color: #777; text-align: center; }





@media screen and (max-width: 1020px) {

/*------------  main  ------------*/
 .app_main .main_inner { height: 340px; }
 .app_main .main_block .title_block { padding: 70px 0 50px; width: 380px; }
 .app_main .main_block .title_block .icon { width: 78px; height: 78px; }
 .app_main .main_block .title_block .title { padding: 0 0 0 16px; font-size: 26px; }
 .app_main .main_block .title_block .title .sub { 0 0 5px; font-size: 15px; }
 .app_main .main_block .btn_set { padding: 0%; width: 380px; }
 .app_main .main_block .dl_btn { max-width: 190px; }
 .app_main .screen { right: 20%; width: 230px; }
 .app_main .balloon { right: 4%; width: 124px; }

/*------------  function  ------------*/
 .function { padding: 20px 0 70px; }
 .function .title { font-size: 26px; }
 .function .function_block .pic { max-width:190px; }
 .function .function_block .txt_block h4 { font-size: 20px; }

/*------------  faq  ------------*/
 .faq { padding: 0 0 80px; }
 .faq .title { font-size: 22px; }
 .faq .option { font-size: 15px; }
 .faq .qt_icon { width: 22px; height: 22px; }
 .faq .aw_icon { width: 22px; height: 22px; }

/*------------  download  ------------*/
 .download { padding: 0 0 70px; }
 .download .title_block { padding: 0 8% 0 0; }
 .download .title_block::after { right: 8%; }
 .download .title_block .icon { width: 68px; height: 68px; }
 .download .title_block .title { padding: 0 0 0 16px; font-size: 20px; }
 .download .title_block .title .sub { padding: 0 0 10px; font-size: 15px; }
 .download .dl_btn { max-width: 180px; }

 .note { font-size: 12px; }

}




@media screen and (max-width: 800px) {

/*------------  main  ------------*/
 .app_main .main_inner { height: 470px; }
 .app_main .main_block {}
 .app_main .main_block .title_block { padding: 25px 0 324px; width: auto; }
 .app_main .main_block .title_block .icon { display: none; }
 .app_main .main_block .title_block .title { padding: 0; font-size: 22px; }
 .app_main .main_block .title_block .title .sub { padding: 0 0 4px; font-size: 13px; }
 .app_main .main_block .btn_set { box-sizing: border-box; margin: 0 auto; padding: 0 2%; width: auto; max-width: 380px; }
 .app_main .main_block .dl_btn { padding: 0 1.8%; }
 .app_main .screen { bottom: 104px; right: 50%; width: 210px; transform: translate(50%, 0); }
 .app_main .balloon { top: 150px; right: 50%; width: 96px; transform: translate(164px, 0);}

/*------------  function  ------------*/
 .function { padding: 5px 0 0; }
 .function .title { padding: 3px .6em; font-size: 22px; line-height: 1.3; }
 .function .title::before, .function .title::after { height: 2.8em; }
 .function .title .sp { display: block; }
 .function .function_inner { flex-direction: column; padding: 30px 0 0; }
 .function .function_block { flex-basis: auto; padding: 0 0 55px; }
 .function .function_block .pic { margin: 0 auto; max-width: 220px; }
 .function .function_block .txt_block { padding: 15px 0 0; font-size: 15px; }
 .function .function_block .txt_block h4 { padding: 0 0 2px; font-size: 20px; }

/*------------  faq  ------------*/
 .faq { padding: 0 0 60px; }
 .faq .title { padding: 0 0 20px; font-size: 20px; }
 .faq .option { font-size: 14px; }
 .faq .qt { padding: 15px 32px; }
 .faq .qt::after, .faq .qt::before { right: .8em; }
 .faq .qt_icon { position: absolute; top: 16px; left: 2px; width: 20px; height: 20px; }
 .faq .aw_icon { position: absolute; top: 10px; left: 2px; width: 20px; height: 20px; }
 .faq .aw .txt { padding: 8px 32px 30px; }

/*------------  download  ------------*/
 .download { padding: 0 0 50px; }
 .download .download_inner { flex-wrap: wrap; flex-direction: column; height: auto; padding: 30px 3%; }
 .download .title_block { padding: 0 0 25px; }
 .download .title_block::after { display: none; }
 .download .title_block .icon { width: 56px; height: 56px; }
 .download .title_block .title { padding: 0 0 0 12px; font-size: 18px; }
 .download .title_block .title .sub { padding: 0 0 8px; font-size: 14px; }
 .download .btn_set { box-sizing: border-box; max-width: 380px; }
 .download .dl_btn { flex-basis: calc(100% / 2); padding: 0 1.8%; }

 .note { font-size: 11px; }

}