/* CSS RESET */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-family: 'Open Sans', 'NotoSansKR', sans-serif; }

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

@font-face{font-family:'NotoSansKR';font-style:normal;font-weight:100;src:url(../font/NotoSansKR-Thin.woff2) format("woff2"),url(../font/NotoSansKR-Thin.woff) format("woff")}
@font-face{font-family:'NotoSansKR';font-style:normal;font-weight:300;src:url(../font/NotoSansKR-Light.woff2) format("woff2"),url(../font/NotoSansKR-Light.woff) format("woff")}
@font-face{font-family:'NotoSansKR';font-style:normal;font-weight:normal;src:url(../font/NotoSansKR-Regular.woff2) format("woff2"),url(../font/NotoSansKR-Regular.woff) format("woff")}
@font-face{font-family:'NotoSansKR';font-style:normal;font-weight:500;src:url(../font/NotoSansKR-Medium.woff2) format("woff2"),url(../font/NotoSansKR-Medium.woff) format("woff")}
@font-face{font-family:'NotoSansKR';font-style:normal;font-weight:bold;src:url(../font/NotoSansKR-Bold.woff2) format("woff2"),url(../font/NotoSansKR-Bold.woff) format("woff")}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html, body { overflow-x: hidden; }
body { font-family: 'Open Sans', 'NotoSansKR', sans-serif; color: #2B2B2B; line-height: 1; position: relative; }
ul li { list-style: none; }
input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0px; }

