@charset "utf-8"; .main{line-height:1.47;} /* header */ /* main-absolute */ .main #header.pc_menu{position:fixed; left:0; top:0; width:100%; z-index:1;} #header #gnb .depth3{display:none;} #header .h_sub .all_menu_close{display:none;} #header .h_sub .sns_link{display:none;} /* pc_menu *******************************************************************************************************************************/ body:not(.fp-viewing-m_home) .main.header2_sub #header.pc_menu .h_top{display:none;} .main.header2_sub #header.pc_menu #gnb > ul > li > div{top:55px;} #header.pc_menu{position:relative; display:block; background-color:#fff; z-index:10;} #header.pc_menu .h_top{height:104px; padding:20px 0; border-bottom:1px solid #e8e8e8; box-sizing:border-box; text-align:center;} #header.pc_menu .h_top .w_inner{position:relative;} #header.pc_menu .h_top .h_btn_group{position:absolute; left:0; top:10px;} #header.pc_menu .h_top .h_btn_group a{display:inline-block; height:43px; padding:0 17px; border:1px solid #ccc; border-radius:500px; vertical-align:middle; line-height:40px; font-size:14px; color:#696f7b; box-sizing:border-box;} #header.pc_menu .h_top .h_logo_group h1{display:inline-block; vertical-align:middle;} #header.pc_menu .h_top .h_logo_group a{display:inline-block; text-indent:-9999px; vertical-align:middle;} #header.pc_menu .h_top .h_logo_group a:first-child{width:227px; height:55px; background:url(../images/logo.png) left top no-repeat;} #header.pc_menu .h_top .h_logo_group a:nth-child(2){width:113px; height:63px; background:url(../images/logo_g.png) center no-repeat;} #header.pc_menu .h_top .m_search_area{position:absolute; right:0; top:10px;} #header.pc_menu .h_top .m_search_area .btn_search_open{display:none;} #header.pc_menu .h_top .m_search_area .search_group {display:block !important;} #header.pc_menu .h_top .m_search_area .search_group div{position:relative; min-width:285px; height:43px; padding:0 20px; border:2px solid #ccc; border-radius:500px; box-sizing:border-box;} #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]{min-width:auto; width:100%; height:35px; padding:0; border:0;} #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]::placeholder{background-color:#fff; font-size:14px; color:#cacaca;} #header.pc_menu .h_top .m_search_area .search_group div .btn_search{position:absolute; right:20px; top:10px; width:30px; height:30px; background:url(../images/icon_all.png) right top -28px no-repeat; text-indent:-9999px;} #header.pc_menu .h_top .m_search_area .search_group .btn_search_close{display:none;} #header.pc_menu .h_top .h_btn_group a:hover, #header.pc_menu .h_top .h_btn_group a:focus, #header.pc_menu .h_top .h_btn_group a:active{background-color:#e9f5fe; border-color:#35a3ef; color:#1584d0; /* text-decoration:none;*/} #header.pc_menu .h_top .h_btn_group a:hover .icon_l_letter, #header.pc_menu .h_top .h_btn_group a:focus .icon_l_letter, #header.pc_menu .h_top .h_btn_group a:active .icon_l_letter{background-position:left top -26px;} #header.pc_menu .h_top .m_search_area .search_group div:hover, #header.pc_menu .h_top .m_search_area .search_group div:focus, #header.pc_menu .h_top .m_search_area .search_group div:active{border-color:#35a3ef;} #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]:hover, #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]:focus, #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]:active{background-color:#fff; color:#1584d0;} #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]:hover::placeholder, #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]:focus::placeholder, #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]:active::placeholder{color:#1584d0;} #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]:hover + .btn_search, #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]:focus + .btn_search, #header.pc_menu .h_top .m_search_area .search_group div input[type="text"]:active + .btn_search{background-position:right -30px top -28px;} #header.pc_menu .h_top .m_search_area .search_group div input[type="text"] + .btn_search:hover, #header.pc_menu .h_top .m_search_area .search_group div input[type="text"] + .btn_search:focus, #header.pc_menu .h_top .m_search_area .search_group div input[type="text"] + .btn_search:active{background-position:right -30px top -28px;} #header.pc_menu .h_sub{overflow:hidden; border-bottom:1px solid #e8e8e8; box-sizing:border-box;} #header.pc_menu #gnb{float:left; width:calc(100% - 56px);} #header.pc_menu #gnb > ul > li{float:left; width:calc((100% - 1px)/7); text-align:center;} #header.pc_menu #gnb > ul > li > a{display:block; height:55px; font-size:18px; color:#333; line-height:55px; font-weight:600;} #header.pc_menu #gnb > ul > li > div{display:none; position:absolute; left:0; top:159px; width:100%; background-color:#fff; border-top:1px solid #e8e8e8; border-bottom:2px solid #cfcfcf; } #header.pc_menu #gnb .depth1{display:flex; flex-wrap:wrap; max-width:1400px; margin:0 auto; border-left:1px solid #e8e8e8; border-right:1px solid #e8e8e8;} #header.pc_menu #gnb .depth1 > li{float:left; width:calc((100% - 1px)/4); padding:0 25px; border-bottom:1px solid #e8e8e8; box-sizing:border-box;} #header.pc_menu #gnb .depth1 > li > a{display:block; padding:22px 0; text-align:left; font-size:16px; color:#333; font-weight:600;} #header.pc_menu #gnb .depth2{padding:15px 0; border-top:1px solid #e8e8e8; } #header.pc_menu #gnb .depth2 > li > div > a{display:block; padding:5px 0; text-align:left;} #header.pc_menu .h_sub .all_menu{float:left; width:55px; height:55px; background:url(../images/btn_all_menu.png) center no-repeat; text-indent:-9999px;} #header.pc_menu .h_sub .all_menu:hover, #header.pc_menu .h_sub .all_menu:focus, #header.pc_menu .h_sub .all_menu:active{background-image:url(../images/btn_all_menu_on.png);} #header.pc_menu #gnb > ul > li.on > a span{display:inline-block; position:relative; height:100%; } #header.pc_menu #gnb > ul > li.on > a span:before{display:block; content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background-color:#1e77d3;} #header.pc_menu #gnb > ul > li.on > div{display:block;} #header.pc_menu #gnb .depth2 > li > div > a:hover, #header.pc_menu #gnb .depth2 > li > div > a:focus, #header.pc_menu #gnb .depth2 > li > div > a:active{font-weight:600; color:#267ed7; /* text-decoration:none;*/} #header.pc_menu #gnb > ul > li > div:before{display:block; content:""; position:absolute; left:50%; bottom:0; margin-left:-350px; width:1px; height:100%; background-color:#e8e8e8; box-sizing:border-box;} #header.pc_menu #gnb > ul > li > div:after{display:block; content:""; position:absolute; left:50%; bottom:0; width:1px; height:100%; background-color:#e8e8e8;} #header.pc_menu #gnb > ul > li > div .depth1:before{display:block; content:""; position:absolute; left:50%; bottom:0; margin-left:350px; width:1px; height:100%; background-color:#e8e8e8; box-sizing:border-box;} /* PC_전체메뉴 *****************************************************************************************************************************/ #header.all_menu_open .h_top, #header.all_menu_open .all_menu{display:none;} #header.all_menu_open .all_menu_close{display:block;} .all_menu_close{position:absolute; right:0; top:0; width:70px; height:70px; background:url(../images/btn_all_menu_close.png) center no-repeat; text-indent:-9999px; z-index:1;} .all_menu_close:hover, .all_menu_close:focus, .all_menu_close:active{background-color:rgba(0,0,0,0.3);} #header.all_menu_open .h_sub{overflow:auto; position:fixed; left:0; top:0; right:0; bottom:0; padding:55px 40px; background-color:#636a7f; box-sizing:border-box; z-index:10;} #header.all_menu_open .h_sub .w_inner{max-width:none;} #header.all_menu_open #gnb{display:flex; flex-wrap:wrap;} #header.all_menu_open #gnb:after{display:block; content:""; clear:both;} #header.all_menu_open #gnb > ul{width:100%;} #header.all_menu_open #gnb > ul > li{float:left; width:calc((100% - 1px)/7); height:100%; padding:0 30px; border-right:1px solid #848da9; box-sizing:border-box;} #header.all_menu_open #gnb > ul > li:last-child{border-right:none;} #header.all_menu_open #gnb > ul > li > a{display:block; padding-bottom:18px; border-bottom:1px solid #fff; font-size:23px; font-weight:600; color:#fff;} #header.all_menu_open #gnb .depth1{padding:15px 0;} #header.all_menu_open #gnb .depth1 > li{padding:10px 0;} #header.all_menu_open #gnb .depth1 > li > a{display:inline-block; font-size:20px; color:#fff; font-weight:600;} #header.all_menu_open #gnb .depth2{margin-top:8px;} #header.all_menu_open #gnb .depth2 > li{position:relative;} #header.all_menu_open #gnb .depth2 > li > div > a{position:relative; display:inline-block; padding:5px 0; padding-left:17px; padding-right:5px; background:url(../images/bul_h_all_menu.png) left 4px top 13px no-repeat; font-size:15px; color:#fff;} #header.all_menu_open #gnb .depth2 > li.m_icon_plus > div > a > span{display:inline-block; padding-right:22px; background:url(../images/icon_all_menu_plus.png) right 1px top 4px no-repeat;} #header.all_menu_open #gnb .depth2 > li > div{position:relative; display:inline-block;} #header.all_menu_open #gnb .depth3{position:absolute; right:-160px; top:10px; width:150px; padding:10px 15px; background-color:#fff; box-shadow:7px 7px 16px rgba(0,0,0,0.27); z-index:10; box-sizing:border-box;} #header.all_menu_open #gnb .depth3:before{display:block; content:""; position:absolute; left:-9px; top:0; width:0; height:0; border-top:9px solid #fff; border-left:9px solid transparent;} #header.all_menu_open #gnb .depth3 > li > a{display:block; padding:4px 0; font-size:14px;} #header.all_menu_open #gnb > ul > li:last-child .depth3{right:30px;} #header.all_menu_open #gnb > ul > li:last-child .depth3:before{left:auto; right:-9px; border-right:9px solid transparent;} #header.all_menu_open #gnb .depth2 > li.show .depth3{display:block;} #header.all_menu_open #gnb .depth1 > li > a:hover, #header.all_menu_open #gnb .depth1 > li > a:focus, #header.all_menu_open #gnb .depth1 > li > a:active{position:relative; background-color:#5b8eee;} #header.all_menu_open #gnb .depth1 > li > a:hover:before, #header.all_menu_open #gnb .depth1 > li > a:focus:before, /*#header.all_menu_open #gnb .depth1 > li > a:active:before{display:block; content:""; position:absolute; left:0; bottom:0; width:100%; height:11px; background-color:#5b8eee; z-index:-1;}*/ #header.all_menu_open #gnb .depth2 > li > div > a:hover, #header.all_menu_open #gnb .depth2 > li > div > a:focus, #header.all_menu_open #gnb .depth2 > li > div > a:active{color:#cad2e9; font-weight:600;} #header.all_menu_open #gnb .depth3 > li > a:hover, #header.all_menu_open #gnb .depth3 > li > a:focus, #header.all_menu_open #gnb .depth3 > li > a:active{color:#333;} #header.all_menu_open #gnb .icon_new_window, #header.m_menu_on #gnb .icon_new_window{background-position:right 1px top -654px;} /* m_menu *****************************************************************************************************************************/https://socialenterprise.or.kr/dext5editordata/2021/09/20210910_111315800_99997.jpg #header.m_menu{display:block; position:relative; background-color:#fff;} #header.m_menu .h_top{border-bottom:1px solid #e8e8e8;} #header.m_menu .h_top:before{display:block; content:""; position:absolute; left:0; top:38px; width:100%; height:1px; background-color:#e8e8e8;} #header.m_menu .h_top .w_inner{padding:0;} #header.m_menu .h_top .h_btn_group{overflow:hidden; border-bottom:1px solid #e8e8e8;} #header.m_menu .h_top .h_btn_group a{display:block; float:left; width:calc((100% - 1px)/2); height:38px; border-right:1px solid #e8e8e8; line-height:38px; text-align:center; font-size:14px; box-sizing:border-box;} #header.m_menu .h_top .h_btn_group a:last-child{border-right:none;} #header.m_menu .h_top .h_logo_group{padding:3px 20px; text-align:left;} #header.m_menu .h_top .h_logo_group a{display:inline-block; text-indent:-9999px;} #header.m_menu .h_top .h_logo_group a:nth-child(1){width:227px; height:55px; background:url(../images/logo.png) left bottom 8px no-repeat;} #header.m_menu .h_top .h_logo_group a:nth-child(2){display:none;} #header.m_menu .h_top .m_search_area{position:absolute; right:5px; top:49px; width:100%;} #header.m_menu .h_top .m_search_area .btn_search_open{position:absolute; right:50px; width:40px; height:40px; background:url(../images/btn_search_open.png) center no-repeat; text-indent:-9999px;} #header.m_menu .h_top .m_search_area > div{position:relative;} #header.m_menu .h_top .m_search_area .search_group{display:none; position:absolute; right:0; top:0; width:100%; z-index:10;} #header.m_menu .h_top .m_search_area .search_group div{display:block; position:relative; right:0; padding-right:50px; padding-left:20px;} #header.m_menu .h_top .m_search_area .search_group div input[type="text"]{position:relative; min-width:245px; width:100%; height:43px; padding:0 20px; border:2px solid #ccc; border-radius:500px;} #header.m_menu .h_top .m_search_area .search_group div input[type="text"]::placeholder{background-color:#fff; font-size:14px; color:#cacaca;} #header.m_menu .h_top .m_search_area .search_group div .btn_search{position:absolute; right:70px; top:10px; width:30px; height:30px; background:url(../images/icon_all.png) right top -28px no-repeat; text-indent:-9999px;} #header.m_menu .h_top .m_search_area .search_group .btn_search_close{position:absolute; right:0px; top:0; width:50px; height:50px; background:url(../images/btn_search_close.png) center no-repeat #fff; text-indent:-9999px;} #header.m_menu .h_top .m_search_area .search_group div input[type="text"]:hover, #header.m_menu .h_top .m_search_area .search_group div input[type="text"]:focus, #header.m_menu .h_top .m_search_area .search_group div input[type="text"]:active{border-color:#35a3ef; background-color:#fff; color:#1584d0;} #header.m_menu .h_top .m_search_area .search_group div input[type="text"]:hover::placeholder, #header.m_menu .h_top .m_search_area .search_group div input[type="text"]:focus::placeholder, #header.m_menu .h_top .m_search_area .search_group div input[type="text"]:active::placeholder{color:#1584d0;} #header.m_menu .h_top .m_search_area .search_group div input[type="text"]:hover + .btn_search, #header.m_menu .h_top .m_search_area .search_group div input[type="text"]:focus + .btn_search, #header.m_menu .h_top .m_search_area .search_group div input[type="text"]:active + .btn_search{background-position:right -30px top -28px;} #header.m_menu .h_top .m_search_area .btn_search_open:hover, #header.m_menu .h_top .m_search_area .btn_search_open:focus, #header.m_menu .h_top .m_search_area .btn_search_open:active{background-image:url(../images/btn_search_open_on.png);} #header.m_menu .h_top .m_search_area .search_group .btn_search_close:hover, #header.m_menu .h_top .m_search_area .search_group .btn_search_close:focus, #header.m_menu .h_top .m_search_area .search_group .btn_search_close:active{background-image:url(../images/btn_search_close_on.png);} #header.m_menu .h_sub .all_menu{position:absolute; right:10px; top:50px; width:40px; height:40px; background:url(../images/btn_all_menu.png) center no-repeat; text-indent:-9999px;} #header.m_menu_on .h_sub .all_menu{z-index:-1;} #header.m_menu .h_sub .all_menu:hover, #header.m_menu .h_sub .all_menu:focus, #header.m_menu .h_sub .all_menu:active{background-image:url(../images/btn_all_menu_on.png);} #header.m_menu #gnb{display:none;} /* m_menu_on **************************************************************************************************************************/ #header.m_menu.m_menu_on{position:static;} #header.m_menu_on .h_sub{overflow:auto; position:absolute; left:0; top:0; right:0; bottom:0; z-index:10; background-color:#71788f; } #header.m_menu_on .h_sub .w_inner{position:relative; padding:0;} #header.m_menu_on .all_menu{display:none;} #header.m_menu_on .all_menu_close{display:block;} #header.m_menu_on .h_sub .sns_link{display:block;} #header.m_menu_on #gnb{overflow-y:auto; display:block; padding:60px 0; box-sizing:Border-box;} #header.m_menu_on #gnb > ul > li{overflow:hidden; width:200px; padding:0 30px; box-sizing:border-box;} #header.m_menu_on #gnb > ul > li > a{display:block; padding:15px 0; color:#fff; font-size:16px;} #header.m_menu_on #gnb > ul > li > div{display:none; position:absolute; left:200px; top:0; width:calc(100% - 201px); height:100vh; background-color:#636a7f;} #header.m_menu_on #gnb .depth1{min-height:700px; padding:60px 40px; background-color:#636a7f; box-sizing:border-box;} #header.m_menu_on #gnb .depth1 > li{padding:10px 0;} #header.m_menu_on #gnb .depth1 > li > a{display:inline-block; font-size:16px; color:#fff; font-weight:600; z-index:1;} #header.m_menu_on #gnb .depth2{margin-top:8px;} #header.m_menu_on #gnb .depth2 > li{position:relative;} #header.m_menu_on #gnb .depth2 > li > div > a{position:relative; display:inline-block; padding:5px 0; padding-left:17px; background:url(../images/bul_h_all_menu.png) left 4px top 13px no-repeat; font-size:14px; color:#fff;} #header.m_menu_on #gnb .depth2 > li.m_icon_plus > div > a > span{display:inline-block; padding-right:20px; background:url(../images/icon_all.png) right -296px no-repeat;} #header.m_menu_on #gnb .depth2 > li > div{position:relative; display:inline-block;} #header.m_menu_on #gnb > ul > li.m_on > a{border-bottom:1px solid #fff;} #header.m_menu_on #gnb > ul > li.m_on > div{display:block;} #header.m_menu_on #gnb > ul > li > a:hover, #header.m_menu_on #gnb > ul > li > a:focus, #header.m_menu_on #gnb > ul > li > a:active{color:#cad2e9; text-decoration:none;} #header.m_menu_on #gnb .depth1 > li > a:hover, #header.m_menu_on #gnb .depth1 > li > a:focus, #header.m_menu_on #gnb .depth1 > li > a:active{position:relative; background-color:#5b8eee; text-decoration:none; } #header.m_menu_on #gnb .depth2 > li > div > a:hover, #header.m_menu_on #gnb .depth2 > li > div > a:focus, #header.m_menu_on #gnb .depth2 > li > div > a:active{color:#cad2e9; font-weight:600;} #header.m_menu_on .h_sub .sns_link{overflow:hidden; position:absolute; left:15px; top:480px; width:100px; z-index:1;} #header.m_menu_on .h_sub .sns_link li{float:left; width:50%;} #header.m_menu_on .h_sub .sns_link li a{display:block; width:50px; height:50px; background-image:url(../images/icon_sns_all.png); background-repeat:no-repeat; text-indent:-9999px;} #header.m_menu_on .h_sub .sns_link li .m_menu_f{background-position:left top;} #header.m_menu_on .h_sub .sns_link li .m_menu_t{background-position:left -50px top;} #header.m_menu_on .h_sub .sns_link li .m_menu_b{background-position:left -100px top;} #header.m_menu_on .h_sub .sns_link li .m_menu_y{background-position:left -150px top;} #header.m_menu_on .h_sub .sns_link li .m_menu_i{background-position:left -200px top;} #header.m_menu_on .h_sub .sns_link li .m_menu_k{background-position:left -250px top;} #header.m_menu_on #gnb .icon_all_btn_r_s_window3{padding-right:20px; background-position:right 1px top -543px;} /* footer */ #footer{background-color:#404349; line-height:1.47;} #footer a:focus, #footer button:focus {outline:2px solid #fff;} #footer .f_top{position:relative; border-bottom:1px solid rgba(255,255,255,0.2);} #footer .f_top:after{display:block; content:""; clear:both;} #footer .f_top .w_inner{position:relative;} #footer .f_top .f_list{padding:11px 0; } #footer .f_top .f_list li{display:inline-block; vertical-align:middle;} #footer .f_top .f_list li a{display:inline-block; padding:5px 13px; font-size:15px; color:#AFAFAF;} #footer .f_top .f_list li a:hover, #footer .f_top .f_list li a:active {outline:1px dotted #fff;} #footer .f_top .f_list li:nth-child(1) a{background-color:#24262b; color:#fff;} #footer .f_top .f_list li:nth-child(2) a{background-color:#3c60bb; color:#fff;} #footer .f_top .f_list li:nth-child(1) a:hover, #footer .f_top .f_list li:nth-child(1) a:focus{background-color:#727782;} #footer .f_top .f_list li:nth-child(2) a:hover, #footer .f_top .f_list li:nth-child(2) a:focus{background-color:#6788da;} #footer .f_top .site_group{position:absolute; right:0; top:0;} #footer .f_top .site_group:after{display:block; content:""; clear:both;} #footer .f_top .site_group > a, #footer .f_top .site_group > div{float:left;} #footer .f_top .site_group > a, #footer .f_top .site_group div button{height:55px; border-right:1px solid rgba(255,255,255,0.2); box-sizing:border-box; color:#fff; line-height:55px;} #footer .f_top .site_group > a{padding:0 25px; border-left:1px solid rgba(255,255,255,0.2); border-right:0; font-size:13px; font-weight:700; } #footer .f_top .site_group div{position:relative;} #footer .f_top .site_group div button{display:block; width:195px; padding:0 20px; font-size:15px;} #footer .f_top .site_group div:nth-of-type(1) button{border-left:1px solid rgba(255,255,255,0.2); } #footer .f_top .site_group div button span{padding-right:48px; background-image:url(../images/icon_all.png); background-position:right -476px;} #footer .f_top .site_group div > ul{overflow:auto; position:absolute; left:0; top:-350px; width:260px; height:350px; background-color:#24262b; color:#fff; text-align:left; z-index:10;} #footer .f_top .site_group div:nth-of-type(2) > ul{left:-65px;} #footer .f_top .site_group div > ul > li p{padding:8px 20px; border-bottom:1px solid #4f5256; font-size:14px;} #footer .f_top .site_group div ul ul li a{position:relative; display:block; padding:8px 20px 8px 40px; border-bottom:1px solid #4f5256; font-size:14px;} #footer .f_top .site_group div ul ul li a:before{display:block; content:""; position:absolute; left:20px; top:17px; width:9px; height:1px; background-color:#9ea1a9;} #footer .f_sub{padding:30px 0 80px 0;} #footer .f_sub .w_inner{position:relative;} #footer .f_sub img{position:absolute; left:0; top:0;} #footer .f_sub p{padding-left:230px; font-size:15px; color:#AFAFAF;} #footer .f_sub a{display:block; position:absolute; top:0; right:0; width:96px; height:63px;} #footer .f_top .f_list li a:hover, #footer .f_top .f_list li a:focus, #footer .f_top .f_list li a:active{text-decoration:none; color:#fff;} #footer .f_top .site_group > a:hover, #footer .f_top .site_group div button:hover, #footer .f_top .site_group > a:focus, #footer .f_top .site_group div button:focus, #footer .f_top .site_group > a:active, #footer .f_top .site_group div button:active{background-color:#24262b; text-decoration:none;} #footer .f_top .site_group div ul ul li a:hover, #footer .f_top .site_group div ul ul li a:focus, #footer .f_top .site_group div ul ul li a:active{background-color:#404349; text-underline-position:under;} #footer .f_sub a:focus, #footer .f_sub a:active{border:1px dotted gray;} /* main contents*/ /* navi */ .menu{position:fixed; right:0; z-index:1; top:50%; margin-top:-70px; padding:35px 50px 35px 20px; text-align:right; box-sizing:border-box;} .menu li{position:relative; padding:15px 0; } .menu li:before{display:block; content:""; position:absolute; right:3px; top:0; width:1px; height:100%; background-color:#bdc4ca;} .menu li:first-child:before{top:50%; height:50%;} .menu li:last-child:before{height:50%;} .menu li a{position:relative; display:block; padding-right:20px; font-size:20px; font-weight:700; color:#737A89;} .menu li a:after{display:block; content:""; position:absolute; right:0; top:50%; width:8px; height:8px; margin-top:-4px; background-color:#6d777f; border-radius:50%;} .menu li.active a{color:#333;} .menu li.active a:after{right:-4px; width:15px; height:15px; margin-top:-5px; background-color:#283f88;} .menu li a:hover, .menu li a:focus, .menu li a:active{color:#333; text-underline-position:under;} .menu li a:focus{text-decoration:underline;} /* sec */ .section .m_tit{margin-bottom:35px; font-size:35px; letter-spacing:-1px; color:#333;} .section .m_tit span{display:inline-block; margin-left:17px; vertical-align:baseline; font-size:15px; color:#696f7b; font-weight:400;} .section .m_tab{position:relative; min-height:416px;} .section .m_tab > li > button{display:inline-block; position:absolute; right:0; top:-85px; width:110px; padding:10px 0; border-radius:500px; text-align:center; font-size:18px; color:#696f7b;} .section .m_tab > li:nth-child(1) > button{right:400px;} .section .m_tab > li:nth-child(2) > button{right:280px;} .section .m_tab > li:nth-child(3) > button{right:160px;} .section .m_tab > li:nth-child(4) > button{right:40px;} .section .m_tab > li > .m_tab_cont{display:none;} .section .m_tab > li > .m_tab_cont:after{display:block; content:""; clear:both;} .section .m_tab > li > .more{display:none; position:absolute; right:0; top:-75px;} .section .more{display:block; width:30px; height:30px; background:url(../images/icon_all_contents.png) right -9px top -160px no-repeat; border:1px dotted transparent; text-indent:-9999px; box-sizing:border-box;} .section .icon_l_date{padding-left:23px; background:url(../images/icon_all.png) left -146px no-repeat;} .slid_btn button{top:40%; width:45px; height:45px; background-color:#747474 !important; background-image:url(../images/icon_all.png) !important; background-repeat:no-repeat; box-shadow:5px 5px 6px rgba(0,0,0,0.17); z-index:1;} .slid_btn button:before{display:none;} .slid_btn .slick-prev{background-position:right -8px top -585px !important; left:0;} .slid_btn .slick-next{background-position:-150px -585px !important; right:0;} .section .m_box{overflow:hidden;} .section .m_box > div{position:relative; float:left; width:calc((100% - 27px)/2); margin-right:26px; box-sizing:border-box;} .section .m_box > div:last-child{margin-right:0;} .section .more:hover, .section .more:focus, .section .more:active{border-color:gray;} .section .m_tab > li.on > button, .section .m_tab > li > button:hover, .section .m_tab > li > button:hover, .section .m_tab > li > button:hover{background-color:#283f88; box-shadow:0 4px 0 rgba(0,0,0,0.15); font-weight:600; color:#fff;} .section .m_tab > li.on > .m_tab_cont{display:block;} .section .m_tab > li.on > .more{display:block;} /* sec1 */ .sec1{background:url(../images/bg_visual.jpg) center no-repeat; background-size:cover;} .sec1 .m_slogan{position:relative; padding-top:130px; text-align:center;} .sec1 .m_slogan .sns_group{position:absolute; right:0; bottom:0; } .sec1 .m_slogan .sns_group li{float:left;} .sec1 .m_slogan .sns_group li a{display:block; width:46px; height:46px; margin-left:10px; background-image:url(../images/icon_sns.png); background-repeat:no-repeat; border-radius:50%; text-indent:-9999px;} .sec1 .m_slogan .sns_group li .btn_m_sns_face{background-position:left center;} .sec1 .m_slogan .sns_group li .btn_m_sns_twit{background-position:left -60px center;} .sec1 .m_slogan .sns_group li .btn_m_sns_blog{background-position:left -120px center;} .sec1 .m_slogan .sns_group li .btn_m_sns_you{background-position:left -180px center;} .sec1 .m_slogan .sns_group li .btn_m_sns_insta{background-position:left -240px center;} .sec1 .m_slogan .sns_group li .btn_m_sns_kakao{background-position:left -300px center;} .sec1 .m_slogan .sns_group li .btn_m_sns_newsletter{background-position:left -360px center;} .sec1 .m_slogan .sns_group li a:hover, .sec1 .m_slogan .sns_group li a:focus, .sec1 .m_slogan .sns_group li a:active{box-shadow:0 4px 0 rgba(0,0,0,0.18);} .sec1 .m_card{overflow:hidden; margin-top:45px; margin-left:-30px;} /*.sec1 .m_card .slick-track{display:flex; flex-wrap:wrap; }*/ .sec1 .m_card [class^="card"]{float:left; width:calc(100%/4);} .sec1 .m_card [class^="card"] div{position:relative; height:400px; margin-left:30px; padding:33px 37px; background-position:right 25px bottom 15px; background-repeat:no-repeat; color:#fff; box-sizing:border-box;} .sec1 .m_card .card1 div{background-color:#f47a6e; background-image:url(../images/bg_card1.png);} .sec1 .m_card .card2 div{background-color:#5f93f3; background-image:url(../images/bg_card2.png); background-position:right -15px bottom 20px;} .sec1 .m_card .card3 div{background-color:#00c2c4; background-image:url(../images/bg_card3.png);} .sec1 .m_card .card4 div{background-color:#1ba8e9; background-image:url(../images/bg_card4.png);} .sec1 .m_card div b{font-size:28px; letter-spacing:-1px; font-weight:700; color:#fff;} .sec1 .m_card div:nth-child(1) b{font-size:30px; text-shadow: 1px 1px 0 #637698;} .sec1 .m_card div p{margin-top:25px; padding-right:30px; font-size:15px; word-break:keep-all; text-shadow: 1px 1px 0 #637698;} .sec1 .m_card div a{display:block; padding:8px 17px; text-shadow:1px 1px 0 #637698; border:1px solid rgba(255,255,255,0.7); font-size:15px;} .sec1 .m_card [class^="card"] > div > a{position:absolute; left:37px; bottom:33px;} .sec1 .m_card div dl{margin-top:28px;} .sec1 .m_card div dl dt{font-size:15px; font-weight:600;text-shadow: 1px 1px 0 #637698;} .sec1 .m_card div dl dd{font-size:16px; font-weight:600;text-shadow: 1px 1px 0 #637698;} .sec1 .m_card div dl dd + dt{margin-top:7px} /* .sec1 .m_card div ul{margin-top:55px;} 22.04.13 */ .sec1 .m_card div ul{margin-top:15px;} .sec1 .m_card div ul li{} .sec1 .m_card div ul li a{margin-bottom:5px; } .sec1 .m_card div ul li a span{display:block; width:100%;text-shadow: 1px 1px 0 #637698;} .sec1 .card_btn{display:none;} .sec1 .m_card div a:hover, .sec1 .m_card div a:focus, .sec1 .m_card div a:active{text-underline-position:under; border-color:#fff; background-color:rgba(0,0,0,0.1);} .sec1 .m_card .slick-track > div:focus, .sec1 .m_card .slick-track > div:active{outline:none;} .sec1 .m_icon{margin-top:30px; box-shadow:2px 2px 0 rgba(0,0,0,0.07);} .sec1 .m_icon:after{display:block; content:""; clear:both;} .sec1 .m_icon li{float:left; width:calc((100% - 1px)/8); border-right:1px solid #e5ebef;box-sizing:border-box;} .sec1 .m_icon li:last-child{border-right:none;} .sec1 .m_icon li a{display:block; height:87px; border:3px solid #fff; background-color:#fff; font-size:16px; color:#333; text-align:center; line-height:80px; box-sizing:border-box;} .sec1 .m_icon li:nth-child(6) a{padding-top:15px;} .sec1 .m_icon li:nth-child(6) a span{text-align:left; line-height:1.47;} .sec1 .m_icon li a span{display:inline-block; padding-left:70px; background-position:left center;} .sec1 .m_icon li a .icon_m_sec1_all{background-image:url(../images/icon_m_sec1_1.png);} .sec1 .m_icon li a .icon_m_sec1_merge{background-image:url(../images/icon_m_sec1_2.png); font-size: 14px;} .sec1 .m_icon li a .icon_m_sec1_found{background-image:url(../images/icon_m_sec1_3.png);} .sec1 .m_icon li a .icon_m_sec1_grow{background-image:url(../images/icon_m_sec1_4.png);} .sec1 .m_icon li a .icon_m_sec1_bank{background-image:url(../images/icon_m_sec1_5.png); font-size: 13px;} .sec1 .m_icon li a .icon_m_sec1_buy{padding-left:100px; background-image:url(../images/icon_m_sec1_6.png);} .sec1 .m_icon li a .icon_m_sec1_clean{margin-top: 15px; background-image:url(../images/icon_m_sec1_7.png); line-height: 1.47;} .sec1 .m_icon li a .icon_m_sec1_open{padding-left:70%; background-image:url(../images/icon_m_sec1_open.png); background-size:100%; text-indent:-9999px;} .sec1 .m_icon li a:hover, .sec1 .m_icon li a:focus, .sec1 .m_icon li a:active{border-color:#35a3ef; color:#1775d6; font-weight:600;} /* sec2 */ .sec2 .m_notice{padding-top:30px; } .sec2 .m_notice > ul > li > ul:after{display:block; content:""; clear:both;} .sec2 .m_notice > ul > li > ul > li{position:relative; float:left; width:calc((100% - 81px)/4); margin-right:26px; box-sizing:border-box;} .sec2 .m_notice > ul > li > ul > li:nth-child(4n){margin-right:0;} .sec2 .m_notice > ul > li > ul > li:nth-child(-n+4){margin-bottom:27px;} .sec2 .m_notice > ul > li > ul > li > a{display:block; position:relative; padding:54px 30px 20px 30px; border:1px solid #d7dee2; box-sizing:border-box;} .sec2 .m_notice > ul > li > ul > li > a [class^="m_state_"]{position:absolute; left:-1px; top:-1px; padding:7px 35px 7px 15px; color:#fff; font-size:15px; z-index:5; font-weight:600;text-shadow: 1px 1px 0 #637698;} .sec2 .m_notice > ul > li > ul > li > a [class^="m_state_"]:after{display:block; content:""; position:absolute; right:-20px; top:0; width:0; height:0; border-top:35px solid #2fb5f4; border-right:20px solid transparent;} .sec2 .m_notice > ul > li > ul > li > a .m_state_notice{background-color:#2fb5f4;} .sec2 .m_notice > ul > li > ul > li > a .m_state_bidding{background-color:#f4bd29; } .sec2 .m_notice > ul > li > ul > li > a .m_state_bidding:after{border-top-color:#f4bd29;} .sec2 .m_notice > ul > li > ul > li > a .m_state_press{background-color:#f16d5f; } .sec2 .m_notice > ul > li > ul > li > a .m_state_press:after{border-top-color:#f16d5f;} .sec2 .m_notice > ul > li > ul > li > a p{overflow:hidden; height:57px; margin-bottom:30px; font-size:18px; color:#333; font-weight:600;} .sec2 .m_notice > ul > li > ul > li > a .icon_l_date{font-size:15px; color:#666;} .sec2 .m_notice > ul > li > ul > li > a:hover, .sec2 .m_notice > ul > li > ul > li > a:focus, .sec2 .m_notice > ul > li > ul > li > a:active{text-decoration:none; box-shadow:8px 8px 8px rgba(0,0,0,0.10);} .sec2 .m_notice > ul > li > ul > li.oon:before{display:block; content:""; position:absolute; left:0; top:0; width:100%; height:2px; background-color:#556c79; z-index:1;} .sec2 .m_notice > ul > li > ul > li.oon:after{display:block; content:""; position:absolute; right:-0; top:0; width:2px; height:100%; background-color:#556c79;} .sec2 .m_notice > ul > li > ul > li.oon > a:before{display:block; content:""; position:absolute; right:-1px; bottom:-1px; width:100%; height:2px; background-color:#556c79;} .sec2 .m_notice > ul > li > ul > li.oon > a:after{display:block; content:""; position:absolute; left:-1px; bottom:-1px; width:2px; height:calc(100% + 1px); background-color:#556c79;} .sec2 .m_box{margin-top:27px;} .sec2 .m_box > div{padding:20px 27px; border:1px solid #d7dee2;} .sec2 .m_box .m_notice_tit{font-size:22px; color:#333;} .sec2 .m_box .m_notice_tit span{display:inline-block; margin-left:8px; vertical-align:baseline; font-size:14px; color:#696f7b; font-weight:400;} .sec2 .m_box ul li{position:relative; margin-top:5px; } .sec2 .m_box ul li a{display:block; overflow:hidden; width:calc(100% - 120px); color:#696f7b; font-size:15px; white-space:nowrap; text-overflow:ellipsis; } .sec2 .m_box ul li span{position:absolute; right:0; top:3px; font-size:15px; color:#696f7b;} .sec2 .m_box .more{position:absolute; right:20px; top:17px; } .sec2 .m_box ul li a:hover, .sec2 .m_box ul li a:focus, .sec2 .m_box ul li a:active{color:#333;} /* sec3 */ .sec3{background-color:#eef3f6;} .sec3 .m_picture{padding-top:30px;} .sec3 .m_picture:after{display:block; content:""; clear:both;} .sec3 .m_picture .m_tab li div div{box-sizing:border-box;} .sec3 .m_picture .m_tab li div div a{display:block;} .sec3 .m_picture .m_tab li div div:nth-child(1) > a{margin-right:100px;} .sec3 .m_picture .m_tab li div div:nth-child(2) > a{margin-left:35px; margin-right:65px;} .sec3 .m_picture .m_tab li div div:nth-child(3) > a{margin-left:65px; margin-right:35px;} .sec3 .m_picture .m_tab li div div:nth-child(4) > a{margin-left:100px;} .sec3 .m_picture .m_tab li .sec3_list3 div:nth-child(1) > a, .sec3 .m_picture .m_tab li .sec3_list4 div:nth-child(1) > a{margin-right:30px;} .sec3 .m_picture .m_tab li .sec3_list3 div:nth-child(2) > a, .sec3 .m_picture .m_tab li .sec3_list4 div:nth-child(2) > a{margin:0 15px;} .sec3 .m_picture .m_tab li .sec3_list3 div:nth-child(3) > a, .sec3 .m_picture .m_tab li .sec3_list4 div:nth-child(3) > a{margin-left:30px; margin-right:0;} .sec3 .m_picture .m_tab li div div a > div{overflow:hidden; position:relative; width:100%; height:300px; border:1px solid #aabeca; box-sizing:border-box;} .sec3 .m_picture .m_tab li .sec3_list4 div a div:after{display:none; content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.5) url(../images/bg_play.png) center no-repeat;} .sec3 .m_picture .m_tab li div div a div img{width:100%; height:100%;} .sec3 .m_picture .m_tab li div div a p{overflow:hidden; height:57px; margin:25px 0 11px 0; font-size:18px; color:#333; font-weight:600;} .sec3 .m_picture .m_tab li div div span{font-size:15px; color:#666;} .sec3 .m_picture .slid_btn .slick-prev{left:-20px;} .sec3 .m_picture .slid_btn .slick-next{right:-20px;} .sec3 .m_box{margin-top:40px;} .sec3 .m_box > div{height:220px; } .sec3 .m_box .m_call{height:100%; padding:30px 0; background:#2fb5f4 url(../images/bg_m_sec3_call.png) center no-repeat; box-sizing:border-box;} .sec3 .m_box .m_call:after{display:block; content:""; clear:both;} .sec3 .m_box .m_call li{float:left; width:calc((100% - 1px)/3); height:100%; padding-top:80px; border-right:1px dashed rgba(255,255,255,0.3); background-position:center top; background-repeat:no-repeat; text-align:center; box-sizing:border-box;} .sec3 .m_box .m_call li.m_icon_call{background-image:url(../images/icon_m_sec3_1.png);} .sec3 .m_box .m_call li.m_icon_center{background-image:url(../images/icon_m_sec3_2.png);} .sec3 .m_box .m_call li.m_icon_merge{background-image:url(../images/icon_m_sec3_3.png);} .sec3 .m_box .m_call li:last-child{border-right:none;} .sec3 .m_box .m_call li p{margin-bottom:3px; color:#fff;} .sec3 .m_box .m_call li b{display:block; font-size:30px; color:#faf052; font-weight:700; line-height:1.3; text-shadow:1px 1px 0 #637698;} .sec3 .m_box .m_call li b + b{font-size:18px;} .sec3 .m_box .m_banner{overflow:hidden; border:1px solid #d7dee2;} .sec3 .m_box .m_banner .banner_list, .sec3 .m_box .m_banner .banner_list div{height:100%;} .sec3 .m_box .m_banner .banner_list div a{display:block; height:100%; box-sizing:border-box;} .sec3 .m_box .m_banner .banner_list div a img{height:100%; width:100%;} .sec3 .m_box .m_banner .banner_list .slick-dots{bottom:17px; padding-left:50px; z-index:1; text-align:left;} .sec3 .m_box .m_banner .banner_list .slick-dots li{width:auto; height:auto; margin:0 4px; } .sec3 .m_box .m_banner .banner_list .slick-dots li button{width:13px; height:13px; border:2px solid #bebebe; border-radius:50%; } .sec3 .m_box .m_banner .banner_list .slick-dots li button:before{display:none;} .sec3 .m_box .m_banner .banner_btn{position:absolute; left:26px; bottom:0; margin-bottom:15px; z-index:10;} .sec3 .m_box .m_banner .banner_btn button{width:10px; height:13px; background-image:url(../images/icon_all.png); background-repeat:no-repeat; text-indent:-9999px;} .sec3 .m_box .m_banner .banner_btn .pause{background-position:right top -540px;} .sec3 .m_box .m_banner .banner_btn .play{display:none; background-position:right -60px top -540px;} .sec3 .slid_btn{display:none;} .sec3 .m_picture > ul > li div div a:hover{text-decoration:none;} .sec3 .m_picture > ul > li div div a:hover p{text-decoration:underline;} .sec3 .m_picture .m_tab li div div a:hover div{border:3px solid #556c79;} .sec3 .m_picture .m_tab li .sec3_list3 div a:hover div, .sec3 .m_picture .m_tab li .sec3_list4 div a:hover div{border-color:#2fb5f4;} .sec3 .m_picture .m_tab li .sec3_list3 div a:hover div:after, .sec3 .m_picture .m_tab li .sec3_list4 div a:hover div:after{display:block;} .sec3 .m_box .m_banner .banner_list .slick-dots li.slick-active button{border-color:#0b7cc1; background-color:#0b7cc1;} .sec3 .m_box .m_banner .banner_btn .pause:hover, .sec3 .m_box .m_banner .banner_btn .pause:focus, .sec3 .m_box .m_banner .banner_btn .pause:active{background-position:right -120px top -540px;} .sec3 .m_box .m_banner .banner_btn .play:hover, .sec3 .m_box .m_banner .banner_btn .play:focus, .sec3 .m_box .m_banner .banner_btn .play:active{background-position:right -180px top -540px;} .sec3 .m_box .m_banner .banner_list .slick-dots li button:hover, .sec3 .m_box .m_banner .banner_list .slick-dots li button:focus, .sec3 .m_box .m_banner .banner_list .slick-dots li button:active{outline:2px dashed black;} /* sec4 */ .sec4{border-top:1px solid #ededed; box-sizing:border-box;} .sec4 .m_banner2{position:relative; height:80px; padding-left:110px; border-top:1px solid transparent; box-sizing:border-box;} .sec4 .m_banner2 .banner_list2{margin-top:10px; height:60px; line-height:60px;} .sec4 .m_banner2 .banner_list2 div a{display:block; text-align:center;} .sec4 .m_banner2 .banner_list2 div a img{display:inline-block; max-width:100%; vertical-align:middle;} .sec4 .m_banner2 .banner_btn2{position:absolute; left:35px; top:25px;} .sec4 .m_banner2 .banner_btn2 button{opacity:0.4; width:30px; height:30px; background-position:center; background-repeat:no-repeat; text-indent:-9999px;} .sec4 .m_banner2 .banner_btn2 .pause{background-image:url(../images/btn_m_banner2_pause.png);} .sec4 .m_banner2 .banner_btn2 .play{display:none; background-image:url(../images/btn_m_banner2_play.png);} .sec4 .m_banner2 .banner_btn2 .slick-prev{left:-37px; background-image:url(../images/btn_m_banner2_prev.png);} .sec4 .m_banner2 .banner_btn2 .slick-next{right:-37px; background-image:url(../images/btn_m_banner2_next.png);} .sec4 .m_banner2 .banner_list2 div a:hover, .sec4 .m_banner2 .banner_list2 div a:focus, .sec4 .m_banner2 .banner_list2 div a:active{border:1px dotted gray;} .sec4 .m_banner2 .banner_btn2 button:hover, .sec4 .m_banner2 .banner_btn2 button:focus, .sec4 .m_banner2 .banner_btn2 button:active{opacity:1;} /* 슬라이드 간격 추가 */ .sec4 .m_banner2 .banner_list2 .slick-list{margin: 0 -5px;} .sec4 .m_banner2 .banner_list2 .slick-slide{margin: 0 5px;} #print-modal-controls a:hover, #print-modal-controls a:focus, #print-modal-controls a:active {outline:1px dotted gray;} /* 20220225 LHI 메인 사회적기업 인·지정 상담기관 추가 */ .sec1 .m_slogan {padding-top:160px;} .sec1 .m_card [class^="card"] div{padding:24px 30px; height:420px;} .sec1 .m_card div li a {padding:8px 10px;} .sec1 .m_card div p.crd_num {padding-right:0;} .sec1 .m_card div p.crd_num span {font-size:16px; font-weight:600;} .sec1 .m_card div p.crd_num, .sec1 .m_card div p.crd_num ~ p, .sec1 .m_card div.card3 ul {margin-top:15px;} .sec1 .m_icon li:nth-child(2) a {padding-top:11px;} .sec1 .m_icon li:nth-child(2) a span {text-align:left; line-height:1.47;} .sec1 .m_icon li:nth-child(6) a {padding-top:11px;} /* 20221114 LHI 웹접근성 수정 */ .sec3 .m_box .m_call li p {text-shadow:1px 1px 0 #637698;} .sec3 .m_box .m_banner .banner_list div a img {box-sizing:border-box;} .sec3 .m_box .m_banner .banner_list div a:focus img, .sec3 .m_box .m_banner .banner_list div a:active img {border:2px dashed black;} input[type="file"]:focus {outline:2px dashed black;} @media screen and (max-width:1750px){ .menu{background:rgba(255,255,255,0.8);} } @media screen and (max-width:1400px){ /* nav */ .menu{display:none;} /* section */ .section .m_tit{text-align:center; font-size:28px;} .section .m_tit span{display:none;} .section .m_tab{margin-top:80px; min-height:auto;} .section .m_tab > li > button{top:-65px; width:90px; padding:7px 0; font-size:16px;} .section .m_tab > li:nth-child(1) > button{right:50%; margin-right:105px;} .section .m_tab > li:nth-child(2) > button{right:50%; margin-right:5px;} .section .m_tab > li:nth-child(3) > button{right:50%; margin-right:-95px;} .section .m_tab > li:nth-child(4) > button{right:50%; margin-right:-195px; } /* sec1 */ .sec1{padding:30px 0;} .sec1 .m_slogan{display:none;} .sec1 .m_card{margin-top:0;} .sec1 .m_icon{margin-top:-30px;} .sec1 .m_icon li{width:calc((100% - 1px)/3);} .sec1 .m_icon li:nth-child(-n+6){border-bottom:1px solid #e5ebef;} .sec1 .m_icon li:nth-child(3n){border-right:none;} .sec1 .m_icon li a{height:60px; line-height:53px; font-size:16px;} .sec1 .m_icon li:nth-child(2) a, .sec1 .m_icon li:nth-child(6) a{padding-top:3px;} .sec1 .m_icon li a .icon_m_sec1_open{padding-left:70%; background-size:162px; background-position:top center; } .sec1 .m_icon li:nth-child(7), .sec1 .m_icon li:last-child{width:50%; border-bottom: 1px solid #e5ebef;} .sec1 .card_btn{display:block;} .sec1 .m_icon li a.clean{} .sec1 .m_icon li a .icon_m_sec1_clean{height:60px; margin-top: 0px; line-height:unset;} .sec1 .m_icon li a .icon_m_sec1_clean br{display:none !important;} /* sec2 */ .sec2{padding:30px 0;} .sec2 .m_notice{padding-top:0;} .sec2 .m_notice > ul > li > ul > li{float:none; width:100%;} .sec2 .m_notice > ul > li > ul > li:nth-child(-n+4){margin-bottom:0;} .sec2 .m_notice > ul > li > ul > li:nth-child(n+5):nth-child(-n+8){display:none;} .sec2 .m_notice > ul > li:first-child > ul > li:not(:nth-child(4)) > a{border-bottom:none;} .sec2 .m_notice > ul > li:not(:first-child) > ul > li > a{border-bottom:none;} .sec2 .m_notice > ul > li:first-child > ul > li.oon:not(:nth-child(4)) > a:before, .sec2 .m_notice > ul > li:not(:first-child) > ul > li.oon > a:before{bottom:0;} .sec2 .m_notice > ul > li > ul > li > a p{overflow:hidden; height:auto; margin-bottom:0; white-space:nowrap; text-overflow:ellipsis; } .sec2 .m_notice > ul > li > .more{position:relative; right:auto; top:auto; width:100%; height:45px; border:1px solid #d7dee2; background:none; text-indent:1px; text-align:center; line-height:45px; } .sec2 .m_notice > ul > li > .more span{padding-right:12px; background:url(../images/icon_all_contents.png) right top -191px; color:#666;} .sec2 .m_box .m_notice_tit span{display:none;} .sec2 .m_box ul li a{width:100%;} .sec2 .m_box ul li span{display:none;} /* sec3 */ .sec3{padding:30px 0;} .sec3 .m_picture .m_tab > li div div a{max-width:270px;} .sec3 .m_picture .m_tab li div div:nth-child(n) a, .sec3 .m_picture .m_tab li .sec3_list3 div:nth-child(n) a, .sec3 .m_picture .m_tab li .sec3_list4 div:nth-child(n) a{margin:0 auto;} .sec3 .m_picture .m_tab > li .sec3_list3 div a, .sec3 .m_picture .m_tab > li .sec3_list4 div a{max-width:340px;} .sec3 .m_picture .m_tab > li .sec3_list3 div a div, .sec3 .m_picture .m_tab > li .sec3_list4 div a div{height:215px;} .sec3 .m_tab > li.on > .more{display:none;} .sec3 .m_box > div{float:none; width:100%; margin-right:0;} .sec3 .m_box > div:first-child{margin-bottom:20px;} .sec3 .m_box > .m_banner{height:100%;} .sec3 .m_box > .m_banner div a img{width:100%;} .sec3 .m_box .m_banner .banner_btn{margin-bottom:27px;} .sec3 .m_box .m_banner .banner_list div a img{height:35vw; min-height:120px;} .sec3 .m_box .m_banner .banner_list .slick-dots{bottom:29px;} .sec3 li.on .slid_btn{display:block;} /* footer */ #footer .f_top{border-bottom:none; text-align:center;} #footer .f_top .w_inner{padding:0;} #footer .f_top .f_list{position:relative;} #footer .f_top .f_list:before{display:block; content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:rgba(255,255,255,0.2);} #footer .f_top .f_list li a{font-size:14px;} #footer .f_top .site_group{display:inline-block; position:relative; right:auto; top:auto; margin-top:30px;} #footer .f_top .site_group > a, #footer .f_top .site_group div button{width:160px; height:45px; border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2); line-height:45px;} #footer .f_top .site_group > a{padding:0; } #footer .f_top .site_group div button{padding:0 13px; font-size:14px;} #footer .f_top .site_group div button span{padding-right:38px;} #footer .f_top .site_group div:nth-of-type(2) > ul{left:-100px;} #footer .f_sub{padding:30px 0 50px 0; text-align:center;} #footer .f_sub img{display:none;} #footer .f_sub p{padding-left:0; font-size:14px; } #footer .f_sub a{display:none;} } @media screen and (max-width:768px){ /* m_menu_on */ #header.m_menu_on #gnb > ul > li{width:160px; padding:0 18px;} #header.m_menu_on #gnb > ul > li > div{left:160px; width:calc(100% - 161px);} #header.m_menu_on #gnb .depth1{padding-left:18px; padding-right:18px;} /* section */ .slid_btn button{top:30%;} /* sec1 */ .sec1 .m_card{width:100%; margin-left:0;} .sec1 .m_card div ul{margin-top:15px;} .sec1 .m_card [class^="card"] div{margin:0; background-image:none;} .sec1 .m_card div dl{position:relative; margin-top:15px;} /*.sec1 .m_card div dl dd{position:absolute; left:70px; top:-4px; }*/ .sec1 .m_card [class^="card"] > div > a{left:auto; right:30px;} .sec1 .m_icon{margin-top:0;} .sec1 .m_icon li{width:calc(100%/2);} .sec1 .m_icon li{border-bottom:1px solid #e5ebef; border-right:1px solid #e5ebef;} .sec1 .m_icon li:nth-child(3){ border-right:1px solid #e5ebef;} .sec1 .m_icon li:nth-child(even){border-right:none;} .sec1 .m_icon li a [class^="icon_m_sec1"]{background:none; padding:0;} .sec1 .m_icon li:nth-child(2) a span, .sec1 .m_icon li:nth-child(6) a span{text-align:center; font-size: 16px;} .sec1 .m_icon li a .icon_m_sec1_open{padding:0; text-indent:0;} /* sec2 */ .sec2 .m_notice > ul > li > ul > li > a{padding:50px 25px 15px 25px;} .sec2 .m_notice > ul > li > ul > li > a p{font-size:16px;} .sec2 .m_box{margin-top:20px;} .sec2 .m_box > div{float:none; width:100%; margin-right:0; padding:20px 22px;} .sec2 .m_box > div:first-child{margin-bottom:20px;} /* sec3 */ .sec3 .m_box > div{height:auto;} .sec3 .m_box .m_call{padding:0 15px;} .sec3 .m_box .m_call li{float:none; width:100%; min-height:95px; padding:20px 0; padding-left:75px; background-position:left top 15px; border-right:none; border-bottom:1px dashed rgba(255,255,255,0.3); text-align:left;} .sec3 .m_box .m_call li:last-child{border-bottom:none;} .sec3 .m_box .m_call li p{font-size:14px;} .sec3 .m_box .m_call li b{font-size:20px;} .sec3 .m_box .m_call li b + b{font-size:16px;} .sec3 .m_box .m_banner .banner_btn{margin-bottom:5px;} .banner_btn, .sec3 .m_box .m_banner .banner_list .slick-dots{display:none !important;} /* footer */ #footer .f_top .site_group > a{width:100%; border-bottom:0; border-right:1px solid rgba(255,255,255,0.2);} #footer .f_top .site_group div{width:calc(100%/2);} #footer .f_top .site_group div button{padding:0 8px; width:100%; min-width:136px;} #footer .f_top .site_group div:nth-of-type(1) button{border-left:1px solid rgba(255,255,255,0.2);} #footer .f_top .site_group div button span{padding-right:20px;} #footer .f_top .site_group div > ul{width:200%;} #footer .f_top .site_group > div:nth-of-type(2) > ul{left:-100%;} } @media screen and (max-width:400px){ /* section */ .section .m_tab > li > button{width:70px; font-size:15px;} .section .m_tab > li:nth-child(1) > button{margin-right:70px;} .section .m_tab > li:nth-child(2) > button{margin-right:0px;} .section .m_tab > li:nth-child(3) > button{margin-right:-70px;} .section .m_tab > li:nth-child(4) > button{margin-right:-140px; } /* footer */ #footer .w_inner{padding:0 10px;} #footer .f_top .f_list li a{padding:0 7px;} }