@font-face {
    font-family: Champignon;
    src: url(../css/fonts/champignon/Champignon.woff); /*웹폰트 서버 경로*/
}

@font-face {
    font-family: NanumBarunGothicBold;
    src: url(../css/fonts/NanumBarunGothicBold/NanumBarunGothicBold.woff); /*웹폰트 서버 경로*/
}

@font-face {
    font-family: odstemplik;
    src: url(../css/fonts/odstemplik/odstemplik.woff); /*웹폰트 서버 경로*/
}


@font-face {
    font-family: odstemplikBold;
    src: url(../css/fonts/odstemplikBold/odstemplikBold.woff); /*웹폰트 서버 경로*/
}

@font-face {
    font-family: Oranienbaum;
    src: url(../css/fonts/Oranienbaum/Oranienbaum.woff); /*웹폰트 서버 경로*/
}

@font-face {
    font-family: PrestigeSignatureSerif;
    src: url(../css/fonts/PrestigeSignatureSerif_Demo/PrestigeSignatureSerif_Demo.woff); /*웹폰트 서버 경로*/
}

@font-face {
    font-family: NanumBrush;
    src: url(../css/fonts/NanumBrush/NanumBrush.woff); /*웹폰트 서버 경로*/
}

@font-face {
    font-family: timefont;
    src: url(../css/fonts/timefont/timefont.woff); /*웹폰트 서버 경로*/
}


/*
@font-face {
    font-family: 'NanumBarunGothic';
    font-style: normal;
    font-weight: 400;
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
}


@font-face {
    font-family: 'NanumBarunGothic';
    font-style: normal;
    font-weight: 700;
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
}

@font-face {
    font-family: 'NanumBarunGothic';
    font-style: normal;
    font-weight: 300;
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
}
   
.nanumbarungothic * {
    font-family: 'NanumBarunGothic', sans-serif;
}


*/



@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: NanumGothicLight;
    src: url(../css/fonts/NanumGothicLight/NanumGothicLight.woff); /*웹폰트 서버 경로*/
}


@font-face {
    font-family: nanumsquarer;
    src: url(../css/fonts/nanum_square_r/nanumsquarer.woff); /*웹폰트 서버 경로*/
}


* {
    padding: 0;
    margin: 0;
    color: #353535;
    font-size: 12pt;
    font-family: '맑은 고딕','helvetica';
    font-size-adjust: initial;
    text-decoration-line: none;
    background-repeat: no-repeat;
}

a {
    text-decoration: none;
}

ul, li {
    list-style: none;
}

html {
    height: 100%;

}

body {
    height: 100%;
}

.alignC {text-align:center !important;}

.mgt3 {margin-top:3px !important;}
.mgt5 {margin-top:5px !important;}
.mgt10 {margin-top:10px !important;}
.mgt15 {margin-top:15px !important;}
.mgt20 {margin-top:20px !important;}
.mgt25 {margin-top:25px !important;}
.mgt30 {margin-top:30px !important;}
.mgt35 {margin-top:35px !important;}
.mgt40 {margin-top:40px !important;}
.mgt45 {margin-top:45px !important;}
.mgt50 {margin-top:50px !important;}
.mgt55 {margin-top:55px !important;}
.mgt60 {margin-top:60px !important;}
.mgt70 {margin-top:70px !important;}
.mgt75 {margin-top:75px !important;}
.mgt80 {margin-top:80px !important;}
.mgt90 {margin-top:90px !important;}
.mgt130 {margin-top:130px !important;}

.mgl3 {margin-left:3px !important;}
.mgl5 {margin-left:5px !important;}
.mgl10 {margin-left:10px !important;}
.mgl15 {margin-left:15px !important;}
.mgl20 {margin-left:20px !important;}
.mgl25 {margin-left:25px !important;}
.mgl30 {margin-left:30px !important;}
.mgl45 {margin-left:45px !important;}

.mglm25 {margin-left:-25px !important;}

.mgr10 {margin-right:10px !important;}

.mgb10 {margin-bottom:10px !important;}
.mgb15 {margin-bottom:15px !important;}
.mgb20 {margin-bottom:20px !important;}
.mgb30 {margin-bottom:30px !important;}
.mgb40 {margin-bottom:40px !important;}
.mgb60 {margin-bottom:60px !important;}

/* ******** */
#warp {
    width: 100%;
    height: 100%;
    float:left;
    position:relative;
}

.menu {
    height: 62px; /*99*/
    width: 100%;
    background-color: black;
    border-bottom: 1px #4d4d4d solid;
    color: #b3b3b3;
    position: fixed;
    top: 0;
    z-index: 100;
    box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /*css #6D6D6D*/
    -webkit-box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /*Safari and Chrome */
    -moz-box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /* Firefox */
}
/*
        .menu>div{
            max-width:1260px;
            margin:0 auto;
        }*/

.menu_box {
    float: left;
    color: #b3b3b3;
    margin-left: 8px;
    padding: 20px 15px;
}
    .menu_box:hover {
        background-color: rgba(255,255,255,0.25);
    }
    
    .right {
        float: right;
    }
#menu_box0 { /* 뒤로가기 */
    width: 45px;
    height: 20px;
    background-image: url(../images/b_back.png);
    background-size: cover;
    background-position-y: -1px;
}

#menu_box1 {/*로그아웃 */
    width: 38px;
    height: 20px;
    background-image: url(../images/logout.png);
    background-size: cover;
    background-position-y: 2px;
}

#menu_box_title { /* ws 문제푸는창 타이틀 */
    float: left;
    display: block;
    text-align:left;
    width: 360px;
    height: 63px;
    padding: 0;
    position: inherit;
    font-family: NanumSquare;
    font-weight: 900;
    color: #808080;
    letter-spacing: -0.4px;
    font-size: 14pt;
    line-height: 15pt;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(20%);
}

.on {
    background-color: rgba(255,255,255,0.2);
    border-bottom: 3px solid #3897f0;
}


#menu_box2_02 {
	position: relative;
}


#menu_box2_03{
    position:relative;
}





#t_time {
    width: 355px;
    height: 230px;
    border: 21px solid #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 55px;
    background-color: #231F20;
    font-family: timefont;
    color: white;
    font-size: 108pt;
    line-height: 375px;
    text-align: center;
   /*  padding-left: 19px; */
    text-shadow: 0px 0px 35px #107DFF; /*css #6D6D6D*/

    box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /*css #6D6D6D*/
    -webkit-box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /*Safari and Chrome */
    -moz-box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /* Firefox */
}


/* training in 하위 드롭메뉴*/
#training_in {
    position: absolute;
    width: 720px;
    height: 48px; /*원래 42 + 메뉴줄 1px + 여분 5px*/
    top: 57px;
    left: 0px;
    float: left;
    display: none;
}

.training_in_bt {
	position: relative;
	width: 720px;
	height: 35px;
	top: 10px;
	/*top: 69px;*/
	/*left: 305px;*/
	background-color: rgba(255,255,255,0.2);
	border-radius: 0 15px 15px 15px;
	box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /*css #6D6D6D*/
	-webkit-box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /*Safari and Chrome */
	-moz-box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /* Firefox */
}

	.training_in_bt > a {
		position: absolute;
		float: left;
		top: 7px;
		font-size: 11pt;
		letter-spacing: -0.4px;
		white-space: nowrap;   /* 'Maritime Information History' 두 줄 밀림 방지 (260708) */
	}

		.training_in_bt > a > div {
			color: #3A423E;
		}


		.training_in_bt > a:nth-child(1) { /*Personal Training History*/
			left: 30px;
		}

		.training_in_bt > a:nth-child(2) { /*General Training History*/
			left: 240px;
		}

		.training_in_bt > a:nth-child(3) { /*New Regulation History*/
			left: 450px;
		}

		.training_in_bt > a:hover > div {
			color: #c4cec9;
		}

#menu_box2_02:hover #training_in {
	display: block;
}



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

/*Analysis_in 하위 드롭메뉴*/
#analysis_in {
    position: absolute;
    width: 550px;
    height: 48px; /*원래 42 + 메뉴줄 1px + 여분 5px*/
    top: 57px;
    left: 0px;
    float: left;
    display:none;
}
.analysis_in_bt {
    position:relative;
    width: 550px;
    height: 35px;
    top: 10px;
    /*top: 69px;*/
    /*left: 305px;*/
    background-color: rgba(255,255,255,0.2);
    border-radius: 0 15px 15px 15px;
    box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /*css #6D6D6D*/
    -webkit-box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /*Safari and Chrome */
    -moz-box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.2); /* Firefox */
}

    .analysis_in_bt > a {
        position:absolute;
        float: left;
        top: 7px;
        font-size: 11pt;
        letter-spacing: -0.4px;
    }
        .analysis_in_bt > a > div {
            color: #3A423E;
        }


        .analysis_in_bt > a:nth-child(1) { /*Vessel ranking*/
            left: 30px;
        }
        .analysis_in_bt > a:nth-child(2) { /*Vessel ranking*/
            left: 200px;
        }
        .analysis_in_bt > a:nth-child(3) { /*Vessel ranking*/
            left: 370px;
        }

        .analysis_in_bt > a:hover >div{
            color: #c4cec9;
        }

#menu_box2_03:hover #analysis_in {
    display: block;
}
/*********************/





/*국가*/
#menu_box4 {
    width: 14px;
    height: 20px;
    /* background-image: url(../images/korea.png); 기본 한국*/
    background-size: 100%;
    background-position: center;
    cursor: pointer;
    /* 수정1 언어선택 삭제*/
    /* 다시 살림*/
}

    #menu_box4:hover {
        background-color: rgba(0,0,0,0.1);
    }

.n_korea {
    background-image: url(../images/korea.png); /* 한국*/
}

.n_us {
    background-image: url(../images/us.png); /* 미국 */
}


/*help 도움말*/
#menu_box5 {
    width: 29px;
    height: 20px;
    margin: 0 17px;
    background-image: url(../images/help.png);
    background-size: 100%;
    background-position: center;
    cursor: pointer;
    /*수정1 도움말삭제*/
    /* 다시 살림*/
}

#menu_box5:hover {
    background-color: rgba(0,0,0,0.1);
}


/*내용*/
.contents {
    width: 100%;
    height: 100%;
}

.con_bt { /* 가로 33.3에서 20%로 수정 (5개 메뉴) */
    width: 100%;
    height: calc(100% / 3);
    float: left;
    position: relative;
}

    .con_bt:hover {
        z-index: 1;
        box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.2); /*css #6D6D6D*/
        -webkit-box-shadow: 0px 1px 15px 10px rgba(0,0,0,0.2); /*Safari and Chrome */
        -moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.2); /* Firefox */
    }

#con_bt1:hover, #con_bt2:hover, #con_bt3:hover, #con_bt4:hover, #con_bt5:hover, #con_bt6:hover {
    background-color: white;
}

    #con_bt1:hover span, #con_bt2:hover span, #con_bt3:hover span, #con_bt4:hover span, #con_bt5:hover span, #con_bt6:hover span {
        color: #222260;
    }

#con_bt1 { /*#1ad6d4 -> #4EEAE5*/
    background-color: #4EEAE5;
    /*display:none;*/
}


#con_bt2 { /* #52c7e2 ->  #31DDDD -> 31D6DD -> 31D9DD*/
    background-color: #31D6DD;
}

#con_bt3 { /*가로값 33.4에서 25로 수정  / #69a2f0 -> #54C0DD -> 54B4DD*/
    /*width: 33.4%;*/
    background-color: #54C0DD;
}

#con_bt4 { /*#4990e2 -> #4FA7D3*/
    background-color: #4FA7D3;
}

#con_bt5 { /* Evaluation (v2) - 보라색 계열 */
    background-color: #9B7ED9;
}

#con_bt6 { /* Training (v2) - 연한 보라색 계열 */
    background-color: #7E6BC4;
}

/*색배열 거꾸로 했음  : 테블릿이랑 맞추기위해 */




.con_bt > span {
    color: white;
    text-align: center;
    font-weight: 400;
    font-size: 1.9em;
    font-family: 'Arial Rounded MT';
    letter-spacing: 0;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#con_bt4 > span { /* top값 추가 */
    top: 48.2%;
}

/******/

.ws_general_bg { /* ws 메인 : 제너럴 로그인 화면  */
    background-color: #f2f2f2;
    min-height: 1000px;
}



/* ws 퍼스널 교육 동영상 화면 */
.ws1_t_bg {
    background-color: #120634;
    /*min-height: 1400px;*/
}

/* ws 퍼스널 테스트 리스트 화면 */
.ws1_tt_bg {
    background-color: #120634;
    /*min-height: 1400px;*/
}


/* ws1 퍼스널 테스트 히스토리 리스트 */
.ws1_bg_h {
    background-color: #120634;
    min-height: 1400px;
}



/* ws2 퍼스널 테스트 문제:테스트 화면 */
.ws2_tt_bg {
    background-color: #120634;
    min-height: 1400px;
}


/* ws2 퍼스널 테스트 문제:테스트 화면 */
.ws2_bg_r {
    background-color: #fff;
    min-height: 1400px;
}


/* ws2 퍼스널 테스트 이후 컴플리트창  */
.ws2_cbg {
    background-color: #E5E5E5;
    min-height: 1000px;
}



/* ws 레귤레이션 교육 리스트 */
.ws4_bg { /* #4279bd ->    #00A99D*/
    background-color: #5198D3;
    min-height: 1400px;
}

/* ws 제너럴 교육 동영상 화면 */
.ws3_t_bg { 
    background-color: #120634;
    /*min-height: 1400px;*/
}


/* ws 제너럴 교육 테스트 화면 */
.ws3_tt_bg { 
    background-color: #0A0025;
    /*min-height: 1400px;*/
}

/* ws 제너럴 교육 이후 선원선택 리스트 */
.ws3_c_bg {
    background-color: #54C0DD;
    min-height: 1400px;
}

/* ws 레귤레이션 교육 동영상 화면 */
.ws4_t_bg { 
    background-color: #120634;
    /*min-height: 1400px;*/
}

/* ws 제너럴 교육 테스트 화면 */
.ws4_tt_bg {
    background-color: #0A0025;
    /*min-height: 1400px;*/
}

/* ws 제너럴 교육이후 컴플리트창  */
.ws3_cbg {
    background-color: #E5E5E5;
    min-height: 1000px;
}

/* ws 레귤레이션 교육 히스토리 리스트 */
.ws3_bg_h { 
    background-color: #264354;
    min-height: 1400px;
}



/* ws 레귤레이션 교육 테스트 화면 */
.ws4_tt_bg {
    background-color: #0A0025;
    /*min-height: 1400px;*/
}

/* ws 레귤레이션 교육 히스토리 리스트 */
.ws4_bg_h { /* #4279bd ->    #00A99D*/
    background-color: #213C68;
    min-height: 1400px;
}


/* ws 레귤레이션 교육이후 선원선택 리스트 */
.ws4_c_bg {
    background-color: #5198D3;
    min-height: 1400px;
}

/* ws 레귤레이션 교육이후 컴플리트창  */
.ws4_cbg {
    background-color: #E5E5E5;
    min-height: 1000px;
}


