@charset "UTF-8";

/* base */
:root {
  --color-point: #B75C0C;
  --color-beige: #FFF6EE;
}
* {box-sizing: border-box;}
a:focus-visible,
input:focus,
select:focus,
button:focus {outline: 0;}
.container {max-width: 1400px; width: 100%; margin: 0 auto;}
.pc {display: block;}
.mo {display: none;}
.dimmed {display: none;}

/* header */
#header {height: 90px; display: flex; align-items: center;}
#header .container {display: flex; align-items: center; justify-content: space-between; height: 100%;}
#header .logo_area {display: flex; align-items: center;}
#header .logo_area .logo a {display: block; width: 142px; height: 34px; background: url(./images/city_county_logo.png) 50% 50% no-repeat;}
#header .logo_area h2 {font-weight: 700; font-size: 16px; line-height: 19px; letter-spacing: -0.7px; color: #B75C0C; padding: 8px;}
#header .gnb {display: flex; gap: 19px;}
#header .gnb a {font-weight: 500; font-size: 16px; line-height: 23px; letter-spacing: -0.7px; color: #333;}
#header a {background: none;}
#header .mobile_open, 
#header .mobile_menu {display: none;}

/* main_visual */
.main_visual {background: url(./images/main_visual_bg.png) 50% 50% / cover no-repeat; height: 530px;}
.main_visual .container {padding: 0 0 0 70px; position: relative;}
.main_visual .container::before {content: ""; background: url(./images/main_visual_img.png) no-repeat; width: 490px; height: 360px; position: absolute; top: 0; right: 165px;}
.main_visual strong {color: #fff; font-weight: 700; font-size: 36px; line-height: 53px; letter-spacing: -2px; display: block; padding: 80px 0 40px 0;}
.main_visual strong span {position: relative;}
.main_visual strong span::before {content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background: #fff;}
.main_visual dl {letter-spacing: -1px; color: #FFE3CA;}
.main_visual dt {font-weight: 700; font-size: 18px; line-height: 22px; margin: 0 0 8px 0;}
.main_visual dd {font-weight: 400; font-size: 17px; line-height: 25px;}

/* search_section */
.content_section {position: relative;}
.search_section {width: 100%; max-width: 1400px; position: absolute; left: 50%; transform: translateX(-50%); top: -174px; background: var(--color-beige); border-radius: 20px 20px 0px 0px; height: 174px;}
.search_section::before {content: ""; background: url(./images/main_visual_peple02.png) no-repeat; width: 112px; height: 211px; position: absolute; top: 87px; left: -60px;}
.search_section::after {content: ""; background: url(./images/main_visual_peple01.png) no-repeat; width: 116px; height: 208px; position: absolute; top: -175px; right: 74px; }
.search_box,
.option_area select,
.option_area input {background: #fff; border: 1px solid #ddd; border-radius: 4px;}
.search_input,
.option_area input {font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.7px; color: #000;}
.search_input::placeholder,
.option_area select,
.option_area input::placeholder {font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.7px; color: #999;}

/* search_controls */
.search_controls {display: flex; margin: 48px 0 20px 215px;}
.search_box, .btn_search, .btn_reset {height: 58px;}
.search_box {width: 750px; padding: 0 23px 0 0; display: flex; align-items: center;}
.search_select {font-weight: 700; font-size: 14px; line-height: 42px; color: #666; padding: 0 40px 0 23px; height: 100%; position: relative; background: url(./images/select_icon.png) right 12px center / 8px 4px no-repeat;}

.search_input_wrap { display: flex; align-items: center; width: 100%; height: 100%;}
.search_input_wrap::before {content: ""; min-width: 1px; height: 12px; background: #aaa;}
.search_input {width: 100%; height: 100%; padding: 0 0 0 12px;}

.search_buttons {display: flex; align-items: center;}
.btn_clear {display: none; background: #EDEDED; width: 20px; min-width: 20px; height: 20px; border-radius: 50%; justify-content: center; align-items: center;}
.btn_clear::before {content: ""; background: url(./images/close_icon.png) 50% 50% / contain no-repeat; width: 8px; height: 8px;}
.btn_search {margin: 0 16px; background: var(--color-point); border-radius: 4px; color: #fff; width: 130px; font-weight: 500; font-size: 16px; line-height: 23px; letter-spacing: -0.7px; color: #fff; display: inline-flex; justify-content: center; align-items: center; gap: 6px;}
.btn_search::before {content: ""; background: url(./images/search_icon.png) 50% 50% / contain no-repeat; width: 17px; height: 16px; margin-top: 1px;}
.btn_reset {border: 1px solid var(--color-point); border-radius: 4px; min-width: 58px; background: transparent; display: flex; justify-content: center; align-items: center;}
.btn_reset::before {content: ""; background: url(./images/reset_icon.png) 50% 50% / contain no-repeat; width: 23px; height: 23px;}

/* option_area */
.filter_area {display: flex; gap: 16px; margin: 0 49px 0 0;}
.filter_select {background: #fff url(./images/select_icon.png) right 23px center / 8px 4px no-repeat !important;}

.option_area {display: flex; margin: 0 0 0 215px;}
.option_area select,
.option_area input {height: 48px; padding: 0 23px; display: flex; justify-content: center; align-items: center;}
.option_area select {width: 160px;}
.option_area input {width: 120px;}

.year_range {display: flex; align-items: center;}
.year_range p {font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.7px; color: #3A3A3A; margin: 0 16px 0 0;}
.year_range span {font-weight: 400; font-size: 24px; line-height: 29px; letter-spacing: -0.7px; color: #3A3A3A; display: inline-block; padding: 0 10px;}
.year_input_wrap {display: flex; align-items: center;}
.year_input {text-align: center;}

/* gallery */
.gallery {background: var(--color-beige) url(./images/content_bg.png) top center no-repeat; max-height: 2442px; padding: 0 0 100px 0;}
.gallery .alert {text-align: center; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.7px; color: #929292; padding: 32px 0 80px 0;}
.gallery ul { display: grid; grid-template-columns: repeat(5, 260px); gap: 24px 25px;}
.gallery ul li {background: #fff; border-radius: 5px; text-align: center;}
.gallery ul li button {background: transparent; width: 100%; padding: 10px 10px 16px 10px;}
.gallery ul li figure { width: 240px; height: 360px;border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
.gallery ul li figure img {width: 100%; height: 100%; object-fit: cover;}
.gallery ul li strong {font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.7px; color: #333; margin: 16px 0 8px 0; min-height: 61px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.gallery ul li p {font-weight: 400; font-size: 12px; line-height: 17px; letter-spacing: -0.7px; color: #999;}

/* pagination */
.pagination {margin: 60px 0 0 0; display: flex; justify-content: center; align-items: center;}
.pagination  a {width: 30px; height: 30px;}
.pagination .btn_paging {font-weight: 400; font-size: 16px; line-height: 28px; letter-spacing: -0.8px; color: #333; text-align: center;}
.pagination .btn_paging.active {text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--color-point); color: var(--color-point);}
.pagination .btn_first {background: url(./images/btn_first.png) 50% 50% no-repeat; margin: 0 5px 0 0;}
.pagination .btn_prev {background: url(./images/btn_prev.png) 50% 50% no-repeat; margin: 0 15.5px 0 0;}
.pagination .btn_next {background: url(./images/btn_next.png) 50% 50% no-repeat; margin: 0 0 0 15.5px;}
.pagination .btn_last {background: url(./images/btn_last.png) 50% 50% no-repeat; margin: 0 0 0 5px;}

/* btn_more */
.btn_more {display: none;}

/* footer */
#footer {background: #333;}
#footer .row_top {padding: 60px 0 25px 0; border-bottom: 1px solid #666; display: flex; justify-content: space-between;}
#footer .row_top .footer_logo {display: flex; gap: 20px; text-indent: -9999px;}
#footer .row_top .footer_logo a:first-child {width: 121px; height: 36px; background: url(./images/footer_logo.png) 50% 50% / contain no-repeat;}
#footer .row_top .footer_logo a:last-child {width: 170px; height: 36px; background: url(./images/footer_logo_2.png) 50% 50% / contain no-repeat;}
#footer .row_top .sns {display: flex; align-items: center; gap: 8px;}
#footer .row_top .sns a {text-indent: -9999px; width: 40px; height: 40px;}
#footer .row_top .sns a:first-child { background: url(./images/icon-footer-instagram.png) 50% 50% / contain no-repeat;} 
#footer .row_top .sns a:nth-child(2) { background: url(./images/icon-footer-facebook.png) 50% 50% / contain no-repeat;} 
#footer .row_top .sns a:nth-child(3) { background: url(./images/icon-footer-blog.png) 50% 50% / contain no-repeat;} 
#footer .row_top .sns a:nth-child(4) { background: url(./images/icon-footer-youtube.png) 50% 50% / contain no-repeat;} 

#footer .row_bottom {padding: 15px 0 76px 0;}
#footer .row_bottom .fnb {font-weight: 400; font-size: 15px; line-height: 18px; letter-spacing: -0.7px; color: #999; margin: 0 0 10px 0;}
#footer .row_bottom .fnb a + a {margin: 0 0 0 30px;}
#footer .row_bottom .copy {font-weight: 400; font-size: 14px; line-height: 17px; letter-spacing: -0.7px; color: #666;}


@media (max-width: 1399px) {
    /* base */
    .container {max-width: none; padding: 0 16px;}
    .pc {display: none;}
    .mo {display: block;}
    .dimmed {background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; z-index: 19; width: 100%; height: 100%;}
    
    /* header */
    #header {height: 60px;}
    #header .logo_area .logo a {display: block; width: 136px; height: 32px; background: url(./images/city_county_logo_m.png) 50% 50% / contain no-repeat;}
    #header .logo_area .logo a img {width: 100%; object-fit: cover;}
    #header .logo_area h2 {font-size: 14px; line-height: 17px; padding: 7.5px 6px;}
    #header .gnb {display: none;}

    #header .mobile_open {display: block; background: url(./images/menu_open.png) 50% 50% / contain no-repeat; width: 25px; height: 19px; text-indent: -9999px;}
    #header .mobile_close {background: url(./images/menu_close.png) 50% 50% / contain no-repeat; width: 19px; height: 19px; text-indent: -9999px;}
    #header .mobile_menu {position: fixed; right: 0; top: 0; background: #fff; width: 86%; padding: 24px 24px 32px 24px; z-index: 20; overflow: auto; height: calc(100% - 91px); max-height: 468px;}
    #header .mobile_menu .mobile_header {display: flex; align-items: center; justify-content: space-between; padding: 0 0 30px 0;}
    #header .mobile_menu .mobile_header strong {font-size: 24px; line-height: 35px; color: #000;}
    #header .mobile_menu .mobile_body {padding: 32px 0 0 0; border-top: 2px solid #ddd;}
    #header .mobile_menu .mobile_body a {display: block; font-weight: 700; font-size: 18px; line-height: 18px; letter-spacing: -0.7px; color: #000;}
    #header .mobile_menu .mobile_body a + a {margin: 24px 0 0 0;}

    /* main_visual */
    .main_visual {height: 305px; background: url(./images/main_visual_bg_m.png) top center / cover no-repeat;}
    .main_visual .container {padding: 0 25px 24px 27px;}
    .main_visual .container::before {background: url(./images/main_visual_img_m.png) 50% 50% / contain no-repeat; width: 140px; height: 175px; right: auto; left: 215px;}
    .main_visual strong {font-size: 23px; line-height: 35px; padding: 30px 0 16px 0; text-shadow: -2px -2px 0 #9D5E2D, 2px -2px 0 #9D5E2D, -2px 2px 0 #9D5E2D, 2px 2px 0 #9D5E2D;}
    .main_visual strong span {width: fit-content; display: block;}
    .main_visual strong span::before {bottom: 0;}
    .main_visual dt {font-size: 14px; line-height: 22px; margin: 0 0 3px 0; display: flex; align-items: center; gap: 5px;}
    .main_visual dd {font-size: 11px; line-height: 16px; text-shadow: -0.5px -0.5px 0 #965B2A, 0.5px -0.5px 0 #965B2A, -0.5px 0.5px 0 #965B2A, 0.5px 0.5px 0 #965B2A;}

    /* search_section */
    .search_section {max-width: none; position: initial; transform: none; height: auto; padding: 24px 16px 48px 16px; border-radius: 16px 16px 0px 0px; margin: -24px 0 0 0;}
    .search_section::before,
    .search_section::after {display: none;}

    /* search_controls */
    .search_controls, .option_area {margin: 0;}
    .search_controls {flex-direction: column;}
    .search_box, .btn_search, .btn_reset {height: 48px;}
    .search_box,
    .option_area > div {margin: 0 0 8px 0;}
    .search_box {width: auto; padding: 0 15px 0 0;}
    .search_select {padding: 0 40px 0 15px;}

    .search_buttons { position: absolute; top: 192px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px);}
    .btn_search {margin: 0 8px 0 0; width: calc((100% - 58px));}
    .btn_reset::before {width: 20px; height: 20px; background-size: 20px 20px;}

    /* option_area */
    .filter_area {margin: 0; gap: 8px;}
    .filter_select {width: 50% !important; background-position: right 15px center !important;}
    
    .option_area {flex-direction: column;}
    .option_area select,
    .option_area input {padding: 0 15px; line-height: 17px;}
    .option_area input {width: 100%;}

    .year_range p {font-size: 14px; line-height: 20px; margin: 0 8px 0 0; min-width: 77px;}
    .year_range span {padding: 0 9px;}
    .year_input_wrap {width: calc(100% - 77px);}

    /* gallery */
    .gallery {max-height: none; padding: 0 0 50px 0; background: var(--color-beige);}
    .gallery .alert {font-size: 12px; line-height: 18px; padding: 24px 0;}
    .gallery ul {grid-template-columns: repeat(2, 1fr); gap: 8px;}
    .gallery ul li {border-radius: 4px;}
    .gallery ul li button {padding: 8px;}
    .gallery ul li figure {width: 100%; height: auto; position: relative; padding-top: 148.62%; overflow: hidden; border-radius: 4px;}
    .gallery ul li figure img {position: absolute; top: 0; left: 0;}
    .gallery ul li strong {font-size: 11px; line-height: 13px; letter-spacing: -0.43px; min-height: 38px; margin: 8px 0 6px 0;}
    .gallery ul li p {font-size: 9px; line-height: 13px; letter-spacing: -0.43px;}

    /* pagination */
    .pagination {display: none;}

    /* btn_more */
    .btn_more {display: block; margin: 24px 0 0 0; text-align: center;}
    .btn_more button{ width: 140px; height: 40px; border: 1px solid var(--color-point); border-radius: 100px; background: transparent; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-point);}
 
    /* footer */
    #footer .container {position: relative;}
    #footer .row_top .footer_logo {justify-content: center; gap: 14px;}
    #footer .row_top .footer_logo a:first-child {width: 88px; height: 34px; background: url(./images/footer_logo_m.png) 50% 50% / contain no-repeat;}
    #footer .row_top .footer_logo a:last-child {width: 157px; height: 34px; background: url(./images/footer_logo_2_m.png) 50% 50% / contain no-repeat;}
    #footer .row_top {flex-direction: column; border-bottom: none; padding: 28px 0 19px 0;}
    #footer .row_top .sns {position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); justify-content: center; width: 100%;}
    #footer .row_top .sns a {width: 30px; height: 30px;}

    #footer .row_bottom {padding: 0 0 27px 0;}
    #footer .row_bottom .fnb {font-size: 11px; line-height: 13px; letter-spacing: -0.64px; text-align: center; padding: 0 0 80px 0; border-bottom: 1px solid #999; word-break: keep-all;} 
    #footer .row_bottom .fnb a + a {margin: 0 0 0 10px;}
    #footer .row_bottom .copy {font-size: 11px; line-height: 13px; letter-spacing: -0.64px; text-align: center;}

}

@media (max-width:416px) {
  #footer .row_top .sns {bottom: 110px;}
}

@media (max-width:359px) {
    .main_visual .container::before {right: 5px; left: auto;}
    .main_visual dd .mo {display: none;}
}