body, ul, li, .wrap { padding:0px; margin:0px; }

.introBox {display: flex; align-items: center; justify-content: center; }
.introBox > li {height: 100vh; position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: center; width: 28%; transition: all ease 1.8s; }
.introBox > li .conBox {display: flex; flex-direction: column; justify-content: center;}
.introBox > li .conBox a { display:inline-block; padding:7px 0; border-radius:3px; background-color:#09f; font-size:15px; text-decoration:none; color:#fff; margin:auto; width:200px; text-align:center; cursor:pointer; }
.introBox > li img { max-width:80%; }

.introBox .btBox {position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 380px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px;}

.intro_lb {align-items: flex-end; text-align: right; background:url(/theme/basic/img/intro/intro01.jpg) no-repeat center / cover;filter:grayscale(100%); }
.intro_lb .conBox {margin-right: 100px; align-items: flex-end;}

.intro_lb.active {width: 72%; background:url(/theme/basic/img/intro/intro01.jpg) no-repeat center / cover; z-index:1001;filter:grayscale(0%); }
.intro_lb.active::before {content: ''; display: inline-block; position: absolute; top: 0; right: 0; z-index: -1; width: 50%; height: 100%; background: linear-gradient(to right, #2181da00, #2181dab2,#2181da);}
.intro_lb.active::after {content: ''; display: inline-block; position: absolute; right: -58px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 60px solid #2181da;
border-top: 70px solid transparent; border-bottom: 70px solid transparent;}


.intro_rb {align-items: flex-start; background:url(/theme/basic/img/intro/intro02.jpg) no-repeat center / cover; filter:grayscale(100%); }
.intro_rb .conBox {margin-left: 100px; align-items: flex-start;}
.intro_rb > div > div h6 { font-size:24px; color:#fff; margin-bottom:20px; text-align:center; word-break:keep-all; }
.intro_rb > div > div p { text-align:center; }
.intro_rb > div > div p a { display:inline-block; padding:7px 0; border-radius:3px; background-color:#09f; font-size:15px; text-decoration:none; color:#fff; margin:auto; width:200px; }
.intro_rb .conBox span img { width:300px; }

.intro_rb.active {width: 72%; background:url(/theme/basic/img/intro/intro02.jpg) no-repeat center / cover; z-index:1001; filter:grayscale(0%); }
.intro_rb.active::before {content: ''; display: inline-block; position: absolute; top: 0; left: 0; z-index: -1; width: 50%; height: 100%; background: linear-gradient(to left, #00990000, #009900a8, #009900);}
.intro_rb.active::after {content: ''; display: inline-block; position: absolute; left: -59px; top: 50%; transform: translateY(-50%); width: 0; height: 0;border-right: 60px solid #009900; 
border-top: 70px solid transparent; border-bottom: 70px solid transparent;}
.intro_rb.active .conBox { position:relative; }
.intro_rb.active .conBox > span { width:50%; position:absolute; top:50%; left:0px; transform:translateY(-50%); }
.intro_rb.active .conBox > div { position:relative; margin-left:50%; }
.intro_rb.active .conBox span img { width:90%; }

.btBox_mb {width: 100%; height: 16vh; display: flex; flex-direction: column; justify-content: center; align-items: center; display: none;}
.btBox_mb .adrBox {text-align: center; font-size: 14px;}


.introBox > li .btBox { display:none; }


@media screen and (max-width: 1080px) {
    .introBox {flex-direction: column;}

    .introBox > li {width: 100%; height: 50vh; transition: none;}
    .introBox > li .btBox {display: none;}

    .intro_lb .conBox { }
    .intro_lb.active {width: 100%;}
    .intro_lb.active::after {content: none;}
    .intro_lb.active::before {width: 60%;}
    
    .intro_rb {align-items: flex-end;}
    .intro_rb .conBox {align-items: flex-end; margin:0px; }
	.intro_rb > div > div h6 { font-size:16px; color:#fff; text-align:center; word-break:keep-all; }
    .intro_rb.active {width: 100%;}
    .intro_rb.active::after {content: none;}
    .intro_rb.active::before {width: 60%; left: auto; left: 0; background: linear-gradient(to left, #00990000, #009900a8, #009900);}
	.intro_rb.active .conBox > span { width:50%; position:absolute; top:50%; left:0px; transform:translateY(-50%); text-align:center; }
	.intro_rb.active .conBox > div { position:relative; margin-left:50%; }

    .btBox_mb {display: flex;}

}