@charset "utf-8";
/*----------------------------------------

				레이아웃 

----------------------------------------*/
body {
	background:#efefef url("/img/common/bg.noise.50.png"); height:100%; 
	font-family:"Roboto","Noto Sans KR","NanumSquare", "NanumBarunGothic", "Nanum Gothic" ; 
	font-size:14px; font-weight:400; letter-spacing: -.5px; word-spacing:1.5px; line-height:1.2; word-break: keep-all; white-space: normal; /*text-align:justify ;*/
}
.btn { color:#000}
.btn.white:hover { color:#000}
/*프레임셋*/
.layout { margin:0 auto; width:100%; max-width: 1024px;  min-height: 100%; }

.footer {padding:0; position: relative; background-color: #fff; }
.footer li {text-align:center;}
.footer li.copyright { padding:20px 0; letter-spacing: 0px }

/*----------------------------------------

				컬러조정 

----------------------------------------*/
a:hover { color:#ff161e; }
nav a:hover { color:#ff161e; }
a, button, input[type="button"] { color:#3b424f;}
a:active, a:hover, a:focus { color:#ff161e; }

/*버튼*/
.btn.company { background:#ff161e; color:#fff !important; border:1px solid #871e9c; }
.btn.company:hover, .btn_black:focus {  background:#51165d; color:#fff !important; border:1px solid #390f42; }
.btn.green { background:#0c797d; color:#fff !important; border:1px solid #0f4446; }
.btn.green:hover {  background:#0f4446; color:#fff !important; border:1px solid #0f4446; }

/*페이지네비*/
.pagenavi a:hover { color:#000; }
.pagenavi a:hover::before { border-color:#000;}
.pagenavi .active, .pagenavi .active::before {background:#000; border-color:#000;}

/*온로프*/
input.onoff:checked + label span { background-color: #ff161e;  }
input.onoff:checked + label span::before { border:2px solid #ff161e;}
input.chck:checked + label span {background-color:#ff161e; border-color:#871e9c;}
input.chck + label {font-weight: 500}
input.chckround:checked + label {background-color:#ff161e; border-color:#871e9c;}

select:focus, input:focus, textarea:focus { /* outline: none; */ background-color:#fcefff; border-color:#ff161e;}

/*----------------------------------------

				공통 

----------------------------------------*/
/* 상단바로가기 */
.topBox { display: none; bottom:10px; left:50%; margin-left:500px; width:60px; height:60px; line-height:60px; text-align:center; display: inline-block; font-size: 2em; z-index: 500; background-color: rgba(255,255,255,.8); }	

/*----------------------------------------

				GNB 

----------------------------------------*/
.hbar { position: fixed; top:0; padding:0 40px; border-bottom:1px solid #eaeaea;  z-index:400; width:1000px; left:50%; margin-left:-500px;  background-color: #fff;box-shadow:0px 5px 5px -4px rgb(100 100 100 / 50%); height:100px;
display: flex; display: -webkit-flex;  -webkit-align-items: center; align-items: center;
}
.hbar span {letter-spacing:0; font-weight:700; vertical-align:bottom; padding-left:20px}
@media screen and (max-width:768px){
	.hbar { left:inherit; margin-left:inherit; width:100%; height:50px; padding:0 20px;}
	.hbar a{ width:25%;}
	.hbar img{ width:100%;}
	.hbar span { font-size:.8em;}
}
header { position: fixed;  z-index:1000; display:none ; width:1000px; left:50%; margin-left:-500px;}

header > ul {position: relative; z-index:1500; height:100%; background-color: #fff; }
header > ul:after {content:""; clear:both; display:block; } 
header .wrapmenu {position: relative; z-index:1500; height:100%; background-color: #fff;box-shadow:0px 5px 5px -4px rgb(100 100 100 / 50%); display:block }


header .cover { padding: 20px 40px; text-align:center}
header .cover span { font-size:1.2em; }
header .cover p { font-size:2em;  font-weight: 600;}

header ul.menu { padding:20px 40px;  }
header ul.menu:after {content:""; clear:both; display:block; } 
header ul.menu li { width:33.33333334%; float:left; padding-right:20px}
header ul.menu.tab2 li { width:50%;}
header ul.menu p.ti {font-size: 1.5em; font-weight: 600; margin-bottom: 20px}
header ul.menu a {margin-bottom: 20px; display: inline-block; width: 100%; font-size: 1.1em; line-height: 1.4;}
header ul.menu a span { display: block; font-size:.8em; font-weight: 700; margin-bottom: 4px;  color: #e60012; }

header .menuHigh {border-bottom: 1px solid #da9da2; margin-bottom: 20px; text-align: center;}
header .gnb_bg { position:fixed; left:0; top:0; width:1000px; left:50%; margin-left:-500px; height:100%; background:#fff; opacity:.8; z-index:1100; }

.btnss {display: inline-block; padding: 10px 20px; margin-top: 10px; background-color:#e60012 ; color: #fff;transition: 0.3s; border-radius: 10px 0;}
.btnss:hover {background-color: #97000c; color: #fff;}
.openGnb { position: fixed; top:0; left:50%; margin-left:500px; width:60px; height:60px; line-height:60px; text-align:center; display: inline-block; font-size: 2em; z-index: 500; background-color: rgba(255,255,255,.8)  }
.closeGnb { position: fixed; top:0; left:50%; margin-left:500px; width:60px; height:60px; line-height:60px; text-align:center; display: inline-block; font-size: 2em; z-index: 500; background-color: rgba(255,255,255,1);  z-index:1101;  }
.gohome { width:100%;}
.gohome li { float:left; width: 50%;}

.motitle { display:none}
@media screen and (max-width:768px){
	header { width:100%; left:inherit; margin-left:inherit;  }
	header .wrapmenu { position:fixed; height:calc(100% - 50px); overflow-y: hidden;}
	header ul.menu.tab2 li,
	header ul.menu li { width:100%; }

	.openGnb {  top:0; left:inherit; margin-left:inherit;  right:0;  width:50px; height:50px; line-height:50px; }
	.closeGnb {  top:0; left:inherit; margin-left:inherit;  right:0;  width:50px; height:50px; line-height:50px;  z-index:2000;}
}


/*----------------------------------------
				
				페이지 

----------------------------------------*/
.mainwin {width:1000px; margin:0 auto; background-color:#fff; margin-top:100px; background-position:center; background-size:cover}
.mainwin .firstCell { position: relative; height:800px; background-position:center; background-size:cover}
.mainwin .firstCell div.logo { position:absolute; left:0; top:0; padding:50px; }
.mainwin .firstCell div.logo span { display: block; }
.mainwin .firstCell div.logo span:nth-child(2) { font-size:1.5em; font-weight:700; padding-top:20px;}

.mainwin .firstCell div.hcopy { position:absolute; right:0; bottom:0; text-align:right; padding:50px; }

.mainwin .firstCell div.hcopy span { display: block; }
.mainwin .firstCell div.hcopy span:nth-child(1) { font-size:1.2em; font-weight:700;color:#e60012;}
.mainwin .firstCell div.hcopy span:nth-child(2) { font-size:4em; font-weight:700;}

.mainwin .firstCell div.hcopy a {display: inline-block; padding: 10px 20px; margin-top: 10px; background-color:#e60012 ; color: #fff;transition: 0.3s; border-radius: 10px 0;}
.mainwin .firstCell div.hcopy a:hover {background-color: #97000c;}
@media screen and (max-width:768px){
	.mainwin {width:100%; margin-top:50px;} 
	.mainwin .firstCell {  height:600px;}
	.mainwin .firstCell div.logo img {width:100%;}
	.mainwin .firstCell div.logo {  padding:50px 20px; text-align:center; width:100%; }
	.mainwin .firstCell div.logo span:nth-child(2) { font-size:1.2em; padding-top:10px;}
	.mainwin .firstCell div.hcopy { padding:30px 20px; text-align:center; width:100%; }
	.mainwin .firstCell div.hcopy span:nth-child(2) { font-size:2em; font-weight:700;}
	.mainwin .firstCell div.hcopy.withbg span:nth-child(2) { font-size:1.5em; font-weight:700;}
}

.subwin {width:1000px; margin:0 auto; background-color:#fff;}
.subwin:after {content:""; clear:both; display:block; } 
.subwin li { position: relative;  width:33.333333334%; float:left; height:300px; background-position:center; background-size:100%; transition: 0.3s; }
.subwin.tab2 li { width:50%; }
.subwin li div { position:absolute; bottom:0; padding:10px; background-color:rgba(255,255,255,.8); width:90%; margin: 0 0 5% 5%; backdrop-filter: blur(3px) grayscale(100%); -webkit-backdrop-filter:blur(3px) grayscale(100%);}
.subwin li div span { display:block; }
.subwin li div span:nth-child(1) { font-size:1em; font-weight:700; color:#e60012;}
.subwin li div span:nth-child(2) { font-size:1.1em; font-weight:400; line-height: 1.4; margin-top: 4px;}

.subwin li:hover {background-size: 110%;}
@media screen and (max-width:768px){
	.subwin {width:100%;} 
	.subwin.tab2 li,
	.subwin li {  width:100%;  height:300px;}
}

.remocon {position: relative; width:1000px; margin:0 auto; background-color:#fff; }
.remocon .navibox { padding: 20px 50px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; text-align: center; } 
.remocon .navibox:after {content:""; clear:both; display:block; } 
.remocon .navibox a {display: inline-block; line-height:59px; font-size: 1.2em; font-weight: 500}
.remocon .navibox a:nth-child(2) { display: none;}
.remoconboxshadow {/*box-shadow: 0px -2px 2px rgba(0,0,0,0.3);*/ position: fixed;}
.remoconboxshadow .navibox { padding: 0 50px;}
.remoconboxshadow a {color:rgb(49, 49, 49)}
@media screen and (max-width:768px){
	.remocon {width:100%; } 
	.remoconboxshadow {/*box-shadow: 0px -2px 2px rgba(0,0,0,0.3);*/ background-color: #333; border-radius: 10px 10px 0 0; margin:0 10px;width:calc(100% - 20px)}
	.remoconboxshadow a {color:#fff}
	.remoconboxshadow .navibox {border:none;}
	.remocon .navibox { padding:0 20px; }
	.remocon .navibox a {line-height:49px; font-size: .8em; }
	.remocon .navibox a:nth-child(2) { display: inline-block; font-size:1.5em}
}

.pagecover  { position: relative; width:1000px; margin:0 auto; background-color:#fff; margin-top:100px; background-position:center; background-size:cover;
display: flex; display: -webkit-flex;  -webkit-align-items: center; align-items: center; padding: 150px 0;}
.pagecover li { padding:50px;  margin-left:100px; width:30%; background-color:rgba(255,255,255,.8); text-align:center;  backdrop-filter: blur(3px) grayscale(20%); -webkit-backdrop-filter:blur(3px) grayscale(20%);}
.pagecover li div span { font-size:2em; display:block; padding:5px 0 0 0; }
.pagecover li div i { font-size:.5em; color:#e60012}
.pagecover p {line-height: 1.6;}
@media screen and (max-width:768px){
	.pagecover {width:100%;  margin-top:50px; padding-top: 600px;background-position:center; } 
	.pagecover li { width:100%; margin-left:inherit; position:absolute; bottom:0 }
}

.pagewin  { position: relative; width:1000px; margin:0 auto; background-color:#fff; margin-top:100px; padding:50px;}
.pagewin li.t1 { font-size:1em; color:#e60012; font-weight:700 }
.pagewin li.t2 { font-size:1.2em; padding:20px 0 40px 0; color:#666;  line-height:1.6  }
.pagewin li.t2 span {font-weight: 700; font-size: .8em;}
.pagewin li.t3 { font-size:1.2em;  font-weight:700;  }
.pagewin li.t4 h1 { font-size:3em; margin:0; padding:0; padding:10px 0; text-align:left;}
.pagewin li.t5 { font-size:1.1em;  font-weight:400;  }
.pagewin li.t5 span {font-weight: 700;}

.pagewin li.t1 + li.t3 {padding:10px 0 0 0} 
.pagewin li.t4 + li.t5  { padding-bottom:50px;}
/* .pagewin li.t4 + li.t2 { padding:0 0 20px 0; }*/
.pagewin li.t2 + li.c1 { padding-top:0;}


.pagewin li.c1 { font-size:1.2em; line-height:1.6; word-break:normal}
.pagewin li.c1:after {content:""; clear:both; display:block; } 

.pagewin li.c1 .h2Caption {  font-size:1.8em; }
.pagewin li.c1 p + .h2Caption { padding-top:20px;}
.pagewin li.c1 h2 { font-size:1.6em; margin:0; padding:0; color:#e60012;  margin-bottom:15px; line-height: 1; border-left: 5px solid #e60012; padding-left: 10px;}
.pagewin li.c1 h3 { font-size:1.2em; margin:0; padding:0; margin-bottom:15px; border-left: 3px solid #000; padding-left: 10px; line-height: 1;}
.pagewin li.c1 * + h2 {margin-top:50px;}
.pagewin li.c1 * + h3 {margin-top:30px;}
.pagewin li.c1 h2.qna {  color:#000; text-decoration: underline; font-weight: 400; font-size: 1em; }
.pagewin li.c1 h2.qna span { font-weight: 900; color:#e60012}
.pagewin li.c1 h2.qna + p span { font-weight: 900;}
.pagewin li.c1 h2.italic { font-style:italic }

.pagewin li p.tip {  border:1px solid #ccc; padding:20px; font-size:14px; color:#000}
.pagewin li p.tip span { font-weight:700; display:block; font-size:14px;  }
.pagewin li p.tip em { font-weight:700; color:#e60012; }
.pagewin li p.tip i { font-size:.8em}
.pagewin li.c1 p.speak { font-style:italic; color:#312020; font-family: "Nanum Myeongjo"; font-weight: 700;}
.pagewin li.c1 p.speak span {display: block; padding-top: 10px; font-size: .9em; font-family: "Noto Sans KR"; }
.pagewin li.c1 p.annotate { font-size:.8em; padding-left:40px; padding-right: 20px; padding-top:15px; padding-bottom:15px; border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; background-color:rgba(255,255,255,.5); color:#1558bd; line-height:1.2}
.pagewin li.c1 p.annotate span { display:block;}
.pagewin li.c1 p.annotate span + span { margin-top:10px;}
.pagewin li.c1 p.annotate em { display:inline-block; width:15px; margin-left:-15px;}
.pagewin li.c1 p.annotate em i { font-size:.2em; }

.pagewin li.c1 sup {color:#1558bd; line-height:1; font-weight:700; font-size:.8em; padding:0 2px;}
.pagewin li.c1 sup i { font-size:.5em}
.pagewin li.c1 p + div,
.pagewin li.c1 p + p { margin-top:15px; }

@media screen and (max-width:768px){
	.pagewin {width:100%;  padding:50px 20px; margin-top:50px;} 
	.pagewin li.c1 { font-size:1em; line-height:1.6}	
	.pagewin li.t4 h1 { font-size:2.2em;}
	
}
/*이미지 첨부*/
.imgbox {padding:20px 0}
.imgbox::after,
.imgbox::before {content:""; clear:both; display:block; } 
.imgbox img {width:100%}
.imgbox span { display: block; padding: 10px; text-align: right; font-size: .8em; line-height: 1.2; background-color: #ebebeb;}

.optSlide i {display: none;}
.optRight {float:right; width:350px; margin-left:30px}
.optLeft {float:left; width:350px; margin-right:30px}

.optTab2 li { float:left; width:49.6%;}
.optTab2 li:first-child { margin-right:.4%}

.optTab3 li { float:left; width:33%;}
.optTab3 li:nth-child(2) {margin:0 .5%}

.optFixnoWidth { width:inherit}

@media screen and (max-width:768px){
	.optSlide div { width:inherit; display: block; overflow-x: auto;}
	.optSlide div > img {width:inherit; height:400px;}
	.optSlide i {display: block; font-size: 2em;color:#e60012; text-align: center;}
	.optRight {width:100%; margin-left: 0;}
	.optLeft {width:100%; margin-right:0}
	.optFix {width:50%; margin-left:10px}
	.optTab2 li { width:100%;}
	.optTab2 li:first-child { margin-right:0%; margin-bottom:5px}
	.optTab3 li { width:100%;}
	.optTab3 li:nth-child(2) {margin:5px 0;}
	.optFull { width:100vw; margin-left:-20px;}
}

/* 페이지 별 옵션 */

.whence {display: block; padding: 20px 0; text-align: right;}
.whence span {font-weight: 700;}

.textHighlight {padding: 20px 0; text-align: center; font-family:"Nanum Brush Script" ; font-size: 2em;}
.textHighlight:after {content:""; clear:both; display:block; } 

/*외부 링크 관련*/
.btnBox { padding: 20px 0; text-align: center;}
.btnBox a { display:inline-block;  text-decoration:none; padding: 15px 30px;  transition: 0.3s; vertical-align:middle; text-align:center; white-space:nowrap; font-weight:700; letter-spacing:0px; border:1px solid rgba(0,0,0,.2); border-radius: 10px; }
.btnBox a:hover { border:1px solid #e60012; background-color:#e60012; color: #fff;}

/*푸터*/
footer {width:1000px; margin:0 auto; }
footer:after {content:""; clear:both; display:block; } 
@media screen and (max-width:768px){
	footer {width:100%;} 
}
footer ul li {text-align: center;}
footer ul li.sns { padding: 50px 0; }
footer ul li.logo_rcy_bw { padding: 20px 0 20px 0; }
footer ul li.addresss { padding: 0; font-size: 1.2em}
footer ul li.copyrights { padding: 10px 0 80px 0;font-size: 1em;  }
@media screen and (max-width:768px){
	footer ul li.addresss { padding: 0; font-size: .8em}
	footer ul li.copyrights { font-size: .8em}
}

.poll {padding: 30px 0 ; text-align: center; border-bottom:1px solid #eaeaea;}
.poll a:first-child { margin-right: 20px;}
@media screen and (max-width:768px){
	.poll a {width: 80%;}
	.poll a:first-child { margin-right: 0; margin-bottom: 5px;}
}

.btn_sns {display:inline-block; border-radius:8px; background-color:#e8e8e8; color:#fff;font-family:"Questrial", "Noto Sans KR"; height:50px; width:50px; padding:0px;margin:1px ;  transition: 0.3s; 
	background-size: 70%; background-position: center; background-repeat: no-repeat;
	 }
.btn_sns:hover {background-color:#ed1c24;  transition: 0.3s; }
.btn_rc { background-image:url('../img/icon_rc.png');}
.btn_fb { background-image:url('../img/icon_fb.png') ;}
.btn_is  { background-image:url('../img/icon_is.png'); }
.btn_tw { background-image:url('../img/icon_tw.png') ; }
.btn_bl { background-image:url('../img/icon_bl.png') ; }
.btn_ytb { background-image:url('../img/icon_ytb.png') ; }
.btn_rcy { background-image:url('../img/icon_rcy.png') ; }

.tab {  display:flex;  display: -webkit-flex; margin-top:2em; margin-bottom:2em; }
.tab.center_v { align-items: center;}
.tab.center_h {justify-items: center;}
.tab > * { display:flex;  display: -webkit-flex; flex-direction: column; }
/*.tab > * { flex: 1 1 40%;}*/
.tabC > * {align-items: center;}
.tab2f > * { width: 50%;}
.tab3f > * { width: calc(100% / 3);}
.tab4f > * { width: 25%;}
.tab5f > * { width: 20%;}

.tab2w > * { flex: 1 1 40%;}
.tab3w > * { flex: 1 1 25%;}
.tab4w > * { flex: 1 1 25%;}
.tab5w > * { flex: 1 1 20%;}

@media screen and (max-width:768px){
	.tab > * ,
	.tab2f > * ,
	.tab3f > * ,
	.tab4f > * ,
	.tab5f > * { width: 100%;}	
}

/*======= ==================================================================================================

모바일

=========================================================================================================*/

/*페이지 가로 축소*/
@media screen and (max-width:1000px){

}
/*아이패드 프로*/
@media all and (width:1024px) and (height:1366px) { 

}
/*구형 아이패드*/
@media all and (width:768px) and (height:1024px) { 

}


/*+++++++++++++++++++++++++++++++++++
모바일 베이직 아이패드 포함 
+++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width:768px){

}


/*구형 아이폰 678 /갤럭시 width 375 까지 */
@media screen and (max-width:414px){

}
/*구형 아이폰 5 이전*/
@media screen and (max-width:320px){

}