/*****************서브상단 이미지와 타이틀/레이아웃*******************/ /* 상단 비주얼 */ #subVisualCon{position:relative; width:100%; overflow:hidden; height:400px; background:#000; } .svc_business { height:100vh !important;} #subVisualCon .prd-visual-container{position:absolute; top:0; opacity:1.0; left:0; bottom:0; right:0; important;-ms-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 4000ms ease-in-out ; -moz-transition:transform 4000ms ease-in-out ;-o-transition:transform 4000ms ease-in-out ; -ms-transition:transform 4000ms ease-in-out; transition:transform 4000ms ease-in-out;} #subVisualCon .prd-visual-con{position:relative; } #subVisualCon .sub_img1{background:url(../../img/sub_img1.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img2{background:url(../../img/sub_img2.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img3{background:url(../../img/sub_img3.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img4{background:url(../../img/sub_img4.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img5{background:url(../../img/sub_img5.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img6{background:url(../../img/sub_img6.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img7{background:url(../../img/sub_img7.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img8{background:url(../../img/sub_img8.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img9{background:url(../../img/sub_img9.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img10{background:url(../../img/sub_img10.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img11{background:url(../../img/sub_img11.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img12{background:url(../../img/sub_img12.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img13{background:url(../../img/sub_img13.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img14{background:url(../../img/sub_img14.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img15{background:url(../../img/sub_img15.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img16{background:url(../../img/sub_img16.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img17{background:url(../../img/sub_img17.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img18{background:url(../../img/sub_img18.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img19{background:url(../../img/sub_img19.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img20{background:url(../../img/sub_img20.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img21{background:url(../../img/sub_img21.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img22{background:url(../../img/sub_img22.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img23{background:url(../../img/sub_img23.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img24{background:url(../../img/sub_img24.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img25{background:url(../../img/sub_img25.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img26{background:url(../../img/sub_img26.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img27{background:url(../../img/sub_img27.jpg) no-repeat center top; background-size:cover;} #subVisualCon .prd-visual-inner{position:relative; text-align:center; } #subVisualCon .prd-visual-tit{width:80%; margin:0 auto; text-align:center; font-size:45px; color:#fff; letter-spacing:-0.65px; font-weight:300; margin-bottom:5px; font-family:gmarketSansLight; padding-top:170px; } #subVisualCon .prd-visual-tit strong{position:relative; top:1px; display:inline-block; font-family:gmarketSansBold;} #subVisualCon .prd-visual-tit b{font-weight:500; color:#fff;font-family:gmarketSansBold;} #subVisualCon .prd-visual-txt {font-size:15px; line-height:120%; opacity:0.6; color:#fff;} #middleArea{padding:50px 0 0;} /* 상단 비주얼 :: Active */ #subVisualCon.active .prd-visual-container{-ms-transform: scale(1.0,1.0) ; -o-transform: scale(1.0,1.0) ; -moz-transform: scale(1.0,1.0) ; -webkit-transform: scale(1.0,1.0) ; transform: scale(1.0,1.0) ;} /* 상단 타이틀 */ #contentInfoCon{ position:relative; border-bottom:1px solid #d1d1d1; margin-bottom:55px;} #contentInfoCon .content-tit{color:#272727; font-size:40px; font-weight:500; text-align:center;} #contentInfoCon .content-tit span{position:relative; display:inline-block; padding:0 0 45px 0; } #contentInfoCon .content-tit span:after{display:block; width:145px; height:1px; position:absolute; bottom:-1px; left:50%; margin-left:-72px; content:""; background-color:#000;} #container{padding-top:0px} /* 사업분야 상단 추가 부분*/ .busi_top {position:absolute; left:2.2%; bottom:4%;} .busi_top h3 {color:#fff; font-size:50px;} .busi_top p {color:#fff; font-size:17px; padding-top:15px;} .busi_top .num strong {padding-top:30px; color:#fff; font-size:14px; position:relative; display:block; padding-right:120px;} .busi_top .num strong b {color:#fff; font-size:42px;} .busi_top .num span {color:#fff; font-size:13px; display:block;} .busi_top .num strong .btn_list2 {position:absolute; right:0; top:19px; bottom:auto; left:auto; width:auto; text-align:right; margin:0;} .busi_top .num strong .btn_list2 ul { margin:auto;} .busi_top .num strong .btn_list2 ul li span a{min-width:90px; padding:12px 5px;} .busi_top .precautions {color:#fff; font-size:16px; opacity:0.5; padding-top:30px;} .busi_top .precautions img {width:19px; padding-left:3px; vertical-align:middle;} .busi_icon {position:absolute; right:2.2%; bottom:5%;} .busi_icon ul li {color:#fff; font-size:17px; text-align:center; font-weight:600; padding-top:55px; display:inline-block; float:left; margin:0 22px;} .busi_icon ul li:nth-child(1) {background:url('../../img/busi_icon1.png') no-repeat center 0;} .busi_icon ul li:nth-child(2) {background:url('../../img/busi_icon2.png') no-repeat center 0;} .busi_icon ul li:nth-child(3) {background:url('../../img/busi_icon3.png') no-repeat center 0;} @media all and ( max-width:1279px ){ .busi_top h3 {font-size:40px;} .busi_top p {font-size:15px; padding-top:10px;} .busi_top .num strong {padding-top:20px; font-size:13px; padding-right:120px;} .busi_top .num strong b {font-size:35px;} .busi_top .num span {font-size:12px;} .busi_top .num strong .btn_list2 {top:19px;} .busi_top .precautions {font-size:15px; opacity:0.5; padding-top:30px;} .busi_icon ul li {font-size:15px;margin:0 10px;} } @media all and ( max-width:1024px ){ .svc_business { height:100vh !important; padding-bottom:90px; } .busi_top {position:absolute; left:2.2%; bottom:115px;} .busi_top h3 {font-size:30px;} .busi_top p {font-size:13px;} .busi_top .num strong {padding-top:10px; font-size:12px; padding-right:95px;} .busi_top .num strong b {font-size:27px;} .busi_top .num span {font-size:11px;} .busi_top .num strong .btn_list2 {top:3px;} .busi_top .num strong .btn_list2 ul li span a{padding:5px; min-width:70px;} .busi_top .precautions {font-size:13px; padding-top:10px;} .busi_top .precautions img {width:15px;} .busi_icon {height:90px; background:#353535; bottom:0; right:0; width:100%;} .busi_icon ul li {font-size:12px; padding-top:37px; width:31.33%; margin:0 1%; word-break:keep-all;} .busi_icon ul li:nth-child(1), .busi_icon ul li:nth-child(2), .busi_icon ul li:nth-child(3) {background-size:21px; background-position:center 10px;} } /* 개인정보취급방침 레이어팝업 */ #popupLayer2 {position:fixed; left:0; top:0; width:100%; height:100%; z-index:1000000000000000; background:rgba(0,0,0,0.7); text-align:center;} .popbox {position:fixed; top:50%; right:50%; margin-top:-200px; margin-right:-200px; width:400px; height:400px; background:#eee; text-align:center;} #popupLayer2 h3 {height:45px; background:#000; color:#fff; font-size:20px; padding-top:15px;text-align:center; } #popupLayer2 textarea {font-family:'NotoSansKR'; width:90%; height:230px; margin:20px;} #popupLayer2 a img {width:170px;} #popupLayer2 .Btn2 {position:relative; margin-top:0;} #popupLayer2 .Btn2 input[type=submit] { width:120px; line-height:35px; height:35px; font-family:"GmarketSansMedium"; background:#000; font-size:15px; border:none; text-align:center; color:#fff; box-sizing:border-box; cursor:pointer;} @media all and ( max-width:767px ){ .popbox {margin-right:-45%; width:90%; } } /*****************서브 하위메뉴*******************/ #SubMenu{position:relative; height:60px; width:100%; position:absolute; z-index:300; left:0px; top:340px; border-top:1px solid rgba(255,255,255,0.3); background:rgba(0,0,0,0.3);} #SubMenu .top-menu-inner{width:100%; height:60px; } #SubMenu .location-to-home-btn{float:left; width:60px; height:59px; left:0px; top:0px; background:#000; margin:0; text-align:center; border-right:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.2);} #SubMenu .location-to-home-btn i{color:#fff; font-size:28px; line-height:64px;} #SubMenu .menu-location{position:relative; float:left; min-width:262px; border-right:1px solid rgba(255,255,255,0.2);} #SubMenu .menu-location > .cur-location{position:relative; display:block; height:64px; padding:0 56px 0 25px; } #SubMenu .menu-location > .cur-location span{line-height:64px; color:#fff; font-family: 'GmarketSansMedium'; font-size:19px; display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} #SubMenu .menu-location > .cur-location .arrow{position:absolute; top:50%; right:20px; margin-top:-4px; } #SubMenu .menu-location > .cur-location.open .arrow{transform:rotate(-180deg);} #SubMenu .menu-location.last-menu-location > .cur-location.open .arrow{transform:rotate(0deg);} #SubMenu .menu-location.location1 > .cur-location{opacity:0.8;filter:Alpha(opacity=80);} #SubMenu .menu-location.location1 > .cur-location.open{opacity:1.0;filter:Alpha(opacity=100);} #SubMenu .menu-location.last-menu-location > .cur-location .arrow{display:none;} #SubMenu .menu-location .location-menu-con{display:none; position:absolute; top:60px; left:-1px; width:calc(100% - 1px); border:1px solid #b4bbbb; border-top:0; background-color:#fff; z-index:11; } #SubMenu .menu-location .location-menu-con li{border-top:1px solid #e5e5e5;} #SubMenu .menu-location .location-menu-con li:first-child{border-top:0;} #SubMenu .menu-location .location-menu-con li a{ display:block; height:60px; line-height:60px;padding:0 25px; font-size:15px; font-family: 'GmarketSansMedium'; color:#404041; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} #SubMenu .menu-location .location-menu-con li.on{position:relative;} #SubMenu .menu-location .location-menu-con li.on a, #SubMenu .menu-location .location-menu-con li a:hover{background-color:#f3f3f3;} /* 상단 메뉴 :: fixed */ #SubMenu.fixed .top-menu-inner{position:fixed; top:0; left:0; z-index:99;} @media all and ( max-width:1240px ){ /* 상단 비주얼 */ #subVisualCon .prd-visual-tit{width:100%;} /* 하위 메뉴 */ #SubMenu .area-box{padding-left:77px;} #SubMenu .location-to-home-btn{position:absolute; top:0; left:15px;} #SubMenu .menu-location{width:49.7%; min-width:auto;} } @media all and ( max-width:800px ){ /* 상단 비주얼 */ #subVisualCon{height:240px;} #subVisualCon .prd-visual-tit{font-size:23px; padding-top:100px; } #subVisualCon .prd-visual-sub-tit{font-size:12px; line-height:20px; margin-bottom:10px;} #subVisualCon .prd-visual-txt{font-size:12px; line-height:20px; padding-bottom:24px;} /* 타이틀 */ #middleArea{padding-top:30px;} #contentInfoCon{margin-bottom:30px;} #contentInfoCon .content-tit{font-size:20px; letter-spacing:-2.5px;} #contentInfoCon .content-tit span{padding-bottom:25px;} #contentInfoCon .content-tit span:after{width:200px; margin-left:-100px;} /* 하위 메뉴 */ #SubMenu{ top:200px;} #SubMenu, #SubMenu .top-menu-inner{height:40px;} #SubMenu .area-box{padding:0;} #SubMenu .location-to-home-btn{display:none;} #SubMenu .menu-location{width:calc(50% - 1px);} #SubMenu.menu3 .menu-location{width:calc(33.3% - 1px)} #SubMenu .menu-location > .cur-location{height:40px; padding:0 34px 0 15px;} #SubMenu .menu-location > .cur-location span{font-size:13px; line-height:40px; vertical-align:middle; letter-spacing:-1px; word-break:keep-all;} #SubMenu .menu-location > .cur-location .arrow{right:10px; max-width:14px;} #SubMenu .menu-location .location-menu-con{top:40px;} #SubMenu .menu-location .location-menu-con li{} #SubMenu .menu-location .location-menu-con li a{width:calc(100% - 20px); height:auto; padding:10px; font-size:11px; line-height:19px; vertical-align:middle; letter-spacing:-1px; word-break:keep-all;} } @media all and ( max-width:480px ){ #subVisualCon .prd-visual-inner{ padding-left:0px;} #subVisualCon .prd-visual-tit{ margin-bottom:8px;} }