@charset "utf-8";

/* VISUAL CARD */
#visual { position:relative; padding-top:40px; width:100%; height:558px; background:url('/job/images/main/main_bg.jpg') repeat-x center top; } 
#visual #card>ul { overflow:hidden; }
#visual #card>ul>li { position:relative; float:left; margin-left:1.3%; width:32.3%; height:299px; }
#visual #card>ul>li:first-child { margin-left:0; }
#visual #card>ul>li div { position:absolute; width:100%; height:297px; border-radius:10px; box-shadow:1px 1px 1px 1px rgba(0,0,0,0.15);}
#visual #card li div.off { background:rgba(236,247,251,0.5); background-position:center 160px; background-repeat:no-repeat; opacity:1; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transition:all 0.35s ease-in-out; -moz-transition:all 0.35s ease-in-out; transition:all 0.35s ease-in-out; -webkit-transform:translateZ(0) rotateY(0); -moz-transform:translateZ(0) rotateY(0); -ms-transform:translateZ(0) rotateY(0); -o-transform:translateZ(0) rotateY(0); transform:translateZ(0) rotateY(0); }
#visual #card li.card01 div.off { background-image:url('/job/images/main/card_bg01.png'); }
#visual #card li.card02 div.off { background-image:url('/job/images/main/card_bg02.png'); }
#visual #card li.card03 div.off { background-image:url('/job/images/main/card_bg03.png'); }
#visual #card li.card04 div.off { background-image:url('/job/images/main/card_bg04.png'); }
#visual #card li div p.tit { padding-top:40px; height:60px; border-radius:10px 10px 0px 0px; font-size:24px; text-align:center; font-weight:400; }
#visual #card li.card02 div p.tit { padding-top:35px; height:65px; line-height:28px; }
#visual #card li.card02 div p.tit span { display:block; font-size:18px; font-weight:300; }
#visual #card li.card03 div p.tit { padding-top:35px; height:65px; line-height:28px; }
#visual #card li.card03 div p.tit span { display:block; font-size:18px; font-weight:300; }
#visual #card li div.off p.tit { color:#222222; background:url('/job/images/main/card_bar_off.jpg') no-repeat center 20px; }
#visual #card li div.off p.sub { padding:0 35px; color:#444444; text-align:center; font-weight:300; }
#visual #card li div.on { background:#1c6dc7; opacity:0; visibility:hidden; -webkit-transition:all 0.35s ease 0.35s; -moz-transition:all 0.35s ease 0.35s; transition:all 0.35s ease 0.35s; -webkit-transform:translateZ(-1000px) rotateY(-90deg); -moz-transform:translateZ(-1000px) rotateY(-90deg); -ms-transform:translateZ(-1000px) rotateY(-90deg); -o-transform:translateZ(-1000px) rotateY(-90deg); transform:translateZ(-1000px) rotateY(-90deg); }
#visual #card li div.on p.tit { color:#ffffff; background:#3b8de9 url('/job/images/main/card_bar_on.jpg') no-repeat center 20px; }
#visual #card li div.on>ul { padding:10px 20px; height:177px; }
#visual #card li div.on>ul>li { margin-bottom:20px; }
#visual #card li div.on>ul.n_s_list>li { margin-bottom:5px; }
#visual #card li div.on>ul>li>p { padding-left:27px; color:#ffffff; background:url('/job/images/main/card_blet_off.png') no-repeat left 5px; font-size:16px; font-weight:400; }
#visual #card li div.on>ul>li>p>a { display:block; color:#ffffff; background:url('/job/images/main/card_arrow.png') no-repeat right 7px; }
#visual #card li div.on>ul>li:hover>p { background-image:url('/job/images/main/card_blet.png'); color:#fff715;  }
#visual #card li div.on>ul>li>p>a:hover { color:#fff715; text-decoration:none; }
#visual #card li div.on>ul>li>ul { margin:5px 0 0 27px; background:url('/job/images/main/card_dot01.png') repeat-y left top; }
#visual #card li.card01 div.on>ul>li:first-child>ul, #visual #card li.card03 div.on>ul>li>ul { height:33px; }
#visual #card li.card01 div.on>ul>li:nth-child(2)>ul { height:51px; }
#visual #card li div.on>ul>li>ul>li { background:url('/job/images/main/card_dot.png') no-repeat left 12px; line-height:14px; }
#visual #card li div.on>ul>li>ul>li a { margin-left:28px; padding:3px 28px 3px 6px; display:inline-block; color:#ffffff; background:#1c6dc7; font-size:14px; }
#visual #card li div.on>ul>li>ul>li a:hover { background:#1c6dc7 url('/job/images/main/card_go.png') no-repeat right top;  }
#visual #card li div.on p.more_btn { display:none; }
/* CARD hover effect */
#visual #card li:hover div.off { opacity:0; -webkit-transform:translateZ(-1000px) rotateY(90deg); -moz-transform:translateZ(-1000px) rotateY(90deg); -ms-transform:translateZ(-1000px) rotateY(90deg); -o-transform:translateZ(-1000px) rotateY(90deg); transform:translateZ(-1000px) rotateY(90deg); }
#visual #card li:hover div.on { visibility:visible; opacity:1; -webkit-transform:rotateY(0deg); -webkit-transform:translateZ(0) rotateY(0); -moz-transform:translateZ(0) rotateY(0); -ms-transform:translateZ(0) rotateY(0); -o-transform:translateZ(0) rotateY(0); transform:translateZ(0) rotateY(0); }


