html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: 'Nanum Gothic', Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FFF;
    background-color: #000;
}

#fullscreen {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: relative;
    word-break: break-word;
}

#panotour {
    /* IE8 환경에서는 panotour.php 에서 js 로 최적화를 하고 있음 */
    width: 100%;
    height: calc(100% - 42px);
}

#panotour.flex-center-vertically {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    font-size: 1.5em;
}

#panotour.flex-center-vertically img {
    max-width: 200px;
    margin: 0 auto;
    margin-bottom: 2em;
}

#panoTourWrap {
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}


/* 상단 바 */

div.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 80px;
    /* For browsers that do not support gradients */
    /* #666666 */
    background: rgba(110, 110, 110, 0.8);
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(rgba(110, 110, 110, 0.8), transparent);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(rgba(110, 110, 110, 0.8), transparent);
    /*For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(rgba(110, 110, 110, 0.8), transparent);
    /* Standard syntax */
    background: linear-gradient(rgba(110, 110, 110, 0.8), transparent);
    text-align: left;
    padding: 0.5em;
}

div.header .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    /*background-color: #444;*/
    opacity: 0.7;
}


/* 상단바 가운데 장소명 */

div.header a {
    color: #fff;
}

div.header .placeName {
    position: relative;
    font-size: 1.5em;
    /*width: 90%;*/
}

div.header .placeName.hidden_vr_area_and_theme {
    margin-top: 0.5em;
}

div.header .placeAddress {
    position: relative;
    font-size: 0.85em;
    margin-top: 4px;
}

div.header .placeAddress .seperator {
    margin: 0 1em;
}

div.header .placeAddress .icon {
    display: inline-block;
    margin-left: 1em;
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin-right: 0.5em;
    margin-top: -3px;
    background-image: url('/layouts/look360/image/look360/categoryIcons_30.png');
}

div.header .placeAddress .icon.best {
    background-position-x: -39px;
    background-position: -39px;
}

div.header .placeAddress .icon.alchohol {
    background-position-x: -77px;
    background-position: -77px;
}

div.header .placeAddress .icon.education {
    background-position-x: -116px;
    background-position: -116px;
}

div.header .placeAddress .icon.estate {
    background-position-x: -154px;
    background-position: -154px;
}

div.header .placeAddress .icon.beauty {
    background-position-x: -192px;
    background-position: -192px;
}

div.header .placeAddress .icon.sport {
    background-position-x: -231px;
    background-position: -231px;
}

div.header .placeAddress .icon.business {
    background-position-x: -269px;
    background-position: -269px;
}

div.header .placeAddress .icon.event {
    background-position-x: -308px;
    background-position: -308px;
}

div.header .placeAddress .icon.entertainment {
    background-position-x: -346px;
    background-position: -346px;
}

div.header .placeAddress .icon.public {
    background-position-x: -384px;
    background-position: -384px;
}

div.header .placeAddress .icon.etc {
    background-position-x: -423px;
    background-position: -423px;
}


/* 왼쪽 상단의 버튼 공통 스타일 */

div.header div.historyBackBtn,
div.header div.menuBtn {
    position: absolute;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 55px;
    cursor: pointer;
    /* krpano에서 1000, 2000을 기본으로 쓰고 있기 때문에 2001로 설정. */
    z-index: 4002;
    bottom: 80px;
    right: 10px;
    top: 10px;
}


/* 왼쪽 상단의 뒤로가기 버튼 */

div.header div.historyBackBtn {
    left: 1em;
}

div.header div.historyBackBtn {
    display: none;
}


/* 오른쪽 상단의 메뉴 버튼 */

div.header div.bgGray {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #33ccff;
    box-shadow: 0 0 5px #666;
}

div.header .historyBackBtn:hover div.bgGray,
div.header div.bgGray.active {
    background-color: #0091c1;
}


/* 왼쪽 화살표가 살짝 오른쪽으로 치우친 느낌이라 바로 잡아주는 margin-left 추가 함. */

div.header i.fa.fa-chevron-left {
    margin-left: -5px;
    margin-top: 13px;
}

div.header i.fa,
div.menuRightSide div.closeX i.fa {
    position: relative;
    font-size: 1.6em;
    color: #fff;
}

div.header i.fa.active {
    color: #fff;
}

.leavePanoStoryBtn {
    position: absolute;
    bottom: -45px;
    left: 0.5em;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 38px;
    font-size: 1.6em;
    background-color: #2f2f2f;
    border-radius: 50%;
    z-index: 4001;
    cursor: pointer;
}

.leavePanoStoryBtn .leavePanoStory {}

.leavePanoStoryBtn .leavePanoStory i,
.leavePanoStoryBtn .leavePanoStory span {
    vertical-align: middle;
    font-size: 1.15em;
}

.leavePanoStoryBtn .leavePanoStory i {
    transform: rotate(180deg);
}


/* 파노스토리 전용 헤더 */

#panoStoryHeader {
    text-align: left;
    z-index: 4001;
}

#panoStoryHeader .topHeader {
    position: relative;
}

#panoStoryHeader .topHeader .placeName {
    /*
	position: absolute;
	left: 0;
	text-align: left;
	padding-left: 10px;
	font-size: 1em;
	top: 5px;
	margin-top: 0;
	font-size: 1.5em;
	text-shadow: none;
	*/
    display: inline-block;
    font-size: 1em;
    margin-top: 0;
    margin-right: 1em;
    padding: 0;
}

#panoStoryHeader .topHeader .placeAddress {
    /*
	position: absolute;
	left: 0;
	padding-left: 10px;
	top: 3em;
	display: block;
	*/
    display: inline-block;
    margin-top: 0;
}

#panoStoryHeader .topHeader .panoStoryTitle {
    font-size: 1.3em;
}

#panoStoryHeader .placeAddressForMobile {
    display: block;
    position: absolute;
    right: 0.5em;
    top: -50px;
    text-align: right;
    text-shadow: 1px 1px #999;
}

#panoStoryHeader .placeAddressForMobile a {
    display: block;
}

#panoStoryHeader .historyBackBtn,
#panoStoryHeader .menuBtn {
    position: fixed;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 3.2;
    cursor: pointer;
    /* krpano에서 1000, 2000을 기본으로 쓰고 있기 때문에 2001로 설정. */
    z-index: 4002;
    bottom: -45px;
    right: 10px;
    font-size: 1em;
    z-index: 4002;
    top: auto;
    top: initial;
}

#panoStoryHeader .menuBtn .bgGray {
    background-color: #2f2f2f;
    box-shadow: none;
}

#panoStoryHeader .panoStoryController {
    position: fixed;
    bottom: -110px;
    left: 0;
    width: 100%;
    height: 110px;
}

#panoStoryHeader .panoStoryController .controlBackgroundColor {
    background-color: #444;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 4001;
}

#panoStoryHeader .panoStoryController .control {
    padding: 0 0.5em;
    text-align: center;
}

#panoStoryHeader .panoStoryController .control>.fa {
    margin-top: 25px;
    transform: scale(1.5, 1);
    text-shadow: 1px 1px #333;
    margin-right: 0;
    z-index: 4002;
}

#panoStoryHeader .panoStoryController .control>.fa.fa-step-forward {
    margin-left: 100px;
}

#panoStoryHeader .panoStoryController .control .guide {
    display: inline-block;
    margin: 0 1em;
    font-size: 1.5em;
    position: absolute;
    top: 0;
    left: calc(50% - 20px - 24px);
    z-index: 4001;
}

#panoStoryHeader .panoStoryController .control .title {
    text-align: center;
    width: 100%;
    position: absolute;
    border: 0;
    left: 0;
    bottom: 10px;
    z-index: 4001;
}

#panoStoryHeader .panoStoryController .control .progress {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    margin: 0;
    height: 5px;
    z-index: 4001;
}

#panoStoryHeader .panoStoryController .control .fa-step-backward:hover,
#panoStoryHeader .panoStoryController .control .fa-step-forward:hover {
    color: #33ccff;
    cursor: pointer;
}

#panoStoryHeader .panoStoryController .control.waiting .fa-step-forward {
    animation: skyblueBlink_animation 1.5s infinite;
}

@keyframes skyblueBlink_animation {
    0% {
        color: #fff;
        transform: scale(1.5, 1);
    }

    35% {
        color: #3399ff;
        transform: scale(2, 1.5);
    }

    65% {
        color: #3399ff;
        transform: scale(2, 1.5);
    }

    100% {
        color: #fff;
        transform: scale(1.5, 1);
    }
}


/*#panoStoryHeader .panoStoryController .control .isPlaying{
    color: #f00;
    margin-top: 10px;
}
#panoStoryHeader .panoStoryController .control .isPlaying i.fa{
	margin-right: 0.25em;
	color: #f00;
	font-size: 1em;
}*/

#panoStoryHeader .panoStoryController .playPause,
#panoStoryHeader .panoStoryController .profileImage {
    position: absolute;
    width: 55px;
    height: 55px;
    top: 10px;
    left: -8px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 4001;
    text-align: center;
}

#panoStoryHeader .panoStoryController .profileImage .fa.fa-microphone {
    padding-top: 10px;
    color: #888;
    z-index: 4000;
    background-color: #fff;
    width: 50px;
    border-radius: 50%;
    cursor: pointer;
}

#panoStoryHeader .panoStoryController .profileImage .loading {
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: 4001;
}

#panoStoryHeader .panoStoryController .playPause {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4001;
}

#panoStoryHeader .panoStoryController .playPause .fa {
    color: #333;
    margin-top: 8px;
    margin-left: 8px;
    cursor: pointer;
    display: inline-block;
}

#panoStoryHeader .panoStoryController .playPause .fa.fa-pause {
    margin-left: 2px;
    font-size: 1.4em;
    margin-top: 12px;
}

#panoStoryHeader .panoStoryController .pulse {
    list-style-type: none;
    position: relative;
    z-index: 4000;
    top: 35px;
}

#panoStoryHeader .panoStoryController .pulse.isPlaying li {
    opacity: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    height: 103px;
    position: absolute;
    left: -32px;
    top: -50px;
    -webkit-transform: scale(.4);
    transform: scale(.4);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 103px;
    transition: opacity .2s linear;
    opacity: 1;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: guide-pulse;
    animation-name: guide-pulse;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

#panoStoryHeader .panoStoryController .pulse.isPlaying li:first-child {
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#panoStoryHeader .panoStoryController .pulse.isPlaying li:nth-child(2) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

#panoStoryHeader .panoStoryController .pulse.isPlaying li:nth-child(3) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

#panoStoryHeader .panoStoryController .pulse.isPlaying li:nth-child(4) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

#panoStoryHeader .panoStoryController .pulse.isPlaying li:nth-child(5) {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

