@charset "utf-8"; /* layout */ #boardWrap { position:relative; width:100%; max-width:1600px; margin-left:auto; margin-right:auto;} @media all and (max-width: 1668px) { #boardWrap {width:94%;} } .scroll { padding-bottom:15px; overflow-x:auto;} .typeC { clear:both; } .typeR { float:right; } .typeL { float:left; } .tal { text-align:left; } .tar { text-align:right; } .tac { text-align:center; } .essential { color:#c5010a; } .lineL { border-left:1px solid #e0e0e0; } .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:#848484; 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:#efefef; border-radius:50%; } .check_input:checked + .check_label::before { background:#efefef 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 #222; outline-offset:2px; outline:2px dotted #222 } /* Check box */ .check_input1 { position:absolute; width:1px; height:1px; opacity:0; } .check_label1 { position:relative; padding-left:30px; color:#848484; cursor:pointer; line-height:25px; font-weight:400 } .check_label1::before { content:""; position:absolute; top:0; left:0; width:22px; height:22px; overflow:hidden; background-color:#fff; border:1px solid rgba(0,0,0,.1); 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 #222; outline-offset:2px; outline:2px dotted #222 } /* Input radio */ .radio_input { position:absolute; width:1px !important; height:1px !important; opacity:0; } .radio_label { position:relative; padding-left:30px; color:#848484; 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:#fff; border:1px solid #848484; border-radius:50%; } .radio_input:checked + .radio_label::before { border:.4em solid #262626; } .radio_input:focus + .radio_label::before { outline-offset:2px; outline:2px dotted #222} /*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; } #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:#2581d7; color:#fff; 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:#fff; transition:all ease 0.2s;} #boardWrap .btn.white { background:#fff; border-color:#dedede; font-weight:500; } #boardWrap .btn.white:hover, #boardWrap .btn.white:focus { border-color:#222; filter:drop-shadow(1px 2px 2px #c3c3c3)} #boardWrap .btn.white>span { color:#222; } #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:#fff; border-color:#222; } #boardWrap .btn.sm.white:hover span, #boardWrap .btn.sm.white:focus span { color:#222; } #boardWrap .btn.white:hover, #boardWrap .btn.white:focus { background:#2581d7; border-color:#2581d7} #boardWrap .btn.white:hover span, #boardWrap .btn.white:focus span { color:#fff; } #boardWrap .btn.black { background:#222; border-color:#222; font-weight:500; } #boardWrap .btn.black:hover, #boardWrap .btn.black:focus { background:#222; border-color:#222; filter:drop-shadow(1px 2px 2px #c3c3c3)} #boardWrap .btn.black>span { color:#fff; } #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.w100 { width:100%; } #boardWrap .btn:focus { outline-offset:2px; outline:2px dotted #222} /*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 #e0e0e0; border-left:1px solid #e0e0e0 } .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 #e0e0e0; border-bottom:1px solid #e0e0e0; font-weight:400; } .bd_tabNav>li>a { display:table; position:relative; width:100%; height:100%; padding:12px; color:#4a4a4a; text-align:center; line-height:1.3; } .bd_tabNav>li>a:hover { color:#2878d3; } .bd_tabNav>li.tab_on>a { color:#fff; background-color:#2878d3; } /*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:#747474; width:35px; height:35px; border:1px solid #e0e0e0; line-height:35px;} .paging a.this { font-size:.94rem; color:#282828; font-weight:400; border:1px solid #282828;} .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 { display:flex; flex-wrap:wrap; gap:10px 0; align-items:center; justify-content:space-between; /*border-top:2px solid #222; border-bottom:1px solid rgba(0,0,0,.1);*/ padding:15px 0 0;} .headList .bdTotal, .headList .SearchInfo fieldset {display:flex;flex-wrap:wrap;align-items: center;} .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:#2878d3; font-weight:500; } .headList .status-filter{display:flex; flex-wrap:wrap; gap:.5em} .headList .status-filter button{padding:.6em 1em; border:1px solid #ddd;} .headList .status-filter button.active{background:var(--color-point); color:#fff; border-color:var(--color-point);} .headList .status-filter:before{display:none;} @media all and (max-width:520px){ .headList .status-filter{margin:.3em 0 0 !important; padding-left:0 !important; gap:.2em; width:100%;} } .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:rgba(0,0,0,.5); 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:#222; color:#fff; vertical-align:middle; min-height:40px; } .headList .SearchInfo button[type="submit"]:focus { outline-offset:-3px; outline:2px dotted #fff} .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 rgba(0,0,0,.1); border-radius:20px; font-size:15px; font-weight:500;} .headList .list_align>li a.on { border-color:#2878d3; background:#2878d3; color:#fff } .headList.only { justify-content:center; background:#efefef} .headList .SearchInfo .search_list>li { position:relative; } .headList .SearchInfo .search_list .btn_listcount { position:relative; width:40px; min-height:40px; padding:0; background-color:#fff; border:1px solid #000; } .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:#fff; border:1px solid #000; 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:rgba(0,0,0,.74); line-height:1; padding-bottom:.5em; margin-bottom:.5em; border-bottom:1px solid #ccc; } .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 rgba(0,0,0,.2); border-radius:5px; background:#fff; font-size:.85rem; } .headList .SearchInfo .search_list .listcount_wrap>ul>li>button.on, .headList .SearchInfo .search_list .listcount_wrap>ul>li>button:focus { background:#222; color:#fff; border:1px solid #222;} .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:#2878d3!important} /* 문화관광용 검색단 */ .tour_search_box .tab { position:relative; display:flex; flex-wrap:wrap; border:3px solid #282828; margin-bottom:25px; } .tour_search_box .tab>li { width:33.333%; padding:0 20px;} .tour_search_box .tab>li+li { border-left:1px solid rgba(0,0,0,.1); } .tour_search_box .tab>li>button { display:block; width:100%; height:100%; text-align:left; font-size:1.03rem; font-weight:500; height:70px; } .tour_search_box .tab>li>button.btn1 { background:url(/resource/common/images/bbs/icon_tour01.svg) no-repeat right center / auto 50%; } .tour_search_box .tab>li>button.btn2 { background:url(/resource/common/images/bbs/icon_tour02.svg) no-repeat right center / auto 50%; } .tour_search_box .tab>li>button.btn3 { background:url(/resource/common/images/bbs/icon_tour03.svg) no-repeat right center / auto 50%; } .tour_search_box .tab>li>button.btn4 { background:url(/resource/common/images/bbs/icon_tour04.svg) no-repeat right center / auto 50%; } .tour_search_box .tab>li>button.btn5 { background:url(/resource/common/images/bbs/icon_tour05.svg) no-repeat right center / auto 50%; } .tour_search_box .search_box { display:none; position:absolute; width:calc(100% + 6px); top:70px; background:#f2f2f2; border:3px solid #282828; border-top-width:0; left:-3px; z-index:3; padding:25px; } .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>li { display:flex; align-items:center; gap:0 5px; color:#222; font-weight:400 } .tour_search_box .search_box .bot_btn { width:100%; margin-top:1em; border-top:1px solid rgba(0,0,0,.2); padding-top:1em; text-align:center } .tour_search_box .search_box .bot_btn button { width:7em; height:35px; color:#fff; font-size:.95rem} .tour_search_box .search_box .bot_btn button[type="submit"] { background:#2878d3; } .tour_search_box .search_box .bot_btn button[type="button"] { background:#222; } .tour_search_box .search_box .bot_btn button[type="submit"]:focus { outline-offset:-4px; outline:2px dotted #fff } .tour_search_box .search_box .bot_btn button[type="button"]:focus { outline-offset:-4px; outline:2px dotted #fff } /* 문화관광용 검색단 출력수 다른버전 */ .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; } /* 농수산물도매시장용 */ .market { position:relative; } .market .poom { display:flex; flex-wrap:wrap; width:100%; justify-content:end; gap:5px 10px; align-items:center } .market .poom .poom_text { order:1; font-size:.95rem; font-weight:400; opacity:.74; line-height:1.3; text-align:right} .market .poom input { order:2; border-radius:3px; border-color:rgba(0,0,0,.2); } .market .SearchInfo .search_list { width:100%; gap:7px; flex-wrap:wrap; justify-content:end; background:rgba(0,0,0,.05); padding:15px 2em; border-radius:10px; /*border:1px solid rgba(13,123,78,.5); */ } .market .SearchInfo .search_list>li { display:flex; flex-wrap:wrap; gap:7px; align-items:center} .market .SearchInfo .data_list { flex:auto !important; margin:0; flex-wrap:wrap; gap:7px; } .market .SearchInfo .data_list>li { flex:auto !important; max-width:inherit; display:flex; flex-wrap:wrap; gap:7px; align-items:center } .market .SearchInfo .data_list>li>select { flex:auto; } .market .SearchInfo .data_list>li+li { margin-left:0; } .market .SearchInfo .data_list>li+li::before { display:none; } .market .SearchInfo select { border-color:rgba(0,0,0,.2); border-radius:3px; } .market .SearchInfo .search_list>li:has(div.flex) { width:100%; order:10; margin-top:10px; display:flex; gap:10px;} .market .SearchInfo .search_list .flex { width:100%; display:flex; flex-wrap:wrap; gap:7px; align-items:center} .market .SearchInfo .search_list .flex>label { font-size:.98rem; font-weight:600; color:#222 } .market .SearchInfo .search_list .flex .data_list { flex:auto !important; } @media all and (max-width:1068px){ .market .SearchInfo .search_list { padding:15px 1em; } } @media all and (max-width:768px){ .market .SearchInfo .search_list .flex>label { width:100%;} } /* 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:0; 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 rgba(0,0,0,.1); } .tour_search_box.col06 .tab>li:nth-child(n+4):nth-child(-n+6) .search_box { top:120px; } } @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 rgba(0,0,0,.1); font-size:14px;} /* 문화관광용 검색단 */ .tour_search_box .tab>li { padding:0 15px;} .tour_search_box .tab>li>button { font-size:1rem; height:60px; } .tour_search_box .search_box { top:60px; padding:15px; } .tour_search_box .search_box>ul { gap:10px 20px; } } @media all and (max-width:668px){ /* 문화관광용 검색단 */ .tour_search_box .tab>li { width:100%; } .tour_search_box .tab>li>button { font-size:1rem; height:45px; } .tour_search_box .tab>li+li { border-left:none; border-top:1px solid rgba(0,0,0,.1); } .tour_search_box .search_box { top:137px; } .tour_search_box .search_box .bot_btn button { width:5em; height:32px; font-size:.9rem; } /* 문화관광용 검색단 출력수 다른버전 */ .tour_search_box.col06 .tab>li+li { border-left:1px solid rgba(0,0,0,.1); } } @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 } } /*list basic_table*/ .list_group .bbs_table { width:100%; margin:1.25rem 0; display:table; border-collapse:separate; table-layout:auto; border-top:2px solid #222 } .list_group .bbs_table th, .bbs_table td { text-align:center; padding:18px 5px;} .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:400; color:#282828;border-bottom:1px solid rgba(0,0,0,.1);} .list_group .bbs_table td { border:1px solid transparent; border-bottom:1px solid rgba(0,0,0,.1); 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:#e93030; text-align:center; line-height:17px; content:'N'; color:#fff; 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:#f4f6f9;} .list_group .bbs_table .colNotice .icoNotice span { position:relative; display:inline-block; background:#222; color:#fff; 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:#38393B; border:1px solid #38393B;} .list_group .bbs_table .txt_line2 { color:#2878d3; border:1px solid #2878d3;} .list_group .bbs_table .txt_link1 { background-color:#38393B; color:#fff;} .list_group .bbs_table .txt_link2 { background-color:#2878d3; color:#fff } .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; } /* 모바일용 타이틀 */ .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; filter:drop-shadow(10px 6px 6px #c3c3c3); } .list_group .bbs_table tbody tr:hover td { border-color:#2878d3; border-bottom:1px solid #2878d3; background-color:#fff; } .list_group .bbs_table tbody tr:hover td:first-child { border-color:#2878d3; border-radius:16px 0 0 16px; } .list_group .bbs_table tbody tr:hover td:last-child { border-color:#2878d3; 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; border-bottom:1px solid rgba(0,0,0,.1);} .list_group .bbs_table td.name, .list_group .bbs_table td.date, .list_group .bbs_table td.views { display:inline-block; } .list_group .bbs_table .bbslist_none { display:block; } /* 모바일용 타이틀 */ .mtitle { display:inline-block; font-weight:bold; color:rgba(0,0,0,.74); } .mtitle::after { display:inline-block; vertical-align:middle; content:':'; margin:-3.5px 5px 0; font-weight:300; color:rgba(0,0,0,.5); } /* 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 #c3c3c3); background-color:#f1f5fa; border-radius:16px} .list_group .bbs_table tbody tr:hover::before { position:absolute; width:100%; height:100%; border-radius:16px; border:1px solid #2878d3; 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);} } /*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 rgba(0,0,0,.1); padding:1.5em; transition:0.3s ease 0s; } .list_group .text_list>li:hover, .list_group .text_list>li:focus { border-color:#2878d3; box-shadow:5px 5px 5px rgba(0,0,0,.05);} .list_group .text_list>li.nt_import { background:#f8fafd; } .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:#2878d3; color:#fff; 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:#fff; line-height:1; font-size:.75rem; content:'new'; background:#e93030; 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:#222 } .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:#888; } .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%; } } /* 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:#222; font-weight:bold;} .calendarWrap .sort_area .year_ctrl p { display:flex; gap:2px; } .calendarWrap .sort_area .year_ctrl a { display:block; border:1px solid #ebebeb; width:36px; height:36px; text-indent:-9999px; border:1px solid #e0e0e0;} .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 #222; } .calendarWrap .calendar table th { height:60px; font-size:17px; font-weight:400; padding:5px; border-bottom:1px solid #e0e0e0; color:#282828;} .calendarWrap .calendar table td { width:14.285714%; height:150px; padding:10px; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0; text-align:center; vertical-align:top; position:relative} .calendarWrap .calendar table td:hover { background-color:#f4f6f8;} .calendarWrap .calendar table th:first-child, .calendarWrap .calendar table td:first-child { border-left:1px solid #e0e0e0;} .calendarWrap .calendar table th:last-child { border-right:1px solid #e0e0e0;} .calendarWrap .calendar .num { text-align:right; color:#949494; font-size:15px; font-weight:400; letter-spacing:0;display:block} .calendarWrap .calendar .sun { color:#d20119;} .calendarWrap .calendar .sat { color:#1a68de;} .calendarWrap .calendar .today { background-color:#f4f6f8;} .calendarWrap .calendar .today span { color:#343434;} .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:#38393B; color:#fff;} .calendarWrap .calendar a.more { border:1px solid #ddd;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:#fff; border-color:#222; filter:drop-shadow(1px 2px 2px #c3c3c3)} .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:#fff; border-radius:1em; transform:translate(-50%,-50%);} .calendarwhole h1 { text-align:center; color:#222; margin-bottom:10px; font-weight:600} .calendarwhole .close { background:#222; padding:7px 15px; text-align:center; margin:15px auto 0 auto; display:table; border-radius:3px; line-height:1; color:#fff;} .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:#fff; 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.point01 {color:var(--color-point);} .schedule>li>a i.point02 {color:var(--color-point2);} .schedule>li>a i.point03 {color:#008a7f} .schedule>li>a i.point04 {color:#008a3a;} /* 카테고리 출력시 */ .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:#fff } .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:.8rem; padding:5px; letter-spacing:-.065em;} .calendarWrap .calendar .schedule>li>a i, .calendarWrap .calendar ol.schedule>li a::before { display:none; } } @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; } .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%,-30%); display:flex; justify-content:center;} .calendarWrap .calendar a.more { font-size:0; width:26px; height:26px; padding:0; border-radius:100%; border:none; background:#1a68de; } .calendarWrap .calendar a.more:hover, .calendarWrap .calendar a.more:focus { background:#1a68de; border-color:none; } } @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:#fafafa; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; background-image:url(/planweb/upload/board/4028a6109b68d704019b7223a2ae1a88/original/d9324cbc-1be7-4eee-8333-4614aefe3af6.jpg);} .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:#fff; border-radius:15px; color:#2878d3; 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:#2878d3; 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:#222; 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:#888; overflow:hidden } .gallery_list>ul>li .gl_info>dd.part { display:flex; flex-wrap:wrap; gap:5px 15px; margin-top:1em; color:#888; margin-bottom:-.65em } .gallery_list>ul>li .gl_info>dd.part span+span::before { display:inline-block; width:1px; height:14px; background:#ccc; 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:#888; } .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 rgba(0,0,0,.1); 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:#2878d3; color:#fff; border-color:#2878d3; box-shadow:5px 5px 5px rgba(0,0,0,.05); } /* 정보 */ .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:#222; 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%;*/ padding-top: calc(100% / 3 * 4.216); } /* 갤러리 라인 스타일 */ .gallery_list .line>li { border:1px solid rgba(0,0,0,.1); } .gallery_list .line>li .gl_info { padding:1.25em; margin-top:0; } .gallery_list .line>li:hover, .gallery_list .line>li:focus { border-color:#2878d3; box-shadow:5px 5px 5px rgba(0,0,0,.05); } .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 rgba(0,0,0,.1); } .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 rgba(0,0,0,.1); 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:#2878d3; } .gallery_list .download_btn .icon.zip { background-image:url(/resource/common/images/bbs/img_zip.png); background-color:#62a8e3; } /* 문화관광용 */ .gallery_list .like_btn { position:absolute; right:.5em; top:.5em; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:#fff; 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:#fafafa; padding:10px; font-size:14px; font-weight:400 } .gallery_list .hit { position:relative; } .gallery_list .hit>i::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 #ccc; background:#fff; 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:#222; } .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:#2878d3; padding:3px 5px; font-size:.85rem; color:#fff; border-radius:3px;}/* 청원진행 */ .gallery_list .hit .sns.cate2 { background:#24ad93; padding:3px 5px; font-size:.85rem; color:#fff; border-radius:3px;}/* 답변준비 */ .gallery_list .hit .sns.cate3 { background:#293591; padding:3px 5px; font-size:.85rem; color:#fff; border-radius:3px;}/* 답변완료 */ .gallery_list .hit .sns.cate4 { background:#3d3d3d; padding:3px 5px; font-size:.85rem; color:#fff; border-radius:3px;}/* 청원종료 */ .gallery_list .hit .sns.cate5 { background:#e0233b; padding:3px 5px; font-size:.85rem; color:#fff; border-radius:3px;}/* 부결 */ .gallery_list .hit .sns.cate6 { background:#664d8e; padding:3px 5px; font-size:.85rem; color:#fff; 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:#2878d3; color:#fff; } .ex_list>ul>li .gl_thumb .state2 { background:#222; color:#fff; } .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:rgba(0,0,0,.74); color:#fff; } .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%; } } /* faq 게시판 */ /*#boardWrap .faq_list { margin-top:2em; border-top:2px solid #222; }*/ #boardWrap .faq_list>li { border-bottom:1px solid rgba(0,0,0,.1); } #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 #2581d7; margin-right:10px; } #boardWrap .faq_list>li .question .icon_q::before { display:inline-block; width:30px; height:30px; content:'Q'; color:#2581d7; 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:#888; 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:#fafafa; /*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:#222; } #boardWrap .faq_list>li .faq_list_con .icon_a::before { display:inline-block; width:30px; height:30px; content:'A'; color:#fff; 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:#fff; border:1px solid #fff; 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:#222; 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 #222; border-bottom:1px solid rgba(0,0,0,.1); 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 #ccc;} .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:#222; transform:translate(-50%,-50%) rotate(45deg);} .secretCheck .sc_close::before { position:absolute; left:50%; top:50%; content:''; width:25px; height:1px; background:#222; 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 #000; 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 rgba(0,0,0,.1);} #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:#222; } #boardWrap .write_list>li>.flex { width:calc(100% - 10.5em - 10px); } #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 rgba(0,0,0,.1); } /* 배경 있는경우 */ #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:#f2f2f2; 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 rgba(0,0,0,.1); 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:#fff } #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:#fff; line-height:40px; vertical-align:middle; background:#1c1d34; cursor:pointer; border-radius:3px; font-size:16px; color:#fff; } .input_file:focus + .file_label::before { outline-offset:2px; outline:2px dotted #222} /* 설명문구 */ #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:#222; } #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:#222 } #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:rgba(0,0,0,.05); } #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; } @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 } } @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 rgba(0,0,0,.2); } #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 #000; box-sizing:border-box; border-bottom:1px solid rgba(0,0,0,.1); } /* 제목 */ #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 rgba(0,0,0,.1); color:#2878D3 } #boardWrap .view_table .title strong { display:block; font-size:1.6rem; color:#222; 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:#222; } /* 내용 */ #boardWrap .view_table .view_con { padding:2em 0; font-weight:inherit; font-size:initial; border-top:1px solid rgba(0,0,0,.1);} #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_basics_list { display:flex; flex-wrap:wrap; align-items:stretch; } #boardWrap .view_table .view_basics_list.border_bottom { border-bottom:1px solid rgba(0,0,0,.1); } #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 rgba(0,0,0,.1);} #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:#f2f2f2; font-weight:500; color:#222; 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 rgba(0,0,0,.1); gap:10px; } #boardWrap .view_table .file_box .tit { width:10.5em; font-weight:500; color:#222; 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:rgba(0,0,0,.74); 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:1; padding:0 15px; background:#014099; font-size:.8rem; color:#fff; 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 #222 !important } #boardWrap .view_table .file_box .file_list>li>a::before { position:absolute; width:0; height:1px; background:#222; 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:rgba(0,0,0,.74); 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:#fff; 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 #222 !important } #boardWrap .view_table .view_basics_list .file_list>li>a::before { position:absolute; width:0; height:1px; background:#222; 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:#fafafa; border-top:1px solid #222 } #boardWrap .view_table .answer-group .asrTit { border-bottom:1px dashed #ccc; 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:#222; } #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:#fff; } /* 이전 다음글 */ #boardWrap .view_footer { display:flex; flex-wrap:wrap; margin-top:2em; border-top:1px solid #222; border-bottom:1px solid rgba(0,0,0,.1); 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:#222; 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:#fafafa; } .comment-group h5 { font-size:17px; font-weight:300; color:#343434; padding:20px 0 7px 0;} .comment-group h5 span { color:#2878d3; 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 #e0e0e0; padding-top:15px;} .comment-group .cbox_list ul li dl dt { color:#343434; font-weight:400; display:block;} .comment-group .cbox_list ul li dl dt span { font-size:14px; color:#949494; 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:#343434; border-radius:.2em; background-color:#f4f6f8; border:1px solid #d4d4d4; display:inline-block;} .comment-group .cbox_list .cm_write_re { border-top:1px dashed #e0e0e0; 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 #e0e0e0; 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 #e0e0e0; 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:#282828; line-height:1.5; margin-bottom:20px;} .view_st3 .st3_tit em { font-size:18px; color:#2878d3; 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:#343434; 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:#e0e0e0;} .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 rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); } .view_st3 .view_st3_con img { max-width:100%;} /* 문화관광용 */ #boardWrap.tour_view {max-width:1200px;margin:0 auto;} .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:#222; 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 { position:relative;overflow:hidden;height:0;padding-top: calc(calc((100% - 80px) / 2.5) / 3 * 4.216);width:calc((100% - 80px) / 2.5); } .tour_view .tour_view_top .area_img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform: translate(-50%,-50%); object-fit:cover; -o-object-fit:cover; z-index:1;} .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%; 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; height:50px; align-items:center; justify-content:center; z-index:3; } .tour_view .tour_view_top .area_img .control { display:inline-flex; height:50px; align-items:center; justify-content:center; border-radius:50px; background:#fff; border:1px solid rgba(0,0,0,.1); padding:0 10px 0 0;} .tour_view .tour_view_top .swiper_bottom button { flex:none; position:relative; padding:0px; margin:0 3px; } .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:44px; height:44px; } .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:#222; 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:#222; transform:translate(-65%, -50%) rotate(45deg); background-image:none } .tour_view .tour_view_top .swiper_bottom .swiper_page { margin-right:0; } .tour_view .tour_view_top .swiper_bottom .swiper-pagination-current { font-weight:bold; } .tour_view .tour_view_top .area_text { width:calc((100%) / 1.7); } .tour_view .tour_view_top .area_text:only-child { width:100% } .tour_view .tour_view_top .area_text .st3_tit { font-size:1.75rem; font-weight:bold; color:#222; 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 rgba(0,0,0,.1); } .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:#222; } .tour_view .tour_view_top .area_text .info_list>li>strong::before { position:absolute; width:5px; height:5px; background:#2878d3; 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_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:#222; } .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:#222; color:#fff; } .tour_view .tour_view_top .area_text .lodge_btn>li>.facility_btn { width:100%; background:#2878d3; color:#fff; } .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>a { display:flex; 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 } .tour_view .tour_view_con .tab_menu>li+li>a { margin-left:-1px; } .tour_view .tour_view_con .tab_menu>li.active>a { background:#222; color:#fff; } .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:#222} .tour_view .tour_view_con h5::first-letter { color:#2878d3} .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:rgba(0,0,0,.2); position:absolute; left:0; top:0; width:50px; height:1px; background-image:linear-gradient(90deg, white 50%, rgba(0,0,0,.2) 50%);} .tour_view .tour_view_con .custom_tab .basic_ul>li>b { font-weight:bold; color:#222; 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 .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/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:#fff; 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:#000; border-radius:100%; z-index:20; } .tour_view .modal>.btn_close:before, .tour_view .modal>.btn_close:after { position:absolute; width:60%; height:1px; left:20%; top:50%; background:#fff; content:"" } .tour_view .modal>.btn_close:before { transform:translateY(-50%) rotate(45deg); } .tour_view .modal>.btn_close:after { transform:translateY(-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 button { position:fixed; top:50%; width:40px; height:40px; background:#fff; border:1px solid #ccc; border-radius:100%; transform:translateY(-50%); z-index:10} .tour_view .modal .zoom_area .swiper_bottom .swiper_prev { left:1em; } .tour_view .modal .zoom_area .swiper_bottom .swiper_next { right:1em; } .tour_view .modal .zoom_area .swiper_bottom .swiper_page { position:absolute; top:15px; right:35px; width:fit-content !important; left:inherit; height:40px; display:flex; align-items:center; justify-content:center; padding:10px 20px; padding-right:50px; margin:0; z-index:2; border-radius:25px 0 0 25px; background:#000; color:#fff } /* 숙박 모달 입력폼 */ .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:#222; 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:#2878d3; border-radius:5px; } .tour_view .modal .app_area .write_list::-webkit-scrollbar-track { border-radius:5px; background-color:rgba(0,0,0,.2); } .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:#222; 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 rgba(0,0,0,.1); 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 { border-top:1px solid #5b5b5b; padding:20px 0; border-bottom:1px solid rgba(0,0,0,.1);} .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:#222; 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:#f2f2f2; 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:#222; color:#fff; border:1px solid #222; } .tour_view .img_list>li .btn_small>li>button.mod { background:#fff; border:1px solid rgba(0,0,0,.2); } .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:#222; 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 rgba(0,0,0,.1); border-radius:5px; padding:2em } .tour_view .locaInfo { margin-top:1em; padding:15px; background:#f2f2f2; 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:#f2f2f2; 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:#fff; } /* 주변정보 */ .tour_view .srAround { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:25px; background:#f2f2f2; border-radius:5px; } .tour_view .srAround dt { width:20em; 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:#fff; border-radius:5px;} .tour_view .srAround dd label { margin-right:3em; font-size:1.03rem; color:#222; 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 rgba(0,0,0,.1); 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:#222; } .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:#222; 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 rgba(0,0,0,.1); 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:#fff; 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 #ccc;} .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:#222; color:#fff; 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:rgba(0,0,0,.74); } /* 카드뉴스 */ #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:#fff; border:1px solid rgba(0,0,0,.1); 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:rgba(0,0,0,.05); 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:#fff; 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:#fff; transform:translate(-65%, -50%) rotate(45deg); } #boardWrap .view_table .view_con .cardnews_box .swiper-pagination-current { font-weight:bold; color:#222 } /* 프로그램 상세보기 */ .program_view .program_view_top { display:flex; flex-wrap:wrap; justify-content:space-between; background:rgba(0,0,0,.05); 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:#fff; 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:#222; 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 rgba(0,0,0,.1); } .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:#222; } .program_view .program_view_top .area_text .info_list>li>strong::before { position:absolute; width:5px; height:5px; background:#2878d3; 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 rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); gap:10px; } .program_view .file_box .tit { width:10.5em; font-weight:500; color:#222; 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:rgba(0,0,0,.74); 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:#fff; 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 #222 !important } .program_view .file_box .file_list>li>a::before { position:absolute; width:0; height:1px; background:#222; 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 .program_view_top .area_text .st3_tit { font-size:1.75rem; font-weight:bold; color:#222; 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 rgba(0,0,0,.1); } .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:#222; } .program_view .program_view_top .area_text .info_list>li>strong::before { position:absolute; width:5px; height:5px; background:#2878d3; 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.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:#2878d3; color:#fff; } .program_view.ex_view .state2 { background:#222; color:#fff; } .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:rgba(0,0,0,.05); 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:rgba(0,0,0,.74); 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:#fff; 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 #222 !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:#222; 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%; } @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); padding-top: calc(calc((100% - 80px) / 2.3) / 3 * 4.216);} .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; } } @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);padding-top: calc(calc((100% - 60px) / 2) / 3 * 4.216); } .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; } } @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%; padding-top: calc(100% / 3 * 4.216);} .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_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 .zoom_area .swiper_bottom .swiper_page, .tour_view .modal>.btn_close { height:35px; } .tour_view .modal>.btn_close { width:35px; } .tour_view .modal .zoom_area .swiper_bottom .swiper_page { padding-right:35px; } .tour_view .modal>.btn_close:before, .tour_view .modal>.btn_close:after { width:40%; left:30% } .tour_view .modal .zoom_area .swiper_bottom button { width:35px; height:35px; } /* 숙박 모달 입력폼 */ .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); } } @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 .file_box .file_list>li::before { top:10px; } #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; } } @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; } } @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 .modal .zoom_area .swiper_bottom .swiper_page, .tour_view .modal>.btn_close { height:30px; top:5px; } .tour_view .modal>.btn_close { width:30px; padding:0; right:5px; } .tour_view .modal .zoom_area .swiper_bottom .swiper_page { padding-right:20px; font-size:.8rem; right:20px; } .tour_view .modal>.btn_close:before, .tour_view .modal>.btn_close:after { width:30%; left:35%; } .tour_view .modal .zoom_area .swiper_bottom button { width:30px; height:30px; } .tour_view .tour_view_top .swiper_bottom .swiper_prev, .tour_view .tour_view_top .swiper_bottom .swiper_next { width:26px; height:26px; } /* 숙박 모달 입력폼 */ .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; } } @media all and (max-width:320px){ /* 문화관광용 */ .tour_view .tour_view_con .custom_tab .item .swiper-slide { width:100%; } } /* 페이지 만족도 */ .pageInfoBox { position:relative; width:100%; border:1px solid rgba(0,0,0,.1); padding:1em } .pageInfoBox .charge_info { padding:15px 25px; background-color:#fafafa; } .pageInfoBox .charge_info dl { display:flex; align-items:center; gap:0 15px; } .pageInfoBox .charge_info dl dt { color:#222; 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:#222; font-weight:500} .pageInfoBox .satisfaction { padding:20px 25px;} .pageInfoBox .satisfaction .survey strong { font-weight:400; color:#222; 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:#fff; background-color:#2878D3; vertical-align:middle;} /* 통합검색 */ #AllSearch * { box-sizing: border-box; } #AllSearch .topSearchBox { padding:1.5em; border-top:2px solid #222; border-bottom:1px solid rgba(0,0,0,.1); } #AllSearch .topSearchBox fieldset { display:flex; justify-content:center; align-items:center; --sizeHig:50px; height:var(--sizeHig); } #AllSearch .topSearchBox .scBox { border:2px solid #222; border-radius:3px; padding:3px 0 5px; height:var(--sizeHig) } #AllSearch .topSearchBox .scBox select { border-width:0 1px 0 0; } #AllSearch .topSearchBox .scBox input { border-width:0; min-width:25em } #AllSearch .topSearchBox .btn { padding:10px 25px; background:#222; color:#fff; height:calc(var(--sizeHig) - 4px); margin-top:-3px;} #AllSearch .topSearchBox .btn:focus { outline-offset:-3px; outline:2px dotted #fff; } #AllSearch .topSearchBox .research { margin-left:20px; border-radius:2em; border:1px solid rgba(0,0,0,.1); padding:7px 15px 7px 10px; display:flex; justify-content:center; align-items:center;} #AllSearch .allSearchCon { display:flex; flex-wrap:wrap; border:1px solid rgba(0,0,0,.1); margin-top:2rem; } #AllSearch .allSearchCon .searchLeft { width:20%; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a { position:relative; display:block; padding:15px; border-bottom:1px solid rgba(0,0,0,.1); font-size:1.067em; transition:all ease 0.3s } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a span { position:relative; z-index:2; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a::before { position:absolute; width:0; height:100%; left:0; top:0; background:#2878d3; content:''; transition:all ease 0.3s} #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a::after { position:absolute; width:10px; height:10px; right:15px; top:50%; border-style:solid; border-width:1px 1px 0 0; border-color:#666; content:''; transition:all ease 0.3s; transform:translateY(-50%) rotate(45deg); } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:hover::before, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:focus::before, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li.scActive>a::before { width:100%; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:hover span, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:focus span, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li.scActive>a span { color:#fff; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:hover::after, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:focus::after, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li.scActive>a::after { border-color:#fff; } #AllSearch .allSearchCon .searchCon { width:65%; border-style:solid; border-width:0 1px 0 1px; border-color:rgba(0,0,0,.1); min-height:35em; padding:2em; } #AllSearch .allSearchCon .searchCon .sc_result { border-bottom:1px solid #e0e0e0; padding-bottom:15px;} #AllSearch .allSearchCon .searchCon .sc_result p { font-size:17px; color:#4a4a4a; font-weight:400;} #AllSearch .allSearchCon .searchCon .sc_result p span, #AllSearch .allSearchCon .searchCon .resultList .scWord { color:#cf0014;} #AllSearch .allSearchCon .searchCon .resultList { position:relative; padding:20px 0 60px 0; border-bottom:1px dashed #e0e0e0;} #AllSearch .allSearchCon .searchCon .resultList:last-child { border-bottom:0;} #AllSearch .allSearchCon .searchCon .resultList h4 { font-size:20px; font-weight:400; color:#282828; margin-bottom:20px;} #AllSearch .allSearchCon .searchCon .resultList h4 span { font-size:18px; font-weight:300; color:#646464;} #AllSearch .allSearchCon .searchCon .resultList ul li { margin:5px 0;} #AllSearch .allSearchCon .searchCon .resultList ul li a { color:#4a4a4a; text-decoration:underline;} #AllSearch .allSearchCon .searchCon .resultList ul li dl { margin-bottom:15px;} #AllSearch .allSearchCon .searchCon .resultList ul li dl { margin-bottom:3px;} #AllSearch .allSearchCon .searchCon .resultList ul li dl dd { color:#747474;} #AllSearch .allSearchCon .searchCon .resultList ul li i { font-size:14px; color:#2878d3; margin-right:8px;} #AllSearch .allSearchCon .searchCon .resultList ul li i.icon-file { display:inline-block; width:12px; height:12px; background-image:url(/resource/common/images/bbs/icon_file.png); background-repeat:no-repeat; background-position:50% 50%; background-size:cover;} #AllSearch .allSearchCon .searchCon .resultList .list_info, #AllSearch .allSearchCon .searchCon .resultList .list_info a { font-size:14px; color:#949494; text-decoration:none; display:block;} #AllSearch .allSearchCon .searchCon .resultList .list_info a:hover { text-decoration:underline;} #AllSearch .allSearchCon .searchCon .resultList .list_info span { letter-spacing:0; display:block;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList { width:100%; display:flex; flex-wrap:wrap; gap:20px;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li { width:calc((100% - 60px) / 4); border:1px solid #e0e0e0; text-align:center;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li a, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li a { display:block; text-decoration:none;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl { width:90%; margin:10px auto;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl dt, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl dt { white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl dd, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl dd { font-size:14px; color:#949494; letter-spacing:0;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList .sc_img, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList .sc_img { position:relative; width:100%; height:0; padding-top:68%; overflow:hidden; border-bottom:1px solid #e0e0e0;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList .sc_img img, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList .sc_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%) scale(1,1) rotate(0.001deg); transition:0.5s ease 0s; transition-property:transform;} #AllSearch .allSearchCon .searchCon .resultList .bulst { background:url(/resource/common/images/bbs/dott.png) left 13px no-repeat; padding-left:10px; margin:5px 0;} #AllSearch .allSearchCon .searchCon .resultList .result_more { position:absolute; right:0; bottom:20px; } #AllSearch .allSearchCon .searchCon .resultList .result_more a { display:flex; justify-content:center; position:relative; font-size:15px; color:#2878d3; line-height:1; } #AllSearch .allSearchCon .searchCon .resultList .result_more a::after { display:inline-block; margin-left:5px; width:7px; height:7px; border-style:solid; border-width:1px 1px 0 0; border-color:#2878d3; content:''; transition:all ease 0.3s; transform:rotate(45deg); vertical-align:middle; margin-top:3px;} #AllSearch .allSearchCon .searchRight { width:15%; } #AllSearch .allSearchCon .searchRight .sc_word { padding:2em; } #AllSearch .allSearchCon .searchRight .sc_word strong { display:block; color:#222; font-size:1.067em; border-bottom:2px solid #222; line-height:1; padding-bottom:10px; font-weight:bold; } #AllSearch .allSearchCon .searchRight .sc_word>ol { counter-reset:num; } #AllSearch .allSearchCon .searchRight .sc_word>ol>li { border-bottom:1px dashed rgba(0,0,0,.1)} #AllSearch .allSearchCon .searchRight .sc_word>ol>li>a { position:relative; display:block; padding:7px 0 7px 25px;} #AllSearch .allSearchCon .searchRight .sc_word>ol>li>a::before { position:absolute; left:0; top:10px; width:17px; height:17px; line-height:15px; text-align:center; border:1px solid rgba(0,0,0,.2); border-radius:3px; counter-increment:num; content:counter(num); font-size:.8rem; } #AllSearch .allSearchCon .searchRight .sc_word>ol>li:nth-child(1)>a::before { background:#2878d3; color:#fff; border-color:#2878d3 } #AllSearch .allSearchCon .searchRight .sc_word>ol>li:nth-child(2)>a::before { background:#5b9ce6; color:#fff; border-color:#5b9ce6 } #AllSearch .allSearchCon .searchRight .sc_word>ol>li:nth-child(3)>a::before { background:#94c0f1; color:#fff; border-color:#94c0f1 } @media all and (max-width:1168px){ #AllSearch .allSearchCon .searchCon { width:60%; } #AllSearch .allSearchCon .searchRight { width:20%; } } @media all and (max-width:868px){ #AllSearch .topSearchBox fieldset { flex-flow:column; height:inherit } #AllSearch .topSearchBox .scBox { width:80%; display:flex; justify-content: space-between;} #AllSearch .topSearchBox .scBox input { min-width:inherit; width:-webkit-fill-available; } #AllSearch .topSearchBox .btn { min-width:5em; padding:10px; } #AllSearch .topSearchBox .research { margin-left:0; margin-top:10px; flex:100%; } #AllSearch .allSearchCon { border:none; } #AllSearch .allSearchCon .searchCon { width:100%; border-width:1px; margin-top:1em } #AllSearch .allSearchCon .searchRight { border-width:0 1px 1px; border-style:solid; border-color:rgba(0,0,0,.1); } #AllSearch .allSearchCon .searchLeft, #AllSearch .allSearchCon .searchRight { width:100%; } #AllSearch .allSearchCon .searchLeft .sc_Gnb { display:flex; flex-flow:row; flex-wrap: wrap; border-top:1px solid rgba(0,0,0,.1); border-left:1px solid rgba(0,0,0,.1) } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li { flex:0 1 auto; min-width:25%; border-right:1px solid rgba(0,0,0,.1); } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a { padding:10px; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a::after { width:8px; height:8px; right:10px; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:hover::after, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:focus::after, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li.scActive>a::after { transform: translateY(-60%) rotate(135deg); } } @media all and (max-width:668px){ #AllSearch .topSearchBox .scBox { width:100%; } #AllSearch .allSearchCon .searchCon .resultList h4 { font-size:19px; } #AllSearch .allSearchCon .searchCon .resultList .sc_imgList, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList { gap:10px; } #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li { width:calc((100% - 10px) / 2) } } @media all and (max-width:468px){ #AllSearch .topSearchBox fieldset { display:inherit; --sizeHig:inherit } #AllSearch .topSearchBox .scBox { display:flex; flex-wrap:wrap; border:none; padding:0; } #AllSearch .topSearchBox .scBox select { width:100%; border-width:1px; margin-bottom:5px; } #AllSearch .topSearchBox .scBox input { width:calc(100% - 5em);border-width:1px; } #AllSearch .topSearchBox .btn { margin-top:0; } #AllSearch .topSearchBox .research { max-width:fit-content; margin-left:auto; margin-right:auto; } #AllSearch .allSearchCon .searchCon .resultList h4 { font-size:18px; } #AllSearch .allSearchCon .searchCon, #AllSearch .allSearchCon .searchRight .sc_word { padding:1.5em; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li { min-width:33.333%; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a { font-size:1em; padding:10px 5px; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a::after { width:7px; height:7px; right:7px; } } @media all and (max-width:368px){ #AllSearch .allSearchCon .searchLeft .sc_Gnb>li { min-width:50%; } } /* 마이페이지 - 로그인 */ .Membership .text { font-size:1.03rem; color:rgba(0,0,0,.74); 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:#222; } .Membership .loginBasic { margin-top:2em; } .Membership .loginBasic>li { position:relative; display:flex; justify-content:space-between; align-items: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 #222; } .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:#fff; border-color:#222; } #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 #222; } .Membership .pwFind { margin-top:2em; } .Membership .idFind h5, .Membership .pwFind h5 { font-size:2.2rem; font-weight:bold; color:#222; } /* 마이페이지 - 본인인증 */ .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:#2581d7; 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:#fff; border-radius:100%; box-shadow:5px 5px 5px rgba(0,0,0,.05);} .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:#343434; } .Membership .progress_bar ol>li strong { color:#222; 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:#2581d7; } .Membership .progress_bar .pgr_on strong::before { color:#2581d7; } .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; justify-content:center} .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 rgba(0,0,0,.1); transition:0.5s ease 0s; border-radius:3px; } .Membership .join_identify dt { font-size:1.5rem; font-weight:bold; color:#222; margin-bottom:1.5em; } .Membership .join_identify dt>span { width:var(--sizeHig); height:var(--sizeHig); position:relative; display:table; background-color:#fafafa; 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:#222; box-shadow:5px 5px 5px rgba(0,0,0,.1);} .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:#fafafa; 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 .titst2 { font-size:1.5rem; font-weight:bold; color:#222; margin-top:2rem; margin-bottom:.25rem; } .Membership .join_agree .termsBox { height:200px; overflow-x:hidden; overflow-y:scroll; border:1px solid #e0e0e0; 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_agree .termsBox h5 { font-size:1.2em; border-bottom:1px solid #ddd; margin-bottom:.5em; padding-bottom:.3em } .Membership .join_agree .termsBox h6 { font-size:1.1em; margin-top:.5em } .Membership .join_agree .termsBox div:not(.scrollTable) { border:1px solid #ddd; background:#fafafa; padding:.8em 1.5em; margin-bottom:1em; } .Membership .join_agree .termsBox>ul { margin:.5em 0; } .Membership .join_agree .termsBox li { position:relative; padding-left:.4em; } .Membership .join_agree .termsBox li:before { content:""; display:block; width:3px; height:3px; background:#444; position:absolute; top:.65em; left:0; } .Membership .join_agree .termsBox li li { padding-left:.6em; } .Membership .join_agree .termsBox li li:before { width:4px; height:1px; top:.7em; } .Membership .join_agree .termsBox>p { margin:.5em 0; } /*-- table --*/ .Membership .join_agree .termsBox table{margin:3em 0; border-spacing:0; border-collapse:collapse; width:100%; border-top:1px solid #006341;} .Membership .join_agree .termsBox h4 + table, .Membership .join_agree .termsBox h5 + table, .Membership .join_agree .termsBox .txt_right + table{margin-top:0} .Membership .join_agree .termsBox table thead th{padding:12px 10px; background:#f8fcfb; border:1px solid #ddd; font-weight:600; font-size:1em} .Membership .join_agree .termsBox table thead tr:nth-of-type(1) th{border-top-width:0px; } .Membership .join_agree .termsBox table thead tr.none th{border-bottom-width:0px;} .Membership .join_agree .termsBox table thead tr.none + tr th{border-top:1px solid #ddd;} .Membership .join_agree .termsBox table thead th[rowspan]{border-right:1px solid #ddd;} .Membership .join_agree .termsBox table tbody th{background-color:#f8f9fa; border:1px solid #ddd; } .Membership .join_agree .termsBox table th, .Membership .join_agree .termsBox table td{padding:6px 10px; letter-spacing:-0.5px; line-height:1.4; word-break:keep-all; font-size:.95em;} .Membership .join_agree .termsBox table td small{font-size:.75em; } .Membership .join_agree .termsBox table th{text-align:center; } .Membership .join_agree .termsBox .scrollTable{width:100%;} .Membership .join_agree .termsBox .scrollTable table{margin:0} .Membership .join_agree .termsBox .mob_info{display:none; position:relative; width:100%; box-sizing:border-box; margin-top:10px; padding:5px 0 5px 22px; font-size:.9rem;} .Membership .join_agree .termsBox .mob_info:before{content:''; display:block; position:absolute; top:8px; left:0px; width:15.5px; height:15px; background:url(/resource/common/images/common/img_drag.svg) no-repeat 50% 0; background-size:100%; opacity:.64} @media all and (max-width:1024px) { .Membership .join_agree .termsBox .scrollTable{overflow:auto;} .Membership .join_agree .termsBox .scrollTable .basic_table{width:1024px; margin-top:0px;} .Membership .join_agree .termsBox .mob_info{display:block; margin-bottom:5px;} } @media all and (max-width:460px) { .Membership .join_agree .termsBox table{margin:1.5em 0} } /* tbody */ .Membership .join_agree .termsBox table thead + tbody tr td{text-align:center;} .Membership .join_agree .termsBox table tbody td{background:#fff; border:1px solid #ddd;text-align:left; border-top:none} .Membership .join_agree .termsBox table tbody tr td:nth-of-type(1), .Membership .join_agree .termsBox table tbody tr th:nth-of-type(1), .Membership .join_agree .termsBox table thead tr th:nth-of-type(1){border-top-width:0px; border-left-width:0;} .Membership .join_agree .termsBox table tbody tr td:nth-last-of-type(1), .Membership .join_agree .termsBox table tbody tr th:nth-last-of-type(1), .Membership .join_agree .termsBox table thead tr th:nth-last-of-type(1){border-right-width:0;} .Membership .join_agree .termsBox table tbody th{background:#fafafa; font-weight:400 } .Membership .join_agree .termsBox table tbody tr th:nth-of-type(1){border-right-width:1px; } .Membership .join_agree .termsBox table tbody:not(:has(td)) th{border-top-width:0;} /* 마이페이지 - 정보입력 */ .Membership .tar:has(.btn_withdrawal) { display:flex; justify-content:end; margin-top:1em; margin-bottom:-1em } .Membership .btn_withdrawal { display:flex; align-items:center; justify-content:center; height:35px; padding:0 20px; border-radius:2rem; background:#000; color:#fff; font-size:.95rem; border-radius:20px; } .Membership .join_list { display:flex; flex-wrap:wrap; flex-flow:column; width:100%; margin-top:2em; border-top:2px solid #000; 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 rgba(0,0,0,.1); gap:5px 1em} .Membership .join_list>li strong { width:8em; color:#222; 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 #000; border-bottom:1px solid rgba(0,0,0,.1); --sizeHig:120px;} .Membership .join_complete .icon { position:relative; width:var(--sizeHig); height:var(--sizeHig); display:table; background-color:#fafafa; 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:#222; 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 .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:#fff; 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; } } /* filter_area */ .filter_area{background:#f4f4f4; padding:1em 2em; display:flex; flex-wrap:wrap; gap:1em 2em; margin-bottom:1em} .filter_area .filter_label{display:inline-block; margin-right:1em;} .filter_area button{background:#fff; border:1px solid #ddd; padding:.5em 1em} .filter_area button.active{background:var(--color-point); color:#fff; border-color:var(--color-point)} .filter_area div:nth-child(2) button.active{background:var(--color-point2); border-color:var(--color-point2);} @media all and (max-width:468px){ .filter_area{padding:.5em .6em; gap:.5em;} .filter_area .filter_label{display:inline-block; margin-right:.5em;} .filter_area button{padding:.5em .6em} } /******************************************************** 모달 *********************************************************/ .modal_bg { position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.6); z-index:999; } .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-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.active { display:block; } /* 타이틀*/ .modal .pop_tit { padding:.9em 1.8rem .8em; font-size:1.33em; font-weight:500; color:#000; letter-spacing:-.05em; border-bottom:1px solid #ccc;} /* 버튼 관련 */ .modal>.btn_close { position:absolute; top:.8em; right:1em; width:2.5em; height:2.5em; padding:1em; background:#000; border-radius:100%; z-index:20; } .modal>.btn_close:before, .modal>.btn_close:after { position:absolute; width:60%; height:1px; left:20%; top:50%; background:var(--color-white); content:"" } .modal>.btn_close:before { transform:translateY(-50%) rotate(45deg); } .modal>.btn_close:after { transform:translateY(-50%) rotate(-45deg);} .modal .btn_area { display:flex; align-items:center; justify-content:center; gap:5px;} .modal .btn_area { margin-top:1.5em; display:flex; align-items:center; justify-content:center; gap:10px;} .modal .btn_area a, .modal .btn_area button { display:flex; font-size:.95rem; line-height:1; padding:14px 20px 11px; border-radius:5px; min-width:90px; justify-content:center; } .modal .btn_area a:hover, .modal .btn_area button:hover { animation:iconShow 0.7s ease-in-out 1 forwards; } .modal .btn_area .btn_close { border:1px solid rgba(0,0,0,.1); } .modal .btn_area .btn_check { border:1px solid var(--color-point); background:var(--color-point); color:var(--color-white); } /*확대보기*/ .more_view_layer { 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-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; } .more_view_layer>.btn_close { position:absolute; top:15px; right:15px; width:40px; height:40px; padding:1em; background:#000; border-radius:100%; z-index:20; } .more_view_layer>.btn_close:before, .more_view_layer>.btn_close:after { position:absolute; width:21px; height:1px; left:50%; top:50%; background:var(--color-white); content:"" } .more_view_layer>.btn_close:before { transform:translate(-50%, -50%) rotate(45deg); } .more_view_layer>.btn_close:after { transform:translate(-50%, -50%) rotate(-45deg);} .modal.more_view_layer { max-width:1000px; height:auto; max-height:calc(100vh - 100px); } .more_view_layer .zoom_area { position:relative; } .more_view_layer .zoom_area .swiper { position:inherit; } .more_view_layer .zoom_area .swiper-slide { position:inherit; width:100%; height:0; padding-top:75.2%; overflow:hidden } .more_view_layer .zoom_area .swiper-slide img { position:absolute; top:50%; left:50%; height:100%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform: translate(-50%,-50%); } .more_view_layer .zoom_area .swiper_bottom button { position:fixed; top:calc(50% - 1.5%); width:40px; height:40px; background:var(--color-white); border:1px solid #ccc; border-radius:100%; transform:translateY(-50%); z-index:10} .more_view_layer .zoom_area .swiper_bottom .swiper_prev { left:1em; } .more_view_layer .zoom_area .swiper_bottom .swiper_next { right:1em; } .more_view_layer .zoom_area .swiper_bottom .swiper_page { position:absolute; bottom:calc((100% - 97%) + 10px); left:50%; font-size:.85rem; width:fit-content !important; height:40px; gap:0 20px; display:flex; align-items:center; justify-content:center; padding:10px 20px; margin:0; z-index:2; border-radius:25px; background:var(--color-black) ; color:var(--color-white-opacity7); transform:translateX(-50%); } .more_view_layer .zoom_area .swiper_bottom .swiper_page::before { position:absolute; width:10px; height:2px; background:var(--color-white); opacity:.3; left:50%; top:calc(50% - 1px); transform:translate(-50%, -50%); content:''; } .more_view_layer .zoom_area .swiper_page .swiper-pagination-current { color:var(--color-white) } /* 기신청 팝업 */ .app_layer { max-width:400px; } .app_layer .cont { padding:2em; } .app_layer .cont .text { font-size:1.167em; text-align:center; padding:2em 0; } /* 아이디/비밀번호찾기 */ .modal.id_pw_find { max-width:500px; } .modal.id_pw_find .cont { display:flex; flex-flow:column; padding:2em; } .modal.id_pw_find .cont .tit { width:100%; display:flex; align-items:center; justify-content:center; font-size:1.567rem; font-weight:bold;line-height:1.2; } .modal.id_pw_find .cont .text { display:flex; width:100%; margin-top:.75rem; font-size:.98rem; font-weight:400; opacity:.8; text-align:center; line-height:1.2; justify-content: center;} .modal.id_pw_find .cont .result { display:flex; align-items:center; justify-content:center; padding:1rem; border-radius:10px; background:var(--color-light-point); font-size:1.167rem; font-weight:bold; margin-top:1rem; line-height:1.2;} .modal.id_pw_find .btn_area { margin-top:0; } .modal.id_pw_find .btn_area .button { flex:auto; display:flex; align-items:center; background:var(--color-point); color:var(--color-white); border-radius:0 0 10px 10px; height:60px; justify-content:center; line-height:1; max-width:10em; font-size:1.03rem; font-weight:bold; padding:0; line-height:1 } .modal.id_pw_find .btn_area .button:only-child { max-width:100%; } .modal.id_pw_find .cont .input_list { display:flex; flex-flow:column; gap:20px 5px; padding:1.5rem; border-radius:8px; background:var(--color-gray); margin-top:1rem } .modal.id_pw_find .cont .input_list>li { display:flex; align-items:center; gap:5px 1em; justify-content:space-between; } .modal.id_pw_find .cont .input_list>li strong { width:8em; font-size:.98rem; font-weight:bold } .modal.id_pw_find .cont .input_list>li .flex { width:calc(100% - 9em); } .modal.id_pw_find .cont .input_list>li .flex input { width:100%; border-radius:3px; } /* 본인인증 */ .pass_layer { max-width:700px; padding:2em;} .pass_layer h4 { font-size:1.467em; font-weight:500; text-align:center; background:#ebf2f8; border-radius:10px; padding:15px;} .pass_layer .img { margin-top:1.5em; } .pass_layer .img img { width:250px; } .pass_layer strong { display:block; font-size:1.167em; font-weight:500; line-height:1.3 } .pass_layer .text { font-size:1.03em; line-height:1.4; } /* 예약완료 */ .modal.completion_wrap { max-width:900px; border-radius:10px 10px 25px 10px; text-align:center; padding:3.75em } .modal.completion_wrap img { display:flex; margin:0 auto; max-height:160px; } .modal.completion_wrap .modal_con strong { display:block; font-size:1.63em; line-height:1.3; margin-top:1.5em; font-weight:600; color:#4657a7; } .modal.completion_wrap .modal_con p { margin-top:1.5em; font-size:1.13em; line-height:1.6 } .modal.completion_wrap .area_btn { margin-top:3em; } @media all and (max-width:1000px){ .more_view_layer .zoom_area .swiper_bottom .swiper_page { bottom:10px; } } @media all and (max-width:968px){ /*확대보기*/ .more_view_layer>.btn_close { top:10px; right:10px; width:35px; height:35px; } .more_view_layer>.btn_close:before, .more_view_layer>.btn_close:after { width:19px; } /* 본인인증 */ .pass_layer h4 { font-size:1.367em; } } @media all and (max-width:668px){ .modal .pop_tit { padding:.7em 1rem .6em; } .modal.completion_wrap { padding:2.5em; } .modal .area_btn { display:flex; flex-wrap:wrap; gap:2px; justify-content:center; } /*확대보기*/ .more_view_layer>.btn_close { width:32px; height:32px; } .more_view_layer .zoom_area .swiper_bottom button { width:35px; height:35px; } .more_view_layer .zoom_area .swiper_bottom .swiper_next { right:5px; } .more_view_layer .zoom_area .swiper_bottom .swiper_prev { left:5px; } .more_view_layer .zoom_area .swiper_bottom .swiper_page { padding:5px 15px; height:35px; } /* 본인인증 */ .pass_layer, .app_layer .cont { padding:1.25em;} .pass_layer h4 { font-size:1.267em; } .modal .btn_area a, .modal .btn_area button { font-size:.9rem; } .modal .btn_area { gap:5px; } } @media all and (max-width:568px){ /* 아이디/비밀번호찾기 */ .modal.id_pw_find .cont { padding:2em 1.5em; } .modal.id_pw_find .cont .tit { font-size:1.467rem; } .modal.id_pw_find .cont .text { font-size:.95rem; } .modal.id_pw_find .cont .input_list { padding:1.25rem; } .modal.id_pw_find .cont .input_list>li strong { width:100%;} .modal.id_pw_find .cont .input_list>li .flex { width:100%; } .modal.id_pw_find .cont .input_list>li { flex-flow:column; align-items:flex-start; } .modal.id_pw_find .btn_area .button { height:50px; font-size:1rem; } } @media all and (max-width:468px){ .modal .zoom_area .swiper_bottom button { width:33px; height:33px; } .modal.completion_wrap { padding:2em; } .modal.completion_wrap .modal_con strong { font-size:1.43em;} .modal.completion_wrap .modal_con p { font-size:1.067em; } /*확대보기*/ .more_view_layer>.btn_close { top:5px; right:5px} .more_view_layer .zoom_area .swiper_bottom button { width:30px; height:30px; } .more_view_layer .zoom_area .swiper_bottom .swiper_next { right:5px; } .more_view_layer .zoom_area .swiper_bottom .swiper_prev { left:5px; } .more_view_layer>.btn_close:before, .more_view_layer>.btn_close:after { width:15px; } .more_view_layer .zoom_area .swiper_bottom .swiper_page { height:30px; padding:5px 12px; font-size:.8rem; } }