@charset "utf-8";

.aboutmnetsmart{
	position: relative;
}

.aboutmnetsmart .i1{
	position: absolute;
	left: 0;
	bottom: 0;
}

.aboutmnetsmart .i2{
	text-align: center;
    padding-left: 7%;
    padding-right: 7%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 10%;
}

.aboutmnetsmart .i3{
	position: absolute;
	right: 0;
	bottom: 0;	
}


.aboutmnetsmart .i1, .aboutmnetsmart .i3{
height: 55%;
}


.aboutmnetsmart2{
	background-color: #DF0070;
    padding-bottom: 50px;	
}

.aboutmnetsmart2 h2{
    color: #fff;
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

.itemdiv{
    list-style: none;
    display: table;
    width: 100%;
}

.itemdiv .rin{
	display: table-row;
}

.itemdiv .in{
	text-align: center;
	display: table-cell;
	width: 50%;
}

.itemdiv .in .waku{
	padding-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 30px;
    background-color: #fff;
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 30px;    
}

.itemdiv .in .waku img{
    max-height: 135px;
    height: 135vw;
}

.itemdiv .in .waku .txt{
	font-weight: bold;
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 20px;
}

.itemdiv .in .waku .txt{
	
}

.itemdiv .in .waku .txt span{
	color: #DF0070;
}

.itemdiv .in.t1 .waku .txt{
    font-size: 22px;
}

.itemdiv .in.t1 .waku img{
    max-height: 151px;
    height: 151px;
}

.itemdiv .in.t1 .waku .txt{
    margin-bottom: 33px;
}

.outitemdiv{
    padding-left: 10px;
    padding-right: 10px;
}

.registdiv{
    text-align: center;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
}

.registdiv span{
	color: #FDD90F;
}

.loginbtn{
    margin-top: 30px;
    padding-bottom: 10px;
    text-align: center;
}

.loginbtn .b1{
	margin-bottom: 30px;
}

.loginbtn .b1 a{
    background-color: #FDD90F;
    display: inline-block;
    width: 100%;
    max-width: 500px;
    color: #DF0070;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 30px;
}

.loginbtn .b2{
}

.loginbtn .b2 a{
    background-color: #fff;
    display: inline-block;
    width: 100%;
    max-width: 500px;
    color: #DF0070;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 30px;
}

.loginbtn a{
	text-decoration: none;
}

.loginbtn a:hover{
	text-decoration: none;
}

.caution{
	color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 22px;
    max-width: 658px;
    text-align: left;
    display: inline-block;
}

.outcaution{
	text-align: center;
}

.outlinediv{
    text-align: center;
    margin-bottom: 50px;
}

.outlinediv .linediv{
	border-bottom: 1px solid #fff;
    max-width: 640px;
    display: inline-block;
    width: 100%;
}

.subtitle1{
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    margin-bottom: 70px;
}

.subtitle1 span{
	color: #FDD90F;
}

.itemdiv .in .waku.mb{
	margin-bottom: 50px;
}

.itemdiv .in .waku .no{
    margin-bottom: 20px;
    margin-top: -63px;
}

.itemdiv .in .waku .no span{
	background-color: #C7A901;
    display: inline-block;
    color: #fff;
    border-radius: 50%;
    border: 1px solid #fff;
    font-size: 30px;
    font-weight: bold;
    width: 70px;
    height: 70px;
    line-height: 70px;
}

.mnetsmartservice{
	
}

.mnetsmartservice ul{
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 50px;
}

.mnetsmartservice ul img{
	width: 90%;
}

.mnetsmartservice ul li{
	text-align: center;
    margin-bottom: 70px;	
}

.mnetsmartservice ul li:last-child{
    margin-bottom: 0px;
}

.mnetsmartservice ul li .lay{
    background-color: #fff;
    border-radius: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.mnetsmartservice ul li .lay .txt1{
    margin-top: -62px;
    margin-bottom: 30px;
}

.mnetsmartservice ul li .lay .txt1 span{
	font-weight: bold;
    background-color: #C7A901;
    color: #fff;
    display: inline-block;
    border-radius: 50px;
    border: 1px solid #fff;
    max-width: 600px;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 25px;    
}

.mnetsmartservice ul li .lay .txt2{
	font-size: 24px;
	font-weight: bold;
	margin-top: 30px;
}

.mnetsmartservice ul li .lay .txt2 span{
	color: #DF0070;
}

.descdiv{
	color: #fff;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
    margin-bottom: 50px;	
}

.descdiv span{
	color: #FDD90F;
}

.artistlist{
    padding-left: 10px;
    padding-right: 10px;
}

.artistlist ul{
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	display: grid;
    grid-template-columns: repeat(3, 33.3%);
    grid-row-gap: 15px;
    row-gap: 15px;	
}

.artistlist ul li{
	margin-bottom: 15px;
}

.artistlist ul li .lay{
    text-align: center;
}

.artistlist ul li .lay .txt{
	font-size: 17px;
    line-height: 23px;
    margin-top: 10px;
	line-height: 23px;
}

.artistlist ul li .lay .out{
	display: table-cell;
    width: 100px;
    height: 100px;
    /*
    border: 1px solid #F6F6F6;
    */
    overflow: hidden;
    vertical-align: middle;
    border-radius: 5px;
    background-color: #fff;
}

.artistlist ul li .lay img{
	/*
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #dfdfdf;
    display: inline-block;
    padding: 1px;
    background-color: #fff;
    */
	display: inline-block;
    padding: 1px;
    height: auto;
    width: 100%;
    max-height: 90px;
    max-width: 100px;
    padding: 5px;    
}

.artistlist ul li .lay a{
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
}

.artistlist ul li .lay a{
	text-decoration: none;
}

.outcaution2{
    margin-top: 50px;
    margin-bottom: 50px;
}

.faqdiv{
    padding-top: 60px;
}

.faqdiv h2{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 60px;    
}

.faqdiv .list dl{
	font-size: 28px;
}

.faqdiv .list dt:first-child{
	padding-top: 0px;
}

.faqdiv .list dt{
	position: relative;
	margin-bottom: 30px;
	font-weight: normal;
	margin-top: 30px;
}

.faqdiv .list dt span{
	background-color: #DF0070;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    width: 47px;
    height: 47px;
    line-height: 47px;
    text-align: center;
	position: absolute;
    left: 0;
    top: 0;
}

.faqdiv .list dd{
	position: relative;
	border-bottom: 1px solid #dfdfdf;
	padding-bottom: 20px;
}

.faqdiv .list dd span{
    border: 1px solid #DF0070;
    display: inline-block;
    color: #DF0070;
    font-weight: bold;
    width: 47px;
    height: 47px;
    line-height: 47px;
    text-align: center;
	position: absolute;
    left: 0;
    top: 0;    
}

.faqdiv .list dd.end{
	border-bottom: 0px;
    padding-bottom: 0px;	
}

.faqdiv .list dt p{
    padding-left: 77px;
    padding-top: 10px;
    font-size: 18px;
}

.faqdiv .list dd p{
    padding-left: 77px;
    padding-top: 10px;
    font-size: 16px
}

.faqdiv .list dd a{
	color: #DF0070;
	text-decoration: underline;
}

.faqdiv {
	padding-left: 10px;
	padding-right: 10px;
}

.artistlist .title{
	border-left: 3px solid #fff;
	margin-bottom: 30px;
}

.artistlist .title span{
	font-size: 20px;
    color: #fff;
    font-weight: bold;
    padding-left: 10px;
}

.terms{
	font-weight: bold;
	text-align: center;
	margin-bottom: 50px;
}

.terms a{
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	text-decoration: underline;
}

/* -----------------------------------------------------------------------
    Large devices (large desktops, 1200px and up)
 ------------------------------------------------------------------------*/
@media (min-width: 1200px) {
  /************** 1200 GLOBAl USE***********/
  
  
  
  /************** 1200 GLOBAl USE END***********/
}

/* -----------------------------------------------------------------------
     Medium devices (desktops, UP TO 1199px~992px)
 ------------------------------------------------------------------------*/
@media (max-width: 1199px) {
  /************** 1199 GLOBAl USE***********/



  /************** 1199 GLOBAl USE END***********/
}

/* -----------------------------------------------------------------------
     Medium devices (desktops, UP TO 1023px~990px)
 ------------------------------------------------------------------------*/
@media (max-width: 1023px) {
  /************** 1024 GLOBAl USE***********/
  

  
}

/* ----------------------------------------------------------------------
     Small devices (tablets, UP TO 991px~768px)
 -----------------------------------------------------------------------*/
@media (max-width: 991px) {
  /************** 991 GLOBAl USE***********/

  
  /************** 991 GLOBAl USE END ***********/
}
/* ---------------------------------------------------------------------
    Extra small devices (phones, less UP TO 767px)
 ----------------------------------------------------------------------*/
@media (max-width: 767px) {
  /************** 767 GLOBAl USE***********/

  /************** 767 GLOBAl USE END***********/
}

@media (max-width: 680px) {
  /************** 680 GLOBAl USE***********/
  
  .itemdiv .in .waku .txt{
  	font-size: 21px;
  }
  
  .itemdiv .in .waku img{
    max-height: 100px;
    height: 100px;
  }
  
  .itemdiv .in.t1 .waku img{
    max-height: 117px;
    height: 117px;
  }
  
  .itemdiv .in.t1 .waku .txt{
  	font-size: 20px;
  }
  
  
  
  /************** 680 GLOBAl USE END***********/
}

@media (max-width: 620px) {
	
	.itemdiv .in .waku .txt{
		font-size: 3.4vw;
	    line-height: 25px;
	}	
	
	.itemdiv .in.t1 .waku .txt{
    	font-size: 3.1vw;
	    line-height: 25px;    	
	}
	
	.itemdiv .in .waku img{
    	max-height: 16vw;
		height: 16vw;    	
	}
	
	.itemdiv .in.t1 .waku img{
	    max-height: 17.9vw;
	    height: 17.9vw;
	}
	
	.itemdiv .in .waku{
	    margin-left: 5px;
	    margin-right: 5px;
	}
	
	.subtitle1{
		font-size: 6vw;
	}
	
	.mnetsmartservice ul li .lay .txt1 span{
		font-size: 4vw;
		width: 90%;
	}
	
	.mnetsmartservice ul li .lay .txt2{
		font-size: 4vw;
	}
	
	.descdiv{
		font-size: 4.3vw;
	}
	
	.artistlist ul{
    	grid-template-columns: repeat(2, 50%);
	}
	
	.artistlist ul li .lay .txt{
		font-size: 3.3vw;
		line-height: 22px;
	}
	
	.faqdiv h2{
		font-size: 9vw;
	}
	
	.faqdiv .list dl{
		font-size: 4.2vw;
	}
	
	.faqdiv .list dt span, .faqdiv .list dd span{
		width: 40px;
		height: 40px;
		line-height: 40px;
	}
	
	.faqdiv .list dt p, .faqdiv .list dd p{
    	padding-left: 55px;
		padding-top: 6px;
	}
	
}

@media (max-width: 540px) {
	
	.aboutmnetsmart2 h2{
		font-size: 6.5vw;
	}
	
}

/*767 END*/
/* ----------------------------------------------------------------
      Custom, iPhone Retina  UP TO 480px
-------------------------------------------------------------------*/
@media (max-width: 480px) {
  /************** 480 GLOBAl USE***********/  

  .itemdiv .in .waku .txt{
    font-size: 3.2vw;
  }
  
  .itemdiv .in.t1 .waku .txt{
    font-size: 2.9vw;
    line-height: 26px;    
  }
  
  .aboutmnetsmart2 h2{
	padding-top: 30px;
    padding-bottom: 30px;
  }
  
  .registdiv{
  	font-size: 4.5vw;
  }
  
  .loginbtn a{
	  width: 90% !important;
	  font-size: 23px !important;
  }
  
  .caution{
  	font-size: 4.5vw;
  }
  
  .itemdiv .in .waku .no span{
  	width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 22px;    
  }
  
  .itemdiv .in .waku .no{
    margin-top: -52px; 
  }
  
	.artistlist ul li .lay .txt{
		line-height: 17px;
	}
	


}


@media (max-width: 414px) {
  /************** 360 GLOBAl USE***********/
  /************** 360 GLOBAl USE***********/

	
  
}

@media (max-width: 375px) {

	.itemdiv .in .waku .txt{
    	font-size: 3.255555vw;
	}
	
}


@media (max-width: 364px) {
  /************** 360 GLOBAl USE***********/
  /************** 360 GLOBAl USE***********/
	.itemdiv .in .waku .txt {
	    font-size: 3.2vw;
	}
}

/* ----------------------------------------------------------------
      Custom, iPhone Retina  UP TO 480px
-------------------------------------------------------------------*/
@media (max-width: 360px) {
  /************** 360 GLOBAl USE***********/
  /************** 360 GLOBAl USE***********/

}

@media (max-width: 340px) {
  /************** 360 GLOBAl USE***********/
  /************** 360 GLOBAl USE***********/
	.itemdiv .in .waku .txt {
	    font-size: 3vw;
	}
}

/* ----------------------------------------------------------------
      Custom, iPhone Retina  UP TO 480px
-------------------------------------------------------------------*/
@media (max-width: 280px) {
  /************** 280 GLOBAl USE***********/
  /************** 280 GLOBAl USE***********/
  
	.itemdiv .in .waku {
	    margin-left: 2px;
	    margin-right: 2px;
	}
	
	.itemdiv .in .waku .txt {
	    font-size: 3.255555vw;
	    line-height: 17px;
	}
	
	.itemdiv .in.t1 .waku .txt{
    	margin-bottom: 0px;
	}
	
}