#panoStoryHeader .panoStoryController .pulse.isPlaying li:last-child {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

@keyframes guide-pulse {
    0% {
        transform: scale(.4);
        opacity: 9;
    }

    25% {
        transform: scale(.6);
        opacity: .7;
    }

    50% {
        transform: scale(.8);
        opacity: .5;
    }

    75% {
        transform: scale(1);
        opacity: .3;
    }

    100% {
        transform: scale(1.2);
        opacity: .1;
    }
}


/* 오른쪽 사이드 메뉴 */

div.menuRightSide {
    position: absolute;
    top: 0;
    background-color: #222;
    /*
		1. 하단의 스티커 아이콘 등록 전 : 
			- 모달스타일 창이 위로 올라오는 것을 막기 위해서 1을 주고, header의 sideMenu btn때문에 3를 준다. KRPANO 때문에 2000 이상으로 만들었다.
		2. 하단의 스티커 아이콘에 숫자표시 이후 :
			- 하단의 스티커 아이콘이 파노라마썸네일 리스트에 가리는 것을 해결하기 위해서는 썸네일리스트 z-index(3000)보다 높아야 함.
			- 모바일일 경우 menuRightSize가 스티커 아이콘을 가리기 때문에 스티커 아이콘 숫자표시 z-index보다 높아야 함.
			- 따라서 4003으로 설정한다.

			- textfield z-index 값이 12000이라 12001로 올림.
	*/
    z-index: 12001;
    display: none;
    width: 100%;
    height: 100%;
    right: -100%;
}

div.menuRightSide div.closeX {
    position: absolute;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 55px;
    cursor: pointer;
    top: 0;
    right: 0;
}

div.menuRightSide div.closeX>div {
    position: absolute;
    width: 100%;
    height: 100%;
    /* box-shadow: 2px 2px 10px #666;
    background-color: #3399ff; */
}


/* div.menuRightSide div.closeX div.bgLightGray {
    background-color: #ddd;
}

div.menuRightSide div.closeX div.bgGray {
    background-color: #333;
}

div.menuRightSide div.closeX div.bgGreen {
    background-color: #009999;
}

div.menuRightSide div.closeX div.bgYellow {
    background-color: #ffc900;
}

div.menuRightSide div.closeX div.bgBlue {
    background-color: #48d1ff;
}

div.menuRightSide div.closeX div.bgWhite {
    background-color: #fff;
}

div.menuRightSide div.closeX div.bgDarkGreen {
    background-color: #588;
} */

div.menuRightSide div.head {
    font-size: 1.5em;
    color: #fff;
    text-align: center;
    /* closeX 크기 50px 과 맞추어 설정 */
    /*height: 100px;*/
    padding: 25px;
    background: #38b4ff;
}

div.menuRightSide div.head.main {
    text-align: left;
}

div.menuRightSide div.head .placeName {
    padding-right: 1em;
}

div.menuRightSide div.head .placeAdd {
    font-size: 0.7em;
    font-weight: lighter;
}

div.menuRightSide div.head button {
    display: block;
    margin: 1em auto;
    width: 150px;
}

