@font-face {
    font-family: 'gsl';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gsm';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gsb';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset */
* { margin: 0; padding:0; }
li { list-style:none; }
a { text-decoration: none !important; }
img { vertical-align: top; }

/* common */
html, body { height:100%; }
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
body { background: #003a8f; }
.wrap { width:1000px; margin:0 auto; position: relative; }
.wrap:after, ul:after, .cl:after { content:""; clear:both; display: block; }

.wrap2 { width:1400px; margin:0 auto; position: relative; }
.wrap2:after, ul:after, .cl:after { content:""; clear:both; display: block; }


.blind { width:0; height:0; font-size:0; overflow: hidden; }
.fl { display: flex; align-items: center; justify-content: center; flex-direction: column;}
.dn { display:none !important; }
.arr:after { content:""; width:10px; height:10px; display:inline-block; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); margin-left:4px; }

/* header & footer */
#w_header { height:69px; border-bottom:1px solid rgba(255,255,255,0.7); position: fixed; left:0; top:0; z-index:99; width:100%;  background: #003a8f; }
#w_header h1 { padding-top: 17px; text-align: center; position: relative; z-index: 1;}
#nav_btn { position:fixed; left:70px; top:16px; z-index:200; }
#nav_btn .line{  width: 30px; height: 2px; background-color: #fff; display: block; margin: 8px auto; transition: all 0.3s ease-in-out;}
#nav_btn:hover{ cursor: pointer;}
#nav_btn.act .line:nth-child(2){ opacity: 0;}
#nav_btn.act .line:nth-child(1){ transform: translateY(10px) rotate(45deg);}
#nav_btn.act .line:nth-child(3){ transform: translateY(-10px) rotate(-45deg);}   
#hd_sch { border-radius: 0; position: absolute; right:230px; top:20px;  }
#hd_sch #sch_stx { background: none; border:1px solid #fff; border-right:none; border-radius: 0; color:#fff; width: 130px; height: 30px;  }
#hd_sch #sch_submit { background:none; border:1px solid #fff; height:30px; width: 30px; border-radius: 0; }
#hd_sch #sch_submit i { position: relative; top:-2px; }
.snb { position: absolute; right:70px; top:25px; }
.snb li { float:left; }
.snb li:after { content:""; height:12px; display: inline-block; border-left:1px solid #fff; margin:0 8px; position: relative; top:2px;}
.snb li:last-child:after { display:none; }
.snb li a { color:#fff; font:12px ntl; }
.snb li a.adm { font-family: ntm;}
.snb.left { left:125px; top:23px; }
.snb.left a { font-weight: 600; font-size:15px; }

#gbox { border-right:1px solid rgba(255,255,255,0.7); position: fixed; left:-390px; top:0; height: 100%; width: 380px; padding:69px 0 0; box-sizing: border-box; transition:0.3s; opacity: 0; z-index:100; }
#gbox.on { left:0; opacity: 1; }
#gbox #w_gnb { padding-top:30px; padding-left: 70px; background: #003a8f; height:100%; } 
#gbox #w_gnb > li { padding:8px 0; }
#gbox #w_gnb > li > a { font:16px gsm; color:#fff; text-transform: uppercase; }
#gbox #w_gnb > li.select > a { border-bottom:1px solid #fff; padding-bottom:4px; }
#gbox #w_gnb ul { font:14px/28px gsl; color:#fff; margin-top: 10px; padding-left:14px; display: none;  }
#gbox #w_gnb > li.select ul { display: block; }
#gbox #w_gnb ul a { color:inherit; }
#gbox #w_gnb ul li { position: relative; }
#gbox #w_gnb ul li.select a { font-family: gsm; font-weight: 600;  }
#gbox #w_gnb ul li.select:before { content:">"; position: absolute; left:-14px; top:0; }

#w_footer { height:120px; border-top:1px solid rgba(255,255,255,0.7); box-sizing: border-box; font:600 16px gsm; color:#fff; }

/* index */
#main { height:calc(100% - 120px); padding-top:70px; box-sizing: border-box; }
#main ul { width:900px; height:500px; }
#main ul li { float:left; width:300px; height:250px; display:flex; align-items: center; justify-content: center; color:#fff; text-align: center; }
#main ul li figure { height: 100px; }
#main ul li span { color:#fff; font:600 18px/1.4 gsm; text-transform: uppercase; }

/* sub1 */
.title { font:600 16px gsm; }
.bcate { margin-bottom: 30px; }
.bcate li { float:left; margin-right: 40px; font:600 16px/1.8 gsm;}
.bcate li:last-child { margin-right: 0; }
.bcate li a { color:#fff; opacity: 0.4; text-transform: uppercase;}
.bcate li.select a { opacity: 1;}
.pad { padding-top:160px; padding-bottom: 150px; }
#sub1 { color:#fff; }



/* 베젤 상단부분 (공통) */
#sub1 .cont1 { margin-bottom: 50px; }
#sub1 .cont1 .top { margin-bottom: 30px; }
#sub1 .cont1 .top .title { float:left; margin-right: 20px; }
#sub1 .cont1 .top #sbox { border:1px solid #fff; float:left; font:14px gsm; position: relative; top:-6px; color:#fff; height: 30px; outline: none; background:#003a8f url("/wins/images/arr.png") no-repeat 95% 50%; -webkit-appearance:none; cursor: pointer; -moz-appearance:none; appearance:none; padding:0 38px 0 8px; }
#sub1 .cont1 .top .add { position: absolute; right:0; top:-5px;  }
#sub1 .cont1 .top .add a { display: flex; justify-content: center; align-items: center; font:14px gsm; color:#fff; }
#sub1 .cont1 .top .add i { margin-left: 10px; font-style:normal; border:1px solid #ddd; width: 30px; height: 30px; font:30px nsl; cursor: pointer;}


/* 회원 로그인 (sub1.php) */
#w_login { width: 300px; padding:50px 40px 40px; box-sizing: border-box;}
#w_login input { border:none; width: 100%; height: 50px; padding:10px; color:#003a8f; font:14px gsm; }
#w_login input::placeholder { color:#003a8f; }
#w_login .id { margin-bottom: 20px; }
#w_login .login { margin-top: 40px; background:#ccc; height:40px; background:none; border:1px solid #fff; color:#fff; outline:none; }


/* Click to add a Vessel (sub1_0.php) */
#plus_ship { height: 500px; }
#plus_ship a { color:#fff; font:24px nsb; text-align: center; }
#plus_ship a i { font-style:normal; border:1px solid #ddd; width: 30px; height: 30px; font:30px nsl; margin:30px auto 0; }
#plus_ship .lms { font:24px gsl; margin-bottom: 50px; }
#plus_ship #w_login + div { font:13px/1.8 nsr; text-align: center; }


/* plaese enter the vessel name (sub1_1.php) */
#ship_name { background: #fff; width:500px; height:300px; flex-direction: column; }
#ship_name input[type=text] { width:300px; height:40px; border:none; border-bottom:2px solid #003a8f; color:#003a8f; text-align: center; font:16px nsb; margin-bottom: 40px; outline:none; }
#ship_name input[type=text]::placeholder { color:#003a8f; }
#ship_name div input { width:120px; height:40px; border:none; border-radius: 0; background: #ccc; color:#fff; margin:0 5px; font:16px nsr; }
#ship_name div input[type=submit] { background: #003a8f;}
#ship_name div input[type=button] { background: #003a8f;}


/* Upload your vessel image (sub1_2.php) */
#upload_ship { padding:40px 60px; background: #fff; flex-direction: column; text-align: center; color:#003a8f;}
#upload_ship h2 { margin-bottom: 40px;  }
#upload_ship input[type="file"] { }
#upload_ship .cl { margin-top: 40px; }
#upload_ship .cl input { width:120px; height:40px; border:none; border-radius: 0; background: #ccc; color:#fff; margin:0 5px; font:16px nsr; outline:none; cursor: pointer; }
#upload_ship .cl input[type=submit] { background: #003a8f;}
#upload_ship .cl input[type=button] { background: #003a8f;}


/* 베젤 컨디션 목록  sub1_3 */
#sub1 .cont1 .ship { position: relative; }
.type { position: absolute; top:5px; left:130px; z-index:8; }
.type li { float:left; color:#003a8f; font:14px gsm; margin-right: 30px;  }
.type li:before { content:""; width:12px; height:12px; position: relative; top:2px; display: inline-block; background: #a2a2a2; margin-right: 6px; }
.type li:nth-child(1):before { background: #1fce18; }
.type li:nth-child(2):before { background: #ffb100; }
.type li:nth-child(3):before { background: #ff2b2b; }

/* manual */
.manual { position: absolute; color:#003a8f; z-index:9; font:16px/30px gsm; }
.manual span { font-style:normal; border:1px solid #003a8f; width: 30px; height: 30px; display: inline-block; text-align: center; margin-right: 10px; }
#manual { padding:40px; background: #fff; border:1px solid #003a8f; color:#003a8f; position: absolute; z-index:9; overflow: auto; display: none; font:14px/1.4 gsm;}
#manual.on { display: block; }
#manual h2 { margin-bottom: 40px; }
#manual li { margin-bottom: 20px; }
#manual .mclose { font-style:normal; border:1px solid #003a8f; width: 30px; height: 30px; text-align: center; position: absolute; right:40px; top:38px; display:flex; align-items: center; justify-content: center; margin-right: 0; color:#003a8f; }


/* dot position */
#dotposition { overflow: auto; cursor: move; background: #fff; }
.zoomHolder { height: 500px !important; }
.marker { width:6px; height:6px; cursor:pointer; border-radius: 100%; background: #eee; }
.dot.marker { width:20px; height:20px; background: #000; color:#fff; position: relative; left:-7px !important; top:-7px !important; font:10px gsm; display: flex; align-items: center; justify-content: center; }
.dot.marker.grn { background: #1fce18; }
.dot.marker.org { background: #ffb100; }
.dot.marker.red { background: #ff2b2b; }
.dot.marker.gray { background:#a2a2a2; }
.controlHolder { z-index:20 !important; }

.reg { border:1px solid #003a8f; padding:20px; background: rgba(255,255,255,0.95); position: absolute; right:40px; top:100px; width:400px; box-sizing: border-box;  z-index: 9999991; color:#003a8f; display: none;}
.reg.on { display: block; }
.reg h2, .reg h3 { font:normal 18px/30px gsb;  margin-bottom: 10px; }
.reg p {font:normal 16px/1.4 gsm; margin-bottom: 40px; }
.reg .cl input { width:49%; margin-right: 2%; height:40px; float:left; color:#fff; font:600 11px gsm; border:none; outline:none; background: #003a8f;}
.reg .cl input:last-child {margin-right: 0; background: #aaa;}


.reg p { font:normal 18px/30px gsb; color:#003a8f; border-bottom:1px solid #003a8f; margin-bottom: 10px; }
.reg div { margin-bottom: 10px; }
.reg div:after { content:""; clear:both; display: block; }
.reg strong {float:left;  display: inline-block; width:140px; color:#003a8f; font:16px ntb;}
.reg strong span{font:normal 10px/14px gsb; padding-left:2px;}
.reg span{font:normal 10px/14px gsb; padding-left:10px;}
.reg select, .reg input[type=text], .reg input[type=date] { border:1px solid #003a8f; border-radius: 0; color:#003a8f; font:14px/1.6 ntr; padding:0 4px; width:calc(100% - 150px); float:left; } 
.reg textarea { border:1px solid #003a8f; width:100%; height:100px; outline: none; margin-bottom: 8px; font:14px ntr; color:#003a8f; margin-top:6px; padding:10px; }
.reg textarea::placeholder { color:#003a8f; }
.reg input[type="file"] { margin-bottom: 14px; border:1px solid #ddd; width:100%; margin-top: 8px; }
.reg div.cl input { width:23.5%; height:40px; float:left; margin-right: 2%; color:#fff; font:600 11px gsm; border:none; }

.reg2 { border:1px solid #003a8f; padding:20px; background: rgba(255,255,255,0.95); position: absolute; left:40px; top:200px; width:400px; box-sizing: border-box;  z-index: 9999991; color:#003a8f; display: none;}
.reg2.on { display: block; }
.reg2 h2, .reg2 h3 { font:normal 18px/30px gsb;  margin-bottom: 10px; }
.reg2 p {font:normal 16px/1.4 gsm; margin-bottom: 40px; }
.reg2 .cl input { width:49%; margin-right: 2%; height:40px; float:left; color:#fff; font:600 11px gsm; border:none; outline:none; background: #003a8f;}
.reg2 .cl input:last-child {margin-right: 0; background: #aaa;}
.reg2 table{width:100%;    border-spacing: 0px;border:0px;}
.reg2 table tr th  {text-align:center; border-bottom:1px solid #003a8f;padding-bottom:2px;}
.reg2 table tr td {text-align:center; border-bottom:1px solid #003a8f;padding-bottom:2px;}

.reg2 p { font:normal 18px/30px gsb; color:#003a8f; border-bottom:1px solid #003a8f; margin-bottom: 10px; }
.reg2 div { margin-bottom: 10px; }
.reg2 div:after { content:""; clear:both; display: block; }
.reg2 strong {float:left;  display: inline-block; width:140px; color:#003a8f; font:16px ntb;}
.reg2 strong span{font:normal 10px/14px gsb; padding-left:2px;}
.reg2 span{font:normal 10px/14px gsb; padding-left:10px;}
.reg2 select, .reg2 input[type=text], .reg2 input[type=date] { border:1px solid #003a8f; border-radius: 0; color:#003a8f; font:14px/1.6 ntr; padding:0 4px; width:calc(100% - 150px); float:left; } 
.reg2 textarea { border:1px solid #003a8f; width:100%; height:100px; outline: none; margin-bottom: 8px; font:14px ntr; color:#003a8f; margin-top:6px; padding:10px; }
.reg2 textarea::placeholder { color:#003a8f; }
.reg2 input[type="file"] { margin-bottom: 14px; border:1px solid #ddd; width:100%; margin-top: 8px; }
.reg2 div.cl input { width:23.5%; height:40px; float:left; margin-right: 2%; color:#fff; font:600 11px gsm; border:none; }

/* write */
.w_write3 { border:1px solid #003a8f; padding:20px; background: rgba(255,255,255,0.95); position: absolute; right:40px; top:10px; width:400px; box-sizing: border-box; display: none; z-index: 9999991; }
.w_write3.view { display: block; }
.w_write3 p { font:normal 18px/30px gsb; color:#003a8f; border-bottom:1px solid #003a8f; margin-bottom: 10px; }
.w_write3 div { margin-bottom: 10px; }
.w_write3 div:after { content:""; clear:both; display: block; }
.w_write3 strong { display: inline-block; width:140px; color:#003a8f; font:16px ntb;}

.w_write3 select, .w_write3 input[type=text], .w_write3 input[type=date] { border:1px solid #003a8f; border-radius: 0; color:#003a8f; font:14px/1.6 ntr; padding:0 4px; width:calc(100% - 150px); float:right; } 
.w_write3 textarea { border:1px solid #003a8f; width:100%; height:100px; outline: none; margin-bottom: 8px; font:14px ntr; color:#003a8f; margin-top:6px; padding:10px; }
.w_write3 textarea::placeholder { color:#003a8f; }
.w_write3 input[type="file"] { margin-bottom: 14px; border:1px solid #ddd; width:100%; margin-top: 8px; }
.w_write3 div.cl input { width:23.5%; height:40px; float:left; margin-right: 2%; color:#fff; font:600 11px gsm; border:none; }
.w_write3 .w_save { background: #003a8f; }
.w_write3 .w_edit { background: #aaa; }
.w_write3 .w_del { background: #ff2b2b; }
.w_write3 .w_cancel { margin-right: 0 !important; background: #000; }
.w_write3 .w_edit9 { background: #aaa; }
.w_write3 .w_cancel9 { margin-right: 0 !important; background: #000; }
.w_write3 .w_del9 { background: #ff2b2b; }

.w_write3 .w_save2 { background: #003a8f; }
.w_write3 .w_edit2 { background: #aaa; }


/* write */
.w_write { border:1px solid #003a8f; padding:20px; background: rgba(255,255,255,0.95); position: absolute; right:40px; top:10px; width:400px; box-sizing: border-box; display: none; z-index: 9999991; }
.w_write.view { display: block; }
.w_write p { font:normal 18px/30px gsb; color:#003a8f; border-bottom:1px solid #003a8f; margin-bottom: 10px; }
.w_write div { margin-bottom: 10px; }
.w_write div:after { content:""; clear:both; display: block; }
.w_write strong { display: inline-block; width:140px; color:#003a8f; font:16px ntb;}

.w_write select, .w_write input[type=text], .w_write input[type=date] { border:1px solid #003a8f; border-radius: 0; color:#003a8f; font:14px/1.6 ntr; padding:0 4px; width:calc(100% - 150px); float:right; } 
.w_write textarea { border:1px solid #003a8f; width:100%; height:100px; outline: none; margin-bottom: 8px; font:14px ntr; color:#003a8f; margin-top:6px; padding:10px; }
.w_write textarea::placeholder { color:#003a8f; }
.w_write input[type="file"] { margin-bottom: 14px; border:1px solid #ddd; width:100%; margin-top: 8px; }
.w_write div.cl input { width:23.5%; height:40px; float:left; margin-right: 2%; color:#fff; font:600 11px gsm; border:none; }
.w_write .w_save { background: #003a8f; }
.w_write .w_edit { background: #aaa; }
.w_write .w_del { background: #ff2b2b; }
.w_write .w_cancel { margin-right: 0 !important; background: #000; }
.w_write .w_edit9 { background: #aaa; }
.w_write .w_cancel9 { margin-right: 0 !important; background: #000; }
.w_write .w_del9 { background: #ff2b2b; }

.w_write .w_save2 { background: #003a8f; }
.w_write .w_edit2 { background: #aaa; }

/* write */
.w_write7 { border:1px solid #003a8f; padding:20px; background: rgba(255,255,255,0.95); position: absolute; right:40px; top:10px; width:400px; box-sizing: border-box; display: none; z-index: 9999991; }
.w_write7.view { display: block; }
.w_write7 p { font:normal 18px/30px gsb; color:#003a8f; border-bottom:1px solid #003a8f; margin-bottom: 10px; }
.w_write7 div { margin-bottom: 10px; }
.w_write7 div:after { content:""; clear:both; display: block; }
.w_write7 strong { display: inline-block; width:140px; color:#003a8f; font:16px ntb;}

.w_write7 select, .w_write7 input[type=text], .w_write7 input[type=date] { border:1px solid #003a8f; border-radius: 0; color:#003a8f; font:14px/1.6 ntr; padding:0 4px; width:calc(100% - 150px); float:right; } 
.w_write7 textarea { border:1px solid #003a8f; width:100%; height:100px; outline: none; margin-bottom: 8px; font:14px ntr; color:#003a8f; margin-top:6px; padding:10px; }
.w_write7 textarea::placeholder { color:#003a8f; }
.w_write7 input[type="file"] { margin-bottom: 14px; border:1px solid #ddd; width:100%; margin-top: 8px; }
.w_write7 div.cl input { width:23.5%; height:40px; float:left; margin-right: 2%; color:#fff; font:600 11px gsm; border:none; }
.w_write7 .w_save { background: #003a8f; }
.w_write7 .w_save9 { background: #003a8f; }
.w_write7 .w_edit { background: #aaa; }
.w_write7 .w_del { background: #ff2b2b; }
.w_write7 .w_cancel { margin-right: 0 !important; background: #000; }
.w_write7 .w_edit9 { background: #aaa; }
.w_write7 .w_cancel9 { margin-right: 0 !important; background: #000; }
.w_write7 .w_del9 { background: #ff2b2b; }

.w_write7 .w_save2 { background: #003a8f; }
.w_write7 .w_edit2 { background: #aaa; }


/* write */
.w_write9 { border:1px solid #003a8f; padding:20px; background: rgba(255,255,255,0.95); position: absolute; right:40px; top:10px; width:400px; box-sizing: border-box; display: none; z-index: 9999991; }
.w_write9.view { display: block; }
.w_write9 p { font:normal 18px/30px gsb; color:#003a8f; border-bottom:1px solid #003a8f; margin-bottom: 10px; }
.w_write9 div { margin-bottom: 10px; }
.w_write9 div:after { content:""; clear:both; display: block; }
.w_write9 strong { display: inline-block; width:140px; color:#003a8f; font:16px ntb;}

.w_write9 select, .w_write9 input[type=text], .w_write9 input[type=date] { border:1px solid #003a8f; border-radius: 0; color:#003a8f; font:14px/1.6 ntr; padding:0 4px; width:calc(100% - 150px); float:right; } 
.w_write9 textarea { border:1px solid #003a8f; width:100%; height:100px; outline: none; margin-bottom: 8px; font:14px ntr; color:#003a8f; margin-top:6px; padding:10px; }
.w_write9 textarea::placeholder { color:#003a8f; }
.w_write9 input[type="file"] { margin-bottom: 14px; border:1px solid #ddd; width:100%; margin-top: 8px; }
.w_write9 div.cl input { width:23.5%; height:40px; float:left; margin-right: 2%; color:#fff; font:600 11px gsm; border:none; }
.w_write9 .w_save { background: #003a8f; }
.w_write9 .w_edit { background: #aaa; }
.w_write9 .w_del { background: #ff2b2b; }
.w_write9 .w_cancel { margin-right: 0 !important; background: #000; }

.w_write9 .w_save2 { background: #003a8f; }
.w_write9 .w_edit2 { background: #aaa; }
.w_write9 .w_edit9 { background: #aaa; }
.w_write9 .w_cancel9 { margin-right: 0 !important; background: #000; }
.w_write9 .w_del9 { background: #ff2b2b; }



/* write */
.w_write91 { border:1px solid #003a8f; padding:20px; background: rgba(255,255,255,0.95); position: absolute; right:40px; top:10px; width:400px; box-sizing: border-box; display: none; z-index: 9999991; }
.w_write91.view { display: block; }
.w_write91 p { font:normal 18px/30px gsb; color:#003a8f; border-bottom:1px solid #003a8f; margin-bottom: 10px; }
.w_write91 div { margin-bottom: 10px; }
.w_write91 div:after { content:""; clear:both; display: block; }
.w_write91 strong { display: inline-block; width:140px; color:#003a8f; font:16px ntb;}

.w_write91 select, .w_write91 input[type=text], .w_write91 input[type=date] { border:1px solid #003a8f; border-radius: 0; color:#003a8f; font:14px/1.6 ntr; padding:0 4px; width:calc(100% - 150px); float:right; } 
.w_write91 textarea { border:1px solid #003a8f; width:100%; height:100px; outline: none; margin-bottom: 8px; font:14px ntr; color:#003a8f; margin-top:6px; padding:10px; }
.w_write91 textarea::placeholder { color:#003a8f; }
.w_write91 input[type="file"] { margin-bottom: 14px; border:1px solid #ddd; width:100%; margin-top: 8px; }
.w_write91 div.cl input { width:23.5%; height:40px; float:left; margin-right: 2%; color:#fff; font:600 11px gsm; border:none; }
.w_write91 .w_save22 { background: #003a8f; }
.w_write91 .w_edit { background: #aaa; }
.w_write91 .w_del { background: #ff2b2b; }
.w_write91 .w_cancel { margin-right: 0 !important; background: #000; }

.w_write91 .w_save2 { background: #003a8f; }
.w_write91 .w_edit2 { background: #aaa; }
.w_write91 .w_edit9 { background: #aaa; }
.w_write91 .w_cancel99 { margin-right: 0 !important; background: #000; }
.w_write91 .w_del9 { background: #ff2b2b; }

/* overview */
#sub1 .cont2 { float:left; width:580px; }
#sub1 .cont2 h2 { margin-bottom: 20px; line-height:1; }
#sub1 .cont2 .lbox { background: #fff; padding:20px; height: 560px; box-sizing: border-box; color:#003a8f; }
#sub1 .cont2 .lbox div:first-of-type { border-bottom:1px solid #003a8f; }
#sub1 .cont2 .lbox .list li { border-bottom:1px solid #003a8f; color:#003a8f; }
#sub1 .cont2 .lbox .list li:hover { background: #003a8f; color:#fff; }
#sub1 .cont2 .lbox .list li:after { content:""; clear:both; display:block; }
#sub1 .cont2 .lbox .list li a { color:inherit; }
#sub1 .cont2 .lbox i, #sub1 .cont2 .lbox strong, #sub1 .cont2 .lbox p, #sub1 .cont2 .lbox b, #sub1 .cont2 .lbox u, #sub1 .cont2 .lbox em, #sub1 .cont2 .lbox span { float:left; margin-right: 10px; font:normal 12px/30px gsm; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#sub1 .cont2 .lbox i { width: 50px;}
#sub1 .cont2 .lbox strong { width: 44px; text-align: center; }
#sub1 .cont2 .lbox p { width: 100px; }
#sub1 .cont2 .lbox b { width: 78px; }
#sub1 .cont2 .lbox u { width: 100px;}
#sub1 .cont2 .lbox em { width: 56px; text-align: center;}
#sub1 .cont2 .lbox span { width: 52px; margin-right: 0; text-align: center; }
#sub1 .page { text-align: center; font:normal 12px/18px gsm;  margin-top: 10px; }
#sub1 .page a { display: inline-block; width:18px; color:#003a8f;}
#sub1 .page ul, #sub1 .page ul li { display: inline-block; }
#sub1 .page ul li.select a {font-family: gsb; }

/* comment */

#sub1 .cont3 { float:right; width: 380px; position: relative; }
#sub1 .cont3 h2 { margin-bottom: 20px; line-height:1;}
#sub1 .cont3 .rbox { background: #fff; color:#003a8f; padding:20px; height: 560px; box-sizing: border-box; overflow: auto; padding-bottom:30px; }
#sub1 .cont3 .rpt { position: absolute; top:0; right:0;  font:14px gsm; }
#sub1 .cont3 .rpt img { position: relative; top:2px; margin-right: 8px; }
#sub1 .cont3 .rbox .subject { font:normal 12px/30px gsm; margin-bottom: 10px;  }
#sub1 .cont3 .rbox .subject:after { content:""; clear:both; display: block; }

#sub1 .cont3 .rbox .subject i.red { background: #ff2b2b; }
#sub1 .cont3 .rbox .subject i.yel { background: #ffb100; }
#sub1 .cont3 .rbox .subject i.grn { background: #1fce18; }
#sub1 .cont3 .rbox .subject strong { font-family: gsb; float:left; margin-right: 10px;  }
#sub1 .cont3 .rbox .subject em { font-style: normal; }
#sub1 .cont3 .rbox .view { font:normal 14px/1.6 ntr;} 
#sub1 .cont3 .rbox .view figure { margin-bottom: 10px; }
#sub1 .cont3 .rbox .view figure img { width:100%; }
#sub1 .cont3 .rbox .view p span { display: inline-block; width: 130px; }

#sub1 .cont3 .rbox .reply { border-top:1px solid #003a8f; margin-top: 40px; font:normal 12px/30px gsm;  }
#sub1 .cont3 .rbox .reply li { border-bottom:1px solid #003a8f; padding:8px 0; }
#sub1 .cont3 .rbox .reply li:after { content:""; clear:both; display: block; }
#sub1 .cont3 .rbox .reply li strong { font-family: gsb; float:left; }
#sub1 .cont3 .rbox .reply li em { float:right; font-style: normal; color:#999; }
#sub1 .cont3 .rbox .reply li p { clear:both; margin-top: 4px; font:14px/1.6 ntr;  }


#sub1 .cont4 { float:right; width: 380px; position: relative; margin-top:58px;}
#sub1 .cont4 h2 { margin-bottom: 20px; line-height:1;}
#sub1 .cont4 .rbox { background: #fff; color:#003a8f; padding:20px;  box-sizing: border-box; overflow: auto; padding-bottom:30px; }
#sub1 .cont4 .rpt { position: absolute; top:0; right:0;  font:14px gsm; }
#sub1 .cont4 .rpt img { position: relative; top:2px; margin-right: 8px; }
#sub1 .cont4 .rbox .subject { font:normal 12px/30px gsm; margin-bottom: 10px;  }
#sub1 .cont4 .rbox .subject:after { content:""; clear:both; display: block; }

#sub1 .cont4 .rbox .subject i.red { background: #ff2b2b; }
#sub1 .cont4 .rbox .subject i.yel { background: #ffb100; }
#sub1 .cont4 .rbox .subject i.grn { background: #1fce18; }
#sub1 .cont4 .rbox .subject strong { font-family: gsb; float:left; margin-right: 10px;  }
#sub1 .cont4 .rbox .subject em { font-style: normal; }
#sub1 .cont4 .rbox .view { font:normal 14px/1.6 ntr;} 
#sub1 .cont4 .rbox .view figure { margin-bottom: 10px; }
#sub1 .cont4 .rbox .view figure img { width:100%; }
#sub1 .cont4 .rbox .view p span { display: inline-block; width: 130px; }

#sub1 .cont4 .rbox .reply { border-top:1px solid #003a8f; margin-top: 40px; font:normal 12px/30px gsm;  }
#sub1 .cont4 .rbox .reply li { border-bottom:1px solid #003a8f; padding:8px 0; }
#sub1 .cont4 .rbox .reply li:after { content:""; clear:both; display: block; }
#sub1 .cont4 .rbox .reply li strong { font-family: gsb; float:left; }
#sub1 .cont4 .rbox .reply li em { float:right; font-style: normal; color:#999; }
#sub1 .cont4 .rbox .reply li p { clear:both; margin-top: 4px; font:14px/1.6 ntr;  }
#sub1 .cont4 .rbox h3 {font: 600 14px gsm;padding-bottom:10px;}



#sub1 .cont4 .rbox table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} 
#sub1 .cont4 .rbox caption {padding:10px 0;font-weight:bold;text-align:left}
#sub1 .cont4 .rbox {margin:0 0 10px}
#sub1 .cont4 .rbox caption {padding:0;font-size:0;line-height:0;overflow:hidden}
#sub1 .cont4 .rbox thead th {font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px;padding: 0;    border-top: 2px solid #003a8f;background:#eeeeee;}
#sub1 .cont4 .rbox thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
#sub1 .cont4 .rbox tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
#sub1 .cont4 .rbox tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
#sub1 .cont4 .rbox td {color:#666;padding:8px 0;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;word-break:break-all; text-align:center}
#sub1 .cont4 .rbox tbody tr:hover td {background:#fafafa}
#sub1 .cont4 .rbox a:hover {text-decoration:underline}

.cont2 .lbox table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} 
.cont2 .lbox caption {padding:10px 0;font-weight:bold;text-align:left}
.cont2 .lbox {margin:0 0 10px}
.cont2 .lbox caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.cont2 .lbox thead th {font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px;padding: 0;    border-top: 2px solid #003a8f;background:#eeeeee;}
.cont2 .lbox thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.cont2 .lbox tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.cont2 .lbox tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
.cont2 .lbox td {color:#666;padding:8px 0;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;word-break:break-all; text-align:center}
.cont2 .lbox tbody tr:hover td {background:#fafafa}
.cont2 .lbox a:hover {text-decoration:underline}
.fon {border-left:1px solid #ecf0f1;}
.fon li {float:left;padding:5px 10px;border-top:1px solid #ecf0f1;border-right:1px solid #ecf0f1;text-align:center;width:100px;cursor:pointer;}
.fon li.on {background:#b3d9ff}

.left01 {display:none;width:38%;float:left;border-bottom:0px;padding-right:2%;border-bottom: 0px;}
.left01  tr:first-child {border-top: 2px solid #003a8f;}
.left01  th {width:40%;font-weight: normal;padding:8px 0;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;word-break:break-all; text-align:center;background:#eeeeee;}
.left02 {width:60%;float:left;}

.left03 {width:100%;float:none;}



/* sub5 */
#sub5 { height:calc(100% - 120px); padding-top:70px; box-sizing: border-box; }
#sub5 .cont1 div { float:left; margin-right: 80px;  }
#sub5 .cont1 div:last-child { margin-right: 0;  }
#sub5 .cont1 div ul { position: relative; width:280px; height:180px; }
#sub5 .cont1 div ul li { position: absolute; width:100%; height:100%; border:1px solid #fff; background: #003a8f; box-sizing: border-box; left:0; top:0; display: flex; align-items: center; justify-content: center; color:#fff; flex-direction: column; }
#sub5 .cont1 div ul li:nth-child(1) { left:-20px; top:20px; z-index:3; cursor: pointer; }
#sub5 .cont1 div ul li:nth-child(2) { z-index:2; }
#sub5 .cont1 div ul li:nth-child(3) { left:20px; top:-20px; z-index:1; }
#sub5 .cont1 div ul li p { font:600 18px/1.2 gsm; text-align: center; margin-bottom: 20px; }
#sub5 .cont1 div ul li a { border:1px solid #fff; padding:2px 14px; border-radius: 50px; font:600 12px gsm; color:#fff; background: #003a8f; }
#sub5 .cont1 div ul li:nth-child(1):hover { background: #fff; transition: 0.3s; }
#sub5 .cont1 div ul li:nth-child(1):hover p { color:#003a8f; transition:0.3s;  }

#product_add_data tr {cursor:pointer;}