@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, #main-business>a:before, /*#main-customer a,*/ #main-customer a>p img, #main-customer a>dl, .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 2s ease-out; transform-origin: 50% 50%;} .apply-result .text-wrap {display:flex;flex-direction:column;align-items:center;gap:1.6rem;border-top:2px solid #333;border-bottom:1px solid #e2e2e2;padding:6rem 3rem;text-align:center;} .apply-result .text-wrap strong {color:#111;font-size:3.4rem;} .apply-result .text-wrap p {color:#111;font-size:2.2rem;} .apply-result .text-wrap .res_1 {color:#111;font-size:3.4rem; font-weight:700;} .apply-result .text-wrap .res_2 {color:#111;font-size:2.2rem;} /*[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:4rem; padding-left:1.7rem; font-weight: 600; font-size:2.8rem; line-height:1; color: #111; position: relative;} h4.bul:before{content: ""; width: 0.6rem; height: 2.8rem; background-color: var(--point); position:absolute; left: 0; top:0;} /**+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;} .wideFrame.h740{height: 74rem; padding-bottom: 0;} .wideKakao{width: 100%; margin: 0 auto; position: relative;} .wideKakao>.root_daum_roughmap{width: 100%; height:50rem;} .wideKakao>.root_daum_roughmap .wrap_map{height:100%; position: absolute; left: -1px; right: -1px; top: -1px;} .wideKakao .hide {display: none;} .hd-bar{padding-top:4px; background:linear-gradient( to right, #0a9680 0, #0a9680 58%, #221e1f 58%, #221e1f 72%, #d8922a 72%, #d8922a) no-repeat; background-size:100% 4px;} .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;} /*[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:absolute; 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_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.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 */ /* visual */ #mainVisual{width:100%; position: relative; overflow:hidden;} #mainVisual .sw_contain {position: relative; } #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:94rem; object-fit: cover; object-position: center center; /*filter:grayscale(80%) blur(5px);*/ transform:scale(1.1);} #mainVisual .visualRoll .swiper-slide>video{width:100%; max-width:none; height:96rem; object-fit: cover;} #main-visual, #main-visual .main-slider, #main-visual .main-slider .slick-slide, #main-visual .main-slider .slide-media, #main-visual .main-slider .mobile_in{height:760px !important;} #main-visual .main-slider .mobile_in{width: 242vw; position: relative; left:50%; transform: translateX(-50%);} #main-visual .main-slider .mobile_in video, #main-visual .main-slider .mobile_in iframe{width:100% !important; height:110% !important; position: absolute; left:0 !important; top:0 !important; transform: translate(0%, 0%);} #main-visual{width:100%; margin-bottom: 5rem; background:#36465d url('/theme/prix/img/loading.gif') no-repeat center center; background-size: contain; font-size:0; line-height:0; position: relative; overflow:hidden;} #main-visual .main-slider{width: 100%; background-color:#36465d; position: relative; opacity: 0; visibility: hidden; transition:all 3s ease;} #main-visual .main-slider.slick-initialized{opacity: 1; visibility: visible;} #main-visual .main-slider .slick-slide{position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden;} #main-visual .main-slider .slick-slide:before{content: ''; width: 100%; height: 100%; background-color: #000; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .3; z-index: 1;} #main-visual .main-slider video {width: auto; height: auto; min-width: 100%; min-height: 100%; display: block; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%);} #main-visual .main-slider iframe {position: relative; pointer-events: none;} #main-visual .main-slider figure {height: 100%; margin:0; position: relative;} #main-visual .main-slider .slide-image {height: 100%; background-size: cover; background-position: center; opacity: 0; transition:all .8s ease;} #main-visual .main-slider .slide-image{opacity: 1;} #main-visual .main-slider .image-entity {width: 100%; opacity: 0; visibility: hidden;} #main-visual .main-slider .loading {width: 100%; position: absolute; left: 0; top: 44%;} #main-visual .main-slider .slide-media {background-repeat: no-repeat; background-position: center center; background-size: cover; animation:slideOut .4s cubic-bezier(0.4, 0.29, 0.01, 1);} #main-visual .main-slider .caption{position: absolute; left: 5%; top: 44%; text-align: center; padding: 20px; border: 3px solid; color: #fff; margin: 0; font-size: 40px; font-weight: bold; letter-spacing: .02em; opacity: 0; z-index: 1; transition:all .3s ease; transform:translateY(100px); -webkit-backface-visibility: hidden; backface-visibility: hidden;} #main-visual .main-slider .slick-active{z-index: 1;} #main-visual .main-slider .slick-active .slide-media{animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);} #main-visual .main-slider .slick-active .caption{opacity: 1; transform:translateY(0); transition:all .7s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;} #main-visual .slick-arrow{width:47px; height:90px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer;} #main-visual .slick-prev{background-image: url("/images/main/btn_slick_prev.png"); left:100px;} #main-visual .slick-next{background-image: url("/images/main/btn_slick_next.png"); right:100px;} #main-visual .slick-arrow:hover{opacity:1;} #main-visual .controll{width:260px; padding-top:0; margin-left:-130px; position: absolute; left: 50%; bottom: 5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between;} #main-visual .controll .dot{display:inline-block; vertical-align: middle;} #main-visual .controll .auto{display:inline-block; vertical-align: middle;} #main-visual .controll .auto{padding-left:10px;} #main-visual .controll .auto button{width:27px; height:27px; background:transparent url("/images/btn_slick_pause.png") no-repeat left top; border:none;} #main-visual .controll .auto button.off{background-image:url("/images/btn_slick_play.png");} #main-visual .slick-dots{display:flex; flex-wrap: nowrap; justify-content: flex-start;} #main-visual .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} #main-visual .slick-dots>li+li{margin-left:0;} #main-visual .dot_Line, #main-visual .dot_Line>dt, #main-visual .dot_Line>dd .line{transition: all .3s ease-out; transform-origin: 50% 50%;} #main-visual .dot_Line>dd .line>span{} #main-visual .vTxt.first .dot_Line>dd .line>span{} #main-visual .dot_Line{padding-right:10px; box-sizing: border-box; position: relative;} #main-visual .dot_Line>dt{font-weight: 500; font-size:15px; line-height:1; color: rgba(255,255,255,0.3); white-space: nowrap;} #main-visual .dot_Line>dd{position: absolute; left:27px; right:10px; top:50%;} #main-visual .dot_Line>dd .line{width:100%; height:2px; background-color: rgba(255,255,255,0.3); display:inline-block; vertical-align: middle; position: relative; overflow:hidden;} #main-visual .dot_Line>dd .line>span{width:100%; height:2px; background-color: rgba(255,255,255,1); display:inline-block; position: absolute; left:-100%; top:0;} #main-visual .slick-dots>li.slick-active .dot_Line{padding-right:120px;} #main-visual .slick-dots>li.slick-active .dot_Line>dt{color: rgba(255,255,255,1);} #main-visual .slick-dots>li.slick-active .dot_Line>dd .line{width:100%;} #main-visual .slick-dots>li.slick-active .dot_Line>dd .line>span{} #mainVisual .swiper-option{width:100%;margin:0 4rem -3rem; z-index:3; } #mainVisual .swiper-button{width:auto;height:auto !important;font-family:'SUIT Variable'; font-size:1.6rem;color:#fff;position:static;display:flex;align-items:center;font-weight:500;cursor: pointer; z-index:7;margin-top:0 !important;} #mainVisual .swiper-button::after{display:none;} #mainVisual .swiper-button img{width:0.7rem;} #mainVisual .swiper-button-prev{left:0;} #mainVisual .swiper-button-prev img{transform:rotate(-180deg);} #mainVisual .swiper-button-next{right:0;} #mainVisual .swiper-button:hover{color: rgba(255,255,255,1);} #mainVisual .play_btn{font-size:0;width:1.1rem; margin:0 1.5rem} #mainVisual .play_btn::before{content:'';display:block;box-sizing:border-box;} #mainVisual .play_btn.play::before{width:0.8rem;height:1.5rem;border-left:2px solid #ddd;border-right: 2px solid #ddd;margin:0 auto} #mainVisual .play_btn.pause::before{border-left:1.1rem solid #ddd;border-right: 0.8rem solid transparent;border-bottom: 0.8rem solid transparent;border-top: 0.8rem solid transparent;} #mainVisual .swiper-pagination{position:relative; top:auto; bottom:auto; left:auto; z-index:5;} #mainVisual .swiper-pagination>span{font-family:'Poppins';position:absolute;left:0;display:inline-block; font-size:1.6rem; line-height:2.6rem; font-weight:500; color:#fff;opacity:.6;} #mainVisual .swiper-pagination>span.swiper-pagination-current{font-size:2rem;opacity:1;} #mainVisual .swiper-pagination>span.swiper-pagination-total{left:5rem;} #mainVisual .swiper-pagination>span.slash{left:2rem;margin:0 1rem;} #mainVisual .swiper-pagination .timmer{width:32.1rem; height:2px;margin-bottom:1rem;position:relative;left:50%;transform:translateX(-50%);background: rgba(255, 255, 255, 0.40);} #mainVisual .swiper-pagination .timmer .timmer__inner{width:0; height:100%; background-color:#fff;} #mainVisual .swiper-slide-active .vTxt .ii{top:0px; opacity:1;} #mainVisual .visualRoll .swiper-slide.swiper-slide-active>img{/*filter:grayscale(0) blur(0px);*/ transform:scale(1);} #mainVisual .optionBox{max-width:30rem;margin-left:-4rem;position:relative;left:50%;transform:translateX(-50%);bottom:20rem;display:flex;z-index:2;} #mainVisual .optionBox .swiper_btn{font-family:'Poppins';display:flex;justify-content:flex-end;align-items:center;top:0.5rem;line-height:1;position:relative;gap:3.6rem;} #mainVisual .optionBox .swiper-button-next{} #mainVisual .optionBox .swiper-button-prev{position:relative;} #mainVisual .optionBox .swiper-button-prev:before{width:0.2rem;height:1rem;right:-1.8rem;top:0.3rem;content:'';background:#fff;position:absolute;} @keyframes slideIn { from { filter:blur(15px); } to { filter:blur(0); } } @keyframes slideOut { from { filter:blur(0); } to { filter:blur(15px); } } /* visual */ #mVisual{width:100%; font-size:0; line-height:0; position: relative; overflow:hidden;} #mVisual .visualRoll{white-space: nowrap;} #mVisual .visualRoll .slider{width:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} #mVisual .visualRoll .slider img{width:100%; max-width:none; height:96rem; object-fit: cover;} #mVisual .visualRoll .slider video{width:100%; max-width:none; height:96rem; object-fit: cover;} #mVisual .slick-arrow{width:35px; height:63px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer; opacity:1;} #mVisual .slick-prev{background-image: url("/images/main/btn_slick_prev.png"); left:4.25%;} #mVisual .slick-next{background-image: url("/images/main/btn_slick_next.png"); right:4.25%;} #mVisual .slick-arrow:hover{opacity:1;} #mVisual .vTxtArea{width:100%; height:96rem; max-width:1560px; padding:0 3rem; text-align: left; position: absolute; left:50%; top:0; transform: translateX(-50%); z-index:5; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start;} #mVisual .vTxtArea .vTxt_in{width:100%; padding:9rem 0 34rem; position: relative;} #mVisual .vTxt{width:100%; position: absolute; left:0; top:-999px;} #mVisual .vTxt .ii{color: #fff; top:50px; display:block; opacity: 0; position: relative; word-break:keep-all; word-wrap:break-word;} #mVisual .vTxt .i01{-webkit-transition-delay: .4s; transition-delay: .4s;} #mVisual .vTxt .i02{-webkit-transition-delay: .45s; transition-delay: .45s;} #mVisual .vTxt .i03{-webkit-transition-delay: .5s; transition-delay: .5s;} #mVisual .vTxt .i04{-webkit-transition-delay: .55s; transition-delay: .55s;} #mVisual .vTxt .i05{-webkit-transition-delay: .6s; transition-delay: .6s;} #mVisual .vTxt .i06{-webkit-transition-delay: .65s; transition-delay: .65s;} #mVisual .vTxt .i07{-webkit-transition-delay: .7s; transition-delay: .7s;} #mVisual .vTxt .ii.tit{font-weight:900; font-size:1.8rem; line-height:1;} #mVisual .vTxt .ii.title{margin-top:2rem; font-weight: bold; font-size:5.5rem; line-height:6rem;} #mVisual .vTxt .ii.txt{margin-top:3rem; font-weight: 500; font-size:2.2rem; line-height:1.4;} #mVisual .vTxt .ii.controll{margin-top:5rem;} #mVisual .slick-dots{width:100%;} #mVisual .slick-dots>li{display:inline-block; vertical-align: top;} #mVisual .slick-dots>li+li{margin-left:1rem;} #mVisual .slick-dots>li button{width:1.1rem !important; height:1.1rem; margin:0; padding:0; background-color:#c7c8c6; border:none; font-size:0; line-height:0; cursor: pointer; border-radius:99px;} #mVisual .slick-dots>li.slick-active button{width:4.1rem !important; background-color:#0a60dd;} #mVisual .vTxt.active{position: static; top:0px;} #mVisual .vTxt.active .ii{top:0px; opacity:1;} /* 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:94rem; object-fit: cover; object-position: center center; filter:grayscale(80%) blur(5px); transform:scale(1.1);} #mainVisual .visualRoll .swiper-slide>video{width:100%; max-width:none; height:96rem; object-fit: cover;} #mainVisual .vTxtArea{width:100%; max-width:132rem; height:100%; margin-left:-66rem; padding:0 2rem 8rem; text-align: left; position: absolute; left:50%; top:0; z-index:5; display: flex; align-items: center; justify-content: center;} #mainVisual .vTxt{width:100%; position: relative;} #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.title{font-weight: 600;color:#E8E8E8;font-size:2.6rem; line-height:3.6rem;text-align:center;margin-bottom:2rem;} #mainVisual .vTxt .ii.text{font-size:5.6rem; line-height:6.6rem; font-weight:300; text-align:center;} #mainVisual .vTxt .ii.text strong{font-weight:700;} #mainVisual .vTxt .ii.sub_txt{font-size:3rem;line-height:4rem;font-weight:400;} #mainVisual .vTxt .ii.btns{margin-top:3.4rem; text-align:center;} #mainVisual .vTxt .ii.btns>a{width:18rem; height:5.5rem;background:rgba(255,255,255,.1);font-weight:500; font-size:1.6rem; line-height:1; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius:6rem;border:0.1rem solid #fff;} #mainVisual .vTxt .ii.btns>a img{margin-left:2.1rem;} #mainVisual .swiper-slide-active .vTxt .ii{top:0px; opacity:1;} #mainVisual .visualRoll .swiper-slide.swiper-slide-active>img{filter:grayscale(0) blur(0px); transform:scale(1);} .mainTitle{font-size:5.4rem;font-weight:800;} /* 메인상단 */ #mainIntro{position:relative;padding:11rem 0 10rem;} #mainIntro:after{width:45.6532%;height:56.2rem;background:url('/images/main/intro_bg_img.png')no-repeat right top / 100% auto;position:absolute;right:0;top:-0;content:'';z-index:-1;} #mainIntro dl{margin-bottom:6rem;} #mainIntro dl dt{font-size:5.4rem;line-height:6.4rem;} #mainIntro dl dd{font-size:1.9rem;line-height:3.2rem;color:#444;margin-top:10rem;} #mainIntro dl dd p:nth-child(n+2){margin-top:3rem;} .viewBtn a{width:18rem; height:5.5rem;font-weight:500; font-size:1.6rem; line-height:1; color: var(--point); display: inline-flex; align-items: center; justify-content: center; border-radius:6rem;border:0.1rem solid var(--point);} .viewBtn a img{margin-left:2.1rem;} /* 사업소개 */ #mainBusiness{background: rgba(0, 136, 66, 0.05);padding:10rem 0;} #mainBusiness .inConts dl dt{color: var(--point);} #mainBusiness .inConts dl dd{font-size:2.4rem;font-weight:500;color:#222;margin-top:2rem;} #mainBusiness .inConts ul{display:flex;gap:0.8rem;margin-top:6rem;} #mainBusiness .inConts ul li{width:13.6045% !important;filter : grayscale(100%);transition:.5s ease;position:relative;height:55rem;color:#fff;background:url('/images/main/business_img_01.jpg')no-repeat center / cover;} #mainBusiness .inConts ul li a{height:100%;transition:.5s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url('/images/main/business_more_icon.png')no-repeat right 3rem bottom 4rem;} #mainBusiness .inConts ul li.active{width:45.582% !important;filter : grayscale(0);padding:0 5rem 4rem 6rem;align-items:flex-start;flex-direction:unset;align-items:flex-end;justify-content:space-between;} #mainBusiness .inConts ul li.active a{background-image:url('/images/main/business_more_icon_on.png');background-position:right bottom 0;align-items:flex-start;flex-direction:unset;align-items:flex-end;justify-content:space-between;} #mainBusiness .inConts ul li.active a > p{display:none;} #mainBusiness .inConts ul li.active a > div p{font-size:4rem;opacity:1;} #mainBusiness .inConts ul li.active a > div{position:static;} #mainBusiness .inConts ul li.active span .moreIcon{display:none;} #mainBusiness .inConts ul li.active span .moreIconOn{display:block;} #mainBusiness .inConts ul li span .moreIconOn{display:none;} #mainBusiness .inConts ul li:nth-child(1){border-radius:3rem 0 0 3rem;} #mainBusiness .inConts ul li:nth-child(2){background-image:url('/images/main/business_img_02.jpg');} #mainBusiness .inConts ul li:nth-child(3){background-image:url('/images/main/business_img_03.jpg');} #mainBusiness .inConts ul li:nth-child(4){background-image:url('/images/main/business_img_04.jpg');} #mainBusiness .inConts ul li:nth-child(5){background-image:url('/images/main/business_img_05.jpg');border-radius:0 3rem 3rem 0;} #mainBusiness .inConts ul li a > p{font-size:2.2rem;font-weight:700;color:#fff;} #mainBusiness .inConts ul li a > div{width:100%;display:flex;align-items:center;justify-content:space-between;position:absolute;right:3rem;bottom:4rem;} #mainBusiness .inConts ul li a > div p{opacity:0;font-size:0;font-weight:700;color:#fff;transition:.5s ease;} /* ABOUT COMPANY */ #mainAbout{padding:10rem 0 15rem;} #mainAbout .inConts{padding:0;} #mainAbout .inConts > div{padding:11rem 6rem 7rem 9rem;background:#F7F7F7;border-radius:5rem;display:flex;justify-content:space-between;} #mainAbout dl{width:50%} #mainAbout dl dt{font-size:5.4rem;font-weight:800;font-family:'Poppins';color: var(--point);} #mainAbout dl dd{font-size:2.4rem;line-height:3.4rem;font-weight:500;margin-top:2rem;} #mainAbout ul{width:50%;display:flex;flex-wrap:wrap;gap:3rem 4%;} #mainAbout ul li{width:47.206%;position:relative;} #mainAbout ul li a{width:100%;height:100%;border-radius:3rem;display:block;} #mainAbout ul li a.noLink{cursor:auto;} #mainAbout ul li img{width:100%;border-radius:3rem;} #mainAbout ul li p{font-size:3.4rem;font-weight:700;color:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);} /* ESG경영, 기술현황, 견적문의 */ #mainLink ul{width:100%;display:flex;} #mainLink ul li{height:80rem;flex:1;background:url('/images/main/link_img_01.jpg')no-repeat center / cover;} #mainLink ul li a{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 2rem 5rem 10rem;} #mainLink ul li:nth-child(2){background-image:url('/images/main/link_img_02.jpg');} #mainLink ul li:nth-child(3){background-image:url('/images/main/link_img_03.jpg');} #mainLink ul li:hover dl dd p .linkIcon{display:none;} #mainLink ul li:hover dl dd p .linkIconOn{display:inline-block;} #mainLink ul li dl dd .linkIconOn{display:none;} #mainLink ul li dl dt{font-size:3.6rem;font-weight:700;color:#fff;} #mainLink ul li dl dd{font-size:2.4rem;font-weight:500;color:#fff;} #mainLink ul li dl dd p{margin-top:3rem;} /* 보도자료,오시는 길 */ #mainBoard .inConts{display:flex;gap:0 5%;padding:15rem 2rem 13.2rem;} #mainBoard .inConts .releaseBox{width:62%;} #mainBoard .inConts .releaseBox .releaseTop{display:flex;justify-content:space-between;} #mainBoard .inConts .releaseBox .releaseTop a{width:24rem; height:5.5rem;font-weight:500; font-size:1.8rem; line-height:1; color:#666;display: inline-flex; align-items: center; justify-content: center; border-radius:6rem;border:0.1rem solid #ddd;} #mainBoard .inConts .releaseBox .releaseTop a img{margin-left:2.1rem;} #mainBoard .inConts .releaseBox ul{border-top:0.1rem solid #eee;} #mainBoard .inConts .releaseBox ul li{padding:3.5rem 2rem 4.2rem 5rem;border-bottom:0.1rem solid #eee;} #mainBoard .inConts .releaseBox ul li dl dt{font-size:2.2rem;font-weight:600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break:break-all !important;} #mainBoard .inConts .releaseBox ul li dl dd{font-size:1.6rem;color:#666; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break:break-all !important;} #mainBoard .inConts .releaseBox ul li > a > p{font-size:1.5rem;color:#888;font-family:'Poppins';margin-top:1rem;} #mainBoard .inConts .locationBox{width:33%;} #mainBoard .inConts .locationBox .locationWrap{padding-top:3rem;border-top:0.1rem solid #eee;} #mainBoard .inConts .locationBox .locationWrap .wideKakao>.root_daum_roughmap{border-radius:2rem;} /*[e] Main Style */ /*[s] Sub Style */ .priDot{font-size:2.5rem;font-weight:700;vertical-align:-0.1rem;margin-right:0.5rem;} .tabDesign{display:flex;margin-bottom:6rem;} .tabDesign li{flex:1;cursor:pointer;font-size:2.6rem;color:#fff;border-radius:2rem;font-weight:600;text-align:center;padding:2.8rem 1rem;border:0.1rem solid var(--point);border-bottom:0;border-radius:2rem 2rem 0 0;background:var(--point);} .tabDesign li.active{background:#fff;color:#111;} .tabDesign li.headTab{border-radius:2rem 2rem 2rem 0;} .tabDesign li.businessTab{border-radius:2rem 2rem 0 2rem;} .tabDesign .headTab + .businessTab{border-left:0} .tabDesign .headTab:has(+ .businessTab){border-right:0;border-radius:2rem 2rem 2rem 0;} /* 회사개요 */ .aboutWrap > div:first-child{padding-top:0;} .aboutWrap > div:last-child{padding-bottom:0;} .aboutIntro > ul{width:calc(100% - 47rem);border-top:0.2rem solid var(--point);} .aboutIntro > ul li{padding:3.6rem 0;border-bottom:0.1rem solid #ddd;} .aboutIntro > ul li dl{display:flex;} .aboutIntro > ul li dl dt{width:31.8rem;font-size:2rem;color:#222;font-weight:600;display:flex;align-items:center;} .aboutIntro > ul li dl dt span{margin-right:5rem;display:inline-flex;align-items:center;justify-content:center;} .aboutIntro > ul li dl dt span img{width:3rem;} .aboutIntro > ul li dl dd{width:calc(100% - 31.8rem);font-size:2rem;color:#222;} /* 인사말 */ .greetingWrap{position:relative;z-index:1;padding-bottom:12rem;} .greetingWrap:after{width:45.6532%;height:56.2rem;background:url('/images/main/intro_bg_img.png')no-repeat right top / 100% auto;position:absolute;right:-11rem;top:-0;content:'';z-index:-1;} .greetingWrap dl dt{font-size:5.4rem;line-height:6.4rem;} .greetingWrap dl dd{font-size:1.9rem;line-height:3.2rem;color:#444;margin-top:10rem;} .greetingWrap dl dd p:nth-of-type(n+2){margin-top:3rem;} .greetingWrap dl dd div{margin-top:6rem;font-size:2.3rem;color:#444;font-weight:600;} /* 경영이념 */ .managementWrap{text-align:center;} .managementWrap > p{font-size:2.4rem;color:#666;line-height:3.4rem;} .managementWrap > p span{font-weight:600;} .managementWrap .managementTop{padding:6rem 0 13rem;} .managementWrap .managementBottom.greenBg:before{border-radius:5rem 5rem 0 0} .managementWrap .managementBottom h3{font-size:5.4rem;font-weight:700;font-weight:700;margin-bottom:7rem;} /* 견적문의 */ .contactBox{padding-top:3rem;margin-bottom:5rem;border-top:0.1rem solid var(--point)} .contactBox ul{display:flex;gap:3.5rem;} .contactBox ul li{flex:1;display:flex;align-items:center;border-radius:1rem;border:0.1rem solid #ddd;padding:4.5rem 1rem 4.5rem 3rem;} .contactBox ul li .imgBox img{width:7rem;} .contactBox ul li dl{margin-left:2rem;} .contactBox ul li dl dt{font-size:2rem;color:#333;} .contactBox ul li dl dd, .contactBox ul li dl dd a{font-size:2.4rem;color:#222;font-weight:600;} .contactTitle{font-size:2.2rem;color:#222;font-weight:700;border-bottom:0.1rem solid #adadad;padding-bottom:2rem;} .clauseArea .contactTitle{margin-bottom:4rem;} .greenBg{z-index:0;position:relative;padding:15rem 0;} .greenBg:before{width:100vw;height:100%;content:'';left:50%;transform:translateX(-50%);top:0;background:rgba(0, 136, 66, 0.05);position:absolute;z-index:-1;} .flexBox{display:flex;justify-content:space-between;} .flexBox > div{width:72.68%} .flexBox .topText{font-size:2.4rem;color:#444;line-height:3.4rem;letter-spacing:0;} .flexBox h3{font-size:5rem;line-height:6rem;color:#111;font-weight:700;} .flexCont{display:flex;padding:10rem 0;} .flexCont > h3{width:47rem;font-size:5rem;font-weight:700;} /* 조직도 */ .organizationWrap .organizationTop{text-align:center;padding-bottom:7.4rem;position:relative;} .organizationWrap .organizationTop:before{width:0.1rem;height:calc(100% - 22.5rem);position:absolute;border:0.1rem dashed #bbb;content:'';left:50%;top:22.5rem;transform:translateX(-50%);} .organizationWrap .organizationTop > p{width:20rem;height:20rem;text-align:center;font-size:3rem;color:#fff;font-weight:600;margin:0 auto;position:relative;background:var(--point);border-radius:100%;position:relative;z-index:3;flex-direction:column;display:flex;align-items:center;justify-content:center;} .organizationWrap .organizationTop > p:before{width:calc(100% + 5rem); height:calc(100% + 5rem);border-radius:100%;left:50%;top:50%;background:rgba(0, 136, 66, 0.2);transform:translate(-50%, -50%);content:'';z-index:-1;position:absolute;} .organizationWrap .organizationTop > p:after{width:14rem; height:14rem;border-radius:100%;right:0;top:50%;background:rgba(255, 255, 255, 0.05);transform:translateY(-50%);content:'';z-index:2;position:absolute;} .organizationWrap .organizationTop dl{margin:7rem auto 0;max-width:116rem;text-align:center;position:relative;} .organizationWrap .organizationTop dl dt{width:20rem;height:20rem;font-size:3rem;color:#fff;font-weight:600;margin:0 auto;display:flex;align-items:center;justify-content:center;background:rgba(29, 176, 100, 1);border-radius:100%;position:relative;} .organizationWrap .organizationTop dl dt:after{width:14rem; height:14rem;border-radius:100%;right:0;top:50%;background:rgba(255, 255, 255, 0.05);transform:translateY(-50%);content:'';z-index:2;position:absolute;} .organizationWrap .organizationTop dl dt:before{width:100%;height:0.1rem;position:absolute;border:0.1rem dashed #bbb;content:'';right:-20rem;transform:translateY(-50%);top:50%;} .organizationWrap .organizationTop dl dd{width:28rem;height:10rem;transform:translateY(-50%);top:50%;right:0;display:flex;align-items:center;justify-content:center;position:absolute;font-size:2.8rem;color:#111;font-weight:600;border:0.1rem solid var(--point);background:#f2f9f5;border-radius:0.5rem;} .organizationWrap .organizationBottom ul{display:flex;gap:4rem;padding-top:5rem;position:relative;} .organizationWrap .organizationBottom ul:before{width:calc(100% - 23.5%);height:0.1rem;position:absolute;border:0.1rem dashed #bbb;content:'';left:50%;top:0;transform:translateX(-50%);} .organizationWrap .organizationBottom ul li{flex:1;position:relative;} .organizationWrap .organizationBottom ul li:before{width:0.1rem;height:5rem;position:absolute;border:0.1rem dashed #bbb;content:'';left:50%;top:-5rem;transform:translateX(-50%);} .organizationWrap .organizationBottom ul li p{text-align:center;font-weight:600;border-radius:0.5rem;} .organizationWrap .organizationBottom ul li p:nth-child(1){font-size:2.8rem;color:#fff;background:var(--point);padding:3.2rem 1rem;} .organizationWrap .organizationBottom ul li p:nth-child(2){font-size:2.2rem;color:#333;background:#F7F7F7;padding:2.4rem 1rem 2.3rem;margin:1rem 0;} .organizationWrap .organizationBottom ul li dl{border:0.1rem solid #ddd;display:flex;padding:2rem 1rem 2rem 2rem;} .organizationWrap .organizationBottom ul li dl dt{font-size:2.2rem;color:#333;font-weight:600;padding-left:1.5rem;position:relative;} .organizationWrap .organizationBottom ul li dl dt:before{width:0.4rem;height:0.4rem;content:'';left:0;top:1.5rem;border-radius:100%;background:var(--point);position:absolute;} .organizationWrap .organizationBottom ul li dl dd{font-size:2.2rem;color:#555;font-weight:500;margin-left:3rem;background:#fff;} /* ideology */ .ideology-area{width:100%; max-width:1320px; margin:0 auto -2.5rem; text-align: center; display: flex; flex-flow: row wrap; gap:5rem 4rem;} .ideology-area>li{width:calc((100% - 4rem) / 2);} .ideology-area>li>p{aspect-ratio:640/340; overflow: hidden;} .ideology-area>li>p img{width:100%; height:100%; object-fit: cover; border-radius:0.8rem;} .ideology-area>li>dl{padding:2.5rem 0;} .ideology-area>li>dl>dt{font-weight: 600; font-size:3rem; line-height:1; color: #1b1b1b;} .ideology-area>li>dl>dd{margin-top:2.3rem; font-size:1.9rem; line-height:2.8rem; color: #1b1b1b;} /* history */ .history-area{margin-top:5rem; font-size:0; line-height:0; position: relative;} .history-area:before{content: ""; width: 0.5rem; margin-left:-0.3rem; background-color: #ddd; display: inline-block; position:absolute; left: 50%; top:1.5rem; bottom:0;} .history-area #his_progress{content: ""; width: 0.5rem; 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 10rem; 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: 2rem; height:2rem; background-color:var(--point); display: inline-block; position:absolute; left: -1rem; top:1rem; border-radius:999px; box-sizing: border-box;} .history-area .history-in>strong{font-weight: 700; font-size:3rem; line-height:1; color: #222; display:block;} .history-area .txt_wrap{margin-top:2rem; display: flex; justify-content: flex-start;} .history-area .txt_wrap p{position:relative;font-size:2.2rem; line-height:1.55; color: #666; position: relative;padding-left:1.3rem} .history-area .txt_wrap p+p{margin-top:0.7rem;} .history-area .txt_wrap>p+p{margin-top:1rem;} .history-area .txt_wrap .txt_in p{display:flex;position:relative;} .history-area .txt_wrap .txt_in p:before{width:0.3rem;height:0.3rem;background:#666;border-radius:100%;content:'';left:0;top:1.8rem;position:absolute;} .history-area>li:nth-child(odd) .txt_wrap p:before{left:auto;right:0;} .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(odd){text-align: left;} .history-area>li:nth-child(odd) .history-in{text-align: right; order:1;padding-left:0;} .history-area>li:nth-child(even) .history-in{padding-right:0;} .history-area>li:nth-child(odd) .history-in:before{left:auto; right: -1rem;} .history-area>li:nth-child(odd) .thumb{order:2;} .history-area>li:nth-child(odd) .txt_wrap{justify-content: flex-end;} .history-area>li:nth-child(odd) .txt_wrap p{padding-left:0;padding-right:1.3rem;justify-content:flex-end;} .history-area>li:nth-child(odd) .txt_wrap p:before{left:auto;right:0;} .history-area>li:nth-child(odd) .txt_wrap p span{order:1;margin-left:1rem;} .history-area>li:nth-child(even) .txt_wrap p span{margin-right:1rem;} .esgTop{text-align:center;padding-bottom:15rem;} .esgTop > dl dt{font-size:5rem;font-weight:600;color:#222;letter-spacing:0;} .esgTop > dl dt span{color:var(--point);} .esgTop > dl dd{font-size:2.4rem;color:#666;margin-top:1.5rem;letter-spacing:0;} .esgTop > ul{display:flex;gap:0 10.3%;margin-top:14rem;} .esgTop > ul li{width:30%;border-radius: 5rem;background: #FFF;box-shadow: 0 0 40px 0 rgba(102, 102, 102, 0.15);padding:0 3rem 5rem;} .esgTop > ul li .imgBox{width:63%;height:24rem;display:flex;align-items:center;justify-content:center;margin:0 auto;border-radius: 5rem 5rem 0 0;background: #9dd24c;position:relative;top:-4rem;} .esgTop > ul li .imgBox:after{width:calc(100% + 15rem);height:3.2rem;content:'';left:50%;bottom:-2rem;transform:translateX(-50%);position:absolute;border-radius: 40rem;background: radial-gradient(48.47% 48.47% at 50% 50%, rgba(102, 102, 102, 0.50) 0%, rgba(102, 102, 102, 0.00) 100%);} .esgTop > ul li:nth-child(2) .imgBox{background: #4bcfa0;} .esgTop > ul li:nth-child(3) .imgBox{background: #48d0de;} .esgTop > ul li .imgBox img{width:12rem;} .esgTop > ul li dl{background:#fff;position:relative;top:-4rem;padding:6rem 2rem 7rem;z-index:1;} .esgTop > ul li dl dt span{width:3.4rem;height:3.4rem;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:0.5rem;background:#9dd24c;margin:0 auto 1rem;} .esgTop > ul li:nth-child(2) dl dt span{background:#4bcfa0} .esgTop > ul li:nth-child(3) dl dt span{background:#48d0de;} .esgTop > ul li dl dt{font-size:1.8rem;font-weight:700;font-family:'Poppins';color:#9dd24c;} .esgTop > ul li:nth-child(2) dl dt{color:#4bcfa0;} .esgTop > ul li:nth-child(3) dl dt{color:#48d0de;} .esgTop > ul li dl dd{font-size:4.8rem;color:#111;font-weight:700;line-height:1;} .esgTop > ul li .esgTxt{font-size:2rem;font-weight:700;color:#333;padding-top:8rem;position:relative;top:-4rem;} .esgTop > ul li .esgTxt:after{width:100%;height:3.2rem;content:'';z-index:0;left:50%;top:-2rem;transform:translateX(-50%);position:absolute;border-radius: 40rem;background: radial-gradient(48.47% 48.47% at 50% 50%, rgba(102, 102, 102, 0.50) 0%, rgba(102, 102, 102, 0.00) 100%);} .numListBox ol{margin-top:8.5rem;counter-reset: step;} .numListBox ol > li{background:#fff;border-radius:2rem;box-shadow: 0 4px 9px 0 rgba(102, 102, 102, 0.15);padding:6.2rem 11rem 3.5rem 3.5rem;position:relative;--badge: clamp(56px, 8vw, 70px);--gap: 26px;--badge-color: #008842;position: relative;min-height: var(--badge);} .numListBox ol > li:nth-child(n+2){margin-top:5.5rem;} .numListBox ol > li dl dt{font-size:2.2rem;color:#222;font-weight:700;letter-spacing:0;} .numListBox ol > li dl dd{font-size:2rem;color:#666;margin-top:0.5rem;letter-spacing:0;} .numListBox ol > li span{position:relative;top:-9rem;font-size:0;} .numListBox ol > li span:before{content: "";position: absolute;left: 0; top: 0;width: var(--badge); height: var(--badge);background: no-repeat center/contain url("data:image/svg+xml;utf8,");filter: drop-shadow(0 4px 2px rgba(0,0,0,.25));} .numListBox ol > li span:after{counter-increment: step;content: counter(step, decimal-leading-zero);position: absolute;left: 2.2rem;top:2rem;font-weight: 700;font-size: calc(var(--badge) * 0.314);line-height: 1;color: #fff;} .ethicsBox ul{display:flex;flex-wrap:wrap;gap:5rem 5%;margin-top:6rem;} .ethicsBox ul li{width:47.5%;border-radius: 2rem;background:#fff url('/images/sub/esg_icon_04.png')no-repeat right 4rem top 4rem / 9rem auto;box-shadow: 0 2px 15px 0 rgba(102, 102, 102, 0.05);padding:15rem 16rem 4rem 4rem;} .ethicsBox ul li:nth-child(2){background-image:url('/images/sub/esg_icon_05.png');} .ethicsBox ul li:nth-child(3){background-image:url('/images/sub/esg_icon_06.png');} .ethicsBox ul li:nth-child(4){background-image:url('/images/sub/esg_icon_07.png');} .ethicsBox ul li:nth-child(5){background-image:url('/images/sub/esg_icon_08.png');} .ethicsBox ul li:nth-child(6){background-image:url('/images/sub/esg_icon_09.png');} .ethicsBox ul li:nth-child(7){background-image:url('/images/sub/esg_icon_10.png');} .ethicsBox ul li:nth-child(8){background-image:url('/images/sub/esg_icon_11.png');} .ethicsBox ul li:nth-child(9){background-image:url('/images/sub/esg_icon_12.png');} .ethicsBox ul li:nth-child(10){background-image:url('/images/sub/esg_icon_13.png');} .ethicsBox ul li:nth-child(11){background-image:url('/images/sub/esg_icon_14.png');} .ethicsBox ul li:nth-child(12){background-image:url('/images/sub/esg_icon_15.png');} .ethicsBox ul li dl dt{font-size:2.2rem;color:#222;font-weight:700;letter-spacing:0;} .ethicsBox ul li dl dd{font-size:2rem;color:#666;margin-top:1.2rem;} .esgCertified{margin-top:15rem;} .esgCertified ul{display:flex;gap:6%;} .esgCertified ul li{width:47%;} .esgCertified ul li .imgBox{background:#fff;border-radius:2rem;border:0.1rem solid #ddd;padding:4.4rem 2rem;text-align:center;} .esgCertified ul li .certifiedText{font-size:2rem;line-height:3.2rem;font-weight:600;color:#666;margin-top:3rem;text-align:center;padding:0 5rem;} .businessWrap .greenBg{padding:10rem 0;} .businessWrap .flexBox h3{font-size:3.6rem;line-height:4.6rem;color:#222;font-weight:600;} .businessWrap .numListBox ol {margin-top:0;} .businessTopText{text-align:center;padding-bottom:10rem;} .businessTopText dt{font-size:5rem;line-height:6rem;font-weight:600;color:#222;letter-spacing:0;} .businessTopText dd{font-size:2.4rem;line-height:3.6rem;margin-top:3rem;color:#666;letter-spacing:0;} .businessTopText dd p{margin-top:1rem;letter-spacing:0;} .autonomyWrap .businessTopText dd p{font-size:2rem;line-height:3rem;color:#444;margin-top:4rem;} .imgTextList ol{display:flex;flex-wrap:wrap;gap:6rem 4%;} .imgTextList ol li{width:47.998%;} .imgTextList ol li .imgBox img{border-radius:2rem;} .imgTextList ol li dl{margin-top:2.5rem;} .imgTextList ol li dl dt{font-size:2.4rem;line-height:3.4rem;color:#222;font-weight:600;letter-spacing:0;} .imgTextList ol li dl dt span{display:block;line-height:2.5rem;font-size:1.5rem;font-weight:700;color:var(--point);} .imgTextList ol li dl dd{font-size:2rem;line-height:3rem;color:#666;font-weight:500;margin-top:2rem;letter-spacing:0;} .imgList ul{display:flex;flex-wrap:wrap;gap:5rem 3.7%;padding-top:13rem;} .imgList ul li{width:30.815%;} .imgList ul li .imgBox img{border-radius:1rem;} .imgList ul li .imgAddText{font-size:2.4rem;color:#222;font-weight:600;line-height:3.4rem;margin-top:1.9rem;} .goalList > div > ul > li:nth-child(n+2){margin-top:4rem;} .goalList ol li dl dt{font-size:2.4rem;color:#222;font-weight:600;margin-bottom:0.3rem;letter-spacing:0;} .goalList ol li dl dd ul li{font-size:2rem;color:#444;line-height:3rem;padding-left:0.9rem;position:relative;letter-spacing:0;} .goalList ol li dl dd ul li:nth-child(n+2){margin-top:0.5rem;} .goalList ol li dl dd ul li:before{width:0.4rem;height:0.4rem;content:'';left:0;top:1.2rem;position:absolute;background:var(--point);border-radius:100%;} .kindList{padding:13rem 0 14.6rem;} .kindList h3{font-weight:700;} .kindList ul{display:flex;flex-wrap:wrap;gap:3rem 0;padding:6rem 5rem;border-radius:2rem;border:0.1rem solid #ddd;} .kindList ul li{width:50%;position:relative;padding:0 0.9rem;font-size:2.2rem;line-height:3.2rem;color:#222;font-weight:500;} .kindList ul li:before{width:0.4rem;height:0.4rem;content:'';left:0;top:1.2rem;position:absolute;background:var(--point);border-radius:100%;} .imgListNew > div > ul > li:nth-child(n+2){margin-top:6rem;} .imgListNew dl dt{font-size:2.6rem;font-weight:700;line-height:3.6rem;} .imgListNew dl dd{font-size:2rem;font-weight:500;line-height:3rem;margin-top:1.2rem;color:#666;} .imgListNew ul li ul{margin-top:4rem;} .imgListNew ul li ul li{display:flex;gap:5rem;} .imgListNew ul li ul li img{width:48%;border-radius:1rem;} /* Location */ .locationWrap .locationBox{visibility: hidden;position:absolute;left:-9999px;top:-9999px;} .locationWrap .locationBox.active{visibility: visible;position:static;} .locationWrap .locationBox > div:nth-of-type(n+2){margin-top:10rem;} .locationWrap .locationBox .locationCont h3{font-size:4rem;color:#111;font-weight:600;margin-bottom:3.5rem;padding-bottom:1rem;border-bottom:0.1rem solid #ddd;} .locationWrap .locationBox .locationCont ul{display:flex;flex-wrap:wrap;gap:3rem 5.2%;margin-bottom:3rem;padding-right:2rem;} .locationWrap .locationBox .locationCont ul li{display:flex;font-size:2rem;color:#333;} .locationWrap .locationBox .locationCont ul li.twoNum a:nth-of-type(n+2){margin-left:1rem;padding-left:1rem;position:relative;} .locationWrap .locationBox .locationCont ul li.twoNum a:nth-of-type(n+2):before{width:0.1rem;height:1.5rem;background:#d9d9d9;left:0;top:50%;transform:translateY(-50%);content:'';position:absolute;} .locationWrap .locationBox .locationCont ul li a{font-size:2rem;color:#333;} .locationWrap .locationBox .locationCont ul li p{margin-right:1.5rem;flex-shrink:0;} .locationWrap .locationBox .locationCont ul li p img{width:3.5rem;} /* 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.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;} #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 .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 */ .step-wrap ul {display:grid;grid-template-columns:repeat(3, 1fr); overflow: hidden;border:1px solid #dadde1;} .step-wrap ul li {position:relative;border-right:0 !important;display:flex;flex-direction:column;justify-content:center;align-items:center;height:8rem;color:#a2a7ab;font-size:2.5rem;font-weight:500;line-height:1.2;background-color:#f4f6f8;} .step-wrap ul li + li {border-left:0;} .step-wrap ul li a {color:#a2a7ab;} .step-wrap ul li span {font-family:'Montserrat', sans-serif;font-size:1.4rem;font-weight:400;} .step-wrap ul li.active {color:#fff;background-color:var(--point);border-color:var(--point);} .step-wrap ul li .menuBtn {position:absolute;top:50%;right:1rem;transform:translateY(-50%);} .step-wrap ul li .menuBtn a{display:block;font-size:1.4rem;font-weight:500;color:#1e398d;background-color:#fff;border-radius:.4rem;border:1px solid #ddd;padding:.4rem .8rem;} .step-wrap ul li .menuBtn a:nth-child(2){color:#666;margin-top:0.5rem;} .step-wrap.active01 ul li{} .step-wrap.active01 ul li:nth-child(1) a {color:#fff;} .step-wrap.active01 ul li:nth-child(1) {color:#fff;background-color:var(--point);border-color:var(--point);z-index:2;} .step-wrap.active01 ul li:nth-child(2) {z-index:1;;} .step-wrap.active01 ul li:nth-child(2)::before {content:"";position:absolute;top:0;right:1rem;transform:rotate(-17deg);width:0.2rem;height:4.3rem;background:#ddd;clip-path:polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)} .step-wrap.active01 ul li:nth-child(2)::after {content:"";position:absolute;bottom:-0.4rem;right:1rem;transform:rotate(17deg);width:0.2rem;height:4.3rem;background:#ddd;clip-path:polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)} .step-wrap.active01 ul li:nth-child(1)::after {content:"";position:absolute;top:0;right:0;transform:translateX(50%);width:6.5rem;height:8rem;clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);background-color:var(--point);} .step-wrap.active02 ul li:nth-child(2) {color:#fff;background-color:var(--point);border-color:var(--point);z-index:2;} .step-wrap.active02 ul li:nth-child(2) a {color:#fff;} .step-wrap.active02 ul li:nth-child(2)::before {content:"";position:absolute;top:-0.1rem;left:0;transform:translateX(-50%);width:6.5rem;height:8.1rem;clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);background-color:#f4f6f8} .step-wrap.active02 ul li:nth-child(2)::after {content:"";position:absolute;top:-0.1rem;right:0;transform:translateX(50%);width:6.5rem;height:8.1rem;clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);background-color:var(--point);} .step-wrap.active03 ul li:nth-child(3) {color:#fff;background-color:var(--point);border-color:var(--point);z-index:2;} .step-wrap.active03 ul li:nth-child(3) a {color:#fff;} .step-wrap.active03 ul li:nth-child(1) {z-index:1;} .step-wrap.active03 ul li:nth-child(1)::before {content:"";position:absolute;top:0;right:1rem;transform:rotate(-17deg);width:0.2rem;height:4.3rem;background:#ddd;clip-path:polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)} .step-wrap.active03 ul li:nth-child(1)::after {content:"";position:absolute;bottom:-0.4rem;right:1rem;transform:rotate(17deg);width:0.2rem;height:4.3rem;background:#ddd;clip-path:polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)} .step-wrap.active03 ul li:nth-child(3)::before {content:"";position:absolute;top:0;left:-1.6rem;;transform:translateX(-50%);width:6.5rem;height:7.96rem;clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);background-color:#f4f6f8} .sub-title {display:flex;justify-content:space-between;align-items:center;margin:4rem 0 .8rem;} .sub-title h4 {color:#231f20;font-size:2.5rem;font-weight:600;} .sub-title .guide {color:#666;font-size:1.7rem;} .sub-title .guide::before {content:"* ";color:#ed1c24;} .radio-field .radio-item input[type=checkbox] + label {display:inline-flex;align-items:center;font-size:1.6rem;gap:.6rem;} .radio-field .radio-item input[type=checkbox] + label:before {content:"";width:2rem;height:2rem;border:1px solid #ddd;} .radio-field .radio-item input[type=checkbox]:checked + label:before {border-color:var(--point);background:url("/images/sub/checked-ico.svg") no-repeat center center/cover;} .etc_clause .logo img{max-width:20rem} .pw-input-wrap {position:relative;display:inline-flex;align-items:center;} .pw-toggle {position:absolute;right:0.8rem;background: transparent;border:0;padding:0.6rem;cursor:pointer;display:grid;place-items:center;border-radius:6px;} .pw-toggle {padding:0;margin:0;} .pw-toggle svg {display:block;width:3.4rem;height:3.4rem;} @media only screen and (max-width : 1780px){ /* ABOUT COMPANY */ #mainAbout .inConts{padding:0 2rem;} .organizationWrap .organizationBottom ul li dl{display:block;padding:2rem 1rem;} .organizationWrap .organizationBottom ul li dl dd{margin:1rem 0 0 0;padding-left:1.5rem;} .organizationWrap .organizationBottom ul li dl dd br{display:none;} } @media only screen and (max-width : 1650px){ .esgCertified ul li .certifiedText br{display:none;} } @media only screen and (max-width : 1500px){ /*[s] Main Style */ #mainVisual .vTxtArea{max-width:none; margin-left:0; left:0;} #mainIntro .introBr{display:none;} /*[e] Main Style */ /*[s] Sub Style */ .flexCont > h3{width:35rem;} .aboutIntro > ul, .aboutMotto ul, .aboutVision > div{width:calc(100% - 35rem);} .esgTop > ul{gap:0 3%;} .esgTop > ul li{width:31.5%;} .ethicsBox ul li{padding:12rem 3rem 4rem;background-size:7rem;} /*[e] Sub Style */ } @media only screen and (max-width : 1240px){ /* Location */ /* ABOUT COMPANY */ #mainAbout .inConts > div{display:block;} #mainAbout dl{width:100%;} #mainAbout ul{width:100%;margin-top:5rem;} #mainAbout ul li{width:48%;} /* 사업소개 */ #mainBusiness .inConts ul li{width:15% !important;} #mainBusiness .inConts ul li.active{width:40% !important} #mainBusiness .inConts ul li.active a > div p{font-size:3rem;} #mainBusiness .inConts ul li.active{padding:0 4rem 4rem;} #mainBusiness .inConts ul li a > p{font-size:2rem;} /* ESG경영, 기술현황, 견적문의 */ #mainLink ul li a{padding:0 2rem 5rem;} /* 보도자료,오시는 길 */ #mainBoard .inConts .releaseBox ul li{padding:3.5rem 2rem 4.2rem;} .aboutIntro > ul li dl dt{width:24rem;} .organizationWrap .organizationBottom ul:before{width:calc(100% - 22.5%);} .kindList ul li{width:100%;} } @media only screen and (max-width : 1300px){ .scroll_info{display:block;} .scrollTb{width:100%; padding-bottom:2rem; display:block; overflow:hidden; overflow-x:scroll;} .scrollTb>*{width:120rem !important;} /*[s] Main Style */ /*[e] Main Style */ .esgTop > ul{flex-wrap:wrap;gap:7rem 2%;justify-content:center;} .esgTop > ul li{width:49%;} /*[s] Layer Style */ /*[e] Layer Style */ } @media only screen and (max-width : 1024px){ /*[s] All Style */ .wideFrame.h740{height: 0; padding-bottom: 56.25%;} .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;} #mainVisual .vTxt .ii.title{font-size:2.3rem;line-height:3.3rem;} #mainVisual .vTxt .ii.text{font-size:4rem;line-height:5rem;} /* 메인 상단 */ #mainIntro:after{background-position:right bottom;top:auto;bottom:0;} /* 사업소개 */ #mainBusiness .inConts ul{flex-wrap:wrap;gap:2rem 2%;} #mainBusiness .inConts ul li:nth-child(1).active, #mainBusiness .inConts ul li:nth-child(1){width:100% !important;} #mainBusiness .inConts ul li{width:49% !important;height:35rem;border-radius:2rem !important;padding:3rem !important;} #mainBusiness .inConts ul li.active{width:49% !important;} #mainBusiness .inConts ul li a{flex-direction:column !important;align-items: center !important;justify-content: center !important;background-position:right bottom !important} #mainBusiness .inConts ul li a > p{display:block !important;font-size:3rem;} #mainBusiness .inConts ul li a > div{width:auto;position:absolute !important;display:block;} #mainBusiness .inConts ul li a > div p{display:none !important;} /* ESG경영, 기술현황, 견적문의 */ #mainLink ul{display:block;} #mainLink ul li{width:100%;height:35rem;position:relative;} #mainLink ul li a{padding:0 1.5rem 3.5rem;} #mainLink ul li a dl p{position:absolute;right:1.5rem;bottom:3.5rem;} #mainLink ul li a dl p img{width:6rem;} #mainLink ul li dl dd{font-size:2.6rem;} /* 보도자료, 오시는 길 */ #mainBoard .inConts{flex-wrap:wrap;gap:8rem;} #mainBoard .inConts > div{width:100% !important;} #mainBoard .inConts .releaseBox .releaseTop{display:block;text-align:right;} #mainBoard .inConts .releaseBox .releaseTop .mainTitle{text-align:left;} #mainBoard .inConts .releaseBox .releaseTop a{width:31rem;height:7.5rem;font-size:2.4rem;margin:2rem 0 3rem auto;} #mainBoard .inConts .releaseBox ul li dl dt{font-size:3rem;} #mainBoard .inConts .releaseBox ul li dl dd{font-size:2.6rem;} #mainBoard .inConts .releaseBox ul li > a > p{font-size:2.4rem;} /*[e] Main Style */ /*[s] Sub Style */ .flexCont{flex-wrap:wrap;gap:5rem;} .flexCont > h3{width:100%;} .aboutIntro > ul, .aboutMotto ul, .aboutVision > div{width:100%;} .aboutIntro > ul li{padding:3.6rem 1rem;} .aboutIntro > ul li dl dt{width:16rem;} .aboutIntro > ul li dl dt span{margin-right:0;} .aboutIntro > ul li dl dd{width:calc(100% - 16rem);} .flexBox{display:block;} .flexBox h3{margin-bottom:2rem;} .flexBox > div{width:100%;} .esgTop > ul li{width:100%;} .esgTop > ul li .imgBox{height:15rem;} .esgTop > ul li .imgBox:after{width:calc(100% + 23rem);} .esgTop > ul li .imgBox img{width:8rem;} .esgTop > ul li dl{padding:4rem 2rem 5rem;} .numListBox ol > li{padding:6rem 3rem 3rem 3rem;} .numListBox ol > li span:before{width:8rem;height:8rem;} .numListBox ol > li span:after{left:2.44rem;top:2.5rem;} .ethicsBox ul li{width:100%;} .esgCertified ul{display:block;} .esgCertified ul li{width:100%;} .esgCertified ul li:nth-child(n+2){margin-top:5rem;} .esgCertified ul li .imgBox img{width:75%;} .imgList ul{gap:4rem 4%;} .imgList ul li{width:48%;} .businessWrap .numListBox ol {margin-top:8.5rem;} /* 견적문의 */ .contactBox ul{flex-wrap:wrap;gap:3rem} .contactBox ul li{width:100%;flex:none;} .organizationWrap .organizationBottom ul{flex-wrap:wrap;padding-top:0;gap:5rem;} .organizationWrap .organizationBottom ul:before{display:none;} .organizationWrap .organizationBottom ul li:first-child:before{display:none;} .organizationWrap .organizationBottom ul li{width:100%;flex:none;} /* 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 */ .step-wrap.active03 ul li:nth-child(3)::before{top:-0.08rem;height:7.98rem;} } @media only screen and (max-width : 840px){ .step-wrap.active03 ul li:nth-child(3)::before{top:-0.19rem;height:8.07rem;} /*[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;} .radio-field .radio-item input[type=checkbox] + label{font-size:2rem;} h4.bul{font-size:3rem;} /*[e] All Style */ /*[s] Main Popup Style */ .hd_pops{left:2rem !important; right:2rem !important;} .hd_pops_con{} #popLayer #moPopArea .moPop{max-width:90%;} #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>*{height:8rem; font-size:2rem;} #popLayer .slick-dots{bottom:10rem;} #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 */ /* visual */ #main-visual, #main-visual .main-slider, #main-visual .main-slider .slick-slide, #main-visual .main-slider .slide-media, #main-visual .main-slider .mobile_in{height:70vh !important;} #main-visual .main-slider .mobile_in{width: 242vw;} #main-visual .main-slider .mobile_in video, #main-visual .main-slider .mobile_in iframe{height:100% !important;} /* visual */ #mVisual .visualRoll .slider img{height:115rem;} #mVisual .vTxtArea{height:115rem; align-items: flex-start;} #mVisual .vTxtArea .vTxt_in{padding:24.5rem 0 0;} #mVisual .vTxt .ii.tit{font-size:2.2rem;} #mVisual .vTxt .ii.title{font-size:5.5rem; line-height:6.5rem;} #mVisual .vTxt .ii.txt{font-size:2.6rem; line-height:1.3;} #mVisual .vTxt .ii.controll{margin-top:11rem;} #mVisual .slick-dots>li+li{margin-left:1.5rem;} #mVisual .slick-dots>li button{width:1.6rem !important; height:1.6rem;} #mVisual .slick-dots>li.slick-active button{width:6.1rem !important;} /* visual */ #mainVisual .visualRoll .swiper-slide>img{height:94rem;} #mainVisual .vTxtArea{padding:10rem 3rem;} #mainVisual .vTxt .ii.title{font-size:2.4rem;line-height:3.4rem;text-align: left;} #mainVisual .vTxt .ii.text{font-size:5rem;line-height:6.5rem;text-align: left;} #mainVisual .vTxt .ii.btns{margin-top:3.3rem;text-align: left;} #mainVisual .vTxt .ii.btns>a{width:23rem; height:7rem; font-size:2.2rem;} #mainVisual .optionBox{max-width:40rem;left:0;transform:none;margin-left:0;} #mainVisual .swiper-pagination .timmer{width:40rem;} #mainVisual .swiper-button{font-size:2rem;} #mainVisual .swiper-pagination>span{font-size:2rem;} #mainVisual .swiper-pagination>span.swiper-pagination-current{font-size:2.6rem;} #mainVisual .swiper-pagination>span.slash{left:3rem;} #mainVisual .swiper-pagination>span.swiper-pagination-total{left:6rem;} #mainVisual .optionBox .swiper-button-prev:before{top:0.6rem;} .mainTitle{font-size:5rem;} #mainIntro{padding-bottom:20rem;} #mainIntro:after{width:50rem;height:33rem;bottom:1.2rem;right:-30%;} #mainIntro dl dd{font-size:2.6rem;line-height:4rem;margin-top:5rem;} .viewBtn a{width:22rem;height:7.5rem;font-size:2.4rem;} /* ABOUT COMPANY */ #mainAbout .inConts > div{padding:9rem 1.5rem;} #mainAbout ul li a{border-radius:1rem;} #mainAbout ul li a img{border-radius:1rem;} /*[e] Main Style */ /*[s] Sub Style */ /* 인사말 */ .greetingWrap{padding-bottom:22rem;} .greetingWrap:after{width:50rem;height:33rem;bottom:5rem;right:-30%;top:auto;} .greetingWrap dl dt{font-size:4rem;line-height:5rem;} .greetingWrap dl dd{font-size:2.4rem;line-height:4rem;margin-top:4rem;} .greetingWrap dl dd div{font-size:3.2rem;} .aboutIntro > ul li dl dt{font-size:2.6rem;} .aboutIntro > ul li dl dd{font-size:2.6rem;} /* 경영이념 */ .managementWrap > p{font-size:2.6rem;line-height:3.6rem;} .contactBox ul li dl dt{font-size:2.4rem;} .contactBox ul li dl dd, .contactBox ul li dl dd a{font-size:2.6rem;} .contactTitle{font-size:2.8rem;} .flexBox .topText{font-size:2.6rem;line-height:3.6rem;} .esgTop > dl dd{font-size:2.6rem;line-height:3.6rem;} .esgTop > ul li dl dt{font-size:2.4rem;} .esgTop > ul li dl dt span{width:4rem;height:4rem;} .esgTop > ul li .esgTxt{font-size:2.6rem;} .numListBox ol > li span:after{font-size:2.4rem;} .numListBox ol > li dl dt{font-size:2.6rem;} .numListBox ol > li dl dd{font-size:2.4rem;} .ethicsBox ul li{padding:7rem 3rem 4rem;} .ethicsBox ul li dl dt{font-size:2.6rem;} .ethicsBox ul li dl dd{font-size:2.4rem;} .esgCertified ul li .certifiedText{font-size:2.4rem;padding:0;line-height:3.4rem;} .businessTopText dd{font-size:2.6rem;line-height:3.6rem;} .autonomyWrap .businessTopText dd p{font-size:2.4rem;line-height:3.4rem;} .imgTextList ol{gap:6rem;} .imgTextList ol li{width:100%;} .imgTextList ol li .imgBox img{width:100%;} .imgTextList ol li dl dt span{font-size:2.2rem;line-height:3.2rem;} .imgTextList ol li dl dt{font-size:2.6rem;line-height:3.6rem;} .imgTextList ol li dl dd{font-size:2.4rem;line-height:3.4rem;} .imgList ul{gap:5rem;} .imgList ul li{width:100%;} .imgList ul li .imgBox img{width:100%;} .imgList ul li .imgAddText{font-size:2.6rem;line-height:3.6rem;} .businessWrap .flexBox h3{font-size:4rem;line-height:5rem;} .goalList ol li dl dt{font-size:2.8rem;line-height:3.8rem;} .goalList ol li dl dd ul li{font-size:2.4rem;line-height:3.4rem;} .goalList ol li dl dd ul li:before{top:1.4rem;} .kindList ul{padding:4rem 3rem;} .kindList ul li{font-size:2.8rem;padding-right:0;} .kindList ul li:before{top:1.3rem;} .imgListNew dl dt{font-size:2.8rem;line-height:3.8rem;} .imgListNew dl dd{font-size:2.4rem;line-height:3.4rem;} .imgListNew ul li ul li{flex-wrap:wrap;gap:4rem;} .imgListNew ul li ul li img{width:100%;} /* 회사연혁 */ .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 !important; text-align: left !important;} .history-area .history-in:before{width: 2rem; height:2rem; left: -0.7rem; top:0.5rem;} .history-area>li:nth-child(odd) .txt_wrap p span{order:0;margin-left:0;} .history-area .txt_wrap .txt_in p span{margin-right:2rem !important;} .history-area .history-in>strong{font-size:3.5rem;} .history-area .txt_wrap{} .history-area .txt_wrap p{padding:0 0 0 0.9rem !important; font-size:2.4rem;justify-content:flex-start !important;} .history-area .txt_wrap p+p{margin-top:1rem;} .history-area>li:nth-child(odd) .txt_wrap p:before{right:auto;left:0;} .history-area .txt_wrap p:before{top:1.7rem;} .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(odd) .history-in:before{left:-0.7rem; right:auto;} .history-area>li:nth-child(odd) .txt_wrap{justify-content: flex-start;} /* Location */ .locationWrap .locationBox .locationCont ul{padding-right:0;} .locationWrap .locationBox .locationCont ul li{width:100%;font-size:2.4rem;} .locationWrap .locationBox .locationCont ul li a{font-size:2.4rem;} .organizationWrap .organizationTop dl{max-width:unset;} .organizationWrap .organizationTop dl dt:before{width:calc(100% + 11rem);right:-31rem;} .organizationWrap .organizationTop dl dd{width:20rem;height:8rem;} .organizationWrap .organizationBottom ul li p:nth-child(2){font-size:2.4rem;} .organizationWrap .organizationBottom ul li dl dt{font-size:2.4rem;} .organizationWrap .organizationBottom ul li dl dd{font-size:2.4rem;} /* 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 */ .privacy-wrap .head{margin-bottom:0;} .privacy-wrap .head h5 {font-size:2.4rem;} .privacy-wrap .conts {padding:2rem;} .privacy-wrap .conts .scroll-table {font-size:2rem;} } @media only screen and (max-width : 640px){ .organizationWrap .organizationTop dl dt:before{width:100%;right:-20rem;} } @media only screen and (max-width : 480px){ .organizationWrap .organizationTop dl dd{width:15rem;height:6rem;} .organizationWrap .organizationTop:before{width:0.2rem;border-width:0.2rem;} .organizationWrap .organizationBottom ul li:before{width:0.2rem;border-width:0.2rem;} .organizationWrap .organizationBottom ul li dl{border-width:0.2rem} }