/* ws 메인페이지 화면 */
.ws_mainpage_bg {
    background-image: url(../images/ws_0.png);
    background-color:black;
    background-size:100% 100%;
}


/* ws 어드민 선원 등록 삭제_ 관리페이지 */

.ws_ad1_bg {
    background-color: #60b7cb;
    min-height: 1400px;
}






/************************/
.op1_bg { /* #4279bd ->    #00A99D*/
    background-color: #00A99D;
    min-height: 1400px;
}




.op1 {
    float:left;
}

footer{
    float:left;
    width:100%;
    height:150px;
}
#op_contents1 {
    /* height가 100퍼센트/ 값이 없을땐 세로 가운데 적용이 안됨.. */
    width: 1086px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
}

.ws3_t_bg #op_contents1 {
    /* height가 100퍼센트/ 값이 없을땐 세로 가운데 적용이 안됨.. */
    width: 1178px;
}



.ws1_t_bg #op_contents1 { /* ws 1 퍼스널 트레이닝*/
    /* height가 100퍼센트/ 값이 없을땐 세로 가운데 적용이 안됨.. */
    width: 1178px;
}

.ws1_tt_bg #op_contents1 { /* ws 1 퍼스널 트레이닝*/
    /* height가 100퍼센트/ 값이 없을땐 세로 가운데 적용이 안됨.. */
    width: 1178px;
    /*background-color:rgba(255,255,255,0.2);*/
    left: 520px;
    padding-top: 63px;
}



.ws4_t_bg #op_contents1 { /*ws nr 트레이닝*/
    width: 1200px;
}

.ws3_tt_bg #op_contents1 { /* ws g 문제푸는 페이지 */
    width: 1326px;
    height: 820px;
    border: 1px solid rgba(255,255,255,0.2);
    box-sizing: border-box;
    margin-top: 63px;
}

.ws4_tt_bg #op_contents1 { /* ws nr 문제푸는 페이지 */
    width: 1326px;
    height: 820px;
    border: 1px solid rgba(255,255,255,0.2);
    box-sizing: border-box;
    margin-top: 63px;
}


.ws2_tt #op_contents1 { /* ws2 문제푸는 페이지 */
    width: 1326px;
    height: 820px;
    border: 1px solid rgba(255,255,255,0.2);
    box-sizing: border-box;
    margin-top: 63px;
}

.ws_mp #ws_contents_m {
    width: 1300px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
}






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

.contents_title {
    text-align: center;
    font-size: 45pt;
    font-weight: 600;
    color: #bfbfbf;
    margin-top: 180px;
}
.contents_search {
    height: 33px;
    width: 600px; /*428 +100 +7  +7 + 350 +7    - 7  // 892*/
    margin: 0 auto;
    margin-top: 54px;
    margin-bottom: 50px;
    padding-left:7px;
    position: relative;
}





/****  제목 **/

.op1 .contents_title {
    font-family: NanumBrush;
    font-weight:100;
    color:rgba(255,255,255,0.65);
}

.ws4 .contents_title { /*뉴 레귤레이션 리스트 제목 */
    color: #425A63;
    margin-bottom:80px;
}

.ws4_h .contents_title { /* 뉴 레귤레이션 히스토리 제목 */
    color: #C9C9C9;
    margin-bottom: 80px;
}

.ws4_c1 .contents_title { /* 뉴 레귤레이션 테스트 선원 선택 제목 */
    font-family: NanumBrush;
    font-weight: 100;
    color: rgba(255,255,255,0.65);
}

.ws3_c1 .contents_title { /* 제너럴 테스트 선원 선택 제목*/
    font-family: NanumBrush;
    font-weight: 100;
    color: rgba(255,255,255,0.65);
}

.ws4_c .contents_title { /*뉴 레귤레이션 컴플릿트 제목*/
    font-size:40pt;
    margin-top:330px;
    color: #336699;
}

.ws3_c .contents_title { /* 제너럴 컴플릿트 제목*/
    font-size: 40pt;
    margin-top: 330px;
    color: #336699;
}

.ws3_h .contents_title { /* 제너럴 히스토리 제목 */
    color: #C9C9C9;
    margin-bottom: 80px;
}

.ws1_h .contents_title { /* 퍼스널 테스트 히스토리 제목 */
    color: #BFBFBF;
    margin-bottom: 80px;
}

.ws2_r .contents_title { /* 퍼스널 테스트 히스토리 제목 */
    color: #676680;
    margin-bottom: 80px;
}

.ws2_c .contents_title { /* 퍼스널 컴플릿트 제목*/
    font-size: 40pt;
    margin-top: 330px;
    color: #336699;
}
.ad_1 .contents_title { /* 어드민 선원관리페이지 제목  */
    color: #dfdfe9;
    margin-bottom: 80px;
}





/**********/
/* ws_1 드롭다운 메뉴 : YEAR */
.search_menu {
    width: 100px;
    background-color: rgba(0,0,0,0.2); /*rgba(0,0,0,0.2) -> rgba(53,97,151,0.8)*/
    border-radius: 17px;
    float: left;
    margin-right: 7px;
    position: absolute;
    z-index: 50;
    /*
    text-align: center;
    color: #b3b3b3;
    font-size: 11pt;
    line-height: 33px;

        */
}
    .search_menu:active {
        border-radius: 17px 17px 0 0;
    }

    .search_menu > li {
        width: 100px;
        height: 33px;
        text-align: center;
        color: #b3b3b3; /*rgba(255,255,255,0.7);*/
        font-size: 11pt;
        line-height: 33px;
        margin-right: 7px;
        margin-bottom: 1px;
        box-sizing: border-box;
        display: none;
        cursor: pointer;
        /*pointer-events:*/
        /*background-color: #356197; /*rgba(53,97,151,0.8);*/
    }

        .search_menu > li:active {
            color: antiquewhite;
        }

        .search_menu > li:hover {
            color: antiquewhite;
        }



        .search_menu > li:first-child {
            /*display: block;*/
            border-radius: 17px;
        }



        .search_menu > li:nth-child(1):active .search_menu > li:nth-child(n+1) {
            display: none;
        }

    .search_menu:hover {
    }

    /*
        .search_menu:hover li {

            display: block;
        }
        */

    .search_menu .m_on {
        display: block;
    }



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

/* op_1 드롭다운 메뉴22222222 : YEAR */
.search_menu2 {
    width: 100px;
    background-color: rgba(0,0,0,0.2); /*rgba(0,0,0,0.2) -> rgba(53,97,151,0.8)*/
    border-radius: 17px;
    float: left;
    margin-right: 7px;
    position: absolute;
    z-index: 50;
    /*
    text-align: center;
    color: #b3b3b3;
    font-size: 11pt;
    line-height: 33px;

        */
}

    .search_menu2:active {
        border-radius: 17px 17px 0 0;
    }

    .search_menu2 > li {
        width: 100px;
        height: 33px;
        text-align: center;
        color: #b3b3b3; /*rgba(255,255,255,0.7);*/
        font-size: 11pt;
        line-height: 33px;
        margin-right: 7px;
        margin-bottom: 1px;
        box-sizing: border-box;
        display: none;
        cursor: pointer;
        /*pointer-events:*/
        /*background-color: #356197; /*rgba(53,97,151,0.8);*/
    }

        .search_menu2 > li:active {
            color: antiquewhite;
        }

        .search_menu2 > li:hover {
            color: antiquewhite;
        }



        .search_menu2 > li:first-child {
            /*display: block;*/
            border-radius: 17px;
        }



        .search_menu2 > li:nth-child(1):active .search_menu > li:nth-child(n+1) {
            display: none;
        }

    .search_menu2:hover {
    }

    /*
        .search_menu2:hover li {
            display: block;
        }
       
        */

    .search_menu2 .m_on {
        display: block;
    }

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

/* op_1 드롭다운 메뉴 : Rank */
.search_menu-1 {
    margin-left: 0px; /*107 */
    width: 100px;
    background-color: rgba(0,0,0,0.2); /*rgba(0,0,0,0.2) -> rgba(53,97,151,0.8)*/
    border-radius: 17px;
    float: left;
    margin-right: 7px;
    position: absolute;
    z-index: 50;
    /*
    text-align: center;
    color: #b3b3b3;
    font-size: 11pt;
    line-height: 33px;

        */
}

    .search_menu-1:active {
        border-radius: 17px 17px 0 0;
    }

    .search_menu-1 > li {
        width: 100px;
        height: 33px;
        text-align: center;
        color: #b3b3b3; /*rgba(255,255,255,0.7);*/
        font-size: 11pt;
        line-height: 33px;
        margin-right: 7px;
        margin-bottom: 1px;
        box-sizing: border-box;
        display: none;
        cursor: pointer;
        /*pointer-events:*/
        /*background-color: #356197; /*rgba(53,97,151,0.8);*/
    }

        .search_menu-1 > li:active {
            color: antiquewhite;
        }

        .search_menu-1 > li:hover {
            color: antiquewhite;
        }



        .search_menu-1 > li:first-child {
            /*display: block;*/
            border-radius: 17px;
        }



        .search_menu-1 > li:nth-child(1):active .search_menu > li:nth-child(n+1) {
            display: none;
        }

    .search_menu-1:hover {
    }

    /*
        .search_menu-1:hover li {
            display: block;
        }
        */

    .search_menu-1 .m_on {
        display: block;
    }
/***********************/
/* op_1 드롭다운 메뉴 : TRAINING CHAPTER */
.search_menu-2 {
    margin-left: 214px;
    width: 350px;
    background-color: rgba(53,97,151,0.8); /*rgba(0,0,0,0.2)*/
    border-radius: 17px;
    float: left;
    position: absolute;
    z-index: 50;
    /*
    text-align: center;
    color: #b3b3b3;
    font-size: 11pt;
    line-height: 33px;

        */
}

    .search_menu-2:active {
        border-radius: 17px 17px 0 0;
    }

    .search_menu-2 > li {
        width: 350px;
        height: 33px;
        text-align: center;
        color: #b3b3b3; /*rgba(255,255,255,0.7);*/
        font-size: 11pt;
        line-height: 33px;
        margin-right: 7px;
        margin-bottom: 1px;
        box-sizing: border-box;
        display: none;
        cursor: pointer;
        /*pointer-events:*/
        /*background-color: #356197; /*rgba(53,97,151,0.8);*/
    }

        .search_menu-2 > li:active {
            color: antiquewhite;
        }

        .search_menu-2 > li:hover {
            color: antiquewhite;
        }

        .search_menu-2 > li:first-child {
            /*display: block;*/
            border-radius: 17px;
        }



        .search_menu-2 > li:nth-child(1):active .search_menu > li:nth-child(n+1) {
            display: none;
        }

    .search_menu-2:hover {
    }

    /*
        .search_menu-2:hover li {
            display: block;
        }
        */

    .search_menu-2 .m_on {
        display: block;
    }





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

/* op_1 드롭다운 메뉴 :아날라시스2 -쿼터  */
.search_menu-3 {
    margin-left: 107px;
    width: 120px;
    background-color: rgba(53,97,151,0.8); /*rgba(0,0,0,0.2)*/
    border-radius: 17px;
    float: left;
    position: absolute;
    z-index: 50;
    /*
    text-align: center;
    color: #b3b3b3;
    font-size: 11pt;
    line-height: 33px;

        */
}

    .search_menu-3:active {
        border-radius: 17px 17px 0 0;
    }

    .search_menu-3 > li {
        width: 350px;
        height: 33px;
        text-align: center;
        color: #b3b3b3; /*rgba(255,255,255,0.7);*/
        font-size: 11pt;
        line-height: 33px;
        margin-right: 7px;
        margin-bottom: 1px;
        box-sizing: border-box;
        display: none;
        cursor: pointer;
        /*pointer-events:*/
        /*background-color: #356197; /*rgba(53,97,151,0.8);*/
    }

        .search_menu-3 > li:active {
            color: antiquewhite;
        }

        .search_menu-3 > li:hover {
            color: antiquewhite;
        }

        .search_menu-3 > li:first-child {
            /*display: block;*/
            border-radius: 17px;
        }



        .search_menu-3 > li:nth-child(1):active .search_menu > li:nth-child(n+1) {
            display: none;
        }

    .search_menu-3:hover {
    }


        .search_menu-3:hover li {
            display: block;
        }


    .search_menu-3 .m_on {
        display: block;
    }





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




.contents_search input:nth-of-type(1) {
    margin-left: 107px; /*107 + 100 + 7 +350 +7   571*/
}


.contents_search input[type="text"] { /* 이름 검색창 */
    width: 451px; /*151*/
    height: 33px;
    float: left;
    padding: 0 15px;
    background-color: rgba(0,0,0,0);
    border: 3px solid rgba(0,0,0,0.2);
    border-radius: 17px;
    box-sizing: border-box;
    margin-right:0px; /*7*/
    text-align: center;
    color: #b3b3b3;
}
.contents_search input[type="text"]::-webkit-input-placeholder {
    color: #b3b3b3;
}
.contents_search input[type="text"]::-moz-placeholder {
    color: #b3b3b3;
}
.contents_search input[type="text"]:-ms-input-placeholder {
    color: #b3b3b3;
} 
    
    
    .contents_search input:nth-child(5) {
        width: 123px;
    }

.contents_search input[type="button"] {
    display: block;
    float: right;
    border:0;
    width: 33px;
    height: 33px;
    background-image: url(../images/search2.png);
    background-color:rgba(0,0,0,0);
    background-position-x: -1px;
    background-position-y: 3px;
    outline:none;
}
/*****  분류 제목   *******/

.line_top {
    width: 1029px; /*1086 -57*/
    height: 25px;
    margin: 0 auto;
    padding-left:57px;
}

    .line_top span {
        display: block;
        float: left;
        color: #444e63;
        text-align: center;
            font-size:10pt;
    }

    .ws4_h .line_top span {
    color: rgba(255,255,255,0.6);
}

.ws3_h .line_top span {
    color: rgba(255,255,255,0.6);
}

.ws1_h .line_top span {
    color: rgb(170,170,170);
}

.t_rank {
    width: 70px;
}


.t_name {
	width: 189px; /* 원래 97px + type 너비 112 = 209  :: 조정 -20 =189*/
}
 
.t_birth {
    width: 112px; /*107 + 5(조정) = 112*/
}

.t_vessel {
	width: 167px; /*152 + 15(조정) = 167*/
}
.t_national {
    width: 230px; 
}

.t_signon {
    width:100px;
}

.t_completed_teaining {
    width: 197px;
}



.t_effective_date {
    width: 137px;
}


/* Maritime(NRegulation) EFFECTIVE DATE 열 제거 → title·document 2칸 재배치 (260708) */
.t_regulation_title {
    margin-left:0;
    width: 750px;
}

.t_relevant_document {
    width: 270px;
}

.t_training_course {
    width: 540px;
}

.t_training_date {
    width: 157px;
}


.line_top .t_type {
	/*width: 112px;*/
	display: none;
}
 
.t_completed_date {
    width: 141px;
}
 
.t_completed_teaining {
    width: 197px;
}
 
.t_score {
    width: 96px;
}



.line_top #all {
    margin-left: 22px;
    display:none;
}





