/******************************************************************************************************* 메인 기본설정 *******************************************************************************************************/ html, body {position: relative;min-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_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 {margin-top:57px;width:19px;height:35px;right:20px;color:#585858;background:url(../../../images/icon/nav_right_g.png) no-repeat center;} .swiper-container3 .swiper-button-prev.swiper-button-white {margin-top:57px;width:19px;height:35px;left:20px;color:#585858;background:url(../../../images/icon/nav_left_g.png) no-repeat center;} */ .swiper-container3 {width: 100%;height: 100%;overflow:hidden;} .swiper-container3 .swiper-slide {position:relative;display:flex;justify-content: center;align-items: center;height:82px;text-align:center;border:1px solid #e9e9e9;border-radius:10px;overflow:hidden;} .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 {width:100%;overflow:hidden;z-index:3;} .swiper-container3 .swiper-slide .inbox a {display:inline-block;float:left;width:100%;} .swiper-container3 .swiper-slide .inbox span img, .swiper-container3 .swiper-slide .inbox a span img {border:1px solid #ddd;} .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:3px;} .swiper-container3 .swiper-button-group {position:relative;right:0px;top:0px;width:100%;height:39px;margin-top:20px;/*background-color:rgba(0,0,0,.2);*/} .swiper-container3 .swiper-button-group .sbin-group1 {position:absolute;right:20px;top:0;width:78px;height:39px;/*background-color:rgba(0,0,0,.2);*/} .swiper-container3 .swiper-button-group .sbin-group2 {position:relative;left:0;top:0;width:100%;height:39px;} .swiper-container3 .swiper-button-next.swiper-button-white {margin-top:-17px;width:19px;height:35px;right:0px;color:#585858;background:none;} .swiper-container3 .swiper-button-prev.swiper-button-white {margin-top:-17px;width:19px;height:35px;left:0px;color:#585858;background:none;} .swiper-button-white i {font-size:1.5em;} .contentbox {position:relative;} .swiper-pagination-bullet {background:rgba(0,0,0,0.5);} .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--main-color1);} /* latest_swiper 재생, 정지 버튼 */ .swiper_cdp_btn {position:absolute;display:flex;justify-content: center;align-items: center;width:15px;height:39px;line-height:39px;z-index:11;} .SB_set {position:relative;} .SB_set .swiper_cdp_btn {right:31px;top:0px;} .SB_set .swiper_cdp_btn .btn_pause3 {background-color:#333;width: 15px; height: 15px;text-indent: -9999px;border:none;cursor: pointer;outline: none;} .SB_set .swiper_cdp_btn .btn_pause3.on {background:none;width: 15px; height: 15px;text-indent: -9999px;border:none;cursor: pointer;outline: none;border-left: 15px solid var(--main-color1);border-top: 7px solid transparent;border-bottom: 7px solid transparent;} @media (max-width:840px) { .swiper-container2 .swiper-button-group .sbin-group1 {right:10px;} .swiper-container2 .swiper-pagination {bottom:6px;} } @media (max-width:736px) { .swiper-container2 .swiper-pagination {bottom:9px;} } /*-------------------------------------------------------------------------------------------- Section --------------------------------------------------------------------------------------------*/ /* 세션 백그라운드 이미지 */ .style1, .style2 {} .style1 {position:relative;overflow:hidden;background-attachment: fixed;background-position:center;background-repeat:repeat;background-size:cover;} .style2 {} .style_padding_none {padding:0;} .style_padding_tb1 {padding:1em 0;} .style_padding_tb2 {padding:2em 0;} .style_padding_tb3 {padding:3em 0;} .style_padding_tb4 {padding:4em 0;} .style_padding_tb5 {padding:5em 0;} .style_padding_t05 {padding:.5em 0 0;} .style_padding_t1 {padding:1em 0 0;} .style_padding_t2 {padding:2em 0 0;} .style_padding_t3 {padding:3em 0 0;} .style_padding_t4 {padding:4em 0 0;} .style_padding_t5 {padding:5em 0 0;} .style_padding_b05 {padding:0 0 .5em;} .style_padding_b1 {padding:0 0 1em;} .style_padding_b2 {padding:0 0 2em;} .style_padding_b3 {padding:0 0 3em;} .style_padding_b4 {padding:0 0 4em;} .style_padding_b5 {padding:0 0 5em;} .style_bgcolor1 {background-color:#fff;} .style_bgcolor2 {background-color:#e9e9e9;} .style_bgcolor3 {background-color:#e5e5e5;} .style_bg1 {background-image:url(../../../images/main/main_bg/01.jpg);} .style_bg2 {background-image:url(../../../images/main/main_bg/02.jpg);} .style_bg3 {background-image:url(../../../images/main/main_bg/03.jpg);} .style_bg4 {background-image:url(../../../images/main/main_bg/04.jpg);} .style_bg5 {background-image:url(../../../images/main/main_bg/05.jpg);} .style_bg6 {background-image:url(../../../images/main/main_bg/06.jpg);} .style_bg7 {background-image:url(../../../images/main/main_bg/07.jpg);} .style_bg8 {background-image:url(../../../images/main/main_bg/08.jpg);} .style_bg9 {background-image:url(../../../images/main/main_bg/09.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 {} .wrapper.fullview .container {width:100% !important; margin:0px;padding:0px;} .wrapper.fullview h2 {} /* 폰트 컬러 */ .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-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 .material-symbols-outlined {font-weight:400;font-size:3rem;} .flex_list ul li a p .spantitle {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;border-radius:1rem;} .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:1.4rem;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 1.5em;margin-top:1.2em;color:#333;font-size:0.75em;border-radius: 50px;} .flex_list2 ul li a:hover p.upbtn {border:1px solid var(--main-color1);background:var(--main-color1);color:#fff;} .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_b : 어두운 배경 밝은 라인 */ .flex_list3_b {position:relative;} .flex_list3_b ul {display:flex;} .flex_list3_b ul li {width:100%;} .flex_list3_b ul li:hover {z-index:100;} .flex_list3_b ul li a {position:relative;display:block;border:10px solid #ddd;margin:1rem;border-radius: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_b 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_b ul li a .ibGroup {display:inline-block;margin:0.8em 0 3em 1em;} .flex_list3_b ul li a .ibGroup .ibTitle {font-size:24px;font-weight:600;color:#fff;} .flex_list3_b ul li a .ibGroup .ibBtn {margin-top:0.5em;font-size:18px;color:#fff;} .flex_list3_b ul li a:hover .ibGroup .ibTitle, .flex_list3_b ul li a:hover .ibGroup .ibBtn {color:var(--main-color1);} .flex_list3_b ul li a .ibIcon {position:absolute;right:0.4em;bottom:0.2em;font-size:2.5em;} .flex_list3_b ul li a .ibIcon i {color:#ccc;} .flex_list3_b ul li a:hover .ibIcon i {color:var(--main-color1);} @media (max-width:840px) { .flex_list3_b ul {flex-wrap: wrap;} .flex_list3_b ul li {flex: 0 1 50%;} } @media (max-width:700px) { .flex_list3_b ul {flex-wrap: wrap;} .flex_list3_b ul li {flex: 0 1 100%;} } /* flex 리스트3_w :밝은 배경 어두운 라인 */ .flex_list3_w {position:relative;} .flex_list3_w ul {display:flex;} .flex_list3_w ul li {width:100%;} .flex_list3_w ul li:hover {z-index:100;} .flex_list3_w ul li a {position:relative;display:block;border:10px solid #666;margin:1rem;border-radius: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_w 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_w ul li a .ibGroup {display:inline-block;margin:1em 0 3em 1.3em;} .flex_list3_w ul li a .ibGroup .ibTitle {font-size:1.4rem;font-weight:600;color:#333;} .flex_list3_w ul li a .ibGroup .ibBtn {margin-top:0.5em;font-size:18px;color:#333;} .flex_list3_w ul li a:hover .ibGroup .ibTitle, .flex_list3_w ul li a:hover .ibGroup .ibBtn {color:var(--main-color1);} .flex_list3_w ul li a .ibIcon {position:absolute;right:0.4em;bottom:0.2em;font-size:2.5em;} .flex_list3_w ul li a .ibIcon i {color:#999;} .flex_list3_w ul li a:hover .ibIcon i {color:var(--main-color1);} .flex_list3_w ul li a .ibIcon span {color:#999;font-size:2.5rem;} .flex_list3_w ul li a:hover .ibIcon span {color:var(--main-color1);} @media (max-width:840px) { .flex_list3_w ul {flex-wrap: wrap;} .flex_list3_w ul li {flex: 0 1 50%;} } @media (max-width:700px) { .flex_list3_w ul {flex-wrap: wrap;} .flex_list3_w 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%);width:100%;} .flex_list4 ul li .bg_img img {width:100%;} .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;} } /* flex 리스트5 */ .flex_list5 {position:relative;} .flex_list5 ul {display:flex;margin:0px -.5rem;} .flex_list5 ul li {position:relative;width:100%;padding:.5rem;} .flex_list5 ul li a {position:relative;display:flex;justify-content: center;align-items: center;padding:0px;text-align:center;border:10px solid #666;z-index:3;} .flex_list5 ul li a:hover {border:10px solid var(--main-color1);color:var(--main-color1);} .flex_list5 ul li a .bannerbg {} .flex_list5 ul li a .textBtnBox {position:absolute;top:10%;left:10%;text-align:left;} .flex_list5 ul li a .textBtnBox .titleBox {font-weight:600;text-align:left;font-size:1rem;} .flex_list5 ul li a .textBtnBox .goText {display:block;clear:both;text-align:left;font-size:.8rem;} .flex_list5 ul li a { 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_list5 ul li a:hover { 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_list5 ul {flex-wrap: wrap;} .flex_list5 ul li {width:50%;} } /******************************************************************************************************* flex_dan ********************************************************************************************************/ .flex_dan {display:flex;} .flex_dan > div {width:100%;} @media (max-width:840px) { .flex_dan {flex-direction: column;} } .flex_left {justify-content: flex-start;} .flex_center {justify-content: center;} .flex_right {justify-content: flex-end;} /* 가로 뒤집기(역순) : display:flex 가 적용된 부분에 사용 */ .flex_row {flex-direction: row;} /* 정방향(좌에서 우로 정렬 → ) */ .flex_reverse {flex-direction: row-reverse;} /* 역방향(우에서 좌로 정렬 ← ) */ /* flex dan */ .flex-dan {position:relative;} .flex-dan ul {display:flex;} .flex-dan ul li {position:relative;overflow:hidden;width:100%;} .flex-dan > div {display:flex;} .flex-dan > div > div {position:relative;overflow:hidden;width:100%;} @media (max-width:1280px) { .flex-dan > div.product_zone {flex-direction: column;} .flex-dan > div.product_zone > div {padding:2rem 3rem 6rem 3rem;} } /* 소개 스타일01 */ .container .introduction > div > h2 {text-align:left;} .introduction {display:flex;align-items: center;} .fd_row_reverse {flex-direction: row-reverse;} .fd_row {flex-direction: row;} .introduction > div {padding:2rem;} .introduction > div.img_zone {position:relative;overflow:hidden;width:100%;text-align:center;} .introduction > div.img_zone .imgoutbox {width:100%;} .introduction > div.info_text {} .introduction > div > p {width:80%;word-break: keep-all;word-wrap: break-word;line-height:1.5em;} @media (max-width:1470px) { .introduction > div > p {width:95%;} } @media (max-width:840px) { .style1 .container .introduction > div > h2 {text-align:center;} .introduction {flex-direction: column;} } /* 버튼 */ .btn_style01 {display:inline-block;border:1px solid #333;color:#333;padding:.5rem 2rem .45rem;margin-top:1em;border-radius:70px;} .btn_style01:hover, .btn_style01:focus {border:1px solid var(--main-color1);background-color:var(--main-color1);color:#fff;font-weight:600;} .product_zone > div > a.btn_style02 {display:inline-block;border:1px solid #666;background-color:#666;color:#fff;padding:.3rem 1rem .25rem;margin-top:2rem;border-radius:5px;} .product_zone > div > a.btn_style02:hover, .product_zone > div > a.btn_style02:focus {border:1px solid var(--main-color1);background-color:var(--main-color1);color:#fff;font-weight:600;} /* 제품소개 */ .container .product_zone > div.left > h2 {text-align:right;margin:0 0 1em 0;} .container .product_zone > div.right > h2 {text-align:left;margin:0 0 1em 0;} .product_zone {position:relative;} .product_zone > div {padding:2rem 2rem 6rem;} .product_zone > div.left {text-align:right;} .product_zone > div.right {text-align:left;} .product_zone > div > p {width:50%;line-height:1.5em;word-break: keep-all;word-wrap: break-word;} .product_zone > div.left > p {display:inline-block;text-align:right;} .product_zone > div.right > p {display:inline-block;text-align:left;} .product_zone > div.left > a {position:absolute;right:2rem;bottom:2rem;} .product_zone > div.right > a {position:absolute;left:2rem;bottom:2rem;} .product_zone > div.bgcolor_01 {background-color:#dddddd;} .product_zone > div.bgcolor_02 {background-color:#cccccc;} .product_zone > div.bgcolor_03 {background-color:#dddddd;} .product_zone > div.bgcolor_04 {background-color:#eeeeee;} @media (max-width:1280px) { .container .product_zone > div.left > h2, .container .product_zone > div.right > h2 {margin:0 0 .5em 0;} .flex-dan > div.product_zone {flex-direction: column;} .flex-dan > div.product_zone > div {padding:2rem 3rem 6rem 3rem;} .product_zone > div.left > a {position:absolute;right:3rem;bottom:2rem;} .product_zone > div.right > a {position:absolute;left:3rem;bottom:2rem;} .product_zone > div.bgcolor_01 {background-color:#eeeeee;} .product_zone > div.bgcolor_02 {background-color:#dddddd;} .product_zone > div.bgcolor_03 {background-color:#eeeeee;} .product_zone > div.bgcolor_04 {background-color:#dddddd;} .product_zone > div > p {width:60%;} } /*-------------------------------------------------------------------------------------------- 커뮤니티존 --------------------------------------------------------------------------------------------*/ .community_zone {} .community_zone > div {margin:.5rem;} @media (max-width:1016px) { .community_zone {flex-direction: column;} .cu_inbox3 {flex-direction: column;width:100%;} .cu_inbox3 > div {width:100%;} } @media (max-width:840px) { .community_zone > div {margin:.5rem 0;} } /* 공지사항-01 */ .notice_outbox {padding:1rem;height:100%;} .notice_list_box {background-color:#fff;} .cu_set {position:relative;overflow:hidden;} .cu_inbox3 {display:flex;height:100%;} .cu_inbox2 {display:inline-block;width:100%;height:100%;} .cu_inbox2 a {position:relative;display:inline-block;width:100%;padding:2rem 0rem 87px 2.5rem;color:var(--main-color1);z-index:3;} .cu_inbox2 a:hover {color:var(--main-color1);} .inspection_img {position:absolute;right:-10px;top:50%;transform: translateY(-50%);display:inline-block;width:300px;height:300px;z-index:2;} /*-------------------------------------------------------------------------------------------- 공지사항 --------------------------------------------------------------------------------------------*/ /* 공지사항 옆 메뉴 */ .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:#999;} .flex_btn > li > a.btnc2 {background-color:#666;} .flex_btn > li > a:hover.btnc1 {background-color:#666;} .flex_btn > li > a:hover.btnc2 {background-color:#333;} .flex_btn > li:nth-child(1) > a:before {content: "\f022";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: "\f4ad";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: "\f071";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: "\f086";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: "\f3d1";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: "\f083";font-family: "Font Awesome 5 Free";font-weight: 900;font-size:2.2rem;position:absolute;top:50%;left:1.5rem;transform: translateY(-50%);} /*-------------------------------------------------------------------------------------------- 참가신청 --------------------------------------------------------------------------------------------*/ .flex-dan ul.app_list {flex-wrap: wrap;align-items: center;justify-content: center;height: 100%;} .flex-dan ul.app_list li {display:flex;align-items: center;justify-content: center;width:33.3333333%;height:50%;padding:1px;} .flex-dan ul.app_list li > a {display:flex;align-items: center;justify-content: center;flex-direction: column;width:100%;height:100%;padding:2em 0px;} .flex-dan ul.app_list li:nth-child(1) > a {background-color:#156dad;color:#fff;} .flex-dan ul.app_list li:nth-child(2) > a {background-color:#43a1bb;color:#fff;} .flex-dan ul.app_list li:nth-child(3) > a {background-color:#41be89;color:#fff;} .flex-dan ul.app_list li:nth-child(4) > a {background-color:#ddd;color:#333;} .flex-dan ul.app_list li:nth-child(5) > a {background-color:#eee;color:#333;} .flex-dan ul.app_list li:nth-child(6) > a {background-color:#ddd;color:#333;} .flex-dan ul.app_list li > a:hover {background-color:#333;color:#fff;} .flex-dan ul.app_list li > a > i {font-size:2em;} .flex-dan ul.app_list li > a > p {line-height:1em;margin-top:.5em;letter-spacing:-0.05em;} .notice_title_box .nt_in a:hover.the_more {border:1px solid var(--main-color1) !important;background:var(--main-color1) !important;} @media (max-width:1016px) { .flex-dan ul.app_list li > a {padding:1em 0px;} } /*-------------------------------------------------------------------------------------------- 참가신청 --------------------------------------------------------------------------------------------*/ ul > li > div.li_out {padding:10px;} .card_style {background:#fff;overflow:hidden;border-radius:10px;box-shadow: 2px 2px 6px #000;} .card_style dt {font-size:1.4rem;font-weight:500;text-align:center;padding:1em 0;} .card_style dd {width:100%;} .card_style dd p {font-size:16px;text-align:center;color:#585858;padding:1.5em 0;} .card_style dd > p > span {display:block;} @media (max-width:840px) { .flex_list3 .dan04 {width:50%;} } /*-------------------------------------------------------------------------------------------- 고객센터 (call center) --------------------------------------------------------------------------------------------*/ .call_wrap {position:relative;width:100%;} .call_center_bg {background-color:#f6f6f6;background-image:url(../../../images/main/call_img/01.png);background-position:center bottom;background-repeat:no-repeat;background-size:cover; transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .call_center_bg > div {position:relative;width:var(--wrap-width);margin:0 auto;padding:2em 0;} .call_center_bg > div .call_info {width:50%;padding:3em;} .call_center_bg > div .call_info h3 {margin:0px;} .call_center_bg > div .call_info .call_num {font-size:3em;line-height:1em;color:var(--main-color1);margin:.6em 0px;white-space:nowrap;} .call_center_bg > div .call_info .call_infozone {position:relative;} .call_center_bg > div .call_info .call_infozone .tel_icon {position:absolute;top:0px;} .call_center_bg > div .call_info .call_infozone .tel_icon {right:1rem; transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .call_center_bg > div .call_info .call_infozone dl {display:flex;align-items: center;margin-bottom:4px;font-size:.95em;} .call_center_bg > div .call_info .call_infozone dl dt, .call_center_bg > div .call_info .call_infozone dl dd {padding:2px 0px;} .call_center_bg > div .call_info .call_infozone dl dt {min-width:150px;text-align:center;background-color:#666;color:#fff;margin-right:1em;border-radius:5px;} .call_center_bg > div .call_info .call_infozone dl dd {min-width:100%;} @media (max-width: 1320px){ .call_center_bg > div .call_info .call_infozone .tel_icon {right:7em; transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } } @media (max-width: 1030px){ .call_center_bg > div .call_info .call_infozone .tel_icon {display:none;} } @media (max-width: 640px){ .call_center_bg {background-position-x:-200px; transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } } @media (max-width: 500px){ .call_center_bg {background-position-x:-250px; transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } } /*-------------------------------------------------------------------------------------------- 마퀴 애니메이션 --------------------------------------------------------------------------------------------*/ :root{ --transition-custom2: all 0.8s ease-in-out; } .marquee { position: relative; width: 200vw; height: 9rem; overflow-x: hidden; margin: 7.8rem 0; } .track { position: absolute; line-height:1; white-space: nowrap; will-change: transform; animation: marquee 25s linear infinite; z-index: 0; } .marquee .content { font-size: 8rem; letter-spacing: -0.015em; font-weight: 700; color: rgba(0,0,0,.02); } @keyframes marquee { from { transform: translateX(0%); } to { transform: translateX(-50%); } } @media screen { html:not(.no-js) [data-scroll] { transition:var(--transition-custom2); pointer-events: none; will-change: transform; will-change: opacity; } html:not(.no-js) [data-scroll].animated { pointer-events: auto; } html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"] { opacity: 0; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; } html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"].animated { opacity: 1; -webkit-transform: none; transform: none; } html:not(.no-js) [data-scroll="fade-up"] { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } } /******************************************************************************************************* 기타 설정 ********************************************************************************************************/ /*-------------------------------------------------------------------------------------------- 유튜브 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; } /******************************************************************************************************* 영카트 최신제품 ********************************************************************************************************/ .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;} } @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%;} } /* 화면 너비 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:1.4rem;} .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;} }