@import url(./fonts.css);

/* 기본 셋팅 */
@media all{
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{
		margin:0;
		padding:0
	}
	html,body{
		font-family: "Gongjungjeonwha", sans-serif;
		font-weight: 800;
		width:100%;
		height:100%;
		word-break: keep-all;
		overflow: hidden;
	}
	html{
/*		overflow-y:scroll*/
	}
	* {
		-moz-font-smoothing: antialiased;
		box-sizing: border-box;
	}
	*:focus {
		outline: none;
	}
	img {
		border: 0;
	}
	label,button{
		border: 0;
		cursor:pointer;
		background: transparent;
	}
	table{
		border-collapse:collapse;
		border-spacing:0;
	}
	a {
		display: inline-block;
		width: 100%;
		height: 100%;
	  }
	a:hover {
		color: inherit;
		text-decoration: none;
	}
	a:visited, a:active, a:link {
		color: inherit;
		text-decoration: none;
	}
	ol, ul , li{
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
	}
  input{
    font-family: "Gongjungjeonwha", sans-serif;
		font-weight: 800;
  }
	.focus{
		color: #ff6363;
	}
	.quiz .title .focus{
		color: #ff6363;
		border-bottom: 1px solid #ff6363;
	}
  .finished button{
    cursor: none;
  }
}

/* intro(간지) */
@media all {
    .subintro {
        position: absolute;
        top: 0;
        left: 0;
        width: 1280px;
        height: 720px;
        background: url(../img/subintro.png) no-repeat 0 0;
        display: flex;
        justify-content: center;
        z-index: 4;
    }

    .subintro .txt {
        position: absolute;
        top: 451px;
        font-size: 50px;
        word-spacing: -5px;
        letter-spacing: -1px;
        border-bottom: 4px dotted #e97010;
        text-align: center;
    }

    .subintro .txt::before {
        content: url(../img/point.png);
        position: absolute;
        width: 87px;
        height: 72px;
        margin: -80px 0 0 -20px;
    }
}

@media all{
/*
	#active_main{
		font-size:16px;
		width: 100%;
		height: 100%;
	}
*/
  	#active_main{
		font-size:16px;
		width: 1280px;
		height: 720px;
    	overflow: hidden;
	}
	.blank_box{
		display: inline-block;
		width: 100px;
	}
	#mobileLoading{
		top:0px;
		left: 0px;
		width:100%;
		height: 100%;
		position: absolute;		
		background: #fff;
		z-index: 9999999;

		display: none;
	}
	#mobileLoading{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.pre_wrap{
		position: absolute;
		z-index: 99;
		left:0;
		top:0;
		right:0;
		bottom:0;
		background-color: rgba(0, 0, 0, 0.7);
		display: none;
	}

	.pre_wrap button{
		position: absolute;
		border:none;
		line-height: 0;
		width:100px;
		height:100px;
		background: url(../img/preplay.png) no-repeat 50% 50%;
		cursor: pointer;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	particule {
		position: absolute;
		top: 0;
		left: 0;
   		/*	 border-radius: 50%;*/
		width: 30px;
		height: 30px;
		box-shadow: 1px 1px 4px #eb6383;
	  	z-index:5;
   	}


	@keyframes hint_mo {
		0% {	transform: translateY(0)}
		45% {	transform: translateY(-10px)	}
		75% {	transform: translateY(10px)	}
		100% {	transform: translateY(0)	}
	}
	/* 위아래 흔들림2 */
	.hint{
		animation-name: hint_mo;
		animation-duration: .3s;
		animation-iteration-count: 2;
		transform-origin: 50% 50%;
	}
	.dim {
		filter: grayscale(1);
	}
	.oxpop {
		position: absolute;
		top: 0;
		left: 0;
		transition: all 1s;
		display: none;
	}
	.oxpop.active{
		display: block;
		z-index: 5;
	}
	
  .sub_text .yellow {
    padding: 2px 1px 0px 1px;
    background: #fbdf5a;
  }
	.section > header {
        position: relative;
        width: 100%;
        padding: 15px 50px 10px 65px;
        font-size: 1.625rem;
        color: #fff;
        background: #1d2c46;
        min-height: 53px;
        max-height: 53px;
        z-index: 1;
    }
    .section > header::before{
        display: inline-block;
        position: absolute;
        content: '';
        top: 10px;
        left: 13px;
        width: 39px;
        height: 31px;
        background: url(../../common_act/img/header_before.png) no-repeat 0 0;
    }
    .section > header::after{
        display: inline-block;
        position: absolute;
        content: '';
        top: 22px;
        left: calc(100% - 35px);
        width: 18px;
        height: 10px;
        background: url(../../common_act/img/header_after.png) no-repeat 0 0;
    }

}

