body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Roboto','Noto Sans TC', '微軟正黑體',sans-serif;
    width: 100%;
    height: 100%;
	font-size:16px;
}

h2{
    text-align: center;
    font-weight: 500;
    font-size: 2.2em;
    line-height: 1.5;
}
.main{
	max-width: 960px;
	margin:0 auto;
    padding-right: 10px;
    padding-right: 1rem;
    padding-left: 10px;
    padding-left: 1rem;
    width: 100%;
}
.top-header{
	background-image:url(../images/main-bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	height:72vh;
	position: relative;
    overflow: hidden;
}
.goDown{
    position: fixed;
    bottom: 20px;
    z-index: 100;
    background-color: #387cf9;
    width: 40px;
    height: auto;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.4rem;
    padding: 6px;
    font-weight: 400;
    border-radius: 3px;
    text-align: center;
    -webkit-animation: gotoTop .5s steps(2) infinite alternate;
    animation: gotoTop .5s steps(2) infinite alternate;
    cursor: pointer;
    right: 8px;
    border: #ffff 0.5px solid;
    box-shadow: 0 0 0 0.3rem #387cf9;
    transition: all 0.2s;
}
.goDown:hover{
    background-color: #136088;
    box-shadow: 0 0 0 0.3rem #136088;
}
.goDown p{
	display: inline-block;
	margin:0 auto;
	vertical-align: middle;
}
.goDown img{
	max-width:100%;
	margin: 0 auto;
    padding-bottom: 0.5rem;
}
.abcgo-title-1>img{
	position:absolute;
    left: 45vw;
    top: 5vw;
	max-width:100%;
    height: auto;
    display: block;
}
.abcgo-title-2>img{
    position: absolute;
    left: 49vw;
    top: 19vw;
    max-width: 100%;
    height: auto;
    display: inline-block;
    filter: drop-shadow(0px 0px 5px rgba(69,68,68,0.5));
}
.abcgo-title-3>img{
	position:absolute;
	max-width:100%;
	left: 14vw;
    bottom: 0px;
    height: auto;
    display: block;
}
.abcgo-title-2>.for-sm{
    position: absolute;
    top: 0;
    max-width: 100%;
    height: auto;
    display: none;
}
/*--------------------------跑馬燈------------------------*/
.run {
	position: relative;
	background-color: #136088;
	width: 100%;
	height: 55px;
	bottom: 0;
	align-items: center;
	overflow: hidden;
}
.runword {
	line-height: 68px;
	width: max-content;
	animation: run 15s linear infinite;
}
.runword img {
	margin: auto 3px;
}
@keyframes run {
	0% {
		left: 0;
		transform: translateX(0%);
	}
	100% {
		left: 0;
		transform: translateX(-20%);
	}
		
}
/*--------------------------前言-------------------------*/
#goodJP-bg {
	position: relative;
	width: 100%;
	height:auto;
	background-color: #f2f2f3;	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
    padding: 8vh 0;
}
.main{
    max-width: 1280px;
    margin: 0 auto;
}
#goodJP-bg>.main>h2 {
	color: #42bda1;
    padding-bottom: 3vh ;
	position: relative;
}
#goodJP-bg>.main>.forGood::after{
    content: " ";
    position: absolute;
    width: 44rem;
    left: calc((100% - 44rem) / 2);
    top: 55px;
    border-top: medium double #42bda1;
}
.good-jp{
    padding: 2rem 0rem 0rem;
}
#goodJP-bg>.main>.flex {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}
.good-jp-img{
    max-width: 100%;
    height: auto;
    margin: 1rem 0.5rem;
    border-radius: 15px;
}
/*--------------------------日語證照N5-N1-------------------------*/
.JPlearn{
    background-image:url(../images/japanBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 8vh 0;
    width: 100%;
    overflow: hidden;
}
.JPlearn>h2{
    color: #42bda1;
    margin-bottom: 1.8rem;
	position: relative;
}
.JPlearn>.JPlearn-2{
    display: none;
}

.JPlearn>.JPlearn-1 ::after{
    content: " ";
    position: absolute;
    width: 28rem;
    left: calc((100% - 29rem) / 2);
    top: 63px;
    display: block;
    border-top: medium double #42bda1;
}
.grid-container{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 1rem;
    background-color: transparent;
    padding: 4rem 2rem 0rem;
    width: 1200px;
    margin: 0 auto;
}
.grid-container > .ites-1 {
  text-align: center;
  padding: 20px 0;
}
.grid-container > .ites-2 {
  text-align: center;
  margin: 0 auto;
}
.jp-txst img{
    max-width:100%;
    height: auto;
    z-index: 0;
}
/*-------------輪播---------*/
.carousel-container {
  width: 396px;
  height: auto;
}
.carousel {
  width: 396px;
  height: auto;
  background: #f0f0f0;
  overflow: hidden;
  box-shadow: 0 0 0 1.55rem #f0f0f0;
  border: #42bda1 3px solid;
}
.carousel-item {
  width: inherit;
  height: inherit;
  float: left;
  display: none;
  padding: 3.2rem 0rem 0rem 0rem;
  position: relative;
}
.carousel-item>span {
    color: #136088;
    margin: 2rem auto;
    line-height: 5rem;
    font-size: 3.8rem;
    text-align: center;
    width: 220px;
    font-weight: bold;
}

.carousel>.carousel-item h4{
    font-size: 2rem;
    color:#136088;
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 0.2rem;
    position: relative;
    top: 1.7rem;
    text-align: center;
}
.carousel>.carousel-item h4:after{
    content: " ";
    position: absolute;
    width: 8rem;
    left: calc((100% - 8rem) / 2);
    border: #42bda1 2px solid;
    bottom:3rem;  
}

.carousel>#item1 h4 ::after{
    content: " ";
    position: absolute;
    width: 8rem;
    left: calc((100% - 10.5rem) / 2);
    border: #42bda1 2px solid;
    bottom:8.5rem;  
}
.carousel>#item2 h4 ::after{
    content: " ";
    position: absolute;
    width: 8rem;
    left: calc((100% - 9.5rem) / 2);
    border: #42bda1 2px solid;
    bottom:8.5rem;  
}
.carousel>#item3 h4 ::after{
    content: " ";
    position: absolute;
    width: 8rem;
    left: calc((100% - 8.5rem) / 2);
    border: #42bda1 2px solid;
    bottom:8.5rem;  
}
.carousel>#item4 h4 ::after{
    content: " ";
    position: absolute;
    width: 8rem;
    left: calc((100% - 11rem) / 2);
    border: #42bda1 2px solid;
    bottom:8.5rem;  
}
.carousel>#item5 h4 ::after{
    content: " ";
    position: absolute;
    width: 8rem;
    left: calc((100% - 11rem) / 2);
    border: #42bda1 2px solid;
    bottom:8.5rem;  
}
.carousel>.carousel-item>div{
    margin: 3rem 0rem;
    position: relative;
}
.carousel>.carousel-item>div>h4>span{
    font-size: 1.5rem;
    color:#2e2e2e;
    font-family: 'Noto Sans TC', sans-serif;
    top: 2rem;
    line-height: 2rem;
    position: relative;
}

