@charset "utf-8";

@media screen and (min-width:1060px){
}

@media screen and (max-width:1059px){
	.main3::before{background-size:60%;}
}

@media screen and (max-width:1059px) and (min-width:551px){
}

@media screen and (min-width:931px){
	.header {z-index: 1000;}

	.openbtn{display:none;}
#g-nav-list{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* -webkit-box-align: end; */
    -ms-flex-align: end;
    align-items: flex-end;
    height: 100%;
}
	
	.sp_btn{display:none;}
	.r_nav2{display:none;}
	
	
}

@media screen and (max-width:930px){

/******************************** hamburger *************************************/

	#g-nav{
		position:fixed;
		z-index:-1;
		opacity:0;
		top:0;
		right: -120%;
		width:80%;
    	height: 100vh;
		transition: all 0.6s;		
		visibility: hidden;
	}

	#g-nav.panelactive{
		opacity:1;
		z-index:999;
		background:#000;
		width:80%;
		height:100vh;
		visibility: visible;
		right:0;
	}

	.openbtn{
/*		position:fixed;
		top:10px;
		right:10px;*/
		position: relative;
		z-index:9999;
		cursor: pointer;
		width:50px;
		height:50px;
		background:#000;
		border-radius:5px;
	}

	.openbtn span{
		display:inline-block;
		transition:all .4s;
		position:absolute;
		left:14px;
		height:3px;
		border-radius: 2px;
		background-color:#fff;
		width:45%;		
	}
	.openbtn.active span{
		background:#fff;
	}
	
	.openbtn span:nth-of-type(1){top:13px;}
	.openbtn span:nth-of-type(2){top:19px;}
	.openbtn span:nth-of-type(3){top:25px;}
	.openbtn span:nth-of-type(3)::after {
	content:"MENU";
	position: absolute;
	top: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    color: #fff;
    font-size: 0.47rem;
	text-transform: uppercase;
	white-space: nowrap;
	}
	.openbtn.active span:nth-of-type(3)::after {
		color:#fff;
	}
	
	.openbtn.active span:nth-of-type(1) {
		top: 14px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.openbtn.active span:nth-of-type(3){
		top: 26px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
	.openbtn.active span:nth-of-type(3)::after {
	  content:"CLOSE";
	  transform: translateY(0) rotate(-45deg);
	  top:5px;
	  left:4px;
	}

	#g-nav.panelactive #g-nav-list{
		position:fixed;
		z-index:999;
		opacity:1;
	}

	#g-nav #g-nav-list{
		width:80%;
		padding:2rem;
		height:100vh;
		overflow: auto;
		-webkit-overflow-scrolling:touch;
		background:#000;
		color:#fff;
		opacity:0;
	}
	

	#g-nav ul{display:block;}
	#g-nav li{list-style:none;}

	#g-nav li a{text-decoration: none; color:#fff; padding:1.2rem 1rem; width:100%; display:flex; align-items: center;	justify-content:flex-start;}
	#g-nav li+li{border-top:1px dotted #fff;}
	#g-nav.panelactive .con{position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index:-1; background: rgba(0,0,0,.5); display: block;}

	.r_top1{display:none;}
	
	.rt2_c h1{width:45%;}
	.r_nav1{margin-top:2rem;}

	.main1{
		height: -webkit-calc(90vh - 104px);
		height: calc(90vh - 104px);
	}

	.main2_bg{
		height: calc(90vh - 104px);
	}
	
	.main2_1::before {background: url(../img/main3.png) bottom right no-repeat; background-size:100%;}
	.main2_1 {width: 32%;}
	.main2 {padding: 5rem 0 8rem;}
	.m2_d2{width:80%;}
	
	.news_div{flex-wrap: wrap; grid-row-gap: 1.5rem;}
	.news_div1{width:100%;}
	.nav_btn{display:none;}
	
	.sp_btn{width:50px; height:50px; background:#AB263C; border-radius:5px; display:flex; align-items: center; justify-content: center; grid-column-gap: 0.5rem; padding:0.3rem; flex-direction: column;}
	.sp_btn span{font-size: 0.47rem; color:#fff;}
	.icon3{max-width:22px;}
	.menubox{display:flex; align-items: center; grid-column-gap: 0.6rem;}
	
	.header{width:100%; z-index: 999; background:#fff !important;}
	.header.fixed{position: fixed; z-index: 999; top:0; left:0; animation: DownAnime 0.5s forwards;}
	.header.fixed .rt2_c h1 {width: 30%;}
	.r_nav1{border-bottom:1px dotted #fff;}
	/*
	.r_nav2 li a span{position: relative; padding-left:1rem;}
	.r_nav2 li a span::before{content:""; position: absolute; top:0; bottom:0; left:0; margin:auto; box-sizing: border-box; width: 10px; height: 10px; border: 6px solid transparent; border-left: 7px solid #fff;}
	*/
	.wechat{width:18%;}
	
	.sub1main-1,.sub1main-4{width:69%;}
	.sub1main-2{width:31%;}
	/*
	.r_nav1 li a span{position: relative; padding-left:1rem;}
	.r_nav1 li a span::before{content:""; position: absolute; top:0; bottom:0; left:0; margin:auto; box-sizing: border-box; width: 10px; height: 10px; border: 6px solid transparent; border-left: 7px solid #fff;}
	*/
}

@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}

@media screen and (max-width:850px){
	.main3_div{flex-wrap: wrap; justify-content: center;}
	.main3_div1{width:100%; max-width: inherit; display:flex; align-items: center; flex-direction: row; grid-column-gap: 1.5rem;}
	.stepbox{justify-content: flex-start; margin-top:0; align-items:center;}
	.main3_p2{width:30%;}
	.stepbox_p{max-width: inherit;}
	.main3_div1-2{display: none;}
	.step_i {
    width: 0;
    height: 0;
    border-top: 20px solid #AB263C;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    flex-grow: 1;}
	.main3_div2{flex-wrap: wrap; justify-content: center; grid-row-gap: 1.5rem;}
	.main3_p1 {width: 45%;}
}

@media screen and (max-width:768px){
	.sub1main{flex-wrap: wrap;}
	.sub1main-1,.sub1main-2,.sub1main-4{width:100%;}
	#sub-area{width:100%; padding: 20px 0; max-width:inherit;}
	#sub-area-nav{position:relative; top:0;}
	.sub {padding: 0 0 2rem;}
	.subimgbox {width: 86%; height: 12vh;}
	.sub1_h2 {padding-top: 3rem;}
	.s_t1{flex-wrap: wrap;}
	.s_t1-1,.s_t1-2{width:100%;}
	.s_t1-1{border-right:none;}
	.paument_list{flex-wrap: wrap; justify-content: center; grid-row-gap: 1rem;}
	.pay_img{width:19%;}
	.paument_list{width:100%;}
}




@media screen and (min-width:601px){
}

@media screen and (max-width:600px){
	.main2_bg1::before,.main2_bg2::after{width:65%;}
	.main2_bg2::after {left: -10%;}
	.main2_1 {width: 62%;}
	.main2 {padding: 5rem 0 11rem;}
	.main2_1::before{overflow: hidden; right:-2rem; bottom:-2rem;}
	.m2_d2{width:100%;}
	.main3,.main4 {padding: 4rem 0;}
	.m4_div1 {grid-column-gap: 1.5rem;}
	.m4_d1-1 {width: 16%;}
	.main3_div2{padding:1rem 0;}
	.m4_div1{align-items: flex-start;}
	.contact1{flex-wrap: wrap; grid-row-gap: 1rem;}
	.contact_div{flex-wrap: wrap; grid-row-gap: 1.5rem;}
	.price_box{flex-wrap: wrap; grid-row-gap: 1rem; justify-content: center;}
	.price_h3{width:100%;}
	.terms_box{width:100%;}
	
}

@media screen and (max-width:500px){
	.main2_1::before{overflow: hidden; right:-2rem; bottom:3%;}
	.news_img {width: 30%;}
}

@media screen and (max-width:420px){
	.main2_bg1::before, .main2_bg2::after {width: 83%;}
}

@media all and  (orientation: portrait) and (max-width: 857px){

}
@media all and  (orientation: landscape) and (max-width: 857px){
}