@charset "UTF-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css'); 
@import url('https://fonts.googleapis.com/css?family=Exo+2:200,300,400,500,600,700,800');

@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 100;
    src: local('Noto Sans Thin'), local('NotoSans-Thin'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-100.eot),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-100.eot?#iefix) format('embedded-opentype'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-100.woff) format('woff'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-100.woff2) format('woff2'),		
	url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-100.svg) format('svg');
}

@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans Light'), local('NotoSans-Light'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-300.eot),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-300.eot?#iefix) format('embedded-opentype'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-300.woff) format('woff'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-300.woff2) format('woff2'),		
	url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-300.svg) format('svg');
}
@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans Regular'), local('NotoSans-Regular'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-regular.eot),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-regular.eot?#iefix) format('embedded-opentype'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-regular.woff) format('woff'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-regular.woff2) format('woff2'),		
	url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-regular.svg) format('svg');
}

@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans Medium'), local('NotoSans-Medium'),
    url(application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-500.eot),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-500.eot?#iefix) format('embedded-opentype'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-500.woff) format('woff'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/otf/NotoSansKR-Medium-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans Bold'), local('NotoSans-Bold'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-700.eot),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-700.eot?#iefix) format('embedded-opentype'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-700.woff) format('woff'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-700.woff2) format('woff2'),		
	url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-700.svg) format('svg');
}

@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 900;
    src: local('Noto Sans Black'), local('NotoSans-Black'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-900.eot),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-900.eot?#iefix) format('embedded-opentype'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-900.woff) format('woff'),
    url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-900.woff2) format('woff2'),		
	url(https://www.innoedu.kr/application/views/Client/innoedu/Images/fonts/noto-sans-kr-v11-latin_korean-900.svg) format('svg');
}


