@charset 'utf-8';

/* ¸ð¹ÙÀÏ ************************************************************************************************************************************************************************/
@media only screen and (min-width:100px) and (max-width:1024px) {

	body { 		
		background-repeat: no-repeat; background-image: url('/images/back_m.jpg'); background-size: cover;
		background-size:100%; 
	}

	.layout_header { text-align:center; margin:10px; } 
	.layout_headers { width:100%; display:inline-block; }
	.layout_headers ul { text-align:left; }
	.layout_headers ul li { display:inline-block; }
	.header_logo { height:36px; margin-bottom:5px; }
	.layout_headers_txt { margin-left:20px; font-family:'SpoqaHanSansNeo_Medium'; font-size:18px; letter-spacing: 0.01em; line-height:1.0em; }

	.layout_cont { width:100%; display:inline-block; }
	.layout_cont_txt { 
		margin-top:0px; margin-bottom:10px; 
		text-align:center; font-family:'SpoqaHanSansNeo_Medium'; font-size:22px; letter-spacing: 0.01em; line-height:1.7em;
	}
	.layout_cont_txt b {  font-size:40px; color:#717be9; }

	.layout_cont_inquiry {
		margin-top:20px; 
		text-align:center; font-family:'SpoqaHanSansNeo_Regular'; font-size:18px; letter-spacing: 0.01em; line-height:1.0em;
	}

	.layout_cont_bn { text-align:center; }
	.layout_cont_bns { text-align:left; margin-top:30px; }
	.layout_cont_bns ul { text-align:center; }
	.layout_cont_bns ul li { float:left; width:100%; text-align:center; }
	.layout_cont_bnsBoxs  { width:96%; margin:0 auto; text-align:center; }
	.layout_cont_bnsBox {
		cursor:pointer; height:60px;
		padding:10px; border:2px solid #91bdf7;
		border-radius:16px; background: linear-gradient(120deg, #ecf4f9, #fff); box-shadow: 0 4px 4px -4px #777;
		margin-bottom:15px;
	}
	.layout_cont_bnsBox:hover { border:2px solid #a272ff; }
	.layout_cont_bnsBox dl { text-align:center; }
	.layout_cont_bnsBox dl dd { display:inline-block; float:left; }
	.layout_cont_bnsBox_dd_1 { width:40%; text-align:center; }
	.layout_cont_bnsBox_dd_2 { 
		width:60%;  text-align:left;
		font-family:'SpoqaHanSansNeo_Regular'; font-size:16px; letter-spacing: 0.01em; line-height:1.0em;
	}
	.layout_cont_bns_span {
		padding:5px 20px 5px 20px;  background: linear-gradient( to right, #30c6fb, #b08bfe); border-radius:10px;
		font-family:'SpoqaHanSansNeo_Medium'; font-size:14px; letter-spacing: 0.01em; line-height:1.0em; 
		margin-right:20px;
	}
	.read_icon_go { margin-left:15px; height:10px; }
	.sns_icon { height:60px; }

	.main_chart { text-align:center; }
	.main_charts { margin-top:10px; width:100%; height:500px; display:inline-block; }

.movie {
    margin:0 auto;
    width:100%;
    text-align:center;
    position:relative;
    overflow:hidden;
  }

  .movie video {
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
  }

  .movie #hint {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-size:1.2em;
    background:rgba(0,0,0,0.5);
    padding:10px 20px;
    border-radius:8px;
    animation: blink 1.2s infinite;
  }

  @keyframes blink {
    0%,100% { opacity:0.4; }
    50% { opacity:1; }
  }

} /* ¸ð¹ÙÀÏ end */

/* PC ************************************************************************************************************************************************************************/
@media  all and (min-width : 1025px)  {

	body { 		
		background-repeat: no-repeat; background-size:100%; background-image: url('/images/back_pc.jpg'); background-size: cover;
		background-position:top; text-align:center; height:800px; 	
	}
	.layout_header { text-align:center; margin:30px; } 
	.layout_headers { width:100%; display:inline-block; }
	.layout_headers ul { text-align:left; }
	.layout_headers ul li { display:inline-block; }
	.header_logo { height:36px; margin-bottom:5px; }
	.layout_headers_txt { margin-left:30px; font-family:'SpoqaHanSansNeo_Medium'; font-size:18px; letter-spacing: 0.01em; line-height:1.0em; }

	.layout_cont { width:100%; display:inline-block; }
	.layout_cont_txt { 
		margin-top:60px;  margin-bottom:15px; 
		text-align:center; font-family:'SpoqaHanSansNeo_Bold'; font-size:50px; letter-spacing: 0.01em; line-height:1.5em;
	}
	.layout_cont_txt b {  font-size:80px; color:#717be9; }

	.layout_cont_inquiry {
		margin-top:50px; 
		text-align:center; font-family:'SpoqaHanSansNeo_Regular'; font-size:30px; letter-spacing: 0.01em; line-height:1.0em;
	}

	.layout_cont_bn { margin:0 auto; width:1000px; text-align:center; }
	.layout_cont_bns { width:100%; display:inline-block; text-align:left; margin-top:30px; }
	.layout_cont_bns ul { text-align:center; }
	.layout_cont_bns ul li { display:inline-block; }
	.layout_cont_bnsBoxs  { text-align:center; }
	.layout_cont_bnsBox {
		width:400px; display:inline-block; cursor:pointer;
		margin:20px; padding:20px; border:2px solid #91bdf7;
		border-radius:16px; background: linear-gradient(120deg, #ecf4f9, #fff); box-shadow: 0 4px 4px -4px #777;
	}
	.layout_cont_bnsBox:hover { border:2px solid #a272ff; }
	.layout_cont_bnsBox dl { text-align:center; }
	.layout_cont_bnsBox dl dd { display:inline-block; float:left; }
	.layout_cont_bnsBox_dd_1 { width:40%; text-align:center; }
	.layout_cont_bnsBox_dd_2 { 
		width:60%;  text-align:left;
		font-family:'SpoqaHanSansNeo_Regular'; font-size:20px; letter-spacing: 0.01em; line-height:1.4em;
	}
	.layout_cont_bns_span {
		padding:5px 20px 5px 20px;  background: linear-gradient( to right, #30c6fb, #b08bfe); border-radius:10px;
		font-family:'SpoqaHanSansNeo_Medium'; font-size:18px; letter-spacing: 0.01em; line-height:1.0em; 
		margin-right:20px;
	}
	.read_icon_go { margin-left:15px; height:10px; }
	.sns_icon { height:100px; }

	.main_chart { margin:0 auto; width:1300px; text-align:center; }
	.main_charts { margin-top:20px;  width:100%; height:500px; display:inline-block; }

.movie {
    margin:0 auto;
    width:1000px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }

  .movie video {
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
  }

  .movie #hint {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-size:1.2em;
    background:rgba(0,0,0,0.5);
    padding:10px 20px;
    border-radius:8px;
    animation: blink 1.2s infinite;
  }

  @keyframes blink {
    0%,100% { opacity:0.4; }
    50% { opacity:1; }
  }

} /* PC end */