body {
  font-family: "Nanum Gothic", Arial, sans-serif;
  /* background-color: #f2f2f2; */
  color: #333333;
}


.modal-backdrop {background: none;} /* bootstrap 기본 modal 폼의 백그라운드 색상을 제거함 모달을 두개 겹칠때 색상 문제 해결 - cjh */

.login-form {
  padding: 15px 15px 0 15px;
}

#remember-me {
  float: left;
  margin-right: 10px;
}

.sc-subboxpage {
  min-height: 20px;
  padding: 29px;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05);
}
.sc-subboxpage {
  box-sizing: border-box;
}

.right-margin20px span {
  margin-right: 20px;
}

.alert-parent {
	position: relative;
}	

.sc-subboxpage .alert-error {
	width:40%;
	position: absolute;
	top: -20px;
	left: 45%;
}

.sc-subboxpage  .alert.alert-error:before {
  content: '';
  display: inline-block;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #EED3D7;
  border-right-color: #EED3D7;
  position: absolute;
  top: 11px;
  left: -8px;
}
.sc-subboxpage  .alert.alert-error:after {
  content: '';
  display: inline-block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #F2DEDE;
  position: absolute;
  top: 12px;
  left: -7px;
}

.sc-jeapumlogo-img { /* 제품의 로고 이미지 크기 설정 */
  width:100px;
  height:100px;
}


/* SideNav setup
------------------------- */

.sidebar-nav {
  width: 228px;
  padding: 0;
  
  background-color: #fff;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
          
}

.sidebar-nav.affix {
  margin: 30px 0 0;
  top: 40px;
}

.sidebar-nav.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 270px;
}


/* scrollspy 맨끝 엘리맨트 이동시 오류 해결 */
.sc-empty-bottom {
  position:relative;
  display:block;
  height:200px;
}

/* hr 수평선의 색상이 너무 희미해 좀 진한색으로 재 설정함 */
hr {
  border-top: 1px solid #ddd;
}

/* 입력폼 validate 플러그인 오류시 색상 */
.validate_error {
  color: #00f;
}


/* Responsive
-------------------------------------------------- */

/* Desktop large
------------------------- */
@media (min-width: 1200px) {


  /* 화면 resize시에 상단 여백을 조정해함 */
  .sc_page_top_padding  {
    padding-top: 60px; 
  }

  .sidebar-nav {
    width: 258px;
  }

  .sidebar-nav > li > a {
    width: 230px \9; /* Override the previous IE8-9 hack */
  }

  
  .modal.mycart {
    width: 960px;
    margin-left: -480px;
  }

  #cuuserpostno_modal {
    width: 960px;
    margin-left: -480px;
  }

  #sc_modal_board_input,#modal_shop_select {
    width: 960px;
    margin-left: -480px;
  }

  #modal_customer_select,#modal_idlist_select,#modal_jpno_select,#modal_service_expiry_select,#sc_modal_idlist_auth,#modal_usertran_select {
    width: 1100px;
    margin-left: -550px;
  }

  #sc_modal_member,#sc_modal_customizing_reply {
    width: 1000px;
    margin-left: -500px;
  }

  #sc_modal_service_complete,#sc_modal_balsong_complete,#modal_jeapum_select,#modal_jeapum_history,#modal_jeapum_boxlink,#sc_modal_schelpview,#sc_modal_scimageview,#modal_jeapum_buy_history {
    width: 960px;
    margin-left: -480px;
  }
 
}

/* modal mycart에 필요함 */
@media (min-width: 990px) {

  /* 화면 resize시에 상단 여백을 조정해함 */
  .sc_page_top_padding  {
    padding-top: 60px; 
  }

  .modal.mycart {
    width: 760px;
    margin-left: -380px;
  }

  #cuuserpostno_modal {
    width: 760px;
    margin-left: -380px;
  }

  #modal_jeapum_select,#sc_modal_board_input {
    width: 760px;
    margin-left: -380px;
  }

  #modal_customer_select,#modal_idlist_select,#modal_jpno_select,#modal_service_expiry_select,#sc_modal_idlist_auth,#modal_usertran_select {
    width: 1100px;
    margin-left: -550px;
  }

  #sc_modal_member,#sc_modal_customizing_reply {
    width: 1000px;
    margin-left: -500px;
  }

  #sc_modal_service_complete,#sc_modal_balsong_complete,#modal_jeapum_select,#modal_jeapum_history,#modal_jeapum_boxlink,#sc_modal_schelpview,#sc_modal_scimageview,#modal_jeapum_buy_history {
    width: 960px;
    margin-left: -480px;
  }

}


/* Desktop
----------------------- */

