@charset "utf-8";

/* index */
header.index {}

/*header {background: url(../images/pattern.jpg) repeat;}*/

header .visual {width: 100%; height: 700px; background: url(../images/slide_01.jpg) no-repeat center; margin: 0 auto; -webkit-background-size: cover;
background-size: cover;}


header h1 { position: absolute; left:30px; top: 0; z-index: 31;}
header h1 a img{width: 150px;}
header > ul { display: flex; position: absolute; right: 30px; top: 0; z-index: 30; width: 170px;}

header > ul li { flex: 1; padding: 0 0 0 18px; line-height: 70px; }
header > ul li a:before { content: ""; display: inline-block; width:23px; height:23px; background: url(../images/icon.png) no-repeat; vertical-align: middle;}
header > ul li:first-child a:before { background-position: 0 0;}
header > ul li:last-child a:before { background-position:-23px 0;}

header .lnb_bg{ position: absolute; left: 0; top: 0; padding: 0 232px; width: 100%; height: 71px; background: #920f2a; box-sizing: border-box;}
header #lnb {margin: 0 auto; z-index: 30; padding: 0 232px; width: 100%; background: #920f2a; box-sizing: border-box;}

@media (min-width: 768px) and (max-width: 1920px){
	header #lnb {margin: 0;}
}

header #lnb nav { position: relative; z-index: 30; border-bottom: 1px solid rgba(255,255,255,0); text-align: center; font-size: 0;}
header #lnb nav:hover{border-bottom: 1px solid rgba(255,255,255,1);  transition: all .5s;}
header #lnb nav > ul { display: inline-block; overflow: hidden; height:70px; transition: all 0.5s;}
header #lnb nav > ul:hover { overflow: visible;}
header #lnb nav + div { position: absolute; left: 0; top: 0; z-index: 29; padding: 0 0px; width: 100%; height:0; background: #920f2a; opacity: 0; transition: all .5s; box-sizing: border-box; background-clip: content-box;}
header #lnb nav:hover + div { height: 330px; opacity: 1;}
header #lnb nav > ul > li { display: inline-block; position: relative;}
header #lnb nav > ul > li > a { display: block; position: relative; width: 160px; height: 69px; font-size: 18px; color:#fff; line-height: 69px;}

@media (min-width: 768px) and (max-width: 1920px){
	header #lnb nav > ul > li > a { width: 140px;}
}


header #lnb nav > ul > li > a:after { content: ""; position: absolute; left:50%; bottom: -1px; width:0; height: 2px; background: #fff; transition: all 0.5s;}
header #lnb nav > ul > li:hover > a:after  { left: 0; width: 100%;}

header #lnb nav > ul ul { position: absolute; width: 100%; height: 230px; padding: 22px 0 0; text-align: center; opacity:0; transition: all 0.5s;}
header #lnb nav > ul:hover ul { opacity: 1;}

header #lnb nav > ul ul li { line-height: 39px;}
header #lnb nav > ul ul a { position: relative;font-size: 14px; color:#fff; transition: all 0.5s;}
header #lnb nav > ul ul a:hover { color:#2acef1; }
header #lnb nav > ul ul a:after { content: ""; position: absolute; left:50%; bottom: -7px; width:0; height: 2px; background: #2acef1; transition: all 0.5s;}
header #lnb nav > ul ul a:hover:after  { left: 0; width: 100%;}


footer { margin: 80px 0 0; background: #272f3c;}
footer > div { position: relative; width:1175px; padding: 45px 0; margin: 0 auto;}
footer > div > a { position: absolute; right: 0; top: -25px; width: 39px; height: 49px; background: url(../images/icon.png) no-repeat -157px 8px #22a5d5; color:transparent;}
footer > div .left { float: left; line-height: 100%;}
footer > div .left div a { margin: 0 10px 0 0; font-size: 13px; color:#fff; }
footer > div .left p { padding: 13px 0 0; line-height: 21px; font-size: 13px; color:#747b85;}
footer > div .left p span { padding: 0 13px 0 0;}
footer > div .right { float: right; position: relative;}
footer > div .right select { width: 134px; height: 29px; background:#272f3c; border:none; border-bottom: 1px solid #7d828a; font-size: 10px; color:#fff; text-indent: 20px; appearance:none; -webkit-appearance:none; -moz-appearance:none; }
footer > div .right select::-ms-expand { display: none;}
footer > div .right:after { content: ""; position: absolute; right: 20px; top:50%; margin-top: -3px; width: 8px; height: 6px; background: url(../images/icon.png) no-repeat -221px -5px;   }

.contents { width: 1180px; margin: 0 auto;}
.h2 { position: relative; padding: 55px 0 53px; font-size: 36px; color:#222; line-height: 100%; text-align: center; font-weight: normal;}
.h2:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 50px; height: 1px; background: #aaa; transform: translateX(-50%);}
.h2 + p { padding:46px 0 54px; font-size: 18px; color:#666; text-align: center; line-height: 30px;}
.h3 { margin: 50px 0 20px; font-size:18px; color:#222; font-weight: normal;}
.h3:before { content: ""; display: inline-block; margin: 0 8px 0 0; width: 4px; height: 4px; background: #00a5e1; vertical-align:5px;}
.noti { font-size: 14px; color:#888;}
.noti:before { content: ""; display: inline-block; margin: 0 3px 0 0; width: 15px; height: 15px; background: url("../images/icon.png") no-repeat -336px -5px; vertical-align: -3px;}

input[type="checkbox"] { position: absolute; left: -4000%;}
input[type="checkbox"] + label { font-size: 14px; color:#222; line-height: 27px;}
input[type="checkbox"] + label:before { content: ""; display: inline-block; margin: 0 8px 0 0; width: 27px; height: 27px; background: url("../images/icon.png") no-repeat -97px -60px; vertical-align:-8px;}
input[type="checkbox"]:checked + label:before { background-position:-129px -60px ;}

.btn_center { text-align: center;}
label + .btn_center { padding: 65px 0 0;}
.btn_type1 { display: inline-block; width: 120px; height:45px; background: #042e6f; text-align: center; line-height: 45px; color:#fff; font-size: 13px;}