@charset "utf-8"; :root{ --color-board-base:#282828; --color-board-base1:#848484; --color-board-base2:#ccc; --color-board-base3:#888; --color-board-base4:#949494; --color-board-base5:#343434; --color-board-line:#e0e0e0; --color-board-gray:#efefef; --color-board-gray1:#f6f6f6; --color-board-gray2:#f4f6f9; --color-board-gray3:#f2f2f2; --color-board-gray4:#f8fafd; --color-board-gray5:#ebebeb; --color-board-deep-gray:#38393B; --color-board-white:#fff; --color-board-black-opcity05:rgba(0,0,0,.05); --color-board-black-opcity1:rgba(0,0,0,.1); --color-board-black-opcity2:rgba(0,0,0,.2); --color-board-black-opcity3:rgba(0,0,0,.3); --color-board-black-opcity5:rgba(0,0,0,.5); --color-board-black-opcity7:rgba(0,0,0,.7); --color-board-black-opcity74:rgba(0,0,0,.74); --color-board-black-opcity84:rgba(0,0,0,.84); --color-board-point:#2581d7; --color-board-point-hover:#2878d3; --color-board-deep-point:#1355a0; --color-board-light-point:#ebf2fd; --color-board-light-point1:#f1f5fa; --color-board-red:#c5010a; --color-board-red1:#e93030; --color-board-black:#000; --color-board-mint:#01a78e; --color-board-naver:#129b3c; --color-board-kakao:#f8da33; --color-board-facebook:#3b5a9a; --color-board-deep-mint:#017463; --color-board-deep-naver:#086825; --color-board-deep-kakao:#3d1e1f; --color-board-deep-facebook:#243d70; } /* layout */ #boardWrap { position:relative; width:100%; max-width:1600px; margin-left:auto; margin-right:auto;} .scroll { padding-bottom:15px; overflow-x:auto;} .tal { text-align:left; } .tar { text-align:right; } .tac { text-align:center; } .essential { color:var(--color-board-red); } .lineL { border-left:1px solid var(--color-board-line); } .full { width:100%; } .w30 { width:30%; } .w20 { width:20%; } .w5em { width:5em; } .w8em { width:8em; } .w10em { width:10em; } .thumblist_none { flex:0 1 100%; width:100%; padding:3em 0 !important; text-align:center; font-size:1.033em; font-weight:400; justify-content:center; } /* icon */ .icon-calendar { background:url(/resource/common/images/bbs/icon_calender.svg) no-repeat 50% 50% / auto 16px;width:16px;height:16px;display:block; } .icon-feel { background:url(/resource/common/images/bbs/icon_feel.png) no-repeat 0 center;width:20px;height:20px;display:block} .icon-date { background:url(/resource/common/images/bbs/icon_date.png) no-repeat 0 center;width:15px;height:14px;display:inline-block;vertical-align:middle} .icon-file { background:url(/resource/common/images/bbs/icon_file.png) no-repeat 0 center / auto 100%; width:15px;height:14px;display:inline-block;vertical-align:middle} /* Check box */ .check_input { position:absolute; width:1px; height:1px; opacity:0; } .check_label { position:relative; padding-left:30px; color:var(--color-board-base1); cursor:pointer; line-height:25px; font-weight:400; } .check_label::before { content:""; position:absolute; top:0; left:0; width:25px; height:25px; overflow:hidden; background-color:var(--color-board-gray); border-radius:50%; } .check_input:checked + .check_label::before { background:var(--color-board-gray) no-repeat 70% 50%; background-image:url(/resource/common/images/bbs/bg_check.png); } .check_input:focus + .check_label::before { box-shadow:0 0 0 1px var(--color-board-base); outline-offset:2px; outline:2px dotted var(--color-board-base) } /* Check box */ .check_input1 { position:absolute; width:1px; height:1px; opacity:0; } .check_label1 { position:relative; padding-left:30px; color:var(--color-board-base1); cursor:pointer; line-height:22px; font-weight:400 } .check_label1::before { content:""; position:absolute; top:0; left:0; width:22px; height:22px; overflow:hidden; background-color:var(--color-board-white); border:1px solid var(--color-board-black-opcity2); border-radius:3px; } .check_input1:checked + .check_label1::before { background:no-repeat 70% 50%; background-image:url(/resource/common/images/bbs/bg_check.png); } .check_input1:focus + .check_label1::before { box-shadow:0 0 0 1px var(--color-board-base); outline-offset:2px; outline:2px dotted var(--color-board-base) } /* Input radio */ .radio_input { position:absolute; width:1px !important; height:1px !important; opacity:0; } .radio_label { position:relative; padding-left:30px; color:var(--color-board-base1); cursor:pointer; } .radio_label::before { content:""; position:absolute; top:50%; left:0; width:25px; height:25px; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); overflow:hidden; background:var(--color-board-white); border:1px solid var(--color-board-black-opcity2); border-radius:50%; } .radio_input:checked + .radio_label::before { border:4px solid var(--color-board-base); } .radio_input:focus + .radio_label::before { outline-offset:2px; outline:2px dotted var(--color-board-base)} /*button*/ .btnArea { position:relative; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; width:100%; margin-top:2%; } .btnArea:not(span) { justify-content:center; } .btnArea>span { display:flex; gap:1px; flex-wrap:wrap; flex:auto } .btnArea>span+span { justify-content:flex-end; } .btnArea .file_list { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:10px; border-radius:10px; background:var(--color-board-gray1) } .btnArea .file_list>li { position:relative; } .btnArea .file_list>li .upload_name { height:35px; border-radius:5px; padding:0 10px; } .btnArea .file_list .file_label::before { height:35px; line-height:35px; } .btnArea .file_list>li.flex_auto { flex:auto; } #boardWrap .btn { overflow:hidden; display:inline-block; position:relative; height:40px; box-sizing:border-box; margin:2px; padding:0 20px; border:1px solid transparent; background-color:var(--color-board-point); color:var(--color-board-white); box-shadow:none; vertical-align:middle; transition:all ease 0.2s;} #boardWrap .btn>span { display:flex; flex-flow:row wrap; justify-content:center; align-items:center; position:relative; z-index:1; height:100%; line-height:1.2em; color:var(--color-board-white); transition:all ease 0.2s;} #boardWrap .btn.white { background:var(--color-board-white); border-color:var(--color-board-black-opcity2); font-weight:500; } #boardWrap .btn.white:hover, #boardWrap .btn.white:focus { border-color:var(--color-board-base); filter:drop-shadow(1px 2px 2px var(--color-board-black-opcity3))} #boardWrap .btn.white>span { color:var(--color-board-base); } #boardWrap .btn.sm { padding:0 15px; height:35px; vertical-align:middle; font-size:14px; } #boardWrap .btn.sm.white:hover, #boardWrap .btn.sm.white:focus { background-color:var(--color-board-white); border-color:var(--color-board-base); } #boardWrap .btn.sm.white:hover span, #boardWrap .btn.sm.white:focus span { color:var(--color-board-base); } #boardWrap .btn.white:hover, #boardWrap .btn.white:focus { background:var(--color-board-point); border-color:var(--color-board-point)} #boardWrap .btn.white:hover span, #boardWrap .btn.white:focus span { color:var(--color-board-white); } #boardWrap .btn.black { background:var(--color-board-base); border-color:var(--color-board-base); font-weight:500; } #boardWrap .btn.black:hover, #boardWrap .btn.black:focus { background:var(--color-board-base); border-color:var(--color-board-base); filter:drop-shadow(1px 2px 2px var(--color-board-black-opcity3))} #boardWrap .btn.black>span { color:var(--color-board-white); } #boardWrap .excel { background:url(/resource/common/images/bbs/excel.png) no-repeat 0 50%; padding-left:22px} #boardWrap .btn.round { border-radius:3px; } #boardWrap .btn.big { height:60px; font-size:1.167rem; font-weight:bold } #boardWrap .btn:focus { outline-offset:2px; outline:2px dotted var(--color-board-base)} /*tabmenu*/ .bd_tabNav { display:flex; flex-wrap:wrap; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; position:relative; width:100%; margin-bottom:25px; border-top:1px solid var(--color-board-line); border-left:1px solid var(--color-board-line) } .bd_tabNav>li { display:flex; flex:auto; flex-flow:row wrap; min-width:calc(100% / 10); justify-content:center; align-items:center; border-right:1px solid var(--color-board-line); border-bottom:1px solid var(--color-board-line); font-weight:400; } .bd_tabNav>li>a { display:table; position:relative; width:100%; height:100%; padding:12px; color:var(--color-board-black-opcity84); text-align:center; line-height:1.3; } .bd_tabNav>li>a:hover { color:var(--color-board-point-hover); } .bd_tabNav>li.tab_on>a { color:var(--color-board-white); background-color:var(--color-board-point-hover); } /*paging*/ .paging { position:relative; width:100%; display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:2px; margin-top:40px; } .paging a { font-size:.94rem; display:flex; justify-content:center; color:var(--color-board-black-opcity7); width:35px; height:35px; border:1px solid var(--color-board-line); line-height:35px;} .paging a.this { font-size:.94rem; color:var(--color-board-base); font-weight:400; border:1px solid var(--color-board-base);} .paging .btn_prev { background:url(/resource/common/images/bbs/bbs-prev.png) center no-repeat;} .paging .btn_start { background:url(/resource/common/images/bbs/bbs-prev-end.png) center no-repeat;} .paging .btn_next { background:url(/resource/common/images/bbs/bbs-next.png) center no-repeat;} .paging .btn_end { background:url(/resource/common/images/bbs/bbs-next-end.png) center no-repeat;} /* 모바일 용 */ .paging.mob { display:none; } @media all and (max-width:768px){ .paging a { width:30px; height:30px; line-height:30px; } .paging.mob { display:flex; } .paging.pc { display:none; } } /* 검색 */ .headList { position:relative; display:flex; flex-wrap:wrap; gap:10px 0; align-items:center; justify-content:space-between; padding:.94em 1.25em; border-radius:10px; background:var(--color-board-gray1);} .headList .bdTotal, .headList .SearchInfo fieldset { display:flex; flex-wrap:wrap; } .headList .SearchInfo fieldset { gap:5px 15px; } .headList .bdTotal>li { font-size:1rem; } .headList .bdTotal>li+li { position:relative; margin-left:10px; padding-left:10px; } .headList .bdTotal>li+li::before { position:absolute; left:0; top:50%; width:1px; height:50%; background:rgba(0,0,0,.3); content:''; transform:translateY(-50%); } .headList .bdTotal>li strong { color:var(--color-board-point-hover); font-weight:bold; } .headList .SearchInfo input, .headList .SearchInfo select, .headList .SearchInfo button { font-size:1rem; } .headList .SearchInfo .data_list, .headList .SearchInfo .search_list { display:flex; gap:2px; } .headList .SearchInfo .data_list { margin-right:15px; } .headList .SearchInfo .data_list>li { position:relative; max-width:10em; } .headList .SearchInfo .data_list>li>input { width:100%; } .headList .SearchInfo .data_list>li+li { margin-left:20px; } .headList .SearchInfo .data_list>li+li::before { position:absolute; left:-16px; content:''; width:10px; height:1px; background:var(--color-board-black-opcity5); top:50%; transform:translateY(-50%);} .headList .SearchInfo .data_list>li>a { position:absolute; right:5px; top:2.5px; width:35px; height:35px; display:flex; align-items:center; justify-content:center } .headList .SearchInfo button[type="submit"] { width:60px; padding:8px 15px; background-color:var(--color-board-base); color:var(--color-board-white); vertical-align:middle; min-height:40px; } .headList .SearchInfo button[type="submit"]:focus { outline-offset:-3px; outline:2px dotted var(--color-board-white)} .headList .list_align { display:flex; gap:0 10px; } .headList .list_align>li a { display:block; position:relative; line-height:1; padding:7px 20px; border:1px solid var(--color-board-black-opcity1); border-radius:20px; font-size:15px; font-weight:500; background:var(--color-board-white);} .headList .list_align>li a.on { border-color:var(--color-board-point-hover); background:var(--color-board-point-hover); color:var(--color-board-white) } .headList.only { justify-content:center; background:var(--color-board-gray)} .headList .SearchInfo .search_list>li { position:relative; } .headList .SearchInfo .search_list .btn_listcount { position:relative; width:40px; min-height:40px; padding:0; background-color:var(--color-board-white); border:1px solid var(--color-board-black); } .headList .SearchInfo .search_list .btn_listcount::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/common/images/bbs/icon_listcount.svg) no-repeat 50% 50% / auto 12px; filter:invert(1); } .headList .SearchInfo .search_list .listcount_wrap { position:absolute; display:none; z-index:3; right:0; top:41px; width:95px; background:var(--color-board-white); border:1px solid var(--color-board-black); padding:10px;} .headList .SearchInfo .search_list .listcount_wrap.active { display:block; } .headList .SearchInfo .search_list .listcount_wrap strong { display:block; text-align:center; font-size:.9rem; font-weight:bold; color:var(--color-board-black-opcity74); line-height:1; padding-bottom:.5em; margin-bottom:.5em; border-bottom:1px solid var(--color-board-base2); } .headList .SearchInfo .search_list .listcount_wrap>ul { display:flex; flex-flow:column; gap:3px; } .headList .SearchInfo .search_list .listcount_wrap>ul>li>button { width:100%; min-height:32px; padding:0; border:1px solid var(--color-board-black-opcity2); border-radius:5px; background:var(--color-board-white); font-size:.85rem; } .headList .SearchInfo .search_list .listcount_wrap>ul>li>button.on, .headList .SearchInfo .search_list .listcount_wrap>ul>li>button:focus { background:var(--color-board-base); color:var(--color-board-white); border:1px solid var(--color-board-base);} .headList .SearchInfo .search_list .listcount_wrap .btn_listcount_app { margin-top:.75em; width:100% !important; min-height:32px; border-radius:5px; font-size:.85rem; background:var(--color-board-point-hover)!important} /* 문화관광용 검색단 */ .tour_search_box .tab { position:relative; display:flex; flex-wrap:wrap; border:1px solid var(--color-board-point); margin-bottom:25px; border-radius:10px; transition:all ease 0.2s; } .tour_search_box .tab.active { border-radius:10px 10px 0 0; } .tour_search_box .tab>li { width:33.333%; padding:0 20px;} .tour_search_box .tab>li+li { border-left:1px solid var(--color-board-black-opcity1); } .tour_search_box .tab>li.active { color:var(--color-board-point); } .tour_search_box .tab>li>button { position:relative; display:block; width:100%; height:100%; text-align:left; font-size:1.03rem; font-weight:500; height:70px; } .tour_search_box .search_box { display:none; position:absolute; width:calc(100% + 2px); top:70px; background:var(--color-board-white); border:1px solid var(--color-board-point); left:-1px; z-index:3; padding:25px; border-radius:0 0 10px 10px; } .tour_search_box .tab>li.active .search_box { display:flex; flex-wrap:wrap; } .tour_search_box .search_box>ul { display:flex; flex-wrap:wrap; gap:15px 25px;} .tour_search_box .search_box>ul.radio_list { justify-content:end; width:100%; margin-bottom:12px;} .tour_search_box .search_box>ul>li { display:flex; align-items:center; gap:0 5px; color:var(--color-board-base); font-weight:400 } .tour_search_box .search_box .input_list { width:100%; display:flex; gap:5px; } .tour_search_box .search_box .input_list>li { flex:auto; } .tour_search_box .search_box .input_list>li select { min-width:10em; } .tour_search_box .search_box .input_list>li select, .tour_search_box .search_box .input_list>li input { border-radius:5px; } .tour_search_box .search_box .input_list>li:has(select) { max-width:10em; } .tour_search_box .search_box .bot_btn { position:relative; width:100%; margin-top:1.5em; text-align:center; border-radius:5px; } .tour_search_box .search_box .bot_btn button { width:7em; height:35px; color:var(--color-board-white); font-size:.95rem; border-radius:3px; } .tour_search_box .search_box .bot_btn button[type="submit"] { background:var(--color-board-point-hover); } .tour_search_box .search_box .bot_btn .close { background:var(--color-board-base); } .tour_search_box .search_box .bot_btn button[type="submit"]:focus { outline-offset:-4px; outline:2px dotted var(--color-board-white) } .tour_search_box .search_box .bot_btn .close:focus { outline-offset:-4px; outline:2px dotted var(--color-board-white) } .tour_search_box .search_box .bot_btn .refresh { position:absolute; width:auto; right:0; top:0; display:flex; height:35px; border-radius:20px; background: var(--color-board-base5); align-items:center; justify-content:center; font-size:.85rem; padding:0 15px; line-height:1} .tour_search_box .search_box .bot_btn .refresh::before { display:flex; width:13px; height:13px; margin-right:5px; content: ''; background: url(/resource/common/images/bbs/icon_reset.svg) no-repeat 50% 50% / contain; filter:invert(1)} .tour_search_box .tab>li svg { width:40px; height:40px; position:absolute; right:0; top:50%; transform:translateY(-50%); } .tour_search_box .tab>li svg, .tour_search_box .tab>li svg * { outline:none;} .tour_search_box .tab>li .svg_line { fill:none; stroke:#222; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.1px; } .tour_search_box .tab>li.active .svg_line { stroke:var(--color-board-point);stroke-dasharray:200; stroke-dashoffset:200; transition:0.3s linear 0s; transition-property:stroke, stroke-dashoffset; transition-duration:0.3s, 0s; } .tour_search_box .tab>li.on .svg_line { stroke-dasharray:200; stroke-dashoffset:200; transition:0.3s linear 0s; transition-property:stroke, stroke-dashoffset; transition-duration:0.3s, 0s;} .tour_search_box .tab>li.on.ani-show .svg_line { stroke-dashoffset:0; transition-duration:0.3s, 1.5s; transition-delay:0s, 0s;} /* 문화관광용 검색단 출력수 다른버전 */ .tour_search_box.col02 .tab>li { width:50%;} .tour_search_box.col06 .tab>li { width:16.666%; } .tour_search_box.col06 .tab>li.last .search_box { justify-content:space-between; } .tour_search_box.col06 .tab>li.last>input[type="text"] { width:calc(100% - 23em); } .tour_search_box.col06 .tab>li>button { position:relative; background-image:none; } .tour_search_box.col06 .tab>li>button::before { position:absolute; width:7px; height:7px; top:50%; right:0; border-style:solid; border-width:0 1px 1px 0; border-color:rgba(0,0,0,.7); content:''; transform:translateY(-50%) rotate(45deg); transition:all ease 0.2s } .tour_search_box.col06 .tab>li.active>button::before { transform:translateY(-20%) rotate(225deg);} .tour_search_box.col06 .tab>li.last .col03 { width:100%; } .tour_search_box.col06 .tab>li.last .col03>li { flex:auto; } .tour_search_box.col06 .tab>li.last .col03>li>label { min-width:4.7em; } .tour_search_box.col06 .tab>li.last .col03>li>input[type="text"] { flex:auto; } .tour_search_box.col06 .tab>li.last .col03>li>.data_list { width:100%; display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .tour_search_box.col06 .tab>li.last .col03>li>.data_list>li { position:relative; flex:auto; display:flex; align-items:center; gap:5px; } .tour_search_box.col06 .tab>li.last .col03>li>.data_list>li>a { position:absolute; right:0; top:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center } .tour_search_box.col06 .tab>li.last .col03>li>.data_list>li:first-child { max-width:4.7em } .tour_search_box.col06 .tab>li.last .col03>li>.data_list>li>input[type="text"] { flex:auto; width:100%; } .tour_search_box.col06 .search_box .bot_btn { position:relative; } .tour_search_box.col06 .search_box .bot_btn .ab { position:absolute; right:0; } /* Desktop Device */ @media all and (max-width:1024px){ .headList .bdTotal, .headList .SearchInfo fieldset { flex:0 1 100%; } .headList .SearchInfo fieldset { justify-content:space-between; } .headList .SearchInfo { width:100%; } .headList .SearchInfo .data_list { margin-right:0; flex: 0 1 auto; } .headList .SearchInfo .search_list { flex-wrap:wrap; flex:auto; } .headList .SearchInfo .search_list>li { flex:auto; } .headList .SearchInfo .search_list>li>input, .headList .SearchInfo .search_list>li>select, .headList .SearchInfo .search_list>li>button { width:100%; } .headList .SearchInfo .search_list>li.listcount { position:absolute; right:1.25em; top:10px; } .headList .SearchInfo .search_list .btn_listcount { width:35px; min-height:35px; } .headList .SearchInfo .search_list .listcount_wrap { top:36px; } .headList .SearchInfo .data_list>li>input::placeholder { font-size:.8rem; } } @media all and (max-width:968px){ /* 문화관광용 검색단 출력수 다른버전 */ .tour_search_box.col06 .tab>li { padding:0 15px; width:33.333%; } .tour_search_box.col06 .tab>li>button { font-size:1rem; height:60px; } .tour_search_box.col06 .search_box { top:60px; padding:15px; } .tour_search_box.col06 .search_box>ul { gap:10px 20px; } .tour_search_box.col06 .tab>li:nth-child(n+4):nth-child(-n+6) { border-top:1px solid var(--color-board-black-opcity1); } .tour_search_box.col06 .tab>li:nth-child(n+4):nth-child(-n+6) .search_box { top:120px; } .tour_search_box .tab>li { padding:0 10px 0 15px; } .tour_search_box .tab>li svg { width:35px; height:35px; } } @media all and (max-width:768px){ .headList .SearchInfo .data_list, .headList .SearchInfo .search_list { flex:0 1 100%; } .headList .SearchInfo .data_list>li { max-width:inherit; flex:0 1 calc(50% - 10px) ;} .headList .list_align { gap:0 5px; } .headList .list_align>li a { padding:5px 12px; border:1px solid var(--color-board-black-opcity1); font-size:14px;} /* 문화관광용 검색단 */ .tour_search_box .tab>li { width:100%; padding:0 15px;} .tour_search_box .tab>li>button { font-size:1rem; height:45px; } .tour_search_box .tab>li+li { border-left:none; border-top:1px solid var(--color-board-black-opcity1); } .tour_search_box .search_box { top:137px; padding:15px; } .tour_search_box .search_box>ul { gap:10px 20px; } .tour_search_box .search_box .bot_btn button { width:5em; height:32px; font-size:.9rem; } .tour_search_box .search_box .bot_btn .refresh { font-size:.001px; padding:0 10px; height:32px;} .tour_search_box .search_box .bot_btn .refresh::before { margin-right:0; } .tour_search_box .search_box .input_list>li select { min-width:6em; } .tour_search_box .search_box .input_list>li:has(select) { max-width:6em; } } @media all and (max-width:668px){ /* 문화관광용 검색단 출력수 다른버전 */ .tour_search_box.col02 .tab>li { width:100%; } .tour_search_box.col02 .search_box { top:91px; } .tour_search_box.col06 .tab>li+li { border-left:1px solid var(--color-board-black-opcity1); } } @media all and (max-width:568px){ /* 문화관광용 검색단 출력수 다른버전 */ .tour_search_box.col06 .tab>li { width:50%; } .tour_search_box.col06 .tab>li>button { height:45px; font-size:.95rem; } .tour_search_box.col06 .tab>li>button::before { top:45% } .tour_search_box.col06 .tab>li.active>button::before { transform:translateY(-10%) rotate(225deg); } .tour_search_box.col06 .search_box { top:45px; } .tour_search_box.col06 .tab>li:nth-child(n+3):nth-child(n+4) .search_box { top:90px; } .tour_search_box.col06 .tab>li:nth-child(n+5):nth-child(-n+6) .search_box { top:135px; } .tour_search_box.col06 .tab>li.last .search_box { gap:5px; } .tour_search_box.col06 .tab>li.last input[type="text"] { width:100%; } } @media all and (max-width:414px){ .headList .SearchInfo .search_list>li:nth-child(1) { flex:0 1 100%;} .headList .SearchInfo .search_list>li:nth-child(1) select { width:100%; } .headList .SearchInfo .search_list > li:has(> button[type="submit"]){ flex:calc(100% - 40px - 2px); } .headList .SearchInfo .search_list>li.listcount { position:relative; right:inherit; top:inherit; } .headList .SearchInfo .search_list > li:has(> .btn_listcount) { max-width:40px; } .headList .SearchInfo .search_list .btn_listcount { width:40px; min-height:40px; } .headList .SearchInfo .data_list>li>input { font-size:0.86rem; padding:8px } .headList .SearchInfo .data_list>li>a { right:0; width:30px } } @media all and (max-width:368px){ .tour_search_box .search_box .input_list>li select { min-width:inherit; width:100%; } .tour_search_box .search_box .input_list>li:has(select) { max-width:inherit; width:100%; } } /*list basic_table*/ .list_group .bbs_table { width:100%; margin:1.25rem 0; display:table; border-collapse:separate; table-layout:auto; word-break:break-all; } .list_group .bbs_table th, .bbs_table td { text-align:center; padding:18px 5px; vertical-align:middle; } .list_group .bbs_table thead tr th, .bbs_table thead tr th { background:var(--color-board-gray2); } .list_group .bbs_table thead tr th:first-child { border-radius:8px 0 0 8px; } .list_group .bbs_table thead tr th:last-child { border-radius:0 8px 8px 0; } .list_group .bbs_table td.title { text-align:left; } .list_group .bbs_table td.title a { display:flex; flex-wrap:wrap; align-items:center; gap:5px; } .list_group .bbs_table td.title a * { flex:0 1 auto; } .list_group .bbs_table td.title .tit_txt { display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow:hidden; word-break:break-all; } .list_group .bbs_table th { font-weight:bold; color:var(--color-board-base); } .list_group .bbs_table td { border:1px solid transparent; border-bottom:1px solid var(--color-board-black-opcity1); border-left:none; border-right:none } .list_group .bbs_table td .icon-new { display:inline-block; width:17px; height:17px; position:relative; margin-left:5px; vertical-align:middle; margin-top:-3px } .list_group .bbs_table td .icon-new::before { position:absolute; width:100%; height:100%; background:var(--color-board-red1); text-align:center; line-height:17px; content:'N'; color:var(--color-board-white); font-weight:500; border-radius:100%; font-size:.7rem } .list_group .bbs_table td .icon-secret { display:inline-block; width:13px; height:13px; position:relative; margin-left:5px; vertical-align:middle; margin-top:-3px; background-image:url(/resource/common/images/bbs/icon_secret.svg); background-repeat:no-repeat; background-position:50% 50%; background-size:auto; opacity:.84} .list_group .bbs_table td.title:has([class^="icon-"]) .tit_txt { max-width: calc(100% - 5em);} .list_group .bbs_table td.title:not(:has([class^="icon-"])) .tit_txt { max-width:100%;} .list_group .bbs_table .colNotice { /*background-color:var(--color-board-gray1);*/} .list_group .bbs_table .colNotice .icoNotice span { position:relative; display:inline-block; background:var(--color-board-base); color:var(--color-board-white); padding:5px 10px; font-size:.88rem; line-height:1; border-radius:3px;} .list_group .bbs_table .icon_file { display:flex;width:25px;height:24px;margin:0 auto;background-image:url(/resource/common/images/bbs/icon_file.png);background-repeat:no-repeat;background-position:50% 50%;background-size:auto;} .list_group .bbs_table .icon_file_on { display:inline-block; width:25px; height:24px; background-image:none; background-repeat:no-repeat; background-position:50% 50%; background-size:auto;} .list_group .bbs_table .txt_line1, .list_group .bbs_table .txt_line2, .list_group .bbs_table .txt_link1, .list_group .bbs_table .txt_link2 { display:inline-block; padding:5px 10px; font-size:.88rem; line-height:1; border-radius:3px; } .list_group .bbs_table .txt_line1 { color:var(--color-board-deep-gray); border:1px solid var(--color-board-deep-gray);} .list_group .bbs_table .txt_line2 { color:var(--color-board-point-hover); border:1px solid var(--color-board-point-hover);} .list_group .bbs_table .txt_link1 { background-color:var(--color-board-deep-gray); color:var(--color-board-white);} .list_group .bbs_table .txt_link2 { background-color:var(--color-board-point-hover); color:var(--color-board-white) } .list_group .bbs_table .bbslist_none { padding:5% 3%; text-align:center} .list_group .bbs_table tbody td b.mtitle { display:none;} .list_group .bbs_table tr { transition:0.3s ease 0s; } /* 모바일용 타이틀 */ #boardWrap .mtitle { display:none; } /* hover 효과 */ .list_group .bbs_table tbody tr td:first-child { border-radius:0; } .list_group .bbs_table tbody tr td:last-child { border-radius:0; } .list_group .bbs_table tbody tr td:first-child { border-left:1px solid transparent; } .list_group .bbs_table tbody tr td:last-child { border-right:1px solid transparent; } .list_group .bbs_table tbody tr:hover { position:relative; z-index:1; box-shadow:10px 6px 6px var(--color-board-black-opcity3); border-radius:16px; } .list_group .bbs_table tbody tr:hover td { border-color:var(--color-board-point-hover); border-bottom:1px solid var(--color-board-point-hover); background-color:var(--color-board-white); } .list_group .bbs_table tbody tr:hover td:first-child { border-color:var(--color-board-point-hover); border-radius:16px 0 0 16px; } .list_group .bbs_table tbody tr:hover td:last-child { border-color:var(--color-board-point-hover); border-radius:0 16px 16px 0; } .list_group .bbs_table tbody tr:hover td.bbslist_none { border-radius:16px; } /* Desktop Device */ @media all and (max-width:1024px){ .list_group .bbs_table thead, .list_group .bbs_table thead th, .list_group .bbs_table td.file { display:none; } .list_group .bbs_table td { border-bottom:none; padding:3px 5px;} .list_group .bbs_table td.title { display:block; width:100%; } .list_group .bbs_table tbody tr { position:relative; display:block; padding:15px 10px; border-bottom:1px solid var(--color-board-black-opcity1);} .list_group .bbs_table td.name, .list_group .bbs_table td.date, .list_group .bbs_table td.views { display:inline-block; text-align:left } .list_group .bbs_table .bbslist_none { display:block; } .list_group .bbs_table td.title a strong, .list_group .bbs_table td.title a .tit_txt { font-weight:700; font-size:1rem; } /* 모바일용 타이틀 */ #boardWrap .mtitle { display:inline-block; font-weight:bold; color:var(--color-board-black-opcity74); } #boardWrap .mtitle::after { display:inline-block; vertical-align:middle; content:':'; margin:-3.5px 5px 0; font-weight:300; color:var(--color-board-black-opcity5); } /* hover 효과 */ .list_group .bbs_table tbody tr td:first-child { border-radius:0; } .list_group .bbs_table tbody tr td:last-child { border-radius:0; } .list_group .bbs_table tbody tr td:first-child { border-left:1px solid transparent; } .list_group .bbs_table tbody tr td:last-child { border-right:1px solid transparent; } .list_group .bbs_table tbody tr:hover { position:relative; z-index:1; filter:drop-shadow(10px 6px 6px var(--color-board-black-opcity3)); background-color:var(--color-board-light-point1); border-radius:16px; } .list_group .bbs_table tbody tr:hover::before { position:absolute; width:100%; height:100%; border-radius:16px; border:1px solid var(--color-board-point-hover); left:0; top:0; content:''; z-index:-1 } .list_group .bbs_table tbody tr:hover td { border-color:transparent; border-bottom:1px solid transparent; background-color:transparent; } .list_group .bbs_table tbody tr:hover td:first-child { border-color:transparent; border-radius:0; } .list_group .bbs_table tbody tr:hover td:last-child { border-color:transparent; border-radius:0; } .list_group .bbs_table tbody tr:hover td.bbslist_none { border-radius:0; } } @media all and (max-width:868px){ .list_group .bbs_table td.title strong { flex:100%; } .list_group .bbs_table td.title:has([class^="icon-"]) .tit_txt { max-width: calc(100% - 4em);} } @media all and (max-width:468px){ .list_group .bbs_table td.title a { gap:3px; } .list_group .bbs_table td.title a strong, .list_group .bbs_table td.title a .tit_txt { font-size:.98rem; } } /*list text_list*/ .list_group .text_list { display:flex; flex-wrap:wrap; gap:30px 1.5em; margin-top:2em } .list_group .text_list>li { position:relative; width:calc((100% - 4.5em) / 4); border:1px solid var(--color-board-black-opcity1); padding:1.5em; transition:0.3s ease 0s; } .list_group .text_list>li:hover, .list_group .text_list>li:focus { border-color:var(--color-board-point-hover); box-shadow:5px 5px 5px var(--color-board-black-opcity05);} .list_group .text_list>li.nt_import { background:var(--color-board-gray4); } .list_group .text_list>li>a { display:block; } .list_group .text_list>li label { display:block; margin-bottom:5px; } .list_group .text_list>li .cont { position:relative; } .list_group .text_list>li .cont .cate_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:3px; } .list_group .text_list>li .cont .cate { display:inline-block; flex:0 1 auto; padding:5px 10px; border-radius:3px; background:var(--color-board-point-hover); color:var(--color-board-white); line-height:1; font-size:.88rem } .list_group .text_list>li .cont .icon_new { display:inline-block; flex:0 1 auto; } .list_group .text_list>li .cont .icon_new::before { display:inline-block; color:var(--color-board-white); line-height:1; font-size:.75rem; content:'new'; background:var(--color-board-red1); border-radius:3px; padding:5px 10px; text-transform:uppercase } .list_group .text_list>li .cont strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:20px; margin-top:5px; line-height:1.4; overflow:hidden; font-weight:500; color:var(--color-board-base) } .list_group .text_list>li .cont .text { margin-top:.75em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font-size:17.5px; line-height:1.4; overflow:hidden; color:var(--color-board-base3); } .list_group .text_list>li .cont .data { display:flex; align-items:center; margin-top:1.5em; gap:0 5px; line-height:1; opacity:.64; } @media all and (max-width:1024px){ .list_group .text_list>li .cont strong { font-size:19px; } .list_group .text_list>li .cont .text { font-size:16.5px; } } @media all and (max-width:868px){ .list_group .text_list { gap:20px 1em; } .list_group .text_list>li { width:calc((100% - 2em) / 3); } .list_group .text_list>li .cont strong { font-size:18px; } .list_group .text_list>li .cont .text { font-size:15.5px; } } @media all and (max-width:668px){ .list_group .text_list>li { width:calc((100% - 1em) / 2); } } @media all and (max-width:468px){ .list_group .text_list>li { width:100%; } } /* 배너 리스트 */ #boardWrap .list_banner { margin-top:2em; } #boardWrap .list_banner .list { display:flex; flex-wrap:wrap; gap:20px; } #boardWrap .list_banner .list>li { display:flex; align-items:center; justify-content:center; width:calc((100% - 60px) / 4); border:1px solid rgba(0,0,0,.1); border-radius:5px; height:70px; } #boardWrap .list_banner .list>li>a { max-width:90%; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow:hidden; text-align:center } @media all and (max-width:768px){ #boardWrap .list_banner .list { gap:10px; } #boardWrap .list_banner .list>li { width:calc((100% - 20px) / 2); height:60px; } } /* calendar */ .calendarWrap { position:relative; width:100%;} .calendarWrap .sort_area .year_ctrl { position:relative; text-align:center; padding:10px 0; display:flex; align-items:center; justify-content:space-between; } .calendarWrap .sort_area .year_ctrl .date { font-size:2rem; color:var(--color-board-base); font-weight:bold;} .calendarWrap .sort_area .year_ctrl p { display:flex; gap:2px; } .calendarWrap .sort_area .year_ctrl a { display:block; border:1px solid var(--color-board-gray5); width:36px; height:36px; text-indent:-9999px; border:1px solid var(--color-board-line);} .calendarWrap .sort_area .year_ctrl a.prev_year { left:0; background:url(/resource/common/images/bbs/bbs-prev-end.png) center no-repeat;} .calendarWrap .sort_area .year_ctrl a.prev_month { left:40px; background:url(/resource/common/images/bbs/bbs-prev.png) center no-repeat;} .calendarWrap .sort_area .year_ctrl a.next_month { right:40px; background:url(/resource/common/images/bbs/bbs-next.png) center no-repeat;} .calendarWrap .sort_area .year_ctrl a.next_year { right:0; background:url(/resource/common/images/bbs/bbs-next-end.png) center no-repeat;} .calendarWrap .calendar table { width:100%; border-collapse:collapse; border-top:2px solid var(--color-board-base); } .calendarWrap .calendar table th { height:60px; font-size:17px; font-weight:400; padding:5px; border-bottom:1px solid var(--color-board-line); color:var(--color-board-base);} .calendarWrap .calendar table td { width:14.285714%; height:150px; padding:10px; border-bottom:1px solid var(--color-board-line); border-right:1px solid var(--color-board-line); text-align:center; vertical-align:top; position:relative} .calendarWrap .calendar table td:hover { background-color:var(--color-board-gray2);} .calendarWrap .calendar table th:first-child, .calendarWrap .calendar table td:first-child { border-left:1px solid var(--color-board-line);} .calendarWrap .calendar table th:last-child { border-right:1px solid var(--color-board-line);} .calendarWrap .calendar .num { text-align:right; color:var(--color-board-base4); font-size:15px; font-weight:400; letter-spacing:0;display:block} .calendarWrap .calendar .sun { color:var(--color-board-red);} .calendarWrap .calendar .sat { color:var(--color-board-point);} .calendarWrap .calendar .today { background-color:var(--color-board-gray2);} .calendarWrap .calendar .today span { color:var(--color-board-base5);} .calendarWrap .calendar .refer { margin-top:10px;} .calendarWrap .calendar .refer>li { display:inline-block; margin-right:20px;} .calendarWrap .calendar .refer>li span { width:15px; height:15px; display:inline-block; vertical-align:middle; margin-right:3px;} .calendarWrap .calendar .text { position:absolute; width:90%; height:calc(100% - 25px); bottom:-5px; left:50%;transform:translateX(-50%); } .calendarWrap .calendar .schedule>li a { font-size:.94rem; line-height:1.5; text-align:left;} .calendarWrap .calendar ol.schedule>li a::before { width:20px; height:20px; content:" "counter(num); counter-increment:num; display:inline-block; font-size:.75rem; line-height:20px; vertical-align:middle; text-align:center; margin-right:4px; margin-top:-1px; border-radius:50%; background-color:var(--color-board-deep-gray); color:var(--color-board-white);} .calendarWrap .calendar a.more { border:1px solid var(--color-board-black-opcity2);font-size:.94rem; display:inline-block; line-height:1; padding:7px 15px; border-radius:3px; margin-top:5px; } .calendarWrap .calendar a.more:hover, .calendarWrap .calendar a.more:focus { background:var(--color-board-white); border-color:var(--color-board-base); filter:drop-shadow(1px 2px 2px var(--color-board-black-opcity3))} .calendarwhole { position:fixed; display:none; width:100%; height:100vh; background:rgba(0,0,0,.6); left:0; top:0; z-index:10 } .calendarwhole.active { display:block; } .calendarwhole .cont { position:absolute; padding:15px; left:50%; width:94%; max-width:340px; top:50%; box-sizing:border-box; background:var(--color-board-white); border-radius:1em; transform:translate(-50%,-50%);} .calendarwhole h1 { text-align:center; color:var(--color-board-base); margin-bottom:10px; font-weight:600} .calendarwhole .close { background:var(--color-board-base); padding:7px 15px; text-align:center; margin:15px auto 0 auto; display:table; border-radius:3px; line-height:1; color:var(--color-board-white);} .schedule>li+li { margin-top:4px; } .schedule>li a { display:block; max-width:94%; align-items:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:0.3s ease 0s; } .schedule>li>a:hover { text-decoration:underline;} .schedule>li>a i { font-size:.75rem; flex:auto; min-width:3em; text-align:center; color:var(--color-board-white); margin-right:5px; padding:3px 6px; line-height:1; border-radius:3px;} .schedule>li>a i.cate1 { background:#e0233b;} .schedule>li>a i.cate2 { background:#664d8e;} .schedule>li>a i.cate3 { background:#d37a11;} .schedule>li>a i.cate4 { background:#3e5e8f;} .schedule>li>a i.cate5 { background:#288e7b;} .schedule>li>a i.cate6 { background:#2a9713;} .calendarWrap .cate_list { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:.75rem; justify-content:end; } .calendarWrap .cate_list>li>a span { font-size:.95rem; flex:auto; min-width:3em; text-align:center; color:var(--color-board-white); padding:7px 15px; line-height:1; border-radius:3px;} .calendarWrap .cate_list>li>a .cate1 { background:#e0233b;} .calendarWrap .cate_list>li>a .cate2 { background:#664d8e;} .calendarWrap .cate_list>li>a .cate3 { background:#d37a11;} .calendarWrap .cate_list>li>a .cate4 { background:#3e5e8f;} .calendarWrap .cate_list>li>a .cate5 { background:#288e7b;} .calendarWrap .cate_list>li>a .cate6 { background:#2a9713;} /* 카테고리 출력시 */ .sort_area.flex { display:flex; flex-wrap:wrap; gap:10px 2em; justify-content:space-between; align-items:center; margin-bottom:15px; } .calendarWrap .sort_area.flex .year_ctrl { gap:0 2em; padding:0; } .calendarWrap .sort_area.flex .calendar_cate_btn { display:flex; flex-wrap:wrap; gap:5px; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate { line-height:1; padding:7px 15px 5px 15px; border-radius:30px; font-size:.95rem; color:var(--color-board-white) } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate1 { background:#f15946; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate2 { background:#a251c0; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate3 { background:#5441c1; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate4 { background:#44a140; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate5 { background:#ffaa1c; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate6 { background:#24b9c1; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate7 { background:#1f61c9; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate8 { background:#c70c72; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate9 { background:#c90b1b; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate10 { background:#8ac913; } @media all and (max-width:1024px){ .calendarWrap .calendar table td { height:120px; } .calendarWrap .calendar a.more i { display:none; } .calendarWrap .calendar .schedule>li:nth-child(3) { display:none; } .calendarWrap .calendar a.more { font-size:.84rem; padding:5px 12px; } } @media all and (max-width:768px){ .calendarWrap .sort_area .year_ctrl .date { font-size:1.9rem; } .calendarWrap .calendar table th { font-size:16px; height:50px } .calendarWrap .calendar table td { padding:7px; } .calendarWrap .calendar .schedule>li>a i, .calendarWrap .calendar ol.schedule>li a::before { display:none; } .schedule>li+li { margin-top:2px; } /* 카테고리 출력시 */ .calendarWrap .sort_area.flex .year_ctrl { width:100%; } .calendarWrap .sort_area.flex .calendar_cate_btn { width:100%; justify-content:center; } } @media all and (max-width:568px){ .calendarWrap .calendar table th { height:45px } .calendarWrap .calendar .text .schedule { display:none; } .calendarWrap .calendar table td { height:65px; padding:5px;} .calendarWrap .calendar .text { bottom:inherit; top:50%; transform:translate(-50%,-50%); } .calendarWrap .calendar a.more { font-size:0; width:26px; height:26px; padding:0; border-radius:100%; border:none; background:var(--color-board-point) } .calendarWrap .calendar a.more:hover, .calendarWrap .calendar a.more:focus { background:var(--color-board-point); border-color:transparent; } } @media all and (max-width:468px){ /* 카테고리 출력시 */ .calendarWrap .sort_area.flex .year_ctrl { gap:10px; } .calendarWrap .sort_area .year_ctrl .date { font-size:1.6rem; } .calendarWrap .sort_area.flex .calendar_cate_btn>li>.cate { font-size:.9rem; padding:6px 12px;} } /* 갤러리 게시판 */ .gallery_list { margin-top:20px; } .gallery_list>ul { display:flex; gap:20px; flex-wrap:wrap; } .gallery_list>ul>li { position:relative; width:calc((100% - 60px) / 4); } .gallery_list>ul>li label { position:absolute; left:.5em; top:.5em; z-index:2 } .gallery_list>ul>li .gl_thumb { position:relative; width:100%; height:0; overflow:hidden; background-color:var(--color-board-gray1); background-position:50% 50%; background-repeat:no-repeat; background-size:auto 50%; background-image:url(/resource/common/images/bbs/img_none.png) } .gallery_list>ul>li .gl_thumb img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; object-fit:cover; -o-object-fit:cover; transform:translate(-50%,-50%) scale(1,1) rotate(0.001deg); transition:0.5s ease 0s; transition-property:transform;} .gallery_list>ul>li .gl_thumb>a { position:absolute; width:100%; height:100%; left:0; top:0; } .gallery_list>ul>li a:hover .gl_thumb img, .gallery_list>ul>li a:focus .gl_thumb img, .gallery_list>ul>li:hover .gl_thumb img, .gallery_list>ul>li:focus .gl_thumb img { transform:translate(-50%,-50%) scale(1.07, 1.07);} .gallery_list>ul>li .gl_thumb .cate { position:absolute; top:1em; z-index:1; right:1em; padding:7px 15px; display:inline-block; background:var(--color-board-white); border-radius:15px; color:var(--color-board-point-hover); font-size:.88rem; line-height:1 } .gallery_list ul li .gl_thumb .cate1 { color:rgba(37,144,50); } .gallery_list ul li .gl_thumb .cate2 { color:rgba(209,103,0); } .gallery_list ul li .gl_thumb .cate3 { color:rgba(70,87,167); } .gallery_list ul li .gl_thumb .cate4 { color:rgba(159,74,156); } .gallery_list ul li .gl_thumb .cate5 { color:rgba(216,31,38); } .gallery_list ul li .gl_thumb .cate6 { color:rgba(204,16,118);} .gallery_list ul li .gl_thumb .cate7 { color:rgba(89,23,184);} .gallery_list ul li .gl_thumb .cate8 { color:rgba(160,81,7);} .gallery_list>ul>li .gl_info { margin-top:1em; } .gallery_list>ul>li .gl_info>dt, .gallery_list>ul>li .gl_info>dd { display:block; } .gallery_list>ul>li .gl_info .cate { display:block; color:var(--color-board-point-hover); font-size:.88rem; line-height:1 } .gallery_list>ul>li .gl_info>dt>strong { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; font-size:20px; margin-top:5px; line-height:1.4; overflow:hidden; font-weight:500; color:var(--color-board-base); word-break: break-all;} .gallery_list>ul>li .gl_info>dd.con { margin-top:1em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.4; color:var(--color-board-base3); overflow:hidden } .gallery_list>ul>li .gl_info>dd.part { display:flex; flex-wrap:wrap; gap:5px 15px; margin-top:1em; color:var(--color-board-base3); margin-bottom:-.65em } .gallery_list>ul>li .gl_info>dd.part span+span::before { display:inline-block; width:1px; height:14px; background:var(--color-board-base2); content:''; vertical-align:middle; margin-right:13px; margin-top:-2px; } .gallery_list>ul>li .gl_info>dd.date { margin-top:.75em; display:flex; align-items:center; gap:0 5px; color:var(--color-board-base3); } .gallery_list>ul>li .gl_info>dd.date .icon-date { margin-top:-2px; } .gallery_list>ul>li .gl_info>dd.more { margin-top:1.25em; text-align:center } .gallery_list>ul>li .gl_info>dd.more span { padding:10px; border-radius:3px; display:block; border:1px solid var(--color-board-black-opcity1); transition:0.5s ease 0s; font-size:.95rem} .gallery_list>ul>li:hover .gl_info>dd.more span, .gallery_list>ul>li:focus .gl_info>dd.more span { background:var(--color-board-point-hover); color:var(--color-board-white); border-color:var(--color-board-point-hover); box-shadow:5px 5px 5px var(--color-board-black-opcity05); } /* 정보 */ .gallery_list>ul>li .gl_info>dd.info { display:flex; flex-flow:column; gap:10px; margin-top:10px; } .gallery_list>ul>li .gl_info>dd.info>span { display:flex; flex-wrap:wrap; gap:0 10px; line-height:1.3 } .gallery_list>ul>li .gl_info>dd.info>span>em { font-weight:500; } .gallery_list>ul>li .gl_info>dd.info>span.add_txt, .gallery_list>ul>li .gl_info>dd.info>span.tel_txt { position:relative; padding-left:30px; } .gallery_list>ul>li .gl_info>dd.info>span.add_txt::before, .gallery_list>ul>li .gl_info>dd.info>span.tel_txt::before { position:absolute; width:25px; height:25px; border-radius:100%; background:var(--color-board-base); top:-3px; left:0; content:''; background-position:center; background-repeat:no-repeat; background-size:auto 15px;} .gallery_list>ul>li .gl_info>dd.info>span.add_txt::before { background-image:url(/resource/common/images/bbs/icon_add.svg); } .gallery_list>ul>li .gl_info>dd.info>span.tel_txt::before { background-image:url(/resource/common/images/bbs/icon_tel.svg); } /* 갤러리 출력수 */ .gallery_list>ul.num3>li { position:relative; width:calc((100% - 40px) / 3); } .gallery_list>ul.num5>li { position:relative; width:calc((100% - 80px) / 5); } /* 갤러리 이미지 사이즈 */ .gallery_list .list_4vs3>li .gl_thumb { padding-top:66.66%; } .gallery_list .list_3vs4>li .gl_thumb { padding-top:132.42%; } .gallery_list .list_4vs3.video>li .gl_thumb { padding-top:56.25%;} /* 갤러리 라인 스타일 */ .gallery_list .line>li { border:1px solid var(--color-board-black-opcity1); } .gallery_list .line>li .gl_info { padding:1.25em; margin-top:0; } .gallery_list .line>li:hover, .gallery_list .line>li:focus { border-color:var(--color-board-point-hover); box-shadow:5px 5px 5px var(--color-board-black-opcity05); } .gallery_list .line>li .download_btn { margin-top:0; padding-top:.5em; padding-bottom:.5em } /* 갤러리 좌우 스타일 */ .gallery_list .flex>li { width:100%; display:flex; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--color-board-black-opcity1); } .gallery_list .flex>li>a { width:100%; display:flex; align-items:center; } .gallery_list .flex>li>a .gl_thumb { width:30%; padding-top:17.66% } .gallery_list .flex>li>a .gl_info { flex:auto; margin-left:40px; max-width:calc(100% - (30% + 40px)); margin-top:0; } .gallery_list .flex>li>a .gl_info>dd.more span { display:table; padding-left:2em; padding-right:2em;} .gallery_list .flex>li>a:not(:has(.gl_thumb)) .gl_info { max-width:100%; /* gl_thumb가 없는 경우 max-width를 100%로 설정 */ } /* 갤러리용 다운로드 버튼 */ .gallery_list .download_btn { display:flex; align-items:center; justify-content:center; margin-top:1em; padding-top:1em; border-top:1px solid var(--color-board-black-opcity1); gap:3px; flex-wrap:wrap } .gallery_list .download_btn .icon { display:inline-block; width:30px; height:30px; border-radius:100%; background-position:center; background-repeat:no-repeat; background-size:contain; } .gallery_list .download_btn .icon.pdf { background-image:url(/resource/common/images/bbs/img_pdf.png); background-color:#d31a1a; } .gallery_list .download_btn .icon.hwp { background-image:url(/resource/common/images/bbs/img_hwp.png); background-color:#00a8ff; } .gallery_list .download_btn .icon.ex { background-image:url(/resource/common/images/bbs/img_excel.png); background-color:#1e7145; } .gallery_list .download_btn .icon.img { background-image:url(/resource/common/images/bbs/img_img.png); background-color:var(--color-board-point-hover); } .gallery_list .download_btn .icon.zip { background-image:url(/resource/common/images/bbs/img_zip.png); background-color:#62a8e3; } .gallery_list .download_btn .icon.view { background-image:url(/resource/common/images/bbs/icon_ebook.svg); background-color:var(--color-board-point); background-size:15px; background-position:50%;} /* 문화관광용 */ .gallery_list .like_btn { position:absolute; right:.5em; top:.5em; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--color-board-white); border-radius:100%; z-index:2 } .gallery_list .like_btn::before { display:inline-block; content:''; width:18px; height:18px; background:url(/resource/common/images/bbs/icon_like.svg) no-repeat 50% 50% / 18px; opacity:.6 } .gallery_list .like_btn.on { background:#ee1c7a; } .gallery_list .like_btn.on::before { filter:invert(1); opacity:1} .gallery_list>ul>li .gl_info>dd.hit { display:flex; flex-wrap:wrap; align-items:center; gap:5px 15px; margin-top:15px; border-radius:8px; background:var(--color-board-gray1); padding:10px; font-size:14px; font-weight:400 } .gallery_list .hit { position:relative; } .gallery_list .hit>span::before { display:inline-block; vertical-align:middle; content:''; width:12px; height:12px; margin-right:3px; margin-top:-3px; background-position:left center; background-repeat:no-repeat; background-size:12px;} .gallery_list .hit .like::before { background-image:url(/resource/common/images/bbs/icon_heart.svg); } .gallery_list .hit .view::before { background-image:url(/resource/common/images/bbs/icon_view.svg);} .gallery_list .hit .add::before { background-image:url(/resource/common/images/bbs/icon_map.svg); } .gallery_list .hit .sns { position:absolute; display:flex; flex-wrap:wrap; gap:0 5px; right:10px; top:50%; transform:translateY(-50%); } .gallery_list .hit .sns a { position:relative; width:26px; height:26px; border-radius:100%; border:1px solid var(--color-board-base2); background:var(--color-board-white); transition:all ease 0.2s } .gallery_list .hit .sns a::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background-size:auto 85%; background-position:60% 50%; background-repeat:no-repeat } .gallery_list .hit .sns .link_fb:hover { background-color:#385691; } .gallery_list .hit .sns .link_tw:hover { background-color:var(--color-board-base); } .gallery_list .hit .sns .link_fb::before { background-image:url(/resource/common/images/bbs/icon_facebook.svg); } .gallery_list .hit .sns .link_tw::before { background-image:url(/resource/common/images/bbs/icon_twitter.svg); } .gallery_list .hit .sns .link_fb:hover::before { filter:brightness(100); } .gallery_list .hit .sns .link_tw:hover::before { filter:invert(1); } .gallery_list .hit .sns.cate1 { background:var(--color-board-point-hover); padding:3px 5px; font-size:.85rem; color:var(--color-board-white); border-radius:3px;}/* 청원진행 */ .gallery_list .hit .sns.cate2 { background:#24ad93; padding:3px 5px; font-size:.85rem; color:var(--color-board-white); border-radius:3px;}/* 답변준비 */ .gallery_list .hit .sns.cate3 { background:#293591; padding:3px 5px; font-size:.85rem; color:var(--color-board-white); border-radius:3px;}/* 답변완료 */ .gallery_list .hit .sns.cate4 { background:#3d3d3d; padding:3px 5px; font-size:.85rem; color:var(--color-board-white); border-radius:3px;}/* 청원종료 */ .gallery_list .hit .sns.cate5 { background:#e0233b; padding:3px 5px; font-size:.85rem; color:var(--color-board-white); border-radius:3px;}/* 부결 */ .gallery_list .hit .sns.cate6 { background:#664d8e; padding:3px 5px; font-size:.85rem; color:var(--color-board-white); border-radius:3px;}/* 철회 */ /* 전시정보 */ .ex_list>ul>li .gl_thumb .state { position:absolute; line-height:1; z-index:1; padding:7px 15px 6px 15px; border-radius:25px; font-size:.95rem; top:1em; right:1em} .ex_list>ul>li .gl_thumb .state1 { background:var(--color-board-point-hover); color:var(--color-board-white); } .ex_list>ul>li .gl_thumb .state2 { background:var(--color-board-base); color:var(--color-board-white); } .ex_list>ul>li .gl_thumb .state3 { background:bisque; } .ex_list>ul>li .gl_info .ex_info { display:flex; flex-flow:column; gap:5px; margin-top:5px; } .ex_list>ul>li .gl_info .ex_info>li { display:flex; align-items:center; gap:5px 10px; font-size:.9rem } .ex_list>ul>li .gl_info .ex_info>li>strong { position:relative; line-height:1; padding:7px 15px 7px 30px; border-radius:25px; background:var(--color-board-black-opcity74); color:var(--color-board-white); } .ex_list>ul>li .gl_info .ex_info>li>strong::before { position:absolute; left:10px; top:50%; width:15px; height:15px; content:''; background-position:center; background-repeat:no-repeat; transform:translateY(-50%); background-size:contain } .ex_list>ul>li .gl_info .ex_info>li>strong.icon_calendar::before { background-image:url(/resource/common/images/bbs/icon_calendar01.svg); } .ex_list>ul>li .gl_info .ex_info>li>strong.icon_map::before { background-image:url(/resource/common/images/bbs/icon_add01.svg); } .ex_list>ul>li .gl_info .ex_info>li>span { display:inline-block; overflow:hidden; line-height:1.3; white-space:nowrap; text-overflow:ellipsis; word-break:break-all; } @media all and (max-width:1368px){ /* 갤러리 좌우 스타일 */ .gallery_list .flex>li>a .gl_info>dd.con { -webkit-line-clamp:1; } .gallery_list>ul>li .gl_info>dd.part { gap:5px; } .gallery_list>ul>li .gl_info>dd.part span+span::before { margin-right:5px; } } @media all and (max-width:1268px){ /* 갤러리 출력수 */ .gallery_list>ul.num5>li { width:calc((100% - 60px) / 4); } /* 전시정보 */ .ex_list>ul>li .gl_info .ex_info>li { font-size:.88rem } .ex_list>ul>li .gl_info .ex_info>li>strong { padding:6px 12px 6px 25px; } .ex_list>ul>li .gl_info .ex_info>li>strong::before { left:7px; width:13px; height:13px; } } @media all and (max-width:1024px){ .gallery_list>ul>li .gl_info>dt>strong { font-size:19px; } .gallery_list>ul>li .gl_info>dd { margin-top:.5em } .gallery_list>ul>li .gl_info>dd.more span { font-size:.8rem; } /* 갤러리 좌우 스타일 */ .gallery_list .flex>li>a .gl_thumb { padding-top:22.66%; width:35%; } .gallery_list .flex>li>a .gl_info { margin-left:30px; max-width:calc(100% - (35% + 30px)); } /* 문화관광용 */ .gallery_list .hit .add { width:100%; } .gallery_list>ul>li .gl_info>dd.info>span.add_txt, .gallery_list>ul>li .gl_info>dd.info>span.tel_txt { padding-left:25px; } .gallery_list>ul>li .gl_info>dd.info>span.add_txt::before, .gallery_list>ul>li .gl_info>dd.info>span.tel_txt::before { width:20px; height:20px; top:-1px; background-size:auto 13px; } /* 전시정보 */ .ex_list>ul>li .gl_thumb .state { font-size:.9rem; } } @media all and (max-width:968px){ .gallery_list>ul>li .gl_info>dd.part span { width:100%; } .gallery_list>ul>li .gl_info>dd.part span+span::before { display:none; } .gallery_list>ul>li .gl_info>dd.part span+span { margin-top:-.5em; } .gallery_list .hit .sns { position:relative; right:inherit; top:inherit; transform:inherit;} } @media all and (max-width:868px){ .gallery_list>ul>li { width:calc((100% - 40px) / 3); } .gallery_list>ul>li .gl_info>dt>strong { font-size:18px; } /* 갤러리 출력수 */ .gallery_list>ul.num5>li { width:calc((100% - 20px) / 2); } /* 문화관광용 */ .gallery_list .hit .add { width:auto;} } @media all and (max-width:768px){ /* 갤러리 좌우 스타일 */ .gallery_list .flex>li>a .gl_thumb { padding-top:11rem; width:40%; } .gallery_list .flex>li>a .gl_info { margin-left:20px; max-width:calc(100% - (40% + 20px)); } } @media all and (max-width:668px){ .gallery_list>ul { gap:10px; } .gallery_list>ul>li { width:calc((100% - 10px) / 2); } .gallery_list>ul>li .gl_info>dt>strong { font-size:17px; } .gallery_list .line>li .gl_info { padding:1em; } /* 갤러리 출력수 */ .gallery_list>ul.num3>li { width:calc((100% - 10px) / 2); } .gallery_list>ul.num5>li { width:calc((100% - 10px) / 2); } /* 전시정보 */ .ex_list>ul>li .gl_thumb .state { font-size:.85rem; } } @media all and (max-width:568px){ /* 문화관광용 */ .gallery_list .hit .add { width:100%; } } @media all and (max-width:468px){ .gallery_list>ul>li .gl_info>dt>strong { font-size:16px; } .gallery_list>ul>li .gl_info>dd.date .mnone { display:none; } .gallery_list>ul>li .gl_info>dd.more span { padding:7px; } /* 갤러리 좌우 스타일 */ .gallery_list .flex>li>a { flex-wrap:wrap; } .gallery_list .flex>li>a .gl_thumb { padding-top:66.66%; width:1000%; } .gallery_list .flex>li>a .gl_info { flex:100%; margin-left:0; max-width:100%; margin-top:1em; } .gallery_list .flex>li:not(:has(.gl_thumb)) .gl_info { margin-top:2em } .gallery_list .flex>li:not(:has(.gl_thumb)) label { top:0; left:0; } /* 갤러리용 다운로드 버튼 */ .gallery_list .download_btn .icon { width:26px; height:26px; } } @media all and (max-width:320px){ /* 갤러리 출력수 */ .gallery_list>ul>li { width:100%; } .gallery_list>ul.num3>li { width:100%; } .gallery_list>ul.num5>li { width:100%; } } /* 목록 상단 슬라이드 */ #boardWrap .board_top_slider { position:relative; padding:1.5em 2em; border-radius:10px; background:var(--color-board-light-point1); margin-bottom:2em } #boardWrap .board_top_slider .manySwiper { width:calc(100% + 15px); margin-left:-7.5px; margin-right:-7.5px; } #boardWrap .board_top_slider .manySwiper .swiper-slide { width:12.5%; } #boardWrap .board_top_slider .manySwiper .swiper-slide>a { display:flex; position:relative; width:calc(100% - 15px); margin-left:7.5px; margin-right:7.5px; } #boardWrap .board_top_slider .manySwiper .swiper-slide .img { display:flex; position:relative; width:100%; height:0; padding-top:146%; overflow:hidden; } #boardWrap .board_top_slider .manySwiper .swiper-slide .img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%) scale(1); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform: translate(-50%,-50%); object-fit:cover; -o-object-fit:cover; } #boardWrap .board_top_slider .manySwiper .swiper-slide .cate { position:absolute; right:.5em; top:.5em; padding:5px 10px; border-radius:20px; font-size:.85rem; font-weight:500; line-height:1; z-index:2 } #boardWrap .board_top_slider .manySwiper .swiper-slide .cate1 { background:var(--color-board-point); color:var(--color-board-white); } #boardWrap .board_top_slider .manySwiper .swiper-slide .cate2 { background:var(--color-board-red); color:var(--color-board-white); } #boardWrap .board_top_slider .manySwiper .swiper-slide .cate3 { background:var(--color-board-mint); color:var(--color-board-white); } #boardWrap .board_top_slider .manySwiper .swiper-slide .cate4 { background:var(--color-board-facebook); color:var(--color-board-white); } #boardWrap .board_top_slider .manySwiper .swiper-slide .cate5 { background:var(--color-board-deep-kakao); color:var(--color-board-white); } #boardWrap .board_top_slider .swiper_bottom { display:flex; align-items:center; justify-content:center; margin-top:15px; } #boardWrap .board_top_slider .swiper_bottom .control { height:45px; display:flex; align-items:center; justify-content:center; border-radius:50px; background:var(--color-board-white); padding:0 15px; } #boardWrap .board_top_slider .swiper_bottom .control button { position:relative; width:35px; height:35px; display:flex; align-items:center; justify-content:center; } #boardWrap .board_top_slider .swiper_bottom .control button:before { display:block; position:absolute; top:50%; left:50%; content:'';} #boardWrap .board_top_slider .swiper_bottom .swiper_prev:before { width:10px; height:10px; border-style:solid; border-width:0 0 1px 1px; border-color:var(--color-board-base); transform:translate(-35%, -50%) rotate(45deg); background-image:none } #boardWrap .board_top_slider .swiper_bottom .swiper_next:before { width:10px; height:10px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-board-base); transform:translate(-65%, -50%) rotate(45deg); background-image:none } #boardWrap .board_top_slider .swiper_bottom .swiper_page { font-size:.9rem; font-weight:700; display:flex; gap:5px; align-items:center; justify-content:center; line-height:1; color:var(--color-board-base); margin-right:0; } #boardWrap .board_top_slider .swiper_bottom .swiper_page i { position:relative; width:1px; height:10px;} #boardWrap .board_top_slider .swiper_bottom .swiper_page i::before { position:absolute; width:1px; height:10px; background:var(--color-board-base); opacity:.5; content:''; left:0; top:0; transform:rotate(25deg); } #boardWrap .board_top_slider .swiper_bottom .swiper-pagination-total{ opacity:.54; color:var(--color-board-base) } #boardWrap .board_top_slider .swiper_bottom .swiper_page .swiper-pagination-current { color:var(--color-board-base) } @media all and (max-width:1368px){ #boardWrap .board_top_slider .manySwiper .swiper-slide { width:16.666%; } } @media all and (max-width:1024px){ #boardWrap .board_top_slider .manySwiper .swiper-slide { width:20%; } } @media all and (max-width:768px){ #boardWrap .board_top_slider { padding:1.25em; } #boardWrap .board_top_slider .manySwiper .swiper-slide { width:25%; } #boardWrap .board_top_slider .swiper_bottom .control { height:40px; padding:0 12px; } #boardWrap .board_top_slider .swiper_bottom .control button { width:30px; height:30px; } } @media all and (max-width:568px){ #boardWrap .board_top_slider .manySwiper .swiper-slide { width:33.33%; } } @media all and (max-width:468px){ #boardWrap .board_top_slider .manySwiper { width:calc(100% + 10px); margin-left:-5px; margin-right:-5px; } #boardWrap .board_top_slider .manySwiper .swiper-slide { width:50%; } #boardWrap .board_top_slider .manySwiper .swiper-slide>a { width:calc(100% - 10px); margin-left:5px; margin-right:5px; } } /* 갤러리 포스터형 */ .gallery_list .list_poster { display:flex; flex-wrap:wrap; gap:1em; } .gallery_list .list_poster>li { position:relative; width:calc((100% - 3em) / 4); display:flex; gap:1em; border:1px solid var(--color-board-line); border-radius:8px; overflow:hidden;} .gallery_list .list_poster>li label { position:absolute; left:.5em; top:.5em; z-index:3 } .gallery_list .list_poster>li>a { display:flex; width:100%; flex-wrap:wrap; gap:1em; } .gallery_list .list_poster>li .gl_thumb { width:100%; position:relative; height:0; padding-top:85%; overflow:hidden; order:2 } .gallery_list .list_poster>li .gl_thumb img { position:absolute; top:0; left:50%; min-width:100%; min-height:100%; transform:translateX(-50%) scale(1); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); object-fit:cover; -o-object-fit:cover; } .gallery_list .list_poster>li:hover .gl_thumb img, .gallery_list .list_poster>li:focus .gl_thumb img, .gallery_list .list_poster>li>a:hover .gl_thumb img, .gallery_list .list_poster>li>a:focus .gl_thumb img { transform:translateX(-50%) scale(1.07, 1.07);} .gallery_list .list_poster>li .cate { display:inline-flex; width:max-content; padding:7px 15px; border-radius:25px; font-size:.85rem; font-weight:500; line-height:1; z-index:2 } .gallery_list .list_poster>li .cate1 { background:var(--color-board-point); color:var(--color-board-white); } .gallery_list .list_poster>li .cate2 { background:var(--color-board-red); color:var(--color-board-white); } .gallery_list .list_poster>li .cate3 { background:var(--color-board-mint); color:var(--color-board-white); } .gallery_list .list_poster>li .cate4 { background:var(--color-board-facebook); color:var(--color-board-white); } .gallery_list .list_poster>li .cate5 { background:var(--color-board-deep-kakao); color:var(--color-board-white); } .gallery_list .list_poster>li .cont { position:relative; width:100%; display:flex; flex-flow:column; gap:10px; padding:2em 1.5em .5em } .gallery_list .list_poster>li .cont strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:1.167rem; font-weight:700; } .gallery_list .list_poster>li .cont>dl { display:flex; gap:10px; font-size:1.03rem; opacity:.64; font-weight:700;} .gallery_list .list_poster>li .cont>dl>dt { min-width:2em; opacity:.64 } .gallery_list .list_poster>li .cont>dl>dd { max-width:calc(100% - 2em - 10px); } .gallery_list .list_poster>li .cont .view { position:absolute; right:1.5em; top:2.3em; display:inline-flex; width:max-content; font-size:.85rem; font-weight:500; border-radius:20px; padding:7px 15px; line-height:1; opacity:.84; background:var(--color-board-gray) } @media all and (max-width:1368px){ .gallery_list .list_poster>li .cont { padding:1.5em 1em .5em; } .gallery_list .list_poster>li .cont .view { right:1em; top:1.8em; } } @media all and (max-width:1168px){ .gallery_list .list_poster>li { width:calc((100% - 2em) / 3); } } @media all and (max-width:1024px){ .gallery_list .list_poster>li .cont { padding-top:1.5rem; } .gallery_list .list_poster>li .cont .view { top:1.45rem; } .gallery_list .list_poster>li .cont strong { font-size:1.137rem; line-height:1.3; } .gallery_list .list_poster>li .cont>dl { font-size:1rem; line-height:1.3; } } @media all and (max-width:868px){ .gallery_list .list_poster>li { width:calc((100% - 1em) / 2); } } @media all and (max-width:568px){ .gallery_list .list_poster>li .cont>dl { flex-flow:column; gap:2px; } .gallery_list .list_poster>li .cont>dl>dt { line-height:1; } .gallery_list .list_poster>li .cont>dl>dt, .gallery_list .list_poster>li .cont>dl>dd { width:100%; min-width:inherit; max-width:inherit } } @media all and (max-width:468px){ .gallery_list .list_poster>li { width:100%; } .gallery_list .list_poster>li .cont>dl { flex-flow:row; gap:10px; } .gallery_list .list_poster>li .cont>dl>dt, .gallery_list .list_poster>li .cont>dl>dd { width:inherit; min-width:inherit; max-width:inherit; line-height:1.3 } } /* faq 게시판 */ #boardWrap .faq_list { margin-top:2em; border-top:2px solid var(--color-board-base); } #boardWrap .faq_list>li { border-bottom:1px solid var(--color-board-black-opcity1); } #boardWrap .faq_list>li .question { position:relative; display:flex; width:100%; padding:1em; align-items:center; font-weight:400; justify-content:flex-start; } #boardWrap .faq_list>li .question .icon_q { position:relative; display:inline-block; width:32px; height:32px; border-radius:100%; border:1px solid var(--color-board-point); margin-right:10px; } #boardWrap .faq_list>li .question .icon_q::before { display:inline-block; width:30px; height:30px; content:'Q'; color:var(--color-board-point); text-align:center;line-height:30px; font-size:1.1em; font-weight:bold } #boardWrap .faq_list>li .question .tit { width:calc(100% - 64px); text-align:left } #boardWrap .faq_list>li .question>.arr::before { position:absolute; right:1em; top:50%; width:9px; height:9px; border-style:solid; border-width:0 2px 2px 0; border-color:var(--color-board-base3); content:''; transform:translateY(-50%) rotate(45deg); transition:all ease 0.2s } #boardWrap .faq_list>li .question.active>.arr::before { transform:translateY(-50%) rotate(225deg); } #boardWrap .faq_list>li .faq_list_con { display:none; padding:1.5em; background:var(--color-board-gray1); margin-top:1em; } #boardWrap .faq_list>li .faq_list_con .icon_a { position:relative; display:inline-block; width:32px; height:32px; border-radius:100%; background:var(--color-board-base); } #boardWrap .faq_list>li .faq_list_con .icon_a::before { display:inline-block; width:30px; height:30px; content:'A'; color:var(--color-board-white); text-align:center; line-height:30px; font-size:1.1em; font-weight:bold } #boardWrap .faq_list>li .faq_list_con.active { display:block; position:relative } #boardWrap .faq_list>li .faq_list_con .faq_list_con_txt { margin-top:.25em; } #boardWrap .faq_list>li .faq_list_con .adm_btn { margin-top:.75em; } @media all and (max-width:1024px){ #boardWrap .faq_list>li .question .icon_q, #boardWrap .faq_list>li .faq_list_con .icon_a { width:28px; height:28px; } #boardWrap .faq_list>li .question .icon_q::before, #boardWrap .faq_list>li .faq_list_con .icon_a::before { width:26px; height:26px; line-height:26px; } } /* 비밀번호 확인 */ .secretCheck { position:fixed; left:0; top:0; width:100%; height:100vh; background-color:rgba(0,0,0,0.8); z-index:999;} .secretCheck .sc_infoBox { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:94%; max-width:700px; background-color:var(--color-board-white); border:1px solid var(--color-board-white); box-shadow:3px 3px 5px 0px rgba(0,0,0,0.2); text-align:center; padding:3em} .secretCheck .sc_infoBox dl dt { font-size:1.75rem; color:var(--color-board-base); font-weight:500; margin-bottom:10px; line-height:1} .secretCheck .sc_infoBox dl dd { font-size:1.03rem;} .secretCheck .sc_infoBox .scform { width:90%; margin:2em auto 0; padding:2em; border-top:2px solid var(--color-board-base); border-bottom:1px solid var(--color-board-black-opcity1); display:flex; align-items:center; justify-content:center;} .secretCheck .sc_infoBox .scform label { font-weight:400; margin-right:20px;} .secretCheck .sc_infoBox .scform span input { border:1px solid var(--color-board-base2);} .secretCheck .sc_infoBox .scform span button { font-size:16px;} .secretCheck .sc_close { position:absolute; right:20px; top:20px; width:35px; height:35px; display:flex; align-items:center; justify-content:center;} .secretCheck .sc_close::after { position:absolute; left:50%; top:50%; content:''; width:25px; height:1px; background:var(--color-board-base); transform:translate(-50%,-50%) rotate(45deg);} .secretCheck .sc_close::before { position:absolute; left:50%; top:50%; content:''; width:25px; height:1px; background:var(--color-board-base); transform:translate(-50%,-50%) rotate(-45deg);} @media all and (max-width:668px){ .secretCheck .sc_infoBox dl dt { font-size:1.5rem } .secretCheck .sc_infoBox .scform { width:100%; padding:2em 1em; flex-wrap:wrap } } @media all and (max-width:568px){ .secretCheck .sc_infoBox { padding:2em; } .secretCheck .sc_infoBox .scform { gap:4px; } .secretCheck .sc_infoBox .scform * { width:100%; } .secretCheck .sc_infoBox .scform label { display:none; } } /* 글쓰기 */ #boardWrap .write_list { display:flex; flex-flow:row wrap; width:100%; border-top:2px solid var(--color-board-black); box-sizing:border-box; font-size:1rem; } #boardWrap .write_list>li { display:flex; width:100%; align-items:center; flex-wrap:wrap; gap:10px; padding:.75rem; border-bottom:1px solid var(--color-board-black-opcity1);} #boardWrap .write_list>li.w50 { width:50%; } #boardWrap .write_list>li.w33 { width:33.33%; } #boardWrap .write_list li { position:relative; } #boardWrap .write_list>li>.tit { width:10.5em; font-weight:500; color:var(--color-board-base); } #boardWrap .write_list>li>.flex { width:calc(100% - 10.5em - 10px); } #boardWrap .write_list>li>.flex:has(.file_list), #boardWrap .write_list>li>.flex:has(.regist_file) { position:relative; } #boardWrap .write_list>li>.flex:has(.file_list) .file_list, #boardWrap .write_list>li>.flex:has(.regist_file) .regist_file { padding-right:40px; } #boardWrap .write_list>li>.flex:has(.regist_file) .file_list { padding-right:0; } #boardWrap .write_list>li>.flex br { display:none; } #boardWrap .write_list>li>.flex:has(.file_list)>.btn_add, #boardWrap .write_list>li>.flex:has(.regist_file)>.btn_add { top:2.5px; right:0; margin:0; } #boardWrap .write_list>li>.flex, #boardWrap .write_list .radio_list, #boardWrap .write_list .basics_list, #boardWrap .write_list .add_list, #boardWrap .write_list .check_list, #boardWrap .write_list .file_list, #boardWrap .write_list .regist_file, #boardWrap .write_list .regist_file>li { display:flex; align-items:center; flex-wrap:wrap;} #boardWrap .write_list .radio_list, #boardWrap .write_list .basics_list, #boardWrap .write_list .add_list, #boardWrap .write_list .check_list, #boardWrap .write_list .file_list { width:100%; } #boardWrap .write_list>li>.flex, #boardWrap .write_list .basics_list, #boardWrap .write_list .add_list, #boardWrap .write_list .file_list { gap:5px; } #boardWrap .write_list .regist_file { gap:5px 1.5em; max-width:calc(100% - 55px); } #boardWrap .write_list .regist_file>li { gap:5px 10px } #boardWrap .write_list .radio_list, #boardWrap .write_list .check_list { gap:5px 2em } #boardWrap .write_list .radio_list>li, #boardWrap .write_list .check_list>li { display:flex; align-items:center; } #boardWrap .write_list .check_list>li>.check_label1 { line-height:22px; } #boardWrap .write_list>li .icon-calendar { position:absolute; width:40px; height:100%; right:0; top:0; } #boardWrap .write_list>li .small_txt { width:100%; font-size:.9rem; } #boardWrap .write_list>li input, #boardWrap .write_list>li select, #boardWrap .write_list>li textarea { border-radius:3px;} #boardWrap .write_list>li .title, #boardWrap .write_list>li .flex_auto { flex:auto; } #boardWrap .write_list>li.editer { padding:0; } #boardWrap .write_list>li.editer>.wr_cont { width:100%; border-bottom:0; margin-top:0; } #boardWrap .wr_cont { margin-top:1em; padding:.75rem; border-bottom:1px solid var(--color-board-black-opcity1); } #NamoSE_Ifr__postCn, #boardWrap .write_list iframe { z-index:1 !important; } #NamoSE_Ifr_Plugin__postCn { z-index:2 !important; } .NamoSE_shadow input[type="text"], .NamoSE_shadow select, .NamoSE_shadow input[type="email"], .NamoSE_shadow input[type="tel"], .NamoSE_shadow input[type="password"] { min-height:inherit !important; } .ce-ui-dialog, .namoCE-postCn, .sp-container, .namoCE2-postCn, .ce-ui-quickmenu, .ui-datepicker, #NamoSE_Ifr_StepPlugin__postCn { z-index:2 !important; } /* 배경 있는경우 */ #boardWrap .write_list.tit_bg>li { position:relative; padding-left:calc(10.5em + 10px); min-height:3rem; } #boardWrap .write_list.tit_bg>li>.tit { position:absolute; width:10.5em; height:100%; background:var(--color-board-gray3); left:0; top:0; padding:.75rem; display:flex; align-items:center; gap:.2em; vertical-align:top} #boardWrap .write_list.tit_bg>li>.flex { width:100%; } /* 파일첨부 */ #boardWrap .write_list .file_list .upload_name { height:40px; padding:0 .5rem; } #boardWrap .btn_del, #boardWrap .btn_add { height:35px; width:35px; border:1px solid var(--color-board-black-opcity1); border-radius:3px; display:flex; align-items:center; justify-content:center;} #boardWrap .btn_add { position:absolute; top:.7rem; right:.5rem; font-size:1.5rem; line-height:1; background:var(--color-board-white) } #boardWrap .btn_add>i { line-height: 1; display:inline-block; vertical-align:middle; margin-top:-3px; } #boardWrap .btn_del { background:#e5e5e5 url(/resource/common/images/bbs/icon_del.svg) no-repeat 50% 45% / 50% auto; border-color:#e5e5e5 } /* Input radio */ .input_file { position:absolute; width:1px !important; height:1px !important; opacity:0; } .file_label { position:relative; } .file_label::before { position:relative; content:'파일찾기'; display:inline-block; height:40px; margin-left:3px; padding:0 1em; color:var(--color-board-white); line-height:40px; vertical-align:middle; background:#1c1d34; cursor:pointer; border-radius:3px; font-size:16px; color:var(--color-board-white); } .input_file:focus + .file_label::before { outline-offset:2px; outline:2px dotted var(--color-board-base)} /* 설명문구 */ #boardWrap .guideline { width:100%; display:flex; flex-flow:column; } #boardWrap .guideline>li { font-size:.95em; } /* 카테고리 여러개인 경우 */ #boardWrap .cate_click_list, #boardWrap .cate_click_list>li { display:flex; flex-flow:column; } #boardWrap .cate_click_list { gap:10px; } #boardWrap .cate_click_list>li>strong { font-weight:bold; color:var(--color-board-base); } #boardWrap .input_list_tit, #boardWrap .input_list_li { width:100%; display:flex; gap:10px } #boardWrap .input_list_tit>li, #boardWrap .input_list_li>li { flex:auto; } #boardWrap .input_list_tit.col03>li, #boardWrap .input_list_li.col03>li { flex:0 1 calc((100% - 20px) / 3); width:calc((100% - 20px) / 3) } #boardWrap .input_list_tit, #boardWrap .input_list_li>li>label { font-weight:bold; color:var(--color-board-base) } #boardWrap .input_list_li>li>label { display:none; } /* 버튼 상단 노출 */ #boardWrap .btnArea.top_btn { display:flex; flex-wrap:wrap; justify-content:end; margin-bottom:10px; padding:15px; border-radius:15px; background:var(--color-board-black-opcity05); } #boardWrap .btnArea.top_btn .radio_dl { display:flex; align-items:center; flex-flow:wrap; gap:10px 1em; margin-right:2em; line-height:1 } #boardWrap .btnArea.top_btn .radio_dl>dt { font-weight:bold; } #boardWrap .btnArea.top_btn .btn { height:35px; border-radius:25px; } /* 캡차 */ #boardWrap .write_list>li>.flex .captcha_refresh { display:flex; align-items:center; padding:0 15px; font-size:.9rem; background:var(--color-board-base); border-radius:25px; color:var(--color-board-white); height:32px; line-height:1; gap:0 5px; } #boardWrap .write_list>li>.flex .captcha_refresh .icon { display:flex; position:relative; width:13px; height:13px; } #boardWrap .write_list>li>.flex .captcha_refresh .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; background:url(/resource/common/images/bbs/icon_reset.svg) no-repeat 50% 50% / contain; content:''; filter:invert(1); margin-top:-.5px; } /* 공공누리 */ #boardWrap .write_list>li .radio_list.opentype { gap:10px; align-items:stretch; height:100%;} #boardWrap .write_list>li .radio_list.opentype>li { width:calc((100% - 20px) / 3); gap:10px 1em; flex-flow:column; text-align:center; background:var(--color-board-gray3); border-radius:5px; padding:1em } #boardWrap .write_list>li .radio_list.opentype>li .radio_label { color:var(--color-board-base); font-weight:700 } #boardWrap .write_list>li .radio_list.opentype>li .info_text { opacity:.84; font-size:.95rem; line-height:1.2 } #boardWrap .write_list>li .radio_list.opentype>li img { height:50px; } @media all and (max-width:968px){ #boardWrap .write_list>li .radio_list.opentype>li { width:calc((100% - 10px) / 2); } } @media all and (max-width:468px){ #boardWrap .write_list>li .radio_list.opentype>li { width:100%; flex-flow:row wrap; gap:5px 10px; padding:10px; justify-content:space-between;} #boardWrap .write_list>li .radio_list.opentype>li img { height:32px; order:2 } #boardWrap .write_list>li .radio_list.opentype>li .info_text { width:100%; text-align:left; order:3 } #boardWrap .write_list>li .radio_list.opentype>li .radio_label { font-size:.92rem; order:1 } } @media all and (max-width:868px){ #boardWrap .write_list>li.w50 { width:100%; } #boardWrap .write_list>li.w33 { width:100%; } #boardWrap .write_list>li>.tit { width:9em; } #boardWrap .write_list>li>.flex { width:calc(100% - 9em - 10px); } } @media all and (max-width:668px){ #boardWrap .write_list>li .title, #boardWrap .write_list>li .flex_auto { width:100%; } #boardWrap .write_list>li>.tit { width:100%;} #boardWrap .write_list>li>.flex { width:100%; } #boardWrap .btn_del, #boardWrap .btn_add { height:35px; width:35px; } #boardWrap .btn_add { font-size:1.25rem; top:.4rem } #boardWrap .write_list .regist_file { max-width:100%; } .file_label::before { height:35px; padding:0 .75em; line-height:35px; font-size:14px;} .write_list .w8em { width:5em; } /* 배경 있는경우 */ #boardWrap .write_list.tit_bg>li { padding:0} #boardWrap .write_list.tit_bg>li>.tit { position:initial; width:100%; height:auto; } #boardWrap .write_list.tit_bg>li>.flex { width:100%; padding:0 .75rem .75rem .75rem } #boardWrap .write_list>li>.flex:has(.file_list), #boardWrap .write_list>li>.flex:has(.regist_file) { position:initial; } #boardWrap .write_list>li>.flex:has(.file_list) .file_list, #boardWrap .write_list>li>.flex:has(.regist_file) .regist_file { padding-right:0; } #boardWrap .write_list>li>.flex:has(.file_list)>.btn_add, #boardWrap .write_list>li>.flex:has(.regist_file)>.btn_add { top:7px; right:.7rem; } } @media all and (max-width:568px){ /* 카테고리 여러개인 경우 */ #boardWrap .input_list_li { flex-wrap: wrap; } #boardWrap .input_list_li+.input_list_li { margin-top:10px; padding-top:10px; border-top:1px dashed var(--color-board-black-opcity2); } #boardWrap .cate_click_list>li { display:flex; flex-flow:column; } #boardWrap .input_list_tit.col03>li, #boardWrap .input_list_li.col03>li { flex:100%; width:100% } #boardWrap .input_list_tit { display:none; } #boardWrap .input_list_li>li>label { display:block; } } @media all and (max-width:468px){ /* 버튼 상단 노출 */ #boardWrap .btnArea.top_btn { justify-content:center; gap:10px 3px; } #boardWrap .btnArea.top_btn .radio_dl { margin-right:1em; gap:10px .5em; } #boardWrap .btnArea.top_btn .btn { height:30px; padding:0 15px; } } /* 상세페이지 */ #boardWrap .view_table { width:100%; border-top:2px solid var(--color-board-black); box-sizing:border-box; border-bottom:1px solid var(--color-board-black-opcity1); } /* 제목 */ #boardWrap .view_table .title { padding:1.5em 1.5em 0; text-align:center; } #boardWrap .view_table .title .cate { display:inline-block; border-radius:2em; line-height:1; padding:7px 15px; font-size:.95rem; border:1px solid var(--color-board-black-opcity1); color:#2878D3 } #boardWrap .view_table .title strong { display:block; font-size:1.55rem; color:var(--color-board-base); font-weight:500; line-height:1.6; margin-top:.25rem } /* 정보 */ #boardWrap .view_table .info_list { display:flex; align-items:center; justify-content:center; gap:2px 0; flex-wrap:wrap; padding:1rem; } #boardWrap .view_table .info_list li { display:flex; align-items:center; gap:0 10px; position:relative; margin:0 1em } #boardWrap .view_table .info_list li+li:before { position:absolute; left:-1.15em; top:calc(50% - 1px); transform:translateY(-50%); width:4px; height:4px; border-radius:100%; background:rgba(0,0,0,.7); content:''; } #boardWrap .view_table .info_list li strong { font-weight:500; color:var(--color-board-base); } #boardWrap .view_table .info_list li span { word-break: break-all; line-height:1.3; } /* 내용 */ #boardWrap .view_table .view_con { padding:2em 0; font-weight:inherit; font-size:initial; border-top:1px solid var(--color-board-black-opcity1);} #boardWrap .view_table .view_con * { font-size:revert; font-weight:revert; list-style:revert; font-style:revert; } #boardWrap .view_table .view_con b, #boardWrap .view_table .view_con strong { font-weight:bold; } #boardWrap .view_table .view_con i, #boardWrap .view_table .view_con em { font-style:italic; } #boardWrap .view_table .view_con ol, #boardWrap .view_table .view_con ol>li { list-style:decimal; } #boardWrap .view_table .view_con ol, #boardWrap .view_table .view_con ul { padding:revert; } #boardWrap .view_table .view_con img, #boardWrap .view_table .view_con p.img { margin-bottom:1.5em; } #boardWrap .view_table .view_con img:last-of-type, #boardWrap .view_table .view_con p.img:last-of-type { margin-bottom: 0; /* img 타입 중 마지막만 마진 제거 */} #boardWrap .view_table .view_con .img { position:relative; text-align:center;} #boardWrap .view_table .view_con .img span { position:absolute; left:50%; bottom:1em; background:rgba(255,255,255,.85); line-height:1.2; padding:10px 20px; border-radius:20px; z-index:1; transform:translateX(-50%);} /* 동영상 출력 */ #boardWrap .view_table .view_con .video_wrap { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; margin-bottom:1.5em } #boardWrap .view_table .view_con .video_wrap .video_box, #boardWrap .view_table .view_con .video_wrap .video_subtitles { width:calc((100% - 1rem) / 2); position:relative; overflow:hidden; height:0; padding-top:28.125%; } #boardWrap .view_table .view_con .video_wrap .video_box iframe, #boardWrap .view_table .view_con .video_wrap .video_subtitles .video_subtitles_text { position:absolute; width:100%; height:100%; left:0; top:0; } #boardWrap .view_table .view_con .video_wrap .video_box iframe { border:none; } #boardWrap .view_table .view_con .video_wrap .video_subtitles { background:var(--color-board-light-point); } #boardWrap .view_table .view_con .video_wrap .video_subtitles .video_subtitles_text { padding:2rem; font-size:1.03rem; line-height:1.6; overflow-y:auto } #boardWrap .view_table .view_con .video_wrap .video_subtitles strong { font-weight:700; font-size:1.167rem; } #boardWrap .view_table .view_con .video_wrap.vertical { flex-flow:column; } #boardWrap .view_table .view_con .video_wrap.vertical .video_box, #boardWrap .view_table .view_con .video_wrap.vertical .video_subtitles { width:100%; } #boardWrap .view_table .view_con .video_wrap.vertical .video_box, #boardWrap .view_table .view_con .video_wrap.vertical .video_subtitles { padding-top:56.25%; } @media all and (max-width:1024px){ #boardWrap .view_table .view_con .video_wrap .video_box, #boardWrap .view_table .view_con .video_wrap .video_subtitles { width:100%; padding-top:56.25%; } #boardWrap .view_table .view_con .video_wrap .video_subtitles .video_subtitles_text { padding:1.25rem; font-size:.95rem; line-height:1.5 } #boardWrap .view_table .view_con .video_wrap .video_subtitles strong { font-size:1.067rem; } } /* 추가 내용 출력 */ #boardWrap .view_table .view_basics_list { display:flex; flex-wrap:wrap; align-items:stretch; } #boardWrap .view_table .view_basics_list.border_bottom { border-bottom:1px solid var(--color-board-black-opcity1); } #boardWrap .view_table .view_basics_list>li { position:relative; width:100%; display:flex; gap:10px; align-items:center; min-height:3rem; border-top:1px solid var(--color-board-black-opcity1);} #boardWrap .view_table .view_basics_list>li.w50 { width:50%; } #boardWrap .view_table .view_basics_list>li.w33 { width:33.333%; } #boardWrap .view_table .view_basics_list>li>.tit { width:10.5em; height:100%; padding:.75rem; background:var(--color-board-gray3); font-weight:500; color:var(--color-board-base); display:flex; align-items:center; justify-content:center; text-align:center } #boardWrap .view_table .view_basics_list>li>p, #boardWrap .view_table .view_basics_list>li>div.flex { width:calc(100% - 10.5em - 10px); padding:.75rem; } #boardWrap .view_table .view_basics_list>li>div.flex { display:flex; align-items:center; flex-wrap:wrap; gap:5px; } #boardWrap .view_table .view_basics_list>li input { border-radius:3px; } /* 첨부파일 */ #boardWrap .view_table .file_box { display:flex; align-items:center; padding:1rem; border-top:1px solid var(--color-board-black-opcity1); gap:10px; } #boardWrap .view_table .file_box .tit { width:10.5em; font-weight:500; color:var(--color-board-base); font-size:1rem } #boardWrap .view_table .file_box .file_list { display:flex; flex-flow:column; width:calc(100% - 10.5em - 10px); gap:5px; font-size:1rem;} #boardWrap .view_table .file_box .file_list>li { position:relative; padding-left:10px; display:flex; flex-wrap:wrap; gap:5px; } #boardWrap .view_table .file_box .file_list>li::before { position:absolute; width:4px; height:4px; border-radius:100%; left:0; top:11px; content:''; background:#999; line-height:1.1; } #boardWrap .view_table .file_box .file_list>li>a { display:flex; flex-wrap:wrap; align-items:center; position:relative; gap:0px 5px;word-break: break-all; } #boardWrap .view_table .file_box .file_list>li>a .file_name { word-wrap:break-word; word-break:break-all; } #boardWrap .view_table .file_box .file_list>li>a .small { font-size:.95em; color:var(--color-board-black-opcity74); font-weight:300 } #boardWrap .view_table .file_box .file_list>li .down { display:flex; width:28px; height:28px; position:relative; } #boardWrap .view_table .file_box .file_list>li .down::before { position:absolute; width:16px; height:14.3158px; left:50%; top:50%; content:''; background:url(/resource/common/images/bbs/icon_file.svg) no-repeat 50% 50% / auto; transform:translate(-50%,-50%);} #boardWrap .view_table .file_box .file_list>li .btn_view { display:flex; height:28px; align-items:center; justify-content:center; border-radius:15px; line-height:28px; padding:0 15px; background:#014099; font-size:.8rem; color:var(--color-board-white); gap:0 5px} #boardWrap .view_table .file_box .file_list>li .btn_view .icon { display:flex; width:13px; height:13px; position:relative; margin-top:-1px } #boardWrap .view_table .file_box .file_list>li .btn_view .icon::before { position:absolute; width:100%; height:100%; content:''; left:0; top:0; background:url(/resource/common/images/bbs/icon_search.svg) no-repeat 50% 50% / auto; filter: invert(1); } #boardWrap .view_table .file_box .file_list>li .btn_view:focus { outline-offset:2px; outline:2px dotted var(--color-board-base) !important } #boardWrap .view_table .file_box .file_list>li>a::before { position:absolute; width:0; height:1px; background:var(--color-board-base); content:''; left:0; bottom:0; transition:all ease 0.3s } #boardWrap .view_table .file_box .file_list>li>a:hover::before, #boardWrap .view_table .file_box .file_list>li>a:focus::before { width:100%; } /* 첨부파일 */ #boardWrap .view_table .view_basics_list .file_list { display:flex; flex-flow:column; width:100%; gap:5px; font-size:1rem;} #boardWrap .view_table .view_basics_list .file_list>li { position:relative; padding-left:10px; display:flex; flex-wrap:wrap; gap:5px; } #boardWrap .view_table .view_basics_list .file_list>li::before { position:absolute; width:4px; height:4px; border-radius:100%; left:0; top:11px; content:''; background:#999; line-height:1.1; } #boardWrap .view_table .view_basics_list .file_list>li>a { display:flex; flex-wrap:wrap; align-items:center; position:relative; gap:0px 5px;word-break: break-all; } #boardWrap .view_table .view_basics_list .file_list>li>a .file_name { word-wrap:break-word; word-break:break-all; } #boardWrap .view_table .view_basics_list .file_list>li>a .small { font-size:.95em; color:var(--color-board-black-opcity74); font-weight:300 } #boardWrap .view_table .view_basics_list .file_list>li .down { display:flex; width:28px; height:28px; position:relative; } #boardWrap .view_table .view_basics_list .file_list>li .down::before { position:absolute; width:16px; height:14.3158px; left:50%; top:50%; content:''; background:url(/resource/common/images/bbs/icon_file.svg) no-repeat 50% 50% / auto; transform:translate(-50%,-50%);} #boardWrap .view_table .view_basics_list .file_list>li .btn_view { display:flex; height:28px; align-items:center; justify-content:center; border-radius:15px; line-height:1; padding:0 15px; background:#014099; font-size:.8rem; color:var(--color-board-white); gap:0 5px} #boardWrap .view_table .view_basics_list .file_list>li .btn_view .icon { display:flex; width:13px; height:13px; position:relative; margin-top:-1px } #boardWrap .view_table .view_basics_list .file_list>li .btn_view .icon::before { position:absolute; width:100%; height:100%; content:''; left:0; top:0; background:url(/resource/common/images/bbs/icon_search.svg) no-repeat 50% 50% / auto; filter: invert(1); } #boardWrap .view_table .view_basics_list .file_list>li .btn_view:focus { outline-offset:2px; outline:2px dotted var(--color-board-base) !important } #boardWrap .view_table .view_basics_list .file_list>li>a::before { position:absolute; width:0; height:1px; background:var(--color-board-base); content:''; left:0; bottom:0; transition:all ease 0.3s } #boardWrap .view_table .view_basics_list .file_list>li>a:hover::before, #boardWrap .view_table .view_basics_list .file_list>li>a:focus::before { width:100%; } /* 답변 */ #boardWrap .view_table .answer-group { padding:1.5em; background:var(--color-board-gray1); border-top:1px solid var(--color-board-base) } #boardWrap .view_table .answer-group .asrTit { border-bottom:1px dashed var(--color-board-base2); display:flex; align-items:center; justify-content:space-between; padding-bottom:1em; flex-wrap:wrap; } #boardWrap .view_table .answer-group .asrTit strong { font-size:1.167rem; font-weight:500; color:var(--color-board-base); } #boardWrap .view_table .answer-group .asrTit .icon-reply { display:inline-block; vertical-align:middle; width:17px; height:17px; margin-right:10px; margin-top:-2px; background:url(/resource/common/images/bbs/icon_answer.svg) no-repeat 50% 50% / auto auto; } #boardWrap .view_table .answer-group .asrTit .answer-info { display:flex; align-items:center; flex-wrap:wrap;} #boardWrap .view_table .answer-group .asrTit .answer-info>li { position:relative; display:flex; align-items:center; gap:0 4px;} #boardWrap .view_table .answer-group .asrTit .answer-info>li+li { margin-left:1em; padding-left:1em; } #boardWrap .view_table .answer-group .asrTit .answer-info>li+li:before { position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:100%; background:rgba(0,0,0,.7); content:''; } #boardWrap .view_table .answer-group .answer-list { padding:1em; background:var(--color-board-white); } /* 이전 다음글 */ #boardWrap .view_footer { display:flex; flex-wrap:wrap; margin-top:2em; border-top:1px solid var(--color-board-base); border-bottom:1px solid var(--color-board-black-opcity1); padding:2em; } #boardWrap .view_footer>li { width:50%; display:flex; align-items:center; justify-content:flex-start; font-size:1.03rem } #boardWrap .view_footer>li:last-child { justify-content:flex-end; } #boardWrap .view_footer>li a { width:calc(100% - 7em); display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #boardWrap .view_footer>li span { width:6em; color:var(--color-board-base); font-weight:500 } #boardWrap .view_footer>li:last-child a { text-align:right; } #boardWrap .view_footer>li:last-child span { text-align:right; } #boardWrap .view_footer>li .prev::before { transform:rotate(-135deg); margin-right:10px; display:inline-block; width:9px; height:9px; border-style:solid; border-width:1px 1px 0 0; border-color:#999; content:''; vertical-align:middle; margin-top:-2px; } #boardWrap .view_footer>li .next::after { transform:rotate(45deg); margin-left:10px; display:inline-block; width:9px; height:9px; border-style:solid; border-width:1px 1px 0 0; border-color:#999; content:''; vertical-align:middle; margin-top:-2px; } /* 댓글 */ .comment-group { padding:2em; background:var(--color-board-gray1); } .comment-group h5 { font-size:17px; font-weight:300; color:var(--color-board-base5); padding:20px 0 7px 0;} .comment-group h5 span { color:var(--color-board-point-hover); font-weight:400;} .comment-group .cbox_guide { position:relative; width:100%; display:flex; flex-wrap:wrap; align-items:center;} .comment-group .cbox_guide textarea { width:calc(100% - 8.2rem); height:100px;} .comment-group .cbox_guide button { width:8rem; height:100px !important; margin:0 !important; } .comment-group .cbox_guide .cm_txt { width:100%; margin-top:5px; display:block;} .comment-group .cbox_list ul li { position:relative; border-bottom:1px solid var(--color-board-line); padding-top:15px;} .comment-group .cbox_list ul li dl dt { color:var(--color-board-base5); font-weight:400; display:block;} .comment-group .cbox_list ul li dl dt span { font-size:14px; color:var(--color-board-base4); font-weight:300; letter-spacing:0; margin-left:10px;} .comment-group .cbox_list .cm_write { padding-bottom:15px;} .comment-group .cbox_list .cm_write a, .comment-group .cbox_list .cm_write_re a, .comment-group .cbox_list .cm_write_re_re a, .comment-group .cbox_list .cm_write_re_re_re a, .answer-group .answer-list a { padding:2px 10px; margin-top:10px; font-size:14px; color:var(--color-board-base5); border-radius:.2em; background-color:var(--color-board-gray2); border:1px solid #d4d4d4; display:inline-block;} .comment-group .cbox_list .cm_write_re { border-top:1px dashed var(--color-board-line); padding:15px 0 15px 40px; background:url(/resource/common/images/bbs/icon_comment.svg) no-repeat 10px 16px / 18px auto;} .comment-group .cbox_list .cm_write_re_re { border-top:1px dashed var(--color-board-line); padding:15px 0 15px 70px; background:url(/resource/common/images/bbs/icon_comment.svg) no-repeat 40px 16px / 18px auto;} .comment-group .cbox_list .cm_write_re_re_re { border-top:1px dashed var(--color-board-line); padding:15px 0 15px 100px; background:url(/resource/common/images/bbs/icon_comment.svg) no-repeat 70px 16px / 18px auto;} .comment-group .cbox_guide_reply { position:relative; width:100%; display:flex; flex-wrap:wrap; padding-bottom:15px} .comment-group .cbox_guide_reply textarea { width:calc(100% - 8.2rem); height:60px;} .comment-group .cbox_guide_reply button { width:8rem; border-left:0; margin:0 !important;} /* view st3 */ .view_st3 { position:relative; width:100%;} .view_st3 .st3_tit { font-size:2rem; font-weight:500; color:var(--color-board-base); line-height:1.5; margin-bottom:20px;} .view_st3 .st3_tit em { font-size:18px; color:var(--color-board-point-hover); font-weight:400; display:block;} .view_st3 .info_list { display:flex; flex-wrap:wrap; gap:5px 30px; } .view_st3 .info_list li span { position:relative; color:var(--color-board-base5); padding-right:10px; margin-right:5px;} .view_st3 .info_list li span i { margin-right:5px;} .view_st3 .info_list li span::after { content:''; position:absolute; right:0; top:3px; width:1px; height:13px; background-color:var(--color-board-line);} .view_st3 .info_list li:last-child { margin-right:0;} .view_st3 .info_list li:last-child a { text-decoration:underline;} .view_st3 .info_list li:last-child span::after { display:none;} .view_st3 .view_st3_con { margin:3% 0; padding:2em 0; border-top:1px solid var(--color-board-black-opcity1); border-bottom:1px solid var(--color-board-black-opcity1); } .view_st3 .view_st3_con img { max-width:100%;} /* 개인정보 활용동의 */ #boardWrap .view_table .agreement_box { display:flex; flex-flow:column; padding:1.5em; border-radius:8px; background:var(--color-board-gray3); margin-top:1em; } #boardWrap .view_table .agreement_box .tit { font-size:1.03rem; font-weight:700; } #boardWrap .view_table .agreement_box .agreement_text { display:flex; width:100%; border:1px solid var(--color-board-line); background:var(--color-board-white); min-height:8em; border-radius:8px; padding:1em} #boardWrap .view_table .agreement_box .agreement_radio_list { display:flex; flex-wrap:wrap; gap:10px 1em; margin-top:.75em } #boardWrap .view_table:has(.agreement_box) { border-bottom:none; } #boardWrap .view_table [class^="file_box"]:not(:has(~ [class^="file_box"])) { border-bottom:1px solid var(--color-board-black-opcity1); } /* 문화관광용 */ .tour_view .hitNum { display:flex; justify-content: space-between; flex-wrap:wrap; padding:20px 30px; background:#F2F4F6; text-align:right; border-radius:5px; margin-bottom:.75em; } .tour_view .hitNum.end { justify-content:end; } .tour_view .hitNum>span { display:flex; align-items:center; } .tour_view .hitNum>span>i:first-child { font-weight:bold; color:var(--color-board-base); margin-left:0; } .tour_view .hitNum>span>i { display:flex; align-items:center; font-weight:400; color:rgba(0,0,0,.8); margin-left:10px; } .tour_view .hitNum>.view>i:first-child::before { display:inline-block; vertical-align:middle; content:''; width:16px; height:16px; margin-right:3px; margin-top:-3px; background-position:left center; background-repeat:no-repeat; background-size:16px; background-image:url(/resource/common/images/bbs/icon_view.svg); filter:grayscale(1);} .tour_view .hitNum>.asst>i:first-child::before { display:inline-block; vertical-align:middle; content:''; width:16px; height:16px; margin-right:3px; margin-top:-6px; background-position:left center; background-repeat:no-repeat; background-size:16px; background-image:url(/resource/common/images/bbs/icon_asst.svg); opacity:.7;} .tour_view .tour_view_top { display:flex; flex-wrap:wrap; justify-content:space-between; border:1px solid #e3e3e3; padding:2em 3em; border-radius:10px; } .tour_view .tour_view_top .area_img { width:calc((100% - 80px) / 2.5); position:relative; } .tour_view .tour_view_top .swiper-slide { width:100%; height:0; padding-top:66.666%; overflow:hidden; border-radius:10px; } .tour_view .tour_view_top .swiper-slide img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; max-height:100%; transform:translate(-50%,-50%) scale(1); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform: translate(-50%,-50%); object-fit:cover; -o-object-fit:cover; } .tour_view .tour_view_top .area_img .swiper_bottom { position:relative; display:flex; margin-top:-25px; align-items:center; justify-content:center; z-index:3; } .tour_view .tour_view_top .area_img .control { display:flex; height:40px; align-items:center; justify-content:center; border-radius:50px; background:var(--color-board-white); border:1px solid var(--color-board-black-opcity1); padding:0 5px;} .tour_view .tour_view_top .swiper_bottom button { flex:none; position:relative; padding:0px; } .tour_view .tour_view_top .swiper_bottom button:before { display:block; position:absolute; top:50%; left:50%; content:''; } .tour_view .tour_view_top .swiper_bottom .swiper_prev, .tour_view .tour_view_top .swiper_bottom .swiper_next { width:35px; height:35px; } .tour_view .tour_view_top .swiper_bottom .swiper_prev:before { width:10px; height:10px; border-style:solid; border-width:0 0 1px 1px; border-color:var(--color-board-base); transform:translate(-35%, -50%) rotate(45deg); background-image:none } .tour_view .tour_view_top .swiper_bottom .swiper_next:before { width:10px; height:10px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-board-base); transform:translate(-65%, -50%) rotate(45deg); background-image:none } .tour_view .tour_view_top .swiper_bottom .swiper_page { margin-right:0; line-height:1 } .tour_view .tour_view_top .swiper_bottom .swiper-pagination-current { font-weight:700; color:var(--color-board-base)} .tour_view .tour_view_top .swiper_bottom .swiper-pagination-total { opacity:.54; color:var(--color-board-base)} .tour_view .tour_view_top .area_text { width:calc((100%) / 1.7); } .tour_view .tour_view_top .area_text .st3_tit { font-size:1.75rem; font-weight:bold; color:var(--color-board-base); line-height:1.4 } .tour_view .tour_view_top .area_text .info_list { margin-top:1.5em; padding-top:1.5em; border-top:1px solid var(--color-board-black-opcity1); } .tour_view .tour_view_top .area_text .info_list>li { display:flex; flex-wrap:wrap; align-items:flex-start; font-size:1.03rem; font-weight:400; color:#333 } .tour_view .tour_view_top .area_text .info_list>li+li { margin-top:15px; } .tour_view .tour_view_top .area_text .info_list>li>strong { position:relative; padding-left:12px; min-width:6em; margin-right:1em; font-weight:bold; color:var(--color-board-base); } .tour_view .tour_view_top .area_text .info_list>li>strong::before { position:absolute; width:5px; height:5px; background:var(--color-board-point-hover); content:''; left:0; top:9px; border-radius:100%; } .tour_view .tour_view_top .area_text .info_list>li>span { width:calc(100% - 7em)} .tour_view .tour_view_top .area_text .info_list>li>.file_list { width:calc(100% - 7em); display:flex; flex-wrap:wrap; gap:5px 1em; } .tour_view .tour_view_top .area_text .info_list>li>.file_list>li { position:relative; display:flex; flex-wrap:wrap; gap:5px; } .tour_view .tour_view_top .area_text .info_list>li>.file_list>li>a { display:flex; flex-wrap:wrap; word-break:break-all; position:relative; gap:0 5px; align-items:center; } .tour_view .tour_view_top .area_text .info_list>li>.file_list>li>a>.down { display:flex; width:28px; height:28px; position:relative; } .tour_view .tour_view_top .area_text .info_list>li>.file_list>li>a>.down::before { position:absolute; width:16px; height:14.3158px; left:50%; top:50%; content:''; background:url(/resource/common/images/bbs/icon_file.svg) no-repeat 50% 50% / auto; transform:translate(-50%,-50%); } .tour_view .tour_view_top .area_text .info_list>li>.file_list>li .btn_view { display:flex; height:28px; align-items:center; justify-content:center; border-radius:50px; line-height:1; padding:0 15px; background:#014099; font-size:.8rem; color:var(--color-board-white); gap:0 5px; } .tour_view .tour_view_top .area_text .info_list>li>.file_list>li .btn_view .icon { display:flex; width:13px; height:13px; position:relative; margin-top:-1px; } .tour_view .tour_view_top .area_text .info_list>li>.file_list>li .btn_view .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; filter:invert(1); background:url(/resource/common/images/bbs/icon_search.svg) no-repeat 50% 50% / auto; } .tour_view .tour_view_top .area_text .info_list2 { margin-top:1.5em; padding:1.5em; border-radius:15px; background:#F2F4F6; } .tour_view .tour_view_top .area_text .info_list2>li { display:flex; flex-wrap:wrap; align-items:flex-start; font-size:.95rem; font-weight:400; color:#333 } .tour_view .tour_view_top .area_text .info_list2>li+li { margin-top:10px; } .tour_view .tour_view_top .area_text .info_list2>li>strong { position:relative; padding-left:12px; min-width:5.25em; margin-right:1em; font-weight:bold; color:var(--color-board-base); } .tour_view .tour_view_top .area_text .info_list2>li>strong::before { position:absolute; width:4px; height:4px; background:rgba(0,0,0,.3); content:''; left:0; top:8.5px; border-radius:100%; } .tour_view .tour_view_top .area_text .info_list2>li>span { width:calc(100% - 6.25em)} /* 숙박 버튼 */ .tour_view .tour_view_top .area_text .lodge_btn { display:flex; gap:10px; margin-top:1em } .tour_view .tour_view_top .area_text .lodge_btn>li { width:calc((100% - 10px) / 2); } .tour_view .tour_view_top .area_text .lodge_btn>li>button { display:flex; height:45px; align-items:center; justify-content:center; border-radius:5px; font-size:1.03em } .tour_view .tour_view_top .area_text .lodge_btn>li>.room_btn { width:100%; background:var(--color-board-base); color:var(--color-board-white); } .tour_view .tour_view_top .area_text .lodge_btn>li>.facility_btn { width:100%; background:var(--color-board-point-hover); color:var(--color-board-white); } .tour_view .tour_view_con { margin-top:4em; } .tour_view .tour_view_con .tab_menu { display:flex; flex-wrap:wrap; width:100%; border-bottom:1px solid #e3e3e3; } .tour_view .tour_view_con .tab_menu>li { flex:auto; min-width:calc(100% / 4); } .tour_view .tour_view_con .tab_menu>li>button { display:flex; width:100%; align-items:center; justify-content:center; height:50px; border:1px solid #e3e3e3; border-radius:5px 5px 0 0; border-bottom-width:0; font-size:1.03rem; font-weight:500; box-sizing: border-box; } .tour_view .tour_view_con .tab_menu>li+li>button { border-left-width:0;} .tour_view .tour_view_con .tab_menu>li.active>button { background:var(--color-board-base); color:var(--color-board-white); } .tour_view .tour_view_con .custom_tab { margin-top:30px; display:none; counter-reset:title_dia;} .tour_view .tour_view_con .custom_tab.active { display:block; } .tour_view .tour_view_con h5 { font-size:1.57em; position:relative; padding-top:.5em; font-weight:800; line-height:1.3; margin-top:2em; margin-bottom:.75em; color:var(--color-board-base)} .tour_view .tour_view_con h5::first-letter { color:var(--color-board-point-hover)} .tour_view .tour_view_con h5::after { flex:100%; counter-increment:title_dia; content:counters(title_dia, ".", decimal-leading-zero)""; display:inline-flex; align-items:center; font-size:16px; font-weight:bold; color:var(--color-board-black-opcity2); position:absolute; left:0; top:0; width:50px; height:1px; background-image:linear-gradient(90deg, white 50%, var(--color-board-black-opcity2) 50%);} .tour_view .tour_view_con h6 { font-size: 1.4em; position: relative; font-weight: 700; line-height: 1.3; margin-bottom: .75em; color: var(--color-board-base); padding-left:.5em; } .tour_view .tour_view_con h6:before { content:""; display:block; width:4px; height:.8em; background:var(--color-point); position:absolute; top:.2em; left:0; } .tour_view .tour_view_con .custom_tab .basic_ul>li>b { font-weight:bold; color:var(--color-board-base); margin-right:5px;} .tour_view .tour_view_con .custom_tab table { width:100%;margin-bottom:20px;border-top:solid 3px #0063ba} .tour_view .tour_view_con .custom_tab table th { padding:15px 10px;border-bottom:solid 1px #b5b5b5;border-right:solid 1px #b5b5b5;background:#e8eff6;vertical-align:middle} .tour_view .tour_view_con .custom_tab table tbody td { padding:15px 10px;border-bottom:solid 1px #b5b5b5;border-right:solid 1px #b5b5b5;text-align:center;vertical-align:middle} .tour_view .tour_view_con .custom_tab table.basic_table tbody tr td:nth-last-of-type(1), .tour_view .tour_view_con .custom_tab table.basic_table tbody tr th:nth-last-of-type(1), .tour_view .tour_view_con .custom_tab table.basic_table thead tr th:nth-last-of-type(1) { border-right-width:0} .tour_view .tour_view_con .custom_tab table.basic_table tbody td, .tour_view .tour_view_con .custom_tab table.basic_table thead th { border-bottom:1px solid #ddd; border-right:1px solid #ddd; } .tour_view .tour_view_con .custom_tab table.basic_table tbody th {border-bottom-color:#ddd;} .tour_view .tour_view_con .custom_tab table .last { border-right:none} .tour_view .btn_zoom { position:absolute; right:1em; top:1em; width:45px; height:45px; border-radius:10px; z-index:2; background:rgba(255,255,255,.8) url(/resource/common/images/bbs/tour/icon_zoom.svg) no-repeat 50% 50% / 16px;} /*확대보기*/ .tour_view .modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); width:94%; overflow:hidden; background:var(--color-board-white); border-radius:10px; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); z-index:1000;} .modal_zoom_bg { position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.6); z-index:999; } .tour_view .modal>.btn_close { position:absolute; top:15px; right:15px; width:40px; height:40px; padding:1em; background:var(--color-board-black); border-radius:100%; z-index:20; } .tour_view .modal>.btn_close:before, .tour_view .modal>.btn_close:after { position:absolute; width:20px; height:1px; left:50%; top:50%; background:var(--color-board-white); content:"" } .tour_view .modal>.btn_close:before { transform:translate(-50%,-50%) rotate(45deg); } .tour_view .modal>.btn_close:after { transform:translate(-50%,-50%) rotate(-45deg);} .tour_view .modal.more_view_layer { max-width:1000px; height:auto; max-height:calc(100vh - 100px); } .tour_view .modal .zoom_area { position:relative; } .tour_view .modal .zoom_area .swiper-slide { width:100%; height:0; padding-top:69.23%; overflow:hidden } .tour_view .modal .zoom_area .swiper-slide img { position:absolute; top:50%; left:50%; max-height:100%; min-height:100%; transform:translate(-50%,-50%) scale(1); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform: translate(-50%,-50%); } .tour_view .modal .zoom_area .swiper_bottom { position:absolute; width:fit-content; left:50%; bottom:20px; transform:translateX(-50%); z-index:5; } .tour_view .modal .zoom_area .swiper_bottom::before { position:absolute; width:100%; height:100%; left:0; top:0; background:var(--color-board-white); border-radius:50px; content:''; backdrop-filter:blur(10px); opacity:.9; z-index:-1} .tour_view .modal .zoom_area .swiper_bottom button { width:35px; height:35px; } .tour_view .modal .zoom_area .swiper_bottom .swiper_page { width:fit-content !important; display:flex; align-items:center; justify-content:center; } .tour_view .modal .zoom_area .swiper_bottom .control { display:flex; flex-wrap:wrap; gap:5px; align-items:center; } /* 숙박 모달 입력폼 */ .tour_view .modal.room_app_layer, .tour_view .modal.facility_app_layer { max-width:1000px; padding:3em } .tour_view .modal .app_area { width:100%; } .tour_view .modal .app_area>.tit { display:flex; font-size:1.267em; font-weight:bold; color:var(--color-board-base); margin-bottom:.5em } .tour_view .modal .app_area .write_list { max-height:60vh; overflow-y:auto; overflow-x:hidden; padding-right:7px; } .tour_view .modal .app_area .write_list::-webkit-scrollbar { -webkit-appearance:none; width:5px;} .tour_view .modal .app_area .write_list::-webkit-scrollbar-thumb { background-color:var(--color-board-point-hover); border-radius:5px; } .tour_view .modal .app_area .write_list::-webkit-scrollbar-track { border-radius:5px; background-color:var(--color-board-black-opcity2); } .tour_view .modal .app_area .basics_list { gap:10px 2em !important; } .tour_view .modal .app_area .basics_list>li { display:flex; align-items:center; gap:5px 10px; font-size:.9em;} .tour_view .modal .app_area .basics_list>li>label { font-weight:bold; color:var(--color-board-base); min-width:4em } .tour_view .modal .app_area .basics_list>li input { max-width:8em; } /* 이용가능 시설 */ .tour_view .img_list>li { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; border:1px solid var(--color-board-black-opcity1); border-radius:5px; padding:2em} .tour_view .img_list>li+li { margin-top:.5em; } .tour_view .img_list>li .img { width:17em; height:0; padding-top:13.99%; overflow:hidden; position:relative } .tour_view .img_list>li .img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; object-fit:cover; -o-object-fit:cover; transform:translate(-50%,-50%); } .tour_view .img_list>li .cont { width:calc(100% - 20em); } .tour_view .img_list>li .cont dl { padding:20px 0; border-bottom:1px solid var(--color-board-black-opcity1);} .tour_view .img_list>li .cont dt, .tour_view .img_list>li .cont dd { display:block; width:100%; } .tour_view .img_list>li .cont dt { font-size:1.367em; font-weight:bold; color:var(--color-board-base); line-height:1.4; margin-bottom:10px; } .tour_view .img_list>li .cont dd { margin-top:5px; font-size:1.067rem; font-weight:400; color:rgba(0,0,0,.94); } .tour_view .img_list>li .cont p { margin-top:1em; padding:15px; background:var(--color-board-gray3); border-radius:5px; font-size:1.03rem; color:rgba(0,0,0,.84); } .tour_view .img_list>li .btn_small { position:absolute; right:3em; top:3em; display:flex; gap:5px; } .tour_view .img_list>li .btn_small>li>button { display:block; padding:7px 20px; line-height:1; font-size:.95rem; } .tour_view .img_list>li .btn_small>li>button.del { background:var(--color-board-base); color:var(--color-board-white); border:1px solid var(--color-board-base); } .tour_view .img_list>li .btn_small>li>button.mod { background:var(--color-board-white); border:1px solid var(--color-board-black-opcity2); } .tour_view .img_list>li .cont p.icon_list { display:flex; flex-wrap:wrap; gap:10px; } .tour_view .img_list>li .cont p.icon_list .icon { display:flex; min-width:calc(100% / 19); flex-flow:column; justify-content:center; align-items:center; text-align:center; font-size:.85rem; gap:5px; } .tour_view .img_list>li .cont p.icon_list .icon::before { display:flex; width:40px; height:40px; background-position:center; background-repeat:no-repeat; content:''; } .tour_view .img_list>li .cont p.icon_list .icon1::before { background-image:url(/resource/common/images/bbs/tour/icon_room01.svg); } .tour_view .img_list>li .cont p.icon_list .icon2::before { background-image:url(/resource/common/images/bbs/tour/icon_room02.svg); } .tour_view .img_list>li .cont p.icon_list .icon3::before { background-image:url(/resource/common/images/bbs/tour/icon_room03.svg); } .tour_view .img_list>li .cont p.icon_list .icon4::before { background-image:url(/resource/common/images/bbs/tour/icon_room04.svg); } .tour_view .img_list>li .cont p.icon_list .icon5::before { background-image:url(/resource/common/images/bbs/tour/icon_room05.svg); } .tour_view .img_list>li .cont p.icon_list .icon6::before { background-image:url(/resource/common/images/bbs/tour/icon_room06.svg); } .tour_view .img_list>li .cont p.icon_list .icon7::before { background-image:url(/resource/common/images/bbs/tour/icon_room07.svg); } .tour_view .img_list>li .cont p.icon_list .icon8::before { background-image:url(/resource/common/images/bbs/tour/icon_room08.svg); } .tour_view .img_list>li .cont p.icon_list .icon9::before { background-image:url(/resource/common/images/bbs/tour/icon_room09.svg); } .tour_view .img_list>li .cont p.icon_list .icon10::before { background-image:url(/resource/common/images/bbs/tour/icon_room10.svg); } .tour_view .img_list>li .cont p.icon_list .icon11::before { background-image:url(/resource/common/images/bbs/tour/icon_room11.svg); } .tour_view .img_list>li .cont p.icon_list .icon12::before { background-image:url(/resource/common/images/bbs/tour/icon_room12.svg); } .tour_view .img_list>li .cont p.icon_list .icon13::before { background-image:url(/resource/common/images/bbs/tour/icon_room13.svg); } .tour_view .img_list>li .cont p.icon_list .icon14::before { background-image:url(/resource/common/images/bbs/tour/icon_room14.svg); } .tour_view .img_list>li .cont p.icon_list .icon15::before { background-image:url(/resource/common/images/bbs/tour/icon_room15.svg); } .tour_view .img_list>li .cont p.icon_list .icon16::before { background-image:url(/resource/common/images/bbs/tour/icon_room16.svg); } /* 부대시설 */ .tour_view .img_list>li .cont .cont_tit { display:flex; max-width:calc(100% - 8.5em); font-size:1.367em; font-weight:bold; color:var(--color-board-base); line-height:1.4; margin-bottom:10px; } .tour_view .img_list>li .cont dl.dl_info_list { position:relative; padding-left:8em; } .tour_view .img_list>li .cont dl.dl_info_list>dt { position:absolute; width:8em; left:0; top:20px; font-size:1.067em; } .tour_view .img_list>li .cont dl.dl_info_list>dd { display:flex; flex-wrap:wrap; gap:10px 1em; } .tour_view .img_list>li .cont dl.dl_info_list>dd.column { flex-flow:column; } .tour_view .img_list>li .cont dl.dl_info_list>dd span { position:relative; padding-left:10px; } .tour_view .img_list>li .cont dl.dl_info_list>dd span::before { position:absolute; width:5px; height:5px; left:0; top:10px; border-radius:100%; background:rgba(0,0,0,.3); content:''; } .tour_view .img_list>li .cont dl.dl_info_list>dd:nth-child(2) { margin-top:0; } .tour_view .img_list>li:has(.cont_tit) .btn_small { top:1.5em; right:2em; } /* 위치정보 */ .tour_view .st_map { border:1px solid var(--color-board-black-opcity1); border-radius:5px; padding:2em } .tour_view .locaInfo { margin-top:1em; padding:15px; background:var(--color-board-gray3); border-radius:5px; font-size:1.03rem; color:rgba(0,0,0,.84); text-align:center} .tour_view .map_dl { margin-top:1em; display:flex; flex-wrap:wrap; gap:0 16px; } .tour_view .map_dl>li { display:flex; align-items:center; width:calc(50% - 8px); background:var(--color-board-gray3); border-radius:5px; padding:20px; } .tour_view .map_dl>li span { display:flex; align-items:center; font-size:1.167rem; font-weight:bold; color:rgba(40,120,211,1) ; margin-right:25px; } .tour_view .map_dl>li .icon1>i { display:inline-block; width:70px; height:70px; background:rgba(40,120,211,.1) url(/resource/common/images/bbs/icon_car.svg) no-repeat 50% 50% / 60% auto; border-radius:100%; margin-right:15px; } .tour_view .map_dl>li .icon2>i { display:inline-block; width:70px; height:70px; background:rgba(40,120,211,.1) url(/resource/common/images/bbs/icon_bus.svg) no-repeat 50% 50% / 60% auto; border-radius:100%; margin-right:15px; } .tour_view .map_dl>li a { display:inline-block; padding:10px 35px; border:1px solid rgba(0,0,0,.4); border-radius:5px; font-size:1rem; background:var(--color-board-white); } /* 주변정보 */ .tour_view .srAround { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:25px; background:var(--color-board-gray3); border-radius:5px; } .tour_view .srAround dt { width:22em; padding-left:4em; background:url(/resource/common/images/bbs/icon_loc.svg) no-repeat left center / 3em auto; color:rgba(0,0,0,.94); } .tour_view .srAround dt strong { font-size:1.267rem; font-weight:bold; color:rgba(40,120,211,1); } .tour_view .srAround dt strong, .tour_view .srAround dt span { display:block; } .tour_view .srAround dd { width:calc(100% - 26em); padding:2em; background:var(--color-board-white); border-radius:5px;} .tour_view .srAround dd label { margin-right:3em; font-size:1.03rem; color:var(--color-board-base); margin-left:5px; } .tour_view .tour_view_con .custom_tab .item { margin:0 -5px; position:relative } .tour_view .tour_view_con .custom_tab .item .swiper-slide { width:16.666%; } .tour_view .tour_view_con .custom_tab .item .swiper-slide a { display:block; padding:0 5px; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .img { position:relative; width:100%; border-radius:5px 5px 0 0; height:0; padding-top:66.99%; overflow:hidden; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; object-fit:cover; -o-object-fit:cover; transform:translate(-50%,-50%); } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont { padding:15px 15px 25px; border-radius:0 0 5px 5px; border:1px solid var(--color-board-black-opcity1); border-top-width:0; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont strong { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont strong em { width:calc(100% - 4em); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:1.167rem; font-weight:bold; color:var(--color-board-base); } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont strong i { flex:0 1 auto; font-size:.85rem; color:rgba(40,120,211,.84); } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .text { margin-top:.75em; font-size:.98rem; line-height:1.3; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow:hidden; font-weight:400 } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .add, .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .tel { display:flex; gap:5px; margin-top:5px; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .add>dt, .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .tel>dt { position:relative; min-width:23px; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .add>dt::before, .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .tel>dt::before { position:absolute; width:23px; height:23px; border-radius:100%; background:var(--color-board-base); top:-1px; left:0; content:''; background-position:center; background-repeat:no-repeat; background-size:auto 14px;} .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .add>dt::before { background-image:url(/resource/common/images/bbs/icon_add.svg); } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .tel>dt::before { background-image:url(/resource/common/images/bbs/icon_tel.svg); } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .add>dd, .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .tel>dd { font-size:.98rem; line-height:1.3; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow:hidden; font-weight:400 } .tour_view .tour_view_con .swiper_bottom { position:absolute; right:0; top:-54px; } .tour_view .tour_view_con .swiper_bottom .control { display:flex; } .tour_view .tour_view_con .swiper_bottom button { flex:none; position:relative; width:34px; height:34px; padding:0px; margin:0 2px; border:1px solid var(--color-board-black-opcity1); border-radius:50px; } .tour_view .tour_view_con .swiper_bottom button:before { display:block; position:absolute; top:50%; left:50%; content:''; background-image:none } .tour_view .tour_view_con .swiper_bottom .swiper_prev:before { width:8px; height:8px; border-style:solid; border-width:0 0 1px 1px; border-color:var(--color-black); transform:translate(-35%, -50%) rotate(45deg); } .tour_view .tour_view_con .swiper_bottom .swiper_next:before { width:8px; height:8px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-black); transform:translate(-65%, -50%) rotate(45deg); } .tour_view .tour_view_con .swiper_bottom .swiper-pagination-current { font-weight:bold; } /* 별점 */ .icon_star { fill:none; stroke:#121212; stroke-linecap:round; stroke-linejoin:round; stroke-width:1px; margin:-2px 1px 0; width:14px; height:14px; } .icon_star.on { fill:#e43f18; stroke:#e43f18; } /* 네티즌평가 */ .tour_view .tour_bottom { margin-top:2em; } .tour_view .tour_bottom .writeWap { display:flex; flex-wrap:wrap; align-items:center; padding:30px; background:#F2F4F6; border-radius:5px; justify-content:space-between; } .tour_view .tour_bottom .writeWap .icon { width:150px; height:150px; background:#ceeaf7; border-radius:100%; display:flex; align-items:center; justify-content:center;} .tour_view .tour_bottom .writeWap .icon>i { width:100%; height:100%; display:block; background:url(/resource/common/images/bbs/icon_netisn.svg) no-repeat 50% 50% / cover} .tour_view .tour_bottom .writeWap form { width:calc(100% - 200px); } .tour_view .tour_bottom .writeWap .state { padding:10px 15px; background:var(--color-board-white); border-radius:5px; display:flex; flex-wrap:wrap; align-items:center; gap:5px 0; } .tour_view .tour_bottom .writeWap label { margin-right:2em;} .tour_view .tour_bottom .writeWap .state input[type="radio"] { margin-right:5px; margin-top:-2px; } .tour_view .tour_bottom .writeWap .wrf { display:flex; flex-wrap:wrap; margin-top:1em; padding-top:1em; border-top:1px dashed var(--color-board-base2);} .tour_view .tour_bottom .writeWap .wrf textarea { height:100px; width:calc(100% - 7em); border-radius:5px 0 0 5px } .tour_view .tour_bottom .writeWap .wrf input[type="submit"] { width:7em; background:var(--color-board-base); color:var(--color-board-white); height:100px; border:none; border-radius:0 5px 5px 0} .tour_view .tour_bottom .writeWap .wrf p { width:100%; margin-top:.25em; text-align:right; font-size:.9rem; color:var(--color-board-black-opcity74); } /* 카드뉴스 */ #boardWrap .view_table .view_con .cardnews_box { position:relative; width:100%; padding:0 8rem } #boardWrap .view_table .view_con .cardnews_box .swiper-wrapper { padding:initial; } #boardWrap .view_table .view_con .cardnews_box .swiper-slide { width:100%; overflow:hidden; text-align:center; position:relative; } #boardWrap .view_table .view_con .cardnews_box .swiper-slide span { position:absolute; left:50%; bottom:1em; background:rgba(255,255,255,.85); line-height:1.2; padding:10px 20px; border-radius:20px; z-index:1; transform:translateX(-50%);} #boardWrap .view_table .view_con .cardnews_box .swiper_bottom { display:flex; margin-top:-25px; height:50px; align-items:center; justify-content:center; z-index:3; } #boardWrap .view_table .view_con .cardnews_box .control { display:inline-flex; height:50px; align-items:center; justify-content:center; border-radius:50px; background:var(--color-board-white); border:1px solid var(--color-board-black-opcity1); padding:0 25px; } #boardWrap .view_table .view_con .cardnews_box .swiper_page { display:flex; max-width:150px; padding:.75rem; font-size:1rem; border-radius:50px; background:var(--color-board-black-opcity05); margin:1rem auto 0; align-items:center; justify-content:center; gap:5px; color:#666 } #boardWrap .view_table .view_con .cardnews_box .swiper_page .swiper-pagination-total { opacity:.74; } #boardWrap .view_table .view_con .cardnews_box .swiper_prev { left:0; } #boardWrap .view_table .view_con .cardnews_box .swiper_next { right:0; } #boardWrap .view_table .view_con .cardnews_box .swiper_prev, #boardWrap .view_table .view_con .cardnews_box .swiper_next { position:absolute; width:50px; height:50px; top:50%; padding:0px; border-radius:100%; background:rgba(0,0,0,.6); transform:translateY(-50%);} #boardWrap .view_table .view_con .cardnews_box .swiper-button-disabled { opacity:.5; } #boardWrap .view_table .view_con .cardnews_box .swiper_prev:before, #boardWrap .view_table .view_con .cardnews_box .swiper_next:before { display:block; position:absolute; top:50%; left:50%; content:''; background-image:none } #boardWrap .view_table .view_con .cardnews_box .swiper_prev:before { width:10px; height:10px; border-style:solid; border-width:0 0 1px 1px; border-color:var(--color-board-white); transform:translate(-35%, -50%) rotate(45deg); } #boardWrap .view_table .view_con .cardnews_box .swiper_next:before { width:10px; height:10px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-board-white); transform:translate(-65%, -50%) rotate(45deg); } #boardWrap .view_table .view_con .cardnews_box .swiper-pagination-current { font-weight:bold; color:var(--color-board-base) } /* 프로그램 상세보기 */ .program_view .program_view_top { display:flex; flex-wrap:wrap; justify-content:space-between; background:var(--color-board-black-opcity05); padding:2em 3em; border-radius:10px; } .program_view .program_view_top .area_img { position:relative; width:calc((100% - 80px) / 2.5); } .program_view .program_view_top .area_img .img { width:100%; overflow:hidden; border-radius:10px; } .program_view .program_view_top .area_img .img img { min-width:100%; object-fit:cover; -o-object-fit:cover; } .program_view .program_view_top .area_img .btn_app { display:flex; max-width:200px; justify-content:center; padding:10px 20px; line-height:1; border-radius:50px; background:var(--color-point); color:var(--color-board-white); margin:1em auto 0 auto; } .program_view .program_view_top .area_text { width:calc((100%) / 1.7); } .program_view .program_view_top .area_text .st3_tit { font-size:1.75rem; font-weight:bold; color:var(--color-board-base); line-height:1.4 } .program_view .program_view_top .area_text .info_list { display:flex; flex-flow:column; gap:7px; margin-top:1.5em; padding-top:1.5em; border-top:1px solid var(--color-board-black-opcity1); } .program_view .program_view_top .area_text .info_list>li { display:flex; flex-wrap:wrap; align-items:flex-start; font-size:1.03rem; font-weight:400; color:#333 } .program_view .program_view_top .area_text .info_list>li>strong { position:relative; padding-left:12px; min-width:8em; margin-right:1em; font-weight:bold; color:var(--color-board-base); } .program_view .program_view_top .area_text .info_list>li>strong::before { position:absolute; width:5px; height:5px; background:var(--color-board-point-hover); content:''; left:0; top:9px; border-radius:100%; } .program_view .program_view_top .area_text .info_list>li>span { width:calc(100% - 9em)} .program_view .program_view_con { padding:2em 0; margin-top:2em; font-weight:inherit; font-size:initial; } .program_view .program_view_con * { font-size:revert; font-weight:revert; list-style:revert; font-style:revert; } .program_view .program_view_con b, .program_view .program_view_con strong { font-weight:bold; } .program_view .program_view_con i, .program_view .program_view_con em { font-style:italic; } .program_view .program_view_con ol, .program_view .program_view_con ol>li { list-style:decimal; } .program_view .program_view_con ol, .program_view .program_view_con ul { padding:revert; } .program_view .program_view_con img { margin-bottom:1.5em; } .program_view .program_view_con img:last-of-type { margin-bottom: 0; /* img 타입 중 마지막만 마진 제거 */} /* 첨부파일 */ .program_view .file_box { display:flex; align-items:center; padding:1rem; border-top:1px solid var(--color-board-black-opcity1); border-bottom:1px solid var(--color-board-black-opcity1); gap:10px; } .program_view .file_box .tit { width:10.5em; font-weight:500; color:var(--color-board-base); font-size:1rem } .program_view .file_box .file_list { display:flex; flex-flow:column; width:calc(100% - 10.5em - 10px); gap:5px; font-size:1rem;} .program_view .file_box .file_list>li { position:relative; padding-left:10px; display:flex; flex-wrap:wrap; gap:5px; } .program_view .file_box .file_list>li::before { position:absolute; width:4px; height:4px; border-radius:100%; left:0; top:11px; content:''; background:#999; line-height:1.1; } .program_view .file_box .file_list>li>a { display:flex; flex-wrap:wrap; align-items:center; position:relative; gap:0px 5px;word-break: break-all; } .program_view .file_box .file_list>li>a .file_name { word-wrap:break-word; word-break:break-all; } .program_view .file_box .file_list>li>a .small { font-size:.95em; color:var(--color-board-black-opcity74); font-weight:300 } .program_view .file_box .file_list>li .down { display:flex; width:28px; height:28px; position:relative; } .program_view .file_box .file_list>li .down::before { position:absolute; width:16px; height:14.3158px; left:50%; top:50%; content:''; background:url(/resource/common/images/bbs/icon_file.svg) no-repeat 50% 50% / auto; transform:translate(-50%,-50%);} .program_view .file_box .file_list>li .btn_view { display:flex; height:28px; align-items:center; justify-content:center; border-radius:15px; line-height:1; padding:0 15px; background:#014099; font-size:.8rem; color:var(--color-board-white); gap:0 5px} .program_view .file_box .file_list>li .btn_view .icon { display:flex; width:13px; height:13px; position:relative; margin-top:-1px } .program_view .file_box .file_list>li .btn_view .icon::before { position:absolute; width:100%; height:100%; content:''; left:0; top:0; background:url(/resource/common/images/bbs/icon_search.svg) no-repeat 50% 50% / auto; filter: invert(1); } .program_view .file_box .file_list>li .btn_view:focus { outline-offset:2px; outline:2px dotted var(--color-board-base) !important } .program_view .file_box .file_list>li>a::before { position:absolute; width:0; height:1px; background:var(--color-board-base); content:''; left:0; bottom:0; transition:all ease 0.3s } .program_view .file_box .file_list>li>a:hover::before, .program_view .file_box .file_list>li>a:focus::before { width:100%; } /* 전시용 상세보기 */ .program_view.ex_view .program_view_top { background:none; border:1px solid rgba(0,0,0,0.2); } .program_view.ex_view .program_view_top .area_img { width:calc((100% - 80px) / 3.5); } .program_view.ex_view .program_view_top .area_text { width:calc((100%) / 1.45); } .program_view.ex_view .state { position:absolute; line-height:1; padding:7px 15px 6px 15px; border-radius:25px; font-size:.95rem; top:1em; right:1em} .program_view.ex_view .state1 { background:var(--color-board-point-hover); color:var(--color-board-white); } .program_view.ex_view .state2 { background:var(--color-board-base); color:var(--color-board-white); } .program_view.ex_view .state3 { background:bisque; } .program_view.ex_view .program_view_top .area_text .st4_tit { display:flex; margin-top:2em; font-size:1.25rem; font-weight:bold; line-height:1; padding-bottom:.5em; } .program_view.ex_view .program_view_top .area_text .ex_con { padding:1em; background:var(--color-board-black-opcity05); font-weight:inherit; font-size:initial; border-radius:5px;} .program_view.ex_view .program_view_top .area_text .ex_con * { font-size:revert; font-weight:revert; list-style:revert; font-style:revert; } .program_view.ex_view .program_view_top .area_text .ex_con b, .program_view.ex_view .program_view_top .area_text .ex_con strong { font-weight:bold; } .program_view.ex_view .program_view_top .area_text .ex_con i, .program_view.ex_view .program_view_top .area_text .ex_con em { font-style:italic; } .program_view.ex_view .program_view_top .area_text .ex_con ol, .program_view.ex_view .program_view_top .area_text .ex_con ol>li { list-style:decimal; } .program_view.ex_view .program_view_top .area_text .ex_con ol, .program_view.ex_view .program_view_top .area_text .ex_con ul { padding:revert; } .program_view.ex_view .program_view_top .area_text .ex_con img { margin-bottom:1.5em; } .program_view.ex_view .program_view_top .area_text .ex_conimg:last-of-type { margin-bottom: 0; /* img 타입 중 마지막만 마진 제거 */} .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list { display:flex; flex-flow:column; width:calc(100% - 10em); gap:5px; font-size:1rem;} .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li { position:relative; display:flex; flex-wrap:wrap; gap:5px; } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li>a { display:flex; flex-wrap:wrap; align-items:center; position:relative; gap:0px 5px;word-break: break-all; } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li>a .file_name { word-wrap:break-word; word-break:break-all; } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li>a .small { font-size:.95em; color:var(--color-board-black-opcity74); font-weight:300 } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li .down { display:flex; width:28px; height:28px; position:relative; } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li .down::before { position:absolute; width:16px; height:14.3158px; left:50%; top:50%; content:''; background:url(/resource/common/images/bbs/icon_file.svg) no-repeat 50% 50% / auto; transform:translate(-50%,-50%);} .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li .btn_view { display:flex; height:28px; align-items:center; justify-content:center; border-radius:15px; line-height:1; padding:0 15px; background:#014099; font-size:.8rem; color:var(--color-board-white); gap:0 5px} .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li .btn_view .icon { display:flex; width:13px; height:13px; position:relative; margin-top:-1px } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li .btn_view .icon::before { position:absolute; width:100%; height:100%; content:''; left:0; top:0; background:url(/resource/common/images/bbs/icon_search.svg) no-repeat 50% 50% / auto; filter: invert(1); } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li .btn_view:focus { outline-offset:2px; outline:2px dotted var(--color-board-base) !important } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li>a::before { position:absolute; width:0; height:1px; background:var(--color-board-base); content:''; left:0; bottom:0; transition:all ease 0.3s } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li>a:hover::before, .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list>li>a:focus::before { width:100%; } /* 세로 */ .tour_view .tour_view_top.vertical { border-radius:8px; padding-top:1em } .tour_view .tour_view_top.vertical .area_img { width:100%; gap:1em; display:flex; flex-flow:column; } .tour_view .tour_view_top.vertical .area_text, .tour_view .tour_view_top.vertical .tourSwiper1, .tour_view .tour_view_top.vertical .tourSwiper2 { width:100%; } .tour_view .tour_view_top.vertical .tourSwiper1 .swiper-slide { padding-top:7%; border-radius:5px; } .tour_view .tour_view_top.vertical .tourSwiper2 .swiper-slide { padding-top:56.66%; } .tour_view .tour_view_top.vertical .swiper-slide.empty-slide { pointer-events:none; } .tour_view .tour_view_top.vertical .st3_tit { display:flex; width:100%; font-size:1.45rem; font-weight:bold; color:var(--color-board-base); line-height:1.4; margin-bottom:1rem; justify-content:center; text-align:center } .tour_view .tour_view_top.vertical .area_text .info_list { padding:1.5em; border:none; background:var(--color-board-gray3); border-radius:8px; flex-flow:row; display:flex; gap:10px 2em } .tour_view .tour_view_top.vertical .area_text .info_list>li { width:calc((100% - 2em) / 2); } .tour_view .tour_view_top.vertical .area_text .info_list>li+li { margin-top:0; } .tour_view .tour_view_top.vertical .swiper_bottom { position:absolute; bottom:10px; left:50%; transform:translateX(-50%) } .tour_view .tour_view_top.vertical .tourSwiper1 .swiper-slide { position:relative; } .tour_view .tour_view_top.vertical .tourSwiper1 .swiper-slide::before { position:absolute; width:100%; height:100%; left:0; top:0; background:var(--color-board-black-opcity5); content:''; z-index:1; transition:all ease 0.2s} .tour_view .tour_view_top.vertical .swiper-slide-thumb-active::before { opacity:0; } /* 주변정보 지도형 */ .tour_view .tour_view_con .custom_tab .map_wrap { display:flex; flex-wrap:wrap; --sizeHig:500px; gap:1em } .tour_view .tour_view_con .custom_tab .map_wrap .map_box { width:calc(100% - 540px - 1em); height:var(--sizeHig); border:1px solid var(--color-board-line); border-radius:8px; overflow:hidden } .tour_view .tour_view_con .custom_tab .map_wrap .map_info { width:540px; height:var(--sizeHig); border:1px solid var(--color-board-line); border-radius:8px; overflow:hidden; padding-bottom:2em } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box { border-radius:8px 8px 0 0; background:var(--color-board-gray3); padding:1em; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .total { font-size:1rem; font-weight:500; display:flex; align-items:center; gap:5px; line-height:1; height:25px; justify-content:space-between;} .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .total strong { font-size:1.067rem; font-weight:700; color:var(--color-board-point); line-height:1; margin-top:-1px; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li { width:calc((100% - 15px) / 4); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li button { height:35px; width:100%; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:500; border-radius:50px; border:1px solid var(--color-board-line); background:var(--color-board-white); line-height:35px; gap:5px; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li.active button { border-color:var(--color-board-point); background:var(--color-board-point); color:var(--color-board-white); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li .icon { display:flex; align-items:center; justify-content:center; width:16px; height:16px; position:relative; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; background-position:50%; background-repeat:no-repeat; content:''; background-size:contain } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li .icon1::before { background-image:url(/resource/common/images/bbs/tour/icon_marker01_01.svg); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li .icon2::before { background-image:url(/resource/common/images/bbs/tour/icon_marker02_01.svg); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li .icon3::before { background-image:url(/resource/common/images/bbs/tour/icon_marker03_01.svg); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li .icon4::before { background-image:url(/resource/common/images/bbs/tour/icon_marker04_01.svg); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li.active .icon::before { filter:brightness(100); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_radio { display:flex; gap:10px 1em; flex-wrap:wrap; padding-top:1em; margin-top:.5em; border-top:1px solid var(--color-board-line); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list { display:flex; flex-flow:column; gap:10px; max-height:80%; overflow-y:auto; padding:1em 1em 2em 1em;} .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li+li { border-top:1px dashed var(--color-board-line); padding-top:.5em } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a { display:flex; gap:10px 1em; width:100%; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .img { display:flex; position:relative; width:7em; height:0; padding-top:20%; overflow:hidden } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; object-fit:cover; -o-object-fit:cover; transform:translate(-50%,-50%); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .cont { width:calc(100% - 8em); display:flex; flex-flow:column; flex:auto } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .cont strong { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .cont strong em { width:calc(100% - 3em); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:1.067rem; font-weight:700; color:var(--color-board-base); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .cont strong i { flex:0 1 auto; font-size:.8rem; color:var(--color-board-point); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .cont .add { display:flex; margin-top:5px; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .cont .add>dd { font-size:.95rem; line-height:1.3; font-weight:500; opacity:.64 } .tour_view .tour_view_con .custom_tab .map_wrap .map_box .marker img { max-height:30px; } @media all and (max-width:1268px){ #boardWrap .view_table .title strong { font-size:1.5rem; } /* 문화관광용 */ .icon_star { width:12px; height:12px; } .tour_view .tour_view_top .area_img { width:calc((100% - 80px) / 2.3); } .tour_view .tour_view_top .area_text .st3_tit { font-size:1.65rem; } .tour_view .tour_view_top .area_text { width:calc((100%) / 1.8); } .tour_view .tour_view_top .area_text .info_list { margin-top:1.25em; padding-top:1.25em; } .tour_view .tour_view_top .area_text .info_list>li { font-size:1rem; } .tour_view .tour_view_top .area_text .info_list>li+li { margin-top:12px; } .tour_view .tour_view_top .area_text .info_list2 { margin-top:1.25em; padding:1em; } .tour_view .tour_view_top .area_text .info_list2>li { font-size:.9rem; } .tour_view .tour_view_top .area_text .info_list2>li+li { margin-top:7px; } .tour_view .tour_view_top .area_text .info_list2>li>strong { padding-left:10px; min-width:6em; } .tour_view .tour_view_top .area_text .info_list2>li>strong::before { top:8.5px; } .tour_view .tour_view_top .area_text .info_list2>li>span { width:calc(100% - 7em)} .tour_view .tour_view_top .area_img .control { height:45px; padding:0 10px; } .tour_view .tour_bottom .writeWap .icon { width:130px; height:130px; } .tour_view .tour_bottom .writeWap form { width:calc(100% - 170px); } .tour_view .tour_bottom .writeWap .state { font-size:.95rem; } .tour_view .tour_bottom .writeWap label { margin-right:1.5em; } .tour_view .tour_bottom .writeWap label:last-child { margin-right:0; } .tour_view .tour_bottom .writeWap .wrf textarea, .tour_view .tour_bottom .writeWap .wrf input[type="submit"] { height:80px; } .tour_view .img_list>li .img { padding-top:15.99%; } .tour_view .img_list>li .cont dt { font-size:1.267em; } .tour_view .img_list>li .cont dd { font-size:1rem; } .tour_view .srAround dd { width: calc(100% - 23em); padding:1.5em;} .tour_view .tour_view_con .custom_tab .item .swiper-slide { width:25%; } /* 객실정보 */ .tour_view .img_list>li .cont p.icon_list .icon { gap:2px; } .tour_view .img_list>li .cont p.icon_list .icon::before { width:35px; height:35px; } /* 부대시설 */ .tour_view .img_list>li .cont .cont_tit { font-size:1.267em; } .tour_view .img_list>li .cont dl.dl_info_list>dd { gap:5px 1em; font-size:1.067em } .tour_view .img_list>li .cont dl.dl_info_list>dd span::before { top:8px; width:4px; height:4px; } /* 프로그램 상세보기 */ .program_view .program_view_top .area_img { width:calc((100% - 80px) / 2.3); } .program_view .program_view_top .area_text .st3_tit { font-size:1.65rem; } .program_view .program_view_top .area_text { width:calc((100%) / 1.8); } .program_view .program_view_top .area_text .info_list { margin-top:1.25em; padding-top:1.25em; } .program_view .program_view_top .area_text .info_list>li { font-size:1rem; } /* 전시용 상세보기 */ .program_view.ex_view .program_view_top .area_text .st4_tit { margin-top:1.75em; font-size:1.2rem; } /* 세로 */ .tour_view .tour_view_top.vertical { padding:1em } .tour_view .tour_view_top.vertical .st3_tit { font-size:1.4rem; } .tour_view .tour_view_top.vertical .area_text .info_list { padding:1.25em; gap:10px 1em } .tour_view .tour_view_top.vertical .area_text .info_list>li { width:calc((100% - 1em) / 2); } } @media all and (max-width:1068px){ #boardWrap .view_table .title strong { font-size:1.4rem; } /* 문화관광용 */ .tour_view .tour_view_top { padding:1.5em; } .tour_view .tour_view_top .area_img { width:calc((100% - 60px) / 2); } .tour_view .tour_view_top .area_text .st3_tit { font-size:1.5rem; } .tour_view .tour_view_top .area_text { width:calc((100%) / 2); } .tour_view .tour_view_top .area_text .info_list>li { font-size:.98rem; } .tour_view .tour_view_top .area_text .info_list>li+li { margin-top:10px; } .tour_view .tour_view_top .area_text .info_list2>li { font-size:.88rem; } .tour_view .tour_view_top .area_text .info_list2>li>strong::before { top:8px; } .tour_view .tour_view_top .area_img .control { height:40px; padding:0 5px; } .tour_view .img_list>li { padding:1.5em; } .tour_view .img_list>li .img { padding-top:21.99%; } .tour_view .img_list>li .cont dl { padding:15px 0; } .tour_view .img_list>li .cont p { padding:12px; font-size:1rem; } .tour_view .map_dl>li { flex-wrap:wrap; padding:10px;} .tour_view .map_dl>li span { flex-wrap:wrap; width:100%; padding:10px; text-align:center; border-radius:5px; background:rgba(40,120,211,.1); justify-content:center; margin-right:0; } .tour_view .map_dl>li .icon1>i { width:100%; height:60px; background-color:transparent; background-size:auto 60%; border-radius:0; margin-right:0; margin-bottom:5px} .tour_view .map_dl>li .icon2>i { width:100%; height:60px; background-color:transparent; background-size:auto 60%; border-radius:0; margin-right:0; margin-bottom:5px} .tour_view .map_dl>li a { margin-top:10px; width:100%; text-align:center } .tour_view .srAround dd { width:100%; padding:1em; margin-top:.75em } .tour_view .btn_zoom { width:40px; height:40px; } .tour_view .tour_view_top .swiper_bottom .swiper_prev, .tour_view .tour_view_top .swiper_bottom .swiper_next { width:38px; height:38px; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .add>dt, .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .tel>dt { min-width:20px; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .add>dt::before, .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont .tel>dt::before { width:20px; height:20px; top:0px; background-size:auto 13px;} /* 부대시설 */ .tour_view .img_list>li:has(.cont_tit) .btn_small { top:1.25em; right:1.5em; } /* 프로그램 상세보기 */ .program_view .program_view_top { padding:1.5em; } .program_view .program_view_top .area_img { width:calc((100% - 60px) / 2); } .program_view .program_view_top .area_text .st3_tit { font-size:1.5rem; } .program_view .program_view_top .area_text { width:calc((100%) / 2); } .program_view .program_view_top .area_text .info_list>li { font-size:.95rem; } .program_view .program_view_top .area_text .info_list>li>strong::before { top:8px; } /* 전시용 상세보기 */ .program_view.ex_view .program_view_top .area_text .st4_tit { margin-top:1.5em; font-size:1.15rem; } .program_view.ex_view .state { font-size:.9rem; } /* 세로 */ .tour_view .tour_view_top.vertical .st3_tit { font-size:1.35rem; } .tour_view .tour_view_top.vertical .area_text .info_list { flex-wrap:wrap; } .tour_view .tour_view_top.vertical .area_text .info_list>li { width:100%; } /* 주변정보 지도형 */ .tour_view .tour_view_con .custom_tab .map_wrap { --sizeHig:300px;} .tour_view .tour_view_con .custom_tab .map_wrap .map_box { width:100%; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info { width:100%; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .total { font-size:1rem;} .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .total strong { font-size:1.067rem; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .img { padding-top:7%; } } @media all and (max-width:1024px){ /* 세로 */ .tour_view .tour_view_top.vertical .tourSwiper1 .swiper-slide { padding-top:12%; } .tour_view .tour_view_con .custom_tab .map_wrap { height:inherit; } } @media all and (max-width:868px){ #boardWrap .view_table .title .cate { font-size:.9rem; } #boardWrap .view_table .title strong { font-size:1.3rem; line-height:1.3 } .view_st3 .st3_tit { font-size:1.7rem; line-height:1.4; } #boardWrap .view_table .view_basics_list>li.w50 { width:100%; } #boardWrap .view_table .view_basics_list>li.w33 { width:100%; } #boardWrap .view_table .view_basics_list>li>.tit, #boardWrap .view_table .view_basics_list>li>p { padding:.5rem; } #boardWrap .view_table .view_basics_list>li>.tit { width:9em; } #boardWrap .view_table .view_basics_list>li>p { width:calc(100% - 9em - 10px); } /* 문화관광용 */ .tour_view .hitNum { padding:15px; } .tour_view .tour_view_top .area_img { width:100%; } .tour_view .tour_view_top .area_text { width:100%; margin-top:1em; } .tour_view .tour_view_top .area_text .st3_tit { font-size:1.4rem; } .tour_view .tour_view_top .area_text .info_list>li>strong { min-width:5em; } .tour_view .tour_view_top .area_text .info_list>li>span { width:calc(100% - 6em); } .tour_view .tour_view_top .area_text .info_list2>li { font-size:.88rem; } .tour_view .tour_view_top .area_text .info_list2>li>strong { min-width:5em; } .tour_view .tour_view_top .area_text .info_list2>li>span { width:calc(100% - 6em); } .tour_view .tour_view_top .area_text .info_list>li>.file_list { width:calc(100% - 6em); } .tour_view .tour_bottom .writeWap { padding:20px; } .tour_view .tour_bottom .writeWap .icon { width:100%; border-radius:5px; } .tour_view .tour_bottom .writeWap .icon>i { background-size: auto 90%; } .tour_view .tour_bottom .writeWap form { width:100%; margin-top:1em; } .tour_view .tour_view_con .custom_tab .item .swiper-slide { width:33.333%; } .tour_view .map_dl>li span { font-size:1.067rem; } .tour_view .tour_view_con .tab_menu>li>a { font-size:1rem; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont strong em { font-size:1.067rem; } .tour_view .modal>.btn_close { height:36px; width:36px; } .tour_view .modal>.btn_close:before, .tour_view .modal>.btn_close:after { width:13px; } /* 숙박 모달 입력폼 */ .tour_view .modal.room_app_layer, .tour_view .modal.facility_app_layer { padding:2em } /* 카드뉴스 */ #boardWrap .view_table .view_con .cardnews_box { padding:0 3rem } #boardWrap .view_table .view_con .cardnews_box .swiper_prev, #boardWrap .view_table .view_con .cardnews_box .swiper_next { width:40px; height:40px; } #boardWrap .view_table .view_con .cardnews_box .swiper_page { padding:.5rem; font-size:.9rem; } #boardWrap .view_table .view_con .cardnews_box .swiper_page span { font-size:.9rem; } #boardWrap .view_table .view_con .cardnews_box .swiper-slide span { padding:7px 15px; font-size:.9rem; bottom:.5em } /* 프로그램 상세보기 */ .program_view .program_view_top .area_img { width:100%; } .program_view .program_view_top .area_text { width:100%; margin-top:1em; } .program_view .program_view_top .area_text .st3_tit { font-size:1.4rem; } .program_view .program_view_top .area_text .info_list>li>strong { min-width:7em; } .program_view .program_view_top .area_text .info_list>li>span { width:calc(100% - 8em); } /* 전시용 상세보기 */ .program_view.ex_view .program_view_top .area_img, .program_view.ex_view .program_view_top .area_text { width:100%; } .program_view.ex_view .program_view_top .area_text .info_list>li>strong { min-width:4em; } .program_view.ex_view .program_view_top .area_text .info_list>li>span { width:calc(100% - 5em); } .program_view.ex_view .program_view_top .area_text .st4_tit { font-size:1.1rem; } .program_view.ex_view .program_view_top .area_text .info_list>li>.file_list { width:calc(100% - 5em); } /* 세로 */ .tour_view .tour_view_top.vertical .area_text .info_list { margin-top:0; } .tour_view .tour_view_top.vertical .st3_tit { font-size:1.3rem; } /* 주변정보 지도형 */ .tour_view .tour_view_con .custom_tab .map_wrap { --sizeHig:250px;} .tour_view .tour_view_con .custom_tab .map_wrap .map_info { height:calc(var(--sizeHig) + 100px); } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .total { font-size:.95rem;} .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .total strong { font-size:1.03rem; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .img { padding-top:9%; } } @media all and (max-width:668px){ #boardWrap .view_table .file_box { flex-wrap:wrap; } #boardWrap .view_table .file_box .tit, #boardWrap .view_table .file_box .file_list { width:100%; } #boardWrap .view_table .file_box .file_list { font-size:.95rem; } #boardWrap .view_table .view_basics_list>li { min-height:inherit; flex-wrap:wrap; gap:0; font-size:.9rem; } #boardWrap .view_table .view_basics_list>li>.tit { width:100%; height:auto; justify-content: flex-start; background:none; padding:.5rem .5rem 0 .5rem } #boardWrap .view_table .view_basics_list>li>p, #boardWrap .view_table .view_basics_list>li>div.flex { width:100%; padding:.2rem .5rem .5rem .5rem } #boardWrap .view_table .view_basics_list .file_list { font-size:.95rem; } #boardWrap .view_table .view_basics_list .file_list>li::before { top:10px; } #boardWrap .view_footer { padding:1.5em; } #boardWrap .view_footer>li { font-size:1rem; } #boardWrap .view_footer>li span { width:20px; font-size:0; } #boardWrap .view_footer>li a { width:calc(100% - 2em) } #boardWrap .view_table colgroup { display:none; } #boardWrap .view_table tr.line>th, #boardWrap .view_table tr.line>td { display:block; width:100%; } #boardWrap .view_table tr.line>th { background:none; padding-bottom:0; text-align:left; border-bottom:none } #boardWrap .view_table tr.line>td { padding-top:.25em; } /* 댓글 */ .comment-group { padding:1.5em; } .comment-group .cbox_guide button, .comment-group .cbox_guide_reply button { font-size:1rem!important } /* 문화관광용 */ .tour_view .img_list>li .img { width:100%; padding-top:70%; } .tour_view .img_list>li .cont { width:100%; margin-top:1em; } .tour_view .img_list>li .btn_small { position:initial; justify-content:end; margin-top:1em } .tour_view .map_dl>li { width:100%; } .tour_view .map_dl>li+li { margin-top:1em; } .tour_view .srAround .radio_label::before { width:20px; height:20px; } .tour_view .srAround dd label { margin-right:2em; } .tour_view .srAround dd label:last-child { margin-right:0; } .tour_view .map_dl>li a { padding:10px 20px; } .tour_view .tour_view_top .swiper_bottom .swiper_prev, .tour_view .tour_view_top .swiper_bottom .swiper_next { width:32px; height:32px; } .tour_view .tour_view_top .area_img .control { height:34px; } .tour_view .tour_view_top .swiper_bottom .swiper_next:before, .tour_view .tour_view_top .swiper_bottom .swiper_prev:before { width:8px; height:8px; } .tour_view .tour_view_top .swiper_bottom .swiper_page { font-size:.85rem; } .tour_view .btn_zoom { right:.5em; top:.5em; } /* 객실정보 */ .tour_view .img_list>li .cont p.icon_list .icon::before { width:30px; height:30px; } /* 부대시설 */ .tour_view .img_list>li .cont .cont_tit { font-size:1.2em; } .tour_view .img_list>li .cont .cont_tit { max-width:inherit; } .tour_view .img_list>li .cont dl.dl_info_list { padding-left:0; } .tour_view .img_list>li .cont dl.dl_info_list>dt { position:initial; width:100%; } /* 프로그램 상세보기 */ .program_view .file_box { flex-wrap:wrap; } .program_view .file_box .tit, .program_view .file_box .file_list { width:100%; } .program_view .file_box .file_list { font-size:.95rem; } .program_view .file_box .file_list>li::before { top:8px; } /* 전시용 상세보기 */ .program_view.ex_view .state { font-size:.85rem; } /* 세로 */ .tour_view .tour_view_top.vertical .tourSwiper2 .swiper-slide { padding-top:66.66%; } .tour_view .tour_view_top.vertical .swiper_bottom { bottom:10px; } .tour_view .tour_view_top.vertical .tourSwiper1 .swiper-slide { padding-top:19%; } .tour_view .tour_view_top.vertical .st3_tit { font-size:1.28rem; line-height:1.3 } /* 주변정보 지도형 */ .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .img { padding-top:12%; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .cont strong em { font-size:1rem; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .cont .add>dd { font-size:.9rem; } } @media all and (max-width:568px){ /* 문화관광용 */ .tour_view .tour_view_con .custom_tab .item .swiper-slide { width:50%; } .tour_view .srAround { padding:20px; } .tour_view .srAround dd { display:flex; flex-wrap:wrap; } .tour_view .tour_view_con .custom_tab .item .swiper-slide .cont strong em { font-size:1rem; } .tour_view .btn_zoom { width:35px; height:35px; background-size:14px; } .tour_view .tour_view_con .tab_menu>li>button { font-size:.95rem; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_box .map_info_cate>li { width:calc((100% - 5px) / 2); } /* 확대보기 */ .tour_view .modal>.btn_close { width:30px; height:30px; right:10px; top:10px; } .tour_view .modal .zoom_area .swiper_bottom { bottom:10px; } .tour_view .modal .zoom_area .swiper_bottom button { width:30px; height:30px; } .tour_view .modal .zoom_area .swiper_bottom .control { gap:2px; } } @media all and (max-width:468px){ /* 댓글 */ .comment-group .cbox_guide textarea, .comment-group .cbox_guide_reply textarea { width:100%; } .comment-group .cbox_guide button, .comment-group .cbox_guide_reply button { width:100%; height:50px !important} /* 카드뉴스 */ #boardWrap .view_table .view_con .cardnews_box { padding:0 2.5rem } #boardWrap .view_table .view_con .cardnews_box .swiper_prev, #boardWrap .view_table .view_con .cardnews_box .swiper_next { width:35px; height:35px; } #boardWrap .view_table .view_con .cardnews_box .swiper_page { padding:.3rem; max-width:110px; } /* 문화관광용 */ .tour_view .tour_view_top .area_text .info_list>li+li { margin-top:7px; } .tour_view .tour_view_top .area_text .info_list>li>span, .tour_view .tour_view_top .area_text .info_list2>li>span { line-height:1.3; } .tour_view .tour_view_top .area_text .info_list>li>.file_list { width:100%; } .tour_view .tour_view_top .area_text .info_list>li>.file_list>li>a { font-size:.88rem; } .tour_view .tour_view_top .area_text .info_list>li>.file_list>li>a>.down { margin-top:-1px; } /* 숙박 모달 입력폼 */ .tour_view .modal.room_app_layer, .tour_view .modal.facility_app_layer { padding:1.5em } .tour_view .modal fieldset { display:contents; } .tour_view .modal .app_area .basics_list>li { gap:5px; } .tour_view .modal .app_area .basics_list>li input { max-width:7em; } /* 세로 */ .tour_view .tour_view_top.vertical .area_text .info_list>li>strong { min-width:4em; } /* 주변정보 지도형 */ .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .img { width:6em; padding-top:17%; } .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .cont { width:calc(100% - 7em); } } @media all and (max-width:368px){ #boardWrap .view_table .file_box .file_list>li::before { top:10px; } /* 세로 */ .tour_view .tour_view_top.vertical .tourSwiper2 .swiper-slide { padding-top:76.66%; } .tour_view .tour_view_top.vertical .swiper_bottom { bottom:5px; } .tour_view .tour_view_top.vertical .st3_tit { font-size:1.2rem; } /* 주변정보 지도형 */ .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .img { padding-top:20%; } } @media all and (max-width:320px){ /* 문화관광용 */ .tour_view .tour_view_con .custom_tab .item .swiper-slide { width:100%; } /* 주변정보 지도형 */ .tour_view .tour_view_con .custom_tab .map_wrap .map_info .map_info_list>li a .img { padding-top:22%; } } /* 페이지 만족도 */ .pageInfoBox { position:relative; width:100%; border:1px solid var(--color-board-black-opcity1); padding:1em } .pageInfoBox .charge_info { padding:15px 25px; background-color:var(--color-board-gray1); } .pageInfoBox .charge_info dl { display:flex; align-items:center; gap:0 15px; } .pageInfoBox .charge_info dl dt { color:var(--color-board-base); font-weight:600; } .pageInfoBox .charge_info dl dt i.icon-mb { display:inline-block; width:19px; height:19px; background:url(/resource/common/images/bbs/icon_mb.svg) no-repeat 50% 50% / auto auto; margin-right:5px; vertical-align:middle; margin-top:-2px} .pageInfoBox .charge_info dl dd { margin-left:20px; display:inline-block;} .pageInfoBox .charge_info dl dd em { color:var(--color-board-base); font-weight:500} .pageInfoBox .satisfaction { padding:20px 25px;} .pageInfoBox .satisfaction .survey strong { font-weight:400; color:var(--color-board-base); display:flex; align-items:center;} .pageInfoBox .satisfaction .survey strong i.icon-up { display:inline-block; width:19px; height:19px; background:url(/resource/common/images/bbs/icon_up.svg) no-repeat 50% 50% / auto auto; margin-right:5px; vertical-align:middle; margin-top:-2px} .pageInfoBox .satisfaction .survey ul { display:flex; gap:0 15px; align-items:center;} .pageInfoBox .satisfaction .otherBox { display:flex; gap:0 3px; align-items:center; } .pageInfoBox .satisfaction .otherBox input { width:70%; min-width:30em} .pageInfoBox .satisfaction .btn_survey { width:100px; height:40px; color:var(--color-board-white); background-color:#2878D3; vertical-align:middle;} /* 마이페이지 - 로그인 */ .Membership .text { font-size:1.03rem; color:var(--color-board-black-opcity74); font-weight:400 } .Membership .loginBox { width:80%; max-width:600px; margin-left:auto; margin-right:auto; } .Membership .loginBox strong { display:block; font-size:2.2rem; font-weight:bold; color:var(--color-board-base); } .Membership .loginBasic { margin-top:2em; } .Membership .loginBasic>li { position:relative; display:flex; justify-content:space-between; align-items:center; gap:10px 20px; justify-content: center;} .Membership .loginBasic>li+li { margin-top:.75em; } .Membership .loginBasic>li:last-child { margin-top:1.25em; } .Membership .loginBasic>li input[type="text"], .Membership .loginBasic>li input[type="password"] { padding:12px 10px; width:100%; font-size:16px; border-radius:3px; } .Membership .loginBasic>li .btn { width:100%; border-radius:3px;} .Membership .loginBasic>li>a { color:#999; text-decoration:underline; font-weight:400 } .Membership .loginBox .loginSns>ul { margin-top:2em; display:flex; flex-wrap:wrap; gap:7px 15px;} .Membership .loginBox .loginSns>ul>li { flex:auto; min-width:calc(50% - 7.5px); } .Membership .loginBox .loginSns>ul>li>.btn { width:100%; } .Membership .loginBox .btnArea { margin-top:2em; padding-top:2em; border-top:2px solid var(--color-board-base); } .Membership .loginBox .btnArea .btn { width:100%; } #boardWrap .Membership .loginSns>ul>li .btn { height:45px; background-position:10px 50%; background-size:30px; background-repeat:no-repeat } #boardWrap .Membership .loginSns>ul>li .btn.white>span { color:rgba(0,0,0,.64);} #boardWrap .Membership .loginSns>ul>li .btn.white:hover, #boardWrap .Membership .loginSns>ul>li .btn.white:focus { background-color:var(--color-board-white); border-color:var(--color-board-base); } #boardWrap .Membership .btn.google { background-image:url(/resource/common/images/bbs/icon_google.svg); } #boardWrap .Membership .btn.kakao { background-image:url(/resource/common/images/bbs/icon_kakao.svg); } #boardWrap .Membership .btn.naver { background-image:url(/resource/common/images/bbs/icon_naver.svg); } #boardWrap .Membership .btn.facebook { background-image:url(/resource/common/images/bbs/icon_facebook.svg); } #boardWrap .Membership .btn.twitter { background-image:url(/resource/common/images/bbs/icon_twitter.svg); } .Membership .re { margin-top:.5em; font-size:.95rem; color:rgba(0,0,0,.64); } /* 마이페이지 - 아이디/비밀번호 찾기 */ .Membership .idFind, .Membership .pwFind { width:80%; max-width:600px; margin-left:auto; margin-right:auto; } .Membership .idFind .loginBasic, .Membership .pwFind .loginBasic { margin-top:1em; padding-top:1em; border-top:1px solid var(--color-board-base); } .Membership .pwFind { margin-top:2em; } .Membership .idFind h5, .Membership .pwFind h5 { font-size:2.2rem; font-weight:bold; color:var(--color-board-base); } /* 마이페이지 - 본인인증 */ .Membership .mb_tit { font-size:1.033rem; } .Membership .progress_bar { margin-top:3em; border-radius:3px; background:rgba(40,120,211,.05); padding:1.5em; --sizeHig:90px;} .Membership .progress_bar ol { display:flex; width:100%; counter-reset:num; height:var(--sizeHig); flex-wrap:wrap } .Membership .progress_bar ol>li { position:relative; width:25%; display:flex; align-items:center; justify-content:center; gap:0 1.5em} .Membership .progress_bar ol>li+li::before { position:absolute; width:14px; height:14px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-board-point); left:0; top:50%; transform:translateY(-50%) rotate(45deg); content:'';} .Membership .progress_bar ol>li+li::after { position:absolute; width:14px; height:14px; border-style:solid; border-width:1px 1px 0 0; border-color:#c2c2c2; left:-8px; top:50%; transform:translateY(-50%) rotate(45deg); content:'';} .Membership .progress_bar ol>li .icon { width:var(--sizeHig); height:var(--sizeHig); position:relative; display:inline-block; background-color:var(--color-board-white); border-radius:100%; box-shadow:5px 5px 5px var(--color-board-black-opcity05);} .Membership .progress_bar ol>li .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background-position:center; background-repeat:no-repeat; background-size:auto; filter:grayscale(1); } .Membership .progress_bar ol>li .icon.icon1::before { background-image:url(/resource/common/images/bbs/icon_step01.svg); } .Membership .progress_bar ol>li .icon.icon2::before { background-image:url(/resource/common/images/bbs/icon_step02.svg); } .Membership .progress_bar ol>li .icon.icon3::before { background-image:url(/resource/common/images/bbs/icon_step03.svg); } .Membership .progress_bar ol>li .icon.icon4::before { background-image:url(/resource/common/images/bbs/icon_step04.svg); } .Membership .progress_bar ol>li.pgr_on .icon::before { filter:initial } .Membership .progress_bar ol>li strong { color:var(--color-board-base5); } .Membership .progress_bar ol>li strong { color:var(--color-board-base); display:block; font-size:1.167em; font-weight:500} .Membership .progress_bar ol>li strong::before { display:block; counter-increment:num; content:"STEP. 0"counter(num); font-size:.9rem; opacity:.54} .Membership .progress_bar .pgr_on strong { color:var(--color-board-point); } .Membership .progress_bar .pgr_on strong::before { color:var(--color-board-point); } .Membership .progress_bar .pgr_on strong::after { filter:initial} .Membership .join_identify { margin-top:2em; --sizeHig:120px;} .Membership .join_identify>ul { display:flex; gap:0 1em; flex-wrap:wrap } .Membership .join_identify>ul>li { width:calc((100% - 1em) / 2) } .Membership .join_identify>ul>li>a { display:block; padding:2em; height:100%; border:1px solid var(--color-board-black-opcity1); transition:0.5s ease 0s; border-radius:3px; } .Membership .join_identify dt { font-size:1.5rem; font-weight:bold; color:var(--color-board-base); margin-bottom:1.5em; } .Membership .join_identify dt>span { width:var(--sizeHig); height:var(--sizeHig); position:relative; display:table; background-color:var(--color-board-gray1); border-radius:100%; margin:0 auto 1em auto; filter:grayscale(1); background-size:70% auto; background-position:50%; background-repeat:no-repeat;} .Membership .join_identify dt>span.icon1 { background-image:url(/resource/common/images/bbs/icon_memberidt01.svg); } .Membership .join_identify dt>span.icon2 { background-image:url(/resource/common/images/bbs/icon_memberidt02.svg); } .Membership .join_identify>ul>li>a:hover, .Membership .join_identify>ul>li>a:focus { border-color:var(--color-board-base); box-shadow:5px 5px 5px var(--color-board-black-opcity1);} .Membership .join_identify>ul>li>a:hover span, .Membership .join_identify>ul>li>a:focus span { filter:initial } .Membership .join_identify dd { position:relative; font-size:1rem; padding-top:.5em } .Membership .join_identify dd::before { position:absolute; top:0; left:calc(50% - 4px); width:4px; height:4px; background:#cecece; border-radius:100%; content:''; transform:translateX(-50%)} .Membership .join_identify dd::after { position:absolute; top:0; left:calc(50% + 4px); width:4px; height:4px; background:#cecece; border-radius:100%; content:''; transform:translateX(-50%)} .Membership .join_identify dd+dd { margin-top:.5em; } /* 마이페이지 - 팁 */ .Membership .join_tip { margin-top:2em; padding:2em; background:var(--color-board-gray1); border-radius:3px; } .Membership .join_tip>li { display:flex; font-size:1rem; line-height:1.4; gap:0 5px; flex-wrap:wrap; } .Membership .join_tip>li+li { margin-top:10px; } .Membership .join_tip>li strong { font-weight:bold; } /* 마이페이지 - 약관동의 */ .Membership .join_agree .titst2 { font-size:1.5rem; font-weight:bold; color:var(--color-board-base); margin-top:2rem; margin-bottom:.25rem; } .Membership .join_agree .termsBox { height:200px; overflow-x:hidden; overflow-y:scroll; border:1px solid var(--color-board-line); border-radius:3px; padding:1.5em; } .Membership .join_agree .termsList { padding:2%; } .Membership .join_agree .termsCheck { display:flex; justify-content: flex-end; margin-top:1em} .Membership .join_agree .termsCheck label { position:relative; } .Membership .join_agree .termsCheck label span { color:red;} /* 마이페이지 - 정보입력 */ .Membership .join_list { display:flex; flex-wrap:wrap; flex-flow:column; width:100%; margin-top:2em; border-top:2px solid var(--color-board-black); box-sizing:border-box; gap:10px; } .Membership .join_list>li { display:flex; flex-wrap:wrap; align-items:center; font-size:1rem; padding:.75rem; border-bottom:1px solid var(--color-board-black-opcity1); gap:5px 1em} .Membership .join_list>li strong { width:8em; color:var(--color-board-base); font-weight:500 } .Membership .join_list>li div.flex { flex:auto; display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px;} .Membership .join_list>li div.flex.radio label { margin-right:2em; } .Membership .join_list>li div.flex.tel input { max-width:8em; } .Membership .join_list>li div.flex.address input { flex:auto } .Membership .join_list>li div.flex.address .width7em { max-width:7em; } .Membership .join_list input, .Membership .join_list select, .Membership .join_list textarea { border-radius:3px; font-size:16px; } .Membership .join_list .small_txt { width:100%; display:block; margin-top:.25rem; font-size:.98rem; color:rgba(0,0,0,.64); } .Membership .join_list>li.pass_mod_input { display:none; } /* 마이페이지 - 정보입력 */ .Membership .join_complete { margin-top:2em; padding:2em; border-top:2px solid var(--color-board-black); border-bottom:1px solid var(--color-board-black-opcity1); --sizeHig:120px;} .Membership .join_complete .icon { position:relative; width:var(--sizeHig); height:var(--sizeHig); display:table; background-color:var(--color-board-gray1); border-radius:100%; margin:0 auto 1em auto; } .Membership .join_complete .icon::before { position:absolute; width:var(--sizeHig); height:var(--sizeHig); left:0; top:0; background-size:80% auto; background-position:50%; background-repeat:no-repeat; background-image:url(/resource/common/images/bbs/icon_complete.svg); content:'';} .Membership .join_complete strong { display:block; font-size:1.367em; color:var(--color-board-base); font-weight:600 } .Membership .join_complete>p { margin-top:1em; font-size:1.03rem; } @media all and (max-width:1024px){ /* 마이페이지 - 본인인증 */ .Membership .progress_bar { padding:1.5em .5em; } } @media all and (max-width:968px){ /* 마이페이지 - 정보입력 */ .Membership .join_list>li strong { width:100%; } .Membership .join_list>li div.flex { flex:100%; } } @media all and (max-width:868px){ /* 마이페이지 - 로그인 */ .Membership .loginBox { width:100%; } .Membership .loginBox .loginSns>ul>li { width:100%; } .Membership .loginBox strong { font-size:2rem; } /* 마이페이지 - 아이디/비밀번호 찾기 */ .Membership .idFind, .Membership .pwFind { width:100%; } .Membership .idFind h5, .Membership .pwFind h5 { font-size:2rem; } /* 마이페이지 - 본인인증 */ .Membership .mb_tit br { display:none; } .Membership .progress_bar { --sizeHig:80px;} .Membership .progress_bar ol { height:inherit; } .Membership .progress_bar ol>li { flex-flow:column; } .Membership .progress_bar ol>li .icon { display:table; } .Membership .progress_bar ol>li strong { display:block; margin-top:.5em } .Membership .progress_bar ol>li+li::before, .Membership .progress_bar ol>li+li::after { top:calc(40px - 7px); transform:translateY(0) rotate(45deg); } .Membership .progress_bar ol>li+li::after { left:-16px; } .Membership .progress_bar ol>li+li::before { left:-10px; } .Membership .join_identify dt { font-size:1.4rem; margin-bottom:1em } /* 마이페이지 - 이용약관 */ .Membership .join_agree .titst2 { font-size:1.4rem } } @media all and (max-width:668px){ /* 마이페이지 - 정보입력 */ .Membership .join_list>li { font-size:1.067rem; } .Membership .join_list input, .Membership .join_list select, .Membership .join_list textarea, .Membership .join_list button { flex:auto; } .Membership .join_list>li div.flex.tel select { max-width:6em; } } @media all and (max-width:468px){ /* 마이페이지 - 본인인증 */ .Membership .progress_bar { --sizeHig:60px; padding:.5em} .Membership .progress_bar ol { gap:10px; } .Membership .progress_bar ol>li { width:calc(50% - 5px); background:var(--color-board-white); border-radius:3px; padding:10px; } .Membership .progress_bar ol>li.pgr_on { background:rgba(37,129,215,0.1); } .Membership .progress_bar ol>li .icon { border-radius:0; background:none; box-shadow:inherit; } .Membership .progress_bar ol>li+li::before, .Membership .progress_bar ol>li+li::after { display:none; } .Membership .join_identify>ul>li { width:100%; } .Membership .join_identify>ul>li+li { margin-top:.75em; } .Membership .join_tip { padding:1.5em 1em; } /* 마이페이지 - 정보입력 */ .Membership .join_list>li { font-size:1.03rem; } } /************************************************* 신규 V4.1 ********************************************/ /* 본인인증 */ .verification { display:flex; flex-flow:column; } .verification .itembox_wrap { display:flex; gap:2em; } .verification .itembox_wrap .itembox { flex:auto; min-width:calc((100% - 4em) / 3); border-radius:1rem; padding:2rem; border:1px solid var(--color-board-line); box-sizing:border-box;} .verification .itembox_wrap .itembox h3 { font-size:1.6rem; margin-bottom:.75rem } .verification .itembox_wrap .textbox { font-size:.95rem; line-height:1.5; font-weight:400; } .verification .itembox_wrap .btn_list { display:flex; flex-flow:column; gap:10px; margin-top:1.5em; } .verification .itembox_wrap .btn_list>li>.button { display:flex; width:100%; height:60px; border-radius:8px; padding:0 20px; font-size:1rem; font-weight:500; justify-content:center; align-items:center; transition:all ease 0.2s} .verification .itembox_wrap .btn_list>li>.button>span { display:flex; position:relative; align-items:center; gap:0 15px;} .verification .itembox_wrap .btn_list>li>.button>span::before { display:inline-block; content:''; background-repeat:no-repeat; background-position:left center; background-size:contain; transition:all ease 0.2s} .verification .itembox_wrap .btn_list>li>.button.mobile>span::before { width:16px; height:20px; background-image:url(/resource/common/images/bbs/login/icon_mobile.svg); filter:brightness(100);} .verification .itembox_wrap .btn_list>li>.button.ipin>span::before { width:19px; height:20px; background-image:url(/resource/common/images/bbs/login/icon_ipin.svg); filter:brightness(100); } .verification .itembox_wrap .btn_list>li>.button.naver>span::before { width:17px; height:17px; background-image:url(/resource/common/images/bbs/login/icon_naver.svg); filter:brightness(100); } .verification .itembox_wrap .btn_list>li>.button.kakao>span::before { width:22px; height:20px; background-image:url(/resource/common/images/bbs/login/icon_kakao.svg); } .verification .itembox_wrap .btn_list>li>.button.facebook>span::before { width:12px; height:20px; background-image:url(/resource/common/images/bbs/login/icon_facebook.svg); filter:brightness(100); } .verification .itembox_wrap .btn_list>li>.button.mobile { background:var(--color-board-point); color:var(--color-board-white) } .verification .itembox_wrap .btn_list>li>.button.ipin { background:var(--color-board-mint); color:var(--color-board-white)} .verification .itembox_wrap .btn_list>li>.button.naver { background:var(--color-board-naver); color:var(--color-board-white)} .verification .itembox_wrap .btn_list>li>.button.kakao { background:var(--color-board-kakao);} .verification .itembox_wrap .btn_list>li>.button.facebook { background:var(--color-board-facebook); color:var(--color-board-white)} .verification .itembox_wrap .description { display:flex; flex-flow:column; margin-top:1.5em; } .verification .itembox_wrap .description>li { position:relative; padding-left:25px; font-size:.95rem; font-weight:400; color:var(--color-board-deep-point); line-height:1.2; } .verification .itembox_wrap .description>li::before { position:absolute; left:0; top:-1px; width:20px; height:20px; border:1px solid var(--color-board-deep-point); border-radius:100%; content:''; } .verification .itembox_wrap .description>li::after { position:absolute; left:7px; top:3.5px; width:5px; height:9px; border-style:solid; border-width:0 2px 2px 0; border-color:var(--color-board-deep-point); content:''; transform:rotate(45deg);} .verification .itembox_wrap .btn_list>li>.button.mobile:hover, .verification .itembox_wrap .btn_list>li>.button.mobile:focus { background:var(--color-board-deep-point); } .verification .itembox_wrap .btn_list>li>.button.ipin:hover, .verification .itembox_wrap .btn_list>li>.button.ipin:focus { background:var(--color-board-deep-mint); } .verification .itembox_wrap .btn_list>li>.button.naver:hover, .verification .itembox_wrap .btn_list>li>.button.naver:focus { background:var(--color-board-deep-naver); } .verification .itembox_wrap .btn_list>li>.button.kakao:hover, .verification .itembox_wrap .btn_list>li>.button.kakao:focus { background:var(--color-board-deep-kakao); color:var(--color-board-white) } .verification .itembox_wrap .btn_list>li>.button.facebook:hover, .verification .itembox_wrap .btn_list>li>.button.facebook:focus { background:var(--color-board-deep-facebook);} .verification .itembox_wrap .btn_list>li>.button.kakao>span:hover::before, .verification .itembox_wrap .btn_list>li>.button.kakao>span:focus::before { filter:brightness(100); } .verification .verification_icon_box { display:flex; flex-wrap:wrap; gap:10px 2em; border-radius:1rem; padding:2rem; border:1px solid var(--color-board-line); box-sizing:border-box; margin-top:2em; align-items:center; } .verification .verification_icon_box .icon { display:flex; width:80px; height:80px; border-radius:100%; position:relative; background:var(--color-board-light-point) } .verification .verification_icon_box .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; background:url(/resource/common/images/bbs/login/icon01.svg) no-repeat 55% 45% / auto 50%; content:''; } .verification .verification_icon_box .ex_list { width:calc(100% - 80px - 2em); display:flex; flex-flow:column; gap:5px; } .verification .verification_icon_box .ex_list>li { font-size:.98rem; font-weight:400; line-height:1.2 } .verification .verification_icon_box .ex_list>li>strong { font-weight:700; color:var(--color-board-point); } @media all and (max-width:1368px){ .verification .itembox_wrap { gap:1em; } .verification .itembox_wrap .itembox { min-width:calc((100% - 2em) / 3); } .verification .itembox_wrap .itembox { padding:1.5rem; } .verification .itembox_wrap .itembox h3 { font-size:1.5rem; } .verification .verification_icon_box { padding:1.5rem;} } @media all and (max-width:1168px){ .verification .itembox_wrap { flex-wrap:wrap; } .verification .itembox_wrap .btn_list>li>.button { height:55px; font-size:.95rem; padding:0 15px; } } @media all and (max-width:668px){ .verification .itembox_wrap .itembox h3 { font-size:1.3rem; } .verification .itembox_wrap .itembox { padding:1.25rem; } .verification .itembox_wrap .textbox { font-size:.9rem; line-height:1.35; } .verification .itembox_wrap .btn_list>li>.button.mobile>span::before { width:14px; height:18px; } .verification .itembox_wrap .btn_list>li>.button.ipin>span::before { width:16px; height:18px; } .verification .itembox_wrap .btn_list>li>.button.naver>span::before { width:15px; height:15px; } .verification .itembox_wrap .btn_list>li>.button.kakao>span::before { width:20px; height:18px; } .verification .itembox_wrap .btn_list>li>.button.facebook>span::before { width:10px; height:18px; } .verification .itembox_wrap .description>li { font-size:.9rem; padding-left:20px; } .verification .itembox_wrap .description>li::before { width:16px; height:16px; top:1px; } .verification .itembox_wrap .description>li::after { top:2.5px; left:6px; } .verification .verification_icon_box { padding:1.25rem; flex-flow:column; } .verification .verification_icon_box .icon, .verification .verification_icon_box .ex_list { width:100%; } .verification .verification_icon_box .icon { border-radius:8px; } .verification .verification_icon_box .icon::before { background-position:50% 50%; } } /* 단일 레이어 팝업 */ #popup_layer { position:fixed; top:0; left:0; z-index:10000; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.4);} .popup_box { position:relative; top:50%; left:50%; width:94%; max-width:700px; transform:translate(-50%, -50%); z-index:1002; box-sizing:border-box; background:#fff; box-shadow:2px 5px 10px 0px rgba(0,0,0,0.35); -webkit-box-shadow:2px 5px 10px 0px rgba(0,0,0,0.35); -moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35); } .popup_box .popup_cont { line-height:1.4rem; font-size:14px; word-break: break-word; overflow-y:auto; max-height: calc(100svh - 100px);} .popup_box .popup_btn { display:flex; flex-wrap:wrap; width:100%; height:3em;word-break:break-word; } .popup_box .popup_btn>li { position:relative; width:calc(100% / 2) } .popup_box .popup_btn .closePop { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; font-size:.987em; text-align:center; vertical-align:middle; text-decoration:none; background:var(--color-board-point);} .popup_box .popup_btn .closePop:before { content:''; display:block; position:absolute; top:.8em; right:29px; width:1px; height:21px; background:#fff; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);} .popup_box .popup_btn .closePop:after { content:''; display:block; position:absolute; top:.8em; right:29px; width:1px; height:21px; background:#fff; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);} .popup_box .popup_btn>li input[type="checkbox"] { position:absolute; width:100%; height:100%; opacity:0; } .popup_box .popup_btn>li .close_day { position:relative; width:100%; height:100%; cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.987em; } .popup_box .popup_btn>li:has(.close_day) { background:#222;} .popup_box .popup_btn>li .closePop:focus { outline-offset:-2px; outline:2px dotted var(--color-board-white) !important} .popup_box .popup_btn > li:has(input[type="checkbox"]:focus) .close_day { outline-offset:-2px; outline:2px dotted var(--color-board-white) !important;} .popup_box .popup_btn > li:focus-within .close_day { outline-offset:-2px; outline:2px dotted var(--color-board-white) !important; } .popup_overlay { position:fixed;top:0px;right:0;left:0;bottom:0;z-index:1001;background:rgba(0,0,0,0.5); } .popup_box .popup_btn>li .close_day::before { content:""; display:inline-block; width:25px; height:25px; overflow:hidden; background:url(/resource/common/images/bbs/icon_check.svg) no-repeat 50% 50% / auto 10px; opacity:.74; margin-right:5px; filter:invert(1); } .popup_box .popup_btn>li input[type="checkbox"]:checked + .close_day::before{ opacity:1; } .popup_box .popup_btn>li input[type="checkbox"]:focus + .close_day::before { outline-offset:2px; outline:2px dotted #000 !important} /* 슬라이드 */ .layer_popup_wrap { position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; color:#fff} .layer_popup_cont { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; max-height:calc(100svh - 5em); overflow:hidden; } .layer_popup_wrap .con_inner { width:94%; max-width:1600px; } .layer_popup_cont .tit { font-size:1.563rem; font-weight:700; position:relative; display:inline-flex; padding-top:15px; line-height:1 } .layer_popup_cont .tit:before { content:''; position:absolute; top:8px; right:-10px; width:8px; height:8px; border-radius:100%; background-color:var(--color-board-point); } .layer_popup_cont .layerPopSwiper { width:calc(100% + 30px); margin-left:-15px; margin-right:-15px; margin-top:15px; } .layer_popup_cont .layerPopSwiper .swiper-slide { width:33.333%; } .layer_popup_cont .layerPopSwiper .swiper-slide>a { display:flex; width:calc(100% - 30px); margin-left:15px; margin-right:15px; } .layer_popup_cont .layerPopSwiper .swiper-slide .img { position:relative; width:100%; height:0; padding-top:100%; overflow-y:auto; overflow-x:hidden } .layer_popup_cont .layerPopSwiper .swiper-slide .img::-webkit-scrollbar { -webkit-appearance:none; width:4px;} .layer_popup_cont .layerPopSwiper .swiper-slide .img::-webkit-scrollbar-thumb { background-color:var(--color-white); border-radius:5px; } .layer_popup_cont .layerPopSwiper .swiper-slide .img::-webkit-scrollbar-track { border-radius:5px; background-color:rgba(255,255,255,.5); } .layer_popup_cont .layerPopSwiper .swiper-slide .img img { position:absolute; top:0; left:50%; min-width:100%; min-height:100%; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); object-fit:cover; -o-object-fit:cover;} .layer_popup_cont .swiper_bottom { position:absolute; right:0; top:0; display:flex; justify-content:center; align-items:center; gap:20px; } .layer_popup_cont .swiper_bottom .control button { position:relative; width:30px; height:30px; display:flex; justify-content:center; align-items:center;} .layer_popup_cont .swiper_bottom .control { display:flex; justify-content:center; align-items:center; height:40px; background:var(--color-board-point); border-radius:40px; padding:0 10px 0 20px; } .layer_popup_cont .swiper_bottom .swiper_prev::before, .layer_popup_cont .swiper_bottom .swiper_next::before { position:absolute; width:8px; height:8px; border-style:solid; background:none; border-width:2px 2px 0 0; border-color:#fff; transform:rotate(45deg); content:'';filter: inherit; } .layer_popup_cont .swiper_bottom .swiper_next::before { margin-left:-4px; } .layer_popup_cont .swiper_bottom .swiper_prev::before { border-width:0 0 2px 2px; margin-right:-2px } .layer_popup_cont .swiper_bottom .swiper_page { width:auto; display:flex; justify-content:center; align-items:center; font-size:.9rem; margin:0; line-height:1; color:#fff; gap:7px; margin-right:10px;} .layer_popup_cont .swiper_bottom .swiper-pagination-current { font-weight:bold; color:var(--color-board-white);} .layer_popup_cont .swiper_bottom .swiper-pagination-total { font-weight:300; opacity:.9;color:var(--color-board-white);} .layer_popup_cont .swiper_bottom .swiper_page i { position:relative; display:inline-block; width:4px; height:4px; background:rgba(255,255,255,.5); vertical-align:middle; border-radius:100%; } .layer_popup_cont .swiper_bottom .swiper_page i::after { display:none; } .layer_popup_cont .swiper_bottom .swiper_auto::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background-position:50% 50%; background-repeat:no-repeat; background-size:auto 10px; filter:invert(1); } .layer_popup_cont .swiper_bottom .swiper_auto::before { background-image:url(/resource/common/images/bbs/icon_stop.svg); } .layer_popup_cont .swiper_bottom .swiper_auto.paused::before { background-image:url(/resource/common/images/bbs/icon_play.svg); } .layer_popup_cont .layer_popup_btn { display:flex; justify-content:center; align-items:center; gap:10px;} .layer_popup_cont .layer_popup_btn>li { position:relative; display:flex; justify-content:center; align-items:center;} .layer_popup_cont .layer_popup_btn>li input[type="checkbox"] { position:absolute; width:100%; height:100%; opacity:0; } .layer_popup_cont .layer_popup_btn>li label { position:relative; padding-left:35px; cursor:pointer; font-size:.95rem; } .layer_popup_cont .layer_popup_btn>li input { position:absolute; width:1px; height:1px; opacity:0; } .layer_popup_cont .layer_popup_btn>li label::after { position:absolute; width:22px; height:22px; border:1px solid var(--color-white); border-radius:100%; content:''; left:0; top:0; } .layer_popup_cont .layer_popup_btn>li label::before { content: ""; position:absolute; top:4px; left:8px; width:6px; height:10px; overflow:hidden; border-style:solid; border-width:0 2px 2px 0; border-color:var(--color-board-white); opacity:0; transform:rotate(45deg);} .layer_popup_cont .layer_popup_btn>li input:checked + label::before { opacity:1; } .layer_popup_cont .layer_popup_btn .popup_close_button { display:flex; position: relative; width:46px; height:46px; transition:all ease 0.3s } .layer_popup_cont .layer_popup_btn .popup_close_button::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:var(--color-board-point); opacity:.5; border-radius:100%; } .layer_popup_cont .layer_popup_btn .popup_close_button::after { position:absolute; width:calc(100% - 16px); height:calc(100% - 16px); left:8px; top:8px; content:''; background:var(--color-board-point); border-radius:100%; } .layer_popup_cont .layer_popup_btn .popup_close_button>em { position:relative; width:100%; height:100%; transition:all ease 0.3s } .layer_popup_cont .layer_popup_btn .popup_close_button>em::before { position:absolute; width:2px; height:14px; left:50%; top:50%; background:var(--color-board-white); transform:translate(-50%,-50%) rotate(45deg); content:''; z-index:3} .layer_popup_cont .layer_popup_btn .popup_close_button>em::after { position:absolute; width:2px; height:14px; left:50%; top:50%; background:var(--color-board-white); transform:translate(-50%,-50%) rotate(-45deg); content:''; z-index:3} .layer_popup_cont .layer_popup_btn .popup_close_button:hover { transform:rotate(180deg); } .layer_popup_bg { position:absolute; top:0; left:0; right:0; bottom:0; background:rgb(0, 0, 0, 0.9); } @media all and (max-width:1368px){ .layer_popup_cont .layerPopSwiper { width:calc(100% + 20px); margin-left:-10px; margin-right:-10px; } .layer_popup_cont .layerPopSwiper .swiper-slide>a { width:calc(100% - 20px); margin-left:10px; margin-right:10px; } } @media all and (max-width:1024px){ .layer_popup_cont .layerPopSwiper .swiper-slide { width:50%; } .layer_popup_cont .swiper_bottom .control { height:36px; } .layer_popup_cont .layer_popup_btn .popup_close_button { width:42px; height:42px; } .layer_popup_cont .layer_popup_btn>li label { padding-left:30px; font-size:.9rem; } .layer_popup_cont .tit { padding-top:10px; } .layer_popup_cont .tit:before { width:6px; height:6px; right:-8px; top:4px; } } @media all and (max-width:768px){ .layer_popup_cont { padding-bottom:52px; } .layer_popup_cont .swiper_bottom { position:initial; } .layer_popup_cont .swiper_bottom .control { position:absolute; right:0; top:2px; } .layer_popup_cont .layer_popup_btn { position:absolute; width:max-content; left:50%; bottom:0; transform:translateX(-50%); } .layer_popup_cont .tit { padding-top:8px; } .layer_popup_cont .tit:before { width:6px; height:6px; right:-8px; top:0; } } @media all and (max-width:568px){ .layer_popup_cont .layerPopSwiper .swiper-slide { width:100%; } } @media all and (max-width:468px){ .layer_popup_cont .tit { font-size:1.363rem; } .layer_popup_cont .swiper_bottom .control { height:32px; padding:0 5px 0 15px } .layer_popup_cont .swiper_bottom .swiper_page { font-size:.85rem; margin-right:5px; } .layer_popup_cont .swiper_bottom .control button { width:25px; height:25px; } .layer_popup_cont .layerPopSwiper { margin-top:15px; } } @media all and (max-width:320px){ .layer_popup_cont .tit>span { display:none; } } /* 휴진안내 */ #boardWrap .calendar_wrap { position:relative; display:flex; flex-wrap:wrap; align-items:stretch; gap:30px; margin-bottom:3em} #boardWrap .calendar_wrap .calendar_box { width:calc(55% - 15px); } #boardWrap .calendar_wrap .calendar_box .year { display:flex; align-items:center; justify-content:center; height:80px; } #boardWrap .calendar_wrap .calendar_box .year strong { padding:0 2em; font-size:2.19em; font-weight:700; } #boardWrap .calendar_wrap .calendar_box .year button { position:relative; width:40px; height:40px; font-size:.8em; border:1px solid var(--color-board-line); border-radius:100%; text-align:center; margin-top:-3px } #boardWrap .calendar_wrap .calendar_box .year button::before { display:block; position:absolute; top:50%; left:50%; content:''; } #boardWrap .calendar_wrap .calendar_box .year button.prev::before { width:10px; height:10px; border-style:solid; border-width:0 0 2px 2px; border-color:var(--color-board-base); transform:translate(-35%, -50%) rotate(45deg); } #boardWrap .calendar_wrap .calendar_box .year button.next::before { width:10px; height:10px; border-style:solid; border-width:2px 2px 0 0; border-color:var(--color-board-base); transform:translate(-65%, -50%) rotate(45deg); } #boardWrap .calendar_wrap .calendar_list { display:flex; flex-flow:column; gap:5px; text-align:center; justify-content:space-around; } #boardWrap .calendar_wrap .calendar_list .sun { color:#ff3c08 !important} #boardWrap .calendar_wrap .calendar_list .sat { color:#266cd2 !important} #boardWrap .calendar_wrap .calendar_list>ul { display:flex; flex-wrap:wrap; } #boardWrap .calendar_wrap .calendar_list>ul>li { flex:1; } #boardWrap .calendar_wrap .calendar_list ul.weekdays { background:#ebf2f8; border-radius:10px; } #boardWrap .calendar_wrap .calendar_list ul.weekdays li { padding:15px 10px; font-size:1em; font-weight:600 } #boardWrap .calendar_wrap .calendar_list .days { display:flex; align-items:stretch; zoom:1; background:rgba(0,0,0,.05); border-radius:10px; overflow:hidden; } #boardWrap .calendar_wrap .calendar_list .days>li { position:relative; height:60px; } #boardWrap .calendar_wrap .calendar_list .date { position:absolute; width:calc(100% - 10px); height:calc(100% - 10px); top:5px; left:5px; display:flex; justify-content:center; align-items:center; text-align:center; font-size:1em; cursor:pointer; border-radius:10px; } #boardWrap .calendar_wrap .calendar_list .date.choice { background:var(--color-board-deep-point); color:var(--color-board-white) !important; font-weight:700 } #boardWrap .calendar_wrap .calendar_list .date.today { background:var(--color-board-point); color:var(--color-board-white) !important; font-weight:700 } #boardWrap .calendar_wrap .calendar_list .date.have::before { position:absolute; left:calc(50% - 3px); bottom:15%; width:6px; height:6px; background:#ff3c08; border-radius:100%; content:''; z-index:3} #boardWrap .calendar_wrap .choice_wrap { width:calc(45% - 15px); } #boardWrap .calendar_wrap .choice_wrap .date_selec { display:flex; align-items:center; justify-content:center; height:80px; } #boardWrap .calendar_wrap .choice_wrap .date_selec span { display:block; font-size:1.56em; font-weight:700; color:var(--color-board-point); line-height:1; margin-top:.2rem } #boardWrap .calendar_wrap .choice_wrap .con_scroll { position:relative; width:100%; display:flex; gap:5px; overflow-x:hidden; overflow-y:auto; max-height:320px; border:1px solid var(--color-board-line); background:var(--color-board-white); border-radius:10px; padding:1em 1em 1em 1.5em; } #boardWrap .calendar_wrap .choice_wrap .con_scroll .list::-webkit-scrollbar { -webkit-appearance: none; width:5px;} #boardWrap .calendar_wrap .choice_wrap .con_scroll .list::-webkit-scrollbar-thumb { background-color:var(--color-board-point); border-radius:10px; border:1px solid var(--color-board-point) } #boardWrap .calendar_wrap .choice_wrap .con_scroll .list::-webkit-scrollbar-track { border-radius:10px; background-color:var(--color-board-gray) ; } #boardWrap .calendar_wrap .choice_wrap .con_scroll .list { display:flex; width:100%; flex-flow:column; position:relative; overflow-x:hidden; overflow-y:auto; padding-right:5px;} #boardWrap .calendar_wrap .choice_wrap .con_scroll .list>li { border-bottom:1px dashed var(--color-board-line); } #boardWrap .calendar_wrap .choice_wrap .con_scroll .list>li>a { padding:2px 0; display:block; width:100%; } #boardWrap .calendar_wrap .choice_wrap .con_scroll .list>li>a span { display:inline-block; width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; vertical-align:middle; } #boardWrap ul.exmark_list { margin-top:1em; } #boardWrap ul.exmark_list>li { position:relative; font-size:.95rem; font-weight:300; line-height:1.2; color:var(--color-board-point);} #boardWrap ul.exmark_list>li+li { margin-top:.5em; } #boardWrap ul.exmark_list>li::before { display:inline-block; vertical-align:middle; width:14px; height:14px; background:url(/resource/common/images/bbs/icon_info.svg) no-repeat 50% 50% / cover; content:''; margin-right:4px; margin-top:-3px; } @media all and (max-width:1368px){ #boardWrap .calendar_wrap .calendar_box .year, #boardWrap .calendar_wrap .choice_wrap .date_selec { height:60px; } #boardWrap .calendar_wrap .calendar_box { width:calc(50% - 15px); } #boardWrap .calendar_wrap .choice_wrap { width:calc(50% - 15px); } #boardWrap .calendar_wrap .calendar_box .year strong { padding:0 1em; font-size:2em; } #boardWrap .calendar_wrap .calendar_box .year button { width:32px; height:32px; } #boardWrap .calendar_wrap .calendar_box .year button.next::before, #boardWrap .calendar_wrap .calendar_box .year button.prev::before { width:7px; height:7px; } #boardWrap .calendar_wrap .calendar_list .days>li { height:55px; } #boardWrap .calendar_wrap .choice_wrap .con_scroll { max-height:280px; } #boardWrap .calendar_wrap .choice_wrap .date_selec span { font-size:1.46em; } } @media all and (max-width:1024px){ #boardWrap .calendar_wrap { gap:20px; } #boardWrap .calendar_wrap .calendar_box { width:calc(45% - 10px); } #boardWrap .calendar_wrap .choice_wrap { width:calc(55% - 10px); } #boardWrap .calendar_wrap .calendar_box .year, #boardWrap .calendar_wrap .choice_wrap .date_selec { height:50px; } #boardWrap .calendar_wrap .calendar_box .year strong { font-size:1.5rem; } #boardWrap .calendar_wrap .choice_wrap .date_selec span { font-size:1.3rem; } #boardWrap .calendar_wrap .choice_wrap .con_scroll .list>li>a { font-size:.95rem; } } @media all and (max-width:768px){ #boardWrap .calendar_wrap { margin-bottom:2em; } #boardWrap .calendar_wrap .calendar_box { width:100%; } #boardWrap .calendar_wrap .choice_wrap { width:100%; } #boardWrap .calendar_wrap .choice_wrap .date_selec { height:inherit; margin-bottom:15px; } #boardWrap .calendar_wrap .choice_wrap .con_scroll { max-height:230px; } } @media all and (max-width:468px){ #boardWrap .calendar_wrap .calendar_box .year strong { font-size:1.4rem; } #boardWrap .calendar_wrap .choice_wrap .date_selec span { font-size:1.267rem; } #boardWrap .calendar_wrap .calendar_box .year button { width:30px; height:30px; } #boardWrap .calendar_wrap .calendar_list .days>li { height:50px; } #boardWrap .calendar_wrap .choice_wrap .con_scroll { padding:1em; } } @media all and (max-width:320px){ .headList { padding:10px; } .headList .SearchInfo .data_list>li>a { display:none; } }