@media (max-width: 980px) {

  /* 화면 resize시에 상단 여백을 조정해함 */
  .sc_page_top_padding  {
    padding-top: 60px; 
  }

  /* When affixed, space properly */
  .sidebar-nav {
    width: 218px;
    margin-right: 0;
  }

}


/* Tablet to desktop
------------------------- */

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

  /* 화면 resize시에 상단 여백을 조정해함 */
  .sc_page_top_padding  {  
    padding-top: 0px; 
  }

  /* Adjust sidenav width */
  .sidebar-nav {
    width: 166px;
  }
  .sidebar-nav.affix {
  }

  #modal_usertran_select,#modal_jeapum_select,#modal_jeapum_history,#modal_jeapum_boxlink,#sc_modal_schelpview,#sc_modal_scimageview,#modal_jeapum_buy_history {
    width: 760px;
    margin-left: -380px;
  }


}


/* Tablet
------------------------- */
@media (max-width: 767px) {

  /* 화면 resize시에 상단 여백을 조정해함 */
  .sc_page_top_padding  {
    padding-top: 0px; 
  }

  /* Sidenav */
  .sidebar-nav {
    width: auto;
    margin-bottom: 20px;
  }
  .sidebar-nav.affix {
    position: static;
    width: auto;
  }

  /* [start] (스마트폰에서 처리 하기 위함)  Input-append and input-prepend with inline-block-level */
  .input-append.input-block-scphone-level,
  .input-prepend.input-block-scphone-level {
      display: table;
  }

  .input-append.input-block-scphone-level .add-on,
  .input-prepend.input-block-scphone-level .add-on {
      display: table-cell;
      width: 1%; /* remove this if you want default bootstrap button width */
  }

  .input-append.input-block-scphone-level > input,
  .input-prepend.input-block-scphone-level > input {
      box-sizing: border-box; 
      display: table; 
      min-height: inherit;
      height:2.4em;
      width: 100%;
  }

  .input-append.input-block-scphone-level > input {
      border-right: 0; /* removes the extra right border from the input */
  }

  .input-prepend.input-block-scphone-level > input {
      border-left: 0; /* removes the extra left border from the input */
  }
  /* [end] */


}

