@charset "euc-kr";
/* CSS Document */

.mColor{color:#c0ab60;}
.mColor02{color:#8f6d40}
.blColor{color:#292929;}
.whColor{Color:#ffffff;}
.grColor{Color:#a1a1a1;}


*{-webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.3s, 0.3s;
		-moz-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.3s;
		-moz-transition:0.3s;
		-webkit-transition:0.3s;
		box-sizing:border-box;}


/* layout*/
#tmArea{width:100%; height:100%; background:rgba(0,0,0,.6); z-index:90; position:fixed; top:0; left:0; opacity:0; display:none;}
.tmAreaOn{display:block !important; opacity:1 !important;}

#topWrap{width:100%; height:82px; position:fixed; top:0; left:0; z-index:100; min-width:320px;}
.top{width:90%; margin:0 auto; height:62px; padding-top:10px; z-index:100; position:relative;}
.top .logo{width:200px; height:62px; background:url(../images/layout/logo01.png) no-repeat; background-size:auto 100% !important; position:absolute; z-index:999999; top:10px; left:50%; transform:translateX(-50%);}
.top .logo a{display:inline-block; width:100%; height:100%; position:relative; z-index:999999; }



.top .gnbWrap{position:fixed; left:-50%; top:0; width:30%; height:100%; background:#ffffff; z-index:100; padding-top:80px; padding-left:5%; box-sizing:border-box; display:none;}
.top .gnbWrap ul{float:left; width:100%;}
.top .gnbWrap ul li{float:left; position:relative; width:100%; box-sizing:border-box; text-align:left;}
.top .gnbWrap>ul>li>a{display:inline-block; width:100%; text-align:left; padding:20px 10px 20px; box-sizing:border-box; color:#fff; font-size:1.2rem; line-height:160%; font-weight:600; position:relative; cursor:pointer;}
.top .gnbWrap>ul>li>a::after{content:'';display:inline-block; width:10%; height:2px; background:#e22a27; position:absolute; bottom:10px; opacity:0;}
.top .gnbWrap>ul>li>a:hover::after{opacity:1; width:80%;}
.top .gnbWrap>ul>li>a.tgOn{color:#e22a27;}
.top .gnbWrap>ul>li>a.tgOn::after{opacity:1; width:80%;}
.top .gnbWrap>ul>li.on>a{color:#e22a27;}
.top .gnbWrap>ul>li.on>a::after{opacity:1; width:80%;}


.top .gnbWrap>ul>li>a::after{-webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.5s;
		-moz-transition-duration: 0.5s;
		transition-duration: 0.5s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.5s;
		-moz-transition:0.5s;
		-webkit-transition:0.5s;
		box-sizing:border-box;}

#topWrap .top .gnbWrap>ul>li>a.tgOn::after{bottom:0; opacity:1;}
.top .gnbWrap ul li.projectBD{margin-top:-8px;}
.top .gnbWrap ul li.projectBD a{line-height:160%;}

.top .gnbWrap>ul>li>a .kr{display:block;}
.top .gnbWrap>ul>li>a .en{display:none; letter-spacing:-1px;}
.top .gnbWrap>ul>li>a:hover .kr{display:none;}
.top .gnbWrap>ul>li>a:hover .en{display:block;}

.top .gnbWrap>ul>li>a.tgOn .kr{display:none;}
.top .gnbWrap>ul>li>a.tgOn .en{display:block;}

.top .gnbWrap>ul>li.on>a .kr{display:none;}
.top .gnbWrap>ul>li.on>a .en{display:block;}


.top .snsWrap{position:absolute; top:10px; right:0; z-index:200; display:none;}
.top .snsWrap a{display:inline-block; padding:0 5px; margin-right:-5px;}

.gnbWrap .subGnb{width:100%; position:relative; display:none;}
.gnbWrap .subGnb ul{width:100%; padding-top:10px; padding-left:8%;}
.gnbWrap .subGnb ul li{width:100% !important;}
.gnbWrap .subGnb ul li>a{display:inline-block; width:100%; text-align:left; padding:8px 0; color:#292929; font-size:1rem; font-weight:normal; letter-spacing:-0.2px;}
.gnbWrap .subGnb ul li>a.staff{font-size:0.9rem; color:#5b1b1b;}
.gnbWrap .subGnb ul li>a:hover{color:#e22a27;}


#topWrap:hover{background:#fff;}
#topWrap:hover .top .logo{background:url(../images/layout/logo02.png) no-repeat; background-size:auto 100%;}
#topWrap:hover .top .gnbWrap>ul>li>a{color:#292929;}
#topWrap:hover .top .gnbWrap>ul>li>a:hover{color:#e22a27;}
#topWrap:hover .top .gnbWrap>ul>li.projectBD>a:hover{color:#e22a27;}



.topWrapOn{background:#fff;}
.topWrapOn .top .logo{background:url(../images/layout/logo02.png) no-repeat !important; background-size:auto 100% !important;}
.topWrapOn .top .gnbWrap{display:block; left:0; padding-right:2%;}
.topWrapOn .top .gnbWrap>ul>li>a{color:#292929 !important;}
.topWrapOn .top .gnbWrap>ul>li>a:hover{color:#e22a27;}
.topWrapOn .top .gnbWrap>ul>li.projectBD>a:hover{color:#e22a27;}

.top .gnbWrap{-webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.5s;
		-moz-transition-duration: 0.5s;
		transition-duration: 0.5s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.5s;
		-moz-transition:0.5s;
		-webkit-transition:0.5s;
		box-sizing:border-box;}



.topScroll{background:#fff;}
.topScroll .top .logo{background:url(../images/layout/logo02.png) no-repeat !important; background-size:auto 100% !important;}
.topScroll .top .gnbWrap>ul>li>a{color:#292929 !important;}
.topScroll .top .gnbWrap>ul>li>a:hover{color:#e22a27; padding-bottom:26px;}
.topScroll .top .gnbWrap>ul>li.projectBD>a:hover{color:#e22a27; padding-bottom:24px;}

.extraLink{display:inline-block; position:absolute; top:26px; right:0; z-index:200;}
.extraLink a{display:inline-block; padding:0 8px; font-size:1rem; line-height:160%; color:#ffffff; letter-spacing:-0.6px; position:relative;}
.extraLink a::before{width:2px; height:12px; background:#f1f1f1; position:absolute; top:6px; left:-1px; content:'';}
.extraLink a:first-child::before{display:none !important;}
.extraLink a.projectBD{color:#e22a28 !important; font-weight:600;}


.extraLink a:hover{color:#e22a27;}

#topWrap:hover .extraLink a{color:#c0ab60;}
#topWrap:hover .extraLink a::before{background:#cacaca;}
#topWrap:hover .extraLink a.projectBD{color:#e22a27 !important;}
.topOn .extraLink a{color:#c0ab60;}
.topOn .extraLink a::before{background:#cacaca;}
.topOn  .extraLink a.projectBD{color:#e22a27 !important;}
.topActive .extraLink a{color:#c0ab60;}
.topActive .extraLink a::before{background:#cacaca;}
.topActive .extraLink a.projectBD{color:#e22a27 !important;}

.topScroll .extraLink a{color:#c0ab60;}


.topAct1_1{background:#fff;}
.topAct1_1 .top .logo{background:url(../images/layout/logo02.png) no-repeat !important; background-size:auto 100% !important;}
.topAct1_1 .top .gnbWrap>ul>li>a{color:#292929 !important;}
.topAct1_1 .top .gnbWrap>ul>li>a:hover{color:#e22a27; padding-bottom:26px;}
.topAct1_1 .top .gnbWrap>ul>li.projectBD>a:hover{color:#e22a27; padding-bottom:24px;}



.top .gnbWrap .etcLink{width:100%; padding:10px 2%; display:flex; justify-content:space-between; border-top:1px solid #CCC; margin-top:20px; flex-wrap:wrap;}
.top .gnbWrap .etcLink a{display:inline-block; width:48%; margin:5px 0; padding:5px 0; text-align:center; border:1px solid #000; color:#000; text-align:center;}
.top .gnbWrap .etcLink a:hover{background:#000000; color:#ffffff;}
.top .gnbWrap .etcLink a.projectBD{background:#e22a27; border:1px solid #e22a27; color:#ffffff;}
.top .gnbWrap .etcLink p{display:inline-block; width:100%; padding:20px 0; font-weight:600; font-size:2rem; border-top:2px solid #e22a27; margin-top:20px; text-align:center; background:#f1f1f1;}


/* mobile Menu */
#topWrap .mobileMenu{display:inline-block; position:absolute; top:20px; left:0; z-index:200; width:44px; height:44px; border:1px solid #c0ab60; background:none; border-radius:5px;}
#topWrap .mobileMenu .mBtn{width:100%; height:100%; text-align:center; color:#c0ab60; font-size:40px; line-height:40px; font-weight:200; cursor:pointer; position:relative;}
#topWrap .mobileMenu .mBtnShow{display:inline-block; position:relative;}
#topWrap .mobileMenu .mBtnShow::before{content:''; width:70%; height:2px; background:#c0ab60; position:absolute; top:30%; left:15%; transform:rotate(0deg); transform-origin:center center; }
#topWrap .mobileMenu .mBtnShow::after{content:''; width:70%; height:2px; background:#c0ab60; position:absolute; bottom:30%; left:15%; transform:rotate(0deg); transform-origin:center center;}

#topWrap .mobileMenu .mBtnShow:hover::before{top:50%; transform:rotate(90deg); transform-origin:center center;  }
#topWrap .mobileMenu .mBtnShow:hover::after{transform:rotate(0deg); transform-origin:center center; top:50%;}


#topWrap .mobileMenu .mBtnClose::before{ top:50%; left:10%; transform:rotate(45deg); transform-origin:center center; }
#topWrap .mobileMenu .mBtnClose::after{top:50%; left:10%; transform:rotate(-45deg); transform-origin:center center; }

#topWrap .mobileMenu .mBtnClose:hover::before{ top:50%; left:10%; transform:rotate(45deg); transform-origin:center center; }
#topWrap .mobileMenu .mBtnClose:hover::after{top:50%; left:10%; transform:rotate(-45deg); transform-origin:center center; }

#topWrap .mobileMenu .mBtnShow::before{-webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.3s, 0.3s;
		-moz-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.3s;
		-moz-transition:0.3s;
		-webkit-transition:0.3s;
		box-sizing:border-box;}
		
#topWrap .mobileMenu .mBtnShow::after{-webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.3s, 0.3s;
		-moz-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.3s;
		-moz-transition:0.3s;
		-webkit-transition:0.3s;
		box-sizing:border-box;
		
		}


/* Layout Footer */

.center{width:90%; margin:0 auto;}
.hide{display:none;}

/* Layout Footer */



#footWrap{width:100%; float:left; background:#000000; padding-top:20px; padding-bottom:20px;}

.fSiteWrap{width:100%; position:relative; padding:30px 0; text-align:left; display: flex; justify-content:space-between; align-items:center;}
.fSiteWrap .fLogo{float:left; width:15%;}
.fSiteWrap .fLogo img{width:100%; max-width:180px;}

.fSiteWrap .fAddress{color:#f4f4f4; font-size:0.8em; line-height:1.8em; font-style:normal; float:left; padding:0px 30px; width:calc(100% - 400px);}
.fSiteWrap .fSns{padding:10px 0; width:200px; text-align:right;}
.fSiteWrap .fSns a{display:inline-block; line-height:40px; font-size:12px; color:#f4f4f4; margin:0 5px; }
.fSiteWrap .fSns a img{width:40px;}
.fSiteWrap t .copyright{color:#a1a1a1; font-size:0.6em; line-height:1.2em; display:inline-block; float:left; font-weight:100;}


.fSiteWrap .askBtnWrap{padding:0 20px; width:20%; display:none;}
.fSiteWrap .askBtnWrap .askBtn{display:inline-block; width:100%; padding:15px 5px; background:#c0ab60; border:1px solid #c0ab60; color:#ffffff; line-height:120%; font-size:1.2rem; font-weight:bold; text-align:center;}
.fSiteWrap .askBtnWrap .askBtn:hover{background:#000; color:#ffffff; text-align:center;}


.foot{width:100%; position:relative; float:left; padding:20px 0; text-align:left; position:relative;}
.foot .copyright{color:#f4f4f4; font-size:0.8em; line-height:1.2em; display:inline-block; float:left;}
.foot .fSns{padding:0; position:absolute; top:0px; right:0;}
.foot .fSns a{display:inline-block; line-height:40px; font-size:12px; color:#f4f4f4; margin:0 5px; }
.foot .fSns a img{width:40px;}


.floatAsk{width:270px; display:inline-block; position:fixed; bottom:70px; right:2%; z-index:9999;}
.floatAsk .askLink{position:relative; width:100%; text-align:right;}
.floatAsk .askLink .telMemo{display:inline-block; box-sizing:border-box; padding:10px 40px 10px 20px;  background:rgba(0,0,0,.4); border:1px solid #ffffff; border-radius:20px; position:relative;}
.floatAsk .askLink .telMemo .memo{width:100%; text-align:right; position:relative; color:#ffffff; line-height:120%; font-size:0.9rem; z-index:1;}
.floatAsk .askLink .telMemo .closeBtn{display:inline-block; z-index:2; position:absolute; top:10px; right:10px; cursor:pointer;}
.floatAsk .askLink .telMemoClose{opacity:0;}

.floatAsk .askLink .inquiryBtnWrap{display:flex; flex-wrap:wrap; width:100%;}
.floatAsk .askLink .inquiryBtn{display:inline-block; width:100%; padding-top:5px; text-align:right;}
.floatAsk .askLink .inquiryBtn a{display:inline-block; width:68px; height:68px; text-align:right; padding-right:68px; text-align:right; border-radius:34px; background-position:right center; background-repeat:no-repeat; overflow:hidden; color:#ffffff; line-height:68px; font-size:0.9rem;}
.floatAsk .askLink .inquiryBtn a span{display:none; opacity:0;}

.floatAsk .askLink .inquiryBtnWrap:hover .inquiryBtn a{width:180px; padding-right:70px;}
.floatAsk .askLink .inquiryBtnWrap:hover .inquiryBtn a span{display:inline-block; opacity:1;}

.floatAsk .askLink .inquiryBtn a.inquiry01{background-color:#0db500; background-image:url(../images/floatIcon_phone.png);}
.floatAsk .askLink .inquiryBtn a.inquiry02{background-color:#1660f7; background-image:url(../images/floatIcon_memo.png);}
.floatAsk .askLink .inquiryBtn a.inquiry03{background-color:#FC0; background-image:url(../images/floatIcon_kakao_02.png); color:#3a1d1d;}


#wrap{width:100%; }


@media screen and (max-width:1200px){
.top{width:96%;}	
.extraLink a{font-size:0.9rem; padding:0 4px;}

}




@media screen and (max-width:1100px){
	
	#footWrap{padding-bottom:40px;}
	
	.fSiteWrap{padding:20px 0;}
	.fSiteWrap .fSite{padding-top:14px;}
	.fSiteWrap .fSite a{ margin-left:15px; font-size:12px;}
	
	.foot .fSubWrap .fAddress{font-size:12px; line-height:20px;}
	.foot .fSubWrap .copyright{font-size:12px; line-height:20px;}

    .foot .fSns{position:absolute; top:20px; right:0; padding:0; text-align:left;}
    .foot .fSns a{line-height:50px; font-size:12px; margin-left:15px;}
	.foot .fSns a img{width:50px;}
    .foot .fSns .copyright{font-size:12px; line-height:20px; padding-top:10px;}

	.moSubWrap .moNavBox{width:30%;}
	
	.foot{padding-bottom:40px;}
}


@media screen and (max-width:1024px){
	
	.extraLink a{display:none;}
	.extraLink a::before{display:none;}
	.extraLink a.contactus{display:inline-block;}
	
}


@media screen and (max-width:850px){
	
	#topWrap{height:62px;}
	.top{height:62px;}
	
	.top .logo{width:120px; height:40px;}
	#topWrap .mobileMenu{top:10px;}
	.extraLink{top:14px;}
	
	.top .gnbWrap{left:-80%; width:80%; padding-top:60px; padding-left:2%;}
	
	.top .gnbWrap .etcLink a{width:48%; margin:5px 0;}
	
	
	.brMo{display:block !important;}	

	
	.fSiteWrap .fLogo{float:left; width:150px; text-align:center;}
	.fSiteWrap .fAddress{color:#f4f4f4; font-size:0.8em; line-height:1.8em; font-style:normal; float:left; padding:0px 30px; width:calc(100% - 150px);}
    .fSiteWrap .fSns{padding:10px 0; width:100%; text-align:left; box-sizing:border-box; padding-left:180px;}
    .fSiteWrap .fSns a{line-height:40px; font-size:12px;}
    .fSiteWrap .fSns a img{width:40px;}
	
	
	
	.foot{padding-bottom:20px;}
    .foot .copyright{font-size:0.8em; line-height:1em;}	
	
	
	.fSiteWrap{flex-wrap:wrap;}
	
	.fSiteWrap .fLogo{ width:100%; text-align:center; }
	.fSiteWrap .fLogo img{width:50%;}
	.fSiteWrap .fAddress{padding:20px 0; width:100%; text-align:center;}
	
	.fSiteWrap .fSns{padding:10; padding-left:0px; text-align:center;}
    .fSiteWrap .fSns a{line-height:30px;}
    .fSiteWrap .fSns a img{width:30px;}
		
	.fSiteWrap .askBtnWrap{width:100%;}
	.fSiteWrap .askBtnWrap .askBtn{font-size:1rem;}
	
	
	
}






@media screen and (max-width:640px){
	
	.top{width:96%;}	
	.top .gnbWrap{left:-80%; width:80%; padding-top:60px; padding-left:2%;}
	
	
.floatAsk{width:auto; bottom:40px; right:2%;}
.floatAsk .askLink{width:auto;}
.floatAsk .askLink .telMemo{padding:10px 30px 10px 10px; border-radius:15px;}
.floatAsk .askLink .telMemo .memo{letter-spacing:-0.2px;}
.floatAsk .askLink .telMemo .closeBtn{top:8px; right:5px;}
.floatAsk .askLink .telMemo .closeBtn img{width:18px;}

.floatAsk .askLink .inquiryBtn a{width:40px; height:40px; text-align:right; padding-right:40px; border-radius:20px; line-height:40px; font-size:0.9rem; background-size:auto 40px;}

.floatAsk .askLink .inquiryBtnWrap:hover .inquiryBtn a{width:150px; padding-right:42px;}
}



@media screen and (max-width:480px){
	
	
	.top .logo{width:120px; height:30px; top:15px;}

    #topWrap .mobileMenu{width:38px; height:38px;}
   
	
	
}






#footAskWrap{width:100%; padding:80px 0; float:left; background:url(../images/layout/bottomBg.jpg) no-repeat center bottom; background-attachment:fixed; position:relative;}
#footAskWrap .footAsk{width:100%; color:#ffffff; font-size:2rem; text-align:center;}
#footAskWrap .footAsk .txt01{font-size:2rem; font-weight:600;}
#footAskWrap .footAsk .txt02{font-size:1.2rem; padding:20px 0 30px;}
#footAskWrap .footAsk .goAsk{display:inline-block; padding:15px 30px; color:#ffffff; font-size:1.35rem; border:1px solid #ffffff;}
#footAskWrap .footAsk .goAsk:hover{color:#000000; background:#ffffff;}

@media screen and (max-width:640px){ 


#footAskWrap{ padding:50px 0 50px;}
#footAskWrap .footAsk{font-size:1.35rem;}
#footAskWrap .footAsk .txt01{font-size:1.2rem; font-weight:600;}
#footAskWrap .footAsk .txt02{font-size:1rem; padding:15px 0 20px;}
#footAskWrap .footAsk .goAsk{padding:15px 20px; font-size:1rem;}


}


@media screen and (max-width:480px){ 

#footAskWrap .footAsk{font-size:1.25rem;}
#footAskWrap .footAsk .txt01{font-size:1.25rem; font-weight:600;}
#footAskWrap .footAsk .txt02{font-size:1rem; padding:10px 0 15px;}
#footAskWrap .footAsk .goAsk{padding:10px 20px; font-size:1rem;}


}




/********************************/
/* SUB LAYOUT */
/********************************/


#subTopWrap{width:100%; height:400px; display:inline-block; position:relative; background-repeat:no-repeat; background-position:center top; 
background-attachment:fixed; overflow:hidden; background-image:url(../images/sub/subTop_00.jpg); background-size:100% auto;}
.subTop{width:100%; height:100%; display:inline-block; position:absolute; top:0; left:0; z-index:2; background:rgba(0,0,0,0.4);}
.sTopTxtBox{width:100%; display:inline-block; position:absolute; z-index:3; top:50%; transform:translateY(-50%);}
.sTopTxtBox .subTopTit{font-weight:bold; color:#ffffff; font-size:2em; text-align:center; padding-top:41px;}
.sTopTxtBox .subTopTxt{color:#ffffff; font-size:1.2em; text-align:center;}


.subTopMovie{width:100%; height:100%; display:inline-block; position:absolute; z-index:1; overflow:hidden; top:0; left:0;}
.subTopMovie .videoWrap{width:100%; padding-bottom:56.25%; position:absolute; overflow:hidden; left:0;}
.subTopMovie .videoWrap .videoBox{width:100%; height:100%; position:absolute; left:0; top:0;}
.subTopMovie .videoWrap .videoBox video{height:100%;}

.subTopMovie .videoWrap01{top:0;}
.subTopMovie .videoWrap02{bottom:-10%;}

.subTopBox1_1{height:82px !important; background:#ffffff !important;}
.subTopBox1_1 .subTop{display:none;}


#subTopWrap .subTopScrBtn{position:absolute; z-index:30; width:40px; height:64px; padding:10px; border-radius:20px; border:1px solid #ffffff; bottom:5px; left:50%; margin-left:-20px; color:#ffffff; 
                         font-size:10px; line-height:10px; vertical-align:middle; text-align:center; cursor:pointer;}

#subTopWrap .subTopScrBtn .scrollBarWrap{display:inline-block; width:100%; height:100%; text-align:center; position:relative; overflow:hidden;}
#subTopWrap .subTopScrBtn .scrollBarWrap .scrollBar{width:40px; height:125px; display:inline-block; position:absolute; top:0; left:50%; margin-left:-20px; background:url(../images/barD_02.png) no-repeat center center;

         animation-name:subTopScrollAni;
		 animation-duration:1.2s;
		 animation-timing-function:linear;
		 animation-delay:0s;
		 animation-iteration-count:infinite;

}

#subTopWrap .subTopScrBtn:hover{background:#ffffff; color:#000000;}
#subTopWrap .subTopScrBtn:hover .scrollBarWrap .scrollBar{background:url(../images/barD_01.png) no-repeat center center;}

@keyframes subTopScrollAni{

   from{
	   top:-125px;
	   opacity:1;
	   }
   to{
	  top:125; 
	  opacity:0;
	   }	
	
}





/* SUB PAGE */

#subNavWrap{width:100%; float:left; border-bottom:1px solid #cccccc; border-top:1px solid #cccccc; position:relative; z-index:3;}
#subNavWrap .subNav{width:100%; display:flex;}
#subNavWrap .subNav .navHome{display:inline-block; width:80px; height:64px; float:left; border-left:1px solid #cccccc; border-right:1px solid #cccccc; background:url(../images/blet_home.png) no-repeat center center;}
#subNavWrap .subNav .navBox{display:inline-block; width:300px; float:left; border-right:1px solid #cccccc; position:relative;}
#subNavWrap .subNav .navBox .navPos{display:inline-block; width:100%; height:64px; float:left; position:relative; z-index:3; box-sizing:border-box; padding:10px 30px 10px 20px; line-height:44px; cursor:pointer; font-size:18px;
                                    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#subNavWrap .subNav .navBox .navPos::after{display:inline-block; content:''; width:10px; height:10px; position:absolute; top:50%; margin-top:-5px; right:20px; background:url(../images/blet_arrow.png) no-repeat center center;}

#subNavWrap .subNav .navNoSub .navPos::after{display:none !important;}

#subNavWrap .subNav .navBox .navLinkArea{display:inline-block; width:calc(100% + 20px); height:300px; position:absolute; top:0; left:-10px; z-index:1; display:none;}
#subNavWrap .subNav .navBox .navLink{display:inline-block; width:calc(100% + 2px); position:absolute; top:0; left:-1px; z-index:2; box-sizing:border-box; padding:64px 0px 0px 0px; background:#ffffff; border-left:1px solid #cccccc; border-right:1px solid #cccccc; display:none;}
#subNavWrap .subNav .navBox .navLink .nLink{display:inline-block; width:100%; float:left; box-sizing:border-box; padding:10px 20px; line-height:24px; cursor:pointer; font-size:18px; border-bottom:1px solid #cccccc; position:relative;}
#subNavWrap .subNav .navBox .navLink .nLinkOn{display:none !important;}
#subNavWrap .subNav .navBox .navLink::before{display:inline-block; content:''; width:100%; height:1px; background:#cccccc; position:absolute; top:64px; left:0;}

#subNavWrap .navCenter{width:100%; max-width:1200px; margin:0 auto;}


.subTopLogo{height:62px; margin-bottom:30px; margin-top:30px;}


/* COMMON */

.goTopButton{width:60px; height:60px; position:fixed; bottom:5px; right:2%; cursor:pointer; border-radius:100%; opacity:0; z-index:30; overflow:hidden; box-sizing:border-box; background:#c0ab60;}
.goTopButton .goTopBarWrap{width:100%; height:100%; position:relative; display:inline-block;}
.goTopButton .goTopBarWrap::before{display:inline-block; width:4px; height:4px; background:#ffffff; content:''; position:absolute; top:-2px; left:50%; margin-left:-2px; border-radius:100%; display:none;}
.goTopButton .goTopBarWrap .goTopBarBox{width:100%; height:100%; position:relative; overflow:hidden;}


.goTopButton .goTopBarWrap .goTopBarBox::before{width:15px; height:15px; content:''; display:inline-block; position:absolute; top:0%; left:15%;
                                             border-left:2px solid #ffffff; border-bottom:2px solid #ffffff; transform:rotate(135deg) translate(-50%,-50%);}
.goTopButton .goTopBarWrap .goTopBarBox::after{width:15px; height:15px; content:''; display:inline-block; position:absolute; top:50%; left:15%;
                                             border-left:2px solid #ffffff; border-bottom:2px solid #ffffff; transform:rotate(135deg) translate(-50%,-50%);}




.goTopButton .goTopBarWrap .goTopBarBox::before{
         animation-name:goTopBtn01;
		 animation-duration:2s;
		 animation-timing-function:linear;
		 animation-delay:0s;
		 animation-iteration-count:infinite;
		 

}


.goTopButton .goTopBarWrap .goTopBarBox::after{
         animation-name:goTopBtn02;
		 animation-duration:2s;
		 animation-timing-function:linear;
		 animation-delay:1s;
		 animation-iteration-count:infinite;
}



@keyframes goTopBtn01{

   0%{
	   top:70px;
	   opacity:.2;
	   }
   50%{
	   top:25px;
	   opacity:1;
	   
      }
   100%{
	  top:-20px; 
	  opacity:.2;
	   }	
	
}



@keyframes goTopBtn02{

   0%{
	   top:70px;
	   opacity:.2;
	   }
   50%{
	   top:25px;
	   opacity:1;
	   
      }
   100%{
	  top:-20px; 
	  opacity:.2;
	   }	
	
}





/* SUB NAVI */
#subNavWrap{width:100%; float:left; border-bottom:1px solid #cccccc;}
#subNavWrap .subNav{width:100%; float:left;}
#subNavWrap .subNav .navHome{display:inline-block; width:80px; height:64px; float:left; border-left:1px solid #cccccc; border-right:1px solid #cccccc; background:url(../images/blet_home.png) no-repeat center center;}
#subNavWrap .subNav .navHome a{display:inline-block; width:100%; height:100%;}
#subNavWrap .subNav .navBox{display:inline-block; width:260px; float:left; border-right:1px solid #cccccc; position:relative;}
#subNavWrap .subNav .navBox02{width:320px;}
#subNavWrap .subNav .navBox03{width:320px;}
#subNavWrap .subNav .navBox .navPos{display:inline-block; width:100%; height:64px; float:left; position:relative; z-index:3; box-sizing:border-box; padding:10px 30px 10px 20px; line-height:44px; cursor:pointer; font-size:18px;
                                    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#subNavWrap .subNav .navBox .navPos::after{display:inline-block; content:''; width:10px; height:10px; position:absolute; top:50%; margin-top:-5px; right:20px; background:url(../images/blet_arrow.png) no-repeat center center;}

#subNavWrap .subNav .navBox .navLinkArea{display:inline-block; width:calc(100% + 10px); height:300px; position:absolute; top:0; left:-5px; z-index:1; display:none;}
#subNavWrap .subNav .navBox .navLink{display:inline-block; width:calc(100% + 2px); position:absolute; top:0; left:-1px; z-index:2; box-sizing:border-box; padding:64px 0px 0px 0px; background:#ffffff; border-left:1px solid #cccccc; border-right:1px solid #cccccc; display:none;}
#subNavWrap .subNav .navBox .navLink .nLink{display:inline-block; width:100%; float:left; box-sizing:border-box; padding:10px 20px; line-height:24px; cursor:pointer; font-size:18px; border-bottom:1px solid #cccccc; position:relative;}
#subNavWrap .subNav .navBox .navLink .nLinkOn{display:none !important;}
#subNavWrap .subNav .navBox .navLink::before{display:inline-block; content:''; width:100%; height:1px; background:#cccccc; position:absolute; top:64px; left:0;}

#subNavWrap .navCenter{width:100%; max-width:1200px; margin:0 auto;}





@media screen and (max-width:1200px){
	

	
	/* sub Page */
	#subTopWrap{height:300px;}
   .subTop{font-size:18px;}
   .subTop .subTopTit{}
   .subTop .subTopTxt{}   
   

    #subTopWrap .subTopScrBtn{height:54px;}

   #subNavWrap .subNav .navHome{width:60px; height:60px;}
   #subNavWrap .subNav .navBox{width:250px;}
   #subNavWrap .subNav .navBox .navPos{height:60px; padding:10px 30px 10px 20px; line-height:34px; font-size:18px;}

   #subNavWrap .subNav .navBox .navLink{padding:60px 0px 0px 0px;}
   #subNavWrap .subNav .navBox .navLink .nLink{padding:10px 20px; line-height:20px; font-size:16px;}
   #subNavWrap .subNav .navBox .navLink::before{top:60px;}
   
   
   
   .subTopLogo{height:56px; margin-bottom:20px; margin-top:20px;}


	
}




@media screen and (max-width:850px){
	
	
	/* sub Page */
	
	#subTopWrap{height:auto; padding-bottom:30%;}
	.subTopBox1_1{height:62px !important; background:#ffffff !important; padding-bottom:0 !important;}
    .subTopBox1_1 .subTop{display:none;}

	
	.subTop{font-size:16px;}
   .subTop .subTopTit{}
   
   
   .subTopMovie .videoWrap02{bottom:0%;}
   
   

    #subTopWrap .subTopScrBtn{height:40px;}
	
	
	#subNavWrap .subNav .navHome{width:40px; height:50px; }
    #subNavWrap .subNav .navBox{width:25%;}
    #subNavWrap .subNav .navBox .navPos{height:50px; padding:10px; line-height:30px; font-size:16px;}
    #subNavWrap .subNav .navBox .navPos::after{display:inline-block; content:''; width:10px; height:10px; position:absolute; top:50%; margin-top:-5px; right:5px; background:url(../images/blet_arrow.png) no-repeat center center;}

    #subNavWrap .subNav .navBox .navLink{padding:50px 0px 0px 0px;}
    #subNavWrap .subNav .navBox .navLink .nLink{padding:10px; line-height:20px; font-size:14px;}
    #subNavWrap .subNav .navBox .navLink::before{top:50px;}

	.subTopLogo{height:50px; margin-bottom:20px; margin-top:20px;}
	
	.subNaviType01 ul li a{font-size:16px;}
	
}


@media screen and (max-width:640px){
	
		
	/* sub Page */
	/*#subTopWrap{height:300px; }*/
	.subTop{font-size:14px;}
   .subTop .subTopTit{padding-top:31px;}
   .subTop .subTopTxt{}
   
  
    #subNavWrap .subNav .navBox{width:40%;}
    #subNavWrap .subNav .navBox .navPos{height:50px; padding:10px; line-height:30px; font-size:14px;}
    #subNavWrap .subNav .navBox .navPos::after{display:inline-block; content:''; width:10px; height:10px; position:absolute; top:50%; margin-top:-5px; right:5px; background:url(../images/blet_arrow.png) no-repeat center center;}

    #subNavWrap .subNav .navBox .navLink{padding:50px 0px 0px 0px;}
    #subNavWrap .subNav .navBox .navLink .nLink{padding:10px; line-height:20px; font-size:14px;}
    #subNavWrap .subNav .navBox .navLink::before{top:50px;}
	
	
	.subTopLogo{height:44px; margin-bottom:10px; margin-top:10px;}
	
	.subNaviType01 ul li a{font-size:14px;}
	
	
	
	/* COMMON */

.goTopButton{width:36px; height:36px; bottom:0px; }

.goTopButton .goTopBarWrap .goTopBarBox::before{width:10px; height:10px; content:''; display:inline-block; position:absolute; top:0%; left:10%;
                                             border-left:2px solid #ffffff; border-bottom:2px solid #ffffff; transform:rotate(135deg) translate(-50%,-50%);}
.goTopButton .goTopBarWrap .goTopBarBox::after{width:10px; height:10px; content:''; display:inline-block; position:absolute; top:50%; left:10%;
                                             border-left:2px solid #ffffff; border-bottom:2px solid #ffffff; transform:rotate(135deg) translate(-50%,-50%);}



@keyframes goTopBtn01{

   0%{
	   top:40px;
	   opacity:.2;
	   }
   50%{
	   top:15px;
	   opacity:1;
	   
      }
   100%{
	  top:-20px; 
	  opacity:.2;
	   }	
	
}



@keyframes goTopBtn02{

   0%{
	   top:40px;
	   opacity:.2;
	   }
   50%{
	   top:15px;
	   opacity:1;
	   
      }
   100%{
	  top:-20px; 
	  opacity:.2;
	   }	
	
}



	
	
}


@media screen and (max-width:480px){
	
	

/* sub Page */
	/*#subTopWrap{height:250px; background-size:auto 250px;}*/
	.subTop{font-size:12px;}
   .subTop .subTopTit{font-size:3em;}
   .subTop .subTopTxt{}
   
   #subNavWrap .subNav .navBox .navPos{font-size:12px;}
   #subNavWrap .subNav .navBox .navLink .nLink{font-size:12px;}
   
  .subTopLogo{height:30px; margin-bottom:10px; margin-top:10px;}
  
  .subNaviType01 ul li a{font-size:12px;}


}

@media screen and (max-width:400px){	

	.subTop .subTopTit{font-size:2em;}
	
	.subTopLogo{height:20px;}
}