@charset "UTF-8";
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css');

* {margin:0; padding:0; outline:0; box-sizing:border-box;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video,select,option {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
dl,ul,ol,menu,li {list-style:none;}
body,th,td,input,select,textarea,button {font-size:18px; letter-spacing:-0.02em; font-family:'Spoqa Han Sans Neo', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic','돋움','dotum','Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; color:#222;}
body,th,td,input,select,textarea,button {*font-family:'Spoqa Han Sans Neo', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic','돋움','dotum','Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;}
input,button,select,label {vertical-align:middle;}
button { background:transparent; border:0;}
hr {display:none;}
del,ins {text-decoration:none;}
a {color:inherit; text-decoration:none;}
address,caption,cite,code,dfn,var {font-style:normal;font-weight:normal;}
table {border-collapse:collapse; border-spacing:0;}
button,input {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;cursor:pointer;*overflow:visible;}
img {vertical-align:middle;}

html { scroll-behavior: smooth; }
body { box-sizing:border-box; word-break:keep-all; font-size:16px; color:#222; word-break:break-all;}

.clearfix {zoom:1;}
.clearfix:after {content:''; display:block; clear:both;}
.hide {position:absolute; left:-100000em; top:-100000em;}
.wrap {width:100%; max-width:1100px; margin:0 auto;}
.flex {display:flex; justify-content: space-between;}
.none {display:none !important;}
.block {display:block !important;}

header { padding:16px 0; text-align:right; width:100%; background:#000018; font-size:0;}
header a {display: inline-block;}
header img {height:35px;}

main section {text-align:center; background:linear-gradient(#eef5fb, #d2eaf9);}
main .wrap {z-index:2; position: relative; padding-top:80px; padding-bottom:80px;}
main h2 {font-size:2em; margin-bottom:40px; word-break:keep-all; line-height:1.5em;}
main h2 span {color:#007fff;}
main p {margin:0 auto 5px; word-break: keep-all;}


main .s1 {color:#fff; overflow: hidden; background:#001835 url('https://img.etnews.com/2025/onestudio/images/bg.jpg') center bottom; background-size:cover; position:relative;}
main .s1 .wrap {padding-top:200px; padding-bottom:200px; min-height:440px;}
main .s1 h2 {font-weight:400; font-size:3em; text-shadow:0 0 8px rgba(0,0,0,1);}
main .s1 h2 span {color:#08ffff; font-weight:900;}

.bokeh {position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden;}
.bokeh span {width:20px; height:20px; border-radius: 100%; backface-visibility: hidden; position: absolute; animation-name: move; animation-duration: 60s; animation-timing-function: linear; animation-iteration-count: infinite; filter: blur(5px); opacity:.8;}
.bokeh span:nth-child(odd) {filter: blur(2px); width:8px; height:8px;}
.bokeh span:nth-child(1) {background-color: #08ffff; top: 2%; left: 34%; animation-duration: 80.5s; animation-delay: -6.5s; transform-origin: -18vw -1vh; }
.bokeh span:nth-child(2) {background-color: #0cb5b5; top: 24%; left: 50%; animation-duration: 110.2s; animation-delay: -15s; transform-origin: 18vw 7vh; }
.bokeh span:nth-child(3) {background-color: #08a0ff; top: 30%; left: 17%; animation-duration: 114.9s; animation-delay: -10.2s; transform-origin: 14vw 6vh; }
.bokeh span:nth-child(4) {background-color: #e279ff; top: 48%; left: 68%; animation-duration: 113.8s; animation-delay: -3.6s; transform-origin: -8vw 24vh; }
.bokeh span:nth-child(5) {background-color: #08ffb1; top: 88%; left: 97%; animation-duration: 114.8s; animation-delay: -15.1s; transform-origin: 1vw -11vh; }
.bokeh span:nth-child(6) {background-color: #f479ff; top: 60%; left: 44%; animation-duration: 111.4s; animation-delay: -5.5s; transform-origin: 11vw 1vh; }
.bokeh span:nth-child(7) {background-color: #fff; top: 29%; left: 8%; animation-duration: 113.1s; animation-delay: -13.9s; transform-origin: -24vw 23vh; }
.bokeh span:nth-child(8) {background-color: #d7b9ff; top: 97%; left: 84%; animation-duration: 114.7s; animation-delay: -14.1s; transform-origin: -18vw -6vh;}
.bokeh span:nth-child(9) {background-color: #fff; top: 19%; left: 73%; animation-duration: 110.5s; animation-delay: -0.9s; transform-origin: -15vw -1vh;}
.bokeh span:nth-child(10) {background-color: #00aaff; top: 41%; left: 41%; animation-duration: 115.6s; animation-delay: -10.4s; transform-origin: -24vw -20vh; }

@keyframes move {
100% { transform: translate3d(0, 0, 11px) rotate(360deg); }
}


main .s2 ul {margin:40px auto 0; justify-content:center; column-gap:20px;  row-gap:20px; flex-wrap: wrap;}
main .s2 li:last-child::before {content:''; width:50px; height:50px; border-radius:50px; border:1px solid #007fff; background:rgba(255,255,255,.9) url('https://img.etnews.com/2025/onestudio/images/plus.png') no-repeat center center; background-size:30px; position:absolute; left:-35px; top:49%; box-shadow:0 1px 4px rgba(0,0,0,0.1);}

main .s2 li {background:#fff; border:1px solid #007fff; position:relative; border-radius:0.5em 0.5em 0 0; box-shadow:0 2px 10px rgba(0,0,0,0.15); flex:1; }

main .s2 strong {display:block; background-color:#007fff; padding:15px; border-radius:0.5em 0.5em 0 0;  overflow: hidden;}
main .s2 strong img {height:100%; max-height:30px;}
main .s2 .iconbox { column-gap:10px; padding:30px 30px 15px; justify-content:space-evenly;}
main .s2 .iconbox span {width:120px;}
main .s2 .iconbox span img {width:80px; opacity:.2; transform:scale(60%);}
main .s2 .iconbox span p {font-size:16px; color:#444; margin-top:10px;}

main .s2 span.active img {opacity:.9; transform:scale(100%);}
main .s2 li:first-child span:first-child img {transition:all .2s ease;}
main .s2 li:first-child span:nth-child(2) img {transition:all .4s ease;}
main .s2 li:first-child span:nth-child(3) img {transition:all .6s ease;}

main .s2 li:last-child span:first-child img {transition:all .8s ease;}
main .s2 li:last-child span:nth-child(2) img {transition:all 1s ease;}
main .s2 li:last-child span:nth-child(3) img {transition:all 1.2s ease;}
main .s2 li:last-child span:nth-child(4) img {transition:all 1.4s ease;}


main .s3 li {padding:40px; border-radius:0.5em; position: relative; transform:scale(95%);}
main .s3 li:first-child {background-color:#203864; color:#fff; transition:all .4s ease;}
main .s3 li:last-child {border:3px solid transparent; border-radius:0.5em; background-image:linear-gradient(#dbe9f6, #dbe9f6), linear-gradient(to right ,#53bbfc, #df5efc); background-origin:border-box;  background-clip:padding-box, border-box; transition:all .8s ease; }

main .s3 strong {display:block; background-color:#007fff; color:#fff; padding:15px; border-radius:50px;  font-size:20px; font-weight:400;}
main .s3 li:last-child strong {background:linear-gradient(to bottom right ,#007fff, #d431ff);}
main .s3 li:first-child .iconbox span {background-color:#242534;}
main .s3 li:last-child .iconbox span {background-color:#fff; border:1px solid #00aaff;}
main .s3 .iconbox { column-gap:15px; justify-content:space-between; margin:40px 0 30px;}
main .s3 .iconbox span {width:100%; display: inline-block; padding:10px 20px; border-radius: 0.5em; box-shadow:0 1px 2px rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.1);}
main .s3 .iconbox span img {width:80px; opacity:.8;}
main .s3 .iconbox span p {font-size:16px; color:#eee; margin-top:10px;}
main .s3 li:last-child .iconbox span p {color:#00aaff;}
main .s3 li:last-child .text {font-weight:600; color:#242534;}
main .s3 .text {font-size:20px; line-height:1.4em;}
main .s3 .text span {color:#00aaff;}
main .s3 li.process {background: url('https://img.etnews.com/2025/onestudio/images/bg_process.png') no-repeat right center; background-size: 100% 100%; width:100%; position:relative; padding:0;}
main .s3 li.process span {color:#007fff; word-break: keep-all; text-align:center; width:100px; position:absolute; top:45%; left:50%; margin-left:-60px;}

main .s3 li:first-child.active {transform: scale(90%);}
main .s3 li:last-child.active {transform: scale(100%);}


main .s4 .circle {width:500px; height:500px; margin:0 auto; position:relative;}
main .s4 .circle img {display:block; width:100%;}
main .s4 .circle > span {position:absolute; color:#444;}
main .s4 .circle > span::before {content:''; width:10px; height:10px; display:inline-block; background-color:#007fff; border-radius:10px; position:absolute; top:calc(50% - 10px);}

main .s4 .circle > span strong {color:#007fff;}
main .s4 .circle.active > span {transform: translateX(0);}

main .s4 .circle .s4_1 {text-align:right; top:95px; left:-200px; transform: translateX(-20px);  transition:all .4s ease;}
main .s4 .circle .s4_1::before {right:-20px;}
main .s4 .circle .s4_2 {text-align:left; top:95px; right:-250px; transform: translateX(20px); transition:all .8s ease;}
main .s4 .circle .s4_2::before {left:-20px;}
main .s4 .circle .s4_3 {text-align:right; top:370px; left:-285px;  transform: translateX(-20px); transition:all 1.2s ease; }
main .s4 .circle .s4_3::before {right:-20px;}
main .s4 .circle .s4_4 {text-align:left; top:370px; right:-200px; transform: translateX(20px); transition:all 1.6s ease;}
main .s4 .circle .s4_4::before {left:-20px;}

main .s5 .paper {width:500px; margin:0 auto; position: relative;  }
main .s5 .paper img {display: block; width:100%; }
main .s5 .paper > img {opacity:.7; border-radius: 0.5em; box-shadow:0 0 8px rgba(0,0,0,0.1);}
main .s5 .paper .s5_1 {position:absolute; left:-140px; bottom:-20px; border:3px dashed #007fff; width:400px; box-shadow:0 4px 8px rgba(0,0,0,0.4); transform:scale(70%); }
main .s5 .paper .s5_1.active {left:-180px; bottom:20px; transform:scale(100%); transition:all .6s ease;}

main .s5 .paper .s5_2 {position:absolute; right:-220px; top:0; border:3px dashed #007fff; width:300px; box-shadow:0 4px 8px rgba(0,0,0,0.4); transform:scale(70%);}
main .s5 .paper .s5_2.active {right:-260px; top:calc(50% - 250px); transform:scale(100%); transition:all .4s ease;}



main .s6 li {padding:30px; border-radius:0.5em; position: relative;}
main .s6 li:first-child {background-color:#203864; color:#fff; transform:translateX(-20px); transition:all .3s ease;}
main .s6 li:last-child {border:3px solid transparent; border-radius:0.5em; background-image:linear-gradient(#dbe9f6, #dbe9f6), linear-gradient(to right ,#53bbfc, #df5efc); background-origin:border-box; background-clip:padding-box, border-box; transform:translateX(20px); transition:all .9s ease;}
main .s6 li.active {transform:translateX(0);}

main .s6 strong {display:block; background-color:#007fff; color:#fff; padding:15px; border-radius:50px;  font-size:20px; font-weight:400;}
main .s6 .text {font-size:20px; line-height:1.4em; margin:20px 0 30px;}
main .s6 .text span {color:#00aaff;}
main .s6 .summury {font-size:15px; text-align:right; font-weight:300;}

main .s6 .iconbox {margin-right:20px;}
main .s6 .iconbox span { display:block;  min-width:100px; margin-bottom:20px; background-color:#242534; padding:15px; text-align:center; border-radius:0.5em; position:relative;}
main .s6 .iconbox span::after {content:''; width:0; height:18px; border:1px dashed #007fff; position:absolute; bottom:-20px; left:50%;}
main .s6 .iconbox span:last-child::after {display:none;}
main .s6 .iconbox img {height:50px; opacity:.8;}
main .s6 .iconbox p {font-size:16px; color:#eee; margin-bottom:5px;}

main .s6 li:last-child strong {background:linear-gradient(to bottom right ,#007fff, #d431ff); word-break: keep-all;}
main .s6 li:last-child .iconbox span {background-color:#fff; border:1px solid #00aaff;}
main .s6 li:last-child .iconbox span p {color:#00aaff;}
main .s6 li:last-child .text {font-weight:600;}

main .s6 .logobox {background-color:#090c19; padding:40px; margin-left:20px; flex:1; border-radius:0.5em; align-items:center; justify-content:center;}
main .s6 .logobox img {height:100px; display:inline-block;}

main .s6 li.process {background: url('https://img.etnews.com/2025/onestudio/images/bg_process.png') no-repeat right center; background-size: 100% 100%; width:100%; max-width:100px; position:relative; padding:0; transform: scaleX(-1);}
main .s6 li.process span {color:#007fff; word-break: keep-all; text-align:center; width:100px; position:absolute; top:45%; left:50%; margin-left:-50px; transform: scaleX(-1);}

main .s6 .movie { position: relative; width:270px; height:480px; overflow: hidden; margin:0 auto;}
main .s6 .movie iframe, main .s6 .movie video { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


main .s7 li {border:3px solid transparent; border-radius:0.5em; background-image:linear-gradient(#cee5f6, #cee5f6), linear-gradient(to right ,#53bbfc, #df5efc); background-origin:border-box; background-clip:padding-box, border-box; flex:1; padding:20px; transform: translateY(30px);}
main .s7 .subtitle {margin:-30px 0 40px; font-size:20px;}

main .s7 ul.flex {column-gap:20px;}

main .s7 li strong {background:linear-gradient(to bottom right ,#007fff, #d431ff); word-break: keep-all; color: #fff; padding: 15px; border-radius: 50px; font-size: 20px; font-weight: 400; display:block; }

main .s7 li figure {margin:20px 0; position:relative;}
main .s7 li figure img {width:100%; display:block; border:1px solid rgba(0,0,0,0.1); box-shadow:1px 1px 2px rgba(0,0,0,.1); border-radius:0.5em; }
main .s7 li figure .circle {width:80px; border-radius:100%; position:absolute; left:30%; top:10px; box-shadow:0 2px 4px rgba(0,0,0,0.4); border:2px solid #007fff; transform:scale(80%) translateX(-40px); transition:all 1s ease;}

main .s7 li:last-child img {width:32%; display:inline-block; }
main .s7 li:last-child img:nth-child(2) {transform: translateY(10px);}
main .s7 li .text span {color:#007fff; font-weight:600; display:block;}

main .s7 li.active {transform: translateY(0);}
main .s7 li:nth-child(1) {transition:all .3s ease;}
main .s7 li:nth-child(2) {transition:all .6s ease;}
main .s7 li:nth-child(3) {transition:all .9s ease;}
main .s7 li.active:nth-child(1) .circle {transform:scale(100%);}



footer {background:#0070c0; padding:20px 0; }
footer a img {height:30px; display:block; margin:0 auto} 



@media screen and (max-width: 1140px) {
    .wrap { padding-left:20px; padding-right:20px;}
    main strong {word-break: keep-all;}
    main .s2 ul {display:block;}
    main .s2 li:last-child {margin-top:40px;}
    main .s2 li:last-child::before {left:50%; top:0; transform: translate(-25px, -46px);}
    main .s2 .iconbox span img {max-width:80px; width:100%;}

    main .s3 ul.flex {display:block;}
    main .s3 li:first-child.active {transform: scale(100%);}
    main .s3 li.process {background: url('https://img.etnews.com/2025/onestudio/images/bg_process2.png') no-repeat right center; width:200px; height:100px; margin:0 auto;}
    main .s3 li.process span {position:static; display:inline-block; left:inherit; top: calc(50% - 25px); margin:0; padding-top: 30px;}

    main .s3 .iconbox span img {max-width:80px; width:100%;}

    main .s4 .circle {width:auto; height:auto; text-align:center;}
    main .s4 .circle img {max-width:400px; max-height:400px; width:100%; height:100%; margin:0 auto 40px;}
    main .s4 .circle.active > span {position:static; text-align:center; margin-top:20px; display:block;}
    main .s4 .circle > span {position:static; transform:translateY(10px) !important; text-align:center !important;}
    main .s4 .circle > span::before {display:none;}



    main .s5 .paper {width:100%; max-width:500px; transform:scale(100%);}
    main .s5 .paper .s5_1 {position: static; display:block; margin:-40px auto 10px; transform:scale(90%); width:100%; max-width:400px;}
    main .s5 .paper .s5_2 {position:static; display:block; margin:0 auto; transform:scale(90%); width:100%; max-width:400px;}

    main .s6 ul.flex, main .s6 div.flex {display:block;}
    main .s6 li.process {background: url('https://img.etnews.com/2025/onestudio/images/bg_process2.png') no-repeat right center; width:200px; max-width:200px; height:100px; margin:0 auto; transform:none;}
    main .s6 li.process span {position:static; display:inline-block; width:200px; margin:0; padding-top:30px; transform:none;}
    main .s6 li.process span br {display:none;}
     
    main .s6 .iconbox {display:flex; justify-content: space-between; gap:10px; margin:0;}
    main .s6 .iconbox span {flex:1 1 20%; min-width:auto;}
    main .s6 .iconbox img {width:100%; max-width:50px; height:auto;}
    main .s6 .iconbox span::after {display:none;}
    main .s6 .summury {text-align:center; margin:20px auto 0;}

    main .s6 .logobox {margin:20px auto 0;; max-width:270px; text-align:center;}
    main .s6 .logobox img {height:80px;}

    main .s6 li:first-child {transform: translateY(-20px);}
    main .s6 li:first-child.active {transform: translateY(0);}
    main .s6 li:last-child  {transform: translateY(-20px);}
    main .s6 li:last-child.active {transform: translateY(0);}

    main .s7 ul.flex {display:block;}
    main .s7 li {margin-bottom:10px;}

}

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

    main .wrap {padding:40px 20px;}
    main h2 {font-size:1.6em; line-height:1.4em; margin-bottom:20px;}
    main .s3 li {padding:20px;}
    main .s2 .iconbox {padding:20px;}
    
    main .s6 li {padding:20px;}
    main .s6 .text {font-size:18px;}
    main .s7 .subtitle {font-size:18px; margin:-10px 0 20px;}

}

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

    main .s6 .movie { width:100%; height:0; padding-bottom:178%; }

}