@charset "UTF-8"; /*--------------------------------------------------------- 리더기전용 ---------------------------*/
.sr-only { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }


/*--------------------------------------------------------- FLEX ---------------------------*/
.flex { display:flex; }
.flex-c-all { display:flex; align-items:center; justify-content:center; }
.flex-c-space { display:flex; align-items:center; justify-content:space-between; }

.flex-h-c { display:flex; align-items:center; }
.flex-space { display:flex; justify-content:space-between; }

.flex-txt-c a { display:flex; align-items:center; justify-content:center; }

.flex-end {align-items: flex-end;}

/*--------------------------------------------------------- FORM COMMON ---------------------------*/
/*---- 공통 ----*/
input:not([type=checkbox],[type=radio],[type=range]),
textarea,
button,
select{
    /* -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;  */
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    outline: none;
}

/* 자동완성 */
input:-webkit-autofill,
input:-internal-autofill-selected{
	-webkit-box-shadow:0 0 0 30px #f4f4f4 inset;
	-webkit-text-fill-color:#000000;
}


input::-moz-focus-inner,
button::-moz-focus-inner{
    border:0;
    padding:0;
}

/* readonly & disabled */
input[readonly],
input[disabled],
input[type="checkbox"]:disabled + label::before,
input[type="radio"]:disabled + label::before{
	background-color:#F7F7F7 !important;
	cursor:default;
    color:#232323 !important;
}

