@charset "utf-8"; /* CSS Document */
.board_newsletter .newsletterContent { display: flex; gap: 1.5em; flex-wrap: wrap; } 
.board_newsletter .card_wrap { width: calc((100% - 5em) / 4); }
.board_newsletter .nlCard {background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #eaeaea; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; } 
.board_newsletter .nlCard:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); } 
.board_newsletter .nlCard .imgW { width: 100%; height: 330px; overflow: hidden; background: #eee; } 
.board_newsletter .nlCard .imgW img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s; } 
.board_newsletter .nlCard:hover .imgW img { transform: scale(1.05); } 
.board_newsletter .nlCard .txtW { padding: 24px; border-top: 1px solid #eaeaea; } 
.board_newsletter .nlCard .txtW .date { display: inline-block; font-size: 13px; font-weight: 500; color: #888; margin-bottom: 8px; } 
.board_newsletter .nlCard .txtW .tit { font-size: 18px; font-weight: 700; color: #111; line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } 
.board_newsletter .nlCard .txtW .desc { font-size: 14px; font-weight: 400; color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } 

/* ==board gallery== */
.board_wrap { border-top:2px solid var(--color-black); padding-top:3rem; } 
.board_gallery { display:flex; flex-wrap:wrap; gap:1rem } 
.board_gallery > li { width: calc((100% - 3rem) / 4); } 
.board_gallery > li .wrap_in { display:block; border-radius: var(--radius-md); overflow:hidden } 
.board_gallery > li .wrap_in .img_wrap { position:relative; display:block; border-radius: var(--radius-md); overflow:hidden } 
.board_gallery > li .wrap_in .img_wrap .ab { position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box } 
.board_gallery > li .wrap_in .con_wrap { display:block; padding-bottom: 2rem; margin-top :var(--space-3); display:flex; flex-direction:column; gap:.5rem } 
.board_gallery > li .wrap_in .con_wrap .ten { text-transform: uppercase; font-size: var(--font-size-sm); } 
.board_gallery > li .wrap_in .con_wrap .t1 { font-size: var(--font-size-base); font-weight:500 } 
.board_gallery > li .wrap_in .con_wrap .t2 { font-weight:500 } 
.board_gallery > li .wrap_in .con_wrap .date { margin-top: var(--space-2); font-weight: 500; font-size: var(--font-size-xs); color: var(--color-black-6); } 
.board_gallery > li .wrap_in:hover .con_wrap .t1 { text-decoration: underline; } 
.board_gallery > li .wrap_in:focus .con_wrap,
.board_gallery > li .wrap_in:hover .con_wrap { } 

.board_gallery.youtube > li .wrap_in > .img_wrap:after { content: "\ea40"; font-family: xeicon; font-size: 3rem; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .1); transition: .3s; } 

.hover_st.zoom .img_wrap { overflow:hidden; } 
.hover_st.zoom .img_wrap .resize { transition:.3s; } 
.hover_st.zoom:focus .img_wrap .resize,
.hover_st.zoom:hover .img_wrap .resize { transform:scale(1.1); } 
.dn { display: none !important; } 
/* 로그인 */
/**/
.layer_inp { display:block; position:relative } 
.layer_inp .inp { border:1px solid #ddd; margin-bottom:-1px; padding:1em; padding-left:4em; height:4em; box-sizing:border-box; width:100%; position:relative; font-weight:500; font-size:1.188em } 
.layer_inp select.inp { padding-left:3.75em } 
.layer_inp select.inp optgroup,
.layer_inp select.inp option { font-weight:400; font-size:.938em } 
.layer_inp:first-child .inp { border-top-left-radius:.5em; border-top-right-radius:.5em } 
.layer_inp:last-child .inp { border-bottom-left-radius:.5em; border-bottom-right-radius:.5em } 
.layer_inp .tt { position:absolute; left:4em; top:0; width:calc(100% - 4em); height:100%; display:flex; align-items:center; box-sizing:border-box; padding:0 .5em; z-index:2; color:#777; font-weight:500; cursor:text } 
.layer_inp .tt > i { font-size:1.063em } 
.layer_inp .ico { font-size:var(--font-size-sm); position:absolute; left:0; top:0; width:4.5em; height:100%; display:flex; align-items:center; justify-content:center; z-index:2 } 
.layer_inp .ico:before { font-size:1.5em } 
.layer_inp .inp:focus,
.layer_inp .inp:valid { border-color:var(--color-point); z-index:1; background:#fff } 
.layer_inp .inp:focus ~ .tt,
.layer_inp .inp:valid ~ .tt { width:auto; height:1em; transform:translateY(-50%); background:#fff; color:var(--color-point) } 
.layer_inp .inp:focus ~ .tt > i,
.layer_inp .inp:valid ~ .tt > i { font-size:.875em } 
.layer_inp .inp:-webkit-autofill,
.layer_inp .inp:-webkit-autofill:hover,
.layer_inp .inp:-webkit-autofill:focus,
.layer_inp .inp:-webkit-autofill:active { -webkit-box-shadow: 0 0 0px 1000px white inset !important; -webkit-text-fill-color: #000 !important; box-shadow: 0 0 0px 1000px white inset !important } 

.login_wrap { width:40em; max-width:100%; margin:9em auto 0; display:flex; flex-direction:column; gap:2em } 
.login_wrap.modify_wrap { margin: 0 auto 0 0!important; } 
.login_wrap.w1 { width:60em } 
.login_wrap.w100 { width:100% } 
.login_wrap .login_tit { display:flex; justify-content:center; text-align:center; flex-direction:column; align-items:center; gap:1em; text-transform:uppercase } 
.login_wrap .login_tit .t1 { font-weight:700; font-size:2.5em; color:#333 } 
.login_wrap .login_tit .t1.s1 { font-size:2.25em } 
.login_wrap .login_tit .t2 { font-weight:500; color:#777; font-size:1.063em } 
.login_wrap .login_tit.flexR { flex-direction:row; justify-content:space-between; padding:1em; padding-bottom:0 } 
.login_wrap .login { padding:3em; padding-top:2.5em; border-radius:1em; box-shadow:0 0 2em rgba(0,0,0,.1); background:#fff; display:flex; flex-direction:column; gap:1em 0 } 
.login_wrap .login.row { flex-direction:row; gap:5em } 
.login_wrap .login.row > * { flex:1 } 
.login_wrap .login.g1 { gap:.5em 0 } 
.login_wrap .login > * { width:100%; box-sizing:border-box; position:relative; z-index:1 } 
.login_wrap .btn { height:3.5em; border-radius:.5em; border:2px solid transparent; font-weight:700; font-size:var(--font-size-md); display:flex; align-items:center; justify-content:center; gap:.25em } 
.login_wrap .btn.s1 { font-size:var(--font-size-base) } 
.login_wrap .btn .xi { font-size:var(--font-size-base) } 
.login_wrap .btn.c1 { background:var(--color-point); color:#fff } 
.login_wrap .btn.c2 { background:#333; color:#fff } 
.login_wrap .btn.c2.re { border-color:#333; color:#333; background:#fff } 
.login_wrap .link_wrap { padding:.5em; gap:0 1.5em; display:flex; align-items:center; justify-content:center } 
.login_wrap .link_wrap a { font-weight:500; color:#777; position:relative; display:flex; align-items:center; gap:.25em } 
.login_wrap .link_wrap a:after { content:"\e93f"; font-family:xeicon } 
.login_wrap .link_wrap a.point { font-size:1.063em; font-weight:700; color:#111 } 
.login_wrap .link_wrap a:hover:before { content:""; position:absolute; left:0; top:100%; width:calc(100% - 1em); height:1px; background:#aaa } 
.login_wrap .link_wrap a.point:hover:before { background:#111 } 
.login_wrap .m0 { margin-top:-.5em } 
.login_wrap .m1 { margin-top:1em } 
.login_wrap .tt1 { font-weight:700 } 
.login_tab { display:flex; justify-content:center; gap:2vmin } 
.login_tab > li { width:45vmin; max-width:calc(50% - 1vmin) } 
.login_tab > li > div { height:100%; border-radius:1em } 
.login_tab > li .wrap_in { height:100%; box-sizing:border-box; padding:2em; background-color:#fff; box-shadow:0 0 1em rgba(0,0,0,.2); border-radius:1em; display:flex; flex-direction:column; gap:2em } 
.login_tab > li .wrap_in .icoW { width:50%; margin:0 auto } 
.login_tab > li .wrap_in .icoW .resize { padding-bottom:100%; border-radius:50%; background:#f1f1f1 } 
.login_tab > li .wrap_in .icoW .resize .re { display:flex; align-items:center; justify-content:center } 
.login_tab > li .wrap_in .icoW .resize .xi { font-size:5em; opacity:.2 } 
.login_tab > li .wrap_in .imgW { width:80%; margin:0 auto; position:relative } 
.login_tab > li .wrap_in .imgW:before { content:""; position:absolute; left:50%; top:50%; width:80%; padding-bottom:80%; border-radius:50%; background:#f1f1f1; transform:translate(-50%, -50%) } 
.login_tab > li .wrap_in .imgW .resize { padding-bottom:75% } 
.login_tab > li .wrap_in .conW { display:flex; flex-direction:column; gap:1em; text-align:center } 
.login_tab > li .wrap_in .conW .t1 { font-weight:800; font-size:1.25em } 
.login_tab > li .wrap_in .conW .t2 { font-weight:700; color:#666; line-height:1.5; word-break:keep-all } 
.login_tab > li .wrap_in .btnW { display:flex; margin-top:auto } 
.login_tab > li .wrap_in .btnW .st { flex:1; display:flex; gap:.5em; align-items:center; justify-content:center; height:4em; border-radius:.5em; background:#f5f5f5 } 
.login_tab > li .wrap_in .btnW .st:after { content:"\e93e"; font-family:xeicon; position:absolute; opacity:0; transform:translateX(100%) } 
.login_tab > li .wrap_in:hover .btnW .st { background-image: var(--siteGra); color:#fff } 
.login_tab > li .wrap_in:hover .btnW .st:after { opacity:1; transform:translateX(0); position:inherit; transition:transform .3s } 
.login_tab > li .wrap_in .btnW .st.c1 { background:#ddd } 
.login_tab > li .wrap_in:hover .btnW .st.c1 { background:#111 } 
.login_tab > li .wrap_in .btnW .st .t1 { font-weight:800; font-size:1.063em } 

.agree_box { border-radius:.5em; border:1px solid #ddd; padding:1.5em; color:#666; font-size:.938em; line-height:1.4; background:#fff } 
.agree_box.st1 { border-radius:1em; padding:3em; font-size:var(--font-size-sm); line-height:1.5 } 
.agree_box.h1 { height:8em; overflow-y: auto; } 
.agree_box.h2 { height:10em; } 
.agree_box h2 { font-size: var(--font-size-md); color: #111; font-weight: 700; } 
.agree_box strong { color:#111; font-weight:700; } 
.agree_box .nt { margin: .85em 0 .25em 0; font-weight: 600; color: #222; } 

.stepSt { display:flex; justify-content:flex-end; gap:0 4em } 
.stepSt > li { counter-increment: myIndex } 
.stepSt > li .ico { position:relative } 
.stepSt > li:not(:last-child) .ico:before { content:""; position:absolute; left:100%; top:50%; width:4em; height:1px; background:#aaa } 
.stepSt > li .ico .xi { font-size:var(--font-size-sm); width:1.5em; height:1.5em; margin:0 auto; display:flex; align-items:center; justify-content:center; color:#fff; background:#888; border-radius:50% } 
.stepSt > li .tt { margin-top:.5em; font-weight:500; text-align:center; color:#888 } 
.stepSt > li .tt:before { content:counter(myIndex) "." } 
.stepSt > li.on { opacity:1 } 
.stepSt > li.on .tt { color:var(--color-point) } 
.stepSt > li.on .ico .xi,
.stepSt > li.on .ico:before { background:var(--color-point) } 
.stepSt > li.on .ico .xi:before { content:"\e928" } 
.stepSt > li:not(.on) .ico .xi { transform:scale(.5) } 

.authList { display:flex; gap:1em; justify-content:center; margin:2em 0 } 
.authList > li { flex:1 1 0; min-width:0; max-width:calc(50% - .5em) } 
.authBtn { padding:2em; border:1px solid #ddd; border-radius:1em; display:flex; flex-direction:column; align-items:center; text-align:center; min-height:8em; gap:1em; box-sizing:border-box; height:100%; background:#f5f5f5 } 
.authBtn .ico { width:8em; height:8em; background:rgba(0,0,0,.05); border-radius:50%; display:flex; flex-direction:column; justify-content:center } 
.authBtn .ico img { height:50% } 
.authBtn .t1 { font-weight:700; font-size:1.25em } 
.authBtn .t2 { color:#666 } 
.authBtn .link { display:flex; width:100%; justify-content:center } 
.authBtn .link .st { margin-top:auto; background:#333; color:#fff; padding:.75em; border-radius:2em; width:100%; max-width:12em; box-sizing:border-box; font-size:1.063em; font-weight:500 } 

.fin_box { border-radius:.5em; border:1px solid transparent; padding:3em; background:#f5f5f5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.5em } 
.fin_box.al { align-items:flex-start; text-align:left } 
.fin_box.p1 { padding:2em; gap:.75em } 
.fin_box.bg1 { background:none; box-shadow:0 0 1em rgba(0,0,0,.1) } 
.fin_box .tit { font-size:1.5em; font-weight:500; color:#111; text-align:center } 
.fin_box .tt1 { line-height:1.5; font-size:1.063em; color:#666; font-weight:500 } 
.fin_box .tt1.s1 { font-size:var(--font-size-sm) } 
.fin_box .fs:not(:last-child):after { content:"," } 
.fin_box .fin_ico { font-size:4em } 
.fin_box .tit,
.fin_box .tit > i,
.fin_box .tt { word-break:keep-all } 

.join_choice { gap: .5em; } 
.join_choice .in { display: block; width: 50%; text-align: center; border: 1px solid #ddd; padding: 1em; font-size: 1.05em; font-weight: 500; cursor: pointer; background: #fff; border-radius: .5em; } 
.join_choice .in:hover { background: #ebebf3; } 
.join_choice .in .xi { display: block; border: 1px solid #ddd; background: #fff; font-size: 1em; line-height: 3em; width: 3em; height: 3em; border-radius: 50%; margin: 0 auto; margin-bottom: .5em; color: var(--color-point); } 
/* .join_choice .in:nth-child(2) .xi::before { content: "\ea17"; } */
.join_choice .in.on { box-shadow: 0px 0px 10px rgba(17, 17, 17, 0.122); border: 1px solid var(--color-point); } 
.join_choice .label_st .xi:before { font-size: 1.55em; } 
.join_choice .in span { padding-top: 0.4em; } 

.label_st input[type=radio] { width:0; height:0; overflow:hidden; position:absolute; z-index:-1 }