@charset "utf-8"; 
/*
    GGAC SUB UI STYLE
    WRITER :Lee Jeonghee
	Last Modify Date :2025. 07. 14.
*/

@import url("/resource/css/jquery-ui.min.css"); 

/* notice */
.viewblock { font-size:14px; line-height:1.7}
.viewblock .viewblock2 { line-height:2.0em; position:relative; display:block; margin:15px auto 0; padding:50px 14px 15px; border:5px solid #c7b299; width:97%; background:url(/ggac/images/sub/bg_vb_header.gif) no-repeat 50% 0; }
.viewblock .board_view { margin-top:10px; border-collapse:collapse; }
.viewblock .viewblock2 h3, 
.viewblock .viewblock2 .vb_title { text-align:center; font-size:12px; height:auto !important; margin-bottom:15px !important; padding-bottom:15px; border-bottom:1px solid #ccc2ba; }
.viewblock .viewblock2 h3 span { margin-top:15px; display:block; margin-bottom:0; height:auto !important; }
.viewblock .viewblock2 th { border:1px solid #E9E9E9; padding:8px 0 6px; text-align:center; vertical-align:middle; font-weight:bold; font-size:12px; color:#7B7B66; }
.viewblock .viewblock2 td { border:1px solid #E9E9E9; padding:6px 0 4px 5px; vertical-align:middle; }
.viewblock .viewblock2 td.txtcenter { padding:6px 0 4px; text-align:center; line-height:1.6em; }
.viewblock .viewblock2 .etc_info { margin:10px 0; }
.viewblock .viewblock2 .etc_info p { margin-bottom:20px !important; line-height:18px; }
.viewblock .viewblock2 .title_color { color:#a67b50; }
.viewblock .viewblock2 .txttabletit { padding:10px 0 0 0; }
.viewblock .viewblock2 .etc_info .txt1 { padding:5px 0 5px 10px}
.viewblock .viewblock2 .etc_info .txt2 { padding:5px 0 5px 15px}
.viewblock .viewblock2 .etc_info .txt3 { padding:5px 0 5px 20px}
.viewblock .viewblock2  h4 { color:#a67b50; font-size:14px; font-weight:bold; padding:15px 0 10px 0; }
.viewblock .viewblock2  h5 { color:#787878; font-size:13px; font-weight:normal; padding:0 0 0 15px; list-style:none; background:none; margin:0; }
.viewblock .viewblock2 li { padding:3px 0 3px 15px; font-size:12px; color:#8a8a8a; font-weight:normal; line-height:1.6em; letter-spacing:-1px; }
.viewblock .btn a { padding:5px; background:#f66f06; color:#fff; text-align:center; width:100%; }
.viewblock .viewblock3 { line-height:2.0em; position:relative; display:block; margin:15px auto 0; padding:50px 14px 15px; border:5px solid #c7b299; width:97%; background:url(/ggac/images/sub/bg_vb_header.gif) no-repeat 50% 0; }
.viewblock .board_view { margin-top:10px; border-collapse:collapse; }
.viewblock .viewblock3 h3, 
.viewblock .viewblock3 .vb_title { text-align:center; font-size:12px; height:auto !important; margin-bottom:15px !important; padding-bottom:15px; border-bottom:1px solid #ccc2ba; }
.viewblock .viewblock3 h3 span { margin-top:15px; display:block; margin-bottom:0; height:auto !important; } 
.viewblock .viewblock3 th { border:1px solid #E9E9E9; padding:8px 0 6px; text-align:center; vertical-align:middle; font-weight:bold; font-size:12px; color:#7B7B66; } 
.viewblock .viewblock3 td { border:1px solid #E9E9E9; padding:6px 0 4px 5px; vertical-align:middle; } 
.viewblock .viewblock3 td.txtcenter { padding:6px 0 4px; text-align:center; line-height:1.6em; } 
.viewblock .viewblock3 .etc_info { margin:10px 0; } 
.viewblock .viewblock3 .etc_info p { margin-bottom:20px !important; line-height:18px; } 
.viewblock .viewblock3 .title_color { color:#a67b50; } 
.viewblock .viewblock3 .txttabletit { padding:10px 0 0 0; } 
.viewblock .viewblock3 .etc_info .txt1 { padding:5px 0 5px 10px} 
.viewblock .viewblock3 .etc_info .txt2 { padding:5px 0 5px 15px} 
.viewblock .viewblock3 .etc_info .txt3 { padding:5px 0 5px 20px} 
.viewblock .viewblock3  h4 { color:#a67b50; font-size:12px; font-weight:bold; padding:15px 0 10px 0; } 
.viewblock .viewblock3 li { padding:3px 0 3px 15px; font-size:16px; color:#8a8a8a; font-weight:normal; line-height:1.6em; letter-spacing:-1px; } .viewblock 
.btn a { padding:5px; background:#f66f06; color:#fff; text-align:center; width:100%; }
.viewblock4 .notice_con table { width:100%}
.viewblock4 .notice_con table th { font-size:16px; background:#ccc}
.viewblock4 .notice_con table th, 
.viewblock4 .notice_con table td { text-align:center; padding:10px 15px; border:1px solid #000}
/* viewblock 2020 */
.boardView { clear:both; width:100%; color:#666; border-top:5px solid #000; border-bottom:1px solid #d8d8d8; line-height:normal; font-size:13px; margin-bottom:10px; }
.boardView>h3.boardTit { margin:0; padding:14px 0 14px 20px; color:#333; font-size:14px; font-weight:600; background:#f2f2f2; }
.boardView .boardInfo { display:table; table-layout:fixed; width:100%; }
.boardView .boardInfo li { display:table-cell; }
.boardView .boardInfo li span { display:inline-block; white-space:nowrap; padding:14px 0 14px 20px; }
.boardView .boardInfo li span.tit { padding-right:10px; font-weight:600; background:url('../img/board/view_bar.gif') no-repeat right; }
.boardView .viewBlock { padding:14px; }
.viewblock4 { position:relative; padding:6.739% 3% 2%; background:url(/ggac/images/sub/bg_board2020.gif) left top no-repeat; color:#292929; border:1px solid #eae9e3; word-break:keep-all; text-align:left; }
.viewblock4 h5 { clear:none; margin:15px 0; padding:0; background:none; color:#161616; font-size:16px; font-weight:600; }
.viewblock4.bigTit h5 { font-size:18px; }
.viewblock4 .notice_number { position:absolute; right:3%; top:0; line-height:20px; margin-top:8%; padding:6px 20px; background:#797979; border-radius:18px; color:#fff; font-size:13px; }
.viewblock4 .notice_title { margin:84px 0 30px; text-align:left; color:#252525; font-size:32px; font-weight:bold; }
.viewblock4 h3 { margin:0 0 50px; background:none; color:#252525; font-size:32px; font-weight:bold; }
.viewblock4 .notice_txt { color:#252525; font-size:18px; }
.viewblock4 .notice_txt strong { font-size:18px; }
.viewblock4 .notice_date { position:relative; margin:24px 0; text-align:right; }
.viewblock4 .notice_date:before { content:''; position:absolute; left:0; top:50%; width:100%; height:1px; background:#7e7e7e; }
.viewblock4 .notice_date span { position:relative; display:inline-block; padding-left:30px; background:#fff; color:#292929; font-size:13px; }
.viewblock4 .notice_list { position:relative; }
.viewblock4 .notice_list.topBorder { padding-top:20px; border-top:1px solid #7e7e7e; }
.viewblock4 .notice_list .frImg { float:right; width:40%; margin:5px; border:4px solid #ddd; box-sizing:border-box; }
.viewblock4 .notice_list li,
.viewblock4 .notice_list p,
.viewblock4 .notice_list strong,
.viewblock4 .notice_list span { font-size:16px; }
.viewblock4 .notice_list p.txt { padding-left:2em; font-size:16px; }
.viewblock4 .notice_list td>ul,
.viewblock4 .notice_list td>ol,
.viewblock4 .notice_list td>dl { padding-left:1em; text-align:left; }
.viewblock4 .notice_list>ul>li,
.viewblock4 .notice_list td>dl dt { line-height:1.5; margin:15px 0; padding:0 0 0 1.5em; background:url(/ggac/images/sub/bu_board2020.png) left .2em no-repeat; color:#292929; }
.viewblock4 .notice_list>ol>li { line-height:1.5; margin:15px 0; padding-left:1.5em; color:#292929; }
.viewblock4 .notice_list>ul>li ul,
.viewblock4 .notice_list>ul>li ol,
.viewblock4 .notice_list>ol>li ol,
.viewblock4 .notice_list>ol>li ul { margin:5px 0; }
.viewblock4 .notice_list>ul>li>ul>li,
.viewblock4 .notice_list>ol>li>ul>li,
.viewblock4 .notice_list>ol>li ol>li,
.viewblock4 .notice_list>ol>li ul>li,
.viewblock4 .notice_list td>ul>li,
.viewblock4 .notice_list td>dl { line-height:1.5; padding-left:.6em; font-size:15px; }
.viewblock4 .notice_list>ol>li ol>li { margin:4px 0; }
.viewblock4 .notice_list td>dl dt { margin-bottom:0; padding-left:1.25em; font-size:1em; }
.viewblock4 .notice_list td>dl dd { padding-left:1.5em; }
.viewblock4 .notice_list td>ol>li { line-height:1.5; padding-left:1em; text-indent:-.8em; }
.viewblock4 .notice_list li li { margin-left:.5em; }
.viewblock4 .notice_list ul.txtList>li { margin:5px 0; padding-left:2em; background:none; }
.viewblock4 .notice_list td>ul>li.point,
.viewblock4 .notice_list td>ol>li.point { padding-left:1.4em; text-indent:-.7em; }
.viewblock4 .notice_list td>dl dd ul>li:before,
.viewblock4 .notice_list td>ul ul>li:before,
.viewblock4 .notice_list>ul>li>ul>li:before,
.viewblock4 .notice_list>ol>li>ul>li:before,
.viewblock4 .notice_list td>ul>li:before,
.viewblock4 .notice_list p.txt:before,
.viewblock4 .notice_list ul.txtList>li:before { display:inline-block; content:'-'; text-indent:-.8em; }
.viewblock4 .notice_list ul.roundBu2>li { padding-left:1.25em; background:none; }
.viewblock4 .notice_list ul.roundBu2>li:before { display:inline-block; content:'○ '; text-indent:-1.25em; }
.viewblock4 .notice_list ul.roundBu3>li { padding-left:.25em; font-size:15px; }
.viewblock4 .notice_list ul.roundBu3>li:before { display:inline-block; content:'· '; text-indent:-.5em; }
.viewblock4 .notice_list td ul.roundBu>li:before { content:'○ '; }
.viewblock4 .notice_list td ul.roundBu>li.point:before { content:'※ '; }
.viewblock4 .notice_list td ul.spotBu>li { position:relative; }
.viewblock4 .notice_list td ul.spotBu>li:before { content:''; position:absolute; left:0; top:.75em; width:2px; height:2px; background-color:currentColor; border-radius:50%; }
.viewblock4 .notice_list td ul.spotBu>li.point { padding-left:1em; }
.viewblock4 .notice_list td ul.spotBu>li.point:before { display:inline-block; content:'※ '; position:static; width:auto; height:auto; background:none; border-radius:0; }
.viewblock4 .notice_list td ul.roundBu>li p,
.viewblock4 .notice_list td ul.roundBu>li ul,
.viewblock4 .notice_list td ul.roundBu>li ol li { margin-left:.5em; padding:0; }
.viewblock4 .notice_list ul.point>li,
.viewblock4 .notice_list ol>li.point,
.viewblock4 .notice_list ul>li.point{ position:relative; }
.viewblock4 .notice_list ol>li.point { background:none; }
.viewblock4 .notice_list ul>li.point:before,
.viewblock4 .notice_list ol>li.point:before,
.viewblock4 .notice_list ul.point>li:before,
.viewblock4 .notice_list p.point:before { display:inline-block; content:'※'; margin-right:5px; }
.viewblock4 .notice_list ul.postList { font-size:0; }
.viewblock4 .notice_list ul.postList li { display:inline-block; width:33.33333%; margin-top:0; padding:0 5px; background:#fff; box-sizing:border-box; vertical-align:top; }
.viewblock4 .notice_list ul.postList li a { display:block; padding-bottom:20px; border:1px solid #ccc; font-size:16px; }
.viewblock4 .notice_list ul.postList li a span { display:block; }
.viewblock4 .notice_list ul.postList li a span.img { padding-bottom:15px; text-align:center; }
.viewblock4 .notice_list ul.postList li a span.tit,
.viewblock4 .notice_list ul.postList li a span.date { padding:0 10px; }
.viewblock4 .notice_list ol.boxPoint { position:relative; padding:0 0 0 1.25em; }
.viewblock4 .notice_list ol.boxPoint:before { content:'※'; position:absolute; left:0; top:0; }
.viewblock4 .notice_list ol.boxPoint li { margin:0; padding:0; }
.b_view .con_in .notice_con p { padding-left:15px; margin:15px 0 10px}
.b_view .con_in .notice_con table { width:100%}
.b_view .con_in .notice_con table th,
.b_view .con_in .notice_con table td { text-align:center; padding:10px 15px; border:1px solid #000}
.b_view .con_in .notice_con div+div { margin-top:35px}
.b_view .con_in .notice_con table th { font-size:16px; background:#ccc}
.viewblock4 .board_view { width:100%; border-top:2px solid #000; }
.viewblock4 .board_view caption { position:relative; }
.viewblock4 .viewCaption { border:none; }
.viewblock4 .viewCaption caption { width:auto; height:auto; margin:0; padding:.25em; border-left:1px solid #e9e9e9; border-right:1px solid #e9e9e9; border-top:2px solid #000; line-height:1.4; text-align:center; font-size:1.125em; text-indent:0; }
.viewblock4 .board_view th,
.viewblock4 .board_view td { padding:10px 5px; background:#fff; border:1px solid #e9e9e9; box-sizing:border-box; color:#535353; font-size:14px; vertical-align:middle; }
.viewblock4 .board_view th { text-align:center; font-weight:bold; word-break:break-all; }
.viewblock4 .board_view td { text-align:center; }
.viewblock4 .board_view.tdLeft td { padding:10px; text-align:left; }
.viewblock4 .board_view.tdLeft td ul { padding-left:0; }
.viewblock4 .notice_list ol.buCounter { counter-reset:section; list-style-type:none; }
.viewblock4 .notice_list ol.buCounter>li { position:relative; padding-left:1.733em; }
.viewblock4 .notice_list ol.buCounter>li::before { counter-increment:section; content:counter(section)") "; display:inline-block; position:absolute; top:0; left:0; min-width:1.400em; text-align:right; }
.viewblock4 .sortList { display:flex; justify-content:space-between; }
.viewblock4 .sortList .item { position:relative; flex-grow:0; flex-shrink:0; width:calc(25% - 2em); }
.viewblock4 .sortList.col5 .item { width:calc(20% - 2em); }
.viewblock4 .sortList .item::before { content:"▶"; position:absolute; left:0; top:50%; margin-left:-2em; }
.viewblock4 .sortList .item:first-child::before { display:none; }
.viewblock4 .sortList dl { position:relative; height:100%; border:1px solid #e9e9e9; box-sizing:border-box; }
.viewblock4 .sortList dl dt { padding:.5em; background:#e9e9e9; text-align:center; font-weight:bold; }
.viewblock4 .sortList dl dd { padding:.5em .5em 2.5em; }
.viewblock4 .sortList.col5 dl dd { padding-bottom:.5em; }
.viewblock4 .sortList dl dd p { text-align:center; }
.viewblock4 .sortList dl dd p.btm { position:absolute; left:0; bottom:0; width:100%; height:auto; border-top:1px solid #e9e9e9; text-align:center; }
.viewblock4 .boxTxt { padding:3%; border:1px solid #e9e9e9; border-top:2px solid #000; }
.viewblock4 .boxTxt h6 { margin-bottom:10px; font-size:17px; font-weight:bold; }
.viewblock4 .boxTxt ol { counter-reset:section; }
.viewblock4 .boxTxt ol li { padding-left:1.2em; text-indent:-1.2em; }
.viewblock4 .boxTxt>ol>li:before { counter-increment:section; content:counter(section)'. '; }
.viewblock4 .lkArea { margin-top:20px; }
.viewblock4 .lkArea a { display:block; line-height:32px; background:#797979; border-radius:20px; text-align:center; color:#fff; font-size:18px; }
.viewblock4 .boxTxt ul li:before { content:'- '; }
.viewblock .viewblock4 .boxTxt .beforeNone { margin-left:-1.2em; padding:0; }
.viewblock .viewblock4 .boxTxt .beforeNone li::before { display:none; }
.viewblock .viewblock4 .boxTxt .beforeNone>li { margin:0; padding:0; text-indent:0; }
.viewblock .viewblock4 .boxTxt .beforeNone>li li { margin-left:1.2em; }
/* scrollTable Style - 211029 */
.scroltable-wrapper { position:relative; }
.scroltable-container { overflow:auto; }
.scroltable-nav { display:none; position:absolute; width:60px; height:100%; cursor:pointer; z-index:2; }
.scroltable-nav.scroltable-nav-left { left:0; background:url(/ggac/images/sub/arrow-left.png) no-repeat 10px center, -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); background:url(/ggac/images/sub/arrow-left.png) no-repeat 10px center, -moz-linear-gradient(to left, rgba(255, 255, 255, 0), #fff); background:url(/ggac/images/sub/arrow-left.png) no-repeat 10px center, -ms-linear-gradient(to left, rgba(255, 255, 255, 0), #fff); background:url(/ggac/images/sub/arrow-left.png) no-repeat 10px center, -o-linear-gradient(to left, rgba(255, 255, 255, 0), #fff); background:url(/ggac/images/sub/arrow-left.png) no-repeat 10px center, linear-gradient(to left, rgba(255, 255, 255, 0), #fff)}
.scroltable-nav.scroltable-nav-right { right:0; background:url(/ggac/images/sub/arrow-right.png) no-repeat right 10px center, -webkit-linear-gradient(0, rgba(255, 255, 255, 0), #fff); background:url(/ggac/images/sub/arrow-right.png) no-repeat right 10px center, -moz-linear-gradient(to right, rgba(255, 255, 255, 0), #fff); background:url(/ggac/images/sub/arrow-right.png) no-repeat right 10px center, -ms-linear-gradient(to right, rgba(255, 255, 255, 0), #fff); background:url(/ggac/images/sub/arrow-right.png) no-repeat right 10px center, -o-linear-gradient(to right, rgba(255, 255, 255, 0), #fff); background:url(/ggac/images/sub/arrow-right.png) no-repeat right 10px center, linear-gradient(to right, rgba(255, 255, 255, 0), #fff)}
.scroltable-container .rollTable { min-width:800px; table-layout:fixed; }
.scroltable-wrapper .tableDrag { display:none; border-top:1px solid #9f9f9f; font-size:14px; color:#535353; text-align:center; }
.scroltable-wrapper .tableDrag span { display:inline-block; position:relative; padding:10px 0 10px 70px; }
.scroltable-wrapper .tableDrag span:after { content:''; position:absolute; left:0; top:0; width:70px; height:100%; background:url(/ggac/images/sub/icon_table_drag.png) left center no-repeat; background-size:60px auto; animation:dragPosition 2s 1s infinite; }
/* view button */
.button1 a { display:inline-block; min-width:20rem; padding:1.2rem 3rem; font-size:1.7rem; font-weight:500; color:var(--color4); background:#fff; border:1px solid var(--color5); box-sizing:border-box; text-align:center; transition:.2s; }
.button1 a:focus,
.button1 a:hover { background:var(--color4); border-color:var(--color4); color:#fff; }
@keyframes dragPosition { 
    0%  { background-position:0 center; }
    50% { background-position:100% center; }
    100% { background-position:0 center; }
}
@media all and (max-width:1100px) { 
	.viewblock img { height:auto !important; }
}
@media all and (max-width:768px) { 
	.viewblock .viewblock2 { width:auto !important; }
    .boardView .boardInfo { display:block; font-size:0; }
    .boardView .boardInfo li { display:inline-block; width:50%; padding:4px; box-sizing:border-box; font-size:12px; vertical-align:top; }
    .b_view>colgroup { display:none; }
    .b_view td.subject,
    .b_view .con_in { display:block; width:100%; }
	.b_view tbody { display:block; width:100%; }
    .b_view tr { display:block; overflow:hidden; width:100%; text-align:left; margin:auto; padding:auto; }
    .b_view tr.boardInfo th,
    .b_view tr.boardInfo td { display:block; width:auto; height:50px; padding:auto; box-sizing:border-box; white-space:nowrap; }
    .b_view tr.boardInfo th { clear:left; float:left; width:30% !important; }
    .b_view tr.boardInfo td { width:70%; margin-left:30%; }
    .viewblock4 { padding-bottom:3%; background-size:14%; text-align:left; }
    .viewblock4 .notice_number { position:static; display:inline-block; float:right; padding:3px 10px; border-radius:10px; font-size:12px; }
    .viewblock4 h3,
    .viewblock4 .notice_title { clear:both; height:auto; margin:40px 0 20px; font-size:18px; }
    .viewblock4 .notice_list .frImg { float:none; width:90%; margin:5px auto; }
    .viewblock4 h5,
    .viewblock4 .notice_txt,
    .viewblock4 .notice_txt strong { font-size:14px; }
    .viewblock4 .notice_date { margin:10px; }
    .viewblock4 .notice_list li,
    .viewblock4 .notice_list p { font-size:13px; }
    .viewblock4 .notice_list>ul>li,
    .viewblock4 .notice_list>ol>li { margin:8px 0; }
    .viewblock4 .notice_list>ul>li>ul>li,
    .viewblock4 .notice_list>ol>li>ul>li,
    .viewblock4 .notice_list>ol>li ol>li,
    .viewblock4 .notice_list td>ul>li,
	.viewblock4 .notice_list ul.roundBu3>li { font-size:13px; }
    .viewblock4 td { word-break:break-all; }
    .scroltable-wrapper .tableDrag { display:block; }
}
@media only screen and (max-width:640px) { 
    .viewblock4 .sortList { flex-wrap:wrap; }
    .viewblock4 .sortList .item,
    .viewblock4 .sortList.col5 .item { width:calc(50% - 2em); margin-bottom:.5em; padding-left:1em; }
    .viewblock4 .sortList .item::before,
    .viewblock4 .sortList.col5 .item::before { margin-left:-1em; }
}
@media all and (max-width:480px) { 
    .boardView .boardInfo li { display:block; width:100%; padding:4px; }
    .viewblock4 .sortList { flex-wrap:wrap; }
    .viewblock4 .sortList .item,
    .viewblock4 .sortList.col5 .item { width:100%; margin-bottom:2em; padding-left:0; }
    .viewblock4 .sortList .item::before,
    .viewblock4 .sortList.col5 .item::before { content:"▼"; left:50%; top:0; margin-top:-2em; margin-left:0; }
}

/* datepicker */
.ui-datepicker {display: none;width: 320px;padding: 10px 0;z-index:10 !important;}
.ui-widget.ui-widget-content {overflow: hidden;border: none;background: #fff;box-shadow: 0 0 12px rgba(0, 0, 0, .3);border-radius: 0;}
.ui-datepicker .ui-widget-header {position: relative;padding: 14px 0;border: none;background: #fff;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {font-family: 'Pretendard';width: 80px;height: 32px;margin: 0 4px;padding: 0 10px;border: 1px solid var(--color5);font-weight: 500;box-sizing: border-box; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='9px'%3E%3Cpath fill-rule='evenodd' fill='rgb(35, 35, 35)' d='M13.494,2.313 L7.118,8.689 L7.048,8.620 L6.979,8.689 L0.602,2.313 L2.016,0.899 L7.048,5.931 L12.080,0.899 L13.494,2.313 Z'/%3E%3C/svg%3E") no-repeat right 10px center / 10px; }
.ui-datepicker select.ui-datepicker-month { margin-left:8px; }
.ui-datepicker .ui-datepicker-title {margin: 0;font-size: 15px;font-weight: 500;color: var(--color4);line-height:1;}
.ui-datepicker-title .ui-datepicker-year option, 
.ui-datepicker-title .ui-datepicker-month option { background: #fff; color: #333; }
.ui-datepicker .ui-datepicker-calendar {width: 300px;margin: 0 auto;font-size: 15px;}
.ui-datepicker-calendar thead tr {top: -24px;left: 5px;right: 5px;}
.ui-datepicker-calendar thead th {padding: 0;line-height: 34px;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {position: absolute;top: 14px;width: 3.2rem;height: 3.2rem;text-indent: -9999px;cursor: pointer}
.ui-datepicker .ui-datepicker-prev {left: 10px;}
.ui-datepicker .ui-datepicker-prev .ui-icon {transform: rotate(90deg);}
.ui-datepicker .ui-datepicker-next {right: 10px;}
.ui-datepicker .ui-datepicker-next .ui-icon {transform: rotate(-90deg);}
.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {display: block;position: relative;top: 0;left: 0;width: 100%;height: 100%;margin: 0;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='9px'%3E%3Cpath fill-rule='evenodd' fill='rgb(35, 35, 35)' d='M13.494,2.313 L7.118,8.689 L7.048,8.620 L6.979,8.689 L0.602,2.313 L2.016,0.899 L7.048,5.931 L12.080,0.899 L13.494,2.313 Z'/%3E%3C/svg%3E") no-repeat center / 12px;}
.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover { background:none; border:none; }
.ui-datepicker .ui-state-default {display: block;border: none;width: 34px;line-height: 34px;padding: 0;margin: 0 auto;text-align: center;background: #fff;color: var(--color4);}
.ui-datepicker-today .ui-state-default {font-weight:700;text-decoration: underline;}
.ui-datepicker-current-day .ui-state-default { background:var(--color1); color:#fff; font-weight:700; }
.ui-datepicker .ui-datepicker-buttonpane {overflow: hidden;width: 280px;margin: 0 auto;padding: 0;border: none;}
.ui-datepicker td,
.ui-datepicker th {padding: 0;}
.ui-datepicker .ui-datepicker-buttonpane button {float: right;cursor: pointer;width: auto;margin: 0;padding: 0;font-size: 15px;line-height: 50px;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; }
/* month */
.ui-monthpicker .ui-datepicker-calendar {width: 100% !important;}
.ui-monthpicker .ui-state-default {width: 100%;margin:3px 0;line-height: 36px !important;}
.ui-monthpicker .ui-state-highlight {font-weight: 700;text-decoration: underline;}
.ui-monthpicker .ui-state-active {background: var(--color1);color: #fff;text-decoration: none;}
.ui-monthpicker .ui-datepicker-buttonpane {margin-top:5px;}
 @media screen and (max-width:1024px) {
	 .ui-datepicker {width: 300px;}
	 .ui-datepicker .ui-datepicker-calendar { width:280px; }
	 .ui-datepicker .ui-datepicker-buttonpane { width:260px;}
 }
 @media screen and (max-width:767px) {
	 .ui-datepicker { left: 50% !important; transform: translateX(-50%);}
	 .ui-datepicker .ui-datepicker-title,
	 .ui-datepicker .ui-datepicker-calendar,
	 .ui-datepicker .ui-datepicker-buttonpane button {font-size:14px;}
	 .ui-datepicker .ui-datepicker-buttonpane button {line-height:40px;}
}

/* timepicker */
.ui-timepicker-container { position:absolute;box-sizing:border-box;}
.ui-timepicker,
.ui-timepicker-viewport {box-sizing:content-box;height: 230px;display:block;}
.ui-timepicker {list-style:none;text-align:center}
.ui-timepicker-viewport {overflow:auto;overflow-x:hidden;box-sizing: border-box;}
.ui-timepicker-standard a {display: block;font-size: 15px;color: var(--color4);padding: 8px;text-decoration:none;border-radius: 0;}
.ui-timepicker-standard .ui-state-hover {background-color: var(--color1);border:none;font-weight: 700;color: #fff;}
 @media screen and (max-width:767px) {
     .ui-timepicker, 
     .ui-timepicker-viewport { height:200px; }
     .ui-timepicker-standard a { font-size:14px; }
}