@charset "utf-8";

@import url("./reset.css");
@import url("./svgstyle.css");
@import url("./puzzle.css");
@import url("./bunsu_stick.css");
@import url("../multiplication/style/index.css");
@import url("../graphpaper/style/index.css");
@import url("./fraction.css");

/* font */
@font-face {
    font-family: "PretendardBk";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendard-black.woff");
}

@font-face {
    font-family: "PretendardEB";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendard-extrabold.woff");
}

@font-face {
    font-family: "PretendardB";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendard-bold.woff");
}

@font-face {
    font-family: "PretendardSB";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendard-semibold.woff");
}

@font-face {
    font-family: "PretendardM";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendard-medium.woff");
}

@font-face {
    font-family: "PretendardR";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendard-regular.woff");
}

@font-face {
    font-family: "PretendardL";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendard-light.woff");
}
@font-face {
    font-family: "PretendardEL";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendard-extralight.woff");
}
@font-face {
    font-family: "PretendardT";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendard-thin.woff");
}
@font-face {
    font-family: "PretendardJP";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/pretendardjp-regular.woff");
}

@font-face {
    font-family: "GmarketL";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/gmarketsanslight.woff");
}

@font-face {
    font-family: "SinbiR";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/ssshinb7regular.woff");
}

@font-face {
    font-family: "nanumMyeongjo";
    font-weight: 400;
    src: url("https://aidtcdn-dev.aitextbook.co.kr/content/font/e0_math_0s_h1/nanummyeongjoextrabold.woff");
}

/*=========================================================================================================
* Project     : 
* File Name : board.css
* Writer       : cat
* Date         : 2023-05-00
=========================================================================================================*/



/*=========================================================================================================
* common
=========================================================================================================*/
*, *:after, *:before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; }
*:focus { outline: none; }
html, body {margin: 0; padding: 0; width: 100%; height: 100%; font-size: 100%; }
body { color: #fff; font-family: 'PretendardR',"맑은 고딕", "Malgun Gothic", Arial, sans-serif;}
ul, li, ol {list-style: none; }
fieldset{border: none;}
caption, legend{visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
h1, h2, h3, h4, h5 { margin: 0; padding: 0; font-weight: normal;}
a { text-decoration: none; outline:none; }
a:link, a:active, a:visited { color: #fff; text-decoration: none; }
img { border: 0; vertical-align:top;}
table{border-collapse: collapse;}
em,address{font-style: normal;}
#skipnavi, .hidden{ width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }
a{ text-decoration:none; outline: none;  -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;  }
a:visited,a:hover,a:active,a:focus{ background: none; -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent; }
input, select, textarea {font-family: 'GmarketB'}


.wrap { position:relative; overflow:hidden; transition: background .5s; height: 100%;}
.wrap .container{ width: 1280px; height: 720px; position: relative; overflow:hidden;}
.wrap .container.hide { opacity:0;}
.wrap.main { background-image: url(../images/intro_bg.png); background-size: 100% 100%;}
.wrap.modo { background: #f8f8f8;}


/*=========================================================================================================
* header
=========================================================================================================*/
.header { width:100%; height: 40px; background: #fff; position:absolute; bottom:-40px; left:0; overflow: hidden; opacity:0;z-index:-1; pointer-events:none; transition:z-index 0s .5s, opacity .3s, bottom .3s;}
.header .openmenu { position:Absolute; top:10px; left:15px; font-size:0; cursor: pointer; z-index:1;}
.header .openmenu span { display:inline-block; width: 24px; height: 22px; }
.header .openmenu path {fill: none;stroke: #000;stroke-width: 2;--length: 22; stroke-dasharray: var(--length) var(--total-length);stroke-dashoffset: var(--offset);transition: all .3s cubic-bezier(.645, .045, .355, 1);}
.header .openmenu .line--1 {--total-length: 20;--offset: -13;}
.header .openmenu .line--3 {--total-length: 20;--offset: -8;}
.header .openmenu .line--2 {--total-length: 3;--offset: -2; }
.header .openmenu svg {-webkit-transform: rotate(180deg);transform: rotate(180deg); width:24px; height:22px;}
.header .openmenu.hidd svg path,
.header .openmenu:hover svg path {transform: translateX(-2px); }
.header .openmenu.hidd svg .line--1,
.header .openmenu:hover svg .line--1 {--length: 10;--offset: 0;transform: rotate(-40deg) translateY(6px); transform-origin: left 11px;}
.header .openmenu.hidd svg .line--3,
.header .openmenu:hover svg .line--3 {--length: 10;--offset: 0;transform: rotate(40deg) translateY(-6px); transform-origin:left 11px;}
.header .openmenu.hidd svg .line--2,
.header .openmenu:hover svg .line--2 {--offset: 0;}
.header .openmenu,
.header .openmenu:hover {transition: transform .1s ease-out, opacity .3s .1s, top .3s .1s;}
.header .openmenu.hidd.on { top: 40px; opacity:0; pointer-events:none; transition: top .3s .1s, opacity .3s .1s;}
.header .subTabList { height:100%; position:relative; text-align:center; }
.header .subTabList ul { display:inline-block; font-size:0; position:Absolute; bottom:-40px; left:50%; transform: translateX(-50%); opacity:0; z-index:-1; pointer-events:none; transition:z-index 0s .5s, opacity .3s, bottom .3s;}
.header .subTabList ul.on {opacity:1; bottom:0; pointer-events:auto; z-index:1; transition:z-index 0s, opacity .3s, bottom .3s;}
.header .subTabList li { display:inline-block; padding: 0 9px; font-size:14px; color: #c7c7c7; line-height:40px; letter-spacing: -0.025em; font-family: 'PretendardEB'; vertical-align:top; cursor: pointer; transition: color .3s;}
.header .subTabList li.on { color: #000; transition: color .3s; pointer-events:none;}
.header.on { opacity:1; bottom:0; pointer-events:auto; z-index:10; transition:z-index 0s, opacity .3s .2s, bottom .3s .2s;}

.header.on.removeBg {background: none; pointer-events: none;}
.header.on.removeBg .openmenu {pointer-events: auto;}

.menuList { width:100%; height:100%; text-align:center; background: rgba(0,0,0,0.9); position:Absolute; top:0; left:0; opacity:0; z-index:-1; pointer-events:none; transition:z-index 0s .5s, opacity .3s;}
.menuList ul { padding-top: 90px; width:760px; margin: 0 auto; }
.menuList li {position: Relative; font-size: 40px; line-height: 60px; letter-spacing: -0.01em; font-family: 'PretendardBk'; }
.menuList li span { display:inline-block; position:relative; cursor: pointer; }
.menuList li span em { opacity: 0.2; transition: opacity .3s;}
.menuList li.over span em { opacity: 1;}
.menuList li span em i {display: inline-block; width: 35px; height: 35px; background-color: #fff; border-radius: 5px; vertical-align: middle;}

.menuList li.on span { pointer-events:none;}
.menuList li.none {pointer-events: none;}
.menuList .close { display:inline-block; bottom:7px; left:-24px; width:24px; height:24px; background: url('../images/board/menulist_close_ico.png') no-repeat center; cursor: pointer; position:absolute; opacity:0; pointer-events:none; transition:left .3s, opacity .3s;}
.menuList.on { opacity:1; pointer-events:auto; z-index:10; transition:z-index 0s, opacity .3s;}
.menuList.on .close { left:13px; opacity:1; pointer-events:auto; transition:left .3s .2s, opacity .3s .2s;}

.sub { opacity:0; width:100%; height: 100%;position:absolute; top:720px; left: 0; z-index:-1; pointer-events:none; transition:z-index 0s .5s, opacity .3s; } 
.sub.on { opacity:1; top:0; pointer-events:auto; z-index:10; transition:z-index 0s, opacity .5s, top .5s, background-color .3s .3s;}

.menuList li:nth-of-type(1) {position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background-image: url(../images/home.png); background-size: 100% 100%;}
.menuList li:nth-of-type(1) span {width: 100%; height: 100%;}
.menuList li:nth-of-type(1) span em {width: 100%; height: 100%;}


/*=========================================================================================================
* mainPage
=========================================================================================================*/
.mainPage { height: 100%; position:relative;opacity:0;z-index:-1; pointer-events:none; transition:z-index 0s .5s, opacity .3s;}
.mainPage .bgmov { opacity:0; transition: opacity .1s;}
.mainPage .bgmov video {vertical-align:top;}
.mainPage.on { opacity:1; pointer-events:auto; z-index:10; transition:z-index 0s, opacity .5s;}
.mainPage.on .bgmov { opacity:1; transition: opacity .8s .6s;}
.mainPage .conbox { width:100%; height:100%; position:absolute; top:0; left:0; }

.mainPage .textbox { opacity:0; position:Absolute; top:42px; left:0; transition: left .3s, opacity .3s;}
.mainPage .textbox h1 {font-size: 22px; line-height: 34px; letter-spacing: -0.025em; font-family: 'PretendardEB';}
.mainPage.on .textbox { left: 0; opacity:1; transition: opacity .5s .6s; width: 100%; height: 100%;}

.mainPage .textbox .chap_wrap {width: calc(2358px / 2); display: flex; flex-wrap: wrap; justify-content: space-around; position: absolute; top: 454px; left: 50%; transform: translateX(-50%);}

.mainPage .textbox ul li {width: 300px; height: 192px; background-size: 100% 100%; position: relative; transition: all 1s;}
.mainPage .textbox ul li.none {pointer-events: none; filter: grayscale(100);}
.mainPage .textbox ul li.hover {transform: scale(1.1); }
.mainPage .textbox ul {display: flex; flex-wrap: wrap; justify-content: space-around; width: calc(1948px / 2); position: absolute; top: 50px; left: 50%; transform: translateX(-50%); }
.mainPage .textbox ul li {margin-bottom: 10px; cursor: pointer;}
.mainPage .textbox ul li:nth-of-type(1) {background-image: url(../images/intro/chap01.png);}
.mainPage .textbox ul li:nth-of-type(2) {background-image: url(../images/intro/chap02.png);}
.mainPage .textbox ul li:nth-of-type(3) {background-image: url(../images/intro/chap03.png);}
.mainPage .textbox ul li:nth-of-type(4) {background-image: url(../images/intro/chap04.png);}
.mainPage .textbox ul li:nth-of-type(5) {background-image: url(../images/intro/chap05.png);}
.mainPage .textbox ul li:nth-of-type(6) {background-image: url(../images/intro/chap06.png);}
.mainPage .textbox ul li:nth-of-type(7) {background-image: url(../images/intro/chap07.png);}
.mainPage .textbox ul li:nth-of-type(8) {background-image: url(../images/intro/chap08.png);}
.mainPage .textbox ul li:nth-of-type(9) {background-image: url(../images/intro/chap09.png);}

.mainPage .textbox ul li p {width: 100%; height: 45px; position: absolute; top: 131px; left: 0; text-align: center; color: #000; font-family: 'PretendardEB'; line-height: 45px; display: flex; justify-content: center; align-items: center; gap: 10px;}
.mainPage .textbox ul li p span {display: inline-block; background-size: 100% 100%;}
.mainPage .textbox ul li:nth-of-type(2) p span { width: calc(161px / 2); height: 20px; background-image: url(../images/intro/chap02_tit.png); }
.mainPage .textbox ul li:nth-of-type(3) p span { width: 84px; height: 35px; background-image: url(../images/intro/chap03_tit.png); }

.mainPage .textbox .intro_icon { position: absolute; background-size: 100% 100%; animation: 2s ease-in-out infinite; animation-direction: alternate-reverse;}
.mainPage .textbox .intro_icon.icon1 {width: 74px; height: 74px; background-image: url(../images/intro/icon_01.png); top: 100px; left: 80px; animation-name: icon1;}
.mainPage .textbox .intro_icon.icon2 {width: calc(171px / 2); height: calc(155px / 2); background-image: url(../images/intro/icon_02.png); top: 520px; left: 20px;  animation-name: icon2;}
.mainPage .textbox .intro_icon.icon3 {width: calc(252px / 2); height: calc(249px / 2); background-image: url(../images/intro/icon_03.png); top: 520px; left: 1120px;  animation-name: icon3; }

@keyframes icon1 {
    0% {top: 100px;}
    50% {top: 110px;}
    100% {top: 90px;}
}

@keyframes icon2 {
    0% {top: 520px;}
    100% {top: 490px;}
}

@keyframes icon3 {
    0% {top: 490px;}
    100% {top: 520px;}
}

@-webkit-keyframes flipInX {
0% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);transform: perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-transition-timing-function: ease-in;transition-timing-function: ease-in;opacity: 0;}
40% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);transform: perspective(400px) rotate3d(1, 0, 0, -20deg);-webkit-transition-timing-function: ease-in;transition-timing-function: ease-in;}
60% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);transform: perspective(400px) rotate3d(1, 0, 0, 10deg);opacity: 1;}
80% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
100% {-webkit-transform: perspective(400px);transform: perspective(400px);opacity: 1;}
}
@keyframes flipInX {
0% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);transform: perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-transition-timing-function: ease-in;transition-timing-function: ease-in;opacity: 0;}
40% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);transform: perspective(400px) rotate3d(1, 0, 0, -20deg);-webkit-transition-timing-function: ease-in;transition-timing-function: ease-in;}
60% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);transform: perspective(400px) rotate3d(1, 0, 0, 10deg);opacity: 1;}
80% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
100% {-webkit-transform: perspective(400px);transform: perspective(400px);opacity: 1;}
} 

