@charset "utf-8";

header{border-bottom:1px solid #000}
#detail_con{padding:40px 0px 60px; color:#484848; min-height:600px}
#detail_con>h4{background-image:url(../img/sub/bl.gif); background-position:left 0px; color:#102256; line-height:130%}
#detail_con>h4 .describe{display:inline-block; font-size:.7em}
#lmenu h2{background:#0a59ba}
#lmenu>ul>li{position:relative}
#lmenu>ul>li.on{border-color:#2d85d0}
/* #lmenu>ul>li.on:after,
#lmenu>ul>li.on:before{display:block; content:''; position:absolute; right:20px; top:27px; width:12px; height:3px; background:#fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); z-index:1}
#lmenu>ul>li.on:after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg); margin-top:7px} */
#lmenu>ul>li.on>a{background:#2d85d0; font-weight:bold}
#lmenu>ul>li>ul>li.on{border-color:#194881}
#lmenu>ul>li>ul>li.on>a{color:#194881; font-weight:bold}
#lmenu>ul>li>ul>li.on>a:before{background:#194881}
.bl02{position:relative; padding-left:24px; background:none}
.bl02:before,
.bl02:after{display:block; content:''; position:absolute; left:0px; width:8px; height:8px}
.bl02:before{top:7px; background:#0a59ba; box-shadow:9px 0px 0px 0px #2d85d0}
.bl02:after{top:16px; background:#194881; box-shadow:9px 0px 0px 0px #0a59ba}
.bl03{margin-left:10px}
.bl03>p{padding-left:17px}
.bl03>p:before{top:8px; border-width:4px; width:5px; height:5px; border-color:#8392a5 #8392a5 #5a6b80 #5a6b80}
table.data thead th{line-height:130%}
table.data th, table.data td{padding-left:1%; padding-right:1%}

.tbox>.bl02+.bl04 {margin:20px 0 0 20px;}

/*** contents ***/
.halfCon{overflow:hidden}
.halfCon>div{float:right; width:46%}
.halfCon>div:first-child{float:left}
/* 제픔홍보관 */
.program_tab{margin-bottom:20px}
.product{overflow:hidden; padding-bottom:20px; border-top:2px solid #333; border-bottom:1px solid #ddd}
.product>li{float:left; margin:20px 1% 1%; width:23%}
.product>li p.img{height:210px; overflow:hidden}
.product>li p.img img{width:100%; min-height:210px}
.product>li p.company{margin-top:10px; font-size:13px; color:#7f8d9f; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.product>li p.name{margin-top:5px; height:40px; overflow:hidden}
.product>li .price{display:none; overflow:hidden}
.product>li .price>p{display:block; float:left}
.product>li .price>p.off{margin-right:10px; font-weight:bold; color:#7f8d9f; font-style:italic; font-size:32px; }
.product>li .price>p.off span{font-size:22px}
.product>li .price>p.pay{padding-top:5px; font-size:17px; line-height:16px; font-weight:bold}
.product>li .price>p.pay span{display:block; text-decoration:line-through; font-size:13px; font-weight:normal}
.product_view:after{display:block; content:''; clear:both}
.product_view div.photo{float:left; width:45%}
.product_view div.photo ul{position:relative; overflow:hidden; padding-top:365px; text-align:center}
.product_view div.photo ul li{display:inline; font-size:0px}
.product_view div.photo ul li p.thumb{display:inline-block; margin:3px 2px; width:15%; max-width:50px; overflow:hidden; z-index:1}
.product_view div.photo ul li p.thumb img{width:100%; height:45px; border:3px solid #fff; box-sizing:border-box}
.product_view div.photo ul li p.thumb a.on img{border-color:#0a59ba}
.product_view div.photo ul li p.img{display:none; position:absolute; left:0px; top:0px; width:100%; height:420px; z-index:-1}
.product_view div.photo ul li:first-child p.img{display:block}
.product_view div.photo ul li p.img img{ position:relative; top:0; width:100%; height:420px}
.product_view div.photo ul li p.img:after{display:block; content:''; position:absolute; bottom:0px; width:100%; height:60px; background:#000; background:rgba(0,0,0,.3)}
.product_view div.info{position:relative; float:right; padding-bottom:20px; margin-bottom:0px; width:52%; min-height:420px; border-top:3px solid #1b1b1b; border-bottom:1px solid #aaa}
.product_view div.info div.name{padding:25px 15px; border-bottom:1px dashed #e1e1e1}
.product_view div.info div.name p.tit{margin-top:5px; font-weight:bold; font-size:26px; color:#333; letter-spacing:-1px; line-height:130%}
.product_view div.info div.price{display:none; overflow:hidden; padding:15px 15px 10px; border-bottom:1px solid #aaa; letter-spacing:-1px}
.product_view div.info div.price p.off{float:left; font-weight:bold; font-size:50px; color:#7f8d9f; line-height:100%}
.product_view div.info div.price p.off span{font-size:25px}
.product_view div.info div.price>div{float:left; margin-left:10px}
.product_view div.info div.price>div p{line-height:120%}
.product_view div.info div.price>div p.price1{font-size:16px; text-decoration:line-through}
.product_view div.info div.price>div p.price2{font-weight:bold; font-size:28px}
.product_view div.info p.txt{padding:20px 20px 0px; font-size:14px; line-height:140%; word-break:keep-all}
.product_view div.info ul.list{padding:20px 20px 0px}
.product_view div.info ul.list li{position:relative; padding-left:10px; min-height:23px;  color:#484848; font-size:14px}
.product_view div.info ul.list li:after{display:block; content:''; position:absolute; left:0px; top:9px; width:5px; height:1px; background:#aaa}
.product_btn{margin-top:30px; text-align:right}
/* 데일리해피메일 */
.happymail{position:relative; padding:4.5% 5% 5%; background:#bed0e4 url(/support/img/sub/happymail_bg.jpg) no-repeat left bottom; overflow:hidden}
.happymail>dl{float:left; margin-left:1%; width:45%}
.happymail>dl dt{position:relative; margin-top:20px; font-family:'IropkeBatangM','Batang'; font-size:2.53em; color:#102256; text-shadow:0px 1px 2px rgba(0,0,0,.2)}
.happymail>dl dt:after{display:block; content:''; margin:10% 0px; width:15%; height:3px; background:#102256}
.happymail>dl dd{font-size:1.2em; line-height:150%}
.happymail>ul{float:right; width:52%}
.happymail>ul>li{margin-top:10px; padding:0px 25px; background:#fff; box-shadow:0px 1px 2px rgba(0,0,0,.4)}
.happymail>ul>li>dl{position:relative; padding:15px 0px; padding-left:100px; }
.happymail>ul>li>dl+dl{border-top:1px dashed #ccc}
.happymail>ul>li>dl dt{position:absolute; left:0px; top:17px; color:#666; width:100px}
.happymail>ul>li>dl dd{text-align:right; width:100%}
.happymail>ul>li>dl dd input[type=password],
.happymail>ul>li>dl dd input[type=text]{text-align:right; width:100%; height:24px; line-height:24px; border:0px; font-weight:bold; color:#333; font-size:1em; background:transparent}
.happymail>ul>li>dl dd label{vertical-align:middle; margin-right:20px; font-weight:bold; color:#333}
.happymail>ul>li>dl dd label:last-child{margin-right:0px}
.happymail>ul>li>dl.mail dd{white-space:nowrap}
.happymail>ul>li>dl.mail dd input[type=text]{text-align:center; width:47%; letter-spacing:2px}
.happymail>ul>li>dl.mail dd input:focus{letter-spacing:0px}
.happymail p.happymail_btn{position:absolute; bottom:6.5%; left:16%}
.happymail p.happymail_btn input{padding:10px 35px 15px; padding-right:65px; background:#102256 url(/support/img/sub/happymail_ic.gif) no-repeat right 30px center; color:#fff; font-size:20px; font-weight:bold; border:0px; box-shadow:0px 1px 2px rgba(0,0,0,.4)}
/* 인사말 */
.greeting{position:relative; padding:10px; padding-right:52%; min-height:470px; background:url(/support/img/sub/greeting.jpg) no-repeat right center; background-size:51.34%}
.greeting .tit{font-size:2em; font-family:'IropkeBatangM','Batang'; color:#194881}
.greeting .tit p:first-child{color:#0a59ba}
.greeting .tit span{font-weight:bold; font-size:1.1em}
.greeting .txt{margin-top:40px}
.greeting .txt p{margin-top:20px}
.greeting p.name{position:absolute; top:27%; right:38%; text-align:right; font-size:1.14em; font-family:'IropkeBatangM','Batang'}
.greeting p.name span{display:block; font-size:1.2em; font-weight:bold}
/* 남동구 공장등록 현황 */
.factory_list{margin-top:10px; border-top:2px solid #5a6b80; border-bottom:1px solid #ccc; overflow:hidden}
.factory_list>li{position:relative; bottom:-1px; float:left; padding:20px; width:50%; min-height:195px; border-bottom:1px dashed #ccc}
.halfCon .factory_list>li{width:100%}
.factory_list>li p.img{position:absolute; left:15px; top:20px}
.factory_list>li dl{padding:8px 0px 0px; padding-left:155px}
.factory_list>li dl dt{margin-bottom:15px; font-weight:bold}
.factory_list>li dl dd ul li{margin:3px 0px; font-size:0.9em}
.factory_list02{margin-top:10px; overflow:hidden}
.factory_list02>li{position:relative; float:left; margin:.5%; padding:20px; width:49%; min-height:140px; background:#f0f0f0}
.factory_list02>li p.img{position:absolute; left:20px; top:17px}
.factory_list02>li p.img img{border:3px solid #fff; box-shadow:0px 0px 0px 1px rgba(0,0,0,.1)}
.factory_list02>li dl{position:relative; padding:5px 0px 20px; padding-left:192px}
.factory_list02>li dl dt{margin-bottom:10px; font-weight:bold}
.factory_list02>li dl dd ul li{margin:3px 0px; font-size:0.9em}
.factory_list02>li p.part{position:absolute; right:20px; bottom:15px; font-size:13px; font-weight:bold}
.factory_list02>li p.part span{display:inline-block; padding:0px 3px 1px; width:70px}
/* .state{padding-right:380px; background:url(/support/img/sub/state_img.jpg) no-repeat right center} */
.state{position:relative; padding:4% 5%; background:#d5edf4 url(/support/img/sub/state_bg.jpg) no-repeat center bottom; min-height:390px}
.state:after{display:block; content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; border:1px solid rgba(0,0,0,.1); box-sizing:border-box}
.state p.tit{font-size:2.3em; font-family:'IropkeBatangM','Batang'; color:#102256}
.state ul.legend{margin-top:25px; margin-right:250px}
.state ul.legend li{display:inline-block; margin-top:5px; padding:5px 5px 7px 30px; width:125px; background-color:#fff; background-repeat:no-repeat; background-position:12px 8px; font-size:14px; box-shadow:0px 1px 2px rgba(0,0,0,.2)}
.state ul.legend li.legend01{background-image:url(/support/img/sub/state_legend01.gif)}
.state ul.legend li.legend02{background-image:url(/support/img/sub/state_legend02.gif)}
.state ul.legend li.legend03{background-image:url(/support/img/sub/state_legend03.gif)}
.state ul.legend li.legend04{background-image:url(/support/img/sub/state_legend04.gif)}
.state ul.legend li.legend05{width:160px; background-image:url(/support/img/sub/state_legend05.gif)}
.state ul.legend li.legend06{background-image:url(/support/img/sub/state_legend06.gif)}
.state ul.legend li.legend07{background-image:url(/support/img/sub/state_legend07.gif)}
.state p.map{position:absolute; top:14%; right:6%; text-align:center; padding-top:30px; width:220px; height:280px; background:#fff; box-shadow:0px 1px 2px rgba(0,0,0,.1)}
/* 마이페이지 */
.findpw{text-align:center; margin:auto; padding:70px 30px; padding-top:300px; width:90%; max-width:560px; background:url(/support/img/sub/findpw.jpg) no-repeat center 50px; border:5px solid #eee}
.findpw p{margin-top:5px; font-size:17px}
.findpw p:first-child:before{display:block; content:''; margin-left:45%; margin-bottom:25px; width:10%; height:6px; background:#ccc; border-radius:10px; box-shadow:inset 1px 1px 1px rgba(0,0,0,.3)}
.findpw p span.wfont{color:#102256; text-decoration:underline}
.check{text-align:center; margin:auto; padding:70px 30px; padding-top:300px; width:90%; max-width:560px; background:url(/support/img/sub/check.gif) no-repeat center 50px; border:5px solid #eee}
.check p{margin-bottom:15px; font-size:17px}
.check p:first-child:before{display:block; content:''; margin-left:45%; margin-bottom:20px; width:10%; height:6px; background:#ccc; border-radius:10px; box-shadow:inset 1px 1px 1px rgba(0,0,0,.3)}

#sitemap>div>p {background:#2d85d0;}
#sitemap>div:nth-child(4) {min-height:410px;}

.tglPwd>input {padding-right:30px;}
.tglPwd .btn_tglPwd {top:0;}
.btn_tglPwd {width:25px;}

.factory_complex {position:relative; overflow:hidden; text-align:right; padding:10px; max-height:551px; border:1px solid #ddd; background:#f3f3f3 url('/main/img/contents/factory_complex_bg.gif') 0 0 no-repeat;}
.factory_complex .caption {position:absolute; bottom:30px; left:60px; width:390px;}
.factory_complex .caption .tit {text-align:center; margin-bottom:20px; padding-top:10px; padding-bottom:10px; color:#1053a8; font-size:16px; font-weight:600; border:1px solid #ddd; background-color:#fff}
.factory_complex .caption li {position:relative; float:left; text-align:left; margin-top:2%; padding-bottom:2px; padding-left:50px; width:48%;}
.factory_complex .caption li:before {content:''; position:absolute; left:0; top:0; width:40px; height:19px; border-style:solid; border-width:1px; box-sizing:border-box;}
.factory_complex .caption li:nth-child(odd) {margin-right:2%;}
.factory_complex .caption li:nth-child(1):before {color:#88b3b4; background-color:#91f4f2;}
.factory_complex .caption li:nth-child(2):before {color:#d7ba28; background-color:#e9d11d;}
.factory_complex .caption li:nth-child(3):before {color:#34305c; background-color:#1747e8;}
.factory_complex .caption li:nth-child(4):before {color:#cc769c; background-color:#9c4f9b;}
.factory_complex .caption li:nth-child(5):before {color:#ae791d; background-color:#e17719;}
.factory_complex .caption li:nth-child(6):before {color:#a12529; background-color:#e6174b;}
.factory_complex .caption li:nth-child(7):before {color:#487428; background-color:#18ea1a;}
.factory_complex img {padding:3%; border:1px solid #ddd; background-color:#fff;}

/*******************************************************************************************************************/

@media screen and (max-width:800px){	
	.halfCon>div{float:none; width:100%}
	.halfCon>div:first-child{float:none}
	.product>li{width:48%}
	.product_view:after{display:block; content:''; clear:both}
	.product_view div.photo{float:none; margin-left:10%; width:80%}
	.product_view div.info{float:none; margin-top:20px; width:100%; min-height:auto}
	.happymail{padding:4% 2%; background:none}
	.happymail>dl{float:none; text-align:center; margin-left:0%; width:100%}
	.happymail>dl dt{margin-top:0px; font-size:2.3em; text-shadow:none}
	.happymail>dl dt:after{margin:5% 0px; margin-left:43%}
	.happymail>dl dd{margin-top:10px; font-size:1em}
	.happymail>ul{float:none; margin-top:20px; width:100%; border-top:2px solid #102256}
	.happymail>ul>li{padding:0px; margin:0px; box-shadow:none; border-bottom:1px solid #333}
	.happymail>ul>li>dl dt{left:5px}
	.happymail p.happymail_btn{position:static; text-align:center; margin-top:20px}
	.greeting{padding:10px; background-position:right top 40%}
	.greeting .txt{padding-right:54%;}
	.greeting p.name{position:static; text-align:left; margin-top:20px}
	.greeting p.name span{display:inline-block; margin-left:10px}
	.factory_list>li{width:100%}
	.factory_list02>li p.img{position:static; text-align:center}
	.factory_list02>li dl{padding:15px 5px; min-height:130px}
	.factory_list02>li p.part{left:20px; bottom:15px}
	/* .state{padding:250px 0px 0px; background-position:center 10px} */
	.state{padding:8%; padding-bottom:190px}
	.state .con{background:#fff;  margin-top:20px; padding:10px}
	.state p.map{position:static; padding:0px; width:100%; height:auto; box-shadow:none}
	.state ul.legend{margin-right:0px; text-align:left}
	.state ul.legend li{margin:0px; padding:1px 2px 3px 30px; width:auto !important; box-shadow:none}
	.findpw p{font-size:15px}
}

@media screen and (max-width:480px){
	.product{margin-top:20px}
	.product>li{position:relative; margin:0px; padding-left:140px; width:100%; min-height:130px; border-bottom:1px solid #ddd}
	.product>li p.img{position:absolute; left:10px; top:10px; width:110px; height:110px;}
	.product>li p.img img{min-height:110px}
	.product>li p.name{height:auto; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
	.product>li .price{margin-top:5px}
	.product_view div.photo ul{padding-top:285px}
	.product_view div.photo ul li p.img{height:340px}
	.product_view div.photo ul li p.img img{height:340px}
	.greeting{background-position:right 10px top 10px}
	.greeting .tit{padding-right:54%; font-size:1.6em}
	.greeting .txt{padding-right:0%;}
}