/*
	Document   : Style
	Created on : 2018. 11. 27
	Author     : SW
*/
html, body {background: #fff;}


/*공통*/
#wrap{min-width:1361px; position: relative;}
fieldset legend, table caption {display:none;}


.container-fluid {padding-left:0px; padding-right:0px;}

/*Quick Menu*/
#aside{position:fixed; top:0; right:0; width: 102px; height:100%; margin-top:48px; z-index:101; transition-duration: 0.4s;  }
#aside.banner_on{margin-top:96px;}
#aside .q_menu{background: #0b2239 url('../Images/newcommon/q_icon01.png') no-repeat center 25px; height:104px; line-height:130px; text-align: center; color:#fff; cursor: pointer; transition: .3s ease;border-left:1px solid #0b2239; }
#aside .q_menu:hover{background: #49d295  url('../Images/newcommon/q_icon01_on.png') no-repeat center 25px;; color:#000; font-weight:500; border-left:1px solid #49d295;}

#aside .q_list{width:102px; height:calc(100% - 47px); background:#fff;   }
#aside ul{width:102px; height: calc(100% - 101px);}
#aside ul li{height:25%; text-align: center; border-bottom:1px solid #666; width:100%; display: table; transition-duration: 0.4s; }
#aside ul li a{display: block; height: 100%;}
/*
#aside ul li.q_con01{background: #0b2239 url('../Images/newcommon/aside01.png') no-repeat center center; border-top:1px solid #666; }
#aside ul li.q_con01:hover{background:#49d295 url('../Images/newcommon/aside01_on.png') no-repeat center center;}
*/
#aside ul li.q_con01{background: #0b2239 url('../Images/newcommon/aside05.png') no-repeat center center; border-top:1px solid #666; }
#aside ul li.q_con01:hover{background:#49d295 url('../Images/newcommon/aside05_on.png') no-repeat center center;}
#aside ul li.q_con02{background: #0b2239 url('../Images/newcommon/aside02.png') no-repeat center center; }
#aside ul li.q_con02:hover{background:#49d295 url('../Images/newcommon/aside02_on.png') no-repeat center center;}
#aside ul li.q_con03{background: #0b2239 url('../Images/newcommon/aside03.png') no-repeat center center; }
#aside ul li.q_con03:hover{background: #49d295 url('../Images/newcommon/aside03_on.png') no-repeat center center; }
#aside ul li.q_con04{background: #65a8f6; display: none;}
#aside ul li.q_con04:hover{background: #49d295; }
#aside ul li.q_con04 a{background: url('../Images/newcommon/aside04_re.png') no-repeat center center; }
#aside ul li.q_con04:hover a{background:url('../Images/newcommon/aside04_re.png') no-repeat center center; }
#aside ul li.q_con05{background: #0b2239 url('../Images/newcommon/aside06.png') no-repeat center center; }
#aside ul li.q_con05:hover{background:#49d295 url('../Images/newcommon/aside06_on.png') no-repeat center center;}
#aside ul li.q_con07{background: #0b2239 url('../Images/newcommon/aside07.png') no-repeat center center; }
#aside ul li.q_con07:hover{background:#49d295 url('../Images/newcommon/aside07_on.png') no-repeat center center;}

/* userArea */
/*
.userArea {width:100%; background: #243045; }
.userArea .userInner{height:45px;  width:1200px; margin: 0 auto; overflow:hidden;}
.userArea .userInner #userBox{float:right;}
.userArea .userInner #userBox a{display:block;}
.userArea .userInner div.pw, .userArea .userInner div.id{float:right; margin-right: 8px; line-height:45px }
.userArea .userInner div .idpw{background:#fff; border:0px; border-radius: 3px; ; width:130px; height:27px; text-indent: 10px; color:#222; }
.userArea .userInner .userBox .btn_login.btn01{float:right; cursor: pointer; margin:9px 8px 0 0; padding:5px 19px; background: #49d295;}
.userArea .userInner .userBox fieldset legend{display:none;}
.userArea .userInner .userBox .util_area{overflow:hidden;}
.userArea .userInner .userBox .userLogin, .util_area{float:right;}
.userArea .userInner p.id{ line-height:45px; color:#fff; margin-right:8px;}
.userArea .userInner p.id strong{font-weight:600;} 
*/
input.idpw[type="text"]::-webkit-input-placeholder {color:#222;}
input.idpw[type="text"]:-input-placeholder {color:#222;}
input.idpw[type="text"]:-ms-input-placeholder {color:#222;}
input.idpw[type="text"]::-moz-input-placeholder {color:#222;}
input.idpw[type="password"]::-webkit-input-placeholder {color:#222;}
input.idpw[type="password"]:-input-placeholder {color:#222;}
input.idpw[type="password"]:-ms-input-placeholder {color:#222;}
input.idpw[type="password"]::-moz-input-placeholder {color:#222;}
/****************************************************/
html, body {font-size:14px; font-family:  'noto sans kr', 'Noto Sans Korean';}
input {border:none; box-shadow: none;}
a, input, button {transition: .2s ease; text-decoration: none;}
a:hover, a:focus, a:active {text-decoration: none; }
ul li, ol li, ul, ol {list-style: none; margin:0; padding:0;}
h1, h2, h3, h4, h5 ,h6, p, label {margin:0; padding:0; font-weight: normal;}
h2 { font-size: 3.143rem;}
h3 { font-size: 1.95rem; font-weight: 500; color:#111; letter-spacing: -0.025em;}
h4 {font-size: 44px; font-weight: 400; color: #000; line-height: 100%;  letter-spacing: -0.025em }
.input_type01 {background:#fff; border:none; border-radius: 3px; text-indent: 10px; color:#222; display: inline-block; }
.btn01 { background: #c6cedc;border: none;  border-radius: 3px; color: #243045; text-align: center;  border-spacing: 0;  display: inline-block; font-size:11px; line-height: 26px; font-weight: 500;}


input:checked[type="checkbox"]{background-color:#fff;-webkit-appearance:checkbox;}
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="search"], 
input[type="image"], 
input[type="tel"], 
button, 
select, 
textarea{-webkit-border-radius:0;-webkit-appearance:none;}


.inputContainer { position: relative; float: left; }
.formError { position: absolute; top: 300px; left: 300px; display: block; z-index: 115000; cursor: pointer; }
.ajaxSubmit { padding: 20px; background: #55ea55; border: 1px solid #999; display: none }
.formError .formErrorContent { left:-50px; background: #4a90e2; position:relative; z-index:115001; color: #fff; width: 170px; font-size: 11px; padding: 4px 10px 4px 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.greenPopup .formErrorContent { background: #33be40; }
.blackPopup .formErrorContent { background: #393939; color: #FFF; }
.formError .formErrorArrow { width: 15px; margin: -2px 0 0 150px; position:relative; z-index: 115006; display:none;}
.formError .formErrorArrowBottom { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin: 0px 0 0 12px; top:2px; }
.formError .formErrorArrow div { border-left: 2px solid #ddd; border-right: 2px solid #ddd; box-shadow: 0 2px 3px #444; -moz-box-shadow: 0 2px 3px #444; -webkit-box-shadow: 0 2px 3px #444; font-size: 0px; height: 1px; background: #ee0101; margin: 0 auto; line-height: 0; font-size: 0; display: block; }
.formError .formErrorArrowBottom div { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
.greenPopup .formErrorArrow div { background: #33be40; }
.blackPopup .formErrorArrow div { background: #393939; color: #FFF; }
.formError .formErrorArrow .line10 { width: 15px; border: none; }
.formError .formErrorArrow .line9 { width: 13px; border: none; }
.formError .formErrorArrow .line8 { width: 11px; }
.formError .formErrorArrow .line7 { width: 9px; }
.formError .formErrorArrow .line6 { width: 7px; }
.formError .formErrorArrow .line5 { width: 5px; }
.formError .formErrorArrow .line4 { width: 3px; }
.formError .formErrorArrow .line3 { width: 1px; border-left: 2px solid #ddd; border-right: 2px solid #ddd; border-bottom: 0 solid #ddd; }
.formError .formErrorArrow .line2 { width: 3px; border: none; background: #ddd; }
.formError .formErrorArrow .line1 { width: 1px; border: none; background: #ddd; }


#policy_auth_alert {z-index:9999;}
#shadow_login_alert {z-index:998;}
#pass_auth_alert { z-index:999;}
#marketing_agree_alert {z-index: 9998;}

.b-modal {opacity: 0.8 !important;}
#marketing_agree_alert,
#policy_auth_alert ,
#shadow_login_alert,
#pass_auth_alert { background:#fff; display:none;  }

.r_pop_tit { background: #243045; color:#fff; padding: 1rem 25px; }
.r_pop_tit h2{ display: inline-block; font-size: 1.85rem; }
.r_pop_textarea { color: #787878; line-height: 180%; border: 1px solid #ccc; border-radius: 6px ; overflow-y:auto; width :94%; margin:20px auto 0; padding: 15px 24px; font-size:1.15rem;}
.r_pop_subtit {border: 1px solid #ccc; background :#edf1f7; width: 94%; margin: 15px auto; padding: 15px; font-size: 1.15rem;}
.r_pop_shdow_tb_wrap { max-height: 350px; overflow: auto;}
.r_pop_shdow_tb {border: 1px solid #ccc; width:94%; vertical-align: middle; margin: 0 auto 20px; }
.r_pop_shdow_tb tr th {background :#edf1f7; border: 1px solid #ccc;  padding: 10px 0; text-align: center;}
.r_pop_shdow_tb tr td {border: 1px solid #ccc; padding: 8px 15px;}
.r_pop_shdow_tb tr td.show_index, .r_pop_shdow_tb tr td.show_date {text-align: center; color:#787878;}

.r_pop_tb {border: 1px solid #ccc; width:94%; vertical-align: middle; margin: 0 auto 20px;}
.r_pop_tb tr td {border: 1px solid #ccc; padding: 10px 15px;}
.r_pop_tb tr th {width: 32%; background :#edf1f7; border: 1px solid #ccc;  padding: 16px 0; text-indent: 22px;}
.r_pop_tb tr td input {width: 99%; padding: 3px 3%;  font-size: 1rem; border:1px solid #ccc;  border-radius: 4px;}


.r_pop_chk_area {width :94%; margin:0 auto;}
.r_pop_chk_area label {font-size: 1.15rem; color:#222; vertical-align: middle; padding: 10px 0;}
.r_pop_chk_area label input {margin-right: 8px; margin-bottom: 7px;}
.r_pop_btn_area {text-align: center;}

.r_pop_btn {font-size:1.25rem; color:#fff; background: #243045; padding: 0.75rem 3rem; display: inline-block;}
.r_pop_none_btn {font-size:1.25rem; color:#787878; background: #ccc; padding: 0.75rem 3rem; display: inline-block;}

.b-close{ cursor:pointer; position:absolute; left:240px; top:110px;}



.m0 {margin: 0 !important;}

.wd20 {width:20%;}
.wd32 {width:32%;}
.wd33 {width:33%;}
.wd49 {width:49%;}
.wd50 {width:50%;}

.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}

.mt0 {margin-top:0 !important;}
.mt15 {margin-top: 15px !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;}

.pt0 {padding-top:0 !important;}
.pt15 {padding-top: 15px !important;}
.pt30 {padding-top: 30px !important;}
.pt35 {padding-top: 35px !important;}
.pt40 {padding-top: 40px !important;}
.pt45 {padding-top: 45px !important;}
.pt50 {padding-top: 50px !important;}
.pt55 {padding-top: 55px !important;}
.pt60 {padding-top: 60px !important;}



.pl-0  {padding-left:0;}
.pr-0  {padding-right:0;}

.bl_c {border-left: 1px solid #ccc;}
.br_c {border-left: 1px solid #ccc;}

/*color*/
.bg_li_green {background: #49d295;}

.red{color:#ff4d5f !important;}
.gray{color:#ccc;}
.yellow{color:#ffdf00;}
.orange{color:#ff6600;}
.green{color:#45ac6e;}
.inndi_puple{color:#6578ff;}
.bold{font-weight:600;}
.blue{color:#0058ff !important;}
.c_ligreen{color:#07d3aa;}
.c_eligrenn{color:#18fbbc;}


/*btn*/
.btn02{border-radius: 16.5px; width: 105px; padding:6px 0; border: 1px solid #ccc; display:inline-block; text-align: center; font-size:13px; color:#444; font-weight:400; margin:5px auto; transition-duration: 0.2s;}
.btn02:hover{background: #49d295; }
.btn03{border-radius: 3px; background:#0b2035; color:#fff; font-size:15px; display: inline-block; width:139px; height:50px; margin:0 auto; text-align: center; line-height: 50px; transition-duration: 0.3s; cursor : pointer;}
.btn03:hover{color:#49d295;}
.btn04{min-width: 86px; height:34px; line-height: 34px; color:#fff ; font-size:13px; display: block ; text-align: center ; background: #0b2239; padding:0 18px; border-radius: 3px;}
.btn04_off{min-width: 86px;height:34px ; line-height: 34px; color:#fff; font-size:13px ; display: block ; text-align: center ; background: #787878 ; padding:0 18px; border-radius: 3px;}

.btn05{border-radius: 16.5px; width: 119px; height:24px; border: 1px solid #ccc; display:block; text-align: center; font-size:13px; color:#444; font-weight:400; margin:5px auto; transition-duration: 0.3s; background: url('../Images/newcommon/btn02.png') no-repeat center center;}
.btn05:hover{background: #0b2239 url('../Images/newcommon/btn02_on.png') no-repeat center center;}
.btn06{border-radius: 16.5px; width: 119px; height:24px; border: 1px solid #ccc; display:block; text-align: center; font-size:13px; color:#444; font-weight:400; margin:5px auto; transition-duration: 0.2s; background: url('../Images/newcommon/btn01.png') no-repeat center center;}
.btn06:hover{background: #0b2239 url('../Images/newcommon/btn01_on.png') no-repeat center center;}

.btn07{border-radius: 16.5px; width: 105px; padding:6px 0; display:block; text-align: center; font-size:13px; color:#fff  ; font-weight:400; margin:5px auto; transition-duration: 0.2s; background:#0b2239 ; cursor: pointer;}
.btn07:hover{background: #49d295; color:#0b2239; }

.btn08{border-radius: 16.5px; width: 105px; padding:6px 0; display:block; text-align: center; font-size:13px; color:#fff  ; font-weight:400;transition-duration: 0.2s; background:#0b2239 ;}
.btn08:hover{background: #49d295; color:#0b2239; }

.btn09{background: #070e0f; color:#fff; width: 156px; height:38px; line-height: 38px; display: block; font-size: 15px; font-weight: 400; margin: 0 auto; letter-spacing: -0.5px; transition-duration: 0.3s; }
.btn09:hover{background: #ededed; color:#070e0f;}

.btn10{color:#222; display: inline-block; font-size: 14px; font-weight: 400; letter-spacing: -0.5px; border:1px solid #222; padding: 8px 16px; transition-duration: 0.3s; line-height:125%;}
.btn10:hover {background:#0b2239; color:#37ea9a ; }

.btn11{border-radius: 16.5px; width: 105px; padding:6px 0; border: 1px solid #555; display:block; text-align: center; font-size:13px; color:#222; font-weight:400; transition-duration: 0.2s;}
.btn11:hover{background: #49d295; border: 1px solid #49d295;  }

.btn12{border-radius: 19.5px; width: 100%; height:39px; border: 1px solid #ccc; display:block; text-align: center; font-size:13px; color:#444; font-weight:400; margin:5px auto; transition-duration: 0.4s; background: url('../Images/newcommon/btn12.png') no-repeat center center;}
.btn12:hover{background: #0b2239 url('../Images/newcommon/btn12_on.png') no-repeat center center;}

.btn13 {display:inline-block; background: #0b2239;  color: #fff;  border: none; height: 28px; padding: 0 19px;  cursor: pointer;  border-radius: 3px; font-size:13px; line-height: 28px; }
.btn13:hover {background: #0b2239 ; color:#0b2239;}

.btn14 {display:inline-block; background: #0b2239;  color: #fff;  padding: 15px 35px;  cursor: pointer;  border-radius: 3px; box-sizing: border-box; min-width: 120px; border:none; font-size:14px; font-weight: 400; line-height:100%;}
.btn14_off{display:inline-block; background: #a4a4b3;  color: #fff;  padding: 15px 35px;  cursor: pointer;  border-radius: 3px; box-sizing: border-box; min-width: 120px; border:none; font-size:14px; font-weight: 400; line-height:100%;}
.btn14:hover {color:#49d295; transition-duration: 0.3s;}

.login_mob_btn{border-radius: 3px; background:#0b2035; color:#fff; font-size:1.125rem; display: inline-block; width:100%; height:50px; margin:0 auto; text-align: center; line-height: 50px; transition-duration: 0.3s; cursor : pointer;}
.login_mob_btn:hover{color:#49d295;}

.join_btn {border-radius: 2.5rem; color:#222; border:1px solid #0b2035; font-size:1.125rem; display: inline-block; width:100%; height:50px; margin:0 auto; text-align: center; line-height: 50px; transition-duration: 0.3s; cursor : pointer;}


.pay_btn{border-radius: 3px; background:#0b2035; color:#fff;  display: inline-block;  text-align: center; transition-duration: 0.3s; cursor : pointer; box-shadow: none; border:1px solid #0b2035 ; padding: 1rem 2.75rem ; min-width:135px; margin:0 4px;}
.pay_btn:hover{color:#49d295;}

.pay_btn_dis {border-radius: 3px;background:#fff; color:#aaa; border:1px solid #aaa; display: inline-block;  text-align: center; transition-duration: 0.3s; cursor : pointer; box-shadow: none;  padding: 1rem 2.75rem ;  min-width:135px; margin:0 4px;}


/*top_section*/
#topsection {background: #243045;   padding: 0.8rem 125px;  }
.goSiteWrap {display: flex; gap: 16px; min-height: 26px; align-items: center}
.goSiteWrap > a {color: #fff; opacity: 0.8;font-size: 14px;}
.goSiteWrap > a::before {content: '·'; padding-right: 5px;}

.outlogin_style {height: 26px; line-height: 26px; }
.outlogin_style input {height:100%;  line-height: 26px;  vertical-align: middle; text-align: center; float:right; padding: 0 0 0 8px; margin: 0 4px 0 0; font-size:12px;} 
.outlogin_style a {height:100%;  line-height: 26px;  vertical-align: middle; text-align: center; float:right; padding: 0 20px; margin: 0 4px 0 0;} 
.outlogin_style input {text-align: left; width: 130px; }
.outlogin_style input.login_btn {text-align: left; width: auto; padding: 0 20px;}
.id {color:#bac8e1; text-align: right; padding: 0 15px 0 0 ; letter-spacing: 0;}
.id strong {font-weight: 500; color:#eef1f7; padding-right: 4px;  letter-spacing: 0.05em;}
/*nav_section*/
#gnb_wrap {border-bottom:1px solid #ccc;}



/*lgoin*/
.login_container { padding-top: 6.5rem; }
.login_container .login_tit {text-align: center; }
.login_container .login_tit h1 {color:#222; font-weight: 600; }
.login_container .loginform {margin-top: 30px}
.login_container .loginform input {min-height: 46px;}
.go_find_wrap {text-align: center; margin-top: 25px; color:#5f5f5f;}
.go_find_wrap a {color:#5f5f5f;}
.go_find_wrap a:hover {color:#111; font-weight: 500;}


/*footer*/
#footer_wrap {background: #3e3e4c; position: relative; z-index: 100;}
.f_nav {border-bottom: 1px solid #666670;}
.f_nav ul { padding: 12px 0; overflow: hidden;}
.f_nav ul li{float: left; font-size:13px; font-weight: 300; }
.f_nav ul li a{color:#d8d8d9; }
.f_nav ul li.nav_bur{color:#67676b; padding:0 10px;}

.footer .f_left p { font-size: 13px; line-height: 20px;  color: #aaa;	margin-bottom: 6px;}
.f_right .select-selected {border:1px solid #aaa;  background-color: #3e3e4c;  color: #aaa;  padding: 12px 16px; }
.f_right .select-selected:after { position: absolute; content: ""; top: 13px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: transparent transparent #aaa transparent;}
.f_right .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 13px;  right: 10px;}
.f_right .select-items div{  color: #aaa;  padding: 12px 16px;  border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer;}
.f_right .select-items { border:1px solid #aaa;  position: absolute;  background-color: #3e3e4c;  bottom: 43px;  left: 0;  right: 0;  z-index: 99; }
.f_right .select-hide {  display: none;}
.f_right .select-items div:hover, .f_right .same-as-selected { background-color: rgba(0, 0, 0, 0.1);}
.sel_g{text-align:left; position: relative; width:231px; height:36px; font-size:14px; color:#aaa; line-height:24px; background: #3e3e4c url('../../images/common/bullet05.png') no-repeat 210px 50%; background-color:#3e3e4c; border:1px solid #ccc; cursor:pointer; z-index:98;}
.sel_g>label{position: absolute; top:0;left:0; width:100%; height:36px;  color: #aaa; z-index: 2; line-height:36px; padding-left:14px;}
.sel_g select.sel{ position:absolute; top:1px; left:0; width:100%; height:36px; line-height:36px; border:0; opacity:0;  background:#3e3e4c; cursor:pointer; z-index:3; color: #aaa; padding: 0 0 0 10px; filter:alpha(opacity=0); -webkit-appearance: none;  -moz-appearance: none; appearance: none;	font-size:14px; 	outline-width:0; }
.sel_g select > option{ min-height:1.5em !important; }
.sel_g.foot{position:relative; width:231px;  background:#f8f7f7; border:1px solid #aaa;  background-color: #3e3e4c; }
.sel_g.foot:after{ position: absolute; content: ""; top: 12px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: transparent transparent #aaa transparent;}

.f_left{ float:left; widh:70%;}
.f_right {float:right;}
.f_right .f_sns{width:231px;}
.f_right .f_sns ul {overflow:hidden; width:231px; padding:14px 0 0 0;}
.f_right .f_sns ul li{float:left;}
.f_right .f_sns ul li.medi_news{margin:0 14px 0 0; }
.f_right .f_sns ul li.sns{margin:0 8px 0 0; }

/*common class*/
.img_wd100 img {width:100%; }
.mb_v_bur {width:2px; height : 33px ; background: #898989; margin:28px auto; }


/*sub layout*/
.sub_vis{text-align: center; padding: 4.2% 0 ;}
.sub_vis h2{font-weight:400; color:#fff; line-height:150%; }
.sub_vis strong{color:#dedfdf; font-weight:100; letter-spacing: 0.5em; }

/*sub location control*/
.sub_location{width:100%; border-bottom:1px solid #ccc; }
.inner_location ul{display:inline-block;}
.inner_location ul li{float:left; border-right: 1px solid #ccc;}

.inner_location ul li a{display:block; line-height: 52px;}
.inner_location ul li a img{padding: 0 21px;}

.inner_location .dropdown {float: left;  }
.inner_location .dropdown .dropbtn {text-align: left; font-size: 14px; border: none;  color: #787878; padding: 16px 21px;  background-color: inherit; margin: 0; min-width:212px; background:url(../Images/newcommon/bullet02.png) no-repeat 93% center; transition-duration: 0.2s;}
.inner_location .dropdown.depth2 .dropbtn{color:#07ba4f;}
.dropdown-content {display: none; position: absolute; background-color: #f9f9f9; min-width: 212px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 99;}
.dropdown-content a {float: none; color: #222;  padding: 0 20px; display: block; text-align: left;}
.dropdown:hover .dropbtn, .inner_location .dropdown.depth2:hover .dropbtn {background:#0b2239 url(../Images/newcommon/bullet03.png) no-repeat 93% center; color: #fff; }
.dorpdown_active{background:#0b2239 url(../Images/newcommon/bullet03.png) no-repeat 150px center !important; color: #fff !important; }
.dropdown-content a:hover { background-color: #ddd; color: #0b2239 ; }

/*sub_contant*/
#sub_wrap {margin-top : 60px;}
#sub_wrap h3{ border-bottom: 2px solid #898989; line-height: 220%;}
.sub_top_section01 {text-align: center; padding: 0 0 0 0 ; }


/*
.subtit_area h4{font-size:58px; color:#000; letter-spacing: -0.1px; font-weight:500; line-height:100%; display: block; margin:0 0 15px 0;}
*/


@media (min-width: 1230px) {
	#sub_wrap {min-height: 35vh;}	
	#sub_wrap.non_subvis {min-height: 55.4vh;}
	.container {width: 1230px;}
	.col-lg-container,
	.nav_wrap {width: calc( 100% - 250px); margin:0 auto;}	
	.inner_location { height:52px;}
	.footer {padding: 24px 0 57px 0;}	
	
	
}

@media (min-width: 992px) {
	#logoutwrap, #loginwrap  {min-height: 61.7vh;}
	.bl-md-c{border-left:1px solid #ccc;}
	.br-md-c{border-right:1px solid #ccc;}
	.container.login_container {width: 865px;}
}

@media (min-width: 768px) {
	#pass_auth_alert  {width:640px; height:350px ; font-size: 1rem;}
	#policy_auth_alert {width:640px; height:478px ; font-size: 1rem;}
	#shadow_login_alert {width:820px; height:600px ; font-size: 1rem;}
	#marketing_agree_alert {width:640px; height:250px ; font-size: 1rem;}
	.b-close{ cursor:pointer; position:absolute; left:240px; top:110px;}
	.r_pop_textarea { max-height: 308px; }
	
}



@media (min-width: 472px) {
	
}

@media (max-width: 1445px) {
	#aside {display: none;}
	.col-lg-container,
	.nav_wrap {width: calc( 100% - 80px); margin:0 auto; }
	.userarea_wrap {padding: 0.8rem 40px 0.8rem 0;}
}

@media (max-width: 1240px) {
	.userarea_wrap {padding: 0.8rem 40px 0.8rem 0;}
	/*a.main-links, .dropdown-heading{font-size:1rem; padding: 40px 12px;}*/
	
}

/*
--------------------------------------------------------------------------------------------------
*/
/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (max-width: 1200px) { 
	.inner_location .dropdown .dropbtn { font-size: 1.125rem; }
}


@media (max-width: 1150px) { 	
	/*footer*/	
	.f_nav ul { display:inline-block; overflow: auto; text-align: center;}
	.f_nav ul li { display:inline-block; float:none;}
	.f_left{ float:none; widh:100%; text-align: center; padding: 2rem 0 1rem 0;}
	.f_left p {width: 94% ; margin: 0 auto; }
	.f_right {float:none; width:230px; margin:0 auto; text-align: center; padding: 0 0 3rem 0;}
	.sel_g.foot {margin: 0 auto;}
}




@media (max-width: 992px) { 
	.mob-bb-c {border-bottom: 1px solid #ccc;}
	.sub_vis {background-size: cover !important; padding: 3.5rem 0;}
	.img-md-w100 img {width: 100%;}
	.img-md-w90 img {width: 90%;}
	#gitple-launcher-tooltip {z-index: 99 !important;}
	
	.r_pop_tit { background: #243045; color:#fff; padding:15px; }
	.r_pop_tit h2{ display: inline-block; font-size: 1.2rem; }

}

@media (max-width: 832px) { 
	
	#shadow_login_alert {width: 94%; height:88vh ; min-width:auto; margin-top: 15px; }
	.r_pop_shdow_tb_wrap {max-height: 59vh;}
}

@media (max-width: 768px) { 
	h2{font-size: 3rem;}
	h3{font-size: 2.5rem;}
	h4{font-size: 2.5rem; font-weight: 500;}
	#sub_contents h3{ text-align: center;  border-bottom: none; line-height: 1;}
	#logoutwrap, #loginwrap {min-height: 52vh;} 
	.login_container {padding-top: 5rem ; padding-bottom: 5rem; }
	.container { width: 94%; margin: 0 auto ;}
	.nav_wrap, .col-lg-container{ width: 100%; }
	
	#marketing_agree_alert,
	#pass_auth_alert  {width: 94%; height:auto; min-width:auto; margin-top: 15px;}
	#marketing_agree_alert #content,
	#pass_auth_alert #content {padding: 0 0 28px 0 ;}
	
	#policy_auth_alert {width: 94%; height:88vh ; min-width:auto; margin-top: 15px; }
	.r_pop_textarea{ max-height: 62vh;}
	.r_pop_tb tr th {display: none;}
	.r_pop_tb tr td strong {padding: 0 0 10px 0 ;}
	
	/*fotter*/
	.f_nav ul { display:inline-block; overflow-x: auto; white-space: nowrap ; -ms-overflow-style: none;  scrollbar-width: none; } 	
	.f_nav ul::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/} 
	.f_nav ul li:first-child a{padding: 0 0 0 1rem;}

	
	
	/*sub top area */
	.bl_c{display: none;}
	.sub_location {border-bottom: none;}	
	.inner_location ul  {width:100%;}
	.inner_location ul li{width:50%; border-bottom: 1px solid #ccc;}
	.inner_location ul li:last-child {border-right: none;}	
	.inner_location .dropdown .dropbtn,
	.inner_location .dropdown{width:100%;}
	.inner_location .dropdown .dropbtn {min-width: auto; }
	.dropdown-content {width:100%;}
	#sub_wrap {margin-top : 40px;}
	
	.btn03 {width:100%; font-size:1.25rem; height:auto; line-height: 100%; padding: 1.5rem 0; }
	#marketing_agree_alert .r_pop_btn_area input {width:46%; padding : 0.75rem 0; display: inline-block;}
}

@media (max-width: 471px) { 
	html, body {font-size: 14px;}
	h2{font-size: 2.5rem;}
	h3{font-size: 1.85rem;}
	h4{font-size: 1.85rem;}
	.inner_location ul li:first-child, .inner_location ul li:nth-child(2) {display: none;}
	.inner_location ul li:last-child {width:100%;}
	.sub_vis {padding:1.85rem 0 ;}
	.df_btn_td{display:none;}
	.r_pop_shdow_tb_wrap {max-height: 41vh;}
	.r_pop_subtit {font-size: 0.85rem;}
	.r_pop_shdow_tb tr th {font-size: 13px; text-align: center; }
	.r_pop_shdow_tb tr td.show_index, .r_pop_shdow_tb tr td.show_date {font-size: 13px; text-align: center;}
	.r_pop_chk_area label {font-size: 0.85rem;}
	
}

@media (max-width: 365px) {
	.container {width: 96%;}	
	
}

.btm_common_container {text-align: center; max-width: 1100px; width: 100%; margin: 0 auto 8.85%;}
.btm_common_container img {width: 100%;}
.btm_common_btn_wrap {display: flex; flex-wrap: wrap; }
.btm_common_btn_wrap a {width: 50%;}
.pc_img, .mobile_img {display: none;}
@media (min-width: 992px) { 
    .pc_img {display: block;}  
} 
@media (max-width: 992px) { 
    .mobile_img {display: block;}  
    .btm_common_btn_wrap {padding:0 4.03%; }
} 


/*국민내일배움카드 과정신청 페이지 */
#StudyHrdCardInfoForm h5{ font-size: 1.5rem; color: #222; font-weight: 600; line-height: 180%; padding-bottom: 5px; }
#StudyHrdCardInfoForm .payInfoCon {padding-bottom: 36px;}

.modalArea { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); } 
.modalCon { position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); background-color: #fefefe; border-radius: 10px; }
.modalCon > div {padding: 1rem 1.6rem;}
.modalCon .modalHead { background: #243045; color: #fff; border-radius: 10px 10px 0 0;  }
.modalCon .modalHead > strong {font-size: 20px; font-weight: 500;}
.modalCon .modalBody {max-height: 80vh; overflow-y: auto; line-height: 168%;}
.modalCon .modalBody strong {font-size: 16px; font-weight: 500; padding-top: 16px; padding-bottom: 6px; display: block;}
.modalCon .modalBody strong:first-of-type {padding-top: 0;}
.modalCon .modalBody p {padding: 3px 0; line-height: 135%; font-size: 15px; color: #6f6f6f;}
.modalCon .modalBody .dash { padding-left: 14px; position: relative; }
.modalCon .modalBody .dash::before {content: '-'; position: absolute; top:3px; left:0;}

.modalCon .modlaFooter {display: flex; align-items: center; justify-content: center; gap:5px; padding-bottom: 1.6rem; }
.modalCon .modlaFooter a, 
.modalCon .modlaFooter button {all:unset; cursor: pointer; background:#49d295; color: #243045 ;font-size: 15px; display: flex; align-items: center; justify-content: center; height: 40px; min-width: 170px; font-weight: 600; border-radius: 4px; } 

.productCard {position: relative; overflow: hidden; border-radius: 8px; }				
.productCard > div { padding: 0  1.6rem; }
.productCard .card {display: flex; flex-direction: column; width: 100%; border: 1px solid #ddd; border-bottom: 1px solid #ddd; padding-top: 1.6rem; padding-bottom: 1rem; overflow: hidden; border-radius: 8px 8px 0 0; }				
.productCard .card h6 {font-size: 22px; font-weight: 600; color: #45ac6e; line-height: 135%;}
.productCard .card > p:first-of-type {font-size: 16px; line-height: 140%;  padding: 8px 0;  }
.productCard .card > p > span {font-weight: 500; color: #8f8f8f;}
.productCard .card > p > b {color: #5f5f5f; letter-spacing: -0.025em; }

.productCard .payWay {display: flex; flex-direction: row;  padding-top: 1.8rem; padding-bottom: 1.8rem; border-left: 1px solid #ddd; border-right: 1px solid #ddd}
.productCard .payWay > strong {min-width: 110px; color : #8f8f8f;}
.productCard .payWay > div {display: flex; flex: 1; align-items: center; gap: 5px; }
.productCard .payWay > div label {cursor: pointer;}
.productCard .payWay > div label  > * {transition: 0.3s;}
.productCard .payWay > div label span { border: 1px solid #ddd; border-radius: 5px; padding: 8px 18px 8px 12px; font-weight: 500; }
.productCard .payWay > div label span::before {content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #ddd; margin-right: 8px; position: relative; top: 1px;}
.productCard .payWay > div label input {display: none;}
.productCard .payWay > div label input:checked + span { background: #0058ff; color: #fff; border-color: transparent;}
.productCard .payWay > div label  input:checked + span::before {border-color: #fff; background: #fff ; box-shadow: inset 0px 0px 0px 2.5px #0058ff; }
.productCard .hrdFee {display: flex; width: 100%; flex-direction: row;  border: 1px solid #ddd; border-top: 2px solid #243045; padding: 0; border-radius: 0 0 8px 8px; }			
.productCard .hrdFee > div {display: flex; flex-direction: column; justify-content: center; align-items: center; flex : 1; border-right: 1px solid #ddd;}
.productCard .hrdFee > div > b,
.productCard .hrdFee > div > span {width: 100%; text-align: center;}
.productCard .hrdFee > div > b {border-bottom: 2px dotted #ddd; padding: 10px 0 ; background: #f8f8fb; color: #a9a9b1;}
.productCard .hrdFee > div:last-of-type { border-right: 0; }
.productCard .hrdFee > div.hrdCsSupport span {position: relative;}
.productCard .hrdFee > div.hrdCsSupport span::before,
.productCard .hrdFee > div.hrdCsSupport span::after { position: absolute; top: 50%; display: flex;  justify-content: center; align-items: center;  font-size: 16px; font-weight: 800; border-radius: 50%; width: 28px; height: 28px; z-index: 2;}
.productCard .hrdFee > div.hrdCsSupport span::before {content: '-'; left: 0; transform: translate(-50%, -50%); background: #ededed; }
.productCard .hrdFee > div.hrdCsSupport span::after {content: '='; right: 0; transform: translate(50%, -50%); background: #ff4d5f ; color: #fff;}
.productCard .hrdFee > div span {font-size: 28px; font-weight: 800; color: #222; padding: 1rem;}
.productCard .hrdFee > div.hrdCardPrice b,
.productCard .hrdFee > div.hrdCardPrice span { color:#ff4d5f; }
.productCard .hrdFee > div.hrdCardPrice b {background:#fff7fa;}
.productCard .hrdFee > div > span > em {font-size: 16px; font-style: normal; padding-left: 3px;}

.refundWrap {display: flex; justify-content:  flex-end; padding-top: 10px;}
.refundWrap button{all: unset; color: #9a9a9a; cursor: pointer; border-bottom: 1px solid #ddd; padding-bottom: 4px; letter-spacing: -0.025em; font-weight: 400; transition: 0.3s;}
.refundWrap button:hover {color: #222;  border-bottom: 1px solid #aaa;}

.ckAgree .hrdAgreeTnC {border: 3px dashed #ddd; border-top: 2px solid #222;  padding: 1.8rem; background: #f8f8fb;}
.ckAgree .hrdAgreeTnC strong {font-size: 16px; padding-top: 20px; padding-bottom: 5px; display: block;}
.ckAgree .hrdAgreeTnC strong:first-of-type {padding-top: 0;}
.ckAgree .hrdAgreeTnC p {position: relative; line-height: 168%; padding: 3px 0; color: #5f5f5f; }
.ckAgree .hrdAgreeTnC p.order {padding-left: 22px; }
.ckAgree .hrdAgreeTnC p.order::before {position: absolute; top: 3px; left:0;}
.ckAgree .hrdAgreeTnC p.order:nth-of-type(1)::before {content: '①';}
.ckAgree .hrdAgreeTnC p.order:nth-of-type(2)::before {content: '②';}
.ckAgree .hrdAgreeTnC p.order:nth-of-type(3)::before {content: '③';}
.ckAgree .hrdAgreeTnC p.order:nth-of-type(4)::before {content: '④';}
.ckAgree .hrdAgreeTnC p.order:nth-of-type(5)::before {content: '⑤';}
.ckAgree .hrdAgreeTnC p.order:nth-of-type(6)::before {content: '⑥';}
.ckAgree .hrdAgreeTnC p.order:nth-of-type(7)::before {content: '⑦';}
.ckAgree .hrdAgreeTnC p.order:nth-of-type(8)::before {content: '⑧';}
.ckAgree .hrdAgreeTnC p.dash {padding-left: 13px; }
.ckAgree .hrdAgreeTnC p.dash::before {content: '-'; position: absolute; top: 3px; left:0;}
.ckAgree .hrdAgreeTnC table {width: 100%;}
.ckAgree .hrdAgreeTnC table tr th,
.ckAgree .hrdAgreeTnC table tr td {border: 1px solid #ccc; vertical-align: middle; padding: 10px; text-align: center;}
.ckAgree .hrdAgreeTnC table tr th {font-weight: 500; }
.ckAgree .hrdAgreeTnC table tr td.text {text-align: left; }

.ckWrap {border-bottom: 2px dotted #ccc; padding: 1rem 0.85rem; vertical-align: middle; }
.ckWrap input[type=checkbox] {width:1.15rem; height:1.15rem; margin-right:0.85rem;}
.ckWrap label {font-size: 1.25rem; cursor: pointer; color:#232323; }
.ckWrap.even label span::before {content: '(필수)'; color: #0058ff; padding-right: 4px;}
.ckWrap > button {all:unset; cursor: pointer; font-size: 16px; color: #9a9a9a; font-weight: 400; letter-spacing: -0.025em; transition: 0.3s;}
.ckWrap > button.modalBtn::before {content: '['; padding-left: 6px;}
.ckWrap > button.modalBtn::after {content: ']';}
.ckWrap > button:hover {color: #232323;}

.hrdMemberForm {display: flex; border: 1px solid #ddd; flex-direction: column ; padding: 1.4rem 1.8rem; background: #fff; margin-bottom: 1.6rem; border-radius: 8px;}
.hrdMemberForm div {display: flex; flex-wrap: wrap; align-items: center;}
.hrdMemberForm div:first-of-type > strong {display: flex; padding-right: 14px; padding-bottom: 0;}				
.hrdMemberForm div:first-of-type > label:first-of-type {margin-right: 8px;}
.hrdMemberForm div:first-of-type > p { width: 100%; padding: 4px 0 8px 0; margin-bottom: 4px; border-bottom: 1px solid #ddd;}
.hrdMemberForm div > span {min-width: 110px; color: #8f8f8f;}
.hrdMemberForm div > b {padding: 10px 0; font-weight: 500;}
.hrdMemberForm div > a {padding: 0 8px; margin-left: 4px;}
.hrdMemberForm div .pay_jumin_wrap {padding: 10px 0; gap:5px; display: flex; }
.hrdMemberForm div .pay_jumin_wrap > span {min-width: 0;}
.hrdMemberForm div .pay_jumin_wrap input {text-align: justify; max-width:150px; }
.hrdMemberForm > label { cursor: pointer; display: flex; gap : 6px; align-items: center; }
.hrdMemberForm > label input:checked[type="checkbox"] { margin: 0 ; }

.cardCkeck {display: flex; gap:5px;}
.cardCkeck label {display: flex; align-content: center; justify-content: center;}
.cardCkeck label span { padding: 9px 18px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: 0.3s}
.cardCkeck label input {display: none;}
.cardCkeck label input:checked + span { background: #0058ff; color: #fff; border-color: transparent;}
.cardCkeck label span::before {content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #ccc; margin-right: 0; position: relative; top: 2px; margin-right: 5px;}
.cardCkeck label input:checked + span img { filter: saturate(0) brightness(0) invert(1);}
.cardCkeck label input:checked + span::before {border-color: #fff; background: #fff ; box-shadow: inset 0px 0px 0px 2.5px #0058ff; }
.Payment_step {margin-bottom: 30px;}

.hrdCompletInfo {width: 100%; max-width: 740px; margin: 0 auto; border:  3px dashed #ddd; padding: 2.4rem 2rem 1.8rem 2rem; background: #f8f8fb;}
.hrdCompletInfo h6 {font-size: 2rem; font-weight: 600; padding-bottom: 1rem;}
.hrdCompletInfo > p {color: #787878; font-size: 16px; line-height: 168%;}
.hrdCompletInfo > p > b {font-weight: 500;}
.hrdCompletInfo > p > b.red {color: #ff4d5f; }
.hrdCompletInfo > div { border-top: 1px solid #ddd; margin-top: 18px; padding: 18px 0; display: flex; flex-direction: column; gap: 6px;}

.hrdCompletInfo > div > p { width: 100%; max-width: 450px; text-align: left; margin: 0 auto; font-size: 16px; position: relative; padding-left: 14px;}
.hrdCompletInfo > div > p::before {content: '·'; position: absolute ;top: -1px; left:0; color: #787878;}
.hrdCompletInfo > div > p > span {min-width: 80px; display: inline-block; font-weight: 500; color: #787878;}
.hrdCompletInfo > a {background: #49d295; color: #243045; display: flex; justify-content: center; align-items: center; height: 42px; max-width: 180px; margin:0 auto; border-radius: 4px; transition: 0.3s; font-weight: 500;}
.btnWrap {padding-top: 26px;}
.btnWrap > a {width: 100%; display: block; margin: 0 auto;   max-width: 180px; padding: 10px 0; color: #5f5f5f ;background: #cdcdcd; border-color: transparent; font-size: 15px; border-radius: 100px; font-weight: 500; transition: 0.3s;}
.btnWrap > a:hover,
.hrdCompletInfo > a:hover { background: #0b2239; color: #fff;}

@media (max-width: 760px) {	
	.modalCon {min-width: 92vw;}
	
	.productCard > div {padding: 0 1rem; }
	.productCard .card {border-bottom: 0;}
	.productCard .card h6 {font-size: 20px;}
	.productCard .card > p:first-of-type {padding-bottom: 0; font-size: 15px;}
	.productCard .payWay {padding: 1rem ; padding-top: 0;}
	.productCard .payWay > strong {display: none;}
	.productCard .payWay > div {display: flex; flex-wrap: wrap;}
	.productCard .payWay > div label {display: flex; flex-direction: row; }
	.productCard .payWay > div label span {padding: 6px 14px 6px 8px; font-size: 14px;}
	.productCard .hrdFee > div > b {font-size: 14px; padding: 8px 0; font-weight: 500;}
	.productCard .hrdFee > div span {font-size: 18px;}
	.refundWrap {justify-content: flex-start;}
	
	.hrdCompletInfo > p {text-align: left; width: 100%; padding-left: 14px; position: relative; padding-bottom: 5px; line-height: 150%;}
	.hrdCompletInfo > p::before {content: '-';position: absolute; top: 0; left: 0; z-index: 2;}
	
	.hrdCompletInfo > div > p {display: flex; }
}

@media (max-width: 410px) {
	.non_subvis .hrdcardinfo_titlearea h4.paycomplete_tit {font-size: 26px;}
	.Payment_step ul li.on_page {font-size: 15px; padding: 8px 0;}
	.hrdcardinfo_titlearea {margin-bottom: 1rem;}
	.productCard {border-radius: 5px;}
	.productCard .card {border-radius: 5px 5px 0 0;}
	.productCard .hrdFee {border-radius: 0 0 5px 5px;}
	.productCard .hrdFee {flex-wrap: wrap; flex-direction: inherit; width: 100%;}
	.productCard .hrdFee > div > b {font-size: 13px; padding: 6px 0; }
	.productCard .hrdFee > div.hrdCsSupport span::before {width: 16px; height: 16px; font-size: 16px;}
	.productCard .hrdFee > div.hrdCsSupport span::after { display: none;}
	.productCard .hrdFee > div span {font-size: 16px;  padding: 14px 5px;}
	.productCard .hrdFee > div > span > em {font-size: 14px; font-weight: 400; padding-left: 1px;}
	.productCard .hrdFee > div {width: 50%; flex: auto; }
	.productCard .hrdFee > div.hrdCardPrice {width: 100%; border-top: 2px solid #222;}
	
	.ckAgree .hrdAgreeTnC {padding : 1.2rem; }
	.hrdMemberForm {padding: 1.4rem 1.2rem;}
	.hrdMemberForm div:first-of-type > p {font-size: 14px;}
	.hrdMemberForm div {flex-wrap: wrap; gap:4px; padding: 8px 0;}
	.hrdMemberForm div > span {width: 100%; padding: 0; }
	.hrdMemberForm div > b {padding: 0;}
	.hrdMemberForm div .pay_jumin_wrap {flex-direction: row; padding: 0 0 8px 0;}
	.hrdMemberForm div .pay_jumin_wrap input{ flex:1; max-width: auto;}
	.hrdMemberForm div .pay_jumin_wrap > span {width: auto;}
	.cardCkeck  {width: 100%;}
	.cardCkeck > label {flex: 1; gap:0;}
	.cardCkeck label span {width: 100%; padding: 12px 10px; text-align: center;}
	.cardCkeck label span::before {margin-right: 3px;}
	.cardCkeck label span img {max-width: calc(100% - 24px);}
	
	.hrdCompletInfo {padding: 1.6rem;}
	.hrdCompletInfo h6 {font-size: 20px;}
	.hrdCompletInfo > p {font-size: 14px;}
	.hrdCompletInfo > div > p {display: flex; flex-direction: column; padding: 6px 0; gap:4px; }
	.hrdCompletInfo > div > p::before{display: none;}
	.hrdCompletInfo > a,
	.btnWrap > a {width: 100%; max-width: 100%;}
}