@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

*{margin:0; padding:0; box-sizing:border-box;}
li{list-style:none;}
a{text-decoration:none;}
input, textarea{outline:none;}
body{font-size:14px; font-family:'Noto Sans KR', sans-serif;}
textarea{font-family:'Noto Sans KR', 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;}

/******* 버튼 모음 ********/
.txt_center{text-align:center;}
.btn{display:inline-block; text-align:center;}
.white{border:1px solid #c9c9c9; background-color:#fff;}
.black{background-color:#363636; color:#fff;}
.gray{background-color:#666; color:#fff;}
.brown{background-color:#3b2314; color:#fff;}
.sea{background-color:#69b4d3; color:#fff;}
.radius_5{border-radius:5px;}

.main_wrap{min-width:1200px;}
.sub_wrap{min-width:1200px;}

/******* 임시 배너 ********/
.banner_in{width:1200px; position:absolute; top:150px; left:50%; margin-left:-600px; z-index:100;}
.banner_in a{display:block; width:110px; text-align:center; color:#fff;}
.banner_in img{width:100%;}
.banner_in div{background-color:#9dd2d8; line-height:32px; border-radius:5px; border:2px solid #fff;}

/******* 헤더 영역 ********/
header{position:fixed; width:100%; height:90px; left:0; top:0; background-color:rgba(255,255,255,0.9); z-index:1000;}
.header_in{position:relative; height:90px; margin:0 auto; width:1200px;}
.header_in .logo, .header_in .gnb, .header_in .lnb, .header_in .branch{position:absolute;}
.header_in .logo{left:0; top:20px;}
.header_in .logo img{width:200px;}

.header_in .branch{left:800px; top:-12px; font-weight:400; font-size:13px; color:#333; width:400px; text-align:right;}
.header_in .branch img{width:16px; margin-right:5px; vertical-align:-2px;}

.header_in .gnb{right:0; top:43px;}
.header_in .gnb a{color:#333; padding-left:10px;}
.header_in .gnb img{margin-right:4px; vertical-align:-3px; width:14px;}

.header_in .lnb{top:41px; left:350px;}
.header_in .lnb > ul > li{float:left; font-size:16px; position:relative;}
.header_in .lnb > ul > li > a{color:#333; display:block; padding:0 25px;}
.header_in .lnb > ul > li:hover > a{color:#d48b69;}
.header_in .lnb > ul > li.active > a{color:#d48b69;}
.header_in .lnb > ul > li:before{content:''; position:absolute; left:0; top:6px; height:13px; width:1px; background-color:#e2e2e2;}
.header_in .lnb > ul > li:last-child:after{content:''; position:absolute; right:0; top:6px; height:13px; width:1px; background-color:#e2e2e2;}
.sub{margin-top:26px; background-color:rgba(109,96,88,0.9); overflow:hidden; height:0;}
.sub > li > a{color:#dfcec3; display:block; line-height:30px; font-size:13px; padding:0 5px 0 15px;}
.sub > li:first-child > a{padding-top:8px;}
.sub > li > a:hover{color:#fff8f1;}

/******* 하단 공통 영역 ********/
.common{border-top:1px solid #eaeaea; padding:40px 0 50px 0; margin-top:40px;}
.common_in{width:1200px; margin:0 auto; overflow:hidden;}
.common_in .common_1, .common_in .common_2, .common_in .common_3, .common_in .common_4{float:left;}

.common_in > div{position:relative; height:190px;}
.common_in > div:after{content:''; position:absolute; top:2px; bottom:10px; right:0; width:1px; background-color:#eaeaea;}
.common_in > div:last-child:after{background:none;}

/******* 하단 공지사항 ********/
.common_in .common_1{width:376px; padding-right:48px;}
.common_1 h3{position:relative; color:#2d2d2d; font-size:18px; font-weight:500; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #eaeaea;}
.common_1 img{width:18px; position:absolute; right:1px; top:6px;}
.common_1 a{display:block; padding-left:14px; line-height:26px; background:url(../images/bullet_1.png) no-repeat 1px 10px; color:#777; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-right:2px;}
.common_1 a:hover{color:#3b2314; text-decoration:underline;}

/******* 하단 링크 ********/
.common_in .common_2{width:292px;}
.common_2 ul{width:192px; margin:0 auto; text-align:center;}
.common_2 a{display:block; height:42px; line-height:40px; background-color:#f7f7f7; border:1px solid #eaeaea; color:#434343; margin-bottom:4px;}
.common_2 a:hover{background-color:#383838; border:1px solid #383838; color:#fff;}

/******* 하단 고객센터 ********/
.common_in .common_3{width:290px; padding-left:52px;}
.common_3 h3{color:#2d2d2d; font-size:18px; font-weight:500;}
.common_3 .tel{font-size:28px; font-weight:500;}
.common_3 .holiday{color:#777; margin-bottom:10px;}
.common_3 ul{margin-top:5px;}
.common_3 li{float:left;}
.common_3 a{display:block; margin-right:18px; color:#1b1b1b; font-size:18px;}
.common_3 .fa-facebook-square, .common_3 .fa-instagram{font-size:23px;}
.common_3 .fa-bold{font-size:20px; vertical-align:1px;}

/******* 하단 NEW ********/
.common_4{width:242px; text-align:center; padding-left:25px;}
.common_4 h3{color:#2d2d2d; font-size:18px; font-weight:500; padding-bottom:6px;}
.common_4 li{display:inline-block; vertical-align:middle;}
.common_4 #newbook_srolling{position:relative; width:125px; height:154px; overflow:hidden;}
.common_4 #newbook_srolling img{width:120px; height:154px; margin:0 auto;}
.common_4 #p_click, .common_4 #n_click{cursor:pointer;}
.common_4 li:first-child{padding-right:10px;}
.common_4 li:last-child{padding-left:15px;}

/******* 푸터 영역 ********/
footer{background-color:#363636; color:#999;}
.footer_in{width:1200px; height:120px; margin:0 auto; position:relative;}
.footer_in .logo_footer, .footer_in .address, .footer_in .private{position:absolute;}
.footer_in .logo_footer{left:0; top:33px; width:200px;}
.footer_in .address{left:250px; top:28px; font-size:13px; line-height:1.6;}
.footer_in .address span{padding-right:10px;}
.footer_in .private{right:0; top:25px; width:128px;}
.footer_in .private a{display:block; line-height:30px; height:32px; border:1px solid #555; text-align:center; margin-bottom:4px; color:#999; font-size:13px;}

/******* 메인비주얼 영역 ********/
.main_visual .visual_1, .main_visual .visual_2, .main_visual .visual_3{background-position:center; background-repeat:no-repeat; background-size:cover; height:700px;}
.main_visual .visual_1{background-image:url(../images/main_visual_1.jpg);}

/******* 메인 공통 ********/
.main_title{text-align:center; margin-bottom:40px;}
.main_title h2{font-weight:300; font-size:32px;}
.main_title h4{font-weight:400; font-size:16px; margin-bottom:15px;}
.main_title .txt{color:#777;}

/******* 메인 진독개 소개 ********/
.main_content_1{padding:45px 0 60px 0; width:1200px; margin:0 auto;}
.list_intro{overflow:hidden; color:#777;}
.list_intro img{width:100%; margin-bottom:18px;}
.list_intro h3{font-weight:500; color:#333;}
.list_intro li{float:left; width:23.5%; margin-right:2%; border:1px solid #e9e9e9; text-align:center; padding-bottom:25px;}
.list_intro li:last-child{margin-right:0;}
.list_intro .btn{width:96px; height:28px; line-height:25px; font-size:13px; color:#666;}
.list_intro .btn:hover{background-color:#3b2314; border:1px solid #3b2314; color:#fff;}
.list_intro .txt{height:75px; display:table-cell; vertical-align:middle; width:280px;}

/******* 메인 서비스 안내 ********/
.main_content_2{position:relative; height:650px;}
.main_content_2 .bg_1, .main_content_2 .bg_2, .main_content_2 .bg_3, .main_content_2 .bg_4{background-position:center; background-repeat:no-repeat; background-size:cover; height:650px; position:absolute; left:0; top:0; width:100%; display:none;}
.main_content_2 .bg_1{background-image:url(../images/main_service_1.jpg); display:block;}
.main_content_2 .bg_2{background-image:url(../images/main_service_2.jpg);}
.main_content_2 .bg_3{background-image:url(../images/main_service_3.jpg);}
.main_content_2 .bg_4{background-image:url(../images/main_service_4.jpg);}
.content_2{width:1200px; margin:0 auto; overflow:hidden;}
.content_2_in{width:50%; padding:100px 0 0 50px;}
.content_2_in h4{font-size:27px; color:#2d2d2d; font-weight:300; position:relative; margin-bottom:60px;}
.content_2_in h4 div{font-size:16px; color:#333; font-weight:400;}
.content_2_in h4:after{content:''; position:absolute; top:90px; left:0; width:30px; height:1px; background-color:#2d2d2d;}
.content_2_in h2{font-size:32px; color:#2d2d2d; font-weight:500; margin-bottom:10px;}
.content_2_in .txt{color:#555; height:130px;}
.content_2_in .btn{width:140px; line-height:38px;}
.number_box{position:absolute; width:1100px; left:50%; top:480px; margin-left:-550px; z-index:100;}
.number_box .number{font-size:15px; color:#626262; width:100px;}
.number_box .number_in{display:inline-block; text-align:center; width:60px;}
.number_box .number span{vertical-align:-6px; cursor:pointer;display:inline-block;}
.number_box .number b{font-weight:400; color:#333; font-size:16px;}
.content_2_in .white{border:0; color:#434343;}

/******* 메인 이달의 추천 로드맵 ********/
.main_content_3{padding:45px 0 60px 0; width:1200px; margin:0 auto;}
.list_roadmap{overflow:hidden; color:#777;}
.list_roadmap .book_img{width:100%; height:362px; margin-bottom:18px; background-position:center; background-size:cover;}
.list_roadmap h3{font-weight:500; color:#333; padding:0 15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.list_roadmap li{float:left; width:23.5%; margin-right:2%; border:1px solid #e9e9e9; text-align:center; padding-bottom:25px;}
.list_roadmap li:last-child{margin-right:0;}
.list_roadmap .btn{width:96px; height:28px; line-height:25px; font-size:13px; color:#666;}
.list_roadmap .btn:hover{background-color:#3b2314; border:1px solid #3b2314; color:#fff;}
.list_roadmap .txt{height:45px; display:table-cell; vertical-align:middle; width:280px;}

/******* 메인 진독개 가맹 안내 ********/
.main_content_4{background:url(../images/main_joining.jpg) no-repeat center top; background-size:cover; height:650px;}
.content_4_in{overflow:hidden; color:#555;}
.content_4_in h3{color:#2d2d2d; font-size:22px; font-weight:500; margin-bottom:5px;}

.content_4_in .left{float:left; width:50%; position:relative; height:400px;}
.content_4_in .left_in{position:absolute; right:25px; top:145px;}
.content_4_in .left_in .txt{font-size:13px; margin-bottom:15px;}
.content_4_in .left_in .btn{border:0; width:120px; line-height:36px; color:#444; border:1px solid #c9c9c9;}

.content_4_in .right{float:right; width:50%; padding:45px 0 0 55px; color:#777;}
.content_4_in .right_in{width:450px;}
.content_4_in .right_in h3{margin-bottom:10px;}
.content_4_in .right_in input[type=text]{display:block; width:100%; height:42px; padding-left:10px; margin-bottom:5px; border:1px solid #dcdcdc;}
.content_4_in .right_in textarea{display:block; width:100%; height:100px; padding:10px; margin-bottom:5px; border:1px solid #dcdcdc;}

.box_private{width:100%; height:100px; padding:10px; margin-bottom:10px; border:1px solid #dcdcdc; overflow:auto; background-color:#fff; font-size:12px;}
.box_private h4{padding-bottom:5px; font-weight:500; font-size:13px;}

.content_4_in .right_in input[type=checkbox]{display:none;}
.content_4_in .right_in label{padding-left:28px; position:relative; margin-right:5px;}
.content_4_in .right_in label span{position:absolute; width:22px; height:22px; background-color:#fff; border:1px solid #dcdcdc; left:0; top:0;}
.content_4_in .right_in input[type=checkbox]:checked + label span{background-image:url(../images/check_black.png); background-size:100%;}
.content_4_in .right_in .btn{width:160px; line-height:44px; font-size:16px; margin-top:25px;}

/******* 서브 비주얼 ********/
.sub_visual_1, .sub_visual_2, .sub_visual_3, .sub_visual_4, .sub_visual_5, .sub_visual_6{background-position:center; background-repeat:no-repeat; background-size:cover;}
.sub_visual_1{background-image:url(../images/sub_visual_1.jpg);}
.sub_visual_2{background-image:url(../images/sub_visual_2.jpg);}
.sub_visual_3{background-image:url(../images/sub_visual_3.jpg);}
.sub_visual_4{background-image:url(../images/sub_visual_4.jpg);}
.sub_visual_5{background-image:url(../images/sub_visual_5.jpg);}
.sub_visual_6{background-image:url(../images/sub_visual_6.jpg);}
.sub_visual_in{width:1200px; margin:0 auto; position:relative; height:390px;}

.visual_txt{position:absolute; font-size:12px;}

.sub_visual_in h2{font-size:53px; font-weight:700; opacity:0.95;}
.sub_visual_in h3{font-size:14px; font-weight:500; padding:0 0 5px 0; color:#555;}

.sub_visual_1 .visual_txt{right:0; top:111px; width:604px; color:#999;}
.sub_visual_1 .visual_txt h2{color:#7fcdd6;}

.sub_visual_2 .visual_txt{left:5px; top:111px; width:604px; color:#888;}
.sub_visual_2 .visual_txt h2{color:#fff;}

.sub_visual_3 .visual_txt{left:5px; top:111px; width:604px; color:#888;}
.sub_visual_3 .visual_txt h2{color:#c0ded6;}

.sub_visual_4 .visual_txt{right:0; top:111px; width:604px; color:#888;}
.sub_visual_4 .visual_txt h2{color:#fff;}

.sub_visual_5 .visual_txt{right:0; top:111px; width:604px; color:#888;}
.sub_visual_5 .visual_txt h2{color:#dddcd8;}

.sub_visual_6 .visual_txt{right:0; top:111px; width:604px; color:#888;}
.sub_visual_6 .visual_txt h2{color:#dddcd8;}

.navi_sub{position:absolute; width:100%; left:0; bottom:0; text-align:center;}
.navi_sub li{display:inline-block;}
.navi_sub a{display:block; width:190px; line-height:46px; background-color:#fff; color:#434343;}
.navi_sub a:hover{background-color:rgba(111,98,90,0.8); color:#fff;}
.navi_sub a.active{background-color:#6f625a; color:#fff;}

/******* 서브 공통 ********/
.sub_content{width:1200px; min-height:700px; margin:0 auto; padding:45px 0 100px 0;}
.sub_title{text-align:center; color:#777; margin-bottom:45px;}
.sub_title h2{font-weight:300; font-size:32px; color:#2d2d2d;}
.sub_title h2:after{content:''; display:block; width:52px; height:1px; background-color:#000; margin:16px auto 20px auto;}

/******* 1.1.인사말 
.sub_greeting{padding:20px 200px 0 200px;}
.sub_greeting h1{text-align:center; font-weight:400; font-size:42px; margin-bottom:10px;}
.sub_greeting h1 b{color:#00a3c3; padding-left:12px;}
.sub_greeting h3{font-weight:400; font-size:22px; text-align:center; margin-bottom:50px;}
.sub_greeting .strong{padding:20px 0 18px 30px; background-color:#fafafa; border:1px solid #eee; margin-bottom:25px;}
.sub_greeting h3 b{font-weight:500; color:#00a3c3;}
.content_p1{text-align:justify; line-height:1.7;}
.initial{padding-left:19px;}
.initial strong{color:#00a3c3;}
.name{text-align:center; padding-top:70px; font-size:20px;}
.name b{font-size:25px; font-weight:500; padding-left:5px;}
********/

/******* 1.1.인사말 변경 ********/
.sub_greeting{padding:20px 0 0 0; background:url(../images/bg_greeting.png) no-repeat; height:1885px;}
.greeting_top{height:637px; text-align:center; padding:30px 0 0 0; line-height:1.7; font-size:15px;}
.greeting_logo{width:270px; margin:0 0 15px 0;}
.greeting_top h1{font-weight:500; font-size:30px; padding:0 0 15px 0;}
.purpose_text{width:660px; margin:0 auto; text-align:left; padding:12px 0 0 0; line-height:1.8;}
.greeting_top .bold_1{font-weight:500; color:#00a0e2;}
.greeting_top .bold_2{font-weight:500; color:#f40c00;}

.greeting_bottom{position:relative; height:1228px; padding:115px 0 0 0;}
.greeting_bottom h1, .greeting_bottom h3{text-align:center; font-weight:500; width:880px; margin:0 auto 20px auto;}
.greeting_bottom h3{font-size:18px; margin-bottom:55px;}
.greeting_bottom h1{font-size:30px; line-height:1; padding:10px 0; border-top:2px solid #444; border-bottom:1px solid #444;}
.greeting_bottom_text{width:950px; margin:0 auto; text-align:justify; line-height:1.7; color:#666;}
.img_greeting_person{position:absolute; width:550px; bottom:0; right:100px;}

/******* 1.2.독서란? ********/
.pad_70{padding:0 70px 50px 70px; border-bottom:1px solid #333;}
.pad_110{padding:50px 110px 0 110px;}

.sub_top_1_1{height:319px; background:url(../images/sub_read_1.png) no-repeat; position:relative; margin-bottom:50px;}
.sub_top_1_1 .txt{position:absolute; left:580px; top:35px;}
.sub_top_1_1 .txt_top{color:#444; font-size:17px; margin-bottom:20px;}
.sub_top_1_1 .txt_top div{font-size:20px;}
.sub_top_1_1 h1{font-size:60px; font-weight:900; padding:0 0 0 0; border-top:1px solid #333; border-bottom:1px solid #333; width:276px; line-height:60px; padding-bottom:4px; margin-bottom:20px;}
.sub_top_1_1 h3{font-weight:500; font-size:22px; margin-bottom:5px;}
.sub_top_1_1 .txt b{font-weight:500; color:#333;}
.sub_top_1_1 .txt_bottom{color:#777;}

.read_txt{padding:50px 0; color:#777;}
.read_txt b{font-weight:400; color:#333;}

.read_list{overflow:hidden;}
.read_list li{width:47.5%; float:left; margin-right:5%; height:288px; border:1px solid #e2e2e2; background-repeat:no-repeat; background-size:cover; background-image:url(../images/sub_read_2_1.png); position:relative;}
.read_list li:last-child{margin-right:0; background-image:url(../images/sub_read_2_2.png);}
.read_list li div{position:absolute; width:100%; top:238px; left:0; color:#333; text-align:center;}
.read_list b{font-size:18px; font-weight:500;}
.read_list li:before{content:''; position:absolute; width:30px; height:30px; left:0; top:0; border-left:5px solid #e2e2e2;  border-top:5px solid #e2e2e2;}
.read_list li:after{content:''; position:absolute; width:30px; height:30px; right:0; bottom:0; border-right:5px solid #e2e2e2;  border-bottom:5px solid #e2e2e2;}

.read_title{overflow:hidden; width:720px; margin:0 auto;}
.read_title h2{text-align:center; font-size:35px; font-weight:500; line-height:1.35; padding:6px 0 9px 0;;}
.read_title div{font-weight:400; text-align:center; font-size:16px;}
.read_title li{float:left; height:110px;}
.read_title li:nth-child(2){width:620px;}
.read_title li:first-child, .read_title li:last-child{border-top:6px solid #c0ded5; border-bottom:6px solid #c0ded5; width:30px;}
.read_title li:first-child{border-left:6px solid #c0ded5;}
.read_title li:last-child{border-right:6px solid #c0ded5;}

.read_txt_2{padding:30px 0 45px 0; color:#333; text-align:center; font-size:22px; font-weight:500;}

.read_txt_3{padding:50px 0; text-align:center; color:#777; font-size:16px;}
.read_txt_3 b{font-weight:500; color:#333;}

.read_list_2{overflow:hidden;}
.read_list_2 li{float:left; width:30.5%; margin-right:4.25%; height:370px; background-color:#c0ded5; background-repeat:no-repeat; background-size:cover; padding-top:40px;}
.read_list_2 li:nth-child(1){background-image:url(../images/sub_read_3_1.png);}
.read_list_2 li:nth-child(2){background-image:url(../images/sub_read_3_2.png);}
.read_list_2 li:last-child{background-image:url(../images/sub_read_3_3.png); margin-right:0;}
.read_list_2 h4{font-size:18px; font-weight:500; text-align:center; position:relative;}
.read_list_2 h4:after{content:''; position:absolute; width:44px; height:2px; background-color:#4a4a4a; left:50%; margin-left:-22px; top:40px;}

/******* 1.3.진독개 소개 ********/
.sub_top_1_2{height:475px; background:url(../images/sub_intro_title.jpg) no-repeat; margin-bottom:60px;}
.sub_top_1_2 .txt{width:49%; text-align:center; padding-top:115px;}
.sub_top_1_2 .txt img{width:115px;}
.sub_top_1_2 .txt h3{font-size:30px; color:#3b2314; font-weight:500; padding:5px 0;}

.read_guide{margin-bottom:50px;}
.read_guide li{height:300px; background-color:#f7f7f7; border-bottom:1px solid #333; margin-bottom:45px; position:relative;}
.read_guide li:last-child{margin-bottom:0;}
.read_guide .img, .read_guide .txt{position:absolute;}
.read_guide .txt{color:#666;}
.read_guide .txt h4{color:#333; font-size:20px; font-weight:500; padding-bottom:15px;}

.intro_list{overflow:hidden;}
.intro_list li{float:left; width:31%; margin:0 3.5% 3.5% 0; text-align:center; padding:50px 0 0 0; border:1px solid #e2e2e2; position:relative;}
.intro_list li:nth-child(3n){margin-right:0;}
.intro_list li:before{content:''; position:absolute; width:30px; height:30px; left:0; top:0; border-left:5px solid #e2e2e2; border-top:5px solid #e2e2e2;}
.intro_list li:after{content:''; position:absolute; width:30px; height:30px; right:0; bottom:0; border-right:5px solid #e2e2e2; border-bottom:5px solid #e2e2e2;}
.intro_list h2{display:inline-block; width:36px; height:36px; line-height:36px; background-color:#c0ded5; color:#fff; font-size:19px;}
.intro_list h3{padding:15px 0 6px 0; font-size:19px; font-weight:500;}
.intro_list .txt{color:#777; margin-bottom:40px;}
.intro_list .bg{height:288px; background-repeat:no-repeat; background-size:cover;}

/******* 1.4.Why 진독개? ********/
.why_box{background-color:#f7f7f7; padding:40px 100px 50px 100px; border-bottom:1px solid #333; margin-bottom:40px;}
.why_box:last-child{margin-bottom:0;}
.why_title{overflow:hidden; width:230px; margin:0 auto;}
.why_title h2{text-align:center; font-size:60px; font-weight:900; line-height:1.1; padding-top:8px;}
.why_title h2 div{font-weight:500; font-size:18px;}
.why_title li{float:left; height:100px;}
.why_title li:nth-child(2){width:170px;}
.why_title li:first-child, .why_title li:last-child{border-top:6px solid #c0ded5; border-bottom:6px solid #c0ded5; width:30px;}
.why_title li:first-child{border-left:6px solid #c0ded5;}
.why_title li:last-child{border-right:6px solid #c0ded5;}

.why_box .txt{text-align:center; color:#777; padding:30px 0 35px 0;}
.why_list{overflow:hidden;}
.why_list li{float:left; width:30.5%; margin-right:4.25%; height:370px; background-repeat:no-repeat; background-size:cover; padding-top:40px; border:1px solid #e9e9e9;}
.why_list li:nth-child(1){background-image:url(../images/sub_why_1.jpg);}
.why_list li:nth-child(2){background-image:url(../images/sub_why_2.jpg);}
.why_list li:last-child{background-image:url(../images/sub_why_3.jpg); margin-right:0;}
.why_list h4{font-size:18px; font-weight:500; text-align:center; position:relative;}
.why_list h4:after{content:''; position:absolute; width:44px; height:2px; background-color:#4a4a4a; left:50%; margin-left:-22px; top:40px;}

.why_title.two li:first-child, .why_title.two li:last-child{border-top:6px solid #c8ccac; border-bottom:6px solid #c8ccac; width:30px;}
.why_title.two li:first-child{border-left:6px solid #c8ccac;}
.why_title.two li:last-child{border-right:6px solid #c8ccac;}

.why_list.two li{float:left; width:30.5%; margin-right:4.25%; height:370px; background-repeat:no-repeat; background-size:cover; padding-top:40px;}
.why_list.two li:nth-child(1){background-image:url(../images/sub_why_4.jpg);}
.why_list.two li:nth-child(2){background-image:url(../images/sub_why_5.jpg);}
.why_list.two li:last-child{background-image:url(../images/sub_why_6.jpg); margin-right:0;}

.why_title.three li:first-child, .why_title.three li:last-child{border-top:6px solid #fbdbcc; border-bottom:6px solid #fbdbcc; width:30px;}
.why_title.three li:first-child{border-left:6px solid #fbdbcc;}
.why_title.three li:last-child{border-right:6px solid #fbdbcc;}

.why_list.three{width:640px; margin:0 auto;}
.why_list.three li{float:left; width:46.5%; margin-right:7%; height:370px; background-repeat:no-repeat; background-size:cover; padding-top:40px;}
.why_list.three li:nth-child(1){background-image:url(../images/sub_why_7.jpg);}
.why_list.three li:nth-child(2){background-image:url(../images/sub_why_8.jpg); margin-right:0;}

/******* 2.1.독서로드맵 서비스 ********/
.sub_top_2_1{height:392px; background-color:#f7f7f7; position:relative; margin:65px 0 80px 0;}
.sub_top_2_1 .img, .sub_top_2_1 .txt{position:absolute;}
.sub_top_2_1 .img{left:36px; top:-33px;}
.sub_top_2_1 .txt{width:550px; right:10px; top:125px; color:#777; text-align:justify; line-height:1.6; font-size:16px; padding-left:70px;}
.sub_top_2_1 h3{color:#333; font-size:20px; font-weight:500; padding-bottom:15px;}
.sub_top_2_1 h3 span{font-size:17px; font-weight:400;}
.sub_top_2_1 h4{color:#444; font-size:16px; font-weight:500; padding-bottom:5px;}
.sub_top_2_1 h4 span{display:inline-block; width:4px; height:4px; background-color:#09C; vertical-align:3px; margin-right:8px; border-radius:50%;}

/******* 2.2.프리미엄 서비스 ********/
.sub_top_2_2{height:554px; background:url(../images/sub_premium_title.png) no-repeat; text-align:center; padding-top:350px; color:#777; line-height:1.6; margin-bottom:40px;}
.sub_top_2_2 h3{color:#333; font-size:22px; font-weight:500; padding:0 40px;}

.list_images{overflow:hidden;}
.list_images li{float:left; width:32%; margin:0 2% 2% 0;}
.list_images li:nth-child(3n){margin-right:0;}
.list_images img{width:100%;}

/******* 2.3.이용권 구매 ********/
.sub_top_2_3{height:449px; background:url(../images/sub_buy_1.png) no-repeat; background-size:cover; text-align:center; padding-top:285px; color:#666; line-height:1.5; margin-bottom:40px;}
.sub_top_2_3 h3{color:#333; font-size:24px; font-weight:500; padding-bottom:20px;}

.note_wrap{border:15px solid #f8f8f8; padding:20px 40px; margin:0 0 30px 0; line-height:1.8; font-size:14px; border-radius:2px; color:#666;}
.note_wrap h2{font-weight:500; font-size:18px; color:#444;}
.note_wrap b{font-weight:500; font-size:16px; color:#09C;}

/******* 데모버전 ********/
.free_demo_wrap{border:15px solid #f8f8f8; padding:40px 250px; margin:50px 0 0 0; line-height:1.8; font-size:15px; border-radius:2px; color:#555;}
.free_demo_wrap .btn{width:150px; height:42px; line-height:42px; font-weight:500; font-size:16px;}
.free_demo_wrap h3{color:#383838; font-weight:500;}

/** 쿠폰 3개짜리
.list_cupon{overflow:hidden;}
.list_cupon li{float:left; width:31%; margin:0 3.5% 3.5% 0; height:248px; background:url(../images/bg_cupon.png) no-repeat; background-size:100%; position:relative; text-align:center; overflow:hidden; color:#666; padding-top:38px;}
.list_cupon li:nth-child(3n){margin-right:0;}
.list_cupon .sale{position:absolute; right:0; top:0; width:90px;}
.list_cupon h2{font-size:30px; color:#333; line-height:1.1; height:52px; position:relative; margin-bottom:18px;}
.list_cupon h2:after{content:''; position:absolute; width:90px; height:1px; background-color:#404040; bottom:0; left:50%; margin-left:-45px;}
.list_cupon strong{color:#2e7999; font-size:17px;}

.list_cupon .btn{width:110px; height:34px; line-height:32px; border:1px solid #404040; color:#404040; font-weight:500; font-size:15px; margin-top:20px;}
.list_cupon .btn:hover{background-color:#404040; color:#fff;} **/

/** 쿠폰 4개짜리 **/
.coupon_title{font-weight:400; font-size:30px; padding:0 0 25px 0; text-align:center;}

.list_cupon{overflow:hidden; text-align:center;}
.list_cupon li{width:23.5%; height:188px; background:url(../images/bg_cupon.png) no-repeat; background-size:100%; position:relative; text-align:center; overflow:hidden; color:#666; padding-top:25px; display:inline-block;}
.list_cupon li:nth-child(4n){margin-right:0;}
.list_cupon .sale{position:absolute; right:0; top:0; width:70px;}
.list_cupon h2{font-size:22px; color:#333; line-height:1.1; height:38px; position:relative; margin-bottom:8px; font-weight:500;}
.list_cupon h2:after{content:''; position:absolute; width:90px; height:1px; background-color:#404040; bottom:0; left:50%; margin-left:-45px;}
.list_cupon strong{color:#2e7999; font-size:17px;}

.list_cupon .btn{width:110px; height:34px; line-height:32px; border:1px solid #404040; color:#404040; font-weight:500; font-size:15px; margin-top:12px;}
.list_cupon .btn:hover{background-color:#404040; color:#fff;}

/** 쿠폰 3개짜리 **/
.line_cupon{height:1px; border-top:1px dotted #bbb; margin:41px 0 40px 0;}

.list_cupon_2{overflow:hidden; width:900px; margin:0 auto;}
.list_cupon_2 li{float:left; width:31.5%; margin:0 2.75% 0 0; height:190px; background:url(../images/bg_cupon.png) no-repeat; background-size:100%; position:relative; text-align:center; overflow:hidden; color:#666; padding-top:25px;}
.list_cupon_2 li:nth-child(3n){margin-right:0;}
.list_cupon_2 .sale{position:absolute; right:0; top:0; width:70px;}
.list_cupon_2 h2{font-size:22px; color:#333; line-height:1.1; height:38px; position:relative; margin-bottom:8px; font-weight:500;}
.list_cupon_2 h2:after{content:''; position:absolute; width:90px; height:1px; background-color:#404040; bottom:0; left:50%; margin-left:-45px;}
.list_cupon_2 strong{color:#2e7999; font-size:17px;}

.list_cupon_2 .btn{width:110px; height:34px; line-height:32px; border:1px solid #404040; color:#404040; font-weight:500; font-size:15px; margin-top:12px;}
.list_cupon_2 .btn:hover{background-color:#404040; color:#fff;}

/******* 2.4.이용권 사용안내 ********/
.cupon_guide_top{height:449px; background:url(../images/sub_cupon_guide_1.png) no-repeat; background-size:cover; text-align:center; padding-top:60px; margin-bottom:40px;}
.cupon_guide_top h3{color:#333; font-size:22px; font-weight:500; padding-bottom:25px;}
.cupon_order_list{overflow:hidden; width:88%; margin:0 auto;}
.cupon_order_list li{float:left; width:17.6%; height:252px; color:#666;}
.cupon_order_list li:nth-child(2n-1){background-color:#fff; border-radius:10px; padding-top:46px;}
.cupon_order_list li:nth-child(2n){width:3%; line-height:252px;}
.cupon_order_list h4{font-size:15px; font-weight:500; height:70px; position:relative; color:#333; margin-bottom:25px;}
.cupon_order_list h4:after{content:''; position:absolute; width:50px; height:1px; background-color:#000; bottom:0; left:50%; margin-left:-25px;}

.cupon_guide_bottom{border-radius:16px; background-color:#f3f3f3; padding:35px 60px 50px 65px; color:#666; line-height:1.6;}
.cupon_guide_bottom h3{color:#333; font-size:22px; font-weight:500; padding-bottom:15px;}
.cupon_guide_bottom span{padding-right:15px;}

/******* 3.1.이달의 추천 로드맵 / 3.2.이달의 추천 케이스 ********/
.title_month{text-align:center; font-size:22px; margin-bottom:30px;}
.title_month img{width:36px; margin:0 35px; vertical-align:-10px;}

.sub_top_3_1{height:384px; background:url(../images/sub_recommend_1.jpg) no-repeat; background-size:cover; color:#555; line-height:1.5; margin-bottom:40px; overflow:hidden;}
.sub_top_3_1 .txt{float:right; width:655px; padding:125px 45px 0 0;}
.sub_top_3_1 .top{margin-bottom:25px; font-size:16px;}
.sub_top_3_1 .bottom{color:#666;}

.sub_top_3_1.case{height:384px; background:url(../images/sub_case_1.jpg) no-repeat; background-size:cover; color:#666; line-height:1.5; margin-bottom:40px; overflow:hidden;}

.month_list{border-top:1px solid #999;}
.month_list li{overflow:hidden; padding:20px 0; border-bottom:1px solid #999;}
.month_list .left{float:left; width:225px; height:291px; background-repeat:no-repeat; background-size:cover; border:1px solid #e9e9e9;}
.month_list .right{float:right; width:955px; height:291px; background-color:#f7f7f7; padding:75px 25px 0 65px; color:#777;}
.month_list h3{color:#383838; font-size:20px; font-weight:500;}
.month_list .author{font-size:16px; color:#616161; margin-bottom:20px;}

/******* 3.3.신간도서 ********/
.new_list{overflow:hidden;}
.new_list li{float:left; width:23.5%; margin:0 2% 3% 0; text-align:center;}
.new_list li:nth-child(4n){margin-right:0;}
.new_list .img{background-repeat:no-repeat; background-size:cover; height:365px; border:1px solid #e9e9e9; margin-bottom:15px;}
.new_list h4{color:#383838; font-size:16px; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.new_list .author{color:#666; padding-top:2px;}
.new_list .date{color:#888; font-size:13px; padding-top:4px;}

/******* 4.1.이벤트 ********/
.event_list{overflow:hidden;}
.event_list li{float:left; width:32.2%; margin:0 1.7% 3% 0; text-align:center;}
.event_list li:nth-child(3n){margin-right:0;}
.event_list .img{height:245px; background-repeat:no-repeat; background-size:cover; padding-top:14px; margin-bottom:12px;}
.event_list li:nth-child(2n-1) .img{background-color:#c0ded6;}
.event_list li:nth-child(2n) .img{background-color:#fbdbcc;}
.event_list h3, .event_list h4{color:#383838; font-weight:500;}
.event_list h3{font-size:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 25px 0 25px;}
.event_list .txt{color:#666; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:1px 25px 0 25px;} 
.event_list h4{font-size:16px;}
.event_list h4 span{color:#666; font-weight:400; font-size:14px;}
.event_list .date{font-size:13px; color:#999; padding-top:4px;}

/******* 5.1.가맹안내 ********/
.become_guide_list{overflow:hidden;}
.become_guide_list li{float:left; width:49%; margin:0 2% 2% 0; height:367px; background-repeat:no-repeat; background-size:cover; text-align:center; padding-top:38px; color:#383838; font-size:20px;}
.become_guide_list li:nth-child(2n){margin-right:0;}
.become_guide_list h4{color:#424242; font-weight:300; font-size:16px;}

.become_guide_box .txt_center{padding:30px 0 35px 0;}
.become_guide_box .txt_center img{width:110px;}

.become_guide_end{width:590px; height:367px; background:url(../images/sub_become_1_5.png) no-repeat; background-size:cover; background-color:#dddcd8; text-align:center; padding-top:36px; color:#383838; font-size:25px; margin:0 auto; font-weight:500;}
.become_guide_end h4{font-weight:400; font-size:24px; line-height:1;}

/******* 5.2.가맹문의 ********/
.form_become{width:960px; margin:0 auto;}
.form_become input[type=text]{display:block; width:100%; height:42px; padding-left:10px; margin-bottom:5px; border:1px solid #dcdcdc; background-color:#f7f7f7;}
.form_become textarea{display:block; width:100%; height:100px; padding:10px; margin-bottom:5px; border:1px solid #dcdcdc; background-color:#f7f7f7;}

.form_become .box_private{width:100%; height:120px; padding:10px; margin-bottom:10px; border:1px solid #dcdcdc; overflow:auto; background-color:#fff; font-size:12px; color:#999;}
.form_become .box_private h4{padding-bottom:5px; font-weight:500; font-size:13px; color:#888;}

.form_become input[type=checkbox]{display:none;}
.form_become label{padding-left:28px; position:relative; margin-right:5px;}
.form_become label span{position:absolute; width:22px; height:22px; background-color:#fff; border:1px solid #dcdcdc; left:0; top:0;}
.form_become input[type=checkbox]:checked + label span{background-image:url(../images/check_black.png); background-size:100%;}
.form_become .btn{width:160px; line-height:44px; font-size:16px; margin-top:25px;}

/******* 5.3.연구원 모집 ********/
.research_box{height:605px; background:url(../images/sub_research_1.png) no-repeat; text-align:center; padding-top:350px; color:#777;}
.research_box h3{font-size:20px; font-weight:500; color:#333; padding-bottom:15px;}

/******* 5.4.오시는 길 ********/
.sub_contact{text-align:center; font-weight:500; font-size:26px; color:#383838; border:2px solid #eaeaea; padding:27px 0 30px 0; margin-top:40px;}
.sub_contact div{display:inline-block; text-align:center; font-weight:400; font-size:14px; color:#6d6d6d; padding-left:40px;}
.sub_contact span{padding-right:15px;}

/******* 6.1.1.내 서재 ********/
.my_book_list_1{border-top:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7;}
.my_book_list_1 li{padding:35px 0; position:relative;}
.my_book_list_1 .bg{display:block; position:relative; height:110px; background-color:#f7f7f7; padding:22px 0 0 250px; color:#666; border-radius:30px;}
.my_book_list_1 .img, .my_book_list_1 .status{position:absolute;}
.my_book_list_1 .img{width:138px; left:40px; top:-14px;}
.my_book_list_1 .status{width:131px; height:110px; background-repeat:no-repeat; background-size:cover; right:0; top:0; text-align:right; line-height:110px; border-radius:0px 30px 30px 0px;}
.my_book_list_1 .status .bold{width:108px; text-align:center; display:inline-block; color:#333; font-weight:500;}

.my_book_list_1 h3{font-weight:500; font-size:18px; margin-bottom:10px; color:#333;}
.my_book_list_1 h3 b{font-weight:600;}
.my_book_list_1 .map .list{display:inline-block; line-height:21px; height:24px; border:1px solid #e7e7e7; background-color:#fff; font-size:13px; padding:0 10px; margin-right:5px; margin-left:15px;}
.my_book_list_1 .map .list:first-child{margin-left:0;}

/******* 6.1.2.내 서재 ********/
.my_roadmap_top{overflow:hidden; background-color:#f7f7f7; height:82px; color:#666; padding:0 30px 0 35px; margin-bottom:25px;}
.my_roadmap_top .left{float:left; padding-top:21px;}
.my_roadmap_top .right{float:right; line-height:82px;}
.my_roadmap_top h3, .my_roadmap_top .map{display:inline-block;}
.my_roadmap_top h3{font-weight:500; font-size:18px; color:#333; width:370px;}
.my_roadmap_top .left img{width:36px; margin-right:15px; vertical-align:-11px;}
.my_roadmap_top .map span{display:inline-block; line-height:21px; height:24px; border:1px solid #e7e7e7; background-color:#fff; font-size:13px; padding:0 10px; margin-right:5px; margin-left:15px;}
.my_roadmap_top .map span:first-child{margin-left:0;}
.my_roadmap_top select{width:200px; height:40px; padding-left:10px; border:1px solid #dcdcdc; color:#666;}

.my_book_list_2{border-top:1px solid #c7c7c7;}
.my_book_list_2 li{border-bottom:1px solid #c7c7c7; padding:35px 0; overflow:hidden;}
.my_book_list_2 .left{float:left; width:225px; height:296px; background-repeat:no-repeat; background-size:cover; border:1px solid #e9e9e9;}
.my_book_list_2 .right{float:right; width:965px; height:296px; border:1px solid #e9e9e9; position:relative;}
.my_book_list_2 .right .in{padding:35px 0 0 60px;}
.my_book_list_2 h4{font-weight:500; font-size:18px; color:#383838;}
.my_book_list_2 .author{color:#666; font-size:16px;}
.my_book_list_2 .txt{width:750px; color:#777; padding-top:10px;}

.my_book_list_2 .bage{position:absolute; width:100%; height:100px; left:58px; bottom:30px; overflow:hidden; text-align:center;}
.my_book_list_2 .bage span{float:left; color:#fff; background-repeat:no-repeat; background-size:cover; width:100px; height:100px; margin-right:12px; padding-top:30px; font-size:13px;}
.my_book_list_2 .bage .complete{background-image:url(../images/bage_complete.png);}
.my_book_list_2 .bage .ing{background-image:url(../images/bage_reading.png); color:#353536; padding-top:0; line-height:100px;}
.my_book_list_2 .bage .ing2{background-image:url(../images/bage_reading.png); color:#353536;}

.my_book_list_2 .btn{position:absolute; width:125px; height:48px; line-height:48px; color:#555; background:url(../images/arrow_main_right.png) no-repeat right; background-size:cover; right:25px; top:50%; margin-top:-24px; font-size:15px;}

/******* 6.1.2.내 서재 변경 ********/
.my_book_list_3{border-top:1px solid #c7c7c7;}
.my_book_list_3 li{border-bottom:1px solid #c7c7c7; padding:25px 0; overflow:hidden;}
.my_book_list_3 .left{float:left; width:170px; height:224px; background-repeat:no-repeat; background-size:cover; border:1px solid #e9e9e9;}
.my_book_list_3 .right{float:right; width:1010px; height:224px; border:1px solid #e9e9e9; position:relative;}
.my_book_list_3 .right .in{padding:35px 0 0 60px;}
.my_book_list_3 h4{font-weight:500; font-size:18px; color:#383838;}
.my_book_list_3 .author{color:#666; font-size:16px;}
.my_book_list_3 .txt{width:750px; color:#777; padding-top:30px; line-height:1.8;}

.my_book_list_3 .bage{position:absolute; width:350px; height:100px; right:30px; top:20px; text-align:right;}
.my_book_list_3 .bage span{display:inline-block; color:#fff; background-repeat:no-repeat; background-size:cover; width:70px; height:70px; margin-right:5px; padding-top:20px; font-size:11px; text-align:center; line-height:1.3; vertical-align:top;}
.my_book_list_3 .bage span:last-child{margin-right:0;}
.my_book_list_3 .bage .complete{background-image:url(../images/bage_complete.png);}
.my_book_list_3 .bage .ing{background-image:url(../images/bage_reading.png); color:#353536; padding-top:0; line-height:70px;}
.my_book_list_3 .bage .ing2{background-image:url(../images/bage_reading.png); color:#353536;}

.my_book_list_3 .btn{position:absolute; width:120px; height:48px; line-height:48px; color:#555; background:url(../images/arrow_main_right.png) no-repeat right; background-size:20px; right:30px; bottom:20px; font-size:15px; font-weight:500;}

/******* 6.1.3.내 서재 ********/
.my_book_list_2.tab .in{padding:85px 30px 0 60px;}
.tab_reading{overflow:hidden; float:right; margin-top:22px;}
.tab_reading li{float:left; width:138px; margin-left:2px;}
.tab_reading a{display:block; height:38px; line-height:36px;background-color:#fff; border:1px solid #e7e7e7; text-align:center; color:#666;}
.tab_reading a:hover{background-color:rgba(53,53,52,0.8); border:1px solid rgba(53,53,52,0.8); color:#fff;}
.tab_reading a.active{background-color:#353536; border:1px solid #353536; color:#fff;}

.tb_form.tab{border-top:0; border-bottom:1px solid #c7c7c7;}
.tb_form.tab tr:last-child th, .tb_form.tab tr:last-child td{border-bottom:0;}
.tb_form.tab input[type=text]{width:600px;}
.tb_form th{position:relative;}
.tb_form.tab td{color:#777;}
.tb_form.tab textarea{width:100%; background-color:#f7f7f7; color:#444; border:0; height:180px; padding:10px;margin-top:5px;margin-bottom:5px;}
.tb_form th > .btn{border-radius:2px; width:80px; height:32px; line-height:30px; color:#777; position:absolute; right:1px; top:-3px; font-size:14px;}

.my_book_2 .btn{width:160px; line-height:44px; font-size:16px; margin-top:10px;}

/******* 6.1.4.내 서재 ********/
.my_book_list_2.tab_2 .in{padding:65px 30px 0 60px;}

.tb_form.tab_2{border-top:0; border-bottom:1px solid #c7c7c7;}
.tb_form.tab_2 th, .tb_form.tab_2 td{border-bottom:0; width:100%; text-align:center;}
.tb_form.tab_2 textarea{width:100%; background-color:#f7f7f7; color:#444; border:0; height:180px; padding:10px;}
.tb_form.tab_2 th{color:#414141; font-size:18px; height:48px;}
.tb_form.tab_2 td{padding:0 0 10px 0;}

.onoff_area{margin-top:20px;}
.onoff_area div{display:inline-block; position:relative; width:130px;}	
.onoff_area input[type=checkbox], .onoff_area .fa-circle{display:none;}
.onoff_area .fa-times, .onoff_area .fa-circle, .onoff_area span{position:absolute;}
.onoff_area .fa-times{right:9px; top:3px; color:#333;}
.onoff_area .fa-circle{left:7px; top:3px; color:#fff;}
.onoff_area span{width:16px; height:16px; border-radius:50%; border:1px solid #444; left:2px; top:2px; background-color:#fff; transition:0.3s;}
.onoff_area label{width:52px; height:24px; border:2px solid #444; border-radius:12px; display:inline-block; position:relative; top:7px; left:5px; cursor:pointer; transition:0.3s;}
.onoff_area input[type=checkbox]:checked + label{background-color:#444;}
.onoff_area input[type=checkbox]:checked + label .fa-times{display:none;}
.onoff_area input[type=checkbox]:checked + label .fa-circle{display:block;}
.onoff_area input[type=checkbox]:checked + label span{border:1px solid #fff; background-color:#fff; right:2px; top:2px; left:auto;}

/******* 6.1.5.로드맵 구성하기 ********/
.title_sea{background:url(../images/bg_title_composition_sea.png) no-repeat; background-size:cover; width:220px; height:49px; text-align:center; color:#fff; font-size:16px; font-weight:500; padding:13px 14px 0 0;}
.title_green{background:url(../images/bg_title_composition_green.png) no-repeat; background-size:cover; width:220px; height:49px; text-align:center; color:#fff; font-size:16px; font-weight:500; padding:13px 14px 0 0;}
.title_pink{background:url(../images/bg_title_composition_pink.png) no-repeat; background-size:cover; width:220px; height:49px; text-align:center; color:#fff; font-size:16px; font-weight:500; padding:13px 18px 0 0;}
.title_sky{background:url(../images/bg_title_composition_sky.png) no-repeat; background-size:cover; width:220px; height:49px; text-align:center; color:#fff; font-size:16px; font-weight:500; padding:13px 14px 0 0;}
.composition_list li{margin:0 0 30px 0;}
.composition_list li:last-child{margin:0;}
.composition_area{border:1px solid #fff; padding:15px; display:table; width:100%;}
.line_sea{border-color:#bfded6;}
.line_green{border-color:#ced4b2;}
.line_pink{border-color:#fbdbcc;}
.line_sky{border-color:#d0e8f2;}
.composition_img, .composition_text, .composition_btn{display:table-cell; vertical-align:middle;}
.composition_img{width:262px;}
.composition_text{width:768px; padding:0 0 0 30px; color:#6d6d6d;}
.composition_btn{width:170px; text-align:center;}

.composition_text h4{font-size:19px; font-weight:400; padding:0 0 10px 0; color:#333;}
.composition_text .bold{font-weight:500;}
.composition_text .bold_3{font-weight:500; color:#414141;}
.btn_bage{display:inline-block; width:116px; height:114px; background:url(../images/bage_composition.png) no-repeat; background-size:cover; color:#333; font-size:18px; line-height:1.3; padding:34px 0 0 0;}
.btn_bage .bold_2{font-weight:500;}



/******* 6.2.로드맵 신청 ********/
.roadmap_title{color:#333; font-size:16px; font-weight:500; margin-bottom:10px; position:relative; padding-left:2px;}

.tb_form.roadmap{margin-bottom:35px;}
.tb_form.roadmap th{width:150px; padding-left:25px;}
.tb_form.roadmap td{width:450px; padding-right:20px;}
.tb_form.roadmap input[type=text]{width:370px;}
.tb_form.roadmap .tel input[type=text]{width:125px;}
.tb_form.roadmap .tel select{width:98px;}


.tb_form.roadmap_edit th{border-right:1px solid #EAEAEA;border-left:1px solid #EAEAEA; background-color:#F9F9F9;}
.tb_form.roadmap_edit td{border-right:1px solid #EAEAEA;padding-left:20px;}




.tb_form.book th{width:150px; padding-left:25px;}
.tb_form.book input[type=text]{width:443px; margin-right:10px;}
.tb_form.book .college input[type=text]{width:161px;}
.tb_form.book .college_2 span{display:inline-block; width:98px; line-height:38px; border:1px solid #dcdcdc; vertical-align:top; text-align:center; margin-right:10px; background-color:#A5A5A5;color:#ffffff;}
.tb_form.book .college_2 input[type=text]{width:336px;}
.rank{display:inline-block; width:98px; line-height:38px; border:1px solid #dcdcdc; vertical-align:top; text-align:center; margin-right:10px; background-color:#A5A5A5;color:#ffffff;}
.input_wrap{padding-top:8px; display:inline-block;}

.form_roadmap .txt_center .btn{width:160px; line-height:44px; font-size:16px; margin-top:25px;}

/******* 6.3.리스트 테이블 관련 ********/
.tb_total{border-collapse:separate; border-spacing:3px; width:100%;}
.tb_total th, .tb_total td{border:1px solid #ddd; text-align:center;}
.tb_total th{background-color:#999; border:1px solid #999; height:40px; font-weight:500; color:#fff;}
.tb_total td{height:40px; color:#777;}

.tb_list{border-collapse:collapse; width:100%;}
.tb_list th, .tb_list td{border:1px solid #ddd; text-align:center;}
.tb_list th{background-color:#fafafa; height:40px; font-weight:500; color:#444;}
.tb_list td{height:40px; color:#777;}
.tb_list .btn{width:74px; height:28px; line-height:26px; font-size:13px; color:#666;}

.line_1{height:1px; margin:40px 0; border-bottom:1px dotted #ccc;}

.tab_list{overflow:hidden; margin-bottom:10px;}
.tab_list li{float:left; width:16%; margin:0 0.8% 0.8% 0; text-align:center;}
.tab_list li:nth-child(6n){margin-right:0;}
.tab_list a{display:block; line-height:40px; background-color:#cbc9c0; color:#fff; font-weight:500; border-radius:2px;}
.tab_list a:hover{background-color:#75776e;}
.tab_list a.active{background-color:#5d6050; color:#fff;}


.tab_list2{overflow:hidden; margin-bottom:10px;}
.tab_list2 li{float:right; width:16%; margin:0 0.8% 0.8% 1.8%; text-align:center;}
.tab_list2 li:nth-child(1n){margin-right:0px;}
.tab_list2 a{display:block; line-height:40px; background-color:#cbc9c0; color:#fff; font-weight:500; border-radius:2px;}
.tab_list2 a:hover{background-color:#75776e;}
.tab_list2 a.active{background-color:#5d6050; color:#fff;}


.span_start, .span_ing, .span_end{display:inline-block; width:80px; height:28px; line-height:28px; text-align:center; font-size:13px; color:#fff;}
.span_start{background-color:#b7bf93;}
.span_ing{background-color:#f3bba0;}
.span_end{background-color:#93cfbf;}

.search_area{overflow:hidden; margin-bottom:10px;}
.search_area .left{float:left;}
.search_area .left *{vertical-align:top;}
.search_area .right{float:right; padding:0 1px 0 0;}
.search_area .right .total{padding-top:10px;}
.search_area .right b{font-weight:500;}
.search_area select, .search_area input, .search_area .btn{height:32px;}
.search_area select, .search_area input{border:1px solid #ddd; padding-left:10px;}
.search_area select{width:110px;}
.search_area input{width:170px;}
.search_area .left .btn{width:60px; line-height:32px;}
.search_area .right{color:#666;}
.search_area .right .btn{width:90px; line-height:32px;}

/******* 6.5.이용권 관련 ********/
.tab_coupon{overflow:hidden; border-bottom:1px solid #cbc9c0; margin-bottom:20px;}
.tab_coupon li{float:left; text-align:center; width:150px; margin-right:3px;}
.tab_coupon a{display:block; line-height:40px; background-color:#cbc9c0; color:#fff; font-weight:500;}
.tab_coupon a:hover{background-color:#75776e;}
.tab_coupon a.active{background-color:#5d6050; color:#fff;}

.coupon_box{padding:30px 0; text-align:center; background-color:#fbfbfb; border:1px solid #efefef; margin-bottom:30px; font-size:16px;}

/******* 7.1.1회원가입 선택하기 ********/
.member_select_wrap{}
.member_select_area{overflow:hidden; width:650px; margin:0 auto; padding:30px 0 0 0;}
.member_select_area li{float:left; width:50%; text-align:center;}
.btn_member_select{display:inline-block; width:260px; height:260px; background-color:#fdfdfd; border-radius:50px; color:#222; font-size:18px; font-weight:500; border:2px solid #eee;}
.btn_member_select img{width:90px; margin:40px auto 20px auto; display:block}
.btn_member_select .text{display:inline-block; width:164px; height:44px; line-height:42px;  border-radius:4px;}
.member_select_text{width:580px; margin:50px auto 0 auto; padding-bottom:15px; border-bottom:1px dashed #444; text-align:center; font-size:19px;}
.member_select_text b{color:#00adc7; font-weight:500;}

/******* 7.1.회원가입 ********/
.form_title{color:#333; font-size:18px; font-weight:500; margin-bottom:15px; position:relative; padding-left:2px;}
.form_title span{color:#666; font-size:14px; font-weight:400; padding-left:10px;}
.form_title img{width:15px; margin-right:2px; vertical-align:-3px;}
.form_title b{position:absolute; font-weight:400; font-size:14px; color:#666; right:2px; top:5px;}

.tb_form{color:#666; border-spacing:0; border-top:1px solid #ebebeb; width:100%; margin-bottom:30px;}
.tb_form th, .tb_form td{border-bottom:1px solid #ebebeb; height:56px;}
.tb_form th{width:195px; text-align:left; padding-left:35px; font-weight:400;}
.tb_form th img{width:15px; margin-left:4px; vertical-align:-2px;}
.tb_form input[type=text]{width:500px; height:40px; padding-left:10px; border:1px solid #dcdcdc;}
.tb_form input[type=password]{width:500px; height:40px; padding-left:10px; border:1px solid #dcdcdc;}
.tb_form select{width:118px; height:40px; padding-left:10px; border:1px solid #dcdcdc; color:#666;}
.tb_form .btn_confirm{display:inline-block; width:100px; line-height:38px; border:1px solid #dcdcdc; text-align:center; background-color:#f6f6f6; vertical-align:top; color:#666; margin:0 10px 0 1px;}
.tb_form .tel input{width:180px;}
.tb_form .mail input{width:180px;}
.tb_form .mail select{width:130px; vertical-align:top;}

.form_member .box_private{width:100%; height:140px; padding:10px; margin-bottom:10px; border:1px solid #dcdcdc; overflow:auto; background-color:#f9f9f9; font-size:12px; color:#777;}
.form_member .box_private h4{padding-bottom:15px; font-weight:500; font-size:13px;}

.form_member input[type=checkbox]{display:none;}
.form_member label{padding-left:28px; position:relative; margin-right:5px; color:#666;}
.form_member label span{position:absolute; width:22px; height:22px; background-color:#fff; border:1px solid #dcdcdc; left:0; top:0;}
.form_member input[type=checkbox]:checked + label span{background-image:url(../images/check_black.png); background-size:100%;}
.form_member .txt_center{padding-top:10px;}
.form_member .txt_center .btn{width:160px; line-height:44px; font-size:16px; margin-top:25px;}

/******* 7.1.회원가입 ********/
.basic_list{overflow:hidden;}
.basic_list li{float:left; width:31.4%; margin-right:2.9%; border:1px solid #e2e2e2; height:570px; position:relative; text-align:center; padding-top:45px;}
.basic_list li:last-child{margin-right:0;}
.basic_list h3{color:#383838; font-weight:500; font-size:20px; margin-bottom:10px;}
.basic_list .txt{color:#888;}
.basic_list .img{padding:30px 0;}
.basic_list .img img{width:74px;}
.basic_list li .btn{width:136px; height:36px; line-height:34px; color:#777; font-size:15px;}
.basic_list .img_box, .basic_list .left_top, .basic_list .right_bottom{position:absolute;}
.basic_list .img_box{width:100%; height:235px; background-repeat:no-repeat; background-size:cover; bottom:0; left:0; z-index:10;}
.basic_list .left_top, .basic_list .right_bottom{width:32px; height:32px; border:5px solid #bbb; opacity:0.8; z-index:20;}
.basic_list .left_top{border-right:0; border-bottom:0; left:0; top:0;}
.basic_list .right_bottom{border-left:0; border-top:0; right:0; bottom:0;}

.basic_box > .txt_center{padding-top:45px;}
.basic_box .btn{width:230px; height:46px; line-height:46px; font-size:15px;}

/*************************** 로그인 ***************************/
.login_box{width:450px; margin:0 auto; padding:50px 0 45px 0;}
.login_box input[type=email], .login_box input[type=password]{width:100%; height:56px; padding-left:12px; border:1px solid #dcdcdc; margin-bottom:10px; background-color:#fff;}
.login_box .btn{width:100%; line-height:56px; font-size:16px; font-weight:500; margin-bottom:10px;}
.login_box .idpw{color:#777;}
.login_box .btn.white{color:#383838; height:56px; line-height:54px;}
.login_box .txt{padding:30px 0 10px 0; color:#444;}

.login_box input[type=checkbox]{display:none;}
.login_box label{padding-left:28px; position:relative;}
.login_box label:before{content:''; position:absolute; width:18px; height:18px; background-color:#fff; border:1px solid #dcdcdc; left:0; top:0;}
.login_box input[type=checkbox]:checked + label:before{background-image:url(../images/check_black.png); background-size:100%;}

/*************************** 아이디/비밀번호 찾기 ***************************/
.form_idpw{width:700px; margin:0 auto; padding:40px 0;}
.form_idpw h4{font-weight:400; color:#666; margin-bottom:10px; font-size:14px;}
.form_idpw .tb_form{border-top:1px solid #aaa; margin-bottom:0;}

.tab_idpw{overflow:hidden; margin-bottom:25px;}
.tab_idpw li{float:left; width:50%;}
.tab_idpw a{display:block; line-height:42px; text-align:center; background-color:#eee; color:#666;}
.tab_idpw a:hover{background-color:#555; color:#fff;}
.tab_idpw a.active{background-color:#383838; color:#fff;}

/*************************** 개인정보취급방침 / 서비스이용약관 ***************************/
.box_private.member{width:100%; height:400px; padding:20px; margin-bottom:10px; border:1px solid #dcdcdc; overflow:auto; background-color:#fafafa; font-size:13px;}
.box_private.member h4{padding-bottom:5px; font-weight:500; font-size:15px; color:#666; margin-bottom:10px;}

/*************************** 페이지네이션 ***************************/
.pagination{margin-top:35px;}
.pagination li{display:inline-block; width:36px; height:36px;}
.pagination span, .pagination a{display:block; line-height:34px; border:1px solid #e1e1e1; color:#4b5763;}
.pagination a:hover{color:#222; border:2px solid #222; line-height:32px;}
.pagination .active{color:#222; border:2px solid #222; line-height:32px;}
.pagination .arrow{font-weight:500; color:#999;}

/*************************** 게시판 여백 ***************************/
.board_page{padding:20px 0 40px 0;}

/*************************** 팝업 관련 ***************************/
.popup_area{position:fixed; z-index:10000; left:0; top:0; bottom:0; right:0; background-color:rgba(0,0,0,0.7); display:none;}
.popup_box{position:absolute; background-color:#fff; border:1px solid #eee; width:900px; height:600px; left:50%; top:50%; margin-left:-450px; margin-top:-300px; border-radius:4px; padding:30px 40px 10px 40px;}
h4.title{border-bottom:1px dotted #aaa; padding-bottom:8px; margin-bottom:20px; font-size:18px; font-weight:500; padding-left:14px; position:relative;}
h4.title span{position:absolute; width:4px; height:15px; border-radius:2px; background-color:#666; left:2px; top:7px;}
.popup_box .btn_close{position:absolute; right:-40px; top:2px; width:36px;}

.tb_basic{border-collapse:collapse; width:100%;}
.tb_basic th, .tb_basic td{border:1px solid #ddd;}
.tb_basic th{background-color:#f9f9f9; height:40px; font-weight:500; color:#444;}
.tb_basic td{height:40px; color:#777; padding:6px 10px;}

.input{width:250px; height:32px; padding-left:10px; border:1px solid #ddd; color:#666; background-color:#fbfbfb;}
.select{width:250px; height:32px; padding-left:10px; border:1px solid #ddd; color:#666; background-color:#fbfbfb;}
.txt_box{display:block; width:100%; height:150px; padding:10px; border:1px solid #ddd; color:#666; background-color:#fbfbfb;}

.chk_box input[type=checkbox]{display:none;}
.chk_box label{padding-left:24px; position:relative; margin-right:15px; color:#666;}
.chk_box label span{position:absolute; width:17px; height:17px; background-color:#fff; border:1px solid #dcdcdc; left:0; top:2px; background-color:#fbfbfb;}
.chk_box input[type=checkbox]:checked + label span{background-image:url(../images/check_black.png); background-size:100%;}

.rdo_box input[type=radio]{display:none;}
.rdo_box label{padding-left:24px; position:relative; margin-right:15px; color:#666;}
.rdo_box label span{position:absolute; width:18px; height:18px; background-color:#fff; border:1px solid #dcdcdc; left:0; top:2px; border-radius:50%; background-color:#fbfbfb;}
.rdo_box input[type=radio]:checked + label span{background-image:url(../images/radio_black.png); background-size:100%;}

/*************************** 퀵메뉴 ***************************/
#toTop{text-decoration:none; position:fixed; bottom:150px; left:50%; margin-left:584px; overflow: hidden; width: 30px; height: 30px; border: none; text-indent: -999px; z-index:9999; background:url(../images/icon_scroll.png) no-repeat left 0; transition: 0s ease; -o-transition: 0s ease;  -webkit-transition: 0s ease; background-size:100%; opacity:0.7;}

.quick_menu{position:fixed; left:50%; margin-left:620px; top:110px; z-index:999;}
.quick_menu a{display:block; width:60px; height:60px; background:rgba(0,173,199,0.85); color:#fff; text-align:center; border-radius:50%; font-size:12px; padding-top:11px; margin-bottom:10px;}
.quick_menu a:last-child{margin-bottom:0;}
.quick_menu .btn_event{padding:0; line-height:59px;}