div.menuRightSide div.body {
    /*** max-height 에 대한 내용 
		메뉴상단의 장소이름과 '파노투어관람하기'버튼 크기합이 120px임.
		IE8 환경에서는 IE8 호환을 위해서 js에서 크기를 조절함.
	***/
    height: calc(100% - 120px);
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

div.menuRightSide div.body div.menu {
    position: relative;
    background-color: #222;
    height: 80px;
    border-bottom: 2px solid #000;
    cursor: pointer;
}

div.menuRightSide div.body div.menu:hover {
    background-color: #444;
}

div.menuRightSide div.body div.menu span {
    display: inline-block;
    width: 50%;
    position: relative;
    top: 10px;
    font-size: 1.1em;
    margin-left: 1em;
    font-weight: 200;
}

div.menuRightSide div.body div.menu i.fa {
    position: absolute;
    right: 0.5em;
    top: 23px;
    font-size: 2em;
    color: #ccc;
}

div.menuRightSide div.body div.menu div.icon {
    width: 45px;
    height: 45px;
    background-image: url('/modules/vr/gui/sideMenuIcon.png');
    display: inline-block;
    vertical-align: middle;
    margin-top: 17.5px;
    margin-left: 25px;
}

div.menuRightSide div.body div.menu div.icon.intro {
    background-position-x: 0;
    background-position: 0;
}

div.menuRightSide div.body div.menu div.icon.panoStory {
    background-position-x: -45px;
    background-position: -45px;
}

div.menuRightSide div.body div.menu div.icon.sticker {
    background-position-x: -90px;
    background-position: -90px;
}

div.menuRightSide div.body div.menu div.icon.help {
    background-position-x: -135px;
    background-position: -135px;
}

div.menuRightSide div.body div.menu div.icon.setting {
    background-position-x: -180px;
    background-position: -180px;
}

div.menuRightSide div.body div.menu div.icon.gallery {
    background-position-x: -315px;
    background-position: -315px;
}

div.menuRightSide div.body div.menu div.icon.panotour {
    background-position-x: -225px;
    background-position: -225px;
}

div.menuRightSide div.body div.menu div.icon.share {
    background-position-x: -270px;
    ;
    background-position: -270px;
    ;
}

div.menuRightSide div.body div.menu div.icon.search {
    background-image: none;
    background-color: #383838;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
}

div.menuRightSide div.body div.menu div.icon.search .glyphicon-search {
    margin: 0;
}

div.menuRightSide div.body div.menu.language {
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    line-height: 43px;
    /*cursor: none;*/
    border-top: 1px solid #666;
}

div.menuRightSide div.body div.menu.language .caret {
    width: 8px;
}

div.menuRightSide div.body div.menu.language .dropdown-header span {
    top: 0;
    margin-left: 0;
}

div.menuRightSide div.body div.menu.language .filter-option {
    top: 0;
    margin-left: 0;
}

div.menuRightSide div.body div.menu.language .flagTitle {
    padding-left: 0.5em;
    padding-right: 0;
}

div.menuRightSide div.body div.menu.language .flagWrap {
    text-align: right;
    padding-left: 0;
    padding-right: 0.5em;
}

div.menuRightSide div.body div.menu.language .flagWrap .flag {
    max-width: 30px;
    height: 22.5px;
    background-size: contain;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 0 2px;
    cursor: pointer;
    padding: 1px;
    border: 1px solid #ddd;
    vertical-align: middle;
}

div.menuRightSide div.body div.menu.language .flagWrap .flag.disabled {
    filter: grayscale(100%);
    cursor: no-drop;
    opacity: 0.2;
}

div.menuRightSide div.body div.menu.language .flagWrap .flag_name {
    display: inline-block;
}

div.menuRightSide div.body div.menu.language .flagWrap .flag .activeBar {
    display: none;
}

div.menuRightSide div.body div.menu.language .flagWrap .flag:hover .activeBar,
div.menuRightSide div.body div.menu.language .flagWrap .flag.active .activeBar {
    background-color: #EAFF60;
    display: block;
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: -5px;
    border-radius: 5px;
}


/* 360포스트 숫자표시*/

div.menuRightSide div.body div.menu .panostoryCount,
div.menuRightSide div.body div.menu .panotourCount,
div.menuRightSide div.body div.menu .stickerCount {
    width: inherit;
    max-width: 20%;
    margin: 0;
    text-align: left;
    background-color: #f4aa16;
    color: #fff;
}

div.menuRightSide div.body div.menu .panotourCount {
    background-color: #6aa;
}

div.menuRightSide div.body div.menu .panostoryCount {
    background-color: #3399ff;
}

div.menuRightSide div.body div.placeIntro .contentGroup {
    color: #000;
    background-color: #EEE;
    padding: 1em;
}

div.menuRightSide div.body div.placeIntro .contentGroup .subject {
    display: none;
}

div.menuRightSide div.body div.placeIntro .contentGroup .content {}

div.menuRightSide div.placeIntro,
div.menuRightSide div.storyContainer,
div.menuRightSide div.stickerContainer,
div.menuRightSide div.panoramaSetting,
div.menuRightSide div.panoramaShare,
div.menuRightSide div.panotourList {
    background-color: #333;
    z-index: 4003;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.menuRightSide div.placeIntro .closeX.return,
div.menuRightSide div.storyContainer .closeX.return,
div.menuRightSide div.stickerContainer .closeX.return,
div.menuRightSide div.panoramaSetting .closeX.return,
div.menuRightSide div.panoramaShare .closeX.return,
div.menuRightSide div.panotourList .closeX.return {
    z-index: 4003;
    left: 0;
}

div.menuRightSide .closeX .material-icons {
    font-size: 2em;
    line-height: 1.5em;
}

div.menuRightSide div.placeIntro .closeX.return>div,
div.menuRightSide div.storyContainer .closeX.return>div,
div.menuRightSide div.stickerContainer .closeX.return>div,
div.menuRightSide div.panoramaSetting .closeX.return>div,
div.menuRightSide div.panoramaShare .closeX.return>div,
div.menuRightSide div.panotourList .closeX.return>div {
    /* background-image: url('/modules/vr/gui/menu_back.png');
    background-position: center center;
	background-repeat: no-repeat; */
}

div.menuRightSide div.placeIntro {}

div.menuRightSide div.placeIntro .placePreView {
    width: 100%;
    height: 200px;
}


/* 장소소개라는 글씨가 들어가는 부분 */

div.menuRightSide div.placeIntro .head {
    height: 90px;
    background-color: #1d9e9e;
    font-size: 1.8em;
}


/* 쉴제 장소소개가 들어가는 부분 */

div.menuRightSide div.placeIntro .infoWrap {
    background-color: #333;
    color: #ccc;
    height: 100%;
    max-height: calc(100% - 90px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

div.menuRightSide div.placeIntro .infoWrap .info {
    padding: 2.5em;
}

div.menuRightSide div.placeIntro .infoWrap .info .placeName {
    font-weight: normal;
    font-size: 1.3em;
    color: #fff;
    margin-bottom: 1em;
}

div.menuRightSide div.placeIntro .infoWrap hr {
    border-top: 1px solid #555;
    margin: 2em 0;
}

div.menuRightSide div.placeIntro .infoWrap .info>div {
    margin-bottom: .5em;
}


/* 주소 :, 테마 :, 홈페이지 : 등의 문구 */

div.menuRightSide div.placeIntro .infoWrap .info>div>span {
    display: block;
    color: #fff;
    font-size: 0.9em;
}


/* 주소, 테마, 홈페이지 내용은 한줄로 보여지도록 */

div.menuRightSide div.placeIntro .infoWrap .info>div>span {
    display: inline-block;
    width: 80px;
    vertical-align: top;
}

div.menuRightSide div.placeIntro .infoWrap .info>div.placeLicenseTo>span {
    margin-top: 10px;
}

div.menuRightSide div.placeIntro .infoWrap .info>div>div {
    display: inline-block;
    padding-left: 1em;
    font-weight: 100;
    width: calc(100% - 80px)
}

div.menuRightSide div.placeIntro .infoWrap .info>div .licenseTo {
    cursor: pointer;
}

div.menuRightSide div.placeIntro .infoWrap .info>div .licenseTo .profile {
    background-size: cover;
    background-position: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.5em;
    display: inline-block;
    background-color: #fff;
}


/* '더보기'를 제외한 일반적인 링크 */

div.menuRightSide div.placeIntro .infoWrap .info a {
    color: #ccc;
}


/* 
	'더보기'로  보이며 장소페이지로 이동시키는 링크
*/

div.menuRightSide div.placeIntro .infoWrap .info>a {
    display: block;
    margin-top: 2em;
    color: #1d9e9e;
}

div.menuRightSide div.placeIntro .infoWrap .info>a i.material-icons {
    font-size: 0.8em;
    margin-left: 0.5em;
}


/* 전체적용 padding을 storyContainer에서만 없애기. */

div.menuRightSide div.storyContainer .head {
    min-height: 90px;
    background-color: #3399ff;
    font-size: 1.5em;
    line-height: 1.5;
}

div.menuRightSide div.storyContainer .head .panostory {
    font-size: 0.7em;
    font-weight: lighter;
    display: block;
    margin-bottom: 10px;
}

div.menuRightSide div.storyContainer .head .title {}

div.menuRightSide div.storyContainer div.controller {
    text-align: center;
    padding: 0.5em 0;
    color: #fff;
}


/* stepPrev, stepForw 버튼 스타일 */

div.menuRightSide div.storyContainer div.controller button {
    display: inline-block;
    background: inherit;
    border: 0;
    height: 100%;
    width: 20%;
    font-size: 1.5em;
    background-color: transparent;
}


/* 기본 :focus 파란색 outline 없애기 */

div.menuRightSide div.storyContainer div.controller button:focus {
    outline: 0;
}

div.menuRightSide div.storyContainer div.controller button:hover {
    color: #33ccff;
}


/* stepPrev, stepForw 버튼 사이에 들어가는 스토리 갯수 */

div.menuRightSide div.storyContainer div.controller div {
    display: inline-block;
    text-align: center;
    width: 60%;
}

div.menuRightSide div.storyContainer div.controller .progress {
    margin-top: 0.5em;
    height: 20px;
    width: 100%;
    border-radius: 0;
}

div.menuRightSide div.storyContainer .storyList {
    /* height 은 panotourwrap.js 에서 계산하여 할당하도록 되었다. */
    /*overflow: auto;
    -webkit-overflow-scrolling: touch;*/
    font-weight: 200;
}

div.menuRightSide div.storyContainer .storyList .storyElement {
    background-color: #444;
    padding: 1em;
    cursor: pointer;
}

div.menuRightSide div.storyContainer .storyList .storyElement.active,
div.menuRightSide div.storyContainer .storyList .storyElement.hoverEffect {
    background-color: #ccc;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


/*
div.menuRightSide div.storyContainer .storyList .storyElement.active,
div.menuRightSide div.storyContainer .storyList .storyElement:focus,
div.menuRightSide div.storyContainer .storyList .storyElement:hover{
	background-color: #ccc;	
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
*/


/* play Icon */

div.menuRightSide div.storyContainer .storyList .storyElement i.fa {
    /*visibility: hidden;*/
    width: 35px;
    color: #555;
    vertical-align: top;
    padding-top: 3px;
}

div.menuRightSide div.storyContainer .storyList .storyElement i.fa:hover {
    color: #eee;
}


/* 스토리 제목 */

div.menuRightSide div.storyContainer .storyList .storyElement .title {
    display: inline-block;
    max-width: calc(100% - 35px);
}

div.menuRightSide div.storyContainer .storyList .storyCc {
    color: #000;
    padding: 2px 5px;
    margin-left: 1em;
    background-color: #ddd;
    position: relative;
}

div.menuRightSide div.storyContainer .storyList .storyElement .storyCc .fa-file-text-o {
    width: 15px;
}

div.menuRightSide div.storyContainer .storyList .storyElement .storyCc .fa-align-left {
    font-size: 1.2em;
}

div.menuRightSide div.storyContainer .storyList .storyElement .storyCc .fa-microphone {
    position: absolute;
    right: 0px;
    bottom: -5px;
    border: 1px solid;
    border-radius: 50%;
    padding: 1px;
    width: 20px;
    height: 20px;
    padding-top: 2px;
}

div.menuRightSide div.storyContainer .storyList .storyElementCollapse {
    padding-left: 1em;
    background-color: #000;
    font-size: 0.9em;
}

div.menuRightSide div.storyContainer .storyList .storyElementCollapse .subStoryElementTitle {
    display: inline-block;
}

div.menuRightSide div.storyContainer .storyList .storyElementCollapse .subStoryElement {
    border-bottom: 1px solid #666;
    padding: 0.7em 0;
    background-color: #333;
}

div.menuRightSide div.storyContainer .storyList .storyElementCollapse .subStoryElement.active,
div.menuRightSide div.storyContainer .storyList .storyElementCollapse .subStoryElement.hoverEffect {
    background-color: #999;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


/*
div.menuRightSide div.storyContainer .storyList .storyElementCollapse .subStoryElement.active,
div.menuRightSide div.storyContainer .storyList .storyElementCollapse .subStoryElement:focus,
div.menuRightSide div.storyContainer .storyList .storyElementCollapse .subStoryElement:hover{
	background-color: #999;
}
*/

div.menuRightSide div.storyContainer .storyList .storyElementCollapse .subStoryElement .title {
    padding-left: 3.5em;
    cursor: pointer;
}

div.menuRightSide div.storyContainer .body {}

div.menuRightSide div.storyContainer .panostoryTitle {
    text-align: center;
    padding: 0.5em;
    border-bottom: 1px solid rgb(102, 102, 102);
    font-size: 1.2em;
    background-color: #fff;
    color: #3399ff;
    overflow: hidden;
    border: 1px solid #ccc;
}

div.menuRightSide div.stickerContainer {
    background-color: #eee;
}

div.menuRightSide div.stickerContainer .head {
    height: 65px;
    background-color: #ffcc00;
    font-size: 1.8em;
}

div.menuRightSide div.stickerContainer div.controller {
    text-align: center;
    background-color: #fff;
    padding: 0 0 0.5em 0;
}

div.menuRightSide div.stickerContainer div.controller .nav {
    background-color: #ffcc00;
    margin-bottom: 0.5em;
}

div.menuRightSide div.stickerContainer div.controller .nav>li {
    display: table-cell;
    width: 1%;
}

div.menuRightSide div.stickerContainer div.controller .nav>li>a {
    color: #fff;
    font-weight: 200;
    background-color: #ffcc00;
    border: 0;
    border-bottom: 5px solid #ffcc00;
    border-radius: 0;
    margin-bottom: 2px;
    font-size: 0.95em;
    word-break: keep-all;
}

div.menuRightSide div.stickerContainer div.controller .nav>li.active>a,
div.menuRightSide div.stickerContainer div.controller .nav>li>a:hover {
    font-weight: bold;
    background-color: #ffc02d;
    border-bottom: 5px solid #fff;
}

div.menuRightSide div.stickerContainer div.controller button.addSticker,
div.menuRightSide div.stickerContainer div.controller button.addComment,
div.menuRightSide div.stickerContainer div.controller div.stickerFilter {
    /*margin: 0.25em;*/
}

div.menuRightSide div.stickerContainer div.controller button.addSticker {
    border: 0;
    float: right;
    margin-right: 1.5em;
    border-radius: 0;
}

div.menuRightSide div.stickerContainer div.controller button.addSticker .circlePen {
    display: inline-block;
    border-radius: 50%;
    background-color: #ffcc00;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-right: 0.5em;
    font-size: 1.3em;
    color: #fff;
}

div.menuRightSide div.stickerContainer div.controller button.addSticker>i.fa {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
    font-size: 2em;
    color: #fff;
    vertical-align: sub;
}

div.menuRightSide div.stickerContainer div.controller div.stickerFilter {
    float: left;
    margin-left: 1.5em;
    margin-top: 4px;
}

div.menuRightSide div.stickerContainer div.controller div.stickerFilter button {
    border-radius: 0;
}

div.menuRightSide div.stickerContainer div.controller .toggleWrap {
    display: inline-block;
    width: 90px;
}

div.menuRightSide div.stickerContainer div.controller .toggleWrap label {
    color: #999;
    font-weight: 400;
}

div.menuRightSide div.stickerContainer .stickerListWrap {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    height: 100%;
    max-height: calc(100% - 196px);
}

div.menuRightSide div.stickerContainer div.stickerList {
    color: #000;
    background-color: #EEE;
    padding: 0.5em 1em;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem {
    padding-top: 0.5em;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem:last-child {
    padding-bottom: 0.5em;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.iconGroup {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-right: 10px;
    color: #666;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.iconGroup div.icon {
    width: 40px;
    height: 40px;
    margin: 0 10px 0 5px;
    vertical-align: top;
    background-image: url('/modules/vr/gui/stickerIcon.png');
    background-position-x: 0;
    background-position: 0;
    border-radius: 50%;
    cursor: pointer;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.iconGroup div.icon.notice {
    background-position-x: 40px;
    background-position: 40px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.iconGroup div.icon.sticker {
    background-position-x: 0;
    background-position: 0;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.iconGroup span.postTime {
    font-size: 0.6em;
    text-align: center;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup {
    display: inline-block;
    width: 85%;
    /*** IE8 Fallback ***/
    width: calc(100% - 70px);
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup {
    background-color: #fff;
    cursor: pointer;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup.highLighted {
    border: 5px solid #ffcc00;
    color: #fff
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup div.subjectGroup {
    border-bottom: 1px solid #ddd;
    padding: 0.5em;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup div.subject {
    display: inline-block;
    font-size: 1em;
    font-weight: 400;
    color: #666;
    padding: 0.5em;
    width: 100%;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup div.subject .subjectContent {
    display: inline;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup div.content {
    font-size: 0.8em;
    font-weight: 200;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup .includes {
    display: inline;
    color: #666;
    float: right;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup .includes>span.label {
    font-size: 10px;
    padding: 4px 5px 3px 5px;
    background-color: #009BE4;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup .includes>span.label.notice {
    background-color: #ffcc00;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup .includes>span.label:last-child {
    margin-left: 0.5em;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.contentGroup .includes i.fa {
    margin-left: 5px;
    font-size: 1.4em;
    vertical-align: sub;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.foot {
    font-size: 0.9em;
    margin-bottom: 0.5em;
}

div.menuRightSide div.stickerContainer div.stickerPagination {
    padding-bottom: 1em;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup .info div.wroteDate {
    display: inline-block;
    margin-left: 1em;
    text-align: right;
    color: #999;
    float: right;
    font-size: 0.8em;
    margin-top: 0.3em;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.commentCount {
    cursor: pointer;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.commentCount .fa {
    font-size: 1.3em;
    margin-right: 5px;
    vertical-align: inherit;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.commentCount,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup .info div.author,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.likeCount {
    display: inline-block;
    margin-left: 1em;
    text-align: right;
    color: #666;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.commentCount,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.likeCount {
    margin-left: 0;
    margin-right: 1em;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .info .likeCount .fa-heart,
div.modal-content div.modal-header .modal-title .addonGroup div.likeCount i.fa-heart,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.likeCount i.fa-heart {
    color: red;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup .info div.author {
    margin-left: 0;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .info .likeCount a,
div.modal-content div.modal-header .modal-title .addonGroup div.likeCount a,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.likeCount a {
    color: #666;
    font-size: 1.3em;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .info .likeCount a:hover .fa,
div.modal-content div.modal-header .modal-title .addonGroup div.likeCount a:hover .fa,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.likeCount a:hover {
    color: red;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .info .likeCount .likeScore,
div.modal-content div.modal-header .modal-title .addonGroup div.likeCount span.likeScore,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.likeCount span.likeScore {
    margin-left: 0.25em;
}

div.modal-content div.modal-header .modal-title .addonGroup div.share,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.foot .share {
    display: inline-block;
    font-size: 1.5em;
    cursor: pointer;
}

div.modal-content div.modal-header .modal-title .addonGroup div.share ul,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.foot .share ul {
    background-color: #eee;
}

div.modal-content div.modal-header .modal-title .addonGroup div.share ul li,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.foot .share ul li {
    padding: 5px;
    text-align: center;
}

div.modal-content div.modal-header .modal-title .addonGroup div.share ul li img,
div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.foot .share ul li img {
    width: 25px;
    margin: 0 2.5px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.foot .share .fa {
    font-size: 0.85em;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup div.foot .share i.fa:hover {
    color: #000;
}

div.modal-content div.modal-header .modal-title .addonGroup .more {
    font-size: 1.4em;
    vertical-align: middle;
    padding-bottom: 5px;
    cursor: pointer;
    display: none;
}

div.modal-content div.modal-header .modal-title .addonGroup .more .dropdown-menu {
    right: 0;
    left: inherit;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.emptyItem {
    font-size: 1.2em;
    text-align: center;
    color: #999;
}


/* 파노라마 셋팅 전용 사이드메뉴 디자인 */

div.menuRightSide div.panoramaSetting {}

div.menuRightSide div.panoramaSetting .head {
    background-color: #666;
}


/* 설정, 보기방식 상자 디자인 */

div.menuRightSide div.panoramaSetting hr {
    border-top: 1px solid #666;
    width: 85%;
    margin: 0 auto;
}

div.menuRightSide div.panoramaSetting .settingWrap {
    max-height: calc(100% - 84px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

div.menuRightSide div.panoramaSetting .setting {
    padding: 2em;
    padding-top: 0;
}

div.menuRightSide div.panoramaSetting .viewMode {
    padding: 2em;
}

div.menuRightSide div.panoramaSetting .setting .title,
div.menuRightSide div.panoramaSetting .viewMode .title {
    font-size: 1.3em;
    margin-bottom: 10px;
}

div.menuRightSide div.panoramaSetting .radio {
    padding-left: 1em;
    margin-bottom: 1em;
    margin-top: 0;
}

div.menuRightSide div.panoramaSetting .settingElement {
    position: relative;
    padding-left: 1em;
    margin-bottom: 0.5em;
}

div.menuRightSide div.panoramaSetting .settingElement .name {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.1em;
    margin-left: 1.2em;
}

div.menuRightSide div.panoramaSetting .settingElement .icon {
    width: 23px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background: url('/modules/vr/gui/icon_panorama_setting.png');
    background-repeat: no-repeat;
    /*background-size: center center;*/
}

div.menuRightSide div.panoramaSetting .settingElement .icon.moveto {
    background-position-x: 0;
    background-position: 0;
}

div.menuRightSide div.panoramaSetting .settingElement .icon.fullscreen {
    background-position-x: -25px;
    background-position: -25px;
}

div.menuRightSide div.panoramaSetting .settingElement .icon.gyro {
    background-position-x: -50px;
    background-position: -50px;
}

div.menuRightSide div.panoramaSetting .vrMode {
    padding: 1em 2em;
}

div.menuRightSide div.panoramaSetting .vrMode .btn {
    display: none;
}

div.menuRightSide div.panoramaSetting .settingElement.btn {
    background-color: #ddd;
    display: block;
    color: #000;
    font-size: 1.2em;
    margin-bottom: 0;
}

div.menuRightSide div.panoramaSetting .settingElement .icon.webvr {
    background-position-x: -75px;
    background-position: -75px;
}


/* bootstrap toggle 버튼 스타일 */

div.menuRightSide div.panoramaSetting .settingElement div[data-toggle="toggle"] {
    position: absolute;
    right: 0;
}

div.menuRightSide div.panoramaSetting>div>.name {
    /* font-size: */
}


/* 파노라마 공유 전용 사이드메뉴 디자인 */

div.menuRightSide div.panoramaShare {
    color: #000;
    background-color: #fff;
}

div.menuRightSide div.panoramaShare .closeX i.fa {
    color: #333;
}

div.menuRightSide div.panoramaShare .head {
    color: #000;
    background-color: #fff;
    box-shadow: 0 0 5px #999;
}


/* 설정, 보기방식 상자 디자인 */

div.menuRightSide div.panoramaShare hr {
    border-top: 1px solid #ddd;
    width: 85%;
    margin: 0 auto;
}

div.menuRightSide div.panoramaShare .settingWrap {
    max-height: calc(100% - 84px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

div.menuRightSide div.panoramaShare .setting,
div.menuRightSide div.panoramaShare .viewMode {
    padding: 2em;
}

div.menuRightSide div.panoramaShare .setting .title,
div.menuRightSide div.panoramaShare .viewMode .title {
    font-size: 1.3em;
    margin-bottom: 10px;
}

div.menuRightSide div.panoramaShare .radio {
    padding-left: 1em;
    margin-bottom: 1em;
    margin-top: 0;
}

div.menuRightSide div.panoramaShare .settingElement {
    position: relative;
    padding-left: 1em;
    margin-bottom: 0.5em;
}

div.menuRightSide div.panoramaShare .settingElement .name {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.1em;
    margin-left: 1.2em;
}

div.menuRightSide div.panoramaShare .settingElement .icon {
    width: 25px;
    height: 33px;
    display: inline-block;
    vertical-align: middle;
    background: url('/modules/vr/gui/icon_panorama_setting.png');
    background-repeat: no-repeat;
    background-size: center center;
}

div.menuRightSide div.panoramaShare .settingElement .icon.moveto {
    background-position-x: 0;
    background-position: 0;
}

div.menuRightSide div.panoramaShare .settingElement .icon.fullscreen {
    background-position-x: -25px;
    background-position: -25px;
}

div.menuRightSide div.panoramaShare .settingElement .icon.gyro {
    background-position-x: -50px;
    background-position: -50px;
}


/* bootstrap toggle 버튼 스타일 */

div.menuRightSide div.panoramaShare .settingElement div[data-toggle="toggle"] {
    position: absolute;
    right: 0;
}

div.menuRightSide div.panoramaShare>div>.name {
    /* font-size: */
}


/* 파노투어 리스트 전용 사이드메뉴 디자인 */

div.menuRightSide div.panotourList {
    background-color: #222;
}

div.menuRightSide div.panotourList .head {
    background-color: #6aa;
}


/* 설정, 보기방식 상자 디자인 */

div.menuRightSide div.panotourList hr {
    border-top: 1px solid #666;
    width: 85%;
    margin: 0 auto;
}

div.menuRightSide div.panotourList #panotourItemList {
    max-height: calc(100% - 84px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

div.menuRightSide div.storyContainer .panostoryItem,
div.menuRightSide div.panotourList .panotourItem {
    position: relative;
    background-color: #222;
    height: 80px;
    border-bottom: 2px solid #000;
    cursor: pointer;
    border-spacing: 0px;
}

div.menuRightSide div.panotourList .panotourItem:hover {}

div.menuRightSide div.panotourList .panotourItem .prevImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 400px;
    background-position: center center;
    opacity: 0.2;
}

div.menuRightSide div.storyContainer .panostoryItem .name,
div.menuRightSide div.panotourList .panotourItem .name {
    display: inline-block;
    width: 80%;
    position: relative;
    font-size: 1.3em;
    font-weight: 200;
    line-height: 78px;
    margin-left: 1em;
}

div.menuRightSide div.storyContainer .panostoryItem i.fa,
div.menuRightSide div.panotourList .panotourItem i.fa {
    position: absolute;
    right: 0.5em;
    top: 23px;
    font-size: 2em;
    color: #ccc;
}

div.menuRightSide div.storyContainer .collapsing,
div.menuRightSide div.storyContainer .collapse {
    padding-left: 0.5em;
    background-color: #000;
    border-bottom: 0.5em solid #000;
}

div.menuRightSide div.storyContainer .collapsing .container,
div.menuRightSide div.storyContainer .collapse .container {
    background-color: #333;
    padding: 1em;
    width: 100%;
}

div.menuRightSide div.storyContainer .collapsing .bottom,
div.menuRightSide div.storyContainer .collapse .bottom {
    padding: 0.5em;
    text-align: right;
    background: #333;
    border-bottom: 1px solid #000;
}

div.menuRightSide div.panotourList .panotourItemCollapse {
    background-color: #000;
    padding: 5px 0 0 5px;
    color: #999;
    cursor: pointer;
    border-bottom: 5px solid #000;
}

div.menuRightSide div.panotourList .panotourItemCollapse .inner {
    background-color: #222;
    padding: 0.5em;
}

div.menuRightSide div.panotourList .panotourItemCollapse .inner .panoramaItem {
    margin-bottom: 0.5em;
}

div.menuRightSide div.panotourList .panotourItemCollapse .inner .panoramaItem .number {
    display: inline-block;
    margin-right: 0.5em;
    min-width: 22px;
}

div.menuRightSide div.panotourList .panotourItemCollapse .inner .panoramaItem .prevImg {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 80px;
    background-size: 120px;
    background-position: center center;
    vertical-align: middle;
    border-radius: 5px;
    margin-right: 0.5em;
    opacity: 0.8;
}

div.menuRightSide div.panotourList .panotourItemCollapse .inner .panoramaItem .prevImg .label {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    background-color: #33ccff;
    font-size: 0.7em;
}

div.menuRightSide div.panotourList .panotourItemCollapse .inner .panoramaItem .name {
    display: inline-block;
}

div.menuRightSide div.panotourList .panotourItemCollapse .inner .panoramaItem i.fa {
    display: inline-block;
    float: right;
    font-size: 1.5em;
    margin-right: 1em;
    margin-top: 1em;
}

div.footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 42px;
    background-color: #333;
    padding: 0 1em;
    z-index: 4002;
}

div.footer a,
div.footer a:hover,
div.footer a:active {
    color: #fff;
    cursor: pointer;
    vertical-align: super;
}

div.footer i.fa {
    cursor: pointer;
    font-size: 1.718em;
    color: #333;
    /*color: #51504f;*/
}

div.footer i.fa:hover {
    color: #fff;
}

div.footer span.serviceName {
    font-size: 1.2em;
    line-height: 42px;
    vertical-align: top;
    margin-right: 1em;
}

div.footer span.serviceName img {
    margin-bottom: 5px;
}

div.footer div.footerVrBtnGroup {
    display: inline-block;
    vertical-align: top;
}

div.footer div.footerVrBtnGroup i.fa {
    line-height: 25px;
}

div.footer div.footMenuGroup {
    float: right;
    font-size: 0.8rem;
    line-height: 42px;
}


/*
	왼쪽 전용 360포스트 스타일.
*/

div.footer .footerVrBtnGroup .footerLink {
    display: inline-block;
    margin-right: 1em;
    cursor: pointer;
    position: relative;
    color: #aaa;
    vertical-align: top;
}

div.footer .footerVrBtnGroup .footerLink:hover {
    text-decoration: underline;
    color: #fff;
}


/* 스티커 갯수가 보이도록 하는 동그라미 숫자 표시 */

div.footer .footerVrBtnGroup .footerLink .label-stickerCount {
    position: absolute;
    top: -5px;
    left: 10px;
    background-color: #ffcc00;
    z-index: 4001;
    color: #666;
}


/* SoundCloud 아이콘 위에 overlay되는 슬래시 */

div.footer .footerVrBtnGroup .footerLink span.slash {
    position: absolute;
    font-size: 1.8em;
    color: #ccc;
    top: -4px;
    left: 8px;
}


/*
	오른쪽 전용 360포스트 스타일.
*/

div.footer .footMenuGroup .footerLink {
    display: inline-block;
    margin-right: 33px;
    cursor: pointer;
    position: relative;
    color: #aaa;
    vertical-align: top;
}

div.footer .footMenuGroup .footerLink:hover {
    text-decoration: underline;
    color: #fff;
}


/* 스티커 갯수가 보이도록 하는 동그라미 숫자 표시 */

div.footer .footMenuGroup .footerLink .label-stickerCount {
    position: absolute;
    top: -5px;
    left: 10px;
    background-color: #ffcc00;
    z-index: 4001;
    color: #666;
}


/* SoundCloud 아이콘 위에 overlay되는 슬래시 */

div.footer .footMenuGroup .footerLink span.slash {
    position: absolute;
    font-size: 1.8em;
    color: #ccc;
    top: -4px;
    left: 8px;
}

div.footer .footerIcon.sound,
div.footer .footMenuGroup .footerLink.soundcloudIcon {
    background: url('/modules/vr/gui/footerIcons.png');
    width: 19px;
    height: 36.28125px;
    transform: scale(1.1578);
    margin-top: 3px;
    background-size: 400px;
    background-position-x: -240px;
    background-position: -240px;
    background-repeat: no-repeat;
    cursor: pointer;
}

div.footer .footerIcon.sound.mute,
div.footer .footMenuGroup .footerLink.soundcloudIcon.mute {
    background-position-x: -260px;
    background-position: -260px;
}

div.footer .footerIcon.sound:hover,
div.footer .footMenuGroup .footerLink.soundcloudIcon:hover {
    background-position-x: -280px;
    background-position: -280px;
}

div.footer .footerIcon.sound.mute:hover,
div.footer .footMenuGroup .footerLink.soundcloudIcon.mute:hover {
    background-position-x: -300px;
    background-position: -300px;
}

div.footer .footMenuGroup .footerLink.soundcloudIcon .soundcloudCloseBtn {
    position: absolute;
    display: none;
    top: -118px;
    right: -10px;
    z-index: 4100;
    background-color: #f5f5f5;
    border-radius: 3px;
    border-bottom-right-radius: 0;
}

div.footer .footMenuGroup .footerLink.sticker {
    display: none;
}

div.footer .footMenuGroup .footerLink.sticker i.sticker {
    color: #51504f;
    margin-top: 10px;
}

div.footer .footMenuGroup .footerLink.sticker.active i.sticker,
#footerStickerDropdown .footerLink.sticker.active i.stickerIcon,
div.footer .footMenuGroup .footerLink.sticker:hover i.sticker {
    color: #ffcc00;
}

#footerStickerDropdown>.footerLink {
    margin: 0px 15px;
}


div.footer .footMenuGroup .dropdown-menu {
    top: -75px;
    right: -3px;
    left: unset;
    padding-left: 1em;
    min-width: 160px;
    background-color: #666;
}

div.footer .footMenuGroup .dropdown-menu.extend {
    position: fixed;
    bottom: 42px;
    top: unset;
    right: unset;
    left: 0;
    width: 100%;
    border-radius: 0;
    border: 0;
    height: 42px;
    padding: 0 1em;
    padding-top: 4px;
}

div.footer .footMenuGroup .dropdown-menu.extend::after {
    display: none;
}

div.footer .footMenuGroup .dropdown-menu::after {
    display: block;
    content: '';
    position: absolute;
    bottom: -11px;
    right: 20px;
    width: 0px;
    height: 0px;
    background-color: transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 12px solid #666;
    transform: rotate(180deg);
}

div.footer .footerIconWrap {
    display: inline-block;
    vertical-align: top;
}

div.footer .footMenuGroup .dropdown-menu .footerLink.toggleDecoSticker:hover i.fa {
    color: #333;
}

div.footer .footMenuGroup .dropdown-menu .footerLink.toggleDecoSticker.active i.fa {
    color: #fff;
}

div.footer .footMenuGroup .dropdown-menu .label-stickerCount {
    top: 0px;
    left: 30px;
    background-color: #ff9800;
    color: #fff;
}

div.footer .footMenuGroup .dropdown-menu.eye-slash .label-stickerCount {
    background-color: #aaa;
}

div.footer .footMenuGroup .dropdown-menu .footerLink.sticker {
    vertical-align: sub;
}

div.footer .footMenuGroup .dropdown-menu .footerLink.sticker i.fa:hover {
    color: #333;
}

div.footer .footMenuGroup .dropdown-menu.extend .stickerController {
    display: inline-block;
}

div.footer .footMenuGroup .dropdown-menu .stickerController {
    font-size: 1.2em;
    width: calc(100% - 150px);
    margin: 0 0.5em;
    text-align: center;
    color: #333;
    display: none;
    float: right;
}

div.footer .footMenuGroup .dropdown-menu .stickerController div[data-toggle='toggle'] {
    float: left;
    margin-top: 3px;
}

div.footer .footMenuGroup .dropdown-menu .stickerController .fa {
    font-size: 2em;
    margin-top: 4px;
}

div.footer .footMenuGroup .dropdown-menu .stickerController .fa:hover {
    color: #fff;
}

div.footer .footMenuGroup .dropdown-menu .stickerController .fa-angle-left {
    float: left;
    margin-left: 0.5em;
}

div.footer .footMenuGroup .dropdown-menu .stickerController .fa-angle-right {
    float: right;
}

div.footer .footMenuGroup .seperator {
    margin-right: 1em;
    color: #444;
}

div.footer .footerIcon {
    display: inline-block;
    width: 19px;
    height: 36.28125px;
    transform: scale(1.1578);
    margin-top: 3px;
    background: url('/modules/vr/gui/footerIcons.png');
    background-size: 400px;
    background-position-x: 0;
    background-position: 0;
    background-repeat: no-repeat;
    margin-right: 33px;
    cursor: pointer;
}

div.footer .footerIcon.map {
    background-position-x: -20px;
    background-position: -20px;
}

div.footer .footerIcon.share {
    background-position-x: -40px;
    background-position: -40px;
}

div.footer .footerIcon.setting {
    vertical-align: top;
    background-position-x: -80px;
    background-position: -80px;
}

div.footer .footerIcon.help {
    background-position-x: -100px;
    background-position: -100px;
}

div.footer .footerIcon.vr {
    display: none;
    background-position-x: -320px;
    background-position: -320px;
}

div.footer .footerIcon.fullscreen {
    display: none;
    background-position-x: -360px;
    background-position: -360px;
}

div.footer .footerIcon.post {
    display: none;
    background: none;
    vertical-align: top;
}

div.footer .footerIcon.post i.fa {
    color: #51504f;
    font-size: 1.5em;
    line-height: 30px;
}

div.footer .footerIcon.active {
    background-position-x: -120px;
    background-position: -120px;
}


/* div.footer .footerIcon.map.active,
div.footer .footerIcon.map:hover { */

div.footer .footerIcon.map.active {
    background-position-x: -140px;
    background-position: -140px;
}


/* div.footer .footerIcon.share.active,
div.footer .footerIcon.share:hover { */

div.footer .footerIcon.share.active {
    background-position-x: -160px;
    background-position: -160px;
}


/* div.footer .footerIcon.setting.active,
div.footer .footerIcon.setting:hover { */

div.footer .footerIcon.setting.active {
    background-position-x: -200px;
    background-position: -200px;
}


/* div.footer .footerIcon.help.active,
div.footer .footerIcon.help:hover { */

div.footer .footerIcon.help.active {
    background-position-x: -220px;
    background-position: -220px;
}


/* div.footer .footerIcon.vr.active,
div.footer .footerIcon.vr:hover { */

div.footer .footerIcon.vr.active {
    background-position-x: -340px;
    background-position: -340px;
}


/* div.footer .footerIcon.fullscreen.active,
div.footer .footerIcon.fullscreen:hover { */

div.footer .footerIcon.fullscreen.active {
    background-position-x: -380px;
    background-position: -380px;
}


/* div.footer .footerIcon.post.active i.fa,
div.footer .footerIcon.post:hover i.fa { */

div.footer .footerIcon.post.active i.fa {
    color: #fff;
}

#socialShareDiv {
    display: inline-block;
    vertical-align: top;
    margin-right: 1em;
    text-align: center;
    padding: 20px 0;
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    height: 100%;
    max-height: calc(100% - 84px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#socialShareDiv input,
#socialShareDiv textarea {
    width: 190px;
}

#socialShareDiv textarea {
    font-size: 0.8em;
    padding: 0.5em;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    width: 210px;
    resize: none;
    position: relative;
}

#socialShareDiv .titleShare {
    margin: 0px;
}

#socialShareDiv .imgContainer {
    margin-top: 5px;
    padding: 5px 0px;
}

#socialShareDiv .imgContainer .imghover {
    width: 30px;
    margin: 0 2.5px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .socialLink,
div.modal-content div.modal-header .modal-title .socialLink,
#socialShareDiv .imgContainer .socialLink {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-image: url('/pages/img/look360_social_icons.png');
    cursor: pointer;
    margin: 0.25em;
}

#socialShareDiv .imgContainer .tooltip {
    max-width: 60px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .socialFacebook,
div.modal-content div.modal-header .socialFacebook,
#socialShareDiv .imgContainer .facebookShare {}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .socialFacebook:hover,
div.modal-content div.modal-header .socialFacebook:hover,
#socialShareDiv .imgContainer .facebookShare:hover {
    background-position-x: -30px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .socialTwitter,
div.modal-content div.modal-header .socialTwitter,
#socialShareDiv .imgContainer .twitterShare {
    background-position-x: -60px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .socialTwitter:hover,
div.modal-content div.modal-header .socialTwitter:hover,
#socialShareDiv .imgContainer .twitterShare:hover {
    background-position-x: -90px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .socialKakaoLink,
div.modal-content div.modal-header .socialKakaoLink,
#socialShareDiv .imgContainer .kakaotalkShare {
    background-position-x: -120px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .socialKakaoLink:hover,
div.modal-content div.modal-header .socialKakaoLink:hover,
#socialShareDiv .imgContainer .kakaotalkShare:hover {
    background-position-x: -150px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .socialKakaoStory,
div.modal-content div.modal-header .socialKakaoStory,
#socialShareDiv .imgContainer .kakaostoryShare {
    background-position-x: -180px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .socialKakaoStory:hover,
div.modal-content div.modal-header .socialKakaoStory:hover,
#socialShareDiv .imgContainer .kakaostoryShare:hover {
    background-position-x: -210px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .linkcopy,
div.modal-content div.modal-header .linkcopy,
#socialShareDiv .imgContainer .linkcopy {
    background-position-x: -240px;
}

div.menuRightSide div.stickerContainer div.stickerList div.stickerItem .linkcopy:hover,
div.modal-content div.modal-header .linkcopy:hover,
#socialShareDiv .imgContainer .linkcopy:hover {
    background-position-x: -270px;
}

#socialShareDiv .urlWrap {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-size: 0.7em;
    text-align: left;
    padding-left: 1em;
}

#socialShareDiv .urlWrap input {
    width: calc(100% - 1em);
}

#socialShareDiv .titleSource {
    margin: 15px 0px 10px;
}

#socialShareDiv .tab-content {
    /*max-height: calc(100% - 155px);*/
    /*overflow: auto;*/
    /*-webkit-overflow-scrolling: touch;*/
}

#socialShareDiv .embedOption {
    padding-left: 1.5em;
    padding-bottom: 5px;
    font-size: 0.7em;
    text-align: left;
    margin-top: 1em;
    font-size: 1em;
}


/*
#socialShareDiv .embedOption #panorama_embed_size,
#socialShareDiv .embedOption #panorama_embed_currentpano,
#socialShareDiv .embedOption #panorama_imageLink_currentpano{
	margin-left: 1em;
}
*/

#socialShareDiv .embedOption select {
    border: 1px solid #ddd;
    margin-left: 1em;
}

#socialShareDiv .embedOption input {
    width: inherit;
    margin-left: 1em;
}

#socialShareDiv .imageOption {
    text-align: center;
}

#socialShareDiv .imageOption>div {
    display: inline-block;
}

#socialShareDiv .imageOption input {
    width: inherit;
}

#socialShareDiv .imageOption .preview {
    width: 90px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 4px 4px 4px #ddd;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
}

#socialShareDiv .customsize {
    display: none;
    padding: 0 1em;
    margin-bottom: 5px;
}

#socialShareDiv .customsize .custom_width {
    display: inline-block;
    width: 90px;
}

#socialShareDiv .customsize .custom_height {
    display: inline-block;
    width: 100px;
}

#socialShareDiv .embedcode {
    padding: 0 1em;
    margin-bottom: 1em;
}

#socialShareDiv .embedcode textarea {
    font-size: 0.8em;
    padding: 0.5em;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    width: 100%;
    resize: none;
}

#socialShareDiv .embedcode div {
    margin-top: 1em;
    text-align: left;
    padding: 0.5em;
    font-size: 0.9em;
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#embedCode {
    position: relative;
}

#embedCode .embedCodeEnableLink {
    color: #3399ff;
    text-decoration: underline;
    cursor: pointer;
}


/*#embedCode .notSupportMsg{
	position: absolute;
    height: 100%;
    width: calc(100% - 20px);
    background-color: #999;
    top: 0;
    left: 0;
    margin-left: 0.5em;
    opacity: 0.9;
    color: #fff;
    text-shadow: 1px 1px #333;
    font-size: 1.3em;
    display: none;
}
#embedCode .notSupportMsg span{
	position: relative;
	top: 45%;
}
*/

#socialShareDiv .nav {
    padding: 0.5em;
}

#socialShareDiv .nav>li {
    display: table-cell;
    width: 1%;
}

#socialShareDiv .nav>li>a {
    font-weight: 200;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    font-size: 0.8em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

#socialShareDiv .nav>li.active>a {
    font-weight: bold;
    border-bottom: 1px solid #fff;
}

#socialShareDiv .nav>li>a:hover {}

#socialShareDiv .closeX {
    position: absolute;
    right: 0px;
    background: #fff;
    top: -66px;
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 2em;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#socialShareDiv .closeX i.fa {
    font-size: 1em;
}

div.footer div.footMenuGroup #soundCloudBgm {
    position: absolute;
    top: 100px;
    right: -10px;
    z-index: 4100;
    width: 200px;
    height: 100px;
}

div.footer div.footMenuGroup div:last-child {
    margin-right: 0;
}


/* 순수 모달창 디자인 */

div.modal {
    color: #000;
    z-index: 12003;
}

div.modal-backdrop {
    opacity: 0.85 !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 12002;
    background-color: #000;
}

#stickerModal .modal-body img,
#stickerModal .modal-footer {
    box-shadow: none;
}

#stickerModalContent .modal-body img {
    max-width: 100%;
}


/* Sticker 작성 전용 Form : */

#stickerModalContent {
    position: absolute;
    top: 15px;
    left: 0;
    color: #000;
    width: 95%;
    border: 0;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    /*max-height: 310px;*/
}

#stickerModalContent .authorGroup .profile {
    display: none;
}

#stickerModalContent .afterArrow {
    display: none;
    position: absolute;
    top: 10px;
    left: -17px;
    width: 0;
    height: 20px;
    background-color: transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 16px solid #fff;
    transform: rotate(-90deg);
}

#stickerModalContent .modal-footer .commentList {
    min-height: 105px;
    max-height: 266px;
    overflow: auto;
    font-size: 0.9em;
}


/* Help(도움말) 전용 form */

#helpModal {
    z-index: 12002;
}

#helpModal div.modal-dialog {
    height: 100%;
    width: 100%;
    margin: 0;
}

