@charset "utf-8"; /************************************************** Layout CSS Document IEETU Web Standardization Team 2022-07-05 **************************************************/ /************************************************** Common **************************************************/ /* 스프라이트 이미지 */ .sp_ui, #header #gnb > li > div > ul > li a[target="_blank"]:after, #header #gnb > li > a > span:before, #side .snb a[target="_blank"]:after, #side .snb a .unfd, #side .snb > li > a:after, .cont_head .util_area button, .cont_head .box_share .btn_close:after, .cont_foot .cont_rating h2:before, .lnb li a[target="_blank"]:after, .sitemap_menu > ul > li > div > ul > li > a[target="_blank"]:after, #header .sitemap_wrap .snb a[target="_blank"]:after, .lnb.tmn01 li a:before, .lnb.tmn03 li a:before, .lnb.tmn01 li.on a:before, .lnb.tmn03 li.on a:before, .cont_foot .cont_rating h2:before{display:inline-block; overflow:hidden; color:transparent !important; white-space:nowrap; background:url(../images/base/sp_ui.png) no-repeat 0 0;} #wrap{position:relative; min-width:360px; overflow:hidden;} /************************************************** 상단 배너 **************************************************/ #topban{position:relative;} #topban .topbanzone{position:relative; overflow:hidden; height:110px;} #topban .topbanzone .nav{position:absolute; left:0; bottom:0; right:0; width:100%; max-width:1500px; margin:0 auto;} #topban .topbanzone .nav .area_ctrl{position:absolute; bottom:40px; right:0;} #topban .topbanzone .nav .area_ctrl button{float:left; overflow:hidden; width:36px; height:36px; margin-left:3px; background:url(../images/common/sp_topban_ctrl.png) no-repeat 0 0; color:transparent;} #topban .topbanzone .nav .area_ctrl .prev{background-position:-30px 0;} #topban .topbanzone .nav .area_ctrl .play{display:none; background-position:-110px 0;} #topban .topbanzone .nav .area_ctrl .pause{display:none; background-position:-70px 0;} #topban .topbanzone .nav .area_ctrl .next{background-position:-150px 0;} #topban .topbanzone .nav .area_ctrl .active{display:block;} #topban .topbanzone .nav .area_close{position:absolute; bottom:10px; right:0; color:#fff;} #topban .topbanzone .nav .area_close *{float:left;} #topban .topbanzone .nav .area_close .inp_chk{margin:4px 5px 0 0;} #topban .topbanzone .nav .area_close .btn_close{overflow:hidden; width:21px; height:21px; margin:0 0 0 15px; background:url(../images/common/sp_topban_ctrl.png) no-repeat 0 0; color:transparent;} #topban .topbanzone .item{position:relative; overflow:hidden; height:110px; vertical-align:top;} #topban .topbanzone .item > .inr{position:absolute; left:50%; transform:translateX(-50%);} #topban .topbanzone .item a{display:block;} #topban .topbanzone .item .b_t, #topban .topbanzone .item .b_m{display:none;} #topban .topbanzone .item img{max-width:none;} /************************************************** Header **************************************************/ #header{position:relative; z-index:99; font-family:'s-core_dream'; border-bottom:1px solid #d9d9d9;} .fixed_header #header{position:fixed; width:100%; box-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.08); background:#fff;} /* 헤더 상단 */ #header .area_top{position:relative; z-index:30; background:#e3f9f7; border-bottom:1px solid #ccc;} /*.fixed_header #header .area_top{display:none;}*/ #header .area_top > .inr{display:flex; justify-content:space-between; align-items:center; max-width:1500px; height:40px; margin:0 auto;} #header .area_top .util_l{height:100%;} #header .area_top .util_l .lst{display:flex; height:100%;} #header .area_top .util_l .lst li{position:inherit; z-index:40; margin-bottom:-1px;} #header .area_top .util_l .lst li.n01{border-bottom:none; border-left:solid 1px #ccc;} #header .area_top .util_l .lst li.n02{z-index:30;} #header .area_top .util_l .lst li.n03{z-index:20;} #header .area_top .util_l .lst li.n04{z-index:10;} #header .area_top .util_l .lst li.n05{z-index:5; min-width:60px;} #header .area_top .util_l .lst li a{display:flex; justify-content:center; align-items:center; height:100%; padding:0 30px 0 60px; color:#fff; text-align:center; font-size:15px; background-image:linear-gradient(135deg, #1b49b2, #4175ea 30%); border-radius:0 40px 0 0; margin-left:-40px;} #header .area_top .util_l .lst li:first-child a{margin-left:0; padding-left:30px;} #header .area_top .util_l .lst li.n01 a{background:#fff; color:#222;} #header .area_top .util_l .lst li.n02 a{background-image:linear-gradient(135deg, #3f7dca, #419dea 30%);} #header .area_top .util_l .lst li.n03 a{background-image:linear-gradient(135deg, #015f51, #008673 30%);} #header .area_top .util_l .lst li.n04 a{background-image:linear-gradient(135deg, #028976, #02b097 30%);} #header .area_top .util_l .lst li.n05 a{background-image:linear-gradient(135deg, #1d2088, #464ac1 30%);} #header .area_top .util_l .lst li a .mobile{display:none;} #header .area_top .util_l .lst li a .br_m{display:none;} #header .area_top .util_r .lst_login{display:flex; align-items:center;} #header .area_top .util_r .lst_login li{margin-left:30px;} #header .area_top .util_r .lst_login li:first-child{margin-left:0;} #header .area_top .util_r .lst_login li a{display:flex; align-items:center; font-size:15px;} #header .area_top .util_r .lst_login li a:before{content:""; display:block; margin:0 6px 0 0;} #header .area_top .util_r .lst_login li a.login:before{width:18px; height:21px; background:url(../images/common/ico_login.png);} #header .area_top .util_r .lst_login li a.join:before{width:23px; height:19px; background:url(../images/common/ico_join.png);} #header .area_top .util_r .lst_login li a.logout:before{width:18px; height:21px; background:url(../images/common/ico_logout.png);} #header .area_top .util_r .lst_login li a.mypage:before{} /* gnb_wrap */ /*.fixed_header .gnb_wrap{border-bottom:1px solid #e3e3e3;}*/ /* 헤더 Logo */ #header .area_logo{} #header .area_logo .logo{} /* 헤더 GNB Fixed */ /*html.fixed_header #header .gnb_wrap{position:fixed; top:0; left:0; right:0; z-index:30;} html.fixed_header #header{padding-bottom:80px;}*/ /* 헤더 GNB */ #header.open:after{opacity:1; height:100%;} #header .gnb_wrap{max-width:1500px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; background:#fff;} #header .gnb_wrap > .inr{width:100%; height:115px; max-width:910px;} #header #gnb{display:flex; align-items:center;} #header #gnb a{display:block;} #header #gnb > li{position:relative; float:left; width:25%;} #header #gnb > li > a{display:block; position:relative; font-size:20px; height:115px; line-height:115px; color:#222; text-align:center; white-space:nowrap;} #header #gnb > li.active > a{color:#09348d;} #header #gnb > li > a > span{display:inline-block; position:relative; line-height:1.5; font-weight:700; transition:all .4s;} #header #gnb > li > a > span:before{content:''; position:absolute; top:-6px; right:100%; width:23px; height:19px; background-position:-52px -75px; transform:scale(0); transition:transform .4s;} #header #gnb > li.active > a > span:before{transform:scale(1);} /* 2차 */ #header #gnb > li > div{display:none; visibility:hidden; position:absolute; top:116px; left:-1px; right:0; z-index:31; overflow:hidden; border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6; background:#fff; transition:height .4s cubic-bezier(0.165, 0.84, 0.44, 1);} #header #gnb > li.open > div{display:block; visibility:visible; z-index:32;} #header #gnb > li > div > ul{padding:20px 5px 20px 15px;} #header #gnb > li > div > ul > li{position:relative; margin-bottom:10px; padding:0 0 0 12px;} #header #gnb > li > div > ul > li:before{content:''; display:inline-block; position:absolute; top:12px; left:0; width:5px; height:5px; margin:auto 0; border-radius:50%; background:#01b097;} #header #gnb > li > div > ul > li > a{position:relative; padding:5px 0; font-size:16px; line-height:1.2; letter-spacing:-2px; font-family: 's-core_dream_bold'} #header #gnb > li > div > ul > li.active > a{color:#007460; text-decoration:underline;} #header #gnb > li > div > ul > li a[target="_blank"]:after{content:''; width:16px; height:14px; margin:0 0 0 5px; background-position:-31px -67px; vertical-align:baseline;} /* 3차 */ #header #gnb > li > div > ul > li > ul{margin:5px 0 15px;} #header #gnb > li > div > ul > li > ul > li{position:relative; padding:0 0 0 10px;} #header #gnb > li > div > ul > li > ul > li:before{content:''; display:inline-block; position:absolute; top:12px; left:1px; width:5px; height:1px; background:#666;} #header #gnb > li > div > ul > li > ul > li > a{padding:3px 0; font-size:15px;} #header #gnb > li > div > ul > li > ul > li.active > a{color:#007460;} /* gnb 배경 */ #header .gnb_wrap .gnb_bg{position:absolute; top:157px; left:0; z-index:20; overflow:hidden; width:100%; height:0; border-bottom:0 solid transparent; background:rgba(255,255,255,1); transition:height .4s cubic-bezier(0.165, 0.84, 0.44, 1);} #header.open .gnb_wrap .gnb_bg{box-sizing:content-box; border-bottom:1px solid #d6d6d6; box-shadow:0 10px 10px rgba(0,0,0,.1);} #header .gnb_wrap .gnb_bg > .inr{position:relative; max-width:1500px; height:100%; padding:30px 0 0; margin:0 auto; background:url(../images/common/bg_gnb.png) no-repeat 0 100%;} #header .gnb_wrap .gnb_bg .tit_area{letter-spacing:-1px;} #header .gnb_wrap .gnb_bg .tit_area:before{content:""; display:block; width:30px; height:2px; margin:0 0 13px 0; background:#6457a3;} #header .gnb_wrap .gnb_bg .tit_area .txt{font-size:20px; color:#007460;} #header .gnb_wrap .gnb_bg .tit_area .txt span{color:#4d3d9b;} #header .gnb_wrap .gnb_bg .tit_area .tit{font-size:34px; color:#41454a; font-weight:700; line-height:1; margin:10px 0 0;} /* 전체메뉴 */ #header .sitemap_wrap{display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:100; background:#fff;} #header .sitemap_wrap.open{display:block;} body.fixed_sitemap{overflow:hidden; width:100%; height:100%;} #header .sitemap_wrap .stm_header{position:relative;} #header .sitemap_wrap .stm_header > .inr{display:block; height:116px; margin:0 75px; border-bottom:1px solid #ddd;} #header .sitemap_wrap .stm_header .stm_logo{padding:45px 0 0; font-weight:600; font-size:38px; line-height:1.2; color:#003aa8;} #header .sitemap_wrap .stm_header .btn_close{position:absolute; top:0; right:0; width:72px; height:72px; overflow:hidden; background:#18114e url(../images/common/btn_stm_close.png) no-repeat 50% 50%; color:transparent;} #header .sitemap_wrap .stm_container{height:calc(100vh - 117px); overflow:hidden; overflow-y:auto;} #header .sitemap_wrap .stm_container > .inr{margin:0 75px; padding:0 0 50px;} #header .sitemap_wrap .stm_container .stm_lst{display:flex; justify-content:space-between;} #header .sitemap_wrap .stm_container .stm_lst > li{flex:1; margin-left:42px;} #header .sitemap_wrap .stm_container .stm_lst > li:first-child{margin-left:0;} #header .sitemap_wrap .stm_container .stm_lst h2{display:block; padding:46px 0 20px; border-bottom:2px solid #003aa8; font-size:22px; line-height:1.2; color:#003aa8;} #header .sitemap_wrap .snb{} #header .sitemap_wrap .snb a{display:block; position:relative; line-height:1.2;} #header .sitemap_wrap .snb a[target="_blank"]:after{content:''; width:16px; height:14px; margin:0 0 0 5px; background-position:-31px -67px; vertical-align:baseline;} #header .sitemap_wrap .snb a.parent:after{display:none;} #header .sitemap_wrap .snb a .unfd{position:absolute; top:50%; right:0; transform:translateY(-50%); width:24px; height:24px; overflow:hidden; background:url(../images/common/ico_stm_fd.png) no-repeat 0 0; color:transparent;} #header .sitemap_wrap .snb a.on .unfd{background:url(../images/common/ico_stm_unfd.png) no-repeat 0 0;} /* 2차 */ #header .sitemap_wrap .snb > li{border-bottom:1px solid #cbcbcb;} #header .sitemap_wrap .snb > li.open{} #header .sitemap_wrap .snb > li > a{padding:17px 10px 17px 0; font-size:16px;} #header .sitemap_wrap .snb > li > a.on{color:#007dc5;} /* 3차 */ #header .sitemap_wrap .snb > li > ul{display:none; padding:5px 19px; border-top:1px solid #cbcbcb; background:#f1f1f1;} #header .sitemap_wrap .snb > li.open > ul{display:block;} #header .sitemap_wrap .snb > li > ul > li{} #header .sitemap_wrap .snb > li > ul > li > a{padding:7px 0 6px 10px; font-size:15px;} #header .sitemap_wrap .snb > li > ul > li > a:before{content:''; display:inline-block; box-sizing:border-box; position:absolute; top:15px; left:0px; width:2px; height:2px; background:#383838;} #header .sitemap_wrap .snb > li > ul > li > a.on{color:#007dc5; text-decoration:underline;} #header .sitemap_wrap .snb > li > ul > li > a.on:before{background:#3a98ce;} #header .sitemap_wrap .snb > li > ul > li a .unfd{display:none;} /* 4차 */ #header .sitemap_wrap .snb > li > ul > li > ul{margin:0 0 0 5px; padding:5px 7px; background:#f1f1f1;} #header .sitemap_wrap .snb > li > ul > li.open > ul{display:block;} #header .sitemap_wrap .snb > li > ul > li > ul > li > a{padding:6px 0 5px 10px; font-size:15px;} #header .sitemap_wrap .snb > li > ul > li > ul > li > a:before{content:''; display:inline-block; box-sizing:border-box; position:absolute; top:14px; left:0; width:5px; border-bottom:1px solid #666;} #header .sitemap_wrap .snb > li > ul > li > ul > li a.on{color:#007dc5; text-decoration:underline;} #header .sitemap_wrap .snb > li > ul > li > ul > li a.on:before{border-color:#3a98ce;} /* 모바일 전체메뉴 */ .wholeview_wrap{display:none;} /* 모바일 검색 */ .wv_srch_wrap{display:none;} /* 로그인 Util */ #header .gnb_wrap .util_r{display:flex; align-items:center;} /* 사이트맵 */ #header .gnb_sitemap{margin:0 0 0 35px;} #header .gnb_sitemap a{display:block; width:57px; height:26px; text-indent:-999999px; background:url(../images/common/ico_sitemap.png);} /* 학습소식 */ #header .btn_notice{flex:0 0 auto;} #header .btn_notice a{display:flex; align-items:center; font-weight:600;} #header .btn_notice a:before{content:""; display:block; width:32px; height:32px; margin:0 7px 0 0; background:url(../images/common/ico_notice.png);} /************************************************** Footer **************************************************/ #footer{margin:95px 0 0; padding:30px 0 50px; background:#555258; font-family:'s-core_dream'; position:relative;} #footer .inr{max-width:1500px; margin:0 auto;} #footer .footer_top{display:flex; align-items:center; justify-content:space-between; margin:0 0 45px 0;} #footer .footer_top .area_l{display:flex; flex-wrap:wrap;} #footer .footer_top .area_l li{position:relative; margin:3px 13px 3px 0; padding:0 13px 0 0;} #footer .footer_top .area_l li:after{content:""; display:block; position:absolute; top:5px; right:0; width:1px; height:14px; background:#858386;} #footer .footer_top .area_l li:last-child{margin-right:0; padding-right:0;} #footer .footer_top .area_l li:last-child:after{display:none;} #footer .footer_top .area_l li a{color:#fff;} #footer .footer_top .area_l li.privacy a{color:#75c2fd; font-weight:600;} #footer .footer_top .area_r{display:flex;} #footer .footer_top .area_r .related{position:relative; width:180px; margin:0 0 0 6px;} #footer .footer_top .area_r .related .open_select{position:relative; width:100%; height:55px; padding:0 30px 0 15px; border:1px solid #aaa9ac; background:transparent; color:#fff; letter-spacing:-1.5px; text-align:left; border-radius:5px; font-family:'s-core_dream';} #footer .footer_top .area_r .related .open_select:after{content:''; position:absolute; right:15px; top:19px; width:7px; height:7px; border-top:3px solid #fff; border-right:3px solid #fff; transform:rotate(135deg);} #footer .footer_top .area_r .related.on .open_select:after{transform:rotate(315deg); top:23px;} #footer .footer_top .area_r .related .box_select{display:none; position:absolute; bottom:100%; left:0; z-index:100; box-sizing:border-box; width:100%; overflow:auto; max-height:500px; padding:10px 0; border:1px solid #ddd; background:#fff; border-radius:5px;} #footer .footer_top .area_r .related.on .box_select{display:block;} #footer .footer_top .area_r .related.on .box_select ul{margin:0; padding:0 10px;} #footer .footer_top .area_r .related.on .box_select li{text-align:left; line-height:1.3; border-bottom:1px dotted #ccc; padding:5px 0;} #footer .footer_top .area_r .related.on .box_select li a{font-size:14px;} #footer .footer_top .area_r .related.on .box_select li:hover a{color:#007460; font-weight:700;} #footer .wrap_copyright{display:flex; align-items:center; justify-content:space-between;} #footer .wrap_copyright .area_l{display:flex; flex-wrap:wrap; align-items:center;} #footer .wrap_copyright .logo{margin:5px 30px 5px 0;} #footer .wrap_copyright .area_copyright{font-size:15px; line-height:1.8;} #footer .wrap_copyright .area_copyright .address{color:#fff;} #footer .wrap_copyright .area_copyright .copyright{color:#aaa9ac;} #footer .wrap_copyright .area_r{flex:0 0 auto; text-align:center; padding:0 0 0 60px; background:url(../images/common/ico_tel.png) no-repeat 0 0; color:#fff;} #footer .wrap_copyright .area_r .cs_time{opacity:0.6; font-size:14px;} #footer .wrap_copyright .area_r .cs_tel{font-size:22px; font-weight:700;} /************************************************** Container **************************************************/ #container{} #container > .inr{display:flex; max-width:1500px; margin:40px auto 0;} /************************************************** Side **************************************************/ #side{width:300px; margin:0 60px 0 0; font-family:'s-core_dream';} /* SNB */ #side .snb_wrap{} #side .snb_wrap .title{padding:45px 0 0; height:140px; text-align:center; background:#6457a3 url(../images/common/bg_snb_tit.jpg) no-repeat 0 0; font-size:25px; line-height:1.2; border-radius:12px; color:#fff; word-break:keep-all; word-wrap:break-word;} #side .snb_wrap .title span{} #side .snb{max-width:320px;} #side .snb_wrap .title + ul.snb{margin-top:-20px;} #side .snb a{display:block; position:relative; line-height:1.2;} #side .snb a[target="_blank"]:after{content:''; width:15px; height:13px; margin:18px 0 0 5px; background-position:-31px -49px; vertical-align:baseline;} #side .snb a.parent:after{display:none;} #side .snb a .unfd{position:absolute; top:0; right:22px; bottom:0; width:8px; height:14px; margin:auto 0; background-position:0 -46px; transform:rotate(90deg);} #side .snb a.on .unfd{transform:rotate(-90deg);} /* 2차 */ #side .snb > li{border:1px solid #ccc; margin:0 0 6px 0; border-radius:8px; background:#fff; overflow:hidden;} #side .snb > li > a{padding:16px 45px 16px 20px; font-size:16px; font-weight:600;} #side .snb > li > a.on, #side .snb > li > a:hover{color:#4e5799;} #side .snb > li > a:after{content:''; position:absolute; top:0; right:20px; bottom:0; display:block; width:8px; height:13px; margin:auto 0; background-position:0 -46px;} #side .snb > li > a .unfd{} #side .snb > li.open{border:1px solid #54c4b3;} #side .snb > li.open > a{background:#019a83; color:#fff; border-radius:0 0 8px 8px;} #side .snb > li.open > a:after, #side .snb > li.open .unfd{background-position:0 -76px;} /* 3차 */ #side .snb > li > ul{display:none; padding:15px 20px 25px;} #side .snb > li.open > ul{display:block;} #side .snb > li > ul > li{} #side .snb > li > ul > li > a{padding:15px 0 15px 14px; font-size:16px; border-bottom:1px solid #ddd;} #side .snb > li > ul > li > a:before{content:''; display:inline-block; box-sizing:border-box; position:absolute; top:21px; left:0px; width:5px; height:5px; border-radius:50%; background:#bbb;} #side .snb > li > ul > li > a[target="_blank"]:after{margin-top:0;} #side .snb > li > ul > li > a.on:before{background:#019a83;} #side .snb > li > ul > li > a.on{color:#007460; font-weight:600;} #side .snb > li > ul > li a .unfd{background-position:0 -94px !important; right:15px;} #side .snb > li > ul > li.open a .unfd{background-position:0 -94px;} /* 4차 */ #side .snb > li > ul > li > ul{display:none; padding:10px 0 10px 10px;} #side .snb > li > ul > li.open > ul{display:block; border-bottom:1px solid #ddd; font-family: '맑은 고딕';} #side .snb > li > ul > li > ul > li > a{padding:6px 0 5px 10px; font-size:15px;} #side .snb > li > ul > li > ul > li > a:before{content:''; display:inline-block; box-sizing:border-box; position:absolute; top:13px; left:0; width:5px; border-bottom:1px solid #626262;} #side .snb > li > ul > li > ul > li > a[target="_blank"]:after{margin-top:0;} #side .snb > li > ul > li > ul > li a.on{font-weight:600; color:#007460; text-decoration:underline;} #side .snb > li > ul > li > ul > li a.on:before{border-color:#007460;} /************************************************** Content **************************************************/ /*** 컨텐츠 공통 ***/ .cont_wrap{width:calc(100% - 360px);} /*** 컨텐츠 헤드 ***/ .cont_head{position:relative; margin:0 0 50px 0; padding:0 0 20px 0; border-bottom:2px solid #000;} .cont_head:after{content:''; display:block; clear:both;} .cont_head .btn_back{display:none;} .cont_head .nav{display:none;} .cont_head .area_title{position:relative;} .cont_head .area_title .title{font-size:32px; font-weight:700; letter-spacing:-1.5px; font-family:'s-core_dream_bold';} /* Location */ .cont_head .sub_loc{display:flex; flex-wrap:wrap; align-items:center; font-size:15px; color:#666; margin:25px 0 0;} .cont_head .sub_loc li{position:relative; margin:0 25px 0 0;} .cont_head .sub_loc li.home a{display:block; width:30px; height:30px; text-indent:-9999999px; background:url(../images/common/ico_home.png);} .cont_head .sub_loc li:after{content:''; position:absolute; right:-15px; top:50%; margin-top:-4px; width:7px; height:7px; border-top:2px solid #6b6b6b; border-right:2px solid #6b6b6b; transform:rotate(45deg);} .cont_head .sub_loc li:last-child{color:#111; font-weight:700; margin-right:0;} .cont_head .sub_loc li:last-child:after{display:none;} /* 공유 버튼 */ .cont_head .util_area{position:absolute; bottom:20px; right:0;} .cont_head .util_area button{float:left; position:relative; overflow:hidden; width:40px; height:40px; margin-left:7px; border:1px solid #ccc; border-radius:50%; background-origin:border-box;} .cont_head .util_area .btn_zin{background-position:-80px -31px;} .cont_head .util_area .btn_zout{background-position:-125px -31px;} .cont_head .util_area .btn_print{background-position:-170px -31px;} /* 공유 박스 */ .cont_head .util_area .c_share_box .btn_share{background-position:-215px -31px;} .cont_head .util_area .c_share_box.open .btn_share{border:0; background-position:-260px -31px;} .cont_head .util_area .c_share_box .ly_share{display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:20; padding:10px 5px; border-radius:8px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.15); border:1px solid #ccc;} .cont_head .util_area .c_share_box.open .ly_share{display:flex;} .cont_head .util_area .c_share_box .ly_share button{flex:0 0 auto; width:28px; height:28px; margin:0 6px; border:0; background:url(../images/base/sp_sns.png) no-repeat 0 0;} .cont_head .util_area .c_share_box .ly_share .btn_facebook{background-position:0 0;} .cont_head .util_area .c_share_box .ly_share .btn_blog{background-position:-32px 0;} .cont_head .util_area .c_share_box .ly_share .btn_instagram{background-position:-64px 0;} .cont_head .util_area .c_share_box .ly_share .btn_kakao{background-position:-96px 0;} .cont_head .util_area .c_share_box .ly_share .btn_twitter{background-position:-128px 0;} .cont_head .util_area .c_share_box .ly_share .btn_copyurl{flex:0 0 auto; font-size:13px; width:60px; height:28px; margin:0 6px; text-align:center; line-height:28px; border:1px solid #caced2; border-radius:4px; background:#fff;} .cont_head .util_area .c_share_box{float:left; position:relative;} .cont_head .util_area .c_share_box .ly_share .btn_close{position:absolute; top:0; right:0; width:24px; height:24px; margin:0; background:none;} .cont_head .util_area .c_share_box .ly_share .btn_close:before, .cont_head .util_area .c_share_box .ly_share .btn_close:after{content:''; display:block; overflow:hidden; position:absolute; top:25%; right:25%; bottom:25%; left:25%; height:2px; transform:rotate(45deg); margin:auto 0; background:#ccc; color:transparent;} .cont_head .util_area .c_share_box .ly_share .btn_close:after{transform:rotate(135deg);} /*** 컨텐츠 바디 ***/ .cont_body{max-width:1140px; margin-left:auto; line-height:1.7; word-break:keep-all; word-wrap:break-word;} .cont_body:after{content:''; display:block; clear:both;} /* 탭메뉴 common */ .lnb{margin-bottom:40px; width:100%; font-family:'s-core_dream';} .lnb ul{display:flex; flex-wrap:wrap; position:relative;} .lnb li{position:relative; padding:0; font-size:16px; line-height:1.2; letter-spacing:-1px;} .lnb li:before{display:none;} .lnb li a{display:flex; justify-content:center; align-items:center; position:relative; height:100%; color:#333; word-break:break-all;} .lnb li a[target="_blank"]:after{content:''; flex:0 0 auto; width:15px; height:13px; margin:0 0 0 5px; background-position:-31px -49px; vertical-align:baseline;} .lnb li.on a{color:#2054a8;} /* 탭메뉴01(일반 4개 이하) + 탭메뉴03(박스) */ .lnb.tmn01 ul, .lnb.tmn03 ul{background:#fff;} .lnb.tmn01 li, .lnb.tmn03 li{width:calc(25% + 1px); margin-bottom:-1px; margin-right:-1px; border:1px solid #d9d9d9; background:#f0f0f2;} .lnb.tmn01 li.on, .lnb.tmn03 li.on{border:1px solid #ec4b47;} .lnb.tmn01 li a, .lnb.tmn03 li a{position:relative; justify-content:flex-start; font-size:16px; color:#444; font-weight:700; padding:15px 50px 15px 25px;} .lnb.tmn01 li a:before, .lnb.tmn03 li a:before{width:24px; height:24px; content:""; position:absolute; right:20px; top:50%; margin-top:-12px; background-position:-112px -130px;} .lnb.tmn01 li.on a, .lnb.tmn03 li.on a{z-index:10; height:calc(100% + 2px); margin:-1px -1px 0 0; border:1px solid #ec4b47; background:#ec4b47; color:#fff;} .lnb.tmn01 li.on a:before, .lnb.tmn03 li.on a:before{background-position:-141px -130px;} .lnb.tmn01 li.on a:after, .lnb.tmn03 li.on a:after{width:6px; height:9px; background-color:transparent; background-position:0 -118px;} /* 탭메뉴03(박스) .lnb.tmn03{padding:25px 0; border:1px solid #dbdbdb; background:#fafafa;} .lnb.tmn03 li{position:static; width:33.33%;} .lnb.tmn03 li:before{content:''; display:inline-block; position:absolute; top:0; bottom:0; border-left:1px dotted #b5b5b5;} .lnb.tmn03 li:nth-child(3n+1):before{display:none;} .lnb.tmn03 li a{justify-content:flex-start; margin:0 0 0 25px; padding:5px 10px 4px 0;} .lnb.tmn03 li a:before{content:''; flex:0 0 auto; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#3e73c1;}*/ /* 탭메뉴04(년도) */ .lnb.tmn04{padding:0 7px; border:1px solid #ddd; box-shadow:0 5px 5px rgba(0,0,0,.05);} .lnb.tmn04 ul{display:flex; flex-wrap:wrap; align-items:center; overflow:hidden; margin:0; background-image:repeating-linear-gradient(#fff, #fff 50px, #dedede 50px, #dedede 51px, #fff 51px);} .lnb.tmn04 li{position:relative; min-width:10%; margin:7px 0; padding:0; line-height:1.2;} .lnb.tmn04 li:before{content:''; display:inline-block; position:absolute; top:0; left:-1px; bottom:0; width:0; height:15px; margin:auto; border-left:1px solid #dedede;} .lnb.tmn04 li a{display:flex; justify-content:center; align-items:center; overflow:hidden; height:36px; line-height:18px; margin:0 7px; padding:0 18px;} .lnb.tmn04 li.on:after{content:''; display:inline-block; position:absolute; left:calc(50% - 5px); top:100%; border:5px solid transparent; border-bottom:0; border-top-color:#2054a8;} .lnb.tmn04 li.on a{border-radius:3px; background:#2054a8; color:#fff;} /* 탭메뉴05 */ .lnb.tmn05{background:#f2f2f2; border-radius:20px; padding:7px 0;} .lnb.tmn05 ul{justify-content:center;} .lnb.tmn05 ul li{margin:7px 18px;} .lnb.tmn05 ul li a{font-size:18px; font-weight:700;} .lnb.tmn05 ul li:hover a{color:#09348d;} .lnb.tmn05 ul li.on a{padding:12px 20px; border-radius:25px; background:#09348d; color:#fff;} .lnb.tmn05 ul li.on a[target="_blank"]:after{background-position:-31px -31px;} /*** 컨텐츠 하단 ***/ .cont_foot{max-width:1140px; margin:40px 0 0 auto; border:1px solid #ddd; border-radius:10px; font-size:16px; letter-spacing:-1px; color:#333; overflow:hidden;} /* 컨텐츠 담당자 */ .cont_foot .cont_manager{display:flex; flex-wrap:wrap; align-items:center; padding:20px 40px 15px; background:#fcfcfc; font-family:"s-core_dream_bold";} .cont_foot .cont_manager dl{display:flex; align-items:center; margin-left:55px;} .cont_foot .cont_manager dl:first-child{margin-left:0;} .cont_foot .cont_manager dl.update{margin-left:auto;} .cont_foot .cont_manager dt{margin:0 5px 0 0; font-weight:400;} .cont_foot .cont_manager dd span{display:inline-flex;} .cont_foot .cont_manager dd .name{margin-left:5px;} /* 컨텐츠 평가 */ .cont_foot .cont_rating{padding:25px 40px; border-top:1px solid #ddd;} .cont_foot .cont_rating > .inr{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; position:relative;} .cont_foot .cont_rating h2{display:flex; align-items:center; position:relative; line-height:20px;} .cont_foot .cont_rating h2:before{content:''; width:27px; height:25px; margin-right:8px; background-position:-52px -130px;} .cont_foot .cont_rating .inp_area{} .cont_foot .cont_rating .inp_area fieldset{display:flex; flex-wrap:wrap; align-items:center;} .cont_foot .cont_rating .inp_area span{display:inline-flex; align-items:center; margin-right:15px;} .cont_foot .cont_rating .inp_area .inp_rdo{margin-right:3px;} .cont_foot .cont_rating .inp_area label{line-height:normal; letter-spacing:-1px;} .cont_foot .cont_rating .inp_area .btn_rate{height:36px; line-height:36px; padding:0 18px; border:0; background:#6357a3; font-size:15px; color:#fff; font-weight:700; border-radius:4px;} /* 공공누리 */ .cont_foot .openType {padding:10px;} .cont_foot .openType figure{position:relative; margin:0px;} .cont_foot .openType figure:after{content:''; display:block; clear:both;} .cont_foot .openType figure .fi_link{float:left; padding:0 10px 0 0;} .cont_foot .openType figure img {height:75px;} .cont_foot .openType figure figcaption {display:table-cell; padding:10px 0 0; font-size:0.86em; word-break:keep-all;} /************************************************** 팝업창 Layout **************************************************/ #wrap_pop{padding:0 10px;} #wrap_pop .pop_head{margin:0 0 30px; border-bottom:2px solid #666; } #wrap_pop .pop_head .title{padding:10px 0 10px 0; font-size:2.133em; line-height:1.15; letter-spacing:-3px;} /* Tablet ~ 1499px */ @media screen and (max-width:1499px){ /************************************************** Header **************************************************/ #header .area_top > .inr{margin:0 10px;} #header .gnb_wrap{margin:0 10px;} #header .gnb_wrap > .inr{margin:0; max-width:700px;} #header .sitemap_wrap .stm_header > .inr{margin:0 10px;} #header .sitemap_wrap .stm_container > .inr{margin:0 10px;} #header .sitemap_wrap .stm_container .stm_lst{flex-wrap:wrap;} #header .sitemap_wrap .stm_container .stm_lst > li{flex:auto; width:calc(33.33% - 20px); margin-left:30px;} #header .sitemap_wrap .stm_container .stm_lst > li:nth-child(3n + 1){margin-left:0;} #header .gnb_wrap .gnb_bg > .inr{padding:0; background:none;} #header .gnb_wrap .gnb_bg .tit_area{display:none;} /************************************************** Footer **************************************************/ #footer .inr{margin:0 10px;} /************************************************** Container **************************************************/ #container > .inr{margin:40px 10px 0;} /************************************************** Content **************************************************/ } /* Tablet ~ 1259px */ @media screen and (max-width:1259px){ /************************************************** Header **************************************************/ #header .gnb_wrap > .inr{margin:0; max-width:500px;} } /* Tablet 768px ~ 1023px */ @media screen and (max-width:1023px){ /************************************************** Common **************************************************/ .sp_ui, #wholeview .w_close_btn:after, .wholeview_wrap #wholeview .nav a .unfd:after, .wholeview_wrap #wholeview .nav a[target="_blank"]:after, .wholeview_wrap #wholeview .nav>li div>ul>li>a:after, .cont_head .area_location ol li:before, .cont_head .util_area button, .lnb li a[target="_blank"]:after, .cont_foot .cont_rating h2:before, .lnb.tmn01 li a:before, .lnb.tmn03 li a:before, .lnb.tmn01 li.on a:before, .lnb.tmn03 li.on a:before{display:inline-block; overflow:hidden; color:transparent !important; white-space:nowrap; background:url(../images/base/sp_ui_m.png) no-repeat 0 0/400px 400px;} /************************************************** Header **************************************************/ /* 헤더 상단 */ #header{border-bottom:1px solid #ddd;} #header .area_top{border-bottom:none;} #header .area_top > .inr{display:block; margin:0;} #header .area_top .util_l .lst{} #header .area_top .util_l .lst li{flex:1;} #header .area_top .util_l .lst li:first-child{border-left:none; min-width:120px;} #header .area_top .util_l .lst li.n02{min-width:115px;} #header .area_top .util_l .lst li a, #header .area_top .util_l .lst li:first-child a{height:40px; min-width:initial; border-radius:0 20px 0 0; padding:0 10px 0 20px; margin-left:-17px;} #header .area_top .util_r{position:absolute; top:69px; right:62px;} #header .area_top .util_r .lst_login{} #header .area_top .util_r .lst_login .name{display:none;} #header .area_top .util_r .lst_login li{position:relative; margin:0 0 0 15px; flex:0 0 auto;} #header .area_top .util_r .lst_login li:last-child:after{display:none;} #header .area_top .util_r .lst_login li a.login:before{background:url(../images/common/ico_login_m.png); background-size:18px;} #header .area_top .util_r .lst_login li a.join:before{background:url(../images/common/ico_join_m.png); background-size:23px;} #header .area_top .util_r .lst_login li a.logout:before{background:url(../images/common/ico_logout_m.png); background-size:18px;} #header .area_top .util_r .lst_login li a span{display:inline-block; text-indent:-9999999px;} /* 헤더 Logo */ #header .area_logo .logo img{width:200px;} /* GNB */ #header .gnb_wrap{height:80px;} #header .gnb_wrap > .inr{position:absolute; clip:rect(0,0,0,0); width:1px; height:1px; margin:-1px; overflow:hidden; white-space:nowrap;} #header .sitemap_wrap{display:none !important;} /* 모바일 전체메뉴 */ body.open_wv{overflow:hidden; position:fixed !important; width:100%; height:100%;} .wholeview_wrap .btn_wv{position:absolute; top:60px; right:10px; z-index:30; overflow:hidden; width:40px; height:40px; margin:auto; border-radius:50%; background:none;} /* .fixed_header .wholeview_wrap .btn_wv{position:fixed; top:0;} */ .wholeview_wrap .btn_wv .sp_ui{position:absolute; top:0; left:0; bottom:0; right:0; width:25px; height:20px; margin:auto; background:url(../images/common/m_menu.png); background-size:25px auto;} .wholeview_wrap{display:block;} .wholeview_wrap #wholeview{position:fixed; top:0; right:-1px; bottom:0; z-index:1000; overflow:auto; width:80%; max-width:420px; min-width:280px; background:#fff; margin-left:48px; transition:all 0.3s; transform:translate(100%, 0);} .wholeview_wrap #wholeview > .inr{overflow:hidden;} .wholeview_wrap.open #wholeview{margin-left:0; transform:translate(0, 0);} .wholeview_wrap .dim_wv{position:fixed; top:0; left:0; z-index:999; width:100%; background:transparent; transition:height, background .5s;} .wholeview_wrap.open .dim_wv{bottom:0; background:rgba(0,0,0,0.8);} .wholeview_wrap .title_wv{display:none;} #wholeview .w_close_btn{display:block; position:absolute; right:0; top:0; overflow:hidden; width:50px; height:50px; color:transparent;} #wholeview .w_close_btn:after{content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:17px; height:17px; margin:auto; background:url(../images/common/ico_w_close.png); background-size:17px;} #wholeview .lst_sns{display:flex; justify-content:center; height:45px; background:#555258;} #wholeview .lst_sns li{height:100%;} #wholeview .lst_sns a{display:block; position:relative; width:40px; height:100%; overflow:hidden; color:transparent;} #wholeview .lst_sns a:after{content:''; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;} #wholeview .lst_sns a.facebook:after{width:10px; height:21px; background-position:-64px 0;} #wholeview .lst_sns a.blog:after{width:14px; height:19px; background-position:-75px 0;} #wholeview .lst_sns a.instagram:after{width:21px; height:22px; background-position:-90.5px 0;} #wholeview .lst_sns a.youtube:after{width:24px; height:17px; background-position:-113.5px 0;} #wholeview .lst_sns a.kakaoch:after{width:23px; height:24px; background-position:-139px 0;} /* 모바일 전체메뉴 head */ #wholeview .head{display:flex; align-items:center; height:50px; padding:0 20px; background:#f0f0f2; font-size:15px;} #wholeview .head .home{display:flex; align-items:center;} #wholeview .head .home:before{content:""; display:block; width:30px; height:30px; margin:0 5px 0 0; background:url(../images/common/ico_home_m.png); background-size:30px;} #wholeview .head .name{margin:0 0 0 20px;} #wholeview .area_login{display:flex; align-items:center; justify-content:space-between; padding:10px 20px;} #wholeview .area_login a{display:flex; align-items:center; justify-content:center; border:1px solid #e0e0e0; border-radius:10px; width:48%; font-size:15px; height:45px;} #wholeview .area_login a.logout{width:100%;} #wholeview .area_login a:before{content:""; display:block; margin:0 5px 0 0;} #wholeview .area_login a.login:before{width:18px; height:21px; background:url(../images/common/ico_login_m.png); background-size:18px 21px;} #wholeview .area_login a.join:before{width:23px; height:19px; background:url(../images/common/ico_join_m.png); background-size:23px 19px;} #wholeview .area_login a.logout:before{width:18px; height:21px; background:url(../images/common/ico_logout_m.png); background-size:18px 21px;} /* 모바일 전체메뉴 gnb */ .wholeview_wrap #wholeview .nav{padding:0; border-top:1px solid #ddd; background:#fff; color:#111;} .wholeview_wrap #wholeview .nav a{display:block; position:relative; line-height:1.2;} .wholeview_wrap #wholeview .nav a .unfd{position:absolute; top:50%; right:20px; transform:translateY(-50%); width:0; height:0; color:transparent;} .wholeview_wrap #wholeview .nav a .unfd:after{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:transform .3s;} .wholeview_wrap #wholeview .nav a[target="_blank"]:after{content:''; width:16px; height:14px; margin:0 0 0 5px; background-position:-92px -88px;} /* 1차 */ .wholeview_wrap #wholeview .nav>li{border-bottom:1px solid #ddd;} .wholeview_wrap #wholeview .nav>li>a{padding:18px 10px 18px 20px; font-size:18px; letter-spacing:-1px; background:#757284; color:#fff; line-height:1; font-weight:700;} .wholeview_wrap #wholeview .nav>li>a.on{background:#6255a2;} .wholeview_wrap #wholeview .nav>li>a .unfd:after{width:14px; height:8px; background-position:-14px -86px;} .wholeview_wrap #wholeview .nav>li.open>a .unfd:after{background-position:-14px -86px;} /* 2차 */ .wholeview_wrap #wholeview .nav>li>div{display:none; background:#fff;} .wholeview_wrap #wholeview .nav>li.open div{display:block;} .wholeview_wrap #wholeview .nav>li div>ul>li{} .wholeview_wrap #wholeview .nav>li div>ul>li>a{padding:13px 20px 12px 20px; font-size:17px; border-bottom:1px solid #ccc; font-weight:700;} .wholeview_wrap #wholeview .nav>li div>ul>li:last-child>a{border-bottom:none;} .wholeview_wrap #wholeview .nav>li div>ul>li>a:after{content:''; position:absolute; top:50%; right:15px; width:8px; height:14px; background-position:-14px -70px; transform:translateY(-50%);} .wholeview_wrap #wholeview .nav>li div>ul>li>a.parent:after{display:none;} .wholeview_wrap #wholeview .nav>li div>ul>li>a.on{} .wholeview_wrap #wholeview .nav>li div>ul>li>a .unfd{right:21px;} .wholeview_wrap #wholeview .nav>li div>ul>li>a .unfd:after{width:14px; height:14px; background-position:-13px -95px;} .wholeview_wrap #wholeview .nav>li div>ul>li.open{} .wholeview_wrap #wholeview .nav>li div>ul>li.open>a{margin:-1px -1px 0;} .wholeview_wrap #wholeview .nav>li div>ul>li.open>a .unfd:after{width:14px; height:2px; background:#333;} /* 3차 */ .wholeview_wrap #wholeview .nav>li div>ul>li>ul{display:none; padding:20px; border-bottom-right-radius:10px; background:#fff;} .wholeview_wrap #wholeview .nav>li div>ul>li.open>ul{display:block; background:#f5f5f5;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li{} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li:last-child{border:0;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>a{padding:7px 0 6px 15px; font-size:15px; color:#000;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>a.on{font-weight:600; color:#019a83;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>a:before{content:''; display:inline-block; position:absolute; top:13px; left:4px; width:4px; height:4px; border-radius:50%; background:#bbb;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>a.on:before{background:#019a83;} /* 4차 */ .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>ul{padding:0 0 10px 12px;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li.open>ul{display:block;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>ul a{padding:6px 0 5px 0; font-size:14px; color:#666;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>ul a.on{font-weight:600; color:#3065b0;} /* 모바일 검색 */ #header .wv_srch_wrap{display:block;} #header .wv_srch_wrap .btn_open{position:absolute; top:49px; right:10px; z-index:2; overflow:hidden; width:35px; height:35px; background:#fff; border-radius:35px;} #header .wv_srch_wrap .btn_open .sp_ui{position:absolute; top:0; left:0; bottom:0; right:0; width:35px; height:35px; margin:auto; background:url(../images/common/m_srch.png) no-repeat 0 0/auto 100%;} #header .wv_srch_wrap.open .btn_open .sp_ui{width:35px; height:35px; background-image:url(../images/common/m_close.png);} #header .wv_srch_area{display:none; position:absolute; left:0; top:99px; width:100%; z-index:1001; padding:17px 10px; background:rgba(0,0,0,0.2);} #header .wv_srch_wrap.open .wv_srch_area{display:block;} #header .wv_srch_wrap .box_srch{position:relative; border:2px solid #053d8e; } #header .wv_srch_area .select{position:absolute; top:0; left:0; bottom:0; width:95px; z-index:10; height:40px;} #header .wv_srch_area .select select{width:100%; height:100%; border:0; box-shadow:none; margin:0 !important;} #header .wv_srch_area .inp_word{display:block; position:relative; height:40px; margin:0 45px 0 95px; } #header .wv_srch_area .inp_word:before{content:''; display:inline-block; position:absolute; top:0; left:0; bottom:0; height:15px; margin:auto; border-left:1px solid #ddd;} #header .wv_srch_area .inp_word input{width:100%; height:100%; border:0; box-shadow:none; margin:0 !important;} #header .wv_srch_area .btn_srch{position:absolute; top:0; right:0; bottom:0; width:45px; background:#053d8e url(../images/common/m_srch.png) no-repeat 90%/auto 40px; color:transparent;} /* 사이트맵 */ #header .gnb_sitemap{display:none;} /* 학습소식 */ #header .btn_notice{display:none;} /************************************************** Footer **************************************************/ #footer{padding:30px 0; margin:40px 0 0;} #footer .footer_top{flex-direction:column; margin:0;} #footer .footer_top .area_l{justify-content:center;} #footer .footer_top .area_r{margin:20px 0;} #footer .wrap_copyright, #footer .wrap_copyright .area_l{flex-direction:column;} #footer .wrap_copyright .area_copyright{text-align:center; margin:0 0 25px 0;} #footer .wrap_copyright .logo{margin:0 0 10px 0;} #footer .wrap_copyright .logo img{width:180px;} #footer .footer_top .area_r .related{width:160px;} #footer .footer_top .area_r .related .open_select{height:45px;} #footer .footer_top .area_r .related .open_select:after{top:14px;} #footer .footer_top .area_r .related.on .open_select:after{top:18px;} /************************************************** Container **************************************************/ #side {display:none;} #container{margin:0;} #container > .inr{padding:0;} /* 탭메뉴01(일반 4개 이하) + 탭메뉴03(박스) */ .lnb.tmn01 li a, .lnb.tmn03 li a{padding:12px 32px 12px 12px; font-size:16px;} .lnb.tmn01 li a:before, .lnb.tmn03 li a:before{right:10px; background-position:-194px -65px;} .lnb.tmn01 li.on a:before, .lnb.tmn03 li.on a:before{background-position:-165px -65px;} /* 탭메뉴05 */ .lnb.tmn05 ul li{margin-left:10px; margin-right:10px;} .lnb.tmn05 ul li a{font-size:15px;} .lnb.tmn05 ul li.on a{padding:8px 13px;} /************************************************** Content **************************************************/ /*** 컨텐츠 공통 ***/ .cont_wrap{width:100%;} /*** 컨텐츠 헤드 ***/ .cont_head{margin:0 0 30px 0; padding:0 0 10px 0; border-bottom-width:1px;} .cont_head .area_title .title{font-size:22px; text-align:center; padding:13px 10px; margin:0; color:#fff; border-radius:10px; background:#6357a3; z-index:10;} .cont_head .area_title .title span{position:relative;} .cont_head .area_title .title span:before{content:''; position:absolute; top:0; right:-33px; bottom:0; width:23px; height:23px; margin:auto; border-radius:50%; border:2px solid #fff;} .cont_head .area_title .title span:after{content:''; position:absolute; right:-24px; top:9px; width:7px; height:7px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(135deg);} .cont_head .area_title .title.open span:after{transform:rotate(315deg); top:12px;} .cont_head .area_title .title.open + .nav{display:block; top:initial;} .cont_head .nav{display:none; position:absolute; top:100%; left:0; right:0; z-index:20; padding:10px 10px 15px; background:#fff; border:1px solid #ccc; border-top:none; box-shadow:0 10px 10px rgba(91,91,91,.1); border-radius:0 0 15px 15px;} .cont_head .nav:before, .cont_head .nav:after{content:""; position:absolute; width:1px; height:10px; background:#ccc;} .cont_head .nav:before{left:-1px; top:-6px;} .cont_head .nav:after{right:-1px; top:-6px;} .cont_head .nav li{margin-top:5px;} .cont_head .nav li:first-child{margin-top:0;} .cont_head .nav a{display:block; padding:10px; border:1px solid #ccc; border-radius:10px; font-size:16px; letter-spacing:-1px; text-align:center; color:#666;} .cont_head .nav a.on{font-weight:600; color:#007460; border:1px solid #007460;} .cont_head .nav a span{position:relative;} .cont_head .nav a span:after{content:''; position:absolute; right:-15px; top:4px; width:7px; height:7px; border-top:2px solid #999; border-right:2px solid #999; transform:rotate(45deg);} .cont_head .nav a.on span:after{border-top-color:#007460; border-right-color:#007460;} .cont_head .btn_back{display:block; position:absolute; top:-40px; left:5px; z-index:10; width:50px; height:40px; background:none; font-size:15px; font-weight:700; font-family:'s-core_dream_bold';} .cont_head .btn_back:before{content:''; position:absolute; left:0; top:17px; width:7px; height:7px; border-top:2px solid #000; border-left:2px solid #000; transform:rotate(315deg);} .cont_head .area_location{padding:10px;} .cont_head .area_location ol.location li{margin:2px 0; font-size:14px;} .cont_head .area_location ol.location li:before{width:5px; height:8px; background-position:-3px -50px;} .cont_head .area_location ol.location li:first-child:before{width:24px; height:24px; background-position:-14px -22px;} .cont_head .util_area{top:-34px; right:5px;} .cont_head .util_area .btn_zin, .cont_head .util_area .btn_zout, .cont_head .util_area .btn_print{display:none;} .cont_head .util_area .c_share_box .btn_share{width:30px; height:30px; border:none; margin:0; background-origin:border-box; background-position:-293px 0;} .cont_head .util_area .c_share_box.open .btn_share{background-position:-261px 0; width:30px; height:30px; border-radius:50%;} .cont_head .util_area .c_share_box .ly_share{top:calc(100% + 3px); right:0; flex-direction:column; align-items:center; border:1px solid #d9d9d9;} .cont_head .util_area .c_share_box .ly_share button{width:28px; height:28px; margin:0 0 10px 0; background-image:url(../images/base/sp_sns_m.png); background-size:200px 30px;} .cont_head .util_area .c_share_box .ly_share .btn_facebook{background-position:0 0;} .cont_head .util_area .c_share_box .ly_share .btn_blog{background-position:-30px 0;} .cont_head .util_area .c_share_box .ly_share .btn_instagram{background-position:-60px 0;} .cont_head .util_area .c_share_box .ly_share .btn_kakao{background-position:-90px 0;} .cont_head .util_area .c_share_box .ly_share .btn_twitter{background-position:-120px 0;} .cont_head .util_area .c_share_box .ly_share .btn_copyurl{margin:0;} /*** 컨텐츠 바디 ***/ .cont_body{margin:0;} /* 탭메뉴 common */ .lnb{margin-bottom:20px;} .lnb li a[target="_blank"]:after{background-position:-57px -88px;} /*** 컨텐츠 하단 ***/ .cont_foot{margin:40px 0 0; font-size:14px;} .cont_foot .cont_manager{padding:15px 20px;} .cont_foot .cont_rating{padding:20px;} .cont_foot .cont_rating h2:before{background-position:-39px -111px; flex:0 0 auto;} /************************************************** 팝업창 Layout **************************************************/ #wrap_pop{padding:0;} #wrap_pop .pop_head{border-bottom:1px solid #ddd;} #wrap_pop .pop_head .title{padding:13px 10px; background:#def4f9; font-size:1.5em; letter-spacing:-2px; text-align:center;} } /* Mobile ~ 767px */ @media screen and (max-width:767px){ /************************************************** 상단 배너 **************************************************/ #topban .topbanzone .nav .area_ctrl{bottom:30px; display:none;} #topban .topbanzone .nav .area_ctrl button{width:18px; height:18px; background-size:95px 20px;} #topban .topbanzone .nav .area_ctrl .prev{background-position:-15px 0;} #topban .topbanzone .nav .area_ctrl .pause{background-position:-35px 0;} #topban .topbanzone .nav .area_ctrl .play{background-position:-55px 0;} #topban .topbanzone .nav .area_ctrl .next{background-position:-75px 0;} #topban .topbanzone .nav .area_close label{font-size:14px;} #topban .topbanzone .nav .area_close{bottom:5px;} #topban .topbanzone .nav .area_close .inp_chk{margin-right:3px;} #topban .topbanzone .nav .area_close .btn_close{width:15px; height:15px; margin:5px 0 0 5px; background-size:95px 20px;} #topban .topbanzone .item .b_t{display:none;} #topban .topbanzone .item .b_m{display:block;} /************************************************** Header **************************************************/ #header .area_top .util_l .lst li a{font-size:13px;} #header .area_top .util_l .lst li a .mobile{display:block;} /************************************************** Footer **************************************************/ /************************************************** Container **************************************************/ /*** 컨텐츠 바디 ***/ .lnb li{font-size:14px;} /* 탭메뉴01(일반 4개 이하) + 탭메뉴03(박스) */ .lnb.tmn01 li, .lnb.tmn03 li{width:calc(50% + 1px);} .lnb.tmn01 li a, .lnb.tmn03 li a{padding:10px 32px 10px 12px; font-size:16px;} /* 탭메뉴03(박스) .lnb.tmn03{padding:15px 0;} .lnb.tmn03 li{width:50%;} .lnb.tmn03 li:nth-child(2n+1):before{display:none;} .lnb.tmn03 li a{margin-left:15px;}*/ /* 탭메뉴04(년도) */ .lnb.tmn04 ul{background-image:repeating-linear-gradient(#fff, #fff 39px, #dedede 39px, #dedede 40px, #fff 40px);} .lnb.tmn04 li{margin:5px 0;} .lnb.tmn04 li a{height:30px; margin:0; padding:0 5px;} .lnb.tmn04 li.on a{margin:0 5px;} .lnb.tmn04 li.on:after{border-width:4px 4px 0;} /*** 컨텐츠 하단 ***/ .cont_foot .cont_manager dl{margin:3px 20px 3px 0;} .cont_foot .cont_manager dl.update{margin-left:0;} .cont_foot .cont_rating > .inr{flex-direction:column; align-items:flex-start;} .cont_foot .cont_rating .inp_area{margin-top:10px;} } @media screen and (max-width:639px){ } @media screen and (max-width:537px){ /*** 컨텐츠 하단 ***/ /* 컨텐츠 평가 */ .cont_foot .cont_rating .inp_area div{width:100%; margin-top:10px; text-align:center;} /* TabMenu3(년도) */ .lnb.tmn04 li{min-width:25%;} } @media screen and (max-width:380px){ /************************************************** Header **************************************************/ /* 헤더 Logo */ #header .area_logo .logo img{width:180px;} #header .area_top .util_l .lst li:first-child{min-width:85px;} #header .area_top .util_l .lst li.n02{min-width:85px;} #header .area_top .util_l .lst li a{font-size:12px;} #header .area_top .util_l .lst li a .br_m{display:block;} } @media screen and (max-width:360px){ /************************************************** Header **************************************************/ #header .area_top .util_l .lst li a{font-size:11px;} }