html {
  font-size: 20px;
}
@media only screen and (min-width: 400px) {
html { font-size: 21.33333333px !important; }
}
@media only screen and (min-width: 414px) {
html { font-size: 22.08px !important; }
}
@media only screen and (min-width: 480px) {
html { font-size: 25.6px !important; }
}
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
body {
    padding-top: constant(safe-area-inset-top);       
    padding-left: constant(safe-area-inset-left);        
    padding-right: constant(safe-area-inset-right);    
    padding-bottom: constant(safe-area-inset-bottom);
}

.page img { display: block; width: 100%; border:0 }
.page { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 0.7rem; line-height: 1.5; color: #3d4145; background: #fff}
.page a{ outline: 0; -webkit-appearance: none; }
.page a { color: #333; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/******************Common CSS***************************/

li { list-style: none }
i { font-style: normal }.defaultcolor{ color:#888}.mgt5{margin-top:.5rem}.color-yellow{color:#f29600}.color-blue{color:#039be5}.color-purple{color:#661984}.color-red{color:#b70000}.colorwhite{ color:#fff}.colorblack{ color:#333}
.block { display: block }.nowrap{white-space: nowrap}
.spacebetween{box-sizing: border-box; display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;-webkit-box-align: center;-webkit-align-items: center;align-items: center;}
.spacearound{box-sizing: border-box; display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-around;justify-content: space-around;-webkit-box-align: center;-webkit-align-items: center;align-items: center;}
.flex-center{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: center;justify-content:center;-webkit-box-align: center; -webkit-align-items: center; align-items: center}
.flex-start { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: flex-start; align-items:center}
.flex-top { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: space-between; -webkit-align-items: flex-start; align-items:flex-start}
.flex-end { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: flex-start; align-items:flex-start}
.flex-direction{flex-direction: column;}
.udline,.riline,.lfline,tline,.aline{ position:relative}
.udline:after {content: '';position: absolute;left: 0;bottom: 0;right: auto;top: auto;height: 1px;width: 100%;background-color: #e7e7e7;display: block;z-index: 15;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;}
.riline:after {content: '';position: absolute;left: auto;bottom: 0;right: 0;top: 0;height: 100%;width: 1px;background-color: #1c62a5;display: block;z-index: 15;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;}

/******************************************style*****************************************/
.kdwrapper{width:1000px; margin:0 auto 100px}
.kd .kdlist{ display:inline-block; width:310px;margin:10px; padding:100px 0; text-align:center; background-color:#e6e6e6; font-size:24px; color:#fff; font-weight:bold}
.kd .kdlist:nth-child(odd){ background-color:#b2baee}
.kd .kdlist:hover{ opacity:.8}
.kd .kdlist a{ display:block; color:#fff}
.kd .kdtit{margin: 0 auto 30px;background:url(../images/ttbg.png) no-repeat center center; text-align:center; color:#846fca; font-weight:bold}
.abcon{width:575px; margin:50px auto; padding:130px 400px 0 25px; min-height:200px; background:url(../images/aboutbg.png) no-repeat; background-size:100%}
.dtimg{width:1000px; margin:auto}
.read{ display:block; overflow:hidden; margin:0 20px 50px 0}
.read img{ width:100px; float:right}


@media only screen and ( max-device-width: 1000px ) and (-webkit-min-device-pixel-ratio: 2){
    *{ box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; }

    .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; z-index: 2000 }
.content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.page, .page-group { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; display: none; overflow: hidden; }
.page.page-current, .page-group.page-current, .page.page-visible, .page-group.page-visible, .page.page-from-center-to-left, .page-group.page-from-center-to-left, .page.page-from-center-to-right, .page-group.page-from-center-to-right, .page.page-from-right-to-center, .page-group.page-from-right-to-center, .page.page-from-left-to-center, .page-group.page-from-left-to-center { display: block; }
.page.page-current, .page-group.page-current { overflow: hidden; }
.page-group { display: block}
    .kdwrapper{ width:100%; margin: 0}
    .kdbox{ padding-left:7%}
    .banner img{ display:none}
    .dtimg{ width:100%}
    .read{ margin:0 1rem 2rem 0; overflow:hidden}
    .read img{ width:2rem}
    .mbanner{ width:100%; height:8rem; background:url(../images/mbanner.jpg) no-repeat; background-size:100%}
   .kd .kdtit{background: url(../images/ttbg.png) no-repeat center center;
    text-align: center;
    color: #846fca;
    font-weight: bold;
    width: 80%;
    background-size: 100%;
    margin: 0 auto 5%;}
    .abcon{width: 90%;
    margin: 10% auto;
    padding: 16% 35% 8% 2%;
    min-height: auto;
    background: url(../images/maboutbg.png) no-repeat;
    background-size: 100%;
    font-size: .7rem;}
    .kd .kdlist {
    display: inline-block;
    width: 28.65%;
    margin:2% 0 2% 1%;
    padding: 8% 0;
    text-align: center;
    background-color: #e6e6e6;
    font-size: .8rem;
    color: #fff;
    font-weight: bold;
}
}
@media only screen and ( min-device-width: 320px ) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)
{
    
}
@media only screen and ( min-device-width: 360px ) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)
{
}
@media only screen and ( min-device-width: 375px ) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)
{
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3)
{ 
}
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
}