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

#main2nd .left { float: left;}
#main2nd .right { float: right;}
#main2nd .notice { font-size: 12px;}

#listMark li { float: left; margin: 10px 0 0; padding: 0 15px 0 0; font-weight: bold; line-height: 18px;}
#listMark li img { margin: 0 5px 0 0; vertical-align: middle;}
#listMark .mark_begin { color: #54B285;}
#listMark .mark_career { color: #339999;}
#listMark .mark_recruit { color: #3399CC;}
#listMark .mark_qualify { color: #BA9500;}
#listMark .mark_english { color: #FF6600;}
#listMark .mark_1step { color: #FF6699;}
#listMark .mark_30 { color: #5659B4;}

#areaBtn { margin: 0 0 60px;}
#areaBtn h3 { margin: 0 0 10px;}
#areaBtn .left { width: 500px;}
#areaBtn .left li { float: left; margin: 0 10px 5px 0;}
#areaBtn .right { width: 240px;}
#areaBtn .right li { float: right; margin: 0 0 5px 0;}

#areaBtn .btn01 a img { background: #FFDCE0;}
#areaBtn .btn02 a img { background: #E1FBB5;}
#areaBtn .btn03 a img { background: #D5ECFE;}
#areaBtn .btn04 a img { background: #D6FFFD;}
#areaBtn .btn05 a img { background: #FDE5CC;}
#areaBtn .btn06 a img { background: #F5D8FE;}
#areaBtn .btn07 a img { background: #C9DEEF;}
#areaBtn .btn08 a img { background: #E2D6FE;}
#areaBtn .btn09 a img { background: #FEF1B1;}
#areaBtn .btn10 a img { background: #C3FFFC;}
#areaBtn .btn11 a img { background: #FFD4FE;}

#areaBtn .btn01 a:hover img { background: #FFE8EA;}
#areaBtn .btn02 a:hover img { background: #EDF7DC;}
#areaBtn .btn03 a:hover img { background: #E5F2FC;}
#areaBtn .btn04 a:hover img { background: #E8FFFD;}
#areaBtn .btn05 a:hover img { background: #FCEEE0;}
#areaBtn .btn06 a:hover img { background: #F7E8FC;}
#areaBtn .btn07 a:hover img { background: #DCE5ED;}
#areaBtn .btn08 a:hover img { background: #ECE5FC;}
#areaBtn .btn09 a:hover img { background: #FCF5D4;}
#areaBtn .btn10 a:hover img { background: #E8FFFD;}
#areaBtn .btn11 a:hover img { background: #FFE8FE;}

#wrapper { position: relative;}
#main2nd #markDisplay { border: none;}
#markDisplay a { margin: 5px 0 0; padding: 0 0 0 16px; line-height: 18px; font-weight: normal; background: url(../img/i_mark.gif) left center no-repeat;}
#markInfo { position: fixed; z-index: 999; overflow: auto; width: 620px; top: 20px; left: 50%; right: 50%; margin: 0 -312px; padding: 20px; border: 2px solid #2A72BF; background: #fff; border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
-ms-box-shadow: 0 1px 3px rgba(0,0,0,0.35);}
#markInfo h3 { margin: 0 0 10px; padding: 0 0 0 1em; font-size: 18px; font-weight: bold; color: #003166; line-height: 18px; text-indent: -1em;}
#markInfo h3 span { font-size: 12px; font-weight: normal; color: #444;}
#markInfo dt { width: 9em;}
#markInfo dd { float: left; margin: 10px 0 0; padding: 0 0 0 5px; line-height: 26px;}
#markInfo .close { margin: 20px 0 0; text-align: center; line-height: 1;}
#markInfo .close a { padding: 5px 10px; color: #fff; font-weight: bold; text-decoration: none; background: #003166; border-radius: 5px;}

.hider { position: fixed; z-index: 998; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.25);}