#pic-topic.about::after{content:""; width:100%; height:100%; background:url("../images/pic-about.jpg") no-repeat top; background-size:100%; position:absolute; z-index:-3; opacity:.5; top:0; left:0;}
/* #about{width:100%; margin:45px 0; padding:30px; border-radius:10px; overflow:hidden; display:block; position:relative;} */
#top-head{padding:10px 25px 0 25px;}
#top-head .lang{right:25px;}
#about{width:100%; margin:25px 0 45px 0; padding:30px 0 0 0; border-radius:10px; overflow:hidden; display:block; position:relative;}
#about::after{content:""; width:100%; height:100%; position:absolute; display:block; left:0; top:0; background:white; z-index:10;}
#about .content{width:100%; display:block; float:left; position:relative; z-index:30; font-family:'Kanit', sans-serif;} 
#about .content h1{width:100%; margin:0 0 40px 0; padding:0; color:#EF3937; text-align:center; text-transform:uppercase; font-weight:600; position:relative;}
#about .content .frame{width:80%; margin:0 10% 50px 10%; padding:50px; line-height:1.3; text-align:center; font-weight:400; position:relative; z-index:20; border:2px solid rgba(102,104,170, 1); border-radius:10px;}
#about .content .frame::before{content:' " '; width:50px; height:50px; line-height:95px; font-size:8em; color:#EF3937; background:#FFF; display:block; position:absolute; left:-20px; top:-20px;}
#about .content .frame::after{content:' " '; width:50px; height:50px; line-height:95px; font-size:8em; color:#EF3937; background:#FFF; display:block; position:absolute; right:-20px; bottom:-20px;}
#about .content .frame h2{width:100%; margin:0 0 7px 0; text-align:center; display:block; font-weight:500;}
#about .content .frame p{width:100%; color:#6668AA; font-size:1.5em; text-align:center; display:block;}
#about .content .frame p b{font-weight:500; color:#6668AA;}
#about .content span{width:100%; margin:15px 0; text-align:center; padding:0; display:block; float:left;}
#about .content span.princess{margin-top:60px;}
#about .content span .row{margin:0 -15px;}
#about .content p{width:100%; margin:10px 0 20px 0; padding:0; line-height:1.2; font-size:1.1em; font-weight:300;  display:block;}
#about .content p.sub{width:calc(100% - 25px); margin:10px 0 20px 25px; display: block;}
#about .content h4{width:100%; margin:0 0 7px 0; font-weight:500; color:#6668AA; text-transform:uppercase; display:block;}
#about .content h6{width:100%; margin:0 0 7px 0; font-size:1.25em; font-weight:500; color:#6668AA; display:block;}
#about .content h6.topic{font-size:1.4em;}
#about .content p b{font-size:1.1em; font-weight:500; color:#6668AA;}
#about .content i{width:calc(50% - 30px); margin:0 15px; padding:0; text-align: left; border-radius:10px; overflow:hidden; display:block; float:left; font-style:normal; line-height: 1.2; font-size: 1.1em; font-weight:300;}
#about .content i img{width:100%;}
#about .content .half{width:calc(50% - 30px); margin:0 15px; display:block; float:left;}

#about .team{width:100%; margin:0 0 45px 0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; justify-content: center;:}
#about .team li{width:100%; display:block; border-radius:10px; margin-top:100px; padding:20px; border:2px solid #E0E0EB; background:#EFEFF5;}
#about .team li .c-frame{width:100%; padding-top:160px; text-align:center; display:block; position:relative;}
#about .team li h4{width:100%; margin:0; padding-bottom:25px; text-align:center; font-weight:500; text-transform:uppercase; color:#6668AA; display:block; position:relative;}
#about .team li h4::after{content:""; width:60px; height:3px; background:#EF3937; display:block; position:absolute; bottom:10px; left:50%; transform: translateX(-50%);}
#about .team li h5{width:100%; margin:0; font-weight:500; color:#6668AA; display:block;}
#about .team li p{width:100%; color:#000; text-align:center; display:block;}
#about .team li em{width:45%; margin:0; border:4px solid #E0E0EB; border-radius:50%; overflow:hidden; display:block; position:absolute; left:50%; top:-120px; transform: translateX(-50%);}
#about .team li em img{width:100%;}

