.visual_slide { width: 100%; height: 26.25rem; overflow: hidden; position: relative; } .visual_slide img { width: 100%; height: 100%; } .visual_slide .slick-dots { position: absolute; bottom: 2.5rem; right: 50%; transform: translateX(50%); z-index: 1; overflow: hidden; } .visual_slide .slick-dots li { font-size: 0; width: 0.625rem; height: 0.625rem; border-radius: 50%; background-color: #dadad9; float: left; margin-right: 0.875rem; cursor: pointer; } .visual_slide .slick-dots li.slick-active { background-color: #fff; } .visual_slide .slick-dots li:last-child { margin-right: 0; } .visual_slide .slick-dots li button { font-size: 0; opacity: 0; } @media all and (min-width: 1025px) { .visual_zone img { vertical-align: top; } .visual_zone .visual_box { width: 73.47%; } .visual_zone .side_banner { width: 26.53%; } } .side_top_bner { width: 100%; height: auto; overflow: hidden; } .side_btm_slide { width: 100%; height: 18.75rem; overflow: hidden; vertical-align: middle; } .con02_bner > .wrap_1280 { background-color: #f5f5f5; padding: 3.125em 0; } .con02_bner .wrap_1280 > div { display: inline-block; vertical-align: middle; } .con02_link .c02_link { width: 11.25rem; padding: 0.5em 0; border-radius: 3.125rem; color: #fff; display: inline-block; } .con02_link .c02_link.dst_01 { width: 15.75rem; } .con02_link .c02link_login { background-color: #222; } .con02_link .c02link_join { background-color: #d50000; } .swiper_slide_box { position: relative; } .slide_arrow { width: 1.5625rem; height: 2.9375rem; position: absolute; top: 50%; transform: translateY(-50%); font-size: 0; display: block; } .slide_next_prev { background: url("../images/common/prve_btn.png") center no-repeat; background-size: contain; left: -4.0625rem; } .slide_next_btn { background: url("../images/common/next_btn.png") center no-repeat; background-size: contain; right: -2.8125rem; } .main_comment_box.swiper-container { position: relative; margin-right: -0.3125em; padding-bottom: 2.5em; } .main_comment_box.swiper-container.jinbo_tv { padding-bottom: 0.625rem; } .main_comment_box.swiper-container .comment_item { padding-right: 1.25em; margin-right: 0.0625em; } .main_comment_box.swiper-container .comment_item_box { width: 100%; height: 19.0625rem; border: 1px solid #e4e4e4; padding: 1.875em 1.5em 0; overflow: hidden; transition: all 0.3s; margin-top: -0.3125rem; } .main_comment_box.swiper-container > .swiper-pagination-progressbar { top: auto; bottom: 0; background-color: #e7e7e7; width: 100%; } .main_comment_box.swiper-container .swiper-scrollbar-drag { background-color: #d50000; } .main_comment_box.swiper-container > .swiper-scrollbar { height: 0.3125rem; width: 100%; left: auto; right: 1.25rem; } .com_top { border-bottom: 1px solid #e4e4e4; } .com_middle { height: 10rem; padding: 1.25em 0; overflow: hidden; } .com_middle p { width: 100%; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 4.5em; } .comment_item_data { height: 4.375rem; display: flex; align-items: center; line-height: 1; } .display_libk { display: inline-block; vertical-align: middle; } .main_notice_tit { line-height: 1; } .main_notice_con { border-top: 2px solid #222; } .main_notice_con ul li { padding: 1.25em; border-bottom: 1px solid #ececec; overflow: hidden; height: 6.875rem; } .main_notice_con .cate { position: relative; display: inline-block; width: 4.375rem; height: 4.375rem; padding:0.625rem 1rem; font-size: 1.125rem; line-height: 1.6875rem; color: #222222; border: 1px solid #dddddd; border-radius: 0; } .notic_day { line-height: 1; } .main_contents5 { color: #333; display: flex; align-items: center; } .main_contents5 .wrap_1280 { width: 100%; background: url("../images/main/banner03.jpg") center no-repeat; background-size: cover; } .main_contents5 .wrap_1280 > a { display: block; height: 10.3125rem; } .main_contents5 .evt_cate { color: #c10402; } .main_comment_box.dst_01 .comment_item_box { margin-top: 0; } .main_comment_box.dst_01 .comment_item_box:hover { background-color: #d50000; color: #fff; } .main_comment_box.dst_01 .comment_item_box:hover .icon_cal.hover_wh { background-image: url("../images/common/icon_cal_wh.png"); } .main_comment_box.dst_01 .comment_item_box:hover .comment_item_data .tc_sub { color: #fff; } .main_comment_box.dst_01 .comment_item_box:hover .com_top { border-color: #ea8080; } .main_comment_box.dst_02 .comment_item_box { padding: 1.5625em 1.25em 0; height: 14.6875rem; } .main_comment_box.dst_02 .com_middle { padding: 0; height: 7.5rem; } .main_comment_box.dst_02 .comment_item_data { height: 2.5rem; } .main_comment_box.dst_03 .comment_item_box { height: auto; width: 100%; } .main_comment_box.dst_03 .com_middle { height: auto; padding: 0.625em 0; padding-top: 0; } .main_comment_box.dst_03 .com_middle P { -webkit-line-clamp: 1; } .main_comment_box.dst_03 > .swiper-scrollbar { display: none; } .video_cont { position: relative; width: 100%; max-width: 30rem; } .video_btn { width: 3.625rem; height: 3.625rem; background: url("../images/common/icon_play_btn.png") center no-repeat; background-size: contain; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } .main_contents8 .slick-dots { display: flex; align-items: center; justify-content: center; margin-right: -0.625em; margin-top: 1.25em; padding-right: 1.25rem; } .main_contents8 .slick-dots li { margin-right: 0.625em; } .main_contents8 .slick-dots li.slick-active button { background-color: #d50000; } .main_contents8 .slick-dots li:last-child { margin-right: 0; } .main_contents8 .slick-dots button { font-size: 0; width: 0.625rem; height: 0.625rem; border-radius: 50%; background-color: #e4e4e4; } .main_contents9 { background: url("../images/main/banner06.jpg") center no-repeat; background-size: cover; padding: 5em 0 5.85em; } .main_contents9 ul { display: flex; width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: center; padding: 0 3.63636em; } .main_contents9 ul li { color: #fff; } .main_contents9 ul li .main_con9_icon { display: block; width: 6.875rem; height: 6.875rem; background-color: #fff; border-radius: 50%; } .horz_dot { display: none !important; } .main_con8_slide { margin-right: -1.25em; } .main_con8_item { padding-right: 1.25em; } .main_con8_item .con8_box { height: 10rem; overflow: hidden; } .visual_item { max-height: 49.375rem; height: auto; overflow: hidden; } .side_top_bner, .side_bottom_bner { position: relative; } .side_top_bner .swiper-scrollbar, .side_bottom_bner .swiper-scrollbar { display: none; } .side_top_bner .swiper-pagination, .side_bottom_bner .swiper-pagination { position: absolute; bottom: 1.25rem !important; right: 1.25rem !important; left: auto !important; width: auto !important; line-height: 1; } .side_top_bner > .swiper-pagination-bullets .swiper-pagination-bullet, .side_bottom_bner > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.625rem; background: rgba(255, 255, 255, 0.5); vertical-align: bottom; } .side_top_bner > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active, .side_bottom_bner > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #ffffff; } .mo_slide.side_bottom_bner { display: none; } .scroll_dot { display: none; } .main_contents7 { background-color: #f5f5f5; } .main_contents7 .main_comment_box.swiper-container .comment_item_box { border: 0; } @media all and (max-width: 1440px) { .main_comment_box { padding: 0 2.5em; } .main_comment_box .comment_item { padding-left: 1.25em; } .main_comment_box .comment_item img { width: 100%; } .slide_next_prev { left: -1.1875rem; } .slide_next_btn { right: -1.25rem; } .com_middle p { -webkit-line-clamp: 3; } .main_comment_box.swiper-container { margin-right: 0; } .visual_slide { height: auto; } .header_wrap .depth_1:nth-child(4) .depth_2 { width: 62rem; } .depth_2 > li { margin-right: 1em; } .main_contents8 .wrap_1280 { width: 100%; padding-right: 0; } .main_contents8 .main_con8_slide { margin-right: 0; } .main_contents8 .con8_box { height: auto; } .main_contents8 .slick-dots { margin-right: 0; padding-right: 1.25rem; } } @media all and (max-width: 1024px) { .slide_arrow { display: none; } .tophead, .gnb { display: none; } .visual_zone { margin: 0 -1.25em; } .visual_zone .side_banner { display: none; } .con02_bner .wrap_1280 > div { display: block; } .con02_bner .wrap_1280 > div p { line-height: 1.2; font-weight: 500; } .con02_link .c02_link { width: 16.25rem; } .con02_link .c02_link.dst_01 { width: 26.875rem; } .main_comment_box.swiper-container.dst_01 .comment_item_box { height: auto; } .main_comment_box.swiper-container.dst_01 .com_middle { height: auto; padding-top: 0.90909em; padding-bottom: 2.72727em; } .main_comment_box.swiper-container.dst_01 .comment_item_data { margin-top: 0; padding-bottom: 1.91769em; } .more_md_size.icon_more { width: 1rem; height: 1rem; margin-bottom: 6.5em; } .main_notice_con ul li { height: auto; padding: 1.875em 1.25em; } .main_notice_con .cate { padding: 0.312rem 0.5rem;} .mo_slide.side_bottom_bner { display: block; margin-left: -1.25rem; } .mo_slide.side_bottom_bner .swiper-scrollbar, .mo_slide.side_bottom_bner .swiper-pagination { display: block; } .mo_slide.side_bottom_bner .swiper-wrapper { margin-top: 1.875rem; } .mo_slide.side_bottom_bner .swiper-pagination { position: absolute; top: 1.875rem; right: 0; left: auto; bottom: auto; width: auto; } .mo_slide.side_bottom_bner .swiper-pagination .swiper-pagination-bullet { width: 1.27854rem; height: 1.27854rem; background: #b2b2b2; opacity: 0.3; margin-left: 1.82648em; margin-right: 0; } .mo_slide.side_bottom_bner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #d50000; opacity: 1; } .mo_slide.side_bottom_bner .swiper-wrapper { padding-bottom: 2.5rem; } .mo_slide.side_bottom_bner .swiper-pagination-progressbar { top: auto; bottom: 0; background-color: #e7e7e7; width: 99%; padding-right: 1.25em; } .mo_slide.side_bottom_bner .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #d50000; } .mo_slide.side_bottom_bner > .swiper-scrollbar { left: 1.25em; } .mo_slide.side_bottom_bner .swiper-scrollbar { background-color: #e7e7e7; width: 100%; height: 0.45662rem; } .mo_slide.side_bottom_bner .swiper-scrollbar-drag { background-color: #d50000; } .mo_slide.side_bottom_bner .swiper-slide { padding-left: 1.25em; } .mo_slide.side_bottom_bner .swiper-slide img { width: 100%; } .mo_slide.side_bottom_bner .main_contents8 .wrap_1280 { padding: 0; } .main_contents8 .slick-dots li { margin-right: 1.82648rem; } .main_contents8 .slick-dots button { width: 1.27854rem; height: 1.27854rem; } .main_comment_box.dst_02 .com_middle { height: 8.625rem; } .main_comment_box.dst_02 .comment_item_box { height: auto; padding: 1.91769em 1.27846em; } .main_contents5 { background: url(../images/main/banner03.jpg) left center no-repeat; background-size: cover; text-align: left; height: auto; } .main_contents5 .wrap_1280 { margin: 0 auto; background-image: none; } .main_contents5 .wrap_1280 > a { padding-left: 0; height: auto; line-height: 1.5; } .main_comment_box.swiper-container > .swiper-scrollbar { right: 0; } .visual_item { max-height: 100%; } .main_contents9 { background-image: url("../images/main/banner06_mo.jpg"); padding: 4.5rem 0 1rem; } .main_contents9 ul li { width: 33.33%; } .main_contents9 ul li .main_con9_icon { width: 10.04566rem; height: 10.04566rem; margin: 0 auto 1.07143em; } .main_contents9 ul li .main_con9_icon i[class^=icon_] { width: 100%; height: 100%; } .main_contents9 ul li span { font-size: 2.55708rem; } .visual_slide .slick-dots li { width: 1.18721rem; height: 1.18721rem; margin-right: 1.46119rem; } } @media all and (max-width: 767px) { .mo_slide.side_bottom_bner { margin-left: 0; margin-right: -1.25rem; } .main_comment_box.swiper-container { margin-right: -1.25rem; } .main_comment_box .comment_item { padding-left: 0; } .main_comment_box .comment_item_box { margin-bottom: 0.0625rem; } .main_comment_box.swiper-container > .swiper-scrollbar { right: 1.25rem; } .mo_slide.side_bottom_bner > .swiper-scrollbar { left: -1.25em; } .video_cont { max-width: 100%; } .main_contents9 ul { padding: 0 1.25em; } .mo_slide.side_bottom_bner .swiper-pagination { right: 1.25rem; } } .main_online_left { border: 1px solid #e7e7e7; } .main_online_left .online_left_img { max-height: 21.875rem; position: relative; } .main_online_left .online_left_img::before { content: ''; display: block; padding-top: 55.5555%; } .main_online_left .online_left_img img { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .main_online_right { overflow: hidden; } .main_online_right li { border-bottom: 1px solid #e7e7e7; padding-bottom: 0.8125rem; margin-bottom: 0.75rem; } .main_online_right li > a { display: flex; align-items: center; justify-content: space-between; } .main_online_right li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .online_right_img { position: relative; width: 16.25rem; max-height: 16.25rem; } .online_right_img::before { content: ''; display: block; padding-top: 61.53%; } .online_right_img img { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .online_right_txt { width: 58%; } .online_right_txt > *[class^=ellip] { height: 4.125rem; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; display: -ms-flexbox; } .online_right_txt > .dp_b { line-height: 1.4; } .online_contents *[class^=ellip] { word-break: keep-all; } .online_contents img { vertical-align: top; } @media all and (max-width: 1441px) and (min-width: 1024px){ .online_right_img::before {padding-top: 61%;} } @media all and (max-width: 1024px) { .main_online_left .online_left_img { max-height: none; } .main_online_right li { padding-bottom: 1.27846rem; margin-bottom: 1.27846rem; } .online_right_txt { width: 75%; } .online_right_txt > p.tc_sub { display: none; } .online_right_img { width: 15.98077rem; height: 15.98077rem; max-height: 9.58846rem; } } .img_ratio_fix .slide_img { position: relative; overflow: hidden; background: #e6e6e6; } .img_ratio_fix .slide_img::before { content: ''; display: block; padding-top: 55.5%; } .img_ratio_fix .slide_img img { display: block; width: 100%; position: absolute; width: 100%; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .video_ratio_fix .video_cont { position: relative; overflow: hidden; } .video_ratio_fix .video_cont::before { content: ''; display: block; padding-top: 56.25%; } .video_ratio_fix .video_cont img { display: block; width: 100%; position: absolute; width: 100%; left: 50%; top: 0; margin-top: -9.4%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media all and (max-width: 501px) { .main_contents9 { padding: 4.5rem 0 2.5rem; } .main_contents9 ul li .main_con9_icon{ width: 8rem; height: 8rem; } .main_contents9 ul li{ margin-bottom: 1.5em; } .main_contents9 ul li span{ font-size: 1.8rem; } .main_contents9 ul li:nth-child(3) ~ li{ margin-bottom: 1em } }