html, body {scroll-behavior:smooth;}
body::-webkit-scrollbar {width:9px;}
body::-webkit-scrollbar-thumb {border-radius:100vw;background:#bbb;}
body::-webkit-scrollbar-track {background:#fdfdfd;}
body {font-family:'Pretendard';font-size:16px;font-weight:400;box-sizing:border-box;line-height:normal;
    margin:0;padding:0;background:#eee;color:#fff;}
div {box-sizing:border-box;}
p,span {margin:0;line-height:normal;box-sizing:border-box;}
a {text-decoration:none;color:#fff;box-sizing:border-box;}
a:hover {text-decoration:none;}
ul {margin:0;padding:0;}
li {list-style:none;box-sizing:border-box;}
button {background:none;border:0;box-sizing:border-box;cursor:pointer;}
img {box-sizing:border-box;}
input {box-sizing:border-box;}
input:focus, textarea:focus {outline:none;}
input[type="number"] {-moz-appearance:textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}
label {cursor:pointer;}
h1, h2, h3, h4, h5, h6 {font-family:'Pretendard';}


/* 공통 */
.PS {font-family:'Partial-Sans';}
body>section {position:relative;}
section>.container {width:1400px;margin:0 auto;padding:100px 0;box-sizing:border-box;}

.side_btn_wrap {position:fixed;bottom:50px;right:30px;display:flex;flex-direction:column;gap:15px;
    align-items:center;}
.side_btn_wrap .kakao {width:52px;height:52px;border-radius:100vw;display:flex;align-items:center;
    justify-content:center;background:#f7e409 url('/img/kakao_logo.png')no-repeat center/88%;}
.top_scroll {width:48px;height:48px;border-radius:100vw;display:flex;align-items:center;
    background:#dfdfdfc7;justify-content:center;font-size:22px;}
.top_scroll i {transition:all .3s ease;}
.top_scroll:hover i {margin-top:-10px;}


/* 헤더 */
header {position:sticky;top:0;z-index:10;background:#ffffffd4;backdrop-filter:blur(10px);}
header .container {display:flex;justify-content:space-between;align-items:center;padding:15px 0;
    width:1400px;margin:0 auto;}
header .h_logo_box {position:relative;width:56px;height:56px;}
header .h_logo_box img {width:100%;height:100%;position:absolute;top:0;left:0;cursor:pointer;}
header img.color {opacity:1;}
header img.white {opacity:0;}
header ul {display:flex;gap:10px;}
header ul a {font-weight:500;color:#3856af;padding:15px 25px;}
header ul a:hover {color:#152b6f;}



/* 섹션1 */
#sc-1 {background:url('/img/bg-1.png');margin-top:-87px;}
#sc-1::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;
    background:url('/img/icon-bg.png')no-repeat top 0 left 50%/1920px;pointer-events:none;}
#sc-1 .container {display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;
    min-height:100vh;}
#sc-1 .container .txt_box {}
#sc-1 .container .txt_box .p1 {text-align:center;font-size:136px;line-height:180px;
    background:url('/img/text-bg2.png')center/cover;color:transparent;
    -webkit-background-clip:text;background-clip:text;}


/* 섹션2 */
#sc-2 {background:url('/img/bg-1.png');overflow:hidden;}
#sc-2::before {content:'';position:absolute;bottom:-60%;right:-5%;width:55%;height:110%;
    background:url('/img/icon-4.png')no-repeat center/100%;}
#sc-2 .container {display:flex;align-items:center;min-height:100vh;gap:5%;}
#sc-2 .txt_box {width:50%;display:flex;flex-direction:column;gap:80px;}
#sc-2 .txt_box .p1 {font-size:44px;font-weight:400;letter-spacing:-0.6px;line-height:64px;}
#sc-2 .txt_box .p2 {font-size:24px;font-weight:500;line-height:34px;}
#sc-2 .txt_box a {display:block;width:220px;line-height:60px;text-align:center;font-size:20px;
    font-weight:700;border-radius:8px;background:linear-gradient(315deg, #0011435c, #000b2d5e);
    box-shadow:inset 4px 4px 6px #082375b3, inset -4px -4px 4px #4d73e5b3;backdrop-filter:blur(1.6px);}
#sc-2 .icon {width:45%;position:relative;}
#sc-2 .icon img {display:block;width:100%;}


/* 포트폴리오 섹션 */
#sc-pf {width:100%;height:940px;transform-style:preserve-3d;user-select:none;overflow:hidden;
    background:url('/img/bg-2.png');padding:100px 0 0;box-sizing:border-box;}
#sc-pf .PS {text-align:center;font-size:92px;background:url('/img/text-bg1.png')center/600px;color:transparent;
    -webkit-background-clip:text;background-clip:text;margin:0 0 120px;}
#sc-pf .pf_wrap {perspective:2000px;width:100%;height:400px;left:50%;top:50%;transform:translate(-50%,-50%);
    position:absolute;}
#sc-pf .pf_wrap .ring {width:100%;height:100%;transform-style:preserve-3d;user-select:none;position:absolute;
    margin-top:-400px;}
#sc-pf .pf_wrap .ring .img {width:100%;height:100%;transform-style:preserve-3d;user-select:none;
    position:absolute;width:85vw;height:110vw;box-shadow:0 2px 15px rgba(0,0,0,0.3);}
#sc-pf .pf_wrap .ring .img img {pointer-events:none;display:block;width:100%;height:100%;object-fit:cover;}


/* 섹션3 */
#sc-3 {background:url('/img/bg-2.png');overflow:hidden;padding:0 0 80px;}
#sc-3::before {content:'';position:absolute;bottom:-45%;left:50%;width:30%;height:100%;
    background:url('/img/icon-10.png')no-repeat center/100%;transform:translateX(-50%);}
