/* 공통 */
.web_view{display: none !important;}
.mobile_view{display: block !important;}



/* 헤더 */
header{padding-top: 30px;}
header.on{top: 10px;padding: 0 10px;}
header>div.mobile_gnb_area{display: flex;align-items: center;justify-content: space-between;height: 50px;padding: 0 24px;transition: .3s ease;}
header.on>div.mobile_gnb_area{border-radius: 10px;background: white;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);padding: 0 14px;}
header.on>div.all_gnb_box{background: white;}
header>div.all_gnb_box{display: block;background: white;padding: 20px 20px 40px;max-width: 500px;width: 90%;height: auto;position: fixed;left: 50%;top: 50%;transform: translate(150%,-50%);transition: all .5s;border-radius: 10px;}
header>div.all_gnb_box.open{transform: translate(-50%,-50%);border: none;z-index: 1;}
header>div.all_gnb_box>div:nth-child(1){display: flex;justify-content: space-between;align-items: center;}
header>div.mobile_gnb_area>a:first-child,
header>div.all_gnb_box>div:nth-child(1)>a:first-child{width: 32px;}
header>div.all_gnb_box nav{width: 100%;display: block;margin-top: 40px;}
header>div.all_gnb_box nav>ul{display: block;width: 100%;height: 55vh;overflow-y: scroll;}
header>div.all_gnb_box nav>ul>li{width: 100%;height: auto;display: block;margin-left: 0;margin-bottom: 26px;}
header>div.all_gnb_box nav>ul>li>a{display: block;width: fit-content;}
header>div.all_gnb_box nav>ul + div{margin-left: 0;background: #F6F1FF;padding: 20px 0;border-radius: 4px;margin-top: 26px;}
header>div.all_gnb_box nav>ul + div a{display: block;width: fit-content;margin-inline: auto;background: white;}
header>div.all_gnb_box nav>ul>li>a + div{position: static;top: 0;background: white;padding: 0;box-shadow: none;border-radius: 0px;display: block;width: 100%;transform: translateX(0);}
header>div.all_gnb_box nav>ul>li>a + div::before{display: none;}
header>div.all_gnb_box nav>ul>li>a + div ul,
header>div.all_gnb_box nav>ul>li>a + div ul li a{display: block;}
header>div.all_gnb_box nav>ul>li>a + div ul li a strong{font-size: 16px;color: var(--color-des-text);padding-left: 31px;position: relative;}
header>div.all_gnb_box nav>ul>li>a + div ul li a strong::before{content: '';display: block;width: 8px;height: 10px;background: url(../images/mo/triangle.svg);position: absolute;left: 8px;top: 3px;}
header>div.all_gnb_box nav>ul>li>a + div ul li a>div:nth-child(1),
header>div.all_gnb_box nav>ul>li>a + div ul li a span,
header>div.all_gnb_box nav>ul>li>a + div ul li a p{display: none;}

/* 푸터 */
footer>div{width: 100%;padding: 60px 24px;}
footer>div>div:nth-child(1){display: block;}
footer>div>div:nth-child(1)>div:last-child{flex-wrap: wrap;justify-content: flex-start;}
footer>div>div:nth-child(1)>div:last-child>div{margin-left: 0;width: 25%;margin-bottom: 32px;}
footer>div>div:nth-child(2){margin-top: 33px;}

/* 서브 페이지 공통 */
.subCommon,.mainIndex{padding-top: 80px;}






/* 메인 */
.mainTilteArea{background-position: bottom -20vw left -30vw;}
.mainTilteArea{max-height: inherit;height: auto;display: block;padding-block: 32px 50px;}
.mainTilteArea>div{width: 100%;padding-inline: 24px;}
.mainTilteArea>div .textArea h1 p:nth-child(1){font-size: 34px;line-height: 40.81px;}
.mainTilteArea>div .textArea h1 p:nth-child(2){font-size: 34px;line-height: 40.81px;word-break: keep-all;}
.mainTilteArea>div .textArea>p{font-size: 16px;line-height: 19px;margin-block: 40px 150px;word-break: keep-all;}
.mainTilteArea>div .textArea div{display: flex;align-items: center;}
.mainTilteArea>div .textArea + div{margin-top: 50px;}
.mainTitContent strong{font-size: 20px;}
.mainTitContent h2{font-size: 34px;margin-block: 20px 8px;}
.mainTitContent p{font-size: 16px;line-height: 19px;padding-inline: 20px;}
.mainTitContent a{margin: 20px auto 0;}
.mainFeatures{padding-block: 60px;}
.featuresList{width: 100%;margin: 56px auto 0;}
.featuresList ul{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 56px 0;}
.featuresList ul li{width: 50%;padding-inline: 20px;}
.featuresList ul li a{display: flex;align-items: center;}
.featuresList ul li a>div:nth-child(1){margin-right: 16px;}
.featuresList ul li a strong{font-size: 18px;line-height: 21px;}
.featuresList ul li a p{font-size: 14px;line-height: 16px;}
.mainDevelopers{padding-block: 60px;}
.mainDevelopers>div{width: 100%;}
.mainDevelopers .mainTitContent{text-align: center;}
.mainDevelopers .mainTitContent a{margin: 20px auto 0;}
.mainDevelopers .developersList ul{gap: 48px 0;flex-wrap: wrap;padding-inline: 44px;}
.mainDevelopers .developersList ul li{width: 50%;}
.mainConsole{padding-block: 60px;}
.mainConsole .imgArea{margin-block: 33px 56px;padding-inline: 30px;}
.mainConsole .consoleList{width: 100%;}
.mainConsole .consoleList ul{gap: 48px 0;padding-inline: 44px;}
.mainConsole .consoleList ul li{width: 50%;}
.mainRolloAni::before{display: block;width: 307px;height: 572px;}
.mainRolloAni>div .rolloAni + div strong{font-size: 28px;}
.mainRolloAni>div .rolloAni + div p{font-size: 16px;line-height: 19px;padding-inline: 20px;}
.mainIndex .technicalSupport{padding-top: 60px;}
.mainIndex .faq{margin-top: 0px;}

/* 서브페이지 타이틀 */
.subTitleArea{padding: 36px 11px;text-align: center;} 
.subTitleArea>div{width: 100%;flex-direction: column-reverse;}
.subTitleArea>div h2{font-size: 20px;margin-top: 20px;line-height: 33.6px;}
.subTitleArea>div h2 span{font-size: 14px;line-height: 32px;}
.subTitleArea>div p:nth-of-type(1){font-size: 32px;line-height: 38.4px;margin-block:8px 20px;}
.subTitleArea>div p:nth-of-type(2){font-size: 16px;line-height: 25px;width: 500px;}
.subTitleArea>div>div:nth-child(1){padding-right: 0px;padding-inline: 13px;}
.subTitleArea>div>div:nth-child(2){margin-right: 0px;}
.subTitleArea>div>div:nth-child(2) img{box-shadow: 2px 2px 4.99px 0px #00000040;}
.subTitleArea>div p + div{justify-content: center;}

/* 설명 리스트 */
.explanationList{padding-block: 40px;}
.explanationList>div{width: 100%;} 
.explanationList>div>ul>li{padding: 50px 30px;padding-bottom: 80px;}
.explanationList>div>ul>li>p{font-size: 16px;line-height: 22px;}

/* 기술적 지원 */
.technicalSupport{padding-top: 60px;}
.technicalSupport>div{width: 100%;padding-bottom: 60px;background: url(../images/common/started_background.jpg) no-repeat center bottom;}
.technicalSupport>div>div{padding-inline: 24px;}
.technicalSupport>div>div h3{font-size: 26px;line-height: 31.21px;letter-spacing: -2.6px;}
.technicalSupport>div>div p{font-size: 16px;}
.technicalSupport>div ul{margin-top: 20px;width: 600px;padding-inline: 35px;display: flex;align-items: flex-start;justify-content: center;flex-wrap: wrap;}
.technicalSupport>div ul li{height: 312px;margin-bottom: 20px;}
.technicalSupport>div ul li:last-child{margin-bottom: 0;}
.technicalSupport>div ul li>div{width: 100%;}
.technicalSupport>div ul li h2{font-size: 20px;}
.technicalSupport>div ul li p{font-size: 14px;}

/* faq */
.faq{padding-top: 60px;}
.faq>div{width: 100%;padding-inline: 27px;}
.faq>div ul li{width: calc(50% - 12px);}
.faq>div ul li p{font-size: 14px;}

.sub_demo .demo{padding-top: 20px;margin-bottom: 100px;}
.demo>div{width: 100%;padding-bottom: 100px;}
.demo>div>div:nth-child(1){margin-bottom: 40px;}
.demo>div>div:nth-child(1) strong{font-size: 24px;}
.demo>div>div:nth-child(1) h3{font-size: 36px;margin-block: 8px 20px;}
.demo>div>div:nth-child(1) p{font-size: 20px;line-height: 25px;padding-inline: 20px;}
.demo>div>div:nth-child(2){padding-inline: 28px;}
.demo>div>div:nth-child(2) .bg img{width: 100%;}
.demo>div>div:nth-child(2) .contents{max-width: 100%;padding: 32px 52px 100px;}
.demo>div>div:nth-child(2) .contents>div:nth-child(1) h2{font-size: 20px;}
.demo>div>div:nth-child(2) .contents>div:nth-child(1) div{margin-block: 30px 20px;}
.demo>div>div:nth-child(2) .contents>div:nth-child(1) div a{font-size: 20px;}
.demo>div>div:nth-child(2) .contents>div:nth-child(2){height: 87vw;}
.demo>div>div:nth-child(2) .contents li{margin-bottom: 20px;}
.demo>div>div:nth-child(2) .contents li>div:nth-child(1)>div:nth-child(2)>h2{font-size: 20px;}
.demo>div>div:nth-child(2) .contents li>div:nth-child(1)>div:nth-child(2) p{font-size: 14px;}
.demo>div>div:nth-child(2) .contents li>div:nth-child(1)>div:nth-child(2)>div p b{font-size: 20px;}
.demo>div>div:nth-child(2) .contents li>div:nth-child(1)>div:nth-child(2)>div p.percent{font-size: 20px;}



/* 서브 개별페이지 */
.sub_nplayer .subTitleArea>div>div:nth-child(1){padding-right: 13px;}
.sub_nplayer .subTitleArea>div h2{margin-top: 37px;}

.sub_console .subTitleArea{padding-bottom: 73px;}
.sub_console .subTitleArea>div{align-items: center;}

.sub_player .subTitleArea{padding: 48px 0 70px;}
.sub_player .subTitleArea>div.rolloAni{position: static;transform: translate(0);margin-top: 65px;}
.sub_player .subTitleArea>div>div:nth-child(1){padding: 0 24px;}
.rolloAni {height: 163px;}
.rolloAni::before{display: none;}
.rolloAni img {width: 5061px;animation: animation_img 60s linear infinite alternate;}
@keyframes animation_img{
    0% {left: 0px;}
    100% {left: -3500px;}
}

.sub_getstarted .technicalSupport{padding-top: 60px;}




/* 이벤트 팝업 */
.event_popup{top: 50% !important;right: 50%;transform: translate(50%,-50%);}

/* 팝업 */
.layer_wrap_area .werp{width: 650px;}
.layer_wrap_area .layer_tit{margin-bottom: 20px;}
.layer_wrap_area .layer_dis .sclArea{height: 60vh;overflow: hidden;}
.layer_wrap_area .layer_dis li{margin-top: 16px;}
.layer_wrap_area .layer_dis .inputArea p{font-size: 14.5px;margin-bottom: 4px;}
.layer_wrap_area .layer_dis .sclArea + div{padding-top: 28px;}