.mainPage .textbox .arwC {display:inline-block; width:30px; height:30px; border-radius:100%; background: #000 url('../images/pagelist_arwc.png') no-repeat center; position:absolute; top:0; right:0; opacity: 0; pointer-events: none; transform: translateX(-50px); transition: opacity .3s, transform .3s;}
.mainPage .textbox .arwC.on{opacity: 1; transform: translateX(0); transition: opacity .5s, transform .5s;}

.wrap > .cover{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #6034c7;}

/*=========================================================================================================
* blackBoard
=========================================================================================================*/
.blackBoard { padding-bottom: 40px; } 
.blackBoard .bBbg { opacity:0; display:inline-block; width:100%; height:100%; position:Absolute; top:0; left:0; transition: opacity .3s; }
.blackBoard .bBbg.ty0 { background:#f8f8f8;}
.blackBoard .bBbg.ty1 { background: #f8f8f8 url('../images/board/blackboard_bgselbox_bg_ty1.png') repeat 0 0;}
.blackBoard .bBbg.ty2 { background: #f8f8f8 url('../images/board/blackboard_bgselbox_bg_ty2.png') repeat 0 0;}
.blackBoard .bBbg.ty3 { background: #f8f8f8 url('../images/board/blackboard_bgselbox_bg_ty3.png') repeat 0 0;}
.blackBoard .bBbg.ty4 { background: #f8f8f8 url('../images/board/blackboard_bgselbox_bg_ty4.png') repeat 36px 35px;}
.blackBoard.on .bBbg { opacity:1; transition: opacity .3s .3s;}
.blackBoard .in { position:relative; height:100%; overflow:hidden;}
.blackBoard .bdbox { position:relative; height:100%; }
.blackBoard .bgselBox { opacity:0; width:100%; height:100%; position:Absolute; top:100px; left:0; z-index:-1; pointer-events:none; transition: opacity .3s, top .3s, z-index 0s .8s;}
.blackBoard .bgselBox ul { margin-left: -350px; width:700px; font-size:0; position:Absolute; bottom:20px; left:50%;}
.blackBoard .bgselBox li { display:inline-block; margin: 0 5px; width:130px; height:80px; border-radius:4px; border:2px solid #000; vertical-align:top;background-color:#fdfdfd; background-repeat: no-repeat; background-position:center; position:relative; overflow: hidden; cursor: pointer; box-shadow: 20px 20px 94px rgba(0,0,0,0.1);}
.blackBoard .bgselBox li:nth-child(2) { background-image: url('../images/board/blackboard_bgselbox_listbg_1.png');}
.blackBoard .bgselBox li:nth-child(3) { background-image: url('../images/board/blackboard_bgselbox_listbg_2.png');}
.blackBoard .bgselBox li:nth-child(4) { background-image: url('../images/board/blackboard_bgselbox_listbg_3.png');}
.blackBoard .bgselBox li:nth-child(5) { background-image: url('../images/board/blackboard_bgselbox_listbg_4.png');}
.blackBoard .bgselBox li.on { border-color: #6034c7;}
.blackBoard .bgselBox.on { opacity:1; z-index:1; pointer-events:auto; top:0; transition: opacity .3s, top .3s,z-index 0s; }


/* toolbox */
.blackBoard .boardArea { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;}
.blackBoard .boardArea .draw_svg { overflow: visible; pointer-events: none; width: 100%; height: 100%; transform: scale(1); display: inline-block;}
.blackBoard .boardArea .eraser {width: 30px; height: 30px; border-radius: 100%; border: 1px solid rgba(0, 0, 0, 0.2); position: absolute; transform: translate(-50%,-50%); pointer-events: none; opacity: 0;}
.blackBoard .boardArea .imgcase{position: absolute; user-select: none;}
.blackBoard .boardArea .imgcase img{pointer-events: none; width: 100%; height: 100%;}
.blackBoard .boardArea.open { pointer-events: auto; z-index: 1;}
.blackBoard .boardArea.open .draw_svg,
.blackBoard .boardArea.open .sjx-svg-wrapper { pointer-events: auto;}
.blackBoard .boardArea.open .draw_svg path { pointer-events: auto;}
.blackBoard .boardArea.off{display: none;}
.blackBoard .boardArea.pen{cursor: url("../images/board/blackboard_pen.png") 0 30, auto;}
.blackBoard .boardArea.highlight{cursor: url("../images/board/blackboard_highlight.png") 0 30, auto;}


.blackBoard .figureArea{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;}
.blackBoard .figureArea.open { }
.blackBoard .figureArea.off{display: none;}
.blackBoard .figureArea .svg-container{width: 100%; height: 100%;}
.blackBoard .figureArea .svg-container *{pointer-events: auto;}
.blackBoard .figureArea .fiGure{display: inline-block; width: 260px; height: 260px; position: absolute; left:200px; top: 200px;}
.blackBoard .figureArea.lineDraw{pointer-events: auto;}
.blackBoard .figureArea.lineDraw .svg-container{pointer-events: auto;}

/* stickerArea */

.blackBoard .stickerArea{position: absolute; left: 0px; top: 0px; width: 100%;}
.blackBoard .stickerArea.open { pointer-events: auto;}
.blackBoard .stickerArea.off{display: none;}
.blackBoard .stickerArea .svg-container{width: 100%; height: 100%;}
.blackBoard .stickerArea .fiGure{display: inline-block; width: 260px; height: 260px; position: absolute; left:200px; top: 200px; background-repeat: no-repeat; background-size: contain; background-position: center;}


/* textBoxArea */
.blackBoard .textBoxArea{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none; overflow: hidden;} 
.blackBoard .textBoxArea.open { pointer-events: auto;}
.blackBoard .textBoxArea.off {display: none;}
.blackBoard .textBoxArea .textCase{display: inline-block; position: absolute; font-size: 0; padding: 8px; width: 500px; height: 101px; left: 100px; top: 100px;}
.blackBoard .textBoxArea .textCase:after{content: ''; position: absolute; width: 100%; height: 100%; border: 1px solid #000; left: 0px; top: 0px; pointer-events: none;}
.blackBoard .textBoxArea .textCase.sjx-drag{pointer-events: none;}
.blackBoard .textBoxArea .textCase.sjx-drag:after{content: none;}
.blackBoard .textBoxArea .textBox{cursor: pointer; resize: none; display: inline-block; width: calc(100% - 16px); height: 164px; border: none; padding-bottom: 35px; position: absolute; background-color: rgba(0, 0, 0, 0); text-align: left; font-size: 25px;}
.blackBoard .textBoxArea .textBox::-webkit-scrollbar{width: 0;}

/*  font Size 25 - > padding Bottom 35 */
/*  font Size 50 - > padding Bottom 60 */
/*  font Size 75 - > padding Bottom 90 */
/*  font Size 100 - > padding Bottom 115 */
/*  font Size 125 - > padding Bottom 145 */
/*  font Size 150 - > padding Bottom 175 */



.blackBoard .fBtnarea { opacity:0; padding: 10px 0; width:50px; height:370px; border-radius:50px; background: rgba(248,248,248,0.3); position:Absolute; top:170px; right:-60px; transition: opacity .3s, right .3s; z-index: 1;}
.blackBoard .fBtnarea li { position:relative; height:50px; }
.blackBoard .fBtnarea li em { opacity: 0.2; display:inline-block; width:100%; height:100%; cursor: pointer; background-repeat: no-repeat; background-position: center; }
.blackBoard .fBtnarea li span { opacity:0; margin-top:-15px; padding: 0 10px; height:30px; font-size:14px; color: #fff; line-height:30px; letter-spacing: -0.025em; font-family: 'PretendardEB'; white-space:nowrap; border-radius:3px; background: rgba(96,52,199,0.9); position:absolute; top:50%; right:40px; transition: right .3s, opacity .3s; cursor: default;}
.blackBoard .fBtnarea li span:after {opacity:0; content:''; margin-top:-4px; display:inline-block; border-left: 6px solid rgba(96,52,199,0.9); border-top:4px solid transparent; border-bottom:4px solid transparent; position:Absolute; right:0px; top:50%; transition: opacity .3s, right .3s; }
.blackBoard .fBtnarea li.on em,.blackBoard .fBtnarea li em:hover { opacity:1;}
.blackBoard .fBtnarea li em:hover + span { opacity:1; right:60px;}
.blackBoard .fBtnarea li em:hover + span:after {opacity:1;right:-5.4px; transition: opacity .3s .1s, right .3s .1s;}
.blackBoard .fBtnarea li.on em:hover + span { opacity:0; right: 35px; }
.blackBoard .fBtnarea li:nth-child(1) em { background-image: url('../images/board/blackboard_fbtnarea_btn1.png');}
.blackBoard .fBtnarea li:nth-child(2) em { background-image: url('../images/board/blackboard_fbtnarea_btn2.png');}
.blackBoard .fBtnarea li:nth-child(3) em { background-image: url('../images/board/blackboard_fbtnarea_btn3.png');}
.blackBoard .fBtnarea li:nth-child(4) em { background-image: url('../images/board/blackboard_fbtnarea_btn4.png');}
.blackBoard .fBtnarea li:nth-child(5) em { background-image: url('../images/board/blackboard_fbtnarea_btn5.png');}
.blackBoard .fBtnarea li:nth-child(6) em { background-image: url('../images/board/blackboard_fbtnarea_btn6.png');}
.blackBoard .fBtnarea li:nth-child(7) em { background-image: url('../images/board/blackboard_fbtnarea_btn7.png');}
.blackBoard.on .fBtnarea { opacity:1; right: 10px;  transition: opacity .5s .5s, right .5s .5s;}
.blackBoard .boardToolBox { opacity:0; pointer-events:none; width: 244px; position: absolute; right: 70px;background: rgba(96,52,199,0.9); border-radius: 5px; box-shadow: 20px 20px 54px rgba(86,33,210,0.2); z-index:1; backdrop-filter: blur(5px);}
.blackBoard .boardToolBox.on { opacity:1; pointer-events:auto; transition: opacity .6s .2s; }
.blackBoard .boardToolBox.tool1,
.blackBoard .boardToolBox.tool2 { top:180px;}
.blackBoard .boardToolBox.tool3 { top:210px;}
.blackBoard .boardToolBox.tool4 { top:235px;}
.blackBoard .boardToolBox.tool5 { top:105px;}
.blackBoard .boardToolBox.tool6 { top:340px;}
.blackBoard .boardToolBox .closeBtn { display:inline-block; width:26px; height:26px; text-align:center; border-radius:100%; background: #000; position:absolute; top:-30px; right:0px; cursor: pointer;}
.blackBoard .boardToolBox .closeBtn em { display:inline-block; margin-top:9px; width:8px; height:8px; background: url('../images/board/flatmodel_sup1_close_btn.png') no-repeat center; }
.blackBoard .boardToolBox .fcheader { padding: 0 0 0 24px; height:56px; position:Relative; border-bottom: 1px solid rgba(255,255,255,0.12);}
.blackBoard .boardToolBox .fcheader p { font-size:16px; color: #fff; line-height:56px; letter-spacing: -0.025em; font-family: 'PretendardEB';}
.blackBoard .boardToolBox .fcheader .rightbtn { position:Absolute; top:14px; right:15px;}
.blackBoard .boardToolBox .fcheader .rightbtn span { display:inline-block; opacity:0.3; margin: 0 2px; width:28px; height:28px; cursor: pointer; vertical-align:top;}
.blackBoard .boardToolBox .fcheader .rightbtn span.on,
.blackBoard .boardToolBox .fcheader .rightbtn span:hover { opacity:1;}
.blackBoard .boardToolBox .fcheader .rightbtn span:nth-child(1) {background: url('../images/board/blackboard_boardtoolbox_header_btn1.png') no-repeat center;}
.blackBoard .boardToolBox .fcheader .rightbtn span:nth-child(2) {background: url('../images/board/blackboard_boardtoolbox_header_btn2.png') no-repeat center;}
.blackBoard .boardToolBox .fccontent { padding: 10px; }
.blackBoard .boardToolBox .fccontent ul { font-size:0; display:flex;flex-wrap: wrap; }
.blackBoard .boardToolBox .fccontent li { opacity:0.3; display:flex; justify-content: center; align-items: center; margin: 14px; width:28px; height:28px; cursor: pointer; vertical-align:top; }
.blackBoard .boardToolBox .fccontent li span { display:inline-block; width:28px; height:28px; background-repeat: no-repeat; background-position:center; }
.blackBoard .boardToolBox .fccontent li.on,
.blackBoard .boardToolBox .fccontent li:hover { opacity:1;}
.blackBoard .boardToolBox .dwbox li:nth-child(1) span { background-image: url('../images/board/blackboard_boardtoolbox_icobtn1.png');}
.blackBoard .boardToolBox .dwbox li:nth-child(2) span { background-image: url('../images/board/blackboard_boardtoolbox_icobtn2.png');}
.blackBoard .boardToolBox .dwbox li:nth-child(3) span { background-image: url('../images/board/blackboard_boardtoolbox_icobtn3.png');}
.blackBoard .boardToolBox .dwbox li:nth-child(4) span { background-image: url('../images/board/blackboard_boardtoolbox_icobtn4.png');}
.blackBoard .boardToolBox .wrbox li:nth-child(1) span { background-image: url('../images/board/blackboard_boardtoolbox_icobtn5.png');}
.blackBoard .boardToolBox .wrbox li:nth-child(2) span { background-image: url('../images/board/blackboard_boardtoolbox_icobtn6.png');}
.blackBoard .boardToolBox .wrbox li:nth-child(3) span { background-image: url('../images/board/blackboard_boardtoolbox_icobtn7.png');}
.blackBoard .boardToolBox .wrbox li:nth-child(4) span { background-image: url('../images/board/blackboard_boardtoolbox_icobtn8.png');}
.blackBoard .boardToolBox .wrbox li.txtalign { opacity:1;}
.blackBoard .boardToolBox .wrbox li.txtalign.right span {background-image: url('../images/board/blackboard_boardtoolbox_icobtn8_right.png');}
.blackBoard .boardToolBox .wrbox li.txtalign.center span {background-image: url('../images/board/blackboard_boardtoolbox_icobtn8_center.png');}
.blackBoard .boardToolBox .sizebox li { cursor: default; opacity:1;}
.blackBoard .boardToolBox .sizebox.off ,
.blackBoard .boardToolBox .color.off { opacity: 0.4; pointer-events: none;}
.blackBoard .boardToolBox .sizebox li.width_picker span { width:4px; height:4px; border-radius:100%; background: #fff;}
.blackBoard .boardToolBox .sizebox li.width_num span { width:auto; height:auto; font-size:14px; color: #fff; line-height:100%; letter-spacing: -0.025em; font-family: 'PretendardEB';}
.blackBoard .boardToolBox .sizebox li.pen_size { width:140px; }
.blackBoard .boardToolBox .sizebox li.pen_size .barbox { width: 112px; height:15px; position:Relative;}
.blackBoard .boardToolBox .sizebox li.pen_size .barbox .cursor { width:15px; height:15px; border: 3px solid #fff; background: #6f47cc; position:absolute; top:0; left:10%; transform: translateX(-50%); border-radius:100%; cursor: pointer; z-index: 1;}
.blackBoard .boardToolBox .sizebox li.pen_size .barbox .bar { margin-top:7px; width:10%; height:1px; background: rgba(255,255,255,1); position:relative;}
.blackBoard .boardToolBox .sizebox li.pen_size .barbox:after { content:''; display:inline-block; width:100%; height:1px; position:Absolute; top:50%; transform: translateY(-50%); left:0; background: rgba(255,255,255,0.3)}
.blackBoard .boardToolBox .color li { opacity:1;}
.blackBoard .boardToolBox .color li span { width:22px; height:22px; border-radius: 100%; position:relative; }
.blackBoard .boardToolBox .color li span:after { content:''; display:none; width:16px; height:16px; border: 2px solid #7650cd; border-radius:100%; position:Absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.blackBoard .boardToolBox .color li.on span:after { display:inline-block;}
.blackBoard .boardToolBox .color li:nth-child(1) span { background-color: #000;}
.blackBoard .boardToolBox .color li:nth-child(2) span { background-color: #fff;}
.blackBoard .boardToolBox .color li:nth-child(3) span { background-color: #de0000;}
.blackBoard .boardToolBox .color li:nth-child(4) span { background-color: #fdb300;}
.blackBoard .boardToolBox .color li:nth-child(5) span { background-color: #1684f5;}
.blackBoard .boardToolBox .color li:nth-child(6) span { background-color: #24c0e0;}
.blackBoard .boardToolBox .color li:nth-child(7) span { background-color: #6000ca;}
.blackBoard .boardToolBox .color li:nth-child(8) span { background-color: #91cf36;}
.blackBoard .boardToolBox .figure li:nth-child(1) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn1.png');}
.blackBoard .boardToolBox .figure li:nth-child(2) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn2.png');}
.blackBoard .boardToolBox .figure li:nth-child(3) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn3.png');}
.blackBoard .boardToolBox .figure li:nth-child(4) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn4.png');}
.blackBoard .boardToolBox .figure li:nth-child(5) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn5.png');}
.blackBoard .boardToolBox .figure li:nth-child(6) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn6.png');}
.blackBoard .boardToolBox .figure li:nth-child(7) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn7.png');}
.blackBoard .boardToolBox .figure li:nth-child(8) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn8.png');}
.blackBoard .boardToolBox .figure li:nth-child(9) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn9.png');}
.blackBoard .boardToolBox .figure li:nth-child(10) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn10.png');}
.blackBoard .boardToolBox .figure li:nth-child(11) span { background-image: url('../images/board/blackboard_boardtoolbox_fgbtn11.png');}
.blackBoard .boardToolBox .measure li:nth-child(1) span { background-image: url('../images/board/blackboard_boardtoolbox_msbtn1.png');}
.blackBoard .boardToolBox .measure li:nth-child(2) span { background-image: url('../images/board/blackboard_boardtoolbox_msbtn2.png');}
.blackBoard .boardToolBox .measure li:nth-child(3) span { background-image: url('../images/board/blackboard_boardtoolbox_msbtn3.png');}
.blackBoard .boardToolBox .measure li:nth-child(4) span { background-image: url('../images/board/blackboard_boardtoolbox_msbtn4.png');}
.blackBoard .boardToolBox .measure li:nth-child(5) span { background-image: url('../images/board/blackboard_boardtoolbox_msbtn5.png');}
.blackBoard .boardToolBox .measure li:nth-child(6) span { background-image: url('../images/board/blackboard_boardtoolbox_msbtn6.png');}
.blackBoard .boardToolBox .measure li:nth-child(7) span { background-image: url('../images/board/blackboard_boardtoolbox_msbtn7.png');}
.blackBoard .boardToolBox .slidebox { position:relative; height:376px; }
.blackBoard .boardToolBox .slidebox .slide { opacity:0; z-index:-1; width:100%; position:absolute; top:0; left:0;}
.blackBoard .boardToolBox .slidebox .slide.on {opacity:1; z-index:1;}
.blackBoard .boardToolBox .slidebox .slidenav { width:100%; height:25px; font-size:0; text-align:center; position:Absolute; bottom:10px; left:0; z-index:1;}
.blackBoard .boardToolBox .slidebox .slidenav strong,
.blackBoard .boardToolBox .slidebox .slidenav span { display:inline-block; opacity:0.3; vertical-align:middle; border-radius:100%; cursor: pointer; }
.blackBoard .boardToolBox .slidebox .slidenav span { margin: 0 3px; width:5px; height:5px; background: #fff;} 
.blackBoard .boardToolBox .slidebox .slidenav span:hover,
.blackBoard .boardToolBox .slidebox .slidenav span.on { opacity:1;}
.blackBoard .boardToolBox .slidebox .slidenav strong { margin: 0 7px; width:25px; height:25px; border: 1px solid #fff; position:relative; transition: transform .3s;}
.blackBoard .boardToolBox .slidebox .slidenav strong.off { opacity:0; pointer-events:none; }
.blackBoard .boardToolBox .slidebox .slidenav strong:before,
.blackBoard .boardToolBox .slidebox .slidenav strong:after { content:''; display:inline-block; margin-left: -3px; width:6px; height:1px; background: #fff; border-radius:2px; position:absolute; left:50%;}
.blackBoard .boardToolBox .slidebox .slidenav strong:before { bottom:50%; margin-bottom:2px;}
.blackBoard .boardToolBox .slidebox .slidenav strong:after { top:50%; margin-top:1px;}
.blackBoard .boardToolBox .slidebox .slidenav strong.prev:before { margin-left: -4px; transform: rotate(-45deg);}
.blackBoard .boardToolBox .slidebox .slidenav strong.prev:after { margin-left: -4px; transform: rotate(45deg);}
.blackBoard .boardToolBox .slidebox .slidenav strong.next:before { transform: rotate(45deg);}
.blackBoard .boardToolBox .slidebox .slidenav strong.next:after { transform: rotate(-45deg);}
.blackBoard .boardToolBox .slidebox .slidenav strong:hover { opacity:1;}
.blackBoard .boardToolBox .slidebox .slidenav strong.prev:hover { transform: translateX(-3px);}
.blackBoard .boardToolBox .slidebox .slidenav strong.next:hover {  transform: translateX(3px);}
.blackBoard .boardToolBox .sticker li { opacity:1; margin: 10px; width:92px; height:92px; }
.blackBoard .boardToolBox .sticker li span { width:92px; height:92px; transition: transform .3s;} 
.blackBoard .boardToolBox .sticker li:hover span { transform: scale(1.05);}
.blackBoard .boardToolBox .sd1 .sticker li:nth-child(1) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn1.png');}
.blackBoard .boardToolBox .sd1 .sticker li:nth-child(2) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn2.png');}
.blackBoard .boardToolBox .sd1 .sticker li:nth-child(3) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn3.png');}
.blackBoard .boardToolBox .sd1 .sticker li:nth-child(4) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn4.png');}
.blackBoard .boardToolBox .sd1 .sticker li:nth-child(5) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn5.png');}
.blackBoard .boardToolBox .sd1 .sticker li:nth-child(6) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn6.png');}
.blackBoard .boardToolBox .sd2 .sticker li:nth-child(1) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn7.png');}
.blackBoard .boardToolBox .sd2 .sticker li:nth-child(2) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn8.png');}
.blackBoard .boardToolBox .sd2 .sticker li:nth-child(3) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn9.png');}
.blackBoard .boardToolBox .sd2 .sticker li:nth-child(4) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn10.png');}
.blackBoard .boardToolBox .sd2 .sticker li:nth-child(5) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn11.png');}
.blackBoard .boardToolBox .sd2 .sticker li:nth-child(6) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn12.png');}
.blackBoard .boardToolBox .sd3 .sticker li:nth-child(1) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn13.png');}
.blackBoard .boardToolBox .sd3 .sticker li:nth-child(2) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn14.png');}
.blackBoard .boardToolBox .sd3 .sticker li:nth-child(3) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn15.png');}
.blackBoard .boardToolBox .sd3 .sticker li:nth-child(4) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn16.png');}
.blackBoard .boardToolBox .sd3 .sticker li:nth-child(5) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn17.png');}
.blackBoard .boardToolBox .sd3 .sticker li:nth-child(6) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn18.png');}
.blackBoard .boardToolBox .sd4 .sticker li:nth-child(1) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn19.png');}
.blackBoard .boardToolBox .sd4 .sticker li:nth-child(2) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn20.png');}
.blackBoard .boardToolBox .sd4 .sticker li:nth-child(3) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn21.png');}
.blackBoard .boardToolBox .sd4 .sticker li:nth-child(4) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn22.png');}
.blackBoard .boardToolBox .sd4 .sticker li:nth-child(5) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn23.png');}
.blackBoard .boardToolBox .sd4 .sticker li:nth-child(6) span { background-image: url('../images/board/blackboard_boardtoolbox_stkbtn24.png');}
.blackBoard .boardToolBox .acthelper li:nth-child(1) span { background-image: url('../images/board/blackboard_boardtoolbox_achbtn1.png');}
.blackBoard .boardToolBox .acthelper li:nth-child(2) span { background-image: url('../images/board/blackboard_boardtoolbox_achbtn2.png');}
.blackBoard .boardToolBox .acthelper li:nth-child(3) span { background-image: url('../images/board/blackboard_boardtoolbox_achbtn3.png');}
.blackBoard .boardToolBox .acthelper li:nth-child(4) span { background-image: url('../images/board/blackboard_boardtoolbox_achbtn4.png');}

/* measureArea */
.blackBoard .measureArea{position: absolute; left: 0px; top: 0px; }
.blackBoard .measureArea.open { pointer-events: auto;}
.blackBoard .measureArea.off{display: none;}
.blackBoard .measureArea .Mitem{display: inline-block; position: absolute; left:200px; top: 200px; background-repeat: no-repeat; background-size: contain; background-position: center;}
.measureArea .Mitem.measure1 {width: 644px; height: 72px;}
.measureArea .Mitem.measure2 {width: 442px; height: 442px;}
.measureArea .Mitem.measure3 {width: 390px; height: 632px;}
.measureArea .Mitem.measure4 {width: 513px; height: 279px;}

.blackBoard .measureArea.off ~ #clock{display: none;}
.blackBoard .measureArea.off ~ #analog{display: none;}
.blackBoard .measureArea.off ~ #calWrapper{display: none;}

/* toolbox_도구 선택박스 */
.blackBoard .sjx-wrapper {position: absolute; width: 0; height: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none;}
.blackBoard .sjx-controls { display: inline-block; top: 0; left: 0; z-index: 1; border: 2px solid #6034c7;}
.blackBoard .sjx-hdl { width: 12px; height: 12px; border: 2px solid #6034c7; background-color: #fff;}
.blackBoard .sjx-hdl-t { top: -6px;}
.blackBoard .sjx-hdl-m { top: calc(50% - 6px);}
.blackBoard .sjx-hdl-b { top: calc(100% - 6px);}
.blackBoard .sjx-hdl-l { left: -6px;}
.blackBoard .sjx-hdl-c { left: calc(50% - 6px);}
.blackBoard .sjx-hdl-r { left: calc(100% - 6px);}
.blackBoard .sjx-hdl-mc { background-color: #00a8ff;}
.blackBoard .sjx-rotator { left: calc(100% + 45px); border-radius: 100%; cursor: url("../images/board/sjx_rotate.png") 14 14, auto;}
.blackBoard .sjx-normal { display: inline-block; height: 2px; background-color: #6034c7; left: 100%; width: 50px; top: 50%; transform: translateY(-50%);}
.blackBoard .sjx-controls,.sjx-hdl,.sjx-normal { position: absolute; box-sizing: border-box;}
.blackBoard .sjx-hidden { display: none;}
.blackBoard .sjx-hdl-tl,.sjx-hdl-br,.sjx-svg-hdl-tl,.sjx-svg-hdl-br:hover{cursor: nwse-resize;}
.blackBoard .sjx-hdl-tc,.sjx-hdl-bc,.sjx-svg-hdl-tc,.sjx-svg-hdl-bc:hover{cursor: ns-resize;}
.blackBoard .sjx-hdl-tr,.sjx-hdl-bl,.sjx-svg-hdl-tr,.sjx-svg-hdl-bl:hover{cursor: nesw-resize;}
.blackBoard .sjx-hdl-ml,.sjx-hdl-mr,.sjx-svg-hdl-ml,.sjx-svg-hdl-mr:hover{cursor: ew-resize;}
.sjx-svg-hdl-rotator{cursor: url("../images/board/sjx_rotate.png") 14 14, auto;}

.blackBoard .sjx-svg-wrapper {position: static; width: 0; height: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none;}
.blackBoard .sjx-controls { display: inline-block; top: 0; left: 0; z-index: 1; border: 2px solid #6034c7;}

/* calWrapper */

#calWrapper {opacity: 0; z-index: -1; pointer-events: none; transition: opacity .3s, right .3s; position: absolute; right:-300px; bottom:20px;} 
#calWrapper.active { opacity:1; z-index: 1; pointer-events: auto; right: 20px; user-select: none; }
#calWrapper .closeBtn { display:inline-block; width:26px; height:26px; text-align:center; border-radius:100%; background: #000; position:absolute; top:-36px; right:0px; cursor: pointer; transition: right .5s;}
#calWrapper .closeBtn em { display:inline-block; margin-top:9px; width:8px; height:8px; background: url('../images/board/flatmodel_sup1_close_btn.png') no-repeat center; }
#calWrapper .closeBtn:hover em { transition: transform .3s;}
#calWrapper .closeBtn.rightM { right: -270px;}
#calWrapper .bgwrap .bgadd {width: 265px; height: 405px; position: absolute; top: 4px; left: 2px; box-shadow: 20px 20px 94px rgba(0,0,0,0.1); transition: width .5s;}
#calWrapper .bgwrap .bgadd.wd {width: 535px; height: 405px; top: 4px; transition: height 0s .5s , top 0s .5s , width .5s;}
#calWrapper .left {position: relative; color:#6f47cc; font-size: 24px; width: 270px; height:412px; border: 2px solid #6f47cc; border-radius: 4px; background-color: rgba(254,254,254,0.8) ; backdrop-filter:blur(5px); z-index: 1;}
#calWrapper .left .enter { height: 90px; width:100%; border-bottom:1px solid #ded5f3; padding: 0 13px 0 10px; cursor: pointer;}
#calWrapper .left .enter .rcBtn {background-image: url('../images/tool/calbox/menu_openbtn.png') ; background-position: center; background-repeat: no-repeat; width: 40px; height: 40px; display: inline-block; position: absolute; top:50px; left: 0px; background-size: 11px;}
#calWrapper .left .enter .curNum { font-family: 'PretendardB'; width:100%; text-align: right; font-size: 48px; line-height: 68px; height: 63px; overflow: hidden; color: #6034c7; letter-spacing: -0.01em;}
#calWrapper .left .enter .historyarea {width:227px; height: 27px; overflow: hidden; margin-left: 30px; position: relative; }
#calWrapper .left .enter .historyarea .history {font-family: 'PretendardSB'; color: #6034c7; font-size: 16px; line-height: 16px; text-align: right;  height: 100%;  overflow: auto; white-space: nowrap; padding-right:13px ; }
#calWrapper .left .enter .scbar {position: absolute; bottom: 0px; right: 0; height: 1px; background-color: #6034c7;}
#calWrapper .left .history::-webkit-scrollbar{ width: 100%; height: 10px;}
#calWrapper .left .history::-webkit-scrollbar-thumb {background-color: transparent;}
#calWrapper .left .history::-webkit-scrollbar-track {background-color: transparent;}
#calWrapper .left .innerCont {font-family: 'PretendardB'; width: 100%;}
#calWrapper .left .innerCont span {display: inline-block; width: 25%; height: 64px; cursor: pointer;}
#calWrapper .left .innerCont .nums {line-height: 64px; text-align: center; color: #000; font-size: 24px; }
#calWrapper .left .innerCont .nums.clear {width: 75%; text-align: center; line-height: 64px; color: #6034c7; } 
#calWrapper .left .innerCont .nums.lock {pointer-events: none;}
#calWrapper .left .innerCont .nums.on {color: #fff; background-color:#6034c7;}
#calWrapper .left .innerCont .nums.zero {width: 50%; border-bottom: none; height: 62px;}
#calWrapper .left .innerCont .nums.point { border-bottom: none; height: 62px;}
#calWrapper .left .innerCont .oper {vertical-align: top;}
#calWrapper .left .innerCont .plus {background: url('../images/tool/calbox/plus.png') no-repeat 50% 50%;}
#calWrapper .left .innerCont .mius {background: url('../images/tool/calbox/mius.png') no-repeat 50% 50%; }
#calWrapper .left .innerCont .mul {background: url('../images/tool/calbox/mul.png') no-repeat 50% 50%; }
#calWrapper .left .innerCont .divide {background: url('../images/tool/calbox/divide.png') no-repeat 50% 50%; }
#calWrapper .left .innerCont .equal {background: url('../images/tool/calbox/equal.png') no-repeat 50% 50%; vertical-align: top; height: 62px;}
#calWrapper .left .innerCont .plus.on {background: url('../images/tool/calbox/plus_on.png') no-repeat 50% 50%; }
#calWrapper .left .innerCont .mius.on {background: url('../images/tool/calbox/mius_on.png') no-repeat 50% 50%; }
#calWrapper .left .innerCont .mul.on {background: url('../images/tool/calbox/mul_on.png') no-repeat 50% 50%; }
#calWrapper .left .innerCont .divide.on {background: url('../images/tool/calbox/divide_on.png') no-repeat 50% 50%; }
#calWrapper .left .innerCont .equal.on {background: url('../images/tool/calbox/equal_on.png') no-repeat 50% 50%; color: #fff; background-color:#6034c7;}
#calWrapper .left .innerCont .oper.lock ,#calWrapper .left .innerCont .equal.lock {pointer-events: none;}
#calWrapper .left .innerCont .oper.on {color: #fff; background-color:#6034c7;}
#calWrapper .right { position: absolute; top: 0; right: 0; width: 270px; height:412px; border:2px solid #6f47cc; border-left: 1px solid #6f47cc;  border-radius: 4px; z-index: -1; opacity: 0; background-color: rgba(254,254,254,0.8); backdrop-filter:blur(5px); transition: right .5s, opacity .6s;}
#calWrapper .right.on { opacity: 1; z-index: 0; right: -269px; transition: right .5s, opacity .3s .1s;} 
#calWrapper .right .recordarea {position: relative; width: 250px; margin: 0 auto 10px;}
#calWrapper .right .recordbox { width: 100%; height: 340px; padding: 0 10px; overflow: auto;}
#calWrapper .right .rscbar { width: 1px; position: absolute; top: 0px; right: 0px; background-color: #6034c7;}
#calWrapper .right .recordbox::-webkit-scrollbar {width:10px;}
#calWrapper .right .recordbox::-webkit-scrollbar-thumb {background-color:transparent;}
#calWrapper .right .recordbox::-webkit-scrollbar-track {background-color: transparent;}
#calWrapper .right .recordbox .recordItem { width: 100%; color: #000; text-align: right; margin-bottom: 30px; font-size: 0;}
#calWrapper .right .recordbox .recordItem .rque { font-family: 'PretendardR'; font-size: 16px; display: inline-block; line-height: 24px;}
#calWrapper .right .recordbox .recordItem .rque .rqueitem {display: inline-block; margin-left: 4px; letter-spacing: -0.01em;}
#calWrapper .right .recordbox .recordItem .rque .rqueitem.rml { margin-left: 0;}
#calWrapper .right .recordbox .recordItem .rque .equal { margin-left:4px; }
#calWrapper .right .recordbox .recordItem .rans { font-family: 'PretendardB'; font-size: 22px; display: block; letter-spacing: -0.025em; word-break: break-all;}
#calWrapper .right .recordbox .recordItem .rans .ans2 {display: inline-block;}
#calWrapper .right .trash { width:15px; height:17px; margin: 17px 0 24px 20px; background: url('../images/tool/calbox/trash.png') no-repeat; cursor: pointer; }
#calWrapper .left .innerCont .clear.active {color: #fff; background-color:#6034c7;}

/* clock */
#clock { opacity:0;  z-index: 0; pointer-events: none; width: 270px; font-family:'PretendardEB'; position: absolute; right:-300px; bottom: 30px; cursor: pointer;}
#clock.on { opacity:1; z-index: 1; pointer-events: auto; right: 30px; user-select: none; transition: opacity .3s, right .3s;}
#clock .closeBtn { display:inline-block; width:26px; height:26px; text-align:center; border-radius:100%; background: #000; position:absolute; top:-35px; right:0px; cursor: pointer;}
#clock .closeBtn em { display:inline-block; margin-top:9px; width:8px; height:8px; background: url('../images/board/flatmodel_sup1_close_btn.png') no-repeat center; }
#clock .closeBtn:hover em { transition: transform .3s;}
#clock .closeBtn.rightM { right: -270px;}
#clock .Date { font-size: 14px; color: #000; width: 100%; margin-bottom:15px; text-align: right;}
#clock .Date span { margin-left: 3px;}
#clock .Date .AMorPM { position: absolute; top:0; left: 0; font-size: 14px; margin:0;} 
#clock .cloBot { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 54px;}
#clock .cloBot ul {position: relative; width:36px; height: 54px; border-radius: 5px; background-color: #6034c7; font-size:40px; line-height: 55px; font-family:'PretendardB'; box-shadow: 10px 36px 94px rgba(0,0,0,0.16);}
#clock .cloBot ul.mr { margin-right: 6px;}
#clock .cloBot li { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
#clock .cloBot li.before{z-index: 2;}
#clock .cloBot li.active{z-index: 3;}
#clock .cloBot li div {color: #fff;}
#clock .cloBot li > div {width: 100%; height: 50%; position: absolute; left: 0; overflow: hidden; z-index: 1;}
#clock .cloBot li > div.up { top: 0; transform-origin: 50% 100%; border-radius: 5px 5px 0 0;}
#clock .cloBot li > div.down { bottom: 0; transform-origin: 50% 0; border-radius:0 0 5px 5px;}
#clock .cloBot li > div::after { content: ""; position: absolute; width: 100%; height: 100%; z-index: 2; overflow: hidden;}
#clock .cloBot li > div .inn {position: absolute; left: 0; width: 100%; height: 200%; background-color: #6034c7; text-align: center; border-radius: 5px; z-index: 1;}
#clock .cloBot li > div .inn::after {content: ""; position: absolute; left: 0; bottom: 26px; z-index: 1; width: 100%; height: 1px; background-color: rgba(61,38,130,0.4);}
#clock .cloBot li > div.up .inn {top: 0;}
#clock .cloBot li > div.down .inn {bottom: 0;}
#clock .cloBot .dots{ position: relative; width: 6px; height: 100%; margin:0 6px;}
#clock .cloBot .dots span { display: inline-block; width: 6px; height: 6px; background-color:#6034c7; border-radius: 50%; position: absolute;}
#clock .cloBot .dots span.dotT { top: 15px;}
#clock .cloBot .dots span.dotB { top: 33px;}
#clock .cloBot .play li.before { z-index: 3;} 
#clock .cloBot .play li.active {z-index: 5; animation: asd 0.5s 0.5s linear both;}
#clock .cloBot .play li.before > div.up { z-index: 2; animation: turn2 0.5s linear both;}
#clock .cloBot .play li.before > div.up::after { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(83, 50, 173, 0.1)), color-stop(100%, #3f2786)); animation: show 0.5s linear both;}
#clock .cloBot .play li.active > div.up::after {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(83, 50, 173, 0.1)), color-stop(100%, #3f2786));  animation: hide 0.5s linear both;}
#clock .cloBot .play li.active > div.down { z-index: 2; animation: turn 0.5s 0.5s linear both;}
#clock .cloBot .play li.before > div.down::after { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3f2786), color-stop(100%, rgba(83, 50, 173, 0.7)));  animation: show 0.5s linear both;}
#clock .cloBot .play li.active > div.down::after {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3f2786), color-stop(100%, rgba(83, 50, 173, 0.7)));  animation: hide 0.5s linear both;}
@keyframes asd {0% {z-index: 2;}20% {z-index: 4;} 100% {z-index: 4;}}
@keyframes turn {0% {transform: rotateX(90deg);} 100% {transform: rotateX(0deg);}}
@keyframes turn2 {0% {transform: rotateX(0deg);} 100% {transform: rotateX(-90deg);}}
@keyframes show {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes hide {0% {opacity: 1;}100% {opacity: 0;}}


/* 아날로그 */
#analog{z-index: -1; pointer-events: none; position: absolute; right:-300px; bottom: 30px;}
#analog.on{z-index: 1; pointer-events: auto; right: 30px; user-select: none; transition: right .3s;}
#analog .ALclock {border-radius: 50%; border: 2px solid #6f47cc; width: 280px; height: 280px; position: relative; font-family: 'PretendardEB'; font-size: 20px; top: 0px; left: 0px; box-shadow: 12px 4px 27px 8px rgba(0,0,0,0.1); background-color: rgba(254,254,254,0.8) ; backdrop-filter:blur(5px);}
#analog .ALclock.off{display: none;}
#analog .ALclock .closeBtn { display:inline-block; width:26px; height:26px; text-align:center; border-radius:100%; background: #000; position:absolute; top:0px; right:0px; cursor: pointer;}
#analog .ALclock .closeBtn em { display:inline-block; width:8px; height:12px; background: url('../images/board/flatmodel_sup1_close_btn.png') no-repeat center; }
#analog .ALclock .closeBtn:hover em { transition: transform .3s;}
#analog .ALclock .circleCont::before {content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; border-radius: 50%; border: 6px solid #6f47cc; z-index: 2; background-color: #fff;}
#analog .ALclock .circle {position: absolute; top: calc(50% - 30px); display: flex; justify-content: space-between; align-items: center; width: 95%; height: 60px; padding: 0 3px; transform-origin: center 30px; left: 8px;}
#analog .ALclock .circle .line.thick { display: flex; justify-content: center; align-items: center; width: 2px; height: 10px; background-color: #b6a2e5; }
#analog .ALclock .circle .line.thin { display: flex; justify-content: center; align-items: center; width: 1px; height: 6px; background-color: #e6e0f6; }
#analog .ALclock .lineHour { width: 6px; height: 70px; background-color: #6f47cc; position: absolute; top:calc(50% - 70px); left: calc(50% - 3px); transform-origin: bottom;}
#analog .ALclock .lineMin { width: 4px; height: 110px; background-color: #6f47cc; position: absolute; top: calc(50% - 110px); left: calc(50% - 2px); transform-origin: bottom;}
#analog .ALclock .lineSec { width: 2px; height: 132px; background-color: #6f47cc; position: absolute; top:calc(50% - 132px); left: calc(50% - 1px); transform-origin: bottom;}





/*=========================================================================================================
* numModel
=========================================================================================================*/
.numModel.on { background: #f8f8f8;}

.numModel .model_1{background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 1; width: 14px; height: 14px; margin: 1px 2px;}
.numModel .model_10{z-index: 1; width: 90px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 1px 0;}
.numModel .model_100{flex: 0 0 auto; width: 90px; height: 90px; background-repeat: no-repeat; background-position: center; background-size: contain; margin-left: -82px; margin-bottom: calc(8px * var(--idx)); z-index: calc(10 - (1 * var(--idx)));}
.numModel .model_1000 {background-repeat: no-repeat; background-position: center; background-size: contain; width: 140px; height: 140px;}
/* .numModel .model_1.active{background: url("../images/board/block_one_active.png") no-repeat center / contain;}
.numModel .model_10.active{background: url("../images/board/block_ten_active.png") no-repeat center / contain;}
.numModel .model_100.active{background: url("../images/board/block_thousand_active.svg") no-repeat center / contain;}
.numModel .model_1000.active{background: url("../images/board/block_thousand_active.svg") no-repeat center / contain;} */

.numModel .blockArea{display: inline-flex;}
.numModel .blockArea.hundredArea{justify-content: center; align-items: flex-end; width: 100px; min-height: 100px;}
.numModel .blockArea.tenArea{ flex-direction: column-reverse; justify-content: center; align-items: center;}
.numModel .blockArea.oneArea{flex-wrap: wrap-reverse; max-width: 94px; align-content: center; align-items: center; justify-content: flex-start; height: 100%;}

.numModel .blockArea.hundredArea .model_100:nth-of-type(1){--idx: 0; margin-left: 0;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(2){--idx: 1;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(3){--idx: 2;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(4){--idx: 3;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(5){--idx: 4;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(6){--idx: 5;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(7){--idx: 6;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(8){--idx: 7;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(9){--idx: 8;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(10){--idx: 9;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(11){--idx: 0; margin-left: -70px;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(12){--idx: 1;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(13){--idx: 2;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(14){--idx: 3;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(15){--idx: 4;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(16){--idx: 5;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(17){--idx: 6;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(18){--idx: 7;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(19){--idx: 8;}
.numModel .blockArea.hundredArea .model_100:nth-of-type(n+11){z-index: calc(20 - (1 * var(--idx)));}

.numModel .btnArea{position: absolute; left: 50%; transform: translateX(-50%); bottom: -60px; pointer-events: none; z-index: 1; transition: bottom .4s ease-out;}
/* .numModel .btnArea{position: absolute; right: 38px; bottom: 60px; pointer-events: none; z-index: 1;} */
.numModel .btnArea.on{pointer-events: auto; bottom: 60px;}
.numModel .btnArea .btn.start{width: 112px; height: 48px; border-radius: 24px; background-color: #6034c7; font-family: 'PretendardSB'; font-size: 16px; text-align: center; color: #fff; line-height: 48px; cursor: pointer; padding: 0 24px;}
/* .numModel .btnArea .btn.start{width: 48px; height: 48px; border-radius: 24px; background-color: #6034c7; font-family: 'PretendardSB'; font-size: 16px; text-align: center; color: #fff; line-height: 48px; cursor: pointer; opacity: 0; padding: 0 24px;}
.numModel .btnArea.on .btn.start{width: 112px; opacity: 1; transition: width .4s .5s, opacity .4s .3s;}
.numModel .btnArea .btn.start span{display: inline-block; width: 64px; opacity: 0;}
.numModel .btnArea.on .btn.start span{opacity: 1; transition: opacity .2s .5s;} */


.numModel{height: 100%;}
.numModel .stab{position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background-color: #f8f8f8;}
.numModel .stab.on{z-index: 0;}

.numModel .suFigure .step{position: absolute; left: 0; top: calc(100% + 40px); width: 100%; height: 100%; z-index: -1;}
.numModel .suFigure .step.on{z-index: 0; top: 0; transition: .5s; font-size: 0;}
.numModel .suFigure .step0{height: 100%;}
.numModel .suFigure .step0 .setCase{height: 100%; font-size: 0; display: inline-block;}
.numModel .suFigure .step0 .setCase .select{ position: relative; width: 183px; height: 100%; border-right: 1px solid #e5e5e5; overflow: hidden; display: inline-block;}
.numModel .suFigure .step0 .setCase .select.last{width: 182px; border-right: none;}
.numModel .suFigure .step0 .setCase .select .name{ position: absolute; font-family: 'PretendardEB'; font-size: 16px; letter-spacing: -0.025em; opacity: 0.2; color: #000; left: 50%; transform: translateX(-50%); top: 48px;}

.numModel .setCase .select .selectedNum{position: relative; left: 0; top: 0; width: 100%; height: 100%; padding-top: 105px;  color: #000; text-align: center; cursor: pointer; transition: left .4s .3s ease-in-out;}
.numModel .setCase .select.cssNone .selectedNum{transition: none;}
.numModel .setCase .select .selectedNum span{ display: inline-block; font-family: 'PretendardEB'; font-size: 156px; line-height: 148px; letter-spacing: -0.025em; margin-top: 171px; opacity: 0.2; user-select: none; width: 100%;}
.numModel .setCase .select .selectNumList{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-top: 105px; transition: left .4s .2s ease-in-out; z-index: -1;}
.numModel .setCase .select .selectNumList li{font-family: 'PretendardEB'; font-size: 52px; letter-spacing: -0.025em; color: #e8e8e8; text-align: center; cursor: pointer; user-select: none; transition: color .2s; transition-property: color, left; transition-duration: .2s, .4s; line-height: 52px; position: relative; left: 100%;}
.numModel .setCase .select.selecting .selectNumList li{left: 0;}
.numModel .setCase .select .selectNumList li:nth-of-type(1){transition-delay: 0s, 0.1s;}
.numModel .setCase .select .selectNumList li:nth-of-type(2){transition-delay: 0s, 0.14s;}
.numModel .setCase .select .selectNumList li:nth-of-type(3){transition-delay: 0s, 0.18s;}
.numModel .setCase .select .selectNumList li:nth-of-type(4){transition-delay: 0s, 0.22s;}
.numModel .setCase .select .selectNumList li:nth-of-type(5){transition-delay: 0s, 0.26s;}
.numModel .setCase .select .selectNumList li:nth-of-type(6){transition-delay: 0s, 0.3s;}
.numModel .setCase .select .selectNumList li:nth-of-type(7){transition-delay: 0s, 0.34s;}
.numModel .setCase .select .selectNumList li:nth-of-type(8){transition-delay: 0s, 0.38s;}
.numModel .setCase .select .selectNumList li:nth-of-type(9){transition-delay: 0s, 0.42s;}
.numModel .setCase .select .selectNumList li:nth-of-type(10){transition-delay: 0s, 0.46s;}
.numModel .setCase .select.cssNone .selectNumList li{transition: none;}

.numModel .suFigure .step0 .setCase .select .blockCase{margin-top: 224px; width: 100%; height: 146px; display: flex; justify-content: center; align-items: center;}
.numModel .suFigure .step0 .setCase .select .blockArea{display: none;}
.numModel .suFigure .step0 .setCase .select.on .blockArea{display: inline-flex;}

.numModel .suFigure .step0 .setCase .select .selectNumList li.on{color: #000; }
.numModel .suFigure .step0 .setCase .select.selecting .selectedNum{left: -100%; transition: left .4s  ease-in-out;}
.numModel .suFigure .step0 .setCase .select.selecting .selectNumList{z-index: 0;}
.numModel .suFigure .step0 .setCase .select.on .name{opacity: 1; transition: opacity .2s;}
.numModel .suFigure .step0 .setCase .select.on .selectedNum span{opacity: 1; margin-top: 0;}

.numModel .suFigure .step0 .selgiho{ display: inline-block; width: 183px; height: 100%; border-right: 1px solid #e5e5e5; padding-top: 105px; vertical-align: top;}
.numModel .suFigure .step0 .selgiho .gihoarea{ position: relative; height: 575px; overflow: hidden;}
.numModel .suFigure .step0 .selgiho .gihoarea > div{position: absolute; left: 50%; transform: translateX(-50%); cursor: pointer; transition: .7s;}
.numModel .suFigure .step0 .selgiho .gihoarea .plus{top: 190px; width: 50px; height: 50px;}
.numModel .suFigure .step0 .selgiho .gihoarea .minus{top: 266px; width: 50px; height: 50px;}
.numModel .suFigure .selgiho .gihoarea .plus:before{content: ''; width: 50px; height: 12px; background-color: #e5e5e5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .suFigure .selgiho .gihoarea .plus:after{content: ''; width: 12px; height: 50px; background-color: #e5e5e5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .suFigure .selgiho .gihoarea .minus:before{content: ''; width: 50px; height: 12px; background-color: #e5e5e5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .suFigure .step0 .selgiho .gihoarea.select > div{left: 110%; transform: translateX(0); transition: left .7s, opacity .4s, transform .7s; opacity: 0;}
.numModel .suFigure .step0 .selgiho .gihoarea.select > div.on{top: 220px; left: 50%; transform: translateX(-50%); transition: .5s .3s; opacity: 1;}
.numModel .suFigure .step0 .selgiho .gihoarea > div.cssNone{transition: none;}
.numModel .suFigure .step0 .selgiho .gihoarea.select > div.on:after,
.numModel .suFigure .step0 .selgiho .gihoarea.select > div.on:before{background-color: #000; transition: background .3s;}

.numModel .suFigure .step1{background-color: #fff;}
.numModel .suFigure .step1 .calSet{height: 340px; display: flex;}
.numModel .suFigure .step1 .calSet .setCase{display: flex;}
.numModel .suFigure .step1 .calSet .setCase li{width: 183px; border-right: 1px solid #ebebeb; text-align: center;}
.numModel .suFigure .step1 .calSet .setCase .selectedNum > span{ display: inline-block; font-family: 'PretendardEB'; font-size: 60px; letter-spacing: -0.025em; padding-top: 35px; color: #000;}
.numModel .suFigure .step1 .calSet .setCase.left .blockCase.spot{animation: banjjack 1.2s 2;}
.numModel .suFigure .step1 .calSet .setCase.right li:last-child{border-right: none;}
.numModel .suFigure .step1 .calSet .blockCase{margin-top: 44px; width: 100%; height: 146px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.numModel .suFigure .step1 .calSet .blockCase.distance{transition: .6s; opacity: 0;}
.numModel .suFigure .step1 .calSet .blockCase.noNum{pointer-events: none;}
.numModel .suFigure .step1 .calSet .selectedNum.on{opacity: 0.3; pointer-events: none;}

/* .numModel .suFigure .step1 .calSet .selectedNum.on > span{color: #6034c7;}
.numModel .suFigure .step1 .calSet .selectedNum.on .model_1{background: url("../images/board/block_one_active.png") no-repeat center /auto;}
.numModel .suFigure .step1 .calSet .selectedNum.on .model_10{background: url("../images/board/block_ten_active.png") no-repeat center /auto;}
.numModel .suFigure .step1 .calSet .selectedNum.on .model_100{background: url("../images/board/block_hundred_active.png") no-repeat center /auto;} */

.numModel .suFigure .step1 .calSet .selgiho{width: 183px; border-right: 1px solid #ebebeb;}
.numModel .suFigure .step1 .calSet .selgiho .gihoarea{ position: relative; height: 100%; display: flex; justify-content: center; align-items: center;}
.numModel .suFigure .step1 .calSet .selgiho .gihoarea > div{width: 50px; height: 50px; position: relative; display: none; margin-top: 13px;}
.numModel .suFigure .step1 .calSet .selgiho .gihoarea > div.on{display: inline-block;}
.numModel .suFigure .step1 .calSet .selgiho .gihoarea > div.on:after,
.numModel .suFigure .step1 .calSet .selgiho .gihoarea > div.on:before{ background-color: #000;}

.numModel .suFigure .step1 .calArea{height: 340px; background-color: #f8f8f8;}
.numModel .suFigure .step1 .calArea .result{display: flex; height: 100%;}
.numModel .suFigure .step1 .calArea .result li{width: 320px; border-right: 1px solid #ebebeb; height: 100%; transition: background .2s; text-align: center;}
.numModel .suFigure .step1 .calArea .result li:last-child{border-right: none;}
.numModel .suFigure .step1 .calArea .result li.target{background-color: #ece9f7;}
.numModel .suFigure .step1 .calArea .result li > span{ display: inline-block; font-family: 'PretendardEB'; font-size: 60px; letter-spacing: -0.025em; padding-top: 35px; color: #6034c7; opacity: 0;}
.numModel .suFigure .step1 .calArea .result li.on > span{opacity: 1;}

/* .numModel .suFigure .step1 .calArea .result li .blockCase .model_1.active{background: url("../images/board/block_one_active.png") no-repeat center /auto;}
.numModel .suFigure .step1 .calArea .result li .blockCase .model_10.active{background: url("../images/board/block_ten_active.png") no-repeat center /auto;}
.numModel .suFigure .step1 .calArea .result li .blockCase .model_100.active{background: url("../images/board/block_hundred_active.png") no-repeat center /auto;} */

.numModel .suFigure .step1 .calArea .result li .blockCase{margin-top: 44px; width: 100%; height: 146px; display: flex; justify-content: center; align-items: center; position: relative;}

.numModel .suFigure .step1 .dragItem.lock{pointer-events: none;}

.numModel .suFigure .step1 .calArea .result li .tenArea{max-height: 160px; flex-wrap: wrap; width: 100%; align-content: center;}
.numModel .suFigure .step1 .calArea .result li .tenArea > div{margin: 1px 4px;}
.numModel .suFigure .step1 .calArea .result li .bundle{display: flex; flex-wrap: wrap; position: relative;}
.numModel .suFigure .step1 .calArea .result li .bundle > div{transition: opacity .4s;}
.numModel .suFigure .step1 .calArea .result li .bundle .fake{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0;}
.numModel .suFigure .step1 .calArea .result li .bundle .fake.model_100{margin-left: 0;}
.numModel .suFigure .step1 .calArea .result li .hundredArea .bundle{flex-wrap: nowrap; margin-right: 85px; align-items: flex-end;}

.numModel .suFigure .step1 .calArea .result li.hundred .bundle .fake{left: -10px; top: auto; bottom: 6px; transform: translate(0);}
.numModel .suFigure .step1 .calArea .result li.hundred .bundle .fake.on{left: -320%;}
.numModel .suFigure .step1 .calArea .result li .bundle .fake.on{opacity: 1; left: -280%; transition: opacity .4s, left .6s .6s;}
.numModel .suFigure .step1 .calArea .result li .bundle .fake.on.temp{opacity: 0;}


.numModel .suFigure .step1 .calArea .result li.check.one .bundle{margin-top: 10px; transition: margin .2s .2s;}
.numModel .suFigure .step1 .calArea .result li.check.ten .bundle{margin-right: 10px; transition: margin .2s .2s;}
.numModel .suFigure .step1 .calArea .result li.check.hundred .bundle{margin-right: 105px; transition: margin .2s .2s;}

/* 빼기 */
.numModel .suFigure .step1 .calArea .result li.minus .blockArea > div:not(.active){transform: translateY(-90px); opacity: 0; transition: .4s .3s;}
.numModel .suFigure .step1 .calArea .result li .blockArea > div.rental{transform: translateX(300px); opacity: 0; transition: transform .7s .3s, opacity .5s .3s;}

/* button */
.numModel .roundBtnArea{position: absolute; right: 20px; bottom: 50px;}
.numModel .roundBtnArea .btn{ position: relative; width: 48px; height: 48px; border-radius: 48px; cursor: pointer; left: 80px;}
.numModel .roundBtnArea.on .btn.sumo,
.numModel .roundBtnArea.on .btn.back{left: 0px; transition: left .3s;}
.numModel .roundBtnArea.on .btn.reset{left: 0px; transition: left .3s .05s;}
.numModel .roundBtnArea .btn:first-child{margin-bottom: 6px;}
.numModel .roundBtnArea .btn.back{background: #fff url("../images/board/btn_back.png") no-repeat center/ contain;}
.numModel .roundBtnArea .btn.sumo{background: #6034c7 url("../images/board/clkbtn_2.png") no-repeat center/ contain;}
.numModel .roundBtnArea .btn.reset{background: #fff url("../images/board/btn_reset.png") no-repeat center/ contain;}

/* ani */
@keyframes banjjack {0% {opacity:1;}25% {opacity:0;}50% {opacity:1;}75% {opacity:0;}100% {opacity:1;}}


/* 세로셈 */
.numModel .serosem{display: flex;}
.numModel .serosem.on ~ .roundBtnArea .btn.back{display: none;}
.numModel .serosem .setCase{height: 100%; font-size: 0; display: flex; justify-content: flex-start; align-items: flex-start;}
.numModel .serosem .setCase.selected .selectedNum span{pointer-events: none;}
.numModel .serosem .setCase.selected .selectedNum .num:not(.on){opacity: 0;}
.numModel .serosem .setCase .select{ position: relative; width: 183px; height: 100%; border-right: 1px solid #e5e5e5; overflow: hidden;}
.numModel .serosem .setCase .select .name{ position: absolute; font-family: 'PretendardEB'; font-size: 16px; letter-spacing: -0.025em; opacity: 0.2; color: #000; left: 50%; transform: translateX(-50%); top: 48px;}
.numModel .serosem .setCase .select.on .name{opacity: 1; transition: opacity .2s;}
.numModel .serosem .setCase .select .selectedNum{cursor: default;}
.numModel .serosem .setCase .select .selectedNum span{margin-top: 43px; width: 100%; cursor: pointer; position: relative;}
.numModel .serosem .setCase .select .selectedNum span:first-child{margin-top: 0px;}
.numModel .serosem .setCase .select .selectedNum span.on{opacity: 1; transition-delay: .3s;}
.numModel .serosem .setCase .select .selectedNum span.answer{opacity: 0; color: #6034c7; pointer-events: none;}
.numModel .serosem .setCase .select .selectedNum.lock span{pointer-events: none;}
.numModel .serosem .setCase .select .selectNumList li.on{color: #000; }
.numModel .serosem .setCase .select.selecting .selectedNum{left: -100%; transition: left .4s  ease-in-out;}
.numModel .serosem .setCase .select.selecting .selectNumList{z-index: 0;}
.numModel .serosem .setCase .select.ani{overflow: unset;}
/* .numModel .serosem .setCase .select.lock{pointer-events: none;} */
.numModel .serosem .setCase.selected .select .name{font-size: 36px; top: 39px;}
.numModel .serosem .setCase.selected .select .name.clone_num{left: 50%; transform: translateX(-50%);}
/* .numModel .serosem .setCase .select.lock .name:not(.clone_num){opacity: .2;}
.numModel .serosem .setCase .select.lock .name.clone_num{opacity: 1;} */
.numModel .serosem .setCase .select.ani .name{transition: left .6s, top .6s, opacity .3s; opacity: .2;}
.numModel .serosem .setCase .select.ani .clone_num{margin-top: 0; position: absolute; left: 0; opacity: 1; transition: left .6s, top .6s, opacity .3s;}
.numModel .serosem .setCase .select.ani .selectNumList{display: none;} 
.numModel .serosem .setCase .select.end .name{opacity: .2;}
.numModel .serosem .setCase .select.end span.answer{opacity: 1;}
.numModel .serosem .setCase .select.spot{animation: numModel_spot .5s alternate 7 forwards;}
.numModel .serosem .setCase .select.spot .selectedNum{cursor: pointer;}
.numModel .serosem .setCase .select.slash .selectedNum .num:first-child:after{content: ''; width: 6px; height: 170px; background-color: #6034c7; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotateZ(45deg);}

.numModel .serosem .selgiho{position: relative; width: 183px; height: 100%; border-right: 1px solid #e5e5e5; padding-top: 105px; overflow: hidden;}
.numModel .serosem .selgiho.selected{pointer-events: none;}
.numModel .serosem .selgiho .gihoarea{ position: relative; height: 575px; overflow: hidden;}
.numModel .serosem .selgiho .gihoarea > div{position: absolute; left: 50%; transform: translateX(-50%); cursor: pointer; transition: .7s;}
.numModel .serosem .selgiho .gihoarea .plus{top: 180px; width: 50px; height: 50px;}
.numModel .serosem .selgiho .gihoarea .minus{top: 296px; width: 50px; height: 50px;}
.numModel .serosem .selgiho .gihoarea .plus:before{content: ''; width: 50px; height: 12px; background-color: #e5e5e5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .serosem .selgiho .gihoarea .plus:after{content: ''; width: 12px; height: 50px; background-color: #e5e5e5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .serosem .selgiho .gihoarea .minus:before{content: ''; width: 50px; height: 12px; background-color: #e5e5e5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .serosem .selgiho .gihoarea.select > div{left: 110%; transform: translateX(0); transition: left .7s, opacity .4s, transform .7s; opacity: 0;}
.numModel .serosem .selgiho .gihoarea.select > div.on{top: 240px; left: 50%; transform: translateX(-50%); transition: .5s .3s; opacity: 1;}
.numModel .serosem .selgiho .gihoarea > div.cssNone{transition: none;}
.numModel .serosem .selgiho .gihoarea.select > div.on:after,
.numModel .serosem .selgiho .gihoarea.select > div.on:before{background-color: #000; transition: background .3s;}
.numModel .serosem .selgiho .gihoarea.lock{pointer-events: none;}
.numModel .serosem .selgiho .answer{position: absolute; left: 0; bottom: 84px; display: inline-block; font-family: 'PretendardEB'; width: 100%; font-size: 156px; line-height: 148px; letter-spacing: -0.025em; user-select: none; text-align: center; color: #6034c7; opacity: 0;}
.numModel .serosem .selgiho .answer.end{opacity: 1;}

.numModel .serosem .calProcess{ position: relative; display: inline-block; width: 548px;}
.numModel .serosem .calProcess > span{display: inline-block; font-family: 'PretendardEB'; font-size: 16px; letter-spacing: -0.025em; opacity: 0.2; color: #000; user-select: none; position: absolute; top: 49px;}
.numModel .serosem .calProcess .name{ right: 49px;}
.numModel .serosem .calProcess .cur_pro{ left: 49px;}
.numModel .serosem .calProcess .processing{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .serosem .calProcess .processing .calNum{ position: relative; font-family: 'SinbiR'; font-size: 90px; line-height: 88px; letter-spacing: -0.025em; text-align: right; user-select: none;  padding-right: 70px; opacity: 0; color: #000;}
.numModel .serosem .calProcess .processing .calNum .giho{display: inline-block; margin-right: 30px;}
.numModel .serosem .calProcess .processing .calNum:last-child{padding-top: 64px;}
.numModel .serosem .calProcess .processing .calNum:last-child{background: url("../images/board/cal_mit.png") no-repeat center 30px / 100% 10px;}
.numModel .serosem .calProcess .processing .calNum:last-child .spareNum{position: absolute; left: 80px; top: 64px; transition: top .8s, left .8s, opacity .6s;}
.numModel .serosem .calProcess.one .processing .calNum{width: 234px;}
.numModel .serosem .calProcess.ten .processing .calNum{width: 260px;}
.numModel .serosem .calProcess.hundred .processing .calNum{width: 306px;}

.numModel .serosem .calProcess.calcul .name{opacity: 1;}
.numModel .serosem .calProcess.calcul .cur_pro{opacity: 1;}
.numModel .serosem .calProcess.calcul .calNum{opacity: 1; transition-property: opacity; transition-duration: .4s;}
.numModel .serosem .calProcess.calcul .calNum:nth-of-type(1){transition-delay: .4s;}
.numModel .serosem .calProcess.calcul .calNum:nth-of-type(2){transition-delay: .8s;}
.numModel .serosem .calProcess.calcul .calNum:nth-of-type(3){transition-delay: 1.2s;}
.numModel .serosem .calProcess.calcul .calNum:nth-of-type(4){transition-delay: 1.6s;}
.numModel .serosem .calProcess.calcul .calNum:nth-of-type(4) em:not(.spareNum){position: relative; left: 0; top: 0; transition: opacity .6s, left .8s, top .8s;}

.numModel .serosem .roundBtnArea{position: absolute; right: 20px; bottom: 50px;}
.numModel .serosem .roundBtnArea .btn.reset{background: #fff url("../images/board/btn_reset.png") no-repeat center/ contain; position: relative; width: 48px; height: 48px; border-radius: 48px; cursor: pointer; left: 80px;}
.numModel .serosem .roundBtnArea.on .btn.reset{left: 0px; transition: left .3s .05s;}

/* 세로셈과 수 모형 */
.numModel .suNsero{font-size: 0;}
.numModel .suNsero.on ~ .roundBtnArea .btn.back{display: none;}
.numModel .suNsero .leftCase{position: relative; display: inline-block; height: 100%; font-size: 0;}
.numModel .suNsero .setCase{ display: inline-block; height: 100%; font-size: 0;}
.numModel .suNsero .setCase.selected .selectedNum span{pointer-events: none;}
.numModel .suNsero .setCase.selected .selectedNum .num:not(.on){opacity: 0;}
.numModel .suNsero .setCase .select{ position: relative; display: inline-block; width: 160px; height: 100%; border-right: 1px solid #e5e5e5; overflow: hidden;}
.numModel .suNsero .setCase .select .tit > span{display: none;}
.numModel .suNsero .setCase .select .tit > span.on{display: inline-block;}
.numModel .suNsero .setCase .select .tit .name{ position: absolute; font-family: 'PretendardEB'; font-size: 16px; letter-spacing: -0.025em; opacity: 0.2; color: #000; left: 50%; transform: translateX(-50%); top: 48px;}
.numModel .suNsero .setCase .select .tit .spare{position: absolute; font-family: 'PretendardEB'; font-size: 36px; letter-spacing: -0.025em; color: #000; left: 50%; transform: translateX(-50%); top: 35px;}
.numModel .suNsero .setCase .select.on .name{opacity: 1; transition: opacity .2s;}
.numModel .suNsero .setCase .select .selectedNum{cursor: default; padding-top: 89px;}
.numModel .suNsero .setCase .select .selectedNum span{margin-top: 43px; width: 100%; cursor: pointer; position: relative; font-size: 156px;}
.numModel .suNsero .setCase .select .selectedNum span:first-child{margin-top: 0px;}
.numModel .suNsero .setCase .select .selectedNum span.on{opacity: 1; transition-delay: .3s;}

.numModel .suNsero .setCase .select .selectedNum.lock span{pointer-events: none;}
.numModel .suNsero .setCase .select .selectNumList li.on{color: #000; }
.numModel .suNsero .setCase .select.selecting .selectedNum{left: -100%; transition: left .4s  ease-in-out;}
.numModel .suNsero .setCase .select.selecting .selectNumList{z-index: 0;}
.numModel .suNsero .setCase .select.ani{overflow: unset;}
/* .numModel .suNsero .setCase .select.lock{pointer-events: none;} */
.numModel .suNsero .setCase.selected .select .name{font-size: 36px; top: 39px;}
.numModel .suNsero .setCase.selected .select .name.clone_num{left: 50%; transform: translateX(-50%);}
/* .numModel .suNsero .setCase .select.lock .name:not(.clone_num){opacity: .2;}
.numModel .suNsero .setCase .select.lock .name.clone_num{opacity: 1;} */
.numModel .suNsero .setCase .select.ani .name{transition: left .6s, top .6s, opacity .3s; opacity: .2;}
.numModel .suNsero .setCase .select.ani .clone_num{margin-top: 0; position: absolute; left: 0; opacity: 1; transition: left .6s, top .6s, opacity .3s;}
.numModel .suNsero .setCase .select.ani .selectNumList{display: none;} 
.numModel .suNsero .setCase .select.end .name{opacity: .2;}
.numModel .suNsero .setCase .select.end span.answer{opacity: 1;}
.numModel .suNsero .setCase .select.spot{animation: numModel_spot .5s alternate 7 forwards;}
.numModel .suNsero .setCase .select.spot .selectedNum{cursor: pointer;}
.numModel .suNsero .setCase .select.slash .selectedNum .num:first-child:after{content: ''; width: 2px; height: 180px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotateZ(45deg);}

.numModel .suNsero .selgiho{position: relative; display: inline-block; width: 160px; height: 100%; border-right: 1px solid #e5e5e5; padding-top: 105px; overflow: hidden;}
.numModel .suNsero .selgiho.selected{pointer-events: none;}
.numModel .suNsero .gihoarea{ position: relative; height: 575px; overflow: hidden;}
.numModel .suNsero .gihoarea > div{position: absolute; left: 50%; transform: translateX(-50%); cursor: pointer; transition: .7s;}
.numModel .suNsero .gihoarea .plus{top: 180px; width: 50px; height: 50px;}
.numModel .suNsero .gihoarea .minus{top: 277px; width: 50px; height: 50px;}
.numModel .suNsero .gihoarea .plus:before{content: ''; width: 50px; height: 12px; background-color: #e5e5e5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .suNsero .gihoarea .plus:after{content: ''; width: 12px; height: 50px; background-color: #e5e5e5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .suNsero .gihoarea .minus:before{content: ''; width: 50px; height: 12px; background-color: #e5e5e5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.numModel .suNsero .gihoarea.select > div{left: 110%; transform: translateX(0); transition: left .7s, opacity .4s, transform .7s; opacity: 0;}
.numModel .suNsero .gihoarea.select > div.on{top: 240px; left: 50%; transform: translateX(-50%); transition: .5s .3s; opacity: 1;}
.numModel .suNsero .gihoarea > div.cssNone{transition: none;}
.numModel .suNsero .gihoarea.select > div.on:after,
.numModel .suNsero .gihoarea.select > div.on:before{background-color: #000; transition: background .3s;}
.numModel .suNsero .selgiho .gihoarea.lock{pointer-events: none;}

.numModel .suNsero .answerCase{position: absolute; left: 0; bottom: 63px; width: 100%; pointer-events: none;}
.numModel .suNsero .answerCase .answer{display: inline-block; width: 160px; text-align: center; font-family: 'PretendardEB'; font-size: 156px; line-height: 148px; letter-spacing: -0.025em; user-select: none; color: #6034c7; opacity: 0;}
.numModel .suNsero .answerCase .answer.on{opacity: 1;}

.numModel .suNsero .rightCase{ position: relative; display: inline-block; vertical-align: top; font-size: 0; height: 100%; background-color: #fbfbfb;}
.numModel .suNsero .danwi{display: inline-block; width: 160px; height: 100%; vertical-align: top; border-right: 1px solid #e7e7e7;}

.numModel .suNsero .danwi .blockArea > div{position: relative; top: 0; left: 0;}
.numModel .suNsero .danwi .blockArea > div.rental{left: 160px; top: -100px; opacity: 0; transition: top .6s .5s,left .6s .5s, opacity .4s .5s;}

/* .numModel .suNsero .danwi.end .answerNum .blockArea > div:not(.active){transform: translateY(-200px); opacity: 0; transition: transform .8s .3s, opacity .4s .3s;} */

.numModel .suNsero .danwi .blockCase{text-align: center;}
.numModel .suNsero .danwi:last-child{border-right: 0;}
.numModel .suNsero .danwi .blockBox{ position: relative; height: 160px; display: flex; justify-content: center; align-items: center; top: 0; opacity: 1;}
.numModel .suNsero .danwi.hundred .blockBox{justify-content: center;}
.numModel .suNsero .danwi.one .blockBox .blockCase{width: 76px;}
.numModel .suNsero .danwi.ten .blockBox .blockCase{width: 100%;}
.numModel .suNsero .danwi.ten .answerNum.blockBox .blockArea{height: 130px; flex-wrap: wrap; width: 100%;}
.numModel .suNsero .danwi .targetNum{margin-top: 20px;}
.numModel .suNsero .danwi .answerNum{margin-top: 30px;}
.numModel .suNsero .danwi .spareNum{height: 86px; margin-bottom: 20px; position: relative;}
.numModel .suNsero .danwi.end .spareNum{opacity: .2;}
.numModel .suNsero .danwi.end .defaultNum{opacity: .2;}
.numModel .suNsero .danwi.end .targetNum{opacity: .2;}
.numModel .suNsero .danwi .defaultNum.on{top: 370px; opacity: 0; transition: top .7s, opacity .5s;}
.numModel .suNsero .danwi .targetNum.on{top: 190px; opacity: 0; transition: top .7s, opacity .5s;}
.numModel .suNsero .danwi .spareNum.on{top: 475px; opacity: 0; transition: top .7s, opacity .5s;}

.numModel .suNsero .danwi .model_1{width: 11px; height: 11px;}
.numModel .suNsero .danwi .model_10{width: 69px; height: 11px;}
.numModel .suNsero .danwi .model_100{width: 69px; height: 69px; margin-left: -64px; margin-bottom: calc(5px * var(--idx));}
.numModel .suNsero .danwi .model_1000{width: 110px; height: 110px;}

.numModel .suNsero .danwi .spareNum .model_1{width: 6px; height: 6px; margin: 1px;}
.numModel .suNsero .danwi .spareNum .model_10{width: 38px; height: 6px;}
.numModel .suNsero .danwi .spareNum .model_100{width: 58px; height: 58px; margin-left: -54px; margin-bottom: calc(4px * var(--idx));}
.numModel .suNsero .danwi .spareNum .model_100:first-child{margin-left: 0;}

.numModel .suNsero .danwi.one .spareNum .blockCase{width: 40px;}
.numModel .suNsero .danwi.one .spareNum .blockArea{align-content: flex-start;}
.numModel .suNsero .danwi.ten .spareNum{align-items: flex-end; position: relative;}
.numModel .suNsero .danwi.hundred .model_100:nth-of-type(11){margin-left: -42px;}
.numModel .suNsero .danwi.thousund .answerNum{margin-top: 481px;}

.numModel .suNsero .danwi .bundle{display: flex; flex-wrap: wrap; position: relative; margin-top: 0;}
.numModel .suNsero .danwi.ten .bundle{display: block;}
.numModel .suNsero .danwi.ten .bundle .model_10{margin-top: 2px;}
.numModel .suNsero .danwi.ten .bundle .model_10:first-child{margin-top: 0;}
.numModel .suNsero .danwi.hundred .bundle{min-height: 100px; align-items: flex-end; margin-right: -42px; flex-wrap: nowrap;}
.numModel .suNsero .danwi .bundle .nextBlock{position: absolute; display:inline-block; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; margin-left: 0;}
.numModel .suNsero .danwi .bundle.on{opacity: 0; transition: margin .2s, opacity .6s 1.5s;}
.numModel .suNsero .danwi.one .bundle.on{margin-top: 10px;}
.numModel .suNsero .danwi.ten .bundle.on{margin-right: 10px;}
.numModel .suNsero .danwi.hundred .bundle.on{margin-right: -32px;}

.numModel .suNsero .danwi .bundle.on > div{opacity: 0; transition: opacity .4s .6s;}
.numModel .suNsero .danwi .bundle.on .nextBlock{opacity: 1; top: -520px; left: -120px; transition: opacity .3s .9s, top .6s 1.5s, left .6s 1.5s;}
.numModel .suNsero .danwi .bundle.on .nextBlock.left{opacity: 1; top: 50%; left: -120px; transition: opacity .3s .9s, top .6s 1.5s, left .6s 1.5s;}

.numModel .suNsero .rightCase .gihoarea{position: absolute; left: 0; bottom: 40px; width: 160px; pointer-events: none;}
.numModel .suNsero .rightCase .gihoarea.select div{transition: none;}

/* guide_hand */
.numModel .guideHand {position: absolute; left: 440px; top: 230px; text-align: center; z-index: -4; opacity: 0; pointer-events: none; }
.numModel .guideHand.on {z-index: 0; opacity: 1; transition: z-index 0s, xopacity .2s , top 1s , left 1s; animation: handMove 12.8s; animation-delay: 2.5s;} 
.numModel .guideHand .ghand {display: inline-block; vertical-align: middle;}
.numModel .guideHand .malbox{position:absolute; bottom:36px; left: 30px; width: 340px; padding: 16px 22px; display: inline-block; background-color: rgba(0, 0, 0, 0.8);  border-radius: 30px 30px 30px 0; opacity: 0; transition: .2s; }
.numModel .guideHand .malbox.on { opacity: 1;}
.numModel .guideHand .malbox .popText{color: #fff; font-family: 'PretendardSB'; font-size: 16px;}

@keyframes handMove{
    0%{top:230px; left:438px;} 9%{top:507px; left:1098px; opacity: 1;} 10%{ top:507px; left:1098px; opacity: 0;} 11%{top:230px; left:1168px; opacity: 0;}
    18%{top:230px; left:1168px; opacity: 1;} 27%{top:507px; left:1098px; opacity: 1;} 28%{top:507px; left:1098px; opacity: 0;} 29%{top:230px; left:256px; opacity: 0;} 
    36%{top:230px; left:256px; opacity: 1;} 45%{top:507px; left:778px; opacity: 1;} 46%{top:507px; left:778px; opacity:0;}  47%{top:230px; left:986px; opacity: 0;}
    54%{top:230px; left:986px; opacity: 1;} 63%{top:507px; left:778px; opacity: 1;} 64%{top:507px; left:778px; opacity: 0;} 65%{top:230px; left:73px; opacity: 0;} 
    72%{top:230px; left:73px; opacity: 1;} 81%{top:507px; left:458px; opacity: 1;} 82%{top:507px; left:458px; opacity: 0;} 83%{top:230px; left:803px; opacity: 0;} 
    90%{top:230px; left:803px; opacity: 1;} 99%{top:507px; left:458px; opacity: 1;} 100%{top:507px; left:458px; opacity: 0;} 
}
/* popup */
.numModel .popup{position: absolute; left: 411px; top: 288px; text-align: center; z-index: -4; opacity: 0; transition: z-index 0s .2s, opacity .2s;}
.numModel .popup .numModel_chabox{display: inline-block; vertical-align: middle;}
.numModel .popup .malbox{display: inline-block; background-color: rgba(0, 0, 0, 0.8); padding: 16px 22px; border-radius: 30px 30px 30px 0; margin-left: -54px;}
.numModel .popup .popText{color: #fff; font-family: 'PretendardSB'; font-size: 16px; display: none;}
.numModel .popup .popText.on{display: inline-block;}
.numModel .popup.on{z-index: 0; opacity: 1; transition: z-index 0s, opacity .2s;}

.numModel .reSultPop{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); text-align: center; z-index: -4; opacity: 0;  transition: z-index 0s .2s, opacity .2s;}
.numModel .reSultPop.on{z-index: 0; opacity: 1; transition: z-index 0s, opacity .2s;}
.numModel .reSultPop .resultBalloon{display: inline-block; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); top: 381px;}
.numModel .reSultPop .resultNum{position: absolute; font-family: 'PretendardB'; font-size: 60px; background-color: rgba(96, 52, 199, 0.9); padding: 28px 57px; border-radius: 65px; left: 50%; transform: translateX(-50%); top: -150px;}
.numModel .reSultPop .resultNum span{white-space: nowrap;}
.numModel .reSultPop .resultNum:after{content: ''; border-top: 17px solid rgba(96, 52, 199, 0.9); border-right: 17px solid transparent; border-left: 17px solid transparent; border-bottom: 17px solid transparent; position: absolute; left: 50%; transform: translateX(-50%); bottom: -33px;}
.numModel .reSultPop .resultNum span{display: inline-block;}


@keyframes numModel_spot{0%{background-color: transparent;}100%{background-color: #ece9f7;}}









/*=========================================================================================================
* flatModel
=========================================================================================================*/
.flatModel { padding-bottom: 40px; }
.flatModel.on { background: #f8f8f8;}
.flatModel .in { position:relative; height:100%; overflow:hidden;}
.flatModel .in > div { opacity:0; z-index:-1; pointer-events:none; transition: opacity .3s, transform .3s, z-index 0s .5s; }
.flatModel .in > div.on {opacity:1; z-index:1; pointer-events:auto; transition: opacity .3s, transform .3s, z-index 0s;}
.flatModel .sup_1 { margin: -310px 0 0 -617px; padding: 0 28px; width:1234px; height:620px; background: #fff; border:2px solid #000; border-radius:6px; box-shadow: 72px 72px 60px rgba(0,0,0,0.08); position:absolute; top:50%; left:50%; transform: translateY(500px);}
.flatModel .sup_1.on {transform: translateY(0); }
.flatModel .sup_1 .close { display:inline-block; width:26px; height:26px; text-align:center; border-radius:100%; background: #000; position:absolute; top:16px; right:20px; cursor: pointer; opacity:0; z-index:-1; pointer-events:none; }
.flatModel.on .sup_1 .close { opacity:1; z-index:1; pointer-events:auto; transition: .3s .8s;}
.flatModel .sup_1 .close em { display:inline-block; margin-top:9px; width:8px; height:8px; background: url('../images/board/flatmodel_sup1_close_btn.png') no-repeat center; }
.flatModel .sup_1 .tbbtn { position:absolute; top:20px; left:20px; z-index:1; }
.flatModel .sup_1 .tbbtn span { opacity: 0.3; display:inline-block; padding: 0 8px; font-size:16px; color: #000; letter-spacing:-0.025em; font-family: 'PretendardEB'; cursor: pointer;} 
.flatModel .sup_1 .tbbtn span.on { opacity:1; }
.flatModel .sup_1 .tbnav { width:100%; font-size:0; text-align:center; position:absolute; top:492px; left:0; z-index:1;}
.flatModel .sup_1 .tbnav em { opacity: 0.3; display:inline-block; margin: 0 7px; width:6px; height:6px; border-radius:100%; background: #000; vertical-align:top; cursor: pointer;}
.flatModel .sup_1 .tbnav em.on { opacity:1; }
.flatModel .sup_1 .tabcon { height:100%;position:relative; } 
.flatModel .sup_1 .tabcon > div { width:100%; height:100%; position: absolute; top:0; left:0; opacity:0; z-index:-1; pointer-events:none; }
.flatModel .sup_1 .tabcon > div.on {opacity:1; z-index:0; pointer-events:auto;}
.flatModel .sup_1 .tabcon > div > ul { padding-top: 65px; display:flex;flex-wrap: wrap;}
.flatModel .sup_1 .tabcon > div > ul > li { display:flex; justify-content: center; align-items: center;margin: 8px 0 8px 16.4px; width:182px; height: 182px; position:Relative; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='ctn_bg' viewBox='0 0 182 182'%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%236034c7;stroke-dasharray:0 0 4 2;stroke-miterlimit:10;stroke-width:2px%7D%3C/style%3E%3Cg id='dot_line' data-name='dot line' style='opacity:.5'%3E%3Cpath d='M0 37h182M0 1h182M0 73h182M0 109h182M0 145h182M0 181h182M145 0v182M181 0v182M109 0v182M73 0v182M37 0v182M1 0v182' class='cls-1'/%3E%3C/g%3E%3C/svg%3E"); }
.flatModel .sup_1 .tabcon > div > ul > li:nth-child(1),
.flatModel .sup_1 .tabcon > div > ul > li:nth-child(7) { margin-left:0;}
.flatModel .sup_1 .tabcon > div > ul > li:before { display:none; content:''; width:100%; height:182px; border: 4px solid #6034c7; position:absolute; top:0; left:0;}
.flatModel .sup_1 .tabcon > div > ul > li.on:before { display:block; }
.flatModel .sup_1 .tabcon > div > ul > li span { display:inline-block; width:182px; height:182px;}
.flatModel .sup_1 .tabcon > .tc_0 > ul > li span { width:110px; height:110px;}
.flatModel .sup_1 .tabcon .confirm { display:inline-block; width:92px; height:48px; font-size:16px; color: #6034c7; line-height:48px; letter-spacing:-0.025em; font-family: 'PretendardSB'; text-align:center; border: 1px solid #6034c7; border-radius:48px; position:absolute; bottom:30px; right:0; cursor: pointer; transition: all .3s;}
.flatModel .sup_1 .tabcon .confirm:hover { color: #fff; background: #6034c7;}
.flatModel .sup_1 .tabcon .confirm.no { pointer-events:none; border: 1px solid rgba(96,52,199,.3); color:rgba(96,52,199,.3);}
.flatModel .sup_1 .tabcon .confirm.no:hover { color: #fff; }

.flatModel .sup_1 .tc_3 .lineArea { height:100%; display: flex; justify-content: center; align-items: center;}
.flatModel .sup_1 .tc_3 .lineArea .lineDrawArea {width: 325px;height: 325px; position: relative; background-image: url("data:image/svg+xml;charset=utf8,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 325 325'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-dasharray:0 0 4.0125 2.0062%7D.cls-1,.cls-2%7Bfill:none;stroke:%236034c7;stroke-miterlimit:10;stroke-width:2px%7D%3C/style%3E%3C/defs%3E%3Cg id='dot_line_grid' data-name='dot line_grid' style='opacity:.5'%3E%3Cpath d='M0 1h2' class='cls-2'/%3E%3Cpath d='M4.006 1h317.991' class='cls-1'/%3E%3Cpath d='M323 1h2M0 65.6h2' class='cls-2'/%3E%3Cpath d='M4.006 65.6h317.991' class='cls-1'/%3E%3Cpath d='M323 65.6h2M0 130.2h2' class='cls-2'/%3E%3Cpath d='M4.006 130.2h317.991' class='cls-1'/%3E%3Cpath d='M323 130.2h2M0 194.8h2' class='cls-2'/%3E%3Cpath d='M4.006 194.8h317.991' class='cls-1'/%3E%3Cpath d='M323 194.8h2M0 259.4h2' class='cls-2'/%3E%3Cpath d='M4.006 259.4h317.991' class='cls-1'/%3E%3Cpath d='M323 259.4h2M0 324h2' class='cls-2'/%3E%3Cpath d='M4.006 324h317.991' class='cls-1'/%3E%3Cpath d='M323 324h2M1 325v-2' class='cls-2'/%3E%3Cpath d='M1 320.994V3.003' class='cls-1'/%3E%3Cpath d='M1 2V0M65.6 325v-2' class='cls-2'/%3E%3Cpath d='M65.6 320.994V3.003' class='cls-1'/%3E%3Cpath d='M65.6 2V0M130.2 325v-2' class='cls-2'/%3E%3Cpath d='M130.2 320.994V3.003' class='cls-1'/%3E%3Cpath d='M130.2 2V0M194.8 325v-2' class='cls-2'/%3E%3Cpath d='M194.8 320.994V3.003' class='cls-1'/%3E%3Cpath d='M194.8 2V0M259.4 325v-2' class='cls-2'/%3E%3Cpath d='M259.4 320.994V3.003' class='cls-1'/%3E%3Cpath d='M259.4 2V0M324 325v-2' class='cls-2'/%3E%3Cpath d='M324 320.994V3.003' class='cls-1'/%3E%3Cpath d='M324 2V0' class='cls-2'/%3E%3C/g%3E%3C/svg%3E");}
.flatModel .sup_1 .tc_3 .lineArea .lineDrawArea .gridBox { width:100%; height:100%;}
.flatModel .sup_1 .tc_3 .lineArea .lineDrawArea .gridBox .grid {transform: translate(-50%, -50%);}
.flatModel .sup_1 .tc_3 .lineArea .lineDrawArea .lineSvg {position: absolute;cursor: pointer;}
.flatModel .sup_1 .tc_3 .lineArea .lineDrawArea .dotSvg {position: absolute;left: -25px;top: -25px;width: 680px; height: 680px;}
.flatModel .sup_1 .tc_3 .lineArea .lineSvg line,
.flatModel .sup_1 .tc_3 .lineArea .lineSvg circle {pointer-events: none;}
.flatModel .sup_1 .tc_3 .lineArea.line_off .lineSvg line {pointer-events: none;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea { margin-top:6px; margin-left: 135px; width:302px; font-size:0; --colorOn:#000;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox { display: flex; justify-content: space-between; align-items: center;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span { display:inline-block; width: 50px;height: 50px; text-align:center; border-radius:100%; overflow:hidden; cursor: pointer; position:relative; }
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:before { content:''; display:inline-block; opacity:0; width:100%;height:100%; border: 1px solid #ddd; border-radius:100%; position:Absolute; top:0; left:0;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:hover:before { opacity:1;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span.on:hover:before { opacity:0; }
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:nth-child(1) .st0_0 {opacity:0.7;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:nth-child(1) .st0_1 {fill:none;stroke:#000;stroke-width:2;stroke-miterlimit:10;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:nth-child(1) path {fill:#000;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox:not(.c7) span.on:nth-child(1) .st0_1 {stroke:#fff;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox:not(.c7) span.on:nth-child(1) path {fill:#fff;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:nth-child(2) .st1_0 {fill:none;stroke:#000;stroke-width:2;stroke-miterlimit:10;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:nth-child(2) .st1_1 {fill:none;stroke:#000;stroke-width:2;stroke-linejoin:round;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:nth-child(2) .st1_2 {opacity:0.7;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox:not(.c7) span.on:nth-child(2) .st1_0,
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox:not(.c7) span.on:nth-child(2) .st1_1{stroke:#fff;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox:not(.c7) span.on:nth-child(2) .st1_2{fill:#fff;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:nth-child(3) .st2_0 {opacity:0.7;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox:not(.c7) span.on:nth-child(3) path {fill:#fff;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span:nth-child(4) {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon_04' viewBox='0 0 50 50'%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:2px%7D%3C/style%3E%3Cpath d='M30.86 17.52c.23.18.45.37.67.57a9.463 9.463 0 0 1 2.97 6.9c0 5.25-4.25 9.5-9.5 9.5s-9.5-4.25-9.5-9.5 4.25-9.5 9.5-9.5' class='cls-1'/%3E%3Cpath d='M30 22v-5h5' class='cls-1'/%3E%3C/svg%3E");}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox span.on {background-color:var(--colorOn);}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .toolBox.c7 span.on:before {  opacity:1;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .colorBox { margin-top:42px; font-size:0; text-align:center; }
.flatModel .sup_1 .tc_3 .lineArea .toolArea .colorBox li { display:inline-block; margin: 4px 4px; width:34px; height:34px; border-radius:100%; position: relative; vertical-align:top; cursor: pointer;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .colorBox li:after { content:''; display:none; margin: -10px 0 0 -10px;width:20px; height:20px; border: 2px solid #fff; border-radius:100%; position:absolute; top:50%; left:50%;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .colorBox li:nth-child(8) { border: 2px solid #eaeaea;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .colorBox li:nth-child(8):after { border-color: #000; opacity:0.5;}
.flatModel .sup_1 .tc_3 .lineArea .toolArea .colorBox li.on:after { display:inline-block; }

.flatModel .sup_2 { height:100%; position:relative; }
.flatModel .sup_2 .tabcon { height:100%;position:relative; } 
.flatModel .sup_2 .tabcon > div { width:100%; height:100%; text-align:center; position: absolute; top:0; left:0; opacity:0; z-index:-1; pointer-events:none; transition: opacity .3s, z-index 0s .5s; }
.flatModel .sup_2 .tabcon > div.on {opacity:1; z-index:0; pointer-events:auto; transition: opacity .3s .2s, z-index 0s;}
.flatModel .sup_2 .contBtn { width: 48px; height:48px; border-radius:100%; background: #fff; box-shadow:32px 32px 50px rgba(0,0,0,0.12); position:Absolute; bottom:20px; right:-70px; opacity:0; z-index:-1; pointer-events:none; transition:z-index 0s .5s, opacity .3s, right .3s;}
.flatModel .sup_2 .contBtn { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:2px%7D%3C/style%3E%3Ccircle cx='20' cy='17' r='3' class='cls-1'/%3E%3Cpath d='M23 17h11M14 17h3' class='cls-1'/%3E%3Ccircle cx='20' cy='31' r='3' class='cls-1'/%3E%3Cpath d='M23 31h11M14 31h3' class='cls-1'/%3E%3Ccircle cx='28' cy='24' r='3' class='cls-1'/%3E%3Cpath d='M31 24h3M15 24h11' class='cls-1'/%3E%3C/svg%3E");}
.flatModel .sup_2 .contBtn .cls-1 {fill: none; stroke: #000; stroke-miterlimit: 10; stroke-width: 2px;}
.flatModel .sup_2 .contBtn.on {opacity:1; z-index:0; pointer-events:auto; right:20px; transition:z-index 0s, opacity .5s, right .5s; cursor: pointer;}
.flatModel .sup_2 .controllBox { width:250px; height:520px; background: #6034c7; border-radius:5px; box-shadow:72px 72px 60px rgba(0,0,0,0.08); position:Absolute; top:80px; right:-280px; opacity:0; z-index:-1; pointer-events:none; transition:z-index 0s .5s, opacity .3s, right .3s;}
.flatModel .sup_2 .controllBox.on {opacity:1; z-index:0; pointer-events:auto; right:23px; transition:z-index 0s, opacity .8s, right .5s;}
.flatModel .sup_2 .controllBox .close { display:inline-block; width:26px; height:26px; text-align:center; border-radius:100%; background: #000; position:absolute; top:-36px; right:0px; cursor: pointer; }
.flatModel .sup_2 .controllBox .close em { display:inline-block; margin-top:9px; width:8px; height:8px; background: url('../images/board/flatmodel_sup1_close_btn.png') no-repeat center; }
.flatModel .sup_2 .controllBox .close:hover em { transition: transform .3s;}
.flatModel .sup_2 .controllBox .tab { position:relative; border-bottom: 1px solid rgba(202, 202, 202, 0.3);}
.flatModel .sup_2 .controllBox .tab h3 { padding: 0 20px; height:60px; font-size:16px; color: rgba(255,255,255,0.3); line-height:60px; letter-spacing:-0.025em; font-family: 'PretendardEB'; position:relative; cursor: pointer; }
.flatModel .sup_2 .controllBox .tab h3 span { display:inline-block; opacity:0.3; margin-top:-13px; width:26px; height:26px; border: 1px solid #fff; border-radius:100%;position:absolute; top:50%; right:20px; transition: opacity .3s; }
.flatModel .sup_2 .controllBox .tab h3 span em {display:inline-block; width:100%; height:100%; vertical-align:top; background: url('../images/board/flatmodel_sup2_controllbox_tab_h3_ico.png') no-repeat center; transform: rotate(180deg); transition: transform .3s; }
.flatModel .sup_2 .controllBox .tab.tb4 { border-bottom:0;}
.flatModel .sup_2 .controllBox .tab.tb4 h3 { height: 61px;}
.flatModel .sup_2 .controllBox .tab .tabc { height:0; overflow:hidden; position:Relative; transition: height .3s;}
.flatModel .sup_2 .controllBox .tab .btnarea { opacity:0; padding-bottom:0px; width:100%; font-size:0; text-align:center; position:Absolute; bottom:0; left:0;}
.flatModel .sup_2 .controllBox .tab .btnarea span { display:inline-block; margin: 0 3px; height:48px; border: 1px solid #fff; border-radius:48px; vertical-align:top; cursor: pointer; }
.flatModel .sup_2 .controllBox .tab .btnarea span.off { pointer-events:none; opacity:.5;}
.flatModel .sup_2 .controllBox .tab .btnarea span:active { background: #6034c7; color: #fff;}
.flatModel .sup_2 .controllBox .tab .btnarea span:active .cls-1 {stroke:#fff;}
.flatModel .sup_2 .controllBox .tab .btnarea .start { width: 152px; font-size:16px; color: #fff; line-height:48px; letter-spacing:-0.025em; font-family: 'PretendardSB';  }
.flatModel .sup_2 .controllBox .tab .btnarea .reset { width: 48px; }
.flatModel .sup_2 .controllBox .tab .btnarea .reset .cls-1 {fill:none; fill-rule:evenodd; stroke:#fff; stroke-miterlimit:10; stroke-width:2px}
.flatModel .sup_2 .controllBox .tab.on h3 { color: rgba(255,255,255,1); pointer-events: none;}
.flatModel .sup_2 .controllBox .tab.on h3 span { opacity:1;}
.flatModel .sup_2 .controllBox .tab.on h3 span em { transform: rotate(0);}
.flatModel .sup_2 .controllBox .tab.on .tabc { height:272px; }
.flatModel .sup_2 .controllBox .tab.on .tabc.nov { overflow:visible; }
.flatModel .sup_2 .controllBox .tab.on .btnarea { opacity:1; padding-bottom:20px; transition: all .3s .2s;}
.flatModel .sup_2 .controllBox .controller { margin:24px auto 0; width:150px; height:130px; position:relative; }
.flatModel .sup_2 .controllBox .controller.lock{pointer-events: none;}
.flatModel .sup_2 .controllBox .controller span { display:inline-block; width:50px; height:50px; border: 1px solid #fff; border-radius:100%; position:absolute;  cursor: pointer;}
.flatModel .sup_2 .controllBox .controller span path { fill: none; stroke: #fff; stroke-width: 2px;}
.flatModel .sup_2 .controllBox .controller span.on { background: #fff;}
.flatModel .sup_2 .controllBox .controller span.on path { stroke: #6f47cc;}
.flatModel .sup_2 .controllBox .controller .top { margin-left: -25px; top:0; left:50%; }
.flatModel .sup_2 .controllBox .controller .bottom { margin-left: -25px; bottom:0; left:50%; }
.flatModel .sup_2 .controllBox .controller .right { margin-top: -25px; top:50%; right:0; }
.flatModel .sup_2 .controllBox .controller .left { margin-top: -25px; top:50%; left:0; }
.flatModel .sup_2 .controllBox .cmsel { text-align:center; font-size:0; }
.flatModel .sup_2 .controllBox .cmsel.lock{pointer-events: none;}
.flatModel .sup_2 .controllBox .rtsel.lock{pointer-events: none;}
.flatModel .sup_2 .controllBox .cmsel li { display:inline-block; margin: 0 1px; padding: 0 5px; height: 26px; font-size:14px; color: rgba(255,255,255,0.3); line-height:26px; letter-spacing:-0.025em; font-family: 'PretendardSB'; vertical-align:top; border-radius:3px; cursor: pointer;}
.flatModel .sup_2 .controllBox .cmsel li.on { color: #6f47cc; background: #fff;}
.flatModel .sup_2 .controllBox .rtsel { margin-top: 4px; text-align:center; font-size:0; }
.flatModel .sup_2 .controllBox .rtsel li {display:inline-block; margin: 2px; width:50px; height:50px; border-radius: 100%; vertical-align:top; cursor: pointer;}
.flatModel .sup_2 .controllBox .rtsel li span { display:inline-block; width:100%; height:100%; background-color: #6034c7; border-radius: 100%;}
.flatModel .sup_2 .controllBox .rtsel li.on span { background-color: #fff;}

.flatModel .sup_2 .figureMovement_page .figureBox { margin: 69px auto 0; width:686px; height:542px; position:Relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 686 542'%3E%3Cdefs%3E%3Cstyle%3E.cls-2,.cls-3,.cls-4%7Bfill:none%7D.cls-2%7Bstroke-dasharray:0 0 4.0118 2.0059%7D.cls-2,.cls-3,.cls-4%7Bstroke:%236034c7;stroke-miterlimit:10;stroke-width:2px%7D.cls-3%7Bstroke-dasharray:0 0 4 2%7D%3C/style%3E%3C/defs%3E%3Cg id='grid' style='fill:none;opacity:.5'%3E%3Cg id='w_line' data-name='w line'%3E%3Cpath d='M0 1h2' class='cls-4'/%3E%3Cpath d='M4.006 1h678.991' class='cls-2'/%3E%3Cpath d='M684 1h2M0 37h2' class='cls-4'/%3E%3Cpath d='M4.006 37h678.991' class='cls-2'/%3E%3Cpath d='M684 37h2M0 73h2' class='cls-4'/%3E%3Cpath d='M4.006 73h678.991' class='cls-2'/%3E%3Cpath d='M684 73h2M0 109h2' class='cls-4'/%3E%3Cpath d='M4.006 109h678.991' class='cls-2'/%3E%3Cpath d='M684 109h2M0 145h2' class='cls-4'/%3E%3Cpath d='M4.006 145h678.991' class='cls-2'/%3E%3Cpath d='M684 145h2M0 181h2' class='cls-4'/%3E%3Cpath d='M4.006 181h678.991' class='cls-2'/%3E%3Cpath d='M684 181h2M0 217h2' class='cls-4'/%3E%3Cpath d='M4.006 217h678.991' class='cls-2'/%3E%3Cpath d='M684 217h2M0 253h2' class='cls-4'/%3E%3Cpath d='M4.006 253h678.991' class='cls-2'/%3E%3Cpath d='M684 253h2M0 289h2' class='cls-4'/%3E%3Cpath d='M4.006 289h678.991' class='cls-2'/%3E%3Cpath d='M684 289h2M0 325h2' class='cls-4'/%3E%3Cpath d='M4.006 325h678.991' class='cls-2'/%3E%3Cpath d='M684 325h2M0 361h2' class='cls-4'/%3E%3Cpath d='M4.006 361h678.991' class='cls-2'/%3E%3Cpath d='M684 361h2M0 397h2' class='cls-4'/%3E%3Cpath d='M4.006 397h678.991' class='cls-2'/%3E%3Cpath d='M684 397h2M0 433h2' class='cls-4'/%3E%3Cpath d='M4.006 433h678.991' class='cls-2'/%3E%3Cpath d='M684 433h2M0 469h2' class='cls-4'/%3E%3Cpath d='M4.006 469h678.991' class='cls-2'/%3E%3Cpath d='M684 469h2M0 505h2' class='cls-4'/%3E%3Cpath d='M4.006 505h678.991' class='cls-2'/%3E%3Cpath d='M684 505h2M0 541h2' class='cls-4'/%3E%3Cpath d='M4.006 541h678.991' class='cls-2'/%3E%3Cpath d='M684 541h2' class='cls-4'/%3E%3C/g%3E%3Cg id='h_line' data-name='h line'%3E%3Cpath d='M1 542V0M37 542V0M73 542V0M109 542V0M145 542V0M181 542V0M217 542V0M253 542V0M289 542V0M325 542V0M361 542V0M397 542V0M433 542V0M469 542V0M505 542V0M541 542V0M577 542V0M613 542V0M649 542V0M685 542V0' class='cls-3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.flatModel .sup_2 .figureMovement_page .figureBox .figureArea {width: 180px;height: 180px; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center;}
.flatModel .sup_2 .figureMovement_page .chabox { opacity:0; width:260px; height:128px; position:absolute; bottom:20px; left:-282px; transition: opacity .3s, left .3s; }
.flatModel .sup_2 .figureMovement_page .chabox .cha {width:260px; height:128px; background: url('../images/board/flatmodel_sup2_figuremovementpage_cha.png') no-repeat center;}
.flatModel .sup_2 .figureMovement_page .chabox .txtbox { opacity:0; width:216px; height:46px; font-size:16px; line-height:48px; letter-spacing:-0.025em; font-family: 'PretendardSB'; background:#000; border-radius: 46px 46px 46px 0; position:absolute; top:-18px; right:-100px; transition: opacity .2s, right .5s;}
.flatModel .sup_2 .figureMovement_page .chabox .txtbox.on { opacity:1; right:-141px; transition: opacity .5s .2s, right .5s;}
.flatModel .sup_2.on .figureMovement_page.on .chabox { opacity:1; left: 24px; transition: opacity .3s .6s, left .3s .4s;} 
.flatModel .sup_2 .figureMovement_page .clone{opacity: .5; position: absolute; left: 0; top: 0; transition: top .4s ease, left .4s ease;}
.flatModel .sup_2 .figureMovement_page .figureArea span{ position: relative; display: inline-block; width: 182px; height: 182px;}

.flatModel .sup_2 .tabcon > div:not(.figureMovement_page) .figureArea { width:100%; height:100%; position:relative; display: flex; justify-content: center; align-items: center; perspective: 500px;}
.flatModel .sup_2 .tabcon > div:not(.figureMovement_page) .figureArea span{display: inline-block; position: relative; perspective: 500px;}
.flatModel .sup_2 .tabcon > div:not(.figureMovement_page) .figureArea .imgcase.imsi{opacity: .5;}
.flatModel .sup_2 .tabcon > div:not(.figureMovement_page) .figureArea .clone{position: absolute; left: 0; top: 0; transition: transform 1s .3s ease-in-out;}
.flatModel .sup_2 .tabcon > div:not(.figureMovement_page) > div:not(.dropArea) {display:flex; justify-content: space-between; margin: 180px auto 0; width:756px; height:325px; position:Relative; }
.flatModel .sup_2 .tabcon > div:not(.figureMovement_page) > div:not(.dropArea):after { content:''; display:inline-block; margin-left:2px; width:20px; height:30px; background: url('../images/board/flatmodel_sup2_figuremovementpage_arrow.png') no-repeat center; position:Absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.flatModel .sup_2 .tabcon > div:not(.figureMovement_page) > div:not(.dropArea) .box { width:325px; height:325px; position:Relative; background: url('../images/board/flatmodel_sup2_figurereversepage_bg.png') no-repeat center;}
.flatModel .sup_2 .figureReverse_page .clone.top{transform: rotateX(180deg);}
.flatModel .sup_2 .figureReverse_page .clone.bottom{transform: rotateX(-180deg);}
.flatModel .sup_2 .figureReverse_page .clone.left{transform: rotateY(-180deg);}
.flatModel .sup_2 .figureReverse_page .clone.right{transform: rotateY(180deg);}
.flatModel .sup_2 .figureReverse_page .reverseArea{ width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center;}
.flatModel .sup_2 .figureReverse_page .reverseArea span{display: inline-block; position: relative;}
.flatModel .sup_2 .figureRotate_page .clone.turnRight.step0{transform: rotateZ(90deg);}
.flatModel .sup_2 .figureRotate_page .clone.turnRight.step1{transform: rotateZ(180deg);}
.flatModel .sup_2 .figureRotate_page .clone.turnRight.step2{transform: rotateZ(270deg);}
.flatModel .sup_2 .figureRotate_page .clone.turnRight.step3{transform: rotateZ(360deg);}
.flatModel .sup_2 .figureRotate_page .clone.turnLeft.step0{transform: rotateZ(-90deg);}
.flatModel .sup_2 .figureRotate_page .clone.turnLeft.step1{transform: rotateZ(-180deg);}
.flatModel .sup_2 .figureRotate_page .clone.turnLeft.step2{transform: rotateZ(-270deg);}
.flatModel .sup_2 .figureRotate_page .clone.turnLeft.step3{transform: rotateZ(-360deg);}
.flatModel .sup_2 .figureRotate_page .rotateArea{ width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center;}
.flatModel .sup_2 .figureRotate_page .rotateArea span{display: inline-block; position: relative;}
.flatModel .sup_2 .figureReNRo_page .renroArea{ width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center;}
.flatModel .sup_2 .figureReNRo_page .renroArea span{display: inline-block; position: relative;}

.flatModel .sup_2 .figureReNRo_page .dropArea { display:flex; justify-content: center; width:100%; height:60px; position:Absolute; bottom:57px; left:0;}
.flatModel .sup_2 .figureReNRo_page .droplist { display:inline-block; font-size:0; }
.flatModel .sup_2 .figureReNRo_page .droplist li { display:none; margin: 0 12px; width:60px; height:60px; border-radius:100%; border:1px solid rgba(96,52,199,0.3); vertical-align:top; position:relative;}
.flatModel .sup_2 .figureReNRo_page .droplist li:after { content:''; display:inline-block; margin-top:-8px; width:9px; height:14px; background: url('../images/board/flatmodel_sup2_figuremovementpage_arrow2.png') no-repeat center; position:absolute; top:50%; right:-18px;}
.flatModel .sup_2 .figureReNRo_page .droplist li:last-child:after { display:none; }
.flatModel .sup_2 .figureReNRo_page .droplist li.end:after{display: none;}
.flatModel .sup_2 .figureReNRo_page .droplist li .dgitem { width:100%; height:100%;}
.flatModel .sup_2 .figureReNRo_page .droplist li.on { display:inline-block; }
.flatModel .sup_2 .figureReNRo_page .droplist li.full { border: 1px solid transparent; background-color: #6034c7; transition: background .3s;}

.flatModel .sup_2 .guideArea{display: inline-block; opacity: 0; pointer-events: none;}
.flatModel .sup_2 .guideArea .circle{display: inline-block; position: absolute; left: 1017px; top: 321px; width: 68px; height: 68px; opacity: 0; background: url("../images/board/flatmodel_tb4_guidcircle.png") no-repeat center;}
.flatModel .sup_2 .guideArea .hand{ display: inline-block; position: absolute; left: 20px; top: 30px; width: 40px; height: 45px; opacity: 0; background: url("../images/board/guide_hand.png") no-repeat center;}
.flatModel .sup_2 .guideArea.on{opacity: 1;}
.flatModel .sup_2 .guideArea.on .circle{animation: circle_spot .5s alternate 5 forwards;}
/* .flatModel .sup_2 .guideArea.on .hand{opacity: 1; top: 268px; left: -390px; transition: opacity .4s 3s, top .6s 3.5s ease-in-out, left .6s 3.5s ease-in-out;} */
.flatModel .sup_2 .guideArea.on .hand{animation: flat_guideMotion 3s 1.6s 2;}
@keyframes circle_spot{0%{opacity: 0;} 100%{opacity: 1;}}
@keyframes flat_guideMotion{30%{opacity: 0;}52%{opacity: 1;}53%{left: 20px; top: 30px;}75%{left: -390px; top: 268px; opacity: 1;}100%{left: -390px; top: 268px; opacity: 1;}}

/*=========================================================================================================
* circlModel
=========================================================================================================*/
.circlModel { padding-bottom: 40px; }
.circlModel.on { background: #f8f8f8;}
.circlModel .in { position:relative; height:100%; }
.circlModel .reset { width: 48px; height:48px; border-radius:100%; background: #fff; box-shadow:32px 32px 50px rgba(0,0,0,0.12); position:Absolute; bottom:20px; right:-70px; opacity:0; z-index:-1; pointer-events:none; transition:z-index 0s .5s, opacity .3s, right .3s;}
.circlModel .reset .cls-1 {fill:none; fill-rule:evenodd; stroke:#000; stroke-miterlimit:10; stroke-width:2px}
.circlModel .reset.on {opacity:1; z-index:0; pointer-events:auto; right:20px; transition:z-index 0s, opacity .5s, right .5s; cursor: pointer;}
.circlModel .circle_cloneArea { opacity:0; width:780px; height:100%; position:relative; transition: opacity .3s;}
.circlModel .circle_cloneArea.on { opacity:1; }
.circlModel .circle_cloneArea .circle_clone { display:flex; justify-content: center;align-items: center; width:300px; height:300px; border: 2px solid #6034c7; border-radius:100%; background: rgba(96,52,199,0.1); position:Absolute; top:0; right:0; cursor: pointer; }
.circlModel .circle_cloneArea .circle_clone:after { content:''; display:inline-block; margin-left:-1px; margin-top: -1px; width:10px; height:10px; background: #6034c7; border-radius:100%; position:Absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
.circlModel .circle_cloneArea .circle_clone .numtxt { display:inline-block; padding-bottom:4px; width:100%; font-size:36px; color: #6034c7; line-height:100%; letter-spacing:-0.025em; font-family: 'PretendardB'; text-align:center; border-bottom: 2px dashed #6034c7; transform: translateY(-50%); }
.circlModel .circle_cloneArea .circle_clone.radius { justify-content: flex-end;}
.circlModel .circle_cloneArea .circle_clone.radius:after { left: 50%; margin-left:0;}
.circlModel .circle_cloneArea .circle_clone.radius .numtxt { width:50%; }
.circlModel .circle_origin { width:342px; height:100%; position:absolute; top:0; right:0;}
.circlModel .circle_origin .inbox { opacity:0; margin-top:-53px; width:100%; height:228px; text-align:center; position:absolute; top:50%; right:-300px; transition: right .3s, opacity .3s;}
.circlModel .circle_origin .inbox.on { opacity:1; right:0; transition: right .5s, opacity .5s; }
.circlModel .circle_origin .inbox.on .chabox { opacity:1; left: -124px; transition: opacity .3s .5s, left .3s .4s;} 
.circlModel .circle_origin .inbox.on .chabox .txtbox { opacity:1; right:-162px; transition: opacity .5s .7s, right .5s .4s;}
.circlModel .circle_origin .chabox { opacity:0; width:253px; height:125px; position:absolute; bottom:-23px; left:-200px; transition: opacity .3s, left .3s; }
.circlModel .circle_origin .chabox .cha {width:253px; height:125px; background: url('../images/board/flatmodel_sup2_figuremovementpage_cha.png') no-repeat center;}
.circlModel .circle_origin .chabox .txtbox { opacity:0; width:236px; height:46px; font-size:16px; line-height:48px; letter-spacing:-0.025em; font-family: 'PretendardSB'; background:#000; border-radius: 46px 46px 46px 0; position:absolute; top:-21px; right:-100px; transition: opacity .2s, right .5s;}
.circlModel .circle_origin .chabox .txtbox span { color: #906fde;}
.circlModel .circle_origin .btnarea { display: inline-block; margin-bottom:20px; font-size:0; position:Relative; z-index:1;}
.circlModel .circle_origin .btnarea span { display:inline-block; width:60px; height:30px; font-size:16px; color: #000; line-height:30px; letter-spacing:-0.025em; font-family: 'PretendardSB'; border-radius:3px; vertical-align:top; cursor: pointer;}
.circlModel .circle_origin .btnarea span.on { color: #fff; background: #6034c7;}
.circlModel .circle_origin .ruler { width:342px; height:36px; position:relative; background: url('../images/board/circlmodel_circleorigin_ruler.png') no-repeat left top;}
.circlModel .circle_origin .ruler .circle { margin-left:21px; width:30px; height:31px; border: 2px solid #6034c7; background: rgba(96,52,199,0.1); border-radius:100%; position:Absolute; left:0; top:0; transform: translate(0,-50%); cursor: pointer;}
.circlModel .circle_origin .ruler .circle .arrow { display:inline-block; margin-top:-2px; width: 100%; height:4px; position:Absolute; top:50%; right:0px; pointer-events: none;}
.circlModel .circle_origin .ruler .circle .arrow:before {content:''; display:inline-block; width: calc(100% - 6px); height:4px; background: #6034c7; position:Absolute; top:0; right:6px;}
.circlModel .circle_origin .ruler .circle .arrow:after { content:''; display:inline-block; border-left:10px solid #6034c7; border-top:7px solid transparent; border-bottom:7px solid transparent; position:absolute; top:50%; right:-2px; transform: translateY(-50%); }
.circlModel .circle_origin .ruler.radius .circle { width:62px; height:62px; transform: translate(-50%,-50%);}
.circlModel .circle_origin .ruler.radius .circle .arrow { width:50%; }
.circlModel .circle_origin .ruler.radius .circle .arrow:after { right: -1px;}
.circlModel .circle_origin .startBtn { width:100%; height:48px; position:Absolute; bottom:0; left:0; z-index:1;}
.circlModel .circle_origin .startBtn span { display:inline-block; width: 132px; height:48px; font-size:16px; color: #6034c7; line-height:48px; letter-spacing:-0.025em; font-family: 'PretendardSB';border: 1px solid #6034c7; border-radius:48px; vertical-align:top; cursor: pointer;}
.circlModel .circle_origin .startBtn span:hover { background: #6034c7; color: #fff; border-color: #6034c7;}

.circlModel:has(.reset.on)  .circle_cloneArea {
    background-image: url(../images/board/circlarea_bg2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.sub_cir_txt {
    position: absolute;
    right: 527px;
    bottom: 46px;
    opacity: 0;
    width: 57px;
    height: 52px;
    background-image: url(../images/board/sub_cir_txt.png);
    background-size: 100% 100%;
}
.circlModel:has(.reset.on) .sub_cir_txt {
    opacity: 1;
}
/*=========================================================================================================
* bunsuModel
=========================================================================================================*/

.bunsuModel .lock{pointer-events: none;}
.bunsuModel .hide{display: none;}
.bunsuModel{display: flex; background-color: #fff;}
.bunsuModel:after{content: ''; width: 1px; height: 100%; background-color: #dfdfdf; position: absolute; right: 50%; top: 0; transform: translateX(-50%);}
.bunsuModel .bunsuArea{position: relative; width: 50%; text-align: center; padding-top: 106px;}
.bunsuModel .bunsu{ display: inline-block; position: relative; width: 205px;  text-align: center; font-size: 0;}
.bunsuModel .bunsu .bunsuStick{display: inline-block; width: 200px; height: 12px; background-color: #000; margin-top: 12px; transition: margin .4s .2s;}
.bunsuModel .bunsu > span:hover{background-color: #f0f0f0;}
.bunsuModel .bunsu > span{display: inline-block; width: 205px; height: 205px; border-radius: 80px; cursor: pointer; font-size: 200px; font-family: 'PretendardEB'; color: #000; line-height: 206px; user-select: none; margin-top: 12px; transition: margin .4s .2s, background .3s ease-out;}
.bunsuModel .bunsu .bunja{color: #6034c7;}
.bunsuModel .bunsu > span.on{background-color: #f0f0f0;}
.bunsuModel .bunsu p{font-family: 'PretendardEB'; font-size: 30px; color: #000; letter-spacing: -0.025em; user-select: none; height: 0; overflow: hidden; margin-top: 43px; transition: height .3s;}
.bunsuModel .bunsu p em{color: #6034c7;}
.bunsuModel .numSelect{position: absolute; width: 94px; height: 100%; right: 0; top: 50%; transform: translateY(-50%); overflow: hidden;}
.bunsuModel .numSelect > ul{position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1;}
.bunsuModel .numSelect > ul.on{z-index: 0;}
.bunsuModel .numSelect > ul li{ position: relative; font-family: 'PretendardEB'; font-size: 52px; line-height: 52px; letter-spacing: -0.025em; color: #e8e8e8; cursor: pointer; right: -100%; transition-property: color, right; transition-duration: .2s, .4s; user-select: none;}
.bunsuModel .numSelect > ul li:hover{color: #000;}
.bunsuModel .numSelect > ul li.on{color: #000;}
.bunsuModel .numSelect > ul.on li{right: 0%;}
.bunsuModel .numSelect > ul li:nth-of-type(1){transition-delay: 0s, 0.1s;}
.bunsuModel .numSelect > ul li:nth-of-type(2){transition-delay: 0s, 0.14s;}
.bunsuModel .numSelect > ul li:nth-of-type(3){transition-delay: 0s, 0.18s;}
.bunsuModel .numSelect > ul li:nth-of-type(4){transition-delay: 0s, 0.22s;}
.bunsuModel .numSelect > ul li:nth-of-type(5){transition-delay: 0s, 0.26s;}
.bunsuModel .numSelect > ul li:nth-of-type(6){transition-delay: 0s, 0.3s;}
.bunsuModel .numSelect > ul li:nth-of-type(7){transition-delay: 0s, 0.34s;}
.bunsuModel .numSelect > ul li:nth-of-type(8){transition-delay: 0s, 0.38s;}
.bunsuModel .numSelect > ul li:nth-of-type(9){transition-delay: 0s, 0.42s;}
.bunsuModel .numSelect > ul li:nth-of-type(10){transition-delay: 0s, 0.46s;}
.bunsuModel .numSelect .bunmoList li:nth-of-type(1){display: none;}

.bunsuModel .bunsuFigure{ position: relative; width: 50%; height: 680px;}

.bunsuModel .bunsuFigure .result_txt{font-family: 'PretendardEB'; font-size: 30px; color: #000; letter-spacing: -0.025em; user-select: none; height: 0; overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%); top: 551px; white-space: nowrap; transition: height .3s;}
.bunsuModel .bunsuFigure .result_txt em{color: #6034c7;}

.bunsuModel .bunsuFigure > ul{position: absolute; right: -10%; top: 50%; transform: translateY(-50%); font-size: 0; transition: right .4s ease-in-out; text-align: center;}
.bunsuModel .bunsuFigure > ul.on{right: 27px;}
.bunsuModel .rightFselect li{background-repeat: no-repeat; background-position: center; background-size: auto; background-image: url("../images/board/bunsumodel_menu_icon.png"); width: 46px; height: 46px; cursor: pointer;}
.bunsuModel .rightFselect li:hover,
.bunsuModel .rightFselect li.on{background-image: url("../images/board/bunsumodel_menu_icon_on.png");}
.bunsuModel .rightFselect li.lock{opacity: .08;}
.bunsuModel .rightFselect li:nth-child(1){background-position: center -92px; margin-top: 0px;}
.bunsuModel .rightFselect li:nth-child(2){background-position: center 0px; margin-top: 23px;}
.bunsuModel .rightFselect li:nth-child(3){background-position: center -46px; margin-top: 22px;}
.bunsuModel .rightFselect li:nth-child(4){background-position: center -138px; margin-top: 25px;}
.bunsuModel .rightFselect li:nth-child(5){background-position: center -184px; margin-top: 28px;}





.bunsuModel .rightFselectSec span{display: none; width: 46px; height: 46px; margin-top: 30px; background-repeat: no-repeat; background-position: center; background-size: cover; cursor: pointer;}
.bunsuModel .rightFselectSec span.on{display: inline-block;}
.bunsuModel .rightFselectSec li{display: none; width: 50px;}
.bunsuModel .rightFselectSec li.on{display: inline-block;}
.bunsuModel .rightFselectSec li span:first-child{margin-top: 0;}

.bunsuModel .bunsu_figureArea{width: 400px; height: 400px; position: absolute; left: 120px; top: 140px; transition: top .4s .2s;}

.bunsuModel .bunsu_char{position: absolute; left: 0; bottom: -50px; opacity: 0; transition: bottom .3s, opacity .2s;}
.bunsuModel .bunsu_char.on{bottom: 19px; opacity: 1; transition: bottom .3s .2s, opacity .2s .2s;}
.bunsuModel .bunsu_char .bunsu_charImg{width: 187px; height: 126px; background: url("../images/board/bunsumodel_char1.png") no-repeat center;}
.bunsuModel .bunsu_char .malBox{ position: absolute; left: 170px; top: -19px; display: inline-block; border-radius: 23px 23px 23px 0px; background-color: #000; padding: 13px 20px; opacity: 0; transition: left .3s .4s, opacity .4s .4s;}
.bunsuModel .bunsu_char.on .malBox{left: 150px; opacity: 1;}
.bunsuModel .bunsu_char .malBox span{display: none; white-space: nowrap; font-family: 'PretendardSB'; font-size: 16px;}
.bunsuModel .bunsu_char .malBox span.on{display: inline-block;}

.bunsuModel .roundBtnArea{position: absolute; right: 20px; bottom: 20px;}
.bunsuModel .roundBtnArea .btn{position: relative; left: 200%; display: inline-block; width: 48px; height: 48px; border-radius: 100%; cursor: pointer; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.12); transition: left .4s ease-in-out;}
.bunsuModel .roundBtnArea .btn.back{background: #fff url("../images/board/btn_back.png") no-repeat center/ contain;}
.bunsuModel .roundBtnArea .btn.on{left: 0;}

.bunsuModel.end .bunsu .bunja{margin-top: -44px; transition: margin .4s, background .3s ease-out;}
.bunsuModel.end .bunsu .bunmo{ pointer-events: none;}
.bunsuModel.end .bunsu p{height: 35px; transition: height .3s .2s;}
.bunsuModel.end .bunsuFigure .result_txt{height: 35px; transition: height .3s .2s;}
.bunsuModel.end .bunsu_figureArea{top: 120px; transition: top .4s;}



.bunsuModel .st0.on{fill: #6034c7;}
.bunsuModel .st0{fill:#F8F8F8; cursor: pointer;}
.bunsuModel .st1{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
.bunsuModel .st1.rd{stroke-linecap: round; stroke-linejoin: round;}

.unit {font-family: 'nanumMyeongjo';}




.question_charBox {position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%);}
.question_charBox .qusetion_char {width: 276px; height: 214px; background-image: url(../images/question_char.png);background-size: 100% 100%;}
.question_charBox span {position: absolute; top: -90px; left: -190px; display: flex; justify-content: center; align-items: center; width: 248px; height: 156px; background-image: url(../images/question_box.png); background-size: 100% 100%; font-size: 26px; }


/* 추가 css */

.multy_22.graphPaperContainer .clickGuide:nth-of-type(1)::after {display: none;}
.multy_22.graphPaperContainer .clickGuide:nth-of-type(1)::before {
    width: 145px;
    height: 165px;
    background-image: url(../images/backimage_1.png);
    background-size: 100% 100%;
    position: absolute;
    top: 7px;
    left: -60px;
    background-color: transparent;
    border-radius: 0;
}
.multy_22.graphPaperContainer .clickGuide:nth-of-type(2)::after {display: none;}
.multy_22.graphPaperContainer .clickGuide:nth-of-type(2)::before {
    width: 145px;
    height: 165px;
    background-image: url(../images/backimage_2.png);
    background-size: 100% 100%;
    position: absolute;
    top: 7px;
    left: 10px;
    background-color: transparent;
    border-radius: 0;
}

.mainPage_hidden {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
}


.mane_hidden {
    
}