#sc-3 .container {display:flex;align-items:center;flex-direction:column;justify-content:center;}
#sc-3 .p1 {font-size:92px;background:url('/img/text-bg1.png')center/cover;color:transparent;
    -webkit-background-clip:text;background-clip:text;margin:0 0 120px;}
#sc-3 ul {display:flex;gap:60px;width:100%;}
#sc-3 ul li {flex:1;position:relative;display:flex;flex-direction:column;align-items:center;}
#sc-3 ul li > p {width:100%;line-height:140px;border-radius:15px;color:#fff;font-weight:600;
    background:url('/img/bg-1.png')no-repeat center/cover;text-align:center;font-size:32px;}
#sc-3 ul li .txt {display:flex;flex-direction:column;color:#333;align-items:center;text-align:center;
    width:164px;line-height:26px;}
#sc-3 ul li .txt b {font-size:24px;font-weight:500;color:#0035d4;line-height:100px;}


/* 섹션4 */
#sc-4 {background:url('/img/bg-1.png');overflow:hidden;padding:80px 0;}
#sc-4 .container {display:flex;align-items:center;flex-direction:column;justify-content:center;
    padding:10px 0 100px;position:relative;z-index:1;}
#sc-4 .p1 {font-size:92px;background:url('/img/text-bg2.png')center/cover;color:transparent;
    -webkit-background-clip:text;background-clip:text;margin:0 0 120px;}
#sc-4 ul {display:flex;gap:145px;width:1280px;}
#sc-4 ul li {flex:1;position:relative;}
#sc-4 ul .circle {position:relative;background:rgb(0 0 0 / 20%);text-align:center;border-radius:100vw;
    height:330px;padding:90px 0;}
#sc-4 ul .circle::after {content:'';position:absolute;top:calc(50% - 10px);left:50%;
    transform:translate(-50%,-50%);width:115%;height:115%;}
#sc-4 ul li:nth-child(1) .circle::after {background:url('/img/icon-13.png')no-repeat center/100%;}
#sc-4 ul li:nth-child(2) .circle::after {background:url('/img/icon-14.png')no-repeat center/100%;}
#sc-4 ul li:nth-child(3) .circle::after {background:url('/img/icon-15.png')no-repeat center/100%;}
#sc-4 ul .circle p {display:flex;flex-direction:column;gap:20px;font-size:18px;line-height:26px;}
#sc-4 ul .circle p b {font-size:36px;line-height:50px;}
#sc-4 ul .icon {position:absolute;bottom:-90px;left:50%;transform:translateX(-50%);width:140px;height:140px;
    border-radius:100vw;background:#fff;display:flex;align-items:center;justify-content:center;}