::-webkit-input-placeholder { color: #7F7F7F; }
::-ms-input-placeholder { color: #7F7F7F; }
::-moz-placeholder { color: #7F7F7F; opacity: 1;}
:-moz-placeholder { color: #7F7F7F; opacity: 1;}

input:focus { border: 1px solid #2b2b2b !important; outline: none; }
select:focus { border: 1px solid #2b2b2b !important; outline: none; }
a { margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; text-decoration: none; color: inherit; }
a:hover { cursor: pointer; }
input[type=text]::-ms-clear { display:none; }


/* Background */

#donate-page-background { background-size: cover; background-position: center top; background-attachment: fixed; }
#donate-confirm-page-background { background-size: cover; background-position: center top; background-attachment: fixed; }


#login-page-background { background-size: cover; }
#support-page-background { background-size: cover; background-position: center top; background-attachment: fixed; }

/* common  ADD BY SBL */
.cg { color: #30b34d; }
.cghigh { color: #31a84b; }
.cgray { color: #979797; }
.gtext { color: #2b2b2b; }
.fstrong { font-weight: 400;}
.fline { text-decoration: underline;}
.vmiddle { vertical-align: middle;}
.cgbbottom { color: #30b34d; border-bottom: none !important; cursor: default !important; }
.npt { padding-top: 0px !important; }
.hidden {display: none !important;}
.w70p {width:70% !important; }
.f_red {color: red !important}
.f_black {color: black !important}
.clearboth { clear: both; }
.auto-height { height: auto !important;}

/* header */
header { width: 100%; height: 66px; margin: 0 auto; }

#header-ie10-noti { height: 56px; font-size: 14px; line-height: 17px; background-color: #FFCFA5; padding: 10px 18px; display: flex; }
.numberCircle { border-radius: 50%; behavior: url(PIE.htc); width: 18px; height: 18px; padding: 2px; background: transparent; border: 1px solid black; color: black; display: inline-block; text-align: center; font: 12px Arial, sans-serif; }
.header-ie10-noti-info { margin-left: 10px; }

#header-desktop { width: 200px; height: 66px; float: left; display: block; }
#hamburger-menu { display: none; }
#header-mobile-logo { display: none; }
#topcontrol { display: none; }

.more-section { height: 16px; clear: both; margin-top:15px; font-size: 15px; }
.more-button { width: 100%; max-width: 80px; display: block; font-weight: 400; margin: 0 auto; }
.more-button a:hover { color: #999; }

A.common_more { padding-right: 24px; background: url('../img/service/btn-arrow.png') no-repeat right center; }
A.common_more:hover { cursor:pointer; color: #999; text-decoration: none !important; background: url('../img/service/btn-arrow_hover.png') no-repeat right center; }

@media screen and (max-width: 1024px) {
  header { height: 61px; background-color: #fff; }

  #header-desktop { display: none; }
  #header-mobile-logo { display: block; height: 60px; }
  #header-mobile-logo img { display: block; height: 60px; margin: 0 auto; }

  #wrap-mypage .hamburger-menu { display: block; position: absolute; top: 0px; padding: 20px; font-size: 16px; cursor: pointer; }

  #donate-confirm-page-background > header { border-bottom: 1px solid #9C9C9C; }
  #support-page-background > header { border-bottom: 1px solid #9C9C9C; }
  #login-page-background > header { border-bottom: 1px solid #9C9C9C;}
}


@media screen and (max-width: 767px) {
  #topcontrol { display: block; }
  .form-midsubmit { padding: 0 4%; }
}


/*
 * footer
 */

.footer-mobile { display: none; }
.footer-pc { padding: 0 0 0 120px }
.company-info-pc { font-size: 14px; font-weight: 300; line-height: 1.6; text-align: left; padding: 35px 0 0 0; color: #636363; }
.footer-pc-logo { margin: 26px 0 20px 0;}

/* mypage login 전용 */
#wrap-login .footer-pc, #wrap-mypage .footer-pc { padding: 0; }
#wrap-login .company-info-pc, #wrap-mypage .company-info-pc  { font-size: 14px; font-weight: 300; line-height: 1.6; padding: 35px 0 0 0; text-align: center; color: #636363; }
#wrap-login .footer-pc-logo, #wrap-mypage .footer-pc-logo { margin: 30px 0 30px 0; text-align: center; }

#wrap-login .login-mydonus > img { display: block; width: 260px; margin: 0 auto 20px; }
#wrap-login .login-mydonus .btn { background-color: #00bb7b; border: 1px solid #01b175; width: 100%; height: 60px; color: white; font-size: 15px; padding: 0; display: inline-block;}
#wrap-login .login-mydonus .btn .img-left { float: left; margin: 0px 0 0 20px; height: 100%;}
#wrap-login .login-mydonus .btn p { float: left; margin: 20px 0 20px 20px; }
#wrap-login .login-mydonus .btn .img-right { float: right; margin: 0 20px 0 0; }

#wrap-login .login-mydonus-register { margin-top: 20px; }
#wrap-login .login-mydonus-register a { text-decoration: underline }


@media screen and (max-width: 1024px) {
  .footer-pc { padding: 0; }
  .company-info-pc { text-align: center; }
  .footer-pc-logo { margin: 30px 0 30px 0; text-align: center; }
}

@media screen and (max-width: 991px) {
  .footer-mobile { display: block; margin: 0 auto; padding: 50px 0 30px 0; line-height: 1.4; }
  .footer-mobile-logo img { width: 146px; }
  .footer-pc { display: none; }

  .company-info-mobile { margin: 0 auto; text-align: center; color: #636363; font-weight: 300; }
  .company-info-mobile-title { font-size: 13px; padding-bottom: 12px; }
  .company-info-mobile-description { font-size: 13px; line-height: 1.4; }

  .footer-mobile-logo{ margin: 30px 0 0 0; text-align: center; }

  #wrap-login .login-mydonus .btn p { margin: 20px 0 20px 10px; }
}


/*
 * nice select begin
 */

.nice { color: #2b2b2b; }

.nice-select { -webkit-tap-highlight-color: transparent; background-color: #fff; border: 1px solid #9C9C9C; box-sizing: border-box; cursor: pointer; display: block; float: left; font-family: 'Open Sans', 'NotoSansKR', sans-serif; font-size: 15px; font-weight: 400; height: 45px; line-height: 45px; color: #0F0F0F; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: 93px; }
.nice-select.nice02 {width: 382px !important;}
.nice-select.nice03 {width: 114px !important;}
.nice-select.nice04 {width: 386px !important;}
.nice-select.nice05 {width: 179px !important;}
.nice-select.nice06 {width: 250px !important;}
.nice-select.nice07 {width: 114px !important;}
.nice-select.nice08 {width: 95px !important; height:30px;line-height: 30px;background-color: #fff;}
.nice-select.nice09 {width: 95px !important; height:30px;line-height: 30px;background-color: #fff; font-size: 14px;}
.nice-select.nice10 {width: 205px !important;}
.nice-select.nice11 {width: 312px !important;}
.nice-select.nice12 {width: 97px !important;}
.nice-select.nice13 {width: 504px !important; text-align: center !important;}
.nice-select:hover, .nice-select:active, .nice-select.open, .nice-select:focus { border: 1px solid #2b2b2b; }
.nice-select:after { content: ""; position: absolute; top: 50%; right: 10px; width: 0; height: 0; margin-top: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #939498; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.nice-select-non-arrow:after { content: none; }

.nice-select.open:after { border-top: 5px solid #000; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }
.nice-select.open .list_wrap { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }

.nice-select.disabled { background-color: #F0F0F0; border-color: #9C9C9C; color: #7F7F7F; pointer-events: none; }
.nice-select.disabled2 { pointer-events: none; background-color: #F0F0F0 !important; color: #0F0F0F !important; }
.nice-select.disabled:after { border-color: #F0F0F0; }

.nice-select.wide { width: 100%; }
.nice-select.wide .list_wrap { left: 0 !important; right: 0 !important; }

.nice-select.right { float: right; }
.nice-select.right .list_wrap { left: auto; right: 0; }

.nice-select.small { font-size: 12px; height: 36px; line-height: 34px; }
.nice-select.small:after { height: 4px; width: 4px; }
.nice-select.small .option { line-height: 34px; min-height: 34px; }

.nice-select .list_wrap { background-color: #fff; border: 1px solid #2b2b2b; width: 100%; box-sizing: border-box; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scaleY(0.5) translateY(0); -ms-transform: scaleY(0.5) translateY(0); transform: scaleY(0.5) translateY(0); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; left: -1px !important; right: 0 !important; }

.scroll-pane { width:100%; }

.nice-select .option { cursor: pointer; font-size: 15px; line-height: 45px; min-height: 45px; list-style: none; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; }
  .nice-center { text-align: center !important; padding-left: 0px !important; padding-right: 0px !important;}
.nice-select .option:hover { background-color: #F0F0F0; }
.nice-select .option.focus { background-color: #F0F0F0; }
.nice-select .option.selected { background-color: #F0F0F0; }
.nice-select .option.disabled { background-color: transparent; color: #999; cursor: default; }

.no-csspointerevents .nice-select .list_wrap { display: none; }
.no-csspointerevents .nice-select.open .list_wrap { display: block; }

.tab_radio { border:1px solid #9C9C9C; }
.tab_radio.active { border:1px solid #000; }
.id-hyphen { opacity: 0; }



 @media screen and (max-width: 767px) {
    .nice-select { display: none !important; width: 22% !important; height: 36px; line-height:32px; font-size: 13px; }
    .nice-select .option { height:32px !important; line-height:32px !important; min-height: 32px !important; font-size: 13px; }
      .nice-center { text-align: inherit !important; padding-left: 0px !important; padding-right: 0px !important;}
    .nice-select select { height: 32px;  /* 높이 초기화 */ }


    select.nice { width: 20.6% !important; border: solid 1px #9C9C9C; box-sizing: border-box; cursor: pointer; display: block !important; float: left; font-size: 14px; font-weight: 400; height: 40px; line-height: 40px; -webkit-appearance:none; border-radius:0;
 	  background: url(../img/service/select_bgM.png) right center no-repeat; margin-right: 0; padding-left: 10px; }
 	  select.nice-non-arrow { background: none !important;}
      select.nice02 {width: 70% !important;}
 	  select.nice03 {width: 20.6% !important;}
 	  select.nice04 {width: 70% !important;}
 	  select.nice05 {width: 33.5% !important;}
 	  select.nice06 {width: 70% !important;}
 	  select.nice07 {width: 70% !important;}
    select.nice08 {width: 30% !important; height: 30px;line-height: 30px; background-color: #fff;}
    select.nice09 {width: 95px!important; height: 30px;line-height: 30px; background-color: #fff; font-size: 14px;}
    select.nice10 {width: 95px !important;}

    select.nice10.disabled {
      width: 95px !important;
      background-color: #F0F0F0;
      border-color: #9C9C9C;
      color: #7F7F7F;
      pointer-events: none;
    }

    select.nice03.disabled {
      background: #F0F0F0;
      border-color: #9C9C9C;
      color: #7F7F7F;
      pointer-events: none;
      opacity: 1; /* select:disabled 기본 스타일의 opacity: 0.7 속성  */
    }

    select.nice04.disabled {
      width: 70% !important;
      background-color: #F0F0F0;
      border-color: #9C9C9C;
      color: #7F7F7F;
      pointer-events: none;
    }
    select.nice11 {width: 69% !important;}
    select.nice12 {width: 19% !important;}
    select.nice13 {width: 100% !important;
      padding-left: calc(50% - 1em) !important;
    }
 	  .id-hyphen { display: none; }
 	  .idNum-inputSet { float: left; width: 70%; }
 	  .idNum-inputSet .idNum-input { float: left; width: 47%; }
    .idNum-inputSet .idNum-input03 { float: left; width: 20%; }

    /* SBL; : 위치이동 필요 */
    #login-page-left select.nice {
        width: 21.9% !important;
    }

    .mypage-payment-info-box-content { margin-top: 52px !important; padding: 0 10px 0 10px !important; }
 	  #donate-page-left .choose-method { width: 34.6%; }
 }


 /* 지정모드 텍스트 ADD MHI 170327 위치이동 SBL 180201 */
 #productname, #parentproductname, #giftchildname { display: table-cell; vertical-align: middle; width: 60%; height: 45px; line-height: 20px; }


@media screen and (max-width: 767px) {
  #productname, #parentproductname, #giftchildname { height: 36px; font-size: 13px; }
}

/* radio button*/

.dtype input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.dtype input[type="radio"] + label { display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; display: inline-block; text-align: center; vertical-align: middle; border: 1px solid #9C9C9C; color: #2B2B2B; background-color: #F0F0F0; box-sizing: border-box; }
.dtype input[type="radio"]:checked + label { content: ''; }

.pay-dtype input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.pay-dtype input[type="radio"] + label { display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; display: inline-block; text-align: center; border: 1px solid #d4d4d4; color: #2B2B2B; box-sizing: border-box; }
.pay-dtype input[type="radio"]:checked + label { content: ''; }


/* 폼 스타일 */


.step_list { float: left; }
.step_list li { float: left; width: 146.25px; }
.step_list li:first-child { margin-left: 0; }
.step_list li.mln { margin-left: 0; }
.step_list li.mt1m { margin-top: -1px; }
.step_list02 { width: 80%; }
.step_list02 li { width: 179px; margin-right: 24px; }
.step_list02 .dtype input[type="radio"] + label { width: 179px; height: 45px; line-height: 45px; }

.step_list03 { width: 80%; }
.step_list03 li { width: 179px; }
.step_list03 li:first-child { margin-right: 24px; }
.step_list03 .dtype input[type="radio"] + label { width: 179px; height: 45px; line-height: 45px; }

.step_list04 { width: 80%; }
.step_list04 li { width: 22%; margin-left: 15px; margin-bottom: 15px; }
.step_list04 li:first-child { margin-left: 0; }
.step_list04 li:nth-child(4n + 1) { margin-left: 0; }
.step_list04 .dtype input[type="radio"] + label { width: 100%; height: 45px; line-height: 45px; }

.step_list05 { width: 546px; }
.step_list05 li { width: 170px; height: 53px;  margin-left: 15px; margin-bottom: 18px; }
.step_list05 li:nth-child(3n + 1) { margin-left: 0; }
.step_list05 .dtype input[type="radio"] + label { width: 100%; height: 100%; line-height: 100%; }

.step_list04 .step_list04_input { width: 100%; height: 45px; line-height: 45px; text-align: center; border: 1px solid #9C9C9C; background: #F0F0F0; }



/* 위치이동 SBL 180201 */
#donate-page-frame .step_list02 li label { width: 100%; height: 45px; line-height: 45px; text-align: center; }
#donate-page-frame .step_list03 label { width: 100%; height: 45px; text-align: center; }
#donate-page-frame .step_list04 label { width: 100%; text-align: center; }
#donate-page-frame .step_list05 label { width: 100%; height: 54px; text-align: center; }

@media screen and (max-width: 767px) {
  #donate-page-frame .step_list03 label { height: 40px; line-height: 40px; font-size: 14px; }
  #donate-page-frame .step_list04 label { height: 40px; line-height: 40px; font-size: 14px; }
  #donate-page-frame .step_list05 label { height: 100%; font-size: 14px; }
}

/*
 * Mypage login
 */

#login-page-frame { width: 100%; height: 100%; margin: 0 auto; }

.login-page-outer { display: table; width: 100%; height: 761px; }
.login-page-inner { display: table-cell; vertical-align: middle; text-align: center; }
.login-page-centered { position: relative; display: inline-block; width: 992px; }
.login-page-centered-half { position: relative; display: inline-block; width: 496px; }

#login-page-left { background-color: #fff; width: 496px; height: 641px; padding: 65px 45px 0 45px; float: left; font-size: 15px; text-align: left; }

.login-page-left-title { padding-bottom: 46px; }
.login-page-left-title >  h1 { display: block; padding-bottom: 20px; font-size: 24px; font-weight: 400; text-align: left; color: #2B2B2B; }
.login-page-left-title > p { font-size: 14px; line-height: 1.5; }

#login-page-left .form-row { width: 100%; height: 48px; margin-bottom: 20px; border-bottom: none; }
#login-page-frame .form-row > label { float: left; width: 100px; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; color: #000000; }

#login-page-left .desc-box { height: auto; float: left; width:  146.25px; margin-left: 100px; padding-top: 10px; }
#login-page-left .desc-rowAuto { width: 206px; height: auto; padding-bottom: 15px; border-bottom: none; }

#login-page-left .content-stress { color : #30B34D; }

#login-page-left .auth li { width: 146.25px; float: left; }
#login-page-left .auth label { box-sizing: border-box; display: inline-block; position: relative; width: 146.25px; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; color: #000; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid #9C9C9C; background-color: #F0F0F0;}

#login-page-left .member-type li { width: 146.25px; float: left; }
#login-page-left .member-type label { box-sizing: border-box; display: inline-block; position: relative; width: 146.25px; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; color: #000; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid #9C9C9C; background-color: #F0F0F0;}


#login-page-left .select-phone { margin-right: 13.5px; }
#login-page-left .select-name { margin-right: 13.5px; }

#login-page-frame .form-row-contact > label { float: left; width: 100px; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; color: #000000; }
#login-page-left .form-row-contact { width: 100%; height: 45px; margin-bottom: 10px; border-bottom: none; }

#login-page-left .explain { width: 100%; height: 35px; margin-bottom: 9px; }
#login-page-left .explain-name { display: block; float: left; margin-left: 101px; font-weight: normal; font-size: 14px; border-bottom: 1px solid #2B2B2B; padding-bottom: 1px; text-decoration: none; cursor: pointer; }
#login-page-left .explain-name:hover { color: #2B2B2B; }
#login-page-left .explain-icon { display: block; float: left; padding-left: 5px; padding-top: 1px; }
#login-page-left .explain-icon:hover .explain-text1 { display: block; }
#login-page-left .explain-text1 { width: 250px; height: auto; position: absolute; background-color: #2B2B2B; color: #FFF; display: none; font-size: 14px; margin-left: -113px; margin-top: 10px; line-height: 1.5; padding: 18px; font-weight: 100; }
.explain-text1:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-bottom-color: #2B2B2B; border-width: 7px; margin-left: -12px; }

#login-page-left .input-name, #login-page-left .choose-call, #login-page-left .choose-email { width: 146.25px; height: 45px; line-height: 45px; }
#login-page-left .input-name { padding: 0 0 0 18px; border: 1px solid #9C9C9C; font-weight: 400; }

#login-page-left .choose-tab { float: left; width: 100px; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; text-align: left; color: #2B2B2B; }
#login-page-left .choose-call, #login-page-left .choose-email { text-align: center; background-color: #F0F0F0; }
#login-page-left .choose-call { margin-right: 11px; }
#login-page-left .choose-email a { display: block; border: 1px solid #9C9C9C !important; height: 45px; line-height: 45px; border-radius: 0px !important; color: #000; font-weight: 300; padding: 0 !important; margin-right: 0 !important; }
#login-page-left .choose-call a { display: block; border: 1px solid #9C9C9C !important; margin-right: 0 !important; height: 45px; line-height: 45px; border-radius: 0px !important; color: #000; font-weight: 300; padding: 0 !important; }
#login-page-left .select-call { float: left; width: 91px; height: 45px; color: #9C9C9C; padding: 0 18px; border: 1px solid #9C9C9C; }
#login-page-left .select-call option { text-align: center; }

#login-page-left .hyphen { float: left; text-align: center; width: 13.5px; height: 45px; line-height: 45px; color: #9C9C9C; }

#login-page-left .input-call { float: left; width: 93px; height: 45px; line-height: 45px; text-align: center; padding: 0 !important; border: 1px solid #9C9C9C; }
#login-page-left .input-bizno { float: left; width: 93px; height: 45px; line-height: 45px; text-align: center; padding: 0 !important; border: 1px solid #9C9C9C; }
#login-page-left .input-email { width: 306px; height: 45px; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 18px; border: 1px solid #9C9C9C; }
#login-page-left .input-number { width: 140px; height: 45px; padding-left: 18px; border: 1px solid #9C9C9C; }

#login-page-left .explain span .question_w { display: block; width: 13px; height: 13px; background: url('../img/service/question-mark.png') no-repeat center center; -webkit-background-size: 100%; background-size: 100%; }
#login-page-left .explain span .question_w:hover { background: url('../img/service/question-mark_webH.png') no-repeat center center; }
#login-page-left .explain span .question_m { display: none; }
#login-page-left .comment { color:#888888; font-size:13px; line-height: 19px;}

#login-page-right { width: 496px; height: 641px; position: relative; display: table;; background: #000000; overflow: hidden; }
#login-page-right:before {content: '';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;opacity: 0.8;background-repeat: no-repeat;background-position: 50% 0;-ms-background-size: cover;-o-background-size: cover;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover; }

#login-page-right .text-frame { display: table-cell; vertical-align: middle; padding: 0 30px; }

#login-page-right h1 { font-size: 32px; line-height: 1.5; text-align: center; color: #ffffff; z-index: 2; position: relative; }


@media screen and (max-width: 1024px) {

  #login-page-right { display: none; }
  #login-page-left { float: none; margin: 0 auto;
  }

  .login-page-centered { width: 100%; display: block; }
  .login-page-centered-half { width: 100%; display: block; }
}


@media screen and (max-width: 767px) {

  #login-page-frame { background-color: #fff; margin: 0; }
  #login-page-left { width: 100%; height: auto; padding: 60px 4% 35px 4%; }


  .login-page-outer { display: block; min-height: 0; height: 567px; }
  .login-page-inner { display: block; }

  #login-page-left .form-row { margin-bottom: 19px; height: 40px; line-height: 40px; }
  #login-page-left .form-row-contact { margin-bottom: 10px; height: 40px; line-height: 40px; }

  #login-page-left h1 { font-size: 25px; }
  #login-page-frame .form-row > label { float: left; width: 26%; height: 40px; line-height: 40px; font-size: 14px; }

  #login-page-left .auth label { height: 40px; line-height: 40px; width: 100%; font-size: 14px; }
  #login-page-left .auth li { width: 34.95%; }

  #login-page-left .member-type label { height: 40px; line-height: 40px; width: 100%; font-size: 14px; }
  #login-page-left .member-type li { width: 34.95%; }

  #login-page-left .desc-box { margin-left: 26%; padding-top: 0px; height: 45px;}
  #login-page-left .select-phone { margin-right: 4.1%; }
  #login-page-left .select-name { margin-right: 4.1%; }
  #login-page-left-title p { word-break: keep-all; }

  #login-page-left .input-name { width: 74%; height: 40px; line-height: 40px; font-size: 14px; font-weight: 400; padding: 0 10px; border: 1px solid #9C9C9C; }
  #login-page-left .choose-tab { width: 25.86%; height: 40px; line-height: 40px; font-size: 14px; }
  #login-page-left .choose-call { margin-right: 3.9%; }
  #login-page-left .choose-call, #login-page-left .choose-email { width: 35%; height: 40px; line-height: 40px; font-size: 14px; }
  #login-page-left .choose-call a, #login-page-left .choose-email a { display: block; height: 40px; line-height: 40px; }
  #login-page-left .select-call { width: 22%; height: 40px; line-height: 40px; color: #9C9C9C; padding: 0 0px; font-size: 14px; }

  #login-page-frame .form-row-contact > label { width: 26%; }

  #login-page-left .input-email { width: 74%; height: 40px; line-height: 40px; font-size: 14px; padding-left: 10px; }
  #login-page-left .input-call { height: 40px; line-height: 40px; font-size: 14px; }
  #login-page-left .input-bizno { height: 40px; line-height: 40px; font-size: 14px; }

  #login-page-left .hyphen { width: 4.1%; height: 40px; line-height: 40px; }

  #login-page-left .explain-icon { padding-top: 0px; }
  #login-page-left .explain-name { margin-left: 25.86%; cursor: pointer; }
  #login-page-left .explain-text1 { margin-left: -110px; }

  #login-page-left .input-number { width: 40%; height: 40px; line-height: 40px; font-size: 14px; padding: 0 10px; }

  #login-page-left .explain-name2 { font-size: 14px; }
  #login-page-left .explain3 span { font-size: 14px; }

  .dtype.mr11 { margin-right: 6%; }

  .step_list02 { width: 70%; }
  .step_list02 li { width: 47% !important; margin-right: 0px !important; }
  .step_list02 li:first-child { margin-right: 6% !important; }
  .step_list02 li label { height: 40px !important; line-height: 40px !important; }

  .step_list03 { width: 70%; }
  .step_list03 li { width: 47% !important; }
  .step_list03 li:first-child { margin-right: 6%; }
  .step_list03 li label { height: 40px !important; }
  .step_list03 .dtype input[type="radio"] + label { width: 100% !important; height: 40px; line-height: 40px !important; }

  .step_list04 { width: 70%; }
  .step_list04 li { width: 47% !important; margin-left: 6%; margin-bottom: 9px; }
  .step_list04 li:nth-child(5n) { margin-left: 6%; }
  .step_list04 li:nth-child(odd) { margin-left: 0; }
  .step_list04 li.ml0p { margin-left: 0; }
  .step_list04 li.ml26p { margin-left: 26px; }
  .step_list04 li label { height: 40px !important; }
  .step_list04 .dtype input[type="radio"] + label { width: 100% !important; height: 40px; line-height: 40px !important; margin-bottom: 9px; }
  .step_list04 .step_list04_input { width: 100%; height: 40px; line-height: 40px; text-align: center; border: 1px solid #9C9C9C !important; background: #F0F0F0; font-size: 14px; margin-bottom: 9px;}

  .step_list05 { width: 100%; }
  .step_list05 li { width: 49% !important; margin-left: 6%; margin-bottom: 9px; }
  .step_list05 li:nth-child(even) { margin-left: 2%; }
  .step_list05 li:nth-child(odd) { margin-left: 0; }
  .step_list05 .dtype input[type="radio"] + label { width: 100% !important; height: 100%; margin-bottom: 9px; }
  .step_list05 .step_list05_input { width: 100%; height: 40px; line-height: 40px; text-align: center; border: 1px solid #9C9C9C !important; background: #F0F0F0; font-size: 14px; margin-bottom: 9px;}

  #login-page-left .input-call { width: 21.9%; padding-left: 9px; }
  #login-page-left .input-bizno { width: 21.9%; padding-left: 9px; }
  #login-page-left .explain span .question_w { display: none; }
  #login-page-left .explain span .question_m { display: block; width: 16px; height: 16px; margin-top: -1px; margin-left: 2px; background: url('../img/service/question-mark_M.png') no-repeat center center; -webkit-background-size: 100%; background-size: 100%; }
  #login-page-left .explain span .question_m:hover { background: url('../img/service/question-mark_MH.png') no-repeat center center; -webkit-background-size: 100%; background-size: 100%; }

  #donate-page-left .explain-name { margin-left: 30% !important; }
}


/* Mypage - Record, Recipt */

#support-page-frame { overflow: hidden; width: 100%; max-width: 1094px; padding: 100px 0 100px 0; margin: 0 auto; }

#nav { width: 234px; float: left; }
#nav .member { width: 100%; height: 142px; padding: 36px 10px 0 40px; }
#nav .member ul { list-style-type: none; font-size: 14px; font-weight: normal; }
#nav .member li { margin: 0 0 8px 0; font-size: 13px; font-weight: 300; }
#nav .member span { font-size: 18px; font-weight: 300; }

#nav .logout { display: inline-block; width: 70px; height: 25px; margin: 13px 0 0 0; padding: 5px 0 0 0; font-size: 12px; text-align: center; cursor: pointer; text-decoration: none; }
#nav .mydonus { display: inline-block; width: 80px; height: 25px; margin: 13px 0 0 0; padding: 5px 0 0 0; font-size: 12px; text-align: center; cursor: pointer; text-decoration: none; }
#nav .logout:hover { color: inherit; }
#nav .mydonus:hover { color: inherit; }

#nav .menu { list-style-type: none; margin: 0; padding: 0; width: 100%; font-size: 14px; font-weight: 300; }
#nav .menu li a { display: block; text-decoration: none; padding: 17px 0 0 40px; height: 50px; }
#nav .menu li i { float: right; padding-right: 20px; }
.support-content-frame { width: 860px; max-width: 860px; box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.35); float: left; background-color: #ffffff; }
.support-content { padding: 65px 80px 56px 80px; }
.support-content h1 { display: block; width: 100%; font-size: 24px; font-weight: 400; text-align: left; color: #2B2B2B; padding-bottom: 35px; }
.support-content h2 { display: block; width: 100%; font-size: 18px; font-weight: 400; text-align: left; color: #2B2B2B; margin: 0 0 20px 0; }
.support-content .second-h2 { display: block; width: 100%; font-size: 18px; font-weight: 400; text-align: left; color: #2B2B2B; margin: 40px 0 20px 0; }

.support-content p { display: block; width: 100%; font-size: 14px; font-weight: 400; text-align: left; color: #2B2B2B; line-height: 1.6; height: auto; margin-bottom: 20px; }
.payment-content-frame .support-content p { display: block; width: 100%; font-size: 14px; font-weight: 400; text-align: left; color: #2B2B2B; padding-bottom: 30px; line-height: 1.6; }

.org-certificate { display: block; font-size: 14px; padding: 0 0 10px 0; text-align: right; text-decoration: underline; color: #2B2B2B; font-weight: 400; }
.withdrawal-agreement { display: block; font-size: 14px; padding: 0 0 10px 0; text-align: left; text-decoration: underline; color: #2B2B2B; font-weight: 400; }

.mypage-table-record { border: 1px solid #D4D4D4; font-size: 13px; font-weight: normal; width: 100%; }
.mypage-table-record thead { border: 1px solid #D4D4D4; }
.mypage-table-record th { height: 48px; background-color: #F0F0F0; vertical-align: middle; color: #636363; font-weight: normal; }
.mypage-table-record td { height: 64px; vertical-align: middle; }

.mypage-table-record .th-1 { width: 44%; padding: 0 0 0 3%; }
.mypage-table-record .th-2 { width: 10%; text-align: center; }
.mypage-table-record .th-3 { width: 15%; text-align: center; }
.mypage-table-record .th-4 { width: 13%; text-align: center; }
.mypage-table-record .th-5 { width: 18%; text-align: center; }

.mypage-table-record .td-1 { padding: 0 0 0 3%; }
.mypage-table-record .td-2 { text-align: center; }
.mypage-table-record .td-3 { text-align: center; }
.mypage-table-record .td-4 { text-align: center; }

.mypage-table-payment { border: 1px solid #D4D4D4; font-size: 13px; font-weight: normal; width: 100%; }
.mypage-table-payment thead { border: 1px solid #D4D4D4; }
.mypage-table-payment th { height: 48px; background-color: #F0F0F0; vertical-align: middle; color: #636363; font-weight: normal; }
.mypage-table-payment td { height: 64px; vertical-align: middle; }

.mypage-table-payment .th-1 { width: 7%; padding: 0 0 0 3%; }
.mypage-table-payment .th-2 { width: 21%; text-align: center; }
.mypage-table-payment .th-3 { width: 47%; }
.mypage-table-payment .th-4 { width: 25%; text-align: center; }

.mypage-table-payment .td-1 { padding: 0 0 0 3%; }
.mypage-table-payment .td-2 { text-align: center; }
.mypage-table-payment .td-4 { text-align: right; padding-right: 8%; }

.mypage-table-receipt { border: 1px solid #D4D4D4; font-size: 13px; font-weight: normal; width: 100%; }
.mypage-table-receipt thead {border: 1px solid #D4D4D4; }
.mypage-table-receipt th { height: 48px; background-color: #F0F0F0; vertical-align: middle; color: #636363; font-weight: normal; }
.mypage-table-receipt td { height: 64px; vertical-align: middle; }

.mypage-table-receipt .th-1 { width: 25%; padding: 0 0 0 3%; }
.mypage-table-receipt .th-2 { width: 25%; }
.mypage-table-receipt .th-3 { width: 25%; }
.mypage-table-receipt .th-4 { width: 25%; text-align: center; }

.mypage-table-receipt .td-1 { padding: 0 0 0 3%; }
.mypage-table-receipt .td-4 { text-align: center; }

.mypage-list-none { text-align: center; }

.view-button { display: block; width: 80px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #2B2B2B; background-color: #fff; margin: 0 auto; text-decoration: none !important; cursor:pointer; color: #2B2B2B; }
.view-button-h48 { display: block; width: 80px; height: 48px; line-height: 48px; text-align: center; border: 1px solid #2B2B2B; background-color: #fff; text-decoration: none !important; cursor:pointer; color: #2B2B2B; }
.view-button:hover { color: #2B2B2B; }
.view-button-h48:hover { color: #2B2B2B; }

.mypage-info-box-content { list-style: none; text-indent: -0.8em; color: #636363; font-size: 14px; font-weight: 300; line-height: 1.6; margin: 40px 0 0 10px; }
.mypage-payment-year-box-container { display:inline-block; box-sizing: border-box; width: 100%; }
.mypage-payment-year-box-container > * { float: right !important; }
.mypage-payment-info-box-content { background-color: #fcfcfc; font-size: 14px; border: 1px solid #D4D4D4; line-height: 50px; color: #2B2B2B; font-weight: 300; list-style: none; padding: 0 20px 0 20px; word-break: keep-all; margin: 17px 0 20px 0; }

.mypage-highlight-payment-info-box-container { border-bottom: solid 1px #D4D4D4; margin-bottom: 35px; }
.mypage-highlight-payment-info-box-content { background-color: #fcfcfc; font-size: 14px; border: 1px solid #D4D4D4; line-height: 50px; color: #2B2B2B; font-weight: 300; list-style: none; padding: 0 20px 0 20px; word-break: keep-all; margin: 20px 0 35px 0; }
.mypage-highlight-payment-info-box-content a { text-decoration: underline; }
.receipt-content-frame { width: 860px; max-width: 860px; float: left; background-color: #fff; box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.35); }
.payment-content-frame { width: 860px; max-width: 860px; float: left; background-color: #fff; box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.35); }
.memberinfo-content-frame { width: 860px; max-width: 860px; float: left; background-color: #fff; box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.35); }
.recordinfo-content-frame { width: 860px; max-width: 860px; float: left; background-color: #fff; box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.35); }
#pay-method-div { padding-top: 13px; margin-bottom: 18px; }
#pay-method-update-link-container { text-decoration:underline; line-height:normal; cursor:pointer; margin-left:20%; }
#paymethodresultdetail { margin-bottom: 18px; margin-left: 20%; }

.hide-when-proof-disabled label { line-height: 1.5; }
.hide-when-proof-disabled.send_ars_txt { text-decoration: underline; cursor: pointer; padding-left: 21%; }
.useProofDetail { margin-top: 23px; margin-bottom: 7px; height: auto; }

#recordinfo-page-right #regularcardexpiremonth { width:32% !important; }
#recordinfo-page-right #regularcardexpireyear { width:40% !important; }

#promise-end-link-container { text-decoration:underline; line-height:normal; cursor:pointer; margin-left:20%; display: inline-block; font-size: 15px; }
#promise-end-reason-detail { border-radius: 0; border: 1px solid rgb(156, 156, 156); width: 79%; height: 85px; max-width:79%; max-height: 500px; padding: 12px; }
.ischargingdetail { font-weight: 400; font-size: 15px; box-shadow:none !important; color: red; padding-left: 3px; margin-bottom: 20px; }
#monthly-pay-price-update-link-container { text-decoration:underline; line-height:normal; cursor:pointer; margin-left:20%; display: inline-block; }


@media screen and (max-width: 1151px) {

  #support-page-frame { max-width: 974px; }

  .support-content-frame { width: 740px; max-width: 740px; }
  .support-content { padding: 65px 20px 56px 20px; }

  .receipt-content-frame { width: 740px; max-width: 740px; }
  .payment-content-frame { width: 740px; max-width: 740px; }
  .memberinfo-content-frame { width: 740px; max-width: 740px; }
  .recordinfo-content-frame { width: 740px; max-width: 740px; }
}


@media screen and (max-width: 1024px) {

  .support-content-frame { float: none; overflow: auto; margin: 0 auto; }
  .receipt-content-frame { float: none; overflow: auto; margin: 0 auto; }
  .payment-content-frame { float: none; overflow: auto; margin: 0 auto; }
  .memberinfo-content-frame { float: none; overflow: auto; margin: 0 auto; }
  .recordinfo-content-frame { float: none; overflow: auto; margin: 0 auto; }

  #nav { position: fixed; top: 0px; left: 0px; width: 70%; height: 100%; float: none; z-index: 3;
    /* This trasform moves the drawer off canvas. */
    -webkit-transform: translate(-1024px, 0);
    -moz-transform: translate(-1024px, 0);
    -o-transform: translate(-1024px, 0);
    transform: translate(-1024px, 0);
    /* Optionally, we animate the drawer. */
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease; }

  #nav.open { -webkit-transform: translate(0, 0); transform: translate(0, 0); overflow: auto; }

  .dimmed::before { content: ''; display: block; position: fixed; width: 100%; height: 100%; z-index: 1; background-color: #222; opacity: 0.5; }
  .overflowHidden { overflow: hidden; }

}


@media screen and (max-width: 767px) {

  #support-page-frame { padding: 0; }

  .support-content-frame { width: 100%; max-width: 100%; }
  .support-content { width: 100%; padding: 60px 4% 35px 4%; margin: 0 auto; }
  .support-content h1 { padding: 0; }

  .support-content p { margin: 0; padding: 0; word-break: keep-all; height: auto; margin: 25px 0 30px 0;}
  .payment-content-frame .support-content p { margin: 25px 0 35px 0; padding: 0; word-break: keep-all; }
  .support-content h2 { margin: 0 0 15px 0; font-size: 16px; }
  .support-content .second-h2 { margin: 50px 0 15px 0; font-size: 16px; }

  #support-page-frame table { display: block; border: none; }
  #support-page-frame thead { display: block; border: 1px solid #2B2B2B; }
  #support-page-frame tbody { display: block; }
  #support-page-frame th { display: block; }
  #support-page-frame tr { display: block; padding: 0 0 20px 0; border-bottom: 1px solid #2B2B2B; }

  #support-page-frame thead tr { position: absolute; top: -9999px; left: -9999px; }
  #support-page-frame td { display: block; position: relative; padding: 12px 0 0 30%; height: 35px; font-weight: 300; font-size: 14px; text-align: left; }
  #support-page-frame td:before { position: absolute; left: 6px; content: attr(data-th); font-weight: 300; }
  #support-page-frame td:first-of-type { font-weight: 300; font-size: 14px; margin: 10px 0 0 0; }
  #support-page-frame .mypage-list-none { text-align: center; padding: 15px 0 0 0; }

  .view-button { margin: 0; }
  .view-button-h48 { height: 40px !important; line-height: 40px; margin: 0; }

  .mypage-info-box-content { background-color: #F0F0F0; font-size: 13px; word-break: keep-all; line-height: 1.6; color: #7F7F7F; padding: 15px 25px 15px 25px; margin: 30px 0 0 0; border: none; }

  .mypage-info-box-content li { padding: 0 0 5px 0; }
  .mypage-info-box-content li:last-child { padding: 0; }

  .receipt-content-frame { max-width: 100%; width: 100%; margin: 0 auto; }
  .payment-content-frame { max-width: 100%; width: 100%; margin: 0 auto; }
  .memberinfo-content-frame { max-width: 100%; width: 100%; margin: 0 auto; }
  .recordinfo-content-frame { max-width: 100%; width: 100%; margin: 0 auto; }
  .org-certificate { font-size: 13px; }

}

/*회원정보 수정 페이지 */

#memberinfo-page-right .form { border-bottom: 1px solid #2B2B2B; padding-bottom: 38px; }
#memberinfo-page-right .form-info-box-container { width: 100%;}
#memberinfo-page-right .form-info-box-content { background-color: #F0F0F0; font-size: 14px; line-height: 1.8em; color: #7F7F7F; font-weight: 300; list-style: none; margin: 30px 0 0 0; padding: 20px 40px 20px 40px; text-indent: -0.8em; word-break: keep-all; }

#memberinfo-page-right .input-name { padding: 0 18px; width: 182px; height: 45px; line-height: 45px; color: #0F0F0F; border: 1px solid #9C9C9C; }
#memberinfo-page-right .hyphen { width: 12px; height: 45px; line-height: 45px; float: left; text-align: center; color: #9C9C9C; }

#memberinfo-page-right.form-row .active>a, #memberinfo-page-right .form-row .active>a:focus, #memberinfo-page-right .form-row .active > a:hover { border: none !important; color: #fff !important; background-color: #222 !important; font-weight: bold; }

#memberinfo-page-right .input-call { float: left; width: 25%; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }
#memberinfo-page-right .input-phone { float: left; width: 25.1%; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }
#memberinfo-page-right .input-bizno { float: left; width: 80%; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }

#memberinfo-page-right .input-otp { float: left; width: 100%; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }
#memberinfo-page-right .input-date { float: left; width: 25%; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }
#memberinfo-page-right .input-call-desc { float: left; width: 23%; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }

#memberinfo-page-right .input-email { width: 80%; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; margin-right: 0px; border: 1px solid #9C9C9C; float: left; font-size: 15px; }
#memberinfo-page-right .idNum-input { float: left; width: 38.8%; height: 45px; }
#memberinfo-page-right .idNum-input02 { float: left; width: 48%; padding: 0 18px; height: 45px; font-size: 15px; color: #0F0F0F; border: 1px solid #9C9C9C !important; }
#memberinfo-page-right .idNum-input03 { float: left; width: 18%; padding: 0 18px; height: 45px; font-size: 15px; color: #0F0F0F; border: 1px solid #9C9C9C !important; -webkit-text-security:disc; -mox-text-security:disc;}
#memberinfo-page-right .idNum-input04 { float: left; width: 39%; padding: 0 18px; height: 45px; font-size: 15px; color: #0F0F0F; border: 1px solid #9C9C9C !important; }
#memberinfo-page-right .input-email-desc { float: left; width: 75%; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }

#memberinfo-page-right .desc-box { border: 1px solid #9C9C9C; height: auto; float: left; width:  80%; padding: 18px 18px 0 18px; margin-left: 20%; }
#memberinfo-page-right .desc-row { width: 100%; height: 63px; padding-bottom: 15px; border-bottom: none; }
#memberinfo-page-right .desc-rowAuto { width: 100%; height: auto; padding-bottom: 15px; border-bottom: none; }
#memberinfo-page-right .desc-box-title { height: auto; line-height: 30px; }
#memberinfo-page-right .desc-box-message { font-weight: normal; font-size: 14px; border-bottom: 1px solid #2B2B2B; padding-bottom: 1px; text-decoration: none; cursor: pointer; line-height: 45px; margin-left: 10px; }

#memberinfo-page-right .content-stress { color : #30B34D; }

#memberinfo-page-right .btn50 { width: 48.3%; height: 45px; line-height: 45px; border: 1px solid #9C9C9C; background-color: #F0F0F0; float: left; text-align: center; font-size: 15px; }

#memberinfo-page-right .form_message { display: inline-block; margin-left: 20%; font-weight: normal; font-size: 14px; border-bottom: 1px solid #2B2B2B; padding-bottom: 1px; text-decoration: none; cursor: pointer; }

#memberinfo-page-right .explain { width: 100%; height: 50px; }
#memberinfo-page-right .explain p { color: #ff0000; margin: 0; margin-left: 30%; padding-bottom: 10px; }
#memberinfo-page-right .explain-name { display: block; margin-left: 20%; font-weight: normal; font-size: 14px; border-bottom: 1px solid #2B2B2B; padding-bottom: 1px; text-decoration: none; cursor: pointer; }
#memberinfo-page-right .explain-name:hover { color: #2B2B2B; }
#memberinfo-page-right .explain-icon { display: inline-block; vertical-align: middle; margin-top: -3px; margin-left: 1px; }
#memberinfo-page-right .explain-icon:hover .explain-text1 { display: block; }

#memberinfo-page-right .explain-text1 { width: 250px; height: auto; position: absolute; background-color: #2B2B2B; color: #FFF; display: none; font-size: 14px; margin-left: -113px; margin-top: 10px; line-height: 1.5; padding: 18px; font-weight: 100; }

#memberinfo-page-right span .question_w { display: block; width: 13px; height: 13px; background: url('../img/service/question-mark.png') no-repeat center center; -webkit-background-size: 100%; background-size: 100%; }
#memberinfo-page-right span .question_w:hover { background: url('../img/service/question-mark_webH.png') no-repeat center center; }
#memberinfo-page-right span .question_m { display: none; }

#memberinfo-page-right .otpcheckbtn li { width: 200px; height: 45px; float: left; }
#memberinfo-page-right .otpcheckbtn label { box-sizing: border-box; margin-left: 10px; display: inline-block; width: 100px; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; color: #000; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid #9C9C9C; background-color: #F0F0F0; float: left; }

#memberinfo-page-right .authbtn li { width: 200px; height: 45px; float: left; }
#memberinfo-page-right .authbtn label { box-sizing: border-box; margin-left: 10px; display: inline-block; width: 100px; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; color: #000; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid #9C9C9C; background-color: #F0F0F0; float: left; }



#memberinfo-page-right .form-receipt  ul { width: 80%; float: right; }
#memberinfo-page-right .receiptissue-list li { width: 38.8%; height: 45px; float: left; }
#memberinfo-page-right .receiptissue-list li:first-child { margin-right: 12px;}
#memberinfo-page-right .receiptissue-list label { box-sizing: border-box; display: inline-block; width: 100%; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; color: #000; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid #9C9C9C; background-color: #F0F0F0; }

#memberinfo-page-right .input-number { width: 140px; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; margin-right: 0px; border: 1px solid #9C9C9C; float: left; }
#memberinfo-page-right .form-row { width: 100%; height: 63px; padding-bottom: 15px; border-bottom: none; }
#memberinfo-page-right .form-row02 {width: 100%;height: 63px;padding-bottom: 15px;border-bottom: none; }
#memberinfo-page-right .form-rowAuto { height: auto !important; overflow: hidden; padding-bottom: 10px; }
#memberinfo-page-right .form { border-bottom: 1px solid #2B2B2B; padding: 38px 0; width: 100%; display: flex; flex-wrap: wrap; }
#memberinfo-page-right .form.first { padding-top: 0px; }
#memberinfo-page-right .form.last { border-bottom: none; padding-bottom: 0; }
#memberinfo-page-right .form-title { width: 20%; float: left; height: auto; background-color: #f0f0f0; padding:  35px 18px; font-size: 15px; font-weight: 400; }
#memberinfo-page-right .form-content { width: 80%; float: left; height: auto; padding: 20px 0 0 25px; }
#memberinfo-page-right label { float: left; width: 20%; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; text-align: left; color: #2B2B2B; }
#memberinfo-page-right .form-row.subscribe-row { height: auto; padding-bottom: 35px; }
/* 다른 form-row의 label(height/line-height 45px)과 첫 줄 위치를 맞추기 위한 보정: (45 - 15*1.5) / 2 */
#memberinfo-page-right .subscribe-title-row { padding-top: 11px; padding-bottom: 11px; }
#memberinfo-page-right .subscribe-title-row > label { float: none; width: 100%; height: auto; line-height: 1.5; }
#memberinfo-page-right .subscribe-agree-row { display: flex; align-items: center; width: 100%; height: auto; padding-bottom: 0; margin: 14px 0 0 0; }
#memberinfo-page-right .subscribe-agree-row > label { height: 15px; line-height: 15px; font-size: 14px; }
#memberinfo-page-right .agree-options { display: flex; align-items: center; margin: 0; padding: 0; }
#memberinfo-page-right .agree-option { display: flex; align-items: center; margin: 0 50px 0 0; }
#memberinfo-page-right .agree-option .check-label { width: auto !important; height: 15px !important; line-height: 15px !important; margin-bottom: 0; float: none; }

#memberinfo-page-right .address-input-2 { width: 80%; height: 45px; line-height: 45px; background-color: #ffffff; margin-left: 20%; margin-bottom: 8px; border: 1px solid #9C9C9C; padding-left: 18px; }

#memberinfo-page-right input[type=password] { width:0;height:0;visibility:hidden;position:absolute;left:0;top:0; }

@media screen and (max-width: 767px) {
    #memberinfo-page-right { overflow: hidden; max-width: 100%; width: 100%; }
    #memberinfo-page-right .form-title { width: 100%; float: left; background: none; padding: 0 0 30px 0; font-size: 16px; font-weight: 400;}
    #memberinfo-page-right .form-content { width: 100%; float: left; padding: 0;}
    #memberinfo-page-right .form-row { height: 40px; line-height: 40px; margin-bottom: 18px; }
    #memberinfo-page-right .subscribe-row { margin-bottom: 0; }
    #memberinfo-page-right .form-row mt15{ margin-top: 15px; }
    #memberinfo-page-right .subscribe-title-row { padding-top: 0; padding-bottom: 0; }
    #memberinfo-page-right .form-row02 { height: 80px; line-height: 40px; margin-bottom: 18px; }
    #memberinfo-page-right .form_message { margin-left: 30%; font-size: 13px; }
    #memberinfo-page-right .form-info-box-content { font-size: 13px; line-height: 1.6; word-break: keep-all; padding: 15px 25px 15px 25px; }

    #memberinfo-page-right .desc-box { width: 100%; margin-left: 0; font-size: 14px; }
    #memberinfo-page-right .desc-row { width: 100%; height: 40px; line-height: 40px; margin-bottom: 18px; }
    #memberinfo-page-right .desc-box-message { font-size: 13px; margin-left: 8px; }

    #memberinfo-page-right .btn50 { width: 47.7%; height: 40px; line-height: 40px; border: 1px solid #9C9C9C; background-color: #F0F0F0; float: left; text-align: center; }

    #memberinfo-page-right .input-call-desc { width: 18%; height: 40px; line-height: 40px; padding-left: 5px; font-size: 14px; }
    #memberinfo-page-right .input-email-desc { width: 62%; height: 40px; line-height: 40px; color: #0F0F0F; padding-left: 10px; font-size: 14px; }

    #memberinfo-page-right label { width: 30%; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 40px; height: 40px; text-align: left; color: #2B2B2B; }

    #memberinfo-page-right .idNum-input { float: left; width: 47.8%; height: 40px; }
    #memberinfo-page-right .idNum-input02 { float: left; width: 47.8%; height: 40px; margin-left: 0px; }
    #memberinfo-page-right .idNum-input03 { width: 27%; font-size: 14px; padding-left: 8px; }
    #memberinfo-page-right .idNum-input04 { width: 37%; font-size: 14px; padding-left: 8px; }
    #memberinfo-page-right .input-name { width: 70%; font-size: 14px; height: 40px; line-height: 40px; padding-left: 10px; border: 1px solid #9C9C9C; }
    #memberinfo-page-right .input-phone { width: 20.6%; height: 40px; line-height: 40px; font-size: 14px; }
    #memberinfo-page-right .input-bizno { padding-left: 10px; width: 70%; height: 40px; line-height: 40px; font-size: 14px; }
    #memberinfo-page-right .input-date { width: 20.6%; height: 40px; line-height: 40px; font-size: 14px; padding-left: 10px; }
    #memberinfo-page-right .address-input-2 { width: 70%; margin-left: 30%; padding-left: 10px; font-size: 14px; height: 40px; line-height: 40px; }

    #memberinfo-page-right .hyphen { width: 4.1%; height: 40px; line-height: 40px; }
    #memberinfo-page-right .hyphen02 { width: 6%; }
    #memberinfo-page-right .hyphen03 { width: 4%; height: 30px; line-height: 30px; }

    #memberinfo-page-right .select-call { width: 20%; height: 40px; line-height: 40px; font-size: 14px; color: #9C9C9C; padding: 0 0 0 10px; }
    #memberinfo-page-right .input-call { width: 20.6%; font-size: 14px; height: 40px; line-height: 40px; padding-left: 10px; }
    #memberinfo-page-right .input-email { width: 70%; height: 40px; line-height: 40px; font-size: 14px; padding-left: 10px; }

    #memberinfo-page-right .explain { width: 100%; height: 50px; }
    #memberinfo-page-right .explain-name { margin-left: 30%; cursor: pointer; }

    #memberinfo-page-right .authbtn li { width: 20.6%; height: 45px; position: relative; float: right; }
    #memberinfo-page-right .authbtn label {  box-sizing: border-box;  position: relative;  margin-left: 10px;  margin-top: 18px;  display: inline-block;  width: 70%;  height: 45px;  line-height: 45px;  font-size: 15px;  font-weight: 400;  color: #000;  text-align: center;  vertical-align: middle;
    cursor: pointer; border: 1px solid #9C9C9C; background-color: #F0F0F0; float: right; }

    #memberinfo-page-right .otpcheckbtn li { width: 20.6%; height: 40px; position: relative; float: right; }
    #memberinfo-page-right .otpcheckbtn label { box-sizing: border-box; position: relative; margin-left: 10px; margin-top: 18px; display: inline-block; width: 20.6%; height: 40px; line-height: 40px; font-size: 15px; font-weight: 400; color: #000;text-align: center;vertical-align: middle;cursor: pointer;
    border: 1px solid #9C9C9C; background-color: #F0F0F0; float: right; }

    #memberinfo-page-right .input-number { width: 45%; height: 40px; line-height: 45px; color: #0F0F0F; padding-left: 18px; margin-right: 0px; margin-top: 18px; border: 1px solid #9C9C9C; float: left; }

    #memberinfo-page-right .form-receipt  ul { width: 70%; height: 40px; line-height: 40px; font-size: 14px; }
    #memberinfo-page-right .receiptissue-list li { width: 32.8%; height: 40px; float: left; }
    #memberinfo-page-right .receiptissue-list li:first-child { margin-right: 4.1%; }
    #memberinfo-page-right .receiptissue-list label { box-sizing: border-box; display: inline-block; height: 40px; width: 100%; line-height: 45px; font-size: 15px; font-weight: 400; color: #000; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid #9C9C9C; background-color: #F0F0F0; }
}


/*후원상세 페이지 */

#recordinfo-page-right .form { border-bottom: 1px solid #2B2B2B; padding-bottom: 38px; }
#recordinfo-page-right .form-info-box-container { width: 100%; }
#recordinfo-page-right .form-info-box-content { background-color: #F0F0F0; font-size: 14px; line-height: 1.8em; color: #7F7F7F; font-weight: 300; list-style: none; margin: 30px 0 0 0; padding: 20px 40px 20px 40px; text-indent: -0.8em; word-break: keep-all; }

#recordinfo-page-right .input-name { padding: 0 18px; width: 182px; height: 45px; line-height: 45px; color: #0F0F0F; border: 1px solid #9C9C9C; }
#recordinfo-page-right .hyphen { width: 12px; height: 45px; line-height: 45px; float: left; text-align: center; color: #9C9C9C; }

#recordinfo-page-right.form-row .active>a, #recordinfo-page-right .form-row .active>a:focus, #recordinfo-page-right .form-row .active > a:hover { border: none !important; color: #fff !important; background-color: #222 !important; font-weight: bold; }

#recordinfo-page-right .input-call { float: left; width: 25%; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }

#recordinfo-page-right .desc-box { border: 1px solid #9C9C9C; height: auto; float: left; width:  80%; padding: 18px 18px 0 18px; margin-left: 20%; }
#recordinfo-page-right .desc-row { width: 100%; height: 63px; padding-bottom: 15px; border-bottom: none; }
#recordinfo-page-right .desc-rowAuto { width: 100%; height: auto; padding-bottom: 15px; border-bottom: none; }
#recordinfo-page-right .desc-box-title { height: auto; line-height: 30px; }

#recordinfo-page-right .btn50 { width: 48.3%; height: 45px; line-height: 45px; border: 1px solid #9C9C9C; background-color: #F0F0F0; float: left; text-align: center; font-size: 15px; }
#recordinfo-page-right .btn40 { width: 38.3%; height: 45px; line-height: 45px; border: 1px solid #9C9C9C; background-color: #F0F0F0; float: left; text-align: center; font-size: 15px; }

#recordinfo-page-right .input-number { width: 140px; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; margin-right: 0px; border: 1px solid #9C9C9C; float: left; }
#recordinfo-page-right .form-row { width: 100%; height: 52px; border-bottom: none; }
#recordinfo-page-right .form-row02 {width: 100%;height: 63px;padding-bottom: 15px;border-bottom: none; }
#recordinfo-page-right .form-rowAuto { height: auto !important; overflow: hidden; }
#recordinfo-page-right .form { border-bottom: 1px solid #2B2B2B; padding: 38px 0; width: 100%; display: flex; flex-wrap: wrap;  }
#recordinfo-page-right .form-title { width: 20%; float: left; height: auto; background-color: #f0f0f0; padding:  35px 18px; font-size: 15px; font-weight: 400; }
#recordinfo-page-right .form-content { width: 80%; float: left; height: auto; padding: 20px 0 0 25px; }
#recordinfo-page-right label { float: left; width: 20%; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; text-align: left; color: #2B2B2B; }
#recordinfo-page-right .form-content .pay-method-div { font-size: 15px; font-weight: 400; text-align: left; color: #2B2B2B; }
#recordinfo-page-right .form-content .monthlypayprice-div { font-size: 15px; font-weight: 400; text-align: left; color: #2B2B2B; }

#recordinfo-page-right #paymethodtype_row label { width: 100%; height: 45px; text-align: center; }
#recordinfo-page-right #paymethod_row label { width: 100%; height: 45px; text-align: center; }
#recordinfo-page-right #pay-method-update-layer input[type=text],#recordinfo-page-right input[type=tel],#recordinfo-page-right #pay-method-update-layer input[type=password] {width:79%;}

#recordinfo-page-right .idNum-input { float: left; width: 38.8%; line-height: 45px !important; height: 45px; -webkit-appearance: none;}

#recordinfo-page-right #pay-method-update-layer .input-call {width:24%}
#recordinfo-page-right select:disabled { pointer-events: none; background-color: #F0F0F0 !important; color: #0F0F0F !important;  }

#recordinfo-page-right #pay-method-update-layer select:not(#regularbankownercellphone1), #recordinfo-page-right #monthly-pay-price-update-layer select, #recordinfo-page-right #promise-end-layer select {width: 308px !important; line-height: 45px; color: #0F0F0F; font-family: 'Open Sans', 'NotoSansKR', sans-serif; font-size: 15px; font-weight: 400; height: 45px; cursor: pointer; padding-left: 18px; padding-right: 0px; -webkit-appearance: textfield; border-radius: 0px !important; -webkit-border-radius: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-appearance: none;}
#recordinfo-page-right select { border: 1px solid #9C9C9C; background: url(/static/img/arrow.png) no-repeat 96% 49%; -moz-appearance:none; -webkit-appearance:none; appearance:none; }
#recordinfo-page-right select::-ms-expand {display:none}

@media screen and (max-width: 767px) {
    #recordinfo-page-right { overflow: hidden; max-width: 100%; width: 100%; }
    #recordinfo-page-right .form-title { width: 100%; float: left; background: none; padding: 0 0 30px 0; font-size: 16px; font-weight: 400; height: 40px; line-height: 40px; }
    #recordinfo-page-right .form-content { width: 100%; float: left; padding: 0;}
    #recordinfo-page-right .form-row { height: 40px; line-height: 40px;}
    #recordinfo-page-right .form-row mt15{ margin-top: 15px; }
    #recordinfo-page-right .form-row02 { height: 80px; line-height: 40px; margin-bottom: 18px; }

    #recordinfo-page-right .desc-box { width: 100%; margin-left: 0; font-size: 14px; }
    #recordinfo-page-right .desc-row { width: 100%; height: 57px; }

    #recordinfo-page-right .btn50 { width: 47%; height: 40px; line-height: 40px; border: 1px solid #9C9C9C; background-color: #F0F0F0; float: left; text-align: center; }
    #recordinfo-page-right .btn40 { width: 31.9%; height: 40px; line-height: 40px; border: 1px solid #9C9C9C; background-color: #F0F0F0; float: left; text-align: center; font-size: 13px;}

    #recordinfo-page-right label { width: 30%; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 40px; height: 40px; text-align: left; color: #2B2B2B; }
    #recordinfo-page-right .form-content .pay-method-div { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 40px; text-align: left; color: #2B2B2B; margin-bottom: 0 !important; padding-top: 0px !important; height: 40px; line-height: 40px; margin-left: 30% !important;}
    #recordinfo-page-right .form-content .monthlypayprice-div { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 40px; text-align: left; color: #2B2B2B; margin-bottom: 0 !important; padding-top: 0px !important; height: 40px; line-height: 40px; margin-left: 30% !important;}
    #recordinfo-page-right .form-content .promisestatus-div { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 40px; text-align: left; color: #2B2B2B; margin-bottom: 0 !important; padding-top: 0px !important; height: 40px; line-height: 40px; margin-left: 30% !important;}

    #recordinfo-page-right .hyphen { width: 5.1%; height: 40px; line-height: 40px; }

    #recordinfo-page-right .input-call { width: 20.6%; font-size: 14px; height: 40px; line-height: 40px; padding-left: 10px; }

    #recordinfo-page-right .input-number { width: 45%; height: 40px; line-height: 45px; color: #0F0F0F; padding-left: 18px; margin-right: 0px; margin-top: 18px; border: 1px solid #9C9C9C; float: left; }
    #recordinfo-page-right .idNum-input { float: left; width: 46.5% !important; height: 40px; line-height: 40px; -webkit-appearance: textfield;}

    #recordinfo-page-right #pay-method-update-layer select:not(#regularbankownercellphone1), #recordinfo-page-right #monthly-pay-price-update-layer select, #recordinfo-page-right #promise-end-layer select {height: 40px; line-height: 40px; width: 69% !important;}
    #recordinfo-page-right #promise-end-layer textarea { width: 69% !important; }
    #recordinfo-page-right #pay-method-update-layer #promise-end-layer select {height: 40px; line-height: 40px; width: 69% !important;}
    #recordinfo-page-right #pay-method-update-layer .input-call  { width: 20%; font-size: 14px; height: 40px; line-height: 40px; padding-left: 10px; }
    #recordinfo-page-right #pay-method-update-layer .send_ars_txt { padding-left: 30% !important; }

    #recordinfo-page-right select:disabled { pointer-events: none; background-color: #F0F0F0 !important; color: #0F0F0F !important;  }
}

@media screen and (max-width: 516px) {
  #recordinfo-page-right #pay-method-update-layer .input-call  { width: 18%; padding-left: 6px;}
}

/* pay - step1, step1_cms, step2 */
#promisememo { margin-right: 0px; }
#contributormemo { margin-right: 0px; }

#donate-page-frame { float: none; padding: 110px 0 80px 120px; }
#donate-page-left { background-color: #FFF; width: 700px; padding: 63px 56px 50px 56px; }

.choose-price input[type="text"] { border: 1px solid #9C9C9C !important; background: #f0f0f0; }

.form_more {background: url('../img/service/arrow-down.png') no-repeat right center; width: 50px; height: 28px;}
.check_icon {background: url('../img/service/check-icon.png') no-repeat right center; width: 29px; height: 29px; display: inline-block; margin-right: 10px; vertical-align: sub;}
/*
A.form_more:hover { color: #999; text-decoration: none !important; background: url('../img/service/btn-arrow_hover.png') no-repeat right center; }
*/

.donate-page-box { height: 180px; width: 700px; margin-bottom: 56px; }
.donate-page-box-title { float: left; padding: 72px 0 0 56px; }

.donate-page-box-description { float: left; width: 450px; padding: 70px 0 0 49px; }
.donate-page-box h1 { font-size: 24px; font-weight: 400; }
.donate-page-box p { font-size: 15px; font-weight: 300; line-height: 1.5; }

/* [임시] PC 비인증 카드정보 저장을 위한 기존 폼 숨기기
.tab-content .tab-content-M {
		display: none;
}
*/

/* [임시] PC 비인증 유효기간 입력 필드 */
.ml24 { margin-left: 24px; }
.ml28 { margin-left: 28px; }
.mb0 { margin-bottom: 0px !important; }

.donate-page-head h2 { display: block; font-size: 18px; font-weight: 400; text-align: left; color: #2B2B2B; margin-bottom: 30px; }
.donate-page-head p { font-size: 14px; font-weight: 400; line-height: 1.5; text-align: left; word-break: break-all; color: #2B2B2B; }

.payment-info { /* overflow: hidden; SBL */ width: 100%; margin: 40px auto; padding: 30px; background-color: #F0F0F0; font-size: 15px; }
.payment-info tr { height: 30px; }

.payment-info-col1 { width: 30%; vertical-align: middle; }
.payment-info-col2 { width: 70%; vertical-align: middle; }
.payment-border { width: 100%; border-bottom: 1px solid #2B2B2B; }

.donate-inner { margin: 0 auto; font-size: 15px; }
.info-box-content { background-color: #F0F0F0; font-size: 14px; line-height: 1.8em; color: #7F7F7F; font-weight: 300; list-style: none; margin: 30px 0 0 0; padding: 20px 40px 20px 40px; text-indent: -0.8em; word-break: keep-all; }
.donate-page-infobox { width: 100%; height: auto; opacity: 0.95; background-color: #edf4e9; font-size: 14px; font-weight: 400; line-height: 1.6; color: #242524; padding: 15px 40px 15px 40px; border: 2px solid green; }

#donate-page-left .explain { width: 100%; margin-bottom: 18px; }
#donate-page-left .explain-name { display: block; float: left; margin-left: 119px; font-weight: normal; font-size: 14px; border-bottom: 1px solid #2B2B2B; padding-bottom: 1px; text-decoration: none; cursor: pointer; }
#donate-page-left .explain-name:hover { color: #2B2B2B; }
#donate-page-left .explain-icon { display: block; float: left; padding-left: 5px; padding-top: 1px; }
#donate-page-left .explain-icon:hover .explain-text1 { display: block; }
#donate-page-left .explain-text1 { width: 250px; height: auto; position: absolute; background-color: #2B2B2B; color: #FFF; display: none; font-size: 14px; margin-left: -113px; margin-top: 10px; line-height: 1.5; padding: 18px; font-weight: 100; }
.explain-text1:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-bottom-color: #2B2B2B; border-width: 7px; margin-left: -12px; }
#donate-page-left span .question_w { display: block; width: 13px; height: 13px; background: url('../img/service/question-mark.png') no-repeat center center; -webkit-background-size: 100%; background-size: 100%; }
#donate-page-left span .question_w:hover { background: url('../img/service/question-mark_webH.png') no-repeat center center; }
#donate-page-left span .question_m { display: none; }

#donate-page-left .mydonus-box { margin: 0px 0 50px 0; color: #00bb7b; word-break: keep-all; }
#donate-page-left .mydonus-title { margin: 15px 0 15px 0; }
#donate-page-left .mydonus-desc { line-height: 1.5; }

#donate-page-left .choose-price, #donate-page-left .choose-email { width: 16.5%; margin-left: 4px; margin-right: 17px; height: 45px; line-height: 45px; font-weight: 300; }
#donate-page-left .input-name { padding: 0 18px; width: 182px; height: 45px; line-height: 45px; color: #0F0F0F; border: 1px solid #9C9C9C; }
#donate-page-left .choose-tab { float: left; width: 20.5%; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; text-align: left; color: #000000; }
#donate-page-left .choose-call, #donate-page-left .choose-price { text-align: center; }
#donate-page-left .choose-price a { border: 2px solid #9C9C9C; height: 45px; line-height: 45px; border-radius: 0px !important; color: #000; font-weight: 300; padding: 13px 0; background-color: #F0F0F0; }
#donate-page-left .choose-call a { border: 1px solid #9C9C9C !important; margin-right: 0 !important; height: 45px; line-height: 45px; border-radius: 0px !important; color: #000; font-weight: bold; padding: 13px 0; }

#donate-page-left .form-row .active>a, #donate-page-left .form-row .active>a:focus, #donate-page-left .form-row .active > a:hover { border: none !important; color: #fff !important; background-color: #222 !important; font-weight: bold; }

#donate-page-left .select-category { width: 386px; height: 45px; line-height: 45px; color: #9C9C9C; padding: 0 18px; border: 2px solid #9C9C9C; }
#donate-page-left .select-call option { text-align: center; }

#donate-page-left .hyphen { width: 10px; height: 45px; line-height: 45px; float: left; text-align: center; color: #9C9C9C; }
#donate-page-left .hyphen01 { width: 22px; }
#donate-page-left .hyphen02 { width: 24px; }
#donate-page-left .hyphen03 { width: 20px; height: 30px; line-height: 30px; }

#donate-page-left .input-call { float: left; width: 114px; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }
#donate-page-left .input-date { float: left; width: 114px; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }
#donate-page-left .input-bizno { float: left; width: 114px; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }
#donate-page-left .input-cmscall { float: left; width: 95px; height: 30px; line-height: 30px; color: #0F0F0F; padding-left: 18px; border: 1px solid #9C9C9C; }

#donate-page-left .idNum-input { height: 45px; width: 31%; float: left; }
#donate-page-left .idNum-input01 { height: 45px; width: 30.5%; float: left; }
#donate-page-left .idNum-input02 { height: 45px; width: 30.5%; float: left; }
#donate-page-left .idNum-input03 { float: left; width: 13.5%; padding: 0 18px; height: 45px; font-size: 15px; color: #0F0F0F; border: 1px solid #9C9C9C !important; }

#donate-page-left .input-long-field { width: 386px; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; margin-right: 0px; border: 1px solid #9C9C9C; }
#donate-page-left .input-long-field-textarea { width: 386px; height: 120px; color: #0F0F0F; padding-left: 18px; margin-right: 0px; border: 1px solid #9C9C9C; overflow:auto; resize: none;}
#donate-page-left .input-long-field-textarea:disabled {
  cursor: default !important;
  pointer-events: all !important;
  background-color: #F0F0F0 !important;
  color: #7F7F7F !important;
  border: 1px solid #9C9C9C !important;
  -webkit-text-fill-color: inherit;
  opacity: 1;
}
#donate-page-left .input-email { width: 386px; height: 45px; line-height: 45px; color: #0F0F0F; padding-left: 18px; margin-right: 0px; border: 1px solid #9C9C9C; }
#donate-page-left .input-number { width: 140px; height: 45px; line-height: 45px; padding-left: 18px; }
#donate-page-left .content-stress { color : #30B34D; }

#donate-page-left .form-info-box-container { width: 100%; }
#donate-page-left .form-info-box-content { background-color: #F0F0F0; font-size: 14px; line-height: 1.8em; color: #7F7F7F; font-weight: 300; list-style: none; margin: 30px 0 0 0; padding: 20px 40px 20px 40px; text-indent: -0.8em; word-break: keep-all; }

#donate-page-left .subscribe-button-indent { padding-left: 25px; }

select:active, select:hover { outline: none; }

.first-p { font-size: 18px; font-weight: 500; color: #2B2B2B; margin-bottom: 40px; }
.second-p { font-size: 18px; font-weight: 500; color: #2B2B2B; margin-top: 53px; }
.third-p { font-size: 14px; line-height: 1.5; text-align: left; font-weight: 300; color: #2B2B2B; margin-top: 15px; margin-bottom: 32px; }
.fourth-p { font-size: 18px; color: #2B2B2B; font-weight: 500; margin-bottom: 40px; margin-top: 52px; }

.account-notice { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; text-align: left; color: #9C9C9C; margin-top: 7px; margin-left: 145px; }
.complete-p1 { margin-bottom: 40px; font-size: 18px; font-weight: 500; color: #2B2B2B; }

#donate-page-left .form-row { width: 100%; height: 48px; margin-bottom: 18px; border-bottom: none; }
#donate-page-left .form-rowAuto { height: auto !important; overflow: hidden; padding-bottom: 0; }
#donate-page-left .form { border-bottom: 1px solid #2B2B2B; padding: 38px 0; }
#donate-page-left .form-bottom { border-bottom:1px solid #2B2B2B; padding-bottom: 38px; }
#donate-page-left .select-call { width: 114px; height: 48px; margin-left: 4px; color: #9C9C9C; padding: 0 18px; border: 2px solid #9C9C9C; }


.checkout-input { padding: 0 18px; width: 386px; height: 48px; border: 1px solid #9C9C9C; font-size: 15px; font-weight: 400; color: #0F0F0F; }
.checkout-input-use-f2f-bankaccount-inquiry { padding: 0 18px; width: 303px; height: 48px; border: 1px solid #9C9C9C; font-size: 15px; font-weight: 400; color: #0F0F0F; }

#custom-monthly-pay-price { text-align: right; width: 79%; }
#certification-link { margin-top: 10px; margin-left: 0; }

.select-bank { padding: 0 18px; width: 386px; height: 48px; border: 1px solid #9C9C9C; font-size: 15px; color: #0F0F0F }

.admit-all { display:flex; margin-bottom: 30px; }
.admit-all-weight { font-weight: 500; }

.admit { display:flex; margin-bottom: 15px; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 2.1; text-align: left; color: #000000; }

.admit-wrapper { overflow: hidden; text-align: left; padding: 39px 0 20px 0; }
.checklist-wrapper { overflow: hidden; text-align: left; padding: 39px 0 24px 0; }

.admit-btns { display: inline-block; }
.admit-btns a { text-decoration: underline; }
.admit-btns a:hover { color: #2B2B2B }
.admit-btns.full-width { width: 100%; }

.submit { margin: 50px auto 0 auto; width: 229px; height: 60px; line-height: 60px; transition: 0.1s; font-size: 15px; font-style: normal; font-stretch: normal; text-align: center; display: block; text-decoration: none !important; cursor: pointer; }
.submit-100 { margin: 50px auto 0 auto !important; width: 100%; height: 60px; line-height: 60px; transition: 0.1s; font-size: 15px; text-align: center; display: block; text-decoration: none !important; cursor: pointer;}
.submit-100 > a { display: block; text-decoration: none !important; }

.subscribe-button { margin: 3px 0 0 0 !important; }
.subscribe-button.subscribe-button-indent { margin-top: 0 !important; }
.interest-button { margin: 3px 0 0 0 !important; width: 66%; }
.interest-button2 { margin: 3px 0 0 0 !important; width: 80%; }
.postaddress-button { margin: 3px 0 0 0 !important; }

#donate-page-left .choose-method { margin-left: 4px; width: 181px; margin-right: 18px; text-align: center }
#donate-page-left .choose-method a { border: 2px solid #9C9C9C !important; height: 49px; border-radius: 0px !important; color: #000; font-weight: 300; padding: 13px 0; background-color: #F0F0F0; }

#donate-page-frame label { float: left; width: 20%; height: 45px; line-height: 45px; font-size: 15px; font-weight: 400; text-align: left; color: #2B2B2B; }
#donate-page-left label.donate-label { float: left !important; }
.interest label{width: 100% !important;}

.donate1_1_2-info { width: 100%; height: auto; opacity: 0.95; background-color: #edf4e9; font-size: 14px; font-weight: 400; line-height: 1.6; text-align: center; color: #242524; padding: 15px 0 15px 0; border: 2px solid green; }
.donate-step2-box-info { width: 100%; height: auto; opacity: 0.95; background-color: #f5f5f5; font-size: 14px; font-weight: 400; line-height: 1.6; text-align: center; color: #242524; padding: 15px 0 15px 0; border: 1px solid #979797; }
.donate-step2-box-info-fill5 { width: 15px; height: 15px; border: 1px solid #30b34d; border-radius: 50%; display: inline-block; margin-right: 10px; vertical-align: middle; margin-bottom: 2px;}
.donate-step2-box-info-fill3 { width: 1px; height: 7px; background-color: #50b257;     display: inline-block; position: relative; display: inline-block; bottom: 50%;}
.donate-step2-box { width: 100%; height: auto; opacity: 0.95; font-size: 14px; font-weight: 400; line-height: 1.6; color: #242524; border-right: 1px solid #979797; border-left: 1px solid #979797;  box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.13);}
.donate-step2-box.border-bottom { border-bottom: 1px solid #979797; }

.donate-step2-box-row-oval { width: 6px; height: 6px; background-color: #6ac259; display: inline-block; margin-right: 12px; vertical-align: middle; border-radius: 50%;}
.donate-step2-box-title { width: 100%; font-size: 15px; font-weight: 500; line-height: 1.8; display: inline-block; padding: 9px 33px; border-bottom: 1px solid #979797; border-top: 1px solid #979797;}
.donate-step2-box-content { height: auto; padding: 24px 38px 24px 51px;}
.donate-step2-box-row { width: 100%; height: 25px; font-size: 15px; line-height: 1.6; display: inline-block; }
.donate-step2-box-row-title { float: left; display: block; }
.donate-step2-box-row-content { float: right; display: block; }

.donate-step2-desc-box { text-align: center; padding:0 0 40px 0; font-size: 22px;}
.donate-step2-desc-box.bottom { font-size: 18px; padding-top: 44px; padding-bottom: 10px; }

#donate-page-background #contributor { margin-right: 0px; }

.address-input-1 { width: 114px; height: 45px; line-height: 45px; background-color: #ffffff; margin-bottom: 8px; border: 1px solid #9C9C9C; padding-left: 18px; }
.address-letter { font-size: 15px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; text-align: right; color: #2B2B2B; border-bottom: 1px solid #2B2B2B; margin-left: 13px; padding-bottom: 5px; text-decoration: none !important; }
.address-letter:hover { color: #2B2B2B; }
.address-input-2 { width: 386px; height: 45px; line-height: 45px; background-color: #ffffff; margin-left: 118px; margin-bottom: 8px; border: 1px solid #9C9C9C; padding-left: 18px; }


.receive-1 { display: inline-block; font-size: 16px; margin-top: 0; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: -0.4px; margin-right: 50px; }
.receive-2 { display: inline-block; margin-top: 0; font-size: 16px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: -0.4px; margin-right: 50px; }
.receive-3 { display: inline-block; font-size: 16px; margin-top: 0; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: -0.4px; margin-right: 50px; }
.receive-4 { display: inline-block; margin-top: 0; font-size: 16px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: -0.4px; }

.interest { display: inline-block; font-size: 16px; margin: 0px; margin-top: 12px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: -0.4px; width: 56%; overflow: hidden;}
.interest-button2 .interest  { width: 51%;}
.interest:nth-child(even) { width: 43%;}
.postaddress-1 { display: inline-block; font-size: 16px; margin-top: 12px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: -0.4px; margin-right: 50px; }
.postaddress-2 { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: -0.4px; margin-right: 50px; }

.date-time { float: left; width: 114px; height: 45px; line-height: 45px; padding-left: 18px; border: 1px solid #9C9C9C; }

.form-receipt { padding-bottom: 50px; }
.form-payment { padding-bottom: 50px; }

.receipt-info { padding-left: 30px; padding-top: 30px; width: 100%; height: 95px; background-color: #F0F0F0; font-size: 14px; font-weight: 300; font-style: normal; font-stretch: normal; line-height: 1.5; text-align: left; color: #9C9C9C; }

.idNum-input { padding: 0 18px; width: 179px; height: 48px; font-size: 15px; color: #0F0F0F; border: 1px solid #9C9C9C !important; }

.id-hyphen { width: 9px; height: 2px; display: inline-block; background-color: #9C9C9C; margin: 5px 3.5px; }

.where { display: block; margin: 25px 15px; font-size: 11px; color: #000; text-decoration: none; font-style: italic; }

.admit-btns input[type="checkbox"] { position: absolute; width: 100px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.admit-btns input[type="checkbox"]+label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.admit-btns input[type="checkbox"]:checked+label:before { background: #E9ECEE; border-color: #adb8c0; }
.admit-btns input[type="checkbox"]:checked+label:after { content: ''; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px; border-radius: 0; background-color: #000; border: 1px solid #000; }
.admit-btns input[type="checkbox"]+label { font-size: 14px; padding-left: 25px; }
.admit-btns input[type="checkbox"]+label:before { content: ''; position: absolute; text-align: center; background: #fff; left: 0; top: 0px; width: 15px; height: 15px; border: 1px solid #9C9C9C; }

.radio-container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.radio-container input { position: absolute; opacity: 0; cursor: pointer;}
.checkmark { position: absolute; top: 0; left: 0; height: 17px; width: 17px; background-color: #fff; border: 1px solid #9C9C9C; border-radius: 50%; }
.radio-container input:checked ~ .checkmark { background-color: #E9ECEE; }
.checkmark:after { content: ""; position: absolute; display: none; }
.radio-container input:checked ~ .checkmark:after { display: block; }
.radio-container .checkmark:after {	top: 4px; left: 4px; width: 7px; height: 7px; border-radius: 50%; background-color: #000; border: 1px solid #000; }

.check-label { width: inherit !important; height: 15px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 15px !important; padding: 0 0 0 25px !important; }
.checklist-title-label { width: inherit !important; height: 15px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 15px !important; padding: 0 0 0 0px !important; }
.admit-btns03 { width: inherit !important; height: 15px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 15px !important; padding: 0 0 0 30px !important; }


/* pay - step3 */

#donate-confirm-page-frame { float: none; margin: 0 auto; padding: 110px 0 80px 120px; }
#donate-confirm-left { background-color: #fff; width: 100%; max-width: 580px; padding: 67px 0 57px 0; }

.donate-confirm-inner { width: 460px; margin: 0 auto; }
.donate-confirm-infobox { width: 100%; height: auto; opacity: 0.95; background-color: #edf4e9; font-size: 14px; font-weight: 400; line-height: 1.6; text-align: center; color: #242524; padding: 15px 0 15px 0; border: 2px solid green; }

.donate-confirm { margin: 0 0 30px 0; padding: 0 0 30px 0; border-bottom: 1px solid #e6e7e3; }
.donate-confirm h2 { font-size: 24px; font-weight: 400; line-height: 1.5; color: #2B2B2B; word-break: keep-all; }
.donate-confirm > p { margin: 25px 0 25px 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: #2B2B2B; word-break: keep-all; }
.donate-confirm .step3link { font-size: 14px; }

.confirm-info { overflow: hidden; width: 100%; margin: 0 auto 9.2% auto; padding: 35px 40px; background-color: #F0F0F0; font-size: 15px; color: #9C9C9C; }
.confirm-info h3 { font-size: 15px; font-weight: 400; color: #2B2B2B; margin-bottom: 22px; }
.confirm-info p { float: left; font-size: 14px; color: #2B2B2B; }
.confirm-info span { float: right; font-size: 14px; color: #2B2B2B; }

.confirm-pay { float: left; width: 100%; margin: 20px 0 0 0; }
.confirm-border { max-width: 380px; width: 100%; border-bottom: 1px solid #9C9C9C; }

#donate-confirm-left .register-mydonus { font-size: 15px; font-weight: 400; line-height: 1.5; color: #00bb7b; word-break: keep-all; }
#donate-confirm-left .wrap { display: flex; flex-wrap: wrap; margin: 0 0 35px 0; }
#donate-confirm-left .wrap-left { padding: 2px 0 0 0; width: 6%; }
#donate-confirm-left .wrap-right { width: 94%; }
#donate-confirm-left .btn { background-color: #00bb7b; border: 1px solid #01b175; width: 100%; height: 60px; color: white; font-size: 15px; padding: 0; display: inline-block;}
#donate-confirm-left .btn .img-left { float: left; margin: 0px 0 0 20px; height: 100%; }
#donate-confirm-left .btn p { float: left; margin: 20px 0 20px 20px; }
#donate-confirm-left .btn .img-right { float: right; margin: 0 20px 0 0; }


@media screen and (max-width: 1024px) {

  #donate-page-frame { padding: 110px 0 80px 0; }
  .donate-page-box { margin: 0 auto 56px auto; }
  #donate-page-left { margin: 0 auto; }
  #donate-confirm-page-frame { padding: 110px 0 80px 0; }
  #donate-confirm-left { margin: 0 auto; }

}


@media screen and (max-width: 767px) {

  #donate-page-frame { padding: 0; margin: 0; }
  #donate-page-left { width: 100%; padding: 0; }

  .date-time { padding-left: 10px; }
  .admit-wrapper { padding: 35px 0 16px 0; }
  .checklist-wrapper { padding: 35px 0 24px 0; }

  #donate-page-left .form-row { height: 40px; line-height: 40px; margin-bottom: 18px; padding-bottom: 0px;}
  #donate-page-left .form-row01 { height: 60px; }
  #donate-page-left .form-row02 { height: 70px; margin-bottom: 18px; }

  #donate-page-left .choose-tab { width: 28%; }

  .donate-page-head p { font-size: 14px; word-break: keep-all; }

  .info-box-content { font-size: 13px; line-height: 1.6; word-break: keep-all; padding: 15px 25px 15px 25px; }
  .info-box-content li { padding: 0 0 5px 0; }
  .info-box-content li:last-child { padding: 0; }

  .payment-info {line-height: 2em;margin: 30px auto;padding: 20px 15px;font-size: 13px; }
  .payment-border { display: none; }

  .admit-btns { width: 70%; margin-top: 0 !important; display: block; }
  .div-helper { margin-left: 15px !important; }

  .idNum-input {width: 32%;height: 40px;line-height: 40px;font-size: 14px;padding: 0 10px; }
  .idNum-input02 { margin-left: 5.8%; }

  .receipt-info { font-size: 11px; padding: 13px; padding-right: 9px; height: auto; }
  .id-hyphen { width: 3%; margin: 5px 0px; }

  .receive-1 { margin-top: 0px; margin-right: 4%; width: calc(26% - 17.5px); float: left; }
  .receive-2 { margin-top: 0px; margin-right: 0; width: calc(70% + 17.5px); float: left; }
  .receive-3 { margin-top: 15px; margin-right: 4%; width: calc(26% - 17.5px); float: left;  }
  .receive-4 { margin-top: 15px; margin-right: 0; width: calc(70% + 17.5px); float: left; }
  .interest { margin: 0; margin-top: 11px; width: 39%; float: left; overflow: hidden; margin-right: 9%;}
  .interest-button2 .interest {width: 41%;}
  .interest:nth-child(even) { margin-right: 0; }
  .postaddress-1 { margin-top: 0px; margin-right: 20%; width: 28%; float: left; }
  .postaddress-2 { margin-top: 0px; margin-right: 5%; width: 33%; float: left; }
  .date-time { float: left; width: 20.6%; padding-left: 10px; font-size: 14px; height: 40px; line-height: 40px; }

  .donate-step2-desc-box { font-size: 16px; padding: 10px 0 40px 0; }
  .donate-step2-desc-box.bottom { font-size: 14px; padding-top: 20px; padding-bottom: 0px;}
  .donate-step2-box-row { font-size: 14px; }
  .donate-step2-box-title { font-size: 14px; }
  .donate-step2-box-row-oval { border-radius: 50%; }
  .donate-step2-box-title { padding: 10px 15px;}
  .donate-step2-box-content { height: auto; padding: 17px 15px 10px 15px;}
  .check_icon {background: url('../img/service/check-iconM.png') no-repeat right center; width: 24px; height: 24px; display: inline-block; }

  .donate-step2-box-info-fill5 { display: none; }
  .donate-step2-box-info-fill3 { display: none; }

  .donate1_1_2-info { height: auto; word-break: keep-all; font-size: 13px; padding: 17px 15px; border: 2px solid green; margin-bottom: 35px; }
  .donate-step2-box-info { height: auto; word-break: keep-all; font-size: 13px; padding: 17px 0px; margin-bottom: 35px; }
  .address-input-1 { width: 20.6%; padding-left: 10px; }
  .address-input-2 { width: 70%; margin-left: 30%; padding-left: 10px; font-size: 14px; height: 40px; line-height: 40px; }
  .address-letter { font-size: 13px; margin-left: 6px; padding-bottom: 0; }
  .subscribe-button { display: inline-block !important; margin: 0 !important; width: 100% !important; }
  .interest-button { display: inline-block !important; margin: 0 !important; }
  .interest-button2 { display: inline-block !important; margin: 0 !important; }
  .postaddress-button { display: inline-block !important; margin: 0 !important; padding-top: 13px !important;}
  .donate-inner { overflow: hidden; padding: 35px 4% 35px 4%; max-width: 100%; }
  .wrap-step1cms .donate-inner { overflow: hidden; padding: 60px 4% 35px 4%; max-width: 100%; }

  #donate-page-left .choose-tab { height: 40px; line-height: 40px; }
  #donate-page-left .donate-inner { padding-bottom: 0px; }
  #donate-page-frame label { width: 30%; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 40px; height: 40px; text-align: left; color: #2B2B2B; }
  #donate-page-frame label.dropdown_label { line-height: 40px !important; height: 40px !important; }
  #donate-page-left .choose-tab { font-size: 14px; }
  #donate-page-left .select-category { width: 70%; font-size: 14px; height: 40px; line-height: 40px; }
  #donate-page-left div.form:nth-child(1) { overflow: hidden; padding-bottom: 20px; }

  .address-input-1 { height: 40px; line-height: 40px; font-size: 14px; }
  .choose-tab { width: 20%; height: 50px; font-size: 16px; font-weight: normal; line-height: 1.5; text-align: left; color: #2B2B2B; padding-right: 0 !important; }

  #donate-page-left .choose-method { width: 32.6%; margin-left: 4px; margin-right: 0; text-align: center; }
  #donate-page-left .choose-method01 { margin-left: 3px; }
  #donate-page-left .choose-price { width: 34.5%; margin-left: 4px; margin-right: 0px; height: 40px; line-height: 40px; font-size: 14px; font-weight: 300; }

  .manwon { margin-top: 0px !important; margin-left: 28% !important; width: 35.3% !important; padding-left: 4px; }

  .choose-price-a { margin-top: 0px !important; margin-left: 4px !important; }
  .choose-price-b { border: 1px solid #9C9C9C !important; margin-left: 0 !important; }

  #donate-page-left .input-name { width: 70%; font-size: 14px; height: 40px; line-height: 40px; border: 1px solid #9C9C9C; s}

  #donate-page-left .hyphen { width: 4.1%; height: 40px; line-height: 40px; }
  #donate-page-left .hyphen02 { width: 6%; }
  #donate-page-left .hyphen03 { width: 4%; height: 30px; line-height: 30px; }
  #donate-page-left .select-call { width: 20%; height: 40px; line-height: 40px; font-size: 14px; color: #9C9C9C; padding: 0 0 0 10px; }

  .select-gender { width: 70.5% !important; }
  .select-source { width: 70.5% !important; }

  #donate-page-left .input-call { width: 20.6%; font-size: 14px; height: 40px; line-height: 40px; padding-left: 10px; }
  #donate-page-left .input-date { width: 30.6%; font-size: 14px; height: 40px; line-height: 40px; padding-left: 10px; }
  #donate-page-left .input-bizno { width: 20.6%; font-size: 14px; height: 40px; line-height: 40px; padding-left: 10px; }
  #donate-page-left .input-cmscall { width: 30%; font-size: 14px; height: 30px; line-height: 30px; padding-left: 10px; }
  #donate-page-left .input-email { width: 70%; height: 40px; line-height: 40px; font-size: 14px; padding-left: 10px; }

  #donate-page-left .idNum-input03 { width: 22%; height: 40px; font-size: 14px; padding-left: 10px; }
  #donate-page-left .idNum-input { width: 47.7%; height: 40px; font-size: 14px; padding-left: 10px; }
  #donate-page-left .idNum-input01 { width: 47%; height: 40px; font-size: 14px; padding-left: 10px; }
  #donate-page-left .idNum-input02 { width: 47%; height: 40px; font-size: 14px; }

  #donate-page-left .input-long-field { width: 70%; height: 40px; line-height: 40px; font-size: 14px; padding-left: 10px; }
  #donate-page-left .input-long-field-textarea { width: 70%; height: 100px; font-size: 14px; padding-left: 10px; overflow:auto; resize: none; -webkit-appearance: none; -webkit-border-radius: 0;}

  #donate-page-left .form-info-box-content { font-size: 13px; line-height: 1.6; word-break: keep-all; padding: 15px 25px 15px 25px; }
  #donate-page-left .subscribe-button-indent { padding-left: 25px; box-sizing: border-box; }

  /* 결제 페이지 상단 박스 */

  .donate-page-box { width: 100%; height: 204px; margin-bottom: 0px; display: flex; flex-wrap: wrap; position: relative; overflow: hidden; }
  .donate-page-box:before {content: ' ';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;opacity: 0.7;background-repeat: no-repeat;background-position: 50% 0;-ms-background-size: cover;-o-background-size: cover;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover; }
  .donate-page-box-title { width: 100%; height: 96px; padding: 59px 0 0 6%; z-index: 2; position: relative; }
  .donate-page-box h1 { font-size: 25px; font-weight: 400; }
  .donate-page-box-description { width: 94%; height: 97px; padding: 0 0 0 6%; z-index: 2; position: relative; }
  .donate-page-box p { font-size: 14px; line-height: 1.4; }

  .wrap-step1cms .donate-page-box { display: none; }
  .wrap-step2 .donate-page-box { display: none; }

  .admit-all { margin-bottom: 15px; width: 100%; }
  .admit { display: block; width: 100%; overflow: hidden; }

  .check-label { width: 50% !important; }
  .check-label01 { width: 100% !important; }
  .check-label02  { width: 100% !important; }
  .checkout-input { width: 69% !important; height: 40px; line-height: 40px; font-size: 14px; padding: 0 10px; -webkit-appearance: textfield;}
  .checkout-input-use-f2f-bankaccount-inquiry { width:49.5% !important; height: 40px; line-height: 40px; font-size: 14px; padding: 0 10px; -webkit-appearance: textfield;}
  .select-bank { width: 70%; height: 40px; line-height: 40px; font-size: 14px; padding: 0 10px; }
  .account-notice { font-size: 14px; margin-left: 0; }

  .first-p { margin: 0 0 35px 0; font-size: 17px; }
  .second-p { font-size: 17px; margin-top: 35px; }
  .third-p { font-size: 13px; font-weight: normal; margin-bottom: 30px; font-weight: 300; }
  .fourth-p { font-size: 17px; margin: 35px 0 30px 0; }
  .complete-p1 { font-size: 17px; }


  #donate-page-left .choose-method a { font-size: 13px; padding: 8.5px 0; height: 40px; line-height: 40px; }
  #donate-page-left .choose-price a { height: 40px; line-height: 40px; padding: 8.5px 0; font-size: 13px; }

  .submit { width: 100%; height: 45px; line-height : 45px; font-size: 15px; margin: 40px 0 0 0; }
  .submit-100 { width: 100%; height: 45px; line-height: 45px; font-size: 15px; margin: 40px auto 0; }

  .choose-price input[type="text"] { height: 40px !important; }

  #donate-page-left .input-name { padding: 0 10px; }
  #donate-confirm-page-frame { padding: 0; }
  #donate-confirm-left { border-top: none !important; padding: 60px 4% 35px 4%; max-width: 100%; }

  .donate-confirm-inner { width: 100%; }

  .confirm-pay { margin: 0; }
  .confirm-border { display: none; }

  .confirm-info { padding: 0 0 30px 0; background: none; border-bottom: 1px solid #2B2B2B; margin-bottom: 33px; }
  .confirm-info p { font-size: 14px; }
  .confirm-info span { font-size: 14px; }

  #donate-confirm-left .wrap-left { width: 8%; }
  #donate-confirm-left .wrap-right { width: 92%; }
  #donate-confirm-left .btn p { margin: 20px 0 20px 10px; }

}

@media screen and (max-width: 540px) {
  #paymethodtype_row,#paymethod_row {
    width: 69%;
  }
}

@media screen and (max-width: 663px){
  .interest {
    width: 48% !important;
    margin-right: 0 !important;
}
}

@media screen and (max-width: 546px){
  .interest {
    width: 100% !important;
}
}


/* 가상 선택자를 활용 화살표 대체 */

.dselectbox {
  position: relative;
  width: 91px;  /* 너비설정 */
  border: 1px solid #999;  /* 테두리 설정 */
  z-index: 1; height: 48px; color: #9C9C9C; padding: 0; border: 2px solid #9C9C9C; float:left;
}

.dselectbox:before { content: ""; position: absolute; top: 50%; right: 10px; width: 0; height: 0; margin-top: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #939498; }

.dselectbox label {
  position: absolute;
  top: 0px;  /* 위치정렬 */
  left: 0px;  /* 위치정렬 */
  padding: 0;  /* select의 여백 크기 만큼 */
  color: #9C9C9C !important;
  z-index: -1;  /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */
  width: 100% !Important;
  text-align: center !important; padding-right: 20px !important; height:44px !important; line-height:44px !important; font-weight: 400 !important; font-family: 'Open Sans', 'NotoSansKR', sans-serif !important; }

.dselectbox select {
 width: 100%;
 height: 46px;  /* 높이 초기화 */
 line-height: normal;  /* line-height 초기화 */
 font-family: inherit;  /* 폰트 상속 */
 padding: .8em .5em;  /* 여백과 높이 결정 */
 border: 0;
 opacity: 0;  /* 숨기기 */
 filter:alpha(opacity=0);  /* IE8 숨기기 */
 -webkit-appearance: none; /* 네이티브 외형 감추기 */
 -moz-appearance: none;
 appearance: none;
  margin-left: -2px;
}

.dselectbox.focus { border: 2px solid #010101; }

.dselectbox02 { width: 382px !important; }
.dselectbox02 label { text-align: left !important; }

.dselectbox03 { width: 114px !important; }


@media screen and (max-width: 991px) {
	.dselectbox { width: 22% !important; height: 36px; }
	.dselectbox label { height:32px !important; line-height:32px !important; }
    .dselectbox select { height: 32px;  /* 높이 초기화 */ }

	.dselectbox02 {width: 70% !important;}
	.dselectbox02 label {text-align: left !important;}
	.dselectbox04 {width: 70.5% !important;}
}


/* 회원확인증 Certificate */

#print_wrap { height: 850px; width: 625px; position: relative; margin: 25px auto 25px auto; }

#print_wrap .certificate-logo { margin: 0 0 50px -15px; float: left; }
#print_wrap .head_title { text-align: center; font-size: 28px; font-weight: 400; letter-spacing: 3px; margin-bottom: 70px; clear:both; }
#print_wrap .table_title { text-align: left; font-size: 15px; margin-bottom: 15px; }

#print_wrap .tbl_print { width: 100%; font-size: 13px; margin-bottom: 50px; border-top: 1px solid #2B2B2B; border-collapse: collapse; }

#print_wrap tr th { border-bottom: 1px solid #D4D4D4; padding-left: 10px; background: #F0F0F0; text-align: left; line-height: 35px; font-weight: 400; }
#print_wrap tr td { border-bottom: 1px solid #D4D4D4; padding-left: 10px; font-weight: 400; }

#print_wrap .confirm-text { text-align: center; font-size: 13px; margin: 40px 0 40px 0; }
#print_wrap .confirm-date { text-align: center; font-size: 13px; margin-bottom: 25px; }
#print_wrap .confirm-name { text-align: center; font-size: 20px; margin-bottom: 50px; }

#print_wrap footer { text-align: center; font-size: 12px; border-top: 1px solid #2B2B2B; word-break: keep-all; }
#print_wrap footer .company-info { margin-top: 10px; line-height: 1.5; font-weight: 300; color: #636363; }
#print_wrap footer .notification { color: #636363; margin: 20px 0 0 0; }



/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */
.jspContainer {overflow: hidden;position: relative; }

.jspPane { position: absolute;}

.jspVerticalBar { position: absolute; top: 0; right: 2px; width: 4px; height: 100%; background: transparent;}
.jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: red; }

.jspCap { display: block; height:2px; background-color: transparent; }
.jspHorizontalBar .jspCap { float: left; }

.jspTrack { background: transparent; position: relative; }
.jspDrag { background: #000; position: relative; top: 0; left: 0; cursor: pointer; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }

.jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; padding: 0; margin: 0; }
.jspArrow.jspDisabled {cursor: default;background: #80808d; }
.jspVerticalBar .jspArrow { height: 16px; }
.jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { background: #eeeef4; float: left; height: 100%; }

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner { margin: 0 -3px 0 0; }

input {-webkit-appearance: none !important; -webkit-border-radius: 0 !important;}
input[disabled] {pointer-events: none; background-color: #F0F0F0 !important; color: #7F7F7F !important; border: 1px solid #9C9C9C !important; -webkit-text-fill-color: inherit; opacity: 1; }

.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml25 {margin-left:25px;}
.ml30 {margin-left:30px;}
.ml35 {margin-left:35px;}
.ml50 {margin-left:50px;}

.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr11 {margin-right:11px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr25 {margin-right:25px;}
.mr30 {margin-right:30px;}
.mr35 {margin-right:35px;}
.mr50 {margin-right:50px;}

.mt3 {margin-top:3px;}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt35 {margin-top:35px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}

.mb0 {margin-bottom:0px;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb13 {margin-bottom:13px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb25 {margin-bottom:25px;}
.mb30 {margin-bottom:30px;}
.mb35 {margin-bottom:35px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb100 {margin-bottom:100px;}
.mb160 {margin-bottom:160px;}

.pb25 {padding-bottom:25px;}

.floatl {float:left}
.floatr {float:right}

/* ====================== Tailwind style css ===================== */
/* display: inline-block; */
.inline-block {
  display: inline-block;
}

/* vertical-align: middle; */
.align-middle {
  vertical-align: middle;
}

/* display: flex; */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

/* align-items: flex-start; */
.items-start {
  align-items: flex-start;
}

/* PC 기본 스타일 */
.float-left {
  float: left;
}

.w-1/3 {
  width: 33.333333%;
}

.w-1/6 {
  width: 16.666667;
}

.pt-4 {
  padding-top: 16px;
}

.mr-6 {
  margin-right: 24px;
}

.mt-1 {
  margin-top: -1px;
}

.ml-0 {
  margin-left: 0;
}

.h-full {
  height: 100%;
}

.pt-0 {
  padding-top: 0px;
}

.h-1/2 {
  height: 50%;
}

.leading-none {
  line-height: 1;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

/* 모바일 반응형 스타일 */
@media screen and (max-width: 767px) {
  .w-1/2 {
    width: 50%;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:pt-1 {
    padding-top: 4px;
  }

  .mr-0 {
    margin-right: 0;
  }
}