.main {
    font-size: calc(18px + .1vw);
}
.position{
    padding: 2% 0;
    border-bottom: 1px solid #333;
    margin-bottom: 6%;
}
.intro{display:flex;}
.intro strong{
    flex-basis: 50%;
    font-size: calc(24px + 1.2vw);
}
.intro .text{    flex-basis: 76%;font-size: calc(17px + .2vw);
    text-align: justify;    margin-top: 4%;
}
.adv{
    margin-top: 8%;
    display: flex;
    border-top: 4px solid;
    padding: 5% 0;
}
.adv .cont{
    width: 40%;
}
.cont p{
    font-size: calc(17px + .2vw);
    font-weight: lighter;
    line-height: 2;
}
.cont .title{
    font-size: calc(22px + 1vw);
    margin-bottom: 10%;font-family: ui-monospace;
}
.introlist li {
    list-style: disc;
    border-bottom: 1px solid #ccc;
    width: max-content;
    margin-left: 3%;
    text-align: left;
    padding: 1%;
    font-size: calc(17px + 0.2vw);
    font-weight: bold;
}
.flex{
  display: flex;
    font-size: calc(17px + .2vw);
  margin-bottom: 9%;
}
.flex .left,.flex .right{width: 50%;}
.flex img{width:100%;}
.flex .tit{
    font-size: calc(24px + 1.2vw);
	font-weight:bold;
    line-height: 1.5;
}
.flex .summary{
    margin: 9% 0 19%;
}
.flex a img{
    margin-left: 2%;
    width: auto;
}
.flex .right:has(.tit){ padding: 1% 0 4% 10%;}
.flex .left:has(.tit){ padding: 1% 10% 4% 0;}

.aboutimgs{
    margin: auto;
    width: auto;
    margin-bottom: 10%;
}
.imgCard {
    display: inline-block;
    text-align: center;
    width: 18.7%;
  	margin:2% 0.3%;
}
.imgCard img {
  max-width: 100%;
    margin: auto;
}
.op {
    	margin-left: 16px;
        position: relative;
    	display: inline-flex;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border: 2px solid #333;
        cursor: pointer;
    }
    input[type="checkbox"] {
        opacity: 0;
    }
    input[type="checkbox"]:checked + i{
        width: 18px;
        height: 18px;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #333;
    }
    input[type="checkbox"]:checked + i:after {
        content: '';
        display: inline-block;
        width: 9px;
        height: 16px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        transform: rotate(230deg);
        position: absolute;
        left: 3px;
        top: -1px;
    }

.form-control {
    position: relative;
    margin: 24px 0;
    width: 49%;
    display: inline-block;
}
.form-control:has(textarea){
    width: 100%;
}
.form-control input, .form-control textarea{
    background-color: transparent;
    margin: auto;
    border: 1px #ddd solid;
    display: block;
    width: 90%;
    margin: auto;
    padding: 10px 15px;
    font-size: 18px;
    color: #333;
}
.form-control textarea{width: 95%;}
.form-control input:focus,
.form-control input:valid,
.form-control textarea:focus,
.form-control textarea:valid {
    outline: 0;
    border-bottom-color: #004d9b;
}

.form-control label {
    position: absolute;
    top: 4px;
    left: 35px;
    font-weight: lighter;
    pointer-events: none;
}

.form-control label span {
    display: inline-block;
    font-size: 18px;
    min-width: 5px;
    color: #aaa;
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus+label span,
.form-control input:valid+label span,
.form-control textarea:focus+label span,
.form-control textarea:valid+label span {
    color: #004d9b;
    transform: translateY(-40px);
}
.form-control:nth-child(3) {
    width: 100%;
}
.form-control:nth-child(3) input {
    width: 95%;
}
.sendbtn,.sendbtn:focus {
  position: relative;
  min-width: 200px;
    float: right;
    margin-right: 10px;
  border: none;
  border-radius: 4px;
  background-color: #004C98;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition-duration: 0.4s;
  padding: 15px 20px;
}
.sendbtn:hover {
  background: #ffffff;
    box-shadow: 0px 2px 20px 3px #b4c8dd;
  color: #000000;
}
.sendbtn:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s;
}
                        
.flex .msg{flex-basis: 50%;}
.flex .location{
  flex-basis: 50%;
    margin-left: 5%;
    padding-left: 4%;
    border-left: 1px solid #aaa;
    line-height: 1.75;
}
.location p {
    margin-bottom: 5%;
}
.flex div{
    line-height: 2;
}
.lxtit{
    font-size: calc(22px + 1.2vw);
    color: #000;
    margin-bottom: 5%;
    font-weight: bold;
}
svg.icon {
    margin: 10px 17px 0 0;
}

@media only screen and (max-width: 1200px) {
  .adv {
    display: block;
    }
}
@media only screen and (max-width: 768px) {
	.intro,.flex {
    display: block;
    }
  .intro .text { margin-top: 5%;}
  .flex .left, .flex .right,.adv .cont {
    width: 100%;
	}
  .flex .right:has(.tit),.flex .left:has(.tit){ padding: 2%;}
  .flex .summary {
    margin: 2% 0;
	}
  .flex .location{
    margin: 15% 0;
    padding: 0;
    border: none;
  }
  .flex {
    display: block;
    }
  .location .flex{display: flex;}
  svg.icon {margin-top: 5px;}
  .introlist li{
    width: 92%;
    padding: 3%;
  }
}

@media only screen and (max-width: 500px) {
  .form-control {width:100%;}
}