@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&display=swap');
@charset "UTF-8";
main{
	font-family: "Anuphan", sans-serif;

}

.exeBox .btn span{
	float:right;
  display:inline-block;
  padding:5px 10px 5px 25px;
  border:#eaeaea 1px solid;
  background:#f8f8f8 url(../images/icon_toggle_open_02.png) 10px 50% no-repeat;
	color: #000000;
    font-size: 14px;
    font-weight: 400;
}
.exeBox .btn span:hover{
    border: #a3cfef 1px solid;
    background: #eaf6ff url(../images/icon_toggle_open_02.png) 10px 50% no-repeat;
}
.exeBox .btn span.nowOpen{    
	border: #a3cfef 1px solid; 
	background:url(../images/icon_toggle_close_02.png) 10px 50% no-repeat!important;
}
@media screen and (max-width:767px){
.btn{margin-bottom: 10px;}
}

#topSection{padding: 20px 110px 50px;}
#topSection h1{
	color: #9bc8e9;
	font-size: 4.5em;
	border: none;
	text-align: center;
	margin: 0;
	padding: 20px 0 15px;
}
#topSection h1 span{color:#3e92ce;}
#topSection p{
	font-size: 1.7em;
	line-height: 1.4em;
	text-align: center;
	color: #626262;
}
#topSection .intro span{
	font-weight:600;
	display:block;
}
h2{
	font-size: 1.6em;
	font-weight: 600;
}
h2.topH2{
	font-size: 2.5em;
	margin: 60px 0 30px;
}

.h3Type02{
	font-weight: 600;
	font-size: 2.5em;
	margin: 0;
}

.blueBox{
	border: 10px solid #5ea6d9;
	padding: 20px;
}
.lumpMix .lumpR{margin: 0 0 0 10px;}


/* -- serviceFlow  -- */


.serviceFlow li{
	width: 286px;
	float: left;
}

.serviceFlow li p{
	color: #fff;
	background: #5ea6d9;
	padding: 5px 10px;
}

.serviceFlow li:nth-child(even){
	width: 45px;
	height:200px;
	background: url(../images/arrow_001.png) no-repeat 50% 60%;
}

@media screen and (max-width:767px){
	
	#topSection{
		padding: 0;
		margin: 30px 0;
	}
	#topSection h1{font-size: 2em;}
	#topSection p{font-size: 1.3em;}
	h2.topH2{
		font-size: 1.5em;
		margin: 30px 0 15px;
	}
	.serviceFlow li{
		float: none;
		text-align: center;
		margin: 0 auto;
	}
	.serviceFlow li:nth-child(even){
		transform: rotate(90deg);
		height: 40px;
	}
}

/* -- prodBlock -- */

.prodBlock{
	border-top:1px solid #b5b5b5;
	margin: 10px 0 0;
	padding: 20px 0 10px 0;
}
.prodBlock:nth-last-of-type(2){
	border-bottom: 1px solid #b5b5b5;
	margin-bottom: 30px;
}
.boxLumirror{
	width: 75%;
	float: left;
}

.boxLumirror .lumpEnd{padding: 0 0 0 10px;}
.switchDetail{
	width: 100%;
    float: left;
    background: #f1f9ff;
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
}

.prodLogo{
	width: 25%;
	float: left;
	margin: 0 0 10px;
}
.prodDetail{
	width: 75%;
	float: left;
}
.prodLogo span{
	font-size: 1.2em;
	font-weight: 600;
}
.prodLogo span.txtLogo + h3{margin: -10px 0 0 0;}

.prodChara{
	width: 220px;
	float: left;
	padding: 0 10px;
	margin: 0 0 20px;
}
.prodApp{
	width: 500px;
	float: left;
	margin: 0 0 20px;
}
.prodApp ul{
	margin: 10px 0 0;
	display: flex;
}
.prodApp ul li{width: 160px;}
.prodApp ul li + li{margin-left:10px;}
.prodButton{
	float: right;
	margin: 20px 0 0;
}
.prodButton a{
    color: #fff;
    display: block;
    text-decoration: none;
    background: #5ea6d9 url(../images/icon_newwindow.png) no-repeat 86% 50%;
    padding: 5px 40px 5px 20px;
}

.prodButton a:hover{opacity: 0.8;}


@media screen and (max-width:767px){
.boxLumirror .lumpEnd{padding:0;}
	.prodLogo,.prodChara,.prodApp,.boxLumirror,.prodDetail{
		width: 100%;
		float: none;
	}
	.prodChara{padding: 0;}
	
	.prodApp ul{
		justify-content:center;
		flex-wrap:no-wrap;
	}
	.prodApp ul li{
		width: 100%;
		text-align: center;
	}
	.prodApp ul li + li{margin-left:5px;margin: 0 0 0;}
	.prodButton{
		float: none;
		margin: 20px auto;
		text-align: center;
	}
}