#helpModal div.modal-content {
    border: 0 !important;
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    height: 100%;
}

#helpModal div.modal-content .helpContent {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

#helpModal div.modal-content .helpContent h2 {
    margin: 0;
}

#helpModal div.modal-content .helpContent hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

#helpModal div.modal-content .helpContent .funcBlock {
    width: 50%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
    vertical-align: top;
    min-width: 250px;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap {
    width: 285px;
    margin: 0 auto 0.5em auto;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .funcName {
    display: inline-block;
    min-width: 175px;
    max-width: 210px;
    vertical-align: middle;
    font-weight: 200;
    margin-left: 0.5em;
}

#helpModal div.modal-content .helpContent .funcBlock.icon .funcWrap .funcName {
    /* 추가 아이콘에 대한 크기만큼 더 마진을 준다. */
    margin-left: calc(0.5em + 22px);
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .mouseIcon,
#helpModal div.modal-content .helpContent .funcBlock .funcWrap .footerIcon {
    width: 30px;
    height: 50px;
    margin-right: 0.5em;
    display: inline-block;
    vertical-align: middle;
    background-image: url('/modules/vr/gui/panosticker_help_mouseIcon.png');
    background-position-x: -62px;
    background-position: -62px;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .mouseIcon.middleScroll {
    background-position-x: -92px;
    background-position: -92px;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .footerIcon {
    width: 30px;
    background-image: url('/modules/vr/gui/footerIcons.png');
    background-repeat: no-repeat;
    background-position-x: -210px;
    background-position: -210px;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .footerIcon.map {
    background-position-x: -245px;
    background-position: -245px;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .footerIcon.share {
    background-position-x: -280px;
    background-position: -280px;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .footerIcon.speaker {
    background-position-x: -315px;
    background-position: -315px;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .footerIcon.setting {
    background-position-x: -350px;
    background-position: -350px;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .footerIcon.sticker {
    background-image: none;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .footerIcon.sticker i.fa {
    color: #fff;
    font-size: 30px;
    line-height: 45px;
}

#helpModal div.modal-content .helpContent .funcBlock .funcWrap .iconText {
    display: inline-block;
    min-width: 20px;
    color: #999;
}


/* 순수 모달창과 Sticker 작성 Form 공용 */

div.modal-content {
    border-top-right-radius: 0;
    z-index: 12002;
    box-shadow: 0 0px 9px rgba(0, 0, 0, .5);
    border: 0;
}

div.modal-content .modal-haederWrap {
    min-height: 170px;
    max-height: 90vh;
    overflow: hidden;
}

div.modal-content div.modal-header {
    padding: 15px;
}

div.modal-content div.modal-header button.close {
    position: absolute;
    top: -35px;
    right: 0px;
    width: 40px;
    height: 40px;
    padding-top: 7px;
    background-color: #fff;
    opacity: 1;
    font-size: 1.3em;
    font-weight: 900;
    color: #666;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    /* box-shadow: 0 0px 9px rgba(0, 0, 0, .5); */
    line-height: 1.8;
}

div.modal-content div.modal-header .closeShadow {
    top: 0px;
    right: 0;
    position: absolute;
    width: 40px;
    height: 15px;
    background-color: #fff;
}

div.modal-content div.modal-header button.close:focus {
    opacity: 1;
}

#modalInfo div.modal-content div.modal-header button.close {
    top: 5px;
}

div.modal-content div.modal-header label {
    font-size: 1rem;
}

div.modal-content div.modal-header h3 {
    font-size: 1.3em;
    font-weight: 400;
    margin: 0 0 0.5em 0;
    display: inline;
}

div.modal-content div.modal-header .checkboxs {
    display: inline;
    float: right;
}

div.modal-content div.modal-header .modal-title .subject {
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

div.modal-content div.modal-header .modal-title .authorGroup {
    display: inline-block;
}

div.modal-content div.modal-header .modal-title .authorGroup .profile {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
    background-size: cover;
    background-position: center;
    border: 1px solid #ddd;
    cursor: pointer;
}

div.modal-content div.modal-header .modal-title .authorGroup .authorWrap {
    display: inline-block;
    vertical-align: middle;
}

div.modal-content div.modal-header .modal-title .authorGroup div.wroteDate,
div.modal-content div.modal-header .modal-title .authorGroup div.author {
    display: block;
}

div.modal-content div.modal-header .modal-title .authorGroup div.author {
    cursor: pointer;
}

div.modal-content div.modal-header .modal-title .authorGroup div.wroteDate {
    color: #666;
    font-size: 0.8em;
    margin-top: 0.3em;
}

div.modal-content div.modal-header .modal-title .addonGroup {
    float: right;
    line-height: 40px;
}

div.modal-content div.modal-header .modal-title .addonGroup>div {
    display: inline-block;
    margin-left: 16px;
    text-align: right;
    color: #666;
}

div.modal-content div.modal-header .modal-title .addonGroup>div .fa {
    color: #666;
    font-size: 1em;
    cursor: pointer;
}

div.modal-content div.modal-header .modal-title .addonGroup>div .fa:hover {
    color: #000;
}

div.modal-content div.modal-header .modal-title .addonGroup>.newModal .fa {
    font-size: 1.2em;
}

div.modal-content div.modal-header .modal-title .addonGroup>.share .fa {
    font-size: 0.85em;
}

div.modal-content div.modal-header .modal-title .addonGroup div.share ul {
    bottom: inherit;
    left: inherit;
    right: 0;
}

div.modal-content div.modal-body {
    padding: 15px;
    max-height: 40vh;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    font-weight: 200;
    -ms-overflow-y: auto;
}

/* 모바일화면에서 360포스트 크기를 화면에 가장 크게 보여줄 수 있도록 크기 조정 */
@media only screen and (max-width: 425px) {
    div.modal-content div.modal-body {
        max-height: calc(100vh - 81px - 133px - 40px - 20px);
    }
}

/* Chrome, Edge 등 WebKit 기반 브라우저용 */
div.modal-content div.modal-body::-webkit-scrollbar {
    width: 10px;
    background-color: #f0f0f0;
}

div.modal-content div.modal-body::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 5px;
}

div.modal-content div.modal-body .title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 1em;
}

div.modal-content div.modal-header span.errorMsgForSbj,
div.modal-content div.modal-body span.errorMsgForCntnt {
    color: red;
    font-size: 0.8rem;
    display: block;
    font-weight: 500;
}

div.modal-content div.modal-body span.errorMsgForCntnt {
    display: none;
}

div.modal-content div.modal-body textarea {
    min-height: 150px;
    resize: none;
}

div.modal-content div.modal-body iframe {
    min-height: 300px;
}

div.modal-content div.modal-body iframe.cke_wysiwyg_frame {
    min-height: inherit;
}

div.modal-content div.modal-footer {
    /*padding : 5px 1em;*/
    padding: 0.5em;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    border-radius: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    text-align: left;
    position: relative;
    box-shadow: 0 0px 9px rgba(0, 0, 0, .5);
    background-color: #eee;
}

div.modal-content div.modal-footer::before {
    height: 10px;
    position: absolute;
    top: -11px;
    content: '';
    width: 100%;
    background-color: #fff;
    left: 0;
}

div.modal-content div.modal-footer .btn {
    width: 80px;
}

div.modal-content div.modal-footer .commentList {
    padding: 0 0.5em;
    padding-bottom: 0.5em;
}

div.modal-content div.modal-footer .commentList .commentItem {
    padding: 0.25em 0;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .profile {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    border: 1px solid #ccc;
    cursor: pointer;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .content {
    display: inline-block;
    min-height: 35px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 20px;
    padding: 8px 1em;
    font-size: 0.9em;
    max-width: calc(100% - 35px - 45px);
}

div.modal-content div.modal-footer .commentList .commentItem .comment .content a {
    margin-right: 1em;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .more {
    display: inline-block;
    color: #ccc;
    vertical-align: middle;
    margin-left: 5px;
    cursor: pointer;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .more.open,
div.modal-content div.modal-footer .commentList .commentItem .comment:hover .more {
    color: #666;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .more .dropdown-menu {
    left: inherit;
    right: 0;
    min-width: inherit;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .info {
    padding-left: 4em;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .info .likeCount {
    display: inline-block;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .info .likeCount a {
    font-size: 1em;
}

div.modal-content div.modal-footer .commentList .commentItem .comment .info .wroteDate {
    display: inline-block;
    color: #999;
    font-size: 0.8em;
    /*margin-left: 1em;*/
}

div.modal-content div.modal-footer .commentList .commentCountWrap {
    text-align: right;
    margin-top: 0.5em;
    font-size: 0.9em;
}

div.modal-content div.modal-footer .commentList .loadMore {
    display: none;
    float: right;
    font-size: 0.9em;
    /*margin-bottom: 0.5em;
    margin-right: 0.5em;*/
}

div.modal-content div.modal-footer .commentInputWrap {
    padding: 0 0.5em;
    clear: both;
    font-size: 0.9em;
    position: relative;
}

div.modal-content div.modal-footer .commentInputWrap .profile {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}

div.modal-content div.modal-footer .commentInputWrap input {
    width: calc(100% - 50px);
    display: inline-block;
    border-radius: 20px;
    border-color: #ccc;
    height: 35px;
    padding: 0 1em;
    color: #000;
    font-size: 1em;
    vertical-align: middle;
    padding-right: 3.5em;
}

div.modal-content div.modal-footer .commentInputWrap .fa-paper-plane {
    display: none;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: absolute;
    right: 1.2em;
    font-size: 1.5em;
    transform: rotate(45deg);
    color: #009BE4;
    opacity: 0.6;
    cursor: pointer;
    padding: 5px;
    top: 0;
}

div.modal-content div.modal-footer .commentInputWrap .fa-paper-plane:hover {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}


/* Wobble Horizontal */

@-webkit-keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px) rotate(45deg);
        transform: translateX(8px) rotate(45deg);
    }

    33.3% {
        -webkit-transform: translateX(-6px) rotate(45deg);
        transform: translateX(-6px) rotate(45deg);
    }

    49.95% {
        -webkit-transform: translateX(4px) rotate(45deg);
        transform: translateX(4px) rotate(45deg);
    }

    66.6% {
        -webkit-transform: translateX(-2px) rotate(45deg);
        transform: translateX(-2px) rotate(45deg);
    }

    83.25% {
        -webkit-transform: translateX(1px) rotate(45deg);
        transform: translateX(1px) rotate(45deg);
    }

    100% {
        -webkit-transform: translateX(0) rotate(45deg);
        transform: translateX(0) rotate(45deg);
    }
}

@keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px) rotate(45deg);
        transform: translateX(8px) rotate(45deg);
    }

    33.3% {
        -webkit-transform: translateX(-6px) rotate(45deg);
        transform: translateX(-6px) rotate(45deg);
    }

    49.95% {
        -webkit-transform: translateX(4px) rotate(45deg);
        transform: translateX(4px) rotate(45deg);
    }

    66.6% {
        -webkit-transform: translateX(-2px) rotate(45deg);
        transform: translateX(-2px) rotate(45deg);
    }

    83.25% {
        -webkit-transform: translateX(1px) rotate(45deg);
        transform: translateX(1px) rotate(45deg);
    }

    100% {
        -webkit-transform: translateX(0) rotate(45deg);
        transform: translateX(0) rotate(45deg);
    }
}

#modalInfo .modal-body img {
    width: 100%;
}

#modalInfo .modal-body a {
    color: #33ccff;
}

#modalInfo .modal-footer {
    text-align: right;
}

#look360Alert .alertItem.alert-danger a {
    color: #a94442;
}

#look360Alert .alertItem.alert-danger:hover {
    background-color: #FFB4B3;
}

#look360Alert .alertItem.alert-default {
    color: #fff;
    background-color: #333;
    left: 10%;
    border: 2px solid #666;
}

