@charset "utf-8";
.vbox {    
    border: none;    
    margin-right: 0px; 
    margin-bottom: 35px;
    width: 430px;
    background-color: transparent;
   
}
.vbox .simage{    
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}
.vbox .titles-pc {    
    padding: 0px 0px 10px 0px;
}
.vbox .titles-pc h3 a {
    font-size: 1.2rem;
    margin-bottom: 0px;
    font-weight: bold;    
    color:#be3c28;
    max-height: none;
    -webkit-line-clamp: 10;    
}

.vbox .titles-mobile { 
    display: none;
}
.vbox .info {
    z-index: 61;
    flex-direction: row;
    
}
.vbox .btns-mobile {
    display: none;
}
.vbox .info .btns-pc {
    flex:1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.vbox .info .btns-pc .btn-download-video {
    cursor: pointer;
    padding: 3px 10px;
    color:#00aaff;
}
.vbox .info .btns-pc .btn-share:hover,
.vbox .info .btns-pc .btn-download-video:hover {
    color:#fff;
    
}
.vbox .info .btns-pc .btn-share {
   cursor: pointer;    
   padding: 1px 10px; 
   color:#00aaff;
       
}
.vbox .info .btns-pc .ico-share:before {
    font-size: 1.3rem;
}


.bk-body {
   background-color: #f5f5f5;    
}
.top-area{
   background-image: url("../images/master/top1.jpg");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100% auto;      
}
.top-area-bk{
   background-image: url("../images/master/bk3.png");
   background-position: bottom center;
   background-repeat: no-repeat;
   background-size: 100% auto;   
      
}
.top-area .main-title {
   flex:1;    
   padding: 60px 50px 50px 50px;
   text-align: center;   
   display: flex;
   flex-direction: column;
   justify-content: center;       
}

.top-area .main-title .page-title1{
   color:#9600FF;
   font-size: 3rem;      
   line-height: 1.2;   
   padding-bottom: 10px;   
   letter-spacing: 1px;       
}

.lang-tl .top-area .main-title .page-title1,
.lang-it .top-area .main-title .page-title1,
.lang-pl .top-area .main-title .page-title1,
.lang-cs .top-area .main-title .page-title1,
.lang-id .top-area .main-title .page-title1,
.lang-ro .top-area .main-title .page-title1,
.lang-pt .top-area .main-title .page-title1,
.lang-ms .top-area .main-title .page-title1,
.lang-mn .top-area .main-title .page-title1,
.lang-hu .top-area .main-title .page-title1,
.lang-fr .top-area .main-title .page-title1,
.lang-es .top-area .main-title .page-title1,
.lang-de .top-area .main-title .page-title1,
.lang-vn .top-area .main-title .page-title1,
.lang-en .top-area .main-title .page-title1 {    
   font-family: 'master-title1';
   transform: scaleY(1.1);  
}

.top-area .main-title .page-title1 span{
    color:#00a000;
}
.lang-ch .top-area .main-title .page-title1,
.lang-gb .top-area .main-title .page-title1{
   font-family:'master-title2-ch3';
   font-size: 3.5rem;    
}

.lang-pl .top-area .main-title .page-title1,
.lang-vn .top-area .main-title .page-title1,
.lang-de .top-area .main-title .page-title1{
   font-size: 2.5rem;    
}



.top-area .main-title .page-title2{
   color: #be3c28;
   font-size: 2rem;        
}
.lang-hu .top-area .main-title .page-title2,
.lang-tl .top-area .main-title .page-title2,
.lang-it .top-area .main-title .page-title2,
.lang-pl .top-area .main-title .page-title2,
.lang-cs .top-area .main-title .page-title2,
.lang-id .top-area .main-title .page-title2,
.lang-ro .top-area .main-title .page-title2,
.lang-pt .top-area .main-title .page-title2,
.lang-ms .top-area .main-title .page-title2,
.lang-vn .top-area .main-title .page-title2,
.lang-fr .top-area .main-title .page-title2,
.lang-es .top-area .main-title .page-title2,
.lang-de .top-area .main-title .page-title2,
.lang-en .top-area .main-title .page-title2 {  
   font-family: 'master-title2';      
}
.lang-ch .top-area .main-title .page-title2,
.lang-gb .top-area .main-title .page-title2{
    font-size: 2.2rem;
}

.lang-ro .top-area .main-title .page-title2{
    font-size: 1.5rem;
}

.top-area .video-area {
   display: flex;  
}
.top-area .video-area .left {
   width: 700px;       
}
.top-area .video-area .right {
   display: flex;
   flex-direction: column;    
}




.top-area .pics-mobile{
    display: none;
}
.article-text {
	font-size: 1.2rem;
	line-height: 2rem;
	word-break: break-word;
}
.article-text p{
	margin-bottom: 2rem;
}
.article-text p::first-letter {
    font-size: 1.5em;
}

.article-text p:empty{
	font-size: 0rem;
	line-height: 0rem;		
	height: 1px;
}
.article-text img{
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	display: block;
}
.article-text .notes {
	margin-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;	
	display: block;
}
.article-text a{
  color: #00aaff;
}

.article-content .bk1{
   background-image: url("../images/master/bk1.jpg");
   background-size: 100% auto;
   background-position: top center;
   background-repeat: repeat-y;       
}
.article-content .bk2{
   background-image: url("../images/master/bk2.png");
   background-size: 100% auto;
   background-position: bottom center;
   background-repeat: no-repeat;
   padding: 10px 70px 170px 70px;    
}
.article-content .pics1{
   padding: 20px 0px 50px 0px;
   display: flex;
   justify-content: center;    
}
.article-content .pics1 img{
   margin: 0px 15px;    
   max-width: 28%;    
}
.article-content .videos{
   padding: 0px 0px 50px 0px;
}
.footer {
    margin-top: 0px;
}

.section2{
    padding: 0px 0px 30px 0px;
}

.carousel-card {
    margin: 0px 0px 30px 0px;
    display: flex;   
    justify-content: center;   
    flex-wrap: wrap;           
 }
 .carousel-card .item{
    order: 1;    
    display: flex;     
    max-width: 353.33px;   
    margin: 0px 20px 20px 0px;    
    flex-direction: column;    
    box-shadow: 2px 4px 12px rgba(0,0,0,0.1);
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden; 
    animation: hover-scale-out 0.2s linear forwards; 
    flex-grow: 1;  
    align-items: stretch; 
    box-sizing: border-box;    
 }
 .carousel-card .item.current{
    background-color: #efffef;
    border: 2px solid #A3E8A0;     
 }
 .carousel-card .item:last-of-type{
    margin-right: 0px;  
 }

 .carousel-card.carousel-card4 .item:nth-of-type(4n+4){
    margin-right: 0px;    
 }    
 .carousel-card.carousel-card4 .item{
    max-width: calc((100% - 60px)/4);      
 }
 
 .carousel-card.carousel-card3 .item:nth-of-type(3n+3){
    margin-right: 0px;    
 }    
 .carousel-card.carousel-card3 .item{
    max-width: calc((100% - 40px)/3);      
 }

 .carousel-card.carousel-card2 .item:nth-of-type(2n+2){
    margin-right: 0px;    
 }    
 .carousel-card.carousel-card2 .item{
    max-width: calc((100% - 20px)/2);      
 }

 .carousel-card .item:hover {
   animation: hover-scale-hover 0.2s linear forwards;  
 }
 .carousel-card .item .simage{  
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center center;
 }
 .carousel-card .item .simage a{  
    width: 100%;    
    display: flex;
 }
 .carousel-card .item .simage img{  
    width: 100%;
 }
 .carousel-card .item .titles{
    display: flex;    
    justify-content: center;       
    padding: 15px;    
    flex: 1;        
 }
 
 @media screen and (max-width: 970px){
 .carousel-card {
    margin: 0px 0px 10px 0px;          
 }    
 .carousel-card .item{
    max-width: 640px;
    width: 100%;       
    margin: 0px 0px 20px 0px;    
    box-shadow: none;
    background-color: #f2f2f2;    
 }  
 .carousel-card .item:hover {
   animation: none;
 }
 .carousel-card.carousel-card3 .item:nth-of-type(n+4){
    max-width: 100%;      
 }    
 }


@media screen and (orientation: landscape) and (max-width: 1200px) {

.top-area .main-title .page-title1 {
    font-size: 2.5rem;
    padding-bottom: 15px;    
 }
.top-area .main-title .page-title2 {    
   font-size: 1.5rem;    
}   
}


@media screen and (max-width: 970px) {    
.top-area .video-area {
    display: block;
    padding: 0px 15px;
}    
.vbox {
    width: 100%;
    margin: 0px;
    padding: 15px 0px 15px 0px;
    border-bottom: 1px solid #dddddd;    
}
.vbox .contents {
   margin-bottom: 0px; 
}    
.vbox .simage{    
    border-radius: 7px;
    box-shadow: none;
}    
.vbox .titles-pc {    
   display: none;
}    
.vbox .titles-mobile {    
   display: flex;
   flex-direction: column;
   padding: 0px 0px 0px 10px;
}
.vbox .titles-mobile h3,
.vbox .titles-mobile h3 a {
   font-size: 1rem;
   line-height: 1.4rem;
   font-weight: normal;
   max-height: none;
   -webkit-line-clamp: 10;    
}  
.vbox .titles-mobile h3{
  flex: 1;
}  
.vbox .info .btns-pc {
    display: none;
}
    
.vbox .btns-mobile {
    display: flex; 
    justify-content: flex-end;
}
.vbox .btns-mobile .btn-download-video,    
.vbox .btns-mobile .btn-share{   
    font-size: 1rem;
    color:#999;
    padding: 0px 0px 0px 15px;
}
.vbox .btns-mobile .btn-share{
    padding: 0px 0px 2px 15px;    
}
    
.bk-body {
   background-color: #fff;    
}    
.top-area {
    min-height: auto;    
    background-image: none;
    flex-direction: column;
}  
.top-area .main-title {
    padding: 50px 15px 0px 15px;
    text-align: center;
    background-color: #fee3d2;    
}  
   
.top-area .left {
    display: none;
}   
    
.top-area .main-title .page-title1 {
   font-size: 1.4rem;
   padding-bottom: 15px;    
} 

.lang-ch .top-area .main-title .page-title1,
.lang-gb .top-area .main-title .page-title1{
   font-size: 1.8rem;    
}

.lang-pl .top-area .main-title .page-title1, 
.lang-vn .top-area .main-title .page-title1{
   font-size: 1.4rem;    
}
.lang-de .top-area .main-title .page-title1 {
   font-size: 1.1rem;                    
}
.lang-pl .top-area .main-title .page-title1,
.lang-mn .top-area .main-title .page-title1 {
   font-size: 1.2rem;            
}
.lang-nl .top-area .main-title .page-title1,
.lang-uk .top-area .main-title .page-title1,
.lang-ru .top-area .main-title .page-title1,                
.lang-ro .top-area .main-title .page-title1,            
.lang-bg .top-area .main-title .page-title1,        
.lang-hu .top-area .main-title .page-title1,
.lang-es .top-area .main-title .page-title1{
   font-size: 1.3rem;    
}
.lang-it .top-area .main-title .page-title1,
.lang-vn .top-area .main-title .page-title1{
    font-size: 1.2rem;    
 }
.top-area .main-title .page-title2 {    
   font-size: 1.2rem;    
}
.lang-ch .top-area .main-title .page-title2,
.lang-gb .top-area .main-title .page-title2 {    
   font-size: 1rem;    
}   
    
.lang-ro .top-area .main-title .page-title2{
    font-size: 1.2rem;
}    
.lang-vn .top-area .main-title .page-title2{
    font-size: 1rem;
} 
.top-area .pics-mobile {
    width: 100%;
    display: flex;
}    
.top-area .pics-mobile img {
    width: 100%;    
}   

.article-content .bk2 {
    background-image: url("../images/master/bk2_m.png");    
    background-size: 100% auto;
    background-position: bottom center;
    padding: 30px 15px 50px 15px;
} 
    
    
}
@media screen and (max-width: 640px) {
.article-content .pics1{
   padding: 20px 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;    
}
.article-content .pics1 img{
   max-width: 230px;    
   margin: 15px 15px;    
}    
}
.lang-fa .carousel-card .item .titles,
.lang-ar .carousel-card .item .titles, 
.lang-ur .article-text,
.lang-fa .article-text,
.lang-ar .article-text{
    direction: rtl;
}

