/*----------s_detail----------*/
.s_detail .cont.n1{
    margin-bottom: 160px;
}
.s_detail .cont.n1 .title{ margin-bottom: 100px; }
.s_detail .cont.n1 .flexBx{
    display: flex; align-items: flex-end; gap: 35px;
    max-width: calc(100% - 180px); margin: 0 auto;
}
.s_detail .cont.n1 .flexBx > div{
    flex: 1; position: relative;
}
.s_detail .cont.n1 .flexBx .left{text-align: right;}
.s_detail .cont.n1 .flexBx .right{
    padding-bottom: 123px;
}
.s_detail .cont.n1 .flexBx .imgBx{
    border: 1px solid #cccccc; box-sizing: border-box;
    padding: 24px 0;
}
.s_detail .cont.n1 .flexBx .imgBx img{
    max-height: 260px;
}
.s_detail .cont.n1 .flexBx .badge{
    position: absolute; font-size: 30px; color: #fff;
    border-radius: 100px; display: flex; align-items: center; justify-content: center;
    top: 50px; padding: calc(8/30*1em) calc(20/30*1em); box-sizing: border-box;
}
.s_detail .cont.n1 .flexBx .badge span{}
.s_detail .cont.n1 .flexBx .badge.blue{
    left: -76px; background-color: #264eb9;
}
.s_detail .cont.n1 .flexBx .badge.red{
    right: -76px; background-color: #b51f28;
}

.s_detail .cont.n2{}
.s_detail .cont.n2 .title{margin-bottom: 100px;}
.s_detail .cont.n2 .imgBx{position: relative; max-width: 1320px; margin: 0 auto;}
.s_detail .cont.n2 .imgBx::before {
    content:''; display: block; padding-bottom: calc(348/1320*100%); 
}
.s_detail .cont.n2 .imgBx img{
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

/*----------s_mechanism----------*/
.s_mechanism .cont .flexBx{ gap: 40px; }
.s_mechanism .cont .txtBx em{ color: var(--item_color); }
.s_mechanism .cont .txtBx p{ color: #000; }

/*----------s_info----------*/
.s_info .wrap .cont{ display: flex; justify-content: center; }
.s_info .wrap .cont .flexBx{ width: 1300px; gap: 30px; } 
.s_info .wrap .cont .flexBx .box{ flex: 1; }
.s_info .wrap .cont .flexBx .imgBx{ width: 100%; padding: 40px 0; border: 1px solid #e5e5e5; text-align: center; align-content: center; }
.s_info .wrap .cont .flexBx .txtBx{ text-align: center; }
.s_info .wrap .cont .flexBx .txtBx p{ font-size: 24px; line-height: calc(70 / 24); letter-spacing: -0.03em; font-weight: 300; }


/*----------s_product----------*/
.s_product .ground{ height: 60px; }
.s_product .box{ display: flex; gap: 120px; }
.s_product .imgBx.n1 .shadow{ width: 85%; bottom: 0%; left: -47%; }
.s_product .imgBx.n2 .shadow{ bottom: 0%; right: 1.5%; }
.s_product .productArea .dotBx .dot.n1{ top: 9%; left: 5%; }
.s_product .productArea .dotBx .dot.n2{ top: 24%; left: 16%; }
.s_product .productArea .dotBx .dot.n3{ top: 34%; }
.s_product .productArea .dotBx .dot.n4{ top: 46%; left: 2%; }
.s_product .productArea .dotBx .dot.n5{ top: 40%; left: 42%; }
.s_product .productArea .dotBx .dot.n6{ top: 46%; left: 67%; }
.s_product .productArea .dotBx .dot.n7{ top: 37%; right: -2%; }
.s_product .productArea .dotBx .dot.n8{ bottom: 21%; left: 74%; }
.s_product .productArea .dotBx .dot.n9{ bottom: 15%; right: -9%; }
.s_product .productArea .dotBx .dot.n10{ bottom: 0%; right: -9%; }

@media screen and (max-width: 1024px){
    .s_mechanism .cont .flexBx{ gap: 20px; }
    .s_info .wrap .cont .flexBx .txtBx p{ font-size: 18px; }
    .s_product .productArea .box{ gap: 80px; }
    .s_product .productArea .imgBx.n1 .shadow{ width: 60%; left: -20%; }
}
@media screen and (max-width: 820px){
    .s_detail .cont.n1 .flexBx{ max-width: calc(100% - 120px); }
    .s_detail .cont.n1 .flexBx .badge{ font-size: 20px; padding: calc(8 / 20 * 1em) calc(20 / 20 * 1em); }
    .s_product .imgBx.n2 .shadow{ width: 37%; }
}
@media screen and (max-width: 500px){
    .s_detail .cont.n1{ margin-bottom: 60px; }
    .s_detail .cont.n1 .title{ margin-bottom: 60px; }
    .s_detail .cont.n2 .title{ margin-bottom: 60px; }
    .s_detail .cont.n1 .flexBx{ flex-direction: column; max-width: 100%; gap: 20px; }
    .s_detail .cont.n1 .flexBx .left{ display: flex; flex-direction: column-reverse; gap: 10px; padding-bottom: 0; }
    .s_detail .cont.n1 .flexBx .right{ display: flex; flex-direction: column; gap: 10px; padding-bottom: 0; }
    .s_detail .cont.n1 .flexBx .badge{ position: static; width: 50%; font-size: 18px; padding: calc(8 / 18 * 1em) calc(16 / 18 * 1em ); }
    .s_detail .cont.n1 .flexBx .badge.blue{ top: 30px; left: -53px; }
    .s_detail .cont.n1 .flexBx .badge.red{ right: -53px; }
    .s_info .wrap .cont{ display: block; }
    .s_info .wrap .flexBx{ flex-direction: column; gap: 40px !important; width: 100% !important;  }
    .s_info .wrap .flexBx .box{ width: 100%; }
    .s_product .productArea .box{ gap: 60px; }
    .s_info .wrap .cont .flexBx .imgBx{ margin-bottom: 16px; }
    .s_info .wrap .cont .flexBx .txtBx p{ font-size: 16px; line-height: 1; }
}
@media screen and (max-width: 320px){
    .s_detail .title p br{ display: none !important; }
    .s_detail .cont.n1 .flexBx .badge{ font-size: 14px; padding: calc(8 / 14 * 1em) calc(12 / 14 * 1em); }
}