@charset("utf-8");
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

.notosanskr * { 
 font-family: 'Noto Sans KR', sans-serif;
}
* {
    margin: 0;
	padding: 0;
	word-wrap: break-word;
	word-break: keep-all;	
	}
html,body{ 
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 패딩 포함 폭 계산 */
  color: #55555;
  line-height: 1.6em;
  height: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  }

div, ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote{
    margin: 0;
    padding: 0;
	font-size:16px;
    /* font: normal 14px dotum; */
    /* color: #565656; */
    line-height: 1.25em;
}

body, code {
    
	color: #1b1e26;
    font-family: "Noto Sans KR",sans-serif,'맑은고딕',Dotum,"나눔고딕",arial,verdana,sans-serif;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
input,select,textarea {
    font-size: 16px;
    font-family: "Noto Sans KR",sans-serif,'맑은고딕',Dotum,"나눔고딕",arial,verdana,sans-serif;
    vertical-align: middle;
    outline: 0;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    color: #1c1c1c
}
caption {
    overflow: hidden;
    width: 1px;
    font-size: 1px;
    line-height: 0;
    text-indent: 150%;
    white-space: nowrap
}

.blind,legend {
    display: block;
    overflow: hidden;
    position: absolute;
    font-size: 1px;
    line-height: 0;
    color: transparent;
    text-indent: -150%;
    white-space: nowrap
}
input[name=loginId],input[name=loginPasswd] {
    appearance: menulist-button;
    background-image: none !important;
    background-color: rgb(232, 240, 254) !important;
    color: fieldtext !important;
}
button {
     overflow:visible; 
     padding:0; 
     margin:0; 
     border:0;
     outline:0; 
     font-family:"Noto Sans KR",sans-serif,'맑은고딕',Dotum,"나눔고딕",arial,verdana,sans-serif; 
     cursor:pointer; 
     -webkit-user-select:none; 
     background:0 0; 
}
a { 
	font-size: 100%;	
	color: #555555;
}
a:link {
    color: #555555;
    text-decoration: none;
}
a:link, a:visited {
    color: #555555;
	text-decoration: none;
}

a:active, a:hover {
	color: #555555;
	text-decoration: none;
}

ul li { list-style: none; }
/*  */
:root {
    --color-primary: #0295DF;
    --color-primary-hover: #0066B3;
    --color-secondary: #2A3652;
    --color-secondary-hover: #727D92;
	--color-white: #FFFFFF;
	--color-black: #000000;
    --ico-target-white: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8 5C6.343 5 5 6.343 5 8v8c0 1.657 1.343 3 3 3h8c1.657 0 3-1.343 3-3v-.444c0-.553.448-1 1-1s1 .447 1 1V16c0 2.761-2.239 5-5 5H8c-2.761 0-5-2.239-5-5V8c0-2.761 2.239-5 5-5h.444c.553 0 1 .448 1 1s-.447 1-1 1H8z' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M20.707 3.293c.39.39.39 1.024 0 1.414l-8.889 8.889c-.39.39-1.023.39-1.414 0-.39-.39-.39-1.024 0-1.414l8.89-8.89c.39-.39 1.023-.39 1.413 0z' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 4c0-.552.448-1 1-1h7c.552 0 1 .448 1 1v7c0 .552-.448 1-1 1s-1-.448-1-1V5h-6c-.552 0-1-.448-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E%0A);
    --ico-target-black: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 5C6.343 5 5 6.343 5 8v8c0 1.657 1.343 3 3 3h8c1.657 0 3-1.343 3-3v-.444c0-.553.448-1 1-1s1 .447 1 1V16c0 2.761-2.239 5-5 5H8c-2.761 0-5-2.239-5-5V8c0-2.761 2.239-5 5-5h.444c.553 0 1 .448 1 1s-.447 1-1 1H8z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M20.707 3.293c.39.39.39 1.024 0 1.414l-8.889 8.889c-.39.39-1.023.39-1.414 0-.39-.39-.39-1.024 0-1.414l8.89-8.89c.39-.39 1.023-.39 1.413 0z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 4c0-.552.448-1 1-1h7c.552 0 1 .448 1 1v7c0 .552-.448 1-1 1s-1-.448-1-1V5h-6c-.552 0-1-.448-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E%0A);
    --ico-target-gray: url(data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGZpbGw9IiM2NjcwODQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTggNUM2LjM0MyA1IDUgNi4zNDMgNSA4djhjMCAxLjY1NyAxLjM0MyAzIDMgM2g4YzEuNjU3IDAgMy0xLjM0MyAzLTN2LS40NDRjMC0uNTUzLjQ0OC0xIDEtMXMxIC40NDcgMSAxVjE2YzAgMi43NjEtMi4yMzkgNS01IDVIOGMtMi43NjEgMC01LTIuMjM5LTUtNVY4YzAtMi43NjEgMi4yMzktNSA1LTVoLjQ0NGMuNTUzIDAgMSAuNDQ4IDEgMXMtLjQ0NyAxLTEgMUg4eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+CiAgICA8cGF0aCBmaWxsPSIjNjY3MDg0IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC43MDcgMy4yOTNjLjM5LjM5LjM5IDEuMDI0IDAgMS40MTRsLTguODg5IDguODg5Yy0uMzkuMzktMS4wMjQuMzktMS40MTQgMC0uMzktLjM5LS4zOS0xLjAyNCAwLTEuNDE0bDguODg5LTguODljLjM5LS4zOSAxLjAyNC0uMzkgMS40MTQgMHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgogICAgPHBhdGggZmlsbD0iIzY2NzA4NCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgNGMwLS41NTIuNDQ4LTEgMS0xaDdjLjU1MiAwIDEgLjQ0OCAxIDF2N2MwIC41NTItLjQ0OCAxLTEgMXMtMS0uNDQ4LTEtMVY1aC02Yy0uNTUyIDAtMS0uNDQ4LTEtMXoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K);
    --ico-target-blue: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%233971FF' fill-rule='evenodd' d='M8 5C6.343 5 5 6.343 5 8v8c0 1.657 1.343 3 3 3h8c1.657 0 3-1.343 3-3v-.444c0-.553.448-1 1-1s1 .447 1 1V16c0 2.761-2.239 5-5 5H8c-2.761 0-5-2.239-5-5V8c0-2.761 2.239-5 5-5h.444c.553 0 1 .448 1 1s-.447 1-1 1H8z' clip-rule='evenodd'/%3E%3Cpath fill='%233971FF' fill-rule='evenodd' d='M20.707 3.293c.39.39.39 1.024 0 1.414l-8.889 8.889c-.39.39-1.023.39-1.414 0-.39-.39-.39-1.024 0-1.414l8.89-8.89c.39-.39 1.023-.39 1.413 0z' clip-rule='evenodd'/%3E%3Cpath fill='%233971FF' fill-rule='evenodd' d='M12 4c0-.552.448-1 1-1h7c.552 0 1 .448 1 1v7c0 .552-.448 1-1 1s-1-.448-1-1V5h-6c-.552 0-1-.448-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E%0A);
    --ico-target-blue-hover: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%232952b8' fill-rule='evenodd' d='M8 5C6.343 5 5 6.343 5 8v8c0 1.657 1.343 3 3 3h8c1.657 0 3-1.343 3-3v-.444c0-.553.448-1 1-1s1 .447 1 1V16c0 2.761-2.239 5-5 5H8c-2.761 0-5-2.239-5-5V8c0-2.761 2.239-5 5-5h.444c.553 0 1 .448 1 1s-.447 1-1 1H8z' clip-rule='evenodd'/%3E%3Cpath fill='%232952b8' fill-rule='evenodd' d='M20.707 3.293c.39.39.39 1.024 0 1.414l-8.889 8.889c-.39.39-1.023.39-1.414 0-.39-.39-.39-1.024 0-1.414l8.89-8.89c.39-.39 1.023-.39 1.413 0z' clip-rule='evenodd'/%3E%3Cpath fill='%232952b8' fill-rule='evenodd' d='M12 4c0-.552.448-1 1-1h7c.552 0 1 .448 1 1v7c0 .552-.448 1-1 1s-1-.448-1-1V5h-6c-.552 0-1-.448-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E%0A);
    --ico-global: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E %3Cg clip-path='url%28%23clip0_1760_7902%29'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.53846 10C1.53846 9.33336 1.61555 8.68472 1.76131 8.06252H5.83963C5.74712 8.69605 5.6937 9.33798 5.68074 9.98459C5.68054 9.99486 5.68054 10.0051 5.68074 10.0154C5.69559 10.7567 5.76363 11.4918 5.88277 12.2152H1.83137C1.64037 11.5091 1.53846 10.7665 1.53846 10ZM6.2178 13.7536H2.41451C3.55579 16.0556 5.71406 17.7639 8.30183 18.2911C7.36156 16.9079 6.65838 15.3726 6.2178 13.7536ZM11.6984 18.291C14.2861 17.7638 16.4442 16.0555 17.5855 13.7536H13.7824C13.3419 15.3726 12.6387 16.9079 11.6984 18.291ZM12.1814 13.7536C11.7111 15.2945 10.9741 16.7407 10.0001 18.0174C9.02613 16.7407 8.28911 15.2945 7.81884 13.7536H12.1814ZM12.5559 12.2152H7.44429C7.31099 11.489 7.23503 10.7482 7.21921 9.99999C7.23302 9.34691 7.29265 8.69952 7.39623 8.06252H12.604C12.7076 8.69952 12.7672 9.34691 12.781 9.99999C12.7652 10.7482 12.6892 11.489 12.5559 12.2152ZM14.1175 12.2152H18.1204C18.1364 12.2152 18.1524 12.2157 18.1682 12.2166C18.3595 11.5102 18.4615 10.767 18.4615 10C18.4615 9.33024 18.3837 8.67865 18.2366 8.05379C18.1987 8.05954 18.1599 8.06252 18.1204 8.06252H14.1606C14.2531 8.69605 14.3065 9.33798 14.3195 9.98459C14.3197 9.99486 14.3197 10.0051 14.3195 10.0154C14.3046 10.7567 14.2366 11.4918 14.1175 12.2152ZM13.8552 6.52406H17.7169C16.6154 4.0824 14.3891 2.25723 11.6985 1.70897C12.6923 3.17099 13.4213 4.80296 13.8552 6.52406ZM8.30182 1.70892C5.61104 2.25711 3.38464 4.08232 2.28308 6.52406H6.14502C6.57897 4.80294 7.30795 3.17095 8.30182 1.70892ZM7.73727 6.52406H12.263C11.7985 4.87922 11.0324 3.33568 10.0001 1.98262C8.96783 3.33568 8.20173 4.87922 7.73727 6.52406ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z' fill='%231b1e26'%3E%3C/path%3E%3C/g%3E%3C/svg%3E);
    --ico-global-white: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E %3Cg clip-path='url%28%23clip0_1760_7902%29'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.53846 10C1.53846 9.33336 1.61555 8.68472 1.76131 8.06252H5.83963C5.74712 8.69605 5.6937 9.33798 5.68074 9.98459C5.68054 9.99486 5.68054 10.0051 5.68074 10.0154C5.69559 10.7567 5.76363 11.4918 5.88277 12.2152H1.83137C1.64037 11.5091 1.53846 10.7665 1.53846 10ZM6.2178 13.7536H2.41451C3.55579 16.0556 5.71406 17.7639 8.30183 18.2911C7.36156 16.9079 6.65838 15.3726 6.2178 13.7536ZM11.6984 18.291C14.2861 17.7638 16.4442 16.0555 17.5855 13.7536H13.7824C13.3419 15.3726 12.6387 16.9079 11.6984 18.291ZM12.1814 13.7536C11.7111 15.2945 10.9741 16.7407 10.0001 18.0174C9.02613 16.7407 8.28911 15.2945 7.81884 13.7536H12.1814ZM12.5559 12.2152H7.44429C7.31099 11.489 7.23503 10.7482 7.21921 9.99999C7.23302 9.34691 7.29265 8.69952 7.39623 8.06252H12.604C12.7076 8.69952 12.7672 9.34691 12.781 9.99999C12.7652 10.7482 12.6892 11.489 12.5559 12.2152ZM14.1175 12.2152H18.1204C18.1364 12.2152 18.1524 12.2157 18.1682 12.2166C18.3595 11.5102 18.4615 10.767 18.4615 10C18.4615 9.33024 18.3837 8.67865 18.2366 8.05379C18.1987 8.05954 18.1599 8.06252 18.1204 8.06252H14.1606C14.2531 8.69605 14.3065 9.33798 14.3195 9.98459C14.3197 9.99486 14.3197 10.0051 14.3195 10.0154C14.3046 10.7567 14.2366 11.4918 14.1175 12.2152ZM13.8552 6.52406H17.7169C16.6154 4.0824 14.3891 2.25723 11.6985 1.70897C12.6923 3.17099 13.4213 4.80296 13.8552 6.52406ZM8.30182 1.70892C5.61104 2.25711 3.38464 4.08232 2.28308 6.52406H6.14502C6.57897 4.80294 7.30795 3.17095 8.30182 1.70892ZM7.73727 6.52406H12.263C11.7985 4.87922 11.0324 3.33568 10.0001 1.98262C8.96783 3.33568 8.20173 4.87922 7.73727 6.52406ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z' fill='%23fff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E);
    --ico-global-blue: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E %3Cg clip-path='url%28%23clip0_1760_7902%29'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.53846 10C1.53846 9.33336 1.61555 8.68472 1.76131 8.06252H5.83963C5.74712 8.69605 5.6937 9.33798 5.68074 9.98459C5.68054 9.99486 5.68054 10.0051 5.68074 10.0154C5.69559 10.7567 5.76363 11.4918 5.88277 12.2152H1.83137C1.64037 11.5091 1.53846 10.7665 1.53846 10ZM6.2178 13.7536H2.41451C3.55579 16.0556 5.71406 17.7639 8.30183 18.2911C7.36156 16.9079 6.65838 15.3726 6.2178 13.7536ZM11.6984 18.291C14.2861 17.7638 16.4442 16.0555 17.5855 13.7536H13.7824C13.3419 15.3726 12.6387 16.9079 11.6984 18.291ZM12.1814 13.7536C11.7111 15.2945 10.9741 16.7407 10.0001 18.0174C9.02613 16.7407 8.28911 15.2945 7.81884 13.7536H12.1814ZM12.5559 12.2152H7.44429C7.31099 11.489 7.23503 10.7482 7.21921 9.99999C7.23302 9.34691 7.29265 8.69952 7.39623 8.06252H12.604C12.7076 8.69952 12.7672 9.34691 12.781 9.99999C12.7652 10.7482 12.6892 11.489 12.5559 12.2152ZM14.1175 12.2152H18.1204C18.1364 12.2152 18.1524 12.2157 18.1682 12.2166C18.3595 11.5102 18.4615 10.767 18.4615 10C18.4615 9.33024 18.3837 8.67865 18.2366 8.05379C18.1987 8.05954 18.1599 8.06252 18.1204 8.06252H14.1606C14.2531 8.69605 14.3065 9.33798 14.3195 9.98459C14.3197 9.99486 14.3197 10.0051 14.3195 10.0154C14.3046 10.7567 14.2366 11.4918 14.1175 12.2152ZM13.8552 6.52406H17.7169C16.6154 4.0824 14.3891 2.25723 11.6985 1.70897C12.6923 3.17099 13.4213 4.80296 13.8552 6.52406ZM8.30182 1.70892C5.61104 2.25711 3.38464 4.08232 2.28308 6.52406H6.14502C6.57897 4.80294 7.30795 3.17095 8.30182 1.70892ZM7.73727 6.52406H12.263C11.7985 4.87922 11.0324 3.33568 10.0001 1.98262C8.96783 3.33568 8.20173 4.87922 7.73727 6.52406ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z' fill='%233971FF'%3E%3C/path%3E%3C/g%3E%3C/svg%3E);
    --ico-arrow-left: url(data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIHN0cm9rZT0iIzQ0NEI1OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik05IDE3bC01LTUgNS01TTQgMTJoMTYiLz4KPC9zdmc+Cg==);
    --ico-arrow-left-disabled: url(data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIHN0cm9rZT0iI0FFQjRDNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik05IDE3bC01LTUgNS01TTQgMTJoMTYiLz4KPC9zdmc+Cg==);
    --ico-arrow-left-hover: url(data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIHN0cm9rZT0iIzM5NzFGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik05IDE3bC01LTUgNS01TTQgMTJoMTYiLz4KPC9zdmc+Cg==);
    --ico-top: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5947 12.6872C18.215 13.0668 17.5994 13.0668 17.2198 12.6872L12.973 8.44043V17.8331C12.973 18.37 12.5377 18.8053 12.0008 18.8053C11.4639 18.8053 11.0286 18.37 11.0286 17.8331V8.44046L6.78188 12.6872C6.4022 13.0668 5.78663 13.0668 5.40695 12.6872C5.02727 12.3075 5.02727 11.6919 5.40695 11.3122L11.3133 5.40586C11.4127 5.30651 11.5282 5.23315 11.6514 5.1858C11.7434 5.15034 11.8422 5.12848 11.9452 5.12267C12.0764 5.11521 12.2088 5.13418 12.3337 5.1796C12.4631 5.22664 12.5845 5.30206 12.6883 5.40585L18.5947 11.3122C18.9744 11.6919 18.9744 12.3075 18.5947 12.6872Z' fill='%231B1E26'/%3E%3C/svg%3E%0A);
    --font-display-size: 2rem;
    --font-display-line: 2.63rem;
    --font-section-size: 1.63rem;
    --font-section-line: 2.44rem;
    --font-article-size: 1.25rem;
    --font-article-line: 1.88rem;
    --font-body1-size: 0.94rem;
    --font-body1-line: 1.44rem;
    --font-body2-size: 1.13rem;
    --font-body2-line: 1.69rem;
    --font-caption-size: 0.81rem;
    --font-caption-line: 1.25rem;
}
header {
  position: sticky;
  top: env(safe-area-inset-top);
}
.header-top { position:fixed;top:0;left:0;z-index:99;width:100%; background-color:#ffffff;border-bottom:1px solid #dbdfe2; height:80px; overflow:hidden; }
.header-top h1 { float:left; margin:22px 0 0 13.8px; }
.header-top h1 img { height:36px; }
.header-top ul { float:right; margin:10px 0px 0 0; }
.header-top ul li { float:left; margin-left:0px; }
.header-top ul li img { border:1px solid #dbdfe2; height:38px; border-radius:12px; }
.header-top ul li img.insta { border:1px solid #dbdfe2; height:30px; }
body {
  padding-top: env(safe-area-inset-top);
}

/*  footer */
footer {
    width: 100%;
    padding: 30px;
    background-color: #f4f4f4;
    display: block;
    box-sizing: border-box; /* padding이 width 안에 포함되도록 */
}

footer {
    width: 100%;
    padding: 30px;
    background-color: #f4f4f4;
    display: block;
    box-sizing: border-box;
}

footer .container {
    width: 100%;
    text-align: center;
    color: #737373; /* 흰색보다 가독성 좋게 */
}

.footer .address {
    line-height: 140%;
    letter-spacing: 2%;
    margin: 0;
    padding-top: 0;
    font-size: 13px;
    color: #737373;
}

.footer .copy {
    margin-top: 3px;
    line-height: 12px;
    color: #737373;
}

/* overlay */
.ssm-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .7); display: none; z-index: 994; }
.ssm-overlay.active { display:'block'; }

/* mobileCateogry*/
/* mobileCateogryMain*/
.mobileNav .menu {  position:relative; width: 100%; margin-left:15px; margin-right:15px; margin-top:5px; margin-bottom:5px; padding-left:15px; padding-top:13px; padding-bottom:8px; border-top:1px solid #dedede; border-bottom:1px solid #ffffff; }
.mobileNav a .menu 	{ font-weight:400;font-size: 16px; }
.mobileNav a .menu:hover,.mobileNav a .menu:focus{  font-weight:700; }
.mobileNav a .menu:after {
    border-top: 2px solid #C0C0C0;
    border-right: 2px solid #C0C0C0;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 55px;
    top: 40%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.mobileNav { 
display:none; 
height: 100%; 
width: 100%; 
left:0; 
top: 0px;
position:fixed; 
overflow-y: auto; 
overflow-x: hidden; 
}
.mobileNav > div { position:absolute; left:0; height:100%; width:50%; background:#fff; overflow-y: auto; overflow-x: hidden;   }
.mobileNav .top { width:100%;position:relative;}
.mobileNav .top p {position:absolute;top:10px;right:15px;}
.mobileNav .top p img { height:30px; border:1px solid #dbdfe2; }
.mobileNav .top ul{overflow:hidden;padding:15px;padding-top:50px;}
.mobileNav .top ul li{background:#ebeff0;border:1px solid #dbdfe2;margin-bottom:5px;}
.mobileNav .top ul li a{display:block;color:#6a7b83;padding:5px 10px;text-align:center;}
.mobileNav .top ul li:first-child{width:38%;margin-right:5px;float:left;}
.mobileNav dl { width:100%; overflow:hidden; border-bottom:1px solid #dbdfe2; }
.mobileNav dt { height:45px; line-height:45px; border-top:1px solid #dbdfe2; color:#333; font-size:16px; text-indent:20px; font-family:'Nanum Square'; background:url(/mobile/img/common/icon_category.gif) no-repeat 90% center; background-size:10px; }
.mobileNav dt.on { background:#3ab5c0 url(/mobile/img/common/icon_category_on.gif) no-repeat 90% center; color:#fff; background-size:10px; }
.mobileNav dd { display:none; padding:10px 0; }
.mobileNav dd > p  { text-indent:20px; font-size:13px; line-height:220%;  color:#5a6570; }
.mobileNav dd > p:before { content:"- "; }
.mobileNav dd > p a { display:inline; width:auto; color:#5a6570; }
.mobileNav dd > p a:first-child { border-top:none; }
.mobileNav dd > p.on,
.mobileNav dd > p.on a { font-weight:bold; color:#478edc; text-decoration:none; }
.mobileNav dd ul { display:none; background:#ebedf0; overflow:hidden; margin:0 20px; padding:5px 10px; box-sizing:border-box; }
.mobileNav dd ul li { line-height:220%; position:relative; padding-left:7px; }
.mobileNav dd ul li a { color:#515151; }
.mobileNav dd ul li:before { content:""; display:block; width:2px; height:2px; background:#333; position:absolute; top:12px; left:0;  }
.mobileNav dd ul li p { text-indent:5px;  }

/* gridPosition */
.gridPosition { position:relative; }

.loginArea { padding:0 1.5rem 7.625rem; }

/* mFormBox */
.mFormBox  .column + .column { margin:.75rem 0 0; }
.mFormBox  .column .title { display:block; margin:0 0 .313rem; color:#444B59; }

/* mButton */
.mButton { margin:1.5rem 0 1.0rem 0; }
.mButton .btnStrong,.mButton .btnWStrong{ width:100%; letter-spacing:-0.5px; }


/* fText */
.fText { position:relative; padding:.875rem .75rem; width:100%; height:3rem; font-size:.875rem; line-height:1.25rem; border:1px solid #d6dae1; border-radius:4px; transition:border .3s ease-out; box-sizing:border-box; color:#1b1e26; }
.fText:hover { border-color:#3971ff; }
.fText:focus { border-color:#3971ff; box-shadow:0px 0px 0px 3px #bccdfa; transition:all .3s ease-out; }
.fText:disabled,
.fText.disabled { color:#aeb4c6; background-color:#f4f5f8; cursor:not-allowed; }
.fText:disabled:hover,
.fText.disabled:hover,
.fText:disabled:focus,
.fText.disabled:focus { box-shadow:none; border-color:#d6dae1; }
.fText.typeError { color:#f52247; border-color:#f52247; }
.fText.typeError:focus { box-shadow:0px 0px 0px 3px #f4b6c3;}
.fText.suffix { padding-right:105px; }
.fText.typePassword { padding-right:2.5rem; }

/* btnView */
.btnView { position:absolute; right:.75rem; top:.813rem; padding:0; width:1.5rem; height:1.5rem; min-height:1.5rem; font-size:0; color:transparent; text-indent:150%; }
.btnView:after { content:''; position:absolute; left:0; top:0; width:1.5rem; height:1.5rem; }
.btnView.off:after { background:url('') no-repeat; }
.btnView.on:after { background:url('') no-repeat; }
.btnBasic,.btnCtrl,.btnDefault,.btnNormal,.btnStrong, .btnWStrong {
    display: inline-block;
    padding: 0 1rem;
    height: 2.25rem;
    line-height: 2.24rem;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    font-size: var(--font-body1-size);
    font-weight: 400;
    border-radius: 3px;
    white-space: nowrap;
    text-align: center
}

.btnStrong {
    border-color: var(--color-primary);
    color: #fff;
    background: var(--color-primary)
}
.btnWStrong {
    border-color: var(--color-black);
    color: #000000;
   background: var(--color-white);
   &:hover {
				 border-color: #000000;
				 border-width: 2px;
				 border-style: solid;
				color: var(--color-white);
				background: #0066cc !important;
				transition: all 1.2s ;
		}
  
}


.btnStrong.typeSecond {
    background: var(--color-secondary);
    border-color: var(--color-secondary)
}

.btnNormal {
    border-color: #d1d1d1;
    color: #000;
    background: #fff
}

.btnBasic {
    border-color: #aeb4c6;
    color: #000
}

.btnDefault {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #fff
}

.btnCtrl {
    border-color: #2a3652;
    color: #fff;
    background-color: #2a3652
}

[class*=btn].typePrimary {
    border-color: var(--color-primary);
    color: var(--color-primary)
}

[class*=btn].gLarge {
    height:  4rem;
    padding: 0 2rem;
    line-height: 2.9rem;
    font-size: 1rem;
    font-weight: 700
}

[class*=btn].gMedium {
    height: 3rem;
    padding: 0 1.5rem;
    line-height: 2.9rem;
    font-weight: 700
}

[class*=btn].gSmall {
    height: 2.25rem;
    padding: 0 1rem;
    line-height: 2rem
}

.btnIcon {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #2b2b2b
}

.btnIcon [class*=ico] {
    margin-right: .5rem
}

section>.gInner>.mButton {
    margin: 2rem 0 0
}

.mButton.gFull [class*=btn] {
    display: block
}
[class*=btn].gMedium {
    height: 3rem;
    padding: 0 1.5rem;
    line-height: 2.9rem;
    font-weight: 700;
}

@media (hover: hover) {
    .btnNormal:hover {
        background:#ededed
    }

    .btnBasic:hover {
        color: #000;
        background: #fff
    }

    .btnDefault:hover {
        background: #e6ecfa
    }

    .btnStrong:hover {
        border-color: #0d43cc;
        background: #0d43cc !important;
    }
   
  
	
	


    .btnStrong.typeSecond:hover {
        background: var(--color-secondary-hover);
        border-color: var(--color-secondary-hover)
    }
}
.mbtn {
    position: relative;
	width: 60px; 
	height: 60px; 
	text-align: center; 
	cursor: pointer; 
	z-index: 1;
	&::before{
	   content:'';
	   position:absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	   border-radius:50%; 
	/*   border:1.5px solid #757575; */
	   background-image: linear-gradient(#e8e8e8, #e8e8e8), 
           linear-gradient(to right,#8c8c8c 0%,  #bdbdbd 100%);
       background-origin: border-box;
       background-clip: content-box, border-box;
	   box-sizing:border-box;
	   transform:scale(0);
	   transition:0.5s
	   }
	.clip {
			width: 60px;   
			position: absolute;
			height: 60px;  
			clip: rect(0,0,0,0);
			text-align: center;    
			width: 1px;
			cursor: pointer;    
			height: 1px;
			z-index: 1;   
			overflow: hidden;
            }
}


/*
.mbtn
.mbtn span:not(.clip){position:relative; display:inline-block; vertical-align: top; width: 30px; height: 2px; margin: 31px  0;}
.mbtn span:not(.clip)::before{content:''; position:absolute; top: -5px; right: 0; width: 15px; height: 2px; background: #fff; transition:0.3s cubic-bezier(0.37, 0, 0.63, 1);}
.mbtn span:not(.clip)::after{content:''; position:absolute; top: 5px; left: 0; width: 30px; height: 2px; background: #fff; transition:0.3s cubic-bezier(0.37, 0, 0.63, 1);}
*/
.clip {position: absolute;clip: rect(0,0,0,0);width: 1px;height: 1px;overflow: hidden;}
.mbtn:hover::before{transform:scale(1);background-color:#e8e8e8;transition-delay: 0.2s}
.mbtn.on span:not(.clip)::before,
.mbtn span:not(.clip){position:relative; display:inline-block; vertical-align: top; width: 30px; height: 2px; margin: 31px  0;}
.mbtn span:not(.clip)::before{content:'';position:absolute;top: -5px;right: 0;width: 30px;height: 2px;background: #757575;transition:0.3s cubic-bezier(0.37, 0, 0.63, 1);}
.mbtn span:not(.clip)::after{content:''; position:absolute; top: 5px; left: 0; width: 30px; height: 2px; background: #757575; transition:0.3s cubic-bezier(0.37, 0, 0.63, 1);}
/*
.mbtn:hover::before{transform:scale(1);transition-delay: 0.2s}
.mbtn.on span:not(.clip)::before,
.mbtn:hover span:not(.clip)::before{width: 30px; right: 5px;}
.mbtn.on span:not(.clip)::after,
.mbtn:hover span:not(.clip)::after{width: 30px; left: 5px;}
*/

.mbtn.active span:not(.clip)::before{top: 0; transform:rotate(45deg);}
.mbtn.active span:not(.clip)::after{top: 0; transform:rotate(-45deg); transition-delay: 0s}
/* bottom nav */
body {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  padding-bottom: 70px; /* 하단 메뉴 공간 확보 */
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 3px 0; /* 위아래 여백 추가 */
  z-index: 1000;
}
.bottom-nav a {
  text-decoration: none;
  color: #c9c9c9;
  font-size: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0; /* 각 메뉴 아이템에 여백 */
  transition: color 0.3s ease;
}
.bottom-nav a i {
  font-size: 19px;
  margin-bottom: 6px;
}
.bottom-nav a.active,
.bottom-nav a:hover {
  color: #007bff;
}

    .bottom-nav a.active,
    .bottom-nav a:hover {
      color: #007bff;
    }

    /* Floating Fav 버튼 */
    .fab2 {
      position: fixed;
      bottom: 88px; /* bottom-nav 위에 딱 맞게 */
      right: 10px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #0066B3;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26px;
      cursor: pointer;
      z-index: 1000;
      transition: background 0.3s;
    }
    .fab2:hover {
      background: #0056b3;
    }

    /* 다이얼 메뉴 */
    .fab-menu {
      position: fixed;
      bottom: 160px; /* fab 버튼 바로 위에서 시작 */
      right: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      z-index: 999;		
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
      transition: all 0.3s ease;
    }
    .fab-menu a {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #ffffff;
      border: 0px solid #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #007bff;
      font-size: 20px;
      text-decoration: none;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      transition: transform 0.3s, opacity 0.3s;
    }
	.fab-menu a:nth-child(1){
		background-color:#31b24a;
	}
	.fab-menu a:nth-child(2){
		background-color:#3c5a99;
	}
    .fab-menu a:nth-child(3){
		background-color:#d2262b;
	}
   .fab-menu a:nth-child(4){
		background-color:#31b24a;
	}
    .fab-menu.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
/* 햄버거 클릭 시 X 변환 */


/* 슬라이딩 메뉴 */
.slide-menu {
  position: fixed;
  top: 81px;                 /* 헤더 높이 */
  left: -100%;
  width: 100%;
  max-height: calc(var(--vh) * 100 - 81px); /* 🔑 핵심 */
  background: #fff;
  color: #111;
  transition: left 0.3s ease;
  z-index: 1001;
  height:100%;

  overflow-y: auto;          /* 🔑 메뉴 내부 스크롤 */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.slide-menu.open {
  left: 0;
}


/* 메뉴 리스트 */
.menu-list { list-style: none; padding: 0; margin: 0; }

.menu-item {
  padding: 16px 26px 16px 36px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight:600;
}
.menu-item { cursor: pointer; }
.menu-item .arrow { float: right; margin-right: -3px;transition: transform 0.0s; }
.menu-item:hover { background: #f0f0f0; }
.menu-item.open{  background: #f0f0f0; color:#1C1C1C; }
.menu-item.open .arrow { transform: rotate(180deg); color:#1C1C1C; }
/* 서브메뉴 */
.submenu {
  list-style: none;
  padding-left: 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.submenu.open { max-height: 500px; color:#888888; }
.submenu.open a{ max-height: 500px; color:#88888; }

.submenu li {
  padding: 12px 0 12px 38px;
  border-bottom: 1px solid #eee;
}
.submenu li.active  {
	font-weight:800;
}

.arrow { font-size: 12px; }

/* 드래그 시 메뉴 부드럽게 이동 */
.slide-menu.dragging { transition: none; }
.clear { clear:both; }
#toast {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 12px 18px;
  border-radius: 20px;
  font-size: 14px;
  opacity: 0;
  width: 80%;
  margin:0 auto; 
  text-align: center;
  transition: opacity .3s, bottom .3s;
  z-index: 9999;
}
#toast.show {
  opacity: 1;
  bottom: 110px;
}
/* ===== 래퍼 ===== */
.mobile-join-wrap {
  box-sizing: border-box;
  max-width: 480px;
  margin: 85px auto 0px auto;
  padding: 0px 16px 40px 16px;
  background: #fff;
  width: 100%;

}
/* 생년월일 */
.birth-wrap {
  display: flex;
  gap: 8px;
}

.birth-wrap select {
  flex: 1;
  height: 42px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 14px;
}
/* 성별 버튼형 라디오 */
.gender-wrap {
  display: flex;
  gap: 10px;
}

.gender-wrap input[type="radio"] {
  display: none;
}

.gender-wrap label {
  flex: 1;
  text-align: center;
  padding: 10px 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.gender-wrap input[type="radio"]:checked + label {
  background: #2d8cf0;
  border-color: #2d8cf0;
  color: #fff;
}

.gender-wrap label:hover {
  border-color: #2d8cf0;
}