#header {position: fixed; z-index: 9999; width: 100%; top: 0;} #header .pcHeader {background: rgba(0,0,0,0); transition: var(--ts0)} #header .pcHeader .inner {padding: 2rem 5rem; align-items: center;} #header .pcHeader .logo {} #header .pcHeader .gnb {display: flex; gap: 3.2rem; align-items: center;} #header .pcHeader .gnb li {} #header .pcHeader .gnb li a {color: #fff; display: inline-block; transition: var(--ts0)} #header .pcHeader .gnb li.estBtn {} #header .pcHeader .gnb li.estBtn a {padding: 0.8rem 1.6rem; background: #FF4620;} #header .pcHeader .gnb li:hover a {color: #FF4620;} #header .pcHeader .gnb li.estBtn:hover a {color: #fff; background: #d32906} #header .pcHeader.fix {background: rgba(0,0,0,1);} #header .pcHeader.wrtFix {background: rgba(0,0,0,1);} @media all and (max-width: 880px){ #header {} #header .moHeader {background: rgba(0,0,0,0); transition: var(--ts1)} #header .moHeader .moHead {padding: 2.4rem; transition: var(--ts1)} #header .moHeader .moHead .logo {} #header .moHeader .moHead .menuBtn {} #header .moHeader.fix {background: rgba(0,0,0,1);} #header .moHeader.fix .moHead {padding: 1.2rem 2.4rem} #header .moHeader .moWrap {position: fixed; width: 100%; top: 0; height: 100vh; display: none;} #header .moHeader .moBg {height: 100%; background: rgba(0, 0, 0, 0.4);} #header .moHeader .moBox {position: absolute; top: 0; width: 75%; height: 100%; background: #000; padding: 10rem 4rem; transition: var(--ts1); right: -100%; display: flex; flex-direction: column;} #header .moHeader .gnb {font-size: 1.6rem;} #header .moHeader .gnb li {} #header .moHeader .gnb li + li {margin-top: 2.6rem;} #header .moHeader .gnb li.estBtn {} #header .moHeader .gnb li.estBtn a {display: inline-block; padding: 0.6rem 1.4rem; background: #FF4620;} #header .moHeader .info {margin-top: auto} #header .moHeader .info li {color: #979797; font-size: 1.2rem;} #header .moHeader .info li + li {margin-top: 1rem;} #header .moHeader .closeBtn {top: 2.4rem; right: 2.8rem; position: absolute;} } #kaFloat {position: fixed; right: 0; bottom: 6%; z-index: 999} #kaFloat a {display: flex; gap: 0.4rem; padding: 0.8rem 1.2rem; background: rgba(255,70,32,0.5); backdrop-filter:blur(4px); font-size: 1.2rem; color: #fff; font-weight: 600; align-items: center; border-radius: 4rem 0 0 4rem; transition: var(--ts1);} #kaFloat a:hover {padding: 0.8rem 2rem 0.8rem 1.2rem; background: rgba(255,70,32,0.8);} #infoFloat {position: fixed; z-index: 999; bottom: 0; width: 100%; background: rgba(255,255,255,0.1); backdrop-filter:blur(4px);} #infoFloat .infoLst {display: flex; justify-content: center; gap: 4.8rem;} #infoFloat .infoLst li {font-size: 1.2rem; color: #979797} #infoFloat .infoLst li a {display: flex; gap: 0.4rem; padding: 1rem 0;} #infoFloat .infoLst li:hover {color: #fff;} #infoFloat .infoLst li:hover img {filter: brightness(100);} @media all and (max-width: 880px){ #kaFloat {bottom: 4%} #kaFloat a {} #infoFloat {display: none} } #footer {background: #000} #footer .inner {max-width: 92.2%; padding: 3rem 0;} #footer .ftTop {margin-bottom: 3em;} #footer .ftTop .ftLogo {} #footer .ftTop .snsMenu {gap: 1.6rem;} #footer .ftTop .snsMenu li {color: #A9A9A9; transition: var(--ts0);} #footer .ftTop .snsMenu li:hover {color: #fff; } #footer .info {color: #A9A9A9; margin-bottom: 3.2rem;} #footer .info li {} #footer .info li + li {margin-top: 0.8rem;} #footer .copy {border-top: 1px solid #333; padding: 1rem 0;} @media all and (max-width: 880px){ #footer {} #footer .inner {padding-bottom: 0;} #footer .ftTop {} #footer .ftTop .ftLogo {} #footer .ftTop .snsMenu {} #footer .ftTop .snsMenu li {} #footer .info {} #footer .info li {} #footer .info li + li {} #footer .copy {} } #main {background: #000;} #main .s1 {height: 80vh; overflow: hidden;} #main .s1 .main_swiper {overflow: hidden; height: 100%;} #main .s1 .swiper-slide {overflow: hidden; background: #000} #main .s1 .txtArea {top: 19.2rem; left: 5.3rem; z-index: 1; height: 28rem; display: flex; flex-direction: column;} #main .s1 .txtArea .tit {padding-bottom: 1.4rem;} #main .s1 .txtArea .wrt {line-height: 1.4;} #main .s1 .txtArea .link {gap: 0.7rem; color: var(--pc); transition: var(--ts1); margin-top: auto;} #main .s1 .txtArea .link:hover {gap: 1.2rem;} #main .s1 .txtArea {left: 0; opacity: 0; transition: var(--ts4);} #main .s1 .swiper-slide-active .txtArea {left: 5.3rem; opacity: 1;} #main .s1 .bgCir {width: 120rem; height: 120rem; border-radius: 50%; opacity: 0.5; left: -20%; top: -60%; transform: scale(0.4); transition: var(--ts3);} #main .s1 .bgCir.on {transform: scale(1);} #main .s1 .slide3 .txtArea .tit {padding-bottom: 5.5rem} #main .s1 .slide1 .bgCir {background: rgb(255,70,32); background: radial-gradient(circle, rgba(255,70,32,1) 0%, rgba(0,0,0,1) 63%);} #main .s1 .slide2 .bgCir {background: rgb(121,140,235); background: radial-gradient(circle, rgba(121,140,235,1) 0%, rgba(0,0,0,1) 63%);} #main .s1 .slide3 .bgCir {background: rgb(133,132,142); background: radial-gradient(circle, rgba(133,132,142,1) 0%, rgba(0,0,0,1) 63%);} #main .s1 .slide1 .bgImg {right: 19rem; opacity: 0.5; top: 50%; transform: translateY(-50%) rotate(-26deg); display: flex; gap: 1rem;} #main .s1 .slide1 .bgImg .img1 {animation: moveUpDown 30s linear infinite alternate;} #main .s1 .slide1 .bgImg .img2 {animation: moveUpDownRever 30s linear infinite alternate;} #main .s1 .slide1 .bgImg .img3 {animation: moveUpDown 30s linear infinite alternate;} #main .s1 .slide2 .bgImg {right: -10%; opacity: 0.5; top: 60%; transform: translateY(-50%); overflow: hidden;} #main .s1 .slide2 .bgImg .img {animation: zoomInOut 15s ease-in-out infinite;} #main .s1 .slide3 .bgImg {right: 14rem; opacity: 0.5; top: 50%; transform: translateY(-50%); display: flex; gap: 1rem;} #main .s1 .slide3 .bgImg .img1 {animation: moveUpDown 20s linear infinite alternate;} #main .s1 .slide3 .bgImg .img2 {animation: moveUpDownRever 20s linear infinite alternate;} #main .s1 .main_pg {right: 5rem; left: auto; width: auto; bottom: auto; top: 50%; transform: translateY(-50%);} #main .s1 .main_pg .swiper-pagination-bullet {font-size: 1rem; font-weight: bold; color: #fff; opacity: 1; margin: 0; width: 3.2rem; height: 3.2rem; border-radius: 0; display: grid; place-items: center; background: transparent;} #main .s1 .main_pg .swiper-pagination-bullet-active {color: #000; background: #fff;} @keyframes moveUpDown { 0% { transform: translateY(0%); } 100% { transform: translateY(-30%); } } @keyframes moveUpDownRever { 100% { transform: translateY(30%); } 0% { transform: translateY(0%); } } @keyframes zoomInOut { 0% { transform: scale(0.); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @media all and (max-width: 880px){ #main {overflow: hidden;} #main .s1 {height: 88vh;} #main .s1 .txtArea {top: 12rem; left: 50%; width: 86.6%; transform: translateX(-50%); height: 50vh} #main .s1 .txtArea .tit {font-size: 3rem;} #main .s1 .txtArea .wrt {font-size: 1.2rem;} #main .s1 .txtArea .link {font-size: 1.6rem} #main .s1 .txtArea .link img {width: 3.4rem;} #main .s1 .txtArea {left: 30%; opacity: 0; transition: var(--ts4);} #main .s1 .swiper-slide-active .txtArea {left: 50%; opacity: 1;} #main .s1 .bgCir {left: -150vw; top: -80%;} #main .s1 .slide1 .bgImg {width: 100vw; right: -40%;} #main .s1 .slide2 .bgImg {bottom: 0; top: auto; right: auto; width: 210vw; left: 50%; transform: translateX(-50%); height: 100%;} #main .s1 .slide2 .bgImg .img {height: 100%;} #main .s1 .slide2 .bgImg .img img {height: 100%; object-fit: cover;} #main .s1 .slide3 .bgImg {right: 1rem; width: 70vw;} #main .s1 .main_pg {right: 2.4rem;} } #main .s2 {} #main .s2 .inner {padding: 10rem 0;} #main .s2 .titArea {margin-bottom: 4rem;} #main .s2 .titArea .tit {padding-bottom: 0.8rem;} #main .s2 .titArea .wrt {opacity: 0.8} #main .s2 .lstArea {justify-content: center; gap: 16rem;} #main .s2 .lstArea li {display: flex; flex-direction: column; align-items: center;} #main .s2 .lstArea li .imgArea {} #main .s2 .lstArea li .imgArea .mImg {z-index: 1} #main .s2 .lstArea li .imgArea .cImg {} #main .s2 .lstArea li .txt {color: var(--pc); padding-top: 2.4rem; font-size: 1.8rem;} #main .s2 .lstArea .lst1 .imgArea .cImg {left: 50%; transform: translateX(-50%); bottom: 30%; transition: var(--ts2);} #main .s2 .lstArea .lst2 .imgArea .cImg {left: 50%; transform: translateX(-50%); top: 32%; transition: var(--ts2);} #main .s2 .lstArea .lst3 .imgArea .cImg {left: 51%; transform: translateX(-50%); top: 10%; transition: var(--ts2);} #main .s2 .lstArea .lst4 .imgArea .cImg {left: 26%; top: 17%; transition: var(--ts2);} #main .s2 .lstArea .lst1.act .imgArea .cImg {left: 50%; transform: translateX(-50%); bottom: 6%;} #main .s2 .lstArea .lst2.act .imgArea .cImg {left: 50%; transform: translateX(-50%); top: 12%;} #main .s2 .lstArea .lst3.act .imgArea .cImg {left: 51%; transform: translateX(-50%); top: -6%;} #main .s2 .lstArea .lst4.act .imgArea .cImg {left: 10%; top: 0} @media all and (max-width: 880px){ #main .s2 {} #main .s2 .inner {} #main .s2 .titArea {} #main .s2 .titArea .tit {font-size: 2.4rem;} #main .s2 .titArea .wrt {font-size: 1.4rem;} #main .s2 .lstArea {flex-wrap: wrap; max-width: 70%; margin: 0 auto; gap: 6rem 0; justify-content: space-between;} #main .s2 .lstArea li {width: 50%;} #main .s2 .lstArea li .imgArea {} #main .s2 .lstArea li .imgArea .mImg {z-index: 1; width: 6rem;} #main .s2 .lstArea li .imgArea .cImg {} #main .s2 .lstArea li .txt {font-size: 1.4rem;} #main .s2 .lstArea .lst1 .imgArea .cImg {width: 2.8rem;} #main .s2 .lstArea .lst2 .imgArea .cImg {width: 3.2rem;} #main .s2 .lstArea .lst3 .imgArea .cImg {width: 2.2rem;} #main .s2 .lstArea .lst4 .imgArea .cImg {width: 3.6rem;} } #main .s3 {} #main .s3 .inner {padding: 7.5rem 0; max-width: 95%;} #main .s3 .bgCir {width: 120rem; height: 120rem; background: rgb(255,70,32); background: radial-gradient(circle, rgba(255,70,32,1) 0%, rgba(0,0,0,1) 63%); border-radius: 50%; opacity: 0.8; top: 10%; right: 13%;} #main .s3 .title {text-align: center; margin-bottom: 2.4rem;} #main .s3 .tabMenu {gap: 1.7rem; justify-content: center; margin-bottom: 4rem;} #main .s3 .tabMenu li {color: #898989; padding: 0.8rem 0; cursor: pointer} #main .s3 .tabMenu li.on {color: #fff; border-bottom: 1px solid #fff;} #main .s3 .tabCont {display: none;} #main .s3 .tabCont.act {display: block;} #main .s3 .tabCont .tabLst {gap: 5.6rem 3.2rem;} #main .s3 .tabCont .tabLst li {width: calc((100% - 3.2rem) / 2);} #main .s3 .tabCont .tabLst li a {} #main .s3 .tabCont .tabLst li .imgArea {overflow: hidden;} #main .s3 .tabCont .tabLst li .imgArea img {transition: var(--ts2);} #main .s3 .tabCont .tabLst li .txtArea {margin-top: 1.6rem;} #main .s3 .tabCont .tabLst li .txtArea .tit {padding-bottom: 0.8rem;} #main .s3 .tabCont .tabLst li .txtArea .wrt {color: #8D8D8D;} #main .s3 .link {color: var(--pc); font-size: 1.8rem; font-weight: 600; gap: 0.7rem; margin-top: 5.6rem; justify-content: flex-end;} #main .s3 .link img {transition: var(--ts1); right: 0} #main .s3 .link:hover img {right: -0.5rem;} #main .s3 .tabCont .tabLst li:hover .imgArea img {transform: scale(1.1);} #main .s3 .tabCont .tabLst li.empty_li {width: 100%; color: #fff; text-align: center; font-size: 1.6rem; padding: 10rem 0;} @media all and (max-width: 880px){ #main .s3 {} #main .s3 .inner {max-width: 86.6%;} #main .s3 .bgCir {left: -40%; top: 25%;} #main .s3 .title {font-size: 2.4rem; margin-bottom: 1.4rem;} #main .s3 .tabMenu {font-size: 1.4rem; gap: 1.2rem;} #main .s3 .tabMenu li {} #main .s3 .tabMenu li.on {} #main .s3 .tabCont {} #main .s3 .tabCont .tabLst {gap: 5.6rem;} #main .s3 .tabCont .tabLst li {width: 100%} #main .s3 .tabCont .tabLst li .imgArea {} #main .s3 .tabCont .tabLst li .imgArea img {} #main .s3 .tabCont .tabLst li .txtArea {} #main .s3 .tabCont .tabLst li .txtArea .tit {font-size: 1.6rem;} #main .s3 .tabCont .tabLst li .txtArea .wrt {font-size: 1.4rem;} #main .s3 .link {} } #main .s4 {} #main .s4 .inner {max-width: 92%; padding: 8.8rem 0 7.8rem;} #main .s4 .title {margin-bottom: 6rem;} #main .s4 .lstArea {gap: 2.8rem;} #main .s4 .lstArea .lst {width: calc((100% - 5.6rem) / 3);} #main .s4 .lstArea .lst .lstTit {padding-bottom: 1.6rem; transition: var(--ts1);} #main .s4 .lstArea .lst .lstImg {filter: grayscale(100%); transition: var(--ts1);} #main .s4 .lstArea .lst .lstWrt {padding-top: 1.6rem; line-height: 1.4;} #main .s4 .lstArea .lst:hover .lstTit {color: var(--pc)} #main .s4 .lstArea .lst:hover .lstImg {filter: grayscale(0);} @media all and (max-width: 880px){ #main .s4 {} #main .s4 .inner {max-width: 86.6%; padding: 8.8rem 0;} #main .s4 .title {font-size: 2.4rem; margin-bottom: 3.5rem;} #main .s4 .lstArea {flex-wrap: wrap; gap: 4.8rem;} #main .s4 .lstArea .lst {width: 100%;} #main .s4 .lstArea .lst .lstTit {font-size: 2.2rem;} #main .s4 .lstArea .lst .lstImg {} #main .s4 .lstArea .lst .lstWrt {font-size: 1.4rem;} #main .s4 .lstArea .lst.act .lstTit {color: var(--pc)} #main .s4 .lstArea .lst.act .lstImg {filter: grayscale(0);} } #main .s5 {overflow: hidden;} #main .s5 .inner {} #main .s5 .bgImg {} #main .s5 .bgImg .bgCir {border-radius: 50%; } #main .s5 .bgImg .bgCir1 {width: 70rem; height: 70rem; background: rgb(207,235,158); background: radial-gradient(circle, rgba(207,235,158,0.5) 0%, rgba(255,70,32,0) 70%); top: -60%; left: 35%; } #main .s5 .bgImg .bgCir2 {width: 80rem; height: 80rem; background: rgb(177,247,255); background: radial-gradient(circle, rgba(177,247,255,0.5) 0%, rgba(177,247,255,0) 70%); bottom: -40%; left: -10%;} #main .s5 .bgImg .bgCir3 {width: 80rem; height: 80rem; background: rgb(255,188,188); background: radial-gradient(circle, rgba(255,188,188,0.5) 0%, rgba(255,70,32,0) 70%); top: -40%; right: -10%;} #main .s5 .bgImg .bgCir1 { animation: randomMove1 10s ease-in-out infinite alternate; animation-delay: calc(-1s * (random() * 5)); } #main .s5 .bgImg .bgCir2 { animation: randomMove2 12s ease-in-out infinite alternate; animation-delay: calc(-1s * (random() * 5)); } #main .s5 .bgImg .bgCir3 { animation: randomMove3 14s ease-in-out infinite alternate; animation-delay: calc(-1s * (random() * 5)); } @keyframes randomMove1 { 0% { transform: translate(0, 0); } 20% { transform: translate(-200px, 150px); } 40% { transform: translate(180px, -220px); } 60% { transform: translate(-150px, -250px); } 80% { transform: translate(220px, 200px); } 100% { transform: translate(0, 0); } } @keyframes randomMove2 { 0% { transform: translate(0, 0); } 15% { transform: translate(170px, -140px); } 30% { transform: translate(-190px, 120px); } 50% { transform: translate(160px, -180px); } 70% { transform: translate(-200px, 180px); } 100% { transform: translate(0, 0); } } @keyframes randomMove3 { 0% { transform: translate(0, 0); } 25% { transform: translate(-250px, 180px); } 50% { transform: translate(230px, -200px); } 75% { transform: translate(-190px, 250px); } 100% { transform: translate(0, 0); } } #main .s5 .txtArea {} #main .s5 .txtArea .tit {line-height: 1.5; padding-bottom: 2.4rem;} #main .s5 .txtArea .link {font-size: 1.6rem; color: #fff; font-weight: 600; gap: 1rem; padding: 1.6rem 2.4rem; background: #000} #main .s5 .txtArea .link img {transition: var(--ts1); right: 0;} #main .s5 .txtArea .link:hover img {right: -0.5rem;} @media all and (max-width: 880px){ #main .s5 {} #main .s5 .inner {} #main .s5 .bgImg {} #main .s5 .txtArea {} #main .s5 .txtArea .tit {font-size: 2.4rem;} #main .s5 .txtArea .link {} #main .s5 .bgImg .bgCir1 {width: 30rem; height: 30rem; top: 0; left: 10%} #main .s5 .bgImg .bgCir2 {width: 30rem; height: 30rem; bottom: -30%; left: 0} #main .s5 .bgImg .bgCir3 {width: 30rem; height: 30rem; top: -10%; right: -20%} } #sub {background: #000} #bo_w .cbWrite {font-size: 1.6rem;} #bo_w .frm_input {border: 1px solid #d0d3db; width: 100%; height: 40px; border-radius: 3px; box-shadow: none;} @media all and (max-width: 880px){ #bo_w .cbWrite {} #bo_w .cbWrite .inner {max-width: 92.2%} #bo_w .cbWrite .title {color: #000; margin-bottom: 4rem;} #bo_w .bo_w_flie .frm_file {padding-left: 3rem;} } #portfolio {min-height: 90vh; overflow: hidden;} #portfolio .inner {padding: 12rem 0 17.5rem; max-width: 151.6rem;} #portfolio .title {text-align: center; margin-bottom: 3.5rem; font-size: 2.8rem;} #portfolio .category {gap: 4rem; justify-content: center; margin-bottom: 8rem; font-size: 1.6rem; z-index: 1; background: #000;} #portfolio .category li {color: #898989; text-align: center;} #portfolio .category li a {display: inline-block; padding: 0.7rem 0;} #portfolio .category li a:hover {color: #fff; transition: var(--ts0);} #portfolio .category li a.on {border-bottom: 1px solid #fff; color: #fff;} #portfolio .btnArea {font-size: 1.6rem; display: flex; gap: 0.4rem; justify-content: flex-end; margin-bottom: 2rem;} #portfolio .btnArea a {border: 1px solid #fff; padding: 0.2rem 0.8rem; display: inline-block; color: #fff} #portfolio .btnArea a:hover {color: #000; background: #fff} #portfolio .portLst {display: flex; flex-wrap: wrap; gap: 5.6rem 2.4rem;} #portfolio .portLst li {width: calc((100% - 2.4rem) / 2);} #portfolio .portLst li a {} #portfolio .portLst li .img {overflow: hidden; width: 100%; height: 47.5rem;} #portfolio .portLst li .img img {transition: var(--ts2); height: 100%; object-fit: cover;} #portfolio .portLst li .tit {font-size: 2.2rem; color: #fff; font-weight: bold; padding: 3rem 0 0.8rem;} #portfolio .portLst li .subt {font-size: 1.4rem; color: #8D8D8D;} #portfolio .portLst li:hover .img img {transform: scale(1.1);} #portfolio .portLst li.empty_list {font-size: 1.8rem; width: 100%; color: #fff; padding: 8rem 0 !important;} #portfolio .portLst .admBtn {font-size: 1.4rem; position: absolute; top: 0.4rem; right: 0.6rem;} #portfolio .portLst .admBtn a {display: inline-block; background: #000; color: #fff; padding: 0.2rem 0.6rem;} #portfolio .bgCir {width: 100rem; height: 100rem; background: rgb(255,70,32); background: radial-gradient(circle, rgba(255,70,32,1) 0%, rgba(0,0,0,1) 63%); border-radius: 50%; opacity: 0.5; top: 30rem; right: 10%;} @media all and (max-width: 880px){ #sub {background: #000} #portfolio {} #portfolio .inner {} #portfolio .title {font-size: 2.4rem; margin-bottom: 1.4rem;} #portfolio .category {font-size: 1.4rem; gap: 1.6rem; top: 7%; margin-bottom: 4rem;} #portfolio .category li {} #portfolio .category li a {} #portfolio .category li.on {} #portfolio .category li.on a {} #portfolio .btnArea {max-width: 86.6%; margin: 0 auto; padding-bottom: 1rem; font-size: 1.2rem;} #portfolio .portLst {max-width: 86.6%; margin: 0 auto; flex-wrap: wrap; gap: 4rem;} #portfolio .portLst li {width: 100%} #portfolio .portLst li a {} #portfolio .portLst li .img {height: 30vh;} #portfolio .portLst li .tit {padding: 1.2rem 0 0.2rem; font-size: 1.8rem;} #portfolio .portLst li .subt {} #portfolio .portLst .admBtn {} #portfolio .portLst .admBtn a {font-size: 1rem;} } #portDetail {} #portDetail .portVisual {} #portDetail .portCont {padding: 18rem 0; margin: 0 auto;} #portDetail .portCont.in10 {max-width: 100rem;} #portDetail .portCont.in15 {max-width: 151.6rem;} #portDetail .portCont .btnArea {font-size: 1.6rem; display: flex; gap: 0.4rem; justify-content: flex-end; margin-bottom: 2rem;} #portDetail .portCont .btnArea a {border: 1px solid #000; padding: 0.2rem 0.8rem; display: inline-block;} #portDetail .portCont .btnArea a:hover {color: #fff; background: #000} #portDetail .portCont .txtArea {gap: 5.2rem; max-width: 80rem; margin: 0 auto; margin-bottom: 10rem;} #portDetail .portCont .txtArea .prg {font-size: 2.8rem; font-weight: bold;} #portDetail .portCont .txtArea .txt {} #portDetail .portCont .txtArea .txt .tit {font-size: 2.4rem; font-weight: bold; padding-bottom: 1rem;} #portDetail .portCont .txtArea .txt .subt {font-size: 1.6rem; color: #8A8A8A;} #portDetail .portCont .txtArea .txt .wrt {font-size: 1.6rem; color: #8A8A8A; padding-top: 5rem; line-height: 2.4rem;} #portDetail .portCont .imgArea {display: flex; flex-direction: column; gap: 7rem;} @media all and (max-width: 880px){ #portDetail {} #portDetail .portVisual {height: 32.8rem;} #portDetail .portVisual img {height: 100%; object-fit: cover;} #portDetail .portCont {padding: 3.2rem 0 5rem;} #portDetail .portCont.in10 {max-width: 92.2%;} #portDetail .portCont.in15 {max-width: 92.2%;} #portDetail .portCont .btnArea {font-size: 1.2rem;} #portDetail .portCont .txtArea {flex-direction: column; gap: 7rem; margin-bottom: 5.6rem;} #portDetail .portCont .txtArea .prg {margin: 0 auto; font-size: 2.4rem;} #portDetail .portCont .txtArea .txt {} #portDetail .portCont .txtArea .txt .tit {} #portDetail .portCont .txtArea .txt .subt {} #portDetail .portCont .txtArea .txt .wrt {padding-top: 3.2rem; font-size: 1.3rem; line-height: 2rem;} #portDetail .portCont .imgArea {gap: 1.5rem;} #portDetail .portCont .imgArea img {height: auto} } .pg_wrap {float: none; margin-top: 5rem; width: 100%;} .pg_wrap:after {display: none} .pg_wrap .pg {display: flex; align-items: center; justify-content: center; gap: 4rem;} .pg_wrap .pg .pg_page {width: 4rem; height: 4rem; font-size: 1.4rem; display: grid; place-items: center; font-weight: 700; color: #fff; background: transparent; border: 0;} .pg_wrap .pg .pg_page.pg_start {background: url('../img/pg_prev.png') no-repeat center/contain} .pg_wrap .pg .pg_page.pg_prev {background: url('../img/icon_arrow_pagination_1.png') no-repeat center/contain;} .pg_wrap .pg .pg_page.pg_next {background: url('../img/icon_arrow_pagination_2.png') no-repeat center/contain;} .pg_wrap .pg .pg_page.pg_end {background: url('../img/pg_next.png') no-repeat center/contain} .pg_wrap .pg .pg_current {width: 4rem; height: 4rem; display: grid; place-items: center; background: #fff; color: #000; font-size: 1.4rem; border: 0; border-radius: 0;} @media all and (max-width: 880px){ .pg_wrap .pg {gap: 2rem;} .pg_wrap .pg .pg_page {width: 3rem; height: 3rem; font-size: 1.2rem} .pg_wrap .pg .pg_current {width: 3rem; height: 3rem; font-size: 1.2rem;} } /* --------------- 김지원 작업 */ .inquiryWrap {display: none; position: relative; background: #000; min-height: 100vh; padding: 0 5.2rem; box-sizing: border-box; overflow: hidden;} .inquiryWrap.on {display: block;} .inquiryWrap.page2 {padding-bottom: 5rem;} .inquiryWrap::before {content: ''; position: absolute; top: 0; left: 0; background: url('../img/background.png') no-repeat; background-size: 100%; width: 82.8rem; height: 56.1rem;} .inquiryWrap .inquiryHeader {height: 7.2rem;} .inquiryWrap .inquiryHeader .down {gap: 0.4rem;} .inquiryWrap .inquiryCont {min-height: calc(100vh - 7.2rem);} .inquiryWrap.page2 .inquiryCont {padding-top: 8rem;} .leftCont .pageList {margin-bottom: 1.6rem;} .leftCont .pageList li {width: 3.2rem; height: 3.2rem;} .leftCont .pageList li:not(.on) {opacity: 0.5;} .leftCont h2 {margin-bottom: 1.6rem;} .leftCont p {opacity: 0.8;} .rightCont {width: 74.4rem;} .rightCont input[type="text"] {width: 100%; height: 5.1rem; background: transparent; border: 1px solid rgba(255,255,255,0.8); padding-left: 1.6rem; box-sizing: border-box; color: #fff;} .rightCont input[type="checkbox"]+label, .rightCont input[type="radio"]+label {display: block; position: relative; padding-left: 4rem; box-sizing: border-box; line-height: 3.5rem;} .rightCont input[type="checkbox"] + label::before, .rightCont input[type="radio"]+label::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255,255,255,0.8);} .rightCont input[type="checkbox"]:checked + label::before, .rightCont input[type="radio"]:checked+label::before {background: url('../img/input_check.png') center center rgba(255,70,32,0.2) no-repeat; border-color: rgba(255,70,32,1);} .rightCont input[type=date] {background: transparent; position: relative; font-size: 1.3rem; color: transparent; font-family: "Pretendard"; height: 3.2rem; width: 11.7rem; padding-left: 3rem; border: 1px solid #fff; box-sizing: border-box;} .rightCont input[type=date]::before {content: attr(data-placeholder); position: absolute; top: 50%; transform: translateY(-50%); left: 3.5rem; font-size: 1.3rem; color: #fff; opacity: 0.5; font-family: "Pretendard";} .rightCont input[type='date']:valid {color: #fff;} .rightCont input[type='date']:valid::before {display: none;} .rightCont input::-webkit-calendar-picker-indicator {opacity: 0; position: absolute; width: 100%;} .rightCont input[type='date']:-webkit-datetime-edit {display: none !important;} .rightCont input[type='date']::after {content: ""; background: url("../img/date_icon.png") no-repeat center; background-size: contain; width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); pointer-events: none;} @media screen and (max-width: 1400px) { .rightCont {width: 60rem;} } @media screen and (max-width: 1280px) { .rightCont {width: 46rem;} .inquiryWrap .inquiryCont h2 {font-size: 5.4rem;} .inquiryWrap .inquiryCont .leftCont p {font-size: 1.8rem;} } @media screen and (max-width: 1025px) { .rightCont {width: 100%;} .inquiryWrap {padding-bottom: 3rem !important;} .inquiryWrap .inquiryCont {flex-wrap: wrap;} .inquiryWrap .inquiryCont:not(.success) {min-height: auto; gap: 7rem; margin-top: 5rem; align-items: flex-start; justify-content: flex-start;} .inquiryWrap.page2 .inquiryCont {padding-top: 0;} .inquiryWrap .inquiryCont .leftCont {width: 100%;} } @media screen and (max-width: 880px) { .inquiryWrap {padding: 0 2.4rem 3rem 2.4rem !important;} .inquiryWrap::before {left: -60%;} .inquiryWrap .inquiryHeader {position: relative; top: 4.4rem;} .inquiryWrap .inquiryHeader .down span {font-size: 1.4rem;} .inquiryWrap .inquiryCont:not(.success) {margin-top: 9.4rem; } .inquiryWrap .inquiryCont h2 {font-size: 3.6rem;} .inquiryWrap .inquiryCont .leftCont p {font-size: 1.6rem;} } /* 1페이지 */ .rightCont .contBox .tit {margin-bottom: 1.6rem;} .rightCont .btnArea {gap: 1.3rem; flex-wrap: wrap;} .rightCont .btnArea:not(:last-of-type) {margin-bottom: 4.8rem;} .page1 .rightCont input[type="checkbox"]+label {padding: 0.8rem 1.6rem 0.8rem 5rem; box-sizing: border-box; border: 1px solid rgba(255,255,2550.8);} .page1 .rightCont input[type="checkbox"]+label::before {left: 1.2rem; background: url('../img/check.png')no-repeat; width: 2.4rem; height: 2.5rem; background-size: 100%; border: none;} .page1 .rightCont input[type="checkbox"]:checked+label {border-color: #FF4620; background-color: rgba(255, 70, 32, 0.2); color: #FF4620;} .page1 .rightCont input[type="checkbox"]:checked+label::before {background: url('../img/check_on.png') no-repeat; background-size: 100%;} @media screen and (max-width: 880px) { .page1 .rightCont input[type="checkbox"]+label {padding: 0.6rem 1.4rem 0.6rem 3.8rem; font-size: 1.4rem;} .page1 .rightCont input[type="checkbox"]+label::before {width: 2rem; height: 2.2rem;} } /* 2페이지 */ .none {display: none;} .rightCont .inputCont {margin-bottom: 8.8rem;} .rightCont .inputCont .tit {margin-bottom: 1.6rem;} .rightCont .inputCont .enter {width: 100%; height: 5.1rem; padding-left: 1.6rem; box-sizing: border-box; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.8);} .rightCont .inputBox:not(:last-of-type) {margin-bottom: 3.2rem;} .rightCont .project {gap: 1.6rem;} .rightCont .project>div {width: calc(50% - 0.8rem);} .rightCont .period>div {margin-bottom: 0.4rem;} .rightCont .period .flex {gap: 1.3rem;} .rightCont .period .dateSel {padding-left: 3.7rem; box-sizing: border-box; display: none} .rightCont .period p {line-height: 3.5rem; } .rightCont textarea {width: 100%; height: 15.9rem; background: transparent; border: 1px solid rgba(255,255,255); color: #fff; font-family: "Pretendard";} .rightCont .file {border: 1px solid rgba(255,255,255,0.8);} .rightCont .file p {width: calc(100% - 16.4rem); height: 5.1rem; opacity: 0.5; padding-left: 1.6rem; box-sizing: border-box;} .rightCont .file p span.mo_text {display: none;} .rightCont .file.on p {position: relative; background: rgba(255,255,255,0.2); color: #fff; opacity: 1;} .rightCont .file.on p .del {position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%); font-size: 0;} .rightCont .file a {display: block; width: 16.4rem; background: url('../img/file_icon.png') center center #fff no-repeat;} .rightCont .file .fileIp {width: calc(100% - 16.4rem); height: 5.1rem; opacity: 0.5; padding-left: 1.6rem; box-sizing: border-box;} .rightCont .file label {display: block; min-width: 16.4rem; background: url('../img/file_icon.png') center center #fff no-repeat;} .rightCont input[type='file'] {display: none;} @media screen and (max-width: 880px) { .rightCont .project {flex-wrap: wrap;} .rightCont .project>div {width: 100%;} .rightCont .file p {width: calc(100% - 10.2rem);} .rightCont .file p span.pc_text {display: none;} .rightCont .file p span.mo_text {display: block;} .rightCont .file a {width: 10.2rem;} .rightCont .file .fileIp {width: calc(100% - 10.2rem);} .rightCont .file label {min-width: 10.2rem; width: 10.2rem;} } /* 페이지 버튼 */ .inquiryWrap .pageBtn {bottom: 5.2rem; display: inline-block; width: 10.3rem; padding: 1.6rem 0; font-family: "Pretendard";} .inquiryWrap .nextBtn {background: #393939;} .inquiryWrap .nextBtn.on {background: #FF4620; color: #fff} .inquiryWrap .prevBtn {right: 64.1rem; border: 1px solid #fff;} .inquiryWrap.page2 .pageBtn, .inquiryWrap.page3 .pageBtn {bottom: 0;} .inquiryWrap.page2 .prevBtn, .inquiryWrap.page3 .prevBtn {right: 0;} @media screen and (max-width: 1025px) { .inquiryWrap .pageBtnWrap {width: 100%; text-align: right; margin-top: 4.4rem;} .inquiryWrap .pageBtn {position: static;} } /* 완료 페이지 */ .successPage {text-align: center;} .successPage img {margin-bottom: 2rem;} .successPage .tit {margin-bottom: 1.6rem;} .successPage .txt {margin-bottom: 1.6rem; opacity: 0.8; line-height: 150%;} .successPage a {border: 1px solid #fff; width: 15.5rem; height: 5.6rem; margin: 0 auto;} @media screen and (max-width: 880px) { .successPage img {width: 6.4rem;} .successPage .tit {font-size: 3.6rem;} } /* ---------- 2024-04-24 김지원 작업 */ .videoArea {position: relative; width: 100%; height: 123.4rem; z-index: 1; background: #000} .videoArea::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 98;} .videoArea video {width: 100%; height: 100%; object-fit: cover; opacity: 0.3} .videoArea .videoText {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8.2rem; color: #fff; font-weight: 700; text-align: center; z-index: 99;} @media screen and (max-width: 800px) { .videoArea {height: 80vh;} .videoArea .videoText {font-size: 6.2rem;} } @media screen and (max-width: 480px) { .videoArea {height: 50vh;} .videoArea .videoText {font-size: 3.6rem;} } .videoSection {position: relative; padding: 16rem 10rem 21.7rem 10rem; box-sizing: border-box; background: #000000; overflow: hidden;} .videoSection .bgCir {width: 112.8rem; height: 112.8rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,70,32,1) -20%, rgba(0,0,0,1) 50%); opacity: 0.6; top: -21%; left: 29%; z-index: 0;} .videoSection .bgCir2 {width: 73.5rem; height: 139.9rem; top: 24%; left: -2%; background: url('/new/img/video_bg.png') no-repeat; background-size: 100%; z-index: 0;} .videoTitle {padding-left: 7rem; box-sizing: border-box; display: flex; gap: 5.8rem; color: #fff;} .videoSection .videoTitle .tit {font-size: 5.7rem; font-weight: 700; padding-top: 0.7rem;} .videoSection .videoTitle .subTitle .subT {font-size: 3.6rem; font-weight: 700; margin-bottom: 10rem;} .videoSection .videoTitle .subTitle .subT2 {font-size: 3rem; font-weight: 400;} .videoSection .videoText {padding-left: 7rem; box-sizing: border-box; margin: 10.5rem 0 22.7rem 0; color: #fff; font-size: 3rem; line-height: 51px; font-weight: 700;} .videoSection .videoText p {margin-bottom: 5.6rem;} .videoSection .videoText p span {color: #FF4620;} .videoSection .videoBtn {display: flex; flex-wrap: wrap; gap: 1.8rem;} .videoSection .videoBtn a.btn {display: flex; align-items: center; justify-content: center; width: 22rem; height: 6rem; font-size: 1.9rem; font-weight: 600; background: #fff; color: #000; border: 1px solid #FF4620; box-sizing: border-box; padding: 0;} .videoSection .videoBtn:not(.flex) {flex-direction: column; align-items: center;} .videoSection .videoBtn a.arr {gap: 1rem; background: #FF4620; color: #fff;} .videoSection .videoList {display: flex; gap: 8rem 11rem; flex-wrap: wrap; margin: 14.5rem 0 12.8rem 0;} .videoSection .videoList li {width: calc(33.333% - 7.333rem); max-height: 32.2rem; overflow: hidden;} .videoSection .videoList li a {display: block; width: 100%; height: 100%;} .videoSection .videoList li a img {display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 500 / 322;} .videoSection .videoList li:hover a img {transform: scale(1.1); transition: var(--ts2);} @media screen and (max-width: 1100px) { .videoSection {padding: 16rem 5rem 21.7rem 5rem; margin-top: -1px;} .videoSection .bgCir {left: 20%;} .videoTitle {padding-left: 2rem;} .videoSection .videoTitle .tit {font-size: 4.7rem;} .videoSection .videoTitle .subTitle .subT {font-size: 3rem;} .videoSection .videoTitle .subTitle .subT2 {font-size: 2.4rem;} .videoSection .videoText {padding-left: 2rem; font-size: 2.4rem;} .videoSection .videoList {gap: 6rem 8rem;} .videoSection .videoList li {width: calc(50% - 4rem); max-height: 20.2rem;} } @media screen and (max-width: 800px) { .videoSection {padding: 10rem 2.4rem 15rem 2.4rem;} .videoSection .bgCir {top: -11%; left: -15%;} .videoTitle {flex-wrap: wrap; gap: 3.8rem; padding-left: 0;} .videoSection .videoTitle .tit {width: 100%; padding-top: 0;} .videoSection .videoTitle .subTitle .subT {margin-bottom: 4rem;} .videoSection .videoText {padding-left: 0; font-size: 2.2rem; margin: 9rem 0 12rem 0;} .videoSection .videoList {margin: 8rem 0;} .videoSection .videoList li {width: 100%; max-height: none;} .videoSection .videoList {gap: 6rem;} } @media screen and (max-width: 480px) { .videoSection .bgCir {top: -14%; left: -10%;} .videoSection .videoTitle .tit {font-size: 3.7rem;} .videoSection .videoTitle .subTitle .subT {font-size: 2.8rem;} .videoSection .videoTitle .subTitle .subT2 {font-size: 2rem;} .videoSection .videoText {font-size: 2rem; margin: 6rem 0 12rem 0; line-height: 40px;} .videoSection .videoBtn a.btn {width: 19rem; height: 5rem; font-size: 1.6rem;} .videoSection .videoList {gap: 4rem; margin: 5rem 0;} .videoSection .videoText p {word-break: keep-all;} .videoSection .videoText p>br {display: none;} } .