/**********/
.op1 .t_rank {
    width: 130px;
}
.op1 .t_vessel {
   display:none;
}

.op1 .t_name {
    width: 429px; /*489*/
}

/*****/

.ws4_c1 .t_rank {
    width: 130px;
}

.ws4_c1 .t_vessel {
    display: none;
}

.ws4_c1 .t_name {
    width: 429px; /*489*/
}

/*****/

/*****/

.ws3_c1 .t_rank {
    width: 130px;
}

.ws3_c1 .t_vessel {
    display: none;
}

.ws3_c1 .t_name {
    width: 429px; /*489*/
}

/*****/



/***** ad_1***/
.ad_1 .t_name {
    width: 429px; /*489*/
}
.ad_1 .t_national {
    width: 273px; /*489  // 330 -57 */
}

/********/



/* 리스트 */
#accordion {
    width: 1086px;
    margin: 0 auto;
}

#accordion >li {
    height:55px;
    margin-bottom:8px;
}
    #accordion p, #accordion span, #accordion .check{
        display: block;
        float: left;
        color: #808080;
        font-size: 13.7pt;
        letter-spacing: -0.5px;
        font-weight: 100;
        text-align: center;
        line-height: 55px;
    }

   .op1  #accordion > li > a { /* op1 a태그로 바꿔서 추가한것 */
        display: block;
        float: left;
        color: #808080;
        font-size: 13.7pt;
        letter-spacing: -0.5px;
        font-weight: 100;
        text-align: center;
        line-height: 55px;
    }
    .ws4 #accordion > li > a { /* ws4 a태그로 바꿔서 추가한것 */
    display: block;
    float: left;
    color: #808080;
    font-size: 13.7pt;
    letter-spacing: -0.5px;
    font-weight: 100;
    text-align: center;
    line-height: 55px;
}

.ws4_h #accordion > li > a { /* ws4 a태그로 바꿔서 추가한것 */
    display: block;
    float: left;
    color: #808080;
    font-size: 13.7pt;
    letter-spacing: -0.5px;
    font-weight: 100;
    text-align: center;
    line-height: 55px;
}

.ws3_h #accordion > li > a { /* ws3 a태그로 바꿔서 추가한것 */
    display: block;
    float: left;
    color: #808080;
    font-size: 13.7pt;
    letter-spacing: -0.5px;
    font-weight: 100;
    text-align: center;
    line-height: 55px;
}

.ws1_h #accordion > li > a { /* ws1 a태그로 바꿔서 추가한것 */
    display: block;
    float: left;
    color: #808080;
    font-size: 13.7pt;
    letter-spacing: -0.5px;
    font-weight: 100;
    text-align: center;
    line-height: 55px;
}

        .op1 #accordion > li > a:hover, .ws4 #accordion > li > a:hover { /* ws4 a태그, op1 a태그 */
            background-color: #E6E6E6;
        }
        .op1 #accordion > li > a:active , .ws4 #accordion > li > a:active { /* ws4 a태그, op1 a태그 */
            background-color: #cccccc;
        }
        

    
     #accordion label {
        display: block;
        float: left;
        color: #808080;
        font-size: 13.7pt;
        letter-spacing: -0.5px;
        font-weight: 100;
        text-align: center;
        line-height: 55px;
    }

    #accordion input[type="checkbox"] {
        opacity: 0;
        position: fixed;
        z-index: -999;
        float: left;
        width: 57px;
        height: 55px;
    }



    #accordion label {
        float: left;
        background-color: #a7a7ae;
        width: 57px;
        height: 55px;
        background-image: url(../images/print.png);
    }



    #accordion input[type="checkbox"]:checked + label {
        background-color: #7f7979;
    }

.ws4_c1 #accordion input[type="checkbox"]:checked + label {
    background-color: #999999;
}
.ws4_c1 #accordion input[type="checkbox"]:checked + label  >span{
    color:rgba(255,255,255,0.7);

}

.ws3_c1 #accordion input[type="checkbox"]:checked + label {
    background-color: #999999;
}

    .ws3_c1 #accordion input[type="checkbox"]:checked + label > span {
        color: rgba(255,255,255,0.7);
    }



.check {
    /*margin-top: 8px;*/
    float: left;
    background-color: #a7a7ae;
    width: 57px;
    height: 55px;
    background-image: url(../images/print.png);
    box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.2); /*css #6D6D6D*/
    -webkit-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.2); /*Safari and Chrome */
    -moz-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.2); /* Firefox */
}
  

#accordion > li:nth-child(1) a {
    margin-top: 0;
}

#accordion > li a:active {
    background-color: #7f7979;
}

#accordion > li > p, #accordion > li > div {
    float: left;
}

.op1 #accordion > li > a{
    float: left;
}

#accordion > li > .check {
    position: inherit;
}
/* 리스트 상위메뉴 */
.list_top {
    width: 1086px; /*1086- 57*/
    height: 55px;
    margin: 0 auto;
    /*margin-top: 8px;*/
    background-color: #fcfcfc; /*D6D6D6*/
    position: relative;
    cursor: pointer;
    box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /*css #6D6D6D*/
    -webkit-box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /*Safari and Chrome */
    -moz-box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /* Firefox */
}

.ws4_h .list_top { /* 뉴 레귤레이션 히스토리 리스트 바 */
    width: 1029px;
    background-color: #E2E0E0;
    cursor: auto;
}
    .ws4_h .list_top:hover{
    background-color: #fcfcfc; /*D6D6D6 fcfcfc*/
        
    }

.ws3_h .list_top { /* 제너럴  히스토리 리스트 바 */
    width: 1029px;
    background-color: #E2E0E0;
    cursor: auto;
}

    .ws3_h .list_top:hover {
        background-color: #fcfcfc; /*D6D6D6 fcfcfc*/
    }

.ws1_h .list_top { /* 퍼스널 테스트  히스토리 리스트 바 */
    width: 1029px;
    background-color: #E2E0E0;
    cursor: auto;
}

    .ws1_h .list_top:hover {
        background-color: #fcfcfc; /*D6D6D6 fcfcfc*/
    }

    .list_top span {
        float: left;
    }

.ad_1 .list_top { /* 뉴 레귤레이션 히스토리 리스트 바 */
    width: 972px; /*1029 - 57 */
    background-color: #fff;
    cursor: auto;
}

    .ad_1 .list_top:hover {
        background-color: #e6e6e6; /*D6D6D6 fcfcfc*/
    }
    .ad_1 .list_top:active {
        background-color: #D6D6D6; /*D6D6D6 fcfcfc*/
    }



.number {
    width: 57px;
    color: #aaaaaa;
    position: absolute;
    left: -57px;
}

.rank_i {
    height: 100%;
    width: 57px;
    background-color: #3d4865;
    float: left;
}

/* 랭크 아이콘 */
.i_1 {
    background-image: url(../images/w_icon_01.png);
}

.i_2 {
    background-image: url(../images/w_icon_02.png);
}

.i_3 {
    background-image: url(../images/w_icon_03.png);
}

.i_4 {
    background-image: url(../images/w_icon_04.png);
}

.i_5 {
    background-image: url(../images/w_icon_05.png);
}



.rank {
    width: 70px;
}




#accordion .name {
	width: 189px; /* 원래 97px + type 너비 112 = 209:: 조정 -12 =189*/
	font-size: 11.5pt;
	letter-spacing: -1.2px;
	line-height: 20px;
	position: inherit;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.birth {
	width: 112px; /*107 + 5(조정) = 112*/
}

#accordion .vessel {
	width: 167px; /*152 + 15(조정) = 167*/
	font-size: 11.5pt;
	letter-spacing: -1.2px;
	line-height: 20px;
	position: inherit;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.op1 #accordion .vessel {
    display:none;
}

.ws4_c1 #accordion .vessel {
    display: none;
}

.ws3_c1 #accordion .vessel {
    display: none;
}

#accordion .type {
	/*width: 112px; *2018.07.23 수정 */
	display: none;
}

#accordion .national {
    width: 230px;
    font-size: 11.5pt;
    letter-spacing: -1.2px;
    line-height: 20px;
    position: inherit;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#accordion .signon {
    width: 95px;
}

.completed_date {
    width: 141px;
}

#accordion .completed_teaining {
    /*margin-top: 9px; /* 한줄일때 17px  두줄일때 9px */
    width: 197px;
    font-size: 11pt;
    letter-spacing: -1px;
    line-height: 20px;
    position: inherit;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*
.he2 {
    margin-top: 17px;
}
    */
.score {
    width: 96px;
}

.ws4_h .score {
    width: 88px;
}


.ws4_h #accordion .training_course {
    width: 537px;
    font-size: 11pt;
    letter-spacing: -1px;
    line-height: 20px;
    position: inherit;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.ws3_h .score {
    width: 88px;
}


.ws3_h #accordion .training_course {
    width: 537px;
    font-size: 11pt;
    letter-spacing: -1px;
    line-height: 20px;
    position: inherit;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}



.ws1_h .score {  /*퍼스널 테스트 히스토리 */
    width: 88px;
}


.ws1_h #accordion .training_course { /*퍼스널 테스트 히스토리 */
    width: 537px;
    font-size: 11pt;
    letter-spacing: -1px;
    line-height: 20px;
    position: inherit;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.training_date {
    width: 164px;
}


/******/
.op1 .rank {
    width: 130px;
}

.ws4_c1 .rank {
    width: 130px;
}

.ws3_c1 .rank {
    width: 130px;
}

.op1 #accordion .name {
    width: 429px; 
}


.ws4_c1 #accordion .name {
    width: 429px;
}

.ws3_c1 #accordion .name {
    width: 429px;
}


.ad_1 #accordion .name {
    width: 429px;
}

.ad_1 #accordion .national {
    width: 273px; /*330- 57*/
}


/*********/
.ws4 .effective_date{
width:245px;

}

.ws4 .regulation_title {
    width: 750px;
}

.ws4 #accordion li .list_top .regulation_title, .ws4 #accordion li .list_top .relevant_document {
    font-size: 11.5pt;
    letter-spacing: -1.2px;
    line-height: 20px;
    position: inherit;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.ws4 .relevant_document {
    width: 270px;
    margin-left: 0;
}

/*************/
/*그림자 주기위해 li label 띄우기*/
#accordion > li {
    position: relative;
}

    #accordion > li > label {
        position: inherit;
        float: right;
        margin-top: 8px;
        box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /*css #6D6D6D*/
        -webkit-box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /*Safari and Chrome */
        -moz-box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /* Firefox */
    }

.ws4_c1 #accordion > li > label { /*ws4 크루리스트 선택 */
    position: inherit;
    float: left;
    margin-top: 8px;
    box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /*css #6D6D6D*/
    -webkit-box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /*Safari and Chrome */
    -moz-box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /* Firefox */
}

    .ws4_c1 #accordion > li > label:hover {
        background-color: #F2F2F2;
    }



.ws3_c1 #accordion > li > label { /*ws3 크루리스트 선택 */
    position: inherit;
    float: left;
    margin-top: 8px;
    box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /*css #6D6D6D*/
    -webkit-box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /*Safari and Chrome */
    -moz-box-shadow: 3px 1px 15px 5px rgba(0,0,0,0.2); /* Firefox */
}

    .ws3_c1 #accordion > li > label:hover {
        background-color: #F2F2F2;
    }


    #accordion > li:nth-child(1) .list_top {
        margin-top: 0px;
    }

.op1 #accordion .list_top {
    width: 1081px; /*1086 -5*/
    border-right: 5px solid #3d4865;
}

.ws4_c1 #accordion .list_top {
    width: 1081px; /*1086 -5*/
    border-right: 5px solid #3d4865;
}

.ws3_c1 #accordion .list_top {
    width: 1081px; /*1086 -5*/
    border-right: 5px solid #3d4865;
}

    #accordion > li:nth-child(1) >label{
        margin-top:0;
    }
    /*리스트 하위메뉴*/
    .listdown {
        width: 1086px;
        height: 55px;
        background-color: #eaeaea;
        border-bottom: 1px solid #dadada;
        box-sizing: border-box;
    }

    .listdown span {
        float: left;
        /*border-bottom: 1px solid #dadada;
                box-sizing: border-box;*/
    }

    .listdown .rank_i {
        height: 55px;
        width: 57px;
        /* border-bottom: 1px solid rgba(61,72,101,0.5);*/
        border-bottom: 1px solid #556077;
        box-sizing: border-box;
    }



/********** op1_2 General Training History ****************** */

.op1_2_bg {
	background-color: #065261;
	min-height: 1400px;
}

.op1_2 {
	float: left;
}

	.op1_2 .line_top span {
		color: #05424E;
	}

    /* 검색창 전체 박스 */
    .op1_2 .contents_search {
        width: 867px; /*428 +100 +7  +7 + 350 +7    - 7 // 892- 25 = 867*/
        padding-left: 32px; /* 7 +25 */
    }

/* op_1_2 드롭다운 메뉴  YEAR */
    .op1_2 .search_menu {
        background-color: #05424E;
        margin-left: 107px;
    }

		.op1_2 .search_menu > li {
			color: #93a09f;
		}

			.op1_2 .search_menu > li:active {
				color: #bebfbf;
			}

			.op1_2 .search_menu > li:hover {
				color: #bebfbf;
			}



/* op_1_2 드롭다운 메뉴 : TRAINING CHAPTER */
	.op1_2 .search_menu-2 {
		background-color: #05424E;
	}


		.op1_2 .search_menu-2 > li {
			color: #93a09f; /*#05424E;*/
		}

			.op1_2 .search_menu-2 > li:active {
				color: #bebfbf;
			}

			.op1_2 .search_menu-2 > li:hover {
				color: #bebfbf;
			}
/* op_1_2 검색버튼 : 이미지 설정(컬러다름) */
    .op1_2 .contents_search input[type="submit"] {
        background-image: url(../images/search2.png);
        float: left
    }

/* op_1_2 분류 제목 **/

	.op1_2 .line_top span {
		color: #8a9392;
	}


    .op1_2 .t_vessel, .op1_3 .t_vessel {
        width: 177px; /*152 + 15(조정) = 167 // +10 */
    }


    .op1_2 .t_completed_date, .op1_3 .t_completed_date {
        width: 141px;
    }

    .op1_2 .t_completed_teaining, .op1_3 .t_completed_teaining {
        width: 547px; /*197*/
    }

    .op1_2 .t_score, .op1_3 .t_score {
        width: 96px;
        padding-left: 10px;
    }


/* op_1_2 리스트 */



    .op1_2 #accordion .vessel, .op1_3 #accordion .vessel {
        width: 177px; /*152 + 15(조정) = 167 // +10 */
        padding-left: 57px;
        font-size: 11.5pt;
        letter-spacing: -1.2px;
        line-height: 20px;
        position: inherit;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }


    .op1_2 .completed_date, .op1_3 .completed_date {
        width: 141px;
    }

    .op1_2 #accordion .completed_teaining, .op1_3 #accordion .completed_teaining {
        /*margin-top: 9px; /* 한줄일때 17px  두줄일때 9px */
        width: 547px; /*197*/
        font-size: 12.2pt;
    }

    .op1_2 .score, .op1_3 .score {
        width: 96px;
        padding-left: 10px;
    }

