.navigation{font-size:.9rem;padding:.35rem 0 .5rem;font-family:'malgun'} .navigation ul{font-size:0;} .navigation li {display:inline-block; position:relative; color:#999; font-weight:500; font-size:12px; margin-left:.4rem; margin-left:.65rem; } .navigation li:last-child {color:var(--color-title); font-size:13px; font-weight:700;} .navigation li:nth-child(1) {padding-left:0; margin-left:0; } .navigation li:nth-child(1):before { display:none; } .navigation li:before {content:"\e940"; font-family:'xeicon'; font-weight:normal; font-size:.9rem; color:#999; display:inline-block; vertical-align:middle; margin-right:.5rem;} .popup .navigation li {font-size:.85rem;} .popup .navigation li:last-child {font-size:.95rem; } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* 상단공통검색 ///////////////////////////////////////////////////////////////////////////////////////////*/ .search-wrap { background-color:#fff; padding:.85rem; display:flex;align-items: flex-start; gap:.5rem; } .search-wrap .row-wrap {width:calc(100% - 160px); display:flex; flex-direction: column; gap:.5rem; } .search-wrap .row {width:100%; font-size:0; display:flex;flex-wrap: wrap; gap:4px !important; } .search-wrap .row.flex-between { display:flex; justify-content: space-between;align-items: center; } .search-wrap .row.flex-row {display:flex; } .search-wrap em { display:inline-block; vertical-align:middle; padding-right:5px; width:85px; text-align:right; line-height:28px; font-size:13px; font-weight:600; color:#333; font-family:'malgun';margin:0; } .search-wrap span {display:flex; gap:4px !important; margin:0; } .search-wrap input, .search-wrap select, .search-wrap button {margin:0 !important;} .search-wrap .row-wrap .btn {display:inline-flex; align-items: center; padding:0; font-size:.85rem;border:1px solid var(--color-border-basic); } .search-wrap .btn-wrap {width:160px; gap:.25rem; flex-wrap: nowrap; } .search-wrap .btn-wrap .btn {display:flex; justify-content: center;align-items: center; width:100%; padding:0; font-size:13px; font-family:sans-serif, 'malgun', 'pretendard'} .layer_center .search-wrap {padding: .85rem 1rem; padding-left:0 } .shadow {box-shadow:2px 2px 4px rgba(0,0,0,0.1)} /* 검색영역 기간선택 */ .period-wrap {display:flex; gap:0; } .period-wrap input[type=radio] + label {width:60px; padding:0; height:28px; display:flex; justify-content: center;align-items: center; color:#111; border:1px solid var(--color-border-basic);border-left:0; border-radius:0; } .period-wrap input[type=radio] + label:after {display:none;} .period-wrap input[type=radio]:checked + label {background-color:var(--color-default); color:#fff; border-color:var(--color-default)} .period-wrap input[type=radio]:checked + label:after {display:none;} .period-wrap input[type=radio]:first-child + label {border-radius: var(--radius-default) 0 0 var(--radius-default) ; border-left:1px solid var(--color-border-basic); } .period-wrap input[type=radio] + label:last-child {border-radius: 0 var(--radius-default) var(--radius-default) 0 } @media screen and ( max-width:1024px ) { .search-wrap {padding-left:0;} .search-wrap .row-wrap {width:calc(100% - 80px);gap:.3rem;} .search-wrap .btn-wrap {width:80px;flex-direction: column;} } /* 견적서 선택 */ .check-item {display:flex; gap:0; padding-right:3px; flex-wrap: nowrap; } .check-item input[type=radio] + label {width:50%; padding:0; height:36px; font-size:.95rem; font-weight:500; display:flex; justify-content: center;align-items: center; color:#646a7a; background-color:#fff;margin-left:-1px; border:1px solid var(--color-border-basic); border-radius:0;box-shadow:1px 1px 3px rgba(0,0,0,0.1) ;z-index:0 } .check-item input[type=radio] + label:before { content: "\e929";font-family:'xeicon'; font-size:1.1rem; color:#CDD3E4;padding-right:1.5px; width:20px;height:20px; background-color:#fff; border:1px dashed #CDD3E4; display:inline-flex; align-items: center; justify-content: center; margin-right:5px; outline:0px; border-radius:30px; } .check-item input[type=radio] + label:after{display:none; } .check-item input[type=radio]:checked + label {color:var(--color-default);border-color:var(--color-default); z-index:10; } .check-item input[type=radio]:checked + label:before {background-color:var(--color-default); color:#fff; border:1px dashed var(--color-default);} .check-item input[type=radio]:first-child + label {border-radius: var(--radius-default) 0 0 var(--radius-default) ; margin:0; } .check-item input[type=radio] + label:last-child {border-radius: 0 var(--radius-default) var(--radius-default) 0 } .check-item input[type=radio]:first-child:checked + label {margin-left:0; } .select-item {display:flex; align-items: center; gap:0; padding-right:3px; height:36px;font-size:1rem; } .select-item select {width:150px; height:100%; border-radius:var(--radius-default) 0 0 var(--radius-default);margin:0; box-shadow:1px 1px 3px rgba(0,0,0,0.1) ; z-index:0 } .select-item input[type="text"] {width:calc(100% - 150px); height:100%; border-radius: 0 var(--radius-default) var(--radius-default) 0; padding-right:1rem; text-align:right; font-weight:500; color:#333; margin:0; box-shadow:1px 1px 3px rgba(0,0,0,0.1) ; z-index:5; font-family:'pretendard'; margin-left:-1px; z-index:0} .select-item select:focus, .select-item input[type="text"]:focus {z-index:5 !important;} .select-item input[type=text][readonly] {background-color:#EDF0F9;box-shadow:1px 1px 3px rgba(0,0,0,0.1) !important;border:1px solid var(--color-border-basic) !important; } .select-item input[type=text][readonly]:focus { border:1px solid var(--color-border-basic) !important; } .select-item input[type=text][readonly]::placeholder {color:var(--color-title) !important} .select-item.type2 input[type="text"].number { width:150px; text-align:right;margin:0; border-radius:var(--radius-default) 0 0 var(--radius-default);} .select-item.type2 select {width:80px; height:100%; border-radius:0; margin-left:-1px; } .select-item.type2 input[type="text"].price {width:calc(100% -230px); text-align:right;} /* disabled */ .check-item input[type=radio]:disabled + label {border-color:#ddd; color:#ddd; background-color:#f9f9f9;} .check-item input[type=radio]:disabled + label:before {background-color:transparent; } .select-item select:disabled {border-color:#ddd; color:#ddd; } .select-item input[type="text"]:disabled {border-color:#ddd !important; color:#ddd;} /* 마이페이지 카카오연동 */ .mypage .check-item input[type=radio] + label{ height:var(--hei-form); } .mypage .check-item input[type=radio]:first-child + label {border-radius: var(--radius-sign) 0 0 var(--radius-sign) ; } .mypage .check-item input[type=radio] + label:last-child {border-radius: 0 var(--radius-sign) var(--radius-sign) 0 } .pop-content .check-item {width:100%; margin-top:1rem; padding:0 !important;} .pop-content .check-item input[type=radio] + label{ height:var(--hei-form); } .pop-content .check-item input[type=radio]:first-child + label {border-radius: var(--radius-sign) 0 0 var(--radius-sign) ; } .pop-content .check-item input[type=radio] + label:last-child {border-radius: 0 var(--radius-sign) var(--radius-sign) 0 } /* 차량개별등록 */ .ess:after {content:"*"; color:var(--color-red); font-size:.9rem; font-weight:bold; position:absolute; right:3px; top:-7px; } .popup-regist { padding:0 1rem 0 0rem; background-color:#fff; border:0; } .popup-regist .h2 {margin-bottom:0; width:100px; font-size:.95rem; color:var(--color-dark-blue); background-color:#f6f8fc; padding:.65rem 1rem; display:flex; align-items: center; padding-right:0; border-right:1px dashed var(--color-border-card) } .popup-regist .row {display:flex; flex-direction: row; padding: 0rem 0; } .popup-regist .row.line {border-bottom:1px solid #e7e9ef; } .popup-regist .row-list {display:flex; flex-wrap: wrap;gap: .35rem 0; width:calc(100% - 100px); padding:.5rem 0; } .popup-regist .row-list li {width:20%; display:flex; flex-direction: row; align-items: center; gap:0px 0; } .popup-regist .row-list li .regist-date{width:calc(100% - 90px); display:flex; flex-direction: row; align-items: center; gap:5px; } .popup-regist .row-list li .regist-date select{width:100% } .popup-regist .row-list li .regist-date select.year {width:60%;} .popup-regist .row-list li .regist-date select.month {width:40%;} .popup-regist .row-list li .item-note {width:calc(100% - 90px); display:flex; flex-direction: row; align-items: center; gap:5px; } .popup-regist .row-list li .slt-note {width:calc(100% - 10px);} .popup-regist .row-list li .btn-note {width:80px; background-color:#636876; color:#fff;} .popup-regist .row-list em{width:90px; padding-right:10px; text-align:right; position:relative; color:#636876; font-size:.85rem; font-weight:500; } .popup-regist .row-list input[type="text"], .popup-regist .row-list select, .popup-regist .row-list .form-sch, .popup-regist .row-list .calendar, .popup-regist .row-list .form-txt { width:calc(100% - 90px); margin:0; } @media screen and ( max-width:1200px ) { .popup-regist .row-list li {width:25%; } } /* 견적서 > 견적조건 */ .row_estimate .h3 {margin-top:1.1rem; } .row_estimate .h3:nth-child(1) {margin-top:0;} .row_estimate input[type="text"] { width:calc(100% - 3px); height:36px; box-shadow:1px 1px 3px rgba(0,0,0,0.1) !important;border:1px solid var(--color-border-basic); text-align:right; padding-right:1rem;font-weight:600;color:var(--color-title); font-family:'pretendard'; } .row_estimate input[type="text"]::placeholder {color:var(--color-title); font-weight:600; margin:0;} .img-preview {display:flex;position:relative; min-height:500px; z-index:0;border-radius:.25rem;overflow: hidden;} .img-preview .img {width:100%; height:100%; background-repeat: no-repeat; background-position: center center; background-size:cover; position:relative;} .img-preview img {width:100%;} .img-preview:before {content:"좌측에서 차량이미지를 선택해 주세요."; font-size:1.05rem; color:#b6bed4; position:absolute; left:0; top:0; width:100%; height:100%;display:flex; justify-content: center;flex-direction: column; align-items: center; background-color:#f2f5f9; border:1px solid #d6dced; border-radius:.25rem;z-index:-1 } .img-preview:after {content:''; position:absolute; left:50%; top:40%; transform: translate(-50%,-50%); background-size:auto 60px; width:50%; height:80px; background-repeat:no-repeat; background-position:center top; opacity:.5; z-index:-1; background-image: url("data:image/svg+xml,%3Csvg width='484' height='174' viewBox='0 0 484 174' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M309.713 0.428085C338.357 0.352085 370.621 2.6561 408.17 8.4381C412.602 9.0581 455.302 33.4151 466.814 50.2261C478.326 67.0381 482.264 99.0391 482.264 99.0391C485.372 112.144 483.484 133.805 482.617 135.911C481.447 140.471 474.837 144.298 463.484 147.065C462.16 126.008 444.71 109.6 423.61 109.574C401.518 109.574 383.61 127.484 383.61 149.574C383.624 151.338 383.755 153.099 384.002 154.846C383.412 154.854 382.742 154.87 382.182 154.876L142.916 156.866C143.37 154.462 143.602 152.021 143.609 149.574C143.609 127.484 125.699 109.574 103.609 109.574C81.5172 109.574 63.6092 127.484 63.6092 149.574C63.6092 152.242 63.8752 154.904 64.4052 157.518L2.21921 158.035C0.901208 135.223 -4.64077 111.265 9.24323 91.3151C14.6992 83.4751 41.1732 69.2771 108.273 58.6551C142.941 41.2451 176.776 21.5051 213.623 10.1931C242.033 4.55808 272.883 0.525085 309.713 0.428085ZM326.91 12.4121C320.912 12.4561 315.41 12.7021 310.896 13.2221L303.609 61.5741C345.039 56.4811 387.256 51.9111 409.573 34.0741C409.223 28.5741 401.613 20.6121 393.067 17.5681C388.227 15.8441 352.9 12.2221 326.909 12.4121H326.91ZM292.285 12.7601C267.273 13.0241 230.253 15.4501 204.783 26.7001C192.581 32.3501 169.609 45.5741 154.246 57.2501L160.596 67.7851C202.302 65.9051 257.884 63.5821 280.696 61.0051L292.285 12.7601ZM423.61 125.574C429.975 125.574 436.08 128.103 440.581 132.604C445.082 137.104 447.61 143.209 447.61 149.574C447.61 155.939 445.082 162.044 440.581 166.545C436.08 171.046 429.975 173.574 423.61 173.574C417.245 173.574 411.141 171.046 406.64 166.545C402.139 162.044 399.61 155.939 399.61 149.574C399.61 143.209 402.139 137.104 406.64 132.604C411.141 128.103 417.245 125.574 423.61 125.574ZM103.61 125.574C109.975 125.574 116.08 128.103 120.581 132.604C125.082 137.104 127.61 143.209 127.61 149.574C127.61 155.939 125.082 162.044 120.581 166.545C116.08 171.046 109.975 173.574 103.61 173.574C97.245 173.574 91.1405 171.046 86.6396 166.545C82.1388 162.044 79.6102 155.939 79.6102 149.574C79.6102 143.209 82.1388 137.104 86.6396 132.604C91.1405 128.103 97.245 125.574 103.61 125.574Z' fill='%23c4ccd7'/%3E%3C/svg%3E%0A"); } /* PC공통 견적서 영역 */ .estimate-box {border:0; border:1px solid var(--color-border-card); background-color:#fff !important;} /* ************************************************ // **** Tab **** ************************************************** */ .tab_menu { position:relative; display:flex; justify-content: flex-start; gap:1rem; margin-bottom:1.5rem;z-index:5 } .tab_menu:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;background-color:#ddd; z-index:-1} .tab_menu li { height:2.8rem; line-height:2.8rem;padding:0 1rem; font-size:1.05rem; font-weight:500; color:#666; cursor:pointer; border-bottom:2px solid transparent; } .tab_menu li.on {border-color:#333; color:#333; font-weight:800} /* FAQ */ .toggle-wrap h2 { position:relative;display:block; font-size:16px; line-height:25px; padding:12px 0 12px; font-weight:bold; color:#333;border-bottom:1px dashed #ddd; } .toggle-wrap h2 .count {display:inline-block; vertical-align:top; margin-left:5px; height:25px; line-height:23px; padding:0 10px; border-radius:50px; background-color:#fff; font-size:13px; color:#333; border:1px solid #ccc; } .toggle-wrap h2 .togglebtn {position:absolute;right:0px;top:0px;z-index:102;width:45px;height:45px; cursor:pointer; } .toggle-wrap .toggle_dl { margin-bottom:0px;} .toggle-wrap .toggle_dl .title {position:relative; } .toggle-wrap .toggle_dl .title:after {content:'\e946'; position:absolute; right:12px; top:11px;font-family :'xeicon'; color:#333;font-size:21px; cursor:pointer; transition: all 0.2s ease-in;} .toggle-wrap .toggle_dl .title.on:after { transform:rotate(180deg); } .toggle-wrap .toggle_dl .cont {display:block; padding:15px 5px; } .priceWrap {display:inline-block; vertical-align:middle;position:relative; height:32px;border-radius:4px; border:1px solid #d0d3df; } .priceWrap em {position:absolute; right:0; top:0; height:32px; line-height:32px; width:30px; text-align:left; font-size:13px; color:#888; } .priceWrap input[type="text"] { display:block; width:100%; height:30px !important;line-height:30px !important; background-color:#fff !important; padding-right:33px; border:0px !important; text-align:right; color:#fd4a57 !important; font-size:15px; font-weight:bold; } .caseWrap {display:inline-block; vertical-align:middle;position:relative; height:32px;border-radius:4px; border:1px solid #d0d3df; } .caseWrap em {position:absolute; right:0; top:0; height:32px; line-height:32px; width:25px; text-align:left; font-size:13px; color:#888; } .caseWrap input[type="text"] { display:block; width:100%; height:30px !important;line-height:30px !important; background-color:#fff !important; padding-right:28px; border:0px !important; text-align:right; font-size:15px; font-weight:bold; } .auc-date {display:block; font-size:14px; color:#333;line-height:1.3em;padding-bottom:5px; } .auc-date span {display:inline-block; vertical-align:middle;} .auc-date span:first-child{color:#777; width:100px; } .auc-list {display:block; padding:8px 0 0; margin:0; text-align:right; font-size:13px; text-decoration:underline; } .auc-list a { color:#333 } .auc-list a:hover {color:#03afe4} /* faq */ .faq_list {border-top:1px solid var(--color-grey3); letter-spacing:-.06em; font-size:1rem;} .faq_list .item_wrap {display:flex; flex-direction: column; width:100%; border-bottom:1px solid #eee; } .faq_list .item_wrap .ico:before{content:'';display:inline-block;font-size:1.125rem; width:36px; height:36px; line-height:36px; border-radius:50%; font-weight:500; text-align:center; } .faq_list .item_wrap .faq_qt {position:relative; display:flex; flex-start; align-items: center; flex-direction: row; flex-wrap: nowrap; padding:1rem 1rem;cursor:pointer } .faq_list .item_wrap .faq_qt .ico:before {content:'Q'; color:#fff; background-color:var(--color-default); } .faq_list .item_wrap .faq_qt .title {width:calc(100% - 50px); padding-left:1rem; font-weight:500; color:var(--color-grey3)} .faq_list .item_wrap .faq_qt.on .title {font-weight:bold; color:var(--brand-color-main)} .faq_list .item_wrap .faq_qt .sth {color:var(--color-grey8); padding-right:.5rem;} .faq_list .item_wrap .faq_answer { background-color:#f2f5f7; padding:1rem; display:flex; flex-start; align-items: flex-start; flex-direction: row; } .faq_list .item_wrap .faq_answer .cont {width:calc(100% - 50px); padding:0.65rem 2.5rem 1rem 1rem; font-size:1rem; font-weight:500; line-height:1.7rem; color:var(--color-gray5)} .faq_list .item_wrap .faq_qt:after {content: "";display: block; position: absolute;top: 50%;right: 1.5rem;width: 1.5rem; height: 1.5rem; margin-top: -0.75em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 1.41 1.41 0l6 6-6 6L0 10.59 4.58 6z' transform='rotate(90 5 13)' style='fill:%333'/%3E%3C/svg%3E%0A"); } .faq_list .item_wrap .faq_qt.on:after { transform: rotate(180deg) } /* btn */ .btnWrap {display:block; text-align:center; font-size:0; padding:15px 10px 0px;margin:0; } /*/////////////////////////////////////////////////////////////////////////////////////////*/ /* Login Join id pw search ///////////////////////////////////////////////////////////////////////////////////////////*/ /* 로그인 */ .bg_login {display:block; width:100%; height:100vh; background:url('../images/bg_login.jpg') no-repeat center ; background-size:cover; } .card-login-wrap { width:1200px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); display:flex; justify-content: flex-end; background-color:transparent; z-index:10 } .login-wrap {width:500px; background-color:#fff; display:flex; flex-direction: column; align-items: center; padding:4rem 4.5rem 3.5rem; border-radius:var(--radius-sign);box-shadow:10px 10px 50px -5px rgba(0,0,0,0.3)} .card-login-wrap .btn { display:flex; justify-content: center; align-items: center;width:100%;height:var(--hei-sign-form); font-family:'pretendard'; font-weight:700; color:#fff; background-color:var(--color-default);border-radius:var(--radius-sign);font-size:1rem; } .card-login-wrap .btn.kakao {background-color:#F5E101; color:#2F2626; margin-top:3rem;} .card-login-wrap .btn.kakao:before {content:"";display:inline-flex; font-size:2.1rem; width:var(--hei-sign-form);height:var(--hei-sign-form); background:url(../images/icon_kakao.png) no-repeat center ; background-size:auto 2.25rem;} .card-login-wrap .form-link {padding-top:.35rem;} .card-login-wrap .form-link a {position:relative; font-size:.9rem; line-height:1rem; font-weight:500; color:#7B8191; margin-left:.5rem; padding-left:.5rem; } .card-login-wrap .form-link a.user {color:var(--color-default); text-decoration:underline;} .card-login-wrap .form-link a:hover {color:var(--color-default)} .card-login-wrap .form-link a:before {content:''; position:absolute; left:0; top:0; width:1px; height:14px; background-color:#dedede; } .card-login-wrap .form-link a:nth-child(1) {padding-left:0; margin-left:0; } .card-login-wrap .form-link a:nth-child(1):before {display:none; } .card-login-wrap .txt-line {margin-top:.6rem; } .card-login-wrap .txt-line.copy { margin-top:4rem; text-align:center; font-size:.8rem; line-height:1.3rem; color:#999; } .card-login-wrap button:disabled, .card-login-wrap button[disabled]{ background-color:#B9BFCD; } .card-login-wrap .form-control {height:var(--hei-sign-form);} .sign-head {display:flex; flex-direction: column;align-items: center; } .sign-head.line {border-bottom:1px solid var(--color-border1); padding-bottom:2rem; } .sign-head p {font-size:1rem; line-height:1.3rem; font-weight:400; color:var(--color-light-gray); } .sign-head h1 {height:35px; width:130px; background:url('../images/logo.png') no-repeat center ;} .sign-head h2 {font-size:1.3rem; line-height:1.5rem; color:var(--color-title); font-weight:700; margin-top:.5rem; } .sign-head .txt-exp {font-size:.9rem; line-height:1.3rem; color:var(--color-gray); margin-top:1rem; } @media screen and (max-width:1200px){ .card-login-wrap {width:100%; padding:1rem; } } @media screen and (max-width:670px){ .bg_login {background:#fff; } .card-login-wrap {padding:0; top:0; left:0; transform: translate(0,0); } .card-login-wrap .sign-wrap {width:100%; padding:2.5rem 2rem 2rem; background:none; box-shadow:none;} .card-login-wrap .btn-login.kakao { margin-top:2rem;} .card-login-wrap .txt-line.copy { margin-top:2rem; } .card-login-wrap .form-wrap {margin-top:1rem; } } /* 회원가입 */ .bg_join { background-color:#ebf0f8; } .bg_join_wrap {position:fixed; left:0; top:0; width:100%; height:40%; z-index:-1; background-color:#cedff4} .card-wrapper {padding:3rem 0 3rem;} .card-form-wrap { display:block; width:500px; margin:0 auto; background-color:#fff; border-radius:var(--radius-sign); padding:3.5rem; box-shadow:5px 5px 15px -5px rgba(179,189,217, .3); } .card-form-wrap .btn {font-family:'pretendard';} .card-form-wrap.vh-center {position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); margin:0;} @media screen and (max-width:500px){ .bg_join {background-color:#fff;} .card-wrapper {padding:0;} .card-form-wrap {margin:0; width:100%; padding:2rem 1.25rem; box-shadow:none; border-radius:0; } .card-form-wrap.vh-center {position:absolute; top:0; left:0; transform: translate(0,0);} } /* 완료 결과 */ .result-info {margin:0} .result-info h2 {font-size:1.12rem; line-height:1.6rem; font-weight:700;color:#444; margin-bottom:1rem; text-align:center; } .result-info h2 strong {color:var(--color-default); font-weight:inherit;} .result-info h3 {font-size:.95rem; line-height:1.4rem; color:#777; text-align:center; font-weight:400} .result-info ul { padding-top:1rem;text-align:left; border-top:1px solid #555} .result-info li {display:flex; width:100%;justify-content: space-between; align-items: flex-start;padding:.85rem 0.5rem; border-bottom:1px solid #eee;} .result-info li span {font-size:0.985rem; line-height:1.3rem; } .result-info li span:first-child {width:120px; color:#888; } .result-info li span:first-child + span {color:var(--color-grey3); font-weight:bold; color:var(--brand-color-main) } .checkImg {margin:0 auto; } #check-group { animation: 0.32s ease-in-out 1.03s check-group; transform-origin: center;} #check-group #check { animation: 0.34s cubic-bezier(0.65, 0, 1, 1) 0.6s forwards check; stroke-dasharray: 0, 75px; stroke-linecap: square; stroke-linejoin: square;} #check-group #outline {animation: 0.38s ease-in outline; transform: rotate(0deg); transform-origin: center;} #check-group #white-circle { animation: 0.35s ease-in 0.35s forwards circle; transform: none; transform-origin: center;} @keyframes outline { from { stroke-dasharray: 0, 345.576px; } to { stroke-dasharray: 345.576px, 345.576px; } } @keyframes circle { from { transform: scale(1); } to { transform: scale(0); } } @keyframes check { from { stroke-dasharray: 0, 75px; } to { stroke-dasharray: 75px, 75px; } } @keyframes check-group { from { transform: scale(1); } 50% { transform: scale(1.09); } to { transform: scale(1); } } .checkmark__circle{stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width:4;stroke-miterlimit: 10;stroke: var(--color-default);fill: none;animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards} .checkmark{width: 70px;height: 70px; /* 사이즈조절 */ border-radius: 50%;display: block;stroke-width: 3;stroke: #fff;stroke-miterlimit: 10;margin: 0rem auto 1.65rem;box-shadow: inset 0px 0px 0px var(--color-default);animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both} .checkmark__check{transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards} @keyframes stroke{ 100%{stroke-dashoffset: 0} } @keyframes scale{ 0%, 100%{transform: none} 50%{transform: scale3d(1.1, 1.1, 1)} } @keyframes fill{ 100%{box-shadow: inset 0px 0px 0px 50px var(--color-default)}/* 사이즈조절 */ } /* 마이페이지 */ .mypage {margin:0 auto; width:1000px; padding:4rem 3rem; display:flex; flex-direction: row; gap:7rem; align-items: flex-start; justify-content: space-between;} .mypage .head {padding:0rem 0;} .mypage .head .profile {width:8rem; height:8rem; border-radius:50%; margin-bottom:1rem; background-color:#f0f0f0; display:flex; justify-content: center; align-items: center;} .mypage .head .profile:before {content:"\F004"; font-family:"Material Design Icons"; font-size:4rem; color:#999; display:inline-block; } .mypage .head h2 {font-size:2.125rem; font-weight:700; line-height:2.8rem; } .mypage .head .exp {font-size:1.1rem; color:#888; line-height:1.5rem; margin-top:.5rem; } .mypage .content{padding:0rem 0;font-size:1rem; line-height:1.5rem;width:45%; } .mypage .form-group {margin-top:1.5rem;} @media screen and (max-width:1200px){ .mypage {width:100%;padding:3rem 3rem; gap:3rem;} .mypage .content{ width:50%; } }