MINI MINI MANI MO
@charset "UTF-8";
.text-center{
text-align: center !important;
}
.text-red{
color: #FF0000;
}
.table-write input[type=text].wd-100{
width: 100%;
}
.dash{
display: inline-block;
width:1px;
height: 20px;
background: #666;
margin:0 4px;
}
.main-visual-wrap{
position: relative;
width: 100%;
}
.main-visual{
}
.main-visual img{
height: 100%;
object-fit: contain;
}
.visual-text-wrap{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
z-index: 20;
color: #fff;
display: inline-block;
text-align: center;
}
.visual-text01{
font-size: 3.4rem;
margin-bottom: 1rem;
}
.visual-text02{
font-size:4.5rem;
margin-bottom: 3rem;
}
.visual-text03{
display: inline-block;
border:1px solid #fff;
background:rgba(0,0,0,0.5);
font-size: 2.4rem;
padding:10px 10px;
}
.visual-text03 .dash{
display: inline-block;
width:1px;
height: 20px;
background: #fff;
margin:0 10px;
}
.btn-visuallink{
border:1px solid #fff;
color: #fff;
font-size: 1.7rem;
padding:10px 30px;
}
.layout-header{
position: absolute;
left:50%;
transform: translateX(-50%);
top:0;
z-index:5;
width:1200px;
}
.header-wrap{
position: relative;
}
.logo{
position: absolute;
left:0;
top: 62%;
display: inline-block;
}
.header-top-inner{
display: flex;
justify-content: end;
padding:15px 0;
color: #fff;
gap:0 6px;
align-items: center;
}
.header-top-inner a{
display: inline-flex;
color:#eaeaea;
align-items: center;
font-size: 13px;
}
.header-top-inner a:after{
content:'';
display: inline-block;
background: #fff;
width:1px;
height: 10px;
margin:0 10px;
}
.header-top-inner a:last-child:after{
display: none;
}
/* navi */
.header-bottom{
display:inline-block;
}
.gnb-wrap{
position: absolute;
right:0;
display: flex;
}
.gnb-wrap ul {
display: flex;
gap:0 100px;
}
.gnb-wrap ul li{
display: inline-flex;
}
.gnb-wrap ul li a{
color: #fff;
font-size: 18px;
}
/* main-contents */
.main-content-wrap{
padding:100px;
}
.main-content-wrap.bg01{
background: #f7f7f9;
}
.main-content-wrap.bg02{
background: url('/images/m7.jpg') no-repeat;
height: 850px;
padding:100px 100px 60px 100px;
}
.main-content-inner{
width:1000px;
margin:0 auto;
text-align: center;
}
.content-title01{
font-size: 4rem;
margin-bottom:2rem;
}
.content-title02{
font-size: 2.2rem;
font-weight: 300;
margin-bottom: 4rem;
}
.main-content-wrap.bg02 .content-title01{
color: #fff;
}
.main-content-wrap.bg02 .content-title02{
color: #fff;
}
.main-box-wrap{
border:1px solid #ddd;
display: flex;
width:100%;
align-items: center;
justify-content: center;
}
.main-box-wrap .main-box{
width:33.3%;
background: #fff;
padding:4rem;
border-right:1px solid #ddd;
background: #fff;
}
.main-box-wrap div:last-child{
border-right:none;
}
.main-box-wrap .main-box img{
margin-bottom: 2rem;
}
.mc01-text01{
font-size: 2rem;
margin-bottom: 1rem;
}
.mc01-text01-1{
font-size: 1.6rem;
margin-bottom: 0.8rem;
}
.mc01-text02{
font-size: 1.5rem;
margin-bottom: 4rem;
color: #5f5f5f;
}
/* footer */
.footer-inner{
width:1200px;
margin:0 auto;
padding:10px 0;
}
.footer-link {
display: flex;
gap:0 10px;
}
.footer-link li{
display: inline-flex;
flex:1 1 auto;
border:1px solid #ccc;
align-items: center;
justify-content: center;
}
.footer-link li img{
width: 100%;
}
.footer-top{
border-top:1px solid #ddd;
}
.footer-bottom{
background: #eee;
}
.footer-bottom .footer-inner{
padding:20px 0;
}
.footer-link2{
display: flex;
justify-content: center;
gap:0 20px;
color: #6a6a6a;
}
.footer-copy-wrap{
display:flex;
gap:0 100px;
margin-top: 3rem;
}
.footer-copyright{
color:#878686;
}
.footer-copyright li{
line-height: 1.9;
font-size: 1.4rem;
display: inline-block;
}
/* sub */
.sub-navi-bg{
background: #000;
height: 105px;
}
.layout-subvisual{
background: #F6F6F6;
border-bottom:1px solid #ccc;
}
.sub-visual-inner{
width: 1200px;
margin:0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 250px;
}
.subvisual-text{
text-align: center;
font-size: 3rem;
}
.subvisual-subtext{
color:#CCC;
display: block;
}
.subvisual-right{
font-size:2rem;
line-height:3.4rem;
}
.submenu-wrap{
border-bottom:1px solid #ccc;
}
.submenu-tab ul{
display: flex;
justify-content: center;
text-align: center;
}
.submenu-tab ul li a{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width:180px;
height: 70px;
font-size: 1.6rem;
color: #000;
}
.submenu-tab ul li a:after{
content: '';
display: inline-block;
width:1px;
height: 12px;
position: absolute;
right:0;
background: #000;
}
.submenu-tab ul li:last-child a:after{
display: none;
}
.submenu-tab ul li a.active{
font-weight: 700;
}
.submenu-tab ul li a:hover:before,
.submenu-tab ul li a.active:before{
content: '';
display: inline-block;
position: absolute;
left:0;
bottom:-1px;
right:0;
height: 3px;
background: #d0121c;
}
.layout-contents{
width:1200px;
margin:0 auto;
padding:30px 0;
}
.subtitle{
border-bottom: 1px solid #cccccc;
height: 70px;
justify-content: center;
font-size: 3rem;
padding-top: 0px;
line-height: 27px;
display: flex;
align-items: center;
font-weight: 400;
margin-bottom: 2rem;
}
.subtitle-2dpeth{
background:url('/images/icon.jpg') no-repeat;
background-position: left 50%;
padding-left: 15px;
font-weight: 600;
margin-bottom: 2rem;
font-size: 1.6rem;
}
.subtitle-2dpeth2{
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.6rem;
}
.board .subtitle-2dpeth{
text-align: center;
font-size: 2.7rem;
font-weight: 400;
background:none;
}
.subtitle-subtext{
font-size: 1.4rem;
text-align: center;
margin-bottom: 2rem;
}
.subtop-text{
font-size: 1.6rem;
font-weight: 600;
margin:0 0 5rem 0;
}
.subcont-article{
margin-bottom: 4rem;
}
.subcont-article .table-wrap{}
.subcont-article ul li{
margin-bottom: 8px;
}
.article-p{
margin-bottom: 1rem;
}
.table-col-two{
display: flex;
flex-wrap:wrap;
}
.sub-table-left{
width: 60%;
}
.sub-table-right{
width: 40%;
text-align: center;
}
/* 회사소개 */
.cont-type01-wrap{
display: flex;
justify-content: start;
align-items: start;
padding:40px 0;
gap:20px 40px;
flex-wrap:wrap;
}
.company-cont{
width: 55%;
}
.company-cont li{
display: inline-block;
margin-bottom: 10px;
font-size: 1.8rem;
}
.company-cont .company-title{
font-size:2.3rem;
line-height:3.4rem;
color:#006699;
margin-bottom: 2rem;
}
.company-footer{
display: block;
font-weight: 700;
text-align: right;
line-height: 2;
}
.history-title{
font-size:2.6rem;
color:#000;
margin-bottom: 10px;
}
.history-wrap ul{
margin-bottom: 3rem;
}
.history-wrap li{
margin-bottom: 10px;
font-size: 1.7rem;
}
.map-wrap{
margin-top: 3rem;
}
/* table-type */
.table{
width:100%;
border:1px solid #ccc;
}
.table th{
border:1px solid #ccc;
background: #F8F8F8;
height: 26px;
padding:10px;
}
.table td{
border:1px solid #ccc;
padding:10px;
}
.table.table-company th{
text-align: left;
}
.table.table-company td{
height: 42px;
}
/* list-top */
.list-top-wrap{
display: flex;
justify-content: center;
padding:20px ;
border-bottom:1px solid #ccc;
margin-bottom: 20px;
}
.search-input{
display: inline-block;
}
.product-img{
position: relative;
border-bottom:1px solid #ccc;
width: 100%;
}
.product-img img{
width: 100%;
height: auto;
aspect-ratio: 4/3;
}
.product-list-wrap{
margin: 0px auto 0px auto;
width: 100%;
display: grid;
grid-template-columns: repeat(5, 19%);
justify-content: space-between;
gap: 20px 1%;
}
.product-list-box{
display: inline-block;
border:1px solid #ccc;
border-top:none;
/* margin-bottom: 10px; */
}
.soldout:before{
content:'SOLDOUT';
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 2.4rem;
font-weight: 700;
}
.product-top{
background:#fff;
margin-left:-1px;
margin-right:-1px;
}
.product-info {
position: relative;
font-size: 1.4rem;
color: #2d2d2d;
line-height: 14px;
vertical-align: middle;
white-space: normal;
word-break: break-all;
padding-top: 1.6rem;
}
.product-info p {
padding: 10px 0;
}
.product-info p:last-child{
padding-top: 0;
}
.product-info p span {
position: relative;
padding: 0 5px;
}
.product-info p span:after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 1px;
height: 10px;
background: var(--font-color-base);
}
.product-info p span:last-child:after{
display: none;
}
.product-title{
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
color: #000;
padding: 0 5px;
margin-bottom:1rem;
white-space: normal;
word-break: break-all;
margin-top: 1rem;
}
.product-list-midline{
width:100%;
height: 1px;
background: #d8d8d8;
}
.product-list-nodata{
width: 100%;
text-align: center;
}
.product-info ul li{
margin-bottom: 8px;
}
.productlist-bottom-wrap{
display: flex;
justify-content: space-between;
padding:30px 0;
}
.product-bottom{
padding:0 0 10px 0;
text-align: center;
}
.product-info .c_model {
font-size: 1.3rem;
color: #000;
padding: 0 5px;
margin-bottom: 5px;
}
.product-info .c_model2 {
color: #000;
padding: 0 5px;
margin:10px 0 4px;
}
/* 최근본상품 퀵메뉴 */
.quick-recentproduct{
text-align:center;
position:fixed;
left:50%;
top:400px;
margin-left:630px;
width:100px;
z-index:2000;
}
.quick-rp-title{
background: #326fce;
padding:6px;
color: #fff;
font-size: 1.3rem;
}
.quick-rp-list img{
border:1px solid #0066CC;
width:100%;
}
/* 뷰페이지 */
.product-view-wrap{
}
.product-view-wrap section{
flex:1 1 auto;
}
.product-view-imgbox{
border:1px solid #bababa;
margin-bottom: 10px;
}
.product-view-imgbox img{
width: 100%;
}
.product-view-left{
width: 100%;
}
.product-view-right{
width: 100%;
}
.product-thumb-list{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.product-thumb-list li{
width:10%;
}
.product-thumb-list li img{
width: 100%;
}
.product-view-addinfo{
margin-top: 40px;
}
.addinfo-box{
border:1px solid #ccc;
padding:20px;
min-height: 200px;
line-height: 1.5;
}
.product-view-btns{
text-align: center;
margin-top: 30px;
}
.product-view-text{
margin-top: 10px;
color: #0066cc;
font-weight: 700;
}
.text-price{
color: #FF0000;
font-weight: 700;
}
.table-product-view{
margin-top: 2rem;
}
.table-product-view table th{
font-weight: 400;
color: #000;
}
.table-product-view table td{
font-weight: 700;
}
.td-prodetail{
height: 150px;
}
.btn-link{
position: absolute;
left:50%;
margin-left: 520px;
}
.page-btns-wrap{
position: relative;
text-align: center;
margin-top: 20px;
margin-bottom: 2rem;
}
/* 회원정보수정 */
.type-table >li{
display: flex;
border:1px solid #ccc;
border-bottom:0;
}
.type-table >li:last-child{
border:1px solid #ccc;
}
.type-table-th{
display: inline-flex;
width:25%;
border-right:1px solid #ccc;
padding:10px;
align-items: center;
font-weight: 700;
}
.type-table-td{
display: inline-flex;
padding:10px;
align-items: center;
gap: 0 4px;
width: 75%;
}
.type-table input[type=text],
.type-table input[type=password]{
width:15rem;
}
.type-table select{
min-width: 15rem;
}
.mem-modify-bottom{
text-align: center;
margin-top: 2rem;
}
.btn-area{
margin-top: 3rem;
text-align: center;
}
/* input-form */
.form-tel{
display: inline-flex;
align-items: center;
gap: 0 4px;
}
.form-tel input[type=text]{
width: 33%;
}
.form-address{
width: 100%;
}
.form-address li {
margin-bottom: 4px;
}
.form-address li:last-child{
margin-bottom: 0;
}
.form-address li .input-address{
width: 90%;
}
.form-email{
display:flex;
width: 100%;
align-items: center;
gap:0 4px;
}
.form-email input:first-child{
width: 30%;
}
.form-email input:last-child{
width: 40%;
}
/* 회원가입 */
.join-top-bottom{
text-align: center;
padding:4rem 0;
}
.join-bottom-text01{
font-size:2.4rem;
line-height:30px;
}
.join-bottom-text02{
color:#999;
font-size:1.6rem;
line-height:2.6rem;
}
.join-out-wrap{
display: flex;
align-items: center;
justify-content: center;
}
.join-wrap{
display: inline-flex;
border:1px solid #E6E6E6;
padding:3rem 3rem;
margin:0 auto 5rem auto;
justify-content: center;
align-items: center;
width: 65%;
}
.join-form{
width: 100%;
}
.join-form input[type=text],
.join-form input[type=password]{
height: 4rem;
width: 26rem;
}
.join-left{
display: inline-flex;
margin-right: 30px;
}
.join-right{
display: inline-flex;
}
.join-input{
width: 86%;
display: flex;
gap:0 4px;
align-items: center;
}
.join-form >li{
display: flex;
margin-bottom: 1rem;
align-items: center;
}
.join-form .join-title{
width: 14%;
}
.join-form .form-tel{
width: 27rem;
gap: 0 4px;
}
.join-form .form-tel input[type=text]{
width: 33%;
}
.join-form .btn-sm{
height: 4rem;
width: 10rem;
padding:0 0.8rem;
}
.use-wrap{
height: 180px;
overflow: auto;
border:1px solid #ccc;
padding: 20px;
line-height: 1.6;
}
.use-wrap p{
margin-bottom: 30px;
}
/* 로그인 */
.join-wrap.login-wrap{
padding:4rem;
}
.join-wrap.login-wrap .btn-login-wrap{
display: inline-flex;
margin-left: 1rem;
align-self: start;
margin-top: 2.6rem;
}
.join-wrap.login-wrap .btn-login{
width: 12rem;
height: 9rem;
}
.join-wrap.login-wrap .join-title{
width: 20%;
}
.join-wrap.login-wrap .join-input{
width: 80%;
gap:0 0;
}
.login-link{
color: #999;
text-align: right;
justify-content: center;
}
.login-link a{
margin-right: 2rem;
}
/* board */
.table-board{
width: 100%;
margin-top: 2rem;
}
.table-board th{
height: 40px;
}
.table-board td{
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
height: 40px;
color: #000;
padding:1.2rem 0;
}
.board-title{
color: #000;
display: inline-block;
text-align: left;
font-size: 1.5rem;
}
.board-info{
font-size: 1.4rem;
color: #999;
margin-top: 4px;
}
.board-info span{
display: inline-block;
position: relative;
margin-right: 1rem;
padding-right: 1rem;
}
.board-info span:after{
content:'';
display: inline-block;
width:1px;
background: #ccc;
height: 1rem;
position: absolute;
right:0;
top:50%;
transform: translateY(-50%);
}
.board-info span:last-child:after{
display: none;
}
/* leftmenu */
.layout-leftmenu{
display: none;
}
.media-mobile{
display: none;
}
.media-mobile-sm{
display: none;
}
/* leftmenu */
.layout-leftmenu{
display: block;
position: fixed;
left:-100%;
top:0;
bottom:0;
background: #333;
width:100%;
z-index:500;
-webkit-transition: left .3s;
-moz-transition: left .3s;
-ms-transition: left .3s;
-o-transition: left .3s;
transition: left .3s;
}
.layout-leftmenu.open{
left:0;
}
.leftmenu-wrap{
height:100%;
overflow: auto;
}
.leftmenu-top{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding:30px 20px 20px;
}
.leftmenu-top .btn-menu-close{
/* position: absolute;
right:10px;
top:10px; */
color:#fff;
}
.leftmenu-logo img{
width:24rem;
opacity: 0.8;
}
.leftmenu-btns{
display: flex;
justify-content: space-between;
align-items: center;
padding:5px 10px;
border-bottom:2px solid #646464;
color: #fff;
gap:0 ;
}
.leftmenu-btns> a{
flex:1 1 auto;
}
.leftmenu-btns i{
display: none;
}
.leftmenu-btns > a,
.leftmenu-btns .user-name{
vertical-align: middle;
text-align: center;
display: inline-block;
font-size: 15px;
padding:10px 10px;
margin:0;
}
.leftmenu-btns .btn-join,
.leftmenu-btns .btn-login {
width: 49%;
color: #fff;
height: auto;
}
.leftmenu-btns > a.mypage,
.leftmenu-btns > a.logout{
background:#31b9f2;
border-radius:20px;
margin-right:10px;
}
.leftmenu-btns > a:last-child{
margin-right:0;
}
.btn-menu-close:before{
content: "\f659";
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: 700 !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
font-size:30px;
}
.leftmenu li{
border-bottom:1px solid #646464;
padding:0 20px;
color:#fff;
}
.leftmenu >li> a{
padding:20px 0;
display: inline-block;
width: 100%;
font-size: 16px;
}
.leftmenu >li> a:before{
content:'-';
display:inline-block;
margin-right:6px;
}
.leftmenu li >a:hover{
color:#ff3e3e
}
/* quick */
.quickconsult-wrap{
position: fixed;
left:50%;
top: 440px;
margin-left: 620px;
z-index: 20;
border:1px solid #ccc;
border-radius:10px;
overflow: hidden;
background: #eee;
}
.quick-cs-box{
padding:2rem 10px;
}
.quick-cs-title{
font-size: 2rem;
text-align: center;
color: #222;
margin-bottom: 1rem;
font-weight: 700;
}
.quick-cs-title img{
width: 46px;
margin-right: 4px;
}
.quick-cs-btn{
text-align: center;
margin-top: 1rem;
}
.quick-cs-btn .btn.btn-secondary{
background:#259bff;
border-color:#259bff;
}
.quick-cs-btn .btn.btn-secondary:hover{
background:#31b9f2;
border-color:#31b9f2;
}
.quick-form-wrap li{
margin-bottom: 4px;
}
/* viewpage */
/* 뷰페이지 */
.view-title-wrap{
position: relative;
padding:40px 0 20px;
border-bottom:1px solid #000;
/* margin-bottom: 20px; */
}
.view-title-wrap .btn-listtext{
}
.view-title-wrap .btn-listtext:before{
content: "\f479";
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: 700 !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
font-size: 3.6rem;
color: #7f7f7f;
}
.view-title{
font-size: 3rem;
color: #000;
font-weight: 600;
}
.view-title-sub{
color: #9b9b9b;
margin-top:6px;
display: flex;
justify-content: start;
align-items: center;
gap:0 10px;
}
.view-title-sub .sub-text{
font-size: 1.8rem;
vertical-align: middle;
}
.view-title-sub .sub-text span{
vertical-align: middle;
}
.view-title-sub .sub-text:first-child{
padding-left:0;
}
.btn-seldel{
position: absolute;
left:0;
}
/* 공유하기 */
.view-title-right{
position: absolute;
right:10px;
top:0px;
}
.share-list li{
display: inline-block;
margin-left:6px;
}
.share-list li:first-child{
display: none;
}
.btn-phone{
}
.btn-phone:before{
content:'';
background: url('/images/icon_phone2.png') left top no-repeat;
background-size: 100% 100%;
display: inline-block;
width:3rem;
height:3rem;
opacity: 0.5;
}
.btn-phone.on:before{
background: url('/images/icon_phone_on.png') left top no-repeat;
background-size: 100% 100%;
opacity: 1;
}
.btn-sms-01{
}
.btn-sms-01:before{
content:'';
background: url('/images/icon_sms_01.png') left top no-repeat;
background-size: 100% 100%;
display: inline-block;
width:3rem;
height:3rem;
opacity: 0.5;
}
.btn-sms-01.on:before{
background: url('/images/icon_sms_on.png') left top no-repeat;
background-size: 100% 100%;
opacity: 1;
}
.btn-share{
}
.btn-share:before{
content:'';
display: inline-block;
width:3rem;
height:3rem;
background: url('/images/icon_share.png') no-repeat;
background-size:100% 100%;
opacity:0.7;
}
.btn-share.on:before{
background: url('/images/icon_share_on.png') no-repeat;
background-size:100% 100%;
opacity:1;
}
.pop-share{
position: absolute;
right:0;
top:50%;
background: #f3f9ff;
box-shadow: 4px 4px 4px #eee;
border-radius:10px;
border:2px solid #217ad2;
z-index:3;
padding:20px;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.7;
color: #6b6b6b;
}
.pop-share-close{
position: absolute;
right:14px;
top:14px;
display: inline-block;
}
.btn-share-close:before{
content: "\f659";
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: 400 !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
font-size: 24px;
color:#777;
}
.pop-share .inputlist li{
display: flex;
align-items: center;
margin-bottom: 6px;
font-size: 1.5rem;
color: #5a5a5a;
}
.pop-share .inputlist li label{
margin-right:10px;
width:20%;
text-align: left;
}
.pop-share-title{
text-align: center;
font-size: 18px;
color: #555;
margin-bottom:20px;
font-weight: 700;
}
.pop-share-text{
margin:10px 0;
line-height: 1.4;
}
.pop-share .agreebox{
margin-bottom:14px;
font-weight: 700;
}
.pop-share .inputlist li input[type=text]{
width:80%;
height:34px;
}
.inputlist-conttext{
font-weight: 700;
}
.pop-share .inputlist li .sns-label2{
width:88%;
}
.btn-sms-send{
width:100%;
height:40px;
}
.inputlist{
padding:10px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
.pop-share.share{
width:380px;
}
.share-icon-list {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.share-icon-list li{
text-align: center;
display: inline-block;
width:20%;
}
.share-icon-list li .icon{
width:40px;
height:40px;
}
.share-icon-list li span{
display:block;
margin-top: 6px;
}
.share-icon-list li button{
font-size: 13px;
color: #616161;
font-weight: 400;
}
.share-copy-wrap{
position: relative;
height: 40px;
}
.share-copy-wrap input{
width:100%;
padding-right:50px;
height:40px;
}
.share-copy-wrap .btn-copy{
position: absolute;
right:0;
bottom:0;
top:0;
width:60px;
text-align: center;
background: #e1e1e1;
font-weight: 700;
}
.customer-tel{
font-size: 1.6rem;
text-align: center;
font-weight: 400;
line-height: 1.7;
color: #6b6b6b;
}
/* file -add */
.file-add-top{
display:flex;
justify-content: space-between;
align-items: center;
padding:10px 0;
}
.btn-file-find{
BORDER: #ff0000 1px solid;
background-color : #ffe3e7;
font-size:13px;
color: #ff0000;
padding:0 6px 0 6px;
height:26px;
}
.btn-reset{
BORDER: #7FA8C4 1px solid;
background-color : #edf1f6;
font-size: 13px;
color: #165899;
padding:0 6px 0 6px;
height:26px;
}
.file-add-imgbox{
width:100%;
height:110px;
overflow-y:scroll;
padding:10px;
border:1px solid #cccccc;
margin-bottom:5px;
}
input.wd-100{
width:100%;
}
.file-add-ex{
border:1px solid #ccc;
padding:10px 10px 5px 0;
}
.file-add-ex ul{
display:flex;
justify-content: left;
align-items:flex-start;
flex-wrap:wrap;
gap:20px 0px;
}
.file-add-ex ul li{
display:inline-block;
width:10%;
text-align: center;
}
/* 제품등록 */
.table-write input[type=text]{
width: 200px;
}
.table-write input.model{
width: 80%;
}
.table-write input[type=number]{
width: 80px;
}
/* index */
.img-price-wrap{
display: flex;
flex-direction: row;
justify-content: center;
gap: 0 20px;
}
.price-box{
display:inline-block;
flex-grow: 1;
padding-bottom: 2rem;
}
.price-box img{
width: 100%;
}
.price-title{
font-size: 2.2rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.price-text{
font-size: 1.5rem;
color: #666;
line-height:1.6;
}
.main-c-title{
font-size: 2rem;
color: #Fff;
text-align: left;
margin-bottom: 1.4rem;
padding-left: 3rem;
}
.main-m8-box{
margin-bottom: 3rem;
}
.main-m8-box-img{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap:0 10px;
}
.m4-cont{
display: flex;
flex-wrap: wrap;
align-items: start;
border:4px solid #e3e3e3;
padding:20px 10px;
justify-content: center;
}
.m4-cont-title{
margin-top: 2rem;
font-size: 1.7rem;
margin-bottom: 1rem;
}
.m4-cont-title2{
display: inline-block;
font-size: 2.1rem;
margin-bottom: 3rem;
font-weight: 700;
}
.m4-cont-box{
display: inline-block;
width: 16%;
}
.m4-cont-box ul li{
font-size: 1.8rem;
line-height: 1.5;
}
.m4-img{
display:flex;
align-items: center;
justify-content: center;
height: 80px;
}
.m4-arr{
align-self: center;
}
.m4-arr:before{
content: "\f285";
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: 400 !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
font-size: 4rem;
color: #ddd;
}
/* index- 중고부품 */
.main-product-list-wrap{
display: none;
}
/* 서브 */
.order-wrap{
display: flex;
justify-content: start;
flex-wrap: wrap;
}
.order-box{
display: inline-flex;
align-items: center;
flex-direction: column;
width: 150px;
height: 98px;
border:1px solid #bebebe;
justify-content: center;
font-size: 1.5rem;
}
.order-img{
margin-bottom: 1rem;
}
.order-arr{
align-self: center;
margin:0 1rem;
}
.order-arr:before{
content: "\f285";
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: 400 !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
font-size: 4rem;
color: #ddd;
}
/* 필수요소 */
.essential{
color: #FF0000;
margin-left:4px;
}
.essential:before{
content:'*';
display: inline-block;
}
.sub-contadd-wrap{
margin-top:3rem;
}
.sub-contadd-cont{
width: 100%;
}
.sub-contadd-cont{
width:100%;
height:130px;
overflow-y:scroll;
text-align:left;
white-space:pre-line;
padding:10px;
margin:0px;
border:1px solid #959595;
line-height:150%;
}
.confirm-area-wrap { margin:15px 0;
font-weight: 700;}
.confirm-area-wrap input[type=checkbox]{
width: 20px;
height: 20px;
}
.sub-contadd-title { text-align:left; margin-bottom:5px;margin-left:5px; }
.contsult-title{
margin-top: 3rem;
margin-bottom: 1rem;
color: #000;
font-weight: 700;
}
.input-password{
background: #F6F6F6;
width:50%;
text-align: center;
margin:0 auto;
padding:30px;
}
.input-password-title{
color:#5e7ea2;
font-weight: 700;
margin-bottom: 2rem;
}
.input-password input{
border:1px solid #0066CC;
}
/* 서브페이지 이미지 갤러리 */
.bx-wrapper .bx-controls-direction a{
text-indent: 0;
z-index: 400;
}
.car-image{
position: relative;
background: #333;
text-align: center;
}
.car-image .bx-viewport{
}
.car-image .swiper-slide{
height: 800px;
}
.car-image .bx-wrapper{
margin: 0 auto;
background: none;
border:0;
box-shadow: none;
}
.car-image .bx-wrapper img{
width: 100%;
height: 100%;
}
.car-image .bx-wrapper .bx-next{
display: inline-block;
width: 6rem;
height: 6rem;
right: -80px;
}
.bx-wrapper .bx-next,
.bx-wrapper .bx-prev{
background:none;
display: inline-block;
}
.bx-wrapper .bx-next:before{
content: "\f285";
vertical-align: middle;
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: 400 !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
font-size: 6rem;
color: #fff;
}
.bx-wrapper .bx-prev{
display: inline-block;
width: 6rem;
height: 6rem;
left: -80px;
}
.bx-wrapper .bx-prev:before {
content: "\f284";
vertical-align: middle;
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: 400 !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
font-size: 6rem;
color: #fff;
}
.car-image .bx-wrapper .bx-pager{
position: absolute;
left:-80px;
bottom: 10px;
background: #000;
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
width:80px;
height: 26px;
padding-top: 0;
border-radius:30px;
}
.img-list-wrap {
margin-top: 1rem;
}
.img-list-wrap .img-list ul{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.img-list-wrap .img-list ul li{
width: 10%;
}
.img-list-wrap .img-list ul li img{
width: 100%;
aspect-ratio: 4/3;
}
.img-list-wrap .img-list ul li.active{
border:2px solid #78d7ff;
}
@media screen and (max-width:1199px) {
.layout-header,
.footer-inner,
.layout-contents,
.sub-visual-inner,
.join-top-bottom{
width:96%;
margin:0 2%;
}
.gnb-wrap{
display: none;
}
.quick-recentproduct{
display: none;
}
.car-image .bx-wrapper .bx-pager{
left:10px;
width:60px;
}
.car-image .bx-wrapper .bx-prev{
left:10px;
width: 4rem;
height: 4rem;
}
.car-image .bx-wrapper .bx-prev:before{
font-size: 4rem;
}
.car-image .bx-wrapper .bx-next{
width: 4rem;
height: 4rem;
right:10px;
}
.car-image .bx-wrapper .bx-next:before{
font-size: 4rem;
}
}
@media screen and (max-width:1050px) {
.layout-contents {
padding: 20px 0;
}
/* index- 중고부품 */
.main-product-list-wrap{
display: block;
width: 96%;
margin:0 auto;
padding: 20px;
}
.main-product-list-title{
position: relative;
font-size: 2rem;
margin-bottom: 2rem;
}
.main-more{
position: absolute;
right:0;
top: 50%;
transform: translateY(-50%);
font-size: 1.4rem;
}
.main-content-inner{
width:100%;
}
.main-content-inner img{
/* width: 100%; */
}
.content-title01 img{
width: auto;
}
/* header */
.header-wrap{
height: 12rem;
position: relative;
}
.header-top{
display: none;
}
.logo {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
display: inline-block;
width: 26rem;
}
.logo img{
width: 100%;
}
.btn-menu-wrap{
display: inline-block;
position: absolute;
left:0px;
top:50%;
transform: translateY(-50%);
}
.btn-menu:before{
content: "\f479";
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: 700 !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
font-size: 4rem;
color:#fff;
}
.sub-visual-inner{
height: 10rem;
}
.main-content-wrap.bg02 {
background: url('/images/m7.jpg') repeat;
height: auto;
padding: 30px 30px 30px 30px;
}
.footer-copy-wrap{
flex-direction: column;
justify-content: center;
text-align: center;
gap:2rem 0;
}
.footer-link{
gap: 0 4px;
}
.footer-link2{
gap:0 8px;
}
.sub-visual-inner {
justify-content: center;
}
.sub-visual-inner div:first-child {
display: none;
}
.sub-visual-inner div:last-child {
display: none;
}
.cont-type01-wrap{
flex-direction: column;
}
.cont-type01-wrap img{
width: 100%;
}
.submenu-tab ul li a{
min-width:90px;
height: 50px;
font-size: 1.5rem;
}
.product-view-wrap{
flex-direction: column;
}
.product-view-left{
width: 100%;
margin-bottom: 2rem;
}
.product-view-right{
width: 100%;
}
.product-view-imgbox img{
width: 100%;
}
.list-top-wrap{
padding: 10px;
}
.list-top-wrap select{
width: 32.3%;
}
.list-top-wrap select:nth-child(1),
.list-top-wrap select:nth-child(2),
.list-top-wrap select:nth-child(3){
margin-bottom: 4px;
}
.btn-detail:after{
display: none;
}
/* 상품 뷰페이지 */
.table-wrap.table-product-view .table th{
padding:8px 2px;
}
.table-wrap.table-product-view .table td{
padding:8px 5px;
}
}
@media screen and (min-width:481px) and (max-width:1199px){
.main-box-wrap .main-box{
padding: 1rem;
}
.main-content-wrap {
padding: 30px;
}
.visual-text-wrap{
width: 90%;
}
.visual-text01{
font-size: 3.3rem;
margin-bottom: 1rem;
}
.visual-text02{
font-size:2.4rem;
margin-bottom: 1rem;
}
.visual-text03{
font-size: 1.6rem;
padding:5px 10px;
}
.visual-text03 .dash{
height: 10px;
}
.img-price-wrap {
text-align: center;
}
.main-m8-box-img img{
width: 31%;
}
.join-left{
display: none;
}
.input-password{
width:70%;
display: block;
}
.car-image .swiper-slide{
height: auto;
width: 100%;
aspect-ratio: 4/3;
}
.img-list-wrap .img-list ul li{
width: 16.6%;
}
.cont-type01-wrap div {
width: 100%
}
.order-box{
width: 12%;
}
.order-img img{
width: 100%;
}
.order-arr{
margin:0;
}
.join-wrap.login-wrap {
padding: 2rem;
}
.join-wrap.login-wrap .btn-login-wrap {
margin-top: 0;
}
.join-wrap {
width: 80%;
}
.m4-arr{
width: 1%;
}
}
@media screen and (min-width:761px) and (max-width:1050px){
.product-list-wrap {
grid-template-columns: repeat(4, 24%);
}
}
@media screen and (min-width:481px) and (max-width:760px){
.product-list-wrap {
grid-template-columns: repeat(3, 32%);
}
}
@media screen and (max-width:480px) {
.main-content-wrap {
padding: 3rem 1.2rem;
}
.main-visual{
aspect-ratio: 4/3;
}
.visual-text-wrap{
width: 90%;
top: 55%;
}
.visual-text01{
font-size: 2.4rem;
margin-bottom: 1rem;
}
.visual-text02{
font-size:2rem;
margin-bottom: 1rem;
}
.visual-text03{
font-size: 1.6rem;
padding:5px 10px;
}
.visual-text03 .dash{
height: 10px;
}
.btn-visuallink {
padding: 5px 10px;
margin-top: 1rem;
}
.content-title01{
font-size: 2.5rem;
}
.content-title02{
font-size: 1.7rem;
margin-bottom: 2rem;
}
.submenu-tab.tab-5 ul li a{
min-width: 64px;
}
.main-box-wrap{
display: flex;
flex-direction: row;
align-items: stretch;
}
.main-box-wrap .main-box{
padding:1rem 0.5rem;
}
.main-box-wrap .main-box img{
width: 60%;
}
.btn.btn-detail{
padding: 4px 6px;
}
.mc01-text02{
margin-bottom: 1rem;
}
.join-left{
display: none;
}
.form-flex{
display: flex;
justify-content: start;
gap:0 4px;
}
/* 제품등록 */
.table-write input[type=text]{
width: 140px;
}
.main-m8-box-img{
gap:10px 0;
}
.main-m8-box-img img{
width: 100%;
}
.main-c-title{
margin-left: 0;
}
.m4-cont{
align-items: center;
/* flex-direction: column; */
justify-content: center;
padding: 10px 5px;
}
.m4-cont-title{
margin-bottom:0.5rem;
}
.m4-arr{
display: inline-block;
margin:0;
width: 1%;
margin-left:-6px;
margin-right: 6px;
}
.m4-arr:before{
display: inline-block;
width: 1%;
font-size: 1.8rem;
}
.m4-cont-box{
display: inline-block;
width: 19%;
text-align: center;
}
.m4-cont-box ul{
display: none;
}
.m4-img{
display: none;
}
.m4-cont-title2{
font-size: 1.6rem;
}
.product-list-wrap{
grid-template-columns: repeat(2, 49%);
}
.join-wrap{
flex-direction: column;
width:96%;
}
.join-wrap.login-wrap .btn-login-wrap{
width: 100%;
margin-top: 1rem;
margin-left: 0;
}
.join-wrap.login-wrap .btn-login{
width: 100%;
height: 5rem;
}
.join-form .join-title {
width: 20%;
}
.join-input{
flex-wrap: wrap;
width: 80%;
}
.join-form.type-join input[type=text]{
width:100%;
}
.join-form.type-join .form-tel {
width:100%;
}
.join-form.type-join .form-tel + .btn,
.join-form.type-join input + .btn{
width: 100%;
margin-top: 1rem;
}
.join-form.type-join .form-tel input[type=text]{
width: 32%
}
.sub-table-left{
width:100%;
}
.sub-table-right{
width:100%;
}
.input-password{
width:90%;
display: block;
}
.car-image .swiper-slide{
height: auto;
width: 100%;
aspect-ratio: 4/3;
}
.img-list-wrap .img-list ul li{
width: 16.6%;
}
.company-cont{
width: 100%;
}
.order-box{
width: 100%;
}
.order-arr{
width: 100%;
justify-content: center;
text-align: center;
}
.order-arr:before{
content: "\f282";
}
.mc01-text01-1,
.mc01-text02{
display: none;
}
.main-content-wrap.bg02{
display: none;
}
.img-price-wrap{
gap: 0 10px;
}
.main-product-list-wrap {
width: 96%;
margin: 3rem 2%;
padding: 0;
}
}
OHA YOOOO