@charset "utf-8";

/* dirveTip */
#container.beginnerTip{width:100vw;min-height:100vh;margin:0 auto;padding:calc(13.3333vw + env(safe-area-inset-top)) 0 calc(46.6667vw + env(safe-area-inset-bottom));background:#F8F8F8;}

.carTipWrap{margin-top:8.8889vw;}
.carTipWrap .MTitle{padding-top:0;}
.carTipWrap .MTitle.mB16 {margin-bottom: 4.4444vw;}
.carTipWrap .tipDetail{display:flex;margin-top:4.4444vw;}
.carTipWrap .tipDetail li{flex:1;border:0.2778vw solid #eee;border-radius:2.2222vw;}
.carTipWrap .tipDetail li + li{margin-left:2.2222vw;}
.carTipWrap .tipDetail li a{display:block;position:relative;padding:3.3333vw 0;}
.carTipWrap .tipDetail li a .txt:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:8.8889vw;height:8.8889vw;}
.carTipWrap .tipDetail li a.myCar .txt:before{background:url('../img/tip/icon_car.png') no-repeat;background-size:8.8889vw 8.8889vw;}
.carTipWrap .tipDetail li a.model .txt:before{background:url('../img/tip/icon_model.png') no-repeat;background-size:8.8889vw 8.8889vw;}
.carTipWrap .tipDetail li a.searchCar .txt:before{background:url('../img/tip/icon_cardatail.png') no-repeat;background-size:8.8889vw 8.8889vw;}
.carTipWrap .tipDetail li .txt{position: relative;padding-top:11.1111vw;font-weight:600;text-align:center;}
.carTipWrap .tipEstimate{display:flex;margin-top:4.4444vw;border:0.2778vw solid #eee;border-radius:2.2222vw;}
.carTipWrap .tipEstimate a{flex:1;height:13.3333vw;line-height:13.3333vw;text-align:center;}
.carTipWrap .tipEstimate a + a{border-left:0.2778vw solid #eee;}
.carTipWrap .tipEstimate a .txt{display: inline-block; position:relative;padding-left:7.7778vw;font-weight:600;line-height:13.8889vw;}
.carTipWrap .tipEstimate a .txt:before{content: '';position:absolute;top:50%;left:0;transform:translateY(-50%);width:6.6667vw;height:6.6667vw;}
.carTipWrap .tipEstimate a.simpleCalc .txt:before{background:url('../img/tip/icon_calc.png') no-repeat;background-size:6.6667vw 6.6667vw;}
.carTipWrap .tipEstimate a.insuranceEst .txt:before{background:url('../img/tip/icon_estimate.png') no-repeat;background-size:6.6667vw 6.6667vw;}
.carTipWrap .tipEstimate a.monthBenefit .txt:before{background:url('../img/tip/icon_benefit.png') no-repeat;background-size:6.6667vw 6.6667vw;}
.carTipWrap .tipEstimate a.buyConsult .txt:before{background:url('../img/tip/icon_consult.png') no-repeat;background-size:6.6667vw 6.6667vw;}
.tipListTit{display:flex;align-items:center;justify-content:space-between;position:relative;margin-top:11.1111vw;line-height:6.6667vw;}
.tipListTit .MTitle{flex:0 0 auto;padding-top:0;line-height:6.6667vw;}
.tipListTit .toolTip{display:inline-block;z-index:1;width:6.6667vw;height:6.6667vw;vertical-align:text-bottom;background:url('../img/tip/icon_tooltip.png') 0 0 no-repeat;background-size:6.6667vw 6.6667vw; cursor: pointer;}
.tipListTit .toolTip .toolTipBox{display:none;z-index:0;position:absolute;left:0;top:6.6667vw;width:91.1111vw;height:19.7222vw;padding:4.4444vw;border-radius:2.2222vw;line-height:6.1111vw;color:#888;background:#fff;box-shadow: 0.0000vw -0.8333vw 2.6389vw 0.1389vw rgba(0, 0, 0, 0.1); transition: top .3s;}
.tipListTit .toolTip .toolTipBox:after{content:'';z-index:1;position:absolute;top:-3.6111vw;left:27.2000vw;border-top:0.0000vw solid transparent;border-left:2.2222vw solid transparent;border-right:2.2222vw solid transparent;border-bottom:3.6111vw solid #fff;}
.tipListTit .toolTip .toolTipBox.on {top:10.2778vw;}
.tipListTit .more{flex:0 0 auto;line-height:6.6667vw;font-size:3.3333vw;font-weight:600;}
.tipListTit .more:after{content: '';display:inline-block;width: 1.1111vw;height: 2.2222vw;vertical-align:middle;background:url('../img/common/icon_detail.png') 0 0 no-repeat;background-size: 1.1111vw 2.2222vw;margin: -0.5556vw 0 0 2.2222vw;}
.tipListTit .more.new:before {content: '';display: inline-block; vertical-align: middle; width: 2.2222vw; height: 2.2222vw; background-color: #E8441A; border-radius: 50%; margin: -0.5556vw 1.6667vw 0 0;}

.toolTip {display:flex; justify-content:flex-start; align-items: center; position:relative; padding-bottom: 4.4444vw; box-sizing: border-box;}
.toolTip .tipTit {display:flex; justify-content: flex-start; align-items: center; position:relative; width:auto; height:6.6667vw; font:600 5vw/1 'Apple SD Gothic Neo'; box-sizing: border-box;}
.toolTip .tipTit .toolTipBtn {display:inline-flex; z-index: 3; position:relative; width:6.6667vw; height:6.6667vw; box-sizing: border-box;}
.toolTip .toolTipBox{display:none;position:absolute;left:0;top:0; width:91.1111vw;height:0;opacity: 0; padding:4.4444vw;border-radius:2.2222vw; background:#fff;box-shadow: 0.0000vw -0.8333vw 2.6389vw 0.1389vw rgba(0, 0, 0, 0.1); transition: top .4s; z-index: 2;}
.toolTip .toolTipBox p {height:inherit; color:#888;  font:300 3.8889vw/1.536 'Apple SD Gothic Neo'; word-break: keep-all; letter-spacing: -0.04em;}
.toolTip.on .tipTit:after {content:'';z-index:3; transition: border .4s .3s; position:absolute;bottom:-3.3333vw;right:1.1111vw;border-top:0.0000vw solid transparent;border-left:2.2222vw solid transparent;border-right:2.2222vw solid transparent;border-bottom:3.6111vw solid #fff; transition: bottom .3s;}
.toolTip.on .toolTipBox {opacity: 1; top:8vw; height:auto;}
.toolTip .more{flex:0 0 auto;line-height:6.6667vw;font-size:3.3333vw;font-weight:600;}
.toolTip .more:after{content: '';display:inline-block;width: 1.1111vw;height: 2.2222vw;vertical-align:middle;background:url('../img/common/icon_detail.png') 0 0 no-repeat;background-size: 1.1111vw 2.2222vw;margin: -0.5556vw 0 0 2.2222vw;}
.toolTip .more.new:before {content: '';display: inline-block; vertical-align: middle; width: 2.2222vw; height: 2.2222vw; background-color: #E8441A; border-radius: 50%; margin: -0.5556vw 1.6667vw 0 0;}

/* beginnerTip */ 
.tipHash{display:flex;justify-content:space-between;flex-flow:row wrap;width:100vw;margin:0 auto;padding:8.8889vw 4.4444vw;background:#fff;}
.tipHash a{flex:0 0 29.4444vw;height:8.6111vw;border:0.2778vw solid #eee;border-radius:11.1111vw;line-height:8.6111vw;text-align:center;transition: .3s;}
.tipHash a.on{background:#3B5094;border: 0.2778vw solid #3B5094;color:#fff;}
.tipHash a:nth-child(n+4){margin-top:2.2222vw;}
.beginnerListWrap{display:flex;justify-content:space-between;flex-flow:row wrap;width:91.1111vw;height:auto;margin:0 auto;}
.beginnerListWrap li{flex:0 0 44.4444vw; height:50.2778vw;}
.beginnerListWrap li:nth-child(n+3) {margin-top:4.4444vw;}
.beginnerListWrap li img{width:44.4444vw;height:24.7222vw;border-radius:2.2222vw 2.2222vw 0 0;}
.beginnerListWrap li a{display:block;}
.beginnerListWrap li .txtWrap{padding:4.4444vw 3.3333vw;height:25.5556vw;border:0.2778vw solid #eee;border-top:0;border-radius:0 0 2.2222vw 2.2222vw;background:#fff;}
.beginnerListWrap li .txtWrap p.tit{font-weight:600;line-height:4.7222vw;color:#3259D8;}
.beginnerListWrap li .txtWrap span.txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height:10.8333vw;margin-top:1.1111vw;font-weight:600;line-height:5.5556vw;}

/* tipDetail */
.mainBanner{width:100vw;}
.mainBanner img{width:100%;height:auto;}
.detailCon .mainTit{padding:11.1111vw 4.4444vw 8.8889vw 4.4444vw;background:#fff;}
.detailCon .mainTit .tit{margin:4.4444vw 0 2.2222vw 0;font-size:6.6667vw;font-weight:600;line-height:8.8889vw;}
.detailCon .mainTit .date{color:#888;}
.detailCon .secDetail{width:100vw;padding:6.6667vw 4.4444vw; background: #F8F8F8; margin-bottom: 6.857vw;}
.detailCon .secDetail p.subTit{line-height:5.5556vw;color:#888;word-break:break-all;}
.detailCon .secDetail span.txt{display:inline-block;margin-top:4.4444vw;line-height:6.1111vw;}
.detailCon .secDetail .photoSec{margin-top:11.1111vw;}
.detailCon .secDetail .photoSec p.tit{font-size:4.4444vw;font-weight:600;line-height:6.1111vw;color:#3B5094;}
.detailCon .secDetail .photoSec img{width:100%;height:auto;margin:4.4444vw 0;}
.detailCon .secDetail .photoSec span{display:inline-block;line-height:5.5556vw;color:#888;}
.detailCon .secDetail span {font-family: 'Apple SD Gothic Neo', sans-serif !important;}
.detailCon .secDetail b span {font-weight: 600;}
.detailCon .secDetail p span {font-family: 'Apple SD Gothic Neo', sans-serif !important;}
.detailCon .secDetail p > img {width:100%;}
.note-editor b span {font-weight: 600;}
.note-editor span {font-family: 'Apple SD Gothic Neo', sans-serif !important;}
.note-editor.note-airframe, .note-editor.note-frame { border:0 !important; }
.note-editor.note-airframe .note-editing-area .note-editable[contenteditable=false], .note-editor.note-frame .note-editing-area .note-editable[contenteditable=false] {background-color: #f8f8f8 !important;}
.note-editor.note-airframe .note-statusbar, .note-editor.note-frame .note-statusbar {display: none !important;}

/* 신규 newTag */
.more.nTag{padding-left:5.5556vw;line-height:6.6667vw !important;}
.more.nTag:before{content:'';position:absolute;top:50%;left:0;transform:translateY(-50%);width:4.4444vw;height:4.4444vw;background:url('../img/common/icon_n.png') 0 0 no-repeat;background-size:4.4444vw 4.4444vw;}
.beginnerListWrap .txtWrap .tit.newTag:after{z-index:2;content:'';position:absolute;top:50%;left:15.0000vw;transform:translateY(-50%);width:7.7778vw;height:4.4444vw;background:url('../img/common/icon_new.png') 0 0 no-repeat;background-size:7.7778vw 4.4444vw;}

/* tipQnA */
#container.fullWith {width:100vw;}
#container.fullWith.scroll {overflow-y: scroll;}
#container.fullWith .stepWrap{width:91.1111vw; margin:0 auto; }
#container.tipQnAdetail.fullWith {width:100vw;}
#container.tipQnAdetail.fullWith .postBoardDetail .detailTit{width:91.1111vw; margin:0 auto; padding:7.7778vw 0;}

.tipQnA .postTab {margin-top: 4.4444vw;}
.tipQnA .postTab .tabNotice {position: relative; font-size: 3.8889vw; font-weight: 400; line-height: 1.43; letter-spacing: -0.04em; color: #888; padding-left: 2.2222vw; padding-top: 2.2222vw; box-sizing: border-box;}
.tipQnA .postTab .tabNav ul.uiTab-nav {display: flex; justify-content: space-between; align-items: center;}
.tipQnA .postTab .tabNav ul.uiTab-nav li{width: 100%;}
.tipQnA .postTab .tabNav ul.uiTab-nav li a {display: flex; justify-content: center; align-items: center; width: 21.1111vw; height: 9.16667vw; font: 300 3.8889vw/1.429 'Apple SD Gothic Neo'; text-align: center; color: #222; background:#fff; border: 0.2778vw solid #eee; border-radius: 5vh;}
.tipQnA .postTab .tabNav ul.uiTab-nav li.on a {background: #3b5094; border: 0.2778vw solid #3b5094; color:#fff;}
.tipQnA .postTab .tabNav .postViewType {margin-top:6.6667vw;}
.tipQnA .postTab .tabContents {margin-top: 3.0556vw;}
.tipQnA .postTab .tabContents > div {display: none; }
.tipQnA .postTab .tabContents > div.on {display: block;}
.tipQnA .postTab .tabContents .postViewType.selectBox {display:flex; justify-content: flex-start; align-items: center;}
.tipQnA .postWrap.mainTit {width:100%; border-radius: 0; box-shadow: none;}
.tipQnA .postWrap.mainTit .postDesc .postSort {background-color: transparent; color:#3259D8; padding:0;}
.tipQnA .postWrap.mainTit .postDesc .postSort .tagLabel {display:inline-flex; justify-content: center; align-items: center; border: 1px solid #3259D8;}
.tipQnA .postWrap.mainTit .postDesc .postTitle {font-size: 6.6666vw; padding: 5.5555vw 0 0; word-break: keep-all;}
.tipQnA .postWrap.mainTit .postDesc .postTitle .title {height:auto;}
.tipQnA .postWrap.mainTit .postAuthor {width:100%; border-top:none; padding:4.4444vw 0 5.5555vw; box-sizing: border-box;}
.tipQnA .postWrap.mainTit .postAuthor .date {position:relative; font:inherit; color:inherit; padding-right:4.4444vw; box-sizing: border-box;}
.tipQnA .postWrap.mainTit .postAuthor .date::after {position:absolute; top:50%; right:0; transform:translate(0,-50%); content: ""; width:1px; height:3.3333vw; background: #eee; margin:0 2.2222vw;}
.tipQnA .postCont .resultNo {padding: 11.1111vw 0 7.7777vw;}
.tipQnA .postCont .toolTipBox {z-index: 1; height:34.7222vw;}

/*.myQnA*/
.myQnA .MTitle {margin-bottom: 2.2222vw;}
.myQnA .myQnAinput > div {margin-top: 2.2222vw;}
.myQnA .searchArea .formInput {margin-top: 0;}
.myQnA .searchArea .formInput input{position:relative;padding-right:22vw;}
.myQnA .searchArea .formInput .searchBtn{position:absolute;top:50%;right:2.2222vw;transform:translateY(-50%);width:8.8889vw;height:8.8889vw;background:url(../img/common/icon_search.png) 0 0 no-repeat;background-size:8.8889vw 8.8889vw;}
.myQnA .searchArea .formInput .btnDel{right:13.3333vw;}
.myQnA #imgUpload .fileBox .imgName{display:none;}
.myQnA #imgUpload .fileBox input[type="file"]{position:absolute;padding:0;width:0.2778vw;height:0.2778vw;margin:-0.2778vw;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.myQnA #imgUpload .uploadDisplay{width:26.6667vw;height:26.6667vw;margin-top:4.4444vw;border:0.2778vw solid #eee;border-radius:2.2222vw;overflow:hidden;box-sizing:border-box;-webkit-box-sizing:border-box;}
.myQnA #imgUpload .uploadDisplay img{width:100%;height:100%;border-radius:2.2222vw;}
.myQnA #imgUpload .fileImgWraps .fileBoxWraps {display:flex; justify-content:flex-start; align-items:flex-start;}
.myQnA #imgUpload .fileImgWraps .fileBoxWraps .fileBox {display:flex; flex-flow:column wrap; justify-content:center; align-items:center; position:relative; width:28.0555vw; height:28.0555vw; border:1px solid #3B5094;border-radius:2.2222vw; overflow:hidden; box-sizing:border-box;}
.myQnA #imgUpload .fileImgWraps .fileBoxWraps .fileBox:not(:last-child) {margin-right:3.3334vw;}
.myQnA #imgUpload .fileFormat{display:flex; flex-flow:column; justify-content:center; align-items:center; position:relative; height:100%; font-size:3.8889vw; line-height:1.22; font-weight:600;}
.myQnA #imgUpload .previewImg {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; box-sizing:border-box;-webkit-box-sizing:border-box;}
.myQnA #imgUpload .previewImg img {position:absolute; width:100%; height:100%; object-fit:cover; z-index:1; background:#fff;}
.myQnA #imgUpload .previewImg button {position:absolute; top:0; right:0; width:7.7777vw; height:7.7777vw; font-size:0; background:url(../img/common/icon_close.png) no-repeat center / 100% auto; cursor:pointer; z-index:1;}
.myQnA .textareaWrap textarea::placeholder {font: 300 4.4444vw/1.429 'Apple SD Gothic Neo'; letter-spacing: -0.02em;}
.myQnA .postBoard .postWrap .postDesc .postTitle {font: 300 3.8889vw/1.5 'Apple SD Gothic Neo';}
.myQnA .postBoard .postWrap .postDesc .postSort {font-weight: 300;}

/* tipDeatail */
.detailCon .mainTit .mainTitInfo {display: flex; justify-content: space-between; align-items: center; flex: 1 auto;}
.detailCon .mainTit .ico {margin-left: 3.3333vw;color: #222;font-weight: normal;}
.detailCon .mainTit .ico::before {content: "";display: inline-block;margin-right: 1.1111vw;width: 4.4444vw;height: 4.4444vw;vertical-align: middle;background-repeat: no-repeat;background-size: contain;}
.detailCon .mainTit .view::before {background-image: url(../img/common/icon_view.png);}
.detailCon .secDetail p.subTitB {line-height:5.5556vw; font-size: 4.571vw; color:#222; font-weight: 600; word-break:break-all; margin-bottom: 2.286vw;}
.detailCon .secDetail p.subTit{line-height:5.5556vw;color:#888;word-break:break-all; margin-bottom: 4.571vw;}
.detailCon .secDetail a {display: block; margin-bottom: 4.571vw; }
.detailCon .secDetail a.subTit{line-height:5.5556vw;color:#888;word-break:break-all; }
.detailCon .secDetail span.txt{display:inline-block;margin-bottom:11.429vw;line-height:6.1111vw;}
.detailCon .secDetail span.mainSpanTxt {margin-bottom: 0; margin-top: 6.857vw;}
.detailCon .secDetail .photoSec p.tit{font-size:4.4444vw;font-weight:600;line-height:6.1111vw;color:#3B5094; margin-bottom: 4.571vw;}
.detailCon .secDetail .photoSec img{width:100%;height:auto;}
.detailCon .secDetail .checkListDri img {margin-bottom: 6.857vw;}
.detailCon .secDetail .photoSec span.txt {color: #222;}
.detailCon .secDetail .newsList span.txt {margin-bottom: 2.286vw;}

/*.basicTip */
.basicTip .MTitle {margin-bottom: 2.2222vw;}
.basicTip .tipHash {width:100%; display:flex; flex-flow:row wrap; justify-content: space-between; align-items: center; padding:4.4444vw 0 8.8888vw;}
.basicTip .tipHash a {flex: 0 auto;  width:calc(100%/3); max-width:29.4444vw;}
.basicTip .postViewType.selectBox select {margin-bottom: 4.4444vw;}
.basicTip .beginnerList {display:flex; justify-content: center; align-items: flex-start; height:100%; background: #F8F8F8; padding:6.6667vw 0; box-sizing: border-box;}
.basicTip .beginnerList ul.beginnerListWrap {flex-flow:row wrap; width:91.1112vw;}
.basicTip .beginnerList ul.beginnerListWrap li {flex:auto; margin:0  auto 2.2222vw; transition: all .3s;}
.basicTip .beginnerList ul.beginnerListWrap li:nth-child(2n){margin-left:2.2222vw;}
.basicTip .beginnerList ul.beginnerListWrap li.line {border-top:1px solid red;}
.basicTip .beginnerList ul.beginnerListWrap li a {display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; width:44.4444vw; overflow: hidden; box-sizing: border-box;}
.basicTip .beginnerList ul.beginnerListWrap li a img {width:100%; height:auto;}
.basicTip .beginnerList ul.beginnerListWrap li a .txtWrap {width: 100%; box-sizing: border-box;}

/* .myQnAlist */
.myQnAlist .postBoard .postWrap {padding:3.3333vw 0;}