/* logo */
.logoFooter {
    position:absolute;
    left: 25px;
    top: 25px;
    font-size: 28px;
    line-height: 24px;
    color:#b2b2b2;
    font-weight: 500;
    text-decoration: none;
}
.logoFooter b {color:#000;}
.logoRightTop {position:fixed; right:27px; top:50px; z-index:998; text-indent:-10000em; overflow:hidden; width:36px; height:213px;}
.logoRightBottom {position:fixed; right:35px; bottom:120px; z-index:998; text-indent:-10000em; overflow:hidden; width:22px; height:146px;;
    opacity:1;
    animation: logoRightBottom 2s forwards infinite running alternate ease-in-out ;
    -moz-animation: logoRightBottom 2s forwards infinite running alternate ease-in-out;
    -webkit-animation: logoRightBottom 2s forwards infinite running alternate ease-in-out;
}
@keyframes logoRightBottom {
    0% {opacity:1}
    100% {opacity:0.2;}
}
@-moz-keyframes logoRightBottom {
    0% {opacity:1}
    100% {opacity:0.2;}
}
@-webkit-keyframes logoRightBottom {
    0% {opacity:1}
    100% {opacity:0.2;}
}

/* layer comment */
.layer_comment {position:fixed; z-index:999; left:0; top:0; width:100%; height:100%; overflow:hidden; background:#fff}
.layer_comment .header {width:533px;
    top: 0;
    bottom: 70px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    border-left:1px solid #ddd; box-sizing:border-box; position:absolute; right:0; top:0; background:#fff; z-index:1;}
.layer_comment .header .headerBox {position: relative;
    overflow: auto; -webkit-overflow-scrolling: touch;
    padding-top:77px;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.layer_comment .header h1 {font-family: inherit;font-size: 26px;font-weight:bolder;margin: 0 0 30px 30px;/* height:100px; */line-height: 1.25;display:block;color:#000;letter-spacing: -0.05em;}
.layer_comment .header .event-info {font-family:inherit;font-size:16px;line-height: 1.5;color:#b2b2b2;padding:0 30px 30px 30px;letter-spacing: -0.025em;}
.layer_comment .header .event-info b {font-size:20px; font-weight:normal; color:#000}


.layer_comment .header .event-info dl {
    margin-bottom: 5px;
    position: relative;
}

.layer_comment .header .event-info dl dt {
    position: absolute;
    top: 0;
    left: 0;
}

.layer_comment .header .event-info dl dd {
    padding-left: 40px;
}


.layer_comment .header .commentForm {padding:0 30px 30px 30px;}
.layer_comment .header .commentForm textarea {width:100%;border:1px solid #ddd;height:130px;margin:0;padding:10px;box-sizing:border-box;font-family: inherit;}
.layer_comment .header .commentForm .loginBox {padding-top:15px;}
.layer_comment .header .commentForm .loginBox span {display:none;height:50px;line-height:50px;font-family:gulim;font-size:14px;text-align:center;border:1px solid #ddd;cursor:pointer;color:#b2b2b2;font-family: inherit;}
.layer_comment .header .commentForm .loginBox span.on {
    display:block;
    opacity:0;
    animation: loginBtn 1s forwards;
    -moz-animation: loginBtn 1s forwards;
    -webkit-animation: loginBtn 1s forwards;
}

.layer_comment .body li .contents a {
    color: #333;
    text-decoration: underline;
    font-weight:500;
    -ms-word-break: break-all;
    word-break: break-all;
}

@keyframes loginBtn {
    0% {opacity:0}
    100% {opacity:1;}
}
@-moz-keyframes loginBtn {
    0% {opacity:0}
    100% {opacity:1;}
}
@-webkit-keyframes loginBtn {
    0% {opacity:0}
    100% {opacity:1;}
}
.layer_comment .header .btn-close {z-index:1;cursor:pointer;width:21px;height:21px;position:absolute;right: 20px;top: 20px;background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/icon_button.v10.png) no-repeat -601px 0;text-indent:-100000em;overflow:hidden;}
.layer_comment .header .reload {z-index:1; position:absolute; left:30px; top:30px; cursor:pointer; width:34px; height:27px; background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/icon_button.v10.png) no-repeat -546px 0;}
.layer_comment .body {/* width:100%; *//* height:100%; *//* padding-right:533px; */padding-bottom:10px;box-sizing:border-box;background:#f3f3f3;position: absolute;top: 0;left: 0;right: 533px;bottom: 70px;}
.layer_comment .body .bodyBox {/* width:100%; *//* height:100%; */overflow-x:hidden;overflow-y:scroll;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.layer_comment .body ul {padding-top:30px;}
.layer_comment .body li {margin-right:20px;margin-bottom:16px;float:right;padding-right:30px;position:relative;width:70%;max-width:1000px;min-width: 80%;font-family:inherit;}
.layer_comment .body li:nth-child(even) {float:left; margin-left:20px; padding-left:30px;}
.layer_comment .body li div { padding:25px;border:1px solid #ddd; background:#fff; color:#b2b2b2; border-radius:10px;}
.layer_comment .body li .contents {line-height:26px; font-size:16px; font-weight:normal; display:block; margin-bottom:10px;}
.layer_comment .body li .time {color:#000; }
.layer_comment .body li .nic {color:#000; }
.layer_comment .body li i {display:block; position:absolute; top:50%; margin-top:-11px; right:19px; ;width:12px; height:22px;background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/icon_button.v10.png) no-repeat -534px 0;}
.layer_comment .body li:nth-child(even) i {left:19px; background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/icon_button.v10.png) no-repeat -522px 0;}

/* layer share */
.layer_share {position:absolute; right:141px; bottom:67px; width:72px; height:147px; z-index:1001}
.layer_share .btnLayer {display:block; background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/icon_button.v10.png) no-repeat; text-indent:-1000000em; overflow:hidden; cursor:pointer;}
.layer_share .btn_twi {background-position:-354px 0; width:72px; height:75px;}
.layer_share .btn_fac {background-position:-284px 0; width:72px; height:70px; border:1px solid #ddd;}

/* layer index */
.layer_index {position:absolute; z-index:999; left:0; top:0; width:100%; height:100%; overflow:hidden;}
.layer_index .screen {background:#000; opacity:0.8; position:absolute; width:100%; height:100%; z-index:1}
.layer_index .close {z-index:3;cursor:pointer;width:21px;height:21px;position:absolute;right: 20px;top: 20px;background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/icon_button.v10.png) no-repeat -622px 0;text-indent:-100000em;overflow:hidden;}
.layer_index .scrollBox {position:absolute; z-index:2; overflow:hidden; padding:62px 100px 132px 100px; width:100%; height:100%; box-sizing:border-box;}
.layer_index .scrollBoxp {width:100%; height:100%; overflow:hidden;}
.layer_index .scrollBoxs {width:100%; height:100%; overflow-x:hidden; overflow-y:auto;}
.layer_index .scrollBoxs::-webkit-scrollbar {background:#fff; width:0;}
.layer_index .scrollBoxs::-webkit-scrollbar-track {background:#fff}
.layer_index .scrollBoxs::-webkit-scrollbar-thumb {background:#fff}
.layer_index .scrollBoxs::-webkit-scrollbar-thumb:window-inactive {background:#fff}
.layer_index ul {padding-left:30px;}
.layer_index ul li {
    float: left;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 16.6666%;
}
.index-item {
    background: #fff;
    color: #333;
}

.index-item .tb {
    display: block;
    width:100%;
}
.index-item .index-item-desc {
    padding:20px;
    min-height:140px;
    font-family:inherit;
    word-break:keep-all;
}
.index-item .index-item-desc .no {display:block; font-size:16px; height:12px; line-height:12px; color:#000; font-weight:bold;}
.index-item .index-item-desc .name {display:block; font-size:14px; line-height:18px; margin-top:8px; color:#b2b2b2}
.index-item .index-item-desc .text {font-size:12px; margin-top:4px; color:#b2b2b2; line-height:18px;}


/* layer goods */
.layer_goods {position:absolute; z-index:999; left:0; top:0; width:100%; height:100%; overflow:hidden; background:#fff;}
.layer_goods .coverBox {box-sizing:border-box; overflow:auto; -webkit-overflow-scrolling: touch;
    scrollbar:#fff;
    scrollbar-3dLight-color: #fff;
    scrollbar-arrow-color: #fff;
    scrollbar-base-color: #fff;
    scrollbar-face-color: #fff;
    scrollbar-track-color: #fff;
    scrollbar-darkShadow-color: #fff;
    scrollbar-highlight-color: #fff;
    scrollbar-shadow-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 70px;

}
.layer_goods .coverBox::-webkit-scrollbar {background:#fff; width:0;}
.layer_goods .coverBox::-webkit-scrollbar-track {background:#fff}
.layer_goods .coverBox::-webkit-scrollbar-thumb {background:#fff}
.layer_goods .coverBox::-webkit-scrollbar-thumb:window-inactive {background:#fff}

.layer_goods .close {z-index:3;cursor:pointer;width:21px;height:21px;position:absolute;right: 20px;top: 20px;background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/icon_button.v10.png) no-repeat -580px 0;}
.layer_goods .goods {width:20%; position:relative; display:block; overflow:hidden; float:left; line-height:0; white-space:nowrap}
.layer_goods .goods img {width:100%; vertical-align:middle;}
.layer_goods .goods .vamHelper {display:inline-block; width:0; height:100%; vertical-align:middle;}
.layer_goods .goods .infoBox {position:absolute; width:100%; height:100%; left:0; top:0; color:#fff; font-weight:bold;font-family:inherit;
    animation: infoBox-re 1s forwards ease-in-out ;
    -moz-animation: infoBox-re 1s forwards ease-in-out;
    -webkit-animation: infoBox-re 1s forwards ease-in-out;
}
.layer_goods .goods .infoBox .screen {position:absolute; width:100%; height:100%; background:#000; opacity:0.8;}
.layer_goods .goods .infoBox .text {position:absolute;left:0;top:0;z-index:1;width:100%;padding: 34px;box-sizing:border-box;white-space:normal;}
.layer_goods .goods .infoBox .title {font-size: 16px;line-height: 1.3;width:100%;word-wrap:break-word;}
.layer_goods .goods .infoBox .price {display:block;font-size: 16px;line-height: 1.4;olor:#09f;margin-top:10px;}
.layer_goods .goods .infoBox .price del {display:block;color:#b2b2b2;font-size: 16px;}
.layer_goods .goods .infoBox .link {position:absolute;left: 35px;bottom: 35px;right: 35px;color:#09f;/* width:82px; */height:35px;line-height:35px;display:block;border:1px solid #09f;text-align:center;z-index:1;text-decoration: none;}
.layer_goods .goods .infoBox .coupon span {margin-top:7px;display:inline-block;color:#09f;border:1px solid #09f;line-height:30px;padding:0 10px;/* height:30px; */font-size: 14px;font-family:inherit;}
.layer_goods .goods .infoBox .coupon span b {font-family:inherit; font-size:14px;}
.layer_goods .goods:hover .infoBox {
    display:block;
    animation: infoBox 0.3s forwards ease-in-out ;
    -moz-animation: infoBox 0.3s forwards ease-in-out;
    -webkit-animation: infoBox 0.3s forwards ease-in-out;
}



@keyframes infoBox {
    0% {opacity:0}
    100% {opacity:1}
}
@-moz-keyframes infoBox {
    0% {opacity:0}
    100% {opacity:1}
}
@-webkit-keyframes infoBox {
    0% {opacity:0}
    100% {opacity:1}
}
@keyframes infoBox-re {
    0% {opacity:1}
    100% {opacity:0}
}
@-moz-keyframes infoBox-re {
    0% {opacity:1}
    100% {opacity:0}
}
@-webkit-keyframes infoBox-re {
    0% {opacity:1}
    100% {opacity:0}
}

/* layer left right */
.layer_leftGo {position:fixed; z-index:998; width:100px; height:100%; left:0; top:0;}
.layer_leftGo span {display:none; width:20px; height:30px; position:absolute; left:50%; top:50%; margin-left:-10px; margin-top:-55px; background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/left_arrow.png) no-repeat; z-index:1;}
.layer_leftGo .screen {position:absolute; width:100%; height:100%; background:#000; opacity:0}
.layer_leftGo:hover span {display:block;}
.layer_leftGo:hover .screen {
    display:block;
    animation: leftGo 1s forwards;
    -moz-animation: leftGo 1s forwards;
    -webkit-animation: leftGo 1s forwards;
}
.layer_rightGo {position:fixed; z-index:998; width:100px; height:100%; right:0; top:0;}
.layer_rightGo span {display:none; width:20px; height:30px; position:absolute; left:50%; top:50%; margin-left:-10px; margin-top:-55px; background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/right_arrow.png) no-repeat; z-index:1;}
.layer_rightGo:hover span {display:block;}
.layer_rightGo .screen {position:absolute; width:100%; height:100%; background:#000; opacity:0}
.layer_rightGo:hover .screen {
    display:block;
    animation: leftGo 1s forwards;
    -moz-animation: leftGo 1s forwards;
    -webkit-animation: leftGo 1s forwards;
}
@keyframes leftGo {
    0% {opacity:0;}
    100% {opacity:0.2;}
}
@-moz-keyframes leftGo {
    0% {opacity:0;}
    100% {opacity:0.2;}
}
@-webkit-keyframes leftGo {
    0% {opacity:0;}
    100% {opacity:0.2;}
}

/* layer controlPanel */
.controlPanel {width:18px; height:146px; position:absolute; right:39px; bottom:110px; z-index:999;}
.controlPanel .cp_right {width:18px; height:24px; cursor:pointer; display:block;}
.controlPanel .cp_left {width:18px; height:30px; cursor:pointer; display:block}
.controlPanel .cp_up {width:18px; height:31px; cursor:pointer; display:block}
.controlPanel .cp_down {width:18px; height:30px; cursor:pointer; display:block}

/* footer button */
.footer {position:fixed; left:0; bottom:0; width:100%; height:70px; background:#fff; border-top:1px solid #ddd; z-index:1000;}
.footer .btn {position:absolute; display:block; background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/icon_button.v10.png) no-repeat; width:70px; height:70px; top:0; text-indent:-1000000em; overflow:hidden; cursor:pointer;}
.footer .btn_comment {background-position:0 0; border-left:1px solid #ddd; border-right:1px solid #ddd; right:212px;}
.footer .btn_share {background-position:-71px 0; border-right:1px solid #ddd; right:141px;}
.footer .btn_index {background-position:-142px 0; border-right:1px solid #ddd; right:70px;}
.footer .btn_goods {background-position:-213px 0; right:0;}
.footer .icon_event {background:url(../icon/icon-event.png) 50% 50% no-repeat;
    -webkit-background-size: 56px auto;
    background-size: 56px auto; width:56px; height:16px; right:219px; top:-8px; z-index:2;}
.footer .btn_closeLayer {display:none; z-index:1; background:#fff !important;}
.footer .btn_closeLayer b {display:block;margin:24px auto;width: 20px;height:21px;background:url(//image.musinsa.com/showcase/romanticcrown/img_pc/icon_button.v10.png) no-repeat; background-position:-601px 0;}
.footer .btn_closeLayer.commentOn {right: 214px;display:block;border-left: 1px solid #dfdfdf;width: 68px;}
.footer .btn_closeLayer.indexOn {right:71px;display:block;}
.footer .btn_closeLayer.goodsOn {right:0;display:block;}

/* bgmPlayer */
.bgmPlayer {position:fixed;right: 352px;bottom:0;z-index:1001;border-left:1px solid #ddd;}
.bgmPlayer.play span {
    opacity:0.8;
    animation: logoRightBottom 2s forwards infinite running alternate ease-in-out ;
    -moz-animation: logoRightBottom 2s forwards infinite running alternate ease-in-out;
    -webkit-animation: logoRightBottom 2s forwards infinite running alternate ease-in-out;
}

.bgmPlayer .info {width:70px; height:70px;  text-indent:-100000em;}
.bgmPlayer .info .play {cursor:pointer;position:absolute;left:0;top: 1px;background:url(//image.musinsa.com/showcase/frizmworksgreen/img3/icon_music.png) no-repeat;display:block;width:70px;height:70px;}
.bgmPlayer .info .pause {cursor:pointer;position:absolute;left:0;top: 1px;background:url(//image.musinsa.com/showcase/frizmworksgreen/img3/icon_music.png) no-repeat;display:block;width:70px;height:70px;opacity:0.5;}
.bgmPlayer .info .paused {cursor:pointer; position:absolute; left:0; top:0; background:url(//image.musinsa.com/showcase/frizmworksgreen/img3/icon_music.png) no-repeat; display:block; width:70px; height:70px; opacity:0.5;}

@media (max-width:1680px) {
    .layer_index ul li {
        width:20%;
    }
}

@media (max-width:1440px) {
    .layer_goods .goods {
        width: 25%;
    }

    .layer_index ul li {
        width:25%;
    }

}

@media (max-width:1024px) {
    .layer_goods .goods {
        width: 33.3333333333333%;
    }

    .layer_index ul li {
        width:33.333333333333%;
    }
}


/* black */
.logoRightTop {background:url(//image.musinsa.com/showcase/2017newmusinsa/img3/right_top_b.png) no-repeat;}
.logoRightBottom {background:url(//image.musinsa.com/showcase/2017newmusinsa/img3/right_bottom_b.png) no-repeat}
.autoPlay {background-position:-643px -1px;}
.autoPlay.on {background-position:-743px 0;}
/* layer controlPanel */
.controlPanel {width:18px; height:146px; position:absolute; right:39px; bottom:110px; z-index:999;}
.controlPanel .cp_right {width:18px; height:24px; cursor:pointer; display:block;}
.controlPanel .cp_left {width:18px; height:30px; cursor:pointer; display:block}
.controlPanel .cp_up {width:18px; height:31px; cursor:pointer; display:block}
.controlPanel .cp_down {width:18px; height:30px; cursor:pointer; display:block}




/* layer btn auto play*/


.autoPlay {position:fixed;right: 282px;bottom:0;width:70px;height: 69px;overflow:hidden;background:url(//image.musinsa.com/showcase/covernatclogo/img/icon_button.v11.png) no-repeat;background-position:-843px 0;border-left:1px solid #ddd;z-index:1001;cursor:pointer;}
.autoPlay.on {background-position:-913px 0}


/*newicon*/
.bgmPlayer .info .pause,
.bgmPlayer .info .play,
.autoPlay,
.footer .btn_comment,
.footer .btn_share,
.footer .btn_index,
.footer .btn_goods,
.footer .btn_closeLayer {
    background: #fff;
}


.bgmPlayer .info .pause:after,
.bgmPlayer .info .play:after,
.autoPlay:after,
.footer .btn_comment:after,
.footer .btn_share:after,
.footer .btn_index:after,
.footer .btn_goods:after,
.footer .btn_closeLayer:after {
    position: absolute;
    top: 50%;
    left: 50%;
    background:50% 50% no-repeat;
    width: 100px;
    height: 100px;
    content:'';
    -webkit-transform: translate(-50%,-50%) scale(.7);
    -moz-transform: translate(-50%,-50%) scale(.7);
    -ms-transform: translate(-50%,-50%) scale(.7);
    -o-transform: translate(-50%,-50%) scale(.7);
    transform: translate(-50%,-50%) scale(.7);
}


.bgmPlayer .info .pause:after {
    background-image:url(../icon/music.png);
}
.bgmPlayer .info .play:after {
    background-image:url(../icon/music.png);
}
.autoPlay:after {
    background-image:url(../icon/play.png);
}
.autoPlay.on:after {
    background-image:url(../icon/pause.png);
}


.footer .btn_comment:after {
    background-image: url(../icon/comment.png);
}
.footer .btn_share:after {
    background-image: url(../icon/share.png);
}
.footer .btn_index:after {
    background-image: url(../icon/list.png);
}
.footer .btn_goods:after {
    background-image: url(../icon/cart.png);
}


.footer .btn_closeLayer:after {
    background-image: url(../icon/x.png);
}

.footer .btn_closeLayer b {
    background: none;
}