#look360Alert .alertItem.alert-default:hover {
    background-color: #666;
}

#touchBtnForIos .modal-dialog {
    margin-top: 0;
}

#touchBtnForIos .modal-content {
    box-shadow: none;
    border: 0;
    text-align: center;
    background-color: transparent;
}

#touchBtnForIos .modal-content button {
    padding: 1em;
}

#touchBtnForIos .modal-content button span,
#touchBtnForIos .modal-content button i {
    vertical-align: middle;
}

#ownerStickerTab .label-stickerCount,
#sticker360Tab .label-stickerCount,
#stickerTab .label-stickerCount {
    margin-left: 0.5em;
    background-color: #ff9800;
    color: #fff;
    position: absolute;
    top: -5px;
    right: 5px;
    z-index: 1;
}

#searchModal .modal-dialog {
    max-width: 700px;
}

#searchModal .searchContent {
    background-color: transparent;
    box-shadow: none;
}

#searchModal .searchContent .nav {
    margin-bottom: 1em;
}

#searchModal .searchContent .toggle {
    margin-bottom: 0.5em;
}

#searchModal .searchContent .toggle-on,
#searchModal .searchContent .toggle-off {
    line-height: 35px !important;
    font-size: 16px;
}

#searchModal .searchContent .noResult {
    background: #333;
    padding: 1em;
    color: #fff;
}

