@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');

* { 
margin:0px;
padding:0px;
box-sizing: border-box; 
}

html{
	font-size:18px;
	height:100vh;
}

body {
	font-family: 'Noto Sans KR', sans-serif;
	font-size:0.78rem;
	width:100%;
	height: 100vh;
	display:flex; align-items:center; flex-direction:column;
}

header{
	width:100%; 
	flex-shrink: 0;
	display:flex; justify-content:center; flex-direction:column;
}

section{
	flex: 1 0 auto;
	width:100%;
}


footer{
	flex-shrink: 0;
	height:13.61rem;
	width:100%;
	background:#333333;
	display:flex; justify-content:center;
}


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

select { 
	-webkit-appearance: none; 
	-moz-appearance: none; 
	appearance: none; 
}

select::-ms-expand {
	display: none;
}

.close{
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	cursor:pointer;
}

.close:hover{
	-ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}


.close{
	width:30px;
	height:30px;
	-webkit-transition-duration: 0.5s; 
	transition-duration: 0.5s;
	cursor:pointer;
	position:relative;
	display:flex; justify-content:center; align-items:center;
}

.close:hover{
	-ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.close > DIV{
	top:0;
	position:absolute;
}

.close > DIV:first-child{
	width:1px;
	height:100%;
	background:#FFFFFF;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.close > DIV:last-child{
	width:1px;
	height:100%;
	background:#FFFFFF;
	-ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input::-ms-clear { display:none; } /*ie input X버튼*/
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
	color:transparent; 
}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
	color:transparent; 
}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
	color:transparent; 
}
input::placeholder {
	font-size: 0.78rem;
	color:rgba(0,0,0,0.5);
}


.font12{ font-size:0.67rem; }
.font14{ font-size:0.78rem; }
.font16{ font-size:0.89rem; }
.font18{ font-size:1rem; }
.font20{ font-size:1.11rem; }
.font22{ font-size:1.22rem; }
.font24{ font-size:1.33rem; }
.font26{ font-size:1.44rem; }
.font28{ font-size:1.56rem; }
.font30{ font-size:1.67rem; }
.font32{ font-size:1.78rem; }
.font34{ font-size:1.89rem; }
.font36{ font-size:2rem; }
.font38{ font-size:2.11rem; }
.font46{ font-size:2.56rem; }
.font48{ font-size:2.67rem; }
.font50{ font-size:2.78rem; }
.font72{ font-size:4.00rem; }



/********************************************************/
.popup{
	position:fixed;
	display:none; 
	width:100%; height:100%;
	left:0;
	z-index:1100; 
}
.popup > .background{
	position:absolute;
	left:0px; top:0px;
	width:100%; height:100%;
	background:rgba(0,0,0,0.5);
	cursor:pointer;
	z-index:-2;
}
.popup > .loading{
	z-index:-1;
}
.popup > DIV{
	position:absolute;
}
.popup.show{
	display:inline-block;
}
.popup.show > .background{
	animation: fadein 1s;
	-moz-animation: fadein 1s; /* Firefox */
	-webkit-animation: fadein 1s; /* Safari and Chrome */
	-o-animation: fadein 1s; /* Opera */
}


.popup2{
	position:fixed;
	display:none; 
	width:100%; height:100%;
	z-index:1110; 
}
.popup2 > .background{
	position:absolute;
	left:0px; top:0px;
	width:100%; height:100%;
	background:rgba(0,0,0,0.5);
	cursor:pointer;
	z-index:-2;
}
.popup2 > .loading{
	z-index:-1;
}
.popup2 > DIV{
	position:absolute;
}
.popup2.show{
	display:inline-block;
}
.popup2.show > .background{
	animation: fadein 1s;
	-moz-animation: fadein 1s; /* Firefox */
	-webkit-animation: fadein 1s; /* Safari and Chrome */
	-o-animation: fadein 1s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}


.loading {
	position:relative;
    height: 100px;
    width: 100px;
	display:flex; justify-content:center; align-items:center;
	transition: all 0.5s ease-in-out;
    color: #FFF000; font-weight: bold;
	left:50%; top:50%; transform:translate(-50%,-50%);
}

.loading::after{
	content: "";
	position:absolute;
	width:100%; height:100%; 
    border-radius: 100%;
	left:0px; top:0px;
	border: 2px solid transparent;
	border-color: transparent #FFF000;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
}

/********************************************************/


.inputLogin{
	overflow:hidden;
	position:relative;
	border: 1px solid #EEEEEE;
	border-radius:5px;
	width:100%;
	height:100%;
}

