/*.introPage .mainTitle { width: 381px; height: 77px; }
.introPage .mainTitle img { width: 100%; }*/
.activityPage { position: relative; width: 100%; height: 100%; background-image: url("../images/activityBg.png"); }

.activityPage img { width: 100%;}
.activityPage .img { width: 450px; height: 170px; position: absolute; top: 450px; left: 39px; z-index: 1;}

.svgArea.svg1 { position: absolute; top: 370px; left: 81px; width: 248px; height: 126px;}
.svgArea.svg2 { position: absolute; top: 497px; left: 489px; width: 86px; height: 123px;}
.svgArea svg { width:100%; height: 100%;}

.popupWrap { display: none; position: fixed; top:0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 3}
.popupWrap .popup { position: absolute; top: 70px; left: 70px; width: 1140px; height: 582px;border-radius: 20px;border: 1px solid #C7C7C7;background: #FFF; display: flex;}
.popupWrap .closeBtn { position: absolute; top: 70px; right: 35px; cursor: pointer;}
.popupWrap .closeBtn svg { width: 23px; height: 23px;}

.popupWrap .popup .popSvgArea { position: relative; width: 772px; text-align: center;}
.popupWrap .popup .popSvgArea .title { position: relative; display: inline-block; padding: 12px 27px 12px 98px; box-sizing: border-box; border-radius: 40px; background-color: #F9F0D8; font-size: 18px; color: #000; font-family: "GodoM"; margin-top: 33px;}
.popupWrap .popup .popSvgArea .title .titImg { position: absolute; bottom: 0; left: 30px ;display: block; width: 59px; height: 63px;}
.popupWrap .popup .popSvgArea .title .tit { display: none;}

.popupWrap .popup .selectArea { width: 368px; background-color: #ECF0F5; border-radius: 0 20px 20px 0 ; padding: 28px 47px; box-sizing: border-box;}

.popupWrap .popSvg { position: absolute; }
.popupWrap .popSvg[data-num='1']{top: 142px;left: 16px; width: 738px; height: 379px;}
.popupWrap .popSvg[data-num='2']{top: 97px;left: 232px; width: 324px; height: 467px;}
/*.popupWrap .popSvg.svg1 { top: 142px;left: 16px; width: 738px; height: 379px;}
.popupWrap .popSvg.svg2 { top: 97px;left: 232px; width: 324px; height: 467px;}*/
.popupWrap .popSvg svg { width: 100%; height: 100%}

.popupWrap .popup .selectTit { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 34px;}
.popupWrap .popup .selectTit .titImg { width: 68px; height: 94px; }
.popupWrap .popup .selectTit .text { font-size: 26px; color: #000; font-family: "GodoB"; line-height: 36px;}
.popupWrap .popup .selectTit .text span{ color: #5387FF}

.popupWrap .popup .selectTextArea { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 40px;}
.popupWrap .popup .selectTextArea .selectText {position: relative; display: flex; justify-content: center; align-items: center;  width: 128px; padding: 14px 20px; box-sizing: border-box; font-size: 18px; color: #2E2E2E; font-family: "GodoB"; border-radius: 10px; white-space: nowrap; border: 1px solid #5b5b5b; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0) ; outline: none;}
.popupWrap .popup .selectTextArea .selectText.white { color: #fff;}

.popupWrap .popup .selectTextArea .selectText.on { outline: 4px solid #5387FF;}

.popupWrap .popup .selectTextArea .selectText.selectText1{ background-color: #694D49;}
.popupWrap .popup .selectTextArea .selectText.selectText2{ background-color: #575953;}
.popupWrap .popup .selectTextArea .selectText.selectText3{ background-color: #E27D19;}
.popupWrap .popup .selectTextArea .selectText.selectText4{ background-color: #5C97D1;}
.popupWrap .popup .selectTextArea .selectText.selectText5{ background-color: #266B61;}
.popupWrap .popup .selectTextArea .selectText.selectText6{ background-color: #BE1038;}
.popupWrap .popup .selectTextArea .selectText.selectText7{ background-color: #B7B6B0;}
.popupWrap .popup .selectTextArea .selectText.selectText8{ background-color: #FFC86A;}
.popupWrap .popup .selectTextArea .selectText.selectText9{ background-color: #ECDCC4;}
.popupWrap .popup .selectTextArea .selectText.selectText10{ background-color: #EBECEF;}

.popupWrap .popup .btnArea { display: flex; justify-content: center; gap: 11px; align-items: center;}
.popupWrap .popup .btnArea > div { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0) ; outline: none; pointer-events: none;}
.popupWrap .popup .btnArea > div.on { pointer-events: auto;}
.popupWrap .popup .btnArea .btn { width: 51px; height: 51px; }
.popupWrap .popup .btnArea .btn img { display: none;}
.popupWrap .popup .btnArea .btn img.default { display: block;}
.popupWrap .popup .btnArea .btn.on .default { display: none;}
.popupWrap .popup .btnArea .btn.on .on { display: block;}
.popupWrap .popup .btnArea .btn.on:hover .on { display: none;}
.popupWrap .popup .btnArea .btn.on:hover .hover { display: block;}
.popupWrap .popup .btnArea .completeBtn { padding: 12px 32px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; border-radius:100px; border: 1px solid #7B7B7B; background-color: #959595; font-size:24px; color: #fff;  font-family: "GodoB"; }
.popupWrap .popup .btnArea .completeBtn.on {background-color: #5387FF; border-color: #1A50CD; }
.popupWrap .popup .btnArea .completeBtn.on:hover {background-color: #3169EB;}

.highlightNon{  -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0) ; outline: none;}

.cl_btnReset.text{pointer-events: none;}
.cl_btnReset.text svg path { pointer-events: none!important;;}
.cl_btnReset.text.on { background-color: #5387FF;pointer-events: auto;}
.cl_btnReset.text.on:hover { background-color: #3169EB}