/********* 공통 **********/ #header {} #header .pcHeader {} #header .pcHeader .inner {padding: 2.2rem 6rem 2.2rem 14.5rem; background: rgba(255,255,255,0.8)} #header .pcHeader .logo {} #header .pcHeader .headTxt1 {margin-left: 1rem;} #header .pcHeader .headTxt2 {margin-left: auto} #header .pcHeader .headCall {margin-left: 2.6rem;} #header .pcHeader .headCall a {max-width: 24.2rem; display: block;} #header .pcHeader .menuTxt {margin: 0 11.3rem 0 3.7rem;} #header .pcHeader .headMenu {} #header .headWrap {position: fixed; width: 100%; height: 100%; background: #fff; left: 0; top: 0; z-index: 99999; display: none;} #header .headWrap .topArea {padding: 2.2rem 6rem 2.2rem 14.5rem; z-index: 1} #header .headWrap .topArea .logo {} #header .headWrap .topArea .close {margin-left: auto} #header .headWrap .contArea {margin-top: 10%; z-index: 1; gap: 2.1rem; justify-content: center; align-items: flex-start;} #header .headWrap .gnbArea {justify-content: center; gap: 3.4rem;} #header .headWrap .gnbArea .gnb {} #header .headWrap .gnbArea .gnb .tit {padding-bottom: 1.2rem;} #header .headWrap .gnbArea .lnb {} #header .headWrap .gnbArea .lnb li {margin-top: 1rem;} #header .headWrap .gnbArea .lnb li a {transition: 0.1s;} #header .headWrap .gnbArea .lnb li a:hover {font-weight: 500} #header .headWrap .login {} #header .headWrap .login li {} #header .headWrap .login li + li {padding-left: 1.4rem; margin-left: 1.4rem; border-left: 1px solid var(--fcp)} #header .headWrap .login li a {} #header .headWrap .bgImg {height: 87%; right: 4%;} #header .headWrap .bgImg img {height: 100%;} @media all and (max-width: 880px){ #header .moHeader {z-index: 9999; background: rgba(255,255,255,0.8)} #header .moHeader.fixed {background: #fff;} #header .moHeader .moHead {justify-content: space-between; align-items: center; max-width: var(--innerMo); margin: 0 auto; padding: 1rem 0;} #header .moHeader .moHead .logo {width: 15rem;} #header .moHeader .moHead .menuBtn {width: 2.2rem;} #header .moHeader .moMenuWrap {position: fixed; width: 100%; height: 100%; top: 0; display: none;} #header .moHeader .moMenuWrap .menuBg {width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top:0; left: 0;} #header .moHeader .menuBox {width: 85%; height: 100%; margin-left: auto; background: #fff; right: -100%; transition: 1s;} #header .moHeader .menuBox .menuLogo {padding: 3rem 2rem;} #header .moHeader .menuBox .menuLogo img {max-width: 15rem; } #header .moHeader .menuBox .menuLogin {display: flex; font-size: 1.4rem; gap: 2rem; padding: 0 2rem;} #header .moHeader .menuBox .menuLogin li {} #header .moHeader .menuBox .menuLogin li + li::before {content: ''; display: block; position: absolute; width: 1px; height: 60%; background: #7d7d7d; left: -1rem; top: 50%; transform: translateY(-50%);} #header .moHeader .menuBox .menuLogin li a {} #header .moHeader .menuGnb {padding: 3rem 2rem;} #header .moHeader .gnbLst {padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid #eee} #header .moHeader .gnbLst + .gnbLst {} #header .moHeader .gnbLst .gnbName {font-size: 1.5rem; display: block;} #header .moHeader .gnbLst .gnbName:after {content: ''; display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 15px; height: 15px; background: url('../img/s16_down_arr.svg') center/contain no-repeat; transition: 0.2s} #header .moHeader .gnbLst .gnbName.on:after {transform: translateY(-50%) rotate(180deg);} #header .moHeader .menuLnb {display: none; margin: 0.5rem 0 0;} #header .moHeader .menuLnb .lnbLst {} #header .moHeader .menuLnb .lnbLst a {display: block; font-size: 1.4rem; padding-top: 1.2rem; color: #5a5a5a;} #header .menuClose {width: 2rem; height: 2rem; top: 1.6rem; right: 1.6rem;} } #float {right: 0; z-index: 99999; bottom: 17%; display: flex; flex-direction: column; align-items: center;} #float .lst {padding: 4.8rem 0.8rem; border-radius: 5.2rem 0 0 5.2rem; background: #FF7F50} #float .lst li {opacity: 0.9;} #float .lst li a {} #float .lst li img {max-width: 3.2rem;} #float .lst li .txt {padding-top: 5px} #float .lst li + li {margin-top: 3rem;} #float .lst li:hover {opacity: 1;} #float .lst li:hover .txt {font-weight: 600} #float .lst_ico {visibility: hidden;} #float .lst_ico.on {visibility: visible;;} #float .top {margin-top: 1.6rem; transform: scale(0.8);} #float .top img {filter: drop-shadow(0.5rem 0.5rem 1rem rgba(0,0,0,0.2));} @media all and (max-width: 880px){ #float {bottom: 8%} #float .lst {border-radius: 1.2rem 0 0 1.2rem; padding: 1.6rem 1rem; display: block; position: relative;} #float .lst li + li {margin-top: 2rem;} #float .lst li img {width: 2.8rem;} #float .top {transform: none; max-width: 4rem;} #float .top img {} } #footer {background: #222527} #footer .inner {padding: 6.2rem 0; gap: 7.2rem; max-width: 139.6rem;} #footer .leftCont {} #footer .leftCont .ftlogo {margin-bottom: 2.4rem;} #footer .leftCont .ftbtn {} #footer .rightCont {} #footer .rightCont .infoLst {color: #72787F; max-width: 45rem; gap: 1.8rem 4rem} #footer .rightCont .infoLst li {} @media all and (max-width: 880px){ #footer {} #footer .inner {flex-direction: column; max-width: var(--innerMo); align-items: flex-start; gap: 2rem; padding: 3rem 0 5rem;} #footer .leftCont {} #footer .leftCont .ftlogo {} #footer .leftCont .ftbtn {} #footer .rightCont {} #footer .rightCont .infoLst {font-size: 1.4rem; gap: 1rem 2rem;} #footer .rightCont .infoLst li {} } /** applyBar *****************/ #applyBar {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; padding: 3rem 0; background: #FF7F50; display: flex; justify-content: center; align-items: center; z-index: 99999; transition: transform .35s ease; transform: translate(-50%, 100%);} #applyBar .barBtn {font-size: 16px; font-weight: bold; background: #FF7F50; color: #fff; display: flex; align-items: center; position: absolute; bottom: 99%; padding: 11px 34px; gap: 10px; border-radius: 20px 20px 0 0; cursor: pointer} #applyBar .barBtn img {transition: 0.3s;} #applyBar .formWrap {display: flex; gap: 4.5rem;} #applyBar .formWrap .inputArea {display: flex; flex-wrap: wrap; gap: 40px; align-items: center;} #applyBar .formWrap .inputArea .list {display: flex; gap: 10px;} #applyBar .formWrap .inputArea .list li {width: 26rem;} #applyBar .formWrap .inputArea .list input {display: block; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; font-size: 1.8rem; border: none; background: #fff; border-radius: 10rem; font-family: inherit; height: 4.8rem;} #applyBar .formWrap .inputArea .list input:focus {outline: none; border: 0 !important; box-shadow: none;} #applyBar .formWrap .inputArea .list input::placeholder {color: #C9CDD2} #applyBar .formWrap .inputArea .list select {display: block; width: 100%; height: auto; padding: 13px 10px; box-sizing: border-box; font-size: 1.8rem; border: none; border-radius: 10rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff url('../img/apply_ic_slide.svg') right 10% center no-repeat; font-family: inherit; color: #696969; height: 4.8rem;} #applyBar .formWrap .inputArea .list select:focus {outline: none; border: 0 !important; box-shadow: none;} #applyBar .formWrap .inputArea .check {display: flex; align-items: center; color: #fff; font-size: 1.8rem;} #applyBar .formWrap .inputArea .check input {background: #fff; border: none; width: 1.5rem; height: 1.5rem; margin-top: -3px; margin-right: 6px;} #applyBar .formWrap .inputArea .check label {font-family: inherit;} #applyBar .formWrap .inputArea .check a {margin-left: 6px; color: #fff;} #applyBar .formWrap .applyBtn {flex-shrink: 0; width: 24.6rem; display: flex; align-items: center; justify-content: center; background: #fff; height: 4.8rem; border-radius: 2.4rem; font-family: inherit; font-weight: bold; font-size: 2.4rem;} #applyBar .formWrap .applyBtn i {display: none; font-style: normal;} #applyBar .formWrap .applyBtn.on {background: #000;color: #e5865c} #applyBar .callWrap {color: #fff;} #applyBar .callWrap .txt {margin-bottom: 3px; font-size: 16px;} #applyBar .callWrap .tit {font-size: 32px; font-weight: 800;} #applyBar.open {transform: translate(-50%, 0);} @media all and (max-width: 880px) { #applyBar {width: 100%; padding: 4.7rem 3.9rem 4.1rem; box-sizing: border-box; border-radius: 0; z-index: 99999; transform: translate(-50%, 100%); border-radius: 2rem 2rem 0 0;} #applyBar .barBtn {font-size: 1.8rem; gap: 0.2rem; font-weight: 500;} #applyBar .logo {display: none;} #applyBar .formWrap {flex-wrap: wrap; gap: 2.5rem; margin-right: 0;} #applyBar .formWrap .inputArea {width: 100%; flex-wrap: wrap; row-gap: 10px;} #applyBar .formWrap .inputArea .list {flex-wrap: wrap; gap: 1.5rem; margin-bottom: 0;} #applyBar .formWrap .inputArea .list li {width: 100%;} #applyBar .formWrap .inputArea .list input {font-size: 16px; max-width: 26rem; margin: 0 auto;} #applyBar .formWrap .inputArea .list select {font-size: 16px !important; background-position: right 5% center; padding: 10px; max-width: 26rem; margin: 0 auto;} #applyBar .formWrap .inputArea .check {font-size: 18px; justify-content: center; width: 100%} #applyBar .formWrap .inputArea .check input {width: 14px; height: 14px; margin-right: 4px;} #applyBar .formWrap .inputArea .check label {font-size: 1.5rem} #applyBar .formWrap .inputArea .check a {font-size: 1.5rem; margin-left: 2px;} #applyBar .formWrap .applyBtn {height: auto; font-size: 24px; padding: 12px 0; border-radius: 5px; font-weight: 800; width: 100%; margin: 0 auto;} #applyBar .formWrap .applyBtn i {display: inline;} #applyBar .callWrap {display: none;} } #applyFloat {position: fixed; z-index: 999; bottom: 3%; right: 6%; background: #fff; border-radius: 2.7rem; overflow: hidden; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16); width: 26.4rem;} #applyFloat .title {background: #FF7F50; padding: 2.6rem 0 2.2rem; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16);} #applyFloat .content {padding: 1.9rem; font-size: 1.6rem} #applyFloat .content .txt {color: #222527; padding-bottom: 1.4rem; line-height: 2.2rem;} #applyFloat .content .list {display: flex; flex-direction: column; gap: 0.8rem} #applyFloat .content .list li {} #applyFloat .content .list li input {height: 3.6rem; border: 1px solid #BDBDBD; box-shadow: none; border-radius: 0; width: 100%;} #applyFloat .content .list li select {height: 3.6rem; border: 1px solid #BDBDBD; border-radius: 0; width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff url('../img/apply_ic_slide.svg') right 6% center no-repeat; font-family: inherit;} #applyFloat .content .check {display: flex; align-items: center; margin-top: 1.1rem; gap: 0.4rem;} #applyFloat .content .check input {} #applyFloat .content .check label {color: #BDBDBD} #applyFloat .applyBtn {padding: 2.4rem 0; background: #FF7F50; width: 100%; line-height: 1.2;} @media all and (max-width: 880px) { #applyFloat {display: none} #applyFloat .title {} #applyFloat .content {} #applyFloat .content .txt {} #applyFloat .content .list {} #applyFloat .content .list li {} #applyFloat .content .list li input {} #applyFloat .content .list li select {} #applyFloat .content .check {} #applyFloat .content .check input {} #applyFloat .content .check label {} #applyFloat .applyBtn {} } /********* 메인 **********/ #main {} #main .blinking {animation: blink 0.6s infinite alternate;} #main .actBefore {bottom: -3rem; opacity: 0; transition: 1s;} #main .actAfter {bottom: 0; opacity: 1;} @keyframes blink { from { opacity: 0; } to { opacity: 1; } } @media all and (max-width: 880px){ #main {overflow: hidden;} #main .actBefore {bottom: 0; opacity: 1;} } #main .s1 {} #main .s1 .cont {max-width: 177rem; margin: 0 auto; padding-top: 7rem;} #main .s1 .panel {border-radius: 4rem; overflow: hidden; height: 80vh} #main .s1 .panel img {height: 100%; object-fit: cover} #main .s1 .panel video {width: 100%; height: 100%; object-fit: cover;width: 100%;} @media all and (max-width: 880px){ #main .s1 {} #main .s1 .cont {padding: 6rem 0 3rem; max-width: var(--innerMo);} #main .s1 .panel {height: 60vh; border-radius: 1.6rem; } } #main .s2 {background: url('../img/s2_bg.jpg') center/cover no-repeat;} #main .s2 .cont {} #main .s2 .txtArea {} #main .s2 .txtArea .tit {font-size: 5.8rem; padding-bottom: 4rem;} #main .s2 .txtArea .wrt {line-height: 3.8rem;} #main .s2 .lstArea {align-items: baseline;} #main .s2 .lstArea li {padding: 2.2rem 0; width: 41.9rem; border-radius: 4rem; background: #fff; text-align: center;} #main .s2 .lstArea li + li {margin-top: 2.6rem;} #main .s2 .lstArea li:nth-child(2) {color: #fff; font-weight: bold; background: var(--fcp); width: 51.6rem;} @media all and (max-width: 880px){ #main .s2 {} #main .s2 .cont {flex-direction: column-reverse; max-width: var(--innerMo); padding: 5rem 0; gap: 3rem; align-items: baseline;} #main .s2 .txtArea {} #main .s2 .txtArea .tit {font-size: 2.6rem; padding-bottom: 2rem; font-weight: bold;} #main .s2 .txtArea .wrt {font-size: 1.6rem; line-height: 2.6rem;} #main .s2 .lstArea {font-size: 1.8rem; width: 100%;} #main .s2 .lstArea li {width: 70vw; padding: 1.6rem 0;} #main .s2 .lstArea li + li {margin-top: 1.2rem;} #main .s2 .lstArea li:nth-child(2) {width: 100%;} } #main .s3 {background: url('../img/s3_bg.jpg') center/cover no-repeat;} #main .s3 .cont {} #main .s3 .subt {} #main .s3 .tit {line-height: 6.2rem; padding: 2.6rem 0 7.8rem;} #main .s3 .lst {gap: 7.5rem;} #main .s3 .lst li {gap: 1.9rem} #main .s3 .lst .ico {} #main .s3 .lst .txt {} @media all and (max-width: 880px){ #main .s3 {} #main .s3 .cont {max-width: var(--innerMo); padding: 5rem 0; text-align: center;} #main .s3 .subt {font-size: 2rem;} #main .s3 .tit {font-size: 2.4rem; line-height: 3.6rem; padding: 2.6rem 0 4.8rem} #main .s3 .lst {flex-wrap: wrap; gap: 2rem 0; justify-content: center;} #main .s3 .lst li {width: 50%;} #main .s3 .lst .ico {width: 10rem;} #main .s3 .lst .txt {text-align: center; font-size: 1.6rem;} } #main .s4 {} #main .s4 .cont {} #main .s4 .titArea {} #main .s4 .titArea .subt {} #main .s4 .titArea .tit {padding: 2rem 0 3rem;} #main .s4 .titArea .anch {gap: 0.5rem;} #main .s4 .panArea {} #main .s4 .panArea .imgArea {width: 50%} #main .s4 .panArea .txtArea {width: 50%; padding-left: 13rem; line-height: 3rem;} #main .s4 .panArea .txtArea .name {gap: 0.8rem; bottom: -12%; left: 50%;} @media all and (max-width: 880px){ #main .s4 {} #main .s4 .cont {padding: 5rem 0;} #main .s4 .titArea {} #main .s4 .titArea .subt {font-size: 1.8rem;} #main .s4 .titArea .tit {font-size: 2.8rem; padding: 1.2rem 0 2rem; line-height: 3.8rem;} #main .s4 .titArea .anch {font-size: 1.6rem;} #main .s4 .titArea .anch img {width: 2rem} #main .s4 .panArea {flex-direction: column; margin-top: 4rem; gap: 2rem;} #main .s4 .panArea .imgArea {width: 100%} #main .s4 .panArea .txtArea {width: 100%; padding: 0; font-size: 1.4rem; line-height: 2.4rem; max-width: var(--innerMo); margin: 0 auto} #main .s4 .panArea .txtArea .name {width: 100%; position: relative;} #main .s4 .panArea .txtArea .name img {width: 10rem} } #main .s5 {background: url('../img/s5_bg.jpg') center/cover no-repeat;} #main .s5 .cont {} #main .s5 .titArea {margin-bottom: 13rem;} #main .s5 .titArea .tit {line-height: 8rem;} #main .s5 .titArea .wrt {line-height: 2.6rem; padding: 5rem 0 3rem;} #main .s5 .titArea .anch {color: #fff; gap: 0.5rem;} #main .s5 .lstArea {gap: 13.5rem; justify-content: center} #main .s5 .lstArea li {gap: 2.4rem;} #main .s5 .lstArea li span {text-align: center;} @media all and (max-width: 880px){ #main .s5 {} #main .s5 .cont {max-width: var(--innerMo); padding: 5rem 0;} #main .s5 .titArea {margin-bottom: 6rem;} #main .s5 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem;} #main .s5 .titArea .wrt {font-size: 1.4rem; padding: 2.4rem 0; line-height: 2.2rem;} #main .s5 .titArea .anch {font-size: 1.6rem;} #main .s5 .titArea .anch img {width: 2rem} #main .s5 .lstArea {flex-wrap: wrap; gap: 2rem 0;} #main .s5 .lstArea li {width: 50%; gap: 1rem; font-size: 1.4rem;} #main .s5 .lstArea li img {width: 12rem} } #main .s6 {background: url('../img/s6_bg.jpg') center/cover no-repeat;} #main .s6 .cont {padding-bottom: 20%;} #main .s6 .titArea {} #main .s6 .titArea .tit {line-height: 8rem;} #main .s6 .titArea .wrt {padding: 3rem 0; line-height: 2.6rem;} #main .s6 .titArea .anch {color: #fff; gap: 0.5rem;} @media all and (max-width: 880px){ #main .s6 {} #main .s6 .cont {max-width: var(--innerMo); padding: 15rem 0;} #main .s6 .titArea {} #main .s6 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem;} #main .s6 .titArea .wrt {font-size: 1.4rem; padding: 2.4rem 0; line-height: 2.2rem;} #main .s6 .titArea .anch {font-size: 1.6rem;} #main .s6 .titArea .anch img {width: 2rem} } #main .s7 {background: url('../img/s7_bg.jpg') center/cover no-repeat;} #main .s7 .cont {padding-bottom: 20%;} #main .s7 .titArea {} #main .s7 .titArea .subt {letter-spacing: 0.3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--fcp); padding: 0 1.2rem 0.8rem;} #main .s7 .titArea .tit {line-height: 7.6rem; padding-bottom: 3rem;} #main .s7 .titArea .anch {color: #fff; gap: 0.5rem;} @media all and (max-width: 880px){ #main .s7 {} #main .s7 .cont {max-width: var(--innerMo); padding: 15rem 0;} #main .s7 .titArea {} #main .s7 .titArea .subt {font-size: 1.8rem; margin-bottom: 2rem;} #main .s7 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem;} #main .s7 .titArea .anch {font-size: 1.6rem;} #main .s7 .titArea .anch img {width: 2rem} } #main .s8 {background: url('../img/s8_bg.jpg') center/cover no-repeat;} #main .s8 .cont {} #main .s8 .titArea {} #main .s8 .titArea .subt {letter-spacing: 0.3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--fcp); padding: 0 1.2rem 1.5rem;} #main .s8 .titArea .tit {line-height: 7.6rem; padding-bottom: 3rem;} #main .s8 .titArea .anch {color: #fff; gap: 0.5rem;} @media all and (max-width: 880px){ #main .s8 {} #main .s8 .cont {max-width: var(--innerMo); padding: 15rem 0;} #main .s8 .titArea {} #main .s8 .titArea .subt {font-size: 1.8rem; margin-bottom: 2rem;} #main .s8 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem;} #main .s8 .titArea .anch {font-size: 1.6rem;} #main .s8 .titArea .anch img {width: 2rem} } #main .s9 {background: url('../img/s9_bg.jpg') center/cover no-repeat;} #main .s9 .cont {} #main .s9 .cirArea {width: max-content; margin-left: auto;} #main .s9 .cirArea .txt {font-size: 1.7rem; color: #fff; letter-spacing: -0.054em; display: block; text-align: right; padding-top: 1.9rem;} #main .s9 .txtArea {} #main .s9 .txtArea .subt {letter-spacing: 0.3rem; border-bottom: 1px solid var(--fcp); padding: 0 0 0.8rem;} #main .s9 .txtArea .tit {line-height: 7.6rem; padding: 3rem 0;} #main .s9 .txtArea .prg {gap: 3.5rem;} #main .s9 .txtArea .prg .wrt {line-height: 2.6rem;} #main .s9 .txtArea .prg .anch {color: #fff; gap: 0.5rem;} @media all and (max-width: 880px){ #main .s9 {} #main .s9 .cont {max-width: var(--innerMo); padding: 5rem 0; display: flex; flex-direction: column-reverse; gap: 4rem;} #main .s9 .cirArea {width: 100%} #main .s9 .cirArea .txt {text-align: center; font-size: 1.4rem; letter-spacing: -0.03em;} #main .s9 .txtArea {margin: 0;} #main .s9 .txtArea .subt {font-size: 1.8rem;} #main .s9 .txtArea .tit {font-size: 2.8rem; line-height: 3.8rem;} #main .s9 .txtArea .prg {flex-direction: column; align-items: baseline; gap: 2rem;} #main .s9 .txtArea .prg .wrt {font-size: 1.4rem; line-height: 2.2rem;} #main .s9 .txtArea .prg .anch {font-size: 1.6rem;} #main .s9 .txtArea .prg .anch img {width: 2rem} } #main .s10 {background: url('../img/s10_bg.jpg') center/cover no-repeat;} #main .s10 .cont {padding-bottom: 10%;} #main .s10 .titArea {} #main .s10 .titArea .subt {letter-spacing: 0.3rem; border-bottom: 1px solid var(--fcp); padding: 0 0 0.8rem;} #main .s10 .titArea .tit {padding: 3rem 0; line-height: 7.6rem;} #main .s10 .titArea .wrt {margin-bottom: 3rem;} #main .s10 .titArea .anch {gap: 0.5rem;} @media all and (max-width: 880px){ #main .s10 {} #main .s10 .cont {max-width: var(--innerMo); padding: 5rem 0 25rem;} #main .s10 .titArea {} #main .s10 .titArea .subt {font-size: 1.8rem;} #main .s10 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem; padding: 2.2rem 0;} #main .s10 .titArea .wrt {font-size: 1.4rem; line-height: 2.2rem; margin-bottom: 2rem;} #main .s10 .titArea .anch {font-size: 1.6rem;} #main .s10 .titArea .anch img {width: 2rem} } #main .s11 {background: url('../img/s11_bg.jpg') center/cover no-repeat;} #main .s11 .cont {padding-bottom: 5%;} #main .s11 .titArea {} #main .s11 .titArea .subt {letter-spacing: 0.6rem; border-bottom: 1px solid var(--fcp); padding: 0 0 0.8rem;} #main .s11 .titArea .tit {padding: 3rem 0 2rem; line-height: 7.6rem;} #main .s11 .titArea .prg {padding-bottom: 3rem; font-size: 4.3rem;} #main .s11 .titArea .wrt {line-height: 2.6rem; margin-bottom: 3rem;} #main .s11 .titArea .anch {color: #fff; gap: 0.5rem;} @media all and (max-width: 880px){ #main .s11 {} #main .s11 .cont {max-width: var(--innerMo); padding: 15rem 0;} #main .s11 .titArea {} #main .s11 .titArea .subt {font-size: 1.8rem;} #main .s11 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem; padding: 2.2rem 0 1rem;} #main .s11 .titArea .prg {font-size: 2.2rem; padding-bottom: 2rem;} #main .s11 .titArea .wrt {font-size: 1.4rem; line-height: 2.2rem; margin-bottom: 2rem;} #main .s11 .titArea .anch {font-size: 1.6rem;} #main .s11 .titArea .anch img {width: 2rem} } #main .s12 {background: url('../img/s12_bg.jpg') center/cover no-repeat;} #main .s12 .cont {height: 100%; display: flex; flex-direction: column; justify-content: center;} #main .s12 .lstArea {gap: 13rem;} #main .s12 .lstArea .lst {} #main .s12 .prg {bottom: 10%;} @media all and (max-width: 880px){ #main .s12 {} #main .s12 .cont {max-width: var(--innerMo); padding: 5rem 0;} #main .s12 .lstArea {flex-wrap: wrap; gap: 3rem 0} #main .s12 .lstArea .lst {width: 100%;} #main .s12 .lstArea .lst .tit {font-size: 6rem;} #main .s12 .lstArea .lst .txt {font-size: 1.6rem;} #main .s12 .prg {position: relative; font-size: 2.4rem; margin-top: 4rem; line-height: 3.4rem; text-align: center;} } #main .s13 {background: url('../img/s13_bg.jpg') center/cover no-repeat;} #main .s13 .title {gap: 2rem; margin-bottom: 4rem;} #main .s13 .title .t1 {} #main .s13 .title .t2 {font-size: 12rem;} #main .s13 .title .t3 {font-size: 8rem;} #main .s13 .ticker {width: 100%; overflow: hidden; box-sizing: border-box;} #main .s13 .ticker .item {display: inline-block; white-space: nowrap;} #main .s13 .ticker img {display: block; width: auto; margin: 0;} @media all and (max-width: 880px){ #main .s13 {padding: 5rem 0; background: url('../img/s13_bg_mo.jpg') center/cover no-repeat;} #main .s13 .title {max-width: var(--innerMo); margin: 0 auto; flex-direction: column; gap: 0;} #main .s13 .title .t1 {font-size: 2.2rem;} #main .s13 .title .t2 {font-size: 8rem;} #main .s13 .title .t3 {font-size: 4rem;} #main .s13 .tickerWrap {margin-top: 4rem} #main .s13 .ticker {} #main .s13 .ticker .item {} #main .s13 .ticker img {height: 20vh;} } #main .s14 {} #main .s14 .cont {} #main .s14 .titArea {} #main .s14 .titArea .ico {} #main .s14 .titArea .tit {padding: 2rem 0;} #main .s14 .titArea .wrt {line-height: 3.2rem;} #main .s14 .titArea .subt {margin-top: 2.2rem; text-transform: uppercase;} #main .s14 .formArea {} #main .s14 .formArea .iptLst {padding: 4rem 0 8rem; gap: 5rem 12rem; } #main .s14 .formArea .iptLst .lst {width: calc((100% - 12rem) / 2); height: 6.2rem} #main .s14 .formArea .iptLst .lst input {height: 100%; width: 100%; border: 0; box-shadow: none; border-bottom: 1px solid #707070; padding: 0 2rem; font-size: 1.8rem;} #main .s14 .formArea .iptLst .lst .ico {right: 0;} #main .s14 .formArea .actArea {gap: 2rem;} #main .s14 .formArea .actArea .chk {gap: 1rem} #main .s14 .formArea .actArea .submitBtn {padding: 1.6rem 9.6rem; border-radius: 1.3rem;} @media all and (max-width: 880px){ #main .s14 {} #main .s14 .cont {max-width: var(--innerMo); padding: 5rem 0;} #main .s14 .titArea {} #main .s14 .titArea .ico {width: 6rem;} #main .s14 .titArea .tit {font-size: 2.5rem; line-height: 2.8rem;} #main .s14 .titArea .wrt {font-size: 1.4rem; line-height: 2.2rem;} #main .s14 .titArea .subt {font-size: 4rem; font-weight: bold;} #main .s14 .formArea {} #main .s14 .formArea .iptLst {flex-wrap: wrap; gap: 3rem; padding: 4rem 0 6rem;} #main .s14 .formArea .iptLst .lst {width: 100%; height: 3.4rem;} #main .s14 .formArea .iptLst .lst input {padding: 0 1rem; font-size: 1.4rem;} #main .s14 .formArea .iptLst .lst .ico {max-width: 2.4rem;} #main .s14 .formArea .actArea {} #main .s14 .formArea .actArea .chk {font-size: 1.4rem;} #main .s14 .formArea .actArea .submitBtn {font-size: 1.8rem; font-weight: 600; padding: 1.4rem 0; width: 100%;} } #main .s15 {} #main .s15 .cont {} #main .s15 .panel {} #main .s15 .panel .imgArea {} #main .s15 .panel .lstWrap {padding: 6rem 12rem 6rem 8rem; background: rgba(0,0,0,0.7); border-radius: 3rem; gap: 9.2rem; left: 26rem;} #main .s15 .panel .lstWrap .lstArea {} #main .s15 .panel .lstWrap .lstArea .lst {align-items: flex-start; gap: 0.8rem; line-height: 2.6rem;} #main .s15 .panel .lstWrap .lstArea .lst + .lst {margin-top: 4.5rem;} #main .s15 .panel .lstWrap .lstArea .lst .ico {} #main .s15 .txtArea {max-width: 140rem; padding-top: 8rem; gap: 24rem;} #main .s15 .txtArea .tit {} #main .s15 .txtArea .wrt {line-height: 3.2rem;} @media all and (max-width: 880px){ #main .s15 {} #main .s15 .cont {max-width: var(--innerMo); padding: 5rem 0;} #main .s15 .panel {} #main .s15 .panel .imgArea {} #main .s15 .panel .lstWrap {padding: 0; left: 0; position: relative; top: auto; transform: none; background: #fff; flex-wrap: wrap; gap: 2rem; margin-top: 2rem;} #main .s15 .panel .lstWrap .lstArea {color: #000; width: 100%; font-size: 1.6rem;} #main .s15 .panel .lstWrap .lstArea .lst {align-items: baseline;} #main .s15 .panel .lstWrap .lstArea .lst + .lst {margin-top: 2rem} #main .s15 .panel .lstWrap .lstArea .lst .ico {top: 0.3rem;} #main .s15 .txtArea {flex-direction: column; gap: 2rem; padding-top: 4rem;} #main .s15 .txtArea .tit {font-size: 2.4rem;} #main .s15 .txtArea .wrt {font-size: 1.4rem; line-height: 2.2rem;} } #main .s16 {background: #E7E7E7} #main .s16 .cont {max-width: 137.2rem; margin: 0 auto; align-items: center;} #main .s16 .mapArea {width: 50%} #main .s16 .mapArea .map {max-width: 52.2rem; width: 100%} #main .s16 .infoArea {width: 50%} #main .s16 .infoArea .num {margin-bottom: 2.1rem;} #main .s16 .infoArea .adr1 {} #main .s16 .infoArea .adr2 {padding: 0.6rem 0 3.6rem;} #main .s16 .infoArea .lst {} #main .s16 .infoArea .lst li {padding: 2.4rem 5rem; background: #F6F7F9; border-radius: 2rem; cursor: pointer;} #main .s16 .infoArea .lst li + li {margin-top: 1.6rem;} #main .s16 .infoArea .lst li .ltit {gap: 3.2rem;} #main .s16 .infoArea .lst li .ltit .ico {} #main .s16 .infoArea .lst li .ltit .down {margin-left: auto} #main .s16 .infoArea .lst li .lwrt {padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px solid #C9CDD2; display: none;} #main .s16 .infoArea .lst li .lwrt .inn {align-items: flex-start; gap: 1.2rem; } #main .s16 .infoArea .lst li .lwrt .ico {} #main .s16 .infoArea .mapView {background: #454C53; padding: 1.2rem 3rem; border-radius: 2.6rem; margin-top: 3rem;} .root_daum_roughmap .wrap_controllers {display: none;} .root_daum_roughmap .cont {display: none;} #main .s16 .mapPop {z-index: 9; display: none} #main .s16 .mapPop .popBg {background: rgba(0, 0, 0, 0.7)} #main .s16 .mapPop .popBox {width: 100%; max-width: 56rem;} @media all and (max-width: 880px){ #main .s16 {} #main .s16 .cont {max-width: var(--innerMo); padding: 5rem 0; flex-direction: column; align-items: baseline; gap: 3rem;} #main .s16 .mapArea {width: 100%} #main .s16 .infoArea {width: 100%} #main .s16 .infoArea .num {font-size: 2.8rem; margin-bottom: 1.4rem;} #main .s16 .infoArea .adr1 {font-size: 1.8rem;} #main .s16 .infoArea .adr2 {font-size: 1.8rem;} #main .s16 .infoArea .lst {} #main .s16 .infoArea .lst li {padding: 2.2rem 2.4rem;} #main .s16 .infoArea .lst li .ltit {gap: 0.8rem; font-size: 1.6rem;} #main .s16 .infoArea .lst li .ltit .ico {width: 2.4rem;} #main .s16 .infoArea .lst li .ltit .down {width: 2rem;} #main .s16 .infoArea .lst li .lwrt {} #main .s16 .infoArea .lst li .lwrt .inn {gap: 0.8rem; font-size: 1.4rem; line-height: 2.2rem;} #main .s16 .infoArea .lst li .lwrt .ico {width: 1.4rem; top: 0.4rem;} #main .s16 .infoArea .mapView {} #main .s16 .mapPop {z-index: 999999; position: fixed} #main .s16 .mapPop .popBg {} #main .s16 .mapPop .popBox {max-width: 80%;} } #main .s17 {background: #E7E7E7} #main .s17 .cont {max-width: 143.7rem; margin: 0 auto; justify-content: space-around;} #main .s17 .parkArea {} #main .s17 .parkArea .ptit {margin-bottom: 2.8rem;} #main .s17 .parkArea .ptit .ico {} #main .s17 .parkArea .plst {display: flex;} #main .s17 .parkArea .plst li {} #main .s17 .timeArea {padding-top: 6rem; width: 40.3rem; flex-shrink: 0} @media all and (max-width: 880px){ #main .s17 {} #main .s17 .cont {max-width: var(--innerMo); padding: 5rem 0; flex-direction: column;} #main .s17 .parkArea {} #main .s17 .parkArea .ptit {font-size: 2.2rem; margin-bottom: 2rem;} #main .s17 .parkArea .ptit .ico {width: 2.6rem; margin-right: 0.8rem;} #main .s17 .parkArea .plst {flex-direction: column; gap: 2rem;} #main .s17 .parkArea .plst li {} #main .s17 .timeArea {width: 100%;} }