@import url("common.css");
@import url("contents.css");

/*
	서브페이지 중 공통적으로 적용되는 css입니다.
	(서브비주얼, 서브 상단 텍스트 등)
*/

/* sub_title */
.sub_title {border-bottom:1px solid #e1e1e1;position:relative;z-index:900; width:15%; float:right;}

.sub_title .title{padding:30px 0;color:#fff; background:#900; width:274px; text-align:center;}
.sub_title > ul > li > a.on {display:block}
.sub_title > ul > .home > a{display:block;font-size:0;line-height:0;text-align:center;padding:19px 27px;background:#f5f5f5 url(../images/sub/ic_home.png) center center no-repeat;width:16px;height:14px;border-left:1px solid #e1e1e1;transition:0.3s}
.sub_title > ul {padding:14px 0;width:274px;background:#f5f5f5;border:1px solid #e1e1e1;border-top:0;position:absolute;left:0;top:85px;z-index:900;transition:0.3s}
.sub_title > ul > li {display:block;width:100%;height:100%}
.sub_title > ul > li > a {color:#666;background:#f5f5f5;padding:7px 27px;transition:0.3s}

.sub_title > ul > li:hover > a {background:#e4e4e4;color:#000}
.sub_title > ul > .home:hover > a {background:#e4e4e4 url(../images/sub/ic_home.png) center center no-repeat;}
.sub_title > ul > li a:hover {background:#990000;color:#fff}

.sub_title > ul > li.click > a {background:#e4e4e4;color:#000}
.sub_title > ul > li.click > a > img {transform:rotate(180deg)}
.sub_title > ul > li.click > ul {display:block}

/* 서브비주얼 */
.sub_visual {margin:0 0 60px 0;padding-bottom:50px;border-bottom:1px solid #e1e1e1}
.sub_visual .Vimg {position:relative;}
.sub_visual .Vimg h3 {font-family:'LotMedium';font-size:32px;font-weight:200;color:#fff;line-height:35px;text-align:right;background:rgba(14,72,204,0.8);width:255px;height:60px;padding:35px;position:absolute;right:0;top:0}
.sub_visual .Vimg.big h3{width:300px}
.sub_visual .Vimg h3 span {display:block;font-size:17px;line-height:18px;letter-spacing:0;margin-top:7px}
.sub_visual .Vimg img {max-width:100%}
.sub_visual .sub_tit {color:#990000;font-size:38px;text-align:center;line-height:35px;margin:40px 0}
.sub_visual .sub_tit h5{color:#666; font-size:15px; font-weight:300}
.sub_visual .sub_txt {font-size:18px;line-height:27px;word-break:keep-all}

/*컨테이너*/
.container {color:#444;margin-bottom:120px;overflow:hidden; width:80%;}
.container .product_img { text-align:center;}
.container .product_img img{width:100%}

@media screen and (max-width:1200px){
	.path {margin-top:69px}
	.path .wrap > ul > li {width:244px}
	.path .wrap > ul > li > a {padding:8px 20px}
	.path .wrap > ul > .home > a {padding:13px 17px;background-size:14px;}
	.path .wrap > ul > li > ul {padding:6px 0;top:41px;width:242px}
	.path .wrap > ul > li > ul > li > a {padding:5px 19px}
	.sub_visual {margin:25px 0 30px 0;padding-bottom:30px}
	.sub_visual .Vimg h3 {font-size:28px;line-height:28px;width:242px;height:52px;padding:28px}
	.sub_visual .Vimg h3 span {font-size:15px;line-height:15px}
	.sub_visual .sub_tit {font-size:28px;line-height:28px;margin:30px 0 20px 0}
	.sub_visual .sub_txt {font-size:15px;line-height:24px}
	.container {margin-bottom:60px}
	
	.sub_title{display:none;}
	.container {width:100%}
}

@media screen and (max-width:640px){
	.path .wrap > ul > li {width:153px}
	.path .wrap > ul > li > a {padding:8px 10px}
	.path .wrap > ul > .home > a {padding:13px 12px;background-size:12px;width:13px;height:13px}
	.path .wrap > ul > li > ul {top:41px;width:148px}
	.path .wrap > ul > li > ul > li > a {padding:5px 9px}
	.sub_visual {margin:20px 0 25px 0;padding-bottom:25px}
	.sub_visual .Vimg h3 {font-size:21px;line-height:21px;width:210px;height:42px;padding:21px}
	.sub_visual .Vimg h3 span {font-size:13px;line-height:13px;margin-top:5px}
	.sub_visual .Vimg img {min-height:52px}
	.sub_visual .sub_tit {font-size:20px;line-height:20px;margin:20px 0 10px 0}
	.sub_visual .sub_txt {font-size:13px;line-height:21px}
}

@media screen and (max-width:550px){
	.path {margin-top:60px}
}

@media screen and (max-width:365px){
	.path .wrap > ul > li {width:142px}
	.path .wrap > ul > li > a {font-size:12px}
	.path .wrap > ul > li > ul {width:138px}
	.path .wrap > ul > li > ul > li > a {font-size:12px}
	.path .wrap > ul > li:nth-child(2) {width:119px}
	.path .wrap > ul > li:nth-child(2) > ul {width:117px}
	.sub_visual .Vimg {overflow:hidden}
	.sub_visual .Vimg h3 {font-size:19px;line-height:19px;width:100%;height:36px;padding:24px}
	.sub_visual .Vimg img {max-width:auto;width:auto;height:84px;}
	.sub_visual .sub_txt {word-break:break-all;}
}