@charset "utf-8";

@font-face {
    font-family: 'netmarble';
    src: url('../font/netmarbleL.woff') format('woff'),
    url('../font/netmarbleL.woff2') format('woff2');
    font-weight:400;
    font-style: normal;
}

@font-face {
    font-family: 'netmarble';
    src: url('../font/netmarbleM.woff') format('woff'),
    url('../font/netmarbleM.woff2') format('woff2');
    font-weight:500;
    font-style: normal;
}

@font-face {
    font-family: 'netmarble';
    src: url('../font/netmarbleB.woff') format('woff'),
    url('../font/netmarbleB.woff2') format('woff2');
    font-weight:700;
    font-style: normal;
}


/* Reset */
* {box-sizing:border-box;word-break:keep-all;}
html,body{width:100%;height:100%;padding:0px; margin:0px;font-size:20px;}
body {font-family:"netmarble",Helvetica,sans-serif;line-height:100%;color:rgba(58,59,59,0.9);font-weight:400;letter-spacing:-0.5px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td { margin:0; padding:0; -webkit-text-size-adjust:none;line-height:100%;}
img,fieldset{border:0}
ul,ol,li{list-style:none;}
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
hr {display:none;}
a, a:link {color:inherit;text-decoration:none;}
a:visited {color:inherit;}
a:hover, a:active {color:inherit;text-decoration:none;}
address {font-style:normal; font-weight:normal;}
legend,caption {display:none; clear:both;}
input,textarea,select,button,table { font-size:inherit;font-family:inherit;line-height:inherit; }/**font-size:100%;*/
input,select {vertical-align:middle}
textarea, input {outline-color:-moz-use-text-color;outline-style:none;outline-width:medium;}
textarea {resize:none;}
table {border-collapse:collapse}
strong {font-weight:700;}

button {border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:0 none;background-color:transparent;border-radius:0;}

article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block;margin:0;}
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr { display: inline; }

/* blind */
.hidden{visibility:hidden;position:absolute;overflow:hidden;height:0;width:0;font-size:0}

/* align */
.left{text-align:left!important}
.right{text-align:right!important}
.center,.center td,.center th {text-align:center}
.middle{vertical-align:middle!important}
.top{vertical-align:top!important}

/*layout*/
body {overflow-x:hidden;}
#wrap {position:relative;min-width:960px;height:auto;margin:0 auto;}
.innerWrap {position:relative;width:1042px;margin:0 auto;}

figure img {display:block;}
.pt,
.ani {position:absolute;background-repeat:no-repeat;background-position:0 0;}

.mVer {display:none;}
.link-flex {display:flex;justify-content:center;align-items:center;}

.movieBig {position:relative;width:100%;padding-bottom:56.25%;}
.movieBig iframe {position:absolute;top:0;left:0;display:block;width:100%;height:100%;}