#searchModal .modal-header {
    border: 0;
}

#searchModal .modal-header .close {
    color: #fff;
    opacity: 0.8;
}

#searchModal .modal-header:hover .close {
    opacity: 1;
}

#search_look360Wrap {
    border: 5px solid #eee;
    border-radius: 5px;
    background-color: #fff;
    transition: all 1s;
}

#search_look360Wrap.panoSearch {}

#searchResultPanoList {
    max-width: 960px;
    margin: 0 auto;
    color: #666;
    padding: 1em;
}

#searchResultPanoList .panoCard {
    width: calc(33.3% - 20px);
    display: inline-block;
    background: #ddd;
    cursor: pointer;
    margin: 10px;
    overflow: hidden;
    vertical-align: top;
}

#searchResultPanoList .panoCard:hover .preview {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    /* IE 9 */
}

#searchResultPanoList .panoCard .preview {
    background-size: cover;
    background-position: center;
    transition: all 0.5s;
    padding-top: 56.25%;
}

#searchResultPanoList .panoCard .title {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
    padding: 5px;
}

#searchResultPanoList .panoCard .title a {
    color: #000;
    white-space: nowrap;
}

#search_look360 {
    height: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 0;
    background-color: #fff;
    transition: none;
    box-shadow: none;
    font-size: 1.1em;
    padding-right: 1em;
}

