@charset "utf-8"; header{ height:81px; } 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; } header .header--wrapper .header--contents{ width:100%; max-width:1200px; height:81px; display:flex; align-items:center; justify-content:flex-start; } header .header--wrapper .header--contents .logo{ width:132px; min-width:132px; height:40px; background:url(../img/logo.png) no-repeat center; } 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.actv{ font-weight: 700; font-size: 17px; text-align: center; letter-spacing: -0.03em; color: #1E75FF; } header .header--wrapper .header--contents .gnb--wrapper > a:last-child{ margin-right:0px; } 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: #FAFAFA; display: flex; justify-content:center; } 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 p span{ font-weight: 350; font-size: 15px; letter-spacing: -0.03em; color: #333333; line-height:100%; padding-right:24px; position: relative; } footer > div > div p span:after{ content:''; display: block; width:1px; height:13px; background:#c4c4c4; position: absolute; top:50%; transform: translateY(-50%); right:11px; margin-top:1px; } footer > div > div p span:last-child:after{ display:none; } footer > div > div p.copy--right{ margin-top:35px; font-weight: 350; font-size: 15px; line-height: 100%; text-transform: uppercase; color: #333333; } .main--visual{ width:100%; height:600px; background:url(../img/main_slide.jpg) no-repeat center; } .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; } .main--visual .main--visual--title--wrap > h2{ font-weight: 700; font-size: 35px; letter-spacing: -0.03em; color: #FFFFFF; padding-top:182px; } .main--visual .main--visual--title--wrap > p{ font-weight: 300; font-size: 15px; letter-spacing: -0.03em; line-height: 2; color: #EBEBEB; margin-top:35px; } .main--visual .main--visual--title--wrap .main--visual--contents{ display:flex; align-items: center; justify-content: flex-end; margin-top:134px; width:100%; } .main--visual .main--visual--title--wrap .main--visual--contents .box--01{ width: 76px; height: 76px; background: #00C2FF; box-shadow: 0px 10px 10px rgba(11, 33, 69, 0.5); border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .main--visual .main--visual--title--wrap .main--visual--contents .box--02{ width: 76px; height: 76px; background: #1E75FF; box-shadow: 0px 10px 10px rgba(11, 33, 69, 0.5); border-radius: 15px; margin-left:15px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .main--visual .main--visual--title--wrap .main--visual--contents .box--01 h2, .main--visual .main--visual--title--wrap .main--visual--contents .box--02 h2{ font-weight: 400; font-size: 13px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; padding:0px; margin:0px; } .main--visual .main--visual--title--wrap .main--visual--contents .box--01 div, .main--visual .main--visual--title--wrap .main--visual--contents .box--02 div{ font-weight: 700; font-size: 15px; line-height: 100%; text-align: center; color: #FFFFFF; padding:0px; margin:0px; margin-top:12px; } .main--visual .main--visual--title--wrap .main--visual--contents .car--find{ width: 520px; height: 76px; background: #FFFFFF; box-shadow: 0px 10px 10px rgba(11, 33, 69, 0.5); border-radius: 12px; margin-left:45px; 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 .car--find--btn{ position: absolute; top:50%; transform: translateY(-50%); right:20px; width: 120px; height: 50px; background: #1E75FF; border-radius: 8px; font-weight: 700; font-size: 14px; color: #FFFFFF; } .main--visual .main--visual--title--wrap .main--visual--contents .car--find .car--find--btn .zoom--icon{ display: inline-flex; min-width:13px; width:13px; height:13px; background:url(../img/sch_icon.png) no-repeat center; margin-left:9px; position: relative; top:1px; } .car--list--wrap{ max-width:1200px; margin:0 auto; padding-top:80px; } .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: 22px; 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{ display: flex; align-items:center; gap : 45px; margin-top:40px; flex-wrap:wrap; } .car--list--wrap > ul > li{} .car--list--wrap > ul > li .car--box--wrap{ background: #F8F8FA; border-radius: 40px; padding:40px 0px; width: 266px; height: 420px; 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.tr--delay{ background: #ACBCCF; border-radius: 50px; } .car--list--wrap > ul > li .car--box--wrap .status--wrap span.tr--fail{ background: #E12544; border-radius: 50px; } .car--list--wrap > ul > li .car--box--wrap .status--wrap span.sell--fail{ background: #FB4F29; border-radius: 50px; } .car--list--wrap > ul > li .car--box--wrap .status--wrap span.ready{ background: #A5AEBC; } .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 > ul{ gap:34px; } .car--list--wrap.ty2 > ul > li .car--box--wrap{ padding:0px; border-radius:0px; background:transparent; width:274px; } .car--list--wrap.ty2 > ul > li .car--box--wrap .thumb--wrap{ background: #F7F7F7; width:100%; height:190px; 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:274px; max-height:190px; width:auto; height:auto; } .car--list--wrap.ty2 > ul > li .car--box--wrap .car--name{ width:100%; max-width:100%; text-align: left; padding-top:35px; padding-bottom:25px; } .car--list--wrap.ty2 > ul > li .car--box--wrap .car--info{ width:100%; } .car--list--wrap.ty2 > ul > li .car--box--wrap .status--wrap{ width:100%; justify-content: flex-start; } .car--list--wrap.ty2 > ul > li .car--box--wrap .status--wrap span{ min-width:64px; justify-content: center; } .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; } /** 서브 페잊 **/ .sub--top--visual{ height:150px; width:100%; background:url(../img/top_banner.jpg) no-repeat center; background-color: #1E75FF; display: flex; align-items:center; justify-content:center; } .sub--top--visual.cscenter{ background:url(../img/top_banner2.jpg) no-repeat center; background-color: #1E75FF; } .sub--top--visual .contents--inner{ width:100%; max-width:1200px; margin:0 auto; } .sub--top--visual .contents--inner > h2{ font-weight: 700; font-size: 25px; line-height: 100%; letter-spacing: -0.02em; color: #FFFFFF; text-align: center; } .sub--top--visual .contents--inner > p{ font-weight: 350; font-size: 15px; line-height: 100%; letter-spacing: -0.02em; color: #FFFFFF; margin-top:25px; text-align: center; } .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:41px; height:54px; font-weight: 350; font-size: 14px; line-height: 100%; letter-spacing: -0.03em; color: #555555; border-right:1px solid #eee; display:inline-flex; align-items: center; background:url(../img/arrow_bottom_ic.svg) no-repeat calc(100% - 12px) center; cursor: pointer; position:relative; z-index: 2; } .top--nav--wrap .contents--inner .breadcrumbs--wrap > span > ul{ position: absolute; top:54px; left:-1px; width:150px; border:1px solid #eee; padding:20px; background: #fff; display: none; } .top--nav--wrap .contents--inner .breadcrumbs--wrap > span > ul li{ padding:10px 0px; font-weight: 350; font-size: 14px; line-height: 100%; letter-spacing: -0.03em; color: #555555; } .top--nav--wrap .contents--inner .breadcrumbs--wrap > span:hover > ul{ display: block; } .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: #000000; } .owner--information--wrap{ width:100%; display: flex; align-items:center; justify-content:flex-start; flex-direction: column; 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: 18px; line-height: 100%; letter-spacing: -0.02em; color: #222222; } .owner--information--wrap .sch--modules--wrap{ width:100%; max-width:1200px; height: 85px; background: #0063FF; border-radius: 20px; display: flex; align-items: center; justify-content: flex-start; margin-top:20px; padding:0 20px; } .owner--information--wrap .sch--modules--wrap > div input{ height:45px; 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 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: 130px; height: 45px; background: #FF5C00; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2); border-radius: 10px; font-weight: 700; font-size: 14px; text-align: center; letter-spacing: -0.02em; color: #FFFFFF; margin-left:20px; } .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%; max-width:1200px; margin:0 auto; 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; gap:40px; } .car--info--wrap .form--wrap .form--groups{ display:flex; align-items:flex-start; justify-content: flex-start; width:100%; flex-direction: column; } .car--info--wrap .form--wrap .form--groups > h2{ font-weight: 500; 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:45px; } .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 .modal--body > h2{ font-weight: 500; font-size: 18px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #000000; margin:0px; padding:0px; } .check--box .form--group{ margin-bottom:15px; } .modal .modal-content .modal--body > p{ font-weight: 350; font-size: 15px; text-align: center; letter-spacing: -0.03em; color: #666666; margin-top:20px; } .modal--wrap .modal--content .inner--contents{ display: flex; align-items: center; justify-content:center; flex-direction: column; } .modal--wrap .modal--content.ty2 .inner--contents{ padding:30px; } .modal--wrap .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--wrap .modal--content .inner--contents > p{ font-weight: 350; font-size: 15px; text-align: center; letter-spacing: -0.02em; color: #777777; margin-top:20px; } .modal--wrap .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--log{ width:100%; max-width:1200px; height: 190px; margin: 0 auto; background: #FFFFFF; border: 1px solid rgba(30, 117, 255, 0.3); border-radius: 20px; padding:35px 50px; position: relative; } .car--accident--log .accident--show--btn{ position:absolute; bottom:20px; right:20px; height:45px; } .car--accident--log h2{ font-weight: 500; font-size: 20px; line-height: 100%; letter-spacing: -0.03em; color: #222222; } .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:30px 30px 60px 30px; 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% / 4) - (60px / 4) ); padding:25px; } .car--accident--column .items--box .car--accident--box .thumb{ width:59px; height:59px; border-radius: 59px; margin-right:23px; } .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; } .car--accident--column .items--box .car--accident--box .desc > div{ display: inline-flex; height: 22px; background: #F7F7F9; border-radius: 50px; padding:0 15px; font-weight: 350; font-size: 12px; color: #333333; margin-top:14px; } .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; width:100%; height:58px; font-weight: 350; font-size: 15px; text-align: center; letter-spacing: -0.03em; color: #333333; margin-top:10px; } .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; margin-right:15px; } .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% / 5); 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; } .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; } .options--wrapper > h2 .astc--text.ty2{ color: #909EB5; } .options--wrapper .options--list{ width:100%; border-top:1px solid #888; margin-top:20px; padding-top:40px; } .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:30px; margin-bottom:50px; } .options--wrapper .options--list > ul >li{ width:calc(100% / 4); } 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:16px; height:16px; background:url(../img/check_off.svg) no-repeat center; margin-right:12px; } input[type="checkbox"]:checked + label:before{ background:url(../img/check_on.svg) no-repeat center; } input.ty2[type="checkbox"]:checked + label:before{ background:url(../img/activate.png) no-repeat center; background-size: 16px; } .options--wrapper .pic--add--wrap{ display: flex; align-items: center; justify-content:space-between; width:100%; border-top:1px solid #888; margin-top:20px; padding-top:40px; } .options--wrapper .pic--add--wrap.bd-0{ border:0px; padding-top:0px; } .options--wrapper .pic--add--wrap .add--box{ width: 224px; height: 224px; display: flex; align-items: center; justify-content:center; flex-direction: column; background: #FFFFFF; border: 1px solid #EEEEEE; box-shadow: 0px 5px 5px rgba(239, 240, 241, 0.5); border-radius: 20px; } .options--wrapper .pic--add--wrap .add--box .thumb{ width: 80px; height: 80px; border-radius: 80px; 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: 26px; height: 26px; border-radius:26px; border: 1px solid #EDEFF1; box-shadow: 0px 2px 2px #DDE1E8; background:#fff url(../img/add_ic.svg) no-repeat center; 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: 100px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(30, 117, 255, 0.3); border-radius: 50px; cursor: pointer; } .car--btn--wrapper{ width:100%; max-width:1200px; margin:0 auto; padding-top:70px; display:flex; align-items:center; justify-content: flex-end; } .car--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--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; } .options--wrapper .editor--wrapper{ display: flex; align-items: center; justify-content:space-between; width:100%; border-top:1px solid #888; margin-top:20px; padding-top:40px; } /* .options--wrapper .editor--wrapper.ty2{ border-top:0px; padding-top:0px; } */ /** 로그인 **/ .login--form--wrap{ width:100%; max-width:100%; margin:0 auto; height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; background: url(../img/login_bg.jpg) no-repeat center; background-size:cover; } .login--form--contents{ background: #FFFFFF; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1); border-radius: 50px; width:520px; height:485px; box-sizing: border-box; padding:60px; } .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:35px; } .button-login-box button{ width:100%; height:45px; } .login--box--title { display: flex; width:100%; justify-content:space-between; align-items: center; margin-bottom:40px; } .login--box--title a{ display: inline-flex; width:131px; min-widtdh:131px; 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; } .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%; max-width:1200px; margin:0 auto; display:flex; flex-direction:column; padding-top:70px; } .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 table{ border-top:1px solid #555555; } .join--form--wrap .join--form--contents table tbody th{ width: 171px; height: 67px; background: #F9F9F9; padding-left:30px; border-bottom:1px solid #eee; } .join--form--wrap .join--form--contents table tbody td{ height: 67px; padding-left:19px; border-bottom:1px solid #eee; font-weight: 350; font-size: 14px; color: #1F1F1F; } .join--form--wrap .join--form--contents > h2{ color:#000000; font-weight: bold; font-size: 32px; text-transform: uppercase; margin-bottom: 20px; background: linear-gradient(to right, #270a09, #8ca6ce); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .join--form--wrap .join--form--contents select, .join--form--wrap .join--form--contents input{ height: 43px; border-radius:0px; border: 1px solid #E8E8E8; max-width:350px; } .join--btn--wrap button{ width:120px; margin:0 5px; border-radius:10px; } .join--btn--wrap button.cancel--btn{ background: #C8CFD9; border-color:#C8CFD9; } /** 모달 중앙 컨텐츠 여백 : S **/ .modal-content{ border-radius:30px; } .modal-body{ padding:30px; } .modal-title{ font-weight: 500; font-size: 18px; color: #111111; } .modal-header{ border:0px; padding-top:25px; padding-left:30px; padding-right:30px; } .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:20px 45px 50px 50px; border-top:0px; } .modal-footer.ty2 button{ height:50px; 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; } /** 모달 중앙 컨텐츠 여백 : 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:1200px; margin:0 auto; } .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-top:70px; } .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:0 25px; padding-top:55px; } .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:35px; } .idpw--form--wrap .idpw--form--contents .tab .inner--contents .items--box > div > label{ 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{ border-radius:0px; height:45px; border-color:#E8E8E8; } /* 페이지 네이션 */ .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:30px; background:#1E75FF url(../img/check-circle.png) no-repeat calc(100% - 30px) center; border-radius: 10px; margin-left:auto; } /** 진행상태 **/ .progress--wrap{ display:flex; align-items:flex-start; justify-content:space-between; } .progress--wrap > div{ position:relative; } .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:-45px; } .progress--wrap > div:last-child:after{ display:none; } .progress--wrap > div > .status--box{ width: 188px; 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:20px 28px 30px;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('/admin/img/btn_popup_close.png') 50% no-repeat;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;} /** 2023-03-02 상세 페이지 금액 스텝 **/ .price--info--wrap{ width:100%; max-width:1200px; margin:0 auto; display: flex; align-items: center; justify-content: center; gap:25px; } .price--info--wrap > div{ width:100%; max-width:297px; height:94px; display: flex; align-items:center; justify-content:flex-start; background: rgba(239, 242, 245, .8); border-radius: 18px; padding-left:20px; } .price--info--wrap > div .thumb{ width: 54px; height: 54px; border-radius: 10px; background: #FFFFFF; margin-right:22px; } .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){ max-width:235px; 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; } /** 사고이력 조회 **/ .car--search--wrap{ display:flex; align-items: center; justify-content: center; width:100%; padding-top:111px; padding-bottom:171px; } .car--search--wrap .car--serach--inner{ width:100%; max-width:1200px; display:flex; align-items:center; justify-content: center; } .car--search--wrap .car--serach--inner .thumb{ width:545px; height:517px; background: url(../img/hp_img.png) no-repeat center; margin-right:70px; } .car--search--wrap .car--serach--inner .desc h2{ font-weight: 700; font-size: 45px; line-height: 100%; letter-spacing: -0.03em; color: #333333; } .car--search--wrap .car--serach--inner .desc h2 span{ color: #417FFA; } .car--search--wrap .car--serach--inner .desc p{ font-weight: 350; font-size: 18px; line-height: 100%; letter-spacing: -0.03em; color: #555555; margin-top:40px; margin-bottom:80px; } .car--search--wrap .car--serach--inner .desc input{ min-width:420px; padding-left:30px; color:#555; } .car--search--wrap .car--serach--inner .desc input::placeholder{ font-weight: 400; font-size: 17px; letter-spacing: -0.03em; color: #B7B7B7; } .car--search--wrap .car--serach--inner .desc button{ min-width:150px; font-weight: 700; font-size: 17px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; } /** 공지사항 **/ .notice--board--wrap{ width:100%; max-width:1200px; margin:0 auto; padding-top:44px; } .notice--board--wrap.view--type{ padding-top:90px; } .notice--board--wrap .board--search--wrap .result--count{ font-weight: 350; font-size: 15px; letter-spacing: -0.03em; color: #333333; } .notice--board--wrap .board--search--wrap .result--count span{ font-weight: 700; font-size: 15px; letter-spacing: -0.03em; color: #1E75FF; } .notice--board--wrap .board--search--wrap .sch--wrappers{ position:relative; } .notice--board--wrap .board--search--wrap .sch--wrappers input{ height:47px; background:#F9F9F9; width:300px; border-radius: 10px; } .notice--board--wrap .board--search--wrap .sch--wrappers input::placeholder{ font-weight: 350; font-size: 14px; letter-spacing: -0.03em; color: #9A9A9A; } .notice--board--wrap .board--search--wrap .sch--wrappers .sch--btn{ position: absolute; top:0px; right:0px; z-index: 9; width:47px; height:47px; background:url(../img/sch_ic2.svg) no-repeat center; } .notice--board--wrap table{ width:100%; } .notice--board--wrap table tbody tr{ position:relative; } .notice--board--wrap table tbody tr:after{ content:''; display: block; position: absolute; top:5px; left:0px; height:62px; width:100%; border:1px solid #f4f4f4; border-radius: 10px; } .notice--board--wrap table tbody tr td{ height:72px; padding:5px; } .notice--board--wrap table tbody tr td .board--captions{ font-weight: 400; font-size: 15px; letter-spacing: -0.03em; color: #000000; } .notice--board--wrap table tbody tr td .board--captions .lock--notice{ display:inline-flex; align-items: center; justify-content:center; width: 70px; height: 34px; background: #FFFFFF; border: 1px solid rgba(30, 117, 255, 0.5); border-radius: 10px; font-weight: 500; font-size: 13px; letter-spacing: -0.03em; color: #1E75FF; margin-right:25px; } .notice--board--wrap table tbody tr td .date--text{ font-weight: 350; font-size: 15px; color: #888888; } .notice--board--wrap table tbody tr td .numb{ font-weight: 350; font-size: 15px; letter-spacing: -0.03em; color: #555555; } .board--view--wrap{} .board--view--wrap > h2{ font-weight: 700; font-size: 40px; line-height: 100%; text-align: center; letter-spacing: -0.03em; color: #222222; margin-bottom:50px; } .board--view--wrap .date--box{ display: flex; align-items: center; justify-content:center; font-weight: 350; font-size: 15px; text-align: center; color: #888888; } .board--view--wrap .date--box .icon--date{ width:17px; height:17px; display: inline-flex; background:url(../img/cal_ic.svg) no-repeat center; margin-right:12px; } .board--view--wrap .editor--wrap{ width:100%; max-width:1035px; margin:0 auto; margin-top:90px; } .board--view--wrap .btn--wrapper .btn-list{ width:130px; height:60px; background: #333333; border-radius: 13px; font-weight: 500; font-size: 15px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; } .faq--wrap > div{} .faq--wrap > div > ul > li{ background: #FFFFFF; border: 1px solid #F4F4F4; border-radius: 10px; padding:25px 30px; margin-bottom:10px; } .faq--wrap > div > ul > li .faq--header{ display: flex; align-items: center; justify-content:flex-start; position: relative; z-index: 1; } .faq--wrap > div > ul > li .faq--header:after{ content:''; position: absolute; top:0px; right:0px; width:16px; height:16px; display: block; background: url(../img/arrow_botton_ic2.svg) no-repeat center; } .faq--wrap > div > ul > li.actv .faq--header:after{ transform: rotate(180deg); } .faq--wrap > div > ul > li .faq--header .q--icon{ display: inline-flex; min-width:16px; width:16px; height:16px; background: url(../img/q_ic.svg) no-repeat center; margin-right:30px; } .faq--wrap > div > ul > li .faq--header > h2{ font-weight: 500; font-size: 15px; letter-spacing: -0.03em; color: #000000; } .faq--wrap > div > ul > li .faq--body{ display: none; background: #F9F9F9; padding:25px; border-radius: 12px; margin-top:20px; font-weight: 350; font-size: 15px; letter-spacing: -0.03em; color: #444444; } .faq--wrap > div > ul > li.actv .faq--body{ display: block; } .qna--wrapper{ width:100%; margin:0 auto; background: #F1F6F9; padding-top:60px; padding-bottom:100px; } .qna--wrapper .qna--inner{ width:100%; max-width:1200px; margin:0 auto; } .qna--wrapper .qna--inner .form--wrapper textarea{ padding:22px; } .qna--wrapper .qna--inner .form--wrapper > div > label{ font-weight: 500; font-size: 15px; letter-spacing: -0.03em; color: #000000; margin-bottom:15px; } .qna--wrapper .qna--inner .form--wrapper > div select, .qna--wrapper .qna--inner .form--wrapper > div input{ height: 54px; background-color: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 8px; } .qna--wrapper .qna--inner .form--wrapper > label{ font-weight: 500; font-size: 15px; letter-spacing: -0.03em; color: #000000; margin-bottom:15px; } .qna--wrapper .qna--inner .agree--wrapper label{ font-weight: 350; font-size: 15px; text-align: right; letter-spacing: -0.03em; color: #555555; } .qna--wrapper .qna--inner .info--btn{ display: inline-flex; min-width:18px; width:18px; height:18px; background:url(../img/info.png) no-repeat center; margin-left:8px; position: relative; top:1px; } .qna--wrapper .qna--inner .btn--wrappers{ padding-top:70px; display: flex; align-items: center; justify-content: center; width:100%; } .qna--wrapper .qna--inner .btn--wrappers button{ width:150px; height:60px; border-radius: 10px; } .nm--btn--wrapper{ width:100%; max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:flex-end; margin-top:35px; } .nm--btn--wrapper button{ width: 240px; height: 65px; }