/*-----기본-----*/
html{font-size:20px; scroll-behavior: smooth;}
body{font-size:1rem}
.tablet{display:none;}
.mob{display:none;}

#wrap{position:relative; line-height:1.5; overflow:hidden; font-size:.9rem;}
#wrap img { border:none; }
#wrap i{vertical-align:middle; }
*{box-sizing:border-box;}

@media (max-width:1030px){
	html{font-size:16px;}
	body{font-size:1rem}
	.tablet{display:block;}
	.mob{display:block;}
}
@media (max-width:767px){
	html{font-size:15px;}
    body{font-size:1rem; position:relative;}
	.web{display:none;}
	
}


/********************************************************
■ 해더
********************************************************/
/*탑메뉴*/
#header{position: relative; width:100%; background:#fff;}
#header .header_inner{position:relative;  margin:0 auto; height:5rem;  z-index:10;}
#header .header_inner:after{content:""; display:block; clear:both; }
#header .header_inner h1{position: absolute; top:50%; left:4rem; z-index:10; transform:translateY(-50%);}
#header .header_inner h1 img{width: 100%; transition: all .3s ease-in-out; vertical-align:middle;}
#header .header_inner #nav {text-align:center;}
#header .header_inner #nav ul {clear:both; position:relative; box-sizing:border-box; }
#header .header_inner #nav ul li { display:inline-block; width: auto; float:none; vertical-align:top; position:relative; }
#header .header_inner #nav ul li div:after{content:''; width:6px; height:6px; border-radius:50%; background:#2C67D5 ;  display:block; position:absolute; left:50%; margin-left:-3px; top:48px; z-index:1; opacity:0; transition: all 0.2s ease-out 0s;}
#header .header_inner #nav ul li.on div:after{ top:25px; opacity:1;}
#header .header_inner #nav ul li.on ul{background:#fff;}
#header .header_inner #nav > ul > li:last-child:after{background: none; }
#header .header_inner #nav > ul > li > div > a{color: #333333; font-weight: 400; margin:0 2rem;position:relative;}
#header .header_inner #nav > ul > li.on > div > a{color:#2c67d5}

#header .header_inner #nav > ul > li.on > div > a:before {content:'';display:block;position:absolute;width:100%;height:8px;background:#dcedfd;left:0;bottom: 2rem;
    z-index: -1;border-radius:4px;transform:translateY(50%);}
#header .header_inner #nav ul li a{text-align:center; display:inline-block; font-size:1rem; height:5rem; line-height:5rem; position:relative; font-family: 'S-Core';}
#header .header_inner #nav ul li  a strong{font-weight: 600; }
#header .header_inner #nav ul li.active div a{color: #2C67D5;}
#header .header_inner #nav ul li.active div:after{top:25px; opacity:1; }
#header .header_inner #nav ul li.active div a:before{content:'';display:block;position:absolute;width:100%;height:8px;background:#dcedfd;left:0;bottom: 2rem;
    z-index: -1;border-radius:4px;transform:translateY(50%);}

/*-----탑메뉴 2차-----*/
#header .header_inner #nav ul li ul {border-radius:10px;box-shadow: 7px 0 18px rgb(93 93 93 / 28%);z-index: 100; position: absolute; display:none; width:9rem; left:50%; top:4rem; margin-left:-4.5rem; box-sizing:border-box; padding:1.5rem 0; border-top:none; text-align:center; overflow:hidden; }
#header .header_inner #nav ul li ul li {display:block;  margin-top:15px;text-align:left;padding:0 1rem;}
#header .header_inner #nav ul li ul li:first-child{margin-top:0;}
#header .header_inner #nav ul li ul li a{position:relative;display:block; height:auto;text-align:left; font-size:.8rem; font-weight:500; line-height:1.4; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; letter-spacing:0.2px; color:#666666; }
#header .header_inner #nav ul li ul li a:hover{color:#2c67d5;font-weight:600; }
#header .header_inner #nav ul li ul li a:after{content:'';display:block;position:absolute;width:1.45rem;height:1.45rem;background:url(/images/default/content/link_btn.png)no-repeat center center;background-size:cover;top:50%;transform:translateY(-50%);right:0;}
#header .header_inner #nav ul li ul li a:hover:after{content:'';display:block;position:absolute;width:1.45rem;height:1.45rem;background:url(/images/default/content/link_btn_on.png)no-repeat center center;background-size:cover;top:50%;transform:translateY(-50%);right:0;}
#header .header_inner #nav ul li ul li a strong{font-weight:normal; }
#header .header_inner #nav ul li ul li a.newBlank:after{content:'\f090'; display:inline-block; margin-left:3px; vertical-align:middle; font-family: 'remixicon' !important; }
#header .header_inner #nav ul li.on ul:after{}



