@charset "utf-8"; header{ height:66px; } header .header--wrapper{ width:100%; position:fixed; top:0px; left:0px; z-index: 10; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:center; background:#fff; height:66px; } header .header--wrapper .header--contents{ width:100%; max-width:1200px; display:flex; align-items:center; justify-content:flex-start; } header .header--wrapper .header--contents .logo{ width:97px; min-width:97px; height:30px; background:url(../img/logo.png) no-repeat center; background-size: contain; margin-left:20px; } header .header--wrapper .header--contents .gnb--wrapper{ margin-left:110px; width:100%; display: flex; } header .header--wrapper .header--contents .gnb--wrapper > a{ font-weight: 500; font-size: 17px; text-align: center; letter-spacing: -0.03em; color: #222222; margin-right:50px; } header .header--wrapper .header--contents .gnb--wrapper > a:last-child{ margin-right:0px; } header .header--wrapper .header--contents .gnb--wrapper > a.actv{ color:#417FFA; font-weight:bold; } header .header--wrapper .header--contents .log--menu--wrap{ display: flex; } header .header--wrapper .header--contents .log--menu--wrap a{ display: inline-flex; align-items: center; justify-content: center; width:100px; height:43px; border: 1px solid rgba(145, 161, 193, 0.3); border-radius: 50px; margin-right:15px; font-weight: 400; font-size: 14px; text-align: center; letter-spacing: -0.03em; color: #5C6A85; } header .header--wrapper .header--contents .log--menu--wrap a.on{ border: 1px solid rgba(65, 127, 250, 0.3); color: #417FFA; font-weight:500; } header .header--wrapper .header--contents .log--menu--wrap a:last-child{ margin-right:0px; } .home--contents{ background:url(../img/main_bg.png) no-repeat center 148px; } .main--search{ padding-top:155px; } .main--search .main--search--wrap h2{ font-weight: 700; font-size: 55px; text-align: center; letter-spacing: -0.03em; color: #333333; line-height: 1.5; } .main--search .main--search--wrap .main--search--form{ display: flex; align-items: center; justify-content: center; margin-top:70px; } .main--search .main--search--wrap .main--search--form input{ width:100%; max-width:450px; height: 72px; background: #FFFFFF; border: 2px solid #EEEEEE; border-radius: 12px; padding-left:30px; } .main--search .main--search--wrap .main--search--form input::placeholder{ font-weight: 400; font-size: 17px; letter-spacing: -0.03em; color: #B7B7B7; } .main--search .main--search--wrap .main--search--form .search--btn{ width: 150px; height: 72px; background: #417FFA; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; margin-left:20px; } .middle--contents{ margin-top:228px; padding-bottom:160px; } .middle--contents .middle--contents--wrap{ width:100%; display:flex; justify-content:center; } .middle--contents .middle--contents--wrap .step--wrap{ width:100%; max-width:1200px; background: url(../img/phone_bg.png) no-repeat right center; padding-top:58px; padding-bottom:98px; } .middle--contents .middle--contents--wrap .step--wrap > h2{ font-weight: 300; font-size: 40px; line-height: 100%; letter-spacing: -0.03em; color: #111111; } .middle--contents .middle--contents--wrap .step--wrap > h2 span{ font-weight: 700; } .middle--contents .middle--contents--wrap .step--wrap > ul{ position: relative; margin-top:80px; } .middle--contents .middle--contents--wrap .step--wrap > ul:after{ content:''; display: block; width:1px; height:100%; position: absolute; top:0px; left:24px; z-index: -1; background: #eee; } .middle--contents .middle--contents--wrap .step--wrap > ul > li{ display: flex; align-items: center; justify-content:flex-start; margin-bottom:55px; } .middle--contents .middle--contents--wrap .step--wrap > ul > li:last-child{ margin-bottom:0px; } .middle--contents .middle--contents--wrap .step--wrap > ul > li .numb{ width: 50px; height: 50px; border-radius: 50px; background: #EEEEEE; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 13px; letter-spacing: -0.03em; color: #A0A0A0; } .middle--contents .middle--contents--wrap .step--wrap > ul > li .numb.on{ color:#fff; background: #417FFA; } .middle--contents .middle--contents--wrap .step--wrap > ul > li .desc{ margin-left:25px; } .middle--contents .middle--contents--wrap .step--wrap > ul > li .desc h2{ font-weight: 500; font-size: 18px; line-height: 100%; letter-spacing: -0.03em; color: #111111; padding:0px; margin:0px; } .middle--contents .middle--contents--wrap .step--wrap > ul > li .desc p{ font-weight: 350; font-size: 16px; line-height: 100%; letter-spacing: -0.03em; color: #777777; margin-top:12px; } footer{ width:100%; background: #333; } footer > div{ width:100%; max-width:1200px; display:flex; justify-content:flex-start; padding-top:35px; padding-bottom:45px; } footer > div .logo{ width:161px; height:50px; background: url(../img/foot_logo.png) no-repeat center; margin-right:104px; } footer > div > div{ padding:0 20px; } footer > div > div > h2{ font-weight: 500; font-size: 15px; line-height: 100%; letter-spacing: -0.03em; color: #fff; margin-bottom:24px; } footer > div > div p{ font-weight: 350; font-size: 13px; line-height: 2; letter-spacing: -0.03em; color: #FFFFFF; } footer > div > div p.copy--right{ margin-top:40px; font-weight: 350; font-size: 13px; line-height: 100%; text-align: center; letter-spacing: -0.03em; text-transform: uppercase; color: #ACACAC; } .main--visual{ width:100%; height:416px; background:url(../img/mob_visual.jpg) no-repeat center; background-size: cover; } .main--visual .main--visual--title--wrap{ width:100%; max-width:1200px; margin:0 auto; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; padding:0 20px; } .main--visual .main--visual--title--wrap > h2{ font-weight: 700; font-size: 24px; letter-spacing: -0.03em; color: #FFFFFF; padding-top:50px; } .main--visual .main--visual--title--wrap > p{ font-weight: 300; font-size: 15px; letter-spacing: -0.03em; line-height: 1.6; color: #EBEBEB; margin-top:15px; } .main--visual .main--visual--title--wrap .main--visual--contents{ width:100%; margin-top:45px; } .main--visual .main--visual--title--wrap .main--visual--contents .car--find{ width:100%; height: 80px; background: #FFFFFF; border-radius: 12px; display: flex; align-items:center; justify-content: flex-start; position:relative; } .main--visual .main--visual--title--wrap .main--visual--contents .car--find > div:nth-of-type(1){ width:147px; padding-left:30px; box-sizing: border-box; border-right:1px solid #eee; height:76px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; } .main--visual .main--visual--title--wrap .main--visual--contents .car--find > div:nth-of-type(2){ padding-left:30px; } .main--visual .main--visual--title--wrap .main--visual--contents .car--find > div >h2{ font-weight: 400; font-size: 13px; line-height: 100%; letter-spacing: -0.03em; color: #7B838A; padding:0px; margin:0px; } .main--visual .main--visual--title--wrap .main--visual--contents .car--find > div > div{ font-weight: 400; font-size: 15px; line-height: 100%; color: #000000; margin-top:12px; } .main--visual .main--visual--title--wrap .main--visual--contents .car--find--btn{ width:100%; height: 60px; background: #1E75FF; border-radius: 8px; font-weight: 700; font-size: 14px; color: #FFFFFF; margin-top:15px; } .car--list--wrap{ max-width:1200px; margin:0 auto; padding-top:45px; padding-left:20px; } .car--list--wrap .title--wrapper{ display:flex; align-items: center; justify-content: space-between; } .car--list--wrap .title--wrapper h2{ font-weight: 700; font-size: 17px; line-height: 100%; letter-spacing: -0.03em; color: #000000; } .car--list--wrap .title--wrapper .more--btn{ font-weight: 700; font-size: 15px; line-height: 100%; letter-spacing: -0.03em; color: #8B919C; } .car--list--wrap .title--wrapper select, .car--list--wrap .title--wrapper input{ height:45px; border: 1px solid #D8DEE8; border-radius:10px; } .car--list--wrap .title--wrapper button{ border-radius:10px; } .car--list--wrap ul{ margin-top:40px; } .car--list--wrap ul > li{ max-width:234px; } .car--list--wrap ul > li .car--box--wrap{ background: #F8F8FA; border-radius: 25px; padding:35px 0px; width: 234px; height: 389px; display: flex; align-items:center; justify-content:flex-start; flex-direction:column; } .car--list--wrap ul > li .car--box--wrap .car--name{ width:186px; max-width:186px; text-overflow: ellipsis; white-space: nowrap; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 18px; line-height: 100%; color: #333237; text-align: left; } .car--list--wrap ul > li .car--box--wrap.on{ border: 1px solid #1E75FF; box-sizing: border-box; background:#fff; } .car--list--wrap ul > li .car--box--wrap .thumb--wrap{ height:160px; min-height:160px; width:186px; display: flex; align-items: center; justify-content: center; overflow:hidden; } .car--list--wrap ul > li .car--box--wrap .car--info{ width:186px; } .car--list--wrap ul > li .car--box--wrap .car--info dl{ display: flex; justify-content: flex-start; margin-bottom:15px; } .car--list--wrap ul > li .car--box--wrap .car--info dl:last-child{ margin-bottom:0px; } .car--list--wrap ul > li .car--box--wrap .car--info dl dt, .car--list--wrap ul > li .car--box--wrap .car--info dl dd{ font-weight: 350; font-size: 14px; line-height: 100%; color: #5C5B63; } .car--list--wrap ul > li .car--box--wrap .car--info dl dt{ margin-right:3px; } .car--list--wrap ul > li .car--box--wrap .status--wrap{ width:186px; margin-top:30px; } .car--list--wrap ul > li .car--box--wrap .status--wrap span{ height: 30px; display: inline-flex; align-items: center; background: #333237; border-radius: 50px; padding:0 15px; text-align: center; font-weight: 500; font-size: 13px; color: #FFFFFF; } .car--list--wrap ul > li .car--box--wrap .status--wrap span.status--companion{ border: 1px solid rgba(51, 50, 55, 0.3); background:#fff; color: #333237; } .car--list--wrap ul > li .car--box--wrap .status--wrap span.tr--delay{ background: #ACBCCF; border-radius: 50px; color:#fff!important; } .car--list--wrap ul > li .car--box--wrap .status--wrap span.tr--fail{ background: #E12544; border-radius: 50px; color:#fff!important; } .car--list--wrap ul > li .car--box--wrap .status--wrap span.sell--fail{ background: #FB4F29; border-radius: 50px; color:#fff!important; } .car--list--wrap ul > li .car--box--wrap .status--wrap span.ready{ background: #A5AEBC; color:#fff!important; } .car--list--wrap ul > li .car--box--wrap .btn--wrapper{ margin-top:15px; } .car--list--wrap ul > li .car--box--wrap .btn--wrapper button{ width:186px; height: 50px; display:flex; align-items:center; justify-content:center; background: #1E75FF; border-radius: 15px; font-weight: 500; font-size: 14px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; } .car--list--wrap ul > li .car--box--wrap .btn--wrapper .arrow--ic{ display: inline-flex; min-width:14px; width:14px; height:14px; background:url(../img/button_arrow_ic.svg) no-repeat center; margin-left:10px; position: relative; top:1px; } .car--list--wrap.ty2{ padding-left:20px; padding-right:20px; } .car--list--wrap.ty2 ul{ } .car--list--wrap.ty2 ul > li{ width:100%; max-width:100%; margin-bottom:30px; } .car--list--wrap.ty2 ul > li:last-child{ margin-bottom:0px; } .car--list--wrap.ty2 ul > li .car--box--wrap{ padding:0px; border-radius:0px; background:transparent; width:100%; align-items:flex-start; flex-direction: row; height:auto; } .car--list--wrap.ty2 ul > li .car--box--wrap .thumb--wrap{ background: #F7F7F7; border-radius: 12px; width:100%; max-width:142px; height:100px; min-height:100px; position: relative; } .car--list--wrap.ty2 ul > li .car--box--wrap .thumb--wrap img{ position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:142px; max-height:100px; width:auto; height:auto; } .car--list--wrap.ty2 ul > li .car--box--wrap .car--name{ width:100%; max-width:100%; text-align: left; padding-bottom:10px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 100%; color: #333237; } .car--list--wrap.ty2 ul > li .car--box--wrap .car--info{ width:100%; margin-left:20px; } .car--list--wrap.ty2 ul > li .car--box--wrap .car--info span{ font-weight: 350; font-size: 12px; color: #5C5B63; display: inline-flex; justify-content:flex-start; } .car--list--wrap.ty2 ul > li .car--box--wrap .car--info .car--inner--info span:nth-of-type(1){ margin-right:20px; position:relative; } .car--list--wrap.ty2 ul > li .car--box--wrap .car--info .car--inner--info span:nth-of-type(1):after{ content:''; display: block; width:1px; height:10px; background:#ddd; position:absolute; top:50%; transform: translateY(-50%); right:-11px; } .car--list--wrap.ty2 ul > li .car--box--wrap .status--wrap{ width:100%; justify-content: flex-start; margin-top:5px; } .car--list--wrap.ty2 ul > li .car--box--wrap .status--wrap span{ min-width:45px; height:22px; justify-content: center; border-radius: 6px; font-weight: 500; font-size: 11px; line-height: 100%; } .car--list--wrap.vertical--type ul{ flex-wrap:wrap; } .car--list--wrap.vertical--type ul > li{ width:calc(50% - 22.5px); } .car--list--wrap.vertical--type ul > li .car--box--wrap{ width:100%; height:auto; display:flex; align-items:flex-start; flex-direction: row; padding:25px; } .car--list--wrap.vertical--type ul > li .car--box--wrap .thumb--wrap{ width:230px; min-width:230px; min-height:230px; height:230px; background: #fff; border-radius: 15px; margin-right:45px; } .car--list--wrap.vertical--type ul > li .car--box--wrap .car--name{ margin-bottom:20px; } .car--list--wrap .pagination--wraps{ display:flex; align-items:center; justify-content:center; padding-top:25px; } .car--list--wrap .pagination--wraps span{ width:12px; height:12px; border-radius: 12px; } /** 서브 페잊 **/ .sub--top--visual{ height:120px; width:100%; padding:0 20px; background:url(../img/top_banner.jpg) no-repeat center; background-size: cover; display: flex; align-items:center; justify-content:center; } .sub--top--visual .contents--inner{ width:100%; max-width:1200px; margin:0 auto; } .sub--top--visual .contents--inner > h2{ font-weight: 700; font-size: 16px; line-height: 100%; letter-spacing: -0.03em; color: #515B6A; max-width:190px; } .sub--top--visual .contents--inner > p{ font-weight: 300; font-size: 13px; letter-spacing: -0.02em; line-height: 1.7; color: #555555; margin-top:14px; max-width:190px; } .top--nav--wrap{ width:100%; border-bottom:1px solid #eee; } .top--nav--wrap .contents--inner{ width:100%; max-width:1200px; margin:0 auto; } .top--nav--wrap .contents--inner .breadcrumbs--wrap{ display: flex; align-items:center; } .top--nav--wrap .contents--inner .breadcrumbs--wrap > span{ padding-left:20px; padding-right:30px; font-weight: 500; font-size: 14px; line-height: 100%; letter-spacing: -0.03em; color: #333333; background:url(../img/arrow_right_ic.svg) no-repeat right center; } .top--nav--wrap .contents--inner .breadcrumbs--wrap > span:nth-of-type(1){ display:inline-flex; min-width:54px; width:54px; height:54px; border-right:1px solid #eee; border-left:1px solid #eee; background:url(../img/home_ic.svg) no-repeat center; padding:0px; } .top--nav--wrap .contents--inner .breadcrumbs--wrap > span:last-child{ font-weight: 500; font-size: 14px; letter-spacing: -0.03em; color: #1E75FF; padding-right:0px; background: none; } .owner--information--wrap{ width:100%; display: flex; align-items:center; justify-content:flex-start; flex-direction: column; padding:0 20px; padding-top:60px; } .owner--information--wrap .title--wrapper{ max-width:1200px; } .bidding--count{ white-space:nowrap; font-weight:700; } .owner--information--wrap .title--wrapper > h2, .owner--information--wrap > h2{ text-align: left; width:100%; max-width:1200px; margin:0 auto; font-weight: 700; font-size: 16px; line-height: 100%; letter-spacing: -0.03em; color: #000000; } .owner--information--wrap .sch--modules--wrap{ width:100%; background: #0063FF; border-radius: 20px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; margin-top:20px; padding:20px; } .owner--information--wrap .sch--modules--wrap > h2{ color:#fff; } .owner--information--wrap .sch--modules--wrap > div{ width:100%; margin-bottom:15px; } .owner--information--wrap .sch--modules--wrap > div:last-child{ margin-bottom:0px; } .owner--information--wrap .sch--modules--wrap > div input{ height:58px; width:100%; font-weight: 350; font-size: 14px; letter-spacing: -0.02em; color:#222; border:0px; padding-left:42px; box-sizing: border-box; } .owner--information--wrap .sch--modules--wrap > div input::placeholder{ font-weight: 350; font-size: 14px; letter-spacing: -0.02em; color: #B7B7B7; } .owner--information--wrap .sch--modules--wrap .user--info input{ background:#fff url(../img/user_ic.svg) no-repeat 15px center; border-radius: 10px; } .owner--information--wrap .sch--modules--wrap .car--numb input{ background:#fff url(../img/car_ic.svg) no-repeat 15px center; border-radius: 10px; } .owner--information--wrap .sch--modules--wrap .phone--numb input{ background:#fff url(../img/phone_ic.svg) no-repeat 15px center; border-radius: 10px; } .owner--information--wrap .sch--modules--wrap label{ font-weight: 500; font-size: 14px; line-height: 100%; letter-spacing: -0.02em; color: #FFFFFF; } .owner--information--wrap .sch--modules--wrap .phone--ftc--numb input{ height:45px; width:100%; font-weight: 350; font-size: 14px; padding-left:15px; letter-spacing: -0.02em; border:0px; box-sizing: border-box; border-radius: 10px; } .owner--information--wrap .sch--modules--wrap .phone--ftc--numb select{ height:45px; width:80px; font-weight: 350; font-size: 14px; padding-left:15px; letter-spacing: -0.02em; border:0px; box-sizing: border-box; border-radius: 10px; appearance:none; line-height: 100%; color: #333333; background: #fff url(../img/select_ic.svg) no-repeat calc(100% - 15px) center; } .owner--information--wrap .sch--modules--wrap button{ width: 100%; height: 58px; background: #FF5C00; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2); border-radius: 10px; font-weight: 500; font-size: 14px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; } .owner--information--wrap .sch--modules--wrap button .sch--ic{ display: inline-flex; min-width:13px; width:13px; height:13px; background: url(../img/sch_ic.svg) no-repeat center; margin-left:10px; } .car--info--wrap{ width:100%; margin:0 auto; padding:0 20px; padding-top:60px; } .car--info--wrap .title--wrapper > h2, .car--info--wrap > h2{ font-weight: 700; font-size: 18px; line-height: 100%; letter-spacing: -0.02em; color: #222222; } .car--info--wrap .form--wrap{ padding-top:40px; display: flex; align-items:flex-start; flex-direction: column; } .car--info--wrap .form--wrap .form--groups{ display:flex; align-items:flex-start; justify-content: flex-start; width:100%; flex-direction: column; margin-bottom:25px; } .car--info--wrap .form--wrap .form--groups > h2{ font-weight: 400; font-size: 14px; line-height: 100%; letter-spacing: -0.02em; color: #333333; } .car--info--wrap .form--wrap .form--groups .form--group{ width:100%; height:53px; margin-top:15px; } .car--info--wrap .form--wrap .form--groups .form--group select{ height:53px; width:100%; appearance:none; background: #fff url(../img/select_ic.svg) no-repeat calc(100% - 15px) center; border: 1px solid #D8DEE8; border-radius: 10px; font-weight: 350; font-size: 14px; letter-spacing: -0.02em; color: #333333; padding-left:20px; } .car--info--wrap .form--wrap .form--groups .form--group input:disabled, .car--info--wrap .form--wrap .form--groups .form--group select:disabled{ background-color: #F5F9FE; } .car--info--wrap .form--wrap .form--groups .form--group.ty2{ display: flex; align-items:center; flex-wrap:nowrap; } .car--info--wrap .form--wrap .form--groups .form--group input{ height:53px; width:100%; appearance:none; background: #fff; border: 1px solid #D8DEE8; border-radius: 10px; font-weight: 350; font-size: 14px; letter-spacing: -0.02em; color: #333333; padding-left:20px; } .car--info--wrap .form--wrap .form--groups .form--group.file--wrap label{ display:flex; align-items:center; justify-content: center; max-width:110px; width: 100%; height: 53px; margin-left:15px; border: 1px solid rgba(30, 117, 255, 0.5); border-radius: 10px; font-weight: 500; font-size: 14px; text-align: center; color: #1E75FF; } button.sch--btn--bl{ width:100%; height: 53px; background: #FFFFFF; border: 1px solid rgba(30, 117, 255, 0.5); border-radius: 10px; font-weight: 500; font-size: 14px; letter-spacing: -0.02em; color: #1E75FF; } .car--info--wrap .form--wrap .form--groups .form--group .sch--ic--bl{ display:inline-flex; width:15px; height:15px; margin-left:10px; background: url(../img/sch_ic_bl.svg) no-repeat center; position: relative; top:2px; } .car--info--wrap .btn--wrapper{ width:100%; max-width:1200px; margin:0 auto; padding-top:70px; display:flex; align-items:center; justify-content: flex-end; } .car--info--wrap .btn--wrapper .next--btn{ width: 240px; height: 65px; display: flex; align-items: center; justify-content: flex-start; background: #1E75FF; border-radius: 10px; padding-left:30px; box-sizing: border-box; font-weight: 500; font-size: 14px; letter-spacing: -0.02em; color: #FFFFFF; position: relative; } .car--info--wrap .btn--wrapper .next--btn .next--ic{ display: flex; width:15px; height:15px; position: absolute; top:50%; transform: translateY(-50%); right:30px; background: url(../img/arrow_right_btn.svg) no-repeat center; } .car--info--wrap .fixed--positon button{ border-radius:10px; } .modal--wrap{ position:fixed; top:0px; left:0px; width:100%; height:100%; background: rgba(65, 66, 67, 0.5); z-index: 10; } .modal--wrap .modal--content{ position:absolute; top:50%; left:50%; width:100%; transform: translate(-50%, -50%); background: #FFFFFF; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2); border-radius: 30px; padding:30px; box-sizing: border-box; } .modal--wrap .modal--content.ty2{ padding:0px; } .modal--wrap .modal--content .title--wrap{ position:relative; } .modal--wrap .modal--content .title--wrap .close--btn{ width:36px; height:36px; border-radius:36px; position: absolute; top:0px; right:0px; background: url(../img/close_ic.svg) no-repeat center; } .modal .modal-content .icon--wrap{ width:100%; display: flex; align-items:center; justify-content:center; padding-top:30px; } .modal .modal-content .icon--wrap .thumb.pp--ic{ width:60px; height:60px; border-radius:60px; background:#E2E4F0 url(../img/pp_ic.svg) no-repeat center; } .modal .modal-content .icon--wrap .thumb.evt--thumb{ width: 80px; height: 80px; border-radius:80px; background: #1E75FF url(../img/car_pl_ic.svg) no-repeat center; } .modal .modal-content .modal--body > h2{ font-weight: 500; font-size: 17px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #000000; margin:0px; padding:0px; margin-top:10px; } .check--box .form--group{ margin-bottom:15px; } .modal .modal-content .modal--body > p{ font-weight: 350; font-size: 14px; text-align: center; letter-spacing: -0.03em; color: #666666; margin-top:20px; padding:0 20px; } .modal--content .inner--contents{ display: flex; align-items: center; justify-content:center; flex-direction: column; } .modal--content.ty2 .inner--contents{ padding:30px; } .modal--content .inner--contents > h2{ font-weight: 700; font-size: 18px; text-align: center; letter-spacing: -0.03em; color: #333333; margin:0px; margin-top:22px; line-height: 0px; } .modal--content .inner--contents > p{ font-weight: 350; font-size: 15px; text-align: center; letter-spacing: -0.02em; color: #777777; margin-top:20px; } .modal--content .inner--contents .evt--thumb{ width: 80px; height: 80px; border-radius:80px; background: #1E75FF url(../img/car_pl_ic.svg) no-repeat center; } .modal--wrap .modal--content .modal--btn--wrap{ display: flex; align-items: center; width:100%; border-top:1px solid #eee; } .modal--wrap .modal--content .modal--btn--wrap button{ width:100%; height:66px; border-right:1px solid #eee; font-weight: 400; font-size: 14px; text-align: center; letter-spacing: -0.02em; color: #000000; } .modal--wrap .modal--content .modal--btn--wrap button.on{ color: #1E75FF; } .modal--wrap .modal--content .modal--btn--wrap button:last-child{ border-right:0px; } .form--group input[type="radio"] + label{ position:relative; display: flex; align-items:center; cursor: pointer; font-weight: 350; font-size: 14px; color: #333333; } .form--group input[type="radio"] + label:before{ content:''; display: block; min-width:16px; width:16px; height:16px; background:url(../img/radio_off.svg) no-repeat center; margin-right:12px; } .form--group input[type="radio"]:checked + label:before{ background:url(../img/radio_on.svg) no-repeat center; } .car--accident--wrap{ padding:0 20px; } .car--accident--log{ width:100%; max-width:1200px; margin: 0 auto; background: #FFFFFF; border: 1px solid rgba(30, 117, 255, 0.3); border-radius: 20px; padding:25px 20px; } .car--accident--log > h2{ font-weight: 500; font-size: 20px; line-height: 100%; letter-spacing: -0.03em; color: #222222; text-align: center; } .car--accident--log .car--info{ display:flex; align-items:center; margin-top:28px; } .car--accident--log .car--info .thumb{ width: 64px; height: 64px; border-radius: 64px; background: #0063FF url(../img/duc_ic.svg) no-repeat center; margin-right:20px; } .car--accident--log .car--info .car--num--sch--info h2{ font-weight: 700; font-size: 16px; line-height: 100%; letter-spacing: -0.02em; color: #1E75FF; } .car--accident--log .car--info .car--num--sch--info p{ font-weight: 400; font-size: 15px; line-height: 100%; letter-spacing: -0.02em; color: #666666; padding:0px; margin:0px; margin-top:15px; } .car--accident--column{ width:100%; max-width:1200px; margin:0 auto; } .car--accident--column > h2{ height:58px; width:100%; background: #F7F7F9; display: flex; align-items: center; justify-content: flex-start; font-weight: 500; font-size: 15px; letter-spacing: -0.03em; color: #111111; padding-left:30px; } .car--accident--column .items--box{ border:1px solid #eee; border-top:0px; padding:20px 20px 30px 20px; gap:20px; display:flex; flex-wrap:wrap; } .car--accident--column .items--box .car--accident--box{ display:flex; background: #FFFFFF; border: 1px solid #EEEEEE; box-shadow: 0px 5px 5px rgba(239, 240, 241, 0.5); border-radius: 20px; width:calc( (100% / 2) - 10px); padding:15px; flex-direction: column; justify-content: center; align-items: center; } .car--accident--column .items--box .car--accident--box .thumb{ min-width:45px; width:45px; height:45px; border-radius: 59px; margin-right:10px; } .car--accident--column .items--box .car--accident--box .thumb.log--01{background:#F7F7F9 url(../img/log_ic01.svg) no-repeat center;} .car--accident--column .items--box .car--accident--box .thumb.log--02{background:#F7F7F9 url(../img/log_ic02.svg) no-repeat center;} .car--accident--column .items--box .car--accident--box .thumb.log--03{background:#F7F7F9 url(../img/log_ic03.svg) no-repeat center;} .car--accident--column .items--box .car--accident--box .thumb.log--04{background:#F7F7F9 url(../img/log_ic04.svg) no-repeat center;} .car--accident--column .items--box .car--accident--box .thumb.log--05{background:#F7F7F9 url(../img/log_ic05.svg) no-repeat center;} .car--accident--column .items--box .car--accident--box .thumb.log--06{background:#F7F7F9 url(../img/log_ic06.svg) no-repeat center;} .car--accident--column .items--box .car--accident--box .thumb.log--07{background:#F7F7F9 url(../img/log_ic07.svg) no-repeat center;} .car--accident--column .items--box .car--accident--box .thumb.log--08{background:#F7F7F9 url(../img/log_ic08.svg) no-repeat center;} .car--accident--column .items--box .car--accident--box .desc{} .car--accident--column .items--box .car--accident--box .desc h2{ font-weight: 400; font-size: 14px; letter-spacing: -0.03em; color: #111111; text-align: center; margin-top:10px; } .car--accident--column .items--box .car--accident--box .desc > div{ display: inline-flex; height: 22px; background: #F7F7F9; border-radius: 50px; width:100%; justify-content:center; white-space: nowrap; font-weight: 350; font-size: 12px; color: #333333; margin-top:10px; padding:0 10px; } .car--accident--column .items--box .caution--text{ background: #FBFBFD; border: 1px dashed rgba(30, 117, 255, 0.5); border-radius: 12px; display: flex; align-items:center; justify-content:center; flex-direction:column; width:100%; height:58px; font-weight: 350; font-size: 15px; text-align: center; letter-spacing: -0.03em; color: #333333; margin-top:10px; position: relative; } .car--accident--column .items--box .caution--text strong{ color: #1E75FF; font-weight:700; margin-left:5px; } .car--accident--column .items--box .caution--text .caution--ic{ display: inline-flex; width:24px; height:24px; background:url(../img/caution_ic.svg) no-repeat center; position:absolute; top:50%; transform: translateY(-50%); left:10px; } .description--text--wrap{ border:1px solid #eee; border-top:0px; padding:30px 30px 0px 30px; } .description--text--wrap > h2{ font-weight: 350; font-size: 14px; line-height: 100%; letter-spacing: -0.03em; color: #1E75FF; } .description--text--wrap .desc--contents{ display: flex; flex-wrap:wrap; margin-top:40px; } .description--text--wrap .desc--contents dl{ width:calc( 100% / 2); padding-bottom:60px; } .description--text--wrap .desc--contents dl dt{ font-weight: 700; font-size: 14px; line-height: 100%; letter-spacing: -0.03em; color: #333333; } .description--text--wrap .desc--contents dl dd{ font-weight: 350; font-size: 14px; line-height: 100%; letter-spacing: -0.03em; color: #444444; margin-top:20px; } .options--wrapper{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; } .options--wrapper > h2{ font-weight: 700; font-size: 18px; line-height: 100%; letter-spacing: -0.02em; color: #222222; } .options--wrapper > h2 .astc--text{ font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: #1E75FF; margin-left:5px; } .options--wrapper > h2 .astc--text.ty2{ color: #909EB5; } .options--wrapper .options--list{ width:100%; padding-top:35px; } .options--wrapper .options--list > h2{ font-weight: 500; font-size: 14px; line-height: 100%; letter-spacing: -0.02em; color: #111111; } .options--wrapper .options--list > ul{ display: flex; align-items: center; margin-top:20px; padding-bottom:20px; flex-wrap:wrap; } .options--wrapper .options--list > ul >li{ width:calc(100% / 2); margin-bottom:15px; } input[type="checkbox"] + label{ font-weight: 350; font-size: 14px; line-height: 100%; color: #333333; display: flex; align-items:center; cursor: pointer; } input[type="checkbox"] + label:before{ content:''; display: block; width:20px; height:20px; background:url(../img/check_off.svg) no-repeat center; background-size: cover; margin-right:12px; } input[type="checkbox"]:checked + label:before{ background:url(../img/check_on.svg) no-repeat center; background-size: cover; } .options--wrapper .pic--add--wrap{ display: flex; align-items: center; justify-content:flex-start; flex-wrap: wrap; width:100%; padding-top:35px; gap:20px; } .options--wrapper .pic--add--wrap.bd-0{ border:0px; padding-top:0px; } .options--wrapper .pic--add--wrap .add--box{ display: flex; align-items: center; justify-content:center; flex-direction: column; margin-bottom:15px; } .options--wrapper .pic--add--wrap .add--box .thumb--wrap{ display: flex; align-items:center; justify-content:center; border-radius: 15px; width: 93px; height: 93px; border: 1px solid #EEEEEE; box-shadow: 0px 3px 3px rgba(239, 240, 241, 0.25); } .options--wrapper .pic--add--wrap .add--box > button{ display:flex; align-items:center; justify-content:center; font-weight: 500; font-size: 12px; text-align: center; letter-spacing: -0.03em; color: #1E75FF; width: 70px; height: 30px; background: #FFFFFF; border: 1px solid rgba(30, 117, 255, 0.2); border-radius: 50px; margin-top:15px; } .options--wrapper .pic--add--wrap .add--box .thumb{ width:60px; height:60px; border-radius: 60px; background: #F7F7F9; position: relative; } .options--wrapper .pic--add--wrap.view--type .add--box .thumb{ width:200px; height:140px; border-radius:0px; margin:0 auto; overflow:hidden; background: transparent!important; } .options--wrapper .pic--add--wrap.view--type .add--box .thumb img{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); max-height:140px; max-width:200px; object-fit: cover; } .options--wrapper .pic--add--wrap.view--type .add--box.car--dashboard{ position: relative; } .options--wrapper .pic--add--wrap.view--type .add--box.car--dashboard .thumb{ height:204px; width:204px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); } .options--wrapper .pic--add--wrap.view--type .add--box.car--dashboard .thumb img{ width:100%; height:100%; max-width:204px; max-height:204px; } .options--wrapper .pic--add--wrap.view--type .add--box.car--dashboard .desc{ z-index: 2; position: absolute; bottom:20px; } .options--wrapper .pic--add--wrap .add--box .thumb .add--btn{ width: 100%; height: 100%; position: absolute; top:0px; right:0px; cursor: pointer; } .options--wrapper .pic--add--wrap .add--box .thumb.car--01{ background:#f7f7f9 url(../img/car_pic01.svg) no-repeat center;} .options--wrapper .pic--add--wrap .add--box .thumb.car--02{ background:#f7f7f9 url(../img/car_pic02.svg) no-repeat center;} .options--wrapper .pic--add--wrap .add--box .thumb.car--03{ background:#f7f7f9 url(../img/car_pic03.svg) no-repeat center;} .options--wrapper .pic--add--wrap .add--box .thumb.car--04{ background:#f7f7f9 url(../img/car_pic04.svg) no-repeat center;} .options--wrapper .pic--add--wrap .add--box .thumb.car--05{ background:#f7f7f9 url(../img/car_pic05.svg) no-repeat center;} .options--wrapper .pic--add--wrap .add--box .desc{ font-weight: 350; font-size: 15px; line-height: 100%; text-align: center; letter-spacing: -0.02em; color: #000000; margin-top:10px; } .options--wrapper .pic--add--wrap.view--type .add--box .desc{ background: #F3F5F8; border-radius: 50px; height:35px; display:inline-flex; align-items: center; padding:0 20px; font-weight: 350; font-size: 13px; text-align: center; letter-spacing: -0.02em; color: #000000; } .options--wrapper .pic--add--wrap .addition--box .thumb{ background:#f7f7f9 url(../img/pic_ic.svg) no-repeat center; } .options--wrapper .pic--add--wrap .addition--box .add--btn{ font-weight: 500; font-size: 12px; text-align: center; letter-spacing: -0.03em; color: #1E75FF; width: 70px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(30, 117, 255, 0.3); border-radius: 50px; cursor: pointer; } .options--wrapper .pic--add--wrap.mob--view--type .add--box .thumb, .options--wrapper .pic--add--wrap.mob--view--type .thumb img{ width:100%; height:100%; } .options--wrapper .pic--add--wrap.mob--view--type .thumb{ position:relative; box-shadow: 0px 3px 3px rgba(239, 240, 241, 0.25); } .options--wrapper .pic--add--wrap.mob--view--type .thumb img{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); object-fit: cover; max-width:91px; max-height:91px; } .car--btn--wrapper{ width:100%; margin:0 auto; padding-top:70px; display:flex; align-items:center; justify-content: flex-end; } .car--btn--wrapper .next--btn{ width: 100%; height: 65px; display: flex; align-items: center; justify-content: center; background: #1E75FF; border-radius: 0px; box-sizing: border-box; font-weight: 500; font-size: 14px; letter-spacing: -0.02em; color: #FFFFFF; position: relative; } .car--btn--wrapper .next--btn .next--ic{ display: flex; width:15px; height:15px; margin-left:20px; background: url(../img/arrow_right_btn.svg) no-repeat center; } .options--wrapper .editor--wrapper{ display: flex; align-items: center; justify-content:space-between; width:100%; padding-top:35px; } /* .options--wrapper .editor--wrapper.ty2{ border-top:0px; padding-top:0px; } */ /** 로그인 **/ .login--form--wrap{ padding-top:62px; width:100%; max-width:100%; margin:0 auto; display:flex; align-items:center; justify-content:center; flex-direction:column; background-size:cover; } .login--form--contents{ background: #FFFFFF; width:100%; height:485px; box-sizing: border-box; padding:0 25px; } .input--form--box { border: 0px solid #ff0000; display: flex; margin-bottom: 5px; } .input--form--box > span { display: block; text-align: left; padding-top: 5px; min-width: 65px; } .button-login-box { margin-bottom:25px; } .button-login-box button{ width:100%; height:45px; } .login--box--title { display: flex; width:100%; justify-content:center; align-items: center; margin-bottom:35px; } .login--box--title a{ display: inline-flex; width:130px; min-width:130px; height:40px; background:url(../img/login_logo.png) no-repeat center; font-size:0px; } .login--box--title h2{ font-weight: 700; font-size: 18px; line-height: 100%; text-align: right; letter-spacing: -0.03em; color: #333333; } .input--box { padding:0px; border-radius:20px; } .input--box button { padding: 3px 5px; } .loc--box{ width:100%; display: flex; align-items:center; justify-content:space-between; margin-top:25px; } .loc--box a{ font-weight: 350; font-size: 14px; line-height: 100%; letter-spacing: -0.03em; color: #777777; } .loc--box .front--section a:after{ content:''; display: inline-flex; width:1px; height:13px; background: #e9e9e9; margin-left:11px; margin-right:11px; position:relative; top:1px; } .loc--box .front--section a:last-child:after{ display: none; } .loc--box .back--section a{ color: #1E75FF; } /** 회원가입 **/ .join--form--wrap{ width:100%; padding:20px; margin:0 auto; display:flex; } .join--form--wrap > h2{ font-weight: 700; font-size: 30px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #111111; margin:0px; } .join--form--wrap > h2 span{ font-weight: 700; font-size: 30px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #1E75FF; } .join--form--wrap > p{ font-weight: 350; font-size: 16px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #555555; margin-top:35px; margin-bottom:65px; } .join--form--wrap .join--form--contents{ width:100%; } .join--form--wrap .join--form--contents select, .join--form--wrap .join--form--contents input{ height:58px; border: 1px solid #EBEBEB; } .join--form--wrap .join--form--contents .join--form--inner > h2{ font-weight: 500; font-size: 15px; line-height: 100%; letter-spacing: -0.03em; color: #000000; margin-bottom:20px; } .join--form--wrap .join--form--contents .join--form--inner > div{ margin-bottom:15px; } .join--form--wrap .join--form--contents .join--form--inner > div:last-child{ margin-bottom:0px; } .floating--btn{ position:fixed; bottom:0px; left:0px; width:100%; z-index: 9; } .floating--btn button{ border-radius:0px; width:100%; height:62px; } .join--btn--wrap{ width: 100%; margin-top: 20px; } .join--btn--wrap button{ width: 100%; height: 62px; border-radius: 10px; } /** 모달 중앙 컨텐츠 여백 : S **/ .modal-content{ border-radius:30px; } .modal-body{ padding:30px 0px 30px 0px; } .modal-body.modal--body{ padding:0px 20px 30px; } .modal-body.modal--body .form-check{ margin-bottom:10px; } .modal-body.modal--body .form-check:last-child{ margin-bottom:0px; } .modal-title{ font-weight: 500; font-size: 18px; color: #111111; } .modal-header{ border:0px; padding-top:25px; padding-left:20px; padding-right:20px; } .modal-header .btn-close{ width: 36px!important; height: 36px!important; padding:0px; border-radius: 30px!important; background: url(../img/close_ic.svg) no-repeat center; } .modal-footer{ padding:0px; flex-wrap: nowrap; } .modal-footer button{ padding:0px; margin:0px; border-radius: 0px; } .modal-footer button:nth-of-type(1){ border-radius:0px 0px 0px 30px; } .modal-footer button:nth-of-type(2){ border-radius:0px 0px 30px 0px; } .modal-footer .btn-secondary{ height:65px; font-weight: 400; font-size: 14px; text-align: center; letter-spacing: -0.02em; color: #000000; background: #fff; border:0px; border-right:1px solid #eee; width:100%; } .modal-footer .btn-primary{ height:65px; font-weight: 400; font-size: 14px; text-align: center; letter-spacing: -0.02em; color: #1E75FF; background:#fff; border:0px; width:100%; } .modal-footer.ty2{ padding:10px 20px 30px 20px; border-top:0px; } .modal-footer.ty2 button{ height:52px; border: 1px solid rgba(200, 207, 217, 0.5); border-radius: 10px; } .modal-footer.ty2 button.btn-primary{ background: #1E75FF; color:#fff; } .modal-footer.ty2.ty--2{ padding-bottom:25px; } .modal-body .date--text{ font-weight: 350; font-size: 14px; color: #333333; } .modal-dialog{ margin:0 30px; } /** 모달 중앙 컨텐츠 여백 : E **/ /** 페이지링크 **/ .page-link{ color:#1E75FF; } .active>.page-link, .page-link.active{ border-color:#1E75FF; background:#1E75FF; } .btn-primary{ background:#1E75FF; } .swiper--modal--wrap{ position:fixed; top:0px; left:0px; z-index: 999; background:rgba(0,0,0,.5); width:100%; height:100%; display: flex; align-items:center; justify-content: center; } .swiper--modal--wrap .swiper--modal{ } .swiper--modal--wrap .swiper--modal .vwswiper{ width:600px; height:600px; } .swiper--modal--wrap .swiper--modal .vwswiper .car--thumb--wrap{ width:600px; height:500px; position: relative; background:#fff; } .swiper--modal--wrap .swiper--modal .vwswiper .car--thumb--wrap img{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:auto; object-fit: cover; } .swiper--modal--wrap .swiper--modal .vwswiper h2{ color:#fff; font-size:25px; font-weight: bold; margin-bottom:15px; } /** 테이블 **/ .data--table--wrap{ max-width:100%; padding:0 20px; margin:0 auto; } .table--m--wrap{ max-width:100%; overflow-x: auto; } .table--m--wrap table{ min-width:700px; } .data--table--wrap table td{ border:0px; border-top: 1px solid #EEEEEE; border-bottom 1px solid #EEEEEE; font-weight: 350; font-size: 15px; letter-spacing: -0.03em; color: #000000; vertical-align: middle; height:55px; } .data--table--wrap table td > div{ font-weight: 400; font-size: 14px; line-height: 100%; color: #333333; } .data--table--wrap table th{ border:0px; background: #F9F9F9; border-top: 1px solid #EEEEEE; font-weight: 350; font-size: 15px; letter-spacing: -0.03em; color: #000000; height:55px; vertical-align: middle; } .data--table--wrap table th > div { font-weight: 500; font-size: 14px; line-height: 100%; /* identical to box height, or 14px */ text-align: center; letter-spacing: -0.03em; color: #333333; } .data--table--wrap table td:nth-of-type(1), .data--table--wrap table th:nth-of-type(1){ border-left:0px; } .data--table--wrap table td:last-child, .data--table--wrap table th:last-child{ border-right:0px; } .pagination--wrapper{ max-width:1200px; margin:0 auto; position:relative; width:100%; } .pagination--wrapper .btn--right--wrap{ position: absolute; left:0px; } .pagination--wrapper .btn--left--wrap{ position: absolute; right:0px; } .data--table--wrap .title--wrapper > h2{ font-weight: 700; font-size: 18px; line-height: 100%; letter-spacing: -0.02em; color: #222222; } .join--ic{ display: inline-flex; min-width:18px; width:18px; height:18px; background:url(../img/join_ic.svg) no-repeat center; position: relative; top: 3px; margin-left:10px; } /** 아이디 비밀번호 찾기 **/ .idpw--form--wrap{ width:100%; max-width:430px; margin:0 auto; display:flex; flex-direction:column; padding:0 20px; padding-top:40px; } .idpw--form--wrap > h2{ font-weight: 700; font-size: 30px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #111111; margin:0px; } .idpw--form--wrap > h2 span{ font-weight: 700; font-size: 30px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #1E75FF; } .idpw--form--wrap > p{ font-weight: 350; font-size: 16px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #555555; margin-top:35px; margin-bottom:65px; } .idpw--form--wrap .idpw--form--contents .tab .tab--items{ display: flex; align-items:center; justify-content:center; width:100%; } .idpw--form--wrap .idpw--form--contents .tab .tab--items a{ display: flex; align-items:center; justify-content:center; width:100%; height: 55px; background: #FFFFFF; border: 1px solid #EEEEEE; border-bottom-color:#1E75FF; margin-right:-1px; position:relative; z-index: 1; font-weight: 400; font-size: 14px; text-align: center; letter-spacing: -0.03em; color: #81878F; } .idpw--form--wrap .idpw--form--contents .tab .tab--items a.actv{ border: 1px solid #1E75FF; border-bottom-color:#fff; z-index: 2; font-weight: 700; color: #1E75FF; } .idpw--form--wrap .idpw--form--contents .tab .inner--contents{ padding-top:40px; } .idpw--form--wrap .idpw--form--contents .tab .inner--contents > h2{ font-weight: 500; font-size: 18px; letter-spacing: -0.03em; color: #000000; } .idpw--form--wrap .idpw--form--contents .tab .inner--contents > p{ font-weight: 350; font-size: 14px; letter-spacing: -0.03em; color: #555555; margin-top:20px; } .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box{ margin-top:45px; } .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box > div{ margin-bottom:15px; } .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box > div:last-child{ margin-bottom:0px; } .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box select, .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box input{ height:58px; } /* 페이지 네이션 */ .pagination{ padding-top:80px; } .pagination li a{ width: 40px; height: 40px; background: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 12px!important; margin:0 3.5px!important; text-align: center; padding:0px; display: flex; align-items:center; justify-content:center; } .page-item .page-link[aria-label="Previous"]{ background:url(../img/pg_left.svg) no-repeat center; font-size:0px; } .page-item .page-link[aria-label="Next"]{ background:url(../img/pg_right.svg) no-repeat center; font-size:0px; } .car--info--wrap table{ border-top:1px solid #eee; } .car--info--wrap table tbody td{ height: 55px; border-bottom:1px solid #eee; font-weight: 400; font-size: 14px; letter-spacing: -0.03em; color: #333333; padding-left:25px; } .car--info--wrap table tbody th{ width: 220px; height: 55px; background: #F9F9F9; border-bottom:1px solid #eee; padding-left:25px; font-weight: 500; font-size: 14px; letter-spacing: -0.03em; color: #333333; } .excid--btn{ background: #1EAEFF; border-color:#1EAEFF; height:41px; min-width:150px; } /** 차량 갤러리 **/ .gallery--wrappers{ position:fixed; top:0px; left:0px; width:100%; height:100%; z-index: 90; background: rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; } .fotorama__caption{ bottom:auto; top:0px; width: 152px; height: 55px; background: #1E75FF; border-radius: 0px 0px 15px 0px; display: flex; align-items: center; justify-content: center; } .fotorama__caption__wrap{ background: transparent!important; font-weight: 500; font-size: 16px; letter-spacing: -0.02em; color: #FFFFFF; } .fotorama__stage{ background: #fff; } .fotorama__nav-wrap{ margin-top:35px; } .fotorama--fullscreen .fotorama__nav-wrap{ margin-top:0px; } .fotorama__arr--next{ width:60px!important; height:60px!important; background:url(/design/staff/assets/img/right_arrow.png) no-repeat center!important; } .fotorama__arr--prev{ width:60px!important; height:60px!important; background:url(/design/staff/assets/img/left_arrow.png) no-repeat center!important; } .list--btn{ text-align: left; padding-left:30px; background: #626262 url(../img/list_ic.png) no-repeat calc(100% - 30px) center; border-radius: 10px; } .comp--btn{ text-align: left; padding-left:20px; background:#1E75FF url(../img/check-circle.png) no-repeat calc(100% - 12px) center; border-radius: 10px; margin-left:auto; } /** 진행상태 **/ .progress--wrap{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:25px; } .progress--wrap > div{ position:relative; width:calc(50% - 25px); } .progress--wrap > div:after{ content:''; width:25px; height:25px; background: url(../img/st_arrow.png) no-repeat center; display: block; position: absolute; top:28px; right:-38px; } .progress--wrap > div:nth-of-type(even):after, .progress--wrap > div:last-child:after{ display:none; } .progress--wrap > div > .status--box{ width: 100%; height: 80px; background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 15px; display: flex; align-items: center; justify-content:center; font-weight: 500; font-size: 14px; text-align: center; letter-spacing: -0.02em; color: #A2A7B0; } .progress--wrap > div.actv .status--box{ border: 1px solid rgba(30, 117, 255, 0.5); font-weight: 500; font-size: 14px; letter-spacing: -0.02em; color: #1E75FF; } .progress--wrap > div.actv .status--box:before{ content:''; width:26px; height:26px; display: inline-flex; background:url(../img/check.svg) no-repeat center; margin-right:5px; } .progress--wrap > div > .status--desc{} .progress--wrap > div > .status--desc p{ font-weight: 400; font-size: 13px; text-align: center; letter-spacing: -0.02em; color: #333333; margin-top:15px; margin-bottom:20px; } .progress--wrap > div > .status--desc button{ font-weight: 500; font-size: 12px; letter-spacing: -0.03em; color: #FFFFFF; display: flex; align-items: center; justify-content: center; width: 60px; height: 26px; background: #BBC4D3; border-radius: 8px; margin:0 auto; } /** 사고이력 레이어 팝업 **/ .layer_popup{padding:15px 20px 20px;background:#fff;} .layer_popup .tit{margin-bottom:15px;font-size:18px;color:#464646;} .layer_popup .cont{border-top:1px solid #000;border-bottom:1px solid #000;} .layer_popup .cont2{padding:20px 0 0;} .layer_popup .cont .return_msg{padding:33px 0 33px 65px;background:url('/admin/img/ic_return.png') 0 50% no-repeat;line-height:25px;} .layer_popup .btn_center{margin-top:20px;} .layer_popup .close{overflow:hidden;position:absolute;top:0;right:0;width:32px;height:32px;background:url(/m/img/btn_popup_close.png) 50% no-repeat; background-size: 11px;text-indent:-9999px;cursor:pointer;} .layer_popup .tbl_list2{border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;} .layer_popup .tbl_list2 td .check_wrap{margin-right:20px;} .history_popup{position:relative;padding:10px 50px 20px;width:1100px;font-size:13px;} .history_popup h3{margin-top:20px;padding:0 0 22px;background:none;font-size:30px;color:#000;border-bottom:1px solid #000;} .history_popup h4, .history_popup h5{margin:25px 0 5px;font-size:15px;color:#000;} .history_popup h4:first-child{margin-top:0;} .history_popup .scr_cont{margin-top:30px;} .history_popup .scr_cont2{overflow:auto;margin-top:25px;padding:0 20px 30px 0;height:660px;} .history_popup .tbl_data{border:1px solid #d5d5d5;} .history_popup .tbl_data th, .history_popup .tbl_data td{padding-left:22px;border-top:1px solid #e5e5e5;text-align:left;vertical-align:middle;} .history_popup .tbl_data tr:first-child th, .history_popup .tbl_data tr:first-child td{border-top:none;} .history_popup .tbl_data th{background:#f0f0f0;} .history_popup .tbl_data td{height:38px;border-left:none;color:#808080;} .history_popup .tbl_data td .inp_txt{color:#808080;} .history_popup .tbl_data2{border:1px solid #d5d5d5;border-right:1px solid #d5d5d5;} .history_popup .tbl_data2 th, .history_popup .tbl_data2 td{height:39px;border-top:1px solid #e5e5e5;border-left:1px solid #c9c9c9;text-align:center;vertical-align:middle;} .history_popup .tbl_data2 thead th{padding:0;background:#f0f0f0;font-weight:400;} .history_popup .tbl_data2 thead tr:first-child th{border-top:none;} .history_popup .tbl_data2 tbody th{padding:0;background:none;} .history_popup .tbl_data2 td{color:#000;} .history_popup .notice01{margin-top:10px;padding-left:36px;background:url('/admin/img/ico_notice01.gif') no-repeat;line-height:29px;} .history_popup .notice02{margin-top:10px;padding-left:36px;background:url('/admin/img/ico_notice02.gif') no-repeat;line-height:30px;} .history_popup .notice03 > li{margin-top:30px;line-height:23px;} .history_popup .notice03 li ol li{padding-left:14px;list-style:decimal;list-style-position:inside;line-height:23px;text-indent:-14px;} .history_popup .sign{margin-top:55px;text-align:center;} .history_popup .performance_check{overflow:hidden;} .history_popup .performance_check dt{float:none;clear:both;margin:70px 0 22px;font:700 15px/1 'NS';color:#000;} .history_popup .scr_cont .performance_check:first-child dt{margin-top:0;} .history_popup .performance_check dd{float:left;padding-right:50px;width:50%;} .history_popup .performance_check dd span{display:block;border-bottom:1px solid #e5e5e5;line-height:40px;} .history_popup .close{top:32px;right:48px;width:22px;height:17px;background:url('../img/btn_popup_close2.png') no-repeat;} .collapse_area.popup{width:1000px;margin:0;overflow:auto;height:660px;padding:0 20px 30px 0;} .collapse_area{width:1140px;margin:0 auto;} .collapse_area .report_tit{background:#333;color:#fff;font-size:16px;width:100%;padding:20px 30px;text-align:left;line-height:19px;margin-top:30px;} .collapse_area .report_con{width:100%;display:inline-block;border:1px solid #e0e0e0;padding:30px 20px;border-top:0;} .collapse_area .report_con p.s_txt{font-size:13px;color:#333;margin-bottom:20px;} .collapse_area .report_con .dol-md-6{width:48.6%;margin-right:30px;display:inline-block;float:left;} .collapse_area .report_con .dol-md-6:last-child{margin-right:0;} .collapse_area .report_con .report_row{margin-top:20px;width:100%;} .col-sm-4{width:33.1%;text-align:center;display:inline-block;} .dol-md-6 table.learn-box{} .dol-md-6 table.learn-box tbody tr th{background-color:#f5f5f5;border:1px solid #ddd;vertical-align:middle;width:40%;padding:15px 0;color:#222;font-weight:500;} .dol-md-6 table.learn-box tbody tr td{border:1px solid #ddd;vertical-align:middle;width:60%;padding:15px 0 15px 25px;color:#189bfa;text-align:left;font-weight:500;} .dol-md-5 table.learn-box{width:100%;} .dol-md-5 table.learn-box tbody tr th{background-color:#f5f5f5;border:1px solid #ddd;vertical-align:middle;width:25%;padding:20px 0;color:#222;font-weight:400;} .dol-md-5 table.learn-box tbody tr td{border:1px solid #ddd;text-align:center;vertical-align:middle;width:25%;padding:20px 0;color:#189bfa;font-weight:600;} .dol-md-5 table.learn-box tbody tr td.df_gray{color:#333;} .guide-box-container{position:relative;width:100%;display:block;margin-top:40px;} .guide-box-container .deco{z-index:3;width:140px;position:absolute;right:10px;bottom:-10px;} .guide-box-container .deco img{display:block;max-width:100%;height:auto;} .guide-box-container .guide-box{position:relative;z-index:2;padding:30px;padding-right:160px;background-color:#f5f5f5;} .guide-box-container .guide-box span.guide-title{background-color:#189bfa;color:#fff;border-radius:18px;padding:10px 20px;line-height:12px;font-size:13px;position:absolute;top:-14px;} .guide-box-container .guide-box ul.guide-list{} .guide-box-container .guide-box ul.guide-list li{padding-left:10px;margin-top:10px;position:relative;} .guide-box-container .guide-box ul.guide-list li strong.li-title{position:static;display:block;left:0;top:0;font-size:15px;line-height:24px;color:#222;letter-spacing:-1px;margin-bottom:5px;} .guide-box-container .guide-box ul.guide-list li strong.li-title:before{content:"";display:inline-block;width:4px;height:4px;background-color:#189bfa;margin-right:10px;position:relative;top:-3px;} .guide-box-container .guide-box ul.guide-list li .li-content{padding-left:13px;font-size:14px;line-height:24px;color:#777;margin-bottom:15px;} ul.ex_box_wrap{display:block;} ul.ex_box_wrap li{float:left;border:1px solid #e6e6e6;margin-right:30px;width:247px;margin-bottom:30px;padding-bottom:20px;text-align:center;} ul.ex_box_wrap li:nth-child(4), .collapse_area .report_con ul.ex_box_wrap li:nth-child(8){margin-right:0;} ul.ex_box_wrap li div.ico{width:100px;margin:auto;padding:20px 0 15px 0;} ul.ex_box_wrap li div.ico img{text-align:center;width:100%;} ul.ex_box_wrap li span{color:#333;font-size:15px;margin-bottom:5px;} ul.ex_box_wrap li .price{font-size:19px;color:#189bfa;font-weight:300;margin-top:10px;} ul.ex_box_wrap li .off{color:#777;} .col-sm-4 div.ico{width:100px;margin:auto;padding:20px 0 15px 0;} .col-sm-4 div.ico img{text-align:center;width:100%;} .col-sm-4 span{color:#333;font-size:15px;margin-bottom:5px;} .col-sm-4 .price{font-size:19px;color:#189bfa;font-weight:300;margin-top:10px;} .col-sm-4 .off{color:#777;} .report_con .message{font-size:20px;margin-top:25px;text-align:center;font-weight:300;color:#222;clear:both;} .report_con .message strong.color-key{color:#189bfa;} .report_con .message i.icon-font{margin-top:-3px;vertical-align:middle;} .icon-font{font-family: 'Noto Sans KR', sans-serif;line-height:1;position:relative;display:inline-block;-webkit-font-smoothing:antialiased;margin-right:5px;} .icon-siren:before{content:"";display:inline-block;width:36px;height:30px;background:no-repeat;background-position:center center;background:url(https://www.carhistory.or.kr/img/icon/siren.png);background-size:cover;} .icon-angle-up:before{content:"\f106";} .icon-siren.small:before{width:30px;height:25px;margin-right:5px;} .message.small{font-size:16px;margin-bottom:20px;} .message.small strong{font-weight:500;} .report_con .bg-lightgray{background-color:#f5f5f5;font-size:16px;line-height:26px;text-align:center;border:1px solid #e8e8e8;padding:20px 0;margin-bottom:20px;} span.color-sky{color:#189bfa;} .report_con p{font-size:14px;color:#444;font-weight:400;line-height:25px;} .report_con p.small{font-size:12px;margin-top:20px;} .report_con p.small.color-gray{color:#787878;} .report_con ul.dashed-line{margin-top:25px;} .report_con ul.dashed-line li{padding:30px 0;border-top:1px dashed #b4b4b4;} .report_con ul.dashed-line li:first-child{border-top:none;padding-top:0;} .crash-info-list{display:table;table-layout:fixed;width:100%;} .crash-info-list .row [class^="col-md-"]{display:inline-table;min-height:1px;float:none;} .crash-info-list .row{display:table-row;} .crash-info-list .row div{float:left;text-align:center;vertical-align:middle;width:100%;} .crash-info-list .row .col-md-2{width:16.66666667%;} .crash-info-list .row .col-md-4{width:30.6%;} .crash-info-list .row .col-md-6{width:49%;margin-right:30px;} .crash-info-list .date{vertical-align:middle;} .xlarge{color:#189bfa;font-size:24px;line-height:26px;} .table-head{color:#fff;text-align:center;padding:18px;margin-bottom:5px;} .table-head.color-sky{background-color:#189bfa;} .table-head.color-mint{background-color:#00b5b8;} .crash_tb{width:100%;} .crash_tb thead th{font-size:14px;height:50px;line-height:47px;background-color:#f5f5f5;border:1px solid #d2d2d2;color:#333;font-weight:400;width:50%;} .crash_tb tbody td span.badge{font-size:13px;display:inline-block;vertical-align:middle;letter-spacing:-0.02em;border-radius:10px;background-color:#3c3c3c;color:#fff;line-height:20px;height:20px;padding:0 7px;font-weight:400;margin-bottom:5px;} .crash_tb tbody td a.btn{display:inline-block;margin-bottom:0;font-weight:normal;letter-spacing:-0.02em;text-transform:uppercase;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #189bfa;color:#189bfa;background-color:#fff;font-size:12px;border-radius:13px;padding:0 10px;margin-bottom:12px;} .crash_tb tbody td a.btn:hover{background:#006eb6;color:#fff;border:1px solid #006eb6;} .crash_tb tbody td{text-align:center;font-size:14px;line-height:22px;border:1px solid #d2d2d2;color:#222;font-weight:700;width:50%;vertical-align:middle;padding:20px 0;} .crash_tb tbody tr.long-1{height:90px;padding:0;} .crash_tb tbody tr.long-2{height:190px;padding:0;} .crash_tb tbody td strong.color-sky{color:#189bfa;} .crash_tb tbody td strong.color-mint{color:#00b5b8;} .bullet-list{} .bullet-list li{position:relative;padding-left:10px;font-size:14px;line-height:25px;letter-spacing:-1px;} .bullet-list li .bullet{position:absolute;left:0;top:0;} .bullet-list li .color-key{color:#189bfa;} .collapse_area.popup .report_con ul.ex_box_wrap li{width:22.5%;} .collapse_area.popup .report_con ul.ex_box_wrap li:nth-child(4){margin-right:0;} .collapse_area.popup .report_con ul.dashed-line li div.crash-info-list .row .col-md-2{width:18%;} .collapse_area.popup .report_con ul.dashed-line li div.crash-info-list .row .col-md-6{width:45%;} .dol-md-6 table.learn-box{} .dol-md-6 table.learn-box tbody tr th{background-color:#f5f5f5;border:1px solid #ddd;vertical-align:middle;width:40%;padding:15px 0;color:#222;font-weight:500;} .dol-md-6 table.learn-box tbody tr td{border:1px solid #ddd;vertical-align:middle;width:60%;padding:15px 0 15px 25px;color:#189bfa;text-align:left;font-weight:500;} .dol-md-5 table.learn-box{width:100%;} .dol-md-5 table.learn-box tbody tr th{background-color:#f5f5f5;border:1px solid #ddd;vertical-align:middle;width:25%;padding:20px 0;color:#222;font-weight:400;} .dol-md-5 table.learn-box tbody tr td{border:1px solid #ddd;text-align:center;vertical-align:middle;width:25%;padding:20px 0;color:#189bfa;font-weight:600;} .dol-md-5 table.learn-box tbody tr td.df_gray{color:#333;} .guide-box-container{position:relative;width:100%;display:block;margin-top:40px;} .guide-box-container .deco{z-index:3;width:140px;position:absolute;right:10px;bottom:-10px;} .guide-box-container .deco img{display:block;max-width:100%;height:auto;} .guide-box-container .guide-box{position:relative;z-index:2;padding:30px;padding-right:160px;background-color:#f5f5f5;} .guide-box-container .guide-box span.guide-title{background-color:#189bfa;color:#fff;border-radius:18px;padding:10px 20px;line-height:12px;font-size:13px;position:absolute;top:-14px;} .guide-box-container .guide-box ul.guide-list{} .guide-box-container .guide-box ul.guide-list li{padding-left:10px;margin-top:10px;position:relative;} .guide-box-container .guide-box ul.guide-list li strong.li-title{position:static;display:block;left:0;top:0;font-size:15px;line-height:24px;color:#222;letter-spacing:-1px;margin-bottom:5px;} .guide-box-container .guide-box ul.guide-list li strong.li-title:before{content:"";display:inline-block;width:4px;height:4px;background-color:#189bfa;margin-right:10px;position:relative;top:-3px;} .guide-box-container .guide-box ul.guide-list li .li-content{padding-left:13px;font-size:14px;line-height:24px;color:#777;margin-bottom:15px;} ul.ex_box_wrap{display:block;} ul.ex_box_wrap li{float:left;border:1px solid #e6e6e6;margin-right:30px;width:247px;margin-bottom:30px;padding-bottom:20px;text-align:center;} ul.ex_box_wrap li:nth-child(4), .collapse_area .report_con ul.ex_box_wrap li:nth-child(8){margin-right:0;} ul.ex_box_wrap li div.ico{width:100px;margin:auto;padding:20px 0 15px 0;} ul.ex_box_wrap li div.ico img{text-align:center;width:100%;} ul.ex_box_wrap li span{color:#333;font-size:15px;margin-bottom:5px;} ul.ex_box_wrap li .price{font-size:19px;color:#189bfa;font-weight:300;margin-top:10px;} ul.ex_box_wrap li .off{color:#777;} .car_popup{font-size:11px;} .car_popup .close{top:3px;right:0;} .car_popup h3{padding-bottom:10px;font-size:15px;color:#000;border-bottom:1px solid #000;} .car_popup h4, .car_popup h5{margin:13px 0 10px;font-size:13px;color:#000;} .car_popup h4:first-child{margin-top:0;} .car_popup .scr_cont{overflow:auto;padding:0px;height:380px;/*-webkit-overflow-scrolling:touch;*/} .car_popup .scr_cont::-webkit-scrollbar { -webkit-appearance:none;} .car_popup .scr_cont::-webkit-scrollbar:vertical { width:6px;} .car_popup .scr_cont::-webkit-scrollbar:horizontal { height:6px;} .car_popup .scr_cont::-webkit-scrollbar-thumb { background-color:rgba(0, 0, 0, .5);border-radius:3px;border:2px solid #fff;} .car_popup .scr_cont::-webkit-scrollbar-track { border-radius:3px;background-color:#fff;} .car_popup .tbl_data{border:1px solid #d5d5d5;border-bottom:none;} .car_popup .tbl_data th, .car_popup .tbl_data td{padding-left:5px;border-bottom:1px solid #e5e5e5;text-align:left;vertical-align:middle;} .car_popup .tbl_data th{background:#f0f0f0;} .car_popup .tbl_data td{height:38px;border-left:none;color:#000;} .car_popup .tbl_data2{border-top:1px solid #d5d5d5;border-right:1px solid #d5d5d5;} .car_popup .tbl_data2 th, .car_popup .tbl_data2 td{height:39px;border-bottom:1px solid #e5e5e5;border-left:1px solid #c9c9c9;text-align:center;vertical-align:middle;} .car_popup .tbl_data2 thead th{padding:0;background:#f0f0f0;font-weight:400;} .car_popup .tbl_data2 tbody th{padding:0;} .car_popup .tbl_data2 td{color:#000;} .car_popup .notice01{margin-top:13px;padding-left:28px;background:url('/m/img/ico_notice01.gif') 0 5px no-repeat;background-size:19px;line-height:15px;} .car_popup .notice02{margin-top:13px;padding-left:28px;background:url('/m/img/ico_notice02.gif') 0 5px no-repeat;background-size:21px;line-height:15px;} .car_popup .notice03 > li{margin-top:20px;line-height:15px;} .car_popup .notice03 li ol li{padding-left:11px;list-style:decimal;list-style-position:inside;line-height:15px;text-indent:-11px;} .car_popup .sign{margin-top:20px;text-align:center;} .car_popup .sign img{width:103px;} .collapse-area.collapse-area-popup{width:100%;} .col-xs-6-popup{width:46%;} .color-box-popup{font-size:17px;} /* 2021-01-05 추가 작업자 유혜련 */ .collapse-area{position:relative;z-index:2;margin-top:20px;display:grid;} .collapse-area .header-area{background-color:#333;color:#fff;padding:20px;font-size:15px;} .collapse-area .result-area{padding:20px;background-color:#fff;border:1px solid #eee;border-top:0;} .collapse-area .result-area p{margin-top:0;margin-bottom:15px;font-size:13px;color:#3c3c3c;letter-spacing:-0.5px;line-height:20px;} .collapse-area .result-area p span.color-sky{color:#189bfa !important;} .collapse-area .result-area .result-summary{display:inline-block;} .col-xs-6{width:46.5%;float:left;margin-right:20px;} .col-xs-6:nth-child(2), .col-xs-6:nth-child(4), .col-xs-6:nth-child(6), .col-xs-6:nth-child(8){margin-right:0;} .col-xs-6 .line-box{display:table;table-layout:fixed;margin-top:10px;margin-bottom:10px;width:100%;font-size:15px;border:1px solid #e6e6e6;} .col-xs-6 .line-box .icon-text-container{display:table-cell;min-height:1px;text-align:center;vertical-align:middle;height:178px;} .col-xs-6 .line-box .icon-text-container.container-3{height:200px;} .icon{width:80px;margin-left:auto;margin-right:auto;margin-bottom:10px;} .icon img{ max-width:100%; width:100%; } .price{color:#189bfa;font-size:18px;word-break:keep-all;margin-top:10px;} .price strong{font-weight:700;} .price.off, .price.off strong{color:#777!important;} .price em.s_price{display:inline-block;font-size:15px;padding-top:10px;} .message{text-align:center;margin-top:10px;} .icon_font{vertical-align:middle;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;letter-spacing:0 !important;position:relative;display:inline-block;-webkit-font-smoothing:antialiased;word-break:keep-all;} .icon-siren:before{content:"";display:inline-block;width:30px;height:25px;background-repeat:no-repeat;background-position:center center;background:url('/m/img/sell/icon/siren.png');background-size:cover;box-sizing:border-box;} .message span.xs-br{display:block;font-size:15px;margin-top:15px;line-height:20px;} .message span.xs-br.xb_br{font-size:16px;font-weight:normal;line-height:25px;letter-spacing:-0.5px;} .message span.xs-br strong{font-weight:700;color:#189bfa;} .message span.xs-br.xb_br strong{font-weight:500;color:#189bfa;} .result_tb{} .result_tb.tb-date{margin-bottom:15px;} .result_tb tr th{padding:15px 0;font-size:14px;width:50%;background-color:#f5f5f5;border:1px solid #d2d2d2;vertical-align:middle;font-weight:700;color:#3c3c3c;text-align:left;padding-left:15px;} .result_tb tr td{padding:15px 0;padding-left:15px;font-size:13px;width:50%;border:1px solid #d2d2d2;vertical-align:middle;font-weight:500;color:#189bfa;} .result_tb tr td.result_tit{background-color:#e6e6e6;color:#3c3c3c;text-align:center;font-weight:700;padding-left:0;} .result_tb tr td.color-gr{color:#777;} .content-container{margin-top:30px;} .col-sm-4{position:relative;width:100%;min-height:1px;padding-left:10px;padding-right:10px;word-break:keep-all;text-align:center;font-size:15px;margin-bottom:30px;} .col-sm-4:last-child{margin-bottom:10px;} .guide-box-container{position:relative;margin-top:50px;} .guide-box-container .guide-box{position:relative;z-index:2;padding:25px 20px;padding-right:80px;background-color:#f5f5f5;} span.guide-title{background-color:#189bfa;color:#fff;border-radius:16px;padding:9px 20px;font-size:13px;position:absolute;top:-15px;} ul.guide-list{} ul.guide-list li{margin-top:10px;position:relative;} ul.guide-list li .li-title{display:block;margin-bottom:10px;font-size:15px;line-height:24px;color:#3c3c3c;letter-spacing:-0.5px;} ul.guide-list li .li-content{font-size:13px;line-height:24px;letter-spacing:-0.5px;} .color-box{background-color:#f5f5f5 !important;font-size:18px;line-height:26px;text-align:center;padding:20px;margin-bottom:1em;border:1px solid #e8e8e8;margin:20px 0;} .color-box span.after-colon-md{} .color-box span.color-key{color:#189bfa !important;} .color-box span.xs-br{display:block;} .result-area p.s-txt{font-size:13px;color:#555;line-height:25px;letter-spacing:-1px;font-weight:normal;} .result-area p.s-txt .color-key{color:#189bfa;} .result-area p.s-txt.color-gray{color:#787878 !important;} .result-date{color:#189bfa;font-size:18px;text-align:center;display:block;} .dashed-line li{border-top:1px dashed #b4b4b4;padding:20px 0;} .dashed-line li:first-child{border-top:none;padding-top:0;margin-top:10px;} .dashed-line li .col-md-6{position:relative;min-height:1px;margin-top:20px;} .table-head{padding:15px 0;margin-bottom:8px;color:#fff;text-align:center;font-size:13px;} .table-head.color-sky{background-color:#189bfa !important;} .table-head.color-mint{background-color:#00b5b8 !important;} table.table-body{} table.table-body thead th{font-size:14px; background-color:#f5f5f5;border:1px solid #d2d2d2;text-align:center;padding:15px 0;letter-spacing:-0.5px;vertical-align:middle;color:#3c3c3c;width:50%;} table.table-body tbody td{text-align:center;padding:10px 0 !important;font-size:14px;line-height:24px;color:#222;border:1px solid #d2d2d2;vertical-align:middle;letter-spacing:-0.5px;} table.table-body tbody td strong.color-key{color:#189bfa;} table.table-body tbody td strong.color-mint{color:#00b5b8;} table.table-body tbody td .badge{margin-bottom:5px;font-size:12px;/* line-height:24px; */line-height:18px;display:inline-block;vertical-align:middle;letter-spacing:-0.5px;border-radius:10px;background-color:#3c3c3c;color:#fff;line-height:18px;height:20px;padding:0 10px;} table.table-body tbody td .badge.color-sky{background-color:#fff;border:1px solid #189bfa;color:#189bfa;} table.table-body-5 thead th{width:100%;} table.table-body-5 tbody td{width:100%;} .bullet-list{} .bullet-list li{position:relative;padding-left:8px;font-size:13px;color:#555;line-height:23px;letter-spacing:-1px;font-weight:normal;margin-bottom:8px;} .bullet-list li span.bullet{position:absolute;left:0;top:0;} .bullet-list li span.color-key{color:#189bfa !important;} .collapse-area.collapse-area-popup{width:100%;} .col-xs-6-popup{width:45%;} .color-box-popup{font-size:17px;} /** 2023-03-02 상세 페이지 금액 스텝 **/ .price--info--wrap{ width:100%; margin:0 auto; display: flex; align-items: center; justify-content: center; flex-wrap:wrap; gap:25px; padding:20px; } .price--info--wrap > div{ width:100%; max-width:calc(50% - 12.5px); height:94px; display: flex; align-items:center; justify-content:flex-start; background: rgba(239, 242, 245, .8); border-radius: 18px; padding-left:10px; } .price--info--wrap > div .thumb{ width: 40px; height: 40px; border-radius: 10px; background: #FFFFFF; margin-right:10px; } .price--info--wrap > div .thumb.ic--01{background: #FFFFFF url(../img/tmb_ic01.svg) no-repeat center!important;} .price--info--wrap > div .thumb.ic--02{background: #FFFFFF url(../img/tmb_ic02.svg) no-repeat center!important;} .price--info--wrap > div .thumb.ic--03{background: #FFFFFF url(../img/tmb_ic03.svg) no-repeat center!important;} .price--info--wrap > div .thumb.ic--04{background: #FFFFFF url(../img/tmb_ic04.svg) no-repeat center!important;} .price--info--wrap > div .desc h2{ font-weight: 400; font-size: 14px; line-height: 100%; letter-spacing: -0.03em; color: #666666; } .price--info--wrap > div .desc p{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 17px; letter-spacing: 0.03em; color: #000000; display: flex; align-items:center; margin-top:12px; } .price--info--wrap > div .desc p span{ font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 12px; letter-spacing: -0.03em; color: #333333; margin-left:5px; } .price--info--wrap > div:nth-of-type(1){ background: #37A0EA; } .price--info--wrap > div:nth-of-type(1) .desc p span, .price--info--wrap > div:nth-of-type(1) .desc h2, .price--info--wrap > div:nth-of-type(1) .desc p{ color:#fff; } .trading--finish{} .trading--finish li{ font-weight: 350; font-size: 14px; color: #333333; margin-bottom:5px; } .trading--finish li span{ display: inline-flex; align-items:center; justify-content:center; min-width:50px; width: 50px; height: 28px; background: #FFFFFF; border: 1px solid rgba(30, 117, 255, 0.5); border-radius: 50px; margin-left:15px; } .status--text.tr--missed{ font-weight: 400; font-size: 14px; letter-spacing: -0.03em; color: #8691A3; } .status--text.tr--delay{ font-weight: 400; font-size: 14px; letter-spacing: -0.03em; color: #333333; } .status--text.tr--fail{ font-weight: 400; font-size: 14px; letter-spacing: -0.03em; color: #E12544; } /** 2023-03-08 모바일 **/ .header--wrapper .header--contents .hmb--btn{ width:66px; height:66px; background:url(../img/hmb_on.svg) no-repeat center; position:absolute; top:0px; right:0px; z-index: 1; } .header--wrapper .header--contents .sub--title{ display:flex; align-items:center; justify-content:flex-start; height:66px; } .header--wrapper .header--contents .sub--title .back--btn{ width:66px; height:66px; background: url(../img/back_btn.svg) no-repeat center; } .header--wrapper .header--contents .sub--title h2{ font-weight: 700; font-size: 16px; line-height: 100%; color: #000000; } aside{ position: fixed; top:0px; right:100%; width:100%; height:100%; z-index: 10; display:block; background:#fff; padding:0px 20px; transition: right .2s linear; } aside.actv{ right:0%; } aside .close--btn{ width:66px; height:66px; background:url(../img/hmb_off.svg) no-repeat center; position: absolute; top:0px; right:0px; } aside .log--msg{ width:100%; padding-top:40px; display: flex; align-items:center; } aside .log--msg .thumb{ width:43px; height:43px; border-radius:43px; background:#E2E5EA url(../img/user_ic_off.svg) no-repeat center; } aside .log--msg .thumb.on{ background:#1E75FF url(../img/user_ic_off.svg) no-repeat center; } aside .log--msg h2{ font-weight: 350; font-size: 16px; color: #000000; margin-left:13px; } aside .log--msg h2 .arrow--right{ display: inline-flex; min-width:15px; width:15px; height:15px; background: url(../img/log_msg_arrow.svg) no-repeat center; margin-left:10px; position:relative; top:1px; } aside .gnb--wrapper{ display:flex; flex-direction:column; margin-top:25px; } aside .gnb--wrapper a{ display: flex; width:100%; align-items: center; justify-content: flex-start; height:63px; border-bottom:1px solid #f1f1f1; background: url(../img/gnb_arrow_ic.svg) no-repeat calc(100% - 10px) center; font-weight: 400; font-size: 15px; letter-spacing: -0.03em; color: #333333; } aside .gnb--wrapper a.login--out{ color: #1E75FF; } aside .gnb--wrapper a.login--out .logout--ic{ min-width:18px; width:18px; height:18px; background:url(../img/logout_ic.svg) no-repeat center; position: relative; top:1px; margin-right:12px; } .auto--login--wrap{ margin-bottom:40px; } .auto--login--wrap label{ letter-spacing: -0.03em; } .auto--login--wrap input[type="checkbox"] + label:before{ width:20px; height:20px; background-size:cover; } .table--mobile--wrap{ overflow-x:auto; width:100%; } .table--mobile--wrap table{ min-width:600px; } .sch--m--wrapper{ width:100%; } .sch--m--wrapper select, .sch--m--wrapper input{ background:#F1F1F1; } .sch--m--wrap{ position:relative; width:100%; } .sch--m--wrap .sch--t--btn{ position:absolute; top:0px; right:0px; z-index: 9; width:45px; height:45px; background:url(../img/m_sch.svg) no-repeat center; } .sch--m--wrap input{ width:100%; } .spacer--top{ border-top:15px solid #F1F1F4; }