/***********************************/
/************** op1_3 New Regulation History ****************** */


.op1_3_bg {
    background-color: #789fdb;
    min-height: 1400px;
}

.op1_3 {
    float: left;
}
    .op1_3 .contents_title {
        color: #425a63;
    }

    .op1_3 .contents_search {
        width: 874px; /*428 +100 +7  +7 + 350 +7    - 7 // 892- 18 = 874*/
        padding-left: 25px; /* 7 +18 -25*/
    }

/* op_1_3 드롭다운 메뉴  YEAR */
.op1_3 .search_menu {
    background-color: #607faf;
    margin-left:107px;
}

    .op1_3 .search_menu > li {
        color: #05424E;
    }

        .op1_3 .search_menu > li:active {
            color: #bebfbf;
        }

        .op1_3 .search_menu > li:hover {
            color: #bebfbf;
        }



/* op_1_3 드롭다운 메뉴 : TRAINING CHAPTER */
    .op1_3 .search_menu-2 {
        background-color: #607faf;
    }


        .op1_3 .search_menu-2 > li {
            color: #05424E; /*#05424E;*/
        }

        .op1_3 .search_menu-2 > li:active {
            color: #bebfbf;
        }

        .op1_3 .search_menu-2 > li:hover {
            color: #bebfbf;
        }



/* op_1_3 배이름 검색, 사람이름 검색창 */

    .op1_3 .contents_search input[type="text"] {
        background-color: rgba(0,0,0,0.2);
        border: 3px solid rgba(0,0,0,0);
        color: #05424E ;/*#b3b3b3;*/
    }

        .op1_3 .contents_search input[type="text"]::-webkit-input-placeholder {
            color: #7395c6;
        }

        .op1_3 .contents_search input[type="text"]::-moz-placeholder {
            color: #7395c6;
        }

        .op1_3 .contents_search input[type="text"]:-ms-input-placeholder {
            color: #7395c6;
        }

/* op_1_3 검색버튼 : 이미지 설정(컬러다름) */
    .op1_3 .contents_search input[type="submit"] {
        background-image: url(../images/search2.png);
        float: left
    }
        .contents_search input[type="submit"]:active {
            background-image: url(../images/search_on.png);
        }
        /********************************************************




	/************   op2_ analysis  *************/
        .op2 {
            background-color: #484bcc;
            min-height: 1400px;
        }

#op_contents2 {
    /* height가 100퍼센트/ 값이 없을땐 세로 가운데 적용이 안됨.. */
    width: 90%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.a_ranking {
    position: absolute;
    display: block;
    color: #898989;
    font-size:16pt;
    letter-spacing:-1px;
    line-height:20pt;
    font-weight:100;
    top:70px;/*63*/
    right: -5%;
    display:none;
}

    .a_ranking div {
        width: 27px;
        height: 27px;
        float: right;
        margin-left:8px;
        background-image: url(../images/lank_r.png);
    }

    #op_contents2 > div:nth-child(1) {
        color: #f2f2f2;
        margin-bottom: 115px;
    }

    /*내용 전체 (날짜 분휴/ 배 이미지/ 랭킹 */
.vessel_ranking {
    min-width: 1086px;
    height: 676px;
    margin:0 auto;
    background-image: url(../images/vessel.png);
    background-position-x:center;
}
/*분류   드롭다운메뉴 */
.vessel_ranking {}

.op2_search {
    width: 350px;
    height: 43px;
    float: left;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
    .op2_search >ul:nth-child(2){
        left:107px;
        width:151px;
    }

    .vessel_ranking > .op2_search > ul:nth-child(2) >li {
        width: 151px;
    }


.color {
    background-color:rgba(0,0,0,0.2);
}

.menu2{


}
/*** 리스트 ***/
.v_ranking-list {
    float: right;
    margin-top: 43px;
}

        .v_ranking-list > li {
            width: 217px;
            height:33px;
            margin-bottom: 11px;
        }

            
            .v_ranking-list > li:nth-child(n+3) {
                margin-bottom: 8px;
                height: 28px;
            }

            .v_ranking-list > li:nth-child(3) {
                margin-bottom: 11px;
            }

.v_ranking-list span{
    display:block;
    float:right;
}

.v_ranking-list div{
    width:34px;
    height:33px;
    float:left;
    margin-right:7px;
}

.v1 {
    width: 176px;
    height: 33px;

    line-height:27px;
    padding: 0 15px;
    border: 2px solid #c7c8ca;
    border-radius: 17px;

    box-sizing: border-box;
    color: #b3b3b3;
}
.v_ranking-list >li:nth-child(3) {

}

.v2 {
    width: 176px;
    height: 28px;
    line-height:33px;
    padding: 0 15px;
    color: #b3b3b3;
    border-top: 1px solid rgba(199,200,202,0.6);
    box-sizing: border-box;
}

.v_ranking-list > li:nth-child(1)>div {
    background-image: url(../images/rank_icon_01.png);
}
.v_ranking-list > li:nth-child(2) > div {
    background-image: url(../images/rank_icon_02.png);
}
.v_ranking-list > li:nth-child(3) > div {
    background-image: url(../images/rank_icon_03.png);
}
.v_ranking-list > li:nth-child(4) > div {
    background-image: url(../images/rank_icon_04.png);
}
.v_ranking-list > li:nth-child(5) > div {
    background-image: url(../images/rank_icon_05.png);
}
.v_ranking-list > li:nth-child(6) > div {
    background-image: url(../images/rank_icon_06.png);
}
.v_ranking-list > li:nth-child(7) > div {
    background-image: url(../images/rank_icon_07.png);
}
.v_ranking-list > li:nth-child(8) > div {
    background-image: url(../images/rank_icon_08.png);
}


/*************** op2_2 **************/
.op2_2 {
    background-color: #f2f2f2;
    min-height: 1400px;
}

/*페이지 타이틀 */
#op_contents2 > #contents_title2 {
    color: #425a63;
    margin-bottom:54px;
}
.b_ranking {
    position: absolute;
    display: block;
    color: #898989;
    font-size: 16pt;
    letter-spacing: -1px;
    line-height: 20pt;
    font-weight: 100;
    top: 70px; /*63*/
    left: -5%;
    display: none;
}

    .b_ranking div {
        width: 27px;
        height: 27px;
        float: left;
        margin-right: 8px;
        background-image: url(../images/lank_l.png);
    }

.a_list{
    height:41px;
    width:1016px; /* 1030  -14 */
    margin:0 auto;
    padding:0 7px;
}
    .a_list > li {
        position:relative;
        float: left;
        width: 105px;/*120*/
        height: 41px;
        font-size: 11pt;
        line-height:41px;
        color: #aaaaaa;
        text-align: center;
        /*background-color: #f2f2f2;*/
        border-radius:20px;
        margin:0 6px;
    }

    .a_list > li:nth-child(2){ /*분기 */
        width:129px;/*131*/
    }
        .a_list > li:nth-child(3) { /*이름 */
            /*105*/
            width:164px;
        }
    .a_list > li:nth-child(4){ /*직급 */
        width:110px;/*106*/
    }
        .a_list > li:nth-child(5) { /*생일 */
            width: 110px;
        }
    .a_list > li:nth-child(6){ /*챕터 */
        width:225px;/*215*/
    }
        .a_list > li:nth-child(7) { /* 스코어 */
          width:88px;
        }
    .a_list > li:active{
        background-color:white;
    }



    /**********  필터 표시 ************/

#view {
    margin: 0 auto;
    margin-bottom: 54px;
    max-width: 676px;
}
#a_view {    
    margin:0 auto;
}
    #a_view > ul {
        background-color: rgba(0,0,0,0);
        float:left;
    }
        #a_view > ul > li {
            background-color: rgba(0,0,0,0.03);
            color: rgba(0,0,0,0.2);
            /*border-radius:20px;*/
        }

        #a_view > ul:first-child { /*  년도 */
            margin-left: 0;
        }
         #a_view>ul:nth-child(1) >li{
            display:none;
            border-radius:50px 0 0 20px;
        }
        

    #a_view > ul:nth-child(2) { /* 쿼터 */
        width: 120px;
        margin-left:102px;
        /*margin-left: 107px;*/
    }

        #a_view > ul:nth-child(2) > li {
            width: 120px;
            display: none;
            border-radius: 0;
        }

        #a_view > ul:nth-child(3) { /* 랭크 */
            margin-left: 224px;
            /*margin-left: 234px;*/
        }

        #a_view > ul:nth-child(3) > li {
            display: none;
            border-radius: 0;
        }
        #a_view > ul:nth-child(4) { /* 트레이닝 챕터 */
            margin-left: 326px;
            /* margin-left: 341px; */
        }

            #a_view > ul:nth-child(4) > li {
                display: none;
                border-radius: 0 50px 20px 0;
            }

        #a_view > ul:nth-child(n) > li:first-child {
            display: block;
        }

    /****** 드롭 필터 ****/
    .f_list {
        position: absolute;
        width: 120px;
        border-radius: 20px;
        z-index: 10;
        display: none;
    }

.f_list >li {
    float: left;
    width: 105px;
    font-size: 11pt;
    line-height: 41px;
    color: #eeeeee;
    text-align: center;
    background-color:rgba(160,156, 147, 0.8);

}
    
    .f_list > li:last-child { 
        border-radius: 0 0 20px 20px;
    }

    .f_list > li:hover {
        background-color: rgb(160,156, 147);
    }

    

.a_list > li:nth-child(1):hover #f_list1 { /*년도 */
    display:block;

}


.a_list #f_list2 { /*쿼터 */
    width: 131px;
}
    .a_list  #f_list2 > li {
        width: 131px;
    }

.a_list > li:nth-child(2):hover #f_list2 {
    display: block;
}



.a_list #f_list3 { /*랭크*/
    width: 212px;/*106*/
}

    .a_list #f_list3> li {
        width: 106px;
    }
        .a_list #f_list3 > li:nth-child(2) {
            border-radius: 0 20px 0 0;
        }
    .a_list #f_list3> li:nth-child(19){
        border-radius:0 0 0 20px;
    }
    .a_list #f_list3> li:last-child{
        border-radius:0  0 20px  0;

    }
        .a_list #f_list3 > li:last-child:hover{
            background-color:none;
        }
        
        
        .a_list > li:nth-child(4):hover #f_list3 {
            display: block;
        }



.a_list #f_list4 {
    width: 225px;/*215*/
}

    .a_list #f_list4 > li {
        width: 225px; /*215*/
    }

.a_list > li:nth-child(6):hover #f_list4 {
    display: block;
}



/**********************/
.b_list {
    width: 1030px;
    margin: 0 auto;
}
        .b_list > li {
            width: 1030px;
            height: 55px;
            background-color: #eaeaea;
            border: 1px solid #dadada;
            border-top:none;
            box-sizing:border-box;
        }

.b_list_down , .b_list_down > span {
    display: block;
    float:left;
}

.b_list_down {
    width: 1030px;
    height: 55px;
}

    .b_list_down > span {
        float: left;
        width: 120px;
        /*height: 55px;*/
        font-size: 12pt;
        line-height: 55px;
        color: #808080;
        text-align:center;
    }

    
.b_list_down > span:nth-of-type(1){ /* 년도 year */
    width:125px;/*140*/
}

        .b_list_down > span:nth-of-type(2) { /* 분기 quarter*/
            width: 140px;
            letter-spacing:-0.5px;
        }
        .b_list_down > span:nth-of-type(3) { /*이름 name */
            width: 176px; /*128*/
            font-size: 11pt;
            letter-spacing: -1px;
            line-height: 20px;
            position: inherit;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .b_list_down > span:nth-of-type(4){ /* 직급 rank */
            width:120px;
        }
        .b_list_down > span:nth-of-type(5) { /* 생년월일 birth */
            width: 128px;
        }
        .b_list_down > span:nth-of-type(6) { /* 과목 chapter */
            width: 230px;
            font-size: 11pt;
            letter-spacing: -1px;
            line-height: 20px;
            position: inherit;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .b_list_down > span:nth-of-type(7) { /* 점수 score */
            width: 110px;/*138*/
        }


/*첫번째 리스트(랭킹 1위)*/
.b_list > li:first-child p {
    background-color: #fff;
    box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.1); /*css #6D6D6D*/
    -webkit-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.1); /*Safari and Chrome */
    -moz-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.1); /* Firefox */
}
.b_list > li:first-child{
    border:none;
}

/* 랭킹 넘버 붙이기 */

.b_list > li > .b_list_down {
    position: relative;
}

.ranking_n{
    float:left;
}
.b_list .b_list_down > .ranking_n {
    position: absolute;
    
    width: 67px;
    height: 55px;
    left: -67px;

    background-image: url(../images/rank_icon_01.png);
    background-position:center;
}
.b_list > li:nth-child(2) > p > .ranking_n {
    background-image: url(../images/rank_icon_02.png);
}
.b_list > li:nth-child(3) > p > .ranking_n {
    background-image: url(../images/rank_icon_03.png);
}

/***************** op2-3 Personal Performance **********************/
#op_contents3 {
min-height:1500px;
}

.graph {
    width: 1023px;
    height: 437px;
    margin: 0 auto;
    margin-top: 104px;
}

    .graph > div {
        float: left;
    }
    .graph >div:nth-child(2){
        width:841px;
        height:100%;
    }
.Btn {
    width: 91px;
    height: 100%;
    line-height: 412px;
    text-align: center;
    font-size: 70pt;
    font-weight: 700;
    color: #aaa;
    background-image: url(../images/arrow.png);
    background-position:center;
}
.graph > .Btn:nth-of-type(1){
    transform:scaleX(-1);
}
.graph_text {
    color: #969696;
    font-size: 11pt;
    font-weight: 100;
    height: 25px;
    line-height: 25px;
}

.graph_bg {
    width: 813px; /*841*/
    height: 384px; /*412*/
    border-bottom: 2px solid rgba(0,0,0,0.2);
    background-color: rgba(0,0,0,0.05);
    padding: 14px;
}
.graph_bg_line {
    width: 100%;
    height: 281px;
    border-bottom: 1px solid #cccccc;
    box-sizing:border-box;
}
    .graph_bg_line > li {
        height: 10%;
        border-bottom: 1px solid #e6e6e6;
        box-sizing: border-box;
        color: #e6e6e6;
        line-height:40px;
    }
    .graph_bg_line > li:nth-child(4) {
        
        border-bottom: 2px solid red;
        box-sizing: border-box;
    }

    .graph_bg_item{
        width:752px;
        height:33px;
        margin-left:23px;
    }
        .graph_bg_item > li {
            float: left;
            width: 8.3%;
            height: 30px;
            padding-top: 3px;
            text-align: center;
            font-size: 9pt;
            line-height: 14px;
            color: #b3b3b3;
            font-weight:200;
        }



        .graph_bg_item > li:nth-child(2n) {
           /* background-color: rgba(0,0,0,0.05);*/
        }


.bot {
    border-top: 5px solid rgba(255,255,255,0.2);
    position: fixed;
    bottom: 0;
    z-index: 50;
    background-color: rgba(3,45,95,0.7);
    width: 100%;
    min-height: 80px;
}
#op2_3_contents_search {
    width:470px;
    margin:0 auto;
    margin-top:18px;
    box-sizing:border-box;
}

