@charset "utf-8";
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-gothic.css');
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-barun-gothic.css');
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-round.css');
/*
font-family: 'NanumGothicLight';
font-family: 'NanumGothic';
font-family: 'NanumGothicBold';
font-family: 'NanumGothicExtraBold';
font-family: 'NanumBarunGothicLight';
font-family: 'NanumBarunGothic';
font-family: 'NanumBarunGothicBold';
font-family: 'NanumSquareRoundL';
font-family: 'NanumSquareRound';
font-family: 'NanumSquareRoundB';
font-family: 'NanumSquareRoundEB';
*/

hr {display:none}
form, fieldset {border:0 none}
html,body {border:0 none;width:100%}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
ul,ol,li,dl,dt,dd,table,th,td {font-weight:normal;text-align:left;line-height:100%;}
ul,ol,li {list-style:none;}
a {text-decoration:none; color:#383d41;}
a,img,input.type-image {border:0 none}
table {border:0;border-spacing:0;border-collapse:collapse}
em {font-style:normal}

body,h1,h2,h3,h4,input,button {font-family:NanumBarunGothic,dotum,Helvetica,sans-serif;color:#383d41;font-size:12px}

.mt0 { margin-top: 0px !important }
.mt3 { margin-top: 3px !important }
.mt5 { margin-top: 5px !important }
.mt10 { margin-top: 10px !important }
.mt15 { margin-top: 15px !important }
.mt20 { margin-top: 20px !important }
.mt25 { margin-top: 25px !important }
.mt30 { margin-top: 30px !important }
.mt35 { margin-top: 35px !important }
.mt40 { margin-top: 40px !important }
.mt45 { margin-top: 45px !important }
.mt50 { margin-top: 50px !important }
.mt55 { margin-top: 55px !important }
.mt60 { margin-top: 60px !important }
.mt70 { margin-top: 70px !important }
.mt80 { margin-top: 80px !important }
.mt90 { margin-top: 90px !important }
.mt100 { margin-top: 100px !important }
.mb0 { margin-bottom: 0px !important }
.mb5 { margin-bottom: 5px !important }
.mb10 { margin-bottom: 10px !important }
.mb15 { margin-bottom: 15px !important }
.mb20 { margin-bottom: 20px !important }
.mb25 { margin-bottom: 25px !important }
.mb30 { margin-bottom: 30px !important }
.mb35 { margin-bottom: 35px !important }
.mb40 { margin-bottom: 40px !important }
.mb45 { margin-bottom: 45px !important }
.mb50 { margin-bottom: 50px !important }
.ml0 { margin-left: 0px !important }
.ml3 { margin-left: 3px !important }
.ml5 { margin-left: 5px !important }
.ml7 { margin-left: 7px !important }
.ml8 { margin-left: 8px !important }
.ml10 { margin-left: 10px !important }
.ml15 { margin-left: 15px !important }
.ml20 { margin-left: 20px !important }
.ml25 { margin-left: 25px !important }
.ml30 { margin-left: 30px !important }
.ml35 { margin-left: 35px !important }
.ml40 { margin-left: 40px !important }
.ml45 { margin-left: 45px !important }
.ml50 { margin-left: 50px !important }
.mr0 { margin-right: 0px !important }
.mr5 { margin-right: 5px !important }
.mr10 { margin-right: 10px !important }
.mr15 { margin-right: 15px !important }
.mr18 { margin-right: 18px !important }
.mr20 { margin-right: 20px !important }
.mr25 { margin-right: 25px !important }
.mr30 { margin-right: 30px !important }
.mr35 { margin-right: 35px !important }
.mr40 { margin-right: 40px !important }
.mr45 { margin-right: 45px !important }
.mr50 { margin-right: 50px !important }

/*btn color*/
.btn_xsmall {
  display: inline-block !important;
  outline: none !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;  
  overflow: visible;
  vertical-align: middle !important;
  border:0;
  overflow: visible; 
  font-size:12px;  
  padding: 0 15px;
  height: 25px;
  line-height: 25px;
  border-radius: 5px;
  letter-spacing: -1px;
}
.btn_small {
  display: inline-block !important;
  outline: none !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;  
  overflow: visible;
  vertical-align: middle !important;
  border:0;
  overflow: visible; 
  font-size:12px;  
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  letter-spacing: -1px;
}
.btn_middle {
  display: inline-block !important;
  outline: none !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;  
  overflow: visible;
  vertical-align: middle !important;
  border:0;
  overflow: visible; 
  font-size:14px;  
  padding: 0 30px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  letter-spacing: -1px;
}
.btn_big {
  display: inline-block !important;
  outline: none !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;  
  overflow: visible;
  vertical-align: middle !important;
  border:0;
  overflow: visible; 
  font-size:16px;  
  padding: 0 40px;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  letter-spacing: -1px;
}


.b_blue { background: #0072bc;  border: 1px solid #3079ed;  color: #fff!important}
.b_blue:hover { background: #06588D; color: #fff; border: 1px solid #06588D;}

.b_white { color: #666!important;  border: 1px solid #999;  border-top: 1px solid #ccc;  border-left: 1px solid #ccc;  background-color: #fff;  background: #fff;}
.b_white:hover {background: #fafafa}

.b_gray { color: #6472a1!important;  border: 1px solid #ccd0d8;  background-color: #fafbfb;}
.b_gray:hover {  color: #666;   background: #F7F7F7;}

.b_yellow {  color: #fff!important;  border: solid 1px #ffb03b;  background: #ffb03b}
.b_yellow:hover {background: #ff9f11}

.b_orange {color: #fff!important; border: solid 1px #d88119; background: #fb7622}
.b_orange:hover {background: #FF6300}

.b_orange_2 {color: #fff!important; border: solid 1px #f4a135; background: #ffb03b}
.b_orange_2:hover {background: #FD8336}

.b_darkblue {color: #fff!important; background: #3e4146; border: solid 1px #333;}
.b_darkblue:hover {background: #2c3138}

.b_mint {color: #fff!important; background: #23c0b2; border: solid 1px #3EC3B8;}
.b_mint:hover {background: #27A59A;}

.b_red { color: #FF0000!important;  border: 1px solid #ccd0d8;  background-color: #fafbfb;}
.b_red:hover {  color: #666;   background: #F7F7F7;}

.b_tblue { color: #0000FF!important;  border: 1px solid #ccd0d8;  background-color: #fafbfb;}
.b_tblue:hover {  color: #666;   background: #F7F7F7;}

.header { }
.header .header-n { background-color: #1e245f; height: 30px;}
.header_top { width:1140px; height: 30px;  margin: auto;}
.header_top ul { float: left;}
.header_top .header_left {}
.header_top .header_left li { font-size: 14px; font-family: 'NanumBarunGothic'; float: left; padding-right: 12px; padding-top: 8px; color: white;}
.header_top .header_left li a { color: white;}
.header_top .header_right { float: right;}
.header_top .header_right li { font-size: 14px; font-family: 'NanumBarunGothic'; float: left; padding-left: 12px; padding-top: 8px; color: white;}
.header_top .header_right li a { color: white;}
.header_mid { width: 1140px; height: 80px; margin: auto;overflow:hidden;}
.header_mid ul { float: left;}
.header_mid .logo_img img{ width: 250px; margin-top: 15px;}
.header_mid .mid_right { float: right;}
.header_mid .mid_right li { font-size: 20px; font-family: 'NanumBarunGothic'; float: left; padding-left: 60px; padding-top: 30px;display:inline-block; margin:0; text-transform:uppercase; }
.header_mid .mid_right li:after { display:block; content: ''; border-bottom: solid 3px #1e245f; transform: scaleX(0); transition: transform 100ms ease-in-out; margin-top: 27px;}
.header_mid .mid_right li:hover:after { transform: scaleX(1); }
.header_mid .mid_right .mid_img { padding: 0; margin: 10px 0 0 50px;}
.header .route_b {height: 5px; margin: auto; background-color: #1e245f;}

.sub_gnb_content { position:relative; z-index:200; }
.sub_gnb_slider { position:absolute; width:100%; border-bottom:1px solid #ccc; background-color:#fff; overflow:hidden; }
.sub_gnb_content .wrap { position:relative; margin:0 auto; width:1140px;}
.sub_gnb { float: right; position:absolute; margin-left:415px; display:inline-block; }
.sub_gnb li { float: left; font-size: 14px; font-family: 'NanumBarunGothic';}
.sub_gnb li a { display:block; padding:5px 0; }
.sub_gnb li a:hover { color:#ed6d00; }
.sub_gnb .hid_mn { }
.sub_gnb .hid_mn li { clear: both; padding-left: 30px; margin: 10px 0;}

.main {}
.main_banner {  background-color: #f1f2f8; text-align:center;}
.main_banner .banner_img { width: 1140px; height: 420px; margin: auto;}
.main_banner .banner_img img {}

.menu_box {}
.main_menu { height: 40px; background-color: #c7cae7;}
.main_menu .menu { width: 1140px; margin: auto;}
.main_menu .menu li { float: left; font-size: 20px; font-family: 'NanumBarunGothicBold'; width:25%; text-align:center; padding: 10px 0;}
.main_menu .menu li:hover { background-color: #ffffff;}
.main_menu .menu .bar { background-color: #ffffff;}

.main .best { background-color: #ffffff;}
.main .best .best_tit { width: 1140px; margin: 30px auto 0px auto; font-size: 25px; font-family: 'NanumBarunGothic'; border-bottom: 2px solid #cecece; padding-bottom: 10px; color: #004665; font-weight: 600;}
.main .best .tit_img { width: 130px; vertical-align:middle}
.main .best .best_n { width: 1140px; height: 450px; margin: auto;} 
.main .best .best_img {}
.main .best .best_img img { width: 200px; height: 260px; margin-bottom: 10px;}
.main .best .best_img li { width: 200px; height: 400px; float: left; padding: 42px;}
.main .best .best_img .s_tit { font-family: 'NanumSquareRound'; text-align: center; width: 35px; background-color: #008cd6; color: white; padding: 5px; margin-bottom: 10px; border-radius: 5px; font-size: 15px;}
.main .best .best_img .s_tit1 { font-family: 'NanumSquareRound'; text-align: center; width: 35px; background-color: #008cd6; color: white; padding: 5px; margin-bottom: 10px; border-radius: 5px; font-size: 15px;}
.main .best .best_img .s_tit2 { font-family: 'NanumSquareRound'; text-align: center; width: 35px; background-color: #eb8235; color: white; padding: 5px; margin-bottom: 10px; border-radius: 5px; font-size: 15px;}
.main .best .best_img .s_tit3 { font-family: 'NanumSquareRound'; text-align: center; width: 35px; background-color: #721322; color: white; padding: 5px; margin-bottom: 10px; border-radius: 5px; font-size: 15px;}
.main .best .best_img .title { font-family: 'NanumSquareRoundB'; font-size: 18px; line-height:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.main .best .best_img .line { width: 200px; height: 1px; background-color:gray; margin: 15px 0 15px 0 ;}


.main .re_box { background-color: #f1f2f8;}
.main .recomm { width: 1140px; height: 550px; margin: auto; }
.main .recomm .rec_div { float: left;}
.main .recomm .recomm_tit { margin-top:10px; font-size: 25px; font-family: 'NanumBarunGothic'; margin-bottom: 30px; border-bottom: 2px solid #cecece; padding-bottom: 10px; width: 700px; color: #004665; font-weight: 600;}
.main .recomm .tit_img { width: 130px;vertical-align:middle}
.main .recomm .rec_img img { width: 200px; height: 260px; margin-bottom: 10px;}
.main .recomm .rec_img li { width: 200px; height: 400px; float: left; padding: 20px 30px 10px 10px ;}
.main .recomm .rec_img .s_tit { font-family: 'NanumSquareRound'; text-align: center; width: 35px; background-color: #008cd6; color: white; padding: 5px; margin-bottom: 10px; border-radius: 5px; font-size: 15px;}
.main .recomm .rec_img .s_tit1 { font-family: 'NanumSquareRound'; text-align: center; width: 35px; background-color: #008cd6; color: white; padding: 5px; margin-bottom: 10px; border-radius: 5px; font-size: 15px;}
.main .recomm .rec_img .s_tit2 { font-family: 'NanumSquareRound'; text-align: center; width: 35px; background-color: #eb8235; color: white; padding: 5px; margin-bottom: 10px; border-radius: 5px; font-size: 15px;}
.main .recomm .rec_img .s_tit3 { font-family: 'NanumSquareRound'; text-align: center; width: 35px; background-color: #721322; color: white; padding: 5px; margin-bottom: 10px; border-radius: 5px; font-size: 15px;}
.main .recomm .rec_img .title { font-family: 'NanumSquareRoundB'; font-size: 18px; line-height:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.main .recomm .rec_img .line { width: 200px; height: 1px; background-color:gray; margin: 15px 0 15px 0 ;}

.main .math_div { width: 400px; height: 450px; float: right;}
.main .math_tit { font-size: 25px; font-family: 'NanumBarunGothic'; text-align: center; margin: -10px auto 40px auto; border-bottom: 2px solid #cecece; padding-bottom: 20px; width: 350px;}
.main .math_k .king img { width: 200px; height:260px; margin-bottom: 20px;}
.main .math_k { padding: 30px 0; width: 400px; height: 440px; background-color: #ffffff; margin-top: -10px;}
.main .math_k .king .title { font-family: 'NanumSquareRoundB'; font-size: 18px; line-height:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;padding:0 10px;}
.main .math_k .king .line { margin: 10px 25px; height: 1px; width: 220px; background-color: gray;}

.member { max-width: 640px; margin: auto; margin-top: 30px; text-align: center;}
.member .logo { margin-bottom: 30px;}
.member .logo img { width: 300px;}
.member .member_box { height: 100%; border: 1px solid #f0f0f0; border-radius: 10px; background-color: #f0f0f0;}
.member .member_box .id { margin-top: 80px;}
.member .member_box .id .text_id { border-radius: 10px; padding: 10px; width: 80%; font-family: 'NanumBarunGothic'; font-size: 16px; border: 1px solid #9c9c9c;}
.member .member_box .password { margin-top: 20px;}
.member .member_box .password .text_pw { border-radius: 10px; padding: 10px; width: 80%; font-family: 'NanumBarunGothic'; font-size: 16px; border: 1px solid #9c9c9c;}
.member .member_box .find { margin: 10px 0;}
.member .member_box .find_l { display: inline-block;}
.member .member_box .find li { float: left; padding: 10px; font-family: 'NanumBarunGothic'; font-size: 16px;}
.member .member_box .button { margin-top: 30px;}

.member .member_box .sns { height: 80px; margin: auto; display: inline;}
.member .member_box .sns .sns_log { display: inline-block; width: 85%;}
.member .member_box .sns .sns_log li { float: left; margin: 20px 0; font-family: 'NanumBarunGothic'; font-size: 16px; width: 40%; text-align: center;}
.member .member_box .sns .sns_log .sns_line { width: 30%; height: 2px; background-color: #ccc; margin: 25px 0 0 0 ;}
.member .member_box .sns .sns_img { display: inline-block; width: 85%;}
.member .member_box .sns .sns_img li { margin: 10px 0; text-align: center; }
.member .member_box .sns .sns_img button { width: 100%; border-radius: 10px; border: none; font-family: 'NanumBarunGothic'; font-size: 16px; color: white;}
.member .member_box .sns .sns_img img { width: 35px; vertical-align: middle;}

.member .member_box .box { font-family: 'NanumBarunGothicLight'; text-align: left; font-size: 14px; margin: 10px 10px 0 10px;}
.member .member_box .checkbox { font-family: 'NanumBarunGothicLight'; font-size: 14px;}
.member .member_box .member_title { font-family: 'NanumBarunGothic'; font-size: 14px; margin: 10px 0;}
.member .member_box .member_t { text-align: left;font-family: 'NanumBarunGothic'; font-size: 14px; margin: 10px;}
.member .member_box .member { font-family: 'NanumBarunGothicLight'; font-size: 14px; text-align: left; height: 30px; border: 1px solid #ccc; padding: 10px 0 0 10px; background-color: white; margin: 10px;}

.member .member_box .cer { display: inline-block; width: 90%; background-color: #fbfbfb; margin: 20px 0; border: 1px solid gray; border-radius: 10px;}
.member .member_box .cer p { font-family: 'NanumBarunGothic'; font-size: 16px; margin: 0 20px;}
.member .member_box .cer img { margin-top: 20px;}
.member .member_box .cer .auth_btn { background-color: white; color: darkblue; width: 100%; height: 40px; font-family: 'NanumBarunGothic'; font-size: 14px; border-radius: 5px; margin: 20px 0; border: 1px solid darkblue;}
.member .member_box .button { margin: 20px 0 ;}

.member .fst {}
.member .fst .fst_m { display: inline-block;}
.member .fst .fst_m .st { font-family: 'NanumBarunGothicBold'; font-size: 16px;}
.member .fst .fst_m li { float: left; font-family: 'NanumBarunGothic'; font-size: 16px; margin: 20px 0px 0 40px;}

.textfield{padding:20px;border:1px solid #e5e5e5;overflow:auto;font-size:14px;line-height:25px;text-align:justify;background-color: white;}

#user { width: 100%; margin: auto; text-align:left;}
#user .info { font-family: 'NanumBarunGothic'; font-size: 14px;}
#user .info .in_tit { font-size: 18px; margin: 10px 10px; color: darkblue; font-weight: 600;}
#user .info .info_ta { margin-bottom:10px;}
#user .info .info_ta p { font-size: 14px; margin: 10px 0 5px 0; color: black;}
#user .info .info_ta .itext { width:100%; padding: 8px 0; border: 1px solid gray; border-radius: 5px;}
#user .info .info_ta .ibtn { background-color: #00008b; color: white; font-family: 'NanumBarunGothic'; font-size: 14px; padding: 5px; border: 1px solid gray; border-radius: 5px;}

#user .info .ag_ch { width: 100%; text-align: center; margin: 10px 0;}
#user .info .ag_btn { text-align: center; margin: 30px 0;}
#user .info .ag_btn .ibtn { padding: 3px 15px; margin: 0 10px; font-family: 'NanumBarunGothic'; font-size: 14px; border: 1px solid gray; border-radius: 5px; background-color: #00008b; color: white;}

.wrap .route { height: 50px; width: 1140px; margin: auto;}
.wrap .route .route_m { float: left;}
.wrap .route .route_m img { width: 20px; filter: contrast(0%)}
.wrap .route .route_m li { float: left; margin: 20px 20px 0 0; font-family: 'NanumBarunGothic'; font-size: 15px; color: gray;}

.wrap .sub { width: 1140px; height: 100%; margin: auto;}
.wrap .sub_left { float: left;}
.wrap .sub_left .left_menu { width: 180px; margin-top: 20px; }
.wrap .sub_left .left_menu li {}
.wrap .sub_left .left_menu .box_m { font-family: 'NanumSquareRoundB'; font-size: 20px; margin-bottom: 10px; color: darkblue; border-bottom: 2px solid darkblue; padding-bottom: 10px;}
.wrap .sub_left .left_menu .box_s { padding: 20px 0 20px 0px; font-family: 'NanumSquareRoundB'; font-size: 14px; width: 180px; text-align: left; color:gray; border-bottom: 1px solid #ccc; padding-bottom: 10px;}
.wrap .sub_left .left_menu .on { font-family: 'NanumSquareRoundEB'; font-size: 16px; color: darkred;border-bottom: 1px solid darkred;}

.wrap .sub_right { float: left; width: 929px;}
.wrap .sub_right .cont { margin: 15px 0 0 15px; border-left: 1px solid #ccc; padding-left: 15px;}

.book .book_cate .toplist { margin-top: 30px; width: 1140px; display: inline-block;}
.book .book_cate .toplist li { margin: 0 6px 0 7px; float: left; background-color: #c7cae7; min-width:10%; padding: 10px 30px; font-family: 'NanumBarunGothic'; font-size: 18px; text-align:center; }
.book .book_cate .toplist .third { margin: 0 6px 0 7px; float: left; background-color: #c7cae7; min-width:10%; padding: 10px 20px; font-family: 'NanumBarunGothic'; font-size: 16px; text-align:center; }
.book .book_cate .toplist .on { background-color: #1e245f; color: white;}
.book .book_cate .toplist li:hover { background-color: #1e245f; color: white; }

.book .book_cont {}
.book .book_cont .list_tit { font-family: 'NanumBarunGothic'; font-size: 25px; margin-top: 20px; color: #1e245f;}
.book .book_cont .list_sub { font-family: 'NanumBarunGothic'; font-size: 16px; text-align: center;}
.book .book_cont .book_list { display: inline-block;}
.book .book_cont .book_list li { float: left; margin: 30px 12px;}
.book .book_cont .book_list .b_box { height: 370px; width: 260px; text-align: center; font-family: 'NanumSquareRoundB'; font-size: 16px; background-color: #f1f2f8; border-radius: 10px;}
.book .book_cont .book_list img { width: 190px; height: 258px; padding: 20px 0;}
.book .book_cont .book_list .b_box .title { font-family: 'NanumSquareRoundB'; font-size: 18px; line-height:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;padding:0 20px;}
.book .book_cont .book_list .b_box .line { margin: 10px 25px; height: 1px; width: 210px; background-color: gray;}
.book .book_cont .book_list .b_box .price { text-decoration: line-through; font-family:'NanumSquareRoundB'; color: gray; font-size: 16px;}
.book .book_cont .book_list .b_box .saleprice { font-family:'NanumSquareRoundB'; font-size: 18px;}

.book .book_info { width: 1140px;}
.book .book_info .book_title { width:1140px;}
.book .book_info .book_title .d_img { width: 500px; float: left;}
.book .book_info .book_title .d_img img{width: 370px;float: left;margin: 40px 0 50px 80px;box-shadow: 10px 10px 20px gray;}
.book .book_info .book_title .d_txt { margin: 20px 0 0 20px; display: inline-block;}
.book .book_info .book_title .d_txt li { font-family: 'NanumBarunGothic'; font-size: 18px; margin-top: 33px;}
.book .book_info .book_title .d_txt li span { font-family: 'NanumBarunGothicBold'; font-size: 18px; color: #333;}
.book .book_info .book_title .d_txt li .up { vertical-align: middle;width: 20px; height: 20px; border: 1px solid #1e245f; color: white;background-color: #1e245f;}
.book .book_info .book_title .d_txt li .down { vertical-align: middle;width: 20px; height: 20px; border: 1px solid #1e245f; color: white;background-color: #1e245f;}
.book .book_info .book_title .d_txt .inp { vertical-align: middle;width: 30px; height: 18px; border: 1px solid; text-align: center;}

.book .book_info .book_content { border: 1px solid #ccc; width: 1060px; padding:30px 40px; clear:both;}
.book .book_info .book_content h3 { font-family: 'NanumBarunGothic'; font-size: 20px; margin: 15px;}
/*.book .book_info .book_content img {width:100%;}*/

.book .book_info .book_desc { border: 1px solid #ccc; width: 1060px; padding:30px 40px; margin:10px auto;}
.book .book_info .book_desc h3 { font-family: 'NanumBarunGothic'; font-size: 16px; margin: 15px;}
.book .book_info .book_desc p { font-family: 'NanumBarunGothic'; font-size: 14px; margin: 15px; line-height:20px;}
/*.book .book_info .book_desc img {width:100%;}*/

.book .book_info .book_desc2 { border: 1px solid #ccc; width: 1060px; padding:30px 40px; margin:10px auto;}
.book .book_info .book_desc2 h3 { font-family: 'NanumBarunGothic'; font-size: 16px; margin: 15px;}
.book .book_info .book_desc2 p { font-family: 'NanumBarunGothic'; font-size: 14px; margin: 15px; line-height:20px;}

.sub .sub_tit { font-family: 'NanumBarunGothic'; font-size: 30px; text-align: center; margin: 15px 0; background-color: #f3efff; padding: 20px;}
.sub .list_box { padding: 10px 0;}
.sub .all_ch { width: 1140px; margin: auto; font-family: 'NanumBarunGothic'; font-size: 14px;}
.sub .all_ch p { margin: 20px 0;}
.sub .all_ch button { padding: 2px 8px; font-family: 'NanumBarunGothic'; font-size: 14px; border: 1px solid #0f0f7e; border-radius: 3px;}
.sub .c_box { width: 1140px; margin: auto; height: 100%; clear: both;;}
.sub .c_box .cart_list { border-top: 1px solid #989898; border-bottom: 1px solid #989898; margin: 10px 0;}
.sub .c_box .cart_list .c_list { width: 100%;}
.sub .c_box .cart_list .c_list tr { margin: 10px 0;}
.sub .c_box .cart_list .c_list th { background-color: #c7cae7; padding: 10px; border-bottom: 1px solid #989898;}
.sub .c_box .cart_list .c_list td { color: black;}
.sub .c_box .cart_list .c_list th, td { text-align: center; font-family: 'NanumBarunGothic'; font-size: 14px;}
.sub .c_box .cart_list .c_list td button { font-family: 'NanumBarunGothic'; font-size: 14px; padding: 2px 10px; background-color: white; border: 1px solid #0f0f7e; color: #0f0f7e; border-radius: 3px;}
.sub .c_box .cart_list .c_list th:first-child, td:first-child { border-left: none;}
.sub .c_box .cart_list .c_list .le { position: relative; padding: 0 10px; border: 1px solid #ddd; overflow: hidden; width: 60px; float: right; margin-right: 25px;}
.sub .c_box .cart_list .c_list .le button { border: 0; background: #1e245f; color: #000; width: 20px; height: 23px; position: absolute; top: 0; font-size: 20px; padding: 0; color: white;}
.sub .c_box .cart_list .c_list .up { left: 0;}
.sub .c_box .cart_list .c_list .down { right: 0;}
.sub .c_box .cart_list .c_list .inp { border: 0; height: 18px; text-align: center; display: block; width: 100%; float: left; font-family: 'NanumBarunGothic'; font-size: 14px; border: 1px solid;}
.sub .c_box .cart_list .c_list img { width: 70px; margin-bottom: 2px;}
.sub .c_box .cart_list .c_list dt { float: left; width: 110px; margin: 0 20px;}
.sub .c_box .cart_list .c_list dt button { padding: 2px 10px; width: 100px; margin: auto; font-family: 'NanumBarunGothic'; font-size: 14px;}
.sub .c_box .cart_list .c_list dd { margin: 10px;}
.sub .c_box .cart_list .c_list dd button { margin-top: -2px; padding: 2px 10px; font-family: 'NanumBarunGothic'; font-size: 14px;}

.sub .price { margin: 20px 0 ;}
.sub .price .price_list { margin: auto; width: 1140px;} 
.sub .price .price_list .p_list { width: 1140px;}
.sub .price .price_list .p_list tr { margin: 10px 0; border-top: 1px solid #989898; border-bottom: 1px solid #989898;}
.sub .price .price_list .p_list th { background-color: #c7cae7; padding: 10px; border-bottom: 1px solid #989898;}
.sub .price .price_list .p_list td { padding: 10px; color: black;}
.sub .price .price_list .p_list th, td { text-align: center; font-family: 'NanumBarunGothic'; font-size: 14px;}
.sub .price .price_list .p_list .last_p { color: #ec0000; font-size: 28px; font-family: 'NanumBarunGothicBold';}

.sub .bt { background-color: #f3efff;}
.sub .bt .bt_ul { width: 1140px; margin: 0 auto; height: 100px; text-align: center;}
.sub .bt ul { display: inline-block; margin: 15px;}
.sub .bt li { float: left; margin: 10px 20px;}
.sub .bt button { padding: 10px 20px; font-family: 'NanumBarunGothic'; font-size: 20px; border-radius: 10px; background-color: #1e245f; border-color: #1e245f; color: white;}

.sub .help { width: 1100px; margin: 20px auto; font-family: 'NanumBarunGothicLight'; font-size: 14px; line-height: 20px; background-color: #fafbfc; padding: 20px; color: #a9a9a9;}
.sub .help h2 { font-family: 'NanumBarunGothic'; font-size: 20px; margin-bottom: 10px;}
.sub .help p { font-family: 'NanumBarunGothic'; font-size: 15px; margin: 10px 0; color: gray;}

.sub .order_box { width: 1140px; margin: auto; height: 100%; clear: both;;}

.order_top_box{border: 5px solid #eee; text-align: center;  padding: 20px; margin-top: 20px}
.order_top_box p{font-size: 16px; padding-bottom: 3px;}
.order_top_box p span{font-weight: bold}
.order_top_box strong{font-size: 16px;}

.sub .order_box .order_list {margin: 10px 0;}
.sub .order_box .order_list .o_list { width: 100%; border-top: 1px solid #989898; border-bottom: 1px solid #989898; margin: 20px 0 40px 0;}
.sub .order_box .order_list .o_list tr { margin: 10px 0;}
.sub .order_box .order_list .o_list th { background-color: #c7cae7; padding: 10px; border-bottom: 1px solid #989898;}
.sub .order_box .order_list .o_list td { color: black; padding: 10px 0;}
.sub .order_box .order_list .o_list th, td { text-align: center; font-family: 'NanumBarunGothic'; font-size: 14px;}
.sub .order_box .order_list .o_list td button { font-family: 'NanumBarunGothic'; font-size: 14px; padding: 2px 10px; background-color: white; border: 1px solid #0f0f7e; color: #0f0f7e; border-radius: 3px;}
.sub .order_box .order_list .o_list th:first-child, td:first-child { border-left: none;}
.sub .order_box .order_list .o_list .le { position: relative; padding: 0 10px; border: 1px solid #ddd; overflow: hidden; width: 60px; float: right; margin-right: 25px;}
.sub .order_box .order_list .o_list .le button { border: 0; background: #1e245f; color: #000; width: 20px; height: 23px; position: absolute; top: 0; font-size: 20px; padding: 0; color: white;}
.sub .order_box .order_list .o_list .up { left: 0;}
.sub .order_box .order_list .o_list .down { right: 0;}
.sub .order_box .order_list .o_list .inp { border: 0; height: 18px; text-align: center; display: block; width: 100%; float: left; font-family: 'NanumBarunGothic'; font-size: 14px; border: 1px solid;}
.sub .order_box .order_list .o_list img { width: 70px; margin-bottom: 2px;}
.sub .order_box .order_list .o_list dt { float: left; width: 80px; margin: 0 20px;}
.sub .order_box .order_list .o_list dt button { padding: 2px 10px; width: 100px; margin: auto; font-family: 'NanumBarunGothic'; font-size: 14px;}
.sub .order_box .order_list .o_list dd { margin: 10px;}
.sub .order_box .order_list .o_list dd button { margin-top: -2px; padding: 2px 10px; font-family: 'NanumBarunGothic'; font-size: 14px;}
.sub .order_box .order_list .o_list input { padding: 5px; border-radius: 3px; border: 1px solid gray;}
.sub .order_box .order_list p { font-family: 'NanumBarunGothic'; font-size: 16px; color: #1e245f;}
.sub .order_box .order_list .ord_btn { font-family: 'NanumBarunGothic'; font-size: 16px; padding: 2px 5px; vertical-align: middle; margin-left: 5px;
    background-color: white; border: 1px solid #0f0f7e; color: #0f0f7e; border-radius: 3px;}

.exp_box{border: 5px solid #eee;padding: 10px 20px;margin-top: 20px;font-size: 12px}
.exp_box strong{}
.exp_box .in_box{
	font-size: 14px;
	background: #f1f1f1;
	padding: 12px;
	line-height: 18px;
	margin-bottom: 12px;
}
.exp_box h5{
	font-size: 14px;
	color: #333;
	font-weight: bold;
	padding: 9px 0;
}

#board  .board_tit { width: 929px; font-family: 'NanumBarunGothic'; font-size: 30px; text-align: center; background-color: #f1f2f8; padding: 20px 0;}
#board  .board { width: 929px; margin: auto;}

#board  .board .search { margin: 50px 0; text-align: center;}
#board  .board .search select { width: 120px; font-family: 'NanumBarunGothicLight'; font-size: 16px; padding: 0 0 8px 0; text-align: center;}
#board  .board .search .bar { width: 500px; height: 30px; padding:0 10px;}
#board  .board .ok { font-family: 'NanumBarunGothicLight'; font-size: 16px; border-radius: 3px; background-color: #18256a; color: white; padding: 2px 30px 6px 30px; }

#board  .board table { width: 929px; margin-bottom: 30px;}
#board  .board .board_m { width: 929px;}
#board  .board .board_list th { font-family: 'NanumBarunGothicBold'; font-size: 16px; border-bottom: 1px solid #9c9c9c; border-top: 1px solid #9c9c9c; padding: 20px 0 20px 0; text-align: center;}
#board  .board .board_list td { font-family: 'NanumBarunGothicLight'; font-size: 14px; border-bottom: 1px solid #ccc; padding: 20px 0 20px 0; text-align: center;}
#board  .board .board_list tr:first-child~tr td:nth-child(2) {text-align: left;}

#board  .board .pagination { text-align: center; margin: 40px;}
#board  .board .pagination a { font-family: 'NanumBarunGothic'; font-size: 16px; color: #999; padding: 8px 16px;}
#board  .board .pagination .on { font-family: 'NanumBarunGothicBold'; color:#18256a;}

#board  .board  .board_view th { font-family: 'NanumBarunGothicBold'; font-size: 16px; border-bottom: 1px solid #9c9c9c; border-top: 1px solid #9c9c9c; padding: 15px 0; text-align: center; background-color: #f1f2f8 ;}
#board  .board  .board_view td { font-family: 'NanumBarunGothic'; font-size: 16px; border-bottom: 1px solid #ccc; padding: 15px 10px; text-align: left;}
#board  .board  .board_view th:first-child {border-left: none;}
#board  .board  .board_view tr:first-child~tr td:nth-child(2) {text-align: left;}
#board  .board  .board_view .view_line { padding: 0;}
#board  .board  .board_bt td { font-family: 'NanumBarunGothic'; font-size: 14px; border-bottom: 1px solid #ccc; padding: 10px 0 10px 10px; text-align: left;}

#board  .board  .list_box { width: 929px ; text-align: right;}
#board  .board  .list_box button { font-family: 'NanumBarunGothic'; font-size: 14px; border:2px solid #1e245f; width: 80px; padding: 5px 0; background-color: #1e245f; border-radius: 5px; color: white; margin: 0 10px 20px 0 ;} 

#board  .board .toplist { margin-top: 30px; width: 1140px; display: inline-block;}
#board  .board .toplist li { margin: 0 3px 0 0; float: left; background-color: #c7cae7; min-width:10%; padding: 8px; font-family: 'NanumBarunGothic'; font-size: 16px; text-align:center; }
#board  .board .toplist .on { background-color: #1e245f; color: white;}
#board  .board .toplist li:hover { background-color: #1e245f; color: white; }

#tem { width: 100%; margin: 10px auto; border: 1px solid; border-radius: 5px;}
#tem .tem { margin: 10px; font-family: 'NanumBarunGothic'; font-size: 16px;}
#tem .tem .tem_sel { display: inline-block; width: 100%; padding: 10px;}
#tem .tem li { float: left;}
#tem .tem li input { margin: 0 20px 0 0; padding: 4px 0; border: 1px solid gray; border-radius: 3px; }
#tem .tem li select { margin: 0 20px 0 0; padding: 4px 0; border: 1px solid gray; border-radius: 3px;}
#tem .tem .tem_sel button { padding: 4px 30px; font-family: 'NanumBarunGothic'; font-size: 16px; background-color: #18256a; color: white; border: 1px solid; border-radius: 5px;}  

#tem_order { width: 100%; margin: 10px auto; border: 1px solid; border-radius: 5px;}
#tem_order .tem { margin: 5px 5px 0 5px; font-family: 'NanumBarunGothic'; font-size: 16px;}
#tem_order .tem .tem_sel { display: inline-block; width: 100%; }
#tem_order .tem li { float: left;}
#tem_order .tem li input { padding: 7px; border: 1px solid gray; border-radius: 3px; }
#tem_order .tem li select { padding: 4px 0; border: 1px solid gray; border-radius: 3px;}

#company  .company_tit { width: 929px; font-family: 'NanumBarunGothic'; font-size: 30px; text-align: center; background-color: #f1f2f8; padding: 20px 0;}
#company  .company { width: 929px; margin: auto;}

#mypage  .mypage_tit { width: 929px; font-family: 'NanumBarunGothic'; font-size: 30px; text-align: center; background-color: #f1f2f8; padding: 20px 0;}
#mypage  .mypage { width: 929px; margin: auto;}

.lecture .lecture_cate .toplist { margin-top: 30px; width: 1140px; display: inline-block;}
.lecture .lecture_cate .toplist li { float: left; background-color: #f1f2f8; min-width:176px; padding: 10px 25px; font-family: 'NanumBarunGothic'; font-size: 18px; border:1px solid #c7cae7; text-align:center; }
.lecture .lecture_cate .toplist .on { background-color: #1e245f; color: white;}
.lecture .lecture_cate .toplist li:hover { background-color: #1e245f; color: white; }

.tableF1 { width: 100%; border:1px solid #1e245f;}
.tableF1 tr { margin: 10px 0;}
.tableF1 th { background-color: #c7cae7; padding: 10px; border-bottom: 1px solid #989898;}
.tableF1 td { color: black;}
.tableF1 th { text-align: center; font-family: 'NanumBarunGothic'; font-size: 14px;}
.tableF1 td { text-align: left; font-family: 'NanumBarunGothic'; font-size: 14px; padding:5px;}

.tableF2 { width: 100%;}
.tableF2 tr { margin: 10px 0;}
.tableF2 th { background-color: #c7cae7; padding: 10px; border: 1px solid #f1f2f8;}
.tableF2 td { color: black; padding: 10px; border: 1px solid #f1f2f8;}
.tableF2 th { text-align: center; font-family: 'NanumBarunGothic'; font-size: 14px;}
.tableF2 td { text-align: center; font-family: 'NanumBarunGothic'; font-size: 14px;}

.banner2 { background-color: #ffffff;}
.banner2 .video { width: 1140px; margin: auto;}
.banner2 img { margin: 40px 0;}

.no_box { background-color: #f1f2f8;}
.notice { width: 1140px; height: 280px; margin: auto;}
.notice .notice_m { width: 560px; height: 200px; float: left; background-color: white; border-radius: 20px; margin-top: 40px;}
.notice .notice_m .n_tit { font-family: 'NanumBarunGothicBold'; font-size: 20px; margin: 20px 0 20px 20px; color: #646464;}
.notice .notice_m .n_main li { height: 35px;}
.notice .notice_m .n_main span { font-family: 'NanumBarunGothic'; font-size: 15px; color: gray; margin-left: 10px;}
.notice .notice_m .n_main .date { float: right; margin-right: 10px;}
.notice .referen_m { width: 560px; height: 200px; float: right; background-color: white; border-radius: 20px; margin-top: 40px;}
.notice .referen_m .r_tit { font-family: 'NanumBarunGothicBold'; font-size: 20px; margin: 20px 0 0px 20px; color: #646464;} 
.notice .referen_m .r_main li { width: 80px; height: 80px; float: left; text-align: center; margin: 20px 25px 20px 30px;}
.notice .referen_m .r_main span { font-family: 'NanumBarunGothic'; font-size: 17px; line-height: 20px; }
.notice .referen_m .r_main img { margin-bottom: 10px;}  

.footer {clear: both; }
.footer_m { background-color: #f5f5f5;}
.footer .footer_inner { width: 1140px; margin: auto; height: 45px;}
.footer .footer_inner .footer_menu { float: right;}
.footer .footer_inner .footer_menu li { float: left;  font-family: 'NanumBarunGothic'; font-size: 14px;} 
.footer .footer_inner .footer_menu .inner_box { width: 60px; height: 15px; text-align: center; padding: 10px; margin: 5px 0 ;}
.footer .footer_inner .footer_menu .inner_select { width: 130px; height: 35px; font-family: 'NanumBarunGothic'; font-size: 14px; background-color: #c7cae7; border-radius: 5px; padding: 0 0 0 10px; margin: 5px 0;}

.footer .footer_info { width: 1140px; height: 200px; margin: auto;}
.footer .footer_info .addr { float: left; width: 400px; height: 180px;}
.footer .footer_info .addr_m { margin: 10px;}
.footer .footer_info .addr_m li { font-family: 'NanumBarunGothic'; font-size: 14px; color: gray; line-height: 25px;}

.footer .footer_info .cs { float: left; width: 300px; height: 180px;}
.footer .footer_info .cs .cs_c { margin: 10px 10px 10px 40px;}
.footer .footer_info .cs .cs_c .center { font-family: 'NanumBarunGothicBold'; font-size: 20px; margin-bottom: 10px;}
.footer .footer_info .cs .cs_c li { font-family: 'NanumBarunGothic'; font-size: 14px; color: gray; line-height: 25px;}

.footer .footer_info .fst { float: left; width: 400px; height: 180px;}
.footer .footer_info .fst .fst_m { margin: 10px 10px 10px 40px;}
.footer .footer_info .fst .fst_m li { margin-right: 10px; font-family: 'NanumBarunGothic'; font-size: 14px; color: gray; float: left; }
.footer .footer_info .fst .fst_m .st {  font-family: 'NanumBarunGothicBold'; font-size: 14px;}
.footer .footer_info .fst .fst_img { margin: 40px 10px 10px 40px;} 

.layer_detail{position: fixed;background: #fff;border: 1px solid #666;top: 50%;left: 50%;padding: 0 0 20px;width: 320px;display: none;margin: -100px 0 0 -160px;}
.layer_detail .l_tit{background: #1e245f;color: #fff;padding: 10px;font-family: "NanumBarunGothic", nbg, dotum, sans-serif;font-size: 16px;font-weight: bold;}
.layer_detail .l_tit .close{position: absolute; top: 10px; right: 8px; color:#fff;}
.layer_detail .l_cont{padding: 14px;text-align: center;line-height: 19px;font-size: 13px;border: 1px solid #dedede;margin: 20px 20px 10px;}
.layer_detail .btn_area{text-align: center;}


.evaluation .board { width: 1003px; margin: auto; text-align: center;}
.evaluation .top_tit { background-color: #000c52;}
.evaluation .top_tit .top_b { width: 1003px; margin: auto; text-align: center;}
.evaluation .top_tit h3 { font-family: 'NanumSquareRoundEB'; font-size: 50px; padding: 30px 0 10px 0; color: white;}
.evaluation .top_tit .board_tit {color: red;font-family: 'NanumBarunGothic'; font-size: 50px; }
.evaluation .top_tit .s_tit { font-family: 'NanumBarunGothic'; font-size: 16px; color: #f0f0f0; padding-bottom: 30px;}

.evaluation .board .main_s { font-family: 'NanumBarunGothicBold'; font-weight:bold; font-size: 20px; margin-top: 30px; color: #5b5b5b;}
.evaluation .board .ebox {}
.evaluation .board .ebox li { margin: 50px 120px; float: left; width: 200px; height: 180px; border-radius: 30px; background-color: #e0f5ff; border: 5px dashed blue;}
.evaluation .board .ebox .min_b { text-align: center; margin-top: 45px; padding: 10px;} 
.evaluation .board .ebox .min_b p { line-height: 25px; font-family: 'NanumSquareRoundB'; font-weight:bold; font-size: 16px; letter-spacing: 2px;}
.evaluation .board .ebox .min_b span { font-family: 'NanumSquareRoundB'; font-weight:bold; font-size: 16px; color: #2196f3;}

.evaluation .txt_b { width: 1003px; margin: 40px auto; padding: 35px 0; background-color: #fafbfc;}
.evaluation .ex { font-family: 'NanumBarunGothic'; font-size: 14px; color: #242424; line-height: 30px; padding-left: 10px;}

.evaluation .btn { width: 500px; margin: auto; text-align: center;}
.evaluation .btn .txt { font-family: 'NanumSquareRoundEB'; font-size: 40px; padding: 20px 30px; margin-bottom: 60px; background-color: #000c52; border-radius: 30px; color: white;}
.evaluation .btn .txt span { border: 7px solid orange; border-radius: 35px; padding: 5px;}

.evaluation .mid_b { background-color: #f3efff; margin-bottom: 40px; padding-bottom: 20px;}
.evaluation .mid_b h4 {  font-family: 'NanumSquareRoundEB'; font-weight:bold; font-size: 30px; padding-top: 20px;}
.evaluation .mid_b .text_b { width: 1003px; margin: auto; text-align: center;}
.evaluation .mid_b dl {display: inline-block; margin: 10px 20px;}
.evaluation .mid_b dd { width: 240px; float: left; font-family: 'NanumBarunGothicBold'; font-size: 14px; text-align: center; margin: 30px 40px 20px 40px;}
.evaluation .mid_b dd .m_tet { font-weight:bold; padding-top: 15px; margin-left: 35px; line-height: 25px;}
.evaluation .mid_b dd .m_tet2 { font-weight:bold; padding-top: 35px; margin-left: 35px;}
.evaluation .mid_b dd .m_tet3 { font-weight:bold; padding-top: 35px; margin-right: 40px;}
.evaluation .mid_b dd .m_tet4 { font-weight:bold; padding-top: 25px; margin-right: 50px;}
.evaluation .mid_b dd .un_t { font-weight:bold; margin-top: 10px; float: left; margin-left: 10px; color: #5b5b5b;}
.evaluation .mid_b dd .un_t2 { font-weight:bold; margin-top: 10px; color: #5b5b5b;}
.evaluation .mid_b dd span { color: red;}
.evaluation .mid_b .pointer {width: 200px;  height: 80px; position: relative; background: #a3a0fa;}
.evaluation .mid_b .pointer:after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 40px solid #f3efff; 
  border-top: 40px solid transparent; border-bottom: 40px solid transparent;}
.evaluation .mid_b .pointer:before { content: ""; position: absolute; right: -40px; bottom: 0; width: 0; height: 0;
  border-left: 40px solid #a3a0fa; border-top: 40px solid transparent; border-bottom: 40px solid transparent;}
.evaluation .mid_b .pointer2 {width: 200px;  height: 80px; position: relative; background: #e1a5fc; margin-left: 30px;}
.evaluation .mid_b .pointer2:after { content: ""; position: absolute; left: -40px; bottom: 0; width: 0; height: 0; border-right: 40px solid #e1a5fc; 
    border-top: 40px solid transparent; border-bottom: 40px solid transparent;}
.evaluation .mid_b .pointer2:before { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0;
    border-right: 40px solid #f3efff; border-top: 40px solid transparent; border-bottom: 40px solid transparent;}

.evaluation .choice { width: 1003px; margin: auto;}
.evaluation .choice table { width: 860px; margin: 60px auto ; font-weight:bold;}
.evaluation .choice th { height:80px; font-family: 'NanumBarunGothic'; font-size: 20px; border: 1px solid gray; text-align: center;vertical-align: middle; width: 200px; background-color: #f3efff;}
.evaluation .choice td { font-family: 'NanumBarunGothic'; font-size: 20px; border: 1px solid gray; padding: 20px;vertical-align: middle;}
.evaluation .choice .examsel { width: 100%; font-family: 'NanumBarunGothic'; font-size: 20px !important; height: 40px; border: none;}

.evaluation .choice .txt { width: 1003px; margin: auto; font-weight:bold; text-align: center; background-color: #f3efff;}
.evaluation .choice .txt p { padding: 20px; font-family: 'NanumBarunGothic'; font-size: 25px; line-height: 30px;}
.evaluation .choice .txt span { font-size: 25px;  color: red;}

.evaluation .choice .btn { margin: 60px auto; text-align: center;}
.evaluation .choice .btn button { background-color: #000c52; font-family: 'NanumBarunGothic'; font-size: 40px; padding: 20px 60px; border-radius: 20px; color: white; margin-bottom: 50px;}

#ExamPopup{display:none;position:fixed;height:100%;width:100%;z-index:2000;background-color:rgba(0,0,0,0);-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;transition:all 1s ease-in-out}
#ExamPopup .innerContent{height:100%;width:100%;position:absolute;margin:0 auto;background-color:rgba(0,0,0,1);-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}

#ExamPopup .exam { position:absolute;width: 880px; border: 10px dashed #6049ae;top:50px;left:50%; margin-left:-440px; text-align:center; background-color: #f3efff;}

#ExamPopup .exam .title { width: 860px; height: 70px; margin: 10px auto 0 auto; background-color: #c9b9ff;}
#ExamPopup .exam .title p { font-family: 'NanumBarunGothic'; font-size: 35px; font-weight:bold;}
#ExamPopup .exam .title span { font-family: 'NanumBarunGothic'; font-size: 35px; font-weight:bold;}
#ExamPopup .exam .title .time { float: right; color: #5513ab;}
#ExamPopup .exam .title .time p { font-size: 30px; padding: 12px 0px; color: #5513ab;}

#ExamPopup .exam .main_tit { width: 860px; margin: auto;}
#ExamPopup .exam .main_tit p { font-weight:bold;height: 20px; background-color: #f3efff; text-align: center; font-family: 'NanumBarunGothic'; font-size: 20px; padding: 15px; color: #525252; border-bottom: 5px solid #5513ab; margin-bottom: 20px;}

#ExamPopup .exam .main { width: 860px; margin: auto; background-color: #ffffff; position: relative;}
#ExamPopup .exam .main .pop_up { width: 860px; height: 550px; background-color: #ffffff; overflow:auto;}
#ExamPopup .exam .main .pop_up .ExamPage{ margin-bottom:50px;}
#ExamPopup .exam .main .bottom { width: 860px; height: 60px; text-align: center; position: absolute; bottom: 0; background-color: #f3efff; }
#ExamPopup .exam .main .bottom ul { display: inline-block;}
#ExamPopup .exam .main .bottom li { float: left; font-family: 'NanumBarunGothic'; font-size: 20px; margin: 20px; }
#ExamPopup .exam .main .bottom button { font-family: 'NanumBarunGothic'; font-size: 25px; margin: -10px; padding: 5px 15px; border-radius: 5px; border: 1px solid #f3efff; background-color: #6049ae; color: white;}


.dialog__action {
  border: 3px solid #333333;
  background: #f1f1f1;
  padding: 15px 20px;
  font-size: 1.1rem;
  text-transform: uppercase;
  display: block;
  -webkit-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.dialog__action:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus, .dialog__action:focus {
  outline: 0;
}
.dialog__action:active {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

.dialog {
  background: #fff;
  width: 350px;
  position: absolute;
  left: calc(50% - 175px);
  top: 0;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
  border: 2px solid #333333;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 180ms ease-in;
  transition: all 180ms ease-in;
}

@media (max-width:700px){
.dialog {
  background: #fff;
  width: 250px;
  position: absolute;
  left: calc(50% - 158px);
  top: 0;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
  border: 2px solid #333333;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 180ms ease-in;
  transition: all 180ms ease-in;
}
}

.dialog.dialog--active {
  top: 30%;
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
}
.dialog .dialog__close {
  font-size: 1.5rem;
  line-height: 1.5rem;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  padding: 15px;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.dialog .dialog__close:hover {
  color: #E74C3C;
}
.dialog .dialog__title {
  font-size: 18px;
  margin: 0;
  padding: 0 0 15px 0;
  border-bottom: 1px solid #333333;
}
.dialog .dialog__content {
  font-size: 16px;
  line-height: 30px;
  text-align:center;
}
.dialog .dialog__action {
  margin: 0;
  font-size: 1rem;
}