@charset "utf-8";
/* CSS Document */
/*------手機--------*/
.mobile_bottom_footer {
		display: none;
	}
@media (min-width:1441px) and (max-width:1680px){
    .top-header{
        height: 40vw;
    }
    .abcgo-title-1>img{
        left: 46vw;
        top: 7vw;
    }
    .gaid-wrap{
        grid-template-columns: 5.5vw 27.5vw;
    }
    .abcgo-title-2>img{
        top:23vw;
        left:50vw;
    }
}
@media (max-width:1440px){
    .top-header{
        height: 48vw;
    }
    .abcgo-title-1>img{
        left: 42vw;
        top: 7vw;
        max-width: 60%;
    }
    .abcgo-title-2>img{
        top:26vw;
        left: 47vw;
    }
	.abcgo-title-3>img {
		left: 8vw;
	}
    .gaid-items-1, .gaid-items-2{
        font-size: 1.3vw;
    }
}
@media (max-width:1200px){
     .top-header{
         height: 57vw;
    }
    .abcgo-title-1>img{
        left: 40vw;
    }
    .abcgo-title-2>img{
        top:30.5vw;
        left: 45vw;
    }
	.abcgo-title-3>img {
		left: 2vw;
	}
    .gaid-wrap{
        display: grid;
        grid-template-columns: 7vw 29vw;
    }
    .gaid-items-1, .gaid-items-2{
        font-size: 1.35vw;
    }
    #JP-point>.main>.flex{
        flex-wrap: wrap;
        width: 44rem;
        margin: 0 auto;
       padding-top: 1rem;
    }
    .grid-container{
        width: 68rem;
    }
}
@media (max-width:1080px){
	.hidden-sm {
		display: none;
	}
	.mobile_bottom_footer, .hidden-lg, .hidden-md {
		display: block!important;
	}
    .top-header{
        height: 54vw;
    }
    .abcgo-title-1>img{
        left: 42vw;
        max-width: 50%;
    }
    .abcgo-title-2>img{
        position: relative;
        top: 0;
        max-width: 100%;
        height: auto;
        display: none;
    }
	.abcgo-title-3>img{
		width: 60%;
	}
     .abcgo-title-2>.for-sm{
         position: absolute;
         top: 32vw;
         max-width: 42%;
         height: auto;
         display: inline-block;
         left: 46vw;
    }   
    .gaid-wrap{
        grid-template-columns: 7vw 30vw;
    }
    .grid-container{
        display: grid;
        grid-template-columns: 100%;
        align-content: center;
        width: 600px;
        grid-gap: 2.5rem;
    }
	#profess-5>.flexbox {
		width: 45rem;
	}
	.form-R {
		width: 70%!important;
		float: none!important;
		margin:0 auto;
	}
	.form-L {
		width: 70%!important;
		margin:20px auto 0 auto!important;
		float: none!important;
	}
}
@media (min-width:769px) and (max-width:900px){
    .top-header{
        height: 57vw;
    }
    .abcgo-title-1>img{
        max-width: 55%;
        left: 40vw;
        top: 8vw;
    }
    /*.abcgo-title-2{
        top:39vw;
        left: 46vw;
    }*/
    .abcgo-title-2>.for-sm{
         top: 33vw;
         max-width: 46%;
         left: 44vw;
    }
	.abcgo-title-3>img {
		width: 58%;
	}
}
@media (min-width:601px) and (max-width:768px) {
     .top-header{
         height: 58vw;
    }
     .abcgo-title-1>img{
         max-width: 57%;
         left: 39vw;
         top: 9vw;
    }
     .gaid-wrap{
         grid-template-columns: 36vw;
         grid-template-rows: 11% 22%;
    }
     /*.abcgo-title-2{
         top: 46vw;
         left: 40vw;
    }*/
     .abcgo-title-2>.for-sm{
         top: 34vw;
         max-width: 52%;
         left: 42vw;
    }
	.abcgo-title-3>img{
		width:58%;
    }
     .grid-container{
         width: 450px;
    }    
}
@media (max-width:600px){
     .top-header{
         height: 155vw;
    }
     .abcgo-title-1>img{
         max-width: 90%;
         left: 6vw;
         top:6vw;
    }
     /*.abcgo-title-2{
         top: 46vw;
         left: 32vw;
    }*/
     .abcgo-title-2>.for-sm{
         max-width: 83%;
         top:40vw;
         left: 9vw;
    }
	 .abcgo-title-3>img{
         width: 97%;
    }
     .grid-container{
         width: 380px;
    }
     .carousel-container{
         width: 300px;
    }
     .carousel{
         width: 300px;
    }
     .carousel-item>span{
         line-height: 2.5rem;
         font-size: 2.2rem;
    }
    .carousel>.carousel-item h4{
        font-size: 1.4rem;
    }
    .carousel>.carousel-item>div>h4>span{
        font-size: 1.2rem;
    }  
	.carousel-item ul {
		font-size: 20px;
		width:84%;
	}
	.carousel-item ul li {
		padding-left: 9%;
	}
	.good-jp-img {
		border-radius: 8px;
	}
	
}
/*---------------日文無敵的好處---------------*/
@media(max-width:678px){
     #goodJP-bg>.main>h2{
         font-size: 2rem;
    }
}
@media(max-width:420px){
    #goodJP-bg>.main>.forGood::after{
        width: 18.5rem;left: calc((100% - 18.5rem) / 2);
        top:105px;
    }
}
@media(max-width:375px){
    #goodJP-bg>.main>.forGood{
        font-size:1.8rem;
    }    
    #goodJP-bg>.main>.forGood::after{
        top:105px;
    }
}
/*-----------------------日語證照N5-N1---------------------*/
@media(max-width:678px){
    .JPlearn>.JPlearn-1{
        display: none;
    }
    .JPlearn>.JPlearn-2{
        display: inherit;
    }
    .JPlearn>h2{
        font-size: 2rem;
    }
    .JPlearn>.JPlearn-2::after{
        content: " ";
        position: absolute;
        width: 20rem;
        left: calc((100% - 20rem) / 2);
        top: 188px;
        border-top: medium double #957421;
    }       
}
@media(max-width:420px){
     .JPlearn>.JPlearn-2::after{
         width: 18rem;
         left: calc((100% - 18rem) / 2);
         top: 175px;
         border-top: medium double #957421;
    }     
}
@media(max-width:415px){
    .JPlearn{
        padding: 6vh 0 3vh;
    }
    .JPlearn>h2{
        font-size: 1.8rem;
    }
    .JPlearn>.JPlearn-2::after{
        content: " ";
        position: absolute;
        width: 15rem;
        left: calc((100% - 15rem) / 2);
        top: 110px;
        border-top: medium double #42bda1;
    }    
    .grid-container {
        width: 340px;
        padding: 1rem 2rem 0rem;
    }
    .carousel-container{
        width:275px;
    }
    .carousel{
        width:275px;
    }
    .carousel-controls{
        margin: 1.8rem 0rem;
    }    
}
@media(max-width:320px){
    .grid-container{
        width: 300px;
    }    
    .carousel-container{
        width:240px;
    }
    .carousel{
        width:240px;
        box-shadow: 0 0 0 1rem #f0f0f0;
    }
    .carousel-controls{
        margin: 1.8rem 0rem;
    }
	.point {
		width: 60%!important;
		float: none!important;
		margin:20px auto!important;
	}
	#FormArea h4 {
		font-size: 1.8em!important;
	}
	#goodJP-bg>.main>.forGood::after{
        top:150px;
    }
	#profess-5>h2::after {
		top:105px!important;
	}
}
/*-----------------------學習重點---------------------*/
@media(min-width:1080px) and (max-width:1280px){
    #JP-point>.main>.flex>.item{
        margin: 0 ;
    }
}
@media(max-width:1079px){
    #JP-point>.main>.flex{
        width: 44rem;
        margin: 0 auto;
        padding-top: 1rem;
    }
    #JP-point>.main>.flex>.item{
        margin: 0 ;
    }
}
@media(max-width:678px){
    #JP-point h2{
        font-size: 2rem;
    }
    #JP-point>.main>.flex{
        width: 100%;
        margin: 0 auto;
        padding-top: 1rem;
        flex-direction: column;
    }
    #JP-point>.main>.flex>.item{
        margin: 0 ;
    }
    #profess-5 h2{
        font-size:2rem;
    }
    #profess-5>h1>span{
        font-size:2.8rem;
    }
    #profess-5>.flexbox{
        width: 28rem;
        flex-direction:column;
    }    
}
@media(max-width:420px){ 
    #JP-point h2::after{
        width: 19rem;
        left: calc((100% - 19rem) / 2);
		top:11rem;
    }
    #profess-5>.flexbox{
        width: 21rem;
        flex-direction:column;
    }  
	#profess-5>h2::after {
		width:18rem;
		left: calc((100% - 18rem) / 2);
		top:100px;
	}
}
@media(max-width:375px){
    #JP-point h2{
        font-size: 1.8rem;
    }
    #JP-point h2::after{
        width: 14rem;
        left: calc((100% - 14rem) / 2);
    }    
    #profess-5 h2{
        font-size:1.8rem;
    }
    #profess-5>.flexbox{
        width: 18rem;
        flex-direction:column;
    }   
	#profess-5>h2::after {
		width:18rem;
		left: calc((100% - 18rem) / 2);
		top:60px;
	}
	
	
}
/*-----------------------專業指南---------------------*/
@media(max-width:1025px){
    #profess-5>.flexbox{
        width: 45rem;
    }
}   
@media(max-width:500px){
	.JPlearn-2 span{
        font-size: 2.8rem!important;
    }
    #profess-5>.flexbox{
        width: 100%;
		display: block;
    }
	.point {
		width:42%;
		float: left;
		margin:20px 15px;
	}
	.point img {
		width: 100%;
		height: auto;
	}
}