/* 서브페이지 메인 - 공통설정 */
body {position: relative; z-index: -999;}
section h3 {font-size: 2.2rem; font-weight: 500; color: #3e8eac;}
section h2 {font-size: 4.2rem; font-weight: 700; margin-top: 10px;}
section p {font-size: 1.6rem; font-weight: 500; color: #333;}

.header_bottom {background: url(images/sub02/fleetlist_bg.png) no-repeat center / cover;}
/*  */
.bg_tit {position: absolute; top: 42%; width: 100%; height: 300px;}
.bg_tit_wrap {position: relative;}
#bg_tit1 {color: #d1d1d1; opacity: 0.3; font-size: 13rem; position: absolute; top: 0; left: 100%; 
    animation: bgani 17s linear infinite;}
#bg_tit2 {text-align: right; color: #d1d1d1; opacity: 0.3; font-size: 13rem; position: absolute; top: 120px; right: 0;
    animation: bgani2 17s linear infinite;}
@keyframes bgani {
    0% {left: -20%; opacity: 0.3;}
    50% {left: 50%; color: #3e8eac;}
    100% {right: 100%; opacity: 1;}
}
@keyframes bgani2 {
    0% {right: -20%; opacity: 0.3;}
    50% {right: 50%; color: #2a708a;}
    100% {right: 100%; opacity: 1;}
}

/* section01*/
#fleetlist {margin-bottom: 60px; position: relative; z-index: -1;}
#fleetlist::before {content: ""; display: block; width: 100%; height: 100%; position: absolute;
    background: url(images/sub02/bg.png) no-repeat center; opacity: 0.1; filter: brightness(1.2);}
.contents_wrap {display: flex; justify-content: space-between; flex-wrap: wrap;}
.tit_box {margin-bottom: 60px; margin-top: 200px;}
.item_name {font-size: 6.2rem; font-weight: 600; color: #000000; color: #fff; text-align: center; z-index: 1; position: relative; line-height: 70px;}
.item_box {width: 32%; height: 510px; align-content: center; position: relative; margin-bottom: 100px; cursor: pointer;}
.item_box:nth-child(2) {margin-top: 100px;}
.item_box:nth-child(3) {margin-top: 200px;}
.item_box:nth-child(4) {margin-top: 0;}
.item_box:nth-child(5) {margin-top: 100px;}
.item_box:nth-child(6) {margin-top: 200px;}

/* 선단 이미지 */
.item01 {background: url(images/sub02/clover.png) no-repeat center / cover; width: 100%; height: 100%;border-radius: 30px; padding-top: 180px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);}
.item02 {background: url(images/sub02/acacia.png) no-repeat center / cover; width: 100%; height: 100%;border-radius: 30px; padding-top: 180px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);}
.item03 {background: url(images/sub02/cosmos.png) no-repeat center / cover; width: 100%; height: 100%;border-radius: 30px; padding-top: 180px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);}
.item04 {background: url(images/sub02/dahlia.png) no-repeat left center / cover; width: 100%; height: 100%; border-radius: 30px; padding-top: 180px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);}
.item05 {background: url(images/sub02/freesia.png) no-repeat center / cover; width: 100%; height: 100%;border-radius: 30px; padding-top: 180px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);}
.item06 {background: url(images/sub02/grace.png) no-repeat center / cover; width: 100%; height: 100%;border-radius: 30px; padding-top: 180px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);}

/* 배경&info */
.item_box_bg {display: none; width: 100%; height: 100%; background: #000; opacity: 0; border-radius: 30px;
    position: absolute; bottom: 0; animation: itembg .5s forwards;}
@keyframes itembg {
    0% {height: 0;}
    100% {height: 100%; opacity: 0.4;}
}
.info_box {display: none; width: 95%; position: absolute; justify-content: space-around; bottom: 0px; border: 1px solid #ffffff6e; border-radius: 10px; padding: 10px 0; left: 10px;
    animation: infoani 0.5s linear forwards;}
@keyframes infoani {
    0% {bottom: 0; opacity: 0;}
    100% {bottom: 20px; opacity: 1;}
}
.info_box li h4 {font-size: 1.6rem; font-weight: 700; color: #fff;}
.info_box li p {font-size: 1.6rem; color: #f1f1f1;}




/* 반응형 */
@media screen and (max-width: 1800px) {
    #fleetlist {padding: 0 20px;}
}

@media screen and (max-width: 1200px) {
    .item_name {font-size: 5.5rem;}
    .info_box li p {font-size: 1.4rem;}
    .info_Btn {width: 40px; height: 40px; right: 30px;}
    .info_Btn i {font-size: 2.6rem;}
}

@media screen and (max-width: 1100px) {
    .item_box {width: 48%;}
    .item_box:nth-child(3) {margin-top: 0;}
    .item_box:nth-child(4) {margin-top: 100px;}
    .item_box:nth-child(5) {margin-top: 0;}
    .item_box:nth-child(6) {margin-top: 100px;}
    .bg_tit {position: absolute; top: 30%;}
    #bg_tit1 {font-size: 10rem;}
    #bg_tit2 {font-size: 10rem;}
    
}

@media screen and (max-width: 955px) {
    section h3 {font-size: 1.8rem;}
    section h2 {font-size: 3.2rem;}
    section p {font-size: 1.4rem;}
    .item_name {font-size: 4.8rem;}
}

@media screen and (max-width: 800px) {
    .item_name {font-size: 4.0rem;}
    .info_box {text-align: center; flex-wrap: wrap; left: 8px;}
    .info_box li {width: 100%;}
    .info_box li h4 {margin-bottom: 12px;}
    .info_box li h4 br {display: none;}
    @keyframes infoani {
        0% {bottom: 0; opacity: 0;}
        100% {bottom: 20px; opacity: 1;}
    }

}

@media screen and (max-width: 700px) {
    .item_name {font-size: 3.4rem;}
    .tit_box {margin-top: 80px;}
}

@media screen and (max-width: 600px) {
    section h3 {font-size: 1.6rem;}
    section h2 {font-size: 2.6rem;}
    section p {font-size: 1.4rem;}

    .item_name {font-size: 2.6rem;}
    .item_box {width: 100%; margin: 0;}
    .item_box:nth-child(2) {margin-bottom: 100px;}
    .item_box:nth-child(4) {margin-bottom: 100px;}
    .info_box {width: 70%; left: 50%; transform: translateX(-50%);}
    
    .bg_tit {display: none;}

}