.qu_product, .pop-layer .pop_slide .swiper-slide p, .pop-layer .pop_slide .swiper-slide:before, .btn_video span, .in_menu ul li a, .product_index .slider-image, .product_index .slider-image .bg, .product_index .slider-image p, .product_slider .swiper-slide {transition: all .3s ease-out; transform-origin: 50% 50%;} #mVisual .visualRoll .move .visual_bg{ animation-name: move; animation-duration:5s; animation-direction:alternate; animation-iteration-count: infinite; } /* 키프레임 이름 = 애니메이션 이름 */ @keyframes move { 0% { transform: scale(1, 1) } 100% { transform: scale(1.2, 1.2) } } @keyframes e { to { transform: translateY(0); opacity: 1 } } @keyframes product_e { to { display:none; transform: scale(0); } } @keyframes product_d { to { display:inline-block; transform: scale(1); } } /* 공통 */ :root{ --prtd: 'Pretendard', sans-serif; } img.pc{display:inline-block !important;} .pc{display:block;} .tablet{display:none;} .mo{display:none;} .inConts{max-width:1480px;margin: 0 auto;padding: 0 10px 0} .btn_more{text-align: center;display: block;margin-top:20px} .btn_more span{font-size:1rem;color:#fff;padding:15px 45px;background-color:#3f4448;display:inline-block;border:1px solid #3f4448;} .btn_shop{display:inline-block;margin: 50px 0 0 0} .btn_video{display:block;} .btn_shop{display:inline-block;;} .btn_video span, .btn_shop span{display:block;font-size:1rem;color:#fff;padding:15px 45px;background-color:#3f4448;display:inline-block;border:1px solid #3f4448;} .btn_video span:hover, .btn_shop span:hover{color:#3f4448;background-color:#fff;border:1px solid #3f4448;} .fw_6{font-weight:600 !important;} .fw_7{font-weight:700 !important;} /* 메인 타이틀 */ .mTitle{text-align:center;margin-bottom:60px;} .mTitle dt{font-size:2.75rem; color:#000000;line-height:1.6;font-weight:bold;position:relative;display:inline-block;font-family:'ArnoPro',sans-serif;font-weight:600;} .mTitle dt span{} .mTitle.white dt{color:#333;} .mTitle.white dt span{color:#333;} .mTitle.white dd{color:#333;} .mTitle.white dd span{color:#333;} .lastDepth{width:100%;margin-bottom:70px;font-size:0;line-height:0;text-align: center;box-sizing: border-box;/* overflow:hidden; */display: flex;justify-content: space-between;} .lastDepth>a{position:relative;width:100%; height:60px; background-color: #f8f8f8; font-size:1.125rem; line-height:1.2; color: #333; display:inline-block; vertical-align: top; box-sizing: border-box;} .lastDepth>a:before{content:"";position:absolute;bottom: -7px;left:50%;transform: translateX(-50%);width: 0px;height: 0px;} .lastDepth>a+a{margin-left:-1px;} .lastDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .lastDepth>a:hover::before, .lastDepth>a.active::before{ z-index:2;border-top: 7px solid #cabe9f;border-right: 7px solid transparent;border-left: 7px solid transparent;} .lastDepth>a:hover, .lastDepth>a.active{background-color: #cabe9f; color: #fff; z-index:2;} .lastDepthConts{font-size:0; line-height:0;visibility: hidden;overflow:hidden;opacity: 0;height:0;} .lastDepthConts.active{display:block;visibility: visible;height:auto;} .fade{opacity: 0;transition: opacity .15s linear;} .fade.show{opacity:1;} /*[s] Main Style */ #mVisual{width:100%; font-size:0; line-height:0; position: relative; overflow:hidden;} #mVisual .visualRoll{white-space: nowrap;} #mVisual .visualRoll .slider{width:100%; background-repeat: no-repeat; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} #mVisual .visualRoll .visual_bg{background-repeat: no-repeat;display:table;background-position:center;background-size: cover;} #mVisual .visualRoll .visual_bg{} #mVisual .visualRoll .visual_bg{width:100%;height:100%;} #mVisual .inConts{padding: 0;height:100vh;box-sizing:border-box;width:100%;max-width:none;} #mVisual .inConts .vTxt{position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);width:80%} #mVisual .inConts .ii{/* top:50px; */ text-align: center; display:block; /* opacity: 0; */ position: relative;} /* #mVisual .inConts .i01{-webkit-transition-delay: .7s; transition-delay: .7s;} #mVisual .inConts .i02{-webkit-transition-delay: .75s; transition-delay: .75s;} #mVisual .inConts .i03{-webkit-transition-delay: .8s; transition-delay: .8s;} #mVisual .inConts .i04{-webkit-transition-delay: .85s; transition-delay: .85s;} #mVisual .inConts .i05{-webkit-transition-delay: .9s; transition-delay: .9s;} #mVisual .inConts .i06{-webkit-transition-delay: .95s; transition-delay: .95s;} #mVisual .inConts .i07{-webkit-transition-delay: 1s; transition-delay: 1s;} #mVisual .inConts .btn_more{-webkit-transition-delay: .8s; transition-delay: .8s;} */ #mVisual .inConts .ii{font-weight: 300; color: #fff;/* text-shadow:2px 2px 3px rgb(0,0,0,0.4); */white-space: normal;word-break: keep-all;} #mVisual .inConts .ii.tit{letter-spacing: -0.025em;font-weight: 600;font-size: 1rem;line-height:1.4;color:#fff;font-family:'ArnoPro',sans-serif;} #mVisual .inConts .ii.tit>strong{font-size:5rem; line-height:1.2;font-weight:300;} #mVisual .inConts .ii.tit+.txt{font-size: 1.188rem; line-height: 30px; font-weight: 400;font-family:'Lato',sans-serif;} #mVisual .inConts .ii.tit.i01{color:#fff;position:relative;font-weight: 400;/* margin-bottom: 10px; */} /* #mVisual .inConts .ii.tit.i01:before{content:"";position:absolute; top:-27px; left:0; width:30px; height:1px; background-color:#fff; box-shadow: 1px 1px 1px rgb(0,0,0,0.3);} */ #mVisual .inConts .ii.tit.i02{margin-bottom: 40px;margin-top:10px;} #mVisual .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:40px; z-index:5;display: none;} #mVisual .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} #mVisual .slick-dots>li+li{margin-left:5px;} #mVisual .slick-dots>li button{background-color:#fff ; opacity: 0.2;width: 25px;height: 8px;margin: 5px;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;border:none;} #mVisual .slick-dots>li.slick-active button{background-color: #000; } #mVisual .slick-arrow{width: 23px;height: 43px;background-color: transparent;background-repeat: no-repeat;background-position: center center;border:none;font-size:0;line-height:0;position: absolute;top:50%;z-index:7;-webkit-transform: translateY(-50%);transform: translateY(-50%);cursor: pointer;background-size:cover;} #mVisual .slick-prev{background-image: url("../img/img_swiper_prev.png"); left:90px;} #mVisual .slick-next{background-image: url("../img/img_swiper_next.png"); right:90px;} #mVisual .inConts .ii.logo img{height:10.313rem;margin-bottom:10px;} #mVisual .slick-active .inConts .btn_more, #mVisual .slick-active .inConts .ii{/* top:0px; opacity:1; */} #mVisual .slick-active .inConts .ii.logo img{display:inline-block;} #mVisual .btn_more{border:1px solid #fff;line-height: 30px;font-size:18px;text-align:center;padding: 10px 55px 10px 45px;border-radius:30px;box-sizing:border-box;color:#fff;background: url('../img/main/btn_more.png')no-repeat center right 25px;display:inline-block;opacity:0;top:50px;position:relative;} #mVisual .btn_more:hover{border:1px solid #fff;background-color:#fff;color:#333;} .mLink{padding:50px 60px;background-color:#f8f8f8;} .mLink ul li{float:left;display:inline-table;box-sizing:border-box;width:calc((100% - 90px) / 4);text-align:center;/* height:430px; */} .mLink ul li + li{margin-left:30px;} .mLink ul li > a{display:table-cell;vertical-align:middle;position:relative;overflow:hidden;} .mLink ul li > a img{width:100%;height:auto; } .mLink ul li > a img:hover{} .mLink ul li:hover img { transform: scale(1.2, 1.2); cursor: pointer; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); transition: all .4s ease; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; } .mLink ul li > a .text_Box {position:absolute;top:50%;left:50%; transform: translate(-50%, -50%);} .mLink ul li > a .text_Box strong{color:#fff;font-weight:400;font-size:2rem;font-family:'ArnoPro',sans-serif;} .mLink ul li > a .text_Box p{color:#cabe9f;font-weight:600;font-size:0.75rem;font-family:'Lato',sans-serif;} .mLink ul li > a .text_Box img{} .m_product{padding:100px 10px 100px;max-width:1480px;margin:0 auto;} .data_table_list {display: inline-table;width:100%;/* margin: 0 auto; *//* border-top: 2px solid #222; */} .data_table_list>li {display: table-row;} .data_table_list>li>b, .data_table_list>li>span { display: table-cell;padding: 13px 18px 13px 0;border-bottom: 1px solid #ddd;-moz-box-sizing: border-box; box-sizing: border-box;line-height:1.6;} .data_table_list>li>b {width: 140px;/* padding-left: 40px; */font-size: 1rem;font-weight: 600;color: #222;} .data_table_list>li>span {padding-left: 23px;font-size: 1rem;color: #666;} .data_table_list.long>li>b{width: 320px;} .m_product .product_txt{display:inline-block;max-width: calc(100% - 900px);padding-right:40px;padding-top:15px;} .m_product .product_txt p{font-size:1rem; color:#333;line-height:1.6;margin-bottom:15px;letter-spacing:-0.04em;} .m_product .product_txt p.point{font-weight:600; color: #a08455;} .m_product .product_img{text-align: center;float: right;padding-left: 0px;display:inline-block;vertical-align:top;max-width: 900px;} .m_product .product_img img{height:auto;display: inline-block;} .m_modern{position: relative;height: 700px;} .m_modern.video{height: 535px;} .m_modern > div{display:inline-block;width:50%;float:left;height:100%;} .m_modern > div.slider_box2{float:right;} .m_modern .modern_txt{display: inline-table;text-align:left;height: 100%;/* width: 100%; */padding:0 210px 0 240px;background-color:#343a40;} .m_modern .in_area{height: 100%;display:table-cell;vertical-align:middle;line-height:1.5;letter-spacing:-0.025em;} .m_modern .in_area .title{color:#c4ae91;font-size:1.375rem;font-weight:300;margin:0 0 15px 0;} .m_modern .in_area .txt{color:#fff;font-size:2.25rem;line-height:1.2;margin:0 0 30px 0;font-weight:200;} .m_modern .in_area .etc{color:#888;font-size:1rem;font-weight:200;} .m_modern.video .modern_txt{background-color:#f8f8f8;float:left;} .m_modern.video .slider_box{float:right;} .m_modern.video .in_area .txt{color:#333;} .m_modern.video .in_area .etc{color:#888;} .m_modern .swiper-container{height:100%;} .m_modern .swiper-container .swiper-slide{background-size:cover !important;background-position:center !important;} .m_modern .swiper-container .swiper-slide img{width:100%;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);} .m_modern .swiper-container .swiper-pagination-bullet {width: 25px; height: 8px; border-radius: 0; transition: .3s ease; background-color: #fff; opacity: 0.2;} .m_modern .swiper-container .swiper-pagination-bullet-active {width:25px; background: #000;} .wrap_count{text-align:center;padding:100px 0;max-width:1420px;margin:0 auto;display:block;} .wrap_count>ul{width:100%;} .wrap_count>ul>li{position:relative;display:inline-block;width:25%;vertical-align:top;float:left;} .wrap_count>ul>li+li:before{transform: translateY(-50%);content:"";position:absolute;height:80px;width:1px;background-color: #eee;left:0;top: 50%;} .wrap_count>ul>li p, .wrap_count>ul>li #counter1, .wrap_count>ul>li #counter2, .wrap_count>ul>li #counter3, .wrap_count>ul>li #counter4{display:inline-block;color:#333;font-size:2.875rem; line-height:1.2; padding:30px 0;font-family: 'Poppins';} .wrap_count>ul>li .counter_txt{font-size:1rem ;color:#c4ae91;line-height:1.6; /* font-family: 'Poppins'; */font-weight:400;} .wrap_count>ul>li p{margin: 0 0 0 10px} .m_banner{background: url("../img/main/img_m_banner01.jpg");text-align:center;padding:130px 0 100px;letter-spacing:-0.035em;} .m_banner strong{font-size:3.75rem;color:#fff;font-family:'ArnoPro',sans-serif;font-weight:600;margin: 0 0 40px 0;display:inline-block} .m_banner p{font-size:1.375rem;color:#fff;margin: 0 0 40px 0px} .m_process{padding:70px 100px} .m_process .mTitle{margin-bottom:30px;} .m_process .wrap_process_list{max-width:1480px;margin:0 auto;padding:0 10px 0 } .m_process .wrap_process_list li{display:inline-block;float:left;width:calc((100% - 60px) / 3);height:210px;background-color:#fff;box-shadow: 3px 3px 5px rgb(0 0 0 / 8%);padding: 30px 30px 30px 35px;box-sizing:border-box;margin:0 0 30px 0;line-height:1.6;border-radius:5px;-o-transition: 0.3s ease-out;transition: 0.3s ease-out;-webkit-transition: 0.3s ease-out;} .m_process .wrap_process_list li+li{margin-left: 30px;} .m_process .wrap_process_list li:nth-child(3n+1){} .m_process .wrap_process_list li:nth-child(4n){margin:0 0 0 0;} .m_process .wrap_process_list li > div p strong{display:inline-block;/* margin: 0 0 10px 30px; */font-size:1.375rem;color:#333;font-weight:500;} .m_process .wrap_process_list li > div p b{display:block;font-weight:500;color:#888;} .m_process .wrap_process_list li > div span{display:block;font-size:1rem; color:#888;letter-spacing: -1px;} .m_process .wrap_process_list li > div span b{display:block;padding:5px 0 0 0;font-weight:400;} .m_process .wrap_process_list li > div p{position: relative;float:left;display: inline-block;width:calc(100% - 70px);} .m_process .wrap_process_list li > div p span{margin-top:20px;} .m_process .wrap_process_list li > div p img{max-width:70px;position: absolute;top: 20px;left: 10px;} .m_process .wrap_process_list li .number{display: inline-block;text-align: center;width:70px;float:left;padding-right: 20px;;} .m_process .wrap_process_list li .number span {color:#c7bb9c;font-size:1.75rem;font-weight:500;} .m_process .wrap_process_list li .number img{max-width:100%;} .m_process .wrap_process_list li:hover{background: #3f4448;} .m_process .wrap_process_list li:hover div p strong{color:#fff;} .m_process .wrap_process_list li:hover div p b{color:#fff;} .m_process .wrap_process_list li:hover div p span{color:#fff;} .m_process .wrap_process_list li:hover div > span{} .m_process .wrap_process_list li:hover{-ms-transform: translateY(-10px);transform: translateY(-10px);-webkit-transform: translateY(-10px);} .m_address {max-width:1480px; margin: 0 auto;padding: 120px 10px 100px} .m_address .address_list{text-align:center;} .m_address .address_list li{text-align:center; width:33.33%;float:left;display:inline-block;} .m_address .address_list li p{font-size:0.875rem;color:#333;font-family:'Lato',sans-serif;margin:14px 0 12px;font-weight:600;} .m_address .address_list li span{font-size:1.25rem;color:#666;} .m_map {margin: 0 auto 100px;max-width:1480px;padding:0 10px;} .m_map .root_daum_roughmap .wrap_map{height:500px;} .m_map .root_daum_roughmap .wrap_controllers{display:none;} /* sub Page */ /* 공통 */ .s_tit{line-height:1.6;text-align:center;padding:110px 10px 110px;} .s_tit strong{display: inline-block;margin: 0 0 20px 0;line-height: 1.6;position:relative;font-size:3.125rem;color:#333;padding-bottom: 10px;font-family:'ArnoPro',sans-serif;font-weight: 600;} .s_tit strong:before{position:absolute;content:"";bottom:0;left:50%;transform:translateX(-50%);width:90px; height:1px;background-color:#ccc;} .s_tit p{font-size:1rem;color:#888;} .s_tit.white{} .s_tit.white strong{color:#fff;} .s_tit.white strong:before{display:none;} .s_tit.white p{} #pageTop{max-width:1280px; margin:0 auto; padding:80px 0 60px; font-size:0; line-height:0; text-align: center; position: relative;} #pageTop>h3{font-weight: 600; font-size:40px; line-height:1.6; color: #342e1e; position: relative;} #pageTop span{font-size:20px; color:#666;line-height:1.6;margin-top:20px;font-weight:400;display:inline-block;} #sVisual{width:100%; background-repeat: no-repeat; background-position: right center; background-size: cover; font-size:0; line-height:0; overflow:hidden; position: relative;} #sVisual .sVisual_in{width:100%; height:510px; display:table;} #sVisual h2{letter-spacing: 1em; text-align: center; display:table-cell; vertical-align: middle; box-sizing:border-box;} #sVisual h2>p{font-weight: bold; letter-spacing: 0.03em; font-size:28px; line-height:1.6; color: #fff; margin-bottom:5px;} #sVisual h2>strong{font-weight: bold; font-size:3.75rem; line-height:1.6; color: #fff; display:inline-block; position: relative;font-family:'ArnoPro',sans-serif;font-weight: 600;letter-spacing:0.035em;} #sVisual h2>span{font-weight: 200; font-size:22px; line-height:1.6; color: #fff; display:block; position: relative; letter-spacing: -0.025em;} #sVisual.bg_1{background-image:url('../img/img_sVisual_1.jpg')} #sVisual.bg_2{background-image:url('../img/img_sVisual_2.jpg')} #sVisual.bg_3{background-image:url('../img/img_sVisual_3.jpg')} #sVisual.bg_4{background-image:url('../img/img_sVisual_4.jpg')} #sVisual.bg_5{background-image:url('../img/img_sVisual_5.jpg')} #sVisual.bg_6{background-image:url('../img/img_sVisual_6.jpg')} #sVisual.bg_7{background-image:url('../img/img_sVisual_7.jpg')} #sVisual.bg_8{background-image:url('../img/img_sVisual_8.jpg')} #sVisual.bg_10, #sVisual.bg_12, #sVisual.bg_99{background-image:url('../img/img_sVisual_1.jpg')} #snb {/* margin: 0 auto; */width:100%;max-width:1200px;margin: 0 auto;font-size:0;line-height:0;position: absolute;z-index:6;border: 0;z-index: 10;bottom: 0;transform: translateX(-50%);left: 50%;} #snb .sMenu .lnbSub{display: flex; justify-content: center;} #snb .sMenu a{padding: 0 20px;height:60px;background-color: rgba(0,0,0,0.2);/* border:1px solid #dbdbdb; */font-size:1rem;line-height:1.2;color: #fff;text-align: center;display: inline-block;vertical-align: top;position: relative;box-sizing: border-box;white-space: nowrap;width:100%; font-family: 'Lato',sans-serif;} #snb .sMenu a.point{background-color:#cdcdcd;} #snb .sMenu a+a{margin-left:-1px;} /* #snb .sMenu a+a:before{content:"";position:absolute;left:1px;top: 18px;width:1px;height:24px;background-color:#e6e2e0;z-index:3;} */ #snb .sMenu a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} #snb .sMenu a.oPage{background-color:#fff;color:#3b3b3b} /* stroy */ /*.story_area{margin-top:50px;} .story_area .img_box img{max-width:100%;} .story_area .story_cont{margin-top:45px;} .story_area .story_cont p{font-size:1rem; line-height:1.5rem; color:#888; font-weight:200;} .story_area .story_cont p+p{margin-top:23px;}*/ .story{font-family:var(--prtd); word-break:keep-all;} .story .mConts{max-width:1480px; padding:100px 10px; margin:0 auto} .story .sect_tit_s{margin-bottom:24px; display:block; font-size:20px; line-height:1.5; font-weight:700; color:#1ea049; font-style:normal; text-align:center;} .story .cont_tit{font-size:40px; line-height:1.25; font-weight:700; color:#333; text-align:center;} .story .cont_tit span{color:#1ea049} .story .pg_tit{text-align:center;} .story .pg_tit strong{display:block; padding-bottom:50px; font-size:20px; line-height:1.5; font-weight:700; color:#333; position:relative;} .story .pg_tit strong::after{content:""; display:block; width:1px; height:28px; background-color:#707171; position:absolute; left:50%; bottom:0;} .story .sect_tit{margin-top:8px; text-align:center;} .story .sect_tit h3{font-size:40px; line-height:80px; font-weight:700; color:#333} .story .sect_tit h3 em{display:inline-block; font-size:60px; line-height:94px; font-weight:900; font-style:normal;} .story .sect_tit h3 em span{color:#1ea049} .story .bann_box{margin-top:27px; padding:195px 30px 200px; color:#fff; text-align:center; background:url("/theme/basic/img/company/story_bann_bg.jpg") no-repeat center/cover;} .story .bann_box dt{font-size:40px; line-height:1.5; font-weight:600;} .story .bann_box dd{margin-top:23px; font-size:30px; line-height:1.47;} .story .one_step{margin-top:50px; padding:325px 0 0; background:url("/theme/basic/img/company/one_stop_top_line.png") no-repeat center top/auto;} .story .one_step .cont_intro{padding-top:183px; background:url("/theme/basic/img/company/one_stop_bg.png") no-repeat top center/contain;} .story .one_step .cont_intro dd{margin-top:27px; font-size:22px; line-height:30px; color:#333; text-align:center;} .story .one_step .cont_intro .img_box{margin-top:115px; text-align:center;} .story .one_step .cont_intro .img_box img{width:100%; max-width:fit-content;} .story .one_step .process_img_li{margin-top:130px; display:flex; gap:30px 27px;} .story .one_step .process_img_li li{padding:350px 40px 46px; width:calc((100% - 81px) / 4); background-repeat:no-repeat; background-position:center; background-size:cover;} .story .one_step .process_img_li li p{font-size:22px; line-height:30px; font-weight:600; color:#fff;} .story .one_step .process_img_li li p span{display:block; font-size:18px; line-height:24px; font-weight:400;} .story .one_step .process_img_li li:nth-child(1){background-image:url("/theme/basic/img/company/process_bg_01.jpg");} .story .one_step .process_img_li li:nth-child(2){background-image:url("/theme/basic/img/company/process_bg_02.jpg");} .story .one_step .process_img_li li:nth-child(3){background-image:url("/theme/basic/img/company/process_bg_03.jpg");} .story .one_step .process_img_li li:nth-child(4){background-image:url("/theme/basic/img/company/process_bg_04.jpg");} .story .vision{margin-top:150px;} .story .vision ul{margin-top:63px; display:flex; gap:72px;} .story .vision ul li{padding:55px 40px 60px; width:calc((100% - 144px) / 3); border-radius:0 30px; background-color:#f3f4f5;} .story .vision ul li .num{font-size:50px; line-height:1; font-weight:700; color:#333;} .story .vision ul li dl{margin-top:25px;} .story .vision ul li dt{font-size:30px; line-height:1.4; color:#1ea049; font-weight:700;} .story .vision ul li dt .en_tit{display:block; font-size:20px; line-height:1.5; color:#666; font-weight:600;} .story .vision ul li dd{margin-top:32px; font-size:20px; line-height:1.25; color:#333;} .story .sect_end{margin-top:220px; padding-bottom:40px; position:relative;} .story .sect_end::before{content:""; display:block; width:100%; height:calc(100% - 250px); background-color:#f4f4f4; position:absolute; left:0; bottom:0; z-index:-1;} .story .sect_end .mConts{padding-top:250px;} .story .sect_end .img_box{margin-top:-250px; position:relative;} .story .sect_end .img_box img{width:100%;} .story .sect_end .img_box span{padding:0 24px 30px; display:block; font-size:20px; line-height:1.5; color:#fff; opacity:0.9; position:absolute; right:0; bottom:0;} .story .sect_end .cont_box{margin:130px 0 0 auto; display:flex; gap:70px; max-width:1310px;} .story .sect_end .cont_box .logo_box img{filter:brightness(0) saturate(100%) invert(6%) sepia(8%) saturate(3318%) hue-rotate(327deg) brightness(94%) contrast(90%);} .story .sect_end .cont_box dl{margin-top:5px; color:#333} .story .sect_end .cont_box dt{font-size:48px; line-height:55px; font-weight:700;} .story .sect_end .cont_box dt span{color:#1ea049} .story .sect_end .cont_box dd{margin-top:33px; font-size:28px; line-height:40px;} /* history */ .history {padding: 0 50px;max-width:1480px;margin: 100px auto 0} .history article {/* padding: 0 0 100px; */border-bottom: 1px solid #dddddd;} .history .left {display: inline-block; width: 360px; float: left; padding: 55px 10px;} .history .left strong, .history .left em {display: inline-block; font-size: 2.5rem; color: #000; font-weight: 200; font-style:normal;} .history .right {display: inline-block; width: calc(100% - 360px); float: left; padding: 65px 10px;} .history .right > ul {/* border-top: 1px solid #000; */} .history .right > ul > li {/* border-bottom: 1px solid #ddd; */} .history .right > ul strong { display: inline-block; float: left; margin: 0 90px 0 0; font-family: 'Play', sans-serif; font-weight: 700; font-size: 1.625rem;} .history .right > ul ul {display: inline-block; float: left; width: calc(100% - 150px);} .history .right > ul ul li {margin: 0 0 15px;} .history .right > ul ul li:last-child {margin: 0;} .history .right > ul ul span {width: 80px;float: left;display:inline-block;margin: 0 10px 0 0;font-family: 'Play', sans-serif;font-weight: 700;font-size: 1.125rem;color:#333;} .history .right > ul ul p {display:block;color: #777;font-weight: 300;font-size: 1rem;/* width: calc(100% - 50px); */} .history .right > ul ul p + p{margin: 5px 0 0 0} .history .right > ul ul p.import {font-weight:600;color:#000;} .history .right > ul ul li > div{width: calc(100% - 90px);vertical-align:top;display: inline-block;float: left;} /* 온라인문의 */ .online_tit.s_tit{padding: 180px 0 0 0;} /* 제품 */ .product_index{height:100%;max-width:1680px;text-align:center;margin:0 auto;padding:200px 50px 0;position:relative;} .product_slider{margin: 0 auto;vertical-align:middle;} .product_slider .swiper-container{overflow:inherit;} .product_slider .swiper-container .swiper-wrapper{flex-wrap:wrap; gap:40px} .product_slider .swiper-slide{max-width:100%;display:inline-block;width:auto;width: calc((100% - 80px) / 3);height: 550px;overflow:auto;transform: scale(1);float:left;} .product_slider .swiper-slide + .swiper-slide {} .product_index .slider-image{position:relative;overflow:hidden;vertical-align:middle;height:100%;} .product_index .slider-image img{position: absolute;/* width:100%; *//* position:absolute;left:50%;top:50%;transform: translate(-50%, -50%); */top: 50%;left: 50%;transform: translate(-50%, -50%);} .product_index .slider-image p{left: 50%;position: absolute;bottom: 30px;text-align: center;display: inline-block;transform: translateX(-50%);font-size:2.25rem;color:#808080;font-weight:600;z-index:3;width:100%;} .product_index .slider-image .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);opacity:1;} .product_slider .swiper-slide:hover{transform: scale(1.2);z-index:3;} .product_index .swiper-slide:hover .bg{opacity:0;} .product_index .swiper-slide:hover p{font-size:2.5rem;color:#000;bottom:50px;} */ /* .product_index .slider-image:hover{width:500px;height:720px;} .product_index .slider-image:hover .bg{opacity:0;} /* .product_index .slider-image:nth-child(1){position:absolute;top:50%;left:0;transform: translate(0, -50%);} .product_index .slider-image:nth-child(2){position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);z-index:3;} .product_index .slider-image:nth-child(3){position:absolute;top:50%;right:0;transform: translate(0, -50%);} */ /* 제품 Board List */ .photo_list{width:100%; font-size:0; line-height:0; overflow:hidden;margin:100px 0 0 0} .photo_list>ul{} .photo_list>ul>li{box-sizing: border-box;} .photo_list>ul>li>a{width:100%; display:block; position: relative;} .photo_list>ul>li>a .wrap_thumb{overflow:hidden;position:relative;} .photo_list>ul>li>a .wrap_thumb .thumb_png{width:100%;} .photo_list>ul>li>a .thumb{position: absolute;left: 50%;top: 50%;transform:translate(-50%, -50%);height:100%;} .photo_list>ul>li>a span.bg{width:100%; height:100%; background-color: rgba(0,0,0,0.4); position: absolute; left:0; top:0; opacity: 0; z-index:1; transition: all .3s ease-out; transform-origin: 50% 50%;} .photo_list>ul>li>a span.bg:before, .photo_list>ul>li>a span.bg:after{content: ""; background-color: #fff; display: inline-block; position:absolute; left: 50%; top:50%; box-sizing: border-box; transition: all .3s ease-out; transform-origin: 50% 50%; opacity: 0;} .photo_list>ul>li>a span.bg:before{width: 100px; height: 2px; margin:-1px 0 0 -50px;} .photo_list>ul>li>a span.bg:after{width: 2px; height: 100px; margin:-50px 0 0 -1px;} .photo_list>ul>li>a .area{width:100%; border:1px solid #ebebeb; box-sizing: border-box; display:table; table-layout: fixed;background-color:#fff;} .photo_list>ul>li>a .area .in_area{height:165px;padding: 10px 20px 20px;display:table-cell;vertical-align: middle;box-sizing: border-box;transition: all .3s ease-out;} .photo_list>ul>li>a .area p{font-weight: 300; font-size:1rem; line-height:1.6; color: #666; overflow: hidden; display: block; position: relative; box-sizing: border-box;} .photo_list>ul>li>a .area .title{font-weight: 400; font-size:1.125rem; color: #333;border-bottom:1px solid #ddd;padding:8px 0 ;} .photo_list>ul>li>a .area .title .icon{margin:0 0 2px 5px; vertical-align: middle;} .photo_list>ul>li>a .area .txt{margin-top:10px;} .photo_list>ul>li>a .area .day{margin-top:10px;} .photo_list>ul>li>a .area .one{text-overflow: ellipsis; white-space: nowrap;} .photo_list>ul>li>a .area .two{max-height:3.25rem; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .photo_list>ul>li>a:hover span.bg{opacity: 1;} .photo_list>ul>li>a:hover span.bg:before{width: 50px; margin:-1px 0 0 -25px; opacity: 1;} .photo_list>ul>li>a:hover span.bg:after{height: 50px; margin:-25px 0 0 -1px; opacity: 1;} /* .photo_list.two>ul, .photo_list.three>ul, .photo_list.four>ul, .photo_list.five>ul{margin:-20px 0 0 -20px;} */ .photo_list.two>ul>li, .photo_list.three>ul>li, .photo_list.four>ul>li, .photo_list.five>ul>li{/* margin:20px 0 0 20px; */ display:inline-block; vertical-align: top;} .photo_list.two>ul>li{width:50%;} .photo_list.three>ul>li{width:33.3333%;} .photo_list.four>ul>li{width:25%;} .photo_list.five>ul>li{width:20%;} .photo_list>ul>li.noPost{width:100%; height:400px; padding-top:190px; font-size:16px; line-height:1; color: #474a52; text-align: center; box-sizing: border-box;} .photo_list.product>ul {font-size: 0;} .photo_list.product>ul>li{width: 25% ; padding: 0 20px 20px 0;} .photo_list.product>ul>li>a .thumb{} .photo_list.product>ul>li>a .thumb img{ } .photo_list.product>ul>li:nth-of-type(4n) {padding: 0 20px 20px 0px} .photo_list.product>ul>li.active { max-height: 600px;display:inline-block;animation: 0.5s forwards product_d;} .photo_list.product>ul>li:nth-child(4n+1){/* margin-left:0; */} /* 제품 레이어 */ .info .info_tit{font-size:1.5rem;color:#333;line-height:1.6;display:block;border-bottom:1px solid #000;padding: 20px 0 10px 0; font-family: 'ArnoPro',sans-serif;font-weight:800;} .info .info_list ul li{position:relative;width:33.33%;float:left;display:inline-block;text-align:center;padding: 20px 0;} .info .info_list ul li+li:before{transform: translateY(-50%);content:"";position:absolute;height:80px;width:1px;background-color: #eee;left:0;top: 50%;} .btn_bown{width:160px;;display:block;line-height:45px;height:45px;font-size: 1.25rem;background-color: #cabe9f;text-align: center;margin:20px 0 0 0;color:#fff;font-weight: 500;} .info .data_table_list {} .info .data_table_list>li {} .info .data_table_list>li>b, .info .data_table_list>li>span {padding: 8px 8px 13px 8px;} .info .data_table_list>li>b {font-size: 1rem;font-weight: 500;} .info .data_table_list>li>span {} /* 레이어 */ /* popup */ .wrap_layer{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;overflow: hidden;overflow-y: scroll;display:none;} .pop_close{top: 30px;position: absolute;right: 30px;} .pop-layer {max-width: 1460px;display: none;position: relative;/* top: 50%; *//* left: 50%; *//* width: 1460px; *//* height: auto; */z-index: 10;/* padding: 100px; */margin: 0 auto 50px;/* transform: translate(-50%,-50%); */} .pop-layer .pop-container {background-color: #fff;position:relative; padding: 35px 50px;} .pop-layer .pop_header{color:#fff;line-height:1.6; text-align:center;margin:0 0 20px 0} .pop-layer .pop_header > b{font-family:'Lato',sans-serif;font-weight:600;color:#333;font-size: 2.5rem;} .pop-layer .pop_header > p{color:#666;font-size:1.25rem;} .pop-layer .pop_tit{font-size:22px; color:#000;font-weight:bold;padding:0 0 25px 0px;border-bottom:1px solid #dbdbdb;line-height:1.6;letter-spacing:-0.035em;} .pop-layer .pop_tit span{color:#c41b32;} .pop-layer .pop_tit img{vertical-align:middle;margin-right:10px;margin-bottom:4px} .pop-layer .pop_tit.phone{} .pop-layer .pop_tit.confirm{font-size:24px;font-weight:500;} .pop-layer .pop-conts {} .pop-layer .pop-conts .cont_left{float:left;height:auto; width: calc(100% - 670px);} .pop-layer .pop-conts .cont_left .img_box{} .pop-layer .pop-conts .cont_left .img_box img{max-width:100%;} .pop-layer .pop-conts .cont_right {float:left;width:670px; padding-left: 20px;} .pop-layer .pop-conts .txtBox{margin-bottom:20px;} .pop-layer .pop-conts .txtBox p {font-size:20px; color:#434343;font-weight:300;} .pop-layer .pop-conts .txtBox strong {font-weight:400;color:#1b1b1b;} .dim-layer {padding: 50px;display: none;position: fixed;_position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;overflow-y: scroll;} .dimBg {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display:none;z-index:3;} .dim-layer.active{background: rgba(0,0,0,0.5);} a.btn-layerClose {display: inline-block;height: 25px;padding: 10px;right:10px; top:10px;position:absolute;} .pop-layer .pop_slide .swiper-slide {width:calc((100% - 20px) / 3);height: 9.9vw;max-height:200px;} .pop-layer .pop_slide .swiper-slide p{position:absolute;top:85%;left:50%;transform: translate(-50% , -50%);width:80%;display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-align:center;font-size:1.25rem;color:#000;opacity:1;text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0px #fff;} .pop-layer .pop_slide .swiper-slide a{position:relative;display:block;width:100%;height:100%;} .pop-layer .pop_slide .swiper-slide a:before{content:"";width:100%;height:100%;position:absolute;background-color:rgba(0,0,0,0.2);opacity:1;z-index:3;} .pop-layer .pop_slide .swiper-slide img{position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);} .pop-layer .pop_slide .swiper-slide:hover p{opacity:0;} .pop-layer .pop_slide .swiper-slide:hover a:before{opacity:0;} .pop-layer .pop_slide .swiper-slide{margin-right: 10px;overflow:hidden;} .pop-layer .swiper-button-prev{background: url("../img/img_pop_prev.png")center no-repeat;width:35px} .pop-layer .swiper-button-next{background: url("../img/img_pop_next.png")center no-repeat;width:35px} .pop-layer .swiper-button-prev:after, .pop-layer .swiper-button-next:after{display:none;} .pop-layer .pop-conts .info_list img{max-width:100%;} /* 퀵 제품리스트 */ .product_logo{position:fixed;top:50%;right:0; transform: translateY(-50%);z-index:10;} .qu_product{position:fixed;top:50%;/* right:-100%; */transform: translate(100% , -50%);z-index:30;opacity: 1;right:0;} .qu_product .wrap_qu{width:500px;} .qu_product .wrap_qu .qu_head{height:69px; line-height:70px;background-color:#fff;position:relative;border-bottom: 1px solid #ddd;} .qu_product .wrap_qu .qu_head a.qu_close{transform: translateY(-50%);position:absolute;top: 50%;right:20px;font-size:0;line-height:0;padding:10px;} .qu_product .wrap_qu .qu_head .qu_logo{transform: translateY(-50%);position: absolute;display:block;top: 50%;left: 30px;} .qu_product.active{right:0;opacity:1;transform: translate(0% , -50%);box-shadow: -5px 6px 7px rgba(0,0,0,0.15);} .qu_product #menu{background-color:#f8f8f8;} .qu_product #menu > li + li{border-top:1px solid #ddd;} .qu_product #menu > li > a{position:relative;display:block;width:100%;height:55px; line-height:55px; color:#333;font-size:1.188rem;font-weight:500;padding:0 30px;background:#fff;} .qu_product #menu > li > a i{width:1.5rem; height:0.8125rem; margin-top:-0.375rem; position: absolute; right:1.875rem; top:50%; display:inline-block;} .qu_product #menu > li > a i:after, .qu_product #menu > li > a i:before{content: ""; width:1rem; height: 0.1rem; margin:0 0 0 0; background-color:#333; display: block; position:absolute; top:50%;} .qu_product #menu > li > a i:after{right:0.625rem; transform:rotate(45deg);} .qu_product #menu > li > a i:before{right:0px; transform:rotate(-45deg);} .qu_product #menu > li:last-child{border-bottom: 1px solid #ddd;} .qu_product #menu > li.active>a, .qu_product #menu > li.oPage>a{background-color:#8d8d8d; color: #fff;} .qu_product #menu > li.active>a i, .qu_product #menu > li.oPage>a i{transform:rotate(-180deg);} .qu_product #menu > li.active>a i:after, .qu_product #menu > li.oPage>a i:after, .qu_product #menu > li.active>a i:before, .qu_product #menu > li.oPage>a i:before{background-color:#fff !important;} .qu_product #menu .menu_list{visibility: hidden;height:auto;padding:0;max-height: 0;overflow: hidden;-webkit-transition: 0.5s !important;transition: 0.5s !important;} .qu_product #menu .menu_list .in_menu{padding: 7px 30px 7px;} .qu_product #menu .menu_list .in_menu{} .qu_product #menu .menu_list .in_menu strong{font-size:1.188rem;color:#333;display:block;margin-bottom:10px;} .qu_product #menu .menu_list .in_menu ul{list-style:none;padding:0;} .qu_product #menu .menu_list .in_menu ul li{width:calc((100% - 45px) / 4);float: left;margin-bottom:10px;} .qu_product #menu .menu_list .in_menu ul li + li{margin-left:15px;} .qu_product #menu .menu_list .in_menu ul li:nth-child(4n+1){margin-left:0;} .qu_product #menu > li.active .menu_list{visibility: visible;max-height:390px;overflow-y:scroll;} .qu_product #menu > li.active > a{background:#0592ed;color:#fff;} .qu_product #menu .menu_list .all_view{padding: 7px 30px 7px;} .qu_product #menu .menu_list .all_view button{background-color:#fff;padding:7px 20px;color:#0592ed;border:none;border:1px solid #0592ed } .qu_product #menu .menu_list .in_menu ul li a {display: block;width:100%;background-color:#f8f8f8;text-align:center;min-height: 40px;line-height:40px;font-size: 1rem;float:left;border:1px solid #ddd;color:#666;} .qu_product #menu .menu_list .in_menu ul li a.on{background-color:#0592ed;color:#fff;border:1px solid #0592ed} @media only screen and (max-width : 1600px){ .m_modern .modern_txt{padding:0 50px 0 50px;} .pop-layer .pop_slide .swiper-slide {height:13.7vw;} /* popup */ .wrap_layer{} .pop_close{} .pop-layer {} .pop-layer .pop-container {} .pop-layer .pop_header{} .pop-layer .pop_header > b{} .pop-layer .pop_header > p{} .pop-layer .pop_tit{} .pop-layer .pop_tit span{} .pop-layer .pop_tit img{} .pop-layer .pop_tit.phone{} .pop-layer .pop_tit.confirm{} .pop-layer .pop-conts {} .pop-layer .pop-conts .cont_left{} .pop-layer .pop-conts .cont_left .img_box{max-width:100%;} .pop-layer .pop-conts .cont_left .img_box img{max-width:100%;} .pop-layer .pop-conts .cont_right {} .pop-layer .pop-conts .txtBox{} .pop-layer .pop-conts .txtBox p {} .pop-layer .pop-conts .txtBox strong {} .dim-layer {} .dimBg {} .dim-layer.active{} a.btn-layerClose {} .pop-layer .pop_slide .swiper-slide p{} .pop-layer .pop_slide .swiper-slide:before{} .pop-layer .pop_slide .swiper-slide:hover p{} .pop-layer .pop_slide .swiper-slide:hover:before{} .pop-layer .swiper-button-prev{} .pop-layer .swiper-button-next{} .pop-layer .swiper-button-prev:after, .pop-layer .swiper-button-next:after{} .pop-layer .pop_slide .swiper-slide {height: 11.7vw;} } @media only screen and (max-width : 1460px){ .pop-layer .pop_slide .swiper-slide {height: 13.85vw;} .mTitle{} .mTitle dt{line-height:1.2} .mTitle dt span{} .mTitle.white dt{} .mTitle.white dt span{} .mTitle.white dd{} .mTitle.white dd span{} .m_product .product_txt{/* max-width:100%; */} .m_product .product_txt p{} .m_product .product_img{margin-left:0;} .m_product .product_img img{max-width:100%;} .m_modern .modern_txt{padding: 50px 50PX 50PX 50PX;} .m_modern .in_area{} .m_modern .in_area .title{} .m_modern .in_area .txt{font-size:1.5rem} .m_modern .in_area .etc{} } @media only screen and (max-width : 1300px){ /* 제품 */ .product_index{padding:120px 40px;} .product_slider{} .product_slider .swiper-container{} .product_slider .swiper-container .swiper-wrapper{gap:20px} .product_slider .swiper-slide{width: calc((100% - 40px) / 3);} /* .product_slider .swiper-slide + .swiper-slide {margin-left:20px;} */ .product_index .slider-image{} .product_index .slider-image img{} .product_index .slider-image p{} .product_index .slider-image .bg{} .product_slider .swiper-slide:hover{} .product_index .swiper-slide:hover .bg{} .product_index .swiper-slide:hover p{} .pop-layer .pop_slide .swiper-slide {height: 26.85vw;} } @media only screen and (max-width : 1300px){ .m_product .product_txt{max-width:100%;display:block;padding-right:0;} .m_product .product_img{float:none;display:block;text-align:center;max-width:100%;} .m_product .product_img img{width:auto;display:block;margin: 30px auto 0} .m_process .wrap_process_list li{padding:30px 15px 25px 20px;} .wrap_supply {padding: 70px 10px 50px;} .wrap_supply .img_box{text-align:center;width:100%;} .wrap_supply .img_box img{max-width:100%;} .wrap_supply .supply_list {max-width:100%;} .wrap_supply li {padding: 20px 20px 20px 20px;} .wrap_supply li p{} .wrap_supply li span {} .wrap_supply li + li{} /* popup */ .wrap_layer{} .pop_close{} .pop-layer {/* max-width:90%; */} .pop-layer .pop-container {padding:15px} .pop-layer .pop_header{} .pop-layer .pop_header > b{} .pop-layer .pop_header > p{} .pop-layer .pop_tit{} .pop-layer .pop_tit span{} .pop-layer .pop_tit img{} .pop-layer .pop_tit.phone{} .pop-layer .pop_tit.confirm{} .pop-layer .pop-conts {} .pop-layer .pop-conts .cont_left{float:none;max-width:100%;width:auto;} .pop-layer .pop-conts .cont_left .img_box{text-align:center;} .pop-layer .pop-conts .cont_left .img_box img{} .pop-layer .pop-conts .cont_right {float:none;width:100%;padding-left:0} .pop-layer .pop-conts .cont_right .swiper-slide{margin:20px 0 0 0} .pop-layer .pop-conts .cont_right .swiper-slide img{width:100%;} .pop-layer .pop_slide .swiper-slide p{} .pop-layer .pop_slide .swiper-slide a{} .pop-layer .pop_slide .swiper-slide a:before{} .pop-layer .pop-conts .txtBox{} .pop-layer .pop-conts .txtBox p {} .pop-layer .pop-conts .txtBox strong {} .dim-layer {padding:20px;} .dimBg {} .dim-layer.active{} a.btn-layerClose {} .pop-layer .pop_slide .swiper-slide p{} .pop-layer .pop_slide .swiper-slide:before{} .pop-layer .pop_slide .swiper-slide:hover p{} .pop-layer .pop_slide .swiper-slide:hover:before{} .pop-layer .swiper-button-prev{} .pop-layer .swiper-button-next{} .pop-layer .swiper-button-prev:after, .pop-layer .swiper-button-next:after{} /* stroy */ .story .one_step .process_img_li{gap:30px; flex-wrap:wrap;} .story .one_step .process_img_li li{width:calc(50% - 15px);} .story .vision ul{gap:60px; flex-wrap:wrap;} .story .vision ul li{width:100%;} } @media only screen and (max-width : 1200px){ .pop-layer .swiper-slide {width:210px;height:10vw;} .ideology .ideology_list{} .ideology .ideology_list li{width:50%;margin: 0 0 25px 0} .ideology .ideology_list li p{} .ideology .ideology_list li span{} .ideology .s_tit{} .history .right > ul strong {margin: 0 40px 0 0;} .photo_list.product>ul>li{width: 50%; padding: 0 20px 20px 0;} } @media only screen and (max-width : 1180px){ } @media only screen and (max-width : 1100px){ .m_process .wrap_process_list li{height:280px;} .product_logo{} .qu_product{} .qu_product .wrap_qu{width:350px} .qu_product .wrap_qu .qu_head{} .qu_product .wrap_qu .qu_head a.qu_close{} .qu_product .wrap_qu .qu_head .qu_logo{} .qu_product.active{} .qu_product #menu{} .qu_product #menu > li + li{} .qu_product #menu > li > a{font-size: 1rem;height:45px;line-height: 45px;padding:0 15px} .qu_product #menu > li > a i{} .qu_product #menu > li > a i:after, .qu_product #menu > li > a i:before{} .qu_product #menu > li > a i:after{} .qu_product #menu > li > a i:before{} .qu_product #menu > li.active>a, .qu_product #menu > li.oPage>a{} .qu_product #menu > li.active>a i, .qu_product #menu > li.oPage>a i{} .qu_product #menu > li.active>a i:after, .qu_product #menu > li.oPage>a i:after, .qu_product #menu > li.active>a i:before, .qu_product #menu > li.oPage>a i:before{} .qu_product #menu .menu_list{ } .qu_product #menu .menu_list .in_menu{ padding: 5px 15px 5px;} .qu_product #menu .menu_list .in_menu + .in_menu{} .qu_product #menu .menu_list .in_menu strong{} .qu_product #menu .menu_list .in_menu ul{} .qu_product #menu .menu_list .in_menu ul li{width:calc((100% - 20px) / 3);margin-bottom:10px;} .qu_product #menu .menu_list .in_menu ul li + li{margin-left:10px;} .qu_product #menu .menu_list .in_menu ul li:nth-child(4n+1){} .qu_product #menu .menu_list .in_menu ul li:nth-child(3n+1){margin-left:0px;} .qu_product #menu .menu_list .in_menu ul li:nth-child(4n+1){margin-left:10px;} .qu_product #menu .menu_list .in_menu ul li:nth-child(4){margin-left:0;} .qu_product #menu .menu_list .in_menu ul li:nth-child(1){margin-left:0} .qu_product #menu > li.active .menu_list{} .qu_product #menu > li.active > a{} .qu_product #menu .menu_list .all_view{padding: 10px 15px 5px;} .qu_product #menu .menu_list .all_view button{} .qu_product #menu .menu_list .in_menu ul li a {min-height:35px;line-height: 35px;} .qu_product #menu .menu_list .in_menu ul li a.on{} .btn_bown{width:100%;display:block;line-height:45px;height:45px;font-size: 1rem;} } @media only screen and (max-width : 1024px){ .wrap_count>ul>li{} .m_modern > div.slider_box{height: 350px;display:block;} .s_tit{padding:55px 10px 55px;} .online_tit.s_tit{padding:90px 10px 0;} .gallery_stroy{padding: 55px 10px 40px} .gallery_stroy .s_tit{padding: 0 0 25px 0} .gallery_stroy .swiper-container{padding:0 100px;} .gallery_stroy .swiper-container .swiper-pagination-bullet {} .gallery_stroy .swiper-container .swiper-pagination-bullet-active {} /* 메인링크 */ .mLink{padding:25px 30px;} .mLink ul li{width:calc((100% - 30px) / 2);margin: 0 0 30px 0} .mLink ul li.Link03{margin-left:0;} .mLink ul li + li{} .mLink ul li > a{} .mLink ul li > a img{} .mLink ul li > a img:hover{} .mLink ul li:hover img {} .mLink ul li > a .text_Box {} .mLink ul li > a .text_Box strong{/* font-size:1.25rem; */} .mLink ul li > a .text_Box p{/* font-size: 0.625rem; */} .mLink ul li > a .text_Box img{} /* 메인 중단슬라이드 */ .m_modern{height:auto;} /* .m_modern.video{height:300px;} */ .m_modern > div.slider_box{display:block;} .m_modern > div{width:100%;float:none;} .m_modern > div.slider_box1, .m_modern > div.slider_box2{width:100%;height:300px;float:none;vertical-align:top;} .m_modern .modern_txt{height:auto} .m_modern .in_area{} .m_modern .in_area .title{} .m_modern .in_area .txt{} .m_modern .in_area .etc{} .m_modern.video{height:auto;} .m_modern.video .modern_txt{float:none;} .m_modern.video .in_area .txt{} .m_modern.video .in_area .etc{} .m_modern .swiper-container{} .m_modern .swiper-container .swiper-slide{overflow:hidden;} .m_modern .swiper-container .swiper-slide img{} .m_modern .swiper-container .swiper-pagination-bullet {} .m_modern .swiper-container .swiper-pagination-bullet-active {} .m_process{padding: 35px 20px;} .m_process .mTitle{} .m_process .wrap_process_list{} .m_process .wrap_process_list li{width: calc((100% - 30px) / 2);} .m_process .wrap_process_list li+li{} .m_process .wrap_process_list li:nth-child(3){margin: 0 0 30px 0;} .m_process .wrap_process_list li:nth-child(4){margin:0 0 30px 30px;} .m_process .wrap_process_list li:nth-child(5){margin:0 0 00px 0px;} .m_process .wrap_process_list li:nth-child(3n+1){/* margin:0 0 30px 0; */} .m_process .wrap_process_list li > div p strong{} .m_process .wrap_process_list li > div span{} .m_process .wrap_process_list li > div p{} .m_process .wrap_process_list li:hover{} .m_process .wrap_process_list li:hover div p strong{} .m_process .wrap_process_list li:hover div span{} .m_process .wrap_process_list li:hover{} .m_process .mTitle{margin-bottom:15px;} .m_process .wrap_process_list{margin:0 auto;} .m_process .wrap_process_list li{display:inline-block;float:left;width:calc((100% - 10px) / 2);height:200px;padding: 35px 15px 35px 15px;margin:0 0 15px 0;} .m_process .wrap_process_list li+li{margin-left: 10px;} .m_process .wrap_process_list li:nth-child(3){margin: 0 0px 15px 0;} .m_process .wrap_process_list li:nth-child(4){margin:0 0 15px 10px;} .m_process .wrap_process_list li:nth-child(5){margin:0 0 15px 0px;} .m_process .wrap_process_list li > div p strong{display:block;margin:0;} .m_process .wrap_process_list li > div span{padding:0;text-align:center;margin:0px 0 0 0;width:100%} .m_process .wrap_process_list li > div p{text-align:center;} .history {padding: 0 10px;} .history article {/* padding: 0 0 100px; */border-bottom: 1px solid #dddddd;} .history .left {width: 240px; float: left; padding: 55px 10px;} .history .left strong, .history .left em {} .history .right {width: calc(100% - 240px);padding: 65px 10px;} .history .right > ul {/* border-top: 1px solid #000; */} .history .right > ul > li {/* border-bottom: 1px solid #ddd; */} .history .right > ul strong {} .history .right > ul ul {width:100%;} .history .right > ul ul li {margin: 0 0 15px;} .history .right > ul ul li:last-child {margin: 0;} .history .right > ul ul span {} .history .right > ul ul p {} .history .right > ul ul p + p{} .history .right > ul ul p.import {} .history .right > ul ul li > div{} .wrap_count{padding: 50px 10px;} /* 제품 */ .product_index{padding: 100px 15px 0;} .product_slider{} .product_slider .swiper-slide{width: calc((100% - 20px) / 3);} /* .product_slider .swiper-slide + .swiper-slide {margin-left:10px;} */ .product_slider .swiper-container{} .product_slider .swiper-container .swiper-wrapper{gap:10px} .product_slider .swiper-slide{} .product_index .slider-image{} .product_index .slider-image img{} .product_index .slider-image p{} .product_index .slider-image .bg{} .product_slider .swiper-slide:hover{} .mobile_porduct{display:none;} .m_process .wrap_process_list li > div p img{position: relative;top: auto;left: auto;} .m_process .wrap_process_list li > div p b{padding:0;} .m_process .wrap_process_list li > div p strong{padding:0;} /* stroy */ .story .sect_end .cont_box{flex-wrap:wrap; justify-content:center;} .story .sect_end .cont_box dl{width:100%; text-align:center;} .story .sect_end .cont_box dd br{display:none;} } @media only screen and (max-width : 768px){ .pop-layer .pop_slide .swiper-slide p{font-size: 1rem;} .pop-layer .pop_slide .swiper-slide { height: 25.85vw;} .pc{display:none;} .tablet{display:block;} .mo{display:none;} img.pc{display:none !important;} img.mo{display:inline-block !important;} /* 공통 */ .s_tit strong{line-height:1.2;} #snb {} #snb .sMenu .lnbSub{display: flex; justify-content: center;} #snb .sMenu a{height:50px;} #snb .sMenu a.point{} #snb .sMenu a+a{} /* #snb .sMenu a+a:before{content:"";position:absolute;left:1px;top: 18px;width:1px;height:24px;background-color:#e6e2e0;z-index:3;} */ #snb .sMenu a>span{} #snb .sMenu a.oPage{} .m_process .mTitle{margin-bottom:15px;} .m_process .wrap_process_list{margin:0 auto;} .m_process .wrap_process_list li{display:inline-block;float:left;width:calc((100% - 10px) / 2);height:200px;padding: 25px 15px 25px 15px;margin:0 0 15px 0;} .m_process .wrap_process_list li+li{margin-left: 10px;} .m_process .wrap_process_list li:nth-child(3){margin: 0 0px 15px 0;} .m_process .wrap_process_list li:nth-child(4){margin:0 0 15px 10px;} .m_process .wrap_process_list li:nth-child(5){margin:0 0 15px 0px;} .m_process .wrap_process_list li > div p strong{display:block;margin:0;margin: 3px 0 0 0} .m_process .wrap_process_list li > div p span{padding:0;text-align:center;margin:5px 0 0 0;} .m_process .wrap_process_list li > div p{text-align:center;} .m_process .wrap_process_list li:hover{background: #fff;transform:none; -webkit-transform: none;} .m_process .wrap_process_list li:hover div p span{} .m_process .wrap_process_list li:hover div p strong{color:#333;} .m_process .wrap_process_list li:hover div p b{color:#888;} .m_process .wrap_process_list li:hover div p span{color:#888} .m_process .wrap_process_list li:hover{-ms-transform: translateY(0);/* transform: translateY(-10px); *//* -webkit-transform: translateY(-10px); */} .ideology .ideology_list{} .ideology .ideology_list li{} .ideology .ideology_list li p{font-size:1.25rem;} .ideology .ideology_list li span{font-size:1rem;max-width:80%; display: inline-block;} .ideology .s_tit{padding:55px 0 30px;} /* stroy */ .story .pg_tit strong{font-size:16px;} .story .cont_tit{font-size:25px;} .story .sect_tit_s{font-size:14px;} .story .sect_tit h3{font-size:25px; line-height:35px;;} .story .sect_tit h3 em{margin-bottom:15px; font-size:35px; line-height:45px;} .story .bann_box dt{font-size:25px;} .story .bann_box dd{font-size:18px;} .story .one_step{padding:175px 0 0; background-size:6px;} .story .one_step .cont_intro dd{font-size:18px; line-height:26px;} .story .one_step .cont_intro dd br{display:none;} .story .one_step .cont_intro .img_box img{max-width:300px;} .story .one_step .process_img_li li{width:100%;} .story .vision ul li{padding:45px 30px 50px} .story .vision ul li .num{font-size:35px;} .story .vision ul li dt{font-size:25px;} .story .vision ul li dt .en_tit{font-size:18px;} .story .vision ul li dd{font-size:18px;} .story .sect_end{margin-top:80px;} .story .sect_end::before{height:calc(100% - 17.12vw);} .story .sect_end .mConts{padding-top:0;} .story .sect_end .img_box{margin-top:0;} .story .sect_end .img_box span{padding:0 10px 10px; font-size:14px;} .story .sect_end .cont_box .logo_box img{max-width:100px;} .story .sect_end .cont_box dt{font-size:25px; line-height:30px;} .story .sect_end .cont_box dd{font-size:20px; line-height:25px;;} .history {padding: 0 10px;margin: 50px 10px 0;} .history article {/* padding: 0 0 100px; */border-bottom: 1px solid #dddddd;} .history .left {width: 240px;float: none;padding: 25px 10px;} .history .left strong, .history .left em {} .history .right {padding: 30px 10px;float:none;width:100%;} .history .right > ul {/* border-top: 1px solid #000; */} .history .right > ul > li {/* border-bottom: 1px solid #ddd; */} .history .right > ul strong {} .history .right > ul ul {width:100%;} .history .right > ul ul li {margin: 0 0 15px;} .history .right > ul ul li:last-child {margin: 0;} .history .right > ul ul span {} .history .right > ul ul p {} .history .right > ul ul p + p{} .history .right > ul ul p.import {} .history .right > ul ul li > div{} .photo_list{margin:50px 0;} .photo_list>ul>li>a .area .in_area{height:125px;} .photo_list>ul>li>a .area .in_area{padding: 5px 10px 10px;} .photo_list.product>ul>li{padding: 0 10px 10px 0;} .photo_list.product>ul>li:nth-of-type(4n) {padding: 0 10px 10px 0px} .product_index{padding: 100px 15px 80px;} .product_slider .swiper-container{overflow:hidden;display:block;} .product_slider .swiper-wrapper {display:block;} .product_slider .swiper-slide{height:450px;width:100%;display:block;} .product_slider .swiper-slide + .swiper-slide {margin-left:0;} .product_slider .swiper-slide{} .product_index .slider-image{} .product_index .slider-image img{} .product_index .slider-image p{font-size:2.5rem;color:#000;bottom:50px;} .product_index .slider-image .bg{opacity:0;} .product_slider .swiper-slide:hover{transform:none;} .product_index .swiper-slide:hover .bg{} .product_index .swiper-slide:hover p{font-size:2.5rem;color:#000;bottom:50px;} .product_slider .swiper-slide + .swiper-slide{margin-top:20px;} .m_process .wrap_process_list li > div p img{max-width:50px;} #mVisual .inConts .ii{} #mVisual .inConts .ii.tit{} #mVisual .inConts .ii.tit>strong{font-size:2.5rem;line-height:1.2;} #mVisual .inConts .ii.tit+.txt{font-size:1.25rem;} #mVisual .inConts .ii.logo img{} } @media only screen and (max-width : 600px){ .product_index{padding: 85px 15px 40px;} .pop-layer .pop_slide .swiper-slide {height: 30.85vw;} .pop-layer .pop-container{padding:10px;} .data_table_list {} .data_table_list>li {} .data_table_list>li>b, .data_table_list>li>span {} .data_table_list>li>b {width:95px;} .data_table_list>li>span {} .info .info_list ul li p{font-size:0.875rem;margin:7px 0 0 0} .product_logo{} .qu_product{background-color: #fff;z-index:20;height: 100vh;z-index: 20;} .qu_product .wrap_qu{width:100%;} .qu_product .wrap_qu .qu_head{} .qu_product .wrap_qu .qu_head a.qu_close{} .qu_product .wrap_qu .qu_head .qu_logo{} .qu_product.active{width:100%;} .qu_product #menu{} .qu_product #menu > li > a{} .qu_product #menu > li > a i{} .qu_product #menu > li > a i:after, .qu_product #menu > li > a i:before{} .qu_product #menu > li > a i:after{} .qu_product #menu > li > a i:before{} .qu_product #menu .menu_list{ } .qu_product #menu .menu_list .in_menu + .in_menu{} .qu_product #menu .menu_list .in_menu strong{} .qu_product #menu .menu_list .in_menu ul{} .qu_product #menu .menu_list .in_menu ul li{width:calc((100% - 20px) / 3);margin-bottom:10px;} .qu_product #menu .menu_list .in_menu ul li + li{margin-left:10px;} .qu_product #menu .menu_list .in_menu ul li:nth-child(4n+1){} .qu_product #menu .menu_list .in_menu ul li:nth-child(3n+1){margin-left:0px;} .qu_product #menu .menu_list .in_menu ul li:nth-child(4n+1){margin-left:10px;} .qu_product #menu .menu_list .in_menu ul li:nth-child(4){margin-left:0;} .qu_product #menu .menu_list .in_menu ul li:nth-child(1){margin-left:0} .qu_product #menu > li.active .menu_list{} .qu_product #menu > li.active > a{} .qu_product #menu .menu_list .in_menu ul li a {width:100%;min-height:40px;line-height: 40px;} .qu_product #menu .menu_list .in_menu ul li a.on{} .product_logo{max-width:60px} .product_logo img{width:100%;} .m_address {} .m_address .address_list{} .m_address .address_list li{} .m_address .address_list li + li{} .m_address .address_list li p{} .m_address .address_list li span{font-size:1.15rem;} .m_process .wrap_process_list li > div p img{max-width:40px;} .product_slider .swiper-slide{ height: 120vw;} .product_slider .swiper-slide + .swiper-slide{margin-top:10px;} #mVisual .slick-prev{background-image: url("../img/img_swiper_prev.png"); left:15px;width:18px;height: 28px;} #mVisual .slick-next{background-image: url("../img/img_swiper_next.png"); right:15px;width:18px;height: 28px;} } @media only screen and (max-width : 480px){ .pop-layer .pop_slide .swiper-slide { height: 26.85vw;} .pc{display:none;} .tablet{display:none;} .mo{display:block;} .gallery_stroy .swiper-container{padding:0;} .data_table_list {} .data_table_list>li {} .data_table_list>li>b, .data_table_list>li>span {} .data_table_list.logn>li>b {width:200px;} .data_table_list>li>span {} .photo_list>ul>li>a .area .in_area{height:125px;} .photo_list>ul>li>a .area .in_area{padding: 5px 10px 10px;} .photo_list>ul>li>a .area .title{padding:5px 0;} /* 메인타이틀 */ .mTitle{margin-bottom:30px;} .mTitle dt{font-size:2rem;line-height:1.35} .mTitle dt span{} .mTitle.white dt{} .mTitle.white dt span{} .mTitle.white dd{} .mTitle.white dd span{} /* 탭메뉴 */ .lastDepth{display:block;margin-bottom:35px;} .lastDepth>a{width:calc((100% - 5px)/2);float:left;font-size:0.875rem;margin-bottom:5px;height: 50px;} .lastDepth>a:before{} .lastDepth>a+a{} .lastDepth>a:nth-child(2n+1){margin: 0 5px 0 0} .lastDepth>a>span{} .lastDepth>a:hover::before, .lastDepth>a.active::before{display:none;} .lastDepth>a:hover, .lastDepth>a.active{} .btn_video{font-size:1rem;color:#fff;padding:10px 40px;} .btn_shop{padding:10px 40px;display:inline-block;margin: 50px 0 0 0} #mVisual{} #mVisual .visualRoll{} #mVisual .visualRoll .slider{} #mVisual .visualRoll .visual_bg img{} #mVisual .visualRoll .visual_bg img{} #mVisual .visualRoll .visual_bg{} #mVisual .inConts{} #mVisual .inConts>.vTxt{} #mVisual .inConts .ii{} #mVisual .inConts .ii{} #mVisual .inConts .ii.tit{margin:20px 0 0 0} #mVisual .inConts .ii.tit>strong{font-size:2.625rem;line-height:1.2;} #mVisual .inConts .ii.tit+.txt{font-size:1rem;} #mVisual .inConts .ii.logo img{height:5.625rem;} /* 메인링크 */ .mLink{padding:20px 10px;} .mLink ul li{float: none;display:block;box-sizing:border-box;width:100%;text-align:center;height:auto;margin: 0 0 0 0} .mLink ul li + li{margin-left:0;margin:10px 0 0px 0;} .mLink ul li > a{height: 100%;display: block;overflow:hidden;} .mLink ul li > a img{} .mLink ul li > a img:hover{} .mLink ul li:hover img {} .mLink ul li > a .text_Box {} .mLink ul li > a .text_Box strong{/* font-size:1.25rem; */} .mLink ul li > a .text_Box p{/* font-size: 0.625rem; */} .mLink ul li > a .text_Box img{} .m_product{padding:3.125rem 0.625rem 3.125rem;} .data_table_list {} .data_table_list>li {} .data_table_list>li>b, .data_table_list>li>span {padding:10px 10px 10px 0} .data_table_list.long>li>b {width:150px;} .data_table_list>li>span {} .m_product .product_txt{max-width:100%;} .m_product .product_txt p{} .m_product .product_img{margin-left:0;max-width:100%;} .m_product .product_img img{} /* 메인 중단슬라이드 */ .m_modern{height:auto;} .m_modern.video{/* display: flex;flex-direction: column-reverse; */} .m_modern > div.slider_box{height:225px;display:block;} .m_modern > div{width:100%;float:none;max-height:225px;} .m_modern .modern_txt{padding: 2.188rem 0.625rem;text-align:center;} .m_modern .in_area{} .m_modern .in_area .title{font-size:1rem;} .m_modern .in_area .txt{font-size:1.25rem;margin: 0 0 15px 0;} .m_modern .in_area .etc{font-size:1rem;} .m_modern.video .modern_txt{} .m_modern.video .in_area .txt{} .m_modern.video .in_area .etc{} .m_modern .swiper-container{} .m_modern .swiper-container .swiper-slide{ height: 67vw;} .m_modern .swiper-container .swiper-slide img{} .m_modern .swiper-container .swiper-pagination-bullet {} .m_modern .swiper-container .swiper-pagination-bullet-active {} /* */ .wrap_count{padding: 50px 10px;} .wrap_count>ul{} .wrap_count>ul>li{width:50%;padding:10px 0 ;} .wrap_count>ul>li+li:before{display:none;} .wrap_count>ul>li p, .wrap_count>ul>li #counter1, .wrap_count>ul>li #counter2, .wrap_count>ul>li #counter3, .wrap_count>ul>li #counter4{padding:15px 0;font-size:1.8rem;} .wrap_count>ul>li .counter_txt{} .wrap_count>ul>li p{margin: 0 0 0 10px} .wrap_count>ul>li:nth-child(-n+2){border-bottom:1px solid #eee;} .wrap_count>ul>li:nth-child(2n+1){border-right:1px solid #eee;border-left:0;} /* 메인배너 */ .m_banner{padding:60px 10px 50px;} .m_banner strong{font-size:2rem;} .m_banner p{font-size:1rem;} /* 메인프로세서 */ .m_process{padding:35px 10px} .m_process .mTitle{margin-bottom:15px;} .m_process .wrap_process_list{margin:0 auto;} .m_process .wrap_process_list li{display:inline-block;float:left;width:calc((100% - 10px) / 2);height:210px;padding: 10px 10px 10px 10px;margin:0 0 15px 0;} .m_process .wrap_process_list li+li{margin-left: 10px;} .m_process .wrap_process_list li:nth-child(3){margin: 0 0px 15px 0;} .m_process .wrap_process_list li:nth-child(4){margin:0 0 15px 10px;} .m_process .wrap_process_list li:nth-child(5){margin:0 0 15px 0px;} .m_process .wrap_process_list li > div p strong{display:block;margin: 8px 0 0 0} .m_process .wrap_process_list li > div span{padding:0;text-align:center;margin:0px 0 0 0;} .m_process .wrap_process_list li > div p{} .m_process .wrap_process_list li > div p{text-align:center;float:none;width:100%;} .m_process .wrap_process_list li:hover{background: #fff;transform:none; -webkit-transform: none;padding:10px} .m_process .wrap_process_list li:hover div p strong{color:#333;} .m_process .wrap_process_list li:hover div p span{color:#888} .m_process .wrap_process_list li .number{float:none;display: inline-block;width:100%;padding-right:0;} .m_process .wrap_process_list li .number span {font-size:1.25rem;} .m_process .wrap_process_list li .number img{max-width:45px;} /* 메인주소 */ .m_address {padding: 60px 0 50px} .m_address .address_list{text-align:center;} .m_address .address_list li{width:100%;} .m_address .address_list li + li{margin-top:35px;} .m_address .address_list li p{margin:14px 0 6px;font-size:1rem;} .m_address .address_list li span{} /* 메인지도 */ .m_map {margin: 0 10px 50px 10px;} .m_map .root_daum_roughmap .wrap_map{height:250px;} .m_map .root_daum_roughmap .wrap_controllers{display:none;} #sVisual{} #sVisual .sVisual_in{height:250px;} #sVisual h2{} #sVisual h2>p{} #sVisual h2>strong{font-size:2.5rem;} #sVisual h2>span{} .product_logo{} .qu_product{} .qu_product .wrap_qu{padding:40px 0 0 0} .qu_product .wrap_qu .qu_head{} .qu_product .wrap_qu .qu_head a.qu_close{} .qu_product .wrap_qu .qu_head .qu_logo{} .qu_product.active{} .qu_product #menu{} .qu_product #menu > li > a{} .qu_product #menu > li > a i{} .qu_product #menu > li > a i:after, .qu_product #menu > li > a i:before{} .qu_product #menu > li > a i:after{} .qu_product #menu > li > a i:before{} .qu_product #menu .menu_list{ } .qu_product #menu .menu_list .in_menu + .in_menu{} .qu_product #menu .menu_list .in_menu strong{} .qu_product #menu .menu_list .in_menu ul{} .qu_product #menu .menu_list .in_menu ul li{width:calc((100% - 30px) / 3);} .qu_product #menu .menu_list .in_menu ul li + li{} .qu_product #menu .menu_list .in_menu ul li:nth-child(4){margin-left:0;} .qu_product #menu .menu_list .in_menu ul li:nth-child(3n+1){margin-left:0px;} .qu_product #menu .menu_list .in_menu ul li:nth-child(1){margin-left:0} .qu_product #menu > li.active .menu_list{} .qu_product #menu > li.active > a{} .qu_product #menu .menu_list .in_menu ul li a {width:100%;} .qu_product #menu .menu_list .in_menu ul li a.on{} .product_slider .swiper-slide{ height: 120vw;} .product_index .slider-image p{bottom:20px;} .product_index .swiper-slide:hover p{bottom:20px;} }