@charset "utf-8";
/* CSS Document */

*{
	box-sizing:border-box;
	/*margin:0 auto;*/
}

html, body ,form{
    height: 100%;
	margin: 0;
    padding: 0;    
    /*min-width: 1000px;*/
}
html {
    font-size: 125%; /*20 ÷ 16 × 100% = 125%*/
    /*scroll-behavior: smooth;*/
}
body {
	font-family: "微軟正黑體", "Microsoft JhengHei","Helvetica", "Microsoft JhengHei";
    /*line-height: 1.8rem;*/
    font-size: 1em;
    /*background-image:url("../image/bg_backline.png");
        background-repeat-x: repeat;
    background-repeat-y: no-repeat;*/
    background-color: #fff;
}
html.is-pageload-available body{
    
}
a{
	cursor:pointer;
}
a, a:hover, a:link, a:visited, a:active {
	text-decoration:none;
}
    a, a:focus {
        /*outline: none;*/
    }
p{
    font-size: 1rem;
	color:#000;
}
img{
	border:none;
}
img, svg {
    vertical-align: middle;
}
ul,li{
	list-style:none;
	margin:0;
	padding:0;
}
h1, h2, h3{
    font-weight: bolder;
}

.index .container{
    --offset: 3em;
    max-width: 100%;
}

