@charset "utf-8";

.carousel-item .data-content{
	margin:20px auto;
}
.carousel-control-prev,.carousel-control-next{
		  display: flex;
    position: fixed;
}
.carousel-control-prev-icon{
	right: 0;
    position: absolute;  
    background-color: rgb(0, 0, 0, 30%);
    border-radius: 4px 4px;
    height:2.5em;
}

.carousel-control-next-icon{
	left: 0;
    position: absolute;  
    background-color: rgb(0, 0, 0, 30%);
    border-radius: 4px 4px;
    height:2.5em;
}
/* toastr 客製化樣式  */
#toast-container {
	margin-top:150px;
}
#toast-container > div{
	opacity:1;
}
.toast-info {
	/*background:#9F77C9*/
}
.title3-1 {
	text-align: center;
}
	/*修正活動辦法高度問題*/
	
@media screen and (min-width: 993px) {
	.activity-step li{
	min-height:440px;
	
}
}


img{
	/*避免模糊*/
	 image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

/* 避免表單必填下拉選擇框被驚嘆及箭頭填滿*/
.form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"], .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"] {
	background-repeat: no-repeat;
}


.page-wrap.popup {
	position: fixed;
    top: 0;
    background: rgb(0 0 0 / 50%);
    display:none;
    z-index: 10000;
}
.mask{
	background: rgb(0 0 0 / 50%);
}


.popup-close{
	color: #555;
	cursor: pointer;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	font-weight: 600;
}
/*right-link*/

.experience-link {}

.experience-list {
   position: fixed;
   z-index: 99;
   padding: 15px 5px;
   display: block;
   right: 1%;
   top: 41%;
}

.experience-list div a,
.experience-list .open-menu span,
.experience-list .main-list .main-list_rwd {
   text-decoration: none;
   display: flex;
   width: 120px;
   height: 120px;
   border-radius: 100%;
   margin: 8px 0;
   align-items: center;
   justify-content: center;
   box-shadow: 0px 0px 9px 0px rgba(9, 37, 45, 0.35);
   text-align: center;
}

.experience-list .open-menu span {
   display: none;
}

.experience-list .main-list a,
.experience-list .open-menu span,
.experience-list .main-list .main-list_rwd {
   font-size: 1.1rem;
   color: #3BBEE4;
   background: #fff;
   position: relative;
}

.experience-list .main-list a:hover,
.experience-list .open-menu span:hover,
.experience-list .main-list .main-list_rwd:hover {
   background: #3BBEE4;
   color: #fff;
}

.experience-list .main-list .main-list_rwd,
.experience-list .sec-list .sec-list_rwd {
   display: none;
}

.experience-list .sec-list a {
   font-size: 1.1rem;
   background: #fff;
   color: #3BBEE4;
   position: absolute;
   display: flex;
   width: 100px;
   height: 100px;
}

.experience-list .sec-list a:hover {}

.experience-list .sec-list.top a,
.experience-list .sec-list.bottom a {
   right: 12%;
}

.experience-list .sec-list.top a {
   top: 0;
   opacity: 0;
   transform: translateY(0);
   -webkit-transform: translateY(0);
   transition: all 1.5s;
}

.experience-list .sec-list.top .go {
   top: 5%;
   opacity: 1;
   transform: translateY(-100%);
   -webkit-transform: translateY(-100%);
}

.list-close {
   position: relative;
   z-index: 999999;
}

.close_btn {
	color: #c9ab20;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid ;
   border-radius: 50%;
   position: absolute;
   z-index: 99999999;
   transition: all 1.5s;
   opacity: 0;
   left: 0;
   right: 0;
   transform: translate(47%, 239%);
   -webkit-transform: translate(47%, 239%);
   -moz-transform: translate(47%, 239%);
   font-size:26px;
}

.experience-list .sec-list.top {
   top: 0;
}

.list-close.go .close_btn {
   top: 5%;
   opacity: 1;
}

@keyframes goTop {
   from {
       opacity: 0;
       transform: translateY(0);
       -webkit-transform: translateY(0);
   }
   to {
       opacity: 1;
       transform: translateY(-100%);
       -webkit-transform: translateY(-100%);
   }
}

@-webkit-keyframes goTop {
   from {
       opacity: 0;
       transform: translateY(0%);
       -webkit-transform: translateY(0%);
   }
   to {
       opacity: 1;
       transform: translateY(-100%);
       -webkit-transform: translateY(-100%);
   }
}