/*gnb메뉴*/
.sub_menu{position:absolute; font-size:.75rem; display:flex; align-items: center; justify-content: flex-end;text-align:right;top:0; right:7rem; }
.sub_menu .timebox{display:flex;  justify-content: center;  align-items: center; flex-direction: column; margin-right:15px;}
.sub_menu .timebox .timer a{display:block; text-align: center; background:#333333; color:#fff; border-radius:5px; padding:7px 16px; font-size:13px; margin-top: 5px;font-size:0.7rem;}
.sub_menu .timebox .timer em{font-weight:600; margin-right:5px; }
.sub_menu .timebox i{color:#2c67d5;}
.sub_menu ul{ font-size:0.9rem;}
.sub_menu ul li{position:relative; display:inline-block; padding: 0 5px; }
.sub_menu ul li a{display:flex;  justify-content: center;  align-items: center; flex-direction: column;font-size:15px;  height:5rem;}
.sub_menu ul li [class*="icon"]{display:block; vertical-align:middle; width:1.5rem; height:1.5rem;background-position:50%;background-repeat:no-repeat; background-size:100%;   }
.sub_menu ul li .icon_login{background-image:url('/images/default/main/icon_login.svg');}
.sub_menu ul li .icon_join{background-image:url('/images/default/main/icon_join.svg');}
.sub_menu ul li .icon_my{background-image:url('/images/default/main/icon_my.svg');}
.sub_menu ul li .icon_logout{background-image:url('/images/default/main/icon_logout.svg');}

@media (max-width:1600px){
	#header .header_inner h1{left:2rem;}
	.sub_menu{right:4.5rem;}
}
@media (max-width:1500px){
	#header .header_inner #nav ul li ul li a{font-size:0.75rem;}
	#header .header_inner #nav > ul > li > div > a{margin:0 1.5rem;}
}
@media (max-width:1400px){
	#header .header_inner h1{left:1rem;width:11rem;}	
	#header .header_inner #nav{text-align:left; margin-left:13rem;}
}
@media (max-width:1300px){	
	#header .header_inner #nav > ul > li > div > a{font-size:0.85rem; margin: 0 1rem;}
}
@media (max-width:1030px){
	#header .header_inner h1{width:12rem;}	
	#header .header_inner{height:4rem;}
}

@media (max-width:767px){
	#header .header_inner{height:3.5rem;}
}

/********************************************************
■ 사이트맵
********************************************************/
/* 햄버튼*/
#header .btn-gnb-menu{position:absolute; right: 4rem; top:0;  font-size:0; line-height:1; width:1.75rem; height:5rem; cursor:pointer; z-index:9999;text-align:center;}
#header .btnAll {position:relative; width:1.75rem; height:1.75rem; top:50%; line-height:1; transform:translateY(-50%);outline: none; z-index:9999; -webkit-transition: all 0.25s; transition: all 0.25s; }
#header .btnAll span { display: block; width: 40%; height:40%; position: absolute; background-color: #2C67D5; -webkit-transition: all 0.25s; transition: all 0.25s;}
#header .btnAll > span:nth-child(1) {top: 0; left:0; }
#header .btnAll > span:nth-child(2) {top: 0; right:0}
#header .btnAll > span:nth-child(3) {bottom:0; left:0;}
#header .btnAll > span:nth-child(4) {bottom:0; right:0;}
#header.open .btnAll {transform: translateY(-50%) rotate(45deg);  width:1.3rem; height:1.3rem;}
#header.open .btnAll span{background:#fff;}
/*사이트맵*/
#header #navi{background:#fff; position:fixed; right:-100%; top:0; width:20rem; height:100%; padding-top:0; overflow:hidden; overflow-y:scroll; z-index:200; transition:right 0.45s;}
#header.open #navi{transition:right 0.45s; right:0px;}

/*-----회원서비스-----*/
#menuAll .memb{display:block; font-size:0.9rem;}
#menuAll .memb .timer a{display:inline-block; background:#5362cb; color:#fff; padding:0.5em 0.7em; height:auto; line-height:1; font-size:12px; border-radius:15px; }
#menuAll .memb p{height:5rem; line-height:5rem; background:#2C67D5; color:#fff; padding:0 1rem;}	
#menuAll .memb ul{overflow:hidden; border-bottom:8px solid #E7ECF0;}
#menuAll .memb ul li{width:50%; float:left;}
#menuAll .memb ul li a{ text-align:center; display:block; height:3rem; line-height:3rem;}
#menuAll .memb ul li:not(:first-child){border-left:1px solid #E7ECF0;}
#header.open #menuAll .memb .timer a{background:#fff; color:#5362cb;}


#menuAll .mobile_top{width:100%;height:auto; background:transparent; margin-top:4rem;}
#menuAll .mobile_top:before,
#menuAll .mobile_top:after{display: none;}



/*1차*/
#menuAll .mobile_top .mbtop{border: 0; width: 100%; padding:0; }
#menuAll .mobile_top .mbtop > li{width: 100%; margin:0 !important;}
#menuAll .mobile_top .mbtop > li:before{display:none;}
#menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; font-size:1.1rem; padding: 20px 1.5rem 14px; color:#333; }
#menuAll .mobile_top .mbtop > li > a:before{display:none;}
#navi ul.mbtop {width:100%; margin:0; padding:0;}
#navi ul.mbtop li{margin:0; float:none; width:100%; border-bottom:1px solid rgba(0, 0, 0, .1); position:relative;}
#navi ul.mbtop li:after{ content :"\e913"; display : block; position : absolute; right:1.5rem;  top:1rem; font-size:1.15rem; font-family:'xeicon'; font-weight:500; color:#333; }
#navi ul.mbtop li.nosub:after{display:none;}
#navi ul.mbtop > li > a {padding:0; background: none; text-align:left; display:block; width:100%; padding: 1rem;box-sizing:border-box; font-size:1.15rem;  color:#262626;}
#navi ul.mbtop li.open_li{position:relative;}
#navi ul.mbtop > li.open_li > a{ font-weight: 700; }
#navi ul.mbtop li.open_li:after{ content :"\e91a";}

/*2차*/
#navi ul.mbtop li ul {display:none; float:none; background-color:#efefef; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding: 2rem 1.5rem; margin-top:0; margin-left: 0;}
#navi ul.mbtop li ul.on{display:block;}
#navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box;  background: none; padding-left:0;}
#navi ul.mbtop li ul li a {background:url(none);  height:auto; padding-left:0;  font-size:1rem; color:#333;}	
#navi ul.mbtop li ul li a strong{color:#2C67D5}
#navi ul.mbtop li ul li:after,
#navi ul.mbtop li ul li:before{display:none;}
/*3차*/
#navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;}
#navi ul.mbtop li ul li ul li {display:none;}

/*-----전체메뉴 탑메뉴-----*/
@media (max-width:1600px){
	#header .btn-gnb-menu{right:2rem;}
}
@media (max-width:1400px){
	#header.open #navi{}
	#header .btn-gnb-menu{right:1rem;}
	#menuAll h3{margin-left:1rem;}
	
	#menuAll .navi_all > ul {width:100%; padding: 0 1rem;}

}
@media (max-width:1030px){
	.sub_menu{display:none;}
	#header{border-bottom:none;}
	#header .header_inner #nav {display: none;}
	#header .btn-gnb-menu{ height: 4rem;}
	#menuAll .memb p{height:4rem; line-height:4rem;}

	/*팝업 롤링 추가*/
	.layerPopup {left:50% !important;  transform:translateX(-50%);}
}

@media (max-width:767px){
	html,body,#wrap{height:auto;}
	html{font-size:16px;}
    body{font-size:1rem; position:relative;}
	.web{display:none;}
	.mob{display:block;}

	#menuAll .mobile_top{margin-top:3.5rem;}
	#header #navi{width:80%;}
	#header .btn-gnb-menu{ height: 3.5rem;}
	#menuAll .memb p{height:3.5rem; line-height:3.5rem;}

	/*팝업 롤링 추가*/
	.mobile_dim{width: 100%; height:100%; position: absolute; top: 0; left: 0; margin: 0; z-index: 1039; display: inline-block; background: rgba(0,0,0,0.5);}
	.layerPopup img{width:100% !important;}
	.layerPopup {left:5% !important;  transform:translateX(0%); width:90% !important; height:auto !important; top:130px;}
	.chkvsb{font-size:0.7rem !important;}
}

/* 1번 #2c67d5 */
/* 5번 #2C57AD */
/********************************************************
■ 강의 섹션 컬러값

p01: #2C57AD
p02: #229EED
p03: #2AADC0
p04: #933DDC
p05: #01245f
********************************************************/
#p01 .pointDiv span {background:#2C57AD;}
#p01 .pro_item .title b {border-color:#2C57AD; color:#2C57AD;}
#p01 .pro_item .title em i{color:#2C57AD;}
#p01 .pro_list .list_top h4 .part {color:#2C57AD; border: 2px solid #2C57AD;}
#p01 .item_txt .sub span{background:#2C57AD;}
#p01 .pro_info .infoTxt em {color:#2C57AD;}
.title .p01.on {background:#2C57AD;}

#p02 .pointDiv span {background:#229EED;}
#p02 .pro_item .title b{border-color:#229EED; color:#229EED;}
#p02 .pro_item .title em i{color:#229EED;}
#p02 .pro_list .list_top h4 .part {color:#229EED; border: 2px solid #229EED;}
#p02 .item_txt .sub span{background:#229EED;}
#p02 .pro_info .infoTxt em {color:#229EED;}
.title .p02.on {background:#229EED;}

#p03 .pointDiv span {background:#2AADC0;}
#p03 .pro_item .title b{border-color:#2AADC0; color:#2AADC0;}
#p03 .pro_item .title em i{color:#2AADC0;}
#p03 .pro_list .list_top h4 .part {color:#2AADC0; border: 2px solid #2AADC0;}
#p03 .item_txt .sub span{background:#2AADC0;}
 #p03 .pro_info .infoTxt em {color:#2AADC0;}
.title .p03.on {background:#2AADC0;}

#p04 .pointDiv span {background:#933DDC;}
#p04 .pro_item .title b{border-color:#933DDC; color:#933DDC;}
#p04 .pro_item .title em i{color:#933DDC;}
#p04 .pro_list .list_top h4 .part {color:#933DDC; border: 2px solid #933DDC;}
#p04 .item_txt .sub span{background:#933DDC;}
#p04 .pro_info .infoTxt em {color:#933DDC;}
.title .p04.on {background:#933DDC;}

#p05 .pointDiv span {background:#2c67d5;}
#p05 .pro_item .title b{border-color:#2c67d5; color:#2c67d5;}
#p05 .pro_item .title em i{color:#2c67d5;}
#p05 .pro_list .list_top h4 .part {color:#2c67d5; border: 2px solid #2c67d5;}
#p05 .item_txt .sub span{background:#2c67d5;} 
#p05 .pro_info .infoTxt em {color:#2c67d5;}
.title .p05.on {background:#2c67d5;}

/********************************************************
■ 푸터
********************************************************/
/*푸터*/
#footer{background:#fff; font-size:0.85rem; position:relative;}

.copyright{width:1600px;padding:3rem 0 2rem 0; display:flex;color:#333;  margin:0 auto; position:relative;}
.copyright .copy{margin-top:1rem; color:#999; font-size:0.8rem;}
.copyright > div{margin-left:2rem;}
.go_top{position:absolute; right:1rem; top:-1.5rem; font-size:0.7rem; border-radius:50%; background:#394baa; color:#fff; width:2.5rem; height:2.5rem; text-align:center; line-height:2.5rem;}

.footer_menu{background:#5b5d67; font-size:0.8rem;}
.footer_menu ul{width:1600px; margin:0 auto; display: flex; justify-content: flex-end; padding:15px 0;}
.footer_menu ul li a{color:#fff; display:block; padding:5px 10px;}

@media (max-width:1600px){
	.copyright,
	.footer_menu ul{width:100%; padding-left:1rem; padding-right:1rem;}
	.go_top{right:1rem;}
}
@media (max-width:1030px){
	.copyright h1{width: 13rem;}
	.copyright h1 img{width:100%;}
}
@media (max-width:767px){
	.copyright{display:block;}
	.copyright .ar{text-align:left !important;}
	.copyright h1{ margin-bottom:1rem;}
	.footer_menu ul{justify-content: center; flex-flow: row wrap;}
}




/* 팝업 */
.con_pop{background: rgba(0, 0, 0, .6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;}
.con_pop .popin{width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);  text-align: center; z-index: 100; border-radius: 0.5rem; overflow:hidden;}
.con_pop .popin h3{color: #fff; background: #2c457b;  padding:0 1rem; font-size: 1.2rem; font-weight: 500; height: 2.5rem; line-height: 2.6rem; font-family: 'S-Core';}
.con_pop .popin .txt{padding: 1.5rem 2rem; font-size: 0.9rem; line-height: 1.5;background: #fff; }
.con_pop .popin table{border-top: 2px solid #333; margin-top: 15px;}
.con_pop .popin table th{background-color: #f9f9f9; border-bottom: 1px solid #e9e9e9; vertical-align: middle; text-align: center;}
.con_pop .popin table td{color: #666;  padding: 10px 15px; vertical-align: middle; border-bottom: 1px solid #e9e9e9;}

.con_pop .bottom_button{display: flex; width:100%; position:relative; z-index:10;}
.con_pop .bottom_button a{flex-basis: 50%; display: block; height: 60px; line-height: 60px; font-size: 0.9rem;  background: #555; color: #fff;}
.con_pop .bottom_button a.confirm{background: #239eec; color: #fff;}
.con_pop .bottom_button a.w100{flex-basis: 100%;}

.con_pop .close{position: absolute; right: 1rem; top: 12px;}
.con_pop .close a{color: #fff; font-size: 1.2rem;}
.con_pop .close span{font-size: 0;}

.con_pop .popin h4{font-size:1.4rem;  color:#333; border-bottom:1px solid #ddd; padding-bottom:1rem; margin-bottom:1rem;}
.con_pop .popin h4 b{font-weight:bold;}
.con_pop .popin h4 img{margin-bottom:10px;}
.con_pop .popin .bg span{position:relative; color:#054438; font-weight:bold;}
.con_pop .popin .bg span:before{content: ''; display: block; position: absolute; width: 100%; height: 50%; background: rgba(59,68,129,0.1); left: 0; bottom:0;}
.con_pop .popin .logo img{width:10rem; margin-top:0.5rem;}
.con_pop .popin b{font-weight:bold;}
.con_pop .alert img{margin-bottom:10px; width:10rem;}
.con_pop .alert h4{color:#212121;}


.con_pop .popin h5{font-size:1.2rem;  color:#333;margin-top:1rem;} /* 마이페이지 연수프로그램 신청내역 영상 팝업 */
.con_pop .popin .bg{margin-top:1.5rem; padding:1.5rem 0 0; position:relative; color:#333; z-index:0;}
.con_pop .popin .bg:before{ content : ""; display : block; position : absolute; left :-50%; top:0; width : 200%; height : 20rem; background : #f0f2ff; z-index:-1;}
.con_pop .popin .cen_button{margin-bottom:1.5rem;position:relative; z-index:10;}
.con_pop .popin .cen_button a{display:block; width:8rem; margin:0 auto; height:2.3rem; line-height:2.3rem; background:#38387f; color:#fff; border-radius:0.5rem;}

ul.dot li{margin-bottom:5px; position: relative; padding-left:15px;  text-align:left;}
ul.dot li:before{ content : ""; display : block; position : absolute; left :0; top:0.5em; width : 6px; height : 6px; background : #666; border-radius:50%; }

#certiAlert ol{padding-bottom:25px; border-bottom:1px solid #ddd; margin-bottom: 5px;}
#certiAlert ol li{display:flex; gap:0 0.5rem; text-align:left; margin-bottom:10px;}
#certiAlert ol li em{display:inline-block; color:#fff; background:#2d67d5; width:25px; height:25px; line-height:25px; border-radius:50%; text-align:center;     flex-shrink: 0;}

@media (max-width: 767px){
.con_pop .popin{width: 90%; margin: 0 auto;}
}

.con_pop .popin.reset{width: 500px;}
.con_pop .popin.reset .txt{position:relative;}
.con_pop .popin.reset .txt .btn_zone{position:absolute; left:50%; transform:translateX(-50%); bottom:2rem; width:100%;}
.con_pop .popin.reset .txt a.sleep_phone{display:inline-block; padding:0.75rem 2rem;background:#695cff; color:#fff; border-radius:3rem; margin-right:0.5rem;}
.con_pop .popin.reset .txt a.sleep_ipin{display:inline-block; padding:0.75rem 2rem;background:#695cff; color:#fff; border-radius:3rem; margin-left:0.5rem;}

@media (max-width: 767px){
.con_pop .popin.reset{width: 90%;}
.con_pop .popin.reset .txt img{width: 100%;}
.con_pop .popin.reset .txt a{bottom:8%; padding:0.5rem 0; width:50vw;}
}