@charset "UTF-8";


.container{position: relative;z-index: 0; max-width: 1200px; margin: 0 auto;}


/*서브 비쥬얼*/
.subVisual			{ height:280px; background-repeat: no-repeat; background-image:url(/_static/osan/img/common/subVisual4.png) !important; background-position:center; }
.subVisual.subVisual1				{ background-image:url(/_static/osan/img/common/subVisual1.png); }
.subVisual.subVisual2				{ background-image:url(/_static/osan/img/common/subVisual2.png); }
.subVisual.subVisual3				{ background-image:url(/_static/osan/img/common/subVisual3.png); }
.subVisual.subVisual4				{ background-image:url(/_static/osan/img/common/subVisual4.png); }
.subVisual.subVisual5				{ background-image:url(/_static/osan/img/common/subVisual5.png); }
.subVisual.subVisual6				{ background-image:url(/_static/osan/img/common/subVisual6.png); }

.subVisual > div					{ padding-top:100px; text-align: center;}
.subVisual > div h2			{ font-size:2.5em; color:#fff; display:block; line-height: 1;  font-weight: 600;}
.subVisual > div p				{ color: #fff; margin-top: 12px; font-weight: 300;}

/* 로케이션 */
.quick_wrap{position: relative; z-index: 1; height: 62px; background: #fff; max-width: 1200px; border: 1px solid #dbdbdb; border-width: 1px 1px 1px 0px ; margin: -30px auto 0; }
.quick_wrap .container {padding: 0;}
.quick_wrap:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	font-size: 0;
	clear: both;
	}

.snb_link{float:left;}
.snb_link > li.home{ background:#2f961e; text-align:center; top: -1px; border: 1px solid #2f961e; border-width: 1px 0; height: 62px;}
.snb_link > li.home .icon_home{display:block; min-width: 62px; padding:0; border-right:0; background-image: url("/_static/osan/img/sub/home.png"); background-position:center center; background-repeat:no-repeat;}
.snb_link > li {float:left; position: relative; height: 60px; background-color:#fff; background-image:url("/_static/osan/img/sub/bar_on2.png"); background-position:right 20px center; background-repeat:no-repeat; font-size: 0.875em;}
.snb_link > li.on {background-color: #eff0f3; background-image: url("/_static/osan/img/sub/bar_on.png"); background-position: right 20px center; background-repeat:no-repeat;}
.snb_link > li:first-child.on{background: #2f961e;}
.snb_link > li > a{display:block;  min-width:200px; height:60px; line-height:60px; padding-left: 20px; padding-right: 60px;  border-right:1px solid #dbdbdb; color: #3d3d3d;}
.snb_link > li.on > a {color:#000;}
.snb_link > li.on > a:after { transform: rotate(180deg);}
.snb_link > li > a:hover, .snb_link > li > a:focus{font-weight: 500;}
.snb_link li .L2_Items {display:none; left: -999em; position: absolute; z-index: 100; max-height: 290px; overflow-y: scroll;}
.snb_link li.on .L2_Items {display:block; left:-1px; background: #ffffff; border:1px solid #dbdbdb; width:100%;}
.snb_link li.de_2items .L2_Items {width:100.5%;}
.snb_link li.de_2items.on .L2_Items {left:-1px;}
.snb_link li .L2_Items li {float: inherit;position: relative; display: inline-block; width: 100%; margin: 0 auto; }
.snb_link li .L2_Items li a{display:block; width:100%; padding:15px 10px 15px 20px; color:#000000;}
.snb_link li .L2_Items li a:hover,.snb_link li .L2_Items li a:focus {color:#006cc0; font-weight: 500;}
.snb_link > li.de_3items > a.de_menu2 {width:170px; padding-right:0;}
.snb_link li:last-child.only{background:#254e97;}


/* sub_section */ 
.sub_section{padding-top: 50px; min-height: 800px; padding-bottom: 140px; width: 100%;}
.sub_section:has(.salute_area) {background: url(/_static/osan/img/sub/salute_bg.png) center bottom no-repeat;}

/*.content{padding-top: 283px;}*/
.content{padding-top: 283px;}
.headerWrap.scrolled + .content{padding-top: 71px;}

/* sub title */
.sub_top_tit{ position: relative; display: block;}
h3.sub_top_tit{ margin-bottom: 32px; text-align: center;}
h3.sub_top_tit span{position: relative;line-height: 1;display: inline-block;padding-bottom: 40px;font-size:2.125em;color:#1a1a1a;font-weight: 500;}
h3.sub_top_tit span:after{content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(calc(-50% + 0.5px), 0); display: inline-block; width: 1px; background: #006cc0; height: 28px;}


h4.sub_top_tit{text-align: left;}
h4.sub_top_tit span{position: relative;line-height: 1;display: block;font-size:2em;color:#000000;font-weight: 500;}

/* snb_sns */
.sub_rtop {float:right;}
.etc_area {position:relative;}
.etc_area > li {float:left; text-align:center; position: relative;}
.etc_area > li.share_box{display: none;}
.etc_area > li:after{content: ''; width: 1px; height:12px; background: #3d3d3d; font-size: 0.750em; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); -ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%);}
.etc_area > li:last-child:after{display: none;}
.etc_area > li > button {display:block; width:100%;}
.etc_area > li > a {position: relative; display: inline-block; width: 60px; height: 60px; }
.etc_area > li > a img{ top: 50%;
    transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -webkit-transform: translate(0, calc(-50% + 0.5px));
    position: relative;}

.snb_sns {overflow:hidden; display:none; position:absolute; width:0; left: 0; opacity:0; background:#f7f7f7; transition-duration: 0.2s;-webkit-transition-duration: 0.2s;top: 0px;}
.snb_sns.show {display:block; width:auto; left: -333px; opacity:1;}
.snb_sns > li {float:left; display: none; height:60px; border-left: 1px solid #d1d1d1;}
.snb_sns.show > li {display:inline-block;}
.snb_sns li a{display: inline-block; width: 60px; height: 60px; padding: 20px 0; text-align: center;}
.snb_sns li a > img{vertical-align: middle;}
.snb_sns li:last-child {width:89px; border-right: 1px solid #d1d1d1;}
.snb_sns li a.link_copy {display:block; width:89px; font-size:0.875em; color:#353535;}

/* quick_wrap - QR cord */
.qr_cord {position:relative;}
.qrBox{display: none; position:absolute; top:211px; right:-1px; z-index:99999; margin-top:-150px; margin-left:-115px; width: 300px; height: 258px; padding: 28px; background-color: #fff; border: 1px solid #ddd; border-top:0; text-align: center; cursor: pointer;}
.qrBox.on {display:block;}
.qrBox a.qrBoxClose{ position: absolute; top: 6px; right: 6px; width: 30px; height:30px; line-height:32px; background-color: #414141; color: #fff; text-align: center; text-decoration: none;}
.qrBox p{margin: 13px auto 0; font-size:0.96em; word-break:keep-all;}



/*LNB*/
.lnb_wrap{width: 240px; float: left; display: none;}
.lnb_wrap h2.lnbTit{text-align: left; font-size: 1.875em; color: #1b1b1b; margin-bottom: 61px; padding-left: 8px; font-weight: 500;}
.lnb_wrap h2.lnbTit > span{letter-spacing: -0.130em;}
.lnb_wrap h2.lnbTit.line2{margin-bottom: 27px;}
.lnb_wrap>ul{width:100%; border-top: 2px solid #dbdbdb;}
.lnb_wrap>ul>li{border-top: 1px solid #ddd;display: table;table-layout: fixed;width: 100%;}
.lnb_wrap>ul>li:first-child{border-top: 0;}
.lnb_wrap>ul>li h3 >a	{display:inline-block;height:50px; line-height:25px; vertical-align:middle; padding:0 23px 0 16px; color:#000000;width: 100%; line-height: 50px; font-size: 1.125em; background: #fff; font-weight: 500;}
.lnb_wrap>ul>li h3 >a img{margin: 19px 0 0 4px;}
.lnb_wrap>ul>li.on> h3 a{  background:#231f20 url(/_static/osan/img/sub/lnb_plus.png) center right 23px no-repeat; display: inline-block; color: #ffffff;}
.lnb_wrap>ul>li ul		{ background:#fff; padding: 16px 5px 16px 17px; display: none;}
.lnb_wrap>ul>li.on ul		{ display: block;}
.lnb_wrap>ul>li ul li { position: relative; margin-top: 16px; }
.lnb_wrap>ul>li ul li:first-child{margin-top: 0;}
.lnb_wrap>ul>li ul li a{ color:#919294; position: relative; display: inline-block; word-break: keep-all;}
.lnb_wrap>ul>li ul li a:hover, .lnb_wrap>ul>li ul li a:focus{color: #000;}
.lnb_wrap>ul>li ul li a.on{position: relative; color: #000;}

/*contents_wrap*/
.contents_wrap{/*width: calc(100% - 280px); float: right; */ width: 100%;}





@media all and (max-width:1200px){
	/* sub title */
	h3.sub_top_tit span{font-size:2.0em;}
	h4.sub_top_tit span{font-size:1.625em;}

    /*LNB*/
    .lnb_wrap h2.lnbTit{font-size: 1.625em;}
    .lnb_wrap>ul>li h3 >a{font-size: 1em;}
    .lnb_wrap>ul>li ul li a{font-size: 0.938em;}
}

@media all and (max-width:1024px){

	.subVisual{display: none;}

	.content{padding-top: 236px;}
    .headerWrap.scrolled + .content{padding-top: 133px;}
	.sub_section{padding-top: 40px;}

	.quick_wrap{margin:0 auto;}
    
	/* snb_link */
	.snb_link > li.home{display: none;}
    .etc_area > li{display: none; }
    /* .etc_area > li.share_box{display: block;} */
    .etc_area > li:after{display: none;}
    /* etc_area */
	.snb_link > li > a{min-width:185px;}	

	/* 03.15 로케이션부분 -32px 풀어줌 */
	.quick_wrap{top: 0;}

    /*LNB*/
    .lnb_wrap{display: none;}

    /*contents_wrap*/
    .contents_wrap{width: 100%; float: none;}
}

@media all and  (max-width:860px){

	/* .sub_section */
	.sub_section{padding: 60px 15px 80px;}

	 /* .quick_wrap */
	 .quick_wrap{height:50px; border-width: 1px 0;}
	 .snb_sns > li{height:48px;}
	 .snb_sns li a{height:48px; padding:13px 0;}

	 .snb_link{float: none; display: table; table-layout: fixed; width: 100%; }
	 .snb_link > li.home{height: 50px;}
	 .snb_link > li.home .icon_home{min-width: 50px;}
	 /* .snb_link */
	 .snb_link > li{height:48px;
		float: none; display: table-cell; border-right: 1px solid #dbdbdb;
	}
	 .snb_link > li > a{line-height:48px; height:48px;  min-width:100%; padding:0 30px 0 10px; font-size:0.938em; border-right: 0;}
	 .snb_link li .L2_Items{top:48px;}
	 .snb_link li .L2_Items li a{padding-left:10px; font-size:0.938em;}
    /* .etc_area */
    .etc_area > li{width:50px; height:50px;}
    .etc_area > li > a{width:50px; height:50px;}
    .etc_area > li > a img{margin-top:15px;}


}
@media all and  (max-width:767px){
	/* .snb_link */
	/* .snb_link > li{display: none;} */
	.snb_link > li.full{display: block;}
	.snb_link > li > a{font-size: 0.875em;}

	/* sub title */
	h3.sub_top_tit span{font-size:1.625em; }
	h4.sub_top_tit span{font-size:1.5em; }
}
	
@media all and (max-width:580px){

	.content{padding-top: 154px;}
	.headerWrap.scrolled + .content{padding-top: 92px;}
	.quick_wrap{height: 100%; border-bottom: 0;}
	

    /* .sub_section */
	.sub_section{padding: 30px 15px 80px;}

	.subVisual					{ height:80px;background-size:auto 100%; }
	.subVisual > div			{ font-size:0; }
	.subVisual > div h2			{ font-size:22px; font-weight:normal; color:#fff; display:inline-block; padding:26px 0 8px; }

	
	/* h3.sub_top_tit */
    h3.sub_top_tit{margin-bottom: 15px;}
    h3.sub_top_tit span{font-size:1.313em; padding-bottom: 27px;} 	
	h3.sub_top_tit span:after{height: 18px;}

	/* h4.sub_top_tit */
	h4.sub_top_tit span{font-size:1.125em;} 	
	h4.sub_top_tit span:before{top: -14px; height: 3px; width: 20px;}

	h4.sub_top_tit{padding-bottom: 15px;}

	/*로케이션 */
	.snb_link{display: block;}
	.snb_link > li{float: left; display: block; width: 100%; border: 1px solid #dbdbdb; border-width: 0 1px 1px 0;}
	.snb_link > li > a{min-width: 100%;}
	.snb_link > li:not(:nth-child(4)){width: 50%;}
	.snb_link li .L2_Items{top:47px;}
	.snb_link li.on .L2_Items{left: 0;}

	
}



@media all and (max-width:479px){

    .content{padding-top: 152px;}

	/* .sub_section */
	.sub_section{ min-height: 300px;}


	 /* .sub_wrap */
	 .snb_link > li.home{height: 35px;}
	 .snb_link > li {height:33px; background-position: right 10px center;}
	 .snb_link > li.sub_link_on {background-position:right 10px center;}
	 .snb_link > li > a {min-width:90px; height:33px; line-height:33px; padding-left:9px; padding-right:34px;}	 
	 .snb_link > li.on {background-position:right 10px center;}
	 .snb_link > li.sub_link_on a {min-width:120px;}  
	
	 .snb_link li .L2_Items {top:32px;}
	 .snb_link li .L2_Items li {padding-left:9px;}
	 .snb_link li .L2_Items li a {padding:10px 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: keep-all;}
	 .snb_link > li.home .icon_home {min-width:35px; height: 34px;}
	 .snb_link > li.item_tit > a {height:34px;}

	 .etc_area > li {width:35px; height:33px;}
	 .snb_sns.show {left:-233px;}
	 .snb_sns > li {height:33px; }
	 .snb_sns li a {width:35px; padding:5px 0; font-size:0.875em; height: 33px;}
	 
     .snb_link > li:last-child a{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: keep-all;}

     /* .etc_area */
    .etc_area > li {width:35px; height:35px;}
    .etc_area > li > a{width:35px; height:35px;}
    .etc_area > li > a img{margin-top:7px;}
}