@charset "utf-8";
/* CSS Document */
.radio-list .head-title { color: white }
.bg-white { background-color: #ffffff; }
.new-radio { }
.new-radio .wrap { width: 1000px; margin: 0 auto; box-sizing: border-box; padding: 0; position: relative; }
.new-radio h2 { font-size: 30px; font-weight: 100; line-height: 30px; margin: 0 0 20px; text-align: left; width: 100%; float: left; }
.new-radio h2 .pink { background-color: transparent; color: rgb(228, 33, 90); }
.new-radio h2 .fat { font-weight: 900; }
.new-radio .new-radio-box { float: left; width: 100%; }
.new-radio .new-radio-box .wide { width: 300px; height: 130px; background-color: #E4215A; overflow: hidden; margin: 0 0 10px 0; float: left; }
.new-radio .new-radio-box a { display: block; position: relative; transition: all 0.5s ease-in-out 0s; }
.new-radio .new-radio-box a img { max-width: 100%; }
.new-radio .new-radio-box a .saturation { position: relative; z-index: 2; transition: all 0.5s ease-in-out 0s; }
.new-radio .new-radio-box a .color { position: absolute; z-index: 1; top: 0; left: 0; }
.new-radio .new-radio-box a:hover .saturation,
.new-radio .new-radio-box a.active .saturation { opacity: 0; }
.new-radio-full-column { width: 100%; float: left; box-sizing: border-box; padding: 0px 10px; }
.new-radio-right-column { width: 300px; float: right; height: 100%; margin: 0 10px; position: relative; }
.new-radio-right-column-absolute { position: absolute; bottom: 40px; right: 0; }
.new-radio-right-column .recommended-box-fixed { position: fixed; top: 120px; right: auto; }
.new-radio-right-column .recommended-box-absolute { position: absolute; bottom: 0; }
.new-radio-center-column { box-sizing: border-box; float: left; height: 600px; margin: 0; overflow: hidden; padding: 10px 0; position: relative; width: 340px; }
.new-radio-center-column-absolute { position: absolute; bottom: 40px; right: 320px; }
.new-radio-center-column .row { width: 100%; float: left; }
.new-radio-center-column .row-head { height: 40px; line-height: 40px; width: 100%; }
.new-radio-center-column .row-head .back-nav { float: left; height: 25px; position: absolute; }
.new-radio-center-column .row-head .head-title { display: block; font-size: 20px; font-weight: bold; line-height: 22px; text-align: center; }
.new-radio-center-column .row-head .head-title img { display: block; margin: 0 auto; }
.new-radio-center-column .row-head img { display: block; margin: 0 auto; }
.new-radio-center-column .radio-list { width: 340px; }
.new-radio-center-column .radio-list ul li { display: block; float: left; width: 100%; border-bottom: 1px solid #2e2e2e; line-height: 34px; height: 44px; }
.new-radio-center-column .radio-list ul li a { color: #ffffff; display: block; font-size: 16px; height: 100%; line-height: 44px; transition: all 0.3s ease-in-out 0s; width: 100%; }
.new-radio-center-column .radio-list ul li a:hover { color: #e4215a; }
.new-radio-center-column .radio-list ul li a .play_icon {
    background: rgba(0, 0, 0, 0) url("/html/gfx/v2/sprite_eskago.png") no-repeat scroll -280px -248px;
    height: 14px;
    margin-left: 15px;
    margin-top: 15px;
    position: absolute;
    transform: scale(0);
    transition: all 0.3s ease-in-out 0s;
    width: 14px;
}

.new-radio-center-column .radio-list ul li a:hover .play_icon {
    transform: scale(1);
}
.new-radio-center-column .back-nav { display: none; }
.new-radio-center-column .radio-list-fixed { position: fixed; top: 120px; }
.new-radio-center-column .radio-list-absolute { position: absolute; bottom: 0; top: auto; }
.new-radio-left-column { width: 320px; float: left; position: relative; box-sizing: border-box; padding: 0 10px 0 0; }
.new-radio-left-column .new-radio-box { margin: 0 0 30px 0; }
.new-radio .new-radio-box .square { width: 145px; height: 145px; background-color: #E4215A; overflow: hidden; margin: 0 0 10px 0; float: left; }
.new-radio .new-radio-box .square:nth-of-type(n) { margin: 0 10px 10px 0; }
.bottom-check-line { width: 100%; float: left; clear: both; height: 0; background-color: transparent; margin: 0 0 40px 0; }
.container .content_head::after { background: rgb(223, 38, 89) none repeat scroll 0 0; content: ""; display: block; height: 8px; margin: 0; position: absolute; top: -20px; width: 64px; }
.container .content_head { display: block; float: left; margin: 20px 0 0; position: relative; width: 100%; }
.container .pink { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: rgb(223, 38, 89); }
.container h2 { font-family: "Roboto Condensed", sans-serif; font-size: 35px; font-weight: bold; }
.apps-pomo-box { }
.apps-pomo-box .wrap { width: 1000px; margin: 0 auto; box-sizing: border-box; padding: 0; position: relative; }
.apps-pomo-box .full-box { float: left; width: 100%; box-sizing: border-box; padding: 0 20px }
.apps-pomo-box .half-box { float: left; width: 50%; box-sizing: border-box; padding: 0 20px }
.apps-pomo-box img { max-width: 100%; margin: 0 auto; }
.apps-pomo-box .web-version { width: 100%; float: left; position: relative; }
.apps-pomo-box .web-version .links { left: 20px; position: absolute; top: 260px; z-index: 2; }
.apps-pomo-box .web-version .links a { display: block; float: left; margin: 0 20px 0 0; width: 220px; }
.apps-pomo-box .web-version .links a img { }
.apps-pomo-box .mobile-version { display: none; }
.apps-pomo-box .mobile-version img { margin: 20px auto 0; }
.channel-list-box { display: none; }
.intro-box { display: block; }
body.screening .new-radio .wrap { background-color: #222222; padding: 10px; }
body.screening .new-radio-center-column { width: 330px; }
body.screening .new-radio-center-column .radio-list { width: 330px; }
body.screening .new-radio-right-column { margin: 0; }
body.screening .new-radio-right-column-absolute { right: 10px; }
body.screening .apps-pomo-box .wrap { background-color: #222222; overflow: hidden; }
.new-radio-center-column .radio-list ul li .ico-play { display: inline; float: left; height: 22px; left: 0; margin: 12px 0 0; position: absolute; transition: all 0.3s ease-in-out 0s; width: 22px; }
.new-radio-center-column .radio-list ul li .ico-play-hover { opacity:0;}
.new-radio-center-column .radio-list ul li .img-ico-play { left: 0; position: absolute; top: 0; }
.new-radio-center-column .radio-list ul li a:hover .ico-play-hover { opacity:1; position:absolute; top:0; left:0; transition: all 0.3s ease-in-out 0s;}
.new-radio-center-column .radio-list ul li a:hover .img-ico-play { opacity:0; transition: all 0.3s ease-in-out 0s;}

@media all and (max-width: 1000px) {
.new-radio .wrap,
body.zpr_mobile .new-radio .wrap { width: 660px; margin: 0 auto; }
.new-radio-center-column { display: none; }
.new-radio-center-column .back-nav { display: block; }
.new-radio .wrap .show-on-small-screen { display: block; }
.new-radio .wrap .hide-on-small-screen { display: none; }
.new-radio-center-column-absolute { right: 0; }
.apps-pomo-box .web-version { display: none; }
.apps-pomo-box .mobile-version { display: block; }
.channel-list-box { display: block; }
.intro-box { display: none; }
}
 @media all and (max-width: 660px) {
.new-radio .wrap,
body.zpr_mobile .new-radio .wrap { width: 320px; margin: 0 auto; }
.new-radio-right-column,
.new-radio-right-column.show-on-small-screen,
.new-radio-right-column.hide-on-small-screen { display: none; }
.new-radio-center-column-absolute,
.new-radio-center-column .radio-list-fixed { position: relative; top: 0; }
body.zpr_mobile .container_new .content { margin: 4px 0; }
body.zpr_mobile header .nav .col-1 .logo { float: none; left: 20px; margin: 0 auto; position: relative; }
body.zpr_mobile .apps-pomo-box { width: 320px; }
body.zpr_mobile .new-radio-center-column .radio-list { width: 300px; }
body.zpr_mobile .new-radio-center-column { width: 300px; }
}