@CHARSET "UTF-8";

/*유통단지 소개*/
.intro{display:flex;align-items:center;padding: 40px;background:url(/nanum/site/builder/dir/main/img/menu4845/bg_intro.jpg)no-repeat 0 0;background-size:cover;}
.intro p{color:#fff;}
.intro p.tit{flex-shrink: 0;width: 270px;font-size:3rem;font-weight: 300;padding-right: 30px;}
.intro p.txt{padding-left: 30px;border-left: 1px solid rgb(255 255 255 / 50%);}
.dist_intro p.intro_tit{position: relative;font-size:2.7rem;text-align: center;margin-top: 70px;}
.dist_intro p.intro_tit:before{content:"";position:absolute;left: 50%;bottom: 5px;width: 600px;height: 20px;background: #d4ecff;transform: translateX(-50%);z-index: -1;}
.dist_intro dl{position:relative;display:flex;gap: 20px;margin-top: 20px;}
.dist_intro dl.n1{margin-top:40px;}
.dist_intro dl:after{position:absolute;left:0;top:50%;width: 40px;height:40px;margin-top:-20px;border-radius:100%;color:#fff;text-align: center;font-weight:700;line-height: 40px;background:#000;box-shadow: 4px 5px 10px rgb(0 0 0 / 20%);}
.dist_intro dl.n1:after{content:"1";}
.dist_intro dl.n2:after{content:"2";}
.dist_intro dl.n3:after{content:"3";}
.dist_intro dl.n4:after{content:"4";}
.dist_intro dl dt{display: flex;flex-shrink:0;align-items: center;width:230px;margin-left: 20px;padding: 0 30px 0 50px;font-size: 1.9rem;font-weight: 600;box-sizing: border-box;border: 1px solid #f5f5f5;background: #f5f5f5;}
.dist_intro dl dd{flex-grow:1;border:1px solid #dfdfdf;padding: 30px;}



/*유통단지 현황*/
.situ_list{display:flex;flex-wrap: wrap;gap:20px;}
.situ_list > li{position:relative;width: calc(33.333% - 14px);border: 1px solid #dfdfdf;padding: 90px 25px 25px;text-align: center;box-sizing: border-box;}
.situ_list > li:before{content:"";position:absolute;width: 46px;height: 44px;left:50%;top: 25px;margin-left: -23px;background-size:cover;background-repeat:no-repeat;}
.situ_list > li.icon01:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_situ01.gif);}
.situ_list > li.icon02:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_situ02.gif);}
.situ_list > li.icon03:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_situ03.gif);}
.situ_list > li.icon04:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_situ04.gif);}
.situ_list > li.icon05:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_situ05.gif);}
.situ_list > li.icon06:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_situ06.gif);}
.situ_list > li p{font-weight:700;font-size: 1.9rem;}
.situ_list > li span{display: inline-block;color: #555;padding-top: 10px;}
.situ_list > li span.type2{display:flex;text-align: left;padding-left:50px;}
.situ_list > li span.type2 em{padding-left:5px;}
.situ_list > li span strong{color: #222;}
.situ_list > li span strong:nth-child(n+2){display: inline-block;margin-top: 10px;}
.situ_purpose_wrap{background: url(/nanum/site/builder/dir/main/img/menu4845/arw_situ.gif) no-repeat 50% 85px;}
.situ_purpose_wrap .situ_purpose{display:flex;flex-wrap:wrap;gap:15px;}
.situ_purpose_wrap .situ_purpose li{flex: 1;text-align: center;padding: 15px 0;border: 1px solid #d9e0ed;background: #f4f8ff;}
.situ_purpose_wrap p{position:relative;width: 400px;line-height: 55px;font-size:2.3rem;font-weight:300;text-align: center;margin: 120px auto 0;}
.situ_purpose_wrap p:before,
.situ_purpose_wrap p:after{content:"";position:absolute;width:25px;height:55px;background-size:cover;background-image:url(/nanum/site/builder/dir/main/img/menu4845/line_situ.gif);}
.situ_purpose_wrap p:before{left:0;}
.situ_purpose_wrap p:after{right:0;transform: rotate(180deg);}
.situ_history dl{display:flex;padding: 10px 0;}
.situ_history dl:nth-child(n+2){/* border-top: 1px solid #ededed; */}
.situ_history dl dt{flex-shrink:0;width: 160px;font-weight:700;color:#fff;padding: 10px 0;border-radius: 30px;letter-spacing: 0;text-align: center;}
.situ_history dl:nth-child(odd) dt{background: #2b3ecf;}
.situ_history dl:nth-child(even) dt{background: #0b9b6e;}
.situ_history dl dd{display: flex;align-items: center;flex-grow: 1;padding-left:20px;border-bottom: 1px solid #ededed;}


/*단지별안내*/
.comp_bx{position: relative;padding: 50px 40px 50px 220px;border-bottom: 1px solid #dfdfdf;background-size: 120px auto !important;}
.comp_bx:before{content:"";position:absolute;left:0;top:0;width: 160px;height:2px;background: #2c5ae1;}
.comp_bx:after{content:"";position:absolute;left:0;top:0;width: 2px;height: 70px;background: #2c5ae1;}
.comp_bx.icon01{background: url(/nanum/site/builder/dir/main/img/menu4845/iconbx_comp01.png) no-repeat 50px 50%;}
.comp_bx.icon02{background: url(/nanum/site/builder/dir/main/img/menu4845/iconbx_comp02.png) no-repeat 50px 50%;}
.comp_bx.icon03{background: url(/nanum/site/builder/dir/main/img/menu4845/iconbx_comp03.png) no-repeat 50px 50%;}
.comp_bx.icon04{background: url(/nanum/site/builder/dir/main/img/menu4845/iconbx_comp04.png) no-repeat 50px 50%;}
.comp_bx.icon05{background: url(/nanum/site/builder/dir/main/img/menu4845/iconbx_comp05.png) no-repeat 50px 50%;}
.comp_bx.icon06{background: url(/nanum/site/builder/dir/main/img/menu4845/iconbx_comp06.png) no-repeat 50px 50%;}
.comp_bx p{font-weight: 700;font-size: 3rem;}
.comp_bx span{display: inline-block;color: #555;margin-top: 20px;}
.comp_list{display:flex;flex-wrap: wrap;justify-content: space-between;border-top:2px solid #222;}
.comp_list dl{display: flex;position: relative;width: calc(50% - 20px);padding: 40px 0 40px 60px;box-sizing: border-box;border-bottom: 1px solid #dfdfdf;}
.comp_list dl:before{content:"";position:absolute;left: 0;top: 30px;width:45px;height:45px;border-radius:100%;background-repeat: no-repeat;background-color:#f3f7ff;background-size:27px auto;background-position: 50%;}
.comp_list dl.icon01:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_comp01.png);}
.comp_list dl.icon02:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_comp02.png);}
.comp_list dl.icon03:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_comp03.png);}
.comp_list dl.icon04:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_comp04.png);}
.comp_list dl.icon05:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_comp05.png);}
.comp_list dl.icon06:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_comp06.png);}
.comp_list dl.icon07:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_comp07.png);}
.comp_list dl.icon08:before{background-image:url(/nanum/site/builder/dir/main/img/menu4845/icon_comp08.png);}
.comp_list dl dt{flex-shrink: 0;width: 90px;font-weight:700;font-size:1.8rem;}
.comp_list dl dd{color:#333;}
.comp_list dl.icon08 dd a{display: block;width: 80px;color: #fff;padding: 10px 40px 10px 15px;margin-top: 7px;background: #4156a6 url(/nanum/site/builder/dir/main/img/menu4845/btn_nlink.png) no-repeat 90% 50%;}
.comp_imglist{margin-top:70px;}
.comp_imglist .swiper-slide{position:relative;}
.comp_imglist .swiper-slide img{width:100%;border:1px solid #e2e2e2;box-sizing:border-box;}
.comp_imglist .swiper-slide p.ctit{position:absolute;bottom: 0;right:0;color: #6b6b6b;letter-spacing: 0;text-align: right;padding: 30px 0 30px 40px;background: white;}
.comp_imglist .swiper-slide p.ctit strong{display: block;font-size:3.5rem;color: #000;}
.comp_imglist ul.comp_conlist{display:flex;flex-wrap:wrap;border-bottom: 1px solid #000;padding: 10px 0 15px;}
.comp_imglist ul.comp_conlist li{position:relative;width:50%;padding-left: 13px;box-sizing: border-box;}
.comp_imglist ul.comp_conlist li:before{content:"";position:absolute;left:0;top: 12px;width:4px;height:4px;border-radius:100%;background:#000;}


/********************1280********************/
@media all and (max-width:1280px){

/*유통단지 소개*/
.dist_situ img{width:100%;}


/*유통단지 현황*/	
.situ_list > li span.type2{padding-left: 0;}

}




/********************태블릿********************/
@media all and (max-width:1024px){



}

/********************모바일********************/
@media all and (max-width:767px){

/*유통단지 소개*/
.intro{flex-direction: column;padding: 20px;text-align: center;}	
.intro p.tit{width:100%;padding-right:0;}
.intro p.txt{padding: 15px 0 0 0;margin-top: 10px;border-left: 0;border-top: 1px solid rgb(255 255 255 / 50%);}	
.dist_intro p.intro_tit{margin-top: 40px;line-height: 1.2;padding: 15px 20px;box-sizing: border-box;background: #d4ecff;}
.dist_intro p.intro_tit:before{display:none;}
.dist_intro dl{flex-direction: column;gap: 10px;margin-top: 50px;}
.dist_intro dl:after{top: 0;left: 50%;margin-left: -25px;}
.dist_intro dl dt{justify-content: center;width: 100%;margin-left: 0;padding: 20px;}
.dist_intro dl dd{padding:20px;}


/*유통단지 현황*/
.situ_list{gap:10px;}
.situ_list > li{width: 100%;padding:10px 20px 10px 70px;text-align: left;}
.situ_list > li:before{top: 50%;left: 20px;width: 30px;height: 29px;margin: -14.5px 0 0 0;}
.situ_list > li span{padding-top:0;}
.situ_purpose_wrap .situ_purpose li{flex:1 1 46%;}
.situ_purpose_wrap{background-position: 50% 210px;background-size: 80px auto;}
.situ_purpose_wrap p{width:100%;margin-top:70px;}
.situ_history dl dt{display: flex;align-items: center;justify-content: center;width:130px;border-radius: 40px;}
.situ_history dl dd{padding-bottom:10px;}


/*단지별안내*/
.comp_bx{padding: 110px 10px 30px;background-position: 50% 30px !important;background-size: 80px auto !important;}
.comp_bx p{text-align: center;margin-top: 15px;}
.comp_bx span{margin-top:10px;}
.comp_list{flex-direction: column;}
.comp_list dl{width:100%;padding: 20px 0 20px 50px;}
.comp_list dl:before{top: 14px;width: 35px;height: 35px;background-size: 22px auto;}
.comp_list dl dt{width: 75px;}
.comp_imglist{margin-top: 50px;}
.comp_imglist .swiper-slide img{width:99.9%;}
.comp_imglist .swiper-slide p.ctit{position: relative;padding:10px;margin-top: -5px;background: #f5f5f5;}


}

/********************웹********************/
@media all and (min-width:1025px) {

/*유통단지 소개*/	
.dist_intro dl:hover dt{border:1px solid #3e3e3e;}
.dist_intro dl:hover dd{background: #f6f8fa;}

/*단지별 안내*/
.comp_list dl.icon08 dd a:hover{background:#263777 url(/nanum/site/builder/dir/main/img/menu4845/btn_nlink.png) no-repeat 90% 50%;}	

/*유통단지현황*/		
.situ_history dl dd:hover{border-bottom:1px solid #000;}
.situ_list > li:hover{box-shadow:6px 10px 13px 7px rgb(11 49 72 / 10%);border:1px solid #b1cde4;transition-duration:0.3s;}
	
	
}