img.a { max-width:100%;}
img.b { max-width:100%;}
img.c { max-width:100%;}
.sp-container-cac { width:60%; margin:0 auto;}

.sp-header { position:relative; overflow:hidden;}
.sp-header .logo-boonma { width:100%; height:150px; text-align:center; margin-top:-145px; position:relative; z-index:1;}
.sp-header .box-bule { background:#0078ae; width:4px; height:60px; margin:0 auto;}

.sp-title { position: absolute; text-align:center; top:220px; width:100%;}
.sp-title h1 {font-family: 'webfont1'; font-size:48px; line-height:66px; color:#fff; font-weight:normal; letter-spacing:1px; text-align:center; position:absolute; width:100%; top:-37px;}
.sp-title .sp-solid-l { width:35%; border-bottom:2px solid #ee2d24; position:absolute; left:0; }
.sp-title .sp-solid-r { width:35%; border-bottom:2px solid #ee2d24; position:absolute; right:0; }


.sec1 { text-align:center; margin-top:20px;}
.sec1 p {font-family: 'webfont2'; font-size: 18px; line-height: 28px; color: #666; margin-bottom:20px;}
.sec1 p span.a {font-family: 'webfont1'; font-size: 48px; line-height: 48px; color:#ee2d24;}
.sec1 p span.b {font-family: 'webfont1'; font-size: 28px; line-height: 28px; color:#666;}
.sec1 .sp-box-text { margin:40px 0; text-align:center;}
.sec1 .sp-box-text .sp-txt { width:40%; margin:0 auto; border:2px solid #000; padding:40px;}
.sec1 .sp-box-text .sp-txt h2 { font-family: 'webfont1'; font-size:48px; line-height:66px; color:#000; font-weight:normal; letter-spacing:1px;}
.sec1 .box-bule01 { background:#0078ae; width:4px; height:160px; margin:0 auto; margin-bottom: -80px; position: relative;}


.sec2 { display: flex;flex-wrap: wrap; padding-top:60px; background: url(../img/our-good-at/content01.jpg) left no-repeat; background-position-x: 10%;}
.sec2 .col-l { width:40%;}
.sec2 .col-r { width:60%;}
.sec2 .col-r .box-text { padding:40px;padding-left: 10%; padding-right:15%; background:url(../img/our-good-at/bg.png); margin-bottom: 15%; margin-top: 15%;}
.sec2 .col-r .box-text .box-logo { position:relative; margin-top:-178px; margin-bottom:60px; margin-left:80px;}
.sec2 .col-r .box-text .box-logo img { max-width:100%;}
.sec2 .col-r .box-text h3 { font-family: 'webfont1'; font-size:22px; line-height:30px; color:#211d1e; font-weight:normal; letter-spacing:1px; background:url(../img/business-compliance/bullet.png) no-repeat left top; background-position-y: 8px; padding-left:30px; margin-bottom:20px;}
.sec2 .col-r .box-text p {font-family: 'webfont2'; font-size: 18px; line-height: 28px; color:#fff; margin-bottom:40px;}
.sec2 .col-r .box-text p strong {font-family: 'webfont1';  font-size:22px;}


.sp-box-title { text-align:center; font-family: 'webfont1'; font-size: 24px; line-height:30px; color:#666; position:relative; width:485px; margin:0 auto; margin-top:60px; margin-bottom:40px;}
.sp-box-title span.a {font-size:38px; color:#ee2d24;}
.sp-box-title img.red-a { position: absolute; left:-60px; top:-30px;}
.sp-box-title img.red-b { position: absolute; right:30px; bottom:0;}


.sec3 { margin-top:60px;}
.sec3 .box-container {width:90%; margin:0 auto;  display: flex;flex-wrap: wrap;  align-items: center;}
.sec3 .box-container .col-l { width:60%;}
.sec3 .box-container .col-l ul { margin:0; padding:0; list-style:none; padding-right:40px;}
.sec3 .box-container .col-l ul li { border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;}
.sec3 .box-container .col-l ul li .sp-row {display: flex;flex-wrap: wrap; align-items: center;}
.sec3 .box-container .col-l ul li .sp-row .col-a {width:10%;font-family: 'webfont1'; font-size:80px; line-height:80px; color:#ee2d24; font-weight:normal; text-align:center;}
.sec3 .box-container .col-l ul li .sp-row .col-b {width:90%; padding-left:20px; font-family: 'webfont1'; font-size:20px; line-height:26px; color:#000; font-weight:normal; letter-spacing:1px;}
.sec3 .box-container .col-l ul li .sp-row .col-b p {font-family: 'webfont2'; font-size: 18px; line-height: 24px; color:#666;}
.sec3 .box-container .col-r { width:40%;}
.sec3 .box-container .col-r img {max-width:100%;}


.sp-box-title01 { margin-top:160px; margin-bottom:40px; text-align:center; }
.sp-box-title01.a { margin-top: 80px;}
.sp-box-title01 h3 { text-align:center; font-family: 'webfont1'; font-size: 30px; line-height:38px; color:#000; position:relative; display: inline;}
.sp-box-title01 h3 .box-red { width:100px; height:60px; background:#ee2d24; position:absolute; right:0; top:-65px;}
.sp-box-title01 h4 { text-align:center; font-family: 'webfont1'; font-size: 22px; line-height:38px; color:#000;}
.sp-box-title01 p {font-family: 'webfont2'; font-size: 18px; line-height: 24px; color:#666; margin-top:20px;}
.sp-box-title01 p strong {font-family: 'webfont1'; font-size: 18px; color:#666;}
.sp-box-title01 p span {font-family: 'webfont1'; font-size: 18px; color:#ee2d24;}

.box-pic { margin-top:80px; margin-bottom:40px; text-align:center;}
.box-pic.a { margin-bottom:0px;}

.box-pic01 { margin-top:80px; display: flex;flex-wrap: wrap;}
.box-pic01 div.a { width:50.6%;}
.box-pic01 div.b { width:49.4%;}
.box-pic01 div img { max-width:100%;}


.sp-box-txt { border-left:8px solid #ee2d24;}







@media screen and (max-width:1440px) {
img.b { max-width: 38%;}
.sp-title {  top: 137px;}
.sp-title .sp-solid-l {width: 30%;}
.sp-title .sp-solid-r {width: 30%;}
.sp-container-cac { width: 70%;}
.sp-header .logo-boonma { margin-top: -112px;}
.sec2 { background-position-x: 0%;}
}

@media screen and (max-width:1366px) {
.sp-header .logo-boonma { margin-top: -106px;}
.sec1 .sp-box-text .sp-txt { width: 48%; padding: 20px;}
}

@media screen and (max-width:1280px) {
.sp-header .logo-boonma { margin-top: -100px;}
.sp-container-cac { width: 80%;}
.sp-title .sp-solid-l {width: 27%;}
.sp-title .sp-solid-r {width: 27%;}
}

@media screen and (max-width:1024px) {
.sp-header .logo-boonma { margin-top: -79px;}
.sp-title h1 { font-size: 34px;}
.sec1 .sp-box-text .sp-txt { width: 50%;}
.sec1 .sp-box-text .sp-txt h2 {font-size: 36px;}
.sp-title .sp-solid-l {width: 30%;}
.sp-title .sp-solid-r {width: 30%;}
}

@media screen and (max-width:768px) {
.sp-container-cac { width: 90%;}
img.b {  max-width: 52%;}
img.c { max-width:150%; margin-left:-24%;}
.sp-title {  top:136px;}
.sp-title .sp-solid-l {width: 25%;}
.sp-title .sp-solid-r {width: 25%;}
.sec1 .sp-box-text .sp-txt { width: 62%;}
.sec1 .box-bule01 { display:none;}
.sec2 .col-r { width: 100%;}
.sec2 .col-r .box-text .box-logo img { max-width: 80%;}
.sec2 { margin-top:40px;}
.sec3 .box-container .col-l { width: 100%;}
.sec3 .box-container .col-l ul {  padding-right:0px;}
.sec3 .box-container .col-r { width: 100%;}
}

@media screen and (max-width:737px) {

}

@media screen and (max-width:560px) {
img.c { max-width: 260%;  margin-left: -75%;}
img.b { max-width: 90%;}
.sp-header .logo-boonma { margin-top: -70px;}
.sp-title { top: 111px;}
.sp-title .sp-solid-l {width: 5%;}
.sp-title .sp-solid-r {width: 5%;}
.sp-title h1 { font-size: 29px;}
.sp-header .logo-boonma { height: 87px;}
.sec1 .sp-box-text .sp-txt { width: 90%; padding:0;}
.sec1 .sp-box-text .sp-txt h2 { font-size: 28px;}
.sec1 p span.a { font-size: 36px;}
.sec2 {  background-position-x: 46%; background-size: 299%; padding-top: 10px;}
.sec2 .col-r .box-text { padding-left: 0; padding-right: 0;padding: 20px; margin-bottom: 0%; margin-top: 35%;}
.sec2 .col-r .box-text .box-logo { margin-top: -126px; margin-left: 48px;}
.sp-box-title img.red-a { display:none;}
.sp-box-title {width:100%; margin-bottom: 20px;}
.sp-box-title img.red-b { display:none;}
.sec3 .box-container .col-l ul li .sp-row .col-a { font-size: 48px;}
.sp-box-title01 h3 { font-size: 32px;}
.sp-box-txt { border-left: 4px solid #ee2d24;}
.box-pic01 div.a { width: 100%;}
.box-pic01 div.b { width: 100%;}
}

@media screen and (max-width:414px) {

}

@media screen and (max-width:375px) {
 
}