#op2_3_contents_search > .search_menu {
    background-color: rgba(0,0,0,0.2);
}

    #op2_3_contents_search > .search_menu > li {
        color: #b3b3b3;
    }
        #op2_3_contents_search > .search_menu > li:hover {
            color: #f2f2f2;
        }

#op2_3_contents_search > input:nth-of-type(1){
    margin-left:107px;
}

    #op2_3_contents_search > input:nth-of-type(3) {
        
        background-image: url(../images/search2.png);
        background-size:90%;

    }

    /* 추가분 */

.same_name {
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    min-width: 100px;
    max-width: 800px;
    padding: 0 20px;
    padding-top: 7px;
    padding-bottom: 11px;
    background-color: rgba(0,0,0,0.2);
    min-height: 100px;
}
.same_name_list {
    margin-top: 7px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.2);
    box-sizing: border-box;
}
    .same_name_list:hover {
        background-color: rgba(255,255,255,0.2);
    }

    .same_name_list > li {
        float: left;
        line-height: 42px;
        color: rgba(255,255,255,0.3);
        margin-left: 7px;
        width: 361px;
        background-color: rgba(0,0,0,0.03);
        text-align:center;
    }

.same_name > .same_name_list > .same_rank1 {
    background-image: url(../images/w_icon_01.png);
}

.same_name > .same_name_list > .same_rank2 {
    background-image: url(../images/w_icon_02.png);
}

.same_name > .same_name_list > .same_rank3 {
    background-image: url(../images/w_icon_03.png);
}

.same_name > .same_name_list > .same_rank4 {
    background-image: url(../images/w_icon_04.png);
}

.same_name > .same_name_list > .same_rank5 {
    background-image: url(../images/w_icon_05.png);
}

        .same_name_list > li:nth-child(1) {
            height: 42px;
            width: 43px;
            padding-left:100px;
            padding-right:30px;
            margin-left:0px;
            background-size:auto 100%;
            background-position-x:130px;
            
        }

        .same_name_list > li:nth-child(2) {
            margin-left:0;
            text-align:left;
            width:100px;
        }
        .same_name_list > li:nth-child(3) {
            width: 150px;
        }

            
        /* 나중에 클레스로 정리 
#op2_3_contents_search2 {
    margin-top: 40px;
    margin-bottom: 0;
    width: 460px;
    z-index: 50;
}

    #op2_3_contents_search2 > .search_menu {
        background-color: rgba(0,0,0,0.2);
    }

        #op2_3_contents_search2 > .search_menu > li {
            color: #999999;
        }

            #op2_3_contents_search2 > .search_menu > li:hover {
                color: #f2f2f2;
            }

    #op2_3_contents_search2 > input:nth-of-type(1) {
        margin-left: 107px;
    }

    #op2_3_contents_search2 > input:nth-of-type(3) {
        background-image: url(../images/search2.png);
        background-size: 90%;
    }

        */
        /*****그래프 시작******/
        .graph_bg {
            position: relative;
        }
    .graph_po{
        position:absolute;
        width:813px;
        height:384px;
        top:14px;
    }

    /* 추가분 3 */
.graph_box {
    height:381px;/*281*/
    width:752px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

/* 이부분 */
.g_bb {
    position: absolute;
    list-style: none;
    width: 3008px;
}

    .g_bb > li {
        width: 752px;
        height: 281px;
        float: left;
        /*margin: 1px;*/
    }

.g_q{
    float:left;
    /*position:absolute;*/
}

.g_q, .g_q > ul {
    height: 281px;
    width: 752px;
}
    .g_q > ul > li {
        float: left;
        width: 8.3%;
        height: 100%;
        position: relative;
    }
        .g_q > ul > li > div {
            width: 12px;
            height: 50%;
            box-sizing: border-box;
            position: absolute;
            bottom: 0;
            box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.1); /*css #6D6D6D*/
            -webkit-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.1); /*Safari and Chrome */
            -moz-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.1); /* Firefox */
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
            .g_q > ul > li > div:nth-child(1) {
                width: 100%;
                height: 62%;
                background-color: rgba(179,179,214,0.6);
                border-top: 1px solid rgba(141,152,198,0.6);
                box-shadow: none; /*css #6D6D6D*/
                -webkit-box-shadow: none; /*Safari and Chrome */
                -moz-box-shadow: none; /* Firefox */
                -webkit-transform: none;
                transform: none;
            }

            .g_q > ul > li > div:nth-child(2) {
                width: 10px;
                background-color: #1a6a89;
                border-top: 1px solid rgba(141,152,198,0.6);
                left: 50%;         

            }
            .g_q > ul > li > div:nth-child(3) {
                width: 12px;
                background-color: #0480be;
                border-top: 1px solid rgba(141,152,198,0.6);
                left: 47%;
            }

            .g_q > ul > li > div:nth-child(4) {
                width: 12px;
                height: 60%;
                background-color: #3ba1e2;
                border-top: 1px solid rgba(141,152,198,0.6);
                left: 37%;
            }
            .g_q > ul > li > div:nth-child(5) {
                width: 16px;
                height: 70%;
                background-color: #4fc9ca;
                border-top: 1px solid #6ce0da;
                left: 28%;
            }

            /* 이까지 1Q  ㅅ 아래는 평균값 */

            .g_q > ul > li:nth-child(1) > div:nth-child(1) {
                height: 47%;
            }
        .g_q > ul > li:nth-child(2) > div:nth-child(1) {
            height: 62%;
        }
        .g_q > ul > li:nth-child(3) > div:nth-child(1) {
            height: 80%;
        }
        .g_q > ul > li:nth-child(4) > div:nth-child(1) {
        }
        .g_q > ul > li:nth-child(5) > div:nth-child(1) {
            height: 44%;
        }
        .g_q > ul > li:nth-child(6) > div:nth-child(1) {

        }
        .g_q > ul > li:nth-child(7) > div:nth-child(1) {
            height: 47%;
        }
        .g_q > ul > li:nth-child(8) > div:nth-child(1) {
            height: 67%;
        }
        .g_q > ul > li:nth-child(9) > div:nth-child(1) {
        }
        .g_q > ul > li:nth-child(10) > div:nth-child(1) {
            height: 87%;
        }
        .g_q > ul > li:nth-child(11) > div:nth-child(1) {
        }
        .g_q > ul > li:nth-child(12) > div:nth-child(1) {
            height: 77%;
        }

        /* 여기부터 1Q 1분기값*/
        .g_q > ul > li:nth-child(1) > div:nth-child(2) {
            height: 65%;
        }

        .g_q > ul > li:nth-child(2) > div:nth-child(2) {
            height: 56%;
        }

        .g_q > ul > li:nth-child(3) > div:nth-child(2) {
            height: 67%;
        }

        .g_q > ul > li:nth-child(4) > div:nth-child(2) {
        }

        .g_q > ul > li:nth-child(5) > div:nth-child(2) {
            height: 34%;
        }

        .g_q > ul > li:nth-child(6) > div:nth-child(2) {
        }

        .g_q > ul > li:nth-child(7) > div:nth-child(2) {
            height: 37%;
        }

        .g_q > ul > li:nth-child(8) > div:nth-child(2) {
            height: 77%;
        }

        .g_q > ul > li:nth-child(9) > div:nth-child(2) {
        }

        .g_q > ul > li:nth-child(10) > div:nth-child(2) {
            height: 78%;
        }

        .g_q > ul > li:nth-child(11) > div:nth-child(2) {
        }

        .g_q > ul > li:nth-child(12) > div:nth-child(2) {
            height: 75%;
        }

        /** 2Q ***/
        #g_q2 > ul > li > div:nth-child(2) {
            left:60%;
        }

        /***** 쿼터별  위치 지정 *****/

    #g_q1 {
    left: 0;
}
    


#g_q2 {
    left: 752px;
}
    

#g_q2 > ul > li > div:nth-child(2) {
    left: 64%;
}

#g_q2 > ul > li > div:nth-child(3) {
    left: 50%;
}



#g_q3 {
    left: 1504px;
}
    


    #g_q3 > ul > li > div:nth-child(2) {
    left: 68%;
}
#g_q3 > ul > li > div:nth-child(3) {
    width: 11px;
    left: 55%;
}

#g_q3 > ul > li > div:nth-child(4) {
    width: 13px;
    height: 60%;
    left: 37%;
}



#g_q4 {
    left: 2256px;
}
    

    #g_q4 > ul > li > div:nth-child(2) {
        left: 75%;
    }

    #g_q4 > ul > li > div:nth-child(3) {
        width: 10px;
        left: 61%;
    }

    #g_q4 > ul > li > div:nth-child(4) {
        width: 11px;
        height: 40%;
        left: 47%;
    }

    
    
        /********* 항목 설명 **********/

        .g_d{
            width:84px;
            height:78px;
            padding-top:7px;
            position:absolute;
            bottom:0;
            right:0;
        }
            .g_d >li>div{
                float:left;
                width:7px;
                height:7px;
                background-color:rgba(179,179,214,0.6);
                margin-left:3px;
                margin-top:4px;
            }
            .g_d > li:nth-child(1) > div {
                background-color: #4fc9ca;
            }
            .g_d > li:nth-child(2) > div {
                background-color: #3ba1e2;
            }
            .g_d > li:nth-child(3) > div {
                background-color: #0480be;
            }
            .g_d > li:nth-child(4) > div {
                background-color: #1a6a89;
            }

            .g_d > li {
                width:100%;
                height:15px;
                color: rgba(83,71,65,0.6);
                font-size: 8pt;
                text-align: right;
                line-height: 15px;
            }


#graph2 {
    width: 841px;
}

/* 추가분 2*/

.g_q > ul {
 position:relative;   
}

    .g_bb > .g_q > ul > .g_quarter {
        width:100px;
        height:25px;
        text-align:center;
        line-height:25px;
        font-weight:700;
        position: absolute;
        color:rgba(0,0,0,0.4);
        bottom: -90px;
        left: 50%;
        z-index:50;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

/********** op3 monitering  *********/
.op3_bg {
    background-color: #4ec5ce;
    min-height: 1400px;
}
    .op3_bg .op3 .op3_title {
        color: #3d5259;
    }

.op3_con {
    width: 77px;
    margin: 0 auto;
    margin-top: 54px;
    margin-bottom: 50px;
}

    .op3_bg .contents .op3_con > .search_menu {
        width: 77px;
        line-height: 25px;
        margin: 0 auto;
        background-color: rgba(0,0,0,0.2);
    }

        .op3_bg .contents .op3_con > .search_menu > li {
            height: 25px;
            width: 77px;
            line-height: 25px;
        }

        /*
.search_year {
    height: 25px;
    width: 77px;
    line-height: 25px;
    margin: 0 auto;
    margin-top: 54px;
    margin-bottom: 50px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 13px;
    
    text-align: center;
    color: #b3b3b3;
}
    */
        .op3_list{
    width:840px;
    height:190px;
    margin:0 auto;
    margin-bottom:26px;
}
#op3_list1 {
    height: 559px;  /* 549*/ 
}

    .op3_list > p {
        display:block;
        height:26px;
        line-height:26px;
        font-size: 11.5pt;
        color: #e5e5e5;
        font-weight:100;
    }

    /*배 그림 이름 타입*/
.op3_list_01 {
    width: 840px;
    height: 164px;
    border: 1px solid #cbdfe4;
    background-color: #032d5f;
    background-image: url(../images/wave.png);
    box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.2); /*css #6D6D6D*/
    -webkit-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.2); /*Safari and Chrome */
    -moz-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.2); /* Firefox */
}
.op3_list_01 > div{
    float:left;
    width:193px;
    height:164px;
}

    .op3_list_01 > div:nth-child(1) {
        border-right: 1px solid #cbdfe4;
        box-sizing:border-box;
    }
.op3_list_01 > div:nth-child(2){
        width:647px;

    }

.vessel > div {
    width: 100%;
    height: 108px;
    background-image: url(../images/carrier.png);
}

#op3_list2 .vessel > div {
    background-image: url(../images/lng.png);
}

#op3_list3 .vessel > div {
    background-image: url(../images/lpg.png);
}


.vessel> p{
    text-align:center;
}

.vessel > p:first-of-type {
    height: 24px;
    margin-top: 6px;
    font-size:17px;
    color: #999999;

}

    .vessel > p:last-of-type {
        height: 12px;
        line-height:10px;
        font-size: 12px;
        color: #666666;
        letter-spacing:-1px;
    }

/* 쿼터 진행률 퍼센트 */

.op3_list .op3_list_01 > .progressbar {
    width: 607px; /*647 -20 -20*/
    height: 124px; /*164 -20 -20*/
    padding: 20px;
}
.p1 {
    width: 607px;
    height: 19px;
    margin-bottom:16px;
}

.progressbar > .p1:last-child{
    margin-bottom:0;
}

.p1 > span {
    width: 36px;
    height: 19px;
    color: #b7b6b6;
    font-weight: 100;
    font-size: 12pt;
    line-height: 19px;
    display: block;
    float: left;
}
.p1 > div {
    width: 507px;
    height: 19px;
    float: left;
    border: 1px solid #7f94ad;
    box-sizing: border-box;
}
    .p1 > div > div {
        height: 100%;
        width: 67%;
        background-color: #e36269;
    }

.p1 > span:last-child {
    width: 60px;
    height: 19px;
    text-align: center;
    color: #666666;
}

 /* 2Q */

.p1:nth-child(2) > div > div {
    height: 100%;
    width: 82%;
    background-color: #fdb72e;
}

/* 3Q*/

.p1:nth-child(3) > div > div {
    height: 100%;
    width: 70%;
    background-color: #e5dbd6;
}

/* 4Q*/

.p1:nth-child(4) > div > div {
    height: 100%;
    width: 93%;
    background-color: #6982f0;
}

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

 /* 클릭시 나타나는 아랫부분*/

 .op3_p_list{ /*분류 */
     width:100%;/*840*/
     height:352px;
     margin-top:15px;
 }
.op3_p_list_top {
    height: 60px;
    margin-bottom: 2px;
    background-color: rgba(0,0,0,0.15);
}

    .op3_p_list_top > li {
        width: 150px;
        float: left;
        height:100%;
        line-height:60px;
        color: #4d4d4d;
        font-size:11pt;
        text-align:center;
    }

        .op3_p_list_top > li:nth-child(1) {
            padding-left: 12px;
            width: 160px;

        }
        .op3_p_list_top > li:nth-child(2n) {
            width: 460px;
        }



        .op3_p_list_top > li:nth-child(3) {
            width: 180px;
        }

        /* 아래 리스트 div */
.op3_p_list > div:nth-of-type(1) {
    width: 840px;
    height: 295px; /*280*/
    overflow: hidden;
    background-color: rgba(0,0,0,0.15);
    border-radius:0 0 0 20px;
}

