@charset "UTF-8"; .swiper-pagination-bullet, .swiper-button, #mainVisual .slick-arrow, .talkit_swiper .talkitRoll .swiper-slide img, .btn-show-hide:before, .depth-three>.depth-three_in, .depth-three>.depth-three_in>a, .overview-top:before, .overview-top .img, .overview-top .overview-in, .s-tab>a, .s-tab>a:before, .store-cate>a, .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, .pcl>table th, .pcl>table td{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%;} /*[s] All Style */ /* .bg_thumb_box{width:100%; height:100%; background-repeat: no-repeat; background-position: center center; box-sizing: border-box;} img.bg_thumb{opacity: 0;} img.ofi{width:100%; height:100%; object-fit:cover; object-position: center center; font-family: 'object-fit: cover; object-position: center center;';} .tbLayout{width:100%; display:table;} .tbLayout.fixed{table-layout: fixed;} .tbLayout>*{display:table-cell; vertical-align: middle; box-sizing: border-box;} .tbLayout.vat>.td{vertical-align: top;} .tbLayout.full{width:1920px; margin-left:-960px; position: relative; left:50%;} .nTable{width:100%; border-top:2px solid #333; font-size:0; line-height:0;} .nTable>table{width:100%; border-spacing:0; border-collapse: collapse; table-layout : fixed;} .nTable>table th, .nTable>table td{padding:3rem 4.5rem; background-color: #fff; border-bottom:1px solid #dadada; font-size:1.7rem; 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;} .nTable>table th{height:5rem; padding:0; border-right:1px solid #dadada; font-size:1.8rem; color: #333; text-align: center;} .nTable>table>thead>tr>th{background-color: #f8f9fb; font-weight: 500;} .nTable>table>tbody>tr>th{} .nTable>table .inT{margin-right:2rem; display:inline-block;} .nTable>table .transportation{} .nTable>table .transportation>li{padding-left:7.5rem; position: relative;} .nTable>table .transportation>li+li{margin-top:2rem;} .nTable>table .transportation>li>p{font-weight: bold; font-size:1.8rem; line-height:3rem; color: #333; position: absolute; left:0; top:0;} .nTable>table .transportation>li>dl{display: flex; justify-content: space-between;} .nTable>table .transportation>li>dl+dl{margin-top:1rem;} .nTable>table .transportation>li>dl>dt{padding-right:1rem; white-space: nowrap;} .nTable>table .transportation>li>dl>dt>span{padding:0 0.8rem; background-color: #a2133f; font-size:1.5rem; line-height:3rem; color: #fff; display:inline-block; border-radius:3px;} .nTable>table .transportation>li>dl>dt.g>span{background-color: #48a824;} .nTable>table .transportation>li>dl>dt.b>span{background-color: #205cc0;} .nTable>table .transportation>li>dl>dt.h>span{background-color: #2faebd;} .nTable>table .transportation>li>dl>dt.r>span{background-color: #da352d;} .nTable>table .transportation>li>dl>dd{width:100%;} .nTable>table .transportation>li>dl>dd .inT{margin-right:1.5rem; font-size:1.6rem; line-height:3rem;} .nTable.en>table .transportation>li{padding-left:8.5rem;} .nTable>table .tit{padding-bottom:0.5rem; font-weight: 400; color: #1b1b1b;} .nTable>table ul.bul{} .nTable>table ul.bul>li{font-weight: 300; font-size:1.7rem; line-height:1.6; color: #666;} .nTable>table .icon{width:14.5rem; margin:0 auto; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left;} .nTable>table .icon>dt{width:5.8rem;} .nTable>table .icon .i01{width:3.3rem;} .nTable>table .icon .i02{width:3.8rem;} .nTable>table .icon .i03{width:3.5rem;} .nTable>table .icon .i04{width:2.7rem;} .nTable>table .icon .i05{width:3.4rem;} .nTable>table .icon .i06{width:3.6rem;} .nTable.small{margin-top:1.5rem; border:1px solid #2f3334; overflow:hidden;} .nTable.small>table{width:calc(100% + 3px); margin:-1px; background-color: #bcbcbc; border-spacing:1px;} .nTable.small>table th, .nTable.small>table td{padding:10px; border:none; font-weight: 400; font-size:15px; line-height:20px; color: #595959; text-align: center;} .nTable.small>table>thead>tr>th{background-color: #e9e9e9; font-size:16px; color: #262626;} .nTable.small>table>tbody>tr>th{width:auto; border-right:none;} .nTable +.nTable{margin-top:40px;} .tabDepth{width:100%; margin-bottom:35px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden;} .tabDepth>a{width:19rem; height:46px; background-color: #fdfdfd; border:1px solid #e2e2e2; font-size:18px; line-height:1.2; color: #737373; display:inline-block; vertical-align: top; box-sizing: border-box;} .tabDepth>a+a{margin-left:-1px;} .tabDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .tabDepth>a:hover, .tabDepth>a.active{background-color: #1b54aa; border-color:#1b54aa; color: #fff; z-index:2;} .depth3{width:100%; margin-bottom:70px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden; position: relative;} .depth3:before{content: ""; width: 100%; height: 1px; background-color: #b0b0b0; display: inline-block; position:absolute; left: 0; top:50%;} .depth3>a{width:260px; height:54px; min-height:5.4rem; background-color: #1952a7; border:1px solid #0c3879; font-size:19px; line-height:1.2; color: #fff; display:inline-block; vertical-align: top; box-sizing: border-box; position: relative; z-index:2;} .depth3>a+a{margin-left:-1px;} .depth3>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%); word-break:keep-all; word-wrap:break-word;} .depth3>a>span:before{content: ""; width: 0; height:2.1rem; margin-top:0.2rem; background:url("/images/bul_d3.png") no-repeat left top; background-size: 2.1rem; display: inline-block; vertical-align: top; position: relative; left:-3.1rem; opacity: 0;} .depth3>a:hover, .depth3>a.active{background-color: #0091db; border-color:#0086cb; z-index:3;} .depth3>a:hover>span:before, .depth3>a.active>span:before{width: 3.1rem; left:0rem; opacity: 1;} .lastDepth{width:100%; margin-bottom:50px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden; display: flex; justify-content: space-between; } .lastDepth>a{width:100%; height:60px; background-color: #fff; border:1px solid #d3d3d3; font-size:18px; line-height:1.2; color: #666; display:inline-block; vertical-align: top; box-sizing: border-box;} .lastDepth>a+a{margin-left:-1px;} .lastDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .lastDepth>a:hover, .lastDepth>a.active{background-color: #f192a6; border-color:#f192a6; color: #fff; z-index:2;} .lastDepthConts{font-size:0; line-height:0; display:none; overflow:hidden;} .groupTit{padding-bottom:3.5rem;} .groupTit .step{padding-bottom:1rem; font-weight: bold; font-size:2.2rem; line-height:1; color: #23abaf;} h4.txt{font-weight: bold; font-size:2.6rem; line-height:1; color: #1b1b1b;} .nTxt{padding-top:2.5rem; font-size:1.7rem; line-height:2.6rem; color: #888;} ul.star{} ul.star>li{padding-left:2.2rem; font-size:1.7rem; line-height:3.2rem; color: #666; position: relative;} ul.star>li:before{content: "※"; position:absolute; left: 0.4rem; top:0px;} ul.etc{} ul.etc>li{padding-left:3.3rem; font-size:1.7rem; line-height:3.2rem; color: #666; position: relative;} ul.etc>li:before{content: attr(data-title); position:absolute; left: 0; top:0px;} .wideFrame{height: 0; padding-bottom: 56.25%; position: relative;} .wideFrame>video, .wideFrame>iframe{width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .admGo{font-size:0; line-height:0; position: relative; z-index:7;} .admGo>a{padding:10px 20px; background-color:#f00; font-size:16px; line-height:1.2; color:#fff; display:inline-block; position:absolute; left:0; bottom:0;} .admGos{padding:0.5rem 1rem; background-color:#f00; font-size:1.6rem; line-height:1.2; color:#fff; display:inline-block; position: absolute; right:0; top:0; z-index:7;} .arrBtn{padding:0 1.8rem; border:0.2rem solid #fff; font-size:16px; line-height:4rem; color: #fff; display:inline-block; border-radius:99px;} .arrBtn>span{padding-right:6rem; background: url("/images/main/arr_mBtns_w.png") no-repeat right center; background-size:3.1rem; display:inline-block;} .arrBtn.black{border-color:#333; color: #333;} .arrBtn.black>span{background-image: url("/images/main/arr_mBtns.png");} h4{font-weight: 600; font-size:3rem; line-height:1.2; color: #222;} *+h4{margin-top:19rem;} h4+*{margin-top:2.5rem;} h5{font-weight: 600; font-size:2rem; line-height:2.8rem; color: #222;} *+h5{margin-top:3rem;} .information-ol+h5, h5.mt{margin-top:9rem;} h5+*{margin-top:3rem;} .category-top{width:calc(100% + 1rem); margin:5rem 0 5rem -0.5rem; font-size:0; line-height:0; text-align: center; display:block; position: relative; overflow:hidden; overflow-x:auto;} .category-top>ul{display: flex; justify-content: flex-start;} .category-top>ul>li{margin:0.5rem; display:inline-block; vertical-align: top; position: relative;} .category-top>ul>li a{height:4.5rem; padding:0 2rem; background-color: #eee; font-weight: 600; font-size:1.8rem; line-height:1.4; color: #222; display:table; white-space: nowrap; border-radius:99px;} .category-top>ul>li a>span{display:table-cell; vertical-align: middle; word-break:keep-all; word-wrap:break-word;} .category-top>ul>li a.active, .category-top>ul>li:hover a{background-color:#222; color:#fff;} .category-top>ul>li a.active{font-weight: 500;} .category-txt{width:100%; margin:-1rem 0 5rem 0; font-size:0; line-height:0; position: relative; overflow:hidden; overflow-x:auto;} .category-txt>ul{display: flex; justify-content: flex-start;} .category-txt>ul>li{margin:1rem 6rem 1rem 0; display:inline-block; vertical-align: top; position: relative;} .category-txt>ul>li a{font-weight: 500; font-size:1.8rem; line-height:1.2; color: #222; display:inline-block; white-space: nowrap;} .category-txt>ul>li a>span{} .category-txt>ul>li a.active, .category-txt>ul>li:hover a{color:var(--point);;} .category-txt>ul>li a.active{} .category-tab{width:100%; height:6rem; margin:7rem 0 5rem; font-size:0; line-height:0; text-align: center; position: relative;} .category-tab>.category-tab_in{position: relative;} .category-tab ul{width:100%; margin:0 auto; background-color: #636772; display: flex; justify-content: center; border-radius:99px;} .category-tab ul>li{flex:1 1 25%; display:inline-block; vertical-align: top; position: relative;} .category-tab ul>li a{width:100%; height:6rem; font-weight: 600; font-size:2rem; line-height:1.2; color: #fff; white-space: nowrap; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius:99px;} .category-tab ul>li a>span{} .category-tab ul>li a.active, .category-tab ul>li:hover a{background-color: #bffa55; color: #222;} .category-tab ul>li a.active{} .category-tab.fixed{transform: inherit !important; transition-delay: inherit !important; transition-duration:inherit !important;} .category-tab.fixed .category-tab_in{width:100vw; background-color: #636772; position: fixed; left:0; top:9rem; z-index:10;} .category-tab.fixed ul{max-width:120rem; border-radius:0;} .category-tab.fixed ul>li a{border-radius:0;} ul.bul{} ul.bul>li{padding-left:1rem; font-size:1.7rem; line-height:2.5rem; color: #222; position: relative;} ul.bul>li+li{margin-top:0.5rem;} ul.bul>li:before{content: "·"; position:absolute; left: 0; top:0px;} .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:2rem 0; font-size:0; line-height:0; position: relative; display:none;} .scroll_info:before{content:"← scroll →"; margin-top:-1rem; font-size:2rem; line-height:1; color: #ff0000; display:inline-block; position: absolute; left:44%; top:50%; 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;} .wideKakao{width: 100%; margin: 0 auto; position: relative;} .wideKakao>.root_daum_roughmap{width: 100%; height:58rem;} .wideKakao>.root_daum_roughmap .wrap_map{width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .wideKakao .hide {display: none;} h5.txt{margin-bottom:2.2rem; font-weight: bold; font-size:2.2rem; line-height:1.2; color: #222;} *+h5.txt{margin-top:10rem;} h5.txt.recruitment{margin:4rem 0 1.3rem;} ul.bul{} ul.bul>li{padding-left:1.4rem; font-weight: 500; font-size:1.8rem; line-height:3rem; color: #666; position: relative;} ul.bul>li:before{content: "ㆍ"; position:absolute; left: 0; top:0px;} .depth3{width:100%; margin-bottom:10rem; display: flex; justify-content: center;} .depth3>a{width:18rem; height:6rem; background-color: #f5f5f5; font-weight: 500; font-size:1.8rem; line-height:1.2; color: #999; text-align: center; display: flex; align-items: center; justify-content: center; border-radius:0.5rem;} .depth3>a+a{margin-left:1rem;} .depth3>a:hover, .depth3>a.active{background-color: var(--point); color:#fff;} */ .f0{font-size:0; line-height:0;} .depth-three{width:100%; margin-bottom:7rem; border-bottom:1px solid #abaeb0; font-size:0; line-height:0; text-align: center; overflow:hidden; display: flex; justify-content: center; } .depth-three>a{width:21rem; height:5.4rem; margin: 0 0 -1px -1px; 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; transition: all .3s ease-out; position: relative;} .depth-three>a:is(:hover, .active){background-color:var(--point); border-color:var(--point); z-index:2;} 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);} .wideKakao{width: 100%; margin: 0 auto; position: relative; box-shadow:1rem 1rem 3rem rgba(3,3,3,0.1);} .wideKakao>.root_daum_roughmap{width: 100%; height:60rem;} .wideKakao>.root_daum_roughmap .wrap_map{height:100%; position: absolute; left: -1px; right: -1px; top: -1px;} .wideKakao>.root_daum_roughmap .wrap_btn_zoom{z-index:5 !important;} .wideKakao .hide {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; border:1px solid #333; position:absolute; display:block; overflow:hidden; box-sizing:border-box;} .hd_pops img{width:100%} .hd_pops_con{} .hd_pops_footer{padding:0; background-color:#333; font-size:1.4rem; color:#fff; text-align:left;position:relative} .hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} .hd_pops_footer button{padding:1rem; border:0; color:#fff} .hd_pops_footer .hd_pops_reject{text-align:left} .hd_pops_footer .hd_pops_close{position:absolute;top:0;right:0} #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 */ .b-tn{width:20rem; height:5.4rem; background-color: #ff5400; font-weight: 500; font-size:1.6rem; line-height:1; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; border-radius:99px; box-shadow:1.5rem 1.5rem 1.5rem rgba(0,0,0,0.1);} .b-tn.black{background-color: #000; color: #ccc;} /* 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:96rem !important;} #main-visual .main-slider .mobile_in{} #main-visual .main-slider .mobile_in video, #main-visual .main-slider .mobile_in iframe{width:100% !important; min-height:100%; object-fit: cover; position: absolute; left:0 !important; top:0 !important; transform: translate(0%, 0%);} #main-visual{width:100%; background-color:#000; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden;} #main-visual .main-slider{width: 100%; background-color:#000; 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{-webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; overflow: 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: 1; transition:all .8s ease;} #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 .visual-text-area{position: absolute; left:3rem; right:3rem; top:17rem; bottom:23.5rem; z-index:10;} #main-visual .main-slider .visual-text-area .visual-text{width:100%; max-width:124rem; height:54rem; margin:0 auto; position: relative;} #main-visual .main-slider .visual-text-area .visual-text-in{} #main-visual .main-slider .visual-text-area .ii{line-height:1; color: #fff; left:-100vw; display:block; opacity: 1; position: relative; word-break:keep-all; word-wrap:break-word; white-space: normal; text-shadow:0 0 4px rgba(0,0,0,0.5); transition: all .4s ease;} #main-visual .main-slider .visual-text-area .i01{transition-delay: 0.05s;} #main-visual .main-slider .visual-text-area .i02{transition-delay: 0.1s;} #main-visual .main-slider .visual-text-area .i03{transition-delay: 0.15s;} #main-visual .main-slider .visual-text-area .i04{transition-delay: 0.2s;} #main-visual .main-slider .visual-text-area .i05{transition-delay: 0.25s;} #main-visual .main-slider .visual-text-area .i06{transition-delay: 0.3s;} #main-visual .main-slider .visual-text-area .i07{transition-delay: 0.35s;} #main-visual .main-slider .visual-text-area .i08{transition-delay: 0.4s;} #main-visual .main-slider .visual-text-area .cate{font-family: "Exo 2", sans-serif; font-weight: 600; font-size:1.8rem;} #main-visual .main-slider .visual-text-area .title{margin-top:2rem; font-weight: 700; font-size:7rem;} #main-visual .main-slider .visual-text-area .text{margin-top:3rem; font-weight: 500; font-size:2.5rem;} #main-visual .main-slider .visual-text-area .visual-btn{display: flex; gap:6rem; position: absolute; bottom:0;} #main-visual .main-slider .visual-text-area .visual-btn>a{font-weight: 500; font-size:1.7rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; gap:0.7rem; white-space: nowrap;} #main-visual .main-slider .visual-text-area .visual-btn>a:after{content:"→"; font-family:"SUIT Variable", sans-serif !important;} #main-visual .main-slider .item:not(.one).slick-active{} #main-visual .main-slider .item:not(.one).right{z-index: 2;} #main-visual .main-slider .item:not(.one).slick-active .slide-media{animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);} #main-visual .main-slider .item:not(.one).right .visual-text-area .ii{left:100vw; transition-delay: 0s;} #main-visual .main-slider .item:not(.one).slick-active .visual-text-area .ii{left:0px; opacity:1;} #main-visual .main-slider .visual-text-area .visual-text.end{display: flex; justify-content: flex-end;} #main-visual .main-slider .visual-text-area .visual-text.end .ii{left:auto; right:-100vw;} #main-visual .main-slider .item:not(.one).right .visual-text-area .visual-text.end .ii:not(.visual-btn){left:auto; right:100vw;} #main-visual .main-slider .item:not(.one).slick-active .visual-text-area .visual-text.end .ii:not(.visual-btn){left:auto; right:0;} #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("../img/main/btn_slick_prev.png"); left:100px;} #main-visual .slick-next{background-image: url("../img/main/btn_slick_next.png"); right:100px;} #main-visual .slick-arrow:hover{opacity:1;} #main-visual .controll{width:100%; padding-top:0; position: absolute; left: 0; bottom:16.1458vh; z-index:3; display: flex; flex-direction: row; align-items: center; justify-content: center;} #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:1rem;} #main-visual .controll .auto button{width:27px; height:27px; background:transparent url("/new/images/20241007/btn_slick_pause.png") no-repeat left top/cover; border:none;} #main-visual .controll .auto button.off{background-image:url("/new/images/20241007/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; cursor: pointer;} #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{} @keyframes slideIn { from { filter:blur(15px); transform:scale(1.1); } to { filter:blur(0); transform:scale(1); } } @keyframes slideOut { from { filter:blur(0); transform:scale(1); } to { filter:blur(15px); transform:scale(1.1); } } /* 삼성 */ #mManagement{min-height: 100vh; /* min-height: 100svh; */background-color: #fff; display: flex; align-items: center; justify-content: center;} #mManagement .article{width: 60rem; height: 60rem; display: flex; align-items: center; justify-content: center; background-image: url('/new/images/20241007/bg_motion.jpg'); background-position: center; background-size: cover; text-align: center; border-radius: 50%; box-shadow:3rem 3rem 5rem rgba(0,0,0,0.2);} #mManagement .article .ii{text-align: center; opacity: 0; transform: translateY(6rem);} #mManagement .article .motion-logo>span{display:inline-block; position: relative;} #mManagement .article .motion-logo img{height:6.9rem; filter: drop-shadow(0.5rem 0.5rem 0.5rem rgba(0,0,0,0.2)); opacity: 0;} #mManagement .article .motion-logo img[src="/new/images/20241007/logo_motion_w.png"]{position: absolute; left:0; top:0; opacity: 1;} #mManagement .article .motion-txt{font-weight: 300; font-size:4rem; line-height:5rem; color: #fff; text-shadow:0.5rem 0.5rem 0.5rem rgba(0,0,0,0.2); white-space: nowrap;} #mManagement .article .motion-logo+.motion-txt{margin-top:4.5rem;} /* #mManagement .article .mManagement_en{font-size: 1.8rem; line-height: 2rem; color: rgba(255,255,255,0.3); font-weight: bold; font-family: var(--exo); margin-bottom: 2rem; opacity: 0; transform: translateY(6rem);} #mManagement .article .mManagement_kr{margin-bottom: 2rem; font-weight: bold; font-size: 5.5rem; line-height: 6.5rem;color: #fff; transform: translateY(6rem); opacity: 0;} #mManagement .article .text{font-size: 2rem; line-height: 1.5; color: #fff; position: relative; transform: translateY(6rem); opacity: 0;} #mManagement .article .mViewMore{margin-top: 6rem; width: 7rem; height: 3.5rem; display: inline-block; font-size: 1.8rem; line-height: 2rem; color: #fff; font-weight: 550; text-align: center; border-bottom: 0.4rem solid #fff;transform: translateY(6rem); opacity: 0;} */ /* talkit */ .mainTitle{margin-bottom:8rem; text-align: center;} .mainTitle .text{font-weight: 500; font-size:2rem; line-height:1.5; color: #010101;} .mainTitle .title{font-weight: bold; font-size:4rem; line-height:1.4; color: #010101;} .mainTitle *+.title{margin-top:1rem;} .mainTitle.w .text, .mainTitle.w .title{color: #fff;} #mainMiddle{width:100%; background-color: #fff; padding:12rem 3rem 27rem; position: relative;} #mainMiddle .inConts, #mainDown .inConts{} .talkit_swiper{width:726px; height:362px; margin:0 auto; padding:0.3rem 0 0 0.3rem; position: relative;} .talkit_swiper .talkit_swiper-bg{width: 100%; height: 100%; background: url('/new/images/20241007/bg_swiper_phone.png') no-repeat center center; filter: drop-shadow(0 0 2rem rgba(0,0,0,0.2)); display: inline-block; position:absolute; left: 0; top:0px; z-index:3; border-radius:4.5rem;} .talkit_swiper:after{content: ""; width: 100%; height: 4.9rem; background: url('/new/images/20241007/bg_swiper_phone_shadow.png') no-repeat center center/contain; display: inline-block; position:absolute; left: 0; top:100%; z-index:3;} .talkit_swiper .talkitRoll{white-space: nowrap;} .talkit_swiper .talkitRoll .swiper-slide{width:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; display:inline-block; vertical-align: top;} .talkit_swiper .talkitRoll .swiper-slide img{transform:scale(0.8); filter: drop-shadow(3rem 3rem 5rem rgba(0,0,0,0.1)); border-radius:4.5rem;} .talkit_swiper .talkitRoll .swiper-slide.swiper-slide-active img{transform:scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0));} .talkit_swiper .swiper-button{width:5.5rem; height:5.5rem; margin-top:-2.8rem; background-color: #535252; font-family:'SUIT-Regular'; font-weight: bold; font-size:2.4rem; line-height:1; color: rgba(255,255,255,1); letter-spacing: 2px !important; text-align: center; position: absolute; top:50%; z-index:4; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius:99px;} .talkit_swiper .swiper-button-prev{left:-2.8rem;} .talkit_swiper .swiper-button-next{right:-2.8rem;} .talkit_swiper .swiper-button:hover{color: rgba(255,255,255,1);} .talkit_swiper .swiper-controll{width:100%; text-align: center; position: absolute; left:0; top:calc(100% + 11rem); z-index:7; display: flex; align-items: center; justify-content: center; gap:0 2rem;} .talkit_swiper .swiper-pagination{display: flex; align-items: center; gap:0 2rem;} .talkit_swiper .swiper-pagination-bullet{width:8px; height:8px; background-color: #ccc; border-radius:99px; cursor: pointer;} .talkit_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #333;} .talkit_swiper .swiper-btn button{width:9px; height:12px; background:transparent url("/new/images/20241007/btn_swiper_pause.png") no-repeat center center; border:none; pointer;} .talkit_swiper .swiper-btn button.pause{background-image:url("/new/images/20241007/btn_swiper_play.png");} .talkit_info{width:100%; max-width:128rem; margin:11rem auto 0;} .talkit_info .talkit_info_title{font-size:4rem; line-height:5.8rem; color: #000;} .talkit_info .talkit_info_list{width:100%; margin-top:7.5rem; border:1px solid #e6e6e6; display: flex;} .talkit_info .talkit_info_list>li{width:25%; height:64rem; background-color: #fafdfb; display: flex; flex-wrap: wrap; align-items: center;} .talkit_info .talkit_info_list>li .photo{width:100%; height:50%;} .talkit_info .talkit_info_list>li .photo img{width:100%; height:100%; max-width:none; object-fit:cover;} .talkit_info .talkit_info_list>li .text{width:100%; height:50%; padding:0 2rem; text-align: center; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative;} .talkit_info .talkit_info_list>li .text:before{content: ""; width: 0; height: 0; margin-left:-1.9rem; border-top:0 solid #fafdfb; border-bottom:2.2rem solid #fafdfb; border-left:1.9rem solid transparent; border-right:1.9rem solid transparent; display: inline-block; position:absolute; left:50%; top:-2.2rem;} .talkit_info .talkit_info_list>li .text>dt{font-weight: bold; font-size:2.4rem; line-height:3.2rem; color: var(--point);} .talkit_info .talkit_info_list>li .text>dd{width:100%; margin-top:1.5rem; font-size:1.8rem; line-height:2.2rem; color:#333;} .talkit_info .talkit_info_list>li:nth-child(even) .photo{order:2;} .talkit_info .talkit_info_list>li:nth-child(even) .text{order:1;} .talkit_info .talkit_info_list>li:nth-child(even) .text:before{border-top-width:2.2rem; border-bottom-width:0; top:auto; bottom:-2.2rem;} /* down */ #mainDown{width:100%; height:30rem; background-color:#eff5fd; display: flex; align-items: center; justify-content: center; position: relative;} #mainDown .inConts{display: flex; justify-content: space-between;} #mainDown .mainDown_text{width:calc(100% - 41rem); display: flex; align-items: center;} #mainDown .mainDown_text>dt{line-height:1.4; color: #333;} #mainDown .mainDown_text>dt>p{font-weight: 500; font-size:2rem;} #mainDown .mainDown_text>dt>div{margin-top:0.5rem; font-weight: 500; font-size:4rem; line-height:5rem;} #mainDown .mainDown_text>dt>span{margin-top:1.5rem; font-size:1.7rem; line-height:1.4; display:block;} #mainDown .mainDown_text>dd{margin-left:14%;} #mainDown .mainDown_text>dd img{height:20.3rem;} #mainDown .mainDown_btns{display: flex; align-items: center; justify-content: center; gap:1rem;} #mainDown .mainDown_btns>.b-tn{width:16rem;} #mainDown .mainDown_btns>.b-tn:nth-of-type(1){background: linear-gradient(to right, rgba(255,234,118,1) 0%,rgba(255,215,98,1) 25%,rgba(255,215,98,1) 50%,rgba(249,255,32,1) 75%,rgba(212,255,18,1) 100%); border-color:transparent; color: #000 !important;} #mainDown .mainDown_btns>.b-tn:nth-of-type(2){background: linear-gradient(to right, rgba(186,197,255,1) 0%,rgba(186,197,255,1) 45%,rgba(146,144,255,1) 80%,rgba(159,136,255,1) 100%); color: #000 !important;} /* 생기 */ .scrollmagic-pin-spacer.h{width:1px !important; height: 1px !important; min-height::0; padding:0 !important; opacity: 0; visibility: hidden; overflow: hidden; position: absolute !important; z-index:-999;}/* width:1px !important; height: 1px !important; min-height::0; padding:0 !important; opacity: 0; visibility: hidden; overflow: hidden; position: absolute !important; z-index:-999; */ #main-cont06, #main-cont06_m{width:100%; height:100vh; background:url('/new/images/20241007/bg_main06.jpg') no-repeat center center/cover; display: flex; align-items: center; justify-content: center; overflow:hidden;} #main-cont06:before, #main-cont06_m:before{content: ""; width: 100%; height: 14rem; position:absolute; left: 0; bottom:0px; z-index:3; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.5+100;Neutral+Density */ background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5))); background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: -moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .main-cont06 .partner-area{width:100%; max-width:170rem; padding:0 3rem; display: flex; align-items: center; justify-content: space-between;} .main-cont06 .text-area{width:47.727%;} .main-cont06 .text-area .title{font-weight: bold; font-size:4rem; line-height:5rem; color:#fff;} .main-cont06 .text-area .tit{margin-top:2rem; font-weight: 500; font-size:2rem; line-height:3rem; color:#fff;} .main-cont06 .text-area .text{margin-top:1rem; font-size:1.7rem; line-height:2.7rem; color:#fff;} .main-cont06 .text-area .btn{margin-top:5rem;} .main-cont06 .text-area .btn>a{font-weight: 600; font-size:1.6rem; line-height:1; color: rgba(255,255,255,0.9); display: flex; align-items: center; gap:1rem;} .main-cont06 .text-area .btn>a .f_arr{width:1.8rem; height:1.8rem; border:0.1rem solid rgba(255,255,255,0.85); font-weight: 400; font-size:1.2rem; line-height:1.7rem; text-align: center; letter-spacing: 1.5px; border-radius:99px; display: inline-block;} .main-cont06 .img-area-pc{width:47.159%; height:100vh; display: flex; align-items: flex-start; justify-content: space-between; gap:5rem;} .main-cont06 .img-area-pc .pin-img-list{width:50%;} .main-cont06 .img-area-pc .pin-img-list img{image-rendering: pixelated;} .main-cont06 .img-area-pc .pin-img-list dd{padding:2.2rem 0 3rem; font-weight: 500; font-size:2rem; line-height:1.2; color: #fff; text-align: center; opacity:0; display:none !important;} .main-cont06 .img-area-pc .pin-img-list dl+dl{margin-top:9rem;} .main-cont06 .img-area-pc .pin-img-list.l{padding-top:19.8113vh;} .main-cont06 .img-area-pc .pin-img-list.r{padding-top:52.8302vh;} #main-cont06_m, .main-cont06 .img-area-tm{display:none;} /* benefit */ #main-benefit{padding:15rem 0; background-color: #fff;} #main-benefit>.inConts>dl{color: #000; text-align: center;} #main-benefit>.inConts>dl>dt{font-weight: bold; font-size:4rem; line-height:5rem;} #main-benefit>.inConts>dl>dd{margin-top:2rem; font-weight: 500; font-size:2rem; line-height:3rem;} #main-benefit .swiper-button{font-family:'SUIT Variable'; font-weight: bold; font-size:1.8rem; line-height:1; color: #fff; cursor: pointer;} #main-benefit .swiper-button:hover{color: #9dcb3b;} #main-benefit .main-benefit{width:100%; margin-top:3.5rem; padding-bottom:5rem; position: relative;} #main-benefit .main-benefit-swiper{overflow: visible;} #main-benefit .main-benefit-roll{display: flex; justify-content: flex-start;} #main-benefit .swiper-slide{width:32rem; min-width:32rem; height:38rem; margin-right:2rem; padding:1.6rem 1.9rem 0; background-color: #fff; border:1px solid #e6e6e6; border-radius:1rem; box-shadow:3rem 3rem 5rem rgba(0,0,0,0.2);} #main-benefit .swiper-slide p{width:100%; height:13.5rem; display: flex; align-items: center; justify-content: center;} #main-benefit .swiper-slide dl{width:100%;} #main-benefit .swiper-slide dl>dt{min-height:11.1rem; padding-bottom:1.2rem; border-bottom:1px solid #e6e6e6; font-weight: bold; font-size:2rem; line-height:2.8rem; color: #000; position: relative;} #main-benefit .swiper-slide dl>dt:before{content: "무상지원"attr(data-num); width:9rem; height:3rem; margin-bottom:1.2rem; background-color: #ff5400; font-weight: bold; font-size:1.4rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:999px; white-space: nowrap;} #main-benefit .swiper-slide dl>dd{margin-top:1.2rem; font-size:1.6rem; line-height:2.4rem; color: #666;} #main-benefit .swiper-pagination-progressbar{width:100%; height:1.1rem; background-color:#e6e6e6; position: absolute; left:0; top:auto; bottom:0; border-radius:99px; z-index:2 !important; overflow: hidden;} #main-benefit .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{width: 100%; height: 100%; background-color:#666; border-radius:99px; position: absolute; left: 0; top: 0; transform-origin: left top;} #main-benefit .main-benefit-btn{margin-top:5rem; display: flex; align-items: center; justify-content: center;} /*[e] Main Style */ /*[s] Sub Style */ html.sub, html.sub body{background-color: #101010;} /* portfolio */ .has_tag{margin:6rem 0 0 0; font-size:0; line-height:0; text-align:center;} .has_tag>*{height: 3rem; padding: 0 1.5rem; background-color: #fff; border:none; font-weight: 400; font-size:1.4rem; line-height: 1.2; color: #223055; cursor:pointer; border-radius: 99px; display: flex; align-items: center; justify-content: center; white-space: nowrap; transition: all .3s linear;} .has_tag>button:hover{background-color: #c8c8c8; color: #fff;} .has_tag>button.active{background-color: #2572e6; color: #fff;} .sch-box{width:27rem; height: 3rem; padding:0 !important; background-color: #fff; border: 1px solid #fff; font-weight: 400; cursor:pointer; border-radius: 99px; display: inline-flex; align-items: center; white-space: nowrap; box-shadow:0.5rem 0.5rem 1rem rgba(0,0,0,0.1); position: relative; overflow: hidden;} .sch-box input[type=text]{width:calc(100% - 2.8rem); height: 2.8rem; padding: 0; background-color: #fff; border:none; font-weight: 500; font-size:1.4rem; line-height: 2.8rem; color: #000; text-align: center; border-radius: 99px 0 0 99px;} .sch-box .tSch{width:2.8rem; height:2.8rem; padding:0; background-color:transparent; border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:0 99px 99px 0 ;} .sch-box .tSch:before, .sch-box .tSch:after{content: ""; display:inline-block; position:absolute; left:50%; top:50%;} .sch-box .tSch:before{width:1.2rem; height:1.2rem; margin:-1rem 0 0 -1rem; border:2px solid #333; border-radius:99px;} .sch-box .tSch:after{width:0.7rem; height:2px; margin:0.4rem 0 0 0.1rem; background-color: #333; transform:rotate(45deg);} /* .portfolioNum{width: 1400px; margin-top:30px; margin-left: -700px; position: relative; left: 50%; display:none;} .portfolioNum>p>span+span{margin-top:249px;} */ .portfolio-top-new{width: 100%;} .portfolio-top-new .has_tag{margin-top:0 !important; display: flex; flex-flow: row wrap; justify-content: center; gap:1rem;} .portfolio-list{width: 100%; margin-top: 30px;} .portfolio-list ul.list{width:calc(100% + 2.3438vw); padding:0 !important; display: flex; flex-flow: row wrap; /*gap:4.4271vw 2.3438vw;*/} .portfolio-list ul.list>li{width:calc(100% / 5); padding:0 2.3438vw 4.4271vw 0; display:block; vertical-align: top; position: relative; overflow:hidden;} .portfolio-list ul.list>li>a{color: #fff; display:block;} .portfolio-list ul.list>li>a .img{aspect-ratio:292/218; border-radius:1rem; overflow: hidden; position: relative;} .portfolio-list ul.list>li>a .img:before{content: "\2197"; width: 100%; height: 100%; padding: 1rem; background-color: rgba(0,0,0,0.5); font-weight: 500; font-size:14px; display: grid; justify-content: end; position:absolute; left: 0; top:0px; box-sizing: border-box; transition: all .3s ease-out; opacity: 0;} .portfolio-list ul.list>li>a .img img{width:100%; height:100%; object-fit: cover; object-position: center top;} .portfolio-list ul.list>li>a .txt-area{width:100%; margin-top:1.5rem;} .portfolio-list ul.list>li>a .cate{width:100%; display: flex; gap:0.4rem; flex-flow: row wrap;} .portfolio-list ul.list>li>a .cate>span{height:20px; margin-right:6px; padding:0 6px; border:1px solid #fff; font-weight: 300; font-size:12px; line-height:1; display: inline-flex; align-items: center; justify-content: center; border-radius:99px;} .portfolio-list ul.list>li>a .cate>i{height:20px; padding:0; font-style: normal; font-weight: 400; font-size:12px; line-height:1; display: inline-flex; align-items: center;} .portfolio-list ul.list>li>a .title{margin-top:10px; font-weight: bold; font-size:18px; line-height:1.2;} .portfolio-list ul.list>li>a .text{margin-top:8px; font-size:12px; line-height:1.55;} .portfolio-list ul.list>li:hover>a .img:before{opacity: 1;} #wrap.white .has_tag>*:not(form){border: 1px solid #999; font-weight: 500; box-shadow:0.5rem 0.5rem 1rem rgba(0,0,0,0.1);} #wrap.white .has_tag>button:hover{background-color: #c8c8c8; border-color:#c8c8c8;} #wrap.white .has_tag>button.active{background-color: var(--point2); border-color:var(--point2);} #wrap.white .sch-box{border-color:#999;} #wrap.white .portfolio-list ul.list>li>a{color: #333;} #wrap.white .portfolio-list ul.list>li>a .cate>span{border-color:#999; font-weight: 500; font-size:13px;} #wrap.white .portfolio-list ul.list>li>a .text{font-weight: 500; font-size:13px;} /* customer */ .pcl, .opl{width:100%; border-top:1px solid rgba(255,255,255,0.4); font-size:0; line-height:0;} .pcl>table{width:100%; border-spacing:0; table-layout : fixed;} .pcl>table th, .pcl>table td{padding:1.5rem 2rem; border-bottom:1px solid rgba(255,255,255,0.4); font-size:2rem; line-height:1.5; color:#fff; text-align:center; border-collapse:collapse; empty-cells:show; box-sizing: border-box;} .pcl>table th{height:9rem; padding-left:40px; font-size:0; line-height:0; text-align:left; position: relative;} .pcl>table th>*{display:block;} .pcl>table th>strong{font-weight: 100; font-size:2.8rem; line-height:1.3;} .pcl>table .small{padding:1.5rem 1rem;} .pcl>table .small>span{font-weight: 300; font-size:1.6rem; line-height:1.3;} .pcl>table th>i{font-style: normal; font-weight: 300; font-size:2rem; line-height:1.3;} .pcl>table td{font-weight: 300;} .pcl>table tr:hover>*{background-color: #1b1e22; cursor: pointer;} .pcl>table .tag{text-align: right;} .pcl>table .has_tag{margin-top:0.5rem !important; text-align: right;} .pcl>table i.icons{width:10rem; height:4.1rem; border:0.2rem solid #ff5e6d; background-color: #ff5e6d; font-weight: 600; font-size:1.7rem; line-height:1; color: #101010; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius:99px; position: relative;} .pcl>table i.icons[data-title="견적중"]{background-color: #101010; color: #ff5e6d;} .pcl>table i.icons[data-title="입금완료"]{background-color: #ffd05e; border-color:#ffd05e;} .pcl>table i.icons[data-title="작업중"]{background-color: #101010; border-color:#ffb55e; color: #ffb55e;} .pcl>table i.icons[data-title="작업중"]:before{content: ""; width: 16px; height: 100%; background-color: #ffb55e; display: inline-block; position:absolute; left: 0; top:0px; border-radius:99px 0 0 99px;} .pcl>table i.icons[data-title="작업완료"]{background-color: #ffb55e; border-color:#ffb55e;} .customer-top{padding-top:5rem;} .customer-top>p{line-height:1; color: #fff; text-align: center;} .customer-top .tit{font-weight: bold; font-size:4.6rem; letter-spacing: -0.03em;} .customer-top .stit{margin-top:4rem; font-weight: 500; font-size:2.4rem;} .customer-top .txt{margin-top:1.5rem; font-weight: 300; font-size:1.6rem; line-height:2.1rem;} /* customer 2025 */ .pcl-2025{width:100%; border-top:1px solid #000; font-size:0; line-height:0;} .pcl-2025>table{width:100%; border-spacing:0; table-layout : fixed;} .pcl-2025>table th, .pcl-2025>table td{height:11.9rem; padding:1.5rem 2rem; background-color: #f8f8f8; border-bottom:1px solid #e6e6e6; font-size:2rem; line-height:1.5; color:#010101; text-align:center; border-collapse:collapse; empty-cells:show; box-sizing: border-box;} .pcl-2025>table td.days{text-align: center;} .pcl-2025>table td.days strong{font-weight: bold; color: #000; display:block;} .pcl-2025>table td.days strong>span{color: var(--point2);} .pcl-2025>table td.days>span{font-size:0.9em; color: #666;} .pcl-2025>table i.icons{width:10rem; height:4.1rem; background-color: #ff5e6d; border:0.2rem solid #ff5e6d; font-style: normal; font-weight: 600; font-size:1.7rem; line-height:1; color: #101010; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius:99px; position: relative;} .pcl-2025>table i.icons[data-title="견적중"]{background-color: #f8f8f8; color: #ff5e6d;} .pcl-2025>table i.icons[data-title="입금완료"]{background-color: #ffd05e; border-color:#ffd05e;} .pcl-2025>table i.icons[data-title="작업중"]{background-color: #fff; border-color:#ffb55e; color: #ffb55e;} .pcl-2025>table i.icons[data-title="작업중"]:before{content: ""; width: 16px; height: 100%; background-color: #ffb55e; display: inline-block; position:absolute; left: 0; top:0px; border-radius:99px 0 0 99px;} .pcl-2025>table i.icons[data-title="작업완료"]{background-color: #ffb55e; border-color:#ffb55e;} .pcl-2025>table tr:hover>*{background-color: #dab773; font-weight: 600; color: #fff; cursor: default;} .pcl-2025>table tr:hover td.days strong, .pcl-2025>table tr:hover td.days strong>span, .pcl-2025>table tr:hover td.days>span{color: #fff;} .pcl-2025>table tr:hover i.icons{background-color: #dab773; border-color:#fff; color: #fff;} .pcl-2025>table tr:hover i.icons[data-title="견적중"]{background-color: #dab773; color: #fff;} .pcl-2025>table tr:hover i.icons[data-title="입금완료"]{background-color: #dab773; border-color:#fff;} .pcl-2025>table tr:hover i.icons[data-title="작업중"]{background-color: #dab773; border-color:#fff; color: #fff;} .pcl-2025>table tr:hover i.icons[data-title="작업중"]:before{background-color: #fff;} .pcl-2025>table tr:hover i.icons[data-title="작업완료"]{background-color: #dab773; border-color:#fff;} /* onlineConsulting */ #onlineConsulting{width:100%; max-width:1280px; margin:0 auto; font-size:0; line-height:0; position: relative;} #onlineConsulting .ocArea{padding-top:8rem; display: flex; justify-content: space-between; gap:4%;} #onlineConsulting .ocArea select, #onlineConsulting .ocArea input[type=text], #onlineConsulting .ocArea input[type=file], #onlineConsulting .ocArea textarea{width:100%; height:5rem; padding:0 2rem; background-color: #56565a; border:none; font-weight: 400; font-size:1.5rem; line-height:5rem; color: #b7b7b7; box-sizing:border-box; display:inline-block; vertical-align: top;} #onlineConsulting .ocArea select{padding-right:3.4rem; background:#56565a url('/new/images/20241007/bg_select_arr.gif') no-repeat 95% center; font-size:1.5rem; line-height:5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;} #onlineConsulting .ocArea select::-ms-expand{display:none;} #onlineConsulting .ocArea *::-ms-input-placeholder{color:#b7b7b7;} #onlineConsulting .ocArea *::-webkit-input-placeholder{color:#b7b7b7;} #onlineConsulting .ocArea *::-moz-placeholder{color:#b7b7b7;} #onlineConsulting .ocArea>.leftArea{width:32%;} #onlineConsulting .ocArea>.leftArea .infoArea{width:100%; padding:2rem 2.5rem; border:1px solid #333; box-sizing:border-box;} #onlineConsulting .ocArea>.leftArea .text{font-weight: 200; font-size:1.5rem; line-height:1.4; color: #fff; letter-spacing: 0;} #onlineConsulting .ocArea>.leftArea .text>strong{font-weight: 400;} #onlineConsulting .ocArea>.leftArea .text .hello{font-family: 'Noto Serif KR' !important; font-weight: 400; font-size:2rem;line-height:1.3} #onlineConsulting .ocArea>.leftArea .btn{padding-top:2rem; display: flex; flex-flow: row wrap; justify-content: space-between; gap:0.7rem;} #onlineConsulting .ocArea>.leftArea .btn>a{width:100%; height:5rem; border:1px solid #c4d502; font-weight: 400; font-size:1.5rem; line-height:1; color: #c4d502; text-align: center; display: flex; align-items: center; justify-content: center;} #onlineConsulting .ocArea>.leftArea .btn>a+a{border-color:#00fff0; font-size:2rem; color: #00fff0;} #onlineConsulting .ocArea>.rightArea{width:64%; overflow:hidden;} #onlineConsulting .ocArea>.rightArea .formArea{margin:-2rem 0 0 -2rem;} #onlineConsulting .ocArea>.rightArea .formArea .tit{width:100%; margin:2rem 0 0 2rem; font-weight: 300; font-size:1.8rem; line-height:1; color: #fff; box-sizing:border-box;} #onlineConsulting .ocArea>.rightArea .formArea .fileBg{width:100%; height:5rem; margin:2rem 0 0 2rem; padding:0 2rem; background-color: #56565a; border:none; font-weight: 400; font-size:1.5rem; line-height:5rem; color: #b7b7b7; box-sizing:border-box; display:inline-block; vertical-align: top; position: relative; cursor: pointer;} #onlineConsulting .ocArea>.rightArea .formArea input[type=file]{opacity: 0; position: absolute; left:0; top:0;} #onlineConsulting .ocArea>.rightArea .formArea input[type=text]{max-width:calc(50% - 2rem); margin:2rem 0 0 2rem;} #onlineConsulting .ocArea>.rightArea .formArea textarea{height:130px; margin:2rem 0 0 2rem; padding:2rem; line-height:1.4;} #onlineConsulting .ocArea>.rightArea .formArea .box{margin:2rem 0 0 2rem; padding:0 2rem 2rem 0; border:1px solid #00fff0; display:block;} #onlineConsulting .ocArea>.rightArea .formArea .box input[type=text]{} #onlineConsulting .ocArea>.rightArea .btns{margin-top:3rem; display: flex; justify-content: space-between; gap:3rem;} #onlineConsulting .ocArea>.rightArea input[type=submit]{width:100%; height:60px; background-color: #115451; border:none; font-weight: 400; font-size:15px; line-height:1; color: #29faf2; text-align: center; display:inline-block; box-sizing:border-box; cursor: pointer;} #onlineConsulting .ocArea>.rightArea label.check{padding-top:20px; font-weight: 300; font-size:14px; line-height:18px; color: #b7b7b7; position: relative; display:inline-block; cursor: pointer; white-space: nowrap;} #onlineConsulting .ocArea>.rightArea label.check input[type=checkbox]{width:18px; height:18px; background-color: #333; border:1px solid #666; display:inline-block; vertical-align: top; box-sizing:border-box;} /* onlineConsulting 2025 */ #onlineConsulting2025 .oc-top{margin-top:8rem; text-align: center;} #onlineConsulting2025 .oc-top>p{font-weight: 300; font-size:4rem; line-height:1; color: #000;} #onlineConsulting2025 .oc-top>p>span{box-shadow: inset 0 -2px 0 #000;} #onlineConsulting2025 .oc-top>div{margin-top:4rem;} #onlineConsulting2025 .oc-top>div>span{width:44rem; height:7rem; font-weight: 500; font-size:2rem; line-height:1; color: #000; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius:3rem;} #onlineConsulting2025 .oc-top>div>span, #onlineConsulting2025 .check-box input:checked+label{background: linear-gradient(to right, rgba(255,234,118,1) 0%,rgba(255,215,98,1) 25%,rgba(255,215,98,1) 50%,rgba(249,255,32,1) 75%,rgba(212,255,18,1) 100%); border-color:transparent;} #onlineConsulting2025 button[type=button], #onlineConsulting2025 input[type=button], #onlineConsulting2025 input[type=text], #onlineConsulting2025 input[type=password], #onlineConsulting2025 input[type=submit], #onlineConsulting2025 select, #onlineConsulting2025 textarea, #onlineConsulting2025 .btns, #onlineConsulting2025 .check-box input+label{width:100%; height:7rem; background-color: #fff; border:1px solid #999; font-weight: 500; font-size:2rem; line-height:1; color: #000; text-align: center; display: flex; align-items: center; justify-content: center; border-radius:3rem; box-shadow:1.5rem 1.5rem 1.5rem rgba(0,0,0,0.1); position: relative;} #onlineConsulting2025 textarea{width:100%; height:26rem; padding:3.5rem; line-height:1.55; text-align: left;} #onlineConsulting2025 input[type=submit]{background: linear-gradient(to right, rgba(186,197,255,1) 0%,rgba(186,197,255,1) 45%,rgba(146,144,255,1) 80%,rgba(159,136,255,1) 100%);} #onlineConsulting2025 .check-box{} #onlineConsulting2025 .check-box input{display: none; position: absolute; left:0; top:0;} #onlineConsulting2025 .check-box input+label{padding-left:2rem; display: flex; align-items: center; cursor: pointer; position: relative; gap:2.5rem; justify-content: flex-start;} #onlineConsulting2025 .check-box input+label>.graphic, #onlineConsulting2025 .check-box input+label>.graphic:before{content: ""; width: 3.6rem; height: 3.6rem; border:2px solid #999; font-size:0; line-height:0; display: inline-block; position: relative; transition: .3s; border-radius:99px;} #onlineConsulting2025 .check-box input+label>.graphic:before{background: url('data:image/svg+xml;utf8,') no-repeat center center/70%; border:none; left:-1px; top:-2px; z-index:2; opacity: 0;} #onlineConsulting2025 .check-box input:checked+label>.graphic{border-color:var(--btn_c);} #onlineConsulting2025 .check-box input:checked+label>.graphic, #onlineConsulting2025 .check-box input:checked+label>.graphic:before{opacity: 1;} #onlineConsulting2025 *.gr{padding: 0; border:2px solid transparent !important; font-weight: bold !important; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, rgba(255,205,37,1) 0%,rgba(208,209,80,1) 25%,rgba(75,218,202,1) 75%,rgba(19,222,254,1) 100%); background-origin: border-box; background-clip: content-box, border-box; } #onlineConsulting2025 *::-ms-input-placeholder{color:#000;} #onlineConsulting2025 *::-webkit-input-placeholder{color:#000;} #onlineConsulting2025 *::-moz-placeholder{color:#000;} #onlineConsulting2025 .btns{width:12rem; background-color:var(--btn_c); border-color:var(--btn_c); font-weight: 500; color: #fff; text-align: center;} #onlineConsulting2025 .oc-re{margin-top:15rem;} #onlineConsulting2025 .oc-re+.oc-re, #onlineConsulting2025 .oc-end{margin-top:7.4rem; padding-top:7.5rem; border-top:1px solid #e6e6e6;} #onlineConsulting2025 .oc-re>dt{margin:0 0 4rem; line-height:1; color: #000; display: flex; align-items: center; gap:0 2.5rem;} #onlineConsulting2025 .oc-re>dt>strong{font-weight: 800; font-size:4rem; box-shadow: inset 0 -2px 0 #000; white-space: nowrap;} #onlineConsulting2025 .oc-re>dt>span{font-size:2rem;} #onlineConsulting2025 .oc-re>dd{display: flex; flex-flow: row wrap; gap:3rem;} #onlineConsulting2025 .oc-re>dd>*{width:100%; max-width:44rem;} #onlineConsulting2025 .oc-re>dd>*.small{max-width:22rem;} #onlineConsulting2025 .oc-re>dd>*.full{width:100% !important; max-width:100%;} #onlineConsulting2025 .oc-re>dd+dd{margin-top:3rem;} #onlineConsulting2025 .oc-re .file{max-width:100%; display: flex; align-items: center; gap:2.2rem;} #onlineConsulting2025 .oc-re .file>dt{font-size:2rem; line-height:1; color: #000; white-space: nowrap;} #onlineConsulting2025 .oc-re .file>dd{width:56rem; height:7rem; background-color: #fff; border:1px solid #999; font-size:2rem; line-height:1.1; color: #000; display: flex; align-items: center; border-radius:3rem; box-shadow:1.5rem 1.5rem 1.5rem rgba(0,0,0,0.1); position: relative;} #onlineConsulting2025 .oc-re .file>dd>div{width:calc(100% - 15.9rem); padding:0 2rem; border-radius:3rem 0 0 3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #onlineConsulting2025 .oc-re .file>dd>p{width:15.9rem; height:100%; padding:0 2rem; border-radius:0 3rem 3rem 0; background-color: #000; color: #fff; position: relative; display: flex; align-items: center; justify-content: center;} #onlineConsulting2025 .oc-re .file>dd input[type=file]{width:100%; height:100%; opacity:0; position: absolute; left:0; top:0;} #onlineConsulting2025 .oc-re.end{} #onlineConsulting2025 .oc-re.end>dt{width:100%; margin-bottom:3rem; padding:1.9rem 3rem; background-color: #fff; border:1px solid #999; font-size:2rem; line-height:1.5; color: #000; text-align: center; display:block; border-radius:3rem; box-shadow:1.5rem 1.5rem 1.5rem rgba(0,0,0,0.1); position: relative;} #onlineConsulting2025 .oc-re.end>dd{justify-content: center;} #onlineConsulting2025 .oc-box{} #onlineConsulting2025 .oc-box[style="display:none;"] + .oc-re.end{margin-top:8rem;} #onlineConsulting2025 .oc-new{margin-top:8rem; text-align: center;} #onlineConsulting2025 .oc-new>p{font-weight: 300; font-size:4rem; line-height:1.35; color: #000;} #onlineConsulting2025 .oc-new>p>span{font-weight: 500; box-shadow: inset 0 -2px 0 #000;} #onlineConsulting2025 .oc-first{position: relative;} #onlineConsulting2025 .oc-first .oc-re{margin-top:7rem;} #onlineConsulting2025 .oc-first .oc-re>dd{justify-content: center;} #onlineConsulting2025 .oc-first button{width:16rem; height:16rem; background-color: var(--point2); border-color:var(--point2); line-height:1.3; color: #fff; position: absolute; right:0; top:-8rem; border-radius:999px; animation:upDwon 0.7s cubic-bezier(.25,.46,.45,.94) infinite alternate;} #quick-quick{width:10rem; height:10rem; background-color: var(--point2); border-color:var(--point2); font-weight: 500; font-size:1.8rem; line-height:1.3; color: #fff; position: fixed; right:25px; top:50%; border-radius:999px; display: flex; align-items: center; justify-content: center; z-index:7; animation:upDwon 0.7s cubic-bezier(.25,.46,.45,.94) infinite alternate;} @keyframes upDwon { from {transform: translateY(2%); box-shadow:0rem 0rem 0.3rem rgba(0,0,0,0.1);} to {transform: translateY(-2%); box-shadow:1.5rem 1.5rem 1.5rem rgba(0,0,0,0.1);} } /* Faq 2025 */ .faqArea{width:100%; margin-top:8rem; border-top:1px solid #000; font-size:0; line-height:0; position:relative; overflow:hidden;} .faqArea>li{background-color: #f8f8f8; border-bottom:1px solid #e6e6e6; position: relative;} .faqArea>li+li{} .faqArea>li .q{min-height:11.9rem; padding:1.5rem 8rem 1.5rem 0; background-color: #f8f8f8; font-size:2rem; line-height:1.5; color:#010101; display: flex; align-items: center; position: relative;} .faqArea>li .site{width:15%; text-align: center;} .faqArea>li .days{width:15%; text-align: center; white-space: nowrap; } .faqArea>li .days strong{color: #000; display:block;} .faqArea>li .days strong>span{color: var(--point2);} .faqArea>li .title{flex:1; font-weight: bold; } .faqArea>li .name{width:12%; text-align: center;} .faqArea>li .q:after{content: "↓"; font-weight: 500; font-size:2.5rem; line-height:1.2; color: #111; text-align: center; position:absolute; right: 3rem; top:50%; transform: translateY(-50%); font-family:"SUIT Variable", sans-serif !important; transition: transform .3s ease-out; transform-origin: 50% 50%;} .faqArea>li .a{padding:3rem 5rem 5rem; background-color: #fff; border-top:1px solid #e6e6e6; font-weight: 400; font-size:2rem; line-height:1.5; color:#666; position: relative; display:none;} .faqArea>li .a .link-blank{margin-top:3rem; display:block;} .faqArea>li .a .link-blank>a{font-size:1.8rem; line-height:1.3; color: #000; background-image: linear-gradient(transparent calc(100% - 2px), #dab773 1px); background-position: left bottom; background-repeat: no-repeat; background-size: 0% 2px;} .faqArea>li:is(:hover, .active) .q{background-color: #dab773; font-weight: 600; color: #fff;} .faqArea>li:is(:hover, .active) .q *{font-weight: 600 !important; color: #fff !important;} .faqArea>li:is(:hover, .active) .q:after{color: #fff !important;} .faqArea>li.active .q:after{transform:translateY(-50%) rotate(-180deg);} .faqArea>li.active .a .link-blank>a{animation:lineText 0.5s linear both 0.3s} @keyframes lineText{ 0%{background-size: 0% 2px;} 100%{background-size:100% 2px;} } /* company 2025 */ .page-title{padding-top:5rem; font-weight: 300; font-size:5rem; line-height:1.01; color: #000; text-align: center;} .page-title span{text-decoration:none; display: inline; box-shadow: inset 0 -0.8rem 0 #ff5400; display:inline-block; position: relative;} .page-title em{font-weight: 600; font-style: normal;} .page-text{margin-top:1.7rem; font-weight: bold; font-size:2.2rem; line-height:1.4; color: #000; text-align: center;} .page-text>strong{color: #ff5400;} /* benefit */ .benefit-area{} .benefit-tit{margin-bottom:2.5rem; font-weight: bold; font-size:4rem; line-height:1.2; color: #000;} .benefit-tit>span{box-shadow: inset 0 -1.1rem 0 var(--point2);} *+.benefit-tit{margin-top:14rem;} .benefit-top{margin-top:5rem; display: flex; flex-flow: row wrap; gap:2.439%;} /*.benefit-top>li{width:calc((100% - 7.317%) / 4); height:38rem; padding:3rem; background-color: #fff; border:1px solid #e6e6e6; text-align: center; display: flex; flex-flow: row wrap; align-content: center; border-radius:1rem; box-shadow:3rem 3rem 5rem rgba(0,0,0,0.2); transition: all .2s linear;}*/ .benefit-top>li{width:calc((100% - 4.878%) / 3); height:38rem; padding:3rem; background-color: #fff; border:1px solid #e6e6e6; text-align: center; display: flex; flex-flow: row wrap; align-content: center; border-radius:1rem; box-shadow:3rem 3rem 5rem rgba(0,0,0,0.2); transition: all .2s linear;} .benefit-top>li>*{width:100%;} .benefit-top>li dl{} .benefit-top>li dl>dt{} .benefit-top>li dl>dt img{height:5.4rem;} .benefit-top>li dl>dt img[src="/new/images/20241007/icon_benefit01_02.png"]{height:6rem;} .benefit-top>li dl>dt img[src="/new/images/20241007/icon_benefit01_03.png"]{height:6.2rem;} .benefit-top>li dl>dd{font-size:1.6rem; line-height:1; color: #999;} .benefit-top>li dl>dd>strong{padding:1.7rem 0 1rem; font-weight: bold; font-size:3rem; color: #000; display:block;} .benefit-top>li p{margin-top:4rem; padding-bottom:1.9rem; border-bottom:1px solid #ddd; font-weight: 500; font-size:1.6rem; line-height:1; color: #666; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap:0.7rem;} .benefit-top>li p>strong{font-weight: 500; font-size:2.5rem; color: #111;} .benefit-top>li div{margin-top:2rem; font-weight: bold; font-size:3rem; line-height:1; color: #000;} .benefit-top>li div>strong{font-weight:800; color: #ff5400;} .benefit-top>li:hover{background-color: var(--point2); border-color:var(--point2);} .benefit-top>li:hover dl>dt img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} .benefit-top>li:hover dl>dd, .benefit-top>li:hover dl>dd>strong{color: #fff;} .benefit-top>li:hover p{border-bottom-color:#fff; color: #fff;} .benefit-top>li:hover p>strong{color: #fff;} .benefit-top>li:hover div, .benefit-top>li:hover div>strong{color: #fff;} .benefit-list{border-top:1px solid #000; display: flex; flex-flow: row wrap;} .benefit-list>li{width:calc(100% / 2); padding:3rem 0; border-bottom:1px solid #ddd; display: flex; flex-flow: row wrap; align-items: center; align-content: center; transition: all .2s linear;} .benefit-list>li:nth-child(even){border-left:1px solid #ddd;} .benefit-list>li p{width:15rem; height:10rem; display: flex; align-items: center; justify-content: center;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_01.png"]{height:4.5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_02.png"]{height:4.1rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_03.png"]{height:5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_04.png"]{height:5.3rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_05.png"]{height:5.3rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_06.png"]{height:5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_07.png"]{height:5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_08.png"]{height:3.6rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_09.png"]{height:6.2rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit02_10.png"]{height:5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_01.png"]{height:5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_02.png"]{height:4.1rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_03.png"]{height:4rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_04.png"]{height:4rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_05.png"]{height:4rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_06.png"]{height:5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_07.png"]{height:5.6rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_08.png"]{height:5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_09.png"]{height:4.5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_10.png"]{height:5.5rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_11.png"]{height:4.8rem;} .benefit-list>li p img[src="/new/images/20241007/icon_benefit03_12.png"]{height:4.4rem;} .benefit-list>li dl{width:calc(100% - 15rem); padding-right:5rem;} .benefit-list>li dl>dt{font-weight: bold; font-size:2rem; line-height:1.3; color: #000;} .benefit-list>li dl>dd{margin-top:0.7rem; font-size:1.6rem; line-height:1.3; color: #666;} html:not(.main) .benefit-list>li:hover{background-color: var(--point2);} html:not(.main) .benefit-list>li:hover p img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} html:not(.main) .benefit-list>li:hover dl>dt, html:not(.main) .benefit-list>li:hover dl>dd{color: #fff;} #main-benefit .main-benefit-two{width:100%; margin:3.5rem 0 5rem; padding:5rem; border:2px solid #ddd; display: flex; justify-content: space-between; gap:10rem; position: relative; overflow: hidden; border-radius:2rem;} #main-benefit .main-benefit-two:before{content: ""; width: 1px; height: 110%; background-color: #ddd;position:absolute; left: 47%; top:-30px; transform:rotate(15deg);} #main-benefit .main-benefit-two>div{width:calc((100% - 30rem) / 2); display: flex; flex-flow: row wrap; align-content: flex-start;} #main-benefit .main-benefit-two>div .benefit-tit{width:100%; font-size:2.4rem;} #main-benefit .main-benefit-two>div .benefit-tit>span{box-shadow: inset 0 -0.8rem 0 var(--point2);} #main-benefit .main-benefit-left{} #main-benefit .main-benefit-right{} #main-benefit .main-benefit-right .benefit-tit{} #main-benefit .benefit-list{border-top:none; justify-content: space-between; gap:0 4rem;} #main-benefit .benefit-list>li{width:calc((100% - 4rem) / 2); padding:0; border-bottom:none;} #main-benefit .benefit-list>li:nth-child(even){border-left:none;} #main-benefit .benefit-list>li p{width:6rem; height:6rem; justify-content: flex-start; } #main-benefit .benefit-list>li p img{transform:scale(0.7);} #main-benefit .benefit-list>li dl{width:calc(100% - 6rem); padding-right:0;} #main-benefit .benefit-list>li dl>dt{font-weight: 600; font-size:1.6rem;} #main-benefit .benefit-list>li dl>dd{display:none;} /*[e] Sub Style */ @media only screen and (max-width : 1440px){ #mainDown{height:auto; padding:3rem 0 6rem;} #mainDown .inConts{flex-wrap: wrap; } #mainDown .mainDown_text{width:100%; justify-content: space-between;} #mainDown .mainDown_text>dd{margin-left:0; position: relative; top:2rem;} #main-benefit .main-benefit-two:before{left: 49%;} #main-benefit .main-benefit-two>div{width:calc((100% - 10rem) / 2);} #onlineConsulting2025 .oc-re>dd.three>*{width:calc((100% - 6rem) / 3);} #onlineConsulting2025 .oc-re .file{width:100%;} } @media only screen and (max-width : 1280px){ /*[s] Main Style */ .talkit_info .talkit_info_list>li .text>dt{font-size:1.8rem; line-height:2.6rem;} #mainGuide .mainGuide_text>dt{font-size:3.4rem; line-height:5rem;} #mainGuide .mainGuide_text>dd{font-size:1.8rem; line-height:3.2rem;} /*[e] Main Style */ /*[s] Sub Style */ .portfolio-list ul.list>li{width:calc(100% / 4);} /*[e] Sub 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 */ /* talkit */ .talkit_info{} .talkit_info .talkit_info_title{} .talkit_info .talkit_info_list{max-width:64rem; margin:7.5rem auto 0; flex-wrap: wrap;} .talkit_info .talkit_info_list>li{width:50%;} .talkit_info .talkit_info_list>li .photo{width:100%; height:auto;} .talkit_info .talkit_info_list>li .text>dt{font-size:2.2rem; line-height:3rem;} .talkit_info .talkit_info_list>li .text>dd{font-size:1.8rem; line-height:2.2rem;} /* down */ #mainDown{} #mainDown .inConts{} #mainDown .mainDown_text{} #mainDown .mainDown_btns{} /* 생기 */ #main-cont06_m{padding:10rem 0; display: flex; align-items: center; position: relative;} .main-cont06 .partner-area{display:block;} .main-cont06 .text-area{width:100%; padding-left:0;} .main-cont06 .img-area-tm{width:100vw; margin-top:8rem; display:block;} .main-cont06 .img-area-tm .pin-img-list{display: inline-flex; gap:3rem;} .main-cont06 .img-area-tm .pin-img-list dl{width:26vh; min-width:26vh;} #main-cont06, .main-cont06 .img-area-pc{display:none;} /* benefit */ #main-benefit .main-benefit-two{flex-wrap: wrap;} #main-benefit .main-benefit-two:before{width: 100%; height: 1px; left:0; top:calc(50% - 4rem); transform:rotate(0deg);} #main-benefit .main-benefit-two>div{width:100%;} /*[e] Main Style */ /*[s] Sub Style */ .portfolio-list ul.list>li{width:calc(100% / 3);} /* customer */ .pcl{} .pcl>table{} .pcl>table, .pcl>table tbody, .pcl>table tr, .pcl>table td, .pcl>table th{height:auto; padding:0; border:none; display:block;} .pcl>table td, .pcl>table th{display: flex; align-items: center;} .pcl>table .td_num2, .pcl>table>thead{display:none;} .pcl>table .td_chk{width:auto; margin:-1rem 0 1rem; text-align: left; font-size:0; line-height:0;} .pcl>table tr{padding:2rem 0rem; border-bottom:1px solid rgba(255,255,255,0.4); display: flex; flex-flow: row wrap;}/* justify-content: center; */ .pcl>table tr>*:nth-child(1){width:60%; order:2;} .pcl>table tr>*:nth-child(2){width:100%; padding-bottom:1rem; order:1;} .pcl>table tr>*:nth-child(3){display:none;} .pcl>table tr>*:nth-child(4){width:40%; order:3; justify-content: end;} .pcl>table tr:hover>*{background-color: #111;} /* customer 2025 */ .pcl-2025{} .pcl-2025>table{} .pcl-2025>table, .pcl-2025>table tbody, .pcl-2025>table tr, .pcl-2025>table td, .pcl-2025>table th{height:auto; padding:0; border:none; display:block;} .pcl-2025>table td, .pcl-2025>table th{display: flex; align-items: center;} .pcl-2025>table .td_num2, .pcl-2025>table>thead{display:none;} .pcl-2025>table tr{padding:3rem 2rem; background-color: #f8f8f8; border-bottom:1px solid #e6e6e6; display: flex; flex-flow: row wrap;}/* justify-content: center; */ .pcl-2025>table tr>*:nth-child(1){width:calc(100% - 19.7rem); order:2;} .pcl-2025>table tr>*:nth-child(2){width:100%; padding-bottom:1.5rem; order:1;} .pcl-2025>table tr>*:nth-child(3){order:3;} .pcl-2025>table tr>*:nth-child(4){width:auto; margin-left:3rem; order:4;} .pcl-2025>table tr:hover{background-color: #dab773;} .pcl-2025>table td.days{gap:1rem;} /* onlineConsulting */ #onlineConsulting{} #onlineConsulting .ocArea{padding-top:0; flex-wrap: wrap; justify-content: flex-start; gap:8rem 0;} #onlineConsulting .ocArea>.leftArea{width:100%;} #onlineConsulting .ocArea>.leftArea .infoArea{width:100%; padding:0; border:none;} #onlineConsulting .ocArea>.leftArea .text>strong{font-weight: 400;} #onlineConsulting .ocArea>.leftArea .btn{gap:1rem;} #onlineConsulting .ocArea>.leftArea .btn>a{} #onlineConsulting .ocArea>.rightArea{width:100%;} #onlineConsulting .ocArea>.rightArea .formArea .box + .tit{margin-top:5rem;} /* benefit */ .benefit-top{gap:3rem;} .benefit-top>li{width:calc((100% - 3rem) / 2);} /* onlineConsulting 2025 */ #onlineConsulting2025 .oc-re>dd>*{width:calc((100% - 3rem) / 2) !important;} #onlineConsulting2025 .oc-re .file{width:100% !important;} /*[e] Sub Style */ /*[s] Plugin Style */ .fancybox__slide{padding:48px 3rem 8px !important;} /*[e] Plugin Style */ } @media only screen and (max-width : 840px){ /*[s] All Style */ /*[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 */ .b-tn{width:21rem; height:5.4rem; font-size:2rem;} /* 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: 198vw; position: relative;} #main-visual .main-slider .mobile_in video, #main-visual .main-slider .mobile_in iframe{height:100% !important;} #main-visual .main-slider .mobile_in iframe{left:50% !important; transform: translate(-74%, 0%);} #main-visual .main-slider .mobile_in #video2{left:50% !important; transform: translate(-99%, 0%);} #main-visual .main-slider .visual-text-area .visual-text{height:44rem; margin:0;} #main-visual .main-slider .visual-text-area .cate{font-size:2.2rem;} #main-visual .main-slider .visual-text-area .title{margin-top:2.5rem; font-size:7rem;} #main-visual .main-slider .visual-text-area .text{margin-top:3.5rem; font-size:2.6rem; line-height:1.4;} #main-visual .main-slider .visual-text-area .visual-btn{gap:4rem;} #main-visual .main-slider .visual-text-area .visual-btn>a{font-size:2.4rem;} #main-visual .controll{bottom:5rem;} #main-visual .controll .auto button{width:20px; height:20px;} #main-visual .dot_Line{padding-right:7px;} #main-visual .dot_Line>dt{font-size:13px;} #main-visual .dot_Line>dd{left:20px;} /* talkit */ .mainTitle{} .mainTitle .icon img{width:7.3rem;} .mainTitle .text{font-size:2.6rem;} .mainTitle .title{font-size:4.4rem; line-height:5.6rem;} #mainMiddle{padding:10rem 3rem 25rem;} .talkit_swiper{width:56rem; height:27.9rem;} .talkit_swiper .talkit_swiper-bg{background-size: cover;} .talkit_swiper:after{height: 3.8rem;} .talkit_swiper .talkitRoll .swiper-slide img{height:27.3rem;} .talkit_info{margin-top:9rem;} .talkit_info .talkit_info_title{font-size:3.4rem; line-height:4.8rem; } .talkit_info .talkit_info_list{max-width:none; margin-top:5rem;} .talkit_info .talkit_info_list>li{height:auto;} .talkit_info .talkit_info_list>li .text{height:calc(50vw - 3rem - 2px);} .talkit_info .talkit_info_list>li .text>dd{font-size:2rem; line-height:2.6rem;} /* down */ #mainDown{padding:6rem 0rem;} #mainDown .mainDown_text>dt{} #mainDown .mainDown_text>dt>p{font-size:2.4rem;} #mainDown .mainDown_text>dt>div{} #mainDown .mainDown_text>dt>span{font-size:2rem;} #mainDown .mainDown_text>dd{display:none;} #mainDown .mainDown_btns{margin-top:3rem; gap:2rem;} #mainDown .mainDown_btns>.b-tn{width:18rem;} /* 생기 */ .main-cont06 .text-area .title{} .main-cont06 .text-area .tit{font-size:2.4rem; line-height:3.4rem;} .main-cont06 .text-area .text{font-size:2rem; line-height:3rem;} /* 삼성 */ #mManagement .article .mManagement_en{font-size: 2.2rem; line-height: 2.4rem;} #mManagement .article .mManagement_kr{font-size: 3.5rem; line-height: 4.5rem;} #mManagement .article .text{font-size: 2.4rem;} #mManagement .article .mViewMore{font-size:2.2rem;} /* benefit */ #main-benefit>.inConts>dl>dd{font-size:2.4rem; line-height:3.4rem;} #main-benefit .swiper-slide{width:37rem; min-width:37rem; height:43rem; margin-right:3rem; padding:1.6rem 1.9rem 0;} #main-benefit .swiper-slide dl>dt{min-height:13.3rem; padding-bottom:1.9rem; font-size:2.4rem; line-height:3.2rem;} #main-benefit .swiper-slide dl>dt:before{width:12rem; height:3.8rem; font-size:1.8rem;} #main-benefit .swiper-slide dl>dd{margin-top:2rem; font-size:2rem; line-height:2.8rem; color: #666;} /*[e] Main Style */ /*[s] Sub Style */ .has_tag{margin:10rem 0 0 0;} .has_tag>*:not(form){height: 4.5rem; padding: 0 2rem; font-size:2rem;} .sch-box{width:22rem; height: 4.5rem; padding: 0;} .sch-box input[type=text]{width:calc(100% - 4.3rem); height: 4.3rem; font-size:2rem; line-height: 4.3rem;} .sch-box .tSch{width:4.3rem; height:4.3rem;} .sch-box .tSch:before{width:2rem; height:2rem; margin:-1.6rem 0 0 -1.6rem;} .sch-box .tSch:after{width:1rem; margin:0.7rem 0 0 0.4rem;} .portfolio-top-new .has_tag{gap:1.5rem 1rem;} .portfolio-list ul.list>li{width:calc(100% / 2);} /* customer */ .pcl>table, .pcl>table tbody, .pcl>table tr, .pcl>table td, .pcl>table th{font-size:2.4rem;} .pcl>table tr>*:nth-child(1){font-size:2rem; color: #999;} .pcl>table i.icons{width:10rem; height:4.1rem; font-size:1.7rem;} .customer-top .txt{font-size:2rem; line-height:1.4;} /* customer 2025 */ .pcl-2025>table, .pcl-2025>table tbody, .pcl-2025>table tr, .pcl-2025>table td, .pcl-2025>table th{font-size:2.2rem;} .pcl-2025>table tr>*:nth-child(2){font-size:2.6rem;} .pcl-2025>table i.icons{width:13rem; height:4.5rem; font-size:2rem;} .pcl-2025>table tr>*:nth-child(1){width:calc(100% - 23.4rem);} /* onlineConsulting */ #onlineConsulting .ocArea select, #onlineConsulting .ocArea input[type=text], #onlineConsulting .ocArea input[type=file], #onlineConsulting .ocArea textarea{height:6rem; font-size:2.2rem; line-height:6rem;} #onlineConsulting .ocArea select{font-size:2.2rem; line-height:6rem;} #onlineConsulting .ocArea>.leftArea .text{font-size:2.2rem;} #onlineConsulting .ocArea>.leftArea .text .hello{font-size:3rem;} #onlineConsulting .ocArea>.leftArea .btn>a{width:100%; height:6rem; font-size:2.2rem;} #onlineConsulting .ocArea>.rightArea .formArea .tit{font-size:2.4rem;} #onlineConsulting .ocArea>.rightArea .formArea .fileBg{height:6rem; font-size:2.2rem; line-height:6rem;} #onlineConsulting .ocArea>.rightArea .formArea input[type=text]{max-width:calc(100% - 2rem);} #onlineConsulting .ocArea>.rightArea .formArea textarea{} #onlineConsulting .ocArea>.rightArea .btns{margin-top:0; flex-wrap: wrap; gap:4rem;} #onlineConsulting .ocArea>.rightArea input[type=submit]{font-size:2.6rem;} #onlineConsulting .ocArea>.rightArea label.check{padding-top:2rem; font-size:2rem; line-height:2.7rem;} #onlineConsulting .ocArea>.rightArea label.check input[type=checkbox]{width:2.5rem; height:2.5rem; margin-right:0.5rem;} .page-text{font-size:2.4rem;} /* benefit */ .benefit-top>li dl>dd{font-size:2rem;} .benefit-top>li dl>dd>strong{font-size:3.2rem;} .benefit-top>li p{padding-bottom:2.4rem; font-size:2rem;} .benefit-top>li p>strong{font-size:2.8rem;} .benefit-top>li div{margin-top:2.5rem; font-size:3.2rem;} .benefit-list>li{width:100%;} .benefit-list>li:nth-child(even){border-left:none;} .benefit-list>li dl{padding-right:3rem;} .benefit-list>li dl>dt{font-size:2.4rem;} .benefit-list>li dl>dd{margin-top:1rem; font-size:2rem;} #main-benefit .main-benefit-two{padding:4rem 3rem;} #main-benefit .benefit-list>li dl>dt{font-size:2rem;} /* onlineConsulting 2025 */ #onlineConsulting2025 .oc-top>div>span{width:54rem; font-size:2.4rem;} #onlineConsulting2025 input[type=button], #onlineConsulting2025 input[type=text], #onlineConsulting2025 input[type=password], #onlineConsulting2025 input[type=submit], #onlineConsulting2025 select, #onlineConsulting2025 textarea, #onlineConsulting2025 .btns, #onlineConsulting2025 .check-box input+label{font-size:2.2rem;} #onlineConsulting2025 .oc-re>dt{} #onlineConsulting2025 .oc-re>dt>strong{} #onlineConsulting2025 .oc-re>dt>span{font-size:2.4rem;} #onlineConsulting2025 .oc-re>dd>*{max-width:100%;} #onlineConsulting2025 .oc-re .file{} #onlineConsulting2025 .oc-re .file>dt{font-size:2.2rem;} #onlineConsulting2025 .oc-re .file>dd{width:100%; font-size:2.2rem;} #onlineConsulting2025 .oc-re .file>dd>div{} #onlineConsulting2025 .oc-re .file>dd>p{} #onlineConsulting2025 .oc-re.end{} #onlineConsulting2025 .oc-re.end>dt{font-size:2.2rem;} /* Faq List */ .faqArea{} .faqArea>li{} .faqArea>li+li{} .faqArea>li .q{padding:3rem 8rem 3rem 3rem; font-size:2.2rem; flex-wrap: wrap;} .faqArea>li .site{width:auto; order:1;} .faqArea>li .days{width:auto; order:2;} .faqArea>li .title{flex: 100%; margin-top:1rem; font-size:2.4rem; order:4;} .faqArea>li .name{width:auto; order:3;} .faqArea>li .ls{margin-left:4rem; position: relative;} .faqArea>li .ls:before{content: ""; width: 1px; height: 1.4rem; margin-top:-0.7rem; background-color: #666; position:absolute; left: -2.1rem; top:50%;} .faqArea>li .q:after{font-size:3rem;} .faqArea>li .a{font-size:2.2rem;} .faqArea>li .a .link-blank>a{font-size:2rem;} .faqArea>li:is(:hover, .active) .ls:before{background-color: #fff;} /*[e] Sub Style */ /*[s] Plugin Style */ /*[e] Plugin Style */ } @media only screen and (max-width : 640px){ /* 삼성 */ #mManagement .article{width: 50rem; height: 50rem; padding: 0 2rem;} #mManagement .article .text br{display: none;} .portfolio-list ul.list>li{width:100%;} /* benefit */ .benefit-title>strong{padding-top:1rem;display:block;} .benefit-top{} .benefit-top>li{width:100%;} /* onlineConsulting 2025 */ #onlineConsulting2025 input[type=submit]{height:8rem; font-size:2.4rem;} #onlineConsulting2025 .oc-re>dt{flex-wrap: wrap;} #onlineConsulting2025 .oc-re>dt>span{width:100%; padding-top:1.5rem;} #onlineConsulting2025 .oc-re>dd>*{width:100% !important;} } @media only screen and (max-width : 480px){ /* Faq List .faqArea{} .faqArea>li .q{padding:3rem 8rem 3rem 3rem; font-size:2.2rem; flex-wrap: wrap;} .faqArea>li .days{width:100%; text-align: left; display: flex; align-items: center; gap:4rem;} .faqArea>li .days strong{} .faqArea>li .days strong+span{position: relative;} .faqArea>li .days strong+span:before{content: ""; width: 1px; height: 1.4rem; margin-top:-0.7rem; background-color: #666; position:absolute; left: -2.1rem; top:50%;} .faqArea>li .title{margin-top:1rem;} .faqArea>li .a{padding-left:3rem;}*/ } /* 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) 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); */