html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    word-break:break-all;
    overflow-y:scroll
}
body{
    margin:0
}
article,aside,figcaption,figure,footer,header,nav,section,main{
    display:block
}
h1,h2,h3,h4,h5,h6{
    font-size:inherit;
    font-weight:inherit;
    margin:0
}
table{
    border-collapse:collapse;
    border-spacing:0
}
table th{
    font-weight:inherit
}
p{
    margin:0
}
ul,ol{
    list-style:none;
    margin:0;
    padding:0
}
dl,dt,dd{
    margin:0
}
fieldset{
    margin:0;
    padding:0;
    border:none
}
legend,caption{
    display:none
}
a{
    color:inherit;
    text-decoration:none
}
address,em{
    font-style:normal
}
img{
    max-width:100%;
    border:0
}
input,button,select{
    color:inherit;
    font:inherit;
    text-align:inherit;
    vertical-align:middle;
    box-sizing:border-box;
    margin:0;
    padding:0
}
button,html input[type='button'],input[type='reset'],input[type='submit']{
    -webkit-appearance:button;
    cursor:pointer
}
button{
    overflow:visible;
    border:0;
    background-color:transparent
}
textarea{
    font-size:inherit;
    box-sizing:border-box
}
a:focus,select:focus,textarea:focus,button:focus,input:focus{
    outline:0
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}
.no-scroll {
    overflow: hidden;
}
.checkbox{
    display:inline-block;
    position:relative;
    width:24px;
    height:24px;
    background-color:#fff;
    border-radius:3px;
    vertical-align:middle;
    box-sizing:border-box;
    border:1px solid #aaa
}
input[type="checkbox"]{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:10;
    opacity:0;
    width:100%;
    height:100%;
    letter-spacing:0;
    border:none;
    border-radius:0;
    background:none;
    vertical-align:middle;
    -webkit-appearance:none;
    -ms-appearance:none
}
input[type="checkbox"]+i{
    position:absolute;
    left:-1px;
    top:-1px;
    width:100%;
    height:100%;
    opacity:0;
    border:1px solid #06a7e2;
    border-radius:3px;
    background-color:#06a7e2;
    text-align:center;
    vertical-align:middle
}
input[type="checkbox"]+i:before{
    content:'\e00d';
    font-size:12px;
    text-align:center;
    font-weight:300;
    font-family:'atomy-icon-font';
    color:#fff;
    line-height:22px;
    display:block;
    text-indent:-4px
}
input[type="checkbox"]:checked+i{
    opacity:1
}
input[data-type='number']{
    ime-mode:disabled
}
input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{
    height:auto
}
input[type='search']{
    -webkit-appearance:textfield;
    box-sizing:content-box
}
input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{
    -webkit-appearance:none
}
button[disabled],input[disabled]{
    cursor:default;
    opacity:.5
}
input::-ms-clear{
    display:none
}
[lang='ko'],[lang='en']{
    font-family:'Spoqa Han Sans', sans-serif
}
[lang='zh']{
    font-family:'Microsoft YaHei', 'Microsoft JhengHei', sans-serif
}
[lang='zh-CN']{
    font-family:'Microsoft YaHei', sans-serif
}
[lang='zh-TW']{
    font-family:'Noto Sans TC', 'Microsoft JhengHei', sans-serif
}
[lang='ja']{
    font-family:"メイリオ",Meiryo,"Osaka",Arial,sans-serif
}
[data-loc='th'],[lang='th']{
    font-family:'CSChatThaiUI', 'Spoqa Han Sans', sans-serif
}
[lang='kh']{
    font-family:'Hanuman', Arial, Helvetica, sans-serif
}
html{
    font-size:100%
}
@media (max-width: 900px){
    html{
        font-size:12px
    }
}
button,html input,textarea{
    font-family:inherit;
    -webkit-appearance:none
}
body{
    position:relative
}
@media (max-width: 900px){
    body{
        position:static
    }
}
body:before{
    content:'';
    visibility:hidden;
    opacity:0;
    transition:opacity .3s linear 0.4s, visibility 0.00s linear 0.4s
}
html,body,.page-wrapper{
    height:100%;
    min-height:100%
}
@media (max-width: 1023px){
    .page-wrapper{
        min-width:100%
    }
}
.hidden{
    display:none !important
}
.nav-skip{
    position:absolute;
    left:-9999px;
    width:0;
    height:0;
    overflow:hidden
}
.word-clamp{
    display:block;
    display:-webkit-box;
    text-overflow:ellipsis;
    word-wrap:break-word;
    word-break:break-word;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.ladda-spinner{
    display:none
}
.box-scroll{
    overflow-y:auto;
    scrollbar-arrow-color:#efefef;
    scrollbar-Track-Color:#efefef;
    scrollbar-base-color:#dfdfdf;
    scrollbar-Face-Color:#dfdfdf;
    scrollbar-3dLight-Color:#dfdfdf;
    scrollbar-DarkShadow-Color:#dfdfdf;
    scrollbar-Highlight-Color:#dfdfdf;
    scrollbar-Shadow-Color:#dfdfdf
}
.box-scroll scrollbar{
    color:#fff #f7f7f7
}
.box-scroll::-webkit-scrollbar{
    width:20px
}
.box-scroll::-webkit-scrollbar-button:start:decrement,.box-scroll::-webkit-scrollbar-button:end:increment{
    display:none
}
.box-scroll::-webkit-scrollbar-track{
    background:#f7f7f7
}
.box-scroll::-webkit-scrollbar-thumb{
    background:#fff;
    border:1px solid #ccc
}
@media (max-width: 1280px){
    ::-webkit-scrollbar{
        display:none
    }
}
mark.notranslate{
    color:inherit;
    background-color:inherit
}
#container{
    min-height:100%;
    margin:-210px 0 -155px;
    padding:210px 0 155px;
    box-sizing:border-box
}
@media (max-width: 900px){
    #container{
        margin:0;
        padding:50px 0 0
    }
}
@media (max-width: 900px){
    .body-main #container{
        padding-top:120px
    }
}
.body-sub #container{
    margin:-120px 0 -155px;
    padding:120px 0 155px
}
@media (max-width: 900px){
    .body-sub #container{
        padding-top:170px
    }
}
.inner{
    position:relative;
    max-width:1120px;
    margin:0 auto;
    box-sizing:border-box
}
@media (max-width: 900px){
    .inner{
        margin:0;
        padding:0 20px
    }
}
.inner:after{
    content:'';
    display:block;
    clear:both
}
.col{
    float:left
}
.col-right{
    float:right
}
.cols:after{
    content:'';
    display:block;
    clear:both
}
.feeding-list:not(.ing) #footer{
    margin-top:50px
}
@media (max-width: 900px){
    .feeding-list #footer{
        margin-top:70px
    }
}
.blockquote-type-1{
    padding:0px 8px;
    margin:0px 15px 30px 20px;
    border-left:2px solid #ccc;
    color:#888
}
.blockquote-type-2{
    padding:0px 8px 0px 16px;
    margin:0px 0px 30px 13px;
    background:url("http://static.se2.naver.com/static/img/bg_quote2.gif") 0px 3px no-repeat;
    color:#888
}
.blockquote-type-3{
    padding:10px;
    margin:0px 0px 30px;
    border:1px dashed #ccc;
    color:#888
}
.blockquote-type-4{
    padding:10px;
    margin:0px 0px 30px;
    border:1px dashed #66b246;
    color:#888
}
.blockquote-type-5{
    padding:10px;
    margin:0px 0px 30px;
    border:1px dashed #ccc;
    background:url("http://static.se2.naver.com/static/img/bg_b1.png") repeat;
    color:#888
}
.blockquote-type-6{
    padding:10px;
    margin:0px 0px 30px;
    border:1px solid #e5e5e5;
    color:#888
}
.blockquote-type-7{
    padding:10px;
    margin:0px 0px 30px;
    border:1px solid #66b246;
    color:#888
}
.blockquote-type-8{
    padding:10px;
    margin:0px 0px 30px;
    border:1px solid #e5e5e5;
    background:url("http://static.se2.naver.com/static/img/bg_b1.png") repeat;
    color:#888
}
.blockquote-type-9{
    padding:10px;
    margin:0px 0px 30px;
    border:2px solid #e5e5e5;
    color:#888
}
.blockquote-type-10{
    padding:10px;
    margin:0px 0px 30px;
    border:2px solid #e5e5e5;
    background:url("http://static.se2.naver.com/static/img/bg_b1.png") repeat;
    color:#888
}
.cke_panel_list .blockquote-type{
    margin-bottom:0
}
.btn{
    position:relative;
    display:inline-block;
    min-width:95px;
    min-height:40px;
    padding:0 20px;
    line-height:38px;
    font-size:15px;
    text-align:center;
    vertical-align:middle;
    border:1px solid transparent;
    border-radius:3px;
    background-color:#fff;
    box-sizing:border-box
}
@media (max-width: 900px){
    .btn{
        min-width:auto;
        min-height:30px;
        line-height:28px;
        padding:0 10px;
        font-size:12px;
        -webkit-user-select:none
    }
}
.btn:disabled,.btn.disabled{
    opacity:.5;
    cursor:default;
    pointer-events:none
}
.btn.sm{
    min-width:55px;
    min-height:30px;
    padding:0 15px;
    line-height:28px
}
@media (max-width: 900px){
    .btn.sm{
        min-width:55px;
        min-height:30px;
        line-height:28px;
        padding:0 15px
    }
}
.btn.block{
    display:block;
    width:100%;
    height:54px;
    line-height:54px;
    font-size:20px
}
@media (max-width: 900px){
    .btn.block{
        height:40px;
        line-height:40px;
        font-size:17.5px
    }
}
.btn.text{
    max-width:100%;
    min-width:auto;
    min-height:auto;
    padding:0 25px 0 14px;
    white-space:nowrap;
    line-height:inherit;
    text-align:left;
    font-size:18px
}
@media (max-width: 900px){
    .btn.text{
        padding:0 15px 0 14px;
        font-size:13.5px
    }
}
.btn.text:before{
    content:'';
    display:inline-block;
    width:4px;
    height:4px;
    margin:0 10px 0 -14px;
    background-color:#000;
    vertical-align:middle
}
@media (max-width: 900px){
    .btn.text:before{
        content:'';
        display:inline-block;
        width:2px;
        height:2px;
        margin:0 10px 0 -14px;
        background-color:#000;
        vertical-align:middle
    }
}
.btn.text span{
    display:inline-block;
    max-width:100%;
    vertical-align:middle;
    text-overflow:ellipsis;
    overflow:hidden
}
.btn.text .icon-arrow-right{
    margin:0 -25px 0 15px;
    font-size:10px
}
.btn.text .icon-arrow-right:before{
    font-size:inherit
}
@media (max-width: 900px){
    .btn.text .icon-arrow-right{
        margin:0 -15px 0 10px;
        font-size:10px;
        vertical-align:text-bottom;
        transform:scale(0.7);
        transform-origin:100% 50%
    }
}
.btn.text:hover span{
    text-decoration:underline
}
@media (max-width: 900px){
    .btn.text:hover span{
        color:#585858;
        text-decoration:none
    }
}
.btn.text.bordered{
    min-height:38px;
    padding:0 50px 0 40px;
    line-height:35px
}
@media (max-width: 900px){
    .btn.text.bordered{
        min-height:25px;
        line-height:23px;
        padding:0 40px 0 30px
    }
}
.btn.text.bordered:before{
    display:none
}
.btn.text.bordered span{
    line-height:38px
}
@media (max-width: 900px){
    .btn.text.bordered span{
        vertical-align:top;
        line-height:23px
    }
}
.btn.text.bordered .icon{
    vertical-align:middle
}
.btn.text.bordered .icon-image{
    width:30px;
    margin:0 0 0 -30px
}
@media (max-width: 900px){
    .btn.text.bordered .icon-image{
        width:20px;
        margin:0 0 0 -20px
    }
}
.btn.text.bordered .icon-image:before{
    font-size:20px
}
@media (max-width: 900px){
    .btn.text.bordered .icon-image:before{
        font-size:15px
    }
}
.btn.text.bordered .icon-download{
    width:16px;
    margin:0 -32px 0 16px
}
@media (max-width: 900px){
    .btn.text.bordered .icon-download{
        width:16px;
        margin:0 -32px 0 16px
    }
}
.btn.text.bordered:hover{
    border-color:#ccc;
    box-shadow:none
}
.btn.text.bordered:hover span,.btn.text.bordered:hover .icon{
    color:#06a7e2
}
@media (max-width: 900px){
    .btn.text.bordered:hover span{
        color:#585858;
        text-decoration:none
    }
}
@media (max-width: 900px){
    .btn.text.bordered:hover .icon{
        color:#ccc
    }
}
.btn.pic{
    min-width:50px;
    height:50px;
    padding:0;
    vertical-align:middle;
    line-height:48px;
    color:#fff;
    box-sizing:border-box;
    border:1px solid #ccc;
    background-color:#101820
}
.btn.pic:focus,.btn.pic:hover{
    color:#fff
}
.btn.pic span{
    font:0/0 a
}
.btn.pic .icon:before{
    font-size:20px
}
.btn.rounded{
    padding:0 30px;
    font-size:17px;
    border-radius:24px
}
@media (max-width: 900px){
    .btn.rounded{
        padding:0 15px;
        font-size:12px;
        border-radius:24px
    }
}
.btn.fill{
    color:#fff;
    border-color:#06a7e2;
    background-color:#06a7e2
}
.btn.fill:focus,.btn.fill:hover{
    background-color:#0e669e;
    border-color:#0e669e
}
.btn.fill.primary{
    color:#fff;
    border-color:#5f73d2;
    background-color:#5f73d2
}
.btn.fill.primary:focus,.btn.fill.primary:hover{
    background-color:#5263b1
}
.btn.bordered{
    border-color:#ccc;
    box-sizing:border-box
}
.btn.bordered:focus,.btn.bordered:hover{
    color:#06a7e2;
    border-color:#06a7e2;
    box-shadow:inset 0 0 0 1px #06a7e2
}
.btn.bordered.fill{
    color:#000;
    background-color:#fff;
    border-color:#06a7e2
}
.btn.bordered.fill:focus,.btn.bordered.fill:hover{
    color:#fff;
    background-color:#06a7e2;
    border:1px solid #06a7e2
}
@media (max-width: 900px){
    .btn.bordered.fill:hover{
        color:#101820;
        border-color:#06a7e2;
        background-color:#fff;
        box-shadow:none
    }
}
.btn.bordered.primary{
    border-color:#06a7e2
}
.btn.reverse.fill{
    color:#000;
    background-color:#f7f7f7;
    border-color:#f7f7f7
}
.btn.reverse.fill:focus,.btn.reverse.fill:hover{
    color:#fff;
    background-color:#06a7e2;
    border:1px solid #06a7e2
}
.btn.reverse.fill:hover{
    color:#000;
    background-color:#f7f7f7;
    border:1px solid #f7f7f7
}
.btn.inverse{
    color:#fff;
    background-color:#000
}
.btn.inverse:focus,.btn.inverse:hover{
    background-color:#48525e
}
.btn.facebook{
    background-color:#0353e8
}
.btn.twitter{
    background: #000;
}
@media(max-width:1310px) {
    .icon-twitter:before {
        height: 100%
    }
}
.btn.kakaotalk{
    background-color:#fae100
}
.btn.band{
    background-color:#38b64b
}
.btn.band .icon{
    font-size:35px
}
.btn.line{
    background-color:#3ace00
}
.btn.wechat{
    background-color:#3ab54a
}
.btn.whatsapp{
    background-color:#0d9f16
}
.btn.zalo{
    background-color:#389dd5
}
.btn.zalo span{
    font-size:12px;
    font-weight:bold
}
.btn.viber{
    background-color:#7b519d
}
.btn.qq{
    background-color:#457dca
}
.btn.weibo{
    background-color:#ed1b24
}
.btn.sms{
    background-color:#ffa31e
}
.btn.message{
    background-color:#457dca
}
.btn.url{
    background-color:#0080ff
}
.btn.kakaostory{
    background-color:#fcc800
}
.btn.linkedin{
    background-color:#0073b1
}
.btn.linkedin .icon{
    width:24px;
    height:24px;
    margin:0 auto;
    background-image:url("../images/common/linkedin.png");
    background-repeat:no-repeat
}
.btn-pause{
    display:inline-block;
    margin:1px 6px 0;
    font:0/0 a;
    color:#101820
}
.btn-pause .icon{
    font-size:14px;
    vertical-align:middle
}
.btn-pause.paused .icon:before{
    content:'\e027'
}
.main .btn-pause{
    color:#cececf
}
.main .btn-pause.paused{
    color:#fff
}
.btn-drag{
    cursor:n-resize
}
.btn-drag:hover{
    opacity:1
}
.btn-drag span{
    font:0/0 a;
    vertical-align:middle;
    display:inline-block;
    height:100%
}
.btn-drag .icon{
    vertical-align:middle
}
.btn-layer-close{
    position:absolute;
    top:0;
    right:0;
    padding:20px;
    text-align:center
}
.btn-layer-close span{
    font:0/0 a;
    letter-spacing:-100px
}
@media (max-width: 900px){
    .btn-gnb-open,.btn-search-open{
        top:0
    }
}
.menu-btn ~ .btn-trans.btn{
    display:none
}
@media (max-width: 900px){
    [data-loc="go"] .menu-btn ~ .btn-trans.btn{
        position:absolute;
        top:0;
        left:auto;
        right:0;
        width:40px;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0;
        font:0/0 a;
        z-index:12;
        background-color:transparent
    }
}
@media (max-width: 900px){
    .menu-btn ~ .btn-trans.btn{
        width:0;
        height:0
    }
}
@media (max-width: 900px){
    .fixed .menu-btn ~ .btn-trans{
        height:69px
    }
}
@media (max-width: 900px){
    .all .menu-btn ~ .btn-trans{
        display:none
    }
}
.icon-new{
    width:13px;
    height:13px;
    line-height:9px;
    margin-top:-3px;
    margin-left:3px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    color:#fff;
    border-radius:1px;
    background:#57a7d9;
    background:linear-gradient(135deg, #57a7d9 0%, #d15fac 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a7d9', endColorstr='#d15fac',GradientType=1 )
}
.icon-new:before{
    font-size:9px
}
.icon-kakaostory:before{
    content:'';
    width:13px;
    height:23px;
    background-image:url("../images/common/icon_kakaostory.png");
    background-repeat:no-repeat;
    background-position:50% 50%;
    vertical-align:middle
}
.icon-playlist{
    width:30px;
    height:30px;
    background:url("../images/common/label_playlist.png") no-repeat 0 0
}
.icon-playlist:before{
    display:none
}
@media (max-width: 900px){
    .icon-playlist:before{
        font-size:16px
    }
}
.icon-toggle-menu{
    position:relative;
    display:block;
    width:25px;
    height:100%;
    transition:transform 0.3s
}
@media (max-width: 900px){
    .icon-toggle-menu{
        width:20px
    }
}
.icon-toggle-menu i{
    position:absolute;
    top:50%;
    left:0;
    display:block;
    width:100%;
    height:5px;
    margin-top:-2.5px;
    border-radius:2.5px;
    background-color:#101820;
    transition:opacity 0.3s, transform 0.3s
}
@media (max-width: 900px){
    .icon-toggle-menu i{
        height:3px;
        margin-top:-1.5px;
        transition:opacity 0.3s linear 0.3s, transform 0.3s linear 0.3s, background 0.3s linear 0.3s
    }
}
.icon-toggle-menu .top{
    transform:translateY(-9px) rotate(0)
}
@media (max-width: 900px){
    .icon-toggle-menu .top{
        transform:translateY(-7px) rotate(0)
    }
}
.icon-toggle-menu .bottom{
    transform:translateY(9px) rotate(0)
}
@media (max-width: 900px){
    .icon-toggle-menu .bottom{
        transform:translateY(7px) rotate(0)
    }
}
.gnb-open .icon-toggle-menu{
    transform:rotate(90deg)
}
.gnb-open .icon-toggle-menu .top{
    transform:translateY(0) rotate(45deg)
}
.gnb-open .icon-toggle-menu .middle{
    opacity:0
}
.gnb-open .icon-toggle-menu .bottom{
    transform:translateY(0) rotate(-45deg)
}
.icon-write{
    vertical-align:middle;
    margin-right:7px
}
@media (max-width: 900px){
    .icon-write{
        vertical-align:baseline
    }
}
.icon-write:before{
    width:38px;
    height:30px;
    background:url("../images/common/write.png") no-repeat 0 0
}
@media (max-width: 900px){
    .icon-write:before{
        width:19px;
        height:15px;
        background-size:cover
    }
}
.icon-shortcut:before{
    width:13px;
    height:13px;
    background:url("../images/common/shortcut.png") no-repeat 0 0
}
.icon-trans{
    font:0/0 a
}
.icon-trans:before{
    width:28px;
    height:27px;
    background:url("../images/common/translate.png") no-repeat 0 0
}
@media (max-width: 900px){
    .icon-trans:before{
        width:22px;
        height:21px;
        background-size:cover
    }
}
.error{
    display:table;
    width:100%;
    text-align:center
}
.error-inner{
    display:table-cell;
    vertical-align:middle;
    text-align:center
}
[data-loc="go"] .error-inner{
    height:calc(100vh - 339px)
}
.error strong{
    display:block;
    font-size:36px;
    line-height:1.2;
    color:#000;
    letter-spacing:-2px
}
@media (max-width: 900px){
    .error strong{
        padding:0 30px;
        font-size:28px;
        word-break:keep-all
    }
}
.error p{
    margin:30px 0 40px;
    font-size:16px;
    color:#101820
}
@media (max-width: 900px){
    .error .btn{
        min-width:80px
    }
}
.select{
    position:relative;
    min-width:200px;
    height:30px;
    color:#000;
    text-align:left;
    background-color:transparent
}
.select:after{
    content:'';
    display:block;
    clear:both
}
.select select{
    float:left;
    height:30px;
    padding:0 10px;
    background-color:#fff;
    border-radius:3px 0 0 3px
}
.select select+.btn{
    float:left;
    border-radius:0 3px 3px 0
}
.select button{
    width:100%;
    height:100%;
    padding-left:10px;
    padding-right:28px;
    background-color:#fff;
    border:1px solid #000;
    border-radius:4px;
    box-sizing:border-box
}
.select button:after{
    content:'';
    display:block;
    position:absolute;
    top:13px;
    right:10px;
    border-width:0 5px 6px 5px;
    border-style:solid;
    border-color:transparent transparent #4c4c4c transparent
}
.select ul{
    display:none;
    position:absolute;
    left:0;
    right:0;
    bottom:29px;
    z-index:1;
    padding:10px 0;
    border:1px solid #000;
    border-radius:4px 4px 0 0;
    border-bottom-color:#e6e6e6;
    background-color:#fff;
    box-sizing:border-box
}
@media (max-width: 900px){
    .select ul{
        bottom:34px
    }
}
.select ul a{
    display:block;
    padding:3px 10px
}
.select ul a:hover{
    background-color:#f9f9f9
}
.select ul .active a{
    background-color:#f9f9f9;
    font-weight:bold
}
.select ul .active a:before{
    content:'\e00d';
    display:inline-block;
    margin-right:5px;
    vertical-align:middle;
    font-size:12px;
    font-family:'atomy-icon-font'
}
.select.active button{
    border-radius:0 0 4px 4px
}
.select.active button:after{
    transform:rotate(180deg)
}
.select.active ul{
    display:block
}
.file label{
    cursor:pointer
}
@media (max-width: 900px){
    .file label{
        height:auto
    }
}
.file label .btn{
    font:0/0 a;
    width:40px;
    min-width:0;
    height:40px;
    padding:0;
    margin-right:10px;
    vertical-align:baseline
}
.file label .btn:before{
    content:'';
    display:inline-block;
    height:15px;
    margin-top:11.5px;
    background-image:url("../images/common/icon_event.png");
    background-repeat:no-repeat
}
.file label .image:before{
    width:20px;
    background-position:-40px 0
}
.file label .movie:before{
    width:13px;
    background-position:-60px 0
}
.file input[type="file"]{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    clip:rect(0, 0, 0, 0);
    border:0;
    overflow:hidden
}
.file .label{
    display:inline-block;
    width:100%;
    height:40px;
    line-height:40px;
    font-size:15px;
    color:#585858;
    text-align:left;
    vertical-align:middle;
    box-sizing:border-box
}
.write-comments{
    position:relative;
    margin-top:15px;
    margin-right:128px;
    border:1px solid #e1e1e1
}
@media (max-width: 900px){
    .write-comments{
        margin:15px 20px 0
    }
}
.write-comments textarea{
    display:block;
    width:100%;
    height:118px;
    line-height:1.2;
    padding:0;
    font-size:18px;
    border:0;
    border-bottom:1px solid #d7d7d7;
    resize:vertical;
    box-sizing:border-box;
    overflow:hidden
}
@media (max-width: 900px){
    .write-comments textarea{
        height:170px;
        padding:15px;
        font-size:15px
    }
}
@media (max-width: 320px){
    .write-comments textarea{
        height:170px
    }
}
.write-comments .check-secret{
    position:absolute;
    right:20px;
    bottom:-44px
}
.write-comments .check-secret label{
    display:inline-block;
    width:14px;
    height:18px;
    margin-right:10px;
    background-image:url("../images/common/icon_event.png");
    background-repeat:no-repeat;
    background-position:0 0;
    font:0/0 a;
    vertical-align:middle
}
.write-comments .write{
    position:relative;
    padding:20px 20px 0
}
.write-comments .count{
    position:absolute;
    right:85px;
    bottom:-45px;
    font-size:15px;
    color:#585858
}
@media (max-width: 900px){
    .write-comments .count{
        bottom:-40px;
        font-size:12.5px
    }
}
.write-comments .attach{
    position:relative;
    padding:14px 186px 14px 20px
}
.write-comments .attach .file{
    position:relative;
    min-height:40px;
    white-space:nowrap
}
@media (max-width: 900px){
    .write-comments .attach .file{
        height:auto;
        font-size:12px;
        white-space:normal
    }
}
.write-comments .attach .file .helper{
    display:inline-block;
    height:auto;
    line-height:1.4;
    min-height:40px;
    margin-top:7px;
    white-space:normal;
    vertical-align:top
}
@media (max-width: 900px){
    .write-comments .attach .file .helper{
        display:block;
        line-height:1.2;
        font-size:11px
    }
}
.write-comments .attach .file .helper .icon{
    margin-left:5px;
    vertical-align:middle
}
.write-comments .attach .file .helper .icon:before{
    font-size:11px
}
.write-comments .btns{
    position:absolute;
    top:0;
    right:-128px;
    bottom:0
}
@media (max-width: 900px){
    .write-comments .btns{
        position:static;
        height:40px;
        margin:-1px
    }
}
.write-comments .btns .btn.fill{
    position:relative;
    width:122px;
    height:100%;
    background-color:#06a7e2
}
@media (max-width: 900px){
    .write-comments .btns .btn.fill{
        width:100%;
        height:100%
    }
}
.write-comments .btns .btn.fill span{
    display:none
}
@media (max-width: 900px){
    .write-comments .btns .btn.fill span{
        display:inline
    }
}
.write-comments .btns .btn.fill:before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    width:54px;
    height:54px;
    margin:-27px 0 0 -27px;
    background-image:url("../images/common/icon_event.png");
    background-repeat:no-repeat;
    background-position:-80px 0
}
@media (max-width: 900px){
    .write-comments .btns .btn.fill:before{
        display:none
    }
}
.edit-input.active,.edit-textarea.active{
    padding-left:26px
}
.edit-input.active:after,.edit-textarea.active:after{
    visibility:visible
}
.edit-input{
    position:relative;
    height:64px;
    padding:0 80px 0 10px;
    border:0;
    background-color:#f7f7f7;
    box-sizing:border-box
}
.edit-input input{
    width:100%;
    height:100%;
    font-size:30px;
    font-weight:bold;
    border:0;
    background-color:transparent
}
.edit-input .btn{
    position:absolute;
    right:12px;
    top:18px
}
.form-group{
    margin-top:16px;
    text-align:left
}
@media (max-width: 900px){
    .form-group{
        margin-top:16px;
        text-align:left
    }
}
.form-group input{
    width:100%;
    padding:0 18px;
    height:54px;
    line-height:54px;
    height:54px;
    color:#101820;
    border:1px solid #ccc;
    border-radius:1px;
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1)
}
@media (max-width: 900px){
    .form-group input{
        padding:0 18px;
        line-height:40px;
        font-size:15px
    }
}
.form-group input[type="password"]{
    margin-top:8px
}
@media (max-width: 900px){
    .form-group input[type="password"]{
        margin-top:8px
    }
}
.form-group input::-webkit-input-placeholder,.form-group input::-moz-placeholder,.form-group input:-ms-input-placeholder{
    color:#9e9e9e
}
.form-group textarea{
    width:100%;
    padding:15px 18px;
    color:#101820;
    border:1px solid #ccc;
    border-radius:1px;
    resize:vertical;
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1)
}
@media (max-width: 900px){
    .form-group textarea{
        padding:15px 18px
    }
}
.form-group .hidden{
    display:none
}
@media (max-width: 900px){
    .form-group .message{
        font-size:15px
    }
}
.label{
    display:block;
    min-width:50px;
    height:40px;
    line-height:40px;
    text-align:center;
    font-size:20px;
    color:#fff
}
.label span{
    font:0/0 a
}
.label-article{
    background-color:#6d82e6
}
.label-card{
    background-color:#f75eb3
}
.label-vod{
    background-color:#02b9f3
}
.label-notice{
    background-color:#02e0d5
}
.label-event{
    background-color:#fddb31
}
.label-choice{
    background-color:#fe7405
}
.label-end{
    background-color:#000
}
.label-announce{
    background-color:#057cfe
}
.label-playlist{
    background:linear-gradient(135deg, #06a7e2 -5%, #e655a5)
}
.flag{
    background-size:cover;
    background-position:50% 50%
}
.flag-us{
    background-image:url("../images/flags/us.png")
}
.flag-jp{
    background-image:url("../images/flags/jp.png")
}
.flag-ca{
    background-image:url("../images/flags/ca.png")
}
.flag-tw{
    background-image:url("../images/flags/tw.png")
}
.flag-sg{
    background-image:url("../images/flags/sg.png")
}
.flag-kh{
    background-image:url("../images/flags/kh.png")
}
.flag-ph{
    background-image:url("../images/flags/ph.png")
}
.flag-my{
    background-image:url("../images/flags/my.png")
}
.flag-mx{
    background-image:url("../images/flags/mx.png")
}
.flag-th{
    background-image:url("../images/flags/th.png")
}
.flag-kr{
    background-image:url("../images/flags/kr.png")
}
.flag-au{
    background-image:url("../images/flags/au.png")
}
.flag-id{
    background-image:url("../images/flags/id.png")
}
.flag-ru{
    background-image:url("../images/flags/ru.png")
}
.flag-go{
    background-image:url("../images/flags/go.png")
}
.tabs{
    margin-bottom:40px
}
@media (max-width: 900px){
    .tabs{
        margin-bottom:20px;
        padding:0 20px
    }
}
.tabs .inner{
    display:table;
    width:100%;
    table-layout:fixed;
    border-right:1px solid #ccc;
    border-bottom:1px solid #06a7e2
}
.tabs .inner:after{
    display:none
}
@media (max-width: 900px){
    .tabs .inner{
        padding:0;
        margin:0
    }
}
.tabs .tab{
    position:relative;
    display:table-cell;
    height:60px;
    font-size:20px;
    font-weight:600;
    color:#585858;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    background-color:#fafafa;
    text-align:center;
    vertical-align:middle;
    word-break:break-all
}
@media (max-width: 900px){
    .tabs .tab{
        height:40px;
        padding:0 5px;
        font-size:15px
    }
}
.tabs .tab.active{
    font-weight:600;
    color:#fff;
    background-color:#06a7e2;
    border-color:#06a7e2
}
.tabs .tab.active+.tab{
    border-left-color:#06a7e2
}
@media (max-width: 900px){
    .slick-nav .dot{
        position:absolute;
        bottom:30px;
        width:100%;
        text-align:center;
        z-index:1
    }
}
.slick-arrow{
    position:absolute;
    font:0/0 a;
    text-align:center;
    z-index:1
}
.slick-arrow:before{
    content:'';
    display:inline-block;
    vertical-align:middle;
    color:#bababa;
    font-family:'atomy-icon-font';
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.slick-arrow:hover:before{
    color:#101820
}
.slick-prev:before{
    content:'\e004'
}
.slick-next:before{
    content:'\e005'
}
.slick-dots{
    display:inline-block
}
.slick-dots li{
    display:inline-block
}
.slick-dots button{
    width:17px;
    height:17px;
    margin:0 8px;
    font:0/0 a;
    border:3px solid #40464d;
    border-radius:50%;
    box-sizing:border-box
}
.slick-dots .slick-active button{
    border-color:#101820;
    background-color:#101820
}
.loading{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.4);
    text-align:center;
    z-index:10
}
.loading:after{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
}
.loading>i{
    display:inline-block;
    width:8px;
    height:8px;
    margin:0 2px;
    border-radius:100%;
    background-color:#fff;
    vertical-align:middle;
    -webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;
    animation:sk-bouncedelay 1.4s infinite ease-in-out both
}
.loading .bounce1{
    -webkit-animation-delay:-0.32s;
    animation-delay:-0.32s
}
.loading-file{
    pointer-events:none
}
.loading-file .loading{
    background-color:rgba(0,0,0,0.7)
}
.loading-file .loading .parcent{
    color:#fff
}
.loading-main{
    position:relative;
    height:300px;
    background-color:transparent
}
.loading-main>i{
    opacity:.8
}
.loading-main>i:first-child{
    background-color:#22bff9
}
.loading-main>i:nth-child(2){
    background-color:#8796dd
}
.loading-main>i:last-child{
    background-color:#ed81bd
}
.spinner .bounce2{
    -webkit-animation-delay:-0.16s;
    animation-delay:-0.16s
}
@-webkit-keyframes sk-bouncedelay{
    0%,80%,100%{
        transform:scale(0)
    }
    40%{
        transform:scale(1)
    }
}
@keyframes sk-bouncedelay{
    0%,80%,100%{
        transform:scale(0)
    }
    40%{
        transform:scale(1)
    }
}
.addition .group{
    padding:30px 0;
    border-top:1px solid #e1e1e1
}
@media (max-width: 900px){
    .addition .group{
        padding:30px 20px;
        border-top:5px solid #f7f7f7
    }
}
.addition .group h4{
    margin-bottom:16px;
    font-size:21px;
    font-weight:600
}
@media (max-width: 900px){
    .addition .group h4{
        font-size:17.5px
    }
}
.addition .tags{
    height:inherit;
    margin-left:-10px;
    padding:50px 0 25px;
    border-top:0
}
@media (max-width: 900px){
    .addition .tags{
        margin-left:-7.5px;
        padding:30px 20px
    }
}
.addition .tags .btn{
    min-height:35px;
    line-height:35px;
    margin:0 5px 10px;
    padding:0 20px
}
@media (max-width: 900px){
    .addition .tags .btn{
        margin:0 2.5px 6px
    }
}
.addition .tags .tag{
    line-height:inherit;
    padding:0;
    font-weight:normal;
    white-space:nowrap
}
@media (max-width: 900px){
    .addition .tags .tag{
        font-size:13.5px;
        margin-top:-4px;
        margin-left:0
    }
}
.addition .attach li{
    margin-bottom:5px;
    color:#585858
}
@media (max-width: 900px){
    .addition .attach li{
        margin-bottom:10px
    }
}
.addition .attach li a .name .loading{
    background-color:rgba(6,167,226,0.75)
}
.addition .attach li a .name .loading .bar i{
    height:5px;
    position:absolute;
    left:0;
    bottom:0px;
    background-color:#fff
}
.addition .attach .icon{
    color:#cecece
}
.addition .chapters{
    font-size:18px
}
@media (max-width: 900px){
    .addition .chapters{
        font-size:18px
    }
}
.addition .chapters li{
    padding:0 0 3px 120px
}
@media (max-width: 900px){
    .addition .chapters li{
        padding:0 0 20px 90px
    }
}
.addition .chapters li:after{
    content:'';
    display:block;
    clear:both
}
@media (max-width: 900px){
    .addition .chapters li:after{
        content:'';
        display:block;
        clear:both
    }
}
.addition .chapters li .number{
    float:left;
    width:30px;
    line-height:27px;
    margin-left:-120px;
    font-size:14px;
    text-align:right
}
.addition .chapters li .time{
    float:left;
    width:90px;
    line-height:27px;
    margin-left:-90px;
    font-size:15px;
    color:#585858;
    text-align:center
}
@media (max-width: 900px){
    .addition .chapters li .time{
        float:left;
        width:90px;
        margin-left:-90px
    }
}
.addition .captions{
    position:relative;
    font-size:15px
}
@media (max-width: 900px){
    .addition .captions{
        position:relative;
        font-size:15px
    }
}
@media (max-width: 900px){
    .addition .captions li{
        padding:0 0 15px 90px
    }
    .addition .captions li:after{
        content:'';
        display:block;
        clear:both
    }
}
.addition .captions li .number{
    display:none
}
@media (max-width: 900px){
    .addition .captions li .time{
        float:left;
        width:90px;
        margin-left:-90px
    }
}
.addition .captions .select{
    position:absolute;
    top:35px;
    right:0;
    vertical-align:middle
}
@media (max-width: 900px){
    .addition .captions .select{
        position:absolute;
        top:28px;
        right:20px
    }
}
.addition .captions .select button,.addition .captions .select.active ul{
    border-color:#ccc
}
.addition .captions .select-cc select{
    min-width:150px
}
@media (max-width: 900px){
    .addition .captions .select-cc select{
        min-width:100px;
        height:30px;
        box-sizing:border-box
    }
}
.addition .captions .box-scroll{
    height:223px;
    padding:10px 0;
    background-color:#f7f7f7
}
@media (max-width: 900px){
    .addition .captions .box-scroll{
        height:223px;
        border:1px solid #ebebeb
    }
}
.addition .captions .box-scroll ul{
    padding:0
}
@media (max-width: 900px){
    .addition .captions .box-scroll ul{
        padding:30px
    }
}
.addition .captions .box-scroll li{
    padding:0 0 4px 90px
}
.addition .captions .box-scroll li:after{
    content:'';
    display:block;
    clear:both
}
.addition .captions .box-scroll li .time{
    float:left;
    width:90px;
    margin-left:-90px;
    color:#585858;
    text-align:center
}
.addition .related li a{
    color:#585858
}
.addition .related li a:hover{
    color:#101820
}
@media (max-width: 900px){
    .addition .scripts{
        display:none
    }
}
.article{
    position:relative
}
.article.active{
    background-color:#f3fafd
}
.article>a{
    position:relative;
    display:block;
    color:#101820
}
.article>a:hover .title,.article>a:focus .title{
    color:#06a7e2
}
@media (max-width: 900px){
    .article>a:hover .title,.article>a:focus .title{
        color:#101820
    }
}
.article>a:hover img{
    transform:translate(-50%, -50%) scale(1.1)
}
@media (max-width: 900px){
    .article>a:hover img{
        transform:translate(-50%, -50%)
    }
}
@media (max-width: 900px){
    .article>a:hover .img:after{
        opacity:0
    }
}
.article>a:hover .label-vod span{
    background-color:rgba(6,167,226,0.5)
}
@media (max-width: 900px){
    .article>a:hover .label-vod span{
        background-color:rgba(16,24,32,0.5)
    }
}
.article>a:hover .label-vod span:before{
    opacity:1
}
@media (max-width: 900px){
    .article>a .label-vod span:before{
        opacity:1
    }
}
.article a:after{
    content:'';
    display:block;
    clear:both
}
.article a:visited .meta .count .icon:before{
    color:#24b1e4 !important
}
.article .label{
    display:none;
    position:absolute;
    top:10px;
    left:10px;
    width:30px;
    min-width:30px;
    height:30px;
    line-height:30px;
    z-index:1
}
@media (max-width: 900px){
    .article .label{
        top:5px;
        left:5px;
        width:20px;
        min-width:auto;
        height:20px;
        line-height:20px
    }
}
@media (max-width: 900px){
    [data-loc="go"] .article .label{
        top:2px;
        left:2px;
        width:18px;
        height:18px;
        line-height:18px
    }
}
.article .label .icon:before{
    font-size:12px;
    vertical-align:top
}
@media (max-width: 900px){
    .article .label .icon:before{
        font-size:10px
    }
}
.article .label .icon-notice,.article .label .icon-event{
    display:block;
    width:30px;
    height:30px;
    background-image:url("../images/icons/label.png")
}
@media (max-width: 900px){
    .article .label .icon-notice,.article .label .icon-event{
        width:20px;
        height:20px;
        background-size:81px auto
    }
}
@media (max-width: 900px){
    .article .label .icon-notice{
        background-position:-1px 0
    }
}
.article .label .icon-event{
    background-position:-30px 0
}
@media (max-width: 900px){
    .article .label .icon-event{
        background-position:-30px -15px
    }
}
.article .img{
    position:relative;
    display:block;
    width:100%;
    margin:0;
    border:1px solid #ebebeb;
    overflow:hidden;
    box-sizing:border-box
}
@media (max-width: 900px){
    .article .img{
        -webkit-user-select:none
    }
}
.article .img:before{
    content:'';
    display:block;
    padding-bottom:56.25%
}
.article .img:after{
    content:'';
    position:absolute;
    display:block;
    left:0;
    top:0;
    right:0;
    bottom:0;
    opacity:0;
    background-color:rgba(0,0,0,0.1);
    transition:opacity ease .2s
}
@media (max-width: 900px){
    .article .img:after{
        display:none
    }
}
.article .img span{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    text-align:center
}
.article .img img{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    min-height:100%;
    transform:translate(-50%, -50%);
    transition:transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s
}
.article .img .running-time{
    top:auto;
    left:auto;
    right:4px;
    bottom:4px;
    margin-bottom:0
}
@media (max-width: 900px){
    [data-loc="go"] .article .img .running-time{
        right:2px;
        bottom:2px
    }
}
@media (max-width: 900px){
    [data-loc="go"] .article .img .running-time strong{
        line-height:16px;
        padding:0 5px;
        font-size:10px
    }
}
.article .content{
    position:relative;
    line-height:1.2
}
@media (max-width: 900px){
    .article .content{
        font-size:11px
    }
}
.article .title{
    max-height:50px;
    margin-bottom:15px;
    font-size:20px;
    font-weight:600;
    letter-spacing:-.5px;
    -webkit-line-clamp:2
}
@media (max-width: 900px){
    .article .title{
        max-height:50px;
        line-height:1.25;
        margin-bottom:5px;
        font-size:15px;
        font-weight:500;
        -webkit-line-clamp:2
    }
}
.article .title>i{
    display:none !important
}
.article .description{
    -webkit-line-clamp:2;
    color:#585858;
    letter-spacing:-.5px
}
@media (max-width: 900px){
    .article .description{
        font-weight:300;
        color:#101820
    }
}
.article .meta{
    font-size:15px;
    color:#585858
}
@media (max-width: 900px){
    .article .meta{
        display:flex;
        flex-wrap:wrap;
        max-width:100%;
        font-size:11px;
        font-weight:300;
        overflow:hidden
    }
}
.article .meta>span{
    display:inline-block
}
@media (max-width: 900px){
    .article .meta>span{
        flex:none;
        margin-left:0
    }
}
.article .meta>span:after{
    content:'';
    display:inline-block;
    width:1px;
    height:9px;
    margin:0 5px;
    vertical-align:middle
}
@media (max-width: 900px){
    .article .meta>span:first-child{
        margin-bottom:3px
    }
}
.article .meta>span:last-child:after{
    display:none
}
@media (max-width: 900px){
    .article .meta>span.running-time{
        width:auto
    }
}
@media (max-width: 900px){
    [data-loc="go"] .article .meta>span.running-time strong{
        line-height:16px;
        padding:0 5px;
        font-size:10px
    }
}
.article .meta time,.article .meta strong{
    display:inline-block;
    margin-right:4px;
    font-weight:normal;
    vertical-align:middle
}
@media (max-width: 900px){
    .article .meta strong{
        font-weight:300;
        margin-right:0
    }
}
@media (max-width: 900px) {
    .article .meta .shares strong{
        margin-right: 7px;
    }
}
.article .meta span span{
    font:0/0 a;
    letter-spacing:-100px
}
.article .meta>.date:after{
    display:none
}
@media (max-width: 900px){
    .article .meta .date{
        width:100%
    }
}
.article .meta .icon{
    letter-spacing:0;
    vertical-align:middle
}
.article .meta .icon:before{
    color:#a6a6a6
}
.article .meta .active .icon-star-line:before{
    content:'\e033';
    color:#06a7e2
}
@media (max-width: 900px){
    .article .meta .like:after{
        display:none
    }
}
@media (max-width: 900px){
    .article .count:after{
        display:none
    }
}
.article .running-time{
    position:absolute;
    right:4px;
    bottom:100%;
    margin-bottom:4px;
    transition:margin ease .4s;
    z-index:1
}
@media (max-width: 900px){
    .article .running-time{
        right:1px;
        margin-bottom:1px
    }
}
.article .running-time strong{
    display:inline-block;
    margin-right:0;
    padding:2px 5px 4px;
    white-space:nowrap;
    font-size:13px;
    font-weight:normal;
    color:#fff;
    background-color:rgba(0,0,0,0.6)
}
@media (max-width: 900px){
    .article .running-time strong{
        padding:3px 5px 4px
    }
}
.article .want-login{
    display:block;
    width:36px;
    height:40px;
    position:absolute;
    top:-1px;
    left:10px;
    z-index:2
}
.article .want-login:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url("../images/icons/secret.png");
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:100% auto
}
.article .want-login span{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    font-size:20px;
    font-weight:bold;
    color:#fff;
    word-break:keep-all;
    text-align:center;
    transform:translateY(-50%);
    display:none
}
@media (max-width: 900px){
    .article .want-login{
        width:22px;
        height:25px;
        left:6px
    }
}
.article .duration-watched .play-time{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:6px;
    background-color:rgba(238,238,238,0.6)
}
.article .duration-watched .play-time i{
    display:block;
    height:100%;
    background-color:#00b6f0
}
.article .check-item{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:50px;
    text-align:center;
    z-index:9
}
@media (max-width: 900px){
    .article .check-item{
        width:35px
    }
}
.article .check-item:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
}
@media (max-width: 900px){
    .article .check-item:before{
        content:'';
        display:inline-block;
        height:100%;
        vertical-align:middle
    }
}
.article .check-item ~ a{
    box-sizing:border-box
}
.brochure-item{
    padding:1px 10px 0;
    box-sizing:border-box;
    outline:none
}
@media (max-width: 900px){
    .brochure-item{
        flex:none;
        width:156px
    }
}
.brochure-item .thumb{
    position:relative;
    overflow:hidden;
    box-shadow:2px 3px 7px 0 rgba(0,0,0,0.2);
    border:1px solid #e5e5e3
}
.brochure-item .thumb .loading{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:60px;
    height:60px;
    overflow:hidden;
    transform:translate(-50%, -50%);
    z-index:10;
    border-radius:50%;
    background-color:#02b9f3
}
.brochure-item .thumb .loading .parcent{
    width:100%;
    height:100%;
    color:#fff;
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center
}
.brochure-item .thumb .loading .parcent strong{
    font-size:18px;
    margin-right:3px
}
@media (max-width: 900px){
    .brochure-item .thumb{
        overflow:visible
    }
}
.brochure-item .thumb:before{
    content:'';
    display:block;
    padding-bottom:130.95%
}
.brochure-item .thumb .img{
    position:absolute;
    top:1px;
    left:0;
    right:0;
    bottom:0;
    background:#fff
}
.brochure-item .thumb .img img{
    width:100%;
    height:100%
}
.brochure-item .thumb .img:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url("../images/empty/thum_210x275.png") no-repeat 0 0;
    background-size:100%
}
.brochure-item .thumb .img .new{
    position:absolute;
    top:-1px;
    right:10px;
    width:42px;
    height:50px;
    text-indent:-9999px;
    overflow:hidden;
    background:url("../images/icons/new.png") no-repeat 0 0;
    background-size:100%;
    z-index:1
}
@media (max-width: 900px){
    .brochure-item .thumb .img .new{
        width:30px;
        height:36px
    }
}
.brochure-item .thumb .img .view{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:80px;
    height:80px;
    text-indent:-9999px;
    overflow:hidden;
    transform:translate(-50%, -50%);
    background:url("../images/icons/view.png") no-repeat 0 0;
    z-index:2;
    opacity:0;
    transition:opacity 0.3s
}
@media (max-width: 900px){
    .brochure-item .thumb .img .view{
        display:none !important
    }
}
.brochure-item .thumb .more{
    display:block;
    position:absolute;
    bottom:-7px;
    right:-7px;
    width:40px;
    height:40px;
    border-radius:50%;
    overfow:hidden;
    background:rgba(0,0,0,0.7);
    box-shadow:0px 3px 3px 0 rgba(0,0,0,0.4)
}
.brochure-item .thumb .more:after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:21px;
    height:4px;
    transform:translate(-50%, -50%);
    background:url("../images/icons/more.png") no-repeat 50% 50%;
    background-size:100% auto
}
@media (min-width: 900px){
    .brochure-item .thumb .more{
        display:none !important
    }
}
.brochure-item .thumb .hidden-btn-wrap{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:52px;
    overflow:hidden
}
@media (max-width: 900px){
    .brochure-item .thumb .hidden-btn-wrap{
        overflow:visible
    }
}
.brochure-item .thumb .hidden-btn{
    position:absolute;
    bottom:-52px;
    left:0;
    width:100%;
    height:52px;
    box-sizing:border-box;
    padding:8px;
    text-align:center;
    background:rgba(0,0,0,0.7);
    transition:bottom 0.3s;
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center
}
.brochure-item .thumb .hidden-btn>a{
    display:inline-block;
    margin:0 5.7%;
    width:17.7%;
    max-width:35px;
    padding-bottom:18.1%;
    overflow:hidden;
    box-sizing:border-box;
    text-indent:-99999px;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:50% 50%;
    font-size:0
}
.brochure-item .thumb .hidden-btn .view{
    display:none;
    background-image:url("../images/icons/more1.png")
}
.brochure-item .thumb .hidden-btn .pdf{
    background-image:url("../images/icons/pdf.png")
}
.brochure-item .thumb .hidden-btn .share{
    background-image:url("../images/icons/share.png")
}
.brochure-item .thumb .hidden-btn .share2{
    background-image:url("../images/icons/share.png")
}
.brochure-item .thumb .hidden-btn .down{
    background-image:url("../images/icons/down.png")
}
@media (max-width: 900px){
    .brochure-item .thumb .hidden-btn{
        display:none;
        bottom:-6px;
        left:-7px;
        width:calc(100% + 14px);
        height:39px;
        padding:5px 4px 0;
        border-radius:20px;
        opacity:0
    }
    .brochure-item .thumb .hidden-btn>a{
        width:30px;
        height:31px;
        margin:0 1px
    }
    .brochure-item .thumb .hidden-btn .view{
        display:inline-block
    }
}
.brochure-item .thumb.on .view{
    opacity:1
}
.brochure-item .thumb.on .hidden-btn{
    bottom:0
}
@media (max-width: 900px){
    .brochure-item .thumb.on .hidden-btn{
        display:block;
        opacity:1;
        bottom:-6px
    }
}
.brochure-item .thumb.on .more{
    display:none
}
.brochure-item .title{
    height:52px;
    overflow:hidden
}
.brochure-item .title a{
    display:block;
    text-align:center;
    font-size:20px;
    color:#101824;
    line-height:26px;
    font-weight:600;
    letter-spacing:-.5px;
    -webkit-line-clamp:2
}
@media (max-width: 900px){
    .brochure-item .title{
        height:42px
    }
    .brochure-item .title a{
        font-size:16px;
        line-height:20px
    }
}
.top-banner{
    position:relative;
    color:#fff;
    background-color:#303438;
    z-index:20;
    display:none
}
@media (max-width: 900px){
    .top-banner{
        display:block
    }
    .top-banner:not(.remove) ~ .header.fixed,.top-banner:not(.remove) ~ .header.fixed h1,.top-banner:not(.remove) ~ .header.fixed .menu-btn,.top-banner:not(.remove) ~ .header.fixed-menu{
        top:50px
    }
    .top-banner:not(.remove) ~ .header.fixed ~ .search{
        top:50px
    }
    .top-banner:not(.remove) ~ .header.fixed ~ #container .slider-visual{
        top:170px
    }
}
.top-banner .banner{
    position:relative;
    height:60px;
    margin:0 auto;
    background-color:#303438;
    transition:margin-top 0.3s;
    z-index:2
}
@media (max-width: 900px){
    .top-banner .banner{
        height:50px
    }
}
.top-banner .banner p{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    line-height:60px;
    font-size:22px;
    text-align:center
}
.top-banner .banner p strong{
    color:#22c3f6;
    font-weight:700
}
@media (max-width: 900px){
    .top-banner .banner p{
        line-height:50px;
        font-size:16px
    }
    .top-banner .banner p:before{
        content:'';
        display:inline-block;
        width:32px;
        height:32px;
        margin:-3px 25px 0 0;
        background-image:url("../images/common/banner_top_icon.png");
        background-size:100% auto;
        background-repeat:no-repeat;
        vertical-align:middle
    }
    .top-banner .banner p span{
        display:none
    }
}
.top-banner .toggle{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    z-index:5
}
@media (max-width: 900px){
    .top-banner .toggle{
        top:10px;
        left:15px;
        width:30px;
        padding:0;
        font:0/0 a;
        text-align:center
    }
    .top-banner .toggle:before{
        width:15px;
        height:17px;
        margin-right:-3px;
        background-image:url("../images/common/icon_top_banner_m.png");
        background-size:50px auto;
        background-position:0 0
    }
}
.top-banner .close{
    position:absolute;
    top:18px;
    right:15px;
    width:23px;
    height:23px;
    font:0/0 a;
    background-image:url("../images/common/icon_top_banner.png");
    background-repeat:no-repeat;
    background-position:-20px 0;
    z-index:7
}
@media (max-width: 900px){
    .top-banner .close{
        top:0;
        right:0;
        width:50px;
        height:50px;
        background-image:none
    }
    .top-banner .close:after{
        content:'';
        position:absolute;
        top:50%;
        right:15px;
        width:15px;
        height:15px;
        margin-top:-7.5px;
        background-image:url("../images/common/icon_top_banner_m.png");
        background-size:50px auto;
        background-position:100% 0
    }
}
.top-banner .content{
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    width:100%;
    opacity:0;
    transform:translateY(-100%);
    transition:transform 0.3s, opacity 0.3s
}
@media (max-width: 900px){
    .top-banner .content{
        display:none
    }
}
.top-banner .content .inner{
    max-width:1190px;
    padding:130px 0;
    box-sizing:border-box
}
.top-banner .content .text{
    display:inline-block;
    width:33%;
    font-size:50px;
    font-weight:100;
    vertical-align:middle;
    word-break:keep-all
}
.top-banner .content .text strong{
    color:#09b9f1;
    text-decoration:underline
}
.top-banner .content .text .btn{
    font-size:18px;
    line-height:44px;
    height:46px;
    padding:0 20px;
    border:1px solid #fff;
    border-radius:23px;
    background-color:transparent
}
.top-banner .content .text .btn:after{
    content:'';
    display:inline-block;
    width:7px;
    height:11px;
    margin-left:35px;
    background-image:url("../images/common/icon_top_banner.png");
    background-repeat:no-repeat;
    background-position:-50px 0
}
.top-banner .content .video{
    position:relative;
    display:inline-block;
    width:66%;
    vertical-align:middle
}
.top-banner .content .video:before{
    content:'';
    display:block;
    padding-bottom:56.25%
}
.top-banner .content .video .guide-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.top-banner .content .video .video-player{
    width:100% !important;
    height:auto !important
}
@media (max-width: 900px){
    .top-banner .go-detail{
        position:absolute;
        top:0;
        left:0;
        right:50px;
        height:100%;
        z-index:10
    }
}
.top-banner.show .banner{
    z-index:3
}
.top-banner.show .banner p{
    z-index:6
}
.top-banner.show .content{
    background-color:#303438;
    transform:translateY(0);
    opacity:1
}
@media (max-width: 900px){
    .top-banner.show .content{
        display:none
    }
}
.top-banner.show .content .toggle:before{
    transform:rotate(180deg)
}
@media (max-width: 900px){
    .top-banner.remove{
        display:none
    }
}
.top-banner.remove .banner{
    margin-top:-60px;
    overflow:hidden
}
.top-small-banner{
    position:absolute;
    right:35px;
    bottom:0;
    transition:opacity 0.3s;
    overflow:hidden
}
.top-small-banner a{
    display:block;
    height:82px;
    text-align:right;
    overflow:hidden
}
.top-small-banner a img{
    display:inline-block;
    max-width:100%;
    max-height:100%
}
.top-small-banner .banner-slider{
    width:240px;
    height:82px
}
.top-small-banner .go-banner{
    display:block;
    width:260px;
    height:110px;
    overflow:hidden
}
.fixed .top-small-banner{
    opacity:0
}
.nav-gnb .event-banner{
    display:none
}
.comment{
    position:relative;
    padding:65px 20px 30px;
    border-top:1px solid #e1e1e1;
    background-color:#fff
}
@media (max-width: 900px){
    .comment{
        padding:55px 20px 30px
    }
}
.comment:after{
    content:'';
    display:block;
    clear:both
}
.comment .content{
    padding:0 0 20px;
    color:#101820;
    font-size:18px;
    line-height:1.2
}
.comment .content p{
    white-space:pre-line
}
@media (max-width: 900px){
    .comment .content{
        line-height:1.2;
        padding:0 0 20px;
        font-size:15px
    }
}
.comment .img{
    display:block;
    max-width:300px;
    margin-top:20px
}
.comment .img img{
    max-width:100%
}
@media (max-width: 900px){
    .comment .img{
        margin-top:20px
    }
}
.comment .btn-like,.comment .meta{
    float:left;
    line-height:24px
}
@media (max-width: 900px){
    .comment .btn-like,.comment .meta{
        line-height:30px
    }
}
.comment .btn-like{
    margin-left:20px;
    color:#585858
}
@media (max-width: 900px){
    .comment .btn-like{
        margin-left:10px
    }
}
.comment .btn-like:before{
    content:'';
    display:inline-block;
    width:14px;
    height:14px;
    background-image:url("../images/common/icon_event.png");
    background-position:0 -25px;
    background-repeat:no-repeat
}
@media (max-width: 900px){
    .comment .btn-like:before{
        width:13px;
        height:13px;
        margin-top:-2px;
        background-size:115px auto;
        background-position:0 -21px
    }
}
.comment .btn-like.active:before{
    background-position:-20px -25px;
    vertical-align:middle
}
@media (max-width: 900px){
    .comment .btn-like.active:before{
        background-position:-17px -21px
    }
}
.comment .btn-like strong{
    color:#06a7e2
}
.comment .btn-like .icon{
    display:none
}
.comment .btn-like .icon:before{
    font-size:12px
}
@media (max-width: 900px){
    .comment .btn-like .icon:before{
        font-size:11px
    }
}
.comment .meta{
    font-size:15px;
    color:#585858
}
@media (max-width: 900px){
    .comment .meta{
        font-size:13px
    }
}
.comment .meta .user{
    position:absolute;
    top:30px;
    left:20px;
    color:#06a7e2
}
@media (max-width: 900px){
    .comment .meta .user{
        top:20px
    }
}
.comment .meta .user strong{
    font-weight:normal
}
.comment .edit{
    float:right
}
.comment .download{
    display:inline-block;
    padding:5px 10px;
    margin-top:15px;
    font-size:14px;
    border:1px solid #ccc;
    border-radius:3px;
    background-color:#fff
}
.comment .download .icon{
    margin-left:10px;
    color:#cecece
}
.comment .download .icon:before{
    font-size:12px
}
.comment.win .meta .user:before{
    content:'';
    vertical-align:middle;
    display:inline-block;
    width:20px;
    height:26px;
    margin-right:7px;
    background-image:url("../images/common/icon_event.png");
    background-repeat:no-repeat;
    background-position:-60px -25px
}
.comment.secret .meta .user strong{
    color:#e655a5
}
.comment.secret .meta .user strong:before{
    content:'';
    vertical-align:middle;
    display:inline-block;
    width:12px;
    height:16px;
    margin-top:-3px;
    margin-right:8px;
    background-image:url("../images/common/icon_event.png");
    background-repeat:no-repeat;
    background-position:-20px 0
}
.comment.current,.comment.edit{
    background-color:#f3fafd
}
.comment.current .write-comments{
    display:none
}
.comment.edit>.edit{
    display:none
}
.comment.edit .write-comments{
    padding:20px;
    margin:0 0 15px;
    border:1px solid #e1e1e1;
    background-color:#fff
}
.comment.edit .write-comments textarea{
    border-radius:3px
}
.comment.edit .write-comments img{
    width:77px
}
.comment.edit .write-comments .attach{
    position:relative;
    padding:20px 0 0;
    white-space:nowrap
}
@media (max-width: 900px){
    .comment.edit .write-comments .attach{
        min-height:40px;
        padding-top:10px
    }
}
.comment.edit .write-comments .attach #fileForm{
    display:inline-block;
    vertical-align:top
}
.comment.edit .write-comments .attach .file{
    position:static;
    display:inline-block;
    max-width:70%;
    vertical-align:middle
}
@media (max-width: 900px){
    .comment.edit .write-comments .attach .file{
        display:block;
        max-width:none
    }
}
.comment.edit .write-comments .attach .file .icon{
    font-size:9px;
    margin-left:5px
}
.comment.edit .write-comments .attach .file .icon:before{
    font-size:9px
}
.comment.edit .write-comments .attach .img{
    display:inline-block;
    max-height:52px;
    margin-top:0;
    margin-right:10px;
    vertical-align:middle;
    overflow:hidden
}
.comment.edit .write-comments .attach .btn{
    position:absolute;
    top:20px;
    right:0;
    margin-right:0
}
.comment.edit .write-comments .attach .btn-delete{
    position:absolute;
    left:0;
    top:20px;
    padding:0 5px;
    color:#fff;
    background-color:#101820
}
@media (max-width: 900px){
    .comment.edit .write-comments .attach .btn-delete{
        top:10px
    }
}
.comment.edit .write-comments .attach .btn-delete .icon:before{
    font-size:12px
}
@media (max-width: 900px){
    .comment.edit .write-comments .attach .btn-delete .icon:before{
        font-size:10px
    }
}
.comment.edit .write-comments .btns{
    position:absolute;
    top:100%;
    right:0;
    margin-top:15px
}
.comment.edit .write-comments .btns .btn.fill{
    width:auto;
    height:auto
}
.comment.edit .write-comments .btns .btn.fill:before{
    display:none
}
.comment.edit .write-comments .check-secret{
    top:-40px;
    right:0;
    bottom:auto
}
@media (max-width: 900px){
    .comment.edit .write-comments .file .label{
        display:block;
        height:auto;
        line-height:1.2;
        padding-right:45px;
        font-size:11px
    }
}
.comment-delete{
    opacity:0.3;
    filter:grayscale(1)
}
.comment-delete-info:before{
    content:'';
    vertical-align:middle;
    display:inline-block;
    width:20px;
    height:20px;
    margin-top:-4px;
    margin-right:5px;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-image:url("../images/icons/info.png")
}
.list-comments li:first-child .comment{
    border-top:none
}
.list-comments li .content{
    padding-top:0
}
@media (max-width: 900px){
    .list-comments li .content{
        padding-left:0
    }
}
@media (max-width: 900px){
    .list-comments .inner{
        padding:0
    }
}
.control{
    font-size:18px;
    line-height:40px
}
@media (max-width: 900px){
    .control{
        padding-bottom:0
    }
}
.control+.control{
    padding-top:40px
}
.control .inner{
    padding-bottom:10px;
    border-bottom:1px solid #e6e6e6
}
@media (max-width: 900px){
    .control .inner{
        padding-bottom:0
    }
}
.control .total{
    float:left;
    margin-right:28px
}
.control .total strong{
    display:inline-block;
    margin-left:5px;
    color:#06a7e2
}
@media (max-width: 900px){
    .control .total{
        display:none
    }
}
.control .sort{
    float:left
}
.control .sort a{
    position:relative;
    display:inline-block;
    padding:0 17px 0 10px;
    color:#585858;
    letter-spacing:-.5px
}
@media (max-width: 900px){
    .control .sort a{
        margin:0;
        padding:0 10px;
        font-size:12.5px
    }
}
.control .sort a:after{
    content:'';
    position:absolute;
    top:50%;
    right:0;
    display:inline-block;
    width:1px;
    height:12px;
    margin-top:-6px;
    background-color:#ccc
}
@media (max-width: 900px){
    .control .sort a:after{
        right:-5px;
        height:8px;
        margin-top:-4px
    }
}
.control .sort a:last-child:after{
    display:none
}
.control .sort a span{
    display:inline-block;
    margin-left:5px
}
.control .sort a .icon{
    display:none
}
.control .sort .active{
    font-weight:bold;
    color:#101820
}
.control .sort .active .icon{
    display:inline-block
}
.control .switch{
    display:none;
    position:relative;
    float:right
}
@media (max-width: 900px){
    .control .switch{
        float:right;
        margin-top:5px
    }
}
.control .switch:after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    width:1px;
    height:12px;
    margin-top:-6px;
    margin-left:-.5px;
    background-color:#ccc
}
.control .switch .btn{
    float:left;
    min-width:52px;
    height:40px;
    line-height:40px;
    color:#acacac;
    border-color:transparent;
    background-color:transparent
}
@media (max-width: 900px){
    .control .switch .btn{
        float:left;
        min-width:30px;
        height:30px;
        min-height:15px;
        line-height:30px;
        color:#454545;
        background-color:#fff
    }
}
.control .switch .btn:hover{
    color:#06a7e2
}
.control .switch .btn .icon:before{
    font-size:17px
}
@media (max-width: 900px){
    .control .switch .btn .icon:before{
        font-size:12px
    }
}
.control .switch .btn.active{
    color:#06a7e2
}
.control-event{
    padding:0 15px;
    margin-top:30px
}
@media (max-width: 900px){
    .control-event{
        padding:0;
        margin-top:0;
        margin-bottom:20px
    }
}
.control-event .filter{
    color:#585858
}
.control-event .filter .btn{
    color:#585858;
    font-size:18px;
    padding:0
}
@media (max-width: 900px){
    .control-event .filter .btn{
        font-size:11px
    }
}
.control-event .filter .btn .icon{
    color:#fff;
    text-align:center;
    width:26px;
    height:26px;
    line-height:26px;
    margin-left:7px;
    border-radius:50%;
    background-color:#e6e6e6
}
@media (max-width: 900px){
    .control-event .filter .btn .icon{
        width:20px;
        height:20px;
        line-height:20px
    }
}
.control-event .filter .btn .icon:before{
    font-size:14px;
    margin-left:-2px
}
@media (max-width: 900px){
    .control-event .filter .btn .icon:before{
        font-size:10px;
        margin-left:-2px
    }
}
.control-event .filter .btn.disabled{
    opacity:.5
}
.control-event .filter .btn.active .icon{
    background-color:#06a7e2
}
@media (max-width: 900px){
    .control-event .total{
        display:block;
        padding-left:0;
        font-size:11px
    }
}
.control-event .total em{
    color:#06a7e2;
    font-size:20px;
    font-weight:700
}
@media (max-width: 900px){
    .control-event .total em{
        font-size:12px
    }
}
.mypage-control .inner{
    padding-bottom:0;
    border-bottom:0
}
.mypage-control .sort{
    float:none;
    margin-bottom:10px
}
.mypage-control .btns{
    padding:14px;
    border-width:1px 0;
    border-style:solid;
    border-color:#e6e6e6;
    background-color:#f7f7f7
}
.mypage-control .total{
    padding-left:0
}
.headline .tools{
    position:absolute;
    top:100%;
    left:50%;
    margin-left:580px;
    z-index:1
}
@media (max-width: 1310px){
    .headline .tools{
        top:inherit;
        left:inherit;
        right:20px;
        bottom:30px;
        margin:0
    }
}
@media (max-width: 900px){
    .headline .tools{
        bottom:13px
    }
}
@media (max-width: 1310px){
    .headline .tools div{
        position:absolute;
        display:none
    }
}
.headline .tools.sticky{
    position:fixed;
    top:131px
}
@media (max-width: 1310px){
    .headline .tools.sticky{
        position:absolute;
        top:auto
    }
}
.headline .tools .btn.pic{
    position:relative;
    display:block;
    width:56px;
    height:56px;
    line-height:1;
    padding:10px 0 20px;
    margin-bottom:4px;
    border:0;
    border-radius:50%;
    box-sizing:border-box
}
.headline .tools .btn.pic .icon{
    display:block
}
.headline .tools .btn.pic .icon:before{
    vertical-align:top
}
@media (max-width: 900px){
    .headline .tools .btn.pic .icon:before{
        font-size:25px
    }
}
.headline .tools .btn.pic[data-count]:after{
    content:attr(data-count);
    position:absolute;
    bottom:5px;
    left:0;
    display:block;
    width:100%;
    line-height:18px;
    font-size:11px;
    color:#fff;
    white-space:nowrap
}
.headline .tools .btn.pic[data-count='']:before,.headline .tools .btn.pic[data-count='']:after{
    display:none
}
.headline .tools .btn.pic.like,.headline .tools .btn.pic.print{
    padding:0
}
.headline .tools .btn.pic.like{
    margin-bottom:5px;
    color:#000;
    border:1px solid #b7b7b7;
    background-color:#fff;
    transition:opacity 0.5s
}
.headline .tools .btn.pic.like .icon:before{
    font-size:25px;
    transition:all 0.5s
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.like .icon:before{
        line-height:inherit
    }
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.like .icon-star-line:before{
        font-size:20px
    }
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.like:hover,.headline .tools .btn.pic.like.active{
        background-color:#fff
    }
}
.headline .tools .btn.pic.like:hover{
    color:#06a7e2
}
.headline .tools .btn.pic.like.active{
    color:#fff
}
.headline .tools .btn.pic.like.active .icon-star{
    color:#fff
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.like.active .icon-star{
        color:#06a7e2
    }
}
.headline .tools .btn.pic.like.active .icon-star:before{
    color:#06a7e2
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.like.active .icon-star:before{
        font-size:20px
    }
}
.headline .tools .btn.pic.like.active-like{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    z-index:2;
    pointer-events:none
}
.headline .tools .btn.pic.like.active-like .icon:before{
    color:#06a7e2;
    transform:scale(6)
}
.headline .tools .btn.pic.print{
    line-height:54px;
    margin-bottom:14px;
    color:#101820;
    border:1px solid #b7b7b7;
    background-color:#fff
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.print{
        display:none
    }
}
.headline .tools .btn.pic.print:hover{
    color:#06a7e2
}
.headline .tools .btn.pic.print .icon:before{
    font-size:25px
}
.headline .tools .btn.pic.toggle{
    display:none;
    background-color:#40464d;
    border-radius:0 0 3px 3px
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.toggle{
        width:auto;
        padding:0;
        pointer-events:none
    }
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.toggle .icon{
        display:inline-block
    }
}
.headline .tools .btn.pic.toggle .icon-toggle:before{
    content:'\e011';
    transform:rotate(90deg)
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.toggle .icon-toggle:before{
        content:'\e031';
        font-size:20px;
        font-weight:bold;
        transform:rotate(0)
    }
}
.headline .tools .btn.pic.toggle.active .icon-toggle:before{
    content:'\e006';
    transform:rotate(0)
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.toggle.load{
        pointer-events:all
    }
}
@media (max-width: 1310px){
    .headline .tools .btn.pic.like,.headline .tools .btn.pic.toggle{
        display:inline-block;
        min-width:35px;
        height:35px;
        min-height:35px;
        line-height:35px;
        margin:0;
        color:#101820;
        vertical-align:middle;
        border:0;
        background-color:transparent
    }
}
@media (max-width: 1310px){
    .headline .tools .btn.pic .total-count-pc{
        display:inline-block;
        line-height:1.2;
        margin-left:10px;
        font-size:14px;
        letter-spacing:0
    }
}
@media (max-width: 900px){
    .headline .tools .total .total-mobile{
        display:block;
        margin-top:14px;
        text-align:center;
    }
    .headline .tools .total .total-pc{
        display: none !important;
    }
    .headline .too
}
@media (min-width:901px){
    .headline .tools .total .total-pc{
        display:block;
        margin-top:14px;
        text-align:center;
    }
    .headline .tools .total .total-mobile{
        display: none !important;
    }
}
@media (max-width:767px){
    .headline .tools .btn.pic .total-count{
        display:inline-block;
        line-height:1.2;
        margin-left:10px;
        font-size:14px;
        letter-spacing:0
    }
    .headline .tools .btn.pic .total-count-pc{
        display: none !important;
    }
}
@media (min-width:768px){
    .headline .tools .btn.pic .total-count-pc{
        display:inline-block;
        line-height:1.2;
        margin-left:10px;
        font-size:14px;
        letter-spacing:0
    }
    .headline .tools .btn.pic .total-count{
        display: none !important;
    }
}
.headline .tools .btn span{
    letter-spacing:-100px;
    display:none
}
.headline .tools .total{
    display:block;
    margin-top:14px;
    text-align:center
}
.headline .tools .total strong{
    display:block
}
.headline .tools .copy-clipboard{
    display:none
}
@media (max-width: 1310px){
    .headline .tools .copy-clipboard{
        display:block
    }
}
.headline .tools .mobile{
    opacity:0.5;
    pointer-events:none
}
.headline .tools .mobile.pc{
    opacity:1;
    pointer-events:auto
}
.detail .headline{
    position:relative;
    padding:65px 0 30px
}
@media (max-width: 900px){
    .detail .headline{
        position:relative;
        padding:30px 20px 20px;
        border-top:5px solid #f7f7f7
    }
}
.detail .headline .title{
    font-size:38px;
    font-weight:600;
    line-height:1.1;
    letter-spacing:-.5px
}
@media (max-width: 900px){
    .detail .headline .title{
        line-height:1.3;
        font-size:21px
    }
}
.detail .headline .meta{
    display:block;
    margin-top:15px;
    font-size:15px;
    color:#585858
}
@media (max-width: 900px){
    .detail .headline .meta{
        margin-top:15px;
        font-size:12.5px
    }
}
.detail .headline .meta>span:after{
    content:'';
    display:inline-block;
    width:1px;
    height:9px;
    margin:0 5px 0 10px;
    border-left:1px solid #b2b2b2;
    vertical-align:-2px
}
.detail .headline .meta>span:last-child:after{
    display:none
}
.detail .headline .meta span span{
    font:0/0 a;
    letter-spacing:-100px
}
.detail .headline .meta span time,.detail .headline .meta span strong{
    display:inline-block;
    font-weight:normal;
    vertical-align:middle
}
.detail .headline .meta .icon{
    letter-spacing:0;
    vertical-align:middle
}
.detail .headline .meta .icon:before{
    color:#a6a6a6
}
.detail .headline .meta .icon-viewer:before{
    color:#24b1e4
}
.detail .headline .meta .participant-wrap strong{
    color:#24b1e4;
    font-weight:normal;
    vertical-align:baseline
}
.detail .headline .meta .active .icon:before{
    content:'\e033';
    color:#24b1e4
}
@media (max-width: 900px){
    .detail .headline .meta .duration{
        display:block
    }
}
@media (max-width: 900px){
    .detail .headline .meta .duration:after{
        display:none
    }
}
.detail .headline .location{
    font-size:15px;
    margin-bottom:20px
}
.detail .headline .location:after{
    content:'';
    display:block;
    clear:both
}
.detail .headline .location li{
    float:left
}
.detail .headline .location li .icon-home{
    line-height:22px
}
.detail .headline .location li .icon-arrow-right:before{
    font-size:9px;
    margin:0 8px
}
.detail .headline .countdown time{
    color:#06a7e2
}
.detail .headline .countdown time:before{
    content:'';
    display:inline-block;
    width:18px;
    height:18px;
    margin-right:10px;
    background-image:url("../images/common/event_icon.png");
    background-size:100% 100%;
    background-repeat:no-repeat
}
@media (max-width: 900px){
    .detail .headline .countdown time:before{
        width:12px;
        height:12px;
        margin-right:5px
    }
}
.detail .headline .countdown time span{
    display:inline
}
.detail .headline .countdown span{
    display:none
}
@media (max-width: 900px){
    .group.products{
        overflow:hidden
    }
}
.group.products h4 a{
    position:relative;
    display:inline-block;
    margin-left:30px;
    font-size:15px;
    font-weight:normal;
    color:#585858
}
@media (max-width: 900px){
    .group.products h4 a{
        margin-left:20px;
        font-size:11px
    }
}
.group.products h4 a:before{
    content:'';
    position:absolute;
    top:5px;
    left:-15px;
    display:block;
    width:1px;
    height:12px;
    background-color:#ccc
}
@media (max-width: 900px){
    .group.products h4 a:before{
        top:3px;
        left:-10px
    }
}
.group.products h4 a .icon{
    margin-left:8px
}
.group.products h4 a .icon:before{
    font-size:9px
}
@media (max-width: 900px){
    .group.products .wrap-slider-product .slick-list{
        margin:0 0 0 -8px;
        overflow:visible
    }
}
@media (max-width: 900px){
    .group.products .wrap-slider-product .slick-slide{
        padding:0 8px
    }
}
.group.products .slider-product .item{
    border:1px solid #e1e1e1
}
.group.products .slider-product .item:after{
    content:'';
    display:block;
    clear:both
}
.group.products .slider-product .item .thumb{
    display:block;
    float:left;
    min-width:158px;
    height:158px;
    margin-right:10px;
    border:0;
    text-align:center;
    white-space:nowrap;
    box-sizing:border-box
}
@media (max-width: 900px){
    .group.products .slider-product .item .thumb{
        width:119px;
        min-width:0;
        height:119px;
        border:0
    }
}
@media (max-width: 320px){
    .group.products .slider-product .item .thumb{
        width:100px;
        height:100px
    }
}
.group.products .slider-product .item .name{
    height:60px;
    margin:20px 20px 0px 0;
    font-size:20px;
    font-weight:normal;
    color:#585858;
    -webkit-line-clamp:2;
    overflow:hidden
}
@media (max-width: 900px){
    .group.products .slider-product .item .name{
        margin-top: 0;
        padding-top: 10px;
        height:40px;
        font-size:12.5px;
        font-weight:500
    }
}
@media (max-width: 320px){
    .group.products .slider-product .item .name{
        margin:10px 50px 5px 0
    }
}

.group.products .slider-product .item .price{
    font-size:20px;
    color:#585858
}
@media (max-width: 900px){
    .group.products .slider-product .item .price{
        font-size:12.5px
    }
}
.group.products .slider-product .item .price em{
    margin-right:2px;
    color:#101820
}
.group.products .slider-product .item .price strong{
    margin-right:2px;
    font-weight:normal;
    color:#06a7e2
}
.group.products .slider-product .item .btn{
    width:100%;
    min-width: initial;
    height:36px;
    min-height: initial;
    line-height:34px;
    color:#06a7e2;
    border-radius:4px;
    border-color:#ebebeb;
    background-color:#fff
}
@media (max-width: 900px){
    .group.products .slider-product .item .btn{
        width:100%;
        min-width:0;
        height:35px;
        min-height:0;
        line-height:33px
    }
}
@media (max-width: 900px){
    .group.products .slider-product .item .btn.pic .icon:before{
        font-size:16px
    }
}
.group.products .slider-product .item .btn.active .icon:before{
    content:'\e019';
    color:#ee1521;
}
.group.products .slider-product .item .btns{
    position:absolute;
    left:auto;
    right:35px;
    bottom:35px
}
@media (max-width: 900px){
    .group.products .slider-product .item .btns{
        bottom:15px;
        right:15px
    }
}
@media (max-width: 320px){
    .group.products .slider-product .item .btns{
        bottom:5px;
        right:5px
    }
}
.group.products .slider-product .item .btns .col{
    width:36px;
    margin-left:6px;
    box-sizing:border-box
}
@media (max-width: 900px){
    .group.products .slider-product .item .btns .col{
        width:36px
    }
}
@media (max-width: 320px){
    .group.products .slider-product .item .btns .col{
        float:none
    }
}
@media (max-width: 320px){
    .group.products .slider-product .item .btns .btn{
        margin-top:6px
    }
}
.list{
    padding-bottom:30px
}
@media (max-width: 900px){
    .list{
        padding-bottom:50px
    }
}
.list-grid{
    font-size:0;
    padding-bottom:0
}
@media (max-width: 900px){
    .list-grid{
        letter-spacing:-1px
    }
}
.list-grid .inner{
    max-width:1150px
}
.list-grid .inner:after{
    content:'';
    display:block;
    clear:both
}
.list-grid .article{
    display:inline-block;
    width:33.3334%;
    max-width:451px;
    padding:12.5px 15px;
    vertical-align:top;
    box-sizing:border-box
}
@media (max-width: 900px){
    .list-grid .article{
        width:50%;
        max-width:inherit;
        min-height:inherit;
        padding:0;
        letter-spacing:normal
    }
    .list-grid .article:nth-of-type(2n-1){
        padding:0 15px 0 0
    }
    .list-grid .article:nth-of-type(2n){
        padding:0 0 0 15px
    }
}
.list-grid .article .content{
    position:relative;
    padding:15px 0 25px
}
@media (max-width: 900px){
    .list-grid .article .content{
        padding:10px 0 20px
    }
}
.list-grid .article .title{
    max-height:50px;
    margin:0 0 10px
}
@media (max-width: 900px){
    .list-grid .article .title{
        margin-bottom:5px
    }
}
@media (max-width: 900px){
    .list-grid .article .tags{
        display:none
    }
}
.list-grid .article .description{
    display:none
}
.list-ahead a{
    display:table;
    table-layout:fixed;
    width:100%
}
.list-ahead a:after{
    display:none
}
.list-ahead a:visited .meta .count .icon:before{
    color:#24b1e4
}
@media (max-width: 900px){
    .list-ahead .inner{
        padding:0
    }
}
.list-ahead .article{
    padding:30px 0;
    border-bottom:1px solid #e6e6e6
}
@media (max-width: 900px){
    .list-ahead .article{
        padding:15px
    }
}
.list-ahead .article:last-child{
    padding-bottom:0;
    border-bottom:none
}
.list-ahead .article .img{
    display:table-cell;
    width:26.42857142857143%
}
@media (max-width: 900px){
    .list-ahead .article .img{
        width:48%
    }
}
.list-ahead .article .img .running-time{
    left:auto;
    bottom:4px;
    right:4px;
    margin-left:auto
}
.list-ahead .article .img .running-time strong{
    transform:translateX(0)
}
.list-ahead .article .content{
    display:table-cell;
    width:73.57142857142857%;
    padding:0 40px;
    vertical-align:middle;
    box-sizing:border-box
}
@media (max-width: 900px){
    .list-ahead .article .content{
        width:52%;
        padding:0 0 0 10px
    }
}
.list-ahead .article .content:before{
    display:none
}
.list-ahead .article .title{
    display:block;
    margin-bottom:16px;
    white-space:nowrap
}
@media (max-width: 900px){
    .list-ahead .article .title{
        display:-webkit-box;
        min-height:33px;
        margin-bottom:5px;
        padding:0;
        font-size:14px;
        -webkit-line-clamp:2;
        white-space:normal
    }
}
.list-ahead .article .description{
    max-height:46px;
    font-size:18px;
    line-height:1.25
}
@media (max-width: 900px){
    .list-ahead .article .description{
        display:block;
        max-height:27px;
        margin:0 0 5px 0;
        font-size:11px;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden
    }
}
.list-ahead .article .meta{
    display:block;
    margin-top:43px
}
@media (max-width: 900px){
    .list-ahead .article .meta{
        margin-top:0
    }
}
@media (max-width: 900px){
    [data-loc="go"] .list-ahead .article .label{
        top:3px;
        left:4px
    }
}
.list-ahead .article .running-time{
    left:0;
    bottom:0;
    right:inherit;
    margin-left:-6px
}
@media (max-width: 900px){
    .list-ahead .article .running-time{
        left:0;
        margin-left:-1px;
        margin-bottom:1px
    }
}
.list-ahead .article .running-time strong{
    display:block;
    transform:translateX(-100%)
}
.list-ahead .article .duration-watched .running-time{
    margin-bottom:12px
}
@media (max-width: 900px){
    .list-event{
        margin-bottom:20px
    }
}
.list-event .article{
    margin-top:25px;
    padding:0 15px
}
@media (max-width: 900px){
    .list-event .article{
        width:100%;
        margin-top:15px;
        padding:0
    }
}
@media (max-width: 900px){
    .list-event .article:nth-child(2n-1),.list-event .article:nth-child(2n){
        padding:0
    }
}
@media (max-width: 900px){
    .list-event .article:first-of-type{
        margin-top:0
    }
}
.list-event .article.participation:after{
    content:'';
    position:absolute;
    top:0;
    right:36px;
    display:block;
    width:17px;
    height:20px;
    background-image:url("../images/common/icon_event.png");
    background-repeat:no-repeat;
    background-position:-40px -25px
}
@media (max-width: 900px){
    .list-event .article.participation:after{
        right:13px
    }
}
.list-event .article.readonly:before{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:2
}
.list-event .article>a{
    padding:200px 22px 75px;
    border:1px solid #e1e1e1;
    text-align:center
}
@media (max-width: 900px){
    .list-event .article>a{
        height:133px;
        padding:15px 133px 15px 15px;
        text-align:left;
        box-sizing:border-box
    }
}
.list-event .article a:hover .img:after{
    display:none
}
.list-event .article a:hover img{
    transform:none
}
.list-event .article .content{
    position:static;
    padding:0
}
@media (max-width: 900px){
    .list-event .article .content{
        position:static;
        padding-top:7px;
        padding-bottom:0
    }
}
@media (max-width: 900px){
    .list-event .article .title{
        position:static;
        margin-bottom:20px;
        font-size:16px
    }
}
@media (max-width: 900px){
    .list-event .article .img{
        position:absolute;
        top:15px;
        right:15px;
        bottom:15px;
        width:101px;
        height:auto
    }
}
@media (max-width: 900px){
    .list-event .article .img img{
        max-height:100%;
        vertical-align:bottom
    }
}
.list-event .img{
    width:200px;
    height:150px;
    margin:0 auto;
    border:none
}
.list-event .img:before{
    padding-bottom:100%
}
.list-event .img span{
    white-space:nowrap
}
.list-event .img span:after{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
}
.list-event .img img{
    position:static;
    top:auto;
    left:auto;
    transform:none;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    min-height:0;
    vertical-align:middle
}
.list-event .title{
    position:absolute;
    top:72px;
    left:22px;
    right:22px;
    word-break:keep-all
}
.list-event .status{
    position:absolute;
    top:35px;
    left:0;
    right:0;
    font-size:15px;
    color:#585858
}
@media (max-width: 900px){
    .list-event .status{
        position:static;
        font-size:11px
    }
}
.list-event .status strong{
    color:#06a7e2
}
@media (max-width: 900px){
    .list-event .status strong{
        font-weight:normal
    }
}
.list-event .countdown{
    color:#06a7e2;
    font-weight:bold
}
.list-event .countdown:after{
    content:'';
    display:inline-block;
    width:1px;
    height:10px;
    margin:0 9px;
    background-color:#878b8f
}
.list-event .btns{
    position:absolute;
    left:0;
    bottom:25px;
    right:0;
    text-align:center;
    z-index:1
}
@media (max-width: 900px){
    .list-event .btns{
        bottom:15px;
        padding-left:15px;
        text-align:left
    }
}
@media (max-width: 900px){
    .list-event .btns .end{
        height:28px;
        min-height:0;
        line-height:26px;
        padding:0 12px;
        font-size:12px
    }
}
.list-event .end{
    padding:0 20px;
    min-height:40px;
    line-height:38px;
    font-size:18px;
    color:#06a7e2;
    border:1px solid #06a7e2;
    border-radius:3px;
    box-sizing:border-box
}
.list-event .info{
    margin-bottom:5px;
    font-size:15px
}
@media (max-width: 900px){
    .list-event .info li{
        margin:0;
        font-size:11px
    }
}
@media (max-width: 900px){
    .list-event .info li:first-child{
        margin-bottom:3px
    }
}
.list-event .info .period{
    position:absolute;
    top:155px;
    left:0;
    right:0;
    color:#585858;
    font-size:18px
}
@media (max-width: 900px){
    .list-event .info .period{
        position:relative;
        top:auto;
        font-size:11px
    }
}
.list-event .info .period:before{
    content:'';
    position:absolute;
    top:-16px;
    left:50%;
    display:block;
    width:30px;
    height:1px;
    margin-left:-15px;
    background-color:#b7b7b7
}
@media (max-width: 900px){
    .list-event .info .period:before{
        top:-10px;
        left:0;
        width:15px;
        margin-left:0
    }
}
.list-event .info .period strong{
    display:none
}
.list-event .info .winners{
    position:absolute;
    left:22px;
    bottom:25px;
    right:22px;
    min-height:40px;
    line-height:38px;
    font-size:18px;
    color:#101820;
    border:1px solid #ebebeb;
    background-color:#fafafa
}
@media (max-width: 900px){
    .list-event .info .winners{
        display:none
    }
}
.list-event .info .winners strong,.list-event .info .winners span{
    position:relative;
    z-index:1
}
.list-event .info .winners strong{
    font-weight:normal
}
.list-event .info .winners i{
    position:absolute;
    top:0;
    left:0;
    display:block;
    height:100%;
    background-color:#d8f1fa
}
.list-event .end-event a{
    background-color:#fafafa
}
.list-event .end-event a:hover .title{
    color:#aaa
}
.list-event .end-event .info .period{
    color:#999
}
@media (max-width: 900px){
    .list-event .end-event .info .period{
        display:none
    }
}
.list-event .end-event .info .winners{
    display:none
}
.list-event .end-event .status{
    color:#999
}
.list-event .end-event .status .close{
    display:inline-block;
    margin-top:-3px;
    padding:0 6px;
    font-size:14px;
    color:#fff;
    border-radius:2px;
    background-color:#c9c9c9;
    vertical-align:middle
}
@media (max-width: 900px){
    .list-event .end-event .status .close{
        font-size:11px
    }
}
.list-event .end-event .title{
    color:#aaa
}
.list-event ~ .pagination .inner{
    border-top:0
}
.list-my .label-vod span{
    width:50px;
    height:50px
}
.list-my .label-vod span:before{
    width:24px;
    height:29px;
    background-size:24px auto
}
@media (max-width: 900px){
    .list-my .article{
        padding-left:35px
    }
}
.list-my .article:last-child{
    padding-bottom:30px
}
.list-my .article .img{
    width:14.28571428571429%
}
.list-my .article .content{
    width:85.71428571428571%
}
.list-my .article .content .description{
    display:none
}
.list-my .article .running-time{
    margin:0 0 1px -1px
}
.list-my .article .running-time strong{
    font-size:11px
}
.list-share .article{
    margin-bottom:125px
}
@media (max-width: 900px){
    .list-share .article{
        width:100%;
        margin-top:0;
        padding:0
    }
}
.list-share .article:hover .btn-delete{
    display:block
}
@media (max-width: 900px){
    .list-share .article:nth-child(2n-1),.list-share .article:nth-child(2n){
        padding:0
    }
}
@media (max-width: 900px){
    .list-share .article:first-of-type{
        margin-top:0
    }
}
.list-share .article>a:hover .content:before{
    height:100%
}
@media (max-width: 900px){
    .list-share .article>a .title{
        max-width:100%;
        font-size:18px
    }
}
.list-share .article .content{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    padding:0 0 0 20px;
    background-color:rgba(0,0,0,0.3);
    box-sizing:border-box
}
@media (max-width: 900px){
    .list-share .article .content{
        padding:0 0 0 20px
    }
}
.list-share .article .content:before{
    content:'';
    display:inline-block;
    position:static;
    width:0;
    height:100%;
    background-color:transparent;
    vertical-align:middle
}
.list-share .article .title{
    position:absolute;
    left:0;
    bottom:-90px;
    display:inline-block;
    display:-webkit-inline-box;
    height:50px;
    margin:0;
    vertical-align:middle;
    font-size:18px;
    font-weight:normal
}
.list-share .article .amount{
    position:absolute;
    right:0;
    bottom:0;
    width:100%;
    height:40px;
    line-height:40px;
    color:#fff;
    background-color:rgba(0,0,0,0.6);
    text-align:center
}
.list-share .article .amount:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
}
.list-share .article .amount:after{
    display:none
}
.list-share .article .amount>span{
    position:relative;
    font:inherit;
    float:left;
    width:33.3334%;
    height:100%
}
.list-share .article .amount>span:before{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    display:block;
    width:1px;
    height:12px;
    margin-top:-6px;
    background-color:rgba(255,255,255,0.3)
}
.list-share .article .amount>span:first-child:before{
    display:none
}
.list-share .article .amount strong{
    display:inline-block;
    height:100%;
    font-weight:300;
    vertical-align:top
}
.list-share .article .amount strong span,.list-share .article .amount strong .icon{
    display:inline-block
}
.list-share .article .amount strong span{
    font:inherit;
    letter-spacing:0
}
.list-share .article .amount strong .icon{
    margin:-2px 10px 0 0
}
.list-share .article .amount strong .icon:before{
    color:#fff;
    font-size:12px
}
.list-share .article .amount .label{
    display:none
}
.list-share .article .meta{
    display:block;
    margin-top:10px;
    margin-left:-20px;
    color:#101820
}
@media (max-width: 900px){
    .list-share .article .meta{
        font-size:15px
    }
}
.list-share .article .meta strong{
    font-weight:300
}
@media (max-width: 900px){
    .list-share .article .meta>span:first-child{
        margin-bottom:0
    }
}
.list-share .article .meta .status span,.list-share .article .meta .date span{
    font:0/0 a
}
.list-share .article .meta .status{
    display:inline-block;
    line-height:19px;
    padding:0 10px;
    font-weight:300;
    color:#fff;
    border-radius:2px
}
.list-share .article .meta .status:after{
    display:none
}
.list-share .article .meta .status.receive{
    background-color:#e655a5
}
.list-share .article .meta .status.send{
    background-color:#06a7e2
}
@media (max-width: 900px){
    .list-share .article .meta .date{
        display:inline-block
    }
}
@media (max-width: 900px){
    .list-share .article .meta .date:before{
        background-color:transparent
    }
}
.list-share .article .check-item{
    top:29px;
    left:29px;
    bottom:auto;
    width:auto
}
@media (max-width: 900px){
    .list-share .article .check-item{
        top:10px;
        left:10px
    }
}
.list-share .article .re-share{
    position:absolute;
    right:15px;
    bottom:-17px
}
@media (max-width: 900px){
    .list-share .article .re-share{
        display:block;
        bottom:-30px;
        opacity:1
    }
}
.list-share .article .re-share strong{
    font-family:'Spoqa Han Sans', sans-serif;
    font-size:15px;
    font-weight:normal;
    vertical-align:middle;
    margin-left:4px
}
.list-share .article .re-share .icon{
    vertical-align:middle
}
.list-share .article .re-share .icon:before{
    font-size:22px
}
.list-share .btn-delete{
    display:none;
    position:absolute;
    right:15px;
    bottom:-17px;
    line-height:19px;
    font-size:14px
}
@media (max-width: 900px){
    .list-share .btn-delete{
        display:block;
        bottom:-30px;
        opacity:1
    }
}
.list-share .btn-delete:hover{
    display:block
}
.list-share .btn-delete .icon:before{
    font-size:11px;
    margin-right:4px
}
@media (max-width: 900px){
    .list-latest,.list-my{
        padding-left:20px;
        padding-right:20px
    }
}
.list-latest .article,.list-my .article{
    padding-left:52px
}
.list-latest .article:hover .btn-drag,.list-my .article:hover .btn-drag{
    opacity:1
}
@media (max-width: 900px){
    .list-latest .article,.list-my .article{
        padding-left:35px;
        padding-right:10px
    }
}
@media (max-width: 900px){
    .list-latest .article .meta,.list-my .article .meta{
        margin-top:0;
        font-size:10px;
        letter-spacing:-1px
    }
}
@media (max-width: 900px){
    .list-latest .article .content,.list-my .article .content{
        padding-right:0
    }
}
.list-latest .placeholder,.list-my .placeholder{
    height:159px;
    border:1px dashed #ccc;
    background-color:#f9f9f9
}
.list-latest .btn-drag,.list-my .btn-drag{
    position:absolute;
    top:-1px;
    right:0;
    bottom:-1px;
    width:27px;
    border:1px solid #a6a6a6;
    background-color:#fff;
    opacity:0;
    text-align:center;
    transition:opacity ease .2s
}
@media (max-width: 900px){
    .list-latest .btn-drag,.list-my .btn-drag{
        display:none
    }
}
.list-latest .article:last-child{
    padding-bottom:30px
}
.list-latest .ui-sortable{
    position:static
}
@media (min-width: 1024px){
    .recent-list{
        position:absolute;
        top:431px;
        left:50%;
        width:190px;
        margin-left:-770px;
        z-index:10
    }
}
@media (max-width: 900px){
    .recent-list{
        position:relative;
        margin-bottom:50px;
        padding:0 20px 40px;
        border-top:5px solid #f7f7f7
    }
}
@media (min-width: 1024px){
    .recent-list.show .wrap{
        opacity:1;
        transform:translateX(0);
        pointer-events:auto
    }
}
@media (min-width: 1024px){
    .recent-list.show .toggle{
        top:0;
        left:-35px;
        width:36px;
        height:50px;
        border-radius:3px 0 0 3px
    }
}
@media (min-width: 1024px){
    .recent-list.show .toggle:before{
        border-width:5px 0 5px 7px;
        border-color:transparent transparent transparent #101820
    }
}
@media (min-width: 1024px){
    .recent-list.show .toggle .icon{
        display:none
    }
}
@media (max-width: 1023px){
    .recent-list h3 a{
        position:relative;
        display:inline-block;
        margin-left:30px;
        font-size:15px;
        font-weight:normal;
        color:#585858
    }
}
@media (max-width: 1023px){
    .recent-list h3 a:before{
        content:'';
        position:absolute;
        top:5px;
        left:-15px;
        display:block;
        width:1px;
        height:12px;
        background-color:#ccc
    }
}
@media (max-width: 1023px){
    .recent-list h3 a .icon{
        margin-left:8px
    }
}
@media (max-width: 1023px){
    .recent-list h3 a .icon:before{
        font-size:9px
    }
}
@media (max-width: 900px){
    .recent-list .inner{
        padding:0
    }
}
@media (max-width: 900px){
    .recent-list .list{
        padding-bottom:0
    }
}
@media (min-width: 1024px){
    .recent-list .list-grid{
        padding-top:0
    }
}
@media (min-width: 1024px){
    .recent-list .more{
        display:block;
        height:36px;
        line-height:36px;
        font-size:16px;
        border-top:1px solid #bfbfbf;
        text-align:center
    }
}
@media (min-width: 1024px){
    .recent-list .more .icon{
        margin-left:3px
    }
}
@media (min-width: 1024px){
    .recent-list .more .icon:before{
        font-size:9px
    }
}
@media (min-width: 1024px){
    .recent-list .wrap{
        position:relative;
        padding:0 0 36px;
        border:1px solid #bfbfbf;
        background-color:#fff;
        opacity:0;
        transform:translateX(100%);
        transition:transform 0.3s, opacity 0.3s;
        pointer-events:none
    }
}
@media (min-width: 1024px){
    .recent-list .wrap ul{
        margin:14px
    }
}
@media (min-width: 1024px){
    .recent-list .wrap li+li+li ~ .article{
        display:none
    }
}
@media (max-width: 900px){
    .recent-list .wrap li+li+li ~ .article{
        display:inline-block
    }
}
@media (min-width: 1024px){
    .recent-list .wrap .article{
        position:relative;
        display:block;
        width:auto;
        max-width:none;
        margin-top:12px;
        padding:0
    }
}
@media (min-width: 1024px){
    .recent-list .wrap .article:first-child{
        margin-top:0
    }
}
@media (min-width: 1024px){
    .recent-list .wrap .article a:hover:after{
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        width:336px;
        border:2px solid #06a7e2;
        box-sizing:border-box
    }
}
@media (min-width: 1024px){
    .recent-list .wrap .article a:hover .title{
        display:block;
        color:#000
    }
}
@media (min-width: 1024px){
    .recent-list .wrap .more{
        position:absolute;
        bottom:0;
        left:0;
        width:100%
    }
}
@media (min-width: 1024px){
    .recent-list .wrap .count,.recent-list .wrap .like,.recent-list .wrap .date{
        display:none
    }
}
@media (min-width: 1024px){
    .recent-list .article .content{
        position:static;
        padding:0
    }
}
@media (min-width: 1024px){
    .recent-list .article .title{
        position:absolute;
        top:0;
        left:160px;
        bottom:0;
        display:none;
        width:175px;
        max-height:none;
        margin-bottom:0;
        padding:13px 15px;
        font-size:15px;
        font-weight:normal;
        background-color:#fff;
        background-color:rgba(255,255,255,0.92);
        box-sizing:border-box
    }
}
@media (min-width: 1024px){
    .recent-list .article .running-time{
        bottom:4px
    }
}
@media (min-width: 1024px){
    .recent-list .title-recent{
        margin:14px;
        font-size:18px
    }
}
@media (max-width: 1023px){
    .recent-list .title-recent{
        max-width:1120px;
        margin:0 auto;
        font-size:25px;
        font-weight:600;
        padding:30px 0 0;
        border-top:1px solid #e1e1e1
    }
}
@media (max-width: 900px){
    .recent-list .title-recent{
        margin:0 20px 0 0;
        border-top:0;
        font-size:17.5px
    }
}
.recent-list .title-recent>.icon{
    vertical-align:middle
}
@media (max-width: 1023px){
    .recent-list .title-recent>.icon{
        display:none
    }
}
@media (max-width: 900px){
    .recent-list .title-recent .more{
        position:absolute;
        left:20px;
        right:20px;
        bottom:0;
        height:40px;
        line-height:38px;
        margin:0;
        border:1px solid #e1e1e1;
        border-radius:3px;
        text-align:center;
        box-sizing:border-box
    }
}
@media (max-width: 900px){
    .recent-list .title-recent .more:before{
        display:none
    }
}
@media (min-width: 1024px){
    .recent-list .toggle{
        position:absolute;
        left:117px;
        top:0;
        width:73px;
        height:50px;
        font:0/0 a;
        border:1px solid #bfbfbf;
        border-radius:3px;
        text-align:center;
        background-color:#fff;
        transition:all 0.3s
    }
}
@media (max-width: 1023px){
    .recent-list .toggle{
        display:none
    }
}
@media (min-width: 1024px){
    .recent-list .toggle:before{
        content:'';
        display:inline-block;
        vertical-align:middle;
        border-width:5px 7px 5px 0;
        border-style:solid;
        border-color:transparent #101820 transparent transparent;
        transition:all 0.3s
    }
}
@media (min-width: 1024px){
    .recent-list .toggle .icon{
        line-height:1;
        margin-left:10px;
        vertical-align:middle
    }
}
.nav-gnb{
    position:relative;
    margin-top:62px
}
@media (max-width: 900px){
    .nav-gnb{
        margin-top:0
    }
}
.nav-util nav{
    max-width:1120px;
    height:47px;
    text-align:right
}
.nav-util li{
    position:relative;
    display:inline-block;
    line-height:35px
}
.nav-util li:after{
    content:'';
    position:absolute;
    top:50%;
    right:0;
    display:inline-block;
    width:1px;
    height:8px;
    margin-top:-4px;
    background-color:#a5a8aa
}
.nav-util li:last-child:after{
    display:none
}
.nav-util li:last-child>*{
    padding-right:0
}
.nav-util li>*{
    position:relative;
    display:block;
    padding:0 15px 0 11px;
    color:#101820;
    font-weight:400
}
.nav-util li .btn{
    line-height:18px;
    min-height:20px;
    margin-top:-2px;
    margin-left:10px;
    padding:0 6px;
    font-size:12px;
    vertical-align:middle
}
.nav-util li .icon-login:before{
    font-size:9px
}
.nav-util .user-name{
    color:#06a7e2;
    font-weight:300
}
.pagination{
    margin-bottom:60px;
    text-align:center
}
@media (max-width: 900px){
    .pagination{
        margin-bottom:30px
    }
}
.pagination .inner{
    padding-top:30px;
    border-top:1px solid #e6e6e6
}
@media (max-width: 900px){
    .pagination .inner{
        padding:20px 0 0;
        white-space:nowrap
    }
}
.pagination .inner>a{
    display:inline-block;
    width:28px;
    height:28px;
    margin:0 3px;
    font:0/0 a;
    line-height:30px;
    border:1px solid #ccc;
    border-radius:25px;
    vertical-align:middle;
    box-sizing:border-box
}
.pagination .inner>a.active{
    color:#101820
}
.pagination .inner>a.disabled{
    border-color:#cdcdcd;
    pointer-events:none;
    cursor:default
}
.pagination .inner>a.disabled .icon:before{
    opacity:.3
}
@media (max-width: 900px){
    .pagination .inner>.btn-first,.pagination .inner>.btn-last,.pagination .inner>.btn-prev,.pagination .inner>.btn-next{
        display:none
    }
}
.pagination .icon:before{
    content:'';
    display:block;
    width:10px;
    height:10px;
    margin-top:8px;
    background-image:url("../images/common/icon_paging.png")
}
.pagination .icon-paging-first:before{
    background-position:0 0
}
.pagination .icon-paging-prev:before{
    background-position:-10px 0
}
.pagination .icon-paging-next:before{
    background-position:-20px 0
}
.pagination .icon-paging-last:before{
    background-position:-30px 0
}
.pagination ol,.pagination li{
    display:inline-block;
    color:#101820;
    vertical-align:middle;
    font-size:15px;
    line-height:25px
}
.pagination li{
    box-sizing:border-box;
    width:50px;
    padding:0 5px
}
@media (max-width: 900px){
    .pagination li{
        width:30px
    }
    .pagination li:after{
        margin-top:-1px
    }
}
@media (max-width: 320px){
    .pagination li{
        width:35px
    }
}
.pagination li a{
    display:block
}
.pagination li strong{
    display:inline-block;
    color:#06a7e2
}
.pagination .first-page,.pagination .last-page{
    white-space:nowrap;
    width:auto
}
.pagination .first-page a,.pagination .last-page a{
    display:inline-block;
    width:50px
}
.pagination .first-page:after,.pagination .last-page:before{
    content:'\00b7\00b7\00b7';
    color:#b1b1b1;
    letter-spacing:-3px;
    display:inline-block
}
.subject{
    padding:65px 0 15px;
    text-align:center
}
@media (max-width: 900px){
    .subject{
        padding:30px 0 25px;
        border-top:5px solid #f7f7f7
    }
}
.subject h3{
    margin-bottom:10px;
    font-size:38px;
    font-weight:600;
    line-height:1.1
}
@media (max-width: 900px){
    .subject h3{
        margin-bottom:10px;
        font-size:21px
    }
}
.subject small{
    font-size:20px;
    font-weight:300;
    word-break:keep-all
}
@media (max-width: 900px){
    .subject small{
        line-height:1.166666666666667;
        font-size:15px
    }
}
.subject strong{
    color:#06a7e2
}
.subject .keyword{
    display:inline-block;
    color:#101820
}
.keyword:before{
    content:'\2018'
}
.keyword:after{
    content:'\2019'
}
.recommend{
    position:relative;
    padding:40px 0 50px
}
@media (max-width: 900px){
    .recommend{
        padding:30px 0 10px
    }
}
.recommend:before{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:50%;
    width:1120px;
    height:1px;
    margin-left:-560px;
    background-color:#e1e1e1
}
@media (max-width: 1023px){
    .recommend:before{
        left:0;
        right:0;
        width:100%;
        height:5px;
        margin:0;
        background-color:#f7f7f7
    }
}
.recommend .list{
    padding-bottom:0
}
@media (max-width: 900px){
    .recommend .article .meta>span{
        width:auto
    }
}
.title-recommend{
    max-width:1120px;
    margin:0 auto;
    font-size:25px;
    font-weight:600
}
@media (max-width: 900px){
    .title-recommend{
        margin:0 20px 16px;
        font-size:17.5px
    }
}
.result-empty{
    display:flex;
    justify-content:center;
    align-items:center;
    min-width:100%;
    min-height:100%;
    height:calc(100vh - 460px);
    font-size:30px;
    color:#7e7e7e;
    text-align:center
}
@media (max-width: 900px){
    .result-empty{
        font-size:15px
    }
}
.result-empty .inner{
    padding:75px 0 50px;
    border-top:1px solid #e6e6e6
}
@media (max-width: 900px){
    .result-empty .inner{
        padding:30px 0
    }
}
[data-loc="go"] .result-empty{
    min-height:calc(100vh - 479px);
    display:flex;
    align-items:center;
    justify-content:center
}
[data-loc="go"] .result-empty:after{
    content:'';
    min-height:inherit;
    font-size:0
}
.ui-sortable-handle{
    background-color:#fff
}
.ui-sortable-helper{
    box-shadow:5px 5px 50px 10px rgba(0,0,0,0.2)
}
.show-image body:before{
    opacity:0.6
}
.pinch-zoom-container{
    vertical-align:middle;
    overflow:visible !important;
    display:inline-block;
    width:100%
}
.pinch-zoom-container #imageViewer img{
    opacity:1
}
.video-wrapper{
    position:relative;
    padding-bottom:56.25%
}
.video-wrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
#imageViewer{
    display:inline-block;
    margin:0 auto;
    white-space:nowrap;
    box-sizing:border-box
}
#imageViewer,#imageViewer img{
    width:100%;
    vertical-align:middle;
    touch-action:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-user-drag:none
}
#imageViewer img{
    opacity:0;
    transition:opacity 0.3s linear 0.05s
}
.help{
    display:inline-block;
    margin-left:10px;
    font-size:15px;
    color:#585858;
    vertical-align:middle
}
@media (max-width: 900px){
    .help{
        display:none
    }
}
.reply{
    padding:40px 0
}
@media (max-width: 900px){
    .reply{
        padding:20px 0
    }
}
.reply h3{
    font-size:25px;
    font-weight:bold;
    display:none
}
@media (max-width: 900px){
    .reply h3{
        padding-left:20px;
        font-size:17.5px
    }
}
.reply .notice{
    color:#737373
}
.status-select{
    font-size:18px;
    color:#101820
}
@media (max-width: 900px){
    .status-select{
        font-size:15px
    }
}
.status-select span{
    vertical-align:middle
}
.status-select strong{
    font-size:20px;
    color:#06a7e2
}
@media (max-width: 900px){
    .status-select strong{
        font-size:15px
    }
}
.status-select .check-item{
    margin-right:10px
}
.popup{
    position:relative
}
.popup-email{
    padding:30px;
    text-align:center
}
.popup-email label{
    display:block;
    margin:15px 0 7px
}
.popup-email .btns{
    margin-top:30px
}
.popup-print{
    padding-bottom:70px;
    overflow:hidden
}
.popup-print h1{
    padding:20px 0;
    text-align:center;
    border-bottom:1px solid #d7d7d7
}
.popup-print .btn-print{
    position:absolute;
    top:25px;
    right:30px;
    z-index:1
}
.popup-print .addition,.popup-print .tools,.popup-print #commentBody,.popup-print .wrap-slider-card .info{
    display:none
}
.popup-print .slider-card .slick-track{
    transform:inherit !important
}
.popup-print .slider-card .slick-track .slick-slide{
    display:block
}
.popup-print .wrap-slider-card .slick-arrow{
    display:none !important
}
.popup-print .current-product{
    display:none
}
.popup-print .player:after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    width:34px;
    height:39px;
    margin:0 auto;
    transform:translate(-50%, -50%);
    background-image:url("../images/common/label_play.png")
}
.popup-print .player .vjs-poster{
    display:none
}
.popup-print .player .vjs-loading-spinner{
    display:none
}
.popup-print .player .video-player{
    display:none
}
.popup-print .vod-download{
    display:none
}
.popup-share{
    position:relative;
    height:100%;
    min-height:100%;
    margin:0 auto
}
.popup-share main{
    position:relative;
    max-width:1120px;
    min-height:100%;
    padding:191px 0 170px;
    margin:-121px auto -170px;
    box-sizing:border-box
}
@media (max-width: 900px){
    .popup-share main{
        margin-top:-191px
    }
}
@media (max-width: 900px){
    .popup-share .nav-util{
        top:80px;
        right:20px
    }
}
.popup-share>.header{
    position:relative;
    max-width:1120px;
    height:auto !important;
    margin:0 auto;
    padding:35px 30px 35px;
    border-bottom:1px solid #d2d2d2 !important;
    background-color:#fff;
    text-align:center;
    box-sizing:border-box
}
.popup-share>.header h1{
    height:auto !important;
    text-align:center
}
@media (max-width: 900px){
    .popup-share>.header h1 img{
        height:25px;
        vertical-align:middle
    }
}
@media (max-width: 900px){
    .popup-share>.header{
        padding:15px
    }
}
.popup-share .headline{
    position:relative;
    padding:58px 0
}
.popup-share .headline .title{
    padding-right:360px;
    margin-bottom:17px;
    font-size:35px;
    font-weight:bold
}
.popup-share .headline .utils{
    position:absolute;
    top:7px;
    right:0;
    text-align:right
}
.popup-share .headline .utils .btn{
    height:48px;
    line-height:48px;
    margin-bottom:15px;
    font-size:19px;
    font-weight:bold
}
.popup-share .tools .btn{
    display:block
}
.popup-share .whole{
    border-bottom:1px solid #e6e6e6
}
.popup-share .title-whole{
    padding-bottom:20px;
    margin-top:65px;
    font-size:30px;
    font-weight:600;
    border-bottom:1px solid #e6e6e6
}
.popup-share .playlist{
    position:relative;
    padding-right:270px;
    overflow:hidden
}
.popup-share .playlist .play-list{
    color:rgba(255,255,255,0.5);
    position:absolute;
    top:0;
    right:0;
    box-sizing:border-box;
    width:270px;
    height:100%;
    padding-top:68px;
    background-color:#2a2a2a
}
.popup-share .playlist .play-list h3{
    height:68px;
    padding:25px 20px 0;
    margin-top:-68px;
    font-size:18px;
    box-sizing:border-box
}
.popup-share .playlist .play-list li{
    margin-bottom:15px
}
.popup-share .playlist .play-list a{
    display:block;
    padding-left:115px;
    color:rgba(255,255,255,0.82)
}
.popup-share .playlist .play-list a:after{
    content:'';
    display:block;
    clear:both
}
.popup-share .playlist .play-list .toggle{
    display:none
}
.popup-share .playlist .play-list .box-scroll{
    height:100%;
    padding:0 20px
}
.popup-share .playlist .play-list .thumb{
    float:left;
    position:relative;
    width:105px;
    height:59px;
    margin-left:-115px;
    overflow:hidden
}
.popup-share .playlist .play-list .thumb .duration{
    position:absolute;
    right:2px;
    bottom:2px;
    padding:0 4px;
    font-size:11px;
    background-color:rgba(0,0,0,0.7)
}
.popup-share .playlist .play-list .title{
    display:-webkit-box;
    float:left;
    height:42px;
    margin:8px 0 0 0;
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    font-size:15px;
    overflow:hidden
}
.popup-share .playlist .play-list .current .thumb:before{
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:2;
    background-image:url("../images/common/label_play.png");
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size:16px auto
}
.popup-share .playlist .play-list .current .thumb:after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:block;
    background-color:rgba(21,134,196,0.58)
}
.popup-share .playlist .timer{
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:100%;
    color:#fff;
    background-color:rgba(0,0,0,0.5);
    display:none;
    z-index:21
}
.popup-share .playlist .timer>div{
    position:absolute;
    top:50%;
    left:50%;
    width:56%;
    max-width:470px;
    transform:translate(-50%, -50%)
}
.popup-share .playlist .timer .title{
    display:block;
    height:45px;
    margin-right:15px;
    font-size:22px;
    font-weight:bold;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden
}
.popup-share .playlist .timer .image{
    position:relative;
    display:block;
    padding-bottom:56.25%;
    margin-bottom:18px;
    overflow:hidden
}
.popup-share .playlist .timer .image img{
    position:absolute;
    top:0;
    left:0;
    width:100%
}
.popup-share .playlist .timer .summary{
    display:block;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden
}
.popup-share .playlist .timer .canvas{
    position:absolute;
    top:50%;
    left:50%;
    width:95px;
    height:95px;
    margin:-47.5px 0 0 -47.5px;
    border-radius:50%;
    background-color:rgba(0,0,0,0.5)
}
.popup-share .playlist .timer .canvas:after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    display:block;
    width:39px;
    height:39px;
    margin:-19.5px 0 0 -19.5px;
    background-image:url("../images/player/icon_player.png");
    background-repeat:no-repeat;
    background-position:100% 0
}
.popup-share .playlist .timer .canvas canvas{
    width:100%;
    height:100%
}
.popup-share .playlist .timer .close{
    position:absolute;
    top:15px;
    right:0;
    font:0/0 a;
    color:#fff
}
.popup-share .playlist.vjs-next-play .timer{
    display:block
}
.popup-share #footer{
    height:100px;
    margin-top:70px;
    text-align:center
}
.popup-share #footer .inner{
    height:100px
}
.popup-share #footer .inner:after{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
}
.popup-share #footer .copyright{
    display:inline-block;
    padding:0;
    vertical-align:middle
}
@media (max-width: 900px){
    .popup-receive .playlist{
        padding-right:0
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list{
        position:relative;
        width:100%;
        padding-top:55px
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list h3{
        display:none
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list .toggle{
        position:relative;
        display:block;
        width:100%;
        height:55px;
        margin-top:-55px;
        padding:0 20px;
        box-sizing:border-box
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list .toggle strong{
        display:block;
        font-size:13.5px;
        font-weight:normal;
        color:#fff
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list .toggle span{
        color:#aaa;
        font-size:11px
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list .toggle .icon{
        position:absolute;
        top:50%;
        right:20px;
        height:20px;
        margin-top:-10px
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list .toggle .icon:before{
        font-size:17px
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list .box-scroll{
        display:none
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list.active .toggle .icon:before{
        transform:rotate(180deg)
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .play-list.active .box-scroll{
        display:block
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .timer{
        right:0;
        height:0;
        padding-bottom:56.25%
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .timer .title{
        height:35px;
        font-size:18px
    }
}
@media (max-width: 900px){
    .popup-receive .playlist .timer .canvas{
        width:60px;
        height:60px;
        margin:-30px 0 0 -30px
    }
}
@media (max-width: 900px){
    .popup-receive .headline{
        padding-top:30px
    }
}
@media (max-width: 900px){
    .popup-receive .headline .title{
        line-height:1.3;
        padding-right:0;
        font-size:21px
    }
}
@media (max-width: 900px){
    .popup-receive .headline .utils{
        top:auto;
        left:20px;
        right:auto;
        bottom:-42px
    }
}
@media (max-width: 900px){
    .popup-receive .headline .utils p{
        display:none
    }
}
@media (max-width: 900px){
    .popup-receive .headline .utils .btn{
        height:28px;
        line-height:28px;
        margin-bottom:0;
        font-size:12px
    }
}
@media (max-width: 900px){
    .popup-receive .whole{
        margin-top:30px
    }
}
@media (max-width: 900px){
    .popup-receive .title-whole{
        line-height:1.3;
        padding:0 20px;
        font-size:21px
    }
}
.popup-preview .headline .title{
    padding-right:0
}
.popup-receive .playlist.vjs-next-play .vjs-control-bar,.popup-share .playlist.vjs-next-play .vjs-control-bar{
    display:none
}
.popup .playlist .video-player{
    position:relative
}
.popup .playlist .loading-wrap{
    position:absolute;
    top:0;
    left:0;
    z-index:5;
    width:100%;
    height:100%
}
.popup .playlist .loading-main{
    height:100%;
    background-color:rgba(0,0,0,0.8)
}
.slider-visual:hover .slick-arrow{
    opacity:1
}
@media (max-width: 900px){
    .slider-visual:hover .slick-arrow{
        display:none !important
    }
}
.slider-visual .article{
    overflow:hidden
}
.slider-visual .article,.slider-visual .article a,.slider-visual .article a .img{
    height:100%
}
.slider-visual .article a{
    margin:0 auto
}
@media (max-width: 900px){
    .slider-visual .article a{
        max-width:100%
    }
}
@media (max-width: 900px){
    .slider-visual .article a:before,.slider-visual .article a:after{
        display:none
    }
}
.slider-visual .article a:before{
    left:-12.5%;
    width:50%;
    background:linear-gradient(to right, #000 0%, rgba(255,255,255,0) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00ffffff',GradientType=1 )
}
.slider-visual .article a:after{
    right:-12.5%;
    width:20%;
    background:linear-gradient(to right, rgba(255,255,255,0) 0%, #000 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=1 )
}
.slider-visual .article>a:focus .title,.slider-visual .article>a:hover .title{
    color:#fff
}
.slider-visual .article .img{
    width:100%;
    border:0
}
@media (max-width: 900px){
    .slider-visual .article .img{
        width:100%;
        margin:0 auto
    }
}
.slider-visual .article .img:before{
    padding-bottom:32.60416666666667%
}
@media (max-width: 1023px){
    .slider-visual .article .img:before{
        padding-bottom:40%
    }
}
@media (max-width: 900px){
    .slider-visual .article .img:before{
        padding-bottom:56.25%
    }
}
.slider-visual .article .img span{
    left:0;
    right:0;
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat
}
@media (max-width: 900px){
    .slider-visual .article .img span{
        background-position:center bottom
    }
}
.slider-visual .article .img video{
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    width:100%;
    min-height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    transform:translate(-50%, -50%)
}
@media (max-width: 900px){
    .slider-visual .article .img video{
        display:none
    }
}
.slider-visual .article .img .mobile{
    display:none
}
@media (max-width: 900px){
    .slider-visual .article .img .mobile{
        display:block;
        position:absolute;
        top:0;
        left:0
    }
}
.slider-visual .article .content{
    position:absolute;
    left:0;
    right:0;
    bottom:110px;
    margin:0 auto;
    color:#fff;
    text-align:center;
    box-sizing:border-box;
    z-index:1
}
@media (max-width: 1023px){
    .slider-visual .article .content{
        bottom:80px
    }
}
@media (max-width: 900px){
    .slider-visual .article .content{
        bottom:75px
    }
}
.slider-visual .article .content .title{
    max-width:70%;
    max-height:100px;
    margin:0 auto 30px;
    font-size:40px;
    line-height:1.25;
    word-break:keep-all
}
@media (max-width: 900px){
    .slider-visual .article .content .title{
        max-width:80%;
        max-height:70px;
        line-height:1.25;
        margin:0 auto;
        font-size:27.5px
    }
}
.slider-visual .article .content .btn{
    color:#fff;
    font-size:19px;
    background-color:#06a7e2
}
@media (max-width: 900px){
    .slider-visual .article .content .btn{
        display:none
    }
}
.slider-visual .content:before{
    display:none
}
.slider-visual .slick-nav{
    width:100%;
    max-width:1120px;
    height:0;
    margin:0 auto;
    text-align:center;
    box-sizing:border-box
}
@media (max-width: 1023px){
    .slider-visual .slick-nav{
        bottom:25px
    }
}
@media (max-width: 900px){
    .slider-visual .slick-nav{
        position:static
    }
}
.slider-visual .slick-nav>span{
    line-height:0
}
@media (max-width: 900px){
    .slider-visual .btn-pause{
        display:none
    }
}
.slider-main>div{
    display:none
}
.slider-main>div:first-child{
    display:block
}
.slick-slider.slider-main>div{
    display:block
}
.slider-card .slick-track .slick-slide{
    height:100%;
    text-align:center;
    vertical-align:middle
}
.slider-card .slick-slide img{
    display:inline-block;
    max-height:100%
}
.slider-card.clear-slider{
    text-align:center
}
@media (max-width: 900px){
    .slider-card.clear-slider{
        text-align:center
    }
}
.slider-card.clear-slider>div{
    padding:5px 0
}
@media (max-width: 900px){
    .slider-card.clear-slider>div{
        padding:5px 0
    }
}
.slider-card.clear-slider+.info .card-count{
    display:none
}
.slider-event{
    max-width:1120px;
    margin:50px auto
}
@media (max-width: 900px){
    .slider-event{
        margin:20px 20px 0
    }
}
.slider-event .slick-nav{
    bottom:inherit;
    width:100%;
    padding-top:20px;
    text-align:center
}
.slider-event .slick-arrow{
    position:absolute;
    top:50%;
    width:48px;
    height:48px;
    line-height:48px;
    margin-top:-48px
}
.slider-event .slick-arrow:before{
    position:relative;
    font-family:'atomy-icon-font';
    font-size:20px;
    font-weight:200;
    color:#fff;
    z-index:1
}
.slider-event .slick-arrow:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
    background-color:#000;
    opacity:0.25
}
.slider-event .slick-prev{
    left:0
}
.slider-event .slick-prev:before{
    content:'\e004'
}
.slider-event .slick-next{
    right:0
}
.slider-event .slick-next:before{
    content:'\e005'
}
.slider-product .item{
    position:relative
}
.slider-product .item .thumb{
    display:block;
    min-width:200px;
    height:200px;
    text-align:center;
    white-space:nowrap;
    border:1px solid #ebebeb;
    box-sizing:border-box
}
@media (max-width: 900px){
    .slider-product .item .thumb{
        min-width:inherit;
        width:100%;
        height:auto
    }
}
.slider-product .item .thumb:after{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
}
.slider-product .item .thumb img{
    display:inline-block;
    vertical-align:middle;
    max-height:120px
}
.slider-product .item .name{
    margin:50px 0 0;
    -webkit-line-clamp:2;
    height:47px;
    font-weight:normal;
    color:#585858;
    overflow:hidden
}
@media (max-width: 900px){
    .slider-product .item .name{
        margin:10px 0;
        height:40px;
        font-size:13.5px;
        font-weight:500
    }
}
.slider-product .item .btns{
    position:absolute;
    left:0;
    right:0;
    bottom:57px
}
@media (max-width: 900px){
    .slider-product .item .btns{
        bottom:50px
    }
}
.slider-product .item .btns .col{
    width:50%;
    box-sizing:border-box
}
.slider-product .item .btn{
    width:100%;
    height:38px;
    line-height:38px;
    color:#585858;
    border-radius:0;
    border-color:#ebebeb;
    background-color:#fff
}
@media (max-width: 900px){
    .slider-product .item .btn{
        min-height:38px
    }
}
.slider-product .item .btn.active{
    background-color:#24b1e4
}
.slider-product .item .btn.active .icon-heart-line:before{
    color:#fff
}
.slider-product .item .btn .icon-heart-line:before{
    font-size:18px
}
.slider-product .item .icon-cart:before{
    font-size:22px
}
.wrap-slider-visual{
    position:relative;
    overflow:hidden
}
.wrap-slider-visual:after{
    content:'';
    display:block;
    padding-bottom:23.4375%
}
@media (max-width: 900px){
    .wrap-slider-visual:after{
        padding-bottom:37%
    }
}
.wrap-slider-visual .slick-arrow{
    top:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.3s
}
.wrap-slider-visual .slick-arrow:before{
    content:'';
    display:inline-block;
    width:36px;
    height:67px;
    background-image:url("../images/common/arrow_main_visual.png");
    background-repeat:no-repeat;
    background-position:0 50%
}
.wrap-slider-visual .slick-prev{
    right:50%;
    margin-right:560px;
    text-align:right
}
@media (max-width: 1400px){
    .wrap-slider-visual .slick-prev{
        right:100%;
        margin-right:-80px
    }
}
.wrap-slider-visual .slick-prev:before{
    margin-right:85px
}
@media (max-width: 1400px){
    .wrap-slider-visual .slick-prev:before{
        margin-right:10px
    }
}
.wrap-slider-visual .slick-next{
    left:50%;
    margin-left:560px;
    text-align:left
}
@media (max-width: 1400px){
    .wrap-slider-visual .slick-next{
        left:100%;
        margin-left:-80px
    }
}
.wrap-slider-visual .slick-next:before{
    margin-left:85px;
    background-position:100% 50%
}
@media (max-width: 1400px){
    .wrap-slider-visual .slick-next:before{
        margin-left:10px
    }
}
.wrap-slider-visual .slider-visual{
    position:fixed;
    width:100%;
    padding-bottom:23.4375%;
    transition:top 0.3s
}
@media (max-width: 900px){
    .wrap-slider-visual .slider-visual{
        top:50px;
        padding-bottom:37%
    }
    .header-new.fixed ~ .main .wrap-slider-visual .slider-visual{
        top:120px
    }
}
.wrap-slider-visual .slider-visual .slick-list{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.wrap-slider-visual .slider-visual .slick-track{
    height:100%
}
.wrap-slider-visual .slider-visual .img:before{
    display:none
}
.wrap-slider-visual .slider-visual .img span{
    position:relative;
    height:100%;
    background-position:center center
}
.wrap-slider-category{
    position:relative;
    margin-top:25px
}
@media (max-width: 900px){
    .wrap-slider-category{
        position:relative;
        margin:8px -10px 0
    }
}
.wrap-slider-category .slider-nav{
    position:absolute;
    top:-60px;
    right:95px;
    font-size:15px;
    color:#585858
}
.wrap-slider-category .slider-nav em{
    color:#06a7e2
}
.wrap-slider-category .slick-list{
    margin:0 -15px
}
@media (max-width: 900px){
    .wrap-slider-category .slick-list{
        margin:0;
        overflow:visible
    }
}
.wrap-slider-category div.slick-list{
    width:auto;
    padding:0;
    float:none
}
.wrap-slider-product .slick-list{
    margin:0 -15px
}
@media (max-width: 900px){
    .wrap-slider-product .slick-list{
        margin:0 -20px
    }
}
.wrap-slider-product .slick-slide{
    padding:0 15px
}
@media (max-width: 900px){
    .wrap-slider-product .slick-slide{
        padding:0 15px
    }
}
.wrap-slider-product .slick-arrow{
    top:-55px;
    width:40px;
    height:42px;
    border:1px solid #e1e1e1;
    box-sizing:border-box
}
.wrap-slider-product .slick-prev:before,.wrap-slider-product .slick-next:before{
    font-size:12px
}
.wrap-slider-product .slick-prev{
    right:39px;
    border-radius:2px 0 0 2px
}
.wrap-slider-product .slick-next{
    right:0;
    border-radius:0 2px 2px 0
}
.wrap-slider-card{
    margin-bottom:40px
}
@media (max-width: 900px){
    .wrap-slider-card{
        margin-bottom:40px
    }
}
.wrap-slider-card .slider-card{
    padding:30px 50px;
    background-color:#2b2b2b
}
@media (max-width: 900px){
    .wrap-slider-card .slider-card{
        padding:10px 20px;
        touch-action:auto !important
    }
}
.wrap-slider-card .slick-arrow{
    top:50%;
    width:50px;
    height:90px;
    margin-top:-45px;
    text-align:center
}
@media (max-width: 900px){
    .wrap-slider-card .slick-arrow{
        width:20px;
        height:20px;
        margin-top:-10px
    }
}
.wrap-slider-card .slick-arrow:hover:before{
    color:#fff
}
.wrap-slider-card .slick-prev:before,.wrap-slider-card .slick-next:before{
    font-size:35px
}
@media (max-width: 900px){
    .wrap-slider-card .slick-prev:before,.wrap-slider-card .slick-next:before{
        font-size:15px
    }
}
.wrap-slider-card .slick-prev{
    left:0
}
.wrap-slider-card .slick-next{
    right:0
}
.wrap-slider-card .info{
    position:relative;
    height:60px;
    line-height:60px;
    padding:0 0 0 30px;
    color:#a6a6a6;
    background-color:#181818;
    box-sizing:border-box
}
@media (max-width: 900px){
    .wrap-slider-card .info{
        height:35px;
        line-height:35px;
        padding:0 0 0 20px
    }
}
.wrap-slider-card .info:after{
    content:'';
    display:block;
    clear:both
}
.wrap-slider-card .card-count strong{
    font-weight:normal;
    color:#fff
}
.wrap-slider-card .btn{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    background-color:transparent
}
.wrap-slider-card .btn span{
    line-height:58px;
    font-size:22px;
    font-weight:300
}
@media (max-width: 900px){
    .wrap-slider-card .btn span{
        line-height:35px;
        font-size:15px
    }
}
.wrap-slider-card .btn .icon{
    margin:-2px 10px 0;
    color:#bababa;
    vertical-align:middle
}
@media (max-width: 900px){
    .wrap-slider-card .btn .icon{
        margin:-2px 10px 0
    }
}
.wrap-slider-card .btn .icon:before{
    content:'\e006';
    font-size:20px
}
@media (max-width: 900px){
    .wrap-slider-card .btn .icon:before{
        font-size:15px
    }
}
.wrap-slider-card .btn-viewer{
    left:auto;
    right:0;
    bottom:0;
    width:auto;
    font:0/0 a;
    display:none
}
@media (max-width: 1023px){
    .wrap-slider-card .btn-viewer{
        display:block
    }
}
.wrap-slider-card .btn-viewer:before{
    content:'\e015';
    display:inline-block;
    font-family:'atomy-icon-font';
    font-size:16px;
    line-height:1;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
@media (max-width: 1023px){
    .wrap-slider-card .btn-viewer:before{
        font-size:25px
    }
}
@media (max-width: 900px){
    .wrap-slider-card .btn-viewer:before{
        font-size:18px
    }
}
.wrap-slider-card .btn-viewer.active:before{
    content:'\e03e'
}
.wrap-slider-card .btn-viewer span{
    display:none
}
.wrap-slider-card .btn.slick .icon:before{
    content:'\e007'
}
.wrap-slider-card.active{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:100%;
    height:100%;
    margin-bottom:0;
    background-color:#2b2b2b;
    z-index:999999
}
.wrap-slider-card.active .sliders,.wrap-slider-card.active .slick-list{
    height:100%
}
.wrap-slider-card.active .slider-card{
    height:100%;
    padding-bottom:40px;
    box-sizing:border-box
}
.wrap-slider-card.active .slider-card .slick-track{
    height:100%
}
.wrap-slider-card.active .slider-card .slick-track .slick-slide{
    float:left;
    width:100%;
    vertical-align:middle
}
.wrap-slider-card.active .slider-card .slick-track .slick-slide>div{
    display:inline-block;
    width:100%;
    height:100%
}
.wrap-slider-card.active .slider-card.clear-slider{
    padding-bottom:100px;
    overflow-y:auto
}
.wrap-slider-card.active .info{
    position:absolute;
    bottom:0;
    left:0;
    width:100%
}
.wrap-slider-card.active .btn-fold,.wrap-slider-card.active .btn-unfold{
    display:none !important
}
.wrap-slider-category{
    position:relative
}
.wrap-slider-category .slider-brochure{
    position:relative;
    z-index:1
}
@media (max-width: 900px){
    .wrap-slider-category .slider-brochure{
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        overflow-x:scroll;
        padding-right:20px
    }
}
.vod-meta{
    font-size:16px;
    padding:30px 0
}
.vod-meta li{
    position:relative;
    padding-left:10px;
    color:#585858
}
.vod-meta li:before{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    display:inline-block;
    width:2px;
    height:2px;
    margin-top:-1px;
    background-color:#585858
}
.vod-meta strong{
    display:none
}
@media (max-width: 900px){
    .detail .vod-meta{
        margin:0 20px
    }
}
.vod-download{
    padding:15px 0;
    white-space:nowrap;
    border-top:1px solid #e1e1e1
}
.vod-download strong{
    font-size:21px;
    margin-right:20px;
    vertical-align:middle
}
.vod-download select{
    max-width:70%;
    height:40px;
    border:1px solid #e1e1e1;
    border-radius:4px
}
.vod-download ul:after{
    content:'';
    display:block;
    clear:both
}
.vod-download li{
    width:130px;
    float:left;
    font-size:13px;
    margin:0 5px 10px 0;
    text-align:center;
    white-space:normal
}
.vod-download li a{
    position:relative;
    display:block;
    transition:opacity 300ms
}
.vod-download li a:hover .name,.vod-download li a:hover .size{
    color:#3a9ad6
}
.vod-download li a:hover .name:before{
    background-color:#3a9ad6
}
.vod-download li .name{
    position:relative;
    display:block;
    height:136px;
    border:1px solid #e1e1e1;
    border-radius:5px;
    box-sizing:border-box
}
.vod-download li .name:before{
    content:'';
    display:block;
    width:60px;
    height:60px;
    margin:20px auto 10px;
    border-radius:50%;
    background-color:#cecece;
    background-image:url("../images/common/label_download.png")
}
.vod-download li .name .word-clamp{
    height:35px;
    -webkit-line-clamp:2;
    overflow:hidden
}
.vod-download li .name .loading{
    background-color:transparent
}
.vod-download li .name .loading .parcent{
    color:#fff;
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    margin:20px auto 10px;
    border-radius:50%;
    background-color:#06a7e2
}
.vod-download li .name .loading .parcent strong{
    margin-right:0
}
@media (max-width: 768px){
    .vod-download li .name .loading .parcent strong{
        margin-bottom:0
    }
}
.vod-download li .name .loading .bar{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:5px;
    background-color:#f7f7f7
}
.vod-download li .name .loading .bar i{
    display:block;
    height:100%;
    background-color:#06a7e2
}
.vod-download li .size{
    color:#585858;
    font-size:15px
}
.vod-download li.video .name:before{
    background-position:0 0
}
.vod-download li.image .name:before{
    background-position:-60px 0
}
.vod-download li.audio .name:before{
    background-position:-120px 0
}
.vod-download li.subtitle .name:before,.vod-download li.list .name:before{
    background-position:-180px 0
}
.vod-download .title-download{
    margin-bottom:17px;
    font-size:21px;
    font-weight:600
}
@media (max-width: 900px){
    .vod-download .title-download{
        font-size:17.5px
    }
}
@media (max-width: 900px){
    .detail .vod-download{
        padding:15px 20px;
        white-space:nowrap
    }
}
@media (max-width: 900px){
    .detail .vod-download strong{
        display:block;
        margin-bottom:16px
    }
}
[data-video="false"] .vod-download .video,[data-audio="false"] .vod-download .audio,[data-caption="false"] .vod-download .list,[data-caption="false"] .vod-download .subtitle{
    display:none
}
.header{
    position:relative;
    z-index:1004;
    height:120px
}
@media (max-width: 900px){
    .header{
        position:fixed;
        top:0;
        z-index:10;
        width:100%;
        height:auto
    }
}
.header h1{
    text-align:center;
    position:relative;
    z-index:11;
    display:inline-block;
    height:67px;
    transition:height 0.15s
}
.header h1:after{
    content:'';
    vertical-align:middle;
    display:inline-block;
    height:100%
}
.header h1 a{
    vertical-align:middle;
    display:inline-block
}
.header h1 a img{
    height:30px;
    transition:height 0.15s
}
.header h1 a span{
    display:block;
    margin-top:-2px;
    margin-right:-21%;
    color:#101820;
    font-size:12px;
    font-weight:400;
    opacity:0.5;
    transition:font-size 0.15s, opacity 0.15s;
    overflow:hidden
}
.header h1 img{
    vertical-align:middle;
    display:inline-block;
    width:auto
}
@media (max-width: 900px){
    .header h1 img{
        max-height:25px
    }
}
.header-dim{
    top:152px
}
.header.fixed{
    height:216px
}
@media (max-width: 900px){
    .header.fixed{
        height:120px
    }
}
.header.fixed h1{
    height:151px
}
.header.fixed h1 a img{
    height:46px
}
.header.fixed h1 a span{
    display:block;
    opacity:0.5;
    font-size:14px;
    margin-right:-21%
}
.header .hot,.header .new{
    display:inline-block;
    font-size:10px;
    color:#e655a5;
    vertical-align:top
}
.header .hot:before,.header .new:before{
    content:'';
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background-color:#e655a5
}
.header .hot em,.header .new em{
    margin-left:5px
}
.header .hot{
    display:none
}
.header .new{
    margin-left:17px
}
.header-dim{
    position:fixed;
    bottom:0;
    left:0;
    z-index:-1;
    display:none;
    width:100%;
    background-color:#000;
    opacity:0
}
.header.all{
    z-index:20
}
.header.all .header-dim{
    display:block;
    opacity:0.3
}
.header.depth-hide:hover .menu-lists{
    background-color:#fff;
    border-bottom:1px solid #e1e1e1;
    box-sizing:content-box
}
@media (max-width: 900px){
    .header .box-login a{
        position:relative;
        display:block;
        height:50px;
        padding:0 90px 0px 60px;
        font-size:18px;
        color:#585858;
        white-space:nowrap;
        background-color:#f7f7f7;
        border-bottom:1px solid #e6e6e6;
        box-sizing:border-box
    }
    .header .box-login a:after{
        content:'';
        display:inline-block;
        height:100%;
        vertical-align:middle
    }
    .header .box-login a .icon{
        position:absolute;
        top:50%;
        left:25px;
        height:16px;
        margin-top:-7px
    }
    .header .box-login a .icon:before{
        content:'';
        width:20px;
        height:16px;
        vertical-align:top;
        background-image:url("../images/common/global_category_m.png");
        background-position:-160px 0;
        background-size:200px auto
    }
    .header .box-login a.logout .icon:before{
        background-position:-180px 0
    }
    .header .box-login a span{
        display:inline-block;
        font-size:15px;
        white-space:normal;
        vertical-align:middle
    }
    .header .box-login a strong{
        display:inline-block;
        max-width:50%;
        color:#06a7e2;
        font-weight:300;
        vertical-align:middle;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden
    }
    .header .box-login a .btn-login{
        position:absolute;
        right:20px;
        top:50%;
        margin-top:-15px;
        padding:0 10px;
        line-height:28px
    }
    .header .home{
        position:relative;
        display:block;
        height:50px;
        padding:0 20px 0 60px;
        background-color:#f7f7f7;
        border-bottom:1px solid #e6e6e6;
        overflow:hidden
    }
    .header .home .icon{
        position:absolute;
        top:50%;
        left:22px;
        height:18px;
        margin-top:-6px
    }
    .header .home .icon:before{
        content:'';
        width:22px;
        height:18px;
        vertical-align:top;
        background-image:url(../images/common/global_category_m.png);
        background-position:-40px -20px;
        background-size:200px auto
    }
    .header .home span{
        display:inline-block;
        font-size:15px;
        line-height:50px;
        white-space:normal;
        vertical-align:middle;
        color:#585858
    }
    .header .snb{
        padding-bottom:0
    }
}
@media (min-width: 901px){
    .header .box-login,.header .home,.header .snb{
        display:none
    }
}
@media (min-width: 901px){
    .header-field{
        position:fixed;
        z-index:12;
        box-sizing:border-box;
        width:100%;
        height:120px;
        text-align:center;
        background-color:#fff;
        border-bottom:1px solid #e1e1e1
    }
    .header.fixed{
        position:relative;
        border-bottom-color:#fff;
        z-index:1004
    }
    .header.fixed .header-field{
        height:216px
    }
}
@media (max-width: 900px){
    .header-field h1{
        position:fixed;
        top:0;
        width:100%;
        height:50px;
        border-bottom:1px solid #e1e1e1;
        background-color:#fff;
        z-index:12
    }
    .header-field h1 a span{
        font-size:10px
    }
    .header.all .header-dim{
        top:0;
        z-index:13
    }
    .header.fixed h1{
        height:69px
    }
    .header.fixed h1 a span{
        font-size:10px
    }
    .header .new{
        margin-left:3px
    }
}
.mobile-banner{
    display:none
}
@media (max-width: 900px){
    .mobile-banner{
        display:block;
        margin:15px 20px
    }
    .mobile-banner img{
        display:block;
        max-height:80px;
        margin:0 auto
    }
}
@media (min-width: 901px){
    .header-utils{
        position:absolute;
        left:0;
        right:0;
        top:0;
        display:flex;
        justify-content:space-between;
        max-width:1372px;
        width:100%;
        margin:0 auto;
        padding:0 30px;
        font-size:12px;
        box-sizing:border-box;
        z-index:10;
        background-color:#fff
    }
    .header-utils .column{
        height:67px;
        white-space:nowrap;
        box-sizing:border-box;
        display:flex;
        align-items:center
    }
    .header-utils .column:first-child>a{
        margin-right:75px
    }
    .header-utils .column:first-child .stream{
        display:none
    }
    .header-utils .column:last-child>a{
        margin-left:75px
    }
    .header-utils .column>a{
        position:relative;
        display:inline-block;
        height:30px;
        display:inline-flex;
        justify-content:center;
        flex-direction:column
    }
    .header-utils .column>a:before{
        content:'';
        flex:none;
        display:block;
        margin:0 auto;
        transform:scale(0.8);
        background-repeat:no-repeat;
        background-image:url("../images/icons/header.pc.png");
        transition:transform 0.15s
    }
    .header-utils .column>a:hover:before{
        background-position:0 -30px
    }
    .header-utils .column>a:hover:hover>span{
        display:block;
        opacity:1;
        margin-top:10px;
        transition:linear opacity 0.2s, linear margin 0.2s
    }
    .header-utils .column>a>span{
        position:absolute;
        top:100%;
        left:50%;
        transform:translateX(-50%);
        margin-top:5px;
        padding:5px 10px;
        opacity:0;
        max-height:20px;
        border-radius:2px;
        background-color:#fff;
        box-shadow:1px 1px 3px rgba(0,0,0,0.18);
        pointer-events:none
    }
    .header-utils .column>a>span:before{
        content:'';
        position:absolute;
        left:50%;
        top:-4px;
        width:8px;
        height:8px;
        margin-left:-4px;
        transform:rotate(-135deg);
        background-color:#fff;
        box-shadow:1px 1px 3px rgba(0,0,0,0.08)
    }
    .header-utils .column>a.menu .icon{
        position:relative;
        display:inline-block;
        width:24px;
        height:22px;
        transform:scale(0.8);
        transition:transform 0.15s
    }
    .header-utils .column>a.menu .icon i{
        position:absolute;
        top:50%;
        left:0;
        display:block;
        width:100%;
        height:4px;
        margin-top:-2px;
        border-radius:2px;
        background-color:#101820;
        transition:.25s ease-in-out;
        transform:rotate(0deg)
    }
    .header-utils .column>a.menu .icon i:first-child{
        top:2px
    }
    .header-utils .column>a.menu .icon i:last-child{
        top:100%;
        margin-top:-4px
    }
    .header-utils .column>a.menu:hover .icon i{
        background-color:#00b6f0
    }
    .header-utils .column>a.menu.active .icon i{
        margin:0;
        background-color:#00b6f0
    }
    .header-utils .column>a.menu.active .icon i:first-child{
        top:9px;
        transform:rotate(135deg)
    }
    .header-utils .column>a.menu.active .icon i:nth-child(2){
        opacity:0;
        left:-30px
    }
    .header-utils .column>a.menu.active .icon i:last-child{
        top:9px;
        transform:rotate(-135deg)
    }
    .header-utils .column>a.cart:before{
        width:30px;
        height:24px
    }
    .header-utils .column>a.cart small{
        position:absolute;
        top:-3px;
        left:21px;
        display:inline-block;
        height:16px;
        padding:0 5px;
        text-align:center;
        color:#fff;
        font-size:12px;
        line-height:16px;
        border-radius:8px;
        background-color:#00b6f0
    }
    .header-utils .column>a.notice:before{
        width:30px;
        height:27px;
        background-position:-100px 0
    }
    .header-utils .column>a.notice:hover:before{
        background-position:-100px -30px
    }
    .header-utils .column>a.my{
        margin-right:0;
        margin-top:-1px
    }
    .header-utils .column>a.my:before{
        width:27px;
        height:25px;
        background-position:-300px 0
    }
    .header-utils .column>a.my:hover:before{
        background-position:-300px -30px
    }
    .header-utils .column>a.event:before{
        width:29px;
        height:27px;
        background-position:-250px 0
    }
    .header-utils .column>a.event:hover:before{
        background-position:-250px -30px
    }
    .header-utils .column>a.trans:before{
        width:29px;
        height:27px;
        background:url("../images/common/translate.png") no-repeat 0 0
    }
    .header-utils .column>a.login:before{
        width:27px;
        height:27px;
        background-position:-150px 0
    }
    .header-utils .column>a.login:hover:before{
        background-position:-150px -30px
    }
    .header-utils .column>a.login.in:before{
        width:30px;
        background-position:-350px 0
    }
    .header-utils .column>a.login.in:hover:before{
        background-position:-350px -30px
    }
    .header-utils .column>a.home:before{
        width:34px;
        height:27px;
        background-position:-400px 0
    }
    .header-utils .column>a.home:hover:before{
        background-position:-400px -30px
    }
    .header-utils .column>a.stream:before{
        width:126px;
        height:27px;
        background:url(../images/common/GlobalGSMCpng.png) no-repeat 0 0
    }
    .header-utils .column>a.stream:hover:before{
        background-position:0 0
    }
    .header-utils .column>a.btn-search:before{
        width:25px;
        height:25px;
        background-image:none;
        font-family:'atomy-icon-font';
        font-size:25px;
        content:'\e02f'
    }
    .header-utils .column>a.btn-search:hover:before{
        color:#06a7e2
    }
    .header-utils .column>a .banner.small,.header-utils .column>a.banner{
        position:relative
    }
    .header-utils .column>a .banner.small .bnn,.header-utils .column>a.banner .bnn{
        position:absolute;
        top:10px;
        left:0
    }
    .header-utils .column>a .banner.small .bnn a,.header-utils .column>a.banner .bnn a{
        position:relative;
        overflow:hidden;
        display:block;
        width:48px;
        height:48px;
        border-radius:50%
    }
    .header-utils .column>a .banner.small .bnn img,.header-utils .column>a.banner .bnn img{
        position:absolute;
        left:50%;
        bottom:0;
        max-width:none;
        width:84px;
        margin-left:-42px
    }
    .header-utils .column>a .banner.small .bnn button,.header-utils .column>a.banner .bnn button{
        position:absolute;
        top:0;
        right:0
    }
    .header-utils .column>a .icon-search:before{
        font-size:25px
    }
    .header-utils .column .playlist{
        display:none
    }
    .header-utils .btn{
        font-size:12px;
        line-height:18px;
        vertical-align:middle;
        min-width:0;
        min-height:20px;
        height:20px;
        margin-top:-2px;
        margin-left:10px;
        padding-right:6px;
        padding-left:6px
    }
    .header-utils .btn-search:hover .icon-search:before{
        color:#00b6f0
    }
    .header.fixed .header-utils{
        top:62px
    }
    .header.fixed .header-utils .column{
        height:auto;
        align-items:flex-start
    }
    .header.fixed .header-utils .column .menu .icon{
        transform:scale(1)
    }
    .header.fixed .header-utils .column div:before,.header.fixed .header-utils .column>a:before{
        transform:scale(1)
    }
    .header.fixed .header-utils .column div>span,.header.fixed .header-utils .column>a>span{
        display:block
    }
    .header.fixed .header-utils .banner{
        position:static
    }
    .header.fixed .header-utils .banner .bnn{
        top:115px
    }
    .header.fixed .header-utils .banner .bnn a{
        width:182px;
        overflow:visible
    }
    .header.fixed .header-utils .banner .bnn img{
        position:static;
        width:auto;
        margin-left:0
    }
    .header.fixed .header-utils .banner.my,.header.fixed .header-utils .column div.my,.header.fixed .header-utils .column>a.my{
        margin-right:0
    }
    .header.fixed .top-small-banner{
        pointer-events:all;
        display:block
    }
    .header .top-small-banner{
        pointer-events:none;
        display:none
    }
    .header .top-small-banner .go-banner{
        position:relative
    }
}
@media (max-width: 900px){
    .header-utils{
        display:none;
        margin-top:-165px;
        padding:15px 0;
        font-size:14px
    }
    .header-utils a{
        position:relative;
        display:block;
        padding-top:5px;
        padding-right:20px;
        padding-bottom:5px;
        padding-left:45px;
        box-sizing:border-box
    }
    .header-utils a:before{
        content:'';
        position:absolute;
        top:50%;
        left:20px;
        width:15px;
        height:15px;
        margin-top:-7.5px;
        color:#101820;
        background-image:url("../images/common/global_category_m.png");
        background-size:200px auto
    }
    .header-utils a.cart small{
        display:none
    }
    .header-utils a.notice:before{
        background-position:-75px 0
    }
    .header-utils a.event:before{
        background-position:-90px 0
    }
    .header-utils a.event:after{
        content:'N';
        color:#fff;
        font-size:9px;
        line-height:16px;
        text-align:center;
        vertical-align:middle;
        display:inline-block;
        width:16px;
        height:16px;
        margin-left:5px;
        border-radius:50%;
        background-color:#00b6f0
    }
    .header-utils a.recent:before{
        background-position:-105px 0
    }
    .header-utils a.cart:before{
        background-position:-120px 0
    }
    .header-utils a.favorite:before{
        background-position:-145px 0
    }
    .header-utils .login{
        color:#585858;
        font-size:15px;
        position:absolute;
        top:0;
        right:0;
        left:0;
        display:flex;
        align-items:center;
        height:50px;
        padding:0 120px 0 60px;
        border-bottom:1px solid #e6e6e6;
        background-color:#f7f7f7
    }
    .header-utils .login:before{
        content:'\e020';
        font-family:'atomy-icon-font';
        font-size:18px;
        text-rendering:auto;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        display:inline-block;
        width:auto;
        height:auto;
        background-image:none
    }
    .header-utils .login .btn{
        color:#fff;
        font-size:inherit;
        line-height:28px;
        position:absolute;
        right:20px;
        height:auto;
        padding:0 10px;
        border-color:#06a7e2;
        background-color:#06a7e2
    }
}
.header .menu>a .hot,.header .menu>a .new{
    margin-top:-10px;
    margin-left:5px
}
.header .menu>a .hot{
    display:none
}
.header .menu>a .new:before{
    background-color:#e655a5
}
.header .menu>a strong{
    font-size:18px
}
.header .menu-btn{
    position:fixed;
    top:0;
    left:41px;
    display:block;
    width:60px;
    height:60px;
    z-index:13
}
.header .menu-btn i{
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    width:24px;
    height:4px;
    margin-top:-2px;
    margin-left:-12px;
    border-radius:2px;
    background-color:#101820;
    transition:transform 0.15s, opacity 0.15s, background-color 0.15s
}
.header .menu-btn i.top{
    transform:translateY(-11px)
}
.header .menu-btn i.bottom{
    transform:translateY(11px)
}
.header .menu .depth3{
    font-size:15px;
    height:0;
    overflow:hidden
}
.header .menu .depth3 li{
    margin:10px 0
}
.header .menu .depth3 a:before{
    content:'';
    vertical-align:middle;
    display:inline-block;
    width:6px;
    height:6px;
    margin-top:-8px;
    margin-left:5px;
    border-bottom:1px solid #e6e6e6;
    border-left:1px solid #e6e6e6
}
.header .menu .depth3 a:hover span{
    color:#06a7e2 !important
}
.header .menu .depth3 span{
    color:#585858 !important
}
.header .menu .depth3 small{
    font-size:15px !important
}
.header.all .menu-btn .top{
    transform:rotate(135deg)
}
.header.all .menu-btn .middle{
    opacity:0;
    transform:translateX(-20%)
}
.header.all .menu-btn .bottom{
    transform:rotate(225deg)
}
.header .depth>ul>li .depth2 {display: block; position: relative;}
.header .depth>ul>li .arr.drop {
    display:inline-block;
    position:absolute;
    top:50%;
    right:0;
    width:16px;
    height:8px;
    padding-right: 0 !important;
    background:url(https://ch.static.atomy.com/front/dbea2263fd095f82ab8f6a6d58ad80e1320c1aaa/resources/images/common/arrow_down.png) no-repeat 0 0;
    background-size:100%;
    margin-top:-4px;
    z-index: 10;
    cursor: pointer;
}
.header .depth>ul>li.down .arr.drop{
    transform:rotate(180deg)
}
@media (min-width: 901px) {
    .header .menu .depth3 li a {margin-right: 30px;}
}
@media (max-width: 900px) {
    .header .menu .depth>ul>li .arr.drop {
        top: 0;
        right: 0;
        width: 55px;
        height: 100%;
        background-image: url(https://ch.static.atomy.com/front/dbea2263fd095f82ab8f6a6d58ad80e1320c1aaa/resources/images/common/arrow_m_down.png);
        background-position: 35% center;
        background-size:18px 9px;
        margin-top: 0;
    }
    .header .depth>ul>li.down .arr.drop{
        background-position: 67% center;
    }
}
.header .depth>ul>li .drop{
    position:relative;
    display:block;
    padding-right:30px
}
.header .depth>ul>li .drop .arr{
    display:inline-block;
    position:absolute;
    top:50%;
    right:0;
    width:16px;
    height:8px;
    background:url(../images/common/arrow_down.png) no-repeat 0 0;
    background-size:100%;
    margin-top:-4px
}
.header .depth>ul>li.down .drop .arr{
    transform:rotate(180deg)
}
.header .depth>ul>li.down .depth3{
    height:auto
}
@media (min-width: 901px){
    .header-menus .menu{
        transition:border-left-color 0s linear 0s
    }
    .header-menus .menu-lists{
        position:absolute;
        top:67px;
        left:0;
        width:100%;
        height:52px;
        border-top:1px solid #e1e1e1;
        background-color:#fff;
        transition:background-color 0.15s, transform 0.15s, top 0.15s;
        box-shadow:0px 3px 3px 0 rgba(5,5,5,0.1);
        box-sizing:border-box
    }
    .header-menus .menu-lists .lists{
        max-height: calc(100vh - 266px);
        position:relative;
        display:flex;
        height:100%;
        max-width:1700px;
        transition:background-color 0.15s;
        margin:0 auto;
        padding-right:40px;
        padding-left:40px
    }
    .header-menus .menu-lists .lists.selected{
        overflow:visible
    }
    .header-menus .menu-lists .lists:after{
        content:'';
        position:absolute;
        top:52px;
        right:0;
        left:0;
        display:block
    }
    .header-menus .menu-lists .lists .menu{
        position:relative;
        text-align:center;
        flex:1
    }
    .header-menus .menu-lists .lists .menu:first-child .depth{
        border-left:0
    }
    .header-menus .menu-lists .lists .menu.over:first-child .depth,.header-menus .menu-lists .lists .menu:hover:first-child .depth{
        border-left:1px solid #b7b7b7
    }
    .header-menus .menu-lists .lists .menu.over .depth/*,.header-menus .menu-lists .lists .menu:hover .depth*/{
        max-height:calc(100vh - 266px);
        opacity:1;
        pointer-events:all;
        transition:opacity .5s, max-height .3s, border .5s
    }
    .header-menus .menu-lists .lists .menu.over .depth li,.header-menus .menu-lists .lists .menu:hover .depth li{
        opacity:1;
        transform:translateY(0)
    }
    .header-menus .menu-lists .lists .menu.over>a:before,.header-menus .menu-lists .lists .menu:hover>a:before{
        right:25px;
        left:25px
    }
    .header-menus .menu-lists .lists .menu>a{
        display:flex;
        height:52px;
        align-items:center;
        justify-content:center
    }
    .header-menus .menu-lists .lists .menu>a:before{
        content:'';
        position:absolute;
        left:50%;
        right:50%;
        bottom:-1px;
        display:block;
        height:2px;
        background-color:#06a7e2;
        transition:left .3s, right .3s;
        z-index:11
    }
    .header-menus .menu-lists .depth{
        position:absolute;
        top:100%;
        left:50%;
        max-height:0;
        font-size:17px;
        padding:15px 20px;
        color:#101820;
        border:1px solid #b7b7b7;
        background-color:#fff;
        overflow-x:hidden;
        overflow-y:auto;
        pointer-events:none;
        opacity:0;
        transform:translateX(-50%);
        text-align:left;
        white-space:nowrap;
        box-sizing:border-box;
        z-index:10
    }
    .header-menus .menu-lists .depth::-webkit-scrollbar{
        display:none
    }
    .header-menus .menu-lists .depth li{
        margin:15px 0;
        letter-spacing:-0.25px;
        opacity:0;
        transform:translateY(-50px);
        transition:opacity .3s ease-out, transform .3s ease-out
    }
    .header-menus .menu-lists .depth li a:hover>span{
        color:#06a7e2
    }
    .header-menus .menu-lists .depth li a>span{
        margin-left:5px;
        color:#101820
    }
    .header-menus .menu-lists .depth li a>small{
        font-size:17px;
        color:#aaa
    }
    .header-menus .menu-lists .depth li i{
        margin-left:3px;
        font-size:0;
        vertical-align:middle
    }
    .header-menus .menu-lists .depth li i:before{
        vertical-align:top
    }
    .header-menus .menu-lists .depth li i+i{
        margin-left:0
    }
    .header-menus .menu-lists .depth .all{
        display:none
    }
    .header-menus .lists-etc{
        width:100%;
        height:55px;
        position:relative;
        border-top:1px solid #e1e1e1;
        opacity:0;
        pointer-events:none;
        color:#fff;
        display:flex;
        align-items:center;
        flex-direction:row;
        flex-wrap:wrap
    }
    .header-menus .lists-etc:after{
        content:'';
        clear:both;
        display:block;
        width:100%
    }
    .header-menus .lists-etc .category{
        display:none;
        float:left;
        margin-top:-5px
    }
    .header-menus .lists-etc .notice{
        display:block;
        height:40px;
        padding:15px 20px 0;
        flex:1 1 100%
    }
    .header-menus .lists-etc .notice span{
        position:relative;
        vertical-align:middle;
        z-index:1
    }
    .header-menus .lists-etc .notice span:before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#191531;
        z-index:-1
    }
    .header-menus .lists-etc .notice .icon-notice{
        display:inline-block;
        width:23px;
        height:19px;
        background:url("../images/common/notice.png") no-repeat 0 0;
        vertical-align:middle;
        margin-right:13px
    }
    .header-menus .lists-etc .notice .icon-arrow-right{
        position:absolute;
        top:50%;
        right:300px;
        margin-top:-10px;
        opacity:0.7;
        z-index:0
    }
    .header-menus .lists-etc .notice .icon-arrow-right:before{
        font-size:12px
    }
    .header-menus .lists-etc .btn-go-total{
        position:absolute;
        top:50%;
        right:15px;
        min-width:179px;
        height:42px;
        line-height:42px;
        transform:translateY(-50%);
        letter-spacing:-0.5px;
        font-size:18px;
        text-align:center;
        border-radius:2px;
        background-color:#afb0b0;
        z-index:2;
        box-sizing:border-box;
        padding:0 10px;
        white-space:nowrap
    }
    .header-menus .lists-etc .btn-go-total:before{
        content:'';
        display:inline-block;
        width:14px;
        height:14px;
        margin-top:-4px;
        margin-right:8px;
        background-image:url("../images/icons/pc_header.png");
        background-repeat:no-repeat;
        background-position:-40px 0;
        vertical-align:middle
    }
    .header-menus.active-full .menu{
        border-left:1px solid #e6e6e6
    }
    .header-menus.active-full .menu:first-child{
        border-left:none
    }
    .header-menus.active-full .menu-lists{
        height:auto !important;
        background-color:#fff
    }
    .header-menus.active-full .menu-lists .lists:after{
        content:none
    }
    .header-menus.active-full .menu-lists .depth{
        position:static;
        display:block;
        margin-top:-35px;
        opacity:1;
        pointer-events:all;
        max-height: calc(100vh - 306px);
        border:none;
        transform:none
    }
    .header-menus.active-full .menu-lists .depth li{
        opacity:1;
        transform:translateY(0)
    }
    .header-menus.active-full .menu-lists .depth a:hover{
        color:#06a7e2
    }
    .header-menus.active-full .menu-lists .menu>a{
        position:relative;
        z-index:11
    }
    .header-menus.active-full .menu-lists .menu>a:before{
        content:none
    }
    .header-menus.active-full .menu-lists .menu.over:first-child .depth,.header-menus.active-full .menu-lists .menu:hover:first-child .depth{
        border-left:0
    }
    .header-menus.active-full .lists-etc{
        opacity:1;
        pointer-events:all
    }
    .header-menus.active-full ~ .header-dim{
        display:block;
        opacity:0.3
    }
    .header.all .menu{
        padding-top:30px;
        padding-bottom:30px;
        padding-left:20px;
        border-left-color:#e1e1e1;
        transition:border-left-color 0s linear 0.15s
    }
    .header.all .menu>a{
        font-size:18px;
        margin-bottom:15px
    }
    .header.all .go-total{
        opacity:1;
        background-color:#fff;
        transition:opacity 0.15s, background-color 0.15s
    }
    .header.fixed .menu-lists{
        top:152px;
        height:66px
    }
    .header.fixed .menu-lists .lists:after{
        opacity:0
    }
    .header.fixed .menu-lists .lists .menu>a{
        height:65px;
        background: white;
    }
    .header .menu-btn{
        display:none
    }
}
@media (max-width: 900px){
    .header-menus{
        display:none;
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        width:80%;
        padding-top:0;
        font-size:16px;
        background-color:#fff;
        box-sizing:border-box;
        z-index:15
    }
    .header-menus .depth{
        max-height:0
    }
    .header .menu{
        position:relative
    }
    .header .menu:before,.header .menu:after{
        content:'';
        display:block;
        position:absolute;
        top:23px;
        border-radius:1px;
        background-color:#101820;
        transition:transform .3s
    }
    .header .menu:before{
        left:25px;
        width:15px;
        height:3px;
        margin-top:-1.5px
    }
    .header .menu:after{
        left:31px;
        width:3px;
        height:15px;
        margin-top:-7.5px
    }
    .header .menu>a{
        font-size:16px;
        font-weight:bold;
        position:relative;
        display:flex;
        align-items:center;
        height:46px;
        padding:0 20px;
        border-bottom:1px solid #e6e6e6;
        box-sizing:border-box
    }
    .header .menu>a strong{
        display:inline-block;
        padding-left:30px;
        font-size:16px
    }
    .header .menu-btn{
        left:0;
        width:50px;
        height:50px;
        transition:left 0.15s
    }
    .header .menu-btn i{
        width:20px;
        height:3px
    }
    .header .menu-btn i.top{
        transform:translateY(-7px)
    }
    .header .menu-btn i.bottom{
        transform:translateY(7px)
    }
    .header .menu .depth{
        height:auto;
        max-height:0;
        width:100%;
        padding:0;
        background-color:#fff;
        transition:max-height .3s;
        overflow:hidden
    }
    .header .menu .depth a{
        display:block;
        padding:11px 20px 11px 50px;
        color:#101820;
        box-sizing:border-box
    }
    .header .menu .depth a span{
        color:#aaa
    }
    .header .menu .depth a .new{
        vertical-align:middle
    }
    .header .menu .depth .all a{
        border-bottom:1px solid #e6e6e6;
        background-color:#f7f7f7
    }
    .header .menu .depth>ul>li .drop{
        padding-right:50px
    }
    .header .menu .depth>ul>li .drop .arr{
        right:25px;
        width:18px;
        height:9px;
        background-image:url(../images/common/arrow_m_down.png);
        margin-top:-4px
    }
    .header .menu.active:before{
        transform:rotate(180deg)
    }
    .header .menu.active:after{
        transform:rotate(90deg)
    }
    .header .menu.active .depth{
        max-height:1000px
    }
    .header .lists-etc .category,.header .lists-etc .btn-go-total{
        display:none
    }
    .header .lists-etc .notice{
        display:none
    }
    .header .btn-go-total{
        position:relative;
        display:block;
        color:#fff;
        font-size:14px;
        font-weight:normal;
        line-height:45px;
        box-sizing:border-box;
        height:45px;
        margin:15px 20px;
        padding:0 20px;
        border:0;
        border-radius:3px;
        background-color:#000
    }
    .header .btn-go-total:before{
        content:none
    }
    .header .btn-go-total:after{
        content:'';
        position:absolute;
        top:50%;
        right:20px;
        display:block;
        width:15px;
        height:15px;
        margin-top:-7.5px;
        background-image:url("../images/icons/pc_header.png");
        background-position:-40px 0;
        background-size:100px auto;
        background-repeat:no-repeat
    }
    .header.all .header-menus{
        display:block;
        overflow-x:hidden;
        overflow-y:auto
    }
    .header.all .header-menus .menu-lists{
        position:static
    }
    .header.all .menu-btn{
        left:85%;
        z-index:14
    }
    .header.all .menu-btn i{
        background-color:#fff
    }
    .header.fixed .menu-btn{
        height:69px
    }
}
.header-menus .lists-etc.is-playlist{
    background:url("../images/common/bg-playlist-depth.png") no-repeat center center/cover
}
@media (min-width: 769px){
    .header-menus .lists-etc .notice{
        display:block
    }
}
@media (min-width: 901px){
    .search{
        position:fixed;
        top:67px;
        right:0;
        z-index:13;
        width:0
    }
    .search form,.search fieldset{
        display:block;
        width:auto;
        height:100%
    }
    .search label{
        display:none
    }
    .search-field{
        position:relative
    }
    .search-input{
        cursor:pointer;
        width:75px;
        height:62px;
        padding:0 45px;
        border:0;
        border-top:1px solid #d7d7d7;
        border-bottom:1px solid #a6a6a6;
        border-radius:0;
        transition:opacity 0.3s;
        -webkit-appearance:none;
        opacity:0;
        box-sizing:border-box
    }
    .search-input ~ .btn-submit strong{
        right:0;
        opacity:0
    }
    .search-history{
        overflow:hidden;
        max-height:0;
        background-color:#fff;
        transition:max-height 0.3s
    }
    .search-history .tags .inner{
        height:63px;
        margin-top:0
    }
    .search-open{
        position:relative;
        z-index:1000
    }
    .search .btn .icon:before{
        font-size:25px
    }
    .search .btn-searchs{
        font-size:12px;
        text-align:center;
        line-height:1;
        position:absolute;
        right:0;
        top:0;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        flex-wrap:wrap;
        height:67px;
        border:0;
        background-color:transparent;
        transform:scale(0.8);
        transition:transform 0.15s
    }
    .search .btn-searchs .btn{
        height:27px;
        min-height:0;
        padding:0;
        line-height:1;
        background-color:transparent
    }
    .search .btn-searchs .btn:hover{
        color:#00b6f0
    }
    .search .btn-searchs span{
        text-align:center;
        display:none;
        width:100%;
        margin-top:5px
    }
    .search .btn-reset{
        font:inherit;
        display:none;
        border-width:1px 0 1px 1px;
        border-style:solid;
        border-color:#b7b7b7 transparent #fff #b7b7b7
    }
    .search .btn-submit{
        display:none;
        z-index:3
    }
    .search .btn-submit strong{
        right:100%;
        opacity:1
    }
    .search-popularity{
        color:#101820;
        font-size:18px;
        font-weight:bold;
        text-align:center;
        line-height:64px;
        white-space:nowrap;
        overflow:hidden;
        height:64px
    }
    .search-popularity .scroll{
        overflow-x:auto;
        overflow-y:hidden
    }
    .search-popularity .inner{
        max-width:none
    }
    .search-popularity .tag{
        vertical-align:top;
        margin:0 25px;
        padding:0 15px
    }
    .search-popularity_title{
        display:none
    }
    .search.focus{
        width:100%;
        z-index:9999;
        background-color:#fff
    }
    .search.focus .search-history{
        max-height:550px
    }
    .search.focus .search-form input[type='search']{
        width:calc(100% - 250px);
        padding-right:95px
    }
    .search.focus .search-input{
        color:#00b6f0;
        font-size:24px;
        text-align:center;
        width:100%;
        border-radius:0;
        opacity:1
    }
    .search.focus .search-input::-webkit-input-placeholder,.search.focus .search-input::-moz-placeholder,.search.focus .search-input:-moz-placeholder,.search.focus .search-input:-ms-input-placeholder{
        color:#00b6f0;
        font-weight:200;
        opacity:1
    }
    .search.focus .btn{
        position:absolute;
        box-sizing:border-box
    }
    .search.focus .btn-searchs{
        transform:scale(1)
    }
    .search.focus .btn-searchs span{
        display:none
    }
    .search.focus .btn-submit{
        top:1px;
        bottom:initial;
        right:111px;
        z-index:3;
        width:100px;
        height:62px;
        display:block
    }
    .search.focus .btn-submit strong{
        display:none
    }
    .search.focus .btn-reset{
        top:0;
        bottom:initial;
        right:0;
        z-index:3;
        display:block;
        width:111px;
        height:64px;
        padding:0;
        border-radius:0
    }
    .search.focus .btn-reset span{
        display:none
    }
    .is-drag .nav{
        display:none
    }
    .fixed ~ .search{
        top:152px
    }
    .fixed ~ .search .btn-searchs{
        transform:scale(1)
    }
    .fixed ~ .search .btn-searchs span{
        display:none
    }
}
.search-autocomplate{
    display:none;
    border-width:0 0 1px;
    border-style:solid;
    border-color:#d2d2d2;
    background-color:#fff
}
.search-autocomplate ul{
    display:block !important;
    max-width:1190px !important;
    margin:0 auto !important;
    position:static !important;
    max-height:440px;
    overflow:hidden
}
@media (max-width: 900px){
    .search-autocomplate ul{
        max-height:calc(100vh - 80px)
    }
}
.search-autocomplate ul li{
    position:relative;
    display:block
}
.search-autocomplate ul li a{
    display:block;
    padding:10px 40px 10px 20px;
    box-sizing:border-box
}
.search-autocomplate ul li a:focus,.search-autocomplate ul li a:hover{
    background-color:#f9f9f9
}
.search-autocomplate ul li a em{
    font-weight:bold;
    color:#00b6f0
}
.search-autocomplate.empty ul{
    display:none !important
}
#search-list{
    padding:0;
    border-width:0 0 1px;
    border-style:solid;
    border-color:#d2d2d2;
    background-color:#fff
}
#search-list ul{
    max-width:1190px;
    margin:0 auto
}
#search-list li{
    position:relative
}
#search-list li .text{
    display:block;
    width:100%;
    padding:10px 40px 10px 20px;
    box-sizing:border-box
}
#search-list li .text:hover,#search-list li .text:focus{
    background-color:#f9f9f9
}
#search-list li .text .date{
    float:right;
    color:#595959;
    font-size:15px
}
#search-list li .remove{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:30px;
    text-align:center
}
#search-list li .remove .icon{
    line-height:0
}
#search-list li .remove .icon:before{
    font-size:12px;
    color:#595959;
    vertical-align:top;
    transform:scale(0.7)
}
#search-list .search-all-remove{
    display:block;
    width:100%;
    font-size:15px;
    color:#585858;
    border-top:1px solid #e1e1e1;
    text-align:right
}
#search-list .search-all-remove span{
    display:block;
    max-width:1190px;
    margin:0 auto;
    padding:10px 6px;
    box-sizing:border-box
}
#search-list .search-all-remove span .icon{
    display:inline-block;
    width:16px;
    height:16px;
    line-height:16px;
    margin-left:8px;
    border:1px solid #585858;
    border-radius:50%;
    font-size:6px;
    text-align:center
}
#search-list .search-all-remove span .icon:before{
    font-size:inherit;
    transform:scale(0.7)
}
.search-field.auto .search-autocomplate{
    display:block
}
.search-field.auto #search-list{
    display:none
}
@media (max-width: 900px){
    .search{
        position:fixed;
        top:0;
        right:0;
        z-index:12;
        transition:opacity 0.3s
    }
    .search:before{
        display:none
    }
    .search-form{
        position:relative;
        height:50px
    }
    .fixed ~ .search .search-form{
        height:69px
    }
    .search-form label[for='query']{
        display:none
    }
    .search-form input[type='search']{
        position:absolute;
        top:0;
        right:0;
        z-index:3;
        width:60px;
        height:100%;
        margin:0;
        padding:0;
        cursor:pointer;
        background-color:#fff;
        opacity:0;
        font-size:15px;
        color:#00b6f0;
        text-align:center;
        box-sizing:border-box;
        border:none
    }
    .search-form input::-webkit-input-placeholder{
        color:#00b6f0
    }
    .search-form button{
        position:absolute;
        right:0;
        top:0;
        width:60px;
        height:100%;
        font:0/0 a
    }
    .search-form button[type='submit']{
        z-index:1;
        transition:right .3s
    }
    .search-form button[type='submit'] i{
        display:inline-block;
        width:20px;
        height:20px;
        margin-top:2px;
        background-image:url("../images/icons/pc_header.png");
        background-repeat:no-repeat;
        background-position:-30px 0;
        background-size:50px auto
    }
    .search-form button[type='submit'] i:before{
        content:none
    }
    .search-form button[type='reset']{
        z-index:0
    }
    .search-form button[type='reset']:before{
        content:'';
        position:absolute;
        top:50%;
        left:0;
        width:1px;
        height:19px;
        margin-top:-10px;
        background-color:#cfd1d2
    }
    .search-form button[type='reset'] i{
        display:inline-block;
        margin-top:3px
    }
    .search-form button[type='reset'] i:before,.search-form button[type='reset'] i:after{
        content:'';
        display:block;
        width:22px;
        height:3px;
        margin-top:-3px;
        background-color:#000;
        border-radius:4px
    }
    .search-form button[type='reset'] i:before{
        transform:rotate(45deg)
    }
    .search-form button[type='reset'] i:after{
        transform:rotate(-45deg)
    }
    .search.focus{
        z-index:9999;
        width:100%;
        background-color:#fff
    }
    .search.focus .search-form input[type='search']{
        left:0;
        right:auto;
        z-index:1;
        opacity:1;
        width:calc(100% - 90px);
        padding-left:20px;
        pointer-events:all
    }
    .search.focus .search-form button{
        width:45px;
        height:100%;
        border:0
    }
    .search.focus .search-form button[type='submit']{
        right:45px;
        z-index:2
    }
    .search.focus .search-form button[type='reset']{
        z-index:2
    }
    .search-popularity{
        display:none
    }
    .all+.search{
        opacity:0
    }
}
.search-open{
    overflow:auto
}
.ui-helper-hidden-accessible{
    border:0;
    clip:rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px
}
.snb{
    display:none;
    padding:15px 0
}
@media (max-width: 900px){
    .snb{
        position:relative;
        display:block;
        font-size:14px;
        background-color:#fff;
        z-index:1
    }
}
.snb a{
    position:relative;
    display:block;
    padding:10px 60px
}
.snb a:before{
    content:'';
    position:absolute;
    top:50%;
    left:31px;
    display:block;
    width:3px;
    height:3px;
    margin-top:-1.5px;
    background-color:#101820
}
@media (max-width: 900px){
    .snb a{
        position:relative;
        display:block;
        padding:5px 20px 5px 45px
    }
    .snb a:before{
        left:20px;
        width:15px;
        height:15px;
        margin-top:-7.5px;
        background-image:url("../images/common/global_category_m.png");
        background-color:transparent;
        background-size:200px auto
    }
}
@media (max-width: 900px){
    .snb .playlist a:before{
        background-position:0 -20px
    }
    .snb .abcProject a:before{
        background-position: -75px -19px
    }
    .snb .notice a:before{
        background-position:-75px 0
    }
    .snb .event a:before{
        background-position:-90px 0
    }
    .snb .new-events a:after{
        content:'N';
        display:inline-block;
        width:16px;
        height:16px;
        line-height:16px;
        margin-left:5px;
        font-size:9px;
        border-radius:50%;
        color:#fff;
        background-color:#00b6f0;
        text-align:center;
        vertical-align:middle
    }
    .snb .mt a:before{
        background-image: url('../images/icons/Masstige_logo_Mobile.png');
        background-size: 15px;
        height: 17px;
    }
    .snb .recent a:before{
        background-position:-105px 0
    }
    .snb .cart a:before{
        background-position:-120px 0
    }
    .snb .favorite a:before{
        background-position:-144px 2px
    }
    .snb .stream a:before{
        background-position:-20px -20px
    }
    .snb .stream a.on span{
        display:inline-block;
        position:relative;
        padding-right:11px
    }
    .snb .stream a.on span:after{
        content:'';
        position:absolute;
        top:2px;
        right:0;
        width:6px;
        height:6px;
        border-radius:50%;
        background-color:#e556a6
    }
    .snb .stream:not(:first-child){
        display:none
    }
}
@media (min-width: 901px){
    .compact{
        display:none
    }
}
@media (max-width: 900px){
    .fixed .compact{
        margin-top:70px
    }
    .compact{
        display:block;
        position:absolute;
        top:0;
        width:100%;
        height:50px;
        margin-top:-50px;
        white-space:nowrap;
        background-color:#fff;
        border-bottom:1px solid #e1e1e1;
        transition:margin .2s linear;
        z-index:10
    }
    .compact .scroll{
        padding:0 15px;
        overflow-x:auto;
        overflow-y:hidden
    }
    .compact .scroll ul{
        display:flex
    }
    .compact li{
        text-align:center;
        flex:none
    }
    .compact li a{
        display:block;
        height:49px;
        line-height:49px;
        font-size:17px;
        padding:0 10px
    }
    .compact .nav button{
        position:absolute;
        top:0;
        bottom:0;
        width:50px;
        text-align:center;
        transition:opacity .3s;
        box-sizing:border-box
    }
    .compact .nav button.prev{
        left:0;
        padding-right:20px;
        background:linear-gradient(to right, #fff 0, #fff 65%, rgba(255,255,255,0) 100%)
    }
    .compact .nav button.next{
        right:0;
        padding-left:20px;
        background:linear-gradient(to right, rgba(255,255,255,0) 0, #fff 35%, #fff 100%)
    }
    .compact .nav .hide{
        opacity:0;
        pointer-events:none
    }
}
.sticky-header{
    font-size:18px;
    line-height:53px;
    position:fixed;
    top:68px;
    width:100%;
    height:53px;
    border-bottom:1px solid #e1e1e1;
    background-color:#fff;
    opacity:0;
    transition:opacity 0.3s
}
@media (max-width: 900px){
    .sticky-header{
        top:0;
        height:50px;
        line-height:50px
    }
}
.sticky-header.active{
    z-index:1004;
    opacity:1
}
.active-menu .sticky-header.active{
    z-index:999
}
.sticky-header .scrollbar{
    position:absolute;
    left:0;
    bottom:-4px;
    display:block;
    width:0;
    height:4px;
    background-color:#00b6f0;
    background:linear-gradient(to right, #1cb1e0 0%, #e655a5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1cb1e0', endColorstr='#e655a5',GradientType=1 )
}
.sticky-header .nav{
    position:absolute;
    top:0;
    padding:0 50px;
    width:10%;
    height:100%
}
.sticky-header .nav span{
    position:relative;
    display:inline-block;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
.sticky-header .nav em{
    position:absolute;
    top:100%;
    width:auto;
    padding:5px 10px;
    margin-top:-10px;
    opacity:0;
    line-height:20px;
    max-height:20px;
    font-size:12px;
    border-radius:2px;
    white-space:nowrap;
    background-color:#fff;
    box-shadow:1px 1px 3px rgba(0,0,0,0.18);
    pointer-events:none;
    z-index:1005;
    transition:opacity .3s linear, margin .3s linear
}
@media (max-width: 900px){
    .sticky-header .nav{
        display:none
    }
}
.sticky-header .nav:hover{
    color:#1185ce
}
.sticky-header .nav:hover em{
    opacity:1;
    color:#101820;
    margin-top:-5px
}
.sticky-header .inner{
    padding:0 200px;
    box-sizing:content-box
}
@media (max-width: 900px){
    .sticky-header .inner{
        padding:0
    }
}
.sticky-header .title{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
@media (max-width: 900px){
    .sticky-header .title{
        padding:0 50px 0 15px
    }
}
.sticky-header .title .label{
    display:none;
    width:30px;
    min-width:30px;
    height:30px;
    line-height:30px;
    margin:-2px 10px 0 0;
    vertical-align:middle
}
.sticky-header .title .label .icon:before{
    font-size:13px;
    vertical-align:top
}
.sticky-header #top-sns{
    position:absolute;
    top:0;
    right:200px;
    text-align:right;
    white-space:nowrap;
    overflow:hidden
}
.sticky-header #top-sns button{
    color:#585858;
    font-size:13px;
    border:0;
    background-color:transparent
}
.sticky-header #top-sns button:after{
    content:attr(data-count);
    vertical-align:middle
}
.sticky-header #top-sns button .icon{
    vertical-align:middle
}
.sticky-header #top-sns button .icon:before{
    font-size:15px;
    margin-right:5px;
    vertical-align:middle
}
#top-sns .icon-twitter:before {
    width: 14px;
    background-image: url(../images/common/i-x-gray.png);
    background-position: 0 30%;
    background-size: 14px 14px;
}
@media (max-width: 1310px){
    .sticky-header #top-sns{
        display:none
    }
}
@media (max-width:900px){
    .sticky-header #top-sns .total .total-mobile{
        font-size:15px;
        margin-top:3px;
        color:#585858;
    }
    .sticky-header #top-sns .total .total-pc{
        display: none !important;
    }
}
@media (min-width:901px){
    .sticky-header #top-sns .total .total-pc{
        font-size:15px;
        margin-top:3px;
        color:#585858;
    }
    .sticky-header #top-sns .total .total-mobile{
        display: none !important;
    }
}
.sticky-header #top-sns .mobile{
    pointer-events:none
}
.sticky-header #top-sns .mobile .icon{
    opacity:0.2
}
.sticky-header #top-sns .mobile.pc{
    pointer-events:auto
}
.sticky-header #top-sns .mobile.pc .icon{
    opacity:1
}
.sticky-header #top-sns .band .icon,.sticky-header #top-sns .kakaostory .icon{
    width:20px;
    height:20px;
    background-image:url("../images/common/icon_sns_top.png");
    background-repeat:no-repeat
}
.sticky-header #top-sns .band .icon:before,.sticky-header #top-sns .kakaostory .icon:before{
    display:none
}
.sticky-header #top-sns .band .icon{
    background-position:0 0
}
.sticky-header #top-sns .band:hover{
    color:#38b64b
}
.sticky-header #top-sns .band:hover .icon{
    background-position:0 -20px
}
.sticky-header #top-sns .kakaostory .icon{
    background-position:-20px 0
}
.sticky-header #top-sns .kakaostory:hover{
    color:#fcc800
}
.sticky-header #top-sns .kakaostory:hover .icon{
    background-position:-20px -20px
}
.sticky-header #top-sns .facebook:hover{
    color:#0353e8
}
.sticky-header #top-sns .twitter:hover{
    color:#1084cd
}
.sticky-header #top-sns .kakaotalk:hover{
    color:#fc0
}
.sticky-header #top-sns .line:hover{
    color:#3ace00
}
.sticky-header #top-sns .wechat:hover{
    color:#3ab54a
}
.sticky-header #top-sns .whatsapp:hover{
    color:#0d9f16
}
.sticky-header #top-sns .zalo:hover{
    color:#389dd5
}
.sticky-header #top-sns .viber:hover{
    color:#7b519d
}
.sticky-header #top-sns .qq:hover{
    color:#457dca
}
.sticky-header #top-sns .weibo:hover{
    color:#ed1b24
}
.sticky-header #top-sns .sms:hover{
    color:#ffa31e
}
.sticky-header #top-sns .message:hover{
    color:#457dca
}
.sticky-header #top-sns .url:hover{
    color:#0080ff
}
.sticky-header #top-sns .total{
    float:left;
    font-size:15px;
    margin-top:3px;
    color:#585858
}
.sticky-header #top-sns .total strong{
    margin-right:5px
}
.sticky-header #top-sns .linkedin .icon{
    width:14px;
    height:14px;
    background-position:-25px 0
}
.sticky-header #top-sns .linkedin .icon:hover{
    background-position:-50px 0
}
.sticky-header .btn.toggle{
    display:none
}
@media (max-width: 900px){
    .sticky-header .btn.toggle{
        position:absolute;
        top:0;
        right:0;
        display:block;
        line-height:1;
        border:0;
        background-color:transparent
    }
    .sticky-header .btn.toggle .icon{
        height:auto;
        line-height:1.2
    }
    .sticky-header .btn.toggle .icon:before{
        content:'\e031';
        color:#101820
    }
}
@media (max-width: 767px){
    .sticky-header .btn.toggle .total-count-pc{
        display:none
    }
    .sticky-header .btn.toggle .total-count{
        display:block;
        line-height:1.2;
        margin-top:3px;
        font-size:14px;
        color:#000;
        letter-spacing:0;
        text-align:center
    }
}
@media (min-width: 768px){
    .sticky-header .btn.toggle .total-count{
        display:none
    }
    .sticky-header .btn.toggle .total-count-pc{
        display:block;
        line-height:1.2;
        margin-top:3px;
        font-size:14px;
        color:#000;
        letter-spacing:0;
        text-align:center
    }
}
.sticky-header .prev{
    left:0
}
.sticky-header .prev:before{
    content:'';
    position:absolute;
    top:50%;
    left:15px;
    margin-top:-9px;
    vertical-align:middle;
    display:inline-block;
    width:24px;
    height:19px;
    background-image:url("../images/common/detail_icon.png");
    background-repeat:no-repeat
}
.sticky-header .prev:after{
    content:'';
    position:absolute;
    top:50%;
    right:0;
    display:block;
    width:1px;
    height:20px;
    margin-top:-10px
}
.sticky-header .prev:hover:before{
    background-image:url("../images/common/detail_icon_over.png")
}
.sticky-header .prev em{
    left:50px
}
.sticky-header .next{
    right:0;
    text-align:right
}
.sticky-header .next:before{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    display:block;
    width:1px;
    height:20px;
    margin-top:-10px
}
.sticky-header .next:after{
    content:'';
    position:absolute;
    top:50%;
    right:15px;
    margin-top:-9px;
    vertical-align:middle;
    display:inline-block;
    width:24px;
    height:19px;
    background-image:url("../images/common/detail_icon.png");
    background-repeat:no-repeat;
    background-position:100% 0
}
.sticky-header .next:hover:after{
    background-image:url("../images/common/detail_icon_over.png")
}
.sticky-header .next em{
    right:50px
}
[data-loc="go"] .body-sub #container{
    padding-top:235px
}
[data-loc="go"] .body-sub #container[class^="mypage-"]{
    min-height:calc(100% + 141px)
}
@media (max-width: 900px){
    [data-loc="go"] .body-sub #container{
        padding-top:170px
    }
}
[data-loc="go"] #container{
    padding-top:325px
}
@media (max-width: 900px){
    [data-loc="go"] #container{
        padding-top:172px
    }
}
[data-loc="go"] .header{
    height:69px;
    z-index:1004
}
@media (max-width: 900px){
    [data-loc="go"] .header{
        height:50px
    }
}
[data-loc="go"] .header-field{
    height:auto
}
[data-loc="go"] .header-utils .btn-search{
    display:none
}
[data-loc="go"] .header-menus.active-full .menu-lists{
    top:120px
}
[data-loc="go"] .header-menus.active-full .lists .menu>a{
    opacity:1;
    height:52px
}
[data-loc="go"] .header-menus:not(.active-full) .menu-lists{
    display:none
}
@media (max-width: 900px){
    [data-loc="go"] .header-menus:not(.active-full) .menu-lists{
        display:block;
        height:auto
    }
}
[data-loc="go"] .header-dim{
    top:195px
}
[data-loc="go"] .menu-lists{
    margin-top:63px;
    height:0
}
@media (max-width: 900px){
    [data-loc="go"] .menu-lists{
        margin-top:0;
        height:auto
    }
}
[data-loc="go"] .menu-lists .lists .menu>a{
    opacity:0;
    height:0
}
@media (max-width: 900px){
    [data-loc="go"] .menu-lists .lists .menu>a{
        opacity:1;
        height:46px
    }
}
[data-loc="go"] .search{
    width:100%;
    z-index:1003
}
@media (max-width: 900px){
    [data-loc="go"] .search{
        pointer-events:none;
        z-index:1004
    }
}
[data-loc="go"] .search-input{
    width:100%;
    opacity:1;
    height:64px;
    border-bottom:0;
    font-size:24px;
    text-align:center;
    background-color:#06a7e2;
    color:#fff;
    box-shadow:inset 0px 0px 10px 0px rgba(0,0,0,0.1);
    border-radius:0;
    box-sizing:border-box
}
@media (max-width: 900px){
    [data-loc="go"] .search-input{
        pointer-events:all
    }
}
[data-loc="go"] .search-input::-webkit-input-placeholder{
    color:#fff;
    opacity:.9;
    -webkit-transition:opacity .3s;
    transition:opacity .3s
}
[data-loc="go"] .search-input::-moz-placeholder,[data-loc="go"] .search-input:-moz-placeholder,[data-loc="go"] .search-input:-ms-input-placeholder{
    color:#fff;
    opacity:.9;
    -moz-transition:opacity .3s;
    -ms-transition:opacity .3s;
    transition:opacity .3s
}
[data-loc="go"] .search-field .search-form input{
    background-color:#06a7e2;
    color:#fff;
    -webkit-appearance:none;
    -webkit-border-radius:0
}
@media (max-width: 900px){
    [data-loc="go"] .search-field .search-form input{
        right:40px;
        width:40px;
        z-index:4;
        transition:none
    }
}
[data-loc="go"] .search-history{
    max-height:65px
}
@media (max-width: 900px){
    [data-loc="go"] .search-history{
        display:block;
        background-color:#fff
    }
}
[data-loc="go"] .search-popularity{
    height:53px;
    line-height:53px;
    border-bottom:1px solid #eee;
    box-sizing:border-box
}
@media (max-width: 900px){
    [data-loc="go"] .search-popularity{
        display:block;
        height:0;
        transition:height .3s;
        overflow:hidden
    }
}
@media (max-width: 900px){
    [data-loc="go"] .search-popularity .scroll{
        margin-left:-10px
    }
}
[data-loc="go"] .search-popularity .inner{
    height:100%
}
@media (max-width: 900px){
    [data-loc="go"] .search-popularity .inner{
        white-space:nowrap;
        overflow-x:scroll
    }
}
@media (max-width: 900px){
    [data-loc="go"] .search-popularity .tag{
        margin:0 10px
    }
}
[data-loc="go"] .search-popularity .tag:before{
    /*content:'#';*/
    display:inline-block
}
@media (max-width: 900px){
    [data-loc="go"] .search-list{
        display:none
    }
}
[data-loc="go"] .search .btn-searchs{
    transform:scale(1)
}
[data-loc="go"] .search .btn-submit{
    display:block;
    right:111px;
    color:#fff
}
@media (max-width: 900px){
    [data-loc="go"] .search .btn-submit{
        right:40px;
        width:40px;
        background-color:transparent;
        z-index:3
    }
}
[data-loc="go"] .search .btn-submit:hover{
    color:#fff
}
@media (max-width: 900px){
    [data-loc="go"] .search .btn-submit i{
        width:auto;
        height:auto;
        margin-top:0;
        background-image:none
    }
}
@media (max-width: 900px){
    [data-loc="go"] .search .btn-submit i:before{
        content:'\e02f';
        font-size:20px;
        color:#101820;
        vertical-align:middle
    }
}
[data-loc="go"] .search .btn-reset{
    display:none
}
[data-loc="go"] .search .btn strong,[data-loc="go"] .search .btn span{
    display:none
}
@media (max-width: 900px){
    [data-loc="go"] .search.focus .search-field{
        pointer-events:all
    }
}
[data-loc="go"] .search.focus .search-form{
    border-bottom:1px solid #e1e1e1
}
@media (max-width: 900px){
    [data-loc="go"] .search.focus .search-form{
        border-bottom:0
    }
}
[data-loc="go"] .search.focus .search-form input{
    width:100%;
    color:#fff;
}
[data-loc="go"] .search.focus .search-form input::-webkit-input-placeholder{
    opacity:0
}
@media (max-width: 900px){
    [data-loc="go"] .search.focus .search-form input::-webkit-input-placeholder{
        opacity:.9
    }
}
[data-loc="go"] .search.focus .search-form input::-moz-placeholder{
    opacity:0
}
[data-loc="go"] .search.focus .search-form input::-moz-placeholder,[data-loc="go"] .search.focus .search-form input:-moz-placeholder,[data-loc="go"] .search.focus .search-form input:-ms-input-placeholder,[data-loc="go"] .search.focus .search-form input::placeholder{
    opacity:0
}
@media (max-width: 900px){
    [data-loc="go"] .search.focus .search-form input::-moz-placeholder{
        opacity:.9
    }
    [data-loc="go"] .search.focus .search-form input::-moz-placeholder,[data-loc="go"] .search.focus .search-form input:-moz-placeholder,[data-loc="go"] .search.focus .search-form input:-ms-input-placeholder,[data-loc="go"] .search.focus .search-form input::placeholder{
        opacity:.9
    }
}
@media (max-width: 900px){
    [data-loc="go"] .search.focus .search-form input{
        padding-left:0;
        left:0;
        width:100%;
        opacity:1
    }
}
@media (max-width: 900px){
    [data-loc="go"] .search.focus .search-form button{
        right:0;
        width:60px;
        z-index:3
    }
}
@media (max-width: 900px){
    [data-loc="go"] .search.focus .search-form button i:before{
        color:#fff
    }
}
[data-loc="go"] .fixed.header{
    height:153px
}
@media (max-width: 900px){
    [data-loc="go"] .fixed.header{
        height:69px
    }
}
[data-loc="go"] .fixed.header .menu-lists{
    top:205px;
    height:63px
}
@media (max-width: 900px){
    [data-loc="go"] .fixed.header .menu-lists{
        height:auto
    }
}
[data-loc="go"] .fixed ~ .search{
    top:152px;
    z-index:1004
}
@media (max-width: 900px){
    [data-loc="go"] .fixed ~ .search{
        top:69px;
        transition:top .3s, z-index .3s
    }
}
[data-loc="go"] .fixed ~ .search .search-form{
    height:63px
}
@media (max-width: 900px){
    [data-loc="go"] .fixed ~ .search .search-form{
        height:50px
    }
}
@media (max-width: 900px){
    [data-loc="go"] .fixed ~ .search .search-form input{
        left:0;
        width:100%;
        opacity:1;
        z-index:3
    }
}
@media (max-width: 900px){
    [data-loc="go"] .fixed ~ .search .search-popularity{
        height:53px;
        pointer-events:all
    }
}
@media (max-width: 900px){
    [data-loc="go"] .fixed ~ .search .btn-submit{
        right:0;
        width:60px
    }
}
@media (max-width: 900px){
    [data-loc="go"] .fixed ~ .search .btn-submit i:before{
        color:#fff
    }
}
@media (max-width: 900px){
    [data-loc="go"] .fixed .compact{
        margin-top:119px;
        display:none
    }
    .search-open [data-loc="go"] .fixed .compact{
        display:none
    }
}
[data-loc="go"].gnb-open .search{
    z-index:0
}
[data-loc="go"].search-open .body-main:before{
    top:69px
}
@media (min-width: 901px){
    [data-loc="go"].search-open .header{
        z-index:1004
    }
}
[data-loc="go"].search-open .search{
    z-index:1004
}
@media (max-width: 900px){
    [data-loc="go"].search-open .search-field{
        pointer-events:all
    }
}
@media (max-width: 900px){
    [data-loc="go"].search-open .search-popularity{
        height:53px;
        pointer-events:all
    }
}
@media (max-width: 900px){
    [data-loc="go"]:not(.search-open) #search-list{
        display:none
    }
}
[data-loc="go"] .sticky-header{
    top:131px
}
@media (max-width: 900px){
    [data-loc="go"] .sticky-header{
        top:0
    }
}
[data-loc="go"] .sticky-header.active{
    z-index:1004
}
[data-loc="go"].layer-open:not(.search-open) body:before{
    z-index:1005
}
[data-loc="go"].layer-open:not(.search-open) .wrap-layer{
    z-index:1005
}
[data-loc="go"]:not(.has-popularity) .body-main #container{
    padding-top:272px
}
@media (max-width: 900px){
    [data-loc="go"]:not(.has-popularity) .body-main #container{
        padding-top:119px
    }
}
[data-loc="go"]:not(.has-popularity) .body-sub #container{
    padding-top:271px
}
[data-loc="go"]:not(.has-popularity) .body-sub .result-empty{
    min-height:calc(100vh - 425px)
}
[data-loc="go"]:not(.has-popularity) .menu-lists{
    height:0;
    margin-top:0
}
#footer{
    position:relative;
    height:155px;
    font-size:15px;
    background-color:#2a2a2a;
    z-index:15
}
#footer.up{
    z-index:1005
}
@media (max-width: 900px){
    #footer{
        height:auto;
        padding:0;
        text-align:center
    }
}
#footer .quick{
    position:absolute;
    bottom:calc(100% + 60px);
    right:70px;
    width:56px;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    font-size:0
}
@media (max-width: 1280px){
    #footer .quick{
        right:16px
    }
}
@media (max-width: 900px){
    #footer .quick{
        bottom:calc(100% + 85px);
        right:20px;
        width:45px
    }
}
#footer .quick.fix{
    position:fixed;
    bottom:60px;
    right:70px
}
@media (max-width: 1280px){
    #footer .quick.fix{
        right:16px
    }
}
@media (max-width: 900px){
    #footer .quick.fix{
        /*bottom:45px;*/
        right:20px
    }
}
#footer .quick .top{
    display:none;
    width:56px;
    height:56px;
    overflow:hidden;
    text-indent:-9999px;
    background:url("../images/common/btn-top.png") no-repeat 0 0;
    background-size:cover
}
@media (max-width: 900px){
    #footer .quick .top{
        width:45px;
        height:45px;
        background-image:url("../images/common/btn-top-m.png")
    }
}
#footer .quick .corp-box{
    display:none;
    position:relative
}
#footer .quick .corp-box .global{
    display:inline-block;
    width:56px;
    height:56px;
    margin-top:8px;
    overflow:hidden;
    text-indent:-9999px;
    background:url("../images/common/btn-global.png") no-repeat 0 0;
    background-size:cover
}
#footer .quick .corp-box .corporation{
    display:none;
    position:absolute;
    bottom:0;
    right:100%;
    padding:12px 0;
    border:4px solid #02b9f3;
    background:#fff;
    height: 70vh;
    overflow: auto;
    overscroll-behavior: none;
}
#footer .quick .corp-box .corporation li.active{
    font-weight:bold;
    color:#02b9f3
}
#footer .quick .corp-box .corporation li.go{
    font-weight:bold
}
#footer .quick .corp-box .corporation li a{
    display:block;
    font-size:16px;
    line-height:32px;
    padding:0 20px;
    white-space:nowrap
}
#footer .quick .corp-box .corporation li a:hover{
    background-color:#f9f9f9
}
#footer .opener{
    display:none
}
#footer .inner{
    max-width:none
}
@media (max-width: 900px){
    #footer .inner{
        padding-bottom:20px
    }
}
#footer .nav-util{
    display:none
}
@media (max-width: 900px){
    #footer .nav-util{
        display:block;
        margin:0 -20px;
        background-color:#414141
    }
}
@media (max-width: 900px){
    #footer .nav-util nav{
        height:auto;
        text-align:center
    }
}
@media (max-width: 900px){
    #footer .nav-util nav a{
        display:block;
        height:43px;
        padding:10px 0;
        color:#d7d7d7;
        box-sizing:border-box
    }
}
#footer .nav-util a:before{
    display:none
}
@media (max-width: 900px){
    #footer .nav-util a:before{
        content:'';
        display:inline-block;
        width:15px;
        height:15px;
        margin-top:-4px;
        margin-right:7px;
        vertical-align:middle;
        background-image:url("../images/common/footer_icon.png");
        background-size:auto 100%;
        background-repeat:no-repeat
    }
}
@media (max-width: 900px){
    #footer .nav-util .notice a:before{
        background-position:0 0
    }
}
@media (max-width: 900px){
    #footer .nav-util .event a:before{
        background-position:-15px 0
    }
}
@media (max-width: 900px){
    #footer .nav-util .recent a:before{
        background-position:-90px 0
    }
}
@media (max-width: 900px){
    #footer .nav-util .playlist a:before{
        background-position:-75px 0;
    }
}
@media (max-width: 900px){
    #footer .nav-util .cart a:before{
        background-position:-45px 0
    }
}
@media (max-width: 900px){
    #footer .nav-util .favorite a:before{
        background-position:-60px 0
    }
}
@media (max-width: 900px){
    #footer .nav-util ul:after{
        content:'';
        display:block;
        clear:both
    }
}
@media (max-width: 900px){
    #footer .nav-util li{
        display:block;
        float:left;
        width:50%;
        line-height:inherit;
        border-width:1px 0 0 1px;
        border-style:solid;
        border-color:#5d5d5d;
        box-sizing:border-box
    }
}
@media (max-width: 900px){
    #footer .nav-util li:nth-child(odd){
        border-left:0
    }
}
@media (max-width: 900px){
    #footer .nav-util li:last-child:nth-child(odd){
        width:100%
    }
}
@media (max-width: 900px){
    #footer .nav-util li:after,#footer .nav-util li a:after{
        display:none
    }
}
.site{
    padding:23px 45px;
    border-bottom:1px solid #363636;
    text-align:right
}
@media (max-width: 900px){
    .site{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        padding:5px 0;
        text-align:center
    }
}
@media (max-width: 900px){
    .site:after{
        content:'';
        display:block;
        clear:both
    }
}
.site a{
    color:#aaa;
    display:inline-block
}
@media (max-width: 900px){
    .site a{
        position:relative;
        float:left;
        width:50%;
        padding:10px 15px;
        box-sizing:border-box
    }
}
.site a:before{
    content:'';
    display:inline-block;
    width:1px;
    height:9px;
    margin:0 15px;
    background-color:#6e6e6e;
    vertical-align:middle
}
@media (max-width: 900px){
    .site a:before{
        position:absolute;
        top:50%;
        left:0;
        margin:-4.5px 0 0;
        background-color:#4a4a4a
    }
}
.site a:first-of-type:before{
    display:none
}
.language{
    position:absolute;
    right:45px;
    bottom:0;
    width:270px
}
@media (max-width: 900px){
    .language{
        position:static;
        top:inherit;
        left:0;
        right:0;
        width:100%
    }
}
.language .flag{
    display:none;
    width:28px;
    height:20px;
    margin:-2px 10px 0 0;
    border:1px solid #e1e1e1;
    vertical-align:middle
}
@media (max-width: 900px){
    .language .select{
        width:100%;
        height:35px
    }
}
.language li.active a:before{
    display:none
}
.language li.active a:after{
    content:'\e00d';
    display:inline-block;
    margin:-3px 0 0 5px;
    vertical-align:middle;
    font-size:12px;
    font-family:'atomy-icon-font';
    font-weight:normal
}
.foot-util{
    position:absolute;
    left:45px;
    top:23px
}
@media (max-width: 900px){
    .foot-util{
        position:static;
        padding:5px 0;
        border-bottom:1px solid #414141
    }
}
.foot-util ul{
    float:right
}
@media (max-width: 900px){
    .foot-util ul{
        float:none;
        display:flex;
        align-items:center
    }
}
@media (max-width: 900px){
    .foot-util ul:after{
        content:'';
        display:block;
        clear:both
    }
}
.foot-util li{
    display:inline-block
}
@media (max-width: 900px){
    .foot-util li{
        position:relative;
        display:block;
        float:left;
        width:50%;
        text-align:center
    }
}
@media (max-width: 900px){
    .foot-util li:first-child a:before{
        display:none
    }
}
.foot-util li:last-child a:after{
    display:none
}
.foot-util li a{
    position:relative;
    display:inline-block;
    color:#aaa;
    vertical-align:middle
}
@media (max-width: 900px){
    .foot-util li a{
        display:block;
        padding:10px
    }
}
@media (max-width: 900px){
    .foot-util li a:before{
        content:'';
        position:absolute;
        top:50%;
        left:0;
        display:block;
        width:1px;
        height:11px;
        margin:-5.5px 0 0;
        background-color:#4a4a4a
    }
}
.foot-util li a:after{
    content:'';
    display:inline-block;
    width:1px;
    height:9px;
    margin:0 15px;
    background-color:#6e6e6e;
    vertical-align:middle
}
@media (max-width: 900px){
    .foot-util li a:after{
        display:none
    }
}
.copyright{
    padding:22px 45px 0;
    font-size:12px;
    color:#6e6e6e
}
@media (max-width: 900px){
    .copyright{
        padding:25px 0 0 0
    }
}
.copyright a{
    display:inline-flex;
    align-items:center;
    width:50px;
    height:42px;
    margin-right:12px;
    vertical-align:middle
}
@media (max-width: 900px){
    .copyright a{
        width:42.5px
    }
}
.copyright a img{
    flex:none
}
.feeding-list .debug{
    display:inline-block;
    position:fixed;
    top:50px;
    left:0;
    padding:0 5px;
    font-size:12px;
    color:#fff;
    line-height:20px;
    background-color:rgba(0,0,0,0.6);
    z-index:1000
}
@media (min-width: 901px){
    .feeding-list #footer .quick .corp-box{
        display:block
    }
}
.feeding-list .loading-main{
    display:block;
    height:100px;
    width:100%;
    max-width:1120px;
    min-width:300px;
    margin:0 auto
}
@media (max-width: 900px){
    .feeding-list .loading-main{
        height:50px
    }
}
.feeding-list.ing #footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    transition:all 0.3s
}
.feeding-list.ing #footer .opener{
    display:block;
    position:absolute;
    top:-10px;
    left:0;
    width:100%;
    height:10px;
    background-color:#2a2a2a
}
.feeding-list.ing #footer .opener button{
    display:inline-block;
    position:absolute;
    bottom:-1px;
    left:50%;
    min-width:205px;
    height:43px;
    line-height:43px;
    text-align:center;
    transform:translateX(-50%);
    background-color:#2a2a2a
}
.feeding-list.ing #footer .opener button strong{
    display:inline-block;
    font-size:18px;
    color:#fff
}
.feeding-list.ing #footer .opener button strong:after{
    content:' OPEN'
}
.feeding-list.ing #footer .opener button i{
    display:inline-block;
    width:20px;
    height:12px;
    margin-left:5px;
    background:url("../images/common/ft-open-arr.png") no-repeat 0 0;
    background-size:100%
}
.feeding-list.ing #footer .opener button:before{
    content:'';
    position:absolute;
    top:0;
    left:-25px;
    width:26px;
    height:100%;
    background:url("../images/common/ft-open-left.png") no-repeat 0 0;
    background-size:100% auto
}
.feeding-list.ing #footer .opener button:after{
    content:'';
    position:absolute;
    top:0;
    right:-25px;
    width:26px;
    height:100%;
    background:url("../images/common/ft-open-right.png") no-repeat 0 0;
    background-size:100% auto
}
.feeding-list.ing #footer.open .opener button strong:after{
    content:' CLOSE'
}
.feeding-list.ing #footer.open .opener button i{
    background-image:url("../images/common/ft-open-arr2.png")
}
@media (max-width: 900px){
    .feeding-list.ing #footer .opener{
        top:-3px;
        height:3px
    }
    .feeding-list.ing #footer .opener button{
        bottom:2px;
        min-width:125px;
        height:25px;
        line-height:25px
    }
    .feeding-list.ing #footer .opener button:before{
        left:-14px;
        width:15px;
        height:25px
    }
    .feeding-list.ing #footer .opener button:after{
        right:-14px;
        width:15px;
        height:25px
    }
    .feeding-list.ing #footer .opener button strong{
        font-size:13px
    }
    .feeding-list.ing #footer .opener button i{
        width:11px;
        height:7px
    }
    .feeding-list.ing #footer.ios .opener{
        top:calc(-3px - constant(safe-area-inset-bottom));
        top:calc(-3px - env(safe-area-inset-bottom));
        padding-bottom:constant(safe-area-inset-bottom);
        padding-bottom:env(safe-area-inset-bottom)
    }
    .feeding-list.ing #footer.ios .opener button{
        bottom:calc(3px + constant(safe-area-inset-bottom) - 1px);
        bottom:calc(3px + env(safe-area-inset-bottom) - 1px)
    }
    .feeding-list.ing #footer.ios .quick{
        bottom:calc(100% + 45px + constant(safe-area-inset-bottom));
        bottom:calc(100% + 45px + env(safe-area-inset-bottom))
    }
}
.main .banners{
    position:relative;
    overflow:hidden;
    z-index:1;
    background-color:#fff
}
@media (max-width: 900px){
    .main .banners{
        border-top:5px solid #f7f7f7;
        border-bottom:0;
        background-color:#f7f7f7;
        overflow:auto
    }
}
.main .banners:after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    border-bottom:1px solid #e6e6e6
}
@media (max-width: 900px){
    .main .banners .inner{
        display:block;
        width:1000%;
        padding:0 30px 0 0
    }
}
.main .banners .inner:after{
    content:'';
    display:block;
    clear:both
}
.main .banners .banner{
    width:50%;
    float:left;
    vertical-align:middle
}
@media (max-width: 900px){
    .main .banners .banner{
        position:relative;
        display:block;
        width:auto;
        float:none;
        border-bottom:5px solid #f7f7f7;
        background-color:#fff;
        float:left;
        margin-right:5px
    }
    .main .banners .banner:first-child:after{
        display:none
    }
}
.main .banners .banner a{
    position:relative;
    display:block;
    width:100%
}
@media (max-width: 900px){
    .main .banners .banner a{
        display:block;
        height:100%
    }
}
.main .banners .banner img{
    display:block;
    width:auto;
    max-width:auto;
    min-height:140px;
    max-height:140px;
    margin-left:auto;
    margin-right:0
}
@media (max-width: 900px){
    .main .banners .banner img{
        vertical-align:top;
        width:auto;
        max-width:100%;
        height:100px;
        max-height:none;
        min-height:0;
        margin:0 0 0 auto
    }
}
@media (max-width: 900px){
    .main .banners .banner .sub-title{
        top:18px;
        left:20px;
        font-size:12px;
        color:#999
    }
}
@media (max-width: 900px){
    .main .banners .banner .title{
        top:35px;
        left:20px;
        font-size:19px;
        font-weight:600;
        letter-spacing:-2px
    }
}
.main .banners .more,.main .banners .title,.main .banners .sub-title{
    position:absolute;
    left:30px
}
.main .banners .more{
    bottom:27px;
    color:#06a7e2;
    font-weight:bold;
    letter-spacing:-1px
}
@media (max-width: 1120px){
    .main .banners .more{
        font-size:11px;
        bottom:17px
    }
}
@media (max-width: 900px){
    .main .banners .more{
        left:20px;
        bottom:17px;
        font-size:11px
    }
}
.main .banners .more .icon{
    margin-left:3px
}
.main .banners .more .icon:before{
    font-size:10px;
    font-weight:normal
}
@media (max-width: 1120px){
    .main .banners .more .icon:before{
        font-size:9px
    }
}
@media (max-width: 900px){
    .main .banners .more .icon:before{
        font-size:8px
    }
}
.main .banners .title{
    top:50px;
    font-size:33px;
    font-weight:bold;
    letter-spacing:-1px
}
@media (max-width: 1120px){
    .main .banners .title{
        font-size:19px
    }
}
.main .banners .sub-title{
    top:25px;
    font-size:20px
}
@media (max-width: 1120px){
    .main .banners .sub-title{
        font-size:12px
    }
}
@media (max-width: 900px){
    .main .banners .slick-initialized{
        width:auto;
        overflow:hidden
    }
}
@media (max-width: 900px){
    .main .banners .slick-list{
        overflow:visible
    }
}
.main .products-list{
    position:relative;
    padding-top:50px;
    padding-bottom:70px;
    background-color:#f4f4f4
}
@media (max-width: 900px){
    .main .products-list{
        padding-top:8px;
        padding-bottom:16px
    }
}
.main .products-list h3{
    font-size:35px;
    font-weight:600;
    text-align:center
}
@media (max-width: 900px){
    .main .products-list h3{
        font-size:18px
    }
}
.main .products-list .utils{
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    padding-bottom:100%;
    pointer-events:none
}
.main .products-list .utils p{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    display:flex;
    justify-content: flex-end;
}
.main .products-list .utils button{
    font:0/0 a;
    display:inline-block;
    width:42px;
    height:42px;
    background-color:#fff;
    pointer-events:all
}
.main .products-list .utils button:before{
    color:#00b6f0;
    font-family:'atomy-icon-font';
    font-size:20px;
    line-height:42px;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:inline-block
}
.main .products-list .utils button.favorite:before{
    content:'\e018'
}
.main .products-list .utils button.favorite.active:before{
    content:'\e019';
    color:#ee1521;
}
.main .products-list .utils button.cart:before{
    content:'\e00b'
}
.main .products-list .item:hover .utils{
    display:block
}
/*@media (max-width: 900px){
    .main .products-list .item:hover .utils{
        display:none
    }
}*/
@media (max-width: 900px){
    .main .products-list .item:focus .utils{
        display:block
    }
}
@media (max-width: 900px){
    .main .products-list .slick-list{
        overflow:visible
    }
}
.main .products-list .slick-track{
    margin:0 auto
}
.main .products-list .slick-arrow{
    position:absolute;
    top:50%;
    width:50px;
    height:60px;
    margin-top:-47px;
    background-color:#fff;
    transform:translateY(-50%);
    box-shadow:0px 4px 8px 0px rgba(0,0,0,0.1);
    box-sizing:border-box
}
.main .products-list .slick-arrow:before{
    color:#60656a;
    font-size:20px
}
.main .products-list .slick-next{
    right:-25px
}
.main .products-list .slick-prev{
    left:-25px
}
.main .products-wrap{
    position:relative;
    margin-top:25px;
    margin-right:75px;
    margin-left:75px
}
@media (max-width: 900px){
    .main .products-wrap{
        margin-top:15px;
        margin-left:auto;
        margin-right:auto;
        padding-left:20px;
        padding-right:30px;
        overflow:hidden
    }
}
.main .products-slider .item{
    position:relative;
    margin-right:15px;
    margin-left:15px;
    text-align:center
}
.main .products-slider .item a{
    display:block;
    padding-bottom:10px
}
@media (max-width: 900px){
    .main .products-slider .item{
        margin-left:10px;
        margin-right:10px
    }
}
.main .products-slider .img{
    position:relative;
    margin:0;
    padding-bottom:79.89%;
    border:1px solid #ebebeb;
    background-color:#fff
}
.main .products-slider .img span{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.main .products-slider .img span img{
    cursor: pointer;
    display:inline-block;
    max-height:100%
}
.main .products-slider .title,.main .products-slider .price{
    font-size:20px
}
@media (max-width: 900px){
    .main .products-slider .title,.main .products-slider .price{
        font-size:15px;
        font-weight:normal
    }
}
.main .products-slider .title{
    font-weight:bold;
    padding-top:20px;
    padding-bottom:10px
}
.main .products-slider .price{
    color:#00b6f0;
    padding-bottom:15px
}
.main .products-slider .shop{
    color:#00b6f0
}
.main .products-slider .shop span{
    position:relative;
    display:inline-block;
    line-height:38px;
    height:40px;
    padding-right:20px;
    padding-left:20px;
    font-size:15px;
    border:1px solid;
    border-radius:20px;
    box-sizing:border-box;
    cursor:pointer;
}
@media (max-width: 900px){
    .main .products-slider .shop span{
        display:inline-flex;
        align-items:center;
        height:30px;
        padding:0 15px;
        border-radius:15px
    }
}
.main .products-slider .shop span:after{
    content:'';
    display:inline-block;
    width:16px;
    height:11px;
    margin-left:13px;
    margin-right:5px;
    background-image:url("../images/icons/go-shop.png")
}
@media (max-width: 900px){
    .main .products-slider .shop span:after{
        margin-left:8px;
        margin-right:0
    }
}
.main .products-slider .new{
    position:absolute;
    top:12px;
    right:14px;
    width:70px;
    height:70px;
    font-size:20px;
    font-style:normal;
    font-weight:bold;
    color:#fff;
    line-height:70px;
    border-radius:50%;
    background-color:#99e1f9;
    text-transform:uppercase
}
@media (max-width: 900px){
    .main .products-slider .new{
        width:35px;
        height:35px;
        line-height:35px;
        font-size:12px
    }
}
@media (max-width: 900px){
    .main .product{
        border-bottom:5px solid #f7f7f7
    }
}
.main .play-list{
    background-color:#fafafa;
    padding:1px 0;
    position:relative;
    z-index:1
}
.main .play-list--wrap{
    display:flex;
    margin:60px 90px
}
.main .play-list__title{
    flex:none;
    width:298px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:298px;
    padding:0 50px;
    color:#fff;
    background:url("../images/common/bg-playlist-main.png") no-repeat 0 0/cover;
    box-sizing:border-box;
    text-align:center
}
.main .play-list__title h3{
    font-size:34px;
    font-weight:bold;
    line-height:1.2;
    word-break:keep-all
}
.main .play-list__title .btn-stroke{
    display:inline-block;
    height:36px;
    line-height:34px;
    padding:0 20px;
    border:1px solid #636073;
    border-radius:18px;
    background-color:transparent;
    color:#fff;
    font-size:15px;
    box-sizing:border-box;
    margin-top:20px
}
.main .play-list__title .icon-go{
    display:inline-flex;
    align-items:center;
    margin-left:12px;
    vertical-align:middle
}
.main .play-list__title .icon-go:before,.main .play-list__title .icon-go:after{
    content:'';
    display:block
}
.main .play-list__title .icon-go:before{
    width:10px;
    height:1px;
    background-color:#fff
}
.main .play-list__title .icon-go:after{
    border-left:6px solid #fff;
    border-top:5.5px solid transparent;
    border-bottom:5.5px solid transparent;
    box-sizing:border-box
}
.main .play-list__contents{
    flex:none;
    width:calc(100% - 298px)
}
@media (max-width: 1400px){
    .main .play-list__contents{
        width:100%
    }
}
.main .play-list__contents .list{
    padding-bottom:0
}
.main .play-list__contents .list .img{
    max-width:none;
    height:100%;
    border:none
}
.main .play-list__contents .list .img-wrap{
    height:100%
}
.main .play-list__contents .list .img img{
    -o-object-fit:cover;
    object-fit:cover
}
.main .play-list__contents .inner{
    max-width:none;
    display:flex;
    flex-wrap:wrap;
    margin-bottom:-22px
}
.main .play-list__contents .inner .article{
    background-color:#fff;
    border:1px solid #ebebeb;
    flex:none;
    width:calc(50% - 30px);
    box-sizing:border-box;
    margin-left:30px;
    margin-bottom:22px
}
.main .play-list__contents .inner .article+.article{
    margin-top:0
}
.main .play-list__contents .inner .article a{
    display:flex;
    width:100%
}
@media (max-width: 1400px){
    .main .play-list__contents .inner .article a{
        display:block
    }
}
.main .play-list__contents .inner .article a .img-wrap{
    width:48%;
    height:100%;
    flex:none;
    align-self:unset
}
.main .play-list__contents .inner .article a .img-wrap .label{
    display:none
}
.main .play-list__contents .inner .article .content{
    width:52%;
    padding:30px 30px 15px;
    align-self:center;
    overflow:hidden
}
.main .play-list__contents .inner .article .content .title{
    padding-right:0
}
.main .play-list__contents .inner .article .content .title span{
    max-width:80%;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden
}
.main .play-list__contents .inner .article .content .explain{
    overflow:hidden;
    text-overflow:ellipsis;
    max-height:45px
}
@supports (-webkit-line-clamp: 2){
    .main .play-list__contents .inner .article .content .explain{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        white-space:normal
    }
}
@media (max-width: 900px){
    .main .play-list__contents .inner .article .content .explain{
        display:none
    }
}
.main .play-list__contents .inner .article .content .meta{
    display:none
}
@media (max-width: 1400px){
    .main .play-list{
        background:url("../images/common/bg-playlist-main-mo.png") no-repeat center 0/cover
    }
    .main .play-list--wrap{
        display:block;
        margin:20px 0 25px
    }
    .main .play-list__title{
        background:none;
        width:100%
    }
    .main .play-list__title h3{
        font-size:21px
    }
    .main .play-list__title .btn-stroke{
        display:none
    }
    .main .play-list__contents .inner{
        margin-bottom:0
    }
}
@media (max-width: 1400px) and (max-width: 900px){
    .main .play-list__contents .inner:after{
        clear:none;
        flex:none;
        width:10px;
        height:10px
    }
}
@media (max-width: 1400px){
    .main .play-list__contents .inner .article{
        border:0;
        margin:0 10px
    }
}
@media (max-width: 1400px) and (max-width: 900px){
    .main .play-list__contents .inner .article{
        flex:none;
        width:240px
    }
}
@media (max-width: 1400px){
    .main .play-list__contents .inner .article a{
        flex-direction:column
    }
    .main .play-list__contents .inner .article a .img-wrap{
        width:100%;
        max-width:none;
        height:auto;
        flex:1
    }
    .main .play-list__contents .inner .article .amount{
        width:100%
    }
    .main .play-list__contents .inner .article .content{
        width:100%;
        align-self:baseline;
        padding:15px;
        box-sizing:border-box
    }
    .main .play-list__contents .inner .article .content .title{
        white-space:normal
    }
    .main .play-list__contents .inner .article .content .title span{
        display:inline-block
    }
    .main .play-list__contents .list{
        overflow-x:auto;
        padding-top:30px
    }
    .main .play-list__contents .list .inner{
        flex-wrap:nowrap;
        margin:0
    }
}
@media (max-width: 1400px) and (max-width: 900px){
    .main .play-list__contents .list .inner{
        margin:0 -10px
    }
}
.main .category{
    position:relative;
    padding:40px 0 50px;
    border-bottom:1px solid #e6e6e6;
    background-color:#fff;
    overflow:hidden;
    z-index:1
}
@media (max-width: 900px){
    .main .category{
        padding:8px 0;
        border-bottom:5px solid #f7f7f7;
        overflow:hidden
    }
}
.main .category h3{
    font-size:35px;
    font-weight:600;
    text-align:center;
    margin:0 90px
}
@media (min-width: 1600px){
    .main .category h3{
        margin:0 160px
    }
}
@media (max-width: 1280px){
    .main .category h3{
        margin:0 55px
    }
}
@media (max-width: 900px){
    .main .category h3{
        font-size:18px;
        text-align:left;
        margin:0
    }
}
.main .category .inner{
    max-width:none
}
@media (max-width: 900px){
    .main .category .inner{
        padding:0 30px 0 20px;
        overflow:hidden
    }
}
.main .category .inner .wrap-slider-category{
    opacity:0;
    transition:opacity 0.3s
}
.main .category .inner .slide-init{
    margin-left:75px;
    margin-right:75px;
    opacity:1
}
@media (min-width: 1600px){
    .main .category .inner .slide-init{
        margin-left:145px;
        margin-right:145px
    }
}
@media (max-width: 1280px){
    .main .category .inner .slide-init{
        margin-left:40px;
        margin-right:40px
    }
}
@media (max-width: 900px){
    .main .category .inner .slide-init{
        margin-left:-10px;
        margin-right:-10px
    }
}
.main .category .slick-arrow{
    position:absolute;
    top:50%;
    width:50px;
    height:60px;
    margin-top:-47px;
    background-color:#fff;
    transform:translateY(-50%);
    box-shadow:0px 4px 8px 0px rgba(0,0,0,0.1);
    box-sizing:border-box
}
.main .category .slick-arrow:before{
    color:#60656a;
    font-size:20px
}
.main .category .slick-prev{
    left:-25px
}
.main .category .slick-next{
    right:-25px
}
.main .category .slick-slide{
    padding:0 15px;
    box-sizing:border-box
}
.main .category .slick-slide .label{
    transform:translateZ(0)
}
.main .category .slick-track{
    margin:0 auto
}
.main .category .article .content{
    padding-top:20px
}
@media (max-width: 900px){
    .main .category .article .content{
        padding-top:10px
    }
}
.main .category .article .description{
    display:none
}
@media (max-width: 900px){
    .main .category .article .description{
        display:none
    }
}
.main .category.brochure{
    padding-bottom:0;
    background-color:#02b9f3
}
@media (max-width: 900px){
    .main .category.brochure{
        padding-top:20px;
        border:0 none;
        margin-top:-5px
    }
}
.main .category.brochure h3{
    position:relative;
    text-align:left;
    color:#fff;
    padding-right:20%
}
.main .category.brochure h3 .btn-direct{
    display:inline-block;
    position:absolute;
    top:50%;
    right:0;
    border:1px solid #fff;
    border-radius:18px;
    font-size:15px;
    font-weight:normal;
    line-height:34px;
    padding:0 20px;
    margin-top:-18px
}
.main .category.brochure h3 .btn-direct:after{
    content:'';
    display:inline-block;
    width:16px;
    height:11px;
    margin-left:14px;
    background:url("../images/icons/go.png") no-repeat 0 0
}
@media (max-width: 900px){
    .main .category.brochure h3{
        text-align:center;
        padding-right:0;
        font-size:21px
    }
    .main .category.brochure h3 .btn-direct{
        display:none
    }
}
.main .category .wrap-slider-category{
    margin-left:90px !important;
    margin-right:90px !important;
    padding-bottom:50px
}
@media (min-width: 1600px){
    .main .category .wrap-slider-category{
        margin-left:165px !important;
        margin-right:165px !important
    }
}
@media (max-width: 1280px){
    .main .category .wrap-slider-category{
        margin-left:60px !important;
        margin-right:60px !important
    }
}
@media (max-width: 900px){
    .main .category .wrap-slider-category{
        margin-top:20px;
        margin-left:-10px !important;
        margin-right:-10px !important;
        padding-bottom:20px
    }
}
.main .category .shelf{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:211px;
    background:url("../images/icons/shelf.png") repeat-x 0 0;
    background-size:auto 100%
}
.main .category .shelf:before{
    content:'';
    position:absolute;
    top:0;
    left:-110px;
    width:112px;
    height:100%;
    background:url("../images/icons/shelf-l.png") repeat-x 0 0
}
.main .category .shelf:after{
    content:'';
    position:absolute;
    top:0;
    right:-110px;
    width:112px;
    height:100%;
    background:url("../images/icons/shelf-r.png") repeat-x 0 0
}
@media (max-width: 900px){
    .main .category .shelf{
        left:-20px;
        width:calc(100% + 50px);
        height:125px
    }
    .main .category .shelf:before,.main .category .shelf:after{
        display:none
    }
}
.main .category .brochure-item .thumb{
    border:0 none
}
.main .category .brochure-item .thumb:after{
    content:'';
    position:absolute;
    bottom:-6px;
    left:50%;
    width:calc(100% + 18px);
    height:9px;
    transform:translateX(-50%);
    background:url("../images/icons/shadow.png") no-repeat 0 0;
    background-size:100%
}
.main .category .brochure-item .thumb .hidden-btn>a{
    width:19.5%;
    padding-bottom:19.7%
}
.main .category .brochure-item .title{
    margin-top:65px
}
.main .category .brochure-item .title a{
    color:#fff
}
@media (max-width: 900px){
    .main .category .brochure-item .title{
        margin-top:40px
    }
}
.main .wrap-slider-category .slider-nav{
    display:none
}
.main .news{
    padding:40px 0 50px
}
@media (max-width: 900px){
    .main .news{
        padding:15px 0
    }
}
.main .news h3{
    padding-left:15px
}
@media (max-width: 900px){
    .main .news h3{
        margin-bottom:20px;
        padding-left:0;
        font-size:21px;
        font-weight:600
    }
}
@media (max-width: 900px){
    .main .news .article:nth-of-type(3){
        display:none
    }
}
.main .news .list{
    padding-top:0;
    padding-bottom:0
}
.main .news .list .article,.main .news .list .content{
    padding-bottom:0
}
.main .slider-visual .dot{
    position:absolute;
    left:0;
    right:0;
    bottom:30px
}
@media (max-width: 900px){
    .main .slider-visual .dot{
        top:auto;
        bottom:10px
    }
}
@media (max-width: 900px){
    .main .slider-visual .slick-dots{
        font:0/0 a
    }
}
.main .slider-visual .slick-dots button{
    border:3px solid #cececf
}
@media (max-width: 900px){
    .main .slider-visual .slick-dots button{
        width:8px;
        height:8px;
        margin:0 2.5px;
        border-width:1.5px
    }
}
.main .slider-visual .slick-dots .slick-active button{
    border-color:#fff;
    background-color:#fff
}
@media (max-width: 900px){
    .main .slider-category-1,.main .slider-category-2{
        width:1000%;
        overflow:auto
    }
}
.main .slider-category-1>div,.main .slider-category-2>div{
    padding:0 15px;
    box-sizing:border-box
}
@media (max-width: 900px){
    .main .slide-init .slider-category-1,.main .slide-init .slider-category-2{
        width:auto;
        overflow:visible
    }
}
@media (max-width: 900px){
    .main .wrap-slider-category .slide-item{
        width:180px;
        padding:0 10px
    }
}
@media (max-width: 900px){
    .main .wrap-slider-category .slider-nav{
        display:none
    }
}
@media (max-width: 900px){
    .main .slide-init .slider-category-1,.main .slide-init .slider-category-2{
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        overflow-x:scroll;
        padding-right:20px
    }
}
@media (max-width: 900px){
    .main .slide-init .slider-category-1 .slide-item,.main .slide-init .slider-category-2 .slide-item{
        flex:none;
        width:318px
    }
}
.main.global .section{
    position:relative;
    margin:25px 0 60px;
    overflow:hidden
}
@media (max-width: 900px){
    .main.global .section{
        margin:0
    }
}
@media (max-width: 900px){
    .main.global .section:first-child{
        margin-bottom:0
    }
}
@media (max-width: 900px){
    .main.global .section:first-child .article:first-child .desc{
        display:block
    }
}
@media (max-width: 900px){
    .main.global .section:first-child .article:nth-child(2){
        margin-left:20px
    }
}
@media (max-width: 900px){
    .main.global .section:first-child .article:nth-child(2) .detail{
        padding-left:0
    }
}
@media (max-width: 900px){
    .main.global .section:first-child .article:nth-child(3){
        margin-right:20px
    }
}
@media (max-width: 900px){
    .main.global .section:last-child{
        margin-bottom:40px
    }
}
.main.global .section--title h3{
    display:block
}
@media (max-width: 900px){
    .main.global .section.slider .inner,.main.global .section.playlist .inner{
        padding-bottom:25px
    }
}
.main.global .section.slider .contents,.main.global .section.playlist .contents{
    margin:0 -15px;
    overflow:visible
}
@media (max-width: 900px){
    .main.global .section.slider .contents,.main.global .section.playlist .contents{
        margin:0
    }
}
.main.global .section.slider .contents .article,.main.global .section.playlist .contents .article{
    margin:0 15px
}
@media (max-width: 900px){
    .main.global .section.slider .contents .article,.main.global .section.playlist .contents .article{
        margin:0
    }
}
@media (max-width: 900px){
    .main.global .section.slider .contents .detail,.main.global .section.playlist .contents .detail{
        margin-top:10px;
        padding:0
    }
}
@media (max-width: 900px){
    .main.global .section.slider .contents .detail .headline,.main.global .section.playlist .contents .detail .headline{
        line-height:1.3;
        font-size:15px;
        font-weight:500
    }
}
@media (max-width: 900px){
    .main.global .section.slider .contents .detail .region,.main.global .section.playlist .contents .detail .region{
        margin-bottom:3px;
        font-size:11px
    }
}
.main.global .section.grid .narrow:before{
    padding-bottom:71.3%
}
@media (max-width: 900px){
    .main.global .section.grid .narrow:before{
        display:none
    }
}
.main.global .section.grid .narrow .want-login:before{
    padding-bottom:71.3%
}
@media (max-width: 900px){
    .main.global .section.grid .narrow .want-login:before{
        padding-bottom:56.25%
    }
}
.main.global .section.grid .narrow .img:before{
    padding-bottom:71.3%
}
@media (max-width: 900px){
    .main.global .section.grid .narrow .img:before{
        padding-bottom:56.25%
    }
}
@media (max-width: 900px){
    .main.global .section.grid .article:nth-child(odd){
        margin-left:20px
    }
}
@media (max-width: 900px){
    .main.global .section.grid .article:nth-child(odd) .detail{
        padding-left:0
    }
}
@media (max-width: 900px){
    .main.global .section.grid .article:nth-child(even){
        margin-right:20px
    }
}
@media (max-width: 900px){
    .main.global .section.slider .contents,.main.global .section.playlist .contents{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:scroll;
        margin-left:-20px;
        padding-left:40px
    }
}
@media (max-width: 900px){
    .main.global .section.slider .contents .article,.main.global .section.playlist .contents .article{
        padding-right:20px;
        flex:none;
        width:40%
    }
}
.main.global .inner{
    max-width:1372px;
    padding:0 30px
}
@media (max-width: 900px){
    .main.global .inner{
        padding:0
    }
}
.main.global .title{
    display:none;
    margin-bottom:25px;
    font-size:36px;
    font-weight:bold;
    text-align:center
}
@media (max-width: 900px){
    .main.global .title{
        margin-bottom:10px;
        font-size:21px
    }
}
.main.global .contents{
    overflow:hidden
}
.main.global .contents:after{
    content:'';
    display:block;
    clear:both
}
.main.global .article{
    width:54.51%;
    margin-bottom:2.35%;
    float:left;
    overflow:hidden
}
@media (max-width: 900px){
    .main.global .article{
        width:auto;
        margin-bottom:20px;
        float:none
    }
}
.main.global .article a[target="_self"] .icon-shortcut{
    display:none
}
@media (max-width: 900px){
    .main.global .article .label{
        top:2px;
        left:2px;
        width:18px;
        height:18px;
        line-height:18px
    }
}
.main.global .article.vertical .detail,.main.global .article.horizontal .detail{
    display:block;
    width:100%
}
.main.global .article.vertical .headline{
    margin-top:30px
}
@media (max-width: 900px){
    .main.global .article.vertical .headline{
        margin-top:0
    }
}
.main.global .article.horizontal{
    width:100%
}
.main.global .article.horizontal a{
    display:flex;
    align-items:center
}
@media (max-width: 900px){
    .main.global .article.horizontal a{
        display:block
    }
}
.main.global .article.horizontal a .detail{
    padding-right:30px
}
.main.global .article.horizontal a .thumb{
    flex:none;
    width:54.51%;
    margin-right:30px
}
@media (max-width: 900px){
    .main.global .article.horizontal a .thumb{
        width:100%
    }
}
@media (max-width: 900px){
    .main.global .article.horizontal a .rate{
        justify-content:flex-start
    }
}
.main.global .article.narrow{
    width:43.12%
}
@media (max-width: 900px){
    .main.global .article.narrow{
        width:calc(100% - 20px)
    }
}
.main.global .article.left{
    margin-right:2.35%
}
@media (max-width: 900px){
    .main.global .article.left{
        margin-right:0
    }
}
.main.global .article.default:before{
    content:'';
    display:block;
    padding-bottom:56.25%
}
@media (max-width: 900px){
    .main.global .article.default:before{
        display:none
    }
}
.main.global .article.default a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
@media (max-width: 900px){
    .main.global .article.default a{
        position:relative
    }
}
.main.global .article.default .thumb:before{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    height:4px;
    background-color:#06a7e2;
    z-index:2;
    transition:bottom 0.4s;
    transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1)
}
@media (max-width: 900px){
    .main.global .article.default .thumb:before{
        display:none
    }
}
.main.global .article.default .detail{
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:absolute;
    top:100%;
    width:100%;
    height:100%;
    padding:0 30px;
    background-color:rgba(0,0,0,0.78);
    transition:top 0.4s;
    transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1);
    box-sizing:border-box;
    z-index:1
}
@media (max-width: 900px){
    .main.global .article.default .detail{
        position:static;
        display:block;
        padding:0 20px;
        background-color:#fff;
        box-sizing:border-box
    }
}
.main.global .article.default .detail .region{
    display:block;
    text-transform:uppercase;
    font-weight:500;
    margin-bottom:10px
}
@media (max-width: 900px){
    .main.global .article.default .detail .region{
        font-size:12px;
        margin-bottom:0
    }
}
.main.global .article.default .detail .headline{
    font-size:24px;
    font-weight:500;
    color:#fff;
    max-height:72px
}
@media (max-width: 1086px){
    .main.global .article.default .detail .headline{
        font-size:15px
    }
}
@media (max-width: 900px){
    .main.global .article.default .detail .headline{
        font-size:19px;
        font-weight:bold;
        color:inherit
    }
}
.main.global .article.default .detail .desc{
    display:none
}
.main.global .article.default .detail .meta{
    display:block
}
@media (max-width: 1086px){
    .main.global .article.default .detail .meta{
        display:none
    }
}
@media (max-width: 900px){
    .main.global .article.default .detail .meta{
        display:block
    }
}
.main.global .article.default .detail .meta .icon{
    color:#585858
}
.main.global .article.default .detail .meta em,.main.global .article.default .detail .meta time{
    color:#fff
}
@media (max-width: 900px){
    .main.global .article.default .detail .meta em,.main.global .article.default .detail .meta time{
        color:inherit
    }
}
.main.global .article.default:hover .thumb:before{
    bottom:calc(100% - 4px)
}
.main.global .article.default:hover .thumb.lock:before{
    bottom:0
}
.main.global .article.default:hover .detail{
    top:0
}
.main.global .article.fade{
    opacity:0;
    transform:translateY(50%);
    transition:opacity 0.5s,transform 0.5s;
    transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1)
}
.main.global .article.fade-in{
    opacity:1;
    transform:none;
    transition:opacity 0.5s,transform 0.5s;
    transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1)
}
.main.global .article.fade-in ~ .btn{
    pointer-events:none;
    color:#eee;
    background-color:#ccc;
    border-color:#ccc
}
.main.global .article.fade-in ~ .btn:focus{
    outline:none
}
.main.global .top .article{
    clear:right;
    float:right
}
.main.global .top .article.left{
    overflow:visible;
    float:left
}
@media (max-width: 900px){
    .main.global .top .article.left{
        width:100%
    }
}
.main.global .thumb{
    position:relative
}
.main.global .thumb .img{
    border:0;
    background:url("../images/common/logo.png") no-repeat 50% 50%;
    background-color:#fff
}
.main.global .thumb .img:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    opacity:1;
    background-color:transparent;
    box-shadow:inset 0px 0px 8px 4px rgba(0,0,0,0.1)
}
@media (max-width: 900px){
    .main.global .thumb .img:after{
        display:block
    }
}
.main.global .thumb .img img{
    -o-object-fit:cover;
    object-fit:cover
}
.main.global .thumb .img span{
    background-repeat:no-repeat;
    background-size:100% auto;
    background-position:center center
}
.main.global .thumb .running-time{
    bottom:4px;
    margin-bottom:0
}
@media (max-width: 900px){
    .main.global .thumb .running-time{
        right:2px;
        bottom:2px
    }
}
@media (max-width: 900px){
    .main.global .thumb .running-time strong{
        line-height:16px;
        padding:0 5px;
        font-size:10px
    }
}
.main.global .thumb.lock ~ .detail{
    display:none
}
@media (max-width: 900px){
    .main.global .thumb.lock ~ .detail{
        display:block
    }
}
.main.global .detail{
    display:none;
    box-sizing:border-box
}
@media (max-width: 900px){
    .main.global .detail{
        margin-top:15px;
        padding:0 20px
    }
}
.main.global .detail .region{
    display:none;
    color:#06a7e2;
    font-size:16px
}
.main.global .detail .region .icon{
    margin-left:3px;
    opacity:.7
}
@media (max-width: 900px){
    .main.global .detail .region .icon{
        opacity:1
    }
}
@media (max-width: 900px){
    .main.global .detail .region .icon:before{
        width:11px;
        height:11px;
        background-size:cover;
        vertical-align:-1px
    }
}
.main.global .detail .headline{
    display:block;
    margin-bottom:15px;
    padding:0;
    font-size:30px;
    overflow:hidden;
    max-height:94px
}
@supports (-webkit-line-clamp: 2){
    .main.global .detail .headline{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        text-overflow:ellipsis;
        word-break:keep-all;
        max-height:none;
        white-space:normal
    }
}
@media (max-width: 900px){
    .main.global .detail .headline{
        margin-top:0;
        margin-bottom:8px;
        font-size:21px;
        border-top:0
    }
}
.main.global .detail .desc{
    color:#555;
    overflow:hidden;
    max-height:50px
}
@supports (-webkit-line-clamp: 2){
    .main.global .detail .desc{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        text-overflow:ellipsis
    }
}
@media (max-width: 900px){
    .main.global .detail .desc{
        display:none
    }
}
.main.global .detail .meta{
    margin-top:20px;
    text-align:right
}
@media (max-width: 900px){
    .main.global .detail .meta{
        margin-top:10px;
        text-align:left
    }
}
.main.global .detail .meta .date time{
    vertical-align:unset
}
.main.global .btn{
    position:relative;
    display:block;
    color:#40464d;
    border-width:2px;
    border-radius:0;
    font-weight:bold;
    text-transform:uppercase;
    transition:color .4s;
    overflow:hidden;
    background-color:transparent
}
@media (max-width: 900px){
    .main.global .btn{
        height:32px;
        padding:0 15px;
        margin:0 auto
    }
}
.main.global .btn:before{
    content:'';
    position:absolute;
    top:100%;
    left:0;
    bottom:0;
    right:0;
    background-color:#06a7e2;
    transition:top .4s;
    z-index:-1
}
.main.global .btn:hover{
    color:#fff;
    box-shadow:none
}
.main.global .btn:hover:before{
    top:0
}
.main.global .slick-arrow{
    position:absolute;
    top:50%;
    width:50px;
    height:60px;
    background-color:#fff;
    transform:translateY(-50%);
    box-shadow:0px 4px 8px 0px rgba(0,0,0,0.1);
    box-sizing:border-box
}
.main.global .slick-arrow:before{
    color:#60656a;
    font-size:20px
}
.main.global .slick-prev{
    left:-25px
}
.main.global .slick-next{
    right:-25px
}
@media (max-width: 900px){
    .main.global .slick-list{
        margin:0 20px;
        overflow:visible
    }
}
.main.global .slick-slide{
    margin:0 15px;
    box-sizing:border-box
}
@media (max-width: 900px){
    .main.global .slick-slide{
        margin:0;
        float:left
    }
}
@media (max-width: 900px){
    .main.global .slick-slide a{
        padding:0 10px;
        box-sizing:border-box
    }
}
.main.global .slick-slide .label{
    transform:translateZ(0)
}
.main.global .slick-track{
    margin:0 auto
}
@media (max-width: 900px){
    .main.global .slick-track{
        margin:0 -10px
    }
}
.main.global .slick-nav{
    width:100%;
    position:absolute;
    bottom:20px;
    display:flex;
    justify-content:center;
    align-items:center
}
.main.global .slick-nav .btn-pause{
    margin-top:0;
    color:rgba(255,255,255,0.3)
}
.main.global .slick-nav .btn-pause.paused{
    color:#fff
}
.main.global .slick-dots button{
    width:15px;
    height:15px;
    margin:0 5px;
    border:none;
    background-color:rgba(255,255,255,0.3);
    vertical-align:super
}
.main.global .slick-dots .slick-active button{
    border-color:#fff;
    background-color:#fff
}
.main.global .rate{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin-top:10px
}
@media (max-width: 900px){
    .main.global .rate{
        margin-bottom:10px
    }
}
.main.global .rate-item.stars{
    display:inline-flex;
    width:95px;
    height:17px;
    background:url("../images/common/star-gray.png") 0 0;
    margin-right:15px;
    font:0/0 a;
    box-sizing:border-box
}
@media (max-width: 900px){
    .main.global .rate-item.stars{
        width:70px;
        height:12px;
        background-image:url("../images/common/star-gray-mo.png");
        background-size:auto 100%;
        margin-right:10px;
        overflow:hidden
    }
}
.main.global .rate-item.stars em{
    display:block;
    width:94%;
    height:100%;
    overflow:hidden
}
@media (max-width: 900px){
    .main.global .rate-item.stars em{
        display:block;
        height:100%;
        overflow:hidden
    }
}
.main.global .rate-item.stars em i{
    display:block;
    width:105px;
    height:100%;
    background:url("../images/common/star-fill.png") 0 0;
    z-index:1
}
@media (max-width: 900px){
    .main.global .rate-item.stars em i{
        display:block;
        width:70px;
        height:100%;
        background-image:url("../images/common/star-fill-mo.png");
        background-size:auto 100%;
        z-index:1
    }
}
.main.global .rate-item.stars.xl{
    width:141px;
    height:23px;
    background:url("../images/common/star-gray-xl.png") 0 0;
    margin-right:0;
    margin-bottom:10px
}
@media (max-width: 900px){
    .main.global .rate-item.stars.xl{
        width:105px;
        height:17px;
        background:url("../images/common/star-gray.png") space 0 0;
        margin-bottom:10px
    }
}
.main.global .rate-item.stars.xl em i{
    width:141px;
    background:url("../images/common/star-fill-xl.png") 0 0
}
.main.global .rate-item.number em:last-child:before{
    content:'/';
    display:inline-block;
    margin:0 5px
}
.main.global .rate-item.number .score{
    color:#333;
    font-weight:bold
}
.main.global .loading-wrap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding-bottom:56.25%;
    background-color:rgba(0,0,0,0.02)
}
.main.global .loading-main{
    position:absolute;
    height:100%
}
.main.global .banner{
    margin:0
}
.main.global .banner .loading-wrap{
    position:relative
}
.main.global .banner.big:hover .slick-arrow{
    opacity:1
}
.main.global .banner.big .loading-wrap{
    padding-bottom:23.4375%
}
@media (max-width: 900px){
    .main.global .banner.big .loading-wrap{
        padding-bottom:42%
    }
}
.main.global .banner.big .inner{
    width:100%;
    max-width:none;
    padding:0
}
.main.global .banner.big .inner .contents{
    margin:0
}
@media (max-width: 900px){
    .main.global .banner.big .inner .contents{
        padding-left:0
    }
}
.main.global .banner.big .inner .contents .article{
    width:100%;
    margin:0
}
@media (max-width: 900px){
    .main.global .banner.big .inner .contents .article{
        padding-right:0
    }
}
.main.global .banner.big .inner .contents .article a{
    padding-bottom:23.4375%
}
@media (max-width: 900px){
    .main.global .banner.big .inner .contents .article a{
        padding-bottom:42%
    }
}
.main.global .banner.big .inner .contents .article a .thumb{
    position:absolute;
    width:100%;
    height:100%
}
@media (max-width: 900px){
    .main.global .banner.big .inner .contents .article a .thumb{
        left:0
    }
}
@media (max-width: 900px){
    .main.global .banner.big .slick-list{
        margin:0;
        width:100%;
        overflow:hidden
    }
    .main.global .banner.big .slick-track{
        margin:0
    }
}
.main.global .banner.big .slick-arrow{
    width:10%;
    height:100%;
    opacity:0;
    background-color:transparent;
    box-shadow:none;
    transition:opacity .3s
}
.main.global .banner.big .slick-arrow:before{
    content:'';
    display:inline-block;
    width:36px;
    height:67px;
    background-image:url("../images/common/arrow_main_visual.png");
    background-repeat:no-repeat;
    background-position:0 50%
}
@media (max-width: 900px){
    .main.global .banner.big .slick-arrow:before{
        width:20px
    }
}
.main.global .banner.big .slick-prev{
    left:0
}
.main.global .banner.big .slick-next{
    right:0
}
.main.global .banner.big .slick-next:before{
    background-position:100% 50%
}
.main.global .banner.small{
    margin:25px 0
}
@media (max-width: 900px){
    .main.global .banner.small{
        margin:0;
        padding:5px 0;
        background-color:#f7f7f7
    }
}
.main.global .banner.small .loading-wrap{
    padding-bottom:12%
}
@media (max-width: 900px){
    .main.global .banner.small .inner{
        padding-bottom:0
    }
}
@media (max-width: 900px){
    .main.global .banner.small .contents{
        margin-left:0;
        padding-left:0;
        padding-right:40px
    }
}
.main.global .banner.small .contents .article{
    width:100%
}
@media (max-width: 900px){
    .main.global .banner.small .contents .article{
        width:100%;
        margin-right:5px;
        padding-right:0;
        background-color:#fff
    }
}
.main.global .banner.small .contents .article a{
    max-height:140px
}
.main.global .banner.small .contents .article .detail{
    width:56.88%;
    position:relative;
    display:flex;
    flex-direction:column;
    padding:20px 0 20px 30px
}
@media (max-width: 900px){
    .main.global .banner.small .contents .article .detail{
        width:50%;
        padding:10px;
        margin-top:0
    }
}
.main.global .banner.small .contents .article .detail .title{
    display:block;
    margin-bottom:15px;
    line-height:1.2;
    font-size:30px;
    text-align:left;
    order:1
}
@media (max-width: 900px){
    .main.global .banner.small .contents .article .detail .title{
        font-size:15px;
        margin-bottom:5px
    }
}
.main.global .banner.small .contents .article .detail .sub{
    font-size:18px;
    order:0
}
@media (max-width: 900px){
    .main.global .banner.small .contents .article .detail .sub{
        font-size:11px
    }
}
.main.global .banner.small .contents .article .detail .more{
    order:2;
    color:#585858;
    font-size:14px;
    text-transform:uppercase
}
@media (max-width: 900px){
    .main.global .banner.small .contents .article .detail .more{
        font-size:11px
    }
}
.main.global .banner.small .contents .article .detail .more .icon:before{
    font-size:10px
}
@media (max-width: 900px){
    .main.global .banner.small .contents .article .detail .more .icon:before{
        font-size:10px;
        transform:scale(0.8);
        vertical-align:-1px
    }
}
.main.global .banner.small .contents .article .thumb{
    position:absolute;
    right:0;
    width:43.12%;
    height:100%
}
@media (max-width: 900px){
    .main.global .banner.small .contents .article .thumb{
        width:50%
    }
}
.main.global .banner .inner{
    position:relative
}
.main.global .banner .inner .contents .article{
    position:relative
}
.main.global .banner .inner .contents .article a{
    padding-top:0
}
.main.global .banner .inner .contents .article a:hover img{
    transform:translate(-50%, -50%) scale(1)
}
.main.global .banner .inner .contents .article a .thumb .img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}
.layer-open{
    overflow:hidden
}
.layer-open:not(.search-open) body:before{
    z-index:1005
}
.layer-open:not(.search-open) .wrap-layer{
    z-index:1005
}
/*@media (max-width: 900px){
    .layer-open{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        width:100%
    }
}*/
.layer-open body:before{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    visibility:visible;
    opacity:0.3;
    transition:opacity 0.3s linear 0.4s, visibility 0.00s linear 0.00s;
    background-color:#000;
    z-index:1004
}
.layer-open .wrap-layer.active{
    display:block;
    overflow-x:hidden;
    overflow-y:auto
}
.effect.layer-open .wrap-layer.active{
    overflow:hidden
}
.active-menu .layer-open body:before,.search-open .layer-open body:before{
    top:120px
}
@media (max-width: 900px){
    .active-menu .layer-open body:before,.search-open .layer-open body:before{
        top:0
    }
}
.layer-open .layer-gnb .layer,.layer-open .layer-search .layer{
    top:0
}
.layer-open .layer-search .layer{
    top:175px;
    max-width:1120px;
    margin:0 auto
}
.layer-open .layer-list-share .layer{
    top:50px;
    max-width:760px;
    margin:0 auto
}
.layer-open .layer-login .layer,.layer-open .layer-winner .layer,.layer-open .layer-share .layer,.layer-open .layer-wshare .layer{
    top:200px;
    max-width:460px;
    margin:0 auto
}
@media (max-width: 900px){
    .layer-open .layer-login .layer,.layer-open .layer-winner .layer,.layer-open .layer-share .layer,.layer-open .layer-wshare .layer{
        top:70px;
        margin-bottom:70px
    }
}
@media (max-width: 900px){
    .layer-search .layer .layer-content{
        margin:0
    }
}
.layer-search .inner{
    padding:0
}
.layer .layer-content{
    position:relative;
    border-radius:10px;
    background-color:#fff
}
@media (max-width: 900px){
    .layer .layer-content{
        margin:0 17.5px
    }
}
.layer .layer-title{
    font-size:20px
}
.wrap-layer{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1004;
    overflow:hidden
}
.wrap-layer .layer{
    position:relative;
    transform:none
}
[data-loc="go"].search-open{
    overflow:hidden
}
@media (max-width: 900px){
    [data-loc="go"].search-open{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        width:100%
    }
}
[data-loc="go"].search-open body:before{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    visibility:visible;
    opacity:0.3;
    transition:opacity 0.3s linear 0.4s, visibility 0.00s linear 0.00s;
    background-color:#000;
    z-index:1004
}
.layer-main-banner .layer{
    position:absolute;
    top:50%;
    left:50%;
    width:484px;
    max-width:90vw;
    transform:translate(-50%, -50%)
}
.layer-main-banner .layer.ratioH{
    width:calc((85vh - 42px) * 0.63709677);
    max-height:85vh
}
.layer-main-banner .layer-content{
    width:100%;
    height:100%;
    padding:45px 42px 0;
    text-align:center;
    overflow:auto;
    box-sizing:border-box
}
@media (max-width: 900px){
    .layer-main-banner .layer-content{
        position:relative;
        padding:0 0 42px;
        border-radius:0;
        margin:0
    }
}
.layer-main-banner .layer-content img{
    width:100%;
    margin:0 auto
}
.layer-main-banner .layer-content .slider{
    transition:opacity 0.3s ease 0.1s;
    opacity:0;
    overflow:hidden
}
@media (max-width: 900px){
    .layer-main-banner .layer-content .slider{
        padding:0;
        box-sizing:border-box
    }
}
.layer-main-banner .layer-content .slick-slider{
    opacity:1
}
.layer-main-banner .layer-content .slick-slide{
    /*margin:0 1px;
    */
    position:relative;
    z-index:0
}
.layer-main-banner .layer-content .slick-slide .empty{
    width:100%;
    height:auto
}
.layer-main-banner .layer-content .slick-slide a{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow-y:auto
}
.layer-main-banner .layer-content .slick-slide a::-webkit-scrollbar{
    width:5px;
    border-radius:2px
}
.layer-main-banner .layer-content .slick-slide a::-webkit-scrollbar-thumb{
    background-color:#888;
    border-radius:2px
}
.layer-main-banner .layer-content .slick-slide a::-webkit-scrollbar-track{
    background-color:#eee;
    border-radius:2px
}
@media (max-width: 900px){
    .layer-main-banner .layer-content .slick-slide a::-webkit-scrollbar{
        display:block
    }
}
.layer-main-banner .layer-content .slick-slide.slick-active{
    z-index:1
}
.layer-main-banner .slider-nav{
    padding-top:20px;
    font:0/0 a;
    text-align:center
}
.layer-main-banner .slider-nav li{
    vertical-align:top
}
.layer-main-banner .slider-nav button{
    width:12px;
    height:12px;
    margin:0 4px;
    border-width:2px
}
.layer-main-banner .slider-nav .slick-dots{
    padding:0 0 20px
}
@media (max-width: 900px){
    .layer-main-banner .slider-nav{
        position:absolute;
        top:12px;
        left:50%;
        transform:translateX(-50%);
        padding-top:0
    }
    .layer-main-banner .slider-nav .slick-dots{
        padding:7px 6px;
        border-radius:12px;
        background:rgba(0,0,0,0.1)
    }
    .layer-main-banner .slider-nav .slick-dots button{
        width:10px;
        height:10px;
        margin:0 4px;
        border-width:2px;
        border-color:#fff
    }
    .layer-main-banner .slider-nav .slick-dots .slick-active button{
        background-color:#fff
    }
}
.layer-main-banner .today-open{
    position:relative;
    padding:0 0 20px;
    z-index:1
}
@media (max-width: 900px){
    .layer-main-banner .today-open{
        position:absolute;
        bottom:0;
        left:0;
        width:50%;
        height:42px;
        padding:0;
        border-top:1px solid #e5e5e5;
        background:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        box-sizing:border-box
    }
    .layer-main-banner .today-open .checkbox{
        display:none
    }
    .layer-main-banner .today-open label{
        font-size:13px;
        color:#000;
        line-height:17px
    }
}
@media (max-width: 900px){
    .layer-main-banner .btn-layer-close{
        position:absolute;
        top:auto;
        bottom:0;
        right:0;
        width:50%;
        height:42px;
        padding:0;
        border:1px solid #e5e5e5;
        border-width:1px 0 0 1px;
        background:#fff
    }
    .layer-main-banner .btn-layer-close .icon{
        display:none
    }
    .layer-main-banner .btn-layer-close span{
        font-family:'Spoqa Han Sans', sans-serif;
        font-size:13px;
        color:#000;
        letter-spacing:0
    }
}
.layer-image-viewer{
    white-space:nowrap
}
.layer-image-viewer:after{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
}
.layer-image-viewer .btn-layer-close{
    color:#fff;
    top:15px;
    right:15px;
    background-color:transparent
}
.layer-image-viewer .btn-layer-close .icon:before{
    font-size:20px
}
.layer-location .layer{
    position:absolute;
    top:50%;
    left:50%;
    max-width:760px;
    min-width:630px;
    margin:0 auto;
    transform:translate(-50%, -50%)
}
@media (max-width: 900px){
    .layer-location .layer{
        position:relative;
        top:40px;
        left:auto;
        min-width:0;
        transform:none
    }
}
.layer-location .layer-content{
    padding:80px 60px 40px
}
@media (max-width: 900px){
    .layer-location .layer-content{
        padding:45px 15px 25px
    }
}
.layer-location .title{
    font-size:34px;
    text-align:center
}
@media (max-width: 900px){
    .layer-location .title{
        font-size:21px
    }
}
.layer-location .list{
    margin:30px 0 20px;
    padding:30px 30px 5px;
    border:1px solid #e6e6e6;
    border-radius:1px
}
@media (max-width: 900px){
    .layer-location .list{
        margin:17px 0 10px;
        padding:15px 15px 5px
    }
}
.layer-location .list:after{
    content:'';
    display:block;
    clear:both
}
.layer-location .list li{
    float:left;
    width:33.3334%;
    margin-bottom:25px
}
@media (max-width: 900px){
    .layer-location .list li{
        width:50%;
        margin-bottom:12px;
        letter-spacing:-0.5px
    }
}
.layer-location .list li input{
    display:none
}
.layer-location .list li input:checked+span{
    font-weight:bold
}
.layer-location .list li input:checked+span:after{
    content:'\e00d';
    font-family:'atomy-icon-font';
    font-size:10px;
    font-weight:normal;
    margin-left:5px;
    line-height:1;
    text-rendering:auto
}
@media (max-width: 900px){
    .layer-location .list li input:checked+span:after{
        font-size:9px;
        margin-left:2px
    }
}
.layer-location .list label{
    cursor:pointer;
    white-space:nowrap
}
.layer-location .list .flag{
    display:none;
    width:38px;
    height:26px;
    margin-right:12px;
    border:1px solid #e6e6e6;
    vertical-align:middle
}
.layer-location .location-inner p{
    text-align:center
}
.layer-location .location-inner p label{
    font-size:1.3em
}
.layer-location .location-inner .btn{
    position:static;
    display:block;
    margin:55px auto 0;
    padding:0
}
@media (max-width: 900px){
    .layer-location .location-inner .btn{
        min-width:80px;
        margin-top:25px;
        padding:0 15px
    }
}
.layer-location .location-inner .checkbox{
    margin-top:-4px
}
.layer-location-2 .layer{
    position:absolute;
    top:50%;
    left:50%;
    margin:0 auto;
    transform:translate(-50%, -50%)
}
@media (max-width: 900px){
    .layer-location-2 .layer{
        width:100%;
        padding:15px;
        box-sizing:border-box
    }
}
.layer-location-2 .layer-content{
    width:560px;
    padding:80px 50px 60px;
    box-sizing:border-box
}
@media (max-width: 900px){
    .layer-location-2 .layer-content{
        width:auto;
        padding:45px 15px 25px
    }
}
.layer-location-2 .layer .location-inner{
    text-align:center
}
.layer-location-2 .layer .location-inner .btn{
    position:static;
    padding:0
}
@media (max-width: 900px){
    .layer-location-2 .layer .location-inner .btn{
        min-width:80px;
        padding:0 15px
    }
}
.layer-location-2 .title{
    font-size:32px;
    margin-bottom:50px;
    text-align:center;
    word-break:keep-all
}
@media (max-width: 900px){
    .layer-location-2 .title{
        font-size:21px;
        margin-bottom:30px
    }
}
.ch .layer-location .list .kr{
    position:relative;
    opacity:0.3;
    filter:grayscale(100%);
    filter:gray
}
.ch .layer-location .list .kr:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.ch .layer-location .list .kr label{
    cursor:default
}
.layer-login .message{
    display:block;
    margin-top:5px;
    color:#06a7e2
}
.layer-login .layer-content{
    padding:30px
}
@media (max-width: 900px){
    .layer-login .layer-content{
        padding:20px
    }
}
.layer-login .login-inner{
    padding:0
}
.layer .play-list .list .article{
    width:100%;
    margin:0 0 10px;
    border-bottom:0
}
.layer .play-list .list .article .img-wrap{
    flex-basis:46.88%;
    max-width:none
}
.layer .play-list .list .article .img-wrap .label{
    font:0/0 a
}
.layer .play-list .list .article .content{
    padding:10px 20px
}
.layer .play-list .list .article .content .explain{
    margin-bottom:10px
}
.layer .play-list .list .article .title{
    padding-right:0;
    margin-bottom:10px;
    text-overflow:ellipsis;
    overflow:hidden
}
.layer-policy{
    color:#171717;
    word-break:keep-all
}
@media (max-width: 900px){
    .layer-policy{
        left:30px;
        right:30px
    }
}
.layer-policy-title{
    font-size:34px;
    text-align:center;
    margin-bottom:35px;
    padding:0 80px
}
.layer-policy-contents{
    padding:10px 29px;
    border:1px solid #e5e5e5;
    border-radius:2px;
    max-height:400px;
    overflow-y:auto
}
.layer-policy-contents li{
    position:relative;
    padding:15px 0;
    border-top:1px solid #f5f5f5
}
.layer-policy-contents li:first-child{
    border-top:0
}
.layer-policy-contents li:after{
    content:'';
    display:block;
    clear:both
}
.layer-policy-location{
    float:left
}
.layer-policy-location .flag{
    vertical-align:middle;
    display:none;
    width:38px;
    height:27px;
    margin-right:12px;
    border:1px solid #e4e4e4
}
.layer-policy-btns{
    float:right
}
.layer-policy-btns a{
    font-size:12px;
    line-height:31px;
    float:left;
    display:block;
    height:31px;
    margin-left:7px;
    padding:0 15px;
    border-radius:1px;
    border:1px solid #ddd;
    background-color:#fff
}
.layer-policy-btns a:after{
    content:'\e005';
    color:#6c7178;
    font-size:9px;
    font-family:'atomy-icon-font';
    font-weight:bold;
    vertical-align:middle;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:inline-block;
    margin-left:8px;
    transform:scale(0.7)
}
.layer-policy .layer{
    position:absolute;
    top:5%;
    left:50%;
    box-sizing:border-box;
    width:90%;
    max-width:815px;
    margin-bottom:5%;
    padding:80px 60px;
    border-radius:10px;
    background-color:#fff;
    transform:translateX(-50%)
}
.layer-policy .toggle{
    display:none
}
@media (max-width: 900px){
    .layer-policy-title{
        font-size:21px;
        padding:0 30px
    }
    .layer-policy-contents,.layer-policy-contents li{
        padding:0
    }
    .layer-policy-contents li{
        display:none
    }
    .layer-policy-contents li.current{
        display:block
    }
    .layer-policy-contents li.current .layer-policy-btns{
        display:block
    }
    .layer-policy-contents li.current .toggle:after{
        display:inline-block
    }
    .layer-policy-contents li .layer-policy-btns{
        display:none
    }
    .layer-policy-contents .active li{
        display:block
    }
    .layer-policy-contents .active li.current .layer-policy-btns{
        display:none
    }
    .layer-policy-location{
        box-sizing:border-box;
        display:flex;
        float:none;
        height:50px;
        padding:15px 14px
    }
    .layer-policy-location .flag{
        box-sizing:border-box;
        width:29px;
        height:20px
    }
    .layer-policy-btns{
        text-align:right;
        display:block;
        clear:both;
        float:none;
        padding:15px;
        background-color:#f5f5f5
    }
    .layer-policy-btns:after{
        content:'';
        display:block;
        clear:both
    }
    .layer-policy-btns a{
        display:inline-block;
        float:none
    }
    .layer-policy .layer{
        width:100%;
        padding:60px 15px 40px
    }
    .layer-policy .toggle{
        text-align:right;
        position:absolute;
        top:0;
        left:0;
        box-sizing:border-box;
        display:block;
        width:100%;
        height:50px;
        padding-right:15px
    }
    .layer-policy .toggle:after{
        content:'\e005';
        color:#6c7178;
        font-size:9px;
        font-family:'atomy-icon-font';
        font-weight:bold;
        vertical-align:middle;
        text-rendering:auto;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        display:none;
        transform:rotate(90deg)
    }
}
.layer-share .layer-content,.layer-wshare .layer-content{
    padding:30px
}
.layer-share .title,.layer-share .sns-list,.layer-wshare .title,.layer-wshare .sns-list{
    display:none;
    position:relative;
    margin-bottom:20px;
    padding-top:30px;
    text-align:center
}
@media (max-width: 1310px){
    .layer-share .title,.layer-share .sns-list,.layer-wshare .title,.layer-wshare .sns-list{
        display:block
    }
}
.layer-share .title,.layer-wshare .title{
    padding-top:0
}
.layer-share .sns-list:after,.layer-wshare .sns-list:after{
    content:'';
    display:block;
    clear:both
}
.layer-share .sns-list .total,.layer-wshare .sns-list .total{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    font-size:14px;
    color:#585858
}
.layer-share .sns-list .total strong,.layer-wshare .sns-list .total strong{
    margin-right:10px;
    font-size:13px;
    color:#333
}
@media (max-width: 1310px){
    .layer-share .sns-list .pc,.layer-wshare .sns-list .pc{
        opacity:0.3;
        pointer-events:none
    }
}
@media(max-width: 767px){
    .layer-share .sns-list .total .total-mobile{
        top:0;
        left:0;
        width:100%;
        font-size:14px;
        color:#585858
    }
    .layer-share .sns-list .total .total-pc{
        display: none !important;
    }
}
@media (min-width:768px){
    .layer-share .sns-list .total .total-pc{
        top:0;
        left:0;
        width:100%;
        font-size:14px;
        color:#585858
    }
    .layer-share .sns-list .total .total-mobile{
        display: none !important;
    }
}
@media (max-width: 1310px){
    .layer-share .sns-list .mobile,.layer-wshare .sns-list .mobile{
        opacity:1;
        pointer-events:auto
    }
}
.layer-wshare .title,.layer-wshare .sns-list{
    display:block
}
.layer-list-share .layer-content{
    padding:55px 100px
}
@media (max-width: 900px){
    .layer-list-share .layer-content{
        padding:50px 20px 30px
    }
}
.layer-list-share .use-select{
    padding:20px 0;
    font-size:30px;
    background-color:#f7f7f7;
    text-align:center
}
@media (max-width: 900px){
    .layer-list-share .use-select{
        padding:10px 0;
        font-size:18px
    }
}
.layer-list-share .use-select .keyword{
    font-weight:400
}
.layer-list-share .help{
    display:block;
    margin:30px auto 55px;
    font-size:20px;
    color:#06a7e2;
    text-align:center
}
@media (max-width: 900px){
    .layer-list-share .help{
        margin:15px auto 27px;
        font-size:14px
    }
}
.layer-list-share .help span{
    display:inline-block;
    border-bottom:1px solid #06a7e2
}
.layer-list-share .edit-input{
    height:auto;
    margin:60px 0 35px;
    padding:0 10px;
    background-color:#fff;
    border:1px solid #ccc;
    text-align:center
}
@media (max-width: 900px){
    .layer-list-share .edit-input{
        margin:45px 0 17px
    }
}
.layer-list-share .edit-input label{
    position:absolute;
    bottom:100%;
    display:block;
    width:100%;
    margin-bottom:20px;
    font-size:20px;
    text-align:center
}
@media (max-width: 900px){
    .layer-list-share .edit-input label{
        margin-bottom:10px
    }
}
.layer-list-share .edit-input input{
    height:50px;
    font-size:18px;
    font-weight:300;
    color:#bfbfbf;
    text-align:left
}
@media (max-width: 900px){
    .layer-list-share .edit-input input{
        height:40px;
        font-size:15px
    }
}
.layer-list-share .edit-input .btn{
    top:10px
}
@media (max-width: 900px){
    .layer-list-share .edit-input .btn{
        top:5px
    }
}
.layer-list-share .buttons{
    text-align:center
}
.layer-list-share .mobile{
    opacity:0.5;
    pointer-events:none
}
.layer-list-share .mobile.pc{
    opacity:1;
    pointer-events:auto
}
@media (max-width: 900px){
    .layer-list-share .copy-clipboard{
        text-align:center
    }
}
@media (max-width: 900px){
    .layer-list-share .sns-list .pc{
        opacity:0.3;
        pointer-events:none
    }
}
@media (max-width: 900px){
    .layer-list-share .sns-list .mobile{
        opacity:1;
        pointer-events:auto
    }
}
.layer-list-share[data-status="inactive"] .share-inner{
    display:none
}
.layer-list-share[data-status="active"] .layer-content>.buttons{
    display:none
}
.layer-list-share[data-status="active"] .copy-clipboard{
    padding:20px 20px 10px;
    color:#585858;
    border:1px solid #e6e6e6;
    background-color:#f7f7f7
}
.layer-list-share[data-status="active"] .copy-clipboard>span{
    border-color:#e6e6e6;
    background-color:#fff;
    box-shadow:0 0 transparent
}
.layer-list-share[data-status="active"] .sns-list>p{
    display:none
}
.layer-re-share label[for='folderTitle']{
    display:none
}
.layer-re-share .edit-input{
    margin-top:0
}
@media (max-width: 900px){
    .layer-re-share .edit-input{
        margin-top:0
    }
}
.layer-re-share #folderTitle{
    color:#101010
}
.share-inner{
    text-align:center;
    padding:0;
    text-align:center
}
.share-inner .btn.pic{
    display:inline-block;
    width:76px;
    height:76px;
    margin:10px;
    padding:0;
    border:0;
    border-radius:50%;
    text-align:left;
    overflow:hidden;
    box-sizing:border-box
}
.share-inner .btn.pic:after{
    content:attr(data-count);
    display:block;
    height:29px;
    line-height:29px;
    font-size:14px;
    text-align:center;
    background-color:rgba(0,0,0,0.1)
}
.share-inner .btn.pic span{
    display:none
}
.share-inner .btn.pic .icon{
    display:block;
    width:30px;
    height:47px;
    line-height:47px;
    margin:0 auto;
    text-align:center
}
.share-inner .btn.pic .icon:before{
    font-size:25px
}
.share-inner .btn.pic.kakaotalk .icon:before{
    height:47px;
}
.share-inner .btn.pic.band .icon:before{
    font-size:35px
}
.share-inner .btn.pic.linkedin .icon{
    width:24px;
    background-position:0 50%
}
.share-inner .btn-layer-close{
    position:static;
    margin-top:30px;
    padding:0 20px;
    margin-top:10px
}
@media (max-width: 900px){
    .layer-list-share .share-inner{
        padding-top:0px
    }
}
.layer-list-share .share-inner .sns-list{
    margin:20px 0 35px
}
@media (max-width: 900px){
    .layer-list-share .share-inner .sns-list{
        margin:10px 0 20px
    }
}
.layer-list-share .share-inner .btn{
    margin:0 2px;
    vertical-align:top
}
.layer-list-share .share-inner .btn.pic{
    width:55px;
    height:55px
}
@media (max-width: 900px){
    .layer-list-share .share-inner .btn.pic{
        float:none;
        margin-top:5px;
    }
}
.layer-list-share .share-inner .btn.pic.url{
    /*display:none*/
}
.copy-clipboard:after{
    content:'';
    display:block;
    clear:both
}
@media (max-width: 900px){
    .copy-clipboard a{
        line-height:30px
    }
}
.copy-clipboard>span{
    display:block;
    width:100%;
    margin:10px 0;
    padding:9px 9px 9px 18px;
    text-align:left;
    color:#9e9e9e;
    white-space:nowrap;
    text-overflow:ellipsis;
    border:1px solid #ccc;
    border-radius:1px;
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
    box-sizing:border-box;
    overflow:hidden
}
.layer-list-share .copy-clipboard>span{
    padding:0;
    text-align:center
}
.layer-list-share .copy-clipboard>span a{
    display:block;
    padding:9px;
    text-align:center
}
.rating-layer{
    padding:30px
}
@media (max-width: 900px){
    .rating-layer{
        padding:45px 15px 15px
    }
}
.rating-layer-contents{
    position:relative;
    max-width:760px;
    margin:0 auto;
    padding:80px 60px;
    border-radius:10px;
    background-color:#fff;
    box-sizing:border-box
}
@media (max-width: 900px){
    .rating-layer-contents{
        padding:50px 15px 15px
    }
}
.rating-layer-content{
    display:flex;
    margin-bottom:37px
}
@media (max-width: 900px){
    .rating-layer-content{
        flex-direction:column;
        margin-bottom:15px
    }
}
.rating-layer-content .img{
    position:relative;
    overflow:hidden;
    width:296px;
    flex:none
}
@media (max-width: 900px){
    .rating-layer-content .img{
        width:100%
    }
}
.rating-layer-content .img:after{
    content:'';
    display:block;
    padding-bottom:56.4189%
}
.rating-layer-content .img img{
    position:absolute;
    top:50%;
    left:50%;
    max-height:100%;
    transform:translate(-50%, -50%)
}
.rating-layer-content .content{
    padding:0 0 0 20px;
    flex:1
}
@media (max-width: 900px){
    .rating-layer-content .content{
        padding:0 !important
    }
}
.rating-layer-content .title{
    font-size:20px;
    font-weight:bold;
    margin:10px 0 15px
}
@media (max-width: 900px){
    .rating-layer-content .title{
        font-size:15px;
        margin:5px 0 10px
    }
}
.rating-layer-content .description{
    color:#585858;
    font-size:18px;
    position:relative;
    width:100%;
    height:54px;
    overflow:hidden
}
@media (max-width: 900px){
    .rating-layer-content .description{
        font-size:13px
    }
}
.rating-layer-content .description:after{
    content:'';
    position:absolute;
    bottom:0;
    right:0;
    width:40px;
    height:25px;
    background:linear-gradient(to left, #fff, transparent)
}
@supports (-webkit-line-clamp: 2){
    .rating-layer-content .description{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: normal;
        height: auto;
    }
    .rating-layer-content .description:after{
        display:none
    }
}
.rating-layer-evaluation h2{
    color:#101820;
    font-size:18px;
    font-weight:bold;
    margin-bottom:10px
}
@media (max-width: 900px){
    .rating-layer-evaluation h2{
        font-size:15px
    }
}
.rating-layer-evaluation ul{
    color:#333;
    font-size:18px;
    margin-bottom:15px;
    padding:35px 29px;
    border:1px solid #e6e6e6;
    border-radius:3px
}
@media (max-width: 900px){
    .rating-layer-evaluation ul{
        font-size:13px;
        padding:15px
    }
}
.rating-layer-evaluation li{
    display:flex;
    justify-content:space-between;
    padding:10px 0
}
@media (max-width: 900px){
    .rating-layer-evaluation li{
        flex-direction:column;
        padding:5px 0
    }
}
.rating-layer-evaluation .title{
    word-break:keep-all
}
.rating-layer-evaluation .stars{
    display:block;
    flex:none;
    height:20px;
    margin-left:5px;
    background-image:url("../images/common/star-gray-xl.png");
    background-repeat:space;
    background-size:auto 100%
}
.rating-layer-evaluation .stars,.rating-layer-evaluation .stars i{
    width:110px
}
.rating-layer-evaluation .stars i{
    display:block;
    height:100%;
    background-image:url("../images/common/star-fill-xl.png");
    background-repeat:space;
    background-size:auto 100%
}
.rating-layer-evaluation .stars em{
    overflow:hidden;
    display:block;
    height:100%
}
.rating-layer-foot{
    text-align:center
}
.rating-layer .info{
    color:#757575;
    font-size:14px
}
.rating-layer .foot{
    text-align:center;
    padding-top:50px
}
.rating-layer .foot .btn{
    color:#fff;
    background-color:#06a7e2
}
.tost-layer{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10000
}
.tost-layer.fade .layer{
    opacity:1
}
.tost-layer.fade .layer:before{
    border-width:8px;
    opacity:1;
    transform:scale(1)
}
.tost-layer .layer{
    position:absolute;
    top:50%;
    left:50%;
    width:503px;
    min-height:266px;
    margin:-133px 0 0 -251.5px;
    padding:10px 10px 20px;
    background-color:#fff;
    box-shadow:0 0 20px #ccc;
    border:1px solid #ccc;
    border-radius:10px;
    opacity:0;
    transition:all 0.3s;
    text-align:center;
    box-sizing:border-box
}
@media (max-width: 900px){
    .tost-layer .layer{
        left:15px;
        right:15px;
        width:auto;
        margin-top:-200px;
        margin-left:0
    }
}
.tost-layer .layer:before{
    content:'';
    display:block;
    width:95px;
    height:95px;
    margin:44px auto 25px;
    border:0 solid #6172b6;
    border-radius:50%;
    background-image:url("../images/common/bg_tost_check.png");
    background-repeat:no-repeat;
    background-position:50% 50%;
    opacity:0;
    transform:scale(1.2);
    transition:all 0.3s;
    box-sizing:border-box
}
.tost-layer .layer h1{
    color:#101820;
    font-size:25px;
    font-weight:bold
}
.tost-layer .layer p{
    color:#585858;
    font-size:18px
}
.tost-layer .layer .content{
    word-break:keep-all;
    word-wrap:break-word
}
.tost-layer .layer .footer{
    padding-top:20px
}
@media (max-width: 900px){
    .tost-layer .layer .footer .btn{
        min-width:100px;
        min-height:40px
    }
    .tost-layer .layer .footer .btn+.btn{
        margin-left:5px
    }
}
.tost-open{
    overflow:hidden
}
.layer-trans .layer{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    max-width:760px;
    margin:0 auto;
    transform:translate(-50%, -50%)
}
@media (max-width: 900px){
    .layer-trans .layer{
        position:relative;
        min-width:0
    }
}
.layer-trans .layer-content{
    padding:80px 60px 40px
}
@media (max-width: 900px){
    .layer-trans .layer-content{
        padding:45px 15px 25px
    }
}
.layer-trans .title{
    font-size:34px;
    text-align:center
}
@media (max-width: 900px){
    .layer-trans .title{
        font-size:21px
    }
}
.layer-trans .list{
    height:400px;
    margin-top:-1px;
    border:1px solid #e6e6e6;
    border-radius:1px;
    box-sizing:border-box;
    overflow-y:auto
}
@media (max-width: 900px){
    .layer-trans .list{
        max-height:35vh;
        padding-bottom:0
    }
}
.layer-trans .list:after{
    content:'';
    display:block;
    clear:both
}
.layer-trans .list li{
    position:relative;
    line-height:60px;
    transition:background-color .3s
}
@media (max-width: 900px){
    .layer-trans .list li{
        letter-spacing:-0.5px
    }
}
.layer-trans .list li:hover,.layer-trans .list li:focus,.layer-trans .list li:active{
    background-color:#e6e6e6
}
.layer-trans .list li label{
    display:block;
    padding-left:30px;
    box-sizing:border-box
}
.layer-trans .list li input{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    opacity:0
}
.layer-trans .list li.active{
    background-color:#e6e6e6
}
.layer-trans .list li.active span,.layer-trans .list li.active em{
    font-weight:bold;
    color:#101820
}
.layer-trans .list label{
    cursor:pointer;
    white-space:nowrap
}
.layer-trans .result-empty{
    min-height:1px;
    height:400px;
    justify-content:flex-start
}
.layer-trans .result-empty .inner{
    border-top:0
}
@media (max-width: 900px){
    .layer-trans .result-empty{
        max-height:35vh;
        justify-content:center
    }
}
.layer-trans .language-inner .btn{
    position:static;
    display:block;
    margin:55px auto 0;
    padding:0 35px
}
@media (max-width: 900px){
    .layer-trans .language-inner .btn{
        min-width:80px;
        margin-top:25px;
        padding:0 15px
    }
}
.layer-trans .language-inner .btn span{
    display:none
}
.layer-trans .language-inner .btn-submit{
    min-width:1px;
    height:100%;
    position:absolute;
    top:50%;
    right:0;
    margin-top:0;
    padding:0 15px;
    transform:translateY(-50%);
    background-color:transparent;
    text-align:right
}
.layer-trans .language-inner .btn-submit i{
    color:#878b8f
}
.layer-trans .language-inner .form-group{
    position:relative;
    margin-top:0px
}
.layer-trans .language-inner .form-group input{
    border-color:#e6e6e6;
    box-shadow:none
}
.layer-trans-focus .layer{
    padding-bottom:55%
}
.layer-trans-focus .result-empty,.layer-trans-focus .list{
    max-height:100px
}
.layer-stream .layer{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    max-width:560px;
    margin:0 auto;
    transform:translate(-50%, -50%)
}
.layer-stream .layer-content{
    overflow:hidden
}
.layer-stream .icon-close:before{
    color:#fff
}
.layer-stream h2{
    display:table;
    width:100%;
    height:110px
}
.layer-stream h2 span{
    display:table-cell;
    padding:15px 50px;
    font-size:34px;
    font-weight:bold;
    color:#fff;
    line-height:40px;
    text-align:center;
    background:#00b5ef;
    vertical-align:middle
}
@media (max-width: 900px){
    .layer-stream h2{
        height:58px
    }
    .layer-stream h2 span{
        font-size:19px;
        line-height:28px
    }
}
.layer-stream .steam-inner{
    padding:35px 24px 40px 30px;
    overflow:hidden
}
.layer-stream .steam-inner .scroll-custom{
    max-height:62vh;
    padding-right:12px;
    overflow-x:hidden;
    overflow-y:scroll
}
.layer-stream .steam-inner .scroll-custom::-webkit-scrollbar{
    display:block;
    width:6px
}
.layer-stream .steam-inner .scroll-custom::-webkit-scrollbar-track{
    background-color:transparent
}
.layer-stream .steam-inner .scroll-custom::-webkit-scrollbar-thumb{
    border-radius:4px;
    background-color:#e5e5e5
}
.layer-stream .steam-inner .scroll-custom::-webkit-scrollbar-button{
    width:0;
    height:0
}
.layer-stream .steam-inner .stream-state li+li{
    margin-top:36px
}
.layer-stream .steam-inner .stream-state .title{
    display:block;
    font-size:22px;
    line-height:28px;
    font-weight:bold
}
@media (max-width: 900px){
    .layer-stream .steam-inner .stream-state .title{
        font-size:13px;
        line-height:18px
    }
}
.layer-stream .steam-inner .stream-state .time{
    display:block;
    margin-top:5px;
    font-size:18px;
    line-height:26px
}
@media (max-width: 900px){
    .layer-stream .steam-inner .stream-state .time{
        font-size:11px;
        line-height:15px
    }
}
.layer-stream .steam-inner .stream-state .img{
    position:relative;
    margin-top:16px
}
.layer-stream .steam-inner .stream-state .img .banner{
    display:block;
    overflow:hidden;
    padding-bottom:27.43%;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:cover
}
.layer-stream .steam-inner .stream-state .img .banner.mo_img{
    display:none
}
.layer-stream .steam-inner .stream-state .img .label{
    display:inline-block;
    position:absolute;
    bottom:0;
    left:0;
    height:30px;
    font-size:16px;
    line-height:30px;
    color:#fff;
    padding:0 10px;
    background-color:#1c6ad3
}
.layer-stream .steam-inner .stream-state .img .label.gray{
    background-color:#858585
}
@media (max-width: 900px){
    .layer-stream .steam-inner .stream-state .img{
        margin-top:10px
    }
    .layer-stream .steam-inner .stream-state .img .banner{
        padding-bottom:48.05%
    }
    .layer-stream .steam-inner .stream-state .img .banner.mo_img{
        display:block
    }
    .layer-stream .steam-inner .stream-state .img .banner.pc_img{
        display:none
    }
    .layer-stream .steam-inner .stream-state .img .label{
        bottom:auto;
        top:0;
        left:auto;
        right:0;
        height:22px;
        font-size:13px;
        line-height:22px;
        padding:0 10px
    }
}
@media (max-width: 900px){
    .layer-stream .steam-inner{
        padding:20px
    }
    .layer-stream .steam-inner .scroll-custom{
        padding-right:0
    }
    .layer-stream .steam-inner .scroll-custom::-webkit-scrollbar{
        display:none
    }
    .layer-stream .steam-inner .stream-state li+li{
        margin-top:12px
    }
}
.layer-winner .layer-content{
    padding:30px
}
@media (max-width: 900px){
    .layer-winner .layer-content{
        padding:20px
    }
}
.layer-winner .layer-content .btns{
    margin-top:10px
}
@media (max-width: 900px){
    .layer-winner .layer-content .btns{
        font-size:17.5px
    }
}
.layer-winner .announce{
    padding:30px 0 10px;
    text-align:center
}
.layer-winner .announce strong{
    display:block;
    margin-bottom:20px;
    font-size:30px;
    font-weight:normal
}
@media (max-width: 900px){
    .layer-winner .announce strong{
        font-size:20px
    }
}
.layer-winner .announce p,.layer-winner .announce span{
    height:50px;
    line-height:48px;
    border-radius:3px;
    background-color:#f7f7f7
}
.layer-winner .announce p{
    clear:both
}
.layer-winner .announce span{
    float:right;
    min-width:49.5%;
    margin-bottom:5px
}
.layer-winner .announce span:first-of-type{
    float:left
}
@media (max-width: 900px){
    .detail>.inner{
        padding:0
    }
}
.detail .timestemp-list{
    margin-top:30px
}
.detail .timestemp-list button{
    width:100%;
    min-height:50px;
    padding:13px;
    box-sizing:border-box;
    border:1px solid #dadada;
    text-align:center
}
.detail .timestemp-list button span{
    display:inline-block;
    font-size:20px;
    color:#02b9f3;
    line-height:22px;
    vertical-align:top
}
.detail .timestemp-list button span.txt-close{
    display:none
}
.detail .timestemp-list button i{
    display:inline-block;
    margin:1px 0 0 5px;
    width:22px;
    height:22px;
    font-size:0;
    background:url("../images/icons/timestemp_arr.png") no-repeat 0 0;
    vertical-align:top;
    transform:rotate(0deg);
    transition:transform 0.5s
}
.detail .timestemp-list button.close span.txt-close{
    display:inline-block
}
.detail .timestemp-list button.close span.txt-open{
    display:none
}
.detail .timestemp-list button.close i{
    transform:rotate(180deg)
}
.detail .timestemp-list ul{
    padding:23px 35px;
    border:1px solid #dadada;
    border-top-width:0;
    background:#fafafa
}
.detail .timestemp-list ul li{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-content:flex-start;
    justify-content:flex-start;
    align-items:flex-start;
    font-size:20px;
    line-height:25px
}
.detail .timestemp-list ul li+li{
    margin-top:6px
}
.detail .timestemp-list ul li .time{
    display:inline-block;
    color:#02b9f3;
    margin-right:20px;
    white-space:nowrap
}
.detail .timestemp-list ul li .desc{
    display:inline-block;
    color:#0c0c0c
}
@media (max-width: 900px){
    .detail .timestemp-list{
        margin:20px 20px 0 20px
    }
    .detail .timestemp-list button{
        min-height:35x;
        padding:7px 10px
    }
    .detail .timestemp-list button span{
        font-size:14px;
        line-height:16px
    }
    .detail .timestemp-list button i{
        margin-top:2px;
        width:13px;
        height:13px;
        background-image:url("../images/icons/timestemp_m_arr.png");
        background-size:100%
    }
    .detail .timestemp-list ul{
        padding:9px 12px
    }
    .detail .timestemp-list ul li{
        font-size:14px;
        line-height:18px
    }
    .detail .timestemp-list ul li+li{
        margin-top:4px
    }
    .detail .timestemp-list ul li .time{
        margin-right:10px
    }
}
.detail .content{
    padding-top:30px;
    line-height:1.5;
    font-size:20px;
    word-break:keep-all;
    word-wrap:break-word
}
@media (max-width: 900px){
    .detail .content{
        line-height:1.75;
        padding:20px 20px 0;
        font-size:15px
    }
}
.detail .content:after{
    content:'';
    display:block;
    clear:both
}
.detail .contents{
    position:relative;
    min-height:650px
}
.detail .content iframe{
    max-width:100%
}
.detail .news .contents{
    padding-top:30px;
    border-top:1px solid #d7d7d7
}
.detail .movie-meta{
    display:inline-block;
    margin-bottom:50px;
    background-color:#e6e6e6
}
@media (max-width: 900px){
    .detail .movie-meta{
        display:inline-block;
        margin-bottom:50px;
        background-color:#e6e6e6
    }
}
.detail .movie-meta ul,.detail .movie-meta li{
    display:inline-block
}
@media (max-width: 900px){
    .detail .movie-meta ul,.detail .movie-meta li{
        display:inline-block
    }
}
.detail-content{
    font-size:20px;
    color:#101820
}
.detail-content h4{
    font-size:22px;
    font-weight:bold
}
.detail-content h4+p{
    margin-top:10px
}
.detail-content blockquote{
    margin:50px 0;
    padding:0;
    color:#1185ce;
    font-weight:bold
}
.detail-content blockquote:first-child{
    margin-top:0
}
.detail-content small{
    font-size:15px
}
.detail-content em{
    font-style:italic
}
.detail-content p{
    margin:50px 0
}
.detail-content p:first-child{
    margin-top:0
}
.detail-content p:last-child{
    margin-bottom:0
}
.detail-content p strong{
    color:#585858
}
.detail-content ul{
    margin-left:20px;
    list-style:square
}
.detail-content ol{
    margin-left:20px;
    list-style:decimal
}
.detail-content figure{
    max-width:100%;
    margin:0;
    padding:0
}
.detail-content .q{
    color:#101820
}
.detail-content .em{
    color:#1185ce
}
.detail-content .link a{
    display:inline-block;
    padding:8px 10px;
    font-size:18px;
    border:1px solid #e6e6e6;
    border-radius:3px
}
.detail-content .link a:after{
    content:'\e005';
    margin-left:5px;
    font-family:'atomy-icon-font';
    font-size:11px
}
.detail-content .box{
    margin:30px 0 10px;
    padding:30px;
    font-size:18px;
    color:#585858;
    background-color:#f9f9f9
}
.detail-content .box:last-child{
    margin-bottom:0
}
.detail-content .box h4{
    color:#1185ce
}
.detail-content .box h4:before{
    content:'';
    display:inline-block;
    width:3px;
    height:20px;
    margin-right:7px;
    background-color:#1185ce;
    vertical-align:middle
}
.detail-content .box+p{
    margin-top:10px
}
.detail-content .content-box{
    padding:20px !important;
    background-color:#f9f9f9 !important
}
.detail-content .dot-box{
    padding:20px;
    border:1px dashed #ccc
}
@media (max-width: 1120px){
    .detail .detail-content img{
        width:auto !important;
        height:auto !important
    }
}
.detail-page-nav{
    position:relative;
    z-index:2;
    border-top:1px solid #e1e1e1;
    background:#fff
}
@media (max-width: 900px){
    .detail-page-nav{
        margin-bottom:0
    }
}
.detail-page-nav:after{
    content:'';
    display:block;
    clear:both
}
.detail-page-nav.no-page{
    border-top:0 none;
    height:0
}
.detail-page-nav a{
    float:left;
    display:block;
    width:50%;
    height:125px;
    white-space:nowrap;
    box-sizing:border-box
}
@media (max-width: 900px){
    .detail-page-nav a{
        height:auto;
        font-size:15px;
        white-space:normal
    }
}
.detail-page-nav a:after{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
}
.detail-page-nav a:hover{
    color:#1185ce
}
.detail-page-nav a:hover .arrow{
    color:#1185ce
}
.detail-page-nav a:hover .arrow:before,.detail-page-nav a:hover .arrow:after{
    background-image:url("../images/common/detail_icon_over.png")
}
.detail-page-nav a:hover .inner{
    border-bottom:1px solid
}
.detail-page-nav a .inner{
    display:inline-block;
    max-width:100%;
    border-bottom:1px solid transparent;
    vertical-align:middle;
    white-space:normal
}
@media (max-width: 900px){
    .detail-page-nav a .inner{
        display:inline-block;
        height:73px;
        margin:15px;
        padding:0;
        vertical-align:middle;
        overflow:hidden
    }
}
.detail-page-nav a .arrow{
    display:block;
    margin-bottom:10px;
    font-size:16px;
    color:#585858
}
@media (max-width: 900px){
    .detail-page-nav a .arrow{
        font-size:11px
    }
}
@media (max-width: 900px){
    .detail-page-nav .inner{
        padding:0
    }
}
.detail-page-nav .prev{
    padding-right:15px
}
.detail-page-nav .prev .arrow:before{
    content:'';
    display:inline-block;
    width:28px;
    height:11px;
    margin:-2px 10px 0 0;
    background-image:url("../images/common/detail_icon.png");
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:47px auto
}
@media (max-width: 900px){
    .detail-page-nav .prev .arrow:before{
        content:'';
        display:inline-block;
        width:20px;
        height:9px;
        margin:-2px 10px 0 0;
        background-image:url("../images/common/detail_icon.png");
        background-repeat:no-repeat;
        background-position:0 -20px
    }
}
.detail-page-nav .next{
    float:right;
    padding-left:15px;
    border-left:1px solid #e1e1e1;
    text-align:right
}
.detail-page-nav .next .arrow:after{
    content:'';
    display:inline-block;
    width:28px;
    height:11px;
    margin:-2px 0 0 10px;
    background-image:url("../images/common/detail_icon.png");
    background-repeat:no-repeat;
    background-position:100% 100%;
    background-size:47px auto
}
@media (max-width: 900px){
    .detail-page-nav .next .arrow:after{
        content:'';
        display:inline-block;
        width:20px;
        height:9px;
        margin:-2px 0 0 10px;
        background-image:url("../images/common/detail_icon.png");
        background-repeat:no-repeat;
        background-position:100% -20px
    }
}
.toggle-content .detail .aside,.toggle-content .detail .contents{
    display:none
}
@media (max-width: 900px){
    .toggle-content .detail .aside,.toggle-content .detail .contents{
        display:none
    }
}
[data-loc="go"] .detail .inner{
    min-height:auto
}
@media (max-width: 900px){
    [data-loc="go"] .detail .inner{
        min-height:0
    }
}
.webzine-header{
    position:relative;
    height:86px;
    background:#02b9f3;
    padding:21px 0;
    box-sizing:border-box;
    z-index:1
}
@media (max-width: 900px){
    .webzine-header{
        height:40px;
        padding:8px 0
    }
}
.webzine-header h3{
    width:calc(100% - 500px);
    max-width:900px;
    margin:0 auto;
    font-size:28px;
    font-weight:600;
    color:#fff;
    line-height:42px;
    text-align:center;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
@media (max-width: 900px){
    .webzine-header h3{
        width:100%;
        font-size:19px;
        line-height:24px
    }
}
.webzine-header .select-webzine{
    position:absolute;
    top:0;
    right:0;
    width:200px;
    height:42px
}
.webzine-header .select-webzine button{
    padding:0 30px 0 10px;
    border-color:#d0d0d0;
    border-radius:0;
    background:#fff;
    font-size:16px;
    font-weight:bold;
    color:#02b9f3
}
.webzine-header .select-webzine button:after{
    top:17px;
    border-width:6px 5px 0 5px;
    border-color:#02b9f3 transparent transparent transparent
}
.webzine-header .select-webzine button span{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
.webzine-header .select-webzine ul{
    bottom:auto;
    top:41px;
    border-radius:0;
    border:1px solid #d0d0d0;
    border:0 1px 1px;
    box-shadow:2px 3px 3px rgba(0,0,0,0.2);
    color:#000;
    max-height:500px;
    overflow-y:auto
}
.webzine-header .select-webzine ul a{
    color:#101824;
    font-weight:bold
}
.webzine-header .select-webzine ul a:hover{
    background-color:#fff
}
.webzine-header .select-webzine ul .active a{
    color:#02b9f3;
    background-color:#fff
}
.webzine-header .select-webzine ul .active a:before{
    display:none
}
@media (max-width: 900px){
    .webzine-header .select-webzine{
        width:50%;
        max-width:145px;
        min-width:auto;
        top:calc(100% + 27px);
        height:34px
    }
    .webzine-header .select-webzine button{
        padding:0 20px 0 10px;
        border-color:#02b9f3;
        background:#fff;
        font-size:12px;
        color:#02b9f3
    }
    .webzine-header .select-webzine button:after{
        top:13px;
        border-width:6px 5px 0 5px;
        border-color:#02b9f3 transparent transparent transparent
    }
    .webzine-header .select-webzine ul{
        top:33px;
        border-color:#02b9f3;
        max-height:300px
    }
    .webzine-header .select-webzine.active button{
        box-shadow:0 3px 3px rgba(0,0,0,0.2)
    }
}
.webzine-header .share-link{
    position:absolute;
    top:-5px;
    left:0;
    width:200px;
    height:56px;
    font-size:0
}
.webzine-header .share-link a{
    display:inline-block;
    width:56px;
    height:56px;
    margin:0 3px;
    border-radius:50%;
    overflow:hidden;
    text-indent:-99999px;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-color:#fff;
    font-size:0
}
.webzine-header .share-link .pdf{
    background-image:url("../images/icons/pdf1.png")
}
.webzine-header .share-link .share{
    background-image:url("../images/icons/share1.png")
}
.webzine-header .share-link .down{
    background-image:url("../images/icons/down1.png")
}
.webzine-header .share-link .down .parcent{
    display:none
}
.webzine-header .share-link .down.loading{
    position:static;
    cursor:default;
    font-size:13px;
    color:#22c3f6;
    line-height:56px;
    text-indent:0
}
.webzine-header .share-link .down.loading .parcent{
    display:block;
    width:100%;
    height:100%;
    background-color:#fff;
    white-space:nowrap;
    text-align:center
}
.webzine-header .share-link .down.loading strong{
    font-size:18px;
    margin-right:2px
}
@media (max-width: 900px){
    .webzine-header .share-link{
        top:52px;
        width:50%;
        text-align:left;
        margin:1px 0 1px -2px
    }
    .webzine-header .share-link .pdf{
        background-image:url("../images/icons/pdf.png")
    }
    .webzine-header .share-link .share{
        background-image:url("../images/icons/share.png")
    }
    .webzine-header .share-link .down{
        background-image:url("../images/icons/down.png")
    }
    .webzine-header .share-link .down.loading{
        font-size:10px;
        color:#fff;
        line-height:32px;
        background:rgba(0,0,0,0.7)
    }
    .webzine-header .share-link .down.loading .parcent{
        background:none
    }
    .webzine-header .share-link .down.loading strong{
        font-size:12px;
        margin-right:0
    }
    .webzine-header .share-link a{
        width:32px;
        height:32px;
        margin:0 2px;
        background-size:23px auto;
        background-color:rgba(0,0,0,0.7)
    }
}
.webzine-content{
    position:relative;
    z-index:0
}
.webzine-content .webzine-total-wrap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:35px;
    overflow:hidden;
    z-index:10
}
.webzine-content .webzine-total-wrap .list-wrap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    box-sizing:border-box;
    overflow:hidden
}
.webzine-content .webzine-total-wrap .dim{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0
}
.webzine-content .webzine-total-wrap .btn-open{
    position:absolute;
    top:0;
    right:44px;
    width:104px;
    height:35px;
    overflow:hidden;
    font-size:0;
    background:url("../images/icons/arrow_open.png") no-repeat 0 0
}
.webzine-content .webzine-total-wrap .btn-open.fix{
    position:fixed;
    top:120px;
    right:145px
}
.webzine-content .webzine-total-wrap .inner{
    position:relative;
    padding:68px 0 50px;
    box-sizing:border-box
}
.webzine-content .webzine-total-wrap .inner .list-cont{
    max-width:1300px;
    height:100%;
    padding-right:70px;
    margin:0 auto;
    overflow-y:auto
}
.webzine-content .webzine-total-wrap .inner .list-cont::-webkit-scrollbar{
    display:block;
    width:6px
}
.webzine-content .webzine-total-wrap .inner .list-cont::-webkit-scrollbar-track{
    background-color:rgba(0,0,0,0.8)
}
.webzine-content .webzine-total-wrap .inner .list-cont::-webkit-scrollbar-thumb{
    border-radius:4px;
    background-color:#e5e5e5
}
.webzine-content .webzine-total-wrap .inner .list-cont::-webkit-scrollbar-button{
    width:0;
    height:0
}
.webzine-content .webzine-total-wrap .year-list{
    display:table;
    table-layout:fixed;
    width:100%
}
.webzine-content .webzine-total-wrap .year-list .year{
    display:table-cell;
    width:130px;
    font-size:20px;
    font-weight:bold;
    color:#fff;
    line-height:27px;
    text-align:right;
    vertical-align:top
}
.webzine-content .webzine-total-wrap .year-list ul{
    display:table-cell;
    overflow:hidden
}
.webzine-content .webzine-total-wrap .year-list ul>li{
    float:left;
    width:25%;
    padding-left:5%;
    padding-right:0;
    margin-bottom:30px
}
.webzine-content .webzine-total-wrap .year-list ul>li .thumb{
    border:0 none
}
.webzine-content .webzine-total-wrap .year-list ul>li .thumb .img{
    border:0 none
}
.webzine-content .webzine-total-wrap .year-list ul>li .year{
    display:block;
    width:100%;
    text-align:center;
    margin-top:15px
}
.webzine-content .webzine-total-wrap .year-list+.year-list{
    margin-top:50px
}
.webzine-content .webzine-total-wrap.open .dim{
    opacity:0.8
}
.webzine-content .webzine-total-wrap.open .btn-open{
    top:0;
    background-image:url("../images/icons/arrow_close.png")
}
@media (max-width: 900px){
    .webzine-content .webzine-total-wrap{
        display:none
    }
}
@media (max-width: 1280px){
    .webzine-content .webzine-total-wrap .list-wrap .year-list>.year{
        width:11%;
        font-size:15px
    }
}
.webzine-content .contents{
    position:relative;
    width:100%;
    min-height:500px;
    padding:68px 0 50px;
    box-sizing:border-box;
    background:#fff
}
.webzine-content .contents .main-list{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    justify-content:space-around
}
.webzine-content .contents .main-list .img-wrap{
    position:relative;
    width:50%;
    border:1px solid #ebebeb;
    overflow:hidden
}
.webzine-content .contents .main-list .img-wrap:before{
    content:'';
    display:block;
    padding-bottom:56.25%
}
.webzine-content .contents .main-list .img-wrap img{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    min-height:100%;
    transform:translate(-50%, -50%)
}
.webzine-content .contents .main-list .txt-wrap{
    width:50%;
    padding-left:30px;
    box-sizing:border-box
}
.webzine-content .contents .main-list .txt-wrap .label{
    display:inline-block;
    margin-bottom:10px;
    height:auto;
    min-width:108px;
    max-width:100%;
    padding:0 12px;
    box-sizing:border-box;
    border:1px solid #02b9f3;
    border-radius:16px;
    overflow:hidden;
    font-size:18px;
    line-height:32px;
    color:#02b9f3;
    text-align:center;
    white-space:nowrap;
    text-overflow:ellipsis
}
.webzine-content .contents .main-list .txt-wrap .title{
    font-size:32px;
    font-weight:600;
    line-height:40px;
    max-height:80px;
    -webkit-line-clamp:2
}
.webzine-content .contents .main-list .txt-wrap .txt{
    margin-top:20px;
    font-size:20px;
    line-height:30px;
    max-height:240px;
    -webkit-line-clamp:8
}
@media (max-width: 1400px){
    .webzine-content .contents .main-list .txt-wrap{
        padding-left:15px
    }
    .webzine-content .contents .main-list .txt-wrap .label{
        margin-bottom:5px;
        font-size:14px;
        line-height:26px
    }
    .webzine-content .contents .main-list .txt-wrap .title{
        font-size:28px;
        line-height:32px;
        max-height:64px
    }
    .webzine-content .contents .main-list .txt-wrap .txt{
        margin-top:10px;
        font-size:16px;
        line-height:23px;
        max-height:270px;
        -webkit-line-clamp:9
    }
}
@media (max-width: 1100px){
    .webzine-content .contents .main-list .txt-wrap .txt{
        max-height:161px;
        -webkit-line-clamp:7
    }
}
@media (max-width: 900px){
    .webzine-content .contents .main-list .txt-wrap{
        width:50%;
        padding:0 15px 15px
    }
}
@media (max-width: 1000px){
    .webzine-content .contents .main-list{
        display:block
    }
    .webzine-content .contents .main-list .img-wrap{
        width:100%
    }
    .webzine-content .contents .main-list .txt-wrap{
        width:100%;
        padding-left:0;
        margin-top:15px
    }
}
.webzine-content .contents .webzine-list{
    margin:50px -19px 0 -18px;
    width:calc(100% + 37px);
    font-size:0
}
.webzine-content .contents .webzine-list .article{
    display:inline-block;
    width:33.3334%;
    padding:0 15px 30px;
    box-sizing:border-box;
    vertical-align:top
}
.webzine-content .contents .webzine-list .article .content{
    padding-top:24px
}
.webzine-content .contents .webzine-list .article .content .label{
    position:static;
    display:inline-block;
    margin-bottom:10px;
    width:auto;
    height:auto;
    min-width:94px;
    max-width:100%;
    padding:0 12px;
    box-sizing:border-box;
    border:1px solid #02b9f3;
    border-radius:15px;
    overflow:hidden;
    font-size:16px;
    line-height:25px;
    color:#02b9f3;
    text-align:center;
    white-space:nowrap;
    text-overflow:ellipsis
}
.webzine-content .contents .webzine-list .article .content .title{
    margin-bottom:0
}
@media (min-width: 1280px){
    .webzine-content .contents .webzine-list .article{
        width:25%;
        padding:0 19px 50px 18px
    }
}
@media (min-width: 1600px){
    .webzine-content .contents .webzine-list .article{
        width:20%;
        padding:0 19px 50px 18px
    }
}
@media (max-width: 900px){
    .webzine-content .contents .webzine-list .article{
        width:50%;
        padding:0 15px 15px
    }
}
@media (max-width: 1400px){
    .webzine-content .contents .webzine-list{
        margin:40px -15px 0;
        width:calc(100% + 30px)
    }
    .webzine-content .contents .webzine-list .article .content{
        padding-top:18px
    }
}
@media (max-width: 1280px){
    .webzine-content .contents .webzine-list{
        margin:40px -15px 0;
        width:calc(100% + 30px)
    }
    .webzine-content .contents .webzine-list .article .content{
        padding-top:18px
    }
}
@media (max-width: 1000px){
    .webzine-content .contents .webzine-list .article .content{
        padding-top:11px
    }
    .webzine-content .contents .webzine-list .article .content .label{
        min-width:60px;
        padding:0 7px;
        margin-bottom:4px;
        border-radius:8px;
        font-size:10px;
        line-height:16px
    }
    .webzine-content .contents .webzine-list .article .content .title{
        font-size:15px;
        line-height:22px;
        max-height:46px
    }
}
.webzine .btm-total-wrap{
    position:relative;
    z-index:2;
    padding:80px 0 70px;
    background:#f4f4f4;
    border:0 none;
    overflow:hidden
}
.webzine .btm-total-wrap .wrap-slider-category{
    margin-top:0 !important
}
.webzine .btm-total-wrap .wrap-slider-category .slider-brochure{
    white-space:nowrap
}
.webzine .btm-total-wrap .wrap-slider-category .brochure-item{
    width:230px;
    padding-bottom:10px
}
.webzine .btm-total-wrap .wrap-slider-category .slick-arrow{
    margin-top:-7px !important
}
.webzine .btm-total-wrap .wrap-slider-category .brochure-item.active{
    display:none
}
@media (max-width: 1280px){
    .webzine .btm-total-wrap{
        padding:40px 0 30px
    }
}
@media (max-width: 900px){
    .webzine .btm-total-wrap{
        padding:25px 0 15px
    }
    .webzine .btm-total-wrap .wrap-slider-category{
        opacity:1 !important
    }
}
@media (max-width: 1150px){
    .webzine .inner{
        margin:0 15px
    }
}
@media (max-width: 900px){
    .webzine .inner{
        margin:0 20px !important;
        padding:0 !important
    }
    .webzine .inner .main-list .txt-wrap .label{
        min-width:70px;
        padding:0 8px;
        border-radius:12px;
        font-size:12px;
        line-height:20px
    }
    .webzine .inner .main-list .txt-wrap .title{
        font-size:18px;
        line-height:22px
    }
    .webzine .inner .main-list .txt-wrap .txt{
        margin-top:8px;
        font-size:15px;
        line-height:25px;
        max-height:135px;
        -webkit-line-clamp:5
    }
    .webzine .inner .webzine-list{
        margin-top:25px
    }
}
.webzine.detail .webzine-header .prev{
    display:inline-block;
    position:absolute;
    top:0;
    right:0;
    width:200px;
    height:100%;
    padding-right:35px;
    box-sizing:border-box;
    font-size:18px;
    line-height:43px;
    color:#fff;
    text-align:right;
    background:url("../images/icons/prev.png") no-repeat 100% 50%
}
.webzine.detail .webzine-header .next{
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:100%;
    padding-left:35px;
    box-sizing:border-box;
    font-size:18px;
    line-height:43px;
    color:#fff;
    text-align:left;
    background:url("../images/icons/next.png") no-repeat 0 50%
}
.webzine.detail .webzine-header .select-webzine,.webzine.detail .webzine-header .share-link{
    display:none
}
@media (max-width: 900px){
    .webzine.detail .webzine-header{
        margin-bottom:64px
    }
    .webzine.detail .webzine-header .prev,.webzine.detail .webzine-header .next{
        display:none
    }
    .webzine.detail .webzine-header .select-webzine{
        display:block
    }
}
.webzine.detail .webzine-content .headline{
    padding:0 0 50px
}
.webzine.detail .webzine-content .headline h4 .label{
    display:inline-block;
    height:auto;
    margin-right:10px;
    padding:0 15px;
    box-sizing:border-box;
    border:1px solid #02b9f3;
    border-radius:20px;
    font-size:20px;
    line-height:34px;
    color:#02b9f3;
    vertical-align:top
}
.webzine.detail .webzine-content .headline h4 strong{
    font-size:32px;
    line-height:38px;
    vertical-align:top
}
.webzine.detail .webzine-content .headline .tools{
    margin-left:542px;
    opacity:0
}
.webzine.detail .webzine-content .headline .tools:not(.sticky){
    transform:translateY(0) !important
}
.webzine.detail .webzine-content .headline .tools.init{
    opacity:1
}
@media (max-width: 900px){
    .webzine.detail .webzine-content .headline .tools{
        opacity:1 !important
    }
}
@media (max-width: 1310px){
    .webzine.detail .webzine-content .headline{
        padding-right:60px
    }
    .webzine.detail .webzine-content .headline .tools{
        right:0;
        margin:0;
        bottom:50px
    }
    .webzine.detail .webzine-content .headline .tools .btn.pic.like{
        display:none
    }
    .webzine.detail .webzine-content .headline .tools .btn.pic.toggle{
        width:36px;
        height:36px;
        border-radius:50%;
        color:#fff;
        background:url("../images/icons/share.png") no-repeat 50% 37%;
        background-color:rgba(0,0,0,0.7);
        background-size:23px auto
    }
    .webzine.detail .webzine-content .headline .tools .btn.pic.toggle .total-count,.webzine.detail .webzine-content .headline .tools .btn.pic.toggle .icon{
        display:none
    }
}
@media (max-width: 900px){
    .webzine.detail .webzine-content .headline{
        border:0 none;
        padding:0 0 15px
    }
    .webzine.detail .webzine-content .headline h4 .label{
        margin-bottom:7px;
        padding:0 10px;
        font-size:14px;
        line-height:20px;
        border-radius:11px
    }
    .webzine.detail .webzine-content .headline h4 strong{
        display:block;
        font-size:21px;
        line-height:26px
    }
    .webzine.detail .webzine-content .headline .tools{
        bottom:auto;
        right:auto;
        top:-45px;
        left:0;
        margin-left:0 !important
    }
}
.webzine.detail .webzine-content .contents{
    max-width:1196px;
    margin:0 auto;
    padding-right:76px;
    min-height:650px
}
.webzine.detail .webzine-content .contents .compornent-wrap{
    margin-right:60px;
    min-height:500px
}
@media (min-width: 1310px){
    .webzine.detail .webzine-content .contents .compornent-wrap{
        min-height:800px
    }
}
.webzine.detail .webzine-content .contents .compornent-wrap [class*="com-"]{
    margin-top:6px;
    text-align:left;
    line-height:32px;
    color:#000
}
.webzine.detail .webzine-content .contents .compornent-wrap [class*="com-"].alignC{
    text-align:center
}
.webzine.detail .webzine-content .contents .compornent-wrap [class*="com-"].cBlue{
    color:#06a7e2 !important
}
.webzine.detail .webzine-content .contents .compornent-wrap [class*="com-"].cGray{
    color:#666 !important
}
.webzine.detail .webzine-content .contents .compornent-wrap [class*="com-"].cReverse{
    color:#fff !important
}
.webzine.detail .webzine-content .contents .compornent-wrap [class*="com-"].cReverse span{
    background:#06a7e2
}
.webzine.detail .webzine-content .contents .compornent-wrap [class*="com-"]:first-child{
    margin-top:0 !important
}
.webzine.detail .webzine-content .contents .compornent-wrap [class*="com-"]:last-child{
    margin-bottom:0 !important
}
.webzine.detail .webzine-content .contents .compornent-wrap .com-title{
    margin-top:40px;
    font-size:26px;
    font-weight:600
}
.webzine.detail .webzine-content .contents .compornent-wrap .com-title.narrow{
    margin-top:10px
}
.webzine.detail .webzine-content .contents .compornent-wrap .com-subtit{
    margin-top:40px;
    font-size:22px
}
.webzine.detail .webzine-content .contents .compornent-wrap .com-subtit.narrow{
    margin-top:10px
}
.webzine.detail .webzine-content .contents .compornent-wrap .com-cont{
    font-size:18px;
    color:#101820
}
.webzine.detail .webzine-content .contents .compornent-wrap .com-img{
    margin-top:40px
}
.webzine.detail .webzine-content .contents .compornent-wrap .com-img img{
    display:inline-block;
    max-width:100%;
    border:1px solid #ebebeb;
    vertical-align:top
}
.webzine.detail .webzine-content .contents .compornent-wrap .com-img.narrow{
    margin-top:10px
}
.webzine.detail .webzine-content .contents .compornent-wrap .com-hr{
    margin-top:63px;
    width:100%;
    height:1px;
    background-color:#d8d8d8
}
@media (max-width: 900px){
    .webzine.detail .webzine-content .contents .compornent-wrap{
        min-height:320px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap [class*="com-"]{
        line-height:1.75;
        margin-top:3px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap .com-title{
        margin-top:20px;
        font-size:18px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap .com-title.narrow{
        margin-top:5px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap .com-subtit{
        margin-top:14px;
        font-size:16px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap .com-subtit.narrow{
        margin-top:5px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap .com-cont{
        font-size:15px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap .com-img{
        margin-top:20px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap .com-img.narrow{
        margin-top:5px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap .com-hr{
        margin-top:23px
    }
}
@media (max-width: 1310px){
    .webzine.detail .webzine-content .contents{
        padding-right:0;
        min-height:500px
    }
    .webzine.detail .webzine-content .contents .compornent-wrap{
        margin-right:0
    }
}
@media (max-width: 900px){
    .webzine.detail .webzine-content .aside{
        padding:0;
        height:0
    }
    .webzine.detail .webzine-content .aside .select-webzine{
        top:-46px
    }
    .webzine.detail .webzine-content .aside .cover,.webzine.detail .webzine-content .aside .cover-link,.webzine.detail .webzine-content .aside .new-webzine{
        display:none
    }
    .webzine.detail .webzine-content .contents{
        padding-top:0
    }
    .webzine.detail .webzine-content .contents .compornent-wrap{
        padding-bottom:35px
    }
}
.webzine.detail .detail-page-nav>.inner{
    display:flex;
    flex-direction:row;
    max-width:1276px !important;
    width:100%;
    margin:0 auto !important
}
.webzine.detail .detail-page-nav a{
    height:auto;
    padding:35px 40px 35px
}
.webzine.detail .detail-page-nav a:after{
    display:none
}
.webzine.detail .detail-page-nav a .inner{
    min-width:256px;
    height:auto;
    margin:0 !important;
    border-bottom:0 none !important
}
.webzine.detail .detail-page-nav a .title{
    position:relative;
    display:inline-block;
    border-bottom:1px solid transparent
}
.webzine.detail .detail-page-nav a .title em{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    box-sizing:border-box
}
.webzine.detail .detail-page-nav a .thumb{
    display:block;
    margin-top:10px
}
.webzine.detail .detail-page-nav a .thumb em{
    display:inline-block;
    position:relative;
    width:254px;
    border:1px solid #ebebeb;
    overflow:hidden
}
.webzine.detail .detail-page-nav a .thumb em:before{
    content:'';
    display:block;
    padding-bottom:56.25%
}
.webzine.detail .detail-page-nav a .thumb em img{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    min-height:100%;
    transform:translate(-50%, -50%)
}
.webzine.detail .detail-page-nav a.next .thumb{
    text-align:right
}
.webzine.detail .detail-page-nav a:hover .title{
    border-color:#1185ce
}
@media (max-width: 900px){
    .webzine.detail .detail-page-nav a{
        padding:15px 20px
    }
    .webzine.detail .detail-page-nav a .inner{
        min-width:150px
    }
    .webzine.detail .detail-page-nav a .title{
        height:45px
    }
    .webzine.detail .detail-page-nav a .thumb em{
        max-width:150px;
        width:100%
    }
}
@media (min-width: 901px){
    [data-loc="go"] #container.webzine{
        padding-top:118px
    }
}
@media (min-width: 1280px){
    .page-list .inner{
        max-width:none;
        margin-left:145px;
        margin-right:145px
    }
}
.page-list .article-type{
    display:none;
    position:absolute;
    bottom:-113px;
    left:50%;
    box-sizing:border-box;
    max-width:1150px;
    width:100%;
    padding:0 5px;
    text-align:right;
    transform:translateX(-50%)
}
@media (min-width: 1280px){
    .page-list .article-type{
        max-width:none;
        padding-right:150px
    }
}
@media (max-width: 900px){
    .page-list .article-type{
        position:static;
        margin-top:10px;
        text-align:center;
        left:auto;
        transform:none
    }
}
.page-list .article-type a{
    position:relative;
    display:inline-block;
    height:45px;
    color:#b2b2b2;
    font:0/0 a;
    margin:0 10px -1px;
    border-bottom:3px solid transparent;
    box-sizing:border-box
}
.page-list .article-type a:before{
    content:'';
    display:inline-block;
    position:absolute;
    top:0;
    left:50%;
    width:20px;
    height:20px;
    margin:5px 0 0 -10px;
    vertical-align:middle;
    background-image:url("../images/common/icon_search.png")
}
.page-list .article-type a:after{
    content:'';
    display:block;
    width:30px;
    height:30px;
    border:1px solid #e1e1e1;
    background-color:#fff;
    box-sizing:border-box
}
.page-list .article-type .active{
    color:#101820;
    border-color:#101820;
    background-color:transparent
}
.page-list .article-type .active:after{
    border:0
}
.page-list .article-type .all.active:before{
    background-position:0 -20px
}
.page-list .article-type .all.active:after{
    background:#0cc4ff;
    background:linear-gradient(135deg, #0cc4ff 0%, #e655a5 100%)
}
.page-list .article-type .vod:before{
    background-position:-20px 0
}
.page-list .article-type .vod.active{
    color:#02b9f3;
    border-color:#02b9f3
}
.page-list .article-type .vod.active:before{
    background-position:-20px -20px
}
.page-list .article-type .vod.active:after{
    background-color:#02b9f3
}
.page-list .article-type .card:before{
    background-position:-40px 0
}
.page-list .article-type .card.active{
    color:#f75eb3;
    border-color:#f75eb3
}
.page-list .article-type .card.active:before{
    background-position:-40px -20px
}
.page-list .article-type .card.active:after{
    background-color:#f75eb3
}
.page-list .article-type .article:before{
    background-position:-60px 0
}
.page-list .article-type .article.active{
    color:#6d82e6;
    border-color:#6d82e6
}
.page-list .article-type .article.active:before{
    background-position:-60px -20px
}
.page-list .article-type .article.active:after{
    background-color:#6d82e6
}
.page-list .subject{
    position:relative;
    padding:80px 0 50px;
    background-color:#fafafa
}
@media (max-width: 900px){
    .page-list .subject{
        padding:55px 0 0;
        border-bottom:1px solid #eaeaea
    }
}
.page-list .subject .breadcrumbs{
    position:absolute;
    top:30px;
    left:0;
    width:100%
}
@media (max-width: 900px){
    .page-list .subject .breadcrumbs{
        top:15px;
        margin-left:0
    }
}
.page-list .subject .breadcrumbs .inner{
    display:flex;
    align-items:center;
    max-width:1150px;
    min-height:0;
    padding:0 15px;
    text-align:left
}
@media (min-width: 1280px){
    .page-list .subject .breadcrumbs .inner{
        max-width:none;
        margin-left:145px;
        margin-right:145px
    }
}
.page-list .subject .breadcrumbs .home{
    width:16px;
    height:14px;
    font:0/0 a;
    background-image:url("../images/common/home.png");
    background-repeat:no-repeat
}
.page-list .subject .breadcrumbs a{
    display:flex;
    align-items:center;
    color:#101820
}
.page-list .subject .breadcrumbs a+a:before{
    content:'';
    display:inline-block;
    width:6px;
    height:10px;
    margin:0 10px;
    background-image:url("../images/common/arrow_right.png");
    background-repeat:no-repeat
}
.page-list .subject .inner{
    min-height:80px;
    margin-right:auto;
    margin-left:auto;
    max-width:none
}
.page-list .control .inner{
    padding-top:20px;
    padding-bottom:20px;
    border-bottom:0
}
.page-list .control .sort{
    height:41px;
    pointer-events:auto
}
@media (max-width: 900px){
    .page-list .control .sort{
        float:none;
        margin-top:0;
        height:auto;
        min-height:41px;
        padding-right:40px
    }
}
.page-list .control .switch{
    display:none
}
.page-list .control .abr-btn{
    display:inline-block;
    float:right
}
.page-list .control .abr-btn a{
    display:inline-block;
    padding:0 20px;
    margin:0 2px;
    border-radius:17px;
    box-sizing:border-box;
    font-size:18px;
    font-weight:600;
    color:#fff;
    line-height:34px;
    text-align:center;
    background-color:#02b9f3
}
@media (max-width: 900px){
    .page-list .control .abr-btn{
        display:block;
        width:100%;
        text-align:center
    }
    .page-list .control .abr-btn a{
        padding:5px 15px;
        margin:5px 5px 0;
        line-height:20px;
        font-size:15px;
        font-weight:normal
    }
}
@media (max-width: 370px){
    .page-list .control .abr-btn a{
        margin-left:0;
        margin-right:0;
        font-size:14px
    }
}
.page-list .category-wrap{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:40px auto -50px;
    white-space:nowrap
}
.page-list .category-wrap::-webkit-scrollbar{
    display:none
}
.page-list .category-wrap ~ .article-type{
    bottom:-63px
}
@media (max-width: 900px){
    .page-list .category-wrap{
        margin-top:0;
        margin-bottom:0
    }
}
.page-list .category-wrap.webzine-search{
    display:block
}
.page-list .category-wrap.webzine-search .category-search{
    padding-right:70px
}
.page-list .category-wrap.webzine-search .category-search .search-wrap{
    display:block;
    position:static;
    transform:translateX(0)
}
@media (max-width: 900px){
    .page-list .category-wrap.webzine-search{
        padding:15px 20px 0;
        margin:20px -20px -2px;
        border-top:1px solid #eaeaea;
        background:#fff
    }
    .page-list .category-wrap.webzine-search .category-search{
        position:relative;
        bottom:0;
        padding-right:33px
    }
    .page-list .category-wrap.webzine-search .category-search .search-wrap{
        display:block;
        position:static;
        transform:translateX(0)
    }
    .page-list .category-wrap.webzine-search .category-search .btn-category-search{
        background:linear-gradient(125deg, #0fc2fd, #e256a6)
    }
    .page-list .category-wrap.webzine-search .category-search .btn-category-search:before{
        color:#fff
    }
}
.page-list .category-title-wrap{
    width:100%;
    padding:0 70px;
    background-color:#f5f6f6;
    border:solid #d9d9d9;
    border-width:1px 0
}
@media (max-width: 900px){
    .page-list .category-title-wrap{
        background-color:transparent;
        border:0;
        padding-bottom:23px
    }
}
.page-list .category-title--pc{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:-1px
}
.page-list .category-title--pc li{
    position:relative;
    font-size:17px;
    font-weight:300;
    border:1px solid #e5e5e5;
    margin-top:-1px
}
.page-list .category-title--pc li a{
    display:flex;
    align-items:center;
    padding:0 40px;
    height:54px
}
.page-list .category-title--pc li+li{
    margin-left:-1px
}
.page-list .category-title--pc li.active{
    background-color:#fff;
    color:#06a7e2
}
.page-list .category-title--pc li.active:after{
    content:'';
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:1px
}
.page-list .category-title--pc li.active a{
    position:relative;
    text-shadow:1px 0 0 #06a7e2
}
.page-list .category-title--pc li.active a:after{
    content:'';
    position:absolute;
    left:40px;
    bottom:8px;
    width:calc(100% - 80px);
    height:2px;
    background-color:#06a7e2
}
@media (max-width: 900px){
    .page-list .category-title--pc{
        display:none
    }
}
.page-list .category-title--mo{
    display:none;
    width:280px;
    margin:20px auto 0;
    border:1px solid #e6e6e6;
    border-radius:5px;
    background-color:#fff;
    font-size:14px;
    box-sizing:border-box
}
.page-list .category-title--mo select{
    width:100%;
    height:35px;
    padding:0 10px;
    border:0;
    box-sizing:border-box;
    background-color:#fff
}
@media (max-width: 900px){
    .page-list .category-title--mo{
        display:block
    }
}
.page-list .category-title--mo ~ .article-type{
    margin-top:0
}
@media (max-width: 900px){
    .page-list .category-search{
        position:absolute;
        left:0;
        right:0;
        bottom:-63px;
        display:flex
    }
}
.page-list .category-search.open .search-wrap{
    display:block
}
@media (max-width: 900px){
    .page-list .category-search.open .btn-category-search{
        background:linear-gradient(125deg, #0fc2fd, #e256a6)
    }
    .page-list .category-search.open .btn-category-search:before{
        color:#fff
    }
}
.page-list .category-search .search-wrap{
    position:absolute;
    left:50%;
    bottom:-53px;
    width:100%;
    height:54px;
    transform:translateX(-50%);
    z-index:5;
    border:1px solid #e5e5e5;
    display:none;
    align-items:center;
    box-sizing:border-box
}
@media (max-width: 900px){
    .page-list .category-search .search-wrap{
        position:static;
        width:100%;
        height:33px;
        border-right:0;
        box-sizing:border-box;
        transform:none
    }
}
.page-list .category-search input{
    width:100%;
    height:100%;
    box-shadow:none;
    border:0
}
@media (max-width: 900px){
    .page-list .category-search input{
        padding-left:10px;
        text-align:left;
        color:#000;
        font-size:10px
    }
}
.page-list .category-search .btn{
    min-width:70px;
    height:54px;
    line-height:54px;
    margin-left:-2px;
    border:1px solid #d9d9d9;
    border-width:0 1px;
    border-radius:0;
    font:0/0 a
}
@media (max-width: 900px){
    .page-list .category-search .btn{
        min-width:0;
        height:33px;
        line-height:33px
    }
}
.page-list .category-search .btn-close{
    position:absolute;
    right:-1px;
    height:100%
}
@media (max-width: 900px){
    .page-list .category-search .btn-close{
        right:32px;
        height:31px;
        line-height:31px;
        border:0;
        color:#b2b2b2
    }
}
.page-list .category-search .btn-close .icon{
    display:flex;
    justify-content:center
}
@media (max-width: 900px){
    .page-list .category-search .btn-close .icon{
        font-size:10px
    }
}
.page-list .category-search .btn-category-search{
    position:absolute;
    right:0;
    bottom:0;
    height:100%;
    border-width:1px;
    background-color:#f5f6f6
}
@media (max-width: 900px){
    .page-list .category-search .btn-category-search{
        display:flex;
        justify-content:center;
        width:33px;
        height:33px;
        margin-left:auto;
        background-color:#fff;
        border-width:1px;
        z-index:15;
        text-align:left
    }
}
.page-list .category-search .btn-category-search:before{
    content:'\e02f';
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-family:'atomy-icon-font';
    font-size:20px
}
@media (max-width: 900px){
    .page-list .category-search .btn-category-search:before{
        color:#b2b2b2;
        font-size:14px
    }
}
.page-list .article .tags{
    display:none;
    position:relative;
    font-size:15px;
    white-space:nowrap;
    z-index:3
}
.page-list .article .tags a{
    display:inline-block;
    height:30px;
    line-height:28px;
    padding:0 15px;
    vertical-align:middle;
    border:1px solid #e6e6e6;
    border-radius:15px;
    box-sizing:border-box
}
.page-list .article .tags a:before{
    content:'#'
}
.page-list .article .tags a+a ~ a{
    display:none
}
.page-list .article .tags a ~ .more{
    display:inline-block
}
.page-list .article .tags-all a+a ~ a{
    display:inline-block
}
.page-list .article .tags .more{
    position:relative;
    display:none;
    width:30px;
    height:30px;
    font:0/0 a;
    text-align:center;
    vertical-align:middle;
    border:1px solid #e6e6e6;
    border-radius:15px;
    box-sizing:border-box
}
.page-list .article .tags .more:after{
    content:'\00b7\00b7\00b7';
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    display:inline-block;
    margin:0 -2px -3px 0
}
.page-list .active-tag .tags .more{
    color:#ccedf9;
    border-color:#24b1e4;
    background-color:#24b1e4
}
.page-list .active-tag .tags .more:before{
    content:'';
    position:absolute;
    top:-18px;
    left:50%;
    display:block;
    width:12px;
    height:8px;
    margin-left:-4px;
    background-position:-80px 0;
    background-image:url("../images/common/icon_search.png")
}
.page-list .active-tag .tags-all{
    white-space:normal;
    position:absolute;
    top:12.5px;
    right:15px;
    bottom:59.5px;
    left:15px;
    padding:20px;
    background-color:#fff;
    border:1px solid #06a7e2;
    overflow:auto;
    z-index:2
}
.page-list .active-tag .tags-all a{
    margin:0 6px 10px 0
}
.page-list .products{
    max-width:1120px;
    margin:0 auto 100px;
    padding:0 15px
}
@media (min-width: 1280px){
    .page-list .products{
        width:auto;
        max-width:1532px
    }
}
.page-list .products h4{
    margin-bottom:17px;
    font-size:21px;
    font-weight:600
}
.page-list .products h4 strong{
    color:#24b1e4
}
@media (min-width: 1280px){
    .page-list .list-ahead .inner,.page-list .list-grid .inner{
        max-width:none;
        margin-left:145px;
        margin-right:145px
    }
}
.page-list .list-ahead .article .title .new,.page-list .list-ahead .article .title .hot,.page-list .list-grid .article .title .new,.page-list .list-grid .article .title .hot{
    display:inline-block;
    height:16px;
    line-height:16px;
    margin:-2px 0 0 5px;
    padding:0 6px;
    font-size:11px;
    font-style:normal;
    font-weight:bold;
    border-radius:2px;
    text-transform:uppercase;
    vertical-align:middle
}
@media (max-width: 900px){
    .page-list .list-ahead .article .title .new,.page-list .list-ahead .article .title .hot,.page-list .list-grid .article .title .new,.page-list .list-grid .article .title .hot{
        font-size:10px
    }
}
.page-list .list-ahead .article .title .new,.page-list .list-grid .article .title .new{
    color:#06a7e2;
    background-color:#eaf9ff
}
.page-list .list-ahead .article .title .hot,.page-list .list-grid .article .title .hot{
    color:#e655a5;
    background-color:#ffeff7
}
@media (min-width: 1280px){
    .page-list .list-ahead .article{
        float:left;
        width:calc(50% - 15px);
        box-sizing:border-box
    }
}
@media (min-width: 1280px){
    .page-list .list-ahead .article:nth-child(odd){
        margin-right:15px
    }
}
@media (min-width: 1280px) and (max-width: 1532px){
    .page-list .list-ahead .article:nth-child(odd){
        padding-left:15px
    }
}
@media (min-width: 1280px){
    .page-list .list-ahead .article:nth-child(odd):nth-last-child(2){
        border-bottom:0
    }
}
@media (min-width: 1280px){
    .page-list .list-ahead .article:nth-child(even){
        margin-left:15px
    }
}
@media (min-width: 1280px) and (max-width: 1532px){
    .page-list .list-ahead .article:nth-child(even){
        padding-right:15px
    }
}
.page-list .list-ahead .article .content{
    transition:background-color 0.3s
}
@media (min-width: 1280px){
    .page-list .list-ahead .article .content{
        padding:0 15px 0 40px
    }
}
@media (min-width: 1280px){
    .page-list .list-ahead .article .img{
        width:274px
    }
}
@media (min-width: 1280px){
    .page-list .list-ahead .inner:after{
        content:'';
        display:block;
        clear:both
    }
}
.page-list .list-ahead .tags{
    display:none
}
@media (min-width: 1280px){
    .page-list .list-grid .article{
        display:inline-block;
        width:25%
    }
}
@media (min-width: 1600px){
    .page-list .list-grid .article{
        display:inline-block;
        width:20%
    }
}
.page-list .list-grid .article .meta,.page-list .list-grid .article .title,.page-list .list-grid .article .region{
    transition:color 0.3s, transform 0.3s
}
.page-list .list-grid .article .meta{
    display:block
}
.page-list .list-grid .article .meta .icon:before{
    transition:color 0.3s, transform 0.3s
}
@media (min-width: 1280px){
    .page-list .list-grid .article .content{
        background-color:rgba(255,255,255,0);
        transition:margin-top 0.3s, padding 0.3s, background 0.8s
    }
}
@media (min-width: 1280px){
    .page-list .list-grid .article .description{
        display:block;
        max-height:0;
        font-size:16px;
        transition:max-height 0.3s, opacity 0.3s;
        opacity:0
    }
}
@media (max-width: 900px){
    .page-list-tag .article .tags{
        margin-bottom:10px
    }
}
@media (max-width: 900px){
    .page-list-tag .article .tags a{
        height:25px;
        line-height:23px;
        padding:0 8px;
        font-size:11px
    }
}
@media (max-width: 900px){
    .page-list-tag .article .tags a+a{
        display:none
    }
}
@media (max-width: 900px){
    .page-list-tag .article .tags .more{
        width:25px;
        height:25px;
        border-radius:50%;
        box-sizing:border-box
    }
}
@media (max-width: 900px){
    .page-list-tag .active-tag .tags .more:before{
        top:-12px
    }
}
@media (max-width: 900px){
    .page-list-tag .active-tag .tags-all{
        top:0;
        left:0;
        bottom:40px;
        padding:5px
    }
}
@media (max-width: 900px){
    .page-list-tag .products{
        width:auto;
        padding-bottom:15px;
        margin-bottom:10px
    }
}
@media (max-width: 900px){
    .page-list-tag .products h4{
        margin-bottom:15px;
        font-size:17.5px
    }
}
.page-list .region{
    display:none
}
[data-loc="go"] .page-list .article [target="_self"] .icon-shortcut{
    display:none
}
[data-loc="go"] .page-list .region{
    display:block;
    margin-bottom:5px;
    color:#06a7e2;
    font-size:14px;
    font-weight:normal
}
[data-loc="go"] .page-list .region em{
    margin-right:3px
}
@media (max-width: 900px){
    [data-loc="go"] .page-list .region em{
        font-size:11px
    }
}
@media (max-width: 900px){
    [data-loc="go"] .page-list .region .icon{
        vertical-align:bottom
    }
}
@media (max-width: 900px){
    .page-list{
        overflow:hidden
    }
}
.brochure-list-wrap{
    padding-bottom:100px
}
@media (max-width: 900px){
    .brochure-list-wrap{
        padding-bottom:50px
    }
    .brochure-list-wrap .wrap-slider-category{
        opacity:1 !important
    }
}
.brochure-list{
    padding:55px 0 50px;
    border-top:1px solid #e6e6e6
}
@media (max-width: 900px){
    .brochure-list{
        padding:30px 0 25px
    }
}
.brochure-list .inner{
    position:relative;
    max-width:none;
    margin:0 90px;
    padding:0
}
@media (min-width: 1600px){
    .brochure-list .inner{
        margin:0 160px
    }
}
@media (max-width: 1280px){
    .brochure-list .inner{
        margin:0 40px
    }
}
@media (max-width: 900px){
    .brochure-list .inner{
        margin:0 20px
    }
}
.brochure-list .inner h4{
    font-size:28px;
    font-weight:600;
    padding-right:50%
}
@media (max-width: 900px){
    .brochure-list .inner h4{
        font-size:19px;
        padding-right:0
    }
}
.brochure-list .inner .btn-wrap{
    display:inline-block;
    position:absolute;
    top:3px;
    right:0;
    width:50%;
    text-align:right
}
.brochure-list .inner .btn-wrap a{
    display:inline-block;
    padding:0 20px;
    margin:0 2px;
    border-radius:17px;
    box-sizing:border-box;
    font-size:18px;
    font-weight:600;
    color:#fff;
    line-height:34px;
    text-align:center;
    background-color:#02b9f3
}
.brochure-list .inner .btn-wrap a.btn-link{
    background-color:#e655a5
}
@media (max-width: 900px){
    .brochure-list .inner .btn-wrap{
        position:relative;
        display:block;
        width:100%;
        margin-top:13px;
        text-align:center
    }
    .brochure-list .inner .btn-wrap a{
        padding:5px 15px;
        margin:5px 5px 0;
        line-height:20px;
        font-size:15px;
        font-weight:normal
    }
}
.brochure-list .inner .wrap-slider-category{
    width:calc(100% + 20px);
    margin-left:-10px;
    margin-top:30px;
    opacity:0
}
@media (max-width: 900px){
    .brochure-list .inner .wrap-slider-category{
        width:calc(100% + 40px);
        margin:8px -20px 0
    }
    .brochure-list .inner .wrap-slider-category .slider-brochure{
        width:auto;
        padding:0 10px
    }
}
.brochure-list .inner .wrap-slider-category.slide-init{
    opacity:1
}
.brochure-list .inner .wrap-slider-category .slick-arrow{
    position:absolute;
    top:50%;
    width:50px;
    height:60px;
    margin-top:-47px;
    background-color:#fff;
    transform:translateY(-50%);
    box-shadow:0px 4px 8px 0px rgba(0,0,0,0.1);
    box-sizing:border-box
}
.brochure-list .inner .wrap-slider-category .slick-arrow:before{
    color:#60656a;
    font-size:20px
}
.brochure-list .inner .wrap-slider-category .slick-prev{
    left:-25px
}
.brochure-list .inner .wrap-slider-category .slick-next{
    right:-25px
}
.brochure-list .inner .wrap-slider-category .slick-slide{
    box-sizing:border-box
}
.brochure-list .inner .wrap-slider-category .slick-track{
    margin:0 auto
}
.brochure-list .inner .wrap-slider-category .slider-nav{
    display:none
}
.brochure-list .inner .brochure-item{
    padding:1px 28px 0
}
@media (max-width: 900px){
    .brochure-list .inner .brochure-item{
        width:155px !important;
        padding:1px 10px 0
    }
}
.brochure-list .inner .brochure-item .thumb .img{
    box-shadow:0px 1px 4px 0 rgba(0,0,0,0.1)
}
.brochure-list .inner .brochure-item .thumb .img .new{
    top:-2px
}
.brochure-list .inner .brochure-item .title{
    margin-top:20px
}
@media (max-width: 900px){
    .brochure-list .inner .brochure-item .title{
        margin-top:18px
    }
}
.login legend{
    display:block;
    width:100%;
    line-height:1.1;
    margin-bottom:30px;
    font-size:38px;
    font-weight:600;
    text-align:center
}
@media (max-width: 900px){
    .login legend{
        margin-bottom:10px;
        font-size:21px
    }
}
.login .txt{
    font-size:16px;
    letter-spacing:-1px;
    text-align:center;
    word-break:keep-all;
    word-wrap:break-word
}
@media (max-width: 900px){
    .login .txt{
        font-size:15px
    }
}
.login .link{
    padding-top:15px;
    text-align:center
}
.login .link a{
    font-size:14px
}
@media (max-width: 900px){
    .login .link a{
        font-size:13px
    }
}
.login .checkbox-group{
    margin-top:15px;
    text-align:center
}
.login .checkbox-group label{
    display:inline-block;
    margin-left:3px;
    margin-bottom:2px;
    font-size:14px;
    color:#101820;
    vertical-align:middle
}
.login .checkbox-group .login .checkbox i{
    text-align:left
}
.login .checkbox-group .login .checkbox:first-child+label{
    margin-right:45px
}
.login .message{
    display:block;
    margin-top:5px;
    color:#06a7e2
}
.login .login-inner{
    position:relative;
    max-width:400px;
    padding:135px 0 165px;
    margin:0 auto
}
@media (max-width: 900px){
    .login .login-inner{
        padding:50px 20px
    }
    .login .login-inner .btn{
        height:40px;
        line-height:40px;
        margin-top:25px;
        font-size:17.5px
    }
}
.login-inner .btn{
    height:54px;
    margin-top:28px;
    font-size:20px
}
@media (max-width: 900px){
    .login-inner .btn{
        height:inherit;
        margin-top:15px
    }
}
@media (max-width: 900px){
    .page-list.play-list{
        overflow:hidden
    }
}
.page-list.play-list .inner{
    overflow:hidden;
    max-width:1120px;
    margin:0 auto
}
.page-list.play-list .pagination .inner{
    border-top:none
}
.page-list.play-list .article .time{
    display:none
}
.play-list .rate{
    margin-bottom:15px;
    display:inline-block
}
.play-list .rate-item.stars{
    display:inline-flex;
    width:95px;
    height:17px;
    background:url("../images/common/star-gray.png") 0 0;
    margin-right:5px;
    font:0/0 a;
    box-sizing:border-box
}
@media (max-width: 900px){
    .play-list .rate-item.stars{
        width:70px;
        height:12px;
        background-image:url("../images/common/star-gray-mo.png");
        background-size:auto 100%;
        margin-right:5px;
        overflow:hidden
    }
}
.play-list .rate-item.stars em{
    display:block;
    width:94%;
    height:100%;
    overflow:hidden
}
@media (max-width: 900px){
    .play-list .rate-item.stars em{
        display:block;
        height:100%;
        overflow:hidden
    }
}
.play-list .rate-item.stars em i{
    display:block;
    width:105px;
    height:100%;
    background:url("../images/common/star-fill.png") 0 0;
    z-index:1
}
@media (max-width: 900px){
    .play-list .rate-item.stars em i{
        display:block;
        width:70px;
        height:100%;
        background-image:url("../images/common/star-fill-mo.png");
        background-size:auto 100%;
        z-index:1
    }
}
.play-list .rate-item.stars.xl{
    width:141px;
    height:23px;
    background:url("../images/common/star-gray-xl.png") 0 0;
    margin-right:0;
    margin-bottom:10px
}
@media (max-width: 900px){
    .play-list .rate-item.stars.xl{
        width:105px;
        height:17px;
        background:url("../images/common/star-gray.png") space 0 0;
        margin-bottom:10px
    }
}
.play-list .rate-item.stars.xl em i{
    width:141px;
    background:url("../images/common/star-fill-xl.png") 0 0
}
.play-list .rate-item.number em:last-child:before{
    content:'/';
    display:inline-block;
    margin:0 5px
}
.play-list .rate-item.number .score{
    color:#333;
    font-weight:bold
}
.play-list .subject{
    margin-bottom:60px;
    background:url("../images/common/bg-playlist.png") no-repeat center center/cover;
    color:#fff
}
@media (max-width: 900px){
    .play-list .subject{
        margin-bottom:0;
        padding-bottom:1px;
        border:0;
        background:url("../images/common/bg-playlist-mo.png") no-repeat 0 0/cover
    }
}
.play-list .subject small{
    opacity:0.3
}
.play-list .subject .tags{
    font-size:18px;
    margin:30px 0 40px
}
@media (max-width: 900px){
    .play-list .subject .tags{
        font-size:12px;
        margin-top:15px;
        margin-bottom:30px
    }
}
.play-list .subject .tags a{
    display:inline-block;
    height:30px;
    line-height:30px;
    padding:0 18px;
    margin-top:5px;
    margin-right:5px;
    border:1px solid #fff;
    border-radius:15px;
    vertical-align:middle
}
@media (max-width: 900px){
    .play-list .subject .tags a{
        height:20px;
        line-height:20px;
        padding:0 15px;
        margin:10px 3px 0;
        border-radius:10px
    }
}
.play-list .list .article{
    position:relative;
    overflow:hidden;
    flex:1
}
.play-list .list .article>a{
    display:flex
}
@media (max-width: 900px){
    .play-list .list .article .content{
        width:auto;
        font-size:12px
    }
}
@media (max-width: 900px){
    .play-list .list .article .content .rate{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        margin-bottom:5px
    }
}
.play-list .list .article .title{
    max-height:none
}
.play-list .list .article .title span,.play-list .list .article .title em{
    display:inline-block
}
.play-list .list .article .title span{
    white-space:nowrap;
    max-width:80%;
    text-overflow:ellipsis;
    overflow:hidden
}
@media (max-width: 900px){
    .play-list .list .article .title span{
        max-width:75%
    }
}
.play-list .list .category{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:0 10px;
    text-align:center;
    box-sizing:border-box
}
@media (max-width: 900px){
    .play-list .list .category{
        width:auto;
        padding:10px
    }
}
.play-list .list .category strong,.play-list .list .category span{
    position:relative;
    width:100%;
    display:block;
    overflow:hidden
}
@supports (-webkit-line-clamp: 2){
    .play-list .list .category strong,.play-list .list .category span{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        text-overflow:ellipsis;
        word-break:break-all;
        line-height:1.2;
        white-space:normal
    }
    .play-list .list .category strong:after,.play-list .list .category span:after{
        display:none
    }
}
.play-list .list .category strong{
    font-size:22px;
    margin-bottom:5px;
    max-height:65px
}
@media (max-width: 900px){
    .play-list .list .category strong{
        font-size:15px;
        margin-bottom:3px
    }
}
.play-list .list .category strong:after{
    height:30px
}
.play-list .list .category span{
    opacity:0.6;
    letter-spacing:-0.25px;
    max-height:50px
}
@supports (-webkit-line-clamp: 2){
    .play-list .list .category span{
        text-align:center
    }
}
.play-list .list .utils{
    position:absolute;
    top:0;
    right:0
}
@media (max-width: 900px){
    .play-list .list .utils{
        top:auto;
        left:0;
        right:auto;
        bottom:0
    }
}
.play-list .list .utils .btn-stroke{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    font:0/0 a;
    border:1px solid #e1e1e1;
    border-radius:3px;
    box-sizing:border-box
}
@media (max-width: 900px){
    .play-list .list .utils .btn-stroke{
        float:right;
        width:30px;
        height:30px;
        color:inherit;
        border:0
    }
}
.play-list .list .utils .btn-stroke .icon:before{
    vertical-align:middle;
    font-size:20px
}
.play-list .list .utils .btn-stroke.active .icon:before{
    content:"\e033";
    color:#06a7e2
}
@media (max-width: 900px){
    .play-list .list .utils .btn-stroke.share{
        margin-left:3px
    }
}
.play-list .list .content{
    position:static;
    display:flex;
    flex-direction:column;
    padding:25px 10px 25px 30px;
    background-color:#fff;
    overflow:hidden
}
.play-list .list .title span,.play-list .list .title em{
    display:inline;
    vertical-align:middle
}
.play-list .list .explain{
    overflow:hidden;
    line-height:1.4;
    height:48px
}
@supports (-webkit-line-clamp: 2){
    .play-list .list .explain{
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical
    }
}
.play-list .list .img{
    max-width:352px
}
.play-list .list .img:before{
    padding-bottom:57.25%;
}
.play-list .list .meta>span:after{
    background-color:#ccc;
    margin-left:10px;
    margin-right:12px
}
@media (max-width: 900px){
    .play-list .list .meta>span:after{
        margin-left:5px;
        margin-right:7px
    }
}
@media (max-width: 900px){
    .play-list .list-default{
        padding:30px 0
    }
}
@media (max-width: 900px){
    .play-list .list-default .inner{
        display:flex;
        flex-wrap:wrap;
        margin:0 -15px
    }
}
@media (max-width: 900px){
    .play-list .list-default .article{
        flex:none;
        width:calc(50% - 30px);
        margin:0 15px 10px
    }
}
.play-list .list-default .article+.article{
    margin-top:40px
}
@media (max-width: 900px){
    .play-list .list-default .article+.article{
        margin-top:0
    }
}
@media (max-width: 900px){
    .play-list .list-default .article>a{
        flex-direction:column;
        width:100%
    }
}
.play-list .list-default .category{
    width:18.5%;
    background-color:#f5f5f5;
    color:#101820
}
@media (max-width: 900px){
    .play-list .list-default .category{
        width:auto
    }
}
@media (max-width: 900px){
    .play-list .list-default .category strong{
        font-weight:500
    }
}
@media (max-width: 900px){
    .play-list .list-default .category span{
        font-size:11px
    }
}
.play-list .list-default .img-wrap{
    position:relative;
    width:100%;
    max-width:352px
}
.play-list .list-default .img-wrap .label{
    display:none
}
.play-list .list-default .img-wrap .img{
    height:100%
}
.play-list .list-default .content{
    width:52%
}
@media (max-width: 900px){
    .play-list .list-default .content{
        padding:15px 0
    }
}
.play-list .list-default .title{
    padding-right:100px
}
@media (max-width: 900px){
    .play-list .list-default .title{
        padding-right:10px
    }
}
@media (max-width: 900px){
    .play-list .list-default .title span{
        max-width:70%;
        margin-bottom:5px;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden
    }
}
.play-list .list-default .title em{
    color:#aaa;
    font-weight:300;
    margin-left:6px
}
@media (max-width: 900px){
    .play-list .list-default .title em{
        vertical-align:top
    }
}
.play-list .list-default .explain{
    margin-right:100px;
    margin-bottom:25px
}
@media (max-width: 900px){
    .play-list .list-default .explain{
        display:none
    }
}
.play-list .list-default .meta{
    float:left
}
@media (max-width: 900px){
    .play-list .list-default .meta>span{
        width:auto
    }
}
@media (max-width: 900px){
    .play-list .list-default .meta>span:after{
        display:none
    }
}
.play-list .list-default .meta>span:last-child:after{
    display:inline-block
}
@media (max-width: 900px){
    .play-list .list-default .meta>span:last-child:after{
        display:none
    }
}
@media (max-width: 900px){
    .play-list .list-default .meta .count:after{
        display:inline-block
    }
}
@media (max-width: 900px){
    .play-list .list-default .meta .date{
        display:block
    }
}
@media (max-width: 900px){
    .play-list .list-default .utils{
        display:none
    }
}
.play-list .list-best{
    padding-bottom:60px
}
@media (max-width: 900px){
    .play-list .list-best{
        padding-bottom:45px;
        background-color:#191531;
        background-image:url("../images/common/bg-playlist-mo.png");
        background-position:0 bottom;
        background-size:cover;
        overflow-x:auto
    }
}
.play-list .list-best .inner{
    display:flex
}
@media (max-width: 900px){
    .play-list .list-best .inner{
        width:150%;
        background-color:#191531
    }
}
.play-list .list-best .article{
    flex:0 1 50%
}
.play-list .list-best .article a{
    flex-wrap:wrap
}
.play-list .list-best .article+.article{
    margin-left:30px
}
@media (max-width: 900px){
    .play-list .list-best .article+.article{
        margin-left:20px
    }
}
.play-list .list-best .article>a:before{
    content:'';
    display:block;
    padding-top:57.25%;
    width:100%;
    flex:none
}
@media (max-width: 900px){
    .play-list .list-best .article>a:before{
        display:none
    }
}
.play-list .list-best .article>a:hover .title,.play-list .list-best .article>a:focus .title{
    color:#fff
}
@media (max-width: 900px){
    .play-list .list-best .article .content{
        padding:15px
    }
}
.play-list .list-best .article .title span{
    max-width:100%
}
.play-list .list-best .article .title em{
    display:none
}
.play-list .list-best .category{
    color:#fff;
    max-width:202px;
    min-height:202px;
    flex:1
}
@media (max-width: 900px){
    .play-list .list-best .category{
        max-width:none;
        min-height:60px
    }
}
@media (max-width: 900px){
    .play-list .list-best .category span{
        font-size:12px
    }
}
.play-list .list-best .category-new{
    background-color:#5f73d2
}
.play-list .list-best .category-new strong:after,.play-list .list-best .category-new span:after{
    background:linear-gradient(to left, #5f73d2, transparent)
}
.play-list .list-best .category-primary{
    background-color:#00b5ef
}
.play-list .list-best .category-primary strong:after,.play-list .list-best .category-primary span:after{
    background:linear-gradient(to left, #00b5ef, transparent)
}
.play-list .list-best .content{
    padding:30px 20px;
    flex:1
}
@media (max-width: 900px){
    .play-list .list-best .content .title{
        left:15px;
        margin-top:-50px;
        font-size:17px;
        font-weight:bold
    }
}
@media (max-width: 900px){
    .play-list .list-best .content .title em{
        display:none
    }
}
@media (max-width: 900px){
    .play-list .list-best .content .meta{
        display:none
    }
}
.play-list .list-best .title{
    position:absolute;
    left:30px;
    margin-top:-80px;
    font-size:28px;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:90%
}
.play-list .list-best .title span{
    max-width:none
}
.play-list .list-best .explain{
    margin-bottom:20px;
    -webkit-line-clamp:3;
    max-height:66px
}
@media (max-width: 900px){
    .play-list .list-best .explain{
        display:block;
        display:-webkit-box;
        text-overflow:ellipsis;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        min-height:33px
    }
}
.play-list .list-best .img{
    position:absolute;
    top:0;
    left:0;
    max-width:none;
    border:none
}
@media (max-width: 900px){
    .play-list .list-best .img{
        position:relative
    }
}
.play-list .list-best .img span:not(.want-login):after{
    content:'';
    position:absolute;
    left:-5px;
    bottom:-5%;
    width:calc(100% + 10px);
    height:30%;
    background:linear-gradient(to top, #000, transparent);
    filter:blur(10px)
}
@media (max-width: 900px){
    .play-list .list-best .img span:not(.want-login):after{
        left:-15px;
        width:calc(100% + 30px);
        height:40%
    }
}
.play-list .list-best .img .want-login{
    top:-1px;
    left:10px
}
@media (max-width: 900px){
    .play-list .list-best .img .want-login{
        left:6px
    }
}
.play-list .list-best .rate{
    display:block
}
.play-list .list-best .utils{
    top:10px;
    right:10px
}
@media (max-width: 900px){
    .play-list .list-best .utils{
        left:auto;
        bottom:15px;
        right:15px
    }
}
.play-list .list-best .utils .btn-stroke{
    border:none;
    color:#fff
}
.play-list .list-meta .article{
    display:flex;
    border-bottom:1px solid #e6e6e6
}
.play-list .list-meta .article .check-item{
    position:static;
    flex:none
}
.play-list .list-meta .article a{
    display:flex;
    flex:1
}
.play-list .list-meta .article a:hover .title{
    color:inherit
}
.play-list .list-meta .article .img-wrap{
    position:relative;
    flex:0 1 26.42%;
    align-self:center
}
@media (max-width: 900px){
    .play-list .list-meta .article .img-wrap{
        flex:0 1 40%
    }
}
.play-list .list-meta .article .img-wrap img{
    -o-object-fit:cover;
    object-fit:cover;
    width:auto;
    max-width:none;
    max-height:100%
}
.play-list .list-meta .article .img-wrap .meta{
    position:absolute;
    right:0;
    bottom:0;
    width:100%;
    height:40px;
    line-height:40px;
    text-align:center;
    color:#fff;
    background-color:rgba(0,0,0,0.6)
}
.play-list .list-meta .article .img-wrap .meta>span:after{
    display:none
}
.play-list .list-meta .article .img-wrap .meta .amount{
    display:flex;
    height:100%
}
.play-list .list-meta .article .img-wrap .meta .amount-item{
    position:relative;
    display:flex;
    flex:1 1 33.3334%;
    justify-content:center;
    align-items:center;
    height:100%
}
.play-list .list-meta .article .img-wrap .meta .amount-item strong{
    margin-top:4px;
    margin-left:-4px
}
.play-list .list-meta .article .img-wrap .meta .amount-item span{
    font:inherit;
    font-size:15px;
    vertical-align:top;
    letter-spacing:-0.5px
}
.play-list .list-meta .article .img-wrap .meta .amount-item .icon{
    margin-right:8px
}
.play-list .list-meta .article .img-wrap .meta .amount-item .icon:before{
    color:#fff;
    font-size:12px
}
.play-list .list-meta .article .img-wrap .meta .amount-item:after{
    content:'';
    position:absolute;
    right:0;
    width:1px;
    height:10px;
    background-color:rgba(255,255,255,0.3)
}
.play-list .list-meta .article .img-wrap .meta .amount-item:last-child:after{
    display:none
}
.play-list .list-meta .article .content{
    flex:1
}
.play-list .list-meta .article .content .explain{
    margin-bottom:15px;
    display:block;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    text-overflow:ellipsis;
    overflow:hidden
}
@media (max-width: 900px){
    .play-list .list-meta .article .content .explain{
        max-height:33px
    }
}
.play-list .list-meta .article .content .rate{
    display:block;
    margin-bottom:10px
}
.play-list .list-meta .article .content .meta span:last-child:after{
    display:none
}
.play-list .list-meta .article .img{
    max-width:none
}
.play-list .list-meta .article .btn{
    position:absolute;
    bottom:30px;
    right:30px
}
.play-list .list-meta .article+.article{
    margin-top:0
}
@media (max-width: 1310px){
    .detail .play-list .headline{
        overflow:hidden
    }
}
@media (max-width: 900px){
    .detail .play-list .headline:after{
        content:'';
        display:block;
        clear:both
    }
}
@media (max-width: 900px){
    .detail .play-list .headline .title{
        margin-bottom:15px
    }
}
@media (max-width: 900px){
    .detail .play-list .headline .rate,.detail .play-list .headline .meta{
        margin-top:0
    }
}
.detail .play-list .headline .rate{
    display:inline-flex;
    align-items:center;
    margin:15px 0 0 5px
}
@media (max-width: 900px){
    .detail .play-list .headline .rate{
        display:flex;
        align-items:center;
        margin-left:0
    }
}
.detail .play-list .headline .meta{
    float:left;
    margin-top:16px
}
@media (max-width: 900px){
    .detail .play-list .headline .meta>span:last-child:after{
        display:none
    }
}
.detail .play-list .headline .meta .date:after{
    display:inline-block
}
.detail .play-list .headline .meta .icon-viewer:before{
    color:#a6a6a6
}
.detail .play-list .contents .player{
    flex:1 1 83.93%;
    padding-top:0
}
@media (max-width: 900px){
    .detail .play-list .contents .player{
        flex:1 1 100%
    }
}
.detail .play-list .contents .player-wrap{
    position:relative;
    padding-top:49.375%
}
@media (max-width: 900px){
    .detail .play-list .contents .player-wrap{
        padding-top:75.28%
    }
}
.detail .play-list .contents .player-wrap .inner{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    min-height:1px;
    display:flex
}
@media (max-width: 900px){
    .detail .play-list .contents .player-wrap .inner{
        flex-direction:column;
        padding:0
    }
}
.detail .play-list .contents .player-series{
    width:16.07%;
    background-color:#151515
}
@media (max-width: 900px){
    .detail .play-list .contents .player-series{
        width:100%;
        height:15.7%;
        overflow:visible
    }
}
.detail .play-list .contents .player-series .series-title{
    display:none
}
.detail .play-list .contents .player-series .series-list{
    height:100%;
    overflow:hidden;
    box-sizing:border-box
}
@media (max-width: 900px){
    .detail .play-list .contents .player-series .series-list{
        padding:0;
        margin-top:0
    }
}
.detail .play-list .contents .player-series .series-list--wrap{
    position:relative;
    height:100%;
    padding:45px 0;
    box-sizing:border-box
}
.detail .play-list .contents .player-series .series-list--wrap .arrow-prev,.detail .play-list .contents .player-series .series-list--wrap .arrow-next{
    width:100%;
    height:45px;
    color:#fff;
    transition:opacity .3s
}
@media (max-width: 900px){
    .detail .play-list .contents .player-series .series-list--wrap .arrow-prev,.detail .play-list .contents .player-series .series-list--wrap .arrow-next{
        width:23px;
        height:100%
    }
}
.detail .play-list .contents .player-series .series-list--wrap .arrow-prev .icon,.detail .play-list .contents .player-series .series-list--wrap .arrow-next .icon{
    display:flex;
    justify-content:center;
    align-items:center
}
.detail .play-list .contents .player-series .series-list--wrap .arrow-prev .icon:before,.detail .play-list .contents .player-series .series-list--wrap .arrow-prev .icon:after,.detail .play-list .contents .player-series .series-list--wrap .arrow-next .icon:before,.detail .play-list .contents .player-series .series-list--wrap .arrow-next .icon:after{
    content:'';
    display:block;
    width:14px;
    height:1px;
    background-color:#fff;
    margin:0 -2px
}
.detail .play-list .contents .player-series .series-list--wrap .arrow-prev .icon:before,.detail .play-list .contents .player-series .series-list--wrap .arrow-next .icon:before{
    transform:rotate(-45deg)
}
.detail .play-list .contents .player-series .series-list--wrap .arrow-prev .icon:after,.detail .play-list .contents .player-series .series-list--wrap .arrow-next .icon:after{
    transform:rotate(45deg)
}
.detail .play-list .contents .player-series .series-list--wrap .arrow-prev{
    top:0
}
@media (max-width: 900px){
    .detail .play-list .contents .player-series .series-list--wrap .arrow-prev{
        left:0
    }
}
@media (max-width: 900px){
    .detail .play-list .contents .player-series .series-list--wrap .arrow-prev .icon{
        transform:rotate(-90deg)
    }
}
.detail .play-list .contents .player-series .series-list--wrap .arrow-next{
    bottom:0
}
@media (max-width: 900px){
    .detail .play-list .contents .player-series .series-list--wrap .arrow-next{
        right:0
    }
}
.detail .play-list .contents .player-series .series-list--wrap .arrow-next .icon{
    transform:rotate(180deg)
}
@media (max-width: 900px){
    .detail .play-list .contents .player-series .series-list--wrap .arrow-next .icon{
        transform:rotate(90deg)
    }
}
.detail .play-list .contents .player-series .series-list.hover{
    position:relative;
    z-index:2;
    overflow:visible
}
.detail .play-list .contents .player-series .series-item{
    position:relative;
    padding:3px 0;
    opacity:0;
    pointer-events:none
}
.detail .play-list .contents .player-series .series-item:hover .thumb{
    opacity:1
}
.detail .play-list .contents .player-series .series-item:hover .thumb:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:3px solid #ccc;
    box-sizing:border-box
}
.detail .play-list .contents .player-series .series-item:hover [data-title]{
    display:block
}
@media (max-width: 900px){
    .detail .play-list .contents .player-series .series-item:hover [data-title]{
        display:none
    }
}
.detail .play-list .contents .player-series .series-item .thumb{
    position:relative;
    width:100%;
    margin:0;
    opacity:0.4;
    transition:opacity .3s;
    border:1px solid transparent;
    box-sizing:border-box
}
.detail .play-list .contents .player-series .series-item .thumb:before{
    content:'';
    display:block;
    padding-top:56.15%
}
.detail .play-list .contents .player-series .series-item .thumb span:not(.want-login){
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden
}
.detail .play-list .contents .player-series .series-item .thumb span:not(.want-login) img{
    width:100%;
    min-height:100%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}
.detail .play-list .contents .player-series .series-item [data-title]{
    display:none;
    font-size:0
}
.detail .play-list .contents .player-series .series-item [data-title]:before,.detail .play-list .contents .player-series .series-item [data-title]:after{
    display:block;
    position:absolute;
    left:-10px;
    right:-10px;
    margin:0 auto;
    background-color:#fff;
    border:1px solid #e5e5e5;
    z-index:5
}
.detail .play-list .contents .player-series .series-item [data-title]:before{
    content:attr(data-title);
    bottom:-33px;
    border-radius:2px;
    font-size:12px;
    line-height:27px;
    text-overflow:ellipsis;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    padding:0 10px
}
.detail .play-list .contents .player-series .series-item [data-title]:after{
    content:'';
    width:10px;
    height:10px;
    bottom:-10px;
    transform:rotate(45deg);
    border-width:1px 0 0 1px
}
.detail .play-list .contents .player-series .series-item.current .thumb{
    opacity:1
}
.detail .play-list .contents .player-series .series-item.current .thumb:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:3px solid #4eceff;
    box-sizing:border-box
}
.detail .play-list .contents .player-series .series-item.lock{
    pointer-events:none !important
}
.detail .play-list .contents .player-series .slick-slider .slick-track,.detail .play-list .contents .player-series .slick-slider .slick-list{
    transform:none
}
.detail .play-list .contents .player-series .slick-slider .want-login{
    display:block;
    width:25px;
    height:28px;
    position:absolute;
    top:0;
    left:10px;
    z-index:2
}
.detail .play-list .contents .player-series .slick-slider .want-login:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url("../images/icons/secret.png");
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:100%
}
.detail .play-list .contents .player-series .slick-slider .want-login span{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    font-size:20px;
    font-weight:bold;
    color:#fff;
    word-break:keep-all;
    text-align:center;
    transform:translateY(-50%);
    display:none
}
@media (max-width: 900px){
    .detail .play-list .contents .player-series .slick-slider .want-login{
        width:15px;
        height:17px;
        left:6px
    }
}
.detail .play-list .contents .player-series .slick-list{
    overflow:visible;
    padding:0 15px
}
.detail .play-list .contents .player-series .slick-disabled{
    opacity:.3
}
.detail .play-list .contents .player-series .slick-hidden{
    display:block;
    opacity:.3
}
.detail .play-list .contents .player-series .slick-active{
    opacity:1;
    pointer-events:all
}
.detail .play-list .contents .rate-item.number{
    margin-left:0;
    font-size:30px;
    font-weight:bold;
    text-align:center
}
.detail .play-list .contents .rate-title{
    display:block;
    margin-bottom:10px;
    font-size:18px;
    font-weight:normal
}
@media (max-width: 900px){
    .detail .play-list .contents .rate-title{
        font-size:13px
    }
}
.detail .play-list .contents .rate-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%
}
@media (max-width: 900px){
    .detail .play-list .contents .rate-content{
        flex-wrap:wrap;
        width:100%
    }
}
@media (max-width: 900px){
    .detail .play-list .contents .rate-content .number{
        font-size:17px
    }
}
.detail .play-list .contents .rate-total{
    max-width:28.57%
}
.detail .play-list .contents .rate-total .number{
    display:block
}
.detail .play-list .contents .rate-total .number em:last-child:before{
    color:#ccc;
    font-weight:normal
}
@media (max-width: 900px){
    .detail .play-list .contents .rate-total .rate-content{
        margin-top:-10px
    }
}
.detail .play-list .contents .rate-detail{
    max-width:42.41%
}
@media (max-width: 900px){
    .detail .play-list .contents .rate-detail{
        order:2;
        max-width:100%;
        margin:17px 20px 0;
        padding-top:17px;
        border-top:1px solid rgba(204,204,204,0.4);
        box-sizing:border-box
    }
}
@media (max-width: 900px){
    .detail .play-list .contents .rate-detail:after{
        display:none
    }
}
.detail .play-list .contents .rate-detail .number{
    display:none
}
.detail .play-list .contents .rate-detail ul{
    margin:0 30px
}
@media (max-width: 900px){
    .detail .play-list .contents .rate-detail ul{
        width:100%;
        margin:0
    }
}
.detail .play-list .contents .rate-detail ul li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px
}
.detail .play-list .contents .rate-detail ul li .rate{
    margin-left:15px;
    margin-bottom:0
}
.detail .play-list .contents .rate-count .btn{
    margin:8px 0 15px;
    height:35px;
    line-height:32px;
    min-height:auto
}
.layer .play-list .list .article{
    width:100%;
    margin:0 0 10px;
    border-bottom:0
}
.layer .play-list .list .article .img-wrap{
    flex-basis:46.88%;
    max-width:none
}
.layer .play-list .list .article .img-wrap .label{
    font:0/0 a
}
.layer .play-list .list .article .content{
    padding:10px 20px
}
.layer .play-list .list .article .content .explain{
    margin-bottom:10px
}
.layer .play-list .list .article .title{
    padding-right:0;
    margin-bottom:10px;
    text-overflow:ellipsis;
    overflow:hidden
}
.play-list-str{
    margin-top:20px;
    padding-top:10px;
    border-top:1px solid #f7f7f7
}
.play-list-str li{
    margin:10px 0
}
.play-list-str .time{
    color:#999;
    font-style:normal;
    margin-left:10px
}
.icon-write{
    vertical-align:middle;
    margin-right:7px
}
.icon-write:before{
    width:38px;
    height:30px;
    background:url("../images/common/write.png") no-repeat 0 0
}
.icon-playlist{
    width:30px;
    height:30px;
    background:url("../images/common/label_playlist.png") no-repeat 0 0
}
.icon-playlist:before{
    display:none
}
@media (max-width: 900px){
    .play-list .rate-item.stars{
        overflow:hidden;
        width:70px;
        height:12px;
        background-image:url("../images/common/star-gray-mo.png");
        background-size:auto 100%;
        margin-right:5px
    }
    .play-list .rate-item.stars em{
        display:block;
        height:100%;
        overflow:hidden
    }
    .play-list .rate-item.stars em i{
        display:block;
        width:70px;
        height:100%;
        background-image:url("../images/common/star-fill-mo.png");
        background-size:auto 100%;
        z-index:1
    }
    .play-list .rate-item.stars.xl{
        width:105px;
        height:17px;
        background:url("../images/common/star-gray.png") space 0 0;
        margin-bottom:10px
    }
    .play-list .rate-item.stars.xl em i{
        width:105px;
        background:url("../images/common/star-fill.png") space 0 0
    }
    .play-list.page-list{
        overflow:hidden
    }
    .play-list .subject{
        border:0;
        margin-bottom:0;
        padding-bottom:1px;
        background:url("../images/common/bg-playlist-mo.png") no-repeat 0 0/cover
    }
    .play-list .subject .tags{
        font-size:12px;
        margin-top:15px;
        margin-bottom:30px
    }
    .play-list .subject .tags a{
        height:20px;
        line-height:20px;
        border-radius:10px;
        margin:10px 3px 0;
        padding:0 15px
    }
    .play-list .list .article .content{
        width:auto;
        font-size:12px
    }
    .play-list .list .article .content .rate{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        margin-bottom:5px
    }
    .play-list .list .category{
        width:auto;
        padding:10px
    }
    .play-list .list .category strong,.play-list .list .category span{
        -webkit-line-clamp:1
    }
    .play-list .list .category strong{
        font-size:15px;
        margin-bottom:3px
    }
    .play-list .list .img .time{
        right:0;
        bottom:0;
        font-size:11px;
        line-height:19px
    }
    .play-list .list .utils{
        top:auto;
        left:0;
        right:auto;
        bottom:0
    }
    .play-list .list .utils .btn-stroke{
        width:30px;
        height:30px;
        border:0;
        color:inherit;
        float:right
    }
    .play-list .list .utils .btn-stroke.share{
        margin-left:3px
    }
    .play-list .list .meta>span:after{
        margin-left:5px;
        margin-right:7px
    }
    .play-list .list-best{
        padding-bottom:45px;
        background-color:#191531;
        background-image:url("../images/common/bg-playlist-mo.png");
        background-position:0 bottom;
        background-size:cover;
        overflow-x:auto
    }
    .play-list .list-best .inner{
        width:150%;
        background-color:#191531
    }
    .play-list .list-best .article+.article{
        margin-left:20px
    }
    .play-list .list-best .article>a:before{
        display:none
    }
    .play-list .list-best .article .content{
        padding:15px
    }
    .play-list .list-best .category{
        max-width:none;
        min-height:60px
    }
    .play-list .list-best .category span{
        font-size:12px
    }
    .play-list .list-best .img{
        position:relative
    }
    .play-list .list-best .img span:not(.want-login):after{
        left:-15px;
        width:calc(100% + 30px);
        height:40%
    }
    .play-list .list-best .content .title{
        font-size:17px;
        font-weight:bold;
        left:15px;
        margin-top:-50px
    }
    .play-list .list-best .content .title em{
        display:none
    }
    .play-list .list-best .content .explain{
        display:block;
        display:-webkit-box;
        text-overflow:ellipsis;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        min-height:33px
    }
    .play-list .list-best .content .rate{
        margin-bottom:5px
    }
    .play-list .list-best .content .meta{
        display:none
    }
    .play-list .list-best .utils{
        bottom:15px;
        left:auto;
        right:15px
    }
    .play-list .list-default{
        padding:30px 0
    }
    .play-list .list-default .inner{
        display:flex;
        flex-wrap:wrap;
        margin:0 -15px
    }
    .play-list .list-default .article{
        margin:0 15px 10px;
        flex:none;
        width:calc(50% - 30px)
    }
    .play-list .list-default .article+.article{
        margin-top:0
    }
    .play-list .list-default .article>a{
        flex-direction:column;
        width:100%
    }
    .play-list .list-default .category strong{
        font-weight:500
    }
    .play-list .list-default .category span{
        font-size:11px
    }
    .play-list .list-default .content{
        padding:15px 0
    }
    .play-list .list-default .content .title{
        padding-right:10px
    }
    .play-list .list-default .content .title span{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        max-width:70%;
        margin-bottom:5px
    }
    .play-list .list-default .content .title em{
        vertical-align:top
    }
    .play-list .list-default .content .explain{
        display:none
    }
    .play-list .list-default .content .meta>span{
        width:auto
    }
    .play-list .list-default .content .meta>span:after{
        display:none
    }
    .play-list .list-default .content .meta .count:after{
        display:inline-block
    }
    .play-list .list-default .content .meta .date{
        display:block
    }
    .play-list .list-default .utils{
        display:none
    }
    .detail .play-list .headline:after{
        content:'';
        display:block;
        clear:both
    }
    .detail .play-list .headline .title{
        margin-bottom:15px
    }
    .detail .play-list .headline .rate,.detail .play-list .headline .meta{
        margin-top:0
    }
    .detail .play-list .headline .rate{
        display:flex;
        align-items:center;
        margin-left:0
    }
    .detail .play-list .headline .meta>span:last-child:after{
        display:none
    }
    .detail .play-list .contents .player{
        flex:1 1 100%
    }
    .detail .play-list .contents .player-wrap{
        padding-top:75.28%
    }
    .detail .play-list .contents .player-wrap .inner{
        flex-direction:column;
        padding:0
    }
    .detail .play-list .contents .player-series{
        width:100%;
        height:15.7%;
        overflow:visible
    }
    .detail .play-list .contents .player-series .series-list{
        padding:0;
        margin-top:0
    }
    .detail .play-list .contents .player-series .series-list--wrap{
        overflow:hidden;
        padding:0 23px
    }
    .detail .play-list .contents .player-series .series-list--wrap .slick-arrow{
        width:23px;
        height:100%
    }
    .detail .play-list .contents .player-series .series-list--wrap .slick-arrow.arrow-prev{
        left:0
    }
    .detail .play-list .contents .player-series .series-list--wrap .slick-arrow.arrow-prev .icon{
        transform:rotate(-90deg)
    }
    .detail .play-list .contents .player-series .series-list--wrap .slick-arrow.arrow-next{
        right:0
    }
    .detail .play-list .contents .player-series .series-list--wrap .slick-arrow.arrow-next .icon{
        transform:rotate(90deg)
    }
    .detail .play-list .contents .player-series .series-item{
        margin:5px 2px
    }
    .detail .play-list .contents .addition .rate-wrap{
        flex-wrap:wrap
    }
    .detail .play-list .contents .addition .rate-total,.detail .play-list .contents .addition .rate-count{
        flex:1;
        min-width:50%
    }
    .detail .play-list .contents .addition .rate-total .rate-content{
        margin-top:-10px
    }
    .detail .play-list .contents .addition .rate-count .btn{
        padding:0 30px
    }
    .detail .play-list .contents .addition .rate-detail{
        order:2;
        max-width:100%;
        margin:17px 20px 0;
        padding-top:17px;
        border-top:1px solid rgba(204,204,204,0.4);
        box-sizing:border-box
    }
    .detail .play-list .contents .addition .rate-detail ul{
        width:100%;
        margin:0
    }
    .detail .play-list .contents .addition .rate-detail:after{
        display:none
    }
    .detail .play-list .contents .addition .rate-title{
        font-size:13px
    }
    .detail .play-list .contents .addition .rate-content{
        flex-wrap:wrap;
        width:100%
    }
    .detail .play-list .contents .addition .rate-content .number{
        font-size:17px
    }
    .play-list.mypage-play .subject{
        padding-bottom:25px
    }
    .play-list.mypage-play .mypage-control .btns{
        display:flex;
        justify-content:space-between;
        width:100%;
        box-sizing:border-box
    }
    .play-list.mypage-play .mypage-control .btns:after{
        display:none
    }
    .play-list.mypage-play .mypage-control .btns .col{
        flex:none
    }
    .play-list.mypage-play .mypage-control .btns .col-right{
        display:flex;
        justify-content:flex-end;
        align-self:center;
        width:auto;
        margin-bottom:0
    }
    .play-list.mypage-play .mypage-control .btns .col-right .btn{
        white-space:nowrap;
        width:auto;
        padding:0 10px
    }
    .play-list.mypage-play .list{
        padding:0 0 50px
    }
    .play-list.mypage-play .list .inner{
        flex-direction:column;
        margin:0
    }
    .play-list.mypage-play .list .article{
        width:100%;
        margin:0
    }
    .play-list.mypage-play .list .article>a{
        flex-direction:row;
        padding:16px 0;
        overflow:hidden
    }
    .play-list.mypage-play .list .article .check-item{
        width:auto;
        padding-left:1px;
        padding-right:4px
    }
    .play-list.mypage-play .list .article .img-wrap{
        flex:none;
        width:40%;
        height:90%
    }
    .play-list.mypage-play .list .article .img-wrap .label{
        display:none
    }
    .play-list.mypage-play .list .article .img-wrap .meta{
        display:none
    }
    .play-list.mypage-play .list .article .content{
        flex:none;
        width:60%;
        padding:0 10px;
        align-self:center
    }
    .play-list.mypage-play .list .article .content .explain{
        display:none
    }
    .play-list.mypage-play .list .article .content .meta{
        padding-right:54px
    }
    .play-list.mypage-play .list .article .content .meta .shares{
        margin-bottom:3px
    }
    .play-list.mypage-play .list .article .btn{
        bottom:16px;
        right:0
    }
    .play-list-str{
        margin:20px 20px 0
    }
    .icon-write{
        vertical-align:baseline
    }
    .icon-write:before{
        width:19px;
        height:15px;
        background-size:cover
    }
}
.section-rating{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 0;
    font-size:18px;
    border-top:1px solid #dadada;
    background-color:#fafafa
}
.section-rating p{
    margin:0 20px
}
@media (max-width: 900px){
    .section-rating p{
        margin:0 15px
    }
}
.section-rating span{
    vertical-align:middle
}
.section-rating button{
    color:#fff;
    font-size:18px;
    font-weight:bold;
    white-space:nowrap;
    height:40px;
    padding:0 30px;
    border-radius:20px;
    background-color:#06a7e2
}
@media (max-width: 900px){
    .section-rating button{
        font-size:12.5px;
        height:30px
    }
}
.section-rating .stars{
    display:inline-block;
    height:23px;
    margin-left:30px;
    margin-right:20px;
    background-image:url("../images/common/star-gray-xl.png");
    background-repeat:space;
    background-size:auto 100%
}
@media (max-width: 900px){
    .section-rating .stars{
        margin:12px auto 10px
    }
}
.section-rating .stars,.section-rating .stars i{
    width:141px
}
.section-rating .stars i{
    display:block;
    height:100%;
    background-image:url("../images/common/star-fill-xl.png");
    background-repeat:space;
    background-size:auto 100%
}
.section-rating .stars em{
    overflow:hidden;
    display:block;
    height:100%
}
.section-rating .rating{
    color:#ccc;
    font-size:28px
}
.section-rating .rating strong{
    color:#101820
}
@media (max-width: 900px){
    .section-rating.first{
        font-size:15px;
        flex-direction:column;
        text-align:center
    }
}
@media (max-width: 900px){
    .section-rating.first p button{
        margin-top:15px
    }
}
.section-rating.first strong{
    font-size:24px
}
@media (max-width: 900px){
    .section-rating.first strong{
        font-size:18px
    }
}
.section-rating.in-progress{
    justify-content:space-between
}
@media (max-width: 900px){
    .section-rating.in-progress{
        align-items:center;
        justify-content:center
    }
}
.section-rating.in-progress p{
    text-align:center;
    flex:1
}
@media (max-width: 900px){
    .section-rating.in-progress p{
        display:flex;
        flex-direction:column
    }
}
@media (max-width: 900px){
    .section-rating.in-progress span{
        font-size:12.5px
    }
}
.section-rating.in-progress button{
    margin-left:20px
}
@media (max-width: 900px){
    .section-rating.in-progress button{
        margin-top:12px;
        margin-left:0
    }
}
@media (max-width: 900px){
    .section-rating.in-progress .rating{
        font-size:17px
    }
}
.search-play{
    padding:0 15px;
    margin:90px 0 60px;
    overflow:hidden
}
@media (max-width: 900px){
    .search-play{
        margin:30px 0
    }
}
.search-play .inner,.search-play .nav{
    max-width:1120px;
    margin:0 auto
}
@media (min-width: 1280px){
    .page-list .search-play .inner,.page-list .search-play .nav{
        max-width:1532px;
        margin:0 auto
    }
}
@media (max-width: 900px){
    .search-play .list{
        padding-top:0
    }
}
.search-play .list .inner{
    overflow:hidden
}
@media (max-width: 900px){
    .search-play .list .inner{
        display:block;
        margin:0;
        overflow:visible
    }
}
.search-play .list .inner .article{
    flex:none;
    width:100%;
    border:0;
    box-sizing:border-box
}
@media (max-width: 900px){
    .search-play .list .inner .article{
        padding:0 8px;
        margin:0
    }
}
.search-play .list .inner .article>a{
    border:1px solid #e1e1e1;
    flex:none;
    width:100%;
    box-sizing:border-box
}
@media (max-width: 900px){
    .search-play .list .inner .article>a{
        flex-direction:row
    }
}
.search-play .list .inner .article .img{
    border-width:0
}
@media (max-width: 900px){
    .search-play .list .inner .article .content{
        padding-right:20px
    }
}
@media (max-width: 900px){
    .search-play .list .inner .article .content .explain{
        height:33px
    }
}
@media (max-width: 900px){
    .search-play .list .inner .article .title{
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden
    }
}
@media (max-width: 900px){
    .search-play .list .inner .article .title span{
        max-width:75%
    }
}
@media (max-width: 900px){
    .search-play .list .inner .slick-list{
        margin:0 0 0 -8px;
        overflow:visible
    }
}
.search-play .list .label{
    display:none
}
.search-play .list .img-wrap{
    height:100%
}
.search-play .list .img-wrap .img{
    height:100%
}
.search-play .list .content{
    align-self:center;
    padding:10px 150px 10px 25px
}
.search-play .list .content .meta{
    display:none
}
.search-play .list .utils{
    top:auto;
    bottom:20px;
    right:20px
}
@media (max-width: 900px){
    .search-play .list-meta .img-wrap .meta .amount{
        width:100%
    }
}
.search-play .nav{
    position:absolute;
    top:-49px;
    left:0;
    right:0;
    width:100%;
    height:42px;
    pointer-events:none
}
.search-play .nav .slick-arrow{
    width:40px;
    height:42px;
    border:1px solid #e1e1e1;
    box-sizing:border-box;
    pointer-events:all
}
.search-play .nav .slick-arrow:before{
    font-size:12px
}
.search-play .nav .slick-prev{
    right:39px;
    border-radius:2px 0 0 2px
}
.search-play .nav .slick-next{
    right:0;
    border-radius:0 2px 2px 0
}
.search-play .slide-playlist{
    position:relative;
    padding-bottom:0
}
@media (max-width: 900px){
    .search__title .inner,.search__content .inner{
        padding:0
    }
}
.search__title{
    margin-bottom:15px
}
.search__title h4 strong{
    font-size:23px;
    color:#101820
}
.search__title h4 span{
    font-size:20px;
    color:#585858;
    margin-left:10px
}
@media (max-width: 900px){
    .search__title h4 span{
        margin-left:5px
    }
}
.search__title h4 strong,.search__title h4 span{
    vertical-align:middle
}
@media (max-width: 900px){
    .search__title h4 strong,.search__title h4 span{
        font-size:17.5px
    }
}
.search__title a{
    margin-top:2px;
    margin-left:15px;
    font-size:15px;
    color:#585858
}
@media (max-width: 900px){
    .search__title a{
        margin-top:0;
        margin-left:10px;
        font-size:11px
    }
}
.search__title a:before{
    content:'';
    display:inline-block;
    width:1px;
    height:12px;
    background-color:#ccc;
    margin-right:15px
}
@media (max-width: 900px){
    .search__title a:before{
        margin-right:10px;
        vertical-align:middle
    }
}
.search__title a .icon{
    margin-left:8px
}
.search__title a .icon:before{
    font-size:9px
}
.search__title .inner{
    display:flex;
    align-items:center
}
@media (max-width: 900px){
    .search__content .nav{
        display:none
    }
}
.main-contents{
    position:relative;
    z-index:1;
    background-color:#fff
}
@media (max-width: 900px){
    .main .slider-visual{
        padding-bottom:37%
    }
}
.main .slider-visual .article .img .mobile{
    background-position:50% 50%
}
@media (max-width: 900px){
    .main .slider-visual .dot{
        top:85%;
        bottom:auto
    }
}
[data-loc="go"] .header-new.fixed ~ .main .wrap-slider-visual .slider-visual{
    top:269px
}
@media (max-width: 900px){
    [data-loc="go"] .header-new.fixed ~ .main .wrap-slider-visual .slider-visual{
        top:173px
    }
}
.compound>div{
    padding:60px 0 5px
}
@media (max-width: 900px){
    .compound>div{
        padding:30px 30px 0 20px;
        overflow:hidden
    }
}
.compound-one{
    background-color:#f4f4f4
}
.compound-two{
    border-bottom:1px solid #e6e6e6
}
.compound .list-grid{
    margin:0 75px
}
@media (max-width: 1280px){
    .compound .list-grid{
        margin-left:40px;
        margin-right:40px
    }
}
@media (max-width: 900px){
    .compound .list-grid{
        margin-left:-10px;
        margin-right:-10px
    }
}
.compound .list-grid .slider-compound{
    margin-bottom:25px;
    overflow:hidden
}
@media (min-width: 1400px){
    .compound .list-grid .slider-compound .slick-track{
        width:100% !important;
        transform:translate3d(0px, 0px, 0px) !important
    }
}
@media (max-width: 900px){
    .compound .list-grid .slider-compound{
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        overflow-x:scroll;
        padding-right:20px
    }
}
.compound .list-grid .slider-compound .slide-item{
    display:none;
    width:25%;
    float:left;
    padding:0 15px;
    box-sizing:border-box
}
@media (min-width: 1400px){
    .compound .list-grid .slider-compound .slide-item{
        width:25% !important
    }
}
@media (max-width: 900px){
    .compound .list-grid .slider-compound .slide-item{
        display:block;
        flex:none;
        width:318px;
        padding:0 10px
    }
}
.compound .list-grid .slider-compound.slick-initialized .slide-item{
    display:block
}
.compound .list-grid .article{
    position:relative;
    width:100%;
    max-width:none;
    padding:0
}
.compound .list-grid .article .region em{
    margin-right:5px;
    color:#06a7e2;
    font-size:14px;
    font-weight:normal
}
.mypage-latest .list .inner,.mypage-like .list .inner{
    margin-bottom:50px;
    border-bottom:1px solid #e6e6e6
}
.mypage-latest .list .inner{
    padding-bottom:30px
}
.mypage-latest .list .description{
    max-height:46px
}
@media (max-width: 900px){
    .mypage-latest .list .description{
        max-height:14px
    }
}
.mypage-share .list .meta .status,.mypage-share .list .meta .date{
    float:none;
    width:auto
}
@media (max-width: 900px){
    .mypage-control,.mypage-control .sort{
        margin-bottom:0
    }
}
@media (max-width: 900px){
    .mypage-control .col-right{
        clear:right;
        width:100%;
        margin-bottom:10px
    }
    .mypage-control .col-right .btn{
        float:left;
        width:32.3334%;
        min-height:40px;
        line-height:1;
        margin-left:1%;
        padding:0;
        word-break:keep-all;
        word-wrap:break-word
    }
    .mypage-control .col-right .btn:first-child{
        margin-left:0
    }
}
.mypage-play.play-list .subject{
    background:none;
    color:inherit;
    margin-bottom:0
}
@media (max-width: 900px){
    .mypage-play.play-list .subject{
        padding-bottom:25px
    }
}
.mypage-play.play-list .subject small{
    opacity:inherit
}
@media (max-width: 900px){
    .mypage-play.play-list .list{
        padding:0 0 50px
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .inner{
        flex-direction:column;
        margin:0
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article{
        width:100%;
        margin:0
    }
}
.mypage-play.play-list .list .article a{
    padding:30px 0;
    flex:none;
    width:calc(100% - 64px)
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article>a{
        flex-direction:row;
        width:calc(100% - 35px);
        padding:16px 0;
        overflow:hidden
    }
}
.mypage-play.play-list .list .article .content{
    padding:0 35px;
    background-color:transparent
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article .content{
        flex:none;
        width:60%;
        padding:0 10px;
        align-self:center;
        box-sizing:border-box
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article .content .explain{
        display:none
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article .content .meta{
        padding-right:54px
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article .content .meta .shares{
        margin-bottom:3px
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article .btn{
        bottom:16px;
        right:0
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article .check-item{
        width:auto;
        padding-left:1px;
        padding-right:4px
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article .img-wrap{
        flex:none;
        width:40%;
        height:90%
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article .img-wrap .label{
        display:none
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .list .article .img-wrap .meta{
        display:none
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .mypage-control .btns{
        display:flex;
        justify-content:space-between;
        width:100%;
        box-sizing:border-box
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .mypage-control .btns:after{
        display:none
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .mypage-control .btns .col{
        flex:none
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .mypage-control .btns .col-right{
        display:flex;
        justify-content:flex-end;
        align-self:center;
        width:auto;
        margin-bottom:0
    }
}
@media (max-width: 900px){
    .mypage-play.play-list .mypage-control .btns .col-right .btn{
        width:auto;
        padding:0 10px;
        white-space:nowrap
    }
}
@media (max-width: 900px){
    .mypage .control{
        height:auto
    }
}
@media (max-width: 900px){
    .page-event#container{
        margin-top:70px
    }
}
@media (max-width: 900px){
    .page-event .slick-track{
        display:table;
        align-items:stretch;
        display:flex
    }
}
@media (max-width: 900px){
    .page-event .slick-nav .slick-dots{
        position:static;
        width:auto
    }
}
@media (max-width: 900px){
    .page-event .slick-nav .slick-dots button{
        width:8px;
        height:8px;
        margin:0 2.5px;
        border-width:1.5px
    }
}
@media (max-width: 900px){
    .page-event .slick-nav .btn-pause{
        margin:0 2.5px
    }
}
@media (max-width: 900px){
    .page-event .slick-nav .btn-pause .icon:before{
        font-size:8px
    }
}
.page-event .subject{
    display:none
}
.page-event .big-banner .winners{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:36px;
    line-height:36px;
    padding-right:30px;
    font-size:15px;
    color:#101820;
    background-color:#f0f0f0;
    text-align:right;
    box-sizing:border-box
}
@media (max-width: 900px){
    .page-event .big-banner .winners{
        height:28px;
        line-height:28px;
        padding-right:15px;
        font-size:11px
    }
}
.page-event .big-banner .winners strong{
    font-weight:normal
}
.page-event .big-banner .winners .graph{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    color:#fff;
    box-sizing:border-box
}
.page-event .big-banner .winners .graph>div{
    position:relative;
    display:block;
    width:0;
    height:100%;
    overflow:hidden;
    transition:width 1.3s
}
.page-event .big-banner .winners .graph>div:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
    background-color:#000;
    opacity:0.1
}
.page-event .big-banner .winners .graph i{
    position:absolute;
    top:0;
    left:0;
    width:1120px;
    padding-right:30px;
    font-style:normal;
    box-sizing:border-box;
    z-index:1
}
@media (max-width: 900px){
    .page-event .big-banner .winners .graph i{
        padding-right:15px
    }
}
.page-event .big-banner .winners .graph strong:after{
    border-color:#fff
}
.page-event .big-banner .status,.page-event .big-banner .title,.page-event .big-banner .period,.page-event .big-banner .img{
    opacity:0;
    transition:opacity 0.3s ease, transform 0.6s ease
}
.page-event .big-banner .status{
    transform:translateY(30px);
    transition-delay:0.2s
}
.page-event .big-banner .title{
    transform:translateY(60px);
    transition-delay:0.5s
}
.page-event .big-banner .period{
    transform:translateY(90px);
    transition-delay:0.8s
}
.page-event .big-banner .img{
    transform:scale(0.8);
    transition-delay:0.35s
}
.page-event .big-banner .active .status,.page-event .big-banner .active .title,.page-event .big-banner .active .period,.page-event .big-banner .active .img{
    opacity:1;
    transform:translateY(0) scale(1)
}
.page-event .big-banner.image,.page-event .big-banner.info{
    position:relative;
    max-width:1150px;
    height:406px;
    background-color:#ddd
}
@media (max-width: 900px){
    .page-event .big-banner.image,.page-event .big-banner.info{
        height:auto
    }
}
.page-event .big-banner.info>a{
    height:100%;
    padding:45px 70px 36px;
    color:inherit;
    text-shadow:0 0 3px rgba(0,0,0,0.1);
    box-sizing:border-box
}
@media (max-width: 900px){
    .page-event .big-banner.info a{
        padding:175px 0px 28px
    }
}
.page-event .big-banner.info a:hover .title{
    color:inherit
}
.page-event .big-banner.info a:hover .img:after{
    opacity:0.1
}
.page-event .big-banner.info a:hover img{
    transform:translate(-50%, -50%)
}
.page-event .big-banner.info .status{
    font-size:15px
}
@media (max-width: 900px){
    .page-event .big-banner.info .status{
        position:absolute;
        top:35px;
        left:0;
        width:100%;
        font-size:11px;
        text-align:center
    }
}
.page-event .big-banner.info .status strong{
    font-weight:normal
}
.page-event .big-banner.info .participation:before{
    content:'';
    display:inline-block;
    height:10px;
    margin:0 9px;
    vertical-align:middle;
    border-right:1px solid;
    opacity:0.5
}
.page-event .big-banner.info .title{
    max-height:none;
    font-size:40px;
    font-weight:bold
}
@media (max-width: 900px){
    .page-event .big-banner.info .title{
        margin:0 15px;
        font-size:28px
    }
}
.page-event .big-banner.info .img{
    position:absolute;
    top:0;
    right:0;
    bottom:36px;
    width:465px;
    border:0;
    overflow:hidden
}
@media (max-width: 900px){
    .page-event .big-banner.info .img{
        position:relative;
        top:auto;
        bottom:auto;
        right:auto;
        width:100%;
        height:auto;
        margin:0 auto
    }
}
@media (max-width: 900px){
    .page-event .big-banner.info .img:before{
        padding-bottom:100%
    }
}
@media (max-width: 900px){
    .page-event .big-banner.info .img:after{
        display:block
    }
}
.page-event .big-banner.info .img img{
    position:absolute;
    width:auto;
    height:100%;
    max-width:none;
    max-height:100%;
    min-height:0;
    z-index:1
}
.page-event .big-banner.info .content{
    position:static;
    margin:23px 370px 0 0
}
@media (max-width: 900px){
    .page-event .big-banner.info .content{
        position:absolute;
        top:60px;
        left:0;
        bottom:0;
        width:100%;
        margin:0;
        text-align:center
    }
}
.page-event .big-banner.info .period{
    position:absolute;
    left:70px;
    bottom:100px;
    font-size:18px
}
@media (max-width: 900px){
    .page-event .big-banner.info .period{
        position:relative;
        left:auto;
        bottom:auto;
        padding-top:25px;
        font-size:11px
    }
}
@media (max-width: 900px){
    .page-event .big-banner.info .period:before{
        top:12px;
        left:50%;
        width:15px;
        margin-left:-7.5px
    }
}
.page-event .big-banner.info .period strong{
    display:none
}
.page-event .big-banner.info .winners strong:after{
    content:'';
    display:inline-block;
    width:0;
    height:10px;
    margin:0 10px 0 14px;
    border-right:1px solid #a4a4a4;
    vertical-align:middle
}
@media (max-width: 900px){
    .page-event .big-banner.image a{
        height:100%
    }
}
.page-event .big-banner.image a:hover .img:after{
    opacity:0.1
}
.page-event .big-banner.image a:hover img{
    transform:translate(-50%, -50%)
}
@media (max-width: 900px){
    .page-event .big-banner.image a .img{
        height:100%;
        margin-bottom:0
    }
}
.page-event .big-banner.image a .img img{
    width:auto;
    max-width:none;
    max-height:100%
}
@media (max-width: 900px){
    .page-event .big-banner.image a .img .pc{
        display:none
    }
}
.page-event .big-banner.image a .img .mobile{
    display:none
}
@media (max-width: 900px){
    .page-event .big-banner.image a .img .mobile{
        display:block;
        bottom:28px
    }
}
.page-event .big-banner.image .img{
    margin-bottom:36px;
    border:0
}
.page-event .big-banner.image .img:before{
    padding-bottom:370px
}
@media (max-width: 900px){
    .page-event .big-banner.image .content{
        position:static
    }
}
[data-loc="go"] .page-event#container{
    min-height:calc(100vh + 57px)
}
@media (max-width: 900px){
    [data-loc="go"] .page-event#container{
        margin-top:0
    }
}
[data-loc="go"] .event .inner{
    min-height:auto
}
.event .go-list{
    text-align:center;
    padding:36px 0;
    border-bottom:1px solid #e1e1e1
}
.event .go-list .btn{
    min-width:133px
}
.event .go-login{
    color:#101820;
    font-size:20px;
    text-align:center;
    margin:40px 0;
    padding:40px;
    border-color:#e1e1e1;
    border-style:solid;
    border-width:1px 0;
    background-color:#f3fafd
}
@media (max-width: 900px){
    .event .go-login{
        padding:20px;
        font-size:12.5px
    }
}
.event .go-login p{
    margin-top:30px
}
@media (max-width: 900px){
    .event .go-login p{
        margin-top:15px
    }
}
.event .go-login p:first-child{
    margin-top:0
}
.event .go-login p strong{
    color:#24b1e4;
    font-weight:600
}
.event .control{
    position:relative;
    padding:95px 0 0
}
@media (max-width: 900px){
    .event .control{
        padding:35px 0 0
    }
}
@media (max-width: 900px){
    .event .control .inner{
        padding:0 20px
    }
}
.event .control .btn{
    color:#585858;
    font-size:18px;
    padding:0
}
@media (max-width: 900px){
    .event .control .btn{
        font-size:15px
    }
}
.event .control .btn.disabled{
    opacity:.5
}
.event .control .btn.active .icon{
    background-color:#06a7e2
}
.event .control .btn .icon{
    color:#fff;
    text-align:center;
    width:26px;
    height:26px;
    line-height:26px;
    margin-left:7px;
    border-radius:50%;
    background-color:#e6e6e6
}
@media (max-width: 900px){
    .event .control .btn .icon{
        width:20px;
        height:20px;
        line-height:20px
    }
}
.event .control .btn .icon:before{
    font-size:14px;
    margin-left:-2px
}
@media (max-width: 900px){
    .event .control .btn .icon:before{
        font-size:12px
    }
}
@media (max-width: 1310px){
    .event .headline .tools{
        top:65px;
        right:0;
        bottom:auto
    }
}
@media (max-width: 900px){
    .event .headline .tools{
        top:auto;
        right:20px;
        bottom:15px
    }
}
.detail .event .headline .meta{
    font-size:20px;
    color:#101820
}
@media (max-width: 900px){
    .detail .event .headline .meta{
        font-size:12.5px
    }
}
.detail .event .headline .meta>span:after{
    display:none
}
.detail .event .headline .meta span{
    font:inherit;
    letter-spacing:0;
    vertical-align:baseline
}
.detail .event .headline .meta span time{
    font-weight:normal;
    vertical-align:baseline
}
.detail .event .headline .meta .col>span:before{
    content:'';
    display:inline-block;
    width:1px;
    height:15px;
    margin:0 10px;
    background-color:#a6a6a6;
    vertical-align:baseline
}
@media (max-width: 900px){
    .detail .event .headline .meta .col>span:before{
        display:none
    }
}
.detail .event .headline .meta .col>span:first-child:before{
    display:none
}
@media (max-width: 900px){
    .detail .event .headline .meta .col-left{
        margin-right:10px
    }
}
@media (max-width: 900px){
    .detail .event .headline .meta .col-right{
        float:left
    }
}
@media (max-width: 900px){
    .detail .event .headline .meta .announce{
        display:block
    }
}
@media (max-width: 900px){
    .detail .event .headline .meta .announce:after{
        display:none
    }
}
.detail .event .headline .btns{
    position:absolute;
    top:65px;
    right:0
}
@media (max-width: 1310px){
    .detail .event .headline .btns{
        position:static;
        display:block;
        margin:15px auto 0;
        text-align:center
    }
}
.detail .event .headline .btns .end{
    min-height:40px;
    line-height:38px;
    padding:0 20px;
    font-size:18px;
    color:#06a7e2;
    border:1px solid #06a7e2;
    border-radius:3px;
    box-sizing:border-box
}
@media (max-width: 900px){
    .detail .event .headline .btns .end{
        font-size:12px;
        min-width:133px;
        height:30px;
        line-height:28px;
        min-height:30px
    }
}
.detail .event .contents{
    border-top:1px solid #d7d7d7
}
@media (max-width: 900px){
    .detail .event .pc{
        display:none
    }
}
.detail .event .mobile{
    display:none
}
@media (max-width: 900px){
    .detail .event .mobile{
        display:block
    }
}
.popup-print .headline{
    padding-top:35px
}
.popup-print .logo,.popup-print .btn-print,.popup-print .addition,.popup-print .tools,.popup-print #commentBody{
    display:none
}
.ie-alert{
    display:none;
    position:absolute;
    top:0;
    left:10px;
    right:10px;
    padding:1px;
    border:1px solid #000;
    background-color:#fff;
    text-align:center;
    z-index:100
}
.ie-alert i{
    display:block;
    height:6px;
    font:0/0 a;
    background-color:#f2b100
}
.ie-alert p{
    height:40px;
    line-height:40px
}
.ie-compatible .ie-alert{
    display:block
}
.no-csstransforms .article .img span{
    left:0;
    right:0
}
.no-csstransforms .article .img img{
    position:static;
    width:100%;
    height:auto
}
.no-csstransforms .article .running-time strong{
    background-color:#000
}
.no-csstransforms .list-ahead .article .running-time strong{
    display:inline-block;
    margin-left:-100%
}
.no-csstransforms .layer-gnb{
    display:none
}
.no-csstransforms .layer-gnb.active{
    display:block
}
.no-csstransforms .slick-dots .slick-active button{
    width:17px;
    height:17px
}
.placeholder{
    color:#000;
    white-space:nowrap;
    opacity:0.5;
    filter:alpha(opacity=50)
}
.ph-focus{
    opacity:0.2;
    filter:alpha(opacity=20)
}

@media (min-width: 1401px) and (max-width: 1780px){
    .main .play-list {padding: 40px 0 50px; background: url(../images/common/bg-playlist-main-mo.png) no-repeat center 0/cover;}
    .main .play-list--wrap {display: block; margin: 20px 0 25px;}
    .main .play-list__title {width: 100%; background: none;}
    .main .play-list__contents {margin: 50px auto 0; padding-right: 30px; width: calc(100% - 150px);}
    .main .play-list__title {display: block; position: relative; padding: 0;}
    .main .play-list__title h3 {margin: 0 160px; padding-right: 20%; text-align: left;}
    .main .play-list__title .btn-stroke {position: absolute; top: 0; right: 160px; margin: 0;}
    .main .play-list__contents .inner .article {border: 0;}
    .main .play-list .list-default .explain {margin-right: 0;}
    .main .play-list .article .img span:first-child {background-color: #191531;}
}
@media (min-width: 1401px) and (max-width: 1600px){
    .main .play-list__title h3 {margin: 0 90px;}
    .main .play-list__title .btn-stroke {right: 90px;}
}

@media (min-width: 1390px) and (max-width: 1520px){
    #footer .quick.fix {
        right: 20px;
    }
}

@media (max-width: 900px) {
    .layer-policy-btns a {
        margin-bottom: 10px;
        height: auto;
    }

    .layer-policy-btns a:last-child {
        margin-bottom: 0;
    }
}

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

    .search.focus .search-field > .search-history {
        width: 100%;
    }

    #search-list > ul::-webkit-scrollbar {
        display:block !important;
        width:6px !important;
    }
    #search-list > ul::-webkit-scrollbar-thumb {
        height: 30% !important;
        background: #b7b7b7 !important;
        border-radius: 10px !important;
    }
    /* 모바일에서 히스토리 스크롤 표출 */
    #search-list > ul {
        width: 100%;
        max-height: 31vh !important;
        overflow-y:scroll !important;
    }
}

/* 모바일 에서만 */
@media screen and (max-width:767px) {
    .btn.sms { display: inline-block; }
}
/* 모바일 외 */
@media screen and (min-width:768px){
    .btn.sms { display: none !important; }
}

.main .products-list .slick-track {display: flex; align-items: stretch;}
.main .products-slider .item {height: inherit;}
.main .products-slider .item a {margin-bottom: 10px; padding-bottom: 84px; box-sizing: border-box;}
.main .products-slider .img {padding-bottom: 99.34%;}
.main .products-slider .item .bottom {position: absolute; left: 0; bottom: 10px; width: 100%;}

.header .menu i.icon-star-yellow {margin: 2px 15px 0 0;}
.header .menu i.icon-star-yellow:before {display: block; width: 21px; height: 20px; background: url(../images/icons/i-star-yellow.png) center center no-repeat; background-size: 100% auto;}
@media (max-width: 900px) {
    .header .menu.none-plus:before,
    .header .menu.none-plus:after {display: none;}
    .header .menu i.icon-star-yellow {position: absolute; top: 13px; left: 23px; margin: 0;}
    .header .menu i.icon-star-yellow:before {width: 18px;}
}
@media (min-width: 901px) {
    .header .menu.none-plus>a {min-width: 150px;}
}
@media (min-width: 901px) {
    .header-menus .menu-lists .lists .menu > a strong {position: relative; padding-left: 35px;}
    .header-menus .menu-lists .lists .menu .icon-star-yellow {position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
}



/*# sourceMappingURL=maps/styles.css.map */
#reviewModal .layer {max-width: 560px;}

#reviewModal .layer .review-write .flex {display: flex; justify-content: space-between; align-items: center;}
#reviewModal .layer .review-write .flex strong {font-size: 22px; font-weight: bold;}

#reviewModal .layer .select-review button {color: #101820; background: #fff; border-color: #d5d5d5; border-radius: 2px;}
#reviewModal .layer .select-review.active button {border-bottom-color: transparent; border-radius: 2px 2px 0 0;}
#reviewModal .layer .select-review button:after {transform: rotate(180deg);}
#reviewModal .layer .select-review.active button:after {transform: rotate(0);}
#reviewModal .layer .select-review ul {bottom: auto; padding: 0; max-height: 122px; color: #585858; border-radius: 0 0 2px 2px; border: 1px solid #d5d5d5; border-top-width: 0; overflow-y: auto; height: auto;}

#reviewModal .layer .bytes {display: block; margin-top: 20px; font-size: 15px; color: #585858; text-align: right;}
#reviewModal .layer .caption {display: block; margin: 20px 0 30px; font-size: 15px; color: #999999;}

#reviewModal .layer .review-write .textarea {display: block; margin-top: 20px;}
#reviewModal .layer .review-write .textarea textarea {padding: 20px; width: 100%; height: 300px; resize: none; border: 1px solid #e5e5e5; box-sizing: border-box;}
#reviewModal .layer .layer-inner {text-align: center;}
#reviewModal .layer .layer-inner .btn {position: static; padding: 5px;}

@media (min-width: 901px) {
    #reviewModal .btn-layer-close {padding: 30px 20px;}
    #reviewModal.layer-stemp h2 {height: 85px;}
    #reviewModal.layer-stemp h2 span {font-size: 30px;}

    #reviewModal .layer .select-review {height: 42px;}
    #reviewModal .layer .select-review button {padding: 0 30px 0 10px; font-size: 16px;}
    #reviewModal .layer .select-review button:after {top: 17px;}
    #reviewModal .layer .select-review ul {top: 41px;}
}
@media (max-width: 900px) {
    #reviewModal .layer {top: 0; left: 0; transform: none; width: 100%; max-width: 100%; height: 100%;}
    #reviewModal .layer .layer-content {margin: 0; width: 100%; height: 100%; border-radius: 0;}
    #reviewModal .layer .select-review ul {max-height: 100px;}

    #reviewModal .layer .review-write .flex {flex-wrap: wrap;}
    #reviewModal .layer .review-write .flex strong,
    #reviewModal .layer .review-write .select-review {width: 100%;}
    #reviewModal .layer .review-write .flex strong {margin-bottom: 10px; font-size: 15px;}
    #reviewModal .layer .review-write .textarea textarea {padding: 15px 10px;}

    #reviewModal .layer .bytes,
    #reviewModal .layer .caption {margin-top: 10px; font-size: 13px;}

    #reviewModal .layer .layer-inner {position: fixed; bottom: 0; left: 0; width: 100%;}
    #reviewModal .layer .layer-inner .btn.mob-none{display: none;}
    #reviewModal .layer .layer-inner .btn {width: 100%; height: 45px; border-radius: 0;}

}

.stream-tab {display: none;}

.stream-review {position: relative; margin-top: 40px;}
.stream-review .review-ctrl {display: flex; justify-content: space-between; align-items: center;}
.stream-review .review-ctrl .right {display: flex; gap: 20px; align-items: center;}
.stream-review .review-ctrl .check {display: flex; gap: 10px; align-items: center;}
.stream-review .review-ctrl .check label {color: #555555;}
.stream-review .review-ctrl .check label,
.stream-review .review-ctrl .check input {cursor: pointer}
.stream-review .review-ctrl .checkbox {background-color: #e5e5e5; border-color: #e5e5e5; border-radius: 50%;}
.stream-review .review-ctrl input[type="checkbox"]+i {background-color: transparent; border-color: transparent; border-radius: 50%; opacity: 1;}
.stream-review .review-ctrl input[type="checkbox"]:checked+i {background-color: #24b1e4; border-color: #24b1e4; }
.stream-review .review-ctrl .btn-wrap button {color: #fff; background-color: #00b5ef; border-radius: 2px; text-align: center;}
.stream-review .review-ctrl .btn-wrap button strong {font-weight: 300;}

.stream-review .select-review button {color: #101820; background: #fff; border-color: #d5d5d5; border-radius: 2px;}
.stream-review .select-review.active button {border-bottom-color: transparent; border-radius: 2px 2px 0 0;}
.stream-review .select-review button:after {transform: rotate(180deg);}
.stream-review .select-review.active button:after {transform: rotate(0);}
.stream-review .select-review ul {bottom: auto; padding: 0; max-height: 122px; color: #585858; border-radius: 0 0 2px 2px; border: 1px solid #d5d5d5; border-top-width: 0; overflow-y: auto;}

.stream-review .review-list {margin-top: 20px;}
.stream-review .review-list ul {border-top: 1px solid #dbdbdb;}
.stream-review .review-list li {position: relative;}
.stream-review .review-list li.my-re {background-color: #f3fafd;}
.stream-review .review-list .review-none { padding: 30px 20px; background-color: #f7f7f7; border-bottom: 1px solid #dbdbdb; text-align: center;}
.stream-review .review-list .review-none p {font-size: 20px; color: #101820; font-weight: 300;}
.stream-review .review-list .review-none .br-mob {display: none;}
.stream-review .review-list .review-box {padding: 30px 20px; border-bottom: 1px solid #dbdbdb;}
.stream-review .review-list .group-item {display: flex; margin-bottom: 20px; font-size: 15px; color: #585858;}
.stream-review .review-list .group-item span {display: block;}
.stream-review .review-list .group-item .user {color: #24b1e4;}
.stream-review .review-list .group-item .lecture {position: relative; margin-left: 15px; padding-left: 15px;}
.stream-review .review-list .group-item .lecture:before {display: block; content: ''; position: absolute; top: 5px; left: 0; width: 1px; height: 12px; background-color: #cccccc;}
.stream-review .review-list p {line-height: 1.2; font-size: 18px; color: #101820;}
.stream-review .review-list .date {display: block; margin-top: 30px; font-size: 15px; color: #585858;}
.stream-review .review-list .btn-wrap {display: flex; gap: 6px; position: absolute; bottom: 25px; right: 20px;}
.stream-review .review-list .btn-wrap button {display: block; padding: 0 10px; height: 30px; font-size: 15px; color: #101820; background-color: #fff; border: 1px solid #bfbfbf; border-radius: 2px; text-align: center;}
.stream-review .right .check {display: none;}
@media (min-width: 901px) {
    .stream-review .review-ctrl .check label {line-height: 1; font-size: 18px;}
    .stream-review .review-ctrl .btn-wrap button {padding: 0 30px; height: 42px; font-size: 18px;}

    .stream-review .select-review {height: 42px;}
    .stream-review .select-review button {padding: 0 30px 0 10px; font-size: 16px;}
    .stream-review .select-review button:after {top: 17px;}
    .stream-review .select-review ul {top: 41px;}
}
@media (max-width: 900px) {
    .stream-tab {display: flex; margin-top: 30px; padding: 0 20px;}
    .stream-tab a {flex: 1; display: flex; justify-content: center; align-items: center; height: 35px; font-size: 15px; color: #585858; font-weight: 600; background-color: #f7f7f7; border: 1px solid #cccccc; box-sizing: border-box;}
    .stream-tab a.active {color: #fff; background-color: #06a7e2; border-color: #06a7e2;}

    .stream-list,
    .stream-review {display: none;}
    .stream-list.on,
    .stream-review.on {display: block;}
    .stream-wrap .stream-box .stream-list .list > li.closed .play-list {display: none;}
    .stream-wrap .stream-box .stream-list .list .play-list > li {width: 100%;}
    .stream-wrap .stream-box .stream-list .list .article > a {display: flex;}
    .stream-wrap .stream-box .stream-list .list .article .img {margin-right: 20px; width: calc(50% - 20px); box-sizing: border-box;}
    .stream-wrap .stream-box .stream-list .list .article .content {width: 50%; box-sizing: border-box;}

    .stream-wrap .stream-box .stream-list .list .box-day .fixed span {position: relative; cursor: pointer;}
    .stream-wrap .stream-box .stream-list .list .box-day .fixed span:after {display: inline-block; content: ""; margin: 8px 0 0 8px; width: 7px; height: 7px; border-top: 1px solid #00b5ef; border-right: 1px solid #00b5ef; vertical-align: top; transform: rotate(135deg);}
    .stream-wrap .stream-box .stream-list .list > li.closed .box-day .fixed span:after{margin-top: 12px; transform: rotate(315deg);}

    .stream-review {margin-top: 30px;}
    .stream-review .review-ctrl {padding: 50px 20px 0;}
    .stream-review .review-ctrl .right {gap: 10px;}
    .stream-review .review-ctrl .check {gap: 5px;}
    .stream-review .review-ctrl .btn-wrap {position: absolute; top: 0; left: 20px; width: calc(100% - 40px);}
    .stream-review .review-ctrl .btn-wrap button {padding: 0 10px; width: 100%; height: 30px; font-size: 14px;}

    .stream-review .select-review {min-width: 120px;}
    .stream-review .select-review button {border-color: transparent;}
    .stream-review .select-review.active button {border-color: #d5d5d5; border-bottom-color: transparent;}
    .stream-review .select-review button em {color: #06a7e2; font-weight: bold;}

    .stream-review .review-list li {padding: 0 20px;}
    .stream-review .review-list .review-none p {font-size: 16px;}
    .stream-review .review-list .review-none .br-mob {display: inline-block;}
    .stream-review .review-list .review-box {padding: 30px 0;}
    .stream-review .review-list .group-item {font-size: 14px;}
    .stream-review .review-list p {line-height: 1.3; font-size: 16px;}
    .stream-review .review-list .date {position: absolute; top: 30px; right: 20px; margin-top: 0; font-size: 14px;}
    .stream-review .review-list .btn-wrap {justify-content: end; position: relative; bottom: 0; right: 0; margin-top: 15px;}
}

#reviewModal .layer .select-review .scroll-custom {
    display: none;
    position: absolute;
    top: 41px;
    left: 0;
    width: 100%;
    height: initial;
    max-height: 122px;
    border-radius: 0 0 2px 2px;
    border: 1px solid #d5d5d5;
    border-top-width: 0;
    box-sizing: border-box;
    padding-right: 0;
}
#reviewModal .layer .select-review.active .scroll-custom {
    display: block;
}
#reviewModal .layer .select-review .scroll-custom ul {
    position: relative;
    max-height: initial;
    border-radius: 0;
    border: 0;
    overflow: initial;
    top: 0;
}

.main .products-list .utils button {background-color: #ffffff}

@media (min-width: 901px){
    .main .category h3 {font-size: 30px;}
    .main .wrap-slider-category {margin-top: 30px;}
    .main .category .wrap-slider-category {padding-bottom: 0;}
}

#footer {z-index: inherit;}
.select-language ul {z-index: 101;}