@import url('https://fonts.googleapis.com/css?family=Exo:200,300,500,600');

html, body, h1, h2, h3, h4, h5, h6, ul, li, p {margin: 0; padding: 0;}
html, body {height: 100%; overflow: hidden;}
li {list-style: none;}
img {border: none;}
body {font-family: 'Exo', 'Helvetica Neue', 'AppleSDGothicNeo-Thin', 'Helvetica-UltraLight', 'Liberation Sans', '留묒� 怨좊뵓', 'Malgun Gothic', '�섎닎怨좊뵓', '�뗭�'; background: #fff;}
.font-family-for-check {font-family: 'Helvetica Neue', 'AppleSDGothicNeo-Thin', 'Helvetica-UltraLight', 'Liberation Sans', '留묒� 怨좊뵓', 'Malgun Gothic', '�섎닎怨좊뵓', '�뗭�';}


#info {position: absolute; left: 0; right: 0; top: 0; -background: #f60; z-index: 0; z-index: 999;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

#info.detail .detail,
#info.detail .detail h2,
#info.detail .detail p {
	-webkit-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
#info .detail {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(133, 75, 40, 0.9); opacity: 0; overflow: auto; z-index: 2; visibility: hidden; -webkit-overflow-scrolling: touch;
	-webkit-transition: all 0.25s cubic-bezier(0.165, 0.840, 0.440, 1.000);
	transition: all 0.25s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
#info.detail .detail {opacity: 1; visibility: visible;}
#info .detail h2,
#info .detail p {opacity: 0;
	-webkit-transform: translate3d(0, 75px, 0);
	transform: translate3d(0, 75px, 0);
	-webkit-transition: all 0.01s 0.25s;
	transition: all 0.01s 0.25s;
}
#info.detail .detail h2,
#info.detail .detail p {opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
#info.detail .detail p:nth-of-type(1) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
#info.detail .detail p:nth-of-type(2) {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
#info.detail .detail p:nth-of-type(3) {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
#info.detail .detail p:nth-of-type(4) {margin-top: 30px;
	-webkit-transition: opacity 0.5s 0.75s ease-out;
	transition: opacity 0.5s 0.75s ease-out;
}
#info .detail .inside {position: relative; top: 55px; max-width: 500px; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); padding: 20px;}
#info .detail h2 {font-size: 32px; font-weight: 200; line-height: 1.2; margin-bottom: 40px;}
#info .detail h2:after {position: relative; top: 18px; width: 50px; height: 0; content: ''; border-top: 2px solid rgba(255, 255, 255, 0.15); display: block;}
#info .detail em {font-style: normal; color: #e5e5e5;}
#info .detail a {font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px dotted #ccc;}
#info .detail a:hover {border-bottom: 1px solid #fff;}
#info .detail p {font-size: 14px; font-weight: 300; color: #bbb; line-height: 1.7; margin: 20px 0;}
#info .detail .date {font-size: 12px; color: #aaa;}

#info .detail .share {font-size: 0; margin-top: 25px;}
#info .detail .share:before {font-size: 11px; font-weight: 200; color: #bbb; content: 'Share :'; line-height: 20px; margin-bottom: 2px; display: block;}
#info .detail .share a {position: relative; width: 30px; height: 30px; text-indent: -999em; margin-right: 5px; border: 0; background: rgba(0, 0, 0, 0.5); display: inline-block;}
#info .detail .share a:before,
#info .detail .share a:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; overflow: hidden; pointer-events: none;
	-webkit-transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
#info .detail .share a:before {background: #4760a5; opacity: 0;
	-webkit-transform: scale(1.25, 1.25);
	transform: scale(1.25, 1.25);
}
#info .detail .share a.twitter:before {background: #059ff5;}
#info .detail .share a.googleplus:before {background: #dd4230;}
#info .detail .share a.pinterest:before {background: #ce1c1f;}
#info .detail .share a:after {background: url('./social-icons.png') no-repeat; background-size: 30px auto; opacity: 0.45;}
#info .detail .share a.twitter:after {background-position: 0 -30px;}
#info .detail .share a.googleplus:after {background-position: 0 -60px;}
#info .detail .share a.pinterest:after {background-position: 0 -90px;}
#info .detail .share a:hover:before {opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}
.hoverable #info .detail .share a:hover:after {opacity: 1;}

#info .button a,
#info .button span,
#info .button span:before,
#info .button span:after {
	-webkit-transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
	transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

