@charset "UTF-8";
@import url("util.css");
@import url('font.css');
@import url("https://use.typekit.net/ysi3cen.css");

:root {
    --gray-g050: #F6F8F9;
    --gray-g100: #EDEFF0;
    --gray-g150: #E6E9ED;
    --gray-g200: #D3D7DC;
    --gray-g300: #B4BEC5;
    --gray-g400: #97A4Ac;
    --gray-g450: #80909B;.main .sect-tit
    --gray-g500: #6A7C87;
    --gray-g600: #5D6D78;
    --gray-g700: #4D5A61;
    --gray-g800: #3C464D;
    --gray-g900: #2A3237;
    --cool-gray050: #F1F5F9;
    --primary-navy: #020118;
    --primary-purple: #5E50FF;
    --mono-white: #fff;
    --mono-black: #000;
}

html{overflow-x:hidden; font-size: 16px}
body{overflow-x: hidden; font-family: "canada-type-gibson", Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",  Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color:var(--gray-g900); font-weight: 400; letter-spacing: -.016em;}
body, p, span, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select, label{margin: 0;padding: 0}
a, a:hover, a:focus, a:active{text-decoration: none;color: inherit}
li{list-style: none}
address, em{font-style: normal}
[role="button"]{cursor: pointer}
table{width: 100%}
textarea{resize: none}
strong, b{font-weight: 700}
img{vertical-align: top;max-width: 100%}
br{font-family: arial}
button{background: none;border: 0}
figure{margin-bottom: 0}
a,button,input,textarea{transition: border-color .4s, background .4s, color .4s, opacity .4s, box-shadow .4s}
label{cursor: pointer}
.row {margin-left: -16px; margin-right: -16px;}
.row.row.no-gutters {margin-left: 0; margin-right: 0;}
.row [class^=col-] {padding: 0 16px;}
.row.no-gutters [class^=col-] {padding-left: 0;padding-right: 0;}
.skip{z-index: 200;background: #000;text-align: center;color: #fff}
.skip:active, .skip:focus{position: absolute;padding: .5rem;color: #fff}
.con-panel{position:relative; max-width:1280px; width:100%; margin:0 auto}
.con-panel.v2{max-width:1200px}
.con-panel.v3{max-width:1400px}
.fc-wh{color: var(--mono-white) !important}
.fc-g050{color: var(--gray-g050) !important}
.fc-g100{color: var(--gray-g100) !important}
.fc-purple{color:var(--primary-purple) !important}
.psr{position:relative !important}
.zup{position:relative; z-index: 5;}
.zup10{position:relative; z-index: 10 !important}

html:not(.en) .only-en,
html:not(.ko) .only-ko,
html:not(.de) .only-de,
html:not(.es) .only-es,
html:not(.vi) .only-vi,
html:not(.ja) .only-ja,
html:not(.mn) .only-mn {display:none}
html.en .only-en,
html.ko .only-ko,
html.de .only-de,
html.es .only-es,
html.vi .only-vi,
html.ja .only-ja,
html.mn .only-mn{display:inline-block}

/* button */
[class^=btn-]{display: inline-block;border-radius: 8px;}
.btn-go-rocket{padding:15px 25px;border:1px solid var(--primary-navy); border-radius: 50px; font-size:18px; font-weight: 500; background-color: var(--mono-white);}
.btn-go-rocket i{color: var(--gray-g900); margin-left: 8px}
.btn-go-rocket:hover{background-color: var(--primary-navy); box-shadow:0 0 10px 0 rgba(94, 80, 255, .6); color:var(--mono-white)}
.btn-go-rocket:hover i{color: var(--primary-purple)}
.btn-go-rocket.v2{background-color: var(--primary-purple); color: var(--mono-white); border:0}
.btn-go-rocket.v2 i{color: var(--mono-white)}
.btn-go-rocket.lg{font-size:20px}
.btn-go-rocket.wh{ border-color: var(--mono-white); background-color: rgba(0,0,0, .2); color:var(--mono-white)}
.btn-go-rocket.wh.v2{border:1px solid var(--mono-white); background-color:#000}
.btn-go-rocket.blk{background-color:#000; color:var(--mono-white)}
.btn-go-rocket.blk i{color:var(--mono-white)}
.btn-common-more{width:100%; padding:12px; background-color: var(--gray-g100);border-radius: 8px; text-align: center; color: var(--gray-g700)}
.btn-common-more:hover{background-color: var(--gray-g150);}
.btn-common-more.xs{font-size:14px}
.btn-sign{border:1px solid var(--gray-g200)}
.btn-primary{border-color:var(--primary-purple); background-color: var(--primary-purple);}

/* icons */
[class^=icon-]{display: inline-block;overflow: hidden;margin: 0;padding: 0;border: 0;background-color: transparent;background-position: 50% 50%;background-repeat: no-repeat;font-size: 0;line-height: 0;text-decoration: none;vertical-align: top;text-indent: -1000em;background-size: auto 100%;outline: 0 !important}
.icon-logo{width:175px;height:22px;background-image:url(../img/logo.svg);}
.icon-logo-wh{width:162px;height:20px;background-image:url(../img/logo_wh.svg)}
.icon-logo-symbol{width:100px;height:100px;background-image: url(../img/symbol.svg);}
[class^=icon-emoji]{width:40px;height:40px;background-image: url(../img/emoji_coffee.png);}
.icon-emoji-pingpong{background-image: url(../img/emoji_pingpong.png);}
.icon-emoji-rocket{background-image: url(../img/emoji_rocket.png);}
[class^=icon-download]{width:135px; height:40px; background-image: url(../img/download_appstore.png);}
.icon-download-google{width:133px;height:40px;background-image: url(../img/download_googleplay.png);}
[class^=icon-workmodel]{width:28px;height:28px;background-image:url(../img/workmodel_project.svg)}
.icon-workmodel-workflow{background-image:url(../img/workmodel_workflow.svg)}
.icon-workmodel-bearpay{background-image:url(../img/workmodel_bearpay.svg)}
.icon-workmodel-chat{background-image:url(../img/workmodel_chat.svg)}
.icon-workmodel-sign{background-image:url(../img/workmodel_sign.svg)}
.icon-workmodel-showcase{background-image:url(../img/workmodel_showcase.svg)}
[class^=icon-lang-circle]{width:15px;height:15px;background-image:url(../img/lang01.svg)}
.icon-lang-circle02{background-image:url(../img/lang02.svg)}
.icon-lang-circle03{background-image:url(../img/lang03.svg)}
.icon-lang-circle04{background-image:url(../img/lang04.svg)}
.icon-lang-circle05{background-image:url(../img/lang05.svg)}
.icon-lang-circle06{background-image:url(../img/lang06.svg)}
.icon-lang-circle07{background-image:url(../img/lang07.svg)}
[class^=icon-module-]{width:130px;height:107px;background-image: url(../img/module_i01.svg)}
.icon-module-function{background-image: url(../img/module_i02.svg);}
[class^=icon-model-slider]{position:absolute; top:20px;left:12px; width:30px;height:30px;background-image:url(../img/modelslide_i_project.svg)}
.icon-model-slider-workflow{background-image:url(../img/modelslide_i_workflow.svg)}
.icon-model-slider-chat{background-image:url(../img/modelslide_i_chat.svg)}
.icon-model-slider-bearpay{background-image:url(../img/modelslide_i_bearpay.svg)}
.icon-model-slider-ai{background-image:url(../img/modelslide_i_ai.svg)}
.icon-model-slider-showcase{background-image:url(../img/modelslide_i_showcase.svg)}
.slick-current .icon-model-slider-project{background-image:url(../img/modelslide_i_workflow_on.svg)}
.slick-current .icon-model-slider-workflow{background-image:url(../img/modelslide_i_workflow_on.svg)}
.slick-current .icon-model-slider-chat{background-image:url(../img/modelslide_i_chat_on.svg)}
.slick-current .icon-model-slider-bearpay{background-image:url(../img/modelslide_i_bearpay_on.svg)}
.slick-current .icon-model-slider-ai{background-image:url(../img/modelslide_i_ai_on.svg)}
.slick-current .icon-model-slider-showcase{background-image:url(../img/modelslide_i_showcase_on.svg)}

/* media */
.video-container{position:relative; padding-bottom:55.25%; height:0}
.video-container .video{position:absolute; top:0; left:0; width:100%; height:100%; transform: scale(1.02); margin-top: 1px;}

/* layout */
body{transition: background-color 1s ease;}
body.open{overflow: hidden;}
body.theme-dark {background-color: var(--mono-black);}

.include-header-style{display:flex; flex:1; justify-content:space-between}
.main{background-image:url(../img/messagebg.png); background-position: 50% 0%; background-repeat: no-repeat; background-size:100% auto}
.hd-logo{display: flex; align-items: center; margin-top:-3px}
#hd {position:fixed;top:0;right:0;left:0;width:100%;z-index: 9999;}
#hd .open{border-bottom:1px solid var(--gray-g050)}
#hd .con-panel {height:76px; align-items: center;}
#hd .nav-mn {display: flex; gap: 12px; align-items: center;}
#hd .nav-mn li span, #hd .nav-mn li a{display: inline-block; padding:8px 12px; border-radius: 8px; font-weight: 500; font-size: 16px; color: var(--gray-g900); cursor: pointer;}
#hd .nav-mn li button i,  .nav-mn .dropdown-toggle::after{color: var(--gray-g600)}
#hd .nav-mn .dropdown-item:hover{background-color: var(--gray-g050);}
#hd .nav-mn .dropdown-item.on{color:var(--primary-purple)}
#hd .nav-mn li span:hover, #hd .nav-mn li.active span, #hd .nav-mn li button:hover{background-color: var(--gray-g050);}
#hd .nav-mn li a:hover{background-color: var(--mono-white);}
#hd .nav-mn li span .arrow{font-size:11px; margin-left:4px;color: var(--gray-g450)}
#hd .nav-mn li span:hover .arrow{color: var(--gray-g600)}
#hd .nav-mn li.active span .arrow{color: var(--primary-purple); transform: rotate(180deg)}
#hd.v3.sub .icon-logo{background-image:url(../img/logo_wh.svg)}
#hd.v3 .nav-mn{margin-left:40px}
#hd.v3 .nav-mn.menu li:first-child{position:relative; font-weight:500; font-size:14px; color: var(--gray-g400)}
#hd.v3 .nav-mn.menu li:first-child{margin-right:15px; }
#hd.v3 .nav-mn.menu li:first-child:before{content: ''; display: inline-block; position:absolute; top:50%; right:-10px; width:1px; height:10px; background-color:var(--gray-g450); transform: rotate(36deg) translate(0, -50%); }
#hd.v3.sub .nav-mn a {color:#fff}
#hd.v3.sub .nav-mn li a:hover{background-color: var(--mono-black);}
#hd.v3.sub .hd-util .nav-mn li a{color:var(--gray-g200)}
#hd.v3.sub .hd-util .dropdown-item{color:var(--gray-g200) !important}
#hd.v3.sub .nav-mn li button i, #hd.v3 .nav-mn .dropdown-toggle::after{color:var(--gray-g200)}
#hd.v3.sub .dropdown-menu{border:1px solid var(--gray-g800); background-color:var(--mono-black)}
#hd.v3.sub .nav-mn li.on a{background-color:rgba(94, 80, 255, .4)}
.if-scroll #hd.v3 .icon-logo{background-image:url(../img/logo.svg)}
.if-scroll #hd.v3 .nav-mn a, .if-scroll #hd.v3 .hd-util .nav-mn li a {color:var(--gray-g900)}
.if-scroll #hd.v3 .nav-mn li button i, .if-scroll #hd.v3 .nav-mn .dropdown-toggle::after{color:var(--gray-g700)}
.if-scroll #hd.v3 .nav-mn li a:hover{background-color:var(--gray-g050)}
.if-scroll #hd.v3 .nav-mn.menu li:first-child{color:var(--gray-g400)}
.if-scroll #hd.v3 .nav-mn.menu li:first-child:before{background-color:var(--gray-g300)}
.if-scroll #hd{box-shadow: 0px 0px 20px 0px rgba(189, 205, 219, 0.30);}
.if-scroll.over-hd #hd.v2 .nav-dept{display: none;}
.if-scroll #hd.v3 .nav-mn li.on a{background:none; color:var(--primary-purple)}

#hd .hd-util .nav-mn li a{font-weight: 400; color: var(--gray-g700)}
#hd .nav-mn li a.util-start{background-color: var(--primary-purple); color:var(--mono-white) !important; box-shadow:0 0 15px 0 rgba(94, 80, 255, .5)}
#hd .nav-mn li a i{font-style:normal}
.hd-gnb{margin-left: 24px}
body.open #hd, .if-scroll #hd, #hd.v2{background-color: var(--mono-white);}
.if-scroll #hd .nav-mn li a.util-start:hover{background-color:#5143F6}

.nav-dept{background-color: var(--gray-g900);}
.page-here{padding-right:40px; font-weight: 500; color: var(--gray-g050);}
.nav-dept .con-panel{display: flex; align-items: center; height: 56px !important}
.nav-dept ul{display: flex;}
.nav-dept ul a{position: relative; display: inline-block; margin-right:30px; font-weight: 300; font-size:16px; color: var(--gray-g100)}
.nav-dept ul li a.on::before{content: ''; display: inline-block; position: absolute; left:50%; bottom:-5px; width:34px; height:1px; background-color: #A3B7ED; transform: translate(-50%, 0);}
.nav-dept ul a:hover{color:#A3B7ED}

#gnb{display: none; position:fixed; top:76px;right:0;bottom:0;left:0; width:100%;height:100%; background:rgba(42, 50, 55, .6); z-index:9999;}
#gnb.open{display: block;}
#gnb nav{display:flex; min-height:460px;border-top: 1px solid var(--gray-g150);background: var(--mono-white);box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.10);}
#gnb .inner-contents{width:70%; padding-top:30px; padding-bottom:30px;margin-right:30px}
#gnb .inner-contents.v2{width:30%; background-color: var(--gray-g050);padding-left:20px; padding-right:20px; margin-right:0}
#gnb .inner-contents.v2 .title{font-size:15px;font-weight: 500; color:var(--gray-g800);}
#gnb .nav-con{display: none;width:100%}
#gnb .nav-con.show{display: flex;}
.gnb-ref-box{padding-top:16px; margin-top:30px; border-top:1px solid var(--gray-g200)}
.gnb-ref-box h5{font-size:15px; font-weight: 500; margin-bottom:4px}
.gnb-ref-box a{font-size:14px; color: var(--gray-g700)}
.gnb-ref-box a i{font-size:11px; color: var(--gray-g500)}
.gnb-list{display: flex;}
.gnb-list .dept li{margin-bottom:12px}
.gnb-list .dept li:first-child{font-size:14px; font-weight: 700; margin-bottom:16px}
.gnb-list .dept li a{position: relative; padding:8px 32px 8px 8px; border-radius:4px; font-size:14px; color:var(--gray-g700);}
.gnb-list .dept li a::before{content: '\f0a9';position:absolute; top:50%; right:8px; font-family: "Font Awesome 5 Free";font-weight: 900; font-size:12px; color: var(--gray-g400); transform:translate(0, -50%); opacity: 0;} 
.gnb-list .dept li a:hover{background-color: var(--gray-g050); font-weight: 500; color:var(--gray-g900);}
.gnb-list .dept li a:hover::before{opacity: 1;}
.gnb-list .dept li:last-child{margin-bottom:40px}
.gnb-menu-list{display: flex; flex-wrap: wrap;}
.gnb-menu-list li {margin-bottom:2%;}
.gnb-menu-list li a{display: inline-block; width:100%;height:100%; padding: 16px 20px 22px;border-radius:8px;}
.gnb-menu-list li.v2 a{height: 242px;}
.gnb-menu-list li.v2 [class^=icon-module-]{position: absolute; right:25px; bottom:20px}
.gnb-menu-list li a:hover{background-color: var(--gray-g050);background-repeat: no-repeat;background-position:100% 100%; background-size:90% auto;}
.gnb-menu-list li.v2 a:hover {background-image:url(../img/gnb_module_bg.svg); transition: 0s}
.gnb-menu-list li em{display: flex; justify-content: space-between; align-items: baseline;}
.gnb-menu-list li em b{font-size:18px; font-weight: 700;}
.gnb-menu-list li em i{font-size:15px; color: var(--gray-g400);opacity: 0;}
.gnb-menu-list li p{font-size:14px; color:var(--gray-g500)}
.gnb-menu-list li:hover em i{opacity: 1;}
.gnb-template-list{display: flex; flex-wrap: wrap; margin-left:-4px; margin-right:-4px}
.gnb-template-list li{padding:4px}
.gnb-template-list a{display: inline-block; width:100%; min-height:140px; padding:16px; background-color:var(--mono-white); border:1px solid var(--gray-g150); border-radius:8px}
.gnb-template-list a b{display: block; font-weight: 400}
.gnb-template-list a span{display:flex; align-items: center; font-size:11px; color: var(--gray-g600)}
.gnb-template-list a:hover{border-color: var(--gray-g300);}
.gnb-template-list [class^=icon-workmodel]{width:12px; height:12px; margin-right:2px}
.gnb-news-list li{margin-bottom:8px}
.gnb-news-list a{display: inline-block; width:100%;height:100%; padding:12px; border-radius: 8px;}
.gnb-news-list a:hover{background-color: var(--gray-g100);}
.gnb-news-list a p{font-size:12px; color: var(--gray-g600)}
.gnb-news-list .title{display: flex;margin-bottom:8px; font-size:14px; font-weight: 500;}
.gnb-news-list .title em{display: inline-block; padding:2px 6px; margin-right:4px; background-color: var(--gray-g600); border-radius: 4px; font-size:11px;font-weight: 400; color: var(--mono-white)}
.gnb-release-list li{padding:12px 12px 20px; background-color: var(--mono-white); border-radius:8px; border: 1px solid var(--gray-g150);}
.gnb-release-list p{font-size:12px; color: var(--gray-g600)}
.gnb-banner{padding:20px; background-color: var(--mono-white);border-radius: 8px; text-align: center;}

#ft{position: relative; width:100%; padding:50px 0 12px;background-color: #131313; background-image:url(../img/ftbg.svg); background-position:50% 50%}
#ft .logo-area{margin-bottom: 45px}
#ft .copyright-area{display: flex; justify-content: space-between; padding:12px 0; margin-top:45px; border-top:1px solid #2B2B2B}
#ft .sitemap-area{display: flex; justify-content: space-between;}
#ft .sitemap-area li{color: var(--gray-g300); font-weight: 300; margin-bottom:13px}
#ft .sitemap-dept {display:flex; gap:20px}
#ft .sitemap-dept li:first-child{font-size:15px; font-weight:400; color: var(--mono-white)}
#ft .sitemap-dept li a{display:inline-flex;align-items: center;}
#ft .sitemap-dept li i{display:none; margin-right:4px}
#ft .sitemap-dept li.on i{display:inline-block}
#ft .sitemap-dept li.on a{text-decoration: underline;}
#ft .ft-sitemap>li{min-width:130px;margin-right:20px}
#ft .ft-languages li{font-size:14px; margin-bottom:10px; text-align: right;}
#ft .ft-languages li a {justify-content: flex-end}
.copyright-area .terms-area{display: flex; align-items: center; font-size: 13px; color: var(--gray-g300)}
.copyright-area .terms-area span{margin-right:18px}
.copyright-area .terms-area a{font-size:12px; margin:0 8px}
.copyright-area .terms-area em{display: inline-block;width:1px;height:10px; background-color: var(--gray-g800);}
.copyright-area .flow-area{display: flex; align-items: center}
.copyright-area .flow-area em{display: inline-block;width:1px;height:23px; margin:0 20px; background-color: var(--gray-g800);}
.copyright-area .flow-area .i-sns i{font-size:22px; color: var(--mono-white); opacity: .4;}

/* index */
.main .sect-tit{font-size: 48px; font-weight: 700; line-height: 1.2em; color:var(--mono-black); text-align: center; transition: color 1s;}
.main .sect-tit + p{margin-top: 12px; margin-bottom:26px; font-size: 20px; color: var(--gray-g800); transition: color 1s;}
html:not(.ko) .main .sect-tit {font-size:44px; font-weight:600}
html:not(.ko) .main .sect-tit span{font-weight:600}

.main-message {min-height:680px; padding-top:80px; text-align: center; }
.main-message .sect-tit {font-size: 72px}
.main-message .sect-tit + p {font-size: 24px}
html:not(.ko) .main-message .sect-tit {font-size:68px; line-height:1.1em;}
html.mn .main-message .sect-tit {width:60%; margin:0 auto}
html:not(.ko) .main-message .sect-tit span {font-weight: 600;}
html:not(.ko) .main-message .sect-tit + p {font-size:20px}
.main-message .con-panel{display:flex; align-items: center; justify-content: center; min-height:680px;}
.main-message [class^=obj-]{position:absolute; background-color:var(--mono-white); border-radius:12px; padding:20px; box-shadow:6px 10px 18px 0 rgba(144,146,181, .3);}
.main-message .obj-l01 {top:90px; left:-20px; opacity: 1; transition: all 1s;}
.main-message .obj-l02 {top:220px; bottom:auto; left: 77px; background-color:var(--mono-white);padding:10px; opacity: 1; transition: all 1s;}
.main-message .obj-l03 {left: -100px; bottom: 60px; opacity: 1; transition: all 1s;}
.main-message .obj-r01 {top:40px; right: 0; bottom:auto; left:auto; opacity: 1; transition: all 1s;}
.main-message .obj-r02 {top:264px; right: -90px; bottom:auto; left:auto; opacity: 1; transition: all 1s;}
.main-message .obj-r03 {right:60px; bottom: 45px; left:auto; opacity: 1; transition: all 1s;}
.if-visual-scroll .main-message [class^=obj-l]{top:auto; bottom:-300px; left:30%; opacity: 0; transition: all 1s;}
.if-visual-scroll .main-message [class^=obj-r]{top:auto; bottom:-300px; right:30%; opacity: 0; transition: all 1s;}
html:not(.ko) .main-message .obj-l02 {left:10px}
html:not(.ko) .main-message .obj-l03 {left:-127px}

.main-slider-frame li>div{overflow: hidden; width:100%; border:1px solid var(--gray-g100); border-radius:12px; background-color:var(--mono-white)}
.main-slider-frame .model-slider{z-index:9}
.main-slider-frame .bg-panel{display:none; position:absolute; bottom:-35px; left:50%; transform: translate(-50%, 0); width:100%; height:200px; margin:0 auto; border-radius: 12px; background: rgb(163,183,237); background: linear-gradient(148deg, rgba(163,183,237,1) 0%, rgba(218,163,237,1) 100%); transform: translate(-50%, 0); opacity: .2;} 
.model-slider-control-card {position:relative; display: flex; width:100%;}
.model-slider-control-card:before {content: ''; display: inline-block; position:absolute; width:20px; height:100%; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); z-index: 99;}
.model-slider-control-card:after {content: ''; display: inline-block; position:absolute; right:0; width:20px; height:100%; background: rgb(255,255,255); background: linear-gradient(260deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); z-index: 99;}
.model-slider-control-card .slick-track{display: flex !important; gap:12px; padding:30px 0}
.model-slider-control-card li{display: flex !important; flex:1; background-color: var(--cool-gray050); border-radius: 8px; cursor: pointer;}
.model-slider-control-card .active-line{position:relative; display: inline-block; width:27px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.model-slider-control-card .info{flex:1; padding:16px 10px 16px 20px}
html.ko .model-slider-control-card .info {padding:16px 16px 16px 20px}
.model-slider-control-card .info strong{font-size: 20px; font-weight: 600; line-height:1em}
.model-slider-control-card .info p{height:54px; font-size:14px; color: var(--gray-g700); line-height: 1.3em; margin:2px 0 16px}
.model-slider-control-card .info span{display:none; font-size:12px; font-weight: 500; color:var(--gray-g300)}
.model-slider-control-card li.slick-current .active-line{background: rgb(94,80,255); background: linear-gradient(180deg, rgba(94,80,255,1) 26%, rgba(83,14,196,1) 100%);}
.model-slider-control-card li.slick-current { background: rgb(2,1,24); background: linear-gradient(0deg, rgba(2,1,24,1) 0%, rgba(17,15,44,1) 100%); box-shadow:0 0 30px 0 rgba(0,0,0, 0.4);}
.model-slider-control-card li.slick-current .active-line{opacity: 1;}
.model-slider-control-card li.slick-current span{color: var(--primary-purple)}
.model-slider-control-card li.slick-current strong{color: var(--gray-g100)}
.model-slider-control-card li.slick-current p{color: var(--gray-g200)}
.model-slider-control-card .slick-list {position:relative; width:100%; padding:0 20px !important}
.model-slider-control-card .slick-list:before{background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,1) 31%, rgba(255,255,255,0) 100%);}
.model-slider-control-card .slick-list:after {left:auto; right:0; background: rgb(255,255,255); background: linear-gradient(270deg, rgba(255,255,255,1) 31%, rgba(255,255,255,0) 100%);}
.model-slider-control-card .slick-arrow, .model-slider-control-card .slick-dots{display: none !important}

.main-use{overflow:hidden; position:relative; width:100%; text-align: center; margin-top:40px; padding:40px 0}
.main-use .use-txt:before{content: 'Build your Super APP'; display: inline-block; position: relative; top:20px; font-size:90px;font-weight: 600; color: var(--cool-gray050); letter-spacing: -.02em;}
.main-use .use-txt .txt-area{overflow:hidden; display:block; height:47px}
.main-use .use-txt .txt-area .copy{transform: translateY(0px); transition: all 1s;}
.main-use .use-txt .txt-area .copy.a1{transform: translateY(-45px);}
.main-use .use-txt .txt-area .copy.a2{transform: translateY(-90px);}
.main-use .use-txt .txt-area .copy.a3{transform: translateY(-136px);}
.main-use p{font-size:30px}
.main-use p strong{font-weight: 500}
.base-model-frame{opacity: 0; position:relative; max-width:74.01vw; height:36.146vw; margin:0 auto; background-image:url(../img/build_frame.png);background-size:100% auto;background-repeat: no-repeat;background-position:50% 0}
.base-model-frame [class^= icon-build-] {position:absolute}
.base-model-frame:before {content:''; position:absolute; left:-13.854vw; width:36.979vw; height:10.99vw; background-image:url(../img/build_frame_back_left.png)}
.base-model-frame:after {content:''; position:absolute; right:-13.854vw; width:36.979vw; height:10.99vw; background-image:url(../img/build_frame_back_right.png)}
.base-model-frame:before, .base-model-frame:after {bottom: 0; background-size:100% auto}
.icon-build-base{width:31.875vw;height:22.5vw; top:2.708vw;left: 55%; transform: translate(-50%, 0); background-image:url(../img/basemodel.svg)}
.icon-build-project{opacity: 0; width:15.208vw; height:13.438vw; top:13.203vw; left: 12.969vw; background-image:url(../img/md_project.svg); z-index:5}
.icon-build-automation{opacity: 0; width:15.208vw; height:14.323vw; top:19.635vw; left: 26.667vw; background-image:url(../img/md_automation.svg); z-index:10}
.icon-build-ai{opacity: 0; width:6.12vw; height:4.036vw; top:18.75vw; right:9.583vw; background-image:url(../img/md_ai.svg); z-index:5}
.icon-build-chat{opacity: 0; width:6.12vw; height:4.036vw; top:22.292vw; right:15.521vw; background-image:url(../img/md_chat.svg); z-index:5}
.icon-build-search{opacity: 0; width:6.12vw; height:4.036vw; top:25.885vw; right:21.51vw; background-image:url(../img/md_search.svg); z-index:5}
.build-pin-project{opacity: 0; display: inline-block; position:absolute; width:6.146vw; height:7.318vw; top:10.469vw; left:24.844vw; background-image:url(../img/build_pin_project.svg); background-size: 100% auto}
.build-pin-automation{opacity: 0; display: inline-block; position:absolute; width:6.042vw; height:7.214vw; top:16.094vw; left:34.063vw; background-image:url(../img/build_pin_automation.svg); background-size: 100% auto}
.icon-build-base-module00{opacity: 0; top:13.542vw; left:39.948vw; width:3.021vw; height:1.771vw; background-image:url(../img/basemodel_module01.svg)}
.icon-build-base-module01{opacity: 0; top:10.938vw; left:41.536vw; width:7.5vw; height:7.161vw; background-image:url(../img/basemodel_module02.svg)}
.icon-build-base-module02{opacity: 0; top:12.76vw; right:21.875vw; width:6.042vw; height:3.568vw; background-image:url(../img/basemodel_module03.svg)}
[class^= build-pin-module]{display: inline-block; position:absolute; width:2.292vw;height:1.042vw; border-bottom-right-radius: 0.313vw; border-bottom-left-radius:0.313vw}
.build-pin-module-chat{top:26.65vw; right:20.4vw; background-color:#5E50FF; transform: rotate3d(19, 13.7, 18, -68deg)}
.build-pin-module-ai{top:22.315vw; right:13vw; background-color:#5E50FF; transform: rotate3d(19, 13.7, 18, -68deg)}
.icon-build-line{opacity: 0; display: inline-block; position:absolute; top:21.367vw; left:23.568vw; width:37.031vw; height:13.125vw}
.icon-build-line svg{ width:100%; height: 100%}

.main-workspace{position:relative; padding:120px 0; text-align: center}
.main-workspace .con-panel{position: relative; z-index: 5;}
.main-workspace .deco-circle{position:absolute; top:5%; right:-15%; display: inline-block; width: 1564.89px; height: 980.396px;transform: rotate(-6.214deg);flex-shrink: 0; border-radius: 1564.89px; background: radial-gradient(47.71% 43.31% at 51.63% 50.28%, #9838F8 26.04%, #3D17A1 58.33%, rgba(27, 10, 69, 0.00) 100%); opacity: 0; transition: all 1s ease;}
.theme-dark .deco-circle{opacity: 1;}
.main-workspace .sect-tit b{display: inline-block;  padding:4px 20px; font-weight: 600; border-radius: 60px; border:2px  solid var(--primary-purple); color: var(--primary-purple); transition: all 1s;}
.main-workspace .sect-tit + p span small{color:var(--primary-purple)}
.workspace-screen{overflow:hidden; position: relative; width:100%;border-radius: 12px; background-color:var(--mono-white); border:1px solid var(--gray-g150); transition: all 1s; z-index: 5;}
.theme-dark .sect-tit{color: var(--mono-white)}
.theme-dark .sect-tit+p{color:var(--gray-g100)}
.theme-dark .sect-tit b{color: var(--primary-purple); border-color:#2D1B86; background: rgba(0,0,0, .3);}
.theme-dark .workspace-screen{background-color: rgba(0,0,0, .8); border-color:#261549}

.main-modules{padding:120px 0 50px; text-align: center;}
.modules-nav{position:relative; display:inline-flex; justify-content: center; flex-basis: fit-content; background-color: var(--primary-navy); padding: 8px; border-radius: 12px; margin-top: 40px; margin-bottom:30px; z-index:9}
.nav-pills .nav-link{border-radius: 12px !important}
.modules-nav.nav-pills .nav-link.active, .modules-nav.nav-pills .show>.nav-link{background-color: var(--primary-purple); color:var(--mono-white)}
.modules-nav.nav-pills .nav-link{color: var(--gray-g400)}
.modules-nav.nav-pills .nav-link:hover{background-color: rgba(255,255,255, .1);}
.modules-nav.nav-pills .nav-link.active:hover{background-color:#5A41F4}
.modules-nav.nav-pills .nav-link.come-indicator{position:relative; border:2px dashed var(--primary-purple)}
.modules-nav.nav-pills .nav-link.come-indicator:before{content: 'click me!'; position:absolute; top:-32px; right:0; font-weight: 600; color:var(--primary-purple); transform: rotate(-6deg);}
.modules-content {position:relative; z-index:9}
.module-set-list {position: relative; justify-content: center; z-index: 9;}
.module-set-list li{background-color:var(--mono-white); border-radius: 8px; cursor: pointer;box-shadow: 0px 0px 20px 0px rgba(189, 205, 219, 0.30);}
.module-set-list li>div{position: relative; width:148px; height:96px; padding:15px 14px; justify-content: flex-start;}
.module-set-list li>span{display: inline-block;width:100%; padding:8px; border-top:1px solid var(--gray-g100); font-size:11px;color:var(--gray-g400); text-align: left;}
.module-set-list li>span i{margin-right:4px; font-size:10px}
.module-set-list li>div p{font-size: 16px; font-weight: 500; line-height:1.2em; text-align: left;}
.module-set-list li:hover {box-shadow: 0px 0px 20px 0px rgba(124, 129, 186, 0.6);}
.module-set-list .iconbox{position: absolute; right:12px; bottom:12px; display: flex;justify-content: center; align-items: center; width:34px; height:34px;border:1px solid var(--gray-g100);border-radius: 8px;}
.module-set-list .iconbox i {font-size:18px; color:var(--gray-g400)}
.module-set-list li.function{background: rgb(141,87,252); background: linear-gradient(137deg, rgba(141,87,252,1) 0%, rgba(94,80,255,1) 100%);color:var(--mono-white)}
.module-set-list li.function .iconbox{border:0; background-color:#4E43CE;}
.module-set-list li.function .iconbox i {color:#fff !important}
.module-set-list li.function>span{border-top:1px solid #4E43CE; border-bottom-right-radius:8px; border-bottom-left-radius:8px; background-color: rgba(0, 0, 0, .1); color:var(--mono-white)}
.module-set-list li.module {background:rgba(24, 21, 49, .9)}
.module-set-list li.module p{color:#fff}
.module-set-list li.module .iconbox{border:0; background-color:#4E43CE;}
.module-set-list li.module .iconbox i {color:#fff !important}
.module-set-list li.module>span{border-top:1px solid #474473; color:#ddd}
.module-set-list li.bundle p{font-size:14px}

.modules-content .deco-flow{display: flex; justify-content: center; margin-top:-80px;}
.modules-content .deco-flow .lt{width:80%}
.module-info{position:absolute !important; top:50%;left:50%; width:330px !important; height:auto !important; padding:12px 20px 20px!important; border-radius: 8px; background-color:rgba(0,0,0, .78); backdrop-filter: blur(10px); color:#fff; text-align: left; z-index: 99;}
.module-info .title{padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #757575}
.module-info .title em, .module-info .title i{font-size:11px; color: var(--gray-g200)}
.module-info .title b{font-size:18px;font-weight:500}
.module-info .info-entry{font-size:14px; font-weight:400; color:var(--gray-g150)}
[class^=deco-blur-]{display:inline-block; position: absolute}
.deco-blur-circle-i01{top: 20%; left:-5%; width: 638px; height: 433px; transform: rotate(43.975deg); flex-shrink: 0; border-radius: 638px; opacity: 0.3; background: #5EBCCA; filter: blur(75px); z-index: 3;}
.deco-blur-circle-i02{top: 26%; left:20%; width: 60%; height: 60%; border-radius: 696px; opacity: 0.3; background: #3941FC; filter: blur(50px);}
.deco-blur-circle-i03{bottom:10%; right:5%; width: 412px; height: 412px; border-radius: 412px; opacity: 0.3; background: #9B39FC; filter: blur(50px);}


.main-cardflow{position:relative; padding:70px 0; text-align: center;}
.main-cardflow .con-panel{max-width: 1200px;}
/* .main-cardflow .step-text{display: flex; justify-content: center;}
.main-cardflow .step-text p{display: inline-block; margin:0 4px; font-size:20px; font-weight: 500; color:var(--gray-g300);}
.main-cardflow .step-text p.active{color:var(--gray-g900)} */

#reactionCard{position:relative; margin-top:60px}
.work-area{position:relative; display:flex; justify-content: center; gap:18px; width:1100px; height:560px; padding-top:55px; border-radius:20px;background: rgb(255,255,255);background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(242,245,246,1) 100%);}
.work-area>div{padding-bottom: 3px; border-radius:8px; background-color: var(--gray-g100); background-repeat:no-repeat; align-self: flex-start;}
.cardflow-screen{}
.modelIconArea{position:relative; display: flex; position: absolute; left: 50%; gap:6px; align-items: end; justify-content:center; z-index: 99;transform: translate(-50%, -50%);}
.modelIconArea>div{opacity :.2; filter: blur(2px); transition: all 1s;}
.modelIconArea>div.on{opacity:1; filter:none}
.icon-work-list{width:53px;height:53px; background-image: url(../img/icon-list.svg);}
.icon-work-project{width:53px;height:53px; background-image: url(../img/icon-project.svg);}
.icon-work-workflow{width:53px;height:53px; background-image: url(../img/icon-workflow.svg);}
.icon-work-ai{width:53px;height:53px; background-image: url(../img/icon-ai.svg);}
.project-board-i1{width:292px;background-image: url(../img/mainCradflowScene/project-board-i1.svg);}
.project-board-i2{position:relative; width:292px;background-image: url(../img/mainCradflowScene/project-board-i2.svg);}
.project-board-i3{width:292px;background-image: url(../img/mainCradflowScene/project-board-i3.svg);}
.work-workflow-group .line{position:relative}
.work-workflow-group .line:before{content: ''; display: inline-block; position:absolute; top:0; left:-9px; width:1px;height:335px; border-left:1px dashed var(--gray-g200)}
.workflow-board-i1{width:292px;background-image:url(../img/mainCradflowScene/workflow-board-i1.svg)}
.workflow-board-i2{width:292px;background-image:url(../img/mainCradflowScene/workflow-board-i2.svg)}
.workflow-board-i3{width:292px;background-image:url(../img/mainCradflowScene/workflow-board-i3.svg)}
.ai-board-i1{width:292px;background-image:url(../img/mainCradflowScene/ai-board-i1.svg)}
.ai-board-i2{width:292px;background-image:url(../img/mainCradflowScene/ai-board-i2.svg)}
.ai-board-i3{width:292px;background-image:url(../img/mainCradflowScene/ai-board-i3.svg)}
.work-list-group .con-area{width:1060px; height:561px; background-image:url(../img/mainCradflowScene/list-bg.png); background-size:100% auto}
.work-list-group [class^=list-check] {position:absolute; display: inline-block; width:21px; height:21px; background-image:url(../img/mainCradflowScene/list_check.svg)}

[class^=project-board-], [class^=ai-board-]{padding-top:112px}
[class^=workflow-board-]{padding-top:147px}
[class^=project-card], [class^=workflow-card], [class^=ai-card]{display: inline-block; width:273px; background-size:100% auto}
.project-card-i1-1{height:84px;background-image:url(../img/mainCradflowScene/project-card-i1-1.png)}
.project-card-i1-2{height:84px;background-image:url(../img/mainCradflowScene/project-card-i1-2.png)}
.project-card-i2-1{height:84px;background-image:url(../img/mainCradflowScene/project-card-i2-1.png)}
.project-card-i2-2{height:84px;background-image:url(../img/mainCradflowScene/project-card-i2-2.png)}
.project-card-i2-3{height:84px;background-image:url(../img/mainCradflowScene/project-card-i2-3.png)}
.project-card-i2-4{height:96px;background-image:url(../img/mainCradflowScene/project-card-i2-4.png)}
.project-card-i3-1{height:84px;background-image:url(../img/mainCradflowScene/project-card-i3-1.png)}
.project-card-i3-2{height:96px;background-image:url(../img/mainCradflowScene/project-card-i3-2.png)}
.project-card-i3-3{height:84px;background-image:url(../img/mainCradflowScene/project-card-i3-3.png)}
.project-card-i3-4{height:84px;background-image:url(../img/mainCradflowScene/project-card-i3-4.png)}
.workflow-card-i1-1{height:84px;background-image:url(../img/mainCradflowScene/workflow-card-i1-1.png)}
.workflow-card-i1-2{height:96px;background-image:url(../img/mainCradflowScene/workflow-card-i1-2.png)}
.workflow-card-i1-3{height:84px;background-image:url(../img/mainCradflowScene/workflow-card-i1-3.png)}
.workflow-card-i2-1{height:84px;background-image:url(../img/mainCradflowScene/workflow-card-i2-1.png)}
.workflow-card-i2-2{height:84px;background-image:url(../img/mainCradflowScene/workflow-card-i2-2.png)}
.workflow-card-i2-3{height:84px;background-image:url(../img/mainCradflowScene/workflow-card-i2-3.png)}
.workflow-card-i3-1{height:84px;background-image:url(../img/mainCradflowScene/workflow-card-i3-1.png)}
.workflow-card-i3-2{height:84px;background-image:url(../img/mainCradflowScene/workflow-card-i3-2.png)}
.ai-card-i1-1{height:84px; background-image:url(../img/mainCradflowScene/ai-card-i1-1.png)}
.ai-card-i1-2{height:84px; background-image:url(../img/mainCradflowScene/ai-card-i1-2.png)}
.ai-card-i1-3{height:84px; background-image:url(../img/mainCradflowScene/ai-card-i1-3.png)}
.ai-card-i2-1{height:195px; background-image:url(../img/mainCradflowScene/ai-card-i2-2.png)}
.ai-card-i3-1{height:403px; background-image:url(../img/mainCradflowScene/ai-card-i3-1.png)}
.card-flow-i1{width:45px;height:97px;background-image:url(../img/mainCradflowScene/projecft-flowline-i1.svg)}
.card-flow-i2{width:30px;height:98px;background-image:url(../img/mainCradflowScene/projecft-flowline-i2.svg)}
.card-flow-i3{width:30px;height:98px;background-image:url(../img/mainCradflowScene/projecft-flowline-i3.svg)}

.work-project-group{left:50%; transform: translate(-50%, 0);}
.work-workflow-group{position:absolute; top:0; left:50%; transform: translate(55%, 0);}
.work-ai-group{opacity:0; position:absolute; top:0; left:50%; transform: translate(155%, 0);}
.work-list-group{opacity:0; position:absolute; top:0; left:50%; transform: translate(155%, 0);}

.main-pointcard{padding:40px 0; text-align: center;}
.pointcard-list {display: flex; flex-wrap: wrap; justify-content: center; gap: 2% }
.pointcard-list li{width:32%; margin-bottom:2%; text-align: left;}
.pointcard-list li>div{overflow:hidden; position: relative; height:460px; padding: 40px 34px 0 40px;  border:2px solid #F5F8FA; border-radius: 20px; background-color:#F5F8FA;}
.pointcard-list li>div img{position: absolute; right:0; bottom:0; left:0; width: 100%;}
.pointcard-list li>div h4{font-family: Pretendard, "Pretendard Variable"; font-size:20px;font-weight: bold; margin-bottom:8px}
.pointcard-list li>div h4 + p {font-size:15px; color: var(--gray-g700)}
html.ko .pointcard-list li>div h4+p {width: 85%}
.pointcard-list .subscribe .num{margin-top:5px; font-size:24px;font-weight: 500;}
.pointcard-list .subscribe .num b{font-size:1.5em; font-weight:600}
.main-start{margin-top:40px; padding-bottom:260px; text-align: center; background-image: url(../img/space.svg); background-repeat: no-repeat; background-position:50% 100%;}
.main-start h3{font-size:40px}
.main-start h3+p{margin-top:10px; font-size:19px; color:var(--gray-g500)}
.main-start .icon-logo-symbol {margin-bottom:20px}
.rokiwi-cuteS2{position: absolute;left:50%; bottom:40px;transform: translate(-50%, 0);}



/* bubild drow */
#show-scene-1.fix2 #index2 .scene-area {position: fixed;width:100%; top:0; left:50%;transform: translate(-50%, 60px)}
.fix2 #index2 .scene-area.scroll-end{position:absolute !important; width: 100%; left: 50%;transform: translate(-50%, 0) !important;}
.path {stroke-dasharray: 860; stroke-dashoffset: -860; animation: dash 4s linear; animation-fill-mode: forwards; animation-iteration-count: infinite;}

@keyframes dash {
  from {
    stroke-dashoffset: -860;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes blink {
  0% {
      box-shadow: 0px 0px 0px rgba(212, 219, 235, 1);
  }
  100% {
      box-shadow: 0px 0px 25px rgba(156, 152, 208, 1);
  }
}

/* reactionCard drow */
#index5 .con-panel{max-width: 100%;}
#show-scene-4.fix #index5 .scene-area{position: fixed;width:100%;top:0;bottom:0; left:50%;transform: translate(-50%, 120px);}
.fix #index5 .scene-area.scroll-end{position:absolute !important}
#show-scene-5 .scroll-end{padding-top: 120px}

.card-wrap{position:relative}
.card-flow-area{position:absolute; left:50%; width:913px; height:560px; transform: translate(-50%, 0); z-index:999}
.card-body{position:relative; width:276px; min-height:89px; padding:9px 12px; border:3px solid #5E51F5; border-radius:8px; background-color: var(--mono-white);}
.card-body:before{content: ''; position:absolute; top:15px; right:-19px; display: inline-block; width:17px; height:20px; background-image:url(../img/mainCradflowScene/card_label_share_origin.png); background-size:100% auto}
.card-body.card-b:before{background-image:url(../img/mainCradflowScene/card_label_share.png);}
.card-body .header {display: flex; justify-content: space-between;}
.card-body .header p{font-size:14px;font-weight: 500;}
.card-body .body {text-align: left;}
.card-body .body .gauge{overflow: hidden; position:relative; display: inline-block; width:80%; height:4px; border-radius:5px; background-color:var(--gray-g100)}
.card-body .body .gauge span{position:absolute; width:60%; height:4px; background-color:var(--gray-g200)}
.card-body .body .option-area{display: flex; justify-content: flex-end; margin-top:-3px}
.card-body .body .img-area{overflow:hidden; position:relative; height:0px; margin-top:8px}
.card-body .icon-area{opacity: 0; overflow:visible; position:absolute; top:47.5%; left:50%; width:60px; height:60px; transform: translate(-50%, -50%);}
.icon-list-i-mail{position:absolute; left:50%;  width:60px; height:60px; background-image: url(../img/mainCradflowScene/list_i_mail.svg); transform: translate(-50%, 0);}
.icon-list-i-send{position:absolute; top: 40px; right: -9px; width:29px; height:29px; background-image: url(../img/mainCradflowScene/list_i_send.svg);}
.card-a{border-color:#D4DBEB}
.card-b{height: auto;}
.card-b.on{animation: blink 1s infinite alternate;}
.card-b.list{height: 293px; transition: all 1s;}
.card-b.list.v2{height: 170px}

.card-a{position:absolute; top:258px; left:9px}
.card-b{position:absolute; top:166px; left:320px;}
.card-flow-i1{position:absolute; top: 154px; left: -30px;}
.card-flow-i2{position:absolute; top: 195px; left: -28px;}
.card-flow-i3{position:absolute; top: 195px; left: -20px;}

.project-card-i1-2{margin-top:96px}
.project-card-i2-1{margin-top:96px}
.project-card-i2-1{margin-top:96px}
.workflow-card-i1-2{margin-top:96px}

.work-list-group .list-check-i1{top:196px; left:71px}
.work-list-group .list-check-i2{top:238px; left:71px}
.work-list-group .list-check-i3{top:284px; left:71px}
.work-list-group .list-check-i4{top:328px; left:71px}
.work-list-group .list-check-i5{top:371px; left:71px}
.work-list-group .list-check-i6{top:415px; left:71px}
.work-list-group .list-check-i7{top:460px; left:71px}
.work-list-group .list-check-i8{top:504px; left:71px}

/* reactionCard transition */
#index5{position:relative}
.sticky-elem{position: absolute;left: 50%;will-change: transform, opacity;z-index: 99}

.only-mobile, .xs-only-mobile, .img-only-mobile{display: none;}
.only-pc, .img-only-pc{display: block;}

@media (max-width: 1400px){
  .main .sect-tit{font-size:50px}
  .main .sect-tit + p{font-size:18px; margin-bottom:20px}
}
@media (max-width: 1280px) {
  .con-panel{padding:0 20px}
}

@media (max-width: 1024px) {
  .only-mobile{display: block;}
  .only-mobile.flex{display: flex;}

  /* .only-pc, */
  .hd-util .nav-mn li:nth-child(2){
    display: none;
  }

  .main-message .sect-tit{font-size: 60px}
  .main-message .sect-tit + p{font-size:20px}
  .main-use .use-txt:before{font-size:84px}
  .main-use p{font-size:24px}
  .main-use .capsule{font-size:26px}

  #hd .con-panel, .if-mobile-hd{padding-right:12px !important}
  #hd .nav-mn{gap: 8px}
  #hd .nav-mn li a{font-size:14px}
  #gnb {top:0}
  #gnb nav{height:100vh; flex-direction: column;}
  #gnb .inner-contents{padding:20px}
  #gnb .inner-contents.v2{padding:20px 20px 40px;margin-top:20px}
  .if-mobile-hd {display:flex; justify-content: space-between;  align-items: center; height:76px; padding:0 20px; border-bottom:1px solid var(--gray-g150)}
  .if-mobile-hd ul li i{font-size:20px; color:var(--gray-g450)}
  .if-mobile-hd .hd-gnb-here{display: none; position: absolute; width:80%; background-color: var(--mono-white)}
  .if-mobile-hd .hd-gnb-here .back{margin-right:12px;color:var(--gray-g600)}
  .if-mobile-gnb .hd-gnb{padding:20px 0}
  .if-mobile-gnb .hd-gnb li {margin-bottom:20px; font-size:20px}
  .if-mobile-gnb .hd-gnb li span{display: flex; align-items: center;}
  .if-mobile-gnb .hd-gnb li i{margin-left:8px; font-size:13px; color:var(--gray-g300); transform: rotate(-90deg);}
  .if-mobile-gnb-contents{display: none; position: absolute; top:77px; width:100%; padding:0; background-color: var(--mono-white); transform: translate(200%, 0); transition: all .3s ease-in;}
  .if-mobile-gnb-contents.on{display: flex; transform: translate(0, 0); transition: all .3s ease-in;}
  .if-mobile-gnb-contents .nav-con{overflow: scroll; flex-direction: column; height:calc(100vh - 77px)}
  .if-mobile-gnb-contents .nav-con>div{width:100% !important}
  .if-mobile-util{padding:20px; margin-top:60px}
}

@media (max-width: 860px) {
  #hd .hd-gnb{display:none}
  .pointcard-list li{width:46%}
  .module-set-list li>div{width:100%}
  .model-slider-control-card .info span{display: block;}

  #buildContent{transform: scale(2); margin-top:33vw}
  .main-use .use-txt{padding-top:50px}
}

@media (min-width: 768px){
  .only-mobile{display: none;}
}
@media (max-width: 768px) {
  #hd.v3 .nav-mn.menu,
  .only-pc,
  .img-only-pc,
  .model-slider-control-card li p,
  .module-set-list li>span i,
  .model-slider-control-card .slick-list:before, 
  .model-slider-control-card .slick-list:after,
  .modules-nav.nav-pills .nav-link.come-indicator:before{
    display: none !important;
  }
  
  #gnb .dropdown-menu{left:-70px !important}
  #hd .con-panel{height:60px}
  #hd.v3 .nav-mn{margin-left:25px}
  #hd .nav-mn li button i{color: var(--gray-g500);font-size:17px}
  #hd .nav-mn li a.util-start i{font-style: normal}
  .nav-mn .dropdown-menu.show{left:-60px !important}

  .only-mobile, .img-only-mobile{display: block;}

  [class^=icon-emoji]{width:26px; height:26px}
  .icon-logo{width:140px; height:18px}
  .icon-logo-symbol {width:70px; height:70px}
  .icon-logo-wh{width: 127px;height: 16px;}
  [class^=icon-model-slider]{position:relative; width:22px; height:22px; top: -10px; left: 12px;}
  
  .btn-go-rocket{font-size:15px}
  .btn-go-rocket.lg{font-size:18px}
  [class^=icon-workmodel]{width:20px; height:20px}
  [class^=icon-module-]{width: 97px; height: 76px;}

  .gnb-menu-list .col-4, .gnb-menu-list .col-5, .gnb-list .col-3{max-width:48%; flex:0 0 48%; margin-left:1%; margin-right:1%}
  .gnb-menu-list li a{padding:12px; border:1px solid var(--gray-g150); border-radius: 6px;}
  .gnb-menu-list li em b{font-size:16px}
  .gnb-menu-list li p{font-size:11px}
  .gnb-ref-box a{font-size:13px}
  .gnb-ref-box{margin-top:15px}

  .nav-mn li:last-child i{font-size:18px}

  .nav-dept .con-panel{height:44px !important}
  .nav-dept .page-here{display: none;}
  .nav-dept ul a{font-size:15px}

  .ft-sitemap{flex-wrap: wrap;}
  #ft .logo-area{margin-bottom:20px}
  #ft .sitemap-area{justify-content: flex-start; gap:20px}
  #ft .copyright-area {flex-direction: column-reverse}
  #ft .terms-area {margin-top:32px}
  #ft .ft-sitemap>li{min-width:auto; width:100%; margin-right:1%; margin-bottom:30px}
  #ft .ft-languages li{text-align:left;}
  #ft .sitemap-dept li:first-child{font-size:12px}
  #ft .sitemap-area li, #ft .ft-languages li a{font-size:13px}
  #ft .sitemap-dept{flex-direction: column; gap:0}
  .copyright-area .flow-area{flex-direction: row-reverse; justify-content: left;}

  .main .sect-tit, html:not(.ko) .main .sect-tit{font-size:22px}
  .main .sect-tit + p, .main-start h3+p, html:not(.ko) .main-message .sect-tit + p{font-size:14px}
  .main .sect-tit + p{width:85%; margin:0 auto}

  .main-slider-frame{margin:0 -20px}
  .main-slider-frame li>div{width:100%; border-radius:0; border:0;}
  .main-slider-frame .model-slider{box-shadow:0 0 15px rgba(0,0,0, .1)}
  .main-slider-frame .bg-panel{display:inline-block; width:93%; bottom:-16px;}

  .main-use .use-txt .txt-area{height:24px}
  .main-use p{font-size:16px}
  .main-use .use-txt .txt-area .copy.a1{transform: translateY(-24px);}
  .main-use .use-txt .txt-area .copy.a2{transform: translateY(-48px);}
  .main-use .use-txt .txt-area .copy.a3{transform: translateY(-71px);}

  .main-message .con-panel{display: inline-block; padding-top:50px}
  .main-message .ct{position: relative; z-index: 15;}
  .main-message [class^=obj-]{transform: scale(0.5);}
  .main-message, .main-message .con-panel{min-height:500px}
  html:not(.ko) .main-message .sect-tit, .main-message .sect-tit{font-size:35px}
  html.mn .main-message .sect-tit{width: 100%}
  .main-message .sect-tit+p{width: 75%; margin: 12px auto 20px; font-size:16px}
  
  .model-slider-control-card .info strong{display: inline-block; font-size:15px; line-height: 1.2em !important;}
  .model-slider-control-card .info{padding:16px 8px 10px 8px !important}
  .model-slider-control-card .info span{font-size:10px}
  .model-slider-control-card .active-line{width:5px}
  .model-slider-control-card .slick-track{padding:30px 0 20px}
  .model-slider-control-card .slick-list{padding:0 !important}
  .main-message .obj-l01 {top: 210px; left:-100px}
  .main-message .obj-l02 {top: auto;bottom: -8px; left: 77px;z-index: 1}
  .main-message .obj-l03 {left: -100px; bottom: -30px;}
  .main-message .obj-r01 {top:auto; right: -20px; bottom:-50px; left:auto;}
  .main-message .obj-r02 {top:180px; right: -90px; bottom:auto; left:auto}
  .main-message .obj-r03 {right:40px; bottom: 73px; left:auto}
    
  .modules-nav{margin-top:20px}
  .modules-nav.nav-pills .nav-link{padding:8px; font-size:14px}
  .main-workspace, .main-modules{padding:60px 0}
  .main-cardflow{padding:20px 0}
  .main-cardflow .step-text p{font-size:15px}
  .cardflow-screen{transform: scale(0.8) translate(0, -70px);}
  .holder-item{width:100%}
  .main-use .use-txt:before{top:14px; font-size:36px}
  .main-use .capsule{padding:12px 18px; font-size:18px}

  .module-info{position: fixed !important; top: auto; bottom: -1px; left: 0; right: 0; width: 100% !important; border-radius: 0; border-top-left-radius: 16px; border-top-right-radius: 16px; background: #fff; box-shadow: 0 -10px 10px rgba(0, 0, 0, .12); padding:20px !important; padding-bottom:40px !important}
  .module-info .title{border-bottom: 1px solid var(--gray-g150)}
  .module-info .title em, .module-info .title i{font-size:14px; color: var(--gray-g600)}
  .module-info .title b{color:#000}
  .module-info .info-entry{font-size:15px !important;color:var(--gray-g800)}
  .module-set-list li>span i{display: block;}
  .module-set-list li>div{height:73px}
  .module-set-list li>div p{font-size: 14px}
  .module-set-list .iconbox{width: 22px; height: 22px; border-radius:6px}
  .module-set-list .iconbox i{font-size:12px}
  .modules-content .deco-flow{margin-top:-20px}
  .modules-content .deco-flow .lt{width:120%}

  .main-workspace .con-panel{padding: 0 !important}
  .theme-dark .workspace-screen{border-radius:0}
 
  .pointcard-list {gap:0}
  .pointcard-list li{width:100%}
  .pointcard-list li>div{height:auto;padding:0;}
  .pointcard-list li>div h4{padding:30px 0 0 30px;font-size:18px}
  .pointcard-list li>div h4 + p, .pointcard-list .subscribe .num {padding-left:30px}
  .pointcard-list li>div h4 + p + div{width:100%; text-align: right;}
  .pointcard-list li>div img{position:relative; width:100%; margin-top:30px}
   
  .main-start{padding-bottom:200px; margin-top:80px;background-size:160% auto}
  .main-start h3{font-size:28px}
  .rokiwi-cuteS2{bottom:0; transform:translate(-50%, 0) scale(0.8)}
} 

@media (max-width: 375px){
  .xs-only-mobile{display: block;}
  .module-source{display: none !important}
  .main-cardflow .step-text p{margin: 0 15px}
}