@charset "utf-8"; /* 메인레이어팝업 - 20221105 추가 */ .layer_pop { display: block; position: absolute; right: 10%; top: 430px; width: auto; z-index: 9; visibility: hidden; } /* visibility:hidden 처음은 안보이고 정해진 날짜에 보임 */ .layer_pop .cont { display: block; } .layer_pop .cont img { border: 0; } .layer_pop .close { position: relative; color: #fff; font-size: 14px; padding: 11px 20px 15px 20px; background: rgba(0, 0, 0, 0.4); border-radius: 0 0 20px 20px; text-align: right; } .layer_pop .close .txt { color: #fff; } .layer_pop .close .btn { line-height: 20px; padding: 0 10px; color: #000; background: #ddd; } .blind { position: absolute !important; left: -9999px; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden; } @media screen and (max-width: 600px) {} /* 2022.07.01 추가 */ #mainPop { position: relative; width: 270px; } #mainPop .datalist { width: 270px; } #mainPop .datalist .slick-item a { position: relative; display: block; } #mainPop .datalist .slick-item a:focus:before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 1px dotted #ff0000; } #mainPop .datalist .slick-item img { width: 270px; height: 376px; border-radius: 20px 20px 0 0; } #mainPop .menu { position: absolute; left: 19px; bottom: -30px; color: #fff; z-index: 999; } #mainPop .menu .mPaging { display: inline-block; vertical-align: top; margin: 8px 5px 0 0; } #mainPop .menu .mPaging li { display: none } #mainPop .menu .mPaging li.slick-active { display: block; } #mainPop .menu .mControl { display: inline-block; } #mainPop .menu .mControl .m { display: inline-block; position: relative; width: 37px; height: 37px; background: #fff; border-radius: 100%; overflow: hidden; } #mainPop .menu .mControl .m:before { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; background: url() no-repeat; } #mainPop .menu .mControl { display: none; } #mainPop .menu .mControl .m.play { display: none; } #mainPop .menu .mControl .m.prev:before { background-image: url(../../images/common/ic20left2.png); } #mainPop .menu .mControl .m.next:before { background-image: url(../../images/common/ic20right2.png); } #mainPop .menu .mControl .m.stop:before { background-image: url(../../images/common/ic20stop2.png); } #mainPop .menu .mControl .m.play:before { background-image: url(../../images/common/ic20play2.png); } #mainPop .menu .mControl .m.more:before { background-image: url(../../images/common/ic20plus2.png); } @media screen and (max-width: 600px) { .layer_pop { display: none; } } /* slick-slider css */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; /* cursor: hand; */ } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; -webkit-transform: translate3d(0, 0, 0); } .slick-slide img { display: block; margin: 0 auto; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { /* pointer-events: none; */ } .slick-initialized .slick-slide { display: block; } .slick-initialized .slick-slide iframe { width: 95%; height: 490px; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); } .slick-slide { transform: translate3d(0, 0, 0); height: auto !important; } @media screen and (max-width: 640px) { .slick-initialized .slick-slide iframe { width: 100%; height: 400px; } .slick-slide { /* height: 100% !important; */ } } #visual { position: relative; width: 100%; height: auto; z-index: 2; overflow: hidden; } .visual .swiper-slide .inner { position: relative; width: 100%; /* height: 100%; */ height: 733px; z-index: 6; } .visual .swiper-slide .mvisualImage { position: absolute; width: 100%; /* height: 100%; */ height: 733px; left: 0; top: 0; z-index: 1; } .visual .swiper-slide .visual_txt { position: absolute; top: 23%; left: 0; z-index: 100; width: 100%; text-align: center; } .visual .swiper-slide .visual_txt .em { color: #f8be3b; } .visual .swiper-slide .visual_txt .vs_title1 { /*opacity: 0;*/ color: #fff; font-family: 'Pretendard'; font-size: 100px; font-weight: 800; overflow: hidden; padding-bottom: 3px; } .visual .swiper-slide .visual_txt .vs_title1 span { display: block; line-height: 1.15; letter-spacing: 0.03em; display: inline-block; } .visual .swiper-slide .visual_txt .vs_title2 { /*opacity: 0;*/ color: #fff; margin-top: 42px; font-size: 24px; font-weight: 400; line-height: 1.4; overflow: hidden; } /**/ .visual .swiper-slide .visual_txt .vs_title2 { font-size: 20px; } /**/ .visual .swiper-slide .visual_txt .vs_title2 span { display: block; font-weight: 400; letter-spacing: 0.02em; } .visual .swiper-slide .visual_txt .btn { margin-top: 80px; width: 250px; height: 51px; overflow: hidden; margin: 0 auto; } /**/ .visual .swiper-slide .visual_txt .btn { margin-top: 50px; } /**/ .visual .swiper-slide .visual_txt .btn a { /*opacity: 0;*/ display: flex; align-items: center; justify-content: center; text-transform: uppercase; width: 100%; height: 100%; border: solid 3px #fff; background-color: #fff; color: #05bda1; font-size: 18px; border-radius: 25px; transition: all 0.3s ease-in-out; } .visual .swiper-slide .visual_txt .btn a:hover { border-radius: 0; } .visual .swiper-slide .visual_txt .btn a i { font-size: 14px; color: #05bda1; vertical-align: middle; display: inline-block; margin: 0 0 0 10px; } .visual .swiper-slide .visual_txt .location-tit { margin-top: 50px; } .visual .swiper-slide .visual_txt .location-tit:before { display: inline-block; content: ''; width: 20px; height: 20px; background-image: url(/images/main/20230118022411254.png); background-repeat: no-repeat; background-position: center center; vertical-align: middle; margin-right: 5px; } .visual .swiper-slide .visual_txt .location-tit p { display: inline-block; vertical-align: middle; color: #fff; font-size: 18px; } .visual .swiper-slide.swiper-slide-active {} .visual .swiper-slide.swiper-slide-active .visual_txt .vs_title1, .visual .swiper-slide.swiper-slide-active .visual_txt .vs_title2 { opacity: 1; } .visual .swiper-slide.swiper-slide-active .visual_txt .vs_title1 span { animation: txtLeft 1.5s 0.3s; animation-fill-mode: both; } .visual .swiper-slide.swiper-slide-active .visual_txt .vs_title2 span { animation: ani_3 1.0s 1.0s; animation-fill-mode: both; } .visual .swiper-slide.swiper-slide-active .visual_txt .btn a { animation: ani_3 0.8s 1.5s; animation-fill-mode: both; } .visual .mvisualImage { overflow: hidden; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; /* animation:visual_bg 15s infinite alternate; */ } .visual .visu01 .mvisualImage { /* background-image: url(/images/main/20230208_01.jpg); */ } .visual .visu02 .mvisualImage { /* background-image: url(/images/main/20230208_02.jpg); */ } /* .visual .visu02 .mvisualImage { background-image: url(../../images/main/visual_3.jpg); } .visual .visu03 .mvisualImage { background-image: url(../../images/main/visual_2.jpg); } .visual .visu04 .mvisualImage { background-image: url(../../images/main/visual_2.jpg); } */ .visual .mvisualImage+.inner { max-width: 1700px; } .visualMain { width: 1903px; opacity: 0; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms; } /* .visual .visu01 .visual_txt .btn a { background-color:#f5bf0f; } .visual .visu02 .visual_txt .btn a { background-color:#ff4338; } .visual .visu03 .visual_txt .btn a { background-color:#ff4338; } .visual .visu04 .visual_txt .btn a { background-color:#f5bf0f; } */ .visual .control_box { position: absolute; left: 0; bottom: 10%; width: 100%; text-align: center; } .visual .swiper-pagination { position: relative; max-width: 1400px; width: 100%; margin: 0 auto; } .visual .swiper-pagination .swiper-pagination-bullet { position: relative; width: 42px !important; text-align: center; opacity: 1; background-color: transparent; display: inline-block; margin-right: 10px !important; } .visual .swiper-pagination .swiper-pagination-bullet em { position: relative; width: 100%; box-sizing: border-box; height: 42px; display: flex; justify-content: center; align-items: center; font-family: 'dunbar-tall', sans-serif; font-size: 12px; color: rgba(255, 255, 255, 1); font-weight: 100; font-style: normal; } .visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active em { color: #fff; font-weight: 400 } .visual .swiper-pagination .swiper-pagination-bullet span { position: relative; display: block; box-sizing: border-box; } /* .visual .playstop { position:relative; display:inline-block; vertical-align:top; z-index:3; margin-left:-250px; } .visual .playstop .stop a { position:relative; display:block; width:30px; height:30px; } .visual .playstop .stop a:after {content:""; display:block; width:100%; height:100%; background:url(https://www.cyberlogitec.com/img/main/swiper_btn_l.png) no-repeat center; position:absolute; left:0; top:0;} .visual .playstop .stop.play a:after {background:url(https://www.cyberlogitec.com/img/main/swiper_btn_r.png) no-repeat center; } */ .visual .circular-chart { display: block; width: 48px; /* height: none; */ position: absolute; left: 50%; top: -2px; transform: translateX(-50%); z-index: 8; box-sizing: border-box; } .visual .circle { opacity: 0; stroke: rgba(255, 255, 255, 0.5); fill: none; /* stroke-width: 0.7; stroke-dasharray: 100; stroke-dashoffset: 100; */ box-sizing: border-box; } .visual .circle.on { opacity: 1; } .visual .swiper-pagination .swiper-pagination-bullet .circle { /* stroke-dashoffset: 100; */ } .visual .swiper-pagination .swiper-pagination-bullet .circle.on {} .swiper-btn { width: 30px; height: 56px; margin-top: 0px; } .swiper-btn.swiper-button-prev { left: 60px; background: url(../../images/main/swiper_btn_l.png) no-repeat center; } .swiper-btn.swiper-button-next { right: 60px; background: url(../../images/main/swiper_btn_r.png) no-repeat center; } .swiper-btn.swiper-button-prev, .swiper-btn.swiper-button-next { opacity: 0; } .swiper-btn.swiper-button-prev { animation: ani_2 0.8s 0.5s; animation-fill-mode: both; } .swiper-btn.swiper-button-next { animation: ani_1 0.8s 0.5s; animation-fill-mode: both; } .swiper-button-next:after, .swiper-button-prev:after { display: none; } @media screen and (max-width: 1600px) { .swiper-btn.swiper-button-prev { left: 40px; } .swiper-btn.swiper-button-next { right: 40px; } } @media screen and (max-width: 1440px) { .swiper-btn.swiper-button-prev { left: 20px; } .swiper-btn.swiper-button-next { right: 20px; } } @media screen and (max-width: 1280px) { .visual .swiper-slide .inner { height: 500px; } .visual .swiper-slide .mvisualImage { height: 500px; } .visual .swiper-slide .visual_txt .vs_title1 { font-size: 40px; } .visual .swiper-slide .visual_txt .vs_title2 { margin-top: 35px; font-size: 20px; } .visual .swiper-slide .visual_txt .location-tit { margin-top: 20px; } .visual .swiper-slide .visual_txt .location-tit p { font-size: 16px; } } @media screen and (max-width: 1024px) { .visual_slider { height: auto !important; } .visual .swiper-slide { /* height: 72vh; */ } .visual .swiper-slide .visual_txt { top: 22%; } /* .visual .swiper-slide .visual_txt { top:250px; } */ .visual .swiper-slide .visual_txt .vs_title1 { font-size: 30px; } .visual .swiper-slide .visual_txt .vs_title2 { margin-top: 30px; font-size: 18px; } .visual .swiper-slide .visual_txt .btn { margin-top: 50px; height: 45px; } .visual .control_box { bottom: 15%; } } @media screen and (max-width: 860px) { .visual .swiper-slide .mvisualImage { /* height: 600px; */ } .visual .swiper-slide:after { top: 10%; } .visual .swiper-slide:before { top: 20%; } } @media screen and (max-width: 600px) { .visual .swiper-slide .visual_txt { left: 0; padding: 0 56px; } .visual .swiper-slide .visual_txt .vs_title1 { font-size: 24px; } .visual .swiper-slide .visual_txt .vs_title2 { margin-top: 25px; font-size: 16px; } .visual .swiper-slide .visual_txt .vs_title2 br { display: none } .visual .swiper-slide .visual_txt .btn a { font-size: 14px; border-width: 2px; width: 80%; margin: 0 auto; } .visual .control_box { display: none; } .swiper-btn.swiper-button-prev { left: 15px; background-size: 20px !important; } .swiper-btn.swiper-button-next { right: 15px; background-size: 20px !important; } .visual .swiper-slide .visual_txt .location-tit p { font-size: 14px; } } @media screen and (max-width: 480px) { #visual, .visual.swiper-container, .visual .swiper-slide { height: 450px; } .visual .swiper-slide .mvisualImage, .visual .swiper-slide .inner { height: 390px; } .visual .swiper-slide .visual_txt { top: 22%; } .visual .swiper-slide .visual_txt .vs_title1 { font-size: 25px; } .visual .swiper-slide .visual_txt .vs_title2 { margin-top: 20px; font-size: 15px; } .visual .swiper-slide .visual_txt .vs_title2 span { display: inline-block; } .visual .swiper-slide .visual_txt .location-tit { /* display: none; */ } .visual .control_box { bottom: 15%; } .visual .swiper-pagination .swiper-pagination-bullet { width: 29px !important; margin-right: 8px !important; } .visual .swiper-pagination .swiper-pagination-bullet em { height: 29px; font-size: 10px; } .visual .circular-chart { width: 35px; } } /* Insta */ #main .snsInsta { margin-bottom: 5%; } #main .snsInsta .instaWrap { position: relative; } #main .snsInsta .tit { display: block; letter-spacing: -0.02em; color: #252523; font-size: 40px; text-transform: uppercase; font-weight: 800; } #main .snsInsta .tit span { color: #00b297; } #main .snsInsta .slick-prev, #main .shortForm .movie-box .slick-prev { position: absolute; width: 60px; height: 60px; top: 250px; left: 0px; background: rgba(255, 255, 255, 0.5) url(../../images/main/btn_swiper_prev.png) center center no-repeat; } #main .snsInsta .slick-next, #main .shortForm .movie-box .slick-next { position: absolute; width: 60px; height: 60px; top: 250px; right: 0px; background: rgba(255, 255, 255, 0.5) url(../../images/main/btn_swiper_next.png) center center no-repeat; } .slick-prev::before, .slick-next::before { opacity: 0; display: none; } /* shortform */ #main .shortForm { padding: 6% 0; } #main .shortForm .movie-box { position: relative; } #main .shortForm .btn_group { position: absolute; right: 0; top: 0; } #main .shortForm .btn_group .video-more { background: transparent; border-color: #4d4d4d; border-radius: 5px; } #main .shortForm .movie-box .tit { display: inline-block; font-size: 20px; text-align: center; color: #4d4d4d; font-size: calc(12px + 0.4vw); font-weight: 400; /* margin-top: 1.5%; */ } #main .shortForm .movie-box .tit span { letter-spacing: -0.02em; color: #252523; font-size: 40px; text-transform: uppercase; font-weight: 800; margin-right: 20px; } #main .snsInsta .swiper-button-prev, #main .shortForm .movie-box .swiper-button-prev { position: absolute; width: 60px; height: 60px; top: 50%; left: 0px; background: rgba(255, 255, 255, 0.5) url(../../images/main/btn_swiper_prev.png) center center no-repeat; } #main .snsInsta .swiper-button-next, #main .shortForm .movie-box .swiper-button-next { position: absolute; width: 60px; height: 60px; top: 50%; right: 0px; background: rgba(255, 255, 255, 0.5) url(../../images/main/btn_swiper_next.png) center center no-repeat; } #main .snsInsta .swiper-button-prev:hover, #main .snsInsta .swiper-button-next:hover, #main .shortForm .movie-box .swiper-button-prev:hover, #main .shortForm .movie-box .swiper-button-next:hover { background-color: #17b79f; } .sec02_slider { width: 100%; margin-top: 2%; position: relative; } .sec02_slider01_list { /* height: 650px; */ } .sec02_slider01_list li .txt_box { display: block; margin: 20px 10px; color: #000; font-weight: 500; font-size: 16px; line-height: 1.3; margin-bottom: 0; } .sec02_slider01_list li .txt_box .nick { position: relative; margin: 20px 0; } .sec02_slider01_list li .txt_box .nick span { font-size: 14px; font-weight: 300; margin-left: 30px; } .sec02_slider01_list li .txt_box i.nick01 { position: absolute; left: 0; top: -4px; width: 25px; height: 25px; } .sec02_slider01_list li .txt_box .date { margin: 10px 0; color: #888; font-size: 14px; font-weight: 300; } .sec02_slider02_list { /* height: 450px; */ } .sec02_slider02_list li { padding: 10px; } .sec02_slider02_list li .insta-link { width: 100%; position: relative; display: block; border: 1px solid #ddd; height: 300px; overflow: hidden; } .sec02_slider02_list li .insta-img img { width: 100%; height: 100%; } .sec02_slider02_list li .insta-link .profile { position: relative; margin: 20px; } .sec02_slider02_list li .insta-link .profile span { font-size: 14px; font-weight: 300; margin-left: 30px; } .sec02_slider02_list li .insta-link i.nick01 { position: absolute; left: 0; top: -4px; width: 25px; height: 25px; border-radius: 50%; overflow: hidden; } .sec02_slider02_list li .profile1 { display: inline-block; padding: 5px; margin: 20px 0; color: #333; border: 1px solid #ddd; } .sec02_slider02_list li .txt_box { color: #000; font-weight: 500; font-size: 16px; line-height: 1.3; margin-top: 10%; } @media screen and (max-width: 1024px) { #main .snsInsta { /* margin: 35px 0; */ } #main .snsInsta .tit { /* font-size: 25px; */ } .sec02_slider {} } @media screen and (max-width: 640px) { #main .snsInsta .tit { font-size: 20px; text-align: center; } .sec02_slider02_list li .txt_box { font-size: 14px; margin-top: 5%; } #main .shortForm { height: auto; } .sec02_slider01_list { height: auto; } #main .shortForm .movie-box .tit span { font-size: 20px; } #main .shortForm .btn_group { position: static; display: flex; justify-content: center; /* margin-top: 20px; */ } #main .shortForm .btn_group .video-more { height: 35px; line-height: 35px; padding: 10px 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; } } /* news */ #main .news { position: relative; padding: 0; background-color: #f6f6f8; padding: 5% 0; } #main .news .news-box { position: relative; } #main .news .tit { overflow: hidden; } #main .news .tit, #main .news .tit span { display: block; letter-spacing: -0.02em; color: #252523; font-size: 40px; text-transform: uppercase; font-weight: 800; } #main .news .tit .tit_sub { color: #4d4d4d; font-size: calc(12px + 0.4vw); font-weight: 400; margin-top: 1.5%; } #main .news .btn_group { position: absolute; right: 0; top: 15px; } #main .news .btn_group .store-more { background: transparent; border-color: #4d4d4d; border-radius: 5px; } #main .news .imgbox { position: relative; height: 337px; border-radius: 15px; overflow: hidden; } #main .news .imgbox p { position: absolute; display: inline-block; letter-spacing: 0.02em; color: #fff; font-size: 16px; font-weight: 500; padding: 10px; right: 10px; bottom: 0; z-index: 1; } #main .news .imgbox p.ty1 { background: #81522c; } #main .news .imgbox p.ty2 { background: #562c81; } #main .news .imgbox p.ty3 { background: #3d8851; } #main .news .imgbox p.ty4 { background: #2475a3; } #main .news .imgbox img { width: 100%; transition: transform .3s ease-in-out; min-height: 100%; } #main .news .imgbox img { transform: scale(1.1); } @media screen and (max-width: 1024px) { #main .news .tit, #main .news .tit span { font-size: 38px; } } @media screen and (max-width: 640px) { #main .news .tit, #main .news .tit span { font-size: 20px; text-align: center; } #main .news .btn_group { position: static; display: flex; justify-content: center; margin-top: 20px; } #main .news .btn_group .store-more { height: 35px; line-height: 35px; padding: 10px 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; } } /* news > 탭 */ ul.tabs { margin: 0px; padding: 0px; list-style: none; font-size: 0; display: flex; justify-content: center; } ul.tabs.mt { margin-top: 3%; } ul.tabs.mb { margin-bottom: 5%; } ul.tabs:after { content: ''; display: block; clear: both; } ul.tabs li { display: block; background: none; text-align: center; color: #000; cursor: pointer; border: 1px solid #ddd; margin-left: -1px; background-color: #fff; box-sizing: border-box; font-size: 20px; font-weight: 500; width: 25%; } ul.tabs li a { position: relative; letter-spacing: 0.02em; color: #252523; font-size: 18px; font-size: calc(14px + 0.2vw); font-weight: 700; transition: all 0.3s ease-in-out; padding: 14px 10px; display: flex; justify-content: center; align-items: center; height: 100%; } ul.tabs li:last-child { margin-right: 0; } ul.tabs li:first-child { margin-left: 0; } ul.tabs li.current { position: relative; } ul.tabs li.current::before { display: block; content: ''; position: absolute; border: 1px solid #000; width: calc(100% + 0px); height: calc(100% + 0px); left: -1px; top: -1px; } .tab-content { display: none; } .tab-content.current { display: inherit; } @media screen and (max-width: 1024px) { ul.tabs li a { font-size: 16px; } } @media screen and (max-width: 640px) { ul.tabs li a { font-size: 14px; padding: 10px 10px; } } /* news > 슬라이드 */ .popup_zone3 { margin-top: 3%; position: relative; } .popup_zone3 .column { display: block; } .popup_zone3 .popupzone1 { max-width: 1480px; margin: 0 auto; } .popup_zone3 .slick-list { margin: 0 -15px; } .popup_zone3 .slick-track {} .popup_zone3 .slick-slide { margin: 0 15px; } .popup_zone3 a { display: block; } .popup_zone3 .img { display: block; overflow: hidden; max-height: 240px; } .popup_zone3 .img img { min-height: -webkit-fill-available; min-height: 100%; max-width: 270px; min-width: 100%; } .popup_zone3 .title { color: #222; font-size: 21px; font-weight: 600; max-height: 55px; line-height: 1.4; margin-top: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .popup_zone3 .place { color: #777; font-size: 16px; line-height: 1.5; font-weight: 300; margin-top: 15px; max-height: 70px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media screen and (max-width: 1024px) { .popup_zone3 .title { font-size: 18px; } .popup_zone3 .place { font-size: 15px; line-height: 1.3; } } @media screen and (max-width: 1024px) {} /* animation */ #main .news .tit span, #main .news .tabmenu li {} #main .news .news-box.subOn .tit span { animation: txtUp 0.8s 0.2s; animation-fill-mode: both; } #main .news .news-box.subOn .tabmenu li:nth-child(1) { animation: ani_2 0.5s 0.2s; animation-fill-mode: both; } #main .news .news-box.subOn .tabmenu li:nth-child(2) { animation: ani_2 0.5s 0.4s; animation-fill-mode: both; } #main .news .news-box.subOn .tabmenu li:nth-child(3) { animation: ani_2 0.5s 0.6s; animation-fill-mode: both; } #main .news .news-box.subOn .tabmenu li:nth-child(4) { animation: ani_2 0.5s 0.8s; animation-fill-mode: both; } #main .news .news-box.subOn .tabmenu li:nth-child(5) { animation: ani_2 0.5s 1.0s; animation-fill-mode: both; } #main .news .news-box.subOn .tabmenu li:nth-child(6) { animation: ani_2 0.5s 1.2s; animation-fill-mode: both; } #main .news .news-box.subOn .tabmenu li:nth-child(7) { animation: ani_2 0.5s 1.4s; animation-fill-mode: both; } #main .news .news-box.subOn .tabmenu li:nth-child(8) { animation: ani_2 0.5s 1.6s; animation-fill-mode: both; } #main .news .news-box.subOn .tabmenu li:nth-child(9) { animation: ani_2 0.5s 1.8s; animation-fill-mode: both; } #main .news .news-box.subOn .slideTab.active { animation: ani_3 0.8s 0.3s; animation-fill-mode: both; } .sw_new1 { transform: translate3d(0px, 0px, 0px) scaleX(0.7) scaleY(1); transition-duration: 600ms; } /* 메인수정 */ .box_wrap { display: flex; flex-flow: wrap; display: -ms-flexbox; -ms-flex-wrap: wrap; padding: 7% 0 7% 0; } .left_box { width: calc(100% - 390px); margin-right: 26px; } .right_box { position: relative; width: 364px; } /* 배너3개 */ .box3_wrap { overflow: hidden; margin-bottom: 26px; display: flex; } .box3 { position: relative; display: inline-block; float: left; width: calc(33.3% - 17px); border-radius: 5px; padding: 50px 35px 166px 35px; margin-right: 26px; } .box3.menu_box3 { margin-right: 0; } .box3.menu_box1 { background: #f3f0e6 url("https://gyeongju.go.kr/hwangridan/images/main/20230119102703645.jpg") no-repeat; background-position: bottom; background-size: contain; } .box3.menu_box2 { background: #efeee8 url("https://gyeongju.go.kr/hwangridan/images/main/20230119102704028.jpg") no-repeat; background-position: bottom; background-size: contain; } .box3.menu_box3 { background: #fdeece url("https://gyeongju.go.kr/hwangridan/images/main/20230119102704132.jpg") no-repeat; background-position: bottom; background-size: contain; } /* 배너2개 */ .box2_wrap { overflow: hidden; /* margin-bottom: 26px; */ display: flex; } .box2 { position: relative; display: inline-block; float: left; width: calc(100% - 17px); border-radius: 5px; padding: 50px 35px 27px 35px; margin-right: 26px; } .box2.menu_box3 { margin-right: 0; } .box2.menu_box1 { background: #f3f0e6 url("https://gyeongju.go.kr/hwangridan/images/main/20231107032646537.png") no-repeat; background-position: bottom; background-size: cover; } .box2.menu_box2 { background: #efeee8 url("https://gyeongju.go.kr/hwangridan/images/main/20230126012514942.png") no-repeat; background-position: bottom; background-size: cover; } .box2.menu_box3 { width: 50%; background: #c8ece7 url("https://gyeongju.go.kr/hwangridan/images/main/20250509101715488.png") no-repeat; background-position: 50% 45%; background-size: 48%; padding: 20px 20px 20px 20px; } .box2.menu_box3 .mutit { font-size: calc(13px + 0.35vw); color: #000; } .mutit { font-size: calc(14px + 0.8vw); color: #000; font-weight: bold; margin-bottom: 15px; } .sbtxt { font-size: 17px; font-size: calc(12px + 0.2vw); color: #4d4d4d; line-height: 24px; margin-bottom: 30px; } .box2 .mutit { color: #fff; } .box2 .sbtxt { color: #fff; } .btn_menu_more { position: absolute; right: 0; bottom: 0; background: #fff url("https://gyeongju.go.kr/hwangridan/images/main/20230119102704346.jpg") no-repeat; background-position: right 10px center; } .btn_menu_more a { display: block; color: #000; font-weight: bold; padding: 15px 80px 15px 25px; } .btn_menu_more a.blank::after { content: ''; position: absolute; left: 85px; top: 13px; width: 18px; height: 18px; overflow: hidden; background: url(/images/common/blank_icon.png) 0px -12px no-repeat; } .box_bottom { display: flex; flex-flow: wrap; display: -ms-flexbox; -ms-flex-wrap: wrap; width: 100%; overflow: hidden; border-radius: 5px; background: #e9ecf1 url("https://gyeongju.go.kr/hwangridan/images/main/20230119102704157.png") no-repeat; } .menubox5_left { display: inline-block; width: 50%; float: left; padding: 58px 40px; } .menubox5_left .sbtxt { margin-bottom: 0; } .menubox5_right { position: relative; display: inline-block; width: 50%; float: left; } @media all and (max-width: 1440px) { .box_wrap { padding: 5% 0 4% 0; } .sbtxt br { display: none; } } @media all and (max-width: 1400px) { .box3 { width: calc(33.3% - 18px); padding: 5% 5% 14% 5%; } } @media all and (max-width: 1200px) { .box_wrap { /* padding: 4% 0 4% 0; */ } .box3 { margin-right: 10px; width: calc(33.3% - 6px); } .box2 { margin-right: 10px; } .left_box { width: 100%; margin-right: 0; } .right_box { width: 100%; margin-top: 25px; } } @media all and (max-width: 600px) { .box_wrap { padding: 20px 0; } /* 배너3개 */ .box3_wrap { flex-direction: column; margin-bottom: 0; } .box3 { width: 100%; padding: 5% 5% 5% 5%; margin-right: 0; margin-bottom: 4%; } .box3:not(:last-child) {} .box3.menu_box3 {} .box3.menu_box1 { background-position: right 1%; background-size: 46% 100%; } .box3.menu_box2 { background-position: right 1%; background-size: 46% 100%; } .box3.menu_box3 { background-position: right 1%; background-size: 46% 100%; } /* 배너2개 */ .box2_wrap { flex-direction: column; margin-bottom: 0; } .box2 { width: 100%; padding: 5% 5% 5% 5%; margin-right: 0; } .box2:not(:last-child) { margin-bottom: 4%; } .box2.menu_box3 {} .box2.menu_box1 {} .box2.menu_box2 {} .box2.menu_box3 { width: 100%; height: 100px; background-position: 60% 50%; background-size: 90px; padding: 5% 5% 5% 5%; } .mutit { margin-bottom: 10px; } .sbtxt { width: 50%; margin-bottom: 0; line-height: 17px; } .btn_menu_more { background-size: 19px; } .btn_menu_more a { font-size: 13px; font-weight: 500; padding: 10px 47px 10px 10px; } .box_bottom {} .menubox5_left { padding: 5% 0% 5% 5%; width: 54%; } .menubox5_left .sbtxt {} .menubox5_right { width: 46%; } .menu_box5_img {} .menu_box5_img img { max-height: 112px; } } /* 알림존 */ .title_wrap { border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 15px 20px; } .main_tit1 { font-weight: bold; color: #000; font-size: 18px; } .box_right { position: relative; display: inline-block; width: 420px; float: left; } .popup_zone { clear: both; } .popup_zone a { display: block; } .popup_zone a:focus { border: 1px dashed #000; } .popup_zone img { display: inline-block; width: 100%; } .popup_zone .btn_area { position: absolute; top: 11px; right: 8px; } .slide_num { margin-right: 10px; } .btn_box { display: inline-block; float: right; } .btn_box>div { display: inline-block; cursor: pointer; text-align: center; color: #000; font-weight: bold; font-size: 16px; } .btn_box button.slick-arrow.slick-hidden { display: inline-block } .btn_box button { margin: 0; padding: 0; border: 0; vertical-align: middle; background: none; } .popup_zone img { display: inline-block; width: 100%; } .btn_box button.btn_play { width: 30px; height: 30px; font-size: 0; vertical-align: middle; border-radius: 12px; background: url(https://gyeongju.go.kr/hwangridan/images/main/20230119102703532.jpg)no-repeat; background-position: center; } .btn_box button.btn_play.on { background: url("https://gyeongju.go.kr/hwangridan/images/main/20230119030035994.jpg")no-repeat; background-position: center; } .popupzone1 { border: 1px solid #ccc; } @media all and (max-width: 1200px) { .popupzone1 { border: 1px solid #ccc; padding: 0 0 0 10px; } .popup_zone .slick-initialized .slick-slide { padding: 10px 10px 10px 0; } } @media all and (max-width: 900px) { .box_right { width: 100%; margin-top: 50px; } .popupzone1 .slick-slide { margin: 0 10px; } .popup_zone .btn_area .btn_play { background-size: 100%; } } @media all and (max-width: 600px) { .box_right { margin-top: 30px; } .popupzone1 .slick-slide { margin: 0; } .slide_num { font-size: 16px; vertical-align: middle; } }