@charset "utf-8"; @import url("./svgStyle.css"); @font-face { font-family: 'PretendardBk'; font-weight: 900; font-display: swap; src: local('Pretendard Black'), url('./fonts/Pretendard-Black.woff2') format('woff2'), url('./fonts/Pretendard-Black.woff') format('woff');} @font-face { font-family: 'PretendardEB'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url('./fonts/Pretendard-ExtraBold.woff2') format('woff2'), url('./fonts/Pretendard-ExtraBold.woff') format('woff');} @font-face { font-family: 'PretendardB'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('./fonts/Pretendard-Bold.woff2') format('woff2'), url('./fonts/Pretendard-Bold.woff') format('woff');} @font-face { font-family: 'PretendardSB'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url('./fonts/Pretendard-SemiBold.woff2') format('woff2'), url('./fonts/Pretendard-SemiBold.woff') format('woff');} @font-face { font-family: 'PretendardM'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url('./fonts/Pretendard-Medium.woff2') format('woff2'), url('./fonts/Pretendard-Medium.woff') format('woff');} @font-face { font-family: 'PretendardR'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url('./fonts/Pretendard-Regular.woff2') format('woff2'), url('./fonts/Pretendard-Regular.woff') format('woff');} @font-face { font-family: 'PretendardL'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url('./fonts/Pretendard-Light.woff2') format('woff2'), url('./fonts/Pretendard-Light.woff') format('woff');} @font-face { font-family: 'PretendardEL'; font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'), url('./fonts/Pretendard-ExtraLight.woff2') format('woff2'), url('./fonts/Pretendard-ExtraLight.woff') format('woff');} @font-face { font-family: 'PretendardT'; font-weight: 100; font-display: swap; src: local('Pretendard Thin'), url('./fonts/Pretendard-Thin.woff2') format('woff2'), url('./fonts/Pretendard-Thin.woff') format('woff');} @font-face { font-family: 'PretendardJP'; font-weight: 400; font-display: swap; src: local('Pretendard JP Regular'), url('./fonts/PretendardJP-Regular.woff2') format('woff2'), url('./fonts/PretendardJP-Regular.woff') format('woff');} @font-face { font-family: 'GmarketL'; font-display: swap; src: local('GmarketSansLight'), url('./fonts/GmarketSansLight.woff2') format('woff2'), url('./fonts/GmarketSansLight.woff') format('woff');} @font-face { font-family: 'SinbiR';src: url("./fonts/SSShinb7Regular.woff") format('woff');font-display: swap;} @font-face {font-family: 'BkMyungjoB';src: url("./fonts/BookkMyungjo-Bd.woff2") format('woff2');font-display: swap;} @font-face {font-family: 'NotoSB'; font-weight: 400; font-display: swap; src: local('NotoSerifKR Bold'), url('./fonts/NotoSerifKR-Bold.woff2') format('woff2'), url('./fonts/NotoSerifKR-Bold.woff') format('woff');} @font-face {font-family: 'NotoSBNb'; font-weight: 400; font-display: swap; src: local('NotoSerifKR Bold'), url('./fonts/NotoSerifKR-Bold.woff2') format('woff2'), url('./fonts/NotoSerifKR-Bold.woff') format('woff');unicode-range: U+0030-0039;} @font-face {font-family: 'NotoSSBNb'; font-weight: 400; font-display: swap; src: local('NotoSerifKR SemiBold'), url('./fonts/NotoSerifKR-SemiBold.woff2') format('woff2'), url('./fonts/NotoSerifKR-SemiBold.woff') format('woff');unicode-range: U+0030-0039;} @font-face {font-family: 'BkML';src: url("./fonts/BookkMyungjo-light.woff2") format('woff2');font-display: swap;} @font-face {font-family: 'IMHB';src: url("./fonts/IM_Hyemin-Bold.woff2") format('woff2');font-display: swap;} /*========================================================================================================= * Project : * File Name : board.css * 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; -webkit-tap-highlight-color:transparent;} *:focus { outline: none; } html, body {margin: 0; padding: 0; width: 100%; height: 100%; font-size: 100%; -webkit-text-size-adjust: none;} body { color: #fff; font-family: 'PretendardR',"맑은 고딕", "Malgun Gothic", Arial, sans-serif; font-weight: 100%;} 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; select-dummy: expression(this.hideFocus=true); } 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; select-dummy: expression(this.hideFocus=true); } 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'} .fBM { font-family: 'BkMyungjoB'; display: inline-block; margin-top:-1px; vertical-align:top; } body.dv_mob{overflow: hidden; overscroll-behavior-y: none; touch-action: none; } .wrap { position:relative; overflow:hidden; transition: background .5s; height: 100%;} .wrap:after{width: 0px; height: 0px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: -1; content: url("../images/board/thrFig_extend1.png") url("../images/board/thrFig_extend2.png") url("../images/board/thrFig_extend3.png");} .wrap .container{ width: 1280px; height: 720px; position: relative; overflow:hidden;} .wrap .container.hide { opacity:0;} .wrap .bg { display:inline-block; opacity:0; width:100%; height:100%; background: rgba(0,0,0,0.76); position:absolute; top:0; left:0; transition: all .3s;} .wrap .bg.on { opacity:1;} .wrap.main {background: #ffffff;} /*교구별로 파일 분리하면서 흰색으로 수정*/ .wrap.modo { background: #fff;} /*========================================================================================================= * 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; transform: translate3d(0,0,0);} .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;} .menuList { width:100%; height:100%; text-align:center; background: rgba(0,0,0,0.76); 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: 82px; width:760px; margin: 0 auto; } .menuList li { position:Relative; font-size:50px; line-height:62px; letter-spacing: -0.04em; font-family: 'PretendardBk'; } .menuList li span { display:inline-block; position:relative; cursor: pointer; } .menuList li span:after{content: ''; width: 7px; height: 7px; border-radius: 100%; background: #FFD651; position: absolute; right: -14px; top: -2px; opacity: 0;} .menuList li span em.ct {opacity: 1; -webkit-text-stroke-color: #fff;-webkit-text-stroke-width: 0.006em;-webkit-text-fill-color: transparent;-webkit-background-clip: text;} .menuList li span em.lt{position: absolute; left: 0; top: 0; opacity: 0;} .menuList li.over span .ct{opacity: 0; transition: opacity .3s;} .menuList li.over span .lt{opacity: 1; transition: opacity .3s;} .menuList li.on span:after{opacity: 1; transition: opacity .3s;} .dv_pc .menuList li.over span em { opacity: 1;} .dv_pc .menuList li.on span { pointer-events:none;} .dv_mob .menuList li.on span { pointer-events:none;} .dv_mob .menuList li.on span em { opacity: 1;} .menuList .close { display:inline-block; top: 37px; right: 27px; width:14px; height:14px; background: url('../images/board/menuList_closeBtn.png') no-repeat center / contain; cursor: pointer; position:absolute; opacity:0; pointer-events:none; transition:right .3s, opacity .3s;} .menuList.on { opacity:1; pointer-events:auto; z-index:10; transition:z-index 0s, opacity .3s;} .menuList.on .close { right:32px; opacity:1; pointer-events:auto; transition:left .3s .2s, opacity .3s .2s;} .subPage { 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; color: #000;} .subPage.on { opacity:1; top:0; pointer-events:auto; z-index:10; transition:z-index 0s, opacity .5s, top .5s, background-color .3s .3s;} .subPage header{position: absolute; left: 0; top: 0; width: 100%; z-index: 1;} .subPage header h2{ position: absolute; font-family: 'PretendardEB'; font-size: 16px; letter-spacing: -0.024em; left: 30px; top: 34px; /*cursor: pointer;*/} .subPage header .menu{ position: absolute; font-family: 'PretendardEB'; font-size: 16px; letter-spacing: -0.04em; right: 30px; top: 34px;} .subPage header .menu em{position: relative; display: inline-block; vertical-align: top; margin-top: 4px; width: 17px; height: 10px; background: url("../images/board/subPage_menuBtn.png") no-repeat center / contain; margin-left: 14px; cursor: pointer;} .dv_mob .subPage header .menu em:after{content: ''; width: 300%; height: 400%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .threeIco{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-block; background: rgba(0,0,0,.7); width: 90px; height: 90px; border-radius: 100%; opacity: 0; pointer-events: none; transition: opacity .3s;} .threeIco span{ display: inline-block; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' stroke='%23707070' d='M1190 630h180v180h-180z' data-name='사각형 3433' opacity='.7'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath fill='%23fff' d='M1347 707h-31v-16h23v-17h19v33Zm-82 0h-12v-33h21v17h22v16Z' data-name='합치기 2'/%3E%3C/clipPath%3E%3CclipPath id='c'%3E%3Cpath fill='%23fff' d='M1254 707h-1v-33h26.553v17h5v16Zm80.566-5v-12h-7.635v-16H1358v28Z' data-name='합치기 3'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' data-name='마스크 그룹 12' transform='translate(-1190 -630)'%3E%3Cg data-name='그룹 4182'%3E%3Cg data-name='그룹 4181'%3E%3Cpath fill='%23fff' d='M1261.073 725.31c5.115 0 8.773-2.728 8.742-6.51.031-2.728-1.736-4.65-5.084-5.022v-.186c2.511-.372 4.309-2.108 4.278-4.526.031-3.6-3.193-6.293-7.874-6.262-4.712-.031-8.153 2.7-8.184 6.572h4.9c.062-1.519 1.457-2.573 3.286-2.542a2.587 2.587 0 0 1 2.914 2.542c0 1.55-1.4 2.635-3.41 2.6h-2.108v3.724h2.108c2.325 0 3.813 1.116 3.782 2.666.031 1.612-1.364 2.728-3.348 2.728-1.922 0-3.348-1.023-3.41-2.48h-5.208c.091 3.937 3.625 6.696 8.616 6.696Zm19.778 0c5.022 0 8.494-3.162 8.494-7.75a6.646 6.646 0 0 0-6.758-7.006 6.028 6.028 0 0 0-5.642 3.162h-.186c.031-4 1.395-6.541 4.154-6.51a2.861 2.861 0 0 1 3.1 2.17h5.084c-.434-3.658-3.565-6.6-8.184-6.572-5.58-.031-9.207 4.371-9.238 11.656 0 7.998 4.371 10.819 9.176 10.85Zm-3.6-7.564a3.493 3.493 0 0 1 3.538-3.534 3.4 3.4 0 0 1 3.534 3.534 3.489 3.489 0 0 1-3.534 3.6 3.546 3.546 0 0 1-3.534-3.6Zm23.192 7.564c5.735 0 9.207-4.061 9.238-11.284-.031-7.161-3.534-11.253-9.238-11.222-5.673-.031-9.145 4.061-9.176 11.222.031 7.192 3.503 11.284 9.176 11.284Zm-3.844-11.284c0-4.774 1.55-7.068 3.844-7.068 2.356 0 3.906 2.294 3.906 7.068 0 4.867-1.55 7.068-3.906 7.068-2.294 0-3.875-2.201-3.844-7.068Zm20.584-.372a5.345 5.345 0 0 0 5.332-5.394 5.292 5.292 0 0 0-5.332-5.332 5.332 5.332 0 0 0-5.332 5.332 5.385 5.385 0 0 0 5.332 5.394Zm-2.046-5.394a2.044 2.044 0 0 1 2.046-2.046 2.024 2.024 0 0 1 2.046 2.046 2.039 2.039 0 0 1-2.046 2.108 2.058 2.058 0 0 1-2.046-2.108Z' data-name='패스 102070'/%3E%3Cpath fill='%23fff' d='m1282.609 736.5-14 8.5v-17Z' data-name='다각형 17'/%3E%3Cpath fill='%23fff' d='m1289.23 700.966-9.928-13.038 16.915-1.785Z' data-name='다각형 18'/%3E%3Cg clip-path='url(%23b)' data-name='마스크 그룹 10' transform='translate(-25.5 34)'%3E%3Cg fill='none' data-name='패스 102044'%3E%3Cpath d='M1306 677.036c26.57 0 48.109 6.154 48.109 13.746s-21.539 13.745-48.109 13.745-48.109-6.154-48.109-13.745 21.539-13.746 48.109-13.746Z'/%3E%3Cpath fill='%23fff' d='M1306 681.036c-6.335 0-12.474.354-18.246 1.051-5.52.667-10.457 1.616-14.673 2.821-3.956 1.13-7.127 2.457-9.17 3.838-1.87 1.262-2.02 2.029-2.02 2.036 0 .006.15.773 2.02 2.035 2.043 1.38 5.214 2.708 9.17 3.838 4.216 1.205 9.153 2.154 14.673 2.82 5.772.698 11.911 1.052 18.246 1.052 6.335 0 12.474-.354 18.247-1.051 5.52-.667 10.457-1.616 14.673-2.821 3.955-1.13 7.126-2.457 9.17-3.838 1.87-1.262 2.02-2.029 2.02-2.035 0-.007-.15-.774-2.02-2.036-2.044-1.38-5.215-2.708-9.17-3.838-4.216-1.205-9.153-2.154-14.673-2.82-5.773-.698-11.912-1.052-18.247-1.052m0-4c26.57 0 48.11 6.154 48.11 13.746 0 7.591-21.54 13.745-48.11 13.745s-48.109-6.154-48.109-13.745c0-7.592 21.54-13.746 48.11-13.746Z'/%3E%3C/g%3E%3C/g%3E%3Cg clip-path='url(%23c)' data-name='마스크 그룹 11' transform='rotate(-90 1308.751 719.25)'%3E%3Cg fill='none' data-name='패스 102069'%3E%3Cpath d='M1306 677.036c26.57 0 48.109 6.154 48.109 13.746s-21.539 13.745-48.109 13.745-48.109-6.154-48.109-13.745 21.539-13.746 48.109-13.746Z'/%3E%3Cpath fill='%23fff' d='M1306 681.036c-6.335 0-12.474.354-18.246 1.051-5.52.667-10.457 1.616-14.673 2.821-3.956 1.13-7.127 2.457-9.17 3.838-1.87 1.262-2.02 2.029-2.02 2.036 0 .006.15.773 2.02 2.035 2.043 1.38 5.214 2.708 9.17 3.838 4.216 1.205 9.153 2.154 14.673 2.82 5.772.698 11.911 1.052 18.246 1.052 6.335 0 12.474-.354 18.247-1.051 5.52-.667 10.457-1.616 14.673-2.821 3.955-1.13 7.126-2.457 9.17-3.838 1.87-1.262 2.02-2.029 2.02-2.035 0-.007-.15-.774-2.02-2.036-2.044-1.38-5.215-2.708-9.17-3.838-4.216-1.205-9.153-2.154-14.673-2.82-5.773-.698-11.912-1.052-18.247-1.052m0-4c26.57 0 48.11 6.154 48.11 13.746 0 7.591-21.54 13.745-48.11 13.745s-48.109-6.154-48.109-13.745c0-7.592 21.54-13.746 48.11-13.746Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;} .threeIco.on{opacity: 1;} /* .threeIco.on span{animation: kambbak 2s .3s 1;} */ .gdHand { opacity:0; display:inline-block; position:Absolute; z-index:1; transition: all .3s; pointer-events:none;} .gdHand span { display:inline-block; width:85px; height:91px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168.889' height='180.067'%3E%3Cdefs%3E%3Cfilter id='a' width='168.889' height='180.067' x='0' y='0' filterUnits='userSpaceOnUse'%3E%3CfeOffset dx='15' dy='16'/%3E%3CfeGaussianBlur result='blur' stdDeviation='15'/%3E%3CfeFlood flood-opacity='.161'/%3E%3CfeComposite in2='blur' operator='in'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23a)'%3E%3Cg fill='%23fff'%3E%3Cpath d='M94.2 116.067c-11.413 0-26.897-.034-36.149-.054L52.287 116l-.942-.988c-3.242-3.402-12.19-12.79-15.116-15.92l.01-.056-1.08-1.12-.11-.114c-.82-.846-2.058-2.124-2.049-3.787.01-2.032.628-3.385 1.153-3.927.06-.061.066-.068 17.083-19.089l.764-.854V40c0-4.411 3.589-8 8-8s8 3.589 8 8v23.465l2.419.478 35.415 6.996c-.095 4.31-.295 13.518-.477 22.653-.147 7.32-.254 13.163-.318 17.368a784.895 784.895 0 0 0-.065 5.088c-1.969.01-5.271.019-10.774.019Z'/%3E%3Cpath fill='%230d0d0e' d='M60 35c-2.757 0-5 2.243-5 5v31.292l-1.528 1.709S36.428 92.044 36.393 92.078c-.008.012-.386.579-.393 1.953-.002.44.782 1.25 1.318 1.803l2.16 2.24-.016.084c3.474 3.689 10.69 11.254 14.057 14.787l.056.059 40.625.063c3.006 0 5.706-.002 7.89-.007-.034-6.757.216-18.55.688-39.667L65 65.931V40c0-2.757-2.243-5-5-5m0-6c6.075 0 11 4.925 11 11v21l37.89 7.484S107.754 119.031 108 119c.012.15-52.967 0-56.784 0H51c-.071-.083-18.023-18.88-18-19-.979-1.014-3.016-3.009-3-6 .016-2.99 1.025-4.995 2-6 .024-.024 17-19 17-19V40c0-6.075 4.925-11 11-11Z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%230d0d0e' stroke-width='6' d='M52 47v47'/%3E%3C/g%3E%3C/svg%3E") no-repeat center top/100% auto; } .gdHand.on { opacity:1; } .defaultGuide{ position: absolute; display: inline-block; background-color: rgba(0,0,0,.8); font-family: 'PretendardSB'; font-size: 20px; letter-spacing: -0.032em; line-height: 45px; color: #fff; border-radius: 7px; padding: 0 20px; opacity: 0; transition: opacity .3s; pointer-events: none;} .defaultGuide.bot{background-color: #000; border-radius: 39px;} .defaultGuide.bot:after{content: ''; width: 20px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34'%3E%3Cpath d='M23.448 28.139a4 4 0 0 1-6.9 0L3.546 6.028A4 4 0 0 1 6.994 0h26.012a4 4 0 0 1 3.448 6.028Z' data-name='다각형 3'/%3E%3C/svg%3E") no-repeat center / contain; position: absolute; left: 50%; transform: translateX(-50%); bottom: -10px;} .defaultGuide.left{background-color: #000; border-radius: 39px;} .defaultGuide.left:after{content: ''; width: 20px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34'%3E%3Cpath d='M23.448 28.139a4 4 0 0 1-6.9 0L3.546 6.028A4 4 0 0 1 6.994 0h26.012a4 4 0 0 1 3.448 6.028Z' data-name='다각형 3'/%3E%3C/svg%3E") no-repeat center / contain; position: absolute; left: -8px; transform: translateY(-50%) rotate(90deg); top: 50%;} .defaultGuide.on{opacity: 1;} .rbtn{display: inline-block; width: 44px; height: 44px; border-radius: 100%; position: absolute; cursor: pointer; opacity: 0; pointer-events: none; transition: right .3s, opacity .3s;} .rbtn span{display: inline-block; width: 100%; height: 100%;} .roundBtn{display: inline-block; position: absolute; line-height: 60px; border-radius: 30px; padding: 0 30px; cursor: pointer;} .nextBtn{background: #000; right: 0px; bottom: 35px; transform: rotate(-90deg);} .nextBtn span{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31.927' height='16.163'%3E%3Cg data-name='그룹 327'%3E%3Cpath fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='4' d='M30.513 1.414 19.038 12.889a4.348 4.348 0 0 1-6.149 0L1.414 1.414' data-name='패스 8001'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 16px 8px;} .returnBtn{background: #000; right: 0px; bottom: 35px;} .returnBtn span{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='38.564'%3E%3Cg fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='4' data-name='그룹 492'%3E%3Cpath d='M24.306 5.855A16.009 16.009 0 1 1 18 4.568' data-name='패스 8004'/%3E%3Cpath d='M25.039 12.512 24.02 5.013l7.498-1.018' data-name='패스 8005'/%3E%3C/g%3E%3C/svg%3E") no-repeat center 12px / 18px 19px;} .homeBtn{background: #fff; right: 0px; bottom: 90px; border: 1px solid #BFBFBF;} .homeBtn span{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.295' height='30.231'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' d='M2 30.231V16.224L17.707 2.615l16.588 13.609v14.007' data-name='패스 27094'/%3E%3C/svg%3E") no-repeat center 12px / 18px 15px;} .prevBtn{background: #fff; cursor: pointer; bottom: 35px; border: 1px solid #BFBFBF;} .prevBtn span{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31.927' height='16.163'%3E%3Cg data-name='그룹 327'%3E%3Cpath fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='4' d='M30.513 1.414 19.038 12.889a4.348 4.348 0 0 1-6.149 0L1.414 1.414' data-name='패스 8001'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 16px 8px; left: 30px; bottom: 35px; transform: rotate(90deg);} .playBtn{background: #fff; border: 1px solid #BFBFBF; right: 0; bottom: 90px;} .playBtn span{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='42'%3E%3Cg fill='none' data-name='다각형 3'%3E%3Cpath d='M25.735 15.9a6 6 0 0 1 0 10.21L9.153 36.347A6 6 0 0 1 0 31.242V10.758a6 6 0 0 1 9.153-5.1Z'/%3E%3Cpath fill='%2352d5d5' d='M24.582 21c0-.335-.092-1.173-.949-1.702L7.051 9.056c-.902-.557-1.717-.217-2.025-.045C4.717 9.183 4 9.698 4 10.758v20.484c0 1.06.717 1.575 1.026 1.747.308.172 1.123.512 2.025-.045l16.582-10.242a1.972 1.972 0 0 0 .95-1.702m4 0c0 1.966-.95 3.932-2.848 5.105L9.153 36.347C5.156 38.816 0 35.94 0 31.242V10.758C0 6.06 5.156 3.184 9.153 5.653l16.582 10.242c1.898 1.173 2.847 3.139 2.847 5.105Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 15px center / 17px 21px;} .rbtn.on:not(.returnBtn) span{animation: kambbak 2s 2;} .nextBtn.on{opacity: 1; pointer-events: auto; right: 30px;} .returnBtn.on{opacity: 1; pointer-events: auto; right: 30px;} .homeBtn.on{opacity: 1; pointer-events: auto; right: 30px;} .prevBtn.on{ opacity: 1; pointer-events: auto; left: 30px;} .playBtn.on{ opacity: 1; pointer-events: auto; right: 30px;} .chaBox{position: absolute; opacity: 0; transition: right .3s, opacity .3s; pointer-events: none;} .chaBox .malBox{position: absolute; display: inline-block; background-color: #000; border-radius: 39px; padding: 0 20px; white-space: nowrap;} .chaBox .malBox p{font-family: 'PretendardSB'; font-size: 20px; color: #fff; letter-spacing: -0.032em; line-height: 45px;} .chaBox .malBox.tail:after{content: ''; width: 23px; height: 23px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45.351' height='45.351'%3E%3Cpath d='M29.49 34.364a4 4 0 0 0 4.878-4.879l-6.44-24.828a4 4 0 0 0-6.701-1.825L2.833 21.226a4 4 0 0 0 1.824 6.7Z' data-name='패스 8006'/%3E%3C/svg%3E") no-repeat center / contain; position: absolute; right: -4px; bottom: -4px;} @keyframes kambbak {0% {opacity:1;}25% {opacity:0.2;}50% {opacity:1;}75% {opacity:0.2;}100% {opacity:1;}} /*========================================================================================================= * 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 .bgbox { opacity:0; position:Relative; height:100%; right: -50px; transition: right .3s, opacity .3s;} .mainPage .bgbox li { opacity:0; width:100%; height:100%; position:Absolute; top:0; left:0; background-repeat: no-repeat; background-position: 0 0; background-size: contain; transition: all .5s;} .mainPage .bgbox li:nth-child(1) { background-image: url('../images/board/mainPage_bg1.png');} .mainPage .bgbox li:nth-child(2) { background-image: url('../images/board/mainPage_bg2.png');} .mainPage .bgbox li:nth-child(3) { background-image: url('../images/board/mainPage_bg3.png');} .mainPage .bgbox li:nth-child(4) { background-image: url('../images/board/mainPage_bg4.png');} .mainPage .bgbox li:nth-child(5) { background-image: url('../images/board/mainPage_bg5.png');} .mainPage .bgbox li:nth-child(6) { background-image: url('../images/board/mainPage_bg6.png');} .mainPage .bgbox li:nth-child(7) { background-image: url('../images/board/mainPage_bg7.png');} .mainPage .bgbox li:nth-child(8) { background-image: url('../images/board/mainPage_bg8.png');} .mainPage .bgbox li.on { opacity:1; background-position: 0 0; } .mainPage .bgbox li.on:nth-child(1), .mainPage .bgbox li.on:nth-child(2), .mainPage .bgbox li.on:nth-child(3), .mainPage .bgbox li.on:nth-child(4), .mainPage .bgbox li.on:nth-child(5), .mainPage .bgbox li.on:nth-child(6), .mainPage .bgbox li.on:nth-child(7), .mainPage .bgbox li.on:nth-child(8) { background-position: 0 0; } .mainPage.on .bgbox { right: 0; opacity:1; transition: right .5s .3s, opacity .5s .4s;} .mainPage .textbox { opacity:0; position:Absolute; top:42px; left:-44px; transition: left .3s, opacity .3s;} .mainPage .textbox h1 { font-size:16px; line-height:34px; letter-spacing: -0.025em;font-family: 'PretendardEB';} .mainPage .textbox .menulist { margin-top:56px;} .mainPage .textbox li { opacity:0; font-size: 50px; line-height:61px; letter-spacing: -0.025em; font-family: 'PretendardBk'; position:Relative; left: -50px;} .mainPage .textbox li span { display:inline-block; cursor: pointer; word-break: break-all; } .mainPage .textbox li span em { display:inline-block; } .mainPage .textbox li span .ct { position:Absolute; top:0; left:0; -webkit-text-stroke-color: #fff;-webkit-text-stroke-width: 0.006em;-webkit-text-fill-color: transparent;-webkit-background-clip: text;} .mainPage .textbox li span .lt { opacity: 0; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } .mainPage .textbox li span:hover .ct { opacity:0; transition: opacity .3s;} .mainPage .textbox li span:hover .lt {animation: flipInX 1s both; } .mainPage.on .textbox { left: 44px; opacity:1; transition: left .5s .5s, opacity .5s .6s;} .mainPage.on .textbox li { left:0; opacity:1; transition: left .5s .7s, opacity .5s .7s; } .mainPage.on .textbox li:nth-child(2) { transition-delay: .8s, .8s;} .mainPage.on .textbox li:nth-child(3) { transition-delay: .9s, .9s;} .mainPage.on .textbox li:nth-child(4) { transition-delay: 1s, 1s;} .mainPage.on .textbox li:nth-child(5) { transition-delay: 1.1s, 1.1s;} .mainPage.on .textbox li:nth-child(6) { transition-delay: 1.2s, 1.2s;} .mainPage.on .textbox li:nth-child(7) { transition-delay: 1.3s, 1.3s;} .mainPage.on .textbox li:nth-child(8) { transition-delay: 1.4s, 1.4s;} @-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;} .mainPage .loading{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #6034c7;} .mainPage .loading span{display: inline-block; width: 194px; height: 194px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url("../images/board/loading.png") no-repeat; background-position: 0px 0px; animation: loading 1.3s steps(1) infinite forwards;} @keyframes loading{0%{background-position: 0px 0px;}25%{background-position: -194px 0px;}50%{background-position: -388px 0px;}75%{background-position: -582px 0px;}100%{background-position: -776px 0px;}} /*-------------------------------------- bunsuCal ------------------------------------------*/ .bunsuCal .topTitle{position: absolute; left: 50%; transform: translateX(-50%); top: 34px; font-family: 'PretendardEB'; font-size: 16px; letter-spacing: -0.024em;} .bunsuCal .subCase{font-size: 0; width: 200%; height: 100%;} .bunsuCal .subBox{display: inline-block; width: 50%; height: 100%; vertical-align: top; transform: translateX(0);} .bunsuCal .subBox.box1 .chaBox{right: 56px; bottom: 50px;} .bunsuCal .subBox.box1 .chaBox .malBox{right: 150px; top: -23px;} .bunsuCal .subBox.box1 .chaBox.on{right: 61px; opacity: 1; transition: opacity .3s, right .3s;} .bunsuCal .bunsuArea{position: relative; display: inline-block; width: 512px; height: 100%; vertical-align: top; padding-top: 215px;} .bunsuCal .bunsuArea.ba1{padding-left: 137px;} .bunsuCal .bunsuArea.ba2{padding-left: 111px;} .bunsuCal .gihoArea{display: inline-flex; justify-content: center; align-items: center; flex-direction: column; width: 256px; height: 100%; vertical-align: top; border-left: 1px solid #EDEDED; border-right: 1px solid #EDEDED;} .bunsuCal .daebunsu{display: inline-block;} .bunsuCal .daebunsu .bunsuBox{display: inline-block; vertical-align: middle; width: 130px; text-align: center;} .bunsuCal .daebunsu .nemo{display: inline-block; width: 123px; height: 123px; border-radius: 23px; border: 1px solid #BFBFBF; cursor: pointer;} .bunsuCal .daebunsu .nemo.on{border: 1px solid #53D5D5;} .bunsuCal .daebunsu .nemo.off{border: none; background-color: #F2F2F2; pointer-events: none;} .bunsuCal .daebunsu .nemo.nol{border: none;} .bunsuCal .daebunsu .nemo.nol:hover{color: #53D5D5;} .bunsuCal .daebunsu .nemo.nol.on{color: #53D5D5;} .bunsuCal .daebunsu .nemo .numBox{ display: inline-block; width: 100%; height: 100%; font-size: 150px; font-family: 'PretendardB'; text-align: center; line-height: 121px; pointer-events: none;} .bunsuCal .daebunsu .dae{vertical-align: middle; margin-right: 13px;} .bunsuCal .bunsuBox .bunsuLine{display: inline-block; width: 100%; height: 6px; background-color: #000; margin: 20px 0;} .bunsuCal .gihoArea .pl{display: inline-block; width: 74px; height: 74px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148'%3E%3Cg data-name='그룹 21' opacity='.203'%3E%3Cpath d='M64 0h20v148H64z' data-name='사각형 8'/%3E%3Cpath d='M148 64v20H0V64z' data-name='사각형 9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 74px 74px; margin: 30px 0px; cursor: pointer;} .bunsuCal .gihoArea .mi{display: inline-block; width: 74px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='20'%3E%3Cg data-name='그룹 1' opacity='.203'%3E%3Cpath d='M148 0v20H0V0z' data-name='사각형 9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 74px 10px; margin: 30px 0px; cursor: pointer;} .bunsuCal .gihoArea .pl.off{margin: 0; opacity: 0; overflow: hidden; transition: .3s; cursor: auto;} .bunsuCal .gihoArea .mi.off{margin: 0; opacity: 0; overflow: hidden; transition: .3s; cursor: auto;} .bunsuCal .gihoArea .pl.on{transition: .3s;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148'%3E%3Cg data-name='그룹 21' %3E%3Cpath d='M64 0h20v148H64z' data-name='사각형 8'/%3E%3Cpath d='M148 64v20H0V64z' data-name='사각형 9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 74px 74px;} .bunsuCal .gihoArea .mi.on{margin: 30px 0 100px; transition: .3s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='20'%3E%3Cg data-name='그룹 1'%3E%3Cpath d='M148 0v20H0V0z' data-name='사각형 9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 74px 10px;} .bunsuCal .exBtn{position: absolute; left: 30px; bottom: 35px; display: inline-block; border-radius: 22px; border: 1px solid #BFBFBF; font-family: 'PretendardB'; font-size: 16px; letter-spacing: -0.016em; line-height: 44px; padding: 0 22px; cursor: pointer;} .bunsuCal .numBoard{position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 0 16px; overflow: hidden;} .bunsuCal .numBoard li{font-family: 'PretendardB'; font-size: 40px; color: #EDEDED; text-align: center; cursor: pointer; transform: translateX(200%); transition: transform .3s;} .bunsuCal .numBoard.on li{transform: translateX(0);} .bunsuCal .numBoard li:nth-child(1){transition-delay: 0s;} .bunsuCal .numBoard li:nth-child(2){transition-delay: .05s;} .bunsuCal .numBoard li:nth-child(3){transition-delay: .1s;} .bunsuCal .numBoard li:nth-child(4){transition-delay: .15s;} .bunsuCal .numBoard li:nth-child(5){transition-delay: .2s;} .bunsuCal .numBoard li:nth-child(6){transition-delay: .25s;} .bunsuCal .numBoard li:nth-child(7){transition-delay: .3s;} .bunsuCal .numBoard li:nth-child(8){transition-delay: .35s;} .bunsuCal .numBoard li:nth-child(9){transition-delay: .4s;} .bunsuCal .numBoard li:nth-child(10){transition-delay: .45s;} .bunsuCal .numBoard li.on{color: #000;} .bunsuCal .numBoard li.off{display: none;} .bunsuCal .numBoard li.hide{opacity: .3; pointer-events: none;} .bunsuCal .boxCon{ position: relative; width: 100%; height: 100%; white-space: nowrap;} .bunsuCal .side{display: inline-block; text-align: center;} .bunsuCal .leftSide.side{width: 100%; padding-top: 140px;} .bunsuCal .rightSide.side{opacity: 0; width: 430px; vertical-align: top; padding-top: 105px; margin-left: 60px;} .bunsuCal .rightSide.side .bunsuCase{margin-top: 0;} .bunsuCal .rightSide .bunsuArea{width: 100%;} .bunsuCal .equalBox{display: inline-block; width: 41px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='52'%3E%3Cg data-name='그룹 4180'%3E%3Cpath d='M82 0v12H0V0z' data-name='사각형 11'/%3E%3Cpath d='M82 40v12H0V40z' data-name='사각형 23'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; vertical-align: top; opacity: 0; margin: 292px 0 0 -78px;} .bunsuCal .area{width: 210px; display: inline-block; vertical-align: bottom; width: 210px;} .bunsuCal .area.leftArea{--color1: #BCECF2; --color2: #2EBED1;} .bunsuCal .area.rightArea{--color1: #FFE867; --color2: #EB9F47;} .bunsuCal .area.on .dragItem{cursor: pointer;} .bunsuCal .areaGiho{display: inline-block; vertical-align: top; color: #000; margin: 144px 210px 0px;} .bunsuCal .areaGiho.pl{width: 41px; height: 41px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148'%3E%3Cg data-name='그룹 21' %3E%3Cpath d='M64 0h20v148H64z' data-name='사각형 8'/%3E%3Cpath d='M148 64v20H0V64z' data-name='사각형 9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;} .bunsuCal .areaGiho.mi{ width: 41px; height: 41px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='20'%3E%3Cg data-name='그룹 1'%3E%3Cpath d='M148 0v20H0V0z' data-name='사각형 9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 41px 6px;} .bunsuCal .topBox{ font-family: 'PretendardB';} .bunsuCal .topBox .bunsuCase{display: inline-block; font-size: 20px; color: #000; vertical-align: top; margin-top: 94px;} .bunsuCal .topBox .dae, .bunsuCal .topBox .bunsu{display: inline-block; font-family: 'PretendardB'; vertical-align: middle; font-size: 40px; text-align: center; line-height: 38px;} .bunsuCal .topBox .bunsuCase .bunsu .hipen{width: 32px; height: 2px; background-color: #000;} .bunsuCal .topBox .bunsuCase[data-length="2"] .hipen{width: 52px;} .bunsuCal .topBox .lst{ display: inline-block; font-size: 90px; color: #000; font-family: 'BkML'; line-height: 80px; vertical-align: top; margin-top: 6px;} .bunsuCal .topBox .lst.lst_L{ width: 17px; height: 66px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.3' height='132.389'%3E%3Cpath d='M32.34.229q-5.46 3.78-12.88 12.32T6.02 35.089A78.994 78.994 0 0 0 0 66.589q0 17.5 5.67 31.22t13.09 22.05q7.42 8.33 13.58 12.25l.7.28a1.2 1.2 0 0 0 .77-.28 1.011 1.011 0 0 0 .35-.84 2.017 2.017 0 0 0-.7-1.4q-.28-.28-6.3-5.81t-11.97-21.42a100.569 100.569 0 0 1-5.95-35.49 102.54 102.54 0 0 1 3.29-27.37 80.633 80.633 0 0 1 8.54-20.44 121.175 121.175 0 0 1 12.81-17.15 1.343 1.343 0 0 0 .42-.98 1.131 1.131 0 0 0-.63-1.05 1.253 1.253 0 0 0-1.33.07Z' data-name='패스 102069'/%3E%3C/svg%3E") no-repeat center / contain; margin-left: 16px;} .bunsuCal .topBox .lst.lst_R{ width: 17px; height: 66px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.02' height='132.412'%3E%3Cpath d='M34.02 66.64A78.994 78.994 0 0 0 28 35.14q-6.02-14-13.37-22.54T1.82.28L1.12 0Q0 0 0 1.26a1.343 1.343 0 0 0 .42.98 127.876 127.876 0 0 1 12.74 17.15 78.273 78.273 0 0 1 8.4 20.23 103.24 103.24 0 0 1 3.22 27.16q0 19.74-5.04 33.39t-3.71 12.04Q17.36 110.6.7 129.92a2.017 2.017 0 0 0-.7 1.4.991.991 0 0 0 .63.98 1.108 1.108 0 0 0 1.19-.14q6.16-3.92 13.44-12.32t13.02-22.05q5.74-13.65 5.74-31.15Z' data-name='패스 102069'/%3E%3C/svg%3E") no-repeat center / contain;} .bunsuCal .topBox .equal{ display: inline-block; font-family: 'BkMyungjoB'; color: #000; font-size: 36px; margin-top: 16px;} .bunsuCal .topBox .off{display: none;} .bunsuCal .bottomBox{text-align: center;} .bunsuCal .bottomBox .daeFigure{position: relative;} .bunsuCal .bottomBox .daeFigure .dragItem{display: inline-block; position: relative; width: 114px; height: 114px; top: 30px;} .bunsuCal .bottomBox .daeFigure .dragItem.on{pointer-events: none; opacity: .3;} .bunsuCal .bottomBox .daeFigure .dragItem.end{opacity: .3; pointer-events: none;} .bunsuCal .bottomBox .daeFigure .dragItem.ui-draggable-dragging.end{opacity: 0; pointer-events: none;} .bunsuCal .bottomBox .daeFigure .daeF{width: 114px; height: 114px; background-color: var(--color1); border: 1px solid var(--color2); position: absolute; left: 0; top: 0;} .bunsuCal .bottomBox .bunsuFigure{display: inline-grid; grid-template-columns: repeat(var(--colums), 1fr); grid-template-rows: repeat(var(--rows), 1fr); width: 114px; height: 114px; border: 1px solid var(--color2); margin-top: 80px; background-color: #fff;} .bunsuCal .bottomBox .bunsuFigure .bunjaF{display: inline-block; border-top: 1px dashed var(--color2);} .bunsuCal .bottomBox .bunsuFigure .bunjaF.nbt{border-top: none;} .bunsuCal .bottomBox .bunsuFigure .bunjaF.on{background-color: var(--color1);} .bunsuCal .bottomBox .bunsuFigure .bunjaF.on.off{opacity: .3;} .bunsuCal .bottomBox .bunsuFigure.on .bunjaF{border-right: 1px dotted var(--color2);} .bunsuCal .bottomBox .bunsuFigure.on .bunjaF.nbr{border-right: none;} .bunsuCal .bottomBox .bunsuFigure.dragItem.end{opacity: .3; pointer-events: none;} .bunsuCal .bottomBox .bunsuFigure.dragItem.ui-draggable-dragging.end{opacity: 0;} .bunsuCal .rightSide .topBox{height: 98px; display: inline-block; background-color: #fff; padding: 0 10px; opacity: 0; min-width: 70px; border-radius: 10px; margin-top: 52px;} .bunsuCal .rightSide .topBox.jungsu .lst, .bunsuCal .rightSide .topBox.jungsu .equal, .bunsuCal .rightSide .topBox.jungsu .bunsuCase .bunsu, .bunsuCal .rightSide .topBox.jungsu .bunsuCase:nth-of-type(2){display: none;} .bunsuCal .rightSide .topBox.jungsu .dae{line-height: 90px;} .bunsuCal .rightSide .bunsuCase{color: #6034C7;} .bunsuCal .rightSide .bottomBox{background-color: #F8F8F8; border-radius: 24px; height: 385px;} .bunsuCal .rightSide .bottomBox .daeArea{padding-top: 72px;} .bunsuCal .rightSide .bottomBox .daeArea > div{display: inline-block; width: 114px; height: 114px; position: relative; margin: 0 20px;} .bunsuCal .rightSide .bottomBox .daeArea > div.off{display: none;} .bunsuCal .rightSide .bottomBox .daeArea > div .daeF{width: 114px; height: 114px; position: absolute; left: 0; top: 0;} .bunsuCal .rightSide .bottomBox .daeArea > div .daeF.rightA{background-color: #FFE867; border: 1px solid #EB9F47;} .bunsuCal .rightSide .bottomBox .daeArea > div .daeF.leftA{background-color: #BCECF2; border: 1px solid #2EBED1;} .bunsuCal .rightSide .bottomBox .daeArea > div .daeF.ceilA{background-color: #AA8FE8; border: 1px solid #683FC7; opacity: 1;} .bunsuCal .rightSide .bottomBox .daeArea > div .daeF.ceilA.stand{position: absolute; left: -77px; top: 156px; opacity: 0;} .bunsuCal .rightSide .bottomBox .daeArea > div .daeF.tr{transition: opacity .3s, left .4s .5s, top .4s .5s;} .bunsuCal .rightSide .bottomBox .daeArea > div .daeF.off{opacity: .2;} .bunsuCal .rightSide .bottomBox .bunsuArea{display: flex; justify-content: center; align-items: center; padding-top: 0; height: 198px;} .bunsuCal .rightSide .bottomBox .bunsuArea > div{width: 114px; height: 114px; margin: 0 20px; display: grid; grid-template-columns: repeat(var(--colums), 1fr); grid-template-rows: repeat(var(--rows), 1fr);} .bunsuCal .rightSide .bottomBox .bunsuArea > div.off{opacity: 0; width: 100px; transition: opacity .3s, width .3s;} .bunsuCal .rightSide .bottomBox .bunjaF{display: inline-block; border-top: 1px dashed rgba(62, 146, 94); border-right: 1px dotted rgba(62, 146, 94); transition: background .3s;} .bunsuCal .rightSide .bottomBox .leftBunsu .bunjaF{border-top: 1px dashed #2EBED1; border-right: 1px dashed #2EBED1;} .bunsuCal .rightSide .bottomBox .rightBunsu .bunjaF{border-top: 1px dashed #EB9F47; border-right: 1px dashed #EB9F47;} .bunsuCal .rightSide .bottomBox .bunjaF.nbt{border-top: none;} .bunsuCal .rightSide .bottomBox .bunjaF.nbr{border-right: none;} .bunsuCal .rightSide .bottomBox .leftBunsu.on{border: 1px solid #2EBED1;} .bunsuCal .rightSide .bottomBox .leftBunsu .bunjaF.on{background-color: #BCECF2;} .bunsuCal .rightSide .bottomBox .leftBunsu .bunjaF.on.off{background-color: rgba(188, 236, 242, 0.5);} .bunsuCal .rightSide .bottomBox .rightBunsu.on{border: 1px solid #EB9F47;} .bunsuCal .rightSide .bottomBox .rightBunsu .bunjaF.on{background-color: #FFE867;} .bunsuCal .rightSide .bottomBox .rightBunsu .bunjaF.on.off{background-color: rgba(255, 232, 103, 0.5);} .bunsuCal .rightSide.sumMamuri .topBox{opacity: 1; transition: opacity .4s 1.5s;} .bunsuCal .rightSide.sumMamuri .bottomBox .daeArea > div .daeF{background-color: #AA8FE8; border: 1px solid #683FC7; transition: background .5s, border .5s;} .bunsuCal .rightSide.sumMamuri .bottomBox .bunsuArea > div{border: 1px solid #683FC7; margin: 0 -50px; transition: all .5s;} .bunsuCal .rightSide.sumMamuri .bottomBox > div .bunjaF.on{background-color: #AA8FE8; border-color: #683FC7; transition: background .5s;} .bunsuCal .rightSide.sumMamuri .bottomBox > div .bunjaF:not(.on){border-color: #683FC7;} .bunsuCal .rightSide.subtractMamuri .topBox{opacity: 1; transition: opacity .4s 2s;} .bunsuCal .rightSide.subtractMamuri .daeSubtract.subr{width: 0; transition: width .5s, margin .5s; margin: 0;} .bunsuCal .rightSide.subtractMamuri .bottomBox .daeSubtract .daeF.leftA{background-color: #AA8FE8; border: 1px solid #683FC7; transition: background .8s;} .bunsuCal .rightSide.subtractMamuri .bottomBox .daeSubtract .daeF.off{opacity: 0; transition: width .5s, opacity .5s;} .bunsuCal .rightSide.subtractMamuri .bunsuArea .rightBunsu{opacity: 0; width: 0; transition: opacity .5s, width .5s, margin .5s; margin: 0;} .bunsuCal .rightSide.subtractMamuri .bunsuArea .leftBunsu{border: 1px solid #683FC7;} .bunsuCal .rightSide.subtractMamuri .bunsuArea .leftBunsu .bunjaF{transition: background .8s;} .bunsuCal .rightSide.subtractMamuri .bunsuArea .leftBunsu .bunjaF.off{background-color: transparent;} .bunsuCal .rightSide.subtractMamuri .bunsuArea .leftBunsu .bunjaF.on:not(.off){background-color: #AA8FE8;} .bunsuCal .rightSide.subtractMamuri .bunsuArea .leftBunsu .bunjaF, .bunsuCal .rightSide.subtractMamuri .bunsuArea .rightBunsu .bunjaF{border-color: #683FC7;} .bunsuCal .subCase.step3 .box2 .leftSide{width: 730px; transition: width .6s;} .bunsuCal .subCase.step3 .box2 .leftSide .areaGiho{margin: 144px 15px 0; transition: margin .6s;} .bunsuCal .roundBtn.tongbun{left: 50%; transform: translateX(-50%); bottom: 110px; background-color: #53D5D5; font-family: 'PretendardB'; font-size: 20px; text-align: center; color: #fff; opacity: 0; pointer-events: none; transition: opacity .3s;} .bunsuCal .roundBtn.tongbun.on{opacity: 1; pointer-events: auto;} .bunsuCal .roundBtn.tongbun.on span{animation: kambbak 2s 2;} .bunsuCal .gdHand{left: 194px; top: 204px;} .bunsuCal .gdHand.on{animation: bunsuGuide 2s 1 forwards;} .dv_mob.ios .bunsuCal .topBox .equal { margin-top: 22px; } .bunsuCal .exPop{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; transition: opacity .3s, z-index 0s .3s; background-color: rgba(255,255,255,.6); backdrop-filter: blur(20px);} .bunsuCal .exPop.on{opacity: 1; z-index: 1; transition: opacity .3s, z-index 0s;} .bunsuCal .exPop .exList{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .bunsuCal .exPop .exList li{font-family: 'PretendardEB'; font-size: 40px; letter-spacing: -0.016em; text-align: center; margin: 12px 0;} .bunsuCal .exPop .exList li span{ position: relative; display: inline-block; opacity: .3; cursor: pointer;} .bunsuCal .exPop .exList li span:after{content: ''; width: 7px; height: 7px; border-radius: 100%; background: #FFD651; position: absolute; right: -14px; top: -2px; opacity: 0;} .bunsuCal .exPop .exList li span:hover{opacity: 1; transition: opacity .3s;} .bunsuCal .exPop .exList li span:hover:after{opacity: 1; transition: opacity .3s;} .bunsuCal .exPop .chaBox{right: 52px; bottom: 48px;} .bunsuCal .exPop.on .chaBox{right: 62px; opacity: 1; transition: right .3s .3s, opacity .3s .3s;} .bunsuCal .exPop .closebtn{display: inline-block; position: absolute; width: 14px; height: 14px; background: url("../images/board/bunsu_exPopCloseBtn.png") no-repeat center / contain; right: 32px; top: 37px; cursor: pointer;} .bunsuCal .defaultGuide{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .bunsuCal .subCase.step2{transform: translateX(-50%); transition: transform .8s;} .bunsuCal .subCase.step3{transform: translateX(-50%); transition: transform .8s;} .bunsuCal .subCase.step3 .equalBox, .bunsuCal .subCase.step3 .rightSide{opacity: 1; transition: opacity .3s;} .bunsuCal .subBox.box2.noDae .leftSide .daeFigure .dragItem{height: 0;} .bunsuCal .subBox.box2.noDae .leftSide .bunsuFigure{margin-top: 110px;} .bunsuCal .subBox.box2.noDae .gdHand{left: 194px; top: 284px;} .bunsuCal .subBox.box2.resultNoDae .rightSide .daeArea{height: 0; padding-top: 104px;} .bunsuCal .subBox.box2.noDae .leftSide .bunsuCase{margin-top: 178px;} .dv_mob.ios .bunsuCal .gihoArea .pl.on{transition: none;} .dv_mob.ios .bunsuCal .gihoArea .mi.on{transition: margin .3s;} @keyframes bunsuGuide{ 0%{left: 194px; opacity: 0;} 30%{left: 194px; opacity: 1;} 70%{left: 934px; opacity: 1;} 100%{left: 934px; opacity: 0;} } /*======================================= polygon =======================================*/ .polygon header{z-index: 1;} .polygon .introPage{position: absolute; left: 0; top: 0; z-index: -1; opacity: 0;; width: 100%; height: 100%; background-color: #fff; transition: opacity .3s, z-index .3s; font-size: 0;} .polygon .introPage.on{z-index: 0; opacity: 1;} .polygon .introPage section{position: relative; display: inline-block; width: 25%; height: 100%; text-align: center; vertical-align: top; cursor: pointer;} .polygon .introPage section:after{content: ''; width: 1px; height: 100%; background-color: #EDEDED; position: absolute; right: 0; top: 0;} .polygon .introPage section:nth-child(4):after{content: none;} .polygon .introPage section .ply{display: inline-block;} .polygon .introPage section:nth-of-type(1) .ply{width: 137px; height: 96px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='274.82' height='191.735'%3E%3Cg fill='%23e04435' data-name='패스 101922'%3E%3Cpath d='M210.188 190.735H1.388L64.631 1h208.8l-63.244 189.735Z'/%3E%3Cpath fill='%23000' d='M65.353 2 2.775 189.735h206.692L272.045 2H65.353m-1.441-2H274.82l-63.912 191.735H0L63.912 0Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 279px;} .polygon .introPage section:nth-of-type(1) p{margin-top: 42px;} .polygon .introPage section:nth-of-type(2) .ply{width: 121px; height: 102px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='242.864' height='204.517'%3E%3Cg fill='%23ffba00' data-name='다각형 12'%3E%3Cpath d='M241.108 203.517H1.757L121.432 1.959l119.676 201.558Z'/%3E%3Cpath fill='%23000' d='M121.432 3.917 3.514 202.517H239.35L121.432 3.917m0-3.917 121.432 204.517H0L121.432 0Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 276px;} .polygon .introPage section:nth-of-type(2) p{margin-top: 37px;} .polygon .introPage section:nth-of-type(3) .ply{width: 117px; height: 117px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='235' height='235'%3E%3Cg fill='%231b6ddb' stroke='%23000' stroke-width='2' data-name='사각형 2971'%3E%3Cpath stroke='none' d='M0 117.5 117.5 0 235 117.5 117.5 235z'/%3E%3Cpath fill='none' d='M1.414 117.5 117.5 1.414 233.586 117.5 117.5 233.586z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 268px;} .polygon .introPage section:nth-of-type(3) p{margin-top: 30px;} .polygon .introPage section:nth-of-type(4) .ply{width: 128px; height: 96px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255.646' height='191.735'%3E%3Cg fill='%2352d5d5' data-name='패스 101921'%3E%3Cpath d='M254.26 190.735H1.386L64.632 1h126.382l63.245 189.735Z'/%3E%3Cpath fill='%23000' d='M65.353 2 2.775 189.735h250.097L190.293 2H65.353m-1.441-2h127.823l63.912 191.735H0L63.912 0Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 279px;} .polygon .introPage section:nth-of-type(4) p{margin-top: 42px;} .polygon .introPage section p{font-family: 'PretendardB'; font-size: 30px; white-space: nowrap;} .polygon .introPage section:hover .ply{animation: hundle .5s 1;} .polygon .introPage section.on{width: 100%; transition: width .6s, opacity .6s .6s; opacity: 0;} .polygon .introPage.sel{pointer-events: none;} .polygon .introPage.sel section:not(.on){width: 0; transition: width .6s, opacity .6s; opacity: 0;} .polygon .chaBox{right: 56px; bottom: 50px;} .polygon .chaBox .malBox{right: 150px; top: -23px;} .polygon .chaBox.on{right: 61px; opacity: 1; transition: opacity .3s, right .3s;} .polygon .tabBtn{position: absolute; left: 0; top: 0; width: 100%; height: 80px; font-size: 16px; color: #000; font-family: 'PretendardEB'; text-align: center; display: flex; justify-content: center; align-items: center;} .polygon .tabBtn span{display: inline-block; margin: 0 20px; opacity: .3; cursor: pointer;} .polygon .tabBtn span.on{opacity: 1;} .polygon .tb{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; pointer-events: none; height: 640px;} .polygon .tb.on{opacity: 1; z-index: 0; pointer-events: auto;} .polygon .mtb{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; transition: opacity .3s, z-index 0s .3s;} .polygon .mtb.on{opacity: 1; z-index: 0; transition: opacity .3s, z-index 0s;} .polygon .tb .defaultGuide{left: 50%; top: 50%; transform: translate(-50%,-50%); margin-top: -80px;} .polygon .defaultGuide{line-height: 30px; padding: 10px 20px;} .polygon .btn{bottom: 20px;} .polygon .nemo{display: inline-block; font-size: 30px; line-height: 38px; border-radius: 10px; background-color: #fff; border: 2px solid #5c8ff3; padding: 0 9px;} .polygon .conbox{position: relative; width: 100%; height: 640px; margin-top: 104px;} .polygon .ta_cen{text-align: center; position: relative;} .polygon .interArea{position: relative; display: inline-block; height: 600px; transform: translateX(260px);} .polygon .interArea .poly1svg{width: 100%; height: 443px; position: relative;} .polygon .interArea .grid line{stroke: #CBCBCB; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2;} .polygon .interArea .poly1svg .dots circle{opacity: 0;} .polygon .interArea .poly1svg .path1{stroke: #52D5D5; stroke-width: 1.4; fill: #52D5D5; fill-opacity: 0.2; stroke-linecap: round; stroke-linejoin: round;} .polygon .interArea .poly1svg .path1.on{fill: #f16bba;} .polygon .interArea .poly1svg .line1{stroke: #6034C7; stroke-width: 1.4;} .polygon .interArea .poly1svg .line2{stroke: #FFC400; stroke-width: 1.4;} .polygon .interArea .poly1svg .line3{stroke: #fabc28; stroke-width: 1.4;} .polygon .interArea .mouseArea{position: absolute; left: 0; top: 0; font-size: 0;} .polygon .interArea .mouseArea li{display: inline-block; position: absolute; transform: translate(-50%, -50%); font-size: 10px;} .polygon .interArea .mouseArea li.on:after{content: ''; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid #000;} .polygon .interArea .extend{position: absolute; left: 0; top: 0; opacity: 0; transform: translate(-50%,-50%); z-index: 1;} .polygon .interArea .extend p{font-family: 'NotoSBNb', 'BkMyungjoB'; font-size: 30px; color: #52D5D5; pointer-events: none;} .polygon .interArea .extend p sup{font-size: 18px; font-family: 'BkMyungjoB';} .polygon .interArea .extend.on{opacity: 1; transition: opacity .3s;} .polygon .interArea .drag{display: inline-block; width: 30px; height: 30px; position: absolute; left: 0; top: 0; cursor: pointer;} .polygon .interArea .drag.nck{pointer-events: none;} .polygon .interArea .udlrDir{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='59.385' height='59.385'%3E%3Cg stroke='%23000' stroke-width='4' data-name='그룹 2294'%3E%3Cg fill='rgba(0,0,0,0.3)' data-name='타원 39' transform='translate(16.692 16.557)'%3E%3Ccircle cx='13' cy='13' r='13' stroke='none'/%3E%3Ccircle cx='13' cy='13' r='11' fill='none'/%3E%3C/g%3E%3Cpath fill='none' d='m22.192 10.56 7.728-7.728 7.728 7.728' data-name='패스 27100'/%3E%3Cpath fill='none' d='m48.825 22.057 7.728 7.728-7.728 7.728' data-name='패스 27102'/%3E%3Cpath fill='none' d='m37.648 48.825-7.728 7.728-7.728-7.728' data-name='패스 27101'/%3E%3Cpath fill='none' d='m10.559 37.513-7.728-7.728 7.728-7.728' data-name='패스 27103'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;} .polygon .interArea .lrDir{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='59.385' height='26'%3E%3Cg stroke='%23000' stroke-width='4' data-name='그룹 2293'%3E%3Cg fill='rgba(0,0,0,0.3)' data-name='타원 40' transform='translate(16.692)'%3E%3Ccircle cx='13' cy='13' r='13' stroke='none'/%3E%3Ccircle cx='13' cy='13' r='11' fill='none'/%3E%3C/g%3E%3Cpath fill='none' d='m48.825 5.499 7.728 7.728-7.728 7.728' data-name='패스 27105'/%3E%3Cpath fill='none' d='m10.559 20.956-7.728-7.728L10.559 5.5' data-name='패스 27104'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 30px 13px;} .polygon .interArea .udDir{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='59.385' height='26'%3E%3Cg stroke='%23000' stroke-width='4' data-name='그룹 2293'%3E%3Cg fill='rgba(0,0,0,0.3)' data-name='타원 40' transform='translate(16.692)'%3E%3Ccircle cx='13' cy='13' r='13' stroke='none'/%3E%3Ccircle cx='13' cy='13' r='11' fill='none'/%3E%3C/g%3E%3Cpath fill='none' d='m48.825 5.499 7.728 7.728-7.728 7.728' data-name='패스 27105'/%3E%3Cpath fill='none' d='m10.559 20.956-7.728-7.728L10.559 5.5' data-name='패스 27104'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 30px 13px; transform: rotateZ(90deg);} .polygon .interArea .info{color: #000; text-align: left; padding-left: 20px; margin-top: -2px;} .polygon .interArea .info > div{display: inline-block; margin-left: 58px;} .polygon .interArea .info > div:first-child{margin-left: 0;} .polygon .interArea .info .infoName{margin-bottom: 6px; font-size: 13px; font-family: 'PretendardB'; letter-spacing: -0.024em;} .polygon .interArea .info .infoWidth .infoName{color: #FFC403;} .polygon .interArea .info .infoHeight .infoName{color: #6034C7;} .polygon .interArea .info .result{ vertical-align: middle;} .polygon .interArea .info em{display: inline-block; font-size: 30px; line-height: 40px; vertical-align: middle; font-family: 'NotoSBNb', 'BkMyungjoB';} .polygon .interArea .gridSvg .resultGroup{transform: translateX(0);} .polygon .resultArea{position: relative; display: inline-block; width: 394px; vertical-align: top; position: relative; transform: translateX(200%); margin: 21px 30px 0 26px; text-align: left;} .polygon .resultArea .yellow{color: #FFC403;} .polygon .resultArea .purple{color: #6034C7;} .polygon .resultArea .sky{color: #52D5D5;} .polygon .resultArea h3{font-family: 'PretendardEB'; font-size: 30px;} .polygon .resultArea h3 em{font-family: 'NotoSB';} .polygon .resultArea h3 strong{ font-weight: normal; font-family: 'BkMyungjoB';} .polygon .resultArea li{ position: relative; font-family: 'PretendardB'; font-size: 20px; padding-left: 20px;} .polygon .resultArea li:before{content: '='; font-family: 'BkMyungjoB'; position: absolute; left: 0; top: 4px;} .polygon .resultArea li em{font-family: 'NotoSB';} .polygon .resultArea li strong{ font-weight: normal; font-family: 'BkMyungjoB';} .polygon .resultArea .resultBox{position: absolute; left: 0; top: 206px; background: #F8F8F8; border-radius: 24px; width: 100%; height: 196px; text-align: center;} .polygon .resultArea h4{font-family: 'PretendardB'; font-size: 20px; letter-spacing: -0.024em;} .polygon .tb2 .resultArea h4, .polygon .tb4 .resultArea h4{line-height: 27px;} .polygon .resultArea .txtList{margin-top: 18px;} .polygon .resultArea .txtList li{left: 30px; opacity: 0;} .polygon .resultArea .txtList li.on{left: 0px; opacity: 1; transition: left .6s, opacity .6s;} .polygon .resultArea .info > div{display: inline-block;} .polygon .resultArea .info .infoHeight{margin-left: 58px;} .polygon .resultArea .info .infoName{margin-bottom: 6px; font-size: 13px; font-family: 'PretendardB'; letter-spacing: -0.024em; text-align: left;} .polygon .resultArea .info .infoWidth .infoName{color: #FFC403;} .polygon .resultArea .info .infoHeight .infoName{color: #6034C7;} .polygon .resultArea .info .result{ vertical-align: middle;} .polygon .resultArea .info em{display: inline-block; font-size: 30px; line-height: 40px; vertical-align: middle; font-family: 'NotoSBNb', 'BkMyungjoB';} .polygon .resultArea .squreArea{position: absolute; left: 0; top: 424px; color: #52D5D5; opacity: 0;} .polygon .resultArea .squreArea .areaName{font-family: 'PretendardB'; font-size: 13px;} .polygon .resultArea .squreArea .res{font-family: 'NotoSBNb', 'BkMyungjoB'; font-size: 30px;} .polygon .resultArea .squreArea .res sup{font-size: 18px; font-family: 'BkMyungjoB';} .polygon .resultArea .squreArea.on{opacity: 1; transition: opacity .3s;} .polygon .sik{font-family: 'NotoSB'; font-size: 30px; letter-spacing: -0.024em;} .polygon .sik .mul{ display: inline-block; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30.672' height='30.744'%3E%3Cpath d='m27.936 0 2.736 2.808-12.668 12.6 12.6 12.528-2.74 2.808-12.528-12.6-12.532 12.6-2.8-2.808L12.672 15.48.004 2.808 2.74 0l12.596 12.744Z' data-name='패스 102069'/%3E%3C/svg%3E") no-repeat center / contain; vertical-align: top; margin: 18px 8px 0;} .polygon .sik .equl{ display: inline-block; width: 19px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37.008' height='16.416'%3E%3Cpath d='M0 0v3.024h37.008V0Zm0 13.464v2.952h37.008v-2.952Z' data-name='패스 102069'/%3E%3C/svg%3E") no-repeat center / contain; vertical-align: top; margin: 22px 8px 0;} .polygon .sik .did{ display: inline-block; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.92' height='34.38'%3E%3Cpath d='M21.12 3.6a3.521 3.521 0 0 1-1.08 2.58 3.521 3.521 0 0 1-2.58 1.08 3.424 3.424 0 0 1-2.55-1.08 3.572 3.572 0 0 1-1.05-2.58 3.472 3.472 0 0 1 1.05-2.55A3.472 3.472 0 0 1 17.46 0a3.543 3.543 0 0 1 2.61 1.05 3.472 3.472 0 0 1 1.05 2.55Zm13.8 11.94v3.18H0v-3.18Zm-13.8 15.24a3.454 3.454 0 0 1-1.08 2.52 3.521 3.521 0 0 1-2.58 1.08 3.424 3.424 0 0 1-2.55-1.08 3.5 3.5 0 0 1-1.05-2.52 3.572 3.572 0 0 1 1.05-2.58 3.424 3.424 0 0 1 2.55-1.08 3.521 3.521 0 0 1 2.58 1.08 3.521 3.521 0 0 1 1.08 2.58Z' data-name='패스 102069'/%3E%3C/svg%3E") no-repeat center / contain; vertical-align: top; margin: 16px 8px 0;} .polygon .sik .pl{ display: inline-block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg data-name='그룹 2303'%3E%3Cpath d='M0 18h40v4H0z' data-name='사각형 2924'/%3E%3Cpath d='M18 40V0h4v40z' data-name='사각형 2925'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; vertical-align: top; margin: 14px 8px 0;} .polygon .sik .gl{font-family: 'NotoSB';} .polygon .sik .fBM{display: inline-block; font-family: 'BkMyungjoB'; vertical-align: top; margin-top: 6px;} .polygon .sik .fBM sup{font-size: 18px; font-family: 'BkMyungjoB';} .polygon .resultArea .mtb.mtb1{overflow: hidden; padding-top: 88px;} .polygon .resultArea .mtb.mtb1 .info{transform: translateY(100px); margin-top: 30px;} .polygon .tb2 .resultArea .mtb.mtb1, .polygon .tb4 .resultArea .mtb.mtb1{padding-top: 71px;} .polygon .resultArea .mtb.mtb2{padding-top: 77px;} .polygon .step1 .resultArea .mtb.mtb1{padding-top: 48px; transition: padding .6s 3.8s;} .polygon .tb2 .step1 .resultArea .mtb.mtb1, .polygon .tb4 .step1 .resultArea .mtb.mtb1{padding-top: 33px;} .polygon .step1 .resultArea .mtb.mtb1 .info{transform: translateY(0); transition: transform .6s 3.8s;} .polygon .step2 .resultArea .mtb.mtb1{padding-top: 48px;} .polygon .tb2 .step2 .resultArea .mtb.mtb1, .polygon .tb4 .step2 .resultArea .mtb.mtb1{padding-top: 33px;} .polygon .step2 .resultArea .mtb.mtb1 .info{transform: translateY(0);} .polygon .popup.alertPop.on{z-index: 1;} .polygon .popup.alertPop .alertArea{margin-bottom: 110px;} .polygon .polygonArea.end .interArea{transform: translateX(0); transition: transform .6s;} .polygon .polygonArea.end .resultArea{transform: translateX(0); transition: transform .6s;} .polygon .polygonArea.end .dragArea{opacity: 0; pointer-events: none;} /* polygon tab */ .polygon .tb1 .interArea{ width: 643px;} .polygon .tb1 .polygonArea.end .gridSvg .pathArea{opacity: 0;} .polygon .tb1 .polygonArea.end .gridSvg .resultGroup{opacity: 1;} .polygon .tb1 .polygonArea.step1 .gridSvg .figure2{transition: transform 1s 2.4s linear;} .polygon .tb1 .polygonArea.step1 .gridSvg .figure2 .path1{animation: fillAni 2s 1;} .polygon .tb1 .polygonArea.step2 .gridSvg .resultGroup .path1{animation: fillAni2 2s 1; transition: fill .3s;} .polygon .tb1 .polygonArea.step3 .gridSvg .figure2{transition: transform 1s 2.4s linear;} .polygon .tb1 .polygonArea.step3 .gridSvg .figure2 .path1{animation: fillAni3 2s 1;} .polygon .tb2 .interArea{ width: 643px;} .polygon .tb2 .step1 .resultArea .mtb.mtb1{transition-delay: 6s;} .polygon .tb2 .step1 .resultArea .mtb.mtb1 .info{transition-delay: 6s;} .polygon .tb2 .polygonArea.step1 .figure1{transition: transform 1s linear;} .polygon .tb2 .polygonArea.step1 .figure1 .path1{animation: fillAni 2s 1;} .polygon .tb2 .polygonArea.step2 .gridSvg .path1{animation: fillAni2 2s 1; transition: fill .3s;} .polygon .tb2 .polygonArea.step3 .resultGroup.figure1{opacity: 0; transition: opacity .5s 2s;} .polygon .tb2 .polygonArea.step3 .resultGroup .path1{animation: fillAni3 2s 1;} .polygon .tb3 .interArea{ width: 643px;} .polygon .tb3 .polygonArea .resultGroup .path1{fill-opacity: 0.1;} .polygon .tb3 .polygonArea.step1 .pathArea .path1{animation: fillAni 2s 1;} .polygon .tb3 .polygonArea.step2 .pathArea .path1, .polygon .tb3 .polygonArea.step2 .resultGroup .path1{animation: fillAni2 2s 1;} /*.polygon .tb3 .polygonArea.step2 .resultGroup .path1{animation: fillAni2 2s 1;}*/ .polygon .tb3 .polygonArea.step3 .resultGroup .path1{animation: fillAni5 2s 1; opacity: 0; transition: opacity .5s 2s;} .polygon .tb4 .interArea{ width: 643px;} .polygon .tb4 .resultArea .highlight.ye{background-color: #fff4b7;} .polygon .tb4 .resultArea .highlight.pi{background-color: #ffdeed;} .polygon .tb4 .poly1svg .line2{stroke: #18B9EA;} .polygon .tb4 .poly1svg .line3{stroke: #FFC400;} .polygon .tb4 .info .infoWidth.bottom .infoName{color: #18B9EA;} .polygon .tb4 .polygonArea.step1 .figure1{transition: transform 1s linear;} .polygon .tb4 .polygonArea.step1 .figure1 .path1{animation: fillAni 2s 1;} .polygon .tb4 .polygonArea.step2 .gridSvg .path1{animation: fillAni2 2s 1; transition: fill .3s;} .polygon .tb4 .polygonArea.step3 .resultGroup.figure1{opacity: 0; transition: opacity .5s 2s;} .polygon .tb4 .polygonArea.step3 .resultGroup .path1{animation: fillAni3 2s 1;} .polygon .tb4 .step1 .resultArea .mtb.mtb1{transition-delay: 6s;} .polygon .tb4 .step1 .resultArea .mtb.mtb1 .info{transition-delay: 6s;} @keyframes hundle {0%{transform: rotateZ(0deg);} 25%{transform: rotateZ(-5deg);} 75%{transform: rotateZ(5deg);} 100%{transform: rotateZ(0deg);}} @keyframes fillAni{0%{fill-opacity: 0.3;} 25%{fill-opacity: 0.7} 50%{fill-opacity: 0.3;} 75%{fill-opacity: 0.7;} 100%{fill: 0.3;}} @keyframes fillAni2{0%{fill-opacity: 0.3;} 25%{fill-opacity: 0.7} 50%{fill-opacity: 0.3;} 75%{fill-opacity: 0.7;} 100%{fill: 0.3;}} @keyframes fillAni3{0%{fill-opacity: 0.3;} 25%{fill-opacity: 0.7} 50%{fill-opacity: 0.3;} 75%{fill-opacity: 0.7;} 100%{fill: 0.3;}} @keyframes fillAni4{0%{fill-opacity: 0.1;} 25%{fill-opacity: 0.2} 50%{fill-opacity: 0.1;} 75%{fill-opacity: 0.2;} 100%{fill: 0.1;}} @keyframes fillAni5{0%{fill-opacity: 0.1;} 25%{fill-opacity: 0.2} 50%{fill-opacity: 0.1;} 75%{fill-opacity: 0.2;} 100%{fill: 0.1;}} .dv_mob .polygon .resultArea li strong { margin-top:-4px; display:inline-block; vertical-align:middle; } .dv_mob .polygon .sik .mul{ margin-top:13px; } .dv_mob .polygon .sik .equl{ margin-top:17px; } .dv_mob .polygon .sik .did{ margin-top:11px; } .dv_mob .polygon .sik .pl{ margin-top:9px; } /*======================================= symmetry =======================================*/ .symmetry{text-align: center; padding-top: 144px;} .symmetry header{z-index: 2;} .symmetry .chaBox.ch1{right: 56px; bottom: 50px;} .symmetry .chaBox.ch1 .malBox{right: 150px; top: -23px;} .symmetry .chaBox.ch1.on{right: 61px; opacity: 1; transition: opacity .3s, right .3s;} .symmetry .chaBox.ch2{right: 56px; bottom: 100px;} .symmetry .chaBox.ch2 .malBox{right: 20px; top: -160px; padding: 16px 20px;} .symmetry .chaBox.ch2 .malBox p{line-height: 30px;} .symmetry .chaBox.ch2.on{right: 61px; opacity: 1; transition: opacity .3s, right .3s;} .symmetry .malBox.bot.tail{border-radius: 12px;} .symmetry .malBox.bot.tail:after{content: ''; width: 17px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.025' height='30.111'%3E%3Cpath d='M13.565 28.139a4 4 0 0 0 6.9 0L33.467 6.028A4 4 0 0 0 30.019 0H4.006A4 4 0 0 0 .558 6.028Z' data-name='패스 8006'/%3E%3C/svg%3E") no-repeat center / contain; position: absolute; right: 53px; bottom: -10px;} .symmetry .tabBtn{position: absolute; left: 0; top: 0; width: 100%; height: 80px; font-size: 16px; color: #000; font-family: 'PretendardEB'; text-align: center; display: flex; justify-content: center; align-items: center; z-index: 1;} .symmetry .tabBtn span{display: inline-block; margin: 0 20px; opacity: .3; cursor: pointer;} .symmetry .tabBtn span.on{opacity: 1;} .symmetry .syMenu{position: absolute; left: 50%; transform: translateX(-50%); bottom: -100px; white-space: nowrap; font-size: 0; transition: bottom .3s ease-in-out; z-index: 1;} .symmetry .syMenu.on{bottom: 45px;} .symmetry .syMenu.lock{pointer-events: none;} .symmetry .syMenu li{display: inline-block; cursor: pointer;} .symmetry .syMenu li img{pointer-events: none;} .symmetry .syMenu1 li{margin: 0 7px; filter: grayscale(1);} .symmetry .syMenu1 li.on{filter: grayscale(0);} .symmetry .syMenu2 .axis, .symmetry .syMenu2 .tool{display: inline-block;} .symmetry .syMenu2 h3{ display: inline-block; font-family: 'PretendardSB'; font-size: 16px; letter-spacing: -0.024em; line-height: 50px;} .symmetry .syMenu2 ul{display: inline-block; vertical-align: top; margin-left: 15px;} .symmetry .syMenu2 .tool{margin-left: 34px;} .symmetry .syMenu2 li{ position: relative; margin: 0 5px; width: 50px; height: 50px;} .symmetry .syMenu2 .axis li span{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; border: 2px solid rgba(0,0,0,.1); display: inline-block; pointer-events: none;} .symmetry .syMenu2 .axis li span:after{content: ''; width: 2px; height: 30px; background-color: #BFBFBF; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center center;} .symmetry .syMenu2 .axis li:nth-of-type(2) span:after{transform: translate(-50%, -50%) rotateZ(90deg);} .symmetry .syMenu2 .axis li:nth-of-type(3) span:after{transform: translate(-50%, -50%) rotateZ(135deg);} .symmetry .syMenu2 .axis li:nth-of-type(4) span:after{transform: translate(-50%, -50%) rotateZ(225deg);} .symmetry .syMenu2 .axis li.on span{border-color: #000;} .symmetry .syMenu2 .axis li.on span:after{background-color: #52D5D5;} .symmetry .syMenu2 .tool li:nth-of-type(1){filter: grayscale(1);} .symmetry .syMenu2 .tool li:nth-of-type(2){opacity: 0.6;} .symmetry .syMenu2 .tool li span{position: relative; display: inline-block; pointer-events: none;} .symmetry .syMenu2 .tool li.on{opacity: 1; filter: grayscale(0);} .symmetry .syMenu2 li.on:before{content: ''; width: 100%; height: 100%; border-radius: 100%; background-color: #F4F4F4; position: absolute; left: 0; top: 0;} .symmetry .defaultGuide{left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1;} .symmetry .symmetrySvgArea{position: relative; display: inline-block; width: 431px; height: 431px;} .symmetry .symmetrySvgArea.lock{pointer-events: none;} .symmetry .mouseArea{position: relative; width: 100%; height: 100%; position: absolute; left: 0; top: 0; pointer-events: none;} .symmetry .mouseArea li{position: absolute; color: #000; text-align: center; line-height: 49px;} .symmetry .symmetrySvg{width: 100%; height: 100%; cursor: pointer; position: relative;} .symmetry .symmetrySvg .grid line{stroke: #CBCBCB; stroke-width: 1; stroke-linejoin: round; stroke-dasharray: 2;} .symmetry .symmetrySvg .dotG circle{opacity: 0;} .symmetry .symmetrySvg .smtLine{stroke: #52D5D5; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;} .symmetry .symmetrySvg .dwLine{stroke: #000; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none;} .symmetry .symmetrySvg .dwDot{fill: #52D5D5;} .symmetry .symmetrySvg .redashLine{stroke: #FFC403; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5; fill: none; opacity: 0;} .symmetry .symmetrySvg .helpLine{stroke: #707070; stroke-width: 2; stroke-dasharray: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0;} .symmetry .symmetrySvg .helpLine.on{opacity: 1;} .symmetry .symmetrySvg .ansLine{stroke: #006ccb; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dashoffset: var(--dashOffset); stroke-dasharray: var(--dashArray);} .symmetry .symmetrySvg .ansLine.on{transition: stroke-dashoffset var(--time) linear;} .symmetry .symmetrySvg .defineDot{fill: #000; opacity: 0;} .symmetry .symmetrySvg .resultGroup .dwDot{opacity: 0;} .symmetry .symmetrySvgArea:before{content: ''; width: calc(100% - 40px); height: calc(100% - 40px); position: absolute; left: 20px; top: 20px;} .symmetry .symmetrySvgArea.leftA:before{background-color: rgba(191,191,191,0.1); clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);} .symmetry .symmetrySvgArea.rightA:before{background-color: rgba(191,191,191,0.1); clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);} .symmetry .symmetrySvgArea.topA:before{background-color: rgba(191,191,191,0.1); clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);} .symmetry .symmetrySvgArea.bottomA:before{background-color: rgba(191,191,191,0.1); clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);} .symmetry .symmetrySvgArea.leftBottomA:before{background-color: rgba(191,191,191,0.1); clip-path: polygon(0% 0%, 100% 0%, 100% 100%);} .symmetry .symmetrySvgArea.rightTopA:before{background-color: rgba(191,191,191,0.1); clip-path: polygon(0% 0%, 0% 100%, 100% 100%);} .symmetry .symmetrySvgArea.leftTopA:before{background-color: rgba(191,191,191,0.1);; clip-path: polygon(100% 0%, 100% 100%, 0% 100%);} .symmetry .symmetrySvgArea.rightBottomA:before{background-color: rgba(191,191,191,0.1); clip-path: polygon(0% 0%, 100% 0%, 0% 100%);} .symmetry .symmetrySvgArea .unableArea{position: absolute; width: 50%; height: 100%; pointer-events: none;} .symmetry .symmetrySvgArea.leftA .unableArea{left: 52%; top: 0; pointer-events: auto;} .symmetry .symmetrySvgArea.rightA .unableArea{left: -2%; top: 0; pointer-events: auto;} .symmetry .symmetrySvgArea.topA .unableArea{width: 100%; height: 50%; left: 50%; transform: translateX(-50%); top: 52%; pointer-events: auto;} .symmetry .symmetrySvgArea.bottomA .unableArea{width: 100%; height: 50%; left: 50%; transform: translateX(-50%); top: -2%; pointer-events: auto;} .symmetry .symmetrySvgArea.leftBottomA .unableArea{left: -178px; top: -70px; pointer-events: auto; transform-origin: 288px 270px; transform: rotateZ(135deg) translate(-60px, -110px); height: 140%; width: 63%;} .symmetry .symmetrySvgArea.rightTopA .unableArea{left: 22px; top: -50px; pointer-events: auto; transform-origin: 288px 270px; transform: rotateZ(-45deg) translate(-60px, -110px); height: 140%; width: 63%;} .symmetry .symmetrySvgArea.leftTopA .unableArea{left: -68px; top: -160px; pointer-events: auto; transform-origin: 288px 270px; transform: rotateZ(-135deg) translate(-60px, -110px); height: 140%; width: 63%;} .symmetry .symmetrySvgArea.rightBottomA .unableArea{left: -78px; top: 40px; pointer-events: auto; transform-origin: 288px 270px; transform: rotateZ(45deg) translate(-60px, -110px); height: 140%; width: 63%;} .symmetry .nextBtn{right: 50%; transform: translateX(50%);} .symmetry .step1 .leftMenu{opacity: 0; transition: opacity .3s; pointer-events: none;} .symmetry .step1 .rightArea{left: 50%; transform: translateX(-50%); transition: left .6s .4s, transform .6s .4s; pointer-events: none;} .symmetry .symmetrySvg .ansGroup *.on{transition: opacity .3s; opacity: 1;} .symmetry .symmetrySvg .resultGroup .dwDot.on{transition: opacity .3s; opacity: 1;} .symmetry .resetBtn.left{right: 140px;} /*======================================= cube =======================================*/ .cube header{z-index: 2;} .cube .introPage{position: absolute; left: 0; top: 0; z-index: -1; opacity: 0;; width: 100%; height: 100%; background-color: #fff; transition: opacity .3s, z-index .3s; font-size: 0;} .cube .introPage.on{z-index: 1; opacity: 1;} .cube .introPage section{position: relative; display: inline-block; width: 50%; height: 100%; text-align: center; vertical-align: top; cursor: pointer;} .cube .introPage section:after{content: ''; width: 1px; height: 100%; background-color: #EDEDED; position: absolute; right: 0; top: 0;} .cube .introPage section:nth-child(2):after{content: none;} .cube .introPage section .ply{display: inline-block;} .cube .introPage section:nth-of-type(1) .ply{width: 203px; height: 154px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='406.001' height='308.001'%3E%3Cg stroke='%23000' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%23bda6f2' d='m405 199-294-50.881V1l294 51.1Z' data-name='Path 88780'/%3E%3Cpath fill='rgba(104,63,199,0.8)' d='M294.644 307.001.999 255.801l109.867-107.8 294.133 51.062Z' data-name='Path 88780'/%3E%3Cpath fill='rgba(159,133,222,0.8)' d='m1.001 256 110-108.061V1.001l-110 108.22Z' data-name='Path 88780'/%3E%3Cpath fill='rgba(192,168,245,0.8)' d='m295.002 307 110-108.061V52.001l-110 108.22Z' data-name='Path 88780'/%3E%3Cpath fill='none' d='m1.002 256 110-108.061V1.001l-110 108.22Z' data-name='Path 88780'/%3E%3Cpath fill='rgba(130,96,211,0.8)' d='m295.07 306.999-294-50.881V108.999l294 51.1ZM294.645 160.001 1 108.801l109.867-107.8L405 52.063Z' data-name='Path 88780'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 256px;} .cube .introPage section:nth-of-type(1) p{margin-top: 44px;} .cube .introPage section:nth-of-type(2) .ply{width: 119px; height: 132px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='238.001' height='262.834'%3E%3Cg stroke='%231a1818' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='rgba(255,214,81,0.8)' d='M147.825 115.835 1 90.21 90.073 1.835l146.839 25.6Z' data-name='패스 102014'/%3E%3Cpath fill='rgba(255,137,0,0.8)' d='M147.913 261.834 1.088 236.021 90.161 147 237 172.783Z' data-name='패스 102019'/%3E%3Cpath fill='rgba(255,186,0,0.8)' d='M1.089 236.052V90.669L90.268 1.834v145.442Z' data-name='패스 102020'/%3E%3Cpath fill='rgba(255,232,103,0.8)' d='M147.735 261.833V116.45l89.179-88.835v145.442Z' data-name='패스 102016'/%3E%3Cpath fill='rgba(255,196,0,0.8)' d='m1.089 236.077 146.976 25.756V116.105L1.089 90.293Z' data-name='패스 102018'/%3E%3Cpath fill='rgba(255,186,0,0.8)' d='M147.914 115.834 1.089 90.021 90.162 1l146.839 25.783Z' data-name='패스 102160'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 272px;} .cube .introPage section:nth-of-type(2) p{margin-top: 50px;} .cube .introPage section p{font-family: 'PretendardB'; font-size: 30px; white-space: nowrap;} .cube .introPage section:hover .ply{animation: hundle .5s 1;} .cube .introPage section.on{width: 100%; transition: width .6s, opacity .6s .6s; opacity: 0;} .cube .introPage.sel{pointer-events: none;} .cube .introPage.sel section:not(.on){width: 0; transition: width .6s, opacity .6s; opacity: 0;} .cube .chaBox{right: 56px; bottom: 50px;} .cube .chaBox .malBox{right: 150px; top: -23px;} .cube .chaBox.on{right: 61px; opacity: 1; transition: opacity .3s, right .3s;} .cube .tabBtn{position: absolute; left: 0; top: 0; width: 100%; height: 80px; font-size: 16px; color: #000; font-family: 'PretendardEB'; text-align: center; display: flex; justify-content: center; align-items: center; z-index: 1;} .cube .tabBtn span{display: inline-block; margin: 0 20px; opacity: .3; cursor: pointer;} .cube .tabBtn span.on{opacity: 1;} .cube .tb{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; pointer-events: none; height: 640px;} .cube .tb.on{opacity: 1; z-index: 0; pointer-events: auto;} .cube .icoArea{position: absolute; left: -100px; top: 50%; transform: translateY(-50%); transition: left .5s ease-in-out;} .cube .icoArea p{margin: 26px 0; filter: grayscale(1); opacity: .2; cursor: pointer;} .cube .icoArea p.on{filter: grayscale(0); opacity: 1;} .cube .icoArea.on{left: 32px;} .cube .SpriteArea{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: -1;} .cube .SpriteArea.on{opacity: 1; z-index: 0;} .cube .Sprite{display: inline-block; opacity: 0; width: 540px; height: 540px; background-size: 3240px 3240px; background-repeat: no-repeat; background-position: 0 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin-top: -50px;} .cube .Sprite.on{opacity: 1;} .cube .tb1 .sp1{background-image: url("../images/board/cube_jik_sp1.png");} .cube .tb1 .sp2{background-image: url("../images/board/cube_jik_sp2.png");} .cube .tb1 .sp3{background-image: url("../images/board/cube_jik_sp3.png");} .cube .tb2 .sp1{background-image: url("../images/board/cube_jung_sp1.png");} .cube .tb2 .sp2{background-image: url("../images/board/cube_jung_sp2.png");} .cube .tb2 .sp3{background-image: url("../images/board/cube_jung_sp3.png");} .cube .control{position: absolute; display: inline-block; left: 50%; transform: translateX(-50%); bottom: 32px; width: 285px; height: 50px; border-radius: 25px; border: 1px solid #EDEDED; transition: width .5s ease-in-out;} .cube .control .leftCon, .cube .control .rightCon{ position: relative; display: inline-block; height: 100%; vertical-align: top;} .cube .control .leftCon{width: 192px; display: inline-flex; justify-content: space-around; padding: 0 10px;} .cube .control .leftCon:after{content: ''; width: 1px; height: 16px; background: rgba(0,0,0,.4); position: absolute; right: 0; top: 50%; transform: translateY(-50%);} .cube .control .rightCon{padding-left: 20px; user-select: none; -webkit-user-select: none;} .cube .control .rightCon .sldBox{display: inline-block; width: 0; height: 100%; overflow: hidden; transition: width .5s ease-in-out;} .cube .control .rightCon .slider{ position: relative; display: inline-block; width: 130px; height: 100%; margin: 0px 30px;} .cube .control .rightCon .slider .sldLine{width: 0; height: 1px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #BFBFBF;} .cube .control .rightCon .slider .sldLine:before{content: ''; width: 130px; height: 100%; position: absolute; left: 0; top: 0; background: #BFBFBF; opacity: .4;} .cube .control .rightCon .slider .ball{position: absolute; left: 0; top: 50%; display: inline-block; width: 18px; height: 18px; border-radius: 100%; border: 1px solid #52D5D5; transform: translate(-50%, -50%); background-color: #fff; cursor: pointer;} .cube .control .sel{font-family: 'PretendardB'; font-size: 16px; letter-spacing: -0.024em; line-height: 50px; cursor: pointer; vertical-align: top; user-select: none; -webkit-user-select: none;} .cube .control .sel.off{opacity: .2;} .cube .control .sel.on{color: #52D5D5;} .cube .control.extend{width: 455px;} .cube .control.extend .sldBox{width: 190px;} .cube .defaultGuide{left: 530px; top: 596px;} .dv_mob.ios .cube .control { bottom:52px; } .dv_mob.ios .cube .defaultGuide { top:573px; } /*======================================= prism =======================================*/ .prism header{z-index: 2;} .prism .introPage{position: absolute; left: 0; top: 0; z-index: -1; opacity: 0;; width: 100%; height: 100%; background-color: #fff; transition: opacity .3s, z-index .3s; font-size: 0;} .prism .introPage.on{z-index: 1; opacity: 1;} .prism .introPage section{position: relative; display: inline-block; width: 50%; height: 100%; text-align: center; vertical-align: top; cursor: pointer;} .prism .introPage section:after{content: ''; width: 1px; height: 100%; background-color: #EDEDED; position: absolute; right: 0; top: 0;} .prism .introPage section:nth-child(2):after{content: none;} .prism .introPage section .ply{display: inline-block;} .prism .introPage section:nth-of-type(1) .ply{width: 133px; height: 183px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='266' height='366'%3E%3Cg stroke='%23000' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%236034c7' d='M133 365 1 265h264Z' data-name='다각형 16'/%3E%3Cpath fill='rgba(130,96,211,0.8)' d='m1 1 132 99.834L132.993 365 1 265.623Z' data-name='패스 101876'/%3E%3Cpath fill='%23a98fe8' d='M133 101 1 1h264Z' data-name='패스 102025'/%3E%3Cpath fill='rgba(130,96,211,0.9)' d='m265 1-132 99.834.007 264.166L265 265.623Z' data-name='패스 102024'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 246px;} .prism .introPage section:nth-of-type(1) p{margin-top: 26px;} .prism .introPage section:nth-of-type(2) .ply{width: 191px; height: 192px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='381.069' height='383.994'%3E%3Cg stroke='%23000' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%23ffba00' d='m379.859 274.188-103.6 108.736L1.001 341.047l106.5-106.928Z' data-name='패스 101891'/%3E%3Cpath fill='rgba(255,232,103,0.9)' d='m190.504 1.113 85.752 381.883 103.813-109.113Z' data-name='패스 101892'/%3E%3Cpath fill='rgba(255,196,3,0.7)' d='m1.104 340.785 106-106.555L190.462 1Z' data-name='패스 101893'/%3E%3Cpath fill='%23ffc403' d='M276.117 382.924 1.27 341.184l189.126-340.1Z' data-name='패스 101894' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 238px;} .prism .introPage section:nth-of-type(2) p{margin-top: 26px;} .prism .introPage section p{font-family: 'PretendardB'; font-size: 30px; white-space: nowrap;} .prism .introPage section:hover .ply{animation: hundle .5s 1;} .prism .introPage section.on{width: 100%; transition: width .6s, opacity .6s .6s; opacity: 0;} .prism .introPage.sel{pointer-events: none;} .prism .introPage.sel section:not(.on){width: 0; transition: width .6s, opacity .6s; opacity: 0;} .prism .introPage .chaBox{right: 56px; bottom: 50px;} .prism .introPage .chaBox .malBox{right: 150px; top: -23px;} .prism .introPage .chaBox.on{right: 61px; opacity: 1; transition: opacity .3s, right .3s;} .prism .tabBtn{position: absolute; left: 0; top: 0; width: 100%; height: 80px; font-size: 16px; color: #000; font-family: 'PretendardEB'; text-align: center; display: flex; justify-content: center; align-items: center; z-index: 1;} .prism .tabBtn span{display: inline-block; margin: 0 20px; opacity: .3; cursor: pointer;} .prism .tabBtn span.on{opacity: 1;} .prism .tb{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;} .prism .tb.on{display: block;} .prism .icoArea{position: absolute; left: 45px; top: 50%; transform: translateY(-50%); transition: left .5s ease-in-out;} .prism .icoArea p{position: relative; padding: 13px 0; cursor: pointer;} .prism .icoArea p span{filter: grayscale(1); opacity: .2;} .prism .icoArea p.on span{filter: grayscale(0); opacity: 1;} .prism .icoArea p .defaultGuide{white-space: nowrap; top: 50%; transform: translateY(-50%); font-size: 16px; letter-spacing: -0.04em; line-height: 36px; padding: 0 14px; transition: left .3s, opacity .3s;} .prism .icoArea p:hover .defaultGuide{opacity: 1; left: 60px;} .prism .tb1 .icoArea p .defaultGuide{left: 55px;} .prism .tb1 .icoArea p.over .defaultGuide{opacity: 1; left: 60px;} .prism .tb2 .icoArea p .defaultGuide{left: 65px;} .prism .tb2 .icoArea p.over .defaultGuide{opacity: 1; left: 70px;} .prism .control{position: absolute; display: flex; justify-content: space-between; align-items: center; left: 50%; transform: translateX(-50%); bottom: 32px; width: 311px; height: 50px; border-radius: 25px; border: 1px solid #EDEDED; transition: width .5s ease-in-out; padding: 0 28px; background-color: #fff;} .prism .control .sel{font-family: 'PretendardB'; font-size: 16px; letter-spacing: -0.024em; line-height: 50px; cursor: pointer; vertical-align: top; user-select: none;} .prism .control .sel.on{color: #52D5D5;} .prism .tb2 .chaBox{right: 66px; bottom: 100px;} .prism .tb2 .chaBox.on{opacity: 1;} .prism .tb2 .chaBox .malBox{border-radius: 12px; left: -180px; top: -130px; padding: 13px 20px;} .prism .tb2 .chaBox .malBox p{line-height: 30px; text-align: center;} .prism .tb2 .chaBox .malBox:after{right: 90px; bottom: -14px; transform: rotate(45deg);} .dv_mob.ios .prism .control { bottom:52px; } /*======================================= figureDiagram =======================================*/ .figureDiagram header{z-index: 2;} .figureDiagram .introPage{position: absolute; left: 0; top: 0; z-index: -1; opacity: 0;; width: 100%; height: 100%; background-color: #fff; transition: opacity .3s, z-index .3s; font-size: 0;} .figureDiagram .introPage.on{z-index: 1; opacity: 1;} .figureDiagram .introPage section{position: relative; display: inline-block; width: 25%; height: 100%; text-align: center; vertical-align: top; cursor: pointer;} .figureDiagram .introPage section:after{content: ''; width: 1px; height: 100%; background-color: #EDEDED; position: absolute; right: 0; top: 0;} .introPage section:last-child:after{content: none;} .figureDiagram .introPage section:nth-child(4):after{content: none;} .figureDiagram .introPage section .ply{display: inline-block;} .figureDiagram .introPage section:nth-of-type(1) .ply{width: 110px; height: 151px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='266' height='366'%3E%3Cg stroke='%23000' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%236034c7' d='M133 365 1 265h264Z' data-name='다각형 16'/%3E%3Cpath fill='rgba(130,96,211,0.8)' d='m1 1 132 99.834L132.993 365 1 265.623Z' data-name='패스 101876'/%3E%3Cpath fill='%23a98fe8' d='M133 101 1 1h264Z' data-name='패스 102025'/%3E%3Cpath fill='rgba(130,96,211,0.9)' d='m265 1-132 99.834.007 264.166L265 265.623Z' data-name='패스 102024'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 256px;} .figureDiagram .introPage section:nth-of-type(1) p{margin-top: 48px;} .figureDiagram .introPage section:nth-of-type(2) .ply{width: 107px; height: 145px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='214' height='291'%3E%3Cg stroke='%23000' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%23ffc400' d='M1 218.096h212l-65.231 71.9H66.231Z' data-name='패스 101909'/%3E%3Cpath fill='%23ffe867' d='M66.5 72.775h81v217h-81z' data-name='사각형 2967' opacity='.9'/%3E%3Cpath fill='rgba(255,196,0,0.8)' d='m1 1 65.5 71.277L66.257 290 1 217.727Z' data-name='패스 101910'/%3E%3Cpath fill='rgba(255,196,0,0.8)' d='m213 1-65.5 71.277.243 217.723L213 217.727Z' data-name='패스 102026'/%3E%3Cpath fill='%23ffc400' d='M1 1h212l-65.231 71.9H66.231Z' data-name='패스 102027'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 260px;} .figureDiagram .introPage section:nth-of-type(2) p{margin-top: 48px;} .figureDiagram .introPage section:nth-of-type(3) .ply{width: 116px; height: 155px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='232' height='310'%3E%3Cg stroke='%23000' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%232adda6' d='M116.026 214 1.053 249.753 46.802 309h138.451l45.749-59.247Z' data-name='패스 102030'/%3E%3Cpath fill='rgba(0,100,69,0.8)' d='M1.053 37.126 115.369 1.613l.684 212.151L1.053 250Z' data-name='패스 101915'/%3E%3Cpath fill='rgba(73,229,181,0.8)' d='m1.052 37 46 58.922V309l-46-58.943Z' data-name='패스 101914'/%3E%3Cpath fill='%2349e5b5' d='M47.053 96H185v213H47.053Z' data-name='패스 102032' opacity='.9'/%3E%3Cpath fill='rgba(112,242,202,0.8)' d='m230.947 36.74-46 58.922V308.74l46-58.943Z' data-name='패스 102028'/%3E%3Cpath fill='rgba(42,221,166,0.9)' d='M115.973 1 1 36.753 46.749 96H185.2l45.749-59.247Z' data-name='패스 102031'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 256px;} .figureDiagram .introPage section:nth-of-type(3) p{margin-top: 44px;} .figureDiagram .introPage section:nth-of-type(4) .ply{width: 116px; height: 159px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='233' height='318'%3E%3Cg stroke='%23000' stroke-linejoin='round' stroke-width='2' data-name='그룹 4172'%3E%3Cpath fill='rgba(52,201,201,0.9)' d='M1.146 48.752 69.146 1v215.248L1.146 266Z' data-name='패스 102034'/%3E%3Cpath fill='rgba(0,201,201,0.9)' d='M69.073 1h95v216h-95Z' data-name='패스 101961'/%3E%3Cpath fill='rgba(133,242,242,0.8)' d='M231.854 48.752 163.854 1v215.248l68 49.752Z' data-name='패스 101959'/%3E%3Cpath fill='rgba(133,242,242,0.8)' d='m232 48.994-57.986 48.147L174 316.993l58-50.61Z' data-name='패스 101920'/%3E%3Cpath fill='rgba(138,232,232,0.9)' d='M59.073 97h115v220h-115Z' data-name='패스 101962'/%3E%3Cpath fill='rgba(112,230,230,0.9)' d='m164.434 1 67.42 47.911-57.714 47.91H58.713L1 48.911 68.969 1Z' data-name='패스 101917'/%3E%3Cpath fill='rgba(52,201,201,0.9)' d='m1 48.911 57.986 48.147L59 316.91 1 266.3Z' data-name='패스 102033'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 250px;} .figureDiagram .introPage section:nth-of-type(4) p{margin-top: 46px;} .figureDiagram .introPage section p{font-family: 'PretendardB'; font-size: 30px; white-space: nowrap;} .figureDiagram .introPage section:hover .ply{animation: hundle .5s 1;} .figureDiagram .introPage section.on{width: 100%; transition: width .6s, opacity .6s .6s; opacity: 0;} .figureDiagram .introPage.sel{pointer-events: none;} .figureDiagram .introPage.sel section:not(.on){width: 0; transition: width .6s, opacity .6s; opacity: 0;} .figureDiagram .chaBox{right: 56px; bottom: 50px;} .figureDiagram .chaBox .malBox{right: 150px; top: -23px;} .figureDiagram .chaBox.on{right: 61px; opacity: 1; transition: opacity .3s, right .3s;} .figureDiagram .tabBtn{position: absolute; left: 0; top: 0; width: 100%; height: 80px; font-size: 16px; color: #000; font-family: 'PretendardEB'; text-align: center; display: flex; justify-content: center; align-items: center; z-index: 1; user-select:none; -webkit-user-select:none; } .figureDiagram .tabBtn span{display: inline-block; margin: 0 20px; opacity: .3; cursor: pointer;} .figureDiagram .tabBtn span.on{opacity: 1;} .figureDiagram .tb{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;} .figureDiagram .tb.on{display: block;} .figureDiagram .icoArea{position: absolute; left: 45px; top: 50%; transform: translateY(-50%); transition: left .5s ease-in-out; user-select:none; -webkit-user-select:none;} .figureDiagram .icoArea p{margin: 20px 0; filter: grayscale(1); opacity: .2; cursor: pointer;} .figureDiagram .icoArea p.on{filter: grayscale(0); opacity: 1;} .figureDiagram .conbox{width: 100%; height: 100%;} .figureDiagram .canvasArea{width: 100%; height: 100%; user-select:none; -webkit-user-select:none;} .figureDiagram .Sprite{display: inline-block; opacity: 0; width: 540px; height: 540px; background-size: 3240px 3240px; background-repeat: no-repeat; background-position: 0 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin-top: -30px;} .figureDiagram .Sprite.on{opacity: 1;} .figureDiagram .tb1 .Sprite.sp1{background-image: url("../images/board/figureDiagram_tri_sp1.png");} .figureDiagram .tb1 .Sprite.sp2{background-image: url("../images/board/figureDiagram_tri_sp2.png");} .figureDiagram .tb1 .Sprite.sp3{background-image: url("../images/board/figureDiagram_tri_sp3.png");} .figureDiagram .tb1 .Sprite.sp4{background-image: url("../images/board/figureDiagram_tri_sp4.png");} .figureDiagram .tb2 .Sprite.sp1{background-image: url("../images/board/figureDiagram_qud_sp1.png");} .figureDiagram .tb2 .Sprite.sp2{background-image: url("../images/board/figureDiagram_qud_sp2.png");} .figureDiagram .tb2 .Sprite.sp3{background-image: url("../images/board/figureDiagram_qud_sp3.png");} .figureDiagram .tb2 .Sprite.sp4{background-image: url("../images/board/figureDiagram_qud_sp4.png");} .figureDiagram .tb3 .Sprite.sp1{background-image: url("../images/board/figureDiagram_penta_sp1.png");} .figureDiagram .tb3 .Sprite.sp2{background-image: url("../images/board/figureDiagram_penta_sp2.png");} .figureDiagram .tb3 .Sprite.sp3{background-image: url("../images/board/figureDiagram_penta_sp3.png");} .figureDiagram .tb3 .Sprite.sp4{background-image: url("../images/board/figureDiagram_penta_sp4.png");} .figureDiagram .tb4 .Sprite.sp1{background-image: url("../images/board/figureDiagram_hexa_sp1.png");} .figureDiagram .tb4 .Sprite.sp2{background-image: url("../images/board/figureDiagram_hexa_sp2.png");} .figureDiagram .tb4 .Sprite.sp3{background-image: url("../images/board/figureDiagram_hexa_sp3.png");} .figureDiagram .tb4 .Sprite.sp4{background-image: url("../images/board/figureDiagram_hexa_sp4.png");} .figureDiagram .control{position: absolute; left: 50%; transform: translateX(-50%); bottom: 48px; width: 280px; height: 18px;} .figureDiagram .control .slider{ position: relative; display: inline-block; width: 100%; height: 100%;} .figureDiagram .control .slider .sldLine{width: 0; height: 1px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #BFBFBF;} .figureDiagram .control .slider .sldLine:before{content: ''; width: 280px; height: 100%; position: absolute; left: 0; top: 0; background: #BFBFBF; opacity: .4;} .figureDiagram .control .slider .ball{position: absolute; left: 0; top: 50%; display: inline-block; width: 18px; height: 18px; border-radius: 100%; border: 1px solid #52D5D5; transform: translate(-50%, -50%); background-color: #fff; cursor: pointer;} .figureDiagram .defaultGuide{left: 328px; top: 594px;} .dv_mob.ios .figureDiagram .control { bottom:52px; } .dv_mob.ios .figureDiagram .defaultGuide { top:585px; } /*======================================= surface =======================================*/ .surface{user-select: none;} .surface header{z-index: 2;} .surface .introPage{position: absolute; left: 0; top: 0; z-index: -1; opacity: 0;; width: 100%; height: 100%; background-color: #fff; transition: opacity .3s, z-index .3s; font-size: 0;} .surface .introPage.on{z-index: 1; opacity: 1;} .surface .introPage section{position: relative; display: inline-block; width: 33.3%; height: 100%; text-align: center; vertical-align: top; cursor: pointer;} .surface .introPage section:after{content: ''; width: 1px; height: 100%; background-color: #EDEDED; position: absolute; right: 0; top: 0;} .surface .introPage section:nth-child(3):after{content: none;} .surface .introPage section .chaBox{left: 50%; transform: translateX(-50%); opacity: 1; top: 386px;} .surface .introPage .malBoxs{position: absolute;} .surface .introPage .malBoxs .malB{position: absolute; display: flex; justify-content: center; align-items: center; left: 0; top: 0; width: 100%; height: 100%; padding-bottom: 10px;} .surface .introPage .malBoxs .malB p{font-family: 'IMHB'; line-height: 25px; font-size: 18px; letter-spacing: -0.04em; transform: skew(-0.04deg);} .surface .introPage section:nth-child(1) .malBoxs{left: -14px; top: -128px;} .surface .introPage section:nth-child(2) .malBoxs{left: -30px; top: -136px;} .surface .introPage section:nth-child(3) .malBoxs{left: 0; top: -128px;} .surface .introPage section h3{margin-top: 184px;} .surface .introPage section h3{font-family: 'PretendardB'; font-size: 30px; white-space: nowrap;} .surface .introPage section:hover .ply{animation: hundle .5s 1;} .surface .introPage section.on{width: 100%; transition: width .6s, opacity .6s .6s; opacity: 0;} .surface .introPage.sel{pointer-events: none;} .surface .introPage.sel section:not(.on){width: 0; transition: width .6s, opacity .6s; opacity: 0;} .surface .tabBtn{position: absolute; left: 0; top: 0; width: 100%; height: 80px; font-size: 16px; color: #000; font-family: 'PretendardEB'; text-align: center; display: flex; justify-content: center; align-items: center; z-index: 1;} .surface .tabBtn span{display: inline-block; margin: 0 20px; opacity: .3; cursor: pointer;} .surface .tabBtn span.on{opacity: 1;} .surface .tb{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; padding-top: 80px;} .surface .tb.on{display: block;} .surface .tb .SpriteBox{position: absolute; left: 182px; top: 164px;} .surface .tb .Sprite{ width: 304px; height: 324px; background-repeat: no-repeat; background-position: left top; background-size: 1824px 1944px;} .surface .tb .conBox{padding: 240px 0px 0 640px;} .surface .tb .conBox h3{font-family: 'PretendardEB'; font-size: 30px; line-height: 35px;} .surface .tb .conBox p{font-family: 'NotoSBNb', 'PretendardB'; font-size: 20px; letter-spacing: -0.024em;} .surface .tb .conBox p.mt20{margin-top: 20px;} .surface .tb .conBox p.mt22{margin-top: 22px;} .surface .tb .conBox p em{font-family: 'NotoSB';} .surface .tb .conBox p strong{font-weight: normal; font-family: 'BkMyungjoB';} .surface .tb .conBox p sup{font-family: 'NotoSBNb'; font-size: 11px;} .surface .tb .imgBox{display: inline-block; margin-top: 34px; font-size: 0;} .surface .tb .imgBox .rectBox{display: inline-block; vertical-align: bottom;} .surface .tb .imgBox .rect{position: relative; display: inline-block; border: 1px solid #000; opacity: 0; transform: translateX(10px);} .surface .tb .imgBox .rect.orange{background-color: #FFBA00;} .surface .tb .imgBox .rect.sky{background-color: #52D5D5;} .surface .tb .imgBox .rect.mint{background-color: #1FD5B9;} .surface .tb .imgBox .rect.green{background-color: #B9DB00;} .surface .tb .imgBox .rect.blue{background-color: #2273E0;} .surface .tb .imgBox .rect.purple{background-color: #8260D3;} .surface .tb .imgBox .rect em{position: relative; display: inline-block;} .surface .tb .imgBox .rect em:after{display: inline-block; font-family: 'NotoSSBNb', 'BkMyungjoB'; font-size: 11px; position: absolute; background-color: #fff; padding: 0 2px; white-space: nowrap;} .surface .tb .imgBox .rect[data-garo="2"]{width: 50px;} .surface .tb .imgBox .rect[data-garo="2"] em:nth-child(1){width: 50px; height: 14px; background: url("../images/board/surface_garo2.svg") no-repeat center / contain; position: absolute; left: 0; top: -15px;} .surface .tb .imgBox .rect[data-garo="2"] em:nth-child(1):after{content: '2 cm'; left: 50%; transform: translateX(-50%); top: -6px;} .surface .tb .imgBox .rect[data-garo="3"]{width: 75px;} .surface .tb .imgBox .rect[data-garo="3"] em:nth-child(1){width: 75px; height: 14px; background: url("../images/board/surface_garo3.svg") no-repeat center / contain; position: absolute; left: 0; top: -15px;} .surface .tb .imgBox .rect[data-garo="3"] em:nth-child(1):after{content: '3 cm'; left: 50%; transform: translateX(-50%); top: -6px;} .surface .tb .imgBox .rect[data-sero="3"]{height: 75px;} .surface .tb .imgBox .rect[data-sero="3"] em:nth-child(2){width: 14px; height: 75px; background: url("../images/board/surface_sero3.svg") no-repeat center / contain; position: absolute; left: -15px; top: 0;} .surface .tb .imgBox .rect[data-sero="3"] em:nth-child(2):after{content: '3 cm'; top: 50%; transform: translateY(-50%); left: -16px; margin-top: -5px;} .surface .tb .imgBox .rect[data-sero="4"]{height: 100px;} .surface .tb .imgBox .rect[data-sero="4"] em:nth-child(2){width: 14px; height: 100px; background: url("../images/board/surface_sero4.svg") no-repeat center / contain; position: absolute; left: -15px; top: 0;} .surface .tb .imgBox .rect[data-sero="4"] em:nth-child(2):after{content: '4 cm'; top: 50%; transform: translateY(-50%); left: -16px; margin-top: -5px;} .surface .tb .imgBox .rect.nsero{margin-left: -1px;} .surface .tb .imgBox .rect.nsero em:nth-child(2){display: none;} .surface .tb .imgBox .rectBox .sikBox{position: relative; text-align: center; opacity: 0; transform: translateX(10px);} .surface .tb .imgBox .rectBox p{opacity: 0; transition: opacity .3s;} .surface .tb .imgBox .rectBox p.on{opacity: 1;} .surface .tb .imgBox .rectBox .bf{padding-top: 4px;} .surface .tb .imgBox .rectBox .af{padding-top: 4px; position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(10px);} .surface .tb .ansBox{text-align: right; margin-top: 22px; margin-right: 90px;} .surface .tb .ansBox .ansb{display: inline-block; text-align: left; color: #6034C7;} .surface .tb .ansBox .ansb .ansName{font-family: 'PretendardSB'; font-size: 13px;} .surface .tb .ansBox .ansb .ansNum{font-family: 'NotoSBNb', 'BkMyungjoB'; font-size: 30px; letter-spacing: -0.024em;} .surface .tb .ansBox .ansb .ansNum sup{font-size: 18px;} .surface .tb .conBox .an{opacity: 0; transform: translateX(10px);} .surface .tb .conBox.next{padding: 74px 0px 0 640px; transition: padding .5s ease-in-out;} .surface .tb .conBox.next .rect{opacity: 1; transform: translateX(0); transition: opacity .3s .6s, transform .3s .6s;} .surface .tb .conBox.next .rectBox:nth-of-type(2) .rect{transition-delay: .7s;} .surface .tb .conBox.next .rectBox:nth-of-type(3) .rect{transition-delay: .8s;} .surface .tb .conBox.next .rectBox:nth-of-type(4) .rect{transition-delay: .9s;} .surface .tb .conBox.next .rectBox:nth-of-type(5) .rect{transition-delay: 1s;} .surface .tb .conBox.next .rectBox:nth-of-type(6) .rect{transition-delay: 1.1s;} .surface .tb .conBox.next .rectBox .sikBox{opacity: 1; transform: translateX(0); transition: opacity .3s 1.4s, transform .3s 1.4s;} .surface .tb .conBox.next .rectBox:nth-of-type(2) .sikBox{transition-delay: 1.5s;} .surface .tb .conBox.next .rectBox:nth-of-type(3) .sikBox{transition-delay: 1.6s;} .surface .tb .conBox.next .rectBox:nth-of-type(4) .sikBox{transition-delay: 1.7s;} .surface .tb .conBox.next .rectBox:nth-of-type(5) .sikBox{transition-delay: 1.8s;} .surface .tb .conBox.next .rectBox:nth-of-type(6) .sikBox{transition-delay: 1.9s;} .surface .tb .conBox.next .rectBox .bf{opacity: 0; transition: opacity .5s 3.4s, transform .5s 3.4s; transform: translateY(-10px);} .surface .tb .conBox.next .rectBox .af{opacity: 1; transition: opacity .5s 3.4s, transform .5s 3.4s; transform: translateY(0px);} .surface .tb .conBox.next .ani1{transform: translateX(0); opacity: 1; transition: transform .3s 4.6s, opacity .3s 4.6s;} .surface .tb .conBox.next .ani2{transform: translateX(0); opacity: 1; transition: transform .3s 5.5s, opacity .3s 5.5s;} .surface .tb .conBox.next .ani3{transform: translateX(0); opacity: 1; transition: transform .3s 6.2s, opacity .3s 6.2s;} .surface .tb1 .conBox h3{letter-spacing: -0.024em;} .surface .tb1 .Sprite{background-image: url("../images/board/surface_sp1.png");} .surface .tb1 .imgBox .rectBox + .rectBox{margin-left: 40px;} .surface .tb2 .conBox h3{letter-spacing: -0.054em;} .surface .tb2 .Sprite{background-image: url("../images/board/surface_sp2.png");} .surface .tb2 .imgBox .rectBox + .rectBox{margin-left: 80px;} .surface .tb3 .conBox h3{letter-spacing: -0.024em;} .surface .tb3 .Sprite{background-image: url("../images/board/surface_sp3.png");} .surface .tb3 .imgBox .rectBox + .rectBox{margin-left: 80px;} .surface .control{position: absolute; left: 177px; top: 520px; width: 280px; height: 18px; opacity: 1; transition: opacity .3s;} .surface .control.off{opacity: 0; pointer-events: none; transition: opacity 0s;} .surface .control .slider{ position: relative; display: inline-block; width: 100%; height: 100%;} .surface .control .slider .sldLine{width: 0; height: 1px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #BFBFBF;} .surface .control .slider .sldLine:before{content: ''; width: 280px; height: 100%; position: absolute; left: 0; top: 0; background: #BFBFBF; opacity: .4;} .surface .control .slider .ball{position: absolute; left: 0; top: 50%; display: inline-block; width: 18px; height: 18px; border-radius: 100%; border: 1px solid #52D5D5; transform: translate(-50%, -50%); background-color: #fff; cursor: pointer;} /*======================================= thrFig =======================================*/ .thrFig{user-select: none;} .thrFig header{z-index: 2;} .thrFig .introPage{position: absolute; left: 0; top: 0; z-index: -1; opacity: 0;; width: 100%; height: 100%; background-color: #fff; transition: opacity .3s, z-index .3s; font-size: 0;} .thrFig .introPage.on{z-index: 1; opacity: 1;} .thrFig .introPage section{position: relative; display: inline-block; width: 33.3%; height: 100%; text-align: center; vertical-align: top; cursor: pointer;} .thrFig .introPage section:after{content: ''; width: 1px; height: 100%; background-color: #EDEDED; position: absolute; right: 0; top: 0;} .thrFig .introPage section:nth-child(3):after{content: none;} .thrFig .introPage section .ply{display: inline-block;} .thrFig .introPage section:nth-of-type(1) .ply{width: 150px; height: 165px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='329'%3E%3Cg stroke='%23000' stroke-width='2' data-name='그룹 4098'%3E%3Cg fill='%238260d3' data-name='사각형 2944'%3E%3Cpath stroke='none' d='M0 55h300v219H0z'/%3E%3Cpath fill='none' d='M1 56h298v217H1z'/%3E%3C/g%3E%3Cg fill='%23683fc7' data-name='타원 312' transform='translate(0 219)'%3E%3Cellipse cx='150' cy='55' stroke='none' rx='150' ry='55'/%3E%3Cellipse cx='150' cy='55' fill='none' rx='149' ry='54'/%3E%3C/g%3E%3Cg fill='%23aa8fe8' data-name='타원 311'%3E%3Cellipse cx='150' cy='55' stroke='none' rx='150' ry='55'/%3E%3Cellipse cx='150' cy='55' fill='none' rx='149' ry='54'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 264px;} .thrFig .introPage section:nth-of-type(1) p{margin-top: 24px;} .thrFig .introPage section:nth-of-type(2) .ply{width: 150px; height: 165px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='329'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' stroke='%23707070' d='M1134 528h292v266h-292z' data-name='사각형 3327'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' data-name='마스크 그룹 1' transform='translate(-1130 -528)'%3E%3Cg fill='%23ffd652' data-name='다각형 4'%3E%3Cpath d='M1428.297 796h-296.594L1280 530.053 1428.297 796Z'/%3E%3Cpath fill='%23000' d='M1280 532.107 1133.405 795h293.19L1280 532.107m0-4.107 150 269h-300l150-269Z'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23ffc403' stroke='%23000' stroke-width='2' data-name='타원 313' transform='translate(0 219)'%3E%3Cellipse cx='150' cy='55' stroke='none' rx='150' ry='55'/%3E%3Cellipse cx='150' cy='55' fill='none' rx='149' ry='54'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 264px;} .thrFig .introPage section:nth-of-type(2) p{margin-top: 24px;} .thrFig .introPage section:nth-of-type(3) .ply{width: 156px; height: 156px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='312' height='312'%3E%3Cdefs%3E%3CradialGradient id='a' cx='.5' cy='.5' r='.5' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%2389e6e6'/%3E%3Cstop offset='1' stop-color='%2352d5d5'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='2' data-name='그룹 4181'%3E%3Cg fill='url(%23a)' data-name='타원 314'%3E%3Ccircle cx='156' cy='156' r='156' stroke='none'/%3E%3Ccircle cx='156' cy='156' r='155' fill='none'/%3E%3C/g%3E%3Cg fill='none' data-name='타원 315' opacity='.498' transform='translate(0 109)'%3E%3Cellipse cx='156' cy='52' stroke='none' rx='156' ry='52'/%3E%3Cellipse cx='156' cy='52' rx='155' ry='51'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; margin-top: 272px;} .thrFig .introPage section:nth-of-type(3) p{margin-top: 26px;} .thrFig .introPage section p{font-family: 'PretendardB'; font-size: 30px; white-space: nowrap;} .thrFig .introPage section:hover .ply{animation: hundle .5s 1;} .thrFig .introPage section.on{width: 100%; transition: width .6s, opacity .6s .6s; opacity: 0;} .thrFig .introPage.sel{pointer-events: none;} .thrFig .introPage.sel section:not(.on){width: 0; transition: width .6s, opacity .6s; opacity: 0;} .thrFig .chaBox{right: 56px; bottom: 50px;} .thrFig .chaBox .malBox{right: 150px; top: -23px;} .thrFig .chaBox.on{right: 61px; opacity: 1; transition: opacity .3s, right .3s;} .thrFig .tabBtn{position: absolute; left: 0; top: 0; width: 100%; height: 80px; font-size: 16px; color: #000; font-family: 'PretendardEB'; text-align: center; display: flex; justify-content: center; align-items: center; z-index: 1;} .thrFig .tabBtn span{display: inline-block; margin: 0 20px; opacity: .3; cursor: pointer;} .thrFig .tabBtn span.on{opacity: 1;} .thrFig .tb{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;} .thrFig .tb.on{display: block;} .thrFig .icoArea{position: absolute; left: 45px; top: 50%; transform: translateY(-50%); transition: left .5s ease-in-out;} .thrFig .icoArea.on{left: 45px;} .thrFig .icoArea p{margin: 10px 0; filter: grayscale(1); opacity: .2; cursor: pointer;} .thrFig .icoArea p.on{filter: grayscale(0); opacity: 1;} .thrFig .conbox{width: 100%; height: 100%;} .thrFig .canvasArea{width: 100%; height: 100%;} .thrFig .extendArea{position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; display: none;} .thrFig .extendList{position: absolute; left: -200px; top: 50%; transform: translateY(-50%); transition: left .5s ease-in-out;} .thrFig .extendList p{margin: 26px 0; filter: grayscale(1); opacity: .2; cursor: pointer;} .thrFig .extendList p.on{filter: grayscale(0); opacity: 1;} .thrFig .canvasArea.off{display: none;} .thrFig .canvasArea.off + .extendArea{display: block; pointer-events: auto;} .thrFig .canvasArea.off ~ .icoArea{left: -200px;} .thrFig .canvasArea.off ~ .extendList{left: 45px;} .thrFig .tb1 .control{position: absolute; display: inline-block; left: 50%; transform: translateX(-50%); bottom: 32px; width: 285px; height: 50px; border-radius: 25px; border: 1px solid #EDEDED; transition: width .5s ease-in-out; background: #fff;} .thrFig .tb1 .control .leftCon, .thrFig .tb1 .control .rightCon{ position: relative; display: inline-block; height: 100%; vertical-align: top;} .thrFig .tb1 .control .leftCon{width: 192px; display: inline-flex; justify-content: space-around; padding: 0 10px;} .thrFig .tb1 .control .leftCon:after{content: ''; width: 1px; height: 16px; background: rgba(0,0,0,.4); position: absolute; right: 0; top: 50%; transform: translateY(-50%);} .thrFig .tb1 .control .rightCon{padding-left: 20px;} .thrFig .tb1 .control .rightCon .sldBox{display: inline-block; width: 0; height: 100%; overflow: hidden; transition: width .5s ease-in-out;} .thrFig .tb1 .control .rightCon .slider{ position: relative; display: inline-block; width: 130px; height: 100%; margin: 0px 30px;} .thrFig .tb1 .control .rightCon .slider .sldLine{width: 0; height: 1px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #BFBFBF;} .thrFig .tb1 .control .rightCon .slider .sldLine:before{content: ''; width: 130px; height: 100%; position: absolute; left: 0; top: 0; background: #BFBFBF; opacity: .4;} .thrFig .tb1 .control .rightCon .slider .ball{position: absolute; left: 0; top: 50%; display: inline-block; width: 18px; height: 18px; border-radius: 100%; border: 1px solid #52D5D5; transform: translate(-50%, -50%); background-color: #fff; cursor: pointer;} .thrFig .tb1 .control .sel{font-family: 'PretendardB'; font-size: 16px; letter-spacing: -0.024em; line-height: 50px; cursor: pointer; vertical-align: top; user-select: none;} .thrFig .tb1 .control .sel.off{opacity: .2;} .thrFig .tb1 .control .sel.on{color: #52D5D5;} .thrFig .tb1 .control.extend{width: 455px;} .thrFig .tb1 .control.extend .sldBox{width: 190px;} .thrFig .tb1 .Sprite{display: inline-block; width: 540px; height: 540px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; background-position: left top; background-repeat: no-repeat; background-size: 3240px 3240px; margin-top: -50px;} .thrFig .tb1 .Sprite.on{opacity: 1;} .thrFig .tb1 .Sprite.sp1{background-image: url("../images/board/thrFig_extend1.png");} .thrFig .tb1 .Sprite.sp2{background-image: url("../images/board/thrFig_extend2.png");} .thrFig .tb1 .Sprite.sp3{background-image: url("../images/board/thrFig_extend3.png");} .thrFig .tb1 .defaultGuide{left: 530px; top: 598px;} .thrFig .tb2 .icoArea p{margin: 20px 0;} .thrFig .tb2 .control{position: absolute; display: flex; justify-content: space-between; padding: 0 24px; left: 50%; transform: translateX(-50%); bottom: 32px; width: 327px; height: 50px; border-radius: 25px; border: 1px solid #EDEDED; transition: width .5s ease-in-out; background: #fff;} .thrFig .tb2 .control .sel{font-family: 'PretendardB'; font-size: 16px; letter-spacing: -0.024em; line-height: 50px; cursor: pointer; vertical-align: top; user-select: none;} .thrFig .tb2 .control .sel.on{color: #52D5D5;} .thrFig .tb3 .canvasArea{background: url("../images/board/thrFig_sphere_bg.png") no-repeat center / 402px 402px;} .thrFig .tb3 .control{position: absolute; display: flex; justify-content: space-between; padding: 0 24px; left: 50%; transform: translateX(-50%); bottom: 32px; width: 212px; height: 50px; border-radius: 25px; border: 1px solid #EDEDED; transition: width .5s ease-in-out; background: #fff;} .thrFig .tb3 .control .sel{font-family: 'PretendardB'; font-size: 16px; letter-spacing: -0.024em; line-height: 50px; cursor: pointer; vertical-align: top; user-select: none;} .thrFig .tb3 .control .sel.on{color: #52D5D5;} .dv_mob.ios .thrFig .tb .control { bottom:52px } .dv_mob.ios .thrFig .tb1 .defaultGuide { top:559px; }