body {font-family:"nanum-square-neo", sans-serif; max-width:100%; min-width:384px;}
#content {width:100%;}
em {color:#21C0F5; letter-spacing:-0.02em; font-weight:700;}
h2 {font-family:'GmarketSansBold',sans-serif; font-weight:700; font-size:45px; letter-spacing: -0.02em; line-height:1.4;}

/* 광고 */
.h_top {width:100%; height:80px; background-color:#255D8F; padding:0 80px; text-align:center; position:relative; }
.h_top br {display:none;}
.h_top p {font-size:24px; line-height:80px; color:#fff;}
.close_btn {position:absolute; right:5%; top:40%;}

/* header, main 시작 */
.h_header {
    width: 100%;
    height: 80px;
    border-bottom: 0.5px solid #fff;
    background: none;
    padding: 25px 80px;
    position: relative;
}
.sc1 {width:100%; height:100vh; position: relative;}
.main_vs {
width: 100%;
height: 1080px;
position: absolute;
left: 0;
top: 0;
z-index: -1000;
overflow: hidden;
/* background:no-repeat center/cover url(/images/portfolio/mainvisual.gif); */
}

.main_vs video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
/* z-index: -1000; */
/* display:none; */
}
.main_vs:after {
    content:''; clear:both; display:block;
    position:absolute; top:0; left:0; width:100%; height:100%;
    background-color:rgba(0,0,0,0.1); z-index:-999;
}
.title_wrap {position:absolute; top:42%; width:100%; text-align:center;}
.title_wrap h2 {font-size:80px; font-weight:700; color:#21C0F5; margin-bottom:10px;}
.title_wrap p {color:#fff; font-size:60px; line-height:1.5; letter-spacing:-0.02em; font-weight:800;}
.title_wrap p:nth-child(3) {font-weight:700; font-size:50px; margin-top:100px;}
.title_wrap p br {display:none;}

/* 기업 맞춤형 솔루션, 문의 바로가기 */
.sc2 {width:100%; height:550px; display:flex; justify-content: space-between; background-color:green;}
.sc2 h3 {font-size:38px; letter-spacing:-0.02em; font-weight:700; color:#fff; line-height:1.4; text-align:center;}
.solution {
    width:calc(100% / 2); background:no-repeat center/cover url(/images/portfolio/solutionbg.png);
    display:flex; flex-flow:column nowrap; justify-content: center; align-items: center;
}

.popup_bg {background-color:rgba(0,0,0,0.5);
position:fixed; left:0; top:0; width:100%; height:100vh; z-index:999;}
.portfolio-popup {width:900px; height:1000px; overflow:auto; margin:0 auto; padding-top:10px; opacity: 1; visibility: visible;}
.portfolio-popup img {width:100%;}

.go_contact {width:calc(100% / 2); background:no-repeat center/cover url(/images/portfolio/insultbg.png);display:flex; flex-flow:column nowrap; justify-content: center; align-items: center;}
.go_contact h3 {font-weight:900;}
.go_contact h3, .go_contact p {color:#255D8F;}
.go_contact p {font-size:22px; line-height:1.5; letter-spacing:0.02em; margin-top:27px; font-weight:700; text-align:center;}
.sc2 .solution a, .go_contact a {padding:12px 20px; border:0.5px solid #fff; color:#fff; width:150px; height:54px; font-size:20px; font-weight:700; line-height:1.5; letter-spacing: -0.02em; margin-top:80px;}
.sc2 .solution a:hover, .go_contact a:hover {opacity:0.6;}
.go_contact a {color:#255D8F; border:0.5px solid #255D8F;}

/* 기업소개 */
.sc3 {max-width:1250px; margin: 200px auto 0;}
.company {display:flex; justify-content: space-between; margin-bottom:80px;}
.sc3 > p {font-size:22px; font-weight:600; letter-spacing:-0.02em; margin-bottom:20px;}
.company_title h2 {color:#255D8F; margin-bottom:80px;}
.company_title p {margin-bottom:20px; line-height:1.6; font-size:22px; letter-spacing:-0.02em;}
.company_title p:first-child {margin-bottom:20px;}
.intro_img {
    background: no-repeat center/cover url(/images/portfolio/company_img.jpg);
    width:573px; height:auto; border-radius:20px;
}

/* 기업 소개 슬라이드*/
.sc3 .swiper {background-color:#255D8F; color:#fff; max-width:1250px; height:73px; position:relative; border-radius:50px;}
.sc3 .swiper-slide {display:flex; align-items: center; justify-content: center; padding:0 100px;}
.sc3 .swiper .company_next {position:absolute; right:5%; top:32%; cursor:pointer;}
.sc3 h4 {color:#21C0F5; font-size:30px; font-weight:800; letter-spacing: -0.02em; margin-right:50px;}
.sc3 .swiper p {margin:0; line-height:1.5;}
.sc3 span {margin-right:50px; font-size:20px;}

/* 포트폴리오 */
.sc4 {max-width:1760px; margin:200px auto;}
.sc4 h2 {color:#21C0F5;text-align:center; margin-bottom:20px;}
.sc4 h2 br {display:none;}
.sc4 .port_title p {text-align:center; font-size:22px; font-weight:700; line-height:1.5; letter-spacing: -0.02em;}
.sc4 .port_title {margin-bottom:100px;}
.sc4 .portfolio {display:flex; flex-flow:row wrap; max-width:1760px; width:100%; justify-content: space-between;}

.port {
flex: 0 0 calc((100% - 160px) / 3);
position: relative;
aspect-ratio: 1 / 1; /* 1:1 비율 */
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
transition: background-size 0.3s ease;
margin-bottom: 80px;
overflow: hidden;
box-sizing: border-box;
border-radius:20px;
}

.port:hover {background-size:110%;}
.port:hover .view {display:block; z-index:30;}
.port:before {aspect-ratio: 1/1; content:''; display:block; inset:0; position:absolute; background-color:rgba(0,0,0,0.2); clear:both; top:0; left:0; right:0; bottom:0; z-index:1; box-sizing:border-box; opacity:0; border-radius:20px;}
.port:hover::before {opacity:1;}
.com_name {font-size:40px; line-height:1.5; letter-spacing:-0.02em; font-weight:800;color:#fff;position:absolute; bottom:5%; left:5%;}
.view {font-size:40px; letter-spacing:-0.02em; font-weight:900;color:#fff; position:absolute; left:30%; top:45%;display:none; }

.port1 {background-image:url(/images/portfolio/port1.png);}
.port2 {background-image: url(/images/portfolio/port2.png);}
.port3 {background-image:url(/images/portfolio/port3.png);}
.port4 {background-image:url(/images/portfolio/port4.png);}
.port5 {background-image:url(/images/portfolio/port5.png);}
.port6 {background-image:url(/images/portfolio/port6.png);}
.port7 {background-image:url(/images/portfolio/port7.png);}
.port8 {background-image:url(/images/portfolio/port8.png);}
.port9 {background-image:url(/images/portfolio/port9.png);}

/* 기술 */
.sc5 {width:100%; height:1080px; background:no-repeat center/cover url(/images/portfolio/techbg.png); padding:145px 0;}
.tech_wrap {display:flex; max-width:1250px; flex-flow:row wrap; gap:20px; margin:0 auto;}
.tech_wrap button {color:#fff; padding:10px 20px; border-radius:30px; border:1.2px solid #fff; font-size:20px; font-weight:800; line-height:1.5; letter-spacing:-0.02em;}
.tech_wrap button:hover {border-color:#fff; background-color:#fff; color:#000;}
.tech_logo {text-align:center;}
.sample_tech {color:#fff; width:960px; height:200px; margin-left:17%; background-color: rgba(0,0,0,0.3); padding:30px; border-radius:20px;}
.sample_tech h4 {font-size:40px; font-weight:800; line-height:1.5; letter-spacing: -0.02em; margin-bottom:20px;}
.sample_tech p {font-weight:700; font-size:20px; letter-spacing:-0.02em; line-height:1.7;}
.sc5 .mark {width:1250px; text-align:right; margin:0 auto;}

/* 문의하기 */
.sc6 {background-color:#255D8F; width:100%; height:1319px; padding:200px 0;}
.sc6 .contact_content {max-width:1760px; margin:0 auto;}
.contact_title {text-align:center; margin-bottom:100px;}
.contact_title h2 {color:#21C0F5; margin-bottom:50px;}
.contact_title h2 br {display:none;}
.contact_title p {font-size:22px; font-weight:700; line-height:1.7; letter-spacing: -0.02em; color:#fff;}

.con_input_wrap {display: grid; grid-template-columns: 1fr auto;}
.input_wrap {background-color:#fff; max-width:1250px; padding:80px; border-radius:50px; display:flex; flex-flow:row wrap; gap: 50px;}
.input_wrap .insult {width: 49%; max-width:520px;}
.input_wrap input {background:none; width: 100%; padding:10px; border: 0; border-bottom:1.2px solid #000; font-size:18px; line-height:1.5; letter-spacing:-0.02em}
.input_wrap input::placeholder {font-size:18px; line-height:1.5; letter-spacing:-0.02em}
.input_wrap h4 {font-size:20px; font-weight:700; line-height:1.2; letter-spacing: -0.02em; margin-bottom:20px;}
.input_wrap .message {width: 100%;}
.input_wrap textarea {width:100%; height:150px; overflow:hidden; border:1px solid #000; border-radius:20px; padding:10px; resize:none;}

.agree_wrap {display:flex; flex-flow: column nowrap; padding:40px 50px; align-items:center;}
.agree_wrap img {margin:0 auto 60px; width:240px;}
.agree_wrap span {color:#fff; font-size:20px; font-weight:700; line-height:1.7; letter-spacing: -0.02em; margin-bottom:40px;}
.agree_wrap input[type=checkbox] + label {color:#fff; background:no-repeat url(/images/portfolio/checkno.svg); padding-left:30px; cursor:pointer; margin-bottom:30px; width:100%;}
.agree_wrap input[type=checkbox] + label::before {display: none;}
.agree_wrap #useragree:checked + label {background:no-repeat url(/images/portfolio/checkyes.svg);}
.agree_list {border-radius:10px; border:1px solid #fff;padding:30px; margin-bottom:30px; width:100%;}
.agree_list li {font-weight:500; letter-spacing: -0.02em; color:#fff; margin-bottom:18px;}
.agree_list li:last-child {margin:0;}
.submit_btn {
    text-align:center; color:#255D8F; background-color:#fff;
    border-radius:10px; padding:20px 0; font-weight:800; font-size:22px; letter-spacing: -0.02em; width:100%;
}
.submit_btn:hover {opacity:0.8;}

/* 마지막 페이지 */
.sc7 {width:100%; padding:200px 0; text-align:center;}
.sc7 span {margin-top:50px; font-size:30px; font-weight:700; line-height:1.5; letter-spacing: -0.02em; display:block;}

/* footer */
#footer {width: calc(100% - 160px); max-width:1760px; margin:0 auto; background-color:#000; padding:72px 0; border-radius:50px; margin-bottom:80px;}
#footer * {color: #fff;}
.footer_content {max-width:1250px; margin:0 auto;}
.footer_top {display:flex; justify-content: space-between;}
.link_list li a {color:#fff; font-size:20px; font-weight:900; line-height:1.5; letter-spacing: -0.02em;}
.link_list li { margin-bottom:15px;}
.link_list li:last-child {margin:0;}

.footer_bottom span {color:#fff; display:flex; flex-flow:column nowrap; font-size:20px; }
.footer_bottom span:first-child {font-weight:500; line-height:1.9; letter-spacing: -0.02em; margin-bottom:20px;}
.footer_bottom span:last-child {line-height:1.5; letter-spacing: -0.02em;}

@media screen and (max-width:1780px) {
    .sc4, .sc6, #footer {padding-left: 50px; padding-right: 50px;}
}

@media screen and (max-width:1636px) {
    .sc4, .sc6, #footer {padding-left: var(--inner-padding-l); padding-right: var(--inner-padding-r);}
}

/* tablet */
@media screen and (max-width:1400px) {
    /* 광고 */
    .h_top {padding: 20px 80px; height:auto;}
    .h_top br {display:block;}
    .h_top p {line-height:1.5; font-size:22px;}
    .close_btn {top:43%; width:20px;}
    h2 {font-family:'GmarketSansBold',sans-serif; font-size:40px; letter-spacing: -0.02em; line-height:1.4;}
    em {color:#21C0F5; letter-spacing:-0.02em; font-weight:700;}


    /* header, mainvs */
    .h_header {height:110px; padding:40px 80px;}
    .title_wrap {width:100%; text-align:center;}
    
    /* 기업 맞춤형 솔루션, 문의 바로가기 */
    .sc2 h3 {font-size:32px;}
    .go_contact p {font-size:20px; margin-top:22px;}
    .go_contact a {margin-top:60px;}
    .popup {width:700px; height:850px; margin:0 auto; padding-top:5%;}
    .popup img {position:absolute; width:700px;; height:auto; left:18%;}

    /* 기업소개 */
    .sc3 {padding:0 80px;}
    .company_title p {font-size:20px; width:572px; line-height:1.7;}
    .sc3 .swiper-slide {padding:0 80px; justify-content:flex-start;}
    .sc3 h4 {margin-right:40px;}
    .sc3 span {margin-right:20px; font-size:20px; letter-spacing: -0.02em; line-height:1.5;}

    /* 포트폴리오 */
    .sc4 {padding: 0 80px;}
    .sc4 .portfolio {max-width:1250px;}
    .port {width:30%; aspect-ratio: 1 / 1; height:30%;; margin-bottom:50px;}
    .com_name {font-size:28px; bottom:5%;}
    .view {font-size:28px; left:28%;}

    /* 기술 */
    .sc5 {padding:145px 80px;}
    .sample_tech {margin-left:0; width:800px; position:relative; top:37px;}
    .sample_tech h4 {font-size:32px;}
    .sample_tech p {font-size:18px;}
    .sc5 .mark {float:right;}
    
    /* 문의하기 */
    .sc6 {padding:200px 80px;}
    .con_input_wrap {width:100%;}
    .con_input_wrap>*:first-child {width: 100%;}
    .input_wrap {flex-flow:column nowrap; justify-content: space-between;}
    .input_wrap input {width:100%; margin-bottom:50px;}
    #username {margin-right:0;}
    .form03 {margin:0;}
    .agree_wrap span {font-size:18px;}

    /* footer */
    #footer {margin:0 80px;}
    .footer_content {padding: 0 50px;}
    .footer_bottom span {font-size:18px;}
}
@media screen and (max-width:1280px) {
    .main_vs {object-fit: cover; height:130%;}
    .main_vs video {object-fit: cover;}
}

@media screen and (max-width:960px) {

    h2 {font-size:32px;}

    /* 광고 */
    .h_top {padding: 20px 15px; height:auto;}
    .h_top p {}
    .close_btn {right:8%;}

    /* header, mainvs */
    .h_header {padding:40px 50px;}
    .h_header img {width:162px;}

    .title_wrap {left:0; top:65%; width:100%; text-align:center;}
    .title_wrap h2, .title_wrap p:nth-child(2) {font-size:40px;}
    .title_wrap p:nth-child(3) {font-size:30px; margin-top:60px;}

    /* 기업 맞춤형 솔루션, 문의 바로가기 */
    .sc2 {flex-flow:column nowrap; height:700px; margin-bottom:120px;}
    .sc2 h3 {}
    .solution,.go_contact {width:100%; height:auto; padding:83px 0;}
    .sc2 .solution a, .go_contact a {margin-top:40px;}
    .popup {width:700px; height:850px; margin:0 auto; padding-top:5%;}
    .popup img {position:absolute; width:600px;; height:auto; left:18%;top:15%;}


    /* 기업소개 */
    .sc3 {padding:0 15px; margin:0 0 120px;}
    .company {flex-flow:column nowrap;}
    .intro_img {width:100%; height:430px;}
    .sc3 > p {text-align:center;}
    .company_title {margin-bottom:50px;}
    .company_title h2 {text-align:center;}
    .company_title p {width:auto; margin-bottom:20px;}
    .company_title p:nth-child(3) {margin-bottom:0;}
    .company_title p br {display:none;}

    /* 기업소개 슬라이드 */
    .sc3 h4 {font-size:28px;}
    .sc3 .swiper {}
    .sc3 .swiper-slide {padding:10px 30px; justify-content: center; align-items:center;}
    .sc3 h4 {}
    .sc3 .swiper-slide p {display:flex; flex-flow:row wrap;}
    .sc3 span {font-size:18px; margin-right:20px;}
    .sc3 span:nth-child(2) {margin:0;}

    /* 포트폴리오 */
    .sc4 {margin:120px auto; padding:0 15px;}
    .sc4 .port_title {margin-bottom:50px;}
    .sc4 .port_title p {font-size:18px; width:100%;}
    .port {flex:0 0 calc((100% - 80px) / 3);}
    .com_name {font-size:16px;}
    .view {font-size:24px; left:27%;}
    
    /* 기술 */
    .sc5 {padding:120px 15px;}
    .tech_wrap {width:100%; gap:15px;}
    .sample_tech {width:100%;}
    .sample_tech p {font-size:18px;}
    .sc5 .mark {position:relative; bottom:-5%;}

    /* 문의하기 */
    .sc6 {height:auto; padding:120px 15px;}
    .contact_title h2 br {display:block;}
    .contact_title p {font-size:18px;}
    .con_input_wrap {flex-flow:column nowrap;}
    .input_wrap {margin-bottom:40px;}
    .agree_wrap {padding:40px 15px;}
    .agree_wrap span {text-align:center;}

    /* 마지막 페이지 */
    .sc7 {padding:120px 0;}
    .sc7 img {width:200px;}
    .sc7 span {font-size:22px; margin-top:20px;}

    /* footer */
    #footer {margin:0 15px;}
    .footer_top { margin-bottom:40px;}
    .footer_top p img {width:200px;}
    .footer_bottom span {font-size:18px;}
}

/* mobile */
@media screen and (max-width:720px) {
    .h_top p {font-size:16px;}
    .title_wrap p br {display:block;}
    .sc3 .swiper {height:max-content;}
    .sc3 span {font-size:16px;}
    .port_title h2 br {display:block;}
    .sc4 .port_title p br {display:none;}
    .sample_tech {top:-66px; height:auto;}
    .sc5 .mark {position:relative; top:-66px;}
    .sc6 span {font-size:16px;}
    .input_wrap {padding:50px 80px;}
    .link_list a {font-size:18px;}
    .footer_bottom span {font-size:16px;}
    .sc6 span br {display:none;}
    .footer_top p img {width:180px;}
    .link_list a {font-size:16px;}
    .contact_title {margin-bottom:60px;}
    .input_wrap {padding:50px; width:100%;}
    .view {left:25%; top:45%;}
    .port {flex:0 0 calc((100% - 15px) / 2);}
    .popup {width:700px; height:850px; margin:0 auto; padding-top:5%;}
    .popup img {position:absolute; width:100%; height:auto; left:0; top:18%;}

}
@media screen and (max-width:480px) {
    .main_vs {height:140%;}
    .popup {width:700px; height:850px; margin:0 auto; padding-top:5%;}
    .popup img {position:absolute; width:110%; height:auto; left:-5%; top:25%;}

}