/* common */ #sv{ padding-top: 250px;} #sv #subVisual .title{ text-align: center; color:#fff; font-weight: 600; margin-bottom: 25px;} #sv #subVisual .txtBox{ width:100%; margin: 0 auto; text-align: center; } #sv #subVisual .txtBox .txt{ color:#fff; line-height: 30px; font-weight: 300; margin-bottom: 50px;} #sv #subVisual .txtBox #lnb{ display:flex; justify-content: center; align-items:center; } #sv #subVisual .txtBox #lnb img{ vertical:} #sv #subVisual .txtBox #lnb li, #sv #subVisual .txtBox #lnb li a{ display:flex; align-items:center; color:rgba(255,255,255,0.8); font-weight: 300; } #sv #subVisual .txtBox #lnb li:not(:last-child){ margin-right: 25px;} #sv #subVisual .txtBox #lnb li:not(:first-child):after{ content:''; display:block; width: 3px; height: 3px; border-radius:50%; background: rgba(255,255,255,0.5); flex-shrink:0; margin-left: 25px;} #sv #subVisual .txtBox #lnb.lnb1 .path2, #sv #subVisual .txtBox #lnb.lnb3 .path2{ font-family:var(--Red); } #sv #subVisual .txtBox #lnb .path3{ color:#fff; } #sv #subVisual .txtBox #lnb .path3:after{ background: #fff !important;} #sv #subVisual .bg{ text-align: center; } #sv #subVisual .bg02{ margin-top: -60px;} #sv #subVisual .bg03, #sv #subVisual .bg05{ margin-top: -110px; margin-bottom: 50px;} #sv #subVisual .bg04{ margin-top: -175px;} .sv02 #subVisual .txtBox{ margin-bottom: 0; } #subContents{ padding-bottom: 200px;} #title{ color:#fff; font-weight: bold; margin-bottom: 65px; } #title:before{ content:''; display:block; width: 7px; height: 7px; border-radius:50%; background: var(--mainC);} #tabBox{ position: relative; width: 100%; height: 80px; background: rgba(255, 255, 255, 0.03); border: 1px solid #242424; border-radius:100px; padding: 10px 7px; margin-bottom: 80px; display:flex; } #tabBox li a{ display:flex; justify-content:center; align-items:center; width: 100%; height: 100%; transition: all 0.5s; color:rgba(255,255,255,0.5); font-weight: 600; text-align: center; border-radius:50px; } #tabBox li:hover a{ color:#fff; } #tabBox li.on a{ color:#fff; background: var(--mainC);} #passBox > div{ position: relative; display:inline-block; } #passBox .eyes{ cursor:pointer; position: absolute; transform:translateY(-50%); top: 50%; right: 20px; } #btnBox{ display:flex; justify-content:center; align-items:center; margin-top: 100px;} #btnBox button{ min-width:230px; padding: 0 30px; height: 70px; border-radius: 50px; background: var(--mainC); color: #fff; } #greeting .ctnBox .itemBox{ display:flex; align-items:center; justify-content:space-between; gap:80px; } #greeting .ctnBox .itemBox:not(:last-child){ margin-bottom: 150px;} #greeting .ctnBox .itemBox .sTxt{ color:var(--mainC); margin-bottom: 60px; font-weight: bold; font-family:var(--Red); } #greeting .ctnBox .itemBox > *{ width: 50%; } #greeting .ctnBox .itemBox .title{ color:#fff; line-height: 1.4; font-weight: bold; margin-bottom: 30px;} #greeting .ctnBox .itemBox .txt{ color:rgba(255,255,255,0.9); line-height: 1.6; font-weight: 300;} #greeting .ctnBox .itemBox .txt:not(:last-child){ margin-bottom:25px ;} #greeting .ctnBox .itemBox figure{ flex-shrink:0; } #greeting .ctnBox .itemBox:nth-child(2) figure{ text-align: right; } #vision{ overflow: hidden;} #vision .info{ position: relative; margin-bottom: 180px;} #vision .info .circle{ position:absolute; transform:translate(-50%,-50%); top: 50%; left: 50%;} #vision .info .ctnBox{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:95px 340px; } #vision .info .ctnBox .itemBox{ position: relative; width: calc((100% - 340px) / 2); height: 250px; } #vision .info .ctnBox .itemBox:nth-child(2n){ display:flex; justify-content:flex-end; } #vision .info .ctnBox .itemBox > div{ position: relative; width: 400px; height: 100%; border-radius: 20px; background-image: linear-gradient(#1A1A1A, #1A1A1A), linear-gradient(125deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); border: 1px solid transparent; background-origin: border-box; background-clip: content-box, border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; } #vision .info .ctnBox .itemBox > div:before{ content:''; display:block; position: absolute; transform:translateY(-50%); top: 50%; left: 100%; width: 205px; height: 6px; background: url(/img/sub/visionLine01.png) no-repeat; } #vision .info .ctnBox .itemBox:nth-child(2n) > div:before{ left: auto; right: 100%; background: url(/img/sub/visionLine02.png) no-repeat;} #vision .info .ctnBox .itemBox .txt{ margin-top: 40px; color:#fff; font-weight: 600; text-align: center; padding: 0 20px;} .vision .content .tabBox{ display:flex; flex-wrap:wrap; gap:1px; } .vision .content .tabBox li{ width: calc((100% - 3px) / 4); height: 50px; } .vision .content .tabBox li button{ position: relative; display:block; width: 100%; height: 100%; font-weight: 500; border-radius: 20px 20px 0px 0px; background: rgba(30, 182, 183, 0.10); } .vision .content .tabBox li button:before{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--mainC); border-radius:20px 20px 0 0; transition:all 0.5s; opacity: 0; top: 100%; } .vision .content .tabBox li button span{ position: relative; z-index: 1; color:rgba(255,255,255,0.5); transition:all 0.5s; } .vision .content .tabBox li.on button:before, .vision .content .tabBox li:hover button:before{ opacity: 1; top: 0;} .vision .content .tabBox li.on button span, .vision .content .tabBox li:hover button span{ color:#fff; } .vision .content .ctnBox { position: relative; width: 100%; height: 520px; z-index: 5; background: #0E0E0E; border-radius:0 0 20px 20px; overflow: hidden;} .vision .content .ctnBox .itemBox{ opacity: 0; visibility: hidden; position: relative; position: absolute; top: 0; left: 0; width: 100%; height:100%; transition:all 0.7s; } .vision .content .ctnBox .itemBox.on{ opacity: 1; visibility: visible;} .vision .content .ctnBox .itemBox .fitBox{ width: 100%; height: 100%; } .vision .content .ctnBox .itemBox .txtBox{ position: absolute; left: 0; bottom: 75px; left: 80px; } .vision .content .ctnBox .itemBox .txtBox .title{ color:#fff; font-weight: bold; margin-bottom: 20px; } .vision .content .ctnBox .itemBox .txtBox .txt{ color:rgba(255,255,255,0.9); } #history .info{ position: relative; width: 100%; height: 100vh; opacity: 1;} #history .info .fitBox{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 100%; height: 100%; clip-path: circle(0% at 50% 50%); transition:clip-path 1.5s; } #history .info .fitBox:after{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); opacity: 0; transition:all 0.7s 0.5s; } #history .info.active .fitBox{ transform:translate(-50%,-50%); clip-path: circle(200% at 50% 50%); } #history .info.active .fitBox:after{ opacity: 1; } #history .info .title{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; z-index: 5; text-align: center; color:#fff; font-weight: bold; line-height: 1.4; opacity: 0; transition:all 0.7s 0.5s} #history .info .title span{ background-image: linear-gradient(to right, var(--mainC) 50%, #fff 50%); background-size: 200% 100%; background-position: 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition:all 1s 0.9s; } #history .info.active .title{ opacity: 1; } #history .info.active .title span{ background-position: 0%;} #history .year{ position: relative; padding: 155px 0; overflow: hidden;} #history .year .fitBox{ position: absolute; width: 100%; height: 100vh; top: 0; left: 0; z-index: -1; } #history .year .fitBox.active{ position: fixed; top: auto; bottom: 0; } #history .year .fitBox.active.on{ position: absolute; } #history .year .ctnBox{ position: relative; z-index: 1;max-width:1320px; margin: 0 auto; display:flex; flex-wrap:wrap; gap:200px 160px; } #history .year .ctnBox .itemBox{ position: relative; width: 100%; display: flex; } #history .year .ctnBox .itemBox:nth-of-type(even){ justify-content: flex-end;} #history .year .ctnBox .itemBox .inner{ width: calc((100% - 160px) / 2); min-height:650px; position: relative; border-radius: 20px; padding: 50px; overflow: hidden; padding-bottom: 100px;} #history .year .ctnBox .itemBox:not(:first-child) .inner{ margin-top: -400px;} #history .year .ctnBox .itemBox:nth-child(2) .inner, #history .year .ctnBox .itemBox:nth-child(3) .inner{ min-height: 820px;} #history .year .ctnBox .itemBox .inner:before{ content: ''; position: absolute; display: block; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 20px; border: 2px solid transparent; background-image: linear-gradient(125deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); box-sizing: border-box; top: -1px; left: -1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; z-index: -1;} #history .year .ctnBox .itemBox .inner .title{ position: relative; z-index: 5; color:#fff; font-weight: bold; margin-bottom: 50px; } #history .year .ctnBox .itemBox .inner ul{ position: relative; z-index: 5;} #history .year .ctnBox .itemBox .inner ul li{ color:rgba(255,255,255,0.8); font-weight: 300; display:flex; align-items: flex-start; line-height: 1.3;} #history .year .ctnBox .itemBox .inner ul li:not(:last-child){ margin-bottom: 25px;} #history .year .ctnBox .itemBox .inner ul li span{ position: relative;color:#fff; font-family:var(--Red); font-weight: bold; margin-right: 27px; min-width:70px;display:flex; align-items:center; margin-top: -3px; flex-shrink: 0;} #history .year .ctnBox .itemBox .inner ul li span:before{ content:''; display:block; width: 4px; height: 4px; border-radius:50%; background: var(--mainC); margin-right: 10px; flex-shrink:0; transition:all 0.7s; } #history .year .ctnBox .itemBox .inner .circle{ position: relative; position: absolute; bottom: 44px; right: 44px; width: 6px; height: 6px; border-radius:50%; background: #0E0E0E; transition:all 0.7s; } #history .year .ctnBox .itemBox .inner .circle:before{ content:''; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; display:block; width: 14px; height: 14px; border-radius:50%; background: var(--mainC); z-index: -1; transition:all 0.7s; } #history .year .ctnBox .itemBox .inner:hover ul li span:before{ background:#fff; } #history .year .ctnBox .itemBox .inner:hover .circle{ transform:scale(270) } #certi .info{ align-items:center; gap:85px; margin-bottom: 200px;} #certi .info figure{ flex-shrink:0; } #certi .info .txtBox .title{ color:#fff; font-weight: bold; line-height:1.4;margin-bottom: 30px;} #certi .info .txtBox .txt{ color:rgba(255,255,255,0.9); line-height: 1.6; font-weight: 300; } #certi .list .ctnBox{ display:flex; gap: 30px 0; flex-wrap:wrap; } #certi .list .ctnBox .itemBox{ width: 50%; display:flex; align-items:center; } #certi .list .ctnBox .itemBox figure{ width: 300px; height: 120px; overflow: hidden; border-radius:20px; border:2px solid var(--mainC); display:flex; justify-content:center; align-items:center; padding: 20px; background: #fff; margin-right: 30px; flex-shrink:0; } #certi .list .ctnBox .itemBox ul li{ color:rgba(255,255,255,0.9); display:flex; align-items:center; font-weight: 300;} #certi .list .ctnBox .itemBox ul li:not(:last-child){ margin-bottom: 10px; } #certi .list .ctnBox .itemBox ul li span{ min-width:65px; margin-right: 20px; color:var(--mainC); font-weight: 600; display:inline-block; } #edu{ overflow: hidden;} #edu .img{ margin-bottom: 60px;} #edu .ctnBox{ display:flex; align-items:center; } #edu .ctnBox > div{ width: 50%; } #edu .ctnBox .leftBox{ display:flex; flex-direction:column; color:#fff;} #edu .ctnBox .leftBox .title{ line-height: 1.4; font-weight: bold; margin-bottom: 80px;} #edu .ctnBox .leftBox figure{ text-align: right; margin-right: 80px; } #edu .ctnBox .txtBox p{ color:rgba(255,255,255,0.9); line-height: 30px; letter-spacing: -0.36px; font-weight: 300;} #edu .ctnBox .txtBox p:not(:last-child){ margin-bottom: 20px;} .lab .flex{ align-items:center; } .lab .img{ margin-right: 85px; flex-shrink:0; } .lab .txtBox .title{ color:#fff; font-weight: bold; line-height: 1.4; } .lab .txtBox .txt{ color:rgba(255,255,255,0.9); margin: 30px 0 50px; line-height: 30px; font-weight: 300;} .lab .txtBox .sTitle{ color:#fff; margin-bottom: 20px; font-weight: 600; } .lab .txtBox ul{ display:flex; flex-wrap:wrap; gap:12px; } .lab .txtBox ul li{ width: calc((100% - 24px) / 3); height: 100px; background: rgba(30,182,183,0.3); padding: 20px 35px; border-radius:10px; color:#fff; font-weight: 600; display:flex; align-items:center; } .lab .txtBox ul li img{ margin-right: 15px;} #location .ctnBox:not(:last-child){ margin-bottom: 120px;} #location .mapBox{ border-radius:15px; margin-bottom: 50px; overflow: hidden;} #location .txtBox .title{ color:var(--mainC); font-weight: bold; margin-bottom: 15px;} #location .txtBox ul{ display:flex; align-items:center; gap:20px 50px; flex-wrap:wrap; } #location .txtBox ul li{ color: rgba(255,255,255,0.9); } #global .content{ position: relative; width: 100%; height: 100vh; display:flex; justify-content:center; padding-top: 195px; } #global .content .mapBox{ opacity: 1; transition:all 0.7s 1.2s; } #global .content figure{ position: absolute; transform:translate(-50%,-50%); top: 51%; left: 50%; width: inherit; text-align: center; width: 100%;} #global .content figure.pin{ top: 60%; opacity: 0; transition:all 0.7s 0.5s; } #global .content .title{ color:#fff; font-weight: bold; text-align: center; position: relative; z-index: 5; color:#fff; font-weight: bold; line-height: 1.4; opacity: 0; transition:all 0.7s 1.4s} #global .content .title span{ background-image: linear-gradient(to right, var(--mainC) 50%, #fff 50%); background-size: 200% 100%; background-position: 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition:all 1s 1.7s; } #global .content.active .mapBox{ opacity: 0.1;} #global .content.active figure.pin{ top: 51%; opacity: 1;} #global .content.active .title{ opacity: 1; } #global .content.active .title span{ background-position: 0%;} .inquiry > div > .sTxt{ color:#fff; font-weight: 300; line-height: 30px; margin-bottom: 60px;} .inquiry .content{ border-radius: 20px 0px 0px 20px; overflow: hidden; border-top:1px solid #35EFF0; } .inquiry .content .Box{ display:flex; } .inquiry .content .Box:nth-child(2) input{ letter-spacing: -0.4px;} .inquiry .content .Box > dt{ background: var(--mainC); color:#fff; width: 350px; border-bottom:1px solid #28E2E3; display:flex; align-items:center; padding: 0 30px; flex-shrink:0; } .inquiry .content .Box > dd{ padding: 10px 15px; border-bottom:1px solid rgba(255,255,255,0.15); width: 100%; } .inquiry .content .Box > dd.flex{ align-items:center; gap:10px; } .inquiry .content .Box > dd.flex.column{ flex-direction:column; align-items:flex-start; } .inquiry .content .Box > dd.flex.column .address{ position: relative; width: 100%; margin-top: 10px;} .inquiry .content .Box > dd.flex.column .address:after{ content:''; display:block; width: calc(100% + 30px); height: 1px; background: rgba(255, 255, 255, 0.15); position: absolute; top: -10px; transform:translateX(-50%); left: 50%;} .inquiry .content .Box > dd.flex #addr_pop_wrap{ z-index: 10;} .inquiry .content .Box:first-child > dt{ border-top:1px solid #28E2E3; } .inquiry .content .Box:first-child > dd{ border-top:1px solid rgba(255,255,255,0.15); } .inquiry .content .Box > dd input[type="text"], .inquiry .content .Box > dd input[type="password"], .inquiry .content .Box > dd select, .inquiry .content .Box > dd .txt01{ border-radius:10px; border:1px solid rgba(219,219,219,0.15); height: 60px; background: transparent; padding: 0 20px; color:#fff; } .inquiry .content .Box > dd select option{ color:#000; } .inquiry .content .Box > dd input[type="text"]::placeholder, .inquiry .content .Box > dd input[type="password"]::placeholder{ color:#fff; font-weight: 200;} .inquiry .content .Box > dd select{ outline:none; background: url(/img/common/selectIcon.png) 97% 50% no-repeat;font-weight: 200;} .inquiry .content .Box > dd .ip01, .inquiry .content .Box > dd .st02{ width: 700px;} .inquiry .content .Box > dd .ip02{ width: 200px; } .inquiry .content .Box > dd .st01{ width: 255px; background: url(/img/common/selectIcon.png) 90% 50% no-repeat;} .inquiry .content .Box > dd .ip01 img{ margin-right: 10px;} .inquiry .content .Box > dd .txt02{ margin-top: 15px; color:rgba(255,255,255,0.7); font-weight: 300;} .inquiry .content .Box > dd .file input{ display:none; } .inquiry .content .Box > dd .txt01{ width: 100%; display:flex; align-items:center; } .inquiry .content .Box > dd .btn{ width: 195px; height: 60px; display: flex; justify-content: center; align-items: center;border-radius: 10px; border: 1px solid rgba(219, 219, 219, 0.30); background: rgba(217, 217, 217, 0.10); color:#fff; margin-left: 10px; flex-shrink:0; cursor:pointer;} .inquiry .content .Box > dd .bar{ width: 15px; height: 1px; background: rgba(255,255,255,0.3);} .inquiry .content .Box > dd textarea{ background: transparent; resize:none; border-radius:10px; border:1px solid rgba(219,219,219,0.15); padding: 20px; height: 200px; width: 100%; color:#fff; font-weight: 200;} .inquiry .content .Box > dd .txtBox{ height: 165px; padding: 20px; border-radius:10px; border:1px solid rgba(219,219,219,0.15); } .inquiry .content .Box > dd .txtBox .innerBox{ height: 100%; overflow-y:scroll; padding-right: 20px; } .inquiry .content .Box > dd .txtBox .innerBox::-webkit-scrollbar{ width: 2px; background: transparent; } .inquiry .content .Box > dd .txtBox .innerBox::-webkit-scrollbar-thumb{ background: #DBDBDB; border-radius:50px; } .inquiry .content .Box > dd .txtBox *{ font-size:15px } .inquiry .content .Box > dd .chkBox input{ display:none; } .inquiry .content .Box > dd .chkBox label{ display:flex; align-items:center; cursor: pointer; margin-top: 12px;} .inquiry .content .Box > dd .chkBox label span{ position: relative; display: inline-block; width: 16px; height: 16px; border:1px solid #fff; border-radius:50%; } .inquiry .content .Box > dd .chkBox label span:after{ content:''; display:block; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 8px; height: 8px; background: var(--mainC); border-radius:50%; opacity: 0; } .inquiry .content .Box > dd .chkBox label p{ margin-left: 10px; color:#fff; } .inquiry .content .Box > dd .chkBox input:checked + label span:after{ opacity: 1; } .inquiry .btnBox{ display:flex; justify-content:center; align-items:center; } .inquiry .btnBox button{ width: 200px; height: 70px; border-radius:50px; background: var(--mainC); color:#fff; } .inquiry .btnBox button.black{ background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.50); margin-right: 20px; } .inquiry .cBox{ display:flex; margin: 20px 0 140px; justify-content: flex-end;} .inquiry .cBox .chkBox:first-child{ margin-right: 50px; } .inquiry .cBox .chkBox input{ display:none; } .inquiry .cBox .chkBox label{ display:flex; align-items:center; cursor: pointer; margin-top: 12px;} .inquiry .cBox .chkBox label span{ position: relative; display: inline-block; width: 26px; height: 26px; border:1px solid rgba(255, 255, 255, 0.30); border-radius:50%; background: rgba(255, 255, 255, 0.10); flex-shrink:0; } .inquiry .cBox .chkBox label span:after{ content:''; display:block; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: calc(100% + 2px); height: calc(100% + 2px); border-radius:50%; } .inquiry .cBox .chkBox label p{ margin-left: 10px; color:#fff; } .inquiry .cBox .chkBox input:checked + label span:after{ background: url(/img/sub/joinChk.png) 50% 50% no-repeat var(--mainC);} #inquiry .content{ margin-bottom: 110px;} #question .ctnBox{ border-top:1px solid var(--mainC);} #question .ctnBox .txtBox{ display:flex; align-items:center; } #question .ctnBox .txtBox span{ margin-right: 60px;} #question .ctnBox .itemBox{ cursor:pointer; } #question .ctnBox .itemBox > div{ padding: 35px 60px; display:flex; justify-content:space-between; align-items:center; gap:30px; border-bottom:1px solid rgba(255,255,255,0.2);} #question .ctnBox .itemBox .qBox .txtBox{ font-weight: 500; color:#fff; width: 100%; } #question .ctnBox .itemBox .qBox .txtBox span{ font-weight: bold; color:var(--mainC); } #question .ctnBox .itemBox .qBox .moreBtn{ position: relative; display:block; width: 30px; height: 1px; background: #666; transition:all 0.7s; flex-shrink:0; } #question .ctnBox .itemBox .qBox .moreBtn:after{ content:''; display:block; width: 1px; height: 30px; background: #666; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; transition:all 0.7s; opacity: 1;} #question .ctnBox .itemBox .qBox.on .moreBtn{ transform:rotate(180deg); } #question .ctnBox .itemBox .qBox.on .moreBtn:after{ transform:translate(-50%,-50%) rotate(180deg); opacity: 0; } #question .ctnBox .itemBox .aBox{ padding: 55px 60px; background: rgba(30,182,183,0.2); display:none; } /*#question .ctnBox .itemBox .aBox .txtBox p{ line-height: 27px; color:rgba(255,255,255,0.9); font-weight: 300; }*/ #question .ctnBox .itemBox .aBox .txtBox .txt{ line-height: 27px; color:rgba(255,255,255,0.9); font-weight: 300; } #question .ctnBox .itemBox .aBox .txtBox .txt p, #question .ctnBox .itemBox .aBox .txtBox .txt a { font-size: inherit; line-height: inherit; color:inherit; font-weight: inherit; } #question .ctnBox .itemBox .aBox .txtBox span{ font-weight: bold; color: #fff; } #implant .info{ display:flex; align-items:center; margin-bottom: 145px; } #implant .info .imgBox{ width: 615px; height: 615px; display:flex; justify-content:center; align-items:center; margin-right: 120px; border-radius:50%; background-image: linear-gradient(#0E0E0E, #0E0E0E), linear-gradient(125deg, rgba(39, 198, 199, 1), rgba(62, 127, 223, 1)); border: 15px solid transparent; background-origin: border-box; background-clip: content-box, border-box; flex-shrink:0; } #implant .info .ctnBox{ width: 100%; } #implant .info .ctnBox .itemBox{ position: relative; display:flex; align-items:center; width: 100%; min-height: 175px; background: var(--mainC); border-radius:20px; padding: 0 55px; } #implant .info .ctnBox .itemBox:not(:last-child){ margin-bottom: 45px; } #implant .info .ctnBox .itemBox:before{ content:''; display:block; width: 80px; height: 1px; background: var(--mainC); position: absolute; transform:translateY(-50%); top: 50%; left: -80px; } #implant .info .ctnBox .itemBox:after{ content:''; display:block; width: 6px; height: 6px; border-radius:50%; position: absolute; transform:translateY(-50%); top: 50%; left: -80px; background: var(--mainC);} #implant .info .ctnBox .itemBox.item2, #implant .info .ctnBox .itemBox.item2:before, #implant .info .ctnBox .itemBox.item2:after{ background: #14A9DF;} #implant .info .ctnBox .itemBox.item3, #implant .info .ctnBox .itemBox.item3:before, #implant .info .ctnBox .itemBox.item3:after{ background: #356AB5;} #implant .info .ctnBox .itemBox figure{ min-width:80px; display:flex;justify-content:center; margin-right: 55px;} #implant .info .ctnBox .itemBox .txtBox .title{ color:#fff; font-weight: 600; margin-bottom: 15px; } #implant .info .ctnBox .itemBox .txtBox .txt{ color:rgba(255,255,255,0.9); line-height: 30px;} #implant .intro{background-image:linear-gradient(#141414, #141414), linear-gradient(160deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); border-radius: 20px} #implant .intro .inner{ padding: 65px 45px;} #implant .intro .inner .title{ color:#fff; font-weight: bold; margin-bottom: 30px;} #implant .intro .inner .txt{ color:rgba(255,255,255,0.9); line-height: 30px; font-weight: 300; } #implant .intro .inner .txt:not(:last-child){ margin-bottom: 20px;} #procedure .ctnBox{ position: relative; display:flex; gap:63px; } #procedure .ctnBox:before{ content:''; display:block; width: 59%; height: 9px; position: absolute; transform:translate(-50%,-50%); top: 35%; left: 48%; background: url(/img/sub/procedureLine.png) no-repeat 100% 50%; z-index: -1;} #procedure .ctnBox .itemBox{ width: calc((100% - 189px) / 4); text-align: center; } #procedure .ctnBox .itemBox .title{ color:#fff; margin: 40px 0 20px; font-weight: bold;} #procedure .ctnBox .itemBox .txt{ color:rgba(255,255,255,0.9); line-height: 30px; font-weight: 300;} .need .info{ align-items:center; margin-bottom: 200px; } .need .info figure{ margin-right: 85px; flex-shrink:0; } .need .info .txtBox .sTxt{ color:var(--mainC); font-weight: bold; } .need .info .txtBox .title{ color:#fff;font-weight: bold; line-height: 1.4; margin: 40px 0;} .need .info .txtBox ul li{ color:rgba(255,255,255,0.9); display:flex; align-items:center; font-weight: 300;} .need .info .txtBox ul li:not(:last-child){ margin-bottom: 10px;} .need .info .txtBox ul li:before{ content:''; display:block; width: 4px; height: 4px; border-radius:50%; background: var(--mainC); margin-right: 10px;} .need .content{ position: relative; margin: 0 70px;} .need .content .imgBox{ position: relative; text-align: center; } .need .content .imgBox .bg .circle{ opacity: 0; animation: circle 2s 0.5s infinite forwards;} .need .content .imgBox .bg .circle01{ animation-name: circle2; } .need .content .imgBox .bg .circle02{ animation-name: circle3; } .need .content .imgBox .iconBox{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; background: linear-gradient(141deg, #27C6C7 8.89%, #3E7FDF 87.6%); box-shadow: 0px 0px 150px 0px rgba(30, 182, 183, 0.38); width: 515px; height: 515px; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align: center; } .need .content .imgBox .iconBox .title{ color:#fff; margin: 35px 0 15px; font-weight: 600; } .need .content .imgBox .iconBox .txt{ color:rgba(255,255,255,0.9); line-height: 30px;} .need .content .ctnBox{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 100%; display:flex; flex-wrap:wrap; gap:200px 0; } .need .content .ctnBox .itemBox{ width: 50%; display:flex; text-align: center; } .need .content .ctnBox .itemBox:nth-child(2n){ justify-content: flex-end; } .need .content .ctnBox .itemBox .item{ width: 310px; height: 310px; border-radius:50%; background: var(--mainC); display:flex; flex-direction:column; justify-content:center; align-items:center; color:#fff; line-height: 30px; font-weight: 500;} .need .content .ctnBox .itemBox .item .txt{ margin-top: 20px;} #bone .info{ margin-bottom: 0;} #bone .info .title{ margin:0 0 30px;} #bone .info .txt{ line-height: 30px;letter-spacing: -0.36px; color:rgba(255,255,255,0.9); font-weight: 300;} #bone .info .txt:not(:last-child){ margin-bottom: 20px;} #first .info{ margin-top: 90px;} #first .info > .title{ color:#fff; font-weight: bold; line-height: 1.4; margin-bottom: 60px;} #first .info .ctnBox{ display:flex; flex-wrap:wrap; gap:40px; } #first .info .ctnBox .itemBox{ width: calc((100% - 80px) / 3); border-radius:20px; font-family:var(--Red); } #first .info .ctnBox .itemBox .inner{ display:flex; justify-content:center; align-items:center; flex-direction:column; text-align: center; padding: 65px 10px;} #first .info .ctnBox .itemBox figure{ width: 245px; height: 245px; border-radius:50%; background: #221915; display:flex; justify-content:center; align-items:center; } #first .info .ctnBox .itemBox .color{ display:flex; align-items:center; margin: 35px 0 20px; color:#8F395C; font-weight: bold; line-height: 1.2; } #first .info .ctnBox .itemBox .color:before{ content:''; display:block; width: 15px; height: 15px; border-radius:50%; margin-right: 5px; background: #8F395C;} #first .info .ctnBox .itemBox.item2 .color{ color:#CA8B34; } #first .info .ctnBox .itemBox.item2 .color:before{ background:#CA8B34; } #first .info .ctnBox .itemBox.item3 .color{ color:#23ACAC; } #first .info .ctnBox .itemBox.item3 .color:before{ background:#23ACAC; } #first .info .ctnBox .itemBox .title{ color:#fff; font-weight: 600; margin-bottom: 10px; } #first .info .ctnBox .itemBox .txt{ color:rgba(255,255,255,0.9); line-height: 30px;} #advantages .content{ display:flex; } #advantages .content figure{ margin-right: 75px; filter: blur(10px); -webkit-filter: blur(10px); transition:all 1.2s 0.3s; } #advantages .content figure.aos-animate{ filter: blur(0); -webkit-filter: blur(0); } #advantages .content .txtBox{ width: 50%; height: fit-content; border-radius:20px; margin-top: 100px;} #advantages .content .txtBox .inner{ padding: 50px 50px 50px; } #advantages .content .txtBox .sTxt{ color:var(--mainC); font-weight: bold; } #advantages .content .txtBox .title{ color:#fff; line-height: 1.4; font-weight: bold; margin: 60px 0 30px;} #advantages .content .txtBox ul{ display:flex; flex-wrap:wrap; gap: 10px 50px; } #advantages .content .txtBox ul li{ color:rgba(255,255,255,0.9); display:flex; align-items:center; width: calc((100% - 50px) / 2); letter-spacing: -0.9px; font-weight: 300;} #advantages .content .txtBox ul li:before{ content:''; display:block; width: 4px; height: 4px; border-radius:50%; background: var(--mainC); margin-right: 10px;} #advantages.advantages_new .content .r_box { width: 50%; height: fit-content; border-radius:20px; margin-top: 0;} #advantages.advantages_new .content .txtBox{ width: 100%; margin-top: 0;} #advantages.advantages_new .content .media { width: 100%; margin-top: 20px; border-radius:20px; } #advantages.advantages_new .content .mov { position:relative; width: 100%; overflow:hidden; border-radius:20px; } #advantages.advantages_new .content .mov:before { content:''; display:block; padding-bottom:56.25%; } #advantages.advantages_new .content .mov video, #advantages.advantages_new .content .mov iframe { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; -o-object-fit:cover; } #advantages.advantages_new .content .mov img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; -o-object-fit:cover; z-index:2; } #advantages.advantages_new .content .playButton { position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50.2%, -50.2%); cursor:pointer; z-index:5; } #advantages.advantages_new .content .playButton.on { background:url(/img/sub/play_btn.png) center center no-repeat; } @media screen and (max-width:1400px){ #advantages.advantages_new .content .r_box { width: 60%; } } @media screen and (max-width:1200px){ #advantages.advantages_new .content .txtBox ul li { width:100%; } #advantages.advantages_new .content .r_box { width: 70%; } } @media screen and (max-width:960px){ #advantages.advantages_new .content .r_box { width: 100%; } } #interview .content{ position: relative; } #interview .content figure{ flex-shrink:0; margin-left: 25px; position: sticky; right: 0; top: 50px; height: 880px;} #interview .content .ctnBox .itemBox:not(:last-child){ margin-bottom: 80px;} #interview .content .ctnBox .itemBox .txtBox{ display:flex; align-items:center; color:#fff; font-weight: bold; margin-bottom: 20px; line-height: 1.6;} #interview .content .ctnBox .itemBox .txtBox span{ width: 60px; height: 60px; border-radius:50%; background: var(--mainC); color:#fff; font-family:var(--Red); font-weight: bold; display:flex; justify-content:center; align-items:center; margin-right: 20px; flex-shrink:0; } #interview .content .ctnBox .itemBox .item{ border-radius:20px; background-image: linear-gradient(#141414, #141414), linear-gradient(165deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1));} #interview .content .ctnBox .itemBox .item .inner{ padding: 45px 40px; color:rgba(255,255,255,0.9); line-height: 30px; font-weight: 300; } #interview .content .ctnBox .itemBox .item p:not(:last-child){ margin-bottom: 20px;} #globalC .topBox{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 50px; } #globalC .topBox .txtBox .title{ color:var(--mainC); font-weight: bold; font-family:var(--Red); margin-bottom: 20px;} #globalC .topBox .txtBox .txt{ color:rgba(255,255,255,0.9); line-height: 1.6; } #globalC .slideBox{ margin-left: 9.635416666666667%;} #globalC .slideBox .slick-slide{ margin-right: 70px; border-radius:20px; overflow: hidden;} #implantC{ position: relative; padding-top: 220px;} #implantC .bg{ position: absolute; transform:translateX(-50%); top: 0; left: 50%; z-index: -1;} #implantC .content .ctnBox{ display:flex; gap:717px; } #implantC .content .ctnBox .itemBox{ width: 100%;} #implantC .content .ctnBox .itemBox figure{ width: 135px; height: 135px; border-radius:50%; background: linear-gradient(141deg, #27C6C7 8.89%, #3E7FDF 87.6%); display:flex; justify-content:center; align-items:center; } #implantC .content .ctnBox .itemBox .title{ margin: 20px 0; color:#fff; letter-spacing: -0.46px; font-weight: 600; } #implantC .content .ctnBox .itemBox ul li{ color:rgba(255, 255, 255, 0.9); display:flex; gap:10px; font-weight: 300;} #implantC .content .ctnBox .itemBox ul li:not(:last-child){ margin-bottom: 10px; } #implantC .content .ctnBox .itemBox ul li:before{ content:''; display:block; width: 4px; height: 4px; border-radius:50%; background: var(--mainC); flex-shrink:0; margin-top: 10px; } #implantC .content .ctnBox .itemBox:nth-child(2n-1){ display: flex; flex-direction: column; align-items: flex-end; text-align: right; } #implantC .content .ctnBox .itemBox:nth-child(2n-1) ul li{ justify-content: flex-start; flex-direction: row-reverse; } #implantC .content .ctnBox.type2{ gap:260px; margin-top: -75px;} .catalog #tabBox li{ width: 100%; } .catalog .ctnBox{ display:flex; flex-wrap:wrap; gap:70px 35px; } .catalog .ctnBox .itemBox{ width: calc((100% - 105px) / 4); } .catalog .ctnBox .itemBox .imgBox{ position: relative; border-radius:20px; overflow: hidden;} .catalog .ctnBox .itemBox .imgBox figure{ width: 100%; height: 530px; border-radius: 15px; overflow: hidden;} .catalog .ctnBox .itemBox .imgBox p{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:flex; justify-content:center; align-items:center; flex-direction:column; background: rgba(30,182,183,0.7); color:#fff; opacity: 0; transition:all 0.5s; } .catalog .ctnBox .itemBox .imgBox p:after{ content:''; display:block; width: 50px; height: 50px; border-radius:50%; border:1px solid #fff; display:flex; justify-content:center; align-items:center; margin-top: 20px; background: url(/img/sub/xi-download.png) no-repeat 50% 50%; } .catalog .ctnBox .itemBox .imgBox p i{ display:none; } .catalog .ctnBox .itemBox .title{ color:#fff; line-height: 30px; margin: 25px 0 20px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis;} .catalog .ctnBox .itemBox .day{ color:rgba(255,255,255,0.4); } .catalog .ctnBox .itemBox:hover .imgBox p{ opacity: 1; } #inno .info{ margin-bottom: 240px; } #inno .info .imgBox{ display:flex; align-items:center; justify-content:space-between; gap:60px; margin-bottom: 110px;} #inno .info .imgBox .txt{ position: relative; width: 300px; height: 300px; border-radius:50%; background: var(--mainC); color:#fff; display:flex; justify-content:center; align-items:center; font-weight: 500; line-height: 33px; text-align: center; } #inno .info .imgBox .txt:after{ content:''; display:block; width: 167px; height: 1px; border-top:1px dashed var(--mainC); position: absolute; transform:translateY(-50%) ;top: 50%; left: 100%; } #inno .info .imgBox .txt.type2{ background: #3E81DF;} #inno .info .imgBox .txt.type2:after{ left: auto; right: 100%; border-top:1px dashed #3E81DF;} #inno .info .imgBox figure .circle01{ animation: rotate 12s linear infinite; transform-origin: center center;} #inno .info .imgBox figure .circle02{ animation: reverse-rotate 12s linear infinite; transform-origin: center center;} #inno .info .ctnBox{ display:flex; flex-wrap:wrap; gap: 25px; } #inno .info .ctnBox .itemBox{ width: calc((100% - 100px) / 5); padding: 55px 10px 30px; border-radius: 30px; display:flex; align-items:center; flex-direction:column; color:#fff; font-weight: 200; text-align: center; background: rgba(30,182,183,0.3); line-height: 30px;} #inno .info .ctnBox .itemBox figure{ margin-bottom: 35px;} #inno .key .content:not(:last-child){ margin-bottom: 155px;} #inno .key .content h4.title{ display:flex; align-items:center; color:#fff; font-weight: 600; margin-bottom: 35px; } #inno .key .content h4.title span{ width: 40px; height: 40px; border-radius:50%; background: var(--mainC); display:flex; justify-content:center; align-items:center; font-family:var(--Red); margin-right: 15px; flex-shrink:0; } #inno .key .content .ctnBox{ background-image: linear-gradient(#141414, #141414), linear-gradient(145deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); border-radius:20px; } #inno .key .content .ctnBox .inner{ padding: 65px 45px 75px; display:flex; justify-content:space-between; gap:30px; } #inno .key .content .ctnBox:not(:last-child){ margin-bottom: 30px;} #inno .key .content .ctnBox .title{ color:#fff; font-family:var(--Red); line-height: 40px; font-weight: 500;} #inno .key .content .ctnBox .inner > div{ max-width:1085px; width: 100%; flex-shrink:0; } #inno .key .content .ctnBox .rightBox .txtBox{ margin-bottom: 25px;} #inno .key .content .ctnBox .rightBox .txtBox li{ color:rgba(255,255,255,0.9); display:flex; line-height: 30px; font-weight: 300;} #inno .key .content .ctnBox .rightBox .txtBox li:not(:last-child){ margin-bottom: 15px;} #inno .key .content .ctnBox .rightBox .txtBox li:before{ content:''; display:block; width: 3px; height: 3px; border-radius:50%; background: var(--mainC); margin-right: 10px; margin-top: 12px; flex-shrink:0; } #inno .key .content .ctnBox .rightBox .itemBox .item figure{ margin-bottom: 15px;} #inno .key .content .ctnBox .rightBox .itemBox .item .flex .txt{ margin-right: 20px; } #inno .key .content .ctnBox .rightBox .itemBox .item .flex ul li{ color:rgba(255,255,255,0.9)} #inno .key .content .ctnBox .rightBox .itemBox .item .flex ul li:not(:last-child){ margin-bottom: 5px;} #inno .key .content .ctnBox .rightBox .tableBox tr *{ height: 50px; text-align: center; color:#fff; } #inno .key .content .ctnBox .rightBox .tableBox th{ background: var(--mainC); border:1px solid rgba(255, 255, 255, 0.30); font-weight: 300;} #inno .key .content .ctnBox .rightBox .tableBox td{ border:1px solid rgba(255, 255, 255, 0.30);} #inno .key .content .ctnBox .rightBox .tableBox td.color{ color:var(--mainC); font-weight: 600;} #inno .key .content .ctnBox .rightBox .tableBox br.m{ display:none; } #inno .key .content:not(.type2) .ctnBox .rightBox .itemBox{ display:flex; margin-left: -15px;} #inno .key .content:not(.type2) .ctnBox .rightBox .itemBox .item{ padding: 15px; width: calc(100% / 4); color:#fff; font-weight: 300;} #inno .key .content:not(.type2) .ctnBox .rightBox .itemBox .item:last-child{ box-shadow: inset 0 0 0 4px var(--mainC); } #inno .key .content:not(.type2) .ctnBox .rightBox .itemBox .item:last-child .txt{ color:var(--mainC); font-weight: 600;} #inno .key .content.type2 .ctnBox{ background-image: linear-gradient(#141414, #141414), linear-gradient(160deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); } #inno .key .content.type2 .ctnBox .rightBox{ display:flex; flex-direction:column; justify-content:space-between; } #inno .key .content.type2 .ctnBox .rightBox:not(:last-child) .itemBox{ margin-right: 115px;} #inno .key .content.type2 .ctnBox .rightBox .itemBox{ display:flex; color:#fff; font-weight: 300; } #inno .key .content.type2 .ctnBox .rightBox .itemBox .item:not(:last-child){ margin-right: 20px; } #inno .key .content.type2 .ctnBox .rightBox:last-child .itemBox{ text-align: center; justify-content: flex-end; margin-right: 65px;} .solutionM #tabBox li{ width: calc(100% / 3);} .solutionM .down{ width: 230px; height: 60px; } .solutionM .down a{ display:flex; justify-content:center; align-items:center; width: 100%; height: 100%; background: var(--mainC); color:#fff; border-radius:50px; } .solutionM .down a img{ margin-left: 10px;} .solutionM .content section > .title{ color:#fff; font-weight: bold; font-family:var(--Red); margin-bottom: 60px; } .solutionM .content section > div{ border-radius:20px; background-image: linear-gradient(#141414, #141414), linear-gradient(145deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); } .solutionM .content section > div .inner{ padding: 30px;width: 100%; } .solutionM .content section .imgBox figure{ text-align: center; } .solutionM .content section .imgBox .txtBox .title{ color:#fff; margin-bottom: 20px; font-weight: 500;} .solutionM .content section .imgBox .txtBox ul li:not(:last-child){ margin-bottom: 10px;} .solutionM .content section .ctnBox{ margin-bottom: 60px; } .solutionM .content section .ctnBox .inner{ justify-content:space-between; } .solutionM .content section .ctnBox .leftBox .title{ color:#fff; font-family:var(--Red); font-weight: 600; margin-bottom: 20px; } .solutionM .content section .ctnBox .leftBox .txtBox{ display:flex; align-items:center; } .solutionM .content section .ctnBox .leftBox .txtBox ul{ margin-left: 20px;} .solutionM .content section ul li{ color:rgba(255,255,255,0.9); display:flex; line-height: 30px; font-weight: 300; font-family:var(--Red); } .solutionM .content section ul li:not(:last-child){ margin-bottom: 17px;} .solutionM .content section ul li:before{ content:''; display:block; width: 3px; height: 3px; border-radius:50%; background: var(--mainC); margin-right: 10px; margin-top: 12px; flex-shrink:0; } .solutionM .content section .ctnBox .leftBox .down{ margin-top: 205px; } /* 2025-08-02 수정 */ #inno .key .content .ctnBox .rightBox .itemBox.half{ flex-wrap: wrap; margin-bottom: -10px; } #inno .key .content .ctnBox .rightBox .itemBox.half .item{ width: calc((100% - 20px) / 2); padding: 10px 10px 20px; margin-right: 20px; margin-bottom: 10px; } #inno .key .content .ctnBox .rightBox .itemBox.half .item:nth-of-type(2n){ margin-right: 0; } #inno .key .content .ctnBox .rightBox .itemBox.half .item img{ width: 100%; } #inno .key .content .ctnBox .rightBox .itemBox.first{ margin-left: 0; } #inno .key .content .ctnBox .rightBox .itemBox.first .item:first-child{ box-shadow: inset 0 0 0 4px var(--mainC); } #inno .key .content .ctnBox .rightBox .itemBox.first .item:first-child .flex .txt{ font-weight: 600; color: var(--mainC); } #inno .key .content .ctnBox .rightBox .itemBox.first .item:last-child{ box-shadow: unset; } #inno .key .content .ctnBox .rightBox .itemBox.first .item:last-child .flex .txt{ font-weight: normal; color: #FFF; } /* 2025-08-02 수정 */ #sfit #tabBox{ font-family:var(--Red); } #sfit ul:not(#tabBox) li:not(:last-child){ margin-bottom: 10px; } #sfit ul:not(#tabBox) li:before{content:''; display:block; width: 3px; height: 3px; border-radius:50%; background: var(--mainC); margin-right: 10px; margin-top: 12px; flex-shrink:0; } #sfit > div > section:not(:last-child){ margin-bottom: 155px;} #sfit .solution{ position: relative; background-image: linear-gradient(#141414, #141414), linear-gradient(150deg, rgba(252, 200, 89, 1), rgba(14, 14, 14, 1), rgba(189, 140, 71, 1), rgba(14, 14, 14, 1), rgba(229, 164, 36, 1)); border-radius:20px; overflow: hidden;} #sfit .solution .bg{ position: absolute; bottom: 0; left: 0; } #sfit .solution .bg02{ left: auto; right: 0; } #sfit .solution .inner{ padding: 50px 60px 60px; position: relative; z-index: 2;} #sfit .solution .logoBox .title{ background: linear-gradient(90deg, #E4A425 0%, #F5C35D 22%, #BF8F4C 41%, #E3A547 63%, #B68347 82%, #E7A622 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; margin-top: 10px; margin-bottom: 330px;} #sfit .solution .txtBox .txt{ color:#fff; font-weight: 600; } #sfit .solution .txtBox > .txt{ margin-bottom: 30px;} #sfit .solution .txtBox .ctnBox{ align-items:center; } #sfit .solution .txtBox .ctnBox p{ padding: 20px 50px; border-radius:20px; background: linear-gradient(97deg, #FDCB5D 0.88%, #E7A523 99.25%); } #sfit .solution .txtBox .ctnBox figure{ width: 35px; height: 35px; border-radius:50%; background: #333230; display:flex; justify-content:center; align-items:center; margin: 0 30px;} #sfit .advantages .ctnBox{ border-radius:20px; background-image: linear-gradient(#1A1A1A, #1A1A1A), linear-gradient(155deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); } #sfit .advantages .ctnBox .inner{ padding: 60px; text-align: center; } #sfit .advantages .ctnBox ul{ display:flex; flex-wrap:wrap; margin-top: 60px;} #sfit .advantages .ctnBox ul li{ width: calc((100% - 100px) / 2); display:flex; color:rgba(255,255,255,0.9); text-align: left;} #sfit .system .content section{ display:none; } #sfit .system .content section.on{ display:block; } #sfit .system .content .imgBox{ border-radius:20px; background-image: linear-gradient(#0E0E0E, #0E0E0E), linear-gradient(155deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); margin-bottom: 60px;} #sfit .system .content .imgBox .inner{ padding: 60px 0; } #sfit .system .content .imgBox.type1{ padding: 45px 0;} #sfit .system .content .downBox{ background-image: linear-gradient(#141414, #141414), linear-gradient(170deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); } #sfit .system .content .downBox .inner > div{ justify-content:space-between; align-items:flex-end; } #sfit .system .content .downBox .title{ color:#fff; font-weight: 600; font-family:var(--Red); margin-bottom: 20px;} #sfit .system .content .downBox .txtBox{ align-items:center; } #sfit .system .content .downBox .txtBox ul{ margin-left: 20px;} #sfit .system .content .downBox .txtBox ul li{ display:flex; color:rgba(255,255,255,0.9)} #sfit .system .content .downBox .txtBox ul li:not(:last-child){ margin-bottom: 17px;} .kit .content{ border-radius:20px; background-image: linear-gradient(#141414, #141414), linear-gradient(155deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); } .kit .content .inner{ padding: 60px 50px 70px; } .kit .content .inner figure{ text-align: center; margin-bottom: 60px; } .kit .content .inner .txtBox .title{ color:#fff; font-family:var(--Red); font-weight: 600; margin-top: -5px; } .kit .content .inner .txtBox > *:first-child{ max-width:400px; width: 100%; flex-shrink:0; margin-right: 30px; } .kit .content .inner .txtBox ul li{ display:flex; color:rgba(255,255,255,0.9)} .kit .content .inner .txtBox ul li:not(:last-child){ margin-bottom: 15px;} .kit .content .inner .txtBox ul li:before{ content:''; display:block; width: 3px; height: 3px; border-radius:50%; background: var(--mainC); margin-right: 10px; margin-top: 12px; flex-shrink:0; } /*.kit.type2 .content .inner .txtBox .titleBox{ width: 40%; flex-shrink:0; margin-right: 30px; }*/ .kit.type2 .content .inner .txtBox .title{ min-width:auto; margin-right: 0;} .kit.type2 .content .inner .txtBox .txt{ color:#fff; margin-top: 20px; line-height: 1.4;} .kit .content2{ margin-top: 60px; border-radius:20px; } #bmp .content2 .inner{ padding: 60px; } #bmp .content2 .orderBox{ display:flex; margin-bottom: 65px;} #bmp .content2 .orderBox .imgBox{ display:flex; width: 100%; } #bmp .content2 .orderBox .imgBox .itemBox{ position: relative; width: calc((100% - 60px) / 4); padding: 30px 20px 20px; display:flex; flex-direction:column; justify-content:space-between; background: rgba(255, 255, 255, 0.05); border-radius: 20px; margin-right: 20px;} #bmp .content2 .orderBox .imgBox .itemBox:after{ content:''; width: calc(100% - 2px); height: calc(100% - 2px); aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 1px; border-radius: 20px; background: linear-gradient(125deg, rgba(39, 198, 199, 1), rgba(62, 127, 223, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5;} #bmp .content2 .orderBox .imgBox .itemBox .num{ background: var(--gradation, linear-gradient(141deg, #27C6C7 8.89%, #3E7FDF 87.6%)); border-radius:50%; width: 40px; height: 40px; display:flex; justify-content:center; align-items:center; font-family: var(--Red); color:#fff; font-weight: 600; margin-left: 10px; letter-spacing: -0.48px; font-weight: 600;} #bmp .content2 .orderBox .imgBox .itemBox .txt{ color:#fff; white-space:nowrap; letter-spacing: -0.4px; font-weight: 500; } #bmp .content2 .orderBox .imgBox .itemBox figure{ margin: 10px 0 50px;} #bmp .content2 .orderBox .chartBox{ width: 320px; flex-shrink:0; } #bmp .content2 .orderBox .chartBox .txt{ text-align: right; color:#fff; letter-spacing: -0.36px; margin-bottom: 20px; } #bmp .content2 .orderBox .chartBox div{ display:flex; } #bmp .content2 .orderBox .chartBox div dl{ width: 50%; text-align: center; } #bmp .content2 .orderBox .chartBox div dl > *{ height: 40px; line-height: 40px;} #bmp .content2 .orderBox .chartBox div dl dt{ background: var(--mainC); color:#000; letter-spacing: -0.36px; } #bmp .content2 .orderBox .chartBox div dl dd{ background: rgba(255, 255, 255, 0.10); color:#fff; } #bmp .content2 .orderBox .chartBox div dl dd:not(:first-child){ margin-top: 1px;} #bmp .content2 .orderBox .chartBox div dl:first-child > *{ border-right: 1px solid #232323; } #bmp .content2 .ctnBox{ display:flex; flex-wrap:wrap; } #bmp .content2 .ctnBox .itemBox{ width: calc((100% - 40px) / 3); display:flex; flex-direction:column; justify-content:space-between; } #bmp .content2 .ctnBox .itemBox:not(:last-child){ margin-right: 20px; } #bmp .content2 .ctnBox .itemBox .titleBox *{ display:flex; align-items:center; justify-content:center; min-height:60px; text-align: center; } #bmp .content2 .ctnBox .itemBox .titleBox .title{ color:#fff; background: var(--mainC); } #bmp .content2 .ctnBox .itemBox .titleBox div p{ width: 50%; background: #188687; color:#fff; letter-spacing: -0.4px; font-weight: 500;} #bmp .content2 .ctnBox .itemBox .titleBox div p:last-child{ background: rgba(255, 255, 255, 0.30); } #bmp .content2 .ctnBox .itemBox .titleBox > p{ background: rgba(255, 255, 255, 0.05); padding: 18px 0; letter-spacing: -0.36px; line-height: 1.5; font-weight: 500; color:#fff; } #bmp .content2 .ctnBox .itemBox .qrBox{ height: 500px; display:flex; flex-direction:column; margin: 20px 0 60px;} #bmp .content2 .ctnBox .itemBox .qrBox div{ height: calc((100% - 20px) / 3);position: relative; border-radius: 10px; background: rgba(255, 255, 255, 0.05); padding: 20px; color:#fff; display:flex; justify-content: space-between; font-weight: 600; letter-spacing: -0.48px; } #bmp .content2 .ctnBox .itemBox .qrBox div:not(:last-child){ margin-bottom: 10px;} #bmp .content2 .ctnBox .itemBox .qrBox div:after{ content:''; border-radius: 10px; width: calc(100% - 2px); height: calc(100% - 2px); aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 1px; border-radius: 10px; background: linear-gradient(150deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1),rgba(30, 182, 183, 1), rgba(14, 14, 14, 1),rgba(30, 182, 183, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5;} #bmp .content2 .ctnBox .itemBox .qrBox div p{ display:flex; flex-direction:column; justify-content:space-between; margin-right: 20px; width: 35%; flex-shrink: 0; } #bmp .content2 .ctnBox .itemBox .qrBox div p span{ color: rgba(255, 255, 255, 0.80); letter-spacing: -0.36px; line-height: 1.5; font-weight: 300;} #bmp .content2 .ctnBox .itemBox .qrBox div .bTxt{ position: absolute; top:calc(100% + 15px); right: 0; white-space:nowrap; font-weight: 300; letter-spacing: -0.36px; width: auto; } #bmp .content2 .ctnBox .itemBox .infoBox dt{ display: inline-flex; padding: 10px; justify-content: center; align-items: center; border-radius:50px; color:#fff; letter-spacing: -0.4px; font-weight: 600; text-align: center; width: 100%; background: #7fbe26; margin-bottom: 15px; } #bmp .content2 .ctnBox .itemBox .infoBox dd{ display:flex; width: 100%;} #bmp .content2 .ctnBox .itemBox .infoBox dd div{ width: 50%; } #bmp .content2 .ctnBox .itemBox .infoBox dd div p{ display:flex; justify-content:center; align-items:center; height: 40px; background: var(--mainC); font-weight: 300; color:#000; } #bmp .content2 .ctnBox .itemBox .infoBox dd div p.txt{ background: rgba(255, 255, 255, 0.10); color:#fff; } #bmp .content2 .ctnBox .itemBox .infoBox dd div:first-child p{ border-right:1px solid #232323; } #bmp .content2 .ctnBox .itemBox:nth-child(2) .infoBox dt{ background: #00A0E9; } #bmp .content2 .ctnBox .itemBox:nth-child(3) .infoBox dt{ background: #EA5B86; } #mesh .content2 .ctnBox{ max-width:1100px; margin: 140px auto; width: 100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:60px 80px; } #mesh .content2 .ctnBox .itemBox{ text-align: center; display:flex; flex-direction:column; justify-content: flex-end; } #mesh .content2 .ctnBox .itemBox p{ margin-top: 20px; color:#fff; font-family: var(--Red);} #guide section:not(:last-child){ margin-bottom: 210px;} #guide .bLine{ border-radius:20px; background-image: linear-gradient(#131313, #131313), linear-gradient(165deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1));} #guide .listBox .title{ color:#fff; margin-bottom: 30px; font-weight: bold; } #guide .listBox ul{ margin-bottom: 30px;} #guide .listBox ul li{ display:flex; color:rgba(255,255,255,0.9); font-weight: 300; } #guide .listBox ul li:not(:last-child){ margin-bottom: 15px;} #guide .listBox ul li:before{ content:''; display:block; width: 3px; height: 3px; border-radius:50%; background: var(--mainC); margin-right: 10px; margin-top: 10px; flex-shrink:0; } #guide .info .imgBox { position:relative; margin-bottom: 60px;} #guide .info .imgBox .fitBox{ width: 100%; height: 520px; border-radius: 20px; } #guide .info .imgBox .txtBox{ position: absolute; padding: 50px; bottom: 0; left: 0; color:#fff; } #guide .info .imgBox .txtBox .title{ font-weight: bold; margin-bottom: 10px; } #guide .info .imgBox .txtBox .txt{ color:rgba(255,255,255,0.9); line-height: 1.6;} #guide .info .ctnBox{ padding: 75px 50px; display:flex; gap:60px; } #guide .info .ctnBox .itemBox{ position: relative; } #guide .info .ctnBox .itemBox .arrow{ position: absolute; transform:translateY(-50%); top: 50%; right:-45px; } #guide .intro .inner{ text-align: center; padding: 50px;} #guide .intro .bLine .txt{ padding: 0 50px 50px; color:#fff; font-weight: 500;} #guide .intro .listBox:first-of-type{ margin-bottom: 60px;} #guide .intro .ctnBox.type2 .inner{ padding: 90px 20px; justify-content:center; align-items:flex-end; flex-wrap: wrap; gap:40px 0; } #guide .intro .ctnBox.type2 .leftBox{ margin-right: 120px;} /*#guide .intro .ctnBox.type2 .leftBox .img01{ align-items:flex-end; }*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul{ margin-bottom: 0; margin-left: 75px;}*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li{ position: relative; display:block; text-align: left; color:rgba(255,255,255,0.8); }*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li:before{ width: 11px; height: 11px; background: #fff; position: absolute; top: 0; left: -25px; z-index: 5;}*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li:after{ content:''; display:block; width: 140px; height: 1px; position: absolute; top: 15px; left: -160px; mix-blend-mode: exclusion;*/ /*border-top:1px dashed rgba(255,255,255,0.5); }*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li.txt1{ margin-bottom: 28px;}*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li.txt2{ margin-bottom: 66px;}*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li.txt2:after{ width: 125px; left: -145px;}*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li.txt3{ margin-bottom: 107px;}*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li.txt3:after{ width: 160px; left: -180px;}*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li.txt4{ margin-bottom: 11px;}*/ /*#guide .intro .ctnBox.type2 .leftBox .img01 ul li span{ display:block; color:#fff; font-weight: 600;}*/ #guide .intro .ctnBox.type2 .leftBox .img{ display:flex; align-items:flex-end; margin-left: -50px;} #guide .intro .ctnBox.type2 .rightBox .imgBox{ justify-content: space-around;} #guide .intro .ctnBox.type2 .rightBox dl > *{ display:flex; } #guide .intro .ctnBox.type2 .rightBox dl p{ width: 160px; height: 40px; display:flex; justify-content:center; align-items:center; } #guide .intro .ctnBox.type2 .rightBox dl dt p{ background: var(--mainC); color:#000; border:1px solid #232323; } #guide .intro .ctnBox.type2 .rightBox dl dd p{ background: rgba(255,255,255,0.2); color:#fff; border:1px solid #232323; } #guide .intro .ctnBox.type2 .rightBox dl dd p span{ font-weight: 200;} #guide .howto > .title{ color:#fff; font-weight: 500; display:flex; align-items:center; margin-bottom: 35px; } #guide .howto > .title span{ width: 40px; height: 40px; background: var(--mainC); border-radius:50%; display:flex; justify-content:center; align-items:center; font-family:var(--Red); font-weight: bold; color:#fff; margin-right: 15px;} #guide .howto .bLine:first-of-type{ margin-bottom: 70px;} #guide .howto .ctnBox{ padding: 50px; flex-wrap:wrap; gap:20px; } #guide .howto .ctnBox .itemBox{ width: calc((100% - 60px) / 4); text-align: center; line-height: 1.65; letter-spacing: -0.36px; color: rgba(255, 255, 255, 0.90);} #guide .howto .ctnBox .itemBox p{ margin-top: 20px;} #guide .howto .ctnBox.type2{ gap:30px; } #guide .howto .ctnBox.type2 .itemBox{ width: calc((100% - 60px) / 3); } #reid .ctnBox{ align-items:center; justify-content: space-between; gap:50px; } #reid .ctnBox .txtBox{ width: 50%; } #reid .ctnBox .txtBox .sTxt{ color:var(--mainC); font-family:var(--Red); font-weight: bold; } #reid .ctnBox .txtBox .title{ color:#fff; line-height: 1.4; font-weight: bold; margin-bottom: 40px;} #reid .ctnBox .txtBox .txt{ color:rgba(255,255,255,0.9); line-height: 1.6; letter-spacing: -0.36px; font-weight: 300;} #reid .ctnBox .txtBox .txt:not(:last-child){ margin-bottom: 20px;} .seminar .ctnBox{ flex-wrap:wrap; gap:70px 25px; } .seminar .ctnBox .itemBox{ width: calc((100% - 75px) / 4);} .seminar .ctnBox .itemBox .fitBox{ width: 100%; /* height: 320px; */ padding-bottom: 100%; border-radius:30px; } .seminar .ctnBox .itemBox .txtBox .title{ color:#fff; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; margin: 20px 0;} .seminar .ctnBox .itemBox .txtBox ul li{ color: rgba(255, 255, 255, 0.80); display:flex; } .seminar .ctnBox .itemBox .txtBox ul li:not(:last-child){ margin-bottom: 5px; } .seminar .ctnBox .itemBox .txtBox ul li span{ color: rgba(255, 255, 255, 0.50); margin-right: 5px;} #data .ctnBox .itemBox .txtBox ul li{ color: rgba(255, 255, 255, 0.50); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;} #data_view .view_ctn .tit ul li{ font-size:14px; } #talent section:not(:first-child){ padding-top: 140px;} #talent .content .tabBox li{ width: calc((100% - 4px) / 5); } #talent .intro{ overflow: hidden;} #talent .intro > .w1550{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 65px; } #talent .intro > .w1550 #title{ margin-bottom: 0; } #talent .intro .arrowBox{ display:flex; } #talent .intro .slideBox .w1550{ position: relative; } #talent .intro .slideBox .slick-slide{ position: relative; } #talent .intro .slideBox .slick-slide .fitBox, #talent .intro .slideBox .mainSlide:before{ height: 527px; border-radius:10px; } #talent .intro .slideBox .slick-slide .title{ color:#fff; font-weight: bold; position: absolute; bottom: 30px; left: 40px; z-index: 2;} #talent .intro .slideBox .mainSlide{ position: relative; width: 583px; border-radius:10px; overflow: hidden;} #talent .intro .slideBox .mainSlide:before{ content:''; display:block; position: absolute; top: 0; left: 0; background: #0E0E0E;} #talent .intro .slideBox .mainSlide .slick-slide .fitBox, #talent .intro .slideBox .mainSlide:before{ width: 100%; } #talent .intro .slideBox .subSlide{ position: absolute; top: 0; left: 285px; z-index: -1;} #talent .intro .slideBox .subSlide .slick-slide{ margin-right: 25px;} #talent .intro .slideBox .subSlide .slick-slide .fitBox{ position: relative; width: 297px; } #talent .intro .slideBox .subSlide .slick-slide .fitBox:after{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);} #talent .order .ctnBox{ position: relative; display:flex; justify-content: center; } #talent .order .ctnBox:before{ content:''; display:block; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 60%; height: 1px; background: url(/img/sub/talentLine.png) no-repeat 50% 50%; background-size:cover; z-index: -1;} #talent .order .ctnBox .itemBox{ text-align: center; width: 320px; height: 320px; border-radius:50%; background: var(--mainC); display:flex; justify-content:center; align-items:center; flex-direction:column; } #talent .order .ctnBox .itemBox:not(:last-child){ margin-right: 120px; } #talent .order .ctnBox .itemBox.item2{ background: #1E92B7;} #talent .order .ctnBox .itemBox.item3{ background: #1E5BB7;} #talent .order .ctnBox .itemBox .num{ color:rgba(255,255,255,0.8); } #talent .order .ctnBox .itemBox figure{ margin: 20px 0;} #talent .order .ctnBox .itemBox .txt{ color:#fff; font-weight: 600; } #talent .iconBox{ display:flex; flex-wrap:wrap; text-align: center; } #talent .iconBox .itemBox{ background-image: linear-gradient(#141414, #141414), linear-gradient(140deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); border: 1px solid transparent; background-origin: border-box; background-clip: content-box, border-box; border-radius:20px; } #talent .iconBox .itemBox .title{ color:#fff; margin-top: 35px; font-weight: 500;} #talent .policy .iconBox{ gap:20px; } #talent .policy .iconBox .itemBox{ width: calc((100% - 80px) / 5); } #talent .policy .iconBox .itemBox .innerBox{ padding: 40px 20px;} #talent .welfare .iconBox{ gap:30px; } #talent .welfare .iconBox .itemBox{ width: calc((100% - 60px) / 3); } #talent .welfare .iconBox .itemBox .innerBox{ padding: 50px 20px;} #talent .welfare .btnBox{ display:flex; justify-content:center; margin-top: 130px; } #talent .welfare .btnBox button{ width: 280px; height: 70px; background: var(--mainC); color:#fff; font-weight: 600; border-radius:50px; } #talent .welfare .btnBox button img{ margin-left: 10px;} .membership .orderBox{ display:flex; align-items:center; justify-content:center; margin: 90px 0 70px;} .membership .orderBox .itemBox{ display:flex; align-items:center; text-align: center; } .membership .orderBox .itemBox > div{ display:flex; flex-direction:column; align-items:center; } .membership .orderBox .itemBox .item{ width: 80px; height: 80px; border-radius:50%; background: rgba(255,255,255,0.05); display:flex; justify-content:center; align-items:center; font-family:var(--Red); font-weight: 500; color:rgba(255,255,255,0.5); } .membership .orderBox .itemBox .item img{ opacity: 0.3;} .membership .orderBox .itemBox .txt{ color:rgba(255,255,255,0.7); letter-spacing: -0.36px; margin-top: 30px;} .membership .orderBox .itemBox .arrow{ margin: -40px 30px 0;} .membership .orderBox .itemBox.on .item{ background: var(--mainC);} .membership .orderBox .itemBox.on .item img{ opacity: 1;} .membership .orderBox .itemBox.on .txt{ color:#fff; } .membership .orderBox .itemBox.before .item{ background: rgba(30,182,183,0.3);} .membership .content{ margin-bottom: 0; } #terms .cBox{ margin-bottom: 0; } #terms .cBox .chkBox{ margin-right: 0; } #terms .ctnBox:not(:first-child){ margin-top: 100px; } #terms .ctnBox{ width: 100%; height: 540px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.03); padding: 30px 10px;} #terms .ctnBox .scrollBox{ height: 100%; overflow-y: scroll; padding: 0 40px;} #terms .ctnBox .scrollBox::-webkit-scrollbar{ background: transparent; width: 8px;} #terms .ctnBox .scrollBox::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.1); border-radius:20px; } #terms .ctnBox .scrollBox .innerBox{ color:rgba(255,255,255,0.8); line-height: 1.6; font-weight: 300; font-size:16px; } #terms .ctnBox .scrollBox .innerBox > p:not(:last-of-type), #terms .ctnBox .scrollBox .innerBox > dl{ margin-bottom: 30px;} #terms .ctnBox .scrollBox .innerBox > dl dt{ margin-bottom: 5px;} #terms .ctnBox .scrollBox .innerBox .privacy *{ font-size:16px !important; } #terms .ctnBox .scrollBox .innerBox .privacy > dl > dt{ color:#fff; font-weight: 300; } #terms .ctnBox .scrollBox .innerBox .privacy > dl > dd > ul > li{ text-indent: -15px; margin-left: 15px;} #terms .ctnBox .scrollBox .innerBox .privacy > dl > dd .innerList li{ text-indent: 0; margin-left: 0;} #terms .btnBox{ margin-top: 140px;} .complete .orderBox{ margin-bottom: 100px;} .complete .content{ position: relative; } .complete .content .bg{ position: absolute; transform:translate(-50%,-50%); top: 42.5%; left: 50%; width: 100%; z-index: -1;} .complete .ctnBox{ position: relative; overflow: hidden; border-radius: 20px; text-align: center; } .complete .ctnBox:before{ content: ''; position: absolute; display: block; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 20px; border: 2px solid transparent; background-image: linear-gradient(160deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); box-sizing: border-box; top: -1px; left: -1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; z-index: -1; backdrop-filter: blur(10px); } .complete .ctnBox > div{ padding: 100px 0; color:#fff;} .complete .ctnBox .title{ font-weight: 600; margin: 50px 0 15px;} .complete .ctnBox .txt{ margin-bottom: 50px; } .complete .ctnBox .btnBox button{ width: 200px; height: 70px; border-radius:50px; background: var(--mainC); color:#fff; font-weight: 600; } #login .content .bg{ top: 20%;} #login .ctnBox { background: rgba(255, 255, 255, 0.03); } #login .ctnBox > div{ max-width: 600px; margin: 0 auto;} #login .ctnBox .inputBox{ position: relative; width: 100%; margin-bottom: 50px; } #login .ctnBox .inputBox > div{ position: relative; display:flex; padding: 0 30px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.10); display:flex; align-items:center; background: rgba(255, 255, 255, 0.03);} #login .ctnBox .inputBox > div:not(:first-child){ margin-top: 10px;} #login .ctnBox .inputBox > div:before{ content: ''; position: absolute; display: block; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 20px; border: 2px solid transparent; background-image: linear-gradient(to top, rgba(62, 127, 223, 1),rgba(39, 198, 199, 1)); box-sizing: border-box; top: -2px; left: -2px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; z-index: -1; background-clip: padding-box; padding: 2px; opacity: 0; transition:all 0.5s; } #login .ctnBox .inputBox .eyes{ position: absolute; transform:translateY(-50%); top: 50%; right: 30px;} #login .ctnBox .inputBox figure{ flex-shrink:0; } #login .ctnBox .inputBox img{ margin-right: 35px; opacity: 0.1; transition:all 0.5s; } #login .ctnBox .inputBox input{ border:none; background: rgba(255,255,255,0); outline:none; height: 80px; width: 100%; color:#fff; } #login .ctnBox .inputBox input::placeholder{ color:rgba(255,255,255,0.5)} #login .ctnBox .inputBox div.on img{ opacity: 1; } #login .ctnBox .inputBox div.on:before{ opacity: 1; } #login .ctnBox .btnBox button{ width: 100%; border-radius:20px; margin-bottom: 20px;} #login .ctnBox .listBox{ display:flex; justify-content:center; align-items:center; } #login .ctnBox .listBox li{ display:flex; align-items:center; } #login .ctnBox .listBox li a{ color:rgba(255,255,255,0.5); transition:all 0.5s; } #login .ctnBox .listBox li:not(:last-child):after{ content:''; display:block; width: 1px; height: 18px; background: rgba(255,255,255,0.5); margin: 0 23px;} #login .ctnBox .listBox li a:hover{ color:#fff; } #correction{ margin-top: 180px;} #digital #tabBox{ margin-bottom: 60px;} #digital .searchBox{ display:flex; align-items:center; justify-content:flex-end; height: 50px; margin-bottom: 40px;} #digital .searchBox select{ width: 130px; height: 100%; background: none; border:none; border-bottom:1px solid rgba(255,255,255,0.8); color:#fff; padding: 10px 0; background: url(/img/common/selectIcon.png) no-repeat 98% 50%;} #digital .searchBox input{ height: 100%; margin: 0 20px; background: none; border:none; border-bottom:1px solid rgba(255,255,255,0.3); color:#fff; } #digital .searchBox button{ width: 50px; height: 50px; background: var(--mainC); border-radius:50%; } #digital .ctnBox .itemBox{ cursor:pointer; } #digital .ctnBox .itemBox .imgBox span{ position: absolute; top: 15px; left: 15px; background: var(--mainC); color:#fff; font-weight:600; height: 30px; padding: 0 20px; border-radius:50px; display:flex; justify-content:center; align-items:center; } #digital .ctnBox .itemBox .popBox{ position: relative; position:fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; background-image: linear-gradient(#111, #111), linear-gradient(130deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); border: 1px solid transparent; background-origin: border-box; background-clip: content-box, border-box; border-radius: 40px; max-width:1200px; width: 100%; display:none; z-index: 20000;} #digital .ctnBox .itemBox .popBox .closeBtn{ width: 25px; height: 25px; position: absolute; top: 50px; right: 50px;} #digital .ctnBox .itemBox .popBox .closeBtn::before, #digital .ctnBox .itemBox .popBox .closeBtn::after{ content: ""; display: inline-block; width: 100%; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; border-radius:50px; } #digital .ctnBox .itemBox .popBox .closeBtn::before{ transform: translate(-50%, -50%) rotate(45deg); } #digital .ctnBox .itemBox .popBox .closeBtn::after{ transform: translate(-50%, -50%) rotate(-45deg); } #digital .ctnBox .itemBox .popBox .inner{ padding: 120px 120px 80px; display:flex; flex-wrap:wrap; gap:40px; } #digital .ctnBox .itemBox .popBox .inner dl dt{ color:#fff; font-weight: 500; margin-bottom: 15px;} #digital .ctnBox .itemBox .popBox .inner dl dt span{ color:#e00; } #digital .ctnBox .itemBox .popBox .inner dl dd{ } #digital .ctnBox .itemBox .popBox .inner dl dd input[type="text"]{ background: none; border:none; height: 100%; color:#fff; font-weight: 500;} #digital .ctnBox .itemBox .popBox .inner dl dd input[type="text"]::placeholder{ color:rgba(255,255,255,0.5); font-weight: 300; } #digital .ctnBox .itemBox .popBox .inner dl dd .agreeBox{ height: 150px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 20px 30px;} #digital .ctnBox .itemBox .popBox .inner dl dd .agreeBox p{ height: 100%; overflow-y: scroll; font-weight: 200; color:rgba(255,255,255,0.3); } #digital .ctnBox .itemBox .popBox .inner dl dd .agreeBox p::-webkit-scrollbar{ width: 3px;background: transparent; } #digital .ctnBox .itemBox .popBox .inner dl dd .agreeBox p::-webkit-scrollbar-thumb { background: #bbb; } #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox{ display:flex; justify-content:space-between; align-items:center; margin-top: 15px; color:#fff; } #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox .radioBox{ display:flex; } #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox .radioBox input[type="radio"]{ display:none; } #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox .radioBox label { display:flex; align-items:center; color:#555; cursor:pointer; } #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox .radioBox label span{ position: relative; display:block; width: 14px; height: 14px; border:1px solid #555; margin-right: 5px; border-radius:50%; transition:all 0.5s; } #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox .radioBox label span:after{ content:''; display:block; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 7px; height: 7px; border-radius:50%; background: var(--mainC); opacity: 0; transition:all 0.5s; } #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox .radioBox input[type="radio"]:checked + label{ color: #fff; } #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox .radioBox input[type="radio"]:checked + label span{ border:1px solid var(--mainC); } #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox .radioBox input[type="radio"]:checked + label span:after{ opacity: 1;} #digital .ctnBox .itemBox .popBox .inner dl dd .txtBox .radioBox label:first-of-type { margin-right: 20px;} #digital .ctnBox .itemBox .popBox .inner dl dd .downBtn{ width: 305px; height: 60px; border-radius:50px; display:flex; justify-content:center; align-items:center; color:#fff; font-weight: 500; background: var(--mainC); margin: 60px auto 0;} #digital .ctnBox .itemBox .popBox .inner dl:not(.type2){ width: calc((100% - 40px) / 2); } #digital .ctnBox .itemBox .popBox .inner dl:not(.type2) dd{ padding: 0 30px; height: 60px; background: rgba(255, 255, 255, 0.05); border-radius: 10px;} #manual .tableBox{ border-radius: 20px 20px 0px 0px; overflow: hidden;} #manual .tableBox th{ background: var(--mainC); color:#fff; font-weight: 400; height: 70px;} #manual .tableBox th:not(:last-child){ border-right: 1px solid #28E2E3; } #manual .tableBox td{ min-height:70px; padding: 24px 10px; text-align: center; color: rgba(255, 255, 255, 0.8); font-weight: 300; border-bottom: 1px solid rgba(219, 219, 219, 0.15);} #manual .tableBox td a{ color:var(--mainC); font-weight: 500; font-size:17px; } #manual .tableBox td:not(:last-child){ border-right: 1px solid rgba(219, 219, 219, 0.15); } #manual .tableBox td:nth-child(2){ text-align: left; padding: 0 30px;} .lineBg{ position: relative; background-image: linear-gradient(#141414, #141414), linear-gradient(145deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); border: 1px solid transparent; background-origin: border-box; background-clip: content-box, border-box; border-radius:20px; } #caution .ctnBox:not(:last-child){ margin-bottom: 60px; } #caution .ctnBox .inner{ padding: 65px 45px; } #caution .ctnBox .title{ color:#fff; font-weight: 700; margin-bottom: 40px; } #caution .ctnBox ul li{ display:flex; align-items:flex-start; color: rgba(255, 255, 255, 0.90); line-height: 1.5; letter-spacing: -0.4px; } #caution .ctnBox ul li:before{ content:''; display:block; width: 4px; height: 4px; background: var(--mainC); border-radius:50%; margin: 13px 13px 0 0;} #caution .ctnBox ul li:not(:last-child){ margin-bottom: 25px; } :root{ --vh : 100vh; } #bonplant .intro{ position: relative; } #bonplant .intro .txt-wrap{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #bonplant .intro .txt-box{ position: sticky; top: 0; left: 0; height: var(--vh); text-align: center; display:flex; justify-content:center; align-items:center; flex-direction:column; color: #FFF; opacity: 1;} #bonplant .intro .txt-box .title{ font-weight: 700; line-height: 1.4; letter-spacing: -1.2px; margin-bottom: 10px; } #bonplant .intro .txt-box .title span{ color: rgba(255, 255, 255, 0); background: linear-gradient(to left, var(--mainC), var(--mainC)) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; z-index: 5; transition: all 0.7s 0.5s; } #bonplant .intro .txt-box.aos-animate .title span{ background-size:100%; } #bonplant .intro .txt-box .txt{ color: rgba(255, 255, 255, 0.90); font-weight: 500; line-height: 1.5; letter-spacing: -0.48px; } #bonplant .intro .ctn-box{ padding-top: calc( var(--vh) * 1.5); width: 100%; } #bonplant .intro .ctn-box .inner{ position: relative; height: var(--vh); display:flex; justify-content:center; align-items:flex-end; padding: 0 20px 120px; text-align: center; overflow: hidden; clip-path: circle(0); transition:all 1s; } #bonplant .intro .ctn-box .inner:before{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%); opacity: 0; transition:all 0.5s 0.3s; } #bonplant .intro .ctn-box .inner .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #bonplant .intro .ctn-box .inner .title{ position: relative; z-index: 3; color:#fff; font-weight: 700; line-height: 1.4; letter-spacing: -0.2px; overflow: hidden;} #bonplant .intro .ctn-box .inner .title span{ color:var(--mainC); } #bonplant .intro .ctn-box .inner.active{ clip-path: circle(100%); } #bonplant .intro .ctn-box .inner.active:before{ opacity: 1; } #bonplant .intro .ctn-box .inner.active .title span{ position: relative; display: inline-block; transform: translateY(100%); animation: bounce .5s ease both; } @keyframes bounce { 0%{ transform:translateY(100%); } 100% { transform:translateY(0);} } #bonplant .info{ padding: 200px 0 190px; } #bonplant .info .flex-box{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 270px; } #bonplant .info .flex-box .ctn-box{ margin-left: 80px;} #bonplant .info .flex-box .ctn-box .item-box{ position: relative; width: 815px; min-height: 135px; padding: 35px 20px 35px 65px; background: var(--mainC); color:#fff; border-radius:20px; display:flex; align-items:center; } #bonplant .info .flex-box .ctn-box .item-box:not(:last-child){ margin-bottom: 25px; } #bonplant .info .flex-box .ctn-box .item-box:before{ content:''; display:block; width: 80px; height: 1px; background: var(--mainC); position: absolute; transform:translateY(-50%); top: 50%; left: -80px; } #bonplant .info .flex-box .ctn-box .item-box:after{ content:''; display:block; width: 5px; height: 5px; border-radius:50%; background: var(--mainC); position: absolute; transform:translateY(-50%); top: 50%; left: -80px;} #bonplant .info .flex-box .ctn-box .item-box figure{ margin-right: 65px; } #bonplant .info .flex-box .ctn-box .item-box .title{ color: #FFF; font-weight: 600; letter-spacing: -0.46px; margin-bottom: 15px; } #bonplant .info .flex-box .ctn-box .item-box .txt{ color: rgba(255, 255, 255, 0.90); letter-spacing: -0.4px; } #bonplant .info .flex-box .ctn-box .item02, #bonplant .info .flex-box .ctn-box .item02:before, #bonplant .info .flex-box .ctn-box .item02:after{ background: #1E92B7; } #bonplant .info .flex-box .ctn-box .item03, #bonplant .info .flex-box .ctn-box .item03:before, #bonplant .info .flex-box .ctn-box .item03:after{ background: #1E5BB7; } #bonplant .info .flex-box .ctn-box .item04, #bonplant .info .flex-box .ctn-box .item04:before, #bonplant .info .flex-box .ctn-box .item04:after{ background: #511EB7; } #bonplant .info .bLine{ border-radius: 20px; background-image: linear-gradient(#141414, #141414), linear-gradient(160deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1));} #bonplant .info .bLine .inner{ padding: 65px 45px; } #bonplant .info .bLine .inner .title{ color:#fff; font-weight: bold; } #bonplant .info .bLine .inner .txt{ color: rgba(255, 255, 255, 0.90); letter-spacing: 0.4px; line-height: 1.5; } #bonplant .info .bLine .inner .txt:nth-of-type(2){ margin: 25px 0 20px; } #bonplant .effect{ position: relative; padding: 250px 0 220px; } #bonplant .effect .img{ position: absolute; transform:translate(-50%, -50%); top: 50%; left: 50%; z-index: -1;} #bonplant .effect .ctn-box{ display:flex; justify-content:center; gap:255px 430px; flex-wrap:wrap; align-items: flex-start;} #bonplant .effect .ctn-box .item-box{ position: relative; width: calc((100% - 430px) / 2); min-height:210px; background: rgba(255, 255, 255, 0.03); border-radius:20px; padding: 55px 35px; } #bonplant .effect .ctn-box .item-box:before{ content:''; display:block; width: calc(100% - 1px); height: calc(100% - 1px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 1px; border-radius: 20px; background:linear-gradient(160deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5;} #bonplant .effect .ctn-box .item-box .title{ color:#fff; font-weight: 600; letter-spacing: -0.46px; margin-bottom: 15px; } #bonplant .effect .ctn-box .item-box .txt{ color: rgba(255, 255, 255, 0.90); line-height: 1.5; letter-spacing: -0.36px; } #bonplant .effect .circle{ transform-origin:center; animation: rotate 12s linear infinite; } #bonplant .effect .small{ animation: reverse-rotate 12s linear infinite; } #bonplant .firmly{ position: relative; padding: 115px 0 100px; text-align: center; } #bonplant .firmly .bg{ position: absolute; bottom: 0; left: 0; width: 100%; height: 645px; z-index: -1; } #bonplant .firmly .title{ color:#fff; font-weight: 700; line-height: 1.4; letter-spacing: -1.2px; } #bonplant .firmly .title span{ color:var(--mainC); } #bonplant .why{ position: relative; padding: 200px 0 240px; overflow: hidden;} #bonplant .why .bg{ position: absolute; transform:translateX(-50%); /* bottom: 20px; */ bottom: -10px; left: 50%; z-index: -1; width: max-content;} #bonplant .why .ctn-box{ display:flex; flex-wrap:wrap; gap:75px 0; margin-top: 80px; } #bonplant .why .ctn-box .item-box{ width: 50%; display:flex; align-items:center; } #bonplant .why .ctn-box .item-box .inner{ position: relative; width: 330px; height: 330px; border-radius: 50%; background: linear-gradient(180deg, #0197C7 0%, #004A61 100%); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align: center; color:#fff; font-weight: 500; line-height: 1.6; font-family: var(--Red);letter-spacing: -0.36px;} #bonplant .why .ctn-box .item-box span{ position: relative; display:flex; align-items:center; width: 130px; height:2px; background: url(/img/sub/bonplantLine.png);} #bonplant .why .ctn-box .item-box span:after{ position: absolute; right: 0; content:''; display:block; width: 10px; height: 10px; border-radius:50%; background: var(--mainC); } #bonplant .why .ctn-box .item-box .inner p{ margin-top: 30px; } #bonplant .why .ctn-box .item-box:nth-child(2n){ justify-content:flex-end; } #bonplant .why .ctn-box .item-box:nth-child(2n) span:after{ right: auto; left: 0;} #bonplant .about .title-box{ position: relative; padding: 160px 0; text-align: center; margin-bottom: 111px; } #bonplant .about .title-box .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;} #bonplant .about .title-box .title{ color:#fff; font-weight: bold; letter-spacing: -1.8px; margin-bottom: 30px; } #bonplant .about .title-box .txt{ color: rgba(255, 255, 255, 0.80); font-weight: 500; line-height: 1.5; letter-spacing: -0.4px;} #bonplant .about .ctn-box{ position: relative; margin-bottom: 140px;} #bonplant .about .ctn-box .item-box{ position: sticky; top: 0; left: 0; display:flex; align-items:center; color:#fff; background: #0E0E0E; } #bonplant .about .ctn-box .item-box figure{ margin-right: 120px; width: 50%; } #bonplant .about .ctn-box .item-box figure svg{ width: 100%; } #bonplant .about .ctn-box .item-box .txt-box{ flex-shrink:0; padding-right: 20px;} #bonplant .about .ctn-box .item-box .txt-box .title{ font-weight: bold; margin-bottom: 50px; } #bonplant .about .ctn-box .item-box .txt-box .txt{ line-height: 1.6; } #bonplant .about .ctn-box .item-box .txt-box .txt:not(:last-child){ margin-bottom: 20px; } #bonplant .about .ctn-box .item-box .img{ opacity: 0; transition:all 1s; } #bonplant .about .ctn-box .item-box.active .img{ opacity: 1; } #bonplant .about .info-box{ position: relative; text-align: center; } #bonplant .about .info-box > *{ transform: translateY(-30%); opacity: 0; transition:all 1s; } #bonplant .about .info-box.active > *{ transform: translateY(0); opacity: 1; } #bonplant .about .info-box .bg{ position: absolute; top: 0; left: 0; z-index: -1;} #bonplant .about .info-box .txt{ color:#fff; font-weight: 500; line-height: 1.6; padding: 30px 0 95px; } #bonplant .about .info-box .txt-box{ position: relative; border-radius:20px; padding: 40px 120px; color:#fff; font-weight: bold; line-height: 1.4; display: inline-block; background: rgba(0, 0, 0, 0.80); } #bonplant .about .info-box .txt-box:after{ content:''; display:block; width: calc(100% - 1px); height: calc(100% - 1px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 1px; border-radius: 20px; background:linear-gradient(160deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5;} #bonplant .about .info-box .txt-box span{ color:var(--mainC); } #bonplant .thesis{ margin: 180px 0 120px; } #bonplant .thesis .list-box{ position: relative; margin-top: 120px; border-radius:20px; padding: 65px 45px; background: rgba(255, 255, 255, 0.03); } #bonplant .thesis .list-box:before{ content:''; display:block; width: calc(100% - 1px); height: calc(100% - 1px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 1px; border-radius: 20px; background:linear-gradient(135deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; } #bonplant .thesis .list-box li{ display:flex; color: rgba(255, 255, 255, 0.90); line-height: 1.5; letter-spacing: -0.4px; } #bonplant .thesis .list-box li:not(:last-child){ margin-bottom: 20px; } #bonplant .thesis .list-box li span{ min-width:30px; margin-right: 5px; } #bonplant .difference{ position: relative; padding: 70px 0 35px;} #bonplant .difference .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;} #bonplant .difference .ctn-box{ display:flex; align-items:center; opacity: 1; } #bonplant .difference .ctn-box > *{ width: 50%; } #bonplant .difference .ctn-box figure svg{ width: 100%; } #bonplant .difference .ctn-box .txt-box .title{ color:#fff; font-weight: bold; line-height: 1.4; } #bonplant .difference .ctn-box .txt-box .txt{ position: relative; background: rgba(0, 0, 0, 0.30); border-radius:10px; margin: 80px 0 30px; color:var(--mainC); font-weight: bold; text-align: center; padding: 20px 10px; } #bonplant .difference .ctn-box .txt-box .txt:before{ content:''; display:block; width: calc(100% - 1px); height: calc(100% - 1px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 1px; border-radius: 10px; background:linear-gradient(200deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;} #bonplant .difference .ctn-box .box{ display:flex; gap:35px; } #bonplant .difference .ctn-box .box .item-box{ width: calc((100% - 35px) / 2); text-align: center; } #bonplant .difference .ctn-box .box .item-box figure{ margin-bottom: 25px; } #bonplant .difference .ctn-box .box .item-box p{ display:inline-block; padding: 10px 20px; border-radius:50px; background: var(--mainC); font-family: var(--Red); font-weight: bold; line-height: 1.4; color:#fff; } #bonplant .difference .ctn-box .img-box .img{ opacity: 0; transform: translateY(30%); transition:all 1.2s; } #bonplant .difference .ctn-box.active .img-box .img{ opacity: 1; transform: translateY(0); } #trans .intro-box{ display:flex; align-items:center; margin-bottom: 110px; } #trans .intro-box figure{ margin-right: 75px; } #trans .intro-box .txt-box{ position: relative; padding: 90px 50px; border-radius: 20px; background: rgba(255,255,255,0.03); } #trans .ctn-box:before, #trans .intro-box .txt-box:before{ content:''; display:block; width: calc(100% - 1px); height: calc(100% - 1px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 1px; border-radius: 20px; background:linear-gradient(140deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;} #trans .intro-box .txt-box .title{ font-weight: 700; letter-spacing: -1px; color:#fff; margin-bottom: 40px; } #trans .intro-box .txt-box .title em{ color:var(--mainC); } #trans .intro-box .txt-box .txt{ color: rgba(255, 255, 255, 0.90); letter-spacing: -0.4px; line-height: 1.5; } #trans .intro-box .txt-box .txt:not(:last-child){ margin: 60px 0 20px; } #trans .ctn-box{ position: relative; padding: 65px 45px; border-radius: 20px; background: rgba(255,255,255,0.03); } #trans .ctn-box:before{ content:''; display:block; width: calc(100% - 1px); height: calc(100% - 1px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 1px; border-radius: 20px; background:linear-gradient(150deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;} #trans .ctn-box .title{ color:#fff; font-weight: bold; margin-bottom: 40px; } #trans .ctn-box .img-box{ display:flex; gap:20px; } #trans .ctn-box .img-box .item-box{ width: calc((100% - 60px) / 4); } #trans .ctn-box .img-box .item-box p{ color:#fff; font-weight: 600; margin-top: 20px;} #transimportant > div{ display:flex; } #transimportant > div figure{ flex-shrink:0; margin-right: 135px; } #transimportant .txt-box .title{ color:#fff; font-weight: bold; line-height: 1.5; margin-bottom: 40px;} #transimportant .txt-box .title em{ color:var(--mainC);} #transimportant .txt-box .txt{ color: rgba(255, 255, 255, 0.90); line-height: 1.6; letter-spacing: -0.44px; } #transimportant .txt-box .txt:not(:last-child){ margin-bottom: 25px; } #dgimplant > div{ display:flex; align-items:center; } #dgimplant > div figure{ flex-shrink:0; margin-right: 85px; } #dgimplant .txt-box .title{ color:#fff; font-weight: bold; line-height: 1.5; margin-bottom: 40px;} #dgimplant .txt-box .txt{ color: rgba(255, 255, 255, 0.90); line-height: 1.6; letter-spacing: -0.44px; } #dgimplant .txt-box .txt:not(:last-child){ margin-bottom: 25px; } #features{ position: relative; } #features .bg{ position: absolute; right: 0; bottom: 0; } #features .slide-box .slick-slide{ display:flex; align-items:center; height: 100vh; } #features .slide-box .slick-slide .txt-box{ margin-left: 120px; } #features .slide-box .slick-slide .txt-box .title{ color:#fff; margin-bottom: 25px; font-weight: bold; line-height: 1.5; text-indent:-40px; margin-left: 40px;} #features .slide-box .slick-slide .txt-box .txt{ color:rgba(255,255,255,0.9); line-height: 1.6; letter-spacing: -0.38px; } #procedure .info-box{ position: relative; padding: 65px 95px; display:flex; gap:105px; border-radius:20px; background: rgba(255, 255, 255, 0.03); text-align: center; margin-bottom: 120px; } #procedure .info-box:before{ content:''; display:block; width: calc(100% - 1px); height: calc(100% - 1px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 1px; border-radius: 20px; background:linear-gradient(150deg, rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1), rgba(14, 14, 14, 1), rgba(30, 182, 183, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;} #procedure .info-box .item-box{ width: calc((100% - 210px) / 2);} #procedure .info-box .item-box .txt{ color:#fff; font-weight: 600; line-height: 1.5; margin-bottom: 20px; } #procedure .info-box .item-box figure{ position: relative; } #procedure .info-box .item-box figure .arrow{ position: absolute; transform:translateY(-50%); top: 50%; left: calc(100% + 20px); } #procedure .ctn-box{ position: relative; } #procedure .ctn-box .bg-wrap{ position: relative; position: absolute; top: 0; width: 100%; height: 100%; z-index: -1;} #procedure .ctn-box .bg-wrap .bg{ position: sticky; top: 300px; left: 0; width: 100%; overflow: hidden;} #procedure .ctn-box .bg-wrap .bg img{ width: max-content; max-width: none;} #procedure .ctn-box .inner-box .circle-box{ display:flex; align-items:center; justify-content:center; margin-bottom: 200px; } #procedure .ctn-box .inner-box .circle-box p{ position: relative; display:flex; justify-content:center; align-items:center; text-align: center; width: 364px; height: 364px; border-radius:50%; color: #00FF91; font-weight: 600; line-height: 1.5; } #procedure .ctn-box .inner-box .circle-box p:before{ content:''; display:block; width: calc(100% - 120px); height: calc(100% - 120px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 60px; border-radius: 50%; background:linear-gradient(180deg, #00FF90 0%, #007140 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;} #procedure .ctn-box .inner-box .circle-box p.txt02{ color: #0FF; } #procedure .ctn-box .inner-box .circle-box p.txt02:before{ background: linear-gradient(180deg, #0FF 0%, #007171 100%); } #procedure .ctn-box .inner-box .circle-box p.txt03{ color: #0094FF; } #procedure .ctn-box .inner-box .circle-box p.txt03:before{ background: linear-gradient(180deg, #0095FF 0%, #004271 100%); } #procedure .ctn-box .inner-box .circle-box figure{ margin: 0 15px; } #procedure .ctn-box .inner-box .txt-wrap{ text-align: center; color:#fff; } #procedure .ctn-box .inner-box .txt-wrap .stit{ letter-spacing: -0.96px; line-height: 1.5; } #procedure .ctn-box .inner-box .txt-wrap .stit em{ font-weight: bold; } #procedure .ctn-box .inner-box .txt-wrap .title{ font-weight: 600; letter-spacing: -1.28px; margin: 40px 0 140px;} #procedure .ctn-box .inner-box .txt-wrap .title em{ color:var(--mainC); } #procedure .ctn-box .inner-box .txt-wrap dl:not(:last-of-type){ margin-bottom: 60px; } #procedure .ctn-box .inner-box .txt-wrap dl dt{ margin-bottom: 15px; color:#fff; font-weight: 600; letter-spacing: -0.6px;} #procedure .ctn-box .inner-box .txt-wrap dl dd{color: rgba(255, 255, 255, 0.80); font-weight: 300; line-height: 1.5; letter-spacing: -0.4px; } #procedure .ctn-box .inner-box .txt-wrap .line{ margin: 120px auto;} #procedure .ctn-box .inner-box .txt-wrap .btxt{ font-weight: 600; letter-spacing: -1px; padding-bottom: 240px;} #procedure .ctn-box .inner-box .txt-wrap .btxt em{ color:var(--mainC);} /* 25.11.26 */ #talent .order.order_new .ctnBox{ gap:60px; } #talent .order.order_new .ctnBox .itemBox{ position: relative; width: calc((100% - 180px) / 4); height: auto;} #talent .order.order_new .ctnBox .itemBox:before{ content:''; display:block; padding-bottom:100%; } #talent .order.order_new .ctnBox .itemBox:not(:last-child){ margin-right: 0; } #talent .order.order_new .ctnBox .itemBox .cbox { position: absolute; top: 0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; } #talent .order.order_new .ctnBox .itemBox.item1{ background: #1EB6B7;} #talent .order.order_new .ctnBox .itemBox.item2{ background: #1E92B7;} #talent .order.order_new .ctnBox .itemBox.item3{ background: #1E77B7;} #talent .order.order_new .ctnBox .itemBox.item4{ background: #1E5BB7;} #talent .welfare.welfare_new .iconBox .itemBox .title { display:flex; align-items:center; justify-content:center; padding:0 9%; min-height:75px; } #talent .welfare.welfare_new .iconBox .itemBox .title > ul { width:50%; } #talent .welfare.welfare_new .iconBox .itemBox .title > ul > li:not(:last-child) { margin-bottom:10px; } @media screen and (max-width:1520px){ #talent .welfare.welfare_new .iconBox .itemBox .title { padding:0 5%; } } @media screen and (max-width:1400px){ #talent .order.order_new .ctnBox{ gap:30px; } #talent .order.order_new .ctnBox .itemBox{ width: calc((100% - 90px) / 4); } #talent .welfare.welfare_new .iconBox .itemBox .title { padding:0; } } @media screen and (max-width:1200px){ #talent .order.order_new .ctnBox{ gap:20px; } #talent .order.order_new .ctnBox .itemBox{ width: calc((100% - 60px) / 4); } #talent .welfare.welfare_new .iconBox .itemBox .title { padding:0; flex-direction:column; gap:10px; justify-content:flex-start; min-height:auto; } #talent .welfare.welfare_new .iconBox .itemBox .title > ul { width:100%; } } @media screen and (max-width:900px){ #talent .order.order_new .ctnBox{ padding:0 12%; } #talent .order.order_new .ctnBox .itemBox{ width: calc((100% - 20px) / 2); } #talent .welfare.welfare_new .iconBox .itemBox .title { gap:5px; } #talent .welfare.welfare_new .iconBox .itemBox .title > ul > li:not(:last-child) { margin-bottom:5px; } } @media screen and (max-width:640px){ #talent .order.order_new .ctnBox{ padding:0; } #talent .order.order_new .ctnBox .itemBox{ width: calc((100% - 20px) / 2); } } #talent .job_listbox { display:flex; } #talent .job_listbox .box { position:relative; flex:1; height:700px; transition:flex 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } #talent .job_listbox .box h4 { position:absolute; left:40px; bottom:40px; z-index:2; color:#fff; font-weight:500; line-height:130%; transition:all 0.4s; } #talent .job_listbox .box .bg { width:100%; height:100%; background-position:left center; background-repeat:no-repeat; } #talent .job_listbox .box .bg:before{ content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background: linear-gradient(198deg, rgba(0, 0, 0, 0.00) 0%, rgba(30, 182, 183, 0.70) 100%); opacity:0; transition:all 0.4s; } #talent .job_listbox .box .bg1 { background-image:url(/img/sub/talent_job01.jpg); background-position:center center; } #talent .job_listbox .box .bg2 { background-image:url(/img/sub/talent_job02.jpg); } #talent .job_listbox .box .bg3 { background-image:url(/img/sub/talent_job03.jpg); background-position:center center; } #talent .job_listbox .box .bg4 { background-image:url(/img/sub/talent_job04.jpg); background-position:center center; } #talent .job_listbox .box .bg5 { background-image:url(/img/sub/talent_job05.jpg); } #talent .job_listbox .box .bg6 { background-image:url(/img/sub/talent_job06.jpg); } #talent .job_listbox .box .bg7 { background-image:url(/img/sub/talent_job07.jpg); background-position:25% center; } #talent .job_listbox .box .bg8 { background-image:url(/img/sub/talent_job08.jpg); } #talent .job_listbox .box.active { flex:1.6; } #talent .job_listbox.active-mode .box:not(.active) { flex:1; } #talent .job_listbox .box.active .bg:before{ opacity:1; } #talent .job_listbox .box.active h4 { bottom:60px; } @media screen and (max-width:1400px){ #talent .job_listbox .box { height:600px; } } @media screen and (max-width:1200px){ #talent .job_listbox .box { height:500px; } #talent .job_listbox .box h4 { left:20px; bottom:20px; } #talent .job_listbox .box.active h4 { bottom:40px; } } @media screen and (max-width:1024px){ #talent .job_listbox { flex-wrap:wrap; } #talent .job_listbox .box { height:250px; width:25%; flex:none; } #talent .job_listbox .box h4 { left:20px; bottom:20px; } #talent .job_listbox .box.active h4 { bottom:40px; } #talent .job_listbox .box.active, #talent .job_listbox.active-mode .box:not(.active) { width:25%; flex:none; } } @media screen and (max-width:760px){ #talent .job_listbox .box { height:320px; width:50%; } #talent .job_listbox .box.active, #talent .job_listbox.active-mode .box:not(.active) { width:50%; } } @media screen and (max-width:640px){ #talent .job_listbox .box { height:280px; } } @media screen and (max-width:520px){ #talent .job_listbox .box { height:200px; } }