@charset "utf-8";
/* CSS Document */
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

*{margin:0; padding:0; box-sizing:border-box; image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; -ms-interpolation-mode:nearest-neighbor; -webkit-tap-highlight-color:transparent;}
ul,li{list-style:none;}
a{text-decoration:none;}
input, textarea, select{border:0; outline:none; font-family:'NanumSquare', sans-serif;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{color:transparent;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder{color:transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{color:transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{color:transparent;}

body::-webkit-scrollbar {
  width:4px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
}
body::-webkit-scrollbar-thumb {
  border-radius:3px; background-color:rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-button {
  width:0; height:0;
}


body{font-size:14px; font-family:'NanumSquare', sans-serif; line-height:1;}
.wrap{height:100%;}
.bg_blue{background-color:#4a86ff;}
.body_gray{background-color:#f7f8f9;}
.bg_white{background-color:#fff;}
.bg_indigo{background-color:#2c365a;}

/** 버튼 관련 **/
.btn_wrap{display:flex; justify-content:space-between; padding-top:20px;}
.btn_center{display:flex; justify-content:center; padding-top:20px;}

.btn_black_white{display:inline-block; background-color:#333; color:#fff; width:100%; height:48px; line-height:48px; border-radius:15px; text-align:center; font-weight:500; font-size:18px;}
.btn_white_gray{display:inline-block; background-color:#fff; color:#555; width:100%; height:48px; line-height:48px; border-radius:15px; text-align:center; font-weight:500; font-size:18px;}
.btn_sky_white{display:inline-block; background-color:#009fe8; color:#fff; width:100%; height:48px; line-height:48px; border-radius:15px; text-align:center; font-weight:500; font-size:18px;}
.btn_gray_gray{display:inline-block; background-color:#ededed; color:#777; width:100%; height:48px; line-height:48px; border-radius:15px; text-align:center; font-weight:500; font-size:18px;}

.btn_indigo{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; color:#fff; background-color:#2c365a; width:150px; height:48px; border-radius:20px; font-weight:700; font-size:18px; margin:0 8px; transition:0.2s;}
.btn_indigo:hover{background-color:#4a86ff;}

.btn_blue{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; color:#fff; background-color:#4a86ff; width:150px; height:48px; border-radius:20px; font-weight:700; font-size:18px; transition:0.2s;}
.btn_blue:hover{background-color:#2c365a;}

@media all and (min-width:480px){
    .btn_wrap{display:flex; justify-content:center; padding-top:30px;} 
    .btn_center{padding-top:30px;}
    .btn_wrap a{margin:0 5px;}
}

@media all and (min-width:768px){
    body{font-size:15px;}
}
@media all and (min-width:1024px){
    body{font-size:16px;}
}
@media all and (min-width:1280px){
    body{font-size:17px;}
}

/** 체크박스 **/
.check_input{display:none;}
.check_label{display:flex; align-items:center; cursor:pointer;}
.check_bullet{width:20px; height:20px; margin-right:6px; background-color:#fff; border:2px solid #eee;}
.check_input:checked + .check_bullet{background-image:url(../images/input_check_sky.png); background-size:100%;}
.check_input:checked + .check_bullet.black{background-image:url(../images/input_check_black.png);}

/** 라디오박스 **/
.radio_input{display:none;}
.radio_label{display:flex; align-items:center; cursor:pointer;}
.radio_bullet{width:20px; height:20px; border:2px solid #eee; margin-right:6px; border-radius:50%;}
.radio_input:checked + .radio_bullet{background-image:url(../images/input_radio_sky.png); background-size:100%;}

/** 헤더 영역 **/
header{position:fixed; top:0; left:0; right:0; height:50px; z-index:1000; transition:0.4s; background-color:rgba(255,255,255,0.6); box-shadow:0 1px 4px 2px rgba(0,0,0,0.05);}
.header_wrap{position:relative; margin:0 auto; max-width:1240px;}
.header_logo, .header_mobile{position:absolute; transition:0.3s;}
.header_logo{width:120px; left:0; top:0; z-index:990;}
.logo{width:100%; display:block;}
.header_mobile{color:#111; font-size:24px; right:10px; top:12px;}

.header_navi_wrap{padding:0 20px 0 20px; position:fixed; top:50px; bottom:0; width:100%; background-color:rgba(255,255,255,0.9); z-index:920; overflow:auto; border-top:1px solid #eee; text-align:right; font-size:17px; display:none;}
.header_hello{padding-right:15px; height:50px; line-height:49px; border-bottom:1px solid #ccc;}
.header_hello b{font-weight:500;}
.header_gnb{display:flex; justify-content:flex-end; height:50px; border-bottom:1px solid #ccc;}
.header_gnb a{color:#111; padding:0 9px; line-height:49px; font-weight:700;}
.header_lnb li{height:50px; border-bottom:1px dotted #bbb;}
.header_lnb a{color:#111; padding:0 15px; display:flex; justify-content:space-between; align-items:center; line-height:49px; text-align:right; font-weight:700;}
.header_lnb li:hover a{color:#5f41e1;}
.header_lnb li.active a{color:#5f41e1;}
.header_lnb i{color:#000; opacity:0.3; }
.lnb_bar{display:none;}

a.gnb_my.elearning{display:none;}

 header.header_change{background-color:rgba(255,255,255,1);}

@media all and (min-width:640px){
    .header_gnb a{padding:0 15px;}
}

@media all and (min-width:1280px){
    .header_mobile, .header_lnb i, .header_gnb i{display:none;}  
    header{height:86px; background-color:rgba(255,255,255,0.6); box-shadow:0 1px 2px rgba(0,0,0,0.1);}
    .header_logo{width:246px; left:0;}
    .header_navi_wrap{display:flex!important; width:auto; left:200px; top:0; border:0; bottom:auto; position:absolute; background:none; height:86px; justify-content:flex-end; right:0; align-items:center; padding:0 0 0 0;}

    .header_hello{position:absolute; border:0; top:-8px; right:5px; font-size:13px; padding-right:5px; color:#2c365a; font-weight:700;}
    .header_gnb, .header_lnb li{border:0; height:auto;}
    .header_gnb a, .header_lnb a{line-height:1;}
    .header_gnb{order:10; position:relative; margin:0 0 0 20px;}
    .header_gnb li{}
    a.gnb_my{color:#fff; font-size:16px; padding:0; transition:0.2s; display:flex; justify-content:center; align-items:center; width:124px; height:36px; background-color:#009fe8; border-radius:16px; font-weight:700;}
    a.gnb_my.join{margin-left:6px; background-color:#1d304f;}
    a.gnb_my.elearning{margin-left:6px; background-color:#22bdff; display:flex;}
    a.gnb_my.elearning:hover{background-color:#5f41e1;}
    .header_lnb{display:flex; order:20; font-size:18px;}
    .header_lnb li{padding:0 25px;}
    .header_lnb a{font-weight:300; transition:0.3s; color:#111; padding:0; position:relative; display:block; height:40px; display:flex; align-items:center; font-weight:700;}
    .lnb_bar{position:absolute; left:-1px; right:-1px; bottom:0; background-color:#5f41e1; height:2px; opacity:0; transition:0.3s; display:block;}
    .header_lnb li:hover a{color:#111;}
    .header_lnb li:hover .lnb_bar{opacity:0.6;}
    .header_lnb li.active a{color:#111;}
    .header_lnb li.active .lnb_bar{opacity:1;}
    
    /** 헤더 변경 **/   
    header.header_change .header_lnb a{color:#222;}
    header.header_change .header_lnb a:hover{color:#222;}
    header.header_change .header_lnb a.active{color:#222;}    
}



/** 공통사항 **/
.main_wrap{height:;}
.main_content_wrap{padding:0 3%;}
.main_content{max-width:1240px; margin:0 auto;}
.main_area{padding-top:40px;}
.main_title{color:#fff; text-align:center; font-size:21px; font-weight:700; position:relative; padding-bottom:18px; margin-bottom:25px;}
.main_title:after{content:''; position:absolute; width:30px; height:2px; bottom:0; left:50%; transform:translateX(-50%); background-color:#fff;}
.main_title.blue:after{background-color:#4a86ff;}

.title{text-align:center; padding-bottom:20px; color:#2c365a;}

@media all and (min-width:640px){
    .main_title{font-size:25px; padding-bottom:20px; margin-bottom:30px;}
    .main_title:after{width:32px;}
}
@media all and (min-width:1024px){
    .main_title{font-size:26px; padding-bottom:25px; margin-bottom:35px;}
    .main_title:after{width:36px;}

    .title{font-size:30px; padding-bottom:25px;}
}
@media all and (min-width:1280px){
    .main_area{padding-top:75px;}
    .main_title{font-size:28px; padding-bottom:25px; margin-bottom:40px;}
    .main_title:after{width:38px;}
}
@media all and (min-width:1440px){
    .main_title{font-size:30px; padding-bottom:26px; margin-bottom:45px;}
    .main_title:after{width:40px;}
}
@media all and (min-width:1680px){
    .main_title{font-size:32px; padding-bottom:28px; margin-bottom:60px;}
}

/** 프로그램 소개 **/
.main_content.center_1{height:100%; display:flex; justify-content:center; align-items:center;}
.main_content.center_1 > div{width:100%; max-width:1100px;}
.main_program_wrap{position:relative; padding-top:56.25%;}
.main_program_video{position:absolute; left:0; top:0; width:100%; height:100%; border:0;}

@media all and (min-height:360px) and (orientation:landscape){
    .main_content.center_1 > div{width:50%;}
}
@media all and (min-height:480px) and (orientation:landscape){
    .main_content.center_1 > div{width:70%;}
}
@media all and (min-height:810px) and (orientation:landscape){
    .main_content.center_1 > div{width:74%;}
}
@media all and (min-height:940px) and (orientation:landscape){
    .main_content.center_1 > div{width:100%;}
}

/** 슈퍼라이팅 **/
.main_title_logo{width:45%; max-width:236px;}
.main_content.center_2{padding:30px 0;}
.intro_app{width:90%; display:block; margin:0 auto 25px auto; max-width:586px;}
.intro_text_wrap{color:#fff; text-align:justify; line-height:1.7;}
.intro_text_list li{background-color:rgba(255,255,255,0.97); color:#1b1d21; border-radius:10px; padding:10px 12px; margin-bottom:10px; box-shadow:0 0 6px 3px rgba(0,0,0,0.05);}
.intro_text_list li:last-child{margin:0;}
.intro_text_list h3{font-size:15px;}
.intro_text{padding:5px 0 0 5px;}

@media all and (min-width:768px){
    .main_intro{display:flex; align-items:flex-start; justify-content:space-between;}
    .intro_app{width:45%; margin:0;}
    .intro_text_wrap{width:54%;}
}
@media all and (min-width:1024px){
    .intro_app{width:41%;}
    .intro_text_wrap{width:53%;}
    .intro_text_list li{padding:12px 20px;}
    .intro_text_list h3{font-size:18px;}
}
@media all and (min-width:1280px){
    .main_content.center_2{padding:50px 0;}
    .intro_app{width:50%;}
    .intro_text_wrap{width:50%; line-height:1.9; padding-top:5px;}
    .intro_text_list li{padding:12px 30px; margin-bottom:12px; border-radius:12px;}
    .intro_text_list h3{font-size:20px;}
    .intro_text{font-size:17px;}
}
@media all and (min-width:1680px){
    .main_content.center_2{display:flex; justify-content:center; align-items:center; height:100%;}
}

/** 커리큘럼 **/
.main_content.center_3{padding:30px 0;}

.curriculum_tabs{display:flex; justify-content:center; margin-bottom:20px;}
.curriculum_tab{width:100px; height:38px; display:flex; justify-content:center; align-items:center; background-color:rgba(255,255,255,0.95); color:#22bdff; border-radius:10px; font-size:18px; margin:0 5px; border:2px solid #22bdff; font-weight:700; transition:0.2s; cursor:pointer;}
.curriculum_tab:hover{background-color:#22bdff; color:#fff;}
.curriculum_tab.active{background-color:#22bdff; color:#fff;}

.main_content_wrap.curriculum{background:url(../images/bg_1.jpg) no-repeat 50% fixed; background-size:cover;}
.main_curriculum_area{display:none;}

.main_curriculum_list{display:flex; justify-content:space-between; flex-wrap:wrap;}
.main_curriculum_list li{width:49%; background-color:rgba(255,255,255,0.97); box-shadow:0 0 6px 3px rgba(0,0,0,0.1); border-radius:20px; padding:10px 10px; font-size:12px; margin-bottom:2%;}
.main_curriculum_list li:nth-child(11), .main_curriculum_list li:nth-child(12){margin:0;}
.main_curriculum_caption{font-size:17px; margin-bottom:10px; display:flex; justify-content:center; align-items:center; padding:5px 0 10px 0; border-bottom:1px dashed #ccc;}
.main_curriculum_caption_icon{width:18px; margin-right:8px;}
.main_curriculum_text{line-height:1.8;}

@media all and (min-width:640px){
    .curriculum_tab{width:120px; height:42px; font-size:20px; margin:0 5px;}
    
    .main_curriculum_list li{width:32%;}
    .main_curriculum_list li:nth-child(10){margin:0;}
}
@media all and (min-width:1024px){
    .curriculum_tabs{margin-bottom:30px;}
    .curriculum_tab{width:140px; height:48px; font-size:22px; margin:0 10px;}
    
    .main_curriculum_list li{width:32%;}
    .main_curriculum_list li{font-size:14px;}
}
@media all and (min-width:1280px){
    .main_content.center_3{padding:50px 0;}
    
    .curriculum_tabs{margin-bottom:40px;}
    .curriculum_tab{width:160px; height:52px; font-size:24px; margin:0 10px; border-radius:16px;}
    .main_curriculum_list li{width:23.5%; padding:15px 15px;}
    .main_curriculum_list li{font-size:15px;}
    .main_curriculum_list li:nth-child(9){margin:0;}
    
    .main_curriculum_caption{font-size:18px; margin-bottom:10px; display:flex; justify-content:center; align-items:center; padding:5px 0 10px 0; border-bottom:1px dashed #ccc;}
    .main_curriculum_caption_icon{width:20px; margin-right:8px;}
}
@media all and (min-width:1440px){
    .curriculum_tabs{margin-bottom:50px;}
    .curriculum_tab{width:180px; height:56px; font-size:25px; margin:0 15px; border-radius:16px;}
}
@media all and (min-width:1680px){
    .main_content.center_3{display:flex; justify-content:center; align-items:center; height:100%;}
}

/** 이용안내 **/
.main_content.center_4{padding:30px 0;}

.main_content_wrap.use{background:url(../images/bg_2.jpg) no-repeat 50% fixed; background-size:cover;}
.main_how_img img{display:block; width:100%; max-width:601px; margin:0 auto 25px auto;}

.main_how_list{color:#fff; line-height:1.6; font-size:16px;}
.main_how_list li{margin-bottom:15px; position:relative; padding-left:40px;}
.main_how_list li:last-child{margin:0;}
.main_how_num{position:absolute; left:0; top:0; width:30px; height:30px; border-radius:40%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; background-color:#22bdff; color:#fff; font-size:18px; font-weight:700; padding-top:1px;}

@media all and (min-width:480px){
    .main_how_list li{padding-top:3px;}
}
@media all and (min-width:640px){
    
}
@media all and (min-width:768px){
    
}
@media all and (min-width:1024px){
    .main_content.center_4{display:flex; justify-content:center; align-items:center; height:100%;}
    .main_content.center_4 > div{width:100%;}
    
    .main_how_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
    .main_how_img{width:350px;}
    .main_how_img{margin:0;}
    .main_how_list{line-height:1.7; font-size:18px; width:calc(100% - 400px);}
    .main_how_list li{margin-bottom:25px; padding-left:50px; padding-top:2px;}
    .main_how_num{width:36px; height:36px; font-size:20px;}
    .main_how_list .break{display:block;}
}
@media all and (min-width:1280px){
    .main_how_img{width:580px;}
    .main_how_list{line-height:1.8; font-size:19px; width:calc(100% - 630px); padding-top:30px;}
    .main_how_list li{margin-bottom:30px; padding-left:54px;}
    .main_how_num{width:42px; height:42px; font-size:24px; padding-top:2px;}
}
@media all and (min-width:1440px){
    .main_how_img{width:590px;}
    .main_how_list{width:calc(100% - 640px); padding-top:40px;}
}

/** subscription **/
.main_subscription_list{text-align:center; margin-bottom:20px;}
.main_subscription_list li{padding:15px 0;}
.main_subscription_list .books{width:70%; display:block; margin:0 auto;}
.main_subscription_list .caption{padding-top:5px; color:#333; font-weight:500; font-size:16px;}
.main_subscription_btn{width:100%; max-width:400px; margin:0 auto; height:68px; display:flex; justify-content:center; align-items:center; border-radius:40px; background-color:#333; color:#fff; font-size:19px; box-shadow:1px 1px 10px 3px rgba(0,0,0,0.1);}
.main_subscription_btn .icon{margin:0 8px -3px 0;}

@media all and (min-width:640px){
    .main_subscription_list .books{width:90%;}
    .main_subscription_list{display:flex; justify-content:space-between;}
    .main_subscription_btn{font-size:22px;}
    .main_subscription_btn .icon{margin:0 12px -5px 0;}
}
@media all and (min-width:1024px){
    .main_subscription_list{margin-bottom:30px;}
    .main_subscription_list .caption{font-size:18px;}
}
@media all and (min-width:1280px){
    .main_subscription_list{margin-bottom:50px;}
    .main_subscription_list .books{width:100%;}
    .main_subscription_list .caption{font-size:21px; padding-top:10px;}
}
@media all and (min-width:1440px){
    .main_content_wrap.subscription{border-radius:0 0 0 280px;}
}
@media all and (min-width:1680px){
    .main_content_wrap.subscription{border-radius:0 0 0 330px;}
}

/** 푸터 **/
footer{text-align:center; padding:30px 3%; background-color:#2c365a; padding-top:110px;}
.footer_wrap{max-width:1200px; margin:0 auto; position:relative; color:#fff;}
.footer_down{display:block; width:210px; height:50px; border:2px solid #4a86ff; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; font-size:17px; font-weight:500; margin:0 auto; background-color:rgba(255,255,255,0.5); color:#000; transition:0.2s; margin-bottom:20px;}
.footer_down:hover{background-color:rgba(255,255,255,0.95);}

.footer_tel{font-size:32px; font-weight:700;}
.footer_time{padding:15px 0;}
.footer_time_space{display:inline-block; padding:3px;}
.footer_bar{width:42px; height:2px; background-color:#fff; margin:0 auto 15px auto;}
.footer_add{font-style:normal; line-height:1.7;}
.footer_add_space{display:inline-block; padding:0 5px;}

.footer_sns{width:200px; display:flex; flex-direction:row; justify-content:space-between; margin:20px auto 0 auto;}
.footer_sns a{width:54px; height:54px; display:flex; justify-content:center; align-items:center; background-color:#fff; border-radius:50%;}
.footer_sns img{max-width:27px; width:60%;}

@media all and (min-width:640px){
    footer{padding:35px 3%;}
}
@media all and (min-width:1024px){
    footer{padding:35px 2.5%;}
    .footer_wrap{display:flex; justify-content:space-between;}
    .footer_left{text-align:left;}
    .footer_sns{margin:0;}
    .footer_bar{margin:0 0 10px 0;}
    .footer_time_space, .footer_add_space{padding:0 15px 0 0;}
    
    .footer_down{position:absolute; right:0; top:0;}
}
@media all and (min-width:1280px){
    footer{padding:60px 0 55px 0; padding-top:190px;}
    .footer_wrap{display:flex; justify-content:space-between;}
    .footer_left{text-align:left; font-size:16px;}
    .footer_tel{font-size:34px;}
    .footer_sns{margin:0;}
    .footer_bar{margin:7px 0 15px 0;}
    .footer_add{line-height:1.8;}
    .footer_time_space, .footer_add_space{padding:0 15px 0 0;}
}


/** 퀵네비 **/
.quick_nav{position:fixed; right:10px; top:70px; width:70px; height:70px; border-radius:50%; background-color:rgba(74,134,255,0.9); color:#fff; font-size:13px; text-align:center; z-index:100; cursor:pointer;}
.quick_nav_icon{width:30px; display:block; margin:9px auto 5px auto;}

@media all and (min-width:1280px){
    .quick_nav{right:20px; top:140px; width:84px; height:84px; border-radius:50%; background-color:rgba(74,134,255,0.9); font-size:14px; z-index:100;}
    .quick_nav_icon{width:auto; margin:11px auto 8px auto;}
}
@media all and (min-width:1440px){
    .quick_nav{right:auto; left:calc(50% + 570px);}
}

/** 스크롤 버튼 **/
.scroll{position:fixed; right:12px; bottom:30px; z-index:1000; font-size:32px; color:#bbb; opacity:0.9; cursor:pointer;}
@media all and (min-width:1280px){
    .scroll{right:auto; left:calc(50% + 580px); bottom:80px; font-size:36px;}
}
@media all and (min-width:1440px){
    .scroll{left:calc(50% + 640px); bottom:80px;}
}

/** 팝업 관련 **/
.popup_wrap{position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(255,255,255,0.7); z-index:10000;}
.popup_area{position:absolute; left:0; top:0; width:100%; height:100%;}
.popup_colse{position:absolute; right:12px; top:15px; z-index:1000; cursor:pointer;}
.popup_colse .close{width:24px;}

@media all and (min-width:1280px){
    .popup_area{width:768px; height:680px; left:50%; top:49%; transform:translate(-50%,-50%); box-shadow:0 0 18px 8px rgba(0,0,0,0.1);}
    .popup_colse{position:absolute; right:25px; top:20px; z-index:1000; cursor:pointer;}
    .popup_colse .close{width:29px;}
}
@media all and (min-width:1440px){
    .popup_area{width:768px; height:720px;}
}

/** 로그인 **/
.popup_login_iframe, .popup_agree_iframe, .popup_subscription_iframe{border:0; width:100%; height:100%;}

.login_wrap, .idpw_wrap{}
.login_area{width:74%; position:absolute; left:50%; top:50%; transform:translate(-50%,-51%); max-width:360px;}
.login_logo{width:175px; display:block; margin:0 auto 25px auto;}
.login_input_wrap{border-radius:16px; background-color:#fff;  box-shadow:0 2px 8px 2px rgba(0,0,0,0.05); padding:5px 10px; margin-bottom:10px;}
.login_input_caption{padding:8px 0 2px 10px; color:#888; font-size:13px;}
input.login_input{width:100%; height:38px; line-height:38px; padding-left:35px; background-repeat:no-repeat; background-position:9px 50%; background-size:19px; font-size:15px; color:#333;}

.login_box{display:flex; justify-content:space-between; font-size:13px; font-weight:500; padding:12px 1px 0 1px;}
.login_search{display:flex; justify-content:space-between; align-items:center;}
.login_search a{color:#555;}
.login_search li{position:relative;}
.login_search li:after{content:''; display:inline-block; width:1px; height:9px; background-color:#666; margin:0 7px 0 8px; vertical-align:0;}
.login_search li:last-child:after{display:none;}
.login_btn{width:100%; display:block; height:44px; line-height:44px; border-radius:16px; text-align:center; background-color:#009fe8; color:#fff; font-weight:500; font-size:20px; margin-top:15px;}
.login_sns{width:100%; display:block; height:44px; border-radius:16px; background-repeat:no-repeat; background-position:center; background-size:cover; margin:0 0 10px 0;}
.login_sns:last-child{margin:0;}

.idpw_area{width:250px; position:absolute; top:50%; left:50%; transform:translate(-50%,-55%);}
.login_join_area{padding:45px 0 0 0;}
.login_join_text{text-align:center; font-size:14px; letter-spacing:-0.5px; padding:0 0 15px 0;}
.login_join_btn{width:100%; display:block; height:44px; line-height:44px; border-radius:16px; text-align:center; background-color:#333; color:#fff; font-weight:500; font-size:18px;}

@media all and (min-width:768px){
    .login_input_caption{font-size:14px;}
    input.login_input{height:42px; line-height:42px; padding-left:45px; background-position:10px 50%; background-size:22px; font-size:18px;}   
    .login_box{font-size:15px; font-weight:400;}
    .login_keep .check_bullet{width:24px; height:24px;}
    .login_btn, .login_join_btn{height:48px; line-height:48px; font-size:22px;}
    .login_join_text{font-size:16px; letter-spacing:0; padding:0 0 20px 0;}
}

/** 아이디/비번 찾기 **/
h3.idpw_caption{font-size:24px; font-weight:500; margin:0 0 35px 0; height:44px; position:relative; text-align:center;}
h3.idpw_caption:after{content:''; position:absolute; width:60px; height:1px; background-color:#333; bottom:0; left:50%; transform:translateX(-50%);}
input.search_name, input.search_email, input.search_id{width:100%; height:42px; line-height:42px; border-radius:16px; padding:0 0 0 20px; background-color:#fff; margin:0 0 10px 0; font-size:14px;}

.input_search_id, .input_search_pw, .id_search_box, .pw_search_box{display:none;}
.input_search_id:checked ~ .idpw_tabs .radio_label.one .radio_bullet{background:url(../images/input_radio_black.png) no-repeat; background-size:100%; background-color:#fff;}
.input_search_pw:checked ~ .idpw_tabs .radio_label.two .radio_bullet{background:url(../images/input_radio_black.png) no-repeat; background-size:100%; background-color:#fff;}
.input_search_id:checked ~ .id_search_box{display:block;}
.input_search_pw:checked ~ .pw_search_box{display:block;}

.idpw_tabs{padding:0 10px 15px 10px; display:flex; justify-content:space-between; font-weight:500; font-size:14px;}
.idpw_tabs .radio_bullet{border:0; background-color:#fff;}


@media all and (min-width:640px){
    .idpw_area{width:300px;}
    h3.idpw_caption{font-size:26px; height:48px; margin:0 0 40px 0;}	
    h3.idpw_caption:after{width:66px;}
   .idpw_tabs{padding:0 15px 20px 15px; font-size:16px;}
    
    input.search_name, input.search_email, input.search_id{font-size:16px;}
}
@media all and (min-width:768px){
    .idpw_area{width:350px;}
    h3.idpw_caption{font-size:26px; height:48px; margin:0 0 50px 0;}
}

/** 회원가입 동의 **/
.member_wrap{max-width:768px; margin:0 auto; padding:40px 3% 20px 3%;}
.member_area{margin:0 auto; padding:65px 3% 20px 3%;}
.member_caption{font-size:20px; font-weight:500; text-align:center; padding:0 0 15px 0; color:#333;}
.member_caption .normal{font-weight:400;}
.member_caption_text{text-align:center; margin:0 0 30px 0; color:#666; line-height:1.3;}

h3.member_agree_caption{font-weight:500; color:#444; padding:0 0 10px 1px; border-bottom:1px solid #666; position:relative; font-size:16px; margin:0 0 10px 0;}
.member_agree_caption span{position:absolute; right:1px; font-size:14px; top:4px; color:#666; font-weight:400; display:none;}

.member_iframe{width:100%; border:0; height:170px; background-color:#fff; border-radius:4px; display:block;}

.member_agree{text-align:right; border-top:1px solid #dadada; padding:10px 1px 0 0; margin:10px 0 20px 0;}
.check_label.agree{justify-content:flex-end; padding:10px 1px 20px 0;}
.check_label.agree .check_bullet{background-image:url(../images/input_check_black.png);}

@media all and (min-width:768px){
    .member_wrap{padding:50px 3% 25px 3%;}
    .member_iframe{height:180px;}
    .check_label.agree:nth-of-type(2){padding:10px 1px 15px 0;}
    .check_label.agree .check_bullet{width:24px; height:24px;}
}

/** 마이페이지 **/
.account_table > li{margin-bottom:15px;}
li.account_blue .account_input{background-color:#4a86ff;}
li.account_blue .account_input::placeholder{color:#fff;}
li.account_blue .account_input:focus::-webkit-input-placeholder{color:transparent;}
li.account_blue .account_input:focus:-moz-placeholder{color:transparent;}
li.account_blue .account_input:focus::-moz-placeholder{color:transparent;}
li.account_blue .account_input:focus:-ms-input-placeholder{color:transparent;}
.account_table > li:last-child{margin-bottom:0;}
.account_caption{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; font-weight:400; background-color:#2c365a; border-radius:15px; color:#fff; width:100%; height:42px; margin-bottom:10px;}

.account_content{width:100%; border-radius:20px; color:#111;}
.account_input{display:block; width:100%; height:42px; background-color:#fff; color:#111; padding-left:0; border-radius:15px; text-align:center; font-size:16px;}
.account_input::placeholder{color:#aaa;}

.account_content.gender{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; background-color:#fff; border-radius:15px; height:42px;}
.radio_label.gender:first-of-type{margin-right:25px;}
.radio_label.gender .radio_bullet{background-color:#f4f4f4; width:22px; height:22px; border:0; border-radius:50%; margin:0 0 0 10px; transition:0.2s;}

.account_content.birth{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}

.account_select.year{width:38%;}
.account_select.month{width:30%;}
.account_select.day{width:30%;}

.account_select{display:block; width:100%; height:42px; background-color:#fff; color:#111; border-radius:20px; text-align:center; font-size:16px;}

.account_input.email{margin-bottom:10px;}
.account_confirm{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; border:1px solid #4a86ff; border-radius:15px; color:#4a86ff; height:42px; width:100%; transition:0.2s;}
.account_confirm:hover{background-color:#4a86ff; color:#fff;}

.account_content.level{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center; background-color:#fff; border-radius:20px; height:42px; font-size:12px; padding:0 11px;}
.account_level{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.account_level li{background-color:#f4f4f4; color:#808080; border-radius:4px; margin:0 2px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; transition:0.2s; width:20px; height:20px; font-size:13px; padding-top:2px; cursor:pointer;}
.account_level .active{background-color:#4a86ff; color:#fff;}

.account_content.level span{cursor:pointer;}

.check_label.account{color:#414141; padding:10px 0 0 3%;}
.check_link.account{color:#6d63cb; padding-left:6px;}

@media all and (min-width:480px){
    .account_content.email{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
    .account_input.email{width:calc(100% - 200px); margin-bottom:0;}
    .account_confirm{width:190px;}
    
    .account_content.level{font-size:14px; padding:0 20px;}
    .account_level li{margin:0 3px; width:24px; height:24px; font-size:13px; padding-top:3px;}
}

@media all and (min-width:640px){
    .account_input.email{width:calc(100% - 200px);}
    .account_confirm{width:190px;}    

    .account_input.email{width:calc(100% - 220px);}
    .account_confirm{width:210px;}

    .account_content.level{height:44px; font-size:15px; padding:0 30px; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
    .account_level{margin:0 15px;}
    .account_level li{margin:0 4px; width:24px; height:24px; font-size:14px; padding-top:2px;}
}
@media all and (min-width:768px){
    .account_table > li{display:-webkit-box; display:-ms-flexbox; display:flex; background-color:#fff; border-radius:15px; height:48px; margin-bottom:10px; overflow:hidden;}
    .account_caption{width:28%; padding-left:4%; height:100%; -webkit-box-pack:start; -moz-box-pack:start; -ms-flex-pack: start; -webkit-justify-content:flex-start; justify-content:flex-start;}
    .account_table.profile .account_caption{background-color:#a4b2f2;}
    .account_content{-webkit-box-pack:start; -moz-box-pack:start; -ms-flex-pack: start; -webkit-justify-content:flex-start; justify-content:flex-start;   -webkit-box-align:center; -ms-flex-align:center; align-items:center; padding:0 4%; width:71%;}
    
    .account_content.birth{-webkit-box-pack:start; -moz-box-pack:start; -ms-flex-pack: start; -webkit-justify-content:flex-start; justify-content:flex-start;}
    
    .account_content.birth .account_select{width:100px; margin-right:15px;}
    
    li.account_blue{background-color:#4a86ff;}
    .account_content.gender{height:100%; -webkit-box-pack:start; -moz-box-pack:start; -ms-flex-pack: start; -webkit-justify-content:flex-start; justify-content:flex-start;}
    .radio_label.gender:first-of-type{margin-right:35px;}
    
    .account_input{text-align:left; height:100%; border-radius:0; background:none;}
    .account_select{width:50%; height:100%; text-align:left;}

    .account_confirm{width:200px; height:38px;}
    
    .account_input.email{width:calc(100% - 210px);}

    .account_content.level{height:100%; -webkit-box-pack:start; -moz-box-pack:start; -ms-flex-pack: start; -webkit-justify-content:flex-start; justify-content:flex-start; padding:0 0 0 3%;}
    .account_level{margin:0 10px;}
    .account_level li{background-color:#f4f4f4; color:#808080; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; transition:0.2s; margin:0 4px; width:24px; height:24px; font-size:14px; padding-top:2px;}  
    
    .check_label.account{padding:15px 0 0 15px;}
    .check_label.account .check_bullet{margin:0 8px -1px 0;}
}
@media all and (min-width:960px){
    .account_table > li{height:50px; margin-bottom:12px;}
    .account_caption{width:240px; padding-top:1px;}
    .account_content{width:calc(100% - 240px);}
    
    .account_select{width:310px;}
    .account_content.email{-webkit-box-pack:start; -moz-box-pack:start; -ms-flex-pack: start; -webkit-justify-content:flex-start; justify-content:flex-start;}
    .account_input.email{width:310px; margin-right:15px;}
    .account_confirm{width:224px;}
    
    .account_content.level{font-size:16px;}
    .account_level{margin:0 20px;}
    .account_level li{margin:0 5px; width:28px; height:28px; font-size:15px; padding-top:3px;}
    
    .check_label.account .check_bullet{width:22px; height:22px;}
}
@media all and (min-width:1280px){
    .check_label.account .check_bullet{width:24px; height:24px; margin-right:10px;}
}
@media all and (min-width:1440px){
    .account_table > li{height:52px;}
    .account_confirm{height:40px;}
}

/** 회원가입 **/
.member_join_wrap{max-width:768px; margin:0 auto; padding:30px 3% 25px 3%;}
.member_logo{width:175px; margin:0 auto 20px auto; display:block;}
.member_input_wrap{border-radius:16px; background-color:#fff; box-shadow:0 2px 8px 2px rgba(0,0,0,0.05); padding:4px 10px; margin-bottom:9px;}
.member_input_caption{padding:5px 0 1px 10px; color:#888; font-size:13px;}
input.member_input{width:100%; height:38px; line-height:38px; padding-left:35px; background-repeat:no-repeat; background-position:9px 50%; background-size:19px; font-size:15px; color:#555;}
.member_confirm{display:flex; justify-content:space-between;}
.member_confirm .check_label{width:120px;}
.member_confirm .member_input{width:calc(100% - 15px);}
.member_input_line{height:1px; margin:4px 0; border-bottom:1px dashed #ccc;}

input.member_input.add{width:180px;}
.member_zip_btn{display:inline-block; width:110px; height:38px; line-height:34px; border:2px solid #ddd; border-radius:6px; text-align:center; color:#666;}

.btn_black_white.member, .btn_white_gray.member, .btn_sky_white.member{width:49%; max-width:200px;}

@media all and (min-width:768px){
    .check_wrap.member_agree .label .bullet_check{top:2px;}	
    .member_agree{padding:12px 1px 0 0; margin:15px 0 30px 0;}	

    h3.member_agree_caption, h3.member_join_caption{font-size:20px;}

    .member_logo{margin-bottom:30px;}
    .member_input_wrap{margin-bottom:15px; padding:6px 15px;}
    .member_input_caption{padding:6px 0 2px 10px; font-size:14px;}
    input.member_input{height:42px; line-height:42px; padding-left:45px; background-position:10px 50%; background-size:22px; font-size:17px; color:#333;}
    .member_confirm .check_bullet{width:22px; height:22px;}
    .member_input_line{margin:6px 0;}
    input.member_input.add{width:200px;}
    .member_zip_btn{width:132px; height:42px; line-height:38px; font-size:16px;}
    
    .btn_black_white.member, .btn_white_gray.member, .btn_sky_white.member{height:54px; line-height:54px; font-size:21px;}
}

/** 회원가입 완료 **/
.member_complete{position:absolute; left:50%; top:49%; transform:translate(-50%,-50%); text-align:center; width:320px;}
.member_complete_text{line-height:1.5; font-weight:500; color:#333; font-size:20px;}
@media all and (min-width:640px){
    .member_complete{width:500px;}
    .member_complete_text{font-size:24px;}    
}

/** 교재 선택 **/
.book_title{background-color:#009fe8; color:#fff; text-align:center; font-size:21px; height:54px; display:flex; justify-content:center; align-items:center; font-weight:300; position:fixed; width:100%; left:0; top:0;}
.book_title b{font-weight:400; padding-left:6px;}
.book_select_wrap{padding:60px 4% 20px 4%;}
.book_select_list li{display:flex; align-items:center; padding:20px 0; border-bottom:1px dotted #aaa;}
.book_select_list li:last-child{border:0;}
.book_select_img{width:38%;}
.book_select_img .book{width:100%;}
.book_select{padding-left:5%; line-height:1.7;}
.book_select_name{font-size:19px; color:#333;}
.book_select_price{color:#009fe8; font-size:18px;}
.book_select_price b{font-size:21px;}
.book_select_count{font-size:18px; display:flex; align-items:center; margin:5px 0 15px 0;}
.book_select_count_input{width:62px; height:28px; background-color:#fff; border-radius:5px; margin-left:6px; text-align:center; font-size:17px;}


@media all and (min-width:640px){
    .book_select_img{padding-left:10%; width:42%;}
    .book_select_count{margin:5px 0 20px 0;}
    
    .btn_sky_white.buy{width:200px;}
}
@media all and (min-width:768px){
    .book_title{font-size:26px; height:68px;} 
    .book_select_wrap{padding:80px 4% 20px 4%;}
    .book_select_list{display:flex; flex-wrap:wrap;}
    .book_select_list li{width:33.33%; padding:25px 0; border:0; flex-wrap:wrap;}
    .book_select_img{width:100%; padding:0;}
    .book_select_img .book{width:auto; height:270px; display:block; margin:0 auto;}
    .book_select{padding:15px 0 0 0; text-align:center; width:100%;}
    .book_select_count{justify-content:center; margin:10px 0 20px 0;}
    .book_select_count_input{width:62px; height:30px;}
}

/** 교재 구매 **/
.book_order_wrap{padding:60px 4% 20px 4%;}
.book_order_list{}
.book_order_list li{display:flex; align-items:center; padding:10px 0; border-bottom:1px dotted #aaa;}
.book_order_list li:last-child{border:0;}
.book_order_img{width:35%;}
.book_order_img .book{width:100%;}
.book_order{padding-left:6%; line-height:1.6;}
.book_order_name{font-size:17px; color:#333;}
.book_order_price{color:#009fe8; font-size:16px;}
.book_order_price b{font-size:19px;}
.book_order_count{font-size:16px; display:flex; align-items:center; margin:5px 0 15px 0;}
.book_order_count_input{width:62px; height:28px; background-color:#fff; border-radius:5px; margin-left:6px; text-align:center; font-size:17px;}

.book_order_btns{display:flex;}
.book_modify_btn{display:block; width:80px; height:36px; line-height:35px; background-color:#009fe8; color:#fff; border-radius:12px; font-size:16px; text-align:center;}
.book_delete_btn{display:block; width:80px; height:36px; line-height:35px; background-color:#333; color:#fff; border-radius:12px; font-size:16px; text-align:center;}

.delivery_info{padding:20px 0 0 0;}

.delivery_input_wrap{border-radius:16px; background-color:#fff; box-shadow:0 2px 8px 2px rgba(0,0,0,0.05); padding:12px 15px; margin-bottom:9px; display:flex; align-items:center; justify-content:space-between;}
.delivery_input_caption{width:90px; color:#777; font-size:14px;}
input.delivery_input{width:calc(100% - 100px); height:22px; line-height:22px; padding-left:0; font-size:16px; color:#333;}
.delivery_input_add{width:calc(100% - 100px);}

.delivery_input_line{height:1px; margin:10px 0; border-bottom:1px dashed #ccc;}

input.delivery_input.add{width:100px;}
input.delivery_input.add_2{width:100%;}
.delivery_zip_btn{display:inline-block; width:88px; height:34px; line-height:30px; border:2px solid #ddd; border-radius:6px; text-align:center; color:#666;}

.delivery_price{color:#009fe8; font-size:16px; width:calc(100% - 100px); height:22px; line-height:22px;}
.delivery_price b{font-size:18px;}

.btn_black_white.order{width:100%;}

@media all and (min-width:640px){
    .book_order_wrap{padding:80px 4% 25px 4%;}
    
    .book_order_list{display:flex; flex-wrap:wrap; justify-content:center;}
    .book_order_list li{width:33.33%; padding:10px 0; border:0; flex-wrap:wrap;}
    .book_order_img{width:100%; padding:0;}
    .book_order_img .book{width:auto; height:220px; display:block; margin:0 auto;}
    .book_order{padding:5px 0 0 0; text-align:center; width:100%;}
    .book_order_count{justify-content:center; margin:10px 0 15px 0;}
    .book_order_count_input{width:62px; height:30px;}
    .book_order_btns{display:flex; justify-content:center;}    
    
    .delivery_info{padding:25px 0 0 0;}

    .delivery_input_wrap{padding:18px 30px; margin-bottom:10px;}
    .delivery_input_caption{width:120px; color:#777; font-size:16px;}
    input.delivery_input{width:calc(100% - 130px); font-size:17px;}
    .delivery_input_add{width:calc(100% - 130px);}

    .delivery_input_line{margin:15px 0;}

    input.delivery_input.add{width:120px;}
    .delivery_zip_btn{width:100px; height:36px; line-height:32px;}

    .delivery_price{font-size:17px; width:calc(100% - 130px);}
    .delivery_price b{font-size:19px;}
    
    .btn_black_white.order{width:200px;}
}

/** 주문내역 **/
.book_order_table{width:100%; border-collapse:collapse; margin-top:15px; min-width:600px;}
.book_order_table th, .book_order_table td{border:1px solid #ddd;}
.book_order_table th{height:42px; font-weight:500; color:#fff; background-color:#555;}
.book_order_table td{text-align:center; padding:10px 0; color:#333; background-color:#fff;}
.book_order_table .book{display:block; height:80px; margin:0 auto 5px auto;}

.table_page{display:flex; justify-content:center; padding-top:25px; font-size:15px;}
.table_page a, .table_page span{margin:0 6px; color:#616161;}
.table_page a:hover{color:#009fe8;}
.table_page a.active{color:#009fe8; font-weight:600;}

@media all and (min-width:640px){
    .table_page{padding-top:30px; font-size:16px;}
    .table_page a, .table_page span{margin:0 9px;}
}

/** 메인 팝업 **/
#popup_main_bg{position:fixed; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.7); z-index:10000;}
.popup_main{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:300px;  background-color:#fff;}
.popup_main_iframe{display:block; width:100%; height:305px; border:0; overflow:hidden;}


@media all and (min-width:640px){
    .popup_main{width:400px;}
    .popup_main_iframe{height:405px; border:0;}
}
@media all and (min-width:1024px){
    .popup_main{width:450px;}
    .popup_main_iframe{height:455px; border:0;}
}
@media all and (min-width:1280px){
    .popup_main{width:500px;}
    .popup_main_iframe{height:505px; border:0;}
}
@media all and (min-width:1440px){
    .popup_main{width:600px;}
    .popup_main_iframe{height:605px; border:0;}
}

/** 팝업 모음 **/
#popup_1, #popup_2, #popup_3, #popup_4{width:100%; position:fixed; z-index:1000; top:50px; left:50%; transform:translateX(-50%);}
.popup_img{width:100%;}
.app_download_close{position:absolute; right:3.5%; top:3.5%; width:24px; cursor:pointer;}
.app_download_ios_btn{position:absolute; right:4.5%; bottom:35%; width:40%;}
.app_download_btn{position:absolute; left:50%; transform:translateX(-50%); bottom:5.2%; width:45%;}
.answer_download_btn{position:absolute; left:50%; transform:translateX(-50%); bottom:5.2%; width:58.63%;}
.voca_download_btn{position:absolute; left:50%; transform:translateX(-50%); bottom:5.2%; width:62.5%;}

@media all and (min-width:640px){
    #popup_1, #popup_2, #popup_3, #popup_4{width:400px;}
    .app_download_close{width:29px;}
}
@media all and (min-width:1280px){
    #popup_1, #popup_2, #popup_3, #popup_4{width:320px; top:138px; transform:translateX(0);}
    .app_download_close{width:22px;}
    #popup_1{left:0;}
    #popup_2{left:320px;}
    #popup_3{left:640px;}
    #popup_4{left:960px;}
}
@media all and (min-width:1440px){
    #popup_1, #popup_2, #popup_3, #popup_4{width:360px;}
    .app_download_close{width:25px;}
    #popup_2{left:360px;}
    #popup_3{left:720px;}
    #popup_4{left:1080px;}
}
@media all and (min-width:1680px){
    #popup_1, #popup_2, #popup_3, #popup_4{width:420px;}
    .app_download_close{width:29px;}
    #popup_2{left:420px;}
    #popup_3{left:840px;}
    #popup_4{left:1260px;}
}
@media all and (min-width:1920px){
    #popup_1, #popup_2, #popup_3, #popup_4{width:480px;}
    #popup_2{left:480px;}
    #popup_3{left:960px;}
    #popup_4{left:1440px;}
}