@charset "UTF-8"; .board_search, .board_search *, .board_list>table .bo_tit>a, .paging_all *, .view_file>a, .pageNavigation, .pageNavigation>dl, .pageNavigation>dl>dd>a, .board_write input[type=text], .board_write input[type=password], .board_write input[type=file], .board_write select, .board_write textarea, .board_write .btns, .faqArea>li .q, .faqArea>li .q:before, .faqArea>li .q>.bul, .faqArea>li .q>.bul:before, .faqArea>li .q>.bul:after, .faqArea>li .q:after, .photo_list ul.list li .gall_cont, .photo_list ul.list li .gall_cont p.over, .photo_list ul.list li .gall_cont p.over:before, .photo_list ul.list li .gall_cont p.over:after, .photo_list ul.list li .gall_cont p.over>span, .storeMapType2 .storeMap_list .link{transition: all .3s ease-out; transform-origin: 50% 50%;} /* Input Style */ input[type=button], input[type=text], input[type=password], input[type=file], input[type=submit], select, textarea, .board_write .btns{width:auto; height:5rem; padding:0 2rem; background-color:#fff; border:1px solid var(--bor_c); font-size:1.6rem; line-height:4.8rem; color:#666; vertical-align:middle; display:inline-block;} select{padding-right:5rem; background:url('/images/bg_select.svg') no-repeat calc(100% - 1rem) center; background-size:1.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;} select::-ms-expand{display:none;} textarea{width:100%; height:30rem; padding:2rem; line-height:1.55;} /* textarea:focus{box-shadow:0 0 1rem rgba(0,0,0,0.2);} */ input[required], textarea[required]{background-image:url('/images/require.png'); background-repeat:no-repeat; background-position:right top} select[required]{background-image:url('/images/bg_select.svg'); background-repeat:no-repeat; background-position: calc(100% - 1rem) center; background-size:1.5rem;} input[type=text].datetimepicker{background-image:url('/images/icon_calendar4.gif'); background-repeat:no-repeat; background-position:right center; background-size:contain;} input[type=text].datetimepicker[required]{background-image:url('/images/require.png'), url('/images/icon_calendar4.gif'); background-position:right top, right center; background-size:auto, contain;} /* Check New Style */ .check-new{font-size:0; line-height:0; display: inline-block; vertical-align: top; position: relative;} .check-new input[type=checkbox], .check-new input[type=radio]{display: none; position: absolute; left:0; top:0;} .check-new input[type=checkbox]+label, .check-new input[type=radio]+label{font-size:1.6rem; line-height:1; color: #999; display: inline-flex; align-items: center; cursor: pointer; position: relative; gap:0.7rem;} .check-new .more{font-weight: 500; font-size:1.8rem; line-height:2rem; color: #111; display: inline-block; vertical-align: top; cursor: pointer; position: relative;} .check-new input[type=checkbox]+label>.graphic, .check-new input[type=checkbox]+label>.graphic:before, .check-new input[type=radio]+label>.graphic, .check-new input[type=radio]+label>.graphic:before{content: ""; width: 2rem; height: 2rem; background-color: #fff; border:1px solid var(--bor_c); font-size:0; line-height:0; display: inline-block; vertical-align: top; position: relative; transition: .3s;} .check-new input[type=checkbox]+label>.graphic.hhlt, .check-new input[type=checkbox]+label>.graphic.hhlt:before, .check-new input[type=radio]+label>.graphic.hhlt, .check-new input[type=radio]+label>.graphic.hhlt:before{border:1px solid var(--btn_c)} .check-new input[type=radio]+label>.graphic.check::before, .check-new input[type=checkbox]+label>.graphic:before{background: url("/images/chk_w.png") no-repeat left top/cover; border:none; left:-1px; top:-1px; z-index:2; opacity: 0;} .check-new input[type=radio]+label>.graphic{border-radius:99px;} .check-new input[type=radio]+label>.graphic:before{width: 50%; height: 50%; background-color:var(--btn_c); border:none; left: 50%; top:50%; border-radius:99px; transform-origin: 50% 50%; transform: translate(-50%, -50%); opacity:0.3; position:absolute;} .check-new input[type=radio]+label>.graphic.check{border-radius:0;} .check-new input[type=radio]+label>.graphic.check::before{width:inherit; height:inherit; border-radius:0; transform:none;} .check-new input[type=checkbox]:checked+label>.graphic{border-color:#111; background-color:#111;} .check-new input[type=radio]:checked+label>.graphic{border-color:var(--btn_c);} .check-new input[type=radio]:checked+label>.graphic:before{background-color:var(--btn_c);} .check-new input[type=checkbox]:checked+label>.graphic, .check-new input[type=checkbox]:checked+label>.graphic:before, .check-new input[type=radio]:checked+label>.graphic, .check-new input[type=radio]:checked+label>.graphic:before{opacity: 1;} .check-new input[type=checkbox]:checked+label, .check-new input[type=radio]:checked+label{color: var(--btn_c);} /* Clause page */ .clause_page{padding:8rem 0 5rem} .clause_page a{color:#000} .clause_page .clause_title{margin-bottom:3rem; font-size:4rem; line-height:1; font-weight:700; color:#000; text-align:center;} .clause_page .clause_area{width:100%; padding:3rem; background-color: #fff; border:1px solid var(--bor_c); font-size:1.6rem; line-height:1.55; color: #666; overflow:hidden; overflow-y:auto; box-sizing:border-box;} .clause_page .clause_area strong{font-weight: 700; color: #1b1b1b; display: inline-block;} .clause_page .clause_area strong.h1{font-size:2.8rem;} .clause_page .clause_area>p{margin:3rem 0 0.5rem;} .clause_page .clause_area>p:first-child{margin-top:0rem;} .clause_page .clause_area>p>strong{font-weight: 700; color: #1b1b1b; display:inline-block;} .clause_page .clause_area *+p>strong{} .clause_page .clause_area ol{counter-reset:item; margin-top:1rem;} .clause_page .clause_area li>p{margin-top:1rem;} .clause_page .clause_area ol>li>ol{margin-top:0rem;} .clause_page .clause_area ol>li{margin-left:-0.5rem; padding-left:2.5rem; position: relative; box-sizing:border-box;} .clause_page .clause_area ol>li:before {counter-increment: item; content: counter(item)"."; width:2rem; text-align: right; display: inline-block; position: absolute; top: 0; left: 0;} /* .clause_page .clause_area ol>li:nth-child(-n+9)::before {content: counter(item);} */ .clause_page .clause_area ol.type>li{} .clause_page .clause_area ol.type>li:before{content: counter(item)")";} .clause_page .clause_area ol.cNum>li{} .clause_page .clause_area ol.cNum>li:before{content: "";} .clause_page .clause_area ol.cNum>li:nth-child(1):before{content: "①";} .clause_page .clause_area ol.cNum>li:nth-child(2):before{content: "②";} .clause_page .clause_area ol.cNum>li:nth-child(3):before{content: "③";} .clause_page .clause_area ol.cNum>li:nth-child(4):before{content: "④";} .clause_page .clause_area ol.cNum>li:nth-child(5):before{content: "⑤";} .clause_page .clause_area ol.cNum>li:nth-child(6):before{content: "⑥";} .clause_page .clause_area ol.cNum>li:nth-child(7):before{content: "⑦";} .clause_page .clause_area ol.cNum>li:nth-child(8):before{content: "⑧";} .clause_page .clause_area ol.cNum>li:nth-child(9):before{content: "⑨";} .clause_page .clause_area ol.cNum>li:nth-child(10):before{content: "⑩";} .clause_page .clause_area ol.cNum>li:nth-child(11):before{content: "⑪";} .clause_page .clause_area ol.cNum>li:nth-child(12):before{content: "⑫";} .clause_page .clause_area ol.cNum>li:nth-child(13):before{content: "⑬";} .clause_page .clause_area ol.cNum>li:nth-child(14):before{content: "⑭";} .clause_page .clause_area ol.cNum>li:nth-child(15):before{content: "⑮";} .clause_page .clause_area ol.kr>li{} .clause_page .clause_area ol.kr>li:before{} .clause_page .clause_area ol.kr>li:nth-child(1):before{content: "가.";} .clause_page .clause_area ol.kr>li:nth-child(2):before{content: "나.";} .clause_page .clause_area ol.kr>li:nth-child(3):before{content: "다.";} .clause_page .clause_area ol.kr>li:nth-child(4):before{content: "라.";} .clause_page .clause_area ol.kr>li:nth-child(5):before{content: "마.";} .clause_page .clause_area ol.kr>li:nth-child(6):before{content: "바.";} .clause_page .clause_area ol.kr>li:nth-child(7):before{content: "사.";} .clause_page .clause_area ol.kr>li:nth-child(8):before{content: "아.";} .clause_page .clause_area ol.kr>li:nth-child(9):before{content: "자.";} .clause_page .clause_area ol.kr>li:nth-child(10):before{content: "차.";} .clause_page .clause_area ol.kr>li:nth-child(11):before{content: "카.";} .clause_page .clause_area ol.kr>li:nth-child(12):before{content: "타.";} .clause_page .clause_area ol.kr>li:nth-child(13):before{content: "파.";} .clause_page .clause_area ol.kr>li:nth-child(14):before{content: "하.";} .clause_page .clause_area ul.buls>li{padding-left:1.5rem ; position: relative;} .clause_page .clause_area ul.buls>li:before{content: "-"; display: inline-block; position:absolute; left: 0; top:0;} .clause_page .clause_area ul.circle>li{padding-left:15px; position: relative;} .clause_page .clause_area ul.circle>li:before{content: "ο"; display: inline-block; position:absolute; left: 0; top:-1px;} .clause_page .clause_area li>ol, .clause_page .clause_area li>ul{margin-bottom:0.7rem;} .clause_page .nTable{width:100%; margin-top:0.5rem; background-color: #fff; border-top:1px solid #ddd; overflow:hidden;} .clause_page .nTable>table{width:calc(100% + 1px); border-spacing:0; table-layout: fixed;} .clause_page .nTable>table th, .clause_page .nTable>table td{height:auto; padding:1rem; font-weight: 300; line-height:1.3; color:#888; text-align:center; border-collapse:collapse; empty-cells:show; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;} .clause_page .nTable>table>thead>tr>th{background-color: #f8f8f8; font-weight:500; color:#222; position: relative;} .clause_page .nTable>table>thead>tr>th+th{} .clause_page .check-new{padding-top:1.5rem; float:right;} .clause_page.no .tit{display:none;} .clause_page.no .clause_area{height:auto; padding:0px; background-color: transparent; border:none; overflow: visible;} /* Clause Box Style */ .clauseArea{width:100%; font-size:0; line-height:0; overflow:hidden;} .clauseArea + .clauseArea, .board_write + .clauseArea{margin-top:5rem;} .clauseArea>.tit{margin-bottom:1.5rem; font-weight: 700; font-size:1.8rem; line-height:1; color: #1b1b1b;} .clauseArea .scroll{width:100%; height:30rem; padding:3rem; background-color: #fff; border:1px solid var(--bor_c); font-size:1.6rem; line-height:1.55; color: #666; overflow:hidden; overflow-y:auto; box-sizing:border-box;} .clauseArea .scroll strong{font-weight: 700; color: #1b1b1b; display: inline-block;} .clauseArea .scroll strong.h1{font-size:2.8rem;} .clauseArea .scroll>p{margin:3rem 0 0.5rem;} .clauseArea .scroll>p:first-child{margin-top:0rem;} .clauseArea .scroll>p>strong{font-weight: 700; color: #1b1b1b; display:inline-block;} .clauseArea .scroll *+p>strong{} .clauseArea .scroll ol{counter-reset:item; margin-top:1rem;} .clauseArea .scroll li>p{margin-top:1rem;} .clauseArea .scroll ol>li>ol{margin-top:0rem;} .clauseArea .scroll ol>li{margin-left:-0.5rem; padding-left:2.5rem; position: relative; box-sizing:border-box;} .clauseArea .scroll ol>li:before {counter-increment: item; content: counter(item)"."; width:2rem; text-align: right; display: inline-block; position: absolute; top: 0; left: 0;} /* .clauseArea .scroll ol>li:nth-child(-n+9)::before {content: counter(item);} */ .clauseArea .scroll ol.type>li{} .clauseArea .scroll ol.type>li:before{content: counter(item)")";} .clauseArea .scroll ol.cNum>li{} .clauseArea .scroll ol.cNum>li:before{content: "";} .clauseArea .scroll ol.cNum>li:nth-child(1):before{content: "①";} .clauseArea .scroll ol.cNum>li:nth-child(2):before{content: "②";} .clauseArea .scroll ol.cNum>li:nth-child(3):before{content: "③";} .clauseArea .scroll ol.cNum>li:nth-child(4):before{content: "④";} .clauseArea .scroll ol.cNum>li:nth-child(5):before{content: "⑤";} .clauseArea .scroll ol.cNum>li:nth-child(6):before{content: "⑥";} .clauseArea .scroll ol.cNum>li:nth-child(7):before{content: "⑦";} .clauseArea .scroll ol.cNum>li:nth-child(8):before{content: "⑧";} .clauseArea .scroll ol.cNum>li:nth-child(9):before{content: "⑨";} .clauseArea .scroll ol.cNum>li:nth-child(10):before{content: "⑩";} .clauseArea .scroll ol.cNum>li:nth-child(11):before{content: "⑪";} .clauseArea .scroll ol.cNum>li:nth-child(12):before{content: "⑫";} .clauseArea .scroll ol.cNum>li:nth-child(13):before{content: "⑬";} .clauseArea .scroll ol.cNum>li:nth-child(14):before{content: "⑭";} .clauseArea .scroll ol.cNum>li:nth-child(15):before{content: "⑮";} .clauseArea .scroll ol.kr>li{} .clauseArea .scroll ol.kr>li:before{} .clauseArea .scroll ol.kr>li:nth-child(1):before{content: "가.";} .clauseArea .scroll ol.kr>li:nth-child(2):before{content: "나.";} .clauseArea .scroll ol.kr>li:nth-child(3):before{content: "다.";} .clauseArea .scroll ol.kr>li:nth-child(4):before{content: "라.";} .clauseArea .scroll ol.kr>li:nth-child(5):before{content: "마.";} .clauseArea .scroll ol.kr>li:nth-child(6):before{content: "바.";} .clauseArea .scroll ol.kr>li:nth-child(7):before{content: "사.";} .clauseArea .scroll ol.kr>li:nth-child(8):before{content: "아.";} .clauseArea .scroll ol.kr>li:nth-child(9):before{content: "자.";} .clauseArea .scroll ol.kr>li:nth-child(10):before{content: "차.";} .clauseArea .scroll ol.kr>li:nth-child(11):before{content: "카.";} .clauseArea .scroll ol.kr>li:nth-child(12):before{content: "타.";} .clauseArea .scroll ol.kr>li:nth-child(13):before{content: "파.";} .clauseArea .scroll ol.kr>li:nth-child(14):before{content: "하.";} .clauseArea .scroll ul.buls>li{padding-left:1.5rem ; position: relative;} .clauseArea .scroll ul.buls>li:before{content: "-"; display: inline-block; position:absolute; left: 0; top:0;} .clauseArea .scroll ul.circle>li{padding-left:15px; position: relative;} .clauseArea .scroll ul.circle>li:before{content: "ο"; display: inline-block; position:absolute; left: 0; top:-1px;} .clauseArea .scroll li>ol, .clauseArea .scroll li>ul{margin-bottom:0.7rem;} .clauseArea .nTable{width:100%; margin-top:0.5rem; background-color: #fff; border-top:1px solid #ddd; overflow:hidden;} .clauseArea .nTable>table{width:calc(100% + 1px); border-spacing:0; table-layout: fixed;} .clauseArea .nTable>table th, .clauseArea .nTable>table td{height:auto; padding:1rem; font-weight: 300; line-height:1.3; color:#888; text-align:center; border-collapse:collapse; empty-cells:show; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;} .clauseArea .nTable>table>thead>tr>th{background-color: #f8f8f8; font-weight:500; color:#222; position: relative;} .clauseArea .nTable>table>thead>tr>th+th{} .clauseArea .check-new{padding-top:1.5rem; float:right;} .clauseArea.no .tit{display:none;} .clauseArea.no .scroll{height:auto; padding:0px; background-color: transparent; border:none; overflow: visible;} /* Search Style */ .board_search{width:100%; margin-bottom:4rem; font-size:0; line-height:0; display: flex; justify-content: center; position: relative;} .board_search input[type=button], .board_search input[type=text], .board_search input[type=submit], .board_search select{height:4.5rem; line-height:4.3rem;} .board_search .mobile_Block{display:inline;} .board_search select{margin-right:1rem;} .board_search input[type=text]{width:25rem;} .board_search input[type=submit]{min-width:9rem; margin-left:-1px; background-color: var(--btn_c); border-color:var(--btn_c); color: #fff; cursor: pointer;} .board_search.small{margin-bottom:-1.6rem; justify-content: flex-end;} /* Category Style */ .multi-tab{width:100%; margin: 0 auto 4rem; font-size:0; line-height:0; text-align: center; display:block; position: relative;} .multi-tab .name{width:100%; height:7rem; padding:0 5rem 0 2rem; border:1px solid var(--point); font-weight: 600; font-size:2.2rem; line-height:1.4; color:var(--point); text-align: left; position: relative; display: none; align-items: center;} .multi-tab .name:after, .multi-tab .name:before{content: ""; width:1.4rem; height:1px; margin:0 0 0 0; background-color: var(--point); display: block; position:absolute; top:50%; transition: all .3s ease-out;} .multi-tab .name:after{right:3rem; transform:rotate(45deg);} .multi-tab .name:before{right:2rem; transform:rotate(-45deg);} .multi-tab ul.multi-list{display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; gap:0.3rem} .multi-tab ul.multi-list>li{flex:0 1 12.23rem; display:inline-block; vertical-align: top; position: relative;} .multi-tab ul.multi-list>li a{width:100%; height:4rem; padding:0 2rem; border:1px solid #ddd; font-weight: 400; font-size:1.6rem; line-height:1.5; color: #222; display: flex; align-items: center; justify-content: center; white-space: nowrap; border-radius:0.3rem; transition: all .3s ease-out;} .multi-tab.dpth02_tab ul.multi-list>li a{color: #666;} .multi-tab ul.multi-list>li:is(:hover, .active) a{background-color:var(--point); border-color:var(--point); color:#fff;} .multi-tab.dpth02_tab ul.multi-list>li:is(:hover, .active) a{background-color:#fff4ec; border-color:var(--point); color:#222;} /* Board Option */ .board_btn{width:100%; margin-top:6rem; font-size:0; line-height:0; display: flex; flex-flow: row wrap; justify-content: space-between; gap:1rem; position: relative;} .board_btn .click{min-width:14rem; height:5.4rem; margin:0; padding: 1.5rem 3rem; background-color:var(--btn_c); font-weight: bold; font-size:1.8rem; line-height:1.3; color:#fff; text-align: center; overflow:hidden; display: flex; gap: 0.5rem; align-items: center; justify-content: center; border-radius:0.5rem; cursor: pointer; position: relative; transition: all .3s ease-out;} .board_btn .click .fa-fw{width: 2rem; height: 2rem;font-size: 2rem;line-height: 1;margin: 0;padding: 0; aspect-ratio: 1/1;} .board_btn .click .fa{ vertical-align: middle;} .board_btn .click .fa.fa-pencil{text-decoration: underline;} .board_btn .click:is(:hover, .point){background-color:var(--point);} .board_btn .click.cancel{background-color:#999;} .board_btn .text{min-width:10rem; height:5rem; padding: 1.5rem 1.8rem; background-color: var(--point); font-weight: bold; font-size:2rem; line-height:1.2; color:#fff; text-align: center; overflow:hidden; display: flex; gap: 0.5rem; align-items: center; justify-content: center; position: relative;} .board_btn a.text{cursor: pointer;} .board_btn.center{justify-content: center;} .board_btn.start{justify-content: flex-start;} .board_btn.end{justify-content: flex-end;} .board_btn.long{justify-content: center; gap:2rem;} .board_btn.long .click{width:100%; max-width:24rem;} /* Board List Style */ .bo_int_color + .bo_head, .profile_area + .bo_head, .bo_int_color + script + .bo_head{margin-top:3rem;} .bo_head{margin-bottom:2rem; display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;} .bo_head .community_nav{width:100%; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;} .bo_head .community_nav li{flex:1;} .bo_head .community_nav li a{display:block; line-height:4.6rem; text-align:center; color:#111; background-color:#e6e6e6; border-radius:0.5rem;} .bo_head .community_nav li.active a{background-color:var(--point); color:#fff} .bo_head .board_search{margin-bottom:0; width:auto;} .bo_head .board_search form{display:flex; gap:1rem 0; flex-wrap:wrap;} .bo_head .sort_box{padding:0} .bo_head .bo_top_btn{width:100%; display:flex; gap:0.9rem; justify-content:flex-end; margin-left:auto} .bo_head .bo_top_btn button, .bo_head .bo_top_btn a{display:inline-block; min-width:14rem; padding:0 1.7rem; font-size:1.7rem; line-height:4.4rem; text-align:center; color:#fff; border:1px solid var(--point); border-radius:1rem; background-color:var(--point);} .bo_head .bo_top_btn .btn_badge{color:#111; background-color:#fff4ec;} .bo_head .bo_top_btn .btn_badge span{display:inline-block; padding:0 2.2rem 0 2.7rem; background:url("/images/ico_complete_chk.png"), url("/images/ico_question_circle.png"); background-repeat:no-repeat; background-position:left center, right center; background-size:2rem, 1.7rem;} .bo_head .bo_top_btn .btn_write{min-width:auto;} .bo_head .bo_top_btn .btn_write span{display:inline-block; padding:0 0 0 2.7rem; background:url("/images/ico_write_w.png") no-repeat center left/2rem;} .bo_head .bo_top_btn.row{width:auto;} .board-total{margin-bottom:1.5rem; font-size:1.6rem; line-height:1; color: #333; text-align: left;} .board-total>strong{font-weight: 400;} .board_list{width:100%; border-top:2px solid var(--btn_c); border-bottom:1px solid var(--bor_c); font-size:0; line-height:0; overflow:hidden;} .board_list>table{width:100%; margin-bottom:-1px; border-spacing:0;} .board_list>table th, .board_list>table td{padding:1.7rem 0; background-color: #fff; border-bottom:1px solid var(--bor_c); font-size:1.6rem; line-height:1.5; color:#666; text-align:center; border-collapse:collapse; empty-cells:show; word-break:break-all;} .board_list>table tr.notis>*{background-color: #f4f4f4;} .board_list>table tr.notis>.td_num2{font-weight: 700; color: var(--point);} .board_list>table tr.notis>.td_subject>a{font-weight: 700;} .board_list>table>thead>tr>th{background-color: #f6f6f6; font-weight: 500; font-size:1.7rem; color: #222;} .board_list>table>thead>tr>th+th{border-left:1px solid var(--bor_c)} .board_list>table>tbody>tr>th+td, .board_list>table>tbody>tr>td+td{border-left:1px solid var(--bor_c)} .board_list>table .mo_tit{display:none;} .board_list>table .td_subject{text-align:left;} .board_list>table .td_subject>a{color:#222; cursor:pointer; max-width:95%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break:break-all !important;} .board_list>table .td_subject>a:hover{color:var(--point);} .board_list>table .td_subject>a .fa{margin:0 0.7rem 0.2rem 0; display:inline-block; vertical-align: middle;} .board_list>table .state{padding:1.4rem 0;} .board_list>table .state .icon{width:8rem; height:3.5rem; background-color: var(--point); border:1px solid var(--point); font-size:1.5rem; line-height:1; color: #fff; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius:4px;} .board_list>table .state .icon.end{background-color: #ddd; border-color: var(--bor_c); color: #666;} .board_list>table .file{font-size:1.8rem;} .board_list>table .file>a{color: #666;} .board_list>table .store_photo{padding:1rem;} .board_list>table .store_photo img{max-height:12rem; object-fit:contain;} .board_list>table .noPost>td{height:20rem; vertical-align: middle;} .board_list.line>table{width:calc(100% + 1px);} .board_list.line>table th, .board_list.line>table td{border-right:1px solid var(--bor_c);} /* Pageing Style */ .paging_all{width:100%; margin:6rem auto 0; font-size:0; line-height:0; text-align:center; position:relative; display: flex; align-items: center; justify-content: center; gap:1.5rem;} .paging_all .btns, .paging_all>.num>strong, .paging_all>.num>a{width:4rem; height:4rem; background-color: #fff; border:1px solid var(--bor_c); text-align: center; display: flex; align-items: center; justify-content: center; position: relative;} .paging_all .btns, .paging_all .btns *{font-size:0 !important; line-height:0 !important;} .paging_all .btns:before, .paging_all .btns:after{content: ""; width: 1.2rem; height: 1.2rem; border-width:1px 0 0 1px; border-style:solid; border-color:#666; display: inline-block; position:absolute; left: 50%; top:50%;} .paging_all .btns:after{opacity: 0;} .paging_all .btns.prev:before{margin:-0.6rem 0 0 -0.3rem; transform:rotate(-45deg);} .paging_all .btns.next:before{margin:-0.6rem 0 0 -0.9rem; transform:rotate(135deg);} .paging_all>.num{margin:0; display: inline-flex; align-items: center; gap:0.5rem;} .paging_all>.num>strong, .paging_all>.num>a{font-weight: 300; font-size:1.6rem; line-height:1; color:#666;} .paging_all>.num .pg_start{} .paging_all>.num .pg_end{} .paging_all .btns:hover{background-color: var(--btn_c); border-color:var(--btn_c);} .paging_all .btns:hover:before, .paging_all .btns:hover:after{border-color:#fff;} .paging_all>.num>strong, .paging_all>.num>a:hover{background-color: var(--btn_c); border-color:var(--btn_c); color:#fff; z-index:2;} /* Board View */ .board_view{width:100%; border-top:2px solid var(--btn_c); border-bottom:1px solid var(--bor_c); overflow:hidden;} /* table-layout:fixed — 표가 '안에 든 것' 에 맞춰 늘어나지 않게 못 박는다. 안 그러면 안 꺾이는 첨부파일 이름 한 줄, 큰 그림 하나가 표를 화면 밖까지 늘려 폰에서 본문 오른쪽이 잘린다(실측: 390px 화면에서 표가 558px). 칸이 하나뿐인 표라 안전하다. */ .board_view>table{width:100%; table-layout:fixed; margin-bottom:-1px; border-spacing:0;} .board_view>table th, .board_view>table td{padding:2rem 0; background-color: #fff; font-weight: 400; font-size:1.6rem; line-height:1.5; color:#555; text-align:left; border-collapse:collapse; empty-cells:show; word-break:break-all;} .board_view>table>thead>tr>th{padding:3rem 2rem 2.6rem; border-bottom:1px solid var(--bor_c); font-size:0; text-align: left;} .board_view>table .view_cate{padding-bottom:0.5rem; font-weight: 500; font-size:1.5rem; color:var(--point);} .board_view>table .view_title{font-weight: 700; font-size:2.6rem; line-height:1.35; color: #1f2328; word-break: break-word !important;} .board_view>table .view_tit{margin-top:0.5rem; font-size:1.6rem;} .board_view>table .view_info{margin-top:1rem; display: flex; align-items: center; justify-content: space-between;} .board_view>table .view_info>*{display: flex; align-items: center; justify-content: space-between;} .board_view>table .view_info p.txt{font-size:1.6rem; color: #888; text-align:center; display:inline-block; vertical-align: top; position: relative;} .board_view>table .view_info p.txt>strong{font-weight: 400; color: #333;} .board_view>table .view_info p.txt>strong:after{content: ":"; padding-left:0.4rem;} .board_view>table .view_info p.txt+p.txt{margin-left:3.3rem;} .board_view>table .view_info p.txt+p.txt:before{content: ""; width:1px; height:1rem; margin-top:-0.5rem; background-color: #ccc; display: inline-block; position:absolute; left: -1.7rem; top:50%;} .board_view>table .view_info .user_badge{justify-content:flex-start;} .board_view>table .view_info .user_badge img{width:2rem;} /* .board_view>table .view_info .porfile_menu{display:none; border:1px solid var(--bor_c); background-color:#fff; position:absolute; left:0; top:100%; z-index:1;} .board_view>table .view_info .porfile_menu li+li{border-top:1px solid var(--bor_c)} .board_view>table .view_info .porfile_menu li a{display:block; padding:0.2rem 1.3rem; font-size:1.6rem; line-height:2.8rem; color:#888;} */ .board_view>table .view_info .like_box{display:block;} .board_view>table .view_info .like_box button{width:5rem; height:5rem; display:flex; justify-content:center; align-items:center; border-radius:50%; background-color:#e6e6e6;} .board_view>table .view_info .like_box button img{width:1.8rem} .board_view>table .view_info .like_box button.active{background-color:var(--point);} .board_view>table .view_info .like_box .like_count{display:block; font-size:1.6rem; color:#888; text-align:center;} .board_view>table .view_info.profile{padding-left:5rem; padding-right:7rem; margin-top:1.5rem; justify-content:flex-start; flex-wrap:wrap; gap:0 0.5rem; position:relative;} .board_view>table .view_info.profile .porfile_img{margin-top:-2rem; display:block; width:4rem; height:4rem; border:1px solid #ddd; border-radius:50%; overflow:hidden; position:absolute; left:0; top:50%; } .board_view>table .view_info.profile .porfile_img img{width:100%; height:100%; object-fit:cover;} .board_view>table .view_info.profile .user_name{display:block; font-size:1.6rem; font-weight:500; color:#333; line-height:1.2;} .board_view>table .view_info.profile .user_meta{display:flex; align-items:center; gap:0.5rem; min-height:2rem;} .board_view>table .view_info.profile .user_level{display:inline-flex; align-items:center; height:2rem; padding:0 0.7rem; color:#fff; font-size:1.2rem; font-weight:700; line-height:2rem; border-radius:1rem; background:#ff6200;} .board_view>table .view_info.profile .user_meta .user_name{display:inline-block;} .board_view>table .view_info.profile .user_meta .user_badge{display:inline-flex; align-items:center; gap:0.2rem;} .board_view>table .view_info.profile .view_txt{width:100%; justify-content:flex-start; gap:0.5rem;} .board_view>table .view_info.profile p.txt>strong{color:#888} .board_view>table .view_info.profile p.txt+p.txt{margin:0; padding-left:0.7rem;} .board_view>table .view_info.profile p.txt+p.txt::before{content:"·"; width:auto; height:auto; margin:0; background-color:transparent; left:0; top:0;} .board_view>table .view_info.profile .like_box{position:absolute; right:0; bottom:0} .board_view>table .state{padding-left:2rem;} .board_view>table .state .icon{width:8rem; height:3.5rem; background-color: var(--point); border:1px solid var(--point); font-size:1.5rem; line-height:1; color: #fff; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius:4px;} .board_view>table .state .icon.end{background-color: #ddd; border-color: var(--bor_c); color: #666;} .board_view>table .state.event .icon{border-radius:99px;} .board_view>table .e_icon{padding-left:2rem;} .board_view>table .e_icon>span{width:10rem; height:3rem; background-color: #fff; border:1px solid #035ab6; font-size:1.5rem; line-height:2.8rem; color: #035ab6; text-align: center; display: block; border-radius:99px;} .board_view>table .e_icon.ing>span{background-color: #035ab6; border-color:#035ab6; color: #fff;} .board_view>table .e_icon.end>span{background-color: #b3b3b3; border-color:#b3b3b3; color: #fff;} .board_view>table .view_cont{padding:3.2rem 2rem 4rem;} .board_view>table .view_cont p+.cont_area, .board_view>table .view_cont .cont_area+.cont_area{margin-top:4rem;} .board_view>table .view_cont .cont_tit{font-size:2.2rem; font-weight:500; color:#111; line-height:1.5;} .board_view>table .view_cont .img_area{margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem;} .board_view>table .view_cont .img_area img{max-width:100%;} .board_view>table .view_cont .cont_txt{margin-top:1.5rem;} .board_view>table .view_cont .bContract{opacity:0.5; font-weight:500;} .board_view>table #bo_v_img{text-align: center;} .board_view>table #bo_v_img img, .board_view>table .wideFrame{width:auto !important; height:auto !important; margin-bottom:3rem;} /* 짧은 글이 허전해 보이지 않을 만큼만 높이를 준다. 예전 padding-bottom:6.5rem 은 글이 짧을 때 본문 아래에 큰 빈칸을 만들었다. */ .board_view>table #bo_v_con{min-height:8rem; padding-bottom:1rem;} html[lang="en"] .board_view>table #bo_v_con *{word-break:break-word !important;} .board_view td.answer{padding:4rem 3rem; background-color: #f9f9f9; border-top:1px solid var(--bor_c); text-align: left; vertical-align: top;} .board_view td.answer>.tit{padding-bottom:1.5rem; font-weight: 500; font-size:2.2rem; line-height:1; color: #333;} /* 첨부파일 : 본문 위에 카드로 묶어서 보여 준다. [클립] 첨부파일 n [PDF] 파일이름.pdf ⬇ 예전에는 본문 맨 아래에 회색 네모로 붙어 있어, 글을 끝까지 내려야 파일이 있는 줄 알았다. */ .view_file_wrap{margin:0 0 3.2rem; padding:1.8rem 2rem 2rem; background:#f8f9fb; border:1px solid #edf0f4; border-radius:1.2rem;} .view_file_tit{ margin-bottom:1.3rem; padding-left:2.3rem; position:relative; font-size:1.4rem; line-height:1.6rem; font-weight:600; color:#495057; } .view_file_tit:before{ content:""; width:1.7rem; height:1.7rem; position:absolute; left:0; top:-0.05rem; background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23868e96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9.2 10 15.2a3.6 3.6 0 0 1-5.1-5.1l6.6-6.6a2.4 2.4 0 0 1 3.4 3.4l-6.6 6.6a1.2 1.2 0 0 1-1.7-1.7l6-6'/%3E%3C/svg%3E"); } .view_file_tit>span{margin-left:0.5rem; font-weight:700; color:var(--point);} .view_file{display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:flex-start;} .view_file>a{ max-width:100%; padding:0.9rem 3.8rem 0.9rem 1rem; display:flex; align-items:center; gap:1rem; font-size:1.5rem; line-height:1.4; color:#333; background-color:#fff; background-repeat:no-repeat; background-position:right 1.3rem center; background-size:1.6rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23adb5bd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v10'/%3E%3Cpath d='M5.5 9.5 10 14l4.5-4.5'/%3E%3Cpath d='M4 16.5h12'/%3E%3C/svg%3E"); border:1px solid #e3e7ec; border-radius:1rem; box-sizing:border-box; overflow:hidden; transition:border-color .15s, color .15s, box-shadow .15s; } .view_file>a>.nm{display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .view_file>a:hover{border-color:var(--point); color:var(--point); box-shadow:0 0.2rem 0.8rem rgba(255,102,0,.12);} /* 파일 종류 아이콘 : 확장자를 그대로 보여 준다 (PDF / PNG / HWP …) */ .view_file>a>.ico{ flex:0 0 auto; width:3.4rem; height:3.4rem; display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:700; line-height:1; letter-spacing:-0.02em; color:#fff; background:#adb5bd; border-radius:0.7rem; text-transform:uppercase; } .view_file>a[data-ext=""]>.ico{ font-size:0; background-color:#adb5bd; background-repeat:no-repeat; background-position:center; background-size:1.7rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 2.5H5.5a1.5 1.5 0 0 0-1.5 1.5v12a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V7z'/%3E%3Cpath d='M11.5 2.5V7H16'/%3E%3C/svg%3E"); } .view_file>a[data-ext="pdf"]>.ico{background:#e8384f;} .view_file>a[data-ext="hwp"]>.ico, .view_file>a[data-ext="hwpx"]>.ico, .view_file>a[data-ext="doc"]>.ico, .view_file>a[data-ext="docx"]>.ico{background:#2b6cb0;} .view_file>a[data-ext="xls"]>.ico, .view_file>a[data-ext="xlsx"]>.ico, .view_file>a[data-ext="csv"]>.ico{background:#1d7044;} .view_file>a[data-ext="ppt"]>.ico, .view_file>a[data-ext="pptx"]>.ico{background:#d24726;} .view_file>a[data-ext="jpg"]>.ico, .view_file>a[data-ext="jpeg"]>.ico, .view_file>a[data-ext="png"]>.ico, .view_file>a[data-ext="gif"]>.ico, .view_file>a[data-ext="webp"]>.ico, .view_file>a[data-ext="bmp"]>.ico{background:#7c5cd6;} .view_file>a[data-ext="zip"]>.ico, .view_file>a[data-ext="7z"]>.ico, .view_file>a[data-ext="rar"]>.ico{background:#e08e0b;} .view_file>a[data-ext="mp4"]>.ico, .view_file>a[data-ext="mov"]>.ico, .view_file>a[data-ext="avi"]>.ico{background:#0f766e;} .view_file>a[data-ext="dwg"]>.ico{background:#495057;} /* 매장찾기 */ #storeMap{width:100%; height:40rem; margin-bottom:4rem;} #storeLayMap{width:100%; height:40rem; margin-bottom:4rem;} .customoverlay .title {margin-right:35px; padding:5px 15px 7px; background-color:#fff; font-weight:500; font-size:1.4rem; line-height:1.6; text-align:center; display:block;} .storePhoto .slider{width:100%; background-repeat: no-repeat; background-position: center center; /*background-size: cover; */background-size: contain; box-sizing: border-box; position: relative; display:inline-block; vertical-align: top;} .storePhoto .slider img{width:100%;} .storePhoto .store-big .slider{width:100%; min-height:40rem;} .storePhoto .store-big .store-big-cont>span.l{padding:0 0.4rem; display:inline-block;} .storePhoto .store-big .store-big-cont.op{display:none;} .storePhoto .slick-arrow{width:4rem; height:9rem; background-color:rgba(235,235,235,0.7); background-repeat: no-repeat; background-position: center center; background-size: 2.5rem; border:none; font-size:0; line-height:0; position: absolute; top:50%; transform: translateY(-50%); z-index:7; cursor: pointer;} .storePhoto .slick-arrow.slick-prev{background-image: url('/theme/prix/img/board/arrow_30_left.svg'); left:0; border-radius:0 4px 4px 0;} .storePhoto .slick-arrow.slick-next{background-image: url('/theme/prix/img/board/arrow_30_right.svg'); right:0; border-radius:4px 0 0 4px;} .storePhoto .slick-arrow.slick-disabled{opacity: 0.3; cursor: default;} /* 제품 상세 */ .product_view{width:100%; padding-bottom:5rem; display: flex; justify-content: space-between;} .product_view>*{width:50%; max-width:58rem;} .product_view .right_box{margin-left:4.5rem;} .product_view .productText{} .product_view .productText .view-hGroup{padding-bottom:3rem; margin-bottom:3rem; border-bottom:1px solid #111;} .product_view .productText .title{font-weight: bold; font-size:3.6rem; line-height:1.4; color: #0066b3;} .product_view .productText .tit{padding-top:1.5rem; font-weight: 500; font-size:2rem; line-height:3rem; color: #111;} .product_view .productText .view-scroll{max-height:40rem; font-size:1.8rem; line-height:1.7; color: #666; overflow:hidden; overflow-y:auto;} .product_view .productText .view-scroll ul{} .product_view .productText .view-scroll ul>li{padding:0 0 0 22px !important; background: url('/theme/prix/img/board/bul_check.gif') no-repeat left 7px; background-size: 14px;} .product_view .productText .view-scroll ul>li+li{margin-top:5px;} .product_view .productText .view-scroll ul .fa {display:none !important;} .productPhoto .slider{width:100%; background-repeat: no-repeat; background-position: center center; /*background-size: cover; */background-size: contain; position: relative; display:inline-block; vertical-align: top;} .productPhoto .slider img{width:100%;} .productPhoto .product-big .slider{width:100%; min-height:46rem; border:1px solid #ccc;} .productPhoto .product-small .slider{width:100%; min-height:10.1rem; margin:0 1.1rem; cursor: pointer;} /*.productPhoto .product-small .slider:before{content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); display: inline-block; position:absolute; left: 0; top:0px; } box-shadow:0 0 10px rgba(0,0,0,0.1);*/ .productPhoto .product-small .slick-slide{margin:0 1.1rem;} .productPhoto .product-small .slick-slide .slider{margin:0;} .productPhoto .product-small .slick-current .slider:before{opacity: 0;} .productPhoto .slick-arrow{width:4rem; height:9rem; background-color:rgba(235,235,235,0.7); background-repeat: no-repeat; background-position: center center; background-size: 2.5rem; border:none; font-size:0; line-height:0; position: absolute; top:50%; transform: translateY(-50%); z-index:7; cursor: pointer;} .productPhoto .slick-arrow.slick-prev{background-image: url('/theme/prix/img/board/arrow_30_left.svg'); left:0; border-radius:0 4px 4px 0;} .productPhoto .slick-arrow.slick-next{background-image: url('/theme/prix/img/board/arrow_30_right.svg'); right:0; border-radius:4px 0 0 4px;} .productPhoto .slick-arrow.slick-disabled{opacity: 0.3; cursor: default;} /* review_wrap 리뷰 */ .review_wrap{} .review_wrap .review_top{padding:2rem 3rem 4rem; border-bottom:1px solid #ddd;} .review_wrap .review_top > p{font-size:2.2rem; color:#111; font-weight:500;} .review_wrap .revw_total{display:flex; align-items:center;} .review_wrap .revw_total .star_average{padding-left:4rem; font-size:4rem; font-weight:700; color:#333; position:relative; background:url("/images/ico_star.svg") no-repeat left center/3rem;} .review_wrap .revw_total .total_num{margin-left:1rem; display:inline-block; font-weight:500;} .review_wrap .review_form{display:flex; gap:1.5rem 1rem; flex-wrap:wrap;} .review_wrap .review_form textarea{width:calc(100% - 14rem); height:8rem; resize:none;} .review_wrap .review_form button{width:13rem; font-size:1.6rem; font-weight:500; color:#fff; text-align:center; border-radius:0.5rem; background-color:var(--point);} .review_wrap .review_write{padding:2rem; border-bottom:1px solid #ddd} .review_wrap .review_write .revw_chk_op_li{margin-bottom:1rem;} .review_wrap .review_write .revw_chk_op_li .tit{margin-bottom:1rem; font-size:1.8rem; color:#111; font-weight:600;} .review_wrap .review_write .revw_chk_op_li .tit span{display:inline-block; font-size:1.4rem; color:#666; font-weight:400;} .review_wrap .review_write .revw_chk_op_li .tit span:first-child{margin-left:1rem;} .review_wrap .review_write .chk_li{display:flex; gap:0.6rem; flex-wrap:wrap;} .review_wrap .review_write .chk_li .check-new{} .review_wrap .review_write .chk_li .check-new input[type="checkbox"]+label{display:inline-block; padding:0 1.5rem; font-size:1.6rem; line-height:3.6rem; text-align:center; color:#666; border:1px solid #ddd; border-radius:0.5rem;} .review_wrap .review_write .chk_li .check-new input[type="checkbox"]:checked+label{color:var(--point); border-color:var(--point); background-color:#fff4ec;} .review_wrap .review_write .star_wr{margin-bottom:1rem; display:flex; gap:1rem; align-items:center;} .review_wrap .review_write .star_wr>p{font-weight:500; color:#111; line-height:2rem;} .review_wrap .review_write .star_wr>span{display:inline-block; font-size:1.4rem; line-height:1.2; align-self:flex-end;} .star_wr .stat_li{display:flex; gap:0.3rem} .star_wr .stat_li li{width:1.5rem;height:1.5rem;background:url("/images/ico_star_off.svg") no-repeat center;background-size:contain;position:relative;} .star_wr .stat_li li input[type=radio]{width:100%;height:100%;opacity:0;position:absolute;left:0;top:0;cursor:pointer;} .star_wr .stat_li li.on{background-image:url("/images/ico_star.svg");} .review_wrap .review_list_wr{} .review_wrap .review_list_wr .non_review{min-height:20rem; text-align:center; display:flex; justify-content:center; align-items:center;} .review_wrap .review_list_wr .review_ul{} .review_wrap .review_list_wr .review_ul > li{border-bottom:1px solid #ddd} .review_wrap .review_list_wr .revw_li{padding:2rem} .review_wrap .review_list_wr .user_top{display:flex; justify-content:space-between; align-items:center; gap:0.5rem 1.5rem;} .review_wrap .review_list_wr .usr_info{padding-left:5rem; display:flex; flex-wrap:wrap; gap:0 0.5rem; position:relative;} .review_wrap .review_list_wr .porfile_img{margin-top:-2rem; display:block; width:4rem; height:4rem; border:1px solid #ddd; border-radius:50%; overflow:hidden; position:absolute; left:0; top:50%;} .review_wrap .review_list_wr .porfile_img img{width:100%; height:100%; object-fit:cover;} .review_wrap .review_list_wr .usr_name{display:block; font-weight:500; color:#333; line-height:1.2;} .review_wrap .review_list_wr .usr_badge img{width:2rem;} .review_wrap .review_list_wr .revw_date{width:100%; display:block; line-height:1.2;} .review_wrap .review_list_wr .revw_rating{padding-left:2rem; font-size:1.6rem; line-height:1; font-weight:500; color:#333; background:url("/images/ico_star.svg") no-repeat center left/1.5rem;} .review_wrap .review_list_wr .revw_cont{margin-top:1.5rem;} .review_wrap .review_list_wr .revw_cont .revw_tit{font-weight:600; color:#333;} .review_wrap .review_list_wr .reply_box{margin-top:1.5rem;} .review_wrap .review_list_wr .reply_box .review_form{display:none; margin-top:1rem;} .review_wrap .review_list_wr .reply_box .reply_btn{padding:0 1.2rem; font-size:1.5rem; color:var(--point); line-height:2.6rem; border:1px solid var(--point); border-radius:0.3rem; background-color:#fff4ec;} .review_wrap .review_list_wr .reply_cont{margin-top:1.5rem; padding:1.5rem; background-color:#f6f6f6; border-radius:1.5rem;} .review_wrap .review_list_wr .reply_cont .comp_info{margin-bottom:1rem;} .review_wrap .review_list_wr .reply_cont .comp_info span{display:inline-block; line-height:2rem;} .review_wrap .review_list_wr .reply_cont .comp_info .comp_name{color:#333; font-weight:500;} .review_wrap .review_list_wr .reply_cont .comp_info .reply_date{margin-left:0.5rem; font-size:1.4rem;} .review_wrap .review_list_wr .revw_chk_li{margin-top:1rem; display:flex; gap:0.6rem; flex-wrap:wrap;} .review_wrap .review_list_wr .revw_chk_li li{padding:0 1.5rem; font-size:1.6rem; line-height:3.6rem; text-align:center; color:#555; border:1px solid #ddd; border-radius:0.5rem; background-color:#f6f6f6;} /* sort_box */ .sort_box{padding:1rem 0; text-align:right;} .sort_box select{height:4.5rem; line-height:4.3rem;} .sort_box.two{display:flex; gap:1rem} .sort_box .myRecord{display:block; width:11rem; font-size:1.6rem; line-height:4.5rem; color:#fff; font-weight:500; text-align:center; background-color:#999; border-radius:0.3rem;} .sort_box .myRecord.active{background-color:var(--point);} /* PageNavigation Style */ .pageNavigation{width:100%; margin-top:-1px; border-bottom:1px solid var(--bor_c); overflow:hidden; position: relative; z-index:2;} .pageNavigation>dl{width:100%; border-top:1px solid var(--bor_c); font-size:1.6rem; line-height:1.1; color: #333; display:table; table-layout: fixed;} .pageNavigation>dl>*{display:table-cell; vertical-align:middle; box-sizing:border-box; position: relative;} .pageNavigation>dl>dt{width:10.5rem; height:6.5rem; text-align:center; color:#333;} .pageNavigation>dl>dt:before{content: ""; width: 1rem; height: 1rem; border-width:1px 0 0 1px; border-style:solid; border-color:#474a52; display: inline-block; position:absolute; right: 0; top:3.5rem;} .pageNavigation>dl.prev>dt:before{margin:-0.2rem 0 0 0; transform:rotate(45deg);} .pageNavigation>dl.next>dt:before{margin:-0.7rem 0 0 0; transform:rotate(-135deg);} .pageNavigation>dl>dd{padding:0 12.5rem 0 4.5rem;} .pageNavigation>dl>dd>a{max-width:100%; font-weight: 400; color:#333; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .pageNavigation>dl>dd>a:hover{color:var(--point);} .pageNavigation>dl>dd>.day{height:6.5rem; font-weight: 300; color: #666; position: absolute; right:3rem; top:0; display: flex; align-items: center; justify-content: flex-end;} /* Comment Style */ .comment_Area .comment_write{padding:3rem 2rem; background-color: #fdfdfe; border-top:2px solid var(--btn_c);} .comment_Area .comment_write>div{display: flex; justify-content: space-between;} .comment_Area .comment_write>div.top{flex-direction: row; align-items: end; justify-content: flex-start;} .comment_Area .comment_write>div.btm{margin-top:3rem;} /* Board Write */ .board_write{width:100%; border-top:2px solid var(--btn_c); border-bottom:1px solid var(--bor_c); overflow:hidden;} .board_write + .board_write{margin-top:6rem;} .board_write>table{width:100%; border-spacing:0; margin-bottom:-1px; table-layout: fixed;} .board_write>table th, .board_write>table td{height:7rem; padding:1.2rem 0 1.2rem 2rem; border-bottom:1px solid var(--bor_c); font-weight: 400; font-size:1.6rem; line-height:1.5; color: #666; text-align:left; vertical-align: middle; border-collapse:collapse; empty-cells:show;} .board_write>table th{width:17rem; padding:0px; background-color:#fbfbfb; border-right:1px solid var(--bor_c); font-weight: 600; color: #333; text-align: center;} .board_write input[type=button], .board_write input[type=text], .board_write input[type=password], .board_write input[type=file], .board_write input[type=submit], .board_write select, .board_write textarea, .board_write .btns{width:100%;} .board_write .small{max-width:30rem;} .board_write .btns{width:12rem; background-color:var(--btn_c); border-color:var(--btn_c); font-weight: 500; color: #fff; text-align: center;} .board_write .flex{display: flex; align-items: center; gap:1rem;} .board_write .flex.wrap{flex-flow: row wrap;} .board_write .flex + .flex{margin-top:1rem;} .board_write .flex.check{gap:2rem 4rem;} .board_write .flex.three .check-new{width:27%; white-space: nowrap;} .board_write .flex.tac{justify-content: center;} .board_write .flex.taj{justify-content: space-between;} .board_write .flex.juso{} .board_write .flex.juso>input{width:40%;} .board_write .flex.juso>input+input{width:60%;} .board_write .flex.three{width:100%; max-width:80rem;} .board_write .flex.three>*{width:auto;} .board_write .flex.three input{width:100%;} .board_write .flex.email{} .board_write .flex.day select{width:100%;} .board_write .type{font-size:1.6rem; line-height:1; display:inline-block; vertical-align:middle;} /* [s] 파일첨부 예전에는 검은 "+ 파일추가" 막대가 위에 통으로 깔리고 그 아래 회색 "파일첨부" 덩어리가 붙어 있어 무엇을 눌러야 할지 헷갈렸다. 에디터와 같은 결로, 파일 한 줄 = [파일 선택] [고른 파일 이름] [x] 형태로 바꿨다. */ .board_write .fileArea{position:relative; padding:1.2rem; border:1px solid #e3e7ec; border-radius:0.8rem; background:#fff; box-sizing:border-box;} .board_write .file{width:100%; font-size:1.5rem; line-height:1.4; position:relative; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;} .board_write .file+.file{margin-top:0.8rem; padding-top:0.8rem; border-top:1px solid #f1f3f5;} .board_write .file>*{vertical-align:middle;} .board_write .file>.file_wrap{display:inline-flex; align-items:center; gap:0.6rem; flex:0 0 auto;} /* 파일 선택 버튼 */ .board_write .file>.file_wrap>.btnFile{ height:3.8rem; padding:0 1.4rem 0 3.6rem; font-size:1.5rem; line-height:3.8rem; font-weight:500; color:#495057; text-align:center; background-color:#fff; background-repeat:no-repeat; background-position:1.2rem center; background-size:1.6rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23868e96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 2.5H5.5a1.5 1.5 0 0 0-1.5 1.5v12a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V7z'/%3E%3Cpath d='M11.5 2.5V7H16'/%3E%3C/svg%3E"); border:1px solid #d5d9de; border-radius:0.6rem; cursor:pointer; overflow:hidden; display:inline-block; position:relative; box-sizing:border-box; transition:border-color .15s, color .15s, background-color .15s; } .board_write .file>.file_wrap>.btnFile:hover{border-color:var(--point); color:var(--point); background-color:#fff8f3;} .board_write .file>.file_wrap>.btnFile>input[type=file]{width:100%; height:100%; opacity:0; cursor:pointer; position:absolute; left:0; top:0; z-index:3;} /* 고른 파일 지우기 (파일을 고른 줄에만 나온다) */ .board_write .file .delFile{display:none;} .board_write .file.has-file .delFile{display:inline-block; width:2.4rem; height:2.4rem; border-radius:50%; background:#f1f3f5; position:relative; cursor:pointer; flex:0 0 auto;} .board_write .file.has-file .delFile:hover{background:#ffe3e3;} .board_write .file .delFile:before, .board_write .file .delFile:after{content:""; width:1.1rem; height:0.16rem; background:#868e96; position:absolute; left:50%; top:50%; margin:-0.08rem 0 0 -0.55rem;} .board_write .file .delFile:before{transform:rotate(45deg);} .board_write .file .delFile:after{transform:rotate(-45deg);} .board_write .file.has-file .delFile:hover:before, .board_write .file.has-file .delFile:hover:after{background:#e03131;} /* 고른 파일 : 이미지면 미리보기, 아니면 이름표 */ .board_write .file .thumb{display:none; width:3.8rem; height:3.8rem; border:1px solid #e9ecef; border-radius:0.6rem; background-position:center; background-repeat:no-repeat; background-size:cover; overflow:hidden; box-sizing:border-box; flex:0 0 auto;} /* 실제로 보여 줄 내용(미리보기 그림 또는 파일 이름)이 있을 때만 나온다 */ .board_write .file .thumb[style*="background-image"], .board_write .file .thumb.text:not(:empty){display:inline-block;} .board_write .file .thumb>.over{width:0; height:0; margin:0; background-position:center top; background-repeat:no-repeat; background-size:cover; display:block; position:fixed; left:50%; top:50%; z-index:99; box-sizing:border-box; -webkit-transition:.4s; transition:.4s; transform-origin:50% 50%; opacity:0; border-radius:0.8rem;} .board_write .file .thumb:hover>.over{width:40rem; height:40rem; margin:-20rem 0 0 -20rem; opacity:1;} .board_write .file .thumb.text{width:auto; max-width:calc(100% - 20rem); height:auto; margin:0; padding:0.6rem 1.3rem; border:0; border-radius:2rem; font-size:1.4rem; line-height:1.5; font-weight:400; color:#495057; background:#f1f3f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* 줄 추가 */ .board_write .fileArea .filePlus{ display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; height:4rem; margin:1rem 0 0; font-size:1.5rem; line-height:1; font-weight:500; color:#868e96; background:#fff; border:1px dashed #ced4da; border-radius:0.6rem; text-align:center; cursor:pointer; box-sizing:border-box; transition:border-color .15s, color .15s; } .board_write .fileArea .filePlus:hover{border-color:var(--point); color:var(--point);} .board_write .fileArea .filePlus:before{content:"+"; font-size:1.9rem; font-weight:400; line-height:1;} /* [e] 파일첨부 */ /* Board Write 포트폴리오 */ .board_write.portfolio input[required], .board_write.portfolio textarea[required]{background-image:none;} .board_write.portfolio select[required]{background:url("/images/bg_select.svg") no-repeat right 1rem center;} .board_write.portfolio input[type="text"]::placeholder, .board_write.portfolio textarea::placeholder{color:#999} .board_write.portfolio textarea{resize:none; height:12rem;} .board_write.portfolio .box_arrow_tit.required::after{content:"*"; display:inline-block; margin-left:0.5rem; color:var(--point)} .board_write.portfolio .bo_wr_sect{padding:3rem 3.9rem 4rem; border:1px solid #e6e6e6} .board_write.portfolio .bo_wr_sect + .bo_wr_sect{margin-top:2rem;} .board_write.portfolio .form_area + .form_area{margin-top:4.5rem;} .board_write.portfolio .bo_wr_article{margin-top:5rem; padding-top:6rem; background:url("/images/line_dash.png") repeat-x center top/1.2rem;} .board_write.portfolio .bo_wr_article .article_top{margin-bottom:4.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;} .board_write.portfolio .bo_wr_article .article_top .article_order{display:inline-block; padding:0 2.5rem; font-size:1.7rem; line-height:4.5rem; text-align:center; font-weight:600; color:#111; border-radius:1rem; background-color:#f6f6f6;} .board_write.portfolio .bo_wr_article .order_plus{display:flex; align-items:center; gap:1rem 2rem;} .board_write.portfolio .bo_wr_article .order_plus .btns_tit{font-size:1.7rem; line-height:3rem; color:#111; font-weight:600;} .board_write.portfolio .bo_wr_article .order_plus .btns_box{display:flex; gap:0.6rem;} .board_write.portfolio .bo_wr_article .order_plus .btns_box button{width:4rem; height:3rem; border:1px solid var(--point); border-radius:0.3rem; position:relative;} .board_write.portfolio .bo_wr_article .order_plus .btns_box button::before, .board_write.portfolio .bo_wr_article .order_plus .btns_box button::after{content:""; display:block; width:1.2rem; height:0.2rem; background-color:var(--point); position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);} .board_write.portfolio .bo_wr_article .order_plus .btns_box .btn_plus::after{transform:translate(-50%, -50%) rotate(90deg);} .board_write.portfolio .tit_box .box_arrow_tit{margin-bottom:0;} .board_write.portfolio .tit_box > span{font-size:1.7rem; line-height:2.2rem;} .board_write.portfolio .form_box{margin-top:1.8rem;} .board_write.portfolio .input_guid{margin-top:0.3rem; text-align:right; line-height:2.6rem; font-weight:300; color:#999;} .board_write.portfolio .file>.file_wrap>.btnFile{width:16rem; height:10rem; border:1px solid #e6e6e6; border-radius:1rem; background:#fff url("/images/ico_file_plus.png"); background-repeat:no-repeat; background-size:3.1rem; background-position:center;} .board_write.portfolio .file .queue{display:flex; gap:1rem; flex-wrap:wrap;} .board_write.portfolio .file .thumb{display:block; width:16rem; height:10rem; aspect-ratio:16/10; border-radius:1.1rem; border:1px solid #e6e6e6; overflow:hidden; position:relative;} .board_write.portfolio .file .thumb img{width:100%; height:100%; object-fit:cover;} .board_write.portfolio .file .file_cancel{width:2rem; height:2rem; background-color:#fff; border-radius:50%; position:absolute; right:1rem; top:1rem; z-index:1;} .board_write.portfolio .file .file_cancel::before, .board_write.portfolio .file .file_cancel::after{content:""; margin:-0.0rem 0 0 -0.5rem; width:1rem; height:1px; background-color:#111; position:absolute; left:50%; top:50%;} .board_write.portfolio .file .file_cancel::before{transform:rotate(45deg);} .board_write.portfolio .file .file_cancel::after{transform:rotate(-45deg);} .board_write.portfolio .bo_wr_info{margin-top:-2.3rem;} .board_write.portfolio .bo_wr_info .num_li{margin-top:3rem; padding:2rem; font-size:1.6rem; line-height:2.4rem; background-color:#f6f6f6; border-radius:1rem;} .board_write.portfolio .bo_wr_info .num_li > li{padding-left:1.8rem; position:relative;} .board_write.portfolio .bo_wr_info .num_li > li::before{content:counter(num_li)"."; position:absolute; left:0; top:0;} .board_write.portfolio + .board_btn .click{min-width:20rem} /* Faq List */ .faqArea{width:100%; border-top:2px solid var(--btn_c); font-size:0; line-height:0; position:relative; overflow:hidden;} .faqArea>li{border-bottom:1px solid var(--bor_c); position: relative;} .faqArea>li+li{} .faqArea>li .q{padding:2.5rem 8rem; font-weight: 600; font-size:1.6rem; line-height:2.8rem; color: #1b1b1b; display:block; position: relative;} .faqArea>li .q:before{content: "Q"; width:3.6rem; height:3.6rem; background-color: var(--btn_c); font-size:2rem; line-height:1.2; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; position:absolute; left: 2.5rem; top:2.1rem; border-radius:0.3rem;} .faqArea>li .q:after{content: "↓"; font-weight: 500; font-size:2rem; line-height:1.2; color: #111; text-align: center; position:absolute; right: 4rem; top:50%; transform: translateY(-50%); font-family:"SUIT Variable", sans-serif !important;} .faqArea>li .q:hover{} .faqArea>li .a{padding:2.5rem 8rem; background-color: #fafbfd; border-top:1px solid var(--bor_c); font-weight: 400; font-size:1.6rem; line-height:2.7rem; color: #626262; display:none; position: relative;} .faqArea>li .a>p{font-weight: 400; font-size:1.6rem; line-height:2.7rem;} .faqArea>li .a:before{content: "A"; width:3.6rem; height:3.6rem; background-color: #fff; border:1px solid #c6c6c6; font-weight: 500; font-size:2rem; line-height:1.2; color:var(--btn_c); text-align: center; display: flex; align-items: center; justify-content: center; position:absolute; left: 2.5rem; top:2.1rem; border-radius:0.3rem;} .faqArea>li .view_file{margin-top:2rem;} .faqArea>li.active .q{} .faqArea>li.active .q:before{} .faqArea>li.active .q:after{transform:translateY(-50%) rotate(-180deg);}/* color: var(--point); */ .faqArea>li.noPost{width:100%; height:30rem; font-size:1.6rem; line-height:1; color: #666; text-align: center; display:table;} .faqArea>li.noPost>p{display:table-cell; vertical-align: middle;} .faqArea>li.ad{padding-top:3rem;} /* Photo List */ .photo_list{width:100%; padding-top:2rem; font-size:0; line-height:0; position: relative; border-top:0.2rem solid #666;} .photo_list ul.list{text-align: left; display: flex; flex-flow: row wrap; gap:3rem;} .photo_list ul.list li{width:calc((100% - 9rem) / 4); position: relative;} .photo_list ul.list li .gall_cont{width:100%; background-color: #fff; display:block; position: relative;} .photo_list ul.list li .gall_cont .thumb{width:100%; border:1px solid #eee; aspect-ratio: 1/1; display:block; overflow:hidden; position: relative; border-radius:1rem;} .photo_list ul.list li .gall_cont .thumb.noIMG{background-color:#f4f4f4;} .photo_list ul.list li .gall_cont .thumb.noIMG::before{content:""; display:block; position:absolute; inset:0; background:url("/images/logo.svg") no-repeat center/48%; filter:grayscale(1); opacity:0.2;} .photo_list ul.list li .gall_cont .thumb.noIMG .blind{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0);} .photo_list ul.list li .gall_cont .thumb img{width:100%; max-width:none; height:100%; object-fit:cover; vertical-align: top; transition: all .7s ease-out;} .photo_list ul.list li .gall_cont p.over{width:100%; height:100%; background-color: rgba(0,0,0,0.3); position: absolute; left:0; top:0; opacity: 0; z-index:1; z-index:3;} .photo_list ul.list li .gall_cont p.over:before, .photo_list ul.list li .gall_cont p.over:after{content: ""; background-color: #fff; display: inline-block; position:absolute; left: 50%; top:50%; opacity: 0;} .photo_list ul.list li .gall_cont p.over:before{width: 100px; height: 1px; margin:-0.5px 0 0 -50px;} .photo_list ul.list li .gall_cont p.over:after{width: 1px; height: 100px; margin:-50px 0 0 -0.5px;} .photo_list ul.list li .gall_cont p.over>span{width:100%; font-weight: 300; font-size:1.5rem; line-height:1; color: #fff; text-align: center; position: absolute; left:0; top:65%; opacity: 0;} .photo_list ul.list li .gall_cont p.over.move{transition: all 0s ease-out; opacity: 1; display:none;} .photo_list ul.list li .gall_cont .area{width:100%; min-height:13rem; padding:2rem 0 5.6rem; display: flex; flex-flow: column wrap; position: relative;} .photo_list ul.list li .gall_cont .area .tt{width:100%; font-size:1.8rem; line-height:2.6rem; color: #666; display: block; overflow:hidden; position: relative; word-break:keep-all; word-wrap:break-word; word-break:break-all;} .photo_list ul.list li .gall_cont .area .title{width:100%; font-weight: 700; font-size:1.8rem; line-height:1.4; color: #333; display: inline-flex; align-items: center; gap:1rem;} .photo_list ul.list li .gall_cont .area .title.tac{justify-content: center;} .photo_list ul.list li .gall_cont .area .title .icon{} .photo_list ul.list li .gall_cont .area .title .icon:before{content: ""; width:1.8rem; height:1.8rem; background-color: var(--btn_c); font-weight: 300; font-size:1rem; line-height:1.8rem; color: #fff; letter-spacing: 1px; text-align: center; border-radius:99px; display:block;} .photo_list ul.list li .gall_cont .area .title .icon.new:before{content: "N";} .photo_list ul.list li .gall_cont .area .title .icon.hot:before{content: "H";} .photo_list ul.list li .gall_cont .area .cate{margin-bottom:0.5rem; font-size:1.6rem; color: #999;} .photo_list ul.list li .gall_cont .area .text{margin-top:1rem;} .photo_list ul.list li .gall_cont .area .day{margin-top:2rem; font-size:1.6rem; color: #999; position: absolute; left:0; bottom:2rem;} .photo_list ul.list li .gall_cont .area .btns{margin-top:2.5rem; display: flex; justify-content: center;} .photo_list ul.list li .gall_cont .area .btns>*{height:4rem; padding:0 2rem; background-color: #666; font-size:1.4rem; line-height:1; color: #fff; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap:0.7rem; white-space: nowrap; border-radius:0.3rem; box-shadow:0 0 2rem rgba(0,0,0,0.1); transition: all .3s ease-out;} .photo_list ul.list li .gall_cont .area .btns.down img{width:1.5rem;} .photo_list ul.list li .gall_cont:hover .area .btns *{background-color: var(--point);} .photo_list ul.list li .gall_cont .category{display: flex; justify-content: center; position: relative; z-index:4;} .photo_list ul.list li .gall_cont .category p{width:9.2rem; height:3.4rem; margin-top:-5.4rem; background-color: #7030a0; font-size:1.5rem; line-height:1; color: #fff; text-align: center; border-radius:99px; display: flex; align-items: center; justify-content: center;} .photo_list ul.list li .gall_cont .category p.video{background-color: #00a5bb;} .photo_list ul.list li .gall_cont .area .state{margin-bottom:1.5rem;} .photo_list ul.list li .gall_cont .area .state .icon{width:8rem; height:3.5rem; background-color: var(--point); border:1px solid var(--point); font-size:1.5rem; line-height:1; color: #fff; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius:99px;} .photo_list ul.list li .gall_cont .area .state .icon.end{background-color: #ddd; border-color: var(--bor_c); color: #666;} .photo_list ul.list li .gall_cont .area .one{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .photo_list ul.list li .gall_cont .area .two{max-height:5.2rem; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break:break-all !important;} .photo_list ul.list li .gall_cont .area .three{max-height:7.6rem; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break:break-all !important;} .photo_list button.more{width:23rem; height:5.4rem; margin:7rem auto 0; padding:0; border:1px solid #aaa; font-weight: 700; font-size:1.8rem; line-height:1; color: var(--point); text-align: center; position: relative; cursor: pointer; display:block; border-radius:99px;} .photo_list button.more:after{content: "↓"; font-weight: normal; font-size:1.5rem; color: #999; position:absolute; right: 3rem; top:50%; transform: translateY(-50%);} /* 이벤트 (가로) */ .photo_list.event{border-top:2px solid var(--btn_c); border-bottom:1px solid var(--bor_c);} .photo_list.event ul.list{flex-flow: column wrap; gap:0;} .photo_list.event ul.list li:first-child{padding-top:0;} .photo_list.event ul.list li{width:100%; padding:2rem 2rem 2rem;} .photo_list.event ul.list li+li{border-top:1px solid var(--bor_c);} .photo_list.event ul.list li .gall_cont{padding-bottom:4rem; display: flex; flex-flow: row-reverse wrap; gap:3rem 5rem; align-items:flex-start; justify-content:space-between;} .photo_list.event ul.list li .gall_cont .thumb{width:16rem; aspect-ratio:160/107; border-radius:1rem; overflow:hidden;} .photo_list.event ul.list li .gall_cont .area{width:calc(100% - 26rem); flex:1; padding:0; position:static;} .photo_list.event ul.list li .gall_cont .area .e_icon{margin-top:1.5rem;} .photo_list.event ul.list li .gall_cont .area .e_icon>span{width:10rem; height:3rem; background-color: #fff; border:1px solid #035ab6; line-height:2.8rem; color:#035ab6; text-align: center; display: block; border-radius:99px;} .photo_list.event ul.list li .gall_cont .area .e_icon.ing>span{background-color:#035ab6; border-color:#035ab6; color: #fff;} .photo_list.event ul.list li .gall_cont .area .e_icon.end>span{background-color:#b3b3b3; border-color:#b3b3b3; color: #fff;} .photo_list.event ul.list li .usr_info{margin-top:1rem; display:flex; align-items:center; gap:0 0.8rem;} .photo_list.event ul.list li .usr_info .porfile_img{width:3rem; height:3rem; border-radius:50%; border:1px solid #ddd; overflow:hidden;} .photo_list.event ul.list li .usr_info .porfile_img img{width:100%; height:100%; object-fit:cover;} .photo_list.event ul.list li .usr_info .usr_meta{display:flex; align-items:center; gap:0.5rem; min-width:0;} .photo_list.event ul.list li .usr_info .usr_level{display:inline-flex; flex:none; align-items:center; height:2rem; padding:0 0.7rem; color:#fff; font-size:1.2rem; font-weight:700; line-height:2rem; border-radius:1rem; background:#ff6200;} .photo_list.event ul.list li .usr_info .usr_name{font-size:1.7rem; color:#666; line-height:1;} .photo_list.event ul.list li .usr_info .usr_badge{display:inline-flex; align-items:center; gap:0.2rem;} .photo_list.event ul.list li .usr_info .usr_badge img{width:2rem;} .photo_list.event ul.list li .post_meta{width:100%; display:flex; justify-content:space-between; align-items:center; position:absolute; left:0; bottom:0;} .photo_list.event ul.list li .it_count{display:flex; gap:2rem; align-items:center; font-size:1.6rem; line-height:1; color:#999;} .photo_list.event ul.list li .it_count p{display:flex; gap:0.3rem} .photo_list.event ul.list li .it_count .like_count .ico_box{display:inline-block; margin-top:-0.3rem;} .photo_list.event ul.list li .it_count .like_count .ico_box img{width:1.6rem;} .photo_list.event ul.list li .it_count .comment_count .ico_box{display:inline-block; margin-top:0.1rem;} .photo_list.event ul.list li .it_count .comment_count .ico_box img{width:1.7rem;} .photo_list.event ul.list li .gall_cont .area .day{width:auto; position:static; margin-top:0;} /* newsletter */ .photo_list.newsletter{} .photo_list.newsletter ul.list{gap:4rem 7rem;} .photo_list.newsletter ul.list li{width:calc((100% - 14rem) / 3);} .photo_list.newsletter ul.list li .gall_cont{background-color: transparent;} .photo_list.newsletter ul.list li .gall_cont .thumb{aspect-ratio: 1/1.29; transition: all .3s ease-out;} .photo_list.newsletter ul.list li .gall_cont .thumb:before{content: ""; border:0 solid #00a8bf; position:absolute; left: -1px; top:-1px; right:-1px; bottom:-1px; box-sizing: border-box; z-index:3; transition: all .3s ease-out; display:none !important;} .photo_list.newsletter ul.list li .gall_cont .over{display:none !important;} .photo_list.newsletter ul.list li .gall_cont .area{min-height:auto; padding:3.5rem 0;} .photo_list.newsletter ul.list li .gall_cont:hover .thumb{box-shadow:0 0 3rem rgba(0,0,0,0.1); border-color:#00a8bf;} .photo_list.newsletter ul.list li .gall_cont:hover .thumb:before{border-width:1px;} .photo_list.newsletter.swiper-initialized ul.list{padding-bottom:2.5rem; gap:0rem; flex-wrap: nowrap; } html.main .photo_list.newsletter ul.list li{width:38rem; min-width:38rem;} .photo_list.recipe ul.list li .gall_cont .thumb{aspect-ratio: 1/1.40263;} /* cooking */ .photo_list.cooking ul.list{gap:3rem 3.5rem;} .photo_list.cooking ul.list li{width:calc((100% - 7rem) / 3);} .photo_list.cooking ul.list li .gall_cont .thumb{aspect-ratio: 310/207;} .photo_list.cooking ul.list li .gall_cont .area{min-height:5.2rem; padding:2rem 0 3rem; } .photo_list.cooking ul.list li .gall_cont .area .title{font-weight: 500; justify-content: center; text-align: center;} .photo_list.cooking ul.list li .gall_cont .area .day{width:100%; text-align:center; bottom:0} /* store */ .photo_list.store{margin-top:4rem;} .photo_list.store ul.list{gap:4rem;} .photo_list.store ul.list li{width:calc((100% - 12rem) / 4);} .photo_list.store ul.list li .gall_cont .thumb{border:1px solid var(--bor_c); aspect-ratio: 1.6/0.6511;} /* event */ .photo_list.events{} .photo_list.events ul.list{gap:2rem 7rem;} .photo_list.events ul.list li{width:calc((100% - 14rem) / 3);} .photo_list.events ul.list li .gall_cont{background-color: transparent;} .photo_list.events ul.list li .gall_cont .area{min-height:auto; padding:2rem 0;} .photo_list.events ul.list li .gall_cont .area .day{margin-top:0.5rem; text-align: center; position: static;} .photo_list.events ul.list li .gall_cont .area .state{margin:1.5rem 0 0 0; text-align: center;} /* 인증서 */ .photo_list.certificate{} .photo_list.certificate ul.list li .gall_cont .area{min-height:auto; padding-bottom:2rem;} .photo_list ul.list li .gall_cont:hover .thumb img{transform: scale(1.05);} .photo_list ul.list li .gall_cont:hover p.over{opacity: 1;} .photo_list ul.list li .gall_cont:hover p.over:before{width: 28px; margin-left:-14px; opacity: 1;} .photo_list ul.list li .gall_cont:hover p.over:after{height: 28px; margin-top:-14px; opacity: 1;} .photo_list ul.list li .gall_cont:hover p.over>span{top:60%; opacity: 1;} .photo_list ul.list li.noPost{width:100%; height:30rem; padding:0; /*border-top:2px solid var(--btn_c);*/ border-bottom:1px solid var(--bor_c); font-size:1.6rem; line-height:1; color: #666; text-align: center; display: flex; align-items: center; justify-content: center;} /* 매장 찾기 */ .storeMapType2 .storeMap_list>li .checkIn.noTxt{position: absolute; left:1rem; top:1rem;} .storeMapType2 .storeMap_list>li.noPost{height:100%; font-weight: 400; font-size: 1.6rem; line-height:1.5; color: #666; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} .storeMapType2 .storeMap_list .link{padding:3.5rem 2.5rem; display:block;} .storeMapType2 .storeMap_list .link .title{padding-right:2.6rem; font-weight: 500; font-size: 2rem; line-height:1.5; color: #000; display: flex; justify-content: space-between; position: relative;} .storeMapType2 .storeMap_list .link .title:after{content: "\e724"; font-family: 'fontello'; font-size: 1.3em; color: var(--point); position: absolute; right:0; top:50%; transform: translateY(-50%);} .storeMapType2 .storeMap_list .link .text{margin-top:1rem; font-size:1.6rem; line-height:1.5; color: #666;} .storeMapType2 .storeMap_list .link .btns{margin-top:1.5rem;} .storeMapType2 .storeMap_list .link .btns>span{width:11rem; height:3.6rem; background-color: #fff; border:1px solid #dadada; font-size:1.5rem; line-height:3.4rem; color: #666; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center;} .storeMapType2 .storeMap_list .link.open, .storeMapType2 .storeMap_list .link:hover{background-color: #f4f4f4;} .storeFancyLay .storePhoto .store-big .slider{min-height:30rem;} .storeFancyLay .fancybox-button.fancybox-close-small{padding:0.5rem; background-color:rgba(0,0,0,0.7); color: #fff; right: -2.2rem; top: -2.2rem; border-radius: 99px; opacity: 1 !important;} @media only screen and (max-width : 1480px){} @media only screen and (max-width : 1200px){ } @media only screen and (max-width : 1024px){ .board_search input[type=text]{width:auto; flex:1;} .bo_head .board_search{width:100%;} .bo_head .sort_box{width:100%; justify-content:flex-end;} .bo_head .bo_top_btn{width:100%; justify-content:flex-end;} /* Board View */ /* 매장찾기 */ /* 제품 상세 */ .product_view{display: block;} .product_view>*{width:100%; max-width:none;} .product_view .right_box{margin:6rem 0 0 0;} .product_view .productText .view-scroll{max-height:none; overflow: visible;} /* Board Write */ .board_write .small{max-width:100%;} /* Photo List */ .photo_list ul.list li{width:calc((100% - 6rem) / 3);} /* newsletter */ .photo_list.newsletter{} .photo_list.newsletter ul.list{gap:4rem;} .photo_list.newsletter ul.list li{width:calc((100% - 8rem) / 2);} /* store */ .photo_list.store ul.list li{width:calc((100% - 8rem) / 2);} /* cooking */ .photo_list.cooking ul.list li{width:calc((100% - 8rem) / 2);} .photo_list ul.list li.noPost{width:100%;} /* Store2 */ .storeMapType2 .storeMap_list>li .checkIn.noTxt{} .storeMapType2 .storeMap_list .link{} .storeMapType2 .storeMap_list .link .title{} .storeMapType2 .storeMap_list .link .text{} .storeMapType2 .storeMap_list .link .btns{} .storeMapType2 .storeMap_list .link .btns>span{width:100%;} .storeMapType2 .storeMap_list .link:hover{}} @media only screen and (max-width : 840px){ /* Input Style */ input[type=button], input[type=text], input[type=password], input[type=file], input[type=submit], select, textarea, .board_write .btns{height:7rem; font-size:2rem; line-height:6.8rem;} select{padding-right:4rem; background-position: calc(100% - 1rem) center; background-size: 2rem; line-height:7rem;} textarea{height:30rem; line-height:1.55;} input[required], textarea[required]{background-image:url('/images/require.png'); background-repeat:no-repeat; background-position:right top} select[required]{background-image:url('/images/bg_select.svg'); background-repeat:no-repeat; background-position:calc(100% - 1rem) center; background-size:2rem;} /* Check New Style */ .check-new{} .check-new input[type=checkbox]+label, .check-new input[type=radio]+label{font-size:2.2rem; line-height:2.4rem;} .check-new input[type=checkbox]+label>.graphic, .check-new input[type=checkbox]+label>.graphic:before, .check-new input[type=radio]+label>.graphic, .check-new input[type=radio]+label>.graphic:before{width: 2.6rem; height: 2.6rem;} .check-new input[type=radio]+label>.graphic:before{width: 60%; height: 60%;} /* Clause Box Style */ .clauseArea>.tit{font-size:2.2rem;} .clauseArea .scroll{height:30rem; font-size:2rem;} .clauseArea .scroll>p{} .clauseArea .scroll>p>strong{font-size:2.2rem;} .clauseArea .scroll ol>li{margin-left:-0.5rem; padding-left:3.3rem; position: relative; box-sizing:border-box;} .clauseArea .scroll ol>li:before {width:2.5rem;} .clauseArea .scroll ul.bul>li{position: relative;} .clauseArea .scroll ul.bul>li:before{} .clauseArea .scroll ul.circle>li{padding-left:1.5rem; position: relative;} .clauseArea .scroll ul.circle>li:before{content: "ο"; display: inline-block; position:absolute; left: 0; top:-1px;} /* Search Style */ .board_search{flex-wrap:wrap; gap:0.8rem 0} .board_search input[type=button], .board_search input[type=text], .board_search input[type=submit], .board_search select{height:7rem; line-height:6.8rem;} .board_search.two{flex-wrap: wrap;} .board_search .mobile_Block{width:100%; margin-bottom:2rem; display: flex; justify-content: space-between; gap:2rem;} .board_search .mobile_Block select{width:100%; margin-right:0;} .board_search select{width:100%; margin:0; padding:0 5.5rem 0 2rem; background-size: 2rem;} .board_search input[type=text]{width:calc(100% - 14rem);} .board_search input[type=submit]{min-width:14rem; font-size:2.2rem;} .board_search.store2{padding-top:9rem; justify-content: space-between;} .board_search.store2 *+*{margin-left:0;} .board_search.store2 select+select{margin-left:2rem;} .board_search.store2 select{width:50%;} .board_search.divide{flex-wrap: wrap;} .board_search.divide *+*{margin-left:0;} .board_search.divide select+select{margin-left:2rem;} .board_search.divide select{width:calc(50% - 1rem);} .board_search.divide .mflex{width:100%; margin-top:2rem; display: flex; justify-content: space-between;} .board_search.small{margin-bottom:3rem;} /* Category Style */ .multi-tab{} .multi-tab .name{display: flex;} .multi-tab ul.multi-list{width:100%; margin:0; background-color: #fff; border:1px solid #ddd; display: none; position: absolute; left:0; top:calc(100% - 1px); z-index:3;} .multi-tab ul.multi-list>li{margin:0; display:block;} .multi-tab ul.multi-list>li+li{border-top:1px solid #ddd;} .multi-tab ul.multi-list>li a{height:6.5rem; border:none; font-size:2rem; text-align: left; white-space: normal; border-radius:0; justify-content: flex-start;} .multi-tab ul.multi-list>li a>span{} .multi-tab.open .name:after{transform:rotate(-45deg);} .multi-tab.open .name:before{transform:rotate(45deg);} /* Board Option */ .board_btn{padding:0 0;} .board_btn>*{} .board_btn>.total{font-size:2rem;} .board_btn>.total>strong{} .board_btn .click{width:100%; height:7rem; font-size:2.2rem;} .board_btn .click .fa{} .board_btn .click .fa.fa-pencil{} .board_btn .click.big{width:30rem; height:7rem; font-size:2.4rem;} .board_btn.write .board_user{width:calc(100% + 2rem); margin:-1rem; display: flex; flex-flow: row wrap; justify-content: space-between;} .board_btn.write .board_user>li{flex:1 1 30%; margin:1rem !important;} .board_btn.write .click.big{width:100%; min-width:auto; padding:1.8rem 2.5rem;} .board_btn.two, .board_btn.three{justify-content: space-between; flex-wrap: nowrap;} .board_btn.two .click{width:calc(50% - 1rem);} .board_btn.three .click{width:calc(33.3%);} /* Board List Style */ .bo_head .board_search{width:100%;} .bo_head .community_nav{justify-content:flex-start;} .bo_head .community_nav li{flex:none; width:calc((100% - 2rem) / 3);} .bo_head .community_nav li a{font-size:2rem; line-height:7rem;} .bo_head .bo_top_btn{width:100%;} .bo_head .bo_top_btn button, .bo_head .bo_top_btn a{width:100%; font-size:2rem; line-height:6.8rem;} .bo_head .bo_top_btn.two button, .bo_head .bo_top_btn.two a{flex:1 0 calc(50% - 0.45rem);} .board-total{font-size:2.2rem;} .board_list{} .board_list>table{} .board_list>table, .board_list>table tbody, .board_list>table tr, .board_list>table td, .board_list>table th{padding:0; background-color: #fff; border:none; font-size:2.2rem; display:block;} .board_list>table .td_num2, .board_list>table>thead{display:none;} .board_list>table .mo_tit{display:inline-block;} .board_list>table .td_chk{width:auto; margin:-1rem 0 1rem; text-align: left; font-size:0; line-height:0;} .board_list>table tr{padding:3rem 2rem; border-bottom:1px solid #e2e2e2;} .board_list>table tr.notis{padding:3rem 2rem; background-color: #f4f4f4;} .board_list>table tr+tr{} .board_list>table>thead>tr>th{} .board_list>table>tbody>tr>th+td, .board_list>table>tbody>tr>td+td{border-left:none;} .board_list>table .notice_icon{font-size:1.6rem;} .board_list>table .td_subject>a{font-size:2.4rem; -webkit-line-clamp: 2;} .board_list>table .top{display:inline-block; vertical-align: middle; position: relative;} .board_list>table .btm{margin-top:1rem; display:inline-block; vertical-align: middle; position: relative;} .board_list>table .btm+.btm{margin-left:3.1rem;} .board_list>table .btm+.btm:before{content: ""; width: 1px; height: 1.4rem; margin-top:-0.7rem; background-color: #aaa; display: inline-block; position:absolute; left: -1.8rem; top:50%;} .board_list>table .state{margin-top:0.8rem; padding:0;} .board_list>table .state .icon{width:10rem; height:4rem; font-size:2rem;} .board_list>table .file{font-size:2.2rem;} .board_list>table .store_photo{padding:0 0 3rem;} .board_list>table .store_photo img{max-height:40rem;} .board_list>table .store_info{margin-top:1rem; text-align: left; display: flex; justify-content: flex-start; position: relative;} .board_list>table .store_info:before{width:12rem; content: attr(data-title);font-weight: 400; color: #333; white-space: nowrap;} .board_list>table .store_info:after{content:":"; position: absolute; left:9.3rem; top:50%; transform: translateY(-50%);} .board_list>table .store_info+.store_info{margin-top:0.5rem;} .board_list.many{} .board_list.many>table tr{padding-bottom:2rem;} .board_list.many>table td{margin-bottom:1rem; text-align: left; position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;} .board_list.many>table .bo_tit{justify-content: flex-start;} .board_list.many>table td.td_num2{display:none;} .board_list.many>table td:before{width:12rem; min-width:12rem; content: attr(data-title); padding-right:2rem; font-weight: 500; color: #222; text-align: justify;} .board_list.many>table td:after{content:""; width:1px; height:1.6rem; background-color: #ccc; font-size:0; position: absolute; left:10.5rem; top:50%; transform: translateY(-50%);} .board_list>table .td_chk{} .board_list>table .noPost>td{height:30rem; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} .board_list>table .td_chk:before, .board_list>table .td_chk:after, .board_list>table .noPost>td:before, .board_list>table .noPost>td:after{display:none;} .board_list.line>table{width:100%;} .board_list.line>table th, .board_list.line>table td{border-right:none;} .board_list.line>table .tac .bo_tit, .board_list.line>table .bo_tit.tac{justify-content: flex-start;} /* Board List Style 2 */ .board_area .list{} .board_area .list>li{} .board_area .list>li>*{} .board_area .list>li>a{max-width:100%;} .board_area .list .title{overflow:hidden;} .board_area .list .title>dt{font-size:2.4rem;} .board_area .list .title>dd{margin-left:0rem;} .board_area .list .title>dd>span{padding:0; font-size:2.2rem; line-height:3.2rem; display:block;} .board_area .list .title>dd>span:before{display:none;} .board_area .list .title>dd>div{padding:0; font-size:2.2rem; line-height:3.2rem;} .board_area .list>li>.etc{} .board_area .list>li>.etc>.category>span, .board_area .list>li>.etc>.day{height:auto; display: block;} .board_area .list>li>.etc .category{display:none !important;} .board_area .list>li>.etc .day{margin-left:0; font-size:2rem;} /* Pageing Style */ .paging_all .btns, .paging_all>.num>strong, .paging_all>.num>a{width:5rem; height:5rem;} .paging_all .btns:before, .paging_all .btns:after{width: 1.6rem; height: 1.6rem;} .paging_all .btns.prev:before{margin:-0.8rem 0 0 -0.5rem; transform:rotate(-45deg);} .paging_all .btns.next:before{margin:-0.8rem 0 0 -1.2rem; transform:rotate(135deg);} .paging_all>.num{} .paging_all>.num>strong, .paging_all>.num>a{font-size:2rem;} /* Board View */ .board_view{} .board_view>table{} .board_view>table th, .board_view>table td{padding:3rem 0; font-size:2.2rem;} .board_view>table>thead>tr>th{padding:3rem 0;} .board_view>table .view_cate{padding-bottom:0.8rem; font-size:2.2rem;} .board_view>table .view_title{font-size:2.6rem;} .board_view>table .view_tit{margin-top:0.8rem; font-size:2.4rem;} .board_view>table .view_info{} .board_view>table .view_info>*{} .board_view>table .view_info p.txt{font-size:2.2rem;} .board_view>table .view_info p.txt>strong{} .board_view>table .view_info p.txt+p.txt{} .board_view>table .view_info p.txt+p.txt:before{height:1.4rem; margin-top:-0.8rem;} .board_view>table .state{} .board_view>table .state .icon{width:10rem; height:4rem; font-size:2rem;} .board_view>table .e_icon{padding-left:2rem;} .board_view>table .e_icon>span{width:13rem; height:4rem; font-size:2rem; line-height:3.6rem;} .board_view>table .view_cont{padding:4.5rem 0rem;} .board_view>table .view_cont .cont_tit{font-size:3rem;} .board_view>table #bo_v_img{} .board_view>table #bo_v_img img{} .board_view>table #bo_v_con{} .board_view td.answer>.tit{font-size:2.4rem;} /* 모바일은 루트가 6.5px 로 줄어드니 rem 값을 키운다. 좁으니 한 줄에 하나씩. */ .view_file_wrap{padding:2.2rem 2.2rem 2.4rem; border-radius:1.6rem;} .view_file_tit{margin-bottom:1.6rem; padding-left:3.2rem; font-size:1.9rem; line-height:2.4rem;} .view_file_tit:before{width:2.4rem; height:2.4rem;} .view_file{gap:1rem;} .view_file>a{width:100%; max-width:100%; padding:1.1rem 5rem 1.1rem 1.2rem; font-size:1.9rem; background-position:right 1.8rem center; background-size:2.1rem;} .view_file>a>.ico{width:4.4rem; height:4.4rem; font-size:1.4rem; border-radius:0.9rem;} .view_file>a[data-ext=""]>.ico{background-size:2.3rem;} /* 매장찾기 */ .customoverlay .coBox, .customoverlay .title{font-size:2rem;} /* 제품 상세 */ .product_view{display: block;} .product_view>*{width:100%; max-width:none;} .product_view .right_box{} .product_view .productText{} .product_view .productText .view-hGroup{padding-bottom:4rem; margin-bottom:4rem;} .product_view .productText .title{font-size:4rem;} .product_view .productText .tit{padding-top:2rem; font-size:2.4rem; line-height:3.6rem;} .product_view .productText .view-scroll{font-size:2.2rem; line-height:1.6;} .product_view .productText .view-scroll ul>li{background-position: left 5px;} /* review_wrap 리뷰 */ .review_wrap .review_list_wr .non_review{font-size:1.8rem;} .review_wrap .review_top{padding-left:2rem; padding-right:2rem;} .review_wrap .review_top>p{font-size:2.5rem;} .review_wrap .review_write .star_wr{margin-bottom:2rem;} .review_wrap .review_write .star_wr>p{font-size:2rem;} .star_wr .stat_li{gap:0.6rem} .star_wr .stat_li li{width:2rem; height:2rem;} .review_wrap .review_form textarea{width:100%; height:14rem;} .review_wrap .review_form button{width:100%; height:6.8rem; font-size:2.1rem;} .review_wrap .review_list_wr .usr_info{padding:5rem 0 0 0;} .review_wrap .review_list_wr .porfile_img{margin-top:0; top:0;} .review_wrap .review_list_wr .usr_name{font-size:2rem;} .review_wrap .review_list_wr .revw_rating{padding-left:3rem; font-size:2rem; background-size:2rem;} .review_wrap .review_list_wr .revw_cont .revw_tit, .review_wrap .review_list_wr .revw_cont .revw_txt{font-size:1.8rem;} .review_wrap .review_list_wr .reply_box .reply_btn{font-size:1.8rem; line-height:4rem;} .review_wrap .review_list_wr .reply_cont .comp_info span{font-size:2rem; line-height:3rem} .review_wrap .review_list_wr .reply_cont .comp_info .reply_date{font-size:1.6rem;} .review_wrap .review_list_wr .reply_cont>p{font-size:1.8rem;} /* sort_box */ .sort_box select{line-height:7rem; height:7rem;} .sort_box .myRecord{width:14rem; line-height:5rem; font-size:2rem;} /* PageNavigation Style */ .pageNavigation{} .pageNavigation>dl{font-size:2.2rem;} .pageNavigation>dl+dl{} .pageNavigation>dl>*{} .pageNavigation>dl>dt{width:10rem; height:7rem;} .pageNavigation>dl>dt:before{width: 1rem; height: 1rem;} .pageNavigation>dl.prev>dt:before{margin:-0.2rem 0 0 0;} .pageNavigation>dl.next>dt:before{margin:-0.7rem 0 0 0;} .pageNavigation>dl>dd{padding:1rem 12.5rem 0.7rem 2.5rem;} .pageNavigation>dl>dd>a{} .pageNavigation>dl>dd>.day{height:7rem; right:2rem; display:none;} /* Comment Style */ .comment_Area .comment_write{padding:3rem 0 4rem;} .comment_Area .comment_write>div{} .comment_Area .comment_write>div.top{} .comment_Area .comment_write>div.top>*{flex:1 1 100%;} .comment_Area .comment_write>div.top>.checkIn{flex-basis:auto;} .comment_Area .comment_write>div.btm{margin-top:2rem; display:block;} /* Board Write */ .board_write{} .board_write>table{} .board_write>table, .board_write>table thead, .board_write>table tbody, .board_write>table tr, .board_write>table th, .board_write>table td{height:auto; padding:0; display:block;} .board_write>table th{width:100%; padding:4rem 0 2rem; background-color: #fff; border:none; font-size:2.2rem; text-align: left;} .board_write>table td{padding-bottom:4rem; font-size:2rem;} /* .board_write>table th{width:16rem; padding-left:0;} */ .board_write .btns{width:16rem;} .board_write .btnBox{} .board_write .btnBox>input, .board_write .btnBox>select{} .board_write .btnBox>input+.btns{} .board_write .btnBox>.btns{padding:0 2.5rem;} .board_write .flex.three input{width:100%;} /* 모바일은 루트 글자크기가 6.5px 로 줄어드므로 rem 값을 키워 손가락 크기를 맞춘다 */ .board_write .fileArea .filePlus, .board_write .file>.file_wrap>.btnFile{height:5.5rem;} .board_write .file>.file_wrap>.btnFile{padding:0 1.8rem 0 4.6rem; background-position:1.6rem center; background-size:2.1rem; line-height:5.5rem;} .board_write .fileArea .filePlus, .board_write .file>.file_wrap>.btnFile{font-size:2rem;} .board_write .fileArea .filePlus:before{font-size:2.4rem;} .board_write .file .thumb{width:5.5rem; height:5.5rem;} .board_write .file .thumb.text{max-width:calc(100% - 2rem); height:auto; padding:0.8rem 1.6rem; font-size:1.8rem; line-height:1.5;} .board_write .file.has-file .delFile{width:3.2rem; height:3.2rem;} .board_write .file .delFile:before, .board_write .file .delFile:after{width:1.5rem; height:0.22rem; margin:-0.11rem 0 0 -0.75rem;} .board_write .file>.thumb.text{} .board_write .fileArea .filePlus{} .board_write .type{font-size:2.2rem;} /* Faq List */ .faqArea{} .faqArea>li{} .faqArea>li .checkIn{position: absolute; left:1.5rem; top:1rem;} .faqArea>li .admGos{right:auto; left:5.5rem; top:0.8rem;} .faqArea>li+li{} .faqArea>li .q{font-size:2.2rem; line-height:3.4rem;} .faqArea>li .q:before{height:4rem; font-size:2rem;} .faqArea>li .q:after{font-size:2.5rem; right:3.5rem;} .faqArea>li .q:hover{} .faqArea>li .a{font-size:2.2rem; line-height:3.4rem;} .faqArea>li .a:before{height:4rem; font-size:2rem;} .faqArea>li.noPost{font-size:2.2rem;} .faqArea>li.ad{padding-top:3rem;} /* Photo List */ .photo_list ul.list{gap:2rem;} .photo_list ul.list li{width:calc((100% - 2rem) / 2);} .photo_list ul.list li .gall_cont p.over>span{font-size:2rem;} .photo_list ul.list li .gall_cont .area{min-height:14.1rem; padding:2rem 0 5.6rem;} .photo_list ul.list li .gall_cont .area .tt{font-size:2rem; line-height:3rem;} .photo_list ul.list li .gall_cont .area .title{font-size:2.2rem;} .photo_list ul.list li .gall_cont .area .title .icon{} .photo_list ul.list li .gall_cont .area .title .icon:before{min-width:2.4rem; min-height:2.4rem; font-size:1.4rem; line-height:2.4rem;} .photo_list ul.list li .gall_cont .area .cate, .photo_list ul.list li .gall_cont .area .day{font-size:2rem;} .photo_list ul.list li .gall_cont .area .btns{margin-top:2.5rem; display: flex; justify-content: center;} .photo_list ul.list li .gall_cont .area .btns>*{height:4.6rem; padding:0 2.2rem; font-size:1.8rem;} .photo_list ul.list li .gall_cont .area .btns.down img{width:1.7rem;} .photo_list ul.list li .gall_cont .area .e_icon{} .photo_list ul.list li .gall_cont .area .e_icon>span{width:100%; height:4rem; line-height:3.5rem; border-radius:4px;} .photo_list ul.list li .gall_cont .area .two{max-height:6rem;} .photo_list ul.list li .gall_cont .area .three{max-height:9rem;} .photo_list button.more{width:28rem; height:7rem; font-size:2.2rem;} .photo_list button.more:after{font-size:2rem;} .photo_list ul.list li.noPost{font-size:2.2rem;} /* 이벤트 (가로) */ .photo_list.event ul.list li .gall_cont .thumb{width:100%;} .photo_list.event ul.list li .gall_cont .area{width:100%;} .photo_list.event ul.list li .usr_info{margin-top:1.5rem;} .photo_list.event ul.list li .usr_info .porfile_img{width:4rem; height:4rem;} .photo_list.event ul.list li .it_count{font-size:2rem;} .photo_list.event ul.list li .it_count .like_count .ico_box{margin-top:0;} .photo_list.event ul.list li .it_count .comment_count{margin-top:0.4rem;} .photo_list.event ul.list li .it_count .comment_count .ico_box{margin-top:0.4rem;} /* newsletter */ .photo_list.newsletter{} .photo_list.newsletter ul.list{gap:2rem;} .photo_list.newsletter ul.list li{width:calc((100% - 4rem) / 2);} /* cooking */ .photo_list.cooking ul.list{gap:2rem;} .photo_list.cooking ul.list li{width:calc((100% - 4rem) / 2);} /* store */ .photo_list.store ul.list{gap:2rem;} .photo_list.store ul.list li{width:calc((100% - 4rem) / 2);} .photo_list ul.list li.noPost{width:100%; font-size:2.2rem;} /* Store2 */ .storeMapType2 .storeMap_list>li .checkIn.noTxt{} .storeMapType2 .storeMap_list>li.noPost{font-size: 2rem;} .storeMapType2 .storeMap_list .link{} .storeMapType2 .storeMap_list .link .title{padding-right:3.2rem; background-size: 2.2rem; font-size:2.4rem;} .storeMapType2 .storeMap_list .link .text{font-size:2rem;} .storeMapType2 .storeMap_list .link .btns{} .storeMapType2 .storeMap_list .link .btns>span{height:6rem; font-size:2rem; line-height:5.8rem;} .storeMapType2 .storeMap_list .link:hover{}} .main-layer-pop{position:absolute; top:var(--pop-top); left:var(--pop-left); z-index:9999; display:none; max-width:calc(100vw - 2rem); border:3px solid #313031; box-sizing:border-box; word-break:break-all; background:#fff;} .main-layer-pop__content{width:var(--pop-width); height:var(--pop-height); max-width:100%; padding:3px; overflow-y:auto; box-sizing:border-box; background:#fff;} .main-layer-pop__editor{color:#5d5d5d;} .main-layer-pop__link{display:block;} .main-layer-pop__image{display:block; max-width:100%; height:auto; border:0;} .main-layer-pop__control{height:35px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:4px 10px 0; box-sizing:border-box; cursor:move; background:#313031; font-size:0; line-height:0;} .main-layer-pop__button{display:block; margin:0; padding:0; border:0; background:transparent; cursor:pointer; font-size:0; line-height:0;} .main-layer-pop__button img{display:block; border:0;} @media screen and (max-width:1024px){ .main-layer-pop{position:fixed !important; top:50% !important; left:50% !important; width:min(64rem, calc(100vw - 3rem)); max-height:calc(100vh - 3rem); transform:translate(-50%, -50%); overflow:hidden;} .main-layer-pop__content{width:100%; height:auto; max-height:calc(100vh - 3rem - 35px); overflow-y:auto;} .main-layer-pop__image{width:100%; max-height:calc(100vh - 3rem - 35px - 6px); object-fit:contain;} } /* transition: all .5s linear; transition: all .5s ease-out; transform:rotate(180deg); -webkit-transition-timing-function:ease-in linear; transition-timing-function:ease-in linear; -webkit-transition-delay: .8s; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px;} display: flex; justify-content: space-between; // 양쪽 끝 정렬 display: flex; justify-content: space-around; // 센터 정렬 display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; //두줄 감추기 active :first-child text-indent:-99999px; !important display:table; table-layout:fixed; display:table-row; display:table-cell; box-sizing:border-box; word-break:keep-all; word-wrap:break-word; border-radius:2px; */ /*[s] 커뮤니티 개편(2026-08) — 목록: 탭·안내·검색·A형 카드·B형 답변배지·글쓰기 FAB .community_nav(마이페이지 공용)는 건드리지 않는다. 글자는 모바일 rem 축소(html 6px)와 무관하게 읽히도록 px로 지정한다. */ .community_tabs{width:100%; display:flex; gap:8px; padding:2px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;} .community_tabs::-webkit-scrollbar{display:none;} .community_tabs li{flex:none; list-style:none;} .community_tabs li a{display:block; padding:0 18px; line-height:40px; border-radius:99px; background:#f4f4f4; color:#555; font-size:15px; white-space:nowrap;} .community_tabs li.active a{background:var(--point); color:#fff; font-weight:700;} .community_hint{margin-top:10px; padding:10px 14px; background:#fff5e6; border-radius:10px; font-size:14px; color:#8a5a00; line-height:1.5; display:flex; gap:7px; align-items:flex-start;} .community_hint:before{content:"💡"; flex:none;} .community_sch{margin-top:12px;} .community_sch .sch_main{display:flex; gap:8px;} .community_sch .sch_box{flex:1; height:46px; border:1.5px solid #e5e5e5; border-radius:12px; background:#fafafa; display:flex; align-items:center; padding:0 6px 0 14px; gap:6px; min-width:0; cursor:text;} .community_sch .sch_box svg{flex:none;} .community_sch .sch_box input[type=text]{flex:1; height:42px; border:none; background:transparent; font-size:15px; line-height:42px; padding:0; min-width:0;} .community_sch .sch_box input[type=submit]{flex:none; height:34px; padding:0 14px; border:none; border-radius:9px; background:var(--btn_c); color:#fff; font-size:13px; line-height:34px; cursor:pointer;} .community_sch .sch_opt_btn{flex:none; width:46px; height:46px; padding:0; border:1.5px solid #e5e5e5; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;} .community_sch select.obSelecter{flex:none; width:auto; height:46px; padding:0 32px 0 12px; border:1.5px solid #e5e5e5; border-radius:12px; font-size:14px; color:#555; line-height:44px; background-position:calc(100% - 10px) center; background-size:14px;} .community_sch .sch_options{display:none; margin-top:8px; gap:8px;} .community_sch .sch_options.open{display:flex;} .community_sch .sch_options select{flex:1; width:auto; height:44px; font-size:14px; line-height:42px; border-radius:10px; margin:0;} .community_list{margin-top:14px; border-top:2px solid #333;} .community_list ul{list-style:none;} .community_list li{border-bottom:1px solid #f0f0f0; padding:16px 2px;} .community_list li.noPost{padding:60px 0; text-align:center; font-size:15px; color:#999;} .community_list .lv_tag{display:inline-block; height:18px; padding:0 7px; color:#fff; font-size:11px; font-weight:700; line-height:18px; border-radius:9px; background:#ff9b57;} .community_list .tag_notice{display:inline-block; height:20px; padding:0 8px; margin-right:6px; background:var(--point); color:#fff; font-size:12px; font-weight:700; line-height:20px; border-radius:5px; vertical-align:2px;} .community_list .meta{margin-top:8px; display:flex; align-items:center; gap:7px; font-size:13px; line-height:1.2; color:#999; flex-wrap:wrap;} .community_list .meta .dot{width:3px; height:3px; border-radius:50%; background:#ccc; flex:none;} .community_list .meta .nm{color:#777;} .community_list .meta .usr_badge img{width:16px; vertical-align:-3px;} .community_list .meta .ic img{width:15px; vertical-align:-2px;} .community_list .meta .cnt_hot{color:var(--point); font-weight:700;} .community_list .meta .ic svg{width:15px; height:15px; vertical-align:-2.5px; fill:currentColor;} /* 오늘 올라온 글 표시 (2026-08-20) */ .community_list .new_mark{display:inline; padding:1px 5px; margin-right:4px; border-radius:5px; background:linear-gradient(135deg,#ff9a3d,#ff4d00); color:#fff; font-size:11px; font-weight:800; letter-spacing:0; vertical-align:1px; box-shadow:0 1px 3px rgba(255,77,0,.35);} .cd_item{display:flex; gap:14px; align-items:flex-start;} .cd_item .cd_body{flex:1; min-width:0;} .cd_item .cd_title{font-size:16px; font-weight:700; color:#1a1a1a; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all;} .cd_item .cd_text{margin-top:5px; font-size:13.5px; color:#888; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all;} .cd_item .cd_thumb{flex:none; width:74px; height:74px; border-radius:10px; border:1px solid #eee; overflow:hidden; background:#f4f4f4;} .cd_item .cd_thumb img{width:100%; height:100%; object-fit:cover; vertical-align:top;} .qa_item{display:flex; gap:12px; align-items:flex-start;} .qa_item .qa_badge{flex:none; width:54px; padding:9px 0 8px; text-align:center; border-radius:10px; background:#fff1e6;} .qa_item .qa_badge em{display:block; font-style:normal; font-size:17px; font-weight:800; color:var(--point); line-height:1.1;} .qa_item .qa_badge span{display:block; font-size:11px; color:#cc7a33; margin-top:2px;} .qa_item .qa_badge.zero{background:#f5f5f5;} .qa_item .qa_badge.zero em{color:#bbb;} .qa_item .qa_badge.zero span{color:#aaa;} .qa_item .qa_body{flex:1; min-width:0;} .qa_item .qa_title{font-size:16px; font-weight:700; color:#1a1a1a; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all;} .qa_item .qa_title .ico_cam{display:inline-block; vertical-align:-2px; margin-left:4px;} .qa_item .meta{margin-top:6px;} .btn_fab_write{position:fixed; right:18px; bottom:24px; width:56px; height:56px; border-radius:50%; background:var(--point); box-shadow:0 6px 16px rgba(255,102,0,.4); display:flex; align-items:center; justify-content:center; z-index:80;} .btn_fab_write svg{width:24px; height:24px;} @media only screen and (min-width : 841px){ .community_tabs li a{font-size:16px; line-height:44px; padding:0 22px;} .cd_item .cd_thumb{width:96px; height:96px;} .cd_item .cd_title{font-size:17px;} .qa_item .qa_title{font-size:17px;} .btn_fab_write{right:40px; bottom:40px;} } /* 넓은 PC 화면: 글쓰기 버튼을 본문(최대 1040px) 오른쪽에 붙인다 — 화면 구석에 동떨어지지 않게 */ @media only screen and (min-width : 1240px){ .btn_fab_write{right:calc(50% - 600px);} } /* 레벨 구간별 색상 (getLvTagClass: 1~2 초록 / 3~9 파랑 / 10~19 보라 / 20~39 주황 / 40~ 금색) 댓글 영역(ajax)의 인라인 스타일(.revision_history .top_info .usr_level)보다 이겨야 해서 긴 선택자를 함께 둔다 */ .lv_tag.lv_t1, .usr_level.lv_t1, .user_level.lv_t1, .memb_lv.lv_t1, .lv_sample.lv_t1, .revision_history .top_info .usr_level.lv_t1{background-color:#6aab4e; color:#fff;} .lv_tag.lv_t2, .usr_level.lv_t2, .user_level.lv_t2, .memb_lv.lv_t2, .lv_sample.lv_t2, .revision_history .top_info .usr_level.lv_t2{background-color:#3f8fd2; color:#fff;} .lv_tag.lv_t3, .usr_level.lv_t3, .user_level.lv_t3, .memb_lv.lv_t3, .lv_sample.lv_t3, .revision_history .top_info .usr_level.lv_t3{background-color:#8b6fd6; color:#fff;} .lv_tag.lv_t4, .usr_level.lv_t4, .user_level.lv_t4, .memb_lv.lv_t4, .lv_sample.lv_t4, .revision_history .top_info .usr_level.lv_t4{background-color:#ff6600; color:#fff;} .lv_tag.lv_t5, .usr_level.lv_t5, .user_level.lv_t5, .memb_lv.lv_t5, .lv_sample.lv_t5, .revision_history .top_info .usr_level.lv_t5{background-color:#c9920a; color:#fff;} /* 글보기 작성자 줄의 LV 배지. 443줄 `.board_view>table .view_info.profile .user_level` 이 주황(#ff6200)을 못 박고 있어 위 규칙보다 선택자가 길어 항상 이겼다(= 레벨과 무관하게 늘 주황). 같은 깊이로 다시 적어 레벨 색이 이기게 한다. 배지가 없을 때를 위해 443의 주황은 그대로 둔다. */ .board_view>table .view_info.profile .user_level.lv_t1{background:#6aab4e;} .board_view>table .view_info.profile .user_level.lv_t2{background:#3f8fd2;} .board_view>table .view_info.profile .user_level.lv_t3{background:#8b6fd6;} .board_view>table .view_info.profile .user_level.lv_t4{background:#ff6600;} .board_view>table .view_info.profile .user_level.lv_t5{background:#c9920a;} /* 공식 계정 표시(2026-08-20) — 레벨 칩 자리에 로고 색 원형 'B' 목록·글보기·댓글이 저마다 다른 클래스(lv_tag / user_level / usr_level)를 쓰므로 셋 다 적는다. ⚠️ 댓글은 ajax 응답 안의