@charset "utf-8";
/*메인비주얼 슬라이드*/
.main-slide, .main-slide .slide {position:relative;margin-top: 62px}
.main-slide .slide .item {background-repeat:no-repeat; background-position:50% 0; background-size:cover}
.main-slide .slide .item a {position:relative; display:block; height:800px; overflow:hidden}
.main-slide .slide .item a img.pc {position:absolute; top:0; left:50%; margin:0 0 0 -1171px;display:block; width:2290px;max-width:2290px}
.main-slide .slide .item a img.mobile {display:none}
.main-slide .bx-controls-direction > a {position:absolute; top:50%; width:21px; height:36px; background-position:50% 50%; text-indent:-9999px}
.main-slide .bx-controls-direction > a.bx-prev {background-image:url('/images/main/slide_prev.png'); left:50%; margin:0 0 0 -605px}
.main-slide .bx-controls-direction > a.bx-next {background-image:url('/images/main/slide_next.png'); right:50%; margin:0 -605px 0 0}
.main-slide .dots {position:absolute; bottom:94px; left:0; width:100%; text-align:center; height:12px}
.main-slide .dots .dot {display:inline-block; margin:0 3px; padding:1px 0 0}
.main-slide .dots .dot span {display:block; width:12px; height:12px; background-color:#fff; border-radius:6px}
.main-slide .dots .dot.active span {width:38px; background-color:#fd5648}
.main-slide .play {display:inline-block; width:12px; height:14px; margin:0 3px; background-position:50% 50%; background-repeat:no-repeat; background-image:url('/images/main/icon_play_M.png'); z-index:9; background-size:10px 14px; z-index:9; display:none}
.main-slide .stop {display:inline-block; width:12px; height:14px; margin:0 3px; background-position:50% 50%; background-repeat:no-repeat; background-image:url('/images/main/slide_stop.png'); z-index:9}
.main-brn {padding:20px 0; background-color:#f6f7fa}
.main-brn > .inner {width:1100px; overflow:hidden; margin:0 auto; text-align:center}
.main-brn > .inner > div {position:relative; width:540px; display:inline-block; margin:0 4px}
.main-brn > .inner > div img {display:block; width:100%}

#bbs_wrap {background: url('/images/main/bbs_bg.gif') no-repeat center/cover}
#bbs_wrap > article {max-width:1180px;margin:0 auto;padding: 50px 0 20px 0}
#bbs_wrap > article > ul {margin-left:-30px}
#bbs_wrap > article > ul > li {float:left;width:25%}
#bbs_wrap > article > ul > li dl {padding-left: 30px}
#bbs_wrap > article > ul > li dt {color: #fff;font-size: 1.3em;font-weight: 600;padding-bottom: 10px}
#bbs_wrap > article > ul > li:last-child dd {border-right: none}
#bbs_wrap > article > ul > li dd {font-size: 0.9em;line-height: 2;border-right: 1px solid rgba(255,255,255,0.3);padding-right: 21px}
#bbs_wrap > article > ul > li dt > a {background: url('/images/common/more.png') no-repeat 0;display: inline-block;text-indent: -999em;width: 16px;height: 16px;float: right;margin-top: 7px;margin-right: 17px}
#bbs_wrap > article > ul > li > dl > dd > ul > li > a {color: #fff;position: relative;padding-left: 11px;display: inline-block;width: 100%;overflow: hidden;overflow-wrap: normal;text-overflow: ellipsis;white-space: nowrap}
#bbs_wrap > article > ul > li > dl > dd > ul > li > a:before {background-color: #fff;content: "";height: 3px;left: 0;position: absolute;top: 6px;width: 3px;display: inline-block}

#content_wrap {max-width:1180px;margin:0 auto;text-align:center;opacity:0;padding-top: 80px;position:relative;margin-top: -70px}
#content_wrap h3 {color: #1b1b1b;font-size: 3.1em;letter-spacing: -2px;font-weight: 800;padding: 31px 0 81px;font-family: NanumSquare}
#content_wrap h3:before {content: '';position: absolute;top: 94px;left: 50%;width: 100px;height: 2px;background-color: #000;margin-left: -51px}
#content_wrap h3 span {color: #9d9c9c;display: block;font-size: 0.60em;font-weight: 400;letter-spacing: 0}
.content_box {background-color: #fff}
.content_box:after {content:' ';display:block;clear:both}
.content_box_item {float: left;width: 50%;padding-top: 60%;position:relative}
.content_box_item:hover {}
.content_box_item.right {padding-top: 20%}
.content_box_item.right:nth-child(1) {background-color: #479edc}
.content_box_item.right:nth-child(2) {background-color: #668de2}
.content_box_item.right:nth-child(3) {background-color: #36aac7}
.content_box_item.right:nth-child(4) {background-color: #797edc}
.content_box_item.right:nth-child(5) {background-color: #27b0a0}
.content_box_item.right:nth-child(6) {background-color: #479edc}
.content_box_item.right > div > ul {overflow:hidden}
.content_box_item.right > div > ul a {display: inline-block;width: 100%;height: 100%;position: absolute;background-color: rgba(0,0,0,0.5);top: 100%;left: 0;opacity: 0}
.content_box_item.right > div > ul a:before {content: "GO";height: 50px;left: 50%;position: absolute;top: 50%;width: 50px;display: inline-block;transform: translate(-50%, -50%);line-height: 3.2;color: #fff;font-weight: 600;border: 2px solid ;border-radius: 100%}
.content_box_item.right > div > ul:hover a {opacity:1;top:0;}
.content_box_item.right > div > ul > li {width:50%;float:left;overflow:hidden}
.content_box_item.right > div > ul > li.text {padding: 20px;text-align: left}
.content_box_item.right > div > ul > li > strong {color: #fff;font-size: 1.3em;font-weight: 600;display: inline-block;position:relative}
.content_box_item.right > div > ul > li > strong:after{content: 'JOYWELL PRODUCT';position: absolute;font-size: 0.59em;display: inline-block;width: 115px;opacity: 0.7;top: 27px;left: 0}
.content_box_item.right > div > ul > li > p {margin-top: 23px;position: relative;padding-top: 20px;color: #fff;line-height: 1.6;font-size: 0.95em}
.content_box_item.right > div > ul > li > p:before {position: absolute;content: '';width: 49px;height: 1px;background-color: #fff;top: 6px;left: 0}
.content_box_item.right > div > ul > li img {max-width:100%}
.content_box_item.right > div > ul > li.bg000 {background-color:#fff}
.content_box_item > div {position:absolute;left:0;top:0;right:0;bottom:0;color:#fff;overflow:hidden}
.content_box_item > div > img {position:absolute;left:0;top:0;z-index:2;max-width:100%;height: 100%;opacity: 0.4}
.content_box_item .text_list {z-index: 3;color: #fff;margin: 3%;border: 1px solid rgba(255,255,255,0.2);padding: 32px;position: absolute;top: 0;right: 0;left: 0;bottom: 0;font-size: 14px}
.content_box_item .text_list > strong {font-size: 1.9em;font-weight: 600;background-color: rgba(0,0,0,0.5);padding: 9px 20%;display: inline-block;color: #ff5b48}
.content_box_item .text_list > p {}
.content_box_item .text_list > p > strong {display: block;font-size: 1.3em;margin-top: 68px;color: #ffc417;font-weight: 600}
.content_box_item .text_list > p > span {display: block;margin: 50px 0;font-size: 1.2em;text-decoration: underline;line-height: 1.7}
.content_box_item .text_list > p > em {}
.content_box_item .text_list > p > a {color: #fff;display: inline-block;border: 1px solid rgba(255,255,255,0.4);padding: 15px 0;margin-top: 51px;font-weight: 600;font-size: 1.2em;width: 80%}

.quick {position: fixed;top: 50px;right: 50%;margin-right:-717px;width: 98px;display:none}
.quick li {}
.quick li a {display: inline-block;background: #3b5998 url('/images/main/sns.png') no-repeat 10px 9px;text-indent: -999em;width: 43px;height: 43px;margin-bottom: 10px;border-radius: 100%}
.quick li a.twi {background-color: #eaeaea;background-position: 10px -43px}
.quick li a.blo {background-color: #2db400;background-position: 10px -93px}
.quick li a.You {background-color: #e32c24;background-position: 10px -144px}

.mobile {display:none}

.pagedown {position: relative;display: inline-block;border: 1px solid;transform: translate(-50%);width: 61px;height: 61px;left: 50%;bottom: -50px;border-radius: 100%;border: 4px solid #fff;background: #fc4438 url('/images/common/down.png') no-repeat center 20px;text-indent: -999em}

.pagedown.d02 {position: absolute;background: #e9e9e9 url('/images/common/down02.png') no-repeat center 20px;top: -32px}
.pagedown.d03 {position: absolute;top: -130px;background: #e9e9e9 url('/images/common/down02.png') no-repeat center 20px}

#content_wrap02 {width: 100%;background-color: #e9e9e9;position: relative;margin-top: 120px;opacity:0;background: url(/images/main/content_wrap02_bg.gif) no-repeat center / cover}
#content_wrap02 > div {max-width:1180px;margin:50px auto 0;text-align:center;padding: 100px 0 160px}
#content_wrap02 > div h3 {color: #fff;font-size: 3.1em;letter-spacing: -2px;font-weight: 800;padding: 31px 0 81px;font-family: NanumSquare}
#content_wrap02 > div h3:before {content: '';position: absolute;top: 114px;left: 50%;width: 100px;height: 2px;background-color: #fff;margin-left: -51px}
#content_wrap02 > div h3 span {color: rgba(255,255,255,0.7);display: block;font-size: 0.55em;font-weight: 400;letter-spacing: 0}
#content_wrap02 > div ul {overflow:hidden}
#content_wrap02 > div ul li {width:33.3333%;float:left;padding: 0 30px}
#content_wrap02 > div ul li a {display: inline-block;width: 280px;border: 14px solid rgba(255, 255, 255, 0.1);border-radius: 100%;font-size: 1.4em;font-weight: 600;height: 280px;padding-top: 178px;position:relative;background-color: rgba(255, 255, 255, 0.18);color: rgba(255,255,255,0.7)}
#content_wrap02 > div ul li a:hover {background-color: rgba(255,255,255,0.5);transform: rotateY(360deg)}
#content_wrap02 > div ul li a:before {background: url('/images/main/main_icon.png') no-repeat -757px 18px;content: "";height: 123px;left: 50%;position: absolute;top: 16px;width: 123px;margin-left: -60px}
#content_wrap02 > div ul li:nth-child(2) a:before {background-position: 5px 18px}
#content_wrap02 > div ul li:nth-child(3) a:before {background-position: -375px 18px}

#content_wrap03 {background-color: #ededed;opacity:0;padding: 100px 0}
#content_wrap03 > div {max-width: 1024px;position: relative;margin: 0px auto;text-align:center}
#content_wrap03 > div > h3 {color: #1b1b1b;font-size: 3.1em;letter-spacing: -2px;font-weight: 800;padding: 31px 0 81px;font-family: NanumSquare}
#content_wrap03 > div > h3:before {content: '';position: absolute;top: 13px;left: 50%;width: 100px;height: 2px;background-color: #000;margin-left: -51px}
#content_wrap03 > div > h3 span {color: #9d9c9c;display: block;font-size: 0.55em;font-weight: 400;letter-spacing: 0}

.tab-list {font-weight: normal;list-style: outside none none;margin: 0;padding: 0;position: relative}
.tab-list:after, .tab-list:before {content:"";display: table}
.tab-list:after {clear: both}
.tab-list > li {float: left}
.tab-list {display: table;table-layout: fixed;width: 100%}
.tab-list > li {display: table-cell;float: none;height: 100%;text-align: center;vertical-align: middle;width: 100%;position: relative}
.tab-list > li > .menu {border-color: #4d3a2a #4d3a2a currentcolor;border-image: none;border-style: solid solid none;border-width: 1px 1px 0;display: block;margin-left: -1px;position: relative;text-decoration: none}
.tab-list > li > .menu:after {background-color: #4d3a2a;bottom: 0;content:"";display: block;height: 1px;left: 0;overflow: hidden;position: absolute;transition: all 0.4s ease 0s;width: 100%}
.tab-list > li > .menu span {color: #868686;display: block;font-size: 1.3em;font-weight: 600;height: 56px;line-height: 56px;position: relative;transition: all 0.2s ease 0s}
.tab-list > li > .more {background: url('/images/common/more.gif') no-repeat 0 0;display: inline-block;height: 19px;right: 17px;position: absolute;width: 19px;text-indent: -999em;top: 20px;opacity:0.5;z-index: 10}
.tab-list > li.on > .more {opacity:1}
.tab-list > li.on > .menu, .tab-list > li > .menu:hover, .tab-list li .menu:focus {z-index: 1}
.tab-list > li.on > .menu:after, .tab-list > li > .menu:hover:after, .tab-list > li > .menu:focus:after {width: 0}
.tab-list > li.on > .menu span, .tab-list > li > .menu:hover > span, .tab-list > li > .menu:focus > span {color: #554a3f}
.tab-list > li.on > .menu span:after, .tab-list > li > .menu:hover > span:after, .tab-list > li > .menu:focus > span:after {width: 101%}

/**ptoto_gallery**/
.ptoto_gallery {overflow:hidden;margin-right: -10px;margin-left: -10px}
.ptoto_gallery > li {float:left;width:33.33333%;padding: 0 10px}
.ptoto_gallery > li > a {display: block;position:relative}
.ptoto_gallery > li > a img {max-width: 100%;max-height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)}
.ptoto_gallery > li p {margin-top:10px}
.ptoto_gallery > li p span {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;display: inline-block}
.ptoto_gallery > li div {height: 203px}
.ptoto_gallery > li div > span {height: 100%;display: block;position: relative}
.inquire {width: 70%;margin: 0 auto}
.inquire > li {padding: 5px 0}
.inquire > li > textarea {border: solid 1px #cbcbcb;height: 75px;line-height: 1.5;padding: 0 10px}
.inquire > li > textarea, .inquire > li > input {background-color:#ececec}
.view {border: 1px solid #d1cece;padding: 5px 7px;margin-right: 10px}


#content_wrap04 {max-width: 1180px;position: relative;margin: 100px auto;text-align:center;opacity:0}
#content_wrap04 > h3 {color: #1b1b1b;font-size: 3.1em;letter-spacing: -2px;font-weight: 800;padding: 31px 0 81px;font-family: NanumSquare}
#content_wrap04 > h3:before {content: '';position: absolute;top: 13px;left: 50%;width: 100px;height: 2px;background-color: #000;margin-left: -51px}
#content_wrap04 > h3 span {color: #9d9c9c;display: block;font-size: 0.55em;font-weight: 400;letter-spacing: 0}
#content_wrap04 > ul {overflow:hidden;padding: 0 70px}
#content_wrap04 > ul > li {width:33.3333%;float:left}
#content_wrap04 > ul > li > div {border-left: 1px solid #dbdbdb;font-weight: 600;height: 473px}
#content_wrap04 > ul > li > div .top_btn {font-size: 1.4em;display:block;position:relative;padding-top: 113px}
#content_wrap04 > ul > li > div .top_btn:hover:before {background: red url('/images/main/main_icon02.png') no-repeat; transform: rotateY(360deg)}
#content_wrap04 > ul > li > div .top_btn:before {background: #9e9e9e url('/images/main/main_icon02.png') no-repeat;content: "";height: 92px;left: 50%;position: absolute;top: 0;width: 92px;border-radius: 100%;margin-left: -45px}
#content_wrap04 > ul > li:nth-child(1) div .top_btn:before {background-position:29px center}
#content_wrap04 > ul > li:nth-child(2) div .top_btn:before {background-position:center}
#content_wrap04 > ul > li:nth-child(3) div .top_btn:before {background-position:-654px center}

#content_wrap04 > ul > li > div > strong {color: red;font-size: 1.32em;font-weight: 600}
#content_wrap04 > ul > li > div dl {margin-top: 20px;color: #4a4a4a;letter-spacing: -0.04em}
#content_wrap04 > ul > li > div dt {color: #040404}
#content_wrap04 > ul > li > div dd {margin-bottom: 9px}
#content_wrap04 > ul > li:last-child div {border-right: 1px solid #dbdbdb}
#content_wrap04 span.f-blue {color: #0a8bf8}


/*팝업*/
.pop-wrap {display: none;left: 50%;position: absolute;top: 0;z-index: 3;background-color: #fff}
#dimmed {background-color: #000;bottom: 0;display: none;left: 0;opacity: 0.7;position: fixed;right: 0;top: 0;z-index: 2}
.pop-wrap-inner header h2 {color: #fff;font-size: 20px;font-weight: 400;line-height: 1em;padding: 20px 30px}
.pop-close.heading {right: 30px;top: 20px}
.pop-close {background: url("/assets/images/common/ico_x.png") no-repeat left top;display: block;height: 16px;overflow: hidden;position: absolute;right: 12px;text-indent: -999em;top: 12px;width: 16px}
.pop-wrap-inner header {background-color: #2a3f54;min-height: 40px}
.pop-wrap-inner.map_pop {width: 800px}
.panel-body {padding:10px}
.panel-body > textarea {height: 200px;padding: 10px;line-height: 1.5}

@media screen and (max-width: 1770px){
	#main_wrap {height: 777px;padding: 0}
	
}
@media screen and (max-width: 1400px){
	#bbs_wrap > article {padding: 50px 3% 20px 3%}
	.popcon li {text-align: center}
	.notice,.event,.popup {height: auto}
	.open {display:none}
	.btnopen {display:none}
}
@media screen and (max-width: 1280px){
	#footer {height:auto}
	.main-slide, .main-slide .slide {margin-top: 53px}
	.content_box {margin: 0 2%}
	.content_box_item.right > div > ul > li > strong {font-size: 1.2em}
}
@media screen and (max-width: 1079px){
	.main-slide .slide .item a{ display:block;}
	.main-slide .bx-controls-direction>a{ display:none;}
	#content_wrap02 > div ul li {width:100%;padding-bottom:15px}
	.content_box_item .text_list p em {display:none}
	.content_box_item .text_list p span {margin: 10px 0}
	.content_box_item .text_list p a {margin-top: 11px}
	
}

@media screen and (max-width: 890px){
	#content_wrap03 > ul {padding:0 2%}
	#content_wrap03 > ul > li {width:100%}
	#content_wrap03 > ul > li > div {border-bottom:1px solid #dbdbdb;border-left:none;padding:20px 0;height:auto}
	#content_wrap03 > ul > li:last-child div {border-right:none}
	#bbs_wrap > article > ul > li {width:50%}
	#bbs_wrap > article > ul > li dl {margin-bottom: 30px;}
	#bbs_wrap > article > ul > li:last-child dd {border-right: 1px solid rgba(255,255,255,0.3)}

}	
@media screen and (max-width: 840px){
	.main-slide, .main-slide .slide {margin-top: 45px}

}
@media screen and (max-width: 833px){
	#footer .inner_wrap .bottom_logo {float: none;display: table;margin: 26px auto 0;text-align: center}
	#footer .inner_wrap address {float: none;text-align: center;margin-top: 12px}
}
@media screen and (max-width: 800px){
	#footer .inner_wrap .bottom_logo {float: none;display: table;margin: 26px auto 0;text-align: center}
	#footer .inner_wrap address {float: none;text-align: center;margin-top: 12px}
	#content_wrap04 > ul > li {width:100%}
	#content_wrap04 > ul > li > div,#content_wrap04 > ul > li:last-child div {border:none;height: auto;margin-bottom: 50px}
	.ptoto_gallery > li {width:50%}
	
}
@media screen and (max-width: 768px){
	
	.main-slide .slide .item a{ display:block; height:auto}
	.main-slide .slide .item a img.pc{ display:none}
	.main-slide .slide .item a img.mobile{ display:block; width:100%}
	.main-slide .bx-controls-direction>a{display:none}
	#main_wrap {padding-top: 78%;margin-top: 71px}
	.notice > ul {max-width: 360px}
	.notice {max-width: 360px}
	.content_box_item {width:100%;padding-top: 100%}
	.content_box_item > div > img {max-width:none;height:auto;width: 100%}
	.content_box_item.right {padding-top: 40%}
	.content_box_item.right > div > ul > li > strong {font-size: 1em}
	#content_wrap03 {padding: 57px 3% 0 3%}
	#content_wrap04 {margin-top: 60px}
	.pop-wrap-inner.map_pop {width: 250px}
	
}
@media screen and (max-width: 640px){
	.main-slide .slide .item a{ display:block; height:auto;}
	.main-slide .slide .item a img.pc{ display:none;}
	.main-slide .slide .item a img.mobile{ display:block; width:100%;}
	.main-slide .dots{ bottom:20px;}
	.main-slide .bx-controls-direction>a{display:none;}
	#content_wrap h3,#content_wrap02 div h3,#content_wrap03 h3 {font-size:2em}
	#content_wrap02 > div {padding:50px 0 75px}
	#content_wrap03 > h3 {padding:0 0 20px}
	.pagedown.d03 {top: -90px}
	#content_wrap02 > div h3:before {top: 64px}
	.tab-list li span {font-size:1em}
	    
}
@media screen and (max-width: 500px){
	.content_box_item.right > div > ul > li > p {display:none}
	.content_box_item.right > div > ul > li > strong {font-size: 1.2em}
	.w_p {display:none}
	.w_m {display:block}
	.notice {position:relative;bottom: 0;left: 0;padding: 20px 20px 44px 20px}
	#main_wrap {padding-top: 72%;margin-top: 87px}
	.notice {max-width: 100%}
	#bbs_wrap > article > ul > li {width:100%}
	#bbs_wrap > article > ul > li dd, #bbs_wrap > article > ul > li:last-child dd {border-right:none}
	.content_box_item.right > div > ul > li > p {margin-top:0;padding-top: 2px}
	.content_box_item.right > div > ul > li > p > a {line-height:1.2;font-size:0.9em}
	.content_box_item.right > div > ul > li > p:before {background:none}
	.content_box_item .text_list {font-size: 13px}
	.content_box_item .text_list > p > strong {margin-top: 18px;}
	#content_wrap > h3, #content_wrap02 > h3, #content_wrap03 > div > h3, #content_wrap04 > h3 {font-size:2em}
}

@media screen and (max-width: 360px){
	.content_box_item.right > div > ul > li > strong {font-size: 1.1em}
	.pc {display:none}
	.mobile {display:block}
	.ptoto_gallery > li {width:100%}
	#content_wrap04 > ul > li > div > a > img {max-width:100%}