@import url(https://fonts.googleapis.com/css?family=Roboto:100);
:root {
  --swiper-theme-color: #fff;
  --swiper-navigation-size: 20px;
}

html, body {
  height: 100%;
  margin: 0;
}

#loading {
  display: block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  bottom: auto;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); 
  z-index: 9999;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}


.vignetting {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  box-shadow: inset 0 0 300px rgba(0,0,0,0.9);
  z-index: 9; 
}

em { font-style: normal; }
.sidebar {transition: all .25s ease-in-out;}
.topbar { text-align: center; position: fixed; width: 100%; height: 60px; border-bottom: 1px solid #222; z-index: 99;}
.navbar {padding: 0 3.5rem;}
.navbar-nav { margin-left: 100px; }
.navbar-nav .nav-item { width: 200px; position: relative;;}
.navbar-nav .nav-item a { padding: 20px 0; display: inline-block; width: 100%; font-size: 1.2rem; font-weight: 600; color: #666; transition: all .3s}
.navbar-nav .nav-item a:after { content: ''; position: absolute;  bottom: 0; left: 50%; width: 0; display: inline-block; height: 3px; background: #b59c7b;  transition: all .3s}
.navbar-nav .nav-item.on a,
.navbar-nav .nav-item a:hover { color: #b59c7b}
.navbar-nav .nav-item.on a:after,
.navbar-nav .nav-item a:hover::after { width: 50%; transform: translateX(-50%)}
.navbar-nav .nav-item a .use { font-size: 11px; display: inline-block; padding: 0px 6px; letter-spacing: -1px; background: #666; color: #fff; border-radius: 10px; margin-right: 4px; vertical-align: middle;}
.navbar-nav .nav-item .btn_title { padding: 20px 0; display: inline-block; font-size: 1.2rem; font-weight: 600; color: #999 !important; }

nav .nav-right { position: absolute; top:0; right: 2.5rem }
nav .nav-right li { list-style: none; display: block; float: left}
nav .nav-link.screenfull-btn { padding: 0 20px !important; }

.modal { background: rgba(0, 0, 0, .65); }

.bg-gradient-bluepop { background-image: linear-gradient(90deg, #0af 4%, #8168ff 95%) !important;}
.bg-gradient-deepblue {
	background-color: #0A133B;
	background-image: linear-gradient(180deg, #0A133B 10%, #0A133B 100%);
	background-size: cover
}
.bg-gradient-primary {
	background-color: #4b5159;
	background-image: linear-gradient(180deg, #4b5159 10%, #4b5159 100%);
	background-size: cover
}
.bg-gradient-secondary {
	background-color: #858796;
	background-image: linear-gradient(180deg, #858796 10%, #60616f 100%);
	background-size: cover
}
.bg-gradient-success {
	background-color: #1cc88a;
	background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
	background-size: cover
}
.bg-gradient-info {
	background-color: #36b9cc;
	background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
	background-size: cover
}
.bg-gradient-warning {
	background-color: #f6c23e;
	background-image: linear-gradient(180deg, #f6c23e 10%, #dda20a 100%);
	background-size: cover
}
.bg-gradient-danger {
	background-color: #e74a3b;
	background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
	background-size: cover
}
.bg-gradient-light {
	background-color: #f8f9fc;
	background-image: linear-gradient(180deg, #f8f9fc 10%, #c2cbe5 100%);
	background-size: cover
}
.bg-gradient-dark {
	background-color: #5a5c69;
	background-image: linear-gradient(180deg, #5a5c69 10%, #373840 100%);
	background-size: cover
}
.topbar a{ text-decoration: none }
.brand-image { height: 20px;}
.topbar .topbar-brand-icon i {
	font-size: 2rem
}
.topbar .topbar-brand-text {
	display: inline; font-family: "Playfair Display", serif; color: #cdaa85; text-transform: uppercase; font-weight: 800;font-style: normal; font-size: 1.1rem; letter-spacing: 0.35rem
}

.formtitle { font-weight: 800; word-break: keep-all; font-size: 1.5rem; padding: 50px 3.5rem 20px; }

/* checkbox */
input[type="checkbox"] { position:relative; opacity:1; width:20px; height:20px; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; border:1px solid #d4d4d4; background:#fff; outline:0; vertical-align:middle; margin-right: 5px }
input[type="checkbox"]:checked { border:0; background-image:url("/img/bg_checkbox_checked.png"); -webkit-transition:.2s ease-out; transition:.2s ease-out; }
/* ie */
input[type="checkbox"]::-ms-check { border:1px solid #ababab; background-color:#fff; }
input[type="checkbox"]:checked::-ms-check { color:transparent; border:0; background-image:url("/img/bg_checkbox_checked.png"); background-repeat:no-repeat; }
input[type="checkbox"]:disabled { cursor:default; border:1px solid #d6d6d6; background:#f5f5f5; }
input[type="checkbox"]:disabled::-ms-check { cursor:default; border:1px solid #d6d6d6; background:#f5f5f5; }
input[type="checkbox"]:checked:disabled { opacity:0.5; border:0; background-image:url("/img/bg_checkbox_checked.png"); background-repeat:no-repeat; }
input[type="checkbox"]:checked:disabled::-ms-check { opacity:0.5; border:0; background-image:url("/img/bg_checkbox_checked.png"); background-repeat:no-repeat; }
input[type="checkbox"].readonly { opacity: .5}

.scrollbar::-webkit-scrollbar-track{ border-radius: 0; opacity: 0; transition: all .25s; }
.scrollbar::-webkit-scrollbar{ width: 0.45rem; border-radius: 0.225rem; opacity: 0; transition: all .25s; }
.scrollbar::-webkit-scrollbar-thumb{ border-radius: 0.225rem; background-color: rgba(0, 0, 0, 0); transition: all .25s; opacity: 0}
.scrollbar:hover::-webkit-scrollbar-track{ border-radius: 0; background-color: rgba(0, 0, 0, 0.05); opacity: 1}
.scrollbar:hover::-webkit-scrollbar{ width: 0.45rem; border-radius: 0.225rem; opacity: 1}
.scrollbar:hover::-webkit-scrollbar-thumb{ border-radius: 0.225rem; background-color: rgba(0, 0, 0, 0.15); opacity: 1}
/*.scrollbar:after { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 70px; background-image: linear-gradient(transparent, #f8f8fb); z-index: 1}*/

.panel-summary .scrollbar:hover::-webkit-scrollbar-track{ border-radius: 0; background-color: rgba(255, 255, 255, 0.1); opacity: 1}
.panel-summary .scrollbar:hover::-webkit-scrollbar{ width: 0.45rem; border-radius: 0.225rem; opacity: 1}
.panel-summary .scrollbar:hover::-webkit-scrollbar-thumb{ border-radius: 0.225rem; background-color: rgba(255, 255, 255, 0.1); opacity: 1}


.reg_slt_btn { display: flex; text-align:left; box-sizing:border-box; /*border-radius: 10px; background: #eee; padding: 4px; */margin-bottom: 50px}
.panel-summary .item-list { width: 100%; padding: 0;}
.panel-summary .item-list-group { position: relative; width: 100%; height: calc(100% - 76px); display: inline-block; padding: 3rem 1rem 1rem 3rem; margin-bottom: 0; overflow-y: auto; }


.reg_slt_btn li { display: flex; width: auto; padding: 0px; text-align: left; margin-right: 5px; box-sizing:border-box;}
.reg_slt_btn li img { width:65px; height:65px}
.reg_slt_btn.fuel_ul li { width: 23.2%}
.reg_slt_btn.trim_ul li { width: 23.2%}
.reg_slt_btn.event_ul li { width: 48.2%}
.reg_slt_btn.model_ul li { width: 48.2%}
.reg_slt_btn.cs_kind_ul li { width: 48.2%}

.reg_slt_btn label { position: relative; box-sizing:border-box; display: inline-block; padding: 0px; margin:0px; margin-bottom: 5px; font-size: .95rem; font-weight: 500; text-align: left; width: 100%; border: 1px solid #fff; background-color: #fff; border-radius: 12px; cursor: pointer; box-sizing:border-box; -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, .05); box-shadow: 0 4px 16px rgba(0, 0, 0, .05); overflow:hidden; transition: all .3s}
.reg_slt_btn.event_ul label { font-size: 1.08rem}
.reg_slt_btn.model_ul label { font-size: 1.08rem}
.reg_slt_btn.cs_kind_ul label { font-size: 1.08rem; margin-right: 5px }

.reg_slt_btn.c_option li { /*width: 18.8%;*/ }
.reg_slt_btn label .item-img { position: relative; background: #E8E8E8; padding-top: 75%; overflow: hidden; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.reg_slt_btn label .item-img img { width: 65px; height: 65px; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%)}
.reg_slt_btn label .item-text { display: inline-block; align-items: center; width: 100%; padding: 5px; word-break: keep-all;}
.reg_slt_btn label strong { padding: 3px 0; display: inline-block; font-size: 12px; letter-spacing: -0.5px; line-height: 1.5; /*min-height: 70px;*/ word-break: keep-all; color: #111 }
.reg_slt_btn label .item-text > strong { display: block }
.reg_slt_btn label strong .btn { font-size: 12px; color: #CDCDCD; width: 25px; height: 25px; line-height: 25px; border-radius: 50%; padding: 0; display: inline-block;}
.reg_slt_btn label strong .btn:hover { color:#DF1115;  }
.reg_slt_btn label .item-text .price {font-size: .895rem}
.reg_slt_btn label em { font-size: .78rem; font-style: normal; font-weight: 400; display: inline-block}
.reg_slt_btn label strong span { display: none}
.reg_slt_btn .endsale label strong { color: #aaa}
.reg_slt_btn .endsale label strong span { display: inline-block}
.reg_slt_btn .endsale label strong span:before { content: '비공개'; font-size: 11px; display: inline-block; padding: 0px 6px; letter-spacing: -1px; background: #666; color: #fff; border-radius: 10px; margin-right: 4px; vertical-align: middle}

.icon_public { display: inline-block !important; color: #fff ; padding: 3px 6px; border-radius: 6px; background-color: #bbb !important; border:0; font-size: 12px; margin-left: 10px }

.reg_slt_btn label .btn_info { background-color: transparent; background-image: url(../img/icon_info.svg); background-size: contain; display: inline-block; height: 24px; position: absolute; right: .6pc; top: .6pc; width: 24px; border: 0; z-index: 1; }
.reg_slt_btn.trim_ul label .btn_info { background-image: url(../img/icon_info_b.svg); }
#InfoPopup .close { position: absolute; background: rgba(0,0,0,0.3); right: 0; font-size: 40px; font-weight: 100; width: 50px; height: 50px; color: #fff; text-shadow: none; z-index: 1}
#InfoPopup .modal-content { overflow: hidden}
#InfoPopup .modal-body { padding: 0 3rem;}
#InfoPopup .modal-body p > img { width: calc(100% + 6rem); margin: 0 -3rem}
#InfoPopup .modal-body table tr td { vertical-align: top}
#InfoPopup .modal-body table tr td > img { max-width: 100%}

.reg_slt_btn input[type="radio"] { display: none; }
.reg_slt_btn input[type="radio"] + label:before { content: ''; background: url("../img/check_ble.png?v=2") no-repeat; background-size: cover; display: inline-block; width: 0; height: 0; position: absolute; bottom:8px; right:8px; z-index: 1; opacity: 0;  transition: all .2s}
.reg_slt_btn input[type="radio"]:checked + label { border: #0087ff 1px solid; color: #0087ff; background: rgba(0,216,255,0.1); font-weight: 700; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16); }
.reg_slt_btn input[type="radio"]:checked + label:before { width: 20px; height: 20px; position: absolute; bottom:4px; right:4px; opacity: 1}
.reg_slt_btn input[type="radio"]:disabled + label { border: #ddd 1px solid; color: #aaa; background: rgba(0,0,0,0.05); }

.reg_slt_btn.bullet label { border: #ccc 1px solid}
.reg_slt_btn.bullet input[type="radio"] + label:before { background: url("/img/bg_radio.png") no-repeat; width: 22px; height: 22px; position: absolute; top:50%; left:15px; transform: translateY(-50%); z-index: 1; opacity: 1;  transition: all .2s}
.reg_slt_btn.bullet input[type="radio"]:checked + label { border: #0087ff 1px solid; color: #0087ff; background: rgba(0,216,255,0.1);}
.reg_slt_btn.bullet input[type="radio"]:checked + label:before { background: url("/img/bg_radio_checked.png") no-repeat;  opacity: 1}
.reg_slt_btn.bullet label .item-text { padding-left: 50px; min-height: 65px; }

.reg_slt_btn input[type="checkbox"] { display: none; }
.reg_slt_btn input[type="checkbox"] + label:before { content: ''; background: url("../img/check_ble.png?v=2") no-repeat; background-size: cover; display: inline-block; width: 0; height: 0; position: absolute; bottom:25px; right:25px; z-index: 1; opacity: 0; transition: all .2s }
.reg_slt_btn input[type="checkbox"]:checked + label { border: #0087ff 2px solid; color: #0087ff; background: rgba(0,216,255,0.1); font-weight: 700; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16); }
.reg_slt_btn input[type="checkbox"]:checked + label:before { width: 22px; height: 22px; bottom:15px; right:15px; opacity: 1;} 

.reg_slt_btn.disabled input[type="checkbox"] + label { color: #aaa; background: none; cursor: not-allowed}
.reg_slt_btn.disabled input[type="checkbox"]:checked + label { border: #000 2px solid; color: #000; background:none; cursor: not-allowed}
.reg_slt_btn.disabled input[type="checkbox"]:checked + label:before { content: ''; background: url("../img/check.png?v=2") no-repeat; background-size: cover; }
.reg_slt_btn.disabled input[type="checkbox"]:disabled + label { border: #aaa 2px solid; color: #aaa; background: none; cursor: not-allowed}


.panel-items-warp { position: relative; max-width: 100%; width: 100%; height:100vh; padding-top: 60px; padding-right: 30pc; overflow:auto; transition: all .3s ;/*background-color: #f8f8f8; height: calc(100vh - 4.375rem);*/ }
.panel-items-warp.summary-close { padding-right: 0;}
.item-select-list { width: 100%; height: 100%; position: relative; overflow: hidden; }
.item-select-list>div {position: absolute; width: 100%; height: 100%; top:0; left: 0; right:0; bottom: 0; }
.item-select-list>div>img { width: 100%; height: 100%; object-fit: cover }
.form-group { margin-bottom: 3rem}
.panel-summary { background-color: #0A133B; color: #fff; height: calc(100vh - 60px); position: fixed; right: 0; top: 0; width: 30pc; margin-top: 60px; transition: all .3s; z-index: 1;}
.panel-summary.summary-close { right: -30pc } 
.list-group-item { border: 0; background-color: transparent; padding: 0}
.item-select-list .col-form-label { width: 100%; font-weight: 800; font-size: 1.25rem; margin-bottom: 8px }
.item-select-list .detail { font-size: 12px; font-weight: 400; line-height: 1.3; color: #888; width: 100%; padding: 5px 0; word-break: keep-all; }
.item-select-list .item-img .detail {position: absolute; z-index: 1; bottom: 0; font-size: 13px; color: #fff; background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .4) 80%); padding: 15px 15px 10px; }
.item-select-list .item-img img:before { content: ''; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 20%; background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .4) 80%);}
.item-select-list .notice { width: auto; height: auto; top:auto; left: auto; bottom: 0; right: 0; padding: 15px; color: #fff; font-size: 16px; letter-spacing: -0.5px }
.item-text .op_wrap { width: 100%; display: block; background: rgba(0,0,0,.04); /*border-top: #ccc 1px dotted;*/ padding: 8px 8px 3px; margin: 5px 0 5px; color: #333; font-size: 12px  }
.item-text .op_wrap strong { display: inline-block; padding: 0; line-height: 18px; font-size: 12px }
.op_hidden { display: none !important}




.panel-summary .item-list-group.close { height: 0; padding: 0 } 
.panel-summary .item-list-grou > li { position: relative; display: inline-block; width: 100% }
.panel-summary .item-list-group li > h4 { font-size:16px; font-weight: 600; letter-spacing: -0.5px; color: #fff; padding-bottom: 10px; width: 100%; display: block}
.panel-summary .item-list-group li > h4 > .slt_item { font-size:14px; color: #999; font-weight: 500; padding-left: 12px; margin-left: 12px; border-left: #444 1px solid}
.panel-summary .item-list-group li > .slide-list { font-size:11px; font-weight: 200; color: #fff}
.panel-summary .item-list-group li > .slide-list em { font-weight: 400; font-size:13px; font-style: normal}


.panel-summary .btn_set { padding: 10px 0; border-top: rgba(255,255,255,.1) 1px solid; display: inline-block; width: 100%; text-align: center;}
.panel-summary .btn_set .btn { width: 100%; height: auto; font-weight: 700; display: inline-block; border-radius: 0 }
.panel-summary .btn_set .btn:first-child { margin-left: 0}

/*swiper*/
.swiper { width: 90% }
.swiper-slide { text-align: center; font-size: 11px; line-height: 20px; height: 54px; word-break: keep-all; padding: 0 10px; background: #111; display: flex; justify-content: center; align-items: center; opacity: .5 }
.swiper-slide-active { font-size: 16px; font-weight: 700; background: #222; border-radius: 34px; opacity: 1 }
.nav-wrapper { position: absolute; top: 45%; left: 0%;  width: 100%; }
.swiper-button-next { right: 0; }
.swiper-button-prev { left: 0; }



.panel-summary .btn-arrow-left,
.panel-summary .btn-arrow-top { position: absolute; display: block; background: #0A133B; width: 45px; height: 45px; color: #fff; border: 0; border-radius: 0; opacity: 0.4 }
.panel-summary .btn-arrow-left { top: 0; left: -45px}
.panel-summary .btn-arrow-top { top: 5px; right: 0; display: none; z-index: 1}
.panel-summary .btn-arrow-left:hover,
.panel-summary .btn-arrow-top:hover { opacity: 1}


.switch { position: relative; display: inline-block;  width: 50px; height: 28px; margin-bottom: 0 }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: background-color 0.4s ease; border-radius: 28px; }
.slider:before {position: absolute;content: "";height: 20px;width: 20px;left: 4px;bottom: 4px;background-color: white; transition: transform 0.4s ease;  border-radius: 50%;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
input:checked + .slider { background-color: #2196F3;}
input:checked + .slider:before {transform: translateX(20px); }
.label-text {margin-left: 12px; margin-right:20px; font-size: 16px; font-weight: bold;color: #999; vertical-align: middle;}



/* 보기 모드 변경 */
.panel-items-warp.webzine-mode .reg_slt_btn label { display: flex; border-radius: 8px}
.panel-items-warp.webzine-mode .reg_slt_btn label .item-img { width: 64%; height: 0; border-radius: 8px; padding-top:30%; /*border-top-left-radius: 16px; border-bottom-left-radius: 16px; */float: left; margin: 15px; margin-right: -6px }
.panel-items-warp.webzine-mode .reg_slt_btn label .item-img img { /*top:0; left: 0; transform: translate(0);*/ }
.panel-items-warp.webzine-mode .reg_slt_btn label .item-img:after { height: 100%; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 8px; background:none} 
.panel-items-warp.webzine-mode .reg_slt_btn label .item-text { padding: 5px}
.panel-items-warp.webzine-mode .reg_slt_btn label .item-img .detail { display: none}
.panel-items-warp.webzine-mode .reg_slt_btn label .item-text > strong { display: block; line-height: 1.3}
/*.panel-items-warp.webzine-mode .reg_slt_btn label .item-text .price { width: 30%; position: absolute; top:20px; right: 36px; text-align: right; }*/
.panel-items-warp.webzine-mode .reg_slt_btn label .op_wrap strong { width: auto; }
.panel-items-warp.webzine-mode .reg_slt_btn label .op_wrap span { }
.panel-items-warp.webzine-mode .reg_slt_btn label .op_wrap > span:last-child { padding-left: 0;  }
.panel-items-warp.webzine-mode .reg_slt_btn label .op_wrap br { display: none; }
.panel-items-warp.webzine-mode .reg_slt_btn label .btn_info { background-image: url(../img/icon_info_b.svg); }



@media screen and (max-width: 1815px) {
  .formtitle { font-size: 1.3rem; margin-bottom: 0; padding: 35px 2.5rem 10px;}  
  .navbar {padding: 0 2rem;}
  .navbar-nav { margin-left: 50px; }
  .navbar-nav .nav-item { width: 150px; }
  .navbar-nav .nav-item a { padding: 16px 0; font-size: 1rem;}
  .navbar-nav .nav-item.on a:after,
  .navbar-nav .nav-item a:hover::after { width: 70%;}
  nav .nav-right { right: 10px }
  .brand-image { height: 18px;}
  .topbar .topbar-brand-text { font-size: 1rem; letter-spacing: 0.32rem }
  .panel-items-warp { padding-right: 400px; padding-top: 60px }
  .panel-items-warp.summary-close { padding-right: 0;}
  .panel-summary { width: 400px; margin-top: 60px; height: calc(100% - 60px) }
  .panel-summary.summary-close { right: -400px }
  .reg_slt_btn label { margin-bottom: 5px; }
  .reg_slt_btn label strong { font-size: 0.75rem;}
  .panel-summary .item-list-group { padding: 3rem 0 1rem 2rem; }
  .panel-summary li dt { font-size: 14px; font-weight: 800 }
  .panel-summary .item-list dt, .panel-summary .item-list dd { font-size: 12px; }
}

@media screen and (max-width: 1483px) {
  .formtitle { font-size: 1.3rem; margin-bottom: 0; padding: 35px 2rem 10px;}  
  .topbar .topbar-brand-text { letter-spacing: 0.26rem }
  .panel-items-warp { padding-right: 350px; }
  .panel-summary { width: 350px; }
  .panel-summary.summary-close { right: -350px } 
  .reg_slt_btn li img { width: 62px; height: 62px }
}
@media screen and (max-width: 1079px) {
}

@media (max-width: 991px) {
  nav .nav-right { top:0; right: 20px }
  .panel-items-warp { padding-right: 0; }
  .item-select-list { height: auto; padding-top:67% }
  .item-select-list .form-group { margin-bottom: 1.5rem}
  .item-select-list .notice { padding: 10px; font-size: 14px; letter-spacing: -1px }
  .item-list-group { }
  .reg_slt_btn.fuel_ul li,
  .reg_slt_btn.trim_ul li,
  .reg_slt_btn.model_ul li,
  .reg_slt_btn.event_ul li,
  .reg_slt_btn label strong { word-wrap: normal; }
  .reg_slt_btn li img { width: 60px; height: 60px }
  .panel-summary { width: 100%; height: 60%; padding:0 ; margin-top: 0; top:auto; left: 0; right: auto; bottom: 0; box-shadow: 0 3px 20px 20px rgba(0, 0, 0, .16); transition: none}
  .panel-summary.summary-close {left: 0; right: auto;}
  .formtitle { padding: 20px 1rem 0; }
  .vignetting { box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.9); }
  .panel-summary .item-list-group { padding: 50px 5px 10px 30px}
  .panel-summary .item-list-group.close { height: 0; margin-top: 10px;}
  .panel-summary .btn-arrow-top { display: block; right: 1.5rem}
  .panel-summary .btn-arrow-left { display: none}
  .panel-summary .sum_price dt { padding-top: 4px}
  .panel-summary .sum_price dd { margin-bottom: 12px}
  .panel-summary .sum_price dd .sum { display: inline-block;  margin-right: 10px}
  .panel-summary .btn_set { margin-top: 0; margin-bottom: 5px}
  .panel-summary .item-list-group { height: calc(100% - 60px);
}
@media (max-width: 780px) {
  .navbar { padding: 0 1rem; }
  .topbar .topbar-brand-text { display: none}
  .navbar-nav .nav-item { width: auto; padding: 0 20px}
  nav .nav-right { right: 10px }
  .panel-items-warp { padding-top: 60px}
  .item-select-list { padding-left: 0; padding-right: 0; margin-right: 0; }
  .item-select-list .notice { padding: 5px; font-size: 13px; }
  .reg_slt_btn.fuel_ul li,
  .reg_slt_btn.trim_ul li,
  .reg_slt_btn.model_ul li,
  .reg_slt_btn.event_ul li,
  .reg_slt_btn label .item-text { }
  .reg_slt_btn input[type="checkbox"]:checked + label:before { width: 22px; height: 22px; bottom:10px; right:10px; z-index: 1;}
  .reg_slt_btn label strong { font-size: .95rem; letter-spacing: -1px}
  .reg_slt_btn label { margin-bottom: 7px;}
  .reg_slt_btn li { margin-right: 7px }
  .item-select-list .col-form-label { font-size: 1.1rem; margin-bottom: 5px; letter-spacing: -1px }
  .item-select-list .detail { letter-spacing: -.05em}
  .panel-summary { padding:0; }
  .panel-summary .sum_price dt { font-size: 14px}
  .panel-summary .sum_price dd .sum { font-size: 14px;}
  .panel-summary .sum_price dd { font-size: 22px; line-height: 1}
  .panel-summary .sum_price dd em { font-size: 14px}
  .panel-summary .btn-arrow-top { right: 5px}
  .panel-summary .btn_set .btn { font-size: .95rem; font-weight: 700 }
  .formtitle { font-size: 1.1rem; font-weight: 600; letter-spacing: -.5px; }
  
  #InfoPopup .modal-body { padding: 0 2rem; }
}
@media (max-width: 450px) {
  .item-select-list .notice { font-size: 10px; }
}

.panel-items-warp.webzine-mode .reg_slt_btn.c_option  label .item-img:after,
.c_option .item-img:after { background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .1) 80%);}


.modal.fade.option_wrap .modal-dialog { top:50%; transform: translateY(-50%);}
.option_wrap .modal-title { font-size: 1.18rem; font-weight: 800; color: #000}
.option_wrap .modal-content { border-radius: 1rem; cursor: auto; overflow: hidden }
.option_wrap .modal-header { padding-left: 1.5rem; padding-right: 1.5rem; border-top-left-radius: calc(1em - 1px);  border-top-right-radius: calc(1rem - 1px); }
.option_wrap .modal-body { padding: 0;}
.option_wrap .modal-body .list-group { padding: 1.5rem 2rem 2rem; }
.option_wrap li { width: auto; margin-right: 0; display: block}
.option_wrap li .col-form-label { font-size: .92rem; font-weight: 700; border: 0; cursor: auto; margin: 2px 0 5px }
.option_wrap li .form-group { margin-bottom: 0}
.option_wrap .modal-body .btm-btn-set { width: 100%; display: flex}
.option_wrap .modal-body .btm-btn-set .btn { width: 100%; border-radius: 0; padding: .575rem .75rem; font-size: 1.15rem; height: auto; font-weight: 700; border: none !important}
.item-text .modalbtn { display: inline-block; border: 1px #ddd solid; border-radius: 4px; font-size: 12px; line-height: 20px; padding: 2px 8px; margin-bottom: 10px; background: #fff; color: #333; letter-spacing: -0.5px; transition: all .3s}
.reg_slt_btn input[type="checkbox"]:checked + label .item-text .modalbtn { background: #1545B7; border-color: #1545B7; color: #fff }
.reg_slt_btn input[type="checkbox"]:checked + label .item-text .modalbtn:hover,
.item-text .modalbtn:hover { background: #0A133B; border-color: #0A133B; color: #fff }


#ModalForm .modal-title { font-size: 1.18rem; font-weight: 800;}
#ModalForm .modal-content { cursor: auto; overflow: hidden }
#ModalForm .modal-header { padding-left: 1.5rem; padding-right: 1.5rem; border-top-left-radius: calc(1em - 1px); border-top-right-radius: calc(1rem - 1px); }
#ModalForm .modal-body { padding: 2rem 1.5rem;}
#ModalForm li { width: auto; margin-right: 0; display: block}
#ModalForm li .col-form-label { font-size: .92rem; font-weight: 700; border: 0; cursor: auto; margin: 2px 0 5px }
#ModalForm li .form-group { margin-bottom: 0}
#ModalForm .btm-btn-set { width: 100%; display: flex}
#ModalForm .btm-btn-set .btn { width: 100%; border-radius: 0; padding: .575rem .75rem; font-size: 1.15rem; height: auto; font-weight: 700; border: none !important}


/*등록폼*/
#ModalForm .register_head {display:flex; position:relative; border-bottom:1px solid #eaebed; align-items:center;}
#ModalForm .register_head .register_head_tab {position:relative; flex-grow:1; padding:10px 0; text-align:center; cursor:pointer; font-size:17px; font-weight:bold;}
#ModalForm .register_head .register_head_tab.active {color:#db3232 !important;}
#ModalForm .register_head .register_head_tab.active:after {content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:100%; height:4px; background:#db3232;}
#ModalForm .register_head .register_head_tab:first-child:after {max-width:80px;}
#ModalForm .register_head .register_head_tab:last-child:after {max-width:120px;}

#ModalForm {width:100%; border:0;}
#ModalForm.edit_only_info {}
#ModalForm.edit_only_info .reg_mb_password_wrap {display:none;}
#ModalForm.edit_only_password .form-group {display:none;}
#ModalForm.edit_only_password .reg_mb_password_wrap {display:flex;}
#ModalForm.edit_only_password #reg_mb_password_wrap {margin-bottom:0 !important;}
#ModalForm.edit_only_password #reg_mb_password_guide_text_wrap {display:flex !important;}
#ModalForm .reg_captcha_wrap {display:flex !important;}
#ModalForm .col-form-label {padding-right:0;}
#ModalForm input::placeholder {color:#ababab;}
#ModalForm ul.list-group {border:0; }
/* #ModalForm.edit_only_password ul.list-group {padding:60px 0 60px 20%;} */
#ModalForm ul.list-group,
#ModalForm ul.list-group li.list-group-item {background-color:transparent;}
#ModalForm ul.list-group li.list-group-item {padding:0; padding-top: 1px; border:0; /*border-top: #eee 1px solid*/}
#ModalForm ul.list-group li.list-group-item .msg_mb_nick {background:#fffee6; color:#8e8e8e; box-shadow:0 1px 1px rgb(0 0 0 / 13%); padding:9px 15px; font-size:13px; border:1px solid #ced4da; border-radius:0.25rem;}
.register_sms_auth_wrap {display:none;}
#btn_request_reg_sms_code {width:100%; padding:0.375rem 0; color:#8a8a8a; background:linear-gradient(#ffffff, #f7f7f7); border:1px solid #ddd;}
#btn_confirm_reg_sms_code {width:100%; padding:0.375rem 0; /*color:#fff; background:linear-gradient(#e10000, #d00000);*/ border:1px solid #bf0000;}

#ModalForm .form-group { padding: 10px 0; align-items:center;}
#ModalForm .col-form-label {padding-top:calc(.275rem + 2px); color:#444; font-size: .835rem; font-weight: 600}
#ModalForm .form-control { font-size: 0.92rem; font-weight: 400; height:calc(1.5rem + .75rem + 2px); padding:0.375rem 0.75rem; border-radius:0.35rem; margin-bottom: 5px}
#ModalForm .form-div-line {width:100%; height:1px; margin:35px 0; background:#e6e6e6;}
#ModalForm.edit_only_password .form-div-line {display:none;}

#ModalForm .input-group-text {  padding: 0.75rem; border-radius: 0.55rem 0 0 0.55rem;}

#ModalForm .guide_text {margin-top:10px;}
#ModalForm .guide_text ul {padding:0;}
#ModalForm .guide_text ul li {position:relative; padding:0 0 0 15px; font-size:14px; font-weight:bold; color:#333; line-height:1.6;}
#ModalForm .guide_text ul li::after {content:'-'; position:absolute; top:4px; left:0; color:#333; line-height:1;}
#ModalForm .guide_text ul.no_liststyle li {padding-left:0;}
#ModalForm .guide_text ul.no_liststyle li::after {display:none;}
#ModalForm #reg_mb_password_check_wrap {display:none;}

@media (max-width: 991px) {
#ModalForm .modal-body { padding: 0 1.5rem;}
  #ModalForm li .col-form-label { margin: 0; padding-top: 0; font-size: 14px; font-weight: normal; color: #444b59 }
  #ModalForm li .col-form-label br { display: none}
  #ModalForm .form-control {padding: 12px; height: 48px; max-width: 100%; font-size: 16px; line-height: 20px; color: #1b1e26; }
}