.experience-list .sec-list.bottom a {
   opacity: 0;
   transform: translateY(0);
   -webkit-transform: translateY(0);
   transition: all 1.5s;
}

.experience-list .sec-list.bottom .go {
   opacity: 1;
   transform: translateY(100%);
   -webkit-transform: translateY(100%);
   bottom: 5%;
}

@keyframes goBottom {
   from {
       opacity: 0;
       transform: translateY(0);
       -webkit-transform: translateY(0);
   }
   to {
       opacity: 1;
       transform: translateY(100%);
       -webkit-transform: translateY(100%);
   }
}

@-webkit-keyframes goBottom {
   from {
       opacity: 0;
       transform: translateY(0%);
       -webkit-transform: translateY(0%);
   }
   to {
       opacity: 1;
       transform: translateY(100%);
       -webkit-transform: translateY(100%);
   }
}

.experience-list .sec-list.top .go:hover {
   background: #3BBEE4;
   color: #fff;
}

.experience-list .sec-list.bottom .go:hover {
   background: #3BBEE4;
   color: #fff;
}

.experience-list .sec-list.top .back {
   animation-name: backTop;
   -webkit-animation-name: backTop;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
}

@keyframes backTop {
   from {
       opacity: 1;
       transform: translateY(-100%);
       -webkit-transform: translateY(-100%);
   }
   to {
       opacity: 0;
       transform: translateY(0);
       -webkit-transform: translateY(0);
   }
}

@-webkit-keyframes backTop {
   from {
       opacity: 1;
       transform: translateY(-100%);
       -webkit-transform: translateY(-100%);
   }
   to {
       opacity: 0;
       transform: translateY(0);
       -webkit-transform: translateY(0);
   }
}

.experience-list .sec-list.bottom .back {
   animation-name: backBottom;
   -webkit-animation-name: backBottom;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
}

@keyframes backBottom {
   from {
       opacity: 1;
       transform: translateY(100%);
       -webkit-transform: translateY(100%);
   }
   to {
       opacity: 0;
       transform: translateY(0);
       -webkit-transform: translateY(0);
   }
}

@-webkit-keyframes backBottom {
   from {
       opacity: 1;
       transform: translateY(100%);
       -webkit-transform: translateY(100%);
   }
   to {
       opacity: 0;
       transform: translateY(0);
       -webkit-transform: translateY(0);
   }
}


@media only screen and (max-width: 576px) {
	.mx-xs-2{
		margin-right: 0.5rem!important;
    	margin-left: 0.5rem!important;
	}
   .experience-list div a,
   .experience-list .open-menu span,
   .experience-list .main-list .main-list_rwd {
       width: 80px;
       height: 80px;
   }
   .experience-list .open-menu span {
       position: relative;
       display: flex;
   }
   .experience-list .main-list .main-list_rwd {
       display: none;
   }
   .experience-list .main-list .main-list_pc,
   .experience-list .sec-list .sec-list_pc {
       display: none;
   }
   .experience-list .sec-list .sec-list_rwd {
       display: flex;
   }
   .experience-list .main-list a,
   .experience-list .open-menu span,
   .experience-list .main-list .main-list_rwd {
       font-size: 1rem;
   }
   .experience-list .open-menu span {
       position: absolute;
       right: 6%;
   }
   .experience-list .sec-list a {
       width: 80px;
       height: 80px;
       font-size: .9rem;
   }
   .experience-list .sec-list.top a,
   .experience-list .sec-list.bottom a {
       right: 6%;
       font-size: 1rem;
   }
}

@media only screen and (max-width: 414px) {
   .experience-list {
       top: 48%;
   }
   
}


@media only screen and (max-width: 320px) {
   .experience-list {
       top: 50%;
   }
}


/* logo 設定*/
.logo .logo_1,
.logo .logo_2 {
    transition: ease-in .3s;
    position: absolute;
    left: 0;
}


.logo_show {
    animation-name: showUp;
    -webkit-animation-name: showUp;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

.logo_vanish {
    animation-name: vanishUp;
    -webkit-animation-name: vanishUp;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

@keyframes showUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes showUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes vanishUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@-webkit-keyframes vanishUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
a.logo_show:active{
	background-color: transparent;
}

.popup.msgpopup{
	justify-content: flex-start;
    text-align: center;
}