@charset "utf-8";
main { position: relative; height: 580px; margin-top: 92.53px; background: url(../img/sub2/image1.jpg) no-repeat center/cover; }
main::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); }
main .c1280 { position: relative; height: 100%; text-align: center; }
main .c1280 .txtbox { position: absolute; bottom: 0; left: 0; display: flex;  flex-direction: column; justify-content: center; align-items: center; width: 250px; aspect-ratio: 1/1; background: #333785; z-index: 1; }
main .c1280 .txtbox h1 { color: #fff; font-size: 30px; margin-bottom: 15px; }
main .c1280 .txtbox p { color: rgba(255, 255, 255, 0.3); }

.fieldintro1 { text-align: center; }
.fieldintro1 h1 { color: #272a66; margin-bottom: 60px; }
.fieldintro1 h1 span { color: #3997d2; font-weight: 800; font-size: inherit; }
.fieldintro1 p { font-size: 16px; }

.fieldintro2 { background: #f9f9f9; }
.fieldintro2 .tit { text-align: center; }
.fieldintro2 .tit span { margin: 0 auto;}
.fieldintro2 ul li { display: flex;  }
.fieldintro2 ul :nth-child(2n) { flex-direction: row-reverse; } 
.fieldintro2 ul li> div { width: 50%; }
.fieldintro2 ul li> :first-child { aspect-ratio: 4/3; }
.fieldintro2 ul li .img1 { background: url(../img/sub2/image2.jpg) no-repeat center/cover; }
.fieldintro2 ul li .img2 { background: url(../img/sub2/image3.jpg) no-repeat center/cover; }
.fieldintro2 ul li .img3 { background: url(../img/sub2/image4.jpg) no-repeat center/cover; }
.fieldintro2 ul li .img4 { background: url(../img/sub2/image5.jpg) no-repeat center/cover; }
.fieldintro2 ul li> :last-child { padding: 40px 0 0 40px; }
.fieldintro2 ul li span { font-size: 60px; color: #777; font-weight: 700; opacity: 0.1; }
.fieldintro2 ul li h2 { color: #333785; margin-bottom: 40px; }
.fieldintro2 ul li p { font-weight: 700; }

.fieldintro3 .con1 { margin-bottom: 100px;}
.fieldintro3 .con1 .tit { text-align: center; }
.fieldintro3 .con1 .tit span { margin: 0 auto; }
.fieldintro3 .con1> p { text-align: center; font-size: 16px; margin-bottom: 60px; }
.fieldintro3 .con1 ul> :not(:last-child) { margin-bottom: 40px; }
.fieldintro3 .con1 ul li { display: flex; align-items: center;}
.fieldintro3 .con1 ul li> :first-child { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 230px; aspect-ratio: 1/1; background: #272a66; }
.fieldintro3 .con1 ul li div span { font-weight: 700; margin-bottom: 10px; }
.fieldintro3 .con1 ul li div h2 { color: #fff; }
.fieldintro3 .con1 ul li> :last-child { width: 100%; padding: 40px; border: 1px solid #ccc; border-left: none; }
.fieldintro3 .con1 ul li div p { font-size: 16px; }
.fieldintro3 .con2 { text-align: center; }
.fieldintro3 .con2 h1 { font-weight: 800; color: #272a66; margin-bottom: 60px; }
.fieldintro3 .con2 h1 span { color: #3997d2; font-size: inherit; }
.fieldintro3 .con2 .icons { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 40px; }
.fieldintro3 .con2 .icons div { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 230px; aspect-ratio: 1/1; border-radius: 50%; background: #f9f9f9; }
.fieldintro3 .con2 .icons div i { font-size: 80px; margin-bottom: 10px; color: #272a66; }
.fieldintro3 .con2 .icons div p { font-size: 24px; font-weight: 700; color: #272a66; }
.fieldintro3 .con2 .icons> i { font-size: 60px; color: #272a66; }
.fieldintro3 .con2> p { font-size: 16px; }

@media screen and (max-width: 1280px) {
    .fieldintro3 .con1 ul li> :first-child { width: 25%; min-width: 200px; }
    .fieldintro3 .con1 ul li> :last-child { padding: 30px 40px; }
}

@media screen and (max-width: 1024px) {
    main .c1280 .txtbox { width: 350px; aspect-ratio: 1.618/1; }
    main .c1280 .txtbox h1 { margin-bottom: 10px; }

    .fieldintro1 p { font-size: 15px; }

    .fieldintro2 ul li> :first-child { aspect-ratio: 1/1; }
    .fieldintro2 ul li span { font-size: 50px; }
    .fieldintro2 ul li h2 { margin-bottom: 20px; }

    .fieldintro3 .con1> p { font-size: 15px; }
    .fieldintro3 .con1 ul li div p { font-size: 15px; text-align: justify; }
    .fieldintro3 .con1 ul li> :last-child { padding: 30px; }
    .fieldintro3 .con1 ul li div p br { display: none; }
    .fieldintro3 .con2 .icons div p { font-size: 20px; }
    .fieldintro3 .con2 .icons div i { font-size: 60px; }
    .fieldintro3 .con2> p { font-size: 15px; }
}

@media screen and (max-width: 820px) {
    main { height: 45vh; margin-top: 72.67px; }
    main .c1280 .txtbox { width: 300px; }

    .fieldintro1 p { text-align: justify; }
    .fieldintro1 p br { display: none; }

    .fieldintro2 ul li span { font-size: 40px; }
    .fieldintro2 ul li> :last-child { padding: 20px 0 0 20px; }

    .fieldintro3 .con1> p { text-align: justify; }
    .fieldintro3 .con1> p br { display: none; }
    .fieldintro3 .con1 ul li> :last-child { padding: 20px 30px; }
    .fieldintro3 .con1 ul li div p { font-size: 14px; font-weight: 400; }
    .fieldintro3 .con2> p { text-align: justify; }
    .fieldintro3 .con2> p br { display: none; }
}

@media screen and (max-width: 601px) {
    main .c1280 .txtbox { width: 250px; }

    .fieldintro2 ul li { display: block; margin-bottom: 40px; }
    .fieldintro2 ul li> :first-child { width: 100%; aspect-ratio: 4/3; }
    .fieldintro2 ul li> :last-child { padding-left: 0; width: 100%; }

    .fieldintro3 .con1 ul li { flex-direction: column; }
    .fieldintro3 .con1 ul li> :first-child { width: auto; min-width:initial; aspect-ratio: initial; padding: 20px; }
    .fieldintro3 .con1 ul li> :last-child { padding: 60px 20px 30px; margin-top: -40px; z-index: -1; border: 1px solid #ccc; }
    .fieldintro3 .con2 h1 { margin-bottom: 40px; font-size: 30px; }
    .fieldintro3 .con2 .icons { gap: 10px; }
    .fieldintro3 .con2 .icons div { width: 150px; }
    .fieldintro3 .con2 .icons div i { font-size: 36px; }
    .fieldintro3 .con2 .icons div p { font-size: 16px; }
    .fieldintro3 .con2 .icons> i { font-size: 40px; }
}