@charset "UTF-8"; .tabDepth>a, .lastDepth>a, .depth3>a, .depth3>a>span:before, .faq_list>li .q, .faq_list>li .q>.bul, #mVisual .visualRoll .slider>div, #mVisual .vTxtArea .ii, #mVisual .slick-dots>li button, #mVisual .slick-dots>li button:before, #mVisual .vTxt .ii, #mVisual .iconMenu .inConts>a, .swiper-button, .swiper-pagination-bullet, .m-tab>a, #quick-right>a, .store-area>.store-map .thumb .finding-map-link, .store-area>.store-map .thumb .finding-map-link:after, #quick-right, #quick-social{transition: all .3s ease-out; transform-origin: 50% 50%;} .historyArea .history_box>.logo>span, .historyArea .history_box>.list:before, #mVisual .vTxt .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} #mainVisual .vTxt .ii{transition: all .7s ease-out; transform-origin: 50% 50%;} #mVisual .visualRoll .slider .photoBox p{transition: all 1s ease-out; transform-origin: 50% 50%;} #mainVisual .visualRoll .swiper-slide>img{transition: all 1s ease-out; transform-origin: 50% 50%;} /*[s] All Style */ .f0{font-size:0; line-height:0;} .depth-three{width:100%; margin-bottom:3rem; font-size:0; line-height:0; text-align: center; overflow:hidden; display: flex; justify-content: center; } .depth-three>a{width:20rem; height:6.5rem; background-color: #f8f8f8; border:1px solid #e2e2e2; font-weight:500; font-size:1.8rem; line-height:1.2; color: #666; display: flex; align-items: center; justify-content: center; transition: all .3s ease-out; position: relative;} .depth-three>a+a{margin-left:-1px;} .depth-three>a:is(:hover, .active){background-color: var(--point); border-color:var(--point); color:#fff; z-index:2;} .depth-three-conts{display:none;} h4.bul{margin-bottom:4.5rem; padding-left:2rem; font-weight: 700; font-size:2.4rem; line-height:1; color: #1b1b1b; position: relative;} h4.bul:before{content: ""; width: 0.8rem; height: 0.8rem; background-color: var(--point); position:absolute; left: 0; top:0.7rem; border-radius:100%;} *+h4.bul{margin-top:6.5rem;} .lattice{background-size: 1rem, 3rem, 1rem 1rem, 3rem 3rem; background-image: linear-gradient(90deg, #ededed 1px, transparent 1px), linear-gradient(90deg, #ededed 1px, transparent 1px), linear-gradient(#ededed 1px, transparent 1px), linear-gradient(#ededed 1px, transparent 1px);} .wideFrame{height: 0; padding-bottom: 56.25%; position: relative;} .wideFrame>video, .wideFrame>iframe{width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .wideKakao{width: 100%; margin: 0 auto; position: relative;} .wideKakao>.root_daum_roughmap{width: 100%; height:56rem;} .wideKakao>.root_daum_roughmap .wrap_map{height:100%; position: absolute; left: -1px; right: -1px; top: -1px;} .wideKakao .hide {display: none;} /* .scroll_area{overflow-x:auto;} */ .scrollTb{display:inline-block; font-size:0; line-height:0; text-align: center;} .scrollTb img{max-width:none;} .nTable.scrollTb{padding-bottom:2rem;} .scroll_info{width:100%; padding:4rem 0; font-size:0; line-height:0; position: relative; display:none;} .scroll_info:before{content:"← scroll →"; margin-top:0; font-size:1.8rem; line-height:1; color: #ff0000; display:inline-block; position: absolute; left:44%; top:2rem; animation-duration: 1s; animation-iteration-count:infinite; animation-name: scrollMove; animation-timing-function:ease-In-Out;animation-direction:alternate;} @keyframes scrollMove { from {color: #222; left:42%;} to {color: var(--point); left:46%;} } select.base{width:100%; height:4rem; padding:0 5rem 0 2rem; background:#fff url('/images/bg_select_arr_m.png') no-repeat right center; background-size:3rem; border:1px solid #ccc; font-weight: 400; font-size:1.5rem; line-height:3.8rem; color: #666; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:5px; box-sizing:border-box;} select.base::-ms-expand{display:none;} .flex{display:flex; align-items:center;} /*[e] All Style */ /*[s] Main Popup Style */ #hd_pop {z-index:101;position:relative;margin:0 auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops{width:auto !important; max-width:100%; height:auto !important; background-color:#fff; position:fixed; display:block; border-radius: 1rem; overflow:hidden; box-sizing:border-box; box-shadow:0 0 3rem rgba(0,0,0,0.5);} .hd_pops img{width:100%} .hd_pops_con{} .hd_pops_footer{display: flex; gap: 1rem; justify-content: space-between; padding: 15px 2rem; font-size: 0; line-height: 0; color:#888; text-align:left;position:relative} .hd_pops_footer.white{background-color: #fff;} .hd_pops_footer.black{background-color: #000;} .hd_pops_footer .hd_pops_reject {position: relative; font-size: 14px; line-height: 1; color: #888; padding: 0 0 0 20px;} .hd_pops_footer .hd_pops_reject::before{position: absolute; content: ''; width: 14px; height: 14px; top: 0; left: 0; border: 1px solid #888; background-color: #fff;} .hd_pops_footer .hd_pops_reject::after{position: absolute; content: ''; width: 10px; height: 10px; top: 2px; left: 2px; background-image: url('/img/icon_check.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;} .hd_pops_footer .hd_pops_close{width: 14px; height: 14px;/* background-image: url('/img/icon_close.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; */} /* black */ .hd_pops_footer.black .hd_pops_reject {color: #fff;} .hd_pops_footer.black .hd_pops_reject::before{border: 1px solid #fff;} /* .hd_pops_footer.black .hd_pops_reject::after{filter: brightness(0) saturate(100%) invert(100%);} */ .hd_pops_footer.black .hd_pops_close{filter: brightness(0) saturate(100%) invert(100%);} #popLayer{width:100%; height:100%; font-size:0; line-height:0; position:fixed; left:0; top:0; z-index:99; overflow:hidden; overflow-y:auto;} #popLayer.disNone{display:none !important;} #popLayer #moPopArea{width:100vw; height:100vh; padding:10rem 3rem; box-sizing: border-box; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; -ms-flex-align:center;} #popLayer #moPopArea .moPop{width:100%; max-width:50rem; margin:0; position: relative;} #popLayer #moPopArea #moPopRoll{background-color: #fff; border-radius:2rem; overflow:hidden; box-shadow:0 2rem 4rem rgba(0,0,0,0.3);} #popLayer .slider{width:100%; border-radius:2rem 2rem 0 0; box-sizing:border-box; overflow:hidden;} #popLayer .slider img{width:100%; vertical-align: top;} #popLayer .slider .HKeditorContent{padding:20px; font-size:20px; line-height:1.5; color: #666;} #popLayer .slider .HKeditorContent img{width:auto;} #popLayer #moPopRoll.roll .slider{} #popLayer .layerPopClose{width:3rem; height:3rem; margin:0; padding:0; font-size:0; line-height:0; position: absolute; right:1.5rem; top:1.5rem; z-index:6; transform:rotate(45deg);} #popLayer .layerPopClose:before, #popLayer .layerPopClose:after{content: ""; background-color: #222; display: block; position:absolute; left: 50%; top:50%;} #popLayer .layerPopClose:before{width: 100%; height: 2px; margin:-1px 0 0 -1.5rem;} #popLayer .layerPopClose:after{width: 2px; height: 100%; margin:-1.5rem 0 0 -1px;} #popLayer .moPopClose{width:100%; border-radius:0 0 2rem 2rem; display: flex; justify-content: space-between; overflow:hidden;} #popLayer .moPopClose>*{flex:1 1 50%; height:6rem; font-size:1.6rem; line-height:1; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} #popLayer .moPopClose button{background-color: #878896; border:none; color: #dcdeea; position: relative;} /*#popLayer .moPopClose button:before{content: "X"; width: 1.8rem; height: 1.8rem; background-color: rgba(255,255,255,0.3); border:1px solid #000; font-family: dotum; font-weight: bold; font-size:1.6rem; line-height:1.6rem; color: #000;display: inline-block; position:absolute; top:0; box-sizing: border-box;} #popLayer .moPopClose button.toDay_close{padding-left:2.5rem;} #popLayer .moPopClose button.toDay_close:before{left:0;}*/ #popLayer .moPopClose button.close{padding-right:2.5rem} #popLayer .moPopClose button.close:before{right:0;} #popLayer .moPopClose a{background-color: #3617cd; color:#fff} #popLayer .slick-dots{width:100%; padding:0; text-align: center; position: absolute; left:0; bottom:7rem; z-index:7;} #popLayer .slick-dots>li{margin:0 0.7rem; display:inline-block; vertical-align: top;} #popLayer .slick-dots>li+li{} #popLayer .slick-dots>li button{width:1.4rem; height:1.4rem; padding:0; background-color:#d4d7d9; border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:999px; overflow:hidden; transition: all .3s ease-out;} #popLayer .slick-dots>li.slick-active button{width:30px; background-color: #333;} #popLayer #moPopArea #moPopRoll{opacity: 0; visibility: hidden; transition: opacity 1s ease;} #popLayer #moPopArea #moPopRoll.open, #popLayer #moPopArea #moPopRoll.slick-initialized{visibility: visible; opacity: 1;} /*[e] Main Popup Style */ /*[s] Main Style */ .mScrolls{width:100%; font-size:0; line-height:0; text-align: center; position: fixed; left:0; bottom:40px; z-index:8; display:none; animation-duration: .7s; animation-iteration-count:infinite; animation-name: scrollDown; animation-timing-function:ease-in-out; animation-direction:alternate; } @keyframes scrollDown { from {bottom:50px; opacity:1;} to {bottom:30px; opacity:0.5} } .top_tit{font-size:5.6rem; line-height:1.2; font-weight:800; color:#222;} .top_intro{font-size:3rem; line-height:1.4; font-weight:500; color:#222;} .top_tit + .top_intro{margin-top:2.1rem;} /* .main_sect{padding:20rem 0} */ .full_sect:not(#mainVisual, .fp-auto-height) .fp-tableCell{padding-top:10rem;} .vm_btn{width:19rem; height:6rem; font-weight:600; font-size:1.8rem; line-height:1; color: #fff; text-align: center; font-family:var(--rhd); display: flex; align-items: center; justify-content: center; gap:0 1rem; border:1px solid rgba(255,255,255,0.2); border-radius:1rem; text-shadow:none; background-color:rgba(255,255,255,0.1);;} .vm_btn::after{content:""; display:block; width:1.4rem; height:1.5rem; background:url("/images/ico_btn_arrow.svg") no-repeat center/contain;} /* visual */ #mainVisual{width:100%; position: relative; overflow:hidden;} #mainVisual .visualRoll{white-space: nowrap;} #mainVisual .visualRoll .swiper-slide{width:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} #mainVisual .visualRoll .swiper-slide>img{width:100%; max-width:none; height:96rem; object-fit: cover; object-position: center center; transform:scale(1.2);} #mainVisual .vTxtArea{width:100%; max-width:172rem; height:100%; padding:0 2rem; text-align: center; position: absolute; left:50%; top:0; z-index:5; transform:translateX(-50%); display: flex; align-items: center; justify-content: center;} #mainVisual .vTxt{width:100%; position: relative; padding-bottom:13.4rem;} #mainVisual .vTxt .ii{line-height:1; color: #fff; top:50px; display:block; opacity: 0; position: relative; word-break:keep-all; word-wrap:break-word; white-space: normal;} #mainVisual .vTxt .i01{transition-delay: 1.3s;} #mainVisual .vTxt .i02{transition-delay: 1.35s;} #mainVisual .vTxt .i03{transition-delay: 1.4s;} #mainVisual .vTxt .i04{transition-delay: 1.45s;} #mainVisual .vTxt .i05{transition-delay: 1.5s;} #mainVisual .vTxt .i06{transition-delay: 1.55s;} #mainVisual .vTxt .i07{transition-delay: 1.6s;} #mainVisual .vTxt .ii.cate{font-weight: bold; font-size:1.7rem; position: relative;} #mainVisual .vTxt .ii.cate:before{content: ""; width: 4.4rem; height:0.2rem; margin-left:-2.2rem; background-color: #fff; position:absolute; left: 50%; top:3.2rem;} #mainVisual .vTxt .ii.title{padding-bottom:2rem; margin-bottom:3rem; font-size:2rem; line-height:3rem; font-weight:700; font-family:var(--play); position:relative;} #mainVisual .vTxt .ii.title::after{content:""; display:block; width:4.7rem; height:1px; background-color:#fff; position:absolute; left:0; bottom:0;} #mainVisual .vTxt .ii.text{font-weight:600; font-size:5.6rem; line-height:1.3;} #mainVisual .vTxt .ii.text b{font-weight:700;} #mainVisual .vTxt .ii.text span{font-weight:500;} #mainVisual .vTxt .ii.btn{position:absolute; bottom:0; left:0; top:auto; width:100%;} #mainVisual .vTxt .ii.btn>a{margin:0 auto; width:19rem; height:6rem; font-weight:600; font-size:1.8rem; line-height:1; color: #fff; text-align: center; font-family:var(--rhd); display: flex; align-items: center; justify-content: center; gap:0 1rem; border:1px solid rgba(255,255,255,0.2); border-radius:1rem; text-shadow:none; background-color:rgba(255,255,255,0.1);} #mainVisual .vTxt .ii.btn>a::before{content:""; display:block; } #mainVisual .vTxt .ii.btn>a::after{content:""; display:block; width:1.4rem; height:1.5rem; background:url("/images/ico_btn_arrow.svg") no-repeat center/contain;} #mainVisual .swiper-option{width:148rem; margin:0 auto; position:absolute; top:50%; left:50%; z-index:8; transform:translate(-50%, -50%);} #mainVisual .swiper-button{font-family:'SUIT Variable'; font-weight: 400; font-size:8rem; line-height:1; color: rgba(255,255,255,1); position: absolute; top:0; display: inline-block; cursor: pointer; z-index:7;} #mainVisual .swiper-button::after{display:none;} #mainVisual .swiper-button-prev{left:0;} #mainVisual .swiper-button-next{right:0;} #mainVisual .swiper-button:hover{color: rgba(255,255,255,1);} #mainVisual .swiper-pagination{width:auto; height:1.4rem; text-align: center; position: static; left:0; bottom:18rem; z-index:7; display:flex; align-items:center; justify-content:center; gap:0 1rem} #mainVisual .swiper-pagination-bullet{margin:0; width:auto; height:auto; display:flex; align-items:center; font-size:1.7rem; line-height:1.4; font-weight:600; color:#fff; font-family:var(--rhd); vertical-align: top; background-color:transparent; border:none; cursor: pointer; opacity:1;} #mainVisual .swiper-pagination-bullet > i{display:inline-block; width:0; height:1px; background-color:rgba(255,255,255,0.2); transition:all 0.3s linear; position:relative; overflow:hidden;} #mainVisual .swiper-pagination-bullet > i > b{display:block; height:1px; background-color:#fff; position:absolute; left:0; top:0;} #mainVisual .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color:transparent;} #mainVisual .swiper-pagination-bullet.swiper-pagination-bullet-active > i{margin-left:1rem; width:15rem;} #mainVisual .swiper-number{width:100%; max-width:156rem; margin-left:-78rem; padding:0 3rem; font-size:3.2rem; line-height:1; color: #fff; text-align: right; position: absolute; left:50%; bottom:6rem; z-index:6;} #mainVisual .swiper-number .n{top:-1.5rem; position: relative;} #mainVisual .swiper-number .l{top:-0.3rem; position: relative;} #mainVisual .swiper-number .t{} #mainVisual .swiper-slide-active .vTxt .ii{top:0px; opacity:1;} #mainVisual .swiper-slide-active .vTxt .ii.btn{top:auto; bottom:0; opacity:1;} #mainVisual .visualRoll .swiper-slide.swiper-slide-active>img{transform:scale(1);} #mainVisual .sw_ctrll{width:100%; position:absolute; left:0; bottom:21.7rem; z-index:7; display:flex; align-items:center; justify-content:center; gap:0 3rem;} #mainVisual .sw_ctrll .play_btn{font-size:0;width:1.1rem;} #mainVisual .sw_ctrll .play_btn::before{content:'';display:block;box-sizing:border-box;} #mainVisual .sw_ctrll .play_btn.play::before{width:0.9rem;height:1.2rem;border-left:0.3rem solid #fff;border-right: 0.3rem solid #fff;margin:0 auto} #mainVisual .sw_ctrll .play_btn.pause::before{border-left:0.8rem solid #fff;border-right: 0.6rem solid transparent;border-bottom: 0.6rem solid transparent;border-top: 0.6rem solid transparent;} #mainVisual .overlay-video{position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);z-index: -100;-webkit-backface-visibility: hidden;backface-visibility: hidden;max-width:none;} @media (min-aspect-ratio: 16/9) { #mainVisual .overlay-video {height: 56.25vw;} } @media (max-aspect-ratio: 16/9) { #mainVisual .overlay-video {width: 177.78vh;} } /* main_product */ #main_product{position:relative;} #main_product .main_prdt_sw{margin-top:8rem; position:relative;} #main_product .main_prdt_sw .sw_contain{overflow:hidden;} #main_product .main_prdt_sw .swiper-slide{width:40rem; border-radius:1rem; overflow:hidden;} #main_product .main_prdt_sw .swiper-slide .img_box{width:100%; aspect-ratio:485/595;} #main_product .main_prdt_sw .swiper-slide .img_box::after{content:""; display:block; width:100%; height:100%; background:linear-gradient(to top, var(--point), transparent 60%); opacity:0; position:absolute; left:0; top:0; transition:all 0.8s ease-out;} #main_product .main_prdt_sw .swiper-slide .img_box img{width:100%; height:100%; object-fit:cover;} #main_product .main_prdt_sw .txt_area{padding:0 5rem 9.5rem; width:100%; color:#fff; position:absolute; left:0; bottom:-17.2rem; transition:all 0.8s ease-out;} #main_product .main_prdt_sw .txt_area .num{font-size:1.6rem; line-height:1.4; font-weight:700; font-family:var(--rhd);} #main_product .main_prdt_sw .txt_area .tit{display:block; margin-top:0.5rem; font-size:2.8rem; line-height:1.4; font-weight:700;} #main_product .main_prdt_sw .txt_area p{margin-top:2rem; min-height:11.5rem; font-size:2.2rem; line-height:1.3; font-weight:500; opacity:0; transition:all 0.8s ease-out;} #main_product .main_prdt_sw .txt_area .vm_btn{position:absolute; left:5rem; bottom:0; opacity:0; transition:all 0.8s ease-out;} #main_product .main_prdt_sw .swiper-slide.swiper-slide-active .img_box::after{opacity:0.9;} #main_product .main_prdt_sw .swiper-slide.swiper-slide-active .txt_area{bottom:5.5rem} #main_product .main_prdt_sw .swiper-slide.swiper-slide-active .txt_area p{opacity:1;} #main_product .main_prdt_sw .swiper-slide.swiper-slide-active .txt_area .vm_btn{opacity:1;} #main_product .main_prdt_sw .sw_ctrll{display:flex; align-items:center; gap:0 2.7rem; position:absolute; right:0; top:-6.7rem;} #main_product .main_prdt_sw .sw_ctrll .swiper-pagination{width:auto; font-size:3.2rem; line-height:1.2; font-weight:800; font-family:var(--rhd); display:flex; align-items:center; justify-content:center; position:static;} #main_product .main_prdt_sw .sw_ctrll .swiper-pagination::after{content:""; display:block; margin-top:-1rem; width:1px; height:2rem; background-color:#a9a9a9; position:absolute; left:50%; top:50%;} #main_product .main_prdt_sw .sw_ctrll .swiper-pagination span{padding:0 1.5rem} #main_product .main_prdt_sw .sw_ctrll .swiper-pagination span::before{content:"0";} #main_product .main_prdt_sw .sw_ctrll .swiper-pagination .swiper-pagination-total{opacity:0.3;} #main_product .main_prdt_sw .sw_ctrll .sw_btn_box{display:flex; gap:0 3rem; position:relative;} #main_product .main_prdt_sw .sw_ctrll .sw_btn_box::before{content:""; display:block; width:1px; height:100%; background-color:var(--point); position:absolute; left:50%; top:0;} #main_product .main_prdt_sw .sw_ctrll .sw_btn{position:static; line-height:1; width:auto; height:auto; margin-top:0;} #main_product .main_prdt_sw .sw_ctrll .sw_btn img{width:3rem;} #main_product .main_prdt_sw .sw_ctrll .sw_btn::after{display:none;} #main_product.en_sect .main_prdt_sw .txt_area{bottom:auto; top:36.9rem;} #main_product.en_sect .main_prdt_sw .swiper-slide.swiper-slide-active .txt_area{top:5.5rem} /* main_facility */ #main_facility{background:linear-gradient(107deg, #7E1800 1.45%, #922208 45.3%, #7E1800 89.15%);} #main_facility .fp-tableCell{vertical-align:bottom;} #main_facility .top_tit, #main_facility .top_intro{color:#fff} #main_facility .main_facility_sw{margin-top:3rem; padding-top:2.8rem; display:flex; flex-wrap:wrap; position:relative;} /* #main_facility .main_facility_sw::before{content:"FACILITY STATUS"; display:block; font-size:16.6rem; line-height:1.2; font-weight:900; font-family:var(--rhd); text-align:right; color:#fff; font-style:italic; opacity:0.03; position:absolute; right:0; top:0;} */ #main_facility .main_facility_sw .swiper-slide{flex:1; min-width:30rem; height:50rem; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; transition:all 0.3s ease-out; overflow:hidden;} #main_facility .main_facility_sw .swiper-slide::before{content:""; display:block; background-color:rgba(0,0,0,0.7); position:absolute; inset:0 0 0 0; z-index:1; transition:all 0.3s ease-out;} #main_facility .main_facility_sw .swiper-slide em{display:block; font-size:2.8rem; line-height:1.1; font-weight:700; font-family:var(--rhd); color:#fff; position:relative; z-index:1;} #main_facility .main_facility_sw .swiper-slide .vm_btn{position:absolute; left:50%; bottom:9rem; z-index:2; transform:translateX(-50%); opacity:0; transition:opacity 0.3s ease-out;} #main_facility .main_facility_sw .swiper-slide .bg_box{width:100%; height:100%; position:absolute; left:0; bottom:0; z-index:0;} #main_facility .main_facility_sw .swiper-slide .bg_box img{width:100%; height:100%; object-fit:cover;} @media only screen and (min-width : 1920px){ #main_facility .main_facility_sw{height:calc(50% + 2.8rem);} #main_facility .main_facility_sw .swiper-slide{height:100%;} } @media only screen and (min-width: 1024px) and (hover: hover) and (pointer: fine){ #main_facility .main_facility_sw .swiper-slide:hover{flex-basis:15%;} #main_facility .main_facility_sw .swiper-slide:hover::before{opacity:0;} #main_facility .main_facility_sw .swiper-slide:hover .vm_btn{opacity:1;} } /* main_sustainable */ #main_sustainable{background:url("/images/main/main_sustainable_bg.jpg") no-repeat center/cover;} #main_sustainable .inner{flex-direction:column; justify-content:space-between;} #main_sustainable .top_tit{color:#fff} #main_sustainable .link_cont{padding-top:10rem; max-width:96rem; width:50%; height:100%; display:flex; flex-wrap:wrap; border-right:1px solid rgba(255,255,255,0.3); position:absolute; top:0; right:0; backdrop-filter:blur(0.7rem); background-color:rgba(0,0,0,0.1);} #main_sustainable .link_cont .cont_box{margin-bottom:-20.7rem; transition:all 0.3s ease-out;} #main_sustainable .link_cont li{padding:8rem 6rem; max-width:48rem; width:50%; display:flex; flex-direction:column; justify-content:center; border-left:1px solid rgba(255,255,255,0.3); overflow:hidden;} #main_sustainable .link_cont li em{padding-right:4rem; font-size:2.8rem; line-height:1.2; color:#fff; font-weight:700; transition:all 0.3s ease-out; position:relative;} #main_sustainable .link_cont li em::after{content:""; display:block; margin-top:-0.75rem; width:1.5rem; height:1.5rem; background:url("/images/ico_btn_arrow_b.svg") no-repeat center/contain; position:absolute; right:0; top:50%; transition:all 0.3s ease-out;} #main_sustainable .link_cont li p{margin-top:2.5rem; font-size:2rem; line-height:1.2; font-weight:500; color:#fff; opacity:0; transition:all 0.3s ease-out;} #main_sustainable .link_cont li .vm_btn{margin-top:4rem; opacity:0; transition:all 0.3s ease-out;} @media only screen and (min-width: 1024px) and (hover: hover) and (pointer: fine){ #main_sustainable .link_cont li:hover .cont_box{margin-bottom:0;} #main_sustainable .link_cont li:hover em::after{opacity:0;} #main_sustainable .link_cont li:hover p{opacity:1;} #main_sustainable .link_cont li:hover .vm_btn{opacity:1;} } /* main_recruitment */ #main_recruitment{background:url("/images/main/main_recruitment_bg.jpg") no-repeat center/cover;} #main_recruitment .top_tit, #main_recruitment .top_intro{color:#fff} #main_recruitment .main_recruitment_sw{margin-top:9rem; overflow:hidden;} #main_recruitment .main_recruitment_sw .swiper-wrapper{gap:4rem} #main_recruitment .main_recruitment_sw .swiper-slide{padding:4rem; width:calc((100% - 12rem)/4); height:40.3rem; border-radius:1rem; background-color:rgba(0,0,0,0.55); position:relative; z-index:1; overflow:hidden; transition:all 0.3s ease-out;} #main_recruitment .main_recruitment_sw .swiper-slide::before{content:"0"counter(num_li); font-size:13rem; font-weight:900; line-height:0.8; color:rgba(255,255,255,0.05); position:absolute; right:2rem; bottom:0; z-index:1; transition:all 0.3s ease-out;} #main_recruitment .main_recruitment_sw .swiper-slide em{font-size:2.8rem; line-height:1.4; color:#fff; font-weight:500;} #main_recruitment .main_recruitment_sw .swiper-slide .ico_box{margin-top:16rem; transition:all 0.3s ease-out;} #main_recruitment .main_recruitment_sw .swiper-slide .ico_box img{width:12rem} #main_recruitment .main_recruitment_sw .swiper-slide .vm_btn{margin-top:7.6rem; opacity:0; transition:all 0.3s ease-out;} @media only screen and (min-width: 1024px) and (hover: hover) and (pointer: fine){ #main_recruitment .main_recruitment_sw .swiper-slide:hover{background-color:var(--point); border-top-left-radius:3rem;} #main_recruitment .main_recruitment_sw .swiper-slide:hover::before{opacity:0; visibility:hidden;} #main_recruitment .main_recruitment_sw .swiper-slide:hover .ico_box{margin-top:2.5rem;} #main_recruitment .main_recruitment_sw .swiper-slide:hover .vm_btn{opacity:1;} } /* main_partner */ #main_partner{background-color:#fff;} #main_partner .top_tit{margin-bottom:5rem; font-size:5rem; line-height:6rem; font-weight:700; color:#111; text-align:center; position:relative;} #main_partner .top_tit::after{content:""; display:block; width:100%; height:1px; background-color:#ddd; position:absolute; left:0; top:50%; z-index:1; transform:translateY(-50%);} #main_partner .top_tit span{padding:0 2rem; background-color:#fff; position:relative; z-index:2;} #main_partner .m_prtnr_sw{position:relative; overflow:hidden;} #main_partner .m_prtnr_sw .swiper-slide{width:38.2rem; border-radius:1rem; overflow:hidden;} #main_partner .m_prtnr_sw a{display:flex; align-items:center; justify-content:center; flex-wrap:wrap;} #main_partner .m_prtnr_sw a span{width:100%;} #main_partner .m_prtnr_sw a .partner_thumb img{width:100%; height:100%; object-fit:cover; aspect-ratio:382/510;} #main_partner .m_prtnr_sw a .logo_box{padding:5.5rem 0 2rem; width:100%; text-align:center; position:absolute; left:0; bottom:0; z-index:2;} #main_partner .m_prtnr_sw a .logo_box::before{content:""; display:block; width:70rem; height:70rem; border-radius:50%; background-color:rgba(255,255,255,0.9); position:absolute; top:0; left:50%; z-index:-1; transform:translateX(-50%);} #main_partner .m_prtnr_sw a .logo_box img{max-width:26rem; width:100%; height:100%; object-fit:contain; aspect-ratio:260/80;} /*[e] Main Style */ /*[s] Sub Style */ /* greet */ .greet{overflow:hidden;} .greet .inConts{align-items:flex-end; justify-content:start; flex-direction:row-reverse; gap:10rem} .greet .cont_box{} .greet .cont_box dt{font-size:4rem; line-height:1.3; color:#111; font-weight:600;} .greet .cont_box dd{margin-top:5.5rem; font-size:2rem; line-height:1.7; color:#333} .greet .cont_box dd p+p{margin-top:1.5rem;} .greet .cont_box dd p:first-child{margin-bottom:3rem; font-size:2.6rem; line-height:1.3; color:#111; font-weight:400;} .greet .cont_box dd .ceo{margin-top:2.5rem; font-size:3rem; line-height:1.2; color:#111; font-weight:700; text-align:left;} .greet .cont_box dd .ceo span{display:inline-block; margin-right:1rem; font-size:2.3rem; line-height:1.2; font-weight:600;} .greet .ceo_box{position:relative;} .greet .ceo_box .img_box{text-align:center; border-radius:1rem; overflow:hidden; background-color:#eee;} .greet .ceo_box .img_box img{width:65rem;} .greet .ceo_box p{font-size:3rem; line-height:5rem; font-weight:600; color:#111; text-align:center; position:absolute; left:50%; bottom:4rem; transform:translateX(-50%);} .greet.en_pg .cont_box, .greet.jp_pg .cont_box{width:60%;} /* @keyframes left-marquee{ 0% {transform:translateX(0%);} 100% {transform:translateX(-50%);} } */ /* cmpn_about */ .cmpn_about .sect_tit{font-size:4.4rem; line-height:1.2; color:#111; font-weight:600; text-align:center;} .cmpn_about .cont_txt{font-size:2.6rem; line-height:1.5; color:#333} .cmpn_about .sect_intro{margin-top:3rem; min-height:76.9rem; background:url("/images/sub/cmpn_about_intro_bg.jpg") no-repeat center/cover;} .cmpn_about .sect_intro .sect_tit{font-size:3.6rem; line-height:1.5; font-weight:700; color:#111} .cmpn_about .sect_intro .cont_txt{margin-top:2.8rem; text-align:center;} .cmpn_about .sect_motto{padding:10rem 0; background-color:#fff;} .cmpn_about .sect_motto .cont_txt{margin-top:3rem; text-align:center;} .cmpn_about .sect_motto .scroll_area{max-width:1780px; padding:0 3rem 8rem; margin:0 auto;} .cmpn_about .sect_motto .cont_li{margin-top:4.5rem; min-width:110rem; display:flex; gap:5rem; justify-content:space-between; flex-wrap:wrap;} .cmpn_about .sect_motto .cont_li li{padding:5rem; width:calc((100% - 10rem)/3); height:45.8rem; display:flex; flex-direction:column; justify-content:space-between; border-radius:2rem; background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden;} .cmpn_about .sect_motto .cont_li li .en_tit{font-size:2rem; line-height:1.2; font-weight:900; color:rgba(255,255,255,0.6); font-family:var(--rhd);} .cmpn_about .sect_motto .cont_li li .txt_box .tit{font-size:2.6rem; line-height:1.2; font-weight:600; color:#fff;} .cmpn_about .sect_motto .cont_li li .txt_box .txt{margin-top:2rem; font-size:2rem; line-height:1.2; font-weight:500; color:#fff;} .cmpn_about .sect_motto .cont_li li:nth-child(1){background-image:url("/images/sub/cmpn_about_motto_bg_01.jpg");} .cmpn_about .sect_motto .cont_li li:nth-child(2){background-image:url("/images/sub/cmpn_about_motto_bg_02.jpg");} .cmpn_about .sect_motto .cont_li li:nth-child(3){background-image:url("/images/sub/cmpn_about_motto_bg_03.jpg");} .cmpn_about .sect_management{padding:13rem 0 15rem; background-color:#e9d3ce;} .cmpn_about .sect_management .cont_img{margin-top:6rem; text-align:center;} .cmpn_about .sect_management .cont_img img{width:100.6rem;} .cmpn_about .sect_info{padding:10rem 0 1rem;} .cmpn_about .sect_info .cont_li{margin-top:4rem; display:flex; flex-wrap:wrap; justify-content:center; gap:1.8rem} .cmpn_about .sect_info .cont_li li{width:calc((100% - 7.2rem)/5); min-height:20rem; padding:3.5rem 3rem 3.5rem 15rem; display:flex; flex-direction:column; justify-content:center; border-radius:2rem; border:1px solid #e9d3ce; position:relative;} .cmpn_about .sect_info .cont_li li .tit{display:block; font-size:2.6rem; line-height:1.2; color:#111; font-weight:600;} .cmpn_about .sect_info .cont_li li p{margin-top:1.5rem; font-size:1.8rem; line-height:1.2; font-weight:500; color:#333;} .cmpn_about .sect_info .cont_li li p .post_num{color:#666} .cmpn_about .sect_info .cont_li li::before{content:""; display:block; width:8.5rem; height:8.5rem; background-repeat:no-repeat; background-position:center; background-size:contain; position:absolute; left:3.5rem; top:50%; transform:translateY(-50%);} .cmpn_about .sect_info .cont_li li:nth-child(1)::before{background-image:url("/images/sub/cmpn_about_info_ico_01.svg");} .cmpn_about .sect_info .cont_li li:nth-child(2)::before{background-image:url("/images/sub/cmpn_about_info_ico_02.svg");} .cmpn_about .sect_info .cont_li li:nth-child(3)::before{background-image:url("/images/sub/cmpn_about_info_ico_03.svg");} .cmpn_about .sect_info .cont_li li:nth-child(4)::before{background-image:url("/images/sub/cmpn_about_info_ico_04.svg");} .cmpn_about .sect_info .cont_li li:nth-child(5)::before{background-image:url("/images/sub/cmpn_about_info_ico_05.svg");} .cmpn_about.en_pg .sect_motto .scroll_area{overflow:auto;} .cmpn_about.en_pg .sect_motto .cont_li{min-width:113rem;} .cmpn_about.en_pg .sect_info .cont_li li{padding:15rem 3rem 3.5rem 2rem; justify-content:flex-start;} .cmpn_about.en_pg .sect_info .cont_li li::before{left:auto; right:3.5rem; top:3.5rem; transform:none;} /* history */ .history_top{text-align:center; padding:12.4rem 0 12.3rem; border-radius:1rem; box-shadow:0 0.2rem 1.1rem 0 rgba(102, 102, 102, 0.15);} .history_top img{height:10.3rem;} /* .history_top h4{font-size:5rem; line-height:6rem; font-weight:700; font-family:var(--play)} .history_top p{font-size:2rem; line-height:3rem;} .history_tit{margin-top:8.5rem; font-size:5rem; line-height:6rem; font-weight:700; color:#111; text-align:center; font-family:var(--play);} */ .history-area{margin-top:10rem; font-size:0; line-height:0; position: relative;} .history-area:before{content: ""; width: 0.6rem; margin-left:-0.3rem; background-color: rgba(221,221,221,0.8); display: inline-block; position:absolute; left: 50%; top:1.5rem; bottom:0;} .history-area #his_progress{content: ""; width: 0.6rem; margin-left:-0.3rem; background-color:var(--point); display: inline-block; position:absolute; left: 50%; top:1.5rem; border-radius: 0 0 9px 9px;} .history-area>li{text-align: right; display: flex; justify-content: space-between; position: relative; z-index:2;} .history-area>li+li{margin-top:9rem;} .history-area .history-in{width:50%; padding:0 5rem; text-align: left; display:inline-block; vertical-align: top; position: relative; cursor: default; order:2;} .history-area .history-in[href]{cursor: pointer !important;} .history-area .history-in:before{content: ""; width: 1.7rem; height:1.7rem; background-color:var(--point); display: inline-block; position:absolute; left: -0.85rem; top:1rem; border-radius:999px; box-sizing: border-box;} .history-area .history-in>strong{font-weight: 700; font-size:3rem; line-height:1; color: #111; display:block;} .history-area .txt_wrap{margin-top:2rem; display: flex; justify-content: flex-start;} .history-area .txt_wrap p{font-size:1.8rem; line-height:1.55; color: #666; position: relative;} .history-area .txt_wrap p+p{margin-top:1.3rem;} /*.history-area .txt_wrap>p:before{content: "ㆍ"; position:absolute; left: -0.3rem; top:0px;}*/ .history-area .txt_wrap>p+p{margin-top:1rem;} /*.history-area .txt_wrap>ul>li:before{content: "-"; position:absolute; left: 0; top:0px;}*/ .history-area>li .thumb{width:50%; margin-top:0; padding:0 4rem; position: relative; order:1;} .history-area>li .thumb img{width:calc(100% - 8rem); height:calc(100%); object-fit:cover; object-position: center center; position: absolute; left:4rem; right:4rem; top:0; bottom:0;} .history-area>li:nth-child(even){text-align: left;} .history-area>li:nth-child(even) .history-in{text-align: right; order:1;} .history-area>li:nth-child(even) .history-in:before{left:auto; right: -0.85rem;} .history-area>li:nth-child(even) .thumb{order:2;} .history-area>li:nth-child(even) .txt_wrap{justify-content: flex-end;} /* Location */ .location-text{} .location-text h4{padding:4rem 0 3rem; font-size:4.4rem; line-height:1.2; font-weight:600; color:#111; border-bottom:1px solid var(--point);} .location-text .loca_addr{margin:3rem 0;} .location-text .loca_addr p{font-size:3rem; line-height:1.2; font-weight:600; color:#333;} .location-text .location-link{display: inline-flex; align-items: center; position: absolute; right:0; top:-1rem; gap:1rem;} .location-text .location-link>a{width:22.2rem; height:6.1rem; border:1px solid #999; font-weight: 500; font-size:1.8rem; line-height:1; color: #666; display: flex; align-items: center; justify-content: center; border-radius:0.5rem; white-space: nowrap;} .location-text .location-link>a.daum{color:#fff; background-color:var(--point); border-color:var(--point);} .location-text.en dl>dt{width:11rem;} .location .wideKakao>.root_daum_roughmap{height:55rem;} .location .loca_info{display:flex; gap:2rem 10rem; flex-wrap:wrap; font-size:2rem; line-height:1.2; color:#333;} .location .loca_info dl{display:flex; align-items:center;} .location .loca_info dl::before{content:""; display:block; width:3rem; height:3rem; margin-right:0.5rem; background-position:center; background-repeat:no-repeat; background-size:contain;} .location .loca_info dl:nth-child(1)::before{background-image:url("/images/ico_post_num.svg");} .location .loca_info dl:nth-child(2)::before{background-image:url("/images/ico_tel.svg");} .location .loca_info dl:nth-child(3)::before{background-image:url("/images/ico_fax.svg");} .location .loca_info dl:nth-child(4)::before{background-image:url("/images/ico_mail.svg");} .location .loca_info dt{margin-right:1.5rem; font-weight:700;} /* facility 설비현황 공통 */ .facility .facility_intro .cont_area{display:flex; gap:4rem 0; align-items:center; flex-wrap:wrap;} .facility .facility_intro .cont_area + .cont_area{margin-top:6rem;} .facility .facility_intro .cont_area:nth-child(even){flex-direction:row-reverse;} .facility .facility_intro .cont_area .img_box{width:55.2326%; border-radius:2rem; overflow:hidden;} .facility .facility_intro .cont_area .img_box img{width:100%;} .facility .facility_intro .cont_area .cont_box{padding-left:10rem; flex:1;} .facility .facility_intro .cont_area .cont_box h4{font-size:4.2rem; line-height:1.3; font-weight:800; color:var(--point); font-family:var(--rhd);} .facility .facility_intro .cont_area .cont_box h4 + *{margin-top:5rem;} .facility .facility_intro .cont_area .cont_box > em{display:block; font-size:3rem; line-height:1; color:#111; font-weight:600;} .facility .facility_intro .cont_area .cont_box > em + *, .facility .facility_intro .cont_area .cont_box dl + *{margin-top:4.5rem;} .facility .facility_intro .cont_area .cont_box dt{font-size:3rem; line-height:1; color:#111; font-weight:600;} .facility .facility_intro .cont_area .cont_box dd{margin-top:2.5rem; font-size:2rem; line-height:1.4; font-weight:500; color:#555;} .facility .facility_intro .cont_area .cont_box ul{font-size:1.8rem; line-height:1.3; color:#333;} .facility .facility_intro .cont_area .cont_box ul li{padding-left:1.4rem;} .facility .facility_intro .cont_area .cont_box ul li::before{top:1rem; width:0.4rem; height:0.4rem;} .facility .facility_intro .cont_area .cont_box ul li+li{margin-top:1rem;} .facility .facility_spec{margin-top:10rem;} .facility .facility_spec h4{font-size:3rem; line-height:1.3; color:#333; font-weight:800; font-family:var(--rhd); text-align:center;} .facility .facility_spec .tb_area{margin-top:3rem;} .facility .facility_spec .tb_area table{width:100%; table-layout:fixed; border-collapse:collapse; border-top:1px solid #666; border-bottom:1px solid #666} .facility .facility_spec .tb_area table thead{background-color:rgba(233,211,206,0.2);} .facility .facility_spec .tb_area table thead th{height:6.5rem; font-size:2rem; line-height:1.3; font-weight:600; color:#333; text-align:center;} .facility .facility_spec .tb_area table thead th+th{border-left:1px solid #d7d7d7;} .facility .facility_spec .tb_area table tbody td{height:6.5rem; font-size:1.8rem; font-weight:500; color:#555; text-align:center; border-top:1px solid #d7d7d7;} .facility .facility_spec .tb_area table tbody td+td{border-left:1px solid #d7d7d7} /* prduct - 제품소개 공통 */ .prduct .sect_wr:nth-child(even){background-color:#fbf6f5;} .prduct .intro_area{padding-bottom:9.5rem;} .prduct .intro_area .cont_txt{font-size:2rem; line-height:1.7; font-weight:500; color:#333; text-align:center;} .prduct .intro_area .cont_txt+.prdt_sort{margin-top:2rem;} .prduct .intro_area .prdt_sort{display:flex; gap:3rem; justify-content:center; flex-wrap:wrap;} .prduct .intro_area .prdt_sort li{display:flex; font-size:2.4rem; line-height:1.3; font-weight:600; color:var(--point);} .prduct .intro_area .prdt_sort li::before{content:""; display:block; width:3.1rem; height:2.7rem; margin:0.2rem 0.9rem 0 0; background:url("/images/ico_hex_chk.svg") no-repeat center/contain;} .prduct .prdt_info_area{padding:16rem 0 15rem} .prduct .prdt_info_area .inConts{display:flex; gap:4rem 10rem; flex-wrap:wrap; align-items:center;} .prduct .prdt_info_area .prdt_info_sw{flex:1; max-width:90rem; border-radius:2rem; overflow:hidden;} .prduct .prdt_info_area .prdt_info_sw .sw_contain{position:relative;} .prduct .prdt_info_area .prdt_info_sw .swiper-slide::after{content:""; display:block; position:absolute; inset:0 0 0 0; background-color:#000; opacity:0.15;} .prduct .prdt_info_area .prdt_info_sw .swiper-slide img{width:100%;} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll{display:flex; align-items:center; gap:0 3.5rem; position:absolute; right:3rem; bottom:3rem;} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .swiper-pagination{width:auto; font-size:2rem; line-height:1.2; font-weight:800; font-family:var(--rhd); display:flex; align-items:center; justify-content:center; position:static;} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .swiper-pagination::after{content:""; display:block; margin-top:-0.5rem; width:1px; height:1rem; background-color:#fff; position:absolute; left:50%; top:50%;} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .swiper-pagination span{padding:0 1rem; color:#fff} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .swiper-pagination span::before{content:"0";} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .swiper-pagination .swiper-pagination-total{opacity:0.4;} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .sw_btn_box{display:flex; gap:0 3rem; position:relative;} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .sw_btn_box::before{content:""; display:block; width:1px; height:100%; background-color:#fff; position:absolute; left:50%; top:0; z-index:1;} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .sw_btn{position:static; line-height:1; width:auto; height:auto; margin-top:0;} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .sw_btn img{width:3.4rem;} .prduct .prdt_info_area .prdt_info_sw .sw_ctrll .sw_btn::after{display:none;} .prduct .prdt_info_area .cont_box{/*margin-top:6rem;*/ width:calc(50% - 14rem);} .prduct .prdt_info_area .cont_box .cont_txt h4{font-size:3rem; line-height:1.3; font-weight:800; color:#111} .prduct .prdt_info_area .cont_box .cont_txt p{font-size:2rem; line-height:1.6; font-weight:500; color:#666;} .prduct .prdt_info_area .cont_box .cont_txt h4+.content, .prduct .prdt_info_area .cont_box .cont_txt h4+p{margin-top:2rem;} .prduct .prdt_info_area .cont_box .cont_txt p+p{margin-top:0.5rem;} .prduct .prdt_info_area .cont_box .cont_txt+.cont_txt, .prduct .prdt_info_area .cont_box dl+.cont_txt, .prduct .prdt_info_area .cont_box .cont_txt+dl, .prduct .prdt_info_area .cont_box dl+dl{margin-top:5rem;} .prduct .prdt_info_area .cont_box dt{padding-left:1.7rem; font-size:3rem; line-height:1; font-weight:600; color:#111; position:relative;} .prduct .prdt_info_area .cont_box dt::before{content:""; display:block; width:0.7rem; height:0.7rem; border-radius:0.2rem; background-color:var(--point); position:absolute; left:0; top:50%; z-index:1; transform:translateY(-50%);} .prduct .prdt_info_area .cont_box dd{margin-top:1.5rem; font-size:2rem; line-height:1.3; font-weight:500; color:#666;} .prduct .prdt_info_area .cont_box > dl .usage_li{margin-top:2rem; display:flex; gap:0.9rem; flex-wrap:wrap;} .prduct .prdt_info_area .cont_box > dl .usage_li img{width:8rem;} .prduct.jp_pg .prdt_info_area .cont_box>dl .usage_li img{width:12rem;} /* prduct - special */ .special .prdt_info_area .inConts{align-items:center;} .special .prdt_info_area .img_box{flex:1; max-width:90rem; border-radius:2rem; overflow:hidden;} .special .prdt_info_area .img_box img{width:100%;} .special .prdt_info_area .cont_box{margin-top:0;} .special .prdt_info_area .cont_box .cont_txt .box_dot_li{margin-top:1rem;} .special .prdt_info_area .cont_box .cont_txt .box_dot_li li{padding-left:1.4rem; font-size:2rem; line-height:1.6; font-weight:500; color:#888;} .special .prdt_info_area .cont_box .cont_txt .box_dot_li li+li{margin-top:0.5rem;} .special .prdt_info_area .cont_box .cont_txt .box_dot_li li::before{top:1.2rem} .special .prdt_info_area .cont_box > dl{margin-top:6rem;} /* sustainable_biz - 윤리경영*/ .sustainable_biz .cont_txt{font-size:2rem; line-height:1.7; color:#333; font-weight:500;} .sustainable_biz .sect_intro{padding-bottom:15rem;} .sustainable_biz .sect_intro .cont_box{text-align:center;} .sustainable_biz .sect_intro .cont_box em{display:block; font-size:2.6rem; line-height:1.3; font-weight:600; color:#111;} .sustainable_biz .sect_intro .cont_box .cont_txt{margin-top:4rem;} .sustainable_biz .sect_intro .img_cont_box{margin-top:7rem; display:flex; gap:10rem; align-items:center; justify-content:center;} .sustainable_biz .sect_intro .img_cont_box .ico_box img{width:12.4rem;} .sustainable_biz .sect_intro .img_cont img{width:27rem; filter: drop-shadow(0 0.2rem 2rem rgba(51, 51, 51, 0.1))} .sustainable_biz .sect_intro ul.img_cont{display:flex; align-items:center;} .sustainable_biz .sect_intro ul.img_cont li+li{margin-left:-5rem;} .sustainable_biz .sect_complaint{padding:10rem 0; text-align:center; background-color:#fbf6f5;} .sustainable_biz .sect_complaint h4{font-size:4.2rem; line-height:1; color:#111; font-weight:600;} .sustainable_biz .sect_complaint .cont_tit{font-size:2.5rem; line-height:3rem; font-weight: 700; color:#111;} .sustainable_biz .sect_complaint .cont_txt{margin-top:5rem;} .sustainable_biz .sect_complaint .protect{margin-top:7rem;} .sustainable_biz .sect_complaint .protect dd{margin-top:2rem; padding:5.1rem 3rem; font-size:2rem; line-height:1.7; background-color:#f4f6f8;} .sustainable_biz .sect_complaint .violations{margin-top:7rem;} .sustainable_biz .sect_complaint .violations ul{display:flex; margin-top:6.5rem;} .sustainable_biz .sect_complaint .violations ul li{width:20%; font-size:2rem; line-height:1.5; text-align:center; font-weight:500; color:#333;} .sustainable_biz .sect_complaint .violations ul li+li{border-left:1px solid #ddd} .sustainable_biz .sect_complaint .violations ul li::before{content:""; display:block; margin:0 auto 2.5rem; width:9rem; height:9rem; background-repeat:no-repeat; background-position:center; background-size:contain;} .sustainable_biz .sect_complaint .violations ul li:nth-child(1)::before{background-image:url("/images/sub/sustainable_biz_ico_01.png");} .sustainable_biz .sect_complaint .violations ul li:nth-child(2)::before{background-image:url("/images/sub/sustainable_biz_ico_02.png");} .sustainable_biz .sect_complaint .violations ul li:nth-child(3)::before{background-image:url("/images/sub/sustainable_biz_ico_03.png");} .sustainable_biz .sect_complaint .violations ul li:nth-child(4)::before{background-image:url("/images/sub/sustainable_biz_ico_04.png");} .sustainable_biz .sect_complaint .violations ul li:nth-child(5)::before{background-image:url("/images/sub/sustainable_biz_ico_05.png");} .sustainable_biz .sect_methods{padding:5rem 0 1rem;} .sustainable_biz .sect_methods .inConts{display:flex; border-radius:1rem; overflow:hidden;} .sustainable_biz .sect_methods .inConts::after{content:""; flex:1; border-radius:0 1rem 1rem 0; background:url("/images/sub/sustainable_biz_methods_bg.jpg") no-repeat center/cover;} .sustainable_biz .sect_methods .cont_area{padding:4rem; width:55rem; height:30rem; display:flex; flex-wrap:wrap; color:#fff; background-color:var(--point); border-radius:1rem 0 0 1rem;} .sustainable_biz .sect_methods .cont_area em{display:block; width:100%; height:fit-content; margin-bottom:3rem; font-size:2.4rem; line-height:1.22; font-weight:700; color:#fff} .sustainable_biz .sect_methods .cont_area > em + div{align-items:flex-end; display:flex; flex-direction:column; justify-content:flex-end;} .sustainable_biz .sect_methods .cont_area dl{padding-left:3.2rem; width:100%; font-size:2rem; line-height:1.2; font-weight:500; color:rgba(255,255,255,0.5); position:relative;} .sustainable_biz .sect_methods .cont_area dl+dl{margin-top:3.5rem;} .sustainable_biz .sect_methods .cont_area dt{font-weight:700; color:#fff;} .sustainable_biz .sect_methods .cont_area dd{margin-top:0.5rem;} .sustainable_biz .sect_methods .cont_area dl::before{content:""; display:block; width:2.2rem; height:2.2rem; background-repeat:no-repeat; background-position:center; background-size:contain; position:absolute; left:0; top:0.4rem;} .sustainable_biz .sect_methods .cont_area dl:nth-of-type(1)::before{background-image:url("/images/ico_mail_w.png")} .sustainable_biz .sect_methods .cont_area dl:nth-of-type(2)::before{background-image:url("/images/ico_pin_w.png")} /* sustain_safety - 안전경영*/ .sustain_safety .intro_txt{font-size:2rem; line-height:1.7; color:#333; text-align:center;} .sustain_safety .cont_area{margin-top:6rem;} .sustain_safety .cont_area h4{padding:10rem 3rem 12.4rem; font-size:3.6rem; line-height:1; color:#fff; font-weight:700; text-align:center; background:url("/images/sub/sustain_safety_tit_bg.png") no-repeat center/100% 100%;} .sustain_safety .cont_area .inner{max-width:142rem; margin:0 auto} .sustain_safety .purpose{margin-top:1rem; padding-bottom:10rem; display:flex; gap:3rem; position:relative;} .sustain_safety .purpose::after{content:""; display:block; margin-left:-1.5rem; width:3rem; height:3.4rem; background:url("/images/ico_double_arrow.png") no-repeat center/contain; position:absolute; left:50%; bottom:0;} .sustain_safety .purpose>*{border:1px solid #e9d3ce; border-radius:1rem; background-color:#fbf6f5;} .sustain_safety .purpose dt{padding:2rem 2.5rem; display:flex; align-items:center; gap:3rem; font-size:3rem; line-height:1.3; font-weight:600; color:var(--point);} .sustain_safety .purpose dt::before{content:""; display:block; width:10rem; height:10rem; background:url("/images/sub/sustain_safety_purpose_ico.png") no-repeat center/contain;} .sustain_safety .purpose dd{flex:1; padding:3.7rem 3rem 3.5rem 10.6rem; font-size:2rem; line-height:1.7; color:#111;} .sustain_safety .count_li{margin-top:5.6rem; display:flex; gap:4rem 6.5rem; flex-wrap:wrap; counter-reset:num_li} .sustain_safety .count_li li{width:calc((100% - 13rem)/3); padding:4rem 5rem; border:1px solid #e9d3ce; border-radius:1rem;} .sustain_safety .count_li li.logo_box{background-color:#fbf6f5; display:flex; justify-content:center; align-items:center;} .sustain_safety .count_li li.logo_box img{width:29.1rem;} .sustain_safety .count_li li:not(.logo_box){counter-increment:num_li;} .sustain_safety .count_li li:not(.logo_box)::before{content:"0"counter(num_li); display:block; margin-bottom:10rem; font-size:2rem; line-height:1; font-weight:800; color:var(--point); font-family:var(--rhd);} .sustain_safety .count_li li .ico_box{margin-bottom:1.5rem;} .sustain_safety .count_li li p{font-size:1.8rem; line-height:1.5; color:#333;} .sustain_safety .end_cont{margin-top:5rem; padding:4rem 3rem 3.9rem; border-radius:1rem; background:linear-gradient(89deg, rgba(0, 0, 0, 0.30) -10.18%, rgba(0, 0, 0, 0.00) 50.35%, rgba(0, 0, 0, 0.30) 110.88%), #922208;} .sustain_safety .end_cont p{font-size:2.4rem; line-height:1.7; font-weight:500; color:#fff; text-align:center;} .sustain_safety.en_pg .cont_area h4{padding:12rem 3rem 10.4rem;} /* recruit_ideal - 인재상 */ .recruit_ideal .cont_intro{font-size:2.6rem; line-height:1.7; color:#333; text-align:center;} .recruit_ideal .cont_li{margin-top:8rem; display:flex; gap:6rem; flex-wrap:wrap;} .recruit_ideal .cont_li li{padding:5rem 5rem 4rem; width:calc(50% - 3rem); border-radius:2rem; background-color:#fbf6f5;} .recruit_ideal .cont_li li::before{content:""; display:block; margin-bottom:7.2rem; width:15rem; height:15rem; background-repeat:no-repeat; background-position:center; background-size:contain;} .recruit_ideal .cont_li li em{display:block; font-size:3rem; line-height:1.3; font-weight:600; color:var(--point);} .recruit_ideal .cont_li li em+p{margin-top:2.5rem;} .recruit_ideal .cont_li li p{font-size:2rem; line-height:1.6; color:#333;} .recruit_ideal .cont_li li:nth-child(1):before{background-image:url("/images/sub/recruit_ideal_ico_01.png");} .recruit_ideal .cont_li li:nth-child(2):before{background-image:url("/images/sub/recruit_ideal_ico_02.png");} .recruit_ideal .cont_li li:nth-child(3):before{background-image:url("/images/sub/recruit_ideal_ico_03.png");} .recruit_ideal .cont_li li:nth-child(4):before{background-image:url("/images/sub/recruit_ideal_ico_04.png");} /* hr_system - 인사제도 */ .hr_system .cont_intro{font-size:2.6rem; line-height:1.7; color:#333; text-align:center;} .hr_system .sect_area .inConts{display:flex; justify-content:space-between; gap:7rem; flex-wrap:wrap;} .hr_system .sect_area dl{margin-top:8.7rem; width:35rem; line-height:1.3; color:#333;} .hr_system .sect_area dt{font-size:3rem; font-weight:600;} .hr_system .sect_area dd{margin-top:2rem; font-size:2.4rem;} .hr_system .sect_area .img_cont{flex:1; text-align:right;} .hr_system .sect_area .img_cont img{width:100%; max-width:fit-content;} .hr_system .sect_appraisal{padding-bottom:15rem; margin-top:8rem;} .hr_system .sect_loadmap{padding:15rem 0 22.8rem; background-color:rgba(233, 211, 206, 0.15);} /* job_roles - 직무소개 */ .job_roles .cont_intro{font-size:2.6rem; line-height:1.7; color:#333; text-align:center;} .job_roles .cont_li{margin-top:8rem; display:flex; flex-wrap:wrap; gap:3.5rem; flex-wrap:wrap;} .job_roles .cont_li li{padding:25rem 3rem 4rem; width:calc((100% - 7rem)/3); min-height:55rem; color:#fff; border-radius:2rem; background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden;} .job_roles .cont_li li em{display:block; font-size:3rem; line-height:1; font-weight:600; position:relative;} .job_roles .cont_li li p{margin-top:3.6rem; font-size:2rem; line-height:1.6;} .job_roles .cont_li li:nth-child(1){background-image:url("/images/sub/job_roles_bg_01.jpg");} .job_roles .cont_li li:nth-child(2){background-image:url("/images/sub/job_roles_bg_02.jpg");} .job_roles .cont_li li:nth-child(3){background-image:url("/images/sub/job_roles_bg_03.jpg");} /* recruit - 채용안내 */ .recruit .sect_step h4{font-size:3.4rem; line-height:1; font-weight:600; color:#111; text-align:center;} .recruit .sect_step .cont_img img{margin-top:8rem; width:100%;} .recruit .sect_step .step_li{max-width:130rem; margin:5rem auto 0;} .recruit .sect_step .step_li li{padding:5rem 11rem 5rem 10.8rem; display:flex; align-items:center; gap:3rem 11rem; flex-wrap:wrap;} .recruit .sect_step .step_li li+li{border-top:1px solid #d9d9d9} .recruit .sect_step .step_li li::before{display:none} .recruit .sect_step .step_li em{display:block; font-size:4rem; line-height:1; font-weight:700; color:#111} .recruit .sect_step .step_li em::before{content:"0"counter(num_li)"."; display:inline-block; width:5.9rem; margin-right:2rem; color:var(--point); font-family:var(--rhd);} .recruit .sect_step .step_li p{flex:1; max-width:76.1rem; font-size:2rem; line-height:1.7; font-weight:500; color:#555;} .recruit .sect_etc{padding:10rem 0 15rem; background-color:rgba(233, 211, 206, 0.15);} .recruit .sect_etc .inConts{display:flex; justify-content:space-between; flex-wrap:wrap; gap:3rem 10rem} .recruit .sect_etc h4{font-size:3.4rem; line-height:1; font-weight:600; color:#111;} .recruit .sect_etc .cont_area{flex:1; max-width:130rem; } .recruit .sect_etc .cont_area ul{display:flex; flex-wrap:wrap; gap:2.5rem 2rem;} .recruit .sect_etc .cont_area ul li{max-width:64rem; width:calc(50% - 1rem); padding-left:0.9rem; font-size:1.8rem; line-height:1.3; color:#333; position:relative;} .recruit .sect_etc .cont_area ul li::before{content:""; display:block; width:0.2rem; height:0.8rem; background-color:var(--point); position:absolute; left:0; top:0.8rem;} .recruit .sect_etc .cont_area .down_btn{display:block; margin-top:7rem; max-width:23rem; line-height:8rem; font-size:2.2rem; font-weight:600; color:#fff; text-align:center; background-color:var(--point); border-radius:1rem;} .recruit.en_pg .sect_step .step_li em{padding-left:7.9rem; width:35.5rem; position:relative;} .recruit.en_pg .sect_step .step_li em::before{position:absolute; left:0; top:0;} .recruit.en_pg .sect_etc .cont_area .down_btn{max-width:none; width:fit-content; padding:0 2.9rem;} .recruit.jp_pg .sect_step .step_li em{padding-left:7.9rem; width:24.5rem; position:relative;} .recruit.jp_pg .sect_step .step_li em::before{position:absolute; left:0; top:0;} .recruit.jp_pg .sect_step .step_li p{width:calc(100% - 35.5rem);} /* promo_video - 홍보센터 */ .promo_video .intro_txt{font-size:3rem; line-height:4rem; color:#111; text-align:center;} .promo_video .video_box{margin-top:3.5rem;} .promo_video .video_box iframe{width:100%; aspect-ratio:16/9;} /* area */ .area-area{width:100vw; margin:17rem 0 0 -50vw; padding:16rem 0; background-color: #f7f3ed; position: relative; left:50%;} .area-area .swiper-button{width:auto !important; height:auto !important; margin:0 !important; display:inline-block; vertical-align: top; top:auto; position: absolute; top:50%; z-index:5; transform: translateY(-50%); cursor: pointer;} .area-area .swiper-button:before{content: ""; width:100%; height:100%; background-color: transparent; border:none; font-size:7rem; line-height:1; color:#fff; display: inline-block; border-radius:0; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; -ms-flex-align:center;} .area-area .swiper-button:after{display:none;} .area-area .swiper-button-prev{left:1rem;} .area-area .swiper-button-prev:before{content: "←";} .area-area .swiper-button-next{right:1rem;} .area-area .swiper-button-next:before{content: "→";} .area-area .swiper-pagination{width:100%; text-align: center; position: absolute; left:0; bottom:4rem; z-index:7;} .area-area .swiper-pagination-bullet{width:14px; height:14px; margin:0 7px; background-color: transparent; border:1px solid #999; border-radius:99px; display: inline-block; vertical-align: top; cursor: pointer; opacity: 0.6;} .area-area .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color:#dc952b; border-color:#dc952b; opacity: 1;} .area-area .area-swiper{width:100%; margin:0 auto; font-size:0; line-height:0; position: relative; overflow: hidden;} .area-area .area-swiper .list{display: flex; justify-content: flex-start;} .area-area .area-swiper .list .area-swiper-re{width:100%; min-width:80rem; position: relative; display:inline-block; vertical-align: top;} .area-area .area-swiper .list .area-swiper-re:before{content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position:absolute; left: 0; top:0px; z-index:2; transition: all .5s ease-out;} .area-area .area-swiper .list .area-swiper-re .thumb{width:100%; aspect-ratio: 800/450; position: relative;} .area-area .area-swiper .list .area-swiper-re .thumb img{width:100%; height:100%; max-width:none; object-fit:cover; position: absolute; left:0; top:0;} .area-area .area-swiper .list .area-swiper-re.swiper-slide-active:before{background-color: rgba(0,0,0,0);} .area-area+.area-area{margin-top:0;} .area-area:nth-of-type(3){background: url('/images/sub/bg_area02.jpg') no-repeat right center / cover;} .area-area:nth-of-type(4){background-color: #eef8f6;} .area-area:nth-of-type(5){background: url('/images/sub/bg_area04.jpg') no-repeat right center / cover;} .area-area:last-child{margin-bottom:-14rem;} .page-title{margin-bottom:5rem; font-weight: 700; font-size:2.6rem; line-height:4rem; color: #1b1b1b; text-align: center;} .page-title span.point{color: var(--point);} .year-tab{width:100%; margin: 0 auto 7rem; font-size:0; line-height:0; text-align: center; display:block; position: relative;} .year-tab:before{content: ""; width: 100%; height: 1px; background-color: #abaeb0; position:absolute; left: 0; top:5.1rem;} /*.year-tab:after{content: ""; width: 100%; height: 1px; background-color: #abaeb0; position:absolute; left: 0; bottom:5.1rem;}*/ .year-tab .name{width:100%; height:8rem; padding:0 5rem 0 2rem; border:2px solid var(--point); font-weight: 700; font-size:2.4rem; line-height:1; color: #333; text-align: left; position: relative; display: none; align-items: center;} .year-tab .name:after, .year-tab .name:before{content: ""; width:1.4rem; height:1px; margin:0 0 0 0; background-color: var(--point); display: block; position:absolute; top:50%; transition: all .3s ease-out;} .year-tab .name:after{right:2rem; transform:rotate(45deg);} .year-tab .name:before{right:1rem; transform:rotate(-45deg);} .year-tab ul.year-list{width:81.7187%; margin:0 auto; display: flex; flex-flow: row wrap; position: relative;} .year-tab ul.year-list>li{flex:0 1 calc(20% + 1px); position: relative;} .year-tab ul.year-list>li a{width:100%; height:5.2rem; padding:0 2rem; background-color: #cecece; border:1px solid #abaeb0; font-weight:700; font-size:1.7rem; line-height:1.2; color: #fff; display: flex; align-items: center; justify-content: center; white-space: nowrap; transition: all .3s ease-out;} .year-tab ul.year-list>li{margin-left:-1px;} .year-tab ul.year-list>li:nth-child(n+6):nth-child(-n+12){margin-top:-1px;} .year-tab ul.year-list>li:is(:hover, .active){z-index:2;} .year-tab ul.year-list>li:is(:hover, .active) a{background-color:var(--point); border-color:var(--point);} .year-tab ul.year-list.four{width:100%; max-width:114rem;} .year-tab ul.year-list.full{width:100%;} .year-tab ul.year-list:is(.four, .full){flex-wrap: nowrap; justify-content: center;} .year-tab ul.year-list:is(.four, .full)>li{flex:0 1 25%;} .year-tab ul.year-list.full>li a{font-weight:normal; font-size:1.6rem; white-space: wrap;} .year-tab ul.year-list.two>li a{height:6.2rem;} .year-tab-conts{} .month-tab{width:26rem; margin:0 auto 7rem; background-color: #fff; border:1px solid #aaa; display:block; position: relative; cursor: pointer; border-radius:99px;} .month-tab>p{height:5.4rem; padding:0 5rem 0 3rem; border:none; font-size:1.8rem; line-height:1; color:#333; text-align: left; display: flex; align-items: center; position: relative;} .month-tab>p:before{content: "↓"; font-weight: 500; font-size:1.4rem; position: absolute; right:1.9rem; top:50%; transform: translateY(-50%); transition: all .3s ease-out;} .month-tab>p>strong{font-weight: 700; color: var(--point);} .month-tab .month-tab-in{max-height:30rem; background-color: #fff; text-align: left; position: absolute; left:-1px; right:-1px; top:100%; overflow:hidden; overflow-y:auto; display:none; border:1px solid #aaa; border-radius:2.7rem;} .month-tab .month-tab-in>a{padding:0.5rem 0 0.5rem 3rem; color: #666; font-size:1.6rem; line-height:1.55; display:block;} .month-tab .month-tab-in>a:nth-child(1){padding-top:1.5rem;} .month-tab .month-tab-in>a:last-child{padding-bottom:1.5rem;} .month-tab .month-tab-in>a>strong{font-weight: 700; color: var(--point);} .month-tab .month-tab-in>a+a{} .month-tab .month-tab-in>a:hover{background-color: #f4f4f4;} .month-tab.open>p:before{transform:rotate(180deg) translateY(50%);} ul.lawArea{margin-top:7.5rem;} ul.lawArea *{font-family:'Pretendard GOV' !important;} ul.lawArea>li{margin-top:7rem; padding-left:2rem; position: relative;} ul.lawArea>li:before{content: ""; width: 0.8rem; height: 0.8rem; background-color: var(--point); position:absolute; left: 0; top:0.7rem; border-radius:100%;} ul.lawArea>li>strong{font-weight: bold; font-size:2.4rem; line-height:1; color: #1b1b1b; display:block;} ul.lawArea>li>strong>span{font-weight: 400;} ul.lawArea>li>.thumb{margin-top:5rem; text-align: center;} ul.lawArea .lawBox-gray{width:calc(100% + 2rem); margin:3rem 0 0 -2rem; padding:3.5rem 5.5rem; background-color: #f7f7f7; border-radius:1rem;} ul.lawArea .lawBox-gray .po{color: var(--point) !important;} ul.lawArea .lawBox-gray .title{font-weight: 600; font-size:1.8rem; line-height:3rem; color: #333;} ul.lawArea .lawBox-gray .text{margin-top:1rem; font-size:1.6rem; line-height:2.6rem; color: #666;} ul.lawArea .lawBox-gray .text>strong{font-weight: 600; color: #333;} ul.lawArea .lawBox-gray .text.flex{display: flex; align-items: center; gap:1.5rem;} ul.lawArea .c-num .lawBox-gray{width:calc(100% + 4rem); margin:2rem 0 0 -4rem;} .lawSources{margin-top:4rem; font-family:'Pretendard GOV'; font-size:1.7rem; line-height:1.2; color: #999;} .lawSources>strong{font-weight: 500; color: #1b1b1b;} ol.l-num{counter-reset:item; margin-top:1rem;} ol.l-num>li{padding-left:1.5rem; font-size:1.7rem; line-height:3rem; color: #555; position: relative;} ol.l-num>li:before{counter-increment: item; content: counter(item)"."; position: absolute; left: 0; top: 0;} ol.c-num>li{margin-top:3rem; padding-left:2rem; font-weight: 500; font-size:1.9rem; line-height:1.4; color: #1b1b1b; position: relative;} ol.c-num>li:before{content: ""; position: absolute; left:0; top:0;} ol.c-num>li:nth-child(1):before{content: "①";} ol.c-num>li:nth-child(2):before{content: "②";} ol.c-num>li:nth-child(3):before{content: "③";} ol.c-num>li:nth-child(4):before{content: "④";} ol.c-num>li:nth-child(5):before{content: "⑤";} ol.c-num>li:nth-child(6):before{content: "⑥";} ol.c-num>li:nth-child(7):before{content: "⑦";} ol.c-num>li:nth-child(8):before{content: "⑧";} ol.c-num>li:nth-child(9):before{content: "⑨";} ol.c-num>li:nth-child(10):before{content: "⑩";} ol.c-num>li:nth-child(11):before{content: "⑪";} ol.c-num>li:nth-child(12):before{content: "⑫";} /* store */ .store-area{margin-bottom:4rem; display: flex; align-items: center; justify-content: space-between;} .store-area>*{width:50%;} .store-area>.store-map{padding:0 3rem; text-align: center; order:1;} .store-area>.store-map .thumb{display:inline-block; position: relative;} .store-area>.store-map .thumb .finding-map-link{width:76px; height:28px; background-color: #999; font-family:"Pretendard GOV"; font-weight: 600; font-size:14px; line-height:1; color: #fff; position: absolute; left:50%; top:50%; display: flex; align-items: center; justify-content: center; border-radius:99px;} .store-area>.store-map .thumb .finding-map-link:after{content: ""; width: 48px; height: 49px; margin-left:-24px; background: url('/images/sub/img_map_pin.png') no-repeat center top / cover; position:absolute; left: 50%; bottom:calc(100% + 9px); opacity: 0; display:none;} .store-area>.store-map .thumb .finding-map-link[data-val="10"]{margin:-55.4% 0 0 -16.2%;} /* 서울 */ .store-area>.store-map .thumb .finding-map-link[data-val="1"]{margin:-48.6% 0 0 -45.9%;} /* 인천 */ .store-area>.store-map .thumb .finding-map-link[data-val="2"]{margin:-62.7% 0 0 18.3%;} /* 강원 */ .store-area>.store-map .thumb .finding-map-link[data-val="9"]{margin:-39.7% 0 0 -8.6%;} /* 경기 */ .store-area>.store-map .thumb .finding-map-link[data-val="7"]{margin:22.9% 0 0 3.8%;} /* 경남 */ .store-area>.store-map .thumb .finding-map-link[data-val="4"]{margin:-15.7% 0 0 20.4%;} /* 경북 */ .store-area>.store-map .thumb .finding-map-link[data-val="6"]{margin:41.7% 0 0 -26.2%;} /* 전남 */ .store-area>.store-map .thumb .finding-map-link[data-val="5"]{margin:7.5% 0 0 -30.5%;} /* 전북 */ .store-area>.store-map .thumb .finding-map-link[data-val="8"]{margin:64.7% 0 0 -49.7%;} /* 제주 */ .store-area>.store-map .thumb .finding-map-link[data-val="3"]{margin:-19.2% 0 0 -34.3%;} /* 충남 */ .store-area>.store-map .thumb .finding-map-link[data-val="11"]{margin:-26.9% 0 0 -3.2%;} /* 충북 */ .store-area>.store-map .thumb .finding-map-link[data-val="16"]{margin:36.1% 0 0 26.8%;} /* 부산 */ .store-area>.store-map .thumb .finding-map-link[data-val="13"]{margin:5.1% 0 0 22.8%;} /* 대구 */ .store-area>.store-map .thumb .finding-map-link[data-val="14"]{margin:27.1% 0 0 -42.2%;} /* 광주 */ .store-area>.store-map .thumb .finding-map-link[data-val="12"]{margin:-11.9% 0 0 -9.2%;} /* 대전 */ .store-area>.store-map .thumb .finding-map-link[data-val="15"]{margin:22.1% 0 0 36.8%;} /* 울산 */ .store-area>.store-map .thumb .finding-map-link:is(:hover, .active){background-color: var(--point); z-index:2;} .store-area>.store-map .thumb .finding-map-link.active:after{height: 58px; opacity: 1;} .store-area>.store-inj{padding-right:3rem; order:2;} .store-area>.store-inj>dl{} .store-area>.store-inj>dl>dt{font-weight: bold; font-size:3.2rem; line-height:1; color:var(--point);} .store-area>.store-inj>dl>dd{margin-top:2rem; font-family:"Pretendard GOV"; font-weight: 500; font-size:2.1rem; line-height:1.2; color: #254737;} .store-area .store-inj-box{height:20.5rem; margin-top:2.5rem; padding:0 3rem; background-color: #f8fbfa; display: flex; align-items: center; justify-content: center; gap:2rem; border-radius:1rem;} .store-area .store-inj-box img{width:14rem; min-width:14rem;} .store-area .store-inj-box>dl{} .store-area .store-inj-box>dl>dt{font-family:"Pretendard GOV"; font-weight: bold; font-size:2.3rem; line-height:1; color:#1b1b1b;} .store-area .store-inj-box>dl>dd{margin-top:1rem; font-family:"Pretendard GOV"; font-weight: 500; font-size:1.8rem; line-height:1.4; color: #254737;} .store-area .store-inj-btn{margin-top:2.5rem; display: flex; justify-content: flex-end;} .store-area .store-inj-btn>a{font-weight: 700; font-size:1.6rem; line-height:1.2; color: #333; display: flex; align-items: center; gap:0.5rem;} .store-area .store-inj-btn>a img{height:0.8rem;} .store-table{width:100%; border-top:2px solid #666; overflow: hidden;} .store-table>table{width:100%; border-spacing:0;} .store-table>table th, .store-table>table td{height:7rem; padding:1.5rem 2rem; background-color: #fff; border-bottom:1px solid #ddd; font-size:1.6rem; line-height:1.6; color:#666; text-align:center; border-collapse:collapse; empty-cells:show; word-break:break-all;} .store-table>table th{background-color: #fdfdfe;} .store-table>table>thead>tr>th{font-weight: 700; font-size:1.7rem; color: #111;} .store-table>table .tit{font-weight: 700; color: #111;} .store-table>table .btn{width:9rem; height:3.7rem; margin:0 auto; background-color: #808080; border:1px solid #707070; font-weight: 700; font-size:1.5rem; line-height:1.2; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:0.5rem;} .store-online-top{height:32rem; background: url('/images/sub/bg_store.jpg') no-repeat center center / cover; display: flex; align-items: center; justify-content: center;} .store-online-top>dl{width:100%; padding-left:10%;color: #fff;} .store-online-top>dl>dt{font-size:3.4rem; line-height:5.2rem;} .store-online-top>dl>dd{margin-top:3rem; font-size:2.2rem; line-height:1;} .store-online-btm{margin-top:5.5rem;} .store-online-btm .text{font-size:2.1rem; line-height:3.8rem; color: #333;} .store-online-btm .text>strong{font-weight: 700; color: var(--point);} /* etc */ .etc_clause{width:90%; margin:0 auto; font-size:0; line-height:0; text-align: center; box-sizing:border-box; position: relative; overflow: visible !important;} .etc_clause:before, .etc_clause:after{content:"";position:absolute;top:2%;bottom:0;left:10px;right:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-border-radius:100px / 10px; border-radius:0 7rem 0 7rem;} .etc_clause:after{right:10px;left:auto;-webkit-transform:skew(8deg) rotate(3deg);-moz-transform:skew(8deg) rotate(3deg);-ms-transform:skew(8deg) rotate(3deg);-o-transform:skew(8deg) rotate(3deg);transform:skew(8deg) rotate(3deg);} .etc_clause .etc_clause_in{padding:60px 80px 80px; background-color: #fdfdfd; border:1px solid #cecece; border-radius:0 7rem 0 7rem; position: relative; z-index:2;} .etc_clause .logo{margin:0;} .etc_clause .logo img{} .etc_clause .txt{padding:15px 0 55px; font-weight: 300; font-size:18px; line-height:1; color: #636363;} .etc_clause .txt>span{font-weight: 400; color: #1b1b1b;} .etc_clause .scroll{font-weight:300; font-size:16px; line-height:1.8; color: #626262; text-align: left;} .etc_select{width:90%; margin:0 auto 2rem; text-align: right;} .etc_select select.base{width:auto;} /* search */ .search-area{} .search-area .search-result{font-weight: bold; font-size:2.6rem; line-height:1.2; color: #111; text-align: center;} .search-area .search-result>strong{color: #cc0000;} .search-area .search-re{margin-top:5rem; border-top:2px solid #111;} .search-area .search-re+.search-re{margin-top:10rem;} .search-area .search-re .search-re-tit{padding:3rem 0 0 3rem; display: flex; align-items: center; gap:1rem;} .search-area .search-re .search-re-tit strong{font-weight: 600; font-size:3rem; line-height:1; color: #111;} .search-area .search-re .search-re-tit span{height:3rem; padding:0 1.5rem; background-color:var(--point); font-weight: 600; font-size:1.8rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:99px;} .search-area .search-re-list{} .search-area .search-re-list>li{border-bottom:1px solid #ddd;} .search-area .search-link{padding:2.5rem 3rem; display:block;} .search-area .search-link .tit{font-weight: bold; font-size:2.2rem; line-height:1.3; color: #000;} .search-area .search-link .tit>strong{color: #cc0000;} .search-area .search-link .txt{margin-top:1rem; font-weight: 500; font-size:1.6rem; line-height:1.4; color: var(--point);} .search-area .search-re .search-more{margin-top:6rem; display: flex; justify-content: center;} .search-area .search-re .search-more>a{height:4.1rem; padding:0 2.7rem; border:1px solid #666; font-weight: bold; font-size:1.8rem; line-height:1; color: #555; display: flex; align-items: center; justify-content: center; border-radius:0.5rem;} .search-area .result-group{margin-top:5rem; border-top:2px solid #111;} .search-area .result-group dl{border-bottom:1px solid #ddd; display: flex; align-items: center;} .search-area .result-group dl dt{width:15rem; height:15rem; margin-right:2rem; border:1px solid #ddd; overflow:hidden; position:relative;} .search-area .result-group dl dt img{max-width:100%;position:absolute;width:auto; height:auto;margin:auto;top:0; bottom:0; left:0; right:0;} .search-area .result-group dl dd{width:calc(100% - 17rem);} .search-area .result-group dl dd div {} .search-area .result-group dl dd div.title{display: flex; align-items: center; gap:0 1rem;} .search-area .result-group dl dd div.title a{font-weight: bold; font-size:2.2rem; line-height:1.3; color: #000;} .search-area .result-group dl dd div.title a>h2 {} .search-area .result-group dl dd div.title a[target="_blank"]{height:3rem; padding:0 1.5rem; background-color:var(--point); font-weight: 400; font-size:1.6rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:99px;} .search-area .result-group dl dd div.cont{max-height: 4.8rem; margin-top:1rem; font-weight: 400; font-size:1.8rem; line-height:2.4rem; color: #999; display: -webkit-box; text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow:hidden;} /* .search-area .result-group dl dd div.cont{ max-height: 72px; display: -webkit-box; text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical; overflow:hidden;} .search-area .result-group dl dd div.date {color:#999;} */ .search-area .result-group dl dd div.navi, .result-group dl dd div.navi a {margin-top:1.5rem; font-weight: 500; font-size:1.6rem; line-height:1.4; color: var(--point);} .result-group .more {text-align:right;} .result-group .more a {font-size:13px; color:#7d7d7d; text-decoration:underline;} /*[e] Sub Style */ /*[s] Plugin Style */ .layer-base.fancybox__content>.carousel__button.is-close{width:3.3rem; height:3.3rem; top:2.2rem !important; right:3rem; display:none !important;} .layer-base.fancybox__content>.carousel__button.is-close svg{width:100%; height:100%; stroke-width:1.5; filter:none; color: #666;} .layer-base{padding:0 !important; background-color: transparent !important; font-size:0; line-height:0; display:none;} .layer-base .layer-in{} /* .lay-table{width:100%; font-size:0; line-height:0;} .lay-table>table{width:100%; border-spacing:0; table-layout : fixed;} .lay-table>table th, .lay-table>table td{height:7rem; padding:1.5rem 0; background-color: #fff; border-top:1px solid #ebebeb; font-size:1.6rem; line-height:1.5; color:#666; text-align:left; vertical-align: middle; border-collapse:collapse; empty-cells:show; box-sizing: border-box; word-break:keep-all; word-wrap:break-word;} .lay-table>table th{} .lay-table>table>thead>tr>th{} .lay-table>table>tbody>tr>th{font-weight: 500; color: #222;} .lay-table>table .tel{padding-left:4rem; display:inline-block;} .lay-table>table .tel>strong{font-weight: 500; color: #ffde25;} .lay-table>table .btns{width:20rem; height:5rem; background-color: #fff; font-weight: 500; font-size:1.6rem; line-height:5rem; color: #222; text-align: center; display:inline-block; vertical-align: top; border-radius:0.5rem; box-shadow:0 0 2rem rgba(0,0,0,0.1);} .lay-table>table .btns>span{font-weight:bold; font-size:1.6rem;} .lay-table>table .btns+.btns{margin-left:1rem;} .lay-table>table .btns.kakao{background-color: #ffe618;} #layer-time, #layer-juso{width:100%; max-width:160rem;} .layer-base .title{padding-top:2.3rem; font-weight: bold; font-size:3rem; line-height:1; color: #222; position: relative;} .layer-base .title:before{content: ""; width: 4rem; height: 0.5rem; background-color: #222; font-size:0; line-height:0; display: inline-block; position:absolute; left: 0; top:0px;} .lay-time-area{margin-top:3rem; display: flex; justify-content: space-between;} .lay-time-area .lay-map{width:50%; border-radius:1rem; overflow:hidden; position: relative;} .lay-time-area .lay-map>img{width:100%; max-width:none;} .lay-time-area .lay-map .root_daum_roughmap{width:1400px; height:700px; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);} .lay-time-area .lay-map .wrap_map, .lay-time-area .lay-map .map{width:100%; height:100%;} .lay-time-area .lay-table{width:45.7142%;} #layer-schdule{width:100%; max-width:84rem;} #layer-schdule .layer-in{padding:8rem 4rem 5rem;} #layer-schdule .layer-schdule-area{} #layer-schdule .layer-schdule-text{margin-top:4rem; font-size:1.6rem; line-height:1.4; color: #666;} #layer-schdule .layer-schdule-text>dt{font-weight: 500; font-size:1.8rem; color: #222; } #layer-schdule .layer-schdule-text>dd{margin-top:1rem;} */ #insight-summary{width:100%; max-width:120rem; text-align: center;} #insight-summary .layer-in{padding:9rem 12rem; background-color: #fff; border-radius:1rem;} #insight-summary .character{} #insight-summary .character img{width:10rem;} #insight-summary .insight-summary-title{} #insight-summary .insight-summary-title>dt{font-weight: 600; font-size:3rem; line-height:1.2; color: var(--point);} #insight-summary .insight-summary-title>dd{font-size:2.6rem; line-height:3.4rem; color: #666;} .insight-summary-title{width:100%; margin-bottom:6rem; padding:4rem 3rem; background-color: #f0f0f0;} .insight-summary-title .cate{font-size:1.6rem; line-height:1.2; color: #666;} .insight-summary-title .title{margin-top:1rem; font-weight: 600; font-size:2.4rem; line-height:1.2; color: var(--point); display: block; overflow: hidden;} .insight-summary-title .day{margin-top:2rem; font-size:1.4rem; line-height:1.2; color: #999;} .insight-summary-list{width:100%; text-align: left;} .insight-summary-list>li+li{margin-top:5.5rem;} .insight-summary-list .cate{font-size:1.6rem; line-height:1.2; color: #666;} .insight-summary-list .title{margin-top:1.5rem; font-weight: 600; font-size:2rem; line-height:1.2; color: var(--point); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .insight-summary-list .text{margin-top:1rem; font-size:1.6rem; line-height:2.6rem; color: #666; display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} .insight-summary-list .view{margin-top:1.5rem; font-size:1.4rem; line-height:1.2; color: #999; text-decoration: underline; text-underline-position:under; display:inline-block;} #insight-summary .insight-summary-list{margin-top:4rem;} /* Layer Style */ /*.layerArea .layerIn .layerBgIn{width:0px; height:0px; background-color: rgba(255,255,255,0.7); position:absolute; left:50%; top:50%; z-index:100; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;}*/ .layerCell{display:none;} .layerArea{width:0px; height:0px; background-color: rgba(0,0,0,0.7); position:fixed; left:50%; top:50%; z-index:99; overflow:hidden; overflow-y:auto; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;} .layerArea.one, .layerArea.two{width:100%; height:100%; left:0%; top:0%;} .layerArea.two .layerBgIn{width:100%; height:100%; left:0%; top:0%;} .layerArea .closeLy{width:1.7rem; height:1.7rem; display:inline-block; position: absolute; right:0; top:0;} .layerArea .closeLy:before, .layerArea .closeLy:after{content: ""; background-color: #080808; position: absolute; left:50%; top:50%;} .layerArea .closeLy:before{width: 100%; height: 2px; transform:translate(-50%, -50%) rotate(45deg);} .layerArea .closeLy:after{width: 2px; height: 100%; transform:translate(-50%, -50%) rotate(45deg);} .layerArea .closeLy.type02{width:2.3rem; height:2.3rem; right:3rem; top:3rem;} .layerArea .closeLy.type02:before, .layerArea .closeLy.type02:after{background-color: #676767;} .layerArea .layerIn{width:100%; height:100%; display: table; position:relative;} .layerArea .layerIn .layerCell{width:100%; height:100%; padding:70px 0; display: table-cell; vertical-align:middle; position:relative; box-sizing: border-box;} .layerArea .layerIn .layerBox{margin:0 auto; background-color: #fff; font-size:0; line-height:0; display:none; position: relative; box-sizing: border-box; z-index:99; border-radius:1rem;} /* .layerArea .layerIn .layerBox>.tit_lay{padding:25px 25px 15px;} .layerArea .layerIn .layerBox>.tit_lay>strong{font-size:16px; line-height:1; color:#00a9cc;} */ .layerArea .layerIn .layerBox .contLy{position: relative;} .downlay{width:100%; padding:10rem 0; border-radius:0 !important;} .downlay .closeLy{top:-5rem;} .downlay>.contLy{width:64.5rem; margin:0 auto; text-align: center;} .downlay .title{padding-bottom:5rem; font-weight: bold; font-size:3rem; line-height:1; color: #000;} .downlay .title>strong{color: #23abaf;} .downlay .utllBox{width:47.6rem; margin:0 auto; display:table; table-layout: fixed;} .downlay .utllBox>*{width:50%; display:table-cell; vertical-align: top; box-sizing: border-box;} .downlay .utllBox .tit{font-size:1.5rem; line-height:1; color: #666;} .downlay .utllBox .txt{margin-top:2.5rem; font-size:1.2rem; line-height:1; color: #888;} .downlay .utllBox .icon{height:15rem; margin-top:3rem; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center;} .downlay .utllBox .icon>p+p{margin-top:2rem;} .downlay .utllBox>.qr{border-left:1px solid #dadada;} .downlay .utllBox>.store img{width:16.8rem;} .downlay .utllBox>.qr img{width:15rem;} .formLay{width:62rem; padding:7rem 5rem 6rem; border-radius:1rem;} .formLay input[type=text]{width:100%; height:5.4rem; padding:0; background-color:#fff; border-bottom:2px solid #e8e8e8; font-size:1.8rem; line-height:5.2rem; color:#666; box-sizing: border-box; vertical-align:middle; display:inline-block;} .formLay .title{padding-bottom:3.5rem; border-bottom:1px solid #333; font-weight: 500; font-size:2.6rem; line-height:1; color: #1b1b1b;} .formLay .textBox{width:62rem; margin:-1px 0 0 -5rem; padding:4rem 0; background-color: #f6f7fa; border-top:1px solid #ececec; border-bottom:1px solid #ececec; font-size:1.9rem; line-height:1; color: #1b1b1b; letter-spacing: -0.08em; text-align: center; position: relative; z-index:2;} .formLay .textBox>span{color: #149699;} .formLay .launchingForm{margin-top:1rem;} .formLay .launchingForm>li{padding-top:4rem;} .formLay .launchingForm>li>dl{} .formLay .launchingForm>li>dl>dt{font-weight: 500; font-size:1.9rem; line-height:1; color: #1b1b1b;} .formLay .launchingForm>li>dl>dd{height:6.4rem; padding-top:1rem; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; box-sizing: border-box;} .formLay .launchingForm>li>dl>dd.two{flex-wrap: nowrap; justify-content: space-between; white-space: nowrap;} .formLay .launchingForm>li>dl .checkIn{} .formLay .launchingForm>li.two{display: flex; justify-content: space-between;} .formLay .launchingForm>li.two>dl{width:48%;} .formLay .launchingForm>li .clauseView{font-size:1.7rem; line-height:1; color: #989898;display:inline-block;} .formLay .launchingForm>li .clauseView>span{border-bottom:1px solid #999; padding:0.2rem 0 0.3rem; display:inline-block;} .formLay .btnArea{margin-top:6rem;} .privacylay{width:62rem; padding:7rem 5rem;} .privacylay .title{padding-bottom:3.5rem; font-weight: 500; font-size:2.8rem; line-height:1; color: #000; text-align: center;} .privacylay .clauseArea .scroll{padding:3.5rem 3.9rem; background-color: #f8f9fb; border:1px solid #eee; font-weight: 300; font-size:1.7rem; line-height:2.6rem; color: #666;} /* Img Over Bg Style */ #photo{width:960px;margin:0 auto; position:relative; overflow:hidden;} #photo>li{width:150px; height:150px; margin:5px; float:left; display:inline; overflow:hidden; } #photo>li>a{width:100%; height:100%; position: relative; display:block; overflow:hidden;} #photo>li>a>img{width:100%; height:100%; display:block; border-radius:5px;} #photo>li>a>.bg_l{width:100%; height:100%; background-color:red; position: absolute; left:0; top:0; display:none; opacity:0.3; border-radius:5px;} /* Notice One Line Style */ .mNoticeList{width:100%; height:60px; margin-top:25px; overflow:hidden; position: relative;} .mNoticeList>ul{width:100%; position: absolute; left:0; top:-60px;} .mNoticeList>ul>li{height:60px; position: relative;} .mNoticeList>ul>li>a{padding-left:73px; display:block; position: relative;} .mNoticeList .day{width:41px; padding-right:15px; border-right:1px solid #d5d1cc; font-weight: 600; font-size:12px; line-height:1; color: #b99764; text-align: center; position: absolute; left:0; top:0;} .mNoticeList .day>strong{font-weight: 700; font-size:32px; line-height:1; display:block;} .mNoticeList dl.list{font-size:16px; line-height:20px; color: #876e49; word-break:keep-all; word-wrap:break-word;} .mNoticeList dl.list>dt{padding-bottom:6px; font-weight: 600; font-size:12px; line-height:1; color: #b99764;} /*[e] Plugin Style */ @media only screen and (max-width : 1780px){ /* cmpn_about */ .cmpn_about .sect_info .cont_li li{width:calc((100% - 3.6rem)/3);} /* job_roles - 직무소개 */ .job_roles .cont_li li p br{display:none;} } @media only screen and (max-width : 1520px){ /*[s] Main Style */ /* main_sustainable_biz */ /* #main_sustainable_biz .scroll_area{flex:none; width:100%;} */ #main_sustainable_biz .link_cont{gap:6rem} #main_sustainable_biz .link_cont li:nth-child(2){margin-top:0;} /*[e] Main Style */ /*[s] Sub Style */ /*[e] Sub Style */ } @media only screen and (max-width : 1440px){ /*[s] Main Style */ /* main_facility */ #main_facility .main_facility_sw{padding-top:7.8rem;} #main_facility .main_facility_sw::before{font-size:9.6rem;} /*[e] Main Style */ /*[s] Sub Style */ /*[e] Sub Style */ } @media only screen and (max-width : 1340px){ /*[s] Main Style */ /*[e] Main Style */ /*[s] Sub Style */ /* greet */ .greet .cont_box{width:60%;} /*[e] Sub Style */ } @media only screen and (max-width : 1260px){ .scroll_info{display:block;} .scrollTb{width:100%; padding-bottom:2rem; display:block; overflow:hidden; overflow-x:scroll;} .scrollTb>*{width:120rem !important;} /*[s] Main Style */ #mainVisual .swiper-option{width:calc(100% - 6rem);} #mainVisual .swiper-button-prev{left:-3rem;} #mainVisual .swiper-button-next{right:-3rem;} /* main_product */ #main_product .link_cont > li > a{padding:13rem 3rem 0} @media (hover: hover) and (pointer: fine) { #main_product .link_cont > li:hover{width:60%;} #main_product .link_cont > li:hover+li{width:40%;} #main_product .link_cont > li:hover > a{padding:13rem 10rem 0} } /* main_sustainable */ #main_sustainable .inner{padding-top:10rem; height:100%;} #main_sustainable .link_cont{padding-top:0; max-width:none; width:100%; position:static; height:auto;} #main_sustainable .link_cont li{max-width:none; padding:4rem 3rem;} #main_sustainable .link_cont li .cont_box{margin-bottom:-17.2rem;} /* main_recruitment */ #main_recruitment .main_recruitment_sw .swiper-wrapper{gap:0;} #main_recruitment .main_recruitment_sw .swiper-slide{width:40rem; margin-right:4rem;} #main_recruitment .main_recruitment_sw .swiper-slide .ico_box{margin-top:2.5rem;} /*[e] Main Style */ /*[s] Sub Style */ .area-area{width:100vw; margin-left:-3rem; left:0%;} /* greet */ .greet .inConts{flex-direction:column-reverse;} .greet .cont_box{width:100%;} .greet .ceo_box{align-self:center;} /* facility 설비현황 공통 */ .facility .facility_intro .cont_area .img_box{width:100%;} .facility .facility_intro .cont_area .cont_box{padding-left:0; flex:100%;} /* prduct - 제품소개 공통 */ .prduct .prdt_info_area .prdt_info_sw{flex:none; width:100%; max-width:none;} .prduct .prdt_info_area .cont_box{margin-top:0; width:100%;} /* prduct - special */ .special .prdt_info_area .img_box{flex:none; width:100%; max-width:none;} /* sustainable_biz - 윤리경영*/ .sustainable_biz .sect_intro .img_cont_box{gap:10rem 4rem} .sustainable_biz .sect_methods .cont_area{width:40rem;} .sustainable_biz.en_pg .sect_complaint .violations ul{flex-wrap:wrap; gap:4rem 0} .sustainable_biz.en_pg .sect_complaint .violations ul li{width:50%;} .sustainable_biz.en_pg .sect_complaint .violations ul li:nth-child(3){width:100%; border-left:none} .sustainable_biz.en_pg .sect_complaint .violations ul li:nth-child(4){border-left:none} /* hr_system - 인사제도 */ .hr_system .sect_area dl{width:100%; margin-top:0; text-align:center;} .hr_system .sect_area .img_cont{flex:none; width:100%;} .hr_system .sect_area .img_cont img{max-width:none;} /*[e] Sub Style */ /*[s] Layer Style */ /*[e] Layer Style */ } @media only screen and (max-width : 1024px){ /*[s] All Style */ .wideKakao>.root_daum_roughmap{height:auto; padding-bottom: 56.25%;} /*[e] All Style */ /*[s] Main Popup Style */ .hd_pops{position: absolute; left:2rem !important; top:2rem !important;} .hd_pops_con{width:auto !important;} /*[e] Main Popup Style */ /*[s] Main Style */ /* visual */ #mVisual .visualRoll .slider img{} #mVisual .slick-arrow{display:none !important;} #mVisual .slick-dots{display:block !important;} /* visual */ #mainVisual{} #mainVisual .vTxtArea{max-width:none;} /* main_product */ #main_product .link_cont{flex-wrap:wrap; border-radius:6rem 0 6rem 0;} #main_product .link_cont > li{width:100%; height:26rem;} #main_product .link_cont > li > a{height:100%; padding:6rem 6rem 0; position:relative;} #main_product .link_cont > li > a::after{margin-top:0; position:absolute; right:6rem; bottom:6.5rem; opacity:1;} #main_product .link_cont > li p{padding-top:0; opacity:1;} @media (hover: hover) and (pointer: fine) { #main_product .link_cont > li:hover{width:100%;} #main_product .link_cont > li:hover+li{width:100%;} #main_product .link_cont > li:hover > a{padding:6rem 6rem 0;} } /* main_facility */ #main_facility .fp-tableCell{vertical-align:middle;} #main_facility .main_facility_sw{padding-top:4.8rem;} #main_facility .main_facility_sw::before{font-size:5.6rem;} #main_facility .main_facility_sw .swiper-slide{width:40rem; min-width:none; flex:none; flex-direction:column; gap:3rem 0;} #main_facility .main_facility_sw .swiper-slide::before{opacity:0.5;} #main_facility .main_facility_sw .swiper-slide .vm_btn{transform:none; position:static; opacity:1;} /* main_sustainable */ #main_sustainable .link_cont li .cont_box{margin-bottom:0;} #main_sustainable .link_cont li em::after{opacity:0;} #main_sustainable .link_cont li p{opacity:1;} #main_sustainable .link_cont li .vm_btn{opacity:1;} /*[e] Main Style */ /*[s] Sub Style */ /* product */ /* cmpn_about */ .cmpn_about .sect_motto .scroll_area{overflow:auto;} .cmpn_about .sect_info .cont_li li{width:calc((100% - 1.8rem) / 2);} /* Location */ .location .loca_info dl{width:100%;} /* sustain_safety - 안전경영*/ .sustain_safety .count_li li{width:calc(50% - 3.25rem);} .sustain_safety .count_li li.logo_box{width:100%; padding:10rem 4rem 8rem;} /* job_roles - 직무소개 */ .job_roles .cont_li li{width:100%; padding-top:4rem; display:flex; flex-direction:column; justify-content:flex-end;} /* recruit - 채용안내 */ .recruit .sect_step .step_li li{padding:5rem 3rem} .recruit .sect_step .step_li em{width:100%;} .recruit .sect_etc .cont_area ul li{width:100%;} .recruit.en_pg .sect_step .step_li em{width:100%;} .recruit.jp_pg .sect_step .step_li em{width:100%;} .recruit.jp_pg .sect_step .step_li p{width:100%;} /* store */ .store-area{display: block;} .store-area>*{width:100%;} .store-area>.store-inj{padding:0 0 7rem 0 ;} .store-table{} .store-table>table{} .store-table>table, .store-table>table tbody, .store-table>table tr, .store-table>table td, .store-table>table th{height:auto; padding:0; background-color: #fff; border:none; display:block;} .store-table>table>thead{display:none;} .store-table>table tr{padding:3rem 0; border-bottom:1px solid #ddd;} .store-table>table th, .store-table>table td{margin-bottom:1rem; text-align: left; position: relative; display: flex; align-items: center; justify-content: flex-start;} .store-table>table .bo_tit{justify-content: flex-start;} .store-table>table th:before, .store-table>table td:before{width:14rem; min-width:14rem; content: attr(data-title); padding-right:2rem; font-weight: 700; color: #222; text-align: justify;} .store-table>table th:after, .store-table>table td:after{content:""; width:1px; height:1.6rem; background-color: #ccc; font-size:0; position: absolute; left:11.5rem; top:50%; transform: translateY(-50%);} .store-table>table .btn{margin:0;} /* search */ .search-area .result-group dl dd div.title a[target="_blank"]{display:none;} /*[e] Sub Style */ /*[s] Plugin Style */ .fancybox__slide{padding:48px 3rem 8px !important;} #insight-summary .layer-in{padding:9rem 6rem;} /*[e] Plugin Style */ } @media only screen and (max-width : 840px){ /*[s] All Style */ .depth-three>a{height:7.5rem; font-size:2.4rem;} .scroll_info{padding:2rem 0 5rem;} .scroll_info:before{font-size:2.4rem; top:0;} /*[e] All Style */ /*[s] Main Popup Style */ .hd_pops{left:2rem !important; right:2rem !important;} .hd_pops_con{} #popLayer{} #popLayer #moPopArea{} #popLayer #moPopArea .moPop{max-width:90%;} #popLayer #moPopArea #moPopRoll{} #popLayer .slider{} #popLayer .slider img{} /* #popLayer .slider#HKeditorContent{padding:20px; font-size:20px; line-height:1.5; color: #666;} #popLayer .slider#HKeditorContent img{width:auto;} #popLayer #moPopRoll.roll .slider{} */ #popLayer .layerPopClose{width:4rem; height:4rem; right:2rem; top:2rem;} #popLayer .layerPopClose:before{margin:-1px 0 0 -2rem;} #popLayer .layerPopClose:after{margin:-2rem 0 0 -1px;} #popLayer .moPopClose{} #popLayer .moPopClose>*{height:8rem; font-size:2rem;} /* #popLayer .moPopClose button{font-size:1.8rem; line-height:2.4rem;} #popLayer .moPopClose button:before{width: 2.4rem; height: 2.4rem; font-size:1.8rem; line-height:2.6rem;} #popLayer .moPopClose button.toDay_close{padding-left:3.2rem;} #popLayer .moPopClose button.close{padding-right:3.2rem} */ #popLayer .slick-dots{bottom:10rem;} #popLayer .slick-dots>li{} #popLayer .slick-dots>li+li{} #popLayer .slick-dots>li button{width:1.8rem; height:1.8rem;} #popLayer .slick-dots>li.slick-active button{} /*[e] Main Popup Style */ /*[s] Main Style */ .top_tit{font-size:5rem; line-height:1.4;} .top_tit + .top_intro{margin-top:1rem;} .vm_btn{width:21.5rem; height:7rem; font-size:2.2rem;} /* .main_sect{padding:12rem 0} */ /* visual */ #mainVisual{} #mainVisual .visualRoll .swiper-slide>img{height:100vh;} #mainVisual .vTxt{padding:14.5rem 0 13rem;} #mainVisual .vTxt .ii.cate{font-size:2.2rem;} #mainVisual .vTxt .ii.cate:before{top:4.2rem;} #mainVisual .vTxt .ii.title{font-size:2.2rem; line-height:3.2rem;} #mainVisual .vTxt .ii.text{font-size:4.6rem; line-height:1.3;} #mainVisual .vTxt .ii.btn>a{margin:0 auto; width:27rem; height:8rem; font-size:2.2rem; border-radius:0.5rem;} #mainVisual .swiper-button{display:none;} #mainVisual .swiper-pagination{} #mainVisual .swiper-pagination-bullet{font-size:2rem;} #mainVisual .swiper-pagination-bullet.swiper-pagination-bullet-active{} #mainVisual .sw_ctrll{padding:0 2rem; gap:3rem; bottom:12rem; left:0} #mainVisual .sw_ctrll .play_btn.play::before{width:1.1rem; height:1.4rem; border-width:0.4rem;} #mainVisual .sw_ctrll .play_btn.pause::before{border-left: 1rem solid #fff;border-right: 0.8rem solid transparent;border-bottom: 0.8rem solid transparent;border-top: 0.8rem solid transparent;} /* main_product */ #main_product .main_prdt_sw .txt_area{padding:0 3rem 9.5rem;} #main_product .main_prdt_sw .txt_area .num{font-size:1.8rem;} #main_product .main_prdt_sw .txt_area .tit{font-size:2.8rem;} #main_product .main_prdt_sw .txt_area .vm_btn{left:3rem;} #main_product .main_prdt_sw .sw_ctrll .swiper-pagination{display:none;} #main_product .main_prdt_sw .swiper-slide.swiper-slide-active .txt_area{bottom:3.5rem;} /* main_sustainable */ #main_sustainable .link_cont{border-right:0; border-top:1px solid rgba(255,255,255,0.3);} #main_sustainable .link_cont li{width:100%; padding:4rem 3rem; border-left:0; border-bottom:1px solid rgba(255,255,255,0.3);} #main_sustainable .link_cont li em{font-size:3.2rem;} #main_sustainable .link_cont li p{font-size:2.4rem;} /* main_partner */ #main_partner .top_tit{font-size:6rem; line-height:7rem;} /*[e] Main Style */ /*[s] Sub Style */ .s-title{margin-bottom:4.5rem;} .s-title .cate{font-size:2.2rem;} .s-title .tit{font-size:5.5rem;} .s-title .txt{margin-top:1rem; font-size:2.4rem;} /* greet */ .greet .cont_box dt{font-size:3.6rem; line-height:1.3;} .greet .cont_box dd{margin-top:3rem; font-size:2.4rem; line-height:1.7;} .greet .cont_box dd p:first-child{font-size:3rem; line-height:1.4;} /* cmpn_about */ .cmpn_about .sect_tit_en{font-size:2.2rem; line-height:3.2rem;} .cmpn_about .cont_txt{font-size:2.4rem; line-height:3.4rem;} .cmpn_about .sect_motto .cont_li{min-width:120rem;} .cmpn_about .sect_management .cont_li{margin-top:6rem; flex-wrap:wrap; gap:4.5rem 0;} .cmpn_about .sect_management .cont_li li{padding-left:20rem; width:100%; min-height:16.5rem; text-align:left; position:relative;} .cmpn_about .sect_management .cont_li li::before{width:16rem; height:16rem; background-size:20rem; position:absolute; left:0; top:0.5rem;} .cmpn_about .sect_management .cont_li li .tit_en{margin-bottom:0.9rem; font-size:2.2rem; line-height:3.2rem;} .cmpn_about .sect_info .cont_li li{width:100%; min-height:20rem;} .cmpn_about .sect_info .cont_li li .tit{font-size:3rem;} .cmpn_about .sect_info .cont_li li p{font-size:2.4rem;} /* history */ .history_top{padding:10.2rem 4rem 10.8rem} .history_top p{font-size:2.4rem; line-height:3.4rem;} .history-area{} .history-area:before{margin-left:0; left: 0%;} .history-area #his_progress{margin-left:0; left: 0%;} .history-area>li{text-align: left !important; display: block;} .history-area .history-in{width:100%; padding:0 0 0 4rem; text-align: left !important;} .history-area .history-in:before{width: 2rem; height:2rem; left: -0.7rem; top:0.5rem;} .history-area .history-in>strong{font-size:3.5rem;} .history-area .txt_wrap{} .history-area .txt_wrap p{padding:0 0 0 0; font-size:2.4rem;} .history-area .txt_wrap p:before{content: "ㆍ"; position:absolute; left: -0.3rem; top:0px; display:none;} .history-area .txt_wrap p+p{margin-top:1rem;} .history-area>li .thumb{width:100%; margin-top:3rem; padding-right:0; position: relative;} .history-area>li .thumb img{width:100%; height:auto; position: static; } .history-area>li:nth-child(even) .history-in:before{left:-0.7rem; right:auto;} .history-area>li:nth-child(even) .txt_wrap{justify-content: flex-start;} /* .history-area>li:nth-child(even) .txt_wrap p{padding:0 0 0 1.5rem;} .history-area>li:nth-child(even) .txt_wrap p:before{left: -0.3rem; right:auto;} */ /* Location */ .location-text .loca_addr p{font-size:3.2rem;} .location .loca_info{font-size:2.4rem;} /* facility 설비현황 공통 */ .facility .facility_intro .cont_area .cont_box dd{font-size:2.4rem} .facility .facility_intro .cont_area .cont_box ul{font-size:2.2rem;} .facility .facility_spec .tb_area table thead th{font-size:2.4rem;} .facility .facility_spec .tb_area table tbody td{font-size:2.2rem;} /* prduct - 제품소개 공통 */ .prduct .intro_area .cont_txt{font-size:2.4rem;} .prduct .intro_area .prdt_sort li{font-size:2.8rem;} .prduct .intro_area .prdt_sort li::before{margin-top:0.4rem;} .prduct .prdt_info_area .cont_box .cont_txt p{font-size:2.4rem;} .prduct .prdt_info_area .cont_box dd{font-size:2.4rem;} /* prduct - special */ .special .prdt_info_area .cont_box .cont_txt .box_dot_li li{font-size:2.4rem;} .special .prdt_info_area .cont_box .cont_txt .box_dot_li li::before{top:1.6rem;} /* sustainable_biz - 윤리경영*/ .sustainable_biz .cont_txt{font-size:2.4rem; line-height:3.4rem;} .sustainable_biz .sect_intro .cont_box em{font-size:3rem;} .sustainable_biz .sect_intro .img_cont_box{flex-direction:column;} .sustainable_biz .sect_intro .img_cont_box .ico_box{height:9rem; display:flex; align-items:center; justify-content:center;} .sustainable_biz .sect_intro .img_cont_box .ico_box img{transform:rotate(90deg);} .sustainable_biz .sect_intro ul.img_cont{flex-direction:column;} .sustainable_biz .sect_intro ul.img_cont li+li{margin:-3rem 0 0 0;} .sustainable_biz .sect_complaint .cont_tit{font-size:2.9rem;} .sustainable_biz .sect_complaint .protect dd{font-size:2.4rem;} .sustainable_biz .sect_complaint .violations ul{flex-wrap:wrap; justify-content:center; gap:4rem 0} .sustainable_biz .sect_complaint .violations ul li{width:calc(100% / 3); font-size:2.4rem; line-height:3.4rem;} .sustainable_biz .sect_complaint .violations ul li:nth-child(4){border:none} .sustainable_biz .sect_methods .inConts{flex-wrap:wrap; flex-direction:column-reverse;} .sustainable_biz .sect_methods .inConts::after{width:100%; height:32rem; flex:none; border-radius:1rem 1rem 0 0;} .sustainable_biz .sect_methods .cont_area{width:100%; border-radius:0 0 1rem 1rem;} .sustainable_biz .sect_methods .cont_area em{font-size:3.4rem; line-height:4.4rem;} .sustainable_biz .sect_methods .cont_area dl{font-size:2.4rem;} /* sustain_safety - 안전경영*/ .sustain_safety .intro_txt{font-size:2.4rem;} .sustain_safety .cont_area h4{padding-top:14rem;} .sustain_safety .purpose{flex-direction:column;} .sustain_safety .purpose dt{flex-direction:column;} .sustain_safety .purpose dd{padding:3rem; font-size:2.4rem;} .sustain_safety .count_li{gap:4rem} .sustain_safety .count_li li{width:100%;} .sustain_safety .count_li li:not(.logo_box)::before{font-size:2.2rem;} .sustain_safety .count_li li p{font-size:2.2rem;} .sustain_safety.en_pg .cont_area h4{padding-top:16rem;} /* recruit_ideal - 인재상 */ .recruit_ideal .cont_intro{font-size:2.8rem;} .recruit_ideal .cont_li li{width:100%} .recruit_ideal .cont_li li p{font-size:2.4rem;} /* hr_system - 인사제도 */ .hr_system .cont_intro{font-size:2.8rem;} .hr_system .sect_area dt{font-size:3.4rem;} .hr_system .sect_area dd{font-size:2.8rem;} .hr_system .sect_area .img_cont{text-align:center;} .hr_system .sect_area .img_cont img{max-width:fit-content;} /* job_roles - 직무소개 */ .job_roles .cont_li li{} .job_roles .cont_li li p{font-size:2.4rem;} /* recruit - 채용안내 */ .recruit .sect_step .step_li p{font-size:2.4rem;} .recruit .sect_etc .cont_area{width:100%; flex:none; max-width:none;} .recruit .sect_etc .cont_area ul li{font-size:2.2rem;} .recruit .sect_etc .cont_area ul li::before{top:1rem} /* promo_video - 홍보센터 */ .promo_video .intro_txt{font-size:3.5rem; line-height:4.5rem;} /* area */ .area-swiper .list .area-swiper-re{width:100%; min-width:90.6250vw;} .year-tab{} .year-tab .name{font-size:2.2rem; display: flex;} .year-tab ul.year-list{width:100%; margin:0; background-color: #fff; border:1px solid #abaeb0; display: none; position: absolute; left:0; top:calc(100% - 1px); z-index:3;} .year-tab ul.year-list>li{margin:0 !important; display:block;} .year-tab ul.year-list>li+li{border-top:1px solid #abaeb0;} .year-tab ul.year-list>li a{height:7rem; background-color: #fff; border:none; font-size:2rem; color: #666; text-align: left; white-space: normal; border-radius:0; justify-content: flex-start;} .year-tab ul.year-list>li a>span{} .year-tab.open .name:after{transform:rotate(-45deg);} .year-tab.open .name:before{transform:rotate(45deg);} .year-tab ul.year-list>li:is(:hover, .active) a{background-color:rgba(57,190,133, 0.1); border-color:#abaeb0; color: var(--point);} .month-tab{width:34rem;} .month-tab>p{height:7.4rem; font-size:2.2rem;} .month-tab>p:before{font-size:2.2rem; right:2.9rem;} .month-tab .month-tab-in{max-height:50rem; border-radius:3.7rem;} .month-tab .month-tab-in>a{padding:1rem 0 1rem 3rem; font-size:2rem; line-height:1.45;} .month-tab .month-tab-in>a:nth-child(1){padding-top:2.5rem;} .month-tab .month-tab-in>a:last-child{padding-bottom:2.5rem;} ul.lawArea{} ul.lawArea .lawBox-gray{padding:2.5rem 3.5rem;} ul.lawArea .lawBox-gray .title{font-size:2.4rem; line-height:3.4rem;} ul.lawArea .lawBox-gray .text{font-size:2rem; line-height:3rem;} ul.lawArea .lawBox-gray .text.flex{margin-top:2rem; display:block;} ul.lawArea .lawBox-gray .text.flex>strong{display:block;} ul.lawArea .lawBox-gray .text.flex>img{} ul.lawArea .c-num .lawBox-gray{width:calc(100% + 4.5rem); margin:3rem 0 0 -4.5rem;} .lawSources{font-size:2rem;} ol.l-num{} ol.l-num>li{padding-left:2rem; font-size:2rem;} ol.c-num>li{padding-left:2.5rem; font-size:2.2rem;} /* store */ .store-area>.store-inj{} .store-area>.store-inj>dl{} .store-area>.store-inj>dl>dt{} .store-area>.store-inj>dl>dd{font-size:2.3rem;} .store-area .store-inj-box{height:23.5rem;} .store-area .store-inj-box img{width:14rem; min-width:14rem;} .store-area .store-inj-box>dl{} .store-area .store-inj-box>dl>dt{font-size:2.4rem; } .store-area .store-inj-box>dl>dd{font-size:2.2rem;} .store-area .store-inj-btn{} .store-area .store-inj-btn>a{font-size:2rem;} .store-table{} .store-table>table{} .store-table>table th, .store-table>table td{font-size:2rem; line-height:1.5;} .store-table>table th{} .store-table>table th:before, .store-table>table td:before{font-size:2.2rem;} .store-table>table .btn{width:12rem; height:4rem; margin:0; font-size:1.8rem;} /* etc */ .etc_clause{width:100%; margin:0 auto;} .etc_clause .etc_clause_in{padding:5rem 3rem; border-radius:1rem;} .etc_clause .logo{margin:0;} .etc_clause .txt{padding:2rem 0 6rem; font-size:2.2rem;} .etc_clause .scroll{font-size:2rem;} .etc_select{width:100%;} .etc_select select.base{width:22rem;} /* search */ .search-area{} .search-area .search-re .search-re-tit span{height:4rem; padding:0 2rem; font-size:2rem;} .search-area .search-re .search-re-list .search-link .tit{font-size:2.4rem;} .search-area .search-re .search-re-list .search-link .txt{font-size:2rem;} .search-area .search-re .search-more>a{height:5.1rem; padding:0 3.7rem; font-weight: 600; font-size:2rem;} .search-area .result-group{} .search-area .result-group dl{} .search-area .result-group dl dt{display:none;} .search-area .result-group dl dd{width:100%;} .search-area .result-group dl dd div {} .search-area .result-group dl dd div.title{} .search-area .result-group dl dd div.title a{font-size:2.4rem;} .search-area .result-group dl dd div.title a>h2 {} .search-area .result-group dl dd div.cont{max-height: 5.6rem; margin-top:1rem; font-weight: 400; font-size:2rem; line-height:2.8rem;} .search-area .result-group dl dd div.navi, .result-group dl dd div.navi a{font-size:2rem;} /*[e] Sub Style */ /*[s] Plugin Style */ /*[e] Plugin Style */ } @media only screen and (max-width : 640px){ .depth-three>a{width:100%;} /* #mainVisual .vTxt{width:52rem;} */ .location-text>dl{align-items: flex-start;} .location-text>dl>dt{padding-top:0.5rem;} .location-text .location-link{display:flex; } .location-text .location-link>a{width:50%;} } /* transform: scale(1.1) 부분을 transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요 display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; -ms-flex-align:center; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; -ms-flex-align:center; display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: space-between; display: flex; flex-flow: column wrap; justify-content: space-between; display: flex; flex-flow: column wrap; justify-content: center; display: flex; flex-flow: row wrap; justify-content: center; display: flex; flex-flow: row wrap; justify-content: space-between; display: flex; justify-content: space-between; // 양쪽 끝 정렬 맨 앞에 정렬 justify-content: flex-start; ​ 맨 끝에 정렬 justify-content: flex-end; 가운데 정렬 justify-content: center; 서로 같은 간격으로 박스들이 조정됨. justify-content: space-between;​ 컨텐츠 뿐만 아니라 그 주변도 같은 간격으로 조정됨. justify-content: space-around; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); filter:grayscale(100%); -webkit-filter:grayscale(100%); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); transition: all .5s linear; transition: all .5s ease-out; transform:rotate(180deg); -webkit-transition-timing-function:ease-in linear; transition-timing-function:ease-in linear; -webkit-transition-delay: .8s; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; //두줄 감추기 active :first-child :nth-child(1) :nth-of-type(1) box-sizing:border-box; word-break:keep-all; word-wrap:break-word; border-radius:2px; width:calc(100% / 6); box-shadow:0 0 1rem rgba(0,0,0,0.2); */