@charset "utf-8"; .bkenc_btn1 {display:flex; justify-content:center; align-items:center; width:200px; height:61px; background:none; border:2px solid #fff; border-radius:5px; font-size:1.125em; color:#fff; font-weight:600; text-align:center; font-family:'Pretendard';} .bkenc_btn1.case2 {border-color:#0680fa; color:#0680fa; transition:all 0.5s; transition-property:color, background;} .bkenc_btn1.case2:hover {background:#0680fa; color:#fff;} @media screen and (max-width:1024px){ .bkenc_btn1 {width:170px; height:50px; font-size:1em;} } @media screen and (max-width:767px){ .bkenc_btn1 {width:135px; height:42px;} } /* header */ #bkenc_header {display:flex; justify-content:space-between; align-items:center; width:100%; height:100px; padding:0 50px; position:fixed; left:0; top:0; z-index:300; transition:all 0.7s; transition-property:height, background;} #bkenc_header .h_util {display:flex; align-items:center;} #bkenc_header .h_util ul {display:flex; align-items:center; position:relative; z-index:5;} #bkenc_header .h_util ul li:before {content:''; display:inline-block; width:1px; height:12px; background:#fff; opacity:0.5; margin:0 15px; vertical-align:middle; transition:background 0.3s ease-in-out;} #bkenc_header .h_util ul li:first-child:before {display:none;} #bkenc_header .h_util ul li a {display:inline-block; font-size:0.875em; color:#fff; font-weight:500; transition:color 0.3s ease-in-out} #bkenc_logo {width:151px; height:41px; background:url(../images/logo_w.svg) no-repeat center center; background-size:contain; position:relative; z-index:5;} #bkenc_logo a {display:block; width:100%; height:100%;} #bkenc_gnb {width:100%; position:absolute; left:0; top:0; z-index:0;} #bkenc_gnb .dim {content:''; display:block; width:100%; height:430px; background:#fff; position:absolute; left:0; top:0; z-index:0; opacity:0; visibility:hidden; transition:all 0.3s ease-in-out; transition-property:opacity, visibility;} #bkenc_gnb:after {content:''; display:block; width:100%; height:1px; background:#dcdcdc; position:absolute; left:0; bottom:0; z-index:1; opacity:0; visibility:hidden; transition:all 0.3s ease-in-out; transition-property:opacity, visibility;} #bkenc_gnb > ul {display:flex; justify-content:center; position:relative; z-index:3;} #bkenc_gnb > ul > li {position:relative;} #bkenc_gnb > ul > li > a {display:block; font-size:1.25em; color:#fff; line-height:100px; font-weight:700; padding:0 50px; transition:color 0.3s, line-height 0.7s; position:relative} #bkenc_gnb > ul > li > a:before {content:''; display:block; width:0; height:3px; background:#0680fa; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.3s ease-in-out;} #bkenc_gnb > ul > li:hover > a {color:#0680fa !important;} #bkenc_gnb > ul > li:hover > a:before {width:100%} #bkenc_gnb > ul > li > ul {width:100%; padding-top:25px; position:absolute; left:0; top:100%; opacity:0; visibility:hidden; transition:all 0.3s ease-in-out; transition-property:opacity, visibility;} #bkenc_gnb > ul > li > ul > li > a {display:block; font-size:1.125em; color:#666; line-height:1.5em; text-align:center; padding:10px 0;} #bkenc_gnb > ul > li > ul > li > a:hover {color:#0680fa;} #all_gnbBG {display:block; width:46px; height:46px; background:#012142; border-radius:50%; position:absolute; left:96.5%; top:60px; z-index:25; transform:translate(-50%, -50%) scale(0); transition:all 0.6s ease-in-out;} #all_gnb {display:flex; align-items:center; width:100%; height:100%; background:url(../images/site_bg.jpg) no-repeat center center; background-size:cover; padding:0 50px; position:fixed; left:0; top:0; opacity:0; visibility:hidden; z-index:26;} #all_gnb > div {display:flex; width:100%;} #all_gnb .tit {width:25%; font-size:4.31em; color:#fff; line-height:1.2em; font-family:'Outfit'} #all_gnb .menu_box {display:flex; flex-wrap:wrap; width:75%;} #all_gnb .menu_box > li {width:28%; margin-right:8%} #all_gnb .menu_box > li:nth-child(3n) {margin-right:0;} #all_gnb .menu_box > li:nth-child(3) ~ li {margin-top:50px;} #all_gnb .menu_box > li > a {display:block; font-size:1.875em; color:#fff; line-height:1.2em; font-weight:600; transition:color 0.3s;} #all_gnb .menu_box > li:hover > a {color:#0680fa;} #all_gnb .menu_box > li > ul {width:100%; border-top:1px solid rgba(255,255,255,0.2); margin-top:20px; padding-top:20px; transition:border 0.3s;} #all_gnb .menu_box > li:hover > ul {border-top-color:#0680fa} #all_gnb .menu_box > li > ul > li {margin-bottom:15px;} #all_gnb .menu_box > li > ul > li:last-child {margin-bottom:0;} #all_gnb .menu_box > li > ul > li > a {font-size:1.125em; color:rgba(255,255,255,0.8); line-height:1.3em; transition:color 0.3s;} #all_gnb .menu_box > li > ul > li > a:hover {color:#0680fa;} #menuToggle {display:block; width:30px; height:21px; position:relative; z-index:30; margin-left:50px;} #menuToggle span {display:block; width:100%; height:3px; background:#fff; position:absolute; transition:all 0.3s ease-in-out;} #menuToggle span:nth-child(1) {width:calc(100% - 5px); left:5px; top:0;} #menuToggle span:nth-child(2) {width:calc(100% - 6px); right:6px; top:50%; margin-top:-1.5px;} #menuToggle span:nth-child(3) {width:calc(100% - 5px); left:5px; bottom:0;} #bkenc_header.sub_header {background:#fff; border-bottom:1px solid #ccc;} #bkenc_header.sub_header .h_util ul li:before {background:#191919;} #bkenc_header.sub_header .h_util ul li a {color:#191919;} #bkenc_header.sub_header #bkenc_logo {background-image:url(../images/logo.svg)} #bkenc_header.sub_header #bkenc_gnb > ul > li > a {color:#191919;} #bkenc_header.sub_header #menuToggle span {background:#191919} #bkenc_header.scroll_on {background:#fff; box-shadow:0 0 15px rgba(25,25,25,0.1)} #bkenc_header.scroll_on .h_util ul li:before {background:#191919;} #bkenc_header.scroll_on .h_util ul li a {color:#191919;} #bkenc_header.scroll_on #bkenc_logo {background-image:url(../images/logo.svg)} #bkenc_header.scroll_on #bkenc_gnb > ul > li > a {color:#191919;} #bkenc_header.scroll_on #menuToggle span {background:#191919} #bkenc_header.on .h_util ul li:before {background:#191919;} #bkenc_header.on .h_util ul li a {color:#191919;} #bkenc_header.on #bkenc_logo {background-image:url(../images/logo.svg)} #bkenc_header.on #bkenc_gnb .dim, #bkenc_header.on #bkenc_gnb:after {opacity:1; visibility:visible;} #bkenc_header.on #bkenc_gnb > ul > li > a {color:#191919;} #bkenc_header.on #bkenc_gnb > ul > li > ul {opacity:1; visibility:visible;} #bkenc_header.on #menuToggle span {background:#191919} #bkenc_header.active #all_gnbBG {transform:translate(-50%, -50%) scale(100);} #bkenc_header.active #all_gnb {opacity:1; visibility:visible; transition:all 1s 0.6s; transition-property:opacity, visibility;} #bkenc_header.active #menuToggle span {background:#fff;} #bkenc_header.active #menuToggle span:nth-child(1) {transform:translateY(9px) rotate(45deg)} #bkenc_header.active #menuToggle span:nth-child(2) {width:0;} #bkenc_header.active #menuToggle span:nth-child(3) {transform:translateY(-9px) rotate(-45deg)} @media screen and (min-width:1025px){ #bkenc_header.sub_header {height:100px;} #bkenc_header.sub_header #bkenc_gnb .dim {height:430px;} #bkenc_header.sub_header #bkenc_gnb > ul > li > a {line-height:100px;} #bkenc_header.scroll_on {height:80px;} #bkenc_header.scroll_on #bkenc_gnb .dim {height:410px;} #bkenc_header.scroll_on #bkenc_gnb > ul > li > a {line-height:80px;} } @media screen and (min-width:768px){ #all_gnb .menu_box > li > ul {display:block !important;} } @media screen and (max-width:1220px){ #bkenc_header {padding:0 6%;} #bkenc_gnb {padding:0 6%;} #bkenc_gnb .dim {height:370px;} #bkenc_gnb > ul {padding:0 200px 0 150px;} #bkenc_gnb > ul > li > a {font-size:1em; padding:0 25px;} #bkenc_gnb > ul > li > ul {padding-top:25px;} #bkenc_gnb > ul > li > ul > li > a {font-size:1em; padding:7px 0;} #all_gnb .menu_box > li {width:30%; margin-right:5%;} #bkenc_header.scroll_on #bkenc_gnb .dim {height:340px;} } @media screen and (max-width:1024px){ #bkenc_header {height:50px;} #bkenc_header .h_util ul {opacity:0; visibility:hidden; position:relative; z-index:50;} #bkenc_header .h_util ul li:before {height:10px; background:#fff !important; margin:0 10px;} #bkenc_header .h_util ul li a {color:#fff !important;} #bkenc_logo {width:120px; height:33px;} #bkenc_gnb {display:none;} #all_gnb {padding:0 6%;} #all_gnb .tit {font-size:3.5em;} #all_gnb .menu_box > li > a {font-size:1.5em;} #all_gnb .menu_box > li > ul {margin-top:15px; padding-top:15px;} #all_gnb .menu_box > li > ul > li > a {font-size:1em;} #menuToggle {width:20px; height:16px; margin-left:20px;} #menuToggle span {height:2px;} #menuToggle span:nth-child(1) {width:calc(100% - 3px); left:3px;} #menuToggle span:nth-child(2) {width:calc(100% - 4px); right:4px; margin-top:-1px;} #menuToggle span:nth-child(3) {width:calc(100% - 3px); left:3px;} #bkenc_header.active .h_util ul {opacity:1; visibility:visible;} #bkenc_header.active #menuToggle span:nth-child(1) {transform:translateY(7px) rotate(45deg)} #bkenc_header.active #menuToggle span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)} } @media screen and (max-width:767px){ #all_gnb {display:block; padding-top:100px;} #all_gnb .tit {display:none;} #all_gnb .menu_box {width:100%} #all_gnb .menu_box > li {width:100%; margin:0;} #all_gnb .menu_box > li:nth-child(1) ~ li {margin-top:30px;} #all_gnb .menu_box > li > a.on {color:#0680fa} #all_gnb .menu_box > li > ul {display:none;} } /* footer */ #bkenc_footer {width:100%; background:#191919; padding:40px 0 60px;} #bkenc_footer > div {position:relative; padding-right:250px;} #bkenc_footer .f_logo img {height:28px;} #bkenc_footer .f_util {overflow:hidden; margin-top:20px;} #bkenc_footer .f_util li {float:left;} #bkenc_footer .f_util li:after {content:''; display:inline-block; width:1px; height:12px; background:rgba(255,255,255,0.5); margin:0 15px;} #bkenc_footer .f_util li:last-child:after {display:none;} #bkenc_footer .f_util li a {display:inline-block; font-size:1em; color:#fff; font-weight:600;} #bkenc_footer .f_info {margin-top:10px;} #bkenc_footer .f_info li {display:inline-block; font-size:1em; color:#ccc; margin:10px 15px 0 0;} #bkenc_footer .f_info li a {color:#ccc;} #bkenc_footer .copy {width:250px; font-size:1em; color:#ccc; font-weight:600; text-align:right; position:absolute; right:0; bottom:0;} #bkenc_footer .f_member {display:inline-block; border:1px solid rgba(255,255,255,0.5); line-height:30px; padding:0 12px; font-size:0.875em; color:rgba(255,255,255,0.8); margin-top:20px;} @media screen and (max-width:1024px){ #bkenc_footer {padding:5% 0;} #bkenc_footer .f_util {margin-top:15px;} #bkenc_footer .f_info li {margin-top:5px;} #bkenc_footer .f_info br {display:none;} } @media screen and (max-width:767px){ #bkenc_footer > div {padding-right:45px;} #bkenc_footer .f_logo img {height:25px;} #bkenc_footer .f_util li:after {height:10px; margin:0 10px} #bkenc_footer .f_info li {margin-right:10px;} #bkenc_footer .copy {width:100%; text-align:left; position:relative; margin-top:15px;} } #Quick {width:80px; background:#fff; border-radius:10px; overflow:hidden; position:fixed; right:50px; bottom:50px; z-index:200; box-shadow:5px 5px 20px rgba(25,25,25,0.1)} #Quick a {display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; height:92px; background:#0680fa; text-align:center; position:relative;} #Quick a:after {content:''; display:block; width:calc(100% - 20px); height:1px; background:rgba(255,255,255,0.5); position:absolute; left:50%; bottom:0; transform:translateX(-50%)} #Quick a:last-of-type:after {display:none;} #Quick a i {font-size:1.5em; color:#fff; margin-bottom:5px} #Quick a p {font-size:0.875em; color:#fff; font-weight:600;} #Quick a:hover {opacity:0.9;} #Quick .go_top {display:block; width:100%; height:53px; font-size:1em; font-family:'Pretendard'} #Quick .go_top i {display:block; font-size:0.875em; margin-bottom:5px;} #Quick .go_top p {font-size:0.75em; font-weight:600;} @media screen and (max-width:1024px){ #Quick {width:65px; right:6%; bottom:30px;} #Quick a {height:70px;} #Quick a:after {width:calc(100% - 10px)} #Quick a i {font-size:1.3em;} #Quick .go_top {height:45px;} #Quick .go_top i {margin-bottom:2px;} } @media screen and (max-width:767px){ #Quick {width:45px; bottom:15px; border-radius:5px;} #Quick a {height:45px;} #Quick a i {font-size:1.125em; margin-bottom:0;} #Quick a p {display:none;} #Quick .go_top {height:28px;} #Quick .go_top i {margin-bottom:0;} #Quick .go_top p {display:none;} } /* main */ #mVisu {width:100%; height:100vh; overflow:hidden;} .mVisu_slide {width:100%; height:100%; position:relative;} .mVisu_slide .img {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;} .mVisu_slide .img:before {content:''; display:block; width:100%; height:100%; background:#191919; opacity:0.3;} .mVisu_slide .txt_box {position:absolute; left:50%; bottom:150px; transform:translateX(-50%); overflow:hidden;} .mVisu_slide .txt_box .tit {font-size:7.5em; color:#fff; line-height:1.04em; font-weight:400; font-family:'Outfit'; opacity:0; transform:translateY(-100px); transition:all 1s 0.5s; transition-property:opacity, transform;} .mVisu_slide .txt_box .txt {font-size:1.75em; color:#fff; line-height:1.3em; margin-top:20px; opacity:0; transform:translateY(100px); transition:all 1s 0.5s; transition-property:opacity, transform;} .mVisu_slide .swiper-pagination-fraction {display:flex; justify-content:space-between; align-items:center; width:185px; height:20px; font-size:0.875em; color:#fff; font-weight:600; letter-spacing:0; position:absolute; left:50%; bottom:490px; margin-left:-810px;} .mVisu_slide .swiper-pagination-fraction .line {width:120px; height:3px; background:rgba(255,255,255,0.3);} .mVisu_slide .swiper-pagination-fraction .line span {content:''; display:block; width:0; height:100%; background:#fff;} .mVisu_slide .swiper-slide-active .tit {opacity:1; transform:translateY(0)} .mVisu_slide .swiper-slide-active .txt {opacity:1; transform:translateY(0)} @media screen and (max-width:1640px){ .mVisu_slide .swiper-pagination-fraction {left:6%; margin-left:0;} } @media screen and (max-width:1024px){ .mVisu_slide .txt_box {bottom:100px;} .mVisu_slide .txt_box .tit {font-size:5.5em;} .mVisu_slide .txt_box .txt {font-size:1.5em;} .mVisu_slide .swiper-pagination-fraction {bottom:360px;} } @media screen and (max-width:767px){ .mVisu_slide .txt_box {bottom:45px;} .mVisu_slide .txt_box .tit {font-size:3em;} .mVisu_slide .txt_box .txt {font-size:1em;} .mVisu_slide .swiper-pagination-fraction {bottom:180px; width:130px;} .mVisu_slide .swiper-pagination-fraction .line {width:80px; height:2px;} } .mTitle {font-size:2.5em; line-height:1.25em; font-weight:700;} @media screen and (max-width:1024px){ .mTitle {font-size:2.2em;} } @media screen and (max-width:767px){ .mTitle {font-size:1.8em;} } #mProject {margin:120px 0 60px; position:relative;} #mProject:before {content:''; display:block; width:100%; height:100%; background:url(../images/mProjectBG.png) no-repeat center top; background-size:100% auto; position:absolute; left:0; top:0;} #mProject:after {content:''; display:block; width:100%; height:22vw; background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); position:absolute; left:0; top:11vw; z-index:1;} #mProject > div {position:relative; z-index:10;} .mProject_slide {display:flex; justify-content:center; width:100%; margin-top:70px;} .mProject_slide .swiper-slide {width:auto; text-align:center; margin-right:160px;} .mProject_slide .swiper-slide:last-child {margin-right:0;} .mProject_slide .icon {display:block; width:115px; height:115px; background-repeat:no-repeat; background-position:center center; background-size:contain; margin:0 auto;} .mProject_slide .t1 {font-size:1.125em; font-weight:500; margin-top:30px;} .mProject_slide .t2 {font-size:1.875em; color:#0680fa; font-weight:700; margin-top:10px;} .mProject_slide .icon1 {background-image:url(../images/mProject_icon1.png)} .mProject_slide .icon2 {background-image:url(../images/mProject_icon2.png)} .mProject_slide .icon3 {background-image:url(../images/mProject_icon3.png)} @media screen and (min-width:768px){ .mProject_slide .swiper-wrapper {justify-content:center;} } @media screen and (max-width:1220px){ .mProject_slide .swiper-slide {margin-right:100px;} } @media screen and (max-width:1024px){ #mProject {margin:12% 0;} .mProject_slide {margin-top:7%;} .mProject_slide .swiper-slide {margin-right:60px;} .mProject_slide .icon {width:90px; height:90px;} .mProject_slide .t1 {font-size:1em; margin-top:15px;} .mProject_slide .t2 {font-size:1.5em; margin-top:5px;} } @media screen and (max-width:767px){ .mProject_slide .swiper-slide {margin-right:0;} .mProject_slide .icon {width:65px; height:65px;} .mProject_slide .t2 {font-size:1.3em;} } #mBusiness {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; margin-top:60px;} #mBusiness > div {width:calc(33.33% - 20px); height:510px;} #mBusiness > div a {display:block; width:100%; height:100%; position:relative;} #mBusiness > div .img_box {width:100%; height:260px; border-radius:20px; background-repeat:no-repeat; background-position:center center; background-size:auto 510px; transform:translateY(90px); transition:height 0.5s, transform 0.5s; position:relative; z-index:10; overflow:hidden;} #mBusiness > div .img_box:before {content:''; display:block; width:100%; height:100%; background:#000; opacity:0; overflow:0; transition:opacity 0.5s;} #mBusiness > div:hover .img_box {height:100%; transform:translateY(0)} #mBusiness > div:hover .img_box:before {opacity:0.5;} #mBusiness > div .txt_box {width:100%; position:absolute; bottom:70px;} #mBusiness > div .txt_box:before {content:'\2b'; display:flex; justify-content:center; align-items:center; width:46px; height:46px; border:1px solid #ccc; border-radius:5px; font-size:1em; color:#a4a4a4; font-weight:300; font-family:'Font Awesome 6 Pro'; position:absolute; right:10px; bottom:0;} #mBusiness > div .txt_box dl dt {font-size:1.125em; font-weight:500;} #mBusiness > div .txt_box dl dd {font-size:1.875em; font-weight:700; margin-top:10px;} #mBusiness > div .txt_box.hover {bottom:50px; transform:translateY(5px); opacity:0; z-index:15; transition:all 0.5s; padding:0 40px} #mBusiness > div .txt_box.hover:before {display:none;} #mBusiness > div .txt_box.hover dl dt {color:rgba(255,255,255,0.5);} #mBusiness > div .txt_box.hover dl dd {color:#fff;} #mBusiness > div .txt_box.hover dl dd.st {font-size:1.25em; line-height:1.5em; font-weight:500; margin-top:15px;} #mBusiness > div:hover .txt_box.hover {transform:translateY(0); opacity:1; transition-delay:0.3s} @media screen and (max-width:1640px){ #mBusiness > div .txt_box.hover dl dd.st {font-size:1.125em;} } @media screen and (max-width:1024px){ #mBusiness {margin-top:7%;} #mBusiness > div {width:100%; height:300px; margin-bottom:2%;} #mBusiness > div:last-child {margin-bottom:0;} #mBusiness > div .img_box {height:100%; background-size:cover; border-radius:15px; transform:translateY(0)} #mBusiness > div .img_box:before {opacity:0.3;} #mBusiness > div .txt_box {display:none; bottom:30px; z-index:10; padding:0 5%;} #mBusiness > div .txt_box:before {width:40px; height:40px; right:5%;} #mBusiness > div .txt_box dl dt {font-size:1em; color:#fff;} #mBusiness > div .txt_box dl dd {font-size:1.5em; color:#fff;} #mBusiness > div .txt_box.hover {display:block; opacity:1; transform:translateY(0); bottom:30px; padding:0 30px;} #mBusiness > div .txt_box.hover dl dd.st {margin-top:10px;} } @media screen and (max-width:767px){ #mBusiness > div {height:220px;} #mBusiness > div .img_box {border-radius:10px;} #mBusiness > div .txt_box {bottom:20px;} #mBusiness > div .txt_box:before {width:28px; height:28px; border-radius:3px;} #mBusiness > div .txt_box dl dd {margin-top:5px;} #mBusiness > div .txt_box.hover {bottom:15px; padding:0 15px;} #mBusiness > div .txt_box.hover dl dd.st {font-size:1em; margin-top:10px;} } #mCompany {width:100%; height:420px; background:url(../images/mCompanyBG.jpg) no-repeat center center; background-size:cover; background-attachment:fixed; position:relative; margin-top:200px;} #mCompany:before {content:''; display:block; width:100%; height:100%; background:#191919; opacity:0.3; position:absolute; left:0; top:0;} #mCompany > div {display:flex; justify-content:center; align-items:center; height:100%; position:relative; z-index:5;} #mCompany .tit {font-size:7.5em; color:rgba(21,199,72,0.5); line-height:1em; font-family:'Outfit'; position:absolute; left:0; top:-90px;} #mCompany .txt_box {display:flex; align-items:center; width:100%; max-width:1200px;} #mCompany .txt_box .mTitle {width:calc(100% - 570px)} #mCompany .txt_box ul {display:flex; justify-content:space-between; width:570px;} #mCompany .txt_box ul li {width:calc(50% - 5px); height:180px; backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); background-color:rgba(255,255,255,0.1); border-radius:20px; position:relative; transition:all 0.5s; transition-property:background, transform;} #mCompany .txt_box ul li:last-child {margin-top:50px;} #mCompany .txt_box ul li a {display:block; width:100%; height:100%; padding:30px;} #mCompany .txt_box ul li dl dt {font-size:1.125em; color:rgba(255,255,255,0.5); font-weight:500;} #mCompany .txt_box ul li dl dd {font-size:1.5em; color:#fff; font-weight:700; margin-top:10px;} #mCompany .txt_box ul li .icon {display:block; width:55px; height:55px; background-repeat:no-repeat; background-position:center center; background-size:contain; position:absolute; right:40px; bottom:40px;} #mCompany .txt_box ul li .icon1 {background-image:url(../images/mCompany_icon1.png)} #mCompany .txt_box ul li .icon2 {background-image:url(../images/mCompany_icon2.png)} #mCompany .txt_box ul li:hover {background:#15c748;} #mCompany .txt_box ul li:hover:first-child {transform:translateY(50px);} #mCompany .txt_box ul li:hover:last-child {transform:translateY(-50px);} @media screen and (max-width:1220px){ #mCompany .txt_box .mTitle {width:calc(100% - 500px)} #mCompany .txt_box ul {width:500px;} #mCompany .txt_box ul li .icon {right:30px; bottom:30px;} } @media screen and (max-width:1024px){ #mCompany {height:380px; background-attachment:unset; margin-top:15%;} #mCompany .tit {font-size:5.5em; top:-60px;} #mCompany .txt_box .mTitle {width:calc(100% - 460px)} #mCompany .txt_box .mTitle br {display:none;} #mCompany .txt_box ul {width:460px;} #mCompany .txt_box ul li {height:150px; border-radius:15px;} #mCompany .txt_box ul li:last-child {margin-top:30px;} #mCompany .txt_box ul li a {padding:20px;} #mCompany .txt_box ul li dl dt {font-size:1em;} #mCompany .txt_box ul li dl dd {font-size:1.3em; margin-top:5px;} #mCompany .txt_box ul li .icon {width:40px; height:40px; right:20px; bottom:20px;} #mCompany .txt_box ul li:hover:first-child {transform:translateY(30px);} #mCompany .txt_box ul li:hover:last-child {transform:translateY(-30px);} } @media screen and (max-width:767px){ #mCompany {height:320px;} #mCompany .tit {font-size:3em; top:-30px;} #mCompany .txt_box {display:block;} #mCompany .txt_box .mTitle {width:100%; margin-bottom:20px;} #mCompany .txt_box .mTitle br {display:block;} #mCompany .txt_box ul {width:100%;} #mCompany .txt_box ul li {width:calc(50% - 2.5px); height:110px; border-radius:10px;} #mCompany .txt_box ul li:last-child {margin-top:15px;} #mCompany .txt_box ul li a {padding:10px;} #mCompany .txt_box ul li dl dd {margin-top:0} #mCompany .txt_box ul li .icon {width:30px; height:30px; right:10px; bottom:10px;} #mCompany .txt_box ul li:hover:first-child {transform:translateY(15px);} #mCompany .txt_box ul li:hover:last-child {transform:translateY(-15px);} } #mCase {margin:120px auto;} .mCase_slide {width:100%; margin-top:30px; padding-bottom:50px; position:relative;} .mCase_slide .img {width:100%; height:260px; background-color:#f5f7f8; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:20px;} .mCase_slide .subject {font-size:1.5em; font-weight:700; margin-top:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .mCase_slide .date {font-size:1.125em; color:#a4a4a4; font-weight:500; margin-top:10px;} .mCase_slide.swiper-container-horizontal>.swiper-scrollbar {width:100%; left:0; bottom:0; height:1px; background:#ccc; border-radius:0;} .mCase_slide .swiper-scrollbar-drag {height:3px; background:#191919; border-radius:0; top:-1px;} @media screen and (max-width:1640px){ .mCase_slide .img {height:14vw;} } @media screen and (max-width:1220px){ .mCase_slide .img {height:18vw;} } @media screen and (max-width:1024px){ #mCase {margin:12% auto;} .mCase_slide {margin-top:3%; padding-bottom:30px;} .mCase_slide .img {border-radius:15px;} .mCase_slide .subject {font-size:1.3em; margin-top:15px;} .mCase_slide .date {font-size:1em; margin-top:5px;} } @media screen and (max-width:767px){ .mCase_slide {padding-bottom:20px;} .mCase_slide .swiper-slide {width:300px;} .mCase_slide .img {height:194px; border-radius:10px;} .mCase_slide .subject {font-size:1em; margin-top:10px;} .mCase_slide .date {font-size:0.875em ;} } #mToday {margin-bottom:150px; position:relative; z-index:5;} #mToday .tab_box {display:flex; justify-content:end; margin-bottom:25px;} #mToday .tab_box li {overflow:hidden;} #mToday .tab_box li:first-child {border-radius:5px 0 0 5px;} #mToday .tab_box li:last-child {border-radius:0 5px 5px 0;} #mToday .tab_box li button {display:block; width:auto; height:43px; background:#f5f7f8; font-size:1em; color:#666; font-weight:500; font-family:'Pretendard'; padding:0 15px;} #mToday .tab_box li.active button {background:#0680fa; color:#fff; font-weight:600;} #mToday .txt_box {display:flex; align-items:center;} #mToday .txt_box .tit {width:328px;} #mToday .txt_box .select_box {width:178px; margin-top:20px; position:relative;} #mToday .txt_box .select_box button {display:block; width:100%; height:43px; background:#0680fa; border-radius:3px; font-size:1em; color:#fff; font-weight:500; font-family:'Pretendard'; text-align:left; padding:0 20px; position:relative;} #mToday .txt_box .select_box > button:after {content:'\f107'; font-size:1em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:15px; top:50%; transform:translateY(-50%)} #mToday .txt_box .select_box ul {display:none; width:100%; position:absolute; left:0; top:100%;} #mToday .txt_box .select_box ul li {margin-top:5px;} #mToday .txt_box .select_box ul li button {background:#f5f7f8; color:#666;} /*#mToday .txt_box .select_box ul li button {display:block; width:100%; height:43px; padding:5px 10px; border-bottom:1px solid #fff; font-size:1em; color:#fff; font-family:'Pretendard'; text-align:left; opacity:0.5;} #mToday .txt_box .select_box ul li:last-child button {border-bottom:0;} #mToday .txt_box .select_box ul li button:hover {opacity:1;}*/ #mToday .txt_box .select_box.active > button:after {content:'\f106'} #mToday .txt_box .select_box.active ul {display:block;} #mToday .txt_box .info {display:flex; justify-content:space-between; width:calc(100% - 328px)} #mToday .txt_box .info > div .t1 {font-size:1.5em; font-weight:700; margin-bottom:15px;} #mToday .txt_box .info > div .t1 span {font-size:0.67em; color:#a4a4a4; font-weight:400; margin-left:10px;} #mToday .txt_box .info > div .price {font-size:1.125em; font-weight:700;} #mToday .txt_box .info > div .price strong {font-size:2.22em; margin-right:5px;} #mToday .txt_box .info > div .rpcie span {margin-left:10px;} @media screen and (max-width:1640px){ #mToday .txt_box .tit {width:260px;} #mToday .txt_box .info {width:calc(100% - 260px)} } @media screen and (max-width:1220px){ #mToday .txt_box {display:block;} #mToday .txt_box .tit {display:flex; align-items:center; justify-content:space-between; width:100%;} #mToday .txt_box .select_box {margin-top:0;} #mToday .txt_box .info {width:100%; margin-top:50px;} } @media screen and (max-width:1024px){ #mToday {margin-bottom:15%;} #mToday .tab_box {position:absolute; right:0; top:0;} #mToday .tab_box li button {height:38px; padding:0 13px;} #mToday .txt_box .tit {display:block;} #mToday .txt_box .select_box {width:160px; margin-top:15px;} #mToday .txt_box .select_box button {height:38px; padding:0 12px;} #mToday .txt_box .select_box > button:after {right:10px;} /*#mToday .txt_box .select_box ul li button {padding:5px;}*/ #mToday .txt_box .info {margin-top:5%;} #mToday .txt_box .info > div .t1 {font-size:1.3em; margin-bottom:5px;} #mToday .txt_box .info > div .t1 span {font-size:0.75em; margin-left:5px;} #mToday .txt_box .info > div .price {font-size:1em;} #mToday .txt_box .info > div .price strong {font-size:2em;} } @media screen and (max-width:767px){ #mToday .tab_box li button {height:32px; padding:0 10px;} #mToday .txt_box .select_box {width:120px; margin-top:10px;} #mToday .txt_box .select_box button {height:35px; padding:0 10px;} #mToday .txt_box .select_box ul li {margin-top:3px;} #mToday .txt_box .info {display:block;} #mToday .txt_box .info > div {border-bottom:1px solid #dcdcdc; padding-bottom:4%; margin-bottom:4%;} #mToday .txt_box .info > div:last-child {border-bottom:0; margin-bottom:0; padding-bottom:0;} } #mContact {display:flex; justify-content:center; align-items:center; width:100%; height:450px; background:url(../images/mContactBG.jpg) no-repeat center center; background-size:cover; position:relative} #mContact:before {content:''; display:block; width:100%; height:100%; background:#191919; opacity:0.3; position:absolute; left:0; top:0; z-index:0;} #mContact > div {position:relative; z-index:5;} #mContact .btn_box {display:flex; justify-content:center; margin-top:50px;} #mContact .btn_box .bkenc_btn1 {margin-right:5px; transition:all 0.5s; transition-property:background, border;} #mContact .btn_box .bkenc_btn1:last-child {margin-right:0;} #mContact .btn_box .bkenc_btn1:first-child:hover {background:#0680fa; border-color:#0680fa;} #mContact .btn_box .bkenc_btn1:last-child:hover {background:#15c748; border-color:#15c748;} @media screen and (max-width:1024px){ #mContact {height:auto; padding:15% 0;} #mContact .btn_box {margin-top:5%;} } /* sub */ #sub_content {width:100%; padding:200px 0 100px;} #page_cont {margin-top:70px;} .sub_title {display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;} .sub_title h2 {font-size:3.125em; line-height:1.2em; font-weight:700; font-family:'Pretendard';} .sub_title ul {overflow-x:auto; white-space:nowrap;} .sub_title ul li {display:inline-block; margin-right:5px;} .sub_title ul li:last-child {margin-right:0;} .sub_title ul li a {display:block; line-height:47px; background:#f5f7f8; border-radius:5px; font-size:1.125em; color:#a4a4a4; padding:0 25px;} .sub_title ul li.active a {background:#0680fa; color:#fff; font-weight:600;} .s_tit1 {font-size:2.18em; line-height:1.28em; font-weight:700; margin-bottom:30px;} .s_tit2 {font-size:1.375em; line-height:1.4em; font-weight:700;} .s_tit3 {font-size:1.75em; line-height:1.28em; font-weight:700; margin-bottom:25px;} .s_txt1 {font-size:1.25em; color:#666; line-height:1.5em; word-break:normal;} @media screen and (max-width:1024px){ #sub_content {padding:calc(50px + 10%) 0 10%;} #page_cont {margin-top:7%;} .sub_title {margin-bottom:3%;} .sub_title h2 {font-size:2.5em;} .sub_title ul li a {line-height:38px; font-size:1em; padding:0 15px;} .s_tit1 {font-size:1.7em; margin-bottom:3%;} .s_tit2 {font-size:1.25em;} .s_tit3 {font-size:1.5em; margin-bottom:2%;} .s_txt1 {font-size:1.125em;} } @media screen and (max-width:767px){ .sub_title {display:block;} .sub_title h2 {font-size:2.1em;} .sub_title ul {flex-wrap:wrap; margin-top:1%;} .sub_title ul li {margin-top:5px;} .sub_title ul li a {line-height:32px; padding:0 12px;} .s_tit1 {font-size:1.5em;} .s_tit2 {font-size:1.2em;} .s_tit3 {font-size:1.3em;} .s_txt1 {font-size:1em;} } #sVisu {width:1620px; height:350px; border-radius:20px 20px 0 0; position:relative; overflow:hidden; margin:0 auto;} #sVisu div {content:''; display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transform:scale(1.2); transition:transform 0.3s} .sVisu1 div {background-image:url(../images/sVisu_img1.jpg)} .sVisu2 div {background-image:url(../images/sVisu_img2.jpg)} .sVisu3 div {background-image:url(../images/sVisu_img3.jpg)} .sVisu4 div {background-image:url(../images/sVisu_img4.jpg)} .sVisu5 div {background-image:url(../images/sVisu_img5.jpg)} @media screen and (max-width:1640px){ #sVisu {width:96%} } @media screen and (max-width:1024px){ #sVisu {height:300px;} } @media screen and (max-width:767px){ #sVisu {height:190px; border-radius:15px 15px 0 0;} } .sub_menu_wrap {border-bottom:1px solid #ccc;} .sub_menu_wrap ul {display:flex; width:1200px; margin:0 auto;} .sub_menu_wrap ul li {margin-right:50px;} .sub_menu_wrap ul li:last-child {margin-right:0;} .sub_menu_wrap ul li a {display:block; font-size:1.25em; color:#666; line-height:86px; position:relative;} .sub_menu_wrap ul li.active a {color:#0680fa; font-weight:700;} .sub_menu_wrap ul li.active a:after {content:''; display:block; width:100%; height:3px; background:#0680fa; position:absolute; left:0; bottom:0;} .sub_menu_wrap ul li a:hover {color:#0680fa;} @media screen and (max-width:1220px){ .sub_menu_wrap ul {width:100%;} .sub_menu_wrap ul li a {font-size:1.125em;} } @media screen and (max-width:1024px){ .sub_menu_wrap ul li {margin-right:30px;} .sub_menu_wrap ul li a {font-size:1em; line-height:65px;} .sub_menu_wrap ul li.active a:after {height:2px;} } @media screen and (max-width:767px){ .sub_menu_wrap ul {justify-content:space-between;} .sub_menu_wrap ul li {margin-right:0;} .sub_menu_wrap ul li a {line-height:42px;} } .sub_img_slide1 .img {width:100%; height:250px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:20px;} .sub_img_slide1 dl {margin-top:20px;} .sub_img_slide1 dl dt {font-size:1.375em; font-weight:700;} .sub_img_slide1 dl dd {font-size:1.25em; color:#666; line-height:1.5em; margin-top:10px; word-break:normal;} @media screen and (max-width:1220px){ .sub_img_slide1 .img {height:18vw;} } @media screen and (max-width:1024px){ .sub_img_slide1 .img {border-radius:15px;} .sub_img_slide1 dl {margin-top:15px;} .sub_img_slide1 dl dt {font-size:1.25em;} .sub_img_slide1 dl dd {font-size:1.125em; margin-top:5px;} } @media screen and (max-width:767px){ .sub_img_slide1 .img {height:45vw; border-radius:10px;} .sub_img_slide1 dl dt {font-size:1.125em;} .sub_img_slide1 dl dd {font-size:1em;} } .sub_img_box1 > div {display:flex; align-items:center; flex-wrap:wrap; width:100%; margin-bottom:50px;} .sub_img_box1 > div:last-child {margin-bottom:0;} .sub_img_box1 > div:nth-child(even) {flex-direction:row-reverse;} .sub_img_box1 > div > div {width:50%;} .sub_img_box1 > div .img {height:400px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:20px;} .sub_img_box1 > div:nth-child(odd) .txt_box {padding-left:100px;} .sub_img_box1 > div:nth-child(even) .txt_box {padding-right:100px;} .sub_img_box1 > div .txt_box .s_tit2 {margin-bottom:10px;} .sub_img_box1 > div .txt_box a {display:inline-block; font-size:1.125em; color:#0680fa; font-weight:600; margin-top:30px;} @media screen and (max-width:1220px){ .sub_img_box1 > div .img {height:30vw;} .sub_img_box1 > div:nth-child(odd) .txt_box {padding-left:50px;} .sub_img_box1 > div:nth-child(even) .txt_box {padding-right:50px;} } @media screen and (max-width:1024px){ .sub_img_box1 > div {margin-bottom:5%;} .sub_img_box1 > div .img {border-radius:15px;} .sub_img_box1 > div:nth-child(odd) .txt_box {padding-left:30px;} .sub_img_box1 > div:nth-child(even) .txt_box {padding-right:30px;} .sub_img_box1 > div .txt_box .s_tit2 {margin-bottom:5px;} .sub_img_box1 > div .txt_box a {font-size:1em; margin-top:20px;} } @media screen and (max-width:767px){ .sub_img_box1 > div {margin-bottom:10%;} .sub_img_box1 > div > div {width:100%;} .sub_img_box1 > div .img {height:52vw; border-radius:10px;} .sub_img_box1 > div .txt_box {margin-top:4%;} .sub_img_box1 > div:nth-child(odd) .txt_box {padding-left:0;} .sub_img_box1 > div:nth-child(even) .txt_box {padding-right:0;} .sub_img_box1 > div .txt_box a {margin-top:15px;} } .sub_list_box1 li:after {content:'\f078'; display:block; width:100%; font-size:1.25em; font-weight:900; font-family:'Font Awesome 6 Pro'; text-align:center; margin:10px 0;} .sub_list_box1 li:last-child:after {display:none;} .sub_list_box1 li dl {display:flex; width:100%; border-radius:5px; overflow:hidden;} .sub_list_box1 li dl dt {display:flex; align-items:center; width:250px; background:#0680fa; font-size:1.25em; color:#fff; line-height:1.4em; font-weight:700; padding:0 10px 0 36px} .sub_list_box1 li dl dt i {font-size:1em; margin-right:10px;} .sub_list_box1 li dl dd {width:calc(100% - 250px); background:#f5f7f8; font-size:1.25em; color:#666; line-height:1.5em; padding:20px 30px;} .sub_list_box2 > li {font-size:1.25em; color:#666; line-height:1.5em; margin-bottom:10px; padding-left:21px; position:relative; word-break:normal;} .sub_list_box2 > li:last-child {margin-bottom:0;} .sub_list_box2 > li:before {content:''; display:block; width:6px; height:6px; background:#0680fa; border-radius:50%; position:absolute; left:0; top:13px;} @media screen and (max-width:1024px){ .sub_list_box1 li:after {font-size:1.125em;} .sub_list_box1 li dl dt {width:180px; font-size:1.125em; padding:0 15px;} .sub_list_box1 li dl dt i {margin-right:5px;} .sub_list_box1 li dl dd {width:calc(100% - 180px); font-size:1.125em; padding:15px;} .sub_list_box2 > li {font-size:1.125em; padding-left:15px; margin-bottom:5px;} .sub_list_box2 > li:before {width:4px; height:4px; top:10px;} } @media screen and (max-width:767px){ .sub_list_box1 li:after {font-size:1.125em;} .sub_list_box1 li dl dt {width:140px; font-size:1em; padding:0 10px;} .sub_list_box1 li dl dt i {margin-right:8px;} .sub_list_box1 li dl dd {width:calc(100% - 140px); font-size:1em; padding:10px;} .sub_list_box2 > li {font-size:1em; padding-left:10px; margin-bottom:3px;} .sub_list_box2 > li:before {width:3px; height:3px; top:8px;} } .sCompany_case1 {width:100%; height:325px; background:url(../images/sCompany_img1.png) no-repeat center center; background-size:cover; border-radius:20px; overflow:hidden; position:relative; padding:100px 27px 0;} .sCompany_case1:before {content:''; display:block; width:100%; height:100%; background:#191919; opacity:0.3; position:absolute; left:0; top:0; z-index:0;} .sCompany_case1 ul {display:flex; flex-wrap:wrap; width:100%; position:relative; z-index:10;} .sCompany_case1 ul li {width:25%; padding:0 43px; position:relative; color:#fff;} .sCompany_case1 ul li:after {content:''; display:block; width:1px; height:125px; background:rgba(255,255,255,0.3); position:absolute; right:0; top:0;} .sCompany_case1 ul li:last-child:after {display:none;} .sCompany_case1 ul li i {font-size:2.5em; margin-bottom:30px;} .sCompany_case1 ul li dl dt {font-size:1.125em; font-weight:500;} .sCompany_case1 ul li dl dd {font-size:1.25em; line-height:1.5em; font-weight:700; margin-top:5px;} .sCompany_case2 p {display:flex; justify-content:center; align-items:center; text-align:center; height:64px;} .sCompany_case2 .ceo {width:250px; background:#0680fa; border-radius:5px; font-size:1.25em; color:#fff; font-weight:600; margin:0 auto;} .sCompany_case2 .list1 {width:750px; margin:0 auto; overflow:hidden; padding:50px 0 70px; position:relative;} .sCompany_case2 .list1:before {content:''; display:block; width:1px; height:100%; background:#ccc; position:absolute; left:50%; top:0;} .sCompany_case2 .list1 li {width:250px; border-radius:5px; position:relative;} .sCompany_case2 .list1 li:before {content:''; display:block; width:50%; height:1px; background:#ccc; position:absolute; top:50%;} .sCompany_case2 .list1 li:nth-child(odd) {float:left; background:#0056ac; margin-top:20px;} .sCompany_case2 .list1 li:nth-child(odd):before {left:100%;} .sCompany_case2 .list1 li:nth-child(even) {float:right; background:#a3a6ae; clear:both; margin-top:-97px;} .sCompany_case2 .list1 li:nth-child(even):before {right:100%;} .sCompany_case2 .list1 li:first-child {margin-top:33px;} .sCompany_case2 .list1 li p {width:100%; font-size:1.25em; color:#fff; font-weight:600;} .sCompany_case2 .list2 {display:flex; justify-content:space-between; align-items:start; flex-wrap:wrap; width:100%; padding-top:50px; position:relative;} .sCompany_case2 .list2:before {content:''; display:block; width:calc(83.34% + 10px); height:1px; background:#ccc; position:absolute; left:50%; top:0; transform:translateX(-50%)} .sCompany_case2 .list2 li {width:calc(16.66% - 8.33px); position:relative;} .sCompany_case2 .list2 li:before {content:''; display:block; width:1px; height:50px; background:#ccc; position:absolute; left:50%; bottoM:100%;} .sCompany_case2 .list2 li dl dt p {width:100%; border:2px solid #a4a4a4; border-radius:5px; font-size:1.125em; color:#666; font-weight:600;} .sCompany_case2 .list2 li dl dd p {background:#f5f7f8; border-radius:5px; font-size:1.125em; color:#666; margin-top:10px;} .sCompany_case3 .tab_box {display:flex; width:100%; margin-bottom:30px;} .sCompany_case3 .tab_box li {margin-right:5px;} .sCompany_case3 .tab_box li:last-child {margin-right:0;} .sCompany_case3 .tab_box li button {display:block; height:47px; background:#f5f7f8; border-radius:5px; font-size:1.125em; color:#a4a4a4; font-family:'Pretendard'; padding:0 25px;} .sCompany_case3 .tab_box li.active button {background:#0680fa; color:#fff; font-weight:600;} .sCompany_case3 .cont_box > div:not(.active) {width:100%; height:100%; opacity:0; visibility:hidden; position:fixed; left:-9999px; top:-9999px;} .sCompany_case3 .map_box {width:100%; height:500px; border-radius:20px; overflow:hidden; background:#f5f7f8;} .sCompany_case3 .map_box .root_daum_roughmap .wrap_map {height:100% !important;} .sCompany_case3 .info_box {margin-top:50px; position:relative; padding-right:200px;} .sCompany_case3 .info_box .add {font-size:1.375em; font-weight:700; margin-bottom:15px;} .sCompany_case3 .info_box ul {display:flex; width:100%;} .sCompany_case3 .info_box ul li {padding-right:60px; position:relative;} .sCompany_case3 .info_box ul li:last-child {padding-right:0;} .sCompany_case3 .info_box ul li:after {content:''; display:block; width:1px; height:100%; background:#ccc; position:absolute; right:30px; top:0;} .sCompany_case3 .info_box ul li:last-child:after {display:none;} .sCompany_case3 .info_box ul li p {font-size:1.25em; color:#666; line-height:1.5em;} .sCompany_case3 .info_box ul li p a {color:#666;} .sCompany_case3 .info_box .bkenc_btn1 {position:absolute; right:0; top:0;} .sCompany_slide1 img {width:100%; border:1px solid #ccc;} @media screen and (max-width:1220px){ .sCompany_case1 {padding:80px 0 0;} } @media screen and (max-width:1024px){ .sCompany_case1 {height:260px; border-radius:15px;} .sCompany_case1 ul li {padding:0 20px;} .sCompany_case1 ul li:after {height:90px;} .sCompany_case1 ul li i {font-size:2em; margin-bottom:20px;} .sCompany_case1 ul li dl dt {font-size:1em;} .sCompany_case1 ul li dl dd {font-size:1.125em; margin-top:3px;} .sCompany_case2 p {height:55px;} .sCompany_case2 .ceo {width:180px; font-size:1.125em;} .sCompany_case2 .list1 {width:540px; padding:30px 0 40px;} .sCompany_case2 .list1 li {width:180px;} .sCompany_case2 .list1 li:nth-child(odd) {margin-top:10px;} .sCompany_case2 .list1 li:nth-child(even) {margin-top:-75px;} .sCompany_case2 .list1 li:first-child {margin-top:20px;} .sCompany_case2 .list1 li p {font-size:1.125em;} .sCompany_case2 .list2 {padding-top:30px;} .sCompany_case2 .list2 li:before {height:30px;} .sCompany_case2 .list2 li dl dt p {font-size:1em;} .sCompany_case2 .list2 li dl dd p {font-size:1em;} .sCompany_case3 .tab_box {margin-bottom:3%;} .sCompany_case3 .tab_box li button {height:38px; font-size:1em; padding:0 15px;} .sCompany_case3 .map_box {height:380px; border-radius:15px;} .sCompany_case3 .info_box {margin-top:5%; padding-right:0;} .sCompany_case3 .info_box .add {font-size:1.25em; margin-bottom:10px;} .sCompany_case3 .info_box ul li {padding-right:40px;} .sCompany_case3 .info_box ul li:after {right:20px;} .sCompany_case3 .info_box ul li p {font-size:1.125em;} .sCompany_case3 .info_box .bkenc_btn1 {position:relative; margin-top:30px;} } @media screen and (max-width:767px){ .sCompany_case1 {height:auto; border-radius:10px; padding:5px;} .sCompany_case1 ul li {width:50%; text-align:center; padding:25px;} .sCompany_case1 ul li:after {height:calc(100% - 40px); top:50%; transform:translateY(-50%)} .sCompany_case1 ul li:nth-child(even):after {display:none;} .sCompany_case1 ul li:nth-child(2) ~ li:before {content:''; display:block; width:calc(100% - 40px); height:1px; background:rgba(255,255,255,0.3); position:absolute; left:50%; top:0; transform:translateX(-50%)} .sCompany_case1 ul li i {margin-bottom:15px;} .sCompany_case1 ul li dl dd {font-size:1em;} .sCompany_case2 p {height:40px;} .sCompany_case2 .ceo {width:120px; font-size:1em;} .sCompany_case2 .list1 {width:100%; max-width:360px; padding:20px 0;} .sCompany_case2 .list1 li {width:33.33%;} .sCompany_case2 .list1 li:nth-child(odd) {margin-top:5px;} .sCompany_case2 .list1 li:nth-child(even) {margin-top:-50px;} .sCompany_case2 .list1 li:first-child {margin-top:10px;} .sCompany_case2 .list1 li p {font-size:1em;} .sCompany_case2 .list2 {padding-top:15px;} .sCompany_case2 .list2:before {width:calc(50% + 2.5px)} .sCompany_case2 .list2 li {width:calc(50% - 2.5px)} .sCompany_case2 .list2 li:nth-child(2) ~ li {margin-top:15px;} .sCompany_case2 .list2 li:before {height:15px;} .sCompany_case2 .list2 li:nth-child(2) ~ li:before {display:none;} .sCompany_case2 .list2 li dl dd p {margin-top:5px;} .sCompany_case3 .tab_box li button {height:32px; padding:0 12px;} .sCompany_case3 .map_box {height:230px; border-radius:10px;} .sCompany_case3 .info_box {margin-top:5%; padding-right:0;} .sCompany_case3 .info_box .add {font-size:1.2em; margin-bottom:5px;} .sCompany_case3 .info_box ul {display:block;} .sCompany_case3 .info_box ul li {padding-right:0; margin-bottom:5px;} .sCompany_case3 .info_box ul li:last-child {margin-bottom:0;} .sCompany_case3 .info_box ul li:after {display:none;} .sCompany_case3 .info_box ul li p {font-size:1em;} .sCompany_case3 .info_box .bkenc_btn1 {margin-top:20px;} } .sPhotovoltaic_case1 {width:100%; height:325px; background:url(../images/sPhotovoltaic_img1.jpg) no-repeat center center; background-size:cover; border-radius:20px; overflow:hidden; position:relative; padding:100px 27px 0;} .sPhotovoltaic_case1:before {content:''; display:block; width:100%; height:100%; background:#191919; opacity:0.3; position:absolute; left:0; top:0; z-index:0;} .sPhotovoltaic_case1 ul {display:flex; flex-wrap:wrap; width:100%; position:relative; z-index:10;} .sPhotovoltaic_case1 ul li {width:25%; padding:0 43px; position:relative; color:#fff;} .sPhotovoltaic_case1 ul li:after {content:''; display:block; width:1px; height:125px; background:rgba(255,255,255,0.3); position:absolute; right:0; top:0;} .sPhotovoltaic_case1 ul li:last-child:after {display:none;} .sPhotovoltaic_case1 ul li i {font-size:2.5em; margin-bottom:30px;} .sPhotovoltaic_case1 ul li dl dt {font-size:1.125em; font-weight:500;} .sPhotovoltaic_case1 ul li dl dd {font-size:1.25em; line-height:1.5em; font-weight:700; margin-top:5px;} .sPhotovoltaic_case2 {display:flex; flex-wrap:wrap; width:100%;} .sPhotovoltaic_case2 > div {width:calc(33.33% - 13.33px); margin-right:20px;} .sPhotovoltaic_case2 > div:nth-child(3n) {margin-right:0;} .sPhotovoltaic_case2 > div:nth-child(3) ~ div {margin-top:20px;} .sPhotovoltaic_case2 > div .img {width:100%; border-radius:5px; border:1px solid #ccc; overflow:hidden;} .sPhotovoltaic_case2 > div .img img {width:100%;} .sPhotovoltaic_case2 > div p {font-size:1.125em; color:#666; line-height:1.5em; text-align:center; margin-top:5px;} @media screen and (max-width:1220px){ .sPhotovoltaic_case1 {padding:80px 0 0;} } @media screen and (max-width:1024px){ .sPhotovoltaic_case1 {height:260px; border-radius:15px;} .sPhotovoltaic_case1 ul li {padding:0 20px;} .sPhotovoltaic_case1 ul li:after {height:90px;} .sPhotovoltaic_case1 ul li i {font-size:2em; margin-bottom:20px;} .sPhotovoltaic_case1 ul li dl dt {font-size:1em;} .sPhotovoltaic_case1 ul li dl dd {font-size:1.125em; margin-top:3px;} .sPhotovoltaic_case2 > div {width:calc(33.33% - 6.66px); margin-right:10px;} .sPhotovoltaic_case2 > div p {font-size:1em;} } @media screen and (max-width:767px){ .sPhotovoltaic_case1 {height:auto; border-radius:10px; padding:5px;} .sPhotovoltaic_case1 ul li {width:50%; text-align:center; padding:25px;} .sPhotovoltaic_case1 ul li:after {height:calc(100% - 40px); top:50%; transform:translateY(-50%)} .sPhotovoltaic_case1 ul li:nth-child(even):after {display:none;} .sPhotovoltaic_case1 ul li:nth-child(2) ~ li:before {content:''; display:block; width:calc(100% - 40px); height:1px; background:rgba(255,255,255,0.3); position:absolute; left:50%; top:0; transform:translateX(-50%)} .sPhotovoltaic_case1 ul li i {margin-bottom:15px;} .sPhotovoltaic_case1 ul li dl dd {font-size:1em;} .sPhotovoltaic_case2 > div {width:calc(50% - 2.5px); margin-right:5px;} .sPhotovoltaic_case2 > div:nth-child(3n) {margin-right:5px;} .sPhotovoltaic_case2 > div:nth-child(even) {margin-right:0;} .sPhotovoltaic_case2 > div:nth-child(2) ~ div {margin-top:15px;} } .sSolution_case1 {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; counter-reset:counter;} .sSolution_case1 li {width:calc(16.66% - 25px);} .sSolution_case1 li:before {content:'STEP'counter(counter); counter-increment:counter; display:block; width:100%; background:#0680fa; font-size:1.25em; color:#fff; font-weight:700; text-align:center; line-height:60px; border-radius:5px 5px 0 0;} .sSolution_case1 li p {display:flex; justify-content:center; align-items:center; width:100%; height:calc(100% - 60px); background:#f5f7f8; font-size:1.25em; color:#666; line-height:1.5em; text-align:center; padding:20px 0 30px; position:relative; border-radius:0 0 5px 5px;} .sSolution_case1 li p:after {content:'\f054'; display:block; width:30px; font-size:0.8em; color:#191919; font-weight:900; font-family:'Font Awesome 6 Pro'; position:absolute; left:100%; top:50%; transform:translateY(-50%)} .sSolution_case1 li:last-child p:after {display:none;} .sSolution_case2 {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%;} .sSolution_case2 > div {width:calc(50% - 10px)} .sSolution_case2 > div .img {width:100%; height:300px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:20px;} .sSolution_case2 > div .s_tit2 {margin-top:20px;} .sSolution_case2 > div .s_txt1 {margin-top:10px;} .sSolution_case3 ul {width:100%; border-top:1px solid #ccc; margin-top:30px; padding-top:30px;} .sSolution_case3 ul li {padding-left:103px; position:relative; margin-bottom:20px;} .sSolution_case3 ul li:last-child {margin-bottom:0;} .sSolution_case3 ul li .tit {display:block; width:84px; line-height:35px; border-radius:5px; font-size:1em; color:#fff; font-weight:600; text-align:center; position:absolute; left:0; top:0;} .sSolution_case3 ul li .tit.case1 {background:#0680fa;} .sSolution_case3 ul li .tit.case2 {background:#15c748;} .sSolution_case3 ul li .txt {font-size:1.125em; color:#666; line-height:1.38em;} .sSolution_case4 {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%;} .sSolution_case4 > div {width:calc(33.33% - 26.66px);} .sSolution_case4 > div .img {width:100%; height:250px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:20px; position:relative;} .sSolution_case4 > div .img:after {content:'\f054'; display:block; width:40px; font-size:1.25em; font-weight:900; font-family:'Font Awesome 6 Pro'; text-align:center; position:absolute; left:100%; top:50%; transform:translateY(-50%);} .sSolution_case4 > div:last-child .img:after {display:none;} .sSolution_case4 > div .s_tit2 {margin:20px 0 10px;} .sSolution_case4 > div .sub_list_box2 > li {margin-bottom:0;} @media screen and (max-width:1220px){ .sSolution_case2 > div .img {height:22vw} .sSolution_case4 > div .img {height:18vw;} } @media screen and (max-width:1024px){ .sSolution_case1 li {width:calc(16.66% - 16.66px)} .sSolution_case1 li:before {font-size:1.125em; line-height:45px;} .sSolution_case1 li p {height:calc(100% - 45px); font-size:1.125em; padding:15px 0;} .sSolution_case1 li p:after {width:20px;} .sSolution_case2 > div {width:calc(50% - 5px)} .sSolution_case2 > div .img {border-radius:15px;} .sSolution_case2 > div .s_tit2 {margin-top:15px} .sSolution_case2 > div .s_txt1 {margin-top:5px;} .sSolution_case3 ul {margin-top:20px; padding-top:20px;} .sSolution_case3 ul li {padding-left:80px; margin-bottom:15px;} .sSolution_case3 ul li .tit {width:70px; line-height:32px; font-size:0.875em;} .sSolution_case3 ul li .txt {font-size:1em;} .sSolution_case4 > div {width:calc(33.33% - 13.33px)} .sSolution_case4 > div .img {border-radius:15px;} .sSolution_case4 > div .img:after {width:20px; font-size:1em;} .sSolution_case4 > div .s_tit2 {margin:15px 0 5px;} } @media screen and (max-width:767px){ .sSolution_case1 li {width:calc(33.33% - 10px);} .sSolution_case1 li:nth-child(3) ~ li {margin-top:15px;} .sSolution_case1 li:before {font-size:1em; line-height:35px;} .sSolution_case1 li p {height:calc(100% - 35px); font-size:1em; padding:10px 0;} .sSolution_case1 li p:after {width:15px;} .sSolution_case2 > div {width:100%; margin-bottom:7%;} .sSolution_case2 > div:last-child {margin-bottom:0;} .sSolution_case2 > div .img {height:45vw; border-radius:10px;} .sSolution_case2 > div .s_tit2 {margin-top:10px} .sSolution_case2 > div .s_txt1 {margin-top:3px;} .sSolution_case3 ul {margin-top:15px; padding-top:15px;} .sSolution_case3 ul li {padding-left:75px;} .sSolution_case3 ul li .tit {width:60px; line-height:30px;} .sSolution_case4 > div {width:100%;} .sSolution_case4 > div:after {content:'\f078'; display:block; width:100%; font-size:1em; font-weight:900; font-family:'Font Awesome 6 Pro'; text-align:center; margin:3% 0;} .sSolution_case4 > div:last-child:after {display:none;} .sSolution_case4 > div .img {height:48vw; border-radius:10px;} .sSolution_case4 > div .img:after {display:none;} .sSolution_case4 > div .s_tit2 {margin-top:10px;} } .popup_wrap {display:none; justify-content:center; align-items:center; width:100%; height:100vh; position:fixed; left:0; top:0; z-index:500;} .popup_wrap.active {display:flex;} .popup_wrap .dim {width:100%; height:100%; background:rgba(25,25,25,0.6); position:absolute; left:0; top:0;} .popup_inner {width:88%; max-width:600px; max-height:90vh; background:#fff; border-radius:5px; overflow-y:auto; z-index:10;} .popup_inner .tit_box {display:flex; justify-content:space-between; align-items:center; width:100%; padding:24px;} .popup_inner .tit_box p {font-size:1.5em; font-weight:500;} .popup_inner .tit_box .close_btn {font-size:1.5em;} .popup_inner .cont {padding:0 24px 24px; font-size:1em; color:#666; line-height:1.5em;} @media screen and (max-width:1024px){ .popup_inner .tit_box {padding:15px;} .popup_inner .tit_box p {font-size:1.3em;} .popup_inner .tit_box .close_btn {font-size:1.3em;} .popup_inner .cont {padding:0 15px 15px;} } .popup_wrap2 {display:none; justify-content:center; align-items:center; width:100%; height:100vh; position:fixed; left:0; top:0; z-index:350;} .popup_wrap2.active {display:flex;} .popup_wrap2 .popup_dim {width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; left:0; top:0;} .popup_wrap2 .popup_inner {width:88%; max-width:550px; background:#fff; padding:40px; position:relative; box-shadow:0 0 15px rgba(255,255,255,0.05)} .popup_wrap2.case2 .popup_inner {max-width:500px;} .popup_wrap2 .popup_inner .close_btn {font-size:1.5em; position:absolute; right:35px; top:35px;} .popup_wrap2 .popup_inner .close_btn:before {content:'\f00d'; font-size:1em; color:#1c1c1c; font-weight:300; font-family:'Font Awesome 6 Pro';} .popup_wrap2 .popup_inner .tit {font-size:1.5em; font-weight:600;} .popup_wrap2 .popup_inner > div {width:100%; max-height:40vh; overflow-y:auto; margin:30px 0; padding-right:20px;} .popup_wrap2 .popup_inner > div::-webkit-scrollbar {width:3px;} .popup_wrap2 .popup_inner > div::-webkit-scrollbar-thumb {background:#e12f56;} .popup_wrap2 .popup_inner > div::-webkit-scrollbar-track {background:rgba(255,255,255, 0.1);} .popup_wrap2 .popup_inner > div h4 {font-size:1em; font-weight:500; margin:30px 0 5px;} .popup_wrap2 .popup_inner > div p {font-size:0.875em; line-height:1.7em;} .popup_wrap2 .popup_inner .agree_btn {display:block; width:180px; height:50px; background:#fff; font-size:1em; color:#000; font-weight:600; font-family:'Pretendard'; margin:0 auto;} .popup_wrap2.case2 .popup_inner {padding:55px 75px;} .popup_wrap2.case2 .popup_inner dl {text-align:center;} .popup_wrap2.case2 .popup_inner dl dt {font-size:1.25em; line-height:1.3em; font-weight:700;} .popup_wrap2.case2 .popup_inner dl dd {font-size:1em; color:#666; line-height:1.625em; font-weight:500; margin-top:10px;} .popup_wrap2.case2 .popup_inner .button_box {display:flex; justify-content:space-between; width:100%;} .popup_wrap2.case2 .popup_inner .button_box a {display:flex; justify-content:center; align-items:center; width:calc(50% - 3px); height:60px; border:1px solid #1c1c1c; font-size:1em; font-weight:600; text-align:center;} .popup_wrap2.case2 .popup_inner .button_box a.case2 {background:#1c1c1c; color:#fff;} @media screen and (max-width:767px){ .popup_wrap2 .popup_inner {padding:20px;} .popup_wrap2 .popup_inner .close_btn {right:15px; top:20px;} .popup_wrap2 .popup_inner > div {margin:20px 0;} .popup_wrap2 .popup_inner > div h4 {font-size:1.125em;} .popup_wrap2 .popup_inner > div p {font-size:1em;} .popup_wrap2 .popup_inner .agree_btn {width:120px; height:40px;} .popup_wrap2.case2 .popup_inner {padding:40px;} .popup_wrap2.case2 .popup_inner .button_box a {height:45px;} } .sPayment_case1 {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%;} .sPayment_case1 > div {width:calc(50% - 10px); border:1px solid #ccc; border-radius:5px; padding:40px 40px 151px; position:relative;} .sPayment_case1 > div .img img {width:100%; height:auto;} .sPayment_case1 > div .s_tit2 {margin:20px 0 10px;} .sPayment_case1 > div button {display:block; width:calc(100% - 80px); height:61px; background:#fff; border:2px solid #0680fa; border-radius:5px; font-size:1.125em; color:#0680fa; font-weight:600; font-family:'Pretendard'; position:absolute; left:50%; bottom:50px; transform:translateX(-50%)} @media screen and (max-width:1024px){ .sPayment_case1 > div {width:calc(50% - 5px); padding:20px 20px 100px;} .sPayment_case1 > div .s_tit2 {margin:15px 0 5px;} .sPayment_case1 > div button {width:calc(100% - 40px); height:50px; font-size:1em; bottom:20px;} } @media screen and (max-width:767px){ .sPayment_case1 > div {width:100%; margin-bottom:2%; padding:4%;} .sPayment_case1 > div:last-child {margin-bottom:0;} .sPayment_case1 > div button {width:100%; height:42px; position:relative; left:0; bottom:0; transform:translateX(0); margin-top:6%;} } .orderform_wrap {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%;} .orderform_wrap .line {display:block; width:100%; height:1px; background:#e0e0e0; margin:40px 0; border:0;} .orderform_wrap > div .title {font-size:1.25em; font-weight:600; line-height:1.2em; margin-bottom:30px;} .orderform_wrap .info_box {width:calc(100% - 430px); padding-right:70px; border-right:1px solid #e0e0e0;} .orderform_wrap .info_box .list1 {width:100%; overflow:hidden;} .orderform_wrap .info_box .list1 dt {float:left; width:70px; font-size:1em; line-height:1.8em; font-weight:600; clear:both;} .orderform_wrap .info_box .list1 dd {float:left; width:calc(100% - 70px); font-size:1em; color:#666; line-height:1.8em; font-weight:400;} .orderform_wrap .info_box .form_list {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; } .orderform_wrap .info_box .form_list > li {width:100%; margin-bottom:30px;} .orderform_wrap .info_box .form_list > li:last-child {margin-bottom:0;} .orderform_wrap .info_box .form_list > li.w_50 {width:calc(50% - 5px);} .orderform_wrap .info_box .form_list > li > label {display:block; font-size:1em; color:#191919; font-weight:600; margin-bottom:10px;} .orderform_wrap .info_box .coupon_box {display:flex; justify-content:space-between; flex-wrap:wrap;} .orderform_wrap .info_box .coupon_box > input {width:calc(100% - 98px);} .orderform_wrap .info_box .coupon_box.case2 > input {width:calc(100% - 196px);} .orderform_wrap .info_box .coupon_box .cp_btn {display:block; width:88px; height:59px; background:#fff; border:1px solid #1c1c1c; border-radius:0; font-size:1em; color:#1c1c1c; font-weight:600; font-family:'Pretendard';} .orderform_wrap .info_box .coupon_box .cp_cancel {display:block; width:88px; height:59px; background:#1c1c1c; border:1px solid #1c1c1c; border-radius:0; font-size:1em; color:#fff; font-weight:600; font-family:'Pretendard';} .orderform_wrap .pay_box {width:360px;} .orderform_wrap .pay_box .pay_list {border-top:1px solid #707070;} .orderform_wrap .pay_box .pay_list > li {display:flex; padding:15px 10px; border-bottom:1px solid #e0e0e0;} .orderform_wrap .pay_box .pay_list > li > span {display:block; width:100px; font-size:1em; color:#1c1c1c; font-weight:500;} .orderform_wrap .pay_box .pay_list > li > div {width:calc(100% - 100px); text-align:right; font-size:1em; color:#666; font-weight:500;} .orderform_wrap .pay_box .pay_list > li > div strong {font-weight:500;} .orderform_wrap .pay_box .pay_list > li > div .price {font-size:1.25em; color:#1c1c1c; font-weight:600;} .orderform_wrap .pay_box .pay_list > li > div .price strong {font-weight:600;} .orderform_wrap .pay_box .pay_list > li > div .s_txt {font-size:0.875em; font-weight:400; margin-top:5px;} .orderform_wrap .pay_box .chk_box {margin-top:15px;} .orderform_wrap .pay_box .agree_list {display:flex; align-items:center; flex-wrap:wrap; margin-top:20px; padding-left:30px;} .orderform_wrap .pay_box .agree_list dt {width:50%; font-size:0.875em; color:#a4a4a4; line-height:1.7em} .orderform_wrap .pay_box .agree_list dd {width:50%; font-size:0.875em; font-weight:500; text-align:right; line-height:1.7em;} .orderform_wrap .pay_box .agree_list dd a {color:#1c1c1c; text-decoration:underline;} .orderform_wrap .add_box {display:flex; justify-content:space-between; flex-wrap:wrap;} .orderform_wrap .add_box .frm_zip {width:calc(100% - 130px)} .orderform_wrap .add_box .btn_address {display:block; width:125px; height:59px; background:#191919; font-size:1em; color:#fff; font-weight:600; font-family:'Pretendard';} .orderform_wrap .add_box .frm_address {margin-top:5px;} @media screen and (max-width:1024px){ .orderform_wrap > div .title {margin-bottom:15px;} .orderform_wrap .info_box {width:calc(100% - 310px); padding-right:30px;} .orderform_wrap .info_box .coupon_box .cp_btn, .orderform_wrap .info_box .coupon_box .cp_cancel {height:50px;} .orderform_wrap .pay_box {width:280px;} .orderform_wrap .add_box .frm_zip {width:calc(100% - 100px)} .orderform_wrap .add_box .btn_address {width:95px; height:50px;} } @media screen and (max-width:767px){ .orderform_wrap .info_box {width:100%; padding-right:0; margin-bottom:10%; border-right:0;} .orderform_wrap .info_box .coupon_box .cp_btn, .orderform_wrap .info_box .coupon_box .cp_cancel {height:42px;} .orderform_wrap .info_box .list1 dt {width:50px} .orderform_wrap .info_box .list1 dd {width:calc(100% - 50px);} .orderform_wrap .pay_box {width:100%;} .orderform_wrap .add_box .frm_zip {width:calc(100% - 80px)} .orderform_wrap .add_box .btn_address {width:75px; height:42px;} } .orderinquiryview_wrap {width:calc(100% - 154px); border-top:1px solid #1c1c1c; margin:0 auto;} .orderinquiryview_wrap > div {width:100%; border-bottom:1px solid #e0e0e0; padding:40px 0;} .orderinquiryview_wrap > div .tit {font-size:1.25em; font-weight:600; margin-bottom:30px;} .orderinquiryview_wrap > div dl {width:100%; overflow:hidden;} .orderinquiryview_wrap > div dl dt {float:left; font-size:1em; line-height:1.8em; font-weight:600; clear:both;} .orderinquiryview_wrap > div dl dd {float:left; font-size:1em; color:#666; line-height:1.8em;} .orderinquiryview_wrap > div dl.case1 dt {width:60px;} .orderinquiryview_wrap > div dl.case1 dd {width:calc(100% - 60px);} .orderinquiryview_wrap > div dl.case2 dt {width:75px;} .orderinquiryview_wrap > div dl.case2 dd {width:calc(100% - 75px);} .orderinquiryview_wrap > div dl.case3 dt {width:120px;} .orderinquiryview_wrap > div dl.case3 dd {width:calc(100% - 120px);} .orderinquiryview_wrap > div dl.case4 dt {width:90px;} .orderinquiryview_wrap > div dl.case4 dd {width:calc(100% - 90px);} .orderinquiryview_wrap > div dl.case5 dt {width:110px;} .orderinquiryview_wrap > div dl.case5 dd {width:calc(100% - 110px);} .orderinquiryview_wrap > div .info_box {display:flex; align-items:center; flex-wrap:wrap; width:100%;} .orderinquiryview_wrap > div .info_box .img_box {width:270px;} .orderinquiryview_wrap > div .info_box .img_box img {width:100%; height:auto;} .orderinquiryview_wrap > div .info_box .txt_box {width:calc(100% - 270px); padding-left:50px; overflow:hidden;} .orderinquiryview_wrap > div .info_box .txt_box dl {float:left; width:50%;} .orderinquiryview_wrap > div .txt {font-size:1em; color:#666;} .orderinquiryview_wrap > div dl.price {width:300px; margin-top:20px; padding-top:20px; border-top:1px solid #e0e0e0;} .orderinquiryview_wrap > div dl.price dd {font-size:1.25em; color:#1c1c1c; font-weight:600;} .orderinquiryview_btn {display:flex; justify-content:center; margin-top:70px;} .orderinquiryview_btn a {display:flex; justify-content:center; align-items:center; width:191px; height:52px; border:1px solid #1c1c1c; font-size:1em; font-weight:600; text-align:center; margin:0 2.5px;} .orderinquiryview_btn a.case2 {background:#1c1c1c; color:#fff;} @media screen and (max-width:1320px){ .orderinquiryview_wrap {width:100%;} } @media screen and (max-width:1024px){ .orderinquiryview_wrap > div {padding:20px 0;} .orderinquiryview_wrap > div .tit {margin-bottom:10px;} .orderinquiryview_wrap > div dl dt {line-height:1.6em;} .orderinquiryview_wrap > div dl dd {line-height:1.6em;} .orderinquiryview_wrap > div .info_box .img_box {width:220px;} .orderinquiryview_wrap > div .info_box .txt_box {width:calc(100% - 220px); padding-left:30px;} .orderinquiryview_btn {margin-top:40px;} .orderinquiryview_btn a {width:160px; height:45px;} } @media screen and (max-width:767px){ .orderinquiryview_wrap > div dl.case1 dt {width:50px;} .orderinquiryview_wrap > div dl.case1 dd {width:calc(100% - 50px);} .orderinquiryview_wrap > div dl.case2 dt {width:100px;} .orderinquiryview_wrap > div dl.case2 dd {width:calc(100% - 100px);} .orderinquiryview_wrap > div dl.case3 dt {width:100px;} .orderinquiryview_wrap > div dl.case3 dd {width:calc(100% - 100px);} .orderinquiryview_wrap > div dl.case4 dt {width:70px;} .orderinquiryview_wrap > div dl.case4 dd {width:calc(100% - 70px);} .orderinquiryview_wrap > div dl.case5 dt {width:90px;} .orderinquiryview_wrap > div dl.case5 dd {width:calc(100% - 90px);} .orderinquiryview_wrap > div .info_box .img_box {width:100%;} .orderinquiryview_wrap > div .info_box .txt_box {width:100%; padding-left:0; margin-top:15px;} .orderinquiryview_wrap > div .info_box .txt_box dl {float:none; width:100%;} .orderinquiryview_btn a {width:140px; height:40px;} } .my_reservation_list > div {width:100%; border:1px solid #e0e0e0; padding:40px; margin-bottom:20px;} .my_reservation_list > div:last-child {margin-bottom:0;} .my_reservation_list > div.empty_box {text-align:center;} .my_reservation_list > div .tit_box {display:flex; justify-content:space-between; align-items:center; width:100%; border-bottom:1px solid #e0e0e0; padding-bottom:20px; margin-bottom:30px;} .my_reservation_list > div .tit_box ul {display:flex; align-items:center;} .my_reservation_list > div .tit_box ul li {font-size:1em; font-weight:600;} .my_reservation_list > div .tit_box ul li:after {content:''; display:inline-block; width:1px; height:16px; background:#e0e0e0; margin:0 15px; vertical-align:middle;} .my_reservation_list > div .tit_box ul li:last-child:after {display:none;} .my_reservation_list > div .tit_box ul li span {color:#666; font-weight:400; margin-left:10px;} .my_reservation_list > div .tit_box a {font-size:0.875em; color:#666;} .my_reservation_list > div .tit_box a:after {content:'\f105'; font-size:0.85em; color:#1c1c1c; font-weight:300; font-family:'Font Awesome 6 Pro'; margin-left:10px;} .my_reservation_list > div .info_box {display:flex; align-items:center; flex-wrap:wrap; width:100%;} .my_reservation_list > div .info_box .info {display:flex; align-items:center; width:calc(100% - 210px);} .my_reservation_list > div .info_box .info .img_box {width:270px;} .my_reservation_list > div .info_box .info .img_box img {width:100%; height:auto;} .my_reservation_list > div .info_box .info .txt_box {width:calc(100% - 270px); padding-left:50px; border-right:1px solid #e0e0e0;} .my_reservation_list > div .info_box .info .txt_box .tit {font-size:1.25em; font-weight:600; margin-bottom:20px;} .my_reservation_list > div .info_box .info .txt_box dl {width:100%; overflow:hidden;} .my_reservation_list > div .info_box .info .txt_box dl dt {float:left; font-size:1em; font-weight:500; margin-right:10px; clear:both; margin-top:10px;} .my_reservation_list > div .info_box .info .txt_box dl dd {float:left; font-size:1em; color:#666; margin-top:10px;} .my_reservation_list > div .info_box .info .txt_box dl dt:first-of-type, .my_reservation_list > div .info_box .info .txt_box dl dd:first-of-type {margin-top:0;} .my_reservation_list > div .info_box .state {width:210px; text-align:center;} .my_reservation_list > div .info_box .state dt {font-size:1em; color:#666;} .my_reservation_list > div .info_box .state dd {font-size:1.25em; font-weight:600; margin-top:10px} .my_reservation_list > div .info_box .state dd.complete {color:#3e86ff;} .my_reservation_list > div .info_box .state dd.cancle {color:#e63946;} @media screen and (max-width:1024px){ .my_reservation_list > div {padding:30px; margin-bottom:15px;} .my_reservation_list > div .tit_box {padding-bottom:10px; margin-bottom:15px;} .my_reservation_list > div .tit_box ul li:after {height:13px; margin:0 10px;} .my_reservation_list > div .tit_box ul li span {margin-left:5px;} .my_reservation_list > div .info_box .info {width:calc(100% - 150px);} .my_reservation_list > div .info_box .info .img_box {width:200px;} .my_reservation_list > div .info_box .info .txt_box {width:calc(100% - 200px); padding-left:30px;} .my_reservation_list > div .info_box .info .txt_box .tit {font-size:1.125em; margin-bottom:10px;} .my_reservation_list > div .info_box .info .txt_box dl dt {margin-top:5px;} .my_reservation_list > div .info_box .info .txt_box dl dd {margin-top:5px;} .my_reservation_list > div .info_box .state {width:150px;} .my_reservation_list > div .info_box .state dd {font-size:1.125em; margin-top:5px;} } @media screen and (max-width:767px){ .my_reservation_list > div {padding:20px; margin-bottom:10px;} .my_reservation_list > div .tit_box {} .my_reservation_list > div .tit_box ul {display:block;} .my_reservation_list > div .tit_box ul li {margin-bottom:5px} .my_reservation_list > div .tit_box ul li:last-child {margin-bottom:0;} .my_reservation_list > div .tit_box ul li:after {display:none;} .my_reservation_list > div .tit_box a {} .my_reservation_list > div .info_box .info {width:100%;} .my_reservation_list > div .info_box .info .img_box {width:110px;} .my_reservation_list > div .info_box .info .txt_box {width:calc(100% - 110px); padding-left:15px; border-right:0;} .my_reservation_list > div .info_box .info .txt_box .tit {margin-bottom:5px;} .my_reservation_list > div .info_box .info .txt_box dl dt {margin-right:5px;} .my_reservation_list > div .info_box .state {width:100%; border-top:1px solid #e0e0e0; margin-top:15px; padding-top:15px;} .my_reservation_list > div .info_box .state dl {display:flex; justify-content:center; align-items:center;} .my_reservation_list > div .info_box .state dd {font-size:1.125em; margin-top:0; margin-left:10px;} } .ai_popup_wrap {width:88%; max-width:500px; max-height:calc(100vh - 100px); position:fixed; right:50px; bottom:50px; z-index:400; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(30px); transition:all 0.6s; transition-property:opacity, visibility, transform;} .ai_popup_wrap.on {opacity:1; visibility:visible; transform:translateY(0);} .ai_popup_wrap > div {position:relative;} .ai_popup_wrap .tit_box {width:100%; background:#0680fa; padding:20px 30px 60px; position:relative; overflow:hidden;} .ai_popup_wrap .tit_box .a_logo {height:24px; margin-bottom:10px; opacity:0.5} .ai_popup_wrap .tit_box .a_logo img {height:100%;} .ai_popup_wrap .tit_box .tit {font-size:2.81em; color:#fff; line-height:1.11em; font-weight:700; font-family:'Paperlogy'; text-align:center;} .ai_popup_wrap .tit_box .tit span {position:relative; left:-15px;} .ai_popup_wrap .tit_box .txt1 {background:#1abaff; font-size:0.875em; color:#fff; font-weight:700; text-align:center; line-height:32px; padding:0 10px; border-radius:16px; position:absolute; right:30px; top:55px;} .ai_popup_wrap .tit_box .txt1 span {position:relative; z-index:10;} .ai_popup_wrap .tit_box .txt1 svg {position:absolute; bottom:-10px; left:10px;} .ai_popup_wrap .tit_box .txt2 {float:right; width:295px; background:#fff; border-radius:20px; margin-top:20px; padding:20px 25px; position:relative;} .ai_popup_wrap .tit_box .txt2:before {content:''; display:block; width:0; height:0; border-right:14px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; position:absolute; right:100%; bottom:20px;} .ai_popup_wrap .tit_box .txt2:after {content:''; display:block; width:150px; height:162px; background:url(../images/ai_popup_icon.png) no-repeat center center; background-size:contain; position:absolute; right:100%; top:0; margin-right:-15px;} .ai_popup_wrap .tit_box .txt2 .t1 {min-height:5.72em; font-size:1em; color:#666; line-height:1.43em; font-weight:500;} .ai_popup_wrap .tit_box .txt2 .t2 {font-size:0.875em; color:#0680fa; font-weight:600; margin-top:10px;} .ai_popup_wrap .tit_box .txt2 .t2 a {color:#0680fa;} .ai_popup_wrap .tit_box .close_btn {font-size:20px; color:#fff; position:absolute; right:30px; top:15px;} .ai_popup_wrap .form_box {width:100%; background:#fff; border-radius:40px 40px 0 0; padding:30px; margin-top:-30px; position:relative; z-index:10;} .ai_popup_wrap .form_box ul li {margin-bottom:20px;} .ai_popup_wrap .form_box ul li:last-child {margin-bottom:0;} .ai_popup_wrap .form_box ul li > label {display:block; font-size:1.125em; font-weight:600; margin-bottom:10px;} .ai_popup_wrap .form_box ul li .form_txt {display:block; width:100%; height:51px; background:#fff; border:1px solid #ccc; border-radius:5px; padding:0 15px; font-size:1.125em; font-family:'Pretendard';} .ai_popup_wrap .form_box ul li .form_txt::placeholder {color:#a4a4a4;} .ai_popup_wrap .form_box ul li .form_txt::-webkit-input-placeholder {color:#a4a4a4;} .ai_popup_wrap .form_box ul li .form_txt:-ms-input-placeholder {color:#a4a4a4;} .ai_popup_wrap .form_box ul li .select_box {width:100%; position:relative;} .ai_popup_wrap .form_box ul li .select_box:after {content:'\f107'; font-size:1.125em; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:15px; top:50%; transform:translateY(-50%); pointer-events:none;} .ai_popup_wrap .form_box ul li .select_box select {display:block; width:100%; height:51px; background:#fff; border:1px solid #ccc; border-radius:5px; padding:0 15px; font-size:1.125em; color:#a4a4a4; font-family:'Pretendard'; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .ai_popup_wrap .form_box ul li .select_box select.on {color:#191919;} .ai_popup_wrap .form_box ul li .select_box select option {color:#191919;} .ai_popup_wrap .form_box ul li .radio_box {display:inline-block; position:relative; margin-right:20px;} .ai_popup_wrap .form_box ul li .radio_box input {display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:1; opacity:0;} .ai_popup_wrap .form_box ul li .radio_box label {display:flex; align-items:center; position:relative;} .ai_popup_wrap .form_box ul li .radio_box label:before {content:''; display:block; width:30px; height:30px; border:2px solid #ccc; border-radius:50%;} .ai_popup_wrap .form_box ul li .radio_box label p {font-size:1.125em; padding-left:10px;} .ai_popup_wrap .form_box ul li .radio_box input:checked + label:after {content:''; display:block; width:16px; height:16px; background:#0680fa; border-radius:50%; position:absolute; left:7px; top:50%; transform:translateY(-50%)} .ai_popup_wrap .form_box .submit_btn {display:block; width:100%; height:51px; background:#0680fa; border-radius:5px; font-size:1.125em; color:#fff; font-weight:600; font-family:'Pretendard'; margin-top:25px;} .ai_popup_wrap .result_box {display:flex; flex-wrap:wrap; width:100%; margin-top:25px;} .ai_popup_wrap .result_box .empty {display:flex; justify-content:center; align-items:center; width:100%; height:117px; background:#f8f8f8; border:1px dashed #ccc; border-radius:5px; font-size:1em; color:#a4a4a4; font-weight:500; text-align:center;} .ai_popup_wrap .result_box .tit {width:100%; font-size:1.5em; color:#0680fa; font-weight:700; margin-bottom:15px;} .ai_popup_wrap .result_box dl {width:100%;} /*.ai_popup_wrap .result_box dl:last-child {border-left:1px solid #ccc; padding-left:19px;}*/ .ai_popup_wrap .result_box dl dt {font-size:1.125em; font-weight:600; margin-bottom:10px;} .ai_popup_wrap .result_box dl dt span {color:#0680fa;} .ai_popup_wrap .result_box dl dd {font-size:1.125em; font-weight:600;} .ai_popup_wrap .result_box dl dd strong {display:inline-block; font-size:2em; color:#0680fa; font-weight:700; margin-right:5px; vertical-align:middle; position:relative; top:-2px;} @media screen and (max-width:1024px){ .ai_popup_wrap {max-height:calc(100vh - 60px); right:6%; bottom:30px;} .ai_popup_wrap .tit_box .tit span {left:0;} .ai_popup_wrap .tit_box .txt1 {right:40px; top:50px;} .ai_popup_wrap .tit_box .txt1 svg {transform:scale(0.8)} .ai_popup_wrap .tit_box .txt2:after {width:130px; height:140px; margin-right:0;} } @media screen and (max-width:767px){ .ai_popup_wrap {bottom:15px;} .ai_popup_wrap .tit_box .tit span {left:-23px;} .ai_popup_wrap .tit_box .txt1 {right:50%; top:45px; margin-right:-170px} .ai_popup_wrap .tit_box .txt2 {max-width:calc(100% - 100px); padding:15px; border-radius:15px;} .ai_popup_wrap .tit_box .txt2:after {width:130px; height:140px; margin-right:0;} }