/* 아래 리스트 ul*/
.op3_p_list_down {
    width: 100%;
    height: 263px; /*280 */
    /* 스크롤 */
    overflow: auto;
    /*ie*/
    scrollbar-3dlight-color: rgb(66,168,175);
    scrollbar-arrow-color: rgb(56,143,149); /*화살표 색상*/
    scrollbar-base-color: rgb(56,143,149); /*스크롤바 테두리. 배경 색상이 이상하게 먹음 */
    scrollbar-face-color: #388f95; /*스크롤 바 색상*/
    scrollbar-track-color: rgb(66,168,175); /*스크롤 전체 배경 색상*/
    scrollbar-darkshadow-color: rebeccapurple; /* 안나옴 */
    scrollbar-highlight-color: white; /*안나옴 */
    scrollbar-shadow-color: rgb(66,168,175); /*스크롤바 테두리*/
    
    
}
    /*스크롤 크롬 오페라*/
    .op3_p_list_down::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .op3_p_list_down::-webkit-scrollbar-button:start:decrement
    .op3_p_list_down::-webkit-scrollbar-button:end:increment {
        display: block;
        height: 10px;
        background: #efefef;
    }
    .op3_p_list_down::-webkit-scrollbar-track {
        background: rgba(66,168,175,1); /*#efefef;*/
        
        /*-webkit-border-radius: 10px;
    -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.2);*/
    }
    .op3_p_list_down::-webkit-scrollbar-thumb {
        height: 50px;
        width: 50px;
        background: rgba(0,0,0,0.1);
        -webkit-border-radius: 8px;
        border-radius: 8px;
        /*-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);*/
    }
    


.op3_p_list_down > li:first-child{
    padding-top:11px;
}

.p_down > li {
    float: left;
    width: 150px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #666868;
    font-weight: 100;
}

    .p_down > li:nth-child(1) {
        width: 160px;
        padding-left: 12px;
    }
    .p_down > li:nth-child(2) {
        width: 460px;
    }
    .p_down > li:nth-child(3) {
        width: 180px;
    }

.op3_p_list_down > li:last-child > ul >li {
}

/* 리스트 x  34 27 */
    .down_m{
    position:relative;
}

.list_x {
    position:absolute;
    width: 27px;
    height: 27px;
    float: right;
    right:0;
    bottom:0;
    background-image: url(../images/x.png);
    background-color: rgba(0,0,0,0.15);
}


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

.op3_p_list{
    display:none;
}
#op3_list1{
    height:190px;
}
.op3_p_list_down{
    display:none;

}


/**********************  op4 crew_evaluation  ************************/

.op4_bg {
    background-color: #F7F7F7;
}

/****************  op4 crew_test  **********/
.capter{
    color:white;
    font-weight:800;
}


/*************  ws4 _Regulation 트레이닝 화면   ***********/
.nr_movie {
    background-color: rgba(255,255,255,0.5);
    margin-top: 200px;
    width: 1200px;
    height: 750px;
    margin-bottom: 14px;
}

.nr_movie_v { /* 비디오 태그*/    
    width: 100%;
    height: 100%;
    background-color:black;
}

.nr_movie_v >track{
}

.m_gradient {
    min-width: 1178px;
    min-height: 3px;
    background: #362446; /* Old browsers */
    background: -moz-linear-gradient(left, #362446 1%, #564e6b 21%, #6c657c 48%, #6c657c 54%, #564e6b 79%, #564e6b 79%, #2d1d41 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #362446 1%,#564e6b 21%,#6c657c 48%,#6c657c 54%,#564e6b 79%,#564e6b 79%,#2d1d41 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #362446 1%,#564e6b 21%,#6c657c 48%,#6c657c 54%,#564e6b 79%,#564e6b 79%,#2d1d41 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362446', endColorstr='#2d1d41',GradientType=1 ); /* IE6-9 */
    position: relative;
}





.t_caption {
    display:block;
    margin-top: 10px;
    min-width: 1178px;
    height: 100px;
    line-height: 20pt;
    text-align: center;
    color: #808080;
    font-family: NanumSquare;
    font-size: 10pt;
    letter-spacing: -0.3px;
}

/******* ws3 제너럴 트레이닝 ****/

.g_movie {
    background-color: rgba(255,255,255,0.5);
    margin-top: 200px;
    width: 1178px;
    height: 520px;
    margin-bottom: 14px;
}
.g_movie_v { /* 비디오 태그*/
    width: 100%;
    height: 100%;
    background-color: black;
}

/******** ws 테스트 화면 ****/


.t_movie {
    width: 50%;
    display:block;
    float:left;
}

.t_movie_v {
    width: 651px;
    height: 351px;
    margin-top: 240px;
    border: none;
    background-color: #CFCECE;
}

.test_page {
    width: 50%;
    height:100%;
    background-color: white;
    display: block;
    float:right;
    position:relative;
}
.t_q{
    display:block;
    float:right;
    height:40px;
    width:300px;
    text-align:right;
    margin-right:22px;
    margin-top:20px;
}

    .t_q, .t_q > span {
        font-size:20pt;
        font-weight:100;
        letter-spacing:-1.2px;
        color:rebeccapurple;
    }

.t_box {
    width: 557px; /*622   562 -5 557*/
    height: 200px;
    margin-right: 5px;
    margin-top: 150px; /* -40 -20*/
    padding: 0 50px;
    padding-bottom: 0;
    margin-bottom: 45px;
    /* 스크롤 */
    overflow: auto;
    /*ie*/
    scrollbar-3dlight-color: rgb(66,168,175);
    scrollbar-arrow-color: rgb(230,230,230); /*rgb(56,143,149);화살표 색상*/
    scrollbar-base-color: rgb(255,255,255); /*rgb(56,143,149);스크롤바 테두리. 배경 색상이 이상하게 먹음 */
    scrollbar-face-color: #efefef; /*#388f95; 스크롤 바 색상*/
    scrollbar-track-color: #fff; /*rgb(66,168,175); 스크롤 전체 배경 색상*/
    scrollbar-darkshadow-color: rebeccapurple; /* 안나옴 */
    scrollbar-highlight-color: white; /*안나옴 */
    scrollbar-shadow-color: rgb(230,230,230); /* rgb(66,168,175)스크롤바 테두리*/
}
/*스크롤 크롬 오페라*/
.t_box::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.t_box::-webkit-scrollbar-button:start:decrement
.t_box::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 10px;
    background: #efefef;
}

    .t_box::-webkit-scrollbar-track {
        background:#fff; /*#efefef; rgba(66,168,175,1)*/
        /*-webkit-border-radius: 10px;
    -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.2);*/
    }

.t_box::-webkit-scrollbar-thumb {
    height: 50px;
    width: 50px;
    background: rgba(0,0,0,0.1);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    /*-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);*/
}

    .test_page > div > p {
        font-family: NanumSquare;
        color: #3E4235;
        font-size:15pt;
        letter-spacing:-0.5px;
        line-height:20pt;
    }


.p_view {
    width: 557px; /*622  562-5*/
    height: 320px;
    padding: 0 50px;
    overflow: auto;
    /* 스크롤 */
    overflow: auto;
    /*ie*/
    scrollbar-3dlight-color: rgb(66,168,175);
    scrollbar-arrow-color: rgb(230,230,230); /*rgb(56,143,149);화살표 색상*/
    scrollbar-base-color: rgb(255,255,255); /*rgb(56,143,149);스크롤바 테두리. 배경 색상이 이상하게 먹음 */
    scrollbar-face-color: #efefef; /*#388f95; 스크롤 바 색상*/
    scrollbar-track-color: #fff; /*rgb(66,168,175); 스크롤 전체 배경 색상*/
    scrollbar-darkshadow-color: rebeccapurple; /* 안나옴 */
    scrollbar-highlight-color: white; /*안나옴 */
    scrollbar-shadow-color: rgb(230,230,230); /* rgb(66,168,175)스크롤바 테두리*/
}

/*스크롤 크롬 오페라*/
    .p_view::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .p_view::-webkit-scrollbar-button:start:decrement
    .p_view::-webkit-scrollbar-button:end:increment {
        display: block;
        height: 10px;
        background: #efefef;
    }
    .p_view::-webkit-scrollbar-track {
        background: #fff; /*#efefef; rgba(66,168,175,1)*/
        /*-webkit-border-radius: 10px;
    -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.2);*/
    }

    .p_view::-webkit-scrollbar-thumb {
        height: 50px;
        width: 50px;
        background: rgba(0,0,0,0.1);
        -webkit-border-radius: 8px;
        border-radius: 8px;
        /*-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);*/
    }


.p_view input{
    display:block;
    float:left;
    width:30px;
    margin-top:4px;
}

    .p_view label {
        display: block;
        float: left;
        width: 500px; /*532 -5*/
        margin-bottom: 15px;
        font-family: NanumSquare;
        color: #4D4D4D;
        font-size: 13pt;
        letter-spacing: -0.5px;
        line-height: 17.5pt;
    }

.bt_next {
    position:absolute;
    width: 90px;
    height: 30px;
    line-height: 28px;
    font-size: 15pt;
    font-family: 나눔고딕;
    text-align: center;
    /* background-color: navy; */
    color: #666666;
    border: 1px solid #666666;
    border-radius: 55px;
    box-sizing: border-box;
    bottom:35px;
    right:25px;
}


    .bt_next:hover {
        background-color: #E6E6E6;
    }

    .bt_next:active {
        background-color: #120634;
        color:white;
    }

    /*** ws4 크루리스트 선택 ****/


.ws4_c1 #accordion label {
    display: block;
    background-color:white;
    float: left;
    color: #808080;
    font-size: 13.7pt;
    letter-spacing: -0.5px;
    font-weight: 100;
    text-align: center;
    line-height: 55px;
}

.ws4_c1 #accordion input[type="checkbox"]:checked > .list_top {
    background-color: #7f7979;
}

.ws4_c1 #accordion > li:nth-child(2) {
    height: 1px;
    width:1070px;
    margin: 17px 17px 25px 10px;
    background-color: rgba(0,0,0,0.1);
}
.ws4_c1 #accordion > li:last-child {
    height: 30px;
}

.ws4_c1 #accordion .cm_warn {
    color: #05424E;
    font-size: 10.5pt;
    line-height:25pt;
    letter-spacing: -1.5px;
}

/*** ws3 크루리스트 선택 ****/


.ws3_c1 #accordion label {
    display: block;
    background-color: white;
    float: left;
    color: #808080;
    font-size: 13.7pt;
    letter-spacing: -0.5px;
    font-weight: 100;
    text-align: center;
    line-height: 55px;
}

.ws3_c1 #accordion input[type="checkbox"]:checked > .list_top {
    background-color: #7f7979;
}

.ws3_c1 #accordion .line {
    height: 1px;
    width: 1070px;
    margin: 17px 17px 25px 10px;
    background-color: rgba(0,0,0,0.1);
}

.ws3_c1 #accordion > li:last-child {
    height: 30px;
}

.ws3_c1 #accordion .cm_warn {
    color: #05424E;
    font-size: 10.5pt;
    line-height: 25pt;
    letter-spacing: -1.5px;
}
/*****/




/****/

#bt_teststart {
    display: block;
    float: right;
    width: 170px;
    height: 50px;
    /*background-color: rgba(255,255,255,0.5);*/
    border: 1px solid rgba(255,255,255,0.4);
    text-align: center;
    line-height: 50px;
}

    #bt_teststart:hover {
        background-color: rgba(255,255,255,0.1);
    }

    #bt_teststart:active {
        background-color: rgba(255,255,255,0.5);
    }


    /*****  ws 제너럴 트레이닝 ****/

    
.g_t_sidemenu {
    /*position: absolute;
        z-index: 30;*/
    top: 63px;
    width: 500px;
    background-color: #0B0028;
    height: 120%;
    border-left: 10px solid #333333;
    box-shadow: 10px 0px 55px 25px rgba(0,0,0,0.3); /*css #6D6D6D*/
    -webkit-box-shadow: 10px 0px 55px 25px rgba(0,0,0,0.3); /*Safari and Chrome */
    -moz-box-shadow: 10px 0px 55px 25px rgba(0,0,0,0.3); /* Firefox */
    overflow-y: auto;
}

#t_cover {
    position: absolute;
    z-index: 20;
    left: -560px; /*-510*/
    height: 100%;
    display: block;
    width: 650px; /*1000*/
    margin-top:63px;
}
    #t_cover:hover {
        transition-property: all;
        left: 0px;
        width:520px;
        transition-duration: 0.5s;
    }

    .g_t_list_title {
        height: 180px;
        line-height: 180px;
        width: 100%;
        background-color: #54C0DD;
        font-family: NanumSquareRound;
        font-weight: 700;
        color: white;
        text-align: center;
        font-size: 27pt;
        letter-spacing: -1.5px;
        margin-bottom: 50px;
    }

.g_t_list_b{
    
}

.g_t_list {
    list-style: none;
    margin-left: 60px;
    list-style-position: outside;
    color: #808080;
    font-family: NanumSquare;
    font-weight: 900;
    font-size: 15pt;
    min-height: 15px;
    margin-bottom: 20px;
    padding-right: 35px;
    padding-left: 8px;
    cursor: pointer;
}

    .g_t_list:hover {
        color: #B3B3B3;
    }

    .g_t_list > div {
        display: block;
        float: left;
        margin-left: 0px;
        width: 30px;
        height: 27px;
        padding: 5px 0 0 10px;
    }

    .g_t_list > p {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 15pt;
    }



    /*** 퍼스널 트레이닝 ***/

.ws1_t .g_t_list_title {
    background-color: #45DBD3;
}

.ws1_t .g_t_list {
    list-style: url(../images/ws_list_style3.png);
}


.ws1_t .g_t_list:hover {
    list-style: url(../images/ws_list_style3_on.png);
    color: #B3B3B3;
}

.g_t_list > ul {
    margin-top: 10px;
    margin-bottom:15px;
    /*border-bottom: 1px solid rgba(255,255,255,0.2);*/
}

.g_t_list_down {
    color: #666666;
    font-family: NanumSquare;
    font-weight: 800;
    font-size: 14pt;
    margin-top: 10px;
    padding-left: 20px;

}

    .g_t_list_down:hover {
        list-style: url(../images/ws_list_style4.png);
        color: #999999;
    }

    .g_t_list_down > div {
        display: block;
        float: left;
        margin-left: 0px;
        width: 30px;
        height: 27px;
        padding: 0px 0 0 10px;
    }

    .g_t_list_down > p {
        display: block;
        margin: 0;
        padding: 0;
    }

.g_t_list > ul{
    display:none;
}

.g_t_list:hover ul{
    display: block;


}

/***  ws 퍼스널 테스트 *****/

.p_tt_sidemenu {
    position:absolute;
    top: 63px;
    width: 500px;
    background-color: #0B0028;
    height: 120%;
    border-left: 10px solid #333333;
    box-shadow: 5px 0px 55px 20px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 0px 55px 20px rgba(0,0,0,0.3);
    -moz-box-shadow: 5px 0px 55px 20px rgba(0,0,0,0.3);
}

.p_tt_list_title {
    height: 180px;
    line-height: 180px;
    width: 100%;
    background-color: #00A99D;
    font-family: NanumSquareRound;
    font-weight: 700;
    color: white;
    text-align: center;
    font-size: 27pt;
    letter-spacing: -1.5px;
    margin-bottom: 40px;
}