/*// scaffold 관련 ///////////////////////////////////////////////*/
@media all {
    .scaffold {
        position: absolute;
        top: 720px;
        left: 40px;
        transform: translateY(0px);
        transition: all 1s;
        z-index: 3;
    }
    .scaffold.active {
        transform: translateY(-183px);
    }
    .scaffold img {
        display: none;
    }
    .scaffold img:nth-child(1) {
        display: block;
    }
  
    /* 가디언 */
    .g_ img{  width: 180px;  height: 220px;  }
    @keyframes gadi_wait {  100% { background-position: -18180px 0;  }    }
    .g_ img.wait{
      background: url("../img/scaffold/gadi_wait.png") no-repeat 0 0 / auto 180px;
      background-size: 18180px 220px;
      animation: gadi_wait 3s infinite steps(101);
    }
    
    @keyframes gadi_talk {  100% { background-position: -27000px 0;  }    }
    .g_ img.talk {
      background: url("../img/scaffold/gadi_talk.png") no-repeat 0 0 / auto 180px;
      background-size: 27000px 220px;
      animation: gadi_talk 5s infinite steps(150);
    }
    
    @keyframes gadi_yes {  100% { background-position: -18180px 0;  }    }
    .g_ img.yes {
      background: url("../img/scaffold/gadi_yes.png") no-repeat 0 0 / auto 180px;
      background-size: 18180px 220px;
      animation: gadi_yes 3s infinite steps(101);
    }
    
    @keyframes gadi_no {  100% { background-position: -18180px 0;  }    }
    .g_ img.no {
      background: url("../img/scaffold/gadi_no.png") no-repeat 0 0 / auto 180px;
      background-size: 18180px 220px;
      animation: gadi_no 3s infinite steps(101);
    }
    
    /* 모리박사 */
    .d_ img{  width: 180px;  height: 220px;  }
    @keyframes mori_wait {  100% { background-position: -18180px 0;  }    }
    .d_ img.wait{
      background: url("../img/scaffold/mori_wait.png") no-repeat 0 0 / auto 180px;
      background-size: 18180px 220px;
      animation: mori_wait 3s infinite steps(101);
    }
    
    @keyframes mori_talk {  100% { background-position: -30600px 0;  }    }
    .d_ img.talk {
      background: url("../img/scaffold/mori_talk.png") no-repeat 0 0 / auto 180px;
      background-size: 30600px 220px;
      animation: mori_talk 5s infinite steps(170);
    }
    
    @keyframes mori_yes {  100% { background-position: -18180px 0;  }    }
    .d_ img.yes {
      background: url("../img/scaffold/mori_yes.png") no-repeat 0 0 / auto 180px;
      background-size: 18180px 220px;
      animation: mori_yes 3s infinite steps(101);
    }
    
    @keyframes mori_no {  100% { background-position: -18180px 0;  }    }
    .d_ img.no {
      background: url("../img/scaffold/mori_no.png") no-repeat 0 0 / auto 180px;
      background-size: 18180px 220px;
      animation: mori_no 3s infinite steps(101);
    }
    
    /* 모모 */
    .m_ img{  width: 160px;  height: 220px;  }
    @keyframes momo_wait {  100% { background-position: -16160px 0;  }    }
    .m_ img.wait{
      background: url("../img/scaffold/momo_wait.png") no-repeat 0 0 / auto 160px;
      background-size: 16160px 220px;
      animation: momo_wait 3s infinite steps(101);
    }
    
    @keyframes momo_talk {  100% { background-position: -27200px 0;  }    }
    .m_ img.talk {
      background: url("../img/scaffold/momo_talk.png") no-repeat 0 0 / auto 160px;
      background-size: 27200px 220px;
      animation: momo_talk 5s infinite steps(170);
    }
    
    @keyframes momo_yes {  100% { background-position: -16160px 0;  }    }
    .m_ img.yes {
      background: url("../img/scaffold/momo_yes.png") no-repeat 0 0 / auto 160px;
      background-size: 16160px 220px;
      animation: momo_yes 3s infinite steps(101);
    }
    
    @keyframes momo_no {  100% { background-position: -16160px 0;  }    }
    .m_ img.no {
      background: url("../img/scaffold/momo_no.png") no-repeat 0 0 / auto 160px;
      background-size: 16160px 220px;
      animation: momo_no 3s infinite steps(101);
    }
}