.pageBottom{
	color: #fff;
	text-align: center;
	background: #5ea6d9;
	margin: 20px 0 0;
	padding: 20px;
}
.pageBottom p{font-size: 1.5em;}
.pageBottom ul{
	width: 810px;
	margin: 10px auto;
}
.pageBottom ul li{float: left;}
.pageBottom ul li+li{margin-left:10px;}
.pageBottom ul li img:hover{opacity: 0.8;}

.contactBox{
	width: 400px;
	font-size: 1.3em;
	text-align: center;
	margin: 70px auto 80px;
}
.contactBox a:hover{opacity: 0.8;}

@media screen and (max-width:767px){
	.pageBottom ul{width: 100%;}
	.pageBottom ul li{float: none; text-align: center;}
	.pageBottom ul li+li{
		margin-left:0px;
		margin: 10px 0 0;
	}
	.contactBox{width: 100%;}
}

.prodBlock:after,.pageBottom ul:after{
	content:" ";
    display:block;
    clear:both;
}




.two-column-list {
    list-style: none;
    padding: 0;
    margin: 50px 0 0 0;
}

.two-column-list > li {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
    padding: 0;
}

/* Left Column - 30% */
.two-column-list .list-left {
    width: 30%;
    flex: 0 0 30%;
    padding-right: 30px;
}

/* Right Column - 70% */
.two-column-list .list-right {
    width: 70%;
    flex: 0 0 70%;
}

/* Left Column - 50% */
.two-column-list .Lfix50 {
    width: 50%;
    flex: 0 0 50%;
    padding-right: 30px;
}

/* Right Column - 50% */
.two-column-list .Rfix50 {
    width: 50%;
    flex: 0 0 50%;
}

/* Image */
.two-column-list .list-left img {
    display: block;
    width: 100%;
    height: auto;
	border-radius: 7px;
}

/* Paragraph */
.two-column-list .list-right p {
    margin: 0;
    line-height: 1.7;
}

.two-column-list .list-right h2 {
    color: #004299;
    margin-bottom: 20px;
    border-left: solid 7px;
    line-height: 1.3;
    padding-left: 10px;
}

.pc{display:block;}
.sp{display:none;}
.adjustPD{padding-right:0!important ;padding-left:30px!important ;}
.mgT20{margin-top:20px !important;}
.mgB0{margin-bottom:0px !important;}
/* =========================
   Mobile
   ========================= */
@media (max-width: 767px) {

    .two-column-list > li {
        display: block;
        margin-bottom: 30px;
    }

    .two-column-list .list-left,
    .two-column-list .list-right,
	.two-column-list .Lfix50,
	.two-column-list .Rfix50	{
        width: 100%;
        flex: none;
        padding-right: 0;
    }


    .two-column-list .list-left {
        margin-bottom: 20px;
    }
	.pc{display:none;}
	.sp{display:block;}
	.adjustPD{padding-right:0!important ;padding-left:0!important ;}
}


.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    list-style: none;
    padding: 0;
    margin: 0;
}