header {position:fixed;top:37px;left:0;width:100%;height:64px;z-index:1000;}
header .logo {position:absolute;top:0;left:0px;display:block;width:130px;height:64px;background:url("../images/brandLogo.svg") 0 center no-repeat;background-size:130px auto;}
header .btn_apply {position:absolute;top:0;right:0;}
header nav {position:absolute;top:0;right:250px;}
header nav ul {display:flex;}
header nav ul li {height:64px;font-size:23px;font-weight:500;color:#543727;font-weight:700;}
header nav ul li a {display:flex;width:100%;height:100%;justify-content:center;align-items:center;}
header nav ul li+li {margin-left:2rem;}
header.fixed {top:0;height:90px;background-color:#FBD902;}
header.fixed .logo,
header.fixed .btn_apply,
header.fixed nav {top:13px;}

.btn_apply {display:inline-block;width:214px;height:64px;font-size:30px;line-height:64px;;font-weight:700;text-align:center;color:#fff !important;background-color:#543727;border-radius:40px;box-shadow:0px 4px 10px rgba(0, 0, 0, 0.2);}
.btn_apply.light {width:198px;height:66px;color:#fff;}
.btn_apply+.btn_apply {margin-left:30px;}

#wrap section {position:relative;margin:0 auto;/* overflow: hidden; */}
#wrap section h3.title {text-align:center;color:#543727;}
#wrap section h3.title span {font-size:55px;line-height:68px;font-weight:700;}
#wrap section h3.title small {display:block;margin-top:5px;font-size:16px;font-weight:700;}
#wrap section h3.title p {margin-top:7px;font-size:20px;line-height:22px;font-weight:800;}
#wrap section h3:nth-of-type(2) {margin-top:50px;}

#wrap main {position:relative;overflow:hidden;}

.headingWrap {padding-top:73px;height:950px;background-color:#FBD902;text-align:center;}
.headingWrap .motionArea {top:275px;left:calc(50% - 280px);width:726px;height:614px;}
.headingWrap .motionArea .ground {top:0;left:0;width:726px;height:614px;background-image:url("../images/heading_keyvisual_bg_02.png");background-position:right 0;background-size:auto 614px;}
.headingWrap .motionArea .building01 {bottom:34px;left:0;width:267px;height:152px;background-image:url("../images/ani_building01.png");}
.headingWrap .motionArea .building02 {top:358px;left:0;width:253px;height:166px;background-image:url("../images/ani_building02.png");}
.headingWrap .motionArea .building03 {top:186px;left:664px;width:136px;height:167px;background-image:url("../images/ani_building03.png");}
.headingWrap .motionArea .talk {top:217px;right:131px;width:48px;height:68px;background-image:url("../images/ani_talk.png");}
.headingWrap .motionArea .cloud01 {top:189px;right:18px;width:82px;height:65px;background-image:url("../images/ani_cloud01.png");z-index:11;}
.headingWrap .motionArea .cloud02 {top:75px;right:124px;width:119px;height:97px;background-image:url("../images/ani_cloud02.png");z-index:11;}
.headingWrap .motionArea .cloud03 {top:189px;left:282px;width:60px;height:49px;background-image:url("../images/ani_cloud03.png");z-index:11;}
.headingWrap .motionArea .cloud04 {top:67px;left:290px;width:94px;height:74px;background-image:url("../images/ani_cloud04.png");z-index:11;}
.headingWrap .motionArea .char01 {top:184px;left:133px;width:72px;height:68px;background-image:url("../images/ani_char01.png");z-index:10}
.headingWrap .motionArea .char02 {top:380px;left:256px;width:100px;height:116px;background-image:url("../images/ani_char02.png");z-index:10}
.headingWrap .motionArea .char03 {top:300px;right:131px;width:77px;height:92px;background-image:url("../images/ani_char03.png");z-index:10}
.headingWrap .motionArea .char04 {top:297px;right:17px;width:147px;height:112px;background-image:url("../images/ani_char04.png");z-index:10}
.headingWrap .motionArea .car {bottom:121px;;left:363px;width:82px;height:54px;background-image:url("../images/ani_car.png");z-index:10}

.headingWrap .heading-title {position:absolute;top:135px;left:calc(50% - 521px);color:#543727;font-weight:700;text-align:left;}
.headingWrap .heading-title .link {margin-top:30px;width:250px;height:66px;border-radius:33px;background-color:#F9EE5E;font-size:32px;color:#543727;font-weight:700;box-shadow:0px 4px 10px rgba(0, 0, 0, 0.05);}
.headingWrap .titleArea dt {font-size:55px;line-height:68px;}
.headingWrap .titleArea dd {margin-top:9px;font-size:40px;line-height:50px;}

.jDWrap {padding:50px 0 100px;background-color:#FDF9D5;}
.jDWrap .jd__list {display:flex;margin-top:50px;justify-content:center;}
.jDWrap .jd__list li {position:relative;width:277px;height:277px;background-color:#F9EE5E;border-radius:50%;overflow:hidden;box-shadow:5px 5px 10px rgba(0, 0, 0, 0.05);cursor:pointer;}
.jDWrap .jd__list li+li {margin-left:30px;}
.jDWrap .jd__list li > * {position:absolute;background-repeat:no-repeat;background-position:0 0;}
.jDWrap .jd__list li .logo {top:42px;left:65px;width:147px;height:46px;}
.jDWrap .jd__list li .char {top:0;left:0;width:100%;height:100%;background-size:auto 277px;}
.jDWrap .jd__list li:nth-of-type(1) .logo {background-image:url("../images/jdList_logo_01.svg");}
.jDWrap .jd__list li:nth-of-type(2) .logo {background-image:url("../images/jdList_logo_02.svg");}
.jDWrap .jd__list li:nth-of-type(3) .logo {background-image:url("../images/jdList_logo_03.svg");}
.jDWrap .jd__list li:nth-of-type(1) .char {background-image:url("../images/jdList_img_01.png");}
.jDWrap .jd__list li:nth-of-type(2) .char {background-image:url("../images/jdList_img_02.png");}
.jDWrap .jd__list li:nth-of-type(3) .char {background-image:url("../images/jdList_img_03.png");}
.jDWrap .jd__list li:hover .char {transform:scale(1.3);transition:0.3s;}

.tvWrap {padding:0 0 200px;height:870px;background:#F9EE5E url("../images/tv_bg.png") repeat-x 0 0;}
.tvWrap .tv__box {position:relative;top:0;width:1042px;padding-top:135px;height:834px;background:url("../images/netTV_frame.png") no-repeat 0 0 / auto 834px;}
.tvWrap .aniCharGroup {position:absolute;bottom:-300px;left:calc(50% - 289px);width:572px;height:358px;background-image:url("../images/netTV_charGroup.png");background-size:auto 358px;z-index:100;}

.benefitWrap {padding:75px 0 100px;background-color:#CDF06E;}
.benefitWrap .benefit__list {display:flex;margin:50px 0 0;flex-flow:wrap row;justify-content:center;}
.benefitWrap .benefit__list > li {position:relative;width:277px;height:210px;padding-top:20px;margin-bottom:30px;border-radius:10px;background-color:#fff;box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.05), inset -2px -2px 3px rgba(0, 0, 0, 0.05);overflow:hidden;}
.benefitWrap .benefit__list > li .char {bottom:0;left:0;width:277px;height:210px;background-repeat:no-repeat;background-position:center bottom;background-size:auto 210px;transform:translate(0,0);transition:0.8s;}
.benefitWrap .benefit__list li:nth-of-type(1) .char {background-image:url("../images/benefit_char_01.png");}
.benefitWrap .benefit__list li:nth-of-type(2) .char {background-image:url("../images/benefit_char_02.png");}
.benefitWrap .benefit__list li:nth-of-type(3) .char {background-image:url("../images/benefit_char_03.png");}
.benefitWrap .benefit__list li:nth-of-type(4) .char {background-image:url("../images/benefit_char_04.png");}
.benefitWrap .benefit__list li:nth-of-type(5) .char {background-image:url("../images/benefit_char_05.png");}
.benefitWrap .benefit__list li:nth-of-type(6) .char {background-image:url("../images/benefit_char_06.png");}
.benefitWrap .benefit__list li:nth-of-type(7) .char {background-image:url("../images/benefit_char_07.png");}
.benefitWrap .benefit__list li:nth-of-type(8) .char {background-image:url("../images/benefit_char_08.png");}
.benefitWrap .benefit__list li:nth-of-type(9) .char {background-image:url("../images/benefit_char_09.png");}
.benefitWrap .benefit__list li:nth-of-type(10) .char {background-image:url("../images/benefit_char_10.png");}
.benefitWrap .benefit__list li:nth-of-type(11) .char {background-image:url("../images/benefit_char_11.png");}
.benefitWrap .benefit__list li:nth-of-type(12) .char {background-image:url("../images/benefit_char_12.png");}
.benefitWrap .benefit__list .head {font-size:30px;line-height:37px;text-align:center;color:#543727;font-weight:700;}
.benefitWrap .benefit__list .content {position:absolute;top:84px;left:0;width:100%;opacity:0;transition:0.3s;}
.benefitWrap .benefit__list .content p {font-family:"Noto Sans KR";font-size:21px;line-height:30px;font-weight:500;text-align:center;color:#373737;text-align:center;}
.benefitWrap .benefit__list li:not(:nth-of-type(3n)) {margin-right:30px;}
.benefitWrap .benefit__list li:hover .char {transform:translate(100%,0);}
.benefitWrap .benefit__list li:hover .content {opacity:1;}
.benefitWrap .char01 {top:-145px;left:calc(50% - 889px);width:465px;height:529px;background-image:url("../images/benefit_ani_item_01.png");background-size:auto 529px;}
.benefitWrap .char02 {bottom:-145px;left:calc(50% + 390px);width:570px;height:348px;background-image:url("../images/benefit_ani_item_02.png");background-size:auto 348px;z-index:100;}

.tvWrap .cloud01 {top:49px;left:calc(50% - 287px);width:214px;height:125px;background-image:url("../images/info_cloud_01.png");}
.tvWrap .cloud02 {top:498px;left:calc(50% - 673px );width:214px;height:125px;background-image:url("../images/info_cloud_02.png");}
.tvWrap .cloud03 {bottom:-27px;left:calc(50% + 71px);width:234px;height:86px;background-image:url("../images/info_cloud_03.png");}
.tvWrap .cloud04 {bottom:136px;left:calc(50% + 635px);width:234px;height:86px;background-image:url("../images/info_cloud_04.png");}
.tvWrap .cloud05 {top:340px;left:calc(50% + 646px);width:214px;height:125px;background-image:url("../images/info_cloud_05.png");} 

.tvWrap .moviePlayArea {position:relative;display:flex;margin:30px 0 0 79px;z-index:10;}
.tvWrap .moviePlayArea .movieBigBox {position:relative;width:640px;}
.tvWrap .moviePlayArea .movieBigBox .movieBig {position:relative;width:100%;padding-bottom:56.25%;}
.tvWrap .moviePlayArea .movieBig iframe {position:absolute;top:0;left:0;display:block;width:100%;height:100%;}
.tvWrap .moviePlayArea .slideWrap {position:relative;width:237px;margin-left:13px;}
.tvWrap .moviePlayArea .slideWrap .slideOuter {height:310px;overflow-y:hidden;}
.tvWrap .moviePlayArea .slideWrap .movieThumb li {height:133px;margin-bottom:23px;background-color:#979797;}
.tvWrap .moviePlayArea .slideWrap .movieThumb li a {display:block;width:100%;height:100px;line-height:80px;text-align:center;font-size:22px;color:#fff;font-weight:700;letter-spacing:-1px;}
.tvWrap .moviePlayArea .slideWrap .movieThumb li img {width:100%;}
/* .tvWrap .moviePlayArea .slideWrap .movieThumb li.active {background-color:#ffe00c;} */
.tvWrap .moviePlayArea .slideWrap .movieThumb li .twoLine {padding:13px 0 0 0;line-height:normal;}
.tvWrap .moviePlayArea .slideWrap .movieThumb li .twoLine p {margin-bottom:5px;font-size:16px;}
.tvWrap .moviePlayArea .slideWrap .movieThumb li .twoLine span {font-size:25px;}
.tvWrap .moviePlayArea .slideWrap .moveButton {position:absolute;bottom:0;left:0;width:100%;height:50px;border-radius:0 0 3px 3px;background:#7F411F url("../images/icon_arrow_01.svg") no-repeat center center / auto 8px;background-size:auto 12px;}
.tvWrap figure {position:relative;z-index:2;}

#move_player.cover {background:url("../images/cover.png") center center no-repeat;background-size:auto 100%;}

.infoWrap {padding:80px 0 80px 0;background-color:#FDF9D5;}
.infoWrap .box {width:890px;margin:35px auto 0;padding:43px 77px;border-radius:10px;box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.05), inset -1px -1px 5px rgba(0, 0, 0, 0.1);background-color:#fff;}
.infoWrap .box ul li {padding-left:60px;background:url("../images/icon_check.png") no-repeat 0 0;font-size:23px;font-weight:700;color:#543727;line-height:45px;}
.infoWrap .box ul li+li {margin-top:18px;}
.infoWrap .box ul li p {font-family:"Noto Sans KR";font-size:18px;font-weight:500;}

.faqWrap {padding:70px 0 80px;background-color:#FAF17E;}
.faqWrap .cloud01 {top:-127px;left:calc(50% - 1085px);width:565px;height:276px;background-image:url("../images/info_cloud_01.png");background-size:auto 275px;}
.faqWrap .tabUI {display:flex;justify-content:center;margin-top:25px;}
.faqWrap .tabUI a {display:inline-flex;width:34px;height:34px;border-radius:50%;background-color:#F2F2F2;color:#c6c6c6;box-shadow:1px 1px 3px rgba(0, 0, 0, 0.05);font-weight:700;align-items:center;justify-content:center;}
.faqWrap .tabUI li+li {margin-left:20px;}
.faqWrap .tabUI li.active a {background-color:#FAF17E;color:#000;}
.faqWrap .faq__box {margin-top:35px;padding:50px 75px;border-radius:10px;background-color:#fff;box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.05), inset -1px -1px 5px rgba(0, 0, 0, 0.1);}
.faqWrap .faq__list {font-family:"Noto Sans KR";}
.faqWrap .faq__list .head {position:relative;height:58px;padding:18px 150px 18px 60px;margin-bottom:4px;background-color:#FDF9D5;border-radius:4px;font-size:18px;font-weight:700;cursor:pointer;}
.faqWrap .faq__list .head:after {content:"";position:absolute;top:calc(50% - 6px);right:60px;width:27px;height:12px;background:url("../images/faq_arrow.svg") no-repeat center center / auto 12px;transition:0.3s;}
.faqWrap .faq__list dd {display:none;padding:17px 0 17px 60px;margin-top:4px;background-color:#FAF17E;border-radius:4px;box-shadow:1px 1px 5px rgba(0, 0, 0, 0.02);font-size:14px;line-height:20px;font-weight:700;}
.faqWrap .faq__list li+li {margin-top:4px;}
.faqWrap .faq__list li.active dd {display:block;}
.faqWrap .faq__list li.active .head:after {transform:rotate(180deg);}

.moreWrap {background:#FDF9D5 url("../images/info_bg.png") no-repeat center bottom / 1920px auto;}
.moreWrap .innerWrap {padding:90px 0 60px;height:1156px;}
.moreWrap .link__group {display:flex;width:707px;height:407px;margin:24px auto 0;}
.moreWrap .link__group > .link {flex:1;height:407px;}
.moreWrap .link__group .netmarble {background:url("../images/more_link_01.png") no-repeat 0 26px / auto 374px;}
.moreWrap .link__group .netTV {background:url("../images/more_link_02.png") no-repeat right 0 / auto 407px;}
.moreWrap div[class*="item"] {height:154px;background-size:auto 154px;}
.moreWrap .item01 {top:-27px;left:calc(50% - 440px);width:150px;background-image:url("../images/more_ani_item_01.png");}
.moreWrap .item02 {top:-16px;left:calc(50% + 260px);width:184px;background-image:url("../images/more_ani_item_02.png");}

.moreWrap .buttonWrap {margin-top:50px;text-align:center;}
.moreWrap .buttonWrap .link {display:inline-block;width:276px;height:80px;font-size:30px;line-height:80px;;font-weight:700;text-align:center;color:#543727 !important;background-color:#FCDA00;border-radius:40px;box-shadow:0px 4px 10px rgba(0, 0, 0, 0.2);}
.moreWrap .buttonWrap .link+.link {margin-left:30px;}
.moreWrap .charGroup {position:absolute;bottom:74px;left:50%;width:917px;height:262px;transform:translateX(-50%);}
.moreWrap .charGroup .char01 {top:34px;left:0;width:238px;height:228px;background-image:url("../images/info_bot_char_01.png");background-size:auto 228px;}
.moreWrap .charGroup .char02 {top:0;left:246px;width:220px;height:220px;background-image:url("../images/info_bot_char_02.png");background-size:auto 220px;}
.moreWrap .charGroup .char03 {top:40px;left:483px;width:216px;height:216px;background-image:url("../images/info_bot_char_03.png");background-size:auto 216px;}
.moreWrap .charGroup .char04 {top:12px;right:0;width:187px;height:187px;background-image:url("../images/info_bot_char_04.png");background-size:auto 187px;}
.moreWrap .cloud01 {top:468px;left:calc(50% - 1071px);width:411px;height:201px;background-image:url("../images/info_cloud_03.png");background-size:auto 201px;}
.moreWrap .cloud02 {top:-118px;left:calc(50% + 615px);width:381px;height:186px;background-image:url("../images/info_cloud_02.png");background-size:auto 186px;}

.interviewWrap {padding:280px 0 40px;background-color:#FDF9D5;}
.interviewWrap .interview__list {display:flex;margin-top:48px;flex-flow:wrap row;justify-content:center;}
.interviewWrap .interview__list li {position:relative;width:200px;height:290px;margin-bottom:44px;border-radius:11px;background-color:#fff;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);text-align:center;overflow:hidden;cursor:pointer;}
.interviewWrap .interview__list li figure {height:180px;overflow:hidden;}
.interviewWrap .interview__list li .info_detail {position:relative;height:110px;padding:18px 0 0 22px;font-family:"Noto Sans KR";text-align:left;}
.interviewWrap .interview__list li .info_detail p {font-size:13px;line-height:16px;font-weight:700;}
.interviewWrap .interview__list li .info_detail span {position:absolute;bottom:18px;left:22px;font-size:12px;color:#543727;font-weight:700;}
.interviewWrap .interview__list li:not(:nth-of-type(4n)) {margin-right:30px;}
.interviewWrap .interview__list li .coming {display:none;position:absolute;top:0;left:0;width:100%;height:100%;padding-top:40px;background:#fff url("../images/coming_char.png") no-repeat center bottom;font-size:30px;font-weight:700;color:#543727;transition:0.3s;}
/* .interviewWrap .interview__list li:hover .coming {opacity:1;} */
.interviewWrap .interview__list li:hover figure img {transform:scale(1.2);transform-origin:left top;transition:0.3s;}

.popupWrap {width:900px;height:calc(100vh - 150px);overflow-y:auto;}
.popupWrap .btn_popClose {position:absolute;top:30px;right:30px;width:70px;height:70px;background:url("../images/btn_popClose.png") center center no-repeat;}
.popupWrap figure img {width:100%;}
.popupWrap.duty03 {height:777px;}

.popupWrap.movie_box {overflow:initial;height:auto;}
/* .popupWrap.movie_box .btn_popClose {top:-45px;right:0;} */
.popupWrap.movie_box .btn_popClose {position:absolute;top:-45px;right:0;width:40px;height:40px;background-color:transparent;z-index:10;background-image:none;}
.popupWrap.movie_box .btn_popClose:before,
.popupWrap.movie_box .btn_popClose:after {content: "";position: absolute;top: 50%;left: 50%;width:30px;height: 2px;background-color:#fff;}
.popupWrap.movie_box .btn_popClose:before {transform: translate(-50%, -50%) rotate(-45deg);}
.popupWrap.movie_box .btn_popClose:after {transform: translate(-50%, -50%) rotate(45deg);}
.popupWrap.movie_box .btn_popClose.light:before,
.popupWrap.movie_box .btn_popClose.light:after {background-color:#fff;}

@media (prefers-color-scheme: dark) {
    body {
        background: #fff;
    }
}

/* mediaQuery */

@media (max-width:1100px) {
	.innerWrap {width:100%;padding:0 20px;}

	header .logo {left:20px;}
	header .btn_apply {right:20px;}

	figure img {width:100%;}

	/* .headingWrap {height:100vh;} */
	/* .headingWrap .motionArea {transform:scale(1.4);transform-origin:top center;top:27.2727vw;} */
	/* .headingWrap .titleArea {bottom:27.2727vw;} */

	/* .tvWrap .moviePlayArea .slideWrap .slideOuter {height:31.8182vw;}
	.tvWrap .moviePlayArea .slideWrap .movieThumb li {height:7.7273vw;} */

	.tvWrap .recruitLink li {padding-left:250px;}
	.tvWrap .recruitLink li.com01 {background-size:auto 30px;}
	.tvWrap .recruitLink li.com02 {background-size:auto 55px;}
	.tvWrap .recruitLink li.com03 {background-size:auto 90px;}

	.townWrap .toggleBox li .detailBox a img {width:25.0909vw;}

}

@media (max-height:700px) and (max-width:1100px) {
	.headingWrap .motionArea {transform:scale(0.8);}
}

/* page motion */
.add-upscroll:not(.play-mo) {transform:translateY(70px) ;opacity:0;}
.play-mo.add-upscroll ,.play-mo .add-upscroll {animation: add-upscroll 0.7s 0s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay10 ,.play-mo .add-upscroll.delay10 {animation: add-upscroll 0.8s 0.1s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay20 ,.play-mo .add-upscroll.delay20 {animation: add-upscroll 0.8s 0.2s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay30 ,.play-mo .add-upscroll.delay30 {animation: add-upscroll 0.8s 0.3s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay40 ,.play-mo .add-upscroll.delay40 {animation: add-upscroll 0.8s 0.4s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay50 ,.play-mo .add-upscroll.delay50 {animation: add-upscroll 0.8s 0.5s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay60 ,.play-mo .add-upscroll.delay60 {animation: add-upscroll 0.8s 0.6s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay70 ,.play-mo .add-upscroll.delay70 {animation: add-upscroll 0.8s 0.7s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay80 ,.play-mo .add-upscroll.delay80 {animation: add-upscroll 0.8s 0.8s ease-in-out;animation-fill-mode: both;}
@keyframes add-upscroll {
	0%{
		transform:  translateY(70px) ;opacity:0;
	}
	100%{
		transform: translateY(0px);opacity:1;
	}
}

.add-downscroll:not(.play-mo) {transform:translateY(-70px) ;opacity:0;}
.play-mo.add-downscroll ,.play-mo .add-downscroll {animation: add-downscroll 0.7s 0.0s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay1 ,.play-mo .add-downscroll.delay1 {animation: add-downscroll 0.7s 0.1s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay2 ,.play-mo .add-downscroll.delay2 {animation: add-downscroll 0.7s 0.2s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay3 ,.play-mo .add-downscroll.delay3 {animation: add-downscroll 0.7s 0.3s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay4 ,.play-mo .add-downscroll.delay4 {animation: add-downscroll 0.7s 0.4s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay5 ,.play-mo .add-downscroll.delay5 {animation: add-downscroll 0.7s 0.5s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay6 ,.play-mo .add-downscroll.delay6 {animation: add-downscroll 0.7s 0.6s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay7 ,.play-mo .add-downscroll.delay7 {animation: add-downscroll 0.7s 0.7s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay8 ,.play-mo .add-downscroll.delay8 {animation: add-downscroll 0.7s 0.8s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay9 ,.play-mo .add-downscroll.delay9 {animation: add-downscroll 0.7s 0.9s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay10 ,.play-mo .add-downscroll.delay10 {animation: add-downscroll 0.7s 1.0s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay11 ,.play-mo .add-downscroll.delay11 {animation: add-downscroll 0.7s 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-downscroll.delay12 ,.play-mo .add-downscroll.delay12 {animation: add-downscroll 0.7s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-downscroll.delay13 ,.play-mo .add-downscroll.delay13 {animation: add-downscroll 0.7s 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-downscroll.delay14 ,.play-mo .add-downscroll.delay14 {animation: add-downscroll 0.7s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-downscroll.delay15 ,.play-mo .add-downscroll.delay15 {animation: add-downscroll 0.7s 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-downscroll.delay16 ,.play-mo .add-downscroll.delay16 {animation: add-downscroll 0.7s 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-downscroll.delay17 ,.play-mo .add-downscroll.delay17 {animation: add-downscroll 0.7s 1.7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
@keyframes add-downscroll {
	0%{
		transform:  translateY(-100vh) ;opacity:0;
	}
	100%{
		transform: translateY(0px);opacity:1;
	}
}

.add-scale:not(.play-mo) {transform:scale(0) ;opacity:0;}
.play-mo.add-scale ,.play-mo .add-scale {animation: add-scale 1.0s 1.0s ease-in-out  ;animation-fill-mode: both;}

@keyframes add-scale {
	0%{
		opacity:0;
		transform: scale(0);
	}
	100%{
		transform: scale(1);
		opacity:1;
	}
}

.add-autoZoom:not(.play-mo) {transform:translateY(-70px) ;opacity:0;}
.play-mo.add-autoZoom ,.play-mo .add-autoZoom {animation: add-autoZoom 3.0s 0.0s ease-in-out infinite ;}
.play-mo.add-autoZoom.delay10 ,.play-mo .add-autoZoom.delay10 {animation: add-autoZoom 4.5s 0.2s ease-in-out infinite ;}
.play-mo.add-autoZoom.delay20 ,.play-mo .add-autoZoom.delay20 {animation: add-autoZoom 3.3s 0.4s ease-in-out infinite ;}
.play-mo.add-autoZoom.delay30 ,.play-mo .add-autoZoom.delay30 {animation: add-autoZoom 2.8s 0.6s ease-in-out infinite ;}


@keyframes add-autoZoom {
	0%{
		opacity:0;
		transform: scale(0.5);
	}
	80%{
		transform: scale(1.1);
		opacity:1;
	}
	100%{
		transform: scale(1);
		opacity:0;
	}
}
.add-left:not(.play-mo) {transform:translateX(500px) ;opacity:0;}
.play-mo.add-left ,.play-mo .add-left {animation: add-left 1.0s 0.0s ease-in-out  ;animation-fill-mode: both;}
.play-mo.add-left.delay10 ,.play-mo .add-left.delay10 {animation: add-left 1.0s 0.2s ease-in-out  ;animation-fill-mode: both;}
.play-mo.add-left.delay20 ,.play-mo .add-left.delay20 {animation: add-left 0.5s 0.5s ease-in-out  ;animation-fill-mode: both;}
@keyframes add-left {
	0%{
		transform:  translateX(500px) ;opacity:0;
	}
	100%{
		transform: translateX(0px);opacity:1;
	}
}
.add-right:not(.play-mo) {transform:translateX(-500px) ;opacity:0;}
.play-mo.add-right ,.play-mo .add-right {animation: add-right 1.0s 0.0s ease-in-out  ;animation-fill-mode: both;}
.play-mo.add-right.delay10 ,.play-mo .add-right.delay10 {animation: add-right 1.0s 0.2s ease-in-out  ;animation-fill-mode: both;}
.play-mo.add-right.delay20 ,.play-mo .add-right.delay20 {animation: add-right 0.5s 0.5s ease-in-out  ;animation-fill-mode: both;}
@keyframes add-right {
	0%{
		transform:  translateX(-500px) ;opacity:0;
	}
	100%{
		transform: translateX(0px);opacity:1;
	}
}

.add-pre-balloon
{
	animation: add-pre-balloon 1.3s 0s alternate infinite ;
}
@keyframes add-pre-balloon {

	100%{
		transform: translate(0%,-10px);
	}
}
.add-sss1:not(.play-mo) {opacity:0;}
.add-sss2:not(.play-mo) {opacity:0;}
.play-mo.add-sss1 ,.play-mo .add-sss1 {animation: add-sss1 2.0s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;opacity:1;}
.play-mo.add-sss2 ,.play-mo .add-sss2 {animation: add-sss2 3.0s 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;opacity:1;}
@keyframes add-sss1 {
	0%{
		transform:  scale( 0.8 ) translateZ(0px) rotate(0deg);
	}
	100%{
		transform: scale( 1.1 ) translateZ(20px) rotate(-5deg) ;
	}
}
@keyframes add-sss2 {
	0%{
		transform:  scale( 0.8 ) translateZ(0px) rotate(0deg);
	}
	100%{
		transform: scale( 1.1 ) translateZ(20px) rotate(5deg) ;
	}
}

.play-mo.add-zoom ,.play-mo .add-zoom {animation: add-zoom 1.0s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;opacity:1;}
@keyframes add-zoom {
	0%{
		transform:  scale( 1 ) translateY(0px) ;
	}
	100%{
		transform: scale( 1.1 ) translateY(-50px)  ;
	}
}

.add-pre-char1 {animation: add-pre-char 0.6s 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;}
.add-pre-char2 {animation: add-pre-char2 0.8s 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;}
.add-pre-char3 {animation: add-pre-char3 0.7s 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;}
.add-pre-char4 {animation: add-pre-char4 0.9s 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;}
.add-pre-char5 {animation: add-pre-char5 4.1s 1.0s  alternate infinite;}

@keyframes add-pre-char {
	0%{
		transform:  translateY(3px) ;
	}
	100%{
		transform: translateY(-10px);
	}
}
@keyframes add-pre-char2 {
	0%{
		transform:  translate(0px, 0px) ;
	}
	100%{
		transform: translate(-2px, -2px);
	}
}
@keyframes add-pre-char3 {
	0%{
		transform:  scale( 1.0 ) ;
	}
	100%{
		transform: scale( 0.9 );
	}
}
@keyframes add-pre-char4 {
	0%{
		transform:  translate(0px, 0px) ;
	}
	100%{
		transform: translate(2px,-2px);
	}
}
@keyframes add-pre-char5 {
	0%{
		transform:  translate(0px, 0px) ;
	}
	100%{
		transform: translate(-80px, -50px);
	}
}
.add-pre-char .char {animation: roundGroup1 0.6s 0.0s alternate  infinite;}
@keyframes roundGroup1 {
	0%{
		opacity:1;
		transform: scale(1.1);
	}

	100%{
		transform: scale(1);
		opacity:1;
	}
}
.add-pre-char .roundGroup :nth-of-type(1){animation: roundGroup 1.2s 0.0s  infinite;}
.add-pre-char .roundGroup :nth-of-type(2){animation: roundGroup 1.2s 0.5s  infinite;}
.add-pre-char .roundGroup :nth-of-type(3){animation: roundGroup 1.2s 1.0s  infinite;}

@keyframes roundGroup {
	0%{
		opacity:0;
		transform: scale(0);
	}
	80%{
		transform: scale(1.1);
		opacity:1;
	}
	100%{
		transform: scale(1);
		opacity:0;
	}
}

.add-pre-cloud1 {animation: add-pre-cloud 2.0s 0.1s alternate infinite;transition:transform 1.5s easy-in-out;	}
.add-pre-cloud2 {animation: add-pre-cloud2 3.0s  0.3s alternate infinite;transition:transform 2.5s easy-in-out;	}
.add-pre-cloud3 {animation: add-pre-cloud 2.0s  0.5s alternate infinite;transition:transform 1.5s easy-in-out;	}
.add-pre-cloud4 {animation: add-pre-cloud2 3.0s  0.7s alternate infinite;transition:transform 2.5s easy-in-out;	}
.add-pre-cloud5 {animation: add-pre-cloud3 2.0s  0.1s alternate infinite;transition:transform 2.5s easy-in-out;	}
.add-pre-cloud6 {animation: add-pre-cloud3 2.0s  0.5s alternate infinite;transition:transform 2.5s easy-in-out;	}
.add-pre-cloud7 {animation: add-pre-cloud2 5.0s  0.5s alternate infinite;transition:transform 2.5s easy-in-out;	}
.add-pre-cloud8 {animation: add-pre-cloud2 5.0s  0.7s alternate infinite;transition:transform 2.5s easy-in-out;	}
.add-pre-cloud9 {animation: add-pre-cloud2 5.0s  0.9s alternate infinite;transition:transform 2.5s easy-in-out;	}
@keyframes add-pre-cloud {
	0%{
		transform: scale( 1.0 ) translate(0px, 0px) ;
	
	}
	100%{
		transform: scale( 1.00 ) translate(10px, -10px) ;
	
	}
}

@keyframes add-pre-cloud2 {
	0%{
		transform: scale( 1.0 ) translate(0px, 0px) ;
	
	}
	100%{
		transform: scale( 1.00 ) translate(10px, 10px) ;
	
	}
}
@keyframes add-pre-cloud3 {
	0%{
		transform: scale( 1.0 ) translate(0px, 0px) ;
	
	}
	100%{
		transform: scale( 1.00 ) translate(30px, -30px) ;
	
	}
}
.waterChar
{
	animation: waterChar 2.3s 0s alternate infinite ;
}
@keyframes waterChar {

	100%{
		transform: translate(0%,-20px);
	}
}