/*----------------------------------------------------------------------
model viewBtn/dltBtn/payInfo
*/
.viewBtn_modal,
.payInfo_modal{ padding:30px; }
.viewBtn_modal .check_btn,
.payInfo_modal .check_btn{ margin-top:40px; }

.viewBtn_modal>div,
.saveBtn_modal{ text-align:center; }
.viewBtn_modal>ul{ width:100%; margin:0 auto; }

.dltBtn_modal{
    max-width:500px;
    text-align:center; padding:30px 20px; 
}

.payInfo_modal{ max-width:500px; }
.payInfo_modal>div:not(:last-of-type){ text-align:left; }
.payInfo_modal>div:not(:last-of-type){ margin-bottom:20px; }
.payInfo_modal>div input:not(#callMy2){ width:100%; }
.payInfo_modal>div #callMy2{ width:80%; margin-left:2%; }
.payInfo_modal>div select{
    width:18%; float:left;
    height:50px; border-radius:8px;
}

/*----------------------------------------------------------------------
sub_tabs
*/
.sub_tabs{
    display:flex; flex-wrap:wrap; margin-bottom:20px;
    border-bottom:1px solid #969696;
}
.sub_tabs>div{
    display:flex; flex-wrap:wrap; align-items:center;
    margin-bottom:15px;
}
.sub_tabs li{
    position:relative;
    padding:0 25px 10px 25px; cursor:pointer;
    font-size:16px; font-weight:500;
}
.sub_tabs li a{ font-size:16px; font-weight:500; }
.sub_tabs li:hover::after{
    content:''; display:block;
    width:100%; height:3px;
    background-color:#969696;
    position:absolute; left:0; bottom:-1px;
}
.sub_tabs li.active::after{
    font-weight:600;
    content:''; display:block;
    width:100%; height:3px;
    background-color:#FF176B;
    position:absolute; left:0; bottom:-1px;
}

/*----------------------------------------------------------------------
콘텐츠 3개
*/
.my_content{ margin-bottom:50px;  }
.my_content>ul{ display:flex; flex-wrap:wrap; }
.my_content>ul>li{ width:32%; }

.SnsCon_ico button{ font-size:14px; font-weight:400; }
.SnsCon_ico button img{ margin-right:5px; }
.SnsCon_ico p{
    line-height:100%; margin-left:4px;
    font-size:14px; font-weight:400;
}
.my_content>ul>li:not(:nth-of-type(3n+1)){ margin-left:2%; }
.my_content>ul>li:not(:nth-of-type(-n+3)){ margin-top:50px; }

/*----------------------------------------------------------------------
카테고리
*/
.categorys{ display:flex; flex-wrap:wrap; gap:5px; }
.categorys li{
    line-height:25px; padding:0 10px;
    background-color:#959595; border-radius:5px;
    cursor:pointer; color:#FFF;

    font-size:13px; font-weight:400;
}

/*----------------------------------------------------------------------
결제내역
*/
.payInfo, .payInfo3{ border-radius:8px; }
.payInfo_wrap .payInfo_box:not(:first-of-type){ margin-top:15px; }
.payInfo_txt{ display:flex; justify-content:space-between; margin-bottom:8px; }
.payInfo_txt>p{ display:inline-block; }
.payInfo_txt .title{ font-size:18px; font-weight:500; }
.payInfo_txt .date{ font-size:18px; font-weight:700; }
.payInfo_txt .date2{ margin-left:auto; }

.payInfo{ display:flex; flex-wrap:wrap; }
.payInfo1>div:first-of-type,
.payInfo3{ position:relative; padding:25px 30px; }
.payInfo>div:first-of-type{ width:100%; }
.payInfo1>div:first-of-type{ width:80%; }

/*내용*/
.payInfo_top1{ margin-bottom:5px; }
.payInfo_top1 strong{ font-size:14px; font-weight:600; }
.payInfo_top1 h4{ font-size:22px; font-weight:800; }
.payInfo_top1 .tags{ display:flex; flex-wrap:wrap; gap:5px; }
.payInfo_top1 .tags li{ font-size:14px; margin-bottom:0 !important; }
.payInfo_top2{ display:flex; flex-wrap:wrap; gap:5px 30px; }
.payInfo_top2 p{ font-size:14px; font-weight:600; }
.payInfo_top2 p span{ font-weight:400; }
.payInfo_top2 strong{
    margin-left:auto;
    font-size:22px; font-weight:800;
}

.payInfo1>div:last-of-type{
    display:flex; flex-flow:column;
    justify-content:center; align-items:center;
    width:20%; border-left:1px solid #E8EAED;
}
.payInfo1>div:last-of-type a,
.payInfo3 a{
    display:block; padding:0 20px; line-height:30px;
    border-radius:8px; text-align:center;
    font-size:13px; font-weight:500;
}
.payInfo1>div:last-of-type a:first-of-type{ margin-bottom:5px; }

/*결제내역 상세 연락처/쿠폰/결제정보*/
.payInfo_wrap2{ margin-top:50px; }
.payInfo_wrap2 .payInfo_box:not(:first-of-type){ margin-top:15px; }
.payInfo3 ul li{ font-size:14px; font-weight:400; }
.payInfo3 ul li:not(:last-of-type){ margin-bottom:5px; }
.payInfo3 ul li span{
    display:inline-block; width:150px;
    font-weight:600;
}
.payInfo3 ul .result{ font-weight:800; }
.payInfo3 a{ position:absolute; right:30px; bottom:25px; }

.ur_infor button{
    padding:0 15px; height:30px;
    border-radius:9999px;
    font-size:13px; font-weight:500;
}
.ur_infor button.active{ border:1px solid #FF176B; color:#FF176B; }
.ur_infor button:not(:first-of-type){ margin-left:5px; }


/*연계 콘텐츠*/
.my_product>ul{ display:flex; flex-wrap:wrap; }
.my_product>ul>li{ width:32%; }
.my_product>ul>li:not(:nth-of-type(3n+1)){ margin-left:2%; }
.my_product>ul>li:not(:nth-of-type(-n+3)){ margin-top:60px; }

/*마지막 결제*/
.py_artcle p{
    font-size:14px; font-weight:600;
    margin-bottom:10px;
}
.py_artcle p:last-of-type{
    background-color:#ecf3fc;
    border-radius:8px; padding:15px 20px; 
}
.payInfo_wrap3 .payInfo_box>div:last-of-type{ display:flex; flex-wrap:wrap; }
.payInfo_wrap3 .payInfo_box>div:last-of-type>*{ width:49%; }
.payInfo_wrap3 .payInfo_box>div:last-of-type button{
    margin-left:2%; justify-content:center;
    text-align:center;
    font-size:16px; font-weight:500;
}

/*상품소개*/
.product_swiper,
.productFull_swiper{
    overflow:hidden; position:relative;
    margin-bottom:40px;
}
.product_swiper ul li,
.productFull_swiper ul li{ border-radius:8px; overflow:hidden; }
.swiper-pagination{ position:absolute; bottom:0; }
.swiper-pagination-bullet{ width:8px; height:8px; margin:0 4px !important; }

.product_wrap1 .text_wrap{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:10px;
}
.product_wrap1 .text_wrap>.p{
    display:inline-block; margin-bottom:10px;
    font-size:14px; font-weight:400;
    line-height:100%;
}
.product_wrap1 .text_wrap>p span{ font-weight:600; }
.product_wrap2{ display:flex; flex-wrap:wrap; }

.product_wrap2 .title_wrap{ width:65%; }
.product_wrap2 .sub_tabs{ margin-bottom:40px; }
.product_wrap2 .text_wrap ul:not(:first-of-type){ margin-top:20px; }
.product_wrap2 .text_wrap ul li{ font-size:14px; font-weight:400; }
.product_wrap2 .text_wrap ul li:not(:last-of-type){ margin-bottom:3px; }
.product_wrap2 .text_wrap .title{ font-size:16px; font-weight:700; }
.product_wrap2 .text_wrap .title{ margin-bottom:10px; }

.product_wrap2 .pay_wrap{
    width:32%; margin-left:3%;
    border:1px solid #E8EAED;
    padding:25px 30px; border-radius:8px;
}
.product_wrap2 .pay_wrap>div:not(:last-of-type){ margin-bottom:20px; }
.product_wrap2 .pay_wrap label{
    display:inline-block; margin-bottom:10px;
    font-size:16px; font-weight:600;
}
.product_wrap2 .pay_wrap p{
    float:right;
    font-size:16px; font-weight:500;
}
.product_wrap2 .pay_wrap button{
    width:100%; height:50px; border-radius:8px;
    font-size:16px; font-weight:500;
}

.mypage_full .product_wrap2 .title_wrap{ width:73%; }
.mypage_full .product_wrap2 .pay_wrap{ width:24%; }

/*-/+*/
.input-number-wrap{ position:relative; }
.input-number{ text-align: center; }
.input-number,
.input-number-decrement,
.input-number-increment{ height: 50px; }
.input-number-decrement,
.input-number-increment{
  display: inline-block; width: 40px; line-height: 50px;
  background: #f1f1f1; text-align: center;
  font-size:16px; font-weight: 500;
  cursor: pointer;
}
.input-number-decrement{
  border-right: none;
  border-radius: 4px 0 0 4px;
  position:absolute; left:0; top:0;
}
.input-number-increment{
  border-left: none;
  border-radius: 0 4px 4px 0;
  position:absolute; right:0; top:0;
}

/*----------------------------------------------------------------------
결제진행
첫 페이지
*/
.coupons{ display:flex; flex-wrap:wrap; }
.coupons li{
    width:49%; height:170px; border-radius:8px;
    padding:25px 30px; position:relative;
    display:flex; flex-flow:column; justify-content:space-between;
}
.coupons li:nth-of-type(even){ margin-left:2%; }
.coupons li:not(:nth-of-type(-n+2)){ margin-top:20px; }
.coupons li::after{
    content:''; display:block;
    position:absolute; right:-1px; top:50%;
    transform:translateY(-50%);
    width:20px; height:40px;
    border-radius:20px 0 0 20px;
    background-color:#FFF;

    border-style:solid;
    border-width:1px 0 1px 1px;
    border-color:#E8EAED;
}
.coupons li::before{
    content:''; display:block;
    position:absolute; right:85px; top:0;
    height:166px; border:1px dashed #E8EAED;
}

.coupons li h3{
    font-size:22px; font-weight:800;
    margin-bottom:5px;
}
.coupons li strong{
    font-size:16px; font-weight:800;
    margin-bottom:5px;
}
.coupons li p{ font-size:14px; font-weight:400; }
.coupons li p span{ font-weight:500; }
.coupons img{
    position:absolute; right:55px; top:50%;
    transform:translateY(-50%); cursor:pointer;
    width:20px; min-height:auto;
}

.coupon_text{
    background-color:#F8F9FA; border-radius:8px;
    padding:25px 30px; margin-top:15px;
}
.coupon_text strong{
    font-size:14px; font-weight:600;
    display:block; margin-bottom:10px;
}
.coupon_text ul li{ font-size:14px; font-weight:400; }
.coupon_text ul li:not(:last-of-type){ margin-bottom:5px; }

/*공통 라디오*/
.com_radio_circle{ position:relative; overflow: hidden; }
.com_radio_circle input[type="radio"]{
    position:absolute;
    top:-99px; left:-99px;
    width:0; height:0;
    opacity: 0;
}
.com_radio_circle label{
    display: inline-block;
    position:relative; padding-left:30px;
    font-size:16px; font-weight:600;
}
.com_radio_circle label:after,
.com_radio_circle label:before{
    content:""; position:absolute;
    border-radius: 100%; transition:all .3s;
    -o-transition:all .3s;
    -moz-transition:all .3s;
    -webkit-transition:all .3s;
}
.com_radio_circle label:after{
    top:4px; left:0;
    width:15px; height:15px;
    border:1px solid #ddd;
}
.com_radio_circle label:before{
    top:7.5px; left:3.5px;
    width:10px; height:10px;
    background:#000; opacity:0;
}
.com_radio_circle input[type="radio"]:checked + label:after{ border-color:#000; }
.com_radio_circle input[type="radio"]:checked + label:before{ opacity: 1; }

/*결제진행*/
.payment_list{ margin-bottom:50px; }
.payment_list>li{
    padding:20px 0;
    border-bottom:1px solid #E8EAED;
    background-position: right center;
    background-repeat: no-repeat;
    background-size:60px auto;
}
.payment_list>li:last-child{
    border-bottom:0;
}
.payment_list>li.kakao{ background-image:url("../images/sub/kakaoPy_ico.png"); }
.payment_list>li.naver{ background-image:url("../images/sub/naverPy_ico.png"); }
.payment_list>li.domestic{ background-image:url("../images/sub/cardPy_ico.png") }
.payment_list>li.toss{ background-image:url("../images/sub/tossPy_ico.png"); }
.payment_list>li.payco{ background-image:url("../images/sub/paycoPy_ico.png"); }
.payment_list>li.card{
    background-image:url("../images/sub/Py_icos.png");
    background-size:250px auto;
}
.payment_list>li .com_radio_circle{ display: block; }
.payment_list li p{
    display:inline-block; background-color:#ecf3fc;
    padding:5px 10px; border-radius:5px;
    margin-left:30px; margin-top:10px;
    font-size:14px; font-weight:600;
}

.payment_box{
    display:flex; align-items: center;
    border-radius:8px;
    padding:25px 30px; gap: 20px;
}
.payment_box p{
    flex:1; line-height:23px;
    font-size:14px; font-weight:500;
}
.payment_box .price_box{
    width:20%; min-width:200px;
    text-align: center;
}
.payment_box .price_box strong{ font-size:22px; font-weight:800; }
.payment_box .price_box button{
    display:block; width:100%; height:50px;
    line-height:50px; border-radius: 10px;
    font-size:16px; font-weight:600; color:#fff;
    margin-top:10px;
}

/*결제완료*/
.payment_result{
    text-align: center;
}
.payment_result strong{
    display:block; margin-bottom:10px;
    font-size:32px; font-weight:600;
}
.payment_result p{ font-size:16px; font-weight:400; }

/*----------------------------------------------------------------------
구매내역/구매정보
*/

.date_btns{ display:flex; align-items:center; }

.date_btns div:first-of-type label{ border-radius:8px 0 0 8px; }

.date_btns div:last-of-type label{ border-radius:0 8px 8px 0; }

.date_btns div:not(:first-of-type){ margin-left:-1px; }

.date_btns input{

    position:absolute;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance:none; cursor:pointer;

}

.date_btns input:checked{ outline:none; }

.date_btns label{

    display:block; line-height:50px; padding:0 15px;

    font-size:14px; font-weight:500;

}

input[type="radio"]+label{ cursor:pointer; }

.date_btns input[type='radio']:checked+label,

.date_btns label.active{

    z-index:9; position:relative;

    border:1px solid #FF176B;

}

.formDate{ margin-left:10px; }
.formDate input[type="date"]{
    width:200px; height:50px;
    padding:0 10px; border-radius:8px;
}
.formDate button{
    height:50px; padding:0 20px;
    margin-left:5px; border-radius:8px;
    font-size:14px; font-weight:500;
}

/*----------------------------------------------------------------------
pagenation
*/
.pagenation{ display:flex; justify-content:center; margin-bottom:15px; }
.pagenation button{
    display:flex; justify-content:center; align-items:center;
    font-size:14px; font-weight:500;
}
.pagenation button:not(.prev, .next){ width:40px; height:40px; }
.pagenation_admin button.active{ border-radius:5px; color:#FFF; }
.pagenation button img{ width:15%; min-height:auto; }
.prev img{ transform:rotate(90deg); margin-right:5px; }
.next img{ transform:rotate(-90deg); margin-left:5px; }
.prev, .next{ padding:0 15px; border-radius:5px; }
.prev{ margin-right:30px; }
.next{ margin-left:30px; }
 




/*----------------------------------------------------------------------
기본 pc 스타일
*/
@media screen and (max-width:1199px){
    .navbar-toggler img{ width:15px; }
    .payment_box p br{ display:none; }
    .my_content>ul>li, .my_product>ul>li{ width:49%; }
    .my_content>ul>li:not(:nth-of-type(3n+1)),
    .my_product>ul>li:not(:nth-of-type(3n+1)){ margin-left:0; }
    .my_content>ul>li:not(:nth-of-type(2n+1)),
    .my_product>ul>li:not(:nth-of-type(2n+1)){ margin-left:2%; }
    .my_content>ul>li:not(:nth-of-type(-n+3)),
    .my_product>ul>li:not(:nth-of-type(-n+3)){ margin-top:0; }
    .my_content>ul>li:not(:nth-of-type(-n+2)),
    .my_product>ul>li:not(:nth-of-type(-n+2)){ margin-top:50px; }
    .product_wrap2 .title_wrap{ width:100%; margin-bottom:40px; }
    .product_wrap2 .pay_wrap{ width:100%; margin-left:0; }

    .mypage_full .product_wrap2 .title_wrap{ width:65%; }
    .mypage_full .product_wrap2 .pay_wrap{ width:32%; margin-left:3%; }
}
@media screen and (max-width:1140px) {
    .payInfo1>div:first-of-type{ width:75%; }
    .payInfo1>div:last-of-type{ width:25%; }
    .payInfo_top2 strong{ width:100%; margin-top:20px; }
    .coupons img{ right:47px; }
}
@media screen and (max-width:1110px) {
    .payInfo1>div:first-of-type{ width:75%; }
    .payInfo1>div:last-of-type{ width:25%; }
    .payInfo_top2 strong{ width:100%; margin-top:20px; }
    .coupons li::before{ right:70px; }
}
@media screen and (max-width:1000px) {
    .coupons li{ width:100%; }
    .coupons li:nth-of-type(even){ margin-left:0; }
    .coupons li:not(:first-of-type){ margin-top:20px; }
    .coupons li::before{ right:85px; }
    .payInfo1>div:first-of-type{ width:70%; }
    .payInfo1>div:last-of-type{ width:30%; }
    .payInfo_wrap3 .payInfo3 ul{ width:100%; }
    .payInfo_wrap3 .payInfo3 ul li{ display:flex; justify-content:space-between; }
    .payInfo_wrap3 .payInfo3 ul li span{ width:auto; }
}
@media screen and (max-width:850px) {
    .viewBtn_modal, .payInfo_modal{ padding:25px; }
}
@media screen and (max-width:959px) {
    .mypage_full .product_wrap2 .title_wrap{ width:100%; }
    .mypage_full .product_wrap2 .pay_wrap{ width:100%; margin-left:0; }
}
@media screen and (max-width:900px) {
    .formDate{
        width:100%;
        margin-left:0; margin-top:15px;
    }
    .formDate input[type="date"]{ width:205px; }
}
/*모바일 스타일*/
@media screen and (max-width:767px){
    .payment_list{ margin-bottom:30px; }
    .payment_box{ flex-direction: column; text-align: center; }
    .payment_box p{ font-size:14px; }
}
@media screen and (max-width:599px) {
    .payment_list>li{ background-image:none !important; }
    .payInfo1>div:first-of-type{ width:65%; }
    .payInfo1>div:last-of-type{ width:35%; }
    .formMy .sub_tabs{ display:flex; flex-wrap:wrap; }
    .payInfo4{ padding:25px 30px 80px 25px; }
    .payInfo_wrap3 .payInfo_box>div:last-of-type>*{ width:100%; }
    .payInfo_wrap3 .payInfo_box>div:last-of-type button{ margin-left:0; margin-top:3%; }
    .payment_result strong{ font-size:30px; }
}
@media screen and (max-width:550px){
    .my_content>ul>li, .my_product>ul>li{ width:100%; }
    .my_content>ul>li:not(:nth-of-type(2n+1)),
    .my_product>ul>li:not(:nth-of-type(2n+1)){ margin-left:0%; }
    .my_content>ul>li:not(:nth-of-type(-n+2)),
    .my_product>ul>li:not(:nth-of-type(-n+2)){ margin-top:0; }
    .my_content>ul>li:not(:nth-of-type(-n+1)),
    .my_product>ul>li:not(:nth-of-type(-n+1)){ margin-top:30px; }
}
@media screen and (max-width:500px){
    .payInfo1>div:first-of-type{ width:100%; border-bottom:1px solid #E8EAED; }
    .payInfo1>div:last-of-type{
        width:100%; position:relative;
        display:flex; flex-direction:row; justify-content:space-around;
        border-left:0; padding:25px 0;
    }
    .payInfo1>div:last-of-type::after{
        content:''; display:block;
        width:1px; height:82px; background-color:#E8EAED;
        position:absolute; left:50%; top:0;
    }
    .payInfo1>div:last-of-type a:first-of-type{ margin-bottom:0; }
    .payInfo3 ul{ width:100%; }
    .payInfo3 ul li{ display:flex; justify-content:space-between; }
    .payInfo3 ul li span{ width:auto; }
    .payInfo_modal>div:not(:last-of-type){ margin-bottom:15px; }

    .prev, .next{ text-indent:-9999px; padding:0 10px; }
        .prev img{ margin-right:0; }
        .next img{ margin-left:0; }
        .pagenation button img{ width:50%; }
}
@media screen and (max-width:450px) {
    .payInfo3 ul li{ flex-wrap:wrap; }
    .payInfo3 ul li span{ width:100%; margin-bottom:3px; }
    .payment_result strong{ font-size:26px; }
    .payment_result p{ font-size:14px; }
}
@media screen and (max-width:400px) {
    .viewBtn_modal, .payInfo_modal{ padding:20px; }
    .sub_tabs li, .product_wrap1 .text_wrap p,
    .payment_box .price_box button, .sub_tabs li a,
    .product_wrap2 .pay_wrap button{ font-size:14px; }
    .payInfo1>div:last-of-type a, .payInfo3 a,
    .coupon_text ul li{ font-size:13px; }
    .payInfo_txt .date{ font-size:17px; }
    .payInfo_top1 h4, .payInfo_top2 strong{ font-size:20px; }
    .product_wrap2 .text_wrap .title,
    .com_radio_circle label{ font-size:15px; }

    .mypage7 .sub_tabs li{ width:50%; }
    .payInfo1>div:first-of-type, .payInfo3,
    .payment_box, .coupons li, .product_wrap2 .pay_wrap{ padding:20px 25px; }
    .payInfo4{ padding:20px 25px 65px 20px; }
    .sub_tabs{ display:table; width:100%; }
    .sub_tabs li{
        display:table-cell; text-align:center;
        padding:0; padding-bottom:10px;
    }
}