.p_tt_list_b {
    position: absolute;
    width: 510px;
    left: -10px;
}

    .p_tt_list_b li{
        cursor:pointer;
    }

    .p_tt_list {
        min-height: 40px;
        line-height: 40px;
        margin: 2px 0;
    }

    .p_tt_list:hover{
        background-color:rgba(255,255,255,0.2);
    }

    .p_tt_list > div {
        display: block;
        float: left;
        margin-left: 50px;
        width: 30px;   /*40  12 28*/
        height: 27px; /*40   13 +27*/
        padding: 13px 0 0 10px;
    }

.c_none {
    width: 12px; /* 40- 13 27 /2 13*/
    height: 12px;
    border: 1px solid #00A99D;
    box-sizing: border-box;
}

.c_on {
    background-color: #00A99D;
}

/* 현재 선택된 항목 표시 (완료 상태 c_on 과 독립) */
.c_sel {
    background-color: #7fd6cf;
    box-shadow: 0 0 6px 2px rgba(0,169,157,0.9);
}


.p_tt_list_b p, .p_tt_list_b a {
    display: block;
    color: #808080;
    width: 400px;
    margin-left: 90px;
    font-family: NanumSquare;
    font-weight: 900;
    font-size: 15pt;
    min-height: 15px;
}

.p_tt_list > ul {
    margin-left: 10px;
    width: 500px;
    background-color: black;
    padding:2px 0 10px 0;
    display:none;
}

.p_tt_list_down {
    color: #808080;
    font-family: NanumSquare;
    font-weight: 800;
    font-size: 14pt;
    min-height: 14px;
    text-indent:70px;
}

    .p_tt_list_down:hover {
        color: #999999;
        background-color: rgba(255,255,255,0.1);
    }

.p_tt_list:hover ul{
    display:block;

}

.test_contents_title {
    margin:80px 0 100px 60px;
    height:40px;
}
    .test_contents_title > div {
        float: left;
        width: 30px; /*40  12 28*/
        height: 27px; /*40   13 +27*/
        padding: 13px 0 0 10px;
    }

    .test_contents_title p {
        float: left;
        color: #A0A0A0;
        font-family: NanumSquare;
        font-weight: 900;
        font-size: 15pt;
        line-height:40px;
    }

.tt_status {
    padding-left: 60px;
    width: 1018px; /*1178  1118*/
    height: 180px; /*300 -20*/
    /*padding-top: 80px;*/
    /*background-color: rgba(255,255,255,0.1);*/
    position:relative;
}
.tt_score_box {
    position: relative;
    float: left;
    width: 350px;
    height: 180px;
    margin-left: 30px;
    /*background-color: rgba(255,255,255,0.1);*/
}

.tt_score_box > span {
    display:block;
    position:absolute;
}
    .tt_score_box > span:nth-child(1) {
        width: 245px;
        height: 125px;
        font-size: 97pt;
        font-family: NanumSquare;
        font-weight: 900;
        text-align: right;
        
        letter-spacing: -7px;
        font-stretch: narrower;
        /*background-color: rgba(255,255,255,0.1);*/
        bottom: 20px;
        left: 0px;
    }

.tt_score_c {   /* 스코어 컴플릿트 색상 */
    color: #0F9383;
}

.tt_score_n { /*스코어 낫 컴플릿트 색상 :000 */
    color: #592A82;
}


    .tt_score_box > span:nth-child(2) { /* 빗금 */
        color: rgba(51,51,51,0.7);
        font-size: 90pt;
        line-height: 88pt;
        font-weight: 900;
        font-family: NanumSquare;
        font-style: italic;
        bottom: 0px;
        right: 78px;
    }
    .tt_score_box > span:nth-child(3) { /* 100 */
        color: #777777;
        font-size: 45pt;
        line-height: 100pt;
        font-weight: 100;
        font-family: NanumSquare;
        letter-spacing:-5px;
        bottom:-30px;
        right:0;
    }

.complete_box {
    float: right;
    /* display: block; */
    margin-top: 150px;
    margin-right: 90px;
}

.com_on { /* 스코어 컴플릿트 색상 */
    color: #1AD6D4;
}

.com_not { /*스코어 낫 컴플릿트 색상 :000 */
    color: #891AFF;
}

.gr {
    position: absolute;
    z-index: 20;
    left: 40px;
    top: 45px;
    width: 500px;
    height: 200px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,000000+77&0.3+0,0+50 */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.29) 1%, rgba(91,91,91,0) 50%, rgba(0,0,0,0) 77%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.29) 1%,rgba(91,91,91,0) 50%,rgba(0,0,0,0) 77%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.29) 1%,rgba(91,91,91,0) 50%,rgba(0,0,0,0) 77%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}



.score_garglow_box {
    /*background-color: black;*/
    width: 835px; /* 900 */
    height: 65px;
    padding-top:5px;
    padding-left:35px;
    padding-right:30px;

    margin-left: 130px;
    background-image: url(../images/score_garglow_box.png);
    background-size: 100%;
    background-position-x: 0px;
    position:relative;
}

    .score_garglow_box > div {
    }

.c_box {
    position: absolute;
    width: 835px;
    height: 50px;
}

.score_garglow_c {
    position:absolute;
    left:60%;  /*퍼센트 조절 */
    width: 60px;
    height: 60px;
    background-image: url(../images/score_garglow_c.png);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index:30;
}

.garglow_c_none {
    display: none;
}


    .score_garglow_bar_box {
        position: absolute;
        left: 18px;
        top: 6px;
        width: 862px; /* + 40  862 902*/
        height: 50px;
    }

.score_garglow_bar {
    position: absolute;
    left:0;
    height: 50px;
    width:60%;  /* 퍼센트 조절 */
    background-image: url(../images/score_garglow_bar.png);
    background-position-y:-7px;
}

.score_garglow_bar_none {
    width: 0%;
}

.chapter_description {
    margin-left: 97px;
    margin-top: 40px;
    color: #757575;
    font-size: 16pt;
    line-height: 21pt;
    font-family: NanumSquare;
    font-weight: 100;
    width: 980px;
    height: 200px;
    /* 스크롤 */
    overflow: auto;
    /*ie*/
    scrollbar-3dlight-color: rgb(66,168,175);
    scrollbar-arrow-color: #1e1249; /*rgb(56,143,149);화살표 색상*/
    scrollbar-base-color: rgb(255,255,255); /*rgb(56,143,149);스크롤바 테두리. 배경 색상이 이상하게 먹음 */
    scrollbar-face-color: #1e1249; /*#388f95; 스크롤 바 색상*/
    scrollbar-track-color: #120634; /*rgb(66,168,175); 스크롤 전체 배경 색상*/
    scrollbar-darkshadow-color: rebeccapurple; /* 안나옴 */
    scrollbar-highlight-color: white; /*안나옴 */
    scrollbar-shadow-color: #1e1249; /* rgb(66,168,175)스크롤바 테두리*/
}
/*스크롤 크롬 오페라*/
    .chapter_description::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .chapter_description::-webkit-scrollbar-button:start:decrement
    .chapter_description::-webkit-scrollbar-button:end:increment {
        display: block;
        height: 10px;
        background: #efefef;
    }

    .chapter_description::-webkit-scrollbar-track {
        background: rgba(0,0,0,0); /*#efefef; rgba(66,168,175,1)*/
        /*-webkit-border-radius: 10px;
    -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.2);*/
    }

    .chapter_description::-webkit-scrollbar-thumb {
        height: 50px;
        width: 50px;
        background: rgba(255,255,255,0.1);
        -webkit-border-radius: 8px;
        border-radius: 8px;
        /*-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);*/
    }



.ws1_tt #op_contents1 hr {
    border:none;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin-top:60px;
    margin-left:95px;
    width:980px;
}

.l_and_t{
    margin-left:95px;
    height:80px;
}

.l_and_t p{
    display:block;
    float:left;
    height:80px;
    font-family:NanumSquare;
    font-weight:100;
    font-size:27pt;
    line-height:50pt;
    letter-spacing:-0.3px;
    cursor: pointer;
}

.l_lon{
    color:#808080;
}

.l_and_t .t_ton {
    color: #00A99D;
}


/****** ws2 Report card ******/

.report_date {
    float: right;
    color: #757575;
    margin-right: 5px;
}

.report_contents {
    float: left;
    margin-top: 20px;
    width: 100%;
    min-height: 300px;
    border-bottom: 1px #e8e7e7 solid;
}

    .report_contents > div {
        width: 100%;
        margin-bottom: 38px;
    }

    .report_contents > div:last-child{
        margin-bottom: 15px;
    }

    .report_contents span {
        color: black;
        font-family: NanumSquare;
        font-weight: 900;
        font-size: 17pt;
        letter-spacing: -0.5px;
        line-height: 25pt;
        margin-left: 5px;
    }

    .report_contents > div p {
        width: 97.6%;
        min-height: 20px;
        background-color: #f2f2f2;
        padding: 8px 12px;
        color: #757575;
        font-size: 13.5pt;
        font-weight: 100;
        line-height: 24pt;
    }

.report_nbt {
    float: right;
    width: 130px;
    text-align: center;
    /* border: 1px solid #e8e7e7; */
    box-sizing: border-box;
}

    .report_nbt, .report_nbt span {
        margin-top: 5px;
        color: #9a9a9a;
        font-size: 21pt;
        font-weight: 100;
        font-family: 맑은고딕, gothic;
        letter-spacing: -0.8px;
        line-height: 43px;
        height: 45px;
    }



    .report_nbt span {
        margin-top: 0;
        font-family: NanumBarunGothic;
        line-height: 30pt;
        letter-spacing: -4px;
        font-size: 24pt;
        margin-left: 8px;
    }

.report_nbt:hover{
    background-color:rgba(0,0,0,0.1);
}


/*******  ws 메인:  제너럴 로그인    ******/

.title_line_m {
    position: absolute;
    width: 100%;
    height: 230px;
    background-color: #00A99D;
}

.main_l_title {
    margin-top: 92px;
    width: 600px;
    height: 120px;
}


.main_l_guide_box { /* 글 박스 / 입력 */
    margin-top: 120px;
    float: left;
    width: 100%;
    /*background-color: rgba(0,0,0,0.1);*/
}


.main_l_guide { /* 안내 글 */
    float: left;
    width: 500px;
    height: 440px;
    /*background-color: rgba(0,0,0,0.1);*/
}


    .main_l_guide p, .main_l_guide span {
        color: #666666;
        font-family:NanumSquare;
        font-weight:100;
        font-size:14pt;
        margin:8px 0;
    }

        .main_l_guide span{
            display:block;
        }

    .main_l_guide p {
        margin-bottom:40px;
    }

        .main_l_guide p:first-child{
            margin-bottom:5px;
        }


    .main_l_guide hr {
        border: none;
        border-bottom: 1px solid gray;
        margin-bottom: 30px;
        width: 430px;
    }
    

.main_l_title > p{
}

.main_l_title > p:first-child {
    position:relative;
    }


.main_l_title span {
    color: #333333;
    font-family: '맑은 고딕','helvetica'; 
    font-size: 42pt;
    letter-spacing: -1.3px;
    font-weight: 900;
}

.main_l_title > p:first-child span {
}

    .main_l_title > p:last-child{
    }




.main_l_title > p:last-child span {    
    font-family: Source Sans Pro;
    font-size: 18pt;
    letter-spacing: -0.5px;
    font-weight: 100;
}

.t_ccc{
    position:absolute;
    left:-45px;
    top:30px;
    display:block;
    float:left;
    width:15px;
    height:15px;
    border:3px solid white;
    border-radius:50px;
    opacity:0.3;
}


/*오른쪽 나라/ 로그인 정보*/
.main_l_input {
    float: right;
    width: 480px;
    height: 440px;
    /*background-color: rgba(0,0,0,0.1);*/
    position: relative
}

/* 나라, 언어설정 */
#language_set {
    width: 380px;
    height: 370px;
    position: absolute;
    top: -190px;
    right: -30px;
    background-size: 100%;
}


.language_set_k {
    background-image: url(../images/korea_l.png);
}

.language_set_u {
    background-image: url(../images/us_l.png);
}


.input_set {
    width: 375px;
    height: 145px;
    margin-top: 295px;
    /*background-color: rgba(0,0,0,0.1);*/
    float: right;
}

    .input_set input {
        width: 350px;
        padding-left: 20px;
        height: 40px;
        border: 1px solid #666666;
        border-radius: 80px;
        margin-bottom: 11px;
        background-color: rgba(0,0,0,0);
    }


.main_l_bt { /* 로그인 버튼 */
    position: absolute;
    opacity: 0.7;
    right: -50px;
    bottom: -45px;
    /* float: right; */
    /* margin-top: 20px; */
    width: 200px;
    height: 55px;
    /* background-color: rgba(0,0,0,0.1); */
    text-align: right;
    background-image: url(../images/login.png);
    background-size: 100% auto;
}

.main_l_bt, .main_l_bt span{
    font-size:30pt;
    font-weight:100;
    letter-spacing:-2px;
    color:#333;
}

    .main_l_bt span {
        font-family: NanumBarunGothic;
        line-height: 30pt;
        letter-spacing: -4px;
        font-size: 37pt;
        margin-left: 8px;
        font-weight:100;
        
    }


    .main_l_bt:active {
        bottom: -47px;
    }

    /*********  ws 어드민 로그인 *************/

    .ws_admin_bg {

    }

        .ws_admin_bg .title_line_m {
            background-color: #58b7de;
        }

        .ws_admin_bg .main_l_guide p {
            margin-bottom: 20px;
        }

        .ws_admin_bg .main_l_guide p:first-child {
            margin-bottom: 5px;
        }



/********* ws 메인페이지 **********/

.m_title {
    width: 100%;
    height: 450px;
    /*background-color:rgba(155,0,0,0.2);*/
    position: relative;
}

    .m_title div:first-child {
        position:absolute;
        width: 226px;
        height: 224px;
        background-image: url(../images/main2_sq.png);
        opacity:0.4;
        top:20%;
    }

    .m_title div:nth-child(2) {
        position: absolute;
        top: 45%;        
        left: 7%;
    }

    .m_title div:nth-child(2) span{
        color:white;
        font-weight:600;
        font-size:60pt;
        letter-spacing:-2.5pt;
    }
        .m_title div:nth-child(2) span:last-child {
            font-size:15pt;
            font-weight:300;
            letter-spacing:-2px;
            margin-left:10px;
        }

    .m_title p {
        position: absolute;
        color: #808080;
        font-size:28pt;
        line-height:32pt;
        font-weight: 600;
        letter-spacing: -2pt;
        top: 71%;
        left:7.5%;
    }

.login_bt {
    position:absolute;
    bottom:17%;
    left:2%;
    width:99%;
    height:100px;
}

    .login_bt a {
        float: left;
        width: 49%;
        height: 100%;
        margin-right: 2%;
        background-color: rgba(37,36,43,0.7);
        color: #869091;
        text-align:center;
        line-height:100px;
        font-size:23pt;
        font-weight:100;
        font-family:NanumGothicLight;
    }

        .login_bt a:hover {
            background-color: rgba(45,47,50,0.7); /*rgba(37,36,43,1);*/
            border: 1px solid rgba(45,47,50,1);
            box-sizing: border-box;
        }

        .login_bt a:active {
            background-color: rgba(77,77,77,0.5);
            border: 1px solid rgba(75,75,75,0.6);
            box-sizing: border-box;
        }

    .login_bt a:last-child{
        margin:0;
    }


    /*********  WS 어드민 선원 관리 페이지 ********/
