<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">#lo_main{max-width: 100% !important; margin-bottom: 0; padding: 0 !important; overflow-x: hidden;}
#main_visual{overflow: hidden; position: relative}
#main_visual .in{position: relative; max-width: 1400px; width:100%; margin: 0 auto;}
#main_visual img{width: 100%;display: block;margin: 0 auto;}

#main_visual .pager {position: absolute; display: flex; width:100%; max-width: 1400px; justify-content: space-between; top:50%; left:50%; transform: translate(-50%, -50%)}
#main_visual .slick-slide {padding:0 5px; border-radius:5px; overflow: hidden; }

.title {font-size:2.13em; font-weight: 700; color:#000;}
.title span {display: inline-block; margin-left:30px; font-size:0.53em; font-weight: 400;}
.more {position: absolute; right:0; top:10px;}
.more a {font-size:1.13em; color:#666666;}
.more a::after {content: url('../images/renew/main/icon_more.png'); vertical-align: top; margin-left:10px; }

#m1 {display: block; width:100%; position: relative; margin:109px 0 145px 0;}
#m1 &gt; div {position: relative; }
#m1 .title {margin-bottom:43px}
#m1 .title::before {content: ''; display: inline-block; width:32px; height:28px; vertical-align: middle; background:url('../images/renew/main/icon_best.png') center no-repeat; margin-right:15px;}
#m1 .stars {display: none;}
#m1 .slick-list {margin:0 -20px;}
#m1 .slick-slide {margin:0 20px;}
#m1 .slick-arrow {text-indent: 0; cursor: pointer;}
#m1 .pager {position: absolute; display: flex; width:100%; max-width: 1500px; justify-content: space-between; top:calc(50% - 50px); left:50%; transform: translate(-50%, -50%)}

#m2 {display: block; width:100%; background:url('../images/renew/main/m2_bg.png') center bottom no-repeat; background-size:cover; padding:125px 0 140px 0;}
#m2 .top {position: relative;}
#m2 .title {margin-bottom:21px;}
#m2 .inner {display: flex; flex-wrap: nowrap; gap:36px;}
#m2 .wrap_lft {flex: 0 0 calc(100% - 474px); max-width: calc(100% - 474px);}
#m2 .wrap_rgh {flex: 0 0 438px;}
#m2 .wrap_lft .title::before {content:url('../images/renew/main/icon_server.png'); display: inline-block;vertical-align: text-top; margin-right:15px;}
#m2 .wrap_lft .serv_wrap {position: relative; border-radius: 10px; overflow: hidden; line-height: 0;}
#m2 .wrap_lft .serv_wrap &gt; div {width:100%;height:640px;}
#m2 .wrap_lft .item {position: relative; }
#m2 .wrap_lft .img_wrap {width:100%; height:640px; }
#m2 .wrap_lft .txt_wrap {position: absolute; bottom:0; left:0; width:100%; background:rgba(0, 0, 0,0.9); color:#fff; padding:35px 40px 28px 40px;}
#m2 .wrap_lft .txt_wrap &gt; div { font-size:1.38em; font-weight: 700; line-height:1.36em;}
#m2 .wrap_lft .txt_wrap p { font-weight: 400; padding-top:10px; line-height: 1.36em; }
#m2 .wrap_lft .slick-dots {position: absolute; bottom:20px; right:20px; text-align: right;}
#m2 .wrap_rgh .title{margin-bottom:21px;}
#m2 .wrap_rgh .title::before {content: url('../images/renew/main/icon_online.png'); display: inline-block; vertical-align: text-top; margin-right:15px;}
#m2 .wrap_rgh .list_wrap {background:#fff; border-radius: 10px; padding-top:13px; overflow: hidden;}
#m2 .wrap_rgh .list_wrap .list {position: relative; margin:0 29px; padding:24px 0 20px 0; border-bottom:1px solid #efefef; color:#000;}
#m2 .wrap_rgh .name {display: none; position: absolute; right:0; top:24px; }
#m2 .wrap_rgh .ti {width:calc(100% - 70px); height:32px;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size:1.13em;}
#m2 .wrap_rgh .date {color:#999999; font-size:0.88em; margin-top:4px;}
#m2 .wrap_rgh .btn {background:#0071b4; color:#fff; font-size:1.25em; text-align: center; margin-top:47px;}
#m2 .wrap_rgh .btn a {display: block; width:100%; height:100%;padding:20px 0; }
#m2 .wrap_rgh i {display: inline-block; width:22px; height:22px; line-height:22px; background:#0c78b8; color:#fff; font-size:12px; text-align: center; border-radius: 50%; font-style: normal; margin-left:10px;    vertical-align: text-bottom;}
#m2 .wrap_rgh .state_wrap {position: absolute; right:0; top:20px;}
#m2 .wrap_rgh .state  {padding:5px 10px; border-radius: 5px; display: inline-block; margin:0 auto;}
#m2 .wrap_rgh .state.ask  {border:1px solid #b8b8b8; color:#999999;}
#m2 .wrap_rgh .state.comp {border:1px solid #808080; color:#111111;}
#m2 .wrap_rgh .state.finish {border:1px solid #0073b8; color:#006bab;}

#m3 {padding:200px 0 110px 0;}
#m3 .inner {position: relative; display: flex; flex-wrap: nowrap; flex-direction: row;}
#m3 .more {top:-35px;}
#m3 .title {line-height:28px;}
#m3 .title span {margin:10px 0 85px 0;}
#m3 .wrap_lft {flex:1 1 30%; max-width:30%;}
#m3 .wrap_lft .list &gt; ul {display: flex; flex-wrap: wrap;}
#m3 .wrap_lft .list &gt; ul &gt; li{cursor:pointer;}
#m3 .wrap_lft .list a {display: inline-block; border:1px solid #ebebeb; border-radius: 5px; background:#fff; color:#666666; margin:0 5px 10px 0; padding:6px 10px 4px 10px;}
#m3 .wrap_lft .list a.active {background:#006bab; border:none; color:#fff;}
#m3 .wrap_rgh {flex:1 1 70%; max-width:70%;}
#m3 .slick-list {margin:0 -10px;}
#m3 .slick-slide {margin:0 10px;}
#m3 .btn_prev {background: url('../images/renew/main/m1_arrow_lft.png') no-repeat; display: inline-block; width:15px; height:28px; }
#m3 .btn_next {background: url('../images/renew/main/m1_arrow_rgh.png') no-repeat; display: inline-block; width:15px; height:28px; }
#m3 .btn_g {display: flex; gap:25px; margin-top:100px;}
#m3 .stars {display: none;}

#m4 {position: relative; width:100%; background:url('../images/renew/main/m4_bg.png') center bottom no-repeat; background-size:cover; padding:110px 0 140px 0; }
#m4 .title {margin-bottom:30px;}
#m4 .cont_wrap {display: flex; width:100%; gap: var(--gap); --gap: 60px;  --columns: 2;}
#m4 .cont_wrap &gt; div {width:50%; background:#fff; border-radius: 10px; width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));}
#m4 .cont_wrap .top {position: relative; background:#003a5e; color:#fff; font-size:1.25em; display: flex;  justify-content: space-between; padding:20px 30px 18px 125px; border-radius: 10px 10px 0 0; z-index:1; margin-bottom:5px; }
#m4 .cont_wrap .top .ti::before {content:url('../images/renew/main/m4_dell.png'); position: absolute; left:10px; top:50%; transform: translate(0, -50%); display: inline-block; width:99px; height:99px; border-radius: 50%; border: 1px solid #003a5e; background:#fff; line-height:99px; text-align: center;}
#m4 .cont_wrap .top span {display: inline-block; position: relative; font-size:12px; top:auto; right:auto; margin-left:10px;}  
#m4 .cont_wrap .top span a { color:#FFFFFF} 
#m4 .cont_wrap .top span a::after {content: url(../images/renew/main/icon_more_w.png);} 
#m4 .wrap_rgh .top .ti::before {content:url('../images/renew/main/m4_hp.png'); line-height:155px;}
#m4 .cont_wrap .slick_info {display: flex; align-items: center; gap:5px; font-size:0.80em; font-weight: 700;}
#m4 .btn_prev {background: url('../images/renew/main/m4_arrow_lft.png') center no-repeat; background-size: contain; display: inline-block; width:15px; height:28px; }
#m4 .btn_next {background: url('../images/renew/main/m4_arrow_rgh.png') center no-repeat; background-size: contain; display: inline-block; width:15px; height:28px; }
#m4 .total {display: block; width:100%; text-align: center;}
#m4 .slick-arrow {display: none !important;}
#m4 .item-wrap_new {padding:10px; font-size:0;}
#m4 .brand_list .in {display: flex; align-items: center; gap:20px; background:#f7f7f7; border-radius: 10px; overflow: hidden; margin-top:10px;}
#m4 .brand_list .in .img_wrap {flex:1 0 180px; max-width: 180px; margin:10px; border:1px solid #efefef; border-radius: 10px; background:#fff;}
#m4 .brand_list .in .tit {margin:10px 0; width:100%; padding-right:130px;}
#m4 .brand_list .in .tit .small {margin-bottom:10px;}
#m4 .brand_list .in .btns .cart {bottom: 30%; transform: translate(0, -50%);}
#m4 .brand_list .ti {font-weight: 500;}
#m4 .item-wrap_new .tit .t {height:78px;}
#m4 .title::before {content:url('../images/renew/main/icon_brand.png'); display: inline-block;vertical-align: text-top; margin-right:15px;}

#m5 {position: relative; padding:110px 0 88px 0;}
#m5 .top {position: relative; margin-bottom:35px;}
#m5 .list {position: relative; display: flex; gap:40px; width:100%;}
#m5 .item {flex:0 1 33.333%; position: relative; display: block; border-radius: 10px; overflow: hidden; border:1px solid #efefef;transition: all ease-in-out .3s; }
#m5 .item:hover {border:1px solid #b8c9d3;}
#m5 .item .img_wrap {position: relative; overflow: hidden; height:315px;}
#m5 .item .img_wrap img {display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
#m5 .item .txt_wrap {padding:24px 18px;}
#m5 .item .txt_wrap h5 {font-size:1.50em; font-weight: 700; color:#000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
#m5 .item .txt_wrap .name {color:#999999; font-weight: 500; margin:3px 0 20px 0;}
#m5 .item .txt_wrap p {color:#666666; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
#m5 .item .txt_wrap .review {margin-top:50px;}
#m5 .item .txt_wrap .review a{display:flex; width:100%; gap:15px;}
#m5 .item .pro_img {flex:1 0 80px; width:80px; height:80px; position: relative; overflow: hidden; border:1px solid #efefef; border-radius: 10px;}
#m5 .item .pro_img img {display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
#m5 .item .pro_txt {position: relative; }
#m5 .item .pro_txt .pro_ti {border-top:1px solid #e4e4e4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size:1.13em; color:#000; font-weight: 500; padding-top:8px;}
#m5 .item .pro_txt .stars ul {display: flex; gap:3px; margin-bottom:7px;}

#m6 .inner {display: flex; width:100%; gap:100px; margin-bottom:140px;}
#m6 .title {border-bottom:2px solid #000000;}
#m6 .wrap_lft {width:50%; position: relative;}
#m6 .wrap_lft .list {}
#m6 .wrap_lft .item {}
#m6 .wrap_lft .item a {display: flex; width:100%; justify-content: space-between; align-items: center; border-bottom:1px solid #efefef; padding:18px 0;}
#m6 .wrap_lft .item a &gt; div {display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow: hidden; color:#000; font-size:1.13em;}
#m6 .wrap_lft .item a &gt; span {color:#999999; font-weight:300;}
#m6 .wrap_rgh {width:50%;}
#m6 .wrap_rgh .con span {color:#006bab; font-size:2.88em; font-weight: 700; display: block; margin:23px 0 18px 0;}
#m6 .wrap_rgh .con p {color:#999999; font-weight: 500;}
#m6 .wrap_rgh .btn {display: flex; gap:10px; margin-top:28px;}
#m6 .wrap_rgh .btn a {border:1px solid #000000; border-radius: 5px; padding:10px 30px; color:#000;transition: all ease-in-out .3s; }
#m6 .wrap_rgh .btn a:hover {background:#000; color:#fff;}


@media (max-width:1530px){

}

@media (max-width:1024px){
    
    .title {font-size:2em; }
    
    #m2 .inner {flex-direction: column;}
    #m2 .wrap_lft {flex:1 1 100%; max-width:100%;}
    #m2 .wrap_lft .title, #m2 .wrap_rgh .title {font-size:1.65em;}
    #m2 .wrap_lft .title::before, #m2 .wrap_rgh .title::before {margin-right:5px;}
    #m2 .wrap_rgh {flex:1 1 100%; max-width:100%;}
    #m2 .wrap_rgh .list_wrap .list {padding:14px 0 10px 0; margin:0 15px;}
    #m2 .wrap_lft .serv_wrap &gt; div {height:auto;}
    
    #m3 {padding:80px 0 40px 0;}
    #m3 .inner {flex-direction: column;gap:10px; padding-left: 0.938rem;}
    #m3 .more {display: none;}
    #m3 .title span {margin: 10px 0 45px 0; display: block;}
    #m3 .wrap_lft .list {overflow-x: scroll;} 
    #m3 .wrap_lft .list &gt; ul {min-width: 980px;}
    #m3 .wrap_lft {flex:1 1 100%; max-width:100%;}
    #m3 .wrap_rgh {flex:1 1 100%; max-width:100%;}
    #m3 .slick_info {display: none;}
    #m3 .slick-slide {width:70%;}
    #m3 .item-wrap_new.s{margin-left: 0;display: flex;width: 100%;overflow-x: scroll;flex-wrap: nowrap;}
    #m3 .item-wrap_new.s .item {min-width: 70%; }
    #m3 .item-wrap_new .tit {margin:21px 0 18px 0;}
    #m3 .item-wrap_new .in {padding:0 !important;}
    
    #m4 {background:url('../images/renew/main/m4_bg.png') left bottom no-repeat; background-size:cover; padding:60px 0 80px 0; }
    #m4 .cont_wrap {flex-direction: column;gap:60px;}
    #m4 .cont_wrap &gt; div {width:100%;}
    #m4 .title span {display: none;}
    
    #m5 .item .pro_img {flex: 0 0 80px;}

}

@media (max-width:768px){
    
    .slick-dots{margin-top: 2rem;}
    #main_visual{height: auto}
    #main_visual .in{width:100%; margin: 0; left: 0}
    #main_visual .slick-dots li{width: 10px;height: 10px}
    
    #m1 {margin: 55px 0 85px 0;}
    #m1 &gt; div {padding-left: 0.938rem; padding-right:0;}
    #m1 .title {font-size:2em;}
    #m1 .title span {display: none;}
    #m1 .title::before {margin-right:10px;}
    #m1 .slick-slide {margin:0;}
    #m1 .item-wrap_new .in {padding:0 10px;}
    #m1 .item-wrap_new.s{margin-left: 0;display: flex;width: 100%;overflow-x: scroll;flex-wrap: nowrap;}
    #m1 .item-wrap_new &gt; li.product_list {min-width: 70%; margin:0 !important;}
    #m1 .item-wrap_new .tit {margin:21px 0 18px 0;}
    #m1 .item-wrap_new .btns .cart {width:36px; height:36px; right:10px; bottom:10px;}
    #m1 .pager .btn_prev2, #m1 .pager .btn_next2 {display: none;}    
    
    #m2 {padding: 55px 0 60px 0;}        
    #m2 .wrap_rgh .ti {height:23px;}
    #m2 .wrap_lft .img_wrap {height:400px; background:#000;}
    #m2 .wrap_lft .txt_wrap {padding:15px 10px 18px 10px;}
    
    #m3 .inner {padding-right:0;}
    
    #m4 .cont_wrap .slick_info {gap:5px;}
    #m4 .brand_list .in {gap:10px;}
    #m4 .brand_list .in .tit {padding-right:0;}
    #m4 .item-wrap_new .tit .t {font-size:1em; height:70px;}
    #m4 .brand_list .in .img_wrap {flex:1 0 120px; width:120px;}
    #m4 .cont_wrap .top {padding:20px 30px 18px 95px;}
    #m4 .cont_wrap .top .ti::before {width:75px; height:75px; line-height: 80px;}
    #m4 .wrap_rgh .top .ti::before {line-height: 80px; padding-top:5px;}
    #m4 .cont_wrap .top span {margin:0;}
    #m4 .total {letter-spacing: -.1em;}
    
    #m5 {padding:80px 0 80px 0;}
    #m5 .title span, #m5 .more {display: none;}
    #m5 .list_wrap {overflow-x: scroll;}
    #m5 .list { gap:20px; flex-direction: column;}
    #m5 .item {flex:0 0 100%;}
    
    #m6 .inner {flex-direction: column; margin-bottom:100px; }
    #m6 .wrap_lft, 
    #m6 .wrap_rgh {width:100%;}
    
    
    
}

@media (max-width:320px){ 
    #m1 .item-wrap_new .tit .t {height:70px;}
    
    #m3 .item-wrap_new .tit .t {height:70px;}
    
/*    #m4 .brand_list .in .tit {width:57%;}*/
    .item-wrap_new .tit .t {height:64px;}
    #m4 .brand_list .in .img_wrap {flex:1 0 80px; width:80px;}
    

}</pre></body></html>