/* common */ @import url('font.css'); * {padding:0;margin:0; -webkit-text-size-adjust:none; -moz-text-size-adjust: none; -ms-text-size-adjust: none} /* {box-sizing:border-box !important;-moz-box-sizing:border-box !important;-webkit-box-sizing:border-box !important;}*/ html, body {font-family:'SCoreDream',sans-serif;font-size:14px} ul,ol,dl {list-style:none} ul li {display:inline-block;vertical-align:top} a,a:link,a:visited,a:hover {text-decoration:none !important;} img {border:0;max-width:100%;width:auto} table {border-spacing:0;border-collapse:collapse} .clear {clear:both} .green {color:#2fe19c} .yellow {color:#fbfe03} .blue {color:#2f8fe1} .red {color:#fe2c03} .red2 {color:#e6441f} .left {float:left} .right {float:right} .txt_center {text-align:center} .space10 {clear:both;height:10px} .space20 {clear:both;height:20px} .space25 {clear:both;height:25px} .space30 {clear:both;height:30px} .space40 {clear:both;height:40px} .space50 {clear:both;height:50px} .space60 {clear:both;height:60px} .space70 {clear:both;height:70px} .space80 {clear:both;height:80px} .space90 {clear:both;height:90px} .space100 {clear:both;height:100px} .pc1300 {display:block} .mobile1300 {display:none} .pc1200 {display:block} .mobile1200 {display:none} .pc1000 {display:block} .mobile1000 {display:none} .pc840 {display:block} .mobile840 {display:none} .pc640 {display:block} .mobile640 {display:none} .pc480 {display:block} .mobile480 {display:none} .wr1300 {max-width:1300px;margin:0 auto} #header {position:fixed;background:#fff;width:100%;z-index:999} #header .top {border-bottom:1px solid rgba(0,0,0,0.2)} #header .wr1300 {position:relative;display:flex;align-items:center} #header .logo {position:absolute;top:50%;left:0;transform:translateY(-50%);width:200px} #header .navi2025 * {transition:none;-webkit-transition:none;-moz-transition:none;-o-transition:none;} #header .navi2025 {width:57%;margin:0 auto} #header .navi2025 ul {display:flex;align-items:center;width:100%} #header .navi2025 ul li {width:20%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;text-align:center;} #header .navi2025 ul li a {display:block;font-size:18px;font-weight:600;color:#333;width:100%;height:90px;line-height:90px;} #header .navi2025 ul li a:hover {font-weight:800;color:#fe2c03} #header .gnb {position:absolute;top:50%;right:0;transform:translateY(-50%);width:205px} #header .gnb li::after {content:'/';padding:0 8px;color:#d1d1d1} #header .gnb li:last-child::after {content:''} #header .gnb a {font-size:14px;font-weight:400;color:#666} #header .gnb a:hover {font-weight:500;color:#222} #header .gnb .mobile1000 {text-align:right;} #header .gnb .mobile1000 > div {display:flex;align-items:center;justify-content:right} #header .gnb .mobile1000 a {padding-right:10px} #header .gnb .mobile1000 img {width:45px} #header .total_wrap {display:none;position:absolute;top:90px;width:100%;background:rgba(227,246,253,0.9);height:260px;z-index:99;padding:20px 0;border-bottom:1px solid #ddd;border-top:1px solid #ddd; backdrop-filter:blur(4px);} #header .total_wrap ul {display:flex;align-items:baseline;justify-content:space-between;text-align:center;margin:0 auto;width:800px} #header .total_wrap li {width:20%;text-align:center;padding:0 2%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;min-height:250px;border-right:1px solid #ccc} #header .total_wrap li:last-child {border-right:none} #header .total_wrap li a {display:block;font-size:15px;font-weight:500;color:#121212;padding:6px 0;word-break:keep-all} #header .total_wrap li a:hover {color:#fe2c03;font-weight:600;text-decoration:underline !important;} #header .total_wrap li a:first-child {padding-top:0} /* container */ /*#container * {transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease}*/ #container {padding-top:90px;overflow:hidden} #container .main_roll {position:relative} #container .main_roll .swiper-slide {width:100%;height:710px;background-size:cover !important} #container .main_roll .main_roll_txt {position:absolute;bottom:14%;width:100%;z-index:9} #container .main_roll .main_roll_txt .wr1300 {display:flex;align-items:center;justify-content:center;height:170px} #container .main_roll .main_roll_txt .wr1300 .txt {font-size:40px;font-weight:500;color:#fff;text-align:center;text-shadow:5px 5px 30px #000} #container .main_roll .main_roll_txt .wr1300 .txt h1 {font-size:44px;font-weight:700;color:#fff} #container .main_roll .main_roll_txt .wr1300 .img {padding:0 5%;text-align:center} #container .main_roll .slide1 {display:flex;align-items:center;justify-content:center;} #container .main_roll .slide1 h1 {font-size:60px;font-weight:600;color:#fff;padding:0 20px;text-shadow:10px 10px 20px #000} #container .main_roll .slide2 .wr1300 {position:relative;height:100%} #container .main_roll .slide2 .wr1300 h3 {position:absolute;top:20%;font-size:25px;font-weight:600;color:#fff;text-align:center;text-shadow:5px 5px 30px #000;line-height:1.6} #container .main_roll .slide2 .wr1300 h1 {position:absolute;bottom:20%;right:0;font-size:40px;font-weight:600;color:#fff;text-align:right;text-shadow:5px 5px 30px #000;letter-spacing:-1px;} #container .main_roll .slide3 .wr1300 {position:relative;height:100%} #container .main_roll .slide3 .wr1300 h3 {position:absolute;bottom:20%;font-size:40px;font-weight:600;color:#fff;text-align:center;text-shadow:5px 5px 30px #000;line-height:1.5} #container .main_roll .swiper-pagination-bullet {width:18px;height:18px;opacity:1;background:#fff;margin:0 6px;box-shadow:1px 1px 3px #333} #container .main_roll .swiper-pagination-bullet-active {background:#fe2c03} #container .main_roll .swiper-pagination-fraction,#container .main_roll .swiper-pagination-custom,#container .main_roll .swiper-container-horizontal > .swiper-pagination-bullets {bottom:5.5%} #container .main_title1 {font-family:'GmarketSans';font-size:14px;font-weight:500;color:#000;margin:0 !important;padding:0 !important} #container .main_title2 {font-size:36px;font-weight:300;color:#222;padding-top:10px;word-break:keep-all;} #container .main_title2 b {font-weight:600} #container .main_bnr * {transition:none;-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box} #container .main_bnr {position:relative;height:500px} #container .main_bnr ul {display:flex;flex-wrap:wrap;position:absolute;bottom:0;width:100%} #container .main_bnr li {position:relative;bottom:0;display:block;width:23%;margin-right:2.66%;text-align:center;overflow:hidden;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;overflow:hidden;height:460px} #container .main_bnr li.on a {box-shadow:2px 2px 10px #333} #container .main_bnr li a {position:absolute;bottom:0;width:100%;display:block;height:460px;overflow:hidden} #container .main_bnr li:nth-of-type(4n) {margin-right:0} #container .main_bnr li:nth-of-type(1) a {background:#438c0f;border:7px solid #438c0f} #container .main_bnr li:nth-of-type(1).on a {border:7px solid #8fc668} #container .main_bnr li:nth-of-type(1) .more {background:#438c0f} #container .main_bnr li:nth-of-type(1) .pic {background:url(../img2025/main_bnr_bg1.jpg) no-repeat top center;height:0} #container .main_bnr li:nth-of-type(2) a {background:#0d1273;border:7px solid #0d1273} #container .main_bnr li:nth-of-type(2).on a {border:7px solid #666ded} #container .main_bnr li:nth-of-type(2) .more {background:#0d1273} #container .main_bnr li:nth-of-type(2) .pic {background:url(../img2025/main_bnr_bg2.jpg) no-repeat top center;height:0} #container .main_bnr li:nth-of-type(3) a {background:#006a5f;border:7px solid #006a5f} #container .main_bnr li:nth-of-type(3).on a {border:7px solid #34caba} #container .main_bnr li:nth-of-type(3) .more {background:#006a5f} #container .main_bnr li:nth-of-type(3) .pic {background:url(../img2025/main_bnr_bg3.jpg) no-repeat top center;height:0} #container .main_bnr li:nth-of-type(4) a {background:#0d2cd9;border:7px solid #0d2cd9} #container .main_bnr li:nth-of-type(4).on a {border:7px solid #6a81ff} #container .main_bnr li:nth-of-type(4) .more {background:#0d2cd9} #container .main_bnr li:nth-of-type(4) .pic {background:url(../img2025/main_bnr_bg4.jpg) no-repeat top center;height:0} #container .main_bnr li a .icon {position:relative;height:180px} #container .main_bnr li a .icon img {position:absolute;bottom:0;left:50%;transform:translateX(-50%);} #container .main_bnr li a .title {padding-top:35px;font-size:25px;font-weight:600;color:#fff;text-shadow:1px 1px 3px #000} #container .main_bnr li a .bnr_txt {display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;height:100px;padding:0 10px;word-break:keep-all;flex-direction:column;} #container .main_bnr li a .more {display:flex;align-items:center;justify-content:center;position:absolute;bottom:17px;font-size:16px;font-weight:500;color:#fff;width:85px;height:30px;line-height:30px;left:50%;transform:translateX(-50%);border:1px solid #fff;border-radius:999px;margin:0 auto;z-index:99} #container .main_bnr li a .more img {padding-left:5px;vertical-align:top} #container .main_bnr li a .pic {margin-top:41px;z-index:9999} #container .service ul {display:table;table-layout:fixed;width:100%;} #container .service ul li {display:table-cell;vertical-align:top;padding:30px 30px 20px 30px;width:48%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;} #container .service ul li:nth-of-type(3n) {margin-right:0} #container .service ul li:nth-of-type(1) {background:#19248f} #container .service ul li:nth-of-type(1) .more {float:right;display:inline-block;width:79px;background:#5058aa;font-size:14px;color:#fff;padding:5px 0;border-radius:999px;text-align: center;margin-top:10px} #container .service ul li:nth-of-type(2) {width:4%} #container .service ul li a {display:block} #container .service ul li dl {display:flex;align-items:center;min-height:150px} #container .service ul li dl dt {width:95px;padding-right:3%} #container .service ul li dd {width:calc(100% - 3% - 95px)} #container .service ul li dd .tit {font-size:26px;color:#fff;padding-bottom:10px} #container .service ul li dd .tit b {font-weight:600;} #container .service ul li dd .txt {font-size:15px;font-weight:300;color:#fff;line-height:1.6} #container .service ul li:nth-of-type(3) {background:#621180} #container .service ul li:nth-of-type(3) .more {float:right;display:inline-block;width:79px;background:#884a9e;font-size:14px;color:#fff;padding:5px 0;border-radius:999px;text-align: center;margin-top:10px} #container .network {position:relative;display:flex;align-items:center;background:url(../img2025/main_network_bg.jpg) no-repeat right center;height:230px} #container .network .title_bar {position:absolute;top:-30px;left:3.8%;display:flex;align-items:center;justify-content:center;background:#3a3a3a;width:260px;height:170px;font-size:30px;font-weight:500;color:#fff;text-align:center} #container .network .con_txt {margin-left:31.5%;font-size:28px;font-weight:600;color:#252525} #container .network .con_txt .stit {font-size:17px;font-weight:400;color:#000;padding-top:15px} #container .main_bnr_bot {background:url(../img2025/main_mid_bottom_bg.jpg) no-repeat center center;min-width:1300;background-size:cover} #container .main_bnr_bot ul {display:flex;align-items:center;height:300px;flex-wrap:wrap;padding:0 3.8%} #container .main_bnr_bot ul li {font-size:17px;font-weight:300;color:#fff;width:49%;} #container .main_bnr_bot ul li h1 {font-size:26px;font-weight:600;color:#fff;padding-top:5px} #container .main_bnr_bot ul li a.qna {display:flex;margin-top:30px;align-items:center;justify-content:center;width:180px;height:40px;border:1px solid #fff;border-radius:999px;font-size:16px;color:#fff} #container .main_bnr_bot ul li:nth-of-type(2) {margin-right:0} #container .main_bnr_bot ul li .con_tel {display:flex;flex-direction:column;width:auto;float:right;font-family:'GmarketSans';} #container .main_bnr_bot ul li .con_tel .tel {font-size:56px;font-weight:600;color:#fce279;} #ecoyou_firm_main,#ecoyou_firm_main_movie {font-family:'SCoreDream',sans-serif;} #ecoyou_firm_main_movie .banner .banner_in .right .text1 span {font-weight:500} #ecoyou_firm_main_movie .banner .banner_in .right .list_box ul li {font-size:15px;font-weight:400} #ecoyou_firm_main_movie .movie_slide {max-width:100% !important} #ecoyou_firm_main_movie .movie_slide .sc1 .sw1 .swiper-slide img {border-radius:20px} .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {content:''} #ecoyou_firm_main_movie .movie_slide .sb1_prev {background:url(../img2025/btn_left.png) no-repeat left center;width:39px;height:39px} #ecoyou_firm_main_movie .movie_slide .sb1_next {background:url(../img2025/btn_right.png) no-repeat left center;width:39px;height:39px} #ecoyou_firm_main_movie .movie_slide .sb1_prev {left:-3%} #ecoyou_firm_main_movie .movie_slide .sb1_next {right:-3%} /* sub container */ #sub_container * {transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease} #sub_container {padding-top:90px} #sub_container #svisual-wrap {width:100%;height:17.44vw;overflow:hidden;} #sub_container #svisual-wrap #visImgWrap {position:relative;width:100%;height:100%;margin:0 auto;} #sub_container #svisual-wrap #visImgWrap .txt_area {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 {display:flex;align-items:center;justify-content:center;height:170px} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .txt {font-size:26px;font-weight:500;color:#fff;text-align:center;text-shadow:1px 1px 3px #333;} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .txt h1 {font-size:38px;font-weight:700;color:#fff} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .img {padding:0 3%;text-align:center} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .img img {width:40px} #sub_container #svisual-wrap #visImgWrap #visImg img {position:absolute;top:0;left:0;width:100%} #sub_container .position * {box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;transition:none;-webkit-transition:none;-moz-transition:none;-o-transition:none;} #sub_container .position {display:block;background:#f8f8f8;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5} #sub_container .position .wr1300 {height:60px} #sub_container .position ul {display:flex;align-items:center;} #sub_container .position ul li {position:relative;display:flex;align-items:center;border-left:1px solid #e5e5e5} #sub_container .position ul li:nth-of-type(1) {background:#fff;justify-content:center;width:60px;height:60px} #sub_container .position ul li:nth-of-type(2) {background:#fff;width:230px;line-height:60px} #sub_container .position ul li a.top {display:block;width:100%;font-size:17px;font-weight:500;color:#242424;padding:0 20px} #sub_container .position ul li .sub_list {display:none;position:absolute;top:59px;left:-1px;border:1px solid #e5e5e5;border-top:1px solid #e5e5e5;z-index:99;background:#fff;width:calc(100% + 2px);padding:5px 20px;} #sub_container .position ul li .sub_list a {display:block;font-size:15px;font-weight:500;color:#606060;line-height:1.6;padding:10px 0;word-break:keep-all} #sub_container .position ul li .sub_list a:hover {color:#fe2c03;text-decoration:underline !important;} #sub_container .position ul li:nth-of-type(3) {background:#fff;width:230px;height:60px;border-right:1px solid #e5e5e5} #sub_container #sub_content {margin:60px auto} #sub_container .sub_title .stitle {font-family:'GmarketSans';font-size:14px;font-weight:500;color:#000} #sub_container .sub_title h1 {font-size:38px;font-weight:800;color:#222;padding-top:5px} #sub_container .sub_detail_content {margin:30px 0} /* footer */ #footer .bot_link {background:#555;padding:0 20px} #footer .bot_link ul {display:flex;align-items:center;flex-wrap:wrap;padding:20px 0} #footer .bot_link ul li {padding:0 12px;text-align:center;border-right:1px solid rgba(255,255,255,0.2)} #footer .bot_link ul li:last-child {border-right:none;padding-right:0} #footer .bot_link ul li a {display:block;font-size:15px;color:#fff;line-height:1.8} #footer .bottom {background:#222;padding:50px 0} #footer .bottom ul {display:flex;flex-wrap:wrap;} #footer .bottom li:nth-of-type(1) {width:210px;padding-right:6%} #footer .bottom li:nth-of-type(2) {width:calc(100% - 6% - 450px)} #footer .bottom li:nth-of-type(2) .name {font-size:18px;font-weight:500;color:#fff} #footer .bottom li:nth-of-type(2) .copyright {padding-top:15px;font-size:14px;color:#989797;line-height:1.6} #footer .bottom li:nth-of-type(2) .copy {padding-top:20px} #footer .bottom li:nth-of-type(3) {width:240px;font-size:13px;color:#fff;word-break:keep-all;line-height:1.5;} #footer .bottom li:nth-of-type(3) p {padding-bottom:5px} /* 로그인 */ #ac_login_div form{margin:0 auto; width:370px; padding:30px; background:white;} #ac_login_div form ol{display:table; table-layout:fixed; width:100%; margin:0 0 20px 0; padding:0; list-style:none;} #ac_login_div form ol li{display:table-cell; border:1px solid #eaeaea; font-size:15px; font-weight:600; color:#464646; cursor:pointer; padding:10px 0; text-align:center; background:#f4f4f4;} #ac_login_div form ol li.on{border:1px solid #333; border-bottom:none; background:white; color:black;} #ac_login_div form ul{margin:0; padding:0; list-style:none;} #ac_login_div form ul li{display:block; margin:0 0 20px 0;} #ac_login_div form ul li:last-child{text-align:center; margin:0;display:flex;flex-wrap:wrap} #ac_login_div form ul li b{display:block; margin:0 0 10px 0; font-size:15px; font-weight:600;} #ac_login_div form ul li span{font-size:12px; font-weight:600; color:#66688b; line-height:1.8em;} #ac_login_instant_id, #ac_login_instant_pw{font-size:16px; padding:5px; border:1px solid #c6c6c6; width:97%;} #ac_login_instant_pw{margin:0 0 10px 0;} #ac_login_div form button[type='submit']{width:100%; padding:12px 0; border:none; background:#e60013; color:white; font-weight:bold; font-size:20px; margin:0 0 4px 0; cursor:pointer;} #ac_login_div form button[type='button']{width:49.5%; padding:12px 0; border:1px solid #d9d9d9; background:#f4f4f4; color:#666; font-weight:bold; font-size:16px; cursor:pointer;} #ac_login_div form input[type='checkbox'] { background: #fff; border: solid 2px black; height: 20px; width: 20px; -webkit-appearance: none; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; vertical-align:middle; } #ac_login_div form input[type='checkbox']:checked, input[type='radio']:checked { background: #fff; border: solid 2px black; } #ac_login_div form input[type='checkbox']:checked:after { content: ' '; display: block; width: 12px; height: 12px; background: black; position: relative; top: 2px; left: 2px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } #ac_login_instant_title{display:table; width:100%; margin:0 0 24px 0; padding:0; table-layout:fixed;} #ac_login_instant_title span{display:table-cell; font-size:24px; text-align:right; width:32px;} #ac_login_instant_title strong{display:table-cell; text-align:center; font-size:28px;} #ac_login_close{cursor:pointer;} @keyframes animate_background { 0% {margin-top:0;background-size:100% 100%} 50% {margin-top:-50px;background-size:80% 80%} 100% {margin-top:0;background-size:50% 50%} } @media only screen and (min-width:1300px){ #sub_container #svisual-wrap #visImgWrap #visImg img {animation:animate_background 5s linear} } @media only screen and (max-width:1299px){ #sub_container #svisual-wrap {height:300px} #sub_container #svisual-wrap #visImgWrap #visImg {position:absolute;top:0;left:50%;margin-left:-650px;width:1300px;height:300px} #sub_container #svisual-wrap #visImgWrap #visImg img {position:relative;top:auto;left:auto;margin-left:0;width:1300px;height:300px} } @media only screen and (max-width:1200px){ #container .main_roll .slide1 h1 {font-size:55px} } @media only screen and (max-width:840px){ #sub_container #svisual-wrap {height:200px} #sub_container #svisual-wrap #visImgWrap #visImg {position:absolute;top:0;left:50%;margin-left:-420px;width:840px;height:200px} #sub_container #svisual-wrap #visImgWrap #visImg img {position:relative;top:auto;left:auto;margin-left:0;width:840px;height:200px} } @media all and (max-width : 1300px){ .pc1300 {display:none} .mobile1300 {display:block} .wr1300 {padding-left:2%;padding-right:2%} #header .logo {left:2%} #container .main_roll .swiper-slide {height:54.615vw} #container .main_bnr li {width:23.8%;margin-right:1.5%} #container .main_bnr li a .title {font-size:22px} #container .main_bnr_bot ul {margin:0;padding-left:0;padding-right:0} #container .main_bnr_bot ul li {font-size:16px} #container .main_bnr_bot ul li a.qna {margin-top:20px;width:160px;height:35px;font-size:15px} #container .main_bnr_bot ul li h1 {font-size:24px} #container .service ul li {width:49%} #container .service ul li:nth-of-type(2) {width:2%} #container .network .title_bar {font-size:30px;width:240px;height:150px} #container .network .con_txt {font-size:24px} #container .main_bnr_bot ul li .con_tel .tel {font-size:50px} } @media all and (max-width : 1200px){ .pc1200 {display:none} .mobile1200 {display:block} .space40 {height:30px} .space60 {height:50px} .space70 {height:60px} .space100 {height:90px} #container .main_roll .main_roll_txt .wr1300 {height:150px} #container .main_roll .main_roll_txt .wr1300 .img {padding:0 3%} #container .main_roll .main_roll_txt .wr1300 .img img {width:70%} #container .main_roll .main_roll_txt .wr1300 .txt {font-size:30px} #container .main_roll .main_roll_txt .wr1300 .txt h1 {font-size:36px} #container .main_title2 {font-size:32px} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 {height:150px} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .txt {font-size:22px} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .txt h1 {font-size:30px;font-weight:600} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .img {padding:0 2%} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .img img {width:30px} #footer .bottom li:nth-of-type(2) {width:calc(100% - 6% - 210px)} #footer .bottom li:nth-of-type(3) {display:none} } @media all and (max-width : 1000px){ .pc1000 {display:none} .mobile1000 {display:block} .space40 {height:20px} .space60 {height:40px} .space70 {height:50px} .space100 {height:80px} #header .wr1300 {height:80px} #container {padding-top:80px} #container .main_roll .main_roll_txt .wr1300 {height:auto;padding:25px 20px} #container .main_roll .main_roll_txt .wr1300 .img {padding:0} #container .main_roll .main_roll_txt .wr1300 .img img {width:50%} #container .main_roll .main_roll_txt .wr1300 .txt {font-size:24px} #container .main_roll .main_roll_txt .wr1300 .txt h1 {font-size:30px} #container .main_title2 {font-size:28px} #container .main_bnr {height:auto;margin-top:20px} #container .main_bnr ul {position:relative;bottom:0 !important} #container .main_bnr li {width:49%;margin-right:2%;margin-bottom:20px;font-size:16px} #container .main_bnr li:nth-of-type(2n) {margin-right:0} #container .main_bnr li a .icon {height:150px} #container .main_bnr li a .title {padding-top:25px} #container .main_bnr li a .bnr_txt {height:auto;padding:20px 10px;font-size:15px;word-break:keep-all} #container .main_bnr li a .more {position:relative;margin:30px 0 10px} #container .service ul {display:block;} #container .service ul li {display:block;width:100%;margin-bottom:15px;overflow:hidden} #container .service ul li:nth-of-type(1) a.more, #container .service ul li:nth-of-type(3) a.more {float:none;margin:10px auto;display:block} #container .service ul li:nth-of-type(2) {display:none} #container .service ul li dl {min-height:auto} #container .service ul li dd .tit {font-size:20px} #container .network {height:auto;padding:30px 20px} #container .network .title_bar {display:none} #container .network .con_txt {font-size:22px;margin-left:0;padding:0 2%} #container .network .con_txt .stit {font-size:15px} #container .main_bnr li a .title {font-size:20px} #container .main_bnr_bot ul li {font-size:14px} #container .main_bnr_bot ul li a.qna {margin-top:20px;width:160px;height:35px;font-size:15px} #container .main_bnr_bot ul li h1 {font-size:22px;font-weight:500} #container .main_bnr_bot ul li .con_tel .tel {font-size:40px} #container .main_bnr li {height:auto} #container .main_bnr li a {position:relative;height:390px} #ecoyou_firm_main_movie {padding-top:20px} #container .main_roll .slide1 h1 {font-size:45px} #container .main_roll .slide2 .wr1300 h3 {font-size:20px} #container .main_roll .slide2 .wr1300 h1 {font-size:30px} #sub_container {padding-top:80px} #sub_container .position .wr1300 {padding-left:0;padding-right:0} #sub_container .position ul li:nth-of-type(1) {border-left:none} #sub_container .position ul li:nth-of-type(2) {width:calc((100% - 60px) / 2)} #sub_container .position ul li:nth-of-type(3) {border-right:none;width:calc((100% - 60px) / 2)} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 {height:auto} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .txt {font-size:18px} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .txt h1 {font-size:24px;font-weight:600} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .img {padding:0 1.5%;text-align:center;} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .img img {width:20px} #sub_container #sub_content {margin:40px auto} #sub_container .sub_title h1 {font-size:32px;font-weight:600;padding-top:0} #sub_container .sub_detail_content {margin:30px 0} } @media all and (max-width : 840px){ .pc840 {display:none} .mobile840 {display:block} .space40 {height:15px} .space60 {height:30px} .space70 {height:40px} .space100 {height:70px} #container .main_title2 {font-size:24px} #container .main_bnr_bot ul {padding-top:40px;padding-bottom:40px;height:auto} #container .main_bnr_bot ul li {width:100%;text-align:center;} #container .main_bnr_bot ul li .con_tel {float:none;padding-top:30px} #container .main_bnr_bot ul li a.qna {margin:20px auto 0} #container .main_roll .slide1 h1 {font-size:35px;text-align:center} #container .main_roll .slide2 .wr1300 {position:relative} #container .main_roll .slide2 .wr1300 h3 {display:none;font-size:16px} #container .main_roll .slide2 .wr1300 h1 {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;text-align:center;line-height:1.6;width:100%} #container .main_roll .slide3 .wr1300 h3 {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;width:100%} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .txt {font-size:16px} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .txt h1 {font-size:20px} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .img {padding:0 1.5%;text-align:center;} #sub_container #svisual-wrap #visImgWrap .txt_area .wr1300 .img img {width:20px} #footer .bottom li:nth-of-type(1) {width:28%;padding-right:5%} #footer .bottom li:nth-of-type(2) {width:66%} } @media all and (max-width : 640px){ .pc640 {display:none} .mobile640 {display:block} .space40 {height:10px} .space60 {height:20px} .space70 {height:30px} .space100 {height:50px} #container .main_roll .swiper-slide {height:350px} #container .main_roll .main_roll_txt .wr1300 .img {display:none} #container .main_roll .main_roll_txt .wr1300 .txt {font-size:18px} #container .main_roll .main_roll_txt .wr1300 .txt h1 {font-size:22px;word-break:keep-all;} #container .main_title2 {font-size:20px;padding-top:5px} #container .main_bnr li {width:100%;margin-right:0;margin-bottom:15px} #container .main_bnr li:nth-of-type(2n) {margin-right:0} #container .main_bnr li a .bnr_txt {font-size:14px} #container .service ul li {padding:20px} #container .service ul li dl dt {display:none} #container .service ul li dd {width:100%} #container .service ul li dd .txt {font-size:14px;line-height:1.5} #container .service ul li dd .tit {font-size:18px} #container .network {height:auto;padding:30px 15px} #container .network .title_bar {display:none} #container .network .con_txt {font-size:20px;margin-left:0;padding:0 2%} #container .network .con_txt .stit {font-size:15px} #container .main_bnr li a {height:auto} #container .main_bnr li a .icon {background-size:100px !important;height:120px} #ecoyou_firm_main_movie .movie_slide .sb1_prev {left:2%} #ecoyou_firm_main_movie .movie_slide .sb1_next {right:2%} #footer .bottom {padding:30px 0} #footer .bottom li:nth-of-type(1) {display:none} #footer .bottom li:nth-of-type(2) {width:100%} } @media all and (max-width : 480px){ .pc480 {display:none} .mobile480 {display:block} .space40 {height:10px} .space60 {height:15px} .space70 {height:20px} .space100 {height:40px} #container .main_roll .slide1 h1 {font-size:25px} #container .main_roll .slide2 .wr1300 h1 {font-size:20px;} #container .main_roll .slide3 .wr1300 h3 {font-size:20px} #sub_container #sub_content {margin:30px auto} #sub_container .sub_title .stitle {font-size:13px} #sub_container .sub_title h1 {font-size:22px} #sub_container .sub_detail_content {margin:20px 0} #sub_container .position ul li a.top {font-size:15px;} #sub_container .position .wr1300 {height:50px} #sub_container .position ul li:nth-of-type(1) {width:50px;height:50px} #sub_container .position ul li:nth-of-type(2), #sub_container .position ul li:nth-of-type(3) {height:50px} } .panel { /*font-family:'notokr','Nanum';*/ transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; position: fixed; z-index: 9999; top: 0; height: 100%; width: 320px; background-color: #fff; } .panel .moff {display:none} .panel .ninja-btn { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; display: inline-block; float: left; cursor: pointer; padding: 20px 0; position: absolute; z-index: 2; top: -25px; width: 25px; height: auto; } .panel .ninja-btn span, .panel .ninja-btn span:before, .panel .ninja-btn span:after { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; width: 0px; height: 2px; background-color: #fff; } .panel .ninja-btn span { position: relative; display: inline-block; float:left; margin-top: 9.09090909px; } .panel .ninja-btn span:before, .panel .ninja-btn span:after { content: ""; position: absolute; left: 0; } .panel .ninja-btn span:before { top: -9.09090909px; } .panel .ninja-btn span:after { top: 9.09090909px; } /*메뉴 클릭후, 메뉴 버튼을 활성화 시켰을때 속성*/ .panel .ninja-btn.active span { background-color: transparent; } .panel .ninja-btn.active span:before, .panel .ninja-btn.active span:after { top: 0; } .panel .ninja-btn.active span:before { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); } .panel .ninja-btn.active span:after { -webkit-transition-delay: 0.09s; -moz-transition-delay: 0.09s; -o-transition-delay: 0.09s; -msa-transition-delay: 0.09s; transition-delay: 0.09s; transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); } /* 안보이는 패널위치고정 */ .panel-overlay,.panel-overlay2,.panel-overlay3 { position: fixed; top: 0; z-index: 99998; width: 100%; height: 100%; display: none; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; } .panel.left { left: -800px; } /*패널 버튼 부분 위치*/ .panel.left .ninja-btn { left: 770px;top:0; } /* 패널이 활성화 되었을때 */ .panel.left.active { left: 0; overflow: scroll; overflow-x:hidden; overflow-y:auto; z-index:9999999; } .panel.left.active .ninja-btn { left: 100%; margin-left: -50px; } .panel ul li.sub-menu{ } .mmenu .toggle_logo {padding-top:20px} .mmenu ul { width:100%; margin:0; list-style:none; } .mmenu ul > li{ display:block; border-bottom:1px solid #555e94; } .mmenu ul > li > a.tmenu, .mmenu ul > li > a.tmenu2 { height:45px; line-height:45px; display:block; text-decoration:none; color:#fff; background:#35418b; font-size:15px; font-weight:500; padding-left:35px; letter-spacing:-1px; } .mmenu ul > li > a.tmenu.btn_reserve_m{ background:#f42200; } .mmenu .login_area {height:140px;background:#fff;font-size:15px;padding-left:30px;border-bottom:1px solid #3f3f3f} .mmenu .login_area .btn_login {display:inline-block;margin:30px auto 0;width:100px;height:40px;line-height:38px;background:#000;color:#333;} .mmenu .login_area .btn_new {display:inline-block;width:35%;height:38px;border:1px solid #616161;text-align:center;line-height:38px;margin-top:12px;color:#000} .mmenu .sub_list {background:#fff;padding:10px 0} .mmenu .sub_list a {display:block;height:30px;padding-left:40px;font-size:15px;color:#303030} .gotop{position:fixed; right:16px; bottom:16px; width:75px; height:75px; border-radius:999999px; z-index:99999; backdrop-filter:blur(8px);} .gotop img{border-radius:999999px; opacity:0.67;}