*{ padding:0; margin:0; box-sizing:border-box;}

.tabs-pinyin{ padding-top:40px; background:#fafafa; text-align:center;}
.tabs-pinyin .list{ display:inline-block; background:#fff; border-radius:28px; box-shadow:0 0 15px 0 rgba(0,0,0,.08); position:relative; white-space:nowrap; overflow:hidden;}
.tabs-pinyin .list a{ width:240px; height:55px; line-height:56px; padding-left:80px; display:inline-block; font-size:18px; text-align:left; color:#999; font-weight:700; text-transform:uppercase; cursor:pointer;}
.tabs-pinyin .list a.active{ background:#0d8589; font-weight:700; color:#fff;}
.tabs-pinyin .list a.first{ background:#fff url(images/icon_pinyin.svg) 40px center no-repeat;}
.tabs-pinyin .list a.last{ background:#fff url(images/icon_tone.svg) 50px center no-repeat;}
.tabs-pinyin .list a.first.active{ background:#0d8589 url(images/icon_pinyin_active.svg) 40px center no-repeat;}
.tabs-pinyin .list a.last.active{ background:#0d8589 url(images/icon_tone_active.svg) 50px center no-repeat;}

.pinyin-content{ box-sizing:border-box; min-width:0; max-width:1440px; padding:0 60px; margin:0 auto;}
.pinyin-content:after{ content:""; display:block; clear:both;}
.pinyin-content h1{ margin:0; font-size:48px; text-align:center; color:#2a363e;}
.pinyin-content h1 span{ color:#0d8589;}
.pinyin-table h1+p,
.tones-table h1+p{ max-width:730px; margin:10px auto 20px; text-align:center;}
.pinyin-table .search{ max-width:310px; background:#fff; border:1px solid #dcdcdc; border-radius:23px; position:relative;}
.pinyin-table .search .yy-input-group__append,
.tones-table .search .yy-input-group__append{ border-radius:8px;}
.pinyin-table .search .search-results,
.tones-table .search .search-results{ width:100%; max-height:240px; padding:0; margin:0; background:#fff; list-style:none; position:absolute; top:48px; left:0; box-shadow:0 3px 10px 0 rgba(0,0,0,.15); border-radius:8px; overflow:auto; display:none;}
.pinyin-table .search .search-results li,
.tones-table .search .search-results li{ padding:0 24px; text-align:left; font-size:16px; font-weight:700;}
.pinyin-table .search .search-results li:hover,
.tones-table .search .search-results li:hover{ background:#efefef; cursor:pointer; color:#f9a812;}
.pinyin-table .search .search-results li.recommend,
.tones-table .search .search-results li.recommend{ color:#acacac;}
.pinyin-table .search .search-results li.results-alert,
.tones-table .search .search-results li.results-alert{ padding:24px; font-size:14px; font-weight:500;}
.pinyin-table .search .search-results li span,
.tones-table .search .search-results li span{ color:#f9a812;}

.yy-row{ width:1230px; height:auto; margin:0 auto; position:relative; box-sizing:border-box; text-align:right;}
.yy-input{ width:100%; height:44px; line-height:44px; background:#fff; display:inline-flex; justify-content:center; align-items:center; position:relative;}
.yy-input::-webkit-scrollbar{ width:6px; z-index:11;}
.yy-input::-webkit-scrollbar:horizontal{ height:6px;}
.yy-input::-webkit-scrollbar-thumb{ width:6px; background:#b4bccc; border-radius:5px;}
.yy-input::-webkit-scrollbar-corner{ background:#fff;}
.yy-input::-webkit-scrollbar-track{ background:#fff;}
.yy-input::-webkit-scrollbar-track-piece{ width:6px; background:#fff;}
.yy-input .yy-input__count{ display:inline-flex; height:100%; align-items:center; font-size:12px;}
.yy-input .yy-input__count .yy-input__count-inner{ padding:0 5px; display:inline-block;}
.yy-input__inner{ width:80%; height:32px; line-height:32px; padding:0 10px; display:inline-block; font-size:16px; color:#2a363e; position:relative; -webkit-appearance:none; box-sizing:border-box; outline:0; border:none;}
.yy-input__inner::placeholder{ color:#aaa;}
.yy-input__inner:focus{ outline:0;}
.yy-input__inner[type=password]::-ms-reveal{ display:none;}
.yy-input__suffix-inner{ pointer-events:all; display:inline-flex;}
.yy-input__prefix-inner{ pointer-events:all; display:inline-flex;}
.yy-input__validateIcon{ pointer-events:none;}
.yy-input.is-active .yy-input__inner{ outline:0; box-shadow:0 0 0 1px #ccc inset;}
.yy-input.is-disabled .yy-input__inner{ background:#ccc; box-shadow:0 0 0 1px #ccc inset; color:#ccc; cursor:not-allowed;}
.yy-input.is-disabled .yy-input__inner::placeholder{ color:#ccc;}
.yy-input.is-exceed .yy-input__inner{ box-shadow:0 0 0 1px #ccc inset;}
.yy-input.is-exceed .yy-input__suffix .yy-input__count{ color:#ccc;}
.yy-input--large{ line-height:56px; font-size:14px;}
.yy-input--large .yy-input__inner{ height:58px; line-height:58px; padding:0 15px;}
.yy-input--large .yy-input__prefix{ left:16px;}
.yy-input--large .yy-input__suffix{ right:16px;}
.yy-input--small{ line-height:50px; font-size:12px;}
.yy-input--small .yy-input__inner{ height:52px; line-height:52px; padding:0 7px;}
.yy-input--small .yy-input__prefix{ left:8px;}
.yy-input--small .yy-input__suffix{ right:8px;}
.yy-input__prefix{ display:inline-flex; white-space:nowrap; flex-shrink:0; flex-wrap:nowrap; height:100%; text-align:center; color:#ccc; pointer-events:none; margin-right:24px;}
.yy-input__prefix-inner { pointer-events:all; display:inline-flex; align-items:center; justify-content:center;}
.yy-input__prefix-inner>:last-child{ margin-right:8px;}
.yy-input__prefix-inner>:first-child,
.yy-input__prefix-inner>:first-child.yy-input__icon{ margin-left:0;}
.yy-input__suffix{ display:inline-flex; white-space:nowrap; flex-shrink:0; flex-wrap:nowrap; height:100%; text-align:center; color:#ccc; pointer-events:none; margin-right:10px;}
.yy-input__suffix-inner{ pointer-events:all; display:inline-flex; align-items:center; justify-content:center;}
.yy-input__suffix-inner>:first-child{ margin-left:8px;}

.pinyin-table,.tones-table{ padding:25px 0; background:#fafafa;}
.pinyin-table .pinyin-chart-table{ width:100%; height:auto; border-radius:10px; box-shadow:0 0 15px 0 rgba(0,0,0,.05);}

.pinyin-table .pinyin-chart-table,
.pinyin-table .tone-pairs-table,
.tones-table .pinyin-chart-table,
.tones-table .tone-pairs-table{ margin-top:20px; max-width:1440px; overflow:auto;}
.pinyin-table .pinyin-chart-table{ width:1230px; margin:20px auto 0;}

.pinyin-table .pinyin-chart-table table,
.pinyin-table .tone-pairs-table table,
.tones-table .pinyin-chart-table table,
.tones-table .tone-pairs-table table{ text-align:center; border-spacing:0; background-color:#fff;}

.pinyin-table .pinyin-chart-table table{ width:1230px; margin:0 auto;}

.pinyin-table .pinyin-chart-table table td,
.pinyin-table .tone-pairs-table table td,
.tones-table .pinyin-chart-table table td,
.tones-table .tone-pairs-table table td{ padding:5px 5px; border-right:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1;}

.pinyin-table .pinyin-chart-table table td:not(.null),
.pinyin-table .tone-pairs-table table td:not(.null),
.tones-table .pinyin-chart-table table td:not(.null),
.tones-table .tone-pairs-table table td:not(.null){ cursor:pointer;}

.pinyin-table .pinyin-chart-table table td:not(.null).active,
.pinyin-table .pinyin-chart-table table td:not(.null):hover,
.pinyin-table .tone-pairs-table table td:not(.null).active,
.pinyin-table .tone-pairs-table table td:not(.null):hover,
.tones-table .pinyin-chart-table table td:not(.null).active,
.tones-table .pinyin-chart-table table td:not(.null):hover,
.tones-table .tone-pairs-table table td:not(.null).active,
.tones-table .tone-pairs-table table td:not(.null):hover { background:#f4d38c;}

.pinyin-table .pinyin-chart-table table .td-cell,
.pinyin-table .pinyin-chart-table table .tr-header td,
.pinyin-table .tone-pairs-table table .td-cell,
.pinyin-table .tone-pairs-table table .tr-header td,
.tones-table .pinyin-chart-table table .td-cell,
.tones-table .pinyin-chart-table table .tr-header td,
.tones-table .tone-pairs-table table .td-cell,
.tones-table .tone-pairs-table table .tr-header td{ background:#0d8589; color:#fff; border-color:#f0f0f0;}
.pinyin-table .pinyin-chart-table table .td-cell{ background:#2a363e;}

.tones-table .tone-pairs-table{ height:auto; box-shadow:0 0 15px 0 rgba(0,0,0,.05);}

.pinyin-table .popover,
.tones-table .popover{
 display:none;
 position:fixed;
 min-width:300px;
 padding:12px 15px 18px;
 background-color:#fff;
 border-radius:12px;
 border:1px solid #cbcbcb;
 box-shadow:0 0 15px 0 rgba(0,0,0,.15);
 z-index:9;
}
.pinyin-table .popover .pop_header,
.pinyin-table .popover .tones .yy-button,
.tones-table .popover .pop_header,
.tones-table .popover .tones .yy-button {
 font-size:16px;
 font-weight:700;
 background:none;
 border:none;
}
.pinyin-table .popover .pop_header,
.tones-table .popover .pop_header{
 display:flex;
 justify-content:space-between;
 position:relative;
 align-items:center;
 padding-bottom:10px;
 margin-bottom:15px;
 border-bottom:1px solid #e4e4e4;
}
.pinyin-table .popover .pop_header .close-pinyin-pop{ width:24px; height:24px; background:none; border:none;}

.pinyin-table .popover .pop_header .pinyin_join,
.tones-table .popover .pop_header .pinyin_join{ color:#747474; margin-left:12px;}
.pinyin-table .popover .tones,
.tones-table .popover .tones{ display:flex; justify-content:space-between;}
.pinyin-table .popover .tones img,
.tones-table .popover .tones img{
 margin-left:6px;
}
.pinyin-table .popover .yy-button+.yy-button,
.tones-table .popover .yy-button+.yy-button{
 margin-left:8px;
}
.pinyin-table .popover audio,
.tones-table .popover audio {
 display:none;
}
.pinyin-table .popover .login-tips,
.tones-table .popover .login-tips {
 padding:0;
 margin:0;
 margin-top:16px;
 text-align:center;
}
.pinyin-table .popover .login-tips a,
.tones-table .popover .login-tips a{
 color:#00c7ce;
 text-decoration:none;
}
.pinyin-table .popover .pinyin-video-container,
.tones-table .popover .pinyin-video-container{
 position:relative;
 display:none;
 margin-top:12px;
 border-radius:8px;
 overflow:hidden;
}
.pinyin-table .popover .pinyin-video-container .mack,
.tones-table .popover .pinyin-video-container .mack{
 display:none;
 position:absolute;
 z-index:2;
 background:rgba(0,0,0,.5);
 color:#fff;
 font-size:16px;
 top:0;
 left:0;
 width:100%;
 height:100%;
 align-items:center;
 flex-wrap:wrap;
 align-content:center;
}
.pinyin-table .popover .pinyin-video-container .mack div,
.tones-table .popover .pinyin-video-container .mack div{
 width:100%;
 text-align:center;
}
.pinyin-table .popover .pinyin-video-container iframe,
.tones-table .popover .pinyin-video-container iframe{
 width:100%;
 outline:0;
 border:none;
}
.pinyin-table .row-refresh,
.pinyin-table .tone-pairs-table,
.tones-table .row-refresh,
.tones-table .tone-pairs-table{
 margin:0 auto;
 width:100%;
 max-width:1000px;
}
.tones-table .btn-refresh, .tones-table .btn-refresh-iframe{ padding-left:30px; background:url(images/icon_refresh.svg) left center no-repeat; background-size:auto 90%; border:none; color:#0d8589; font-weight:700; text-transform:uppercase;}
.tones-table .btn-refresh:hover,  .tones-table .btn-refresh-iframe:hover{ color:#2a363e;}
.tones-table .tone-pairs-table{ margin-top:12px; border-radius:10px;}
.pinyin-table .btn-refresh img,
.tones-table .btn-refresh img,
.tones-table .btn-refresh-iframe img{
 width:20px;
 height:auto;
 margin-right:3px;
 display:none;
}
.pinyin-table #tonePairs,
.tones-table #tonePairs{
 width:100%;
 border-left:1px solid #f1f1f1;
}
.pinyin-table #tonePairs .tr-header td,
.tones-table #tonePairs .tr-header td{
 padding:16px 12px;
 text-align:center;
}
.pinyin-table #tonePairs td,
.tones-table #tonePairs td{
 text-align:left;
 padding:12px;
 width:165px;
 max-width:165px;
 min-width:165px;
}
.pinyin-table #tonePairs td:not(.null):hover,
.tones-table #tonePairs td:not(.null):hover{
 background-color:#fff!important
}
.pinyin-table #tonePairs td:first-child,
.tones-table #tonePairs td:first-child{
 width:120px;
 max-width:120px;
 min-width:120px;
}
.tones-table #tonePairs tr:not(.tr-header) td:first-child{ background:#fafafa; text-align:center;}
.pinyin-table #tonePairs tr:not(.tr-header) td,
.tones-table #tonePairs tr:not(.tr-header) td{
 height:125px;
 overflow:hidden;
 max-height:125px;
}
.pinyin-table #tonePairs .hanzi,
.tones-table #tonePairs .hanzi{
 font-size:20px;
 margin-right:6px;
}
.pinyin-table #tonePairs .pinyin,
.tones-table #tonePairs .pinyin{
 font-size:12px;
 margin-right:6px;
}
.pinyin-table #tonePairs .btn-play-audio,
.tones-table #tonePairs .btn-play-audio{
 position:relative;
 background:url(images/icon_audio_play.svg) no-repeat right 9px;
 background-size:15px;
 padding-right:20px;
 border:none;
 justify-content:start;
 text-align: left;
}
.tones-table #tonePairs .btn-play-audio:hover span{ color:#0d8589;}
.tones-table #tonePairs .btn-play-audio.on span{ color:#0d8589;}

.pinyin-table #tonePairs p,
.tones-table #tonePairs p{
 text-align:left;
 color:#747474;
}

/*什么是拼音*/
.explain-pinyin-wrap{ width:100%; height:auto; background:#fafafa;}
.explain-pinyin-wrap .text{ max-width:1440px; padding:30px; margin:0 auto; columns:1; column-gap:60px;}
.explain-pinyin-wrap h2{ font-size:48px; margin-bottom:0; text-align:center;}
.explain-pinyin-wrap h2 span{ color:#0d8589;}
.explain-pinyin-wrap p{ font-size:16px; line-height:26px; margin-bottom:1.7em; hyphens:auto; text-align:justify;}
.explain-pinyin-wrap p:first-of-type{ padding:0 15%; text-align:center;}
.explain-pinyin-wrap img{ width:35%; height:auto; margin:10px 5% 0 10%; border-radius:50%; float:left;}
.explain-pinyin-wrap a{ text-decoration:underline; color:#0d8589;}
.explain-pinyin-wrap b,
.explain-pinyin-wrap strong{ font-weight:normal;}
.explain-pinyin-wrap.explain-tone .text{ columns:2;}
.explain-pinyin-wrap.explain-tone p:first-of-type{ padding:0; text-align:left;}

/*FAQ*/
.faq-pinyin-wrap{ width:900px; height:auto; margin:60px auto;}
.faq-pinyin-wrap h2{ font-size:48px; margin-bottom:15px; text-align:center;}
.faq-pinyin-wrap h2 span{ color:#0d8589;}
.faq-pinyin-wrap .list{ width:100%; height:auto;}
.faq-pinyin-wrap dl{ padding:15px 30px; margin-bottom:1.7em; position:relative; border-radius:10px; box-shadow:0 0 15px 0 rgba(0,0,0,.1); cursor:pointer; transition:all 0.3s ease-in-out 0s;}
.faq-pinyin-wrap dl dt{ font-size:24px; font-weight:700; color:#2a363e; transition:all 0.3s ease-in-out 0s;}
.faq-pinyin-wrap dl dd{ padding:10px 0; display:none; transition:all 0.3s ease-in-out 0s;}
.faq-pinyin-wrap dl.active dt{ color:#0d8589;}
.faq-pinyin-wrap dl.active dd{ display:block;}
.faq-pinyin-wrap dl .switch{ width:24px; height:3px; padding:0; position:absolute; top:35px; right:23px; display:block;}
.faq-pinyin-wrap dl .switch span{ width:24px; height:3px; background:#0d8589; border-radius:3px; display:block;}
.faq-pinyin-wrap dl .switch .line{ transform:rotate(90deg); margin-top:-2px; transition:all 0.3s ease-in-out 0s;}
.faq-pinyin-wrap dl.active .switch .line{ display:none;}

@media screen and (max-width:1280px){
.pinyin-content{ padding:0;}
}

@media screen and (max-width:1152px){
.yy-row{ width:1000px;}
.pinyin-content{ padding:0;}
.pinyin-table .pinyin-chart-table{ width:1000px;}
}

@media screen and (max-width:1024px){
.yy-row{ width:920px;}
.pinyin-table .pinyin-chart-table{ width:920px;}
.tones-table .row-refresh{ max-width:920px;}
.tones-table .tone-pairs-table{ max-width:920px;}
.tones-table #tonePairs .hanzi{ font-size:18px;}
}

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

}

@media screen and (max-width:768px){
.pinyin-content h1{ font-size:40px;}
.yy-row{ width:720px;}
.pinyin-table .pinyin-chart-table{ width:720px;}
.tones-table .row-refresh{ max-width:720px;}
.tones-table .tone-pairs-table{ max-width:720px;}
.explain-pinyin-wrap h2{ font-size:40px;}
.explain-pinyin-wrap .text{ padding:15px 30px;}
.explain-pinyin-wrap p:first-of-type{ padding:0 5%;}
.explain-pinyin-wrap.explain-tone .text{ columns:1;}
.faq-pinyin-wrap{ width:720px; margin:40px auto;}
.faq-pinyin-wrap h2{ font-size:40px;}
}

@media screen and (max-width:767px){
.tabs-pinyin{ padding-top:30px;}
.tabs-pinyin .list a{ width:155px; height:40px; line-height:40px; padding-left:40px; font-size:14px;}
.tabs-pinyin .list a.first{ background:#fff url(images/icon_pinyin.svg) 18px center no-repeat; background-size:auto 40%;}
.tabs-pinyin .list a.last{ background:#fff url(images/icon_tone.svg) 20px center no-repeat; background-size:auto 45%;}
.tabs-pinyin .list a.first.active{ background:#0d8589 url(images/icon_pinyin_active.svg) 18px center no-repeat; background-size:auto 40%;}
.tabs-pinyin .list a.last.active{ background:#0d8589 url(images/icon_tone_active.svg) 20px center no-repeat; background-size:auto 45%;}
.pinyin-content h1{ font-size:32px;}
.explain-pinyin-wrap h2{ font-size:32px; margin-bottom:10px;}
.faq-pinyin-wrap h2{ font-size:32px;}
.pinyin-table h1 + p, .tones-table h1 + p{ max-width:100%; margin:10px 15px 25px;}
.pinyin-table, .tones-table{ padding:20px 0;}
.yy-row{ width:auto; margin:0 15px;}
.pinyin-table .search{ max-width:100%;}
.pinyin-table .pinyin-chart-table{ width:auto; margin:15px;}
.explain-pinyin-wrap .text{ padding:0 15px;}
.explain-pinyin-wrap img{ width:70%; display:block; margin:0 auto; float:none;}
.faq-pinyin-wrap{ width:auto; margin:15px;}
.faq-pinyin-wrap dl{ padding:15px 30px 15px 20px;}
.faq-pinyin-wrap dl dt{ font-size:18px;}
.faq-pinyin-wrap dl .switch{ width:20px; height:3px; top:26px; right:20px;}
.faq-pinyin-wrap dl .switch span{ width:20px; height:3px;}
.tones-table .row-refresh{ max-width:100%; width:auto; margin:0 15px; text-align:center;}
.tones-table .btn-refresh{ font-size:16px;}
.tones-table .btn-refresh img{ width:20px; margin-top:-5px;}
.tones-table .tone-pairs-table{ max-width:100%; width:auto; margin:15px;}
}