@charset "utf-8";

/* ======= 뷰어 ======= */
.viewerWrap {display:none; z-index:5; position:relative; top:-1px; left:0; right:0; flex:none; width:100%; height:800px; background-color:#222;}
.viewerWrap .side-menu {z-index:5; position:absolute; top:0; left:-349px; bottom:0; width:349px; background-color:#292929; transition:all 0.4s;}
.viewerWrap .side-menu .scroll-wrap {overflow:auto; height:100%; padding:30px 0 30px 22px;}
.viewerWrap .side-menu .scroll-wrap::-webkit-scrollbar-thumb {background-color:#404040;}
.viewerWrap .side-menu li {padding:6px 0;}
.viewerWrap .side-menu a {position:relative; padding-left:20px; color:#fff; font-size:1.4rem; transition:all 0.3s;}
.viewerWrap .side-menu a:hover {color:rgba(255, 255, 255, .7)}
.viewerWrap .side-menu ul>li>a::before,
.viewerWrap .side-menu ul>li>a::after {content:''; position:absolute;  left:0;}
.viewerWrap .side-menu ul>li>a::before {top:10px; left:5px; width:7px; height:1px; background-color:#6e6e6e;}
.viewerWrap .side-menu ul>li>a::after {top:7px; left:8px; width:1px; height:7px; background-color:#6e6e6e;}

.viewerWrap .side-menu ul ul {display:none; margin-top:6px; margin-left:26px;}
.viewerWrap .side-menu ul ul>li>a {padding:0 0 0 10px; display:block;}/*230323*/
.viewerWrap .side-menu ul ul>li>a::before {top:10px; left:0; width:2px; height:2px; background-color:#6e6e6e;}
.viewerWrap .side-menu ul ul>li>a::after {display:none;}
.viewerWrap .side-menu li.active>a::after {display:none;}

.viewerWrap .side-menu .btn-close {position:absolute; top:0; right:-63px; padding:20px; background-color:rgba(34, 34, 34, .5); cursor:pointer;}
.viewerWrap .side-menu .btn-close .inner {width:23px; padding:0; color:#c4c4c4; font-size:1.1rem;}
.viewerWrap .side-menu .btn-close .inner>div {margin-top:9px; text-align:center;}

.viewerWrap .side-menu .btn-close .hide {display:none;}

.viewerWrap .side-menu.active {left:0;}
/*  */
.viewerWrap .view-area {position:relative; height:calc(100% - 46px);}
.viewerWrap .view-area .page {z-index:10; position:absolute; top:7px; right:7px;}
.viewerWrap .view-area .page>span {padding:0 2px; color:#fff; font-family:'ntsr'; font-size:1.2rem;}

.viewerWrap .view-area>.inner {opacity:1; position:relative; max-width:100%; height:100%; padding:0 10px;  overflow:hidden; text-align:center;}/*230323*/
.viewerWrap .view-area img {display:block; margin:10px auto; max-width:100%; max-height:735px;} /*230323*/
.viewerWrap .view-area img.two-p {display:inline-block; margin:10px auto; max-width:calc(50% - 10px); max-height:735px;} /*230323*/
/*  */
.viewerWrap .mCSB_scrollTools {right:7px;}
.viewerWrap .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {width:1px; background-color:#595959; opacity:1; background-image:none;}
.viewerWrap .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width:17px; height:6px; background-color:#6ea115; border-radius:2px;}
.viewerWrap .mCSB_scrollTools .mCSB_draggerContainer {top:30px;}


/*  */
.viewerWrap .item-fnc {z-index:3; position:relative; display:flex; justify-content:center; height:46px; background-color:#333;}
.viewerWrap .item-fnc .item {position:relative; display:flex; align-items:center; padding:0 12px;}
.viewerWrap .item-fnc .item:not(:last-child)::after {content:''; position:absolute; top:50%; right:0; transform:translateY(-50%); width:1px; height:16px; background-color:#606060;}
.viewerWrap .item-fnc .item button {margin:0 8px;}
.viewerWrap .item-fnc .item img {height:19px;}
.viewerWrap .item-fnc .item.mv button {margin:0 14px;}

.viewerWrap .item-fnc .pp {position:relative; display:flex; height:100%;}
.viewerWrap .item-fnc .pp button {display:flex; align-items:center;}
.viewerWrap .item-fnc .btn-loc img {width:15px;}
.viewerWrap .item-fnc .btn-url img {height:8px;}

.viewerWrap .item-fnc .pp-cmn {display:none; position:absolute; bottom:41px; left:50%; transform:translateX(-50%); padding:7px 10px; background-color:#434343; border:1px solid #6b6b6b; border-radius:4px;}
.viewerWrap .item-fnc .pp-cmn::before {content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); display:inline-block; width:0; height:0; border-style:solid; border-width:5px; border-color:#6b6b6b transparent transparent transparent;}

.viewerWrap .item-fnc .btn-loc .pp-cmn {width:140px;}
.viewerWrap .item-fnc .btn-url .pp-cmn {width:90px;}
.viewerWrap .item-fnc .btn-sns .pp-cmn {width:60px; text-align:center;}
.viewerWrap .item-fnc .btn-sns .pp-cmn img {height:initial;}

.viewerWrap .item-fnc .pp-cmn li {padding:3px 0;}
.viewerWrap .item-fnc .pp-cmn a {color:#bdbdbd; font-size:1.1rem; transition:all 0.2s;}
.viewerWrap .item-fnc .pp-cmn a:hover {color:#fff;}

/*  multiArea 0113yu */
.viewerWrap .btn-wrap-close {z-index:5; position:absolute; top:20px; right:30px; padding:5px;}

.tit-loc-link {display:flex; align-items:center; height:70px; padding:18px 60px 18px 18px;}
.tit-loc-link ul {display:flex; align-items:center; color:#fff;}
.tit-loc-link ul>li:not(:last-child) {padding-right:12px; margin-right:5px; background:url('../multi/images/sub/ico_loc_arr.svg') no-repeat right center;}
.tit-loc-link .btn-view {margin-left:24px; padding:7px 14px; color:#8bd2d6; font-size:1.4rem; font-weight:bold; background-color:#303a4a; border:1px solid #727272; border-radius:4px;}
.tit-loc-link .btn-view:hover {color:#fff;}
.tit-loc-link + .inner {height:calc(100% - 70px) !important;}

/*  */
.multiArea .viewerWrap .view-area {height:calc(100% - 116px);}
.multiArea .item-wrap {display:flex; align-items:center; height:100%;}
.multiArea .item-wrap img {max-height:100%;}
 /* */
.multiArea .viewerWrap.video {height:auto;}
.multiArea .viewerWrap.video .video-cont-wrap {position:relative; display:block;}
.multiArea .viewerWrap.video .video-cont-wrap .embed-youtube {padding-bottom:47.7%}

@media (max-width: 767px) {
    /* viewerWrap */
    .viewerWrap {height:562px;}
    .viewerWrap .side-menu {left:-265px; width:265px;}
    .viewerWrap .side-menu .btn-close {right:-39px; padding:10px 8px;}
    .viewerWrap .side-menu .btn-close .inner {width:23px;}
    .viewerWrap .side-menu .btn-close .inner>div {margin-top:5px;}

    .viewerWrap .view-area {height:calc(100% - 32px);}
	.viewerWrap .view-area img {max-height:510px;} /*230323*/
    .viewerWrap .mCSB_inside>.mCSB_container {margin-right:0;}
    .viewerWrap .mCSB_scrollTools {right:0;} 

    .viewerWrap .item-fnc {height:32px; padding:0 8px;}
    .viewerWrap .item-fnc .item {padding:0 5px;}
    .viewerWrap .item-fnc .item img {height:14px;}
    .viewerWrap .item-fnc .item button {margin:0 5px;}
    .viewerWrap .item-fnc .item.mv button {margin:0 6px;}
    .viewerWrap .item-fnc .btn-url img {height:8px;}

    /* multiArea 0113yu 0113yu */
    .tit-loc-link {padding:8px 6px; height:45px;}
    .tit-loc-link ul {display:none;}
    .tit-loc-link .btn-view {margin-left:0; padding:5px 7px;}

    .multiArea .viewerWrap .view-area {height:calc(100% - 77px);}

    .viewerWrap .btn-wrap-close {top:8px; right:8px;}
}