* {
    font-family: 'Spoqa Han Sans', 'Malgun Gothic', sans-serif;
    padding:0;
    margin:0;
    border:0;
}

*::-webkit-scrollbar {
	width: 8px;
	height:12px;
	border-radius:3px;
	margin-right:2px;
	background:#ccc;
}

*::-webkit-scrollbar-thumb {
	border-radius:3px;
	background:white;
}

body {
    background:#09f;
}

/*레이아웃*/
h1 {
    color: white;
    font-size: 48pt;
}

#appContent {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: calc(200vh - 62px);
    transition: none;
    -webkit-transition: none;
}

.animateView {
    -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.77, 0, 0.175, 1) !important;
    transition: transform 0.75s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

#appView {
    position:absolute;
    width:inherit;
    height:inherit;
    overflow:hidden;
}

#swapViewButton {
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    position: absolute;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, #70b500 0%, #64a200 100%);
    cursor: pointer;
    text-align: center;
    font-size: 14pt;
    display: none;
}

.verticalHelper {
    height: inherit;
    display: inline-block;
    vertical-align: middle;
}

#appTitle, #appTitle * {
    -webkit-transition: opacity 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    transition: opacity 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

#appTitle {
    background:inherit;
}

.alpha0, .alpha0 * {
    opacity:0;
    z-index:1;
}

.loader {
    background:url('../img/icon/loader_icon.gif');
    background-position:center;
    background-size:cover;
    width:48px;
    height:48px;
    display:inline-block;
}

.popupHomeIcon {
    background: white;
    border-radius: 5px;
    display: inline-block;
    float: right;
    padding: 15px;
    margin: 15px;
    text-align: center;
}

.popupHomeIconDeny {
    float: right;
    margin-top: 35px;
    cursor: pointer;
    color: #09f;
}

.popupContainer {
    -webkit-transition: opacity 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    transition: opacity 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    width: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0;
    display: none;
}

.popupContainer * {
    opacity:0;
}

.popupAppear {
    display: block !important;
    margin-top: 0px !important;
    opacity: 1;
    z-index: 4;
}

.popupAppear * {
    opacity: 1;
}

#navi {
    top: 0;
    width: 100%;
    list-style-type: none;
    position: fixed;
    z-index: 2;
}

#navi li {
    float: left;
}

#navi li a {
	transition:all 0.15s;
    -webkit-transition:all 0.15s;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navi li a:hover {
    background-color: #fff;
    color: #09f;
}

.container {
    text-align:center;
    display:inline-block;
    width:100%;
}

.container .button {
    padding: 9px 15px 9px 15px;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px;
    background: linear-gradient(to bottom, #70b500 0%, #64a200 100%);
    color: white;
    font-size: 14pt;
    font-weight: 700;
    box-shadow: 0 2px 0 #3f6f21;
}

.container .button:hover {
    background: linear-gradient(to bottom, #64a200 0%, #578c00 100%);
}

.container.mainBG {
    background: url('../img/main_background.jpg');
    background-position:center;
    background-size:cover;
    background-attachment:fixed;
    width: 100%;
    height: 960px;
}

.container.mainEndBG {
    background: url('../img/main_end_background.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 960px;
    vertical-align:bottom;
}

.container .middleHelper {
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

.container .symbol {
    vertical-align:middle;
    margin-left:5%;
    margin-right:5%;
    width:64px;
    height:auto;
}

.container .symbol2 {
    vertical-align:middle;
    margin-left:5%;
    margin-right:5%;
    width:58px;
    height:auto;
}

.pageTitle {
    padding-top:100px;
    padding-left:12%;
}

.text {
	color: white;
	font-size: 18pt;
}

.text.desc {
    padding-left: 15%;
    padding-right: 12%
}

.text a {
    color: #87cefa;
    text-decoration: underline;
}

.container.mainBG, .container.mainEndBG, .full {
    height: 100vh;
}

.centerDevice {
    padding-top: 40vh;
}

[contenteditable=true]:empty:before {
    content: attr(hint);
    display: block;
    color : rgba(255, 255, 255, 0.5);
}

/* Wallpaper Engine */
@media screen and (device-width: 100vw) and (device-height: 100vh) {

    .wallpaperHide {
        display:none;
    }

    .container.mainBG {
        display:block;
    }
}

/* Tablet */
@media screen and (min-width: 960px) {

}

/* Mobile */
@media screen and (max-width: 480px) {
    .popupContainer {
        font-size:9pt;
    }
    
    .pageTitle {
        padding-top: 75px;
        padding-left: 6%;
    }

    h1 {
        font-size: 36px;
    }

    .text {
        font-size: 12pt;
    }

    .text.desc {
        padding-left: 7%;
        padding-right: 6%
    }

    .container .symbol {
        margin-left: 3.5%;
        margin-right: 3.5%;
        width: 48px;
    }

    .container .symbol2 {
        margin-left: 3.5%;
        margin-right: 3.5%;
        width: 43.5px;
    }
}