/*mainStyle.css*/
@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
body.dark-mode { background:#333; }
body.dark-mode h1, h2 , h3, p { color:#fff; }
body.dark-mode p,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode a { color:#fff; }
body.dark-mode button {
    background-color:#F2F2F2;
    color:#fff;
}
body.light-mode h1, h2, h3, p, a { color:#333; }
body.light-mode button {
    background-color:#F2F2F2;
    color:#eee
}
button { background:#F2F2F2; }
#darkLight {
    width:70px; height:90px; 
    font-size:3em;
    padding-left:0.5%;
    position:fixed;
    right:0; bottom:3%;
    border-radius:100px 0 0 100px;
    transition:all .3s;
    z-index:99999;
}
#darkLight:hover {
    width:130px;
    padding-left:1%;
    background-color:#111;
}

#container{max-width: 100%; overflow: hidden; font-family: 'S-CoreDream-3Light';}
.bannerWrap{width: 100%; height: 950px; position: relative;}
.bannerWrap > img{height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.bannerWrap > div{width: 768px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.bannerWrap > div img{margin: 30px auto;}
.bannerWrap > div h2, .bannerWrap > div p{text-align: center; color: #fff;}
.bannerWrap > div h2{font-size: 48px; letter-spacing: -1px; line-height: 1.2; margin-bottom: 40px;}
.bannerWrap > div p{font-size: 28px; line-height: 1.5;}
.bannerWrap > div p span{display: block;}
.bannerWrap > div > div{width: 37px; height: 192px; position: absolute; font-size: 100px; color: #fff; z-index: 10; top: 30px; background: url(../img/main/square_bracket1.png); background-size: 100% 100%;}
.bannerWrap > div > div.square_bracket1{left: 100px;}
.bannerWrap > div > div.square_bracket2{background-image: url(../img/main/square_bracket2.png); right: 100px;}
.inner.box{}
.main_title{padding: 0px 0;}
.main_title h2{font-size: 3em; line-height: 1.0; color: #000; text-align: left; font-weight: 700; padding: 20px 0;}
/*.main_title h2::after{content: ""; display: block; width: 1px; height: 35px; background: #223040; margin: 55px auto;} */
.main_title h2 span{color: #d40424; font-weight: 600; margin-right: 20px;}
.main_title p{width: 70%; margin: 0 auto; text-align: center; font-size: 24px; line-height: 1.5; font-weight: 500;}
.main_title h5{font-size: 15px; line-height: 1.0; color: #36688f; text-align: right; font-weight: 700; padding-bottom: 20px ; ;margin-top : -40px;}
.detail{width: 100%; margin: 0 auto;}
.detail > ul{width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: center; padding : 0; }
.detail > ul li{float: left; }
.detail > ul li.second{margin: 0 2%;}
.detail > ul li img{margin: 40px auto 40px;}
.detail > ul li p{color: #666; font-size: 28px; margin-bottom: 26px;}
.detail > ul li p span{display: block;}
.detail > ul li strong{display: block; font-size: 35px; line-height: 1.5; color: #333; margin: 0 auto; text-align: center;} 
.detail > ul li strong span{font-size: 44px; color: #223040; display: inline-block; font-weight: bold; margin-right: 10px;}
.detail > ul li p{text-align: center;}


.aboutWrap_mo {display : none; margin-bottom: 40px;}
.aboutWrap_mo .detail > ul li strong{text-align: center;}


.aboutWrap{width: 100%; margin-bottom: 120px;}
.aboutWrap .detail > ul li strong{text-align: center;}



.coreComWrap_mo { display : none ;}
.coreComWrap_mo .main_title h2::after{background: #fff;}
.coreComWrap_mo .main_title h2, .coreComWrap .main_title h2 span, .coreComWrap .main_title p{color: #000;}
.coreComWrap_mo .main_title h2{letter-spacing: -4px; font-weight: 600;}
.coreComWrap_mo .main_title h2 span{letter-spacing: 0;}
.coreComWrap_mo .detail ul li{background: #fff; border-radius: 10px; padding: 0px 0;}
.coreComWrap_mo .detail ul li strong{font-weight: bold; margin-bottom: 26px;}
.coreComWrap_mo .detail ul li p{font-size: 22px; line-height: 1.4; margin-bottom: 0;}


.coreComWrap{width: 100%;}
.coreComWrap .main_title h2::after{background: #fff;}
.coreComWrap .main_title h2, .coreComWrap .main_title h2 span, .coreComWrap .main_title p{color: #000;}
.coreComWrap .main_title h2{letter-spacing: -4px; font-weight: 600;}
.coreComWrap .main_title h2 span{letter-spacing: 0;}
.coreComWrap .detail ul li{background: #fff; border-radius: 10px; padding: 0px 0;}
.coreComWrap .detail ul li strong{font-weight: bold; margin-bottom: 26px;}
.coreComWrap .detail ul li p{font-size: 22px; line-height: 1.4; margin-bottom: 0;}
.portfolioWrap{background: url(../img/main/port_bg.png); padding-bottom: 90px;}
.portfolioWrap .main_title h2::after{background: #fff;}
.portfolioWrap .main_title h2, .portfolioWrap .main_title h2 span, .portfolioWrap .main_title p{color: #fff;}
.port_go{width: 100%;}
.portfolioWrap .port_go a{color: #fff; text-align: center; font-size: 18px; width: 100%; border: 1px solid #fff; padding: 15px 0px; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;  -webokit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition: 0.3s; -0-transition-duration: 0.3s;margin: 0 auto;}
.portfolioWrap .port_go a:hover{background: #fff; color: #223040;}
.pic_lt .lat_title, .pic_lt .lt_more, .pic_lt li .new_icon, .pic_lt .lt_date{display: none;}
.portfolioWrap .mainPage{display: block;}  
.portfolioWrap .latest_wr{display: none;}
.portfolioWrap .latest_wr2{display: block;}
.portfolioWrap .pic_lt .empty_li{width: 100%; height: 500px; background: #fff; line-height: 500px; text-align: center;}
.portfolioWrap .pic_lt{width: 100%; background: none; border: none; margin-bottom: 0;} 
.portfolioWrap .pic_lt ul{padding: 0;}
.portfolioWrap .pic_lt li{padding: 0; margin:0.6%; height:347px; overflow: hidden;}
.portfolioWrap .pic_lt li .lt_img{  }
.portfolioWrap .pic_lt li .lt_img img{display: block;    display: block;}
.portfolioWrap .pic_lt li .lt_img + a{display: none;}
.portfolioWrap .latest_wr2 .pic_lt .new_icon + a{display: none;}
.portfolioWrap .owl-theme .owl-dots .owl-dot{outline: 0 none;}
.portfolioWrap .owl-theme .owl-dots .owl-dot span{background: #ddd;}
.portfolioWrap .owl-theme .owl-dots .owl-dot span:hover, .portfolioWrap .owl-theme .owl-dots .owl-dot.active span{background: #c80e21;}

.consertWrap{background: url(../img/main/consert_bg.png);}
.consertWrap .inner{padding-bottom: 170px;}
.consertWrap .main_title{padding-bottom: 30px;}
.consertWrap .latest_wr{width: 100%; margin: 0 auto;}
.consertWrap .latest_wr > div{float: left; width: 45%;}
.hot_icon .latest_wr > div.ing_projects{ }
.pic_lt li .hot_icon { float:left; margin:1%; }
.consertWrap .latest_wr > div.news{float: right;}
.consertWrap .lat{margin-bottom: 0; border: none; padding: 60px; min-height: 493px;}
.consertWrap .lat .lat_title{border-bottom: none; background: none; padding: 0; line-height: 1.0em; font-size: 1.0em; color:#333; border-bottom: 1px solid #ddd;}
.consertWrap .lat .lat_title a{color: #333; font-size: 30px; color: #333; font-weight: 600; line-height: 70px; height: 70px;}
.consertWrap .lat ul{padding: 0; margin-top: 30px;}
.consertWrap .lat li{padding: 0; padding-right: 0; padding-left: 0; line-height: 45px; overflow: hidden; }
.consertWrap .lat li:before{display: none;}
.consertWrap .lat li a{width: 70%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #333; font-size: 18px;}
.consertWrap .lat li a:hover{color:#c80e21; font-weight: bold;}
.consertWrap .lat .lt_date{color: #888; font-size: 18px; float:right; }
.consertWrap .lat .lat_title_area{position: relative;}
.consertWrap .lat .lt_more{top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0;  font-weight: normal; color: #7a838c; font-size: 45px;}
.consertWrap .lat .lt_more .fa{display: none;}
.consertWrap .lat li .new_icon{display: none;}
.consertWrap .lat li .hot_icon { float:left; margin: 4%; }
.consertWrap .lat .lat_title a:after{display: none;}
.consertWrap .lat .empty_li{line-height: 270px; font-size: 18px;}
.contactWrap{background: url(../img/main/bg_img2.png); background-size: cover; background-position: center;}
.contactWrap .inner{padding-bottom: 170px;}
.contactWrap .main_title{padding-bottom: 70px;}
.contactWrap .main_title h2::after{display: none;}
.contactWrap .main_title h2, .contactWrap .main_title h2 span, .contactWrap .main_title p{color: #fff;}
.contactWrap .main_title p{padding-top: 50px;}
.contactWrap .detail{width: 100%; height: 420px;}
.contactWrap .root_daum_roughmap{height: 100%;}
.contactWrap .root_daum_roughmap .wrap_map{height: 100%;}
@media screen and (max-width: 1199px){
    .bannerWrap > div img{width:110px;}   
    .bannerWrap > div h2{font-size: 30px;}
    .bannerWrap > div p{width: 90%; margin: 0 auto; font-size: 18px;}
    .bannerWrap > div > div{top: 20px;}
    .bannerWrap > div > div.square_bracket1{left: 160px;}
    .bannerWrap > div > div.square_bracket2{right: 160px;}
    .inner{width: 100%; padding: 0 20px 60px;} 
    .main_title{padding: 60px 0;}
    .main_title h2{font-size: 42px;}
    .main_title h2::after{width: 1px; height: 24px; margin: 35px auto;}
    .main_title h2 span{margin-right: 15px;}
    .main_title p{width: 100%; font-size: 16px; padding: 0 30px;} 
    .detail > ul li p{font-size: 20px; margin-bottom: 0;}
    .detail > ul li strong{font-size: 26px;} 
    .detail > ul li strong span{font-size: 30px;}
    .detail > ul li, .detail > ul li img{-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webokit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition: 0.3s; -0-transition-duration: 0.3s;} 
    .aboutWrap .detail > ul li:hover img{-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
    .coreComWrap{background-size: auto 100%;}
    .coreComWrap .main_title h2{letter-spacing: -2px;}
    .coreComWrap .detail ul li strong{margin-bottom: 0; font-size: 26px;}
    .coreComWrap .detail ul li p{padding: 0 20px; font-size: 20px;}  
    .portfolioWrap .port_go a{width: 100%; margin-top: 35px;}
    .portfolioWrap .port_go a{font-size: 16px;}
    .contactWrap .inner{padding-bottom: 100px;}
    .contactWrap .main_title{padding-bottom: 50px;}  
}
@media screen and (min-width:481px){
    .portfolioWrap .mainPagewrap{width: 100%; position: relative;}
    .portfolioWrap .latest_wr{display: none;}
    .portfolioWrap .latest_wr2{display: block; width: 100%; height: auto; margin: 0 auto;} 
    .portfolioWrap .pic_lt ul{display: inherit; width: 100%; overflow: hidden; margin-bottom: 32px; padding: 0;}
    .portfolioWrap .pic_lt li{padding: 0; width: 32%;  padding: 0;}
    .portfolioWrap .pic_lt li .lt_img{margin: 0; width: 100%; overflow: hidden;}
    .portfolioWrap .pic_lt li .lt_img:hover img{-webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2); -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webokit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition: 0.6s; -0-transition-duration: 0.6s;}
}
@media screen and (min-width:481px) and (max-width: 1199px){
    .bannerWrap{height: 800px;}
}
@media screen and (max-width:1024px){
    .consertWrap .latest_wr > div{width: 49%;} 
    .consertWrap .lat .lat_title a{font-size: 20px;}
    .consertWrap .lat .lt_more{font-size: 30px;}
    .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 16px;}
    .consertWrap .lat .empty_li{line-height: 270px; font-size: 16px;}
}
@media screen and (max-width:767px){
    .bannerWrap > div{width: 480px;}
    .bannerWrap > div > div.square_bracket1{left: 20px;}
    .bannerWrap > div > div.square_bracket2{right: 20px;}
    .detail > ul{width: 80%; display: inherit;}
    .detail > ul li{width: 100%;}
    .detail > ul li.second{margin: 0;}
    .detail > ul li p{font-size: 20px; margin-bottom: 0;}
    .detail > ul li strong{font-size: 26px;} 
    .detail > ul li strong span{font-size: 30px;}
    .consertWrap .inner{padding-bottom: 80px;}
    .consertWrap .main_title{padding-bottom: 0;} 
    .consertWrap .latest_wr > div{float: left; width: 100%;}
    .consertWrap .latest_wr > div.ing_projects{margin-bottom: 5%;}
    .consertWrap .lat{padding: 40px;}
    .consertWrap .lat .lat_title a{font-size: 20px; line-height: 60px; height: 60px;}
    .consertWrap .lat li{line-height: 50px;}
    .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 16px;}
    .consertWrap .lat .empty_li{line-height: 300px; font-size: 16px;}
}
@media screen and (max-width:600px){
    .portfolioWrap .latest_wr{display: block;}
    .portfolioWrap .latest_wr2{display: none;}
    .portfolioWrap .pic_lt .empty_li{height: 200px; line-height: 200px;}
    .portfolioWrap .inner{position: relative;}
    .portfolioWrap .mainPagewrap{width: 100%; position: relative;}
    .portfolioWrap .latest_wr{width: 240px; height: auto; margin: 0 auto;}
    .portfolioWrap{padding-bottom: 60px;}
    .portfolioWrap .port_go a{width: 100%; margin-top: 35px; font-size: 12px; padding: 10px 0;}
}
@media screen and (min-width:481px) and (max-width:767px){
    .coreComWrap .detail ul{width: 40%; min-width: 320px;}
    .coreComWrap .detail img{margin: 10px auto 20px;}
    .coreComWrap .detail > ul li.second{margin: 20px 0;}
}



@media screen and (max-width: 480px){
    .bannerWrap{height: 700px;}
    .bannerWrap > div{width: 320px;}
    .bannerWrap > div img{width: 63px; height: 42px; margin: 30px auto 20px;}   
    .bannerWrap > div h2{font-size: 20px;}
    .bannerWrap > div p{font-size: 12px;}
    .bannerWrap > div > div{width: 20px; height: 104px;}
    .bannerWrap > div > div.square_bracket1{left: 20px;}
    .bannerWrap > div > div.square_bracket2{right: 20px;}
    .main_title{padding: 10px 0;}
    .main_title h2{font-size: 20px; weight : 700}
	.main_title h5 {font-size: 10px; color: #36688f; font-weight: 700; padding-bottom: 6px; margin-top: -30px; }
    .main_title h2::after{width: 1px; height: 13px; margin: 20px auto;}
    .main_title h2 span{margin-right: 10px;}
    .main_title p{width: 100%; font-size: 12px; padding: 0 20px;} 
    .detail > ul{width: 100% }
    .detail > ul li{width: 100%; height: auto ; }
    .detail > ul li img{max-width: 100%; margin: 0px auto } 
    .detail > ul li p{font-size: 16px;}
    .detail > ul li strong{font-size: 23px; line-height: 1.5; margin: 0 auto; text-align: left; line-height: 1.0;} 
    .detail > ul li strong span{font-size: 35px; color: #223040; display: inline-block; font-weight: bold; margin-right: 10px;} 
    .detail > ul li p, .detail > ul li strong{text-align: left; width: 152px; margin-right: 0px;}
    .aboutWrap .detail > ul li img{float: left;}
    .aboutWrap .detail > ul li p{float: right;}
    .aboutWrap .detail > ul li strong{float: right;} 
    .aboutWrap .detail > ul li strong{text-align: left;}
	.inner.box {padding: 0px;}

    .coreComWrap_mo  {width :100%; display : block ;}
    .coreComWrap_mo .detail a {padding : 0 ;}
    .coreComWrap_mo .detail ul li{width :31% ;padding: 10px 0; }
    .coreComWrap_mo .detail > ul li.second{margin: 15px 0;}
    .coreComWrap_mo .detail ul li strong, .coreComWrap_mo .detail ul li p{width: 100%;}

	.coreComWrap {display : none ;}


    .aboutWrap_mo {display : block;}
    .aboutWrap{display : none;}


    .consertWrap .inner{padding-bottom: 60px;}
    .consertWrap .lat{padding: 30px; min-height: 373px;}
    .consertWrap .lat .lat_title a{font-size: 17px; height: 40px; line-height: 40px;}
    .consertWrap .lat .lt_more{font-size: 20px;}
    .consertWrap .lat li{line-height: 40px;}
    .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 14px;}
    .consertWrap .lat .empty_li{line-height: 240px; font-size: 14px;}
    .contactWrap .inner{padding-bottom: 50px;}
    .contactWrap .main_title{padding-bottom: 30px;}
    .contactWrap .detail{height: 220px; overflow: hidden;}  
    .portfolioWrap .pic_lt li .lt_img {height: 220px;}
}

@media screen and (max-width:350px){
    .portfolioWrap .port_go a{font-size: 12px;}
}


/* 260317 */
.vt_top {display: inline-block; vertical-align: top;}
.vt_mid {display: inline-block; vertical-align: middle;}
.vt_bot {display: inline-block; vertical-align: bottom;}
.borderRadius {border-radius: 10px; overflow: hidden;}
.inner1200 {width: 100%; max-width: 1200px; margin: 0 auto; margin-bottom: 100px;}
.grid {width: 100%; height: 100%; display: grid; align-content: center; justify-items: center;}
@media (max-width: 1230px) {
    .inner1200 {padding: 0 16px; box-sizing: border-box;}
}
@media (max-width: 768px) {
    .borderRadius {border-radius: 4px;}
}

.visual {margin-bottom: 40px; position: relative; height: 365px; overflow: hidden;}
.visual .black_layer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 2;}
.visual .black_layer .text_wrap {width: 92%; max-width: 880px; margin: 0 auto; height: 100%;}
.visual .black_layer .text_wrap .grid {justify-items: start;}
.visual .black_layer .text_wrap .top {color: #fff; font-size: 20px; font-weight: bold; margin-bottom: 30px;}
.visual .black_layer .text_wrap .mid {margin-bottom: 30px;}
.visual .black_layer .text_wrap .mid .mid_1 {color: #FFF552; font-size: 34px; font-weight: 700;}
.visual .black_layer .text_wrap .mid .mid_2 {font-size: 26px; font-weight: 600; color: #fff;}
.visual .black_layer .text_wrap .btn_area .link_btn {border: 2px solid #fff; border-radius: 10px; font-size: 20px; color: #fff; font-weight: 600; padding: 16px 20px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); transition: 300ms;}
.visual .black_layer .text_wrap .btn_area .link_btn:hover {background: rgba(255,255,255,0.2)}

.imgcover {width: 100%; height: 100%; object-fit: cover; max-width: inherit;}
a:hover {text-decoration: none;}
.nav_wrap {font-size: 0; margin-bottom: 20px;}
.nav_wrap .nav_a {width: calc((100% - 40px) / 3); margin-right: 20px; background: #ECEDEF; padding: 30px 20px 10px; box-sizing: border-box; border-radius: 10px; transition: 300ms;}
.nav_wrap .nav_a.bluebg {background: #D5EBFF;}
.nav_wrap .nav_a:last-child {margin-right: 0;}
.nav_wrap .nav_a .nav_title {font-size: 20px; font-weight: 600;}
.nav_wrap .nav_a .img_area img {width: 130px; margin-left: auto;}
.nav_wrap .nav_a:hover {background: #E0E3E6;}
.nav_wrap .nav_a.bluebg:hover {background: #BEDFFF;}


.banner_area {font-size: 0; margin-bottom: 80px;}
.banner_area .banner {width: calc((100% - 20px) / 2); overflow: hidden; border-radius: 10px; margin-right: 20px; position: relative; height: 320px;}
.banner_area .banner:last-child {margin-right: 0;}
.banner_area .banner .layer {position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 0 16px;}
.banner_area .banner .layer .cate {background: #1F7AD1; color: #fff; border-radius: 4px; padding: 6px 30px; font-size: 16px; margin-bottom: 24px; font-weight: bold;}
.banner_area .banner .layer .grid {justify-items: start;}
.banner_area .banner .layer .title {font-size: 34px; font-weight: 700; margin-bottom: 40px;}
.banner_area .banner .layer .text {font-size: 16px; font-weight: 500; line-height: 1.4;}


.best_area {margin-bottom: 80px;}
.best_area .s_title {margin-bottom: 60px; font-size: 30px; font-weight: bold; text-align: center;}
.best_area .contents .pro_wrap {margin-bottom: 40px; font-size: 0;}
.best_area .contents .pro_wrap .product {width: calc((100% - 40px) / 3); margin-right: 20px; display: inline-block;}
.best_area .contents .pro_wrap .product:last-child {margin-right: 0;}
.best_area .contents .pro_wrap .product .img_area {width: 100%; height: 28vw; transition: 300ms;}
.best_area .contents .pro_wrap .product .img_area .imgcover {transition: 300ms;}
.best_area .contents .pro_wrap .product .img_area:hover .imgcover {transform: scale(1.1);}

.best_area .contents .pro_wrap .product .info_area {padding: 30px 0; text-align: center;}
.best_area .contents .pro_wrap .product .info_area .top {font-size: 18px; font-weight: 500; margin-bottom: 10px; word-break: keep-all;;}
.best_area .contents .pro_wrap .product .info_area .bottom {font-size: 24px; font-weight: 500;}
.best_area .contents .pro_wrap .product .info_area .gray {font-size: 16px; color: #858a8d; margin: 10px 0 5px; text-decoration: line-through}
.best_area .contents .pro_wrap .product .info_area .bottom .price {color: #1D79D1; font-weight: bold;}
.best_area .contents .all_area {text-align: center;}
.best_area .contents .all_area .all_btn {border: 2px solid #1F7AD1; border-radius: 10px; color:#1F7AD1; font-size: 18px; padding: 20px 30px; display: inline-block; font-weight: bold; transition: 300ms;}
.best_area .contents .all_area .all_btn:hover {background: #1F7AD1; color: #fff;}

@media (max-width: 1600px) {
    .best_area .contents .pro_wrap .product .img_area {height: 34vw;}
}
@media (max-width: 1230px) {
    .best_area .contents .pro_wrap .product .img_area {height: 40vw;}
    .nav_wrap .nav_a .img_area img {width: 110px;}
    .banner_area .banner .layer .title {font-size: 20px; margin-bottom: 30px; font-size: 30px;}
    .banner_area .banner .layer .cate {margin-bottom: 18px; margin-bottom: 18px;}
}
@media (max-width: 768px) {
    .nav_wrap .nav_a {width: 100%; display: block; margin: 0 0 16px; padding: 20px 20px 6px}
    .nav_wrap .nav_a .nav_title {display: inline-block; vertical-align: top; width: calc(100% - 100px);}
    .nav_wrap .nav_a .img_area {display: inline-block; vertical-align: top; margin-top: -20px; width: 100px;}

    .visual {height: 280px;}
    .visual .black_layer .text_wrap .top {margin-bottom: 20px; font-size: 18px;}
    .visual .black_layer .text_wrap .mid .mid_1 {font-size: 30px;}
    .visual .black_layer .text_wrap .mid .mid_2 {font-size: 22px;}
    .visual .black_layer .text_wrap .btn_area .link_btn {font-size: 16px; padding: 12px 16px;}
    .nav_wrap .nav_a .nav_title {font-size: 18px;}

    .banner_area .banner .layer .cate {padding: 6px 20px; margin-bottom: 14px; font-size: 14px;}
    .banner_area .banner .layer .title {font-size: 26px; margin-bottom: 24px;}
    .banner_area .banner .layer .text {font-size: 14px;}
    .banner_area .banner {height: 260px;}
    .banner_area {margin-bottom: 60px;}
    .best_area .s_title {margin-bottom: 40px; font-size: 24px;}
    .best_area .contents .all_area .all_btn {padding: 10px 20px; font-size: 16px;}

    .best_area .contents .pro_wrap .product .info_area .top {font-size: 16px;}
    .best_area .contents .pro_wrap .product .info_area .bottom {font-size: 20px;}
}

@media (max-width: 500px) {
    .inner1200 {margin-bottom: 20px;}

    .nav_wrap .nav_a {margin: 0 0 10px; padding-bottom: 0;}
    .visual {height: 240px; margin-bottom: 10px;}
    .visual .black_layer .text_wrap .top {font-size: 16px; margin-bottom: 14px;}
    .visual .black_layer .text_wrap .mid .mid_1 {font-size: 24px;}
    .visual .black_layer .text_wrap .mid .mid_2 {font-size: 18px;}
    .visual .black_layer .text_wrap .btn_area .link_btn {font-size: 14px; padding: 10px 12px}

    .banner_area .banner {height: 180px;}
    .banner_area .banner .layer .cate {padding: 4px 16px; font-size: 12px; margin-bottom: 10px;}
    .banner_area .banner .layer .title {font-size: 22px; margin-bottom: 20px;}
    .banner_area .banner .layer .text {font-size: 10px;}
    .nav_wrap .nav_a .nav_title {font-size: 16px;}
    .nav_wrap {margin-bottom: 10px;}

    .banner_area {margin-bottom: 40px;}
    .banner_area .banner {width: calc((100% - 10px) / 2); margin-right: 10px;}
    .banner_area .banner .layer .title {font-size: 18px;}

    .best_area .contents .pro_wrap .product {width: 100%; display: block; margin: 0 0 10px;}
    .best_area .contents .pro_wrap .product:last-child {margin-bottom: 0;}
    .best_area .contents .pro_wrap .product .info_area {padding: 16px 0;}
    .best_area .contents .pro_wrap .product .info_area .top {margin-bottom: 6px;}
    .best_area .contents .pro_wrap .product .img_area {height: 91.2vw;}

    .best_area .contents .all_area .all_btn {padding: 8px 16px; font-size: 14px;}
    .best_area .contents .pro_wrap {margin-bottom: 20px;}
    .best_area {margin-bottom: 40px;}
}





/* 주문페이지 */
.order_top {width: 100%; margin-bottom: 30px; margin-top: 20px}
.order_table {width: 100%; table-layout: fixed; border-collapse: collapse;}
.order_table .th {background: #F3F3F3; border-top: 1px solid #191919; font-size: 16px; font-weight: 500; height: 44px;}
.order_table .td {height: 100px; font-size: 16px; font-weight: 500; text-align: center; border-bottom: 1px solid #DDDDDD; word-break: keep-all;}
.order_table .th2, .order_table .th3, .order_table .th4 {width: 150px;}

#sod_frm .h2 {font-size: 18px; margin-bottom: 16px; font-weight: 500; border-bottom: 1px solid #191919; padding-bottom: 16px;}
#sod_frm .odf_list ul {margin: 0; padding: 0; font-size: 0;}
#sod_frm .odf_list ul li {width: 50%; display: inline-block;}
#sod_frm .odf_list ul li label {font-size: 16px; display: inline-block; vertical-align: middle; width: 100px; box-sizing: border-box; height: 60px; line-height: 60px;}
#sod_frm .odf_list ul li strong {font-size: 16px; width: 100px; box-sizing: border-box; display: inline-block;}
#sod_frm .odf_list ul li strong.add_strong {line-height: 60px; height: 60px;}

#sod_frm .odf_list ul li input {font-size: 16px;}
#sod_frm .odf_list ul li input[type="text"], #sod_frm .odf_list ul li input[type="email"], #sod_frm .odf_list ul li input[type="password"], #sod_frm .odf_list ul li input[type="number"] {width: calc(90% - 104px); background: #FCFCFC!important; height: 40px; display: inline-block; vertical-align: middle; box-sizing: border-box; padding-left: 16px; box-sizing: border-box;}
#sod_frm .odf_list ul li .sound_only {font-size: 0;}
button.btn_frmline {font-size: 14px; background: #1D79D1; width: 84px; height: 40px; border-radius: 4px; vertical-align: middle; margin-left: 10px; margin-bottom: 10px;}
#sod_frm .odf_list ul li.address {width: 100%; display: block;}
#od_addr1, #od_addr2, #od_addr3, #od_b_addr1, #od_b_addr2, #od_b_addr3 {margin-left: 100px; margin-bottom: 10px; width: calc(100% - 164px)!important;}
#od_zip, #od_b_zip {margin-bottom: 10px; width: 180px!important;}

#sod_frm_taker {margin-top: 30px; border-top: 1px solid #ddd; padding-top: 30px;}
#sod_frm .odf_list ul li.dlv_slt {display: block; width: 100%;}
#sod_frm .odf_list ul li.dlv_slt input[type="radio"] {width: 20px; height: 20px; margin-right: 4px;}
#sod_frm .odf_list ul li input[type="checkbox"] {width: 20px; height: 20px; margin-right: 4px;}
#sod_frm .odf_list ul li label.radio_label {height: auto; margin-right: 20px;}
#sod_frm .odf_list ul li input#ad_subject {width: 240px; margin-right: 20px}
#sod_frm .odf_list ul li label.ad_default {width: auto; line-height: inherit; height: auto;}

#sod_frm .odf_list ul li.block {width: 100%; display: block;}

#od_memo {width: calc(100% - 164px)!important; height: 150px; background: #FCFCFC; border: 1px solid #e4eaec; box-sizing: border-box; display: inline-block; vertical-align: middle; font-size: 14px; padding: 16px; box-sizing: border-box;}


#sod_frm_pay {margin-top: 50px; padding-top: 30px; border-top: 1px solid #ddd; margin-bottom: 80px;}

.total_table {width: 100%; border-collapse: collapse;  table-layout: fixed; border-top: 1px solid #ddd; margin-bottom: 10px;}
.total_table th {background: #F3F3F3; border-bottom: 1px solid #ddd; font-size: 16px; font-weight: 500; height: 44px; width: 180px;}
.total_table td {height: 44px; font-size: 16px; padding-left: 16px; box-sizing: border-box; font-weight: 500; border-bottom: 1px solid #ddd;}
#sod_frm_pt_alert {font-size: 14px; margin-bottom: 20px}
#m_sod_frm_paysel ul {padding: 0; margin: 20px 0;}
#m_sod_frm_paysel li {display: inline-block; vertical-align: middle;}
#m_sod_frm_paysel li label {display: inline-block; vertical-align: middle; font-size: 16px; margin-right: 20px;}
#m_sod_frm_paysel li input[type="radio"] {width: 20px; height: 20px; margin-right: 4px;}


.bankText {font-size: 16px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-weight: 500; padding: 10px 0;}
.lab {display: inline-block; vertical-align: middle; font-size: 16px; width: 100px; height: 44px; line-height: 44px;}
#od_deposit_name {background: #F3F3F3; height: 40px; padding-left: 16px; box-sizing: border-box; width: 180px; font-size: 16px;}



@media (max-width: 768px) {
    .order_table .td {font-size: 14px;}
    .order_table .th {font-size: 14px;}
    .order_table .th2, .order_table .th3, .order_table .th4 {width: 60px; padding: 0 4px;}
    #sod_frm .odf_list ul li {width: 100%; display: block;}
    #sod_frm .odf_list ul li label {height: 50px; line-height: 50px; font-size: 14px;}
    #sod_frm .odf_list ul li input {padding-left: 10px; font-size: 14px;}
    #sod_frm .odf_list ul li input[type="text"], #sod_frm .odf_list ul li input[type="email"], #sod_frm .odf_list ul li input[type="password"], #sod_frm .odf_list ul li input[type="number"] {width: calc(90% - 66px);}

    #od_addr1, #od_addr2, #od_addr3, #od_b_addr1, #od_b_addr2, #od_b_addr3 {width: calc(100% - 128px)!important;}
    #sod_frm .odf_list ul li strong {font-size: 14px;}
    #od_zip, #od_b_zip {width: 149px!important;}
    .total_table th {width: 80px; font-size: 14px;}
    .total_table td {font-size: 14px;}
    #od_memo {width: calc(100% - 128px)!important;}
    button.btn_frmline {font-size: 12px;}
}


#sit_buy {border: none!important;}
#sit_inf_open th {width: 200px;}
.sod_frm_point {display: none;}


.mid_banner {width: 100%; height: 200px; overflow: hidden; background: url("../img/260317/midban.jpg") no-repeat center center / cover; margin-bottom: 80px;}
.mid_banner .layer {width: 100%; max-width: 700px; margin: 0 auto; height: 100%; padding: 0 16px; box-sizing: border-box;}
.mid_banner .layer .grid {justify-items: start;}
.mid_banner .layer .top {font-size: 20px;font-weight: 500;}
.mid_banner .layer .mid {font-size: 30px;font-weight: bold; margin: 4px 0 12px;}
.mid_banner .layer .mid .blue {color: #1D79D1;}
.mid_banner .layer .bot .banner_a {border-radius: 4px; border: 2px solid #1F7AD1; display: inline-block; padding: 8px 12px; box-sizing: border-box; color: #1F7AD1; transition: 300ms;}
.mid_banner .layer .bot .banner_a:hover {background: rgba(31,122,209,0.08);}
.mid_banner .layer .bot .banner_a .text {font-size: 16px; font-weight: bold;}
.mid_banner .layer .bot .banner_a .icon {width: 20px; margin-left: 2px}


.sns_area {margin-bottom: 80px;}
.sns_area .s_title {margin-bottom: 60px; font-size: 30px; font-weight: bold; text-align: center;}

.sns_area .contents {font-size: 0;}
.sns_area article {width: calc((100% - 20px) / 2); margin-right: 20px;}
.sns_area article:last-child {margin-right: 0;}
.sns_area .arti_title {padding: 10px 0; font-size: 0;}
.sns_area .arti_title .at_left {width: calc(100% - 80px);}
.sns_area .arti_title .at_left .text {font-size: 20px; font-weight: bold; margin-left: 4px;}
.sns_area .arti_title .at_left .icon {width: 26px;}
.sns_area .arti_title .at_right {width: 80px; text-align: right;}
.sns_area .arti_title .at_right .text {font-size: 14px; margin-right: 4px; color: #1D79D1; font-weight: 500;}
.sns_area .arti_title .at_right .icon {width: 12px;}
.sns_area .arti_cont {height: 678px; width: 100%; border: 1px solid #ddd; overflow: hidden;}
.sns_area .arti_cont .sns_flex {display: flex; gap: 4px; flex-wrap: wrap; height: 100%;}
.sns_area .arti_cont .sns_flex .insta_box {width: calc((100% - 4px) / 2); height: calc((100% - 4px) / 2); overflow: hidden; position: relative; cursor: pointer;}
.sns_area .arti_cont .sns_flex .insta_box .link_a {display: block; height: 100%; width: 100%;}
.sns_area .arti_cont .sns_flex .insta_box .link_a .imgcover {transition: 300ms; display: block; max-width: inherit;}
.sns_area .arti_cont .sns_flex .insta_box .link_a:hover .imgcover {transform: scale(1.05);}

.sns_area .blog .arti_cont {}
.sns_area .arti_cont .blog_block {padding: 20px 20px 22px; box-sizing: border-box; border-bottom: 1px solid #ddd; height: calc(100% / 3); overflow: hidden; display: block; transition: 300ms;}
.sns_area .arti_cont .blog_block:last-child {border: none;}
.sns_area .arti_cont .blog_block .blog_left {width: 180px; height: 180px; overflow: hidden;}
.sns_area .arti_cont .blog_block .blog_right {width: calc(100% - 180px); padding-left: 20px; box-sizing: border-box;}
.sns_area .arti_cont .blog_block .blog_right .blog_title {font-size: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 20px; font-weight: bold;}
.sns_area .arti_cont .blog_block .blog_right .blog_text {font-size: 14px; color: #878787; margin-bottom: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5;}
.sns_area .arti_cont .blog_block .blog_right .more_area {display: inline-block;}
.sns_area .arti_cont .blog_block .blog_right .more_area .text {color: #747474; font-size: 14px; font-weight: 500;}
.sns_area .arti_cont .blog_block .blog_right .more_area .icon {width: 16px; margin-left: 6px;}
.sns_area .arti_cont .blog_block:hover {background: #f5f5f5;}

@media (max-width: 768px) {
    .best_area {margin-bottom: 60px;}
    .mid_banner {margin-bottom: 60px;}
    .sns_area .s_title {margin-bottom: 40px; font-size: 24px;}
    .mid_banner {height: 160px;}
    .mid_banner .layer .top {font-size: 16px;}
    .mid_banner .layer .mid {font-size: 24px;}
    .mid_banner .layer .bot .banner_a {padding: 6px 10px;}
    .mid_banner .layer .bot .banner_a .text {font-size: 14px;}

    .sns_area article {width: 100%; margin: 0 0 30px 0;}
    .sns_area article:last-child {margin-bottom: 0;}
    .sns_area .arti_cont {height: auto;}
    .sns_area .arti_cont .blog_block .blog_right .blog_title {font-size: 16px; margin-bottom: 16px;}
    .sns_area .arti_cont .blog_block .blog_right .blog_text {font-size: 12px; margin-bottom: 24px;}
    .sns_area .arti_cont .blog_block .blog_right .more_area .text {font-size: 12px;}
    .sns_area .arti_cont .blog_block .blog_left {width: 150px; height: 150px;}
    .sns_area .arti_cont .blog_block .blog_right {width: calc(100% - 150px); padding-left: 16px;}
    .sns_area .arti_cont .blog_block {padding: 16px 16px 18px;}


}

/* 장바구니 */
.list_02 ul {margin: 0; padding: 0;} 
.list_02 ul .sod_ws_img {display: inline-block; vertical-align: middle;}
.list_02 ul .wish_info {display: inline-block; vertical-align: middle; padding-left: 20px; box-sizing: border-box;} 
.list_02 ul .wish_info .wish_chk {display: inline-block;}
.list_02 ul .wish_info .wish_chk input[type="checkbox"]{width: 20px; height: 20px;}
#sod_ws_act {text-align: center; margin: 10px 0;}
#sod_ws_act button {font-size: 16px;}
#sod_ws_act button.btn02 {background: #1D79D1; height: 45px; border-radius: 4px; border: 1px solid #1D79D1;}
#sod_ws_act button.btn01 {background: #fff; height: 45px; border-radius: 4px; border: 1px solid #ddd; margin-right: 6px;}
.info_link {font-size: 16px; margin: 6px 0 10px; display: inline-block; vertical-align: middle; margin-left: 4px;}
.list_02 ul .wish_info .info_date {font-size: 14px; color: #666; margin-bottom: 30px;}
.wish_del i {font-size: 24px;}
.list_02 ul li {padding: 10px 0; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.list_02 ul li:first-child {border-top: 1px solid #ddd}