.subcon1{background:url('/img/aboutbg.jpg') no-repeat; height: 800px; padding:12em 0 !important; }
.subcon2{background-color:#f3f9ff;background-image:url('/img/about-bg2.png'); background-repeat:no-repeat; background-size: auto auto !important; background-position: center 40% !important; height: auto;}
.subcon3{background:url('/img/about-bg3.jpg') no-repeat; height: auto;}
.subcon4{background-color:#f3f9ff;}
.greeting p{line-height: 160%; font-size: 1.05em; font-weight: 500; padding: 1em 0;}
.greeting p span{ font-size: 1em; font-weight: 600; color:#000; letter-spacing:0;}

.imgwrap{width:100%; padding-top:3em;}
.imgwrap img{width:40px;}
.greeting{display:flex;}
.greeting > div{flex:1;}
.greeting > div > img{width:90%; max-width:480px;}
.greeting > div .sign{width:20%; max-width:60px; max-width: 169px; margin-left: 1em;}

.vision{display:flex;flex-wrap: wrap;justify-content: space-between; align-items: flex-start; align-content: flex-start;margin: 3em 0; width:100%;}
.vision li{display:inline-flex;background-size: cover;background-position: center 20%;min-height: 460px; border-radius:20px; overflow:hidden;width:30%; margin:0.3em; padding:2.5em 3.5%; color:#fff; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start;}
.vision .bg1{background-image:url('/img/vision1.jpg');}
.vision .bg2{background-image:url('/img/vision2.jpg');}
.vision .bg3{background-image:url('/img/vision3.jpg');}
#conwrap h5 span{padding-bottom: 0.6em ;font-weight:600;display: block;font-size: 1.14em; word-break: keep-all; letter-spacing: -0.03em;}
h6 span{padding: 0.1em 0; font-size: 1.1em;border-bottom: #333 solid 1px; font-weight: 600; letter-spacing: -0.03em;}
h6 span.material-symbols-rounded{padding:0; border:0; font-size:1.2em;}
#conwrap h4 span {font-size:2.32em; font-weight: 700;letter-spacing: -0.02em;}
.wrap-cen {display: flex; flex-direction: column;flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;}
.visiontit{color:#1754e0;letter-spacing: -0.04em; font-size:1.33em; font-weight:600;}
.subcon4wrap{background-image:url('/img/about-img1.jpg');background-size: cover; background-position: center bottom;display: flex;flex-direction: column; align-content: flex-start; justify-content: flex-start; align-items: flex-start;
padding: 4em 6%; color: #fff; min-height: 450px; font-size: 1.1em; margin: 2em 0;}
.subcon4wrap *{padding: 0.4em 0 !important; line-height: 1.8;}

.con5{display:flex;flex-wrap: wrap;justify-content: space-between; align-items: flex-start; align-content: flex-start;margin: 8em 0; width:100%;}
.con5 li{display:inline-flex;background-size: cover;background-position: center center;min-height: 320px; width:49%; color:#212121;flex-direction: column;flex-wrap: wrap;align-content: flex-start; justify-content: flex-start; align-items: flex-start; }
.con5 .bg1{background-image:url('/img/about-img2.jpg');min-height: 320px;}
.con5 .bg2{background-image:url('/img/about-img3.jpg');min-height: 320px;}
.con5 .bg3{background-image:url('/img/about-img4.jpg');min-height: 320px;}
.con5 .bg4{background-image:url('/img/about-img5.jpg');min-height: 320px;}
#conwrap .con5 li span{content:''; display:inline-block; width:2px; height:18px; background:#d4d4d4; margin: 0 1.5em; font-size: 2.11em;}
#conwrap .con5 li h4{width:100%; padding-left:50px; position:relative; word-break:keep-all; margin-bottom:0.4em;}
#conwrap .con5 li:nth-child(1), #conwrap .con5 li:nth-child(3){ padding-right: 5%;}
#conwrap .con5 li:nth-child(2), #conwrap .con5 li:nth-child(4){ padding-left: 5%;}
#conwrap .con5 li p{font-size: 1.2em; line-height: 1.6; font-weight: 500; padding: 0.3em 0; margin-left: 3em; color: #373434;word-break: keep-all; position: relative;}
#conwrap .con5 li p::before{display: inline-block; content: ''; background: #4b4a4a; width: 5px; height: 5px; border-radius: 4px; left: -10px; top:0.9em; position: absolute;}
#conwrap .con5 li .titleicon{position:absolute; width:61px;aspect-ratio: 1 / 1; left:-10px; top:5px;}
#conwrap .con5 li .titleicon img{width:100%; height:100%;}

.fadeIn {animation: fadeIn 1s forwards;}
.vision h6{text-align:left !important;}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media screen and (max-width:1280px){
#conwrap h1 {font-size: 3.5em;}
#conwrap h3 {padding: 1em 4%; font-size: 1.4em;}
#conwrap h4 {font-size: 1.6em;}
#conwrap h4 span {font-size: 1.6em;}
#conwrap h5 { font-size: 1.4em;}
#conwrap h6 {font-size: 1.05em;}
.greeting p {font-size: 1em;}
.greeting > div { flex: auto;}
.greeting > div:first-child{width:40%;}
.greeting > div:nth-child(2){width:60%;}
.vision li { width: 31.5%;padding: 2em 2.5%;}
#conwrap .con5 li p { font-size: 1em;}
.con5 {margin:4em 0;}
#conwrap .con5 li:nth-child(2), #conwrap .con5 li:nth-child(1), #conwrap .con5 li:nth-child(3), #conwrap .con5 li:nth-child(4) { padding-left: 2%;}
#conwrap .con5 li span {height: 13px; margin: 0 0.7em;}
.tab li a {font-size:0.88em;}
.con5 .bg1, .con5 .bg2, .con5 .bg3{min-height: 260px;}
}
@media screen and (max-width:980px){
#conwrap h1 {font-size: 3em;}
#conwrap h3 {font-size: 1.2em;}
#conwrap h4 span { font-size: 1.4em;}
#conwrap h5 { font-size: 1.2em;}
#conwrap h6 {font-size: 1em;}
#conwrap h6 span{font-size: 1em;}
.con5 {flex-direction: column;}
.con5 li{width:100%; padding:0 !important; margin-bottom:1em;}
.con5 li {min-height: auto; }
#conwrap .con5 li:nth-child(2), #conwrap .con5 li:nth-child(1), #conwrap .con5 li:nth-child(3), #conwrap .con5 li:nth-child(4) { margin-top: 1.5em; }
#conwrap .con5 li p {font-size: 1em; margin-left:50px;}
.visiontit {font-size: 1.4em;}
.vision li {font-size: 0.9em !important; min-height: 380px;}
.or5 li:nth-of-type(1){ order:2; }
.or5 li:nth-of-type(2){ order:1; }
.tab_con .con_wrap .tt { font-size: 0.9em; word-break: keep-all;}
.greeting p {font-size: 0.95em;}
.subcon1 { height: 500px; padding: 4em 0 !important;}
.subcon4wrap {padding: 2em 6%; font-size:1em;}
.greeting > div .sign {margin-left:0.2em;}
#conwrap .con5 li .titleicon{ top: -5px;}
}
@media screen and (max-width:800px){
#conwrap h1 {font-size: 2.5em;}

#conwrap { margin: 2em auto;}
#conwrap h3 {font-size: 1.05em ; padding: 1em 0%;}
#conwrap h3 span {word-break: keep-all;font-weight: 600; }
#conwrap h6 {font-size: 0.9em;}
.vision {flex-direction: column;}
.vision li {width:100%;padding: 2em 8%; font-size: 1.05em !important; min-height: 300px;background-position: 80% 70%;}
.or5 li:nth-of-type(1){ order:2; }
.or5 li:nth-of-type(2){ order:1; }
.tab_con .con_wrap .tt { font-size: 0.9em; word-break: keep-all;}
.greeting p {font-size: 0.9em;}
.subcon1 { height: 480px;}
.greeting { flex-direction: column;}
.greeting > div > img { width: 100%; padding-top:0.8em;}
.greeting p {font-size: 0.9em;word-break: keep-all;line-height: 168% !important;}
.greeting > div .sign { margin-left: 0.5em;} 
.greeting > div:first-child{width:100%;}
.greeting > div:nth-child(2){width:100%;}
.tab_con .con_wrap .tt span {width:100px !important;}
}
@media screen and (max-width:600px){
#conwrap h1{font-size: 2em;}
#conwrap h3 { font-size: 0.95em;padding: 1em 5%;}
#conwrap h4 { font-size: 1.4em;}

.visiontit {font-size: 1.1em;}

#conwrap h6 { font-size: 0.85em;}
.tab { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap;}
.tab li a {height:45px; font-size: 0.8em; line-height: 120%;}

.tab_con .con_wrap .tt span { width: 100% !important; margin-top: 0.5em;font-size: 1.1em;}
}
@media screen and (max-width:480px){
#conwrap h1 {font-size: 1.4em;word-break: keep-all;} 
#conwrap h6 {font-size: 0.8em;word-break: keep-all; padding: 0.2em 0}
#conwrap h3 {font-size: 0.95em;padding: 1em 0;}
#conwrap h3 span {font-size: 0.9em;}
#conwrap h5 {font-size: 1em;word-break: keep-all;}
#conwrap h5 span {font-size: 1em;word-break: keep-all;}
#conwrap h4 {font-size: 1.15em;word-break: keep-all;}
#conwrap h4 span{font-size: 0.98em;word-break: keep-all;}
.wrap-cen h6{text-align:center; letter-spacing: -0.04em; line-height: 1.6;}
.imgwrap img { width: 30px;}
#conwrap h6 span {line-height:2em;}
.visiontit {font-size: 0.9em;}
.vision {flex-direction: column;}
.vision li {width:100%;padding: 2em 8%;}
.subcon4wrap {background-size: auto 120%; background-position: 80% top; padding: 2em 8%; min-height: 500px; font-size: 0.99em;}
#conwrap .con5 li p {font-size: 0.8em;}

.con5 .bg1, .con5 .bg2, .con5 .bg3 { min-height: 200px; }
#conwrap .con5 li .titleicon { width:50px; top: -5px;}

.tab_con .con_wrap .tt { font-size: 0.88em;}
.tab li { width: 100% !important; margin-bottom: 0; margin-top: -1px;}
#conwrap .con5 li span { height: 11px; width: 1px; margin: 0 0.6em; }
}