/**======== 헤더 ========**/ #header {z-index: 9999} .pcHeader {} .pcHeader .topArea {transition: 0.1s;} .pcHeader .topArea .inner {justify-content: flex-end; padding: 0.8rem 0; gap: 4rem;} .pcHeader .topArea .snsLst {gap: 2rem;} .pcHeader .topArea .snsLst .lst {} .pcHeader .topArea .snsLst .lst a {gap: 0.4rem;} .pcHeader .topArea .langLst {border-radius: 8rem; background: rgba(255,255,255,0.4); padding: 0.4rem 1.6rem 0.4rem 0.4rem; gap: 0.8rem} .pcHeader .topArea .langLst .lst {} .pcHeader .topArea .langLst .lst a {display: inline-block; transition: 0.1s;} .pcHeader .topArea .langLst .lst.on a {padding: 0.3rem 1.2rem; background: var(--fcg); border-radius: 8rem;} .pcHeader .headArea {transition: 0.1s;} .pcHeader .headArea::before {content: ''; display: block; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: #ccc; opacity: 0; transition: 0.1s;} .pcHeader .headArea .inner {} .pcHeader .headArea .logo {} .pcHeader .headArea .logo a {} .pcHeader .headArea .logo a img {transition: 0.1s;} .pcHeader .headArea .logo a .dimg {} .pcHeader .headArea .logo a .aimg {opacity: 0;} .pcHeader .headArea .gnb {gap: 6rem;} .pcHeader .headArea .gnb li {} .pcHeader .headArea .gnb li a {display: block; padding: 3.2rem 0 3.4rem; transition: 0.1s;} .pcHeader .headArea .gnb li a:hover {font-weight: bold; color: var(--fcb)} .pcHeader .headArea .gnb li a::before {content: ''; display: block; position: absolute; width: 100%; bottom: 0; height: 0.4rem; background: var(--fcb); opacity: 0; transition: 0.1s;} .pcHeader .headMenu {background: #fff; box-shadow: 0 1.2rem 2.4rem rgba(0,0,0,0.2); display: none;} .pcHeader .headMenu .inner {} .pcHeader .headMenu .gnbWrap {} .pcHeader .headMenu .gnbLst {padding: 4rem 4rem 5rem; flex: 1; transition: 0.1s;} .pcHeader .headMenu .gnbLst::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url('../img/pc_lnb_bg.png') center/cover no-repeat; transition: 0.1s; opacity: 0} .pcHeader .headMenu .gnbLst + .gnbLst::after {content: ''; display: block; position: absolute; width: 1px; height: 80%; background: #CCCCCC; top: 50%; left: 0; transform: translateY(-50%);} .pcHeader .headMenu .gnbLst .tit {margin-bottom: 3.2rem; transition: 0.1s; z-index: 1;} .pcHeader .headMenu .lnbWrap {gap: 2rem 0; z-index: 1} .pcHeader .headMenu .lnbWrap li {width: 50%; color: #697D74;} .pcHeader .headMenu .lnbWrap li a {transition: 0.1s; display: inline-block;} .pcHeader .headMenu .lnbWrap li a::before {content: ''; display: block; position: absolute; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: 0.1s;} .pcHeader .headMenu .gnbLst:hover {} .pcHeader .headMenu .gnbLst:hover::before {opacity: 1} .pcHeader .headMenu .gnbLst:hover::after {opacity: 0} .pcHeader .headMenu .gnbLst:hover .tit {color: #fff;} .pcHeader .headMenu .gnbLst:hover .lnbWrap {} .pcHeader .headMenu .gnbLst:hover .lnbWrap li {color: #fff;} .pcHeader .headMenu .gnbLst:hover .lnbWrap li a {} .pcHeader .headMenu .gnbLst:hover .lnbWrap li a:hover {padding-left: 2.2rem; font-weight: bold;} .pcHeader .headMenu .gnbLst:hover .lnbWrap li a:hover::before {opacity: 1;} .pcHeader.act {} .pcHeader.act .topArea {background: #3B2E27} .pcHeader.act .topArea .langLst .lst.on a {background: var(--fcb) } .pcHeader.act .headArea {background: #fff;} .pcHeader.act .headArea::before {opacity: 1;} .pcHeader.act .headArea .logo a .dimg {opacity: 0;} .pcHeader.act .headArea .logo a .aimg {opacity: 1;} .pcHeader.act .headArea .gnb li a {color: #121212} .pcHeader.act .headArea .gnb li.on a {font-weight: bold; color: var(--fcb)} .pcHeader.act .headArea .gnb li.on a::before {opacity: 1;} .pcHeader.on {} .pcHeader.on .topArea {background: #3B2E27} .pcHeader.on .topArea .langLst .lst.on a {background: var(--fcb) } .pcHeader.on .headArea {background: #fff;} .pcHeader.on .headArea::before {opacity: 1;} .pcHeader.on .headArea .logo a .dimg {opacity: 0;} .pcHeader.on .headArea .logo a .aimg {opacity: 1;} .pcHeader.on .headArea .gnb li a {color: #121212} .pcHeader.on .headArea .gnb li.on a {font-weight: bold; color: var(--fcb)} .pcHeader.on .headArea .gnb li.on a::before {opacity: 1;} @media all and (max-width: 880px){ .moHeader {} .moHeader .moHead {padding: 1.6rem 0 1.2rem; transition: 0.1s;} .moHeader .moHead::before {content: ''; display: block; position: absolute; width: 100%; height: 1px; background: #ccc; bottom: 0; left: 0; opacity: 0; transition: 0.1s;} .moHeader .moHead .logo {width: 23.6rem;} .moHeader .moHead .logo a {} .moHeader .moHead .logo a img {transition: 0.1s;} .moHeader .moHead .logo a .dimg {opacity: 1;} .moHeader .moHead .logo a .aimg {opacity: 0;} .moHeader .moHead .menuBtn {width: 4rem; height: 4rem; border-radius: 50%; background: var(--fcg); transition: 0.1s;} .moHeader.act {} .moHeader.act .moHead {background: #fff;} .moHeader.act .moHead::before {opacity: 1;} .moHeader.act .moHead .logo a .dimg {opacity: 0;} .moHeader.act .moHead .logo a .aimg {opacity: 1;} .moHeader.act .moHead .menuBtn {background: var(--fcb)} .moHeader .moOpen {position: fixed; width: 100%; height: 100vh; background: #fff; top: 0; top: -20%; opacity: 0; display: none; transition: 0.2s;} .moHeader .moOpen.act {opacity: 1; top: 0} .moHeader .topArea {} .moHeader .topArea .inner {padding: 2rem 0;} .moHeader .topArea .sns {gap: 1.2rem;} .moHeader .topArea .sns li {} .moHeader .topArea .sns li a {} .moHeader .topArea .sns li a img {width: 2.4rem;} .moHeader .topArea .util {gap: 2.6rem; padding-right: 0.2rem;} .moHeader .topArea .lang {padding: 0.4rem 1.6rem 0.4rem 0.4rem; border-radius: 8rem; background: rgba(255,255,255,0.4); gap: 0.8rem;} .moHeader .topArea .lang li {} .moHeader .topArea .lang li a {} .moHeader .topArea .lang li.on a {padding: 0.15rem 1.2rem; background: var(--fcg); border-radius: 8rem;} .moHeader .topArea .closeBtn {} .moHeader .gnbArea {padding: 2.4rem 0 4rem;} .moHeader .gnbArea .gnbLst {} .moHeader .gnbArea .gnbLst + .gnbLst {margin-top: 2.4rem} .moHeader .gnbArea .gnbLst .tit {padding: 1rem 0;} .moHeader .gnbArea .gnbLst .tit .ic {display: inline-block; width: 2.4rem; height: 2.4rem; background: url('../img/ic_menu_plus.svg') center/contain no-repeat; transition: 0.2s;} .moHeader .lnbArea {display: none;} .moHeader .lnbArea li {color: #697D74; border-radius: 10rem; overflow: hidden;} .moHeader .lnbArea li a {padding: 1.2rem 0; display: block;} .moHeader .lnbArea li.on a {background: url('../img/ic_menu_bg.png') center/cover; font-weight: bold; color: #fff; padding: 1.2rem 3.4rem;} .moHeader .lnbArea li.on a::before {content: ''; display: block; position: absolute; width: 0.6rem; height: 0.6rem; background: #fff; border-radius: 50%; left: 2rem; top: 50%; transform: translateY(-50%);} .moHeader .gnbArea .gnbLst.act {} .moHeader .gnbArea .gnbLst.act .tit .ic {background: url('../img/ic_menu_minus.svg') center/contain no-repeat; transform: rotate(180deg);} } /**======== 플로팅 ========**/ #float {z-index: 999; border-radius: 2rem 0 0 2rem; overflow: hidden;} #float .menu {} #float .menu .lst {width: 9.2rem; height: 10rem; background: rgba(255,255,255,0.8);} #float .menu .lst a {justify-content: center; gap: 0.4rem;} #float .menu .lst .ico {} #float .menu .lst .ico .off {opacity: 1;} #float .menu .lst .ico .on {opacity: 0} #float .menu .lst .txt {font-size: 1.6rem; font-weight: 600; color: #445149;} #float .menu .lst:hover.bgA {background: url('../img/float_bg_a.png') center/cover no-repeat;} #float .menu .lst:hover.bgB {background: url('../img/float_bg_b.png') center/cover no-repeat;} #float .menu .lst:hover .ico .off {opacity: 0} #float .menu .lst:hover .ico .on {opacity: 1;} #float .menu .lst:hover .txt {color: #fff;} #float .top {width: 9.2rem; height: 10rem; background: rgba(255,255,255,0.8);} #float .top a {justify-content: center; gap: 0.4rem;} #float .top .ico {} #float .top .ico .off {opacity: 1;} #float .top .ico .on {opacity: 0} #float .top .txt {font-size: 1.6rem; font-weight: 600; color: #402C19;} #float .top:hover {background: url('../img/float_bg_c.png') center/cover no-repeat;} #float .top:hover .ico .off {opacity: 0} #float .top:hover .ico .on {opacity: 1;} #float .top:hover .txt {color: #fff;} #floatMo {display: none} @media all and (max-width: 880px){ #float {display: none} #floatMo {display: flex; flex-direction: column; align-items: flex-end; right: 1.2rem; bottom: 5%; z-index: 999;} #floatMo .menu {padding-bottom: 0.8rem; display: none;} #floatMo .menu .lst {border-radius: 10rem; overflow: hidden;} #floatMo .menu .lst + .lst {margin-top: 0.2rem;} #floatMo .menu .lst a {padding: 1rem 1.4rem; gap: 0.8rem;} #floatMo .menu .lst:nth-child(1) a img {width: 1.8rem;} #floatMo .menu .lst:nth-child(2) a img {width: 1.6rem;} #floatMo .menu .lst:nth-child(3) a img {width: 2.3rem;} #floatMo .menu .lstA {background: url('../img/float_bg_a_mo.png') center/cover no-repeat;} #floatMo .menu .lstB {background: url('../img/float_bg_b_mo.png') center/cover no-repeat;} #floatMo .btn {width: 5.2rem; height: 5.2rem; border-radius: 50%; overflow: hidden; background: url('../img/float_menu_bg.png') center/cover no-repeat; box-shadow: 0 0.4rem 0.6rem rgba(0,0,0,0.24)} #floatMo .btn img {width: 2.4rem; transition: 0.2s;} #floatMo .btn.on img {transform: rotate(-45deg);} #floatMo .top {width: 5.2rem; height: 5.2rem; box-shadow: 0 0.4rem 0.6rem rgba(0,0,0,0.24); margin-top: 0.4rem; border-radius: 50%; overflow: hidden; background: url('../img/float_top_bg.png') center/cover no-repeat;} #floatMo .top img {width: 1.6rem;} } /**======== 푸터 ========**/ #footer {background: #121212; border-radius: 10rem 10rem 0 0; overflow: hidden;} #footer .inner {padding: 6rem 0 8rem; gap: 8rem;} #footer .ftLogo {width: 22rem; flex-shrink: 0} #footer .ftCont {width: 100%} #footer .ftCont .topArea {padding-bottom: 1.6rem; margin-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,0.3);} #footer .ftCont .topArea .menu {} #footer .ftCont .topArea .menu li {transition: 0.1s;} #footer .ftCont .topArea .menu li:hover {font-weight: 600} #footer .ftCont .topArea .menu li + li {padding-left: 1.6rem; margin-left: 1.6rem;} #footer .ftCont .topArea .menu li + li::before {content: ''; display: block; position: absolute; width: 1px; height: 1.6rem; background: #aaa; left: 0; top: 50%; transform: translateY(-50%);} #footer .ftCont .topArea .sns {gap: 0.8rem;} #footer .ftCont .topArea .sns li {} #footer .ftCont .topArea .sns li a {width: 4rem; height: 4rem; background: rgba(255,255,255,0.15); border-radius: 50%; transition: 0.2s;} #footer .ftCont .topArea .sns li a:hover {background: rgba(255,255,255,0.2);} #footer .ftCont .topArea .sns li img {} #footer .ftCont .infoArea {} #footer .ftCont .infoArea li {letter-spacing: -0.02em;} #footer .ftCont .infoArea li + li {margin-top: 0.8rem} #footer .ftCont .moSns {display: none;} @media all and (max-width: 880px){ #footer {border-radius: 6rem 6rem 0 0;} #footer .inner {max-width: var(--innerMo); flex-direction: column; gap: 4rem; padding: 6rem 0 4rem;} #footer .ftLogo {width: 18.9rem} #footer .ftCont {} #footer .ftCont .topArea {padding: 1.2rem 0; justify-content: center; margin-bottom: 2rem;} #footer .ftCont .topArea .menu {font-size: 1.4rem;} #footer .ftCont .topArea .menu li {} #footer .ftCont .topArea .menu li + li {} #footer .ftCont .topArea .sns {display: none} #footer .ftCont .infoArea {font-size: 1.4rem; text-align: center;} #footer .ftCont .infoArea li {} #footer .ftCont .infoArea li + li {} #footer .ftCont .moSns {gap: 0.8rem; display: flex; margin-top: 2rem; justify-content: center;} #footer .ftCont .moSns li {} #footer .ftCont .moSns li a {width: 4rem; height: 4rem; background: rgba(255,255,255,0.15); border-radius: 50%} #footer .ftCont .moSns li img {width: 2.4rem;} } /**======== 메인 ========**/ #mainVisual {z-index: 9998;} #mainVisual .bgImg {} #mainVisual .txts {} #mainVisual .txts .tit {width: 53.2rem;} #mainVisual .txts .subt {margin: 4.4rem 0 0.4rem;} #mainVisual .txts .wrt {} #mainVisual .txts .wrt {} #mainVisual .down {bottom: 4rem; right: 4rem; gap: 2px;} #mainVisual .down .txt {height: 7.2rem; display: flex; align-items: center; padding: 0 3.2rem; background: #3D3D3D; border-radius: 8rem; transition: 0.2s; border: 1px solid rgba(255,255,255,0.5);} #mainVisual .down .txt::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 8rem; border: 2px solid #fff; opacity: 0; transition: 0.2s;} #mainVisual .down .ico {width: 7.2rem; height: 7.2rem; background: #3D3D3D; border-radius: 50%; transition: 0.2s; border: 1px solid rgba(255,255,255,0.5);} #mainVisual .down .ico::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 2px solid #fff; opacity: 0; transition: 0.2s;} #mainVisual .down .ico .ic {} #mainVisual .down .ico .ic1 {top: -3px; transition: 0.2s;} #mainVisual .down .ico .ic2 {} #mainVisual .down:hover {} #mainVisual .down:hover .txt {background: #2D493D;} #mainVisual .down:hover .txt::before {opacity: 1} #mainVisual .down:hover .ico {background: #2D493D;} #mainVisual .down:hover .ico::before {opacity: 1} #mainVisual .down:hover .ico .ic1 {top: 0} @media all and (max-width: 880px){ #mainVisual {} #mainVisual .bgImg {} #mainVisual .txts {width: 100%; display: flex; flex-direction: column; align-items: center;} #mainVisual .txts .tit {width: 25.3rem;} #mainVisual .txts .subt {font-size: 2.4rem; margin: 2.4rem 0 0.4rem;} #mainVisual .txts .wrt {font-size: 2rem;} #mainVisual .down {gap: 1px; bottom: 7rem; right: 2rem;} #mainVisual .down .txt {font-size: 1.4rem; padding: 0 2rem; height: 5.2rem;} #mainVisual .down .ico {width: 5.2rem; height: 5.2rem;} #mainVisual .down .ico .ic {} #mainVisual .down .ico .ic1 {width: 1.1rem; top: -2px} #mainVisual .down .ico .ic2 {width: 2rem;} } #main .s1 {background: #f7fdf3 url('../img/main/s1_back.jpg') top/cover no-repeat; z-index: 1} #main .s1 .inner {padding: 16rem 0 18rem} #main .s1 .titArea {margin-bottom: 5.2rem;} #main .s1 .titArea .subt {padding-bottom: 0.8rem; color: #0F5944} #main .s1 .titArea .tit {} #main .s1 .titArea .tit span {color: #0F5944;} #main .s1 .lstArea {gap: 2.35rem;} #main .s1 .lstArea .lst {width: calc((100% - 4.7rem) / 3); border-radius: 6rem; overflow: hidden; background: url('../img/main/s1_bg_df.png') center/cover; transition: 0.2s;} #main .s1 .lstArea .lst::before {content: ''; display: block; position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 6rem; border: 1px solid #E7E7E7; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.2s;} #main .s1 .lstArea .lst::after {content: ''; display: block; position: absolute; width: 100%; height: 100%; border-radius: 6rem; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.2s;} #main .s1 .lstArea .lst a {padding: 1.4rem 1.4rem 6.9rem; display: block;} #main .s1 .lstArea .lst .thumb {border-radius: 5.2rem 5.2rem 5.2rem 0; overflow: hidden; z-index: 1} #main .s1 .lstArea .lst .thumb img {transition: 0.2s;} #main .s1 .lstArea .lst .txts {padding: 3rem 1.6rem 0; z-index: 1;} #main .s1 .lstArea .lst .txts .tit {transition: 0.2s;} #main .s1 .lstArea .lst .txts .wrt {transition: 0.2s;} #main .s1 .lstArea .lst .opt {top: -2.2rem; left: 0;} #main .s1 .lstArea .lst .opt li {border-radius: 8rem; transition: 0.2s; background: rgba(250,250,250,1); transition: 0.2s;} #main .s1 .lstArea .lst .opt li::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: #FFFFFF; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 8rem; transition: 0.2s;} #main .s1 .lstArea .lst .opt li:nth-child(1) {padding: 1rem 2rem;} #main .s1 .lstArea .lst .opt li:nth-child(2) {padding: 1rem 2.4rem;} #main .s1 .lstArea .lst .opt li span {z-index: 1} #main .s1 .lstArea .lst01::after {background: url('../img/main/s1_bg_1.png') center/cover; opacity: 0;} #main .s1 .lstArea .lst02::after {background: url('../img/main/s1_bg_2.png') center/cover; opacity: 0;} #main .s1 .lstArea .lst03::after {background: url('../img/main/s1_bg_3.png') center/cover; opacity: 0;} #main .s1 .lstArea .lst01 .opt li::before {background: #2D493D; background: linear-gradient(180deg,rgba(45, 73, 61, 1) 0%, rgba(41, 76, 60, 1) 100%); opacity: 0;} #main .s1 .lstArea .lst02 .opt li::before {background: #B76940; background: linear-gradient(180deg,rgba(183, 105, 64, 1) 0%, rgba(173, 93, 57, 1) 100%); opacity: 0;} #main .s1 .lstArea .lst03 .opt li::before {background: #59270F; background: linear-gradient(180deg,rgba(89, 39, 15, 1) 0%, rgba(82, 40, 15, 1) 100%); opacity: 0;} #main .s1 .lstArea .lst:hover {box-shadow: 0 1.2rem 1.6rem rgba(0,0,0,0.26)} #main .s1 .lstArea .lst:hover::before {display: none;} #main .s1 .lstArea .lst:hover::after {opacity: 1} #main .s1 .lstArea .lst:hover .thumb img {transform: scale(1.1);} #main .s1 .lstArea .lst:hover .txts .tit {color: #fff} #main .s1 .lstArea .lst:hover .txts .wrt {color: #fff} #main .s1 .lstArea .lst:hover .opt {color: #fff;} #main .s1 .lstArea .lst:hover .opt li::before {opacity: 1} #main .s1 .lstArea .lst01:hover .opt li {background: #2D493D} #main .s1 .lstArea .lst02:hover .opt li {background: #B76940} #main .s1 .lstArea .lst03:hover .opt li {background: #59270F} #main .s1 .flowWrap {overflow: hidden; bottom: 4rem; width: 100%;} #main .s1 .flow {color: #7A9A8B; opacity: 0.1;} #main .s1 .flow span {margin-left: 7.2rem} #main .s1 .illust {bottom: -9rem} @media all and (max-width: 880px){ #main .s1 {background: url('../img/main/s1_back_mo.jpg') center/contain no-repeat;} #main .s1 .inner {max-width: var(--innerMo); padding: 8rem 0 14.2rem;margin-top: -1.5rem;} #main .s1 .titArea {margin-bottom: 4rem;} #main .s1 .titArea .subt {font-size: 1.6rem;} #main .s1 .titArea .tit {font-size: 2.8rem;} #main .s1 .lstArea {gap: 2rem; flex-direction: column;} #main .s1 .lstArea .lst {width: 100%; border-radius: 4rem; box-shadow: 0 0.8rem 1rem rgba(0,0,0,0.24)} #main .s1 .lstArea .lst::before {display: none;} #main .s1 .lstArea .lst::after {border-radius: 4rem;} #main .s1 .lstArea .lst a {padding: 1.4rem 1.4rem 4.3rem;} #main .s1 .lstArea .lst .thumb {border-radius: 3.2rem 3.2rem 3.2rem 0;} #main .s1 .lstArea .lst .thumb img {} #main .s1 .lstArea .lst .txts {padding: 1.8rem 1.2rem 0;} #main .s1 .lstArea .lst .txts .tit {font-size: 2.4rem; color: #fff;} #main .s1 .lstArea .lst .txts .wrt {font-size: 1.6rem; color: #fff;} #main .s1 .lstArea .lst .opt {font-size: 1.4rem; color: #fff;} #main .s1 .lstArea .lst .opt li {} #main .s1 .lstArea .lst .opt li:nth-child(1) {padding: 0.6rem 1.6rem;} #main .s1 .lstArea .lst .opt li:nth-child(2) {padding: 0.6rem 2rem;} #main .s1 .lstArea .lst .opt li {background: transparent} #main .s1 .lstArea .lst .opt li::before {opacity: 1;} #main .s1 .lstArea .lst01::after {opacity: 1;} #main .s1 .lstArea .lst02::after {opacity: 1;} #main .s1 .lstArea .lst03::after {opacity: 1;} #main .s1 .flowWrap {bottom: 9rem;} #main .s1 .flow {font-size: 4rem;} #main .s1 .flow span {margin-left: 2rem;} #main .s1 .illust {bottom: 0; max-width: var(--innerMo); left: 50%; transform: translateX(-50%);} } #main .s2 {} #main .s2::before {content: ''; display: block; position: absolute; width: 100%; height: 147.6rem; background: url('../img/main/s2_bg.png') center/contain no-repeat; bottom: -17rem} #main .s2 .inner {padding: 16rem 0; max-width: 159rem;} #main .s2 .titArea {margin-bottom: 5.2rem;} #main .s2 .titArea .subt {color: #D9A441} #main .s2 .titArea .tit {} #main .s2 .titArea .tit span {color: #D9A441} #main .s2 .lstArea {gap: 3.3rem;} #main .s2 .lstArea .lst {width: calc((100% - 6.6rem) / 3); padding: 2.8rem 3.5rem;} #main .s2 .lstArea .lst .box {border-radius: 6.1rem;} #main .s2 .lstArea .lst .inn {background: #F7F7F7; border: 1px solid #E0E0E0; border-radius: 6rem; padding: 6rem 0 5.4rem; transition: 0.4s;} #main .s2 .lstArea .lst .tit {transition: 0.4s;} #main .s2 .lstArea .lst .wrt {margin: 0.4rem 0 3.2rem;} #main .s2 .lstArea .lst .img {} #main .s2 .lstArea .lst .btns {font-size: 1.8rem; color: #fff; font-weight: 600; padding: 1.2rem 3.6rem; border-radius: 8rem; margin-top: 3.2rem; display: inline-block;} #main .s2 .lstArea .lst01 .box {background: #59270F} #main .s2 .lstArea .lst02 .box {background: #B65E3C} #main .s2 .lstArea .lst03 .box {background: #C98A4A} #main .s2 .lstArea .lst04 .box {background: #2D493D} #main .s2 .lstArea .lst05 .box {background: #7A9A8B} #main .s2 .lstArea .lst06 .box {background: #3A8D83} #main .s2 .lstArea .lst01 .btns {background: #59270F} #main .s2 .lstArea .lst02 .btns {background: #B65E3C} #main .s2 .lstArea .lst03 .btns {background: #C98A4A} #main .s2 .lstArea .lst04 .btns {background: #2D493D} #main .s2 .lstArea .lst05 .btns {background: #7A9A8B} #main .s2 .lstArea .lst06 .btns {background: #3A8D83} #main .s2 .lstArea .lst:hover .inn {box-shadow: 0 0 2.4rem rgba(0,0,0,0.36); transform: rotate(-8deg);} #main .s2 .lstArea .lst01:hover .inn {border: 1px solid #59270F} #main .s2 .lstArea .lst02:hover .inn {border: 1px solid #B65E3C} #main .s2 .lstArea .lst03:hover .inn {border: 1px solid #C98A4A} #main .s2 .lstArea .lst04:hover .inn {border: 1px solid #2D493D} #main .s2 .lstArea .lst05:hover .inn {border: 1px solid #7A9A8B} #main .s2 .lstArea .lst06:hover .inn {border: 1px solid #3A8D83} #main .s2 .lstArea .lst01:hover .tit {color: #59270F} #main .s2 .lstArea .lst02:hover .tit {color: #B65E3C} #main .s2 .lstArea .lst03:hover .tit {color: #C98A4A} #main .s2 .lstArea .lst04:hover .tit {color: #2D493D} #main .s2 .lstArea .lst05:hover .tit {color: #7A9A8B} #main .s2 .lstArea .lst06:hover .tit {color: #3A8D83} #main .s2 .lstArea .lst01:hover .inn {border: 1px solid} @media all and (max-width: 880px){ #main .s2 {} #main .s2::before {background: url('../img/main/s2_bg_mo.png') center / contain no-repeat;} #main .s2 .inner {max-width: var(--innerMo); padding: 8.2rem 0 8rem;} #main .s2 .titArea {margin-bottom: 4rem;} #main .s2 .titArea .subt {font-size: 1.6rem;} #main .s2 .titArea .tit {font-size: 2.8rem; line-height: 1.2; padding-top: 0.8rem;} #main .s2 .lstArea {gap: 2.6rem;} #main .s2 .lstArea .lst {width: 100%; padding: 0} #main .s2 .lstArea .lst .box {border-radius: 2.8rem} #main .s2 .lstArea .lst .inn {box-shadow: 0 0 2.4rem rgba(0,0,0,0.36); padding: 3.5rem 2rem; align-items: baseline; border-radius: 2.8rem; bottom: -1rem;} #main .s2 .lstArea .lst .tit {font-size: 2.2rem; line-height: 1.3; padding-top: 0.9rem;} #main .s2 .lstArea .lst .wrt {font-size: 1.6rem; margin: 0.2rem 0 0 0; min-height: 4rem;} #main .s2 .lstArea .lst .img {position: absolute; width: 8.7rem; right: 2rem} #main .s2 .lstArea .lst .btns {font-size: 1.5rem; padding: 0.65rem 1.2rem; margin-top: 2rem} #main .s2 .lstArea .lst01 .inn {border: 1px solid #59270F} #main .s2 .lstArea .lst02 .inn {border: 1px solid #B65E3C} #main .s2 .lstArea .lst03 .inn {border: 1px solid #C98A4A} #main .s2 .lstArea .lst04 .inn {border: 1px solid #2D493D} #main .s2 .lstArea .lst05 .inn {border: 1px solid #7A9A8B} #main .s2 .lstArea .lst06 .inn {border: 1px solid #3A8D83} #main .s2 .lstArea .lst01 .tit {color: #59270F} #main .s2 .lstArea .lst02 .tit {color: #B65E3C} #main .s2 .lstArea .lst03 .tit {color: #C98A4A} #main .s2 .lstArea .lst04 .tit {color: #2D493D} #main .s2 .lstArea .lst05 .tit {color: #7A9A8B} #main .s2 .lstArea .lst06 .tit {color: #3A8D83} #main .s2 .lstArea .lst:hover .inn {transform: rotate(0); } } #main .s3 {} #main .s3::before {content: ''; display: block; position: absolute; width: 100%; height: calc(100% + 14rem); top: 0; background: url('../img/main/s3_bg.png') top center/cover no-repeat;} #main .s3 .inner {padding: 16rem 0 19rem} #main .s3 .ongi {right: 6%; top: -2%;} #main .s3 .titArea {margin-bottom: 5.2rem;} #main .s3 .titArea .subt {} #main .s3 .titArea .tit {padding-top: 0.8rem;} #main .s3 .utilArea {margin-bottom: 4rem;} #main .s3 .utilArea .tab {gap: 0.8rem;} #main .s3 .utilArea .tab li {padding: 1.2rem 3.6rem; cursor: pointer; background: #fff; border-radius: 8rem; border: 1px solid #ccc; transition: 0.1s;} #main .s3 .utilArea .tab li:hover {background: var(--fcb); border: 1px solid var(--fcb); color: #fff; font-weight: bold; box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.24)} #main .s3 .utilArea .tab li.on {background: var(--fcb); border: 1px solid var(--fcb); color: #fff; font-weight: bold; box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.24)} #main .s3 .utilArea .more {transition: 0.2s;} #main .s3 .utilArea .more:hover {transform: rotate(90deg);} #main .s3 .lstArea {} #main .s3 .lstArea .lst {background: #EDE7D8; border: 1px solid #EDE7D8; border-radius: 8rem; transition: 0.2s;} #main .s3 .lstArea .lst + .lst {margin-top: 2rem;} #main .s3 .lstArea .lst .inn {padding: 3.2rem;} #main .s3 .lstArea .lst .cate {padding: 0.6rem 1.2rem; border-radius: 10rem; transition: 0.2s;} #main .s3 .lstArea .lst .subj {padding-left: 2rem; transition: 0.2s;} #main .s3 .lstArea .lst .date {margin-left: auto} #main .s3 .lstArea .lst:hover {background: #fff; box-shadow: 0 0.6rem 1.4rem rgba(0,0,0,0.2)} #main .s3 .lstArea .lst:hover .subj {font-weight: bold;} #main .s3 .lstArea .lstA:hover {border: 1px solid var(--fcb)} #main .s3 .lstArea .lstA:hover .cate {background: #C98A4A; color: #fff; font-weight: bold} #main .s3 .lstArea .lstB:hover {border: 1px solid var(--fcg)} #main .s3 .lstArea .lstB:hover .cate {background: #7A9A8B; color: #fff; font-weight: bold;} @media all and (max-width: 880px){ #main .s3 {} #main .s3::before {background: url('../img/main/s3_bg_mo.png') center/contain no-repeat;} #main .s3 .inner {max-width: var(--innerMo); padding: 8rem 0;} #main .s3 .ongi {width: 7.1rem; top: 0%;} #main .s3 .titArea {margin-bottom: 4rem;} #main .s3 .titArea .subt {font-size: 1.6rem;} #main .s3 .titArea .tit {font-size: 2.8rem; line-height: 1.2} #main .s3 .utilArea {margin-bottom: 3.2rem;} #main .s3 .utilArea .tab {font-size: 1.6rem; gap: 0.4rem;} #main .s3 .utilArea .tab li {padding: 0.8rem 0; text-align: center; width: 9.2rem;} #main .s3 .utilArea .tab li.on {} #main .s3 .utilArea .more {width: 4rem;} #main .s3 .lstArea {} #main .s3 .lstArea .lst {border-radius: 1.2rem;} #main .s3 .lstArea .lst + .lst {margin-top: 1.6rem;} #main .s3 .lstArea .lst .inn {padding: 2rem; flex-direction: column; align-items: baseline;} #main .s3 .lstArea .lst .cate {font-size: 1.5rem; padding: 0.45rem 1.2rem;} #main .s3 .lstArea .lst .subj {padding: 0; font-size: 1.8rem; padding: 0.4rem 0 1.2rem;} #main .s3 .lstArea .lst .date {margin: 0; font-size: 1.5rem;} } /**======== 서브비쥬얼 ========**/ #visual {} #visual .bgArea {} #visual .titArea {padding-top: 1.2rem;} #visual .titArea .subt {} #visual .titArea .subt i {padding: 0 0.9rem} #visual .titArea .tit {line-height: 1.4; margin-top: 1.2rem} #visual .menuArea {} #visual .menu {padding: 1.2rem 1.6rem; background: #fff; border-radius: 10rem; gap: 1.2rem; width: max-content; box-shadow: 0 -1.2rem 1.6rem rgba(0,0,0,0.12)} #visual .menu li {} #visual .menu li a {display: inline-block; padding: 1.25rem 2.4rem; border-radius: 8rem; transition: 0.1s;} #visual .menu li:hover a {font-weight: bold; background: #C9D7CF; color: var(--fcg);} #visual .menu li.on a {font-weight: bold; background: var(--fcg); color: #fff;} @media all and (max-width: 880px){ #visual {overflow: hidden;} #visual .bgArea {} #visual .titArea {padding-top: 3rem;} #visual .titArea .subt {font-size: 1.3rem;} #visual .titArea .tit {font-size: 3.2rem; margin-top: 0.8rem} #visual .menuArea {display: none;} } /**======== 공통 ========**/ .content {} .content .inner {padding: 10rem 0 20rem} @media all and (max-width: 880px){ .content {overflow: hidden;} .content .inner {max-width: var(--innerMo); padding: 4rem 0 8rem} } /**======================== 울산옹기축제 ========================**/ #sub11 {} #sub11 .s1 {padding: 20rem 0 24rem;} #sub11 .s1::before {content: ''; display: block; position: absolute; width: 100%; height: 42rem; top: 0; left: 0; background: url('../img/sub/sb11_top_bg.png') center/contain no-repeat} #sub11 .s1::after {content: ''; display: block; position: absolute; width: 100%; height: 42rem; bottom: 0; left: 0; background: url('../img/sub/sb11_bot_bg.png') center/contain no-repeat} #sub11 .s1 .title {margin-bottom: 20rem; z-index: 1} #sub11 .s1 .title .c1 {color: #C98A4A} #sub11 .s1 .title .c2 {color: #B65E3C} #sub11 .s1 .lstArea {z-index: 1} #sub11 .s1 .lstArea .lst {gap: 13.6rem;} #sub11 .s1 .lstArea .lst + .lst {margin-top: 10rem;} #sub11 .s1 .lstArea .lst .thumb {width: 100%; max-width: 66rem; flex-shrink: 0} #sub11 .s1 .lstArea .lst .txts {} #sub11 .s1 .lstArea .lst .txts .ico {} #sub11 .s1 .lstArea .lst .txts .tit {padding: 0 2.8rem; margin: 0.4rem 0 2.4rem} #sub11 .s1 .lstArea .lst .txts .wrt {padding: 0 2.8rem;} #sub11 .s2 {padding-bottom: 20rem;} #sub11 .s2 .banner {height: 58rem; background: url('../img/sub/sb11_banner.jpg') center/cover no-repeat; background-attachment: fixed;} #sub11 .s2 .cont {margin-top: 12rem;} #sub11 .s2 .cont .txtArea {margin-bottom: 8rem;} #sub11 .s2 .cont .txtArea .ico {} #sub11 .s2 .cont .txtArea .subt {margin-top: 2.4rem;} #sub11 .s2 .cont .txtArea .subt span {color: #5C3914} #sub11 .s2 .cont .txtArea .tit {margin-bottom: 2.4rem;} #sub11 .s2 .cont .txtArea .tit span {color: #F6A100} #sub11 .s2 .cont .txtArea .wrt {} #sub11 .s2 .cont .lstArea {gap: 1.6rem;} #sub11 .s2 .cont .lstArea .lst {width: calc((100% - 3.2rem) / 3); border-radius: 2rem; border: 1px solid #E0E0E0; padding: 4rem 0;} #sub11 .s2 .cont .lstArea .lst .ico {} #sub11 .s2 .cont .lstArea .lst .tit {padding: 1.6rem 0 0.8rem} #sub11 .s2 .cont .lstArea .lst .wrt {} @media all and (max-width: 880px){ #sub11 {} #sub11 .s1 {padding: 5rem 0 8rem;} #sub11 .s1::before {display: none} #sub11 .s1::after {display: none} #sub11 .s1 .title {font-size: 2.8rem; margin-bottom: 6rem;} #sub11 .s1 .lstArea {max-width: var(--innerMo)} #sub11 .s1 .lstArea .lst {flex-direction: column; gap: 2rem;} #sub11 .s1 .lstArea .lst:nth-child(2) {flex-direction: column-reverse;} #sub11 .s1 .lstArea .lst + .lst {margin-top: 6rem;} #sub11 .s1 .lstArea .lst .thumb {} #sub11 .s1 .lstArea .lst .txts {} #sub11 .s1 .lstArea .lst .txts .ico {width: 2.4rem;} #sub11 .s1 .lstArea .lst .txts .tit {padding: 0; font-size: 2.2rem; margin: 1rem 0;} #sub11 .s1 .lstArea .lst .txts .wrt {padding: 0; font-size: 1.4rem;} #sub11 .s2 {padding-bottom: 16rem;} #sub11 .s2 .banner {height: 28rem; background-attachment: inherit;} #sub11 .s2 .cont {max-width: var(--innerMo); margin-top: 6rem;} #sub11 .s2 .cont .txtArea {margin-bottom: 6rem;} #sub11 .s2 .cont .txtArea .ico {width: 5rem;} #sub11 .s2 .cont .txtArea .subt {font-size: 2.2rem; margin-top: 2rem;} #sub11 .s2 .cont .txtArea .tit {margin-bottom: 2rem; font-size: 2.2rem;} #sub11 .s2 .cont .txtArea .wrt {font-size: 1.4rem;} #sub11 .s2 .cont .lstArea {flex-direction: column;} #sub11 .s2 .cont .lstArea .lst {width: 100%; padding: 2rem 0;} #sub11 .s2 .cont .lstArea .lst .ico {width: 3rem;} #sub11 .s2 .cont .lstArea .lst .tit {font-size: 2rem;} #sub11 .s2 .cont .lstArea .lst .wrt {font-size: 1.4rem;} } #sub13 {} #sub13 .cont {border-radius: 4rem; min-height: 79rem; overflow: hidden;} #sub13 .cont .txt {} @media all and (max-width: 880px){ #sub13 {} #sub13 .cont {min-height: 40vh; border-radius: 3rem;} #sub13 .cont .txt {font-size: 2.4rem; width: 100%;} } #sub14 {} #sub14 .inner {} #sub14 .panel {align-items: flex-start; justify-content: space-between; padding-bottom: 28rem} #sub14 .panel::before {content: ''; display: block; position: absolute; height: 93%; background: #E0E0E0; width: 1px; left: 50%; left: 44.8%; top: 9%;} #sub14 .fixArea {width: 62rem; position: sticky; top: 18%;} #sub14 .fixArea .ong {margin-bottom: 6rem;} #sub14 .fixArea .btns {gap: 1.2rem;} #sub14 .fixArea .btns .btn {flex: 1; height: 7.2rem; border-radius: 8rem; justify-content: center; gap: 1rem; font-weight: 600; transition: 0.2s;} #sub14 .fixArea .btns .btn img {width: 3.2rem;} #sub14 .fixArea .btns .btnA {background: #7a9a8b;} #sub14 .fixArea .btns .btnA:hover {background: var(--fcg);} #sub14 .fixArea .btns .btnB {background: #b65e3c;} #sub14 .fixArea .btns .btnB:hover {background: var(--fcb)} #sub14 .contArea {width: 77.2rem;} #sub14 .txtArea {margin-bottom: 23rem; padding-top: 11rem} #sub14 .txtArea .tit {margin-bottom: 2.4rem; line-height: 1.4; letter-spacing: -0.072rem;} #sub14 .txtArea .wrt {line-height: 1.5; letter-spacing: -0.036rem;} #sub14 .lstArea {} #sub14 .lstArea .lst {} #sub14 .lstArea .lst + .lst {margin-top: 12rem;} #sub14 .lstArea .lst .ic {width: 3.5rem; display: block; margin-bottom: 0.4rem;} #sub14 .lstArea .lst .tit {line-height: 1.4; padding-left: 2.4rem; margin-bottom: 4rem; letter-spacing: -0.072rem;} #sub14 .lstArea .lst .img {padding-left: 2.4rem;} #sub14 .openBox {background: #f7f7f7; border: 1px solid #e0e0e0; border-radius: 1.2rem; padding: 3.2rem; gap: 4rem;} #sub14 .openBox img {width: 21.2rem; flex-shrink: 0;} #sub14 .openBox .txts {display: flex; flex-direction: column; gap: 0.2rem;} #sub14 .openBox .txts .tit {color: #212121;} #sub14 .openBox .txts .wrt {color: #363636;} @media all and (max-width: 880px){ #sub14 {} #sub14 .inner {} #sub14 .panel {flex-direction: column; gap: 6rem; padding-bottom: 0} #sub14 .panel::before {display: none;} #sub14 .fixArea {width: 100%; position: static;} #sub14 .fixArea .ong {margin-bottom: 3rem;} #sub14 .fixArea .btns {flex-direction: column; gap: 1rem;} #sub14 .fixArea .btns .btn {height: 6rem; border-radius: 6rem; font-size: 1.6rem; flex: auto;} #sub14 .fixArea .btns .btn img {width: 2.4rem} #sub14 .contArea {width: 100%;} #sub14 .txtArea {margin-bottom: 6rem; padding: 0} #sub14 .txtArea .tit {margin-bottom: 2rem; font-size: 2.6rem;} #sub14 .txtArea .wrt {font-size: 1.5rem;} #sub14 .lstArea {} #sub14 .lstArea .lst {} #sub14 .lstArea .lst + .lst {margin-top: 8rem;} #sub14 .lstArea .lst .ic {width: 2.8rem;} #sub14 .lstArea .lst .tit {padding-left: 1.6rem; margin-bottom: 2rem; font-size: 2.4rem;} #sub14 .lstArea .lst .img {padding-left: 1.6rem;} #sub14 .openBox {margin-top: 8rem; flex-direction: column; gap: 1.4rem; padding: 2rem; border-radius: 1rem; align-items: flex-start;} #sub14 .openBox img {width: 16rem;} #sub14 .openBox .txts {gap: 0.4rem;} #sub14 .openBox .txts .tit {font-size: 1.6rem;} #sub14 .openBox .txts .wrt {font-size: 1.2rem;} } #sub15 {z-index: 1} #sub15 .titArea {} #sub15 .titArea .inner {padding: 10rem 0;} #sub15 .titArea .ico {} #sub15 .titArea .subt {color: #5C3914; margin-top: 2rem;} #sub15 .titArea .tit {margin-bottom: 4rem;} #sub15 .titArea .wrt {} #sub15 .titArea .wrt b {font-weight: 800;} #sub15 .villageSwiper {overflow: hidden;} #sub15 .contArea {} #sub15 .contArea .inner {gap: 2.4rem;} #sub15 .contArea .tits {width: 100%} #sub15 .contArea .tits .tit {margin-bottom: 6rem;} #sub15 .contArea .tits .tit span {color: #F6A100} #sub15 .contArea .tits .linkBtn {background: var(--fcg); display: inline-flex; gap: 1rem; padding: 2.4rem 3.2rem; border-radius: 8rem; transition: 0.2s;} #sub15 .contArea .tits .linkBtn:hover {background: var(--fcb)} #sub15 .contArea .wrts {width: 100%} #sub15 .contArea .moLinkBtn {display: none;} #sub15Bg {bottom: 8%;} @media all and (max-width: 880px){ #sub15 {} #sub15 .titArea {} #sub15 .titArea .inner {padding: 4rem 0 6rem;} #sub15 .titArea .ico {width: 6rem;} #sub15 .titArea .subt {font-size: 1.6rem; margin-top: 1.6rem;} #sub15 .titArea .tit {font-size: 4rem; margin-bottom: 2.8rem;} #sub15 .titArea .wrt {font-size: 1.4rem;} #sub15 .villageSwiper {} #sub15 .contArea {} #sub15 .contArea .inner {flex-direction: column; gap: 0;} #sub15 .contArea .tits {} #sub15 .contArea .tits .tit {font-size: 2.8rem; margin-bottom: 2rem;} #sub15 .contArea .tits .linkBtn {display: none} #sub15 .contArea .wrts {font-size: 1.6rem; margin-bottom: 4rem;} #sub15 .contArea .moLinkBtn {background: var(--fcg); display: inline-flex; gap: 1rem; padding: 2rem 0; width: 100%; border-radius: 8rem; display: flex; justify-content: center;} #sub15 .contArea .moLinkBtn img {width: 2rem;} } #sub16 {} #sub16 .inner {} #sub16 .mapArea {border-radius: 4rem; overflow: hidden; margin-bottom: 8rem;} #sub16 .mapArea .map {} #sub16 .panel {} #sub16 .panel + .panel {padding-top: 8rem; margin-top: 8rem; background: url('../img/sub/sb16_line.png') top / contain no-repeat;} #sub16 .panel .title {} #sub16 .pan01 .cont {margin-top: 0.8rem;} #sub16 .pan01 .cont .tit {margin-bottom: 3.2rem;} #sub16 .pan01 .cont .sns {gap: 4rem;} #sub16 .pan01 .cont .sns .lst {width: 100%} #sub16 .pan01 .cont .sns .lst a {padding: 1.6rem 2.4rem; border: 1px solid #E0E0E0; border-radius: 0.4rem;} #sub16 .pan01 .cont .sns .lst:hover {background: #F7F7F7;} #sub16 .pan01 .cont .sns .lst01:hover a {border: 1px solid #00C300; color: #00C300; font-weight: bold} #sub16 .pan01 .cont .sns .lst02:hover a {border: 1px solid #3C1E1E; color: #3C1E1E; font-weight: bold} #sub16 .pan01 .cont .sns .lst03:hover a {border: 1px solid #4285F4; color: #4285F4; font-weight: bold} #sub16 .pan02 .cont {margin-top: 3.2rem;} #sub16 .pan02 .cont .lst {gap: 2rem;} #sub16 .pan02 .cont .lst + .lst {margin-top: 2.4rem;} #sub16 .pan02 .cont .lst .tit {width: 7.6rem;} #sub16 .pan02 .cont .lst .txt {line-height: 1.8;} #sub16 .pan02 .cont .lst .txt i {padding: 0 1.3rem;} #sub16 .pan03 .cont {margin-top: 5rem;} #sub16 .pan03 .cont .img {} #sub16 .pan04 .cont {margin-top: 3.2rem;} #sub16 .pan04 .cont .lst {gap: 2.4rem;} #sub16 .pan04 .cont .lst + .lst {margin-top: 2.4rem;} #sub16 .pan04 .cont .lst .opt {padding: 0.8rem 1.6rem; border: 2px solid var(--fcb); border-radius: 10rem; flex-shrink: 0} #sub16 .pan04 .cont .lst .txt {} #sub16 .pan04 .cont .lst .txt i {padding: 0 1.5rem;} #sub16 .pan04 .cont .lst .txt .img {} #sub16 .pan04 .cont .lst03 {align-items: flex-start;} #sub16 .inquiry {margin-top: 8rem; background: #FAFAFA; border-radius: 1.2rem; padding: 2.4rem 3.2rem; gap: 2.4rem;} #sub16 .inquiry span {} #sub16 .inquiry span.opt {background: #F0F0F0; border-radius: 10rem; padding: 0.8rem 2rem;} @media all and (max-width: 880px){ #sub16 {} #sub16 .inner {} #sub16 .mapArea {margin-bottom: 4rem} #sub16 .mapArea .map {} #sub16 .panel {} #sub16 .panel + .panel {margin-top: 4rem; padding-top: 4rem; background: url('../img/sub/sb16_line_mo.png') top / contain no-repeat;} #sub16 .panel .title {font-size: 2.8rem;} #sub16 .panel .cont {} #sub16 .pan01 .cont .tit {font-size: 2rem; margin-bottom: 2.4rem;} #sub16 .pan01 .cont .sns {flex-direction: column; gap: 1.2rem} #sub16 .pan01 .cont .sns .lst {} #sub16 .pan01 .cont .sns .lst a {font-size: 1.6rem;} #sub16 .pan02 .cont {margin-top: 2.4rem;} #sub16 .pan02 .cont .lst {flex-direction: column; gap: 0.8rem; align-items: baseline;} #sub16 .pan02 .cont .lst + .lst {margin-top: 3.2rem;} #sub16 .pan02 .cont .lst .txt {font-size: 1.7rem;} #sub16 .pan02 .cont .lst .txt i {} #sub16 .pan03 .cont {margin-top: 2.4rem} #sub16 .pan03 .cont .img {} #sub16 .pan04 .cont {margin-top: 3.2rem} #sub16 .pan04 .cont .lst {flex-direction: column; gap: 1.2rem; align-items: baseline;} #sub16 .pan04 .cont .lst + .lst {margin-top: 3.2rem;} #sub16 .pan04 .cont .lst .opt {padding: 0.6rem 1.6rem; font-size: 1.6rem;} #sub16 .pan04 .cont .lst .txt {font-size: 1.8rem;} #sub16 .pan04 .cont .lst .txt i {display: none;} #sub16 .pan04 .cont .lst .txt .img {} #sub16 .inquiry {flex-direction: column; gap: 0.8rem; align-items: baseline; padding: 2rem; font-size: 1.6rem; margin: 6rem 0 8rem;} #sub16 .inquiry span {} #sub16 .inquiry span.opt {padding: 0.6rem 2rem;} } #sub17 {} #sub17 .inner {} #sub17 .lstArea {gap: 10rem 4rem;} #sub17 .lstArea .lst {width: calc((100% - 8rem) / 3); border-radius: 4rem; overflow: hidden;} #sub17 .lstArea .lst::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url('../img/sub/village_bg.png') center/cover; transition: 0.4s; opacity: 0} #sub17 .lstArea .lst a {padding: 2rem 2rem 4rem; display: block;} #sub17 .lstArea .lst .thumb {} #sub17 .lstArea .lst .thumb > img {border-radius: 2rem} #sub17 .lstArea .lst .arr {position: absolute; right: 0; bottom: 0;} #sub17 .lstArea .lst .arr::before {content: ''; display: block; position: absolute; width: calc(100% + 2.4rem); height: calc(100% + 2.4rem); background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 1.6rem; transition: 0.4s;} #sub17 .lstArea .lst .arr .ico {padding: 1.6rem; background: var(--fcg); border-radius: 0.4rem;} #sub17 .lstArea .lst .arr .ico img {transform-origin: left center; transform: scale(0.715); transition: 0.4s; right: -0.2rem} #sub17 .lstArea .lst .txts {} #sub17 .lstArea .lst .txts .tit {margin: 2.4rem 0 0.4rem; transition: 0.4s} #sub17 .lstArea .lst .txts .wrt {transition: 0.4s} #sub17 .lstArea .lst:hover {} #sub17 .lstArea .lst:hover::before {opacity: 1;} #sub17 .lstArea .lst:hover .arr {} #sub17 .lstArea .lst:hover .arr::before {background: var(--fcg);} #sub17 .lstArea .lst:hover .arr .ico img {transform: scale(1); right: 0} #sub17 .lstArea .lst:hover .txts .tit {color: #fff;} #sub17 .lstArea .lst:hover .txts .wrt {color: #fff; opacity: 0.8} @media all and (max-width: 880px){ #sub17 {} #sub17 .inner {} #sub17 .lstArea {gap: 6rem 0.4rem} #sub17 .lstArea .lst {width: calc((100% - 0.4rem) / 2); border-radius: 0;} #sub17 .lstArea .lst::before {display: none;} #sub17 .lstArea .lst a {padding: 0 1rem} #sub17 .lstArea .lst .thumb {} #sub17 .lstArea .lst .thumb > img {border-radius: 1rem} #sub17 .lstArea .lst .arr {} #sub17 .lstArea .lst .arr::before {width: calc(100% + 1.2rem); height: calc(100% + 1.2rem); border-radius: 0.6rem;} #sub17 .lstArea .lst .arr .ico {padding: 1rem;} #sub17 .lstArea .lst .arr .ico img {transform: none; width: 1.4rem; right: auto} #sub17 .lstArea .lst .txts {} #sub17 .lstArea .lst .txts .tit {font-size: 1.8rem; margin: 1.2rem 0 0.6rem;} #sub17 .lstArea .lst .txts .wrt {font-size: 1.4rem;} #sub17 .lstArea .lst:hover {} #sub17 .lstArea .lst:hover::before {opacity: 0;} #sub17 .lstArea .lst:hover .arr {} #sub17 .lstArea .lst:hover .arr::before {background: #fff;} #sub17 .lstArea .lst:hover .arr .ico img {transform: scale(0.715); right: -0.2rem} #sub17 .lstArea .lst:hover .txts .tit {color: #121212;} #sub17 .lstArea .lst:hover .txts .wrt {color: #121212; opacity: 1} } /**======================== 2026 울산옹기축제 ========================**/ #sub21 {} #sub21 .s1 {padding-top: 10rem; z-index: 1; overflow: hidden;} #sub21 .s1 .cont {} #sub21 .s1 .cont .tit {width: 38rem} #sub21 .s1 .cont .wrt {margin: 2.4rem 0 6rem;} #sub21 .s1 .cont .poster {z-index: 1;} #sub21 .s1 .flow {color: #7A9A8B; width: 100%; bottom: 5%; opacity: 0.1;} #sub21 .s2 {} #sub21 .s2::before {content: ''; display: block; position: absolute; width: 100%; background: #F5FDF3; height: 93.4rem; bottom: -8rem; border-radius: 10rem 10rem 0 0} #sub21 .s2 .cont {padding: 6rem 0 12rem;} #sub21 .s2 .cont .ongi {top: -16rem; right: 14rem; z-index: 2;} #sub21 .s2 .cont .title {margin-bottom: 2.4rem;} #sub21 .s2 .cont .lst {gap: 2rem 1.6rem;} #sub21 .s2 .cont .lst li {background: #fff; width: calc((100% - 3.2rem) / 3); padding: 5.4rem 0; border-radius: 2rem;} #sub21 .s2 .cont .lst li .ico {} #sub21 .s2 .cont .lst li .tit {padding: 1.6rem 0 0.8rem} #sub21 .s2 .cont .lst li .wrt {height: 5.4rem; display: flex; align-items: center;} @media all and (max-width: 880px){ #sub21 {overflow: visible;} #sub21 .s1 {padding-bottom: 10.6rem; padding-top: 4rem;} #sub21 .s1 .cont {max-width: var(--innerMo); margin: 0 auto} #sub21 .s1 .cont .tit {width: 22.8rem;} #sub21 .s1 .cont .wrt {font-size: 1.8rem; text-align: center; margin: 2rem 0 4rem;} #sub21 .s1 .cont .poster {} #sub21 .s1 .flow {font-size: 5rem; bottom: 0} #sub21 .s2 {} #sub21 .s2::before {height: calc(100% + 10.8rem); top: 0; border-radius: 4rem 4rem 0 0;} #sub21 .s2 .cont {max-width: var(--innerMo); padding: 6rem 0 10rem} #sub21 .s2 .cont .ongi {width: 8.6rem; right: 0; top: -7rem} #sub21 .s2 .cont .title {font-size: 2.8rem;} #sub21 .s2 .cont .lst {gap: 1.2rem;} #sub21 .s2 .cont .lst li {width: 100%; height: 18rem; padding: 2.2rem 0; justify-content: center;} #sub21 .s2 .cont .lst li .ico {max-width: 4rem;} #sub21 .s2 .cont .lst li .tit {font-size: 2rem} #sub21 .s2 .cont .lst li .wrt {height: auto; font-size: 1.6rem;} #sub21 .s2 .cont .lst li:last-child .ico {max-width: 4.7rem;} } #siteMap {} #siteMap .panel {} #siteMap .panel + .panel {margin-top: 16.6rem;} #siteMap .panel .title {gap: 1.2rem; margin-bottom: 4rem;} #siteMap .panel .title img {} #siteMap .panel .lstArea {gap: 4rem;} #siteMap .panel .lstArea .lst {width: calc((100% - 8rem) / 3); border: 1px solid #E0E0E0; border-radius: 1.2rem; padding: 3.2rem; overflow: hidden; transition: 0.1s;} #siteMap .panel .lstArea .lst::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: url('../img/sub/sitemap_bg.png') center/cover; left: 0; top: 0; opacity: 0; transition: 0.1s; border: 1px solid var(--fcg)} #siteMap .panel .lstArea .lst a {} #siteMap .panel .lstArea .lst .tit {transition: 0.1s;} #siteMap .panel .lstArea .lst .wrt {margin: 0.4rem 0 1.6rem; transition: 0.1s;} #siteMap .panel .lstArea .lst .tag {transition: 0.1s;} #siteMap .panel .lstArea .lst:hover {box-shadow: 0 0.6rem 1.2rem rgba(0,0,0,0.32); border: 1px solid var(--fcg)} #siteMap .panel .lstArea .lst:hover::before {opacity: 1;} #siteMap .panel .lstArea .lst:hover a {} #siteMap .panel .lstArea .lst:hover .tit {color: #fff} #siteMap .panel .lstArea .lst:hover .wrt {color: #fff; opacity: 0.9} #siteMap .panel .lstArea .lst:hover .tag {color: #fff; opacity: 0.8} @media all and (max-width: 880px){ #siteMap {} #siteMap .panel {} #siteMap .panel + .panel {margin-top: 10rem;} #siteMap .panel .title {font-size: 3.2rem; margin-bottom: 2rem; gap: 0.8rem} #siteMap .panel .title img {width: 3rem;} #siteMap .panel .lstArea {gap: 1rem;} #siteMap .panel .lstArea .lst {width: 100%; padding: 2rem;} #siteMap .panel .lstArea .lst::before {} #siteMap .panel .lstArea .lst a {} #siteMap .panel .lstArea .lst .tit {font-size: 1.8rem;} #siteMap .panel .lstArea .lst .wrt {font-size: 1.4rem; margin: 0.6rem 0 1rem} #siteMap .panel .lstArea .lst .tag {font-size: 1.4rem;} } /**======== 게시판 ========**/ .boardTop {margin-bottom: 6rem} .boardTop .count {} .boardTop .count b {color: #D97C5B;} .boardTop .search {gap: 0.4rem; font-size: 1.6rem;} .boardTop .search .slc {height: 5.2rem; padding: 0 0.8rem; border: 1px solid #888888; border-radius: 0.4rem; min-width: 12rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../img/sub/ic_arr_down.svg') right 1.2rem center / 2rem 2rem no-repeat; font-family: inherit; font-size: inherit; color: #121212;} .boardTop .search .ipt {border: 1px solid #888888; border-radius: 0.4rem; min-width: 32rem; padding: 0 0.8rem;} .boardTop .search .ipt::placeholder {color: #aaa} .boardTop .search .btn {color: #fff; background: #212121; border-radius: 0.4rem; padding: 0 2.6rem;} @media all and (max-width: 880px){ .boardTop {flex-direction: column-reverse; align-items: baseline; gap: 2rem; margin-bottom: 1rem;} .boardTop .count {font-size: 1.4rem;} .boardTop .search {font-size: 1.4rem; width: 100%} .boardTop .search .slc {height: 4.4rem; min-width: 8rem; flex-shrink: 0} .boardTop .search .ipt {width: 100%; min-width: auto} .boardTop .search .btn {padding: 0 1.6rem; flex-shrink: 0} } .schdArea {gap: 2.6rem;} .schdArea .contArea {width: 100%} .boardSchd {width: 36.2rem; flex-shrink: 0;} .boardSchd .title {margin-bottom: 6rem;} .boardSchd .title span {color: #D9A441} .boardSchd .lstArea {display: flex; flex-direction: column; align-items: baseline;} .boardSchd .lstArea .lst {display: inline-block; border: 1px solid #ccc; border-radius: 8rem; padding: 1.2rem 0; width: 17.4rem; text-align: center; cursor: pointer;} .boardSchd .lstArea .lst + .lst {margin-top: 1.2rem;} .boardSchd .lstArea .lst.on {background: var(--fcb); font-weight: bold; color: #fff; border: 1px solid var(--fcb); box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.24)} @media all and (max-width: 880px){ .schdArea {flex-direction: column; gap: 4rem;} .schdArea .contArea {} .boardSchd {width: 100%} .boardSchd .title {font-size: 2.8rem; margin-bottom: 1.5rem;} .boardSchd .lstArea {flex-direction: row; flex-wrap: wrap; gap: 0.4rem; font-size: 1.4rem;} .boardSchd .lstArea .lst {width: calc((100% - 0.8rem) / 3); padding: 0.8rem 0;} .boardSchd .lstArea .lst + .lst {margin: 0} .boardSchd .lstArea .lst.on {} } .boardTab {border: 1px solid #E0E0E0; border-radius: 10rem; padding: 1.2rem; gap: 2rem; flex-wrap: wrap; margin-bottom: 4rem;} .boardTab li {width: calc((100% - 12rem) / 7)} .boardTab li a {font-size: 1.8rem; color: #666666; display: block; text-align: center; padding: 1.2rem 0; border-radius: 10rem; transition: 0.1s;} .boardTab li:hover a {background: #F2EEEC; font-weight: 600; color: #59270F} .boardTab li.on a {background: var(--fcb); color: #fff; font-weight: bold; box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.24)} @media all and (max-width: 880px){ .boardTab {gap: 0.8rem; border-radius: 0; padding: 0; border: 0; flex-wrap: nowrap; overflow: scroll; width: 100%; margin: 2rem 0;} .boardTab li {width: 8rem; flex: 0 0 auto; white-space: nowrap;} .boardTab li a {font-size: 1.4rem; padding: 1.2rem 0; background: #F2EEEC; font-weight: 600; color: #59270F; line-height: 1} .boardTab li.on a {box-shadow: none;} } .boardBasic {border: 1px solid #333333; border-right: 0; border-left: 0; color: #363636} .boardBasic .lst {font-size: 1.8rem;} .boardBasic .lst + .lst {border-top: 1px solid #E0E0E0;} .boardBasic .lst .inn {padding: 0 3.2rem;} .boardBasic .lst .inn::before {content: ''; display: block; position: absolute; width: 100%; height: calc(100% - 0.2rem); border: 1px solid #333; border-radius: 0.4rem; top: 50%; transform: translateY(-50%); transition: 0.1s; opacity: 0; left: 0; z-index: 1; background: #F8F8F8; box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2)} .boardBasic .lst .num {flex-shrink: 0; z-index: 1} .boardBasic .lst .num span {display: inline-block; padding: 0.25rem 1.2rem; border-radius: 10rem; min-width: 5.2rem; text-align: center;} .boardBasic .lst .subj {padding: 2.65rem 1.6rem; width: 100%; z-index: 1} .boardBasic .lst .util {font-size: 1.6rem; margin-left: auto; gap: 5.2rem; flex-shrink: 0; z-index: 1} .boardBasic .lst .util .file {} .boardBasic .lst .util .date {gap: 0.8rem} .boardBasic .lst .util .view {gap: 0.8rem} .boardBasic .lst .util span + span::before {content: ''; display: block; position: absolute; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #888; left: -2.5rem;} .boardBasic .notc {background: #FDFBF3;} .boardBasic .notc .inn::before {background: #FDFBF3; border: 1px solid var(--fcb)} .boardBasic .notc .num span {background: var(--fcb); color: #fff; font-weight: 600; font-size: 1.6rem;} .boardBasic .notc .subj {font-weight: bold;} .boardBasic .lst:hover .inn::before {opacity: 1;} .boardBasic .lst:hover .subj {font-weight: bold} .boardBasic .notc:hover .subj {color: var(--fcb)} @media all and (max-width: 880px){ .boardBasic {} .boardBasic .lst {} .boardBasic .lst .inn {flex-direction: column; align-items: baseline; padding: 1.6rem;} .boardBasic .lst .inn::before {display: none !important} .boardBasic .lst .num {} .boardBasic .lst .num span {font-size: 1.4rem; min-width: auto; padding: 0; font-weight: bold;} .boardBasic .lst .subj {padding: 0.6rem 0 1.6rem; font-size: 1.6rem;} .boardBasic .lst .util {gap: 2rem; margin: 0; font-size: 1.3rem;} .boardBasic .lst .util img {max-width: 1.4rem} .boardBasic .lst .util .file {} .boardBasic .lst .util .date {gap: 0.4rem;} .boardBasic .lst .util .view {gap: 0.4rem;} .boardBasic .lst .util span + span::before {width: 0.2rem; height: 0.2rem; left: -1.1rem;} .boardBasic .notc .num span {padding: 0.1rem 0.6rem; font-size: 1.3rem;} } .boardLst01 {gap: 8rem 2.6rem} .boardLst01 .lst {width: calc((100% - 7.8rem) / 4);} .boardLst01 .lst a {display: flex; flex-direction: column; align-items: center; padding: 2.4rem 2.4rem 3.2rem; border-radius: 2.4rem; transition: 0.3s;} .boardLst01 .lst .thumb {border-radius: 2rem; overflow: hidden; transition: 0.3s; width: 100%} .boardLst01 .lst .plus {width: 8rem; height: 8rem; border-radius: 50%; background: rgba(0,0,0,0.4); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); opacity: 0; transition: 0.3s;} .boardLst01 .lst .plus img {} .boardLst01 .lst .round {margin: 2.4rem 0 0.8rem; padding: 0.6rem; width: 8.2rem; text-align: center; border-radius: 8rem; font-weight: bold;} .boardLst01 .lst .tit {font-weight: 600; transition: 0.3s;} .boardLst01 .lst:nth-child(2n-1) .round {background: #59270F} .boardLst01 .lst:nth-child(2n) .round {background: #C98A4A} .boardLst01 .lst:hover {} .boardLst01 .lst:hover a {background: #E9EFEC;} .boardLst01 .lst:hover .thumb {box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.32)} .boardLst01 .lst:hover .plus {opacity: 1} .boardLst01 .lst:hover .tit {font-weight: bold} @media all and (max-width: 880px){ .boardLst01 {gap: 4rem 0.8rem;} .boardLst01 .lst {width: calc((100% - 0.8rem) / 2)} .boardLst01 .lst a {padding: 0.4rem 0.4rem 0.8rem;} .boardLst01 .lst .thumb {} .boardLst01 .lst .plus {width: 5rem; height: 5rem;} .boardLst01 .lst .plus img {} .boardLst01 .lst .round {margin: 1.2rem 0 0.8rem; font-size: 1.4rem; padding: 0.5rem 0; width: 7rem;} .boardLst01 .lst .tit {font-size: 1.6rem;} } .boardLst02 {gap: 8rem 2.6rem;} .boardLst02 .lst {border-radius: 2.4rem; overflow: hidden;} .boardLst02 .lst a {display: block; padding: 2.4rem 2.4rem 3.2rem; transition: 0.3s;} .boardLst02 .lst .thumb {transition: 0.3s; border-radius: 0.4rem; overflow: hidden;} .boardLst02 .lst .thumb .plus {width: 8rem; height: 8rem; border-radius: 50%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); opacity: 0; transition: 0.3s;} .boardLst02 .lst .txts {margin-top: 2.4rem;} .boardLst02 .lst .txts .cate {border-radius: 8rem; padding: 0.7rem 0.8rem; line-height: 1} .boardLst02 .lst .txts .cate.bc01 {background: #2D493D} .boardLst02 .lst .txts .cate.bc02 {background: #59270F} .boardLst02 .lst .txts .cate.bc03 {background: #D9A441} .boardLst02 .lst .txts .cate.bc04 {background: #D97C5B} .boardLst02 .lst .txts .cate.bc05 {background: #7A9A8B} .boardLst02 .lst .txts .cate.bc06 {background: #BCC94A} .boardLst02 .lst .txts .subj {margin: 0.4rem 0 0.8rem;} .boardLst02 .lst .txts .day {} .boardLst02 .lst .txts .day span {} .boardLst02 .lst .txts .day span + span {padding-left: 0.8rem; margin-left: 0.8rem;} .boardLst02 .lst .txts .day span + span::before {content: ''; display: block; position: absolute; width: 1px; height: 60%; background: #ccc; left: 0; top: 50%; transform: translateY(-50%);} .boardLst02.row3 .lst {width: calc((100% - 5.2rem) / 3);} .boardLst02.row4 .lst {width: calc((100% - 7.8rem) / 4);} .boardLst02 .lst:hover {} .boardLst02 .lst:hover a {background: #F2EEEC} .boardLst02 .lst:hover .thumb {box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.32)} .boardLst02 .lst:hover .thumb .plus {opacity: 1;} @media all and (max-width: 880px){ .boardLst02 {gap: 4rem 0.8rem;} .boardLst02 .lst {} .boardLst02 .lst a {padding: 0.4rem 0.4rem 0.8rem;} .boardLst02 .lst .thumb {} .boardLst02 .lst .thumb .plus {} .boardLst02 .lst .txts {margin-top: 1.2rem;} .boardLst02 .lst .txts .cate {font-size: 1.2rem; padding: 0.6rem 0.7rem;} .boardLst02 .lst .txts .subj {font-size: 1.8rem; margin: 0.4rem 0;} .boardLst02 .lst .txts .day {font-size: 1.2rem; flex-wrap: wrap} .boardLst02 .lst .txts .day span {} .boardLst02 .lst .txts .day span + span {} .boardLst02 .lst .txts .day span:nth-child(3) {margin: 0; padding: 0} .boardLst02 .lst .txts .day span:nth-child(3)::before {display: none;} .boardLst02.row3 .lst {width: calc((100% - 0.8rem) / 2)} .boardLst02.row4 .lst {width: calc((100% - 0.8rem) / 2)} } .boardGallery {gap: 4rem 2.6rem;} .boardGallery .lst {width: calc((100% - 7.8rem) / 4); border-radius: 1.2rem; overflow: hidden;} .boardGallery .lst a {display: block;} .boardGallery .lst .thumb {height: 27rem;} .boardGallery .lst .thumb img {height: 100%; object-fit: cover;} .boardGallery .lst .txts {padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; background: #000000; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: 0.2s;} .boardGallery .lst .txts .tit {margin-bottom: 0.4rem;} .boardGallery .lst .txts .util {gap: 1.2rem; opacity: 0.8} .boardGallery .lst .txts .util .ut {gap: 0.4rem;} .boardGallery .lst:hover {} .boardGallery .lst:hover .txts {opacity: 1} @media all and (max-width: 880px){ .boardGallery {gap: 2.4rem 1rem; margin-top: 3rem;} .boardGallery .lst {width: calc((100% - 1rem) / 2); border-radius: 0} .boardGallery .lst a {} .boardGallery .lst .thumb {height: 13rem; border-radius: 1.2rem; overflow: hidden;} .boardGallery .lst .txts {opacity: 1; position: relative; background: none; padding: 1rem 0.2rem 0; height: auto; top: auto; left: auto; transform: none;} .boardGallery .lst .txts .tit {color: #121212; font-size: 1.6rem; text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden;} .boardGallery .lst .txts .util {font-size: 1.2rem;} .boardGallery .lst .txts .util .ut {color: #121212} .boardGallery .lst .txts .util .ut img {filter: invert(1) brightness(1);} } .viewCont {} .posterArea {justify-content: space-between; margin-bottom: 12rem; align-items: flex-start;} .posterArea .poster {width: 49rem; flex-shrink: 0; position: sticky; top: 20%;} .posterArea .poster img {height: auto} .posterArea .postInfo {width: 90rem; flex-shrink: 0} .posterArea .titArea {} .posterArea .titArea .round {background: var(--fcb); border-radius: 8rem; padding: 0.6rem 1.6rem;} .posterArea .titArea .cate {border-radius: 8rem; padding: 0.6rem 1.6rem;} .posterArea .titArea .cate.bc01 {background: #2D493D} .posterArea .titArea .cate.bc02 {background: #59270F} .posterArea .titArea .cate.bc03 {background: #D9A441} .posterArea .titArea .cate.bc04 {background: #D97C5B} .posterArea .titArea .cate.bc05 {background: #7A9A8B} .posterArea .titArea .cate.bc06 {background: #BCC94A} .posterArea .titArea .subj {margin: 1.2rem 0 4rem;} .posterArea .boxArea {padding: 4rem; border-radius: 2rem;} .posterArea .boxArea + .boxArea {margin-top: 4rem} .posterArea .boxArea .infoLst {gap: 2.4rem; align-items: center;} .posterArea .boxArea .infoLst + .infoLst {margin-top: 2.4rem;} .posterArea .boxArea .infoLst .tit {width: 10.2rem; text-align: center; border-radius: 10rem; padding: 0.8rem 0;} .posterArea .boxArea .infoLst .wrt {} .posterArea .boxArea.boxA {background: #FDFBF3;} .posterArea .boxArea.boxA .infoLst .tit {background: #EDE7D8;} .posterArea .boxArea.boxB {background: #F9FDF3} .posterArea .boxArea.boxB .infoLst .tit {background: #E0EDD8} .divir {height: 1px; background: #E0E0E0; margin-bottom: 3.2rem;} .etcImgArea {margin-bottom: 12rem;} .etcImgArea .etcSwiper {overflow: hidden;} .etcImgArea .etcSwiper .img {border-radius: 1.2rem; overflow: hidden; cursor: pointer;} .etcImgModal {z-index: 9999; display: none;} .etcImgModal .modalBg {background: rgba(0,0,0,0.6)} .etcImgModal .modalBox {background: #fff; border-radius: 4rem; width: 100%; max-width: 96rem;} .etcImgModal .modalBox .closeBtn {cursor: pointer; top: 0; left: 100%;} @media all and (max-width: 880px){ .viewCont {} .posterArea {flex-direction: column; gap: 4rem; margin-bottom: 6rem;} .posterArea .poster {position: relative; top: 0; width: 100%} .posterArea .postInfo {width: 100%} .posterArea .titArea {} .posterArea .titArea .round {font-size: 1.4rem; padding: 0.4rem 1.2rem;} .posterArea .titArea .cate {font-size: 1.4rem;} .posterArea .titArea .subj {font-size: 2.4rem; margin: 1rem 0 2rem;} .posterArea .boxArea {padding: 1.8rem;} .posterArea .boxArea .infoLst {align-items: baseline; gap: 0.8rem; font-size: 1.6rem; flex-direction: column;} .posterArea .boxArea .infoLst + .infoLst {} .posterArea .boxArea .infoLst .tit {width: 8rem; padding: 0.5rem 0; flex-shrink: 0;} .posterArea .boxArea .infoLst .wrt {} .posterArea .boxArea .infoLst img {max-width: 100%} .posterArea .boxArea.boxA .infoLst .wrt {padding-left: 0.6rem;} .divir {height: 1px; background: #E0E0E0; margin-bottom: 1.5rem;} .etcImgArea {margin-bottom: 4rem;} .etcImgArea .etcSwiper {} .etcImgModal {} .etcImgModal .modalBg {} .etcImgModal .modalBox {max-width: var(--innerMo)} .etcImgModal .modalBox .closeBtn {top: auto; bottom: 102%; left: auto; right: 0;} } .veiwNav {} .veiwNav .navBtn {padding: 1.2rem 0; width: 12.4rem; justify-content: center; border-radius: 0.4rem; gap: 0.8rem} .veiwNav .prev {border: 1px solid #E0E0E0} .veiwNav .prev:hover {background: #F0F0F0} .veiwNav .next {border: 1px solid #E0E0E0} .veiwNav .next:hover {background: #F0F0F0} .veiwNav .list {background: #4A3E39;} .veiwNav .list:hover {} @media all and (max-width: 880px){ .veiwNav {font-size: 1.4rem;} .veiwNav .navBtn {width: 8rem; gap: 0.2rem; padding: 0.8rem 0;} .veiwNav .navBtn img {width: 1.4rem;} .veiwNav .prev {} .veiwNav .next {} .veiwNav .list {} } .commView {} .commView .titArea {background: #FBFAF3; border: 1px solid #ccc; border-right: 0; border-left: 0; padding: 7.2rem;} .commView .titArea .subj {margin-bottom: 2.4rem;} .commView .titArea .info {justify-content: center;} .commView .titArea .info li {gap: 1.2rem;} .commView .titArea .info li + li {padding-left: 1.2rem; margin-left: 1.2rem;} .commView .titArea .info li + li::before {content: ''; display: block; position: absolute; width: 1px; height: 60%; background: #888; left: 0; top: 50%; transform: translateY(-50%);} .commView .titArea .info li .opt {} .commView .contArea {padding: 4rem 0 10rem} .commView .contArea .tempImg {text-align: center;} .commView .contArea .tempImg img {} .commView .contArea .tempImg img + img {margin-top: 4rem;} .commView .contArea img {max-width: 100%} .commView .fileArea {} .commView .fileArea .lst {background: #F7F7F7; padding: 2.4rem; border-radius: 0.4rem;} .commView .fileArea .lst + .lst {margin-top: 1rem;} .commView .fileArea .lst .tit {margin-right: 6rem; font-weight: bold;} .commView .btnArea {margin: 4rem 0 6rem;} .commView .btnArea .lstBtn {border-radius: 0.4rem; background: #4A3E39; padding: 1.2rem 3rem; display: inline-block;} .commView .navArea {border: 1px solid #59270F; border-right: 0; border-left: 0; padding: 0 2.4rem;} .commView .navArea .lst {padding: 2.4rem 0;} .commView .navArea .lst + .lst {border-top: 1px solid #ccc;} .commView .navArea .lst .opt {margin-right: 6rem; flex-shrink: 0} .commView .navArea .lst a {width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .commView .navArea .lst .none {color: #888; width: 100%} .commView .navArea .lst .date {margin-left: auto; flex-shrink: 0} @media all and (max-width: 880px){ .commView {} .commView .titArea {padding: 3rem 1rem;} .commView .titArea .subj {font-size: 1.8rem; margin-bottom: 1.2rem;} .commView .titArea .info {font-size: 1.4rem;} .commView .titArea .info li {} .commView .titArea .info li + li {} .commView .titArea .info li + li::before {} .commView .titArea .info li .opt {} .commView .contArea {padding: 4rem 0;} .commView .contArea .tempImg {} .commView .contArea .tempImg img {max-width: 100%;} .commView .contArea .tempImg img + img {margin-top: 2rem} .commView .fileArea {} .commView .fileArea .lst {padding: 1.8rem; font-size: 1.4rem;} .commView .fileArea .lst + .lst {} .commView .fileArea .lst .tit {margin-right: 2rem} .commView .btnArea {margin: 4rem 0; text-align: center;} .commView .btnArea .lstBtn {font-size: 1.4rem;} .commView .navArea {padding: 0;} .commView .navArea .lst {padding: 1.8rem 0; font-size: 1.4rem;} .commView .navArea .lst + .lst {} .commView .navArea .lst .opt {margin-right: 2rem;} .commView .navArea .lst .date {padding-left: 1rem; font-size: 1.4rem;} } .pg_wrap {float: none; margin-top: 8rem; width: 100%;} .pg_wrap:after {display: none} .pg_wrap .pg {display: flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 4rem 0;} .pg_wrap .pg .pg_page {width: 4rem; height: 4rem; font-size: 1.6rem; line-height: 4rem; font-weight: 400; color: #212121; background: transparent; border-radius: 0.4rem; border: 1px solid #CCCCCC; min-width: auto; padding: 0; text-align: center;} .pg_wrap .pg .pg_page:hover {background: #C9D7CF} .pg_wrap .pg .pg_page.pg_start {display: none} .pg_wrap .pg .pg_page.pg_prev {background: url('../img/sub/navi_prev.svg') no-repeat center/2rem; margin-right: 0.5rem;} .pg_wrap .pg .pg_page.pg_next {background: url('../img/sub/navi_next.svg') no-repeat center/2rem; margin-left: 0.5rem} .pg_wrap .pg .pg_page.pg_end {display: none;} .pg_wrap .pg .pg_current {width: 4rem; height: 4rem; line-height: 4rem; background: #2D493D; color: #fff; border-radius: 0.4rem; border: 1px solid #2D493D; font-size: 1.6rem; font-weight: bold; min-width: auto; padding: 0;} @media all and (max-width: 880px){ .pg_wrap {margin-top: 4rem;} .pg_wrap .pg {padding: 2rem 0;} .pg_wrap .pg .pg_page {width: 3rem; height: 3rem; line-height: 3rem; font-size: 1.4rem;} .pg_wrap .pg .pg_page.pg_next {background-size: 1.6rem;} .pg_wrap .pg .pg_page.pg_prev {background-size: 1.6rem;} .pg_wrap .pg .pg_current {width: 3rem; height: 3rem; line-height: 3rem; font-size: 1.4rem;} } .empty_table {text-align: center; display: block; padding: 1rem 0; font-size: 1.6rem;} .empty_list {text-align: center; display: block; padding: 1rem 0; font-size: 1.6rem; width: 100% !important} /**========**/