/* QUICK */
#quick { margin-top:10px; padding:25px; background:#ffffff; border-radius:10px; box-shadow:1px 1px 1px 1px rgba(0,0,0,0.15); }
#quick p.tit { color:#222222; font-size:22px; font-weight:400; }
#quick ul { overflow:hidden; margin:0 auto; margin-top:15px; width:98%; }
#quick ul li { position:relative; float:left; width:16.666%; text-align:center; }
#quick ul li a { display:block; padding-top:80px; background-position:center top; background-repeat:no-repeat; transition:all 0.3s ease; }
#quick ul li.quick01 a { background-image:url('/job/images/main/quick01.png'); }
#quick ul li.quick02 a { background-image:url('/job/images/main/quick02.png'); }
#quick ul li.quick03 a { background-image:url('/job/images/main/quick03.png'); }
#quick ul li.quick04 a { background-image:url('/job/images/main/quick04.png'); }
#quick ul li.quick05 a { background-image:url('/job/images/main/quick05.png'); }
#quick ul li.quick06 a { background-image:url('/job/images/main/quick06.png'); }
#quick ul li.quick01 a:hover { background-image:url('/job/images/main/quick01_ov.png'); }
#quick ul li.quick02 a:hover { background-image:url('/job/images/main/quick02_ov.png'); }
#quick ul li.quick03 a:hover { background-image:url('/job/images/main/quick03_ov.png'); }
#quick ul li.quick04 a:hover { background-image:url('/job/images/main/quick04_ov.png'); }
#quick ul li.quick05 a:hover { background-image:url('/job/images/main/quick05_ov.png'); }
#quick ul li.quick06 a:hover { background-image:url('/job/images/main/quick06_ov.png'); }
#quick ul li:first-child:after { width:0px; }
#quick ul li:after { position:absolute; content:''; z-index:2; left:0; top:20px; width:1px; height:30px; background:#bdbdbd; }

/* POPUPZONE */
#popupzone { padding:30px 0 45px 0; background:#fdfaf4; }
#popupzone>div { position:relative; }
#popupzone p.tit { color:#222222; font-size:24px; font-weight:400; }
#popupzone ul.popup_btn li { position:absolute; z-index:3; top:55%; right:0; }
#popupzone ul.popup_btn li:first-child { left:0; }
#popupzone ul.list { overflow:hidden; margin:0 auto; margin-top:30px; width:1110px; height:243px; }
#popupzone ul.list li { float:left; margin-left:28px; width:351px; height:243px; }
#popupzone ul.list li:first-child { margin-left:0px; }
#popupzone ul.list li a { overflow:hidden; display:block; width:351px; height:243px; border-radius:10px; }
#popupzone ul.list li a img { display:block; width:100%; }
#popupzone ul.popup_control { position:absolute; z-index:3; top:10px; right:0; }
#popupzone ul.popup_control li { position:relative; float:left; }
#popupzone ul.popup_control li a { display:block; width:25px; height:25px; text-indent:-9999px; }
#popupzone ul.popup_control li a.pause { background:url('/job/images/main/pop_pause.png') no-repeat center; }
#popupzone ul.popup_control li a.play { background:url('/job/images/main/pop_play.png') no-repeat center; }
#popupzone ul.popup_control li:after { position:absolute; content:''; z-index:2; display:block; top:7px; left:0; width:1px; height:12px; background:#dbdbdb; }
#popupzone ul.popup_control li:first-child:after { width:0px; }


