/******************************************************************************************************* 메인 기본설정 *******************************************************************************************************/ html, body {position: relative;height: 100%;} body {background: #eee;color:#000;margin: 0;padding: 0;} /*-------------------------------------------------------------------------------------------- 각 섹션 내용 부분 --------------------------------------------------------------------------------------------*/ .inner {position:relative;z-index:3;} /******************************************************************************************************* slick 스타일 설정 *******************************************************************************************************/ .slider {display:block;width:100%;margin:0px;} .slick-vertical .slick-slide {display:block;border:none;} .slick-list {display:block;} .slick-slide { margin: 0px 0px; } .slick-slide a {color:#fff;} .slick-slide a:hover {color:#ff9900;} .slick-slide img { width: 100%; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out .3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } /* 새로운 수정 */ .slick-prev, .slick-next, .slick-prev:before, .slick-next:before {width:20px;height:30px;} .slick-prev, .slick-next {top:50%;transform: translate(-50%, -50%);margin-top:0;} .slick-prev {right:30px;left:auto;} .slick-next {right:0px;} .slick-prev:before, .slick-next:before {display:inline-block;font-size:30px;color:#fff;line-height:1em;} .slick-prev:before {content: "\f106";} .slick-next:before {content: "\f107";} .slick-slide {position:relative;} .new_icon {position:absolute;left:0;top:6px;display:inline-block;width:24px;height:24px;line-height:20px;font-size:14px;text-align:center;background:#f8b412;border-radius:100%;} .slick-slide a {width:100%;padding-left:35px;} /******************************************************************************************************* 최신글 스타일 설정 *******************************************************************************************************/ .basic_li i {font-size:0.75em;margin-left:5px;} .outbox {position:relative;z-index:3;} /**************************************************************************************************************************************** 메인 영역 설정 ****************************************************************************************************************************************/ .section .container h1 {font-size:2em;} #section1 h1 {color:#000;} #section2 h1 {color:#000;} #section3 h1 {color:#000;} #section4 h1 {color:#fff;} #section5 h1 {color:#000;} #section6 h1 {color:#fff;} #section7 h1 {color:#000;} /*-------------------------------------------------------------------------------------------- 메인 탭메뉴 --------------------------------------------------------------------------------------------*/ .mimgbox {} .mimgbox img {border:1px solid #ddd;} .mtitlebox {font-size:18px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;} /*-------------------------------------------------------------------------------------------- 메인 뉴스티커 --------------------------------------------------------------------------------------------*/ .news_ticker_box {display:inline-block;position:absolute;right:0;bottom:0;width:70%;padding:0.5em 0 0.5em 0.5em;z-index:10;background:rgba(0,0,0,0.5);} .news_ticker_box .titlebox {display:inline-block;float:left;color:#ea5415;padding:0 1.5em 0 1em;font-size:16px;line-height:35px;} .newsticker {position:relative;overflow:hidden;width:410px;height:21px;text-align:left;} .newsticker ul {padding:0;margin:0} .newsticker ul li {float:left;width:410px;;padding:0;font-size:16px;color:#97a3a9;letter-spacing:-1px;height:35px;line-height:35px;list-style:none;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;} .newsticker ul li a {color:#fff} .newsticker ul li strong {color:#fff;font-weight:400;margin-right:0.5em;} /*-------------------------------------------------------------------------------------------- 아이콘 이미지 확대 축소 --------------------------------------------------------------------------------------------*/ .iconimg_zoom {} .iconimg_zoom ul {} .iconimg_zoom ul li {} .iconimg_zoom ul li a {} .iconimg_zoom ul li a img {padding:0 3em; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .iconimg_zoom ul li a:hover img { -moz-transform: scale(1.1) rotate(0deg); -webkit-transform: scale(1.1) rotate(0deg); -o-transform: scale(1.1) rotate(0deg); -ms-transform: scale(1.1) rotate(0deg); transform: scale(1.1) rotate(0deg); } .iconimg_zoom .iconBox {} .iconimg_zoom .titleBox {line-height:1.5em;text-align:center;font-size:1rem;font-weight:600;word-break: keep-all;word-wrap: break-word;margin-top:1rem;} .iconimg_zoom a:hover .titleBox {color:var(--main-color1);} /*-------------------------------------------------------------------------------------------- swiper 롤링 --------------------------------------------------------------------------------------------*/ /* 재생, 정지 버튼 공통설정 */ .swiper_cdp_btn {position:absolute;width:10px;z-index:11;} /* latest_swiper ---------------------------------------------------------------------*/ .swiper-container2 {width: 100%;height: 100%;overflow:hidden;margin-bottom:2.5rem;} .swiper-container2 .swiper-slide {position:relative;display:flex;justify-content: center;align-items: center;height:400px;text-align:center;background:#f9f9f9;border-radius:10px;overflow:hidden;} .swiper-container2 .swiper-slide .photo_text {position:absolute;left:0px;bottom:0px;display:block;width:100%;color:#fff;text-align:center;background:rgba(0,0,0,0.4);font-size:0.85em;z-index:10;} .swiper-container2 .swiper-slide .photo_text strong {font-size:1.2em;} .swiper-container2 .swiper-slide .inbox {width:100%;height:100%;overflow:hidden;z-index:3;} .swiper-container2 .swiper-slide .inbox a {display:inline-block;float:left;width:100%;} .swiper-container2 .swiper-slide .inbox span img, .swiper-container2 .swiper-slide .inbox a span img {border:1px solid #ddd;} .swiper-container2 .swiper-pagination {bottom:-50px;} .swiper-container2 .swiper-button-next.swiper-button-white {transform: translateY(-50%);margin-top:0px;width:19px;height:35px;right:-40px;color:#585858;background:url(../../../images/icon/nav_right_g.png) no-repeat center;} .swiper-container2 .swiper-button-prev.swiper-button-white {transform: translateY(-50%);margin-top:0px;width:19px;height:35px;left:-40px;color:#585858;background:url(../../../images/icon/nav_left_g.png) no-repeat center;} .swiper-pagination-bullet {background-color:#333;} .swiper-pagination-bullet-active {background-color:var(--main-color1);} .out_upbox, .in_upbox, .in_upbox a {position:relative;height:100%;} .out_upbox {} .in_upbox {} .swiper-container2 .swiper-slide .bB_B, .swiper-container2 .swiper-slide .inbox .out_upbox .in_upbox a .inswiper_box {display:none;} .swiper-container2 .swiper-slide:hover .bB_B, .swiper-container2 .swiper-slide:hover .inbox .out_upbox .in_upbox a .inswiper_box {display:block;} .inswiper_box {position:absolute;bottom:0px;width:100%;padding:.5em 0;} .inswiper_box h4 {font-size:.85rem;font-weight:600;color:#fff;} .inswiper_box .dtext_set {font-size:0.75em;line-height:1.5em;word-break: keep-all;word-wrap: break-word;color:#ddd;} .setimgbox {position:absolute;top:0px;height:100%;z-index:1;} .setimgbox img {height:100%;} /* latest_swiper 재생, 정지 버튼 */ .LS_set {position:relative;} .LS_set .swiper_cdp_btn {right:0px;top:-35px;} .LS_set .swiper_cdp_btn .btn_pause2 {background-color:var(--main-color1);width: 10px; height: 10px;text-indent: -9999px;border:none;cursor: pointer;outline: none;} .LS_set .swiper_cdp_btn .btn_pause2.on {background:none;width: 10px; height: 10px;text-indent: -9999px;border:none;cursor: pointer;outline: none;border-left: 10px solid #666666;border-top: 5px solid transparent;border-bottom: 5px solid transparent;} /* swiper_banner ---------------------------------------------------------------------*/ .swiper-container3 {width: 100%;height: 100%;overflow:hidden;} .swiper-container3 .swiper-slide {position:relative;background:#fff;border:1px solid #e9e9e9;border-radius:10px;} .swiper-container3 .swiper-slide .photo_text {position:absolute;left:0px;bottom:0px;display:block;width:100%;color:#fff;text-align:center;background:rgba(0,0,0,0.4);font-size:0.85em;z-index:10;} .swiper-container3 .swiper-slide .photo_text strong {font-size:1.2em;} .swiper-container3 .swiper-slide .inbox {overflow:hidden;} .swiper-container3 .swiper-slide .inbox .imgOverBox {display:inline-block;width:100%;} .swiper-container3 .swiper-slide .inbox .imgOverBox img {width:100%;} .swiper-container3 .swiper-pagination {bottom:-50px;} .swiper-container3 .swiper-button-next.swiper-button-white {transform: translateY(-50%);margin-top:0px;width:19px;height:35px;right:-30px;color:#585858;background:url(../../../images/icon/nav_right_g.png) no-repeat center;} .swiper-container3 .swiper-button-prev.swiper-button-white {transform: translateY(-50%);margin-top:0px;width:19px;height:35px;left:-30px;color:#585858;background:url(../../../images/icon/nav_left_g.png) no-repeat center;} .contentbox {position:relative;height:82px;} .swiper-pagination-bullet {background:rgba(0,0,0,0.5);} .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--main-color1);} /* swiper_banner 재생, 정지 버튼 */ .SB_set {position:relative;} .SB_set .swiper_cdp_btn {right:0px;top:-35px;} .SB_set .swiper_cdp_btn .btn_pause3 {background-color:var(--main-color1);width: 10px; height: 10px;text-indent: -9999px;border:none;cursor: pointer;outline: none;} .SB_set .swiper_cdp_btn .btn_pause3.on {background:none;width: 10px; height: 10px;text-indent: -9999px;border:none;cursor: pointer;outline: none;border-left: 10px solid #666666;border-top: 5px solid transparent;border-bottom: 5px solid transparent;} /*-------------------------------------------------------------------------------------------- Section --------------------------------------------------------------------------------------------*/ /* 세션 백그라운드 이미지 */ .style1, .style2 {position:relative;padding:5em 0px;overflow:hidden;background-attachment: fixed;background-position:center;background-repeat:repeat;background-size:cover;} .style1 {} .style2 {} .style3 {position:relative;padding:2.5em 0px;overflow:hidden;background-attachment: fixed;background-position:center;background-repeat:repeat;background-size:cover;} .style_bgcolor1 {background-color:#fff;} .style_bgcolor2 {background-color:#e9e9e9;} .style_bg1 {background-image:url(../../../images/main/m_bg01.jpg);} .style_bg2 {background-image:url(../../../images/main/m_bg02.jpg);} .style_bg3 {background-image:url(../../../images/main/m_bg03.jpg);} .style_bg4 {background-image:url(../../../images/main/m_bg04.jpg);} .style_bg5 {background-image:url(../../../images/main/m_bg05.jpg);} .style_bg6 {background-image:url(../../../images/main/m_bg06.jpg);} .style_bg7 {background-image:url(../../../images/main/m_bg07.jpg);} .style_bg8 {background-image:url(../../../images/main/m_bg08.jpg);} .style_bg9 {background-image:url(../../../images/main/m_bg09.jpg);} .style1 .container, .style2 .container {} .style1 .container h2, .style2 .container h2 {margin:0 0 2rem 0;text-align:center;} .style1 .container h2 {} .style2 .container h2 {} /* h2 해드 영역 */ .section_header {margin-bottom:2rem;} .section_header h2 {margin:0px 0px .5rem 0px !important;} .section_header p {text-align:center;font-size:.8rem;line-height:1.5em;} /* 풀화면 강제 설정 */ .wrapper.fullview {padding:0px;} .wrapper.fullview .container {width:100% !important; margin:0px;padding:0px;} .wrapper.fullview h2 {display:none;} /* 폰트 컬러 */ .color_333 {color:#333;} .color_666 {color:#666;} .color_999 {color:#999;} .color_ccc {color:#ccc;} .color_ddd {color:#ddd;} .color_eee {color:#eee;} .color_fff {color:#fff;} /*-------------------------------------------------------------------------------------------- flex 리스트 --------------------------------------------------------------------------------------------*/ /* flex 리스트 */ .flex_list {position:relative;} .flex_list ul {display:flex;} .flex_list ul li {display:inline-block;position:relative;width:100%;text-align:center;} .flex_list ul li a {position:relative;display:table;width:180px;height:180px;margin:1rem auto;padding:0;background:#000;color:#fff;border-radius:100%; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .flex_list ul li a:hover {background:var(--main-color1); transform: scale(1.1) rotate(0deg); -moz-transform: scale(1.1) rotate(0deg); -webkit-transform: scale(1.1) rotate(0deg); -o-transform: scale(1.1) rotate(0deg); -ms-transform: scale(1.1) rotate(0deg); } .flex_list ul li a p {display:table-cell;width:100%;height:100%;text-align:center;vertical-align:middle;font-family: 'Nanum Myeongjo', serif;font-weight:600;font-size:1.4em;line-height:1em;} .flex_list ul li a p i {color:#fff;font-size:50px;} .flex_list ul li a p span {display:block;clear:both;font-family: 'Noto Sans KR', sans-serif;color:#ddd;font-weight:400;font-size:16px;margin-top:1em;letter-spacing: -0.05em;} .flex_list ul li a:hover p span {color:#fff;} @media (max-width:1000px) { .flex_list ul {flex-wrap: wrap;} .flex_list ul li {flex: 0 1 33.3333333%;} } @media (max-width:840px) { .flex_list ul li {flex: 0 1 50%;} .flex_list ul li a {width:150px;height:150px;} } /* flex 리스트1 */ .flex_list1 {position:relative;} .flex_list1 ul {display:flex;} .flex_list1 ul li {display:flex;justify-content: center;position:relative;width:100%;text-align:center;} .quicklink1 { text-decoration: none;} .quicklink1 a {display:inline-block;margin:1rem;} .quicklink1 a:link, .quicklink1 a:active, .quicklink1 a:visited { color:#ddd; } .quicklink1 a:hover { color:#fff;} .quicklink1 a .jicon {display:flex;justify-content: center;align-items: center;width:146px;height:146px;font-size:2.5rem;border-radius:100%;background:rgba(255,255,255,0.3);} .quicklink1 a:hover .jicon {background:rgba(255,255,255,1);} .quicklink1 a .jicon i {color:#fff;} .quicklink1 a:hover .jicon i {color:var(--main-color1);} .quicklink1 a .jsubject {font-size:1.1rem;line-height:1.5em;font-weight:400;text-align:center;margin-top:1rem;} .quicklink1 a:hover .jsubject {color:var(--main-color1);} .quicklink1 a, .quicklink1 a:hover, .quicklink1 a .jicon, .quicklink1 a:hover .jicon, .quicklink1 a .jicon i { transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .quicklink1 a:hover .jicon i { -moz-transform: scale(1.2) rotate(0deg); -webkit-transform: scale(1.2) rotate(0deg); -o-transform: scale(1.2) rotate(0deg); -ms-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg); } @media (max-width:1280px) { .flex_list1 ul {flex-wrap: wrap;} .flex_list1 ul li {flex: 0 1 33.3333333%;} } @media (max-width:840px) { .flex_list1 ul li {flex: 0 1 50%;} } /* flex 리스트2 */ .flex_list2 {position:relative;} .flex_list2 ul {display:flex;} .flex_list2 ul li {display:inline-block;position:relative;width:100%;text-align:center;} .flex_list2 ul li a {position:relative;display:block;padding:0;margin:.5rem;background:#000;color:#fff;overflow:hidden;} .flex_list2 ul li a:hover {background:var(--main-color1);} .flex_list2 ul li a .textGBox {position:absolute;left:1.5em;top:1.5em;text-align:left;z-index:3;} .flex_list2 ul li a p {font-size:28px;letter-spacing:-0.05em;color:#333;font-weight:600;} .flex_list2 ul li a p.upbtn {display:inline-block;clear:both;border:1px solid #333;padding:0 1em;margin-top:1.2em;color:#333;font-size:0.75em;} .flex_list2 ul li a p i {color:#fff;font-size:50px;} .flex_list2 ul li a p span {display:block;clear:both;font-family: 'Noto Sans KR', sans-serif;color:#ddd;font-weight:400;font-size:16px;margin-top:1em;letter-spacing: -0.05em;} .flex_list2 ul li a:hover p span {color:#fff;} .flex_list2 ul li a .downImg img { width:100%; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .flex_list2 ul li a:hover .downImg img { transform: scale(1.1) rotate(0deg); -moz-transform: scale(1.1) rotate(0deg); -webkit-transform: scale(1.1) rotate(0deg); -o-transform: scale(1.1) rotate(0deg); -ms-transform: scale(1.1) rotate(0deg); } @media (max-width:1000px) { .flex_list2 ul {flex-wrap: wrap;} .flex_list2 ul li {flex: 0 1 100%;} } /* flex 리스트3 */ .flex_list3 {position:relative;} .flex_list3 ul {display:flex;} .flex_list3 ul li {width:100%;} .flex_list3 ul li a {position:relative;display:block;border:10px solid #ddd;margin:1rem; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .flex_list3 ul li a:hover {background:#e9e9e9;border-color:var(--main-color1);color:var(--main-color1); transform: scale(1.1) rotate(0deg); -moz-transform: scale(1.1) rotate(0deg); -webkit-transform: scale(1.1) rotate(0deg); -o-transform: scale(1.1) rotate(0deg); -ms-transform: scale(1.1) rotate(0deg); } .flex_list3 ul li a .ibGroup {display:inline-block;margin:0.8em 0 3em 1em;} .flex_list3 ul li a .ibGroup .ibTitle {font-size:24px;font-weight:600;color:#fff;} .flex_list3 ul li a .ibGroup .ibBtn {margin-top:0.5em;font-size:18px;color:#fff;} .flex_list3 ul li a:hover .ibGroup .ibTitle, .flex_list3 ul li a:hover .ibGroup .ibBtn {color:var(--main-color1);} .flex_list3 ul li a .ibIcon {position:absolute;right:0.4em;bottom:0.2em;font-size:2.5em;} .flex_list3 ul li a .ibIcon i {color:#ccc;} .flex_list3 ul li a:hover .ibIcon i {color:var(--main-color1);} @media (max-width:840px) { .flex_list3 ul {flex-wrap: wrap;} .flex_list3 ul li {flex: 0 1 50%;} } @media (max-width:700px) { .flex_list3 ul {flex-wrap: wrap;} .flex_list3 ul li {flex: 0 1 100%;} } /* flex 리스트4 */ .flex_list4 {position:relative;} .flex_list4 ul {display:flex;} .flex_list4 ul li {position:relative;overflow:hidden;width:100%;} .flex_list4 ul li a {position:relative;display:flex;justify-content: center;align-items: center;padding:6rem 1rem;text-align:center;z-index:3;} .flex_list4 ul li a .flex_content {color:#fff;} .flex_list4 ul li a .flex_content .title {font-size:1.4rem;} .flex_list4 ul li a .flex_content .info {font-size:.8rem;padding:1rem 0px;line-height:1.5em;} .flex_list4 ul li a .flex_content .btn_zone {display:inline-block;font-size:.7rem;border:1px solid #fff;padding:.25rem 1rem;} .flex_list4 ul li a:hover .flex_content .btn_zone {background-color:#fff;color:#333;font-weight:800;} .flex_list4 ul li .bg_img {position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);} .flex_list4 ul li .bg_img img { transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .flex_list4 ul li:hover .bg_img img { transform: scale(1.1) rotate(0deg); -moz-transform: scale(1.1) rotate(0deg); -webkit-transform: scale(1.1) rotate(0deg); -o-transform: scale(1.1) rotate(0deg); -ms-transform: scale(1.1) rotate(0deg); } @media (max-width:840px) { .flex_list4 ul {flex-wrap: wrap;} } .more_box {text-align:center;} .more_box a {background-color:#333;color:#fff !important;padding:8px 1rem 7px;border-radius:60px;} .more_box a:hover {background-color:var(--main-color1);} /******************************************************************************************************* 기타 설정 ********************************************************************************************************/ /*-------------------------------------------------------------------------------------------- 유튜브 youtube --------------------------------------------------------------------------------------------*/ .youtube { position: relative; width: 100%; padding-bottom: 56.25%; } .youtube iframe { position: absolute; width: 100%; height: 100%; } .mpb_align p a {display:inline-block;} /*-------------------------------------------------------------------------------------------- 유튜브 youtube 플레이 버튼 생성 --------------------------------------------------------------------------------------------*/ .mmbox {position:relative;} .mmbox a:link .blackbox {content: "";position:absolute;left:0;top:0;display:none;} .mmbox a:hover .blackbox {display:inline-block;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10;} .mmbox a:hover .upblackbox {display:none;} .mmbox a img {width:100%;height:auto;} .youtube_btn {position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin-left: -34px; margin-top: -24px; -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); z-index: 63;} .youtube_btn svg {height: 100%; left: 0; position: absolute; top: 0; width: 100%;} .blackbox:hover .youtube_btn .ytp-large-play-button-bg { -moz-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1); transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1); fill: #f00; fill-opacity: 1; } /******************************************************************************************************* flex_dan ********************************************************************************************************/ .flex_dan {display:flex;} .flex_dan > div {width:100%;} @media (max-width:840px) { .flex_dan {flex-direction: column;} } /******************************************************************************************************* 공지사항 ********************************************************************************************************/ .notice_outbox {padding:1rem;height:100%;} /******************************************************************************************************* 대회안내 메뉴 ********************************************************************************************************/ .btn_groupbox {padding:1rem;height:100%;} .flex_btn {display:flex;flex-wrap: wrap;height:100%;} .flex_btn > li {display:flex;width:50%;height:33.3333333%;} .flex_btn > li > a {position:relative;display:flex;width:100%;color:#fff;padding:1.5rem 1rem;margin:1px;justify-content: flex-end;align-items: center;font-size:1rem;} .flex_btn > li > a.btnc1 {background-color:#00ad9c;} .flex_btn > li > a.btnc2 {background-color:#0097ad;} .flex_btn > li > a:hover.btnc1 {background-color:#007165;} .flex_btn > li > a:hover.btnc2 {background-color:#006675;} .flex_btn > li:nth-child(1) > a:before {content: "\f46d";font-family: "Font Awesome 5 Free";font-weight: 900;font-size:2.2rem;position:absolute;top:50%;left:1.5rem;transform: translateY(-50%);} .flex_btn > li:nth-child(2) > a:before {content: "\f00b";font-family: "Font Awesome 5 Free";font-weight: 900;font-size:2.2rem;position:absolute;top:50%;left:1.5rem;transform: translateY(-50%);} .flex_btn > li:nth-child(3) > a:before {content: "\f277";font-family: "Font Awesome 5 Free";font-weight: 900;font-size:2.2rem;position:absolute;top:50%;left:1.5rem;transform: translateY(-50%);} .flex_btn > li:nth-child(4) > a:before {content: "\f274";font-family: "Font Awesome 5 Free";font-weight: 900;font-size:2.2rem;position:absolute;top:50%;left:1.5rem;transform: translateY(-50%);} .flex_btn > li:nth-child(5) > a:before {content: "\f2b5";font-family: "Font Awesome 5 Free";font-weight: 900;font-size:2.2rem;position:absolute;top:50%;left:1.5rem;transform: translateY(-50%);} .flex_btn > li:nth-child(6) > a:before {content: "\f279";font-family: "Font Awesome 5 Free";font-weight: 900;font-size:2.2rem;position:absolute;top:50%;left:1.5rem;transform: translateY(-50%);} /******************************************************************************************************* 영카트 최신제품 ********************************************************************************************************/ .sct_img {overflow:hidden;padding:2px;} .sct_img a {display:block;padding:0;background:#fff;border-radius:0px;} .sct_img a img {width:100%;height:auto !important;} .sct_txt {padding:2px;} .sct_txt a {display:block;line-height:1.5em;font-weight:400;padding:0 0.5em;} .sct_cost {text-align:right;color:#fff;font-weight:600;padding:0 1em;line-height:1.5em;} /******************************************************************************************************* 반응형 설정 ********************************************************************************************************/ @media (max-width:1680px) { .bannerZone4 .dan05 {width:33.333333333%;} } @media (max-width:1605px) { .swiper-button-next.swiper-button-white {right:30px;} .swiper-button-prev.swiper-button-white {left:30px;} } @media (max-width:1320px) { .swiper-button-next.swiper-button-white, .swiper-button-prev.swiper-button-white {display:none;} } @media (max-width:1280px) { .mimgbox {padding:1.6em 0;} .mbtn_group_box a {padding:0.5em 0 0.2em 0;} .bannerZone1 .dan07 {width:25%} .bannerZone2 a.btnImgBox .textGBox {left:2em;top:2em;width:50%;} .bannerZone2 a.btnImgBox .textGBox .upTitle {font-size:36px;} .bannerZone2 a.btnImgBox .textGBox .upTitle2 {line-height:1.5em;word-break: keep-all;word-wrap: break-word;} .bannerZone2 a.btnImgBox .textGBox .upbtn {font-size:16px;} .single-service p {display:none;} .style4 h3 {font-size:18px;} .ms_box02 .dan06 {width:33.333333%;} .bannerZone2 a.btnImgBox .textGBox {left:1em;top:1em;width:100%;} .bannerZone2 a.btnImgBox .textGBox .upTitle {font-size:20px;} } @media (max-width:1215px) { .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {width:100% !important;} } @media (max-width:1215px) { } /* 화면 너비 0 ~ 1200px */ @media (max-width:1200px) { #banner .swiper-pagination {width:100% !important;} .mrolltextZone01, .mrolltextZone02, .mrolltextZone03, .mrolltextZone04 {width:100%;} } @media (max-width:1016px) { .bannerZone4 .dan05 {width:50%;} } @media (max-width:1070px) { .dan-6 {width:100%;} } @media (max-width:991px) { .style3 .danalink,.style3 .danalink2 {padding:0 0;} } @media (max-width:960px) { .style1 .bannerZone1 ul li.dan06 {width:33.333333%;margin-bottom:1em;} } @media (max-width:948px) { } @media (max-width:936px) { } @media (max-width:901px) { .dan60, .dan40 {width:100%;} .bannerZone2 .dan-4 {width:50%;} } @media (max-width:840px) { .mouse-icon {display:none;} .style1 .container h2 {margin:0 0 1.5em 0;} .dan50 {width:100%;} .padding_right_5px {padding-right:0;margin-bottom:10px;} .padding_left_5px {padding-left:0;} .margin_right_10px {margin-right:0;} .style2 .danalink {padding:0;} .dan06 {width:33.333333%} .style1 .bannerZone1 ul li {margin-bottom:1em;} #main_roll .swiper-pagination {display:none;} } /* 화면 너비 0 ~ 768px */ @media (max-width:768px) { } @media (max-width:736px) { .swiper-pagination-bullet {margin-bottom:2px !important;} .dan03, .dan02 {width:100%;} } @media (max-width:726px) { .dan05 {width:50%;} .dan-4 {width:100%;} } @media (max-width:640px) { .ms_box02 .dan06 {width:50%;} .bannerZone2 .dan-4 {} .titleBox {font-size:16px;letter-spacing:-0.05em;} .bannerZone2 a.btnImgBox {margin:0.2em;} .bannerZone2 a.btnImgBox .textGBox .upTitle {font-size:18px;} .bannerZone2 a.btnImgBox .textGBox .upbtn {font-size:14px;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan01, .swiper-wrapper .swiper-slide.swiper-slide-active .slogan02, .swiper-wrapper .swiper-slide.swiper-slide-active .slogan03, .swiper-wrapper .swiper-slide.swiper-slide-active .slogan04 {width:auto;padding:0 10%;margin:0px;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan01 img, .swiper-wrapper .swiper-slide.swiper-slide-active .slogan02 img, .swiper-wrapper .swiper-slide.swiper-slide-active .slogan03 img {width:100%;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan04 p {min-width:100%;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan02 {margin:.5em 0px;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan03 {margin-bottom:1em;} } @media (max-width:620px) { .bannerZone1 .dan07 {width:33.33333333%} .style4 .container .lazy {width:80%;} } @media (max-width:600px) { .notice_title_box {width:100%;height:auto;padding-bottom:0.5em;} .notice_title_box .nt_in h4 {display:inline-block;} .notice_title_box .nt_in span {display:inline-block;} .golink_group .cu_inbox3 {min-height:auto;} .notice_list_box {width:100%;} .notice_title_box .nt_in a.the_more {font-size:1.2em;padding-bottom:3px;margin-left:1em;} .bannerZone4 a.ibImgBox {margin:5px;} .bannerZone4 a.ibImgBox .ibGroup .ibTitle {font-size:20px;} .bannerZone4 a.ibImgBox .ibGroup .ibBtn {font-size:14px;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan04 p {font-size:1em;} } @media (max-width:510px) { .bannerZone2 a.btnImgBox .textGBox {} .bannerZone2 a.btnImgBox .textGBox .upTitle {} .bannerZone2 a.btnImgBox .textGBox .upTitle2 {} .bannerZone2 a.btnImgBox .textGBox .upbtn {margin-top:1em;} .mrolltextBox01 .slogan03 {top:-0.8em;} } @media (max-width:500px) { .style1 .container, .style2 .container, .style3 .container {padding:0;} .style1 .bannerZone1 ul li a {padding:0;} .style1 .bannerZone1 ul li a .titleBox {padding:0;} .bannerZone2 ul li a, .bannerZone3 a.ibImgBox {margin:1em 0;} .bannerZone1 .dan07 {width:50%} .bannerZone2 .dan-4 {width:100%;} .bannerZone4 .dan05 {width:100%;} .mrolltextBox01 .slogan02, .mrolltextBox02 .slogan02, .mrolltextBox03 .slogan02, .mrolltextBox04 .slogan02 {font-size:38px;} } /* 화면 너비 0 ~ 480px */ @media (max-width:480px) { .basic_li .lt_info {display:none;} .style2 .danalink .dan03 {width:100%;} .dan06 {width:50%} .latestBox {margin:0;} .bannerZone2 a.btnImgBox .textGBox {left:1em;top:1em;} .bannerZone2 a.btnImgBox .textGBox .upTitle {font-size:24px;} .bannerZone2 a.btnImgBox .textGBox .upTitle2 {font-size:14px;margin-top:0.5em;} .bannerZone2 a.btnImgBox .textGBox .upbtn {font-size:14px;margin-top:1em;} } @media (max-width:400px) { .style4 .container h4 {font-size:13px;} .slick-vertical .slick-slide {} .slick-slide a {display:inline-block;font-size:14px;padding-left:30px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;overflow:hidden;} /* .new_icon {width:15px;height:15px;line-height:15px;} */ .slogan03, .slogan04 {font-size:16px;} .roll_textbox li dl dt {width:100%;min-width:100%;margin:0px;} } @media (max-width:375px) { .style1 .bannerZone1 ul li a {width:140px;height:140px;} } @media (max-width:320px) { .style1 .bannerZone1 ul li a .titleBox {font-size:16px;} .bannerZone2 a.btnImgBox .textGBox {left:1em;top:0.5em;} .bannerZone2 a.btnImgBox .textGBox .upTitle {font-size:20px;} .bannerZone2 a.btnImgBox .textGBox .upTitle2 {font-size:12px;margin-top:0.5em;} .bannerZone2 a.btnImgBox .textGBox .upbtn {font-size:12px;margin-top:0.5em;padding:0 0.5em;} .bannerZone3 a.ibImgBox .ibGroup {margin:1em 0 2em 1em;} .bannerZone3 a.ibImgBox .ibIcon {font-size:3em;} .mrolltextBox01 .slogan02, .mrolltextBox02 .slogan02, .mrolltextBox03 .slogan02, .mrolltextBox04 .slogan02 {font-size:36px;} .slogan04 p span {font-size:1em;} .slogan03, .slogan04 {font-size:14px;} .style1 .bannerZone1 ul li.dan06 {width:50%;} .style1 .bannerZone1 ul li a p span {font-size:14px;} } @media (max-width:280px) { .bannerZone2 a.btnImgBox .textGBox {left:1em;top:0.5em;} .bannerZone2 a.btnImgBox .textGBox .upTitle {font-size:18px;} .bannerZone2 a.btnImgBox .textGBox .upTitle2 {display:none;} .bannerZone2 a.btnImgBox .textGBox .upbtn {font-size:12px;margin-top:1em;padding:0 0.5em;} .style1 .bannerZone1 ul li {width:100%;} .style4 .container h4 a {font-size:0.75em;} }