#search_look360_addon {
    background-color: #fff;
    border: 0;
    font-size: 1.5em;
    /* color: #666; */
    color: #00a0e9;
    cursor: pointer;
}

#search_look360_addon .glyphicon {
    vertical-align: bottom;
}

.deleteSearchInput {
    color: #bbb;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ddd;
    vertical-align: middle;
    float: right;
    position: absolute;
    right: 45px;
    top: 12px;
    line-height: 20px;
    text-align: center;
    font-size: 15px;
    padding-left: 1px;
    cursor: pointer;
    display: none;
    z-index: 3;
}

#suggestion-box {
    font-size: 16px;
    width: 100%;
    max-width: 700px;
    border: 1px solid #ddd;
    display: none;
    top: 38px;
    left: 8px;
    background-color: #fff;
}

#suggestion-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 10;
}

#suggestion-box li {
    font-size: 13px;
    font-weight: 200;
    color: #999;
    padding: 10px;
    /*padding-left: 50px;*/
    background: #fff;
    border-bottom: #f0f0f0 1px solid;
    height: 3em;
    line-height: 1em;
    cursor: pointer;
    display: block;
    position: relative;
}

#suggestion-box li:hover,
#suggestion-box li.active {
    background: #ddd;
    display: block;
}

#suggestion-box li .type {
    position: absolute;
    right: 5px;
    font-weight: 200;
}

