@charset "utf-8";

.business{display:table; width:100%; word-break:keep-all; border-radius:7px; overflow:hidden}
.business div.con{display:table-cell; position:relative; width:25%; background:#f0f0f0; background-repeat:no-repeat}
.business div.con.business01{background-image:url(/img/main/business_bg01.jpg)}
.business div.con.business02{background-image:url(/img/main/business_bg02.jpg)}
.business div.con.business03{background-image:url(/img/main/business_bg03.jpg)}
.business div.con.business04{background-image:url(/img/main/business_bg04.jpg)}
.business div.con>div{text-align:center; transition:all linear .3s}
.business div.con div .tag{display:inline-block; margin-top:13%; padding:0px 13px 0px; border-radius:2px}
.business div.con div .tit{margin-top:7.6%; padding:0px 10%; font-size:1.85em; letter-spacing:-.5px; line-height:1.3}
.business div.con div .tit span{display:block; font-size:.68em; letter-spacing:-1px; line-height:170%}
.business div.con div .txt{margin:5% auto; padding:0px 10% 45px; max-width:360px; font-size:.88em; transform:rotate(0.03deg)}
.business div.con div .txt:before,
.business div.con div .txt:After{display:block; content:''; position:absolute; bottom:0px; left:50%; margin-left:-12px; width:25px; height:1px; background:rgba(0,0,0,.3)}
.business div.con div .txt:before{-webkit-transform:rotate(90deg); transform:rotate(90deg)}
.business div.con div.off a{display:block;  min-height:630px}
.business div.con div.off .tag{background:#3c3c3c; color:#fff}
.business div.con div.off{transform: perspective( 1000px ) rotateY( 0deg );	backface-visibility: hidden}
.business div.con div.on{transform: perspective( 1000px ) rotateY( 180deg ); 	backface-visibility: hidden}
.business div.con.show > .off{
	transform: perspective( 1000px ) rotateY( -180deg );
}
.business div.con.show > .on{
opacity:1; 
	transform: perspective( 1000px ) rotateY( 0deg );
}
.business div.con div.on{opacity:0; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,70,200,.9); ; z-index:2}
.business div.con div.on *{color:#fff}
.business div.con div.on .tag{background:#fff; color:#0e49b6}
.business div.con div.on ul.link{margin-top:48px; font-size:0px}
.business div.con div.on ul.link li{display:inline-block; margin:20px 0px; width:50%; max-width:150px}
.business div.con div.on ul.link li a{display:inline-block; text-decoration:none}
.business div.con div.on ul.link li a:before{display:block; content:''; margin:0px auto 15px; width:80px; height:80px; border:2px solid #fff; border-radius:100px; background-image:url(/img/main/ic_business.png); background-repeat:no-repeat; background-size:400px}
.business div.con div.on ul.link li:nth-child(1) a:before{background-position:-10px center}
.business div.con div.on ul.link li:nth-child(2) a:before{background-position:-110px center}
.business div.con div.on ul.link li:nth-child(3) a:before{background-position:-210px center}
.business div.con div.on ul.link li:nth-child(4) a:before{background-position:-310px center}
.business div.con div.on ul.link li a:hover:before{background-color:#fff; background-image:url(/img/main/ic_business_on.png); background-size:400px}

.qna{position:relative; overflow:hidden; margin:60px 0px}
.qna:After{display:block; content:''; clear:both; margin:auto; width:6px; height:6px; background:#ddd; border-radius:100px; box-shadow:-10px 0px 0px #ddd, 10px 0px 0px #ddd; }
.qna>h3{position:relative; float:left; width:18%;  color:#0e49b6; font-size:1.9em}
.qna>h3:After{display:block; content:''; position:absolute; right:-10%; top:50%; width:90%; height:1px; background:#ddd; z-index:-1}
.qna>h3 span{padding-left:10%; padding-right:20px; background:#fff}
.qna>ul{float:left; width:82%; margin-bottom:40px; white-space:nowrap; font-size:0px}
.qna>ul>li{position:relative; display:inline-block; vertical-align:top; margin-left:6%; min-width:17%; padding-left:70px; letter-spacing:-.5px; color:#222}
.qna>ul>li:before{display:block; content:''; position:absolute; left:0px; top:0px; width:60px; height:60px; background-image:url(/img/main/ic_qna.png); background-repeat:no-repeat; background-position:-20px -25px}
.qna>ul>li:nth-child(1):before{background-position-x:-20px}
.qna>ul>li:nth-child(2):before{background-position-x:-120px}
.qna>ul>li:nth-child(3):before{background-position-x:-220px}
.qna>ul>li:nth-child(4):before{background-position-x:-320px}
.qna>ul>li>p{font-size:1.05em; transform:rotate(0.03deg)}
.qna>ul>li>p.tel{padding-top:10px; font-size:1.4em}
.qna>ul>li span.small{font-size:.9em; color:#666}

.recruit{position:relative}
.recruit>.h3Box,
.recruit>.list ul li{height:230px}
.recruit>.h3Box{position:absolute; padding:1.8% 2.5%; width:19.7%; border:2px solid #333; border-radius:8px}
.recruit>.h3Box h3{font-size:2.3em; color:#1b1b1b}
.recruit>.list{margin-left:20%; width:80%; overflow:hidden}
.recruit>.list ul{position:relative; font-size:0px; white-space:nowrap; word-break:keep-all}
.recruit>.list ul li{display:inline-block; vertical-align:top; margin:0px .5%; padding:2.6% 3%; width:24%; background:#f5f5f5; white-space:normal; border-radius:8px}
.recruit>.list ul li.ih{background:#ebf0f9}
.recruit>.list ul li .tag{font-size:.92em; transform:rotate(0.03deg)}
.recruit>.list ul li .tit{font-size:1.15em; margin:20px 0px 40px; height:55px; overflow:hidden}
.recruit>.list ul li .date{font-size:.9em; color:#888}
.recruit>.num{position:absolute; left:2.5%; bottom:20px; color:#666; font-size:.95em}
.recruit>.control{position:absolute; left:13.8%; bottom:20px; padding:0px 20px; background:#222; border-radius:3px; font-size:0px}
.recruit>.control li{display:inline-block;}
.recruit>.control li a{display:block; position:relative; width:22px; height:34px; text-indent:-5000px}
.recruit>.control li a:before,
.recruit>.control li a:after{display:block; content:''; position:absolute}
.recruit>.control li.stop a:before{left:50%; top:50%; margin-left:-3px; margin-top:-4px; width:2px; height:8px; box-shadow:4px 0px 0px #fff; background:#fff}
.recruit>.control li.prev a:before,
.recruit>.control li.next a:before{top:50%; left:50%; margin-left:-8px; width:17px; height:2px; background:#fff}
.recruit>.control li.prev a:after,
.recruit>.control li.next a:after{top:50%; margin-top:-2px; width:4px; height:4px; border:2px solid #fff; border-width:2px 2px 0px 0px}
.recruit>.control li.prev a:after{left:2px; -webkit-transform:rotate(-135deg); transform:rotate(-135deg)}
.recruit>.control li.next a:after{right:2px; ; -webkit-transform:rotate(45deg); transform:rotate(45deg)}
.recruit>.btn_more{position:absolute; left:2.5%; top:110px}
.recruit>.btn_more a{display:inline-block; position:relative; padding-left:16px; font-size:.9em; color:#666}
.recruit>.btn_more a:After,
.recruit>.btn_more a:before{display:block; content:''; position:absolute; left:0px; top:9px;  width:9px; height:1px; background:#aaa}
.recruit>.btn_more a:before{-webkit-transform:rotate(90deg); transform:rotate(90deg)}

.banNoti{padding:100px 4%}
.banNoti:After{display:block; content:''; clear:both;}
.banr>li a,
.notice>p.ic{font-size:1.1em}
.banr>li a:before,
.notice>p.ic a:before{display:block; content:''; margin:0px auto 20px; width:100px; height:100px; border-radius:500px; background-color:#009fdc;; background-image:url(/img/main/ic_banr.png); background-repeat:no-repeat; background-size:100px}
.notice>p.ic a:before{background-color:#0e49b6;}
.banr>li:nth-child(1) a:before{background-position:center 0px}
.banr>li:nth-child(2) a:before{background-position:center 25%}
.banr>li:nth-child(3) a:before{background-position:center 50%}
.banr>li:nth-child(4) a:before{background-position:center 75%}
.notice>p.ic a:before{background-position:center 100%}
.banr{float:left; width:53%; font-size:0px}
.banr>li{display:inline-block; text-align:center; width:25%}
.banr>li a{display:block}
.notice{float:right; position:relative; width:43.5%}
.notice:before{display:block; content:''; position:absolute; left:-50px; top:20%; width:100px; height:0px; border:40px solid #0e49b6;  border-width:15px 100px; border-color:transparent #0e49b6 transparent transparent}
.notice>p.ic{width:100px; position:relative; text-align:center; z-index:1}
.notice>.list{position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); margin-left:30%; width:70%; background:#0e49b6; border-radius:8px; height:190px; overflow:hidden}
.notice>.list *{color:#FFF}
.notice>.list>ul>li{display:flex; align-items:center; padding:6% 8.5%; height:190px; }
.notice>.list>ul>li>p{font-size:1.15em; transform:rotate(0.03deg); word-break:keep-all}
.notice>.list>ul>li .date{display:block; font-size:.8em; margin-bottom:15px}
.notice .control li{position:absolute; left:60%;}
.notice .control li a{display:block; width:60px; height:30px; text-indent:-5000px; overflow:hidden}
.notice .control li a:before,
.notice .control li a:after{display:block; content:''; position:absolute; top:14px; left:20px; width:13px; height:4px; background:#0e49b6; border-radius:1px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg)}
.notice .control li a:after{margin-left:7px; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.notice .control li.prev{ top:-60px}
.notice .control li.next{ bottom:-60px}
.notice .control li.next a{-webkit-transform:rotate(-180deg); transform:rotate(-180deg)}
.notice .num{position:absolute; right:20px; top:20px; font-size:.8em}


/*******************************************************************************************************************/


@media screen and (max-width:800px){
	.business{display:block; white-space:nowrap; overflow-x:auto}
	.business div.con{display:inline-block; vertical-align:top; margin-right:1%; width:80%; height:460px;  border-radius:7px; white-space:normal; overflow:hidden; background-position:center bottom; background-size:cover}
	.business div.con div.off a{height:400px}
	.business div.con div .tit{padding:0px 6%}
	.business div.con.business03 div .tit span{font-size:.6em}
	.business div.con div.on ul.link{margin-top:25px}
	.business div.con div.on ul.link li{margin:10px 0px; width:40%; max-width:150px}
	.business div.con div.on ul.link li a{display:inline-block; text-decoration:none}
	.business div.con div.on ul.link li a:before{width:60px; height:60px; background-size:300px !important}	
	.business div.con div.on ul.link li:nth-child(1) a:before{background-position:-8px center}
	.business div.con div.on ul.link li:nth-child(2) a:before{background-position:-82px center}
	.business div.con div.on ul.link li:nth-child(3) a:before{background-position:-160px center}
	.business div.con div.on ul.link li:nth-child(4) a:before{background-position:-235px center}
	.qna{margin-top:30px}
	.qna:After{display:none;}
	.qna>h3{float:none; width:100%;  font-size:1.9em; margin-bottom:20px; }
	.qna>h3:After{display:none}
	.qna>h3 span{padding-left:0%}
	.qna>ul{float:none; width:100%; overflow:hidden; margin:0px; white-space:normal}
	.qna>ul>li{position:relative; display:block; margin-left:0%; padding-left:50px; padding-top:5px; height:40px; letter-spacing:-1px;}
	.qna>ul>li:before{width:40px; height:40px; background-size:250px; background-position-y:-12px}
	.qna>ul>li:nth-child(1):before{background-position-x:-12px}
	.qna>ul>li:nth-child(2):before{background-position-x:-74px}
	.qna>ul>li:nth-child(3):before{background-position-x:-136px}
	.qna>ul>li:nth-child(4):before{background-position-x:-198px}
	.qna>ul>li>p.tel{padding-top:0px}
	.recruit>.h3Box{position:static; padding:0px; width:100%; border:0px; height:auto}
	.recruit>.h3Box h3{font-size:2em}
	.recruit>.list{margin-left:0%; margin-top:10px; width:100%; overflow-x:auto}
	.recruit>.list ul{position:relative; font-size:0px; white-space:nowrap; word-break:keep-all}
	.recruit>.list ul li{padding:30px; width:250px; height:190px}
	.recruit>.list ul li .tit{margin-bottom:15px; height:70px}
	.recruit>.num{position:absolute; left:120px; bottom:auto; top:10px}
	.recruit>.control{display:none; position:absolute; left:50%; bottom:-40px; margin-left:-40px; padding:0px 20px; background:#222; border-radius:3px; font-size:0px}
	.recruit>.btn_more{position:absolute; left:auto; right:0px; top:10px}
	.banNoti{padding:40px 0px}
	.banr{float:none; width:100%}
	.banr>li{vertical-align:top; word-break:keep-all; line-height:1.3em}
	.banr>li a:before{transform:scale(.8, .8); -webkit-transform:scale(.8, .8); margin-bottom:0px}

	.notice{float:none; padding:60px 0px; width:100%}
	.notice p.ic a:before{margin-bottom:10px}
	.notice .control li.prev{ top:-0px}
	.notice .control li.next{ bottom:-0px}
}

/*·¹À̾îÆ˾÷*/
#layerpop {position:absolute; top:120px; left:120px; z-index:500000; }
#layerpop>div { display:inline-block; vertical-align:top; border:1px solid #111; box-shadow:1px 1px 6px rgba(0,0,0,0.5); }
#layerpop p.pop_con { overflow:hidden; line-height:0; background:#111; }
#layerpop p.pop_con a { line-height:0; }
#layerpop div.close_box { padding:0 10px; height:47px; background:#111; text-align:right; line-height:46px; font-weight:500; }
#layerpop div.close_box label { color:#fff; font-size:14px; }
#layerpop div.close_box input[type=button] { margin-left:20px; padding:7px 20px 10px 20px; height:31px; border:0px; background:#fff; color:#373737; font-size:14px; line-height:14px; font-weight:500; }
@media all and (max-width:839px)
{
	#layerpop { left:0; margin-left:0; }
	#layerpop img { width:100%; }
}