/*
공통
*/
.mypage_wrap{ display:flex; margin:120px auto; }

/*사이드 메뉴*/
aside{
    width:25%; max-width:250px; height:100%;
    border-radius:10px; box-shadow:0 0 5px #d7d7d7;
    background-color:#FFF;
}
aside>div, aside ul:not(:last-of-type){ border-bottom:1px solid #E8EAED; }
.myinfo1{ text-align:center; padding:25px; }
.myinfo1 .img_boxs{
    display:inline-block;
    position:relative; overflow:visible;
    margin:0 auto 15px auto;
}
.myinfo1 .img_boxs a{
    display:block; width:35px; height:35px;
    background:url('../../images/sub/profile_my.png') no-repeat center / 15px #FFF;
    position:absolute; right:-10px; bottom:-10px;
    border:1px solid #E8EAED; border-radius:9999px;
    box-shadow:0 0 6px rgba(0, 0, 0, 0.1);
}
.myinfo1 .img_box{
    width:70px; height:70px;
    border-radius:9999px;
}
.myinfo1>a:last-of-type{
    display:block; line-height:38px;
    border-radius:9999px; margin:0 auto;
    font-size:14px; font-weight:500;
}
.myinfo1 h3{
    font-size:18px; font-weight:600;
    margin-bottom:10px;
}
aside ul{ padding:25px; }
aside ul li:not(:last-of-type){ margin-bottom:15px; }
aside ul li a{
    display:block; padding-left:40px;
    background-repeat:no-repeat;
    background-position:3% center;
    background-size:18px;

    font-size:14px; font-weight:500;
}
/*aside ul li a:hover,
aside ul li a.active{ font-weight:600; }*/
aside ul:first-of-type li:nth-of-type(1) a{ background-image:url('../../images/sub/aside_ico1.png'); }
aside ul:first-of-type li:nth-of-type(2) a{ background-image:url('../../images/sub/aside_ico2.png'); }
aside ul:last-of-type li:nth-of-type(1) a{ background-image:url('../../images/sub/aside_ico3.png'); }
aside ul:last-of-type li:nth-of-type(2) a{ background-image:url('../../images/sub/aside_ico4.png'); }
aside ul:last-of-type li:nth-of-type(3) a{ background-image:url('../../images/sub/aside_ico5.png'); }

aside ul:first-of-type li:nth-of-type(1) a:hover,
aside ul:first-of-type li:nth-of-type(1) a.active{ background-image:url('../../images/sub/aside_pk_ico1.png'); }
aside ul:first-of-type li:nth-of-type(2) a:hover,
aside ul:first-of-type li:nth-of-type(2) a.active{ background-image:url('../../images/sub/aside_pk_ico2.png'); }
aside ul:last-of-type li:nth-of-type(1) a:hover,
aside ul:last-of-type li:nth-of-type(1) a.active{ background-image:url('../../images/sub/aside_pk_ico3.png'); }
aside ul:last-of-type li:nth-of-type(2) a:hover,
aside ul:last-of-type li:nth-of-type(2) a.active{ background-image:url('../../images/sub/aside_pk_ico4.png'); }
aside ul:last-of-type li:nth-of-type(3) a:hover,
aside ul:last-of-type li:nth-of-type(3) a.active{ background-image:url('../../images/sub/aside_pk_ico5.png'); }


aside>ul>li a.nowActive{
	color:#FF176B;
}
aside ul:first-of-type li:nth-of-type(1) a.nowActive{ background-image:url('../../images/sub/aside_pk_ico1.png'); }
aside ul:first-of-type li:nth-of-type(2) a.nowActive{ background-image:url('../../images/sub/aside_pk_ico2.png'); }
aside ul:last-of-type li:nth-of-type(1) a.nowActive{ background-image:url('../../images/sub/aside_pk_ico3.png'); }
aside ul:last-of-type li:nth-of-type(2) a.nowActive{ background-image:url('../../images/sub/aside_pk_ico4.png'); }
aside ul:last-of-type li:nth-of-type(3) a.nowActive{ background-image:url('../../images/sub/aside_pk_ico5.png'); }

/*main*/
main{
    margin-left:5%; padding-top:30px;
    width:70%;
}
main>h2{
    font-size:25px; font-weight:600;
    margin-bottom:50px;
}
main h3, .formMy label{
    display:block; margin-bottom:10px;
    font-size:16px; font-weight:600;
}

/*form*/
.formMy>div{ width:49%; }
.formMy>div:not(:last-of-type), .formMy1, .formMy3{ margin-bottom:30px; }
.formMy input{
    height:50px; line-height:50px;
    padding:0 10px; border-radius:8px;
}
.formMy2{ display:flex; flex-wrap:wrap; }
.formMy2 div:nth-of-type(even){ margin-left:2%; }
.formMy2 input:not(#callMy1){ width:100%; }
.formMy3::after{
    content:''; display:block;
    clear:both;
}
.formMy3 input{ width:100%; }
/* .formMy3 input{ width:75%; }
.formMy3 button{
    width:23%; height:50px; float:right;
    margin-left:2%; border-radius:8px;
    font-size:14px; font-weight:500;
} */

/*my_btm*/
.my_btm{ margin-top:150px; }
.my_btns{
    display:flex; justify-content:flex-end;
    margin-top:15px;
}
.my_btns button{
    font-size:14px; font-weight:500;
    border-radius:8px;
}
.my_btm .main_btn{ width:150px; height:50px; }





/*----------------------------------------------------------------------
mypage1
*/
.formMy1>div{ display:flex; flex-wrap:wrap; align-items:center; }
.formMy1>div .img_box{
    width:70px; height:70px; margin-bottom:10px;
    justify-content:flex-start;
}
.formMy1>div div:last-of-type{ width:100%; }
.formMy1>div div:last-of-type::after{
    content:''; display:block;
    clear:both;
}
.formMy1>div div:last-of-type *:not(p){ float:left; }
.formMy1>div div:last-of-type p{
    font-size:14px; font-weight:500;
    margin-bottom:10px;
}
.formMy1>div div:last-of-type .imgCh{ border:1px solid #FF176B; }
.formMy1>div div:last-of-type .imgDe{ border:1px solid #E8EAED; margin-left:2%; }
.formMy1>div div:last-of-type button{
    width:49%; height:50px;
    border-radius:8px;
    font-size:14px; font-weight:500;
}

.formMy2 div:nth-of-type(3)::after{
    content:''; display:block;
    clear:both;
}
.formMy2 div:nth-of-type(3) button{ float:right; }
.formMy2 div:nth-of-type(3) select{
    width:15%; height:50px;
    border-radius:8px; float:left;
}
.formMy2 div:nth-of-type(3) #callMy1{
    float:left; width:58%;
    margin-left:2%;
}
.formMy2 div:nth-of-type(3) button{
    width:23%; height:50px; background-color:#F7F7F7;
    margin-left:2%; border-radius:8px;
    font-size:14px; font-weight:500;
}

/*----------------------------------------------------------------------
mypage2
*/
.formMy3 .img_box{ 
    width:100%; height:250px;
    border:1px solid #E8EAED; margin-bottom:20px;
}
.formMy2 .categorys{ margin-top:10px; }

.con_tabs{
    display:inline-flex; flex-wrap:wrap;
    margin-bottom:15px; border-radius:8px;
}
.con_tabs li{ position:relative; height:50px; }
.con_tabs li:not(:first-of-type){ margin-left:-2px; }
.con_tabs li:nth-of-type(1){ width:88px; }
.con_tabs li:nth-of-type(2){ width:100px; }
.con_tabs li:nth-of-type(3){ width:97px; }
.con_tabs li:nth-of-type(4){ width:77px; }
.con_tabs li:nth-of-type(5){ width:107px; }
.con_tabs input{
    appearance:none; cursor:pointer;
    outline:none;
}
.con_tabs label{
    display:block; line-height:50px; margin-bottom:0;
    padding:0 15px;
    position:absolute; left:0; top:0;
    font-size:14px; font-weight:500;
}
.con_tabs li:not(:first-of-type){ border-left:1px solid #E8EAED; }
.con_tabs li:first-of-type input:checked+label{ border-radius:8px 0 0 8px; }
.con_tabs li:last-of-type input:checked+label{ border-radius:0 8px 8px 0; }
.con_tabs input:checked+label{ z-index:9; border:1px solid #FF176B; }

/*----------------------------------------------------------------------
mypage3
mypage3-1
*/
.rder_btn{
    display:flex; justify-content:flex-end;
    margin-bottom:20px;
}
.rder_btn button{
    height:25px; padding:0 10px;
    border:1px solid #E8EAED;
    font-size:13px; font-weight:400;
}
.rder_btn button.active{
    background-color:#FF176B; border-color:#FF176B;
    color:#FFF;
}
.rder_btn button:first-of-type{ border-radius:5px 0 0 5px; }
.rder_btn button:last-of-type{ border-radius:0 5px 5px 0; }

.my_btms3 button:not(:first-of-type){ margin-left:10px; }
.my_btms3 .cancel_btn, .my_btms3 .dlt_btn, .my_btms3 .save_btn3,
.my_btms3 .chack_btn{ width:100px; height:50px; }

.viewBtn_modal{ max-width:400px; }
.view_btn{ background-color:#1B6CE2; color:#FFF; }

/*----------------------------------------------------------------------
mypage4
mypage4-1
*/
.sns_product{
    position:absolute; left:15px; top:15px;
    padding:0 15px; line-height:35px;
    border-radius:5px; color:#FFF;
    cursor:pointer; display:flex; align-items:center;
    font-size:14px; font-weight:600;
}
.sns_product img{ width:12px; margin-right:5px; }
.sns_product1{ background-color:#1B6CE2; }
.sns_product2{ background-color:#a445f5; }
.sns_product3{ background-color:#ff7911; }

.SnsCon_py{ position:relative; } 
.my_content .Snscon_py>li{
    display:flex; align-items:center;
    width:100%;
}
.Snscon_py>li .img_boxs{
    width:32%; max-height:320px;
    margin-bottom:0;
}
.Snscon_py>li .text_box{
    width:32%; height:auto;
    margin-left:3.5%; padding:0;
}
.Snscon_py>li .title{ margin-bottom:15px; }
.Snscon_py .SnsCon_ico{ right:34%; bottom:25%; }
.pay_wrap input{
    width:100%; height:50px; padding:0 10px;
    border-radius:8px;
}
.SnsCon_py .urHeart_btn{ position:absolute; right:0; bottom:0; }
.SnsCon_py .urHeart_btn .like_btn{ padding:0 15px; }

/*----------------------------------------------------------------------
mypage4-1_full
*/
.mypage_full main{ width:100%; margin-left:0; }
.mypage_full .my_product>ul>li{ width:23.875%; }
.mypage_full .my_product>ul>li:not(:nth-of-type(4n+1)){ margin-left:1.5%; }
.mypage_full .my_product>ul>li:not(:nth-of-type(-n+3)){ margin-top:0; }
.mypage_full .my_product>ul>li:not(:nth-of-type(-n+4)){ margin-top:60px; }

.mypage_full .Snscon_py>li .img_boxs{ width:23.875%; }
.mypage_full .Snscon_py>li .text_box{ width:50%; }
.mypage_full .Snscon_py>li .title{ margin-bottom:35px; }
.mypage_full .Snscon_py .SnsCon_ico{ right:48%; bottom:19%; }




/*----------------------------------------------------------------------
기본 pc 스타일
*/
@media screen and (max-width:1199px){
    .Snscon_py>li .img_boxs{ width:49%; }
    .Snscon_py>li .text_box{ width:47.5%; padding-right:3.5%; }
    .Snscon_py .SnsCon_ico{ right:4.5%; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(-n+2)){ margin-top:0; }
}
@media screen and (max-width:1110px) {
    .mypage_full .my_product>ul>li{ width:32%; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(4n+1)){ margin-left:0; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(3n+1)){ margin-left:2%; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(-n+4)){ margin-top:0; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(-n+3)){ margin-top:50px; }

    .mypage_full .Snscon_py>li .img_boxs{ width:32%; }
    .mypage_full .Snscon_py>li .text_box{ width:34%; }
    .mypage_full .Snscon_py>li .title{ margin-bottom:15px; }
    .mypage_full .Snscon_py .SnsCon_ico{ right:34%; bottom:25%; }
}
/*태블릿 스타일*/
@media screen and (max-width:1023px) {
    .formMy1>div div:first-of-type{ margin-bottom:10px; }
    .formMy3 .img_box{ height:170px; }
    .formMy2 div:nth-of-type(3) select{ width:18%; }
    .formMy2 div:nth-of-type(3) #callMy1{ width:55%; }
}
@media screen and (max-width:900px) {
    .mypage_full .my_product>ul>li{ width:48.5%; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(3n+1)){ margin-left:0%; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(2n+1)){ margin-left:3%; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(-n+3)){ margin-top:0; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(-n+2)){ margin-top:50px; }

    .mypage_full .Snscon_py>li .img_boxs{ width:48.5%; }
    .mypage_full .Snscon_py>li .text_box{ width:47.5%; }
    .mypage_full .Snscon_py>li .title{ margin-bottom:15px; }
    .mypage_full .Snscon_py .SnsCon_ico{ right:4.5%; }
}
@media screen and (max-width:860px) {
    aside{ display:none; }
    main{ margin-left:0; width:100%; }
    main>h2{ font-size:22px; } 
}
@media screen and (max-width:850px) {
    .mypage_wrap{ margin:130px auto 120px auto; }
}
@media screen and (max-width:767px) {
    .my_btm{ margin-top:130px; }
}
@media screen and (max-width:599px) {
    .formMy>div{ width:100%; }
    .formMy2 div:nth-of-type(even){ margin-left:0; }
    .formMy3 .img_box{ height:230px; }
}
@media screen and (max-width:550px) {
    .my_content .Snscon_py>li{ flex-flow:column; }
    .Snscon_py>li .img_boxs{ width:100%; }
    .Snscon_py>li .text_box{
        width:100%; padding:15px 20px;
        margin-left:0;
    }
    .Snscon_py .SnsCon_ico{ bottom:20px; }

    .mypage_full .my_product>ul>li{ width:100%; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(2n+1)){ margin-left:0; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(-n+2)){ margin-top:0; }
    .mypage_full .my_product>ul>li:not(:nth-of-type(-n+1)){ margin-top:30px; }

    .mypage_full .Snscon_py>li .img_boxs{ width:100%; }
    .mypage_full .Snscon_py>li .text_box{ width:100%; }
    .mypage_full .Snscon_py>li .title{ margin-bottom:15px; }
    .mypage_full .Snscon_py .SnsCon_ico{ bottom:20px; }
}
@media screen and (max-width:530px) {
    .con_tabs{ width:100%; }
    .con_tabs li:nth-of-type(-n+3){ width:33.33%; border-bottom:1px solid #E8EAED; }
    .con_tabs li:nth-last-of-type(-n+2){ width:50%; }
    .con_tabs li:not(:first-of-type){ border-left:0; margin-left:0; }
    .con_tabs li:not(:nth-of-type(3n+1)){ border-left:1px solid #E8EAED; }
    .con_tabs label{
        padding:0; width:100%;
        text-align:center;
    }
    .con_tabs li:first-of-type input:checked+label{ border-radius:8px 0 0 0; }
    .con_tabs li:nth-of-type(3) input:checked+label{ border-radius:0 8px 0 0; }
    .con_tabs li:nth-of-type(4) input:checked+label{ border-radius:0 0 0 8px; }
    .con_tabs li:last-of-type input:checked+label{ border-radius:0 0 8px 0; }
    /*
    .con_tabs li:nth-of-type(-n+3){ width:33.33%; border-bottom:1px solid #E8EAED; }
    .con_tabs li:not(:first-of-type) label{ border-left:0; }
    .con_tabs li:not(:nth-of-type(3n+1)){ border-left:1px solid #E8EAED; }
    .con_tabs label{
        padding:0; width:100%;
        text-align:center;
    }*/
}
@media screen and (max-width:500px) {
    main>h2{ font-size:20px; } 
    .formMy1>div div:last-of-type button,
    .formDate input[type="date"], .formDate button{ height:45px; }
    .date_btns label{ line-height:45px; }
    .formMy>div:not(:last-of-type), .formMy1, .formMy3{ margin-bottom:15px; }
    .formMy3 .img_box{ height:200px; }
    .SnsCon_py .urHeart_btn{ position:static; width:100%; }

@media screen and (max-width:400px) {
    main>h2{ font-size:18px; margin-bottom:40px; } 
    .formMy1>div div:last-of-type button,
    .formMy2 div:nth-of-type(3) button,
    .sns_product, .con_tabs label,
    .my_btm .main_btn{ font-size:13px; }
    .my_btm{ margin-top:100px; }
    .coupons li strong{ font-size:15px; }
}