@charset "utf-8";
/* com2zoa design KJH  20220114 */

/* animation */
@keyframes effect{
    0%,40%,100% {transform:translateX(0)}
    20%,60% {transform:translateX(-5px)}
}
/* Common */
.mobile_bg {display: none; position: fixed; width: 100%; height: 100%;  left: 0; top: 0; background: #000; z-index:400}
.clear_fix:after {content: ""; display: block; clear: both}
.hide{display: none}
.hidden{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.blind {font-size:0; overflow:hidden; text-indent:-9999999px; height:0; width:0; line-height:0}

/* ==== Layout ==== */
#wrap {width: 100%; min-width:330px; font-family: CGC}
#mainheader {position:relative; z-index:100}
.headerwrap {min-width:340px; box-sizing:border-box}
.header_top {position:absolute; width:100%; height:60px; background-color:#fff; box-shadow:0px 3px 8px rgba(0,0,0,0.1)}
#content{position:relative}
.gnb_quick {display:none}

/* ==== 상단 영역 ==== */
/* 로고 */
.logo_top {position:absolute; top:10px; left:0}
.logo_top a {display:inline-block}

/* 탑메뉴 영역 */
.top_wrap {position:relative}
.qmenu {position:absolute; top:22px; right:0}
.top_menu .qmn_btn {float:left; margin-left:20px}
.top_menu .qmn_btn a {display:block}

/* 로그인 영역 */
.qmn_logwrap {position: relative; display:inline-block}
.qmn_logwrap .logbox {display: none; position: absolute; top:30px; left:50%; width:100px; padding:4px 0; margin-left:-50px; background: #fff; border:2px solid #e7e7e7;  border-radius:10px; text-align: center; box-shadow:2px 2px 10px rgba(0, 0, 0, 0.1); z-index:1}
.qmn_logwrap .logbox .loglst li {line-height: 140%; border-bottom: 1px solid #dbdcdd}
.qmn_logwrap .logbox .loglst li a {margin:3px 0; padding:6px 0; color:#111; font-size:1.077em; font-weight:500}
.qmn_logwrap .logbox .loglst li a  span {display:block}
.qmn_logwrap .logbox .loglst li:last-child{padding-bottom: 0; margin-bottom: 0; border-bottom:none}
.qmn_logwrap .logbox .loglst li:hover a {background:#e7e7e7;  transition:.3s}

/* 팝업 영역 */
.popup_wrap {width:100%; position:absolute; top:0; right:0; z-index:99}
.popup_pc .popup_on {display:none; position: absolute; top:285px; right:0; overflow:hidden; width: 100%; height:296px; margin: 0 auto; background:rgba(0,0,0,0.5); text-align: center; box-shadow:0 3px 3px 2px rgba(0,0,0,0.1)}  
.popup_pc .popup_layer_wrap {overflow: hidden; position: relative; padding-top:10px}
.popup_pc .slick-prev {position: absolute; bottom:15px; left:10px; width:19px; height:25px; background:url(../images/main/btn_pop_prev.png) 0 0 no-repeat}
.popup_pc .slick-next {position: absolute; bottom:15px; right:10px; width:19px; height:25px; background:url(../images/main/btn_pop_next.png) 100% 0 no-repeat}
.popup_pc button {overflow:hidden; line-height:0; font-size:0; text-indent:-9999px; z-index:50}
.popup_pc .popup_imgsize {width: 100%; height:230px}
.popup_pc .popup_imgsize img {width:253px; height:230px; margin:0 auto; box-sizing:border-box; border:1px solid #cecece; border-radius:10px}
.popup_pc .popup_layer .popup_tit {display:block; padding:10px 45px; margin:12px 0; font-size:1.154em; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.popup_pc .popup_layer .popup_tit a {color:#fff}
.popup_pc .popup_layer .popup_tit:hover a {text-decoration:underline}
.popup_wrap .popup_on.active {display:block}

/* ==== 비주얼 영역 ==== */ 
/* 비주얼 이미지 */
.visual {position:relative; height:350px}
.visual .visual_wrap {width:100%}
.visual .visual_item {height:350px}
.visual_wrap .visual_item > a {position: relative; display:block; box-sizing:border-box; height:349px}

.visual .visual_item .v_txt {overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999px}
.visual .item1 {background:url(../images/main/v_m01_new.jpg) no-repeat 50% 0}
.visual .item2 {background:url(../images/main/v_m02_new.jpg) no-repeat 50% 0}

/* 비주얼 블릿 */
.slick-dots {position: absolute; left:50%; top:50%; margin:0 0 0 80px}
.slick-dots li {display:inline-block; float:left; margin: 0 4px 0 0 }
.slick-dots li button{display:block; width:17px; height:17px; background:#fff; border-radius:50%; cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,0.2)}
.slick-dots li button span {overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.slick-dots li.slick-active button {background:#f29f33}

/*재생,일시정지*/
.visual_wrap .btn_visual {position: absolute; left:50%; top:50%; margin:17px 0 0 122px}
.visual_wrap .btn_visual li{position: absolute; left:0; bottom:0}
.visual_wrap .btn_visual li.blind{display:none}
.visual_wrap .btn_visual button {width:17px; height:17px; cursor:pointer; border-radius:50% 50%; box-shadow:0 2px 5px rgba(0,0,0,0.1); font-size:0}
.visual_wrap .btn_visual button.vbtn_pause{ background:#fff url(../images/main/btn_pause.gif) no-repeat 50% 50%}
.visual_wrap .btn_visual button.vbtn_play{background:#fff url(../images/main/btn_play.gif) 50% 50% no-repeat}

/* ====  메인컨텐츠 ==== */
/* notice */
#main_notice {padding:15px 10px; background:#fff; border-radius:15px 15px}
.noti_titarea dl dt {height:27px; background:url(../images/main/img_noti_mtit.gif) no-repeat 0 0; font-size:0}
.noti_titarea dl dd {padding:10px 5px 13px; line-height:140%; font-weight:400; color:#2c2c2c}
.noti_titarea dl dd br {display:none}
.noti_more {display:none}

.notice_box {overflow:hidden; position: relative; padding:50px 0 0}
.notice_box h3 {position: absolute; top:0; width:auto;box-sizing: border-box; font-size:1.154em; font-weight:500; text-align: center}
.notice_box h3 a {position:relative; display: block; padding:0 20px; height:34px; line-height:34px; z-index:1; border-radius:50px 50px; border:1px solid #c7c7c7}
.notice_box h3:hover a, .notice_box h3.on > a {background:#fc5050; border-color:#fc4949; color:#1a1a1a; transition:.3s; color:#fff}
.notice_box .noticetab01 {left:0}
.notice_box .noticetab02 {left:105px}
.notice_box .btn_more {position:absolute; top:2px; right:0; }
.notice_box .btn_more a {display:block; width:32px; height:32px; line-height:32px; border-radius:10px; background:#d4d4d4; text-align: center}
.notice_box .btn_more:hover a  {background:#fc5050; transition:.5s}
.noticetb {overflow:hidden}
.noticetb ul {overflow:hidden; height:200px}
.noticetb ul li > div{position:relative; overflow: hidden; margin-top:10px; padding:10px 15px; background:#fff; border-radius:15px; box-sizing: border-box; cursor:pointer; border:1px dashed #ccc}
.noticetb ul li:first-child div {margin-top:0}
.noticetb ul li a {overflow:hidden; display:block; height:18px; line-height:150%; margin:1px 0 7px; font-size:1.077em; font-weight:500; color:#000; text-overflow:ellipsis; white-space: nowrap}
.noticetb ul li a .noti_txt {display:none}
.noticetb ul li:hover div {border:1px dashed #fc5050; transition:.4s}
.noticetb .date {display:block; text-align:right; font-weight:300; color:#9a9a9a; font-size:0.923em}

/* MEMBER */
.aimem_titarea dl dt {height:27px; background:url(../images/main/img_mem_mtit.gif) no-repeat 0 0; font-size:0}
.aimem_titarea dl dd {padding:10px 5px 13px; line-height:140%; font-weight:400; color:#2c2c2c}
.aimem_titarea dl dd br {display:none}
.aimem_lst {padding:15px; border:4px solid #e9e9e9; border-radius:15px 15px 0 0}
.aimem_lst ul li {margin-top:10px}
.aimem_lst ul li a {position:relative; overflow:hidden; display: block; padding:20px; text-align: right; border-radius:20px; font-size:1.154em; font-weight:500; color:#1a1a1a; border:2px solid #fff}

.aimem_lst ul li:hover a {padding-right:50px; border:2px solid #fff; transition: .3s}
.aimem_lst ul li a:before {content:""; display:block; position:absolute; top:50%; right:0; width:0; height:64px; margin:-32px 0 0 0; border-radius:50% 50%; transition:.3s}
.aimem_lst ul li:hover a:before {width:64px; margin-right:-32px}
.aimem_lst ul lst01 {margin:0}
.aimem_lst ul li.aimem_lst01 a {background:#edf8de url(../images/main/ico_member01_m.png) no-repeat 20px 50%; border-color:#edf8dd}
.aimem_lst ul li.aimem_lst01:hover a {background-color:#fff; border-color:#acd879}
.aimem_lst ul li.aimem_lst01:hover a:before {background:#acd879 url(../images/main/btn_mem_arr.png) no-repeat 14px 50%}
.aimem_lst ul li.aimem_lst02 a {background:#ffebe8 url(../images/main/ico_member02_m.png) no-repeat 20px 50%; border-color:#ffebe7}
.aimem_lst ul li.aimem_lst02:hover a {background-color:#fff; border-color:#ff7965}
.aimem_lst ul li.aimem_lst02:hover a:before {background:#ff7965 url(../images/main/btn_mem_arr.png) no-repeat 14px 50%}
.aimem_lst ul li.aimem_lst03 a {background:#e0f4ff url(../images/main/ico_member03_m.png) no-repeat 20px 50%; border-color:#e0f4fe}
.aimem_lst ul li.aimem_lst03:hover a {background-color:#fff; border-color:#60b1ff}
.aimem_lst ul li.aimem_lst03:hover a:before {background:#60b1ff url(../images/main/btn_mem_arr.png) no-repeat 14px 50%}
.aimem_baro {display:none}

/* 국민보급 ai스마트 조명 */
.aismart_wrap {background:#fff url(../images/main/bg_aismart_m.gif) no-repeat 50% 0}
.aismart_box {height:190px}
.aismart_box h3 {padding:20px 0; line-height:120%; text-align: center; font-size: 1.308em; font-weight:500; color:#fff}
.btn_aismart a {display:block; width:128px; height:36px; line-height:36px; margin:0 auto; padding:0 40px 0 10px; background:url(../images/main/btn_switch_off.png) no-repeat 0 0; color:#111; font-weight:500; box-sizing: border-box}
.btn_aismart a:hover {background:url(../images/main/btn_switch_on.png) no-repeat 0 0; transition:.3s}
.aismart_go {position:absolute; top:50%; right:20px; display:block; width:19px; height:19px; margin-top:-9px; background:rgba(0,0,0,0.5) url(../images/main/btn_con_marr.png) no-repeat 50% 50%; font-size:0; border-radius:50% 50%}
.aismart_txt {padding:20px 40px; background:url(../images/main/blt_smart_mtit.gif) no-repeat 15px 50%; font-weight:500; font-size:1.154em}
.aismart_txt span {color:#1f9ff9}
.aismart_baro {transition:all .3s ease-in-out}
.aismart_baro a {position:relative; display:block; border:3px solid #60cbfe; color:#111}
.aismart_baro:hover a {border-color:#5daafe}
.aismart_baro:hover .aismart_go, .aismart_baro:focus .aismart_go  {background-color:#60cbfe;  animation:effect 3s ease infinite; transition:.3s}

/* quick service */
.content03 {background-color:#175296; background-image:url(../images/main/bg_content03_m1.gif), url(../images/main/bg_content03_m2.gif); background-position:50% 0, 50% 100%; background-repeat:no-repeat, no-repeat}
.qserv_wrap {position:relative; box-sizing:border-box}
.qserv_titarea dl dt {height:27px; background:url(../images/main/img_service_mtit.png) no-repeat 50% 0; font-size:0; text-align: center}
.qserv_titarea dl dd {padding:10px 0; line-height:140%; font-weight:400; color:#fff; text-align: center}
.qserv_titarea dl dd br {display:none}
.qserv_baro ul li {margin-top:18px}
.qserv_baro ul li:first-child {margin-top:10px}
.qserv_baro ul li a {display: block; padding:20px; border-radius:12px}
.qserv_baro ul li:hover a {transition:.5s}
.qbaro_lst01 a {background:#919aff url(../images/main/bg_mquick_service01.png) no-repeat 100% 100%}
.qbaro_lst02 a {background:#2dbcdb url(../images/main/bg_mquick_service02.png) no-repeat 100% 100%}
.qbaro_lst03 a {background:#61acf8 url(../images/main/bg_mquick_service03.png) no-repeat 100% 100%}
.qbaro_lst01:hover a {background-color:#707cff}
.qbaro_lst02:hover a {background-color:#02a2c5}
.qbaro_lst03:hover a {background-color:#2d95ff}
.qbaro_tit {display:block; margin-bottom:10px;  font-size:1.231em; font-weight:500; color:#fff}
.qbaro_txt {display:block; line-height:130%; margin-bottom:15px; font-weight:200; color:#fff}
.qbaro_link {position:relative; padding:10px 40px 10px 0; font-weight:300; color:#fff}
.qbaro_link:after {content:""; display:block; position:absolute; top:50%; right:10px; display:block; width:19px; height:19px; margin-top:-10px; background:rgba(0,0,0,0.5) url(../images/main/btn_con_marr.png) no-repeat 50% 50%; font-size:0; border-radius:50% 50%}
.qserv_baro ul li a:hover .qbaro_link:after, .qserv_baro ul li a:focus .qbaro_link:after {animation:effect 3s ease infinite; transition:.3s}

/* 협동조합 안내 */
.qinfo_wrap {display:block; padding:10px 45px 10px 20px;  margin:20px 0; background:url(../images/main/bg_mquick_info.png) no-repeat 100% 50%}
.qinfo_wrap h3 {font-size:1.077em; font-weight:400; color:#fff}
.qinfo_wrap .qinfo_tel {margin:10px 0; font-size:1.692em; font-weight:500; color:#fff}
.qinfo_wrap .qinfo {font-size:11px; letter-spacing:0.3px; color:rgba(255,255,255,0.6)}

/* sns 바로가기 */
.qsns_wrap {padding:0 3px 15px; border:1px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.3); border-radius:15px; color:#fff; text-align: center}
.qsns_wrap h3 {display:inline-block; padding:15px 0 20px 45px; background:url(../images/main/blt_snsbaro_mtit.png) no-repeat 0 0; font-size:1.231em; font-weight:500}
.qsns_wrap h3 span {color:#16f7ff; font-size:1.24em; vertical-align:text-bottom}
.qsns_wrap .qsns_txt {display:block}
.qsns_lst {max-width:360px; margin:10px auto 0}
.qsns_lst li {float:left; width:50%; padding:0 12px; box-sizing: border-box}
.qsns_lst li a {display:inline-block; padding:18px 0px 18px 48px; color:#fff}
.qsns_lst01 a {background:url(../images/main/btn_sns_facebook.png) no-repeat 0 50%}
.qsns_lst02 a {background:url(../images/main/btn_sns_blog.png) no-repeat 0 50%}
.qsns_lst03 a {background:url(../images/main/btn_sns_insta.png) no-repeat 0 50%}
.qsns_lst04 a {background:url(../images/main/btn_sns_youtube.png) no-repeat 0 50%}

 /* banner */
.banner_wrap {background:#fff}
.ban_head {position:relative; float:left; width:98px; padding:15px 0 15px 10px}
.ban_head .tit {width:79px; height:22px; background:url(../images/main/img_ban_mtit.gif) no-repeat 0 0;margin-bottom:5px; font-size:0}
.ban_head .btn_more {position:absolute; top:18px; right:0}
.ban_head .btn_more a {display:block}
.ban_head .btn_slide li {float:left; margin-right:3px; text-align: center}
.ban_head .btn_slide li a {display:block; width:25px; height:25px}
.ban_head .btn_slide li img {vertical-align:middle}
.ban_item a {overflow:hidden; display:block; width:100%; max-width:220px; height:50px; margin:0 auto; border:1px solid #cdcdcd; border-radius:7px}
.ban_item img {width:100%; height:100%; margin: 0 auto}
.ban_area {padding:17px 12px 17px 125px}

/* Footer */
#footwrap {position:relative; background:#353535; z-index:1}
.foot_area .col01 a {color:#fff}
.mb_menu {background:#353535; text-align:center; border-bottom:1px solid #5d5d5d}
.mb_menu li {display:inline-block; padding:10px 5px 10px 14px; background:url(../images/main/bg_foot_dott.gif) no-repeat 0 50%}
.mb_menu li a {display:inline-block; line-height:28px; font-weight:300; color:#fff}
.mb_menu li:first-child {background:none}
.sb_menu {margin:12px 10px}
.sb_menu li {display:none; float:left; text-align: center; box-sizing: border-box}

.address_wrap address p {display:block; line-height:160%; font-weight:300; color:#aaa}
.address_wrap address p.fadd_add {margin-bottom:5px; line-height:140%; color:#fff; word-break:keep-all}
.address_wrap address p.fadd_email span {padding:4px 0 4px 30px; background:url(../images/main/ico_email.gif) no-repeat 0 50%}
.address_wrap address p.fadd_tel span {padding:4px 0 4px 26px; background:url(../images/main/ico_telimg.gif) no-repeat 0 50%}
.address_wrap address p.fadd_fax span {padding:4px 0 4px 26px; background:url(../images/main/ico_faximg.gif) no-repeat 0 50%}
.address_wrap address p.fcopy {padding:13px 5px 10px}

/* ====================mobile layout==================== */
@media only screen and (max-width: 1024px) {
/* ==== skip navi ==== */
.pc_skip{display:none}

/* ==== 상단 영역 ==== */
.top_wrap {width:100%}
/* 로고 */
.logo_top {top:10px; left:10px}
.logo_top img {width:256px; height:36px}

/* 탑 퀵 영역  */
.qmenu {top:12px; right:10px}
.qmn_logwrap, .qmn_srch {display:none}
.top_menu .qmn_allmn a {width:32px; height:32px; background:#fff url(../images/main/btn_allmn_m.gif) no-repeat 50% 50%; font-size:0; border-radius:10px 10px; border:1px solid #d1d1d1} 
    
/* ==== gnb ==== */
#gnb {display: none; position:fixed; top:0; right:0;  width:250px;height:100%; min-height:100%; background:#fff; z-index:1000; overflow-y:auto}

/*GNB_상단*/
#gnb .allbtnclose .closebtn {display:block; position:absolute; top:0; right:0; width:38px; height:35px; background:#56d6ef url(../images/main/btn_allmn_close.gif) no-repeat 50% 45%; border-radius:0 0 0 15px; font-size:0}
.gnb_quick {display:block; padding:3px 10px 8px}
.gnb_quick li {float:left; width:74px; margin-left:4px}
.gnb_quick li:first-child {margin-left:0}    
.gnb_quick li a {display:block; padding:45px 8px 5px; line-height:120%; text-align: center; border-radius:15px; border:2px solid #dededc; box-sizing: border-box; font-weight:500}
.gnb_quick li:hover a {color:#000; transition:.3s}
.gnb_qmn01 a {background:url(../images/main/bg_quick_mn01.png) no-repeat 50% 5px}
.gnb_qmn02 a {background:url(../images/main/bg_quick_mn02.png) no-repeat 50% 5px}
.gnb_qmn03 a {background:url(../images/main/bg_quick_mn03.png) no-repeat 50% 5px}
    
.gnb_qmn01:hover a {border-color:#acd879; background-color:#edf8de}
.gnb_qmn02:hover a {border-color:#ff7965; background-color:#ffebe8}
.gnb_qmn03:hover a {border-color:#60b1ff; background-color:#e0f4ff}

    
/* 모바일 메뉴 */
.mobile_bg{z-index: 500 !important}
#gnb {display: none; position:fixed; top:0; right:0;  width:250px; height:100%; min-height:100%; background:#fff; color:#093458; z-index:1000; overflow-y:auto; box-sizing:border-box; border-top:4px solid #56d6ef}
#gnb .gnb_tit{display: block; height:42px; line-height:42px; font-size:16px; font-weight:500; color:#929292}
#gnb .gnb_tit span{display: block;  padding-left:15px}
#gnb .gnb_list {border-top:1px solid #cfcfcf}
#gnb .gnb_list h2 a {display:block; line-height:56px; padding-left:15px; border-bottom:1px solid #cfcfcf; font-size:1.231em; font-weight:500; margin:0; width:auto; background:#fff url(../images/main/blt_allmn_off.png) no-repeat right 10px top 50% ; color:#303030}
#gnb .gnb_list .depth1 h2 {border-bottom:1px solid #fff}
#gnb .gnb_list .depth1:hover h2 a, #gnb .gnb_list .depth1.act h2 a {background:#175296 url(../images/main/blt_allmn_on.png) no-repeat right 10px top 50%; transition:.3s; color:#fff}
#gnb .navi_sub {display:none}
#gnb .gnb_list .depth1 .navi_sub {position: relative; width: auto; padding:10px 15px; border-bottom:1px solid #cfcfcf}
#gnb .gnb_list .navi_sub .depth2 li a {display: block; padding:10px 20px 9px 12px; font-size: 1.077em; font-weight:300; background:url(../images/main/blt_layermn_off.gif) no-repeat 0 50%; border-top:1px solid #cfcfcf }
#gnb .gnb_list .navi_sub .depth2 li:first-child a {border:0}
#gnb .gnb_list .navi_sub .depth2 li:hover a {background:url(../images/main/blt_layermn_on.gif) no-repeat 0 50%; color:#000; font-weight: 500}

/* visual */
.slick-dots {margin:-8px 0 0 96px}
.slick-dots li button {width:12px; height:12px}
.visual_wrap .btn_visual {margin:4px 0 0 128px}
.visual_wrap .btn_visual button {width:12px; height:12px}
    
/* popup */
.popup_open {position:absolute; top:205px; left:10px}
.popup_wrap .popup_open a {display:block; width:50px; line-height:120%; padding:38px 10px 5px; border-radius:10px; background: url(../images/main/bg_pop_off.png) no-repeat left 50% top 5px rgba(0,0,0,0.5); box-sizing:border-box; font-size:13px; font-weight:500; color:#fff; text-align: center}
.popup_wrap .popup_open.openact a {background: url(../images/main/bg_pop_on.png) no-repeat left 50% top 5px rgba(0,0,0,0.5)}


/* ====  메인컨텐츠 ==== */
.content_area {position:relative; margin:-65px 0 0}
/* content01 */
.content01 {margin:0 10px}
.content02 {margin:0 20px}
.content03 {padding:35px 20px}
    
/* notice */
.notice_box .btn_more a img {width:12px; height:12px}
.noticetb ul li > div {height:60px}

/* member */
.aimem_lst {border-bottom:0}
    
    
/* aismart 조명이야기 */
.btn_aismart a, .btn_aismart a:hover {width:98px; height:28px; line-height:28px; background-size:98px auto; font-size:0.923em}
    
/* quick service */
.qserv_titarea dl dd {font-size:0.923em; font-weight:300; letter-spacing:0.4px}
    
/* banner */
.ban_item a {width:190px; height:44px}

/* 하단 */
#footwrap .count {display:none}
.sb_menu  ul {border-radius:15px; border:1px solid #5d5d5d}
.sb_menu li.f_li01, .sb_menu li.f_li02 {display:block; width:50%}
.sb_menu li.f_li01 a, .sb_menu li.f_li02 a {display: block}
.sb_menu li a {padding:15px 10px; font-weight:400}
.sb_menu li.f_li01 a {color:#9a9a9a}
.sb_menu li.f_li02 a {color:#fff; border-left:1px solid #5d5d5d}
.footer_wrap {padding:0 15px 15px}
    .address_wrap address {text-align: center}
/* 로고 */
.flogo {text-align: center}
.flogo img {width:256px; height:36px}

.qsns_lst li:nth-of-type(odd) {background:url(../images/main/bg_sns_bar.png) no-repeat 100% 50%}
    
}

/* ========================pc layout======================== */
@media only screen and (min-width: 1025px) {
/* ==== skip navi ==== */
.mb_skip{display:none}

/* ==== 상단 영역 ==== */
#wrap {min-width:1300px}
.headerwrap {width:100%}
.header_top {height:68px; min-width:1300px}
    
/* 탑메뉴 영역 */
.top_wrap {width:1200px; margin:0 auto}
.top_menu .qmn_btn {position:relative}
.top_menu .qmn_btn:after {content:""; display:block; position:absolute; top:0; left:-11px; width:2px; height:100%; background:url(../images/main/bg_log_bar.gif) no-repeat 0 50%}
.top_menu .qmn_logwrap:after {display:none}
    
/* top_menu */
.top_menu .qmn_log a {width:21px; height:20px; background:url(../images/main/ico_login.gif) no-repeat 50% 50%; font-size:0}
.top_menu .qmn_srch a {width:21px; height:20px; background:url(../images/main/ico_srch.gif) no-repeat 50% 50%; font-size:0}
.top_menu .qmn_allmn a {width:21px; height:20px; background:url(../images/main/ico_allmn.gif) no-repeat 50% 50%; font-size:0}
    
/* ==== gnb ==== */
#gnb {border-bottom:1px solid rgba(255,255,255,0.3)}
#gnb .allbtnclose,  #gnb .gnb_tit, #gnb .navi_sub, #gnb .gnb_logbox {display: none}
.gnb_list {width:1200px; margin:68px auto 0; text-align: center}
#gnb .depth1 {position: relative; display:inline-block; padding:0 50px; text-align: center; background:url(../images/main/bg_gnb_dott.png) no-repeat 0 50%}
#gnb .depth1:first-child {background:none}
#gnb .depth1 h2 a{display:block; padding:27px 0 26px; text-align: center; font-size:19px; color: #fff; font-weight: 500; transition: all .4s}
#gnb .navi_sub {position: absolute; left:50%; top:70px; width: 186px; padding:15px 12px 40px; margin-left:-105px; border-radius:15px; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.05); border-bottom:4px solid #ee9d33; background: #fff url(../images/main/bg_navisub_mark.gif) no-repeat 50% 100%}
#gnb .navi_sub:before {content: ''; display: block; width: 100%; height:8px; background: url(../images/main/bg_gnbpc_mark.png) 50% 0 no-repeat; position: absolute; left:0; top: -4px;}

#gnb .navi_sub li{border-bottom: 1px dashed #ccc}
#gnb .navi_sub li:last-child{border-bottom:none}
#gnb .navi_sub a {display: block; line-height: 140%; padding: 5px 0; margin: 5px 0; text-align: center; font-size:1.154em; font-weight:500; letter-spacing:-0.3px}
#gnb .navi_sub a:hover, #gnb .depth1.active .navi_sub .depth2 > li.active a {color:#000; font-weight:500; transition:.5s; background:#ffd96f; border-radius:5px}
#gnb .navi_sub li:first-child a {margin-top: 0}
#gnb .navi_sub li:last-child a{margin-bottom: 0; border:none}
#gnb .depth1.active .navi_sub {display: block; z-index: 30}
#gnb .depth1.active .navi_sub .depth2 > li.active a{color:#000; font-weight:500}

/* ==== 비주얼 영역 ==== */ 
/* 비주얼 이미지 */
.visual {height:760px}
.visual .visual_item {height:760px}
.visual_wrap .visual_item > a {height:759px}
.visual .visual_item .v_txt {overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999px}
.visual .item1 {background:url(../images/main/v_pc01_new.jpg) no-repeat 50% 0}
.visual .item2 {background:url(../images/main/v_pc02_new.jpg) no-repeat 50% 0}

/* 비주얼 블릿 */
.slick-dots {margin:150px 0 0 -580px}
/*재생,일시정지*/
.visual_wrap .btn_visual {margin:167px 0 0 -537px}
    
/* 팝업 */
.popup_open {position:absolute; top:245px; right:0}
.popup_open.openact {right:332px}
.popup_wrap .popup_on {top:212px; right:0; width:332px; height:356px; border-radius:30px 0 0 30px}
.popup_pc .popup_imgsize {height:283px}
.popup_pc .popup_imgsize img {width:311px; height:283px}
.popup_top {width:384px; margin:14px auto}

.poplayer_btn {display:block}
.popup_wrap .popup_open a {display:block; width:62px; height:124px; line-height:140%; padding:62px 10px 0 20px; border-radius:124px 0 0 124px; background: url(../images/main/bg_pop_off.png) no-repeat left 23px top 27px rgba(0,0,0,0.5); box-sizing:border-box; font-size:15px; font-weight:500; color:#fff; text-align: center}
.popup_wrap .popup_open.openact a {background: url(../images/main/bg_pop_on.png) no-repeat left 23px top 27px rgba(0,0,0,0.5)}
.popup_pc .popup_imgsize img {border-radius:15px 15px}
.popup_pc .popup_layer .popup_tit {padding:12px 60px; font-size:17px}
.popup_pc .slick-prev {bottom:22px; left:10px; z-index:1}
.popup_pc .slick-next {bottom:22px; right:10px; z-index:1}
    
/* ====  메인컨텐츠 ==== */
.content_area {position:relative; margin-top:-200px}
/* content01 */
.content01 {width:1200px; margin:0 auto}
.content02 {position:relative; width:1200px; margin:0 auto}

.content03 {background:#175296 url(../images/main/bg_content03_pc.gif) no-repeat 100% 0}

/* 공지사항 */
#main_notice {height:380px; padding:40px 38px; box-sizing: border-box}
.noti_titarea {float:left; width:284px}
.noti_titarea dl dt {height:46px; background:url(../images/main/img_noti_tit.gif) no-repeat 0 0}
.noti_titarea dl dd {line-height:150%; font-size:1.154em}
.noti_titarea dl dd br {display:block}
.notice_box {float:left; width:835px}
.noti_more {display:block}
.noti_more a {display:block; width:128px; height:34px; line-height:34px; padding-left:10px; border:1px solid #ddd; background:url(../images/main/btn_noti_more.gif) no-repeat right 5px top 50%; box-sizing: border-box; border-radius:50px 50px; font-size:1.231em; font-weight:500; color:#111}
.noti_more:hover a {border-color:#969696; transition:.4s}
    
.notice_box {padding-top:78px}
.notice_box .btn_more {top:5px}
.notice_box .btn_more a {width:44px; height:44px; line-height:44px}
.notice_box .btn_more img {vertical-align: middle; transition: all .3s ease-in-out}
.notice_box .btn_more:hover img {transform: rotate(180deg); transition:.3s}
.noticetb ul {height:220px; text-align: center}
.noticetb ul li {float:left; width:33.3%; text-align:left}
.noticetb ul li>div {width:270px; height:218px; padding:28px 22px 22px; margin:0 auto 20px; box-sizing: border-box}
.noticetb ul li a {height:auto; font-size:1em}
.noticetb ul li a .noti_tit {overflow:hidden; display:block; height:48px; line-height:140%; white-space: normal; font-size:1.308em}
.noticetb ul li a .noti_txt {overflow:hidden; display:block; margin:5px 0 20px; height:70px; line-height:150%; font-weight:300; white-space: normal; box-sizing: border-box; font-size:1.154em}
.notice_box .noticetab02 {left:172px}
.notice_box h3 {font-size:1.385em}
.notice_box h3 a {width:116px; height:50px; line-height: 50px; font-weight:600}
.noticetb .date {position:absolute; bottom:22px; right:20px; font-size:1.077em}
    
/* member */
.aimem_wrap {float:left; width:815px}
.aimem_titarea dl {padding-left:40px}
.aimem_titarea dl dt {height:46px; background:url(../images/main/img_mem_tit.gif) no-repeat 0 0}
.aimem_titarea dl dd {padding:5px 5px 25px; line-height:150%; font-size:1.154em}
.aimem_lst {padding:40px 34px; border-right:0; border-bottom:0; border-radius:30px 0 0 0}
.aimem_lst ul li {float:left; width:232px; margin:0 0 0 20px}
.aimem_lst ul li a {display:block; height:200px; padding:20px 0; box-sizing: border-box; text-align: center; border:3px solid #fff;}
.aimem_lst ul li:first-child{margin:0}
.aimem_lst ul li a:before {display:none}
.aimem_lst ul li:hover a {padding:0; border:3px solid #fff; transition: .3s}
.aimem_lst ul lst01 {margin:0}
.aimem_lst ul li a .aimem_tit {display:block; margin-top:20px; padding:85px 0 20px; font-size:18px; font-weight:600}

.aimem_lst ul li.aimem_lst01 a {background:#edf8de}
.aimem_lst ul li.aimem_lst01 a .aimem_tit {background:url(../images/main/ico_member01.png) no-repeat 50% 5px; border-color:#edf8dd}
.aimem_lst ul li.aimem_lst01:hover a {background-color:#fff; border-color:#acd879}
    
.aimem_lst ul li.aimem_lst02 a {background:#ffebe8}
.aimem_lst ul li.aimem_lst02 a .aimem_tit {background:url(../images/main/ico_member02.png) no-repeat 50% 5px; border-color:#ffebe7}
.aimem_lst ul li.aimem_lst02:hover a {background-color:#fff; border-color:#ff7965}    
    
.aimem_lst ul li.aimem_lst03 a {background:#e0f4ff}
.aimem_lst ul li.aimem_lst03 a .aimem_tit {background:url(../images/main/ico_member03.png) no-repeat 50% 5px; border-color:#e0f4fe}
.aimem_lst ul li.aimem_lst03:hover a {background-color:#fff; border-color:#60b1ff}
.aimem_lst ul li:hover .aimem_baro {display:block; width:112px; height:32px; line-height:32px; margin:0 auto; font-size:1em; font-weight:400; color:#fff; text-align: center; border-radius:50px 50px}
.aimem_lst ul li.aimem_lst01 .aimem_baro {background:#87c341}
.aimem_lst ul li.aimem_lst02 .aimem_baro {background:#ff7965}
.aimem_lst ul li.aimem_lst03 .aimem_baro {background:#60b1ff}
    
/* aismart */
.aismart_wrap {overflow:hidden; float:right; width:385px; margin-top:25px; background:#fff url(../images/main/bg_aismart_pc.gif) no-repeat 50% 0; border-radius:30px 30px 0 0}
.aismart_box {height:280px}
.aismart_box h3 {padding:72px 0 20px; font-size:24px}
.aismart_go {width:19px; height:19px; background:rgba(0,0,0,0.5) url(../images/main/btn_con_arr.png) no-repeat 50% 50%}
.btn_aismart a {padding:0 50px 0 15px; font-size:1.154em; font-weight:500; color:#646464}
.aismart_txt {padding:30px 50px; font-size:18px; font-weight:600; background:url(../images/main/blt_smart_tit.gif) no-repeat 15px 50%}
.aismart_go {width:25px; height:25px}
.aismart_baro a {border-bottom:0}
    
/* quick_service */
.qserv_wrap {width:1200px; height:644px; padding:56px 0; margin:0 auto}

.qserv_titarea dl dt {height:34px; background:url(../images/main/img_service_tit.png) no-repeat 50% 0}
.qserv_titarea dl dd {font-size:1.231em; font-weight:300}
.qserv_baro {margin:48px 0 50px}
.qserv_baro ul li {float:left; width:384px; margin:0 0 0 24px}
.qserv_baro ul li:first-child {margin:0}    
.qbaro_tit {font-size:22px; margin-bottom:15px; font-weight: 600}
.qbaro_txt {height:112px; margin:0; font-size:15px}
.qbaro_link {padding-right:50px; font-size:16px}
.qbaro_link:after {width:25px; height:25px; background:rgba(0,0,0,0.4) url(../images/main/btn_con_arr.png) no-repeat 50% 55%;  margin-top:-13px}
.qserv_baro ul li a {padding:48px 40px 40px}
.qbaro_lst01 a {background:#919aff url(../images/main/bg_quick_service01.png) no-repeat 100% 100%}
.qbaro_lst02 a {background:#2dbcdb url(../images/main/bg_quick_service02.png) no-repeat 100% 100%}
.qbaro_lst03 a {background:#61acf8 url(../images/main/bg_quick_service03.png) no-repeat 100% 100%}
    
/* quick info */
.qinfo_wrap {float:left; margin:0; padding:10px 0 13px 105px; background:url(../images/main/bg_aiinfo.png) no-repeat 0 0}
.qinfo_wrap h3 {font-size:17px}
.qinfo_wrap .qinfo_tel {font-size:30px}
.qinfo_wrap .qinfo {font-size:14px}
    
/* quick sns */
.qsns_wrap {position:relative; float:right; width:793px; padding:0 15px; margin-top:10px; box-sizing: border-box; text-align:left}
.qsns_wrap h3 {padding:35px 0 30px 65px; background: url(../images/main/blt_snsbaro_tit.png) no-repeat 0 0; font-size:18px}
.qsns_wrap .qsns_txt {display:none; padding:10px 0 10px 40px; background:url(../images/main/bg_sns_bar.png) no-repeat 20px 50%; font-size:14px; font-weight:400}
.qsns_lst {position:absolute; top:0; right:0; width:560px; max-width:560px; margin:18px 0}
.qsns_lst li {padding:0; width:25%}
.qsns_lst li a {padding:20px 0px 20px 60px; font-size:1.154em}
.qsns_lst li:hover a {text-decoration: underline}
.qsns_lst li:first-child {background:none}
.qsns_lst01 a {background:url(../images/main/btn_pcsns_facebook.png) no-repeat 0 50%}
.qsns_lst02 a {background:url(../images/main/btn_pcsns_blog.png) no-repeat 0 50%}
.qsns_lst03 a {background:url(../images/main/btn_pcsns_insta.png) no-repeat 0 50%}
.qsns_lst04 a {background:url(../images/main/btn_pcsns_youtube.png) no-repeat 0 50%}

    
/* 배너존 */
.banner_wrap {width:1200px; margin:0 auto}
.ban_head {padding:17px 0 12px}
.ban_head .btn_more {top:20px; right:0}
.ban_head .btn_slide li {margin-right:2px}
    
/* 하단 */
.foot_area {width:100%; background:url(../images/main/bg_footer.png) repeat-x 50% 0}
.foot_bg {position: relative; width: 1200px; margin: 0 auto}
.mb_menu {display:none}
.sb_menu {width:1200px; margin:0 auto; padding:0; background:none}
.sb_box {border:none}
.sb_menu li {display:inline-block; padding:0}
.sb_menu li a {display: block; padding:27px 24px; font-size:1.154em; font-weight:400; letter-spacing:0.3px; background:url(../images/main/bg_foot_dott.gif) no-repeat 100% 50%; color:#b5b5b5}

.address_wrap {position:relative; font-size:1.154em}
.address_wrap address {padding:25px 370px 30px 0}
.sb_menu li.f_admin a {margin:18px 18px; padding:8px 15px 8px 28px; border:1px solid #868686; border-radius:50px; font-weight:400; color:#fff; font-size:1.077em; background:url(../images/main/blt_adm_ico.gif) no-repeat 7px 50%}
.sb_menu li.f_admin a span {color:#edde5b}
.sb_menu li.f_admin:hover a {border-color:#edde5b; transition:.4s}
.sb_menu li.f_li02 a {color:#fff; font-weight:500}
.sb_menu li:hover a {text-decoration:underline}
    
.footer_wrap .count {position: absolute; right:0; top:20px}
.footer_wrap .count h3 {display:none}
.footer_wrap .count li {float:left; width:180px; height:28px; line-height:28px; margin-left:5px; box-sizing:border-box; border:1px solid #727272; border-radius:50px; color:#fff}
.footer_wrap .count li span {font-weight:300; font-size:1.077em}
.footer_wrap .count .tit {float:left; width:70px; text-align: center; font-weight:200; letter-spacing:1px}
.footer_wrap .count .num {display:block; padding:0 10px; text-align:right; font-weight:400}
.footer_wrap .count .today .tit {color:#00f6ff}
.address_wrap br {display:none}
.flogo {position:absolute; top:25px; right:0}
.address_wrap address p.fadd_add {margin-bottom:10px; letter-spacing:1px}
.address_wrap address p.fadd_tel {display:inline-block; margin-right:10px}
.address_wrap address p.fadd_fax {display:inline-block}
.address_wrap address p.fcopy {padding:25px 5px 15px}
    
}

@media only screen and (min-width:1025px) and (max-width: 1299px){
.header_top {width:1300px}
}
@media only screen and (min-width:1299px) {
/* fixed */
#mainheader.fixed {position:fixed; top:0; left:0; width:100%; transition:all 0.7s}
#mainheader.fixed .header_top {margin-top:-68px; transition:.5s}
#mainheader.fixed .logo_top {display:none}
#mainheader.fixed .qmenu {display:none}
#mainheader.fixed #gnb {background:rgba(0,0,0,0.4); border:0 none}
#mainheader.fixed #gnb ul.gnb_list {width:1200px; padding:0}

}
@media only screen and (min-width:1550px) {

.content02 .aimem_wrap:after {content:""; display:block; position:absolute; bottom:0; right:-190px; width:184px; height:243px; background:url(../images/main/bg_content02_pc.gif) no-repeat 0 100%}
}

@media only screen and (min-width:600px) and (max-width:1024px){
.qsns_lst {max-width:100%}
.qsns_lst li {width:25%}
.qsns_lst li:nth-child(2) {background:url(../images/main/bg_sns_bar.png) no-repeat 100% 50%}
}