/* Landscape phones
------------------------- */
@media (max-width: 480px) {

  /* 화면 resize시에 상단 여백을 조정해함 */
  .sc_page_top_padding  {
    padding-top: 0px; 
  }

  /* scrollspy 맨끝 엘리맨트 이동시 오류 해결 */
  .sc-empty-bottom {
    position:relative;
    display:block;
    height:0px;
  }
 
  /* [start] (스마트폰에서 처리 하기 위함)  Input-append and input-prepend with inline-block-level */
  .input-append.input-block-scphone-level,
  .input-prepend.input-block-scphone-level {
      display: table;
  }

  .input-append.input-block-scphone-level .add-on,
  .input-prepend.input-block-scphone-level .add-on {
      display: table-cell;
      width: 1%; /* remove this if you want default bootstrap button width */
  }

  .input-append.input-block-scphone-level > input,
  .input-prepend.input-block-scphone-level > input {
      box-sizing: border-box; 
      display: table; 
      min-height: inherit;
      height:2.4em;
      width: 100%;
  }

  .input-append.input-block-scphone-level > input {
      border-right: 0; /* removes the extra right border from the input */
  }

  .input-prepend.input-block-scphone-level > input {
      border-left: 0; /* removes the extra left border from the input */
  }
  /* [end] */


  /* start */
  /*
  @media (min-height: 480px) and (max-device-height: 667px) and (-webkit-min-device-pixel-ratio: 2) { 
    .modal.sc_modal {
      height: 80%; 
      min-height:70%;
      left: 2%; 
      margin: auto auto auto auto;
    }
    .modal-body.sc_modal-boday {overflow-y:scroll;max-height:none;position:absolute;top:50px;bottom:50px;right:0px;left:0px;}
    .modal-footer.sc_modal-footer {position: absolute;bottom: 0;right: 0;left: 0;}

    #sc_modal_global_body_bottom_empty {height: 70px;} 
  } 
  */
  /* end */


  /* 가장 작은 스마트폰 일때 */
  /* 모달창의 헤더,풋더가 바디 앞에 포함됨 */
  @media (min-width: 320px) and (min-height: 320px) and (max-height: 490px) and (orientation : portrait) { 
   
    .modal {
      height: 400px; /* Set a default max height of the modal (adjusted later)*/
      position: fixed; /* Display modal in the centre of your screen */
      overflow-y: scroll; /*  Ensure that the modal is scroll-able */
      -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
    }
    .modal.fade.in{
        top: 5px; /* Use more screen real estate */
    }
    .modal-body{
        /* Increase the max height of the modal body to try & avoid both it,
         * and the modal container having scroll bars which results in odd behavior */ 
        max-height: 2400px; /* body 높이 (2400px)를 스마트폰의 최대 높이 보다 크게주면 모달창의 header, footer가 body안으로 들어감*/
    }

    /* Now adjust the height so it handles various screen sizes & orientations */
    /* You could make this as granular as you like, or have it more granular at common screen sizes
     * but it should start at the height we set on .modal (i.e. 500px) & work down */
    @media (max-width: 480px) and (max-height: 500px){.modal{ height: 450px}}
    @media (max-width: 480px) and (max-height: 450px){.modal{ height: 400px}}
    @media (max-width: 480px) and (max-height: 400px){.modal{ height: 350px}}
    @media (max-width: 480px) and (max-height: 350px){.modal{ height: 300px}}
    @media (max-width: 480px) and (max-height: 300px){.modal{ height: 250px}}
    @media (max-width: 480px) and (max-height: 250px){.modal{ height: 200px}}
    @media (max-width: 480px) and (max-height: 200px){.modal{ height: 150px}}
    /* [end] (스마트폰에서 모달 박스 높이를 조절 하기 위함)   */

    .modal-footer {
      background-color: red;
    }

  }

  /* Galaxy S3 ~ S5 */
  @media (min-width: 320px) and (min-height: 500px) and (max-height: 600px) and (orientation : portrait) { 
    .modal.sc_modal {
      height: 90%; /* Set a default max height of the modal (adjusted later)*/
      position: fixed; /* Display modal in the centre of your screen */
      overflow-y: scroll; /*  Ensure that the modal is scroll-able */
      -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
    }
    .modal.fade.in{
        top: 5px; /* Use more screen real estate */
    }
    .modal-body.sc_modal-body{
        /* Increase the max height of the modal body to try & avoid both it,
         * and the modal container having scroll bars which results in odd behavior */ 
        max-height: 320px; /* 여기 크기를 2400px 로 주면 모달창 head,footer 가 body영역으로 들어감 */
    }

  
  } 
  /* end */

  /* Galaxy S6 ~ S7 */
  /* Galaxy S7에서  firfox (w: 360px, h: 560px), chrome (w: 360px, h: 560px), scan to web (w: 358px, h: 541px) */
  @media (min-width: 350px) and (min-height: 500px) and (max-height: 600px) and (orientation : portrait) { 
    .modal.sc_modal {
      height: 90%; /* Set a default max height of the modal (adjusted later)*/
      position: fixed; /* Display modal in the centre of your screen */
      overflow-y: scroll; /*  Ensure that the modal is scroll-able */
      -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
    }
    .modal.fade.in{
        top: 5px; /* Use more screen real estate */
    }
    .modal-body.sc_modal-body{
        /* Increase the max height of the modal body to try & avoid both it,
         * and the modal container having scroll bars which results in odd behavior */ 
        max-height: 320px; /* 여기 크기를 2400px 로 주면 모달창 head,footer 가 body영역으로 들어감 */
    }
  
  } 
  /* end */

  /* 주요 스마트폰별 오리지널 화면 사이즈 */
  /* Galaxy S3 (origin - w:320px, h:640px) */
  /* Galaxy S4 (origin - w:320px, h:640px) */
  /* Galaxy S5 (origin - w:360px, h:640px) */
  /* HTC One   (origin - w:360px, h:640px) */
  /* iphone 2G ~ 4s (origin - w: 320px, h:480px) */
  /* iphone 5,5s (origin - w: 320px, h:568px) */
  /* iphone 6 (origin - w: 375px, h:667px) */
  /* iphone 6 plus (origin - w: 414px, h:736px)에서 firfox (w: 414px, h: 614px), chrome (w: 414px, h: 660px), safari (w: 414px, h:622px), scan to web (w: 414px, h: 626px) */

  /* 모달창 body의 상단 하단에 라인을 주어 시작과 끝을 알려서 백그라운드 페이지의 스크롤 방지를 위함 (스마트폰 , 패드에서만 나옴) */
 .sc_modal-body > .row-fluid {
    border-top: 2px solid #FF6347; 
    border-bottom: 2px solid #FF6347;
 }

 /* (중요) 안드로이드 폰에서 모달창에서 키보드 자판이 보일때 키보드 자판밑으로 들어간 input,textarea 박스를 키보드 위로 올리기 위해서 모달 박스 하단에 박스를 주어야함 */
#sc_modal_global_body_bottom_empty {height: 300px;}