#about .certi {width:100%; margin-top:20px; display:block; float: left;}
#about .certi .row{margin:0 -15px;}
#about .certi  span{width:calc(50% - 30px); margin:0 15px;}
#about .c-red2{color:#EF3937; font-size:1.4em; font-weight:500;}

/* #about .content span.pic-right p{padding-right:30px; float:left;}
#about .content span.pic-right i{float:left;}
#about .content span.pic-left p{padding-left:30px; float:right;}
#about .content span.pic-left i{float:right;} */

#gallery{width:100%; margin:50px 0 0 0; padding:0; display:block; float:left; position:relative; z-index:30;}
#gallery h4{width:100%; margin:0 0 20px 0; padding:0; color:#025ABE; text-align:left; text-transform:uppercase; font-weight:600; position:relative; z-index:20;}
#gallery li{width:20%; margin:0; padding:2px; display:block; float:left;}
#gallery li .pic{width:100%; display:block; cursor:zoom-in;}
#gallery li .pic img{width:100%;}


@media (min-width: 1921px) {
  #pic-topic.about::after{content:""; background:url("../images/pic-about.jpg") no-repeat top center; background-size:1920px;}
}
@media (max-width: 1122px) {
    #about .team li em{width:53%;}  
}
@media (max-width: 1024px) {
    #about .team li em{width:60%;}  
}
@media (max-width: 860px) {
    #about .team li em{width:70%;} 
    #about .team li .c-frame{padding-top:150px;}
}
@media (max-width: 780px) {
    #about .team li .c-frame{padding-top:110px;}
    #about .content h4{margin:10px 0 20px 0;}
    #about .content h5{width:92%; margin:0 4% 15px 4%; padding:0;}
    #about .content h6{font-size: 1.15em;}
    #about .content h6.topic{font-size: 1.3em;}
    #about .content p{font-size: 1em;}
    #about .content p b{font-size: 1.05em;}   
    #about .content span{margin:0;} 
    #about .content h4.who{margin-top:30px;}
}
@media (max-width: 480px) {     
    #top-head{padding:10px 15px 0 15px;}
    #top-head .lang{right:15px;}
    #about{margin:30px 0; padding:0;}
    #about .content .frame{width:96%; margin:0 2% 35px 2%; padding:30px 30px 20px 30px;}
    #about .content h1{margin-bottom:30px;}
    #about .content h4{margin-top:20px;}
    #about .content h5{width:98%; margin:0 1% 15px 1%; padding:25px;}
    #about .content h5::before{width:40px; height:40px; line-height:82px; left:-14px;}
    #about .content h5::after{width:40px; height:40px; line-height:82px; right:-14px;}
    #about .content span .row{margin:0 -10px;}
    #about .content i{width: calc(50% - 20px); margin:0 10px;}
    #about .content p{margin:10px 0;}
    #about .content span.princess{margin-top:30px;}
    #about .team{grid-template-columns: repeat(1, 1fr);}
    #about .team li em{width:57%;}
    #about .content .half{width:calc(100% - 20px); margin:0 10px;}
    #about .certi {width:100%; margin-top:20px; display:block; float: left;}
    #about .certi .row{margin:0;}
    #about .certi  span{width:calc(100%); margin:0;}

    #gallery{margin:30px 0 0 0;}
    #gallery h4{margin-bottom:10px;}
}
@media (max-width: 414px) {    
    #about .content span .row{margin:0 -5px;}
    #about .content h5::before{width:40px; height:35px; line-height:65px; top:-14px;}
    #about .content h5::after{width:40px; height:35px; line-height:65px; bottom:-14px;}
    #about .content i{width: calc(50% - 10px); margin:0 5px;}
}
@media (max-width: 378px) {    
    #about .content h4{margin:5px 0 20px 0; font-size: 1.2em;}
    #about .content h5{padding:20px;}
    #about .content h6{font-size: 1em;}
    #about .content h6.topic{font-size: 1.05em;}
    #about .content p{font-size: .9em;}
    #about .content p b{font-size: .95em;} 
    #about .content h5::before{width:30px; height:30px; line-height:58px; font-size:5em; top:-13px; left:-13px;}
    #about .content h5::after{width:30px; height:30px; line-height:58px;font-size:5em; bottom:-13px; right:-13px;}
}