@charset "utf-8";

.board-box > div:first-child { padding:0  0 110px; }

.tabMenu > ul { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; }
.tabMenu > ul > li a { padding:0 25px; height:53px; display:flex; align-items:center; justify-content:center; border-radius:35px; background:#fff; color:#222; font-size:18px; font-weight:400; line-height:1.3; }
.tabMenu > ul > li.on a { background:var(--mainColor); color:#fff }
@media screen and (max-width:1024px){
    .board-box > div:first-child { padding:0  0 100px; }
    .tabMenu > ul { gap:20px; }
    .tabMenu > ul > li { width:calc((100% - 60px) / 4) }
    .tabMenu > ul > li a { padding:0 20px; height:50px; font-size:16px; }
}
@media screen and (max-width:640px){
    .board-box > div:first-child { padding:0  0 80px; }
    .tabMenu > ul { gap:10px; }
    .tabMenu > ul > li { width:calc((100% - 20px) / 3) }
    .tabMenu > ul > li a { padding:0 10px; height:45px; font-size:15px; }
}
@media screen and (max-width:420px){
    .tabMenu > ul > li { width:calc((100% - 10px) / 2) }
}

.boardReg-box .ipbox { background:#fff; border-radius:10px; padding:60px; }
.boardReg-box .ipbox table { width:100%; border-top:1px solid #000; }
.boardReg-box .ipbox tbody th { text-align:left; height:75px; vertical-align:top; padding:27px 0 0 40px; border-bottom:1px solid #ddd; background:#f5f6f7; }
.boardReg-box .ipbox tbody th strong { color:#333; font-size:16px; font-weight:500; line-height:1.3; letter-spacing:-0.02em; }
.boardReg-box .ipbox tbody th strong span { color:#f30c0c; }
.boardReg-box .ipbox tbody td { text-align:left; padding:15px 20px; border:1px solid #ddd; border-width:0 0 1px 1px; }
.boardReg-box .ipbox tbody td input[type="text"],
.boardReg-box .ipbox tbody td input[type="password"] { height:45px; padding:0 20px; font-size:16px; color:#555; font-weight:400; border:none; outline:none; background:#fbfbfb; border-radius:10px; }
.boardReg-box .ipbox tbody td textarea { height:245px; padding:15px 20px; width:100%; font-size:16px; line-height:1.6; color:#555; font-weight:400; border:none; outline:none; background:#fbfbfb; border-radius:10px; }
.boardReg-box .ipbox tbody td select { height:45px; line-height:45px; padding:0 40px 0 20px; font-size:16px; color:#555; font-weight:400; border:1px solid #ddd; outline:none; appearance:none; border-radius:10px; background:#fff url(../img/board/icon_select_down.png) right center no-repeat; }
.boardReg-box .ipbox tbody td select::-ms-expand { display:none; }
.boardReg-box .ipbox tbody td input::placeholder,
.boardReg-box .ipbox tbody td textarea::placeholder { font-size:16px; color:#ccc }
.boardReg-box .ipbox tbody td input.ip01,
.boardReg-box .ipbox tbody td select.sel01 { width:75%; }
.boardReg-box .ipbox tbody td input.ip02 { width:calc(30% - 18px); }
.boardReg-box .ipbox tbody td input.ip03 { width:calc(35% - 18px); }
.boardReg-box .ipbox tbody td select.sel02 { width:calc(35% - 12px); }
.boardReg-box .ipbox tbody td .stxt { width:35px; text-align:center; display:inline-block }
.boardReg-box .ipbox tbody td .sbox { overflow:auto; height:215px; padding:20px; font-size:16px; line-height:1.6; color:#555; font-weight:400; border:none; outline:none; background:#fbfbfb; border-radius:10px; }
.boardReg-box .ipbox .ch-box { margin:30px 0 15px; text-align:right; }
.boardReg-box .ipbox .ch { position:relative; display:inline-block }
.boardReg-box .ipbox .ch input[type="checkbox"],
.boardReg-box .ipbox .ch input[type="radio"]{opacity:0; height:auto; position:absolute; left:7px; top:0; }
.boardReg-box .ipbox .ch input[type="checkbox"] + span,
.boardReg-box .ipbox .ch input[type="radio"] + span { position:relative; padding:0 0 0 35px; font-weight:300; font-size:15px; line-height:1.1 !important; display:inline-block; color:#555; }
.boardReg-box .ipbox .ch input[type="checkbox"] + span:after,
.boardReg-box .ipbox .ch input[type="radio"] + span:after { content:''; display:block; margin:-4px 0 0 0; width:25px; height:25px; vertical-align:middle; background:none; border-radius:5px; border:1px solid #ddd; position:absolute; left:0; top:-2px; }
.boardReg-box .ipbox .ch input[type="checkbox"]:checked + span:after,
.boardReg-box .ipbox .ch input[type="radio"]:checked + span:after { background:url(../img/common/icon_ch_on1.png) no-repeat center center; }
.boardReg-box .ipbox .btn { margin-top:60px; text-align:center; display:flex; justify-content:center; align-items:center; gap:0 10px; }
.boardReg-box .ipbox .btn a { transition:all 0.5s; width:315px; height:70px; border:none; display:flex; justify-content:center; align-items:center; border-radius:10px; background:#eee; }
.boardReg-box .ipbox .btn a span { font-weight:700; color:#aaa; line-height:1.3; font-size:20px; letter-spacing:-0.02em; }
.boardReg-box .ipbox .btn button { transition:all 0.5s; width:315px; height:70px; border:none; display:flex; justify-content:center; align-items:center; border-radius:10px; background:var(--mainColor); }
.boardReg-box .ipbox .btn button span { font-weight:700; color:#fff; line-height:1.3; font-size:20px; letter-spacing:-0.02em; }
@media screen and (max-width:1500px){
    .boardReg-box .ipbox table col.w1 { width:280px !important; }
}
@media screen and (max-width:1024px){
    .boardReg-box .ipbox { padding:50px; }
    .boardReg-box .ipbox table col.w1 { width:200px !important; }
    .boardReg-box .ipbox tbody th { padding:27px 0 0 20px; }
    .boardReg-box .ipbox tbody td input.ip01,
    .boardReg-box .ipbox tbody td select.sel01 { width:100%; }
    .boardReg-box .ipbox tbody td textarea,
    .boardReg-box .ipbox tbody td .sbox { height:200px; }
    .boardReg-box .ipbox .btn { margin-top:40px;}
    .boardReg-box .ipbox .btn a,
    .boardReg-box .ipbox .btn button { width:300px; height:60px; }
    .boardReg-box .ipbox .btn a span,
    .boardReg-box .ipbox .btn button span { font-size:18px; }
}
@media screen and (max-width:960px){
    .boardReg-box .ipbox { padding:40px; }
    .boardReg-box .ipbox tbody td .stxt { width:30px; }
    .boardReg-box .ipbox tbody td input.ip02 { width:calc(48% - 20px); }
    .boardReg-box .ipbox tbody td input.ip03 { width:calc(52% - 20px); }
    .boardReg-box .ipbox tbody td select.sel02 { width:100%; margin-top:10px; }
}
@media screen and (max-width:640px){
    .boardReg-box .ipbox { padding:20px; }
    .boardReg-box .ipbox table col.w1 { width:auto !important; }
    .boardReg-box .ipbox tbody tr { display:flex; flex-direction:column;}
    .boardReg-box .ipbox tbody th { padding:15px 20px; height:auto; width:100%; border-bottom:1px solid #eee }
    .boardReg-box .ipbox tbody td { width:100%; border-left:none; padding:10px 0 20px; }
    .boardReg-box .ipbox tbody td input.ip01,
    .boardReg-box .ipbox tbody td select.sel01 { width:100%; }
    .boardReg-box .ipbox tbody td textarea,
    .boardReg-box .ipbox tbody td .sbox { height:160px; }
    .boardReg-box .ipbox .btn { margin-top:20px;}
    .boardReg-box .ipbox .btn a,
    .boardReg-box .ipbox .btn button { width:calc(50% - 5px); height:55px; }
    .boardReg-box .ipbox .btn a span,
    .boardReg-box .ipbox .btn button span { font-size:16px; }
}

/* animation */
.boardReg-box { opacity:0; }
.boardReg-box.subOn { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.board-box .privacy-box .box { background:#fff; border-radius:10px; padding:60px; min-height:500px; }
@media screen and (max-width:1024px){
    .board-box .privacy-box .box { padding:50px; }
}
@media screen and (max-width:640px){
    .board-box .privacy-box .box { padding:20px; }
}

/* animation */
.board-box .privacy-box { opacity:0; }
.board-box .privacy-box.subOn { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.board-box .board-search .box { position:relative; display:flex; justify-content:flex-end; gap:0 10px; }
.board-box .board-search select { width:200px; padding:0 20px; outline:none; line-height:45px; height:45px; font-size:16px; font-weight:400; color:#555; border:1px solid #ddd; border-radius:10px; appearance:none; background:#fff url(../img/board/icon_select_down.png) right center no-repeat; }
.board-box .board-search select::-ms-expand { display:none; }
.board-box .board-search input[type="text"] { width:500px; padding:0 20px; line-height:45px; height:45px; border:1px solid #ddd; outline:none; font-size:16px; font-weight:400; color:#555; background-color:#fff; border-radius:10px; }
.board-box .board-search input[type="submit"] { position:relative; width:100%; line-height:45px; height:45px; color:#fff; font-size:16px; font-weight:500; outline:none; border:none; background:var(--mainColor);  border-radius:10px; }
.board-box .board-search .btn-search { position:relative; width:200px; }
.board-box .board-search input::placeholder { font-size:16px; color:#ccc }
.board-box .board-list .listbox { margin-top:40px; }
.board-box .board-list .listbox table { width:100%; border-top:1px solid var(--mainColor); }
.board-box .board-list .listbox table thead th { height:75px; background:#f2f6fa; border-bottom:1px solid #ddd; font-weight:400; color:#222; line-height:1.3; font-size:17px;  }
.board-box .board-list .listbox table tbody td { text-align:center; padding:25px 10px; background:#fff; border-bottom:1px solid #ddd; font-weight:400; color:#555; line-height:1.3; font-size:17px;  }
.board-box .board-list .listbox table tbody td.td-left { text-align:left; padding-left:80px; }
.board-box .board-list .listbox table tbody td a { color:#555; }
.board-box .board-list .listbox table tbody tr.notice td { background:#f2f6fa; }
.board-box .page { margin:50px auto 0 auto; text-align:center; }
.board-box .page a { position:relative; display:flex; align-items:center; justify-content:center; font-size:16px; height:40px; font-weight:400; color:#8c8c8c; padding:0 10px; min-width:40px; background:#fff; }
.board-box .page ul { display:inline-block; }
.board-box .page li { display:inline-block; vertical-align:middle; margin:0 1px;  }
.board-box .page li.on a { color:#fff; background:var(--mainColor); }
.board-box .page .btn_pn { display:inline-block; vertical-align:middle; overflow:hidden; text-indent:-9999em; }
.board-box .page .btn_prev { background:#fff url(../img/board/btn_b_prev.png) center center no-repeat; }
.board-box .page .btn_next { background:#fff url(../img/board/btn_b_next.png) center center no-repeat; }
@media screen and (max-width:1500px){
    .board-box .board-list table col.w1 { width:90px !important; }
    .board-box .board-list table col.w2 { width:180px !important; }
    .board-box .board-list table col.w3 { width:100px !important; }
    .board-box .board-list .listbox table tbody td.td-left { padding-left:60px; }
}
@media screen and (max-width:1024px){
    .board-box .board-search select { width:150px; }
    .board-box .board-search input[type="text"] { width:calc(100% - 150px - 160px - 20px); }
    .board-box .board-search .btn-search { width:160px; }
    .board-box .board-list table col.w1 { width:80px !important; }
    .board-box .board-list table col.w2 { width:140px !important; }
    .board-box .board-list table col.w3 { width:80px !important; }
    .board-box .board-list .listbox table thead th { height:60px; font-size:16px; }
    .board-box .board-list .listbox table tbody td { padding:20px 5px; font-size:16px; }
    .board-box .board-list .listbox table tbody td.td-left { padding-left:40px; }
}
@media screen and (max-width:640px){
    .board-box .board-search .box { gap:0 5px; }
    .board-box .board-search select { width:120px; }
    .board-box .board-search input[type="text"] { width:calc(100% - 120px - 120px - 5px); }
    .board-box .board-search .btn-search { width:120px; }
    .board-box .board-list table col.w1 { width:70px !important; }
    .board-box .board-list table col.w2 { width:100px !important; }
    .board-box .board-list table col.w3 { width:70px !important; }
    .board-box .board-list .listbox table tbody td.td-left { padding-left:0; }
    .board-box .page { margin:30px auto 0 auto; }
    .board-box .page a { height:36px; min-width:36px; }
}
@media screen and (max-width:480px){
    .board-box .board-search .box { flex-wrap:wrap; }
    .board-box .board-search select { width:150px; }
    .board-box .board-search input[type="text"] { width:calc(100% - 150px - 5px); }
    .board-box .board-search .btn-search { width:100%; margin-top:5px; }
}



/* animation */
.board-list { opacity:0; }
.board-list.subOn { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.board-view .viewbox .viewTop { padding:40px; border-top:1px solid var(--mainColor); background:#f2f6fa; display:flex; flex-wrap:wrap; align-items:center;}
.board-view .viewbox .viewTop .title { font-size:22px; line-height:1.6; font-weight:500; color:#222; width:calc(100% - 150px); padding-right:30px; }
.board-view .viewbox .viewTop .stxt { font-size:17px; font-weight:400; color:#555; width:150px; text-align:right; display:flex; gap:20px; }
.board-view .viewbox .viewTop .w { position:relative; }
.board-view .viewbox .viewTop .w:before { content:""; display:block; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:1px; height:10px; background:#555; }
.board-view .viewbox .viewCont { border-top:1px solid #ddd; border-bottom:1px solid var(--mainColor); background:#fff; }
.board-view .viewbox .viewCont .contBox { padding:40px; min-height:500px; color:#666; line-height:1.6; font-size:16px; }
.board-view .viewbox .viewCont .contBox img { max-width:100%; }
.board-view .viewbox .btnBox { margin:50px 0 0 0; }
.board-view .viewbox .btnBox .btn_left { float:left; }
.board-view .viewbox .btnBox .btn_right { float:right; }
.board-view .viewbox .btnBox a { transition:all 0.5s; width:315px; height:70px; margin:0 auto; border:none; display:flex; justify-content:center; align-items:center; border-radius:10px; background:var(--mainColor); }
.board-view .viewbox .btnBox a span { font-weight:700; color:#fff; line-height:1.3; font-size:20px; letter-spacing:-0.02em; }
.board-view .viewbox .btnBox .btn_center { text-align:center; }
.board-view .viewbox .btn_prevnext li { border-bottom:1px solid #ddd; position:relative; color:#888; font-size:16px; letter-spacing:-0.02em; display:flex; align-items:center; background:#fff }
.board-view .viewbox .btn_prevnext li strong { width:370px; height:75px; padding-left:40px; color:#333; display:flex; align-items:center; background:#f2f6fa; }
.board-view .viewbox .btn_prevnext li span { width:calc(100% - 370px); padding:0 20px; display:flex; align-items:center; color:#888; }
.board-view .viewbox .btn_prevnext li a { color:#888; font-size:15px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media screen and (max-width:1500px){
    .board-view .viewbox .btn_prevnext li strong { width:300px; height:70px; }
    .board-view .viewbox .btn_prevnext li span { width:calc(100% - 300px); }
}
@media screen and (max-width:1280px){
    .board-view .viewbox .viewTop .title { font-size:20px; width:calc(100% - 140px); }
    .board-view .viewbox .viewTop .stxt { font-size:16px; width:140px; }
    .board-view .viewbox .btn_prevnext li strong { width:200px; height:65px; }
    .board-view .viewbox .btn_prevnext li span { width:calc(100% - 200px); }
}
@media screen and (max-width:1024px){
    .board-view .viewbox .viewTop { padding:30px; }
    .board-view .viewbox .viewTop .title { font-size:18px; }
    .board-view .viewbox .viewTop .stxt { font-size:16px; }
	.board-view .viewbox .viewCont .contBox { min-height:300px; }
    .board-view .viewbox .btn_prevnext li strong { width:150px; height:60px; }
    .board-view .viewbox .btn_prevnext li span { width:calc(100% - 150px); }
    .board-view .viewbox .btnBox { margin-top:40px;}
    .board-view .viewbox .btnBox a { width:300px; height:60px; }
    .board-view .viewbox .btnBox a span  { font-size:18px; }
}
@media screen and (max-width:960px){
    .board-view .viewbox .viewTop .title { width:100%; padding:0; text-align:center; }
    .board-view .viewbox .viewTop .stxt { width:100%; margin-top:20px; text-align:right; justify-content:flex-end }
}
@media screen and (max-width:640px){
    .board-view .viewbox .viewTop { padding:20px 10px; }
    .board-view .viewbox .viewTop .title { font-size:16px; }
    .board-view .viewbox .viewTop .stxt { font-size:15px; }
	.board-view .viewbox .viewCont .contBox { padding:30px; }
    .board-view .viewbox .btn_prevnext li strong { width:90px; padding-left:15px; }
    .board-view .viewbox .btn_prevnext li span { width:calc(100% - 90px); }
}
@media screen and (max-width:480px){
    .board-view .viewbox .btnBox { margin-top:20px;}
    .board-view .viewbox .btnBox a { width:100%; height:55px; }
    .board-view .viewbox .btnBox a span { font-size:16px; }
}

/* animation */
.board-view { opacity:0; }
.board-view.subOn { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }