@charset "UTF-8";



/*폰트설정 : 시작*/
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'), url('/resources/axproject/fonts/pretendard/Pretendard-Black.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Black.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'), url('/resources/axproject/fonts/pretendard/Pretendard-ExtraBold.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'), url('/resources/axproject/fonts/pretendard/Pretendard-Bold.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'), url('/resources/axproject/fonts/pretendard/Pretendard-SemiBold.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'), url('/resources/axproject/fonts/pretendard/Pretendard-Medium.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'), url('/resources/axproject/fonts/pretendard/Pretendard-Regular.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'), url('/resources/axproject/fonts/pretendard/Pretendard-Light.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Light.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard ExtraLight'), url('/resources/axproject/fonts/pretendard/Pretendard-ExtraLight.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard Thin'), url('/resources/axproject/fonts/pretendard/Pretendard-Thin.subset.woff2') format('woff2'), url('./woff-subset/Pretendard-Thin.woff') format('woff');
}
/*폰트설정 : 끝*/


/*기타 설정 : 시작 */
html{-webkit-text-size-adjust:none; 
-ms-user-select:none; -khtml-user-select:none;
-webkit-user-select:none; user-select:none; 
-webkit-touch-callout:none; 
font-size:19px;}


*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body,a,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,th,td,
form,fieldset,label,legend,input,textarea,button,menu{margin:0px;padding:0px; -webkit-text-size-adjust:none;}
body,input,textarea,select,table,button,code{color:#1f1f1f;
font-family: 'Pretendard'; font-weight: 400; text-align: left; font-style:normal; } 
body{width:100%; position:relative;word-wrap:break-word;word-break:break-all; background: #EAEAEA;
min-width:280px; min-height: 100vh;}
nav,menu,ul,li,ol{list-style:none;}
div{display:block;}
table{border-collapse:collapse; border-spacing:0;}
img,fieldset{border:none;}
em,address{font-style:normal;}
select{cursor: pointer; background: none}
section,article,header,footer,nav,aside,hgroup{display:block;}
button{border:none; background:none; cursor:pointer !important;}
button:focus{outline:none;}
a{margin:0px; padding:0px; text-decoration:none; cursor:pointer;}
a:hover, a:active{text-decoration:none !important;}
table{table-layout: fixed;}
.clearFix:after{content:""; display:block; clear:both;}
.ibFix{line-height:0px;}
.hiddenFix{position: absolute; overflow: hidden; top: 0; left: 0; width: 1px; height: 1px; line-height: 0;
text-indent:-10000px}
caption{position: absolute; overflow: hidden; top: 0; left: 0; width: 1px; height: 1px; line-height: 0;
text-indent:-10000px}
label{cursor:pointer;}
.pageFix{overflow: hidden;}
.tCenter{text-align: center;}
.inside{display: inline-block;}
.inside:after{content: ""; display: block; clear: both;}
h1{position: absolute; overflow: hidden; top: 0; left: 0; width: 0px; height: 0px; line-height: 0;}

select {
   -webkit-appearance:none; /* for chrome */
   -moz-appearance:none; /*for firefox*/
   appearance:none;
}

select::-ms-expand{
   display:none;/*for IE10,11*/
}
/*기타 설정 : 끝*/












/*############### 이 아래부터 사용하시면 되십니다 ###############*/

























/*레이아웃 : 시작*/

.floatLeft{float: left;} .floatLeft:after{content:""; display:block; clear:both;}
.floatRight{float: right; position: relative;} .floatRight:after{content:""; display:block; clear:both;}


.allWrap{
    display: block;
    position: relative;
    width: 100%;
    max-width: 900px;
    min-width: 280px;
    min-height: 100vh;
    margin:0 auto;
    border-left:1px solid #e0e0e0;
    border-right:1px solid #e0e0e0;
}

.step_detail_new1{
    width: 100%;
    padding: 1.063rem 0.938rem;
    background: #fff;
}

.step_detail_new1 + .step_detail_new1{margin-top: 0.625rem}


.centerWrap{
    display: block;
    width: 100%;
    margin:0 auto;
    position: relative;
}

.inside{display: inline-block;}
.inside:after{content: ""; display: block; clear: both;}