.admin_bt {
    float: left;
    width: 114px; /* 57+ 57*/
    height: 55px;
    background-color: lightgray;
    position: inherit;
    /*background-image: url(../images/print.png);*/
    box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.2);
}
.admin_bt div{
    float:left;
    width:57px;
    height:55px;
    background-size:100% 100%;
    
}

    .admin_bt div:first-child {
        background-image: url(../images/pencil.png);
        background-color: #367dad; /*#4279bd; 6f9ec6 367dad*/
    }
    .admin_bt div:last-child {
        background-image: url(../images/delete.png);
        background-color: #c65d7e; /* #d84e6c c65d7e  b5617f*/
    }



    .admin_bt div:first-child:hover {
        background-color: #1f68a3; /*#4279bd 원래색; 6293bc 채도뺀색  367dad 톤다운한색  1f68a3*/
    }

    .admin_bt div:first-child:active {
        background-color: #18578a; /*#4279bd 원래색; 6293bc 채도뺀색  367dad 톤다운한색  1f68a3*/
    }

    .admin_bt div:last-child:hover {
        background-color: #b23260; /* #d84e6c c65d7e  cc4a6c   cc3766    ad3158*/
    }
    .admin_bt div:last-child:active {
        background-color: #892144; /* #d84e6c c65d7e  cc4a6c  c12f56*/
    }

.add_staff {
    position: fixed;
    background-image: url(../images/add_people_on.png);
    background-size: contain;
    bottom: 8%;
    right: 4%;
    width: 242px; /*121 */
    height: 110.2px; /*54.6*/
}

.add_staff:active{
    background-position-y:3px;
}



.pop {
    position: fixed;
    top: 0%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(25%);
    transform: translateX(-50%) translateY(25%);


    box-shadow: 5px 5px 18px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 5px 5px 18px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 5px 5px 18px 5px rgba(0,0,0,0.2);
}

.shipstaff {
    top: 17.5%;
    z-index: 10;
    width: 720px;
    height: 437px;
    /*background-color: antiquewhite;*/
    background-image: url(../images/shipstaff.png);
    background-size: 100% 100%;
    display: none;
}

.br{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:110%;
    background-color:black;
    opacity:0.2;
    z-index:5;
    display:none;
}


.sur_name {
    margin-top: 150px;
    /*145 */
    /* color: #8c788a; */
}

.sur_name span {
    letter-spacing: -1.2px;
}

.sur_name input{

}

.first_name{
    margin-top:15px;
    /*21 */
}

.first_name span {
    letter-spacing: -1.5px;
}

.first_name span{

}

.p_name {
	height:21px;
    background-color:rgba(111,11,154,0);
    padding: 0 80px;
    padding-right:70px;
	float:left;
}

.p_name span {
    color: #8c788a;
    opacity:0.8;
}
.p_name input {
    float: right;
    width: 460px;
    border: none;
    color: #808080;
    text-align:center;
    background-color:rgba(255,255,255,0);
}

.p_gr {
    display: none;
    color: rgba(77,143,166,1); /*#203451;*/
    opacity: 0.8;
    font-size: 8pt;
    margin-right: 65px;
    margin-left: 83px;
    letter-spacing: -0.8px;
    text-align: right;
    float:right;
}

.p_gr2 {
    color:rgba(77,143,166,1); /*#203451;*/ 
    margin-top: 7px;
    opacity:0.8;
    font-size:9pt;
    letter-spacing:-0.5px;
}

.gr_on {
    display: block;
}

.p_rank {
    width:250px; /*570*/
    color: rgba(140,120,138,0.8);
    float: left;
    margin-top: 20px; /*31*/
    margin-left: 80px;
    margin-right:390px; /*400*/
    letter-spacing: -1.4px;
    text-align:left;
}

.p_vsltype {
	color: rgba(140,120,138,0.8);
    float: left;
    margin-top: 31px;
    width: 250px; /*570*/
}

.p_bt {
    width: 21px;
    height: 20px;
    float: right;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
}

.p_bt_box {
    float: right;
    width: 125px;
    height: 20px;
    background-color: rgba(0,0,0,0);
    /*position: relative;*/
    overflow: hidden;
}

.bt_r { /* > */
    background-image: url(../images/b_arrow_r.png);
    background-size:60%;
    background-position-y:5px;
}

.bt_l { /*  < */
    position: relative;
    overflow: hidden;
}

.bt_l:before { /*  <   백그라운드 이미지 회전*/
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url(../images/b_arrow_r.png);
    background-size: 60%;
    background-position-y: 5px;
    background-repeat: no-repeat;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.p_bt_box > span {
    display: block;
    width: 125px;
    height: 20px;
    text-align: center;
    color: #808080;
    font-size: 10.5pt;
    /*position:absolute;*/
}

.p_bt_rankbox{
    position:relative;
}

.p_bt_typebox{
    position:relative;
}

.p_bt_box > ul { /*.rankbox  nationalbox*/
    display: block;
    float: left;
    width: 2375px; /*2500*/
    height: 20px;
    position: absolute;
}


.p_bt_box li {
    float: left;
    display: block;
    width: 125px;
    height: 20px;
    text-align: center;
    color: #808080;
    font-size: 10.5pt;
}


/*
    .p_bt_box > span:nth-child(1) {        left:0;    }
    .p_bt_box > span:nth-child(2) {        left: 125px;    }
    .p_bt_box > span:nth-child(3) {        left: 250px;    }
    .p_bt_box > span:nth-child(4) {        left: 375px;    }
    .p_bt_box > span:nth-child(5) {        left: 500px;    }
    .p_bt_box > span:nth-child(6) {        left: 625px;    }
    .p_bt_box > span:nth-child(7) {        left: 750px;    }
    .p_bt_box > span:nth-child(8) {        left: 875px;    }
    .p_bt_box > span:nth-child(9) {        left: 1000px;    }
    .p_bt_box > span:nth-child(10) {        left: 125px;    }
    .p_bt_box > span:nth-child(11) {        left: 1250px;    }
    .p_bt_box > span:nth-child(12) {        left: 1500px;    }
    .p_bt_box > span:nth-child(13) {        left: 1625px;    }
    .p_bt_box > span:nth-child(14) {        left: 1750px;    }
    .p_bt_box > span:nth-child(15) {        left: 1875px;    }
    .p_bt_box > span:nth-child(16) {        left: 2000px;    }
    .p_bt_box > span:nth-child(17) {        left: 2125px;    }
    .p_bt_box > span:nth-child(18) {        left: 2250px;    }
    .p_bt_box > span:nth-child(19) {        left: 2375px;    }
    .p_bt_box > span:nth-child(20) {        left: 2500px;    }
    */


.p_na_bi_box {
    width: 720px;
    height: 37px; /*46*/
    float: left;
}


.p_national {
    width: 250px; /*570*/
    color: rgba(140,120,138,0.8);
    float: left;
    margin-top: 15px; /*25*/
    margin-left: 80px;
    margin-right: 75px;
    letter-spacing: -1.4px;
    text-align: left;
}

.p_bt_nationalbox{
    position:relative;
}

.nationalbox {
    width: 1875px;
}


.p_birth {
    float: left;
    margin-top: 15px; /*23*/
    width: 250px; /*570*/
}

.p_birth span {
    color: #8c788a;
    opacity: 0.8;
}

.p_birth input {
    float: right;
    width: 180px;
    border: none;
    color: #808080;
    text-align: center;
    background-color: rgba(255,255,255,0);
}

/*** 20190327 추가 */
.staffs_id {
    float: left;
    margin-top: 15px;
    width: 250px;
}

.staffs_id span {
    color: #8c788a;
    opacity: 0.8;
    letter-spacing: -1.2px;
    float:left;
    margin-right:10px;
}
.staffs_id input[type="text"] {
    float: left;
    width: 160px;
    border: none;
    color: #808080;
    text-align: center;
    margin-right:4px;
    background-color: rgba(255,255,255,0);

}

.staffs_id button[type="button"] {
    float: left;
    width: 55px;
    height: 19px;
    margin-top: 0px;
    background-color: rgba(144,191,209,0.7);
    border: 1px solid rgba(255,255,255,0.4);
    color: #076474;
    font-size: 12px;
    letter-spacing: -0.9px;
}

.staffs_id button[type="button"]:hover {
    border: 1px solid #8c788a;
    background-color: rgba(144,191,209,0);
    color: rgba(255,255,255,0.9);
}
.staffs_id button[type="button"]:focus {
    border: 1px solid #8c788a;
    background-color: rgba(144,191,209,0.2);
    margin-top:2px;
}

.p_vtype_bi_box {
    width: 720px;
    height: 37px;
    float: left;
}

.p_vtype {
    width: 250px;
    color: rgba(140,120,138,0.8);
    float: left;
    margin-top: 15px;
    margin-left: 80px;
    margin-right: 75px;
    letter-spacing: -1.4px;
    text-align: left;
}

.p_bt_vtypebox{
    position:relative;
}

.p_birth input[type="text"]::-webkit-input-placeholder {
    color: #b3b3b3;
}

.p_birth input[type="text"]::-moz-placeholder {
    color: #b3b3b3;
}

.p_birth input[type="text"]:-ms-input-placeholder {
    color: #b3b3b3;
} 
/*****************/

.p_bt_bottom {
    width: 100px;
    height: 35px;
    background-color: rgba(0,0,0,0);
    margin-top: 35px; /*50*/
    background-size: contain;
    padding: 0 20px;
    cursor: pointer;
}

.p_yes {
    float: right;
    background-image: url(../images/completion_of_training_yes.png);
    background-position-x: 13px;
}

.p_no {
    float: left;
    background-image: url(../images/completion_of_training_no.png);
    background-position-x: 40px;
}

.p_bt_bottom:active {
    background-position-y:3px;
}


/**  기본 팝업**/

.base_popup {
    min-width: 476px; /*988*/
    min-height: 120px; /*596   284*/
    background-color: #f7f7f7;
    border: #b3b3b3 solid 1px;
    box-sizing: border-box;
    position: fixed;
    top: 30%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 20;
    box-shadow: 8px 3px 25px 5px rgba(0,0,0,0.15);
    -webkit-box-shadow: 8px 3px 25px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 85px 3px 25px 5px rgba(0,0,0,0.15);
    
    display:none;
}

.corner_box{
    width:100%;
    height:21px;
}

.corner_box > div{
    width:15px;
    height:15px;
    padding:3px;
}

.corner_box > div:first-child {
    float:left;
}

.corner_box > div:last-child {
    float: right;
}

.corner_box > div > span {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    margin: 1px;
    background-color: #e8e8e8;
}

.corner_box > div:first-child > span {
    float:left;
}

.corner_box > div:last-child > span {
    float: right;
}

.corner_box2{

}

.corner_box2 > div:first-child > span:first-child {
    margin-right: 5px;
}
.corner_box2 > div:last-child > span:first-child {
    margin-left: 5px;
}

.textbox {
    padding: 0 40px;
}

.base_pop_title {
    font-size: 23pt;
    color: #635f5e;
    text-align: center;
    font-family: nanumsquarer;
    font-weight:600;
    padding:35px 0;
    letter-spacing:-2px;
}

.base_pop_subtext {
    background-color: #f2f2f2;
    color: #aaaaaa;
    font-size: 10.5pt;
    letter-spacing: -2px;
    padding:20px 12px;
    line-height:14.3pt;
}

.base_pop_an{
    width:100%;
    height:40px;
    margin-top:20px;
}

.base_pop_an > div {
    background-size: contain;
    width:90px;
    height:30px;
}

.base_pop_an > div:first-child {
    float: left;
    margin-left: 30px;
    background-image: url(../images/completion_of_training_no.png);
}

.base_pop_an > div:first-child:active {
    background-position-y: 3px;
}

.base_pop_an > div:last-child {
    float: right;
    margin-right: 30px;
    background-image: url(../images/completion_of_training_yes.png);
}

.base_pop_an > div:last-child:active {
    background-position-y: 3px;
}

/***** help desk*/

#help_desk {
    position: absolute;
    z-index: 80;
    width: 278px; /*142 // -6*/
    height: 380px; /*193 //-6*/
    background-color: white;
    border: solid 1px #cecece;
    padding: 0 6px;
    right: 10px;
    top: 75px;
    /*그림자 */
    box-shadow: 7px 3px 19px 5px rgba(0,0,0,0.3); /*css #6D6D6D*/
    -webkit-box-shadow: 7px 3px 19px 5px rgba(0,0,0,0.3); /*Safari and Chrome */
    -moz-box-shadow: 7px 3px 19px 5px rgba(0,0,0,0.3); /* Firefox 1px 1px 15px 5px rgba(0,0,0,0.2);*/
    display:none;
}

#help_desk > p {
    font-family: NanumGothic;
    font-weight: 500;
    color: #828486;
    font-size: 17pt;
    text-align: center;
    letter-spacing: -1.2px;
    margin-top: 18px;
    margin-bottom: 48px;
    float: left;
    width: 100%;
}

.help_x {
    float: right;
    width: 30px;
    height: 30px;
    background-image: url(../images/x.png);
    background-size: 90%;
    background-position-x: 12px;
    background-position-y: 2px;
    cursor: pointer;
}

.call {
    height: 109px;
    float: left;
    background-color: rgba(160,193,229,0.25);
    border-radius: 10px;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 13px;
    background-image: url(../images/ww.png);
    background-position-y: bottom;
    background-position-x: 152px;
}

.call > div {
    float: left;
    width: 132px;
    margin-top: 23px;
}

.call > div > a, .call > div > div {
    color: white;
    width: 144px; /*132*/
    height: 22px;
    background-color: #a0c1e5;
    text-align: center;
    float: left;
    margin-bottom: 2px;
    font-family: NanumGothic;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 22px;
    cursor: pointer;
}

.call > div > div{
    font-size:9pt;
}

.call > div > a {
    font-size: 7pt;
    letter-spacing: 0;
}

.guide_w{
   float:left;
   width:100%;
}

.guide_w > div {
    height: 67px;
    border-top: 1px solid #e3e4e5;
    width: 100%;
}

.guide_w > div:nth-child(2) {
    /*border-bottom: 1px solid pink;*/
}

.guide_w div{
    float:left;
}

.h_down {
    width: 50px;
    height: 50px;
    background-color: rgba(160,193,229,0.1);
    border-radius: 50px;
    margin: 10px;
    background-image: url(../images/h_down.png);
    background-position: center;
}

.guide_w > div:hover .h_down { /*visited  active*/
    background-color: rgba(160,193,229,0);
    border: solid 1px rgba(160,193,229,1);
    box-sizing: border-box;
}

.guide_w a {
    float: left;
    width: 200px;
    /* background-color: pink; */
    height: 52px;
    margin-top: 16px;
    font-size: 11.5pt;
    line-height: 13pt;
    color: #8aa6c5;
    font-family: NanumGothic;
    font-weight: 500;
    letter-spacing: -1px;
}