@charset "UTF-8";



/*폰트설정 : 시작*/
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'), url('/resources/sign/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/sign/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/sign/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/sign/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/sign/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/sign/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/sign/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/sign/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/sign/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; }
*{-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: #fff;
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;
    overflow: hidden;
}

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

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




.topFixBox{
    display: block;
    width: 100%;
    height: 190px;
    padding:60px 0 0;
    box-shadow: 0 5px 6px rgba(0,0,0,0.1);
}

.topFixBox.topFixBoxType2{
    height: auto;
}

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

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

.tfTitleRow .tfTitleTxt{
    display: block;
    float: left;
    font-size: 16px;
    font-weight: 600;
    color:#000 !important;
    line-height: 24px;
    text-align: left;
}

.tfTitleRow .tfTitleTxt + .inputRow{
    display: block;
    width: 100%;
    margin:35px 0 0;
}

.inputRow{
    display: block;
    width: 100%;
    margin:35px 0 0;
}

.inputNormalR1{
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    background: #f8f8f8;
    padding:0 18px;
    color:#222;
    font-size: 14px;
    font-weight: 400;
    border:none;
    outline:none !important;
}

.inputNormalR1::placeholder{color:#a7a7a7}

.nameArea{
    display: block;
    width: 100%;
    border-radius: 5px;
    background: #F8F8F8;
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color:#e0e0e0;
    text-align: center;
    padding:10px;
    margin:40px 0 0;
}

.signArea{
    display: block;
    width: 100%;
    border-radius: 5px;
    background: #F8F8F8;
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color:#e0e0e0;
    text-align: center;
    padding:100px 10px;
    margin:20px 0 0;
}


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

.topFixBoxType2 .centerWrap{
    padding-bottom: 30px;
}

.buttonPrevNew1{
    display: block;
    width: 155px;
    background: #848484;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color:#fff !important;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
}

.buttonDoneNew1{
    display: block;
    width: 155px;
    background: #CBCBCB;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color:#fff !important;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
}

.buttonDoneNew1.active{
    background: #1C4EFF;
}

.buttonA001wrap{
    display: block;
    width: 100%;
    padding:126px 0 0;
}

.buttonA001wrap .buttonDoneNew1{
    margin:0 auto;
}


.buttonA002wrap{
    display: block;
    width: 100%;
    padding:126px 0 0;
}

.buttonA002wrap .txtA1{
    display: block;
    width: 100%;
    text-align: center;
    color:#A7A7A7;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 21px;
}

.buttonGroup{
    display: block;
    width: 100%;
    margin:15px 0 0;
}

.buttonGroup .buttonPrevNew1{
    display: block;
    float: left;
    width: calc(50% - 5px);
}

.buttonGroup .buttonDoneNew1{
    display: block;
    float: right;
    width: calc(50% - 5px);
}




.searchResults{
    display: block;
    width: 100%;
}
.searchResults .searchResultOne{
    display: block;
    border-bottom:1px solid #EFEFEF;
    padding:24px 20px;
}

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

.searchResults .searchResultOne .brisakInput{float: left;}



.txtC1{
    display: block;
    width: 100%;
    text-align: center;
    color:#000000;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    padding:35px 20px 0;
}


.iconTitle{
    display: block;
    width: 100%;
    text-align: left;
    color:#000000;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    padding:0 0 0 24px;
}

.iconTitle.icon1{
    background: url(/resources/sign/images/icon1z.png) left 1px no-repeat;
    background-size: 16px 16px;
    margin:30px 0 0;
}

.iconTitle.icon2{
    background: url(/resources/sign/images/icon2z.png) 2px 1px no-repeat;
    background-size: 12px 16px;
}

.checkGroup{
    display: block;
    width: 100%;
    padding: 18px 0 35px 26px;
}
.checkGroup .row{
    display: block;
    width: 100%;
}

.checkGroup .row + .row{margin:6px 0 0}

.checkGroup .row .brisakInput{

}

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


.checkGroup .brisakInput input + .txt {
    float: left;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color:#848484;
    padding:5px 0 5px 26px;
    max-width: 100%;
}

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

.checkGroup .brisakInput input[type="checkbox"]:checked+.txt {
    background: url(/resources/sign/images/checkbox16b_on.png) left 7px no-repeat;
    background-size: 16px 16px;
    color: #000000;
    font-weight: 600;
}

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

.lineA03a{
    display: block;
    width: 100%;
    height: 1px;
    background: #EFEFEF;
}

.lastCheck{
    display: block;
    width: 100%;
    text-align: center;
    padding:14px 10px 30px;
}


.lastCheck .brisakInput input + .txt {
    float: left;
    line-height: 22px;
    font-size: 15px;
    font-weight: 500;
    color:#555;
    padding:5px 0 5px 26px;
    max-width: 100%;
}

.lastCheck .brisakInput input[type="checkbox"]:not(:checked)+.txt {
    background: url(/resources/sign/images/checkbox16b_off.png) left 7px no-repeat;
    background-size: 18px 18px;
}

.lastCheck .brisakInput input[type="checkbox"]:checked+.txt {
    background: url(/resources/sign/images/checkbox16b_on.png) left 7px no-repeat;
    background-size: 18px 18px;
    color: #000000;
    font-weight: 600;
}




































































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

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

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

.brisakInput input + .txt {
    float: left;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color:#848484;
    padding:5px 0 5px 40px;
    max-width: 100%;
    word-break: keep-all;
}

.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/sign/images/checkbox16b_off.png) left no-repeat;
    background-size: 16px 16px;
}

