/*------------------- developed by JJD front-end developer ------------------*/
/*-------------------------------Apr 2022--------------------------------*/
/*------------------- developed by JJD front-end developer ------------------*/
/*-------------------------------Dec 2020--------------------------------*/
.beforeHover {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.3s;
}
.afterHover {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.transition {
  transition: all 0.3s;
}
@media (min-width: 1600px) {
  .chOutWrap {
    gap: 1.83vw;
    margin-top: 2.19vw;
  }
  .chOutL {
    width: calc(70% - 1.83vw);
    gap: 1.09vw;
  }
  .chOutCart {
    border-radius: 1.09vw;
    border-width: 0.07vw;
    box-shadow: 0 0 0.43vw 0.07vw #00000017;
    font-size: 1.02vw;
  }
  .chOutCart .headblock,
  .chOutCart .bodyBlock {
    border-width: 0.07vw;
  }
  .chOutCart .colblock {
    padding: 1.46vw;
  }
  .chOutCart .colblock.nameSec {
    gap: 1.83vw;
  }
  .chOutCart .singRow {
    font-size: 1.17vw;
  }
  .chOutCart .itemImg {
    width: 5.85vw;
    height: 5.85vw;
    border-radius: 0.73vw;
    padding: 0.73vw;
  }
  .chOutCart .contblock {
    gap: 0.73vw;
  }
  .chOutCart .contblock .txtIn {
    font-size: 0.87vw;
  }
  .chOutCart select {
    border-radius: 5px;
    border-width: 0.07vw;
    padding: 0.21vw 0.36vw;
    font-size: 1.02vw;
  }
  .chOutCart .dleteBtn {
    width: 2.34vw;
    height: 2.34vw;
    font-size: 1.31vw;
    border-radius: 0.36vw;
  }
  .chOutCart .footblock {
    gap: 1.09vw;
    padding: 1.46vw 2.19vw;
  }
  .chOutCart .footblock .inputOne {
    padding: 0.73vw 1.09vw;
    width: 14.64vw;
  }
  .chOutR {
    border-radius: 1.09vw;
    border-width: 0.07vw;
    box-shadow: 0 0 0.43vw 0.07vw #00000017;
    font-size: 1.02vw;
  }
  .chOutProDe {
    top: 7.68vw;
  }
  .chOutProDe .prodeHead {
    padding: 1.09vw 2.19vw;
    border-width: 0.07vw;
  }
  .chOutProDe .prodePrice {
    gap: 1.46vw;
    padding: 2.19vw;
    font-size: 1.02vw;
    border-width: 0.07vw;
  }
  .chOutProDe .prodeTot {
    border-width: 0.07vw;
    padding-top: 1.09vw;
  }
  .chOutProDe .prodeShpng {
    font-size: 0.87vw;
    border-radius: 0.36vw;
    padding: 0.73vw;
  }
  .chOutProDe .prodePriceIn.couponBlock {
    border-width: 0.07vw;
    padding-top: 1.09vw;
  }
  .chOutProDe .prodePriceIn.couponBlock .couponBlockL {
    gap: 0.73vw;
    font-size: 0.87vw;
  }
  .chOutProDe .prodePriceIn.couponBlock .couponSec {
    border-width: 0.07vw;
    border-radius: 0.36vw;
    font-size: 0.8vw;
    padding: 0.36vw;
  }
  .chOutProDe .prodePriceIn.couponBlock .couponRem {
    border-radius: 0.36vw;
    padding: 0.58vw 0.73vw;
    font-size: 0.87vw;
  }
  .chOutProDe .prodeFoot {
    padding: 1.46vw;
  }
  .chOutProDe .prodeFoot .btnOne {
    padding: 1.09vw;
  }
  .chOutBlock {
    border-radius: 1.09vw;
    border-width: 0.07vw;
    box-shadow: 0 0 0.43vw 0.07vw #00000017;
    font-size: 1.02vw;
  }
  .chOutBlockIn {
    padding: 2.19vw;
  }
  .chOutHead {
    gap: 0.36vw;
  }
  .chOutBlock.isCompleted .chOutHead {
    padding-left: 2.92vw;
  }
  .chOutHead .iconBlock {
    font-size: 1.75vw;
  }
  .chOutHead .mainHead {
    font-size: 1.17vw;
  }
  .chOutAdrs {
    padding: 2.19vw;
    border-width: 0.07vw;
  }
  .chOutAdrsIn {
    padding: 1.46vw 0;
    padding-bottom: 0.36vw;
    border-width: 0.07vw;
  }
  .chOutAdrsRad {
    font-size: 1.02vw;
    padding-bottom: 1.09vw;
  }
  .chOutAdrsRad .radRound {
    width: 1.17vw;
    height: 1.17vw;
    border-width: 0.14vw;
    margin-right: 1.09vw;
    top: 0.29vw;
  }
  .chOutAdrsRad .radRound::after {
    width: 0.58vw;
    height: 0.58vw;
  }
  .chOutAdrsRad .dataBlock,
  .chOutAdrsRad .dataBlockIn {
    gap: 0.73vw;
  }
  .chOutAdrsRad .dataBlock .adrsHead {
    font-size: 1.17vw;
  }
  .chOutAdrsRad .dataBlock .adrsType {
    padding: 0.36vw 0.73vw;
    border-radius: 0.36vw;
    font-size: 0.87vw;
  }
  .chOutAdrs .adrsEdit {
    width: 2.34vw;
    height: 2.34vw;
    border-radius: 0.36vw;
    top: 0.36vw;
    font-size: 1.31vw;
  }
  .chOutFormIn {
    padding: 2.19vw;
    border-width: 0.07vw;
    gap: 1.83vw;
  }
  .chOutFormG {
    width: calc((100% - 1.83vw) / 2);
  }
  .chOutForm .labelName {
    margin-bottom: 1.09vw;
  }
  .chOutForm .labelName span {
    margin-left: 0.73vw;
  }
  .chOutFormG3 {
    width: calc((100% - 3.66vw) / 3);
  }
  .chOutFormGFull {
    width: 100%;
  }
  .chOutPay .chOutAdrsRad .radRound {
    top: 0.21vw;
  }
  .chOutPayBlock {
    padding-top: 0.73vw;
    font-size: 1.02vw;
  }
  .chOutBank {
    margin-top: 1.09vw;
    gap: 0.73vw;
    font-size: 1.17vw;
  }
  .chOutFoot {
    gap: 1.09vw;
  }
  .sucsWrap {
    padding: 2.92vw 5.85vw;
    border-radius: 1.09vw;
    box-shadow: 0 0 0.36vw 0.07vw #00000030;
  }
  .sucsIn {
    border-width: 0.07vw;
    gap: 3.66vw;
    padding: 3.66vw 0;
  }
  .sucsData {
    font-size: 1.02vw;
    gap: 0.73vw;
  }
  .sucsData .sIcon {
    width: 7.32vw;
    height: 7.32vw;
    font-size: 4.02vw;
  }
  .sucsData .headText {
    font-size: 1.75vw;
  }
  .chOrderWrap {
    padding: 2.19vw 3.66vw;
    font-size: 1.17vw;
    border-radius: 0.73vw;
  }
  .chOrderData {
    gap: 0.73vw;
  }
  .chOrderData span {
    margin-left: 0.36vw;
  }
  .billWrap {
    gap: 3.66vw;
    font-size: 1.17vw;
  }
  .billIn {
    width: calc((100% - 3.66vw) / 3);
    gap: 0.73vw;
  }
  .billHead {
    font-size: 1.46vw;
  }
  .billIn ul {
    gap: 0.36vw;
  }
  .billIn ul li {
    padding-left: 2.19vw;
  }
  .billIn ul li::after {
    width: 0.58vw;
    height: 0.58vw;
    top: 0.58vw;
  }
  .payInfWrap {
    font-size: 1.17vw;
  }
  .payInfIn {
    gap: 0.73vw;
  }
  .payInfIn .tltleblock {
    font-size: 1.46vw;
  }
  .payInfIn .payStatus {
    font-size: 1.02vw;
    border-radius: 0.36vw;
    padding: 0.58vw 1.46vw;
  }
  .trackodrBlock {
    font-size: 1.17vw;
  }
  .trackodrBlock li {
    gap: 1.09vw;
  }
  .trackodrBlock .trackblock {
    width: 2.19vw;
    height: 2.19vw;
  }
  .trackodrBlock li::after {
    top: 1.09vw;
    height: 0.14vw;
  }
  .purProIn {
    padding: 2.19vw 0;
    font-size: 1.17vw;
    border-width: 0.07vw;
  }
  .purProBlock {
    gap: 2.19vw;
  }
  .purProIn .proImg {
    width: 10.98vw;
    height: 10.98vw;
    border-radius: 0.58vw;
  }
  .purProIn .dataSec {
    gap: 2.19vw;
  }
  .purProIn .nameSec {
    gap: 0.36vw;
    font-size: 1.02vw;
  }
  .purProIn .nameSecHead {
    font-size: 1.46vw;
  }
  .purProIn .detailSec {
    gap: 0.36vw;
  }
  .chOutFormFoot {
    padding: 2.19vw;
    gap: 1.09vw;
  }
  .chOutAdrsRad .dataBlock .adrsHead span {
    width: 3.66vw;
  }
  .chOutAdrsRad .dataBlock .adrsHead span img {
    width: 100%;
  }
}
@media (max-width: 1300px) {
  .sucsData {
    max-width: 75%;
  }
}
@media (max-width: 1024px) {
  .chOutWrap {
    gap: 15px;
  }
  .chOutL,
  .chOutR {
    width: 100%;
  }
  .chOutProDe {
    position: static;
    top: auto;
  }
  .sucsWrap {
    padding: 30px;
  }
  .sucsIn {
    gap: 30px;
    padding: 30px 0;
  }
  .sucsData .sIcon {
    width: 75px;
    height: 75px;
    font-size: 35px;
  }
  .sucsData .headText {
    font-size: 20px;
  }
  .chOrderWrap {
    font-size: 14px;
    padding: 15px 30px;
  }
  .billWrap {
    gap: 30px;
    font-size: 14px;
  }
  .billIn {
    width: calc( (100% - 30px) / 2 );
  }
  .billHead {
    font-size: 18px;
  }
  .payInfWrap {
    font-size: 14px;
  }
  .trackodrBlock {
    font-size: 14px;
  }
  .trackodrBlock .trackblock {
    width: 15px;
    height: 15px;
  }
  .trackodrBlock li::after {
    width: 85%;
    top: 6px;
    right: 58%;
  }
  .purProIn {
    font-size: 14px;
    padding: 15px 0;
  }
  .purProIn .proImg {
    width: 120px;
    height: 120px;
  }
  .purProIn .dataSec {
    gap: 15px;
  }
  .purProIn .nameSec {
    font-size: 13px;
  }
  .purProIn .nameSecHead {
    font-size: 18px;
  }
}
@media (max-width: 992px) {
  .chOutWrap {
    font-size: 14px;
  }
  .chOutCart .colblock {
    padding: 10px;
  }
  .chOutCart .colblock.nameSec {
    gap: 15px;
  }
  .chOutCart .singRow {
    font-size: 14px;
  }
  .chOutCart .itemImg {
    width: 60px;
    height: 60px;
    padding: 6px;
  }
  .chOutCart .dleteBtn {
    width: 25px;
    height: 25px;
    font-size: 16px;
  }
  .chOutCart .footblock {
    padding: 15px;
  }
  .chOutProDe .prodePrice {
    padding: 15px 30px;
    gap: 15px;
  }
  .chOutProDe .prodeFoot {
    padding: 15px 30px;
  }
}
@media (max-width: 768px) {
  .chOutFormG,
  .chOutFormG3 {
    width: 100%;
  }
  .chOutFormIn {
    padding: 15px;
  }
  .chOutBank {
    font-size: 13px;
  }
  .chOutAdrsRad .dataBlock .adrsHead {
    font-size: 14px;
  }
  .chOutBlockIn {
    padding: 15px;
  }
  .chOutAdrs {
    padding: 15px;
  }
  .chOutAdrsIn {
    padding-top: 15px;
  }
  .chOutFormIn {
    gap: 15px;
  }
  .chOutHead .mainHead {
    font-size: 14px;
  }
  .sucsWrap {
    padding: 15px;
  }
  .sucsData {
    max-width: 100%;
  }
  .sucsIn {
    padding: 15px 0;
  }
  .payInfIn .tltleblock {
    font-size: 18px;
  }
  .purProIn {
    flex-wrap: wrap;
  }
  .purProBlock,
  .purProIn .priceBlock {
    width: 100%;
  }
}
@media (max-width: 576px) {
  .chOutCart .headblock {
    display: none;
  }
  .chOutCart .singRow {
    flex-wrap: wrap;
  }
  .chOutCart .colblock.nameSec {
    width: 100%;
    flex: 0 0 100%;
  }
  .chOutCart .footblock .btnTwo {
    margin-left: 0;
  }
  .chOutCart .footblock [class^='btn'] {
    width: 50%;
  }
  .chOutProDe .prodeHead,
  .chOutProDe .prodePrice,
  .chOutProDe .prodeFoot {
    padding: 15px;
  }
  .chOutBlockIn {
    flex-wrap: wrap;
    gap: 15px;
  }
  .chOutAdrsRad .dataBlock .adrsHead {
    flex-wrap: wrap;
  }
  .chOutFormFoot {
    padding: 15px;
  }
  .chOutFoot [class^="btn"] {
    width: 50%;
  }
  .chOrderWrap {
    padding: 15px;
    flex-wrap: wrap;
    gap: 15px;
  }
  .chOrderWrap .btnTwo {
    width: 100%;
  }
  .billWrap {
    flex-wrap: wrap;
  }
  .billIn {
    width: 100%;
  }
  .payInfWrap {
    flex-wrap: wrap;
    gap: 15px;
  }
  .payInfIn {
    width: 100%;
  }
  .trackodrBlock {
    flex-direction: column;
    margin-left: -15%;
  }
  .trackodrBlock li {
    min-height: 100px;
  }
  .trackodrBlock li::after {
    width: 2px;
    height: 80%;
    top: -40%;
    right: auto;
    left: 35%;
  }
  .trackodrBlock .stsTxt {
    position: absolute;
    left: 42%;
    font-size: 13px;
  }
  .trackodrBlock .trackblock {
    left: -15%;
  }
  .chOutCart .footblock {
    flex-wrap: wrap;
  }
  .chOutCart .footblock .inputOne,
  .chOutCart .footblock [class^='btn'] {
    width: 100%;
  }
}