@media (max-width: 1599px){
.container {
    /*padding-left: calc(var(--offset) * 1);
    padding-right: calc(var(--offset) * 1);*/
    /*width: calc(100vw - 50px);*/
}   
}
@media (min-width: 1600px){
.container {
    /*padding-left: calc(var(--offset) * 4);
    padding-right: calc(var(--offset) * 4);*/
    /*width: calc(100vw - 250px);*/
    width: 1400px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
    
}
@media (max-width: 1279.98px){
.container {
    display: block;
    /*padding-left: calc(var(--offset) * 0);
    padding-right: calc(var(--offset) * 0);*/
}    
}


/*@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1280px;
  }
}
@media (min-width: 1600px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1450px;
  }
}
@media (min-width: 1900px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1650px;
  }
}*/
.container {
    /*min-height: 100%;*/
}
.content {
    padding-bottom: 200px;
	overflow:hidden;
    min-height: 200px;
}
.wrapper {
    min-height: 100%;
    position: relative;
    padding-bottom: 400px;
}


/*header*/
.header {
    height: 128px;
    box-shadow: 3px 3px 8px #4a4a4a;
    z-index: 99;
    position: relative;
}
.header .container {
    padding-left: calc(var(--offset) * 2.3);
    padding-right: calc(var(--offset) * 2.3);
    width: auto;
}
@media screen and (min-width: 1600px) and (max-width: 1679px){
    .header .container {
        padding-left: calc(var(--offset) * 1.5);
        padding-right: calc(var(--offset) * 1.5);
    }   
}
@media screen and (min-width: 1430px) and (max-width: 1599px){
    .header .container {
        padding-left: calc(var(--offset) * 1);
        padding-right: calc(var(--offset) * 1);
    }   
}

@media (max-width: 1429px){
.header .container {
    padding-left: calc(var(--offset) * 0);
    padding-right: calc(var(--offset) * 0);
}   
}
.TopMenuBack{
    height: 40px;
    background: #3C2C25;  
}
.TopMenu {
    width: 100%;
}
.TopMenu ul {
    width: 250px;
    padding-top: 5px;
    margin-right: 5%;
}
.TopMenu > ul > li {
    display: table-cell;
    width: 1%;
    color: #fff;
}

.TopMenu > ul > li > a {
    margin-bottom: 0;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    padding-left: 10px;
}
.TopMenu li{
    border-left: 1px solid #fff;
}
.TopMenu li:first-child{
    border-left: none;
}
.bottomMenu{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
}
.LOGO{
    width: 300px;
	margin-left: 3%;
}
.mainMenuText{
    font-size: 1.2em;
    margin-left: auto;
}
.mainMenuText li{
    margin-left: 20px;
}

.mainMenuText a{
    color: #000000;
}
.menuBallClass{
    display: flex;
    flex-wrap: nowrap;  
    margin-left: 7%;
	
}
.menuBall{
    background-color: #3C2C25;
    text-align: center;
    border-radius: 50px;
    width: 34px;
    height: 34px;
    margin-left: 20px;
	display: inline-block;
}
.menuBall:hover{
    background-color: #ED6D1C;
}


.miniMenu.show{
	display: flex;
    flex-direction: column;
	border: none;
    box-shadow: 3px 8px 7px #4e4e4e;
}
.miniMenu a{
	font-size: 1rem !important;
	padding-bottom: 20px;
	text-align: center;
}
.miniMenu a:hover{
    color: #df4f00;
}
@media screen and (min-width: 1431px) and (max-width: 1520px){
    .menuBallClass{
        margin-left: 3%;
    }
    .menuBall{
        margin-left: 15px;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1278px){
    .mainMenuText li {
        margin-left: 10px;
    }
    .menuBall{
        margin-left: 15px;
    }
    .LOGO {
        margin-left: 2%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px){ 
    .mainMenuText li {
        margin-left: 10px;
    }
    .menuBall{
        margin-left: 1px;
    }
    .menuBallClass{
        margin-left: 1%;
    }
    .LOGO {
        margin-left: 1%;
    }
}
@media (max-width: 991px){ 
    .LOGO {
        width: 75%;
		max-width: 360px;
    }
    .navbar{
        background-color: #ffffff;
    }
    .menuBallClass{
        /*display: none;  */ 
    }
	.menuBallClass.app{
		margin-left: 0;
		text-align: center;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.header{
		height: auto;
	}
	.TopMenuBack{
		height: 20px; 
	}
	.miniMenu{
		box-shadow:none;
	}
	.miniMenu.show{
		flex-direction: row;
    	flex-wrap: wrap;
		width: 75%;
    	margin: 0 auto;
        box-shadow:none;
        padding-top: 20px;
	}
	.miniMenu a{
		width: 50%;
        margin-bottom: 5px;
	}
    .bottomMenu{
        justify-content: flex-end;
        flex-direction: row-reverse;
        align-items: center;
        flex-wrap: nowrap;
    }
	.bottomMenu img{
		
	}
    .menuBall img{
        vertical-align: middle;
    }
	.menuBall{
		margin-left: 30px;
	}
	.menuBall:first-child{
		margin-left: 0;
	}
    .bottomMenu .app.float-right .menuBall{
        margin-left: 0px;
    }
    .mainMenuText {
        position: absolute;
        width: 100%;
        box-shadow: 0px 6px 5px #4c4c4c;
        left: 0;
        top: 100%;
        background: white;
    }
    .mainMenuText li{
        margin-bottom: 15px;
    }
}

/*header*/

/*banner*/
.banner-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}
.banner {
    width: 100%;
    /*height: 700px;*/
    height: calc(100vh - 215px - 240px);
    position: relative;
    z-index: 98;
    /*margin-bottom: 120px;*/
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../image_new/Banner_3_new.jpg");
}

.business-news {
    border-radius: 28px;
    background-color: #DB5601;
    /*width: 10%;*/
    display: inline-block; 
    position: absolute;
    left: 8%;
    top: 63.5%;
    transform: translateY(-50%);
    padding: 5px 30px;
    z-index: 10;
}
.BannerText {
    border-radius: 12px;
    background-color: #ffffff;
    opacity: 0.85;
    width: 43%;
    position: absolute;
    left: 8%;
    /*bottom: 9%;*/
    padding: 10px 20px;
    z-index: 9;
}
.BannerText .txt-2 {
    font: normal normal bold 18px/27px Microsoft JhengHei;
    color: #000000;
    margin-bottom: 0.5rem;
    /*margin-right: 40px;*/
}
.BannerText img.link-business {
    max-width: 5%;
    max-height: 5%;
    width: auto;
    height: auto;
}
/*.BannerText .more{
    position: absolute;
    right: 30px;
    bottom: 10px;
    margin-top: 0;
}*/

@media screen and (min-width: 1024px) and (max-width: 1399px){ 
    .BannerText {
        padding: 10px 20px;
        width: 55%;
    }   
    .BannerText p{
        width: 100%;    
    }
}

.mainvisual {
    --swiper-theme-color: #c21618;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-size: 5px;
    --swiper-pagination-bullet-inactive-color: transparent;
    --swiper-pagination-bullet-inactive-opacity: 1;
    position: relative;
}
.mainvisual-slider{}
.mainvisual__scroll__wrap {
    position: absolute;
    /*top: 100%;*/
    bottom: 3%;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}
.mainvisual__scroll span {
    margin-bottom: 0.2em;
}
.mainvisual__scroll {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 80px;
    width: 80px;
    font-family: Roboto,var(--bs-font-sans-serif);
    font-size: .75rem;
    letter-spacing: .2em;
    text-indent: 0.2em;
    color: #c21618;
    fill: #c21618;
    font-weight: 700;
    pointer-events: all;
}
.mainvisual__scroll:focus, .mainvisual__scroll:hover {
    color: #c21618;
    fill: #c21618;
    text-decoration: none;
    /*transition: opacity .2s ease-in-out;*/
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.mainvisual__scroll .icon use{
    animation:down_up_line 1.8s infinite ease-in-out;
}
.mainvisual__scroll .icon use{
    width: 7px;
    height: 30px;
}

  .swiper {
    overflow: visible;
  }
  .swiper-slide-active img,
  .swiper-slide-duplicate-active img,
  .swiper-slide-prev img {
    animation: zoomUp 10s linear 0s 1 normal both;
  }
  .swiper-slide{
    overflow: hidden;
}
@media (max-width: 991px){
    .banner{
        height: calc(40vh);
        margin-bottom: 30px; 
    }
    .mainvisual__scroll__wrap{
        display: none;
    }
    .business-news {
        display: none;
    }
    .BannerText {
        display: none;
    }
}
@media (max-width: 768px){
    .banner {
        height: calc(35vh);
        margin-bottom: 30px;
        background-image: url("../image_new/app_Banner_3_new.jpg");
        background-size: cover;
    }
}
/*banner*/

/*通用*/
.more {
    display: block;
    font-weight: bold;
    margin: 0;
    cursor: pointer;
    color: #DB5601;
    margin-top: 5px;
}
.more::after {
    content: url("../image/icon_more.png");
    display: inline-block;
}
.more:hover{
    color: #ad1800;
}
.date {
    font-size: 0.9em;
    font-weight:normal;
}
.new{
    font-size: 0.9em;
    font-weight: bold;
    color: #ffffff;
    border-radius: 20px;
    background-color: #C21618;
    padding: 1px 15px;
    margin-right: 15px;
}
.Bigtitle{
    font-size: 2em;
    color: #3C2C25;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    margin-bottom: calc(var(--paddingset) * 0.2);
    width: fit-content;
    
}
.Bigtitle::after {
    content: "";
    height: 6px;
    display: block;
    background: #3C2C25;
    border-radius: 50px;
    width: calc(100% - 50px);
    margin: 0 20px 0 30px;
}
.ButtonTitle{
    color: #ED6D1C;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
}
.BigButton{
    border-radius: 30px;
    border:3px solid #FF8E3F;
    background-color: #ffffff;
    padding-top: calc(var(--paddingset) * 0.3);
    padding-bottom: calc(var(--paddingset) * 0.2);
    padding-left: calc(var(--paddingset) * 0.8);
    padding-right: calc(var(--paddingset) * 0.8);
}
.BigButton:hover{
    background-color: #ffe8ba;
}
/*通用*/


/*版面*/
body{
    --paddingset: 5em;
    --widthset: 95%;  
}
.allBlock{
    min-height: 500px;

}

.NewsBlock{
    background: url("../image/headpage_bg_news.png") no-repeat -2.8% bottom;
    display: flex;
    padding: 40px 0;
    padding-top: calc(var(--paddingset) * 0.5);
    padding-bottom: calc(var(--paddingset) * 1.2);
    justify-content: center;
}
.NewsBlock .Bigtitle{
    position: absolute;
    left: 4%;
    top:25%;
}
.NewsBlock .Bigtitle::after{
    content:none;
}
.NewsBox{
    position: relative;
    width: var(--widthset);
    overflow: hidden;
    margin: 0 auto;
    padding: 20px ;
}
.allBlock .NewsBox{
    padding-top: calc(var(--paddingset) * 0.1);
    padding-left: calc(var(--paddingset) * 2);
    padding-right: calc(var(--paddingset) * 2);
}
.NewsBox ul{
    margin-bottom: 15px;
}
.NewsBox li{
    padding: 20px 0;
    border-bottom: 1px solid #B8B8B8;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.NewsBox li p{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; 
    width: 100%;
    margin-bottom: 0;
}
.themeBlock{
    min-height: 500px;
    background-color: #F7F5F0;
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--paddingset) * 0.5);
}
.themeBGBlock {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.themeBGBlock::before{
    content: url("../image/theme_bg_left.png");
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.themeBGBlock::after{
    content: url("../image/theme_bg_right.png");
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}

.themeBox{
    overflow: hidden;
    margin: 0 auto;

}
.linkBlock{
    padding: 40px 0;
    position: relative;
    
}
.linkBlock::before{
    content:url("../image/connect_tittle.png");
    position: absolute;
    left: -2%;
    bottom: 10%;
    z-index: -1;
}
.linkBlock::after{
    content: url("../image/bg_pic.png");
    position: absolute;
    bottom: -7px;
    right: 2%;
    z-index: -1;
}
.linkBox{
    /*z-index: 99;*/
    display: flex;
    width: calc(var(--widthset)* 0.8);
    overflow: hidden;
    margin: 0 auto;
    padding-top: calc(var(--paddingset) * 0.2);
    padding-bottom: calc(var(--paddingset) * 1);
    justify-content:space-evenly;
}
@media (max-width: 1023px){ 
    .linkBlock::before{
        content:none;
    }
    .themeBGBlock::before{
        width: 50%;
    }
    .themeBGBlock::after{
        width: 30%;
    }
    .themelTextBlock {
        max-width: 100%;
    }
    .linkBox{
        width: calc(var(--widthset)* 1);
		flex-wrap: nowrap;
		margin-top: calc(var(--paddingset) * 1);
    }
	.linkBox img{
        width: calc(var(--widthset)* 0.8);
    }
	.BigButton{
		margin-left: 10px;
		border-radius: 20px;
		padding-left: calc(var(--paddingset) * 0.7);
    	padding-right: calc(var(--paddingset) * 0.7);
	}

	.NewsBox{
		border:none; 
		border-radius:none;
		box-shadow:none;
		background: none;
	}
	.NewsBlock{
		background: none;
		padding-top: calc(var(--paddingset) * 0);
	}
	.allBlock .NewsBox{
		padding-top: calc(var(--paddingset) * 0.4);
    	padding-left: calc(var(--paddingset) * 0.5);
    	padding-right: calc(var(--paddingset) * 0.5);
	}
	.themeBlock .Bigtitle{
		margin-top: calc(var(--paddingset) * 0.5);
		margin-bottom: calc(var(--paddingset) * 0.5);
	}
	.NewsBox li{
		align-content: flex-start;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	.NewsBox li p{
		width: 100%;
		white-space: normal;
        font-size: 1.2rem;
        line-height: 1.6rem;
	}
	.themeBlock{
		padding-bottom: calc(var(--paddingset) * 1.5);
	}
	.showTextBox{
		padding: calc(var(--paddingset) * 1);
		border-radius: 10px;
	}
	
	.new{
		display: table;
    	padding: 1px 8px;
		margin-bottom: 5px;
	}
	.date{
		margin-top: 10px;
	}
	.linkBlock::after {
		content:none;
	}
	
}
/*版面*/

/*摩天輪*/
.themelTextBlock{}
.FerrisWheetBlock{

}
.block-service__features {
    background:url("../image/theme_pic.png") no-repeat 43% bottom;
    /*width: 755px;*/
    height: 566px;
    position: relative;
}
@media screen and (min-width: 1024px) and (max-width: 1199px){
.block-service__features {
    zoom: 0.75;
}   
}
@media screen and (min-width: 1200px) and (max-width: 1429px){
.block-service__features {
    zoom: 0.9;
}   
}
@media (max-width: 1023px){ 
    .FerrisWheetBlock{
        display: none;   
    }
    
}
.block-service__features::before{
    content:url("../image/line_pic2.svg");
    /*background: url(../image/line_pic.png) no-repeat center;*/
    width: 80%;
    /*height: 192px;*/
    opacity: 0.3;
    position: absolute;
    z-index: -1;
    transform: translate(-50%,-50%);
    left: 48%;
    top: 40.5%;
}
.block-service__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    transition: all .2s ease-in-out;
    opacity: 0;
    color: #BBB6AB;
    font-weight: bold;
}
.block-service__feature:hover{
    color: #DB5601;
}
.block-service__feature.active{
    color: #DB5601;
}
.block-service__features .name{
    background-color: #f7f5f0;
    font-size: 1.2em;
}
.is-show .block-service__feature[class*=is-feature] {
    transform: translate(0);
    opacity: 1;
}

.block-service__feature.is-feature01 {
    transition-delay: .3s;
    top: 300px;
    left: 0px;
    transform: translateY(50px);
}
.block-service__feature.is-feature02 {
    transition-delay: .35s;
    top: 85px;
    left: 85px;
    transform: translate(-50px,50px);
}
.block-service__feature.is-feature03 {
    transition-delay: .4s;
    top: 0px;
    left: 320px;
    transform: translate(-50px,-20px);
}
.block-service__feature.is-feature04 {
    transition-delay: .45s;
    top: 0px;
    left: 415px;
    transform: translateY(-50px);
}
.block-service__feature.is-feature05 {
    transition-delay: .5s;
    top: 85px;
    left: 555px;
    transform: translate(50px,-50px);
}
.block-service__feature.is-feature06 {
    transition-delay: .55s;
    top: 300px;
    left: 645px;
    transform: translate(50px,20px);
}
.block-service__feature .feature_circle_bg {
    transition: opacity .35s linear .15s;
    opacity: 1;
}
.block-service__feature .feature_circle {
    transition: all .35s ease-in-out;
    transform-origin: center;
}
.block-service__feature .feature_icon {
    fill: #ED6D1C;
}
.feature_circle{
    stroke:#BBB6AB;
}
.block-service__feature:hover .feature_circle{
    stroke:#ED6D1C;
}
.block-service__feature.active .feature_circle{
    stroke:#ED6D1C;
}
.feature_circle_bg{
    fill: #F7F5F0;
}
.block-service__feature:hover .feature_circle_bg{
    fill: #fff4b8;
}
.block-service__feature.active .feature_circle_bg{
    /*opacity: 0.3;*/
    fill: #fff4b8;
}
.block-service__feature .feature_icon {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.block-service__feature:focus .feature_circle_bg, .block-service__feature:hover .feature_circle_bg {
    /*opacity: .3;*/
}
.block-service__feature:focus .feature_circle, .block-service__feature:hover .feature_circle {
    transform: rotate(180deg);
}
/*-------------*/
.is-icon01 {
    background-image: url("../image_new/theme_grey_01_new.png");
}
    .is-icon01:hover {
        background-image: url("../image_new/theme_orange_01_new.png");
    }
.block-service__feature.active .is-icon01 {
    background-image: url("../image_new/theme_orange_01_new.png");
}
.is-icon02 {
    background-image: url("../image_new/theme_grey_02_new.png");
}
    .is-icon02:hover {
        background-image: url("../image_new/theme_orange_02_new.png");
    }
.block-service__feature.active .is-icon02 {
    background-image: url("../image_new/theme_orange_02_new.png");
}
.is-icon03 {
    background-image: url("../image_new/theme_grey_03_new.png");
}
    .is-icon03:hover {
        background-image: url("../image_new/theme_orange_03_new.png");
    }
.block-service__feature.active .is-icon03 {
    background-image: url("../image_new/theme_orange_03_new.png");
}
/*.is-icon04{
    background-image: url("../image/theme_grey_04.png");
}
.is-icon04:hover{
    background-image: url("../image/theme_orange_04.png");
}
.block-service__feature.active .is-icon04{
    background-image: url("../image/theme_orange_04.png");
}*/
.is-icon05 {
    background-image: url("../image_new/theme_grey_05.png");
}
    .is-icon05:hover {
        background-image: url("../image_new/theme_orange_05.png");
    }
.block-service__feature.active .is-icon05 {
    background-image: url("../image_new/theme_orange_05.png");
}
.is-icon06 {
    background-image: url("../image_new/theme_grey_06_new.png");
}
    .is-icon06:hover {
        background-image: url("../image_new/theme_orange_06_new.png");
    }
.block-service__feature.active .is-icon06 {
    background-image: url("../image_new/theme_orange_06_new.png");
}
/*-------------*/

.themePic{
    text-align: center;
    padding-bottom: calc(var(--paddingset) * 0.2);
}

/*-------------*/
.show_content{
    margin-top: calc(var(--paddingset) * 0.4);
}
.showTextBox {
    background-color: #ffffff;
    border-radius: 20px;
    padding: calc(var(--paddingset) * 0.2);
    overflow: hidden;
    box-shadow: 0 5px 10px #cccccc;
    position: relative;
    margin: 15px;
}
.showTextBox p{
    font-size: 1rem;
    line-height: 120%;
    margin-bottom: 1.5rem;
}
.showTextBox .more{
    position: absolute;
    bottom: 7px;
    right: 15px;
}
.showPicBox {
    height: auto;
}
.showPicBox img {
    /*width: 278px;*/
}
.showPicBox {
        text-align: center;
}
.showPhoto {
    position: relative;
    margin-right: 10px;
        text-align: center;
}
.showPhoto img {
    text-align: center;
    margin: 0 auto;
}
@media screen and (min-width: 1024px) and (max-width: 1199px){
.showPhoto img {
    width: 70%;
}   
}
.index .slick-dotted.slick-slider {
    /*margin-bottom: 75px;*/
}
/*-----------*/
.show_content .slick-prev:before, .show_content .slick-next:before{
    color: black;
}
.show_content .slick-prev, .show_content .slick-next{
    top: 39%;
    z-index: 100;
}
.show_content .slick-prev{
    left: 20px;
}
.show_content .slick-next {
    right: 20px;
}
@media (max-width: 1023px){
	.showTextBox{
		border-radius: 10px;
    	padding: calc(var(--paddingset) * 0.5);
	}
    .showTextBox p{
        font-size: 1.1rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
	.showPhoto img {
		width: auto;
	}  
}
@media (max-width: 767px){
	.showPhoto img {
		width: 70%;
	}  
}
	
/*摩天輪*/


/* Top */
.toTop-arrow {
	width: 3rem;
	height: 3rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	opacity: 0.7;
	background: #000;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 4.5rem;
	display: none;
    z-index: 1000;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 18px;
	height: 5px;
	border-radius: 3px;
	background: #ffffff;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.85rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.85rem;
}
.toTop-arrow:focus {outline: none;}
 
.ServiceArrow {
	width: 3rem;
	height: 3rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	opacity: 0.7;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
    z-index: 1000;
    background: url("../image/CustomerService.png") top center no-repeat #D88100;
}
.toTop-arrow ,.ServiceArrow{
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;    
}
.toTop-arrow span,.ServiceArrow span{
    position: relative;
    bottom: -12px;
}
.toTop-arrow:hover ,.ServiceArrow:hover{
    opacity:1;
}
/* Top */



/* footer */
.footer {
	width: 100%;
	min-height: 180px;
    height: 400px;
    position: absolute;
    color: #ffffff;
    bottom: 0;
    left: 0;
    padding-bottom: 20px;
	box-sizing:inherit;
    background-color: #3C2C25;
}
.footerBox01{
    background-color: #F3F0E8;    
    padding-top: 70px;
    padding-bottom: 70px;
    color: #3C2C25;
    
}
.footerBox01 .linkTitleS{
    font-size: 1rem;
    font-weight: bold;
}
.footerlinkClass{
    display: flex;
    justify-content: center;
}
.footerBox01 .linkClass{
    padding-right: 50px;
    padding-left: 50px;
    margin: 0 40px 0 40px;
    border-right: 1px solid #3c2d25;
    position: relative;
    height: 60px;
}
.footerBox01 .linkClass:last-child{
    border-right: none;
}
.linkClassPIC{
    position: absolute;
    left: 0;
    vertical-align: middle;
    padding-top: 10px;
    text-align: center;
    height: 40px;
}
.footerBox01 ul{
    display: inline-table;
    padding-right: 20px;
}
.footerBox01 li a{
    font-size: 1rem;
    color: #ffffff;

}
.footer_text{}
.footer_text2{
    margin-top: 20px;
}
.footer_text2 p{
    display: inline-block;
    padding-right: 20px;
}
.footerBox03{
    font-size: 0.9rem;
    padding-top: 30px
}

.footerBox03 p {
	font-size:0.9rem;
	margin: 0;
    color: #ffffff;
}
.footerBox03 .footer_text ul{
    margin-bottom: 25px;
}
.footerBox03 .footer_text li{
    display: inline-block;
    border-right:1px solid #ffffff;
    padding: 0 10px;
}
.footerBox03 .footer_text li a{
    color: #ffffff;
    line-height: 20px;
}
.footerBox03 .footer_text li a:hover{
    color: #e38548;
}
.footerBox03 .footer_text li:first-child{
    padding: 0 10px 0 0;
}
.footerBox03 .footer_text li:last-child{
    border-right:none;
}
@media screen and (min-width: 1024px) and (max-width: 1199px){
    .footerBox01 .linkClass {
        padding-right: 35px;
        margin: 0 20px 10px 20px;
    }   
}
@media screen and (min-width: 768px) and (max-width: 1023px){
    .footerBox01 .linkClass {
        padding-right: 20px;
        padding-left: 50px;
        margin: 0 10px 0 5px;
    }   
}
@media (max-width: 767px){ 
	.footer{
		height: auto;
		position: relative;
	}
    .footerBox01{
        padding-top: 35px;
        padding-bottom: 35px;
    }
    .footerlinkClass{
        flex-direction: column;   
    }
    .footerBox01 .linkClass{
        height:auto;
        border-right:none;
        margin-bottom: 10px;
    }
    .footerBox03 .footer_text li:nth-child(odd){
        padding-left: 0;
    }
    .footer_text p span{
        display: block;
    }
}
/* footer */
@media screen and (min-width: 992px) and (max-width: 1199px){
    body{
        --paddingset: 5em;
        --widthset: 95%;  
    }
}
@media (max-width: 1430px){
    html{
        font-size: 100%;/*20 ÷ 16 × 100% = 125%*/
    } 
}
@media (min-width: 992px){ 
    .web {
        display: block; 
    }
    .app {
        display: none; 
    }
}
@media (max-width: 991px){ 
    body{
        --paddingset: 2em;
        --widthset: 95%;  
    }
    .web {
        display: none; 
    }
    .app {
        display: block; 
    }
}
@media (max-width: 767px){ 
    .wrapper{
        padding-bottom: 0;
    }
}


 [data-lazydisp]{
  opacity: 1;
  transition: all 0.5s ease-in-out;
  transform: translate( 0, 0 ) scale( 1, 1 );
}
@keyframes down_up_line {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-14px);
  }
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}