#suggestion-box .highLight {
    color: red;
    font-weight: 700;
}

#_modal_on_::after {
    content: 'X';
    position: absolute;
    top: -34px;
    right: 0;
    width: 35px;
    height: 35px;
    background-color: #fff;
    padding: 8px 12px;
    cursor: pointer;
}


/* ckEditor ImagePreviewBox style */
.cke_editor_stickerContent_dialog .cke_dialog {
    z-index: 20000 !important;
}

.cke_dialog .ImagePreviewBox {
    /*max-width: 150px;*/
}

.cke_dialog .ImagePreviewBox img {
    max-width: 100%;
}


/* ckEditor Border-raius */

.cke_chrome {
    border-radius: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 0;
    padding: 0;
}

.cke_contents {
    border-radius: 0;
    border: 1px solid #ddd;
    border-top: 0;
}

.stickerPagination .pagination {
    margin: 0;
}

.stickerPagination .pagination>li>a,
.stickerPagination .pagination>li>span {
    color: #ffcc00;
    cursor: pointer;
}

.stickerPagination .pagination>.active>a,
.stickerPagination .pagination>.active>a:hover,
.stickerPagination .pagination>.active>span,
.stickerPagination .pagination>.active>span:hover {
    background-color: #ffcc00;
    border-color: #ffcc00;
    color: #fff;
}

#qrCode {
    position: relative;
}

#qrCode .qrLogo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -25%);
    background-image: url(/favicon/favicon-60x60.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 60px;
    height: 60px;
    display: none;
}

#qrCode .btnWrap {
    margin-top: 1em;
}

#qrcodeCanvas {
    padding-top: 2em;
}


/* lightbox plugin style */

.lightboxOverlay {
    z-index: 19999;
}

.lightbox {
    z-index: 20000;
}


/* 파노투어 textfield */

.pano_info_after_arrow::after {
    width: 0;
    height: 20px;
    background-color: transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 12px solid #fff;
    content: '';
    position: absolute;
    transform: rotate(180deg);
    top: 26px;
}

.fire {
    animation: burningAnimation 1s ease-in-out infinite alternate;
    -moz-animation: burningAnimation 1s ease-in-out infinite alternate;
    -webkit-animation: burningAnimation 1s ease-in-out infinite alternate;
    -o-animation: burningAnimation 1s ease-in-out infinite alternate;
}

.burn {
    animation: burningAnimation .65s ease-in-out infinite alternate;
    -moz-animation: burningAnimation .65s ease-in-out infinite alternate;
    -webkit-animation: burningAnimation .65s ease-in-out infinite alternate;
    -o-animation: burningAnimation .65s ease-in-out infinite alternate;
}

@keyframes burningAnimation {
    0% {
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
    }

    100% {
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #fefcc9, -20px -20px 40px #feec85, 22px -42px 60px #ffae34, -22px -58px 50px #ec760c, 0 -82px 80px #cd4606, 10px -90px 80px #973716;
    }
}

@-moz-keyframes burningAnimation {
    0% {
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
    }

    100% {
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #fefcc9, -20px -20px 40px #feec85, 22px -42px 60px #ffae34, -22px -58px 50px #ec760c, 0 -82px 80px #cd4606, 10px -90px 80px #973716;
    }
}

@-webkit-keyframes burningAnimation {
    0% {
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
    }

    100% {
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #fefcc9, -20px -20px 40px #feec85, 22px -42px 60px #ffae34, -22px -58px 50px #ec760c, 0 -82px 80px #cd4606, 10px -90px 80px #973716;
    }
}

@-o-keyframes burningAnimation {
    0% {
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
    }

    100% {
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #fefcc9, -20px -20px 40px #feec85, 22px -42px 60px #ffae34, -22px -58px 50px #ec760c, 0 -82px 80px #cd4606, 10px -90px 80px #973716;
    }
}

.panoStoryIntroWrap .mfp-container .mfp-arrow,
.panoStoryIntroWrap .mfp-close {
    z-index: 4046;
}

@media only screen and (max-width: 425px) {
    div.footer .footerIcon.share {
        display: none;
    }

    div.footer .footerIcon.setting {
        margin-right: 1em;
    }
}

@media only screen and (max-width: 465px) {
    div.footer .footerIcon.help {
        display: none;
    }

    div.footer .footerIcon.share {
        margin-right: 1em;
    }
}

@media only screen and (min-width: 678px) {
    #socialShareDiv .imageOption .preview {
        width: 180px;
        height: 180px;
    }

    div.menuRightSide div.body div.menu.language .flagTitle {
        padding-right: 15px;
        padding-left: 15px;
    }

    div.menuRightSide div.body div.menu.language .flagWrap {
        padding-right: 15px;
        padding-left: 15px;
    }

    div.menuRightSide div.body div.menu.language .flagWrap .flag {
        max-width: 35px;
        height: 26.25px;
    }

    #modalInfo .modal-body img {
        max-width: 350px;
        float: left;
        margin-right: 1em;
        margin-bottom: 1em;
    }

    #modalInfo .modal-body img.fullWidth {
        max-width: none;
    }
}

@media only screen and (min-width: 848px) {
    div.header {
        text-align: center;
    }

    #normalHeader div.historyBackBtn,
    #normalHeader div.menuBtn {
        position: absolute;
        top: 15px;
        right: 1em;
    }

    div.header div.historyBackBtn {
        display: block;
    }

    div.header .placeName {
        margin: 0 auto;
    }

    /*	#panoStoryHeader .placeName{
		top: 0;
		margin-top: 0;
		font-size: 1.5em;
		text-shadow: none;
	}
	#panoStoryHeader .placeAddress{
	    top: 2.5em;
	    display: block;
	}*/
    #panoStoryHeader .placeAddressForMobile {
        display: none;
    }

    /*
	#panoStoryHeader .panoStoryController{
		position: relative;
		bottom: 0px;
		width: initial;
		background-color: transparent;
		height: 80px;
	}
	#panoStoryHeader .panoStoryController .control .guide{
		position: relative;
		left: 0;
	}
	#panoStoryHeader .panoStoryController .control > .fa{
		margin-top: 25px;
		z-index: 4001;
	}
	#panoStoryHeader .panoStoryController .control > .fa.fa-step-forward{
		margin-left: 0;
	}
	#panoStoryHeader .panoStoryController .control .title{
	    margin-top: 1.5em;
	    padding: 0;
	    text-shadow: 1px 1px #666;
	    bottom: -15px;
	}
	#panoStoryHeader .panoStoryController .controlBackgroundColor{
		display: none;
	}
	#panoStoryHeader .panoStoryController .playPause,
	#panoStoryHeader .panoStoryController .profileImage{
		top: -25px;
	}
	#panoStoryHeader .panoStoryController .playPause{
	    top: 0;
	}
	#panoStoryHeader .panoStoryController .pulse{
		top: 0;
	}



	.leavePanoStoryBtn{
		bottom: 2.5em;
	}
	.leavePanoStoryBtn .leavePanoStory{
	    border: 2px solid #fff;
	    border-radius: 4px;
	    padding: 0.25em;
	}



*/
    div.menuRightSide {
        height: calc(100% - 220px);
        max-height: calc(100% - 70px);
        min-height: calc(100% - 220px);
        max-width: 400px;
    }

    div.menuRightSide div.closeX {
        /*top: 15px;
		left: -25px;*/
    }

    div.menuRightSide div.closeX>div {
        /*border-radius: 50%;*/
    }

    /* 사이드메뉴의 탭 글씨크기 */
    div.menuRightSide div.stickerContainer div.controller .nav>li>a {
        font-size: 1em;
    }

    div.menuRightSide div.stickerContainer div.stickerList div.stickerItem div.stickerContentGroup {
        max-width: 353px;
        /*** IE8 Fallback ***/
    }

    #helpModal div.modal-content .helpContent .funcBlock {
        display: inline-block;
    }

    #helpModal div.modal-content .helpContent .funcBlock .funcWrap {
        margin-right: 0;
    }

    #helpModal div.modal-content .helpContent .funcBlock .funcWrap .mouseIcon {
        width: 31px;
        background-position-x: 0px;
        background-position: 0px;
    }

    #helpModal div.modal-content .helpContent .funcBlock .funcWrap .mouseIcon.middleScroll {
        background-position-x: -31px;
        background-position: -31px;
    }

    #stickerModalContent {
        width: 100%;
        max-width: 420px;
    }

    #stickerModalContent .afterArrow {
        display: block;
    }

    .cke_dialog .ImagePreviewBox {
        max-width: auto;
        max-width: initial;
    }

    .panoStoryIntroWrap .mfp-container .mfp-arrow {
        display: block;
    }
}