.mypage{}

.mypage .form-box {border-radius:10px;border:1px solid #CCC;}


.mypage .box{display: flex;gap:80px;justify-content: space-between;}
.mypage .box .left{width:400px;}
.mypage .box .left .inbox{position: sticky;top:180px;}
.mypage .box .left h3{font-size:28px;font-weight:700;padding-bottom:15px;border-bottom:2px solid #111;}
.mypage .box .left h3 .my-class {display:inline-block;margin-right:15px;font-size: 18px;font-weight: 700;color: #FFF;padding:6px 9px;border-radius:5px;vertical-align: middle;}
.mypage .box .left h3 .my-class.full {background-color:#F6387E;}
.mypage .box .left h3 .my-class.associate {background-color:#0063aa;}
.mypage .box .left p{margin-top:15px;font-size: 18px;font-weight: 500;letter-spacing: -0.45px;color: #787878;}
.mypage .box .left .info-box{margin-top:30px;}
.mypage .box .left .info-box dl{}
.mypage .box .left .info-box dl dt{width:60px;}
.mypage .box .left .info-box dl dt span{position:relative;display: inline-block;padding-left:28px;font-size:18px;line-height:35px;font-weight:500;color: #707070;}
.mypage .box .left .info-box dl dt span::before{content: "";position: absolute;top:7px;left:0;width:20px;height:20px;}
.mypage .box .left .info-box dl dt span.icon01:before{background: url(/_public/images2/icon/ico_mypage01.svg) no-repeat;background-size: cover;}
.mypage .box .left .info-box dl dt span.icon02:before{background: url(/_public/images2/icon/ico_mypage02.svg) no-repeat;background-size: cover;}
.mypage .box .left .info-box dl dt span.icon03:before{background: url(/_public/images2/icon/ico_mypage03.svg) no-repeat;background-size: cover;}
.mypage .box .left .info-box dl dt span.icon04:before{background: url(/_public/images2/icon/ico_mypage04.svg) no-repeat;background-size: cover;}
.mypage .box .left .info-box dl dd{padding: 0 0 15px 75px;font-size: 18px;line-height:35px;font-weight: 500;color:#333;}
.mypage .box .left .info-box dl dd em {display:inline-block;margin-left:10px;padding:0px 14px;border-radius: 5px;background: #F5F5F5;font-size: 16px;height:35px;line-height: 35px;}
.mypage .box .left .info-box dl dd em span {display:inline-block;padding-right:10px;margin-right:8px;color:#606060;font-weight:400;position:relative;}
.mypage .box .left .info-box dl dd em span::before {content:"";display:inline-block;width:2px;height:12px;background-color:#D9D9D9;position:absolute;top:11px;right:0;}
.mypage .box .right{width:660px;}
.mypage .box .right h3{font-size: 24px;font-weight: bold;letter-spacing: -0.48px;color: #202020;padding-bottom: 20px;border-bottom: 2px solid #1c275f;margin-bottom: 25px;}

.mypage .myinfo section .toggle-btn{position: relative;display:block;text-align:left;width:100%;font-size: 24px;font-weight: bold;letter-spacing: -0.48px;color: #202020;line-height: 1;padding-bottom: 15px;}
.mypage .myinfo section .toggle-btn:after{content: "";position:absolute;top:-8px;right:8px;width:40px;height:40px;background: url(/_public/images2/icon/toggle_arrow2.svg) no-repeat;background-size: cover;transform: rotate(180deg);}
.mypage .myinfo section .toggle-btn.on:after{transform: rotate(0deg);}
.mypage .myinfo section{}
.mypage .myinfo section dl{}
.mypage .myinfo section dl dt{font-size: 18px;font-weight: bold;letter-spacing: -0.36px;color: #202020;}
.mypage .myinfo section dl dd{margin-top: 7px;}
.mypage .myinfo section dl dd + dt{margin-top: 30px;}
.mypage .myinfo .pwd-wrap{position: relative;}
.mypage .myinfo .pwd-wrap input{width:100%;height:55px;  border-radius: 5px;border: solid 1px #202020;padding:0 60px 0 20px;font-size: 16px;font-weight: 500;color: #202020;}
.mypage .myinfo .pwd-wrap button{position: absolute;top:15px;right:20px;display: block;width:22px;height:22px;background: url(/_public/images2/icon/pwd_view.svg) no-repeat;background-size: cover;}
.mypage .myinfo .pwd-wrap button.on{background: url(/_public/images2/icon/pwd_view_on.svg) no-repeat;background-size: cover;}
.mypage .myinfo section .noti-box{position:relative;margin-top:35px;padding:20px 20px 20px 50px;border-radius: 10px;background: #f2f9ff;font-size: 16px;font-weight: 500;line-height: 1.5;letter-spacing: -0.32px;color: #1087f5;}
.mypage .myinfo section .noti-box:before{content: "";position: absolute;top:21px;left:20px;width:20px;height:20px;background: url(/_public/images2/icon/noti_icon02.svg) no-repeat;background-size: cover;}
.mypage .myinfo section + section{margin-top:100px;}
.mypage .myinfo .btn-box{margin-top:40px;display: flex;justify-content: flex-end;gap:20px;}
.mypage .myinfo .btn-box button{width:270px;height:55px;border-radius: 5px;background: #163182; font-size: 18px;font-weight: 500;letter-spacing: -0.36px;color: #fff;line-height: 1;}


.receipt {}
.receipt .rec-res-wrap {display:flex;flex-direction:column;gap:20px;}
.receipt .rec-res-wrap .rr-box {width:100%;border-radius: 10px;border: 1px solid #CCC;padding:40px;position:relative;}
.receipt .rec-res-wrap .rr-box h4 {font-size: 25px;font-weight: 600;margin-bottom:30px;}
.receipt .rec-res-wrap .rr-box dl {}
.receipt .rec-res-wrap .rr-box dl dt {float:left;font-size: 18px;font-weight: 500;color:#606060;}
.receipt .rec-res-wrap .rr-box dl dd {font-size: 18px;padding:0 0 8px 45px;}
.receipt .rec-res-wrap .rr-box dl dd:last-child {padding-bottom:0;}
.receipt .rec-res-wrap .rr-box .btn-box {position:absolute;bottom:40px;right:40px;}

.receipt2{}
.receipt2 .info-box{padding: 40px;border-radius: 5px;border: solid 1px #ccc;background:#f5f5f5;}
.receipt2 .info-box h4{font-size: 25px;font-weight: bold;line-height: 1.12;letter-spacing: -0.63px;color: #202020;}
.receipt2 .info-box ul{margin-top:20px;}
.receipt2 .info-box ul li{padding:12px 0 12px 200px;position: relative;}
.receipt2 .info-box ul li h5{position:absolute;left:0;font-size: 20px;font-weight: 600;letter-spacing: -0.5px;color: #202020;}
.receipt2 .info-box ul li h5 i{color: #003cb2;}
.receipt2 .info-box ul li strong {display:inline-block;font-size:20px;font-weight:600;}
.receipt2 .info-box ul li .bank{padding: 12px 25px;border-radius: 5px;background: #fff; font-size: 18px;color:#606060;}
.receipt2 .info-box ul li .bank strong{display:inline-block; font-weight: 600;margin-right:15px;}
.receipt2 .info-box ul li .bank em{margin-right:20px;display: inline-block;font-weight: 700;color:#111;}
/* .receipt2 .info-box ul li p{margin-top:10px;position: relative;padding-left: 24px;  font-size: 18px;font-weight: normal;line-height: 1.56;letter-spacing: -0.45px;color: #202020;}
.receipt2 .info-box ul li p:before{content: "";position: absolute;top:11px;left:10px;width:6px;height:6px;border-radius: 100%;background: #003cb2;}
.receipt2 .info-box ul li p span{color: #626272;}
.receipt2 .info-box ul li p + p{margin-top:3px;} */
.receipt2 .info-box .info-txt{border-radius: 5px;background: #fff;padding:20px 25px;}
.receipt2 .info-box .info-txt p{position: relative;padding-left:16px;font-size: 18px;font-weight: normal;line-height: 1.56;letter-spacing: -0.45px;color: #202020;}
.receipt2 .info-box .info-txt p + p {margin-top:10px;}
.receipt2 .info-box .info-txt p:before {content: "";position: absolute;top:9px;left:0;width:6px;height:6px;background-color:#0063AA;border-radius:100%;}
.receipt2 .info-box .info-txt p strong {font-weight:600;font-size:inherit;}
.receipt2 .info-box .info-txt p span {display:inline-block;margin-top:5px;font-size: 17px;font-weight: 500;color:#606060;position:relative;}
.receipt2 .info-box .info-txt p span em {display:inline-block;color:#333;margin-left:5px;}
.receipt2 .info-box .info-txt p span + span {margin-left:10px;padding-left:12px;}
.receipt2 .info-box .info-txt p span + span::before {content: "";width:2px;height:14px;background-color:#ccc;position:absolute;top:6px;left:0;}
.receipt2 .table-box2{margin-top:60px;}
.receipt2 .table-box2 table{border-top:2px solid #111;}
.receipt2 .table-box2 table thead tr th{padding:22px 10px;font-size: 18px;font-weight: bold;text-align: center;border-bottom: 1px solid #ccc;}
/* .receipt2 .table-box2 table tbody tr th{padding:20px 10px;font-size: 18px;font-weight: 500;letter-spacing: -0.45px;text-align: center;color: #202020;background: #f8f9ff;border-bottom: 1px solid #dedede;} */
.receipt2 .table-box2 table tbody tr td{padding:20px 10px;font-size: 18px;text-align:center;border-bottom: 1px solid #ccc;}
.receipt2 .table-box2 table tbody tr td:nth-child(1) {width:10%;}
.receipt2 .table-box2 table tbody tr td:nth-child(2) {width:10%;font-weight:500;}
.receipt2 .table-box2 table tbody tr td:nth-child(3) {width:15%;}
.receipt2 .table-box2 table tbody tr td:nth-child(4) {width:10%;}
.receipt2 .table-box2 table tbody tr td:nth-child(6) {width:220px;}
.receipt2 .table-box2 table tbody tr td:nth-child(7) {width:15%;}
.receipt2 .table-box2 table tbody tr td.state {font-weight: 600;}
.receipt2 .table-box2 table tbody tr td.state.on {color:#0063aa;}
.receipt2 .table-box2 table tbody tr td.state.non {color:#F6387E;}
/* .receipt2 .table-box2 table tbody tr td span{display: inline-block;font-weight: 500;}
.receipt2 .table-box2 table tbody tr td span.case1{color:#202020;}
.receipt2 .table-box2 table tbody tr td span.case2{color:#fc7c5a;} */
/* .receipt2 .table-box2 table tbody tr td a{position:relative;display: inline-block;padding:0 45px 0 20px;line-height: 39px;font-size: 16px;font-weight: 500;letter-spacing: -0.4px;color: #fff; border-radius: 5px;background-color: #003cb2;}
.receipt2 .table-box2 table tbody tr td a:after{content: "";position: absolute;top:10px;right:20px;display:block;width:20px;height:20px;background: url(/_public/images2/icon/ico_dwn.svg) no-repeat;background-size: cover;} */




@media all and (max-width:1400px) {

}


@media all and (max-width:1280px) {

  .mypage .box{gap:40px;}
    .mypage .box .right{width:calc(100% - 390px);}
    .mypage .box .left h3{font-size:26px;}
    .mypage .box .left .info-box{margin-top:25px;}

    .receipt2 .name-box{margin-top:30px;}
    .receipt2 .name-box .txt1{font-size:18px;}
    .receipt2 .name-box .txt1 strong{font-size:18px;}
    .receipt2 .name-box .txt2{font-size:18px;}
    .receipt2 .name-box .txt2 em{font-size:16px;}
    .receipt2 .info-box{padding:30px;}
    .receipt2 .info-box h4{font-size:22px;}
    .receipt2 .info-box ul li{padding:12px 0 12px 160px;}
    .receipt2 .info-box ul li h5{font-size:18px;}
    .receipt2 .info-box ul li strong {font-size:18px;}
    .receipt2 .info-box ul li .table-box table thead tr th{font-size:16px;}
    .receipt2 .info-box ul li .table-box table tbody tr th{font-size:14px;}
    .receipt2 .info-box ul li .table-box table tbody tr td{font-size:14px;}
    .receipt2 .info-box ul li p{font-size:16px;}
    .receipt2 .info-box ul li p:before{top:9px;}

}


@media all and (max-width:1024px) {

    .mypage .box{flex-direction:column;}
    .mypage .box .left{width:100%;}
    .mypage .box .left h3{font-size:22px;}
    .mypage .box .left p{font-size:16px;margin-top:10px;}
    .mypage .box .left .info-box{margin-top:20px;}
    .mypage .box .left .info-box dl dt span{font-size:17px}
    .mypage .box .right{width:100%;}
    .mypage .box .left .info-box dl dd{padding:0 0 10px 75px;font-size:17px;}
    .mypage .box .left .info-box dl dd em {font-size:17px;}
    .mypage .box .right h3{font-size:20px;padding-bottom: 15px;}

    .mypage .myinfo section .toggle-btn{font-size:20px;padding-bottom: 10px;}
    .mypage .myinfo section .toggle-btn:after{width:30px;height:30px;top:-5px;right:5px;}
    .mypage .myinfo section dl dt{font-size:16px;}
    .mypage .myinfo section dl dd .pwd-wrap input{height:50px;font-size: 15px;}
    .mypage .myinfo section dl dd .pwd-wrap button{top:13px;}
    .mypage .myinfo section .noti-box{margin-top:25px;font-size: 14px;}
    .mypage .myinfo section .noti-box:before{width:18px;height:18px;}
    .mypage .myinfo .btn-box{margin-top:30px;}
    .mypage .myinfo .btn-box button{height:50px;font-size: 16px;}

    .receipt .rec-res-wrap .rr-box {padding:30px 35px;}
    .receipt .rec-res-wrap .rr-box h4 {font-size:22px;margin-bottom:20px;}
    .receipt .rec-res-wrap .rr-box dl dt {font-size:16px;}
    .receipt .rec-res-wrap .rr-box dl dd {font-size:16px;padding:0 0 8px 40px;}
    .receipt .rec-res-wrap .rr-box .btn-box {bottom:30px;right:35px;}

    .receipt2 .name-box{margin-top:20px;gap:20px;}
    .receipt2 .name-box .txt1{font-size:16px;}
    .receipt2 .name-box .txt1 strong{font-size:16px;}
    .receipt2 .name-box .txt2{position:relative;top:-2px;font-size:16px;}
    .receipt2 .name-box .txt2 em{font-size:14px;height:26px;}
    .receipt2 .info-box{padding:20px;}
    .receipt2 .info-box h4{font-size:20px;}
    .receipt2 .info-box ul li{padding:10px 0 10px 120px;}
    .receipt2 .info-box ul li h5 {font-size: 16px;}
    .receipt2 .info-box ul li .table-box table thead tr th{font-size:15px;}
    .receipt2 .info-box ul li .bank{font-size:16px;}
    .receipt2 .info-box ul li p{font-size:14px;padding-left: 15px;}
    .receipt2 .info-box ul li p:before{left:5px;top:8px;width:4px;height:4px;}
    .receipt2 .info-box .info-txt p{font-size:16px;padding-left:14px;}
    .receipt2 .info-box .info-txt p:before {top: 7px;}
    .receipt2 .info-box .info-txt p span {font-size:16px;}
    .receipt2 .info-box .info-txt p span + span::before {top: 5px;}
    .receipt2 .table-box2 .scroll{overflow-x: auto;}
    /* .receipt2 .table-box2 table{width:1100px;} */
    .receipt2 .table-box2 table thead tr th{padding:15px 5px;font-size:18px;}
    .receipt2 .table-box2 table tbody tr th{padding:15px 5px;font-size:16px;}
    .receipt2 .table-box2 table tbody tr td{padding:15px 5px;font-size:16px;}
    /* .receipt2 .table-box2 table tbody tr td a{padding:0 30px 0 10px;font-size:14px;}
    .receipt2 .table-box2 table tbody tr td a:after{width:18px;height:18px;right:10px;} */




}


@media all and (max-width:768px) {

  .mypage .box .left{position: relative;top:0;}
    .mypage .box .left h3{font-size:20px;}
    .mypage .box .left p{font-size:15px;}
    .mypage .box .left .info-box dl.dl-type1 dt {float:left;}
    .mypage .box .left .info-box dl dt span{font-size:15px;line-height:30px;padding-left: 25px;}
    .mypage .box .left .info-box dl dt span:before{top:6px;width:18px;height:18px;}
    .mypage .box .left .info-box dl dd{padding:0 0 10px 65px;font-size:15px;line-height:30px;}
    .mypage .box .left .info-box dl dd em {margin-left:6px;padding:0px 10px;font-size:15px;height:30px;line-height:30px;}
    .mypage .box .left .info-box dl dd em span {}
    .mypage .box .right{width:100%;padding-top:40px;border-top:1px solid #ccc;}
    .mypage .box .right h3{font-size:18px;padding-bottom: 10px;}

    .mypage .myinfo section dl dt{font-size:14px;}
    .mypage .myinfo section dl dd .pwd-wrap input{height:45px;font-size: 14px;}
    .mypage .myinfo section dl dd .pwd-wrap button{top:11px;width:20px;height:20px;}
    .mypage .myinfo section .noti-box{margin-top:25px;font-size: 14px;}
    .mypage .myinfo section .noti-box:before{width:18px;height:18px;}
    .mypage .myinfo .btn-box{margin-top:30px;}
    .mypage .myinfo .btn-box button{width:100%;}

    .receipt .rec-res-wrap .rr-box {padding:25px;}
    .receipt .rec-res-wrap .rr-box h4 {font-size:18px;margin-bottom: 15px;}
    .receipt .rec-res-wrap .rr-box dl dt {font-size:14px;}
    .receipt .rec-res-wrap .rr-box dl dd {font-size:14px;padding:0 0 5px 35px;}
    .receipt .rec-res-wrap .rr-box .btn-box {position:relative;bottom:auto;right:auto;margin-top:25px;}
    .receipt .rec-res-wrap .rr-box .btn-box .btn-default {width:100%;}

    .receipt2 .name-box{gap:10px;}
    .receipt2 .name-box .txt1{font-size:15px;}
    .receipt2 .name-box .txt1 strong{font-size:15px;}
    .receipt2 .name-box .txt2{position:relative;top:-2px;font-size:15px;}
    .receipt2 .name-box .txt2 em{font-size:13px;height:26px;}
    .receipt2 .info-box h4{font-size:18px;}
    .receipt2 .info-box ul li{padding:15px 0;}
    .receipt2 .info-box ul li h5{position:relative;margin-bottom:10px;font-size:16px;}
    .receipt2 .info-box ul li .table-box table thead tr th{font-size:15px;}
    .receipt2 .info-box ul li .bank{font-size:15px;padding:10px 20px;}
    .receipt2 .info-box ul li .bank strong {font-size: 15px;display:block;}
    .receipt2 .info-box ul li .bank em {display:block;}
    .receipt2 .info-box .info-txt{padding:15px;}
    .receipt2 .info-box .info-txt p {font-size:15px;padding-left:11px;}
    .receipt2 .info-box .info-txt p:before {width:5px;height:5px;}
    .receipt2 .info-box .info-txt p strong {font-size:15px;}
    .receipt2 .info-box .info-txt p span {display:block;font-size:14px;margin-top: 3px;}
    .receipt2 .info-box .info-txt p span + span {padding-left:0;margin-left:0;}
    .receipt2 .info-box .info-txt p span + span:before {display:none;}
    .receipt2 .table-box2 table{width:800px;}
    .receipt2 .table-box2 table thead tr th {font-size: 16px;}



}