/*메인을 정의한다*/ #indexPage{width:100%;height:100vh;background-color:black;} #indexPage .swiper-container{width:100%;height:100vh;} #indexPage .swiper-container .swiper-slide{width:100%;height:100vh;} .hd_pops_footer .hd_pops_close{position:relative;} .swiper-pagination{text-align:right;} .swiper-container-vertical>.swiper-pagination-bullets{right:110px;top:460px;transform:none;} #indexPage .swiper-pagination-bullet { position:relative; margin:0px; width: 100px; height: 50px; text-align: right; line-height: 50px; font-size: 16px; color: rgba(255,255,255,0.4); opacity: 1; background: transparent; } #indexPage .swiper-pagination-bullet-active { color: #fff; background:transparent; } #indexPage .swiper-pagination-bullet-active:after{display:block;content:"";position:absolute;top:25px;right:-110px;width:95px; height:1px;background-color:white;} #indexPage .swiper-wrapper .swiper-slide{position:relative;background:no-repeat center center; background-size:cover; } #indexPage .swiper-wrapper .swiper-slide:nth-child(1){background-image:url('/img/slide011_bg.jpg');} #indexPage .swiper-wrapper .swiper-slide:nth-child(2){background-image:url('/img/slide021_bg.jpg');} #indexPage .swiper-wrapper .swiper-slide:nth-child(3){background-image:url('/img/slide031_bg.jpg');} #indexPage .swiper-wrapper .swiper-slide:nth-child(4){background-image:url('/img/slide041_bg.jpg');} #indexPage .mouseScroll{position:absolute;width:50px;left:calc(50% - 25px);bottom:20px;text-align:center;} #indexPage .msText{margin-bottom:15px;} #indexPage .msWheel { animation-duration: 1s; animation-iteration-count: infinite; animation-name: bounce-1; animation-timing-function: linear; } @keyframes bounce-1 { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /*slide 1*/ .indexTop{padding-top:85px;margin-left:180px;width:calc(100% - 180px);font-family:'S-CoreDream'} .indexTop .indexTitle{position:relative;margin-bottom:27px;width:100%;} .indexTop .indexTitle .ititle{display:relative;width:375px;height:45px;font-size:26px;font-weight:600;color:#75858f;background-color: white;line-height:45px;text-align:center;} .indexTop .indexTitle .ititle:after{display:block;content:"";position:absolute;top:50%;right:0px;width:calc(100% - 375px);height:1px;background-color:#ffffff7f;} .indexTop .indexIntro{margin-bottom:25px;font-size:45px;line-height:70px;font-weight:300;color:white;} .indexTop .indexIntro .bold{font-weight:500;} .indexTop .indexIntro_small{font-size:24px;line-height:40px;} .indexCircle{margin-bottom:40px;display:flex;align-items:center;} .indexCircle li{display:flex;align-items:center;justify-content:center;width:130px;height:130px;margin-right:10px;border:1px solid rgba(255,255,255,0.4);border-radius:50%;} .indexCircle li > div{display:flex;align-items:center;justify-content:center;width:113px;height:113px;background-color:rgba(17, 19, 23, 0.8);border-radius:50%;color:white;font-size:20px;line-height:32px;text-align:center;font-weight:600;} .mainLawyer{position:absolute;bottom:0px;left:980px;top: 300px;} .mainLawyer .image{} .mainLawyer .nameCon{padding-right:20px;position:absolute;bottom:120px;left:-100px;text-align:right;border-right:3px solid white;color:white;} .mainLawyer .nameCon > div.lawyerName{margin-bottom:0px;text-align:right;font-size:18px;line-height:30px;font-weight:300} .mainLawyer .nameCon > div.name{font-size:29px;font-weight:600} /*슬라이더 02*/ .indexRBox{width:1000px;display:flex;justify-content:space-between;flex-wrap:wrap;} .indexRBox > li{position:relative;margin-bottom:40px;width:280px;height:280px;} .indexRBox > li a{display:block;position:absolute;top:0px;left:0px;text-align:center;width:100%;height:100%;overflow:hidden;color:white;} .indexRBox > li a:hover{} .indexRBox > li a > div{position:absolute;left:0px;width:100%;height:100%;transition: top .7s;} .indexRBox > li a > div > div{transition:height .7s, opacity 1.5s;} .indexRBox > li a > div.rboxView > div{height:280px;overflow:hidden;border:1px solid white;} .indexRBox > li a:hover > div.rboxView > div{height:0px;border-bottom:none;opacity:0;} .indexRBox > li a > div.rboxOver{top:280px;border-color:#1a334c} .indexRBox > li a:hover > div.rboxOver{top:0px;} .indexRBox .rbox{text-align:center;} .indexRBox .rbox .subject{margin-bottom:25px;font-size:25px;font-weight:500;letter-spacing:0.05em;} .indexRBox .rboxView .rbox .subject {padding-top:70px;} .indexRBox .rbox .basic{font-size:16px;text-align:center;line-height:28px;} .indexRBox .rboxOver .rbox{display:flex;align-items:center;position:absolute;width:100%;height:100%;overflow:hidden;top:0px;left:0px;background-color:rgba(26,51,76,0.5);padding:0px;} .indexRBox .rboxOver .rbox div{display:block;width:100%;} .indexRBox .rboxOver .rbox .subject{text-align:center;} .indexRBox .rboxOver .rbox .basic{text-align:center;} .indexRBox .rboxOver .rbox div.vline{margin:10px 0px 20px 0px;width:50%;height:30px;border-right:1px solid white;} .indexRBox .rboxOver .rbox div.link{text-align:center;font-size:14px;line-height:25px;text-align:center;} .indexRBox .rboxOver .rbox div.link span{display:inline-block;border-bottom:1px solid white;} /*슬라이드 03*/ #ms3cnt{position:absolute;bottom:90px;left:35%;} #ms3cnt .ms3Count{position:relative;width:670px;height:450px;background:url('/img/main_slider_icon.png') no-repeat center center;} #ms3cnt .ms3Count .item{position:absolute;color:white;} #ms3cnt .ms3Count .item .name{font-size:20px;font-weight:300;} #ms3cnt .ms3Count .item .counter{display:flex;align-items:flex-end;justify-content:flex-end;font-size:40px;height:55px;font-weight:600;} #ms3cnt .ms3Count .item .counter .unit{display:inline-block;font-size:20px;padding-bottom:7px;margin-left:5px;font-weight:300;} #ms3cnt .ms3Count .item01{top:0px;right:0px;border-right:3px solid white;padding-right:15px;} #ms3cnt .ms3Count .item02{bottom:0px;right:0px;border-right:3px solid white;padding-right:15px;} #ms3cnt .ms3Count .item03{top:50%;left:0px;border-left:3px solid white;padding-left:15px;} #ms3cnt .ms3Count .item03 .counter{justify-content:flex-start;} /*슬라이드 04*/ #mpMap{display:flex;width:1040px;} #mpMap > div{} /*#mpMap .mpmMap{width:560px;}*/ #mpMap .mpmMap{width:600px;} #bo_v_con p{max-width:100%;} #bo_v_con div{max-width:100%;} #mainPartner {position:relative;margin:15px 20px 0px 0px;padding:0px 0px 0px 0px;} #mp_map a{position:absolute;display:block;} #mp_map a > span > span {display:none;} #mp_map a > span > i {display:none;} #mp_map a.on {display:block;} #mp_map a.on > span > span {display:inline-block;} #mp_map a.on > span > i {display:block;} /* #mp_map a.area0{top:96px;left:97px;} #mp_map a.area1{top:350px;left:330px;} #mp_map a.area2{top:297px;left:236px;} #mp_map a.area3{top:264px;left:127px;} #mp_map a.area4{top:198px;left:96px;} #mp_map a.area5{top:144px;left:64px;} #mp_map a.area6{top:143px;left:163px;} #mp_map a.area7{top:373px;left:98px;} #mp_map a.area8{top:56px;left:142px;} #mp_map a.area9{top:290px;left:338px;} #mp_map a.area10{top:60px;left:89px;} */ #mmapSubject{margin-top:20px;} #mmapSubject a{display:flex;align-items:center;justify-content:center;position:relative;width:100%;padding:15px 0px 15px 0px;letter-spacing:-0.1em;color:white;background-color:rgba(62,134,199,0.5);} #mmapSubject a .text{font-size:13px;line-height:20px;margin-right:5px;} #mmapSubject a .linker{font-size:16px;line-height:20px;font-weight:bold;margin-right:4px;} #mmapSubject a img{height:18px;} #mmapArea{position:absolute;top:-5px;right:5px;padding:0px 10px;z-index:10;} /*#mmapArea ul{width:80px;}*/ #mmapArea ul{width:100px;} #mmapArea li{width:100%;margin-bottom:10px;} #mmapArea li a{display:block;width:100%;line-height:34px;border:1px solid rgba(255,255,255,0.2);color:white;text-align:center;text-decoration:none;font-size: 14px;} #mmapArea li a.on{border:1px solid white;color:white; font-weight:500;} #mpmCont{position:relative;margin-top:20px;width:400px;height:525px;} #mpmCont .mpmItem{position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#2b4055;padding:15px 10px;overflow:hidden;} #mpmCont .mpmItem{z-index:1;} #mpmCont .mpmItem.on{z-index:10} #mpmCont .mapCont{position:relative;width:380px;height:225px;background-color:white;}/*map*/ #mpmCont .mapCont > div{width:100%;height:310px;} #mpmCont .mapInfo{padding:110px 15px 0px 15px ;font-family:'S-CoreDream';font-size:15px;font-weight:300;color:white;} #mpmCont .mapInfo .stitle{margin-bottom:10px;font-weight:500;} #mpmCont .mapInfo .mapAddr{margin-bottom:20px;} #mpmCont .mapInfo .mapRoad{margin-bottom:20px;} #mpmCont .mapInfo .mapLink{} #mpmCont .mapInfo .mapLink a{display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;color:white;background-color:#162432;font-size:18px;font-weight:500;}