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

/*動態*/

.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-12-8 11:55:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
 @-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}






/*動態*/


.myGrid{
	margin: 0 auto;
	max-width: 1472px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex; 
	display: flex;
	flex-wrap: wrap;
		}
		
		
	.grid-item{
        width: 100%;margin: 0px 0px 54px 0px;
    }
	.grid-item-border {
		margin: 0px auto;
		height: 100%;
		overflow:hidden;}
		
		
	.box2-b ul {
    border: 1px solid #d9d9d9;
    width: 49%;
    list-style: none;
    display: inline-flex;
    padding: 2px 2px 42px 2px;
    margin: 9px auto 0px 4px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 12px 0px rgb(0 0 0 / 10%);
}
	.box2-b li { 
    padding: 8px 15px 0px 15px;
    margin: 0px 8px 0px 8px;
    height: 217px;
}
		
	.grid-item h1{
			font-family: "Arial", sans-serif;
			
	font-size: 37px;
    font-weight: bold;
    color: #444446;
    margin-bottom:0px;
    position: relative;
    padding-left: 0px;
			
		}
		
	.box2-b ul h1{
	    font-family: "Arial", sans-serif;
    font-size: 21px;
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
    position: relative;
       border-bottom: 1px solid #ccc;

    padding: 4px 0px 8px 30px;
}
		
.toppath{

    
    padding: 10px 10px 0px 10px;
}	

.pathtext{

font-weight: bold;

}


