@charset "UTF-8";
@import url('./my.css');
/**********************************************/
main .maxWidth{ display: flex; flex-flow: row wrap;}
main h2, main h3{ width: 100%; font-weight: 700;}

/* wrap_amount */
.wrap_amount{ display: flex; }
.wrap_amount li{ display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; }
.wrap_amount li.t_gray{ color: #666;}

/**********************************************/
/* === page_myorder_cart === */
.page_mycart.wrap_content > p{
    border: 1px solid #DDD; border-radius: 20px;
    font-size: 14px; line-height: 170%;
}

/* wrap_filter */
.page_mycart.wrap_content .wrap_filters { display: flex; border-bottom: 1px solid #DDD; }
.page_mycart.wrap_content .wrap_filters *{ color: #828282; font-size: 14px;}
.page_mycart.wrap_content .wrap_filters label{ display: flex; align-items: center; cursor: pointer;}
.page_mycart.wrap_content .wrap_filters input{ margin-right: 6px;}
.page_myorder .wrap_filters .since_search { margin-left:100px; }

/* wrap_list */
#page_mypage .wrap_content .wrap_list ul { border-radius:0; }
.page_mycart.wrap_content .wrap_list ul:not(.title){ cursor: pointer;}
.page_mycart.wrap_content .wrap_list li:nth-of-type(2){ font-weight: 700;}
/*.page_mycart.wrap_content .wrap_list ul:not(.title) li:last-of-type{ display: none;}*/
#page_mypage .wrap_content .wrap_list ul:not(.box_status) a:after { display:none; }


/* wrap_address */
/* .page_mycart.wrap_content .wrap_address{ display: flex; align-items:center; border: 1px solid #DDD; border-radius: 20px; }
.page_mycart.wrap_content .wrap_address p{ flex: 1; font-size: 16px; line-height: 19px; } */

.page_mycart.wrap_content button.b_dgreen{
    height: 50px; border-radius: 10px;
    box-shadow: 0px 10px 23px rgba(0, 0, 0, 0.1);
    color: #fff; font-weight: 700; font-size: 18px;
}
/**********************************************/
/* === page_myorder === */
/* box_preview */
.page_myorder .box_preview{
    display: flex; align-items: center; justify-content: center;
    width: 100%; border: 1px solid #DDD; border-radius: 20px !important;
}
.page_myorder .box_preview li{
    display: flex; flex-flow: column nowrap; align-items: center; justify-content: flex-end; flex: 1;
    font-size: 14px;
}

.page_myorder .wrap_content > p{
    border: 1px solid #DDD; border-radius: 20px; font-size: 13px; line-height: 170%;
}

/* wrap_filter */
.page_myorder .wrap_filters { display: flex; flex-flow: row wrap; align-items: center; border-bottom: 1px solid #DDD; }
.page_myorder .wrap_filters *{ font-size: 14px;}
.page_myorder .wrap_filters .b_gray{ height: 28px; border-radius: 10px; font-size: 13px; font-weight: 300;}
.page_myorder .wrap_filters p{ color: #828282; }
.page_myorder .wrap_filters button[name="btn_filter"]{ color: #585858; }
.page_myorder .wrap_filters button[name="btn_filter"].active{ font-weight: 900; }
.page_myorder .wrap_filters select{ width: 56px; height: 24px; margin-right: 6px; }
.page_myorder .wrap_filters select[name="year"]{width: 84px;}
.page_myorder #btn_search{
    width: 64px; height: 24px;
    background: #DDD; border-radius: 4px; font-size: 13px;
}

/* wrap_list */
.page_myorder .wrap_list li:nth-of-type(1) a{ text-decoration: underline; color: #585858; }



/* === page_myorder_purchase === */
#page_myorder_purchase h3{ font-weight: 700; text-align: center;}
#page_myorder_purchase > p{ border: 1px solid #DDD; border-radius: 20px; font-size: 14px; line-height: 170%; }
#page_myorder_purchase > p:first-of-type{ text-align: center; line-height: 270%; }
#page_myorder_purchase > p:last-of-type{ padding: 28px; }
#page_myorder_purchase .wrap_list li:nth-of-type(1){ font-weight: 700;}

/**********************************************/
/* ========================== responsive */
@media screen and (min-width: 1025px){
    main .maxWidth{ padding: 100px 0; }

    /* wrap_amount */
    .wrap_amount{ padding:  0 40px;}
    .wrap_amount li:not(.t_gray):nth-of-type(-n+3){ width: 20%;}
    .wrap_amount li:not(.t_gray):nth-of-type(n+4){ width: 15%;}
    .wrap_amount li.t_gray{ width: 10%; }
    .wrap_amount span{ margin-bottom: 24px;}

    /* === page_myorder_cart === */
    .page_mycart.wrap_content u{ margin-left: 10px; font-size: 18px; color: #8C8C8C; }
    .page_mycart.wrap_content > p{ padding: 35px 48px; }

    /* wrap_filter */
    .page_mycart.wrap_content .wrap_filters {padding: 18px 0 15px;}
    .page_mycart.wrap_content .wrap_filters label{ margin-right: 16px; }
    .page_mycart.wrap_content .wrap_filters button{ margin-left: 20px;}

    /* wrap_list */
    .page_mycart.wrap_content .wrap_list{ margin-bottom: 40px;}
    .page_mycart.wrap_content .wrap_list li:nth-of-type(1){ width: 5%; }
    .page_mycart.wrap_content .wrap_list li:nth-of-type(2){ width: 10%; }
    .page_mycart.wrap_content .wrap_list li:nth-of-type(3){ width: 55%; }
    .page_mycart.wrap_content .wrap_list li:nth-of-type(n+4){ width: 15%; }

    /* wrap_address */
    /* .page_mycart.wrap_content .wrap_address{ margin: 32px 0 20px; padding: 28px; } */

    .page_mycart.wrap_content button.b_dgreen{ width: 198px; margin: 50px 0 0 calc(100% - 198px);}

    /* === page_myorder === */
    /* box_preview */
    .page_myorder .box_preview li{ max-width: 160px; height: 168px; padding-bottom: 25px;}
    .page_myorder .box_preview li:nth-of-type(1) img{ width: 64px; margin-bottom: 5px;}
    .page_myorder .box_preview li:nth-of-type(2) img{ margin-bottom: 15px;}
    .page_myorder .box_preview li:nth-of-type(3) img{ margin-bottom: 10px;}
    .page_myorder .box_preview li:nth-of-type(4) img{ margin-bottom: 10px;}
    .page_myorder .box_preview li:nth-of-type(5) img{ margin-bottom: 10px;}

    .page_myorder .wrap_content > p{ margin-top: 16px;padding: 20px 36px 18px;}

    /* wrap_filter */
    .page_myorder .wrap_filters { padding: 18px 0 8px}
    .page_myorder .wrap_filters p{ margin: 0 8px 0 25px;}
    .page_myorder .wrap_filters button[name="btn_filter"]{ margin-left: 10px; }
    .page_myorder .wrap_filters .b_gray{width: 90px;}

    /* wrap_list */
    .page_myorder .wrap_list li:nth-of-type(1){ width: 20%; }
    .page_myorder .wrap_list li:nth-of-type(2){ width: 42.5%; }
    .page_myorder .wrap_list li:nth-of-type(n+3){ width: 12.5%; }


    /* === page_myorder_coupon === */
    /* box_coupon */
    #page_myorder_coupon .box_coupon{ align-items: center;  padding: 42px 56px; margin-bottom: 20px; }
    #page_myorder_coupon .box_coupon input{ margin: 0 10px 0 auto; width: calc(100% - 260px); max-width: 636px;
    }

    #page_myorder_coupon .wrap_content > b{ border-bottom: 1px solid #DDD; }

    /* wrap_list */
    #page_myorder_coupon .wrap_list{ margin-bottom: 30px;}
    #page_myorder_coupon .wrap_list li:nth-of-type(1){width: 55%; }
    #page_myorder_coupon .wrap_list li:nth-of-type(3){ width: 25%;}
    #page_myorder_coupon .wrap_list li:nth-of-type(even){width: 10%; }

    /* === page_myorder_purchase === */
    #page_myorder_purchase{ padding-bottom: 136px;}
    #page_myorder_purchase h3{ margin: 120px 0 24px;  font-size: 24px; }
    #page_myorder_purchase > p:first-of-type{ padding: 35px 0 30px; }
    #page_myorder_purchase > p:last-of-type{ margin-bottom: 20px }

    /* wrap_list */
    #page_myorder_purchase .wrap_list{ margin: 60px 0 32px; }
    #page_myorder_purchase .wrap_list li:nth-of-type(1){ width: 15%; }
    #page_myorder_purchase .wrap_list li:nth-of-type(2){ width: 45%;}
    #page_myorder_purchase .wrap_list li:nth-of-type(n+3){width: 20%;}
}
@media screen and (max-width: 1600px){
    main .maxWidth{ padding: 80px 0;}

    /* === page_myorder === */
    .page_myorder .wrap_filters div{ display: flex; justify-content: flex-end; width: 100%; }
    .page_myorder .wrap_filters div *{ margin-top: 10px; }
    .page_myorder .wrap_filters select:first-of-type{ margin-left: auto;}
}
@media screen and (max-width: 1024px){
    main .maxWidth{ padding: 60px 0 100px;}

    /* wrap_amount */
    .wrap_amount{ flex-flow: row wrap;}
    .wrap_amount li:not(.t_gray){ width: 30%; margin: 23px 0; }
    .wrap_amount li.t_gray{ width: 5%; }
    .wrap_amount li:nth-of-type(6){ margin-left: auto;}
    .wrap_amount li:nth-of-type(7){ margin-right: auto;}
    .wrap_amount span{ margin-bottom: 10px; font-size: 14px; }

    /* === page_myorder_cart === */
    .page_mycart.wrap_content > p{ margin-top: 18px; padding: 22px 18px 20px; }

    /* wrap_filter */
    .page_mycart.wrap_content .wrap_filters { flex-flow: row wrap; padding: 25px 0 11px; }
    .page_mycart.wrap_content .wrap_filters label{ width: 50%; padding: 8px 0;}
    .page_mycart.wrap_content .wrap_filters button{ width: 50%; text-align: right; }

    .page_mycart.wrap_content .wrap_filters label:first-of-type{ order: 1;}
    .page_mycart.wrap_content .wrap_filters button:first-of-type{ order: 2;}
    .page_mycart.wrap_content .wrap_filters label:last-of-type{ order: 3;}
    .page_mycart.wrap_content .wrap_filters button:last-of-type{ order: 4;}

    /* wrap_list */
    .page_mycart.wrap_content .wrap_list { text-align:start; }
    .page_mycart.wrap_content .wrap_list ul {  padding: 34px 0 34px 42px; }
    .page_mycart.wrap_content .wrap_list li:nth-of-type(1){ position: absolute; top: 36px; left: 15px; }
    .page_mycart.wrap_content .wrap_list li:nth-of-type(2){ order: 1; }
    .page_mycart.wrap_content .wrap_list li:nth-of-type(4){ order: 2; margin-left: auto; }
    .page_mycart.wrap_content .wrap_list li:nth-of-type(3){ order: 3; margin: 8px 0 14px; }
    .page_mycart.wrap_content .wrap_list li:nth-of-type(5){ order: 4; margin-left: auto; }

    .page_mycart.wrap_content .wrap_list li:nth-of-type(4)::after{content: '권';}
    .page_mycart.wrap_content .wrap_list li:nth-of-type(5):after{ content: '원';}

    .wrap_content .wrap_list ul {flex-flow: row wrap;}
    .wrap_content .wrap_list ul li { width:auto; padding:0; }
    .wrap_content .wrap_list ul li.rows { width:100%; text-align:start; }

    /* wrap_address */
    /* .page_mycart.wrap_content .wrap_address{ flex-flow: column nowrap; margin: 34px 0; padding: 24px 20px 16px; }
    .page_mycart.wrap_content .wrap_address .btn_gray{ margin-top: 18px;} */

    .page_mycart.wrap_content button.b_dgreen{ width: 100%; margin-top: 28px; }

    /* === page_myorder === */
    /* box_preview */
    .page_myorder .box_preview { flex-flow:initial !important; }
    .page_myorder .box_preview li{ height: 110px; padding-bottom: 20px;}
    .page_myorder .box_preview li:nth-of-type(1) img{ width: 40px; margin-bottom: 4px; }
    .page_myorder .box_preview li:nth-of-type(2) img{ width: 45px; margin-bottom: 8px; }
    .page_myorder .box_preview li:nth-of-type(3) img{ width: 55px; margin-bottom: 5px;}
    .page_myorder .box_preview li:nth-of-type(4) img{ width: 48px; margin-bottom: 6px; }
    .page_myorder .box_preview li:nth-of-type(5) img{ width: 46px; margin-bottom: 6px;}

    .page_myorder .wrap_content > p{ margin-top: 14px; padding: 20px 15px 16px; }

    /* wrap_filter */
    .page_myorder .wrap_filters { padding: 38px 0 20px; }
    .page_myorder .wrap_filters button[name="btn_filter"]{ flex: 1; max-width: 70px;}
    .page_myorder .wrap_filters .b_gray{width: 84px;}

    /* wrap_list */
    .page_myorder .wrap_list ul{padding: 26px 16px 14px;}
    .page_myorder .wrap_list li:nth-of-type(2){ margin: 18px 0 26px;}
    .page_myorder .wrap_list li:nth-of-type(4){ margin: 0 auto;}

    /* === page_myorder_coupon === */
    #page_myorder_coupon h2{ margin-bottom: 28px;}

    /* box_coupon */
    #page_myorder_coupon .box_coupon{ flex-flow: column nowrap; padding: 24px 28px 18px; margin: 22px 0 48px; }
    #page_myorder_coupon .box_coupon input{ width: 100%; margin: 10px 0 14px;  ;}
    #page_myorder_coupon .box_coupon button{ margin: 0 auto; }

    /* wrap_list */
    #page_myorder_coupon .wrap_list{ margin-bottom: 60px;}
    #page_myorder_coupon .wrap_list ul{ padding: 20px 0 24px;;}
    #page_myorder_coupon .wrap_list li:nth-of-type(1){ font-weight: 700;}
    #page_myorder_coupon .wrap_list li:nth-of-type(2){width: 100%; margin: 14px 0 12px; text-align: left; }
    #page_myorder_coupon .wrap_list li:nth-of-type(2):after{content: ' 할인';}
    #page_myorder_coupon .wrap_list li:nth-of-type(3){margin-right: auto;}

    /* === page_myorder_purchase === */
    #page_myorder_purchase{ padding-bottom: 57px;}
    #page_myorder_purchase h3{ margin: 60px 0 40px; font-size: 18px; }
    #page_myorder_purchase > p:first-of-type{ padding: 16px; }
    #page_myorder_purchase > p:last-of-type{  margin-bottom: 11px }

    /* wrap_list */
    #page_myorder_purchase .wrap_list{ margin: 20px 0 34px; }
    #page_myorder_purchase .wrap_list ul{ padding: 34px 26px 26px;}
    #page_myorder_purchase .wrap_list li:nth-of-type(1){ order: 1; }
    #page_myorder_purchase .wrap_list li:nth-of-type(3){ order: 2; margin-left: auto; }
    #page_myorder_purchase .wrap_list li:nth-of-type(3):after{ content: '권';}
    #page_myorder_purchase .wrap_list li:nth-of-type(2){ order: 3; margin: 8px 0 14px; }
    #page_myorder_purchase .wrap_list li:nth-of-type(4){ order: 4; margin-left: auto; }
    #page_myorder_purchase .wrap_list li:nth-of-type(4):after{content: '원'}

}
@media screen and (max-width: 560px){
    main .maxWidth{ padding: 30px 0 100px;}

    /* wrap_amount */
    .wrap_amount li:nth-of-type(1){ width: 45%;}
    .wrap_amount li:nth-of-type(2){ width: 10%;}
    .wrap_amount li:nth-of-type(3){ width: 45%;}
    .wrap_amount li:nth-of-type(4){ width: 100%;}
    .wrap_amount li:nth-of-type(5){ width: 100%;}
    .wrap_amount li:nth-of-type(6){
        width: 38px; height: 18px; margin: 0 auto; transform: rotate(90deg);
    }
    .wrap_amount li:nth-of-type(7){ width: 100%;}

    /* === page_myorder === */
    /* box_preview */
    .wrap_content ul:not(.box_status) { flex-flow:wrap !important; }
    .page_myorder .box_preview{ flex-flow: row wrap; padding:0 !important; }
    .page_myorder .box_preview li{ flex: none; width: 33.33% !important; justify-content:flex-end !important;}

    /* wrap_filter */
    .page_myorder .wrap_filters div{ flex-flow: row wrap; }

    .page_myorder .wrap_filters .since_search { margin-left:0;}
}
@media screen and (max-width: 360px){
    /* === page_myorder === */
    /* wrap_filter */
    .page_myorder .wrap_filters .btn_gray{ margin-right: calc(100% - 76px); }
    .page_myorder .wrap_filters button[name="btn_filter"]{ margin-top: 10px;}

    /* box_preview */
    .page_myorder .box_preview li{ width: 50%; }
    .page_myorder .box_preview li:nth-of-type(1) img{ width: 35px;}

}