#sc-4 ul .icon img {width:64px;}
#sc-4 ul li:nth-child(2) .icon img {margin:0 -8px -6px 0;}
#sc-4 .bubble_wrap {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
#sc-4 .bubble_wrap * {width:240px;height:240px;position:absolute;}
#sc-4 .bubble_wrap .bb-g {}
#sc-4 .bubble_wrap .bb-y {background:url('/img/bubble2.png')no-repeat center/116px;}
#sc-4 .bubble_wrap .bb-w {background:url('/img/bubble3.png')no-repeat center/32px;}
#sc-4 .bubble_wrap .bb-p {background:url('/img/bubble4.png')no-repeat center/64px;}
#sc-4 .bubble_wrap .b1 {background:url('/img/bubble1-1.png')no-repeat center/62px;
    top:40px;left:34%;animation: bubble_move infinite 3s linear;}
#sc-4 .bubble_wrap .b2 {background:url('/img/bubble1-2.png')no-repeat center/220px;
    top:160px;right:-65px;animation: bubble_move infinite 3.4s linear;}
#sc-4 .bubble_wrap .b3 {top:100px;left:30px;background-size:92px;animation: bubble_move infinite 2.4s linear;}
#sc-4 .bubble_wrap .b4 {top:-100px;left:55%;animation: bubble_move infinite 2.6s linear;}
#sc-4 .bubble_wrap .b5 {top:-65px;left:16%;animation: bubble_move infinite 2s linear;}
#sc-4 .bubble_wrap .b6 {top:160px;left:55%;background-size:24px;animation: bubble_move infinite 2.5s linear;}
#sc-4 .bubble_wrap .b7 {top:200px;left:30%;animation: bubble_move infinite 2.7s linear;}
#sc-4 .bubble_wrap .b8 {top:0px;right:15%;background-size:34px;animation: bubble_move infinite 2.3s linear;}
@keyframes bubble_move {
    0% {transform:translateY(0);}
    50% {transform:translateY(-10px);}
    100% {transform:translateY(0);}
}






/* 푸터 */
footer {background:url('/img/bg-2.png');overflow:hidden;}
footer .container {width:1400px;margin:0 auto;padding:60px 0;box-sizing:border-box;
    display:flex;flex-direction:column;gap:25px;align-items:center;justify-content:center;}