.box2 {
    margin: 25px auto !important;
}
	.box2-b {
        margin: 12px auto;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
		
		
.nos{    
    display: block;
    background: #5e5e5e;
    font-size: 20px;
    font-weight: normal;
    color: #FFF;
    width: 22px;
    height: 24px;
    text-align: center;
    line-height:24px;
    position: absolute;
    left: 0;
    top: 3px;    
	padding: 1px 0px 0px 0px;
}

		
		.pra img{
			float: right;
    border: 1px solid #d4d4d4;
    margin-left: 15px;
  width: 250px;
height: 200px;
	
    radius: 23px;
    border-radius: 9px;

		}	

        /*pc*/
		.bigone{
    display: inline-flex;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 12px 0px rgb(0 0 0 / 10%);
    border: 1px solid #d9d9d9;
  background: #fff;
    padding: 16px 18px 0px 18px;
    margin: 10px 14px 0px 3px;
}
		.pra_main{
            width: 100%;
    padding: 0px 14px 0px 8px;
    color: #000;
}
		.pra_main p{
			
			font-family: "Arial", sans-serif;
			margin: 0px;
			padding: 6px 0px 0px 0px;
			font-size: 18px;
    color: #5c5c60;
    line-height: 28px;
}
		
		.pra{display: inline-flex;
}
			.pra p{  color: #000000;
    font-size: 15px;line-height: 20px;
				    margin: 0px;
    padding: 2px;
				
				
				color: rgb(0, 0, 0);
    font-family: Arial;
font-size: 17px;
    line-height: 23px;
}
		.gobox{padding: 6px 0px 0px 0px;}
		.pra_r{float: right;    padding: 17px 17px 0px 17px;
}
		.pra_r img{
		    width: 430px;
    height: 241px;
}
		
		
.btC {
  font-size:15px;
  font-family:Arial;
  width:141px;
  height:33px;
  border-width:1px;
  color:#fff;
  border-color:#84bbf3;
  font-weight:bold;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  text-shadow:inset 0px 1px 0px #528ecc;
  background:linear-gradient(#3d94f6, #1e62d0); 
	padding: 7px;
text-decoration: none;
}

.btC:hover {
  background: linear-gradient(#378de5, #79bbff);
}
              
		
		
		@media only screen and (min-width: 993px) {
			
			.myGrid{ }
			.grid-item {
                margin: 0px 0px 21px 0px;
                width: 100%;
            }
            
			.grid-item-border {     
    color: #000000;
    
}
.box2-b ul {
    border: 1px solid #d9d9d9;
    width: 49%;
    list-style: none;
    display: inline-flex;
    padding: 2px 0px 42px 6px;
    margin:9px 5px 0px 4px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 12px 0px rgb(0 0 0 / 10%);
    height: 292px;

}
			.box2-b li {
    padding: 8px 15px 0px 15px;
    margin: 0px 8px 0px 8px;
    height: auto;
}
			
			.btC {
                font-size: 18px;
    float: none;
    height: auto;
}
.bigone {
display: inline-flex;
  width: 99%;
 border-radius: 10px;
box-shadow: 0 5px 12px 0px rgb(0 0 0 / 10%);
 border: 1px solid #d9d9d9;
background: #fff;
padding: 16px 18px 0px 18px;
margin: 10px 14px 0px 3px;
}
	
		}
		
		@media only screen and (max-width: 992px) { 
			
			.myGrid{ }
		.grid-item {
    width: 100%;
    margin: 0px auto 0px;
}
			.grid-item-border {
				border: 3px solid #1b90bb;
				padding: 5px;	margin: 5px;
				background:#FFFFFF;		color:#000000;}
			.grid-item-border ul {
    border: 1px solid #d9d9d9;
    width: 49%;
    list-style: none;
    display: inline-flex;
    padding: 2px 0px 69px 0px;
    margin: 9px auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 12px 0px rgb(0 0 0 / 10%);
}
/*--ipad--size--*/
.btC {
    font-size: 18px;
    float: none !important;
    height: auto;
}	
			.box2-b li {
    padding: 8px 15px 0px 15px;
    margin: 0px 8px 0px 8px;
    height: auto;
}

.pra img {
    float: right;
    border: 1px solid #d4d4d4;
    margin-left: 15px;
    width: 100%;
    height: 100%;}


/*--ipad--size--*/
.pra {
    display: inline-block !important;
}
.pra_main {
    width: 100%;
    padding:0px 0px 0px 16px !important;
    color: #000;
}
.bigone {
    display: inline-flex;
    width: 97%;
    border-radius: 10px;
    box-shadow: 0 5px 12px 0px rgb(0 0 0 / 10%);
    border: 1px solid #d9d9d9;
    background: #fff;
    padding: 16px 18px 0px 18px;
    margin: 17px 0px 0px 9px !important;
}

/*--ipad--size--*/
.box2-b ul {
    border: 1px solid #d9d9d9;
    width: 48%;
    list-style: none;
    display: inline-flex;
    padding: 2px 0px 42px 6px;
    margin: 23px auto 0px 7px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 12px 0px rgb(0 0 0 / 10%);
 height: 531px !important;
}


.pra img {

    border: 1px solid #d4d4d4;
    margin-left: 15px;
    width: 100%;
    height: 100%;
   
    border-radius: 9px;
    margin: 12px auto;
}
			
			
			
			
			}
		
		@media only screen and (max-width: 768px) {
			
			.myGrid{ }
			.grid-item {margin: 0px 0px 26px 0px;width: 100%;}
			
			
			.grid-item h1{font-size: 32px;word-break: break-word;
    width: 93%;
}

			
			
			.grid-item-border {
			    padding: 0px;
    margin: 0px;
				background:#FFFFFF;	color:#000000;}
		
.bigone {
    display: inline-block;
    width: 95%;
    border-radius: 10px;
    box-shadow: 0 5px 12px 0px rgb(0 0 0 / 10%);
    border: 1px solid #d9d9d9;
    padding: 0px 0px 0px 0px;
    margin: 0px 10px 0px 7px;
}

.box2 {
    margin: 0px auto !important;
}
.btC {
    font-size: 18px;
    float: none;
    height: auto;
}
/*手機版*/		
.box2-b ul {
    border: 1px solid #d9d9d9;
    width: 96%;
    list-style: none;
    display: inline-flex;
    padding: 2px 12px 42px 0px;
    margin: 34px 0px 0px 8px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 12px 0px rgb(0 0 0 / 10%);
    height: auto !important;
}

.box2-b li {
    padding: 8px 0px 0px 8px;
    margin: 0px 0px 0px 7px;
    height: auto;
}
		
.pra img {
    float: none;
    border: 1px solid #d4d4d4;
    margin-left: 0px;
    width: 100%;
    height: 100%;
  
    border-radius: 9px;
    margin: 22px 0px 0px 0px;
}	
		
.pra_r img {
    width: 100%;
    height: 100%;
}
		
		}