#info .button {position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; text-indent: -999em; margin: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.075); display: block; outline: none; cursor: pointer; z-index: 3;}
#info .button a {position: relative; width: 30px; height: 30px; text-indent: -999em; margin: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.075); display: block; outline: none; cursor: pointer;}
.hoverable #info .button a:hover {background: rgba(255, 255, 255, 0.45);}
.bright #info .button a {background: rgba(0, 0, 0, 0.2);}
.bright #info .button a:hover {background: rgba(0, 0, 0, 0.55);}
#info.detail .button a {background: rgba(0, 0, 0, 0.5);}
#info.detail .button a:hover {background: rgba(0, 0, 0, 0.75);}
#info .button a:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; border: 1px solid #fff; box-sizing: border-box; opacity: 0; pointer-events: none;
	-webkit-transform: scale(1.45, 1.45);
	transform: scale(1.45, 1.45);
	-webkit-transition: all 0.2s 0.1s cubic-bezier(0.550, 0.055, 0.675, 0.190), opacity 0.1s linear;
	transition: all 0.2s 0.1s cubic-bezier(0.550, 0.055, 0.675, 0.190), opacity 0.1s linear;
}
.bright #info .button a:after {border-color: #000;}
.hoverable #info .button a:hover:after {opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
#info .button a span {position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.55; overflow: hidden;}
.hoverable #info .button a:hover span {opacity: 1;}
#info .button span:before,
#info .button span:after {content: ''; border: 1px solid #fff;}
#info.detail .button a:after,
.bright #info .button span:before,
.bright #info .button span:after,
#info.detail .button span:before,
#info.detail .button span:after {border-color: #fff;}

#info .info span:before,
#info .info span:after {position: absolute; left: 50%; top: 9px; width: 0; height: 0; margin-left: -1px;}
#info .info span:after {top: 13px; height: 6px;}
#info.detail .info a span:before {top: 8px; height: 12px;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
#info.detail .info a span:after {top: 8px; height: 12px;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
#info.detail .info a span {
	-webkit-transform: rotate(315deg);
	transform: rotate(315deg);
}

#info .link {left: 60px; display: none;}

#info .full span:before,
#info .full span:after {position: absolute; left: 9px; top: 10px; width: 10px; height: 7px; border-width: 2px 1px 1px; opacity: 0.75;}
#info .full span:after {top: 12px; height: 6px; border-width: 1px; background: rgba(255, 255, 255, 0.75); opacity: 1;}
.hoverable #info .full a:hover span:before,
.touchbased #info .full span:before {
	-webkit-transform: translate3d(-2px, 2px, 0);
	transform: translate3d(-2px, 2px, 0);
}
.hoverable #info .full a:hover span:after,
.touchbased #info .full span:after {height: 8px;
	-webkit-transform: translate3d(2px, -4px, 0);
	transform: translate3d(2px, -4px, 0);
}

#info .list span:before,
#info .list span:after {position: absolute; left: 10px; top: 10px; width: 0; height: 10px; border-width: 0 10px 0 0; border-color: rgba(255, 255, 255, 0.75);}
#info .list span:after,
#info.detail .list span:after {left: 25px; width: 5px; border-width: 0 10px; border-color: transparent rgba(255, 255, 255, 0.25);}
.hoverable #info .list a:hover span:before {border-color: rgba(255, 255, 255, 0.25);
	-webkit-transform: translate3d(-15px, 0, 0);
	transform: translate3d(-15px, 0, 0);
}
.hoverable #info .list a:hover span:after {border-color: transparent rgba(255, 255, 255, 0.25) transparent rgba(255, 255, 255, 0.75);
	-webkit-transform: translate3d(-15px, 0, 0);
	transform: translate3d(-15px, 0, 0);
}

#info .refresh {left: 100px;}
#info .refresh a span:before {position: absolute; left: 9px; top: 9px; width: 10px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.75) transparent rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.75); border-radius: 6px;
}
#info .refresh a span:after {position: absolute; left: 16px; top: 9px; border: 3px solid; border-color: transparent rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.75) transparent;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: translate(0.5px, 0) scale(0.8, 0.8);
	transform: translate(0.5px, 0) scale(0.8, 0.8);
}
#info.detail .refresh a span:before,
.bright #info .refresh a span:before {border-color: #fff transparent #fff #fff;}
#info.detail .refresh a span:after,
.bright #info .refresh a span:after {border-color: transparent #fff #fff transparent;}
#info .refresh span {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
}
.hoverable #info .refresh a:hover span {
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}