#item1, #item2, #item3, #item4, #item5{
  background: #f0f0f0;
}
.carousel-item ul {
	font-size: 24px;
	color:#136088;
	list-style: disc;
	width:80%;
	margin:4.4rem auto 0 auto;
	line-height: 2em;
}
.carousel-item ul li {
	display: inline-block;
	width:50%;
	position: relative;
	text-align: left;
	padding-left: 11%;
}
.carousel-item ul li:after {
	content:" ";
	position: absolute;
	width:5px;
	height: 5px;
	background: #136088;
	border-radius: 50px;
	top:49%;
	left: 10%;
}
.carousel-controls {
  width: inherit;
  height: 35px;
  margin: 2.5rem 0rem 1rem;
}
.carousel-container .carousel-controls > a> [class*=icon]:hover {
  color: #FFFFFF;
  background-color: #42bda1;    
}
.carousel-container .carousel-controls > a.left {
  float: right;
}
.carousel-container .carousel-controls > a.right {
  float: right;
}
.carousel-container .carousel-controls > a> [class*=icon]{
    font-size: 1.8rem;
    color:#42bda1;
    background-color: transparent;
    width: 35px;
    height: 35px;
    margin: 0 0.5rem;
    display: inline-block;
}

/*-----------------------學習重點---------------------*/
#JP-point{
    background-image:url(../images/JPpointBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 8vh 0;
    width: 100%;
    overflow: hidden;
}
#JP-point h2{
    color: #FFFFFF;
    margin-bottom: 1.8rem;
    position: relative;
}
#JP-point h2::after{
   content: " ";
    position: absolute;
    width: 30rem;
    left: calc((100% - 30rem) / 2);
    border-top: medium double #FFFFFF;
    top: 8rem;
}
#JP-point>.main>.flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    margin-bottom: 1rem;
}
#JP-point>.main>.flex>.item{
    margin:  0 1.2rem;
}
#JP-point>.main>.flex>.item>img{
    margin:  1rem;
    max-height: 100%;
    filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.7));
}

/*-----------------------專業指南---------------------*/
#profess-5{
    background-image:url(../images/5-mainBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 8vh 0;
    width: 100%;
    overflow: hidden;
}
#profess-5>h2{
    color:#136088;
    position: relative;
}

#profess-5>h2::after{
    content: " ";
    position: absolute;
    width: 28rem;
    left: calc((100% - 29rem) / 2);
    border-bottom: double;
    top: 60px;
}

#profess-5>h1{
    font-size:3.2rem;
    color:#136088;
    font-weight: 500;
    text-align: center;
    position: relative;
	font-style: italic;
}

#profess-5>.flexbox{
    display: flex;
    width: 80rem;
    margin: 4rem auto 2rem;
    height: auto;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.point{
    margin: 1.2rem 1rem 0.7rem;
}
#profess-5 p{
    font-size: 1.5rem;
    font-weight: bold;
    color: #00315a;
    background-color: #ddbb33;
    padding: 0.8rem 1.9rem;
    box-shadow:0px 0px 10px rgba(0,0,0,.5);
    font-family: "Noto Sans TC";
    text-align: center;
}

.mobile_bottom_footer .mobile_bottom_box li {
	font-size: 0.9em;
	margin:2px 0 5px 5px;
	height:23px;
}
.mobile_bottom_footer .mobile_bottom_logo {
	height: 140px;
	line-height: 120px;
}

/*-----------------------GO TOP---------------------*/

#footer{
    background-image:url(../images/fotter.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 4vh 0;
	width:100%;
    text-align: center;
    overflow: hidden;
}

.blink {
    animation-duration: .6s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.floating{
	animation-duration: .6s;
    animation-name: floating;
    animation-iteration-count: infinite;
    animation-direction: alternate;
	animation-delay:.6s;
    animation-timing-function: ease-in-out;
}
@keyframes floating{
	100%{
		transform:translate(0, -13px);
	}
	0%{
		transform: translate(0,0);
	}
}