.box h6 { display: inline-block; padding-left: 100px; font-family: var(--pointfont); }
.box h6::before { position: absolute; content: ''; width: 80px; height: .5px; left: 0; top: 50%; transform: translateY(-50%); background: var(--dark-gray); }
.box h6.point-color::before { background: var(--pointcolor); }

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@600&display=swap');
.copyBox { height: 100%; position: absolute; top: 0; right: 0; padding: 0 .6rem; background: #e5e5e5; }
.copyBox .copyText { writing-mode: vertical-lr; margin-top: 5rem; letter-spacing: 7px; font-weight: 500; font-family: 'Exo 2', sans-serif; }

.sideLogo { bottom: 200px; }

.mark { position: relative; z-index: 1; }
.mark::before { position: absolute; content: ''; width: 102%; height: 50%; left: 0; bottom: 0; background: rgba(var(--pointcolor-rgb), .5); z-index: -1; }

.stepNum { width: 50px; height: 50px; font-size: 1.4rem; font-weight: 700; font-family: var(--pointfont); background: rgba(var(--pointcolor-rgb), .25); display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 1.5rem; }

.subTopImage { width: 100%; min-height: 100vh; background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; }
.subTopImage .cont { height: 100vh; padding-top: 35vh; }
.subTopImage .buttonBox a { min-width: 200px; display: inline-block; padding: 1rem; text-align: center; border: 1px solid; }

#video{display: none;}
@media(max-width:450px) {
    .subTopImage .buttonBox {flex-direction: column;}
    .subTopImage .buttonBox a:last-child {margin-top: 1rem;} 
}


#Inspection .txtBox { padding: 5rem 5rem 0 5rem; }

#kindSlide .sap-swiper { overflow-x: hidden; width: 85%; }
#kindSlide .swiper-pagination-bullets { width: 60%; }
#kindSlide .swiper-pagination-bullet { margin: 0; opacity: 1; background: transparent; color: var(--gray); height: auto; border-radius: 0; }
#kindSlide .swiper-pagination-bullet-active { color: var(--pointcolor); }
#kindSlide .swiper-pagination-bullet-active > span { border-bottom: 1px solid var(--pointcolor); }
#kindSlide .sap-swiper .flexList, #kindSlide .swiper-pagination2, #Inspection .flexList { --x-gap:0rem; }
#kindSlide .swiper-button-prev, #kindSlide .swiper-button-next {
    position: absolute; top: 70%; transform: translateY(-50%); display: block; width: 14px; height: 30px; cursor: pointer;
}
#kindSlide .swiper-button-prev::after,
#kindSlide .swiper-button-next::after
{ content: ''; }
#kindSlide .swiper-button-prev { background-image: url('/img/arrow_left.png'); background-repeat: no-repeat; }
#kindSlide .swiper-button-next { background-image: url('/img/arrow_right.png'); background-repeat: no-repeat; }
#commonSpecial .flexList { --x-gap:0rem; }

@media (max-width: 1200px) {
    .stepNum { width: 36px; height: 36px; font-size: 1.1rem; }
    #Inspection .txtBox { padding: 2.5rem 3.5rem 0 3.5rem; }
}
@media (max-width: 990px) {
    #commonSpecial .flexList, #Inspection .flexList  { --x-gap:1.500rem; --y-gap:0; }
    #AanSpecial .box.right { padding-top: 0 !important; margin-top: 5rem !important; }
    #kindSlide .sap-swiper { width: 100%; }
    #kindSlide .swiper-pagination-bullets { width: 90%; }
    #hyperbaricDifference .txtBox { padding: 0 4rem; }
    #hyperbaricDifference .imgBox { width: 85%; }
    #Inspection .imgBox { display: none; }
    #Inspection .stepList { display: flex; flex-wrap: wrap; flex-direction: column;}
    #Inspection .stepList > li { width: 100%; margin-top: 2rem; margin-bottom: 1rem; }
}
@media (max-width: 768px) {   
    #kindSlide .sap-swiper .flexList { --y-gap:0; }
    #kindSlide .sap-swiper .flexList .txtBox { order: 2; padding-bottom: 2.5rem; }
    #kindSlide .sap-swiper .flexList .imgBox { width: 100%; order: 1; }
    #kindSlide .swiper-pagination-bullets { width: 100%; }
    .stepNum { width: 24px; height: 24px; font-size: 1.1rem; }
}

@media (max-width:400px) {
    #Inspection .stepList ol {font-size: 1.5rem;}
}

/* commonTop */
#commonTop .topBox {position: relative;}
#commonTop .titBox {padding: 5.5rem 5.5rem 5rem 5.5rem; background-size: cover;}
#commonTop .topBox .boxRight {position: absolute; right: 4rem; top: 5.5rem;}

#commonTop .txt_row {width: 50%;}

@media (max-width:1240px) {
    #commonTop .topBox .boxRight {right: 2rem;}
    #commonTop .topBox .boxRight img {width: 90%; margin: auto;}
}

@media (max-width:1024px) {
    #commonTop .topBox .boxRight {right: 0;}
    #commonTop .topBox .boxRight img {width: 80%; margin: auto;}
}

@media (max-width:990px) {
    #commonTop .titBox {background-size: 300%; background-repeat: no-repeat; padding-bottom: 0;}
    #commonTop .topBox .boxRight {position: relative; top: 2.5rem;}
    #commonTop .topBox .boxRight img {width: 100%;}
    #commonTop .txt_row {width: 100%;}
}

@media (max-width:768px) {
    #commonTop .titBox {padding: 5rem 3rem 0 3rem; background-size: 350%;}
}

@media (max-width:420px) {
    #commonTop .titBox {background-size: 400%;}
}