footer .p1 {display:flex;align-items:center;gap:15px;}
footer .p1 .f_logo {width:68px;cursor:pointer;}
footer .p1 i {color:#0a0a0a;font-size:16px;}
footer .p1 .red_logo {width:100px;cursor:pointer;}
footer .p1 span {font-size:24px;font-weight:800;color:#0a0a0a;}
footer .f_info {max-width:500px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;
    color:#666;font-weight:300;font-size:15px;}
footer .f_info b {font-weight:700;color:#333;}








@media (max-width:1600px) {
    header .container {width:1200px;}
    section>.container {width:1200px;}
    footer .container {width:1200px;}

    #sc-1::before {background-size:1600px;}
    #sc-1 .container .txt_box .p1 {font-size:120px;line-height:160px;}

    #sc-2 .txt_box {gap:50px;}
    #sc-2 .txt_box .p1 {font-size:38px;line-height:54px;}
    #sc-2 .txt_box .p2 {font-size:22px;line-height:32px;}

    #sc-pf .PS {font-size:86px;margin:0 0 100px;}

    #sc-3 .p1 {font-size:86px;margin:0 0 100px;}

    #sc-4 .p1 {font-size:86px;margin:0 0 100px;}
    #sc-4 ul {width:1080px;gap:100px;}
    #sc-4 ul .circle {height:293px;padding:70px 0;}
    #sc-4 ul .circle::after {width:112%;}
    #sc-4 ul .circle p b {font-size:32px;line-height:44px;}
    #sc-4 ul .circle p {}
    #sc-4 ul .icon {bottom:-65px;width:120px;height:120px;}
}

@media (max-width:1400px) {
    header .container {padding:15px 30px;width:100%;}
    section>.container {padding:0 30px;width:100%;}
    footer .container {padding:40px 30px;width:100%;}

    #sc-1::before {background-size:1400px;}
    #sc-1 .container .txt_box .p1 {font-size:100px;line-height:125px;}

    #sc-2 .txt_box .p1 {font-size:36px;line-height:54px;}
    #sc-2 .txt_box .p2 {font-size:20px;line-height:32px;}
    
    #sc-pf .PS {font-size:76px;}

    #sc-3 .p1 {font-size:76px;}
    #sc-3 ul {gap:30px;}

    #sc-4 .p1 {font-size:76px;}
}

@media (max-width:1200px) {
    #sc-1 .container {min-height:auto;height:680px;}
    #sc-1::before {background-size:1200px;}
    #sc-1 .container .txt_box .p1 {font-size:80px;line-height:96px;}

    #sc-2 {background:url('/img/bg-1.png')repeat center;}
    #sc-2 .txt_box .p1 {font-size:30px;line-height:44px;}
    #sc-2 .txt_box .p2 {font-size:18px;line-height:28px;}
    #sc-2 .txt_box a {width:200px;line-height:54px;font-size:18px;}

    #sc-pf {height:calc(60vw + 300px);}
    #sc-pf .pf_wrap .ring {margin-top:calc(-82vw + 620px);}

    #sc-4 ul {width:767px;gap:60px;}
    #sc-4 ul .circle {height:215px;padding:50px 0;}
    #sc-4 ul .circle p b {font-size:26px;line-height:30px;}
    #sc-4 ul .circle p {font-size:16px;line-height:22px;gap:15px;}
    #sc-4 ul .icon {width:80px;height:80px;bottom:-40px;}
    #sc-4 ul .icon img {width:40px;}
}

@media (max-width:991px) {
    #sc-1 .container {height:680px;}
    #sc-1::before {background-size:1080px;}
    #sc-1 .container .txt_box .p1 {font-size:64px;line-height:85px;}

    #sc-2 .container {min-height:auto;padding:160px 30px;gap:0;}
    #sc-2 .txt_box {position:relative;z-index:1;width:100%;}
    #sc-2 .icon {position:absolute;right:-120px;}
    #sc-2::before {bottom:-55%;right:-22%;width:65%;}

    #sc-pf .PS {font-size:68px;margin:0 0 80px;}

    #sc-3 .p1 {font-size:68px;margin:0 0 80px;}
    #sc-3 ul {flex-wrap:wrap;}
    #sc-3 ul li {flex:auto;width:calc(50% - 15px);}
    #sc-3 ul li .txt b {line-height:80px;}

    #sc-4 .container {padding:10px 0 20px;}
    #sc-4 .p1 {font-size:68px;margin:0 0 80px;}
    #sc-4 ul {flex-direction:column;gap:120px;}
    #sc-4 ul li {display:flex;justify-content:center;}
    #sc-4 ul .circle {width:260px;height:260px;padding:65px 0;}
    #sc-4 ul .circle p b {font-size:28px;line-height:32px;}
    #sc-4 ul .circle p {gap:20px;font-size:18px;line-height:26px;}
    #sc-4 .bubble_wrap .b1 {top:3%;left:0;}
    #sc-4 .bubble_wrap .b2 {top:35%;}
    #sc-4 .bubble_wrap .b3 {top:45%;}
    #sc-4 .bubble_wrap .b4 {top:20%;}
    #sc-4 .bubble_wrap .b5 {top:23%;}
    #sc-4 .bubble_wrap .b6 {top:52%;left:62%;}
    #sc-4 .bubble_wrap .b7 {top:64%;left:16%;}
    #sc-4 .bubble_wrap .b8 {top:-2%;}

}

@media (max-width:767px) {
    header .container {padding:10px 30px;}
    header .h_logo_box {width:42px;height:42px;}
    header ul {gap:0;}
    header ul a {padding:10px;font-size:14px;}

    #sc-1 {margin-top:-62px;}
    #sc-1 .container {height:680px;}
    #sc-1::before {background:url('/img/icon-bg_m.png')no-repeat center/102%;}
    #sc-1 .container .txt_box .p1 {font-size:40px;line-height:60px;}

    #sc-2 .txt_box {align-items:center;text-align:center;}
    #sc-2 .txt_box .p1 {font-size:24px;line-height:36px;}
    #sc-2 .txt_box .p2 {font-size:16px;line-height:26px;}
    #sc-2 .txt_box a {width:175px;line-height:52px;font-size:16px;}
    #sc-2 .icon {right:auto;left:50%;transform:translateX(-50%);bottom:-22%;width:200px;}
    #sc-2::before {bottom:-75%;right:auto;left:50%;transform:translateX(-50%);width:540px;}

    #sc-pf {height:calc(60vw + 300px);padding:80px 0 0;}
    #sc-pf .pf_wrap .ring {margin-top:calc(-35vw + 170px);}
    #sc-pf .PS {font-size:48px;margin:0 0 60px;}

    #sc-3 .p1 {font-size:48px;margin:0 0 60px;}
    #sc-3 ul li > p {line-height:100px;border-radius:10px;font-size:26px;}
    #sc-3 ul li .txt b {font-size:22px;}

    #sc-4 .p1 {font-size:40px;margin:0 0 60px;}
    #sc-4 ul {width:420px;}
}

@media (max-width:460px) {
    header .container {padding:10px 15px;}
    section>.container {padding:0 15px;}
    footer .container {padding:30px 15px;}
    footer .f_info {text-align:center;font-size:14px;line-height:18px;}

    #sc-1 .container {height:680px;}
    #sc-1::before {background-size:400px;}
    #sc-1 .container .txt_box .p1 {font-size:32px;line-height:50px;}

    #sc-2 .container {padding:30px 15px 200px;}
    #sc-2 .txt_box .p1 {font-size:20px;line-height:32px;}
    #sc-2 .icon {width:180px;bottom:-17%;}

    #sc-pf .PS {font-size:36px;margin:0 0 40px;}

    #sc-3 .p1 {font-size:36px;margin:0 0 40px;}
    #sc-3 ul {gap:20px;}
    #sc-3 ul li {width:calc(50% - 10px);}
    #sc-3 ul li > p {line-height:80px;border-radius:8px;font-size:20px;}
    #sc-3 ul li .txt b {font-size:18px;line-height:60px;}
    #sc-3 ul li .txt {font-size:14px;width:120px;line-height:22px;word-break:auto-phrase;}
    #sc-3::before {bottom:auto;top:50%;transform:translate(-50%,-50%);width:240px;height:100%;}

    #sc-4 .p1 {font-size:30px;margin:0 0 60px;}
    #sc-4 ul {width:320px;gap:100px;}
    #sc-4 ul .circle {width:220px;height:220px;padding:50px 0;}
    #sc-4 ul .circle p b {font-size:26px;}
    #sc-4 ul .circle p {gap:10px;font-size:16px;line-height:22px;}
    #sc-4 .bubble_wrap .b1 {top:3%;left:-18%;}
    #sc-4 .bubble_wrap .b2 {top:40%;}
    #sc-4 .bubble_wrap .b3 {top:14%;left:auto;right:-3%;}
    #sc-4 .bubble_wrap .b4 {top:56%;left:-20%;}
    #sc-4 .bubble_wrap .b5 {top:26%;left:71%;left:-5%;}
    #sc-4 .bubble_wrap .b6 {top:64%;left:55%;}
    #sc-4 .bubble_wrap .b7 {top:90%;left:37%;}
    #sc-4 .bubble_wrap .b8 {top:-6%;right:-15%;}
    footer .p1 .f_logo {width:50px;}
    footer .p1 .red_logo {width:80px;}
}




























































































































/**/