/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&display=swap'); */

body{display: block; margin: 0; padding: 0; font-family: Microsoft JhengHei; overflow-x: hidden; max-width: 100vw; overflow-y: auto;}
button{font-family: Microsoft JhengHei;}
.paperBg{background: url('../images/bg/bg_indexscreen3.png') repeat-y top center / 100% auto; background-attachment: fixed;}
*{box-sizing: border-box;}
input, button{outline: none;}

body::before{content: ''; display: block; width: 100%; height: 70px;}

.wrap{display: block; width: 100%; overflow-x: hidden;}

.wrap .teachImg{display: block; width: 100%; max-width: 1300px; margin: 0 auto 100px auto;}

.mainMenu{display: flex; width: 100%; height: 70px; align-items: center; justify-content: center; padding: 0 30px; background: #fff; position: fixed; top: 0; left: 0; z-index: 999; background: #f5f2e9;}

.mainMenu .mainMenuWrap{display: flex; width: 100%; max-width: 1170px; height: 100%;}
.mainMenu .mainMenuWrap .logoGroup{display: flex; align-items: center; max-width: 156px; height: 100%;}
.mainMenu .mainMenuWrap .logoGroup .sinopacLogo--rwd{display: none;}
.mainMenu .mainMenuWrap .logoGroup a{display: flex; height: 100%;}
.mainMenu .mainMenuWrap .logoGroup a img{display: block; width: 100%;}
.mainMenu .menuBurger{display: none;}

.basicBanner{display: block; width: 100%; padding-bottom: 19.79166%; background: #f5f2e9; position: relative;}

.slick-list, .slick-track{height: 100%!important;}
.basicBanner .sliderWrap{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; overflow: hidden; z-index: 1;}
.basicBanner .sliderWrap a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative;}
.basicBanner .sliderWrap a img{display: block; width: 100%;}
.basicBanner .sliderWrap a .rwd{display: none;}

.menuBar{display: block; background: #f5f2e9; width: 100%; min-height: 100px; padding: 38px 60px; margin: 0 0 15px 0; position: static; top: 70px; left: 0; bottom: 0; right: 0; z-index: 999;}
.menuBar .menuBarWrap{display: flex; align-items: stretch; justify-content: center; margin: 0 auto; max-width: 1170px;}
.menuBar .btnGroup{display: block; width: 16.6%; text-decoration: none;}
.menuBar .btnGroup .icon{display: block; width: 50px; height: 50px; margin: 0 auto 0 auto;}
.menuBar .btnGroup h3{display: block; width: 100%; margin: 0; padding: 0; text-align: center; font-size: 17px; color: #666666; font-weight: 400;}

.menuBar .btnGroup:hover h3, .menuBar .act h3{color: #1a1a1a;}

.menuBar .btnGroup:nth-child(1) .icon{background: url('../images/icon/mBtn1.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(2) .icon{background: url('../images/icon/mBtn2.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(3) .icon{background: url('../images/icon/mBtn3.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(4) .icon{background: url('../images/icon/mBtn4.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(5) .icon{background: url('../images/icon/mBtn5.svg') no-repeat center center / 100% 100%;}

.menuBar .btnGroup:nth-child(1):hover .icon{background: url('../images/icon/mBtn1_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(2):hover .icon{background: url('../images/icon/mBtn2_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(3):hover .icon{background: url('../images/icon/mBtn3_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(4):hover .icon{background: url('../images/icon/mBtn4_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(5):hover .icon{background: url('../images/icon/mBtn5_a.svg') no-repeat center center / 100% 100%;}

.menuBar .btnGroup:nth-child(1).act .icon{background: url('../images/icon/mBtn1_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(2).act .icon{background: url('../images/icon/mBtn2_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(3).act .icon{background: url('../images/icon/mBtn3_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(4).act .icon{background: url('../images/icon/mBtn4_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(5).act .icon{background: url('../images/icon/mBtn5_a.svg') no-repeat center center / 100% 100%;}

.shareBanner{display: block; width: 100%; padding-bottom: calc(40% - 70px); position: relative; overflow: hidden; background: url('../images/bg/bg_honey.svg') no-repeat bottom center; background-size: 100% auto;}
.shareBanner img{display: block; height: 50%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.shareBanner h1{display: block; width: fit-content; font-size: 2vw; position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); color: #523c1d; font-weight: bolder; letter-spacing: 2px;}

.bannerSlider{display: block; width: 100%; padding-bottom: calc(40% - 70px); position: relative; overflow: hidden;}
.bannerSlider .sliderWrap{display: flex; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden;}
.basicBanner .sliderWrap::after{position: absolute; bottom: 0px; left: 0; right: 0; content: ''; height: 40px; background: url('../images/icon/banner_mask.png') no-repeat center 0 / 100% 100%; z-index: 9;}
.bannerSlider .sliderWrap a{display: block; width: 100%; height: 100%; position: relative; overflow: hidden;}
.bannerSlider .sliderWrap a img{display: block; width: 100%; height: 100%;}
.bannerSlider .sliderWrap a .rwd{display: none;}
.bannerSlider .sliderWrap a .background{display: block; min-width: 100%; min-height: 100%;}
.bannerSlider .sliderWrap a .content{display: block; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

#mainSlider_rwd{display: none; height: 520px;}
#mainSlider_rwd .slick-dots, #mainSlider .slick-dots{display: flex; width: 100%; justify-content: center; align-items: center; margin: 0; padding: 0; position: absolute; bottom: 10px; left: 0; z-index: 999!important; transform: translate(0); gap: 8px!important;}
#mainSlider_rwd .slick-dots li,#mainSlider .slick-dots li{list-style: none;}
#mainSlider_rwd .slick-dots li button, #mainSlider .slick-dots li button{display: block; width: 10px; height: 10px; margin: 0 0px; font-size: 0; background: none; border: none; border-radius: 50%; background: #c1c1c1; padding: 0;}
#mainSlider_rwd .slick-dots li,#mainSlider .slick-dots li button:hover{cursor: pointer;}
#mainSlider_rwd .slick-dots .slick-active button, #mainSlider .slick-dots .slick-active button{background: #808080;}

.wrap .contentWrap{display: block; width: 100%; max-width: 1300px; margin: 0 auto; padding: 0px 0 30px 0;}
.wrap .contentWrap h5{display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 30px; font-weight: bolder; color: #0e0e0e; margin: 0 auto 15px auto; padding: 0;}
.wrap .contentWrap h5 span{position: relative;}
.wrap .contentWrap h5 span i{font-style: normal; position: relative; z-index: 2;}
.wrap .contentWrap h5 span::after{content: ''; display: block; width: 100%; height: 50%; position: absolute; bottom: 0; left: 0; background: #fff099;}
.wrap .contentWrap h5 img{display: block; height: 30px;}
.wrap .contentWrap h6{display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 400; color: #2777b4; margin: 0 auto 20px auto; padding: 0;}
.wrap .contentWrap h6 br{display: none;}
.wrap .contentWrap .inputBlock{display: flex; align-items: center; gap: 15px; margin: 0 0 20px 0;}

.wrap .contentWrap .inputBlock input{display: block;}
.wrap .contentWrap .inputBlock textarea{display: none;}

.wrap .contentWrap .inputBlock textarea, .wrap .contentWrap .inputBlock input{font-size: 25px; flex: 1 1 auto; padding: 10px 20px; outline: none; line-height: 25px; height: 45px; resize: none; overflow: hidden; font-family: Microsoft JhengHei!important;}
.wrap .contentWrap .inputBlock textarea::placeholder, .wrap .contentWrap .inputBlock input::placeholder{color: #cfcfcf;}
.wrap .contentWrap .inputBlock button{display: flex; align-items: center; gap: 10px; font-size: 25px; height: 53px; padding: 0px 50px; color: #e91d24; border: 1px solid #e91d24; border-radius: 5px; background: #fff; cursor: pointer;}
.wrap .contentWrap .inputBlock button::after{content: ''; display: block; width: 25px; height: 25px; background: url('../images/icon/go_icon.png') no-repeat center center / 100% 100%;}
.wrap .contentWrap .noticeBlock{display: none; align-items: center; gap: 10px; font-size: 25px; font-weight: bolder; color: #00b219; padding: 0; margin: 0;}
.wrap .contentWrap .noticeBlock::before{content: ''; display: block; width: 35px; height: 36px; background: url('../images/icon/tick_icon.png') no-repeat center center / 100% 100%;}

.wrap .contentWrap .noticeBlock-alert{color: #ad121d;}
.wrap .contentWrap .noticeBlock-alert::before{background-image: url('../images/icon/warrning_icon.png');}

.wrap .contentWrap .subtitle{display: flex; align-items: center; font-size: 18px; color: #514740; padding: 0;}

.wrap .linkBlock{display: flex; align-items: center; justify-content: center; margin: 30px 0;}
.wrap .linkBlock a{display: flex; align-items: center; color: #fff; background: #19a571; font-size: 25px; padding: 15px 50px; gap: 10px; border-radius: 50px; text-decoration: none;}
.wrap .linkBlock a::after{content: ''; display: block; width: 15px; height: 20px; background: url('../images/icon/morearrow.png') no-repeat center center / 100% 100%; margin-bottom: -2%;}

.sliderMenu{display: flex; width: 100%; max-width: 1000px; margin: 0px auto 30px auto; list-style: none; padding: 0; border-bottom: 1px solid #a2a2a2; position: sticky; top: 70px; z-index: 90; background: #fff;}
.sliderMenu.noFixed{position: static;}
.sliderMenu li{display: block; flex: 1 1 auto; position: relative;}
.sliderMenu li::after{content: ''; display: block; width: 1px; height: 50%; position: absolute; right: -0.5px; top: 50%; background: #a2a2a2; transform: translateY(-50%);}
.sliderMenu li:last-child::after{display: none;}
.sliderMenu li a{display: block; padding: 10px 0 15px 0; text-decoration: none; text-align: center; font-size: 20px; font-weight: 600; color: #a2a2a2; cursor: pointer;}

.sliderMenu li a.act, .sliderMenu li a:hover{color: #317dec;}
.sliderMenu li a.act::after{content: ''; display: block; width: 100%; height: 5px; background: #317dec; position: absolute; bottom: -1px; left: 0;}


.wrap .pageSlider{display: block; width: 100%; max-width: 1000px; margin: 0 auto 30px auto;}
.wrap .pageSlider .page{display: flex; flex-wrap: wrap; width: 100%; /*max-height: calc((315px + 40px) * 5 - 40px);*/ gap: 10px; row-gap: 40px; padding: 0 20px; margin: 0 0 30px 0;}

.wrap .pageSlider .page .pageLimit{display: flex; flex-wrap: wrap; width: 100%; /*max-height: calc((315px + 40px) * 5 - 40px);*/ gap: 10px; row-gap: 40px;}

.wrap .pageSlider .page a{display: block; width: calc(100% / 4 - 10px * 3 / 4); text-decoration: none; position: relative; background: #f1f1f1; cursor: pointer;}
.wrap .pageSlider .page.page-hide a:nth-child(n+22){display: none;}
.wrap .pageSlider .page--showAll a{display: block!important;}
.wrap .pageSlider .page a .newspic{display: block; width: 100%; /*height: 150px;*/ padding-bottom: 66.6667%; position: relative; overflow: hidden;}
.wrap .pageSlider .page a .newspic img{display: block; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.wrap .pageSlider .page a .newstxt{display: block; width: 100%; height: calc(330px - 170px); font-size: 20px; line-height: 1.3; padding: 10px 20px; text-align: left; color: #333; font-weight: 500; position: relative;}
.wrap .pageSlider .page a span{position: absolute; display: block; color: #474746; font-size: 17px; left: 20px; bottom: 18px;}
.wrap .pageSlider .page a .more{position: absolute; width: fit-content; bottom: 0; right: 0; color: #777; font-size: 19px; line-height: 1.2; padding: 8px 12px 10px 12px; font-weight: 500;}

.wrap .pageSlider .page a .yt{display: block; width: 35px; height: 25px; position: absolute; bottom: 10px; left: 10px; background: url('../images/icon/icon_yt.png') no-repeat center center / 100% 100%;}
.wrap .pageSlider .page a .fb{display: block; width: 25px; height: 25px; position: absolute; bottom: 10px; left: 10px; background: url('../images/icon/icon_fb.png') no-repeat center center / 100% 100%;}
.wrap .pageSlider .page a .line{display: block; width: 25px; height: 25px; position: absolute; bottom: 10px; left: 10px; background: url('../images/icon/icon_line.png') no-repeat center center / 100% 100%;}
.wrap .pageSlider .page a .line2{display: block; width: 25px; height: 25px; position: absolute; bottom: 10px; left: 40px; background: url('../images/icon/icon_line.png') no-repeat center center / 100% 100%;}

.wrap .pageSlider .page h3{display: block; flex-basis: 100%; flex-shrink: 0; width: 100%; text-align: left; font-size: 20px; line-height: 1.5; padding: 0; letter-spacing: 0; padding-bottom: 0; color: #343434; margin: 0 0 -5% 0;}
.wrap .pageSlider .page .pageLimit h3{display: block; flex-basis: 100%; flex-shrink: 0; width: 100%; text-align: left; font-size: 18px; line-height: 1.5; margin: 0 0 -30px 0; padding: 0; letter-spacing: 0; padding-bottom: 0; color: #026e9c;}
.wrap .pageSlider .page.page-hide h3:nth-child(n+2){display: none;}
.wrap .pageSlider .page--showAll h3{display: block!important;}

.wrap .pageSlider .page .strechOut{display: block; width: 100%;}
.wrap .pageSlider .page .strechOut button{display: flex; align-items: center; gap: 3px; background: #317dec; color: #fff; font-size: 18px; padding: 10px 20px; border-radius: 50px; border: none; cursor: pointer;}
.wrap .pageSlider .page .strechOut button::after{content: ''; display: block; width: 15px; height: 10px; background: url('../images/icon/strecharrow.png') no-repeat center center / 100% 100%;}
.wrap .pageSlider .page .strechOut button.strech::after{transform: rotate(180deg);}

.wrap .pageSlider .page.has_strechOut{}

.pageTitle{display: block; width: 100%; align-items: center; font-size: 30px; font-weight: 600; text-align: center; margin: 0 0 30px 0;}
.pageTitle.hasSubtitle{margin: 0 0 10px 0;}
.pageTitle.lowerTitle{color: #726861; margin: 0 0 60px 0; font-size: 20px; font-weight: normal;}

.fraudWays{display: flex; width: 100%; justify-content: space-between; max-width: 1000px; margin: 0 auto 80px auto; gap: 10px;}
.fraudWays .group{display: block; width: calc(100% / 4 - 7.5px); max-width: 230px; position: relative; background: #eeeeee; border-radius: 15px; padding: 30px 10px 30px 10px;}
.fraudWays .group .numIcon{display: block; width: 20%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);}
.fraudWays .group h6{display: block; width: fit-content; color: #2777b1; font-size: 20px; font-weight: 600; margin: 0 auto 10px auto;}
.fraudWays .group p{display: block; width: fit-content; color: #7c7c7c; font-size: 18px; line-height: 30px; font-weight: 400; margin: 0 auto 40px auto; min-height: 78px;}
.fraudWays .group .mainIcon{display: block; width: 30%; margin: 0 auto;}

.outSideLinks{display: flex; width: 100%; max-width: 800px; align-items: center; flex-wrap: wrap; margin: 0 auto 80px auto; row-gap: 15px;}
.outSideLinks .group{display: block; width: 50%;}
.outSideLinks .group a{display: block; width: 90%; position: relative; text-decoration: none; color: #7c7c7c; border-bottom: 1px solid #bebebe; padding: 10px 0; margin: 0 auto; transition: .5s; font-size: 18px;}
.outSideLinks .group a::after{content: ''; display: block; width: 8px; height: 16px; background: url('../images/icon/outlinkarrow.png') no-repeat center center / 100% 100%; position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%);}

.outSideLinks .group a:hover{color: #317de0; transition: .5s;}
.outSideLinks .group a:hover::after{background-image: url('../images/icon/outlinkarrow_act.png');}

.wrap .pageSlider .page .listBlock .subTitle{display: block; width: 100%; margin: 0 0 30px 0;}
.wrap .pageSlider .page .listBlock{display: block; width: 85%; padding: 30px; background: #e2e2e2; border-radius: 5px; color: #514740; position: relative;}
.wrap .pageSlider .page .listBlock ul{display: flex; align-items: center; flex-wrap: wrap;}
.wrap .pageSlider .page .listBlock ul li{width: 50%; margin: 0 0 15px 0;}
.wrap .pageSlider .page .listBlock ul li p{display: block; width: 100%; margin: 0 0 5px 0;}
.wrap .pageSlider .page .listBlock ul li a{display: block; width: fit-content; background: none; color: #317de0; font-weight: 400;}
.wrap .pageSlider .page .listBlock .pcIcon{display: block; width: calc(30% + 40px); position: absolute; bottom: 0; right: 0; transform: translate(50%, 0);}

.wrap .pageSlider .page .appBlock{display: flex; align-items: center;}
.wrap .pageSlider .page .appBlock .appDetail{display: block; width: calc(100% - 26.6%);}
.wrap .pageSlider .page .appBlock .appDetail .appLogos{display: flex; width: 100%; align-items: center; gap: 15px; margin: 0 0 30px 0;}
.wrap .pageSlider .page .appBlock .appDetail .appLogos img{display: block; width: 80px;}

.wrap .pageSlider .page .appBlock .appDetail .appLinks{display: block; width: 100%; position: relative;}
.wrap .pageSlider .page .appBlock .appDetail .appLinks .group{display: block; width: 100%; margin: 0 0 30px 0; position: relative;}
.wrap .pageSlider .page .appBlock .appDetail .appLinks .group ::before{content: ''; display: block; width: 3px; height: 100%; position: absolute; top: 0; left: -20px; background: #b2b2b2;}
.wrap .pageSlider .page .appBlock .appDetail .appLinks p{display: block; width: 100%; margin: 0 0 5px 0;}
.wrap .pageSlider .page .appBlock .appDetail .appLinks a{display: block; width: 100%; color: #317de0; background: none;}

.wrap .pageSlider .page .appBlock .appPhone{display: block; width: 26.6%;}

.wrap .pageSlider .page .socialBlock{display: flex; align-items: stretch; border-radius: 5px; overflow: hidden;}
.wrap .pageSlider .page .socialBlock .col{display: flex; flex-direction: column; width: calc(100% / 4);}
.wrap .pageSlider .page .socialBlock .col .head{display: block; width: 100%; background: #d0d0d0; padding: 20px 0; border-right: 1px solid #fff;}
.wrap .pageSlider .page .socialBlock .col .head img{display: block; width: 30px; margin: 0 auto 10px auto;}
.wrap .pageSlider .page .socialBlock .col .head p{display: block; width: 100%; margin: 0; color: #514740; font-size: 18px; text-align: center;}
.wrap .pageSlider .page .socialBlock .col .logos{display: flex; flex-direction: column; width: 100%; background: #e3e3e3; flex: 1 1 auto; border-right: 1px solid #d0d0d0;}
.wrap .pageSlider .page .socialBlock .col .logos a{display: block; width: 50%; margin: 20px auto; background: none;}
.wrap .pageSlider .page .socialBlock .col .logos img{display: block; width: 100%;}
.wrap .pageSlider .page .socialBlock .col:last-child .head, .wrap .pageSlider .page .socialBlock .col:last-child .logos{border: none;}

.wrap .picSlider{display: block; width: 100%; margin: 0 0 80px 0; background: #e4edff;}
.wrap .picSlider .limit{display: block; width: 100%; padding-bottom: 60px;}
.wrap .picSlider .limit img{display: block; width: 100%; max-width: 1300px; margin: 0 auto;}

.wrap .picSlider .limit .title{display: flex; align-items: center; gap: 20px; width: fit-content; margin: 0 auto;}
.wrap .picSlider .limit .title .icon{display: block; width: auto; height: 70px;}
.wrap .picSlider .limit .title h6{display: block; font-size: 2rem; color: #d11b00;}

.wrap .picSlider .limit .limitWrap{display: block; width: 100%; max-width: 1000px; margin: 0 auto;}

.wrap .picSlider .limit .mesBox{display: flex; align-items: center; width: 75%; padding: 30px; border: 3px solid #000000; background: #fff; border-radius: 15px; margin: 0 0 30px auto; color: #7c7c7c; font-size: 1.2rem; position: relative; font-weight: bolder; text-align: justify;}

.wrap .picSlider .limit .mesBox .icon{display: block; width: 10%;}

.wrap .picSlider .limit .mesBox mark{background: #ffe873;}
.wrap .picSlider .limit .mesBox ol{margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;}
.wrap .picSlider .limit .mesBox ol li{margin-bottom: 5px; line-height: 25px;}
.wrap .picSlider .limit .mesBox ol li:last-child{margin-bottom: 0;}

.wrap .picSlider .limit .mesBox p{margin: 0; padding: 0 0 0 1rem;}

.wrap .picSlider .limit .mesBox:last-child{margin: 0 auto 0 0; color: #000000;}

.wrap .picSlider .limit .mesBox::after{content: ''; display: block; width: 40px; height: 21px; background: url('../images/icon/polygan.png') no-repeat center center / 100% 100%; position: absolute; top: calc(100% - 1px); right: 3%;}
.wrap .picSlider .limit .mesBox:last-child:after{transform: scaleX(-1); right: auto; left: 3%;}


.howtodo{display: block; width: 100%; margin: 0 0 80px 0;}

.howtodo h1{display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 30px; font-weight: bolder; color: #0e0e0e; margin: 0 auto 30px auto; padding: 0;}
.howtodo h1 span{position: relative;}
.howtodo h1 span i{font-style: normal; position: relative; z-index: 2;}
.howtodo h1 img{display: block; height: 30px;}

.howtodo .stepsBlock{display: block; width: 100%; margin: 0; padding: 0 0 80px 0; position: relative;}
.howtodo .stepsBlock::after{content: ''; display: block; width: 100%; height: 78%; position: absolute; bottom: 0; left: 0; background: #e7f0ff; z-index: 1;}

.howtodo .stepsBlock .stepsBlockWrap{display: flex; align-items: stretch; width: 100%; max-width: 1000px; margin: 0 auto; gap: 30px; position: relative; z-index: 2;}
.howtodo .stepsBlock .stepsBlockWrap .step{display: block; flex: 1 1 auto; padding: 0 15px;}
.howtodo .stepsBlock .stepsBlockWrap .step img{display: block; width: 95%; margin: 0 auto 20px auto;}
.howtodo .stepsBlock .stepsBlockWrap .step h6{display: block; width: 100%; text-align: center; color: #2777b4; font-weight: 600; font-size: 18px; margin: 0 0 10px 0; padding: 0;}
.howtodo .stepsBlock .stepsBlockWrap .step p{display: block; width: fit-content; text-align: left; color: #7c7c7c; font-weight: 400; font-size: 16px; margin: 0 auto; padding: 0; line-height: 25px;}

.shared_footer{display: block; width: 100%; background: #FFEEB2;}
.shared_footer .fastLinks{display: flex; align-items: flex-start; justify-content: space-between; width: 100%; max-width: 1300px; margin: 0 auto; padding: 30px 0; position: relative;}
.shared_footer .fastLinks ul{font-size: 16px;}
.shared_footer .fastLinks ul li{margin: 0 0 8px 0;}
.shared_footer .fastLinks ul li:last-child{margin: 0;}
.shared_footer .fastLinks ul li::marker{color: #837343;}
.shared_footer .fastLinks ul .title{list-style: none; margin: 0 0 8px -1em; font-size: 18px; color: #775E36; font-weight: bolder;}
.shared_footer .fastLinks ul li a{text-decoration: none; color: #837343;}

.shared_footer .gotop{display: none; width: 100px; height: 100px; position: absolute; border-radius: 50%; background: #fff; top: calc(50% - 50px); right: -150px;}
.shared_footer .gotop button{display: block; width: 100%; height: 100%; border-radius: 50%; border: none; cursor: pointer; padding: 0;}
.shared_footer .gotop button img{display: block; width: 100%; height: 100%; transition: .2s;}
.shared_footer .gotop button:hover img{transform: translateY(-10%); transition: .2s;}
.shared_footer .fixed button{width: 100px; height: 100px; position: fixed; bottom: 5%; right: 1%; z-index: 998; background: none;}

.fixedBtn{display: block; width: 80px; min-height: 80px; position: fixed; bottom: 5%; right: 10px; z-index: 998;}
.fixedBtn a{display: block; width: 100%; cursor: pointer;}
.fixedBtn a:first-child{margin: 0 0 30px 0;}
.fixedBtn a img{display: block; width: 100%;}
.fixedBtn .layerbtn{background: url('../images/icon/icon_fixedbtn02_1.png') no-repeat center center / 100% 100%;}
.fixedBtn .layerbtn img{opacity: 1; transition: .5s;}
.fixedBtn .layerbtn:hover img{opacity: 0; transition: .5s;}

.shared_footer .copyright{display: flex; align-items: center; justify-content: center; padding: 10px 30px; background: #f5f2e9; color: #666666;}
.shared_footer .copyright p{margin: 0 15px 0 0; padding: 0;}
.shared_footer .copyright a{color: #666666;}

.easyShow::before{display: none;}
.easyShow .basicBanner::after{display: none;}
.easyShow .menuBar{display: none;}

.popup{display: none; width: 100%; height: 100dvh; position: relative; background: rgba(0, 0, 0, 0.7); z-index: 999; position: fixed; top: 0; left: 0;}

.popup .flexWrap{display: flex; align-items: center; width: 100%; height: 100%; justify-content: center; position: relative; flex: 1 1 auto;}

.popup .pp2{display: flex; align-items: center; width: 100%; height: 100%; justify-content: center; position: relative; flex: 1 1 auto;}
.popup .pp2 .pp_picout{display: block; width: 100%; max-width: 800px; max-height: 90%; position: relative; z-index: 1; overflow-y: auto;}
.popup .pp2 .pp_picout img{display: block; width: 100%;}
.popup .pp2 .close_p{display: block; width: 50px; text-align: center; position: absolute; top: 5%; right: 5%; cursor: pointer; z-index: 2; font-size: 18px; font-weight: bolder; color: #fff; animation: infinite 1s zoomClose;}
.popup .pp2 .close_p img{display: block; width: 100%; transition: .3s; margin-top: 10px;}
.popup .pp2 .close_p:hover{animation: none;}
.popup .pp2 .close_p:hover img{transform: scale(1.2); transition: .3s;}

.slick-arrow{display: block; width: 28px; height: 57px; background: url('../images/icon/sliderarrow.png') no-repeat center center / 100% 100%; border: none; outline: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; font-size: 0;}
.slick-prev{left: 5%;}
.slick-next{right: 5%; transform: translateY(-50%) rotate(180deg); cursor: pointer;}
.slick-dots{display: flex; align-items: center; position: absolute; bottom: 3%; left: 50%; transform: translate(-50%, 0); gap: 12px; margin: 0; padding: 0; font-size: 0;}
.slick-dots li{display: block; flex: 0 0 auto; list-style: none; margin: 0; padding: 0; font-size: 0;}
.slick-dots li button{display: block; width: 12px; height: 12px; box-sizing: border-box; font-size: 0; border-radius: 50%; background: #a9a9a9; opacity: 0.5; border: none; outline: none; padding: 0;}
.slick-dots .slick-active button{opacity: 1;}

@keyframes zoomClose {
    0%{transform: scale(1);}
    50%{transform: scale(1.2);}
    100%{transform: scale(1);}
}

@media screen and (max-width: 800px){
    body::before{height: 50px;}
    .mainMenu{height: 50px; padding: 0 15px;}
    .mainMenu .logoGroup .splitline{margin: 0 20px;}
    .mainMenu ul{display: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: calc(100vh - 50px); position: fixed; top: 50px; left: 0; background: #fff;}
    .mainMenu ul li{margin: 0 0 15px 0; text-align: center;}
    .mainMenu ul li a{margin: 0;}

    .mainMenu ul li ul{display: block!important; height: auto; position: static; transform: translate(0, 0); z-index: 999; opacity: 1; padding: 0;}
    .mainMenu ul li ul li a::after{width: 30%;}
    .mainMenu ul li ul li a{font-weight: normal; font-size: 16px;}

    .mainMenu .menuBurger{display: block; width: 30px; height: 30px; background: none; position: absolute; top: calc(50% - 15px); right: 15px; border: none; padding: 0;}
    .mainMenu .menuBurger i{display: block; width: 70%; height: 3px; background: #cccccc; border-radius: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .mainMenu .menuBurger i:nth-child(1){top: calc(50% - 8px); transition: .2s;}
    .mainMenu .menuBurger i:nth-child(2){top: 50%; transition: .2s;}
    .mainMenu .menuBurger i:nth-child(3){top: calc(50% + 8px); transition: .2s;}

    .mainMenu .opening i:nth-child(1){top: 50%; transform: translate(-50%, -50%) rotate(45deg); transition: .2s;}
    .mainMenu .opening i:nth-child(2){display: none;}
    .mainMenu .opening i:nth-child(3){top: 50%; transform: translate(-50%, -50%) rotate(-45deg); transition: .2s;}
    .bannerSlider{padding-bottom: 115.5556%;}
    .basicBanner{height: auto; padding-bottom: 81.25%;}
    .basicBanner .sliderWrap{position: absolute; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .basicBanner .sliderWrap a .rwd{display: block;}
    .basicBanner .sliderWrap a .pc{display: none;}
    .basicBanner .sliderWrap img{max-width: none; width: auto; max-height: 100%; min-height: 100%;}
    .basicBanner::after{height: 20px;}
    /* #mainSlider{display: none;} */
    /* #mainSlider_rwd{display: block; height: 100%;} */

    .mainMenu .mainMenuWrap{align-items: center; justify-content: center;}
    .mainMenu .mainMenuWrap .logoGroup .sinopacLogo{display: none;}
    .mainMenu .mainMenuWrap .logoGroup .sinopacLogo--rwd{display: flex; align-items: center;}
    .mainMenu .mainMenuWrap .logoGroup .sinopacLogo--rwd img{height: 57%; flex: 0;}

    .menuBar{padding: 20px 15px; top: 50px; position: static;}
    .menuBar .menuBarWrap{display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center; margin: 0 auto; max-width: 1170px;}
    .menuBar .btnGroup{display: block; width: calc(100% / 3); text-decoration: none; margin: 0 0 15px 0;}
    .menuBar .btnGroup .icon{width: 50px;}

    .shareBanner h1{width: 100%; font-size: 20px; text-align: center;}

    .wrap .picSlider{padding: 0 0;}

    .wrap .picSlider .limit{padding: 0 40px; padding-bottom: 60px;}
    .wrap .picSlider .limit .title{flex-direction: row; padding: 30px 0; text-align: center;}
    .wrap .picSlider .limit .title .icon{height: 40px;}
    .wrap .picSlider .limit .title h6{padding: 0; margin: 0; font-size: 20px;}
    .wrap .picSlider .limit .mesBox{align-items: flex-start; width: 100%; font-size: 16px; margin: 0 0 60px auto;}

    .wrap .picSlider .limit .mesBox .icon{width: 50px;}
    

    .wrap .contentWrap{display: block; width: 100%; max-width: 1300px; margin: 0 auto; padding: 15px 15px;}
    .wrap .contentWrap h5{display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 30px; font-weight: bolder; color: #0e0e0e; margin: 0 auto 10px auto; padding: 0;}
    .wrap .contentWrap h5 img{display: block; height: 30px;}
    .wrap .contentWrap h6{display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bolder; margin: 0 auto 20px auto; line-height: 20px; padding: 0;}
    .wrap .contentWrap h6 br{display: block;}
    .wrap .contentWrap .inputBlock{display: flex; flex-direction: column; align-items: center; gap: 15px; margin: 0 0 20px 0;}
    .wrap .contentWrap .inputBlock textarea, .wrap .contentWrap .inputBlock input{font-size: 0.9rem; flex: 1 1 auto; width: 100%; padding: 10px 20px; line-height: 25px; min-height: 70px; height: 45px; overflow-y: auto;}

    .wrap .contentWrap .inputBlock input{display: none;}
    .wrap .contentWrap .inputBlock textarea{display: block;}

    .wrap .contentWrap .inputBlock button{display: flex; align-items: center; justify-content: center; width: 100%; gap: 10px; font-size: 16px; height: 42px; padding: 0px 20px; color: #e91d24; border: 1px solid #e91d24; border-radius: 5px; background: #fff; cursor: pointer; white-space: nowrap;}
    .wrap .contentWrap .inputBlock button::after{content: ''; display: block; width: 25px; height: 25px; background: url('../images/icon/go_icon.png') no-repeat center center / 100% 100%; flex: 0 0 auto;}
    .wrap .contentWrap .noticeBlock{display: none; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: bolder; color: #00b219; padding: 0; margin: 0;}
    .wrap .contentWrap .noticeBlock::before{content: ''; display: block; flex: 0 0 auto; width: 20px; height: 20px; background: url('../images/icon/tick_icon.png') no-repeat center center / 100% 100%;}

    .wrap .contentWrap .noticeBlock-alert{color: #ad121d;}
    .wrap .contentWrap .noticeBlock-alert::before{background-image: url('../images/icon/warrning_icon.png');}

    .wrap .contentWrap .subtitle{display: flex; align-items: center; font-size: 14px; color: #514740; padding: 0;}

    .wrap .linkBlock{display: flex; align-items: center; justify-content: center; margin: 30px 0;}
    .wrap .linkBlock a{display: flex; align-items: center; color: #fff; background: #19a571; font-size: 18px; padding: 15px 50px; border-radius: 50px; text-decoration: none;}
    .wrap .linkBlock a::after{content: ''; display: block; width: 10px; height: 15px; background: url('../images/icon/morearrow.png') no-repeat center center / 100% 100%; margin-bottom: -2%;}

    .pageTitle{font-size: 20px;}
    .pageTitle.lowerTitle{font-size: 16px;}

    .outSideLinks .group{width: 100%;}

    .sliderMenu{top: 50px;}
    /* .sliderMenu.noFixed{position: sticky;} */

    .wrap .sliderMenu li a{font-size: 16px;}
    .wrap .pageSlider .page{padding: 0 30px;}
    .wrap .pageSlider .page a{width: calc(100% / 2 - 5px);}
    .wrap .pageSlider .page a .newstxt{font-size: 16px; text-align: justify;}
    .wrap .pageSlider .page a .more{font-size: 14px;}
    .wrap .pageSlider .page a span{font-size: 13px;}
    .wrap .pageSlider .page .strechOut button{margin: 0 auto;}

    .wrap .pageSlider .page .listBlock{width: 100%;}
    .wrap .pageSlider .page .listBlock ul{flex-direction: column;}
    .wrap .pageSlider .page .listBlock ul li{width: 100%;}
    .wrap .pageSlider .page .listBlock .pcIcon{width: 100%; position: static; transform: translate(0, 0); margin: 0 auto -50% auto;}

    .wrap .pageSlider .page .appBlock{flex-direction: column;}
    .wrap .pageSlider .page .appBlock .appDetail{width: 100%;}
    .wrap .pageSlider .page .appBlock .appDetail .appLogos{flex-wrap: wrap;}
    .wrap .pageSlider .page .appBlock .appDetail .appLogos img{width: calc(100% / 3 - 15px * 2 / 3);}
    .wrap .pageSlider .page .appBlock .appDetail .appLinks a{word-break: break-all;}
    .wrap .pageSlider .page .appBlock .appPhone{width: 50%;}

    .wrap .pageSlider .page .socialBlock{flex-wrap: wrap;}
    .wrap .pageSlider .page .socialBlock .col{width: calc(100% / 2);}

    .wrap .pageSlider .page.addonBlock{padding-bottom: 3%;}

    .fraudWays{flex-wrap: wrap; padding: 0 15px;}
    .fraudWays .group{width: calc(50% - 5px);}

    .fraudWays .group h6{font-size: 16px;}
    .fraudWays .group p{font-size: 14px;}

    .howtodo .stepsBlock{padding: 30px 15px;}
    .howtodo .stepsBlock::after{height: 100%;}
    .howtodo .stepsBlock .stepsBlockWrap{flex-wrap: wrap;}
    .howtodo .stepsBlock .stepsBlockWrap .step{width: calc(50% - 15px); flex: 0 0 auto; padding: 0;}
    .howtodo .stepsBlock .stepsBlockWrap .step h6{font-size: 16px;}
    .howtodo .stepsBlock .stepsBlockWrap .step p{font-size: 14px;}

    .fixedBtn{display: block; width: 50px; min-height: none; position: fixed; bottom: 5%; right: 10px; z-index: 998;}
    .fixedBtn a{display: block; width: 100%; cursor: pointer;}
    .fixedBtn a:first-child{margin: 0 0 15px 0;}
    .fixedBtn a img{display: block; width: 100%;}
    .fixedBtn .layerbtn{background: url('../images/icon/icon_fixedbtn02_1.png') no-repeat center center / 100% 100%;}
    .fixedBtn .layerbtn img{opacity: 1; transition: .5s;}
    .fixedBtn .layerbtn:hover img{opacity: 0; transition: .5s;}

    .shared_footer .fastLinks{flex-wrap: wrap;}
    .shared_footer .fastLinks ul{display: block; width: 50%;}
    .shared_footer .fastLinks ul li a{}
    .shared_footer .copyright{font-size: 0.6rem; padding: 10px; white-space: nowrap;}
    .shared_footer .copyright p{margin: 0;}
    .shared_footer .copyright a{}
    .shared_footer button{width: 50px!important; height: 50px!important;}
    .shareBanner img{height: 70%;}

    .slick-arrow{width: 14px; height: 28.5px;}
    .slick-dots li button{width: 8px; height: 8px;}
}