.inputLogin .line{
	position:absolute;
	width:calc(100% - 20px);
	left:10px;
	height:1px;
	bottom:5px;
	display:flex; justify-content:center; align-items:center;
}

.inputLogin .line > div{
	width:0%; height:100%;
	background:#fe8130;
	transition: width 0.3s ease;
}

.inputLogin input{
	width:100%;
	height:100%;
	border: none;
	outline: none;
	padding-left:10px;
	padding-top:7px;
	background:#e8f0fe;
}

.inputLogin .textA{
	position:absolute;
	top:0px; 
	left:10px;
	width:100%;
	height:100%;
	display:flex; align-items:center;
	pointer-events: none;
	transition: all 0.3s ease;
}

.inputLogin .textB{
	position:absolute;
	bottom:0px; 
	right:15px;
	font-size:10px;
	pointer-events: none;
	opacity:0;
	transition: all 0.3s ease;
}

.inputLogin input:focus + .textA, 
.inputLogin input:valid + .textA {
	transform: translateY(-30%);
	font-size:9px;
	color:#3f63ad;
}

.inputLogin input:focus ~ .textB {
	opacity:1;
}

.inputLogin input:focus ~ .line > div {
	width:100%;
}


.checkboxTA input{
	display:none;
}

.checkboxTA span{
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
}

.checkboxTA .icon{
	position:relative;
	width:20px;
	height:20px;
	border:1px solid #EEEEEE;
	border-radius:3px;
	transition:background 0.1s ease;
}

.checkboxTA .icon::after{
	content:'';
	position:absolute;
	top:-6px;
	left:9px;
	width:7px;
	height:17px;
	border-right:2px solid #EEEEEE;
	border-bottom:2px solid #EEEEEE;
	transform:rotate(45deg) scale(0);
	transition:all 0.3s ease;
	transition-delay:0.15s;
	opacity:0;
}

.checkboxTA input:checked ~ .icon{
	border-color:transparent;
	border:1px solid #EEEEEE;
	animation:jelly 0.6s ease;
}

.checkboxTA input:checked ~ .icon::after{
	opacity:1;
	transform:rotate(45deg) scale(1);
}

.checkboxTA .text{
	margin-left:5px;
}

@keyframes jelly{
	from{transform: scale(1,1);}
	30%{transform: scale(1.25,0.75);}
	40%{transform: scale(0.75,1.25);}
	50%{transform: scale(1.15,0.85);}
	65%{transform: scale(0.95,1.05);}
	75%{transform: scale(1.05,0.95);}
	to{transform: scale(1,1);}
}

.dotArrow{
	width:150px; height:150px; border-radius:50%;
	border-width:1px; border-color:#fe8130; border-style:solid;
	bottom:150px;
	position:relative;
	left:50%; transform:translateX(-50%) scale(0.7);
	display:flex; justify-content:center; align-items:center;
	padding-top:55px;
	cursor:pointer;
	animation: dotArrow 1s 0.3s infinite alternate;
	transition:all 0.3s ease;
}

.dotArrow > div:nth-child(1){
	position:absolute;
	color:#fe8130; letter-spacing: 5px;
	margin-top:-50px;
	transition:all 0.3s ease;
}

.dotArrow > div:nth-child(2){
	position:absolute;
	width:24px;
	margin-left:-7px;
	transform:rotate(45deg);
	transform-origin:center;
	transition:all 0.3s ease;
	border-width:5px 0px 0px 0px; border-color:#fe8130; border-style:dotted;
}

.dotArrow > div:nth-child(3){
	position:absolute;
	width:24px;
	margin-left:7px;
	transform:rotate(-45deg);
	transform-origin:center;
	transition:all 0.3s ease;
	border-width:5px 0px 0px 0px; border-color:#fe8130; border-style:dotted;
}

.dotArrow > div:nth-child(4){
	position:absolute;
	margin-top:-15px;
	left:50%; transform:translateX(-50%);
	width:0px; height:25px;
	transition:all 0.3s ease;
	border-width:0px 5px 0px 0px; border-color:#fe8130; border-style:dotted;
}

@keyframes dotArrow {
	0% { bottom:150px; }
	100% { bottom:180px;; }
}

.dotArrow.show{
	border-color:#FFFFFF;
}
.dotArrow.show > div:nth-child(1){
	color:#FFFFFF;
}
.dotArrow.show > div{
	border-color:#FFFFFF;
}