/*라디오버튼, 체크박스 : 시작*/

.brisakInput {
    position: relative;
    display: block;
    max-width: 100%;
    float: left;
    height: 30px;
}

.brisakInput + .brisakInput{margin:0 0 0 28px}

.brisakInput input + .txt {
    float: left;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color:#333;
    padding:5px 0 5px 22px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brisakInput input {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.brisakInput input[type="checkbox"]{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    line-height: normal;
}

.brisakInput input[type="checkbox"]:focus+.txt{
}

.brisakInput input[type="checkbox"]:not(:checked)+.txt {
    background: url(/resources/axproject/img//newTbex/checkbox16a_off.png) left 7px no-repeat;
    background-size: 16px 16px;
}

.brisakInput input[type="checkbox"]:checked+.txt {
    background: url(/resources/axproject/img/newTbex/checkbox16a_on.png) left 7px no-repeat;
    background-size: 16px 16px;
    color: #222;
}

/*.brisakInput input[type="radio"]{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    line-height: normal;
}

.brisakInput input[type="radio"]:focus+.txt{
}

.brisakInput input[type="radio"]:not(:checked) + .txt {
    background: url(../images/radio-w16-off.png) left no-repeat;
    background-size: 16px 16px;
}

.brisakInput input[type="radio"]:checked + .txt {
    background: url(../images/radio-w16-on.png) left no-repeat;
    background-size: 16px 16px;
}*/
/*라디오버튼, 체크박스 : 끝*/



/*A000 : 시작*/
.modalAll{
    display: none;
}

.modalAll.active{
    display: block;
}

.modalDimm{
    display: block;
    width: 100%;
    height: 100vh;
    max-width: 900px;
    position: fixed;
    z-index: 1000;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.5);
}

.modayBody{
    display: block;
    width: calc(100% - 40px);
    max-width: 460px;
    position: fixed;
    z-index: 2000;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
}


.modalBodyTop{
    display: block;
    width: 100%;
    padding:10px;
}

.modalBodyTop:after{content: ""; display: block; clear: both;}

.modalBodyContent{
    display: block;
    width: 100%;
    line-height: 0;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

.modalBodyContent > img{
    display: block;
    width: 100%;
}

.closeModalBody{
    width: 44px;
    height: 22px;
    text-align: center;
    font-size: 12px;

    font-weight: 600;
    color:#fff !important;
    background: #111;
    border-radius: 6px;
    float: right;
}

.modalBodyBottom{
    display: block;
    width: 100%;
    border-top:1px solid #707070;
    padding:10px;
}

.modalBodyBottom:after{content: ""; display: block; clear: both;}
/*A000 : 끝*/


/*게이트 스텝 : 시작*/
.gateStep{
    display: block;
    width: 100%;
    position: relative;
}

.gateStep .gateStepContent{
    display: block;
    width: 100%;
    height: calc(100vh - 54px);
    overflow-y: auto;
}

.gateStep .gateStepContent.gateStepContentNew{
    overflow: visible;
}


.gateStep .gateStepContent .imgAllWrap{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.imgAllWrap1{
    background: url(/resources/axproject/img/newTbex/gate_00.png) center no-repeat;
    background-size: auto 100%;
    position: relative;
}

.gateStep .gateStepContent .imgAllWrap img{
    display: block;
    width: 100%;
    height: 100%;
}

.imgAllWrap1 img{
    width: calc(100% - 20px) !important;
    height: auto !important; 
    max-width: 500px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.gateStepButtoms{
    display: block;
    width: 100%;
    position: fixed;
    z-index: 100;
    left: 50%;
    max-width: 900px;
    bottom:0;
    transform: translateX(-50%);
}

.gateStepButtoms:after{content: ""; display: block; clear: both;}

.gateStepButtoms .buttonNextStep{
    display: block;
    width: 100%;
    height: 70px;
    line-height: 54px;
    text-align: center;
    background: #000;
    color: #fff
}

.gateStepButtoms .buttonNextStep span{
    font-size: 16px;
    font-weight: 500;
    color:#fff !important;
    background: url(/resources/axproject/img/newTbex/arrow-w9x13.png) right no-repeat;
    background-size: 9px 13px;
    padding:0 11px 0 0;
}

.gateStepButtoms .buttonPrevStep{
    width: 35%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: #505153;
}

.gateStepButtoms .buttonPrevStep span{
    font-size: 14px;
    font-weight: 500;
    color:#fff !important;
}

.gateStepButtoms .buttonPrevStep + .buttonNextStep{
    float: right;
    width: 65%;
}


.gateStepButtoms .buttonDone1{
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: #000000;
}

.gateStepButtoms .buttonDone1 span{
    font-size: 14px;
    font-weight: 500;
    color:#fff !important;
}


.gateStepSwiper{
    display: block;
    width: 100%;
    overflow: hidden;
}

.gateStepSwiper .imgWrap{
    display: block;
    width: 100%;
    position: relative;
    height: calc(100vh - 54px);
    background: #f0f0f0;
}

.gateStepSwiper .imgWrap .txt1{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color:#111;
    position: absolute;
    z-index: 50;
    top:44px;
    left:0;

}

.gateStepSwiper .imgWrap > img{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.gateStepSwiper .txtWrap{
    display: block;
    padding:40px 15px 80px;
}

.gateStepSwiper .txtWrap .txtA1{
    display: block;
    width: 100%;
    text-align: center;
    padding:0 10px;
    font-size: 20px;
    font-weight: 400;
    color:#111;
    line-height: 30px;
}

.gateStepSwiper .txtWrap .txtA2{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color:#111;
    margin:21px 0 0;
}

.gateStepSwiper .pagination1{
    text-align: center;
    position: fixed;
    left:0;
    width: 100%;
    bottom:100px;
    z-index: 51;
}

.gateStepSwiper .pagination1 .swiper-pagination-bullet{
    background: #eee !important;
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
}

.gateStepSwiper .pagination1 .swiper-pagination-bullet-active{
    background: #505153 !important;
}
/*게이트 스텝 : 끝*/






/*goods : start*/
.goods{
    display: block;
    width: 100%;

}

.goodsSection1{
    display: block;
    width: 100%;
}

.goodsSection1 .txt1{
    display: block;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    color:#111;
    line-height: 20px;
    text-align: left;
}

.goodsSection1 .txt1 span{
    color: #D22F27;
}


.goodsSection1 .banner{
    display: block;
    width: 100%;
    line-height: 0;
}

.goodsSection1 .banner img{
    display: block;
    width: 100%;
}

.goodsSection2{
    display: block;
    width: 100%;
    margin:24px 0 0;
}

.goodsSection2 + .goodsSection2{margin:50px 0 0;}

.goodsSection2 .titleRow1{
    display: block;
    width: 100%;
    position: relative;
}

.goodsSection2 .titleRow1:after{content: ""; display: block; clear: both;}

.goodsSection2 .titleRow1 .titleTxt1{
    display: block;
    float: left;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    line-height: 23px;
    color:#111;
}

.goodsSection2 .titleRow1 .tshirtsBanner{
    position: absolute;
    bottom:-10px;
    right: 0;
    line-height: 0;
    display: block;
    z-index: 10;
    width: 250px;
}

.goodsSection2 .titleRow1 .tshirtsBanner > img{
    display: block;
    width: 100%;
}

.itemList{
    display: block;
    width: 100%;
    margin:14px 0 0;
}

.itemList .itemOne{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border:1px solid #EEEEEE;
    border-radius: 6px;
}

.itemList .itemOne.active{
    border:1px solid #2E82FF;
}

/*.itemList .itemOne.active .buttonGotoDetail{
    border:1px solid #2E82FF !important;
    background: #fff url(/resources/axproject/img/newTbex/ic_zoom_s.png) center no-repeat !important;
    background-size: 18px 18px !important;
}*/


.itemList .itemOne + .itemOne{margin:10px 0 0;}

.itemList .itemOne .itemCol1{
    display: block;
    width: 150px;
    border-radius: 6px 0 0 6px;
    overflow: hidden;
}

.itemList .itemOne .itemCol1 .imgWrap{
    display: block;
    position: relative;
    height: 150px;
    line-height: 0;
}

.itemList .itemOne .itemCol1 .imgWrap img{
    display: block;
    width: 100%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.itemList .itemOne .itemCol1 .imgWrap .soldOutCover{
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: rgba(0,0,0,0.5);
}

.itemList .itemOne .itemCol1 .imgWrap .soldOut{
    position: absolute;
    top:12px;
    left:12px;
    height: 22px;
    line-height: 22px;
    padding:0 10px;
    color:#fff !important;
    border-radius: 4px;
    background: #D22F27;
    z-index: 12;
    font-size: 11px;
    font-weight: 500;
}


.itemList .itemOne .itemCol1 .imgWrap .label{
    position: absolute;
    z-index: 11;
    top:0;
    left:0;
    padding:0 10px;
    height: 22px;
    line-height: 22px;
    border-radius: 0 0 6px 0;
    background: #CCFF00;
    color:#111111;
    font-size: 11px;
    font-weight: 500;
    display: block;
}

.itemList .itemOne .itemCol2{
    display: block;
    width: calc(100% - 150px);
    position: relative;
}

.itemList .itemOne .itemCol2 .insideW{
    display: block;
    width: 100%;
    padding:17px 17px 0;
}

.itemList .itemOne .lableHot{
    display: block;
    position: absolute;
    width: 33px;
    height: 22px;
    background: url(/resources/axproject/img/newTbex/ic_hot.png) center no-repeat;
    right: 11px;
    top:-5px;
    z-index: 10;
    font-size: 0;
    background-size: 33px 22px;
}

.itemList .itemOne .itemCol2 .itemTitle{
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color:#000 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.itemList .itemOne .itemCol2 .controlAmount{
    display: block;
    width: 90px;
    border:1px solid #eee;
    border-radius: 4px;
    margin:19px 0 0;
}

.itemList .itemOne .itemCol2 .controlAmount:after{content: ""; display: block; clear: both;}


.itemList .itemOne .itemCol2 .controlAmount .buttonMinus{
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    color:#222 !important;
    font-weight: 500;
    float: left;
}

.itemList .itemOne .itemCol2 .controlAmount .buttonPlus{
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    color:#222 !important;
    font-weight: 500;
    float: left;
}

.itemList .itemOne .itemCol2 .inputAmount{
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    color:#111;
    text-align: center;
    padding:0 !important;
    width: calc(100% - 52px);
    border:none !important;
    float: left;
    background: none !important;
}

.itemList .itemOne .itemCol2 .itemPrice{
    display: block;
    width: 100%;
    font-size:12px;
    text-align: left;
    line-height: 25px;
    color:#555;
    font-weight: 700;
    margin:10px 0 0;
}

.itemList .itemOne .itemCol2 .itemPrice span{
    font-size: 16px;
}

.itemList .itemOne .itemCol2 .buttonGotoDetail{
    position: absolute;
    right: 0;
    bottom:0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #fff url(/resources/axproject/img/newTbex/ic_zoom_s1.png) center no-repeat;
    background-size: 18px 18px;
    border:1px solid #d0d0d0;
}

.soldOutBg{
    background: #eee;
}

.goodsSection2{}
.goodsSection2{}
.goodsSection2{}

.goodsSection1{
    display: block;
    width: 100%;
}

.goodsSection1{
    display: block;
    width: 100%;
}

.goodsSection1{
    display: block;
    width: 100%;
}

.goodsSection1{
    display: block;
    width: 100%;
}
/*goods : end*/



.title2 {
    margin-bottom: 0.625rem;
    color: #555;
    line-height: 1.000rem;
    font-size: 0.875rem;
    font-weight: 400;
}



.title2new {
    margin-bottom: 1rem;
    color: #222;
    line-height: 1.000rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.title2new.ic_orderlist{
    position: relative;
    padding:0 0 0 39px;
}

.title2new.ic_orderlist .icon{
    width: 34px;
    height: 26px;
    background: url(/resources/axproject/img/newTbex/ic_orderlist.png) left no-repeat;
    background-size: 34px 26px;
    left:0;
    top:50%;
    transform: translateY(-50%);
    position: absolute;
}


.title2new.ic_casper{
    position: relative;
    padding:0 0 0 39px;
}

.title2new.ic_casper .icon{
    width: 34px;
    height: 26px;
    background: url(/resources/axproject/img/newTbex/ic_casper.png) left no-repeat;
    background-size: 34px 26px;
    left:0;
    top:50%;
    transform: translateY(-50%);
    position: absolute;
}

.title2new.ic_money{
    position: relative;
    padding:0 0 0 39px;
}

.title2new.ic_money .icon{
    width: 34px;
    height: 26px;
    background: url(/resources/axproject/img/newTbex/ic_money.png) left no-repeat;
    background-size: 34px 26px;
    left:0;
    top:50%;
    transform: translateY(-50%);
    position: absolute;
}

.title2new.ic_money2{
    position: relative;
    padding:0 0 0 39px;
}


.title2new.ic_money2 .icon{
    width: 34px;
    height: 26px;
    background: url(/resources/axproject/img/newTbex/ic_money2.png) left no-repeat;
    background-size: 34px 26px;
    left:0;
    top:50%;
    transform: translateY(-50%);
    position: absolute;
}

.title2new.ic_card{
    position: relative;
    padding:0 0 0 39px;
}


.title2new.ic_card .icon{
    width: 34px;
    height: 26px;
    background: url(/resources/axproject/img/newTbex/ic_card.png) left no-repeat;
    background-size: 34px 26px;
    left:0;
    top:50%;
    transform: translateY(-50%);
    position: absolute;
}





/*spec : start*/
.specInfo{
    display: block;
    width: 100%;
}

.specInfo .specTitleRow{
    display: block;
    width: 100%;
    padding:0 0 0 25px;
    /*border-top:1px solid #eee;*/
}

/*.specInfo .specTitleRow:first-child{
    border-top:none;
}*/

.specInfo .specTitleRow:after{content: ""; display: block; clear: both;}

.specInfo .specTitleRow .specTitle{
    display: block;
    float: left;
    font-size: 0.875rem;
    line-height: 1rem;
    font-weight: 700;
    color:#000;
    text-align: left;
    padding:18px 0;
}

.specDatas{
    display: block;
    width: 100%;
    padding:0 0 0 25px;
    border-bottom:1px solid #eee;
}

.specDatas .specRow{
    display: block;
    width: 100%;
    border-top:1px solid #eee;
}


.specDatas .specRow:after{content: ""; display: block; clear: both;}

.specDatas .specRow .specLabel{
    display: block;
    float: left;
    font-size: 0.875rem;
    line-height: 1rem;
    color:#000;
    font-weight: 400;
    padding:18px 0;
}

.specDatas .specRow .specData{
    display: block;
    float: right;
    font-size: 0.875rem;
    line-height: 1rem;
    color:#000;
    font-weight: 400;
    padding:18px 0;
}
/*spec : end*/



/*payment : start*/
.payDatas{
    display: block;
    width: 100%;
    padding:14px 0 0;
}

.payDatas .payRow{
    display: block;
    width: 100%;
}


.payDatas .payRow:after{content: ""; display: block; clear: both;}

.payDatas .payRow .payLabel{
    display: block;
    float: left;
    font-size: 0.875rem;
    line-height: 1rem;
    color:#000;
    font-weight: 400;
    padding:14px 0;
}

.payDatas .payRow .payData{
    display: block;
    float: right;
    font-size: 0.875rem;
    line-height: 1rem;
    color:#000;
    font-weight: 500;
    padding:18px 0;
}

.payDatas .payRow .payData .discount{
    color:#D22F27;
}

.payDatas .payRow .payData .discount + span{padding:0 0 0 8px}

.payDatas .payRow .payData .discount + span + span{padding:0 0 0 8px}

.payDatas .payRow .payData .original{
    color:#B7B7B7;
    text-decoration: line-through;
}

.payDatas .payRow .payData .total{
    font-weight: 700;
    color:#2E82FF;
    font-size: 1rem;
}
/*payment : end*/








/*select bonus : start*/
.selectBonus {
    display: block;
}

.row1 {
    border-radius: 5px;
    color: #D22F27;
    display: block;
    width: 100%;
    font-size: 0.875rem;
}

.row1:after{content: ""; display: block; clear: both;}

.row1 .emoji {
    margin:0 2px 0 0;
}

.selectBonus .buttons {
    padding:20px 0 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 8px;
}

.selectBonus .buttons button {
    width: calc(50% - 5px);
    background-color: white;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px;
    font-size: 0.875rem;
    text-align: center;
    color:#000;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.selectBonus .buttons button.selected {
    color:#2E82FF !important;
    border-color: #2E82FF;
    font-weight: 700;
    box-shadow: 0 0 5px #2E82FF;
}

.selectBonus .buttons button:hover {
    border-color: #ddd;
}

/*.selectBonus .buttons button:focus {
    outline: none;
    border-color: #2E82FF;
}*/
/*select bonus : end*/




/*title3 : start*/
.title3new{
    display: block;
    width: 100%;
    margin:36px 0 0;
    position: relative;
}

.title2new + .title3new{margin:0;}
.title3new:first-child{margin:0;}

.title3new:after{content: ""; display: block; clear: both;}

.title3new .title3{
    display: block;
    float: left;
    font-size: 0.875rem;
    line-height: 1rem;
    color:#000;
    font-weight: 700;
    padding:14px 0;
}

.title3new .title3 .op{
    font-size: 0.74rem;
    color:#2E82FF;
}

.title3new .tooltipButton{
    display: flex;
    float: right;
    justify-content: right;
    align-items: center;
}


.title3new .tooltipButton .icon{
    display: block;
    width: 18px;
    height: 18px;
    background: url(/resources/axproject/img/newTbex/btn_question.png) center no-repeat;
    background-size: 18px 18px;
}

.title3new .tooltipButton .txt{
    display: block;
    font-size: 0.74rem;
    line-height: 1rem;
    color:#000;
    font-weight: 400;
    padding:14px 0 14px 4px;
}
/*title3 : end*/



.goodsDatas{
    display: block;
    width: 100%;
    padding:20px 0 0;
}

.goodsDatas .goodsRow{
    display: block;
    width: 100%;
}

.goodsDatas .goodsRow + .goodsRow{margin:8px 0 0}

.goodsDatas .goodsRow:after{content: ""; display: block; clear: both;}

.goodsDatas .goodsImgWrap{
    display: block;
    width: 58px;
    height: 58px;
    line-height: 0;
    float: left;
    position: relative;
}

.goodsDatas .goodsImgWrap img{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    border-radius: 6px;
    top:0;
    left:0;
}

.goodsDatas .goodsImgWrap.noImgWrap{
    background: #DEDEDE;
    border-radius: 6px;
    text-align: center;
    line-height: 58px;
    color:#505153;
    font-size: 0.875rem;
}

.goodsDatas .goodsTxt{
    display: block;
    width: calc(100% - 72px);
    float: right;
}

.goodsDatas .goodsTxt .t1{
    display: block;
    font-size: 0.875rem;
    line-height: 1rem;
    color:#000;
    font-weight: 400;
    width: 100%;
    padding:5px 0;
}

.goodsDatas .goodsTxt .t2{
    display: block;
    font-size: 0.875rem;
    line-height: 1rem;
    color:#000;
    font-weight: 700;
    width: 100%;
    padding:5px 0;
}

.mkWrap{
    display: block;
    width: 100%;
    padding:0 0 0 15px;
}

.mkWrap .row{
    display: block;
    width: 100%;
}

.mkWrap .row:after{content: ""; display: block; clear: both;}

.mkWrap .brisakInput input + .txt{
    color:#000;
}

.mkAgreeTxt2{
    display: block;
    width:100%;
    font-size: 0.7rem;
    line-height: 1rem;
    padding:6px 0 6px 22px;
    color:#505153;
    font-weight: 400;
}









/*tootip1 : start*/
.tooltipBox{
    display: none;
    position: absolute;
    width: 100%;
    z-index: 50;
    top:0;
    left: 0;
}

.tooltipBox.active{display: block;}

.closeTooltipBox{
    display: none;
    position: absolute;
    top:0;
    right: 0;
    background: url(/resources/axproject/img/newTbex/btn-a.png) center no-repeat;
    background-size: 14px 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.closeTooltipBox2{
    display: block;
    position: absolute;
    width: 100%;
    height: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.6);
    top:0;
    left: 0;
}


.tooltipBody{
    display: block;
    position: absolute;
    width: calc(100% - 30px);
    /*max-height: calc(100% - 60px);*/
    left:50%;
    top:60px;
    transform: translate(-50%, 0);
    z-index: 10000;
    background: #000;
    padding:24px 14px;
    border-radius: 14px;
    box-shadow: 0 0 7px rgba(0,0,0,0.2);
    max-width: 848px;
}

.tooltipBody:before{
    position: absolute;
    content: "";
    width: 35px;
    height: 30px;
    background: url(/resources/axproject/img/newTbex/tri1.png) center;
    background-size: 35px 30px;
    right: 21px;
    top:-25px;
}

.ttRow1 {
    text-align: center;
    margin-bottom: 20px;
    color:#fff;
    font-size: 0.875rem;
}

.ttRow1 .h1 {
    color: #A3E6FF;
    font-weight: bold;
}

.giftOptions {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    column-gap: 3px;
}

.gift {
    width: calc((100% - 6px) / 3);
    max-width: 160px;
    text-align: center;
    margin: 0 0 10px;
}

.gift img {
    width: 100%;
    margin:0 0 9px;
}

.gift p {
    display: block;
    width: 100%;
    text-align: center;
    color:#fff;
    font-size: 11px;
    line-height: 13px;
    padding:4px 1px;
    word-break: keep-all;
}

.paymentInfo {
    display: block;
    width: 100%;
}

.paymentInfo h3 {
    display: block;
    width: 100%;
    border-top:1px solid #5C5C5C;
    border-bottom:1px solid #5C5C5C;
    text-align: center;
    font-size: 17px;
    color:#fff;
    line-height: 50px;
}

.paymentInfo table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.paymentInfo td {
    padding: 10px;
    border-bottom: 1px solid #5C5C5C;
}

.paymentInfo td:nth-child(1){
    color:#fff;
    font-size: 17px;
    line-height: 24px;
    text-align: left;
    font-weight: 700;
}

.paymentInfo td:nth-child(2){
    color:#fff;
    font-size: 15px;
    line-height: 24px;
    text-align: left;
    font-weight: 500;
}

.paymentInfo .small {
    font-size: 12px;
}

.paymentInfo .note {
    font-size: 13px;
    line-height: 20px;    
    color: #A3E6FF;
}

.tooltipBox2 .tooltipBody{padding:18px 14px}

.shippingFeeInfo table {
    width: 100%;
    border-collapse: collapse;
}

.shippingFeeInfo tr {
    border-bottom: 1px solid #5C5C5C;
}
.shippingFeeInfo td {
    width: 100%;
    padding: 16px 5px;
}

.shippingFeeInfo tr:last-child {border-bottom: none;}

.shippingFeeInfo td .t1{
    display: block;
    font-size: 0.875rem;
    color:#fff;
    line-height: 1rem;
    text-align: left;
    font-weight: 400;
}

.shippingFeeInfo td .s1{
    font-weight: 700;
    color:#CCFF00;
}

.shippingFeeInfo td .s2{
    font-weight: 700;
    color:#A3E6FF;
}

.shippingFeeInfo td .t2{
    display: block;
    font-size: 0.875rem;
    color:#ccff00;
    line-height: 1rem;
    text-align: left;
    font-weight: 400;
    margin:6px 0 0;
}

.shippingFeeInfo td .t3{
    display: block;
    font-size: 0.875rem;
    color:#A3E6FF;
    line-height: 1rem;
    text-align: left;
    font-weight: 400;
    margin:6px 0 0;
}

.shippingFeeInfo .note {
    font-size: 13px;
    line-height: 20px;    
    margin:6px 0 0;
}

.shippingFeeInfo .note1{color:#ccff00}
.shippingFeeInfo .note2{color:#A3E6FF}

.shippingFeeInfo h3 {
    display: none;
    width: 100%;
    border-bottom:1px solid #5C5C5C;
    text-align: center;
    font-size: 17px;
    color:#fff;
    line-height: 50px;
}
/*tootip1 : end*/


.gbBg{
    display: block;
    width: 100%;
    height: 100vh;
    position: relative;
}

.imgWrapNew.gbBg1{
	background: url(/resources/axproject/img/newTbex/new_gate_01.png) center no-repeat;
    background-size: auto 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.imgWrapNew.gbBg2{
	background: url(/resources/axproject/img/newTbex/new_gate_02.png) center no-repeat;
    background-size: auto 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.imgWrapNew.gbBg3{
	background: url(/resources/axproject/img/newTbex/new_gate_03.png) center no-repeat;
    background-size: auto 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.imgWrapNew.gbBg4{
	background: url(/resources/axproject/img/newTbex/new_gate_04.png) center no-repeat;
    background-size: auto 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.imgWrapNew.gbBg5{
	background: url(/resources/axproject/img/newTbex/new_gate_05.png) center no-repeat;
    background-size: auto 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.gbBg .txt1n{
    /*display: block;*/
    width: 100%;
    text-align: center;
    font-size: 15px;
    line-height: 22px;
    color:#000;
    font-weight: 500;
    padding:36px 0 0;
    height: 15%;
    
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 1rem;
}

.gbBg .img1n{
    height: 80%;
    display: flex;
}

.gbBg .img1{
    display: block;
    width: calc(100% - 30px);
    max-width: 450px;
    margin:20px auto;
    object-fit: contain;
}
.gbBg .imgWrapNew{
	height:50%;
}
.gbBg .txtWrapNew{
    display: block;
    width: 100%;
    text-align: center;
    /*margin:30px 0 0;*/
    height:50%;
    background: #fff;
    color: #000;
    padding-top: 2.3rem;
}

.gbBg .txtWrapNew .txtA1{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 34px;
    font-weight: 400;
    color:#000;
    line-height: 30px;
}

.gbBg .txtWrapNew .txtA1 .s1{
    font-size: 34px;
    font-weight: 800;
}

.gbBg .txtWrapNew .txtA2{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color:#000;
    line-height: 23px;
    margin:40px 0 0;
}




/*#######################################*/
@media screen and (max-width: 1000px) {

.allWrap{border:none;}


} /*반응형 1000px 끝*/





/*#######################################*/
@media screen and (max-width: 700px) {



    /*tootip1 : start*/
    .tooltipBox{
        display: none;
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 50;
        top:0;
        left: 0;
    }

    .tooltipBox.active{display: block;}

    .tooltipBody:before{
        display: none;
    }

    .closeTooltipBox{
        display: block;
        position: absolute;
        top:0;
        right: 0;
        background: url(/resources/axproject/img/newTbex/btn-a.png) center no-repeat;
        background-size: 14px 14px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .closeTooltipBox2{
        display: block;
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 9000;
        background: rgba(0,0,0,0.6);
        top:0;
        left: 0;
    }


    .tooltipBody{
        display: block;
        position: fixed;
        width: calc(100% - 50px);
        max-height: calc(100% - 60px);
        left:50%;
        top:50vh;
        transform: translate(-50%, -50%);
        z-index: 10000;
        background: #000;
        padding:24px 14px;
        border-radius: 14px;
        border:2px solid #fff;
        box-shadow: 0 0 7px rgba(0,0,0,0.2);
        max-width: 848px;
        overflow-y: auto;
    }

    .shippingFeeInfo h3 {
        display: block;
    }


	.gbBg .txtWrapNew .txtA1 .s1{
	    font-size: 32px;
	}
	
	.gbBg .txtWrapNew .txtA2{
	    margin:20px 0 0;
	}
	
	.gbBg .imgWrapNew{
		height:47%;
	}
}


/*#######################################*/
@media screen and (max-width: 488px) {








} /*반응형 488px 끝*/








@media screen and (max-width: 420px) {
/*주문내역 : 시작*/




/*주문내역 : 끝*/







} /*반응형 488px 끝*/


@media screen and (max-width: 400px) {


    .imgAllWrap1 img{
        width: calc(100% - 60px) !important;
    }

} /*반응형 400px 끝*/




@media screen and (max-width: 360px) {


} /*반응형 360px 끝*/






@media screen and (max-width: 340px) {


} /*반응형 320px 끝*/









@media screen and (max-width: 320px) {

} /*반응형 320px 끝*/