.image-grid li {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.image-grid li img {
    display: block;
    width: 100%;
    height: auto;
	border-radius:7px;
}


/* Tablet */
@media (max-width: 991px) {

    .image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

}


/* Mobile */
@media (max-width: 767px) {

    .image-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}
.content-list {
    list-style: none;
    padding: 0;
    margin: 50px 0;
	background-image: url('../images/bgProductType.jpg');
    object-fit: cover;
    display: block;
    vertical-align: middle;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.content-list > li {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 20px 0;
    border: 1px solid #004299;
}

/* Left - 30% */
.content-list .list-heading {
    width: 40%;
    flex: 0 0 40%;

    display: flex;
    align-items: center;
    padding-right: 30px;
}

/* Heading */
.content-list .list-heading h3 {
    margin: 0;
    width: 100%;
    line-height: 1.4;
    font-size: 3.8rem;
    color: #fff;
    text-align: center;
    font-weight: 600;
}

/* Right - 70% */
.content-list .list-description {
	width: 60%;
    flex: 0 0 60%;
    min-width: 0;
    padding: 40px 40px 40px 80px;
    font-size: 2.5rem;
}

/* Description */
.content-list .list-description p {
    margin: 0;
    line-height: 1.8;
}
.content-list .list-description p span{
    font-weight: 500;
    color: #004299;
}


/* ==========================
   Mobile
   ========================== */

@media (max-width: 767px) {

    .content-list > li {
        display: block;
        padding: 25px 0;
    }

    .content-list .list-heading,
    .content-list .list-description {
        width: 100%;
        flex: none;
    }

    .content-list .list-heading {
        padding-right: 0;
        margin-bottom: 10px;
    }

}

.center{text-align:center;}
/* - - Z I G Z A G - - */
.zigzag-section{
    width:100%;
	margin:50px 0;
}
.zigzag-row{
    display:flex;
    min-height:420px;
}
.zigzag-col{
    width:50%;
}
.zigzag-col:first-child{
	width:70%;
}
.zigzag-col:last-child{
	width:30%;
}
.zigzag-image{
    background:#aeb6f0;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}
.zigzag-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.image-placeholder{
    font-size:90px;
    color:#fff;
    font-weight:300;
    letter-spacing:2px;
}
.zigzag-content{
    background:#f3f3f3;
    padding:50px;
    display:flex;
    align-items:center;
}
.content-inner{
    
}
.content-inner a{
	display: inline-block;
    padding: 8px 15px;
    border: solid 1px #ccc;
    margin-top: 20px;
    line-height: 1;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: #656c74;
	text-decoration:none;
}
.content-inner a:hover{
	background: #004eb6;
    color: #fff;
}
.zigzag-content h3{
    font-size: 2.5rem;
    text-align: left;
    font-weight: 500;
}
.zigzag-content h5{
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: left;
    font-weight: 500;
}
.zigzag-content p{

}

/* TABLET */
@media (max-width:991px){
    .zigzag-content{
        padding:40px;
    }
    .image-placeholder{
        font-size:70px;
    }
}

/* MOBILE */
@media (max-width:767px){
    .zigzag-row{
        flex-direction:column;
        min-height:auto;
    }
    .zigzag-col{
        width:100% !important;
    }
    /* IMPORTANT:
       Mobile order = IMAGE > TEXT
    */
    .zigzag-image{
        order:1;
        min-height:300px;
    }
    .zigzag-content{
        order:2;
        padding:35px 25px;
    }
    .zigzag-content p{
        font-size:16px;
        line-height:1.7;
    }
    .image-placeholder{
        font-size:52px;
    }
}

.title{
	font-weight: 600;
    color: #000000;
    background: #d3e7f5;
    padding: 5px 20px;
    text-align: center;
	margin:0 0 10px 0;
}
.filmTitle{
    background: #3e92ce;
    color: #fff;
    padding: 5px 20px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: double;
	margin-top:30px;
}

.contactBTN{
	font-size:1.75rem;
}

.aboutUS{
	padding:50px 0 30px 0;
	text-align:center;
}
.aboutUS h2{
	color:#000;
}
.aboutUS p{
	margin:0 0 10px 0;
}
.shadow{
    filter: drop-shadow(5px 5px 0px #999);
}
.aboutUS span{
	font-weight:500;
}
.mgT30{
	margin-top:30px !important;
}

.responsive-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0 0;
}

.responsive-list > li {
    display: flex;
    width: 100%;
    align-items: stretch;
    margin: 0;
    padding: 0;
}


/* =========================
   TEXT 60%
   ========================= */

.responsive-list .item-text {
    width: 50%;
    flex: 0 0 50%;
    min-width: 0;
    padding: 40px;
    box-sizing: border-box;
	line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.responsive-list .item-text h3{
    font-size: 24px;
    font-weight: 600;
    color: #004098;
    border-left: solid 7px;
    padding-left: 15px;
    margin: 0 0 20px 0;
}
.responsive-list .item-text p{
	margin:0 0 10px 0;
}
.responsive-list .item-text strong{
	font-weight:600;
}


/* =========================
   IMAGE 40%
   ========================= */

.responsive-list .item-image {
    width: 50%;
    flex: 0 0 50%;
    min-width: 0;
}

.responsive-list .item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.BTN a{
	border:solid 1px;
	padding:5px 20px;
}
.BTN a:hover{
	text-decoration:none;
	background:#004098;
	color:#fff;
}

/* =========================
   EVEN ROW
   Image 40% | Text 60%
   ========================= */

.responsive-list > li:nth-child(even) {
    flex-direction: row-reverse;
}


/* =========================
   MOBILE
   Image 100%
   Text 100%
   ========================= */

@media (max-width: 767px) {

    .responsive-list > li,
    .responsive-list > li:nth-child(even) {
        display: flex;
        flex-direction: column;
    }

    .responsive-list .item-image,
    .responsive-list .item-text {
        width: 100%;
        flex: 0 0 100%;
    }

    .responsive-list .item-image {
        order: 1;
    }

    .responsive-list .item-text {
        order: 2;
        padding: 25px 0;
    }

    .responsive-list .item-image img {
        width: 100%;
        height: auto;
    }

}



:root {
    --primary: #004098;
    --light-blue: #a9c8f5;
    --text: #111;
    --border: #004098;
}

/* =========================
   SECTION
========================= */

.visual-section {
    width: 100%;
    padding: 70px 30px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

.visual-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}


/* =========================
   LEFT IMAGE AREA
========================= */

.visual-images {
    position: relative;
    width: 100%;
    min-height: 560px;
}


/* Main image frame */

.image-main {
    position: absolute;
    width: 72%;
    height: auto;
    top: 5%;
    left: 7%;
    border: 5px solid #004098;
    background: #fff;
    z-index: 1;
}

.image-main img,
.image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Small images */

.image-small {
    position: absolute;
    background: #fff;
    z-index: 3;
}

.image-small-1 {
    width: 45%;
    height: auto;
    left: 10%;
    bottom: 12%;
	border: 5px solid transparent;
    border-image: linear-gradient(to right, #004098 50%, #ffffff 50%) 1;
}

.image-small-2 {
    width: 50%;
    height: auto;
    right: 0%;
    top: 42%;
	border: 5px solid transparent;
    border-image: linear-gradient(to right, #ffffff 50%, #004098 50%) 1;
	z-index:2;
}


/* =========================
   DECORATIVE SHAPES
========================= */

.shape {
    position: absolute;
    display: block;
}

/* Top-left diamond */
.shape-diamond-1 {
    width: 74px;
    height: 74px;
    background: #004098;
    transform: rotate(45deg);
    top: 0;
    left: 0;
    z-index: 4;
}


/* Small blue diamond */
.shape-diamond-2 {
    width: 45px;
    height: 45px;
    background: var(--light-blue);
    transform: rotate(45deg);
    top: 22%;
    right: 3%;

    z-index: 0;
}


/* Bottom square */
.shape-square {
    width: 90px;
    height: 90px;
    transform: rotate(-30deg);
    right: 15%;
    bottom: 2%;
    z-index: 0;
	border: dashed #a9c8f5;
}


/* Small blue square */
.visual-images::after {
    content: "";
    position: absolute;
    width: 45px;
    height: 45px;
    background: #004098;
    left: 5%;
    bottom: 7%;
    z-index: 4;
}


/* =========================
   RIGHT CONTENT
========================= */
.visual-content {
    padding: 40px 8%;
    text-align: center;
}


.visual-content h2 {
    margin: 0;
    color: #004098;
	font-size:3.25rem;
}

.title-line {
    display: block;
    width: 55px;
    height: 3px;
    margin: 20px auto;
	background:#ccc;
}

.visual-content p {
    max-width: 500px;
    margin: 0 auto;
	font-size:2.25rem;
}
.visual-content p span{
	font-weight:500;
	display:block;
	color:#000;
}
.visual-content p.BTN a{
	border: solid 1px;
    padding: 3px 20px 5px 20px;
    font-size: 1.75rem;
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {
    .visual-section {
        padding: 50px 25px;
    }
    .visual-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .visual-images {
        min-height: 500px;
        max-width: 700px;
        margin: 0 auto;
    }
    .visual-content {
        padding: 20px 10%;
    }
    .visual-content h2 {
        font-size: clamp(36px, 7vw, 55px);
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {
    .visual-section {
        padding: 40px 15px;
    }
    .visual-inner {
        gap: 30px;
    }
    .visual-images {
        min-height: 380px;
    }

    /* Main image */
    .image-main {
        width: 72%;
        height: 55%;
        top: 4%;
        left: 7%;
        border-width: 3px;
    }


    /* Small image */
    .image-small {
        border-width: 3px;
    }
    .image-small-1 {
        width: 43%;
        height: 29%;
        left: 10%;
        bottom: 9%;
    }
    .image-small-2 {
        width: 42%;
        height: 29%;
        right: 5%;
        top: 43%;
    }

    /* Shapes */
    .shape-diamond-1 {
        width: 48px;
        height: 48px;
    }
    .shape-diamond-2 {
        width: 30px;
        height: 30px;
    }
    .shape-square {
        width: 55px;
        height: 55px;
    }
    .visual-images::after {
        width: 30px;
        height: 30px;
        left: 5%;
        bottom: 5%;
    }


    /* Content */
    .visual-content {
        padding: 10px 5%;
    }
    .visual-content h2 {

    }
    .title-line {
        width: 45px;
        height: 2px;
        margin: 15px auto 20px;
    }
    .visual-content p {

    }
}