/* NOTICE */
#notice { overflow:hidden; height:64px; border-top:1px solid #dddddd; border-bottom:1px solid #dcdcdc; }
#notice p.tit { float:left; margin-right:5%; color:#222222; font-size:24px; font-weight:400; line-height:64px; }
#notice .con { float:left; width:85%; }
#notice .con a { display:block; line-height:64px; }
#notice .con a:hover span { text-decoration:underline; }
#notice .con span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#notice .con span.subject { float:left; padding-left:1%; width:42%; color:#444444; background:url('/job/images/main/notice_blet.jpg') no-repeat left; font-size:16px; }
#notice .con span.detail { float:right; padding-left:1%; width:54%; color:#777777; background:url('/job/images/main/notice_ssblet.jpg') no-repeat left; font-size:14px; }
#notice .notice_control { float:right; padding-top:5px; }
#notice .notice_control a { display:block; margin-bottom:5px; width:25px; height:25px; text-indent:-9999px; }
#notice .notice_control a.prev { background:url('/job/images/main/notice_top.jpg') no-repeat center bottom; }
#notice .notice_control a.next { background:url('/job/images/main/notice_btm.jpg') no-repeat center top; }


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

@media all and (min-width:1200px) {

}

@media all and (max-width:1199px) {
	#visual { padding:30px 0; height:auto; background:#e9daf1; }
	#visual>div.wrapper, #popupzone>div, #notice>.wrapper { padding:0 20px; }
	#visual #card>ul>li { width:49.5%; margin:0 0 1% 1%; }
	#visual #card>ul>li:nth-child(even) { float:right; }
	#visual #card>ul>li:nth-child(odd) { margin-left:0px; }
	#visual #card li div.on>ul>li>p { font-size:15px; }
	#popupzone ul.list { margin:0 auto; margin-top:30px; width:95%; }
	#popupzone ul.list li { margin-left:2%; width:32%; height:auto; }
	#popupzone ul.list li a { width:100%; }
	#popupzone ul.list li a img { width:100%; height:243px; }
	#popupzone ul.popup_control { right:20px; }
	#notice p.tit { margin-right:2%; }
}

@media all and (max-width:950px) {
	#notice p.tit { margin-right:1%; }
	#notice .con { width:82%; }

}

@media all and (min-width:769px) {

}

@media all and (max-width:768px) {
	#popupzone ul.list { width:80%; }
	#popupzone ul.list li { margin:0 0 10px 0; width:100%; }
	#popupzone ul.popup_btn li { top:0; }
	#popupzone ul.popup_btn li:first-child { left:50%; margin-left:-30px; }
	#popupzone ul.popup_btn li { right:50%; margin-right:-30px; }
	#notice p.tit { width:14%; margin-right:2%; font-size:16px; font-weight:500; }
	#notice .con { width:75%; }
	#notice .con span.subject { width:100%; }
	#notice .con span.detail { display:none; }
	#visual { padding:15px 0; }
}

@media all and (max-width:640px) {
	#popupzone ul.popup_btn li:first-child { left:60%; margin-left:-30px; }
	#popupzone ul.popup_btn li { right:40%; margin-right:-30px; }
	#notice p.tit { margin-right:1%; width:20%; font-size:15px; }
	#notice .con { width:65%; }
	#notice .con span.subject { font-size:13px; }
	#visual #card>ul>li, #visual #card>ul>li div { height:180px; }
	#visual #card li div p.tit { font-size:22px; }
	#visual #card li div.off { background-image:none !important; }
	#visual #card li div.off p.sub { font-size:14px; }
	#visual #card li div.on>ul { display:none; }
	#visual #card li div.on p.more_btn { display:block; margin-top:20px;  text-align:center; }
	#visual #card li div.on p.more_btn a { display:inline-block; padding:6px 0; width:80%; background:#194779; color:#ffffff;  }
	#quick ul li { margin-bottom:15px; width:33.3333%; }
	#quick ul li:after { width:0px; }
}

@media all and (max-width:480px) {	
	#popupzone ul.list { width:100%; } 
	#popupzone ul.popup_btn li:first-child { left:65%; margin-left:-30px; }
	#popupzone ul.popup_btn li { right:35%; margin-right:-30px; }
	#notice p.tit { width:22%; }
	#visual #card>ul>li { margin:0 0 2% 1%; }
	#visual #card>ul>li, #visual #card>ul>li div { width:100%; height:135px; }
	#visual #card div p.tit { height:35px !important; font-size:18px !important; line-height:23px !important; }
	#visual #card li div.off p.sub { padding:0 20px; font-size:13px; }
	#visual #card li.card02 div p.tit span { display:inline; font-size:14px; } 
	#visual #card li div.on p.more_btn { margin-top:14px; }
	#visual #card li div.on p.more_btn a { padding:6px 0; width:80%; font-size:13px; }
	#quick ul li a { padding-top:74px; font-size:13px; line-height:150%; }

}