input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label{color:#ccc !important;}

input[type="checkbox"]:disabled + label::before,
input[type="radio"]:disabled + label::before{border-color:#a2a2a2 !important;}


::placeholder{
	color:#bababa;
    font-size:inherit;
    font-weight:400;
}
/* input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
select,
.txt-box,
.attach__btn { width:100%; border-radius:3px; border:1px solid #e4e4e4; font-size:14px; color:#232323; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input + button,
select { height:50px; padding:0 15px; } */

textarea { display:block; padding:6px 3px 6px 9px; width:100%; min-height:100px; resize:none; line-height:1.5; font-size:inherit; }
textarea::-webkit-scrollbar { width:6px; height:6px; }
textarea::-webkit-scrollbar-thumb { background:#a7a7a7; }


/*---- 분리된 input ----*/
.input-sep { display:flex; align-items:center; }
.input-sep .input-hyphen { width:28px; height:28px; padding:0 6px; text-align:center; }

/* input + button */
.input-btn { display:flex; align-items:center; }
.input-btn input + button { margin-left:8px; }
.input-btn input[disabled="disabled"].attach__tit { color:#000 !important; }


/*---- row ----*/
.input-row:not(:last-child) { margin-bottom:10px; }
/* .input-row input:not(:last-child) { margin-bottom:10px; } */


/*---- email ----*/
.input-email input[type="text"].input-email__id { max-width:150px; }
.input-email input[type="text"].input-email__add,
.input-email input[type="text"].input-email__add + select { max-width:180px; }
.input-email input[type="text"].input-email__add + select { margin-left:8px; }


/*---- tel ----*/
.input-sep.input-tel select,
.input-sep.input-tel input { max-width:117px; }


/*---- select-required::첫번째 옵션 숨기기 ----*/
.select-required > select > option[value=""][disabled] { display:none; }
/* .select-required > select:required:invalid { color:#a2a2a2; }  */
.select-required > select > option { color:#000; }


/*---- select:disabled ----*/
select:disabled {background-color: #f7f7f8;color:#888;}




/*---- date ----*/
input[type="date"] { max-width:180px; }
input[type="datetime-local"] { max-width:260px; }


/*---- datepick ----*/
.datepick input { max-width:180px; }


/*---- dateTime ----*/
.date-time input { max-width:260px; }


/*---- time ----*/
input[type="time"],
.input-time input { max-width:180px; }


/*---- textbox ----*/
.txt-box { position:relative; padding-bottom:26px; }
.txt-box__count { position:absolute; bottom:6px; right:9px; font-size:13px; }


/*---- 파일첨부 ----*/
.attach__btn { position:relative; width:80px; font-size:15px; border:none; }
.attach__input { position:absolute; top:0; right:0; height:100%; cursor:pointer; opacity:0; filter:alpha(opacity=0); -ms-filter:"alpha(opacity=0)"; -moz-opacity:0; }


/*---- 주소 ----*/
.address__post,
.address__detail input:not(:last-child) { margin-bottom:10px; }
/* .address__post input { max-width:180px; }  */



/*--------------------------------------------------------------------- 체크박스 & 라디오 --------------------------*/
/*-- 공통 --*/
input[type="checkbox"],
input[type="radio"] { display:none; }

input[type="checkbox"] + label,
input[type="radio"] + label { display:flex; align-items:center; font-size:14px; }

input[type="checkbox"] + label::before,
input[type="radio"] + label::before {content:'';border:1px solid #000;margin-right:6px;box-sizing:border-box;border-radius: 5px;background-color: #fff;}

/* input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before { content:''; background:url(../../images/cmn/ico_check.svg) no-repeat 50%; } */


/*-- CHECK BOX --*/
input[type="checkbox"] + label { color:#333; }
input[type="checkbox"] + label::before { width:20px; height:20px; }

/* type */
.checkbox-02 input[type="checkbox"]:checked + label,
.radio-02 input[type="radio"]:checked + label { position:relative; }
.checkbox-02 input[type="checkbox"]:checked + label::before,
.radio-02 input[type="radio"]:checked + label::before { background:none; }
.checkbox-02 input[type="checkbox"]:checked + label::after,
.radio-02 input[type="radio"]:checked + label::after { content:""; position:absolute; top:50%; transform:translateY(-50%); background:#000; }

.checkbox-02 input[type="checkbox"]:checked + label::after { left:3px; width:14px; height:14px; }
.checkbox-03 input[type="checkbox"] + label::before { border-radius:4px; }
.checkbox-04 input[type="checkbox"] + label::before { border-radius:4px; }
.checkbox-04 input[type="checkbox"]:checked + label::before { background-color:#000; background-image:url(../../images/cmn/ico_check_w.svg); }
.checkbox-05 input[type="checkbox"] + label { color:#a2a2a2; }


/*-- RADIO --*/
input[type="radio"] + label { color:#000; }
input[type="radio"] + label::before { width:20px; height:20px; border-radius:50%; }
input[type="radio"]:checked + label::before { background-size:0.4375rem; }

/* type */
.radio-02 input[type="radio"]:checked + label::after { left:4px; width:12px; height:12px; border-radius:50%; }



/*--------------------------------------------------------------------- BUTTON --------------------------*/
/*-- 개수 --*/
.btn-2ea { display:flex; }
.btn-2ea .btn { width:50%; }
.btn-2ea .btn:not(:last-child) { margin-right:10px; }


/*-- SIZE --*/
.btn { display:inline-block; vertical-align:middle; text-align:center;}
.btn.small { width:60px; height:30px; line-height:30px; font-size:14px; }
.btn.medium { width:150px; height:50px; line-height:50px; }
.btn.large { width:230px; height:70px; line-height:70px; }

.btn.small.btn-line { line-height:calc(30px - 1px); }
.btn.medium.btn-line { line-height:calc(50px - 1px); }
.btn.large.btn-line { line-height:calc(70px - 1px); }

/*-- COLOR --*/
/* bg */
.btn.black { background:#000; color:#fff; }
.btn.gray01 { background:#d0d0d0; color:#fff; }
.btn.gray02 { background:#bababa; color:#fff; }
.btn.gray03 { background:#888; color:#fff; }
.btn.gray04 { background:#666; color:#fff; }
.btn.gray05 { background:#505050; color:#fff; }
.btn.gray06 { background:#404040; color:#fff; }
.btn.gray07 { background:#333; color:#fff; }
.btn.gray08 { background:#232323; color:#fff; }
.btn.red { background:#f00; color:#fff; }
.btn.blue { background:#0004ff; color:#fff; }
.btn.green { background:#28ff00; color:#fff; }
.btn.yellow { background:#f4ff00; color:#fff; }


.btn.c-naver { background: #20C65F; border: 1px solid #20C65F; color: #fff !important; }
.btn.c-kakao {background: #F9DF32;border: 1px solid #F9DF32;color: #292929;}
.btn.c-google { border: 1px solid #000; background: #fff; }

.btn.unlink{background: #f7f7f7; color: #888 !important;}

/* line */
.btn.blackLine { border:1px solid #000; }
.btn.blackLine02 { border:1px solid #232323; }
.btn.blackLine03 { border:1px solid #888; }

.btn--shar {border: 1px solid #000000; border-radius: 5px; width: 50px; height: 40px; display: flex; justify-content: center; align-items: center; min-width: 50px; position: relative; z-index: 9; background-color: #fff;}
.btn--list {background-color: #000000; border-radius: 5px; color: #fff; width: 100px; height: 40px; display: flex; justify-content: center; align-items: center; min-width: 100px;}
/*--------------------------------------------------------------------- ICON --------------------------*/
/*-- RESET --*/
.btn.ico { line-height:1; }


/*-- COMMON --*/
i[class^=ico] { display:inline-flex; align-items:center; justify-content:center; background-repeat:no-repeat; background-size:cover; }

/*-- IMAGE --*/
.ico-facebook{width: 24px; height: 24px; background-image: url(../../images/ico/ico-facebook.svg);}
.ico-instagram{width: 24px; height: 24px; background-image: url(../../images/ico/ico-insta.svg);}
.ico-close{width: 31px; height: 31px; background-image: url(../../images/ico/ico-close.svg);}
.ico-menu{width: 31px; height: 31px; background-image: url(../../images/ico/ico-menu.svg);}


/*--------------------------------------------------------------------- bg --------------------------*/
.bg-gray { background-color: #f7f7f7; }



/*--------------------------------------------------------------------- 검색바 --------------------------*/
.search select { max-width:fit-content; margin-right:8px; }
.search button { width:85px; }
.search button span + i { margin-left:8px; }

.search-fix { position:relative; }
.search-fix button { position:absolute; top:0; right:0; min-width:initial; }



/*--------------------------------------------------------------------- timepicker --------------------------*/
.input-time .ti_tx,
.input-time .mi_tx,
.input-time .mer_tx { width:100%; text-align:center; margin:10px 0; }

.input-time .time,
.input-time .mins,
.input-time .meridian { width:42px; float:left; margin:0 10px; }

.input-time .prev,
.input-time .next { cursor:pointer; padding:18px; border:1px solid #ccc; background:url(../../images/cmn/img_time_arr_02.png) no-repeat; border-radius:5px; }
.input-time .next { background-position:50% 150%; }
.input-time .prev { background-position:50% -50%; }

.input-time .prev:hover,
.input-time .next:hover { background-color:#ccc; }

.input-time .time_pick { position:relative; }
.input-time .timepicker_wrap { display:none; position:absolute; padding:10px; border-radius:5px; z-index:998; box-shadow:2px 2px 5px 0 rgba(50,50,50,0.35); background:#f6f6f6; border:1px solid #ccc; }

.input-time .arrow_top { position:absolute; top:-10px; left:20px; background:url(../../images/cmn/img_time_arr.png) no-repeat; width:18px; height:10px; }
.input-time .timepicki-input { border:1px solid #ccc; border-radius:5px; }



/*--------------------------------------------------------------------- modal --------------------------*/
.layer-bg { position:fixed; width:100%; height:100%; left:0; background:rgba(0,0,0,0.7); z-index:9; }

.blocker,
.alert { position:fixed; top:0; left:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; z-index:9999; background:rgba(0,0,0,0.7);}
.modal,
.alert__cont {width:100%;max-width: 200px;background: transparent;padding: 40px 0px 0;border-radius: 30px;box-shadow:0 0 10px #000;border: 2px solid #FF4E00;}
.modal-txt {margin-bottom: 20px;text-align: center;}
.modal-txt__tit,
.alert-txt__tit {font-size: 56px;font-weight:700;margin-bottom:10px;}
.modal-txt__cont,
.alert-txt__cont {color: #FF4E00;word-break: keep-all;font-size: 16px;font-weight: 700;white-space: nowrap;}
.modal__btn{
 padding: 20px;
}
.modal__btn .btn {width:100%;height: 45px;line-height: 44px;border-radius: 17px;font-size: 20px;font-weight: 700;color: #FF4E00;border: 2px solid #FF4E00;}


/*-- alert --*/
.alert { display:none; }
.alert.show { display:flex; }
.alert__close { float:right; }
.alert__close > img { width:15px; height:15px; }
.alert__cont { clear:both; min-height:140px; }



/*--------------------------------------------------------------------- TABLE --------------------------*/
/* common */
table th,
table td { padding:5px; }



/*커스텀 커서 시작==========*/
.custom-cursor {
 width: .7rem;
 height: .7rem;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 pointer-events: none;
 opacity: 0;
 transform: translate(-50%; -50%);
 background-color: #000; /*사용자 수정*/
 backface-visibility: hidden;
 transition: none;
 mix-blend-mode: difference; /*사용자 수정*/
 pointer-events: none;
 border-radius: 50%;
 transform: scale(1)
}

.custom-cursor-icon {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-color: #fff; /*사용자 수정*/
 transition: all .2s ease;
 transform-origin: 50% 50%
}

.custom-cursor.custom_cursor_visible {
 opacity: 1
}

.custom-cursor.custom_cursor_hidden {
 opacity: 0
}

@media (pointer:none),
(pointer:coarse) {

 #custom_cursor,
 #custom_cursor .custom-cursor-icon {
  display: none !important;
  visibility: hidden;
  opacity: 0
 }

 * {
  cursor: auto !important
 }
}

@media (max-width:767.98px) {
 .custom-cursor {
  /* display: none; */
 }
}

.custom-cursor.custom_cursor_hover .custom-cursor-icon {
 transform: scale(1.6)
}
/*커스텀 커서 끝==========*/



/*--------------------------------------------------------------------- 애니메이션 --------------------------*/

.pt-perspective {
 position: relative;
 width: 100%;
 height: 100%;
 -webkit-perspective: 1200px;
 -moz-perspective: 1200px;
 perspective: 1200px;
}

.pt-page {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 visibility: hidden;
 overflow: hidden;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.pt-page-current,
.no-js .pt-page {
 visibility: visible;
 z-index: 1;
}

.no-js body {
 overflow: auto;
}

.pt-page-ontop {
 z-index: 999;
}

/* Text Styles, Colors, Backgrounds */

.pt-page h1 {
 position: absolute;
 font-weight: 300;
 font-size: 4.4em;
 line-height: 1;
 letter-spacing: 6px;
 margin: 0;
 top: 12%;
 width: 100%;
 text-align: center;
 text-transform: uppercase;
 word-spacing: -0.3em;
}

.pt-page h1 span {
 font-family: 'Satisfy', serif;
 font-weight: 400;
 font-size: 40%;
 text-transform: none;
 word-spacing: 0;
 letter-spacing: 0;
 display: block;
 opacity: 0.4;
}

.pt-page h1 strong {
 color: rgba(0,0,0,0.1);
}

.pt-page-1 {
 background: #0ac2d2;
}

.pt-page-2 {
 background: #7bb7fa;
}

.pt-page-3 {
 background: #60d7a9;
}

.pt-page-4 {
 background: #fdc162;
}

.pt-page-5 {
 background: #fd6a62;
}

.pt-page-6 {
 background: #f68dbb;
}

/* animation sets */

/* move from / to  */

.pt-page-moveToLeft {
 -webkit-animation: moveToLeft .6s ease both;
 animation: moveToLeft .6s ease both;
}

.pt-page-moveFromLeft {
 -webkit-animation: moveFromLeft .6s ease both;
 animation: moveFromLeft .6s ease both;
}

.pt-page-moveToRight {
 -webkit-animation: moveToRight .6s ease both;
 animation: moveToRight .6s ease both;
}

.pt-page-moveFromRight {
 -webkit-animation: moveFromRight .6s ease both;
 animation: moveFromRight .6s ease both;
}

.pt-page-moveToTop {
 -webkit-animation: moveToTop .6s ease both;
 animation: moveToTop .6s ease both;
}

.pt-page-moveFromTop {
 -webkit-animation: moveFromTop .6s ease both;
 animation: moveFromTop .6s ease both;
}

.pt-page-moveToBottom {
 -webkit-animation: moveToBottom .6s ease both;
 animation: moveToBottom .6s ease both;
}

.pt-page-moveFromBottom {
 -webkit-animation: moveFromBottom .6s ease both;
 animation: moveFromBottom .6s ease both;
}

/* fade */

.pt-page-fade {
 -webkit-animation: fade .7s ease both;
 animation: fade .7s ease both;
}

/* move from / to and fade */

.pt-page-moveToLeftFade {
 -webkit-animation: moveToLeftFade .7s ease both;
 animation: moveToLeftFade .7s ease both;
}

.pt-page-moveFromLeftFade {
 -webkit-animation: moveFromLeftFade .7s ease both;
 animation: moveFromLeftFade .7s ease both;
}

.pt-page-moveToRightFade {
 -webkit-animation: moveToRightFade .7s ease both;
 animation: moveToRightFade .7s ease both;
}

.pt-page-moveFromRightFade {
 -webkit-animation: moveFromRightFade .7s ease both;
 animation: moveFromRightFade .7s ease both;
}

.pt-page-moveToTopFade {
 -webkit-animation: moveToTopFade .7s ease both;
 animation: moveToTopFade .7s ease both;
}

.pt-page-moveFromTopFade {
 -webkit-animation: moveFromTopFade .7s ease both;
 animation: moveFromTopFade .7s ease both;
}

.pt-page-moveToBottomFade {
 -webkit-animation: moveToBottomFade .7s ease both;
 animation: moveToBottomFade .7s ease both;
}

.pt-page-moveFromBottomFade {
 -webkit-animation: moveFromBottomFade .7s ease both;
 animation: moveFromBottomFade .7s ease both;
}

/* move to with different easing */

.pt-page-moveToLeftEasing {
 -webkit-animation: moveToLeft .7s ease-in-out both;
 animation: moveToLeft .7s ease-in-out both;
}
.pt-page-moveToRightEasing {
 -webkit-animation: moveToRight .7s ease-in-out both;
 animation: moveToRight .7s ease-in-out both;
}
.pt-page-moveToTopEasing {
 -webkit-animation: moveToTop .7s ease-in-out both;
 animation: moveToTop .7s ease-in-out both;
}
.pt-page-moveToBottomEasing {
 -webkit-animation: moveToBottom .7s ease-in-out both;
 animation: moveToBottom .7s ease-in-out both;
}

/********************************* keyframes **************************************/

/* move from / to  */

@-webkit-keyframes moveToLeft {
 from { }
 to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {
 from { }
 to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeft {
 from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
 from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight {
 from { }
 to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight {
 from { }
 to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveFromRight {
 from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {
 from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveToTop {
 from { }
 to { -webkit-transform: translateY(-100%); }
}
@keyframes moveToTop {
 from { }
 to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveFromTop {
 from { -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTop {
 from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottom {
 from { }
 to { -webkit-transform: translateY(100%); }
}
@keyframes moveToBottom {
 from { }
 to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

@-webkit-keyframes moveFromBottom {
 from { -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottom {
 from { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

/* fade */

@-webkit-keyframes fade {
 from { }
 to { opacity: 0.3; }
}
@keyframes fade {
 from { }
 to { opacity: 0.3; }
}

/* move from / to and fade */

@-webkit-keyframes moveToLeftFade {
 from { }
 to { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeftFade {
 from { }
 to { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeftFade {
 from { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeftFade {
 from { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRightFade {
 from { }
 to { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@keyframes moveToRightFade {
 from { }
 to { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveFromRightFade {
 from { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@keyframes moveFromRightFade {
 from { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveToTopFade {
 from { }
 to { opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@keyframes moveToTopFade {
 from { }
 to { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveFromTopFade {
 from { opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTopFade {
 from { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottomFade {
 from { }
 to { opacity: 0.3; -webkit-transform: translateY(100%); }
}
@keyframes moveToBottomFade {
 from { }
 to { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); }
}

@-webkit-keyframes moveFromBottomFade {
 from { opacity: 0.3; -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottomFade {
 from { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); }
}

/* scale and fade */

.pt-page-scaleDown {
 -webkit-animation: scaleDown .7s ease both;
 animation: scaleDown .7s ease both;
}

.pt-page-scaleUp {
 -webkit-animation: scaleUp .7s ease both;
 animation: scaleUp .7s ease both;
}

.pt-page-scaleUpDown {
 -webkit-animation: scaleUpDown .5s ease both;
 animation: scaleUpDown .5s ease both;
}

.pt-page-scaleDownUp {
 -webkit-animation: scaleDownUp .5s ease both;
 animation: scaleDownUp .5s ease both;
}

.pt-page-scaleDownCenter {
 -webkit-animation: scaleDownCenter .4s ease-in both;
 animation: scaleDownCenter .4s ease-in both;
}

.pt-page-scaleUpCenter {
 -webkit-animation: scaleUpCenter .4s ease-out both;
 animation: scaleUpCenter .4s ease-out both;
}

/********************************* keyframes **************************************/

/* scale and fade */

@-webkit-keyframes scaleDown {
 from { }
 to { opacity: 0; -webkit-transform: scale(.8); }
}
@keyframes scaleDown {
 from { }
 to { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }
}

@-webkit-keyframes scaleUp {
 from { opacity: 0; -webkit-transform: scale(.8); }
}
@keyframes scaleUp {
 from { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }
}

@-webkit-keyframes scaleUpDown {
 from { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleUpDown {
 from { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@-webkit-keyframes scaleDownUp {
 from { }
 to { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleDownUp {
 from { }
 to { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@-webkit-keyframes scaleDownCenter {
 from { }
 to { opacity: 0; -webkit-transform: scale(.7); }
}
@keyframes scaleDownCenter {
 from { }
 to { opacity: 0; -webkit-transform: scale(.7); transform: scale(.7); }
}

@-webkit-keyframes scaleUpCenter {
 from { opacity: 0; -webkit-transform: scale(.7); }
}
@keyframes scaleUpCenter {
 from { opacity: 0; -webkit-transform: scale(.7); transform: scale(.7); }
}

/* rotate sides first and scale */

.pt-page-rotateRightSideFirst {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotateRightSideFirst .8s both ease-in;
 animation: rotateRightSideFirst .8s both ease-in;
}
.pt-page-rotateLeftSideFirst {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotateLeftSideFirst .8s both ease-in;
 animation: rotateLeftSideFirst .8s both ease-in;
}
.pt-page-rotateTopSideFirst {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotateTopSideFirst .8s both ease-in;
 animation: rotateTopSideFirst .8s both ease-in;
}
.pt-page-rotateBottomSideFirst {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotateBottomSideFirst .8s both ease-in;
 animation: rotateBottomSideFirst .8s both ease-in;
}

/* flip */

.pt-page-flipOutRight {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: flipOutRight .5s both ease-in;
 animation: flipOutRight .5s both ease-in;
}
.pt-page-flipInLeft {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: flipInLeft .5s both ease-out;
 animation: flipInLeft .5s both ease-out;
}
.pt-page-flipOutLeft {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: flipOutLeft .5s both ease-in;
 animation: flipOutLeft .5s both ease-in;
}
.pt-page-flipInRight {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: flipInRight .5s both ease-out;
 animation: flipInRight .5s both ease-out;
}
.pt-page-flipOutTop {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: flipOutTop .5s both ease-in;
 animation: flipOutTop .5s both ease-in;
}
.pt-page-flipInBottom {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: flipInBottom .5s both ease-out;
 animation: flipInBottom .5s both ease-out;
}
.pt-page-flipOutBottom {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: flipOutBottom .5s both ease-in;
 animation: flipOutBottom .5s both ease-in;
}
.pt-page-flipInTop {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: flipInTop .5s both ease-out;
 animation: flipInTop .5s both ease-out;
}

/* rotate fall */

.pt-page-rotateFall {
 -webkit-transform-origin: 0% 0%;
 transform-origin: 0% 0%;
 -webkit-animation: rotateFall 1s both ease-in;
 animation: rotateFall 1s both ease-in;
}

/* rotate newspaper */
.pt-page-rotateOutNewspaper {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: rotateOutNewspaper .5s both ease-in;
 animation: rotateOutNewspaper .5s both ease-in;
}
.pt-page-rotateInNewspaper {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-animation: rotateInNewspaper .5s both ease-out;
 animation: rotateInNewspaper .5s both ease-out;
}

/* push */
.pt-page-rotatePushLeft {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotatePushLeft .8s both ease;
 animation: rotatePushLeft .8s both ease;
}
.pt-page-rotatePushRight {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotatePushRight .8s both ease;
 animation: rotatePushRight .8s both ease;
}
.pt-page-rotatePushTop {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotatePushTop .8s both ease;
 animation: rotatePushTop .8s both ease;
}
.pt-page-rotatePushBottom {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotatePushBottom .8s both ease;
 animation: rotatePushBottom .8s both ease;
}

/* pull */
.pt-page-rotatePullRight {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotatePullRight .5s both ease;
 animation: rotatePullRight .5s both ease;
}
.pt-page-rotatePullLeft {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotatePullLeft .5s both ease;
 animation: rotatePullLeft .5s both ease;
}
.pt-page-rotatePullTop {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotatePullTop .5s both ease;
 animation: rotatePullTop .5s both ease;
}
.pt-page-rotatePullBottom {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotatePullBottom .5s both ease;
 animation: rotatePullBottom .5s both ease;
}

/* fold */
.pt-page-rotateFoldRight {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotateFoldRight .7s both ease;
 animation: rotateFoldRight .7s both ease;
}
.pt-page-rotateFoldLeft {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotateFoldLeft .7s both ease;
 animation: rotateFoldLeft .7s both ease;
}
.pt-page-rotateFoldTop {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotateFoldTop .7s both ease;
 animation: rotateFoldTop .7s both ease;
}
.pt-page-rotateFoldBottom {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotateFoldBottom .7s both ease;
 animation: rotateFoldBottom .7s both ease;
}

/* unfold */
.pt-page-rotateUnfoldLeft {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotateUnfoldLeft .7s both ease;
 animation: rotateUnfoldLeft .7s both ease;
}
.pt-page-rotateUnfoldRight {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotateUnfoldRight .7s both ease;
 animation: rotateUnfoldRight .7s both ease;
}
.pt-page-rotateUnfoldTop {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotateUnfoldTop .7s both ease;
 animation: rotateUnfoldTop .7s both ease;
}
.pt-page-rotateUnfoldBottom {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotateUnfoldBottom .7s both ease;
 animation: rotateUnfoldBottom .7s both ease;
}

/* room walls */
.pt-page-rotateRoomLeftOut {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotateRoomLeftOut .8s both ease;
 animation: rotateRoomLeftOut .8s both ease;
}
.pt-page-rotateRoomLeftIn {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotateRoomLeftIn .8s both ease;
 animation: rotateRoomLeftIn .8s both ease;
}
.pt-page-rotateRoomRightOut {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotateRoomRightOut .8s both ease;
 animation: rotateRoomRightOut .8s both ease;
}
.pt-page-rotateRoomRightIn {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotateRoomRightIn .8s both ease;
 animation: rotateRoomRightIn .8s both ease;
}
.pt-page-rotateRoomTopOut {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotateRoomTopOut .8s both ease;
 animation: rotateRoomTopOut .8s both ease;
}
.pt-page-rotateRoomTopIn {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotateRoomTopIn .8s both ease;
 animation: rotateRoomTopIn .8s both ease;
}
.pt-page-rotateRoomBottomOut {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotateRoomBottomOut .8s both ease;
 animation: rotateRoomBottomOut .8s both ease;
}
.pt-page-rotateRoomBottomIn {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotateRoomBottomIn .8s both ease;
 animation: rotateRoomBottomIn .8s both ease;
}

/* cube */
.pt-page-rotateCubeLeftOut {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotateCubeLeftOut .6s both ease-in;
 animation: rotateCubeLeftOut .6s both ease-in;
}
.pt-page-rotateCubeLeftIn {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotateCubeLeftIn .6s both ease-in;
 animation: rotateCubeLeftIn .6s both ease-in;
}
.pt-page-rotateCubeRightOut {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotateCubeRightOut .6s both ease-in;
 animation: rotateCubeRightOut .6s both ease-in;
}
.pt-page-rotateCubeRightIn {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotateCubeRightIn .6s both ease-in;
 animation: rotateCubeRightIn .6s both ease-in;
}
.pt-page-rotateCubeTopOut {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotateCubeTopOut .6s both ease-in;
 animation: rotateCubeTopOut .6s both ease-in;
}
.pt-page-rotateCubeTopIn {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotateCubeTopIn .6s both ease-in;
 animation: rotateCubeTopIn .6s both ease-in;
}
.pt-page-rotateCubeBottomOut {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotateCubeBottomOut .6s both ease-in;
 animation: rotateCubeBottomOut .6s both ease-in;
}
.pt-page-rotateCubeBottomIn {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotateCubeBottomIn .6s both ease-in;
 animation: rotateCubeBottomIn .6s both ease-in;
}

/* carousel */
.pt-page-rotateCarouselLeftOut {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotateCarouselLeftOut .8s both ease;
 animation: rotateCarouselLeftOut .8s both ease;
}
.pt-page-rotateCarouselLeftIn {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotateCarouselLeftIn .8s both ease;
 animation: rotateCarouselLeftIn .8s both ease;
}
.pt-page-rotateCarouselRightOut {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: rotateCarouselRightOut .8s both ease;
 animation: rotateCarouselRightOut .8s both ease;
}
.pt-page-rotateCarouselRightIn {
 -webkit-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-animation: rotateCarouselRightIn .8s both ease;
 animation: rotateCarouselRightIn .8s both ease;
}
.pt-page-rotateCarouselTopOut {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotateCarouselTopOut .8s both ease;
 animation: rotateCarouselTopOut .8s both ease;
}
.pt-page-rotateCarouselTopIn {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotateCarouselTopIn .8s both ease;
 animation: rotateCarouselTopIn .8s both ease;
}
.pt-page-rotateCarouselBottomOut {
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-animation: rotateCarouselBottomOut .8s both ease;
 animation: rotateCarouselBottomOut .8s both ease;
}
.pt-page-rotateCarouselBottomIn {
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-animation: rotateCarouselBottomIn .8s both ease;
 animation: rotateCarouselBottomIn .8s both ease;
}

/* sides */
.pt-page-rotateSidesOut {
 -webkit-transform-origin: -50% 50%;
 transform-origin: -50% 50%;
 -webkit-animation: rotateSidesOut .5s both ease-in;
 animation: rotateSidesOut .5s both ease-in;
}
.pt-page-rotateSidesIn {
 -webkit-transform-origin: 150% 50%;
 transform-origin: 150% 50%;
 -webkit-animation: rotateSidesIn .5s both ease-out;
 animation: rotateSidesIn .5s both ease-out;
}

/* slide */
.pt-page-rotateSlideOut {
 -webkit-animation: rotateSlideOut 1s both ease;
 animation: rotateSlideOut 1s both ease;
}
.pt-page-rotateSlideIn {
 -webkit-animation: rotateSlideIn 1s both ease;
 animation: rotateSlideIn 1s both ease;
}

/********************************* keyframes **************************************/

/* rotate sides first and scale */

@-webkit-keyframes rotateRightSideFirst {
 0% { }
 40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateRightSideFirst {
 0% { }
 40% { -webkit-transform: rotateY(15deg); transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
 100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateLeftSideFirst {
 0% { }
 40% { -webkit-transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateLeftSideFirst {
 0% { }
 40% { -webkit-transform: rotateY(-15deg); transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
 100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateTopSideFirst {
 0% { }
 40% { -webkit-transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateTopSideFirst {
 0% { }
 40% { -webkit-transform: rotateX(15deg); transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
 100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateBottomSideFirst {
 0% { }
 40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateBottomSideFirst {
 0% { }
 40% { -webkit-transform: rotateX(-15deg); transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
 100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
}

/* flip */

@-webkit-keyframes flipOutRight {
 from { }
 to { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipOutRight {
 from { }
 to { -webkit-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInLeft {
 from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@keyframes flipInLeft {
 from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutLeft {
 from { }
 to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@keyframes flipOutLeft {
 from { }
 to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInRight {
 from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipInRight {
 from { -webkit-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutTop {
 from { }
 to { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@keyframes flipOutTop {
 from { }
 to { -webkit-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInBottom {
 from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@keyframes flipInBottom {
 from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutBottom {
 from { }
 to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@keyframes flipOutBottom {
 from { }
 to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInTop {
 from { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@keyframes flipInTop {
 from { -webkit-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}

/* fall */

@-webkit-keyframes rotateFall {
 0% { -webkit-transform: rotateZ(0deg); }
 20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
 40% { -webkit-transform: rotateZ(17deg); }
 60% { -webkit-transform: rotateZ(16deg); }
 100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
 0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
 20% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
 40% { -webkit-transform: rotateZ(17deg); transform: rotateZ(17deg); }
 60% { -webkit-transform: rotateZ(16deg); transform: rotateZ(16deg); }
 100% { -webkit-transform: translateY(100%) rotateZ(17deg); transform: translateY(100%) rotateZ(17deg); }
}

/* newspaper */

@-webkit-keyframes rotateOutNewspaper {
 from { }
 to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
 from { }
 to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

@-webkit-keyframes rotateInNewspaper {
 from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
}
@keyframes rotateInNewspaper {
 from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
}

/* push */

@-webkit-keyframes rotatePushLeft {
 from { }
 to { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@keyframes rotatePushLeft {
 from { }
 to { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
}

@-webkit-keyframes rotatePushRight {
 from { }
 to { opacity: 0; -webkit-transform: rotateY(-90deg); }
}
@keyframes rotatePushRight {
 from { }
 to { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }
}

@-webkit-keyframes rotatePushTop {
 from { }
 to { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@keyframes rotatePushTop {
 from { }
 to { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); }
}

@-webkit-keyframes rotatePushBottom {
 from { }
 to { opacity: 0; -webkit-transform: rotateX(90deg); }
}
@keyframes rotatePushBottom {
 from { }
 to { opacity: 0; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
}

/* pull */

@-webkit-keyframes rotatePullRight {
 from { opacity: 0; -webkit-transform: rotateY(-90deg); }
}
@keyframes rotatePullRight {
 from { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }
}

@-webkit-keyframes rotatePullLeft {
 from { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@keyframes rotatePullLeft {
 from { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
}

@-webkit-keyframes rotatePullTop {
 from { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@keyframes rotatePullTop {
 from { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); }
}

@-webkit-keyframes rotatePullBottom {
 from { opacity: 0; -webkit-transform: rotateX(90deg); }
}
@keyframes rotatePullBottom {
 from { opacity: 0; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
}

/* fold */

@-webkit-keyframes rotateFoldRight {
 from { }
 to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateFoldRight {
 from { }
 to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateFoldLeft {
 from { }
 to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateFoldLeft {
 from { }
 to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateFoldTop {
 from { }
 to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateFoldTop {
 from { }
 to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateFoldBottom {
 from { }
 to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateFoldBottom {
 from { }
 to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
}

/* unfold */

@-webkit-keyframes rotateUnfoldLeft {
 from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateUnfoldLeft {
 from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateUnfoldRight {
 from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateUnfoldRight {
 from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateUnfoldTop {
 from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateUnfoldTop {
 from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateUnfoldBottom {
 from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateUnfoldBottom {
 from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
}

/* room walls */

@-webkit-keyframes rotateRoomLeftOut {
 from { }
 to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftOut {
 from { }
 to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); transform: translateX(-100%) rotateY(90deg); }
}

@-webkit-keyframes rotateRoomLeftIn {
 from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomLeftIn {
 from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); transform: translateX(100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateRoomRightOut {
 from { }
 to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomRightOut {
 from { }
 to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); transform: translateX(100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateRoomRightIn {
 from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomRightIn {
 from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); transform: translateX(-100%) rotateY(90deg); }
}

@-webkit-keyframes rotateRoomTopOut {
 from { }
 to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
}
@keyframes rotateRoomTopOut {
 from { }
 to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); transform: translateY(-100%) rotateX(-90deg); }
}

@-webkit-keyframes rotateRoomTopIn {
 from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
}
@keyframes rotateRoomTopIn {
 from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); }
}

@-webkit-keyframes rotateRoomBottomOut {
 from { }
 to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
}
@keyframes rotateRoomBottomOut {
 from { }
 to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); }
}

@-webkit-keyframes rotateRoomBottomIn {
 from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
}
@keyframes rotateRoomBottomIn {
 from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); transform: translateY(-100%) rotateX(-90deg); }
}

/* cube */

@-webkit-keyframes rotateCubeLeftOut {
 0% { }
 50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
 100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateCubeLeftOut {
 0% { }
 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;  -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);  transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
 100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateCubeLeftIn {
 0% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); }
 50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
}
@keyframes rotateCubeLeftIn {
 0% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;  -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg);  transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
}

@-webkit-keyframes rotateCubeRightOut {
 0% { }
 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
 100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateCubeRightOut {
 0% { }
 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
 100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateCubeRightIn {
 0% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); }
 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
}
@keyframes rotateCubeRightIn {
 0% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
}

@-webkit-keyframes rotateCubeTopOut {
 0% { }
 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
 100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateCubeTopOut {
 0% {}
 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
 100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateCubeTopIn {
 0% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}
@keyframes rotateCubeTopIn {
 0% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}

@-webkit-keyframes rotateCubeBottomOut {
 0% { }
 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
 100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateCubeBottomOut {
 0% { }
 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
 100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
}

@-webkit-keyframes rotateCubeBottomIn {
 0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); }
 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}
@keyframes rotateCubeBottomIn {
 0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}

/* carousel */

@-webkit-keyframes rotateCarouselLeftOut {
 from { }
 to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); }
}
@keyframes rotateCarouselLeftOut {
 from { }
 to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); transform: translateX(-150%) scale(.4) rotateY(-65deg); }
}

@-webkit-keyframes rotateCarouselLeftIn {
 from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@keyframes rotateCarouselLeftIn {
 from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); transform: translateX(200%) scale(.4) rotateY(65deg); }
}

@-webkit-keyframes rotateCarouselRightOut {
 from { }
 to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@keyframes rotateCarouselRightOut {
 from { }
 to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); transform: translateX(200%) scale(.4) rotateY(65deg); }
}

@-webkit-keyframes rotateCarouselRightIn {
 from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); }
}
@keyframes rotateCarouselRightIn {
 from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); transform: translateX(-200%) scale(.4) rotateY(-65deg); }
}

@-webkit-keyframes rotateCarouselTopOut {
 from { }
 to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@keyframes rotateCarouselTopOut {
 from { }
 to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); transform: translateY(-200%) scale(.4) rotateX(65deg); }
}

@-webkit-keyframes rotateCarouselTopIn {
 from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@keyframes rotateCarouselTopIn {
 from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); transform: translateY(200%) scale(.4) rotateX(-65deg); }
}

@-webkit-keyframes rotateCarouselBottomOut {
 from { }
 to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@keyframes rotateCarouselBottomOut {
 from { }
 to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); transform: translateY(200%) scale(.4) rotateX(-65deg); }
}

@-webkit-keyframes rotateCarouselBottomIn {
 from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@keyframes rotateCarouselBottomIn {
 from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); transform: translateY(-200%) scale(.4) rotateX(65deg); }
}

/* sides */

@-webkit-keyframes rotateSidesOut {
 from { }
 to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); }
}
@keyframes rotateSidesOut {
 from { }
 to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); transform: translateZ(-500px) rotateY(90deg); }
}

@-webkit-keyframes rotateSidesIn {
 from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); }
}
@keyframes rotateSidesIn {
 from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); transform: translateZ(-500px) rotateY(-90deg); }
}

/* slide */

@-webkit-keyframes rotateSlideOut {
 0% { }
 25% { opacity: .5; -webkit-transform: translateZ(-500px); }
 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes rotateSlideOut {
 0% { }
 25% { opacity: .5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); }
 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); }
 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); }
}

@-webkit-keyframes rotateSlideIn {
 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
 75% { opacity: .5; -webkit-transform: translateZ(-500px); }
 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@keyframes rotateSlideIn {
 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); }
 75% { opacity: .5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); }
 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); }
}

/* animation delay classes */

.pt-page-delay100 {
 -webkit-animation-delay: .1s;
 animation-delay: .1s;
}
.pt-page-delay180 {
 -webkit-animation-delay: .180s;
 animation-delay: .180s;
}
.pt-page-delay200 {
 -webkit-animation-delay: .2s;
 animation-delay: .2s;
}
.pt-page-delay300 {
 -webkit-animation-delay: .3s;
 animation-delay: .3s;
}
.pt-page-delay400 {
 -webkit-animation-delay: .4s;
 animation-delay: .4s;
}
.pt-page-delay500 {
 -webkit-animation-delay: .5s;
 animation-delay: .5s;
}
.pt-page-delay700 {
 -webkit-animation-delay: .7s;
 animation-delay: .7s;
}
.pt-page-delay1000 {
 -webkit-animation-delay: 1s;
 animation-delay: 1s;
}







br.pc-only{display: block}
br.mo-only{display: none}

/*--------------------------------------------------------------------- 모바일 --------------------------*/
@media screen and (max-width:768px) {

 br.pc-only{display: none}
 br.mo-only{display: block}

}