#bo_cate { margin: 0 0 15px; } #bo_cate #bo_cate_ul { font-size: 0; } #bo_cate #bo_cate_ul li { display: inline-block; } #bo_cate #bo_cate_ul li a { font-family: 'Pretendard'; font-size: 16px; color: #1b1b1b; display: block; padding: 18px 25px; } #bo_cate #bo_cate_ul li a#bo_cate_on { font-weight: 800; } @media screen and ( max-width: 1250px ) { #bo_cate { margin: 0 0 14px; } #bo_cate #bo_cate_ul li a { font-size: 15px; padding: 16.5px 22.5px; } } @media screen and ( max-width: 1024px ) { #bo_cate { margin: 0 0 13px; } #bo_cate #bo_cate_ul li a { font-size: 14px; padding: 15px 20px; } } @media screen and ( max-width: 768px ) { #bo_cate { margin: 0 0 12px; } #bo_cate #bo_cate_ul li a { font-size: 13px; padding: 13.5px 17.5px; } } @media screen and ( max-width: 640px ) { #bo_cate { margin: 0 0 11px; } #bo_cate #bo_cate_ul li a { font-size: 12px; padding: 12px 15px; } } #bo_btn_top { margin: 0 0 20px; position: relative; } #bo_btn_top #bo_list_total { font-family: 'Pretendard'; font-size: 18px; font-weight: 500; float: none; } #bo_btn_top .btn_bo_user { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); display: flex; font-size: 0; } #bo_btn_top .btn_bo_user > li { display: inline-block; font-size: 15px; width: auto; } #bo_btn_top .btn_bo_user > li > * { padding: 0 14px; } #bo_btn_top .btn_bo_user > li .more_opt { display: none; position: absolute; top: 45px; right: 0; background-color: #fff; border: 1px solid #b8bfc4; z-index: 999; } #bo_btn_top .btn_bo_user > li .more_opt:before { content: ''; position: absolute; top: -8px; right: 10px; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #b8bfc4 transparent; } #bo_btn_top .btn_bo_user > li .more_opt:after { content: ''; position: absolute; top: -6px; right: 10px; width: 0;height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #fff transparent; } #bo_btn_top .btn_bo_user > li .more_opt li { border-bottom: 1px solid #f1f1f1; padding: 10px; margin: 0; color: #6b757c; } #bo_btn_top .btn_bo_user > li .more_opt li:last-child { border: none; } #bo_btn_top .btn_bo_user > li .more_opt li button , #bo_btn_top .btn_bo_user > li .more_opt li a { display:block; border: none; background-color: #ffffff; color: #6b757c; } #bo_btn_top .btn_bo_user > li .more_opt li:hover a, #bo_btn_top .btn_bo_user > li .more_opt li:hover button { color: #000000; } #bo_btn_top .btn_bo_user > li .more_opt li i { display: none; } @media screen and ( max-width: 1250px ) { #bo_btn_top { margin: 0 0 18px; } #bo_btn_top #bo_list_total { font-size: 16.5px; } #bo_btn_top .btn_bo_user > li { font-size: 13.5px; } #bo_btn_top .btn_bo_user > li > * { padding: 0 12.5px; } #bo_btn_top .btn_bo_user > li .more_opt { top: 40.5px; } #bo_btn_top .btn_bo_user > li .more_opt li { padding: 9px; } } @media screen and ( max-width: 1024px ) { #bo_btn_top { margin: 0 0 16px; } #bo_btn_top #bo_list_total { font-size: 15px; } #bo_btn_top .btn_bo_user > li { font-size: 12px; } #bo_btn_top .btn_bo_user > li > * { padding: 0 11px; } #bo_btn_top .btn_bo_user > li .more_opt { top: 36px; } #bo_btn_top .btn_bo_user > li .more_opt li { padding: 8px; } } @media screen and ( max-width: 768px ) { #bo_btn_top { margin: 0 0 14px; } #bo_btn_top #bo_list_total { font-size: 13.5px; } #bo_btn_top .btn_bo_user > li { font-size: 10.5px; } #bo_btn_top .btn_bo_user > li > * { padding: 0 9.5px; } #bo_btn_top .btn_bo_user > li .more_opt { top: 31.5px; } #bo_btn_top .btn_bo_user > li .more_opt li { padding: 7px; } } @media screen and ( max-width: 640px ) { #bo_btn_top { margin: 0 0 12px; } #bo_btn_top #bo_list_total { font-size: 12px; } #bo_btn_top .btn_bo_user > li { font-size: 9px; } #bo_btn_top .btn_bo_user > li > * { padding: 0 8px; } #bo_btn_top .btn_bo_user > li .more_opt { top: 27px; } #bo_btn_top .btn_bo_user > li .more_opt li { padding: 6px; } } #sub.board .list { margin: 0; } #sub.board .list table { border-top: 2px solid #000; table-layout: fixed; border-collapse: collapse; width: 100%; } #sub.board .list table tr th { color: #000; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.36px; padding: 5px; background-color: #F9F9F9; border-bottom: 1px solid #929292; } #sub.board .list table tr td { color: #636363; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.36px; padding: 15px 5px; border-bottom: 1px solid #929292; text-align: center; } #sub.board .list table tr td.empty_table { padding: 100px 0 !important; } #sub.board .list table tr td .notice_icon { display: inline-block; background-color: #8b3547; color: #ffffff; width: 70px; border-radius: 5px; line-height: 155%; } #sub.board .list table tr td .bo_tit a { display: block; color: #636363; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sub.board .list table tr td .button { text-align: center; font-size: 0; } #sub.board .list table tr td .button > * { display: inline-block; height: 20px; line-height: 20px; padding: 0 20px; margin: 5px; color: #FFF; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 600; letter-spacing: -0.36px; vertical-align: top; border: none; } #sub.board .list table tr td .button a { background-color: #636363; } #sub.board .list table tr td .button button { background-color: #6D8241; } @media screen and ( max-width: 1250px ) { #sub.board .list table tr th { font-size: 17px; padding: 4.5px; } #sub.board .list table tr td { font-size: 17px; padding: 14px 4.5px; } #sub.board .list table tr td .notice_icon { padding: 0 9px; border-radius: 4.5px; } #sub.board .list table tr td .button > * { height: 19px; line-height: 19px; padding: 0 18px; margin: 0 4px; font-size: 17px; } } @media screen and ( max-width: 1024px ) { #sub.board .list table tr th { font-size: 16px; padding: 4px; } #sub.board .list table tr td { font-size: 16px; padding: 13px 4px; } #sub.board .list table tr td .notice_icon { padding: 0 8px; border-radius: 4px; } #sub.board .list table tr td .button > * { height: 18px; line-height: 18px; padding: 0 16px; margin: 0 3px; font-size: 16px; } } @media screen and ( max-width: 768px ) { #sub.board .list table tr th { font-size: 15px; padding: 3.5px; } #sub.board .list table tr td { font-size: 15px; padding: 12px 3.5px; } #sub.board .list table tr td .notice_icon { padding: 0 7px; border-radius: 3.5px; } #sub.board .list table tr td .button > * { height: 17px; line-height: 17px; padding: 0 14px; margin: 0 2px; font-size: 15px; } } @media screen and ( max-width: 640px ) { #sub.board .list table tr th { font-size: 14px; padding: 3px; } #sub.board .list table tr td { font-size: 14px; padding: 11px 3px; } #sub.board .list table tr td .notice_icon { padding: 0 6px; border-radius: 3px; } #sub.board .list table tr td .button > * { height: 16px; line-height: 16px; padding: 0 12px; margin: 0 1px; font-size: 14px; } } #sub.board .form { margin: 0; } #sub.board .form table { border-top: 2px solid #000; table-layout: fixed; border-collapse: collapse; width: 100%; } #sub.board .form table tr th , #sub.board .form table tr td { border: 1px solid #929292; } #sub.board .form table tr th { color: #000; text-align: center; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.36px; background-color: #F9F9F9; } #sub.board .form table tr td { padding: 20px; border: 1px solid #929292; color: #636363; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.36px; line-height: 175%; } #sub.board .form table tr td #kakao_map { width: 100%; height: 500px; } #sub.board .form table tr td select , #sub.board .form table tr td input[type=text] { color: #636363; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.36px; height: 40px; line-height: 38px; padding: 0 10px; width: 75%; margin: 0 10px 0 0; } #sub.board .form table tr td .w10 { width: 10% !important; } #sub.board .form table tr td .w15 { width: 15% !important; } #sub.board .form table tr td .w20 { width: 20% !important; } #sub.board .form table tr td .w30 { width: 30% !important; } #sub.board .form table tr td .w40 { width: 40% !important; } #sub.board .form table tr td .button { position: relative; margin: 20px 0 0; } #sub.board .form table tr td .button:first-child { margin: 0; } #sub.board .form table tr td .button button { width: 130px; height: 50px; padding: 0 20px; background-color: #636363; color: #FFF; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.36px; border: none; position: absolute; right: 0; bottom: -5px; } #sub.board .form table tr td .button button.add-btn { bottom: 50%; transform: translate(0, 50%); } #sub.board .form .button_wrap { text-align: center; font-size: 0; margin: 50px 0 0; } #sub.board .form .button_wrap > * { display: inline-block; width: 130px; height: 50px; line-height: 50px; padding: 0 20px; margin: 0 10px; color: #FFF; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 600; letter-spacing: -0.36px; vertical-align: top; border: none; } #sub.board .form .button_wrap a { background-color: #636363; } #sub.board .form .button_wrap button { background-color: #6D8241; } @media screen and ( max-width: 1250px ) { #sub.board .form table tr th { font-size: 17px; } #sub.board .form table tr td { padding: 18px; font-size: 17px } #sub.board .form table tr td #kakao_map { height: 450px; } #sub.board .form table tr td select , #sub.board .form table tr td input[type=text] { font-size: 17px; height: 36px; line-height: 34px; padding: 0 9px; margin: 0 8px 0 0; } #sub.board .form table tr td .button { margin: 18px 0 0; } #sub.board .form table tr td .button button { width: 110px; height: 45px; padding: 0 18px; font-size: 17px; bottom: -5px; } #sub.board .form .button_wrap { margin: 45px 0 0; } #sub.board .form .button_wrap > * { width: 120px; height: 45px; line-height: 45px; padding: 0 18px; margin: 0 9px; font-size: 17px; } } @media screen and ( max-width: 1024px ) { #sub.board .form table tr th { font-size: 16px; } #sub.board .form table tr td { padding: 16px; font-size: 16px } #sub.board .form table tr td #kakao_map { height: 400px; } #sub.board .form table tr td select , #sub.board .form table tr td input[type=text] { font-size: 16px; height: 32px; line-height: 30px; padding: 0 8px; margin: 0 6px 0 0; } #sub.board .form table tr td .button { margin: 16px 0 0; } #sub.board .form table tr td .button button { width: 90px; height: 40px; padding: 0 16px; font-size: 16px; bottom: -5px; } #sub.board .form .button_wrap { margin: 40px 0 0; } #sub.board .form .button_wrap > * { width: 110px; height: 40px; line-height: 40px; padding: 0 16px; margin: 0 8px; font-size: 16px; } } @media screen and ( max-width: 768px ) { #sub.board .form table tr th { font-size: 15px; } #sub.board .form table tr td { padding: 14px; font-size: 15px } #sub.board .form table tr td #kakao_map { height: 350px; } #sub.board .form table tr td select , #sub.board .form table tr td input[type=text] { font-size: 15px; height: 28px; line-height: 26px; padding: 0 7px; margin: 0 4px 0 0; } #sub.board .form table tr td .button { margin: 14px 0 0; } #sub.board .form table tr td .button button { width: 70px; height: 35px; padding: 0 14px; font-size: 15px; bottom: -5px; } #sub.board .form .button_wrap { margin: 35px 0 0; } #sub.board .form .button_wrap > * { width: 100px; height: 35px; line-height: 35px; padding: 0 14px; margin: 0 7px; font-size: 15px; } } @media screen and ( max-width: 640px ) { #sub.board .form table tr th { font-size: 14px; } #sub.board .form table tr td { padding: 12px; font-size: 14px } #sub.board .form table tr td #kakao_map { height: 300px; } #sub.board .form table tr td select , #sub.board .form table tr td input[type=text] { font-size: 14px; height: 24px; line-height: 22px; padding: 0 6px; margin: 0 2px 0 0; } #sub.board .form table tr td .button { margin: 12px 0 0; } #sub.board .form table tr td .button button { width: 50px; height: 30px; padding: 0 12px; font-size: 14px; bottom: -5px; } #sub.board .form .button_wrap { margin: 30px 0 0; } #sub.board .form .button_wrap > * { width: 90px; height: 30px; line-height: 30px; padding: 0 12px; margin: 0 6px; font-size: 14px; } } #sub.board #gallery_allchk { padding: 0 0 10px; } #sub.board #gallery_allchk label { font-size: 14px; } #sub.board #gallery_allchk label input { vertical-align: top; } #sub.board .gallery ul li { margin: 0 0 50px; } #sub.board .gallery ul li.empty_table { padding: 100px 0 !important; text-align: center; } #sub.board .gallery ul li:last-child { margin: 0; } #sub.board .gallery ul li a { display: flex; align-items: center; justify-content: center; gap: 24px; } #sub.board .gallery ul li a .image { width: 36.33%; min-height: 180px; background-size: contain; background-repeat: no-repeat; background-position: center; } #sub.board .gallery ul li a .text { flex: 1; } #sub.board .gallery ul li a .text dl dt { color: #000; font-family: 'Pretendard'; font-size: 24px; font-style: normal; font-weight: 600; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sub.board .gallery ul li a .text dl dt p { display: inline-block; position: relative; overflow: hidden; padding: 0 29px 0 0; } #sub.board .gallery ul li a .text dl dt p img { position: absolute; top: 50%; right: 0; width: 9px; transform: translate(0, -50%); } #sub.board .gallery ul li a .text dl dd { color: #929292; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 400; line-height: 133.333%; letter-spacing: -0.54px; margin: 16px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; max-height: calc(133.333% * 3); } @media screen and ( max-width: 1250px ) { #sub #gall_allchk { padding: 0 0 9px; } #sub #gall_allchk label { font-size: 13px; } #sub.board .gallery ul li { margin: 0 0 45px; } #sub.board .gallery ul li a { gap: 24px; } #sub.board .gallery ul li a .image {min-height: 160px; } #sub.board .gallery ul li a .text dl dt { font-size: 22px; } #sub.board .gallery ul li a .text dl dt p { padding: 0 26px 0 0; } #sub.board .gallery ul li a .text dl dt p img { width: 8px; } #sub.board .gallery ul li a .text dl dd { font-size: 17px; margin: 15px 0 0; } } @media screen and ( max-width: 1024px ) { #sub #gall_allchk { padding: 0 0 8px; } #sub #gall_allchk label { font-size: 12px; } #sub.board .gallery ul li { margin: 0 0 40px; } #sub.board .gallery ul li a { gap: 24px; } #sub.board .gallery ul li a .image {min-height: 140px; } #sub.board .gallery ul li a .text dl dt { font-size: 20px; } #sub.board .gallery ul li a .text dl dt p { padding: 0 23px 0 0; } #sub.board .gallery ul li a .text dl dt p img { width: 7px; } #sub.board .gallery ul li a .text dl dd { font-size: 16px; margin: 14px 0 0; } } @media screen and ( max-width: 768px ) { #sub #gall_allchk { padding: 0 0 7px; } #sub #gall_allchk label { font-size: 11px; } #sub.board .gallery ul li { margin: 0 0 35px; } #sub.board .gallery ul li a { gap: 24px; } #sub.board .gallery ul li a .image {min-height: 120px; } #sub.board .gallery ul li a .text dl dt { font-size: 18px; } #sub.board .gallery ul li a .text dl dt p { padding: 0 20px 0 0; } #sub.board .gallery ul li a .text dl dt p img { width: 6px; } #sub.board .gallery ul li a .text dl dd { font-size: 15px; margin: 13px 0 0; } } @media screen and ( max-width: 640px ) { #sub #gall_allchk { padding: 0 0 6px; } #sub #gall_allchk label { font-size: 10px; } #sub.board .gallery ul li { margin: 0 0 30px; } #sub.board .gallery ul li a { gap: 24px; } #sub.board .gallery ul li a .image {min-height: 100px; } #sub.board .gallery ul li a .text dl dt { font-size: 16px; } #sub.board .gallery ul li a .text dl dt p { padding: 0 17px 0 0; } #sub.board .gallery ul li a .text dl dt p img { width: 5px; } #sub.board .gallery ul li a .text dl dd { font-size: 14px; margin: 12px 0 0; } } .bo_sch_wrap { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; } .bo_sch_wrap .bo_sch { position: absolute; top: 50%; left: 50%; background-color: #ffffff; width: 330px; max-width: 100%; max-height: none; margin: 0; transform: translate(-50%, -50%); overflow-y: auto; border-radius: 5px; box-shadow: 0 0 18px rgba(0, 0, 0, 0.2); border :1px solid #dde7e9; } .bo_sch:after { content: unset; } .bo_sch_wrap .bo_sch h3 { padding: 15px; border-bottom: 1px solid #e8e8e8; font-size: 16px; font-family: 'Pretendard'; font-weight: 700; } .bo_sch_wrap .bo_sch legend { display: none; } .bo_sch_wrap .bo_sch form { padding:15px; display:block; } .bo_sch_wrap .bo_sch select , .bo_sch_wrap .bo_sch .sch_bar input { padding: 0 15px; display: block; width: 100%; height: 40px; margin: 15px 0 0; border: 1px solid #d0d3db; border-radius:2px; } .bo_sch_wrap .bo_sch .sch_bar input { padding-right: 40px; } .bo_sch_wrap .bo_sch .sch_bar { position: relative; } .bo_sch_wrap .bo_sch .sch_bar .sch_btn { position: absolute; top: 0; right: 0; width: 40px; height: 100%; border: none; background-color: transparent; } .bo_sch_wrap .bo_sch .bo_sch_cls { position: absolute; right: 0; top: 0; color: #b5b8bb; border: 0; padding: 12px 15px; font-size: 16px; background-color: #fff; } .bo_sch_wrap .bo_sch_bg { background-color: rgba(0, 0, 0, 0.1); width: 100%; height:100%; } @media screen and ( max-width: 1250px ) { } @media screen and ( max-width: 1024px ) { } @media screen and ( max-width: 768px ) { } @media screen and ( max-width: 640px ) { } #sub .form_table { border-top: 2px solid #5a5a5a; width: 100%; table-layout: fixed; border-collapse: collapse;} #sub .form_table tr th , #sub .form_table tr td { font-family: 'Pretendard'; border-bottom: 1px solid #c4c4c4; } #sub .form_table tr th { font-size: 14px; background-color: #fafafa; font-weight: 600; } #sub .form_table tr td { font-size: 16px; padding: 7px 16px; font-weight: 400; line-height: 34px; } #sub .form_table tr td label { margin: 0 16px 0 0; } #sub .form_table tr td label.m0 { margin: 0; } #sub .form_table tr td label input[type=radio] , #sub .form_table tr td label input[type=checkbox] { width: 18px; line-height: 18px; height: 18px; margin: 0 8px 0 0} #sub .form_table tr td textarea , #sub .form_table tr td input[type=email] , #sub .form_table tr td input[type=file] , #sub .form_table tr td input[type=text] { height: 36px; line-height: 34px; width: 50%; border: 1px solid #c4c4c4; padding: 0 10px; } #sub .form_table tr td textarea { width: 80%; height: 170px; resize: none; padding: 10px; } #sub .form_table tr td input[type=file] { width: 80%; } @media screen and ( max-width: 1250px ) { #sub .form_table tr th { font-size: 13px; } #sub .form_table tr td { font-size: 15px; padding: 6.5px 14px; line-height: 31px; } #sub .form_table tr td label { margin: 0 15px 0 0; } #sub .form_table tr td label input[type=radio] , #sub .form_table tr td label input[type=checkbox] { width: 16.5px; line-height: 16.5; height: 16.5; margin: 0 7px 0 0} #sub .form_table tr td textarea , #sub .form_table tr td input[type=email] , #sub .form_table tr td input[type=file] , #sub .form_table tr td input[type=text] { height: 33px; line-height: 31px; width: 60%; padding: 0 10px; } #sub .form_table tr td textarea { width: 85%; height: 150px; padding: 9px; } #sub .form_table tr td input[type=file] { width: 85%; } } @media screen and ( max-width: 1024px ) { #sub .form_table tr th { font-size: 12px; } #sub .form_table tr td { font-size: 14px; padding: 6px 12px; line-height: 28px; } #sub .form_table tr td label { margin: 0 14px 0 0; } #sub .form_table tr td label input[type=radio] , #sub .form_table tr td label input[type=checkbox] { width: 15px; line-height: 15px; height: 15px; margin: 0 6px 0 0} #sub .form_table tr td textarea , #sub .form_table tr td input[type=email] , #sub .form_table tr td input[type=file] , #sub .form_table tr td input[type=text] { height: 30px; line-height: 28px; width: 70%; padding: 0 10px; } #sub .form_table tr td textarea { width: 90%; height: 130px; padding: 8px; } #sub .form_table tr td input[type=file] { width: 90%; } } @media screen and ( max-width: 768px ) { #sub .form_table tr th { font-size: 11px; } #sub .form_table tr td { font-size: 13px; padding: 5.5px 10px; line-height: 25px; } #sub .form_table tr td label { margin: 0 13px 0 0; } #sub .form_table tr td label input[type=radio] , #sub .form_table tr td label input[type=checkbox] { width: 13.5px; line-height: 13.5px; height: 13.5px; margin: 0 5px 0 0} #sub .form_table tr td textarea , #sub .form_table tr td input[type=email] , #sub .form_table tr td input[type=file] , #sub .form_table tr td input[type=text] { height: 27px; line-height: 25px; width: 80%; padding: 0 10px; } #sub .form_table tr td textarea { width: 95%; height: 110px; padding: 7px; } #sub .form_table tr td input[type=file] { width: 95%; } } @media screen and ( max-width: 640px ) { #sub .form_table tr th { font-size: 10px; } #sub .form_table tr td { font-size: 12px; padding: 5px 8px; line-height: 22px; } #sub .form_table tr td label { margin: 0 12px 0 0; } #sub .form_table tr td label input[type=radio] , #sub .form_table tr td label input[type=checkbox] { width: 12px; line-height: 12px; height: 12px; margin: 0 4px 0 0} #sub .form_table tr td textarea , #sub .form_table tr td input[type=email] , #sub .form_table tr td input[type=file] , #sub .form_table tr td input[type=text] { height: 24px; line-height: 22px; width: 90%; padding: 0 10px; } #sub .form_table tr td textarea { width: 100%; height: 90px; padding: 6px; } #sub .form_table tr td input[type=file] { width: 100%; } } #sub.board .swiperReview { margin: 0 0 50px; } #sub.board .swiperReview .swiper-slide { width: 326px; margin: 0 5px; } #sub.board .swiperReview .swiper-slide a img { width: 100%; } #sub.board .swiperReview .swiperReview-button { position: absolute; top: 50%; transform: translate(0, -50%); background-size: contain; background-repeat: no-repeat; background-position: center; width: 15px; height: 28px; z-index: 10; cursor: pointer; } #sub.board .swiperReview .swiperReview-button-prev { background-image: url('../img/main/visual_prev.png'); left: 30px; } #sub.board .swiperReview .swiperReview-button-next { background-image: url('../img/main/visual_next.png'); right: 30px; } .modalReview { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); overflow: hidden; text-align: center; } .modalReview .modal-content { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.6); animation: zoomIn 0.3s ease; } .modalReview .close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; } .modalReview .close:hover { color: #bbb; } .modalReview .prev , .modalReview .next { cursor: pointer; position: absolute; top: 50%; padding: 16px; color: white; font-weight: bold; font-size: 40px; user-select: none; transition: 0.3s; transform: translateY(-50%); z-index: 10000; } .modalReview .prev { left: 20px; } .modalReview .next { right: 20px; } .modalReview .prev:hover, .modalReview .next:hover { color: #bbb; } @keyframes zoomIn { from {transform: translate(-50%, -50%) scale(0.8); opacity: 0;} to {transform: translate(-50%, -50%) scale(1); opacity: 1;} } @media screen and ( max-width: 1250px ) { #sub.board .swiperReview { margin: 0 0 45px; } #sub.board .swiperReview .swiper-slide { width: 296px; margin: 0 4.5px; } #sub.board .swiperReview .swiperReview-button { width: 14px; } #sub.board .swiperReview .swiperReview-button-prev { left: 27px; } #sub.board .swiperReview .swiperReview-button-next { right: 27px; } .modalReview .modal-content { border-radius: 7px; box-shadow: 0 0 27px rgba(0,0,0,0.6); } .modalReview .close { top: 18px; right: 36px; font-size: 36px; } .modalReview .prev , .modalReview .next { padding: 15px; font-size: 36px; } .modalReview .prev { left: 18px; } .modalReview .next { right: 18px; } } @media screen and ( max-width: 1024px ) { #sub.board .swiperReview { margin: 0 0 40px; } #sub.board .swiperReview .swiper-slide { width: 266px; margin: 0 4px; } #sub.board .swiperReview .swiperReview-button { width: 13px; } #sub.board .swiperReview .swiperReview-button-prev { left: 24px; } #sub.board .swiperReview .swiperReview-button-next { right: 24px; } .modalReview .modal-content { border-radius: 6px; box-shadow: 0 0 24px rgba(0,0,0,0.6); } .modalReview .close { top: 16px; right: 32px; font-size: 32px; } .modalReview .prev , .modalReview .next { padding: 14px; font-size: 32px; } .modalReview .prev { left: 16px; } .modalReview .next { right: 16px; } } @media screen and ( max-width: 768px ) { #sub.board .swiperReview { margin: 0 0 35px; } #sub.board .swiperReview .swiper-slide { width: 236px; margin: 0 3.5px; } #sub.board .swiperReview .swiperReview-button { width: 12px; } #sub.board .swiperReview .swiperReview-button-prev { left: 21px; } #sub.board .swiperReview .swiperReview-button-next { right: 21px; } .modalReview .modal-content { border-radius: 5px; box-shadow: 0 0 21px rgba(0,0,0,0.6); } .modalReview .close { top: 14px; right: 28px; font-size: 28px; } .modalReview .prev , .modalReview .next { padding: 13px; font-size: 28px; } .modalReview .prev { left: 14px; } .modalReview .next { right: 14px; } } @media screen and ( max-width: 640px ) { #sub.board .swiperReview { margin: 0 0 30px; } #sub.board .swiperReview .swiper-slide { width: 206px; margin: 0 3px; } #sub.board .swiperReview .swiperReview-button { width: 11px; } #sub.board .swiperReview .swiperReview-button-prev { left: 18px; } #sub.board .swiperReview .swiperReview-button-next { right: 18px; } .modalReview .modal-content { border-radius: 4px; box-shadow: 0 0 18px rgba(0,0,0,0.6); } .modalReview .close { top: 12px; right: 24px; font-size: 24px; } .modalReview .prev , .modalReview .next { padding: 12px; font-size: 24px; } .modalReview .prev { left: 12px; } .modalReview .next { right: 12px; } } #sub.board .cmt_btn span.total { color: #000; } #sub.board .cmt_btn span.total:after { background: #000; } #sub.board .bo_vc_w .btn_submit { background: #000; } @media screen and ( max-width: 1250px ) { } @media screen and ( max-width: 1024px ) { } @media screen and ( max-width: 768px ) { } @media screen and ( max-width: 640px ) { }