@charset "utf-8"; #main { margin-bottom:3.125em} /********************************************************************** 비주얼 **********************************************************************/ .visual { width:100%; height:auto; text-align: center;} .visual img { width: 100%; height:auto; max-width: 1920px; display:block; margin:0 auto; aspect-ratio: 1920 / 790;} @media (max-width: 768px) { .visual { min-height: 400px; } .visual img { object-fit: cover; width: 100%; height: 400px; } } /********************************************************************** schedule **********************************************************************/ [data-main-con="schedule"] { padding:1.25em 2.5em; color:var(--color-white); background: linear-gradient(to bottom, #329af9, #027ff4); width:1000px; margin:0 auto; border-radius: 100px; display:flex; align-items:center; position: relative; margin-top:-45px; z-index: 10} [data-main-con="schedule"] .title { margin-bottom:0; font-size:1.75em; min-width:180px; position: relative; padding-left:35px;} [data-main-con="schedule"] .title:before { content:''; position:absolute; top:50%; left:0; width:25px; height:25px; background:url(/resource/dadaikmung/images/main/icon_schedule.svg) no-repeat; transform: translateY(-50%);} [data-main-con="schedule"] .region { display:inline-block; background-color:rgba(0, 0, 0, .3); border-radius:25px; padding:4px 20px; min-width:100px; text-align: center;} [data-main-con="schedule"] .temp em { font-size:1.563em; font-weight:800 } [data-main-con="schedule"] .swiper-slide p { font-size:1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} [data-main-con="schedule"] .swiper_control { filter:invert(100%); display:flex; justify-content:space-between;} [data-main-con="schedule"] .swiper { overflow: hidden;} [data-main-con="schedule"] .btn_slide_more { flex:none; display:flex;justify-content:center; align-items:center;margin-left:5px; transition:var(--trans-ani);} [data-main-con="schedule"] .btn_slide_more:before { content:''; display:block; width:25px; height:25px; background:url(/resource/dadaikmung/images/common/icon_more.svg) no-repeat center center; background-size:14px 14px;} @media all and (max-width:1468px){ [data-main-con="schedule"] { margin-top:30px } } @media all and (max-width:1024px){ [data-main-con="schedule"] { width:94%; } } @media all and (max-width:768px){ [data-main-con="schedule"] { flex-direction:column; border-radius:30px} [data-main-con="schedule"] .title { font-size:1.25em; min-width:inherit; } [data-main-con="schedule"] .swiper { width:100%; } [data-main-con="schedule"] .swiper-slide p{ width:100%; max-width:100%; text-align:center; margin:10px 0} } /********************************************************************** banner **********************************************************************/ [data-main-con="banner"] .icon_banner { padding:1.88em 3em; position: relative;} [data-main-con="banner"] .swiper-wrapper { display:flex; gap: 40px; padding:0; margin:0;} [data-main-con="banner"] .icon_banner .swiper-slide { flex:1; padding: 0.5em; overflow: visible !important;} [data-main-con="banner"] .icon_banner .swiper-slide a { display:flex; flex-flow:column; align-items: center; padding:1.5em 1em; gap:1em; height:100%; box-sizing:border-box; width:100%} [data-main-con="banner"] .icon_banner .swiper-slide a .txt { text-align:center; font-family: var(--font-Katuri); font-size:1.563em; font-weight:normal; color:var(--color-base1);} [data-main-con="banner"] .icon_banner .icon { position:relative; height:90px; width:90px; } [data-main-con="banner"] .icon_banner .icon:after { content:''; background:url("/resource/dadaikmung/images/main/icon_bg.png") no-repeat center top; z-index:-1; width:220px; height:100px; display:inline-block; position: absolute; top:0; left:50%; transform: translateX(-50%); } [data-main-con="banner"] .icon_banner .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; background-size:contain; background-position:50%; background-repeat:no-repeat; content:''; } [data-main-con="banner"] .icon_banner .icon1::before { background-image:url(/resource/dadaikmung/images/main/icon_banner01.svg); } [data-main-con="banner"] .icon_banner .icon2::before { background-image:url(/resource/dadaikmung/images/main/icon_banner02.svg); } [data-main-con="banner"] .icon_banner .icon3::before { background-image:url(/resource/dadaikmung/images/main/icon_banner03.svg); } [data-main-con="banner"] .icon_banner .icon4::before { background-image:url(/resource/dadaikmung/images/main/icon_banner04.svg); } [data-main-con="banner"] .icon_banner .icon5::before { background-image:url(/resource/dadaikmung/images/main/icon_banner05.svg); } [data-main-con="banner"] .icon_banner .swiper_control::before, [data-main-con="banner"] .icon_banner .swiper_control::after { display:none; } /* 효과 */ [data-main-con="banner"] .icon_banner .swiper-slide:hover .icon, [data-main-con="banner"] .icon_banner .swiper-slide:focus .icon { animation:iconShow 0.7s ease-in-out 1 forwards; } [data-main-con="banner"] .icon_banner .swiper-slide a:hover strong, [data-main-con="banner"] .icon_banner .swiper-slide a:focus strong { color:var(--color-point); opacity:1; } @media all and (max-width:1568px){ [data-main-con="banner"] .icon_banner .swiper-slide a .txt { font-size: 1.563em} } @media all and (max-width:1468px){ [data-main-con="banner"] { margin-top:1.25em; } [data-main-con="banner"] .icon_banner .swiper-slide { width:auto; min-width:calc(100% / 4) } [data-main-con="banner"] .swiper_control .control { position:inherit; } [data-main-con="banner"] .icon_banner { overflow:hidden; position:relative; padding:1.88em 50px } [data-main-con="banner"] .icon_banner::before { position:absolute; width:30px; height:100%; right:50px; top:0; content:''; background:linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,.01)) ; z-index:3} [data-main-con="banner"] .icon_banner::after { position:absolute; width:30px; height:100%; left:50px; top:0; content:''; background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,.01)) ; z-index:3} [data-main-con="banner"] .icon_banner .swiper_next, [data-main-con="banner"] .icon_banner .swiper_prev { position:absolute; top:50%; width:55px; height:55px; border-radius:100%; background:var(--color-white); border:1px solid rgba(0,0,0,.1); z-index:4; transform:translateY(-55%) } [data-main-con="banner"] .icon_banner .swiper_next { right:15px; } [data-main-con="banner"] .icon_banner .swiper_prev { left:15px; } [data-main-con="banner"] .icon_banner .swiper-slide a .txt { font-size:1.5em } [data-main-con="banner"] .swiper_next::before, [data-main-con="banner"] .swiper_prev::before { width:8px; height:14px; } [data-main-con="banner"] .swiper_next::before { margin-left:2.5px; } [data-main-con="banner"] .swiper_prev::before { margin-left:-2.5px; } } @media all and (max-width:1168px){ [data-main-con="banner"] .icon_banner .swiper-slide { width:auto; min-width:calc(100% / 3) } } @media all and (max-width:1024px){ [data-main-con="banner"] .icon_banner .icon { height:50px; width:50px; margin-bottom:10px} [data-main-con="banner"] .icon_banner .icon:after { background-size: 150px 68px;} [data-main-con="banner"] .icon_banner .swiper-slide a .txt { font-size:1.25em; } [data-main-con="banner"] .swiper_next::before, [data-main-con="banner"] .swiper_prev::before { margin-top:-1px } [data-main-con="banner"] .swiper_next::before { margin-left:.5px; } [data-main-con="banner"] .swiper_prev::before { margin-left:-.5px; } } @media all and (max-width:768px){ [data-main-con="banner"] .icon_banner .swiper-slide { width:auto; min-width:calc(100% / 2) } [data-main-con="banner"] .icon_banner .swiper-slide a { padding:1.5em; } } @media all and (max-width:568px){ [data-main-con="banner"] { margin-top:0 } [data-main-con="banner"] .icon_banner { padding:0; border-radius:10px; } [data-main-con="banner"] .swiper-wrapper { gap:inherit; } [data-main-con="banner"] .icon_banner .swiper-slide { width:auto; min-width:95% } [data-main-con="banner"] .icon_banner .swiper-slide a { padding:1.25em; gap:.55em; } [data-main-con="banner"] .icon_banner .swiper-slide a .txt { font-size:1em; } [data-main-con="banner"] .icon_banner .swiper_next, [data-main-con="banner"] .icon_banner .swiper_prev { width:35px; height:35px; } [data-main-con="banner"] .swiper_next::before, [data-main-con="banner"] .swiper_prev::before { margin-top:.3px } [data-main-con="banner"] .swiper_next::before { margin-left:1.5px; } [data-main-con="banner"] .swiper_prev::before { margin-left:-1.5px; } [data-main-con="banner"] .icon_banner .swiper_prev { left:10px; } [data-main-con="banner"] .icon_banner .swiper_next { right:10px; } [data-main-con="banner"] .icon_banner::before { right:30px; } [data-main-con="banner"] .icon_banner::after { left:30px; } } /********************************************************************** 익산 소식통 **********************************************************************/ [data-main-con="board"] { position:relative; background:url("/resource/dadaikmung/images/main/board_bg.png") no-repeat center center #fbf9eb; padding:6.25em 0; text-align: center;} [data-main-con="board"] .board_tit { display: inline-flex; align-items: center; justify-content: center; position: relative; margin: 0 auto 1em; padding-left: 60px; font-family: var(--font-Katuri); font-size: 3.125em; line-height: 1.3; font-weight: normal; color: var(--color-point2); text-align: center;} [data-main-con="board"] .board_tit::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 47px; height: 44px; background: url("/resource/dadaikmung/images/main/board_con_h2.png") no-repeat center / contain;} [data-main-con="board"] .board_tit::after { content: ''; position: absolute; left: -55px; top: -20px; width: 45px; height: 40px; background: url("/resource/dadaikmung/images/main/board_tit_icon1.png") no-repeat center / contain; animation: swingRotate 1.5s ease-in-out infinite;} .board_tit .icon { display: inline-block; width: 45px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: contain; animation: updown 2s linear infinite; background-image: url("/resource/dadaikmung/images/main/board_tit_icon2.png"); position: relative; top: -40px; right: -15px; animation: swingRotate 1.5s ease-in-out infinite;} [data-main-con="board"] .board_con_wrap { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; text-align: left} [data-main-con="board"] .board_con { width:50%; max-width:700px; margin:0 auto } .board_con { display:flex; flex-direction:column; gap:10px; position: relative;} .board_con h2.title { font-family: var(--font-Katuri); background:var(--color-point2); color:var(--color-white); display:inline-block; border-radius:40px; padding:12px 40px;font-size:1.875em; font-weight:normal; margin-bottom:1.25rem;} /********************************************************************** 행사소식(event) **********************************************************************/ [data-main-con="board"] .event .bar { margin-right:20px } [data-main-con="board"] .event .swiper-wrapper { align-items:stretch;} [data-main-con="board"] .event .swiper-slide { width:50%; display:flex; height:auto } [data-main-con="board"] .event .swiper-slide a { display:flex; flex-flow:column; width:100%; margin:0 10px; border:1px solid #e5e5e5; border-radius:30px; background:var(--color-white); overflow:hidden ;} [data-main-con="board"] .event .swiper-slide a::before { position:absolute; width:calc(100% - 20px); height:100%; left:10px; right:0px; top:0; content:''; border-radius:30px; border:3px solid var(--color-point); box-sizing:border-box; transition:all ease 0.1s; opacity: 0; z-index: 2} [data-main-con="board"] .event .swiper-slide .img { position:relative; width:100%; height:0; padding-top:144.2%; overflow:hidden; border-radius: 30px} [data-main-con="board"] .event .swiper-slide .img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); object-fit:cover; z-index:1; transition:0.5s ease 0s; transition-property:transform;} [data-main-con="board"] .event .swiper_control { margin-top:50px; display:flex; justify-content:space-between; align-items:center} [data-main-con="board"] .event .swiper_control button.swiper_next, [data-main-con="board"] .event .swiper_control button.swiper_prev, [data-main-con="board"] .event .swiper_control button.swiper_auto { width:50px; height:50px; border-radius:100%; background:var(--color-white); border:1px solid var(--color-line); } [data-main-con="board"] .event .swiper_control button:hover, [data-main-con="board"] .event .swiper_control button:focus { background-color:var(--color-point2); } [data-main-con="board"] .event .swiper_control button:hover:before, [data-main-con="board"] .event .swiper_control button:focus:before, [data-main-con="board"] .event .swiper_control button:hover:before, [data-main-con="board"] .event .swiper_control button:focus:before { filter:invert(1); } [data-main-con="board"] .event .swiper-slide a:hover .img img, [data-main-con="board"] .event .swiper-slide a:focus .img img { transform: translate(-50%, -50%) scale(1.1);} [data-main-con="board"] .swiper_control .bar { height: 3px; background-color: #dfdfdf; width: 100%; position: relative; border-radius: 2px; overflow: hidden; margin-right: 20px; flex-grow: 1;} [data-main-con="board"] .swiper_control .bar_fill { height: 100%; width: 0%; background-color: var(--color-point2); transition: width 0.4s ease; border-radius: 2px;} /********************************************************************** 공지사항 **********************************************************************/ [data-main-con="board"] .notice { position:relative; font-family: var(--font-paperlogy); } [data-main-con="board"] .notice .notice_list { list-style: none; padding: 0; margin: 0;} [data-main-con="board"] .notice .notice_item { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--color-line); font-size: 0.95em; gap : 20px; background-color:var(--color-white); border-radius: 25px; margin-bottom:10px; height:auto; min-height:70px; padding:15px 30px; align-items:center } [data-main-con="board"] .notice .notice_item .tit { flex:1 1 auto; min-width:0;} [data-main-con="board"] .notice .notice_item .tit a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.125rem;} [data-main-con="board"] .notice .notice_item .new { margin-left:5px } [data-main-con="board"] .notice .date_inline { position:relative; padding-left:25px; width:120px; opacity: 0.8; flex:0 0 auto;} [data-main-con="board"] .notice .date_inline::before { position:absolute; width:20px; height:20px; left:0; top:1px; background:url(/resource/dadaikmung/images/common/icon_date.svg) no-repeat 50% 50% / auto; content:''; } [data-main-con="board"] .notice .btn_more { font-size: 0.9rem; color: #666; text-decoration: none; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; transition: all 0.2s ease;} [data-main-con="board"] .notice .btn_more:hover { background-color: #f0f0f0; color: #000; border-color: #999;} [data-main-con="board"] .notice .notice_item:hover .tit, [data-main-con="board"] .notice .notice_item:focus .tit { color:var(--color-point2); } /* 더보기 */ .board_con .more { position:absolute; top:10px; right:0; } .board_con .more a { display:inline-flex; align-items:center; gap:5px; text-decoration:none; color:var(--color-point2); border:2px solid var(--color-point2); border-radius: 30px; background: var(--color-white); height:50px;padding:0 30px} .board_con .more .icon_more { display:inline-block; width:13px; height:13px; background:url(/resource/dadaikmung/images/common/icon_more.svg) no-repeat center / contain; transition: transform 0.3s ease; filter: invert(51%) sepia(77%) saturate(1866%) hue-rotate(313deg) brightness(97%) contrast(104%);} .board_con .more a:hover .icon_more, .board_con .more a:focus .icon_more { transform: rotate(90deg); } /********************************************************************** 인포존 **********************************************************************/ [data-main-con="board"] .popup { flex:none; width:100%; border:1px solid #dae1ea; border-radius:.63em; background:var(--color-white); overflow:hidden; } [data-main-con="board"] .popup .swiper-slide { width:100%; } [data-main-con="board"] .popup .swiper-slide a { display:block; position:relative; } [data-main-con="board"] .popup .swiper-slide a .img { position:relative; width:100%; overflow:hidden; display:block; height:0; padding-top:27.222%; } [data-main-con="board"] .popup .swiper-slide a .img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%, -50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%,-50%); object-fit:cover; -o-object-fit:cover; } [data-main-con="board"] .popup .swiper-slide > a span[data-alt] { opacity:0; overflow:hidden; display:block; position:absolute; top:50%; left:50%; z-index:2; width:95%; height:95%; border:2px solid var(--color-black1); outline:1px solid var(--color-white); text-indent:100%; white-space:nowrap; transform:translate(-50%, -50%);} [data-main-con="board"] .popup .swiper-slide > a:focus span[data-alt] { opacity:1;} [data-main-con="board"] .popup .swiper_control { display:flex; justify-content:space-between; border-top:1px solid #dae1ea; padding:1em;} [data-main-con="board"] .popup .swiper_page { margin-right:0px;justify-content: left;align-items: center;} [data-main-con="board"] .popup .control { display:flex; } [data-main-con="board"] .popup .control .btn_slide_allView { display:block; width:25px; height:25px; background:url(/resource/dadaikmung/images/common/icon_all.svg) no-repeat 50% / 12px; } [data-main-con="board"] .popup .swiper_page i::after { content:'';display:inline-block; vertical-align:middle; width:12px;height:1px;background:#999; } /* 배너모두보기 */ .area_ban_all { opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:90; width:100%; height:100%; background:rgba(0,0,0,0.7); transition:0.5s easae 0s; transition-property:opacity, visibility;} .area_ban_all.active { opacity:1; visibility:visible; } .area_ban_all .inr { position:absolute; top: 50vh; left:50%; width:94%; max-width:1500px; max-height: 90vh; box-sizing:border-box; padding:0; transform:translate(-50%, calc(-50% - 0.5px));} .area_ban_all .inr .round_box { display:table; margin:0 auto 2em auto; border-radius:3em; padding:15px 35px; background:var(--color-white); font-size:1.67em; } .area_ban_all .inr .round_box strong { font-weight:bold; } .area_ban_all .list_all { display:flex; flex-wrap:wrap; gap:10px; margin:0 auto; overflow-y:auto; max-height:calc(100vh - 22em); padding-right:15px} .area_ban_all .list_all::-webkit-scrollbar { -webkit-appearance:none; width:6px;} .area_ban_all .list_all::-webkit-scrollbar-thumb { background-color:rgba(255, 255, 255, .8); border-radius:5px; border:2px solid #000; } .area_ban_all .list_all::-webkit-scrollbar-track { border-radius:5px; background-color:#000; } .area_ban_all .list_all > li { flex:0 1 calc((100% - 20px) / 3); } .area_ban_all .list_all > li a { position:relative; display:block; text-align:center; } .area_ban_all .list_all .img { position:relative; width:100%; overflow:hidden; display:block; height:0; padding-top:27.222%} .area_ban_all .list_all .img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%, -50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%,-50%); object-fit:cover; -o-object-fit:cover; } .area_ban_all .list_all span[data-alt] { opacity:0; overflow:hidden; position:absolute; text-indent:-9999em; } .area_ban_all .btn_slide_allView { opacity:1; position:absolute; top:0; right:0px; min-width:inherit; width:60px; height:60px; padding:0px; background-color:var(--color-point); border:0px; border-radius:100%;} .area_ban_all .btn_slide_allView::before { display:block; width:20px; height:20px; margin:0 auto; background:url(/resource/dadaikmung/images/main/icon_plus.svg) no-repeat 50% 50% / 20px auto; transition:var(--trans-ani); transition-property:transform; filter:invert(100%) sepia(30%) saturate(0%) hue-rotate(173deg) brightness(102%) contrast(102%); content:''; transform:rotate(45deg); } .area_ban_all .btn_slide_allView:hover::before, .area_ban_all .btn_slide_allView:focus::before { transform:rotate(135deg);} @media all and (max-width:1768px){ .area_ban_all .inr .round_box { font-size:1.57em; } } @media all and (max-width:1568px){ .board_con h2.title { padding:5px 30px } .board_con .more { top:0; } [data-main-con="board"] .board_con { width:100%; max-width:inherit; } [data-main-con="board"] .board_con:first-child { margin-bottom:50px } [data-main-con="board"] .event .swiper_control { margin-top:20px } [data-main-con="board"] .event .swiper-slide { width:25% } [data-main-con="board"] .popup .swiper-slide { width:50% } [data-main-con="board"] .popup .swiper-slide a { margin:5px } } @media all and (max-width:1280px){ [data-main-con="board"] { padding:4em 0 } [data-main-con="board"] .event .swiper-slide { width:33.3333% } } @media all and (max-width:1024px){ [data-main-con="board"] .popup .swiper-slide { width:100%;} [data-main-con="board"] .popup .swiper-slide a { margin:0; } } @media all and (max-width:768px){ [data-main-con="board"] .board_tit { font-size:1.875em } .board_con h2.title { font-size:1.375em; height:50px; display:inline-flex; justify-content:center; align-items:center; } .board_tit .icon, [data-main-con="board"] .board_tit::after { display:none; } [data-main-con="board"] .event .swiper-slide { width:50% } [data-main-con="board"] .event .swiper_control button.swiper_next, [data-main-con="board"] .event .swiper_control button.swiper_prev, [data-main-con="board"] .event .swiper_control button.swiper_auto { width:35px; height:35px; } [data-main-con="board"] .notice .notice_item { min-height:50px; border-radius:10px; padding:10px 20px } [data-main-con="board"] .notice .notice_item .tit a { font-size:1.125em; } } @media all and (max-width:468px){ .board_con h2.title { height:40px } .board_con .more a { height:40px; padding:0 15px } .board_con .more .icon_more { width:10px;height:10px; } [data-main-con="board"] .event .swiper-slide { width:100% } [data-main-con="board"] .notice .date_inline { display:none; } } /********************************************************************** 반려동물 동반 시설안내 **********************************************************************/ [data-main-con="photo"] { width:94%; max-width:1820px; padding-top:6em; margin-right:auto; margin-left:auto; position: relative;} [data-main-con="photo"]:before { content:''; position:absolute; top:30px; right:0; width:384px; height:362px; background: url("/resource/dadaikmung/images/main/photo_bg.png") no-repeat; animation: updown 2s linear infinite; z-index: -1} [data-main-con="photo"]:after { content:''; position:absolute; bottom:170px; left:-50px; width:151px; height:217px; background: url("/resource/dadaikmung/images/main/photo_bg02.png") no-repeat; z-index: -1} [data-main-con="photo"] .title { font-family: var(--font-Katuri); position: relative; margin:0 auto; width: fit-content; font-size:3.125em; line-height:1.3; margin-bottom:0.5em; font-weight:normal; color:var(--color-point);} [data-main-con="photo"] .title:before { content:''; position:absolute; top:-50px; right:-150px; background:url("/resource/dadaikmung/images/main/photo.svg") no-repeat; width:150px; height:135px; } [data-main-con="photo"] .sub_text { font-family: var(--font-Katuri); display:flex; justify-content:center; font-size:1.563em; line-height:1.2; margin-bottom:1.84em; text-align:center; color:var(--color-base);} [data-main-con="photo"] .photo { position:relative;} [data-main-con="photo"] .swiper-wrapper { align-items:stretch;} [data-main-con="photo"] .swiper-slide { width:25%; display:flex; height:auto } [data-main-con="photo"] .swiper-slide a { display:flex; flex-flow:column; width:100%; margin:0 10px; border:1px solid #e5e5e5; border-radius:30px; background:var(--color-white); overflow:hidden ; padding:1.88em;} [data-main-con="photo"] .swiper-slide a::before { position:absolute; width:calc(100% - 20px); height:100%; left:10px; right:0px; top:0; content:''; border-radius:30px; border:3px solid var(--color-point); box-sizing:border-box; transition:all ease 0.1s; opacity: 0; z-index: 2} [data-main-con="photo"] .swiper-slide .img { position:relative; width:100%; height:0; padding-top:72.85%; overflow:hidden; border-radius: 30px} [data-main-con="photo"] .swiper-slide .img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); object-fit:cover; z-index:1; transition:0.5s ease 0s; transition-property:transform;} [data-main-con="photo"] .swiper-slide .img:hover img, [data-main-con="photo"] .swiper-slide .img:focus img { transform:translate(-50%,-50%) scale(1.07, 1.07);} [data-main-con="photo"] .swiper-slide dl { display:flex; flex-flow:column; text-align: center; font-family: var(--font-paperlogy); margin-top:1em;} [data-main-con="photo"] .swiper-slide dl dt { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-size:1.25em; line-height:1.4; height:1.5em; font-weight:bold; } [data-main-con="photo"] .swiper-slide dl dd { font-size:1.125em; opacity:.74; position: relative; } [data-main-con="photo"] .swiper_control { margin-top:50px } [data-main-con="photo"] .swiper_control button.swiper_next, [data-main-con="photo"] .swiper_control button.swiper_prev, [data-main-con="photo"] .swiper_control button.swiper_auto { width:50px; height:50px; border-radius:100%; background:#f7f8fc; border:1px solid var(--color-line); } [data-main-con="photo"] .swiper_control button:hover, [data-main-con="photo"] .swiper_control button:focus { background-color:var(--color-point); } [data-main-con="photo"] .swiper_control button:hover:before, [data-main-con="photo"] .swiper_control button:focus:before, [data-main-con="photo"] .swiper_control button:hover:before, [data-main-con="photo"] .swiper_control button:focus:before { filter:invert(1); } [data-main-con="photo"] .swiper-slide a:hover dl dt, [data-main-con="photo"] .swiper-slide a:focus dl dt { color:var(--color-point); } [data-main-con="photo"] .photo_more { height:50px; border-radius:30px !important; padding:0 30px; width:auto !important; color:var(--color-white); background:var(--color-point);} [data-main-con="photo"] .photo_more::after { content: ''; display: inline-block; width: 13px; height: 13px; background: url('/resource/dadaikmung/images/common/icon_next.svg') no-repeat center center / contain; margin-left: 8px; filter: invert(1); transition: transform 0.3s ease;} [data-main-con="photo"] .photo_more:hover::after, [data-main-con="photo"] .photo_more:focus::after { transform: translateX(4px); } [data-main-con="photo"] .tab_menu { display: flex; flex-wrap: nowrap; position: relative; border-radius: 10px; max-width:1200px; margin:0 auto 70px auto} [data-main-con="photo"] .tab_menu > li { flex: 1;; position: relative; opacity: 0.8} [data-main-con="photo"] .tab_menu > li:after { content:''; position:absolute; top:20px; bottom:20px; width:1px; left:0; background-color: rgba(255, 255, 255, 0.4);} [data-main-con="photo"] .tab_menu > li > button { width: 100%; background: var(--color-point); margin: 0; transition: background 0.3s, color 0.3s; min-height:80px; display: flex; align-items: center; justify-content: center; position: relative;} [data-main-con="photo"] .tab_menu > li > button span { font-family:var(--font-Katuri); color:var(--color-white); font-size:1.375rem; line-height:0; } [data-main-con="photo"] .tab_menu > li:first-child > button { border-radius: 10px 0 0 10px; border-left: none;} [data-main-con="photo"] .tab_menu > li:last-child > button { border-radius: 0 10px 10px 0;} /* 활성 탭 스타일 */ [data-main-con="photo"] .tab_menu > li.active > button { opacity: 1; -webkit-text-stroke: 5px var(--color-black); paint-order: stroke;} [data-main-con="photo"] .tab_menu > li.active button:before { content:''; position:absolute; top:-25px; left:50%; transform:translateX(-50%); width:60px;height:40px; background:url("/resource/dadaikmung/images/main/photo_title.svg") no-repeat; } [data-main-con="photo"] .photo .conts_tab { display:none; } [data-main-con="photo"] .photo .conts_tab.active { display:block; } [data-main-con="photo"] .photo .conts_tab .icon_more { position:absolute; right:0; top:0; } @media all and (max-width:1468px) { [data-main-con="photo"] .swiper-slide dl { padding:0 } [data-main-con="photo"] .swiper-slide { width:33.333%; } } @media all and (max-width:1200px) { [data-main-con="photo"] .tab_menu { max-width:inherit; flex-wrap:wrap; margin-bottom:30px} [data-main-con="photo"] .tab_menu > li > button span { font-size:1.25em; } } @media all and (max-width:1024px) { [data-main-con="photo"] { padding:4em 0 } [data-main-con="photo"]:before { width: 192px; height: 181px; background-size: contain;} [data-main-con="photo"] .title:before { display:none; } [data-main-con="photo"] .swiper-slide { width:50%; } [data-main-con="photo"] .swiper-slide a { margin:0 7px; } } @media all and (max-width:768px) { [data-main-con="photo"] .swiper-slide { width:100%; } [data-main-con="photo"] .swiper-slide a { border-radius:20px } [data-main-con="photo"] .title { font-size:1.875em } [data-main-con="photo"] .sub_text { font-size:1.25em; } [data-main-con="photo"] .photo_more { min-width:inherit; font-size:inherit; height:50px; width:inherit; padding:0 20px} [data-main-con="photo"] .swiper_control { margin-top:20px; } [data-main-con="photo"] .swiper_control .control { display:flex; flex-wrap:wrap; gap:0.5em; } [data-main-con="photo"] .swiper_control button.swiper_next, [data-main-con="photo"] .swiper_control button.swiper_prev, [data-main-con="photo"] .swiper_control button.swiper_auto { width:35px;height:35px } [data-main-con="photo"] .photo_more { height:35px;flex-basis: 100%; width:100% !important; } [data-main-con="photo"] .tab_menu { border-radius:10px; overflow:hidden; } [data-main-con="photo"] .tab_menu > li { flex: 0 0 33.3333%; box-sizing:border-box; opacity:1 } [data-main-con="photo"] .tab_menu > li.active button:before { display:none; } [data-main-con="photo"] .tab_menu > li > button { min-height:50px; font-size:1em; border-radius:0; } [data-main-con="photo"] .tab_menu > li:first-child > button, [data-main-con="photo"] .tab_menu > li:last-child > button { border-radius:0; } [data-main-con="photo"] .tab_menu > li:nth-child(1), [data-main-con="photo"] .tab_menu > li:nth-child(4) { position: relative;} [data-main-con="photo"] .tab_menu > li:nth-child(1):after, [data-main-con="photo"] .tab_menu > li:nth-child(4):after { display: none;} [data-main-con="photo"] .tab_menu > li > button span { font-size:1em } } @media all and (max-width:468px) { [data-main-con="photo"] { padding:3em 0; } [data-main-con="photo"] .swiper-slide dl dt { font-size:1.067em; } [data-main-con="photo"] .swiper_control .swiper_next::before { margin-left:2px; } [data-main-con="photo"] .swiper_control .swiper_prev::before { margin-right:2px; } [data-main-con="photo"] .sub_text { font-size:1em; } } /* 지도 */ .main_map { width:100%; position:relative;text-align:center; padding-top:5em;} .main_map img { max-width:100% !important; height:auto;} .main_map .map_bg { position: absolute;width: 20vw; object-fit: contain; pointer-events: none; z-index: 0; } .main_map .map_bg.left { top:0; left:0; width: 20vw; aspect-ratio: 340 / 150;} .main_map .map_bg.right { top:50px; right:100px; width: 25vw; aspect-ratio: 519 / 395;} .main_map .img_zoom { display:none; position:absolute; right:0; bottom:0; width:42px;height:42px; background:rgba(0, 0, 0, 0.8);} .main_map .img_zoom a { display:block; height:100%; font-size:0;} .main_map .img_zoom a:before { content:'';display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:18px; height:18px; margin:auto; background:url("/resource/dadaikmung/images/main/icon_search.svg") no-repeat} @media all and (max-width:1280px) { .main_map { padding-top:2em; } } @media all and (max-width:1024px) { .main_map { border:1px solid var(--color-line); padding:1em} .main_map .img_zoom { display:block;} .main_map .map_bg.left { top:30px;left:30px; } .main_map .map_bg.right { top:30px; right:30px; } } /* 동물 병원 정보 */ .animal_info_wrap { display: flex; gap: 40px; justify-content:center; flex-wrap:wrap; padding-top:10em;} .animal_info_box { width:680px; background: #fffdee; padding: 20px; border-radius: 30px; box-sizing: border-box; text-align:center; position: relative; font-family: var(--font-paperlogy); min-height:350px} .animal_info_box:before { content:''; position: absolute; top:-145px; left:50%; width:125px; height:125px; transform: translateX(-50%); z-index: 3} .animal_info_box.point1:before { background:url("/resource/dadaikmung/images/main/animal_bg01.png") no-repeat center top;} .animal_info_box.point2:before { background:url("/resource/dadaikmung/images/main/animal_bg02.png") no-repeat center top;} .animal_info_box.point1 { border:2px solid var(--color-point2); position: relative;} .animal_info_box.point2 { border:2px solid var(--color-point); position: relative} .animal_info_box h2 { z-index: 2; position: relative; font-size:2em; font-family: var(--font-Katuri); font-weight:normal; -webkit-text-stroke: 5px var(--color-black); color:var(--color-white); paint-order: stroke; margin-top:-72px; height:102px; display:flex; justify-content:center; align-items: center;} .animal_info_box h2:before { content:''; position: absolute; top:50%; left:50%; width:509px; height:102px; transform: translate(-50%, -50%); z-index: -1} .animal_info_box.point1 h2:before { background:url("/resource/dadaikmung/images/main/animal_tit_bg01.png") no-repeat center top;} .animal_info_box.point2 h2:before { background:url("/resource/dadaikmung/images/main/animal_tit_bg02.png") no-repeat center top;} .animal_info_box dl { margin-bottom: 10px;} .animal_info_box dt { font-weight: bold; font-size:2.5em;color:var(--color-black)} .animal_info_box dd { margin: 2px 0; font-size:1.5em;} .animal_info_box dd.text { height:90px; display:flex; align-items:center; justify-content:center; font-weight:500} .animal_info_box dd.bg { border-radius:40px; padding:5px 40px; display:inline-block; color:var(--color-white);} .animal_info_box ul { list-style: none; padding: 0; margin: 0; display:flex; justify-content:space-around} .animal_info_box ul li { position:relative; font-size:1.438em; font-weight:600; padding-left:45px} .animal_info_box ul li:before { content:''; position:absolute; top:50%; left:0; width:38px; height:38px; transform: translateY(-50%);} .animal_info_box .add::before { background:url("/resource/dadaikmung/images/main/animal_add.svg") no-repeat;} .animal_info_box .tel::before { background:url("/resource/dadaikmung/images/main/animal_tel.svg") no-repeat;} @media all and (max-width: 1490px) { .animal_info_box { width:48% } .animal_info_box dt { font-size:1.875em } .animal_info_box ul li { font-size:1.25em; } } @media all and (max-width: 1280px) { .animal_info_box h2 { font-size:1.563em; } .animal_info_box dd { font-size:1.25em; } .animal_info_box ul { flex-direction:column; align-items:flex-start; gap:20px; width:350px; margin:0 auto } } @media all and (max-width: 1080px) { .animal_info_wrap { max-width: 100%; flex-direction: column; padding-top:3em; gap: 20px} .animal_info_box {width: 100%; min-height:auto;} .animal_info_box.point1:before, .animal_info_box.point2:before {background: none} .animal_info_box h2 { height:auto; margin-top:0; margin-bottom:20px} .animal_info_box h2:before { width:100%; height:50px; border-radius:50px } .animal_info_box.point1 h2:before { background:none; background-color:var(--color-point2); } .animal_info_box.point2 h2:before { background:none; background-color:var(--color-point); } } @media all and (max-width: 768px) { .animal_info_box dt { font-size:1.5em } .animal_info_box dd.bg { padding:5px 20px } .animal_info_box dd.text { font-size:1.125em; height:auto; padding:10px 0 } } @media all and (max-width: 435px) { .animal_info_box ul { width:100%} }