@charset "utf-8"; @media screen and (min-width: 1024px) { .pc-view{display:block;} .mo-view{display:none;} } @media screen and (max-width: 1024px) { .pc-view{display: none;} .mo-view{display:block;} } .jc-bs3-container {width:50%} .jconfirm .jconfirm-holder {padding-left:33%} @media (max-width : 540px) { .jc-bs3-container {width:95%; margin: 0 auto;} .jconfirm .jconfirm-holder {padding-left:4%} } :root { --main-color: #2097FF; /* 변경 대상 */ } /**/ #wrap{position:relative;margin: 0 auto;width: 1220px;max-width: 100%;min-height: calc(var(--vh, 1vh) * 100);background: #ffffff;display: flex;flex-direction: column;-ms-overflow-style: none;} #wrap::-webkit-scrollbar {display: none;} #wrap .btn{position:relative;text-align: center;} #wrap .btn_01{background: var(--main-color) !important;color: #ffffff !important;border-color: var(--main-color)!important;} #wrap .btn_02{background: #FFFFFF !important;color: var(--main-color) !important;border-color: var(--main-color)!important;} #wrap .btn_03{background: #ffffff !important;color: #333333 !important;border-color: #333333 !important;} #wrap .btn_04{background: #ffffff !important;color: #808080 !important;border-color: #808080!important;} #wrap .btn_05{background: #FFFFFF !important;color: var(--main-color) !important;border-color: var(--main-color)!important;} #wrap .btn_06{background: #FFFFFF !important;color: var(--main-color) !important;border: 2px solid var(--main-color) !important;} #wrap .btn_07{background: #FFCAF8 !important;color: #FFFFFF !important;border: 2px solid #FFCAF8 !important;} #wrap .btn_08{background: #FA897B !important;color: #FFFFFF !important;border: 1px solid #FA897B !important;} #wrap .btn_09{background: #FFFFFF !important;color: #333333 !important;border: 1px solid #EBEBEB !important;} /* #wrap .btn_10{background: #F1F1F1 !important;color: #808080 !important; cursor: default;pointer-events: none;} */ #wrap .btn_kakao{background: #fee500 !important;color: #333333 !important;border-color: #fee500 !important;} .btn_10{width: 100%;padding: 0 15px;height: 50px;line-height: 50px;text-align: center;margin-top: 10px;margin-left: 0;background-color: #ff8484;} input:-webkit-autofill{-webkit-box-shadow: 0 0 0 1000px white inset; box-shadow: 0 0 0 1000px white inset;} .onchk{background:#f1f1f1 !important; padding-top:3px; padding-bottom:3px; border-radius: 5px;} .stag{display: inline-block; margin:0px 5px 5px 0px; padding: 3px 5px; border-radius: 3px; background: #dde6ef; color: #333; font-size: 12px;} .btag{display: inline-block; padding: 3px 8px; border-radius: 10px; background: #f1f1f1; color: #808080; font-size: 12px; line-height:20px; margin-left: 10px; width: max-content; font-weight: 300; flex-shrink: 0;} /* 토스트 메시지 */ .toast-message {width: max-content; position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(213, 233, 251, 0.85);color: var(--main-color);padding: 16px 36px;border-radius: 120px;display: flex;align-items: center;gap: 12px;font-size: 15px;font-weight: 500;box-shadow:0 12px 24px rgba(32, 151, 255, 0.2),0 4px 8px rgba(32, 151, 255, 0.1);opacity: 0;transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);z-index: 9999;pointer-events: none;} .toast-message::before {content: '✓';background: var(--main-color);color: #fff;width: 24px;height: 24px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 16px;animation: simpleScale 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;} @keyframes simpleScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } } .toast-message.show {opacity: 1;transform: translate(-50%, -50%);} .toast-message:hover {transform: translate(-50%, -50%) translateY(-2px);box-shadow: 0 16px 32px rgba(32, 151, 255, 0.25),0 6px 12px rgba(32, 151, 255, 0.15);} /**/ #header{position: fixed;top: 0;left: 50%;width: 1200px;max-width: 100%;background: #ffffff;z-index: 901;transform: translateX(-50%);flex-shrink:0} #header.fixed{z-index:899;} #header .heading{position:relative;padding: 10px 30px;display: flex;height:50px;align-items:center;flex-shrink: 0;background: #ffffff;} #header .heading .back{position:absolute;top:50%;left:0;width: 30px;height: 30px;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;} #header .heading .back a{display:flex;width: 25px;height: 25px;background:url("../img/icon_back.png") no-repeat 50% 50% / contain;text-indent: -9999em;overflow: hidden;vertical-align: top;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #header .heading .input{display:flex;width:100%;height:30px;border-radius:15px;padding:5px;line-height:20px;border:1px solid var(--main-color);} #header .heading .input .box{display:flex;width: 100%;} #header .heading .input input{flex:1;padding: 2px 8px;font-size: 12px;} #header .heading .input button{display:flex;align-items:center;justify-content:center;width: 50px;height: 20px;border-radius: 20px;background: var(--main-color);text-indent: -9999em;} #header .heading .input button i{width:15px;height:15px;background:url("../img/icon_search_zoom.png") no-repeat 50% 50% / contain} #header .heading .form{display:flex;width:100%;height: 40px;border-radius: 40px;padding:5px;line-height:20px;border: 1px solid #e0e0e0;} #header .heading .form input{flex:1;padding: 2px 8px !important;font-size: 12px;height: 30px !important;background: transparent;} #header .heading .form button{display:flex;align-items:center;justify-content:center;width: 50px;height: 30px;border-radius: 20px;background: var(--main-color);font-size: 13px;color: #fff;} #header .heading .form button i{width:15px;height:15px;background:url("../img/icon_search_zoom.png") no-repeat 50% 50% / contain} #header .heading .title{line-height: 20px;font-size: 16px;font-weight: 300;color: #808080; margin: 0 !important;border: 0 !important;} #header .heading .button{margin-left:auto;display:flex;align-items:center;} #header .heading .button .btn{position:relative;display: flex;align-items: center;justify-content: center;border-radius: 20px;min-width: 50px;padding: 0 10px;background: #00c2097FFfff;height: 20px;font-size: 12px;color: #fff;font-weight: 500;text-align: center;} #header .header{display:flex;align-items:center;border-bottom: 1px solid #e0e0e0;height: 50px;margin: 0 30px;background: #ffffff;flex-shrink: 0;} #header .header .user{margin-right:auto;margin-left: 20px;line-height: 18px;font-size: 12px;font-weight: 700;color: #989898;} #header .header .user strong{display: flex;line-height: 20px;font-size: 16px;font-weight: bold;color: #333333;} #header .header .tool{padding: 5px;margin-top: 200px;} #header .header .tool ul{display:flex;} #header .header .tool li{} #header .header .tool li a{display:flex;width:15px;height:15px;align-items: center;justify-content: center;} #header .header .tool li img{display:block;width:auto;height: 25px;} /*#header .header .tool li img{display:block;width:auto;height: 20px;max-width: 100%;height: auto;}*/ #header .header .tool li + li{margin-left: 8px;} #header .header .my{margin-left:10px;margin-right: -10px;} #header .header .my a{display:flex;width:35px;height:35px;border-radius:35px;overflow:hidden;border: 1px solid rgba(0,0,0,0.05);} #header .header .my img{display:block;width: 100%;height:100%;object-fit: cover;} #headerSpace{flex-shrink:0} /**/ #appbar{position:fixed;bottom:0;left:0;width:100%;z-index: 1002;transition:all 0.5s;background: #ffffff;padding: 0 30px;} #appbar .appbar{background: #ffffff;margin: 0 auto;width: 1220px;max-width: 100%;border-top: 1px solid rgb(33 33 33 / 8%);} #appbar .appbar ul{display:flex;align-items:center;justify-content: space-between;height: 80px;padding: 0 20px;} #appbar .appbar li{width: auto;} @media (min-width: 768px) { #appbar .appbar ul { display: flex; align-items: center; justify-content: space-around; height: 80px; padding: 0 20px; } #appbar .appbar li { width: auto; flex-grow: 1; text-align: center; } } #appbar .appbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;} #appbar .appbar i{width:40px;height:40px;flex-shrink:0;} #appbar .appbar p{line-height:12px;font-size:12px;color:#333;margin-top: 4px;} #appbar .appbar li.app_home i{background:url("/img/app_home2.png") no-repeat 50% 50% / contain} #appbar .appbar li.app_study i{background:url("/img/app_study2.png") no-repeat 50% 50% / contain} #appbar .appbar li.app_note i{background:url("/img/app_note2.png") no-repeat 50% 50% / contain} #appbar .appbar li.app_outcome i{background:url("/img/app_outcome2.png") no-repeat 50% 50% / contain} #appbar .appbar li.app_community i{background:url("/img/app_community2.png") no-repeat 50% 50% / contain} #appbar .appbar li.app_home i.on{background:url("/img/app_home1.png") no-repeat 50% 50% / contain} #appbar .appbar li.app_study i.on{background:url("/img/app_study1.png") no-repeat 50% 50% / contain} #appbar .appbar li.app_note i.on{background:url("/img/app_note1.png") no-repeat 50% 50% / contain} #appbar .appbar li.app_outcome i.on{background:url("/img/app_outcome1.png") no-repeat 50% 50% / contain} #appbar .appbar li.app_community i.on{background:url("/img/app_community1.png") no-repeat 50% 50% / contain} #appbarSpace{position: relative;width: 100%;height:80px;flex-shrink: 0;pointer-events: none;} /**/ #splash{position:relative;width: 100%;height: calc(var(--vh, 1vh) * 100);display:flex;flex-direction:column;align-items: center;justify-content: center;text-align: center;} #splash .logo{position:relative;z-index:2;margin: 0 auto;width: 100px;transform:scale(0);transition:all 0.5s} #splash .logo img{display: block;width: auto;height: auto;max-width: 100%;} #splash .text{margin-top:20px;transform:translateY(50px);opacity:0;transition:all 0.5s;} #splash .text p{line-height:30px;font-size:20px;text-transform: uppercase;} #splash .text strong{font-weight:bold;} #splash.animate{} #splash.animate .logo{transform:scale(1)} #splash.animate .text{transform:translateY(0);opacity:1;transition-delay:0.5s} /**/ #start{position: relative;flex: 1;padding:56px 30px;display: flex;flex-direction: column;} #start .text{margin-top: 90px;} /* 모바일 화면 */ @media screen and (max-width: 767px) { #start .text img{width:300px;margin:0 auto;} #start .text .main_mission {font-size: 26px;line-height: 140%;color:#333;margin-top: 10px;} #start .text .sub_mission {font-size:20x;line-height:120%;color:#333;margin-top: 5px;} } /* 태블릿 화면 */ @media screen and (min-width: 768px) and (max-width: 1023px) { #start .text img{width:350px;display: flex;align-items: center;justify-content:Center;margin:0 auto;} #start .text .main_mission {font-size: 34px;line-height: 145%;color:#333;margin-top: 15px;text-align: center;} #start .text .sub_mission {font-size:22px;line-height:130%;color:#333;text-align: center;margin-top:10px;} } /* PC 화면 */ @media screen and (min-width: 1024px) { #start .text img{width:400px;display: flex;align-items: center;justify-content:Center;margin:0 auto;} #start .text .main_mission {font-size: 40px;line-height: 50px;text-align: center;margin-top: 20px;} #start .text .sub_mission {line-height:36px;font-size:24px;color:#333;text-align: center;margin-top:4px;} } #start .text strong{font-weight:700;} #start .slider{margin-bottom: 50px;width: 100%;overflow: hidden;} #start .slider .swiper-slide{display: flex;flex-direction: column;align-items: center;justify-content: center;} #start .slider .swiper-slide .img{width:100%;display: flex;align-items: center;justify-content:Center;margin-bottom: 20px;} #start .slider .swiper-slide .img img{display:block;width:auto;max-width:100%;height:auto} #start .slider .swiper-slide .con{display: flex;align-items: center;} #start .slider .swiper-slide .ico{width: 40px;height: 40px;flex-shrink: 0;margin-right: 10px;display: flex;align-items: center;justify-content: center;} #start .slider .swiper-slide .ico img{display:block;width:auto;max-width:100%;height:auto} #start .slider .swiper-slide .cnt{flex: 1;display: flex;flex-direction: column;} #start .slider .swiper-slide .tit{font-size: 20px;font-weight: bold;} #start .slider .swiper-slide .txt{font-size: 16px;font-weight: 400;color: #808080;} #start .slider .swiper-dots{margin-top: 35px;display: flex;align-items: center;justify-content: center;} #start .slider .swiper-dots span{width: 5px;height: 5px;margin: 0 2.5px;border-radius: 5px;background: #979797;opacity: 1;text-indent: -9999em;overflow: hidden;} #start .slider .swiper-dots span.swiper-pagination-bullet-active{background: #333;} #start .button{flex-shrink:0;display: flex;align-items: center;justify-content: center;margin-top: auto;flex-direction: column;gap: 6px;margin: auto auto 0;width: 230px;max-width: 100%;} #start .button .btn{position: relative;display: flex;align-items: center;justify-content: flex-start;width: 100%;height: 50px;border-radius: 16px;font-size: 16px;gap: 10px;border: 1px solid transparent;padding: 8px 26px;} #start .button .btn_kakao{font-weight:500;background: #FEE500; } #start .button .btn_apple{font-weight:600;background: #050708;color: #fff;} #start .button .btn_naver{font-weight:600;background: #00C300;color: #fff;} #start .button .btn_google{font-weight:600;background: #fff;border: 1px solid #333;} #start .button .btn_facebook{font-weight:600;background: #1877F2;color: #fff;} #start .button .btn_login{font-weight:400;color:#979797} #start .customer{margin: 30px 0 0 0;text-align: center;} #start .customer a{display: inline-flex;align-items: center;justify-content: center;font-size: 14px;text-decoration: underline;color: #333;} #start .apple-signin-button {width: 300px;height: 45px;margin-top: 12px;} /**/ .welcomeHidden {opacity: 0;} .welcomeVisible {animation: fadein 1s;} @keyframes fadein {from {opacity: 0;} to {opacity: 1;}} @-moz-keyframes fadein {from {opacity: 0;}to {opacity: 1;}} @-webkit-keyframes fadein {from {opacity: 0;}to {opacity: 1;}} @-o-keyframes fadein {from {opacity: 0;}to {opacity: 1;}} /**/ #phone{padding: 60px 30px 50px;display: flex;flex-direction: column;flex: 1;} #phone .title{padding: 0 30px;text-align: left;line-height: 32px;font-size: 20px;color: #333;} #phone .input{position:relative;margin: 110px auto 30px;display: flex;flex-direction: column;width:300px;} #phone .input input{height: 40px;display: flex;align-items: center;justify-content: center;padding: 0 20px 10px;font-size: 20px; font-weight: 700; color: #333; border-bottom: 1px solid #808080;text-align: center;background: transparent} #phone .input p{margin-top: 10px;line-height: 20px;font-size: 12px;color: #979797;text-align: center;} #phone .input .terms{ position: relative; display: flex;align-items: center;justify-content: center;gap: 5px;font-size: 12px;color: #808080;margin-top: 20px; height: 25px;} #phone .input .terms a{color: #333; font-weight: 600; background-color: #f1f1f1; padding: 5px 10px; border-radius: 5px;} #phone .input .terms input[type="checkbox"] { position: absolute; width: 25px; height: 25px; left: 0; border: none; z-index: 1; opacity: 0; cursor: pointer; } #phone .input .terms input[type="checkbox"]:checked ~ .checkbox_mark { background-color: var(--main-color); } #phone .input .terms .checkbox_mark { width: 25px; height: 25px; top: 0; left: 0; position: absolute; background-color: #eeeeee; border-radius: 4px; } #phone .input .terms .checkbox_mark::after { display: none; content: ""; position: relative; } #phone .input .terms input[type="checkbox"]:checked ~ .checkbox_mark::after { width: 4px; height: 10px; top: 5px; left: 10px; border-style: solid; border-color: white; border-width: 0 3px 3px 0; display: block; transform: rotate(45deg); } #phone .button{flex-shrink:0;display: flex;align-items: center;justify-content: flex-end;margin-top: auto;} #phone .button .btn{display: flex;align-items: center;justify-content: center;text-align: center;width: 200px;height: 40px;border-radius: 5px;font-size: 16px;border: 1px solid transparent;font-weight: 600;color: #fff;} #phone .button .btn + .btn{margin-left:6px;} #phone .modal-container { display: flex;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;} #phone .modal-container .modal-wrapper { border-radius: 5px;display: flex;flex-direction: column;background: #ffffff;padding: 30px;width: 300px;overflow: hidden;margin: 0 auto;max-height: 80%;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);} #phone .modal-container .modal-wrapper .btn .modalClose { font-size: 12px; color: #808080; text-decoration: underline; background: none; border: none; cursor: pointer; padding: 0; } #phone .modal-container .modal-wrapper .title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: center; } #phone .modal-container .modal-wrapper .cont {font-size: 14px;color: #333; margin-bottom: 20px; overflow-y: auto; max-height: 400px; scrollbar-width: none;} #phone #verification-code { width: 100%; height: 40px; padding: 0 20px 10px; font-size: 20px; text-align: center; background: transparent; border-bottom: 1px solid #808080; } #phone #timer { position: absolute; right: 10px; top: 0px; font-size: 14px; background-color: #F8E2E2; padding: 5px 10px; border-radius: 5px;} #phone #resend-btn { display:flex; border: 1px solid; cursor: pointer; display: none;line-height: 40px;} #phone .terms label { display: flex; align-items: center; gap: 5px; cursor: pointer; } #phone #verification-area { margin-top: 20px; opacity: 0; transform: translateY(-20px); transition: all 0.5s ease-out; } #phone #verification-area.show { opacity: 1; transform: translateY(0); } /* 웹킷 기반 브라우저에서 스크롤바 숨기기 */ #phone .modal-container .modal-wrapper .cont::-webkit-scrollbar {display: none;} /* 모바일 이상에서는 너비를 500px로 설정 */ @media (min-width: 768px) { #phone .modal-container .modal-wrapper { width: 500px; } } /**/ #nickname{padding: 60px 30px 50px;display: flex;flex-direction: column;flex: 1;} #nickname .title{padding: 0 30px;text-align: left;line-height: 32px;font-size: 20px;color: #333;} #nickname .input{position:relative;margin: 110px auto 30px;display: flex;flex-direction: column;width:300px;} #nickname .input input{height: 40px;display: flex;align-items: center;justify-content: center;padding: 0 20px 10px;font-size: 20px; font-weight: 700; color: #333; border-bottom: 1px solid #808080;text-align: center;background: transparent} #nickname .input p{margin-top: 10px;line-height: 20px;font-size: 12px;color: #979797;text-align: center;} #nickname .button{flex-shrink:0;display: flex;align-items: center;justify-content: flex-end;margin-top: auto;} #nickname .button .btn{display: flex;align-items: center;justify-content: center;text-align: center;width: 200px;height: 40px;border-radius: 5px;font-size: 16px;border: 1px solid transparent;font-weight: 600;} #nickname .button .btn + .btn{margin-left:6px;} /**/ #major{padding: 60px 30px 50px;display: flex;flex-direction: column;flex: 1;} #major .title{padding: 0 30px;text-align: left;line-height: 30px;font-size: 20px;color: #333;} #major .input{position:relative;margin: 110px auto 30px;display: flex;flex-direction: column;} #major .input button{height: 40px;display: flex;align-items: center;justify-content: center;padding: 0 20px;font-size: 20px; font-weight: 700; color: #333; border-bottom: 1px solid #808080;text-align: center;background: transparent;width: 300px;margin: auto;} #major .input ul{position:absolute;z-index: 10;top:30px;left:0;padding: 10px 0;width:100%;height:auto;background: #ffffff;display: none;} #major .input ul.on{display:block;} #major .input ul li{} #major .input ul li a{display: flex;align-items: center;justify-content: center;text-align: center;line-height: 30px;font-size: 16px;color: #808080;} #major .input p{margin-top: 10px;line-height: 20px;font-size: 12px;color: #979797;text-align: center;} #major .button{flex-shrink:0;display: flex;align-items: center;justify-content: flex-end;margin-top: auto;} #major .button .btn{display: flex;align-items: center;justify-content: center;text-align: center;width: 200px;height: 40px;border-radius: 5px;font-size: 16px;border: 1px solid transparent;font-weight: 600;} #major .button .btn + .btn{margin-left:6px;} #major .major-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 100px auto; max-width: 1000px; padding: 0 20px;} #major .major-card { background: white; border-radius: 15px; padding: 20px; text-align: center; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; border: 2px solid transparent; } #major .major-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(33, 151, 255, 0.2); border-color: rgba(32, 151, 255, 0.3); } #major .major-card.selected { border: 2px solid #2097FF; background-color: rgba(32, 151, 255, 0.05); } #major .major-icon { font-size: 40px; margin-bottom: 10px; } #major .major-name { font-size: 16px; font-weight: bold; color: #333; } #major .major-card.selected .major-name { color: #2097FF; } #major .major-text { font-size: 16px; color: #808080; margin-top: 20px; text-align: center; } @media (max-width: 1024px) { #major .major-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px;} } @media (max-width: 768px) { #major .major-grid { margin: 20px auto; grid-template-columns: 1fr; gap: 10px; } #major .major-icon { font-size: 30px; } } /**/ #jobselect{padding: 60px 30px 50px;display: flex;flex-direction: column;flex: 1;} #jobselect .title{padding: 0 30px;text-align: left;line-height: 30px;font-size: 20px;color: #333;} #jobselect .input{position:relative;margin: 110px auto 30px;display: flex;flex-direction: column;} #jobselect .input button{height: 30px;display: flex;align-items: center;justify-content: center;padding: 0 20px;font-size: 16px;border-bottom: 1px solid rgba(33,33,33,0.08);text-align: center;background: transparent;color: #808080;width: 300px;margin: auto;} #jobselect .input ul{position:absolute;z-index: 10;top:30px;left:0;padding: 10px 0;width:100%;height:auto;background: #ffffff;display: none;} #jobselect .input ul.on{display:block;} #jobselect .input ul li{} #jobselect .input ul li a{display: flex;align-items: center;justify-content: center;text-align: center;line-height: 30px;font-size: 16px;color: #808080;} #jobselect .input p{margin-top: 10px;line-height: 20px;font-size: 12px;color: #979797;text-align: center;} #jobselect .jobinput {margin: auto;display: flex;gap: 20px;text-align: center;} #jobselect .jobinput label {cursor: pointer} #jobselect .jobinput label input {display: none;} #jobselect .graduation {padding: 40px 0;width: 150px;height: 150px;border: 1px solid #ebebeb;border-radius: 15px;box-shadow: 2px 2px rgba(0, 0, 0, 0.25);transition: all 0.3s;font-size: 20px;} #jobselect .student {padding: 40px 0;width: 150px;height: 150px;border: 1px solid #ebebeb;border-radius: 15px;box-shadow: 2px 2px rgba(0, 0, 0, 0.25);transition: all 0.3s;font-size: 20px;} #jobselect .graduation.selected {border: 2px solid #333;} #jobselect .graduation .jobselect {display: flex; justify-content: space-evenly; margin: 0 auto; font-size: 20px;} #jobselect .button{flex-shrink:0;display: flex;align-items: center;justify-content: flex-end;margin-top: auto;} #jobselect .button .btn{display: flex;align-items: center;justify-content: center;text-align: center;width: 200px;height: 40px;border-radius: 5px;font-size: 16px;border: 1px solid transparent;font-weight: 600;} #jobselect .button .btn + .btn{margin-left:6px;} /**/ #service{padding: 60px 30px 50px;display: flex;flex-direction: column;flex: 1;} #service .title{padding: 0 30px;text-align: left;line-height: 30px;font-size: 20px;color: #333;} #service .service{display: flex;justify-content: center;margin: 30px auto 0;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;width:330px;height: 300px;} #service .service .dp{padding: 12px 10px;} #service .service .scroll{overflow-y: auto;height: 100%;} #service .service .scroll::-webkit-scrollbar-track{overflow:hidden;} #service .service .scroll::-webkit-scrollbar{width:6px;background-color:#ffffff} #service .service .scroll::-webkit-scrollbar-thumb{rgba(255, 255, 255, 0);border-radius:16px;} #service .service .dp{} #service .service .dp li{} #service .service .dp li + li{margin-top:10px;} #service .service .dp li a{display: flex;line-height: 25px;font-size: 16px;text-align: center;align-items: center;justify-content: center;} #service .service .dp li a.on{color:var(--main-color);} #service .service .dp1{width: 30%;border-right: 1px solid #f1f1f1;} #service .service .dp2{width: 70%;} #service .service .dp2 ul{display:none;} #service .service .dp2 ul.on{display:block;} #service .input{position:relative;margin-top: 30px;display: flex;flex-direction: column;} #service .input button{height: 30px;display: flex;align-items: center;justify-content: center;padding: 0 20px;font-size: 16px;border-bottom: 1px solid rgba(33,33,33,0.08);text-align: center;background: transparent;color: #808080;width: 300px;margin: 0 auto;} #service .input ul{position:absolute;z-index: 10;bottom: 30px;left:0;padding: 10px 0;width:100%;height:auto;background: #ffffff;display: none;} #service .input ul.on{display:block;} #service .input ul li{} #service .input ul li a{display: flex;align-items: center;justify-content: center;text-align: center;line-height: 30px;font-size: 16px;color: #808080;} #service .input p{margin-top: 10px;line-height: 20px;font-size: 12px;color: #979797;text-align: center;} #service .text{position:relative;margin-top: 10px;margin-bottom: 30px;display: flex;flex-direction: column;text-align: center;line-height: 20px;font-size: 12px;color: #808080;} #service .button{flex-shrink:0;display: flex;align-items: center;justify-content: flex-end;margin-top: auto;} #service .button .btn{display: flex;align-items: center;justify-content: center;text-align: center;width: 200px;height: 40px;border-radius: 5px;font-size: 16px;border: 1px solid transparent;font-weight: 600;} #service .button .btn + .btn{margin-left:6px;} #service .selection-container { margin-top:20px; padding: 20px; } #service .selection-step { display: none; } #service .selection-step.active { display: block; } #service .step-title { text-align: center; margin-bottom: 20px; font-size: 18px; color: #333; } #service .step-indicator { display: flex; justify-content: center; margin-bottom: 30px; } #service .step-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0e0e0; margin: 0 5px; } #service .step-dot.active { background: #2097FF; } #service .grade-cards {padding: 20px 0;} #service .cards-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 15px; padding: 0 20px;} #service .grade-card {background: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 15px 10px; text-align: center; cursor: pointer; transition: all 0.3s ease;} #service .grade-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(33, 151, 255, 0.2); border-color: rgba(32, 151, 255, 0.3); } #service .grade-card.selected { border: 2px solid #2097FF; background-color: rgba(32, 151, 255, 0.05); } #service .grade-card .icon {font-size: 24px; margin-bottom: 8px;} #service .grade-card .label {font-size: 14px;} #service .back-btn {display: inline-block; border: none; background: rgba(32, 151, 255, 0.1); color: #2097FF; font-size: 14px; cursor: pointer; padding: 5px 10px; border-radius: 15px; transition: all 0.3s ease;} #service .back-btn span {display: inline-flex; align-items: center;} #service .step-title-wrap {text-align: center; margin-bottom: 20px;} #service .step-title {text-align: center; margin-bottom: 10px; font-size: 18px; color: #333;} @media (min-width: 768px) { #service .cards-container {grid-template-columns: repeat(4, 1fr); max-width: 600px; margin: 0 auto;} } @media (max-width: 767px) { #service .selection-container { margin-top:10px; padding: 30px;} #service .step-title-wrap {margin-bottom:10px;} #service .step-indicator { margin-bottom: 10px;} #service .service {width: 100%; max-width: 330px;} } /**/ #result{padding: 75px 30px 50px;display: flex;flex-direction: column;flex: 1;} #result .title{padding: 0 30px;text-align: left;line-height: 30px;font-size: 20px;color: #333;} #result .result{position:relative;margin-top: 50px;margin-bottom: 30px;display: flex;flex-direction: column;} #result .result ul{display:flex;flex-direction:column;align-items:center;text-align:center;} #result .result li{display: flex;align-items: center;justify-content: center;text-align: center;line-height: 30px;font-size: 16px;font-weight: bold;border-bottom: 1px solid rgba(33,33,33,0.08);} #result .result li + li{margin-top:30px;} #result .button{flex-shrink:0;display: flex;align-items: center;justify-content: flex-end;margin-top: auto;} #result .button .btn{display: flex;align-items: center;justify-content: center;text-align: center;width: 200px;height: 40px;border-radius: 5px;font-size: 16px;border: 1px solid transparent;font-weight: 600;} #result .button .btn + .btn{margin-left:6px;} /**/ #index{position: relative;} #index .index{padding: 50px 30px 30px 30px;} #index .index .intro{text-align:center;display:flex;flex-direction:column;align-items:center;padding: 40px 0 0 0;} #index .index .intro .title{line-height:24px;font-size:20px;font-weight:400;color:#333333;} #index .index .intro .title strong{font-weight:bold;} #index .index .intro .title span{font-weight:bold;color:var(--main-color)} #index .index .intro .form{margin:30px 0 0 0;width:100%;} #index .index .intro .form .input{display:flex;padding:5px;height:40px;border-radius:30px;border:3px solid var(--main-color);align-items: center;} #index .index .intro .form input{flex:1;padding:0 18px;font-size:16px;color:#333;background:transparent} #index .index .intro .form button{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:30px;border-radius:20px;background:var(--main-color);} #index .index .intro .form button img{height:15px;} #index .index .quick{margin:45px 0;} #index .index .quick .list{} #index .index .quick .list ul{display:flex;flex-wrap:wrap;justify-content: center;} #index .index .quick .list li{width:25%;margin:0 0 35px 0;} #index .index .quick .list li a{display:flex;flex-direction:column;align-items:center;justify-content:center;} #index .index .quick .list li img{width:40px;height:auto;} #index .index .quick .list li p{line-height:20px;font-size:12px;color:#333333;font-weight:600;} #index .index .banner{} #index .index .banner .list{} #index .index .banner .list ul{} #index .index .banner .list li{margin:0 -15px;} #index .index .banner .list li + li{margin-top:10px;} #index .index .banner .list li a{position:relative;padding:15px 30% 15px 15px;display:flex;flex-direction:column;align-items:flex-start;border-radius:10px;} #index .index .banner .list li .tit{position:relative;z-index:2;line-height:20px;font-size:16px;font-weight:bold;color:#333;} #index .index .banner .list li .txt{position:relative;z-index:2;margin-top:6px;line-height:16px;font-size:12px;color:#333333;} #index .index .banner .list li .img{position:absolute;top:50%;right:0;transform:translateY(-50%);height:100%;width:auto;z-index:1;display: flex;flex-direction: column;align-items: flex-end;justify-content: center;} #index .index .banner .list li .img img{width:auto;height: 60%;object-fit:contain} #index .index .mainBanner {display: flex; justify-content: space-between; gap: 10px;} #index .index .bannerOne { width: 600px; margin: 10px auto;} #index .index .bannerTwo { width: 600px; margin: 10px auto;} #index .index .bannerOne img { width: 100%; } #index .index .bannerTwo img { width: 100%; } @media (max-width: 600px) { #index .index .mainBanner { flex-direction: column; } #index .index .bannerOne { width: 100%; /* 모바일 모드에서 배너가 화면 너비에 맞게 설정됩니다 */ } #index .index .bannerTwo{ width: 100%; /* 모바일 모드에서 배너가 화면 너비에 맞게 설정됩니다 */ } } /**/ #search{position: relative;flex: 1;overflow: hidden;} @media (min-width: 768px) {#search{ display: block; width: 60%; margin: 0 auto; }} #search #app{margin-top: 80px;} #search .search_absolute{width: 90%; height: 50px; bottom: -25px; z-index: 1;margin: 0 auto;} #search .search_absolute > .search_wrap_02{width: 90%; padding:0 20px; display: flex; align-items: center; justify-content: space-between; margin: 30px auto 50px; background-color: #fff; width: 100%; height: 50px; border-radius: 50px; border: solid 1px var(--main-color);} #search .search_absolute > .search_wrap_02 > img{width: 28px; height: 28px; } #search .search_absolute > .search_wrap_02 > form { width: 90%; display: flex; align-items: center; justify-content: space-between;} #search .search_absolute > .search_wrap_02 > form > input{width: 80%; height: 40px; padding: 10px; font-size: 16px;} #search .search_absolute > .search_wrap_02 > form > button {width: 40px;} #search .search_absolute > .search_wrap_02 > form > button > img{width: 24px; } #search .heading{} #search .heading:after{content:'';position:absolute;bottom:0;left:30px;right:30px;height:1px;background:#212121;opacity:0.08} #search .recommand{position: relative;margin: 8px 30px 20px;} #search .recommand .tit{line-height: 20px;font-size: 20px;font-weight: 700;margin: 30px 0 20px;} #search .recommand .con{} #search .recommand .con .swiper-slide{width:auto;} #search .recommand .con a{display: flex;align-items: center;justify-content: center;line-height: 30px;padding: 0 12px;background-color: #F1F1F1;color:#808080; border-radius: 20px;font-size: 16px;box-shadow: 0 1px 1px #00000024; } #search .recent{position: relative;margin: 20px 30px;} #search .recent .tit{line-height: 20px;font-size: 20px;font-weight: 700; margin: 50px 0 20px;} #search .recent .act{position:absolute;top:0;right:0;} #search .recent .act a{line-height: 20px;font-size: 12px;color: #979797;display: flex;align-items: center;justify-content: center;} #search .recent .con{} #search .recent .con ul{} #search .recent .con li{position:relative;margin-bottom:10px;border-bottom: 1px solid rgba(33,33,33,0.08);} #search .recent .con li .link{line-height:20px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;font-size: 16px;color: #333;padding: 10px 12px;} #search .recent .con li .delete{position: absolute;top: 0;right: 0;text-indent: -9999em;overflow: hidden;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background: transparent;} #search .recent .con li .delete i{background: url("../img/ic-del.png") no-repeat 50% 50% / contain;display: flex;align-items: center;justify-content: center;width: 15px;height: 15px;} #search .content{position: relative;margin: 20px 30px;} #search .content .tit{line-height: 20px;font-size: 12px;font-weight: 700;margin-bottom: 10px;} #search .content .con{position:relative;} #search .content .con ul{} #search .content .con li{} #search .content .con li a{display:block;border-radius: 15px;overflow: hidden;} #search .content .con li img{display: block;width: 100%;height: auto;} #search .content .con .swiper-dots{position:absolute;z-index:5;bottom:10px;left:0;width:100%;display:flex;align-items:center;justify-content:center;} #search .content .con .swiper-dots span{margin:0 2.5px;width:5px;height:5px;border-radius:5px;overflow:hidden;opacity:1;background:#979797;text-indent: -9999em;overflow: hidden;} #search .content .con .swiper-dots span.swiper-pagination-bullet-active{background:#333333;} #search .result{position: relative;margin: 30px 30px;} #search .result .tabs{margin-bottom: 20px;} #search .result .tabs ul{display: flex;align-items: center;} #search .result .tabs li{width: 33%;border-bottom: 1px solid #e0e0e0;padding: 0 6px;} #search .result .tabs li a{display: flex;align-items: center;justify-content: center;height: 30px;font-size: 16px;color:#333; border-bottom: 1px solid #e0e0e0;margin-bottom: -1px;position: relative;z-index: 2;} #search .result .tabs li.active a{border-color: var(--main-color);font-weight: bold;color: var(--main-color);} #search .result .tabs button{display:flex;margin:6px 0;align-items:center;background: transparent;height: 20px;} #search .result .tabs button p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;color: #808080;} #search .result .tabs button img{margin:0 0 0 6px;width:auto;height:20px;flex-shrink: 0;} #search .result .tabs button.on img{transform:rotate(180deg)} #search .result .input{position:relative;margin-bottom: 20px;display: flex;justify-content: space-evenly;align-items: center;display: none;} #search .result .input.on{display:flex;} #search .result .input .desc{display: flex;position: relative;flex-direction: column;width: 25%;} #search .result .input button{height: 30px;display: flex;align-items: center;justify-content: center;padding: 0 6px;font-size: 14px;border-bottom: 1px solid rgba(33,33,33,0.08);text-align: center;background: transparent;color: #808080;} #search .result .input ul{position:absolute;z-index: 10;top:30px;left: 50%;padding: 10px 0;width: 160%;height:auto;background: #ffffff;display: none;transform: translateX(-50%);} #search .result .input ul.on{display:block;} #search .result .input ul li{} #search .result .input ul li a{display: flex;align-items: center;justify-content: center;text-align: center;line-height: 30px;font-size: 13px;color: #808080;} #search .result .tab-box{display:none !important} #search .result .tab-box.active{display: block !important;} #search .result .list{} #search .result .list ul{} #search .result .list li{} #search .result .list ul{} #search .result .list li{margin-bottom:10px;} #search .result .list .swiper-slide{} #search .result .list .swiper-arrow-prev{position: absolute;top:50%;left:0;margin-left: -16px;width:8px;height:12px;background:url("../img/icon_latest_prev.png") no-repeat 50% 50% / contain;z-index: 10;text-indent: -9999em;overflow: hidden;cursor: pointer;} #search .result .list .swiper-arrow-next{position: absolute;top:50%;right:0;margin-right: -16px;width:8px;height:12px;background: url("../img/icon_latest_next.png") no-repeat 50% 50% / contain;z-index: 10;text-indent: -9999em;overflow: hidden;cursor: pointer;} #search .result .list .box{position: relative;border-radius: 15px;overflow: hidden;background: #ffffff; border: solid 1px #EFEFEF; padding:10px 10px;} #search .result .list .box .bo_chk{position:absolute;top: 10px;right:0;} #search .result .list .problem .tags{line-height: 12px;font-size: 1.2rem;color: var(--main-color);margin-bottom:8px;} #search .result .list .upper{padding: 12px;display: flex;} #search .result .list .upper .image{flex-shrink:0;margin-right:10px;display:flex;align-items:center;justify-content:center;width: 77px;} #search .result .list .upper .image img{display:block;width:auto;max-width:100%;height: 100%;object-fit: cover;} #search .result .list .upper .inner{display:flex;flex-direction:column;flex:1;} #search .result .list .upper .tags{line-height: 12px;font-size: 1.2rem;color: var(--main-color);margin-bottom:8px;} #search .result .list .upper .subject{line-height: 16px;font-size: 1.4rem;color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #search .result .list .upper .text{margin-top: 10px;line-height: 12px;font-size: 1.4rem;color: #979797;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #search .result .list .upper .writer{margin-top: 8px;font-size: 1rem;color: #333;} #search .result .list .info{display: flex;align-items: center;height: 26px;padding: 6px 12px;} #search .result .list .info .time{margin-right: auto;font-size: 1.2rem;color: #979797;} #search .result .list .info .tool{display: flex;align-items: center;margin-left: auto;} #search .result .list .info .tool a{display: flex;align-items: center;} #search .result .list .info .tool a + a{margin-left: 4px;} #search .result .list .info .tool img{height: 10px;margin: 0 4px 0 0;flex-shrink: 0;} #search .result .list .info .tool em{font-size: 1.2rem;color: #979797;} /**/ #zoomPop{position:fixed;top:0;left:50%;transform:translateX(-50%);width: 100%;height:100%;max-width:100%;z-index: 100001;opacity:0;visibility:hidden;display: flex;align-items: center;justify-content: center;flex-direction: column;} #zoomPop .zoomPop{width: auto;height: auto;display: flex;align-items: center;justify-content: center;pointer-events: all;position: relative;z-index: 5;} #zoomPop .zoomPop img{width:auto;max-width:100%;height:auto;} #zoomPop .zoomPopClose{position:absolute;top:20px;right:20px;width:30px;height:30px;cursor: pointer;z-index: 6;} #zoomPop .zoomPopClose img{display:block;width:auto;height:100%;max-height:100%} #zoomPop .zoomPopBg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:4;background:#333;opacity:0.95} #zoomPop.on{opacity:1;visibility:visible} /**/ @media (min-width:900px) { #mynote{} #mynote .mynote{padding: 60px 0;overflow: hidden;display: flex;margin: 0 auto;width: 640px;max-width: 100%;gap: 30px;} #mynote .mynote .head{display:flex;align-items: flex-start;padding: 10px;order: 2;flex-direction: column;flex-shrink: 0;min-width: 150px;} #mynote .mynote .head .h2{line-height: 20px;font-size: 16px;font-weight: bold;color: #333;margin: 0 0 20px;} #mynote .mynote .head .cate{} #mynote .mynote .head .cate ul{display: flex;flex-direction: column;} #mynote .mynote .head .cate li{width:auto;height:auto;} #mynote .mynote .head .cate li + li{margin-top:10px;} #mynote .mynote .head .cate li a{display: flex; min-width: 56px; line-height: 20px; border-radius: 3px; font-size: 16px; align-items: center; justify-content: center; color: #808080; padding: 0 7px;} #mynote .mynote .head .cate li a.active, #mynote .mynote .head .cate li a.on{border-color:#f1f1f1;color:#333;font-weight: 600;} #mynote .mynote .head .edit{flex-shrink:0;margin-left:10px;display: none !important;} #mynote .mynote .head .edit a{white-space:nowrap;font-size:13px;color:#808080} #mynote .mynote .cont{order: 1;display: flex;flex-direction: column;flex: 1; min-width: 500px} #mynote .mynote .cont .title{display: flex;align-items: center;justify-content: space-between;height: 40px;padding: 10px;border-bottom: 1px solid #e0e0e0;} #mynote .mynote .cont .title .tit{line-height: 20px;font-size: 16px;font-weight: bold;color: #333;} #mynote .mynote .cont .title .edit{flex-shrink:0;margin-left:10px} #mynote .mynote .cont .title .edit a{white-space:nowrap;font-size:13px;color:#808080} #mynote .mynote .cont .list{} #mynote .mynote .cont .list ul{} #mynote .mynote .cont .list li{position:relative;padding:20px 15px;} #mynote .mynote .cont .list li + li{border-top:1px solid #d0d0d0;} #mynote .mynote .cont .list li .inner{position: relative;display:flex;flex-direction:column} #mynote .mynote .cont .list li .hash{line-height:20px;font-size:12px;font-weight:400;color:#808080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #mynote .mynote .cont .list li .tit{line-height: 30px;font-size: 16px;font-weight: 600;color: #333;word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 60px; /* line-height * line-clamp */} #mynote .mynote .cont .list li .txt{margin: 10px 0 0 0;line-height: 20px;font-size: 12px;font-weight: 400;color: #333;word-break: keep-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;} #mynote .mynote .cont .list li .delete{position:absolute;top:20px;right:0;display: none;} #mynote .mynote .cont .list li .delete a{white-space:nowrap;font-size:13px;color:#808080} #mynote .mynote .cont .list li .empty{padding:40px 0;display:flex;flex-direction:column;align-items:center;text-align:center;} #mynote .mynote .cont .list li .empty .empty-text{text-align: left;width: auto;max-width: 300px; } #mynote .mynote .cont .list li .empty img{display:block;width:auto;max-width:100%;margin:0 0 30px 0;} #mynote .mynote .cont .list li .empty p{line-height:25px;font-size:16px;font-weight:400;color:#333;} #mynote .mynote .cont .list li .empty p strong{font-weight:700;} #mynote .mynote.on .list li .delete{display:block;} #mynote .mynote .cont .list li .note_cnt {font-size: 12px;font-weight: 400;background-color: #f1f1f1;color: #31B584;padding: 2px 7px;margin-left: 5px;border-radius: 10px;height: 24px;line-height: 20px;} } @media (max-width:450px){ #mynote .mynote .cont .list li .hash{max-width: 300px;} } @media (max-width:900px){ #mynote{max-width: 640px; margin: 0px auto 80px;} #mynote .mynote{padding: 60px 30px 30px 30px;overflow: hidden;flex-direction: column;} #mynote .mynote .head{display:flex;align-items:center;justify-content:space-between;padding: 10px 0;border-bottom: 1px solid #d0d0d0;} #mynote .mynote .head .h2{display:none !important} #mynote .mynote .head .cate{overflow: hidden;} #mynote .mynote .head .cate ul{} #mynote .mynote .head .cate li{width: auto;} #mynote .mynote .head .cate li a{display: flex;align-items: center;justify-content: center;min-width: 56px;height: 25px;border-radius: 30px;border: 1px solid #e2e2e2;background: #fff;padding: 3px 6px;font-size: 12px;font-weight: 500;color: #808080;} #mynote .mynote .head .cate li a.active, #mynote .mynote .head .cate li a.on{background-color:#F1F1F1;color:#333;box-shadow: 0 1px 1px #00000024;border: solid 1px #f1f1f1;font-weight: 700; } #mynote .mynote .head .edit{flex-shrink:0;margin-left:10px} #mynote .mynote .head .edit a{white-space:nowrap;font-size:13px;color:#808080} #mynote .mynote .cont{} #mynote .mynote .cont .title{align-items:center;display: none !important;} #mynote .mynote .cont .title .tit{} #mynote .mynote .cont .title .edit{flex-shrink:0;margin-left:10px} #mynote .mynote .cont .title .edit a{white-space:nowrap;font-size:13px;color:#808080} #mynote .mynote .cont .list{} #mynote .mynote .cont .list ul{} #mynote .mynote .cont .list li{position:relative;padding:20px 15px;} #mynote .mynote .cont .list li + li{border-top:1px solid #d0d0d0;} #mynote .mynote .cont .list li .inner{position: relative;display:flex;flex-direction:column} #mynote .mynote .cont .list li .hash{line-height:20px;font-size:12px;font-weight:400;color:#333;border-radius: 3px; margin: 0px 5px 0px 0px; overflow: hidden; /* 넘치는 내용 숨김 */ text-overflow: ellipsis; /* 넘치는 텍스트를 '...'로 표시 */ white-space: nowrap; /* 텍스트를 한 줄로 표시 */} #mynote .mynote .cont .list li .tit{line-height: 24px;font-size: 16px;font-weight: 600;color: #333;word-break: keep-all;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 60px; /* line-height * line-clamp */} #mynote .mynote .cont .list li .txt{margin: 10px 0 0 0;line-height: 20px;font-size: 12px;font-weight: 400;color: #333;word-break: keep-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;} #mynote .mynote .cont .list li .delete{position:absolute;top:20px;right:0;display: none;} #mynote .mynote .cont .list li .delete a{white-space:nowrap;font-size:13px;color:#808080} #mynote .mynote .cont .list li .empty{padding:40px 0;display:flex;flex-direction:column;align-items:center;text-align:center;} #mynote .mynote .cont .list li .empty img{display:block;width:auto;max-width:100%;margin:0 0 30px 0;} #mynote .mynote .cont .list li .empty .empty-text{text-align: left;width: auto;max-width: 300px; } #mynote .mynote .cont .list li .empty p{line-height:25px;font-size:16px;font-weight:400;color:#333;} #mynote .mynote .cont .list li .empty p strong{font-weight:700;} #mynote .mynote.on .list li .delete{display:block;} #mynote .mynote .cont .list li .note_cnt {font-size: 12px;font-weight: 400;background-color: #f1f1f1;color: #31B584;padding: 2px 7px;margin-left: 5px;border-radius: 10px;height: 24px;line-height: 20px;} } /* #mynote .mynote .latest{position: relative;margin:0 0 20px 0;} #mynote .mynote .list{} #mynote .mynote .list ul{} #mynote .mynote .list li{margin-bottom:10px;} #mynote .mynote .list .box{position: relative;border-radius: 15px;overflow: hidden;background: #ffffff;box-shadow: 0 2px 4px rgba(0,0,0,0.25);} #mynote .mynote .list .box .bo_chk{position:absolute;top: 10px;right:0;} #mynote .mynote .list .upper{padding: 12px;display: flex;} #mynote .mynote .list .upper .image{flex-shrink:0;margin-right:10px;display:flex;align-items:center;justify-content:center;width: 77px;} #mynote .mynote .list .upper .image img{display:block;width:auto;max-width:100%;height: 80px;object-fit: cover;border-radius: 10px;} #mynote .mynote .list .upper .inner{display:flex;flex-direction:column;flex:1;} #mynote .mynote .list .upper .tags{line-height: 12px;font-size: 12px;color: var(--main-color);margin-bottom:5px;} #mynote .mynote .list .upper .tags .best{ line-height: 12px;font-size: 12px;color: #ffffff;margin-bottom:5px;padding:0px 5px;width:25px;height:10px;margin-right:5px;background-color:#fa897b;border-radius:10px; } #mynote .mynote .list .upper .subject{line-height: 16px;font-size: 16px;color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #mynote .mynote .list .upper .text{margin-top: 6px;line-height: 12px;font-size: 12px;color: #979797;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #mynote .mynote .list .upper .writer{margin-top: 8px;font-size: 8px;color: #333;} #mynote .mynote .list .info{border-top: 1px solid rgb(33 33 33 / 8%);display: flex;align-items: center;height: 26px;padding: 6px 12px;} #mynote .mynote .list .info .time{margin-right: auto;font-size: 8px;color: #979797;} #mynote .mynote .list .info .tool{display: flex;align-items: center;margin-left: auto;} #mynote .mynote .list .info .tool a{display: flex;align-items: center;} #mynote .mynote .list .info .tool a + a{margin-left: 4px;} #mynote .mynote .list .info .tool img{height: 10px;margin: 0 4px 0 0;flex-shrink: 0;} #mynote .mynote .list .info .tool em{font-size: 8px;color: #979797;} #mynote .mynote .list .swiper-slide{} #mynote .mynote .list .swiper-arrow-prev{position: absolute;top:50%;left:0;margin-left: -30px;width: 30px;height: 30px;background: url("../img/icon_latest_prev.png") no-repeat 50% 50% / 20px auto;z-index: 10;text-indent: -9999em;overflow: hidden;cursor: pointer;} #mynote .mynote .list .swiper-arrow-next{position: absolute;top:50%;right:0;margin-right: -30px;width: 30px;height: 30px;background: url("../img/icon_latest_next.png") no-repeat 50% 50% / 20px auto;z-index: 10;text-indent: -9999em;overflow: hidden;cursor: pointer;} */ /**/ #community{position:relative; max-width: 800px; margin: 0px auto 80px; } #community .listskin{} #community .listskin .header{display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid rgb(33 33 33 / 8%);height: 40px;margin: 0 0 30px 0;} #community .listskin .header .tabs{} #community .listskin .header .tabs ul{display:flex;gap:30px;} #community .listskin .header .tabs li{position:relative;cursor:pointer;display:block;line-height: 40px;font-size:16px;font-weight:bold;color:#808080} #community .listskin .header .tabs li.active{color:var(--main-color)} #community .listskin .header .tabs li.active:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--main-color);} #community .listskin .header .tool{} #community .listskin .header .tool ul{display: flex;align-items: center;justify-content: center;gap: 10px;} #community .listskin .header .tool li{} #community .listskin .header .tool li .btn{min-width: 60px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 5px;font-size: 14px;border:1px solid #cccccc;background:#fafafa;color:#303030;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #community .listskin .slider{position: relative;margin: 0 -30px 30px;padding: 0 30px;overflow: hidden;} #community .listskin .slider .tit{line-height:1;font-size:20px;font-weight:bold;color:#333333;margin:0 0 10px;} #community .listskin .slider .con{position: relative;} #community .listskin .slider .con:before{content:'';position:absolute;top:0;left:-30px;width:30px;height:100%;background:#ffffff;z-index:2;} #community .listskin .slider .con:after{content:'';position:absolute;top:0;right:-30px;width:30px;height:100%;background:#ffffff;z-index:2;} #community .listskin .slider .con ul{} #community .listskin .slider .con li.swiper-slide{padding: 20px 15px;border-radius:15px;border:1px solid #e2e2e2;width: 345px;margin-right: 10px;} #community .listskin .slider .con li .flex{display:flex;align-items:flex-end;justify-content:space-between} #community .listskin .slider .con li .flex .head{display:flex;align-items:center;gap: 10px;margin:0 0 10px;} #community .listskin .slider .con li .flex .cate{} #community .listskin .slider .con li .flex .cate span{display:flex;align-items: center;justify-content: center;min-width: 40px;height: 20px;padding: 0 6px;border-radius: 15px;background: #fafafa;font-size: 12px;font-weight: bold;} #community .listskin .slider .con li .flex .cate .cate01{background:#FFF7B2;color:#FFC700;} #community .listskin .slider .con li .flex .cate .cate02{background:#FFE4FB;color:#D36670;} #community .listskin .slider .con li .flex .cate .cate03{background:#E5F1FE;color:#398ED3;} #community .listskin .slider .con li .flex .cate .cate04{background:#C7FFF5;color:#31B584;} #community .listskin .slider .con li .flex .hash{display:flex;gap:5px;align-items:center;} #community .listskin .slider .con li .flex .hash span{line-height:20px;font-size:12px;color:#808080} #community .listskin .slider .con li .flex .subject{margin:0 0 5px;} #community .listskin .slider .con li .flex .subject a{display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 16px;font-weight: bold;color: #333333;} #community .listskin .slider .con li .flex .text{margin: 0 0 5px 0;} #community .listskin .slider .con li .flex .text a{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 12px;color: #333333;} #community .listskin .slider .con li .bottom{margin:30px 0 0;padding:10px 0 0;border-top:1px solid rgb(33 33 33 / 8%);display:flex;align-items:center;justify-content:space-between} #community .listskin .slider .con li .bottom .info{display:flex;align-items:center;} #community .listskin .slider .con li .bottom .info span{font-size:12px;color:#808080} #community .listskin .slider .con li .bottom .info span + span:before{content:'|';margin:0 4px;} #community .listskin .slider .con li .bottom .info span:first-child + span:before {content: none; margin: 0;} #community .listskin .slider .con li .bottom .tool{display:flex;gap:10px;align-items:center;} #community .listskin .slider .con li .bottom .tool a{display:flex;gap:5px;align-items:center;} #community .listskin .slider .con li .bottom .tool a img{width:14px;height:14px;object-fit:contain} #community .listskin .slider .con li .bottom .tool a p, #community .listskin .slider .con li .bottom .tool a em{font-size:12px;color:#808080} #community .listskin .slider .con li .bottom .tool a .ic-like{background: url("../img/ic-like.png") no-repeat 50% 50% / contain;} #community .listskin .slider .con li .bottom .tool a .ic-comment{background: url("../img/ic-comment.png") no-repeat 50% 50% / contain;} #community .listskin .slider .swiper-arrow-prev{position: absolute;top:50%;left:0;margin-left: -30px;width: 30px;height: 30px;background:url("../img/icon_latest_prev.png") no-repeat 50% 50% / contain;z-index: 10;text-indent: -9999em;overflow: hidden;cursor: pointer;transform: translateY(-50%);} #community .listskin .slider .swiper-arrow-next{position: absolute;top:50%;right:0;margin-right: -30px;width: 30px;height: 30px;background: url("../img/icon_latest_next.png") no-repeat 50% 50% / contain;z-index: 10;text-indent: -9999em;overflow: hidden;cursor: pointer;transform: translateY(-50%);} #community .listskin .middle{display:flex;align-items:center;justify-content:flex-end;margin: 30px 0 10px;} #community .listskin .middle .tool{display:none;} #community .listskin .middle .onlyme{display:flex;align-items:center;justify-content:flex-end;} #community .listskin .middle .onlyme label{display:flex;gap:10px;cursor:pointer;} #community .listskin .middle .onlyme label input{display: none;} #community .listskin .middle .onlyme label input ~ p{line-height:20px;font-size:12px;color:#808080} #community .listskin .middle .onlyme label input:checked ~ p{color:#808080;text-decoration:underline} #community .listskin .list{} #community .listskin .list ul{border-top: 1px solid #e2e2e2;} #community .listskin .list li{padding: 20px 0;border-bottom: 1px solid #e2e2e2;} #community .listskin .list li .flex{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;} #community .listskin .list li .flex .lt-item{flex:1;} #community .listskin .list li .flex .rt-item{flex-shrink:0;} #community .listskin .list li .flex .head{display:flex;align-items:center;margin:0 0 10px;max-width: 100%;overflow-y: auto; /* 스크롤바 */ -ms-overflow-style: none; /* IE, Edge 스크롤바 숨기기 */ scrollbar-width: none; /* Firefox 스크롤바 숨기기 */} #community .listskin .list li .flex .head::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/} #community .listskin .list li .flex .cate{margin-right: 10px;} #community .listskin .list li .flex .cate span{display:flex;align-items: center;justify-content: center;min-width: 40px;height: 26px;padding: 0 6px;border-radius: 15px;background: #fafafa;font-size: 12px;} #community .listskin .list li .flex .cate .cate01{background:#FFF7B2;color:#FFC700;} #community .listskin .list li .flex .cate .cate02{background:#FFE4FB;color:#D36670;} #community .listskin .list li .flex .cate .cate03{background:#E5F1FE;color:#398ED3;} #community .listskin .list li .flex .cate .cate04{background:#C7FFF5;color:#31B584;} #community .listskin .list li .flex .cate .cate05{background:#FFCEB2;color:#A93D00;} #community .listskin .list li .flex .hash{background: #ededed; text-align: center; display: block; border-radius: 5px; min-width: 40px; height: 20px; line-height: 20px; font-size: 12px; gap: 5px;} #community .listskin .list li .flex .hash span{line-height:20px;font-size:12px;color:#333;padding: 0 5px;} #community .listskin .list li .flex .subject{margin:0 0 5px;} #community .listskin .list li .flex .subject a{display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 16px;font-weight: bold;color: #333333;} #community .listskin .list li .flex .text{margin: 0 0 5px 0;} #community .listskin .list li .flex .text a{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 20px;font-size: 12px;color: #333333;} #community .listskin .list li .flex .image{width:100px;height:75px;border-radius:6px;overflow:hidden;} #community .listskin .list li .flex .image a{display:block;width:100%;height:100%;} #community .listskin .list li .flex .image img{width:100%;height:100%;object-fit:cover;} #community .listskin .list li .bottom{margin: 10px 0 0;display:flex;align-items:center;justify-content:space-between} #community .listskin .list li .bottom .info{display:flex;align-items:center;} #community .listskin .list li .bottom .info span{font-size:12px;color:#808080} #community .listskin .list li .bottom .info span + span:before{content:'|';margin:0 4px;} #community .listskin .list li .bottom .tool{display:flex;gap:10px;align-items:center;} #community .listskin .list li .bottom .tool a{display:flex;gap:5px;align-items:center;} #community .listskin .list li .bottom .tool a img{width:14px;height:14px;object-fit:contain} #community .listskin .list li .bottom .tool a p, #community .listskin .list li .bottom .tool a em{font-size:12px;color:#808080} #community .listskin .list li .bottom .tool a .ic-like{background: url("../img/ic-like.png") no-repeat 50% 50% / contain;} #community .listskin .list li .bottom .tool a .ic-comment{background: url("../img/ic-comment.png") no-repeat 50% 50% / contain;} #community .listskin .list .bot{height:300px;display:flex;align-items:center;justify-content:center;font-size: 13px;color:#999} #community .listskin .control{position:fixed;bottom: 100px;right: 20px;display:flex;flex-direction:column;z-index: 101;} #community .listskin .control a{display:flex;flex-direction:column;text-align: center;} #community .listskin .control a + a{margin-top:10px;} #community .listskin .control a i{display:flex;width: 36px;height: 36px;background: var(--main-color);border-radius: 36px;overflow: hidden;align-items: center;justify-content: center;} #community .listskin .control a i:before{content:'';display:block;width: 16px;height: 16px;} #community .listskin .control a p{margin-top: 4px;font-size: 10px;} #community .listskin .control a.ctr_top i:before{background:url("../img/ctr_top.png") no-repeat 50% 50% / contain} #community .listskin .control a.ctr_write i:before{background:url("../img/ctr_write.png") no-repeat 50% 50% / contain} #community .writeskin{padding-top: 60px;} #community .writeskin .wrap{width:700px;max-width: 100%;margin: 0 auto;} #community .writeskin .flex{display:flex;gap:50px;} #community .writeskin .form{display:flex;flex-direction:column;gap:30px;} #community .writeskin .form dl{} #community .writeskin .form dt{display:flex;align-items:center;gap:10px;line-height:30px;font-size:16px;font-weight:400;color:#808080;} #community .writeskin .form dt .error{font-size:12px;font-weight: 400;color: #f00;} #community .writeskin .form dt .anony{margin: 0 0 0 auto;} #community .writeskin .form dt .anony label{display:flex;gap:10px;cursor: pointer;align-items: center;} #community .writeskin .form dt .anony label input{display: none;} #community .writeskin .form dt .anony label input ~ p{line-height: 1;font-size: 12px;font-weight: 400;color: #808080;} #community .writeskin .form dt .anony label input ~ i{position:relative;width: 16px;height: 16px;border-radius: 16px;border:1px solid #808080;background:#ffffff} #community .writeskin .form dt .anony label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 8px;height: 8px;border-radius: 8px;background:#333;} #community .writeskin .form dd{} #community .writeskin .form dd .cate{font-weight: 500;width:100%;height:30px;padding:0;background:transparent;font-size:16px;color:#808080;border: 1px solid transparent;border-bottom-color: rgba(33 33 33 / 8%);line-height: 30px;} #community .writeskin .form dd .cate:active, #community .writeskin .form dd .cate:focus, #community .writeskin .form dd .cate:hover{outline: unset !important;box-shadow: none !important;border: 1px solid transparent !important;border-bottom-color: rgba(33 33 33 / 8%) !important;} #community .writeskin .form dd .input{} #community .writeskin .form dd .input input{box-shadow:none !important;width: 100%;height: 30px;font-size: 16px;font-weight: 500;color: #333;padding: 0 !important;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #community .writeskin .form dd .input input:active, #community .writeskin .form dd .input input:focus, #community .writeskin .form dd .input input:hover{outline: unset !important;box-shadow: none !important;border:unset !important;} #community .writeskin .form dd .input.subject input{font-size:16px;} #community .writeskin .form dd .textarea{} #community .writeskin .form dd .textarea textarea{box-shadow:none !important;width: 100%;height: 140px;font-size: 16px;font-weight: 500;color: #333;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #community .writeskin .form dd .textarea textarea:active, #community .writeskin .form dd .textarea textarea:focus, #community .writeskin .form dd .textarea textarea:hover{outline: unset !important;box-shadow: none !important;border:unset !important;} #community .writeskin .form dd .file{} #community .writeskin .form dd .file ul{display:flex;flex-wrap:wrap;gap:10px 20px;} #community .writeskin .form dd .file li{position:relative;} #community .writeskin .form dd .file li .img{width:100px;height:75px;border-radius:6px;} #community .writeskin .form dd .file li .img img{display:block;width:100%;height:100%;object-fit:cover;} #community .writeskin .form dd .file li .del{position:absolute;top:-5px;right:-5px;z-index:2;} #community .writeskin .form dd .file li .del a{width:16px;height:16px;display:flex;background:url("../img/ic-del.png") no-repeat 50% 50% / contain} #community .writeskin .form dd .file span{height: 30px;display: flex;align-items: center;justify-content: flex-start;line-height: 20px;font-size: 12px;color: #808080;margin: 0 0 10px;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #community .writeskin .form dd .file label{} #community .writeskin .form dd .file label input{display: none;} #community .writeskin .form dd .file label input ~ p{display:flex;cursor: pointer;width: 75px;aspect-ratio: 1/1;border-radius: 15px;border: 1px dashed #e2e2e2;align-items: center;justify-content: center;text-align: center;font-size: 12px;color: #808080;} #community .writeskin .form dd .file .imgs-slider{overflow: hidden;width:360px;max-width:100%;} #community .writeskin .form dd .file .imgs_wrap{} #community .writeskin .form dd .file .imgs_wrap .wrap_div_img{width:auto;position:relative;} #community .writeskin .form dd .file .imgs_wrap .wrap_div_img img{object-fit:contain} #community .writeskin .caution{} #community .writeskin .caution ul{display:flex;flex-direction:column;gap:10px;color: #808080;} #community .writeskin .caution li{border-radius:15px;padding:20px;background:#F1F1F1;line-height:24px;font-size:16px;} #community .writeskin .button{display:flex;gap: 10px;} #community .writeskin .button .btn{flex:1;display: flex;align-items: center;justify-content: center;border: 1px solid transparent;border-radius: 5px;font-size: 16px;font-weight: bold;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #community .writeskin .lt-item{flex: 1;} #community .writeskin .rt-item{width: 290px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;} #community .viewskin{width:600px;max-width: 100%;padding: 50px 10px 100px;margin:0 auto;} #community .viewskin .header{display: flex;align-items: center;justify-content: space-between;margin: 0 0 10px;} #community .viewskin .header .cate{display: flex;align-items: center;} #community .viewskin .header .cate span{display: flex;min-width: 40px;height: 20px;align-items: center;justify-content: center;border-radius: 15px;font-size: 12px;} #community .viewskin .header .cate .cate01{background:#FFF7B2;color:#FFC700;} #community .viewskin .header .cate .cate02{background:#FFE4FB;color:#D36670;} #community .viewskin .header .cate .cate03{background:#E5F1FE;color:#398ED3;} #community .viewskin .header .cate .cate04{background:#C7FFF5;color:#31B584;} #community .viewskin .header .cate .cate05{background:#FFCEB2;color:#A93D00;} #community .viewskin .header .tool{margin: 0 0 0 auto;} #community .viewskin .header .tool > ul{display: flex;gap: 15px;} #community .viewskin .header .tool > ul > li{position: relative;} #community .viewskin .header .tool > ul > li a{display: flex;} #community .viewskin .header .tool > ul > li a i{width: 20px;height: 20px;} #community .viewskin .header .tool > ul > li a i.ic-bookmark{background:url("../img/ic-bookmark.png") no-repeat 50% 50% / contain !important} #community .viewskin .header .tool > ul>li a i.ic-bookmark2 {background:url("../img/bookmark_on.png") no-repeat 50% 50% / contain !important;} #community .viewskin .header .tool > ul > li a i.ic-share{background:url("../img/ic-share.png") no-repeat 50% 50% / contain !important} #community .viewskin .header .tool > ul > li a i.ic-pencil{background:url("../img/ic-pencil.png") no-repeat 100% 100% / contain !important} #community .viewskin .header .tool > ul > li a i.ic-delete{background:url("../img/ic-delete.png") no-repeat 50% 50% / contain !important} #community .viewskin .header .tool > ul > li a i.ic-report{background:url("../img/ic-report.png") no-repeat 50% 50% / contain !important} #community .viewskin .header .tool > ul > li a i.ic-block{background:url("../img/ic-block.png") no-repeat 50% 50% / contain !important} #community .viewskin .header .tool > ul > li > ul{position:absolute;top:100%;right:0;width: 70px;padding: 10px;background: #fff;display: flex;flex-direction: column;border-radius: 5px;display: none;} #community .viewskin .header .tool > ul > li > ul.on{display:flex;} #community .viewskin .header .tool > ul > li > ul > li{display: flex;height: 30px;align-items: center;justify-content: center;} #community .viewskin .header .tool > ul > li > ul > li a{display:flex;gap:5px;line-height: 20px;} #community .viewskin .header .tool > ul > li > ul > li a i{width:10px;} #community .viewskin .header .tool > ul > li > ul > li a p{font-size:12px;font-weight:500;color:#808080} #community .viewskin .upper{margin: 0 0 50px;} #community .viewskin .upper .subject{line-height: 30px;font-size: 20px;font-weight: 600;color: #333;margin: 0 0 5px;} #community .viewskin .upper .info{} #community .viewskin .upper .info span{} #community .viewskin .upper .info span{font-size:12px;color:#808080} #community .viewskin .upper .info span + span:before{content:'|';margin:0 4px;} #community .viewskin .content{text-align: left;line-height: 30px;font-size: 16px;color: #333;margin: 0 0 55px;} #community .viewskin .content img{margin: 0 0 50px;width: 100%; overflow: hidden; zoom: 1; display: flex; justify-content: center; flex-direction: column;} #community .viewskin .middle{display: flex;align-items: flex-start;justify-content: center;margin: 0 0 30px;} #community .viewskin .middle .hash{} #community .viewskin .middle .hash .tit{line-height: 30px;font-size: 16px;font-weight: 700;color: #333;} #community .viewskin .middle .hash .txt{display: flex;align-items: center;min-height: 20px;line-height: 20px;font-size: 12px;color: #333;} #community .viewskin .middle .like{} #community .viewskin .middle .like a{display: flex;gap: 5px;align-items: center;} #community .viewskin .middle .like a .ic-like-o{width: 20px;height: 20px;background:url("../img/ic-like-o.png") no-repeat 50% 50% / contain} #community .viewskin .middle .like a .ic-like-o.on{background:url("../img/ic-like-on.png") no-repeat 50% 50% / contain} #community .viewskin .middle .like a p{line-height: 20px;font-size: 12px;color: #808080;} #community .viewskin .comment{border-top: 2px solid #333;} #community .viewskin .comment .uppr{display: flex;align-items: center;justify-content: space-between;height: 50px;border-bottom: 1px solid #333;} #community .viewskin .comment .uppr .total{line-height: 30px;font-size: 16px;font-weight: bold;color: #333;} #community .viewskin .comment .uppr .act{flex-shrink: 0;} #community .viewskin .comment .uppr .act a{display: flex;align-items: center;justify-content: center;width: 80px;height: 40px;border-radius: 12px;background: var(--main-color);font-size: 14px;color: #fff;font-weight: 400;} #community .viewskin .comment .cont{} #community .viewskin .comment .cont > ul{display: flex;flex-direction: column;} #community .viewskin .comment .cont > ul > li{display: flex;flex-direction: column;border-bottom: 1px solid #333;} #community .viewskin .comment .cont > ul > li .top{display: flex;gap: 10px;align-items: center;margin: 30px 0 10px;} #community .viewskin .comment .cont > ul > li .top .ico{width: 40px;height: 40px;background: #fff;border-radius: 40px;overflow: hidden;} #community .viewskin .comment .cont > ul > li .top .ico img{} #community .viewskin .comment .cont > ul > li .top .con{flex: 1;} #community .viewskin .comment .cont > ul > li .top .flex{display: flex;gap: 10px;} #community .viewskin .comment .cont > ul > li .top .flex .name{display: flex;align-items: center;gap: 5px;} #community .viewskin .comment .cont > ul > li .top .flex .name .cert{margin-bottom: -10px; width: 15px;height: 15px;background: url("../img/ic-cert.png") no-repeat 50% 50% / contain;} #community .viewskin .comment .cont > ul > li .top .flex .name p{margin-bottom: -10px; line-height: 20px;font-size: 13px;font-weight: bold;color: #333;} #community .viewskin .comment .cont > ul > li .top .flex .badge{display:flex;gap:5px;} #community .viewskin .comment .cont > ul > li .top .flex .badge span{min-width: 50px;height: 20px;display: flex;align-items: center;justify-content: center;text-align: center;font-size: 12px;font-weight: bold;border-radius: 5px;} #community .viewskin .comment .cont > ul > li .top .flex .act{position: relative;flex-shrink: 0;margin: 0 0 0 auto;display: flex;align-items: center;justify-content: center;} #community .viewskin .comment .cont > ul > li .top .flex .act > a{width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;} #community .viewskin .comment .cont > ul > li .top .flex .act > a i{width:15px;height:15px;display:block;background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain} #community .viewskin .comment .cont > ul > li .top .flex .act > ul{position: absolute;top: 100%;right: 0;width: 70px;padding: 10px;display: flex;gap: 10px;flex-direction: column;border-radius: 5px;background:#ffffff;/* border: 1px solid #f4f4f4; */opacity:0;visibility:hidden;} #community .viewskin .comment .cont > ul > li .top .flex .act > ul.on{opacity:1;visibility:visible} #community .viewskin .comment .cont > ul > li .top .flex .act > ul{} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li{position: relative;} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li a{display: flex;gap: 5px;line-height: 20px;align-items: center;justify-content: center;} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li a i{width: 10px;height: 10px;} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li a i.ic-bookmark{background:url("../img/ic-bookmark.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li a i.ic-share{background:url("../img/ic-share.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li a i.ic-pencil{background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li a i.ic-delete{background:url("../img/ic-delete.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li a i.ic-report{background:url("../img/ic-report.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li a i.ic-block{background:url("../img/ic-block.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .top .flex .act > ul > li a p{font-size: 12px;font-weight: 500;color: #808080;} #community .viewskin .comment .cont > ul > li .top .info{line-height: 30px;height: 30px;/* display: flex; *//* align-items: center; *//* flex-wrap: wrap; */display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #community .viewskin .comment .cont > ul > li .top .info span{font-size:12px;color:#808080} #community .viewskin .comment .cont > ul > li .top .info span + span:before{content:'|';margin:0 4px;} #community .viewskin .comment .cont > ul > li > .txt{margin: 0 0 10px;line-height: 30px;font-size: 15px;color: #333;} #community .viewskin .comment .cont > ul > li > .like{margin: 0 0 10px;display: flex;align-items: center;justify-content: flex-end;} #community .viewskin .comment .cont > ul > li > .like a{display: flex;gap: 5px;align-items: center;} #community .viewskin .comment .cont > ul > li > .like a .ic-like-o{width: 20px;height: 20px;background:url("../img/ic-like-o.png") no-repeat 50% 50% / contain} #community .viewskin .comment .cont > ul > li > .like a .ic-like-o.on{background:url("../img/ic-like-on.png") no-repeat 50% 50% / contain} #community .viewskin .comment .cont > ul > li > .like a p{line-height: 20px;font-size: 12px;color: #808080;} #community .viewskin .comment .cont > ul > li .more{/* border-top: 1px solid #e2e2e2; */} #community .viewskin .comment .cont > ul > li .more a{display: flex;align-items: center;justify-content: center;width: 100%;height: 38px;text-align: center;font-size: 12px;color: #808080;} #community .viewskin .comment .cont > ul > li .reply{border-top: 1px solid #e2e2e2;margin: 0;padding: 0;flex-direction: column;align-items: unset;padding: 10px 0px;} #community .viewskin .comment .cont > ul > li .reply > .tit{line-height: 30px;font-size: 12px;font-weight: bold;color: #333;margin: 0 0 8px;} #community .viewskin .comment .cont > ul > li .reply > .con{} #community .viewskin .comment .cont > ul > li .reply > .con > ul{display: flex;flex-direction: column;gap: 15px;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li{} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit{display: flex;align-items: center;gap: 10px;line-height: 30px;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .name{font-size: 12px;font-weight: bold;color: #333;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .badge{display:flex;gap:5px} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .badge span{display: flex;min-width: 50px;height: 20px;border-radius: 5px;font-size: 12px;font-weight: bold;align-items: center;justify-content: center;padding: 0;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act{margin: 0 0 0 auto;display: flex;align-items: center;position: relative;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act a{} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act a i{width: 15px;height: 15px;display: block;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act a i.ic-bookmark{background:url("../img/ic-bookmark.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act a i.ic-share{background:url("../img/ic-share.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act a i.ic-pencil{background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act a i.ic-delete{background:url("../img/ic-delete.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act a i.ic-report{background:url("../img/ic-report.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act a i.ic-block{background:url("../img/ic-block.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul{position: absolute;top: 100%;right: 0;width: 70px;padding: 10px;display: flex;gap: 15px;flex-direction: column;border-radius: 5px;background:#ffffff;/* border: 1px solid #f4f4f4; */opacity:0;visibility:hidden;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul.on{opacity:1;visibility:visible;z-index:999} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul{} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li{position: relative;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a{display: flex;gap: 5px;line-height: 20px;align-items: center;justify-content: center;flex-direction: row;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i{width: 10px;height: 10px;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-bookmark{background:url("../img/ic-bookmark.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-share{background:url("../img/ic-share.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-pencil{background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-delete{background:url("../img/ic-delete.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-report{background:url("../img/ic-report.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-block{background:url("../img/ic-block.png") no-repeat 50% 50% / contain !important} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a p{font-size: 12px;font-weight: 500;color: #808080;} #community .viewskin .comment .cont > ul > li .reply > .con > ul > li .txt{padding: 0 10px;line-height: 30px;font-size: 12px;color: #333;} #community .viewskin .comment .cont > ul > li .comt{border-top: 1px solid #e2e2e2;} #community .viewskin .comment .cont > ul > li .comt a{display: flex;align-items: center;justify-content: center;width: 100%;height: 38px;text-align: center;font-size: 12px;color: #808080;} #community .viewskin .comment .form{padding: 10px 0;} #community .viewskin .comment .form .tit{display: flex;align-items: center;justify-content: space-between;height: 40px;} #community .viewskin .comment .form .tit p{line-height: 20px;font-size: 12px;color: #333;} #community .viewskin .comment .form .tit label{} #community .viewskin .comment .form .tit label{display:flex;gap:10px;cursor: pointer;align-items: center;} #community .viewskin .comment .form .tit label input{display: none;} #community .viewskin .comment .form .tit label input ~ p{line-height: 1;font-size: 12px;font-weight: 400;color: #808080;} #community .viewskin .comment .form .tit label input ~ i{position:relative;width: 16px;height: 16px;border-radius: 16px;border:1px solid #808080;background:#ffffff} #community .viewskin .comment .form .tit label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 8px;height: 8px;border-radius: 8px;background:#333;} #community .viewskin .comment .form .con{ display: flex;border: 1px solid #e2e2e2;border-radius: 5px;height: 30px;padding: 5px 5px;} #community .viewskin .comment .form .con input{width: 100%;height: 20px;background: transparent;padding: 0;font-size: 12px;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #community .viewskin .comment .form .con input:focus, #community .viewskin .comment .form .con input:active, #community .viewskin .comment .form .con input:hover{border:unset !important;box-shadow:unset !important;} #community .viewskin .comment .form .con button{flex-shrink: 0;min-width: 30px;line-height:20px;/*padding:5px 5px;*/border-radius: 5px;background: var(--main-color);color: #fff;font-size: 12px;font-weight: bold;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #community .viewskin .comment .badge .bdg1{background: #FFB2F74D;color: #FFB2F7;} #community .viewskin .comment .badge .bdg2{background: #6AFF8B4D;color: #6AFF8B;} #community .viewskin .comment .badge .bdg3{background: var(--main-color)4D;color: var(--main-color);} #community .viewskin .comment .badge .bdg4{background: #9D6FFF4D;color: #9D6FFF;} #community .viewskin .comment .badge .bdg5{background: #9D6FFF4D;color: #9D6FFF;} #community .viewskin .comment .badge .bdg7{background: #f1f1f1;color: #8d8d8d;padding:5px 8px 5px 8px !important} #community .viewskin .comment .answer{margin: 0 0 50px;} #community .viewskin .comment .answer .fhead{display: flex;align-items: center;justify-content: space-between;margin: 0 14px 10px;} #community .viewskin .comment .answer .fhead .tit{font-size: 14px;font-weight: 600;} #community .viewskin .comment .answer .fhead .chk{display: flex; align-items: center; margin-right: 10px;} #community .viewskin .comment .answer .fhead .fheadRight{display: flex;} #community .viewskin .comment .answer .ftext{margin: 0 14px 10px;} #community .viewskin .comment .answer .ftext textarea{border: 0 !important;width: 100%;display: block;font-size: 12px;padding: 20px !important;} #community .viewskin .comment .answer .fboot{display: flex;align-items: center;justify-content: end;padding: 10px 0;} #community .viewskin .comment .answer .fboot .chk{} #community .viewskin .comment .answer .fboot .con1{text-align:right;} /* #community .viewskin .comment .answer .fboot .con1 a{display: flex;align-items: center;justify-content: center;width: 60px;height: 40px;border-radius: 5px;background: var(--main-color);font-size: 12px;color: #fff;font-weight: bold;} */ /* #community .viewskin .comment .answer .fboot .con2 a {display: flex;align-items: center;justify-content: center;width: 60px;height: 40px;border-radius: 5px;background: #fff;font-size: 12px;color: var(--main-color);font-weight: bold;border: 2px solid var(--main-color);} */ #community .viewskin .comment .answer .fboot .right-group {display: flex; gap: 10px;} #community .viewskin .comment .answer label{display: flex;align-items: center;justify-content: flex-start;gap: 10px;cursor: pointer;} #community .viewskin .comment .answer label input{display: none;} #community .viewskin .comment .answer label input ~ i{width: 18px;height: 18px;background: url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;border: 1px solid #e0e0e0;border-radius: 20px;} #community .viewskin .comment .answer label input ~ p{font-size: 12px;} #community .viewskin .comment .answer label input:checked ~ i{background-color: var(--main-color);border-color: var(--main-color);} #community .community{padding: 10px 20px;overflow: hidden;} #community .community .lt-item{} #community .community .rt-item{display:none;} #community .community .category{margin: 0 0 18px 0;padding: 0 10px;border-bottom: 1px solid #e0e0e0;} #community .community .category .swiper-wrapper{border: 0 !important;padding: 0 !important;background: #fff;} #community .community .category .swiper-slide{width: auto;} #community .community .category .swiper-slide a{padding: 0 10px;height: 30px;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;border-bottom: 2px solid transparent;} #community .community .category .swiper-slide a:after{display:none !important} #community .community .category .swiper-slide a.active{font-weight:bold;border-color:var(--main-color);color: var(--main-color);} #community .community .list{margin-bottom: 20px;position: relative;} #community .community .list .tit{line-height: 30px;font-size: 16px;font-weight: bold;color: #333;margin-bottom: 10px;} #community .community .list .con{} #community .community .list .con ul{} #community .community .list .con li{margin-bottom:10px;} #community .community .list .box{position: relative;border-radius: 15px;overflow: hidden;background: #ffffff;box-shadow: 0 2px 4px rgba(0,0,0,0.25);cursor: pointer;} #community .community .list .box .bo_chk{position:absolute;top: 10px;right:0;} #community .community .list .upper{padding: 12px;display: flex;} #community .community .list .upper .image{flex-shrink:0;margin-right:10px;display:flex;align-items:center;justify-content:center;width: 77px;} #community .community .list .upper .image img{display:block;width:auto;max-width:100%;height: 80px;object-fit: cover;border-radius: 10px;} #community .community .list .upper .inner{display:flex;flex-direction:column;flex:1;} #community .community .list .upper .tags{line-height: 12px;font-size: 12px;color: var(--main-color);margin-bottom:5px;font-weight: 500;} #community .community .list .upper .tags .best{ line-height: 12px;font-size: 12px;color: #ffffff;margin-bottom:5px;padding:0px 5px;width:25px;height:10px;margin-right:5px;background-color:#fa897b;border-radius:10px; } #community .community .list .upper .subject{line-height: 20px;font-size: 16px;color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #community .community .list .upper .text{margin-top: 6px;line-height: 12px;font-size: 12px;color: #979797;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #community .community .list .upper .writer{margin-top: 8px;font-size: 12px;color: #333;} #community .community .list .info{border-top: 1px solid rgb(33 33 33 / 8%);display: flex;align-items: center;height: 26px;padding: 6px 12px;} #community .community .list .info .time{margin-right: auto;font-size: 12px;color: #979797;} #community .community .list .info .tool{display: flex;align-items: center;margin-left: auto;} #community .community .list .info .tool a{display: flex;align-items: center;} #community .community .list .info .tool a + a{margin-left: 4px;} #community .community .list .info .tool img{height: 10px;margin: 0 4px 0 0;flex-shrink: 0;} #community .community .list .info .tool em{font-size: 8px;color: #979797;} #community .community .list .swiper-slide{margin-right: 32px;} #community .community .list .swiper-arrow-prev{position: absolute;top:50%;left:0;margin-left: -16px;width:20px;height:20px;background:url("../img/icon_latest_prev.png") no-repeat 50% 50% / contain;z-index: 10;text-indent: -9999em;overflow: hidden;cursor: pointer;} #community .community .list .swiper-arrow-next{position: absolute;top:50%;right:0;margin-right: -16px;width:20px;height:20px;background: url("../img/icon_latest_next.png") no-repeat 50% 50% / contain;z-index: 10;text-indent: -9999em;overflow: hidden;cursor: pointer;} #community .community .control{position:fixed;bottom: 100px;right: 20px;display:flex;flex-direction:column;z-index: 101;} #community .community .control a{display:flex;flex-direction:column;text-align: center;} #community .community .control a + a{margin-top:10px;} #community .community .control a i{display:flex;width: 36px;height: 36px;background: var(--main-color);border-radius: 36px;overflow: hidden;align-items: center;justify-content: center;} #community .community .control a i:before{content:'';display:block;width: 16px;height: 16px;} #community .community .control a p{margin-top: 4px;font-size: 10px;} #community .community .control a.ctr_top i:before{background:url("../img/ctr_top.png") no-repeat 50% 50% / contain} #community .community .control a.ctr_write i:before{background:url("../img/ctr_write.png") no-repeat 50% 50% / contain} #community .details{position: relative;padding: 30px;} #community .details .info{display: flex;align-items: center;margin-bottom: 10px;padding: 0 10px;} #community .details .info .user{display: flex;align-items: center;} #community .details .info .icon{width: 35px;height: 35px;margin-right:10px;} #community .details .info .icon img{display: block;width: 100%;height: 100%;object-fit: contain;} #community .details .info .name{white-space: nowrap;font-size: 13px;color: #979797;} #community .details .info .time{position: relative;padding-left: 16px;font-size: 13px;color: #979797;} #community .details .info .time:before{content:"";position:absolute;top:50%;left: 8px;transform:translateY(-50%);width:2px;height:2px;background:#979797;} #community .details .info .tool{margin-left: auto;display: flex;align-items: center;} #community .details .info .tool a{font-size: 12px;display: flex;align-items: center;justify-content: center;line-height: 24px;} #community .details .info .tool a + a{margin-left: 6px;} #community .details .writer {display:flex;align-items: flex-start;} #community .details .writer .icon {flex:1} #community .details .writer .icon img {width:40px; } #community .details .writer .name { font-size:12px;padding-right:10px;} #community .details .writer .time { display:flex;justify-content: flex-end; font-size:12px;} #community .details .upper{display: flex;align-items: flex-start;margin-bottom: 10px;padding: 0 10px;} #community .details .upper .title{line-height: 30px;font-size: 20px;font-weight: bold;border: 0 !important;padding: 0 !important;margin: 0 !important;max-width: calc(100% - 50px);flex: 1;} #community .details .upper .viewer{display: flex;align-items: center;margin-left: auto;justify-content: flex-end;height: 30px;} #community .details .upper .viewer img{height: 10px;margin-right: 6px;width: auto;} #community .details .upper .viewer em{font-size: 12px;color: #979797;} #community .details .content{padding: 20px 0;} #community .details .content img{width:auto;max-width:100%;height:auto;margin-bottom:10px;} #community .details .content p{margin-bottom:10px;line-height:1.4;font-size:13px;color:#333;} #community .details .tags{margin-top:60px;font-size:13px;color: var(--main-color);} #community .details .reply{margin-top:30px;padding: 10px 0;display:flex;align-items:center;} #community .details .reply .action{display:flex;align-items:center;} #community .details .reply .share{margin-left:auto;position:relative;display:flex;align-items:center;} #community .details .reply a{display:flex;flex-direction:column;align-items:center;text-align:center;} #community .details .reply a + a{margin-left: 16px;} #community .details .reply a img{height: 18px;width: auto;} #community .details .reply a em{font-size: 12px;color: #606060;margin-top: 6px;} #community .details .reply .btn_share ~ .box{position:absolute;bottom:100%;right:0;border-radius: 6px;border: 1px solid #f0f0f0;background:#ffffff;display: flex;align-items: center;justify-content: center;margin-bottom: 10px;display: none;} #community .details .reply .btn_share ~ .box:before{content:'';position:absolute;bottom: -6px;right: 18px;border-top: 6px solid #e0e0e0;border-bottom:0px solid transparent;border-left: 5px solid transparent;border-right: 5px solid transparent;} #community .details .reply .btn_share ~ .box:after{content:'';position:absolute;bottom: -5px;right: 18px;border-top: 6px solid #fff;border-bottom:0px solid transparent;border-left: 5px solid transparent;border-right: 5px solid transparent;} #community .details .reply .btn_share ~ .box > a{width: 40px;height: 40px;font-size: 12px;margin: 4px;display: flex;align-items: center;justify-content: center;border-radius: 4px;border: 1px solid #f1f1f1;background: #fafafa;} #community .details .reply .btn_share.on{color:#333;text-decoration:underline} #community .details .reply .btn_share.on ~ .box{display: flex;} #community .details .comment{padding: 20px 0;border-top: 1px solid #e0e0e0;} #community .details .comment .tit{font-size: 15px;font-weight: bold;margin-bottom: 20px;} #community .details .comment .con{} #community .details .comment .con ul{} #community .details .comment .con li{margin-bottom: 16px;} #community .details .comment .con li .head{display: flex;align-items: center;margin-bottom: 6px;line-height: 20px;} #community .details .comment .con li .head .name{font-size: 14px;font-weight: 500;} #community .details .comment .con li .head .date{position: relative;padding-left: 16px;font-size: 12px;color: #979797;} #community .details .comment .con li .head .date:before{content:"";position:absolute;top:50%;left: 8px;transform:translateY(-50%);width:2px;height:2px;background:#979797;} #community .details .comment .con li .head .tool{margin-left: auto;display: flex;align-items: center;} #community .details .comment .con li .head .tool a{font-size: 11px;font-weight: 500;} #community .details .comment .con li .head .tool a + a{margin-left: 10px;} #community .details .comment .con li .text{font-size: 14px;font-weight: 500;} #community .details .comment .inp{display:flex;align-items:center;height:30px;border-bottom:1px solid rgba(33,33,33,0.08);margin-top: 20px;} #community .details .comment .inp .form{display:flex;align-items:center;width: 100%;} #community .details .comment .inp input{flex:1;height: 30px;background:transparent;font-size:12px;} #community .details .comment .inp button{flex-shrink:0;width: 30px;height: 20px;border-radius: 20px;font-size: 12px;color: #fff;background: var(--main-color);} #community .write{padding: 30px;overflow: hidden;} #community .write .sort{margin: 0 auto 30px;width: 200px;max-width: 100%;} #community .write .sort select{border: 1px solid #d0d3db;background: #fff;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #e0e0e0;text-align: center;font-size: 16px;color: #979797;} #community .write .cont{} #community .write .cont .subject{position:relative;margin-bottom: 20px;} #community .write .cont .subject input[type="text"]{display: flex;align-items:center;width:100%;height: 30px;font-size: 20px;font-weight: bold;} #community .write .cont .subject .checkbox{position:absolute;top:50%;right: 12px;transform:translateY(-50%);display:flex;align-items:center} #community .write .cont .subject .checkbox input{display: none;} #community .write .cont .subject .checkbox input ~ i{margin: 0 0 0 3px;width: 20px;height: 20px;background: url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;} #community .write .cont .subject .checkbox input ~ p{line-height: 20px;font-size: 14px;color: #333333;} #community .write .cont .subject .checkbox input:checked ~ i{background:url("../img/icon_checkbox_on.png") no-repeat 50% 50% / contain} #community .write .cont .textarea{margin-bottom: 20px;} #community .write .cont .textarea .img_box{padding: 12px 12px 0 12px;display: none;flex-direction: column;} #community .write .cont .textarea .img_box.on {display: flex} #community .write .cont .textarea .img_box .img {display: none;width:150px;height:150px;background-position:center;background-size:cover;background-repeat:no-repeat;margin: 0 auto 25px;} #community .write .cont .textarea .img_box .img + .img {} #community .write .cont .textarea .img_box .img.on {display: block} #community .write .cont .textarea textarea{width: 100%;height: 80vw;line-height: 30px;font-size: 16px;text-align: left;} #community .write .cont .upload{margin-bottom: 40px;} #community .write .cont .upload .file{display: flex;align-items: center;position: relative} #community .write .cont .upload .file + .file{margin-top:12px;} #community .write .cont .upload .file input{display: none;} #community .write .cont .upload .file input ~ i{width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 30px;border: 1px solid #979797;margin-right: 8px;} #community .write .cont .upload .file input ~ i img{margin: 0 auto;width:20px;height:auto;} #community .write .cont .upload .file input ~ p{font-size:12px;color: #979797;line-height: 30px;} #community .write .cont .upload .file .btn_box {display: none;position: absolute; right: 10px;} #community .write .cont .upload .file .btn_box.on {display: flex} #community .write .cont .upload .file .btn_box .btn {background: transparent; border: none; outline: 0;font-size: 11px; color: #767676;cursor: pointer} #community .write .cont .upload .file .btn_box .btn+.btn {margin-left: 5px} #community .write .cont .upload .upimg{margin: 30px -30px 0;padding: 0 30px;} #community .write .cont .upload .upimg ul{} #community .write .cont .upload .upimg li{width:auto;} #community .write .cont .upload .upimg .btn{display: flex;align-items: center;justify-content: flex-end;margin-bottom: 5px;} #community .write .cont .upload .upimg .btn a{line-height: 20px;font-size: 12px;color: #808080;} #community .write .cont .upload .upimg .btn a + a{margin-left: 6px;} #community .write .cont .upload .upimg .img{display:block;} #community .write .cont .upload .upimg .img img{display:block;width:100%;height:auto} #community .write .cont .button{margin-top: 20px;display: flex;align-items: center;justify-content: center;} #community .write .cont .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;flex:1;border: 1px solid transparent;} #community .write .cont .button .btn + .btn{margin-left: 16px;} #community .sfolder {padding:1px 5px 1px 5px; max-width:150px; margin-top:0px;} #community .layerPopup {padding:10px 10px; position:absolute; top:100px; background:#fff; width:98%; height:371px; z-index:99; margin:1% 1%;} #community .layerPopup button {cursor:pointer;} #community .singoBox {width:100%;} #community .singoCon {margin-top:10px; padding:10px; width:100%; border:solid 3px #A5E9FF; height:250px;} #relation_qa{width: 550px;max-width: 100%;margin: 0 auto;padding:0;} #relation_qa .title{margin:0 0 16px 0;padding: 0 16px;line-height:32px;font-size:18px;font-weight:bold;color:#242424;} #relation_qa .list{} #relation_qa .list ul{border-top: 1px solid #e2e2e2;} #relation_qa .list li{padding: 20px 0;border-bottom: 1px solid #e2e2e2;} #relation_qa .list li .flex{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;} #relation_qa .list li .flex .lt-item{flex:1;} #relation_qa .list li .flex .rt-item{flex-shrink:0;} #relation_qa .list li .flex .head{display:flex;align-items:center;gap: 10px;margin:0 0 10px;} #relation_qa .list li .flex .cate{} #relation_qa .list li .flex .cate span{display:flex;align-items: center;justify-content: center;min-width: 40px;height: 20px;padding: 0 6px;border-radius: 15px;background: #fafafa;font-size: 12px;font-weight: bold;} #relation_qa .list li .flex .cate .cate01{background:#FFF7B2;color:#FFC700;} #relation_qa .list li .flex .cate .cate02{background:#FFE4FB;color:#D36670;} #relation_qa .list li .flex .cate .cate03{background:#E5F1FE;color:#398ED3;} #relation_qa .list li .flex .cate .cate04{background:#C7FFF5;color:#31B584;} #relation_qa .list li .flex .hash{display:flex;gap:5px;align-items:center;} #relation_qa .list li .flex .hash span{line-height:20px;font-size:12px;color:#808080} #relation_qa .list li .flex .subject{margin:0 0 0px;} #relation_qa .list li .flex .subject a{display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 20px;font-size: 16px;font-weight: bold;color: #333333;} #relation_qa .list li .flex .text{margin: 0 0 5px 0;} #relation_qa .list li .flex .text a{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 20px;font-size: 12px;color: #333333;} #relation_qa .list li .flex .image{width:100px;height:75px;border-radius:6px;overflow:hidden;} #relation_qa .list li .flex .image a{display:block;width:100%;height:100%;} #relation_qa .list li .flex .image img{width:100%;height:100%;object-fit:cover;} #relation_qa .list li .bottom{margin: 10px 0 0;display:flex;align-items:center;justify-content:space-between} #relation_qa .list li .bottom .info{display:flex;align-items:center;} #relation_qa .list li .bottom .info span{font-size:12px;color:#808080} #relation_qa .list li .bottom .info span + span:before{content:'|';margin:0 4px;} #relation_qa .list li .bottom .tool{display:flex;gap:10px;align-items:center;} #relation_qa .list li .bottom .tool a{display:flex;gap: 3px;align-items:center;} #relation_qa .list li .bottom .tool a img{width:14px;height:auto} #relation_qa .list li .bottom .tool a em{font-size:12px;color:#808080} #relation_qa .list li .bottom .tool a .ic-like{background: url("../img/ic-like.png") no-repeat 50% 50% / contain;} #relation_qa .list li .bottom .tool a .ic-comment{background: url("../img/ic-comment.png") no-repeat 50% 50% / contain;} .layer-popup{position:fixed;top:0;left:0;width:100%;height:100%;display: flex;align-items: center;justify-content: center;z-index: 10001;transition:all 0.35s;opacity:0;visibility:hidden;} .layer-popup.active{opacity:1;visibility:visible;} .layer-popup .bg{position: absolute;z-index: 4;top: 0;left: 0;width: 100%;height: 100%;background: #333;opacity: 0.3;} .layer-popup .box{text-align: center;min-width: 300px;width: auto;max-width: calc(100% - 40px);border-radius: 15px;background: #fff;padding: 30px;z-index: 5;} .layer-popup .box strong{display: block;line-height: 20px;font-size: 16px;font-weight: bold;color: #333;margin: 0 0 20px;} .layer-popup .box p{display: block;line-height: 14px;font-size: 12px;font-weight: 500;color: #808080;margin: 0 0 30px;} .layer-popup .box img{display: block;margin: 30px auto;} .layer-popup .box a{display: flex;width: 100%;height: 40px;border-radius: 5px;background: #f1f1f1;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;color: #333;margin-top: 20px;} .layer-popup .box .GoExplain{margin-top: 10px; display: flex;width: 100%;height: 30px;border: 1px solid var(--main-color); border-radius: 5px;background: #fff;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;color: var(--main-color);} .layer-popup .box button{margin: 10px 0 0;display: flex;width: 100%;height: 30px;border-radius: 5px;background: #fff;align-items: center;justify-content: center;font-size: 12px;color: #808080;text-decoration: underline;} /**/ #bank{} #bank .tit{margin: 0 0 30px;line-height: 19px;font-size: 16px;font-weight: bold;color: #333;} #bank .txt{margin: 0 0 50px 0;line-height: 20px;font-size: 12px;font-weight: 500;color: #808080;} #bank .act{display:flex;gap:10px} #bank .act + .act{margin-top:10px;} #bank .act .btn{flex:1;display: flex;align-items: center;justify-content: center;height: 40px;border: 1px solid transparent;font-size: 16px;} /**/ #mock{} #mock .tit{margin: 0 0 30px;line-height: 19px;font-size: 16px;font-weight: bold;color: #333;} #mock .txt{margin: 0 0 50px 0;line-height: 14px;font-size: 12px;font-weight: 500;color: #808080;} #mock .act{display:flex;gap:10px} #mock .act + .act{margin-top:10px;} #mock .act .btn{flex:1;display: flex;align-items: center;justify-content: center;height: 40px;border: 1px solid transparent;font-size: 12px;} /**/ #month{} #month .tit{margin: 0 0 30px;line-height: 19px;font-size: 16px;font-weight: bold;color: #333;} #month .txt{margin: 0 0 50px 0;line-height: 14px;font-size: 12px;font-weight: 500;color: #808080;} #month .act{display:flex;gap:10px} #month .act + .act{margin-top:10px;} #month .act .btn{flex:1;display: flex;align-items: center;justify-content: center;height: 30px;border: 1px solid transparent;font-size: 12px;} #month .select{} #month .select select{width:100px;height:36px;border:0;border-bottom:1px solid #d0d0d0;font-size:16px;color:#e2e2e2;text-align:center;margin:0 0 30px;} /**/ #hospital{position:relative;display: flex;flex-direction: column;min-height: calc((var(--vh, 1vh) * 100) - 81px);} #hospital .hospital{padding: 0 30px;overflow: hidden;flex: 1;display: flex;flex-direction: column;} #hospital .category{margin: 0 0 30px 0} #hospital .category ul{display:flex;border-bottom:1px solid rgba(33,33,33,0.08)} #hospital .category li{width:20%;} #hospital .category li a{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;line-height: 30px;font-size: 12px;font-weight: bold;color: #808080;} #hospital .category li a:after{content:'';position:absolute;bottom: -2px;left:0;width:100%;height: 2px;background:transparent;z-index: 2;} #hospital .category li a.active{color:var(--main-color)} #hospital .category li a.active:after{background:var(--main-color)} #hospital .select{border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;display: flex;max-height: calc((var(--vh, 1vh) * 100) - 50px - 50px - 80px);flex: 1;} #hospital .select .dp{padding: 12px 20px;} #hospital .select .scroll{overflow-y: auto;height: 100%;padding: 20px 0;} #hospital .select .scroll::-webkit-scrollbar-track{overflow:hidden;} #hospital .select .scroll::-webkit-scrollbar{width:6px;background-color:#ffffff} #hospital .select .scroll::-webkit-scrollbar-thumb{background-color:var(--main-color);border-radius:16px;} #hospital .select .dp{} #hospital .select .dp li{} #hospital .select .dp li + li{margin-top: 20px;} #hospital .select .dp li a{display: flex;line-height: 20px;font-size: 16px;text-align: center;align-items: center;justify-content: center;} #hospital .select .dp li a.on{color:var(--main-color);} #hospital .select .dp1{width: 30%;border-right: 1px solid #f1f1f1;} #hospital .select .dp1 li + li{margin-top:40px;} #hospital .select .dp1 li a{justify-content: center;text-align: center;} #hospital .select .dp2{width: 70%;} #hospital .select .dp2 ul{display:none;} #hospital .select .dp2 ul.on{display:block;} #hospital .select .dp2 li a{justify-content: flex-start;text-align: left;} #hospital .button{margin-top: 30px;margin-bottom: 15px;display: flex;align-items: center;justify-content: center;} #hospital .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;flex:1;border: 1px solid transparent;} #hospital .button .btn + .btn{margin-left: 16px;} #hospital .details{position: relative;padding: 30px;} #hospital .details .upper{display: flex;align-items: flex-start;margin-bottom: 10px;} #hospital .details .upper .title{line-height: 30px;font-size: 20px;font-weight: bold;border: 0 !important;padding: 0 !important;margin: 0 !important;max-width: calc(100% - 50px);flex: 1;} #hospital .details .upper .tool{margin-left: auto;margin-right: 10px;display: flex;align-items: center;} #hospital .details .upper .tool a{font-size: 12px;display: flex;align-items: center;justify-content: center;line-height: 30px;} #hospital .details .upper .tool a + a{margin-left: 6px;} #hospital .details .upper .viewer{display: flex;align-items: center;margin-left: auto;justify-content: flex-end;height: 30px;} #hospital .details .upper .viewer img{height: 10px;margin-right: 6px;width: auto;} #hospital .details .upper .viewer em{font-size: 12px;color: #979797;} #hospital .details .content{padding: 20px 0;} #hospital .details .content img{width:auto;max-width:100%;height:auto;margin-bottom:10px;margin:0 auto;display:block;} #hospital .details .content dl{display:flex;padding: 10px 0;line-height: 20px;font-size: 16px;} #hospital .details .content dl.col{flex-direction:column;} #hospital .details .content dl.col dt{margin-bottom:10px;} #hospital .details .content dt{flex-shrink:0;font-weight: bold;} #hospital .details .content dd{flex: 1;padding: 0 10px;} #hospital .details .content p{margin-bottom:10px;line-height:1.4;font-size:13px;color:#333;} #hospital .details .tags{margin-top:60px;font-size:13px;color: var(--main-color);} #hospital .details .reply{margin-top:30px;padding: 10px 0;display:flex;align-items:center;} #hospital .details .reply .action{display:flex;align-items:center;} #hospital .details .reply .share{margin-left:auto;position:relative;display:flex;align-items:center;} #hospital .details .reply a{display:flex;flex-direction:column;align-items:center;text-align:center;} #hospital .details .reply a + a{margin-left: 16px;} #hospital .details .reply a img{height: 18px;width: auto;} #hospital .details .reply a em{font-size: 12px;color: #606060;margin-top: 6px;} #hospital .details .reply .btn_share ~ .box{position:absolute;bottom:100%;right:0;border-radius: 6px;border: 1px solid #f0f0f0;background:#ffffff;display: flex;align-items: center;justify-content: center;margin-bottom: 10px;display: none;} #hospital .details .reply .btn_share ~ .box:before{content:'';position:absolute;bottom: -6px;right: 18px;border-top: 6px solid #e0e0e0;border-bottom:0px solid transparent;border-left: 5px solid transparent;border-right: 5px solid transparent;} #hospital .details .reply .btn_share ~ .box:after{content:'';position:absolute;bottom: -5px;right: 18px;border-top: 6px solid #fff;border-bottom:0px solid transparent;border-left: 5px solid transparent;border-right: 5px solid transparent;} #hospital .details .reply .btn_share ~ .box > a{width: 40px;height: 40px;font-size: 12px;margin: 4px;display: flex;align-items: center;justify-content: center;border-radius: 4px;border: 1px solid #f1f1f1;background: #fafafa;} #hospital .details .reply .btn_share.on{color:#333;text-decoration:underline} #hospital .details .reply .btn_share.on ~ .box{display: flex;} #hospital .details .comment{padding: 20px 0;border-top: 1px solid #e0e0e0;} #hospital .details .comment .tit{font-size: 15px;font-weight: bold;margin-bottom: 20px;} #hospital .details .comment .con{} #hospital .details .comment .con ul{} #hospital .details .comment .con li{margin-bottom: 16px;} #hospital .details .comment .con li .head{display: flex;align-items: center;margin-bottom: 6px;line-height: 20px;} #hospital .details .comment .con li .head .name{font-size: 14px;font-weight: 500;} #hospital .details .comment .con li .head .date{position: relative;padding-left: 16px;font-size: 12px;color: #979797;} #hospital .details .comment .con li .head .date:before{content:"";position:absolute;top:50%;left: 8px;transform:translateY(-50%);width:2px;height:2px;background:#979797;} #hospital .details .comment .con li .head .tool{margin-left: auto;display: flex;align-items: center;} #hospital .details .comment .con li .head .tool a{font-size: 11px;font-weight: 500;} #hospital .details .comment .con li .head .tool a + a{margin-left: 10px;} #hospital .details .comment .con li .text{font-size: 14px;font-weight: 500;} #hospital .details .comment .inp{display:flex;align-items:center;height:30px;border-bottom:1px solid rgba(33,33,33,0.08);margin-top: 20px;} #hospital .details .comment .inp .form{display:flex;align-items:center;width: 100%;} #hospital .details .comment .inp input{flex:1;height: 30px;background: transparent;font-size:12px;} #hospital .details .comment .inp button{flex-shrink:0;width: 30px;height: 20px;border-radius: 20px;font-size: 12px;color: #fff;background: var(--main-color);} /**/ #learn{position:relative;} #learn .learn{padding: 60px 20px 30px 20px;overflow: hidden;} #learn .learn .upper_wp{display:flex;margin: 0 0 20px 0;} #learn .learn .upper_wp .dday{width: 55%;background: #FFFFFF;border-bottom: 1px solid #333333;padding: 16px 12px;display:flex;align-items:center;margin: 0 10px 15px 0;} #learn .learn .upper_wp .dday p{font-size: 16px;line-height: 1;margin: 0 15px 0 0;flex-shrink: 0;} #learn .learn .upper_wp .dday p em{display:block;font-size: 12px;} #learn .learn .upper_wp .dday strong{flex: 1;text-align: center;font-size: 20px;color:#333333;} #learn .learn .upper_wp .menu{width: calc(45% - 10px);display: flex;flex-direction: column;} #learn .learn .upper_wp .menu > div{flex:1;width: 100%;} #learn .learn .upper_wp .menu .study{position: relative;z-index:5;} #learn .learn .upper_wp .menu .study button{position: relative;margin: 0;display:flex;align-items:center;width: 100%;height: 30px;background: rgba(255, 255, 255, 0.3);border: 1px solid #d3d3d3;box-shadow: 2px 2px rgba(0, 0, 0, 0.25);border-radius: 5px;} #learn .learn .upper_wp .menu .study button p{flex:1;text-align:center;font-size:12px} #learn .learn .upper_wp .menu .study button img{width:auto;height:20px;flex-shrink:0;} #learn .learn .upper_wp .menu .study button.on{border-radius:5px 5px 0 0;border-bottom-color: transparent;} #learn .learn .upper_wp .menu .study button.on img{transform:rotate(180deg)} #learn .learn .upper_wp .menu .study ul{position:absolute;z-index: 1;top:100%;left:0;width:100%;margin: -5px 0 0 0;background: #fff;box-shadow: 2px 2px rgba(0, 0, 0, 0.25);padding: 10px 20px 10px;border-radius: 0 0 5px 5px;border: 1px solid #f1f1f1;border-top: 0;display: none;} #learn .learn .upper_wp .menu .study li{} #learn .learn .upper_wp .menu .study li a{display:block;line-height:20px;font-size:12px;color:#333;} #learn .learn .upper_wp .menu .package{margin: 0;} #learn .learn .package{margin: 0 auto 16px;width: 150px;max-width: 100%;} #learn .learn .package .box{margin:0 auto;width: 100%;max-width:100%;border-radius:50px;height: 30px;display:flex;align-items:center;justify-content:space-between;padding: 0 5px;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);} #learn .learn .package .tit{line-height:20px;font-size:12px;color:#333;letter-spacing: -0.025em;padding: 0 0 0 5px;} #learn .learn .package .chk{} #learn .learn .package label{} #learn .learn .package label input{display:none;} #learn .learn .package label input ~ i{position:relative;width:40px;height:20px;display:flex;align-items:center;justify-content:flex-start;padding:2px;background: rgba(0,0,0, 0.05);border-radius:20px;} #learn .learn .package label input ~ i:before{content:'';position:absolute;top:50%;left:2px;width:16px;height:16px;border-radius:16px;background:#ffffff;transition:all 0.35s;transform:translateY(-50%)} #learn .learn .package label input:checked ~ i{background:rgba(165, 233, 255, 0.7);} #learn .learn .package label input:checked ~ i:before{left:calc(100% - 16px - 2px)} #learn .learn .problem{margin:0 0 16px 0;} #learn .learn .problem ul{display:flex;margin: 0 -5px;flex-wrap:wrap;} #learn .learn .problem li{width:33.33%;padding:0 5px 14px;} #learn .learn .problem li a{display:flex;flex-direction:column;background:#333;padding:5px;border-radius:15px;box-shadow: 2px 2px rgba(0, 0, 0, 0.25);} #learn .learn .problem li:nth-child(1) a{background: rgba(250, 137, 123, 0.3);} #learn .learn .problem li:nth-child(2) a{background: rgba(255, 225, 119, 0.5);} #learn .learn .problem li:nth-child(3) a{background: rgba(208, 230, 165, 0.5);} #learn .learn .problem li .img{background:rgba(255,255,255,0.5);border-radius:15px;padding: 100% 0 0 0;position: relative;margin:0 0 15px 0;} #learn .learn .problem li .img img{width:auto;max-width:60%;height:auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #learn .learn .problem li .tit{margin:0 0 10px 0;line-height:20px;font-size:16px;color:#333;text-align:center;font-weight: 800;} #learn .learn .problem li .ico{margin:0 auto;width:30px;height:2px;background:#f1f1f1;} #learn .learn .study{margin:0 0 16px 0;} #learn .learn .study .title{text-align: left;font-size:20px;color:#333333;margin:0 0 10px 0;font-weight:600;} #learn .learn .study .content{} #learn .learn .study .content ul{display:flex;flex-wrap:wrap;gap: 10px;} #learn .learn .study .content li{width: calc(33.33% - 6.66666px);} #learn .learn .study .content li a{border-radius: 15px;background: #ffffff;border: 1px solid #d3d3d3;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 10px;} #learn .learn .study .content li img{margin:0 auto 16px;width:40px;max-width:90%;height:auto} #learn .learn .study .content li p{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #learn .learn .guide{margin: 0 0 15px 0;padding: 5px 18px;border-radius: 15px;line-height: 20px;font-size: 12px;font-weight: bold;text-align: center;background: #ffffff;box-shadow: 0 2px 2px rgba(0,0,0,0.25);} #learn .learn .test{margin: 0 0 15px 0;} #learn .learn .test ul{display:flex;flex-wrap:wrap;margin: 0 -5px;} #learn .learn .test li{width:50%;padding: 0 5px;} #learn .learn .test li a{border-radius: 15px;padding: 10px;box-shadow: 0 2px 2px rgba(0,0,0,0.25);display: flex;flex-direction: column;} #learn .learn .test li .tit{margin-bottom: 15px;line-height: 20px;font-size: 12px;font-weight: bold;} #learn .learn .test li .img{margin-bottom: 15px;height: 85px;display: flex;align-items: center;justify-content: center;} #learn .learn .test li .img img{display:block;margin:0 auto;width:auto;max-width:100%} #learn .learn .test li .txt{text-align: center;line-height: 16px;font-size: 12px;color: #808080;} #learn .learn .list{margin: 0 0 15px 0;} #learn .learn .list .tit{margin:0 0 15px 0;line-height:20px;font-size:16px;font-weight:bold;} #learn .learn .list .con{padding:0 5px;} #learn .learn .list ul{display: flex;} #learn .learn .list li{padding:0 5px;width: 33.33%;} #learn .learn .list li a{position: relative;border-radius: 15px;padding: 10px;box-shadow: 0 2px 2px rgba(0,0,0,0.25);width: 100%;padding-top: calc(100% - 10px);display: block;} #learn .learn .list li a p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size: 12px;font-weight: bold;text-align: center;white-space: nowrap;} #learn .learn .search_wp{position: relative;margin: 0 0 30px 0;} #learn .learn .search_wp .input{display:flex;align-items:center;margin: 0 auto;width:500px;max-width:100%;padding:6px;border-radius: 30px;border: 1px solid var(--main-color);} #learn .learn .search_wp .input input{height: 20px;width: 100%;flex: 1;padding: 0 18px;font-size: 12px;color: #333;background: transparent;} #learn .learn .search_wp .input button{width: 50px;height: 20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:20px;background:var(--main-color);} #learn .learn .search_wp .input button img{height: 15px;} #learn .learn .search_wp .pack{position: absolute;top: 50%;right: 0;transform: translateY(-50%);} #learn .learn .search_wp .pack .box{margin:0 auto;width:150px;max-width:100%;border-radius:50px;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);background-color:#fff;} #learn .learn .search_wp .pack .tit{line-height:20px;font-size:12px;color:#333;letter-spacing: -0.025em;} #learn .learn .search_wp .pack .chk{} #learn .learn .search_wp .pack label{} #learn .learn .search_wp .pack label input{display:none;} #learn .learn .search_wp .pack label input ~ i{position:relative;width:40px;height:20px;display:flex;align-items:center;justify-content:flex-start;padding:2px;background: rgba(0,0,0,0.05);border-radius:20px;} #learn .learn .search_wp .pack label input ~ i:before{content:'';position:absolute;top:50%;left:2px;width:16px;height:16px;border-radius:16px;background:#ffffff;transition:all 0.35s;transform:translateY(-50%)} #learn .learn .search_wp .pack label input:checked ~ i{background:rgba(165, 233, 255, 0.7)} #learn .learn .search_wp .pack label input:checked ~ i:before{left:calc(100% - 16px - 2px)} #learn .learn .latest_wp{display:flex;margin: 0 0 20px 0;flex-direction: column;} #learn .learn .latest_wp .board{width: 100%;max-width: 100%;margin-right:5px;display:flex;flex-direction:column;padding: 10px;border-radius: 15px;background: #f5f5f7;} #learn .learn .latest_wp .banner{width: 710px;margin-top: 10px;max-width: 100%;} #learn .learn .latest_wp .banner a{position:relative;width:100%;height: 160px;display:flex;align-items:center;justify-content:center;border-radius: 15px;overflow: hidden;} #learn .learn .latest_wp .banner a .tit{position:relative;z-index:2;font-size: 21px;font-weight:bold;color:#fff;text-align: center;} #learn .learn .latest_wp .banner a .img{position:absolute;top:0;left:0;width:100%;height:100%;background:#333;} #learn .learn .latest_wp .banner a .img img{display:block;width:100%;height:100%;object-fit:cover;} #learn .learn .latest_wp .head{display:flex;align-items:center;justify-content: space-between;margin: 0 0 10px 0;} #learn .learn .latest_wp .head .tit{line-height: 30px;font-size: 20px;font-weight: bold;color: #333;white-space: nowrap;} #learn .learn .latest_wp .head .day{height: 40px;padding:10px;border-radius:10px;background:#fff;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);display: flex;flex-direction: row;align-items: center;justify-content: center;gap: 6px;} #learn .learn .latest_wp .head .day span{font-size: 13px;} #learn .learn .latest_wp .head .day p{font-size: 13px;} #learn .learn .latest_wp .head .day strong{font-size: 13px;font-weight: bold;} #learn .learn .latest_wp .head .pack{margin-left:auto;} #learn .learn .latest_wp .head .pack .box{margin:0 auto;width:150px;max-width:100%;border-radius:50px;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);background-color:#fff;} #learn .learn .latest_wp .head .pack .tit{line-height:20px;font-size:12px;color:#333;letter-spacing: -0.025em;} #learn .learn .latest_wp .head .pack .chk{} #learn .learn .latest_wp .head .pack label{} #learn .learn .latest_wp .head .pack label input{display:none;} #learn .learn .latest_wp .head .pack label input ~ i{position:relative;width:40px;height:20px;display:flex;align-items:center;justify-content:flex-start;padding:2px;background: rgba(0,0,0,0.05);border-radius:20px;} #learn .learn .latest_wp .head .pack label input ~ i:before{content:'';position:absolute;top:50%;left:2px;width:16px;height:16px;border-radius:16px;background:#ffffff;transition:all 0.35s;transform:translateY(-50%)} #learn .learn .latest_wp .head .pack label input:checked ~ i{background:rgba(165, 233, 255, 0.7)} #learn .learn .latest_wp .head .pack label input:checked ~ i:before{left:calc(100% - 16px - 2px)} #learn .learn .latest_wp .notice{position:relative;padding: 10px 20px;border-radius:15px;background:#fff;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);flex: 1;} #learn .learn .latest_wp .notice .tit{font-size: 14px;font-weight: bold;margin: 0 0 10px 0;} #learn .learn .latest_wp .notice .con{} #learn .learn .latest_wp .notice .con ul{} #learn .learn .latest_wp .notice .con li{} #learn .learn .latest_wp .notice .con li + li{margin-top:5px;} #learn .learn .latest_wp .notice .con li a{display:flex;align-items:center;} #learn .learn .latest_wp .notice .con li a:before{flex-shrink:0;content:'';width:2px;height:2px;border-radius:3px;background:#333;margin:0 5px} #learn .learn .latest_wp .notice .con li a p{line-height: 20px;font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #learn .learn .latest_wp .notice .act{position: absolute;top: 10px;right: 20px;display: flex;} #learn .learn .latest_wp .notice .act .btn{display:flex;align-items:center;justify-content:center;min-width:58px;height:20px;border-radius:20px;text-align:center;font-size:12px} #learn .learn .latest_wp .quick{display:flex;flex-direction: column;} #learn .learn .latest_wp .quick .lst{flex:1;} #learn .learn .latest_wp .quick .lst ul{display:flex;flex-wrap:wrap;} #learn .learn .latest_wp .quick .lst li{width:50%;padding: 0 5px 10px;} #learn .learn .latest_wp .quick .lst li a{display:flex;align-items:center;justify-content:center;height:40px;border-radius:10px;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);background:#fff;font-size: 12px;text-align: center;} #learn .learn .latest_wp .quick .day{width: 100%;height: 40px;padding:10px;border-radius:10px;background:#fff;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);display: flex;flex-direction: row;align-items: center;justify-content: center;} #learn .learn .latest_wp .quick .day span{font-size: 12px;} #learn .learn .latest_wp .quick .day p{font-size: 16px;margin: 0 0 0 10px;} #learn .learn .latest_wp .quick .day strong{margin: 0 0 0 10px;font-size: 16px;font-weight: bold;} #learn .learn .problem_wp{margin: 0 0 30px 0;} #learn .learn .problem_wp ul{display:flex;flex-direction: column;} #learn .learn .problem_wp li{width: 100%;padding:0 5px 14px;} #learn .learn .problem_wp li .box{position:relative;padding: 20px;border-radius:15px;background:#fff;border:1px solid #f1f1f1;box-shadow: 2px 2px rgba(0, 0, 0, 0.25);display: flex;flex-direction: column;align-items: flex-start;} #learn .learn .problem_wp li:nth-child(1) a{background: rgba(250, 137, 123, 0.3);} #learn .learn .problem_wp li:nth-child(2) a{background: rgba(255, 225, 119, 0.5);} #learn .learn .problem_wp li:nth-child(3) a{background: rgba(208, 230, 165, 0.5);} #learn .learn .problem_wp li .img{position: absolute;bottom: 20px;right: 20px;} #learn .learn .problem_wp li .img img{width:80px;max-width: 100%;height:auto;} #learn .learn .problem_wp li .tit{line-height:20px;font-size: 20px;font-weight: bold;color:#333;text-align: left;} #learn .learn .problem_wp li .txt{margin:5px 0 0 0;line-height:20px;font-size:16px;color:#333;} #learn .learn .problem_wp li .act{margin-top:65px;} #learn .learn .problem_wp li .act a{display:flex;align-items:center;justify-content:center;min-width: 100px;height: 30px;border-radius: 30px;font-size: 13px;font-weight: bold;} #learn .learn .problem_wp li .num{position:absolute;top: 20px;right:20px;line-height:20px;font-size:12px;color:#808080} #learn .learn .merci_wp{margin: 0 0 30px 0;} #learn .learn .merci_wp .tit{line-height:20px;font-size:20px;font-weight:bold;color:#333;padding:0 30px;margin:0 0 30px 0;} #learn .learn .merci_wp .con ul{display:flex;flex-wrap:wrap;gap: 10px;} #learn .learn .merci_wp .con li{width: calc(50% - 4.989px);} #learn .learn .merci_wp .con li a{border-radius: 15px;background: #ffffff;border: 1px solid #d3d3d3;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 10px;} #learn .learn .merci_wp .con li img{margin:0 auto 6px;width:50px;max-width:90%;height:auto} #learn .learn .merci_wp .con li p{line-height:20px;font-size:16px;font-weight:bold;color:#333333} /**/ .timer .stop {background:#eb5b5b1a; color:#eb5b5b; padding:0px 3px;border-radius:10px} @media screen and (min-width: 1024px) { #mocktest .mocktest {width: 50%; margin: 0 auto;} } #mocktest{position:relative;display: flex;flex-direction: column;min-height: calc(var(--vh, 1vh) * 20);flex: 1;max-height: 100vh;} #mocktest .mocktest{padding: 60px 20px 100px;} #mocktest .mocktest .tabs{margin: 0 0 10px 0;} #mocktest .mocktest .tabs ul{display:flex;align-items: center;justify-content: center;border-bottom:1px solid rgba(33,33,33,0.08)} #mocktest .mocktest .tabs li{padding: 0 8px;} #mocktest .mocktest .tabs li a{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;line-height: 30px;font-size: 16px;font-weight: 500;color: #808080;/* white-space: nowrap; */} #mocktest .mocktest .tabs li a:after{content:'';position:absolute;bottom: -2px;left:0;width:100%;height: 2px;background:transparent;z-index: 2;} #mocktest .mocktest .tabs li.active a{color:var(--main-color);border-color:var(--main-color);font-weight:800;} #mocktest .mocktest .tabs li.active a:after{background:var(--main-color)} #mocktest .mocktest .sort{margin-bottom:30px;display: flex;height: 20px;align-items: center;justify-content: center;} #mocktest .mocktest .sort .con{display:none;} #mocktest .mocktest .sort .con.active{display:flex;align-items:center;justify-content:center;} #mocktest .mocktest .sort .con a{display: flex;line-height:20px;font-size:16px;font-weight:500;color:#808080;border-bottom:1px solid transparent;} #mocktest .mocktest .sort .con a.active{color:var(--main-color);border-color:var(--main-color);font-weight:800;} #mocktest .mocktest .sort .con a + a{margin-left:10px;} #mocktest .mocktest .list{display:none;} #mocktest .mocktest .list.active{display:block} #mocktest .mocktest .list .con{} #mocktest .mocktest .list .con ul{} #mocktest .mocktest .list .con li{border-bottom:1px solid rgba(33,33,33,0.08);display: flex;align-items: center;padding: 10px 10px;} #mocktest .mocktest .list .con li:nth-child(1){ /*margin-bottom:15px;*/ } #mocktest .mocktest .list .con .tit{line-height:30px;font-size:16px;font-weight:500;margin-right: 20px;} #mocktest .mocktest .list .con .btn{display:flex;margin-left:auto;align-items:center;} #mocktest .mocktest .list .con .btn a{position:relative;display:flex;align-items:center;justify-content:center;min-width:60px;border-radius:5px;height:30px;background:var(--main-color);font-size:12px;color:#ffffff;font-wegiht:500;} #mocktest .mocktest .list .con .btn a p{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap} #mocktest .mocktest .list .con .btn a p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #mocktest .mocktest .list .con .btn a + a{margin-left:14px;} #mocktest .mocktest .list .txt{margin-top: 16px;line-height: 20px;font-size: 12px;text-align: center;} #mocktest .detail{padding: 0 20px 200px;display: flex;flex-direction: column;/*min-height: calc((var(--vh, 1vh) * 100) - 50px);*//* align-items: flex-start; */position: relative;z-index: 111;} #mocktest .detail .lt-item{flex: 1;display: flex;flex-direction: column;} #mocktest .detail .rt-item{flex-shrink: 0;width: 100%;} #mocktest .detail .rt-item .progress{/* display: none !important; */} #mocktest .detail .rt-item .list{display:none;} #mocktest .detail .rt-item .caution{display:none;} #mocktest .detail .upper{position:relative;display:flex;align-items:center;padding: 5px;margin: 0 0 20px 0;border-radius:15px;background:#ffffff;flex-shrink: 0;border: 1px solid #e2e2e2;height: 50px;} #mocktest .detail .upper .period{padding: 0 10px;font-size: 12px;font-weight: bold;} #mocktest .detail .upper .subject{font-size: 10px;text-align: center;white-space: nowrap;} #mocktest .detail .upper .total{margin-left: auto;display: flex;align-items: center;text-align: center;} #mocktest .detail .upper .total dl{display: flex;flex-direction: column;align-items: center;text-align: center;padding: 0 5px;white-space: nowrap;} #mocktest .detail .upper .total dt{font-size: 10px;} #mocktest .detail .upper .total dd{font-size: 12px;font-weight: bold;} #mocktest .detail .upper .timer{margin-left: 5px;position: relative;} #mocktest .detail .upper .timer dl{position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);border-radius: 30px;width: 80px;height: 30px;flex-shrink: 0;} #mocktest .detail .upper .timer dt{line-height: 10px;font-size: 10px;} #mocktest .detail .upper .timer dd{line-height: 20px;font-size: 12px;font-weight: bold;} #mocktest .detail .upper .timer p{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;font-size: 12px;} #mocktest .detail .upper .timer p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #mocktest .detail .content{position:relative;flex: 1;} #mocktest .detail .content .name{width: 100%;line-height: 30px;font-size: 16px;} #mocktest .detail .content .tool{position: relative; padding: 10px 0 0 0;display: flex;align-items: center;justify-content: right;margin: 0 0 20px 0;} #mocktest .detail .content .tool a{position:relative;display: flex;align-items: center;justify-content: center;min-width: 50px;height: 20px;font-size: 12px;color: #333;font-weight: 500;text-align: center;} #mocktest .detail .content .tool a + a{margin-left: 5px;} #mocktest .detail .content .tool a p{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;font-size: 12px;width: auto;display: none;} #mocktest .detail .content .tool a p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #mocktest .detail .content .tool a:nth-child(3){/* background:#D0E6A5; */} #mocktest .detail .content .tool a:nth-child(3) p{right:0;left: unset;transform:translateX(0)} #mocktest .detail .content .tool a:nth-child(3) p:after{right: 20px;left: unset;transform:translateX(0)} #mocktest .detail .content .problem{margin: 0 0 20px 0;} #mocktest .detail .content .problem strong{display:block;line-height: 26px;font-size: 12px;font-weight: 400;color: var(--main-color);display: none;} #mocktest .detail .content .problem .case_info{display:block;line-height: 30px;font-size: 16px;font-weight: 500;margin-top: 20px;} #mocktest .detail .content .problem span{display:block;line-height: 30px;font-size: 20px;font-weight: 600;} /* #mocktest .detail .content .problem span {display:inline-block} */ #mocktest .detail .content .problem .case_qn {padding: 10px; background: #f1f1f1; font-weight: 400; font-size: 16px; border-radius: 5px; margin-bottom: 20px;} #mocktest .detail .content .problem .sub_qn {padding: 10px; border: 1px solid #333333; margin-top: 30px; font-weight: 400; font-size: 16px; border-radius: 5px;} #mocktest .detail .content .answer{padding: 0;margin-bottom: 30px;} #mocktest .detail .content .answer ul{display: flex;flex-direction: column;gap: 10px;} #mocktest .detail .content .answer li{} #mocktest .detail .content .answer li + li{} #mocktest .detail .content .answer li .checkbox{display: flex;align-items: center;cursor: pointer;} #mocktest .detail .content .answer li .checkbox input{display: none;} #mocktest .detail .content .answer li .checkbox input ~ p{line-height: 30px;font-size: 16px;font-weight: 500;width: 90%;} /* 문제 x 버튼 눌렀을 때 수정 css */ #mocktest .detail .content .answer li .checkbox input:checked ~ p{color: var(--main-color); } #mocktest .detail .content .answer li .checkbox input:checked ~ p.on{background: #FA897B;color: #fff;} /*삭제*/#mocktest .detail .content .answer li .checkbox input:checked ~ p span{border: solid 1px var(--main-color);} /*수정#mocktest .detail .content .answer li .checkbox input:checked ~ p span{ border: solid 1px var(--main-color); background: var(--main-color); color: #fff !important;}*/ .answernum { font-weight: 500; font-size: 16px; width: 30px; height: 30px; text-align: center; display: inline-block; margin-right: 5px; border: solid 1px #888; border-radius:30px;} /* #mocktest .detail .content .answer li .checkbox input:checked ~ p .answernum{color: #fff; border: none !important; background-color: var(--main-color) !important;} */ #mocktest .detail .content .answer li .checkbox input ~ p.on{background: #FA897B;color: #fff;} #mocktest .detail .content .answer li .checkbox input ~ p.answer{background: var(--main-color)4D;} #mocktest .detail .button{margin-top: 20px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;gap: 10px;} #mocktest .detail .button .btn{padding: 0 6px;display: flex;height: 40px;border-radius: 5px;font-size: 16px;align-items: center;justify-content: center;flex:1;border: 1px solid transparent;} #mocktest .detail .exam{position: fixed;bottom: 120px;right: 20px;display:flex;flex-direction:column;z-index: 101;} #mocktest .detail .exam a{display: flex;align-items: center;justify-content: center;text-align: center;width: 40px;height: 40px;border-radius: 40px;background: var(--main-color);} #mocktest .detail .exam a img{display: flex;width: auto;max-width: 30px;height: auto;} #mocktest .detail .exam p{position:absolute;bottom:100%;right:0;margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;font-size: 12px;display:none;} #mocktest .detail .exam p:after{content:'';position: absolute;top: 100%;right: 15px;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;} #mocktest .detail .desc{display:none;} #mocktest .detail .view{margin: 50px 0 20px;} #mocktest .detail .view a{display:flex;flex-direction:column;align-items:center;text-align:center} #mocktest .detail .view a p{line-height: 30px;font-size: 14px;font-weight: 500;text-decoration: underline;color: #808080; margin-top: -20px;} #mocktest .detail .view a i{width: 20px;height: 20px;background: url("../img/arrow_down.png") no-repeat 50% 50% / contain;} #mocktest .detail .view a.on i{transform:rotate(180deg)} #mocktest .detail .comment{border-bottom: 2px solid #333;display:none;margin: 0 -20px;} #mocktest .detail .comment.on{display:block;} #mocktest .detail .comment .expla_desc{} #mocktest .detail .comment .comt_desc{border-top: 2px solid #333;} #mocktest .detail .comment .comt_desc .upper{border-bottom: 1px solid #333;} #mocktest .detail .comment .uppr{display: flex;align-items: center;justify-content: space-between;height: 50px;padding: 0 20px;} #mocktest .detail .comment .uppr .total{line-height: 30px;font-size: 16px;font-weight: bold;color: #333;} #mocktest .detail .comment .uppr .act{flex-shrink: 0;} #mocktest .detail .comment .uppr .act a{display: flex;align-items: center;justify-content: center;width: 60px;height: 30px;border-radius: 5px;background: var(--main-color);font-size: 12px;color: #fff;font-weight: bold;} #mocktest .detail .comment .uppr a{display: flex;align-items: center;justify-content: center;gap: 6px;} #mocktest .detail .comment .uppr a .ic-like-o{background:url("../img/ic-like-on.png") no-repeat 50% 50% / contain; width: 20px;height: 20px;} #mocktest .detail .comment .uppr a.on .ic-like-o{background:url("../img/ic-like-on.png") no-repeat 50% 50% / contain;} #mocktest .detail .comment .uppr a span{font-size:14px;} #mocktest .detail .comment .cont{} #mocktest .detail .comment .cont > ul{display: flex;flex-direction: column;} #mocktest .detail .comment .cont > ul > li{display: flex;flex-direction: column;border-bottom: 1px solid #333;} #mocktest .detail .comment .cont > ul > li .top{display: flex;gap: 10px;align-items: center;margin: 30px 0 10px;padding: 0 20px;} #mocktest .detail .comment .cont > ul > li .top .ico{width: 40px;height: 40px;background: #fff;border-radius: 40px;overflow: hidden;} #mocktest .detail .comment .cont > ul > li .top .ico img{} #mocktest .detail .comment .cont > ul > li .top .con{flex: 1;} #mocktest .detail .comment .cont > ul > li .top .flex{display: flex;gap: 10px;} #mocktest .detail .comment .cont > ul > li .top .flex .name{display: flex;align-items: center;gap: 5px;} #mocktest .detail .comment .cont > ul > li .top .flex .name .cert{width: 15px;height: 15px;background: url("../img/ic-cert.png") no-repeat 50% 50% / contain;} #mocktest .detail .comment .cont > ul > li .top .flex .name p{line-height: 20px;font-size: 12px;font-weight: bold;color: #333;} #mocktest .detail .comment .cont > ul > li .top .flex .badge{display:flex;gap:5px;} #mocktest .detail .comment .cont > ul > li .top .flex .badge span{min-width: 50px;height: 20px;display: flex;align-items: center;justify-content: center;text-align: center;font-size: 12px;font-weight: bold;border-radius: 5px;} #mocktest .detail .comment .cont > ul > li .top .flex .act{position:relative;margin: 0 0 0 auto;display: flex;align-items: center;justify-content: end;} #mocktest .detail .comment .cont > ul > li .top .flex .act > a{width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;} #mocktest .detail .comment .cont > ul > li .top .flex .act > a i{width:15px;height:15px;display:block;background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul{position: absolute;top: 100%;right: 0;width: 70px;padding: 10px;display: flex;gap: 15px;flex-direction: column;border-radius: 5px;background:#ffffff;/* border: 1px solid #f4f4f4; */opacity:0;visibility:hidden;} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul.on{opacity:1;visibility:visible} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul{} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li{position: relative;} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li a{display: flex;gap: 5px;line-height: 20px;align-items: center;justify-content: center;flex-direction: row;} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li a i{width: 10px;height: 10px;} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li a i.ic-bookmark{background:url("../img/ic-bookmark.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li a i.ic-share{background:url("../img/ic-share.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li a i.ic-pencil{background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li a i.ic-delete{background:url("../img/ic-delete.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li a i.ic-report{background:url("../img/ic-report.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li a i.ic-block{background:url("../img/ic-block.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .top .flex .act > ul > li a p{font-size: 12px;font-weight: 500;color: #808080;} #mocktest .detail .comment .cont > ul > li .top .info{line-height: 20px;height: 20px;/* display: flex; *//* align-items: center; *//* flex-wrap: wrap; */display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #mocktest .detail .comment .cont > ul > li .top .info span{font-size:12px;color:#808080} #mocktest .detail .comment .cont > ul > li .top .info span + span:before{content:'|';margin:0 4px;} #mocktest .detail .comment .cont > ul > li > .txt{margin: 0 0 10px;line-height: 30px;font-size: 15px;color: #333;padding: 0 20px;} /*#mocktest .detail .comment .cont > ul > li > .txt .writeCom{word-break: break-all;max-height: 60px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;} #mocktest .detail .comment .cont > ul > li > .txt .writeCom.open{display:block;height:auto;max-height:100%;}*/ #mocktest .detail .comment .cont > ul > li .comt{border-top: 1px solid #e2e2e2;} #mocktest .detail .comment .cont > ul > li .comt a{display: flex;align-items: center;justify-content: center;width: 100%;height: 38px;text-align: center;font-size: 12px;color: #808080;} #mocktest .detail .comment .cont > ul > li .more{} #mocktest .detail .comment .cont > ul > li .more a{display: flex;align-items: center;justify-content: center;width: 100%;height: 38px;text-align: center;font-size: 12px;color: #808080;} #mocktest .detail .comment .cont > ul > li .reply{border-top: 1px solid #e2e2e2;margin: 0;padding: 0;flex-direction: column;align-items: unset;padding: 10px 20px;} #mocktest .detail .comment .cont > ul > li .reply > .tit{line-height: 30px;font-size: 12px;font-weight: bold;color: #333;margin: 0 0 8px;} #mocktest .detail .comment .cont > ul > li .reply > .con{} #mocktest .detail .comment .cont > ul > li .reply > .con > ul{display: flex;flex-direction: column;gap: 15px;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li{} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit{display: flex;align-items: center;gap: 10px;line-height: 30px;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .name{font-size: 12px;font-weight: bold;color: #333;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .badge{display:flex;gap:5px} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .badge span{display: flex;min-width: 50px;height: 20px;border-radius: 5px;font-size: 12px;font-weight: bold;align-items: center;justify-content: center;padding: 0;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act{position: relative;margin: 0 0 0 auto;display: flex;align-items: center;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act a{} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act a i{width: 15px;height: 15px;display: block;background: url(../img/ic-pencil.png) no-repeat 50% 50% / contain;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act> ul{position: absolute;z-index: 5;top: 100%;right: 0;width: 70px;padding: 10px;display: flex;gap: 15px;flex-direction: column;border-radius: 5px;background:#ffffff;/* border: 1px solid #f4f4f4; */opacity:0;visibility:hidden;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul.on{opacity:1;visibility:visible} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul{} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li{position: relative;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a{display: flex;gap: 5px;line-height: 20px;align-items: center;justify-content: center;flex-direction: row;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i{width: 10px;height: 10px;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-bookmark{background:url("../img/ic-bookmark.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-share{background:url("../img/ic-share.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-pencil{background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-delete{background:url("../img/ic-delete.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-report{background:url("../img/ic-report.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-block{background:url("../img/ic-block.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a p{font-size: 12px;font-weight: 500;color: #808080;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .txt{padding: 0 10px;line-height: 30px;font-size: 12px;color: #333;} #mocktest .detail .comment .cont > ul > li .like{padding: 0 20px 10px;display: flex;align-items: center;justify-content: flex-end;} #mocktest .detail .comment .cont > ul > li .like a{display: flex;align-items: center;justify-content: center;gap: 6px;} #mocktest .detail .comment .cont > ul > li .like a .ic-like-o{background:url("../img/ic-like-o.png") no-repeat 50% 50% / contain; width: 20px;height: 20px;} #mocktest .detail .comment .cont > ul > li .like a.on .ic-like-o{background:url("../img/ic-like-on.png") no-repeat 50% 50% / contain;} #mocktest .detail .comment .cont > ul > li .like a p{font-size:14px;} #mocktest .detail .comment .form{padding: 10px 20px;} #mocktest .detail .comment .form .tit{display: flex;align-items: center;justify-content: space-between;height: 40px;} #mocktest .detail .comment .form .tit p{line-height: 20px;font-size: 12px;color: #333;} #mocktest .detail .comment .form .tit label{} #mocktest .detail .comment .form .tit label{display:flex;gap:10px;cursor: pointer;align-items: center;} #mocktest .detail .comment .form .tit label input{display: none;} #mocktest .detail .comment .form .tit label input ~ p{line-height: 1;font-size: 12px;font-weight: 400;color: #808080;} #mocktest .detail .comment .form .tit label input ~ i{position:relative;width: 16px;height: 16px;border-radius: 16px;border:1px solid #808080;background:#ffffff} #mocktest .detail .comment .form .tit label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 8px;height: 8px;border-radius: 8px;background:#333;} #mocktest .detail .comment .form .con{display: flex;border: 1px solid #e2e2e2;border-radius: 5px;height: 30px;padding: 5px;} #mocktest .detail .comment .form .con input{width: 100%;height: 20px;background: transparent;padding: 0;font-size: 12px;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #mocktest .detail .comment .form .con input:focus, #mocktest .detail .comment .form .con input:active, #mocktest .detail .comment .form .con input:hover{border:unset !important;box-shadow:unset !important;} #mocktest .detail .comment .form .con button{flex-shrink: 0;min-width: 30px;height: 20px;border-radius: 5px;background: var(--main-color);color: #fff;font-size: 12px;font-weight: bold;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #mocktest .detail .comment .badge .bdg1{background: #FFB2F74D;color: #FFB2F7;} #mocktest .detail .comment .badge .bdg2{background: #6AFF8B4D;color: #6AFF8B;} #mocktest .detail .comment .badge .bdg3{background: var(--main-color)4D;color: var(--main-color);} #mocktest .detail .comment .badge .bdg4{background: #9D6FFF4D;color: #9D6FFF;} #mocktest #replyWrite {padding:0 20px 20px;} #mocktest .answer .fhead{display: flex;align-items: center;justify-content: space-between;margin: 0 0 10px;} #mocktest .answer .fhead .tit{font-size: 16px;font-weight: bold;} #mocktest .answer .fhead .chk{} #mocktest .answer .ftext{margin: 0 0 10px;} #mocktest .answer .ftext textarea{ margin-top: 10px; height: 120px !important; width: 100%; border: solid 1px #ebebeb; background: #F9F9F9; padding: 20px !important; border-radius: 10px;} #mocktest .answer .fboot{display: flex;align-items: center;justify-content: space-between;padding: 10px 0;} #mocktest .answer .fboot .chk{} #mocktest .answer .fboot .con1{} /* #mocktest .answer .fboot .con1 a{display: flex;align-items: center;justify-content: center;width: 60px;height: 30px;border-radius: 5px;background: grayvar(--main-color);font-size: 12px;color: #fff;font-weight: bold;} */ #mocktest .answer label{display: flex;align-items: center;justify-content: flex-start;gap: 2px;cursor: pointer;} #mocktest .answer label input{display: none;} #mocktest .answer label input ~ i{width: 18px;height: 18px;background: url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;border: 1px solid #e0e0e0;border-radius: 20px;} #mocktest .answer label input ~ p{font-size: 12px; margin-right: 6px;} #mocktest .answer label input:checked ~ i{background-color: var(--main-color); border-color: var(--main-color);} #mocktest .answer .fboot .con1 .cancelBtn { border: solid 1px var(--main-color) !important; display: inline-block !important; border-radius: 5px !important; padding: 8px !important; background-color: #fff; color: var(--main-color) !important; font-size: 14px !important; width: 80px; text-align: center; } #mocktest .answer .fboot .con1 .updateBtn { border: none !important; display: inline-block !important; border-radius: 5px !important; padding: 8px !important; background-color: var(--main-color); color: #fff !important; font-size: 14px !important; width: 80px; text-align: center; } #mocktest .detail .item{/* overflow-y: auto;*/} #mocktest .detail .item ul{display:flex;flex-direction:column;gap:10px;} #mocktest .detail .item li{} #mocktest .detail .item li .item_top{display:flex;height:40px;width:100%;align-items:center;border-radius:15px;border:1px solid #e2e2e2} #mocktest .detail .item li .item_top .name{padding:10px 15px;flex: 1;line-height: 20px;font-size: 12px;font-weight: 500;color: #333;text-align: left;} #mocktest .detail .item li .item_top .name p{display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 12px;font-weight: 500;color: #333;} #mocktest .detail .item li .item_top .info{display:flex;gap:20px;flex-shrink:0;} #mocktest .detail .item li .item_top .info dl{flex-direction:column;display:flex;align-items:center;justify-content:center;} #mocktest .detail .item li .item_top .info dt{line-heighjt:1;font-size:10px;color:#333;} #mocktest .detail .item li .item_top .info dd{line-height:20px;font-size:12px;font-weight:bold;color:#333;} #mocktest .detail .item li .item_top .icon{padding:10px;width:40px;height:40px;margin-left:3px;flex-shrink:0;} #mocktest .detail .item li .item_top .icon img{width:20px;height:20px;display:block;} #mocktest .detail .item li .item_con{padding: 18px 20px;display: flex;flex-direction: column;gap: 10px;display: none;} #mocktest .detail .item li .item_con dl{position:relative;display:flex;gap: 4%;align-items: center;} #mocktest .detail .item li .item_con dl.wrong1 dt a{color:#18b1de} #mocktest .detail .item li .item_con dl.wrong1 dt{color:#18b1de} #mocktest .detail .item li .item_con dl.wrong dt a{color:#FA897B} #mocktest .detail .item li .item_con dl.wrong dt{color:#FA897B} #mocktest .detail .item li .item_con dl.note dt{} #mocktest .detail .item li .item_con dl.note dt:before{content:'';position:absolute;top:50%;right:100%;transform:translateY(-50%);margin: 0 3px 0 0;width:16px;height:16px;background:url("../img/ic-right.png") no-repeat 50% 50% / contain} #mocktest .detail .item li .item_con dt{flex: 1;font-size: 12px; font-weight: 600; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #mocktest .detail .item li .item_con dd{} #mocktest .detail .item li .item_con dd p{display:flex;flex-direction:column;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #e2e2e2;border-radius:100%;font-size: 12px;background: #fff;} #mocktest .detail .item li .item_con dd.on p{color:#fff;background:var(--main-color) !important;border-color:var(--main-color) !important} #mocktest .detail .item li .item_con dd.crt p{color:#fff;background:#FA897B;border-color:#FA897B} #mocktest .detail .item li .item_con dd.irt p{color:#fff;background:#ced4da;border-color:#ced4da} #mocktest .detail .item li.on .item_top .icon img{transform:rotate(180deg)} #mocktest .detail .item li.on .item_con{display:flex} #mocktest .progress{padding: 0 20px 30px;position: relative;z-index: 2;flex: 1;display: flex;flex-direction: column;} #mocktest .progress .upper{position:relative;display:flex;align-items:center;margin: 0 0 20px 0;flex-shrink: 0;} #mocktest .progress .upper .period{line-height: 20px;font-size: 16px;font-weight: bold;flex: 1;} #mocktest .progress .upper .timer{margin-left: 5px;position: relative;} #mocktest .progress .upper .timer dl{position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);border-radius: 30px;width: 80px;height: 30px;flex-shrink: 0;} #mocktest .progress .upper .timer dt{line-height: 10px;font-size: 10px;} #mocktest .progress .upper .timer dd{line-height: 20px;font-size: 12px;font-weight: bold;} #mocktest .progress .upper .timer p{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;font-size: 12px;} #mocktest .progress .upper .timer p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #mocktest .progress .info{margin: 0 0 20px;} #mocktest .progress .info .tit{text-align: center;line-height: 20px;font-size: 12px;margin-bottom: 10px;} #mocktest .progress .info .bar{position: relative;width: 200px;max-width: 100%;height: 10px;border-radius: 10px;margin: 0 auto;background: #fff;} #mocktest .progress .info .bar:after{content:'';position:absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius:15px;border:1px solid #e2e2e2;z-index: 4;} #mocktest .progress .info .bar i{position: absolute;top: 0;left: 0;bottom: 0;width: auto;background: var(--main-color)4D ;z-index: 5;border-radius: 15px;} #mocktest .progress .content{position:relative;flex: 1;} #mocktest .progress .content > ul{} #mocktest .progress .content > ul > li{margin-bottom: 12px;} #mocktest .progress .content > ul > li .view{display:flex;width: 100%;height:40px;padding:0 15px;align-items:center;border-radius:40px;background:#ffffff;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);margin: 0;} #mocktest .progress .content > ul > li .view .subject{line-height: 20px;font-size: 16px;font-weight: bold;text-align: center;white-space: nowrap;} #mocktest .progress .content > ul > li .view .total{margin-left: auto;display: flex;align-items: center;text-align: center;} #mocktest .progress .content > ul > li .view .total dl{display: flex;flex-direction: column;align-items: center;text-align: center;padding: 0 5px;white-space: nowrap;} #mocktest .progress .content > ul > li .view .total dt{font-size: 10px;} #mocktest .progress .content > ul > li .view .total dd{font-size: 12px;font-weight: bold;} #mocktest .progress .content > ul > li .view .icon{margin-left: 10px;} #mocktest .progress .content > ul > li .view .icon img{height: 20px;width: auto;} #mocktest .progress .content > ul > li .view.on .icon img{transform:rotate(180deg)} #mocktest .progress .content > ul > li .layer{margin-top: 15px;display:none;} #mocktest .progress .content > ul > li .layer.on{display:block} #mocktest .progress .content > ul > li .layer > ul{display:flex;flex-wrap:wrap} #mocktest .progress .content > ul > li .layer > ul li{width:20%;display:flex;align-items:center;justify-content:center;padding: 5px 10px;} #mocktest .progress .content > ul > li .layer > ul li .box{width:100%;padding:100% 0 0 0;border-radius:100%;position:relative;background: #808080;} #mocktest .progress .content > ul > li .layer > ul li .box p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size: 16px;color: #ffffff;} #mocktest .progress .content > ul > li .layer > ul li .box.on{background: var(--main-color);} #mocktest .progress .content > ul > li .layer > ul li .box.on p{} #mocktest .progress .button{margin-top: 20px;display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;} #mocktest .progress .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;width: 50%;border: 1px solid transparent;} #mocktest .progress .button .btn + .btn{margin-left: 16px;} #mocktest .submit{padding: 0 20px 30px;position: relative;z-index: 2;flex: 1;display: flex;flex-direction: column;} #mocktest .submit .upper{position:relative;display:flex;align-items:center;margin: 0 0 20px 0;flex-shrink: 0;} #mocktest .submit .upper .period{line-height: 20px;font-size: 16px;font-weight: bold;flex: 1;} #mocktest .submit .timer{position: relative;display: flex;justify-content: flex-end;margin-bottom: 17px;} #mocktest .submit .timer dl{position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);border-radius: 30px;width: 80px;height: 30px;flex-shrink: 0;} #mocktest .submit .timer dt{line-height: 10px;font-size: 10px;} #mocktest .submit .timer dd{line-height: 20px;font-size: 12px;font-weight: bold;} #mocktest .submit .content{position:relative;flex: 1;} #mocktest .submit .content > ul{} #mocktest .submit .content > ul > li{margin-bottom: 12px;} #mocktest .submit .content > ul > li .view{display:flex;width: 100%;height:40px;padding:0 15px;align-items:center;border-radius:40px;background:#ffffff;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);} #mocktest .submit .content > ul > li .view .subject{line-height: 20px;font-size: 16px;font-weight: bold;text-align: center;white-space: nowrap;} #mocktest .submit .content > ul > li .view .total{margin-left: auto;display: flex;align-items: center;text-align: center;} #mocktest .submit .content > ul > li .view .total dl{display: flex;flex-direction: column;align-items: center;text-align: center;padding: 0 5px;white-space: nowrap;} #mocktest .submit .content > ul > li .view .total dt{font-size: 10px;} #mocktest .submit .content > ul > li .view .total dd{font-size: 12px;font-weight: bold;} #mocktest .submit .content > ul > li .view .icon{margin-left: 10px;} #mocktest .submit .content > ul > li .view .icon img{height: 20px;width: auto;} #mocktest .submit .content > ul > li .view.on .icon img{transform:rotate(180deg)} #mocktest .submit .content > ul > li .layer{margin-top: 15px;display:none;} #mocktest .submit .content > ul > li .layer.on{display:block} #mocktest .submit .content > ul > li .layer > ul{display:flex;flex-wrap:wrap} #mocktest .submit .content > ul > li .layer > ul li{width:20%;display:flex;align-items:center;justify-content:center;padding: 5px 10px;} #mocktest .submit .content > ul > li .layer > ul li .box{width:100%;padding:100% 0 0 0;border-radius:100%;position:relative;background: #808080;} #mocktest .submit .content > ul > li .layer > ul li .box p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size: 16px;color: #ffffff;} #mocktest .submit .content > ul > li .layer > ul li .box.on{background: var(--main-color);} #mocktest .submit .content > ul > li .layer > ul li .box.on p{} #mocktest .submit .text{margin-top: 20px;text-align: center;line-height: 20px;} #mocktest .submit .button{margin-top: 20px;display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;} #mocktest .submit .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;width: 50%;border: 1px solid transparent;} #mocktest .submit .button .btn + .btn{margin-left: 16px;} #mocktest .submit .button .btn p{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;line-height: 18px;font-size: 12px;} #mocktest .submit .button .btn p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #mocktest .result{padding: 10px 20px 100px;position: relative;z-index: 2;flex: 1;display: flex;flex-direction: column;} #mocktest .result .upper{display: flex;flex-direction: column;justify-content: center;} #mocktest .result .upper .tit{line-height: 20px;font-size: 12px;text-align: center;} #mocktest .result .upper .img{display: block;margin: 16px auto;} #mocktest .result .upper .img img{} #mocktest .result .content{margin-bottom: 30px;} #mocktest .result .content > dl{display: flex;flex-direction: column;justify-content: center;text-align: center;} #mocktest .result .content > dl + dl{margin-top:10px;} #mocktest .result .content > dl > dt{line-height: 20px;font-size: 12px;} #mocktest .result .content > dl > dd{line-height: 20px;font-size: 16px;font-weight: bold;} #mocktest .result .content .cont{position:relative;flex: 1;} #mocktest .result .content .cont ul{} #mocktest .result .content .cont ul > li{margin-bottom: 10px;} #mocktest .result .content .cont ul > li .view{display:flex;width: 100%;height:40px;padding:0 15px;align-items:center;border: 1px solid #f1f1f1; border-radius: 15px;background:#ffffff;} #mocktest .result .content .cont ul > li .view .subject{line-height: 20px;font-size: 16px;font-weight: bold;text-align: center;white-space: nowrap;} #mocktest .result .content .cont ul > li .view .total{margin-left: auto;display: flex;align-items: center;text-align: center;} #mocktest .result .content .cont ul > li .view .total dl{display: flex;flex-direction: column;align-items: center;text-align: center;padding: 0 5px;white-space: nowrap;} #mocktest .result .content .cont ul > li .view .total dt{font-size: 12px;font-weight: 500;} #mocktest .result .content .cont ul > li .view .total dd{position:relative;display: flex;width: 60px;height: 6px;border-radius: 6px;background: #eeeeee;margin-top: 5px;overflow: hidden;} #mocktest .result .content .cont ul > li .view .total dd i{position:absolute;top:0;left:0;width:auto;height:100%;border-radius: 6px;} #mocktest .result .content .cont ul > li .view .icon{margin-left: 10px;} #mocktest .result .content .cont ul > li .view .icon img{height: 20px;width: auto;} #mocktest .result .content .cont ul > li .view.on .icon img{transform:rotate(180deg)} #mocktest .result .content .cont ul > li .layer{margin-top: 15px;display:none;} #mocktest .result .content .cont ul > li .layer.on{display:block} #mocktest .result .content .cont ul > li .layer > ul{display:flex;flex-wrap:wrap} #mocktest .result .content .cont ul > li .layer > ul li{display:flex; height: 40px;} #mocktest .result .content .cont ul > li .layer > ul li .box{width:100%;padding:100% 0 0 0;border-radius:100%;position:relative;background: #808080;} #mocktest .result .content .cont ul > li .layer > ul li .box p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size: 16px;color: #ffffff;} #mocktest .result .content .cont ul > li .layer > ul li .box.on{background: var(--main-color);} #mocktest .result .content .cont ul > li .layer > ul li .box.on p{} #mocktest .result .content .cont ul > li .layer > ul li .box.off{background: #FA897B;} #mocktest .result .content .cont ul > li .layer > ul li .box.off p{} #mocktest .result .content .cont ul > li .layer > ul li .box.check:before{content:'';position:absolute;top:-5px;right:-5px;width:45%;height:45%;background:#F3CD86;border-radius:100%;} #mocktest .result .content .cont ul > li .layer > ul li .box.check p{} #mocktest .result .content .action{margin-top: 20px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} #mocktest .result .content .action .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;width: 50%;border: 1px solid transparent;} #mocktest .result .content .action .btn + .btn{margin-left: 16px;} #mocktest .result .content .action .btn p{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;line-height: 18px;font-size: 12px;} #mocktest .result .content .action .btn p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #mocktest .result .analysis{} #mocktest .result .analysis .head{line-height: 20px;font-size: 12px;text-align: center;margin-bottom: 10px;} #mocktest .result .analysis .cont{margin: 0 0 10px 0;padding: 10px 15px;border-radius: 15px;background: #FFFFFF;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);} #mocktest .result .analysis .cont .tit{margin: 0 0 10px 0;line-height: 20px;font-size: 12px;} #mocktest .result .analysis .cont .txt{} #mocktest .result .analysis .cont .txt dl{height: 20px;display: flex;align-items: center;font-size: 12px;} #mocktest .result .analysis .cont .txt dt{width: 60px;font-weight: bold;} #mocktest .result .analysis .cont .txt dd{flex: 1;position: relative;height: 6px;width: 100%;padding: 0 35px 0 0;} #mocktest .result .analysis .cont .txt dd i{position:absolute;top: 0;left: 0;width: auto;height: 100%;background: #aaaa;border-radius: 6px;} #mocktest .result .analysis .cont .txt dd i p{position:absolute;top:50%;left:100%;margin:0 10px;font-size:10px;white-space:nowrap;transform:translateY(-50%)} #mocktest .result .analysis .cont .txt dl.green dd i{background:#D0E6A5} #mocktest .result .analysis .cont .txt dl.blue dd i{background:var(--main-color)} #mocktest .result .analysis .cont .con{margin-top: 50px;} #mocktest .result .analysis .cont .con ul{display:flex} #mocktest .result .analysis .cont .con li{display:flex;flex-direction: column;text-align: center;align-items: center;justify-content: flex-end;} #mocktest .result .analysis .cont .con li + li{margin-left:auto} #mocktest .result .analysis .cont .con li .graph{flex-shrink: 0;height: 100px;display: flex;align-items: flex-end;} #mocktest .result .analysis .cont .con li .graph p{width: 5px;height: 100%;background: transparent;border-radius:6px;position: relative;} #mocktest .result .analysis .cont .con li .graph p + p{margin-left:3px;} #mocktest .result .analysis .cont .con li .graph em{position:absolute;bottom: 100%;left: 50%;transform: translateX(-50%);margin-bottom: 6px;font-size: 10px;white-space: nowrap;} #mocktest .result .analysis .cont .con li .graph i{position: absolute;bottom: 0;left: 0;width: 100%;height: auto;} #mocktest .result .analysis .cont .con li .graph p.green i{background:#D0E6A5} #mocktest .result .analysis .cont .con li .graph p.blue i{background:var(--main-color)} #mocktest .result .analysis .cont .con li .name{margin-top:6px;font-size:12px;font-weight:bold} #mocktest .result .analysis .desc{margin: 0 0 10px 0;padding: 15px;border-radius: 15px;background: #FFFFFF;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);} #mocktest .result .analysis .desc .tit{margin:0 0 10px 0;font-size:13px;} #mocktest .result .analysis .desc .chart{width:100%;height:60vw} #mocktest .result .analysis .desc .chart >div {width:100%;height:100%;position: relative;z-index: 5;} #mocktest .result .button{margin-top: 20px;display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;} #mocktest .result .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;width: 50%;border: 1px solid transparent;} #mocktest .result .button .btn + .btn{margin-left: 16px;} #mocktest .result .button .btn p{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;line-height: 18px;font-size: 12px;} #mocktest .result .button .btn p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #mocktest .correct{padding: 10px 20px 30px;position: relative;z-index: 2;flex: 1;display: flex;flex-direction: column;} #mocktest .correct .upper{display: flex;flex-direction: column;justify-content: center;text-align: center;margin-bottom: 20px;} #mocktest .correct .upper .tit{line-height: 20px;font-size: 12px;text-align: center;} #mocktest .correct .upper .txt{display: block;line-height: 16px;font-size: 12px;color: #808080;} #mocktest .correct .content{margin-bottom: 10px;} #mocktest .correct .content ul{} #mocktest .correct .content ul > li{margin-bottom: 12px;} #mocktest .correct .content ul > li .view{display:flex;width: 100%;height:40px;padding:0 15px;align-items:center;border-radius: 15px;background:#ffffff;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);} #mocktest .correct .content ul > li .view .subject{line-height: 20px;font-size: 16px;font-weight: bold;text-align: center;white-space: nowrap;} #mocktest .correct .content ul > li .view .total{margin-left: auto;display: flex;align-items: center;text-align: center;} #mocktest .correct .content ul > li .view .total dl{display: flex;flex-direction: column;align-items: center;text-align: center;padding: 0 5px;white-space: nowrap;} #mocktest .correct .content ul > li .view .total dt{font-size: 10px;} #mocktest .correct .content ul > li .view .total dd{position:relative;display: flex;width: 60px;height: 6px;border-radius: 6px;background: #eeeeee;margin-top: 5px;overflow: hidden;} #mocktest .correct .content ul > li .view .total dd i{position:absolute;top:0;left:0;width:auto;height:100%;border-radius: 6px;} #mocktest .correct .content ul > li .view .icon{margin-left: 10px;} #mocktest .correct .content ul > li .view .icon img{height: 20px;width: auto;} #mocktest .correct .content ul > li .view.on .icon img{transform:rotate(180deg)} #mocktest .correct .content ul > li .layer{margin-top: 15px;display:none;} #mocktest .correct .content ul > li .layer.on{display:block} #mocktest .correct .content ul > li .layer > ul{display:flex;flex-wrap:wrap} #mocktest .correct .content ul > li .layer > ul li{width:20%;display:flex;align-items:center;justify-content:center;padding: 5px 10px;} #mocktest .correct .content ul > li .layer > ul li .box{width:100%;padding:100% 0 0 0;border-radius:100%;position:relative;background: #808080;} #mocktest .correct .content ul > li .layer > ul li .box p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size: 16px;color: #ffffff;} #mocktest .correct .content ul > li .layer > ul li .box.on{background: var(--main-color);} #mocktest .correct .content ul > li .layer > ul li .box.on p{} #mocktest .correct .content ul > li .layer > ul li .box.off{background: #FA897B;} #mocktest .correct .content ul > li .layer > ul li .box.off p{} #mocktest .correct .content ul > li .layer > ul li .box.check:before{content:'';position:absolute;top:-5px;right:-5px;width:45%;height:45%;background:#F3CD86;border-radius:100%;} #mocktest .correct .content ul > li .layer > ul li .box.check p{} #mocktest .correct .more{margin-bottom:20px;display:flex;align-items:center;justify-content:center;} #mocktest .correct .more .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;width: 50%;border: 1px solid transparent;} #mocktest .correct .tip{line-height:20px;font-size:12px;color:#333;} #mocktest .correct .tip p{display:block;} #mocktest .correct .button{margin-top: 20px;display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;} #mocktest .correct .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;width: 50%;border: 1px solid transparent;} #mocktest .correct .button .btn + .btn{margin-left: 16px;} #mocktest .correct .button .btn p{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;line-height: 18px;font-size: 12px;} #mocktest .correct .button .btn p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #mocktest .explain .content{position:relative;flex: 1;} #mocktest .explain .content .name{margin-bottom: 10px;width:50%;line-height: 20px;font-size: 12px;font-weight: bold;} #mocktest .explain .content .tool{position: absolute;top: 0;right: 0;display: flex;align-items: center;} #mocktest .explain .content .tool a{position:relative;display: flex;align-items: center;justify-content: center;border-radius: 20px;min-width: 50px;padding: 0 10px;background: var(--main-color);height: 20px;font-size: 12px;color: #fff;font-weight: 500;text-align: center;} #mocktest .explain .content .tool a + a{margin-left: 5px;} #mocktest .explain .content .tool a p{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;font-size: 12px;width: auto;display: none;} #mocktest .explain .content .tool a p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #mocktest .explain .content .tool a:nth-child(3) p{right:0;left: unset;transform:translateX(0)} #mocktest .explain .content .tool a:nth-child(3) p:after{right: 20px;left: unset;transform:translateX(0)} #mocktest .explain .content .problem{margin: 0 0 20px 0;padding: 12px 16px;border-radius:15px;background:#ffffff;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);} #mocktest .explain .content .problem strong{display:block;line-height: 20px;font-size: 12px;font-weight: bold;color: var(--main-color);} #mocktest .explain .content .problem span{display:block;line-height: 20px;font-size: 12px;font-weight: bold;} #mocktest .explain .content .answer{padding: 0 27px 30px;} #mocktest .explain .content .answer ul{} #mocktest .explain .content .answer li{line-height: 20px;font-size: 12px;font-weight: bold;} #mocktest .explain .content .answer li + li{margin-top:20px;} #mocktest .explain .content .answer li.li_select{color:#FA897B} #mocktest .explain .content .answer li.li_correct{color:var(--main-color)} #mocktest .explain .content .exp{padding: 0 27px 30px;line-height:20px;font-size:12px;font-weight:500;} #mocktest .explain .button{margin-top: 20px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} #mocktest .explain .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;flex:1;border: 1px solid transparent;} #mocktest .explain .button .btn + .btn{margin-left: 16px;} /**/ #theory{position:relative;display: flex;flex-direction: column;min-height: calc(var(--vh, 1vh) * 100);overflow: hidden;} #theory .theory{position: relative;padding: 60px 20px -0;overflow: hidden;min-height: calc(var(--vh, 1vh) * 100);margin-bottom: 100px;} #theory .theory .lt-item{/* display:none; */padding: 0;} #theory .theory .lt-item{display: flex;flex-direction: column;padding: 0 0 200px 0;} #theory .theory .lt-item.on{margin-bottom: 0;height: calc((var(--vh, 1vh) * 100) - 190px);overflow-y: auto;} #theory .theory .lt-item .inner{display: flex;flex-direction: column;} #theory .theory .lt-item .head{display:flex;align-items: center;margin: 0 0 30px 0;} #theory .theory .lt-item .name{flex:1;line-height: 30px;font-size: 20px;font-weight:bold;color:#333;overflow: hidden;word-break: keep-all;} #theory .theory .lt-item .uppr{margin: 0 0 0 0;} #theory .theory .lt-item .uppr .cate{border-bottom: 1px solid #333;line-height: 15px;font-size: 12px;color: #808080; padding: 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #theory .theory .lt-item .uppr .save{display: flex;align-items: center;justify-content: flex-end;} #theory .theory .lt-item .uppr .save a{font-size: 12px;font-weight: 500;color: #333;line-height: 30px;margin: 5px 0 0;} #theory .theory .lt-item .text{position:relative;padding: 10px 0;line-height: 1.3;font-size:16px;font-weight: 400;color:#333;overflow: hidden;display: flex;flex-direction: column;gap: 20px;} #theory .theory .lt-item .text:before{/* content:''; */position:absolute;bottom:0;left:0;width:100%;height:50px;background: rgb(255,255,255);background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);} #theory .theory .lt-item .text img{max-width:100%;height:auto;object-fit:contain} #theory .theory .lt-item .more{display:flex;align-items:center;justify-content:center;margin: 50px 0 20px;} #theory .theory .lt-item .more a{display:flex;align-items:center;justify-content:center;text-decoration: underline;line-height: 36px;font-size: 16px;flex-direction: column;color: #666;} #theory .theory .lt-item .more i{width:20px;height:20px;background:url("../img/icon_expend.png") no-repeat 50% 50% / contain} #theory .theory .lt-item .comment{border-top: 2px solid #333;display:none;margin: 0 -20px;} #theory .theory .lt-item .comment.on{display:block; width: 550px; margin: 0 auto;} #theory .theory .lt-item .comment .uppr{display: flex;align-items: center;justify-content: space-between;height: 50px;border-bottom: 1px solid #333;padding: 0 20px;} #theory .theory .lt-item .comment .uppr .total{line-height: 30px;font-size: 16px;font-weight: bold;color: #333;} #theory .theory .lt-item .comment .uppr .act{flex-shrink: 0;} #theory .theory .lt-item .comment .uppr .act a{display: flex;align-items: center;justify-content: center;width: 60px;height: 30px;border-radius: 5px;background: var(--main-color);font-size: 12px;color: #fff;font-weight: bold;} #theory .theory .lt-item .comment .cont{max-height: 200px;} #theory .theory .lt-item .comment .cont > ul{display: flex;flex-direction: column;} #theory .theory .lt-item .comment .cont > ul > li{display: flex;flex-direction: column; } #theory .theory .lt-item .comment .cont > ul > li .top{display: flex;gap: 10px;align-items: center;margin:10px 10px;padding:10px 0 10px;} #theory .theory .lt-item .comment .cont > ul > li .top .ico{width: 40px;height: 40px;background: #d9d9d9;border-radius: 40px;overflow: hidden;} #theory .theory .lt-item .comment .cont > ul > li .top .ico img{} #theory .theory .lt-item .comment .cont > ul > li .top .con{flex: 1;} #theory .theory .lt-item .comment .cont > ul > li .top .flex{display: flex;gap: 10px;} #theory .theory .lt-item .comment .cont > ul > li .top .flex .name{display: flex;align-items: center;gap: 5px;} #theory .theory .lt-item .comment .cont > ul > li .top .flex .name .cert{width: 15px;height: 15px;background: url("../img/ic-cert.png") no-repeat 50% 50% / contain;} #theory .theory .lt-item .comment .cont > ul > li .top .flex .name p{line-height: 20px;font-size: 12px;font-weight: bold;color: #333;} #theory .theory .lt-item .comment .cont > ul > li .top .flex .badge{display:flex;gap:5px;} #theory .theory .lt-item .comment .cont > ul > li .top .flex .badge span{min-width: 50px;height: 20px;display: flex;align-items: center;justify-content: center;text-align: center;font-size: 12px;font-weight: bold;border-radius: 5px;} #theory .theory .lt-item .comment .cont > ul > li .top .flex .act{flex-shrink: 0;margin: 0 0 0 auto;display: flex;align-items: center;justify-content: center;} #theory .theory .lt-item .comment .cont > ul > li .top .flex .act a{width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;} #theory .theory .lt-item .comment .cont > ul > li .top .flex .act a i{width:15px;height:15px;display:block;background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain} #theory .theory .lt-item .comment .cont > ul > li .top .info{line-height: 20px;height: 20px;/* display: flex; *//* align-items: center; *//* flex-wrap: wrap; */display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #theory .theory .lt-item .comment .cont > ul > li .top .info span{font-size:12px;color:#808080} #theory .theory .lt-item .comment .cont > ul > li .top .info span + span:before{content:'|';margin:0 4px;} #theory .theory .lt-item .comment .cont > ul > li > .txt{margin: 0 0 10px;line-height: 30px;font-size: 15px;color: #333;padding: 0 20px;} #theory .theory .lt-item .comment .cont > ul > li .more{border-top: 1px solid #e2e2e2;} #theory .theory .lt-item .comment .cont > ul > li .more a{display: flex;align-items: center;justify-content: center;width: 100%;height: 38px;text-align: center;font-size: 12px;color: #808080;} #theory .theory .lt-item .comment .cont > ul > li .reply{border-top: 1px solid #e2e2e2;margin: 0;padding: 0;flex-direction: column;align-items: unset;padding: 10px 20px;} #theory .theory .lt-item .comment .cont > ul > li .reply > .tit{line-height: 30px;font-size: 12px;font-weight: bold;color: #333;margin: 0 0 8px;} #theory .theory .lt-item .comment .cont > ul > li .reply > .con{} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul{display: flex;flex-direction: column;gap: 15px;} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul > li{} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul > li .tit{display: flex;align-items: center;gap: 10px;line-height: 30px;} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul > li .tit .name{font-size: 12px;font-weight: bold;color: #333;} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul > li .tit .badge{display:flex;gap:5px} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul > li .tit .badge span{display: flex;min-width: 50px;height: 20px;border-radius: 5px;font-size: 12px;font-weight: bold;align-items: center;justify-content: center;padding: 0;} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul > li .tit .act{margin: 0 0 0 auto;display: flex;align-items: center;} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul > li .tit .act a{} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul > li .tit .act a i{width: 15px;height: 15px;display: block;background: url(../img/ic-pencil.png) no-repeat 50% 50% / contain;} #theory .theory .lt-item .comment .cont > ul > li .reply > .con > ul > li .txt{padding: 0 10px;line-height: 30px;font-size: 12px;color: #333;} #theory .theory .lt-item .comment .form{padding: 10px 20px;} #theory .theory .lt-item .comment .form .tit{display: flex;align-items: center;justify-content: space-between;height: 40px;} #theory .theory .lt-item .comment .form .tit p{line-height: 20px;font-size: 12px;color: #333;} #theory .theory .lt-item .comment .form .tit label{} #theory .theory .lt-item .comment .form .tit label{display:flex;gap:10px;cursor: pointer;align-items: center;} #theory .theory .lt-item .comment .form .tit label input{display: none;} #theory .theory .lt-item .comment .form .tit label input ~ p{line-height: 1;font-size: 12px;font-weight: 400;color: #808080;} #theory .theory .lt-item .comment .form .tit label input ~ i{position:relative;width: 16px;height: 16px;border-radius: 16px;border:1px solid #808080;background:#ffffff} #theory .theory .lt-item .comment .form .tit label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 8px;height: 8px;border-radius: 8px;background:#333;} #theory .theory .lt-item .comment .form .con{display: flex;border: 1px solid #e2e2e2;border-radius: 5px;height: 30px;padding: 5px; height: 40px; align-items: center;} #theory .theory .lt-item .comment .form .con input{width: 100%;height: 20px;background: transparent;padding: 0;font-size: 12px;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #theory .theory .lt-item .comment .form .con input:focus, #theory .theory .lt-item .comment .form .con input:active, #theory .theory .lt-item .comment .form .con input:hover{border:unset !important;box-shadow:unset !important;} #theory .theory .lt-item .comment .form .con button{flex-shrink: 0;min-width: 50px;height: 30px;border-radius: 5px;background: var(--main-color);color: #fff;font-size: 12px;font-weight: bold;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #theory .theory .lt-item .comment .badge .bdg1{background: #FFB2F74D;color: #FFB2F7;} #theory .theory .lt-item .comment .badge .bdg2{background: #6AFF8B4D;color: #6AFF8B;} #theory .theory .lt-item .comment .badge .bdg3{background: var(--main-color)4D;color: var(--main-color);} #theory .theory .lt-item .comment .badge .bdg4{background: #9D6FFF4D;color: #9D6FFF;} #theory .theory .rt-item{display:none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;padding: 0;} #theory .theory .rt-item.on{display:block;} #theory .theory .rt-item .inner{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background:#ffffff;z-index:2;border-radius: 30px;overflow:hidden;padding: 30px 35px 40px;display: flex;flex-direction: column;overflow-y: auto;width: 350px; margin: 0 auto; /* 스크롤바 숨기기 */ scrollbar-width: none; /* Firefox */-ms-overflow-style: none; /* IE and Edge */} /* Chrome, Safari, Opera */ #theory .theory .rt-item .inner::-webkit-scrollbar {display: none;} #theory .theory .rt-item .inner .close{font-weight: 400; text-decoration: underline; font-size: 12px; color: #808080; cursor: pointer;} #theory .theory .rt-item .bg{background:#333;opacity:0.5;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} #theory .theory .tabs{margin: 0 0 10px 0;} #theory .theory .tabs ul{display:flex;align-items: center;justify-content: center;} #theory .theory .tabs li{padding: 0 8px;} #theory .theory .tabs li a{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;line-height: 20px;font-size: 12px;font-weight: bold;color: #808080;/* white-space: nowrap; */} #theory .theory .tabs li a:after{content:'';position:absolute;bottom: -2px;left:0;width:100%;height: 2px;background:transparent;z-index: 2;} #theory .theory .tabs li.active a{color: var(--main-color);border-color: var(--main-color);} #theory .theory .tabs li.active a:after{background:var(--main-color)} #theory .theory .sort{margin-bottom:15px;display: flex;height: 20px;align-items: center;justify-content: center;} #theory .theory .sort .con{display:none;} #theory .theory .sort .con.active{display:flex;align-items:center;justify-content:center;} #theory .theory .sort .con a{display: flex;line-height:20px;font-size:12px;font-weight:bold;color:#808080;border-bottom: 2px solid transparent;white-space: nowrap;} #theory .theory .sort .con a.active{color: var(--main-color);border-color: var(--main-color);} #theory .theory .sort .con a + a{margin-left: 16px;} #theory .theory .list{/*display:none;*/margin: 0 0 20px 0;} #theory .theory .list.active{display:block} #theory .theory .list .subtab-box{display:none;} #theory .theory .list .subtab-box.active{display:block} #theory .theory .list .top{border-bottom:1px solid rgba(33,33,33,0.08);display: flex;align-items: center;padding: 8px 0;margin-bottom: 25px;} #theory .theory .list .top .tit{line-height:20px;font-size:12px;} #theory .theory .list .top .btn{display:flex;margin-left:auto;align-items:center;} #theory .theory .list .top .btn a{position:relative;display: flex;align-items: center;justify-content: center;border-radius: 20px;min-width: 50px;padding: 0 10px;background: var(--main-color);height: 20px;font-size: 12px;color: #fff;font-weight: 500;text-align: center;} #theory .theory .list .con{} #theory .theory .list .con ul{} #theory .theory .list .con li{display: flex;flex-direction: column;} #theory .theory .list .con .tit{min-height: 35px;line-height: 35px;font-size: 12px;font-weight: 500;display: flex;cursor: pointer;padding: 0;border-bottom: 1px solid rgba(33,33,33,0.08);background: url("../img/icon_dropdown_off.png") no-repeat right center / auto 20px;display: flex;align-items: center;word-break: keep-all;} #theory .theory .list .con .tit.on{background: url("../img/icon_dropdown_on.png") no-repeat right center / auto 20px;} #theory .theory .list .con .txt{flex-direction: column;display: none;padding: 10px 0 10px 10px;gap: 10px;} #theory .theory .list .con .txt > div{display:flex;align-items:Center;justify-content:space-between;} #theory .theory .list .con .txt.on{display:flex} #theory .theory .list .con .txt a{display: flex;align-items: center;height: 20px;line-height: 20px;font-size: 12px;} #theory .theory .list .con .txt .titSub{flex: 1;font-size: 12px;line-height: 20px;word-break: keep-all;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} #theory .theory .list .con .txt .titSub:hover{color:var(--main-color);font-weight: bold;} #theory .theory .list .con .txt .btnSub{flex-shrink: 0;} #theory .theory .list .con .txt .btnSub a{background: var(--main-color);font-size: 10px;font-weight: bold;color: #ffffff;align-items: center;justify-content: center;min-width: 50px;border-radius: 5px;} #theory .theory .list .con .txt a + a{margin-top: 5px;} #theory .theory .list .drug{} #theory .theory .list .drug .input{} #theory .theory .list .drug .input .tit{padding: 0 15px;margin: 0 0 10px 0;line-height: 20px;font-size: 16px;font-weight: bold;} #theory .theory .list .drug .input .inp{} #theory .theory .list .drug .input .inp ul{} #theory .theory .list .drug .input .inp li{display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;} #theory .theory .list .drug .input .inp li + li{margin-top:10px} #theory .theory .list .drug .input .inp input{text-align: center;width: 50vw;height: 30px;border-bottom: 1px solid rgba(33, 33, 33, 0.08);} #theory .theory .list .drug .input .inp p{margin: 10px 0 0 0;line-height: 16px;font-size: 12px;color: #808080;} #theory .theory .list .drug .input .act{margin-top:20px;display:flex;align-items:Center;justify-content:center;} #theory .theory .list .drug .input .act .btn{display: flex;align-items: center;justify-content: center;width:140px;height:30px;font-size:14px;font-weight:bold;border-radius: 30px;} #theory .theory .list .drug .total{margin:20px 0 0 0;} #theory .theory .list .drug .total dl{display:flex;align-items:center;height:30px;border-bottom: 1px solid rgba(33, 33, 33, 0.08);} #theory .theory .list .drug .total dt{width: 25%;font-size: 12px;text-align: center;} #theory .theory .list .drug .total dd{flex:1;display:flex;align-items:center;} #theory .theory .list .drug .total dd strong{width:75%;text-align: center;font-size: 20px;font-weight: bold;color: var(--main-color);} #theory .theory .list .drug .total dd p{width:25%;text-align:Center;font-size:12px;} #theory .theory .tips{display:block;margin: 0 0 20px 0;line-height: 19px;font-size: 14px;color: #333;} #theory .theory .tips em{font-size: 20px;line-height:28px;} #theory .theory .tips strong{font-weight:bold;} #theory .theory .navBtn{position:absolute;bottom:60px;right: 20px;display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;border-radius: 50px;background: var(--main-color);cursor: pointer;z-index: 99;} #theory .detail{padding: 0 20px 30px;flex: 1;display: flex;flex-direction: column;position: relative;z-index: 2;} #theory .detail .tool{display:flex;flex-shrink: 0;margin-bottom: 10px;justify-content: flex-end;align-items: center;} #theory .detail .tool a{position:relative;display: flex;align-items: center;justify-content: center;border-radius: 20px;min-width: 50px;padding: 0 10px;background: var(--main-color);height: 20px;font-size: 12px;color: #fff;font-weight: 500;text-align: center;} #theory .detail .tool a + a{margin-left:10px} #theory .detail .tool a p{position:absolute;bottom:100%;right: 0;margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap} #theory .detail .tool a p:after{content:'';position: absolute;top: 100%;right: 20px;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;} #theory .detail .text{flex: 1;line-height: 20px;font-size: 12px;font-weight: 500;} #theory .detail .button{margin-top: 20px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} #theory .detail .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;flex:1;border: 1px solid transparent;} #theory .detail .button .btn + .btn{margin-left: 16px;} @media all and (max-width: 1024px) { #community .viewskin .comment{margin: 0;} } @media all and (max-width: 1024px) { #relation_qa{padding:0px 0px;} } @media screen and (max-width: 640px) { #theory .theory .lt-item .head{display:flex;align-items: center;margin: 0 0 10px 0;} #community .listskin{position: relative; margin: 30px auto 110px;} #theory .theory .lt-item .comment.on{width: 100%;} } @media screen and (min-width: 640px) { #community .listskin{position: relative; margin: 30px auto 110px; width: 640px;max-width: 100%;} } /**/ #outcome{position: relative;display: flex;flex-direction: column;min-height: calc((var(--vh, 1vh) * 100) - 80px);} #outcome .outcome{padding:15px 25px 25px;color:#333;} #outcome .outcome .date{margin: 0 0 10px 0;} #outcome .outcome .date .today{margin-bottom: 20px;line-height: 20px;font-size: 20px;font-weight: bold;} #outcome .outcome .date .list{} #outcome .outcome .date .list ul{display: flex;align-items: center;justify-content: center;font-weight:700;} #outcome .outcome .date .list li{width: 20px;height: 40px;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 40px;margin: 0 15px;font-size: 16px;} #outcome .outcome .date .list li strong{font-weight: bold;} #outcome .outcome .date .list li span{} #outcome .outcome .date .list li.sun{} #outcome .outcome .date .list li.sun strong, #outcome .outcome .date .list li.sun span{color:#FA897B} #outcome .outcome .date .list li.on{background:var(--main-color)} #outcome .outcome .date .list li.on strong, #outcome .outcome .date .list li.on span{color:#ffffff} #outcome .outcome .date .text{margin-top: 10px;text-align: right;font-size: 12px;color: #808080;} #outcome .outcome .info{margin: 0 0 10px 0;display: flex;} #outcome .outcome .info .desc{width: calc(50% - 5px);border-radius:15px;background:#ffffff;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);padding: 18px;} #outcome .outcome .info .total{} #outcome .outcome .info .total dl{display: flex;align-items: center;justify-content: space-between;line-height: 20px;font-size: 12px;} #outcome .outcome .info .total dl + dl{margin-top:5px;} #outcome .outcome .info .total dt{} #outcome .outcome .info .total dd{font-weight: bold;} #outcome .outcome .info .grade{margin-left: 10px;padding: 18px 5px;} #outcome .outcome .info .grade a{display: flex;align-items: center;justify-content: center;height: 100%;} #outcome .outcome .info .grade a img{height: 50px;width: auto;} #outcome .outcome .info .grade a strong{font-size: 16px;} #outcome .outcome .info .grade a img + strong{margin-left:5px;} #outcome .outcome .todayword{margin: 0 0 10px 0;border-radius: 15px;padding: 15px 18px;background: #FFFFFF;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);display: flex;} #outcome .outcome .todayword .form, #outcome .outcome .todayword form{display:flex;width: 100%;} #outcome .outcome .todayword input{flex: 1;height: 20px;font-size: 12px;} #outcome .outcome .todayword button{flex-shrink: 0;width: 50px;height: 20px;background: var(--main-color);border-radius: 50px;font-size: 12px;font-weight: bold;color: #fff;} #outcome .outcome .todaygoal{position:relative;border-radius: 15px;padding: 15px 18px;background: #FFFFFF;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);display: flex;flex-direction: column;} #outcome .outcome .todaygoal .tit{line-height: 20px;font-size: 16px;margin-bottom: 20px;font-weight:600;} #outcome .outcome .todaygoal .txt{} #outcome .outcome .todaygoal .txt dl{display:flex;align-items:center;justify-content:space-between;line-height:18px;font-size:14px;font-weight:bold;} #outcome .outcome .todaygoal .txt dl + dl{margin-top:10px} #outcome .outcome .todaygoal .txt dl dt{color:#333;} #outcome .outcome .todaygoal .txt dl dd{color:#333} #outcome .outcome .todaygoal .txt dl.un dd{color:#FA897B} #outcome .outcome .todaygoal .txt .placeholder{padding: 18px;line-height: 20px;font-size: 12px;color: #808080;} #outcome .outcome .todaygoal .con{} #outcome .outcome .todaygoal .con dl{display:flex;line-height:20px;font-size:12px;justify-content:space-between} #outcome .outcome .todaygoal .con dl + dl{margin-top:5px;} #outcome .outcome .todaygoal .con dt{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;word-break: break-all;height: 20px;} #outcome .outcome .todaygoal .con dd{font-weight: bold;flex-shrink: 0;height: 20px;} #outcome .outcome .todaygoal .act{position: absolute;top: 15px;right: 18px;} #outcome .outcome .todaygoal .act a{width: 50px;height: 20px;border-radius: 50px;font-size: 12px;font-weight: bold;display: flex;align-items: center;justify-content: center;} #outcome .goal{padding: 15px 25px 25px;flex: 1;display: flex;flex-direction: column;} #outcome .goal .date{margin: 0 0 10px 0;} #outcome .goal .date .today{margin-bottom: 20px;line-height: 20px;font-size: 16px;font-weight: bold;} #outcome .goal .date .list{} #outcome .goal .date .list ul{display: flex;align-items: center;justify-content: center;} #outcome .goal .date .list li{width: 20px;height: 40px;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 40px;margin: 0 8px;font-size: 12px;} #outcome .goal .date .list li strong{font-weight: bold;} #outcome .goal .date .list li span{} #outcome .goal .date .list li.sun{} #outcome .goal .date .list li.sun strong, #outcome .goal .date .list li.sun span{color:#FA897B} #outcome .goal .date .list li.on{background:var(--main-color)} #outcome .goal .date .list li.on strong, #outcome .goal .date .list li.on span{color:#ffffff} #outcome .goal .date .text{margin-top: 10px;text-align: right;font-size: 12px;color: #808080;} #outcome .goal .input{position:relative;margin-top: 50px;margin-bottom: 30px;display: flex;flex-direction: column;align-items: center;} #outcome .goal .input .sett{margin-top:30px;} #outcome .goal .input .sett a{width: 50px;height: 30px;border-radius: 50px;font-size: 12px;font-weight: bold;display: flex;align-items: center;justify-content: center;} #outcome .goal .input .desc{position: relative;} #outcome .goal .input .desc + .desc{margin-top: 30px;} #outcome .goal .input button{width: 100%;height: 30px;display: flex;align-items: center;justify-content: center;padding: 0 20px;font-size: 16px;border-bottom: 1px solid rgba(33,33,33,0.08);text-align: center;background: transparent;color: #808080;} #outcome .goal .input ul{position:absolute;z-index: 10;top: 30px;left: 50%;padding: 10px 0;width: 200px;max-height: 180px;overflow-y: auto;background: #ffffff;display: none;transform: translateX(-50%);} #outcome .goal .input ul::-webkit-scrollbar-track{} #outcome .goal .input ul::-webkit-scrollbar{width:6px;} #outcome .goal .input ul::-webkit-scrollbar-thumb{background-color:var(--main-color);border-radius:3px;} #outcome .goal .input ul.on{display:block;} #outcome .goal .input ul li{} #outcome .goal .input ul li a{display: flex;align-items: center;justify-content: center;text-align: center;line-height: 30px;font-size: 16px;color: #808080;} #outcome .goal .selected{margin-top: auto;} #outcome .goal .selected ul{padding: 0 20px;} #outcome .goal .selected li{position: relative;margin-bottom: 10px;} #outcome .goal .selected li .name{padding: 0 40px 0 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 12px;} #outcome .goal .selected li .dele{position: absolute;top: 0;right: 0;} #outcome .goal .selected li .dele a{line-height: 20px;font-size: 12px;color: #979797;display: block;} #outcome .goal .button{margin-top: 30px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} #outcome .goal .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;flex:1;border: 1px solid transparent;} #outcome .goal .button .btn + .btn{margin-left: 16px;} #outcome .grade{padding: 0 25px 25px;flex: 1;display: flex;flex-direction: column;} #outcome .grade .text{line-height: 20px;font-size: 12px;color: #808080;margin: 0 0 15px 0;display: flex;align-items: center;} #outcome .grade .text .act{margin-left:auto;display:flex;align-items:center;justify-content:center;} #outcome .grade .text .act .btn{position: relative;display: flex;align-items: center;justify-content: center;border-radius: 20px;min-width: 50px;padding: 0 10px;background: var(--main-color);height: 20px;font-size: 12px;color: #fff;font-weight: 500;text-align: center;} #outcome .grade .list{} #outcome .grade .list ul{} #outcome .grade .list li{} #outcome .grade .list li .box{display: flex;align-items: center;padding: 5px 15px;height: 40px;border-radius: 15px;background: #FFFFFF;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);font-size: 12px;line-height: 30px;} #outcome .grade .list li .txt{display: none;padding: 20px 15px;} #outcome .grade .list li .txt span{display: flex;align-items: center;line-height: 20px;font-size: 12px;} #outcome .grade .list li .txt span + span{margin-top:10px;} #outcome .grade .list li .txt span p{} #outcome .grade .list li .txt span a{margin-left: auto;color: #808080;} #outcome .grade .list li .txt button{margin:20px auto 0;display:flex;align-items:center;justify-content:center;width:53px;height:22px;border-radius:22px;font-size:13px;color:#fff;} #outcome .grade .list li + li{margin-top: 10px;} #outcome .grade .list li.on .txt{display: block;} #outcome .grade .list .tit{width: 45px;margin-right: 2px;flex-shrink: 0;} #outcome .grade .list .inp{width: 60px;flex-shrink: 0;border-bottom: 1px solid rgba(33, 33, 33, 0.08);} #outcome .grade .list .inp input{width: 100%;height: 30px;border: 1px solid transparent;border-bottom: 1px solid rgba(33, 33, 33, 0.08);text-align: center;font-size: 12px;font-weight: bold;} #outcome .grade .list .inp input:read-only{background:transparent !important;} #outcome .grade .list .average{margin: 0 12px;flex: 1;display: flex;align-items: center;} #outcome .grade .list .average dl {display: flex;width: 100%;align-items: center;} #outcome .grade .list .average dt {width: 26px;text-align: left;flex-shrink: 0;} #outcome .grade .list .average dd {position: relative;width: 100%;flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;} #outcome .grade .list .average dd span {position: relative;width: 100%;height: 6px;border-radius: 6px;display: flex;} #outcome .grade .list .average dd span + span {margin-top: 2px;} #outcome .grade .list .average dd span i {position: absolute;top: 0;left: 0;width: auto;height: 100%;border-radius: 6px;} #outcome .grade .list .average dd .my {} #outcome .grade .list .average dd .my i {background: #D0E6A5;} #outcome .grade .list .average dd .av {} #outcome .grade .list .average dd .av i {background: var(--main-color);} #outcome .grade .list .average dd i {position: absolute;top: 0;left: 0;width: auto;height: 100%;background: var(--main-color)} #outcome .grade .list .total{width: 50px;flex-shrink: 0;} #outcome .grade .list .act{width:70px;flex-shrink:0;} #outcome .grade .list .act button{position:relative;width:100%;height:30px;text-align:left;background: transparent;display: flex;align-items: center;} #outcome .grade .list .act button:after{content:'';margin-left:auto;width: 18px;height: 18px;background: transparent url("../img/icon_more_dropdown.png") no-repeat right center/ auto 18px;display: flex;} #outcome .grade .list .act button.on:after{transform:rotate(180deg)} #outcome .grade .more{display:flex;margin:20px 0 30px 0;align-items:center;justify-content:center;} #outcome .grade .more a{position:relative;display: flex;align-items: center;justify-content: center;border-radius: 20px;min-width: 50px;padding: 0 18px;background: var(--main-color);height: 30px;font-size: 12px;color: #fff;font-weight: 500;text-align: center;} #outcome .grade .more a + a{margin-left:10px} #outcome .grade .more a p{position:absolute;bottom:100%;right: 0;margin: 0 0 8px 0;padding:8px 12px;border-radius:5px;background:var(--main-color);color:#ffffff;white-space:nowrap;display: none;} #outcome .grade .more a p:after{content:'';position: absolute;top: 100%;left: 50%;border-top: 6px solid var(--main-color);border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);} #outcome .grade .button{margin-top:auto;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} #outcome .grade .button .btn{padding: 0 6px;display: flex;height: 30px;border-radius: 30px;font-size: 15px;align-items: center;justify-content: center;flex:1;border: 1px solid transparent;} #outcome .grade .button .btn + .btn{margin-left: 16px;} /**/ #wrap i.icon_back{display:block;background: url("../img/icon_headers_back.png") no-repeat 50% 50% / 24px auto;} #wrap i.icon_close{display:block;background: url("../img/icon_headers_close.png") no-repeat 50% 50% / 24px auto;} #wrap i.icon_dott{display:block;background: url("../img/icon_dott.png") no-repeat 50% 50% / 24px auto;} #wrap i.icon_search{display:block;background: url("../img/icon_search.png") no-repeat 50% 50% / 24px auto;} #wrap i.icon_reset{display:block;background: url("../img/icon_reset.png") no-repeat 50% 50% / 20px auto;} #wrap i.icon_clear{display:block;background: url("../img/icon_clear.png") no-repeat 50% 50% / 20px auto;} #wrap i.icon_filter{display:block;background: url("../img/icon_filter.png") no-repeat 50% 50% / 20px auto;} #wrap i.icon_plus{display:block;background: url("../img/icon_plus.png") no-repeat 50% 50% / 24px auto;} /* [[ 20230301 ]] */ /**/ #wrap{} #wrap .heading{position:relative;padding: 10px 42px;display: flex;height:50px;align-items:center;flex-shrink: 0;} #wrap .heading .back{position:absolute;top:50%;left:0;width: 30px;height: 30px;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;} #wrap .heading .back a{display:flex;width: 100%;height: 100%;background:url("../img/icon_back.png") no-repeat 50% 50% / contain;text-indent: -9999em;overflow: hidden;vertical-align: top;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #wrap .heading .input{display:flex;width:100%;height:40px;border-radius:20px;padding:5px;line-height:30px;border:3px solid var(--main-color);} #wrap .heading .input .box{display:flex;width: 100%;align-items: center;} #wrap .heading .input input{flex:1;padding: 2px 8px;font-size: 12px;} #wrap .heading .input button{display:flex;align-items:center;justify-content:center;width: 50px;height: 25px;border-radius: 20px;background: var(--main-color);text-indent: -9999em;} #wrap .heading .input button i{width:15px;height:15px;background:url("../img/icon_search_zoom.png") no-repeat 50% 50% / contain} #wrap .heading .form{display:flex;width:100%;height: 40px;border-radius: 40px;padding:5px;line-height:20px;border: 1px solid #e0e0e0;} #wrap .heading .form input{flex:1;padding: 2px 8px !important;font-size: 12px;height: 30px !important;background: transparent;} #wrap .heading .form button{display:flex;align-items:center;justify-content:center;width: 50px;height: 30px;border-radius: 20px;background: var(--main-color);font-size: 13px;color: #fff;} #wrap .heading .form button i{width:15px;height:15px;background:url("../img/icon_search_zoom.png") no-repeat 50% 50% / contain} /**/ .searchInput { margin: 20px auto; text-align: center; display: flex; justify-content: center; } .searchInput input#keyword { text-align: center; font-size: 16px;} .searchInput form { display:flex;width:80%;height: 44px;border-radius: 40px;padding:5px;line-height:20px;border: 2px solid var(--main-color); justify-content: center; } .searchInput button { display:flex;align-items:center;justify-content:center;width: 50px;height: 30px;border-radius: 20px;background: var(--main-color);font-size: 16px;color: #fff; } .searchInput button i { width:15px;height:15px;background:url("../img/icon_search_zoom.png") no-repeat 50% 50% / contain; } /**/ #authority{padding: 40px 30px;min-height: calc(var(--vh, 1vh) * 100);display: flex;flex-direction: column;} #authority .title{line-height: 20px;font-size: 16px;font-weight: bold;color: #333;text-align: center;padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid rgba(33, 33, 33, 0.08);} #authority .cont{} #authority .cont .tit{line-height: 15px;font-size: 16px;font-weight: bold;color: #333;margin-bottom: 15px;} #authority .cont .con{} #authority .cont .con ul{} #authority .cont .con li{display: flex;align-items: center;height: 70px;padding: 15px 15px;} #authority .cont .con .auto_ico{width: 40px;height: 40px;flex-shrink: 0;margin-right: 10px;} #authority .cont .con .auto_con{flex: 1;display: flex;flex-direction: column;} #authority .cont .con .auto_tit{line-height: 15px;font-size: 16px;font-weight: bold;color: #333;} #authority .cont .con .auto_txt{line-height: 15px;font-size: 16px;color: #333;} #authority .cont .txt{margin-top: 15px;line-height: 16px;font-size: 12px;font-weight: bold;color: #333;text-align: center;} #authority .button{display: flex;align-items: center;justify-content: center;margin-top: auto;} #authority .button .btn{display: flex;align-items: center;justify-content: center;width: 100%;height: 50px;border-radius: 50px;font-size: 16px;} /**/ #alarm{position: relative;padding: 0 !important;} #alarm .list{padding: 30px;} #alarm .list .tit{margin-bottom: 10px;line-height: 20px;font-size: 12px;font-weight: bold;color: #333;} #alarm .list .con{} #alarm .list .con ul{border-top: 1px solid rgba(33,33,33,0.08);} #alarm .list .con li{border-bottom: 1px solid rgba(33,33,33,0.08);padding: 12px;} #alarm .list .con li a{display: block;} #alarm .list .con li .cate{line-height: 16px;margin-bottom: 4px;font-size: 8px;color: #979797;} #alarm .list .con li .text{line-height: 20px;font-size: 12px;font-weight: 500;color: #333;} #alarm .list .con li .date{margin-top: 4px;line-height: 16px;font-size: 8px;color: #9797;} /**/ #scrap{} #scrap .list{position:relative;margin: 30px;} #scrap .list.on{display:block} #scrap .list.off{display:none} #scrap .list .tit{margin-bottom:20px;line-height:20px;font-size:12px;font-weight:bold;} #scrap .list .act{position: absolute;top: 0;right: 0;} #scrap .list .act a{display: flex;align-items: center;justify-content: center;line-height: 20px;font-size: 12px;color: #979797;} #scrap .list .act a.on{color:var(--main-color)} #scrap .list .con{flex: 1;display: flex;flex-direction: column;justify-content: center;} #scrap .list .con ul{} #scrap .list .con li{position:relative;} #scrap .list .con01{} #scrap .list .con01 li{margin-bottom:10px;} #scrap .list .con01 li a{display:flex;border-radius:15px;overflow:hidden;} #scrap .list .con01 li img{display:block;width:100%;height:auto;object-fit:contain} #scrap .list .con02 li{margin-bottom:20px;} #scrap .list .con02 li .box{border-radius: 15px;overflow: hidden;background: #ffffff;box-shadow: 0 2px 4px rgba(0,0,0,0.25);} #scrap .list .con02 .upper{padding: 12px;} #scrap .list .con02 .upper .tags{line-height: 12px;font-size: 8px;color: var(--main-color);} #scrap .list .con02 .upper .subject{line-height: 18px;font-size: 12px;color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #scrap .list .con02 .upper .text{margin-top: 6px;line-height: 12px;font-size: 8px;color: #979797;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #scrap .list .con02 .upper .writer{margin-top: 8px;font-size: 8px;color: #333;} #scrap .list .con02 .info{border-top: 1px solid rgb(33 33 33 / 8%);display: flex;align-items: center;height: 26px;padding: 6px 12px;} #scrap .list .con02 .info .time{margin-right: auto;font-size: 8px;color: #979797;} #scrap .list .con02 .info .tool{display: flex;align-items: center;margin-left: auto;} #scrap .list .con02 .info .tool a{display: flex;align-items: center;} #scrap .list .con02 .info .tool a + a{margin-left: 4px;} #scrap .list .con02 .info .tool img{height: 10px;margin: 0 4px 0 0;flex-shrink: 0;} #scrap .list .con02 .info .tool em{font-size: 8px;color: #979797;} /**/ #mywrite{} #mywrite .mywrite{position:relative;margin: 30px 30px 100px 30px;} #mywrite .mywrite .tit{margin-bottom:20px;line-height:20px;font-size:12px;font-weight:bold;} #mywrite .mywrite .act{position: absolute;top: 0;right: 0;} #mywrite .mywrite .act ul{display:flex;} #mywrite .mywrite .act li{border: 0 !important;} #mywrite .mywrite .act li + li{margin-left: 10px;} #mywrite .mywrite .act li a{display: flex;align-items: center;justify-content: center;line-height: 20px;font-size: 12px;color: #979797;border: 0 !important;height: auto !important;white-space: nowrap;} #mywrite .mywrite .act li.active a{color:var(--main-color)} #mywrite .mywrite .con{display: none;flex-direction: column;justify-content: center;} #mywrite .mywrite .con.active{display:flex} #mywrite .mywrite .con ul{} #mywrite .mywrite .con li{margin-bottom:20px;} #mywrite .mywrite .con li .box{border-radius: 15px;overflow: hidden;background: #ffffff;box-shadow: 0 2px 4px rgba(0,0,0,0.25);} #mywrite .mywrite .con .upper{padding: 12px;} #mywrite .mywrite .con .upper .tags{line-height: 12px;font-size: 8px;color: var(--main-color);} #mywrite .mywrite .con .upper .subject{line-height: 18px;font-size: 12px;color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #mywrite .mywrite .con .upper .text{margin-top: 6px;line-height: 12px;font-size: 8px;color: #979797;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #mywrite .mywrite .con .upper .writer{margin-top: 8px;font-size: 8px;color: #333;} #mywrite .mywrite .con .info{border-top: 1px solid rgb(33 33 33 / 8%);display: flex;align-items: center;height: 26px;padding: 6px 12px;} #mywrite .mywrite .con .info .time{margin-right: auto;font-size: 8px;color: #979797;} #mywrite .mywrite .con .info .tool{display: flex;align-items: center;margin-left: auto;} #mywrite .mywrite .con .info .tool a{display: flex;align-items: center;} #mywrite .mywrite .con .info .tool a + a{margin-left: 4px;} #mywrite .mywrite .con .info .tool img{height: 10px;margin: 0 4px 0 0;flex-shrink: 0;} #mywrite .mywrite .con .info .tool em{font-size: 8px;color: #979797;} /**/ #aicen{} #aicen .aicen{min-height: calc((var(--vh, 1vh) * 100) - 50px - 71px);display: flex;flex-direction: column;padding: 30px;} #aicen .aicen .image{display: flex;align-items: center;justify-content: center;padding: 30px 20px 20px 20px;} #aicen .aicen .image.spin{animation: spin 3s 2s linear infinite;} #aicen .aicen .image img{display:block;width:auto;max-width:100%;height:auto} #aicen .aicen .title{line-height: 30px;font-size: 20px;margin: 10px auto;padding: 30px 0 0 20px;} #aicen .aicen .text{line-height: 30px;font-size: 20px;margin-bottom: 10px;margin:20px 0;text-align:center;} #aicen .aicen .textarea{line-height: 30px;font-size: 20px;margin:20px 0 50px;text-align:center;} #aicen .aicen .textarea textarea{padding: 20px;border-radius: 15px;height: 300px;width: 100%;background: #ffffff;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);line-height: 20px;font-size: 16px;} #aicen .aicen .input{display: flex;flex-direction: column;width: 300px;margin: 0 auto;} #aicen .aicen .input input{display: flex;height: 40px;align-items: center;border-bottom: 1px solid #e0e0e0;font-size: 16px;padding: 0 20px;} #aicen .aicen .input em{padding: 0 20px;margin: 10px 0 0 0;line-height: 20px;font-size: 16px;color: #979797;} #aicen .aicen .help{margin-top: 50px;display: flex;flex-direction: column;align-items: center;justify-content: center;} #aicen .aicen .help p{line-height: 16px;margin-bottom: 12px;font-size: 12px;color: #979797;} #aicen .aicen .help a{display: flex;align-items: center;justify-content: center;min-width: 140px;height: 30px;padding: 0 20px;border-radius: 30px;border: 1px solid var(--main-color);box-shadow: 0 2px 4px rgba(0,0,0,0.25);font-size: 12px;} #aicen .aicen .button{margin-top: auto;display: flex;justify-content: flex-end;align-items: center;} #aicen .aicen .button .btn{display: flex;align-items: center;justify-content: center;width: 200px;height: 30px;border-radius: 30px;overflow: hidden;border: 1px solid transparent;} #aicen .aicen .button .btn + .btn{margin-left:10px;} #aicen .aianswer{display: flex;flex-direction: column;padding: 30px 30px 100px 30px;} #aicen .aianswer .title{line-height: 30px;font-size: 20px;margin-bottom: 25px;padding: 0 0 0 20px;} #aicen .aianswer .text{padding: 22px 12px 28px;border-radius: 15px;background: #ffffff;box-shadow: 0 2px 4px rgba(0,0,0,0.25);line-height: 20px;font-size: 12px;color: #333;} #aicen .aianswer .tool{display:flex;margin-top:20px;align-items:center;justify-content:center;} #aicen .aianswer .tool a{display: flex;flex-direction: column;align-items: center;justify-content: center;} #aicen .aianswer .tool a i{width:40px;height:40px;margin:0 auto;border-radius:40px;background:#ffffff;box-shadow:0 4px 4px rgba(0,0,0,0.25);display: flex;align-items: center;justify-content: center;} #aicen .aianswer .tool a i img{display:block;width:auto;max-width:30px;} #aicen .aianswer .tool a p{margin-top: 10px;line-height: 16px;font-size: 12px;color: #979797;} #aicen .aianswer .tool a + a{margin-left: 20px;} #aicen .aianswer .button{margin-top: 20px;display:flex;align-items:center;justify-content: center;} #aicen .aianswer .button .btn{display:flex;align-items: center;justify-content: center;height: 30px;width: 50%;border-radius: 30px;} #aicen .aianswer .button .btn + .btn{margin-left:10px;} #aicen .aianswer .caution{margin-top:20px;line-height:10px;font-size:8px;color:#979797} #aicen .aianswer .link{margin: 30px 0;} #aicen .aianswer .link a{position: relative;display:flex;align-items:center;width: 100%;height: 30px;font-size: 16px;font-weight: 500;} #aicen .aianswer .link a:after{content:'';position:absolute;top:50%;right:0;transform:translateY(-50%);width:24px;height:24px;background:url("../img/icon_links.png") no-repeat 50% 50% / contain} #aicen .aianswer .link a + a{margin-top: 20px !important;} /**/ #mych{position: relative;} #mych .header{display:flex;align-items:center;border-bottom: 1px solid #e0e0e0;height: 50px;margin: 0 30px;} #mych .header .user{margin-right:auto;margin-left: -10px;line-height: 18px;font-size: 12px;font-weight: 700;color: #989898;} #mych .header .user strong{display: flex;line-height: 20px;font-size: 16px;font-weight: bold;color: #333333;} #mych .header .tool{margin-left: auto;} #mych .header .tool ul{display:flex;} #mych .header .tool li{} #mych .header .tool li a{display:flex;width:15px;height:15px;} #mych .header .tool li img{display:block;width:auto;height:100%} #mych .header .tool li + li{margin-left:5px;} #mych .header .my{margin-left:10px;margin-right: -10px;} #mych .header .my a{display:flex;width:35px;height:35px;border-radius:35px;overflow:hidden} #mych .header .my img{display:block;width:auto;height:100%} #mych .mych{padding: 0 30px 100px;} @media (min-width: 768px) { #mych .mych { width: 60%; margin: 0 auto; } } #mych .mych .list{position:relative;margin: 20px 0 10px 0;} #mych .mych .list .tit{margin-bottom:10px;line-height:20px;font-size:16px;font-weight:bold;} #mych .mych .list .act{position:absolute;top:0;right:0;} #mych .mych .list .act a{font-size: 12px;color: #fff;display: flex;align-items: center;justify-content: center;width: 50px;height: 20px;border-radius: 20px;background: var(--main-color);} #mych .mych .list .con{border: solid 1px lightgray;border-radius: 15px;padding: 15px 15px; }#mych .mych .list .con ul{} #mych .mych .list .con li{position: relative;margin-bottom: 20px;} #mych .mych .list .con li .name{padding: 0 40px 0 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 12px;} #mych .mych .list .con li .dele{ position: absolute;top: 0px;right: 10px;} #mych .mych .list .con li .delebtn{ position: absolute;top: 10px;right: 10px;} #mych .mych .list .con li .dele a{line-height: 20px;font-size: 12px;color: #979797;display: block;} #mych .mych .list .con li:last-child{border-bottom:0;} #mych .mych .list .con .empty{display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 30px 0;} #mych .mych .list .con .empty p{line-height: 20px;font-size: 12px;} #mych .mych .list .con .empty a{margin-top: 5px;display: flex;align-items: center;justify-content: center;min-width: 50px;height: 20px;border-radius: 20px;background: var(--main-color);color: #fff;font-size: 12px;} #mych .mych .list .med{margin-bottom: 30px;} #mych .mych .list .med ul{display:flex;align-items: center;justify-content: center;} #mych .mych .list .med li{margin:0 3px;display:flex;flex-direction:column;align-items:center;text-align:center;} #mych .mych .list .med img{} #mych .mych .list .med a{display: flex;align-items: center;justify-content: center;min-width: 80px;height: 30px;border-radius: 30px;background: var(--main-color);color: #fff;font-size: 12px;margin-top: 8px;} #mych .mych .list .con .result .box {position: relative;border-radius: 10px;border: 1px solid #e0e0e0;padding: 40px 20px 20px;margin-bottom: 5px;} #mych .mych .result .box .delebtn a img {display: block;height: 100%;width: 30px;} /**/ #mychset{position: relative;} #mychset .header{display:flex;align-items:center;border-bottom: 1px solid #e0e0e0;height: 50px;margin: 0 30px;} #mychset .header .user{margin-right:auto;margin-left: -10px;line-height: 18px;font-size: 12px;font-weight: 700;color: #989898;} #mychset .header .user strong{display: flex;line-height: 20px;font-size: 16px;font-weight: bold;color: #333333;} #mychset .header .tool{margin-left: auto;} #mychset .header .tool ul{display:flex;} #mychset .header .tool li{} #mychset .header .tool li a{display:flex;width:15px;height:15px;} #mychset .header .tool li img{display:block;width:auto;height:100%} #mychset .header .tool li + li{margin-left:5px;} #mychset .header .my{margin-left:10px;margin-right: -10px;} #mychset .header .my a{display:flex;width:35px;height:35px;border-radius:35px;overflow:hidden} #mychset .header .my img{display:block;width:auto;height:100%} #mychset .mychset{display:flex;flex-direction:column;padding: 0 30px 100px;min-height: calc((var(--vh, 1vh) * 100) - 50px);} #mychset .mychset .title{padding: 45px 20px 10px;line-height: 30px;font-size: 20px;flex-shrink:0} #mychset .mychset .content{flex:1;display:flex;flex-direction:column;} #mychset .mychset .image{margin:auto 0;display:flex;flex-direction:column;align-items:center;justify-content:center;} #mychset .mychset .image img{display:block;width:auto;max-width:100%;height:auto;} #mychset .mychset .input{display: flex;flex-direction: column;margin-top: 60px;position: relative;} #mychset .mychset .input input{display: flex;height: 40px;align-items: center;border-bottom: 1px solid #e0e0e0;font-size: 16px;padding: 0 20px;} #mychset .mychset .input em{padding: 0 20px;margin: 10px 0 0 0;line-height: 16px;font-size: 12px;color: #979797;} #mychset .mychset .input .list{position:absolute;top: 40px;left:0;width:100%;height:auto;background:#ffffff;z-index:2;padding: 10px 0;display: none;} #mychset .mychset .input .list ul{} #mychset .mychset .input .list li{margin-bottom:6px;} #mychset .mychset .input .list li button{padding:0 20px;line-height:30px;font-size:16px;color:#979797} #mychset .mychset .button{display:flex;align-items:center;margin-top: 20px;} #mychset .mychset .button .btn{display:flex;flex: 1;align-items: center;justify-content: center;height: 30px;width: 100%;border-radius: 30px;} #mychset .mychset .button .btn + .btn{margin-left:10px;} #mychset .mychset .cate{ margin-bottom: 20px; } #mychset .mychset .cate .swiper-wrapper{border: 0 !important;padding: 0 !important;background: #fff;} #mychset .mychset .cate .swiper-slide{width: auto;} #mychset .mychset .cate .swiper-slide a{border-radius: 30px;padding: 0 10px;border: 1px solid #e0e0e0;background: #ffffff;height: 30px;display: flex;align-items: center;justify-content: center;font-size: 14px;} #mychset .mychset .cate .swiper-slide a:after{display:none !important} #mychset .mychset .cate .swiper-slide a.active{background:var(--main-color);border-color:var(--main-color);color:#ffffff} #mychset .mychset .form{margin-bottom: 20px;} #mychset .mychset .form .tit{line-height: 20px;font-size: 12px;font-weight: bold;margin-bottom: 10px;padding: 0 10px;} #mychset .mychset .form .con{display:flex;border: 1px solid #979797;} #mychset .mychset .form .con .dp{width:50%;flex-shrink:0;border-right: 1px solid #979797;padding: 10px;overflow-y: auto;} #mychset .mychset .form .con .dp::-webkit-scrollbar-track{background-color:#ffffff;border-radius:3px;overflow:hidden;} #mychset .mychset .form .con .dp::-webkit-scrollbar{width:3px;height:3px;background-color:#ffffff;border-radius:3px;} #mychset .mychset .form .con .dp::-webkit-scrollbar-thumb{background-color:#979797;border-radius:3px;} #mychset .mychset .form .con .dp ul{} #mychset .mychset .form .con .dp li{margin-bottom: 5px;} #mychset .mychset .form .con .dp li:last-child{border-bottom:0;} #mychset .mychset .form .con .dp li a{display: flex;align-items: center;justify-content: flex-start;min-height: 30px;border-radius: 30px;background: #ffffff;padding: 7px 12px;font-size: 12px;line-height: 16px;} #mychset .mychset .form .con .dp li a.on{color: #ffffff;background: var(--main-color);} #mychset .mychset .form .con .dp li a.disabled{pointer-events: none;} #mychset .mychset .form .con .dp:nth-child(2){border-right:0;} #mychset .mychset .form .con .dp1{} #mychset .mychset .form .con .dp2{} #mychset .mychset .form .con .dp2 ul{display:none} #mychset .mychset .form .con .dp2 ul.on{display:block} #mychset .mychset .selected{} #mychset .mychset .selected ul{padding: 0 20px;} #mychset .mychset .selected li{position: relative;margin-bottom: 10px;} #mychset .mychset .selected li .name{padding: 0 40px 0 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 12px;} #mychset .mychset .selected li .dele{position: absolute;top: 0;right: 0;} #mychset .mychset .selected li .dele a{line-height: 20px;font-size: 12px;color: #979797;display: block;} #mychset .mychset .mych{position: relative;margin: 18px 0;} #mychset .mychset .mych .tit{margin-bottom: 35px;line-height: 36px;font-size: 16px;font-weight: bold;text-align: center;} #mychset .mychset .mych .con{} #mychset .mychset .mych .con ul{} #mychset .mychset .mych .con li{position: relative;display: flex;align-items: center;margin: 20px 0;} #mychset .mychset .mych .con li .name{padding: 0 40px 0 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 12px;} #mychset .mychset .mych .con li .dele{position: absolute;top: 0;right: 0;} #mychset .mychset .mych .con li .dele a{line-height: 20px;font-size: 12px;color: #979797;display: block;} #mychset .mych .result .box {position: relative;border-radius: 30px;border: 1px solid #e0e0e0;padding: 20px 20px 20px;margin-bottom: 5px;} #mychset .mych .result .box .delebtn a img {display: block;height: 100%;width: 30px;} #mychset .mych li .name{padding: 0 40px 0 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 16px; font-weight:bold;} #mychset .mych li .dele{ position: absolute;top: 0px;right: 10px;} #mychset .mych li .delebtn{ position: absolute;top: 10px;right: 10px;} #mychset .mych li .dele{ position: absolute;top: 0px;right: 10px;} #mychset .mych li .delebtn{ position: absolute;top: 10px;right: 10px;} /**/ #chat{} #chat .list{position: relative;padding: 30px 30px 100px;} #chat .list .tit{margin-bottom:10px;line-height:20px;font-size:12px;font-weight:bold;color:#333333} #chat .list .con{} #chat .list .con ul{border-top:1px solid rgb(33 33 33 / 0.08); } #chat .list .con li{border-bottom:1px solid rgb(33 33 33 / 0.08); } #chat .list .con li a{display: flex;align-items: center;padding:10px} #chat .list .con li .icon{width:30px;height:30px;border-radius:30px;overflow:hidden;flex-shrink:0;} #chat .list .con li .icon img{display:block;width:100%;height:100%;object-fit:Cover;} #chat .list .con li .cont{flex:1;padding:0 12px;display:flex;flex-direction:column;} #chat .list .con li .name{line-height:20px;font-size:16px;font-weight:bold;color:#333;} #chat .list .con li .text{line-height:20px;font-size:12px;color:#979797;} #chat .list .con li .date{flex-shrink:0;font-size:12px;color:#979797;} #chat .detail{padding: 30px 20px 30px;max-height: calc((var(--vh, 1vh) * 100) - 50px);height: calc((var(--vh, 1vh) * 100) - 50px);} #chat .detail .info{position:relative;text-align:center;margin-bottom: 25px;} #chat .detail .info .icon{width:50px;height:50px;margin:0 auto;} #chat .detail .info .icon img{display:block;width:100%;height:100%;object-fit:Cover;} #chat .detail .info .name{margin-top:5px;line-height:20px;font-size:16px;font-weight:bold;} #chat .detail .info .tool{position:absolute;top:50%;right:0;transform:translateY(-50%);display: flex;align-items: center;} #chat .detail .info .tool .desc{} #chat .detail .info .tool .desc > a{display: flex;position:relative;width: 30px;height: 30px;align-items: center;justify-content: center;} #chat .detail .info .tool .desc > a i{width: 20px;height: 20px;display:block;} #chat .detail .info .tool .desc > a.menu i{background:url("../img/icon_chat_menu.png") no-repeat 50% 50% / contain} #chat .detail .info .tool .desc > a.menu ~ ul{position:absolute;top: 100%;right:0;border:1px solid #979797;background:#ffffff;padding: 4px 10px;display:none;} #chat .detail .info .tool .desc > a.menu ~ ul li{} #chat .detail .info .tool .desc > a.menu ~ ul li a{line-height:20px;font-size:8px;color:#979797} #chat .detail .info .tool .desc > a.menu.on ~ ul{display:block;} #chat .detail .info .tool .desc > a.alarm i{background:url("../img/icon_chat_alarm.png") no-repeat 50% 50% / contain} #chat .detail .info .tool .desc > a.alarm.on i{background:url("../img/icon_chat_alarm_off.png") no-repeat 50% 50% / contain} #chat .detail .info .tool .desc + .desc{margin-left:10px;} #chat .detail .content{height: calc((var(--vh, 1vh) * 100) - 50px - 100px - 40px - 50px);overflow: hidden;overflow-y: scroll;display: flex;flex-direction: column;} #chat .detail .content{-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */} #chat .detail .content::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/} #chat .detail .content #message_list{height: 100%;flex: 1;display: flex;flex-direction: column;} #chat .detail .content .talk{max-width: 60%;display: flex;flex-direction: column;margin-bottom: 13px;} #chat .detail .content .talk .text{width: auto;max-width: 100%;padding: 12px 12px;line-height: 17px;font-size: 12px;color: #181818;border-radius: 14px;border: 1px solid #e0e0e0;word-break: break-word;} #chat .detail .content .talk .text a{display:block} #chat .detail .content .talk .text img{width: auto;max-width: 100%;height: auto;display: block;vertical-align: top;border-radius: 10px;} #chat .detail .content .talk .time{padding: 0 16px;line-height: 15px;font-size: 10px;color: #adb5bd;} #chat .detail .content .talk.you{margin-right: auto;align-items: flex-start;} #chat .detail .content .talk.you .text{} #chat .detail .content .talk.me{margin-left: auto;align-items: flex-end;} #chat .detail .content .talk.me .text{} #chat .detail .form{margin-top: 16px;} #chat .detail .form .inner{display:flex;align-items:center;border-radius:40px;height:40px;background:#f1f1f1;padding: 5px;} #chat .detail .form .upload{width:30px;height:30px;border-radius:30px;flex-shrink:0;background:#ffffff;display:flex;align-items:center;justify-content:center} #chat .detail .form .upload input{display:none} #chat .detail .form .upload img{height: 20px;width: auto;} #chat .detail .form .input{flex:1;padding:0 12px;} #chat .detail .form .input input{padding: 0;width:100%;height:30px;background:transparent;font-size: 12px;} #chat .detail .form .emote{flex-shrink:0;} #chat .detail .form .emote button{width:30px;height:30px;border-radius:30px;background:#ffffff;display:flex;align-items:center;justify-content:center} #chat .detail .form .emote button img{height: 20px;width: auto;} /**/ #bestdoc{} #bestdoc .ready{padding: 0 0 70px 0;height: calc((var(--vh, 1vh) * 100) - 50px);} #bestdoc .ready .img{} #bestdoc .ready .img img{display:block;width:100%;height:auto} #bestdoc .ready .tit{padding:0 52px;line-height:30px;font-size:20px;} #bestdoc .ready .ch{margin-top:50px;} #bestdoc .ready .ch a{display:flex;flex-direction:column;align-items:center;text-align:center;} #bestdoc .ready .ch img{width:100px;height:auto} #bestdoc .ready .ch p{margin-top:10px;font-size:12px;color:#979797} /**/ #myphil{position: relative;} #myphil .header{display:flex;align-items:center;border-bottom: 1px solid #e0e0e0;height: 50px;margin: 0 30px;} #myphil .header .user{margin-right:auto;margin-left: -10px;line-height: 18px;font-size: 12px;font-weight: 700;color: #989898;} #myphil .header .user strong{display: flex;line-height: 20px;font-size: 16px;font-weight: bold;color: #333333;} #myphil .header .tool{margin-left: auto;} #myphil .header .tool ul{display:flex;} #myphil .header .tool li{} #myphil .header .tool li a{display:flex;width:15px;height:15px;} #myphil .header .tool li img{display:block;width:auto;height:100%} #myphil .header .tool li + li{margin-left:5px;} #myphil .header .my{margin-left:10px;margin-right: -10px;} #myphil .header .my a{display:flex;width:35px;height:35px;border-radius:35px;overflow:hidden} #myphil .header .my img{display:block;width:auto;height:100%} #myphil .enroll{height: calc((var(--vh, 1vh) * 100) - 100px);display: flex;flex-direction: column;justify-content: center;padding: 20px 30px 100px;text-align: center;} #myphil .enroll .camera{flex: 1;border: 1px solid #b00020;width: 100%;height: 100%;} #myphil .enroll .title{margin-top: 14px;line-height: 20px;font-size: 12px;} #myphil .enroll .shoot{margin-top: 10px;display: flex;align-items: center;justify-content: center;} #myphil .enroll .shoot a{display: flex;align-items: center;justify-content: center;width: 140px;height: 30px;border-radius: 30px;background: #b00020;color: #fff;font-size: 16px;} #myphil .dv{ } #myphil .button{margin: 36px 0 0 0;display: flex;align-items: center;} #myphil .button .btn{border: 1px solid #e0e0e0;display: flex;align-items: center;justify-content: center;flex: 1;width: 100%;height: 30px;border-radius: 30px;} #myphil .button .btn + .btn{margin-left:10px} #myphil .phil{padding: 20px 30px 100px;display: flex;flex-direction: column;min-height: calc((var(--vh, 1vh) * 100) - 100px);} #myphil .phil .list{flex: 1;} #myphil .phil .list ul{} #myphil .phil .list li{} #myphil .phil .list li {position: relative;display: flex;align-items: center;margin: 20px 0;} #myphil .phil .list li .name {flex:1;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 12px;} #myphil .phil .list li .option{flex-shrink:0;display:flex;align-items:center;} #myphil .phil .list li .option a{font-size:12px;color:#979797;} #myphil .phil .list li .option a + a{margin-left:10px;} #myphil .phil .direct{display:flex;flex-direction:column;align-items:center;margin: 40px 0;} #myphil .phil .direct .tit{line-height:20px;font-size:12px;} #myphil .phil .direct .img{margin:12px 0;} #myphil .phil .direct .img img{height:67px;width:auto;display:block;} #myphil .phil .direct .act{display:flex;} #myphil .phil .direct .act a{width: 80px;height: 30px;border-radius: 30px;display:flex;align-items:center;justify-content:center;font-size: 12px;} #myphil .search{display:flex;flex-direction:column;padding: 0 30px 100px;min-height: calc((var(--vh, 1vh) * 100) - 100px);} #myphil .search .content{flex:1;display:flex;flex-direction:column;justify-content: start;} #myphil .search .title{padding: 45px 20px 100px;line-height: 30px;font-size: 20px;flex-shrink:0} #myphil .search .selected li { position: relative; margin-bottom: 10px; } #myphil .search .selected li .name { padding: 0 40px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; line-height: 20px; font-size: 14px; } #myphil .search .selected li .dele { position: absolute; top: 0; right: 0; } #myphil .search .selected li .dele a { line-height: 20px; font-size: 14px; color: #979797; display: block; } #myphil .search .input{display: flex;flex-direction: column;position: relative;} #myphil .search .input input{display: flex;width: 100%;height: 40px;align-items: center;border-bottom: 1px solid #e0e0e0;font-size: 16px;padding: 0 20px;} #myphil .search .input em{padding: 0 20px;margin: 10px 0 0 0;line-height: 16px;font-size: 12px;color: #979797;} #myphil .search .input button{width: 70px;margin-left: 10px;flex-shrink: 0; border-radius: 30px;} #myphil .search .input .flex{display:flex} #myphil .search .input .list{position:absolute;top: 40px;left:0;width:100%;height:auto;background:#ffffff;z-index:2;padding: 10px 0;display: none;} #myphil .search .input .list ul{} #myphil .search .input .list li{margin-bottom:6px;} #myphil .search .input .list li button{padding:0 20px;line-height:30px;font-size:16px;color:#979797} #myphil .search .result{margin-top:30px;} #myphil .search .result ul{} #myphil .search .result li{} #myphil .search .result .box{position:relative;border-radius:30px;border:1px solid #e0e0e0;padding: 20px 20px 20px;margin-bottom:5px;} #myphil .search .result .box .name{line-height: 20px;font-size: 16px;font-weight: bold;margin-bottom: 6px;} #myphil .search .result .box .text{line-height: 20px;font-size: 16px;color: #979797;} #myphil .search .result .box .dele{position:absolute;top:20px;right:20px;} #myphil .search .result .box .dele a{display: flex;align-items: center;justify-content: center;width: 20px;height: 20px;border-radius: 20px;overflow: hidden;} #myphil .search .result .box .dele a img{display:block;height:100%;width:30px;} #myphil .search .result .box .more{display: flex;align-items: center;margin-top: 20px;} #myphil .search .result .box .more a{display: flex;align-items: center;justify-content: center;padding: 0 20px;height: 32px;font-size: 14px;border-radius: 32px;background: #979797;color: #ffffff;} #myphil .search .list{margin: 0 -30px;} #myphil .search .list ul{} #myphil .search .list li{} #myphil .search .list li a{background:#ffffff;display:block;padding: 20px 30px;} #myphil .search .list li a.on{background:lightblue;} #myphil .search .list li + li{border-top:1px solid #e0e0e0} #myphil .search .list li .name{font-size:16px;font-weight:500;color:#333;word-break: keep-all;} #myphil .search .list li .name .search_text{color: #8b6ac1;} #myphil .search .list li .text{margin-top:6px;font-size:12px;color:#979797;} #myphil .search .list li .info{ display: flex; } #myphil .search .list li .info .hname{ margin-right: auto; } #myphil .search .list li .info .hcheck{ display: flex; } #myphil .search .checked{position:fixed;bottom:0;left: 50%;width: 1080px;max-width: 100%;height:auto;transform: translateX(-50%) translateY(100%);background:#eee;z-index:10001;padding: 30px 20px;display: flex;align-items: center;transition: all 0.35s;} #myphil .search .checked.on{transform: translateX(-50%) translateY(0);} #myphil .search .checked .tit{/* flex: 1; */line-height: 24px;font-size: 16px;font-weight: 500;color: #333;word-break:keep-all;width: 60%;} #myphil .search .checked .tit span{color: #8b6ac1;} #myphil .search .checked .act{flex-shrink: 0;display: flex;align-items: center;justify-content: center;margin-left: auto;} #myphil .search .checked .act a{display: flex;align-items: center;justify-content: center;width: 90px;height: 50px;border-radius: 40px;background: var(--main-color);font-size: 16px;color: #fff;font-weight: bold;} #myphil .alarm{display:flex;flex-direction:column;padding: 20px 30px 100px;min-height: calc((var(--vh, 1vh) * 100) - 100px);} #myphil .alarm .title{margin-bottom:20px;line-height:20px;font-size:16px;font-weight:bold;color:#333333;} #myphil .alarm .list{flex: 1;} #myphil .alarm .list ul{} #myphil .alarm .list li{} #myphil .alarm .list li {position: relative;display: flex;align-items: center;margin: 20px 0;} #myphil .alarm .list li .name {flex:1;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;line-height: 20px;font-size: 12px;} #myphil .alarm .list li .option{flex-shrink:0;display:flex;align-items:center;} #myphil .alarm .list li .option a{font-size:12px;color:#979797;} #myphil .alarm .list li .option a + a{margin-left:10px;} #myphil .alarmdetail{display:flex;flex-direction:column;padding: 20px 30px 100px;min-height: calc((var(--vh, 1vh) * 100) - 100px);} #myphil .alarmdetail .name{text-align: center;margin-bottom: 30px;line-height: 20px;font-size: 12px;color: #333;} #myphil .alarmdetail .option{flex: 1;} #myphil .alarmdetail .option ul{} #myphil .alarmdetail .option li{margin-bottom: 15px;} #myphil .alarmdetail .option li .tit{margin-bottom: 14px;line-height: 20px;font-size: 16px;font-weight: bold;} #myphil .alarmdetail .option li .inp{display:flex;align-items:center;justify-content:center;} #myphil .alarmdetail .option li .inp input{width:120px;height:30px;margin:0 auto;border-bottom: 1px solid rgb(33 33 33 / 8%);text-align: center;font-size: 16px;color: #979797;} #myphil .alarmdetail .option li .num{display: flex;align-items: center;justify-content: center;} #myphil .alarmdetail .option li .num .minus{width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;} #myphil .alarmdetail .option li .num .plus{width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;} #myphil .alarmdetail .option li .num .number{display: flex;align-items: center;margin: 0 16px;border-bottom: 1px solid rgb(33 33 33 / 8%);width: 50px;font-size: 16px;color: #979797;} #myphil .alarmdetail .option li .num .number input{width: 30px;height: 30px;flex: 1;min-width: auto;text-align: center;font-size: 16px;color: #979797;} #myphil .alarmdetail .option li .time{} #myphil .alarmdetail .option li .time dl{display:flex;align-items: center;height: 30px;line-height:30px;font-size:16px;color:#969696;margin:0 auto;width: 150px;border-bottom: 1px solid rgba(33,33,33,0.08);} #myphil .alarmdetail .option li .time dl + dl{margin-top:15px;} #myphil .alarmdetail .option li .time dt{flex-shrink:0;width:30px;margin:0 10px 0;} #myphil .alarmdetail .option li .time dd{flex: 1;} #myphil .alarmdetail .option li .time dd input{width:120px;height:30px;margin:0 auto;text-align: center;font-size: 16px;color: #979797;background: transparent;} #myphil .information{position:relative;display: flex;flex-direction: column;min-height: calc(var(--vh, 1vh) * 100);} #myphil .information .title{line-height:50px;font-size:20px;font-weight:bold;color:#333;text-align:center;flex-shrink: 0;} #myphil .information .close{position:absolute;top:0;right:0;width:50px;height:50px;display: flex;align-items: center;justify-content: center;} #myphil .information .close a{width: 24px;height: 24px;display:flex;align-items:Center;justify-content:center;} #myphil .information .close a img{width:auto;height:100%} #myphil .information .content{padding: 10px 30px 30px;flex: 1;display: flex;flex-direction: column;} #myphil .information .content .tabs{margin-bottom: 20px;flex-shrink: 0;} #myphil .information .content .tabs ul{display:flex;} #myphil .information .content .tabs li{flex:1;border: 0;} #myphil .information .content .tabs li + li{margin-left:10px;} #myphil .information .content .tabs li a{display: flex;align-items: center;justify-content: center;height: 40px;font-size: 15px;font-weight: 500;border: 0;border-bottom: 3px solid transparent;text-align: center;color: #979797;} #myphil .information .content .tabs li.active a{font-weight: bold;color:#333;border-bottom-color: #8b6ac1;} #myphil .information .content .box{display:none;flex: 1;flex-direction: column;} #myphil .information .content .box.active{display: flex;} #myphil .information .content .info{} #myphil .information .content .info dl{display:flex;align-items:flex-start;border-bottom:1px solid #e0e0e0;font-size: 14px;} #myphil .information .content .info dt{width: 30%;padding:10px;font-weight: bold;} #myphil .information .content .info dd{width:80%;padding:10px;} #myphil .information .content .caut{margin-top:auto;border-radius:10px;padding:20px;background:#f0f0f0;font-size:12px} /**/ #hosp{position: relative;} #hosp .header{display:flex;align-items:center;border-bottom: 1px solid #e0e0e0;height: 50px;margin: 0 30px;} #hosp .header .user{margin-right:auto;margin-left: -10px;line-height: 18px;font-size: 12px;font-weight: 700;color: #989898;} #hosp .header .user strong{display: flex;line-height: 20px;font-size: 16px;font-weight: bold;color: #333333;} #hosp .header .tool{margin-left: auto;} #hosp .header .tool ul{display:flex;} #hosp .header .tool li{} #hosp .header .tool li a{display:flex;width:15px;height:15px;} #hosp .header .tool li img{display:block;width:auto;height:100%} #hosp .header .tool li + li{margin-left:5px;} #hosp .header .my{margin-left:10px;margin-right: -10px;} #hosp .header .my a{display:flex;width:35px;height:35px;border-radius:35px;overflow:hidden} #hosp .header .my img{display:block;width:auto;height:100%} #hosp .hosp{display: flex;flex-direction:column;padding: 20px 30px 100px;min-height: calc((var(--vh, 1vh) * 100) - 100px);} #hosp .hosp .title{padding: 0 22px;line-height: 30px;font-size: 20px;margin-bottom: 19px;} #hosp .hosp .cont{position: relative;flex: 1;background: #fafafa;} #hosp .hosp .cont .inp{position:absolute;top:10px;left:20px;right:20px;z-index: 11;display: flex;align-items: center;height: 40px;background: #ffffff;border-radius: 6px;} #hosp .hosp .cont .inp img{width: auto;height: 20px;margin: 10px;} #hosp .hosp .cont .inp input{flex:1;height: 40px;flex: 1;background: transparent;font-size: 14px;} #hosp .hosp .cont .lt-item{position:absolute;top: 70px;left:20px;display: flex;flex-direction: column;align-items: flex-start;z-index: 22;} #hosp .hosp .cont .lt-item ul{border-radius: 6px;display: flex;flex-direction: column;align-items: center;overflow: hidden;box-shadow: 0 3px 6px rgba(0,0,0,0.08);} #hosp .hosp .cont .lt-item ul + ul{margin-top: 7px;} #hosp .hosp .cont .lt-item li{} #hosp .hosp .cont .lt-item li a{display: flex;flex-direction:column;align-items: center;justify-content: center;padding: 7px 0;min-height: 40px;width: 40px;line-height: 13px;font-size: 12px;background: #ffffff;} #hosp .hosp .cont .lt-item li a img{height: 14px;width: auto;} #hosp .hosp .cont .lt-item li.on{} #hosp .hosp .cont .lt-item li.on a{background: #0173fa;color: #fff;} #hosp .hosp .cont .rt-item{position:absolute;top: 70px;right:20px;display: flex;flex-direction: column;align-items: flex-end;z-index: 22;} #hosp .hosp .cont .rt-item ul{display: flex;flex-direction: column;align-items: center;overflow: hidden;} #hosp .hosp .cont .rt-item li{margin-bottom: 16px;} #hosp .hosp .cont .rt-item li a{display: flex;flex-direction:column;align-items: center;justify-content: center;padding: 7px 0;height: 40px;border-radius: 40px;width: 40px;line-height: 13px;font-size: 12px;background: #ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.08);} #hosp .hosp .cont .rt-item li a img{height: 28px;width: auto;} #hosp .hosp .cont .rt-item li.on{} #hosp .hosp .cont .rt-item li.on a{} #hosp .hosp .cont .map{display:block;width:100% !important} #hosp .hosp .cont .text{margin-top: 45px;text-align: center;line-height: 20px;font-size: 12px;} #hosp .hosp .cont .info{position:absolute;bottom:0;left:0;width:100%;height:auto;border-radius:20px 20px 0 0;background:#ffffff;padding: 24px 20px;z-index: 23;border-bottom: 1px solid #979797;} #hosp .hosp .cont .info:Before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:30px;height:3px;border-radius:3px;background:#d9d9d9;} #hosp .hosp .cont .info .box{display: flex;flex-direction: column;} #hosp .hosp .cont .info .name{line-height: 30px;font-size: 16px;font-weight: bold;} #hosp .hosp .cont .info .gret{margin: 4px 0 0 0;line-height: 20px;font-size: 12px;} #hosp .hosp .cont .info .juso{margin-top:8px 0 0 0;line-height:20px;font-size:12px;color:#979797} #hosp .hosp .cont .info .tele{margin: 27px 0 0 0;display: flex;align-items: center;justify-content: center;} #hosp .hosp .cont .info .tele a{display: flex;align-items: center;justify-content: center;min-width: 140px;padding: 0 20px;height: 30px;border-radius: 30px;background: var(--main-color);font-size: 16px;color: #ffffff;} #hosp .hosp .button{margin: 36px 0 0 0;display: flex;align-items: center;flex-shrink: 0;} #hosp .hosp .button .btn{border: 1px solid #e0e0e0;display: flex;align-items: center;justify-content: center;flex: 1;width: 100%;height: 30px;border-radius: 30px;} #hosp .hosp .button .btn + .btn{margin-left:10px} /**/ #wrap .modal-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;display:none;z-index: 1003;background:rgba(0,0,0,0.5)} #wrap .modal-container.show{display:block} #popup_payment{} #popup_payment .title{margin-bottom:28px;line-height:30px;font-size:20px;font-weight:bold;color:#333333;text-align: center;} #popup_payment .cont{margin-bottom:30px;text-align: center;} #popup_payment .cont .img{display:block;} #popup_payment .cont .img img{display:block;margin:0 auto;} #popup_payment .cont .tit{line-height: 24px;font-size: 20px;font-weight: bold;} #popup_payment .cont .txt{margin: 14px 0 0 0;line-height:14px;font-size:12px;color:#333;} #popup_payment .button{margin: auto 0 0 0;display: flex;align-items: center;} #popup_payment .button .btn + .btn {margin-left: 10px;} #popup_payment .button .btn {display: flex;align-items: center;justify-content: center;flex: 1;width: 100%;height: 40px;background-color: #f1f1f1;color: #333; border-radius: 5px;} #popup_payment .button .btn_02 {display: flex;align-items: center;justify-content: center;flex: 1;width: 100%;height: 40px;background-color: #f1f1f1;color: #808080; border-radius: 5px;} #popup_payment .cont #coupon{border: 1px solid #808080; padding: 10px; border-radius: 5px; text-align: center; width: 200px;} #popup_payment .customer {margin: 10px auto 0; text-align: center;} #popup_payment .customer a{display: block; font-size: 12px; color: #808080;margin-top: 20px; text-decoration: underline;} #popup_logout{} #popup_logout .title{margin-bottom:28px;line-height:30px;font-size:20px;font-weight:bold;color:#333333;} #popup_logout .inner{margin-bottom:30px;} #popup_logout .image{display: flex;margin:0 auto;align-items: center;justify-content: center;} #popup_logout .image img{display:block;width:auto;max-width:100%;height:auto} #popup_logout .text{text-align: center;} #popup_logout .text .tit{line-height: 30px;font-size: 20px;font-weight: bold;color: #333333;} #popup_logout .text .txt{line-height:18px;font-size:12px;color:#333333;} #popup_logout .button{margin: auto 0 0 0;display: flex;align-items: center;} #popup_logout .button .btn{border: 1px solid #e0e0e0;display: flex;align-items: center;justify-content: center;flex: 1;width: 100%;height: 40px;border-radius: 5px;} #popup_logout .button .btn + .btn{margin-left:10px} #popup_withdraw{} #popup_withdraw .title{margin-bottom:28px;line-height:30px;font-size:20px;font-weight:bold;color:#333333;} #popup_withdraw .inner{margin-bottom:30px;} #popup_withdraw .image{display: flex;margin:0 auto;align-items: center;justify-content: center;} #popup_withdraw .image img{display:block;width:auto;max-width:100%;height:auto} #popup_withdraw .text{text-align: center;} #popup_withdraw .text .tit{line-height: 30px;font-size: 20px;font-weight: bold;color: #333333;} #popup_withdraw .text .txt{line-height:18px;font-size:12px;color:#333333;} #popup_withdraw .button{margin: auto 0 0 0;display: flex;align-items: center;} #popup_withdraw .button .btn{border: 1px solid #e0e0e0;display: flex;align-items: center;justify-content: center;flex: 1;width: 100%;height: 30px;border-radius: 30px;} #popup_withdraw .button .btn + .btn{margin-left:10px} #popup_image_delete{} #popup_image_delete .title{margin-bottom:28px;line-height:30px;font-size:20px;font-weight:bold;color:#333333;} #popup_image_delete .inner{margin-bottom:30px;} #popup_image_delete .image { margin: 0 auto; width: 100%; height: 100%; border-radius: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } #popup_image_delete .image img{display:block;width:auto;max-width:100%;height:auto} #popup_image_delete .text{text-align: center;} #popup_image_delete .text .tit{line-height: 30px;font-size: 20px;font-weight: bold;color: #333333;} #popup_image_delete .text .txt{line-height:18px;font-size:12px;color:#333333;} #popup_image_delete .button{margin: auto 0 0 0;display: flex;align-items: center;} #popup_image_delete .button .btn{border: 1px solid #e0e0e0;display: flex;align-items: center;justify-content: center;flex: 1;width: 100%;height: 30px;border-radius: 30px;} #popup_image_delete .button .btn + .btn{margin-left:10px} /**/ @keyframes spin { 0% { transform:rotateY(0deg); } 50% { transform:rotateY(360deg); } 100% { transform:rotateY(360deg); } } /**/ #wrap .headers{position: fixed;display: flex !important;align-items: center;padding: 0 20px;top: 0;left: 50%;width: 1080px;max-width: 100%;height: 60px;z-index: 11;transform: translateX(-50%);background: #ffffff;} #wrap .headers .util{position:absolute;top:50%;left:10px;transform:translateY(-50%);z-index: 2;} #wrap .headers .util .btn{min-width: 30px;height:30px;position:relative;z-index:5;display: flex;align-items: center;} #wrap .headers .util .btn i{display:block;width:30px;height:30px} #wrap .headers .util .btn p{font-size:14px;color:#0000000} #wrap .headers .tool{position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index: 2;} #wrap .headers .tool .btn{width:30px;height:30px;position:relative;z-index:5} #wrap .headers .tool .btn i{display:block;width:30px;height:30px} #wrap .headers .title{flex:1;display:flex;align-items:center;text-align:center;justify-content:center;line-height: 18px;font-size: 16px;font-weight:500;color: #333333;} #wrap .headers .title img{display:block;width:auto;height: 20px;} /**/ #home{background:#F7F7F7} #home .miracle{padding: 10px 25px;} #home .miracle .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #home .miracle .box .title{line-height: 24px;font-size: 18px;font-weight: bold;color: #333333;} #home .miracle .box .text{margin: 2px 0 0 0;line-height: 16px;font-size: 13px;color: #767676;} #home .miracle .box .image{margin: 15px 0;padding: 0 19%;display: flex;align-items: center;justify-content: center;} #home .miracle .box .image img{display: block;width: auto;max-width: 100%;height: auto;} #home .miracle .box .rate{text-align: center;display: flex;flex-direction: column;align-items: center;} #home .miracle .box .rate .tit{line-height: 16px;font-size: 12px;color: #333333;margin: 0 0 6px 0;} #home .miracle .box .rate .tit span{font-size:18px;color:var(--main-color)} #home .miracle .box .rate .txt{line-height: 16px;font-size: 12px;color: #767676;margin: 0 0 6px 0;} #home .miracle .box .rate .txt span{font-size:18px;color:var(--main-color)} #home .miracle .box .rate .act{display: flex;align-items: center;justify-content: center;} #home .miracle .box .rate .act a{border-radius: 8px;background: #F1F1F5;padding: 0 40px;display: flex;align-items: center;justify-content: center;height: 40px;font-size: 16px;font-weight: bold;color: #333333;} #home .quick{padding: 10px 25px;} #home .quick .box{display: flex;align-items: center;} #home .quick .box li{flex: 1;} #home .quick .box li + li{margin-left:5px;} #home .quick .box li a{display: flex;flex-direction: column;align-items: center;padding: 8% 0;border-radius: 8px;background: #ffffff;box-shadow: 0 3px 6px rgb(0 0 0 / 16%);} #home .quick .box li img{width: 28px;height: auto;} #home .quick .box li p{margin:5px 0 0 0;font-size: 12px;font-weight:bold;white-space: nowrap;} #home .visual{padding:15px 5px;overflow: hidden;} #home .visual .box{padding: 20px 15px;background: #ffffff;border-radius: 7px;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);} #home .visual .slider{} #home .visual .slider .swiper-slide{box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);border-radius: 7px;overflow: hidden;} #home .visual .slider .swiper-slide.swiper-slide-active{} #home .visual .slider .swiper-slide img{width:100%;height:100%;object-fit:fill;} #home .visual .slider .swiper-dots{margin: 25px 0 0 0;display: flex;align-items: center;justify-content: center;bottom: unset;} #home .visual .slider .swiper-dots span{margin: 0 6px;text-indent: -9999em;width: 8px;height: 8px;border-radius: 8px;border: 1px solid #707070;background: #333;opacity: 1;} #home .visual .slider .swiper-dots span.swiper-pagination-bullet-active{background: #fff;} #home .find{padding: 10px 5px 15px;} #home .find .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #home .find .heading{margin:0 0 20px 0;position: relative;} #home .find .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #home .find .heading .txt{line-height:15px;font-size:12px;color:#767676} #home .find .heading .act{margin-left:auto;position: absolute;top: 0;right: 0;height: 24px;display: flex;align-items: center;} #home .find .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #home .find .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #home .find .list{margin: 0 0 10px 0;padding: 13px 24px;border-radius: 8px;background: #ffffff;box-shadow: 0 3px 6px rgb(0 0 0 / 16%);} #home .find .list .tit{margin: 0 0 10px 0;text-align: center;line-height: 20px;font-size: 18px;font-weight: bold;color: #333;} #home .find .list .lst{} #home .find .list .lst ul{display: flex;} #home .find .list .lst li{width:33.33%;} #home .find .list .lst li + li{margin: 0 0 0 25px;} #home .find .list .lst li a{text-align: center;} #home .find .list .lst li img{margin: 0 0 10px 0;display: block;width: 100%;height: auto;} #home .find .list .lst li p{display: block;line-height: 15px;font-size: 12px;color: #767676;} #home .find .care{display:flex;flex-direction:column;align-items:flex-start;justify-content: center;position:relative;margin: 25px 0 0 0;padding:10px 15px;border-radius:7px;background:#ffffff;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);height: 68px;} #home .find .care .tit{line-height:24px;font-size:14px;font-weight:bold;color:#333333;} #home .find .care .txt{line-height:15px;font-size:12px;color:#767676} #home .find .care .act{position:absolute;top:50%;right:15px;transform:translateY(-50%)} #home .find .care .act a{display:flex;width:36px;height:36px;border-radius:36px;background:var(--main-color) url("../img/icon_arrow.png") no-repeat 50% 50% / 20px auto;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);} #home .hospital{padding: 10px 5px 15px;} #home .hospital .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow:0 3px 6px rgba(0,0,0,0.16)} #home .hospital .heading{margin:0 0 20px 0;position: relative;} #home .hospital .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #home .hospital .heading .txt{line-height:15px;font-size:12px;color:#767676} #home .hospital .heading .act{margin-left:auto;position: absolute;top: 0;right: 0;height: 24px;display: flex;align-items: center;} #home .hospital .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #home .hospital .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #home .hospital .slider{margin: 0 0px;overflow:hidden} #home .hospital .slider .swiper-slide{width: 40%;position:relative;padding: 40% 0 0 0;} #home .hospital .slider .swiper-slide .inner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;overflow:hidden} #home .hospital .slider .swiper-slide .img{position:relative;z-index:1;} #home .hospital .slider .swiper-slide .img img{display:block;width:100%;height:100%;object-fit:cover;} #home .hospital .slider .swiper-slide .txt{position:absolute;z-index:2;top:50%;left:0;width:100%;white-space:nowrap;font-size:18px;font-weight:bold;color:#ffffff;transform:translateY(-50%);text-align:center;} #home .hospital .text{margin: 15px 0 0 0;text-align: center;line-height: 16px;font-size: 12px;color: #767676;} #home .hospital .text span{font-size: 16px;color:var(--main-color)} #home .hospital .share{display:flex;flex-direction:column;align-items:flex-start;justify-content: center;position:relative;margin: 25px 0 0 0;padding:10px 15px;border-radius:7px;background:#ffffff;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);height: 68px;} #home .hospital .share .tit{line-height:24px;font-size:14px;font-weight:bold;color:#333333;} #home .hospital .share .txt{line-height:15px;font-size:12px;color:#767676} #home .hospital .share .act{position:absolute;top:50%;right:15px;transform:translateY(-50%)} #home .hospital .share .act a{display:flex;width:36px;height:36px;border-radius:36px;background:var(--main-color) url("../img/icon_arrow.png") no-repeat 50% 50% / 20px auto;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);} #home .hospital .button{display: flex;align-items: center;justify-content: center;} #home .hospital .button a{border-radius: 8px;background: #F1F1F5;padding: 0 40px;display: flex;align-items: center;justify-content: center;height: 40px;font-size: 16px;font-weight: bold;color: #333333;} #home .notice{padding:10px 5px 15px} #home .notice .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #home .notice .heading{display:flex;margin:0 0 20px 0;} #home .notice .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #home .notice .heading .act{margin-left:auto;} #home .notice .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #home .notice .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #home .notice .list{} #home .notice .list ul{} #home .notice .list li{} #home .notice .list li + li{margin-top:10px;} #home .notice .list li a{display:flex;align-items:center;} #home .notice .list li .subj{line-height:20px;font-size: 12px;color: #333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;flex: 1;} #home .notice .list li .date{margin-left:10px;flex-shrink:0;font-size:12px;color:#333333} #home .post{padding:10px 5px 15px} #home .post .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #home .post .heading{display:flex;margin:0 0 20px 0;} #home .post .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #home .post .heading .act{margin-left:auto;} #home .post .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #home .post .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #home .post .list{} #home .post .list ul{} #home .post .list li{} #home .post .list li + li{margin-top:10px;} #home .post .list li a{position:relative;display:flex;align-items:center;padding: 12px 0 0 0;} #home .post .list li .cate{position:absolute;top:0;left:0;line-height:12px;font-size:9px;color:#333333;} #home .post .list li .subj{line-height:20px;font-size: 12px;color: #333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;flex: 1;} #home .post .list li .writer{margin-left:10px;flex-shrink:0;font-size:12px;color:#333333} #home .recent{padding:10px 5px 15px} #home .recent .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #home .recent .heading{display:flex;margin:0 0 20px 0;} #home .recent .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #home .recent .heading .act{margin-left:auto;} #home .recent .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #home .recent .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #home .recent .list{} #home .recent .list ul{} #home .recent .list li{} #home .recent .list li + li{margin-top:10px;} #home .recent .list li a{position:relative;display:flex;align-items:center;padding: 12px 0 0 0;} #home .recent .list li .cate{position:absolute;top:0;left:0;line-height:12px;font-size:9px;color:#333333;} #home .recent .list li .subj{line-height:20px;font-size: 12px;color: #333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;flex: 1;} #home .recent .list li .writer{margin-left:10px;flex-shrink:0;font-size:12px;color:#333333} #home .review{padding:10px 5px 15px} #home .review .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #home .review .heading{display:flex;margin:0 0 20px 0;} #home .review .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #home .review .heading .act{margin-left:auto;} #home .review .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #home .review .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #home .review .list{} #home .review .list ul{} #home .review .list li{} #home .review .list li + li{margin-top:10px;} #home .review .list li a{position:relative;display:flex;align-items:center;padding: 12px 0 0 0;} #home .review .list li .cate{position:absolute;top:0;left:0;line-height:12px;font-size:9px;color:#333333;} #home .review .list li .subj{line-height:20px;font-size: 12px;color: #333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;flex: 1;} #home .review .list li .writer{margin-left:10px;flex-shrink:0;font-size:12px;color:#333333} /*#home .trade{padding:10px 24px 15px}*/ /*#home .trade .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow:0 3px 6pxrgba(0,0,0,0.16)}*/ /*#home .trade .heading{display:flex;margin:0 0 20px 0;}*/ /*#home .trade .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333}*/ /*#home .trade .heading .act{margin-left:auto;}*/ /*#home .trade .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;}*/ /*#home .trade .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain}*/ /*#home .trade .list{}*/ /*#home .trade .list ul{}*/ /*#home .trade .list li{}*/ /*#home .trade .list li + li{margin-top:10px;}*/ /*#home .trade .list li a{display:flex;align-items:center;}*/ /*#home .trade .list li .subj{line-height:20px;font-size: 12px;color: #333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;flex: 1;}*/ /*#home .trade .list li .writer{margin-left:10px;flex-shrink:0;font-size:12px;color:#333333}*/ #home .trade{padding: 10px 5px 15px;} #home .trade .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow:0 3px 6px rgba(0,0,0,0.16)} #home .trade .heading{margin:0 0 20px 0;position: relative;} #home .trade .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #home .trade .heading .txt{line-height:15px;font-size:12px;color:#767676} #home .trade .heading .act{margin-left:auto;position: absolute;top: 0;right: 0;height: 24px;display: flex;align-items: center;} #home .trade .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #home .trade .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #home .trade .slider{margin: 0 0px;overflow:hidden} #home .trade .slider .swiper-slide{width: 40%;position:relative;padding: 40% 0 0 0;} #home .trade .slider .swiper-slide .inner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;overflow:hidden} #home .trade .slider .swiper-slide .img{position:relative;z-index:1;} #home .trade .slider .swiper-slide .img img{display:block;width:100%;height:100%;object-fit:cover;} #home .trade .slider .swiper-slide .txt{position:absolute;z-index:2;top:50%;left:0;width:100%;white-space:nowrap;font-size:18px;font-weight:bold;color:#ffffff;transform:translateY(-50%);text-align:center;} #home .trade .text{margin: 15px 0 0 0;text-align: center;line-height: 16px;font-size: 12px;color: #767676;} #home .trade .text span{font-size: 16px;color:var(--main-color)} #home .trade .share{display:flex;flex-direction:column;align-items:flex-start;justify-content: center;position:relative;margin: 25px 0 0 0;padding:10px 15px;border-radius:7px;background:#ffffff;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);height: 68px;} #home .trade .share .tit{line-height:24px;font-size:14px;font-weight:bold;color:#333333;} #home .trade .share .txt{line-height:15px;font-size:12px;color:#767676} #home .trade .share .act{position:absolute;top:50%;right:15px;transform:translateY(-50%)} #home .trade .share .act a{display:flex;width:36px;height:36px;border-radius:36px;background:var(--main-color) url("../img/icon_arrow.png") no-repeat 50% 50% / 20px auto;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);} /**/ #login{padding:60px 0 0 0;display: flex;flex-direction: column;min-height: 100vh;} #login .login{padding: 12px 25px 50px;} #login .login .count{font-size:12px;color:#767676} #login .login .count span{color:var(--main-color);font-size:16px;} #login .login .title{display:flex;position: relative;margin: 0 0 25px 0;} #login .login .title .tit{line-height: 42px;font-size: 28px;font-weight:bold;color: #333333;} #login .login .title .txt{text-align:center;position: absolute;bottom: 5px;right: 0;width: 50%;font-size:12px;color:#767676;white-space: nowrap;letter-spacing: -0.5px;} #login .login .title .txt i{font-size:50px;display: block;line-height: 1;margin: 0 0 10px 0;} #login .login .title .txt span{color:var(--main-color);font-size:16px;} #login .login .form{margin: 25px 0;} #login .login .form dl{} #login .login .form dl + dl{margin-top: 20px;} #login .login .form dt{line-height:1;font-size:15px;margin: 0 0 5px 0;} #login .login .form dd{} #login .login .form dd .inp{position:relative;} #login .login .form dl input[type="text"], #login .login .form dl input[type="password"]{width:100%;height: 42px;padding: 12px 42px 12px 12px;font-size:14px;color:#333333;background: #F1F1F5;border-radius: 2px;} #login .login .form dl input[type="text"]::placeholder, #login .login .form dl input[type="password"]::placeholder{color:#999999} #login .login .auto{display:flex;align-items:center;margin:0 0 30px 0;} #login .login .auto .checkbox{margin: 0 10px 0 0;display:flex;align-items:center} #login .login .auto .checkbox input{display: none;} #login .login .auto .checkbox input ~ i{margin: 0 3px 0 0;width: 20px;height: 20px;background: url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;background-color: #eee;border-radius: 50%;} #login .login .auto .checkbox input ~ p{line-height: 20px;font-size: 14px;color: #333333;} #login .login .auto .checkbox input:checked ~ i{background-color: var(--main-color);} #login .login .button{} #login .login .button button, #login .login .button a, #login .login .button .btn{display:flex;width:100%;height:52px;border-radius:8px;background:#ffffff;border:1px solid var(--main-color);align-items:center;justify-content:center;font-size:16px;font-weight:bold;color:var(--main-color)} #login .login .link{margin:25px 0;display:flex;justify-content:center;} #login .login .link a{display:block;position:relative;font-size:15px;color:#666;padding:0 10px;} #login .login .link a + a:before{content:'';position:absolute;top:50%;left:0;transform:translateY(-50%);width:1px;height:10px;background:#eeeeee;} #login .login .regist{border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;padding:10px 0;} #login .login .regist p{display:flex;align-items:center;justify-content:center;font-size:15px;} #login .login .regist p a{color:var(--main-color);margin:0 0 0 10px;} #login .login .social{margin:25px 0;padding: 0;} #login .login .social dl{} #login .login .social dt{line-height:1;font-size: 14px;margin: 0 0 8px 0;} #login .login .social dd{display:flex;flex-wrap:wrap;margin:0 -3.5px -7px;} #login .login .social dd a{} #login .login .social dd a{border: 1px solid #e0e0e0;display:flex;align-items: center;justify-content: center;width: calc(33.33% - 6.66px);height:36px;padding: 5px;border-radius: 4px;} #login .login .social dd a img{width:auto !important;max-height:24px;} #login .login .social dd a + a{margin-left:10px;} #login .login .social dd p{font-size: 14px;font-weight: bold;color: #333333;} #login .login .social dd i{width: 28px;height: 28px;margin:0 3px 0 0;} #login .login .social dd a.naver i{background:url("../img/icon_sns_naver.png") no-repeat 50% 50% / contain} #login .login .social dd a.facebook i{background:url("../img/icon_sns_facebook.png") no-repeat 50% 50% / contain} #login .login .social dd a.kakao i{background:url("../img/icon_sns_kakao.png") no-repeat 50% 50% / contain} #login .login .social dd a.apple i{background:url("../img/icon_sns_apple.png") no-repeat 50% 50% / contain} #login .login .social dd a.google i{background:url("../img/icon_sns_google.png") no-repeat 50% 50% / contain} #login .login .find{margin:10px 0 0 0;font-size:14px;color:#333333;text-align:center} #login .login .find a{color:#2C8ADA;} #login .login .sign{margin:10px 0 0 0;font-size:14px;color:#767676;text-align:center} #login .login .sign a{color:#333333;display: inline-flex;align-items: center;} #login .login .sign a i{width:12px;height:12px;background:url("../img/icon_link_arrow.png") no-repeat 50% 50% / contain} #login .login .nomember{} #login .login .nomember a{display:flex;align-items:center;border-radius: 4px;background: #f1f1f1;color: #666;height:40px;justify-content:center;font-size:15px;font-weight:500} #login .social{position: relative;padding: 12px 25px 50px;display: flex;align-items: center;justify-content: center;flex-direction: column;flex: 1;} #login .social .head{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);display: flex;flex-direction: column;transition: all 1s;align-items: center;} #login .social .logo{margin: 0 0 15px 0;} #login .social .logo img{display:block;width:auto;height:60px;} #login .social .count{font-size:12px;color:#767676;text-align: center;margin: 0 0 15px 0;} #login .social .count span{color:var(--main-color);font-size:16px;} #login .social .title{position: relative;margin: 0 0 25px 0;} #login .social .title .tit{line-height: 42px;font-size: 28px;font-weight:bold;text-align: center;color: #333333;margin: 0 0 25px 0;} #login .social .title .txt{text-align:center;font-size:12px;color:#767676;white-space: nowrap;letter-spacing: -0.5px;margin: 0 0 15px 0;} #login .social .title .txt i{font-size:50px;display: block;line-height: 1;margin: 0 0 10px 0;} #login .social .title .txt span{color:var(--main-color);font-size:16px;} #login .social .list{margin: auto 0 0 0;width: 100%;opacity: 0;transform: translateY(-50px);transition: all 1s;transition-delay: 0.85s;} #login .social .list ul{} #login .social .list li{} #login .social .list li + li{margin:15px 0 0 0;} #login .social .list li a{display:flex;width:100%;height:52px;border-radius:8px;background:#ffffff;border:1px solid var(--main-color);align-items:center;justify-content:center;} #login .social .list li i{width:28px;height:28px;margin: 0 5px 0 0;flex-shrink: 0;} #login .social .list li p{font-size: 14px;font-weight:bold;color: #191919;} #login .social .list li.naver i{background:url("../img/icon_sns_naver.png") no-repeat 50% 50% / contain} #login .social .list li.facebook i{background:url("../img/icon_sns_facebook.png") no-repeat 50% 50% / contain} #login .social .list li.kakao i{background:url("../img/icon_sns_kakao.png") no-repeat 50% 50% / contain} #login .social .list li.apple i{background:url("../img/icon_sns_apple.png") no-repeat 50% 50% / contain} #login .social .tool{display:flex;align-items:center;margin:30px 0;justify-content:center;opacity: 0;transform: translateY(-50px);transition: all 1s;transition-delay: 0.85s;} #login .social .tool .checkbox{display:flex;align-items:center} #login .social .tool .checkbox input{display: none;} #login .social .tool .checkbox input ~ i{margin: 0 3px 0 0;width: 20px;height: 20px;background: url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;} #login .social .tool .checkbox input ~ p{line-height: 20px;font-size: 14px;color: #333333;} #login .social .tool .checkbox input:checked ~ i{background:url("../img/icon_checkbox_on.png") no-repeat 50% 50% / contain} #login .social.active .head{transform:translateY(0);top:10%;} #login .social.active .list{opacity:1;transform: translateY(0);} #login .social.active .tool{opacity:1;transform: translateY(0);} #login .social_form{padding: 12px 25px 50px;} #login .social_form .greet{text-align: center;margin: 0 0 50px 0;} #login .social_form .greet .tit{line-height: 28px;font-size: 20px;font-weight: bold;color: #333333;} #login .social_form .greet .txt{line-height: 21px;font-size: 16px;color: #333333;} #login .social_form .form{} #login .social_form .form ul{} #login .social_form .form li{/* border-bottom: 1px solid #DEDEDE; *//* padding: 0 0 15px 0; *//* margin: 0 0 15px 0; */} #login .social_form .form li .tit{margin:0 0 15px 0;line-height:20px;font-size:16px;color:#333333;} #login .social_form .form li .tit em{color:#FF3120} #login .social_form .form li .inp{position:relative;} #login .social_form .form li .chk{position:relative;display:flex;flex-wrap:wrap;margin:0 -3.5px;} #login .social_form .form li .chk .checkbox{padding: 0 3.5px 7px;cursor: pointer;} #login .social_form .form li .chk .checkbox input{display:none} #login .social_form .form li .chk .checkbox input ~ span{display:flex;justify-content: center;align-items:center;height: 25px;border-radius:7px;background:#fff;box-shadow: 0 1.5px 3px rgb(0 0 0 / 16%);font-size: 12px;border: 1px solid #707070;} #login .social_form .form li .chk .checkbox input:checked ~ span{border-color:#14ACCF} #login .social_form .form li .chk .check03{width:33.33%} #login .social_form .form li .chk .check04{width:25%} #login .social_form .form li .src{display:flex;flex-direction:column;align-items:center;margin:0 0 20px 0;} #login .social_form .form li .src input[type="text"]{margin:0 auto;width:60%;height:40px;border-radius:7px;border:1px solid #333333;background:#ffffff;} #login .social_form .form li .src .src_res{width:100%;} #login .social_form .form li .src .src_res .src_tit{text-align:center;margin:15px 0;font-size:12px;color:#191919} #login .social_form .form li .src .src_res .src_lst{} #login .social_form .form li .src .src_res .src_lst p{line-height:15px;font-size:12px;color:#191919;} #login .social_form .form li .src .src_res .src_lst p + p{} #login .social_form .form li .profile{position:relative;margin: 0 0 15px 0;} #login .social_form .form li .profile_img{margin: 0 auto 10px;width:100px;height:100px;border-radius:100px;background:#DBDBDB} #login .social_form .form li .profile_img img{display:block;width:100%;height:100%;object-fit:cover;} #login .social_form .form li .profile_txt{text-align:center;font-size:16px;color: #333333;} #login .social_form .form li .file{display:flex;} #login .social_form .form li .file input{display:none;} #login .social_form .form li .file .file_name{flex: 1;display: flex;justify-content: center;align-items: center;width: 100px;height: 52px;background: #F1F1F5;padding: 0 16px;font-size: 16px;color: #333333;} #login .social_form .form li .file .file_button{} #login .social_form .form li .file .file_button p{display:flex;width: 100px;height:52px;background:#ffffff;border:1px solid var(--main-color);align-items:center;justify-content:center;font-size:16px;color:var(--main-color);flex-shrink: 0;margin: 0 0 0 15px;} #login .social_form .form li input[type="text"], #login .social_form .form li input[type="password"]{width:100%;height:52px;padding: 12px 42px 12px 12px;font-size:14px;color:#333333;background: #F1F1F5;} #login .social_form .form li input[type="text"]::placeholder, #login .social_form .form li input[type="password"]::placeholder{color:#999999} #login .social_form .form li .btn_reset{position:absolute;top:50%;right:12px;;transform:translateY(-50%);width:20px;height:20px;display:none;} #login .social_form .form li .btn_reset img{display:block;width:auto;max-width:100%;height:auto;} #login .social_form .form li .btn_reset.on{display:block;} #login .social_form .form li.style2{} #login .social_form .form li.style2 .tit{font-weight:bold;} #login .social_form .form li.style2 .chk{} #login .social_form .form li.style2 .chk .checkbox{} #login .social_form .form li.style2 .chk .checkbox input ~ span{height:50px;font-size:20px;border-color:transparent} #login .social_form .form li.style2 .chk .checkbox input:checked ~ span{border-color:#14ACCF} #login .social_form .button{margin: 100px 0 0 0;} #login .social_form .button button, #login .social_form .button a, #login .social_form .button .btn{display:flex;width:100%;height:52px;border-radius:8px;background:#ffffff;border:1px solid var(--main-color);align-items:center;justify-content:center;font-size:16px;font-weight:bold;color:var(--main-color)} #login .social_edit{padding: 12px 25px 50px;} #login .social_edit .title{margin: 0 0 45px 0;text-align: center;line-height: 32px;font-size: 20px;font-weight: bold;color: #333;} #login .social_edit .form{} #login .social_edit .form .desc{} #login .social_edit .form .desc + .desc{margin: 40px 0 0 0;} #login .social_edit .form .desc .head{display:flex;align-items:center;border-bottom: 1px solid #DEDEDE;height: 32px;} #login .social_edit .form .desc .head .tit{font-size: 16px;font-weight: 500;} #login .social_edit .form .desc .head .act{margin: 0 0 0 auto;display: flex;align-items: center;justify-content: center;} #login .social_edit .form .desc .head .act a{font-size: 12px;color: #767676;} #login .social_edit .form .desc .cont{padding: 30px 16px;} #login .social_edit .form .desc .cont .nick{font-size: 20px;font-weight: bold;color: #333;text-align: center;} #login .social_edit .form .desc .cont .profile{display: flex;flex-direction: column;align-items: center;justify-content: center;} #login .social_edit .form .desc .cont .profile img{width: 100px;height: 100px;border-radius: 100px;overflow: hidden;} #login .social_edit .form .desc .cont .profile span{margin:10px 0 0 0;font-size:12px;color:#767676} #login .social_edit .form .desc .cont .area{text-align: center;display: block;font-size: 14px;} #login .social_edit .form .desc .cont .hospital{text-align: center;display: block;font-size: 14px;} #login .social_edit .form .desc .cont .disease{text-align: center;display: block;font-size: 14px;} #login .find{padding: 12px 25px 20px;} #login .find .text{margin: 0 0 35px 0;text-align: center;line-height: 22px;font-size: 14px;color: #333333;} #login .find .form{} #login .find .form ul{} #login .find .form li + li{margin:15px 0 0 0;} #login .find .form li .tit{margin:0 0 15px 0;line-height:20px;font-size:16px;color:#333333;} #login .find .form li .tit em{color:#FF3120} #login .find .form li .inp{position:relative;display: flex;} #login .find .form li input[type="text"], #login .find .form li input[type="password"]{} #login .find .form li select{} #login .find .form li .btn_cert{display:flex;width: 100px;height:52px;background:#ffffff;border:1px solid var(--main-color);align-items:center;justify-content:center;font-size:16px;color:var(--main-color);flex-shrink: 0;margin: 0 0 0 15px} #login .find .form li .btn_reset{} #login .find .button{margin: 35px 0;} #login .find .button button, #login .find .button a, #login .find .button .btn{display:flex;width:100%;height:52px;border-radius:8px;background:#ffffff;border:1px solid var(--main-color);align-items:center;justify-content:center;font-size:16px;font-weight:bold;color:var(--main-color)} #login .bglogo{margin-top: 50px;padding:0 25px;height: 45px;} #login .bglogo img{display:block;margin:0 auto;width:auto;max-width: 120px;} /**/ #sign{padding:60px 0 0 0} #sign .sign{padding: 12px 25px 50px;} #sign .sign .count{margin: 0 0 12px 0;font-size:12px;color:#767676;text-align: center;} #sign .sign .count span{color:var(--main-color);font-size:16px;} #sign .sign .title{display:flex;position: relative;margin: 30px 0;} #sign .sign .title .tit{line-height: 42px;font-size: 28px;font-weight:bold;color: #333333;width: 100%;text-align: center;} #sign .sign .title .txt{text-align:center;position: absolute;bottom: 5px;right: 0;width: 30%;font-size:12px;color:#767676;white-space: nowrap;letter-spacing: -0.5px;display: none !important;} #sign .sign .title .txt i{font-size:50px;display: block;line-height: 1;margin: 0 0 10px 0;} #sign .sign .title .txt span{color:var(--main-color);font-size:16px;} #sign .sign .agree{} #sign .sign .agree ul{} #sign .sign .agree li{position: relative;margin: 0 0 20px 0;} #sign .sign .agree li .checkbox{display: flex;align-items: center;justify-content: flex-start;cursor: pointer;} #sign .sign .agree li .checkbox input{display: none;} #sign .sign .agree li .checkbox input ~ i{margin: 0 5px 0 0;width: 20px;height: 20px;flex-shrink: 0;background: url("../img/icon_check_off.svg") no-repeat 50% 50% / contain;} #sign .sign .agree li .checkbox input ~ p{line-height: 20px;font-size: 16px;color: #333333;} #sign .sign .agree li .checkbox input ~ p strong{display: block;line-height: 20px;font-size: 20px;} #sign .sign .agree li .checkbox input:checked ~ i{background: url("../img/icon_check_on.svg") no-repeat 50% 50% / contain;} #sign .sign .agree li .checkbox input:checked ~ p{} #sign .sign .agree li .checkbox input:checked ~ p strong{} #sign .sign .agree li .error_msg{margin:2px 0 0 0} #sign .sign .agree li a{position: absolute;top: 0;right: 0;line-height: 20px;font-size: 16px;color: #333;} #sign .sign .greet{text-align: center;margin: 0 0 50px 0;} #sign .sign .greet .tit{line-height: 28px;font-size: 20px;font-weight: bold;color: #333333;} #sign .sign .greet .txt{line-height: 21px;font-size: 16px;color: #333333;} #sign .sign .form{} #sign .sign .form ul{} #sign .sign .form ul + ul{border-top:1px solid #eee;margin-top:25px;padding-top:25px;} #sign .sign .form li + li{margin:15px 0 0 0;} #sign .sign .form li .tit{margin:0 0 15px 0;line-height:20px;font-size:16px;color:#333333;} #sign .sign .form li .tit em{color:#FF3120} #sign .sign .form li .inp{position:relative;display:flex;} #sign .sign .form li .sel{position:relative;display:flex;} #sign .sign .form li input[type="text"], #sign .sign .form li input[type="password"]{} #sign .sign .form li select{} #sign .sign .form li select + select{margin-left:10px;} #sign .sign .form li .profile{position:relative;margin: 0 0 15px 0;} #sign .sign .form li .profile_img{margin: 0 auto 10px;width:100px;height:100px;border-radius:100px;background:#DBDBDB} #sign .sign .form li .profile_img img{display:block;width:100%;height:100%;object-fit:cover;} #sign .sign .form li .profile_txt{text-align:center;font-size:16px;color: #333333;} #sign .sign .form li .file{display:flex;} #sign .sign .form li .file input{display:none;} #sign .sign .form li .file .file_name{flex: 1;display: flex;justify-content: center;align-items: center;width: 100px;height: 52px;background: #F1F1F5;padding: 0 16px;font-size: 16px;color: #333333;} #sign .sign .form li .file .file_button{} #sign .sign .form li .file .file_button p{display:flex;width: 100px;height:52px;background:#ffffff;border:1px solid var(--main-color);align-items:center;justify-content:center;font-size:16px;color:var(--main-color);flex-shrink: 0;margin: 0 0 0 15px;} #sign .sign .form li .btn_cert{display:flex;width: 100px;height:52px;background:#ffffff;border:1px solid var(--main-color);align-items:center;justify-content:center;font-size:16px;color:var(--main-color);flex-shrink: 0;margin: 0 0 0 15px} #sign .sign .form li .btn_reset{} #sign .sign .button{margin: 65px 0 0 0;} #sign .sign .button button, #sign .sign .button a, #sign .sign .button .btn{display:flex;width:100%;height:52px;border-radius:8px;background:#ffffff;border:1px solid var(--main-color);align-items:center;justify-content:center;font-size:16px;font-weight:bold;color:var(--main-color)} #sign .bglogo{margin-top:100px;padding:0 25px;} #sign .bglogo img{display:block;margin:0 auto;width:auto;max-width:160px} #sign .sign .sign-title{display: flex;align-items: center;margin: 0 0 30px 0;} #sign .sign .sign-title img{width: 24px;height: 24px;margin: 0 10px 0 0;flex-shrink: 0;} #sign .sign .sign-title p{line-height: 36px;font-size: 25px;font-weight: 500;color: #303030;} #sign .sign .sign-content{display:flex;flex-direction:column;padding: 11px;background: #ffffff;border: 1px solid #E0E0E0;} #sign .sign .sign-content .desc{display:flex;} #sign .sign .sign-content .desc + .desc{margin-top:30px;padding-top:30px;border-top:2px solid #707070;} #sign .sign .sign-content .desc .col{flex:1;display: flex;flex-direction: column;} #sign .sign .sign-content .desc .col + .col{margin-left:80px;} #sign .sign .sign-content .desc .tit{margin:0 0 20px 0;line-height: 24px;font-size: 16px;font-weight: 500;color: #161616;flex-shrink: 0;} #sign .sign .sign-content .desc .txt{flex: 1;display: flex;flex-direction: column;} #sign .sign .sign-content .desc .txt dl{display: flex;flex-direction: column;align-items: flex-start;} #sign .sign .sign-content .desc .txt dl.end{margin-top:auto;} #sign .sign .sign-content .desc .txt dl + dl{margin-top: 15px;} #sign .sign .sign-content .desc .txt dt{line-height: 20px;font-size: 13px;color: #161616;width: 92px;margin: 0 0 6px 0;} #sign .sign .sign-content .desc .txt dd{display: flex;flex-direction: column;align-items: flex-start;width: 100%;gap: 6px;} #sign .sign .sign-content .desc .txt dd .inp{display:flex;gap: 6px;width: 100%;position: relative;} #sign .sign .sign-content .desc .txt dd .error{color: #c91c1c;padding:0 5px;display:flex;align-items:center;font-size:13px;} #sign .sign .sign-content .desc .txt dd .check{color: #4869d4;padding:0 5px;display:flex;align-items:center;font-size:13px;} #sign .sign .sign-content .desc .txt dd em{display:inline-flex;height:42px;align-items:center;justify-content: center;font-size:15px;color:#333;width: 32px;} #sign .sign .sign-content .desc .txt dd .form-inp{display: flex;align-items: center;width: 100% !important;height: 42px;padding: 3px 8px;border-radius: 5px;border: 1px solid #E0E0E0;background-color: #ffffff;} #sign .sign .sign-content .desc .txt dd .form-text{} #sign .sign .sign-content .desc .txt dd .form-password{} #sign .sign .sign-content .desc .txt dd .form-select{background: url("../img/icon-dropdown-on.png") no-repeat right 10px center / 20px auto;width: 215px;padding: 10px;background-color: #eee;} #sign .sign .sign-content .desc .txt dd .form-button{padding: 0;height: 42px;border-radius: 5px;font-size: 13px;flex: 1;width: 100%;} #sign .sign .sign-content .desc .txt dd .form-button.btn-02{border-color: #333;color: #fff;background: #333;} #sign .sign .sign-content .desc .txt dd .form-inp-view{position:absolute;top:0;right:0;width:42px;height:42px;background: url("../img/icon-password-view.png") no-repeat 50% 50% / 24px auto;} #sign .sign .sign-content .desc .txt dd .form-inp-view.active{background: url("../img/icon-password-view-on.png") no-repeat 50% 50% / 24px auto;} #sign .sign .sign-content .desc .agree{} #sign .sign .sign-content .desc .agree ul{} #sign .sign .sign-content .desc .agree li{position: relative;} #sign .sign .sign-content .desc .agree li + li{margin-top:10px;} #sign .sign .sign-content .desc .agree .checkbox{} #sign .sign .sign-content .desc .agree .checkbox strong{font-size: 14px;font-weight: 500;margin: 0 5px;} #sign .sign .sign-content .desc .agree .checkbox p{margin: 0;line-height: 18px;font-size:14px;font-weight: 300;} #sign .sign .sign-content .desc .agree .checkbox em{margin:0 5px;font-size: 13px;font-weight: 400;} #sign .sign .sign-content .desc .agree .agree-more{position:absolute;top:0;right:0;} #sign .sign .sign-content .desc .agree .agree-more .more-open{width:30px;height:30px;background:url("../img/icon-dropdown-on.png") no-repeat 50% 50% / 24px auto;padding: 0;} #sign .sign .sign-content .desc .agree .agree-more .more-open.active{background:url("../img/icon-dropdown.png") no-repeat 50% 50% / 24px auto;padding: 0;} #sign .sign .sign-content .desc .agree .agree-more a{display: block;line-height: 18px;font-size: 13px;padding: 0 20px 0 0;background: url(../img/icon-link.png) no-repeat right center / auto 12px;} #sign .sign .sign-content .desc .agree .agree-cont{height: 74px;overflow-y: auto;border: 1px solid #E0E0E0;padding: 10px;margin: 10px 0 0 0;line-height: 18px;font-size: 12px;background: #fafafa;display:none;} #sign .sign .sign-content .desc .agree .agree-cont.active{display:block;} #sign .sign .sign-content .button{margin: 50px 0 0 0;display: flex;align-items: center;justify-content: center;} #sign .sign .sign-content .button .btn{width: 100%;flex: unset;height: 42px;font-size: 15px;font-weight: 400;} #sign .sign .sign-content .button .btn + .btn{margin: 0 0 0 6px;} #sign .sign-complete{display: block;margin: 135px auto;width: 480px;max-width: 100%;text-align: center;} #sign .sign-complete .sign-complete-logo{margin: 0 0 36px 0;} #sign .sign-complete .sign-complete-logo img{displaY:block;margin:0 auto;width:210px;max-width:100%} #sign .sign-complete .sign-complete-title{margin: 0 0 40px 0;padding: 0 0 40px 0;border-bottom: 1px solid #9F9F9F;line-height: 36px;font-size: 25px;font-weight: 500;color: #303030;} #sign .sign-complete .sign-complete-content{} #sign .sign-complete .sign-complete-content .sign-complete-content-box{padding: 28px;background: #F7F7F7;margin: 0 0 70px 0;line-height: 30px;font-size: 16px;color: #161616;} #sign .sign-complete .sign-complete-button{display: flex;align-items: center;box-shadow: 0 3px 6px rgb(0 0 0 / 16%);} #sign .sign-complete .sign-complete-button .btn{height: 46px;font-size: 15px;} #sign .sign-complete .sign-complete-button .btn + .btn{margin: 0 0 0 30px;} /* #community{padding: 25px 25px 80px;} #community .title{position: relative;padding: 0 0px 10px 0;margin: 0 0 10px 0;border-bottom: 1px solid var(--main-color);} #community .title .tit{line-height: 30px;font-size: 18px;font-weight: bold;color: #333333;} #community .title .txt{line-height: 12px;font-size: 10px;color: #767676;} #community .title .act{position: absolute;top: 14%;right: 0;transform: translateY(-50%);} #community .title .act a{border-radius: 8px;padding: 0 4px;display: flex;align-items: center;justify-content: center;min-width: 76px;height: 30px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);line-height: 15px;font-size: 12px;font-weight: bold;color: #333333;text-align: center;} #community .community{padding: 24px 12px 50px;overflow:hidden;} #community .community > ul{display:flex;flex-wrap:wrap;margin:0 -8px} #community .community > ul >li{width:50%;padding:0 8px 16px;} #community .community > ul > li.etc{width:100%;} #community .community > ul > li.etc .img{height: 60px;} #community .community > ul > li.etc .img img{width:100%;height:100%;object-fit:cover;} #community .community > ul > li .inner{position:relative;display: block;border-radius:10px;overflow:hidden;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #community .community > ul > li .img{position:relative;z-index:1;} #community .community > ul > li .img img{display:block;width:60px;height:60px;object-fit:cover;} #community .community > ul > li .txt{position:absolute;z-index:2;top:50%;left:0;width:100%;white-space:nowrap;font-size:18px;font-weight:bold;color:#ffffff;transform:translateY(-50%);text-align:center;} #community .table{margin:0 0 25px 0;} #community .list{} #community .list > ul{} #community .list > ul > li{margin: 0 0 20px 0;} #community .list > ul > li .inner{display: block;padding:12px 15px;border-radius:8px;background:#ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #community .list > ul > li .tit{margin: 0 0 12px 0;line-height: 24px;font-size: 16px;color: #191919;} #community .list > ul > li .txt{margin: 0 0 12px 0;font-size: 12px;color: #767676;} #community .list > ul > li .wri{font-size: 12px;color: #333333;} #community .list > ul > li .inf{display:flex;align-items:center;padding: 5px 0 0 0;margin: 5px 0 0 0;border-top: 1px solid #DBDBDB;} #community .list > ul > li .inf .date{font-size: 12px;color: #767676;} #community .list > ul > li .inf .count{margin: 0 0 0 auto;display: flex;align-items: center;justify-content: center;} #community .list > ul > li .inf .count dl{display: flex;align-items: center;justify-content: center;font-size: 12px;color: #767676;} #community .list > ul > li .inf .count dl + dl{margin: 0 0 0 10px;} #community .list > ul > li .inf .count dt{margin:0 2px 0 0;} #community .list > ul > li .inf .count dt img{width:15px;height:auto;} #community .list > ul > li .inf .count dd{} #community .bottom{position:relative;margin:40px 0 0 0;padding:15px 0;border-top:1px solid var(--main-color);display:flex;align-items: center;justify-content: space-between;} #community .bottom .back{order:1;margin: 0 10px 0 0;flex-shrink:0;} #community .bottom .back a{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 60px;height: 60px;border-radius: 8px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #community .bottom .back a i{width: 24px;height: 24px;font-size: 20px;display: flex;align-items: center;justify-content: center;} #community .bottom .back a p{font-size: 12px;font-weight: bold;color: #333333;} #community .bottom .write{order:3;margin: 0 0 0 10px;flex-shrink:0;} #community .bottom .write a{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 60px;height: 60px;border-radius: 8px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #community .bottom .write a i{width: 24px;height: 24px;font-size: 20px;display: flex;align-items: center;justify-content: center;} #community .bottom .write a p{font-size: 12px;font-weight: bold;color: #333333;} #community .bottom .tool{order:2;flex:1;} #community .bottom .page{display: flex;align-items: center;justify-content: center;width: 100%;} #community .bottom .page a{display: flex;align-items: center;justify-content: center;font-size: 12px;width: 20px;height: 20px;border-radius:20px;overflow:hidden;} #community .bottom .page a + a{margin-left:auto;} #community .bottom .page a.on{color:#ffffff;background:var(--main-color);} #community .bottom .page a img{width:14px;} #community .bottom .search{margin:10px 0 0 0;padding: 0 20px;} #community .bottom .search .search_form{display:flex;border-radius:8px;height:28px;border:2px solid var(--main-color);overflow:hidden;} #community .bottom .search .search_form input{width: 100%;padding: 0 6px;font-size: 12px;color: #333333;} #community .detail{} #community .detail .box{border-radius: 8px;overflow: hidden;box-shadow: 0 1.5px 3px rgba(0,0,0,0.15);} #community .detail .heading{padding: 0 15px;display: flex;align-items: center;height: 40px;} #community .detail .heading .subject{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;line-height: 24px;font-size: 16px;color: #333333;overflow: hidden;padding: 0 10px 0 0;} #community .detail .heading .date{flex-shrink: 0;margin: 0 0 0 auto;line-height: 24px;font-size: 12px;color: #767676;} #community .detail .info{padding: 0 15px;background: #F1F1F5;display: flex;align-items: center;height: 40px;} #community .detail .info .writer{font-size: 12px;color: #767676;} #community .detail .info .tool{margin: 0 0 0 auto;display: flex;align-items: center;} #community .detail .info .tool a{font-size: 12px;color: #767676;} #community .detail .info .tool a + a{margin: 0 0 0 10px;} #community .detail .cont{padding: 10px;margin: 0 0 15px 0;} #community .detail .cont .img{display: flex;align-items: center;justify-content: center;flex-direction: column;} #community .detail .cont .img img{display: block;width: auto;max-width: 100%;height: auto;margin: 0 0 15px 0;} #community .detail .cont .txt{line-height: 16px;font-size: 12px;color: #333333;} #community .detail .recommand{display: flex;align-items: center;justify-content: center;} #community .detail .recommand button, #community .detail .recommand a{display:flex;align-items:center;justify-content:center;margin:0 5px;padding: 10px;border-radius: 8px;background: #ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #community .detail .recommand .type01{line-height: 15px;font-size: 12px;color: #232732;} #community .detail .recommand .type01 span{color:#0EAACE;margin-left:5px;} #community .detail .recommand .type02{font-size: 10px;line-height: 1;color: #333333;} #community .detail .share{padding: 10px;display: flex;align-items: center;justify-content: center;} #community .detail .share a{width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 8px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);background: #ffffff;margin: 0 10px;line-height: 1;font-size: 10px;color: #232732;text-align: center;} #community .detail .share a + a{} #community .detail .share a img{display: block;width: 18px;height: auto;} #community .detail .guide{display: flex;align-items: center;padding: 8px 10px;} #community .detail .guide .count{font-size: 10px;color: #767676;} #community .detail .guide .files{margin: 0 0 0 auto;font-size: 10px;color: #767676;} #community .detail .comment{} #community .detail .comment .comment_write{background: #F1F1F5;padding: 5px 10px;display:flex;align-items:center;width:100%;} #community .detail .comment .comment_write .form{display:flex;align-items:center;padding: 0 10px;width:100%;background: #ffffff;border-radius: 8px;border: 1px solid #707070;} #community .detail .comment .comment_write .chk{display:flex;align-items:center;flex-shrink: 0;} #community .detail .comment .comment_write .chk input{display: none;} #community .detail .comment .comment_write .chk input ~ i{margin: 0 0 0 3px;width: 14px;height: 14px;background: #ffffff url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;border-radius: 20px;overflow: hidden;} #community .detail .comment .comment_write .chk input ~ p{line-height: 20px;font-size: 11px;color: #333333;} #community .detail .comment .comment_write .chk input:checked ~ i{background:url("../img/icon_checkbox_on.png") no-repeat 50% 50% / contain} #community .detail .comment .comment_write .inp{display: flex;align-items: center;flex: 1;} #community .detail .comment .comment_write .inp input{height: 30px;padding: 2px 10px;background: transparent;} #community .detail .comment .comment_write .inp button{border-radius: 8px;width: 20px;height: 20px;background: #ffffff;display: flex;align-items: center;justify-content: center;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #community .detail .comment .comment_list{} #community .detail .comment .comment_list ul{} #community .detail .comment .comment_list li{padding: 10px;display: flex;flex-direction: column;} #community .detail .comment .comment_list li + li{border-top:1px solid #DBDBDB} #community .detail .comment .comment_list li .head{display: flex;align-items: center;} #community .detail .comment .comment_list li .head .name{line-height: 1;font-size: 10px;color: #333333;} #community .detail .comment .comment_list li .head .tool{margin: 0 0 0 auto;display: flex;align-items: center;} #community .detail .comment .comment_list li .head .tool a{font-size: 10px;color: #767676;} #community .detail .comment .comment_list li .head .tool a + a{margin: 0 0 0 5px;} #community .detail .comment .comment_list li .bott{margin: 8px 0 0 0;display: flex;align-items: center;} #community .detail .comment .comment_list li .bott .text{flex: 1;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;font-size: 12px;color: #333333;} #community .detail .comment .comment_list li .bott .date{font-size: 10px;color: #767676;} #community .detail .comment_more{margin-top:10px;} #community .detail .comment_more a{display:Flex;height:30px;align-items:center;justify-content:Center;font-size:12px;color:#333333;} #community .trade{margin-top:20px} #community .trade .heading{margin-bottom:20px;} #community .trade .heading .tit{line-height: 20px;font-size: 16px;font-weight: bold;color: #333333;} #community .trade .bottom{border-top:none;margin: 20px 0 0 0;} */ /* #hospital{padding: 25px 25px 80px;} #hospital .title{position: relative;padding: 0 100px 10px 0;margin: 0 0 10px 0;border-bottom: 2px solid var(--main-color);} #hospital .title .tit{line-height: 30px;font-size: 18px;font-weight: bold;color: #333333;} #hospital .title .txt{line-height: 12px;font-size: 10px;color: #767676;} #hospital .title .act{position: absolute;top: 50%;right: 0;transform: translateY(-50%);} #hospital .title .act a{border-radius: 8px;padding: 0 4px;display: flex;align-items: center;justify-content: center;min-width: 76px;height: 30px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);line-height: 15px;font-size: 12px;font-weight: bold;color: #333333;} #hospital .hospital{padding: 24px 12px 50px;} #hospital .hospital ul{display:flex;flex-wrap:wrap;margin:0 -8px} #hospital .hospital li{width:50%;padding:0 8px 16px;} #hospital .hospital li.etc{width:100%;} #hospital .hospital li.etc .img{height: 60px;} #hospital .hospital li.etc .img img{width:100%;height:100%;object-fit:cover;} #hospital .hospital .inner{position:relative;display: block;border-radius:10px;overflow:hidden;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #hospital .hospital .img{position:relative;z-index:1;} #hospital .hospital .img img{display:block;width:100%;height:100%;object-fit:cover;} #hospital .hospital .txt{position:absolute;z-index:2;top:50%;left:0;width:100%;white-space:nowrap;font-size:18px;font-weight:bold;color:#ffffff;transform:translateY(-50%);text-align:center;} #hospital .detail{} #hospital .detail .info{display: flex;} #hospital .detail .info .img{flex-shrink: 0;width: 132px;height: auto;display: flex;align-items: center;justify-content: center;} #hospital .detail .info .img img{display: block;width: auto;max-width: 100%;height: auto;} #hospital .detail .info .con{flex: 1;padding: 12px;} #hospital .detail .info .con .name{margin: 0 0 15px 0;line-height: 24px;font-size: 16px;font-weight: bold;color: #333333;} #hospital .detail .info .con .grade{line-height: 24px;font-size: 16px;color: #333333;} #hospital .detail .info .con .grade p{font-size:12px;} #hospital .detail .info .con .input{margin:10px 0 0;} #hospital .detail .info .con .input .form{display:flex;height: 40px;align-items:center;border-radius:7px;border:0.5px solid #333;} #hospital .detail .info .con .input .form input{height:38px;width:100%;background:transparent} #hospital .detail .info .con .input .form button{width:38px;height:38px;background:url("../img/icon_link_arrow.png") no-repeat right 10px center / 20px auto} #hospital .detail .find{display:flex;flex-direction:column;align-items:flex-start;justify-content: center;position:relative;margin: 0 0 15px 0;padding:10px 15px;border-radius:7px;background:#ffffff;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);height: 68px;} #hospital .detail .find .tit{line-height:24px;font-size:14px;font-weight:bold;color:#333333;} #hospital .detail .find .txt{line-height:15px;font-size:12px;color:#767676} #hospital .detail .find .act{position:absolute;top:50%;right:15px;transform:translateY(-50%)} #hospital .detail .find .act a{display:flex;width:36px;height:36px;border-radius:36px;background:var(--main-color) url("../img/icon_arrow.png") no-repeat 50% 50% / 20px auto;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);} #hospital .detail .text{margin: 0 0 15px 0;} #hospital .detail .text .box{padding: 15px 20px;border-radius:8px;background:#ffffff;box-shadow: 0 1.5px 3px rgb(0 0 0 / 16%);} #hospital .detail .text .box .txt{height:90px;overflow:hidden;line-height: 18px;font-size: 12px;} #hospital .detail .text .box .more{margin: 10px 0 -10px 0;} #hospital .detail .text .box .more a{display:flex;height: 30px;align-items:center;justify-content:center;line-height:18px;font-size:12px;color: #333;} #hospital .detail .review{margin: 0 0 15px 0;} #hospital .detail .review .box{padding: 15px 20px;border-radius:8px;background:#ffffff;box-shadow: 0 1.5px 3px rgb(0 0 0 / 16%);} #hospital .detail .review .heading{display:flex;margin:0 0 20px 0;} #hospital .detail .review .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #hospital .detail .review .heading .act{margin-left:auto;} #hospital .detail .review .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #hospital .detail .review .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #hospital .detail .review .list{} #hospital .detail .review .list ul{overflow: hidden;height: 138px;} #hospital .detail .review .list li{} #hospital .detail .review .list li + li{margin-top:10px;} #hospital .detail .review .list li a{display:flex;align-items:center;} #hospital .detail .review .list li .subj{line-height:20px;font-size: 12px;color: #333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;flex: 1;} #hospital .detail .review .list li .writer{margin-left:10px;flex-shrink:0;font-size:12px;color:#333333} #hospital .detail .review .more{margin: 10px 0 -10px 0;} #hospital .detail .review .more a{display:flex;height: 30px;align-items:center;justify-content:center;line-height:18px;font-size:12px;color: #333;} #hospital .detail .review .write{displat:flex;align-items:center;justify-content:center;margin:30px 0;} #hospital .detail .review .write a{display:flex;margin: 0 auto;flex-direction:column;width:60px;height:60px;border-radius:7px;background:#fff;box-shadow:0 1.5px 3px rgba(0,0,0,0.16);line-height:15px;font-size:12px;font-weight:bold;color:#333;text-align:center;justify-content: center;align-items: center;} #hospital .detail .review .write a strong{display:block;font-size:20px;line-height: 24px;margin: 0 0 6px 0;} #hospital .write .sort{margin:0 0 25px 0;} #hospital .write .cont{border-radius:8px;overflow: hidden;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);} #hospital .write .cont .subject{position:relative;padding: 0 12px;border-bottom: 1px solid #DBDBDB;} #hospital .write .cont .subject input[type="text"]{display: flex;align-items:center;padding: 0 60px 0 0;width:100%;height:50px;font-size: 16px;} #hospital .write .cont .subject .checkbox{position:absolute;top:50%;right: 12px;transform:translateY(-50%);display:flex;align-items:center} #hospital .write .cont .subject .checkbox input{display: none;} #hospital .write .cont .subject .checkbox input ~ i{margin: 0 0 0 3px;width: 20px;height: 20px;background: url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;} #hospital .write .cont .subject .checkbox input ~ p{line-height: 20px;font-size: 14px;color: #333333;} #hospital .write .cont .subject .checkbox input:checked ~ i{background:url("../img/icon_checkbox_on.png") no-repeat 50% 50% / contain} #hospital .write .cont .textarea{} #hospital .write .cont .textarea textarea{width: 100%;height: 30vh;font-size: 16px;text-align: left;padding: 12px;} #hospital .write .cont .file{border-top: 1px solid #DBDBDB;padding: 5px 12px;display: flex;align-items: center;} #hospital .write .cont .file input{display: none;} #hospital .write .cont .file input ~ img{margin:0 6px 0 0;width:20px;height:auto;} #hospital .write .cont .file input ~ p{font-size:12px;color:#333333;} #hospital .write .cont .button{border-top: 1px solid #DBDBDB;padding: 10px 12px;display: flex;align-items: center;justify-content: flex-end;} #hospital .write .cont .button .btn{padding: 0 6px;display: flex;height: 35px;border-radius: 8px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);font-size: 15px;align-items: center;justify-content: center;} #hospital .write .cont .button .btn + .btn{margin-left: 16px;} #hospital .bottom{position:relative;margin:40px 0 0 0;padding:15px 0;border-top:1px solid var(--main-color);display:flex;align-items: center;justify-content: space-between;} #hospital .bottom .back{order:1;margin: 0 10px 0 0;flex-shrink:0;} #hospital .bottom .back a{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 60px;height: 60px;border-radius: 8px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #hospital .bottom .back a i{width: 24px;height: 24px;font-size: 20px;display: flex;align-items: center;justify-content: center;} #hospital .bottom .back a p{font-size: 12px;font-weight: bold;color: #333333;} #hospital .bottom .write{order:3;margin: 0 0 0 10px;flex-shrink:0;} #hospital .bottom .write a{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 60px;height: 60px;border-radius: 8px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #hospital .bottom .write a i{width: 24px;height: 24px;font-size: 20px;display: flex;align-items: center;justify-content: center;} #hospital .bottom .write a p{font-size: 12px;font-weight: bold;color: #333333;} */ /**/ #rank{padding: 25px 25px 80px;} #rank .title{position: relative;padding: 0 100px 10px 0;margin: 0 0 10px 0;border-bottom: 2px solid var(--main-color);} #rank .title .tit{line-height: 30px;font-size: 18px;font-weight: bold;color: #333333;} #rank .title .txt{line-height: 12px;font-size: 10px;color: #767676;} #rank .title .act{position: absolute;top: 50%;right: 0;transform: translateY(-50%);} #rank .title .act a{border-radius: 8px;padding: 0 4px;display: flex;align-items: center;justify-content: center;min-width: 76px;height: 30px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);line-height: 15px;font-size: 12px;font-weight: bold;color: #333333;} #rank .rank{} #rank .rank .find{} #rank .rank .find .heading{position: relative;padding: 0 0 10px 0;margin: 0 0 10px 0;} #rank .rank .find .heading .tit{line-height: 30px;font-size: 18px;font-weight: bold;color: #333333;} #rank .rank .find .heading .txt{line-height: 12px;font-size: 10px;color: #767676;} #rank .rank .find .button{display:flex;margin:15px 0;} #rank .rank .find .button a{flex:1;display:flex;height:40px;align-items:center;justify-content: center;border-radius:7px;background:#fff;border:1px solid var(--main-color);font-size: 14px;color: var(--main-color);} #rank .rank .find .button a + a{margin-left:15px;} #rank .rank .input{display:flex;margin: 0 auto 35px;width:210px;height:40px;align-items:center;border:1px solid #333;border-radius:7px;} #rank .rank .input form{display:flex;} #rank .rank .input input{padding:0 10px;flex: 1;width: 100%;height: 40px;background: transparent;} #rank .rank .input button{width:40px;height:40px;background: url("../img/icon_link_arrow.png") no-repeat 50% 50% / 20px auto;flex-shrink: 0;text-indent: -9999em;overflow: hidden;} #rank .rank .search{} #rank .rank .search .result{margin:0 0 15px 0;text-align:center;font-size:16px;font-weight:bold;color:#333;} #rank .rank .search .heading{position: relative;padding: 0 0 10px 0;margin: 0 0 10px 0;} #rank .rank .search .heading .tit{line-height: 30px;font-size: 18px;font-weight: bold;color: #333333;} #rank .rank .search .heading .txt{line-height: 12px;font-size: 10px;color: #767676;} #rank .rank .search .text{margin: 0 0 15px 0;text-align: center;line-height: 20px;font-size: 12px;color: #767676;} #rank .rank .search .form{display: flex;align-items: center;margin: 0 0 35px 0;} #rank .rank .search .form .desc{width: 60%;} #rank .rank .search .form .desc ul{} #rank .rank .search .form .desc li{} #rank .rank .search .form .desc li + li{margin: 15px 0 0 0;} #rank .rank .search .form .desc li input[type="text"]{height: 40.5px;border-radius: 7px;border: 1px solid #333;background: url("../img/icon_link_arrow.png") no-repeat right 10px center / 15px auto;font-size: 12px;} #rank .rank .search .form .button{margin: 0 0 0 25px;flex-shrink: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;} #rank .rank .search .form .button img{width: 84px;height: 95px;display: block;object-fit: cover;margin: 0 0 15px 0;} #rank .rank .search .form .button button{display: flex;align-items: center;justify-content: center;border-radius: 7px;width: 100px;height: 30px;} #rank .rank .search .reset{display: flex;align-items: center;justify-content: center;margin: 18px 0 0 0;} #rank .rank .search .reset a{display:flex;min-width: 76px;height: 30px;align-items:center;justify-content: center;border-radius:7px;background:#fff;font-size: 12px;color: #767676;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);} #rank .rank .search_list{margin:50px 0 0 0} #rank .rank .search_list .tool{display:flex;align-items:center;margin: 0 0 10px 0;} #rank .rank .search_list .tool .type{font-size:16px;font-weight:bold} #rank .rank .search_list .tool .sort{margin-left:auto;} #rank .rank .search_list .tool .sort .sort_btn{/*width: 80px;*/width: 100px;height: 30px;min-width: auto;border-width: 1px;text-align: left;line-height: 28px;font-size: 12px;} #rank .rank .search_list .tool .sort .sort_menu{border-width:1px;} #rank .rank .search_list .tool .sort .sort_menu ul{} #rank .rank .search_list .tool .sort .sort_menu li{} #rank .rank .search_list .tool .sort .sort_menu a{height:30px;font-size:12px;} #rank .rank .search_list .order{} #rank .rank .search_list .order ul{} #rank .rank .search_list .order li{} #rank .rank .search_list .order li + li{margin:15px 0 0 0;} #rank .rank .search_list .order .box{border-radius: 7px;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);background: #fff;padding: 15px;} #rank .rank .search_list .order .teacher{margin: 0 0 25px 0;display: flex;} #rank .rank .search_list .order .teacher .img{width: 101px;height: 125px;flex-shrink: 0;margin: 0 16px 0 0;} #rank .rank .search_list .order .teacher .img img{display: block;width: 100%;height: 100%;object-fit: cover;} #rank .rank .search_list .order .teacher .con{position: relative;flex: 1;display: flex;flex-direction: column;} #rank .rank .search_list .order .teacher .con .name{line-height: 24px;font-size: 16px;font-weight: bold;color: #333;padding: 0 80px 0 0;} #rank .rank .search_list .order .teacher .con .type{margin: 10px 0 0 0;display: flex;flex-direction: column;align-items: flex-start;font-size: 12px;line-height: 15px;color: #333;} #rank .rank .search_list .order .teacher .con .type strong{margin: 0 0 5px 0;} #rank .rank .search_list .order .teacher .con .type p{margin: 0 0 5px 0;} #rank .rank .search_list .order .teacher .con .edit{position: absolute;top: 0;right: 0;} #rank .rank .search_list .order .teacher .con .edit a{display: flex;padding: 0 6px;height: 24px;border-radius: 24px;background: #fff;box-shadow: 0 1.5px 3px rgb(0,0,0,0.16);font-size: 10px;align-items: center;justify-content: center;} #rank .rank .search_list .order .grade{line-height: 24px;font-size: 16px;font-weight: bold;margin: 0 0 15px 0;} #rank .rank .search_list .order .grade strong{} #rank .rank .search_list .order .grade p{font-size: 12px;line-height: 15px;margin: 6px 0 0 0;display: block;font-weight: 400;} #rank .rank .search_list .order .text{font-size: 12px;line-height: 15px;display: block;font-weight: 400;} #rank .rank .search_list .order .button{display:flex;margin:25px 0 0} #rank .rank .search_list .order .button a{flex:1;display:flex;height:40px;align-items:center;justify-content: center;border-radius:7px;font-size: 14px;border: 0.5px solid transparent;} #rank .rank .search_list .order .button a + a{margin-left:15px;} #rank .rank .search_list .order .relation{margin: 50px 0 0 0;} #rank .rank .search_list .order .relation .heading{display:flex;margin:0 0 20px 0;} #rank .rank .search_list .order .relation .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #rank .rank .search_list .order .relation .heading .act{margin-left:auto;} #rank .rank .search_list .order .relation .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #rank .rank .search_list .order .relation .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #rank .rank .search_list .order .relation .list{height: 140px;overflow:hidden} #rank .rank .search_list .order .relation .list ul{} #rank .rank .search_list .order .relation .list li{} #rank .rank .search_list .order .relation .list li + li{margin-top:10px;} #rank .rank .search_list .order .relation .list li a{display:flex;align-items:center;} #rank .rank .search_list .order .relation .list li .subj{line-height:20px;font-size: 12px;color: #333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;flex: 1;} #rank .rank .search_list .order .relation .list li .writer{margin-left:10px;flex-shrink:0;font-size:12px;color:#333333} #rank .rank .search_list .order .relation .more{margin: 10px 0 -10px 0;} #rank .rank .search_list .order .relation .more a{display:flex;height: 30px;align-items:center;justify-content:center;line-height:18px;font-size:12px;color: #333;} #rank .rank .popular{} #rank .rank .popular .heading{position: relative;padding: 0 0 10px 0;margin: 0 0 10px 0;} #rank .rank .popular .heading .tit{line-height: 30px;font-size: 18px;font-weight: bold;color: #333333;} #rank .rank .popular .heading .txt{line-height: 12px;font-size: 10px;color: #767676;} #rank .rank .popular .box{border-radius: 7px;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);background: #fff;padding: 15px;} #rank .rank .popular .teacher{margin: 0 0 25px 0;display: flex;} #rank .rank .popular .teacher .img{width: 101px;height: 125px;flex-shrink: 0;margin: 0 16px 0 0;} #rank .rank .popular .teacher .img img{display: block;width: 100%;height: 100%;object-fit: cover;} #rank .rank .popular .teacher .con{position: relative;flex: 1;display: flex;flex-direction: column;} #rank .rank .popular .teacher .con .name{line-height: 24px;font-size: 16px;font-weight: bold;color: #333;padding: 0 80px 0 0;} #rank .rank .popular .teacher .con .type{margin: 10px 0 0 0;display: flex;flex-direction: column;align-items: flex-start;font-size: 12px;line-height: 15px;color: #333;} #rank .rank .popular .teacher .con .type strong{margin: 0 0 5px 0;} #rank .rank .popular .teacher .con .type p{margin: 0 0 5px 0;} #rank .rank .popular .teacher .con .edit{position: absolute;top: 0;right: 0;} #rank .rank .popular .teacher .con .edit a{display: flex;padding: 0 6px;height: 24px;border-radius: 24px;background: #fff;box-shadow: 0 1.5px 3px rgb(0,0,0,0.16);font-size: 10px;align-items: center;justify-content: center;} #rank .rank .popular .grade{line-height: 24px;font-size: 16px;font-weight: bold;margin: 0 0 15px 0;} #rank .rank .popular .grade strong{} #rank .rank .popular .grade p{font-size: 12px;line-height: 15px;margin: 6px 0 0 0;display: block;font-weight: 400;} #rank .rank .popular .text{font-size: 12px;line-height: 15px;display: block;font-weight: 400;} #rank .rank .popular .button{display:flex;margin:25px 0 0} #rank .rank .popular .button a{flex:1;display:flex;height:40px;align-items:center;justify-content: center;border-radius:7px;background:#fff;border:1px solid var(--main-color);font-size: 14px;color: var(--main-color);} #rank .rank .popular .button a + a{margin-left:15px;} #rank .rank .popular .relation{margin: 50px 0 0 0;} #rank .rank .popular .relation .heading{display:flex;margin:0 0 20px 0;} #rank .rank .popular .relation .heading .tit{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #rank .rank .popular .relation .heading .act{margin-left:auto;} #rank .rank .popular .relation .heading .act a{display:flex;line-height:14px;font-size:12px;color:#333333;align-items:center;} #rank .rank .popular .relation .heading .act i{width:14px;height:14px;margin-left:4px;background:url("../img/icon_link_plus.png") no-repeat 50% 50% / contain} #rank .rank .popular .relation .list{height: 140px;overflow:hidden} #rank .rank .popular .relation .list ul{} #rank .rank .popular .relation .list li{} #rank .rank .popular .relation .list li + li{margin-top:10px;} #rank .rank .popular .relation .list li a{display:flex;align-items:center;} #rank .rank .popular .relation .list li .subj{line-height:20px;font-size: 12px;color: #333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;flex: 1;} #rank .rank .popular .relation .list li .writer{margin-left:10px;flex-shrink:0;font-size:12px;color:#333333} #rank .rank .popular .relation .more{margin: 10px 0 -10px 0;} #rank .rank .popular .relation .more a{display:flex;height: 30px;align-items:center;justify-content:center;line-height:18px;font-size:12px;color: #333;} #rank .rank .disease{margin:50px 0 0 0} #rank .rank .disease .tool{display:flex;align-items:center;margin: 0 0 10px 0;} #rank .rank .disease .tool .type{font-size:16px;font-weight:bold} #rank .rank .disease .tool .sort{margin-left:auto;} #rank .rank .disease .tool .sort .sort_btn{width: 80px;height: 30px;min-width: auto;border-width: 1px;text-align: left;line-height: 28px;font-size: 12px;} #rank .rank .disease .tool .sort .sort_menu{border-width:1px;} #rank .rank .disease .tool .sort .sort_menu ul{} #rank .rank .disease .tool .sort .sort_menu li{} #rank .rank .disease .tool .sort .sort_menu a{height:30px;font-size:12px;} #rank .rank .disease .order{} #rank .rank .disease .order .tit{margin: 0 0 15px 0;line-height: 24px;font-size: 16px;font-weight: bold;color: #333333;} #rank .rank .disease .order .favorite{margin: 0 0 30px 0;} #rank .rank .disease .order .favorite .lst{} #rank .rank .disease .order .favorite .lst ul{margin: 0 -7px -15px;display: flex;flex-wrap: wrap;} #rank .rank .disease .order .favorite .lst li{padding: 0 7px 15px;width: 33.33%;} #rank .rank .disease .order .favorite .lst li a{display: flex;align-items: center;justify-content: center;text-align: center;height: 50px;order-radius: 7px;background: #fff;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);font-size: 18px;} #rank .rank .disease .order .every{} #rank .rank .disease .order .every .lst{} #rank .rank .disease .order .every .lst ul{} #rank .rank .disease .order .every .lst li{} #rank .rank .disease .order .every .lst li + li{} #rank .rank .disease .order .every .lst li a{line-height: 25px;font-size: 14px;} /**/ #miracle{padding: 25px 25px 80px;} #miracle .title{position: relative;padding: 0 100px 10px 0;margin: 0 0 10px 0;border-bottom: 2px solid var(--main-color);} #miracle .title .tit{line-height: 30px;font-size: 18px;font-weight: bold;color: #333333;} #miracle .title .txt{line-height: 12px;font-size: 10px;color: #767676;} #miracle .title .act{position: absolute;top: 50%;right: 0;transform: translateY(-50%);} #miracle .title .act a{border-radius: 8px;border: 2px solid #0EAACE;padding: 0 4px;display: flex;align-items: center;justify-content: center;height: 30px;box-shadow: 0 3px 6px rgba(0,0,0,0.16);line-height: 15px;font-size: 12px;font-weight: bold;color: #333333;} #miracle .miracle{padding: 15px 0;} #miracle .miracle .donation{margin: 0 0 15px 0;} #miracle .miracle .donation{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #miracle .miracle .donation .total{text-align: center;margin: 0 0 25px 0;} #miracle .miracle .donation .total .tit{margin: 0 0 5px 0;line-height: 25px;font-size: 16px;font-weight: bold;color: #333333;} #miracle .miracle .donation .total .num{line-height: 25px;font-size: 16px;font-weight: bold;color: #333333;} #miracle .miracle .donation .detail{} #miracle .miracle .donation .detail .tit{margin: 0 0 15px 0;line-height: 24px;font-size: 16px;font-weight: bold;color: #333333;} #miracle .miracle .donation .detail .con{} #miracle .miracle .donation .detail .con ul{} #miracle .miracle .donation .detail .con li{display:flex;align-items:center;} #miracle .miracle .donation .detail .con li + li{margin-top:15px;} #miracle .miracle .donation .detail .con .image{margin: 0 6px 0 0;width: 40px;height: 40px;border-radius: 40px;border: 1px solid #707070;flex-shrink: 0;display: flex;align-items: center;justify-content: center;padding: 05px;} #miracle .miracle .donation .detail .con .image img{display: flex;width: auto;max-width: 100%;height: auto;} #miracle .miracle .donation .detail .con .company{display: flex;flex-direction: column;width: 30%;} #miracle .miracle .donation .detail .con .company .name{line-height: 14px;font-size: 12px;color: #999999;text-align: center;} #miracle .miracle .donation .detail .con .company .money{text-align: right;font-size: 16px;font-weight: bold;color: #333333;} #miracle .miracle .donation .detail .con .button{margin: 0 0 0 auto;} #miracle .miracle .donation .detail .con .button a{display: flex;padding: 0 6px;min-width: 40px;height: 25px;align-items: center;justify-content: center;border-radius: 8px;background: #F1F1F5;font-size: 14px;color: #999999;} #miracle .miracle .donation .more{margin-top:50px;display: flex;align-items: center;justify-content: center;} #miracle .miracle .donation .more a{display: flex;padding: 0 12px;min-width: 40px;height: 30px;align-items: center;justify-content: center;border-radius: 8px;background: #F1F1F5;font-size: 14px;color: #999999;} #miracle .miracle .desc{margin: 0 0 15px 0;} #miracle .miracle .desc .box{padding: 15px 25px;border-radius:8px;background:#ffffff;box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #miracle .miracle .desc .box .title{line-height: 24px;font-size: 18px;font-weight: bold;color: #333333;} #miracle .miracle .desc .box .text{margin: 2px 0 0 0;line-height: 16px;font-size: 13px;color: #767676;} #miracle .miracle .desc .box .info{margin: 2px 0 0 0;padding: 0 20%;line-height: 16px;font-size: 13px;color: #767676;} #miracle .miracle .desc .box .image{margin: 15px 0;padding: 0 20%;display: flex;align-items: center;justify-content: center;} #miracle .miracle .desc .box .image img{display: block;width: auto;max-width: 100%;height: auto;} #miracle .miracle .desc .box .rate{text-align: center;display: flex;flex-direction: column;align-items: center;} #miracle .miracle .desc .box .rate .tit{line-height: 16px;font-size: 12px;color: #333333;margin: 0 0 6px 0;} #miracle .miracle .desc .box .rate .tit span{font-size:18px;color:var(--main-color)} #miracle .miracle .desc .box .rate .txt{line-height: 16px;font-size: 12px;color: #767676;margin: 0 0 6px 0;} #miracle .miracle .desc .box .rate .txt span{font-size:18px;color:var(--main-color)} #miracle .miracle .desc .box .rate .act{display: flex;align-items: center;justify-content: center;} #miracle .miracle .desc .box .rate .act a{border-radius: 8px;background: #F1F1F5;padding: 0 40px;display: flex;align-items: center;justify-content: center;height: 40px;font-size: 16px;font-weight: bold;color: #333333;} #miracle .miracle .desc .box .story{text-align:center;display: none;} #miracle .miracle .desc .box .story .vod{margin:0 0 10px 0;} #miracle .miracle .desc .box .story .vod *{display:block;width:100%;height:auto} #miracle .miracle .desc .box .story .img{margin:0 0 10px 0;} #miracle .miracle .desc .box .story .img img{display:block;width:100%;height:auto} #miracle .miracle .desc .box .story .txt{line-height:24px;font-size:16px;font-weight:bold;color:#333333;} #miracle .miracle .desc .box .story .act{font-size:36px;margin:25px 0 0 0;display:flex;flex-direction:column;align-items:center;} #miracle .miracle .desc .box .story .act a{margin:25px 0 0 0;display: flex;padding: 0 12px;min-width: 40px;height: 30px;align-items: center;justify-content: center;border-radius: 8px;background: #F1F1F5;font-size: 14px;color: #333333;border: 2px solid #0EAACE;} #miracle .miracle .desc .box .more{margin-top:25px;display: flex;align-items: center;justify-content: center;} #miracle .miracle .desc .box .more a{display: flex;padding: 0 12px;min-width: 40px;height: 30px;align-items: center;justify-content: center;border-radius: 8px;background: #F1F1F5;font-size: 14px;color: #999999;} #miracle .miracle .guide{margin: 0 0 15px 0;line-height: 30px;font-size:16px;font-weight:bold;text-align: center;} /**/ #alarm{padding: 25px 25px 80px;} #alarm .alarm{} #alarm .alarm .heading{padding: 0 0 10px 0;margin: 0 0 50px 0;line-height: 45px;font-size: 30px;font-weight: bold;text-align: center;border-bottom: 1px solid var(--main-color);} #alarm .alarm .imoji{line-height: 45px;font-size: 28px;font-weight: bold;margin: 0 0 5px 0;text-align: center;} #alarm .alarm .title{margin: 0 0 12px 0;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #767676;line-height: 40px;font-size: 28px;font-weight: bold} #alarm .alarm .title .tit{color:#333} #alarm .alarm .title .txt{color:#767676;font-size: 16px;font-weight: 400;} #alarm .alarm .cont{} #alarm .alarm .cont .move{padding:90px 0;} #alarm .alarm .cont .move .link{display:flex;flex-direction:column;align-items:center;} #alarm .alarm .cont .move .link a{box-shadow: 0 3px 6px rgba(0,0,0,.16);display: flex;flex-direction: column;align-items: center;width: 60px;height: 60px;border-radius: 8px;background: #ffffff;justify-content: center;font-size: 12px;font-weight: bold;color: #333333;} #alarm .alarm .cont .move .link a i{font-size: 20px;} #alarm .alarm .cont .move .show{margin: 10px 0 0 0;text-align: center;line-height: 20px;font-size: 16px;color: #767676;} #alarm .alarm .ctrl{display:flex;align-items:center;margin: 0 0 15px 0;} #alarm .alarm .ctrl .chkall{display:flex;align-items:center;cursor: pointer;} #alarm .alarm .ctrl .chkall input{display:none} #alarm .alarm .ctrl .chkall input ~ i{margin: 0 6px 0 0;width: 18px;height: 18px;background: url("../img/icon_checked.png") no-repeat 50% 50% / contain;} #alarm .alarm .ctrl .chkall input ~ p{font-size:20px;} #alarm .alarm .ctrl .chkall input:checked ~ i{background: url("../img/icon_checked_on.png") no-repeat 50% 50% / contain;} #alarm .alarm .ctrl .tool{margin: 0 0 0 auto;display:flex;align-items:center} #alarm .alarm .ctrl .tool a{font-size:18px;} #alarm .alarm .ctrl .tool a + a{margin-left:20px;} #alarm .alarm .table{} #alarm .alarm .table table thead{border-bottom:1px solid #ddd} #alarm .alarm .table table th:nth-child(1), #alarm .alarm .table table td:nth-child(1){width:25%;} #alarm .alarm .table table th:nth-child(2), #alarm .alarm .table table td:nth-child(2){width:50%;padding: 0 10px;} #alarm .alarm .table table th:nth-child(3), #alarm .alarm .table table td:nth-child(3){width:25%} #alarm .alarm .table table th, #alarm .alarm .table table td{padding:5px 0;font-size:16px;color:#333333;background:#ffffff;} #alarm .alarm .table table td .subj{display:flex;align-items:center;} #alarm .alarm .table table td .name{line-height: 18px;} #alarm .alarm .table table td .text{display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #alarm .alarm .table table td .checkbox{display:flex;align-items:center;cursor: pointer;} #alarm .alarm .table table td .checkbox input{display:none} #alarm .alarm .table table td .checkbox input ~ i{margin: 0 6px 0 0;width: 18px;height: 18px;background: url("../img/icon_checked.png") no-repeat 50% 50% / contain;} #alarm .alarm .table table td .checkbox input ~ p{font-size:20px;} #alarm .alarm .table table td .checkbox input:checked ~ i{background: url("../img/icon_checked_on.png") no-repeat 50% 50% / contain;} #alarm .alarm .list{} #alarm .alarm .list .table{} #alarm .alarm .list .table table{display: block;} #alarm .alarm .list .table table tr{display:flex;align-items:center;width: 100%;height: 40px;} #alarm .alarm .list .table table thead{border-bottom:1px solid #ddd;display: flex;align-items: center;padding: 0 20px 0 0;} #alarm .alarm .list .table table thead th:nth-child(2){} #alarm .alarm .list .table table tbody{display: block;width: 100%;height: calc(100vh - 393px);overflow-y: scroll;margin: 20px 0;padding: 0 20px 0 0;} #alarm .alarm .list .table table tbody::-webkit-scrollbar-track{border: 0.5px solid #707070;background-color: #fff;} #alarm .alarm .list .table table tbody::-webkit-scrollbar{width: 10px;background-color: #fff;} #alarm .alarm .list .table table tbody::-webkit-scrollbar-thumb{background-color: #ffffff;border:0.5px solid #707070} #alarm .alarm .desc .more{margin:10px 0 0 0;display:flex;align-items:center;justify-content:flex-end;} #alarm .alarm .desc .more a{font-size: 16px;color: #333333;} #alarm .alarm .desc .empty .title .tit{line-height: 40px;font-size: 28px;font-weight: bold;color: #333333;} #alarm .alarm .desc .empty .title .txt{line-height:24px;font-size:16px;color:#767676} #alarm .alarm .desc{} #alarm .alarm .desc + .desc{margin: 20px 0 0 0;} #alarm .alarm .detail{} #alarm .alarm .detail .box{border-radius: 8px;overflow: hidden;box-shadow: 0 1.5px 3px rgba(0,0,0,0.16);} #alarm .alarm .detail .sender{position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 25px 20px 10px;} #alarm .alarm .detail .sender .img{margin: 0 auto;width: 100px;height: 100px;border-radius: 100px;overflow: hidden;} #alarm .alarm .detail .sender .img img{display: block;width: 100%;height: 100%;object-fit: cover;} #alarm .alarm .detail .sender .tit{margin: 10px 0 0 0;line-height: 24px;font-size: 16px;} #alarm .alarm .detail .sender .date{position:absolute;top:10px;right:10px;} #alarm .alarm .detail .text{border-radius: 15px;border-top: 1px solid #DBDBDB;border-bottom: 1px solid #DBDBDB;padding: 10px 15px;line-height: 20px;font-size: 16px;min-height: 30vh;} #alarm .alarm .detail .button{display:flex;align-items:center;justify-content:flex-end;padding: 10px;} #alarm .alarm .detail .button a{display: flex;height: 30px;align-items: center;justify-content: center;font-size: 18px;} #alarm .alarm .detail .button a + a{margin-left:10px;} /**/ #wrap .modal_container{position:fixed;top:0;left:50%;width:1080px;max-width:100%;height:100%;display:flex;flex-direction:column;align-items: center;justify-content: center;background:rgba(0,0,0,0.5);z-index:103;opacity:0;visibility:hidden;transition:all 0.3s;transform: translateX(-50%);padding: 16px;} #wrap .modal_container.show{opacity:1;visibility:visible;} #wrap .modal_container .modal_wrapper{width:960px;max-width:100%;max-height:calc(100% - 56px);position:relative;display:flex;flex-direction:column;overflow-y:auto;padding: 28px 16px 18px;border-radius: 16px;background: #ffffff;} /**/ #wrap .tab-btns{margin:0 0 25px 0;} #wrap .tab-btns ul{display:flex;} #wrap .tab-btns li{position:relative;flex:1;border:1px solid #DBDBDB} #wrap .tab-btns li + li{margin-left:-1px;} #wrap .tab-btns li a{display:flex;align-items:center;justify-content:center;height:44px;font-size: 14px;color: #333333;} #wrap .tab-btns li.active{z-index:2;border:1px solid var(--main-color);} #wrap .tab-btns li.active a{color:var(--main-color);} #wrap .tab-box{/*display:none*/} #wrap .tab-box.active{display:block;} /**/ #wrap .table{} #wrap .table table{height: 100%;width: 100%;border-collapse: collapse;} #wrap .table table th, #wrap .table table td{padding: 8px;font-size: 12px;font-weight: 400;color: #767676;} #wrap .table table th{background:#ffffff;} #wrap .table table td{background:#F1F1F5;} #wrap .table table td a{color:#333333;} #wrap .table .more{margin:10px 0 0 0;display:flex;align-items:center;justify-content:center;} #wrap .table .more a{font-size:12px;color:#333333} #wrap .form{} #wrap .comment_write{ padding-bottom: 8px;border-bottom:1px solid #e0e0e0; } #wrap .form .inp{display:flex;position: relative;} #wrap .form .inp #board_comment {width: 100%;height: 40px;line-height:40px;padding: 12px 42px 12px 12px;font-size: 14px;color: #333333;/*background: #F1F1F5;*/} #wrap .form .inp .wrBtn { background: var(--main-color);color: #fff;width: 15%;border-radius: 15px;height: 40px;line-height:40px;} #wrap .form input[type="text"], #wrap .form input[type="password"]{width:100%;padding: 12px 42px 12px 12px;font-size:14px;color:#333333;/*background: #F1F1F5;*/ flex: 1; margin-right: 10px;} #wrap .form input[type="text"]::placeholder, #wrap .form input[type="password"]::placeholder{color:#999999} #wrap .form select{width: 100%;height: 52px;padding: 12px 42px 12px 12px;font-size: 14px;color: #333333;background: #F1F1F5 url("../img/icon_select_dropdown.png") no-repeat right 16px center / 20px auto;border: none;} #wrap .btn_reset{position:absolute;top:50%;right:12px;;transform:translateY(-50%);width:20px;height:20px;display:none;} #wrap .btn_reset img{display:block;width:auto;max-width:100%;height:auto;} #wrap .btn_reset.on{display:block;} #wrap .error_msg{border-top: 1px solid #FF3120;line-height: 20px;font-size: 14px;color: #FF3120;} #wrap .guide_msg{line-height: 20px;font-size: 14px;color: #191919;} #wrap .check_msg{display: flex;width: 100%;height: 52px;background: #ffffff;border: 1px solid var(--main-color);align-items: center;justify-content: center;font-size: 16px;color: var(--main-color);flex-shrink: 0} #wrap .border_msg{display: flex;margin: 10px 0;padding: 10px 0;width: 100%;background: #ffffff;border-top: 1px solid #DEDEDE;font-size: 12px;color: #191919;flex-shrink: 0} #wrap .sort{position: relative;} #wrap .sort .sort_btn{padding: 0 12px;width: 100%;line-height: 34px;font-size: 16px;color: #767676;min-width:130px;white-space: nowrap;text-align: center;} #wrap .sort .sort_btn .icon{position: absolute;top: 50%;right: 12px;width:14px;height:14px;background: url("../img/icon_select_dropdown.png") no-repeat 50% 50% / 20px auto;transform: translateY(-50%);} #wrap .sort .sort_btn.active{} #wrap .sort .sort_btn.active .icon{transform: translateY(-50%) rotate(180deg);} #wrap .sort .sort_menu{position: absolute;z-index: 10;top: 100%;right: 0;min-width: 100%;border-radius: 0 0 8px 8px;background: #fff;border-top: 0;display: none;} #wrap .sort .sort_menu ul{} #wrap .sort .sort_menu li{} #wrap .sort .sort_menu li + li{} #wrap .sort .sort_menu.active{display:block;} #wrap .sort .sort_menu a{display:flex;align-items:center;height: 30px;padding: 0 12px;font-size: 15px;text-align: center;justify-content: center;color: #979797;} #wrap .sort .sort_menu a:hover, #wrap .sort .sort_menu a.active{background: #e2faff;} .modal_wrap {z-index: 999;display: none;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;width: 100%; height: 100%; justify-content: center;align-items: center} .modal_wrap.on{display: flex;} .modal_wrap .modal_content {width: 100%; margin: 0 10px; height: 100px; max-width: 300px;background: #fff;border-radius: 10px;display: flex;align-items: center;justify-content: center;} .modal_wrap .modal_content a {text-decoration: underline;display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;} /* added by pinkfighter */ .topbar{font-size:10px;text-align:right;} .bottombar{margin-top:10px; border-top: solid 1px lightgray;} .fs12{ margin-top:10px;font-size:14px } .handler{ margin-top:20px;} @media (max-width:900px) { .mo-view{display:block} .pc-view{display: none !important;} } @media (min-width:900px) { .mo-view{display: none !important;} .pc-view{display: block !important;} } @media (min-width:900px) { #wrap #header .heading .title{font-size:20px;} #wrap #index{} #wrap #index .index{padding:80px 30px 30px;} #wrap #index .index .intro .title{line-height:48px;font-size:40px;font-weight:400;} #wrap #index .index .intro .form{margin:50px 0 0 0;} #wrap #index .index .intro .form .input{margin:0 auto;width:560px;max-width:100%;padding:6px;align-items: center;} #wrap #index .index .intro .form input{height:30px;font-size:16px;} #wrap #index .index .intro .form button{width:80px;height:30px} #wrap #index .index .intro .form button img{height:25px;} #wrap #index .index .quick{margin:50px 0;} #wrap #index .index .quick .list li{width:9.09%;margin:0 0 50px 0;} #wrap #index .index .quick .list li img{width:60px} #wrap #index .index .quick .list li p{line-height:19px;font-size:16px} #wrap #index .index .banner .list ul{display:flex;flex-wrap:wrap;margin:0 -8px;} #wrap #index .index .banner .list li{width:50%;padding:0 8px;margin:0;} #wrap #index .index .banner .list li + li{margin:0;} #wrap #index .index .banner .list li a{padding:38px 50px;} #wrap #index .index .banner .list li .tit{line-height:24px;font-size:20px} #wrap #index .index .banner .list li .txt{margin-top:12px;line-height:19px;font-size:16px} #wrap #index .index .banner .list li .img{top:0;transform:unset } #wrap #index .index .banner .list li .img img{height: 80%;object-fit:contain} #wrap #mocktest .detail{display:flex; flex-direction:row;gap: 30px;padding: 20px 50px 50px;max-height:fit-content} #wrap #mocktest .detail .lt-item, #wrap #mocktest .detail .rt-item{} #wrap #mocktest .detail .lt-item .scroll::-webkit-scrollbar-track, #wrap #mocktest .detail .rt-item .scroll::-webkit-scrollbar-track{background-color: #fafafa} #wrap #mocktest .detail .lt-item .scroll::-webkit-scrollbar, #wrap #mocktest .detail .rt-item .scroll::-webkit-scrollbar{width: 0;background-color: #f1f1f1;} #wrap #mocktest .detail .lt-item .scroll::-webkit-scrollbar-thumb, #wrap #mocktest .detail .rt-item .scroll::-webkit-scrollbar-thumb{background-color: #fafafa} #wrap #mocktest .detail .lt-item .scroll, #wrap #mocktest .detail .rt-item .scroll{height: auto;overflow-y: auto;} #wrap #mocktest .detail .lt-item{order:1;flex:1;width:calc(100% - 371px);background: transparent;box-shadow: unset;display:flex;flex-direction:column;} #wrap #mocktest .detail .rt-item{order:2;width: 352px;height:600px;border-radius:30px;padding: 16px;display:flex;flex-direction:column;border: 1px solid #e2e2e2;} #wrap #mocktest .detail .rt-item .progress{display:block;flex: unset;padding: 0;} #wrap #mocktest .detail .rt-item .upper{border:0;} #wrap #mocktest .detail .rt-item .popup{flex:1;display:flex;flex-direction:column;} #wrap #mocktest .detail .rt-item .popup .inner{flex:1;display:flex;flex-direction:column;} #wrap #mocktest .detail .rt-item .popup .head{display:none;} #wrap #mocktest .detail .rt-item .caution{display:block;margin: 50px auto 0;padding: 0 16px 25px;font-weight: 500;color:#333;line-height: 14px;font-size: 12px;width: 220px;max-width: 100%;} #wrap #mocktest .detail .rt-item .caution span{font-size:20px;margin: 0;display: block;} #wrap #mocktest .detail .content{margin: 15px 0 50px;} #wrap #mocktest .detail .content .name{line-height: 30px;font-size: 16px;font-weight: 500;padding-bottom: 10px;margin-bottom: 20px;height: 40px;display: flex;align-items: center;border-bottom: 1px solid #333;width: 100%;} #wrap #mocktest .detail .content .tool{top: 0; right: 0; border: 0; margin: 0; padding: 0; margin-bottom: 10px;} #wrap #mocktest .detail .content .tool a{height:30px;font-size:12px;font-weight:bold;color: #333;background: transparent;} #wrap #mocktest .detail .content .problem{margin-bottom: 30px;} #wrap #mocktest .detail .content .problem strong{font-size:20px;color:var(--main-color);font-weight:bold;} #wrap #mocktest .detail .content .answer{padding: 0;} #wrap #mocktest .detail .content .answer ul{display: flex;flex-direction: column;gap: 10px; } #wrap #mocktest .detail .content .answer li{} #wrap #mocktest .detail .content .answer li + li{} #wrap #mocktest .detail .content .answer li .checkbox input ~ p{font-size: 16px;font-weight: 500;width: 95%;} #wrap #mocktest .detail .button{justify-content:flex-end;margin: auto 0 0 0;} #wrap #mocktest .detail .button .btn{flex:unset;min-width: 100px;height: 80px;font-size: 14px;font-weight:bold; margin-left: 15px;} #wrap #mocktest .detail .button .btn + .btn{} #wrap #mocktest > .progress{display:none !important;} #mocktest .detail .comment{border-bottom: 2px solid #333;display:none;margin: 0;} #mocktest .detail .comment.on{display:block;} #mocktest .detail .comment .expla_desc{} #mocktest .detail .comment .comt_desc{border-top: 2px solid #333;} #mocktest .detail .comment .comt_desc .uppr{border-bottom: 1px solid #333;} #mocktest .detail .comment .uppr{display: flex;align-items: center;justify-content: space-between;height: 50px;padding: 0;} #mocktest .detail .comment .uppr .total{line-height: 30px;font-size: 16px;font-weight: bold;color: #333;} #mocktest .detail .comment .uppr .act{flex-shrink: 0;} #mocktest .detail .comment .uppr .act a{display: flex;align-items: center;justify-content: center;width: 60px;height: 30px;border-radius: 5px;background: var(--main-color);font-size: 12px;color: #fff;font-weight: bold;} #mocktest .detail .comment .uppr a{display: flex;align-items: center;justify-content: center;gap: 6px;} #mocktest .detail .comment .uppr a .ic-like-o{background:url("../img/ic-like-on.png") no-repeat 50% 50% / contain; width: 20px;height: 20px;} #mocktest .detail .comment .uppr a.on .ic-like-o{background:url("../img/ic-like-on.png") no-repeat 50% 50% / contain;} #mocktest .detail .comment .uppr a span{font-size:14px;} #mocktest .detail .comment .answer{padding: 10px 0;} #mocktest .detail .comment .answer .fhead{display:flex;align-items: center;justify-content: space-between;} #mocktest .detail .comment .answer .fhead .tit{line-height: 30px;font-size: 16px;font-weight: bold;color: #333;} #mocktest .detail .comment .answer .fhead .chk{display: flex;align-items: center;justify-content: center;} #mocktest .detail .comment .answer .fhead .chk label{} #mocktest .detail .comment .answer .fhead .chk label{display:flex;gap:10px;cursor: pointer;align-items: center;} #mocktest .detail .comment .answer .fhead .chk label input{display: none;} #mocktest .detail .comment .answer .fhead .chk label input ~ p{line-height: 1;font-size: 12px;font-weight: 400;color: #808080;} #mocktest .detail .comment .answer .fhead .chk label input ~ i{position:relative;width: 16px;height: 16px;border-radius: 16px;border:1px solid #808080;background:#ffffff} #mocktest .detail .comment .answer .fhead .chk label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 8px;height: 8px;border-radius: 8px;background:#333;} #mocktest .detail .comment .answer .ftext{padding:10px 0;} #mocktest .detail .comment .answer .ftext textarea{width:100%;height:140px;padding:0;font-size:16px;color:#808080} #mocktest .detail .comment .answer .fboot{display: flex;align-items: center;justify-content: space-between;} #mocktest .detail .comment .answer .fboot .chk{} #mocktest .detail .comment .answer .fboot .chk{display: flex;align-items: center;justify-content: center;} #mocktest .detail .comment .answer .fboot .chk label{} #mocktest .detail .comment .answer .fboot .chk label{display:flex;gap:10px;cursor: pointer;align-items: center;} #mocktest .detail .comment .answer .fboot .chk label input{display: none;} #mocktest .detail .comment .answer .fboot .chk label input ~ p{line-height: 1;font-size: 12px;font-weight: 400;color: #808080;} #mocktest .detail .comment .answer .fboot .chk label input ~ i{position:relative;width: 16px;height: 16px;border-radius: 16px;border:1px solid #808080;background:#ffffff} #mocktest .detail .comment .answer .fboot .chk label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 8px;height: 8px;border-radius: 8px;background:#333;} /* #mocktest .detail .comment .answer .fboot .con1{display: flex;align-items: center;justify-content: center;} */ /* #mocktest .detail .comment .answer .fboot .con1 a{padding: 0 6px;display: flex;height: 30px;border-radius: 5px;font-size: 16px;align-items: center;justify-content: center;flex: 1;border: 1px solid transparent;font-size: 12px;font-weight: bold;color: #fff;background-color: var(--main-color);} */ #mocktest .detail .comment .explain{padding: 0 0 40px 0;} #mocktest .detail .comment .cont{} #mocktest .detail .comment .cont > ul{display: flex;flex-direction: column;} #mocktest .detail .comment .cont > ul > li{display: flex;flex-direction: column;border-bottom: 1px solid #333;} #mocktest .detail .comment .cont > ul > li .top{display: flex;gap: 10px;align-items: center;margin: 30px 0 10px;padding: 0;} #mocktest .detail .comment .cont > ul > li .top .ico{width: 40px;height: 40px;background: #fff;border-radius: 40px;overflow: hidden;} #mocktest .detail .comment .cont > ul > li .top .ico img{} #mocktest .detail .comment .cont > ul > li .top .con{flex: 1;} #mocktest .detail .comment .cont > ul > li .top .flex{display: flex;gap: 10px;} #mocktest .detail .comment .cont > ul > li .top .flex .name{display: flex;align-items: center;gap: 5px;} #mocktest .detail .comment .cont > ul > li .top .flex .name .cert{width: 15px;height: 15px;background: url("../img/ic-cert.png") no-repeat 50% 50% / contain;} #mocktest .detail .comment .cont > ul > li .top .flex .name p{line-height: 20px;font-size: 12px;font-weight: bold;color: #333;} #mocktest .detail .comment .cont > ul > li .top .flex .badge{display:flex;gap:5px;} #mocktest .detail .comment .cont > ul > li .top .flex .badge span{min-width: 50px;height: 20px;display: flex;align-items: center;justify-content: center;text-align: center;font-size: 12px;font-weight: bold;border-radius: 5px;} #mocktest .detail .comment .cont > ul > li .top .flex .act{flex-shrink: 0;margin: 0 0 0 auto;display: flex;align-items: center;justify-content: end;} #mocktest .detail .comment .cont > ul > li .top .flex .act > a{width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;} #mocktest .detail .comment .cont > ul > li .top .flex .act > a i{width:15px;height:15px;display:block;background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain} #mocktest .detail .comment .cont > ul > li .top .info{line-height: 30px;height: 30px;/* display: flex; *//* align-items: center; *//* flex-wrap: wrap; */display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #mocktest .detail .comment .cont > ul > li .top .info span{font-size:12px;color:#808080} #mocktest .detail .comment .cont > ul > li .top .info span + span:before{content:'|';margin:0 4px;} #mocktest .detail .comment .cont > ul > li > .txt{margin: 0 0 10px;line-height: 30px;font-size: 15px;color: #333;padding: 0;} /*#mocktest .detail .comment .cont > ul > li > .txt .writeCom{word-break: break-all;max-height: 60px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;} #mocktest .detail .comment .cont > ul > li > .txt .writeCom.open{display:block;height:auto;max-height:100%;}*/ #mocktest .detail .comment .cont > ul > li .like{padding-left: 0;padding-right: 0;} #mocktest .detail .comment .cont > ul > li .more{border-top: 0;} #mocktest .detail .comment .cont > ul > li .more a{display: flex;align-items: center;justify-content: center;width: 100%;height: 38px;text-align: center;font-size: 12px;color: #808080;} #mocktest .detail .comment .cont > ul > li .reply{border-top: 1px solid #e2e2e2;margin: 0;padding: 0;flex-direction: column;align-items: unset;padding: 10px 0px;} #mocktest .detail .comment .cont > ul > li .reply > .tit{line-height: 30px;font-size: 12px;font-weight: bold;color: #333;margin: 0 0 8px;} #mocktest .detail .comment .cont > ul > li .reply > .con{} #mocktest .detail .comment .cont > ul > li .reply > .con > ul{display: flex;flex-direction: column;gap: 15px;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li{} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit{display: flex;align-items: center;gap: 0;line-height: 30px;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .name{font-size: 12px;font-weight: bold;color: #333;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .badge{display:flex;gap:5px;margin: 0 0 0 6px;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .badge span{display: flex;min-width: 50px;height: 20px;border-radius: 5px;font-size: 12px;font-weight: bold;align-items: center;justify-content: center;padding: 0;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act{position: relative;margin: 0 0 0 auto;display: flex;align-items: center;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act a{} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act a i{width: 15px;height: 15px;display: block;background: url(../img/ic-pencil.png) no-repeat 50% 50% / contain;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul{position: absolute;z-index: 11;top: 100%;right: 0;width: 70px;padding: 10px;display: flex;gap: 15px;flex-direction: column;border-radius: 5px;background:#ffffff;/* border: 1px solid #f4f4f4; */opacity:0;visibility:hidden;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul.on{opacity:1;visibility:visible} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul{} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li{position: relative;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a{display: flex;gap: 5px;line-height: 20px;align-items: center;justify-content: center;flex-direction: row;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i{width: 10px;height: 10px;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-bookmark{background:url("../img/ic-bookmark.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-share{background:url("../img/ic-share.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-pencil{background:url("../img/ic-pencil.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-delete{background:url("../img/ic-delete.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-report{background:url("../img/ic-report.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a i.ic-block{background:url("../img/ic-block.png") no-repeat 50% 50% / contain !important} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .tit .act > ul > li a p{font-size: 12px;font-weight: 500;color: #808080;} #mocktest .detail .comment .cont > ul > li .reply > .con > ul > li .txt{padding: 0;line-height: 30px;font-size: 12px;color: #333;} #mocktest .detail .comment .form{padding: 10px 20px;} #mocktest .detail .comment .form .tit{display: flex;align-items: center;justify-content: space-between;height: 40px;} #mocktest .detail .comment .form .tit p{line-height: 20px;font-size: 12px;color: #333;} #mocktest .detail .comment .form .tit label{} #mocktest .detail .comment .form .tit label{display:flex;gap:10px;cursor: pointer;align-items: center;} #mocktest .detail .comment .form .tit label input{display: none;} #mocktest .detail .comment .form .tit label input ~ p{line-height: 1;font-size: 12px;font-weight: 400;color: #808080;} #mocktest .detail .comment .form .tit label input ~ i{position:relative;width: 16px;height: 16px;border-radius: 16px;border:1px solid #808080;background:#ffffff} #mocktest .detail .comment .form .tit label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 8px;height: 8px;border-radius: 8px;background:#333;} #mocktest .detail .comment .form .con{display: flex; align-items : center; border: 1px solid #e2e2e2;border-radius: 5px;height: 40px;padding: 5px;} #mocktest .detail .comment .form .con input{width: 100%;height: 20px;background: transparent;padding: 0;font-size: 12px;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #mocktest .detail .comment .form .con input:focus, #mocktest .detail .comment .form .con input:active, #mocktest .detail .comment .form .con input:hover{border:unset !important;box-shadow:unset !important;} #mocktest .detail .comment .form .con button{flex-shrink: 0;min-width: 40px;height: 25px;border-radius: 5px;background: var(--main-color);color: #fff;font-size: 12px;font-weight: bold;font-family: 'Pretendard','Malgun Gothic','dotum','돋움','gulim','굴림','Tahoma';} #mocktest .detail .comment .badge .bdg1{background: #FFB2F74D;color: #FFB2F7;} #mocktest .detail .comment .badge .bdg2{background: #6AFF8B4D;color: #6AFF8B;} #mocktest .detail .comment .badge .bdg3{background: var(--main-color)4D;color: var(--main-color);} #mocktest .detail .comment .badge .bdg4{background: #9D6FFF4D;color: #9D6FFF;} #wrap #community .community{display:flex;flex-direction:row;padding: 20px 20px 70px;} #wrap #community .community .lt-item{margin:0 20px 0 0;padding: 20px;width:350px;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 30px;overflow: hidden;} #wrap #community .community .rt-item{padding:50px 20px;display:block;flex:1;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 30px;} #wrap #community .community .rt-item .head{display:flex;align-items:center;margin: 0 0 45px 0;} #wrap #community .community .rt-item .head .icon{display:flex;align-items:center;margin:0 20px 0 0;width:50px;height:50px;border-radius:50px;overflow:hidden} #wrap #community .community .rt-item .head .icon img{display:block;width:100%;height:100%;object-fit:cover;} #wrap #community .community .rt-item .head .time{display:flex;align-items:center;font-size: 18px;color: #808080;} #wrap #community .community .rt-item .head .time:after{content:'';margin:0 10px;width:4px;height:4px;border-radius:4px;background:#808080;} #wrap #community .community .rt-item .head .name{display:flex;align-items:center;margin:0 20px 0 0;font-size: 18px;color: #808080;} #wrap #community .community .rt-item .head .option{margin-left:auto;display:flex;align-items:center;} #wrap #community .community .rt-item .head .option a{font-size:20px;font-size:20px;} #wrap #community .community .rt-item .head .option a + a{margin-left:10px;} #wrap #community .community .rt-item .cont{margin:0 70px;padding:0 0 70px;border-bottom: 1px solid rgba(33, 33, 33, 0.08);} #wrap #community .community .rt-item .cont .title{line-height:20px;font-size:30px;font-weight:bold;margin:0 0 50px 0;} #wrap #community .community .rt-item .cont .text{min-height:240px;line-height:28px;font-size:24px;} #wrap #community .community .rt-item .cont .tag{display:flex;flex-wrap:wrap;} #wrap #community .community .rt-item .cont .tag p{line-height:20px;font-size:20px;color:var(--main-color);margin:0 10px 4px 0;} #wrap #community .community .rt-item .comment{margin:0 70px;padding:16px;} #wrap #community .community .rt-item .comment .tit{line-height:20px;font-size:20px;font-weight:bold;margin:0 0 10px 0;} #wrap #community .community .rt-item .comment .con{} #wrap #community .community .rt-item .comment .con ul{} #wrap #community .community .rt-item .comment .con li{margin:0 0 18px 0;} #wrap #community .community .rt-item .comment .con li .upper{display:flex;align-items:center;} #wrap #community .community .rt-item .comment .con li .upper .name{display:flex;align-items:center;margin:0 20px 0 0;font-size: 18px;color: #808080;} #wrap #community .community .rt-item .comment .con li .upper .time{display:flex;align-items:center;font-size: 18px;color: #808080;} #wrap #community .community .rt-item .comment .con li .upper .time:after{content:'';margin:0 10px;width:4px;height:4px;border-radius:4px;background:#808080;} #wrap #community .community .rt-item .comment .con li .upper .option{margin-left:auto;display:flex;align-items:center;} #wrap #community .community .rt-item .comment .con li .upper .option a{font-size:20px;font-size:16px;} #wrap #community .community .rt-item .comment .con li .upper .option a + a{margin-left:10px;} #wrap #community .community .rt-item .comment .con li .text{padding:10px 0;line-height:20px;font-size: 18px;} #wrap #community .community .rt-item .comment .inp{margin:10px 0 0 0;display:flex} #wrap #community .community .rt-item .comment .inp input{flex:1;padding:0 10px;font-size:20px;height:30px;} #wrap #community .community .rt-item .comment .inp button{margin-left:10px;min-width:100px;height:30px;border-radius:30px;font-size:18px;font-weight:bold;} #wrap #learn{padding: 0 20px;} #wrap #learn .learn{padding: 80px 0 80px 0;} #wrap #learn .learn .pc-view{display: block;} #wrap #learn .learn .mo-view{display: none;} #wrap #learn .learn .search_wp .input input{font-size: 16px;height: 30px;} #wrap #learn .learn .search_wp .input button{width:80px;height:30px;} #wrap #learn .learn .search_wp .input button img{height:25px;} #wrap #learn .learn .latest_wp{flex-direction:row;min-height: 240px;} #wrap #learn .learn .latest_wp .board{padding: 20px 30px;width: 500px;} #wrap #learn .learn .latest_wp .quick{flex-direction: row;} #wrap #learn .learn .latest_wp .quick .day{height:90px;width: 90px;flex-direction:column;align-items: flex-start;margin: 0 0 0 10px;} #wrap #learn .learn .latest_wp .quick .day p{margin:0;} #wrap #learn .learn .latest_wp .quick .day strong{margin: 5px 0 0 0;} #wrap #learn .learn .latest_wp .banner{margin-top: 0;margin-left:5px;} #wrap #learn .learn .latest_wp .banner a{height: 100%;} #wrap #learn .learn .latest_wp .banner a .tit{font-size: 40px;} #wrap #learn .learn .problem_wp{margin: 0 0 30px 0;} #wrap #learn .learn .problem_wp ul{display:flex;flex-wrap:wrap;flex-direction: row;} #wrap #learn .learn .problem_wp li{width:33.33%;padding:0 5px 14px;} #wrap #learn .learn .problem_wp li .box{padding:30px;} #wrap #learn .learn .problem_wp li .num{top: 30px;right: 20px;} #wrap #learn .learn .merci_wp .tit{} #wrap #learn .learn .merci_wp .con ul{flex-direction: row;flex-wrap: wrap;} #wrap #learn .learn .merci_wp .con li{width:100px;} #wrap #learn .learn_new{padding: 90px 0 0 0;} #wrap #learn .learn_new .banner_wrap{background: #333;margin: 0 0 50px 0;} #wrap #learn .learn_new .banner_wrap a{display:flex;width:100%;height:270px;margin:0 auto;} #wrap #learn .learn_new .banner_wrap a img{display:block;width:100%;height:100%;object-fit:contain} #wrap #learn .learn_new .search_wrap{margin: 0 0 50px;display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .search_wrap .input{margin: 0 auto;padding: 7px 10px;min-width: 561px;height: 44px;border-radius: 44px;border: 1px solid var(--main-color);display: flex;align-items: center;justify-content: center;overflow: hidden;} #wrap #learn .learn_new .search_wrap .input input{width: 100%;height: 44px;flex: 1;align-items: center;justify-content: center;display: flex;padding: 0 40px;line-height: 19px;font-size: 16px;color: #808080;} #wrap #learn .learn_new .search_wrap .input button{width: 80px;height: 30px;background: var(--main-color);border-radius: 30px;display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .search_wrap .input button img{width:auto;height:24px;object-fit:contain} #wrap #learn .learn_new .quick_wrap{position: relative;margin: 0 0 50px;overflow: hidden;} #wrap #learn .learn_new .quick_wrap ul{} #wrap #learn .learn_new .quick_wrap li{} #wrap #learn .learn_new .quick_wrap li a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;min-width: 65px;} #wrap #learn .learn_new .quick_wrap li a img{height:40px;width:40px;object-fit:contain} #wrap #learn .learn_new .quick_wrap li a p{line-height:20px;font-size:16px;font-weight:bold;color:#333;white-space: nowrap;} #wrap #learn .learn_new .quick_wrap .prev{position:absolute;z-index: 11;top:50%;left: 0;transform:translateY(-50%);width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.1);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .quick_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .quick_wrap .next{position:absolute;z-index: 11;top:50%;right: 0;transform:translateY(-50%);width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.1);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .quick_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .quick_wrap .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new .list_wrap{display:flex;margin:0 0 50px 0;flex-direction: row;} #wrap #learn .learn_new .list_wrap .list{} #wrap #learn .learn_new .list_wrap .list + .list{margin-left:30px;} #wrap #learn .learn_new .list_wrap .list01{flex-shrink:0;position: relative;position:relative;background: #EBEBEB;} #wrap #learn .learn_new .list_wrap .list01 .img{width:300px;height:250px;} #wrap #learn .learn_new .list_wrap .list01 .img img{width:100%;height:100%;object-fit:cover;} #wrap #learn .learn_new .list_wrap .list01 .btn{position:absolute;bottom:0;left:0;width:100%;padding:20px;display:flex;gap:10px;} #wrap #learn .learn_new .list_wrap .list01 .btn a{flex: 1;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 5px;line-height: 19px;font-size: 12px;font-weight: 400;color: #333;height: 40px;} #wrap #learn .learn_new .list_wrap .list01 .btn a:hover{background:#fafafa;} #wrap #learn .learn_new .list_wrap .list02{flex:1;} #wrap #learn .learn_new .list_wrap .list02 ul{display:flex;gap:22px;} #wrap #learn .learn_new .list_wrap .list02 li{flex:1;} #wrap #learn .learn_new .list_wrap .list02 .img{background:#ebebeb;margin: 0 0 10px;display: block;} #wrap #learn .learn_new .list_wrap .list02 .tit{line-height: 24px;font-size: 20px;font-weight: bold;color: #333;} #wrap #learn .learn_new .list_wrap .list02 .txt{margin: 16px 0 0;display: flex;align-items: center;justify-content: flex-end;gap: 10px;} #wrap #learn .learn_new .list_wrap .list02 .txt span{display: flex;align-items: center;justify-content: center;gap: 5px;line-height: 20px;font-size: 12px;color: #808080;} #wrap #learn .learn_new .study_wrap{margin: 0 0 50px;} #wrap #learn .learn_new .study_wrap .title{margin:0 0 20px;} #wrap #learn .learn_new .study_wrap .title .tit{line-height:34px;font-size:28px;font-weight:bold;color:#333} #wrap #learn .learn_new .study_wrap .title .txt{margin: 5px 0 0;line-height:19px;font-size:16px;color:#808080;} #wrap #learn .learn_new .study_wrap .list{position:relative;overflow:hidden;} #wrap #learn .learn_new .study_wrap .list ul{} #wrap #learn .learn_new .study_wrap .list li{} #wrap #learn .learn_new .study_wrap .list li .img{margin:0 0 10px;width:100%;height:150px;background:#ababab;} #wrap #learn .learn_new .study_wrap .list li .img img{display:block;width:100%;height:100%;object-fit:cover} #wrap #learn .learn_new .study_wrap .list li .tag{display:flex;overflow-x:auto;gap:10px;margin: 0 0 10px;} #wrap #learn .learn_new .study_wrap .list li .tag a{display:flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:5px;background:#f1f1f1;line-height:19px;font-size:16px;font-weight:500;color:#808080} #wrap #learn .learn_new .study_wrap .list li .tit{line-height: 24px;font-size: 20px;font-weight: bold;color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin: 0 0 10px;} #wrap #learn .learn_new .study_wrap .list li .con{display: flex;align-items: center;justify-content: flex-start;gap: 5px;margin: 0 0 10px;} #wrap #learn .learn_new .study_wrap .list li .con img{width: 20px;height: 20px;border-radius: 50%;overflow: hidden;object-fit: cover;} #wrap #learn .learn_new .study_wrap .list li .con p{line-height: 19px;font-size: 16px;color: #808080;} #wrap #learn .learn_new .study_wrap .list li .txt{display: flex;align-items: center;justify-content: flex-end;gap: 10px;} #wrap #learn .learn_new .study_wrap .list li .txt span{display: flex;align-items: center;justify-content: center;gap: 5px;line-height: 20px;font-size: 12px;color: #808080;} #wrap #learn .learn_new .study_wrap .prev{position:absolute;z-index: 11;top: 52px;left: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .study_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .study_wrap .next{position:absolute;z-index: 11;top: 52px;right: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .study_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .study_wrap .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new .board_wrap{margin:0 0 50px;display: flex;} #wrap #learn .learn_new .board_wrap .board{flex-shrink:0;margin:0 50px 0 0;padding: 20px;border-radius: 15px;background: #f5f5f7;max-width: 500px;} #wrap #learn .learn_new .board_wrap .board .title{display: flex;align-items: center;justify-content: space-between;margin: 0 0 10px;} #wrap #learn .learn_new .board_wrap .board .title .tit{line-height: 1;font-size: 20px;font-weight: bold;color: #333;} #wrap #learn .learn_new .board_wrap .board .title .day{display: flex;align-items: center;justify-content: center;gap: 6px;background: #ffffff;border: 1px solid #f1f1f1;box-shadow: 0 2px 2px rgba(0,0,0,0.25);padding: 10px 14px;height: 40px;border-radius: 10px;line-height: 19px;font-size: 16px;color: #333;} #wrap #learn .learn_new .board_wrap .board .list{position: relative;padding: 20px;min-height: 190px;border-radius: 15px;background: #fff;border: 1px solid #f1f1f1;box-shadow: 0 2px 2px rgba(0,0,0,0.25);} #wrap #learn .learn_new .board_wrap .board .list .tit{line-height: 20px;font-size: 12px;font-weight: bold;color: #333;margin: 0 0 5px;} #wrap #learn .learn_new .board_wrap .board .list .con{} #wrap #learn .learn_new .board_wrap .board .list .con ul{display: flex;flex-direction: column;gap: 5px;} #wrap #learn .learn_new .board_wrap .board .list .con li{} #wrap #learn .learn_new .board_wrap .board .list .con li a{display: block;line-height: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 12px;color: #333;} #wrap #learn .learn_new .board_wrap .board .list .con li a:before{content:'';margin: 8px 6px 0 0;width: 2px;height: 2px;border-radius:3px;background:#333;display: inline-flex;align-items: center;vertical-align: top;} #wrap #learn .learn_new .board_wrap .board .list .act{position: absolute;top: 20px;right: 20px;} #wrap #learn .learn_new .board_wrap .board .list .act a{display: flex;align-items: center;justify-content: center;padding: 4px 10px;line-height: 1;height: 20px;border-radius: 20px;background: var(--main-color);font-size: 12px;font-weight: bold;color: #fff;} #wrap #learn .learn_new .board_wrap .with{flex:1;} #wrap #learn .learn_new .board_wrap .with .tit{line-height: 33px;font-size: 28px;font-weight: bold;color: #333;margin: 0 0 10px;} #wrap #learn .learn_new .board_wrap .with .tit span{color: var(--main-color);} #wrap #learn .learn_new .board_wrap .with .txt{margin: 0 0 10px;line-height: 19px;font-size: 16px;font-weight: 600;color: #808080;} #wrap #learn .learn_new .board_wrap .with .con{position: relative;overflow: hidden;padding: 5px;margin: -5px;} #wrap #learn .learn_new .board_wrap .with .con ul{} #wrap #learn .learn_new .board_wrap .with .con li{} #wrap #learn .learn_new .board_wrap .with .con .info{padding:10px;border-radius:5px;box-shadow:0 0 6px rgba(0,0,0,0.1)} #wrap #learn .learn_new .board_wrap .with .con .info .user{display:flex;gap:10px;align-items:center;margin-bottom:10px;} #wrap #learn .learn_new .board_wrap .with .con .info .user img{width:30px;height:30px;border-radius:30px;object-fit:contain;overflow:hidden;} #wrap #learn .learn_new .board_wrap .with .con .info .text{line-height:19px;font-size:16px;font-weight:500;color:#333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin-bottom: 10px;} #wrap #learn .learn_new .board_wrap .with .btn{margin: 10px 0 0 0;display: flex;gap: 5px;} #wrap #learn .learn_new .board_wrap .with .btn a{display: flex;align-items: center;justify-content: center;border-radius: 5px;border: 1px solid #ebebeb;height: 40px;padding: 4px 12px;line-height: 14px;font-size: 12px;font-weight: 600;color: #808080;} #wrap #learn .learn_new .board_wrap .with .btn a:hover{background:#fafafa} #wrap #learn .learn_new .board_wrap .prev{position:absolute;z-index: 11;top: 52px;left: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .board_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .board_wrap .next{position:absolute;z-index: 11;top: 52px;right: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .board_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .board_wrap .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new .growth_wrap{margin:0 0 50px;} #wrap #learn .learn_new .growth_wrap .title{line-height:33px;font-size:28px;font-weight:bold;color:#333;margin:0 0 50px;} #wrap #learn .learn_new .growth_wrap .list{position:relative;overflow: hidden;} #wrap #learn .learn_new .growth_wrap .list ul{} #wrap #learn .learn_new .growth_wrap .list li{display:flex;flex-direction:column;gap:10px;} #wrap #learn .learn_new .growth_wrap .list li a{display:flex;width:100%;height:60px;} #wrap #learn .learn_new .growth_wrap .list li a img{display:block;width:100%;height:100%;object-fit: cover;} #wrap #learn .learn_new .growth_wrap .prev{position:absolute;z-index: 11;top: 52px;left: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .growth_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .growth_wrap .next{position:absolute;z-index: 11;top: 52px;right: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .growth_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .growth_wrap .swiper-button-disabled{visibility:hidden;} #wrap #professor{} #wrap #professor .professor{margin: 40px auto 0 0;padding: 0;} #wrap #professor .professor .pc-view{display:block;} #wrap #professor .professor .mo-view{display:none;} #wrap #professor .professor .section_wp{display: flex;justify-content: space-between;margin: 0 0 20px 0;} #wrap #professor .professor .latest_wp{width: 780px;} #wrap #professor .professor .latest_wp .title{background: #FFFFFF;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;height: 70px;display: flex;align-items: center;justify-content: flex-start;padding: 10px 30px;font-size: 32px;font-weight: bold;margin: 0 0 10px 0;} #wrap #professor .professor .latest_wp .content{background: #F5F5F7;/* mercy write */border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;padding: 25px 30px 30px;} #wrap #professor .professor .latest_wp .content .guide{} #wrap #professor .professor .latest_wp .content .guide .head{display: flex;height: 65px;align-items: center;justify-content: space-between;margin: 0 0 15px 0;} #wrap #professor .professor .latest_wp .content .guide .head .tit{line-height: 38px;font-size: 32px;font-weight: bold;} #wrap #professor .professor .latest_wp .content .guide .head .day{background: #FFFFFF;/* mercy write */border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 10px;width: 240px;height: 65px;padding: 10px 20px;display: flex;align-items: center;justify-content: center;} #wrap #professor .professor .latest_wp .content .guide .head .day p{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;margin: 0 auto 0 0;font-size: 20px;} #wrap #professor .professor .latest_wp .content .guide .head .day p em{font-size: 16px;} #wrap #professor .professor .latest_wp .content .guide .head .day strong{font-size: 28px;font-weight: bold;letter-spacing: -2px;} #wrap #professor .professor .latest_wp .content .guide .notice{position: relative;background: #FFFFFF;/* mercy write */border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;padding: 20px;} #wrap #professor .professor .latest_wp .content .guide .notice .tit{line-height: 30px;font-size: 24px;font-weight: bold;} #wrap #professor .professor .latest_wp .content .guide .notice .act{position: absolute;top: 20px;right: 20px;display: flex;} #wrap #professor .professor .latest_wp .content .guide .notice .act a{display: flex;align-items: center;justify-content: center;width: 100px;height: 30px;background: var(--main-color);border-radius: 30px;font-size: 20px;font-weight: bold;color: #fff;} #wrap #professor .professor .latest_wp .content .guide .notice .con{margin: 32px 0 0 0;} #wrap #professor .professor .latest_wp .content .guide .notice .con ul{} #wrap #professor .professor .latest_wp .content .guide .notice .con li{} #wrap #professor .professor .latest_wp .content .guide .notice .con li + li{margin: 20px 0 0 0;} #wrap #professor .professor .latest_wp .content .guide .notice .con li a{line-height: 30px;display: flex;align-items: center;font-size: 24px;} #wrap #professor .professor .latest_wp .content .guide .notice .con li a:before{content:'';margin: 0 12px 0 8px;width: 4px;height: 4px;border-radius: 4px;background: #333;flex-shrink: 0;} #wrap #professor .professor .latest_wp .content .guide .notice .con li a p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #wrap #professor .professor .desc_wp{width: 420px;margin-left: 20px;} #wrap #professor .professor .desc_wp .count{background: #FFFFFF;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;height: 70px;display: flex;align-items: center;justify-content: center;padding: 10px 30px;font-size: 24px;margin: 0 0 10px 0;text-align: center;} #wrap #professor .professor .desc_wp .count strong{font-size: 32px;font-weight: 400;margin: 0 0 0 10px;} #wrap #professor .professor .desc_wp .count strong em{color: var(--main-color);font-weight: bold;} #wrap #professor .professor .desc_wp .quick{margin: 0 0 20px 0;} #wrap #professor .professor .desc_wp .quick ul{display: flex;} #wrap #professor .professor .desc_wp .quick li{flex: 1;} #wrap #professor .professor .desc_wp .quick li + li{margin: 0 0 0 10px;} #wrap #professor .professor .desc_wp .quick li a{border: 10px solid #eee;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 15px;padding: 8px;height: 200px;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);} #wrap #professor .professor .desc_wp .quick li:nth-child(1) a{border-color:#FEDCD8} #wrap #professor .professor .desc_wp .quick li:nth-child(2) a{border-color:#E7F2D1} #wrap #professor .professor .desc_wp .quick li a img{height: 100px;max-height: 50vw;} #wrap #professor .professor .desc_wp .quick li a p{margin: 27px 0 0 0;line-height: 20px;font-size: 28px;} #wrap #professor .professor .desc_wp .quick li a p strong{} #wrap #professor .professor .desc_wp .func{margin: 0 0 20px 0;} #wrap #professor .professor .desc_wp .func .tit{line-height: 20px;font-size: 24px;margin: 0 0 20px 0;} #wrap #professor .professor .desc_wp .func .con{display: flex;align-items: center;} #wrap #professor .professor .desc_wp .func .con a{display: flex;align-items: center;justify-content: center;background: #FFFFFF;/* mercy write */border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;height: 60px;font-size: 20px;font-weight: bold;} #wrap #professor .professor .desc_wp .func .con a + a{margin-left:10px;} #wrap #professor .professor .desc_wp .func .con a:nth-child(1){flex: 7;} #wrap #professor .professor .desc_wp .func .con a:nth-child(2){flex: 4;} #wrap #professor .professor .desc_wp .coun{} #wrap #professor .professor .desc_wp .coun .tit{line-height: 24px;font-size: 20px;margin: 0 0 20px 0;} #wrap #professor .professor .desc_wp .coun .tit strong{} #wrap #professor .professor .desc_wp .coun .con{} #wrap #professor .professor .desc_wp .coun .con a{display: flex;align-items: center;justify-content: center;background: #FFFFFF;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;height: 60px;font-size: 20px;font-weight: bold;} #wrap #professor .professor .desc_wp .coun .con a span{color:#48AFC6;margin: 0 0 0 6px;} #wrap #professor .professor .check_wp{margin: 0 0 30px 0;width: 100%;} #wrap #professor .professor .check_wp .tit{line-height: 28px;font-size: 24px;font-weight:bold;color:#333;padding:0 30px;margin: 0 0 20px 0;} #wrap #professor .professor .check_wp .con{} #wrap #professor .professor .check_wp .con ul{display:flex;gap: 10px;flex-wrap: wrap;} #wrap #professor .professor .check_wp .con li{width: calc(9.09% - 9.09px);} #wrap #professor .professor .check_wp .con li a{border-radius: 15px;background: #ffffff;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 10px;} #wrap #professor .professor .check_wp .con li img{margin:0 auto 6px;width:auto;max-width:90%;height:auto} #wrap #professor .professor .check_wp .con li p{line-height:20px;font-size:16px;font-weight:bold;color:#333333} #wrap #professor .professor .guide_wp{margin: 0 0 10px 0;} #wrap #professor .professor .guide_wp .head{margin: 0 0 10px 0;line-height: 20px;font-size: 16px;font-weight: bold;} #wrap #professor .professor .guide_wp .notice{position: relative;} #wrap #professor .professor .guide_wp .notice .act{position:absolute;top: 15px;right: 15px;} #wrap #professor .professor .guide_wp .notice .act a{display: flex;align-items: center;justify-content: center;width: 58px;height: 20px;border-radius: 20px;background: var(--main-color);font-size: 12px;color: #fff;font-weight: bold;} #wrap #professor .professor .guide_wp .notice .con{background: #FFFFFF;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;padding: 15px 80px 15px 15px;} #wrap #professor .professor .guide_wp .notice .con ul{} #wrap #professor .professor .guide_wp .notice .con li{} #wrap #professor .professor .guide_wp .notice .con li a{display: flex;line-height: 20px;font-size: 12px;} #wrap #professor .professor .guide_wp .notice .con li a p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #wrap #professor .professor .school_wp{background: #FFFFFF;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;padding: 15px;margin: 0 0 10px 0;} #wrap #professor .professor .school_wp p{text-align: center;line-height: 20px;font-size: 20px;font-weight: bold;} #wrap #professor .professor .info_wp{display: flex;margin: 0 0 10px 0;} #wrap #professor .professor .info_wp .count{width: calc(65% - 10px);background: #FFFFFF;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;height: 50px;text-align: center;display: flex;align-items: center;justify-content: center;} #wrap #professor .professor .info_wp .count strong{font-weight: 400;margin: 0 0 0 6px;font-size: 20px;} #wrap #professor .professor .info_wp .count strong em{color: var(--main-color);font-weight: bold;} #wrap #professor .professor .info_wp .day{width: 35%;flex-shrink: 0;margin-left: 10px;background: #FFFFFF;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;text-align: center;height: 50px;display: flex;flex-direction: column;align-items: center;justify-content: center;} #wrap #professor .professor .info_wp .day p{line-height: 14px;font-size: 12px;} #wrap #professor .professor .info_wp .day strong{} #wrap #professor .professor .func_wp{} #wrap #professor .professor .func_wp .quick{margin: 0 0 10px 0;} #wrap #professor .professor .func_wp .quick ul{display: flex;} #wrap #professor .professor .func_wp .quick li{flex: 1;} #wrap #professor .professor .func_wp .quick li + li{margin: 0 0 0 10px;} #wrap #professor .professor .func_wp .quick li a{border: 5px solid #eee;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 15px;padding: 8px;} #wrap #professor .professor .func_wp .quick li:nth-child(1) a{border-color:#FEDCD8} #wrap #professor .professor .func_wp .quick li:nth-child(2) a{border-color:#E7F2D1} #wrap #professor .professor .func_wp .quick li a img{height: 100px;max-height: 50vw;} #wrap #professor .professor .func_wp .quick li a p{margin: 7px 0 0 0;line-height: 20px;font-size: 16px;} #wrap #professor .professor .func_wp .quick li a p strong{} #wrap #professor .professor .func_wp .func{margin: 0 0 10px 0;} #wrap #professor .professor .func_wp .func .tit{line-height: 20px;font-size: 16px;margin: 0 0 10px 0;} #wrap #professor .professor .func_wp .func .con{display: flex;} #wrap #professor .professor .func_wp .func .con a{background: #FFFFFF;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;flex: 1;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 16px;font-weight: bold;} #wrap #professor .professor .func_wp .func .con a + a{margin: 0 0 0 10px;} #wrap #professor .professor .func_wp .coun{} #wrap #professor .professor .func_wp .coun .tit{line-height: 20px;font-size: 16px;margin: 0 0 10px 0;} #wrap #professor .professor .func_wp .coun .tit strong{} #wrap #professor .professor .func_wp .coun .con{} #wrap #professor .professor .func_wp .coun .con a{background: #FFFFFF;border: 1px solid #f1f1f1;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);border-radius: 15px;flex: 1;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 16px;font-weight: bold;} #wrap #professor .professor .func_wp .coun .con a span{color: var(--main-color);margin: 0 0 0 6px;} } @media (max-width:900px) { #wrap #learn .learn .mo-view { display: block; } #wrap #learn .learn .pc-view { display: none; } #community { position: relative; margin: 0px auto; } #community .listskin { padding: 50px 30px 0; margin: 0 auto; } #community .listskin .header { display: flex; align-items: unset; flex-direction: column; margin: 0 0 20px 0; } #community .listskin .header .tabs { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } #community .listskin .header .tabs::-webkit-scrollbar { display: none; } #community .listskin .header .tabs ul { display: flex; gap: 30px; align-items: center; justify-content: flex-start; flex-wrap: nowrap; min-width: max-content; } #community .listskin .header .tabs li { position: relative; cursor: pointer; display: block; line-height: 40px; font-size: 16px; font-weight: bold; color: #808080; white-space: nowrap; flex-shrink: 0; } #community .listskin .header .tabs li.active { color: var(--main-color); } #community .listskin .header .tabs li.active:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--main-color); } #community .listskin .header .tool { display: none; } #community .listskin .header .tool ul { display: flex; align-items: center; justify-content: center; gap: 10px; } #community .listskin .header .tool li { } #community .listskin .header .tool li .btn { min-width: 60px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 14px; border: 1px solid #cccccc; background: #fafafa; color: #303030; font-family: 'Pretendard', 'Malgun Gothic', 'dotum', '돋움', 'gulim', '굴림', 'Tahoma'; } #community .listskin .slider { position: relative; margin: 0 -30px 30px; padding: 0 30px; overflow: hidden; } #community .listskin .slider .tit { padding: 0 10px; line-height: 20px; font-size: 16px; font-weight: bold; color: #333333; margin: 0 0 10px; } #community .listskin .slider .con { position: relative; } #community .listskin .slider .con:before { content: ''; position: absolute; top: 0; left: -30px; width: 30px; height: 100%; background: #ffffff; z-index: 2; } #community .listskin .slider .con:after { content: ''; position: absolute; top: 0; right: -30px; width: 30px; height: 100%; background: #ffffff; z-index: 2; } #community .listskin .slider .con ul { } #community .listskin .slider .con li.swiper-slide { padding: 20px 15px; border-radius: 15px; border: 1px solid #e2e2e2; width: min-content; margin-right: 10px; } #community .listskin .slider .con li .flex { display: flex; align-items: flex-end; justify-content: space-between; } #community .listskin .slider .con li .flex .head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } #community .listskin .slider .con li .flex .cate { } #community .listskin .slider .con li .flex .cate span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 20px; padding: 0 6px; border-radius: 15px; background: #fafafa; font-size: 12px; font-weight: bold; } #community .listskin .slider .con li .flex .cate .cate01 { background: #FFF7B2; color: #FFC700; } #community .listskin .slider .con li .flex .cate .cate02 { background: #FFE4FB; color: #D36670; } #community .listskin .slider .con li .flex .cate .cate03 { background: #E5F1FE; color: #398ED3; } #community .listskin .slider .con li .flex .cate .cate04 { background: #C7FFF5; color: #31B584; } #community .listskin .slider .con li .flex .hash { display: flex; gap: 5px; align-items: center; } #community .listskin .slider .con li .flex .hash span { line-height: 20px; font-size: 12px; color: #808080; } #community .listskin .slider .con li .flex .subject { margin: 0 0 5px; } #community .listskin .slider .con li .flex .subject a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; line-height: 20px; font-size: 16px; font-weight: bold; color: #333333; } #community .listskin .slider .con li .flex .text { margin: 0 0 5px 0; } #community .listskin .slider .con li .flex .text a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; line-height: 20px; font-size: 12px; color: #333333; } #community .listskin .slider .con li .bottom { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid rgb(33 33 33 / 8%); display: flex; align-items: center; justify-content: space-between; } #community .listskin .slider .con li .bottom .info { display: flex; align-items: center; } #community .listskin .slider .con li .bottom .info span { font-size: 12px; color: #808080; } #community .listskin .slider .con li .bottom .info span + span:before { content: '|'; margin: 0 4px; } #community .listskin .slider .con li .bottom .tool { display: flex; gap: 10px; align-items: center; } #community .listskin .slider .con li .bottom .tool a { display: flex; gap: 5px; align-items: center; } #community .listskin .slider .con li .bottom .tool a img { width: 14px; height: 14px; } #community .listskin .slider .con li .bottom .tool a em { font-size: 12px; color: #808080; } #community .listskin .slider .con li .bottom .tool a .ic-like { background: url("../img/ic-like.png") no-repeat 50% 50% / contain; } #community .listskin .slider .con li .bottom .tool a .ic-comment { background: url("../img/ic-comment.png") no-repeat 50% 50% / contain; } #community .listskin .slider .swiper-arrow-prev { position: absolute; top: 50%; left: 0; margin-left: -30px; width: 30px; height: 30px; background: url("../img/icon_latest_prev.png") no-repeat 50% 50% / contain; z-index: 10; text-indent: -9999em; overflow: hidden; cursor: pointer; transform: translateY(-50%); } #community .listskin .slider .swiper-arrow-next { position: absolute; top: 50%; right: 0; margin-right: -30px; width: 30px; height: 30px; background: url("../img/icon_latest_next.png") no-repeat 50% 50% / contain; z-index: 10; text-indent: -9999em; overflow: hidden; cursor: pointer; transform: translateY(-50%); } #community .listskin .middle { display: flex; align-items: center; justify-content: space-between; height: 50px; } #community .listskin .middle .tool { display: flex; } #community .listskin .middle .tool ul { display: flex; align-items: center; justify-content: center; gap: 10px; } #community .listskin .middle .tool li { } #community .listskin .middle .tool li .btn { min-width: 60px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 12px; border: 1px solid #cccccc; background: #fafafa; color: #303030; font-family: 'Pretendard', 'Malgun Gothic', 'dotum', '돋움', 'gulim', '굴림', 'Tahoma'; } #community .listskin .onlyme { display: flex; align-items: center; justify-content: flex-end; margin: 0; } #community .listskin .onlyme label { display: flex; gap: 10px; cursor: pointer; } #community .listskin .onlyme label input { display: none; } #community .listskin .onlyme label input ~ p { line-height: 20px; font-size: 12px; color: #808080; } #community .listskin .onlyme label input:checked ~ p { color: #303030; text-decoration: underline; } #community .listskin .list { } #community .listskin .list ul { border-top: 1px solid 1px solid #e2e2e2; } #community .listskin .list li { padding: 20px 0; border-bottom: 1px solid #e2e2e2; } #community .listskin .list li .flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } #community .listskin .list li .flex .lt-item { flex: 1; } #community .listskin .list li .flex .rt-item { flex-shrink: 0; } #community .listskin .list li .flex .head {display: flex; align-items: center; margin: 0 0 10px;width: 100%;flex-wrap: wrap;} #community .listskin .list li .flex .cate { flex-shrink: 0; } #community .listskin .list li .flex .cate span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 26px; padding: 0 6px; border-radius: 15px; background: #fafafa; font-size: 12px; } #community .listskin .list li .flex .cate .cate01 { background: #FFF7B2; color: #FFC700; } #community .listskin .list li .flex .cate .cate02 { background: #FFE4FB; color: #D36670; } #community .listskin .list li .flex .cate .cate03 { background: #E5F1FE; color: #398ED3; } #community .listskin .list li .flex .cate .cate04 { background: #C7FFF5; color: #31B584; } #community .listskin .list li .flex .cate .cate05 { background: #FFCEB2; color: #A93D00; } #community .listskin .list li .flex .hash { display: flex; gap: 5px; align-items: center; } #community .listskin .list li .flex .hash span { line-height: 20px; font-size: 12px; color: #808080; } #community .listskin .list li .flex .subject { margin: 0; flex: 1; } #community .listskin .list li .flex .subject a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; line-height: 20px; font-size: 16px; font-weight: bold; color: #333333; } #community .listskin .list li .flex .text { margin: 0 0 5px 0; } #community .listskin .list li .flex .text a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 20px; font-size: 12px; color: #333333; } #community .listskin .list li .flex .image { width: 100px; height: 75px; border-radius: 6px; overflow: hidden; } #community .listskin .list li .flex .image a { display: block; width: 100%; height: 100%; } #community .listskin .list li .flex .image img { width: 100%; height: 100%; object-fit: cover; } #community .listskin .list li .bottom { margin: 10px 0 0; display: flex; align-items: center; justify-content: space-between; } #community .listskin .list li .bottom .info { display: flex; align-items: center; } #community .listskin .list li .bottom .info span { font-size: 12px; color: #808080; } #community .listskin .list li .bottom .info span + span:before { content: '|'; margin: 0 4px; } #community .listskin .list li .bottom .tool { display: flex; gap: 10px; align-items: center; } #community .listskin .list li .bottom .tool a { display: flex; gap: 3px; align-items: center; } #community .listskin .list li .bottom .tool a img { width: 14px; height: auto; } #community .listskin .list li .bottom .tool a em { font-size: 12px; color: #808080; } #community .listskin .list li .bottom .tool a .ic-like { background: url("../img/ic-like.png") no-repeat 50% 50% / contain; } #community .listskin .list li .bottom .tool a .ic-comment { background: url("../img/ic-comment.png") no-repeat 50% 50% / contain; } #community .listskin .control { position: fixed; bottom: 100px; right: 20px; display: flex; flex-direction: column; z-index: 101; } #community .listskin .control a { display: flex; flex-direction: column; text-align: center; } #community .listskin .control a + a { margin-top: 10px; } #community .listskin .control a i { display: flex; width: 36px; height: 36px; background: var(--main-color); border-radius: 36px; overflow: hidden; align-items: center; justify-content: center; } #community .listskin .control a i:before { content: ''; display: block; width: 16px; height: 16px; } #community .listskin .control a p { margin-top: 4px; font-size: 10px; } #community .listskin .control a.ctr_top i:before { background: url("../img/ctr_top.png") no-repeat 50% 50% / contain; } #community .listskin .control a.ctr_write i:before { background: url("../img/ctr_write.png") no-repeat 50% 50% / contain; } #community .writeskin { padding: 50px 30px; } #community .writeskin .wrap { width: 700px; max-width: 100%; margin: 0 auto; } #community .writeskin .flex { display: flex; flex-direction: column; } #community .writeskin .form { display: flex; flex-direction: column; gap: 30px; } #community .writeskin .form dl { } #community .writeskin .form dt { display: flex; align-items: center; gap: 10px; line-height: 30px; font-size: 16px; font-weight: bold; color: #333; } #community .writeskin .form dt .error { font-size: 12px; font-weight: 400; color: #f00; } #community .writeskin .form dt .anony { margin: 0 0 0 auto; } #community .writeskin .form dt .anony label { display: flex; gap: 10px; cursor: pointer; align-items: center; } #community .writeskin .form dt .anony label input { display: none; } #community .writeskin .form dt .anony label input ~ p { line-height: 1; font-size: 12px; font-weight: 400; color: #808080; } #community .writeskin .form dt .anony label input ~ i { position: relative; width: 16px; height: 16px; border-radius: 16px; border: 1px solid #808080; background: #ffffff; } #community .writeskin .form dt .anony label input:checked ~ i:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 8px; background: #333; } #community .writeskin .form dd { } #community .writeskin .form dd .cate { width: 100%; height: 30px; padding: 0; background: transparent; font-size: 16px; color: #808080; border: 1px solid transparent; border-bottom-color: rgba(33 33 33 / 8%); line-height: 30px; } #community .writeskin .form dd .cate:active, #community .writeskin .form dd .cate:focus, #community .writeskin .form dd .cate:hover { outline: unset !important; box-shadow: none !important; border: 1px solid transparent !important; border-bottom-color: rgba(33 33 33 / 8%) !important; } #community .writeskin .form dd .input { } #community .writeskin .form dd .input input { box-shadow: none !important; width: 100%; height: 30px; font-size: 12px; font-weight: 500; color: #333; padding: 0 !important; font-family: 'Pretendard', 'Malgun Gothic', 'dotum', '돋움', 'gulim', '굴림', 'Tahoma'; } #community .writeskin .form dd .input input:active, #community .writeskin .form dd .input input:focus, #community .writeskin .form dd .input input:hover { outline: unset !important; box-shadow: none !important; border: unset !important; } #community .writeskin .form dd .input.subject input { font-size: 16px; } #community .writeskin .form dd .textarea { } #community .writeskin .form dd .textarea textarea { box-shadow: none !important; width: 100%; height: 140px; font-size: 16px; font-weight: 500; color: #333; font-family: 'Pretendard', 'Malgun Gothic', 'dotum', '돋움', 'gulim', '굴림', 'Tahoma'; } #community .writeskin .form dd .textarea textarea:active, #community .writeskin .form dd .textarea textarea:focus, #community .writeskin .form dd .textarea textarea:hover { outline: unset !important; box-shadow: none !important; border: unset !important; } #community .writeskin .form dd .file { } #community .writeskin .form dd .file span { height: 30px; display: flex; align-items: center; justify-content: flex-start; line-height: 20px; font-size: 12px; color: #808080; margin: 0 0 10px; font-family: 'Pretendard', 'Malgun Gothic', 'dotum', '돋움', 'gulim', '굴림', 'Tahoma'; } #community .writeskin .form dd .file label { } #community .writeskin .form dd .file label input { display: none; } #community .writeskin .form dd .file label input ~ p { display: flex; cursor: pointer; width: 75px; aspect-ratio: 1/1; border-radius: 15px; border: 1px dashed #e2e2e2; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: #808080; } #community .writeskin .caution { display: none; } #community .writeskin .caution ul { display: flex; flex-direction: column; gap: 10px; } #community .writeskin .caution li { border-radius: 15px; padding: 20px; background: #ECFBFF; line-height: 14px; font-size: 12px; } #community .writeskin .button { display: flex; gap: 10px; } #community .writeskin .button .btn { flex: 1; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 5px; font-size: 16px; font-weight: bold; height: 40px; font-family: 'Pretendard', 'Malgun Gothic', 'dotum', '돋움', 'gulim', '굴림', 'Tahoma'; } #community .writeskin .lt-item { flex: 1; } #community .writeskin .rt-item { width: 100%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; } @media screen and (max-width: 480px) { #community { position: relative; margin: 0; } #community .listskin { padding: 50px 10px 0; } } #mocktest .detail .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 10000; padding: 100px 20px 20px; align-items: flex-start; } #mocktest .detail .popup.on { display: flex; } #mocktest .detail .popup .inner { z-index: 3; position: relative; width: 350px; height: 600px; display: flex; flex-direction: column; border-radius: 30px; background: #ffffff; padding: 16px; min-height: 40vh; max-height: 80vh; overflow-y: auto; margin: 0 auto; scrollbar-width: none; -ms-overflow-style: none; } #mocktest .detail .popup .inner::-webkit-scrollbar { display: none; } #mocktest .detail .popup .bg { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #333; opacity: 0.3; } #mocktest .detail .popup .head { display: flex; line-height: 20px; margin: 10px 20px 20px; align-items: center; justify-content: space-between; } #mocktest .detail .popup .head .tit { font-size: 12px; } #mocktest .detail .popup .head .close { font-size: 12px; color: #808080; text-decoration: underline; } #mocktest .detail .popup .progress { flex: unset; padding: 0 0 20px; gap: 20px; } #mocktest .detail .popup .content { flex: unset; } #mocktest .detail .popup .caution { display: block; margin: 50px auto 0; padding: 0 16px 25px; font-weight: 500; color: #333; line-height: 14px; font-size: 12px; width: 220px; max-width: 100%; } #mocktest .detail .popup .caution span { font-size: 20px; margin: 0; display: block; } } /* .layer-popup{position:fixed;top:0;left:0;width:100%;height:100%;display: flex;align-items: center;justify-content: center;z-index: 10001;transition:all 0.35s;opacity:0;visibility:hidden;} .layer-popup.active{opacity:1;visibility:visible;} .layer-popup .bg{position: absolute;z-index: 4;top: 0;left: 0;width: 100%;height: 100%;background: #333;opacity: 0.3;} .layer-popup .box{text-align: center;min-width: auto;width: 400px;max-width: calc(100% - 40px);border-radius: 15px;background: #fff;padding: 30px;z-index: 5;} .layer-popup .box strong{display: block;line-height: 20px;font-size: 16px;font-weight: bold;color: #333;margin: 0 0 20px;} .layer-popup .box p{display: block;line-height: 14px;font-size: 12px;font-weight: 500;color: #808080;margin: 0 0 30px;} .layer-popup .box img{display: block;margin: 30px auto;} .layer-popup .box a{display: flex;width: 200px; margin: 0 auto; height: 30px;border-radius: 5px;background: var(--main-color);align-items: center;justify-content: center;font-size: 12px;font-weight: bold;color: #fff;} .layer-popup .box .close{margin: 10px 0 0;display: flex;width: 100%;height: 30px;border-radius: 5px;background: #fff;align-items: center;justify-content: center;font-size: 12px;color: #808080;text-decoration: underline;} .layer-popup .box .GoExplain{display: flex;width: 200px; margin: 10px auto 0;height: 30px;border: 1px solid var(--main-color); border-radius: 5px;background: #fff;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;color: var(--main-color);} .layer-popup .box .tit{display: block;line-height: 20px;font-size: 16px;font-weight: bold;color: #333;margin: 0 0 20px;} .layer-popup .box .txt{display: block;line-height: 14px;font-size: 12px;font-weight: 500;color: #808080;margin: 0 0 30px;} .layer-popup .box .act{display:flex;gap:10px;} .layer-popup .box .act + .act{margin: 10px 0 0;} .layer-popup .box .act .btn{display:flex;align-items: center;justify-content: center;width:100%;height:30px;border-radius:5px;border:1px solid transparent;font-size:12px;} .layer-popup .box .select{} .layer-popup .box .select select{width:100px;height:36px;border:0;border-bottom:1px solid #d0d0d0;font-size:16px;color:#e2e2e2;text-align:center;margin:0 0 30px;} */ @media (min-width:900px) { #wrap #learn .learn_new{padding: 90px 0 0 0;} #wrap #learn .learn_new .banner_wrap{background: #333;margin: 0 0 50px 0;} #wrap #learn .learn_new .banner_wrap a{display:flex;width:100%;height:270px;margin:0 auto;} #wrap #learn .learn_new .banner_wrap a img{display:block;width:100%;height:100%;object-fit:contain} #wrap #learn .learn_new .search_wrap{margin: 0 0 50px;display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .search_wrap .input{margin: 0 auto;padding: 7px 10px;min-width: 561px;height: 44px;border-radius: 44px;border: 3px solid var(--main-color);display: flex;align-items: center;justify-content: center;overflow: hidden;} #wrap #learn .learn_new .search_wrap .input input{width: 100%;height: 44px;flex: 1;align-items: center;justify-content: center;display: flex;padding: 0 40px;line-height: 19px;font-size: 16px;color: #808080;} #wrap #learn .learn_new .search_wrap .input button{width: 80px;height: 30px;background: var(--main-color);border-radius: 30px;display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .search_wrap .input button img{width:auto;height:24px;object-fit:contain} #wrap #learn .learn_new .quick_wrap{position: relative;margin: 0 0 50px;overflow: hidden;} #wrap #learn .learn_new .quick_wrap ul{} #wrap #learn .learn_new .quick_wrap li{} #wrap #learn .learn_new .quick_wrap li a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;min-width: 65px;} #wrap #learn .learn_new .quick_wrap li a img{height:40px;width:40px;object-fit:contain} #wrap #learn .learn_new .quick_wrap li a p{line-height:20px;font-size:16px;font-weight:bold;color:#333;white-space: nowrap;} #wrap #learn .learn_new .quick_wrap .prev{position:absolute;z-index: 11;top:50%;left: 0;transform:translateY(-50%);width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.1);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .quick_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .quick_wrap .next{position:absolute;z-index: 11;top:50%;right: 0;transform:translateY(-50%);width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.1);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .quick_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .quick_wrap .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new .list_wrap{display:flex;margin:0 0 50px 0;flex-direction: row;} #wrap #learn .learn_new .list_wrap .list{} #wrap #learn .learn_new .list_wrap .list + .list{margin-left:30px;} #wrap #learn .learn_new .list_wrap .list01{flex-shrink:0;position: relative;position:relative;background: #EBEBEB;} #wrap #learn .learn_new .list_wrap .list01 .img{width:300px;height:250px;} #wrap #learn .learn_new .list_wrap .list01 .img img{width:100%;height:100%;object-fit:cover;} #wrap #learn .learn_new .list_wrap .list01 .btn{position:absolute;bottom:0;left:0;width:100%;padding:20px;display:flex;gap:10px;} #wrap #learn .learn_new .list_wrap .list01 .btn a{flex: 1;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 5px;line-height: 19px;font-size: 12px;font-weight: 400;color: #333;height: 40px;} #wrap #learn .learn_new .list_wrap .list01 .btn a:hover{background:#fafafa;} #wrap #learn .learn_new .list_wrap .list02{flex:1;} #wrap #learn .learn_new .list_wrap .list02 ul{display:flex;gap:22px;} #wrap #learn .learn_new .list_wrap .list02 li{flex:1;} #wrap #learn .learn_new .list_wrap .list02 .img{background:#fff;margin: 0 0 10px;display: block;} #wrap #learn .learn_new .list_wrap .list02 .tit{line-height: 30px;font-size: 16px;font-weight: 400;color: #398ED3;width: 80px; height: 30px; background-color: #E5F1FE;text-align: center;border-radius: 5px;} #wrap #learn .learn_new .list_wrap .list02 .txt{margin: 10px 20px 0 0;display: flex;align-items: center;justify-content: flex-end;gap: 10px;} #wrap #learn .learn_new .list_wrap .list02 .txt span{display: flex;align-items: center;justify-content: center;gap: 5px;line-height: 20px;font-size: 12px;color: #808080;} #wrap #learn .learn_new .study_wrap{margin: 0 0 50px;} #wrap #learn .learn_new .study_wrap .title{margin:0 0 20px;} #wrap #learn .learn_new .study_wrap .title .tit{line-height:34px;font-size:28px;font-weight:bold;color:#333} #wrap #learn .learn_new .study_wrap .title .txt{margin: 5px 0 0;line-height:19px;font-size:16px;color:#808080;} #wrap #learn .learn_new .study_wrap .list{position:relative;overflow:hidden;} /* #wrap #learn .learn_new .study_wrap .list ul{max-width: 250px;} */ #wrap #learn .learn_new .study_wrap .list li{flex-shrink: 1;} #wrap #learn .learn_new .study_wrap .list li .img{margin:0 0 10px;width:100%;height:150px;background:#ababab;} #wrap #learn .learn_new .study_wrap .list li .img img{display:block;width:100%;height:100%;object-fit:cover} #wrap #learn .learn_new .study_wrap .list li .tag{display:flex;overflow-x:auto;gap:10px;margin: 0 0 10px;} #wrap #learn .learn_new .study_wrap .list li .tag a{display:flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:5px;background:#f1f1f1;line-height:19px;font-size:16px;font-weight:500;color:#808080} #wrap #learn .learn_new .study_wrap .list li .tit{line-height: 24px;font-size: 20px;font-weight: bold;color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin: 0 0 10px;} #wrap #learn .learn_new .study_wrap .list li .con{display: flex;align-items: center;justify-content: end;gap: 5px;margin: 0 0 10px;} #wrap #learn .learn_new .study_wrap .list li .con img{width: 20px;height: 20px;border-radius: 50%;overflow: hidden;object-fit: cover;} #wrap #learn .learn_new .study_wrap .list li .con p{line-height: 19px;font-size: 16px;color: #808080;} #wrap #learn .learn_new .study_wrap .list li .txt{display: flex;align-items: center;justify-content: flex-end;gap: 10px;} #wrap #learn .learn_new .study_wrap .list li .txt span{display: flex;align-items: center;justify-content: center;gap: 5px;line-height: 20px;font-size: 12px;color: #808080;} #wrap #learn .learn_new .study_wrap .prev{position:absolute;z-index: 11;top: 52px;left: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .study_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .study_wrap .next{position:absolute;z-index: 11;top: 52px;right: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .study_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .study_wrap .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new .board_wrap{margin:0 0 50px;display: block;} #wrap #learn .learn_new .board_wrap .board{flex-shrink:1;margin:0 50px 0 0;padding: 20px;border-radius: 15px;background: #f5f5f7;max-width: 500px;} #wrap #learn .learn_new .board_wrap .board .title{display: flex;align-items: center;justify-content: space-between;margin: 0 0 10px;} #wrap #learn .learn_new .board_wrap .board .title .tit{line-height: 1;font-size: 20px;font-weight: bold;color: #333;} #wrap #learn .learn_new .board_wrap .board .title .day{display: flex;align-items: center;justify-content: center;gap: 6px;background: #ffffff;border: 1px solid #f1f1f1;box-shadow: 0 2px 2px rgba(0,0,0,0.25);padding: 10px 14px;height: 40px;border-radius: 10px;line-height: 19px;font-size: 16px;color: #333;} #wrap #learn .learn_new .board_wrap .board .list{position: relative;padding: 20px;min-height: 190px;border-radius: 15px;background: #fff;border: 1px solid #f1f1f1;box-shadow: 0 2px 2px rgba(0,0,0,0.25);} #wrap #learn .learn_new .board_wrap .board .list .tit{line-height: 20px;font-size: 12px;font-weight: bold;color: #333;margin: 0 0 10px;} #wrap #learn .learn_new .board_wrap .board .list .con{} #wrap #learn .learn_new .board_wrap .board .list .con ul{display: flex;flex-direction: column;gap: 5px;} #wrap #learn .learn_new .board_wrap .board .list .con li{} #wrap #learn .learn_new .board_wrap .board .list .con li a{display: block;line-height: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 12px;color: #333;} #wrap #learn .learn_new .board_wrap .board .list .con li a:before{content:'';margin: 8px 6px 0 0;width: 2px;height: 2px;border-radius:3px;background:#333;display: inline-flex;align-items: center;vertical-align: top;} #wrap #learn .learn_new .board_wrap .board .list .act{position: absolute;top: 20px;right: 20px;} #wrap #learn .learn_new .board_wrap .board .list .act a{display: flex;align-items: center;justify-content: center;padding: 4px 10px;line-height: 1;height: 20px;border-radius: 20px;background: var(--main-color);font-size: 12px;font-weight: bold;color: #fff;} #wrap #learn .learn_new .board_wrap .with{margin: 50px auto; flex:1;} #wrap #learn .learn_new .board_wrap .with .tit{line-height: 33px;font-size: 28px;font-weight: bold;color: #333;margin: 0 0 10px;} #wrap #learn .learn_new .board_wrap .with .tit span{color: var(--main-color);} #wrap #learn .learn_new .board_wrap .with .txt{margin: 0 0 10px;line-height: 19px;font-size: 16px;font-weight: 600;color: #808080;} #wrap #learn .learn_new .board_wrap .with .con{position: relative;overflow: hidden;padding: 5px;margin: -5px;} #wrap #learn .learn_new .board_wrap .with .con ul{} #wrap #learn .learn_new .board_wrap .with .con li{} #wrap #learn .learn_new .board_wrap .with .con .info{padding:10px;border-radius:5px;box-shadow:0 0 6px rgba(0,0,0,0.1)} #wrap #learn .learn_new .board_wrap .with .con .info .user{display:flex;gap:10px;align-items:center;margin-bottom:10px;} #wrap #learn .learn_new .board_wrap .with .con .info .user img{width:30px;height:30px;border-radius:30px;object-fit:cover;overflow:hidden;object-position: center;} #wrap #learn .learn_new .board_wrap .with .con .info .text{line-height:19px;font-size:16px;font-weight:500;color:#333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;} #wrap #learn .learn_new .board_wrap .with .btn{margin: 10px 0 0 0;display: flex;gap: 5px;} #wrap #learn .learn_new .board_wrap .with .btn a{display: flex;align-items: center;justify-content: center;border-radius: 5px;border: 1px solid #ebebeb;height: 40px;padding: 4px 12px;line-height: 14px;font-size: 12px;font-weight: 600;color: #808080;} #wrap #learn .learn_new .board_wrap .with .btn a:hover{background:#fafafa} #wrap #learn .learn_new .board_wrap .prev{position:absolute;z-index: 11;top: 52px;left: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .board_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .board_wrap .next{position:absolute;z-index: 11;top: 52px;right: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .board_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .board_wrap .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new .growth_wrap{margin:0 0 50px;} #wrap #learn .learn_new .growth_wrap .title{line-height:33px;font-size:28px;font-weight:bold;color:#333;margin:0 0 50px;} #wrap #learn .learn_new .growth_wrap .list{position:relative;overflow: hidden;} #wrap #learn .learn_new .growth_wrap .list ul{} #wrap #learn .learn_new .growth_wrap .list li{display:flex;flex-direction:column;gap:10px;} #wrap #learn .learn_new .growth_wrap .list li a{display:flex;width:100%;height:60px;} #wrap #learn .learn_new .growth_wrap .list li a img{display:block;width:100%;height:100%;object-fit: cover;} #wrap #learn .learn_new .growth_wrap .prev{position:absolute;z-index: 11;top: 52px;left: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .growth_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .growth_wrap .next{position:absolute;z-index: 11;top: 52px;right: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .growth_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .growth_wrap .swiper-button-disabled{visibility:hidden;} /**/ #wrap #study_detail{} #wrap #study_detail .study_detail{margin:0 auto;width:958px;max-width:100%;padding:30px 0;} #wrap #study_detail .study_detail .title{line-height: 30px;font-size: 28px;font-weight: bold;color: #333;padding-bottom: 10px;border-bottom: 1px solid #333;} #wrap #study_detail .study_detail .head{padding: 10px 0 0;display: flex;align-items: center;justify-content: space-between;line-height: 19px;font-size: 16px;font-weight: 500;color: #333;} #wrap #study_detail .study_detail .head .chapter{} #wrap #study_detail .study_detail .head .name{} #wrap #study_detail .study_detail .thumb{margin: 50px 0;display:flex;align-items:center;justify-content:center;background:rgb(51 51 51 / 50%);height: 300px;} #wrap #study_detail .study_detail .thumb img{display:block;width:auto;max-width:100%;height:100%;object-fit:contain} #wrap #study_detail .study_detail .cont{display:flex;align-items:stretch;justify-content:flex-start;gap: 64px;} #wrap #study_detail .study_detail .cont .lt-item{display:flex;flex-direction:column;width:554px;} #wrap #study_detail .study_detail .cont .rt-item{display:flex;flex-direction:column;width:340px;} #wrap #study_detail .study_detail .cont .info{margin:0 0 50px 0;padding:10px;border-radius:5px;box-shadow:0 0 6px rgba(0,0,0,0.1)} #wrap #study_detail .study_detail .cont .info .user{display:flex;gap:10px;align-items:center;margin-bottom:10px;} #wrap #study_detail .study_detail .cont .info .user img{width:30px;height:30px;border-radius:30px;object-fit:contain;overflow:hidden;} #wrap #study_detail .study_detail .cont .info .txt{line-height:19px;font-size:16px;font-weight:500;color:#333333} #wrap #study_detail .study_detail .cont .detail{display:flex;flex-direction:column;} #wrap #study_detail .study_detail .cont .detail img{width:auto;max-width:100%;height:auto} #wrap #study_detail .study_detail .cont .inner{border-radius:5px;border:1px solid #f1f1f1;overflow:hidden;padding: 0 0 120px;} #wrap #study_detail .study_detail .cont .status{background:var(--main-color);display:flex;align-items:center;justify-content:center;height:50px;font-size:20px;font-weight:bold;color:#ffffff;} #wrap #study_detail .study_detail .cont .option{position: relative;padding: 30px;} #wrap #study_detail .study_detail .cont .option:after{content:'';position:absolute;bottom:0;left:10px;right:10px;border-bottom:1px solid #ebebeb;} #wrap #study_detail .study_detail .cont .option .desc{margin: 0 0 30px;} #wrap #study_detail .study_detail .cont .option .tit{line-height:19px;font-size:16px;font-weight:500;color:#333;margin-bottom:10px;position: relative;} #wrap #study_detail .study_detail .cont .option .tit > a{position:absolute;top:50%;right:0;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;height:30px;min-width:80px;border-radius:5px;background:var(--main-color);font-size:13px;color:#ffffff;padding:2px 6px;} #wrap #study_detail .study_detail .cont .option .con{display:flex;flex-wrap:wrap;gap:10px;} #wrap #study_detail .study_detail .cont .option .con .checkbox{width:calc(50% - 5px)} #wrap #study_detail .study_detail .cont .option .con .checkbox input{display:none;} #wrap #study_detail .study_detail .cont .option .con .checkbox input ~ p{display:flex;align-items:center;justify-content:center;border-radius:5px;border:1px solid #f1f1f1;height:40px;font-size:12px;font-weight:500;color:#333;cursor:pointer} #wrap #study_detail .study_detail .cont .option .con .checkbox input:checked ~ p{background:var(--main-color);color:#ffffff;border-color:var(--main-color)} #wrap #study_detail .study_detail .cont .total{padding:20px 30px} #wrap #study_detail .study_detail .cont .total .tit{line-height: 24px;font-size: 20px;font-weight: bold;color: #333;margin: 0 0 30px;} #wrap #study_detail .study_detail .cont .total .con{display: flex;align-items: center;justify-content: flex-end;} #wrap #study_detail .study_detail .cont .total .con .per{margin: 0 auto 0 0;font-size: 24px;font-weight: bold;color: #e5503c;} #wrap #study_detail .study_detail .cont .total .con .ori{margin: 0 10px;font-size: 16px;font-weight: 500;color: #808080;text-decoration: line-through;} #wrap #study_detail .study_detail .cont .total .con .sal{font-size: 28px;font-weight: bold;color: #333;} #wrap #study_detail .study_detail .cont .agree{padding: 10px 20px;} #wrap #study_detail .study_detail .cont .agree ul{} #wrap #study_detail .study_detail .cont .agree li{display: flex;align-items: center;justify-content: space-between;} #wrap #study_detail .study_detail .cont .agree li + li{margin-top:10px;} #wrap #study_detail .study_detail .cont .agree li > label{display: flex;align-items: center;cursor: pointer;gap: 4px;} #wrap #study_detail .study_detail .cont .agree li > label input{display: none;} #wrap #study_detail .study_detail .cont .agree li > label input ~ i{position:relative;width: 14px;height: 14px;border-radius: 14px;border: 1px solid #00c4f1;} #wrap #study_detail .study_detail .cont .agree li > label input ~ p{font-size: 12px;font-weight: 500;color: #808080;} #wrap #study_detail .study_detail .cont .agree li > label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:6px;background:#00c4f1;transform:translate(-50%,-50%)} #wrap #study_detail .study_detail .cont .agree a{line-height: 14px;font-size: 12px;font-weight: 500;text-decoration: underline;color: #808080;} #wrap #study_detail .study_detail .cont .button{margin: 20px 30px 50px;display:flex;gap:10px;} #wrap #study_detail .study_detail .cont .button .btn{flex:1;display: flex;align-items: center;justify-content: center;height: 40px;padding: 5px;border-radius: 5px;line-height: 19px;font-size: 16px;font-weight: bold;border: 1px solid transparent;} #wrap #study_detail .study_detail .cont .button .btn_001{color: var(--main-color);border: 1px solid var(--main-color);background: #ffffff;} #wrap #study_detail .study_detail .cont .button .btn_002{color: #ffffff;border: 1px solid var(--main-color);background: var(--main-color);} #wrap #study_detail .study_detail .cont .refund{position: relative;padding: 20px 30px;} #wrap #study_detail .study_detail .cont .refund:before{content:'';position:absolute;top:0;left:10px;right:10px;border-bottom:1px solid #ebebeb;} #wrap #study_detail .study_detail .cont .refund .tit{line-height:14px;font-size:12px;font-weight:700;color:#333;margin:0 0 10px;} #wrap #study_detail .study_detail .cont .refund .txt{line-height:10px;font-size:8px;font-weight:500;color:#333} /**/ #wrap #study_select{padding: 10px;} #wrap #study_select .study_select{padding-top: 20px; padding: 50px 50px 0;margin: 0 auto 80px;width: 958px;max-width: 100%;} #wrap #study_select .study_select .title_wrap{display: flex; justify-content: space-between; margin: 0 0 40px;padding: 0 0 10px;border-bottom: 1px solid #333;line-height: 30px;font-size: 28px;font-weight: bold;color: #333;} #wrap #study_select .study_select .select_wrap{margin: 0 auto;width: 300px;max-width: 100%;} #wrap #study_select .study_select .select_wrap .list{position: relative;} #wrap #study_select .study_select .select_wrap .list .dnone{display:none;} #wrap #study_select .study_select .select_wrap dl{margin: 0 0 20px;} #wrap #study_select .study_select .select_wrap dl:last-child{margin:0;} #wrap #study_select .study_select .select_wrap dt{line-height: 19px;font-size: 16px;color: #808080;margin: 0 0 10px;} #wrap #study_select .study_select .select_wrap dd{} #wrap #study_select .study_select .select_wrap dd > .selectBtn{position:relative;width: 100%;height: 50px;padding: 12px 20px;border-radius: 5px;background: #f1f1f1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 24px;font-size: 16px;font-weight: 500;color: #333;text-align: left;} #wrap #study_select .study_select .select_wrap dd > .selectBtn:after{content:'';position:absolute;top:10px;right:10px;width:30px;height:30px;background:url("../img/ico-dropdown.png") no-repeat 50% 50%} #wrap #study_select .study_select .select_wrap dd > .selectBtn.selectDisabled{color:#808080;pointer-events:none;} #wrap #study_select .study_select .select_wrap dd > .selectBtn.selectDisabled:after{display:none;} #wrap #study_select .study_select .select_wrap dd > .selectBtn.on:after{transform:rotate(180deg)} #wrap #study_select .study_select .select_wrap dd > .selectBox{position: fixed;z-index: 1004;top:50%;left:50%;width:300px;height:auto;max-height:510px;border-radius:30px;background:#ffffff;transform: translate(-50%,-50%);display: flex;flex-direction: column;display: none;overflow: hidden;} #wrap #study_select .study_select .select_wrap dd > .selectBox.on{display:flex;} #wrap #study_select .study_select .select_wrap dd > .selectBox .tit{padding:20px;background:#ffffff;position:sticky;top:0;text-align: center;line-height: 19px;font-size: 16px;color: #808080;} #wrap #study_select .study_select .select_wrap dd > .selectBox .con{padding: 0 10px 10px;height:100%;overflow:hidden;overflow-y:auto;} #wrap #study_select .study_select .select_wrap dd > .selectBox .con{-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */} #wrap #study_select .study_select .select_wrap dd > .selectBox .con::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/} #wrap #study_select .study_select .select_wrap dd > .selectBox ul{gap: 10px;display:flex;flex-direction:column;} #wrap #study_select .study_select .select_wrap dd > .selectBox li{height: 30px;} #wrap #study_select .study_select .select_wrap dd > .selectBox {} #wrap #study_select .study_select .note_cnt {font-size: 12px;font-weight: 400;background-color: #f1f1f1;color: #31B584;padding: 2px 7px;margin-left: 5px;border-radius: 10px;height: 24px;line-height: 20px;} #wrap #study_select .study_select .select_wrap dd > .selectBox li a{display: flex;align-items: center;justify-content: center;width: 100%;text-align: center;font-size: 16px;font-weight: 500;color: #333;border-radius:10px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} #wrap #study_select .study_select .select_wrap dd > .selectBox li a:hover{background:#fafafa} #wrap #study_select .study_select .select_wrap .tip{ background: #f5f5ff; padding: 20px;line-height: 30px;border-radius: 20px; margin-top: 20px;} #wrap #study_select .study_select .select_bg{position:fixed;top:0;left:0;width:100%;height:100%;background:#333;opacity:0.3;z-index: 1003;display: none;} #wrap #study_select .study_select .select_bg.on{display:block;} #wrap #study_select .study_select .button_wrap{display: flex;align-items: center;justify-content: flex-end;gap: 20px;margin: 38px 0 0 0;position: relative;} #wrap #study_select .study_select .button_wrap a{display: flex;align-items: center;justify-content: center;min-width: 140px;height: 40px;padding: 12px;border-radius: 5px;background: var(--main-color);color: #fff;line-height: 19px;font-size: 16px;font-weight: bold;} /**/ #wrap #certi{} #wrap #certi .certi{padding: 100px 0 0 0;} #wrap #certi .certi_wrap{display:flex;width: 953px;max-width:100%;margin:0 auto;align-items: center;} #wrap #certi .certi_wrap .with{flex:1;max-width:500px;} #wrap #certi .certi_wrap .with .tit{margin:0 0 10px;line-height:42px;font-size:36px;font-weight:bold;color:#333;} #wrap #certi .certi_wrap .with .tit span{color:var(--main-color);} #wrap #certi .certi_wrap .with .txt{margin:0 0 30px;line-height:28px;font-size:24px;font-weight:600;color:#808080;} #wrap #certi .certi_wrap .with .con{margin:0 0 30px;} #wrap #certi .certi_wrap .with .con a{} #wrap #certi .certi_wrap .with .con a img{display:block;width:100%;height:auto;object-fit:contain;max-height:280px;} #wrap #certi .certi_wrap .button{display:flex;flex-direction:column;gap:10px;flex-shrink:0;width: 360px;} #wrap #certi .certi_wrap .button a{position:relative;display:flex;padding:12px 30px;border-radius:10px;border: solid 1px #E2E8F0;line-height:33px;font-size:28px;font-weight:500;color:#333;align-items:center;justify-content:flex-start;text-align:left;height: 70px;} #wrap #certi .certi_wrap .button a:after{content:'';position:absolute;top:20px;right:10px;width:30px;height:30px;background:url("../img/ico-dropdown.png") no-repeat 50% 50%;transform:rotate(-90deg)} #wrap #certi .certi_form{padding: 90px 0;margin: 0 auto;width: 958px;max-width: 100%;} #wrap #certi .title_wrap{margin: 0 0 50px;padding: 0 0 10px;border-bottom: 1px solid #333;line-height: 30px;font-size: 28px;font-weight: bold;color: #333;} #wrap #certi .form_wrap{margin: 0 auto;width: 300px;max-width: 100%;} #wrap #certi .form_wrap .form{margin: 0 0 30px;} #wrap #certi .form_wrap .form dl{margin: 0 0 20px;} #wrap #certi .form_wrap .form dl:last-child{margin:0;} #wrap #certi .form_wrap .form dt{margin: 0 0 10px;} #wrap #certi .form_wrap .form dt .tit{line-height: 24px;font-size: 20px;font-weight: bold;color: #333;} #wrap #certi .form_wrap .form dt .txt{margin: 5px 0 0;line-height: 14px;font-size: 12px;color: #808080;} #wrap #certi .form_wrap .form dd{} #wrap #certi .form_wrap .form dd .inp{display: flex;width: 100%;border-radius: 5px;background: #f1f1f1;} #wrap #certi .form_wrap .form dd .inp button{width: 100%;height: 50px;padding: 10px 20px;display: flex;align-items: center;justify-content: flex-start;font-size: 16px;font-weight: 500;color: #808080;} #wrap #certi .form_wrap .form dd .inp input[type="file"]{display: none;} #wrap #certi .form_wrap .form dd .inp input[type="file"] ~ p{width: 100%;height: 50px;padding: 10px 20px;display: flex;align-items: center;justify-content: flex-start;font-size: 16px;font-weight: 500;color: #808080;cursor: pointer;} #wrap #certi .form_wrap .form dd textarea{width:100%;height:100px;border-radius:5px;padding:15px;border:1px solid #333} #wrap #certi .form_wrap .tip{line-height:1.2;font-size:20px;color:#333;} #wrap #certi .button_wrap{display: flex;align-items: center;justify-content: flex-end;gap: 20px;margin: 38px 0 0 0;} #wrap #certi .button_wrap a{display: flex;align-items: center;justify-content: center;min-width: 140px;height: 40px;padding: 12px;border-radius: 5px;background: var(--main-color);color: #fff;line-height: 19px;font-size: 16px;font-weight: bold;} #wrap #certi .certi_popup{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;background:rgba(0,0,0,0.3);z-index:1004;align-items: center;justify-content: center;opacity:0;visibility:hidden} #wrap #certi .certi_popup.on{opacity:1;visibility:visible;} #wrap #certi .certi_popup .certi_popup_box{width:300px;border-radius:15px;background:#fff;padding:25px 30px;text-align: center;} #wrap #certi .certi_popup .certi_popup_box .tit{margin: 25px 0 10px;line-height: 19px;font-size: 16px;font-weight: bold;color: #333;} #wrap #certi .certi_popup .certi_popup_box .txt{line-height: 14px;font-size: 12px;color: #808080;} #wrap #certi .certi_popup .certi_popup_box .act{margin: 50px 0 0 0;} #wrap #certi .certi_popup .certi_popup_box .act a{display: flex;align-items: center;justify-content: center;width: 100%;height: 30px;border-radius: 5px;background: var(--main-color);font-size: 12px;color: #fff;} #wrap #mocktest .result_desktop{padding: 90px 0 0 0;margin: 0 auto;width: 1000px;max-width: 100%;gap:20px;display: flex !important;flex-direction: row !important;} #wrap #mocktest .result_desktop .lt-item{position: relative;flex: 1;width: 620px;} #wrap #mocktest .result_desktop .rt-item{width: 350px;flex-shrink: 0;} #wrap #mocktest .result_desktop .info{} #wrap #mocktest .result_desktop .info li{margin: 0 0 30px;display: flex;} #wrap #mocktest .result_desktop .info dl{position:relative;} #wrap #mocktest .result_desktop .info dl + dl{margin-left:30px;padding-left:30px;} #wrap #mocktest .result_desktop .info dl + dl:before{content:'';position:absolute;top:50%;left:0;transform:translateY(-50%);width:1px;height:50px;background:#333;opacity:0.08;} #wrap #mocktest .result_desktop .info dt{line-height: 1;font-size: 20px;color: #333;margin: 0 0 10px;} #wrap #mocktest .result_desktop .info dd{line-height: 1;font-size: 24px;font-weight: bold;color: #333;} #wrap #mocktest .result_desktop .graph{display:flex;flex-wrap:wrap;gap: 20px;} #wrap #mocktest .result_desktop .graph .desc{width:calc(50% - 25px)} #wrap #mocktest .result_desktop .graph .tit{line-height:20px;font-size:20px;color:#333} #wrap #mocktest .result_desktop .graph .txt{line-height:20px;font-size:12px;color:#808080} #wrap #mocktest .result_desktop .graph .con{margin:18px 0 0;display: flex;align-items: center;gap:20px} #wrap #mocktest .result_desktop .graph .con canvas{flex:1;width: calc(100% - 100px) !important;height: auto !important;aspect-ratio: 1 / calc(1 - 100px);} #wrap #mocktest .result_desktop .graph .con #div_ment{flex-shrink:0;display:flex;flex-direction:column;padding: 0;width: auto;} #wrap #mocktest .result_desktop .button{margin-top:50px;display:flex;align-items:center;justify-content:flex-end} #wrap #mocktest .result_desktop .button .btn{display:flex;align-items:center;justify-content:center;width:100%;height:40px;border-radius:5px;font-size: 16px;} #wrap #mocktest .result_desktop .button .btn_01{background: #FFFFFF !important;border-color: var(--main-color) !important;color: var(--main-color) !important;} #wrap #mocktest .result_desktop .button .btn_02{background: var(--main-color) !important;border-color: var(--main-color) !important;color: #FFFFFF !important;} #wrap #mocktest .result_desktop .button .btn_03{} #wrap #mocktest .result_desktop .button .btn_04{background:#ebebeb !important;border-color:#ebebeb !important;color:#333333 !important;} #wrap #mocktest .result_desktop .testresult{position:absolute;top:0;right:0;} #wrap #mocktest .result_desktop .wrong{padding: 30px 20px;border: 1px solid #f1f1f1;border-radius: 30px;height: 500px;overflow-y: scroll; /* 스크롤바 숨기기 */ scrollbar-width: none; /* Firefox를 위한 설정 */ -ms-overflow-style: none; /* Internet Explorer와 Edge를 위한 설정 */ /* Chrome, Safari, Opera를 위한 설정 */ ::-webkit-scrollbar { display: none; } } #wrap #mocktest .result_desktop .wrong .title{margin: 0 0 10px;display: flex;} #wrap #mocktest .result_desktop .wrong .title .tit{line-height: 20px;font-size: 16px;color: #333;} #wrap #mocktest .result_desktop .wrong .title .txt{margin: 3px 0 0 10px;font-size: 12px;color: #808080;} #wrap #mocktest .result_desktop .wrong .subject{margin:0 0 20px;} #wrap #mocktest .result_desktop .wrong .subject .cont{} #wrap #mocktest .result_desktop .wrong .subject .cont ul{} #wrap #mocktest .result_desktop .wrong .subject .cont li{} #wrap #mocktest .result_desktop .wrong .subject .cont li .view{display: flex;align-items: center;justify-content: flex-start;width: 100%;border-radius:30px;height: 40px;border-radius: 15px;border: 1px solid #f1f1f1;padding: 10px 20px;margin-bottom: 10px;} #wrap #mocktest .result_desktop .wrong .subject .cont li .view .subject{margin: 0;} #wrap #mocktest .result_desktop .wrong .subject .cont li .view .partfail{margin-left: 10px;font-size: 12px;color: #fa897b;font-weight: 400;} #wrap #mocktest .result_desktop .wrong .subject .cont li .view .total{margin-left: auto;} #wrap #mocktest .result_desktop .wrong .subject .cont li .view .total dl{display: flex;flex-direction: column;} #wrap #mocktest .result_desktop .wrong .subject .cont li .view .total dt{line-height: 20px;font-size: 12px;font-weight: bold;color: #333;} #wrap #mocktest .result_desktop .wrong .subject .cont li .view .total dd{position:relative;display: flex;align-items: center;justify-content: center;width: 60px;height: 6px;border-radius: 6px;background: #f1f1f1;} #wrap #mocktest .result_desktop .wrong .subject .cont li .view .total dd i{position:absolute;top:0;left:0;width:0;height:100%;background:var(--main-color);} #wrap #mocktest .result_desktop .wrong .subject .cont li .view .icon{} #wrap #mocktest .result_desktop .wrong .subject .cont li .view .icon img{width: 50%;} #wrap #mocktest .result_desktop .wrong .subject .cont li .view.on .icon{transform:rotate(180deg)} #wrap #mocktest .result_desktop .wrong .subject .cont li .layer{margin-top: 15px;display:none;} #wrap #mocktest .result_desktop .wrong .subject .cont li .layer.on{display:block} #wrap #mocktest .result_desktop .wrong .subject .cont li .layer .testtag{margin-bottom: 0px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;} #wrap #mocktest .result_desktop .wrong .subject .cont li .layer .testtag::-webkit-scrollbar { display: none; } #wrap #mocktest .result_desktop .wrong .subject .cont li .layer .testtagbox{ padding: 5px 10px; border-radius: 5px; background: #f1f1f1; justify-content: center; align-items: center; display: flex; margin-right: 10px;;font-size:1.2rem} #wrap #mocktest .result_desktop .wrong .subject .cont li .layer > ul{display:flex;flex-wrap:wrap;gap:10px;} #wrap #mocktest .result_desktop .wrong .subject .cont li .layer > ul li{display:flex;align-items:center;justify-content:center;padding: 5px 10px;font-size: 12px;font-weight: 500;} #wrap #mocktest .result_desktop .wrong .subject .cont li .layer > ul li .testnum{width: 80px;font-weight: 600;} #wrap #mocktest .result_desktop .wrong .subject .cont li .layer > ul li .testquestion{width: calc( 100% - 80px );} #wrap #mocktest .result_desktop .wrong .subject .cont li .layer > ul li .testquestiontext{display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: left;cursor: pointer;font-weight: 400;} #wrap #mocktest .result_desktop .wrong .idea{margin:0 0 20px;} #wrap #mocktest .result_desktop .wrong .idea .tag{display:flex;overflow-x:auto;gap:10px;margin:0 0 20px;} #wrap #mocktest .result_desktop .wrong .idea .tag{-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */} #wrap #mocktest .result_desktop .wrong .idea .tag::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/} #wrap #mocktest .result_desktop .wrong .idea .tag a{display:flex;align-items:center;justify-content:center;white-space:nowrap;height:30px;padding:8px;font-size:12px;font-weight:500;color:#333333;background:#f1f1f1;border-radius:5px;} #wrap #mocktest .result_desktop .wrong .idea .list{} #wrap #mocktest .result_desktop .wrong .idea .list ul{} #wrap #mocktest .result_desktop .wrong .idea .list li{padding:5px 0;border-bottom: 1px solid #e0e0e0;} #wrap #mocktest .result_desktop .wrong .idea .list li a{display:flex;align-items:center;height:30px;gap: 25px;} #wrap #mocktest .result_desktop .wrong .idea .list li a strong{white-space:nowrap;font-size:12px;font-weight:bold;color:#333;flex-shrink:0;} #wrap #mocktest .result_desktop .wrong .idea .list li a span{flex:1;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;font-size: 12px;font-weight: 500;} #wrap #mocktest .result_desktop .wrong .idea .list li.oo a strong{color:var(--main-color);} #wrap #mocktest .result_desktop .wrong .idea .list li.xx a strong{color:#FA897B} } @media (max-width:1200px) { #wrap #learn .learn_new .list_wrap{overflow-x: scroll;display:flex;margin:0 0 50px 0;flex-direction: row; scrollbar-width: none; /* Firefox용 */-ms-overflow-style: none;} #wrap #learn .learn_new .list_wrap::-webkit-scrollbar {display: none;} } @media screen and (min-width: 900px) { #wrap #exam_ready{} #wrap #exam_ready .exam_ready{padding: 70px 0 0 0;margin: 0 auto;width: 958px;max-width: 100%;} #wrap #exam_ready .exam_ready .title_wrap{margin: 0 0 20px;padding: 0 0 10px;border-bottom: 1px solid #333;line-height: 30px;font-size: 24px;font-weight: bold;color: #333;} #wrap #exam_ready .exam_ready .exam_wrap{margin: 0 0 10px;display: flex;align-items: center;justify-content: flex-end;gap: 30px;} #wrap #exam_ready .exam_ready .exam_wrap .cont{width: 300px;flex-shrink: 0;} #wrap #exam_ready .exam_ready .exam_wrap .info{margin: 0 0 68px;} #wrap #exam_ready .exam_ready .exam_wrap .info li{margin: 0 0 20px;display: flex;} #wrap #exam_ready .exam_ready .exam_wrap .info li:last-child{margin:0;} #wrap #exam_ready .exam_ready .exam_wrap .info dl{flex: 1;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;} #wrap #exam_ready .exam_ready .exam_wrap .info dt{margin: 0 0 5px;line-height: 20px;font-size: 20px;color: #333;} #wrap #exam_ready .exam_ready .exam_wrap .info dd{line-height: 33px;font-size: 24px;font-weight: bold;color: #333;} #wrap #exam_ready .exam_ready .exam_wrap .info dd span{display:block;} #wrap #exam_ready .exam_ready .exam_wrap .tip{margin: auto 0 0 0;} #wrap #exam_ready .exam_ready .exam_wrap .tip strong{display: block;line-height: 24px;font-size: 20px;color: #333;font-weight: 400;} #wrap #exam_ready .exam_ready .exam_wrap .tip span{display: block;line-height: 24px;font-size: 20px;color: #333;font-weight: 400;} #wrap #exam_ready .exam_ready .exam_wrap .banner{flex: 1;width: 100%;height: 480px;} #wrap #exam_ready .exam_ready .exam_wrap .banner a{} #wrap #exam_ready .exam_ready .exam_wrap .banner a img{display: block;width: 100%;height: 100%;object-fit: cover;} #wrap #exam_ready .exam_ready .button_wrap{display: flex;align-items: center;justify-content: flex-end;position: absolute;bottom: 12%;right: 10%;} #wrap #exam_ready .exam_ready .button_wrap a{display: flex;align-items: center;justify-content: center;min-width: 140px;height: 40px;padding: 12px;border-radius: 5px;background: var(--main-color);color: #fff;line-height: 19px;font-size: 16px;font-weight: bold;} } @media screen and (max-width: 900px) { /**/ #wrap #exam_ready{} #wrap #exam_ready .exam_ready{padding: 80px 45px 0;margin: 0 auto;width: 958px;max-width: 100%;} #wrap #exam_ready .exam_ready .title_wrap{margin: 0 0 40px;padding: 0 0 10px;border-bottom: 1px solid #333;line-height: 30px;font-size: 16px;font-weight: bold;color: #333;} #wrap #exam_ready .exam_ready .exam_wrap{margin: 0 0 38px;display: flex;align-items: center;justify-content: flex-end;gap: 30px;flex-direction: column;} #wrap #exam_ready .exam_ready .exam_wrap .cont{width: 300px;flex-shrink: 0;} #wrap #exam_ready .exam_ready .exam_wrap .info{margin: 0 0 68px;} #wrap #exam_ready .exam_ready .exam_wrap .info li{margin: 0 0 20px;display: flex;} #wrap #exam_ready .exam_ready .exam_wrap .info li:last-child{margin:0;} #wrap #exam_ready .exam_ready .exam_wrap .info dl{flex: 1;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;} #wrap #exam_ready .exam_ready .exam_wrap .info dt{margin: 0 0 5px;line-height: 20px;font-size: 20px;color: #333;} #wrap #exam_ready .exam_ready .exam_wrap .info dd{line-height: 33px;font-size: 24px;font-weight: bold;color: #333;} #wrap #exam_ready .exam_ready .exam_wrap .info dd span{display:block;} #wrap #exam_ready .exam_ready .exam_wrap .tip{margin: auto 0 0 0;} #wrap #exam_ready .exam_ready .exam_wrap .tip strong{display: block;line-height: 24px;font-size: 20px;color: #333;font-weight: 400;} #wrap #exam_ready .exam_ready .exam_wrap .tip span{display: block;line-height: 24px;font-size: 20px;color: #333;font-weight: 400;} #wrap #exam_ready .exam_ready .exam_wrap .banner{flex: 1;width: 100%;height: 480px;display: none;} #wrap #exam_ready .exam_ready .exam_wrap .banner a{} #wrap #exam_ready .exam_ready .exam_wrap .banner a img{display: block;width: 100%;height: 100%;object-fit: cover;} #wrap #exam_ready .exam_ready .button_wrap{display: flex;align-items: center;justify-content: flex-end;} #wrap #exam_ready .exam_ready .button_wrap a{display: flex;align-items: center;justify-content: center;min-width: 140px;height: 40px;padding: 12px;border-radius: 5px;background: var(--main-color);color: #fff;line-height: 19px;font-size: 16px;font-weight: bold;} } @media screen and (max-width: 900px) { /**/ #wrap #learn .learn_new{padding: 80px 0 0 0;} #wrap #learn .learn_new .banner_wrap{background: #333;margin: 0 0 30px 0;} #wrap #learn .learn_new .banner_wrap a{display:flex;width:100%;height: 125px;margin:0 auto;} #wrap #learn .learn_new .banner_wrap a img{display:block;width:100%;height:100%;object-fit:contain} #wrap #learn .learn_new .search_wrap{margin: 0 0 30px;padding: 0 30px;display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .search_wrap .input{margin: 0 auto;padding: 7px 10px;width: 100%;height: 44px;border-radius: 44px;border: 3px solid var(--main-color);display: flex;align-items: center;justify-content: center;overflow: hidden;} #wrap #learn .learn_new .search_wrap .input input{width: 100%;height: 44px;flex: 1;align-items: center;justify-content: center;display: flex;padding: 0 15px;line-height: 19px;font-size: 16px;color: #808080;} #wrap #learn .learn_new .search_wrap .input button{width: 80px;height: 30px;background: var(--main-color);border-radius: 30px;display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .search_wrap .input button img{width:auto;height:24px;object-fit:contain} #wrap #learn .learn_new .quick_wrap{position: relative;margin: 0 0 30px;padding: 0 20px;overflow: hidden;} #wrap #learn .learn_new .quick_wrap ul{} #wrap #learn .learn_new .quick_wrap li{} #wrap #learn .learn_new .quick_wrap li a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;min-width: 65px;} #wrap #learn .learn_new .quick_wrap li a img{height:40px;width:40px;object-fit:contain} #wrap #learn .learn_new .quick_wrap li a p{line-height:20px;font-size:16px;font-weight:bold;color:#333;white-space: nowrap;} #wrap #learn .learn_new .quick_wrap .prev{position:absolute;z-index: 11;top:50%;left: 20px;transform:translateY(-50%);width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.1);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .quick_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .quick_wrap .next{position:absolute;z-index: 11;top:50%;right: 20px;transform:translateY(-50%);width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.1);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .quick_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .quick_wrap .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new .list_wrap{display:flex;margin: 0 0 30px 0;padding: 0 20px;flex-direction: column;} #wrap #learn .learn_new .list_wrap .list{} #wrap #learn .learn_new .list_wrap .list + .list{margin-top: 20px;display: flex; justify-content: center;} #wrap #learn .learn_new .list_wrap .list01{flex-shrink:0;position: relative;position:relative;background: #fff;} #wrap #learn .learn_new .list_wrap .list01 .img{height:250px;} #wrap #learn .learn_new .list_wrap .list01 .img img{width:100%;height:100%;object-fit:contain;} #wrap #learn .learn_new .list_wrap .list01 .btn{position:absolute;bottom:0;left:0;width:100%;padding:20px;display:flex;gap:10px;} #wrap #learn .learn_new .list_wrap .list01 .btn a{max-width: 120px; flex: 1;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 5px;line-height: 19px;font-size: 12px;font-weight: 400;color: #333;height: 40px;border: 1px solid #EBEBEB;} #wrap #learn .learn_new .list_wrap .list01 .btn a:hover{background:#fafafa;} #wrap #learn .learn_new .list_wrap .list02{flex:1;} #wrap #learn .learn_new .list_wrap .list02 ul{display:flex;gap: 10px;background: #f1f1f1;padding: 10px;} #wrap #learn .learn_new .list_wrap .list02 li{flex:1;} #wrap #learn .learn_new .list_wrap .list02 .img{background:#ebebeb;margin: 0 0 10px;display: none;} #wrap #learn .learn_new .list_wrap .list02 .tit{line-height: 24px;font-size: 16px;font-weight: 400;color: #398ED3;display: flex;align-items: center;justify-content: center;background-color: #E5F1FE; width: 80px; height: 40px;border-radius: 5px;} #wrap #learn .learn_new .list_wrap .list02 .txt{margin: 16px 0 0;display: flex;align-items: center;justify-content: flex-end;gap: 10px;display: none;} #wrap #learn .learn_new .list_wrap .list02 .txt span{display: flex;align-items: center;justify-content: center;gap: 5px;line-height: 20px;font-size: 12px;color: #808080;} #wrap #learn .learn_new .study_wrap{margin: 0 0 30px;padding: 0 20px;} #wrap #learn .learn_new .study_wrap .title{margin:0 0 20px;} #wrap #learn .learn_new .study_wrap .title .tit{line-height: 28px;font-size: 24px;font-weight:bold;color:#333} #wrap #learn .learn_new .study_wrap .title .txt{margin: 5px 0 0;line-height:19px;font-size:16px;color:#808080;} #wrap #learn .learn_new .study_wrap .list{position:relative;overflow:hidden;margin: 0 -20px;padding: 0 20px;} #wrap #learn .learn_new .study_wrap .list ul{} #wrap #learn .learn_new .study_wrap .list li{width: 60vw;max-width: 250px;} #wrap #learn .learn_new .study_wrap .list li .img{margin:0 0 10px;width:100%;height:150px;background:#ababab;} #wrap #learn .learn_new .study_wrap .list li .img img{display:block;width:100%;height:100%;object-fit:cover} #wrap #learn .learn_new .study_wrap .list li .tag{display:flex;overflow-x:auto;gap:10px;margin: 0 0 10px;} #wrap #learn .learn_new .study_wrap .list li .tag a{display:flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:5px;background:#f1f1f1;line-height:19px;font-size: 12px;font-weight:500;color:#808080} #wrap #learn .learn_new .study_wrap .list li .tit{line-height: 19px;font-size: 16px;font-weight: bold;color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin: 0 0 10px;} #wrap #learn .learn_new .study_wrap .list li .con{display: flex;align-items: center;justify-content: end;gap: 5px;margin: 0 0 5px;} #wrap #learn .learn_new .study_wrap .list li .con img{width: 20px;height: 20px;border-radius: 50%;overflow: hidden;object-fit: cover;} #wrap #learn .learn_new .study_wrap .list li .con p{line-height: 19px;font-size: 16px;color: #808080;} #wrap #learn .learn_new .study_wrap .list li .txt{display: flex;align-items: center;justify-content: flex-end;gap: 10px;} #wrap #learn .learn_new .study_wrap .list li .txt span{display: flex;align-items: center;justify-content: center;gap: 5px;line-height: 20px;font-size: 12px;color: #808080;} #wrap #learn .learn_new .study_wrap .prev{position:absolute;z-index: 11;top: 50%;left: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;transform: translateY(-50%);} #wrap #learn .learn_new .study_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .study_wrap .next{position:absolute;z-index: 11;top: 50%;right: 10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;transform: translateY(-50%);} #wrap #learn .learn_new .study_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .study_wrap .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new .board_wrap{margin: 0 0 30px;padding: 0 20px;display: flex;flex-direction: column;} #wrap #learn .learn_new .board_wrap .board{width: 100%;margin: 0 0 30px;padding: 20px 10px;border-radius: 15px;background: #f5f5f7;} #wrap #learn .learn_new .board_wrap .board .title{display: flex;align-items: center;justify-content: space-between;margin: 0 0 10px;} #wrap #learn .learn_new .board_wrap .board .title .tit{line-height: 1;font-size: 16px;font-weight: bold;color: #333;padding: 10px;} #wrap #learn .learn_new .board_wrap .board .title .day{display: flex;align-items: center;justify-content: center;gap: 6px;background: #ffffff;border: 1px solid #f1f1f1;box-shadow: 0 2px 2px rgba(0,0,0,0.25);padding: 10px 14px;height: 40px;border-radius: 10px;line-height: 20px;font-size: 12px;color: #333;} #wrap #learn .learn_new .board_wrap .board .list{position: relative;padding: 20px;min-height: 190px;border-radius: 15px;background: #fff;border: 1px solid #f1f1f1;box-shadow: 0 2px 2px rgba(0,0,0,0.25);} #wrap #learn .learn_new .board_wrap .board .list .tit{line-height: 20px;font-size: 12px;font-weight: bold;color: #333;margin: 0 0 10px;} #wrap #learn .learn_new .board_wrap .board .list .con{} #wrap #learn .learn_new .board_wrap .board .list .con ul{display: flex;flex-direction: column;gap: 5px;} #wrap #learn .learn_new .board_wrap .board .list .con li{} #wrap #learn .learn_new .board_wrap .board .list .con li a{display: block;line-height: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 12px;color: #333;} #wrap #learn .learn_new .board_wrap .board .list .con li a:before{content:'';margin: 8px 6px 0 0;width: 2px;height: 2px;border-radius:3px;background:#333;display: inline-flex;align-items: center;vertical-align: top;} #wrap #learn .learn_new .board_wrap .board .list .act{position: absolute;top: 20px;right: 20px;} #wrap #learn .learn_new .board_wrap .board .list .act a{display: flex;align-items: center;justify-content: center;padding: 4px 10px;line-height: 1;height: 20px;border-radius: 20px;background: var(--main-color);font-size: 12px;font-weight: bold;color: #fff;} #wrap #learn .learn_new .board_wrap .with{flex:1;max-width: 630px;} #wrap #learn .learn_new .board_wrap .with .tit{line-height: 33px;font-size: 28px;font-weight: bold;color: #333;margin: 0 0 10px;} #wrap #learn .learn_new .board_wrap .with .tit span{color: var(--main-color);} #wrap #learn .learn_new .board_wrap .with .txt{margin: 0 0 10px;line-height: 19px;font-size: 16px;font-weight: 600;color: #808080;} #wrap #learn .learn_new .board_wrap .with .con{position: relative;overflow: hidden;padding: 5px;margin: -5px;} #wrap #learn .learn_new .board_wrap .with .con ul{} #wrap #learn .learn_new .board_wrap .with .con li{} #wrap #learn .learn_new .board_wrap .with .con .info{padding:10px;border-radius:5px;box-shadow:0 0 6px rgba(0,0,0,0.1)} #wrap #learn .learn_new .board_wrap .with .con .info .user{display:flex;gap:10px;align-items:center;margin-bottom:10px;} #wrap #learn .learn_new .board_wrap .with .con .info .user img{width:30px;height:30px;border-radius:30px;object-fit:cover;overflow:hidden;object-position: center;} #wrap #learn .learn_new .board_wrap .with .con .info .text{line-height:19px;font-size:16px;font-weight:500;color:#333333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin: 0 0 12px;height: 57px;} #wrap #learn .learn_new .board_wrap .with .btn{margin: 10px 0 0 0;display: flex;gap: 5px;} #wrap #learn .learn_new .board_wrap .with .btn a{display: flex;align-items: center;justify-content: center;border-radius: 5px;border: 1px solid #ebebeb;height: 40px;padding: 4px 12px;line-height: 14px;font-size: 12px;font-weight: 600;color: #808080;} #wrap #learn .learn_new .board_wrap .with .btn a:hover{background:#fafafa} #wrap #learn .learn_new .board_wrap .prev{position:absolute;z-index: 11;top: 52px;left: -10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .board_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .board_wrap .next{position:absolute;z-index: 11;top: 52px;right: -10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .board_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .board_wrap .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new .growth_wrap{margin: 0 0 30px;padding: 0 20px;word-break: keep-all;} #wrap #learn .learn_new .growth_wrap .title{line-height:33px;font-size:28px;font-weight:bold;color:#333;margin: 0 0 30px;} #wrap #learn .learn_new .growth_wrap .list{position:relative;overflow: hidden;} #wrap #learn .learn_new .growth_wrap .list ul{} #wrap #learn .learn_new .growth_wrap .list li{display:flex;flex-direction:column;gap:10px;} #wrap #learn .learn_new .growth_wrap .list li a{display:flex;width:100%;} #wrap #learn .learn_new .growth_wrap .list li a img{display:block;width:100%;height:100%;object-fit: cover;} #wrap #learn .learn_new .growth_wrap .prev{position:absolute;z-index: 11;top: 52px;left: -10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .growth_wrap .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .growth_wrap .next{position:absolute;z-index: 11;top: 52px;right: -10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .growth_wrap .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .growth_wrap .swiper-button-disabled{visibility:hidden;} /**/ #wrap #study_detail{} #wrap #study_detail .study_detail{margin:0 auto;width:958px;max-width:100%;padding: 40px 20px;} #wrap #study_detail .study_detail .title{line-height: 30px;font-size: 28px;font-weight: bold;color: #333;margin:0 20px;padding-bottom: 10px;border-bottom: 1px solid #333;} #wrap #study_detail .study_detail .head{padding: 10px 0 0;display: flex;align-items: center;justify-content: space-between;line-height: 19px;font-size: 16px;font-weight: 500;color: #333;} #wrap #study_detail .study_detail .head .chapter{} #wrap #study_detail .study_detail .head .name{} #wrap #study_detail .study_detail .thumb{margin: 50px 0;display:flex;align-items:center;justify-content:center;background:rgb(51 51 51 / 50%);height: 300px;} #wrap #study_detail .study_detail .thumb img{display:block;width:auto;max-width:100%;height:100%;object-fit:contain} #wrap #study_detail .study_detail .cont{display:flex;align-items:stretch;justify-content:flex-start;gap: 64px;flex-direction:column;} #wrap #study_detail .study_detail .cont .lt-item{display:flex;flex-direction:column;width:100%;order: 2;} #wrap #study_detail .study_detail .cont .rt-item{display:flex;flex-direction:column;width:100%;order: 1;} #wrap #study_detail .study_detail .cont .info{margin:0 0 50px 0;padding:10px;border-radius:5px;box-shadow:0 0 6px rgba(0,0,0,0.1)} #wrap #study_detail .study_detail .cont .info .user{display:flex;gap:10px;align-items:center;margin-bottom:10px;} #wrap #study_detail .study_detail .cont .info .user img{width:30px;height:30px;border-radius:30px;object-fit:contain;overflow:hidden;} #wrap #study_detail .study_detail .cont .info .txt{line-height:19px;font-size:16px;font-weight:500;color:#333333} #wrap #study_detail .study_detail .cont .detail{display:flex;flex-direction:column;} #wrap #study_detail .study_detail .cont .detail img{width:auto;max-width:100%;height:auto} #wrap #study_detail .study_detail .cont .inner{border-radius:5px;border:1px solid #f1f1f1;overflow:hidden;padding: 0 0 120px;} #wrap #study_detail .study_detail .cont .status{background:var(--main-color);display:flex;align-items:center;justify-content:center;height:50px;font-size:20px;font-weight:bold;color:#ffffff;} #wrap #study_detail .study_detail .cont .option{position: relative;padding: 30px;} #wrap #study_detail .study_detail .cont .option:after{content:'';position:absolute;bottom:0;left:10px;right:10px;border-bottom:1px solid #ebebeb;} #wrap #study_detail .study_detail .cont .option .desc{margin: 0 0 30px;} #wrap #study_detail .study_detail .cont .option .tit{line-height:19px;font-size:16px;font-weight:500;color:#333;margin-bottom:10px;position: relative;} #wrap #study_detail .study_detail .cont .option .tit > a{position:absolute;top:50%;right:0;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;height:30px;min-width:80px;border-radius:5px;background:var(--main-color);font-size:13px;color:#ffffff;padding:2px 6px;} #wrap #study_detail .study_detail .cont .option .con{display:flex;flex-wrap:wrap;gap:10px;} #wrap #study_detail .study_detail .cont .option .con .checkbox{width:calc(50% - 5px)} #wrap #study_detail .study_detail .cont .option .con .checkbox input{display:none;} #wrap #study_detail .study_detail .cont .option .con .checkbox input ~ p{display:flex;align-items:center;justify-content:center;border-radius:5px;border:1px solid #f1f1f1;height:40px;font-size:12px;font-weight:500;color:#333;cursor:pointer} #wrap #study_detail .study_detail .cont .option .con .checkbox input:checked ~ p{background:var(--main-color);color:#ffffff;border-color:var(--main-color)} #wrap #study_detail .study_detail .cont .total{padding:20px 30px} #wrap #study_detail .study_detail .cont .total .tit{line-height: 24px;font-size: 20px;font-weight: bold;color: #333;margin: 0 0 30px;} #wrap #study_detail .study_detail .cont .total .con{display: flex;align-items: center;justify-content: flex-end;} #wrap #study_detail .study_detail .cont .total .con .per{margin: 0 auto 0 0;font-size: 24px;font-weight: bold;color: #e5503c;} #wrap #study_detail .study_detail .cont .total .con .ori{margin: 0 10px;font-size: 16px;font-weight: 500;color: #808080;text-decoration: line-through;} #wrap #study_detail .study_detail .cont .total .con .sal{font-size: 28px;font-weight: bold;color: #333;} #wrap #study_detail .study_detail .cont .agree{padding: 10px 20px;} #wrap #study_detail .study_detail .cont .agree ul{} #wrap #study_detail .study_detail .cont .agree li{display: flex;align-items: center;justify-content: space-between;} #wrap #study_detail .study_detail .cont .agree li + li{margin-top:10px;} #wrap #study_detail .study_detail .cont .agree li > label{display: flex;align-items: center;cursor: pointer;gap: 4px;} #wrap #study_detail .study_detail .cont .agree li > label input{display: none;} #wrap #study_detail .study_detail .cont .agree li > label input ~ i{position:relative;width: 14px;height: 14px;border-radius: 14px;border: 1px solid #00c4f1;} #wrap #study_detail .study_detail .cont .agree li > label input ~ p{font-size: 12px;font-weight: 500;color: #808080;} #wrap #study_detail .study_detail .cont .agree li > label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:6px;background:#00c4f1;transform:translate(-50%,-50%)} #wrap #study_detail .study_detail .cont .agree a{line-height: 14px;font-size: 12px;font-weight: 500;text-decoration: underline;color: #808080;} #wrap #study_detail .study_detail .cont .button{margin: 20px 30px 50px;display:flex;gap:10px;} #wrap #study_detail .study_detail .cont .button .btn{flex:1;display: flex;align-items: center;justify-content: center;height: 40px;padding: 5px;border-radius: 5px;line-height: 19px;font-size: 16px;font-weight: bold;border: 1px solid transparent;} #wrap #study_detail .study_detail .cont .button .btn_001{color: var(--main-color);border: 1px solid var(--main-color);background: #ffffff;} #wrap #study_detail .study_detail .cont .button .btn_002{color: #ffffff;border: 1px solid var(--main-color);background: var(--main-color);} #wrap #study_detail .study_detail .cont .refund{position: relative;padding: 20px 30px;} #wrap #study_detail .study_detail .cont .refund:before{content:'';position:absolute;top:0;left:10px;right:10px;border-bottom:1px solid #ebebeb;} #wrap #study_detail .study_detail .cont .refund .tit{line-height:14px;font-size:12px;font-weight:700;color:#333;margin:0 0 10px;} #wrap #study_detail .study_detail .cont .refund .txt{line-height:10px;font-size:8px;font-weight:500;color:#333} /**/ #wrap #study_select{display: flex; flex-direction: column; justify-content: space-between;} #wrap #study_select .study_select{padding: 80px 45px 0;margin: 0 auto;width: 958px;max-width: 100%;} #wrap #study_select .study_select .title_wrap{margin: 0 0 30px;padding: 0 0 10px;border-bottom: 1px solid #333;line-height: 30px;font-size: 20px;font-weight: bold;color: #333;display: flex; justify-content: space-between;} #wrap #study_select .study_select .select_wrap{margin: 0 auto;width: 300px;max-width: 100%;} #wrap #study_select .select_wrap .tip{ background: #f5f5ff; padding: 20px;line-height: 30px;border-radius: 20px;} #wrap #study_select .study_select .select_wrap .list{} #wrap #study_select .study_select .select_wrap .list .dnone{display:none;} #wrap #study_select .study_select .select_wrap dl{margin: 0 0 20px;} #wrap #study_select .study_select .select_wrap dl:last-child{margin:0;} #wrap #study_select .study_select .select_wrap dt{line-height: 19px;font-size: 16px;color: #808080;margin: 0 0 10px;} #wrap #study_select .study_select .select_wrap dd{} #wrap #study_select .study_select .select_wrap dd > .selectBtn{position:relative;width: 100%;height: 50px;padding: 12px 20px;border-radius: 5px;background: #f1f1f1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 24px;font-size: 16px;font-weight: 500;color: #333;text-align: left;} #wrap #study_select .study_select .select_wrap dd > .selectBtn:after{content:'';position:absolute;top:10px;right:10px;width:30px;height:30px;background:url("../img/ico-dropdown.png") no-repeat 50% 50%;transform: rotate(-90deg);} #wrap #study_select .study_select .select_wrap dd > .selectBtn.selectDisabled{color:#808080;pointer-events:none;} #wrap #study_select .study_select .select_wrap dd > .selectBtn.selectDisabled:after{display:none;} #wrap #study_select .study_select .select_wrap dd > .selectBtn.on:after{} #wrap #study_select .study_select .select_wrap dd > .selectBox{position: fixed;z-index: 1004;top:50%;left:50%;width:300px;height:auto;max-height:510px;border-radius:30px;background:#ffffff;transform: translate(-50%,-50%);display: flex;flex-direction: column;display: none;overflow: hidden;} #wrap #study_select .study_select .select_wrap dd > .selectBox.on{display:flex;} #wrap #study_select .study_select .select_wrap dd > .selectBox .tit{padding:20px;background:#ffffff;position:sticky;top:0;text-align: center;line-height: 19px;font-size: 16px;color: #808080;} #wrap #study_select .study_select .select_wrap dd > .selectBox .con{padding: 0 30px 10px;height:100%;overflow:hidden;overflow-y:auto;} #wrap #study_select .study_select .select_wrap dd > .selectBox .con{-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */} #wrap #study_select .study_select .select_wrap dd > .selectBox .con::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/} #wrap #study_select .study_select .select_wrap dd > .selectBox ul{gap: 10px;display:flex;flex-direction:column;} #wrap #study_select .study_select .select_wrap dd > .selectBox li{} #wrap #study_select .study_select .select_wrap dd > .selectBox li a{display: flex;align-items: center;justify-content: center;width: 100%;height: 34px;text-align: center;font-size: 16px;font-weight: 500;color: #333;border-radius:10px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} #wrap #study_select .study_select .select_wrap dd > .selectBox li a:hover{background:#fafafa} #wrap #study_select .study_select .note_cnt {font-size: 12px;font-weight: 400;background-color: #f1f1f1;color: #31B584;padding: 2px 7px;margin-left: 5px;border-radius: 10px;height: 24px;line-height: 20px;} #wrap #study_select .study_select .select_wrap .tip{margin-top:20px;line-height: 25px;font-size:16px;font-weight:400;color:#333;} #wrap #study_select .study_select .select_bg{position:fixed;top:0;left:0;width:100%;height:100%;background:#333;opacity:0.3;z-index: 1003;display: none;} #wrap #study_select .study_select .select_bg.on{display:block;} #wrap #study_select .study_select .button_wrap{ display: flex;align-items: center;justify-content: flex-end;gap: 10px 20px;margin: 30px 0 20px 0;flex-wrap: wrap; position: relative; bottom: 10%; right: 0; width: 100%;} #wrap #study_select .study_select .button_wrap a{max-width: 200px; position: relative;display: flex;align-items: center;justify-content: center;min-width: 140px;height: 40px;padding: 12px;border-radius: 5px;background: var(--main-color);color: #fff;line-height: 19px;font-size: 16px;font-weight: bold;width: calc(50% - 10px);} #wrap #study_select .study_select .button_wrap a p{position:absolute;bottom: 50px;left:50%;transform:translateX(-50%);padding:8px;border-radius:5px;background:#ebebeb;line-height:14px;font-size:12px;font-weight:500;color:#333;text-align:center;white-space:nowrap;transition:all 0.2s;opacity:0;visibility:hidden} #wrap #study_select .study_select .button_wrap a p:after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border-top:8px solid #ebebeb;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:0;} #wrap #study_select .study_select .button_wrap a:focus p{opacity:1;visibility:visible} /**/ #wrap #certi{} #wrap #certi .certi{padding: 50px 15px 0;} #wrap #certi .certi .certi_wrap{display:flex;flex-direction:column;width: 863px;max-width:100%;margin:0 auto;} #wrap #certi .certi .with{flex:1;max-width:500px;padding: 20px;} #wrap #certi .certi .with .tit{margin:0 0 10px;line-height: 34px;font-size: 28px;font-weight:bold;color:#333;} #wrap #certi .certi .with .tit span{color:var(--main-color);} #wrap #certi .certi .with .txt{margin: 0 0 50px;line-height: 19px;font-size: 16px;font-weight:600;color:#808080;} #wrap #certi .certi .with .con{} #wrap #certi .certi .with .con a{} #wrap #certi .certi .with .con a img{display:block;width:100%;height:auto;object-fit:contain;height: 300px;} #wrap #certi .certi .button{display:flex;flex-direction:column;gap: 10px;flex-shrink:0;width: 100%;padding: 20px; max-width: 500px; margin: 0 auto;} #wrap #certi .certi .button a{position:relative;display:flex;padding: 12px 20px;border-radius:10px;border:1px solid #E2E8F0;;line-height: 24px;font-size: 20px;font-weight:500;color:#333;align-items:center;justify-content:flex-start;text-align:left;height: 50px;} #wrap #certi .certi .button a:after{content:'';position:absolute;top: 10px;right:10px;width:30px;height:30px;background:url("../img/ico-dropdown.png") no-repeat 50% 50%;transform:rotate(-90deg)} #wrap #certi .certi_form{padding: 80px 45px 0;} #wrap #certi .title_wrap{margin: 0 0 22px;padding: 0 0 10px;border-bottom: 1px solid #333;line-height: 30px;font-size: 28px;font-weight: bold;color: #333;} #wrap #certi .form_wrap{margin: 0 auto;width: 100%;max-width: 100%;} #wrap #certi .form_wrap .form{margin: 0 0 30px;} #wrap #certi .form_wrap .form dl{margin: 0 0 20px;} #wrap #certi .form_wrap .form dl:last-child{margin:0;} #wrap #certi .form_wrap .form dt{margin: 0 0 10px;} #wrap #certi .form_wrap .form dt .tit{line-height: 24px;font-size: 20px;font-weight: bold;color: #333;} #wrap #certi .form_wrap .form dt .txt{margin: 5px 0 0;line-height: 14px;font-size: 12px;color: #808080;} #wrap #certi .form_wrap .form dd{} #wrap #certi .form_wrap .form dd .inp{display: flex;width: 100%;border-radius: 5px;background: #f1f1f1;} #wrap #certi .form_wrap .form dd .inp button{width: 100%;height: 50px;padding: 10px 20px;display: flex;align-items: center;justify-content: flex-start;font-size: 16px;font-weight: 500;color: #808080;} #wrap #certi .form_wrap .form dd .inp input[type="file"]{display: none;} #wrap #certi .form_wrap .form dd .inp input[type="file"] ~ p{width: 100%;height: 50px;padding: 10px 20px;display: flex;align-items: center;justify-content: flex-start;font-size: 16px;font-weight: 500;color: #808080;cursor: pointer;} #wrap #certi .form_wrap .form dd textarea{width:100%;height:100px;border-radius:5px;padding:15px;border:1px solid #333} #wrap #certi .form_wrap .tip{line-height:1.2;font-size:20px;color:#333;} #wrap #certi .button_wrap{display: flex;align-items: center;justify-content: flex-end;gap: 20px;margin: 60px 0 0 0;} #wrap #certi .button_wrap a{display: flex;align-items: center;justify-content: center;min-width: 140px;height: 40px;padding: 12px;border-radius: 5px;background: var(--main-color);color: #fff;line-height: 19px;font-size: 16px;font-weight: bold;} #wrap #certi .certi_popup{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;background:rgba(0,0,0,0.3);z-index:1004;align-items: center;justify-content: center;opacity:0;visibility:hidden} #wrap #certi .certi_popup.on{opacity:1;visibility:visible;} #wrap #certi .certi_popup .certi_popup_box{width:300px;border-radius:15px;background:#fff;padding:25px 30px;text-align: center;} #wrap #certi .certi_popup .certi_popup_box .tit{margin: 25px 0 10px;line-height: 19px;font-size: 16px;font-weight: bold;color: #333;} #wrap #certi .certi_popup .certi_popup_box .txt{line-height: 14px;font-size: 12px;color: #808080;} #wrap #certi .certi_popup .certi_popup_box .act{margin: 50px 0 0 0;} #wrap #certi .certi_popup .certi_popup_box .act a{display: flex;align-items: center;justify-content: center;width: 100%;height: 30px;border-radius: 5px;background: var(--main-color);font-size: 12px;color: #fff;} } /* 마이노트 추가건 css */ #new_mynote{margin: 30px auto; max-width: 640px; } #mynote_top_head {width: 100%; display: flex; align-items: center; justify-content: space-between;} #mynote_top_head > hgroup > p.txt{margin: 5px 0 0; line-height: 19px; font-size: 16px; color: #808080;} #new_mynote > .form_search > .form {width: 100%; margin: 30px 0 0 0;} #new_mynote > .form_search > .form > form{height: 50px; border-radius: 30px; padding: 0 30px; border: 2px solid var(--main-color); align-items: center; display: flex; justify-content: space-between;} #new_mynote > .form_search > .form > form > input[type="text"]{flex: 1; font-size: 16px; color: #333; height: 100%; padding: 0; border-radius: 10px;} #new_mynote > .form_search > .form > form > #search_btn {width: 35px; height: 35px;} #mynote .mynote .head .cate{padding-bottom: 2px;} #mynote .mynote .head .cate li a{background-color: #f1f1f1; box-shadow: 0 1px 1px #00000024; height: 30px; border: solid 1px #f1f1f1; color: #808080;} #mynote .mynote .head .cate li a.on{background-color: #f1f1f1; } #mynote .mynote .cont .list li .delete a{padding: 3px 10px 3px 40px; background: linear-gradient(270deg, #ffffff 60%, #ffffff91);} #mynote_category{margin-top: 30px;} #mynote_category > ul {margin-top: 20px;} #mynote_category > ul > li{border: solid 1px #E2E8F0; margin-top: 6px; border-radius: 12px; padding: 15px 20px; box-shadow: 0 2px 2px #F1F5F9;} #mynote_category > ul > li > a, #mynote_category > ul > li > a > .category_img_box{display: flex; align-items: center; justify-content: space-between; } #mynote_category > ul > li > a > .category_img_box > img{width: 32px; height: 32px; margin-right: 15px; } #mynote_category > ul > li > a > .category_img_box > p {color: #333333; font-size: 16px;} #mynote_category > ul > li > a > div:nth-child(2){font-size: 14px; color: #808080;} #mynote_category > ul > li > a > .category_cnt{display: flex; align-items: center; justify-content: right;} #mynote_category > ul > li > a > .category_cnt > div{margin: 0 10px; display: flex; align-items: center; justify-content: center;} #mynote_category > ul > li > a > .category_cnt > div > img{background-color: none; width: 16px; margin-right: 5px;} #latest_save {margin: 50px auto 15px; max-width: 640px;} @media (min-width: 900px){ #new_mynote > .form_search > .form > form > .input { margin: 0 auto; width: 100%; max-width: 640px; padding: 6px; align-items: center; height: fit-content; font-size: 16px;} } @media (max-width: 900px){ #new_mynote{max-width: none; padding: 0px 30px 0px 30px;} #latest_save {max-width: none; padding:0 30px; } } /* 폴더 별 화면 - 분류진입시 css */ #myfolder{ max-width: 640px; width: 100%; padding-bottom: 50px; margin: 50px auto 50px;} #myfolder > #folder_top {display: flex; align-items: center; justify-content: space-between;} #myfolder > #folder_top > hgroup > div {display: flex; align-items: center; justify-content: space-between; margin-top: 15px;} #myfolder > #folder_top > hgroup > div > div:nth-child(1){border-right: solid 1px #D9D9D9; padding-right: 15px; margin-right: 15px;} #myfolder > #folder_top > hgroup > div > div > h3{color: #333333; font-size: 20px;} #myfolder > #folder_top > hgroup > div > div > p.txt, #myfolder > #myfolder_list > hgroup > p.txt{margin: 5px 0 0; line-height: 19px; font-size: 14px; color: #808080;} #myfolder > div:nth-child(2){ margin-top: 20px; height: 40px; line-height: 40px; text-align: center; background-color: #F1F1F1; border-radius: 5px;} #myfolder > div:nth-child(2) > button{color: #333333; width: 100%; height: 100%; font-size: 14px;} #myfolder > #myfolder_list{margin-top: 50px;} #myfolder > #myfolder_list > hgroup, #myfolder > #myfolder_list > ul > li , #myfolder > #myfolder_list > ul > li > div.edit_btn_wr{display: flex; align-items: center; justify-content: space-between ; text-align: right;} #myfolder > #myfolder_list > ul{margin-top: 10px;} #myfolder > #myfolder_list > ul > li {padding: 15px; position: relative; border-bottom: solid 1px #D0D0D0;} #myfolder > #myfolder_list > ul > li:nth-child(1){border-top: solid 1px #D0D0D0;} #myfolder > #myfolder_list > ul > li > div.flex-boxwr{display: flex; align-items: center; justify-content: left;} #myfolder > #myfolder_list > ul > li > div > a{width: 100%; max-width: 400px;} #myfolder > #myfolder_list > ul > li > div > a > div {width: 100%; min-width: 300px; display: flex; align-items: center; justify-content: left;} #myfolder > #myfolder_list > ul > li > div > a > div > .color_box{background: #ccc; margin-right: 15px; border-radius: 30px; width: 30px; height: 30px; display: block; } #myfolder > #myfolder_list > ul > li > div > a > div > p{width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;} #myfolder > #myfolder_list > ul > li > div > .folder_edit_wr{ width: 80%; height: 100%; background: linear-gradient(270deg, #ffffff 26%, transparent); text-align: right; position: absolute; right: 0; display: flex; align-items: center; justify-content: right; padding: 0 15px; } #myfolder > #myfolder_list > ul > li > div > .folder_edit_wr > button{margin-right: 10px;} #myfolder > #myfolder_list > ul > li > div > .folder_edit_wr > button.edit{color: #808080;} #myfolder_list .txt {color: #808080;} #myfolder_list button.edit {color: #808080; margin-right: 10px;} #myfolder_list button.del {color: #808080;} @media screen and (max-width: 767px) { #myfolder > #myfolder_list > ul > li > div > a{max-width: 180px;} #myfolder > #myfolder_list > ul > li > div > a > div{min-width: 200px;} #myfolder > #myfolder_list > ul > li > div > a > div > p{width: 65%;} } /* 분류 진입 시 - 폴더 만들기 모달 */ /* #make_folder_input{ display: block; line-height: 14px; font-size: 12px; font-weight: 500; color: #808080; width: 100%; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; margin: 0 0 15px; text-align: center; padding: 20px 0;} */ #edit_folder_name > .box > .flex_btn_wr{display: flex; align-items: center; justify-content: center; margin-top: 15px;} #edit_folder_name > .box > .flex_btn_wr > a{margin: 0 10px; color: #333; background-color: #F1F1F1;} #edit_folder_name > .box > .flex_btn_wr > a:nth-child(1){ color: #FA897B;} .new_layer_pop > div.box > strong{margin: 0 auto !important;} .new_layer_pop > div.box > .color_pick {display: flex; align-items: center; margin: 0 ; justify-content: space-between; padding: 20px 0 10px; border-bottom: solid 1px #ccc;} .new_layer_pop > div.box > .color_pick #fd2_name{text-align: end;} .new_layer_pop > div.box > .color_pick > label{display: block; font-size: 14px; font-weight: 600; color: #808080;} .new_layer_pop> div.box > div:nth-last-child(1){margin-top: 30px;} #makefolder > div.box > div > a{background-color: #F1F1F1; color: #333;} #delet_folder > div.box > a{background-color: #F1F1F1; color: #FA897B;} #makefolder #fd_name{text-align: end;width:80%} #makefolder .box .before_icon{margin: 10px 10px 10px 0;} @media (max-width: 900px){ #myfolder{max-width: none; padding: 30px 30px 30px 30px;} #myfolder > #myfolder_list > ul > li > a{max-width: 230px;} } /* 폴더 진입시 */ img.before_icon{width: 30px;} #folder_list_wr{max-width: 640px; height: 100vh; width: 100%; padding-bottom: 50px; margin: 50px auto 50px;} #folder_list_wr > hgroup{ display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 15px;} #folder_list_wr > hgroup > h2{width: 80%;} #folder_list_wr > hgroup > #list_edit_btn{color: #808080; background-color: #f1f1f1; padding: 4px 10px; border-radius: 10px;} #folder_list_wr > hgroup > #list_edit_btn::before{content: 'Edit'; color: #808080;} #folder_list_wr > hgroup > #list_edit_btn.active::before{content: 'Update'; display: inline-block; } #folder_list_wr > hgroup > h2 > span{display: inline-block; margin:5px 5px 5px 0; font-size: 16px; line-height: 1.35;} #folder_list_wr > hgroup > h2 > span#another_folder {background: #f1f1f1; padding: 4px 10px; border-radius: 10px; cursor: pointer; margin-left: 5px;} #folder_list_wr > hgroup > h2 > span#another_folder::after {content: ''; display: inline-block; width: 10px; height: 10px; background-image: url('../img/depth_icon.png'); background-size: contain; background-repeat: no-repeat; margin-left: 10px;} #folder_list_wr > hgroup > h2 > a.top_depth{color: #727272; font-weight: 500; font-size: 16px;} #folder_list_wr > hgroup > button{margin-top: 10px;} #folder_list_wr > #list_box_wr{padding-bottom: 180px} #folder_list_wr > #list_box_wr > li{border-top: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e0e0; position: relative; padding: 20px 0 ;} #folder_list_wr > #list_box_wr > li > div > a > p{line-height: 20px; font-size: 12px; font-weight: 400; color: #808080;} #folder_list_wr > #list_box_wr > li > div > a > h3{line-height: 1.3; font-size: 16px; font-weight: 600; color: #333; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 60px;} #folder_list_wr > #list_box_wr > li > .delet_check_box{width: 30%; display: none} #folder_list_wr > #list_box_wr > li > .delet_check_box.active{ display: flex; align-items: center; justify-content: right; width: 80%; right: 0; position: absolute; background: linear-gradient(270deg, #ffffff 25%, transparent); height: 100%;} #folder_list_wr > #list_box_wr > li > .delet_check_box > div button{margin: 0 10px 0 5px; color: #8c8c8c; } #folder_list_wr > #list_box_wr > li > div{display: flex; align-items: center; justify-content: left; padding-left: 15px;} .move_list_box.active{display: grid;} .move_list_box { width: auto; margin-right: 15px; height: 100%; background: linear-gradient(270deg, #FFFFFF 40%, transparent); display: none; align-items: center; justify-content: right;} .move_list_box > div {margin-right: 0;} .move_list_box > div span{width: 20px; height: 2px; background-color: #c7c7c7; display: block; border-radius: 10px; margin: 5px auto;} /* 폴더 진입시 - 모달 */ #mocktest_folder > div.box {text-align: left;} #athor_folder > div.box{text-align: left;} #my_list_ul{width: 100%; min-height: 200px; max-height: 350px; overflow: scroll;} #my_list_ul > li{display: flex; border-top: #D0D0D0 1px solid; align-items: center; justify-content: space-between; padding: 15px 10px;} #my_list_ul > li > a{ display: block; width: fit-content; height: auto; background: none; font-size: 12px; font-weight: bold; margin: 0; width: 100%;} #my_list_ul > li > a > div{display: flex; max-width: 200px; align-items: center; justify-content: left;} #my_list_ul > li > a > div > span{display: block; margin-right: 10px; border-radius: 30px; width: 30px; height: 30px; background-color: #ccc;} #my_list_ul > li > a > div > p{width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #my_list_ul p{margin: 0 0 0 0 ;} #my_list_ul .edit_btn_wr {width: 100%; text-align: end;} #my_list_ul::-webkit-scrollbar { width: 0;} #my_list_ul::-webkit-scrollbar-thumb, #my_list_ul::-webkit-scrollbar-track {background-color: #fff;} .layer-popup .box .create_folder_btn {display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; height: 40px; border-radius: 5px; margin-top: 0px; background-color: #f1f1f1; color: #333;} .my_folder_list {position: relative;} .my_folder_list > strong{margin: 0 0 10px !important;} .my_folder_list > .bg_blur{ width: 100%; height: 80px; background: linear-gradient(0deg, #ffffff 50%, transparent); position: absolute; bottom: 0;} #contetns_delet > div.box > a{background-color: #F1F1F1; color: #fa897b} .start_btn { max-width: 640px; width: 100%; height: 50px; position: fixed; bottom: 100px; margin: 0 auto; } .start_btn > a{ width: 200px; display: block; height: 40px; background-color: #f1f1f1; color: #333; position: absolute; bottom: 0; right: 0; border-radius: 5px; text-align: center; line-height: 40px;} @media (max-width: 900px){ #folder_list_wr{max-width: none; padding: 30px 30px 30px 30px;margin: 30px auto;} .start_btn{max-width: calc(100% - 60px);} } /* index_240827 */ #wrap #learn .learn_banner {position: relative;} #wrap #learn .learn_banner > div.search-ab {position: absolute; bottom: -21px; z-index: 99; left: 50%; right: 50%;} #wrap #learn .learn_banner > div.search-ab .search_wrap{margin: 0 0 50px;display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_banner > div.search-ab .search_wrap .input{margin: 0 auto;padding: 7px 10px;min-width: 561px;height: 44px;border-radius: 44px;border: 1px solid var(--main-color);display: flex;align-items: center;justify-content: center;overflow: hidden; background-color: #fff; box-shadow: 0 1px 5.6px #4f4f4f40;} #wrap #learn .learn_banner > div.search-ab .search_wrap .input input{width: 100%;height: 44px;flex: 1;align-items: center;justify-content: center;display: flex;padding: 0 40px;line-height: 19px;font-size: 16px;color: #808080;} #wrap #learn .learn_banner > div.search-ab .search_wrap .input button{width: 80px;height: 30px;background: var(--main-color);border-radius: 30px;display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_banner > div.search-ab .search_wrap .input button img{width:auto;height:24px;object-fit:contain} #wrap #learn .learn_new .quick_wrap2{position: relative;margin: 24px 0 48px;overflow: hidden;} #wrap #learn .learn_new .quick_wrap2 ul{justify-content: center;} #wrap #learn .learn_new .quick_wrap2 li{} #wrap #learn .learn_new .quick_wrap2 li a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;min-width: 65px;} #wrap #learn .learn_new .quick_wrap2 li a img{height:56px;width:56px;object-fit:contain} #wrap #learn .learn_new .quick_wrap2 li a p{line-height:20px;font-size:16px;font-weight:bold;color:#333;white-space: nowrap; margin-top: 8px;} #wrap #learn .learn_new .quick_wrap2 .prev{position:absolute;z-index: 11;top:50%;left: 0;transform:translateY(-50%);width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.1);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .quick_wrap2 .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .quick_wrap2 .next{position:absolute;z-index: 11;top:50%;right: 0;transform:translateY(-50%);width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.1);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .quick_wrap2 .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .quick_wrap2 .swiper-button-disabled{visibility:hidden;} #wrap #learn .learn_new > div.colum-box .d-day-wr{width: 100%; max-width: 900px; background-color: #f1f1f1; height: 50px; border-radius: 10px; text-align: center; margin: 0 auto 88px;} #wrap #learn .learn_new > div.colum-box .d-day-wr > p{line-height: 50px;} #wrap #learn .learn_new > div.colum-box .d-day-wr > p > img{width: 16px; height: 16px; display: inline-block; margin-right: 5px; object-fit: contain;} #wrap #learn .learn_new > div.colum-box .d-day-wr > p > span{background-color: rgba(251, 123, 4, 0.102); padding: 8px 16px; color: #FB7B04; border-radius: 10px; margin-left: 8px; font-weight: bold;} #wrap #learn .learn_new .study_wrap .flex-title{display: flex; align-items: center; justify-content: space-between; max-width: 900px; margin: 0 auto 25px;} #wrap #learn .learn_new .study_wrap .flex-title > .tit > span{color: #02C5FF;} #wrap #learn .learn_new .study_wrap .flex-title > .coupon-btn{color: #333333; border: solid 1px #808080; box-shadow: 0 1px 1px #00000040; border-radius: 10px; padding: 12px 8px;} #wrap #learn .learn_new .list_wrap .list03{width: 100%; max-width: 900px; margin: 0 auto ; } #wrap #learn .learn_new .list_wrap .list03 ul{display: flex; justify-content: space-between;} #wrap #learn .learn_new .list_wrap .list03 ul > li.problem01{width: 290px; padding-bottom: 32px; box-shadow: 0 1px 1px #00000040; border-radius: 5px;} #wrap #learn .learn_new .list_wrap .list03 ul > li.problem01 > div.imgbanner{width: 100%;} #wrap #learn .learn_new .list_wrap .list03 ul > li.problem01 > div.imgbanner > img{width: 100%;} #wrap #learn .learn_new .list_wrap .list03 ul > li.problem01 > p{padding-left: 20px; font-weight: bold; margin-top: 32px; line-height: 1.8;} #wrap #learn .learn_new .list_wrap .list03 ul > li.problem01 > p > span{font-weight: 300; color: #808080; font-size: 14px;} #wrap #learn .learn_new .board_wrap .with01{margin: 110px auto; flex:1; background-color: #F4F8F9; padding: 30px 150px; border-radius: 10px;} #wrap #learn .learn_new .board_wrap .with01 .tit{line-height: 33px; margin-bottom: 50px; font-size: 28px;font-weight: bold;color: #333;} #wrap #learn .learn_new .board_wrap .with01 .tit span{color: var(--main-color);} #wrap #learn .learn_new .board_wrap .with01 .con{position: relative;overflow: hidden;padding: 5px;margin: -5px; } #wrap #learn .learn_new .board_wrap .with01 .con .info{padding:18px 15px;border-radius:5px;box-shadow:0 0 6px rgba(0,0,0,0.1) ; background-color: #fff;} #wrap #learn .learn_new .board_wrap .with01 .con .info .user{display:flex;gap:10px;align-items:center;margin-top: 25px;} #wrap #learn .learn_new .board_wrap .with01 .con .info .user img{width:30px;height:30px;border-radius:30px;object-fit:cover;overflow:hidden;object-position: center;} #wrap #learn .learn_new .board_wrap .with01 .con .info .text{line-height:19px;font-size:16px;font-weight:300; line-height: 1.5; color:#808080;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;} #wrap #learn .learn_new .growth_wrap01{margin: 0 auto 130px; max-width: 900px;padding: 0 20px;word-break: keep-all;} #wrap #learn .learn_new .growth_wrap01 .title{line-height:33px;font-size:28px;font-weight:bold;color:#333;margin: 0 0 30px;} #wrap #learn .learn_new .growth_wrap01 .list{position:relative;overflow: hidden;} #wrap #learn .learn_new .growth_wrap01 .list ul{} #wrap #learn .learn_new .growth_wrap01 .list li{display:flex;flex-direction:column;gap:10px;} #wrap #learn .learn_new .growth_wrap01 .list li a{display:flex;width:100%;} #wrap #learn .learn_new .growth_wrap01 .list li a img{display:block;width:100%;height:100%;object-fit: cover;} #wrap #learn .learn_new .growth_wrap01 .prev{position:absolute;z-index: 11;top: 52px;left: -10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .growth_wrap01 .prev:before{content:'';width:30px;height:30px;background:url("../img/swiper_prev.png") no-repeat 50% 50%} #wrap #learn .learn_new .growth_wrap01 .next{position:absolute;z-index: 11;top: 52px;right: -10px;width:40px;height:40px;border-radius:40px;border:1px solid #f1f1f1;background: rgba(255,255,255,0.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;} #wrap #learn .learn_new .growth_wrap01 .next:before{content:'';width:30px;height:30px;background:url("../img/swiper_next.png") no-repeat 50% 50%} #wrap #learn .learn_new .growth_wrap01 .swiper-button-disabled{visibility:hidden;} .colum-box{display: flex; flex-direction: column; padding-bottom: 60px; margin-bottom: 100px; border-bottom: solid 2px #f4f4f4;} @media screen and (max-width: 900px) { .colum-box{ margin-bottom: 0; border-bottom: none; flex-direction: column;} #wrap #learn .learn_new > div.colum-box .d-day-wr{ order: 2; margin: 30px 20px 30px; width: auto; max-width: none;} #wrap #learn .learn_new .list_wrap .list03 ul{display: block;} #wrap #learn .learn_new .list_wrap .list03 ul > li.problem01{ display: flex; flex-direction: row; width: 100%; justify-content: space-around; align-items: center; padding: 25px 0; margin-bottom: 5px;} #wrap #learn .learn_new .list_wrap .list03 ul > li.problem01 > div{order: 2;} #wrap #learn .learn_new .list_wrap .list03 ul > li.problem01 > div.imgbanner{width: 50%;} #wrap #learn .learn_new .board_wrap .with01{ width: 100%; padding: 30px;} #wrap #learn .learn_banner > div.search-ab{bottom: -30px;} #wrap #learn .learn_banner > div.search-ab .search_wrap .input{min-width: 320px;} } /* index_240829.php : Style CSS 시작. */ /* Font : size*/ .title_lg{font-size: 30px; font-weight: 600; line-height: 120%;} .title_md{font-size: 26px; font-weight: 600; line-height: 120%;} .title_sm{font-size: 20px; font-weight: 600; line-height: 130%;} .text_lg{font-size: 18px; font-weight: 600; line-height: 140%;} .text_md{font-size: 18px; font-weight: 400; line-height: 140%;} .text_sm{font-size: 16px; font-weight: 400; line-height: 140%;} .text_xsm{font-size: 12px; font-weight: 300; line-height: 140%;} .caption{font-size: 14px; font-weight: 400; line-height: 140%;} /* Font : color*/ .f_333{color: #333;} .f_080{color: #808080;} .f_fff{color: #fff;} .f_5ff{color: #02C5FF;} .f_209{color: var(--main-color);} .f_ff8{color: #FF8484;} /* background: color */ .m_8ff {background-color: #61E8FF;} .m_cff {background-color: #00CFFF;} .m_7ff {background-color: var(--main-color);} .m_6ff {background-color: #0066FF;} .s_fff {background-color: #ffffff;} .s_1f1 {background-color: #F1F1F1;} .s_fbf {background-color: #fbfbfb;} .s_080 {background-color: #808080;} .s_333 {background-color: #333333;} .s_61e {background-color: #f4361e;} /* layout: max-width */ .w900{max-width: 900px; margin-left: auto; margin-right: auto;} .m25{margin-left: 25px; margin-right: 25px;} .m100{margin-bottom: 120px;} .t25{margin-top: 25px;} .t50{margin-top: 50px;} .t100{margin-top: 100px;} .t150{margin-top: 150px;} .p15{padding: 15px;} /* border */ .border_under{border-bottom: solid 3px #F8F8F8;} /* box-shadow */ .shadow-25{box-shadow: 0 1px 1px #00000040;} /* border-radius */ .radius-10{border-radius: 10px;} /* button */ .new_btn_style{background-color: #fff !important; border: solid 1px var(--main-color) !important; color: var(--main-color) !important; } .mo_btn{border: solid 1px #FF8484; color: #FF8484; font-size: 16px; border-radius: 10px; padding: 10px 15px; text-align: center;} .mo_btn_209{border: solid 1px var(--main-color); color: var(--main-color); font-size: 16px; border-radius: 10px; padding: 10px 15px; text-align: center;} @media screen and (max-width: 1200px) { } @media screen and (max-width: 900px) { .w900{max-width: none; width: 90%} .title_lg{font-size: 24px; font-weight: 600; line-height: 120%;} .title_md{font-size: 20px; font-weight: 600; line-height: 120%;} .title_sm{font-size: 16px; font-weight: 600; line-height: 130%;} .text_lg{font-size: 16px; font-weight: 600; line-height: 140%;} .text_md{font-size: 16px; font-weight: 400; line-height: 140%;} .text_sm{font-size: 14px; font-weight: 400; line-height: 140%;} .caption{font-size: 10px; font-weight: 400; line-height: 140%;} .m100{margin-bottom: 70px;} .t100{margin-top: 50px;} } /* index_240829.php */ #test_wrap{width: 100vw; max-width: 100vw; overflow-x: hidden !important; height: fit-content; min-width: 900px;} #test_wrap::-webkit-scrollbar {display: none;} #learn_list, #review_mymerci, #with_mymerci_logo{width: 100vw;} #new_top_banner > .search_absolute{position: absolute; width: 100%; height: 50px; bottom: -25px; z-index: 1;} #new_top_banner > .search_absolute > .search_wrap_02{max-width: 550px; padding:0 20px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; background-color: #fff; width: 100%; height: 50px; border-radius: 50px; border: solid 1px #02c5ff;} #new_top_banner > .search_absolute > .search_wrap_02 > img{width: 28px; height: 28px; } #new_top_banner > .search_absolute > .search_wrap_02 > form { width: 90%; display: flex; align-items: center; justify-content: space-between;} #new_top_banner > .search_absolute > .search_wrap_02 > form > input{width: 80%; height: 40px; padding: 10px; font-size: 16px;} #new_top_banner > .search_absolute > .search_wrap_02 > form > button {width: 40px;} #new_top_banner > .search_absolute > .search_wrap_02 > form > button > img{width: 30px; } #index_nav_wrap{width: 100vw; height: fit-content;} #index_nav_wrap > .index_nav_list{margin: 0 auto; height: fit-content;} #index_nav_wrap > .index_nav_list > ul{display: flex; align-items: center; justify-content: left; } #index_nav_wrap > .index_nav_list > ul > li{ width: 60px; height: fit-content; } #index_nav_wrap > .index_nav_list > ul > li > a {text-align: center;} #index_nav_wrap > .index_nav_list > ul > li > a > img{width: 56px; height: 56px; display: block; margin: 0 auto 10px;} #index_nav_wrap >.index_content_banner > .title_group{display: flex; align-items: center; justify-content: space-between;} #index_nav_wrap >.index_content_banner > .title_group > .coupon-btn-wrap{width: fit-content; height: fit-content; text-align: center; line-height: 30px; border: solid 1px #808080; padding: 3px 10px;} #index_nav_wrap >.index_content_banner > .banner_group > ul{display: flex; align-items: center; justify-content: left} #index_nav_wrap >.index_content_banner > .banner_group > ul > li{width: 290px; height: 340px; border: solid 1px #E2E8F0; margin: 0 5px;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li > div.imgbanner{width: 290px;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li > div.imgbanner > img{width: 100%; border-radius: 10px 10px 0 0;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li > p{padding: 20px 15px;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li > div.banner-content{padding: 10px;} #index_nav_wrap > .d-day-wr{width: 100%;} #index_nav_wrap > .d-day-wr > p{ margin: 0 auto; text-align: center;} #index_nav_wrap > .d-day-wr > p > img{width: 24px; height: 24px; } #index_nav_wrap > .d-day-wr > p > span{background-color: #fb7b042e; font-weight: 600; margin-left: 5px; border-radius: 5px; color: #FB7B04; padding: 8px 10px;} #learn_list > .list_contents > ul {display: flex; align-items: center; justify-content: left;} #learn_list > .list_contents > ul > li{width: fit-content !important;} #learn_list > .list_contents > ul > li > a{display: block; width: 250px; height: 350px; background-color: #ccc; overflow: hidden; position: relative;} #learn_list > .list_contents > ul > li > a > img{ width: 100%; object-fit: contain;} #learn_list > .list_contents > ul > li > a > .under_contents{ position: absolute; display: grid; width: 100%; height: 100%; z-index: 1; bottom: 0; background: linear-gradient(0deg, #000000e0, transparent); grid-template-rows: auto 1fr auto;} #learn_list > .list_contents > ul > li > a > .under_contents > .top_keyword{align-self: start;} #learn_list > .list_contents > ul > li > a > .under_contents > .top_keyword > span{padding: 5px 10px; background-color: #F0F4FA; color: #919CAB; box-shadow: 1px 1px 0 #00000040; margin-right: 5px;} #learn_list > .list_contents > ul > li > a > .under_contents > .under_title{align-self: end;} #learn_list > .list_contents > ul > li > a > .under_contents > .under_title > h4{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 15px;} #learn_list > .list_contents > ul > li > a > .under_contents > .under_title > p > span{margin-right: 8px;} #learn_list > .list_contents > ul > li > a > .under_contents > .under_title > p > span > img{width: 20px; height: 20px; margin-right: 5px;} #review_mymerci .with01{ background-color: #F4F8F9; padding: 30px 0 50px;} #review_mymerci .with01 .con{position: relative;overflow: hidden; } #review_mymerci .with01 .con .info{padding:18px 15px;border-radius:5px;box-shadow:0 0 6px rgba(0,0,0,0.1) ; background-color: #fff;} #review_mymerci .with01 .con .info .user{display:flex;gap:10px;align-items:center;margin-top: 25px;} #review_mymerci .with01 .con .info .user img{width:30px;height:30px;border-radius:30px;object-fit:cover;overflow:hidden;object-position: center;} #review_mymerci .with01 .con .info .text{ display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;} #with_mymerci_logo > .with_logo_slide{overflow: hidden;} #with_mymerci_logo > .with_logo_slide > ul > li > a img{width: 100%;} /* 모달 */ #test_wrap .modal-container{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;display:none;z-index: 1003;background:rgba(0,0,0,0.5)} #test_wrap .modal-container.show{display:block} #test_wrap .modal-container .modal-wrapper{border-radius: 5px;display:flex;flex-direction:column;background:#ffffff;padding: 30px;width: 300px;overflow: hidden;} @media screen and (max-width: 900px) { #test_wrap{min-width: 100vw;} #new_top_banner > .banner_wrap_img > .swiper-wrapper > .swiper-slide > img{width: 100%;} #new_top_banner > .search_absolute > .search_wrap_02{max-width: 60vw; } #index_nav_wrap > .index_nav_list > ul{justify-content: left;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li{width: calc(100% / 3 - 10px); height: 260px;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li > div.imgbanner{width: 100%; text-align: right;} #learn_list > .list_contents > ul > li > a{width: 200px; height: 300px;} #review_mymerci .with01 .con .info .text{ -webkit-line-clamp: 4;} #new_top_banner > .banner_wrap_img > .pagination-box{bottom: 15%;} } @media screen and (max-width: 767px) { #index_nav_wrap >.index_content_banner > .banner_group > ul{display: block;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li{ display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; padding:0 15px; height: 150px; margin-bottom: 5px;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li > p{order: 1; width: 50%; padding: 0 5px 0 0 ;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li > div.imgbanner{width: auto; height: 100%;} #index_nav_wrap >.index_content_banner > .banner_group > ul > li > div.imgbanner > img{ width: auto; height: 100%; object-fit: contain; padding: 10px 0;} } @media screen and (max-width: 480px) { #index_nav_wrap >.index_content_banner > .banner_group > ul > li > div.imgbanner{width: 50%; height: auto; } #index_nav_wrap >.index_content_banner > .banner_group > ul > li > div.imgbanner > img{ width: 100%; height: auto; padding: 0 0;} } #already_payment .button .btn {display: flex;align-items: center;justify-content: center;flex: 1;width: 100%;height: 40px;border-radius: 5px;margin-top: 20px;background-color: #f1f1f1;color: #333;} #already_payment .title {font-size: 20px;font-weight: 600;line-height: 120%;margin-bottom: 20px;} #already_payment .customer {margin-top: 20px; text-align: center;} #already_payment .customer a {font-size: 12px; color: #808080; margin-top: 20px; text-decoration: underline;} /* index_240829.php 새로 작업한 CSS 끝. */ /* header_240829 css 추가 시작 */ #new_header_wr {position: fixed; left: 0; top: 0; height: 70px; border-bottom: solid 1px #f4f4f4; width: 100vw; background-color: #fff; z-index: 999;} #new_header_wr > nav {display: flex; align-items: center; justify-content: space-between; height: 100%;} #new_header_wr > nav > .logo_mymerci{width: 160px;} #new_header_wr > nav > .logo_mymerci > img{width: 80%; object-fit: contain;} #new_header_wr > nav > .my_header_wr > a, #new_header_wr > nav > .my_header_wr{display: flex; align-items: center; justify-content: space-between;} #new_header_wr > nav > .my_header_wr > a > .name_wr > p:nth-child(1){font-size: 14px;} #new_header_wr > nav > .my_header_wr > a > .profile_wr{width: 40px; height: 40px; margin-left: 10px; overflow: hidden; border-radius: 999px;} #new_header_wr > nav > .my_header_wr > a > .profile_wr > img{width: 100%;} @media screen and (max-width: 767px){ #new_header_wr > nav > .logo_mymerci {width: 140px;} #new_header_wr > nav > .my_header_wr > a > .profile_wr{width: 30px; height: 30px; margin-left: 5px;} #new_header_wr > nav > .my_header_wr > a > .name_wr > p:nth-child(1){font-size: 12px;} #new_header_wr > nav > .my_header_wr > a > .name_wr > strong{font-size: 14px;} } /* mynote_new.php 검색 */ /* 이건 검색바 css 소스입니다 */ .search_wrap_02{max-width: 640px; padding:0 20px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; background-color: #fff; width: 100%; height: 50px; border-radius: 50px; border: solid 1px #2097ff;} .search_wrap_02 > img{width: 28px; height: 28px; } .search_wrap_02 > form { width: 90%; display: flex; align-items: center; justify-content: space-between;} .search_wrap_02 > form > input{width: 80%; height: 40px; padding: 10px;font-size: 16px;} .search_wrap_02 > form > button {width: 40px;} .search_wrap_02 > form > button > img{width: 30px; } /* 검색바 css 소스에서 마이노트 안에 검색바만 width, margin값 수정*/ #new_mynote > .search_wrap_02{width: 100%; margin: 30px 0 50px 0 ; max-width: none;} /*study_select_240831 */ .top_select_nav{ width: 210px; height: 35px; margin: 0 auto 50px; border-radius: 5px; background-color: #ebebeb; display: flex; align-items: center; justify-content: space-evenly;} .top_select_nav > span{font-size: 12px; display: inline-block; cursor: pointer; color: #808080; transition: .5s; text-align: center; line-height: 30px; width: 100px; height: 29px; border-radius: 5px;} .top_select_nav > span.active{color: #333; background-color: #fff; transition: .5s;} .wide_list_wr{width: 100%; height: fit-content; display: none;} .wide_list_wr.active{display: block} .wide_list_wr .study_list_box{border-bottom: solid 1px #808080; padding-bottom: 35px;} .wide_list_wr .study_list_box ul{display: flex; margin: 15px 0; align-items: center; flex-wrap: wrap; justify-content: space-between;} .wide_list_wr .study_list_box ul li{height: fit-content; user-select: none; position: relative; line-height: 25px;} .wide_list_wr .study_list_box ul li input[type="checkbox"] { display: none; } .wide_list_wr .study_list_box ul li label { position: relative; display: flex; align-items: center; cursor: pointer; } .wide_list_wr .study_list_box ul li label .text { margin-right: 10px; } .wide_list_wr .study_list_box ul li label .checkbox_mark { width: 25px; height: 25px; position: relative; background-color: #eeeeee; border-radius: 4px; margin-right: 10px; flex-shrink: 0;} .wide_list_wr .study_list_box ul li label .checkbox_mark::after {content: "";position: absolute; display: none;left: 10px; top: 5px;width: 5px; height: 10px; border-style: solid; border-color: white; border-width: 0 3px 3px 0; display: block; transform: rotate(45deg);} .wide_list_wr .study_list_box ul li input[type="checkbox"]:checked + label .checkbox_mark { background-color: var(--main-color);} .wide_list_wr .study_list_box ul li input[type="checkbox"]:checked + label .checkbox_mark::after { display: block;} .wide_list_wr .study_list_box ul#two_box_wr li{width: 50%; margin: 10px 0 0 0 ;} .study_number_wr{ width: 100%; background-color: #F5F5F5; padding: 20px; margin-top: 50px; border-radius: 10px;} .study_number_wr > h3 > span{margin: 0 15px;} .study_number_wr > .num_select_button{display: flex; margin-top: 25px; align-items: center; justify-content: left;} .study_number_wr > .num_select_button > .qty_num{margin-right: 70px; border-radius: 5px; border: solid 1px #808080; display: flex; align-items: center; justify-content: left; background-color: #fff; width: 150px; height: 40px;} .study_number_wr > .num_select_button > .qty_num > button{width: 40px; height: 40px; } .study_number_wr > .num_select_button > .qty_num > input{width: 70px; height: 40px; text-align: center; border: solid 1px #808080;} .study_number_wr > .num_select_button > .qty_num_controler {display: flex;} .study_number_wr > .num_select_button > .qty_num_controler > .qty_num_btn > button{border: solid 0.5px #808080; color: #808080; background-color: #fff; height: 40px; width: 40px; border-radius: 20px;} .study_number_wr > .num_select_button > .qty_num_controler > .min_max {margin-left: 10px;} .study_number_wr > .num_select_button > .qty_num_controler > .min_max > button{border: solid 0.5px #808080; color: #808080; background-color: #fff; height: 40px; width: 50px; border-radius: 5px;} #tab_list_study{display: none;} #tab_list_study.active{display: block;} #wrap #study_select .study_select .button_wrap2{display: flex;align-items: center;justify-content: flex-end;gap: 10px 20px;margin: 30px 0 20px 0;flex-wrap: wrap;position: relative; bottom: 10%; right: 0; width: 100%;} #wrap #study_select .study_select .button_wrap2 .salpha{max-width: 200px; position: relative;display: flex;align-items: center;justify-content: center;min-width: 140px;height: 40px;padding: 12px;border-radius: 5px;background: var(--main-color);color: #fff;line-height: 19px;font-size: 16px;font-weight: bold;width: calc(50% - 10px);} #wrap #study_select .study_select .button_wrap2 .sub_btn{max-width: 200px; position: relative;display: flex;align-items: center;justify-content: center;min-width: 140px;height: 40px;padding: 12px;border-radius: 5px;background: #fff;color: var(--main-color);border: solid 2px var(--main-color); line-height: 19px;font-size: 16px;font-weight: bold;width: calc(50% - 10px);} #wrap #study_select .study_select .button_wrap2 .salpha p{position:absolute;bottom: 50px;left:50%;transform:translateX(-50%);padding:8px;border-radius:5px;background:#ebebeb;line-height:14px;font-size:12px;font-weight:500;color:#333;text-align:center;white-space:nowrap;transition:all 0.2s;opacity:0;visibility:hidden} #wrap #study_select .study_select .button_wrap2 .salpha p:after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border-top:8px solid #ebebeb;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:0;} #wrap #study_select .study_select .button_wrap2 .salpha:focus p{opacity:1;visibility:visible} @media screen and (max-width: 767px){ .wide_list_wr > .study_list_box > ul, .study_number_wr > .num_select_button{display: block; } .wide_list_wr > .study_list_box > ul > li {margin: 10px 0 0 0; width: fit-content } .wide_list_wr > .study_list_box > ul#two_box_wr > li{width: 100%;} .study_number_wr > .num_select_button > .qty_num_controler {display: block; margin-top: 20px;} .study_number_wr > .num_select_button > .qty_num_controler > .min_max{margin: 10px 0 0; } #wrap #study_select .study_select .button_wrap2{display: flex; align-items: center; justify-content: space-evenly; gap: 0 0;} #wrap #study_select .study_select .button_wrap2 .a{width: calc(50% - 20px); min-width: none; margin: 5px 0;} #wrap #study_select .study_select .button_wrap2 .sub_btn{width: calc(50% - 20px); min-width: none; margin: 5px 0;} #wrap #study_select .study_select .button_wrap2 .salpha{width: 100%; min-width: none; margin: 5px 0;} } /* 컬러 피커 수정 css */ .new_layer_pop > div.box > .color_pick2 {display: flex; align-items: center; margin: 0 ; justify-content: space-between; padding: 20px 0 20px; border-bottom: solid 1px #ccc;} .new_layer_pop > div.box > .color_pick2 #fd2_name{text-align: end;} .new_layer_pop > div.box > .color_pick2 > label{display: block; font-size: 14px; font-weight: 600; color: #808080;} .new_layer_pop > div.box > .color_pick2 > .clr-field > button{ margin: 0 0 !important; width: 30px; height: 30px; border-radius: 99px;} .new_layer_pop > div.box > .color_pick2 > .clr-field > input{width: 30px; height: 30px;} .clr-picker{z-index: 99999 !important;} /* 문제풀이 화면 css */ #mocktest_new_header{align-items: center; justify-content: space-between; width: 100%; margin:0 auto 30px; border-radius: 5px; padding: 0;} #mocktest_new_header > .name_list_info{line-height: 1.5; padding: 25px 25px 0;} .qu_info{display: flex; align-items: center; justify-content: space-between;} .qu_info {margin-top: 10px; justify-content: center; background: #fbfbfb; padding: 15px 10px; border-radius: 10px 10px 0 0 ;} .qu_info > dl {display: flex; align-items: center; justify-content: center; width: calc(100% / 3); font-size: 1.5rem;} .qu_info > dl:nth-child(1){justify-content: center; padding-left: 15px;} .qu_info > dl:nth-child(2){ border-left: solid 1px #ccc; border-right: solid 1px #ccc;} .qu_info > dl:nth-child(3){justify-content: center; padding-right: 15px;} .qu_info > dl dt {margin-right: 5px;} .mocktest_navi_wr{width: 100%;} .mocktest_navi{ width: 100%; height: 80px; padding: 0 20px; display: grid;} .mocktest_navi > .left_tool_wr{ display: flex; align-items: center; justify-content: space-between;} .tool_icon_box{margin: 0 15px;} .progress_bar_container { width: 100%; display: flex; align-items: center; gap: 10px; } .progress_bar { flex: 1; height: 10px; background: #F1F1F1; border-radius: 0 0 5px 5px; overflow: hidden; } .progress_fill { height: 100%; background: #2097FF; width: 0%; transition: width 0.3s ease; border-radius: 5px; } .progress_text { font-size: 12px; color: #2097FF; font-weight: 500; min-width: 45px; text-align: right; } .fixed_btm_nav{ position: fixed; width: 100%; height: fit-content; bottom: 0; left: 0; padding: 0 25px 20px; background: #fff; } /* .mocktest_navi > .left_tool_wr > div > div, .mocktest_navi > .left_tool_wr > div > a > div{ width: 30px; height: 30px; text-align: center; background-size: contain; margin: 0 auto 3px; } */ [class^="tool_icon_0"] { image-rendering: -moz-crisp-edges; /* firefox */ image-rendering: -o-crisp-edges; /* opera */ image-rendering: -webkit-optimize-contrast; /* chrome */ image-rendering: crisp-edges; backface-visibility: hidden; transform: translateZ(0); width: 30px; height: 30px; text-align: center; background-size: contain; margin: 0 auto 3px; } .tool_icon_01{ background-image: url("../img/icon01_tool.svg");} .tool_icon_02{ background-image: url("../img/icon02_tool.svg");} .tool_icon_03{ background-image: url("../img/icon03_tool.svg");} .tool_icon_04{ background-image: url("../img/icon04_tool.svg");} .tool_icon_05{ background-image: url("../img/icon05_tool.svg");} .tool_icon_06{ background-image: url("../img/icon06_tool.svg");} .tool_icon_09{ background-image: url("../img/icon09_tool.svg");} /* on */ .tool_icon_box.on > .tool_icon_01{ background-image: url("../img/icon01_tool_on.svg") !important;} .tool_icon_box.on > .tool_icon_02{ background-image: url("../img/icon02_tool_on.svg") !important;} .tool_icon_box.on > .tool_icon_03{ background-image: url("../img/icon03_tool_on.svg") !important;} .tool_icon_box.on > p{color: var(--main-color);} .mocktest_navi > .left_tool_wr > div > a{display: block; width: fit-content; height: fit-content; text-align: center; } .mocktest_navi > .left_tool_wr > div > a > div.tool_icon_07{ background-image: url("../img/icon07_tool.png");} .mocktest_navi > .left_tool_wr > div > a > div.tool_icon_08{ background-image: url("../img/icon08_tool.png");} .finish_btn { width: 100%; padding: 0 15px; height: 50px; line-height: 50px; text-align: center; margin-top: 10px; margin-left: 0; } /* omr -> 모바일 기준 작업 */ #omr_wr{position: fixed; width: 100vw; height: 100vh; display: none; z-index: 999; left: 0; } #omr_wr.show{display: grid; top: 0; align-items: center; justify-content: center; position: fixed; left: 0;} #omr_wr > .bg{background: #333; opacity: 0.3; width: 100vw; height: 100vh; position: absolute;} #omr_wr > .box{width: 85vw; height: 70vh; background-color: #fff; z-index: 1000; padding: 25px;} .popup_title_wr{display: flex; align-items: center; justify-content: space-between;} .progress_wr{width: 100%; height: 50px; margin-top: 15px; padding: 15px; display: grid;} .clock_icon{width: 15px; height: 15px; display: inline-block; background-repeat: no-repeat; margin:2px 5px 0 0; float: left; background-size: contain; background-image: url("../img/clock_icon.png");} .prograss_bar_wr{width: 100%; height: 5px; background-color: #ccc; border-radius: 5px; margin-top: 5px; display: none;} .item_new{margin-top: 20px;} .aSeet_new{width: 100%; } .omr_icon_01{width: 18px; height: 18px; display: inline-block; margin: 0 3px 0 5px; background-image: url('../img/icon01_tool.png'); background-repeat: no-repeat; background-size: contain;} .omr_icon_02{width: 18px; height: 18px; display: inline-block; background-image: url('../img/icon03_tool.png'); background-repeat: no-repeat; background-size: contain;} /* on */ .omr_icon_01.on{background-image: url('../img/icon01_tool_on.png');} .omr_icon_02.on{background-image: url('../img/icon03_tool_on.png');} .item_con_new{width: 100%;} .item_con_new > div, .con_list, .con_list ul{display: flex; align-items: center; justify-content: space-around;} .item_con_new > div{border: solid 1px #DBDBDB; padding: 10px; border-radius: 10px; color: #DBDBDB; margin-bottom: 10px; width: 100%;} .con_list ul li{border: solid 1px #DBDBDB; width: 28px; font-size: 14px; height: 28px; border-radius: 28px; text-align: center; line-height: 27px; margin:0 3px;} .item_con_new > div:nth-last-child(1){margin-bottom: 20px;} /* 모의고사 omr */ .top_list_wr{text-align: center; width: 100%; height: fit-content; margin: 10px 0 0;} .top_list_wr > a{color: #808080; padding: 5px; display: inline-block; margin-right: 5px;} .top_list_wr > a.active{color: var(--main-color); border-bottom: solid 2px #2097ff;font-weight: 700;} .aSeet_new > li button.active{border-bottom: solid 1px var(--main-color);} .aSeet_new > li button.active div p, .aSeet_new > li button.active dl dt span{color: var(--main-color); font-weight: bold;} .aSeet_new > li button, .aSeet_new > li button div{display: flex; align-items: center;} .aSeet_new > li button{justify-content: space-between; width: 100%; color: #808080; margin-bottom: 15px; border-bottom: solid 1px #808080; padding: 0 0 10px;} .item_wr_new > dl{padding: 0 5px; border-right: solid 1px #808080; font-size: 12px} .item_wr_new > dl:last-child{border-right: none;} /* 문제가 풀이됐을 경우 */ .select_orm{border: solid 1px var(--main-color) !important;} .select_orm > p{color: #2097ff;} .select_omr_list{border: none !important; background-color: var(--main-color); color: #fff; font-weight: bold;} /* 현재 풀이중인 문제일 경우 */ .show_omr{background: #ECECEC;} .show_omr > p{color: #333;} .show_omr > div > ul > li {background-color: #fff; color: #888888; border: solid 1px #888;} /* 문제영역 수정 */ #new_item_wrap{ width: 100% !important; } /* 상단 신고하기 */ .top_navi_new_wrap{display: flex; align-items: center; justify-content: space-between; padding: 25px 25px 0;} /* omr PC */ @media screen and (min-width: 900px){ #omr_wr > .box{width: 100%; margin: 0 auto; padding: 15px; height: fit-content; border: solid 1px #f1f1f1;} .aSeet_new > li{margin: 3px; width: 100%;} #omr_wr > .bg{display: none;} #omr_wr{position: relative; width: 370px; height: fit-content; display: block; order: 2;} #new_item_wrap{ width: calc(100% - 360px) !important; display: block !important; flex: none !important; } .fixed_btm_nav{ position: initial; padding: 0 0; } } @media screen and (max-width: 900px) { #mocktest_new_header{width: auto; margin: 0 0 20px ; display: block;} .mocktest_navi_wr{width: 100%; } .mocktest_navi{width: 100%; height: 70px; padding: 0 10px;} .mocktest_navi > .right_tool_wr > a{margin-left: 10px;} .tool_icon_box{margin: 0 4px; text-align: center;} .mocktest_navi > .left_tool_wr > div > div, .mocktest_navi > .right_tool_wr > a > div{width: 30px; height: 30px;} .qu_info > dl { font-size: 1.2rem;} .qu_info > dl:nth-child(1){justify-content: center; padding-left: 15px;} .qu_info > dl:nth-child(2){ border-left: solid 1px #ccc; border-right: solid 1px #ccc;} .qu_info > dl:nth-child(3){justify-content: center; padding-right: 15px;} .aSeet_new > li button{display: block;} .aSeet_new > li button div{display: flex; align-items: center; justify-content: center; margin-top: 10px;} } @media screen and (max-width: 486px) { #mocktest_new_header{ width: auto; margin:0 0 30px; padding: 0 0; display: block;} #mocktest .detail{padding: 0 20px;} .mocktest_navi_wr{display: block;} #omr_wr > .box{ padding: 25px 10px;} .mocktest_navi { width: 100%; height: 70px; border-radius:10px; padding: 0 10px; } .con_list ul li{ border: solid 1px #DBDBDB; width: 25px; font-size: 12px; height: 25px; border-radius: 28px; text-align: center; line-height: 24px; margin: 0 3px; } #mocktest .detail .content .answer li{margin: 3px 0;} #mocktest .detail .content .answer li p{display: flex; align-items: initial; line-height: 1.9 !important;} .answernum { font-weight: 500; font-size: 14px; width: 25px; height: 25px; text-align: center; display: block; margin-right: 5px; border: solid 1px #888; border-radius: 30px; line-height: 25px; flex-shrink: 0; } #mocktest .detail .content .problem span { display: block; font-size: 18px; font-weight: 600; line-height: 1.4; } .qu_info > dl:nth-child(1){justify-content: left; padding-left: 15px;} .qu_info > dl:nth-child(2){ border-left: solid 1px #ccc; border-right: solid 1px #ccc;} .qu_info > dl:nth-child(3){justify-content: right; padding-right: 15px;} .mocktest_navi > .left_tool_wr > div > div, .mocktest_navi > .right_tool_wr > a > div{width: 20px; height: 20px; background-repeat: no-repeat;} } /* 해설보기 */ #community_new{position: fixed; top: 0; width: 100vw; height: fit-content; left: 0; z-index: 9999;} #community_new > .cbg{width: 100vw; height: 100vh; background: #333; opacity: .3; position: absolute;} .comm_wrap{width: 40%; margin-top: 21vh; background: #fff; position: absolute; right: 0; z-index: 5; border-radius: 10px 10px 0 0 ;} .comm_wrap::-webkit-scrollbar { width: 0;} .community_box{width: 100vw; } .community_box > .popup_title_wr{padding: 0 30px;} .review_tag{display: block; width: 100%; align-items: center; justify-content: flex-end;} .review_tag:has(.tag_wr) {justify-content: space-between;} .review_tag .star_svg{width: 25px; height: 25px;} .review_tag > .av_review{display: flex; justify-content: end; align-items: center; gap: 5px;} .review_tag > .av_review > p{margin-right: 10px;} .tag_wr{background-color: var(--main-color); width: fit-content; color: #fff; padding: 6px 12px; border-radius: 20px; line-height: 1.6;} .select_rate{width: 100%; background-color: #FAFAFA; margin-top: 15px; border-top: solid 1px #EDEDED; border-bottom: solid 1px #EDEDED; padding: 30px;} .select_rate > ul{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 10px;} .select_rate > ul > li{width: calc(100% / 2 - 5px); padding: 5px; margin: 5px 5px 5px 0; width: calc(100% / 2 - 5px); padding: 5px; margin: 5px 5px 5px 0; display: flex; align-items: center; justify-content: space-between;} .select_rate > ul > li > span{display: inline-block;} .select_rate > ul > li > span:nth-child(1){width: 20%;} .select_rate > ul > li > .rating_bar{width: 45%; height: 10px; margin: 0 5px 0 10px; background-color: #ccc; border-radius: 20px;} .commentary_wr{ width: 100%; background-color: #F9FCFF; margin-top: 15px; padding: 20px;} .commentary_wr > .comm_top {display: flex; align-items: center; margin-bottom: 15px;} .commentary_wr > .comm_top > span.commentary_icon{width: 35px; height: 35px; background: linear-gradient(#63B0F4, #BEE1FF); display: inline-block; margin-right: 8px; border-radius: 45px;} .commentary_wr > .comm_box{width: 100%; height: fit-content; font-size: 16px; padding: 10px 20px 30px; background-color: #F4FAFF; border-radius: 10px;line-height: 1.8;} .comm_answer{width: 100%; padding: 10px; text-align: right; border-top: solid 1px #EDEDED;} .line_span{width: 100%; display: block; height: 5px; border-top: solid 1px #EDEDED; border-bottom: solid 1px #EDEDED; background-color: #FAFAFA;} .comm_dropdown > li > p{padding: 20px;} .advanced_text {line-height: 1.6;} .case_dia{line-height: 1.6; background: #2097ff;color: #fff;padding: 6px 12px; border-radius: 30px; width: fit-content;} .case_text{line-height: 1.6;} .medi_term {margin-top: 10px; background: #fff; border-radius: 20px; padding: 15px 20px; border: solid 1px #E2E8F0; box-shadow: 0 1px 1px #00000040;} .term_title{font-weight: 500;} .term_ex{font-size: 14px; margin-top: 10px;} .ai_caution{text-align: end;font-size: 12px;color: #2097ff;font-weight: 400;} .drop_box{width: 100%; padding: 0 25px 25px 25px; color: #333; display: none;} .medical_wrap > li{display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: solid 1px #EDEDED;} .drop_icon{background-image: url('../img/icon_tog.png'); margin-top: 8px; display: inline-block; width: 20px; height: 10px; background-size: contain; background-repeat: no-repeat; float: right;} .drop_icon.icontoggle{background-image: url('../img/icon_togg.png');} .rating_star{width: 100%; margin-top: 20px; padding: 20px; text-align: center; background-color: #F4FAFF; border: solid 1px #95cdff; border-radius: 10px;} .rating_star > div{margin-top: 10px;} .star_svg{ width: 40px; height: 40px; cursor: pointer; fill: #ccc; transition: fill 0.3s;} .star_svg_out{ width: 20px; height: 20px; margin-right: -3px; fill: #ccc; transition: fill 0.3s;} .star_svg.fillstar{fill:#ffd675;} .star_svg_out.fillstar{fill:#ffd675;} .insight_wrap{margin: 30px 0 50px; height: 40dvh;} .insight_wrap > p{padding: 25px; border-bottom: solid 1px #EDEDED; margin-bottom: 20px;} .insight_wrap > form{padding: 15px; } .under_btn_check{margin-top: 5px;} .under_btn_check, .left_chk > label{display: flex; align-items: center; justify-content: space-between;margin-top: 10px;} .left_chk > label > p{margin-left: 5px;} .right_chk > span > a#notePic{border: solid 1px var(--main-color) !important; display: inline-block !important;; border-radius: 5px !important;; padding: 8px !important;; background-color: #fff; color: var(--main-color) !important; font-size: 14px !important; width: 80px; text-align: center;} .right_chk > span > a#noteSave{ border: none !important; display: inline-block !important;; border-radius: 5px !important;; padding: 8px !important;; background-color: var(--main-color); color: #fff !important; font-size: 14px !important; width: 80px; text-align: center;} @media screen and (max-width: 1200px){ .comm_wrap{ height: 700px; margin-top: 10vh; } } @media screen and (max-width: 1024px){ .comm_wrap{ width: 100vw; height: 500px; margin-top: 27vh; } } @media screen and (max-width: 820px){ .comm_wrap{ width: 100vw; height: 500px; margin-top: 35vh; } } @media screen and (max-width: 767px){ .tag_wr{ background-color: var(--main-color); color: #fff; padding: 10px; border-radius: 20px; width: fit-content; text-align: center; font-size: 14px; padding: 7px 15px; margin-left: auto; margin: 11px 0; } } @media (max-width: 400px) { .comm_wrap{ width: 100vw; height: 733px; margin-top: 14vh; } .select_rate > ul > li { width: 100%; padding: 5px; margin: 5px 5px 5px 0; } } /* 해설보기 PC */ @media screen and (min-width: 900px){ .community_box{width: 100%; max-width: 900px; margin: 0 auto;} .select_rate > ul > li{width: calc(100% / 3 - 10px)} .select_rate > ul{justify-content: left;} } /* 결과화면 */ .result_new{width: 100%;} .test_top_name{font-size: 26px; width: 100%; line-height: 1.4; padding: 15px; border-radius: 10px; background-color: #FBFBFB; text-align: center;} .top_score{width: 100%; height: fit-content; margin: 30px 0 60px;} .test_time_wr{width: 100%; display: flex; align-items: center; justify-content: center;} .total_time_wr{border-right: solid 1px #F1F1F1; } .test_time_wr > div{ text-align: center; padding: 0 30px;} .time_list_wr{margin: 60px 0 30px; width: 100%; padding-bottom: 30px;} .result_top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;} .time_list_ul{width: 100%; margin-bottom: 20px; cursor: pointer;} .time_list_ul > li{display: flex; align-items: center; background-color: #FBFBFB; border-radius: 5px; padding: 15px; margin: 10px 0; height: 50px; justify-content: space-between;} .list_num{width: 40px; color: var(--main-color); text-align: left;} .list_time{color: #FF8484; width: 90px; justify-content: end; text-align: right; display: flex; align-items: center;} .list_time::before{display: inline-block; margin-right: 3px; background-image: url(../img/list_clock_icon.png); content: ''; width: 19px; height: 19px; background-repeat: no-repeat; background-size: contain;} .list_ex{width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*틀린문제일경우 list_num에 추가*/ .wrong_que{color: #FF8484 !important;} /* 문제 정답 비율에 따른 태그 */ .tag_result{margin-top: 10px; background-color: #FF8484; font-size: 14px; color: #fff; padding: 10px; border-radius: 5px;} /* 반원 css */ .semicircle {position: relative; width: 70vw; height: calc(70vw / 2); border-top-left-radius: 120px; border-top-right-radius: 120px; border-bottom: 0; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 0 auto;} .semicircle:before {content: ""; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 200%; border-radius: 50%; background-image: conic-gradient(#FF8484, #FF8484 calc(var(--percentage, 0) / 2), #ddd 0); transition: transform .5s ease-in-out; z-index: 1; transform: rotate(270deg);} .semicircle:after {content: ""; position: absolute; display: block; background: #fff; z-index: 2; width: calc(100% - 32px); height: calc(200% - 32px); border-radius: 50%; top: 16px; left: 16px;} .myExamScore{display: flex; align-items: center; justify-content: center;font-size: 40px;font-weight: 800;} .myExamScoreTitle{font-size: 20px; font-weight: 500;} .result_text_wr{position: absolute; z-index: 99; bottom: 0; text-align: center; font-size: 18px; font-weight: 500;} .result_cnt{color: #FF8484; margin-right: 4px;} .result_total{margin-left: 4px;} .result_text_wr > h3{margin-top: 5px;} .btn_group{display: flex; align-items: center; justify-content: space-between;} .btn_group > div{width: calc(100% / 2 - 5px);} .restart_btn{background-color: var(--main-color); margin-top: 10px; color: #fff; font-size: 18px; border-radius: 10px; padding: 10px 15px; text-align: center;} .out_btn{text-align: center; color: #808080; display: block; width: 100%; text-decoration: underline; margin-top: 15px;} /* 모의고사 교시 시작 전 화면 exam_ready_241102.php */ .exam_ready_new{width: 100%; padding: 80px 45px 0;} .exam_title_wrap{text-align: center; background-color: #FBFBFB; padding: 30px; border-radius: 10px;} .exam_banner_wrap{margin: 30px 0; text-align: center; width: 100%; height: 100px; border-radius: 10px; overflow: hidden; background-color: #F1F4FE;} .exam_banner_wrap > img{width: 50%;} .exam_name_wr{text-align: left; margin-bottom: 30px;} .exam_name_wr > p{margin-bottom: 5px;} .exam_time_table{display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;} .exam_time_table > div{width: calc(100% / 2 - 10px); background: #fbfbfb; border-radius: 10px; padding: 30px; display: flex; align-items: center; justify-content: space-between;} .tip_new{width: 100%; padding: 30px; text-align: left; margin-top: 30px; background-color: #F4FAFF; border: solid 1px #95cdff; border-radius: 10px; color: #57b1ff;} .tip_new > p{width: 100%; margin-bottom: 15px; } .tip_new > span{display: block; width: 100%;} .exam_major_wr > li{margin-bottom: 10px; line-height: 25px; display: flex; align-items: center;} .exam_major_wr > li::before{display: inline-block; content: ''; margin-right: 8px; width: 20px; height: 20px; border-radius: 5px; background: url(../img/exam_major_icon.png); background-size: contain;} .exam_major_wr > p{margin-bottom: 10px;} .exam_ready_btn{width: 100%; border-radius: 10px; background-color: var(--main-color); color: #fff; margin: 30px 0 80px; text-align: center; padding: 20px;} .exam_ready_btn > a{color: #fff; } @media screen and (min-width: 900px){ .exam_ready_new, .result_new{width: 60%; margin: 0 auto;} .exam_banner_wrap{height: 300px;} .exam_banner_wrap > img{width: 100%;} .semicircle{width: 500px; height: 250px;} } /* 모의고사 결과보기 */ .exam_time_info{width: 100%; display: flex; align-items: center;padding: 15px 0; background-color: #fbfbfb; justify-content: space-between; margin-bottom: 30px;} .exam_time_info > li{width: calc(100% / 3); border-right: solid 1px #F1F1F1; padding: 10px 20px; } .exam_time_info > li:nth-last-child(1){border-right: none;} .chart_box_wr{display: flex; align-items: center; justify-content: space-between; margin-top: 50px;} .chart_box_wr > div{width: calc(100% / 2 - 5px); text-align: center;} .chart_box_wr > div > p{padding-top: 3px;} .chart_good{background-color: #D5E9FB; border-radius: 10px; padding: 20px;} .chart_worst{background-color: #F8E2E2; border-radius: 10px; padding: 20px;} .new_result_list li{width: 100%; margin-bottom: 5px;} .new_result_list li button > div,.new_result_list > li > button .total dl{font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .new_result_list li .layer{display: none;} .new_result_list li button{ display: flex; align-items: center; justify-content: space-between; width: 100%; border: solid 1px #F5F5F5; border-radius: 10px; padding: 10px 15px;} .new_result_list > li > button .total dd { position: relative; display: flex; width: 60px;height: 10px; border-radius: 6px; background: #F5F5F5; margin-right: 10px; overflow: hidden;} .new_result_list > li > button .total dd i{border-radius: 6px;} .new_result_list > li > .layer > ul > li{ height: 50px; display: flex; align-items: center; justify-content: space-between; background-color: #FBFBFB; margin: 10px 0; border-radius: 5px; padding: 15px;} .new_result_list > li > .layer > .mo_btn {margin-bottom: 50px;} .new_result_list > li > button .total dt{ background: #FBFBFB; padding: 10px; border-radius: 30px; width: 50%; min-width: 100px;} .partfail {display: inline-flex;align-items: center;padding: 6px 10px; font-size: 12px;font-weight: 400;color: #fff;background-color: #FA897B;border-radius: 20px;line-height: 16px;} .examClassTitle{display: flex; align-items: center; justify-content: space-between;margin-bottom: 10px;} /* 문제 항목 수정 */ .answer_li{display: flex; width: 100%; align-items: flex-start; justify-content: space-between;} .answer_li > label{width: 90%;} .wronganswer_new{width: 20px; height: 20px; margin-top: 5px; text-align: center; background-size: contain; background-repeat: no-repeat; background-image: url(../img/ic-del.png);} .wronganswer_new > img{width: 65%; display: none;} .answer_li.wrong_ans > .wronganswer_new{background-repeat: no-repeat; background-image: url(../img/ic-del-return.png);} .answer_li.check_ans{color: var(--main-color);} .answer_li.wrong_ans{color: #ccc;} .answer_li.check_ans > label > p > span{border: solid 1px var(--main-color) !important;} .answer_li.wrong_ans > label > p > span{border: solid 1px #ccc;} .no_answer_explan{margin-top: 10px;background: #f1f1f1;padding: 10px 20px;border-radius: 10px;} @media screen and (max-width: 767px){ .myExamScore{font-size: 20px;} .myExamScore{font-size: 30px;} .myExamScoreTitle{font-size: 18px;} .examClassTitle{margin: 0;width: 100px;} .partfail{margin-left: 10px;} .exam_time_info{display: block;} .exam_time_info > li { width: 100%; border-right: none; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; border-bottom: solid 1px #e9e9e9; } .exam_time_info > li:nth-last-child(1){border-bottom: none} .test_time_wr > div{padding: 0 15px;} .time_list_ul > li{padding: 8px;} .list_ex{width: 55%;} .list_time{font-size: 14px; width: 70px;} .list_time::before{width: 14px; height: 14px;} .new_result_list li button{display: block;} .new_result_list > li > button .total dd{width: 100%; margin: 0 10px;} .new_result_list li button > div, .new_result_list > li > button .total dl{width: 100%;} .new_result_list > li > button .total dt{ padding: 10px; border-radius: 30px; width: 50%; min-width: 100px;} } /* 문제 풀이 이력 */ #exam_history_wr, #exam_report_wr{position: fixed; width: 100vw; height: 100vh; display: none; z-index: 999; left: 0; } #exam_history_wr.show, #exam_report_wr.show{display: grid; align-items: center; justify-content: center; position: fixed; left: 0;} #exam_history_wr > .bg, #exam_report_wr > .bg{background: #333; opacity: 0.3; width: 100vw; height: 100vh; position: absolute;} #exam_history_wr > .box, #exam_report_wr > .box{width: 300px; height: fit-content; background-color: #fff; z-index: 1000; padding: 25px;} /* .history_table {width: 100%; margin-top: 30px;} .history_table > table{width: 100%; border-collapse: collapse; } .history_table thead{border-bottom: solid 1px #ccc; } .history_table thead th{height: 50px;} .history_table tbody tr td{text-align: center; height: 50px; font-size: 14px; border-bottom: dotted 1px #ccc;} .history_table tbody tr td .ans_circle{border: solid 1px #333; border-radius: 30px; width: 30px; height: 30px; display: inline-block; text-align: center; line-height: 30px;} */ .history {margin: 25px auto 20px; background-color: #F4FAFF;border: solid 1px #95cdff; border-radius: 10px; padding: 20px;} .history_summary {display: flex;background: #fff;justify-content: space-between; align-items: center; margin-top: 20px; padding: 15px; border-radius: 20px;} .summary_item { flex: 1;text-align: center; padding: 0 10px;position: relative; } .summary_item:not(:last-child)::after { content: '';position: absolute;right: 0;top: 50%;transform: translateY(-50%);height: 70%;width: 1px;} .summary_label {font-size: 14px;color: #6c757d;margin-bottom: 5px;} .summary_value {font-size: 18px;font-weight: 600;} .history_table {width: 100%; margin-top: 30px; border-collapse: collapse;margin-bottom: 15px;} .history_table th, .history_table td { padding: 12px;text-align: center;border-bottom: 1px solid #e9ecef; } .history_table th { font-weight: 600;} #exam_history_wr .tip_new{padding: 15px 25px;} #exam_history_wr .tip_new > li{padding: 3px 0;} #exam_history_wr .tip_new > li span{padding-left: 10px; float: right;} /* 신고하기 */ .report_option{width: 100%; margin-top: 30px;} .report_option select{width: 100%; padding: 15px; border-radius: 10px; border: solid 1px #808080; color: #808080;} .report_option textarea{width: 100%; height: 130px; border: solid 1px #808080; margin-top: 5px; color: #808080; padding: 15px; border-radius: 10px;} .report_btn_wr{display: block} /* 신고하기 버튼 디자인 */ .report_btn_wr > div:nth-child(1){ width: 100%; height: 40px; border-radius: 5px; background: #f1f1f1; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; color: #333; margin-top: 20px; } .report_btn_wr > div:nth-child(2){ margin: 10px 0 0; display: flex; width: 100%; height: 30px; border-radius: 5px; align-items: center; justify-content: center; font-size: 12px; color: #808080 !important; } /* 해설 부분 */ .answer_li > label{display: block !important; width: 100% !important;} .answer_li > label > .selection_rate{justify-content: end; text-align: right; padding: 5px 15px; border-bottom: solid 1px #E7E7E7; font-weight: 300 !important; font-size: 12px !important; color: #808080 !important;} .answer_li > label > .selection_rate > span{color: #FF4E4E; margin-left: 6px; border: none !important;} .answer_li > label > p{width: 100% !important;} .time_box_wr, .time_box_wr > div {display: flex; align-items: center; justify-content: space-between;} .time_box_wr > div{width: 48%; padding: 20px 15px; margin-top: 0;} .time_box_wr > div > span:nth-child(2){text-align: right; width: 50%;} /* 해설 부분에서 틀린 문제일 경우 */ /* .numanswer에 .f_ff8, .wrong_anw 추가*/ .wrong_anw{color: #FF7474;} .wrong_anw::after{content: '이전 오답 문제'; margin-left: 10px; border-radius: 5px; background-color: #FF7474; color: #fff; padding: 5px; font-size: 14px;} .no_answer_new{color: #FF8484;} .no_answer_new span{border: solid 1px #FF8484;} .numanswer1{} /* 이론학습 */ .new_wrap_1200{width: 1200px; margin: 0 auto;} @media screen and (max-width: 1200px){ .new_wrap_1200{width: 100%;} #exam_history_wr > .box, #exam_report_wr > .box{width: 300px; height: fit-content; background-color: #fff; z-index: 1000; padding: 25px;} } @media screen and (max-width: 767px){ .time_box_wr {display: block;} .time_box_wr > div{width: 100%; margin-bottom: 10px; padding: 15px;} .history_table thead th{height: 40px; font-size: 14px;} #mocktest .detail .content .answer li .checkbox input ~ p{font-size: 14px;} #mocktest .detail .content{padding-bottom: 200px;} } /* 이론학습 상단 */ .theory_top_head{display: flex; align-items: center; justify-content: space-between;margin: 0 auto 10px;} .theory_top_head > p{width: 75%; line-height: 1.4; font-size: 16px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .theory_tag{background-color: var(--main-color); color: #fff; border-radius: 10px; padding: 10px 15px; font-weight: 500; font-size: 16px;max-width: 300px;} /* 이론학습 하단 네비게이션 */ .fixed_nav_theory{width: 100vw; height: 80px; background-color: #FBFBFB; position: fixed; bottom: 0; left: 0; z-index: 9999; box-shadow: 0 -5px 18px #00000029; } .fixed_nav_theory > .icon_wrap{width: 85vw; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between;} .fixed_nav_theory > .icon_wrap > span{display: block; width: 45px; text-align: center; } .fixed_nav_theory > .icon_wrap > span > p{font-size: 12px; margin-top: 5px;} .fixed_nav_theory > .icon_wrap > span > span{width: 35px; height: 35px; display: block; margin: 0 auto;} .fixed_nav_theory > .icon_wrap > #save-btn > span{background-image: url(../img/theory_nav_01.svg);} .fixed_nav_theory > .icon_wrap > #notes-btn > span{background-image: url(../img/theory_nav_02.svg);} .fixed_nav_theory > .icon_wrap > #list-btn > span{background-image: url(../img/theory_nav_03.svg);} .fixed_nav_theory > .icon_wrap > #top-btn > span{background-image: url(../img/theory_nav_04.svg);} .fixed_nav_theory > .icon_wrap > #prev-btn > span{background-image: url(../img/theory_nav_05.svg);} .fixed_nav_theory > .icon_wrap > #next-btn > span{background-image: url(../img/theory_nav_06.svg);} .fixed_nav_theory > .icon_wrap > #search-btn > span{background-image: url(../img/theory_nav_07.svg);} .fixed_nav_theory > .icon_wrap > #save-btn.on > span{background-image: url(../img/theory_nav_01_on.svg);} .fixed_nav_theory > .icon_wrap > #notes-btn.on > span{background-image: url(../img/theory_nav_02_on.svg);} .fixed_nav_theory > .icon_wrap > #list-btn.on > span{background-image: url(../img/theory_nav_03_on.svg);} /* 이전 다음 섹션으로 이동할 수 있을 경우 */ .fixed_nav_theory > .icon_wrap > #prev-btn.on > span{background-image: url(../img/theory_nav_05.svg);} .fixed_nav_theory > .icon_wrap > #next-btn.on > span{background-image: url(../img/theory_nav_06.svg);} /* 이전 다음 섹션으로 이동할 수 있을 경우 */ .fixed_nav_theory > .icon_wrap > #prev-btn.on > span{background-image: url(../img/theory_nav_05_on.svg);} .fixed_nav_theory > .icon_wrap > #next-btn.on > span{background-image: url(../img/theory_nav_06_on.svg);} /* 비활성화된 버튼의 텍스트 색상 */ .fixed_nav_theory > .icon_wrap > #prev-btn:not(.on) p, .fixed_nav_theory > .icon_wrap > #next-btn:not(.on) p {color: #808080;} .show_pop_new{position: fixed; top: 0; z-index: 99; } .show_pop_new > .popbg_black{background-color: #333; width: 100vw; height: calc(100vh - 80px); opacity: .3;} .show_pop_new > .nav_pop{width: 600px; height: fit-content; background-color: #fff; position: fixed; right: 0; bottom: 80px; z-index: 99; border-radius: 20px 20px 0 0;} .show_pop_new > .nav_pop > .list-select-wrap{padding: 30px; background-color: #FBFBFB; text-align: left; border-radius: 20px 20px 0 0;} .show_pop_new > .nav_pop > .list-select-wrap > .select-box-list > select{width: 100%; height: 40px; background-color: #fff; border: solid 1px #dbdbdb; margin-top: 15px; border-radius: 10px; color: #888;} .show_pop_new > .nav_pop > .list-now{width: 100%; border-top: solid 3px #F4F4F4; background-color: #fff;} .show_pop_new > .nav_pop > .list-now > ul{height: 30vh; overflow-y: scroll;} .show_pop_new > .nav_pop > .list-now > ul > li{padding: 15px 30px; list-style: inside; border-top: solid 1px #F4F4F4; color: #888888; font-weight: 200; font-size: 14px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .show_pop_new > .nav_pop > .list-now > ul > li:nth-child(1){border-top: none;} .show_pop_new > .nav_pop > .list-now > ul > li.now_list{color: var(--main-color); font-weight: 500;} @media screen and (min-width: 900px){ .fixed_nav_theory > .icon_wrap{width: 500px;} .show_pop_new > .nav_pop > .list-select-wrap > .select-box-list{display: flex; align-items: center; margin: 0 auto; gap: 10px;} .show_pop_new > .nav_pop > .list-select-wrap > .select-box-list > select{width: 32%;flex: 1; } .show_pop_new > .nav_pop > .list-now > ul{display: flex; height: fit-content; overflow-y: initial; align-items: center; flex-wrap: wrap; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .show_pop_new > .nav_pop > .list-now > ul > li{width: 30%;} } @media (max-width: 1200px) { .theory_tag{padding: 10px; font-weight: 500; font-size: 14px; margin: 0 10px;} } @media screen and (max-width: 640px) { .show_pop_new > .nav_pop{width: 100%; height: fit-content; background-color: #fff; position: fixed; right: 0; bottom: 80px; z-index: 99;} } /* ajax_theory_view_241119.php */ .report_icon_head{ width: 30px; height: 30px; background: url(../img/icon06_tool.svg); filter: grayscale(1); background-repeat: no-repeat; background-size: contain;margin: 4px 10px;} /* 문제풀이 해설 댓글 */ .new_rep_li{display: flex; flex-direction: column; border-bottom:3px solid #ededed !important; margin-bottom: 15px} .new_reply_top{padding: 0 20px; display: flex; align-items: center; justify-content: left; margin-bottom: 15px;} .new_reply_top .new_reply_name .info{color: #888; font-weight: 300; font-size: 12px; padding-left: 8px} .show_me_only{color: #808080; border-radius: 20px; background-color: #f1f1f1; font-size: 12px; width: 100px; text-align: center; height: 30px; line-height: 30px;} .new_reply_txt{border-top: solid 1px #ededed; width: 90%; margin: 0 auto; padding: 15px 0 25px; font-size: 14px;line-height: 1.6;} .new_reply_under, .reply_under_ico, .reply_under_ico div{display: flex; align-items: center; justify-content: space-between;} .new_reply_under{width: 90%; margin: 0 auto; padding-bottom: 20px;} .reply_under_ico div {margin-right: 8px} .reply_under_ico div i {width: 20px; height: 20px; background-color: #ccc; margin-right: 3px;} .reply_under_ico .reply_like i {background: url(/resources/img/ic_like.png) no-repeat 50% 50% / contain !important;} .reply_under_ico .reply_add i {background: url(/resources/img/ic_rep.png) no-repeat 50% 50% / contain !important;} .reply_under_ico div{color: #888; font-size: 12px;} .reply_menu{position: relative;} .new_reply_optbtn{width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;} .new_reply_optbtn i{width: 30px; height: 15px; display: block; background: url(/resources/img/ic_dotted.png) no-repeat 50% 50% / contain;} .reply_menu ul{position: absolute; top: 100%; right: 0; width: 70px; padding: 10px; display: flex; gap: 15px; flex-direction: column; border-radius: 5px; background: #ffffff; opacity: 0; visibility: hidden; z-index: 99999;} .reply_menu ul.on{opacity: 1; visibility: visible;} .reply_menu ul li a{display: flex; gap: 5px; line-height: 20px; align-items: center; justify-content: center; flex-direction: row;} .reply_menu ul .ic-pencil{background: url(/resources/img/ic-pencil.png) no-repeat 50% 50% / contain !important;} .reply_menu ul li .ic-delete{background: url(/resources/img/ic-delete.png) no-repeat 50% 50% / contain !important;} .reply_menu ul li a p{font-size: 12px; font-weight: 500; color: #808080;} /* 대댓글 */ .new_reply_con{width: 100%; margin: 0 auto; padding: 20px 0; background-color: #fbfbfb; font-size: 14px;} /* .new_reply_con ul li{border-bottom: solid 2px #efefef; margin-bottom: 15px;} */ .new_reply_con ul li:nth-last-child(1){border-bottom: none} .new_reply_top .name .name_info{display: flex; align-items: center; justify-content: space-between;} .new_reply_top .name .name_info span{padding-left: 5px; font-weight: 300; color: var(--main-color);} .new_reply_form{border-top: none !important; display: block;} .new_reply_input{display: flex; align-items: center; justify-content: space-between;} .new_reply_input input{width: 82% !important; display: inline-block; height: 40px; padding-left: 10px; border: solid 1px #ededed; border-radius: 10px; flex: 1; margin-right: 10px;} .new_reply_input button {width: 60px; background-color: var(--main-color); border-radius: 10px; color: #fff; height: 40px;} .n_yrt{color:#fff;background:#2097FF !important;border-color:#2097FF !important} .n_nrt{color:#fff;background:#FF8484;border-color:#FF8484} .new_reply_name{ margin-bottom: 1px; height: 30px; font-size: 12px; justify-content: initial; font-weight: bold; color: #333; margin-left: 5px; width: 100%; line-height: 30px; display: flex; align-items: center;} /* 검색화면 css - 모바일*/ #new_search{ padding: 0 30px; margin: 70px 0;} #new_search2_wrap{max-width: 640px; margin: 0 auto;} .search_title{text-align: left; margin: 20px 0 10px;} .search_title > span:nth-child(2){color: var(--main-color);} .serch_sub_title{display: flex; align-items: center; justify-content: space-between; margin-top: 30px} .new_recent > .con ul{margin-top: 15px;} .new_recent > .con ul .recent_li{display: flex; justify-content: space-between; padding: 15px; border-bottom: solid 1px #F4F4F4;} .new_recent > .con ul .recent_li:nth-child(1) {border-top: solid 1px #F4F4F4;} .new_recent > .con ul .recent_li button{width: 15px; height: 15px; background-image: url(../img/search_cancel.png); background-size: contain; margin-top: 2px;} .new_recent, .new_recommand, .popular_searches{ margin-top: 50px; } .new_recommand .con{ margin-top: 15px;} .new_keyword_list{ display: flex; flex-wrap: wrap; align-items: center; justify-content: left;} .new_keyword_style{ color: #5F6062; background-color: #F7F8FA; padding: 10px 13px; border-radius: 50px; margin: 5px;} .popular_searches .con{ display: flex; align-items: center; justify-content: left;} .popular_searches .con ul{width: 50%; padding: 15px;} .top_color{color: var(--main-color);} .popular_searches .con ul li{padding: 10px 0; font-size: 16px; text-align: left;} .popular_searches .con ul li span:nth-child(1){padding-right: 10px; font-weight: 600;} .new_search_wrap{ width: 100%; height: 50px; border-radius: 100px; border: solid 1px #2097FF; display: flex; align-items: center; justify-content: space-between; padding: 0 10px;} .new_search_form{ flex: 1;} .new_search_form input[type="text"] { width: 100%; padding: 8px; border: none; outline: none;} .new_search_form button, .search_head_img{ width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0;} .search_head_img img{width: 30px;} .new_search_form form{ display: flex; align-items: center; gap: 10px;} /* 결과 */ .result_tab_new .tabs ul{display: flex; margin: 30px 0 20px; align-items: center; justify-content: center;} .result_tab_new .tabs ul li{ width: calc(100% / 4); text-align: center; padding: 15px 0; border-bottom: solid 2px #EDEDED; } .result_tab_new .tabs ul li a{color: #a6a6a6;} .result_tab_new .tabs ul li.active{ border-bottom: solid 2px var(--main-color); color: var(--main-color); } .result_tab_new .tabs ul li.active a{color: var(--main-color); font-weight: bold;} .right-contents .list ul{margin-top: 15px;} .right-contents .list ul li{ border-radius: 20px; border: solid 1px #efefef; padding: 20px; margin-bottom: 5px; } .right-contents .list{margin-bottom: 30px;} .right-contents.list ul li .box a .upper .tags{display: none;} .search_title_bold{display: block; padding-bottom: 5px;} .right-contents .list ul li .box a .subject{ font-size: 14px !important; font-weight: 400;} #searchList .box .problem .tags{ display: inline-block; margin-bottom: 10px; font-size: 12px; width: fit-content; background-color: #f1f1f1; padding: 5px 10px; border-radius: 20px;} .search_text{font-size: 14px !important; color: #888; line-height: 1.4;} .search_result_title{margin-bottom: 10px;} .sub_categories_total{font-size: 16px; color: #2097ff; font-weight: 400;} .search_text p img{ width: 200px !important; height: auto !important;} /* 검색 후 화면 분할 레이아웃 PC */ .contents-box{width: 100%; display: flex; align-items: center; justify-content: space-between; position: relative;} .left-category{width: 30%; height: 60vh; border-radius: 10px; display: flex; flex-direction: column;} .left-category::-webkit-scrollbar, .right-contents::-webkit-scrollbar, .category-list-wrap::-webkit-scrollbar {display: none;} .left-category .serch_sub_title, .right-contents .serch_sub_title{margin-top: 0; justify-content: left; align-items: end;} .left-category .serch_sub_title h4, .right-contents .serch_sub_title h4 {padding-right: 10px} .category-select{margin-top: 15px; position: relative;} .category-select .select-btn{width: 100%; height: 50px; border: solid 1px #E4E4E4; border-radius: 10px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; color: #e4e4e4;} .select-btn.select_click{color: var(--main-color); border: solid 2px var(--main-color);} .select-option-ul{width: 100%; display: none; margin-top: 5px; border-radius: 10px; border: solid 1px #e4e4e4; position: absolute; z-index: 1; top: 50px; background-color: #fff; padding: 10px 0;} .select-option-ul > li{ height: 40px; text-align: left; padding: 0 15px; line-height: 40px;} .category-list-wrap{margin-top: 5px; border-radius: 10px; border: solid 1px #efefef; padding: 15px; flex-grow: 1; overflow-y: auto; position: relative;} .bk-03{ width: 100%; height: 100%; position: absolute; background-color: #000; top: 0; left: 0; opacity: 0; visibility: hidden; transition: .3s; border-radius: 10px;} .bk-03.select_click{opacity: .3; visibility: inherit; transition: .3s;} .category-list-ul .category_tab{ padding: 10px 0; border-bottom: solid 1px #efefef; } .sub-category-tab{display: flex; align-items: center; justify-content: space-between;margin-bottom: 10px;} .sub-category-tab span.text_md{font-weight: 600 !important;} .category-img-btn{background-image: url(../img/togglebtn_category.png); display: inline-block; width: 20px; height: 10px;background-repeat: no-repeat;} .category-img-btn.rotate, .select-toggle-btn.rotate {transform: rotate(180deg); /* 180도 회전 */} .category_menu{margin-top: 10px; display: none;} .category_menu li{padding: 0 0 10px; font-size: 16px; color: #808080;} .category_menu li input, .select-option-ul > li input{width: 15px; height: 15px; margin:-2px 5px 0 0;} .category_menu li .result-cnt{font-size: 14px; color: #2097ff; display: inline-block; padding-left: 5px;} .fiexed_nav_category, .category-top{flex-shrink: 0; } .fiexed_nav_category{margin-top: 15px; width: 100%; background-color: #fff; height: 40px;} .fiexed_nav_category div{display: flex; align-items: center; justify-content: space-between; } .reset-btn { border: solid 1px #ccc; border-radius: 10px; background-color: #fff; color: #ccc; text-align: center; line-height: 40px; height: 40px; width:33%;} .search-category { background-color: var(--main-color); color: #fff; text-align: center; line-height: 40px; height: 40px; width: 65%; border-radius: 10px; font-size: 16px; } .right-contents{width: 68%; height: 60vh; overflow: auto; border-radius: 10px;} .mo_fiexed_nav{display: none;} .select-option-ul > li.on, .select-option-ul > li{ border-bottom: none; color: #333; font-weight: 400;} .search_top_title{ display: flex; align-items: flex-start; justify-content: space-between; } /* 검색 후 화면 레이아웃 mobile */ @media screen and (max-width: 767px) { .contents-box{display: block; box-sizing: border-box; width: 100%; position: relative; margin-bottom: 75px; } .left-category{ width: 100%; display: none; position: fixed; background: #fff; height: fit-content; padding: 30px 30px 20px; bottom: 130px; left: 0; z-index: 1; right: 0; box-sizing: border-box; border-radius: 10px 10px 0 0; } .mobg-03{width: 100vw; height: 100vh; visibility: hidden; transition: .3s; background-color: #000; position: fixed; top: 0; left: 0; opacity: 0;} .mobg-03.select_click{opacity: .3; visibility: inherit; transition: .3s;} .category-select .select-btn{display: none;} .select-option-ul{ display: flex !important; align-items: center; justify-content: space-between; position: initial; border: none; padding-bottom: 0; border-radius: 0; } .select-option-ul input{display: none;} .select-option-ul > li {width: calc(100% / 4); text-align: center; color: #a6a6a6; border-bottom: solid 2px #ccc; font-size: 14px;} .select-option-ul > li.on{ border-bottom: solid 2px var(--main-color); color: var(--main-color); font-weight: bold;} .fiexed_nav_category{display: none;} .right-contents{width: 100%; height: 100dvh;} .mo_fiexed_nav{ position: fixed; bottom: 0; left: 0; width: 100%; height: 150px; display: block; background: linear-gradient(#ffffffde, #fff 70%); padding: 0 30px; z-index: 1; } .mo_fiexed_nav div{ display: flex; align-items: center; justify-content: space-between; padding-top: 30px; } .category-list-wrap{height: 40vh; border: none;} .category_menu li{font-size: 14px;} .category-list-ul .category_tab{padding: 15px 0;} .report_icon_head{ width: 30px; height: 30px; background: url(../img/icon06_tool.svg); filter: grayscale(1); background-repeat: no-repeat; background-size: contain;margin: 4px 2px;} } /* 팝업 버튼 UI class 지정 */ .pop_gray_btn{ display: flex; width: 100%; height: 40px; border-radius: 5px; background: #f1f1f1; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #333; margin-top: 20px; } .pop_text_btn{ margin: 10px 0 0; display: flex; width: 100%; height: 30px; border-radius: 5px; background: #fff; align-items: center; justify-content: center; font-size: 12px; color: #808080; text-decoration: underline; } /* 커뮤니티 답글 수정 */ #community .viewskin .comment .uppr{ padding: 25px 0; border-bottom: solid 1px #EDEDED; margin-bottom: 20px; } #community .viewskin .comment{border-top: solid 1px #EDEDED;} @media screen and (max-width: 767px) { #community{max-width: none; width: 100vw; padding: 0 20px;} #community .viewskin{width: 100% ;} } .right-group .con2 #showPic{ border: solid 1px var(--main-color) !important; display: inline-block !important; border-radius: 5px !important; padding: 8px !important; background-color: #fff; color: var(--main-color) !important; font-size: 14px !important; } #community .viewskin .comment .answer .fboot .con1 a{ border: solid 1px var(--main-color) !important; display: inline-block !important; border-radius: 5px !important; padding: 8px !important; background-color: var(--main-color); color: #fff !important; font-size: 14px !important; } #community .viewskin .comment .answer .fboot .con1 .cancelBtn { border: solid 1px var(--main-color) !important; display: inline-block !important; border-radius: 5px !important; padding: 8px !important; background-color: #fff; color: var(--main-color) !important; font-size: 14px !important; width: 80px; text-align: center; } #community .viewskin .comment .answer .fboot .con1 .updateBtn{ border: none !important; display: inline-block !important; border-radius: 5px !important; padding: 8px !important; background-color: var(--main-color); color: #fff !important; font-size: 14px !important; width: 80px; text-align: center; } #community .viewskin .comment .answer .ftext textarea{ margin-top: 10px; height: 120px !important; width: 100%; border:solid 1px #ebebeb; background: #F9F9F9; padding: 10px; border-radius: 10px; } /* 해설보기 헤더 */ .scroll_com_wrap{ height: 650px; overflow-y: scroll; } .fixed_comu_head{ width: 100%; padding: 0 30px; } .community_header{ margin-top: 10px; height: fit-content; background: #FBFBFB; line-height: 50px; border-top: solid 1px #f1f1f1; border-bottom: solid 1px #f1f1f1; } .community_header::-webkit-scrollbar, .scroll_com_wrap::-webkit-scrollbar {display: none;} .community_header div{display: flex; flex-wrap: wrap; align-items: center; justify-content: left;} .community_header a{ display: block; padding: 0 20px; height: 100%; line-height: 50px; text-align: center; flex-shrink: 0; color: #888; } .community_header a.on{ font-weight: bold; color: var(--main-color); border-bottom: 3px solid var(--main-color); } @media screen and (max-width: 767px) { .community_header a{ width: calc(100% / 3); } } /* 진단분류 */ #diagnosis .diagnosis-wrap { width: 100%; max-width: 800px; padding: 20px; margin: 60px auto 40px; background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } #diagnosis .category-list, #diagnosis .subcategory-list, #diagnosis .subsubcategory-list { margin-top: 15px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 30px; } #diagnosis .subcategory-list, #diagnosis .subsubcategory-list { display: none; } #diagnosis .category-item, #diagnosis .subcategory-item, #diagnosis .subsubcategory-item { background: #f8f9fa; padding: 12px 15px; border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.2s ease; border: 1px solid #e9ecef; font-size: 13px; line-height: 1.4; word-break: keep-all; min-height: 60px; display: flex; align-items: center; justify-content: center; white-space: pre-wrap; } #diagnosis .category-item:hover, #diagnosis .subcategory-item:hover, #diagnosis .subsubcategory-item:hover { background: #f1f3f5; transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } #diagnosis .category-item.active { background-color: #1c7ed6; color: #fff; font-weight: 500; border-color: #1c7ed6; } #diagnosis .subcategory-item.active, #diagnosis .subsubcategory-item.active { background-color: var(--main-color); color: #fff; font-weight: 500; border-color: var(--main-color); } #diagnosis h3 { font-size: 18px; font-weight: 600; color: #343a40; margin: 30px 0 15px; display: flex; align-items: center; } #diagnosis h3::after { content: ""; flex: 1; height: 1px; background: #e9ecef; margin-left: 15px; } #diagnosis .search-button-wrap { display: none; text-align: center; margin-top: 50px; } #diagnosis .search-cases-btn { background: var(--main-color); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-size: 15px; cursor: pointer; transition: background 0.2s ease; } @media screen and (max-width: 480px) { #diagnosis .diagnosis-wrap { padding: 15px; margin: 40px auto; } #diagnosis .category-list, #diagnosis .subcategory-list, #diagnosis .subsubcategory-list { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } #diagnosis .category-item, #diagnosis .subcategory-item, #diagnosis .subsubcategory-item { padding: 8px 10px; font-size: 12px; min-height: 50px; } #diagnosis h3 { font-size: 16px; margin: 25px 0 12px; } } /* mypage */ /* 기본 페이지 레이아웃 */ #mypage { padding: 0 !important; position: relative; } /* 프로필 정보 섹션 */ #mypage .info { display: flex; align-items: center; justify-content: space-between; padding: 20px; margin-bottom: 24px; background: #fff; border-radius: 12px; border: solid 1px #E2E8F0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); position: relative; cursor: pointer; } #mypage .info:hover { background: #fafafa; } #mypage .info:hover .edit-icon i { color: #2097FF !important; } /* 프로필 이미지 */ #mypage .info .img { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; margin-right: 12px; background: #f5f5f5; } #mypage .info .img img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 사용자 정보 */ #mypage .info .user { display: flex; align-items: center; justify-content: flex-start; flex: 1; } #mypage .info .user .img { width: 50px; height: 50px; margin: 0 !important; margin-right: 10px !important; } #mypage .info .user .img img { border-radius: 50px; } #mypage .info .user .con { flex: 1; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; } #mypage .info .user .name { line-height: 20px; font-size: 16px; font-weight: bold; margin-right: 10px; } #mypage .info .user .date { line-height: 15px; font-size: 14px; font-weight: 400; color: #808080; margin: 4px 0; } /* 편집 아이콘 */ #mypage .info .edit-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } /* 상세 정보 */ #mypage .info .con .info-detail { font-size: 14px; color: #808080; margin-top: 4px; display: flex; align-items: center; gap: 6px; } #mypage .info .con .info-detail .divider { color: #ddd; } /* 섹션 타이틀 */ #mypage .link_title { font-size: 16px; font-weight: bold; color: #333; margin: 30px 0 10px; } /* 전체보기 버튼 */ .title-wrapper { display: flex; align-items: center; justify-content: space-between; } .show-more-btn { display: inline-flex; align-items: center; gap: 4px; background-color: #f8f9fa; padding: 6px 12px; border-radius: 15px; color: #333; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .show-more-btn i { font-size: 12px; transition: transform 0.2s ease; } .show-more-btn.expanded i { transform: rotate(180deg); } /* 학습 기록 카드 */ .records-container { padding: 16px !important; } .records-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; } .record-card { position: relative; background: #f8f9fa; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .record-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .record-icon { font-size: 24px; margin-bottom: 8px; } .record-content { display: flex; flex-direction: column; align-items: center; gap: 4px; } .record-value { font-size: 18px; font-weight: 600; color: #2097FF; } .record-label { font-size: 14px; color: #666; } .study-history { border-radius: 12px; margin: 0 0 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); border: solid 1px #E2E8F0; overflow: hidden; } .study-list { display: flex; flex-direction: column; } .study-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; transition: background-color 0.2s ease; } .study-item:hover { background-color: #f8f9fa; } .study-item:not(:last-child) { border-bottom: 1px solid #f1f1f1; } .study-content { flex: 1; } .study-title { font-size: 16px; font-weight: 500; color: #333; } .study-detail { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #808080; margin-top: 5px; } .study-detail .divider { color: #ddd; } .study-detail .progress { color: #2097FF; } .study-item.hidden { display: none; } /* 토글 스위치 */ .toggle-switch { position: relative; width: 40px; height: 20px; background: #e9e9e9; border-radius: 12px; transition: all 0.3s ease; display: inline-block; } .toggle-switch:after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } input:checked + .toggle-switch { background: #2097FF; } input:checked + .toggle-switch:after { left: calc(100% - 18px); } input[type="checkbox"] { display: none; } /* 설정 패널 */ .notification-settings { display: none; padding: 16px 20px; border-top: 1px solid #f1f1f1; background: #f8f9fa; } /* 버전 정보 */ .version-info { text-align: center; padding: 30px 0; margin-top: 20px; } .version-info span { font-size: 12px; color: #999; letter-spacing: 0.5px; } /* 툴팁 스타일 */ .help-icon { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #E2E8F0; color: #666; font-size: 12px; margin-left: 4px; cursor: pointer; transition: all 0.2s ease; z-index: 2; } .help-icon:hover { background: #CBD5E0; } .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #D5E9FB; color: #2097FF; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 300; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 1000; pointer-events: none; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #D5E9FB transparent transparent transparent; } .help-icon:hover .tooltip { opacity: 1; visibility: visible; bottom: calc(100% + 10px); } /* 반응형 스타일 */ @media screen and (min-width: 1024px) { #mypage .mypage { max-width: 640px; margin: 30px auto 80px; border: 0 !important; } } @media screen and (max-width: 1024px) { #mypage .mypage { max-width: 640px; margin: 30px auto 80px; border: 0 !important; } } @media screen and (max-width: 768px) { #mypage .info .con .info-detail { font-size: 13px; gap: 4px; } #mypage .mypage { margin: 30px 30px; } .records-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .record-card { padding: 12px; } .record-value { font-size: 16px; } .record-label { font-size: 13px; } .study-item { padding: 14px 16px; } .study-title { font-size: 16px; } .study-detail { font-size: 12px; gap: 4px; } .show-more-btn { font-size: 13px; padding: 6px 14px; } } @media screen and (max-width: 480px) { .records-container { padding: 12px !important; } .record-icon { font-size: 20px; } .tooltip.right{left: -350%;} .tooltip.left{left: 77%;} .tooltip.right::after{left: 77%;} .tooltip.left::after{left: -350%;} } /* 이용권 정보 */ .coupon-number { font-family: monospace; letter-spacing: 0.5px; } .expiry-date { color: #2097FF; } @media screen and (max-width: 768px) { .coupon-number { font-size: 12px; } } .jc-bs3-container { width:50%; } .jconfirm .jconfirm-holder { padding-left:33%; } @media (max-width:540px) { .jc-bs3-container { width:95%; } .jconfirm .jconfirm-holder { padding-left:4%; } }