@charset "UTF-8";
* {font-family: 'Noto Sans KR'; margin: 0 auto; padding: 0; margin: 0;}
.hide {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
li {list-style: none;}
button {background: transparent; border: none;}
.wrap::before {content: ""; background: radial-gradient(circle at center, #07162a 0%, #0f2b46 60%, #123255 100%); height: clamp(530px, 45vw, 500px); width: 100%; position: absolute; z-index: 0; left: 0; top: 0;}
.wrap {position: relative; overflow: hidden;}
.wrap > * {position: relative; z-index: 1;}

/* header 메뉴 추가되면 이곳에 추가 */
header {max-width: 1400px; margin: 0 auto; padding: 20px 0 10px;}
header h1 a img {width: 120px;}

/* main */
main {margin: 0 auto; }
main section:nth-child(1) {position: relative; width: 100%; max-width: 1400px; margin: 0 auto 50px;}
main section:nth-child(1)::before {width: 100%; height: 100%; content: ""; background: url(../images/visual_before.png) no-repeat; position: absolute; border-radius: 100%; filter: blur(7px); overflow: hidden; z-index: -1; top: 50%; left: -20%;}
main section:nth-child(1)::after {width: 1000px; height: 1000px; content: ""; background: url(../images/visual_after.png) no-repeat; position: absolute; border-radius: 100%; filter: blur(8px); top: -153%; right: -49%; z-index: -1;}

main section:nth-child(1) .title {color: #fff; text-align: center; padding: 30px 0;}
main section:nth-child(1) .title p {font-size: 24px; word-break: keep-all; line-break: strict; white-space: normal;}
main section:nth-child(1) .about h2 {font-size: 28px; color: #fff; text-align: center;}
main section:nth-child(1) .about h2::after {content: ""; width: 50px; height: 2px; background: #fff; display: block; margin: 15px auto;}
main section:nth-child(1) .about li {color: #fff; text-align: center; font-size: 22px; word-break: keep-all; line-break: strict; white-space: normal; margin: 25px 0;}
main section:nth-child(1) .about li strong {color: #4cb0ff;}

main section:nth-child(2) {width: 100%; background: #457ba9; height: 125px; display: flex; align-items: center; justify-content: center;}
main section:nth-child(2) .contact {color: #fff; font-size: 28px; text-align: center;}
main section:nth-child(2) .contact strong {margin-right: 10px;}
main section:nth-child(3) {background: #fff;}
main section:nth-child(3) .biz {padding: 40px 0 100px;}
main section:nth-child(3) .biz h2 {font-size: 28px; text-align: center;}
main section:nth-child(3) .biz h2::after {content: ""; width: 50px; height: 2px; background: #0e101e; display: block; margin: 15px auto;}
.mockup-container * {box-sizing: border-box; width: auto;}
.mockup-container {display: flex; justify-content: center; gap: 40px; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 0 20px;}
.mockup-container div .title {display: flex; justify-content: flex-start; gap: 20px; margin: 0 0 20px 100px; align-items: center;}
.mockup1, .mockup2 {flex: 1; text-align: center;}
.mockup1 h3, .mockup2 h3 {font-size: 22px; margin-bottom: 5px;}
.mockup1 span, .mockup2 span {color: #aa871a; font-weight: bold;}
.device-mockup-area {display: flex; align-items: flex-end; justify-content: center; position: relative; width: 100%;}
.pc-frame-box, .mobile-frame-box {position: relative; line-height: 0;}
.frame-base {width: 100% !important; height: auto; display: block; position: relative; z-index: 2;}
.pc-frame-box {position: relative; min-width: 480px; max-width: 500px; z-index: 1; filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3)); width: 90%;}
.pc-inner-screen {position: absolute; top: 5.0%;  left: 4.1%;  right: 4.1%;  bottom: 11.8%;  overflow: hidden; background-color: #fff; z-index: 1;}
.pc-inner-screen img {width: 100% !important; height: auto; display: block;}
.mobile-frame-box {position: relative; width: 20%; min-width: 120px; max-width: 160px; margin-left: -10%; z-index: 5;}
.mobile-inner-screen {position: absolute; top: 8%; left: 4%;  right: 4%;  bottom: 2%;  background-color: #fff; overflow: hidden; z-index: 1;}
.mobile-inner-screen img {width: 100% !important; height: 100%; object-fit: cover; object-position: top;}
.mockup-container button {position: absolute; width: 45px; height: 45px; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer;}
.mockup-container button.slick-prev {left: 0; background: url("../images/leftBtnActive.png") no-repeat center / contain;}
.mockup-container button.slick-next {right: 0; background: url("../images/rightBtnActive.png") no-repeat center / contain;}
.mockup-container .slick-prev.is-disabled {background-image: url("../images/leftBtn.png");}
.mockup-container .slick-next.is-disabled {background-image: url("../images/rightBtn.png");}
footer {width: 100%; border-top: 1px solid #ccc;}
footer .container {display: flex; justify-content: space-around; max-width: 1400px; margin: 20px auto;}

@media (max-width: 1920px){}
@media (max-width: 1280px){
    header {padding: 30px;}
    main section:nth-child(1) {padding-bottom: 20px; margin: 0 auto; overflow-x: clip;}
    main section:nth-child(1) .title {padding: 30px;}
    main section:nth-child(1) .title p {font-size: 18px;}
    main section:nth-child(1) .about h2 {font-size: 20px;}
    main section:nth-child(1) .about li {font-size: 18px;}
    main section:nth-child(2) {height: 85px;}
    main section:nth-child(2) .contact {font-size: 20px;}
    main section:nth-child(3) .biz {padding: 40px 30px 100px 30px;}
    main section:nth-child(3) .biz h2 {font-size: 20px;}
    .device-mockup-area {width: 90%; margin: 0 auto;}
    .mockup1 h3, .mockup2 h3 {font-size: 16px;}
    main section:nth-child(1) .about {padding: 30px;}
    .pc-frame-box {min-width:250px; max-width: 250px;}
    .mobile-frame-box {min-width: 85px; max-width: 85px;}
    footer .container {padding: 0 30px; flex-direction: column; align-items: center; gap: 10px;}
}
@media (max-width: 1024px){
    .mockup-container {flex-direction: column; position: relative;}
    .mockup-container button {position: absolute; top: 110%; width: 25px; height: 25px;}
    .mockup-container button.slick-prev {left: 30%;}
    .mockup-container button.slick-next {right: 30%;}
}
@media (max-width: 800px){
    .mockup-container div .title {margin: 0 0 5px;}
}
@media (max-width: 503px){
    .wrap::before {height: clamp(630px, 45vw, 630px);}
}
@media (max-width: 480px){}
@media (max-width: 400px){}