.brisakInput input[type="checkbox"]:checked+.txt {
    background: url(/resources/sign/images/checkbox16b_on.png) left no-repeat;
    background-size: 16px 16px;
    color: #000000;
    font-weight: 600;
}



/*모달 : 시작*/
.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% - 72px);
    max-width: 400px;
    position: fixed;
    z-index: 2000;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 5px;
    padding:15px;
}

.txtB1{
    display: block;
    width: 100%;
    text-align: center;
    color:#000000;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    padding:49px 0 45px;
}

.txtB2{
    display: block;
    width: 100%;
    text-align: center;
    color:#000000;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    padding:35px 0 35px;
}

.rowButton1{
    display: block;
    width: 100%;
    text-align: center;
}

.buttonOk{
    display: block;
    width: 100%;
    max-width: 185px;
    margin:0 auto;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color:#fff !important;
    background: #000;
    margin-bottom: 15px;
}
/*모달 : 시작*/











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

.allWrap{border:none;}


} /*반응형 1000px 끝*/












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








} /*반응형 488px 끝*/








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




/*주문내역 : 끝*/







} /*반응형 488px 끝*/


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



} /*반응형 400px 끝*/




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


} /*반응형 360px 끝*/






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


} /*반응형 320px 끝*/









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

} /*반응형 320px 끝*/




.loader {
  width: 48px;
  height: 48px;
  display: block;
  margin: 20px auto;
  position: absolute;
  border: 3px solid #FFF;
  border-radius: 50%;
  box-sizing: border-box;
  animation: animloader 2s linear infinite;
  z-index: 2000;
  top: 50%;
  left: calc(50% - 30px);
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  width: 6px;
  height: 24px;
  background: #FFF;
  transform: rotate(-45deg);
  position: absolute;
  bottom: -20px;
  left: 46px;
}

@keyframes animloader {
  0% {
    transform: translate(-10px, -10px);
  }
  25% {
    transform: translate(-10px, 10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(10px, -10px);
  }
  100% {
    transform: translate(-10px, -10px);
  }
}


.loader2 {
    margin: 20px auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 6rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
    z-index: 2000;
	top: 44%;
    left: calc(50% - 48px);
  }
  .loader2:before,
  .loader2:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    animation: pulsOut 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
  }
  .loader2:before {
    width: 100%;
    padding-bottom: 100%;
    box-shadow: inset 0 0 0 1rem #fff;
    animation-name: pulsIn;
  }
  .loader2:after {
    width: calc(100% - 2rem);
    padding-bottom: calc(100% - 2rem);
    box-shadow: 0 0 0 0 #fff;
  }

  @keyframes pulsIn {
    0% {
      box-shadow: inset 0 0 0 1rem #fff;
      opacity: 1;
    }
    50%, 100% {
      box-shadow: inset 0 0 0 0 #fff;
      opacity: 0;
    }
  }

  @keyframes pulsOut {
    0%, 50% {
      box-shadow: 0 0 0 0 #fff;
      opacity: 0;
    }
    100% {
      box-shadow: 0 0 0 1rem #fff;
      opacity: 1;
    }
  }