/* CSS Document */ body{background:#2d2d2d;} *{font-family:'Noto Sans Kr',malgun gothic;} .wrap_{width:1200px; margin:auto;} @media screen and (max-width:1200px){ .wrap_{width:100%; padding: 0 20px;} } /*** 최상단 메뉴 영역 ***/ .top{position: fixed; top:0; left:0; width:100%; height:84px; z-index: 990; background-color: #fff; z-index: 1000; display: block; transition:0.5s;} .top.move{box-shadow: rgba(0,0,0,0.5) 0 0 10px;} .top .wrap_{padding:0 0 0 200px; overflow: visible;} .top .logo{background: url(../images/top_logo.png) no-repeat 0 center; position: absolute; top:0; left:10px; width:200px; height: 100%;} .top .top_navi{display: flex; justify-content: right; align-items: center; flex-direction: row; width: 100%; overflow: visible;} .top .top_navi>li{position:relative; height: 84px; display: flex; align-items: center;} .top .top_navi>li>a{font-size:17px; line-height: 17px; color: #191919; padding: 10px 45px;} .top .top_navi>li:nth-child(5) a{padding:10px 0 10px 45px;} .top .top_navi>li>a:hover{color:#39b0a8;} .top .top_navi .sbm1{width:100%; margin-left: 35px; } .top .top_navi .sbm2{width:100%; margin-left: 35px;} .top .top_navi>li .submenu{position:absolute; top:70px; left: 0px; z-index: -1; opacity: 0; transition:0.3s;} .top .top_navi .submenu>li{height:1px; transition:0.5s; text-align: left;position:relative;width:100%;} .top .top_navi li .submenu li a{line-height:2.6;background: none;padding:10px;color:#6f6e6e; text-align: left; font-size: 15px; font-weight: 400; transition: 0.2s; height: 100%;} .top .top_navi li .submenu li a:hover{color:#191919} .top .top_navi>li .submenu02{left:0;top:40px;position:absolute;width:100%;} .top .top_navi>li .submenu02>li>a{line-height:1.2;color:#ababab; font-size:14px;font-weight: 300;letter-spacing:0px; } .top.open{height:auto;box-shadow: rgba(0,0,0,0.5) 0 0 10px;} .top.open .top_navi li .submenu{z-index: 100; opacity:1;} .top.open .top_navi li .submenu>li{height:40px;} .top.open .top_navi>li:nth-child(2)>ul>li:nth-child(1){height:40px} .top.open .top_navi>li:nth-child(2)>ul>li:nth-child(2){height:175px} .top.open .top_navi>li:nth-child(2)>ul>li:nth-child(3){height:100px} .top.open .top_navi>li:nth-child(2)>ul>li:nth-child(4){height:160px} @media screen and (max-width:1200px){ .top .top_navi>li>a{padding: 10px 35px;} .top .top_navi>li:nth-child(5) a{padding:10px 0 10px 35px} .top .top_navi>li .submenu{} .top .top_navi .sbm1{width:100%; margin-left: 15px; } .top .top_navi .sbm2{width:100%; margin-left: 15px;} } @media screen and (max-width:880px){ .top, .top .wrap_{height: 60px;} .top .logo{width:150px; background-size: 90%; left:10px;} .top .top_navi{width:60px; height: 60px; position: absolute; top:0; right:0; background: url(../images/mobile_top_menu_icon.png) no-repeat center center; cursor: pointer;} .top .top_navi li{display: none;} } .center{background-color: #fff; overflow: hidden; display: block; z-index: 1; margin-top:84px; transition: 0.5s; min-height: 800px;} @media screen and (max-width:880px){ .center{margin-top:60px;} } .block{clear: both; display: block;} /*** 최상단 메뉴 영역 ***/ h2{font-size: 34px; font-weight: 700; line-height: 34px; display: flex; flex-direction: column; align-items: center;} h2 span{color:#ffffff; font-size: 0; line-height: 1;letter-spacing:0; font-weight: 300; padding-bottom: 10px;} /*** 메인 비주얼 ***/ .main_visual{height: 744px;} .main_visual .bg{width:100%;} .main_visual .bg li{position: absolute; top: 0; left:0; width:100%; height:100%; opacity: 0; transition:1s; display: flex; align-items: center; justify-content: center;} .main_visual .bg li img{} .main_visual .bg li{max-width: 100%;} .main_visual .bg li video {width: 100%;height: 100%;object-fit: cover;object-position: center;} .main_visual .box{background-color: #39b0a8; position: absolute; top:0; left:0; bottom:100px; margin-left: -170px; width:50%;} .main_visual .box ul{width:100%; height:100%; position: absolute;} .main_visual .box li{position: absolute; width:420px; height:100%; top:0; right:0; display: flex; align-items:flex-start; justify-content: center; flex-direction: column; opacity: 0; transition:1s;} .main_visual .bg li:first-child, .main_visual .box li:first-child{opacity: 1;} .main_visual .box li .ti { display: flex; flex-direction: column; justify-content: flex-start;} .main_visual .box li .ti em{color: #fff; font-size: 60px; font-weight: 700; line-height: 60px; display: block; text-align: left; margin-left: 50px; opacity:0; transition:1s;} .main_visual .box li .ti .ti2{transition:1s linear 0.2s;} .main_visual .box li .ti span{color: #fff; font-size: 60px; font-weight: 100; line-height: 60px; margin-left: 50px; opacity:0; transition:1s linear 0.4s;} .main_visual .box li .stxt{color: #fff; font-size: 17px; font-weight: 300; line-height: 24px; padding: 44px 100px 0 0; opacity:0; transition:1s linear 0.6s; width: 100%;} .main_visual .arrow_wrap{background-color: #1b9890; position: absolute; bottom:0; right:0; width:230px; height:70px; display: flex; justify-content: center; align-items: center;} .main_visual .arrow_wrap span{padding:0 20px;} .main_visual .arrow_wrap span em{color: #fff; font-weight: bold; padding-right: 5px;} .main_visual .arrow_wrap span span{color: #fff; opacity:0.5; padding: 0;} .main_visual .arrow_wrap .arrow{background: url(../images/main_visual_arrow.png) no-repeat center center; width: 50px; height:70px; cursor: pointer;} .main_visual .arrow_wrap .right{transform: rotateY(180deg);} @media screen and (max-width:1200px){ .main_visual{height: 700px;} .main_visual .box{margin-left: 0; width: 40%;} .main_visual .box li{width:100%; padding-left: 10px;} .main_visual .box li .ti { display: flex; flex-direction: column; justify-content: flex-start;} .main_visual .box li .ti em{font-size: 48px; line-height: 48px;} .main_visual .box li .ti span{font-size: 48px; line-height: 48px;} .main_visual .box li .stxt{font-size: 15px; line-height: 20px; padding-right: 20px;} } @media screen and (max-width:800px){ .main_visual{height: 550px;} .main_visual .box{background-color:rgba(57,176,168,0.8); bottom:0; width: 40%;} .main_visual .box li .ti { display: flex; flex-direction: column; justify-content: flex-start;} .main_visual .box li .ti em{font-size: 48px; line-height: 48px;} .main_visual .box li .ti span{font-size: 48px; line-height: 48px;} .main_visual .box li .stxt{font-size: 15px; line-height: 20px; padding-right: 20px;} } @media screen and (max-width:480px){ .main_visual{height: 400px;} .main_visual .box li .ti em{font-size: 36px; line-height: 36px;} .main_visual .box li .ti span{font-size: 30px; line-height: 36px;} .main_visual .box li .stxt{font-size: 14px; line-height: 20px; padding-right: 10px; padding-top: 20px;} .main_visual .arrow_wrap{width:100%; height:60px;} .main_visual .arrow_wrap span{padding:0 10px;} .main_visual .arrow_wrap .arrow{height:60px;} } @media screen and (max-width:320px){ .main_visual{height: 350px;} .main_visual .box li .ti em{font-size: 26px; line-height: 26px;} .main_visual .box li .ti span{font-size: 26px; line-height: 26px;} .main_visual .box li .stxt{font-size: 13px; line-height: 20px;} .main_visual .arrow_wrap{width:100%; height:50px;} .main_visual .arrow_wrap span{padding:0 5px;} .main_visual .arrow_wrap .arrow{height:50px;} } /*** 메인 비즈니스 ***/ .business{padding: 95px 0 0 0;} .business .bgbgbg{overflow: visible; position: absolute; top: 0; left:0; width: 100%; height: 100%; z-index: 0;} .business .bgbgbg .bg1{position:absolute; top: 0; left:-50%; margin-left: 320px; width:100%; height:430px; background-color: #f3f7f7;} .business .bgbgbg .bg2{position:absolute; bottom: -30px; left:50%; margin-left: 520px; width:110px; height:130px; background-color: #4aded4;} .business h2{position: relative; z-index: 1;} .business ul{padding: 45px 0 30px 0; display: flex; justify-content:space-between;} .business li{position: relative; cursor:default;} .business li .txt{position:absolute; bottom:30px; left:0; width: 100%; padding: 40px 30px;} .business li .txt span:first-child{color:#52e8de; font-size: 13px; line-height: 13px; font-weight: 300;} .business li .txt strong{color:#fff; font-size: 25px; line-height: 25px; font-weight: 700; display: block; padding-bottom: 15px;} .business li .txt span{color:#fff; font-size: 16px; line-height: 24px; font-weight: 300;} .business li .layer{position:absolute; top:0; left:0; width: 100%; height: 100%; z-index: 10; opacity:0; transition: 0.5s; background: rgba(0,0,0,0.9); display: flex; flex-direction: column; align-items: center; justify-content: center;} .business li:hover .layer{opacity:1;} .business .layer ul{ display: block;} .business .layer li{font-size: 18px; line-height: 18px; font-weight: 300; background: url(../images/main_business_over_icon.png) no-repeat 0 center; padding: 10px 0; padding-left: 25px; width: 100%; text-align: left; opacity: 1; transform: scale(1);} .business .layer li a{color:#ffffff} @media screen and (max-width:1200px){ .business .bgbgbg .bg1{left:-20%; margin-left: 0;} .business .bgbgbg .bg2{bottom: 0; left: auto; right:0; margin-left: 0;} .business ul{display: block; padding: 45px 5px 30px 5px; overflow: hidden;} .business li{width:25%; float:left; padding:0 5px;} .business li img{width:100%;} .business li .txt{padding: 30px 20px;} .business li .txt span{height:50px;} .business li .layer{position:absolute; top:0; left:5px; right:5px; bottom:0; width: auto;} .business .layer li{float: none;} } @media screen and (max-width:800px){ .business ul{padding: 45px 5px 10px 5px;} .business li{width:50%; padding:0 5px; margin-bottom: 10px;} .business li .txt{padding: 40px 30px;} .business li .layer{left:5px; right:5px;} .business li .layer ul{padding-top:0;} } @media screen and (max-width:640px){ .business .layer li{font-size: 15px; line-height: 15px; padding: 10px 0; padding-left: 25px; margin: 0;} } @media screen and (max-width:480px){ .business ul{padding: 45px 10px 10px 10px;} .business li{width:100%; padding:0; margin-bottom: 10px;} .business li .layer{left:0; right:0;} } /*** 메인 회사정보 ***/ .company{padding: 65px 0 0 0;} .company ul{padding:50px 15px 95px 15px; display: flex; justify-content: center;} .company li{flex: 1; padding:0 0 0 90px; margin-left: 90px; cursor: default; position: relative; border-left:1px #f3f3f3 solid;} .company li:first-child{padding:0; margin: 0; border:0;} .company li .ti{color:#1c1c1c; padding-top: 80px; font-size: 23px; line-height: 23px; font-weight: 700; display: block; transition:0.3s;} .company li:hover .ti{color: #39b0a8;} .company li:nth-child(1) .ti{background: url(../images/main_company_icon1.png) no-repeat;} .company li:nth-child(2) .ti{background: url(../images/main_company_icon2.png) no-repeat;} .company li:nth-child(3) .ti{background: url(../images/main_company_icon3.png) no-repeat;} .company li:nth-child(1):hover .ti{background: url(../images/main_company_icon1_.png) no-repeat;} .company li:nth-child(2):hover .ti{background: url(../images/main_company_icon2_.png) no-repeat;} .company li:nth-child(3):hover .ti{background: url(../images/main_company_icon3_.png) no-repeat;} .company li .txt{color:#7b7b7b; font-size: 15px; line-height: 24px; font-weight: 300; display: block; padding:15px 0 45px 0; letter-spacing: -1px;} .company li .bu_wrap{color:#3b3b3b; font-size: 12px; line-height: 12px; font-weight: 500; position: absolute; top:0; left:0; width:100%; height:100%; z-index: 10; display: flex; align-items: flex-end; padding: 0 0 0 90px;} .company li:first-child .bu_wrap{padding: 0;} .company li .bu_wrap .icon{position:absolute; top:0; right:0;} .company li .bu_wrap .icon span:nth-child(1){position:absolute; top:0; right:0; width:60px; height: 40px; background: url(../images/main_company_icon_arrow.png) no-repeat 13px center; transition:0.5s;} .company li .bu_wrap .icon span:nth-child(2){background:#e7f1f1; transition:0.2s; width:40px; height: 40px; border-radius: 20px;} .company li:hover .bu_wrap .icon span:nth-child(1){background-position: 28px center;} .company li:hover .bu_wrap .icon span:nth-child(2){background:#4aded4;} @media screen and (max-width:1200px){ .company ul{padding:50px 20px 95px 20px;} .company li{flex: 1; padding:0 0 0 30px; margin-left: 30px; cursor: default; position: relative; border-left:1px #f3f3f3 solid;} .company li .bu_wrap{padding: 0 0 0 30px;} } @media screen and (max-width:800px){ .company ul{display: block;padding:50px 0 95px 0;} .company li{flex:none; width: 100%; padding:50px 120px 0 40px; margin-left:0; border-left:0; margin-bottom: 50px; border-top:1px #f1f1f1 solid;} .company li:first-child{padding:50px 120px 0 40px; margin-bottom: 50px;} .company li .ti{padding:0 0 30px 80px;} .company li .txt{margin-top:-30px; padding-left: 80px;} .company li .bu_wrap{padding: 0 0 0 120px;} .company li:first-child .bu_wrap{padding-left: 120px;} .company li .bu_wrap .icon{position:absolute; top:50px; right:30px;} } @media screen and (max-width:480px){ .company li, .company li:first-child{padding:30px 40px 0 20px; margin-bottom: 30px;} .company li .ti{padding:80px 0 0 0;} .company li .txt{margin-top:0; padding-left: 0;} .company li .bu_wrap{padding: 0 0 0 20px;} .company li:first-child .bu_wrap{padding-left: 20px;} } /*** 메인 뉴스 ***/ .news{padding:90px 0 95px 0;} .news .bgbgbg{overflow: visible; position: absolute; top: 0; left:0; width: 100%; height: 100%; z-index: 0;} .news .bgbgbg .bg1{position:absolute; top: 0; left:50%; margin-left: -330px; width:100%; height:430px; background-color: #f3f7f7;} .news .bgbgbg .bg2{position:absolute; bottom: 65px; left:50%; margin-left: -510px; width:110px; height:130px; background-color: #4aded4;} .news h2{position: relative;} .news .arrow_wrap{display: flex; justify-content: center; padding: 30px 0;} .news .arrow_wrap .arrow{margin:0 3px; border:1px #e2e2e2 solid; background:#fff url(../images/main_news_arrow.png) no-repeat center center; transition:0.3s; width:43px; height:41px; cursor: pointer;} .news .arrow_wrap .left{} .news .arrow_wrap .right{transform:rotateY(180deg);} .news .arrow_wrap .arrow:hover{background:#4aded4 url(../images/main_news_arrow_.png) no-repeat center center; border:1px #e2e2e2 solid;} .news .cont_wrap{display:flex; justify-content: center;} .news li{padding:0 20px; width: 496px; cursor: pointer;} .news li .imgs{height:299px;border-top:1px #ebebeb solid;border-right:1px #ebebeb solid;border-left:1px #ebebeb solid} .news li .imgs img{transition:0.5s;width:100%} .news li:hover .imgs img{transform: scale(1.1);} .news li .txts{border:1px #ebebeb solid; padding: 20px; background-color: #fff;} .news li .txts em{font-size: 17px; line-height: 20px; font-weight: 700; color: #1c1c1c; display: block; margin-bottom: 10px;} .news li .txts span{font-size:15px; line-height: 23px; font-weight: 300; color: #7b7b7b; letter-spacing: -0.5px;} @media screen and (max-width:1000px){ .news .cont_wrap{display:block;} .news li{padding:0 10px; width:50%; margin-bottom: 0; float:left; } .news li .imgs img{width:100%;} .news li .txts span{height:50px; overflow: hidden;} } @media screen and (max-width:800px){ .news{padding:60px 0 95px 0;} .news .bgbgbg .bg1{left:30%; margin-left: 0;} .news .bgbgbg .bg2{bottom: 90px; left:0; margin-left: 0;} .news .cont_wrap{display:block;} .news li{padding:0 10px; width:100%; margin-bottom: 10px;} .news li .imgs img{width:100%;} } @media screen and (max-width:480px){ .news .bgbgbg .bg1{left:20%;} } /*** 메인 고객센터 ***/ .cscenter{} .cs_left{background: url(../images/main_cscenter_bg.jpg); width:50%; margin-left: -180px;} .cs_left .cs_tit_wrap{width:420px; height:385px; float:right; padding: 85px 0 0 0;} .cs_left .cs_tit_wrap h2 span{color:#fff; font-size: 13px; line-height: 13px; font-weight: 100;} .cs_left .cs_tit_wrap h2{color:#fff; font-size: 34px; line-height: 34px; font-weight: 700; align-items: flex-start;} .cs_left .cs_tit_wrap .ti_stxt{color:#fff; font-size: 16px; line-height: 20px; font-weight: 100; padding: 30px 0 55px 0;} .cs_left .cs_tit_wrap .qnabu{display: flex; align-items: center; justify-content: center; border:1px #fff solid; background: none; width: 220px; height: 56px; font-size: 17px; line-height: 17px; font-weight: 300; color:#fff; transition:0.2s;} .cs_left .cs_tit_wrap .qnabu:hover{border:28px #fff solid; color:#39b0a8;} .cs_right{background: #f3f7f6; width: 100%; left:50%; margin-left: -180px; position: absolute; top:70px;} .cs_right .cs_right_wrap{width:780px; height: 315px; padding:90px 0 0 60px;} .cs_right .cs_right_wrap .time{float:left; padding-right: 30px; border-right:1px #e2e2e2 solid; } .cs_right .cs_right_wrap .time .tel{background: url(../images/main_cscenter_icon_tel.png) no-repeat 0 center; font-size: 30px; line-height: 30px; font-weight: 700; color: #1c1c1c; padding: 5px 0 5px 50px; display: block; margin-bottom: 15px;} .cs_right .cs_right_wrap .time span{color:#1c1c1c; font-size: 17px; line-height: 25px; font-weight: 300; display: block; padding-left: 50px;} .cs_right .cs_right_wrap .time span:last-child{color:#6f6e6e; font-size: 16px; padding-top: 10px;} .cs_right .cs_right_wrap .addr{background: url(../images/main_cscenter_icon_map.png) no-repeat 40px 0; font-size: 15px; line-height: 25px; font-weight: 300; color: #1c1c1c; padding: 5px 0 5px 80px; float:left; font-style: normal; margin-top: 80px;} @media screen and (max-width:1200px){ .cs_left{width:50%; margin-left: 0; float:left;} .cs_left .cs_tit_wrap{width:auto; float:none; padding: 80px 0 0 20px;} .cs_right{left:0; margin-left: 0; position:relative; top:0; padding-bottom: 30px; width:50%; margin-top: 40px;} .cs_right .cs_right_wrap{width:100%; height: 315px; padding:50px 0 0 60px;} .cs_right .cs_right_wrap .time{float:left; padding-right: 30px; border-right:0; } .cs_right .cs_right_wrap .time .tel{background: url(../images/main_cscenter_icon_tel.png) no-repeat 0 center; font-size: 30px; line-height: 30px; font-weight: 700; color: #1c1c1c; padding: 5px 0 5px 50px; display: block; margin-bottom: 15px;} .cs_right .cs_right_wrap .time span{color:#1c1c1c; font-size: 17px; line-height: 25px; font-weight: 300; display: block;} .cs_right .cs_right_wrap .time span:last-child{color:#6f6e6e; font-size: 16px; padding-top: 10px;} .cs_right .cs_right_wrap .addr{background: url(../images/main_cscenter_icon_map.png) no-repeat 0 0; font-size: 15px; line-height: 25px; font-weight: 300; color: #1c1c1c; padding: 5px 0 5px 40px; margin-top: 30px;} } @media screen and (max-width:800px){ .cs_left{width:100%; margin-left: 0; padding-bottom: 50px;} .cs_left .cs_tit_wrap{width:auto; height:auto; float:none; padding: 70px 0 0 0;} .cs_left .cs_tit_wrap h2{align-items: center;} .cs_left .cs_tit_wrap .ti_stxt{text-align: center; width: 100%;} .cs_left .cs_tit_wrap .qnabu{margin:auto;} .cs_right{left:0; margin-left: 0; position:relative; top:0; padding-bottom: 30px;} .cs_right{width:100%;} .cs_right .cs_right_wrap{width:auto; height: auto; padding:30px 40px 0 40px;} .cs_right .cs_right_wrap .time{padding:0 0 30px 0; border-bottom: 1px #e2e2e2 solid; border-right:0; width: 100%;} .cs_right .cs_right_wrap .addr{background: url(../images/main_cscenter_icon_map_mobile.png) no-repeat 0 0; padding: 5px 0 5px 50px; margin-top: 30px;} } @media screen and (max-width:480px){ .cs_left .cs_tit_wrap h2{font-size: 26px;} .cs_left .cs_tit_wrap .ti_stxt{font-size: 14px;} .cs_left .cs_tit_wrap .qnabu{font-size: 15px;} .cs_right .cs_right_wrap{padding:30px 10px 0 10px;} .cs_right .cs_right_wrap .time .tel{font-size: 26px;} .cs_right .cs_right_wrap .time span{font-size: 15px;} .cs_right .cs_right_wrap .time span:last-child{font-size: 15px;} .cs_right .cs_right_wrap .addr{font-size: 15px;} } /*** 푸터 ***/ .bottom{background-color: #2d2d2d;} .bottom .wrap_{padding: 35px 15px;} .bottom address{color:#f2f2f2;font-style:normal;} .bottom address p{font-size:15px;margin-top:5px;} .bottom .bottom_navi{float:left; overflow: visible;} .bottom .bottom_navi li{float:left; border-left:1px #626262 solid; line-height: 10px; overflow: visible;} .bottom .bottom_navi li a{padding: 0 15px; font-size: 15px; font-weight: 100; color: #f2f2f2; overflow: visible; transition:0.3s;} .bottom .bottom_navi li a:hover{color: #999;} .bottom .bottom_navi li:first-child{border-left:0;} .bottom .bottom_navi li:first-child a{padding-left: 0;} .bottom .copy{clear:both; float: left; padding-top: 30PX;} .bottom .copy, .bottom .copy em{color:#8e8e8e; font-size:13px; line-height: 15px; font-weight: 100;} .bottom .family_site{background: #494949 url(../images/footer_select_icon.png) no-repeat right center; border:1px #525252 solid; color:#fff; padding: 0 40px 0 15px;-webkit-appearance: none; -moz-appearance: none; appearance: none; width:200px; height:40px; position: absolute; right:15px; top:50%; margin-top: -20px; cursor: pointer;} .bottom .family_site::-ms-expand {display:none;} @media screen and (max-width:800px){ .bottom {text-align: center;} .bottom .bottom_navi{display: flex; justify-content: center; width: 100%;} .bottom .bottom_navi li{float:none;} .bottom .copy{float: none; display: block; width: 100%; text-align: center;} .bottom .family_site{position: relative; right:0; top:0; margin: 50px auto 0 auto; clear: both;} } @media screen and (max-width:480px){ .bottom {text-align: center;} .bottom .bottom_navi{display: flex; justify-content: center; width: 100%;} .bottom .bottom_navi li{float:none;} .bottom .bottom_navi li a{padding: 0 5px; font-size: 13px;} .bottom .copy{float: none; display: block; width: 100%; text-align: center;} .bottom .copy em, .bottom .copy{color:#8e8e8e; font-size:11px; line-height: 15px;} .bottom .family_site{position: relative; right:0; top:0; margin: 50px auto 0 auto; clear: both;} } @media screen and (max-width:320px){ .bottom .bottom_navi{display: flex; flex-direction: column; align-items: flex-start; width: 100%;} .bottom .bottom_navi li{width:100%; text-align: left; margin-bottom: 15px; padding-left: 20px !important; border:0;} .bottom .bottom_navi li a{padding:0;} } /*** 스크롤탑 ***/ .scrolltop{position: fixed; left:50%; margin-left:620px; bottom:10%; background: #39b0a8 url(../images/scrolltop_icon.png) no-repeat center center; width: 62px; height:62px; border-radius: 35px; box-shadow:rgba(0,0,0,0.5) 3px 3px 5px; cursor: pointer; z-index: 800;} @media screen and (max-width:1420px){ .scrolltop{left:auto; right:28px; margin-left:0;} } @media screen and (max-width:800px){ .scrolltop{width:50px; height:50px;} } @media screen and (max-width:480px){ .scrolltop{width:40px; height:40px; right:15px; background-size: 30%;} } /* 모바일 사이드 스르륵 메뉴 */ .mobile_slide_menu{position:fixed; width:100%; height:100%; top: 0; left:100%; z-index: 1001; transition: 0.5s;} .mobile_slide_menu.open{left:0;} .mobile_slide_menu .bgscreen{position:fixed; top: 0; right:-100%; width:100%; height:100%; background: #000; opacity: 0;} .mobile_slide_menu.open .bgscreen{position:fixed; top: 0; right:0; width:100%; height:100%; background: #000; opacity: 0.8; z-index: 1000;} .slide_menu_wrap{position:absolute; top:0; right:-100%; width:50%; height:100%; background: #fff; opacity:1; transition:0.3s; z-index: 1001;} .mobile_slide_menu.open .slide_menu_wrap{right:0;} .slide_menu_wrap .left_navi_top{ height:60px;} .slide_menu_wrap .left_navi_top .close_bu{position: absolute; top:0; right:0; width:60px; height:60px; background: url(../images/close_bu_icon.png) no-repeat center center; background-size: 60% auto; cursor: pointer;} .slide_menu_wrap .left_navi{width:100%; overflow: hidden; border-top:1px #000 solid; padding-top: 5px;} .slide_menu_wrap .left_navi li{position: relative; width:100%; min-height: 50px; overflow: hidden; border-bottom:1px #eee solid;} .slide_menu_wrap .left_navi li > a{float:left; width:100%; height:50px; font-size: 20px; font-weight: 400; color: #000; display: flex; align-items: center; padding: 0 20px; transition: 0.2s;} .slide_menu_wrap .left_navi li:first-child a{background: none;} .slide_menu_wrap .left_navi li a:hover{text-decoration: none; cursor: pointer; color:#39b0a8;} .slide_menu_wrap .left_navi li .submenu{position:relative; margin: 0;} .slide_menu_wrap .left_navi .submenu li{min-height: 30px;transition:0.5s; border:0; background-color:#f2f2f2;/*border-top:1px #e1e1e1 solid; background: #f2f2f2 url(../images/left_navi_submenu_bgicon.gif) no-repeat 20px center; padding-left: 20px;*/} .slide_menu_wrap .left_navi .submenu>li:first-child{padding-top:15px;} .slide_menu_wrap .left_navi .submenu>li:last-child{padding-bottom:15px;} .slide_menu_wrap .left_navi li .submenu li a{height:40px;background: none; text-align: center; font-size: 16px; font-weight: 300; transition: 0.2s;} .slide_menu_wrap .left_navi li .submenu li ul li{padding-left:20px;} .slide_menu_wrap .left_navi li .submenu li ul li a{height:30px;background: none; text-align: center;color:#ababab; font-size: 14px; font-weight: 300; transition: 0.2s;} .slide_menu_wrap .left_navi li .submenu li ul li a:hover{color:#191919} @media screen and (max-width:420px){ .slide_menu_wrap{width:85%;} .slide_menu_wrap .left_navi li{position: relative; width:100%; min-height: 50px; overflow: hidden; border-bottom:1px #eee solid;} .slide_menu_wrap .left_navi li > a{font-size: 14px;} .slide_menu_wrap .left_navi li .submenu li a{font-size: 13px;} } /***** 서브 본문 상단 *****/ .sub_top{overflow: visible; text-align: center; z-index: 100;} .sub_top .sub_visual{height: 326px;} .sub_top .sub_visual img{width:100%; height:100%; object-fit: cover;} .sub_top .sub_visual h1{font-size: 52px; line-height: 52px; color:#fff; font-weight: 700; position: absolute; top:50%; left:0; width:100%; text-align: center; margin-top: -35px; cursor: default;} .sub_top .location{border: 1px #f1f1f1 solid; margin-top: -33px; background-color: #fff; box-shadow: rgba(0,0,0,0.05) 5px 5px 30px; overflow: visible; display: inline-block; padding: 0;} .sub_top .location .lh{ text-align:left;height:65px; font-size: 17px; color: #212121;} .sub_top .location .home{float:left; width:65px; background: #fff url(../images/location_icon1.png) no-repeat center center; box-shadow:rgba(0,0,0,0.1) 3px 0 5px; text-indent: -1000px; overflow: hidden;} .sub_top .location .parent{ border-right:1px solid #eee;padding: 0 50px 0 20px;float:left; width:200px; display: flex; align-items: center; /*background: url(../images/location_icon2.gif) no-repeat right center;*/ padding-right: 20px; cursor: default; font-weight: 300;} .sub_top .location .selected{border-right:1px solid #eee;padding: 0 50px 0 20px; float:left; width: 214px; display: flex; align-items: center; background: #fff url(../images/location_icon2.png) no-repeat 180px center; cursor: pointer; font-weight: 500; position: relative;} .sub_top .location .select_menu{float:left; position: absolute; top:65px; left:0px; border: 1px #ccc solid; border-top: 0; width: 214px; box-shadow: rgba(0,0,0,0.1) 3px 3px 10px; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 1000;} .sub_top .location .selected:hover .select_menu{opacity: 1; visibility: visible;} .sub_top .location .select_menu li{ padding: 0 50px 0 20px; background: rgba(255,255,255,1); border-top: 1px #eee solid; display: flex; align-items: center; text-align: left; height:1px; /*height:1px;*/ transition:0.3s;} .sub_top .location .selected:hover li{height:65px;} .sub_top .location .select_menu li:first-child{ border-top:0} .sub_top .location .select_menu li.selected_li{background: #fff url(../images/location_icon3.png) no-repeat 180px center;cursor: default;} .sub_top .location .select_menu li a{width:100%;line-height:52px;font-size:17px; color:#212121; font-weight: 500;text-align: left; float: left; transition:0.3s;} .sub_top .location .select_menu li:hover a{color:#10ccbe;} .sub_top .location .select_menu li.selected_li a{cursor: default; color: #10ccbe;} .sub_top .location span:last-child > a{ color:#39b0a8;} .sub_top .location span:last-child{background: #fff url(../images/location_icon3.png) no-repeat 180px center;} @media screen and (max-width:920px){ #span_select_menu_3{display:none;} } @media screen and (max-width:880px){ .sub_top .sub_visual{height: 200px; transition:0.3s;} .sub_top .sub_visual h1{font-size: 36px; line-height: 36px; margin-top: -32px;} .sub_top .location .lh{ height:50px; font-size: 14px;} .sub_top .location .home{width:50px;border-right:1px #eee solid;} .sub_top .location .parent{width:150px;} .sub_top .location .selected{width: 150px;padding:0 30px 0 15px;background: #fff url(../images/location_icon2.png) no-repeat 120px center;background-size:10%; position: relative;} .sub_top .location span:last-child{background: #fff url(../images/location_icon3.png) no-repeat 120px center;} .sub_top .location .select_menu{left:0px; width: 150px; top:50px;} .sub_top .location .select_menu li a{font-size:14px;} .sub_top .location .select_menu li{padding:0 30px 0 15px;} .sub_top .location .select_menu li.selected_li{background: #fff url(../images/location_icon3.png) no-repeat 120px center;background-size:10%; cursor: default;} .sub_top .location .selected:hover li{height:50px;} } @media screen and (max-width:500px){ .sub_top .location .lh{ height:50px; font-size: 13px;} .sub_top .location .home{width:50px; box-shadow: none; border-right:1px #eee solid;} .sub_top .location .parent{width:100px;display:none;} .sub_top .location .selected{width: 150px; padding:0 30px 0 10px; position: relative;} .sub_top .location .select_menu{left:0px; width: 150px; top:50px;} .sub_top .location .select_menu li a{font-size:14px;} .sub_top .location .selected:hover li{height:50px;} } /***** 경영이념/비전 *****/ .company_vision .vision{padding:70px 0 0 0;} .company_vision .vision .wrap_{overflow: visible;} .vision .motto{margin-top: 75px;} .vision .tit{background: url(../images/sub_tit_icon.png) no-repeat; font-size: 26px; line-height: 28px; font-weight: 700; color:#1c1c1c; padding: 10px 0 20px 0;} .vision .motto .motto_cont_wrap{overflow:visible;} .vision .motto .motto_cont_wrap .bg1{width:175px; height: 130px; background-color: #2dcabf; position:absolute; bottom:-20px; right: -20px;} .vision .motto .motto_txt{padding: 0 50% 65px 65px; overflow: hidden; display: block; position: relative; z-index: 10; background: #fff;} .vision .motto .motto_txt img{width:100%; float:left;} .vision .motto .motto_txt figcaption{position:absolute; left:55%; width:45%; height: 100%; padding: 0 65px 65px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;} .vision .motto .motto_txt strong{font-size: 33px; line-height: 35px; color:#1b1b1b; font-weight: 700; float:left; padding-right: 10px; letter-spacing: -1px;} .vision .motto .motto_txt em{font-size: 33px; line-height: 35px; color:#949494; font-weight: 700; float:left; letter-spacing: -1px;} .vision .motto .motto_txt span{font-size: 17px; line-height: 26px; color:#7b7b7b; font-weight: 300; clear: both; float:left; width: 100%; text-align: left; padding-top: 15px;} @media screen and (max-width:1000px){ .vision .motto .motto_txt strong{font-size: 30px; line-height: 36px;} .vision .motto .motto_txt em{font-size: 30px; line-height: 36px;} .vision .motto .motto_txt span{font-size: 15px; line-height: 24px;} } @media screen and (max-width:800px){ .vision .motto .motto_txt{padding: 0 40px 40px 40px; display: flex; align-content: center; justify-content: center; flex-direction: column;} .vision .motto .motto_txt figcaption{position:relative; left:auto; width:100%; height: auto; padding: 20px 20px; display:inline-block; align-items: center; justify-content: center; flex-direction: column;} .vision .motto .motto_txt strong{float:none;} .vision .motto .motto_txt em{float:none;} .vision .motto .motto_txt span{ text-align:center;} } @media screen and (max-width:640px){ .vision .motto .motto_txt{padding: 0 20px 20px 20px;} } @media screen and (max-width:480px){ .vision .motto .motto_txt{padding: 0 0 20px 0;} } .vision .motto .mind{width:100%; display: flex; align-items: center; justify-content: center; z-index: 1; background: #f3f7f7; margin-top: -80px; overflow: hidden; padding: 150px 0 60px 0;} .vision .motto .mind li{margin: 0 65px;} .vision .motto .mind li strong{width:168px; height: 168px; padding-top: 65%; text-align: center; font-size: 21px; font-weight: 700; color: #1b1b1b; display: block; border-radius: 100px; position: relative;} .vision .motto .mind li:nth-child(1) strong{background: #fff url(../images/vision_motto_icon1.png) no-repeat center 35%;} .vision .motto .mind li:nth-child(2) strong{background: #fff url(../images/vision_motto_icon2.png) no-repeat center 35%;} .vision .motto .mind li:nth-child(3) strong{background: #fff url(../images/vision_motto_icon3.png) no-repeat center 35%;} .vision .motto .mind li strong span{background: url(../images/vision_motto_bg_rotation.png) no-repeat center center; position: absolute; width: 169px; height:169px; top: 0; left:0;} .vision .motto .mind li em { display: block; text-align: center; color:#545454; font-size: 17px; font-weight: 400; padding-top: 20px;} @media screen and (max-width:1000px){ .vision .motto .mind{justify-content:space-around;} .vision .motto .mind li{margin:0;} } @media screen and (max-width:640px){ .vision .motto .mind li strong{width:120px; height: 120px; font-size: 16px;} .vision .motto .mind li strong span{width: 122px; height:122px; background-size: 100%;} } @media screen and (max-width:480px){ .vision .motto .mind{flex-direction: column;} .vision .motto .mind li{margin:10px 0;} .vision .motto .mind li strong{width:180px; height: 180px; font-size: 16px;} .vision .motto .mind li strong span{width: 182px; height:182px; background-size: 100%;} .vision .motto .mind li em {padding-top: 10px;} } .vision .motto .keyword{padding:60px 0 70px 0; overflow: hidden;} .vision .motto .keyword li{width:50%; float:left; display: flex; justify-content: center; position: relative; padding-bottom: 60px;} .vision .motto .keyword li .bg{padding:20px; background: #fff url(../images/vision_motto_boxbg1.gif) no-repeat 0 bottom;} .vision .motto .keyword li:nth-child(2) .bg{background-position: right 0;} .vision .motto .keyword li .bg img{} .vision .motto .keyword li div{position:absolute; right:0; bottom:0; background: #fff; padding: 30px; width: 420px; height: 250px;} .vision .motto .keyword li div .ti{background: url(../images/vision_motto_vision_icon1.gif) no-repeat 0 center; padding-left: 50px;} .vision .motto .keyword li:nth-child(2) div .ti{background: url(../images/vision_motto_vision_icon2.gif) no-repeat 0 center;} .vision .motto .keyword li div .ti span{display: block; color:#39b0a8; font-size: 13px; font-weight: 500; line-height: 11px; letter-spacing: 2px;} .vision .motto .keyword li div .ti em{display: block; color:#1c1c1c; font-size: 26px; font-weight: 700; line-height: 30px; padding-top: 7px;} .vision .motto .keyword li div .txt{color:#3a3a3a; font-size: 17px; line-height: 26px; padding-top: 20px;} @media screen and (max-width:1050px){ .vision .motto .keyword li{width:50%; float:left; display: flex; justify-content: center; position: relative;} .vision .motto .keyword li .bg img{width:100%; height:100%; object-fit: cover;} } @media screen and (max-width:1000px){ .vision .motto .keyword li div{width:90%; height: 70%;} .vision .motto .keyword li div .txt{font-size: 14px; height: 22px;} } @media screen and (max-width:640px){ .vision .motto .keyword li{width:100%; display: block; padding-bottom: 30px;} .vision .motto .keyword li .bg{width:100%; display: block;} .vision .motto .keyword li div{position:relative; width:85%; height: 55%; flex: none; display: block; margin: -200px 0 0 15%; min-height:210px;} } @media screen and (max-width:420px){ .vision .motto .keyword li{} .vision .motto .keyword li div{padding:20px;} .vision .motto .keyword li div .txt{line-height: 20px;} } .vision .action{padding-bottom:100px;} .vision .action .wrap_{overflow: visible;} .vision .action .img_wrap{overflow: visible;} .vision .action .img_wrap img{} .vision .action .img_wrap .txt_wrap{position: absolute; right:0; bottom:0; background: #14b9ad; border:34px #fff solid; border-bottom:0; border-right:0; padding: 60px;} .vision .action .img_wrap .txt_wrap span{color:#fff; font-size: 13px; line-height: 15px; font-weight: 500; letter-spacing: 4px; display: block;} .vision .action .img_wrap .txt_wrap em{color:#fff; font-size: 36px; line-height: 40px; font-weight: 100; display: block; padding: 20px 0 10px 0; letter-spacing: -1px;} .vision .action .img_wrap .txt_wrap strong{color:#fff; font-size: 36px; line-height: 40px; font-weight: 700; display: block; letter-spacing: -1px} @media screen and (max-width:1070px){ .vision .action .wrap_, .vision .action .img_wrap{overflow: hidden;} .vision .action .img_wrap img{object-fit: cover;} } @media screen and (max-width:640px){ .vision .action .img_wrap .txt_wrap{border-width:20px; padding: 40px;} } @media screen and (max-width:480px){ .vision .action .img_wrap img{width:150%; margin-left: -25%;} .vision .action .img_wrap .txt_wrap{position: relative; border-left: 0;} } @media screen and (max-width:420px){ .vision .action .img_wrap .txt_wrap span{font-size: 13px; line-height: 15px;} .vision .action .img_wrap .txt_wrap em{font-size: 26px; line-height: 30px;} .vision .action .img_wrap .txt_wrap strong{font-size: 26px; line-height: 30px;} } @media screen and (max-width:360px){ .vision .action .img_wrap .txt_wrap{border-width:10px; padding: 20px;} } /***** 인재상 *****/ .company_people .people{padding: 70px 0 135px 0;} .company_people .people .tit.ac{background: url(../images/sub_tit_icon2.png) no-repeat center 0; font-size: 33px; line-height: 28px; font-weight: 700; color:#1c1c1c; padding: 10px 0 20px 0; display: block; text-align: center; margin-top: 75px;} .company_people .people .tit_stxt{color:#7b7b7b; font-size: 17px; line-height: 25px; font-weight: 300; display: block; text-align: center; padding-bottom: 45px;} .company_people .people .img_wrap{background: url(../images/people_imgwrap_bg.gif) no-repeat center center; width: 1200px; height: 693px; position:relative;} .company_people .people .img_wrap li{top:50%; left:50%; position: absolute; width:170px; height: 170px; overflow: visible;} .company_people .people .img_wrap li strong{width:170px; height: 170px; padding-top: 60%; background: #fff; border:2px #39b0a8 solid; font-size: 21px; font-weight: 500; color: #1b1b1b; text-align: center; border-radius: 90px;} .company_people .people .img_wrap li span{font-size:17px; line-height: 23px; font-weight: 400; color: #545454; position: absolute; } .company_people .people .img_wrap li:nth-child(1){margin-left: -85px; margin-top:-235px;} .company_people .people .img_wrap li:nth-child(2){margin-left: -220px; margin-top:10px;} .company_people .people .img_wrap li:nth-child(3){margin-left: 45px; margin-top:10px;} .company_people .people .img_wrap li:nth-child(1) strong{ background: #fff url(../images/people_imgwrap_icon1.gif) no-repeat center 30%;} .company_people .people .img_wrap li:nth-child(2) strong{background: #fff url(../images/people_imgwrap_icon2.gif) no-repeat center 30%;} .company_people .people .img_wrap li:nth-child(3) strong{background: #fff url(../images/people_imgwrap_icon3.gif) no-repeat center 30%;} .company_people .people .img_wrap li:nth-child(1) span{top:60px; left:180px; width: 250px; text-align: left;} .company_people .people .img_wrap li:nth-child(2) span{top:180px; left:-45px; width: 250px; text-align: center;} .company_people .people .img_wrap li:nth-child(3) span{top:180px; left:-35px; width: 250px; text-align: center;} @media screen and (max-width:1200px){ .company_people .people .wrap_{padding-bottom: 693px;} .company_people .people .img_wrap{position:absolute; left:50%; margin-left: -600px;} } @media screen and (max-width:640px){ .company_people .people .wrap_{padding-bottom: 553px;} .company_people .people .tit_stxt br{display: none;} .company_people .people .img_wrap{transform: scale(0.8); margin-top: -70px;} .company_people .people .img_wrap li:nth-child(1) span{width: 150px;} } @media screen and (max-width:420px){ .company_people .people{padding: 70px 0 70px 0;} .company_people .people .wrap_{padding-bottom: 493px;} .company_people .people .tit_stxt {font-size: 15px; line-height: 23px; padding-bottom: 30px;} .company_people .people .img_wrap{transform: scale(0.7); margin-top: -100px;} } @media screen and (max-width:360px){ .company_people .people .wrap_{padding-bottom: 433px;} .company_people .people .img_wrap{transform: scale(0.6); margin-top: -130px;} } /***** 회사 연혁 *****/ .company_history .history{padding: 70px 0 135px 0;} .company_history .history .tabmenu{border:1px #e6e6e6 solid; overflow: hidden; margin: 60px 0 45px 0;} .company_history .history .tabmenu li{background: #fff; color:#565656; font-size: 17px; line-height: 20px; font-weight: 400; width: 33.33%; height:60px; float:left; border-left:1px #e6e6e6 solid; display: flex; align-items: center; justify-content: center; cursor: pointer;} .company_history .history .tabmenu li:first-child{border-left:0;} .company_history .history .tabmenu li.select{color:#fff; background: #39b0a8; cursor: default; font-weight: 700;} .company_history .history .banner{padding:0 24px 24px 0; background: url(../images/vision_motto_boxbg1.gif) no-repeat right bottom;} .company_history .history .history_list{margin-top:45px;} .company_history .history .history_list > li{ padding-left: 31%; position: relative; min-height: 100px;} .company_history .history .history_list .hti{position:absolute; top: 0; left:0; width:30%; border-top:2px #39b0a8 solid; color:#39b0a8; font-size: 44px; font-weight: 700; line-height: 44px; padding-top: 15px;} .company_history .history .history_list .h_list_view{border-top:1px #e3e3e3 solid; padding: 15px 0; overflow: hidden;} .company_history .history .history_list .h_list_view li{font-size:16px; line-height: 30px; color:#555; padding: 0 10px 0 30px; background: url(../images/history_list_icon1.gif) no-repeat 15px 13px;} @media screen and (max-width:1200px){ .company_history .history .wrap_{padding: 0;} .company_history .history .banner{background-size: auto 50%; padding: 0 20px 20px 20px;} .company_history .history .banner img{width: 100%;} } @media screen and (max-width:800px){ .company_history .history .history_list > li{ padding-left:0; min-height: 140px;border-top:1px #e3e3e3 solid;} .company_history .history .history_list .hti{position:relative; width:100px; font-size: 36px; line-height: 36px; padding-top: 10px; margin-top: -1px;} .company_history .history .history_list .h_list_view{border-top:0;} .company_history .history .history_list .h_list_view li{font-size:16px; line-height: 22px; margin-bottom: 10px;} } @media screen and (max-width:640px){ .company_history .history .banner{padding: 0; background: none;} .company_history .history .banner img{height:150px; width: 100%; object-fit: cover;} } @media screen and (max-width:480px){ .company_history .history{padding: 70px 0;} .company_history .history .tabmenu li{font-size: 14px; height:50px; text-align: center;} .company_history .history .history_list .hti{font-size: 26px; line-height: 26px;} .company_history .history .history_list .h_list_view li{font-size:14px; line-height: 20px; background-position:15px 9px;} } /***** 회장인사 *****/ .company_ceo{} .company_ceo .ceo{padding:70px 0 0 0;} .company_ceo .ceo .greeting{margin-top:60px; padding:0 40px 0 40px; overflow: visible;} .company_ceo .ceo .greeting .photo_wrap{padding:10px 20px 20px 20px; background: url(../images/vision_motto_boxbg1.gif) no-repeat right bottom; float:right; margin-bottom: 20px;} .company_ceo .ceo .greeting .photo_wrap img{} .company_ceo .ceo .greeting img{margin-top: 20px;} .company_ceo .ceo .greeting strong{color:#2d2c2c; font-size: 32px; line-height: 43px; font-weight: 700; letter-spacing: -1px; display:inherit;} .company_ceo .ceo .greeting strong span{color:#2dcabf; font-size: 32px; line-height: 43px; font-weight: 700;} .company_ceo .ceo .greeting p{color:#555; font-size: 16px; line-height: 25px; font-weight: 300; margin-top: 40px; display:inherit;} .company_ceo .ceo .profile{background: #f3f7f7; overflow: visible; text-align: center; margin-top: 200px; padding-bottom: 140px;} .company_ceo .ceo .profile .photo_wrap{display:inline-block; margin-top: -150px;} .company_ceo .ceo .profile .photo_wrap img{width:100%; height: 100%; object-fit: cover;} .company_ceo .ceo .profile .profile_txt{background: #f3f7f7; padding: 40px 135px 0 255px; text-align: left; left: 100px; margin-top: -70px;} .company_ceo .ceo .profile .profile_txt .tit{position:absolute; top:40px; left:45px; background: url(../images/sub_tit_icon.png) no-repeat; font-size: 26px; line-height: 28px; font-weight: 700; color:#1c1c1c; padding-top: 10px;} .company_ceo .ceo .profile .profile_txt p{padding-top: 10px; color: #555; font-size: 16px; font-weight: 300; line-height: 25px; letter-spacing: -1px;} @media screen and (max-width:1200px){ .company_ceo .ceo .greeting .photo_wrap{background-size: 50% auto;} .company_ceo .ceo .greeting .photo_wrap img{width:35vw;} .company_ceo .ceo .profile .photo_wrap{padding:0;} } @media screen and (max-width:1000px){ .company_ceo .ceo .profile .profile_txt{padding: 40px 80px 0 210px; left: 50px;} } @media screen and (max-width:800px){ .company_ceo .ceo .greeting{padding:0 30px 0 30px;} } @media screen and (max-width:640px){ .company_ceo .ceo .greeting .photo_wrap, .company_ceo .ceo .greeting .photo_wrap img{width:100%;} .company_ceo .ceo .profile{padding-bottom: 100px;} .company_ceo .ceo .profile .photo_wrap{display:flex; align-items: center; justify-content: center;} .company_ceo .ceo .profile .photo_wrap img{width:150%;} .company_ceo .ceo .profile .profile_txt{margin-top: -50px; padding: 40px 80px 0 45px;} .company_ceo .ceo .profile .profile_txt p{padding-top: 60px; word-break: break-all;} } @media screen and (max-width:480px){ .company_ceo .ceo .greeting{padding:0 20px 0 20px;} .company_ceo .ceo .greeting .photo_wrap{padding:10px 10px 10px 10px;} .company_ceo .ceo .greeting strong, .company_ceo .ceo .greeting strong span{font-size: 24px; line-height: 36px;} .company_ceo .ceo .greeting p{font-size: 14px; line-height: 22px; margin-top: 30px;} .company_ceo .ceo .profile .profile_txt{margin-top: -50px; padding: 40px 60px 0 45px; left:30px;} .company_ceo .ceo .profile .profile_txt p{font-size: 14px; line-height: 22px; letter-spacing: 0;} } @media screen and (max-width:420px){ .company_ceo .ceo .greeting strong, .company_ceo .ceo .greeting strong span{font-size: 20px; line-height: 30px;} .company_ceo .ceo .profile .photo_wrap img{width:200%;} } @media screen and (max-width:360px){ .company_ceo .ceo .greeting strong, .company_ceo .ceo .greeting strong span{font-size: 18px; line-height: 26px;} .company_ceo .ceo .greeting p{margin-top: 20px;} .company_ceo .ceo .profile .profile_txt{margin-top: 0; padding: 40px 20px 0 20px; left:0;} .company_ceo .ceo .profile .profile_txt .tit{top:30px; left:20px;} .company_ceo .ceo .profile .profile_txt p{padding-top: 50px;} } /***** 경영진 소개 *****/ .company_executives .executives{padding:70px 0 70px 0;} .company_executives .executives .greetings{background: url(../images/Executives_bg1.jpg) no-repeat center bottom; padding-bottom: 435px;} .company_executives .executives .greetings .wrap_{padding:60px 0 70px 0; border-top:1px #f1f1f1 solid;} .company_executives .executives .greetings .wrap_:first-child{border:0;} .company_executives .executives .greeting_area{position:absolute; right:470px; left:70px; top: 135px; bottom:0; background: #fff; z-index: 2; padding: 25px 70px 0 0;} .company_executives .executives .greeting_area .name{ margin-top: 20px;} .company_executives .executives .greeting_area .name em{float:left; font-size: 17px; font-weight: 500; line-height: 21px; color:#1a1a1a; padding-right: 10px; margin-right: 10px; border-right:1px #ccc solid;} .company_executives .executives .greeting_area .name strong{float:left; font-size: 21px; font-weight: 700; line-height: 21px; color:#1a1a1a;} .company_executives .executives .greeting_area .name span{float:left; font-size: 17px; font-weight: 400; line-height: 21px; color:#6b6b6b; padding-left: 5px;} .company_executives .executives .greeting_area .ti{font-size:27px; line-height: 40px; font-weight: 300; color:#171717; padding-top: 20px; letter-spacing: -1px;} .company_executives .executives .greeting_area .ti span{font-weight: 500;} .company_executives .executives .greeting_area .txt{font-size:16px; line-height: 25px; font-weight: 300; color:#555; padding-top: 30px; letter-spacing: -1px;} .company_executives .executives .photo_wrap{float: right; margin-right: 70px; z-index: 1; padding: 0 20px 20px 0; background: url(../images/vision_motto_boxbg1.gif) no-repeat right bottom;} .company_executives .executives .photo_wrap img{width:100%;} .company_executives .executives .executives_list{margin-top:-320px;} .company_executives .executives .executives_list .tit{background: url(../images/sub_tit_icon.png) no-repeat; font-size: 26px; line-height: 28px; font-weight: 700; color:#1c1c1c; padding: 10px 0 0 0;} .company_executives .executives .executives_list ul{background: #fff; padding: 65px 125px; overflow: hidden; margin-top: 40px;} .company_executives .executives .executives_list li{width:27%; margin: 0 3% 6% 3%; float:left;} .company_executives .executives .executives_list .box{border:1px #eee solid; background: #fff;} .company_executives .executives .executives_list .img_wrap{border-radius:170px; width:168px; height: 168px; background: #f1f1f1; display: flex; align-items: flex-end; justify-content: center; margin: 20px auto;} .company_executives .executives .executives_list .img_wrap img{object-fit: cover;} .company_executives .executives .executives_list .box > span{background: #f3f7f7; width:100%; display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; border-top:1px #eee solid;} .company_executives .executives .executives_list .box .line{padding-top: 15px; border-top:3px #25c2b7 solid; width:50px; margin-top: -2px;} .company_executives .executives .executives_list .box em{display:block; color:#25c2b7; font-size: 14px; line-height: 15px; font-weight: 500; padding-bottom: 5px;} .company_executives .executives .executives_list .box span span{color:#555; font-size: 15px; line-height: 15px; font-weight: 500;} .company_executives .executives .executives_list .box span span strong{color:#2f2f2f; font-size: 19px; line-height: 20px; font-weight: 700;} @media screen and (max-width:1200px){ .company_executives .executives .executives_list.wrap_{width: 90%;} .company_executives .executives .executives_list ul {padding: 65px 55px;} } @media screen and (max-width:1100px){ .company_executives .executives .greetings .wrap_:first-child{padding-bottom:130px;} .company_executives .executives .greeting_area .ti{font-size:24px;} } @media screen and (max-width:1000px){ .company_executives .executives .greeting_area{right:350px; left:40px; padding: 0 20px 0 0; top: 60px;} .company_executives .executives .greeting_area .ti{font-size:24px; line-height: 30px;} .company_executives .executives .photo_wrap{margin-right: 40px; width: 350px; background-size: 50% auto; padding: 0 15px 15px 0;} .company_executives .executives .executives_list ul {padding: 20px 10px;} .company_executives .executives .executives_list li {width: 30.33%; margin: 0 1.5% 3% 1.5%;} } @media screen and (max-width:800px){ .company_executives .executives .greetings .wrap_{display:flex; flex-direction: column; padding: 70px 20px 0 20px;} .company_executives .executives .greetings .wrap_:first-child{padding-bottom:0;} .company_executives .executives .greeting_area{position:relative; right:auto; left:auto; padding: 30px 0 70px 0; top:auto; order:2;} .company_executives .executives .photo_wrap{margin-right: 0; width: 100%; order:1;} .company_executives .executives .executives_list.wrap_{width: 98%;} .company_executives .executives .executives_list li {width: 46%; margin: 0 2% 4% 2%;} } @media screen and (max-width:640px){ .company_executives .executives .executives_list .box em{font-size: 13px;} } @media screen and (max-width:480px){ .company_executives .executives .greetings .wrap_{padding: 70px 0 0 10px;} .company_executives .executives .greeting_area{padding: 30px 20px 70px 10px;} .company_executives .executives .executives_list.wrap_{width: 99%;} .company_executives .executives .executives_list ul {padding: 20px 20px;} .company_executives .executives .executives_list li {width: 100%; margin: 0 0 20px 0;} .company_executives .executives .executives_list .box span span{font-size: 14px;} .company_executives .executives .executives_list .box span span strong{font-size: 16px;} } @media screen and (max-width:420px){ .company_executives .executives .greeting_area .name em{font-size: 14px;} .company_executives .executives .greeting_area .name strong{font-size: 16px;} .company_executives .executives .greeting_area .name span{font-size: 13px;} .company_executives .executives .greeting_area .ti{font-size:20px; line-height: 32px;} .company_executives .executives .greeting_area .txt{font-size:14px; line-height: 23px; padding-top: 20px;} } @media screen and (max-width:360px){ .company_executives .executives .greeting_area{padding: 30px 10px 70px 0;} .company_executives .executives .greeting_area .ti br{display:none;} } /***** 사업장위치 안내 *****/ .company_map .map{padding: 70px 0 135px 0;} .company_map .map .tit{background: url(../images/sub_tit_icon.png) no-repeat; font-size: 26px; line-height: 28px; font-weight: 700; color:#1c1c1c; padding: 10px 0 20px 0; margin-top: 60px; display: block;} .company_map .map .map_img_wrap{width:100%; height: 400px; display: flex; align-items: center; justify-content: center; z-index: 10;} .company_map .map .map_img_wrap div{overflow: visible;} .company_map .map .map_img_wrap .root_daum_roughmap{width: 1200px !important;} .company_map .map .office_info{padding:0 20px 20px 20px; margin-top:-100px; z-index: 100; background: url(../images/vision_motto_boxbg1.gif) no-repeat right bottom;} .company_map .map .office_info .office_info_area{background: #fff; padding: 30px 25px 40px 25px; color:#111; box-shadow: rgba(0,0,0,0.1) 5px 5px 20px; border:1px #eaf0f0 solid;} .company_map .map .office_info .ti{font-size: 23px; line-height: 23px; font-weight: 700; border-bottom:1px #ebebeb solid; padding: 0 0 15px 5px; width: 100%;} .company_map .map .office_info .office{float:left;} .company_map .map .office_info .tel{padding:0 40px 0 50px; background: url(../images/map_infoicon_tel.png) no-repeat 10px 5px; margin-top: 20px; float:left;} .company_map .map .office_info .tel li{font-size:20px; line-height: 28px; font-weight: 500;} .company_map .map .office_info .tel li:first-child{font-size:25px; line-height: 28px; font-weight: 700;} .company_map .map .office_info .address{padding:0 40px 0 50px; background: url(../images/map_infoicon_adress.png) no-repeat 15px 5px; font-size:16px; line-height: 24px; font-weight: 500; margin-top: 20px; float:left;} .company_map .map .office_info .car{float:left; margin-top: 10px; padding-right: 20px;} .company_map .map .office_info .subway{padding:0 0 0 50px; background: url(../images/map_infoicon_subway.png) no-repeat 10px 0; margin-top: 10px; overflow: hidden;} .company_map .map .office_info .subway li:first-child{font-size:15px; line-height: 20px; font-weight: 300; margin-top: 5px; float: left; margin:0 0 5px 0px;} .company_map .map .office_info .subway li{font-size:15px; line-height: 20px; font-weight: 300; margin-top: 5px; float: left; margin:0 0 5px 10px;} .company_map .map .office_info .subway li.green1{background: url(../images/map_infoicon_subway_green1.png) no-repeat 0 center; padding-left: 25px;} .company_map .map .office_info .subway li.blue1{background: url(../images/map_infoicon_subway_blue1.png) no-repeat 0 center; padding-left: 25px;} .company_map .map .office_info .subway li.green2{background: url(../images/map_infoicon_subway_green2.png) no-repeat 0 center; padding-left: 25px;} .company_map .map .office_info .subway li.green2b{background: url(../images/map_infoicon_subway_green2.png) no-repeat 0 center,url(../images/map_infoicon_subway_b.png) no-repeat 22px center; padding-left: 47px; margin-left: 0;} .company_map .map .office_info .bus{padding:0 0 0 50px; background: url(../images/map_infoicon_bus.png) no-repeat 10px 0; margin-top: 10px;} .company_map .map .office_info .bus li{clear:both; display: flex; align-items: flex-start; margin-top: 5px;} .company_map .map .office_info .bus li em{font-size:12px; line-height: 12px; font-weight: 700; color:#fff; width: 30px; height: 18px; border-radius: 2px; float:left; margin-right: 7px; display: flex; align-items: center; justify-content: center;} .company_map .map .office_info .bus li em.busStop01{background-color: #309feb;} .company_map .map .office_info .bus li em.busStop02{background-color: #4ec64e;} .company_map .map .office_info .bus li em.busStop03{background-color: #b16d79;} .company_map .map .office_info .bus li em.busStop04{background-color: #e4822b;} .company_map .map .office_info .bus li em.busStop05{background-color: #23a9a5;} .company_map .map .office_info .bus li em.busStop06{background-color: #ce2222;} .company_map .map .office_info .bus li span{font-size:15px; line-height: 18px; font-weight: 300; float:left;} .company_map .map .bgbg{position: absolute; background: #f3f7f7; width:100%; height: 500px; z-index: 1; bottom:0;} @media screen and (max-width:1200px){ .company_map .map .tit{margin-left:20px;} .company_map .map .map_img_wrap{position: relative;} .company_map .map .office_info{} } @media screen and (max-width:1000px){ .company_map .map .office_info .office .address{clear:both;} } @media screen and (max-width:480px){ .company_map .map{padding: 70px 0;} .company_map .map .map_img_wrap{height: 300px;} .company_map .map .office_info{ margin: -50px 0 0 0; width: 100%; height: auto; box-shadow: none; padding: 0 15px 15px 15px; box-shadow: rgba(0,0,0,0.03) 0 0 10px;} .company_map .map .office_info .subway li{float: none; margin:0 0 5px 0; padding-left: 47px !important;} .company_map .map .bgbg{ height:0;display:none;width:0;} } @media screen and (max-width:420px){ .company_map .map{padding-bottom: 0;} .company_map .map .office_info{padding:0; margin-top: 0;} .company_map .map .office_info .office_info_area{padding:30px 10px 50px 10px;} .company_map .map .office_info .ti{font-size: 16px; line-height: 20px;} .company_map .map .office_info .tel{padding:0 0 0 30px; background-position:0 5px;} .company_map .map .office_info .tel li{font-size:16px;} .company_map .map .office_info .address{padding:0 0 0 30px; background-position:0 5px;} .company_map .map .office_info .subway{padding:0 0 0 30px; background-position:0 0;} .company_map .map .office_info .bus{padding:0 0 0 30px; background-position:0 0;} .company_map .map .office_info .bus li{padding-left:40px; position: relative;} .company_map .map .office_info .bus li em{position: absolute; top: 1px; left:0; font-size:12px; line-height: 12px; font-weight: 700; width: 30px; height: 18px; border-radius: 2px; float:left; margin-right: 7px; display: flex; align-items: center; justify-content: center;} .company_map .map .office_info .bus li span{font-size:15px; line-height: 18px; font-weight: 300; float:left;} } /***** 스카우트 *****/ .company_scout .scout{background: #f3f7f7 url(../images/scout_bg.gif) repeat-x; background-size: auto 420px;} .company_scout .scout .tit{background: url(../images/sub_tit_icon.png) no-repeat; font-size: 26px; line-height: 28px; font-weight: 700; color:#1c1c1c; padding: 10px 0 20px 0; margin-top: 60px;} .company_scout .scout{padding: 70px 0 130px 0;} .company_scout .scout .banner{padding:0 0px 24px 0; /*background: url(../images/vision_motto_boxbg1.gif) no-repeat right bottom;*/} .company_scout .scout .banner img{max-width: 100%; box-shadow: rgba(0,0,0,0.1) 5px 5px 20px;} .company_scout .scout .bu_wrap{ text-align: right; padding: 22px 0px 50px 0; display: flex; align-content: center; justify-content: flex-end;} .company_scout .scout .bu_wrap button{font-size:17px; line-height: 17px; font-weight: 300; width:220px; height: 60px; padding-right: 50px; border-radius: 0;} .company_scout .scout .bu_wrap button:nth-child(1){font-size:17px; line-height: 17px; font-weight: 300; width:220px; height: 60px; margin-right: 15px; padding-right: 50px; border-radius: 0;} .company_scout .scout .bu_wrap .down_ai{color:#fff; background:#39b0a8 url(../images/logo_down_icon1.png) no-repeat 90% center; border:1px #39b0a8 solid;} .company_scout .scout .bu_wrap .down_jpg{color:#161616; background: url(../images/logo_down_icon2.png) no-repeat 90% center; border:1px #999 solid; transition: 0.5s;} .company_scout .scout .bu_wrap .down_ai{color:#fff; background:#39b0a8 url(../images/logo_down_icon1.png) no-repeat 90% center; border:1px #39b0a8 solid; transition: 0.5s;} .company_scout .scout .bu_wrap .down_ai:hover{background-color: #0d9289; border-color:#0d9289;} .company_scout .scout .bu_wrap .down_jpg:hover{background-color: #aef7f2;} .company_scout .scout .scout_introduce{padding-left:45%; background: url(../images/scout_introduce_img1.jpg) no-repeat; background-size: 45% auto;} .company_scout .scout .koreaems_introduce{padding-left:45%; background: url(../images/koreaems_introduce_img1.jpg) no-repeat; background-size: 45% auto;} .company_scout .scout .platformers_introduce{padding-left:45%; background: url(../images/platformers_introduce_img2.jpg) no-repeat; background-size: 45% auto; height: 380px;} .company_scout .scout .veteranscout_introduce{padding-left:45%; background: url(../images/veteranscout_introduce_img1.jpg) no-repeat; background-size: 45% auto;} .company_scout .scout .scout_introduce p{font-size: 17px; line-height: 25px; font-weight: 300; color:#616161; padding-left: 30px; padding-bottom: 20px;} .company_scout .scout .koreaems_introduce p{font-size: 17px; line-height: 25px; font-weight: 300; color:#616161; padding-left: 30px; padding-bottom: 20px;} .company_scout .scout .platformers_introduce p{font-size: 17px; line-height: 25px; font-weight: 300; color:#616161; padding-left: 30px; padding-bottom: 20px;} .company_scout .scout .veteranscout_introduce p{font-size: 17px; line-height: 25px; font-weight: 300; color:#616161; padding-left: 30px; padding-bottom: 20px;} .scout .global_introduce {padding-left: 45%; background: url(../images/global_introduce_img2.jpg) no-repeat; background-size: 45% auto; height: 380px;} .global_introduce p{font-size: 17px; line-height: 25px; font-weight: 300; color:#616161; padding-left: 30px; padding-bottom: 20px;} @media screen and (max-width:1000px){ .company_scout .scout{background-size: auto 350px;} .company_scout .scout .bu_wrap{background: #f3f7f7;} .company_scout .scout .scout_introduce{padding-left:45%; background-color:#f3f7f7;} .company_scout .scout .koreaems_introduce{padding-left:45%; background-color:#f3f7f7;} .company_scout .scout .platformers_introduce{padding-left:45%; background-color:#f3f7f7; height: auto;} .company_scout .scout .veteranscout_introduce{padding-left:45%; background-color:#f3f7f7;} .company_scout .scout .banner{padding:0 20px 20px 0; background-size: auto 50%;} } @media screen and (max-width:800px){ .company_scout .scout .wrap_{overflow: visible;} .company_scout .scout .scout_introduce{padding:80% 0 0 0; background-size: 100% auto;} .company_scout .scout .koreaems_introduce{padding:80% 0 0 0; background-size: 100% auto;} .company_scout .scout .platformers_introduce{padding:80% 0 0 0; background-size: 100% auto; height: auto;} .company_scout .scout .veteranscout_introduce{padding:80% 0 0 0; background-size: 100% auto;} .company_scout .scout .banner{display: flex; align-items: center; justify-content: center; background: none; overflow: visible;} .company_scout .scout .banner img{width: 760px; max-width: none;} .company_scout .scout .bu_wrap{background: #f3f7f7; text-align: center;} .company_scout .scout .scout_introduce p{padding-left: 0;} .company_scout .scout .koreaems_introduce p{padding-left: 0;} .company_scout .scout .platformers_introduce p{padding-left: 0;} .company_scout .scout .veteranscout_introduce p{padding-left: 0;} } @media screen and (max-width:640px){ .company_scout .scout{background-size: auto 300px;} .company_scout .scout .bu_wrap{background: #f3f7f7; text-align: center;display: flex; align-content: center; justify-content: center;} .company_scout .scout .bu_wrap button{font-size:14px; line-height: 14px; width:180px; height: 45px; padding-right: 40px;} .company_scout .scout .bu_wrap button:nth-child(1){font-size:14px; line-height: 14px; width:180px; height: 45px; padding-right: 40px;} } @media screen and (max-width:480px){ .company_scout .scout .tit{font-size: 20px; line-height: 24px;} .company_scout .scout .bu_wrap button{width:46%; margin: 0 2%; float:left;} .company_scout .scout .scout_introduce p{font-size: 14px;} .company_scout .scout .koreaems_introduce p{font-size: 14px;} .company_scout .scout .platformers_introduce p{font-size: 14px; height: auto;} .company_scout .scout .veteranscout_introduce p{font-size: 14px;} } @media screen and (max-width:420px){ .company_scout .scout{background-size: auto 270px;} .company_scout .scout .banner img{width: 550px;} .company_scout .scout .bu_wrap button{width:170px; float:none; display: block; margin:0 auto 10px auto;} } /***** CI 소개 *****/ .company_ci .ci{padding: 70px 0 0 0;} .company_ci .ci .citdc{z-index: 2; overflow: visible;} .company_ci .ci .citdc .wrap_{padding: 60px 0 80px 0; background: #fff; box-shadow: rgba(0,0,0,0.03) 0 5px 3px;} .company_ci .ci .citdc img{margin: auto;} .company_ci .ci .citdc p{text-align: center; font-size: 17px; line-height: 28px; font-weight: 300; color: #555; letter-spacing: -1px; padding: 45px 10px 0 10px;} .company_ci .ci .ci_area{background: #f3f7f7; margin-top: -100px; z-index: 1; padding: 100px 0 175px 0;} .company_ci .ci .ci_area .wrap_{overflow: visible;} .company_ci .ci .ci_area .bgbox{background: #2dc9be; width: 175px; height: 125px; position: absolute; top:-100px; right:-25px;} .company_ci .ci .ci_area .tit{background: url(../images/sub_tit_icon.png) no-repeat; font-size: 26px; line-height: 28px; font-weight: 700; color:#1c1c1c; padding: 10px 0 20px 0; margin-top: 100px;} .company_ci .ci .ci_area .imgs{margin-top:40px;} .company_ci .ci .ci_area .imgs li{float: left; margin-bottom: 80px;} .company_ci .ci .ci_area .imgs li:nth-child(1), .company_ci .ci .ci_area .imgs li:nth-child(3){width:55%; padding-right: 5%;} .company_ci .ci .ci_area .imgs li:nth-child(2), .company_ci .ci .ci_area .imgs li:nth-child(4){width:45%;} .company_ci .ci .ci_area .imgs li em{float:left; font-size: 18px; font-weight: 400; color:#3d3c3c; letter-spacing: -1px; word-spacing: -2px;} .company_ci .ci .ci_area .imgs li span{float:right;} .company_ci .ci .ci_area .imgs li span img{} .company_ci .ci .ci_area .bu_wrap{ text-align: right; clear: both;} .company_ci .ci .ci_area .bu_wrap button{font-size:17px; line-height: 17px; font-weight: 300; margin-left: 15px; width:220px; height: 60px; padding-right: 50px; border-radius: 0;} .company_ci .ci .ci_area .bu_wrap .down_ai{color:#fff; background:#39b0a8 url(../images/logo_down_icon1.png) no-repeat 90% center; border:1px #39b0a8 solid;} .company_ci .ci .ci_area .bu_wrap .down_jpg{color:#161616; background: url(../images/logo_down_icon2.png) no-repeat 90% center; border:1px #999 solid; transition: 0.5s;} .company_ci .ci .ci_area .bu_wrap .down_ai{color:#fff; background:#39b0a8 url(../images/logo_down_icon1.png) no-repeat 90% center; border:1px #39b0a8 solid; transition: 0.5s;} .company_ci .ci .ci_area .bu_wrap .down_ai:hover{background-color: #0d9289; border-color:#0d9289;} .company_ci .ci .ci_area .bu_wrap .down_jpg:hover{background-color: #aef7f2;} @media screen and (max-width:1200px){ .company_ci .ci .ci_area .bgbox{width: 80%; height: 120px; right:-20px;} .company_ci .ci .ci_area .imgs li{display: flex; flex-direction: column; align-items: center;} .company_ci .ci .ci_area .imgs li em{margin-bottom: 10px;} .company_ci .ci .ci_area .imgs li span img{width: 100%;} .company_ci .ci .ci_area .bu_wrap{text-align: center;} } @media screen and (max-width:800px){ .company_ci .ci .citdc p{font-size: 16px;} .company_ci .ci .citdc p br:nth-child(3){display:none;} } @media screen and (max-width:640px){ .company_ci .ci .ci_area .tit{width:100%; text-align: center; background-position: center 0;} .company_ci .ci .ci_area .imgs li{width:100% !important;} .company_ci .ci .ci_area .imgs li:nth-child(1), .company_ci .ci .ci_area .imgs li:nth-child(3){padding-right:0;} .company_ci .ci .ci_area .bu_wrap button{font-size:14px; line-height: 14px; width:180px; height: 45px; padding-right: 40px;} } @media screen and (max-width:535px){ .company_ci .ci .citdc p br{display:none;} } @media screen and (max-width:480px){ .company_ci .ci .ci_area .bgbox{height: 110px;} .company_ci .ci .ci_area .imgs li{margin-bottom: 40px;} .company_ci .ci .ci_area .imgs li em{font-size: 16px;} .company_ci .ci .ci_area .bu_wrap button{width:46%; margin: 0 2%; float:left;} } @media screen and (max-width:420px){ .company_ci .ci .ci_area .bu_wrap button{width:170px; float:none; display: block; margin:0 auto 10px auto;} } /***** contact us *****/ .contact_us .contactus{padding: 70px 0 0 0;} .contact_us .contactus .cs_top{overflow: visible; z-index: 2;} .contact_us .contactus .photo_wrap{padding-top: 65px;} .contact_us .contactus .photo_wrap img{} .contact_us .contactus .box_wrap{ position: absolute; right:-50px; bottom:-50px; padding: 20px; background: url(../images/vision_motto_boxbg1.gif) no-repeat right bottom;} .contact_us .contactus .box_wrap .box{background: #fff; padding: 30px 40px; width: 645px;} .contact_us .contactus .box_wrap .box > strong{background: url(../images/sub_tit_icon.png) no-repeat; color:#1c1c1c; font-size: 22px; font-weight: 700; line-height: 28px; padding-top: 10px;} .contact_us .contactus .box_wrap .box > p{color:#1c1c1c; font-size: 15px; font-weight: 300; line-height: 24px; padding: 15px 0 20px 0;} .contact_us .contactus .box_wrap .box div{float:left;} .contact_us .contactus .box_wrap .box .tel_time{ margin-right: 30px; padding-bottom: 10px;} .contact_us .contactus .box_wrap .box div strong{color:#1c1c1c; font-size: 25px; font-weight: 700; line-height: 27px; padding:0 0 0 30px; margin-bottom: 10px; display: block;} .contact_us .contactus .box_wrap .box div span{color:#1c1c1c; font-size: 14px; font-weight: 400; line-height: 19px; padding-left: 30px; display: block;} .contact_us .contactus .box_wrap .box .tel_time .icon{background: url(../images/contactus_icon_tel.png) no-repeat 0 center;} .contact_us .contactus .box_wrap .box .mail .icon{background: url(../images/contactus_icon_mail.png) no-repeat 0 center; font-size: 16px; font-weight: 500;} .contact_us .contactus .write_area{background: #f3f7f7; padding:365px 0 140px 0; z-index: 1; margin-top: -235px;} .contact_us .contactus .write_area .write_wrap{background: #fff; padding: 55px 0 0 0; text-align: center;} .contact_us .contactus .write_area .write_wrap .line{width: 800px; padding:7px 10px 7px 100px; margin: auto; position: relative; margin-bottom: 1px;} .contact_us .contactus .write_area .write_wrap .p50{width: 398px; display: inline-block;} .contact_us .contactus .write_area .write_wrap .ti{position:absolute; left:10px; padding: 10px 15px 10px 0; background: url(../images/contactus_icon_chk.png) no-repeat right center;} .contact_us .contactus .write_area .write_wrap input{width:100%; height: 43px; border:1px #e5e5e5 solid; border-radius: 2px; padding: 0 15px; color: #2d2d2d; font-size: 17px; font-weight: 300;} .contact_us .contactus .write_area .write_wrap .tel input{width:80px; float:left; text-align: center;} .contact_us .contactus .write_area .write_wrap .tel span{width:10px; height: 10px; float:left; border-bottom:1px #ccc solid; margin: 12px 5px 0 5px;} .contact_us .contactus .write_area .write_wrap textarea{width:100%; height: 192px; border:1px #e5e5e5 solid; border-radius: 2px; padding:15px; resize: none; color: #2d2d2d; font-size: 17px; line-height: 25px; font-weight: 300;} .write_area .agree_area{background: #fff; padding:50px 0 55px 0; text-align: center;} .write_area .agree_wrap{width:800px; margin: auto; text-align: left;} .write_area .agree_wrap .ti{display:block; font-size: 17px; font-weight: 500; color:#171717;} .write_area .agree_wrap label{color:#3e3d3d; font-size: 16px; font-weight: 400; line-height: 20px; display: flex; align-content: center; padding: 25px 0 10px 0;} .write_area .agree_wrap label input{width:20px; height: 20px; float: left; margin-right: 10px;} .write_area .agree_wrap .tbox{width:100%; height: 100px; min-height:150px; background: #fff; border:1px #e1e1e1 solid; padding: 20px; opacity:initial} .write_area .agree_wrap .tbox .txt_wrap{font-size: 14px; line-height: 25px; font-weight: 300; color:#6d6d6d; height:300px; overflow: hidden;} .write_area .bu_wrap{} .write_area .bu_wrap .write_ok{cursor:pointer;width:400px; height: 55px; border: 0; color:#fff; font-size: 18px; font-weight: 500; background: #39b0a8; border-radius:3px; margin-top: 50px; opacity:1; transition:0.3s linear 0s opacity;} .write_area .bu_wrap .write_ok:hover{background: #0d9289;} @media screen and (max-width:1300px){ .contact_us .contactus .box_wrap { right: -20px; } } @media screen and (max-width:1200px){ .contact_us .contactus .box_wrap { right: 0; } .contact_us .contactus .write_area{padding-bottom: 0;} } @media screen and (max-width:800px){ .contact_us .contactus .box_wrap { width: 85%; } .contact_us .contactus .box_wrap .box{width: auto;} .contact_us .contactus .write_area .write_wrap .line{width: 100%;} .write_area .agree_wrap{width: 100%; padding: 0 10px;} .write_area .bu_wrap{width: 100%; padding: 0 10px;} } @media screen and (max-width:640px){ .contact_us .contactus .box_wrap { bottom: -150px; } .contact_us .contactus .write_area{padding-top: 400px;} } @media screen and (max-width:480px){ .contact_us .contactus .box_wrap .box{padding: 20px;} .contact_us .contactus .box_wrap .box > strong{font-size: 18px;} .contact_us .contactus .box_wrap .box > p{font-size: 14px;} .contact_us .contactus .box_wrap .box div strong{font-size: 18px;} .contact_us .contactus .box_wrap .box div span{font-size: 13px;} .contact_us .contactus .box_wrap .box .mail .icon{font-size: 14px;} .contact_us .contactus .write_area .write_wrap .line{padding: 7px 10px;} .contact_us .contactus .write_area .write_wrap .line .ti{position: relative; float: left;} .contact_us .contactus .write_area .write_wrap .tel input:nth-child(2){clear:both;} .write_area .agree_wrap .tbox{min-height: 300px;} } @media screen and (max-width:420px){ .contact_us .contactus .cs_top.wrap_{padding: 0;} .contact_us .contactus .box_wrap{width: auto;} .contact_us .contactus .box_wrap .box{padding: 30px 20px;} .contact_us .contactus .box_wrap .box > strong{font-size: 18px;} .contact_us .contactus .box_wrap .box > p{font-size: 14px;} .contact_us .contactus .box_wrap .box div strong{font-size: 18px;} .contact_us .contactus .box_wrap .box div span{font-size: 13px;} .contact_us .contactus .box_wrap .box .mail .icon{font-size: 14px;} .write_area .bu_wrap .write_ok{width: 100%;} } @media screen and (max-width:320px){ .contact_us .contactus .write_area .write_wrap .tel input{width:70px;} } #scoutstory {overflow:hidden;} #news {width:35%;margin-right:5%;float:left;} #news>div {width:100%;height:100%;position:relative;} #news>div div:nth-child(2) img {width:100%} #news>div div:nth-child(3) {width:86%;padding:0 7%;font-size:24px;color:#ffffff;position:absolute;left:0%;bottom:25%;z-index:10000;} #news>div div:nth-child(4) {width:86%;padding:0 7%;color:#ffffff;position:absolute;bottom:10%;left:0%;z-index:10000;} #news div .bg_black {height:100%;position:absolute;top:0;left:0;z-index:1000;width:100%;background-color:rgba(0,0,0,0.3);} #notice {width:60%;float:left;} #notice ul {border-top:2px solid #333333;} #notice ul li {display:table;width:100%;padding:18px 0;overflow:hidden;border-bottom:1px solid #e1e1e1;} #notice ul li div:nth-child(1) {display:table-cell;width:80%;font-size:20px;} #notice ul li div:nth-child(2) {letter-spacing:0;display:table-cell;text-align:right;width:20%;color:#888888;} #scoutstory {overflow:hidden;} #news {width:40%;margin-right:5%;float:left;} #news>div {width:100%;height:100%;position:relative;} #news>div div:nth-child(2) img {width:100%} #news>div div:nth-child(3) {width:86%;padding:0 7%;font-size:24px;color:#ffffff;position:absolute;left:0%;bottom:35%;z-index:10000;} #news>div div:nth-child(4) {width:86%;padding:0 7%;color:#ffffff;position:absolute;bottom:10%;left:0%;z-index:10000;} #news div .bg_black {height:100%;position:absolute;top:0;left:0;z-index:100;width:100%;background-color:rgba(0,0,0,0.3);} #notice {width:55%;float:left;} #notice ul {border-top:2px solid #333333;} #notice ul li {display:table;width:100%;padding:20px 0;overflow:hidden;border-bottom:1px solid #e1e1e1;} #notice ul li div:nth-child(1) {display:table-cell;width:80%;font-size:18px;} #notice ul li div:nth-child(2) {letter-spacing:0;display:table-cell;text-align:right;width:20%;color:#888888;} @media all and (max-width: 1024px) { #news{width:45%;margin-right:5%;} #notice{width:50%;margin:0;} #notice ul li div:nth-child(1) {font-size:1em;} #notice ul li div:nth-child(2) {font-size:0.9em;} } @media all and (max-width: 768px) { #news, #notice{width:100%;margin:0;float:none;} #notice ul li div:nth-child(1) {font-size:1em;} #notice ul li div:nth-child(2) {font-size:0.9em;} #news>div div:nth-child(2){height:300px;} } #gallery ul {overflow:hidden;} #gallery ul li {width:30%;float:left;border:1px solid #e1e1e1;margin:0 4.5% 4.5% 0;} #gallery ul li.none{width:100%;text-align:center;padding:30px 0;color:#888888;font-size:20px} #gallery ul li:nth-child(3n){margin:0;} #gallery ul li:nth-child(4), #gallery ul li:nth-child(5) {margin-bottom:0;} #gallery ul li img {width:100%;} #gallery ul li>a>div:nth-child(1) {position:relative;overflow:hidden;} #gallery ul li>a>div:nth-child(1) .bg_black {display:none;width:100%;background-color:rgba(0,0,0,0.3);position:absolute;top:0;left:0;height:100%;} #gallery ul li>a>div:nth-child(2) {padding:5%;color:#2e2e2e;} #gallery ul li>a>div:nth-child(2) .title {font-family:"NotoSansKR-Bold";font-weight:600;font-size:20px} #gallery ul li>a>div:nth-child(2) div:nth-child(2) {overflow:hidden;} #gallery ul li>a>div:nth-child(2) .date {float:left;font-weight:300;color:#888888;letter-spacing:0;} #gallery ul li>a>div:nth-child(2) .sector {float:right;text-align:right;} #gallery ul li:hover div:nth-child(1) .bg_black {display:block;} #gallery ul li img {object-fit:cover;transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transition: all .5s ease-in-out;} #gallery ul li:hover img {transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);} @media all and (max-width: 1400px) { #gallery ul li{width:47%} #gallery ul li:nth-child(3n) {margin:0 40px 40px 0;} #gallery ul li:nth-child(2n) {margin:0 0 40px 0;} #gallery ul li>a>div:nth-child(1) {height:295px;} #gallery ul li img {width:100%;min-height:295px} } @media all and (max-width: 1000px) { #gallery ul li>a>div:nth-child(1) {height:265px;} #gallery ul li img {width:100%;min-height:265px} } @media all and (max-width: 820px) { #gallery ul li{width:100%;margin:0 auto 40px auto;float:none;} #gallery ul li:nth-child(3n), #gallery ul li:nth-child(2n) {margin:0 auto 40px auto;} #gallery ul li>a>div:nth-child(1) {height:245px;} #gallery ul li img{min-height:245px} #gallery ul li>a>div:nth-child(2) .title {font-size:1em;margin-bottom:5px;} #gallery ul li>a>div:nth-child(2) .date {font-size:0.9em} #gallery ul li>a>div:nth-child(2) .sector {font-size:0.9em} } h3 {margin: 80px 0 20px 0; font-size: 24px; font-family: "NotoSansKR-Bold";} h4 {margin: 80px 0 20px 0; font-size: 22px; font-weight:600; font-family: "NotoSansKR-Bold";} .more{display:inline-block;float:right} .more a {line-height:1.5;color: #666666; display: inline-block; font-size: 16px; background: url("../images/icon_more.gif") no-repeat right 0; padding-right: 30px; font-weight: 100; font-family: "NotoSansKR-Light"} #notice_list ul {border-top:2px solid #333333;} #notice_list ul li {line-height:1;display:table;width:100%;padding:24px 0;overflow:hidden;border-bottom:1px solid #e7e7e7;} #notice_list ul li:hover {background-color:#f9f9f9;} #notice_list ul li>div:nth-child(1) {display:table-cell;text-align:center;vertical-align:middle;width:10%;font-size:20px;} #notice_list ul li>div:nth-child(2) {display:table-cell;width:75%;} #notice_list ul li>div:nth-child(2) p:nth-child(1) {margin-top:10px;font-size:24px;margin-bottom:20px;color:#2e2e2e;} #notice_list ul li>div:nth-child(2) p:nth-child(2) {color:#666666} #notice_list ul li>div:nth-child(3) {display:table-cell;letter-spacing:0;text-align:center;vertical-align:middle;width:15%;color:#888888;} #notice_list ul li .none{text-align:center;color:#888888;font-size:20px;padding:10px 0;} #notice_view {margin-top:60px;border-bottom:1px solid #e7e7e7;border-top:2px solid #333333} #notice_view img{max-width:100%;} #notice_view .title {line-height:28px;font-size:22px;font-weight:600;border-bottom:1px solid #e7e7e7;padding:30px 3%;width:94%;} #notice_view .title span {letter-spacing:0;font-size:16px;font-weight:400;float:right;color:#666666} #notice_view .contents {padding:30px 3%;width:94%;} #notice_view .contents img{max-width:100%} @media all and (max-width: 820px) { #notice_list ul li {line-height:1;display:table;width:100%;padding:24px 0;overflow:hidden;border-bottom:1px solid #e7e7e7;} #notice_list ul li>div:nth-child(1){display:none} #notice_list ul li>div:nth-child(2) {width:100%;display:block} #notice_list ul li>div:nth-child(3) {display:block;font-size:0.9em;margin-top:10px;text-align:left;width:100%;} #notice_list ul li>div:nth-child(2) p:nth-child(1) {font-size:1.2em;line-height:1.4em;margin:0 0 10px 0 ;} #notice_list ul li>div:nth-child(2) p:nth-child(2){line-height:1.2em;font-weight:300;} #notice_view .title {line-height:1.4em;font-size:1.2em;padding:20px 3%;width:94%;} #notice_view .title span {float:none;display:block;margin-top:10px;} } .result {overflow:hidden;margin:60px 0 10px 0;} .result .total {width:20%;letter-spacing:0;float:left;font-weight:500;} .result .total span {color:#39b0a8 ;font-size:24px;} .result .search {width:80%;float:right;text-align:right;} .result .search select{width:10%;appearance:auto;-webkit-appearance:auto;} @media all and (max-width: 820px) { .result .total {font-size:0.9em;width:100%;margin-bottom:20px;letter-spacing:0;float:none;font-weight:500;} .result .total span {color:#39b0a8 ;font-size:1.2em;} .result .search {width:100%;float:none;text-align:right;font-size:0.9em;} .result .search select{width:15%;appearance:auto;-webkit-appearance:auto;font-size:1.2em;} .result .search input[type="text"]{width:50%;font-size:1.2em;} } /* .pf_band ul li img {width: 100%;} .pf_band .cont_wrap{display: flex;justify-content: center;} .pf_band li .cont_wrap{display:flex; justify-content: center;} .pf_band li:nth-child(1){padding:50px 15px 0 0; width: 496px; cursor: pointer;} .pf_band li:nth-child(2){padding:50px 15px; width: 496px; cursor: pointer;} .pf_band li:nth-child(3){padding:50px 0 0 15px; width: 496px; cursor: pointer;} */ /*** 메인 뉴스 ***/ .pf_band{padding:7.5% 0% 7.5% 0%;} .pf_band .bgbgbg{overflow: visible; position: absolute; top: 0; left:0; width: 100%; height: 100%; z-index: 0;} .pf_band .bgbgbg .bg1{position:absolute; top: 0; left:50%; margin-left: -330px; width:100%; height:430px; background-color: #f3f7f7;} .pf_band .bgbgbg .bg2{position:absolute; bottom: 65px; left:50%; margin-left: -510px; width:110px; height:130px; background-color: #4aded4;} .pf_band h2{position: relative;} .pf_band .arrow_wrap{display: flex; justify-content: center; padding: 30px 0;} .pf_band .arrow_wrap .arrow{margin:0 3px; border:1px #e2e2e2 solid; background:#fff url(../images/main_news_arrow.png) no-repeat center center; transition:0.3s; width:43px; height:41px; cursor: pointer;} .pf_band .arrow_wrap .right{transform:rotateY(180deg);} .pf_band .arrow_wrap .arrow:hover{background:#4aded4 url(../images/main_news_arrow_.png) no-repeat center center; border:1px #e2e2e2 solid;} .pf_band .cont_wrap{display: flex; justify-content: space-between; flex-wrap: wrap;} .pf_band li{padding:0 0px; width: 32%; cursor: pointer;} .pf_band li .imgs{ display: flex; justify-content: center; align-items: center; width: 100%; border-right: 1px #ebebeb solid; background-color: white; border-left: 1px #ebebeb solid; border-top: 1px #ebebeb solid;} .pf_band li .imgs img{transition:0.5s; padding: 11% 0%; width: 50%;}/*width:100%;*/ .pf_band li:hover .imgs img{transform: scale(1.1);} .pf_band li .txts{height: 75%; border:1px #ebebeb solid; padding: 20px; background-color: #fff;} .pf_band li .txts em{font-size: 17px; line-height: 20px; font-weight: 700; color: #1c1c1c; display: block; margin-bottom: 10px;} .pf_band li .txts span{font-size:15px; line-height: 23px; font-weight: 300; color: #7b7b7b; letter-spacing: -0.5px;} @media screen and (max-width:1000px){ .pf_band .cont_wrap{display:block;} .pf_band li{padding:0 10px; width:50%; margin-bottom: 20px; float:left; margin-bottom: 20px;} .pf_band li:nth-child(1){padding:0px 10px 0px 0px; width:50%; margin-bottom: 20px; float:left; margin-bottom: 20px;} .pf_band li .imgs img{padding: 11% 0%;}/*width:100%;*/ .pf_band li .txts span{height:50px; overflow: hidden;} } @media screen and (max-width:800px){ .pf_band{padding:60px 0 95px 0;} .pf_band .bgbgbg .bg1{left:30%; margin-left: 0;} .pf_band .bgbgbg .bg2{bottom: 90px; left:0; margin-left: 0;} .pf_band .cont_wrap{display:block;} .pf_band li{padding:0 0px; width:100%; margin-bottom: 10px;} .pf_band li:nth-child(1){padding:0 0px; width:100%; margin-bottom: 10px;} .pf_band li .imgs img{padding: 11% 0%;}/*width:100%;*/ } @media screen and (max-width:480px){ .pf_band .bgbgbg .bg1{left:20%;} } @media all and (max-width: 768px) { dl.txtbold dt span{font-size:0.9em;} } #service_part ul {overflow: hidden; display: flex; flex-wrap: wrap; align-items: stretch;} #service_part ul li {width: 29%; float: left; border: 1px solid #e7e7e7; margin: 0 6% 6% 0;} #service_part ul li:nth-child(3n) {margin: 0 0% 6% 0;} #service_part ul li p{overflow:hidden;width:100%} #service_part ul li a:hover img{transform:scale(1.3);transition:1s;} #service_part ul li img {width: 100%;} #service_part ul li>a{color:#2e2e2e} #service_part ul li div {padding: 5%;} #service_part ul li div div {font-weight: 600; font-size: 20px;padding:0;} @media all and (max-width: 768px) { #service_part ul li {width: 99%;margin:0 auto 40px;float:none;} #service_part ul li:nth-child(3n) {margin: 0 auto 40px;;} } #service_part_quarter ul { overflow: hidden; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; } #service_part_quarter ul li {width: 23%; float: left; border: 1px solid #e7e7e7; margin-right: 2%;} #service_part_quarter ul li:nth-child(4n) {margin: ;}/*margin: 0;*/ #service_part_quarter ul li img {width: 100%;} #service_part_quarter ul li>div {padding: 5%;} #service_part_quarter ul li>div div {font-weight: 600; font-size: 18px;} @media all and (max-width: 1240px) { #service_part_quarter ul li{width:48%; margin:0 2% 40px 0;} #service_part_quarter ul li:nth-child(2n) {margin-right: 0;} #service_part_quarter ul li>div div {font-weight: 400;font-weight:500; font-size: 1em;text-align:center;} } @media all and (max-width: 768px) { #service_part_quarter ul li{width:99%;float:none;margin:0 auto 40px} #service_part_quarter ul li>div {text-align:center;} #service_part_quarter ul li>div div {font-weight: 400;font-weight:500; font-size: 1em;text-align:center;} #service_part_quarter ul li:nth-child(2n){margin-right:auto;} #service_part_quarter ul li:nth-child(4n){margin:auto;} } #service_part_quarter02 ul { overflow: hidden; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; } #service_part_quarter02 ul li {width: 23%; float: left; margin-right: 2%;} #service_part_quarter02 ul li:nth-child(4n) {margin: ;}/*margin: 0;*/ #service_part_quarter02 ul li img {width: 100%;} #service_part_quarter02 ul li>div {margin-bottom: 5%; padding: 5%; border: 1px solid #e7e7e7; border-left: 5px solid #2dcabf;} #service_part_quarter02 ul li>div:nth-child(1) {background-color: #2dcabf; color: white; border: 0px;} #service_part_quarter02 ul li>div div {font-weight: 600; font-size: 18px;} @media all and (max-width: 1240px) { #service_part_quarter02 ul li{width:48%; margin:0 2% 40px 0;} #service_part_quarter02 ul li:nth-child(2n) {margin-right: 0;} #service_part_quarter02 ul li>div div {font-weight: 400;font-weight:500; font-size: 1em;text-align:center;} } @media all and (max-width: 768px) { #service_part_quarter02 ul li{width:99%;float:none;margin:0 auto 40px} #service_part_quarter02 ul li>div {text-align:center;} #service_part_quarter02 ul li>div div {font-weight: 400;font-weight:500; font-size: 1em;text-align:center;} #service_part_quarter02 ul li:nth-child(2n){margin-right:auto;} #service_part_quarter02 ul li:nth-child(4n){margin:auto;} } #distinction ul li {display:table;overflow: hidden; margin-bottom: 60px;} #distinction ul li:nth-last-child {overflow: hidden; margin-bottom: 0px;} #distinction ul li>div:nth-child(1) {vertical-align:middle;display:table-cell;width: 220px; margin-right: 2%;} #distinction ul li>div:nth-child(1) img {width: 80%;} #distinction ul li>div:nth-child(2) {vertical-align:middle;display:table-cell;} #distinction ul li>div h4 {margin:0 0 20px 0; font-size:18px; font-weight:500; font-weight: 400;} #distinction ul li>div>div>div:nth-child(2n) {margin: 0 0 20px 6px;} @media all and (max-width: 768px) { #distinction ul li {display:block;} #distinction ul li>div{float:none;text-align:center;} #distinction ul li>div:nth-child(1){width:100%;margin:0 0 20px 0; display: flex; justify-content: center;} #distinction ul li>div:nth-child(1) img {width: 60%;} #distinction ul li>div:nth-child(2){width:100%;display:block;} #distinction ul li>div:nth-child(2) div{text-align:left} } #news_list ul {border-top:2px solid #333333;} #news_list ul li {overflow:hidden;padding:30px 0;border-bottom:1px solid #e7e7e7;} #news_list ul li:hover {background-color:#f9f9f9;} #news_list ul li a>div:nth-child(1) {overflow:hidden;width:19%;margin-right:4%;float:left;} #news_list ul li a>div:nth-child(1) img {width:100%;} #news_list ul li a>div:nth-child(2) {color:#2e2e2e;width:77%;float:left;} #news_list ul li a>div:nth-child(2) .title {font-size:24px;} #news_list ul li a>div:nth-child(2) .des {margin:10px 0 25px 0;} #news_list ul li a>div:nth-child(2) .date {letter-spacing:0;color:#888888} #news_list ul li img {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transition: all .5s ease-in-out;} #news_list ul li:hover img {transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);} #news_list ul li .none{text-align:center;color:#888888;font-size:20px} @media all and (max-width: 820px) { #news_list ul li a>div:nth-child(1) {overflow:hidden;width:100%;margin-right:0%;float:none;} #news_list ul li a>div:nth-child(2) {color:#2e2e2e;width:100%;float:none;} #news_list ul li a>div:nth-child(2) .title {font-size:1.2em;margin-top:10px;line-height:1.4em;} #news_list ul li a>div:nth-child(2) .des{display:none;} } #process ul{ display: ; flex-wrap: wrap; justify-content: center; align-items: center; list-style: none; word-break: keep-all; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; } #process ul li div { display: block; } #process ul:after {content: ""; display: block; clear: both;} #process ul li {display: list-item; text-align: -webkit-match-parent;} #process ul li {position: relative; background: #ffffff; padding: 1%; border-radius: 50%; box-shadow: 0px 10px 30px rgba(0,0,0,0.1); float: left; width: 165px; height: 165px; margin: 0 3% 3% 3%; text-align: center;} #process ul li:nth-child(5n) {margin-right: 0;} #process ul li div:nth-child(1) {margin-top:10px;font-size:22px;font-weight:600;color:#e4352f;} #process ul li div:nth-child(2) {font-size:20px;font-weight:400;line-height:1.4;vertical-align:middle;text-align:center;display:table-cell;height:68px;width:145px;} #process ul li div.head{height:48px} #process ul li div.descript{font-size:14px;line-height:1.4;} #process ul .arrow {position:absolute;right:-30%;top:46%;width:25px;height:25px;background:url("../images/icon/icon_arrow01.png") no-repeat right top;background-size:cover;} @media all and (max-width: 1400px) { #process ul li:nth-child(5n) {margin-right: 3%;} /* #process ul li:nth-child(4n) {margin-right: 0;} */ #process ul .arrow {position:absolute;right:-27%;top:46%;width:25px;height:25px;background:url("../images/icon/icon_arrow01.png") no-repeat right top;background-size:cover;} } @media all and (max-width: 980px) { #process ul li {position: relative; background: #ffffff; padding: 2%; border-radius: 50%; box-shadow: 0px 10px 30px rgba(0,0,0,0.1); float: left; width: 160px; height: 160px; margin: 0 4% 3% 4%; text-align: center;} #process ul li:nth-child(5n), #process ul li:nth-child(4n) {margin-right: 4%;} /* #process ul li:nth-child(3n) {margin-right: 0;} */ #process ul .arrow {position:absolute;right:-26%;top:46%;width:25px;height:25px;background:url("../images/icon/icon_arrow01.png") no-repeat right top;background-size:cover;} } @media all and (max-width: 740px) { #process ul li {position: relative; background: #ffffff; padding: 2%; border-radius: 50%; box-shadow: 0px 10px 30px rgba(0,0,0,0.1); float: left; width: 180px; height: 180px; margin: 0 6% 5% 6%; text-align: center;} #process ul li:nth-child(5n), #process ul li:nth-child(4n), #process ul li:nth-child(3n) {margin-right: 6%;} #process ul li:nth-child(2n) {margin-right: 0;} #process ul .arrow {position:absolute;right:-25%;top:46%;width:25px;height:25px;background:url("../images/icon/icon_arrow01.png") no-repeat right top;background-size:cover;} #process div img{max-width:100%;} } @media all and (max-width: 500px) { #process ul li {position: relative; background: #ffffff; padding: 2%; border-radius: 50%; box-shadow: 0px 10px 20px rgba(0,0,0,0.1); float: left; width: 160px; height: 160px; margin: 0 4.5% 5% 4.5%; text-align: center;} #process ul li:nth-child(5n), #process ul li:nth-child(4n), #process ul li:nth-child(3n) {margin-right: 4.5%;} #process ul li:nth-child(2n) {margin-right: 0;} #process ul li div:nth-child(1) {font-size:1.4em;margin-top:10px;} #process ul li div:nth-child(2) {font-size:1.1em;} #process ul li div:nth-child(3) {font-size:0.9em;} #process ul .arrow {position:absolute;right:-18%;top:46%;width:18px;height:18px;background:url("../images/icon/icon_arrow01.png") no-repeat right top;background-size:cover;} } #process_type2 ul {position:relative;} #process_type2 ul:after {content:"";display:block;clear:both;} #process_type2>ul>li {width:20%;padding:0 2%;float:left;position:relative;margin-bottom:42px;}/*display: inline-grid; 텍스트세로중앙정렬*/ #process_type2 ul .group_circle {background:#ffffff;padding:28px;border-radius:50%;box-shadow:0px 10px 30px rgba(0,0,0,0.1);width:170px;height:170px;margin-bottom: 42px;text-align:center;} #process_type2 ul .group_circle>div:nth-child(1) {margin-top:5px;font-size:22px;font-weight:600;color:#e4352f;} #process_type2 ul .group_circle>div:nth-child(2) {font-size:20px;height:68px;font-weight:400;vertical-align:middle;display:table-cell;text-align:center;width:114px;line-height:1.4em;} #process_type2 ul .process_type2_txt {max-width:200px;margin: 0 0 0 0; width:100%; text-align:left;} #process_type2.vertical01 .process_type2_txt{min-height:200px;} #process_type2.vertical04 .process_type2_txt{min-height:200px;} #process_type2.vertical02 .process_type2_txt{min-height:180px;} #process_type2.vertical03 .process_type2_txt{min-height:100px;} #process_type2 ul .process_type2_txt ul li{background:url("../images/bullet01.gif") left 14px no-repeat;padding-left:10px} #process_type2 ul .process_type2_txt ul li span{font-size:14px;color:#8c8c8c;} #process_type2 ul .arrow {position:absolute;right:0%;top:18%;width:25px;height:25px;background:url("../images/icon/icon_arrow01.png") no-repeat right top;background-size:cover;} @media all and (max-width: 1400px) { #process_type2>ul>li {width:25%;} #process_type2 ul .arrow {right:9%;} } @media all and (max-width: 1200px) { #process_type2 ul .arrow {right:5%;} } @media all and (max-width: 1100px) { #process_type2>ul>li {width:33%;} #process_type2 ul .arrow {right:9%;} } @media all and (max-width: 768px) { #process_type2>ul>li {padding-bottom:60px;width:100%;margin-bottom:40px;background:url("../images/icon_arrow02.png") no-repeat center bottom;} #process_type2>ul>li:last-child{background:0 none;} #process_type2 ul .arrow {right:9%;} #process_type2 ul .group_circle {background:#ffffff;padding:28px;border-radius:50%;box-shadow:0px 10px 30px rgba(0,0,0,0.1);width:180px;height:180px;margin-bottom: 42px;margin-right: 101px;text-align:center;} #process_type2.vertical01 .process_type2_txt, #process_type2.vertical02 .process_type2_txt, #process_type2.vertical03 .process_type2_txt{min-height:auto;width:60%;margin:20px auto 0} #process_type2.vertical04 .process_type2_txt{min-height:auto;width:50%;margin:20px auto 0} #process_type2 ul .group_circle{margin:auto;} #process_type2 ul .arrow {display:none} } #peoplescout_part ul {display:flex;} #peoplescout_part ul li {width:46.5%;float:left;margin-bottom: 20px;margin-right:6%;text-align:center;} #peoplescout_part ul li:last-child {margin-right:0;} #peoplescout_part ul li img {width: 100%;border:1px solid #e7e7e7;} #peoplescout_part ul li div {margin-top: 20px;text-align: center;font-weight: 600;font-size: 20px;} @media all and (max-width: 768px) { #peoplescout_part ul {display:block;} #peoplescout_part ul li{width:99%;float:none;margin:0 auto 0;} #peoplescout_part ul li:first-child{margin-bottom:40px;} #peoplescout_part ul li:last-child {margin-right:auto;} } #client ul {overflow:hidden;} #client ul li {overflow: hidden;float:left;width:15%;margin:0 2% 2% 0;} #client ul li img {width:99%;border:1px solid #e7e7e7;} #client ul li:nth-child(6n) {margin:0 0 2% 0;} @media all and (max-width: 1024px) { #client ul li {width:31%;} #client ul li:nth-child(6n) {margin:0 2% 2% 0;} #client ul li:nth-child(3n) {margin:0 0 2% 0;} } @media all and (max-width: 1320px) { #client ul li {width:23.5%;} #client ul li:nth-child(6n) {margin:0 2% 2% 0;} #client ul li:nth-child(3n) {margin:0 2% 2% 0;} #client ul li:nth-child(4n) {margin:0 0 2% 0;} } @media all and (max-width: 768px) { #client ul li {width:48%;} #client ul li:nth-child(6n) {margin:0 2% 2% 0;} #client ul li:nth-child(2n) {margin:0 0 2% 0;} #client ul li:nth-child(4n) {margin:0 2% 2% 0;} } #cs>div {border:1px solid #e7e7e7;padding:40px;} #cs>div>div {font-weight:500;font-size:22px;margin-bottom:15px;} #cs ul:after {content:"";display:block;clear:both;} #cs ul li {height:26px;float:left;letter-spacing:0;margin-right:60px;padding-left:3%;} #cs ul li:nth-child(1) {background:url("../images/icon/icon_cs_tell.png") no-repeat left top;} #cs ul li:nth-child(2) {background:url("../images/icon/icon_cs_fax.png") no-repeat left top;} #cs ul li:nth-child(3) {background:url("../images/icon/icon_cs_mail.png") no-repeat left top;} #cs ul li:nth-child(4) {background:url("../images/icon/icon_cs_site.png") no-repeat left top;} @media all and (max-width: 1000px) { #cs>div{padding:8%} #cs ul li{display:flex;background-size:10%;float:none;padding-left:7%;} #cs>div>div {font-size:1.2em} } @media all and (max-width: 768px) { #cs>div{padding:5%} #cs ul li{float:none;padding-left:32px;} #cs ul li:nth-child(1) {background-size:8%;background-position:left 4px;} #cs ul li:nth-child(2) {background-size:8%;background-position:left 4px; margin-top: 6px;} #cs ul li:nth-child(3) {background-size:8%;background-position:left 4px; margin-top: 6px;} #cs ul li:nth-child(4) {background-size:8%;background-position:left 4px; margin-top: 6px;} #cs>div>div {font-size:1.2em} } .wrap_ #service_info p{color: #555; font-size: 16px; line-height: 25px; font-weight: 300; margin-top: 5px; display: inherit;} #slogan{margin-top: 60px;} #m_subtab { max-width:1200px;display:block; width:100%;margin:0 auto 50px;} #m_subtab ul{overflow:hidden;} #m_subtab ul li{ float:left; width:50%; text-align:center;} #m_subtab ul li a{font-weight:300;line-height:2.2em;font-size:1.2em;width:100%; padding:2% 0; display:inline-block; border-bottom:1px solid #dddddd;} #m_subtab ul li a.on{border-bottom:2px solid #39b0a8} #m_subtab.type3 li{width:33%;} #m_subtab.type3 ul li a{font-size:1em;line-height:1.2em;padding-bottom:15px} #service_part_quarter02 .img_wrap{display: flex; justify-content: center;} #service_part_quarter02 .img_wrap img{width: 70%;} @media screen and (max-width:1070px){ #service_part_quarter02 .img_wrap{display: flex; justify-content: center;} #service_part_quarter02 .img_wrap img{width: -webkit-fill-available;margin-left: 0%;} }