#info .button {opacity: 0;}
#info.show-buttons .button {opacity: 1;
	transition: opacity 1s;
}


.handle-box {position: absolute; left: 50%; bottom: 30px; width: 90px; height: 90px; margin-left: -45px; border-radius: 100%; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1); opacity: 0; z-index: 998;
	-webkit-transform: scale3d(0, 0, 1);
	transform: scale3d(0, 0, 1);
}
.handle-box.added {opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	-webkit-transition: transform 0.35s cubic-bezier(0.190, 1.000, 0.150, 1.150), opacity 0.25s ease-out;
	transition: transform 0.35s cubic-bezier(0.190, 1.000, 0.150, 1.150), opacity 0.25s ease-out;
}
.handle-box.use-arrow-key {opacity: 0.35; pointer-events: none;}
.handle-box .arrow {position: absolute; left: 0; right: 0; top: 50%; height: 10px; margin-top: -5px;
	-webkit-transform: scale3d(0.7, 0.7, 1);
	transform: scale3d(0.7, 0.7, 1);
}
.handle-box .arrow.y {
	-webkit-transform: scale3d(0.7, 0.7, 1) rotate(90deg);
	transform: scale3d(0.7, 0.7, 1) rotate(90deg);
}
.handle-box .arrow:before,
.handle-box .arrow:after {position: absolute; left: 0; top: 0; width: 10px; height: 10px; content: ''; border: solid rgba(0, 0, 0, 0.15); border-width: 2px 0 0 2px; box-sizing: border-box;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.handle-box .arrow:after {left: auto; right: 0;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.handle-box .handle {position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 100%; background: rgba(255, 255, 255, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.35); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.handle-box .handle:before {position: absolute; left: -50%; top: -50%; right: -50%; bottom: -50%; content: ''; border-radius: 100%; background: rgba(0, 0, 0, 0);}
.handle-box .handle.dragging {pointer-events: none;}
.handle-box .handle:not(.dragging) {
	-webkit-transition: all 0.25s cubic-bezier(0.230, 1.000, 0.320, 1.100);
	transition: all 0.25s cubic-bezier(0.230, 1.000, 0.320, 1.100);
}


[class^="guide"] {position: fixed; left: 50%; top: 50%; z-index: 1000; opacity: 0; pointer-events: none;
	-webkit-transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-webkit-transition-property: opacity, -webkit-transform;
	transition-property: opacity, transform;
}
[class^="guide"].show {opacity: 0.55;}
div[class^="guide"].hide {opacity: 0;
	-webkit-transition-delay: 0.35s;
	transition-delay: 0.35s;
}

.guide-pointer {width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 15px; background: #fff; box-shadow: 0 0 3px #fff;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
.guide-pointer.show {opacity: 0.45;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.guide-pointer.show.press {opacity: 0.65;
	-webkit-transform: scale(0.85, 0.85);
	transform: scale(0.85, 0.85);
}
.guide-pointer:before {position: absolute; left: 0; top: 0; width: inherit; height: inherit; content: ''; border-radius: inherit; background: inherit; box-shadow: inherit; opacity: 0.3;
	-webkit-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.guide-pointer.press:before {
	-webkit-transform: scale(1.9, 1.9);
	transform: scale(1.9, 1.9);
	/*transition-timing-function: cubic-bezier(0, 0.8, 0, 1.5);*/
}
.guide-pointer.hide:before {
	-webkit-transition-delay: 0.35s;
	transition-delay: 0.35s;
}

.guide-device {width: 40px; height: 80px; margin: -40px 0 0 -20px; 
	-webkit-transform: scale3d(0.8, 0.8, 1);
	transform: scale3d(0.8, 0.8, 1);
	-webkit-perspective: 300px;
	perspective: 300px;
}
.guide-device.show {opacity: 0.55;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
.guide-device div {position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 5px; background: #fff;}
.guide-device div:before {position: absolute; left: 3px; right: 3px; top: 9px; bottom: 9px; content: ''; background: #000; opacity: 0.35;}

.guide-blocker {left: 0; top: 0; right: 0; bottom: 0; background: #fff; opacity: 0; pointer-events: auto; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}


.cover {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 997;
	-webkit-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
}


.font-checker {position: absolute; left: -999em; top: 0; font-size: 50px; font-weight: 500;}


@media screen and (max-width: 640px) {
	#info .detail .inside {padding: 20px 15px;}
	#info .button {left: 15px;}
	#info .link {left: 55px;}
	#info .refresh {left: 55px;}
	#info .refresh {left: 95px;}
}