/** 리뉴얼 헤더 시작 **/ #headerNew {z-index: 9999} #headerNew .pc_haeder {} #headerNew .pc_haeder .topArea {padding: 4rem 0;} #headerNew .pc_haeder .topArea .logo {} #headerNew .pc_haeder .topArea .right {right: 4%; z-index: 99999;} #headerNew .pc_haeder .topArea .spot { position: relative;} #headerNew .pc_haeder .topArea .spot .tit {padding: 1.2rem 2.2rem; background: #626C81; border-radius: 2.8rem; gap: 0.8rem; cursor: pointer;} #headerNew .pc_haeder .topArea .spot .tit img {transition: 0.4s;} #headerNew .pc_haeder .topArea .spot .tit.on img {transform: rotate(180deg);} #headerNew .pc_haeder .topArea .spot .spotLst {position: absolute; width: 100%; padding-top: 1rem; display: none;} #headerNew .pc_haeder .topArea .spot .spotLst ul {padding: 3rem 0; background: #626C81;} #headerNew .pc_haeder .topArea .spot .spotLst li + li {margin-top: 1.5rem;} #headerNew .pc_haeder .topArea .spot .spotLst li a {display: block; text-align: center;} #headerNew .pc_haeder .topArea .spot .spotLst li a:hover {font-weight: 500} #headerNew .pc_haeder .topArea .lang {gap: 0.8rem; margin-left: 3.6rem} #headerNew .pc_haeder .gnbArea {position: relative;} #headerNew .pc_haeder .gnbArea::before {content: ''; display: none; position: absolute; width: 100%; height: 38.3rem; top: 100%; background: rgba(0,0,0,0.9);} #headerNew .pc_haeder .gnbArea.on::before {display: block; z-index: 999} #headerNew .pc_haeder .gnbArea .gnb {border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF} #headerNew .pc_haeder .gnbArea .gnb .gnbLst {padding-right: 13.5rem; position: relative;} #headerNew .pc_haeder .gnbArea .gnb .gnbLst:last-child {padding: 0;} #headerNew .pc_haeder .gnbArea .gnb .gnbLst > a {display: inline-block; padding: 1.3rem 0;} #headerNew .pc_haeder .gnbArea .gnb .gnbLst > a span {color: #fff; font-size: 2rem;} #headerNew .pc_haeder .gnbArea .gnb .gnbLst > a span:hover {color: #37FFF4} #headerNew .pc_haeder .gnbArea .lnb {padding-top: 4.4rem; display: none; width: 100%; min-width: 10rem; z-index: 999; min-height: 32rem;} #headerNew .pc_haeder .gnbArea .lnb .lnbLst {} #headerNew .pc_haeder .gnbArea .lnb .lnbLst + .lnbLst {margin-top: 1.3rem;} #headerNew .pc_haeder .gnbArea .lnb .lnbLst a {} #headerNew .pc_haeder .gnbArea .lnb .lnbLst a:hover {font-weight: 500;} #headerNew .pc_haeder .gnbArea .gnb.typeSub {border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9;} #headerNew .pc_haeder .gnbArea .gnb.typeSub .gnbLst > a span {color: #000} #headerNew .pc_haeder .gnbArea .gnb.typeSub .gnbLst > a span:hover {color: #000} @media all and (max-width: 880px){ #headerNew .mo_header {} #headerNew .mo_header .mo_head {padding: 3.2rem 0; display: flex; justify-content: center; border-bottom: 1px solid #fff; z-index: 99999} #headerNew .mo_header .mo_head .logo {width: 48%;} #headerNew .mo_header .mo_head .spot { position: relative; margin: 0 3rem 0 2rem;} #headerNew .mo_header .mo_head .spot .tit {padding: 1.2rem 2.2rem; background: #626C81; border-radius: 2.8rem; gap: 0.8rem; cursor: pointer;} #headerNew .mo_header .mo_head .spot .tit img {transition: 0.4s; width: 2rem;} #headerNew .mo_header .mo_head .spot .tit.on img {transform: rotate(180deg);} #headerNew .mo_header .mo_head .spot .spotLst {position: absolute; width: 100%; padding-top: 1rem; display: none;} #headerNew .mo_header .mo_head .spot .spotLst ul {padding: 2rem 0; background: #626C81;} #headerNew .mo_header .mo_head .spot .spotLst li + li {margin-top: 1rem;} #headerNew .mo_header .mo_head .spot .spotLst li a {display: block; text-align: center;} #headerNew .mo_header .mo_head .menu_btn {width: 4.8%; right: 6.8%} #headerNew .mo_header .mo_menu_wrap {top: 100%; background: rgba(0,0,0,0.9); display: none; z-index: 9999} #headerNew .mo_header .menu_gnb {border-top: 1px solid #fff;} #headerNew .mo_header .menu_gnb_lst {border-bottom: 1px solid #fff} #headerNew .mo_header .menu_gnb_lst .gnb_name {padding: 3.3rem 6.6rem; display: block;} #headerNew .mo_header .menu_gnb_lst .gnb_name.on {color: #39FEF1;} #headerNew .mo_header .menu_lnb {padding: 4.5rem 6.1rem; background: rgba(76,78,83,0.38); display: none;} #headerNew .mo_header .menu_lnb .menu_lnb_lst {padding-left: 3rem; position: relative;} #headerNew .mo_header .menu_lnb .menu_lnb_lst::after {content: ''; display: block; position: absolute; width: 1.1rem; height: 1.8rem; top: 50%; transform: translateY(-50%); left: 0; background: url('../img/mo_lnb_arr.svg') no-repeat center/contain;} #headerNew .mo_header .menu_lnb .menu_lnb_lst + .menu_lnb_lst {margin-top: 3.4rem;} #headerNew .mo_header .menu_lnb .menu_lnb_lst a {} #headerNew .mo_header .mo_lang {padding: 4.4rem 6.6rem; gap: 0.8rem;} #headerNew .mo_header .mo_lang img {max-width: 5.4rem;} } /** 리뉴얼 푸터 시작 **/ #footerNew {margin-bottom: 120px} #footerNew .ftMenu {margin: 2.4rem 0 0 0; gap: 1.4rem} #footerNew .ftMenu li {cursor: pointer;} #footerNew .ftMenu li span {} #footerNew .ftCont {padding: 7.4rem 0 10rem;} #footerNew .ftCont .ftLogo {} #footerNew .ftCont .copy {margin: 0.6rem 0 3.9rem;} #footerNew .ftCont .ftInfo {} #footerNew .ftCont .ftInfo .infoLst:nth-child(1) {margin-right: 7rem} #footerNew .ftCont .ftInfo .infoLst:nth-child(2) {margin-right: 1.3rem} #footerNew .ftCont .ftInfo .infoLst:nth-child(3) {} #footerNew .ftCont .ftInfo .infoBox {line-height: 2.4rem;} #footerNew .ftCont .ftInfo .infoBox + .infoBox {margin-top: 2.5rem;} @media all and (max-width: 880px){ #footerNew .ftMenu {} #footerNew .ftCont {padding: 6rem 0 11rem;} #footerNew .ftCont .ftLogo {display: inline-block; max-width: 18%;} #footerNew .ftCont .copy {} #footerNew .ftCont .ftInfo {flex-direction: column;} #footerNew .ftCont .ftInfo .infoLst {margin: 0 !important;} #footerNew .ftCont .ftInfo .infoLst + .infoLst {padding-top: 1rem; margin-top: 1rem;} #footerNew .ftCont .ftInfo .infoBox + .infoBox {margin-top: 1rem;} } #footerNew2 {background: #313131; padding: 7.5rem 0 10rem; display: flex; flex-direction: column; align-items: center;} #footerNew2 .title {font-size: 5.1rem; font-weight: 600; margin-bottom: 2rem;} #footerNew2 .boxArea {gap: 2rem; width: 100%; max-width: 101rem;} #footerNew2 .box {background: #3E3E3E; border-radius: 1.4rem; width: 100%; display: flex; align-items: center; padding-left: 4.2rem; height: 19rem;} #footerNew2 .box .tit {font-size: 2.4rem; font-weight: 600; margin-right: 4rem;} #footerNew2 .box .cont {} #footerNew2 .box .cont .loca {font-size: 2.1rem; display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.7rem;} #footerNew2 .box .cont .loca img{} #footerNew2 .box .cont .lst {gap: 1rem;} #footerNew2 .box .cont .lst li {} #footerNew2 .box .cont .lst li a {background: #616161; border-radius: 1.2rem; width: 9.5rem; height: 9.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;} #footerNew2 .box .cont .lst li a:hover {background: #5b5959} #footerNew2 .box .cont .lst li a img {} #footerNew2 .box .time {padding-left: 5rem; position: relative;} #footerNew2 .box .time::before {content: ''; display: block; position: absolute; width: 1px; height: 2.5rem; background: #D9D9D9; left: 0; top: 50%; transform: translateY(-50%);} #footerNew2 .box .time li {font-size: 2.1rem;} #footerNew2 .box .time li + li {margin-top: 1.1rem;} #footerNew2 .box .time li span {font-weight: 600; display: inline-block; min-width: 8.5rem;} #footerNew2 .ftLink {gap: 6rem; margin: 4rem 0 2.5rem;} #footerNew2 .ftLink li {font-size: 2.1rem; color: #fff; cursor: pointer;} #footerNew2 .ftInfo {} #footerNew2 .ftInfo li {font-size: 2.1rem; color: #9B9B9B; line-height: 1;} #footerNew2 .ftInfo li + li {padding-left: 2.2rem; margin-left: 2.2rem; border-left: 1px solid #D9D9D9;} #footerNew2 .copy {font-size: 2.1rem; color: #9B9B9B; margin-top: 0.8rem;} @media all and (max-width: 880px){ #footerNew2 {padding-bottom: 20rem;} #footerNew2 .title {font-size: 5rem;margin-bottom: 1.2rem;} #footerNew2 .boxArea {flex-direction: column; max-width: 85.64%; gap: 1rem;} #footerNew2 .box {height: 22rem; justify-content: center; padding: 0;} #footerNew2 .box .tit {font-size: 3rem; margin-right: 6rem;} #footerNew2 .box .cont {} #footerNew2 .box .cont .loca {} #footerNew2 .box .cont .loca img {width: 2rem;} #footerNew2 .box .cont .lst{} #footerNew2 .box .cont .lst li {} #footerNew2 .box .cont .lst li a {width: 10rem; height: 10rem; font-size: 2rem;} #footerNew2 .box .cont .lst li a img {width: 2.4rem;} #footerNew2 .box .time {padding-right: 3rem;} #footerNew2 .box .time li {font-size: 2.4rem;} #footerNew2 .box .time li span {} #footerNew2 .ftLink {flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 82%; margin: 3rem 0 4.5rem;} #footerNew2 .ftLink li {font-size: 2.6rem;} #footerNew2 .ftInfo {flex-direction: column; gap: 1rem;} #footerNew2 .ftInfo li {text-align: center;} #footerNew2 .ftInfo li + li {margin: 0; padding: 0; border: 0;} #footerNew2 .copy {} } #dbBar {background: rgba(31,35,44,0.5); overflow: visible; z-index: 999} #dbBar .updownBtn {background: rgba(31,35,44,0.5); color: #fff; position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; font-size: 1.8rem; padding: 1rem 2rem 0.4rem; border-radius: 2rem 2rem 0 0; font-weight: 600; cursor: pointer;} #dbBar .inner {display: inline-block; left: 50%; transform: translateX(-50%);} #dbBar .inner::before {content: ''; display: block; position: absolute; width: 8rem; height: 12.5rem; background: url('../img/character.png') no-repeat center bottom / contain; bottom: 0; left: 102%} #dbBar .cont {gap: 1rem; padding: 2rem 0;} #dbBar .leftArea {display: flex; align-items: flex-end; gap: 0.8rem;} #dbBar .leftArea .inpArea {gap: 1rem; font-size: 1.6rem;} #dbBar .leftArea .inpArea input {width: 20rem; background: #fff; height: 4.8rem; padding: 0 1.5rem; border: 1px solid #707070; font-size: inherit; color: #2C2C2C;} #dbBar .leftArea .inpArea input::placeholder {color: #2C2C2C} #dbBar .leftArea .inpArea input:focus {outline: 0;} #dbBar .leftArea .inpArea select {width: 20rem; background: #fff; height: 4.8rem; padding: 0 1.5rem; border: 1px solid #707070; font-size: inherit; color: #2C2C2C;} #dbBar .leftArea .chkArea {gap: 0.9rem; font-size: 1.6rem;} #dbBar .leftArea .chkArea input {width: 2.1rem; height: 2.1rem; border: 1px solid #707070; margin: 0} #dbBar .submitBtn {width: 18rem; height: auto; border: 0; background: transparent; color: #0F1015; padding: 0} #dbBar .submitBtn span {display: none;} #dbBar.down {bottom: auto; top: 100%;} #dbBar.down .inner::before {display: none} @media all and (max-width: 880px){ #dbBar {bottom: 0} #dbBar .updownBtn {font-size: 2rem;} #dbBar .inner {padding-left: 0; left: 40%; transform: translateX(-50%);} #dbBar .cont {padding: 1.4rem 0;} #dbBar .inner::before {width: 11.6rem; height: 17.5rem;} #dbBar .leftArea {align-items: flex-start; flex-direction: column;} #dbBar .leftArea .inpArea {gap: 0.2rem} #dbBar .leftArea .inpArea input {width: 15rem} #dbBar .leftArea .inpArea select {width: 15rem; line-height: 1;} #dbBar .leftArea .chkArea {gap: 0.6rem; padding-top: 0.8rem; font-size: 1.6rem;} #dbBar .leftArea .chkArea input {width: 2rem; height: 2rem;} #dbBar .submitBtn {height: auto; position: absolute; width: 15rem; bottom: 1rem; right: 0rem;} #dbBar .submitBtn span {display: block} } #float {border-radius: 100px; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.16); z-index: 9999; right: 1%} #float ul {padding: 6rem 4rem;} #float ul li {} #float ul li + li {padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px solid #707070} #float ul li a {gap: 0.7rem;} #float ul li img {max-width: 5rem;} @media all and (max-width: 880px){ #float {width: 100%; bottom: 0; top: auto; transform: none; border-radius: 0; right: 0} #float ul {display: flex; padding: 1.3rem 0;} #float ul li {flex: 1;} #float ul li + li {padding: 0; margin: 0; border: 0; border-left: 1px solid #C9CDD2} #float ul li a {font-size: 1.1rem} #float ul li img {max-width: 2.6rem;} } #newFloat {position: fixed; display: block; top: 50%; transform: translateY(-50%); right: 1%; z-index: 9999;} #newFloat li {list-style: none; max-width: 8rem; max-height: 8rem; cursor: pointer;} #newFloat li > div, #newFloat li > a {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 8rem; height: 8rem;} #newFloat li:first-child {border-radius: 10px 10px 0 0; background: #36FEF3;} #newFloat li:nth-child(2) {border: 1px solid #E9E9E9; background: #FFF;} #newFloat li:nth-child(3) {background: #FFE700;} #newFloat li:nth-child(4) {border-radius: 0 0 10px 10px; background: #03C75A;} #newFloat li span {color: #000; font-family: "Noto Sans KR"; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.7px;} #newFloat li:nth-child(4) span {color: #fff !important;} @media all and (max-width: 880px){ /* #newFloat {top: 70%; right: 2%;} #newFloat li {max-width: 12rem;} */ } #commPop {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; display: none} #commPop .commPopBg {height: 100%; background: rgba(0,0,0,0.4);} #commPop .commPopBox {position: absolute; max-width: 90.4rem; top: 50%; left: 50%; transform: translate(-50%,-50%);} #commPop .commPop_pc_box {} #commPop .commPop_pc_box .bgImg {} #commPop .commPop_pc_box .title {top: 5rem;} #commPop .commPop_pc_box .cont {justify-content: center; gap: 1.2rem; top: 32%; position: absolute; width: 100%;} #commPop .commPop_pc_box .cont .btn01 {} #commPop .commPop_pc_box .cont .btn02 {} #commPop .commPop_pc_box .cont .btn03 {} #commPop .commPop_pc_box .cont .btn03 .bgBox {} #commPop .commPop_pc_box .cont .btn03 .lst {display: flex; flex-direction: column; gap: 0.8rem;} #commPop .commPop_pc_box .cont .btn03 .lst li {width: 5.5rem;} #commPop .commPop_pc_box .cont .btn04 {} #commPop .commPop_pc_box .cont .btn04 .bgBox {} #commPop .commPop_pc_box .cont .btn04 .subTit {top: 1.4rem} #commPop .commPop_pc_box .cont .btn04 .lst {width: 90%; gap: 0.9rem 0.8rem; top: 57%;} #commPop .commPop_pc_box .cont .btn04 .lst li {width: calc((100% - 0.8rem) / 2);} #commPop .commPop_pc_box .cancelBtn {width: 5rem; position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); cursor: pointer;} #commPop .commPop_mo_box {width: 100%; max-width: 88.7%;} #commPop .commPop_mo_box .bgImg {} #commPop .commPop_mo_box .title {width: 80%; top: 7%;} #commPop .commPop_mo_box .cont {position: absolute; width: 100%; max-width: 85.5%; left: 50%; transform: translateX(-50%); top: 18%;} #commPop .commPop_mo_box .cont .box01 {margin-bottom: 1rem;} #commPop .commPop_mo_box .cont .box01 .box {} #commPop .commPop_mo_box .cont .box01 .txt {top: 15%; width: 87%; left: 50%; transform: translateX(-50%);} #commPop .commPop_mo_box .cont .box01 .btn {bottom: 10%; width: 93.7%; left: 50%; transform: translateX(-50%);} #commPop .commPop_mo_box .cont .box02 {margin-bottom: 3.2rem;} #commPop .commPop_mo_box .cont .box02 .box {} #commPop .commPop_mo_box .cont .box02 .txt {width: 39%; top: 50%; transform: translateY(-50%); left: 6%;} #commPop .commPop_mo_box .cont .box02 .btnArea {width: 100%; display: flex; justify-content: flex-end; right: 6%; top: 50%; transform: translateY(-50%); gap: 1rem;} #commPop .commPop_mo_box .cont .box02 .btnArea .btn {width: 13.4%; display: inline-block;} #commPop .commPop_mo_box .cont .subt01 {width: 45%; margin-bottom: 1.5rem;} #commPop .commPop_mo_box .cont .box03 {margin-bottom: 3rem;} #commPop .commPop_mo_box .cont .box03 .box {} #commPop .commPop_mo_box .cont .box03 .txt {width: 23%; top: 50%; transform: translateY(-50%); left: 6%;} #commPop .commPop_mo_box .cont .box03 .btnArea {width: 100%; display: flex; justify-content: flex-end; right: 6%; top: 50%; transform: translateY(-50%); gap: 1rem;} #commPop .commPop_mo_box .cont .box03 .btnArea .btn {width: 13.4%; display: inline-block;} #commPop .commPop_mo_box .cont .subt02 {width: 52%; margin-bottom: 1.6rem;} #commPop .commPop_mo_box .cont .box04 {} #commPop .commPop_mo_box .cont .box04 .box {height: 25vh; background: #fff; border-radius: 1.6rem;} #commPop .commPop_mo_box .cont .box04 .box img {display: none;} #commPop .commPop_mo_box .cont .box04 .lst {width: 89.2%; gap: 1rem; top: 50%; left: 50%; transform: translate(-50%, -50%);} #commPop .commPop_mo_box .cont .box04 .lst li {width: calc((100% - 1rem) / 2);} #commPop .commPop_mo_box .cont .box04 .lst li a {} #commPop .commPop_mo_box .cancelBtn {width: 13%; position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); cursor: pointer;} /** 리뉴얼 메인 시작 **/ #mainNew {} #quickYoutube {position: absolute; left: 1%; top: 40%; z-index: 11;} #m1 {height: 100vh; overflow: hidden;} #m1 > .img {height: 100%} #m1 > .img img {height: 100%; object-fit: cover} #m1 .m1_swiper {height: 100%;} #m1 .m1_swiper .imgSlide {height: 100%;} #m1 .m1_swiper .imgSlide div {height: 100%;} #m1 .m1_swiper .imgSlide img {height: 100%; object-fit: cover;} #m1 .docSlide {} #m1 .docSlide .doctor {height: 100%} #m1 .docSlide .inner {max-width: 103rem; padding: 22.8rem 0 0; height: 100%} #m1 .docSlide .imgArea {position: absolute; bottom: 0; left: -14%;} #m1 .docSlide .imgArea img {} #m1 .docSlide .imgArea .txt {position: absolute; top: 37%; font-size: 1.7rem; left: 10%;} #m1 .docSlide .contArea {padding-left: 49.8rem} #m1 .docSlide .contArea .tit {padding-bottom: 2rem; line-height: 6rem} #m1 .docSlide .contArea .tit b {font-weight: bold;} #m1 .docSlide .contArea .video {border-radius: 1.9rem; overflow: hidden;} #m1 .docSlide .contArea .lst {margin-top: 3rem; gap: 0.7rem;} #m1 .docSlide .contArea .lst li {width: 20rem; border-radius: 5rem; border: 2px solid #fff;} #m1 .docSlide .contArea .lst li a {display: block; font-size: 2rem; color: #fff; font-weight: 600; padding: 1.1rem 0; text-align: center;} #m1 .docSlide.gangnam {background: url('../img/doc_gangnam_bg.jpg') center/cover} #m1 .docSlide.yeongdeungpo {background: url('../img/doc_yeongdeung_bg.jpg') center/cover} #m1 .docSlide.yongin {background: url('../img/doc_yongin_bg.jpg') center/cover} #m1 .docSlide.nampo {background: url('../img/doc_nampo_bg.jpg') center/cover} #m1 .docSlide.deokcheon {background: url('../img/doc_deokcheon_bg.jpg') center/cover} #m1 .docSlide.seomyon {background: url('../img/doc_seomyon_bg.jpg') center/cover} #m1 .docSlide.haeundae {background: url('../img/doc_haeundae_bg.jpg') center/cover} @media all and (max-width: 880px){ #m1 {height: 80vh; overflow: hidden;} #m1 .docSlide {} #m1 .docSlide .inner {padding: 15rem 0 0;} #m1 .docSlide .title {font-size: 5rem; line-height: 6.4rem; margin-bottom: 3rem;} #m1 .docSlide .cont {max-width: 71.8%; margin: 0 auto; padding-bottom: 3rem; position: relative;} #m1 .docSlide .cont .spot {font-size: 2.6rem; color: #fff;} #m1 .docSlide .cont .name {font-size: 3rem; color: #fff; font-weight: 600; display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1.6rem;} #m1 .docSlide .cont .name b {font-size: 4.6rem; font-weight: 800;} #m1 .docSlide .cont .lst {flex-direction: column; gap: 1rem;} #m1 .docSlide .cont .lst li {width: 22rem; border: 2px solid #fff; border-radius: 5rem;} #m1 .docSlide .cont .lst li a {display: block; padding: 1rem 0; color: #fff; text-align: center; font-weight: 600; font-size: 2.4rem;} #m1 .docSlide .cont .img {position: absolute; bottom: 0; max-width: 67%; right: -10%;} #m1 .docSlide .video {max-width: 84.54%; margin: 0 auto; border-radius: 1.9rem; overflow: hidden;} #m1 .docSlide .video iframe {width: 100%; height: auto; min-height: 30rem;} #m1 .docSlide.gangnam {background: url('../img/doc_gangnam_bg_mo.jpg') center/cover} #m1 .docSlide.yeongdeungpo {background: url('../img/doc_yeongdeung_bg_mo.jpg') center/cover} #m1 .docSlide.yongin {background: url('../img/doc_yongin_bg_mo.jpg') center/cover} #m1 .docSlide.nampo {background: url('../img/doc_nampo_bg_mo.jpg') center/cover} #m1 .docSlide.deokcheon {background: url('../img/doc_deokcheon_bg_mo.jpg') center/cover} #m1 .docSlide.seomyon {background: url('../img/doc_seomyon_bg_mo.jpg') center/cover} #m1 .docSlide.haeundae {background: url('../img/doc_haeundae_bg_mo.jpg') center/cover} } #m2 .yt_btn, #m3 .yt_btn, #m4 .yt_btn {width:30.3rem; left: 10%; animation: light 0.4s infinite alternate;} #m2.txt_trigger, #m3.txt_trigger, #m4.txt_trigger {} #m2.txt_trigger .txtArea, #m3.txt_trigger .txtArea, #m4.txt_trigger .txtArea {text-align: center; top: 10%;} #m2.txt_trigger .txtArea .subt, #m3.txt_trigger .txtArea .subt, #m4.txt_trigger .txtArea .subt {padding-top: 4rem; transition: 2s; opacity: 0} #m2.txt_trigger .txtArea .tit, #m3.txt_trigger .txtArea .tit, #m4.txt_trigger .txtArea .tit {padding-top: 2rem; transition: 1s; opacity: 0} #m2.txt_trigger .txtArea .subt.on, #m3.txt_trigger .txtArea .subt.on, #m4.txt_trigger .txtArea .subt.on {padding-top: 0; opacity: 1} #m2.txt_trigger .txtArea .tit.on, #m3.txt_trigger .txtArea .tit.on, #m4.txt_trigger .txtArea .tit.on {padding-top: 0; opacity: 1} @-webkit-keyframes light { from {opacity: 0.9;} to {opacity: 1;} } #m6 .inner, #m7 .inner {max-width: 170.8rem; padding: 13.2rem 0;} #m6 .btn_circle, #m7 .btn_circle {top: 15%;} .btn_circle {width: 22.2rem; height: 22.2rem;} .btn_circle::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: url('../img/btn_bf_circle.png') no-repeat center/contain; animation: rotate 30s linear infinite both;} .btn_circle a {position: relative;} @-webkit-keyframes rotate { from {transform: rotate(0);} to {transform: rotate(360deg);} } #m6 .left {position: relative;} #m6 .right {max-width: 88rem; position: relative;} #m6 .right .topImg {} #m6 .right .m6_swiper {overflow: hidden; margin: 2.7rem 0 2.4rem;} #m6 .right .m6_swiper_txt {color: #2C2C2C} #m6 .right .m6_swiper_txt .tit {margin-bottom: 1rem;} #m6 .right .m6_swiper_txt .subt {} #m7 .left {max-width: 88rem; position: relative;} #m7 .left .topImg {} #m7 .left .m7_swiper {overflow: hidden; margin: 2.7rem 0 2.4rem;} #m7 .left .m7_swiper_txt {color: #2C2C2C} #m7 .left .m7_swiper_txt .tit {margin-bottom: 1rem;} #m7 .left .m7_swiper_txt .subt {} #m7 .right {position: relative;} #m8 {} #m8 .inner {} #m8 .box {width: 50%; position: relative;} #m8 .m8_swiper {overflow: hidden;} #m9 {} #m9 .inner {padding: 19rem 0 9rem;} #m9 .title {margin-bottom: 4rem; position: relative;} #m9 .cont {gap: 1rem; position: relative;} #m9 .cont + .cont {margin-top: 1rem;} #m9 .cont .boxNon {width: 15%;} #m9 .cont .box {width: 22%;} #m9 .cont .txtBox {} #m9 .cont .txtBox .boxInner {} #m9 .cont .txtBox .boxInner .txt {padding-top: 1.8rem} #m9 .bottom {margin-top: 4.5rem} #m10 .btn_circle {bottom: 11%; left: 18%; width: 18.2rem; height: 18.2rem;} #m10 .nasaImg_pc {top: 17%; right: 14%; width: 43rem; opacity: 0; transition: 2s;} #m10 .nasaImg_pc.act_trigger_on {right: 19%; opacity: 1;} #m11 {} #m11 .inner {padding-top: 16.7rem;} #m11 .title {margin-bottom: 3rem;} #m11 .m11_swiper {overflow: hidden;} #m11 .m11_prev, #m11 .m11_next {color: #2E3137; background: none} #m11 .m11_prev::after, #m11 .m11_next::after {} #m11 .m11_prev {left: 20%} #m11 .m11_next {right: 20%} #m11 .btn_circle {z-index: 1; bottom: 21%; right: 19%;} #m12 {} #m12 .inner {padding: 12rem 0 5.4rem;} #m12 .title {margin-bottom: 5rem;} #m12 .cont {} #m12 .cont .local {margin-bottom: 5.4rem;} #m12 .cont .mapArea {gap: 0.4rem;} #m12 .cont .mapBox {} #m12 .cont .mapBox .place {} #m12 .cont .mapBox .place .placeImg {width: 28.8rem; bottom: 100%; display: none} #m12 .cont .mapBox .place:hover .placeImg {display: block; z-index: 1} #m12 .cont .mapBox .place1 {bottom: 30%; right: 35%;} #m12 .cont .mapBox .place2 {bottom: 32%; left: 39%;} #m12 .cont .mapBox .place3 {top: 30%; left: 40%;} #m12 .cont .mapBox .place4 {bottom: 44%; left: 44%;} #m12 .cont .mapBox .place5 {bottom: 30%; left: 41%;} #m12 .cont .mapBox .place6 {bottom: 48%; right: 27%;} #m12 .cont .mapBox .place7 {top: 63%; right: 42%;} #m13 {} #m13 .inner {padding: 12rem 0; background: #2E3137} #m13 .titArea {margin-bottom: 5.3rem;} #m13 .titArea .subt {margin-bottom: 1rem;} #m13 .titArea .tit {} #m13 .lst {gap: 12.4rem;} #m13 .lst li {} #m13 .lst li .tit {padding-bottom: 0.55rem; border-bottom: 2px solid #fff} #m13 .lst li .num {margin: 0.8rem 0;} #m13 .lst li .num i {line-height: 1;} #m13 .lst li .prg {color: #828282} @media all and (max-width: 880px){ #quickYoutube {left: auto; top: 50%; right: 3%; max-width: 15vw} #m2 .yt_btn, #m3 .yt_btn, #m4 .yt_btn {width: 30vw; top: 36%;} #m2.txt_trigger .txtArea, #m3.txt_trigger .txtArea, #m4.txt_trigger .txtArea {top: 5%;} #m2.txt_trigger .txtArea .subt, #m3.txt_trigger .txtArea .subt, #m4.txt_trigger .txtArea .subt {font-size: 2.4rem} #m2.txt_trigger .txtArea .tit, #m3.txt_trigger .txtArea .tit, #m4.txt_trigger .txtArea .tit {font-size: 4.2rem; margin-top: 1.8rem} .btn_circle {width: 12rem; height: 12rem } .btn_circle a {text-align: center; width: 50%;} #m6 .inner {padding: 7rem 0 5rem;} #m6 .cont {flex-direction: column; gap: 4rem;} #m6 .left {width: 83%; margin: 0 auto;} #m6 .right {max-width: 100%} #m6 .right .topImg {width: 90%; margin: 0 auto;} #m6 .right .m6_swiper {margin: 2.2rem 0 1.2rem} #m6 .right .m6_swiper_txt .tit {font-size: 1.4rem; margin-bottom: 0.5rem;} #m6 .right .m6_swiper_txt .subt {font-size: 1rem} #m7 .inner {padding: 7rem 0 8rem;} #m7 .cont {flex-direction: column-reverse; gap: 4rem;} #m7 .right {width: 83%; margin: 0 auto;} #m7 .left {max-width: 100%} #m7 .left .topImg {width: 90%; margin: 0 auto;} #m7 .left .m7_swiper {margin: 2.2rem 0 1.2rem} #m7 .left .m7_swiper_txt .tit {font-size: 1.4rem; margin-bottom: 0.5rem;} #m7 .left .m7_swiper_txt .subt {font-size: 1rem} #m8 .inner {flex-direction: column-reverse;} #m8 .box {width: 100%} #m9 .inner {padding: 7rem 0 3rem;} #m9 .title {width: 80%; margin-bottom: 2.4rem} #m9 .cont {gap: 0.5rem;} #m9 .cont .box {width: calc((100% - 0.5rem) / 2);} #m9 .cont .txtBox {width: 100%} #m9 .cont .txtBox .boxInner {flex-direction: row; justify-content: center; gap: 1rem; padding: 4rem 0;} #m9 .cont .txtBox .boxInner img {width: 30%;} #m9 .cont .txtBox .boxInner .txt {font-size: 2.6rem; padding: 0;} #m9 .bottom {margin-top: 2.5rem; width: 90%} #m10 .btn_circle {bottom: 16%; left: 11%;} #m10 .nasaImg_mo {bottom: 15%; right: 10%; width: 31%; opacity: 0; transition: 2s;} #m10 .nasaImg_mo.act_trigger_on {right: 16%; opacity: 1;} #m11 .inner {padding-top: 6rem;} #m11 .title {width: 80%; margin: 0 auto; margin-bottom: 3rem;} #m11 .m11_prev, #m11 .m11_next {top: 32%} #m11 .m11_prev {left: 7%} #m11 .m11_next {right: 7%} #m11 .m11_prev::after, #m11 .m11_next::after {font-size: 3rem} #m11 .btn_circle {bottom: auto; top: 10%; top: 29%;} #m12 .inner {padding: 7rem 0 6rem;} #m12 .title {width: 60%; margin: 0 auto; margin-bottom: 2rem;} #m12 .cont .local {margin-bottom: 13.4rem;} #m12 .cont {flex-direction: row; max-width: 88%; margin: 0 auto;} #m12 .cont .mapArea {flex-direction: column; justify-content: space-between;} #m12 .cont .mapBox .place {} #m12 .cont .mapBox .place .ico {max-width: 5rem} #m12 .cont .mapBox .place:hover .placeImg {max-width: 30vw} #m13 .inner {padding: 7rem 0;} #m13 .titArea {margin-bottom: 3.3rem;} #m13 .titArea .subt {font-size: 2.4rem; margin-bottom: 0;} #m13 .titArea .tit {font-size: 4rem;} #m13 .lst {gap: 6rem;} #m13 .lst li .tit {font-size: 2rem;} #m13 .lst li .num {font-size: 2.4rem;} #m13 .lst li .num i {font-size: 4rem;} #m13 .lst li .prg {font-size: 1.4rem;} } /** 리뉴얼 서브 시작 **/ .subTopArea {background: url('../../renew/img/sub_top_back.png') no-repeat center/cover;} .subTopArea.typeB {background: url('../../renew/img/sub_top_back2.png') no-repeat center/cover;} .subTopArea .inner {padding-top: 9rem;} .subTopArea .titArea {} .subTopArea .titArea .subt {} .subTopArea .titArea .tit {padding: 2rem 0 1rem;} .subTopArea .titArea .wrt {} .subTopArea .ico {margin: 2.8rem 0 3.4rem;} .subTopArea .subTopLst {width: 84rem} .subTopArea .subTopLst li {width: calc(100% / 3);} .subTopArea .subTopLst li a {display: block; padding: 2rem 0; text-align: center; background: rgba(255,255,255,0.24);} .subTopArea .subTopLst li.on a {background: #fff; color: #000; font-weight: 600} .subTopArea .subTopLst li:hover a {background: #fff; color: #000; font-weight: 600} @media all and (max-width: 880px){ .subTopArea {background: url('../../renew/img/sub_top_back_mo.png') no-repeat center/cover;} .subTopArea.typeB {background: url('../../renew/img/sub_top_back2_mo.png') no-repeat center/cover;} .subTopArea .inner {padding-top: 6.7rem;} .subTopArea .titArea .subt {} .subTopArea .titArea .tit {font-size: 3.7rem; padding: 1.3rem 0 1.1rem;} .subTopArea .titArea .wrt {font-size: 1.7rem;} .subTopArea .ico {margin: 1.8rem 0 2.8rem; width: 9px} .subTopArea .subTopLst {width: 100%; font-size: 1.6rem} .subTopArea .subTopLst li {width: calc(100% / 2);} } /** 리뉴얼 원장 약력 **/ #history {} #hs1 {} #hs1 .inner {max-width: 154rem; padding-top: 10rem;} #hs1 .hs1_swiper {overflow: hidden;} #hs1 .hsSlide {display: flex; align-items: center; gap: 10rem; background: url('../img/history_dc_symbol.png') right bottom 8rem / 19.5rem 19.5rem no-repeat;} #hs1 .hsSlide .imgArea {} #hs1 .hsSlide .txtArea {} #hs1 .hsSlide .txtArea .place {font-size: 3.5rem;} #hs1 .hsSlide .txtArea .place span {color: #3D90EF; font-weight: 600} #hs1 .hsSlide .txtArea .name {font-size: 7rem; font-weight: 800; display: flex; align-items: flex-end; gap: 1.4rem; line-height: 1.2;} #hs1 .hsSlide .txtArea .name span {font-size: 3.5rem; font-weight: 600; padding-bottom: 0.6rem;} #hs1 .hsSlide .txtArea .grade {display: inline-block; font-size: 2.3rem; font-weight: 500; color: #fff; background: #3D90EF; border-radius: 2.7rem; padding: 0.9rem 2.5rem; margin-top: 1rem;} #hs1 .hsSlide .txtArea .history {font-size: 2rem; margin-top: 2.3rem; color: #111111;} #hs1 .history_prev, #hs1 .history_next {color: #D1D1D1; background: none; width: 6rem; height: 11rem;} #hs1 .history_prev::after, #hs1 .history_next::after {width: 100%; height: 100%; font-size: 8rem;} #hs1 .history_prev {left: -7rem;} #hs1 .history_next {right: -7rem;} @media all and (max-width: 880px){ #history {} #hs1 {} #hs1 .inner {max-width: 86.4%; padding: 10rem 0;} #hs1 .hs1_swiper {} #hs1 .hsSlide {background: url('../img/history_dc_symbol.png') right bottom 3rem / 12rem 12rem no-repeat;} #hs1 .hsSlide .imgArea {} #hs1 .hsSlide .txtArea {flex-direction: column; display: flex; align-items: center;} #hs1 .hsSlide .txtArea .place {font-size: 4.6rem} #hs1 .hsSlide .txtArea .place span {} #hs1 .hsSlide .txtArea .name {font-size: 9rem; gap: 2.4rem;} #hs1 .hsSlide .txtArea .name span {font-size: 5rem;} #hs1 .hsSlide .txtArea .gradeWrap {margin: 2.5rem 0; width: 100%} #hs1 .hsSlide .txtArea .grade {margin: 0; font-size: 2.7rem; padding: 1rem 4rem; border-radius: 3rem;} #hs1 .hsSlide .txtArea .grade + .grade {margin-top: 1rem} #hs1 .hsSlide .txtArea .history {font-size: 2.4rem; line-height: 4.1rem; width: 90%; margin-top: 4rem;} #hs1 .history_prev, #hs1 .history_next {display: none;} #hs1 .history_prev::after, #hs1 .history_next::after {font-size: 6rem;} #hs1 .history_prev {left: -2rem} #hs1 .history_next {right: -2rem} } #hs2 {background: #F1F1F1;} #hs2 .inner {padding: 9rem 0 10rem; max-width: 152rem;} #hs2 .lstArea {display: flex; gap: 1rem;} #hs2 .lstArea li {width: calc((100% - 2rem) / 3);} #hs2 .lstArea li .thumb {border-radius: 2rem; overflow: hidden;} #hs2 .lstArea li .tit {text-align: center; font-size: 2rem; padding-top: 1.7rem;} #hs2 .linkBtn {text-align: center; margin-top: 4.5rem;} #hs2 .linkBtn a {display: inline-block; font-size: 2.5rem; color: #505050; font-weight: bold; padding: 1.3rem 5rem; background: #D1D1D1; border-radius: 3.5rem;} @media all and (max-width: 880px){ #hs2 {} #hs2 .inner {max-width: 82%; padding: 6rem 0;} #hs2 .lstArea {flex-direction: column; gap: 3rem;} #hs2 .lstArea li {width: 100%} #hs2 .lstArea li .thumb {height: 30rem; overflow: hidden;} #hs2 .lstArea li .thumb iframe {width: 100%; height: 100%;} #hs2 .lstArea li .tit {} #hs2 .linkBtn {} #hs2 .linkBtn a {} } #hs3 {background: url('../img/history_hs3_bg.jpg') center/cover no-repeat} #hs3 .inner {padding: 6.8rem 0;} #hs3 .subt {color: #fff} #hs3 .tit {color: #fff; font-size: 4.2rem; padding: 0.8rem 0 1.2rem;} #hs3 .prg {color: #fff; margin-bottom: 2.2rem;} #hs3 .linkBtn {display: inline-block; padding: 1.5rem 0; background: #fff; width: 40rem; text-align: center; border-radius: 3.5rem;} @media all and (max-width: 880px){ #hs3 {background: url('../img/history_hs3_bg_mo.jpg') center/cover no-repeat} #hs3 .inner {padding: 10rem 0;} #hs3 .subt {} #hs3 .tit {} #hs3 .prg {margin-bottom: 5rem;} #hs3 .linkBtn {} } #hs4 {} #hs4 .inner {padding: 6rem 0 4rem; max-width: 125rem;} /************************ 미니쉬 01 ************************/ #mns01 .s1 {} #mns01 .s1 .bgArea {} #mns01 .s1 .txtArea {top: 13.5rem; left: 20%;} #mns01 .s1 .txtArea .ico {width: 15.8rem;} #mns01 .s1 .txtArea .tit {padding: 2.9rem 0 2.3rem;} #mns01 .s1 .txtArea .subt {padding: 0.7rem 3.5rem; background: #232176} @media all and (max-width: 880px){ #mns01 .s1 {} #mns01 .s1 .bgArea {} #mns01 .s1 .txtArea {width: 100%; left: 50%; transform: translateX(-50%);} #mns01 .s1 .txtArea .ico {width: 15rem;} #mns01 .s1 .txtArea .tit {font-size: 5.5rem; padding: 2rem 0 1.5rem;} #mns01 .s1 .txtArea .subt {font-size: 3.2rem; padding: 0.5rem 2.1rem;} } #mns01 .s2 {overflow: hidden;} #mns01 .s2 .bgArea {} #mns01 .s2 .txtArea {top: 11.4rem;} #mns01 .s2 .txtArea .tit {padding-bottom: 1.75rem;} #mns01 .s2 .txtArea .subt {padding-bottom: 28.5rem;} #mns01 .s2 .txtArea .prg {} #mns01 .s2 .txtArea .ico {top: 26rem; width: 72.5rem;} @media all and (max-width: 880px){ #mns01 .s2 {} #mns01 .s2 .bgArea {} #mns01 .s2 .txtArea {width: 100%; top: 18%;} #mns01 .s2 .txtArea .tit {font-size: 5rem; line-height: 5.8rem; padding-bottom: 1rem;} #mns01 .s2 .txtArea .subt {padding-bottom: 35rem;} #mns01 .s2 .txtArea .prg {font-size: 3rem;} #mns01 .s2 .txtArea .ico {top: 24rem} } #mns01 .s3 {background: #F3F3F3} #mns01 .s3 .inner {padding: 7.3rem 0 9rem; max-width: 136rem;} #mns01 .s3 .lst {gap: 3.5rem;} #mns01 .s3 .lst .item {width: calc((100% - 7rem) / 3); background: #232176; border-radius: 2.5rem; padding: 4rem 0 3rem 5.5rem; position: relative;} #mns01 .s3 .lst .item .txt {padding-bottom: 1.5rem;} #mns01 .s3 .lst .item .tag {} #mns01 .s3 .lst .item .ico {width: 9.8rem; top: 4rem; right: 5rem;} #mns01 .s3 .txtArea {padding-top: 4rem;} #mns01 .s3 .txtArea .subt {padding-bottom: 0.6rem} #mns01 .s3 .txtArea .tit {} @media all and (max-width: 880px){ #mns01 .s3 {} #mns01 .s3 .inner {padding: 4rem 0 6.5rem;} #mns01 .s3 .lst {flex-direction: column; width: 90%; margin: 0 auto; gap: 1.5rem;} #mns01 .s3 .lst .item {width: 100%;} #mns01 .s3 .lst .item .txt {font-size: 3rem;} #mns01 .s3 .lst .item .tag {font-size: 4rem;} #mns01 .s3 .lst .item .ico {width: 12rem; top: 50%; transform: translateY(-50%);} #mns01 .s3 .txtArea {padding-top: 6rem;} #mns01 .s3 .txtArea .subt {font-size: 4rem;} #mns01 .s3 .txtArea .tit {font-size: 7.6rem; line-height: 8.8rem; padding-top: 2rem;} } #mns01 .s4 {} #mns01 .s4 .inner {padding: 14rem 0 12rem;} #mns01 .s4 .titArea {margin-bottom: 4.5rem;} #mns01 .s4 .titArea .tit {padding-bottom: 1rem;} #mns01 .s4 .titArea .tag {gap: 2rem;} #mns01 .s4 .titArea .tag .item {background: #232176; padding: 0 1.5rem;} #mns01 .s4 .marqueeBox {overflow: hidden;} #mns01 .s4 .marqueeBox .marquee01 {} #mns01 .s4 .marqueeBox .marquee01 img {} #mns01 .s4 .youtube {margin-top: 15rem;} #mns01 .s4 .youtube .tit {padding-bottom: 2rem;} #mns01 .s4 .youtube .frame {width: 100rem;} #mns01 .s4 .youtube .frame iframe {width: 100%; height: 62rem; object-fit: cover;} #mns01 .s4 .youtube .link {margin-top: 4rem; padding: 3rem 4.5rem; background: #232176; border-radius: 5rem} @media all and (max-width: 880px){ #mns01 .s4 {} #mns01 .s4 .inner {padding: 12rem 0 14rem;} #mns01 .s4 .titArea {} #mns01 .s4 .titArea .tit {font-size: 5rem;} #mns01 .s4 .titArea .tag {flex-direction: column; align-items: center; font-size: 5rem; gap: 1.5rem;} #mns01 .s4 .titArea .tag .item {} #mns01 .s4 .marqueeBox {} #mns01 .s4 .marqueeBox .marquee01 {} #mns01 .s4 .marqueeBox .marquee01 img {max-width: 45rem;} #mns01 .s4 .youtube {margin-top: 10rem;} #mns01 .s4 .youtube .tit {text-align: center; padding-bottom: 3rem;} #mns01 .s4 .youtube .frame {width: 90%;} #mns01 .s4 .youtube .frame iframe {height: 50rem} #mns01 .s4 .youtube .link {font-size: 3.6rem; padding: 2.5rem 4rem;} } #mns01 .s5 {} #mns01 .s5 .bgArea {} #mns01 .s5 .txtArea {top: 14.7rem; width: max-content;} #mns01 .s5 .txtArea .tit {padding-bottom: 4.5rem;} #mns01 .s5 .txtArea .tit b {font-weight: bold;} #mns01 .s5 .txtArea .tit .clr {color: #E8FF44} #mns01 .s5 .txtArea .img {} @media all and (max-width: 880px){ #mns01 .s5 {} #mns01 .s5 .bgArea {} #mns01 .s5 .txtArea {width: 100%; top: 30%;} #mns01 .s5 .txtArea .tit {} #mns01 .s5 .txtArea .tit .clr {} #mns01 .s5 .txtArea .img {width: 85%;} } #mns01 .s6 {padding-bottom: 11rem;} #mns01 .s6 .lst {} #mns01 .s6 .lst .box {width: 50%} #mns01 .s6 .lst .box video {width: 100%; height: 100%; object-fit: cover; display: block;} #mns01 .s6 .lst .box .bg {} #mns01 .s6 .lst .box .txt {width: max-content;} #mns01 .s6 .lst2 {margin-top: 2rem;} @media all and (max-width: 880px){ #mns01 .s6 {padding: 0;} #mns01 .s6 .lst {flex-direction: column;} #mns01 .s6 .lst .box {width: 100%;} #mns01 .s6 .lst .box video {} #mns01 .s6 .lst .box .bg {} #mns01 .s6 .lst .box .txt {font-size: 3rem;} #mns01 .s6 .lst2 {margin-top: 0; flex-direction: column-reverse;} } #mns01 .s7 {background: #F6F6F6;} #mns01 .s7 .inner {padding: 19.5rem 0; max-width: 146.5rem;} #mns01 .s7 .titArea {margin-bottom: 6rem;} #mns01 .s7 .titArea .subt {padding-bottom: 0.7rem;} #mns01 .s7 .titArea .tit {} #mns01 .s7 .lstArea {gap: 6rem;} #mns01 .s7 .lstArea .lst {width: calc((100% - 12rem) / 3);} #mns01 .s7 .lstArea .lst .img {} #mns01 .s7 .lstArea .lst .tit {padding: 2.5rem 0 1rem;} #mns01 .s7 .lstArea .lst .subt {} @media all and (max-width: 880px){ #mns01 .s7 {} #mns01 .s7 .inner {padding: 12rem 0;} #mns01 .s7 .titArea {margin-bottom: 4rem;} #mns01 .s7 .titArea .subt {font-size: 3.4rem;} #mns01 .s7 .titArea .tit {font-size: 5rem;} #mns01 .s7 .lstWrap {overflow: hidden; height: 60vh} #mns01 .s7 .lstArea {width: 82%; margin: 0 auto; gap: 4rem;} #mns01 .s7 .lstArea .lst {width: 100%;} #mns01 .s7 .lstArea .lst .img {} #mns01 .s7 .lstArea .lst .tit {font-size: 5rem;} #mns01 .s7 .lstArea .lst .subt {font-size: 3rem;} } #mns01 .s8 {} #mns01 .s8 .inner {padding: 18rem 0 8rem} #mns01 .s8 .titArea {margin-bottom: 4rem;} #mns01 .s8 .titArea .subt {padding-bottom: 0.7rem;} #mns01 .s8 .titArea .tit {} #mns01 .s8 .marqueeBox {overflow: hidden;} #mns01 .s8 .marqueeBox .marquee02 {} #mns01 .s8 .marqueeBox .marquee02 .item {} #mns01 .s8 .marqueeBox .marquee02 .item img {} #mns01 .s8 .marqueeBox .marquee02 .item .txt {} #mns01 .s8 .lstWrap {display: none} @media all and (max-width: 880px){ #mns01 .s8 {} #mns01 .s8 .inner {padding: 13rem 0 5rem;} #mns01 .s8 .titArea {} #mns01 .s8 .titArea .subt {} #mns01 .s8 .titArea .tit {font-size: 5rem;} #mns01 .s8 .marqueeBox {display: none;} #mns01 .s8 .marqueeBox .marquee02 {} #mns01 .s8 .marqueeBox .marquee02 .item {} #mns01 .s8 .marqueeBox .marquee02 .item img {} #mns01 .s8 .marqueeBox .marquee02 .item .txt {} #mns01 .s8 .lstWrap {display: flex; flex-wrap: wrap; gap: 3rem 0;} #mns01 .s8 .lstWrap li {width: 50%;} } #mns01 .s9 {background: url('../img/mns1_s9_bg.jpg') center/cover;} #mns01 .s9 .inner {padding: 16rem 0 30rem;} #mns01 .s9 .title {margin-bottom: 6rem;} #mns01 .s9 .imgArea {margin-bottom: 4rem; max-width: 133rem;} #mns01 .s9 .prg {padding: 1.4rem 4.5rem; background: #232176;} #mns01 .s9 .prg span {color: #E8FF44;} #mns01 .s9 .prgMo {display: none;} @media all and (max-width: 880px){ #mns01 .s9 {} #mns01 .s9 .inner {padding: 13rem 0;} #mns01 .s9 .title {margin-bottom: 4rem;} #mns01 .s9 .imgArea {width: 90%; margin: 0 auto} #mns01 .s9 .prg {display: none;} #mns01 .s9 .prg span {} #mns01 .s9 .prgMo {display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 8rem;} #mns01 .s9 .prgMo p {padding: 1.4rem 4.5rem; background: #232176;} #mns01 .s9 .prgMo p span {color: #E8FF44;} } #mns01 .s10 {} #mns01 .s10 .vdoArea {height: 68.8rem; overflow: hidden;} #mns01 .s10 .vdoArea::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.2); left: 0; top: 0} #mns01 .s10 .vdoArea video {height: 100%; width: 100%; object-fit: cover;} #mns01 .s10 .txtArea {} #mns01 .s10 .txtArea .ico1 {} #mns01 .s10 .txtArea .tit {padding: 4.5rem 0 1.5rem; text-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16);} #mns01 .s10 .txtArea .wrt {padding-bottom: 3.8rem; text-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16);} #mns01 .s10 .txtArea .ico2 {} #mns01 .s10 .moTxt {display: none} @media all and (max-width: 880px){ #mns01 .s10 {} #mns01 .s10 .vdoArea {height: 40rem; position: relative;} #mns01 .s10 .vdoArea video {} #mns01 .s10 .txtArea {flex-direction: row; justify-content: center; gap: 5rem; top: 28%;} #mns01 .s10 .txtArea .ico1 {width: 12rem;} #mns01 .s10 .txtArea .tit {display: none;} #mns01 .s10 .txtArea .wrt {display: none;} #mns01 .s10 .txtArea .ico2 {width: 18rem;} #mns01 .s10 .moTxt {display: block; background: #EEEAE0; padding: 6rem 0;} #mns01 .s10 .moTxt .tit {font-size: 4.5rem; padding-bottom: 1.5rem} #mns01 .s10 .moTxt .wrt {font-size: 3.5rem; font-weight: 500;} } #mns01 .s11 {} #mns01 .s11 .inner {max-width: 138.6rem; padding: 22rem 0;} #mns01 .s11 .titArea {margin-bottom: 6rem;} #mns01 .s11 .titArea b {font-weight: bold;} #mns01 .s11 .contArea {gap: 1rem;} #mns01 .s11 .contArea .box {flex: 1;} #mns01 .s11 .contArea .box .img {} #mns01 .s11 .contArea .box .txt {padding: 1.8rem 0; background: #000000;} #mns01 .s11 .prg {margin-top: 4.5rem;} @media all and (max-width: 880px){ #mns01 .s11 {} #mns01 .s11 .inner {padding: 15rem 0 18rem;} #mns01 .s11 .titArea {font-size: 4rem; margin-bottom: 4rem;} #mns01 .s11 .contArea {flex-direction: column; width: 84%; margin: 0 auto; gap: 3rem;} #mns01 .s11 .contArea .box {} #mns01 .s11 .contArea .box .img {} #mns01 .s11 .contArea .box .txt {font-size: 1.8rem;} #mns01 .s11 .prg {font-size: 2.8rem;} } #mns01 .s12 {} #mns01 .s12 .inner {} #mns01 .s12 .txtArea {width: 50%; background: #281F6C; flex-shrink: 0;} #mns01 .s12 .txtArea .txt {height: 100%; display: flex; flex-direction: column; justify-content: center;} #mns01 .s12 .txtArea .txt .t1 {font-size: 11rem;} #mns01 .s12 .txtArea .txt .t2 {color: #E8FF44; padding: 1rem 0;} #mns01 .s12 .txtArea .txt .t3 {margin-bottom: 3.4rem;} #mns01 .s12 .txtArea .txt .t4 {padding-bottom: 1.2rem;} #mns01 .s12 .txtArea .txt .t4 b {color: #E8FF44} #mns01 .s12 .txtArea .txt .t5 {} #mns01 .s12 .imgArea {width: 50%;} #mns01 .s12 .cent {} @media all and (max-width: 880px){ #mns01 .s12 {} #mns01 .s12 .inner {flex-direction: column;} #mns01 .s12 .txtArea {width: 100%} #mns01 .s12 .txtArea .txt {padding: 15rem 0;} #mns01 .s12 .txtArea .txt .t1 {font-size: 12rem;} #mns01 .s12 .txtArea .txt .t2 {font-size: 5rem;} #mns01 .s12 .txtArea .txt .t3 {font-size: 2.5rem;} #mns01 .s12 .txtArea .txt .t4 {font-size: 4.2rem;} #mns01 .s12 .txtArea .txt .t4 b {} #mns01 .s12 .txtArea .txt .t5 {font-size: 2.5rem;} #mns01 .s12 .imgArea {width: 100%} #mns01 .s12 .cent {width: 35%; top: 48%;} } #mns01 .s13 {} #mns01 .s13 .vdoArea {height: 88.4rem; overflow: hidden;} #mns01 .s13 .vdoArea video {width: 100%; height: 100%; object-fit: cover;} #mns01 .s13 .boxArea {padding: 2.4rem 2rem; background: rgba(255,255,255,0.9); width: max-content; gap: 9rem} #mns01 .s13 .boxArea .img {} #mns01 .s13 .boxArea .txt {} #mns01 .s13 .boxArea .txt .t1 {color: #281F6C;} #mns01 .s13 .boxArea .txt .t2 {padding: 1rem 0;} #mns01 .s13 .boxArea .txt .t3 {margin-bottom: 2.8rem;} #mns01 .s13 .boxArea .txt .t4 {padding: 1.6rem 5rem; background: #F2F2F2;} #mns01 .s13 .boxArea .txt .t4 b {color: #281F6C;} @media all and (max-width: 880px){ #mns01 .s13 {} #mns01 .s13 .vdoArea {height: 95vh;} #mns01 .s13 .vdoArea video {} #mns01 .s13 .boxArea {flex-direction: column; width: 87%; gap: 3rem; padding-bottom: 7rem;} #mns01 .s13 .boxArea .img {} #mns01 .s13 .boxArea .txt {} #mns01 .s13 .boxArea .txt .t1 {} #mns01 .s13 .boxArea .txt .t2 {padding-top: 0;} #mns01 .s13 .boxArea .txt .t3 {} #mns01 .s13 .boxArea .txt .t4 {padding: 1.6rem 0; font-size: 2.2rem;} #mns01 .s13 .boxArea .txt .t4 b {} } #mns01 .s14 {} #mns01 .s14 .bgArea {} #mns01 .s14 .txtArea {left: 25%;} #mns01 .s14 .txtArea .ico {} #mns01 .s14 .txtArea .t1 {color: #001964; padding: 2.2rem 0;} #mns01 .s14 .txtArea .t2 {padding: 1rem 2.5rem; background: #001964;} #mns01 .s14 .txtArea .t3 {padding-top: 3rem;} @media all and (max-width: 880px){ #mns01 .s14 {} #mns01 .s14 .bgArea {} #mns01 .s14 .txtArea {left: 10%; top: 30%;} #mns01 .s14 .txtArea .ico {width: 25rem;} #mns01 .s14 .txtArea .t1 {} #mns01 .s14 .txtArea .t2 {} #mns01 .s14 .txtArea .t3 {} } #mns02 {overflow: hidden;} #mns02 .s1 {position: relative;} #mns02 .s1 .imgBox {} #mns02 .s1 .abImg {} #mns02 .s1 .abTxt {bottom: 15rem;} @media all and (max-width: 880px){ #mns02 {} #mns02 .s1 {flex-direction: column;} #mns02 .s1 .imgBox {} #mns02 .s1 .abImg {width: 75%; bottom: 5%;} #mns02 .s1 .abTxt {bottom: 12%;} } #mns02 .s2 {position: relative; padding-top: 11.5rem;} #mns02 .s2 .txtArea {margin-bottom: 10rem;} #mns02 .s2 .txtArea .tit {color: #232176;} #mns02 .s2 .txtArea .subt {margin: 1.3rem 0 1.8rem;} #mns02 .s2 .txtArea .subt span {background: #232176; display: inline-block; padding: 1rem 1.7rem; line-height: 1} #mns02 .s2 .txtArea .mosubt {display: none;} #mns02 .s2 .txtArea .wrt {color: #111111;} #mns02 .s2 .vdoArea {height: 47rem; overflow: hidden; position: relative;} #mns02 .s2 .vdoArea video {position: absolute; width: 100%; top: -58%;} @media all and (max-width: 880px){ #mns02 .s2 {} #mns02 .s2 .txtArea {} #mns02 .s2 .txtArea .tit {} #mns02 .s2 .txtArea .mosubt {display: flex; flex-direction: column; max-width: 60%; font-size: 3.2rem; gap: 1rem; margin: 1rem auto 2rem;} #mns02 .s2 .txtArea .mosubt span {background: #232176; display: inline-block; padding: 1rem 1.7rem; line-height: 1} #mns02 .s2 .txtArea .wrt {font-size: 2.6rem;} #mns02 .s2 .vdoArea {height: 26vh;} #mns02 .s2 .vdoArea video {top: -11%;} } #mns02 .s3 {position: relative;} #mns02 .s3 .inner {padding: 12.5rem 0; max-width: 155rem;} #mns02 .s3 .titArea {margin-bottom: 4rem;} #mns02 .s3 .titArea .tit {color: #232176; line-height: 1.3;} #mns02 .s3 .titArea .tit i {background: #E8FF44; display: inline-block; padding: 0 1rem} #mns02 .s3 .titArea .wrt {padding-top: 1.4rem;} #mns02 .s3 .lstArea {gap: 1rem;} #mns02 .s3 .lstArea li {position: relative;} #mns02 .s3 .lstArea li .img {} #mns02 .s3 .lstArea li .txt {left: 3.5rem; bottom: 3rem;} #mns02 .s3 .lstArea li .txt .subt {} #mns02 .s3 .lstArea li .txt .tit {letter-spacing: -0.2rem;} @media all and (max-width: 880px){ #mns02 .s3 {} #mns02 .s3 .inner {} #mns02 .s3 .titArea {} #mns02 .s3 .titArea .tit {line-height: 1.4;} #mns02 .s3 .titArea .tit i {line-height: 1.2;} #mns02 .s3 .titArea .wrt {font-size: 3.4rem;} #mns02 .s3 .titArea .wrt b {font-size: 3.4rem;} #mns02 .s3 .lstArea {max-width: 92.4%; margin: 0 auto; flex-wrap: wrap;} #mns02 .s3 .lstArea li {width: calc((100% - 1rem) / 2);} #mns02 .s3 .lstArea li .img {} #mns02 .s3 .lstArea li .txt {left: 6%; bottom: 6%;} #mns02 .s3 .lstArea li .txt .subt {font-size: 2rem;} #mns02 .s3 .lstArea li .txt .tit {font-size: 2.8rem;} } #mns02 .s4 {position: relative; background: #232176} #mns02 .s4 .inner {} #mns02 .s4 .txtBox {width: 100%; display: flex; flex-direction: column; justify-content: center; padding-left: 27rem;} #mns02 .s4 .txtBox .tit {} #mns02 .s4 .txtBox .subt {padding: 1.2rem 0 1rem;} #mns02 .s4 .txtBox .subt b {color: #E8FF44} #mns02 .s4 .txtBox .wrt {margin-bottom: 6.5rem;} #mns02 .s4 .txtBox .ico {} #mns02 .s4 .mns2Swiper {width: 112rem; flex-shrink: 0; overflow: hidden; padding: 10rem 0 7.4rem; padding-left: 13rem;} #mns02 .s4 .mns2Swiper .slide {} #mns02 .s4 .mns2Swiper .slide .img {} #mns02 .s4 .mns2Swiper .slide .tit {margin: 2.4rem 0 1.6rem;} #mns02 .s4 .mns2Swiper .slide .lst {} #mns02 .s4 .mns2Swiper .slide .lst li {line-height: 1; padding-left: 1.4rem; position: relative;} #mns02 .s4 .mns2Swiper .slide .lst li::before {content: ''; display: block; position: absolute; width: 0.4rem; height: 1.6rem; background: #fff; left: 0; top: 50%; transform: translateY(-50%);} #mns02 .s4 .mns2Swiper .slide .lst li + li {margin-top: 1rem} @media all and (max-width: 880px){ #mns02 .s4 {} #mns02 .s4 .inner {flex-direction: column;} #mns02 .s4 .txtBox {padding: 6rem;} #mns02 .s4 .txtBox .tit {font-size: 5.4rem;} #mns02 .s4 .txtBox .subt {font-size: 3rem; padding: 2rem 0 1.5rem;} #mns02 .s4 .txtBox .wrt {font-size: 1.8rem;} #mns02 .s4 .txtBox .ico {} #mns02 .s4 .mns2Swiper {width: 90%; padding: 3.4rem 0 4.8rem; margin: 0 auto;} #mns02 .s4 .mns2Swiper .slide {} #mns02 .s4 .mns2Swiper .slide .img {} #mns02 .s4 .mns2Swiper .slide .tit {font-size: 3.6rem;} #mns02 .s4 .mns2Swiper .slide .lst {font-size: 2rem;} #mns02 .s4 .mns2Swiper .slide .lst li {line-height: 1.4;} } #mns02 .s5 {position: relative;} #mns02 .s5 .inner {padding: 6rem 0; background: url('../img/mns2_s5_bg.jpg') center/cover;} #mns02 .s5 .vdo {max-width: 102rem; margin: 0 auto;} #mns02 .s5 .vdo video {width: 100%;} @media all and (max-width: 880px){ #mns02 .s5 {} #mns02 .s5 .inner {padding: 9rem 0;} #mns02 .s5 .vdo {max-width: 90%;} #mns02 .s5 .vdo video {} } #mns02 .s6 {position: relative;} #mns02 .s6 .inner {padding: 10rem 0;} #mns02 .s6 .lstA {gap: 8rem; position: relative;} #mns02 .s6 .lstA .imgArea {} #mns02 .s6 .lstA .txtArea {} #mns02 .s6 .lstA .txtArea .tit {color: #241C72} #mns02 .s6 .lstA .txtArea .subt {padding: 2.2rem 0 3.7rem;} #mns02 .s6 .lstA .txtArea .prg {background: #241C72; padding: 0 2.2rem;} #mns02 .s6 .lstA .txtArea .wrt {} #mns02 .s6 .lstA .txtArea .bg {top: 50%; transform: translateY(-50%); right: 0;} #mns02 .s6 .lstB {gap: 8rem; position: relative; margin-top: 10rem; justify-content: flex-end;} #mns02 .s6 .lstB .imgArea {} #mns02 .s6 .lstB .txtArea {text-align: right;} #mns02 .s6 .lstB .txtArea .tit {color: #241C72} #mns02 .s6 .lstB .txtArea .subt {padding: 2.2rem 0;} #mns02 .s6 .lstB .txtArea .prg {background: #241C72; padding: 0 2.2rem;} #mns02 .s6 .lstB .txtArea .wrt {margin-top: 1.5rem;} #mns02 .s6 .lstB .txtArea .bg {top: 50%; transform: translateY(-50%); left: 0; left: 8%;} @media all and (max-width: 880px){ #mns02 .s6 {} #mns02 .s6 .inner {padding: 0;} #mns02 .s6 .lstA {flex-direction: column; align-items: flex-start;} #mns02 .s6 .lstA .imgArea {} #mns02 .s6 .lstA .txtArea {max-width: 86%; margin: 0 auto;} #mns02 .s6 .lstA .txtArea .tit {font-size: 5rem;} #mns02 .s6 .lstA .txtArea .subt {} #mns02 .s6 .lstA .txtArea .wrt {} #mns02 .s6 .lstA .txtArea .bg {display: none;} #mns02 .s6 .lstB {flex-direction: column-reverse; align-items: flex-start; margin-top: 8rem;} #mns02 .s6 .lstB .imgArea {} #mns02 .s6 .lstB .txtArea {max-width: 86%; margin: 0 auto; padding-bottom: 8rem;} #mns02 .s6 .lstB .txtArea .tit {font-size: 5rem;} #mns02 .s6 .lstB .txtArea .subt {} #mns02 .s6 .lstB .txtArea .wrt {} #mns02 .s6 .lstB .txtArea .prg {font-size: 2.8rem;} #mns02 .s6 .lstB .txtArea .bg {display: none;} } #mns02 .s7 {position: relative;} #mns02 .s7 .vdo {height: 56rem;} #mns02 .s7 .vdo video {width: 100%; height: 100%; object-fit: cover;} #mns02 .s7 .txt {background: #241C72; padding: 0.6rem 1.5rem; width: max-content;} #mns02 .s7 .txt span {color: #E8FF44;} #mns02 .s7 .txt .moTxt {} #mns02 .s7 .txt .moTxt span {} #mns02 .s7 .txt .moTxt span i {} @media all and (max-width: 880px){ #mns02 .s7 {} #mns02 .s7 .vdo {} #mns02 .s7 .vdo video {} #mns02 .s7 .moTxt {display: flex; flex-direction: column; align-items: center; padding: 5rem 0 8rem; font-size: 3.6rem; gap: 1rem;} #mns02 .s7 .moTxt span {background: #241C72; padding: 0.7rem 1.5rem;} #mns02 .s7 .moTxt span i {color: #E8FF44;} } #mns02 .s8 {position: relative; background: #F6F6F6;} #mns02 .s8 .inner {padding: 13rem 10rem; } #mns02 .s8 .titArea {margin-bottom: 4rem;} #mns02 .s8 .titArea .tit {} #mns02 .s8 .titArea .wrt {padding-top: 1.5rem;} #mns02 .s8 .lstArea {justify-content: center; gap: 12rem; position: relative;} #mns02 .s8 .lstArea .lst {} #mns02 .s8 .lstArea .lst .imgArea {} #mns02 .s8 .lstArea .lst .subt {padding-top: 2rem;} #mns02 .s8 .lstArea .lst .tit {} #mns02 .s8 .lstArea .vs {width: 7rem; height: 7rem; background: #241C72; border-radius: 50%; display: grid; place-items: center; top: 28%;} @media all and (max-width: 880px){ #mns02 .s8 {} #mns02 .s8 .inner {padding: 10rem 0; max-width: 81.4%;} #mns02 .s8 .titArea {} #mns02 .s8 .titArea .tit {} #mns02 .s8 .titArea .wrt {font-size: 2.8rem;} #mns02 .s8 .lstArea {gap: 4rem;} #mns02 .s8 .lstArea .lst {width: calc((100% - 4rem) / 2);} #mns02 .s8 .lstArea .lst .imgArea {} #mns02 .s8 .lstArea .lst .subt {text-align: center;} #mns02 .s8 .lstArea .lst .tit {} #mns02 .s8 .lstArea .vs {border: 0.6rem solid #fff; width: 8rem; height: 8rem; top: 20%;} } #mns02 .s9 {position: relative; background: #232176;} #mns02 .s9 .inner {max-width: 120rem; padding: 13rem 0 9rem;} #mns02 .s9 .titArea {margin-bottom: 4.2rem;} #mns02 .s9 .titArea .tit {} #mns02 .s9 .titArea .wrt {} #mns02 .s9 .tabArea {background: #FFFFFF; border-radius: 1.2rem; padding: 11rem 0 2.5rem;} #mns02 .s9 .tabArea .tab {top: 3rem; gap: 0.8rem;} #mns02 .s9 .tabArea .tab li {width: 18.4rem; border: 1px solid #232176; color: #232176; padding: 1rem 0; text-align: center; cursor: pointer;} #mns02 .s9 .tabArea .tab li.on {background: #232176; color: #fff;} #mns02 .s9 .tabBox {background: #fff; opacity: 0;} #mns02 .s9 .tabBox.act {opacity: 1;} #mns02 .s9 .tabBox .inn {justify-content: center; gap: 4rem;} #mns02 .s9 .tabBox .inn .img {} #mns02 .s9 .tabBox .inn .txt {} #mns02 .s9 .tabBox .inn .txt .tit {} #mns02 .s9 .tabBox .inn .txt .wrt {padding: 1.8rem 0 2rem; line-height: 3rem;} #mns02 .s9 .tabBox .inn .txt .tag {gap: 0.6rem;} #mns02 .s9 .tabBox .inn .txt .tag li {padding: 1rem 1.8rem; background: #F1F1F1; border-radius: 2rem;} #mns02 .s9 .tabBox .inn .txt .prg {color: #777777; margin-top: 4rem;} #mns02 .s9 .tabBox .inn .txt .prg span {color: #232176;} @media all and (max-width: 880px){ #mns02 .s9 {} #mns02 .s9 .inner {padding: 11rem 0 4rem;} #mns02 .s9 .titArea {} #mns02 .s9 .titArea .tit {} #mns02 .s9 .titArea .wrt {font-size: 2.6rem; padding-top: 1rem;} #mns02 .s9 .tabArea {max-width: 90%; margin: 0 auto; padding: 20rem 0 5rem;} #mns02 .s9 .tabArea .tab {flex-wrap: wrap; width: 90%; justify-content: center; font-size: 2.2rem;} #mns02 .s9 .tabArea .tab li {width: calc((100% - 3rem) / 2);} #mns02 .s9 .tabArea .tab li.on {} #mns02 .s9 .tabBox {} #mns02 .s9 .tabBox.act {} #mns02 .s9 .tabBox .inn {flex-direction: column; text-align: center;} #mns02 .s9 .tabBox .inn .img {max-width: 50%;} #mns02 .s9 .tabBox .inn .txt {} #mns02 .s9 .tabBox .inn .txt .tit {font-size: 5.5rem;} #mns02 .s9 .tabBox .inn .txt .wrt {font-size: 2.2rem; line-height: 3.4rem;} #mns02 .s9 .tabBox .inn .txt .tag {justify-content: center; font-size: 2.1rem;} #mns02 .s9 .tabBox .inn .txt .tag li {} #mns02 .s9 .tabBox .inn .txt .prg {font-size: 4.6rem;} #mns02 .s9 .tabBox .inn .txt .prg span {} } #mns02 .s10 {position: relative; background: url('../img/mns2_s10_bg.jpg') center/cover;} #mns02 .s10 .inner {max-width: 100rem; padding: 14.5rem 0 11rem;} #mns02 .s10 .titArea {margin-bottom: 3.2rem;} #mns02 .s10 .titArea .subt {} #mns02 .s10 .titArea .tit {padding: 0.4rem 0 1rem;} #mns02 .s10 .titArea .wrt {} #mns02 .s10 .imgArea {} @media all and (max-width: 880px){ #mns02 .s10 {} #mns02 .s10 .inner {} #mns02 .s10 .titArea {} #mns02 .s10 .titArea .subt {} #mns02 .s10 .titArea .tit {} #mns02 .s10 .titArea .wrt {font-size: 2.4rem;} #mns02 .s10 .imgArea {max-width: 90%; margin: 0 auto;} } #mns02 .s11 {position: relative;} #mns02 .s11 .bgArea {} #mns02 .s11 .txtArea {left: 48rem; padding-bottom: 5rem;} #mns02 .s11 .txtArea .ico {} #mns02 .s11 .txtArea .t1 {color: #001964; padding: 2rem 0 1.2rem;} #mns02 .s11 .txtArea .t2 {color: #001964;} #mns02 .s11 .txtArea .t3 {margin-top: 2.5rem;} @media all and (max-width: 880px){ #mns02 .s11 {} #mns02 .s11 .bgArea {} #mns02 .s11 .txtArea {left: 10%; padding: 0; top: 10%; transform: none;} #mns02 .s11 .txtArea .ico {} #mns02 .s11 .txtArea .t1 {font-size: 2.5rem; padding: 3rem 0;} #mns02 .s11 .txtArea .t2 {} #mns02 .s11 .txtArea .t3 {font-size: 3.4rem;} } #mns03 {} #mns03 .s1 {} #mns03 .s1 .vdo {} #mns03 .s1 .vdo video {width: 100%;} @media all and (max-width: 880px){ #mns03 {} #mns03 .s1 {} #mns03 .s1 .vdo {} #mns03 .s1 .vdo video {} } #mns03 .s2 {padding: 6rem 0;} #mns03 .s2 .marqBoxA {height: 29rem;} #mns03 .s2 .marqBoxA .marquee03 {} #mns03 .s2 .marqBoxA .marquee03 img {} #mns03 .s2 .marqBoxB {height: 29rem;} #mns03 .s2 .marqBoxB .marquee04 {} #mns03 .s2 .marqBoxB .marquee04 img {} #mns03 .s2 .txtArea {padding: 15rem 0;} #mns03 .s2 .txtArea .tit {padding-bottom: 1rem;} #mns03 .s2 .txtArea .subt {display: inline-block; padding: 1rem 1.5rem; background: #232176; line-height: 1.2;} #mns03 .s2 .txtArea .mosubt {display: none;} @media all and (max-width: 880px){ #mns03 .s2 {} #mns03 .s2 .marqBoxA {} #mns03 .s2 .marqBoxA .marquee03 {} #mns03 .s2 .marqBoxA .marquee03 img {height: 35rem;} #mns03 .s2 .marqBoxB {} #mns03 .s2 .marqBoxB .marquee04 {} #mns03 .s2 .marqBoxB .marquee04 img {height: 35rem;} #mns03 .s2 .txtArea {} #mns03 .s2 .txtArea .tit {font-size: 7rem;} #mns03 .s2 .txtArea .subt {display: none;} #mns03 .s2 .txtArea .mosubt {display: block; font-size: 3.5rem;} #mns03 .s2 .txtArea .mosubt span {background: #232176; padding: 0 1rem; display: inline-block;} #mns03 .s2 .txtArea .mosubt span.aa {margin-top: 1rem;} } #mns03 .s3 {} #mns03 .s3 .topArea {background: url('../img/mns3_s3_bg.jpg') center/cover; padding: 12rem 0 11rem;} #mns03 .s3 .topArea .txtArea {margin-bottom: 4.5rem;} #mns03 .s3 .topArea .txtArea .tit {} #mns03 .s3 .topArea .txtArea .subt {} #mns03 .s3 .topArea .tabArea {gap: 1rem;} #mns03 .s3 .topArea .tabArea .tab {width: 16rem; text-align: center; font-size: 2rem; font-weight: bold; color: #fff; padding: 0.9rem 0; border: 1px solid #fff; cursor: pointer;} #mns03 .s3 .topArea .tabArea .tab.on {color: #232176; background: #fff;} #mns03 .s3 .botArea {padding: 5rem 0 8rem;} #mns03 .s3 .botArea .imgArea {width: 80rem; margin: 0 auto; border-radius: 1.2rem; overflow: hidden;} #mns03 .s3 .botArea .imgArea img {transition: 0.2s;} #mns03 .s3 .botArea .imgArea img.abs {opacity: 0;} #mns03 .s3 .botArea .imgArea img.on {opacity: 1;} @media all and (max-width: 880px){ #mns03 .s3 {} #mns03 .s3 .topArea {} #mns03 .s3 .topArea .txtArea {} #mns03 .s3 .topArea .txtArea .tit {font-size: 4.5rem;} #mns03 .s3 .topArea .txtArea .subt {font-size: 2.6rem; padding-top: 2rem;} #mns03 .s3 .topArea .tabArea {max-width: 76%; margin: 0 auto; flex-wrap: wrap; justify-content: flex-start;} #mns03 .s3 .topArea .tabArea .tab {width: calc((100% - 1rem) / 2); font-size: 2.6rem;} #mns03 .s3 .topArea .tabArea .tab.on {} #mns03 .s3 .botArea {padding: 2rem 0 18rem;} #mns03 .s3 .botArea .imgArea {width: 90%;} #mns03 .s3 .botArea .imgArea img {} #mns03 .s3 .botArea .imgArea img.abs {} #mns03 .s3 .botArea .imgArea img.on {} } #mns03 .s4 {background: #262626} #mns03 .s4 .marqBox {} @media all and (max-width: 880px){ #mns03 .s4 {} #mns03 .s4 .marqBox {} } #mns03 .s5 {padding: 11.5rem 0 14rem;} #mns03 .s5 .txtArea {margin-bottom: 5rem;} #mns03 .s5 .txtArea .tit {padding-bottom: 1rem;} #mns03 .s5 .txtArea .tit span {color: #232176;} #mns03 .s5 .txtArea .subt {} #mns03 .s5 .vdoArea {width: 96rem; margin: 0 auto; margin-bottom: 11rem;} #mns03 .s5 .vdoArea video {width: 100%;} #mns03 .s5 .marqBox {height: 41.2rem;} #mns03 .s5 .txtImg {max-width: 104.8rem; margin: 0 auto; margin-top: 5rem;} @media all and (max-width: 880px){ #mns03 .s5 {padding: 15rem 0 8rem;} #mns03 .s5 .txtArea {} #mns03 .s5 .txtArea .tit {font-size: 5.5rem;} #mns03 .s5 .txtArea .subt {font-size: 2.8rem;} #mns03 .s5 .vdoArea {width: 90%; margin-bottom: 7rem;} #mns03 .s5 .vdoArea video {} #mns03 .s5 .marqBox {height: 35rem;} #mns03 .s5 .marqBox img {height: 35rem;} #mns03 .s5 .txtImg {max-width: 90%;} #mns03 .s5 .txtImg img {} } .modal_wrap {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; display: none} .modal_bg {width: 100%; height: 100%; background: rgba(0,0,0,0.5);} .modal_box {position: absolute; width: 630px; height: 580px; background: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 20px} .modal_head {display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: bold; padding-bottom: 20px} .modal_head img {width: 18px; cursor: pointer;} .modal_txt {height: 90%; overflow-y: scroll; border: 1px solid #ccc; padding: 10px} @media all and (max-width: 768px){ .modal_box {width: 90%; height: 400px; padding: 10px;} .modal_head {padding-bottom: 10px;} .modal_txt {font-size: 13px} } /* quick_menu */ .modal_inner_form { position: relative; } .form_div1 { position: relative; display: flex; justify-content: center; align-items: center; padding-top: 69px; } .close_btn1_desktop { position: absolute; display: block; top: 33px; right: 26.57px; border: none; cursor: pointer; background: transparent; padding: 0; width: auto; } .policy_underline { color: #989898; text-decoration: underline; } .close_btn1_mobile { position: absolute; display: none; top: 21.03px; right: 15.94px; border: none; cursor: pointer; background: transparent; padding: 0; width: auto; } .off, .on { /* display: flex; justify-content: center; align-items: center; */ } .submit_alarm_span_red { color: #F82C2C; } .submit_alarm { position: absolute; width: 100%; max-width: 514px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 20px; z-index: 700; background-color: white; font-weight: 600; box-sizing: border-box; } .submit_alarm > :first-child { /* height: 68px; */ } .submit_alarm > :first-child > div { /* height: 100%; */ position: relative; } .submit_alarm > :first-child > div > span { color: #1A1A1A; font-family: 'Pretendard'; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: 2px; } #quick_reserve, #quick_reserve_modal { font-family: "Pretendard"; } /* scroll hidden */ #quick_reserve { background: url('../../theme/basic/img/tail_quick_bg.svg') transparent top center / cover no-repeat; display: none; position: fixed; right: 31px; top: 42px; bottom: 50px; width: 423px; height: auto; z-index: 10000; transform: none; box-sizing: border-box; overflow-y: auto; -ms-overflow-style: none; border-radius: 2rem; } #quick_reserve::-webkit-scrollbar{ display:none; } #quick_reserve_modal { display: none; position: fixed; right: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(84,84,86,0.8); z-index: 700; /* border: solid 2px #f5f5f5; */ box-sizing: border-box; overflow-y: auto; } #quick_reserve_modal > :first-child { position: relative; width: 100%; height: 100%; } .select_below_div { position: relative; width: 100%; height: 54px; border-radius: 3px; } .form_css { position: relative; } .form_css > div { padding: 0 28px; } .form_css > :first-child { margin: 20.95px 0 0 } .form_css > :first-child > :first-child { width: 100%; padding-bottom: 27px; } .form_row { width: 100%; height: 55.6px; box-sizing: border-box; /* margin-bottom: 13px; */ } .form_row2 { margin-top: 11.12px; } .form_row:nth-child(2) { margin-bottom: 13px; } .form_row > div { display: grid; grid-template-columns: auto 1fr; align-items: center; width: 100%; height: 100%; box-sizing: border-box; background: #fff; border: solid 1px #AFAFAF; border-radius: 4.634px; } .form_row > div > div { color: #474747; display: flex; justify-content: space-between; align-items: center; width: 103px; font-family: "Noto Sans KR"; box-sizing: border-box; padding: 0 22px 0 21px; font-family: 'Noto Sans'; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } .form_row > input::placeholder { font-size: 12px; } .form_row > div input { height: 100%; border: none; padding: 0; color: #474747; font-family: 'Noto Sans' !important; padding-left: 22px; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; box-sizing: border-box; } .form_row > div > input::placeholder { font-size: 13px; } .tit { /* height: 64px; */ flex-shrink: 0; font-family: 'S-Core Dream'; text-align: center; font-size: 50px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -2.5px; } .tit > :first-child{ color: #00BFB5; } .tit > :last-child { color: #000; } .tit2 > span { color: #000; font-family: "S-Core Dream"; font-size: 22px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -1.1px; } .tit2 { display: flex; align-items: center; } .tit2::before { content: ""; /* 가상 선택자 필수 속성 */ display: inline-block; width: 6px; /* 점의 너비 */ height: 6px; /* 점의 높이 */ background-color: #00BFB5; /* 오렌지색 점 */ border-radius: 50%; /* 원형으로 만들기 */ margin-right: 12px; /* 점과 글자 사이 간격 */ } /* .tit2 > :first-child { color: #fff; } */ /* 달력 전반 */ .flatpickr-calendar { width: 100% !important; /* max-height: 344px !important; */ min-width: 100%; line-height: 24px; /* 월 이동 버튼 */ font-size: 1rem; } .flatpickr-rContainer { width: 100%; } span.flatpickr-day.flatpickr-disabled { border-right-color: transparent; } /* 연도, 월 */ .flatpickr-months { font-family: 'Pretendard' !important; height: 31px; font-size: 0.8rem; } .flatpickr-monthDropdown-months { font-family: 'Noto Sans KR' !important; } /* .flatpickr-months { height: 44px; } .flatpickr-months .flatpickr-month { height: 44px; } */ .flatpickr-month { height: 100%; } /* 요일 태그 */ .flatpickr-weekdays { height: 25px !important; } .flatpickr-weekdaycontainer { display: flex; height: 100%; align-items: center; } /* 달력 하단 */ .dayContainer { /* min-height: 275px; max-height: 275px; */ max-width: none; min-width: 100% !important; box-sizing: border-box; } .flatpickr-days { min-width: 100% !important; /* height: 275px; */ } .flatpickr-day { height: 48px !important; line-height: 48px !important; } /* 희망 시간 */ #time-select { display: grid; grid-template-columns: repeat(4, 86.80508px); grid-template-rows: repeat(auto-fit, 40.37445px); grid-column-gap: 7.44px; grid-row-gap: 13.45px; font-family: 'Noto Sans KR'; } #time-select div { text-align: center; border-radius: 3.028px; padding: 12px 22.8px 11.37px 23px; color: #AAA; background-color: #fff; cursor: pointer; border: 1px solid #F0F0F0; font-size: 15.231px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 1.523px; display: flex; justify-content: center; align-items: center; height: 40.37445px; box-sizing: border-box; } .agree_tag { margin: 25.26px 0 16.53px 0; } #agree_tag_img { cursor: pointer; } .submit_btn { border: none; background: transparent; } .submit_btn_div { display: flex; justify-content: center; align-items: center; margin: 25.32px 0 51.44px; } .submit_btn_div > .submit_btn > .submit_btn_img { width: 100%; height: 78px !important; } /* .icon-close:before { scale: 160%; opacity: 0.3; } */ #selected-date { width: 100%; border:1px solid #ddd; font-size: 1rem; padding: 0.5rem; } .select_below_icon { position: absolute; top: 23px; right: 20px; z-index: 300; } .numInputWrapper { padding-left: 2ch; } .select_option { color: #692C00 !important; font-weight: 500; } .flatpickr-current-month { font-size: 130%; } .submit_alarm_span .title, .submit_alarm_span .title span, .guide_title span { color: #242424; text-align: center; font-family: 'Noto Sans KR'; font-size: 30px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.6px; } .submit_alarm_span .title .tint, .guide_title .tint { font-weight: 700; } .submit_alarm_span span { text-align: center; font-family: 'Noto Sans KR'; color: #242424; font-size: 18px; font-style: normal; font-weight: 500; line-height: 26.541px; /* 139.689% */ letter-spacing: -0.38px; } .submit_alarm_span2 span, .guide_sub_title span { color: #242424; text-align: center; font-family: 'Noto Sans KR'; font-size: 17px; font-style: normal; font-weight: 400; line-height: 22px; letter-spacing: -0.51px; } .submit_alarm_span2 > div { margin: 0 26px 0; background-color: #F4F4F4; border-radius: 5px; display: flex; padding: 15px 0 15px 63px; align-items: center; text-align: center; gap: 18px; } .tint_red { color: #E10004 !important; font-weight: 700 !important; } .submit_alarm_span_detail { text-align: start; } .submit_alarm_span { display: flex; justify-content: start; align-items: center; padding-top: 38px; } .alert_icon { width: 32px; height: 32px; } .submit_alarm_span > :first-child { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-bottom: 24.18px; color: #242424; gap: 19.77px; } .submit_alarm_span > :first-child > div:last-child { width: 100%; /* height: 19.77px; */ } .form_css > div > div > h4 { margin-bottom: 9.78px; /* height: 30px; */ font-size: 22px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -1.1px; font-family: 'S-Core Dream'; } #footer_select_text { display: inline-block; background-color: #fff; border: 1px solid #a7a7a7; } #procedure-select { position: relative; cursor: pointer; width: 100%; height: 100%; /* padding: 0 0 0 17px; */ /* background-color: #FFF; */ color: #AAA; cursor: pointer; font-size: 20px; font-style: normal; font-weight: 400; font-family: Noto Sans KR !important; border: none; box-sizing: border-box; } .hope_div_text { margin-bottom: 26px; } .hope_div_text > div > h4 { font-family: 'S-Core Dream'; font-size: 22px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -1.1px; margin-bottom: 10.63px; } .flatpickr-prev-month, .flatpickr-next-month { padding-top: 7.480px !important; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; } .qr_desktop { display: block; } .qr_mobile { display: none; } .qr_mobile_flex { display: none; } .all_check_icon { cursor: pointer; display: grid; grid-template-columns: 25.337px 1fr; align-items: center; margin-bottom: 6px; gap: 12px; height: 36px; } .all_check_icon > span { color: #C5C5D4; font-family: 'Noto Sans KR'; font-size: 25px; font-style: normal; font-weight: 600; line-height: normal; } .check_icon { cursor: pointer; display: grid; grid-template-columns: 25.337px 1fr; align-items: center; gap: 12px; height: 38px; } .check_icon > span { color: #989898; font-size: 13.902px; font-style: normal; font-weight: 300; line-height: 38px; /* 253.333% */ letter-spacing: -0.15px; font-family: 'Noto Sans KR'; display: flex; justify-content: space-between; align-items: center; } .check_icon > span > span:last-child { padding-right: 10px; } #click_time_tag { display: none; padding: 30px 0 0px 0; } #click_time_tag > :first-child { width: fit-content; /* height: 31px; */ margin-bottom: 13px; } #click_time_tag > :first-child > span { font-family: 'Noto Sans KR'; font-size: 22px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -1.1px; } .flatpickr-monthDropdown-months, .numInputWrapper { font-family: 'Noto Sans KR'; font-style: normal; line-height: normal; } .privacy_policy { padding: 0 26px; display: none; position: fixed; top: 50%; right: 0; transform: translate(-450px, -50%); z-index: 10001; } .privacy_policy > div > div > img { border-radius: 10px; } .privacy_policy > :first-child { position: relative; } .close_btn3 { position: absolute; top: 19.43px; right: 19.68px; border: none; cursor: pointer; background: transparent; padding: 0; width: auto; } .submit_alarm_btn { display: flex; justify-content: center; align-items: center; padding: 0 47px 19px 48px; } .close_btn2 { width: 100%; padding: 18px 0; background-color: #000000; border: none; border-radius: 50px; cursor: pointer; color: #FFF; height: 63px; display: flex; justify-content: center; align-items: center; } .close_btn2 span { color: #FFF; text-align: center; font-family: 'Noto Sans KR'; font-size: 20.643px; font-style: normal; font-weight: 700; line-height: normal; } .close_btn4 { display: none; position: absolute; top: 26px; right: 24px; border: none; background: transparent; cursor: pointer; } #footer_show_list { display: none; position: absolute; flex-direction: column; justify-content: start; align-items: start; gap: 23.96px; background: #FFF; z-index: 300; padding: 10px; width: 150px; left: 50%; transform: translateX(-50%); bottom: 110%; box-sizing: border-box; border-radius: 3px; box-shadow: 0 0 3.707px 0 rgba(0, 0, 0, 0.18); } #show_list { display: none; position: absolute; flex-direction: column; justify-content: start; align-items: start; gap: 23.96px; background: #FFF; z-index: 300; padding: 0 0 20.52px; width: 100%; left: 50%; top: 59.22px; transform: translate(-49.95%, 0%); box-sizing: border-box; border-radius: 3px; box-shadow: 0 0 3.707px 0 rgba(0, 0, 0, 0.18); border-top: 0; } #footer_show_list div > span { font-family: 'Noto Sans'; font-size: 18px; font-style: normal; font-weight: 400; line-height: 12.975px; color: #AAA; } #show_list div { padding: 0 17px 0; } #show_list div:first-child { width: 100%; padding-top: 17px; border-top: 1px solid #C4C4C4; } #show_list div > span { font-family: 'Noto Sans'; font-size: 18px; font-style: normal; font-weight: 400; line-height: 12.975px; } .show_list_text.active { color: #000 !important; font-weight: 700; } .flatpickr-calendar.inline { border-radius: 4.634px !important; } #select_text { box-sizing: border-box; height: 100%; display: flex; width: 100%; padding: 0 0 0 17px; align-items: center; border: 1px solid #000; font-family: 'Noto Sans'; font-size: 18px; font-style: normal; font-weight: 400; line-height: 14px; border-radius: 4.634px; background-color: #fff; } .qr_modal_check_icon { width: 103.07px; height: 78px; position: absolute; top: -50%; left: 50%; transform: translate(-50%, 0); } .flatpickr-calendar.inline { border: 0.697px solid #C4C4C4; box-shadow: none; border-radius: 0; } .flatpickr-calendar:before, .flatpickr-calendar:after { display: none !important; } .flatpickr-current-month { padding-top: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 1.4rem !important; } .flatpickr-current-month > :first-child, .flatpickr-current-month > :last-child { width: 20% !important; } /* 안내문구 */ #guide_modal { display: none; justify-content: center; align-items: center; position: fixed; right: 0; top: 0; width: 100%; height: 100vh; background: rgba(34, 34, 34, 0.55); z-index: 700; /* border: solid 2px #f5f5f5; */ box-sizing: border-box; overflow-y: auto; } #guide_modal > div { position: relative; width: 100%; height: 100%; } #guide_modal > div > div { position: absolute; width: 100%; max-width: 527px; padding: 29px 57px 23px 55px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 20px; z-index: 700; background-color: white; font-weight: 600; box-sizing: border-box; box-shadow: 2.004px 2.004px 8.017px 0 rgba(0, 0, 0, 0.25); } .guide_title, .guide_sub_title { display: flex; justify-content: center; } #guide_modal .guide_title { margin-bottom: 11px; } #guide_modal .send_call_div { padding: 14px 33px 14px 39px; background-color: #F6F6F6; border-radius: 5px; margin: 16px 0 19px; } #guide_modal .send_call_div > div { width: 100%; display: flex; justify-content: space-between; } #guide_modal .send_call_div > div > div:first-child { padding-right: 29px; border-right: 1px solid #BEBEBE; } #guide_modal .send_call_div > div > div { display: flex; align-items: center; } #guide_modal .send_call_div > div > div > span { color: #727272; text-align: center; font-family: Noto Sans KR; font-size: 20px; font-style: normal; font-weight: 400; line-height: 26.541px; /* 132.705% */ letter-spacing: -0.4px; } #guide_modal .send_call_div > div > div > img { width: 23px; margin-left: 17px; cursor: pointer; } .guide_modal_btn_div { display: flex; justify-content: center; gap: 7px; } .guide_modal_btn_div > button { width: 204px; padding: 18px 0; border-radius: 10px; background-color: #fff; border: 1px solid #CDCDCD; cursor: pointer; } .guide_modal_btn_div > button >span { text-align: center; font-family: Noto Sans KR; color: #000; font-size: 20.643px; font-style: normal; font-weight: 600; line-height: normal; } .guide_modal_btn_div > .send_submit_btn { background-color: #15A7A7; } .guide_modal_btn_div > .send_submit_btn > span { color: #fff; font-weight: 800; } .qr_background { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: none; background-color: #bfbfc3; } #footer_quick_reserve { position: fixed; bottom: 0%; width: 100%; height: 80px; padding: 12px 0; box-sizing: border-box; background-color: #36FEF3; display: flex; justify-content: center; align-items: center; z-index: 9999; } #footer_quick_reserve > form { display: flex; justify-content: center; align-items: center; max-width: 1290px; width: 1290px; } #footer_quick_reserve > form > :nth-child(1) { color: #000; text-align: center; font-family: "S-Core Dream"; font-size: 30px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -1.8px; margin-right: 26px; } #footer_quick_reserve > form > :nth-child(2) { position: relative; margin-right: 10px; } .footer_select_below_icon { top: 50% !important; transform: translateY(-50%); right: 10px !important; } #footer_quick_reserve > form > :nth-child(2) #footer_select_text { width: 150px; height: 44px; padding: 12px 0 12px 15px; color: #000; font-family: SUIT; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.8px; } #footer_quick_reserve > form > :nth-child(3){ display: flex; gap: 10px; margin-right: 15px } #footer_quick_reserve > form > :nth-child(3) > input::placeholder { color: #AFAFAF; } #footer_quick_reserve > form > :nth-child(3) > input{ width: 240px; height: 44px; padding: 12px 0 12px 15px; color: #000; font-family: SUIT; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.8px; } #footer_quick_reserve > form > :nth-child(4){ display: flex; gap: 5px; margin-right: 23px } #footer_quick_reserve > form > :nth-child(4) > p{ color: #000; text-align: center; font-family: SUIT; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.8px; } #footer_quick_reserve > form > :nth-child(4) > p > a { cursor: pointer; } #footer_quick_reserve > form > :nth-child(5){ border-radius: 4px; background: #000; padding: 6px 40px; display: flex; justify-content: center; align-items: center; width: 198px; height: 100%; } #footer_quick_reserve > form > :nth-child(5) > span { color: #FFF; text-align: center; font-family: "S-Core Dream"; font-size: 32px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -1.6px; } @media screen and (max-width: 1024px) { #footer_quick_reserve { display: none; } #footer_quick_reserve_mobile { position: fixed; bottom: 0%; width: 100%; height: 55px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; z-index: 9999; } #footer_quick_reserve_mobile > div { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 15px 0; width: 50%; } #footer_quick_reserve_mobile > div:first-child { background-color: #36FEF3; } #footer_quick_reserve_mobile > div:last-child { background-color: #000; } #footer_quick_reserve_mobile > div > span{ color: #000; font-family: "S-Core Dream"; font-size: 17.5px; font-style: normal; font-weight: 200; line-height: normal; letter-spacing: -0.175px; } #footer_quick_reserve_mobile > div:last-child > span { color: #fff; } #newFloat { display: flex; flex-direction: column; gap: 7.16px; right: 11px; } #newFloat li { max-width: 50px; max-height: 50px; } #newFloat li > div, #newFloat li > a { width: 50px; height: 50px; } #newFloat li:first-child, #newFloat li:nth-child(2) { display: none; } #newFloat li:nth-child(3) span { color: #371E1F; } #newFloat li:nth-child(3), #newFloat li:nth-child(4) { border-radius: 6.353px; } #newFloat li > div, #newFloat li > a { min-width: 50px; min-height: 50px; } #newFloat li img { width: 24px; } #newFloat li span { color: #FFF; font-family: "Noto Sans KR"; font-size: 8.894px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.445px; } } @media screen and (max-width: 767px) { #quick_reserve input::placeholder { font-size: 7.284px; } .qr_background { display: none; } .qr_modal_check_icon { width: 55.17px; height: 41.75px; } .close_btn1_mobile { top: 21.03px; right: 15.94px; } .alert_icon { width: 19px; height: 19px; } .submit_alarm { position: absolute; width: 100%; max-width: 244px; box-sizing: border-box; border-radius: 7px; z-index: 700; background-color: #FFF; box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.25); } .submit_alarm > :first-child { /* height: 36px; */ } .submit_alarm > :first-child > div > span { font-size: 15px; letter-spacing: 1.5px; } #quick_reserve { top: 28px; bottom: 20px; width: calc(100% - 40px); left: 50%; transform: translate(-50%,0); } #quick_reserve_modal { padding: 0 20px; background-color: rgba(84, 84, 86, 0.65); height: 100vh; z-index: 10000; } .select_below_div { position: relative; width: 100%; height: 37.658px; } .form_css > :first-child { margin: 13px 0 0 } .form_css > :first-child > :first-child { padding-bottom: 16px; } .select_below_icon { top: 0.5rem; font-size: 0.75rem; } .flatpickr-prev-month { padding-top: 5px !important; } .flatpickr-current-month { font-size: 12px !important; } .flatpickr-next-month { padding-top: 5px !important; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 10px !important; height: 10px !important; } .form_div1 { padding-top: 35px; } .tit { font-size: 30.352px; flex-shrink: 0; letter-spacing: -1.518px; } .form_css > div { padding: 0 18px 0; } .form_css > div > div > h4 { font-size: 13.355px; letter-spacing: -0.668px; margin-bottom: 6px; } #procedure-select { font-size: 11px; /* padding: 0 0 0 11px; */ } .select_below_icon { top: 15px; right: 12px; width: 12px; } .hope_div_text { margin-bottom: 15.09px; } .hope_div_text > div > h4 { font-size: 13.355px; letter-spacing: -0.668px; margin-bottom: 6px; } /* 달력 전반 */ .flatpickr-calendar { max-height: 217px !important; line-height: 24px; /* 월 이동 버튼 */ font-size: 10px !important; } .flatpickr-days { width: 100% !important; /* height: 170px; */ } .flatpickr-day { height: 29px !important; line-height: 29px !important; } .flatpickr-months { height: 23px; } .flatpickr-months .flatpickr-month { height: 23px; } /* 요일 태그 */ .flatpickr-weekdays { height: 20px !important; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { padding-top: 7px; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; } .agree_tag { margin: 13.58px 0 9.71px; } .qr_desktop { display: none; } .qr_mobile { display: block; } .qr_mobile_flex { display: flex; flex-direction: column; align-items: center; } .tit2::before { width: 3px; height: 3px; margin-right: 8px; } .all_check_icon { grid-template-columns: 24.52px 1fr; margin-bottom: 2.5px; gap: 6.61px; height: auto; } .check_icon { grid-template-columns: 24.52px 1fr; gap: 8.37px; height: auto; } .all_check_icon > span { font-size: 15.176px; line-height: -0.759px; } .check_icon > span { font-size: 8.439px; line-height: 21.379px; letter-spacing: -0.084px; } .check_icon > span > span:last-child { padding-right: 7.36px; } .form_row { height: 46.026px; } .form_row:nth-child(2) { margin-bottom: 6.07px; } .form_row:nth-child(3) { margin-top: 6.07px; margin-bottom: 9px; } /* .form_row > div { grid-template-columns: 1fr; align-items: center; width: 100%; background: #F9F9F9; border: 0.5px solid #AAA; border-radius: 3px; } */ .form_row > div input { font-size: 7.284px; } .form_row > div > input::placeholder { font-size: 10.927px } .form_row > div > div { width: 48px; padding: 0 10px 0 15px; font-size: 10.927px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.146px; } .privacy_policy > div > div > img { border-radius: 6.936px; } .submit_btn { padding: 0; } .submit_btn_div { padding-bottom: 25.91px; } .submit_btn_div > .submit_btn > .submit_btn_img { width: 100%; height: auto !important; } #click_time_tag { display: none; padding-top: 14.83px; padding-bottom: 0; } #click_time_tag > :first-child { /* height: 21.63px; */ margin-bottom: 7.94px; } #click_time_tag > :first-child > span { font-size: 14.635px; letter-spacing: -0.732px; } #time-select { display: grid; grid-template-columns: repeat(10, 62.171px); grid-template-rows: repeat(auto-fit, 32.034px); grid-column-gap: 7.84px; grid-row-gap: 5.97px; } #time-select div { border-radius: 3px; padding: 7.98px 14.44px 7.86px; border: solid 0.544px #9F9F9F; font-size: 9.313px; letter-spacing: 0.559px; height: 26.85px; box-sizing: border-box; } .privacy_policy { padding: 0; justify-content: center; align-items: center; bottom: 50%; width: 77%; left: 50%; transform: translate(-50%, -50%); } .close_btn3 { top: 11.79px; right: 12.02px; height: auto; } .close_btn2 { padding: 10px 0; border-radius: 25.142px; height: auto; } .close_btn2 span { font-size: 15px; font-style: normal; font-weight: 700; line-height: normal; } .close_btn4 { display: none; } .submit_alarm_span { padding-top: 22.06px; } .submit_alarm_span > :first-child { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-bottom: 10.36px; gap: 14.81px; } .submit_alarm_span > :first-child > div:first-child { height: 21px; } .submit_alarm_span > :first-child > div:last-child { /* height: 34px; */ } .submit_alarm_span span, .submit_alarm_span2 span { font-size: 11px; font-style: normal; font-weight: 400; line-height: 16px; /* 145.455% */ letter-spacing: -0.33px; } .submit_alarm_span2 > div { padding: 12px 0 12px 19px; gap: 15px; margin: 0 15px; } /* .submit_alarm_span2 span { line-height: 132%; letter-spacing: -0.3px; } */ .submit_alarm_span .title, .submit_alarm_span .title span, .guide_title span { font-size: 18px; letter-spacing: -0.36px; } .submit_alarm_btn { display: flex; justify-content: center; align-items: center; padding: 0 23.77px 13.44px 24px; } #show_list { gap: 15.57px; padding: 0 0 10px; transform: translate(-50%, 25%); top: -4px; width: 99%; } #show_list div:first-child { width: 100%; padding-top: 11.85px; border-top: 1px solid #C4C4C4; } #show_list div > span { font-family: "Noto Sans KR"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 14px; } #select_text { font-size: 12px; font-style: normal; font-weight: 700; line-height: 8.626px; /* 71.886% */ padding: 0 0 0 11px; } /* 안내 문구 */ #guide_modal > div > div { max-width: 265px; padding: 19.77px 26px 16.27px 26px; border-radius: 10.057px; box-shadow: 1.008px 1.008px 4.031px 0 rgba(0, 0, 0, 0.25); } #guide_modal .guide_title { margin-bottom: 6.89px; } #guide_modal .send_call_div { padding: 13.49px 18.55px 12.37px 17.55px; background-color: #F6F6F6; border-radius: 5px; margin: 4.82px 0 9.58px; } #guide_modal .send_call_div > div { width: 100%; display: flex; justify-content: space-between; } #guide_modal .send_call_div > div > div:first-child { padding-right: 12px; border-right: 1px solid #BEBEBE; } #guide_modal .send_call_div > div > div { display: flex; align-items: center; } #guide_modal .send_call_div > div > div > span { font-size: 11.5px; font-weight: 400; line-height: 13.302px; /* 115.674% */ letter-spacing: -0.23px; } #guide_modal .send_call_div > div > div > img { width: 15.904px; margin-left: 6.55px; cursor: pointer; } .guide_modal_btn_div > button { width: 103px; padding: 11px 0 9.73px; border-radius: 5.028px; border: 0.503px solid #CDCDCD; } .guide_modal_btn_div > button >span { font-size: 11px; } .guide_sub_title span { font-size: 9.554px; font-style: normal; font-weight: 500; line-height: 13.346px; /* 139.689% */ letter-spacing: -0.191px; } .close_btn1_desktop { display: none; } .close_btn1_mobile { display: block; } .tit2 > span { color: #000; font-size: 13.355px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.668px; } .flatpickr-current-month > :first-child, .flatpickr-current-month > :last-child { width: 40% !important; } .flatpickr-current-month { height: 23px !important; } } @media screen and (max-width: 430px) { #time-select { display: grid; grid-template-columns: repeat(5, 62.171px); grid-template-rows: repeat(auto-fit, 32.034px); grid-column-gap: 4.79px; grid-row-gap: 8.4px; } } @media screen and (max-width: 375px) { #time-select { display: grid; grid-template-columns: repeat(4, 62.171px); grid-template-rows: repeat(auto-fit, 32.034px); } } @media screen and (max-width: 320px) { #time-select { grid-template-columns: repeat(4, 57.74px); grid-template-rows: repeat(auto-fit, 26.85px); } }