.wd100{width:100% !important; max-width:1920px !important;}
#wrap{width:90%; max-width:1400px; margin:0px auto;}
.sub_tit_b{font-size:42px; line-height:1; color:#000; text-align:center; margin: 130px 0 100px;}
#bo_gall, #bo_list, .flex-wrap, #bo_v{padding-bottom:130px !important; margin-bottom:0;}

/*메인비쥬얼*/
#main_visual{position:relative;width:100%; height:100vh;overflow:hidden}
.visual-01{background:url('/img/main/main_visual01.jpg') no-repeat 50% 50%; background-size:cover; }
.visual-02{background:url('/img/main/main_visual02.jpg') no-repeat 50% 50%; background-size:cover;}
.visual-03{background:url('/img/main/main_visual03.jpg') no-repeat 50% 50%; background-size:cover;}
.visual-04{background:url('/img/main/main_visual04.jpg') no-repeat 50% 50%; background-size:cover;}
.visual-05{background:url('/img/main/main_visual05.jpg') no-repeat 50% 50%; background-size:cover;}
#main_visual .slid-con{position:relative;width:80%;height:100%; max-width:1600px;margin:0 auto;text-align:left;}
#main_visual .slid-txt{position:absolute; left:0%; top:50%; width:100%; text-align:center; color:#fff; transform: translateY(-40%); opacity: 0; transition: transform 1s ease-in-out, opacity .5s ease-in-out;}
#main_visual .slid-txt h1, .slid-txt0 h1{ font-size: 70px; line-height: 1; margin-bottom: 40px; font-weight:500; }
#main_visual .slid-txt h2{font-size: 42px; line-height: 1; letter-spacing:5px; margin-bottom: 70px; font-weight: 500;}
#main_visual .slid-txt p, .slid-txt0 h3{font-size:28px; line-height: 40px; font-weight: 300;}
#main_visual .slid-txt img{width:400px; margin-bottom:50px}
#main_visual .swiper-slide-active .slid-txt {transform:translateY(-50%);opacity:1}
#main_visual .swiper-pagination{width:22px; left:initial !important; right:8%; bottom:25%; display:flex; flex-flow:column; justify-content:center; align-items:center; }
#main_visual .swiper-pagination::before{content:''; width:1px; height:80%; background:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
#main_visual .swiper-pagination-bullet{background:#fff; z-index:99; width:11px; height:11px; border-radius:100px; opacity:1; vertical-align:middle; margin:30px 0;}
#main_visual .swiper-pagination-bullet-active{background:#fff;opacity:1; width:22px;height:22px;border-radius:0px}
#main_visual .sd-txt01{width:40%; height:240px;}
.visual-05 .ph{position:absolute; left:0%; top:50%; transform: translateY(-40%);}
.visual-05 .ph img{width:300px;}
.slid-txt0 h3{margin-bottom:20px;}
.slid-txt0 p{display: inline-block; font-size:24px !important; line-height:30px !important; font-weight:300 !important; margin-top:30px;}
.slid-txt0 span{display:block; margin-top:15px; font-weight:200;}
.slid-txt0 span b{font-weight:500;}

.scroll{text-align:center; position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); z-index:9;}
.scroll span{display:inline-block; width:1px; height:160px; margin-bottom:10px; background:#fff;}
.scroll p{font-size:20px !important; font-weight:300 !important;}
@keyframes scale {
from {transform: scale(1.08);opacity: 1; } 
to {transform: scale(1);opacity: 1; }
}
@-moz-keyframes scale {
from {transform: scale(1.08);opacity: 1; } 
to {transform: scale(1);opacity: 1; }
}
@-webkit-keyframes scale {
from {transform: scale(1.08);opacity: 1; } 
to {transform: scale(1);opacity: 1; }
}
@keyframes fadeup {
0%{margin-top:50px;opacity:0}
100%{margin-top:0;opacity:1}
}



/* 상단 레이아웃 */
#hd {width:100%; height:110px; position:fixed; top:0; z-index: 9999999;}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.logoW{display:none;}
#hd.sticky{background:#000;}
#hd.sticky .gnb_1da{font-weight:400;}
#hd.sticky .logoW, .sub-header .logoW{display:block;}
#hd.sticky .logoB, .sub-header .logoB{display:none;}
.sub-header{border-bottom:1px solid rgb(255,255,255,0.2);}


/*header 우측메뉴*/
.hd-top > ul{display:flex; flex-wrap:wrap; align-items:center; }
.hd-top > ul li.t-menu{height: 110px; display: flex; flex-wrap: wrap; align-items: center; position:relative;}
.hd-top > ul li.t-menu > a{padding:0 20px; display:flex; flex-wrap:wrap; align-items:center;}
.hd-top > ul li.t-menu > img{width:28px;}
.hd-top > ul li.t-menu i{margin-left:7px; color:#fff; font-size:18px;}
.hd-top > ul li.t-menu:last-child > a{padding-right:0;}
.t-smenu{display:flex; flex-flow:column; display:none; overflow:hidden; position:absolute; top:90px; left:50%; transform:translate(-50%); background:#003778; border-radius:0px; box-shadow:0px 0px 5px rgb(0,0,0,.1);}
.t-smenu li{min-width:100px; text-align:center;}
.t-smenu li a{display:inline-block; font-size:14px; width:100%; line-height:1; padding:10px; color:#fff; }
.t-smenu li:hover a{background:#002857; color:#fff}


/*모달*/
#modal{width:28%; height:300px; border-radius:20px; background:#fff; box-shadow:5px 5px 5px rgb(0,0,0,.1); position:absolute; bottom:2%; right:1%; z-index:999}
.md-left{right:initial; left:1%; box-shadow:5px -5px 5px rgb(0,0,0,.1);}
.modal_wrap{width:90%; height:100%; margin:0 auto; position:relative;}
.modal_close{position:absolute; top:20px; right:0;}
.md-txt{width:100%; position:absolute; top:52%; left:50%; transform:translate(-50%, -50%); text-align:center;}
.md-txt img{width:90px;}
.md-txt h1{font-size:26px; line-height:1; font-weight:400; margin:25px 0 15px 0;}
.md-txt h1 span{font-weight:600; color:#057de2;}
.md-txt p{font-size:18px; line-height:24px;}



/*section 01*/
#sec01{width:100%; height:100vh; display:flex; flex-wrap:wrap; align-items:center; justify-content: space-between;}
#sec01 .sec-txt{width:60%; height:100%; background:url('/img/main/sec01_bg.jpg') no-repeat 50% 50%; background-size:cover; display:flex; flex-wrap:wrap; align-items:center; justify-content: space-between;}
#sec01 .sec-txt > div{width:90%; margin:0 auto; text-align:center; color:#fff;}
#sec01 .sec-txt > div h3{font-size:32px; line-height:1; font-weight:400;}
#sec01 .sec-txt > div h1{font-size:80px; line-height:1; font-weight:600; margin-top:40px;}
#sec01 .sec-txt > div p{font-size:24px; line-height:32px; font-weight:300; margin:90px 0 110px;}
#sec01 .sec-txt > div p span{display:block; margin-top:30px;}
#sec01 .sec-txt > div p span b{font-weight:600;}
.viewbtn{display:inline-block; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:22px; color:#fff;}
.viewbtn img{margin-left:10px;}
.viewbtn:hover img{margin-left:16px; transition-duration:0.3s;}
#sec01 .sec01-ph{width:40%; height:100%; background:#00314e; display:flex; flex-wrap:wrap; align-items:center; justify-content: center; }
#sec01 .sec01-ph img{width:330px; animation: motion 0.6s linear 0s infinite alternate; }
@keyframes motion {
	0% {margin-top: -5px;}
	100% {margin-top: 15px;}
}

/*section02~04*/
#sec02, #sec03, #sec04, #sec05{width:100%; height:100vh; position:relative; }
.sec-txt0{width:90%; max-width:1400px; text-align:left; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);z-index:9; color:#fff;}
.sec-txt0 h1{font-size:70px; line-height:1; font-weight:500;}
.sec-txt0 p{font-size:32px; line-height:44px; font-weight:300; display:block; margin:40px 0;}
#sec02 .viewbtn, #sec04 .viewbtn{margin-top:140px; justify-content: flex-start;}
#sec03 .viewbtn, #sec05 .viewbtn{margin-top:140px; justify-content: flex-end;}
#sec02{background:url('/img/main/main_visual01.jpg') no-repeat 50% 50%; background-size:cover;}
#sec03{background:url('/img/main/main_visual02.jpg') no-repeat 50% 50%; background-size:cover;}
#sec04{background:url('/img/main/main_visual03.jpg') no-repeat 50% 50%; background-size:cover;}
#sec05{background:url('/img/main/main_visual04.jpg') no-repeat 50% 50%; background-size:cover;}
#sec02::before, #sec04::before{content:''; display:block; width:30%; height:100%; background:#00314e; position:absolute; top:0; left:0; z-index:1;}
#sec04 .sec-txt0 h1{position:relative; display: inline;}
#sec04 .sec-txt0 h1 span{ font-size:30px; font-weight:300; position:absolute; top:-35px; right:0;}
#sec03::before, #sec05::before{content:''; display:block; width:30%; height:100%; background:#bad17b; position:absolute; top:0; right:0; z-index:1;}
#sec03 .sec-txt0, #sec05 .sec-txt0{text-align:right;}
#sec03 .sec-txt0 h1, #sec05 .sec-txt0 h1{position:relative; display: inline;}
#sec03 .sec-txt0 h1 span, #sec05 .sec-txt0 h1 span{ font-size:30px; font-weight:300; position:absolute; top:-35px; left:0;}

/*bannter / office*/
#banner{width:100%; height:600px; background:url('/img/main/banner_bg.jpg') no-repeat 50% 50%; background-size:cover; }
#banner .bntext{max-width:1400px; height:100%; display:flex; flex-wrap:wrap; align-items:center; color:#fff;}
#banner .bntext p{font-size:26px; line-height:1}
#banner .bntext h1{font-size:60px; line-height:1; font-weight:600; margin:40px 0 80px;}
#banner .bntext a.morebtn{display:inline-block; color:#fff; font-size:20px; line-height:46px; padding:0 40px; border:1px solid #fff;}
#banner .bntext a.morebtn:hover{background:#fff; color:#000; transition:0.3s;}
#office{width:100%; height:600px; background:url('/img/main/office.jpg') no-repeat 50% 50%; background-size:cover; }
#office div{width:90%; max-width:1600px; height:100%; margin:0 auto; position:relative;}
#office p{color:#fff; font-size:17px; font-weight:300; line-height:1px; text-align:right; position:absolute; bottom:40px; right:0;}


/* footer */
#ft {background: #000;  margin: 0 auto; width: 100%; }
#ft i{display:inline-block; margin-left:5px;}
#ft_wr{width:90%; max-width:1600px; padding-top:70px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content: space-between;}
#ft_wr:after {display:block;visibility:hidden;clear:both;content:""}
#ft_company h1 {color:#fff; font-size:22px; margin-bottom:40px; font-weight:600; line-height:1; overflow:hidden}
#ft_company, #ft_company a {color:#fff;}
#ft_company .ft_info li{display:flex; flex-wrap:wrap; align-items: center; font-size:18px; line-height:34px; font-weight:200;}
#ft_company .ft_info li span{font-weight:500; margin-right:3px;}
#ft_company .ft_info li p a{display:inline-block; border:1px solid #fff; line-height:1; font-size:16px; padding:5px 13px 4px 13px; margin-left:10px; font-weight:300;}
#ft_company .ft_info li p{display:flex; flex-wrap:wrap; align-items: center;}
#ft_company .ft_info li p a:hover{transition:0.3s; background:#fff; color:#000; font-weight:600; border-radius:6px;}
.ft_right{display:flex; flex-flow: column; justify-content: space-between; align-items: flex-end;}
.ft_right .fr_menu > ul > li{display:inline-block;position:relative}
.ft_right .fr_menu > ul > li a{color:#fff; display:inline-block; padding:0 20px; line-height:35px; font-size:16px; font-weight:300; font-family: 'Outfit', serif ;}
.f-smenuko a{font-family:'Pretendard', dotum ,sans-serif !important;}
.ft_right .fr_menu > ul > li a img{max-width:100%; display:block;}
.ft_right .fr_menu > ul > li .f-smenu {display: flex; flex-flow: column; display:none;position:absolute; width:100%; left:50%;-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);font-size:15px}
.ft_right .fr_menu > ul > li .f-smenu li{text-align:center; color:#fff; }
.ft_right .fr_menu > ul > li .f-smenu li a{display:inline-block;width:100%; padding:0 20px; line-height:35px; font-size:15px;}
.ft_right .fr_menu > ul > li .f-smenu li a:hover{background:rgba(255,255,255,.2)}
.to-top{color:#fff; font-size:18px; padding-top:26px; display:inline-block; text-align:center; position:relative; text-decoration:none; transition:all .3s ease-out;}
.to-top:before{content:'▲'; font-family:'Malgun Gothic', dotum, sans-serif; display:inline-block; font-size:16px; position:absolute; top:0; left:50%; margin-left:-15px; width:30px; height:30px; line-height:30px; border-color:inherit; transition:transform .5s ease-in;}
.to-top:hover, .ft_right .fr_menu > ul > li > a:hover{color:#ffc426;}
.to-top:hover:before{transform: rotate(360deg);}
#ft_copy {text-align:center; width:100%; margin:70px auto 0; padding:30px 0; color:#aaa; font-size:16px; font-weight:300; border-top:1px solid #555}
/* footer */


/*서브상단비쥬얼*/
.sub-visual{width:100%; height:800px;position:relative;overflow:hidden; }

.sub-tit{width:90%; height:100%; max-width:1600px; margin:0 auto; display:flex; flex-wrap:wrap;  justify-content: center; align-items:center; position:relative; animation:fadeup 1.5s;}
.sub-tit h1{display:inline-block; text-align:center; color:#fff; font-size:38px; font-weight:300;}
.sub-tit h1 span{font-weight:600; display:inline-block; margin-top:30px; font-size:58px; line-height:70px;}
.sub-tit h2{display:inline-block; text-align:center; color:#fff; font-size:60px; font-weight:500;}
.sub-tit h2 span{font-weight:300; display:inline-block; margin-top:30px; font-size:32px; line-height:42px;}
.sub-tit h3, .sub-tit h4{display:inline-block; text-align:left; color:#fff; font-size:60px; line-height:1; font-weight:500; position:absolute; bottom:100px; left:0;}
.sub-tit h3 span, .sub-tit h4 span{font-weight:300; display:block; padding-top:25px; font-size:22px;}


/*비지니스 - 코그플레이*/
#cog{width:100%;}
.about-cog{width:100%; padding:130px 0 120px 0; display:flex; align-items: center; flex-flow: column;}
.about-cog h1{font-size:40px; font-weight:500; text-align:center; display:inline; margin-bottom:80px; position:relative;}
.about-cog h1::before{content:''; display:block; width:104%; height:20px; background:#bbcfeb; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); z-index:-10;}
.about-cog .wrap{width:90%; max-width:1400px; display:flex; flex-wrap:wrap; justify-content: space-between; align-items:center; }
.cogl img{width:340px;}
.phobox{animation: up-down 1.2s infinite ease-in-out alternate;}
.cogr{width:calc(100% - 500px); margin-bottom:80px;}
.cogr span{display:inline-block; font-size:28px; line-height:38px; font-weight:600;}
.cogr span strong{font-weight:400; color:#004872;}
#cog h2{font-size:42px; line-height:60px; font-weight:300; margin:50px 0 40px;}
#cog h2 b{color:#004872}
#cog p{font-size:21px; line-height:30px; font-weight:500; color:#444;}
.cog02{padding:170px 0; width:100%; display: flex; flex-flow: column; align-items: center;  background:url('/img/main/cogbg.jpg') no-repeat 50% 50%; background-attachment: fixed; background-size: cover; text-align:center; position:relative; z-index:1;}
.cog02 h2{margin:30px !important; position:relative; display:inline; z-index:10;}

@keyframes up-down{
  from{
    transform: translatey(0px);
  }
  to{
    transform: translatey(-20px);
  }
}

.more{width: 210px; margin-top:50px; overflow: hidden;  text-align: center; position: relative; }
.more a {display: block;  font-size:18px; line-height:50px; font-weight: 500; color: #000; border:1px solid #004872;  position: relative; z-index:5; overflow:hidden;}
.more:hover a {color: #fff;  -webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s;}
.more:after {content:''; width: 0;display:block; background: #004872; position: absolute;  left: 0; bottom: 0; top: 0; -webkit-transition: 0.4s;-moz-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s;transition:0.4s;}
.more:hover:after {right:0; width: 100%;} 

/*비전*/
.vision_tit {display:flex; flex-flow:column; justify-content:center; align-items: center; margin:30px auto 70px;}
.vision_tit h3{font-size:42px; font-weight:600; color:#00314e; }
.vision_tit p{font-size:26px; font-weight:500; display:inline-block; padding:15px 60px; margin-top:30px; color:#fff; background:#057de2; border-radius:100px;}
.vision_logo{width:100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#vision ul.point{width:70%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#vision ul.point > li{width:30%;}
#vision ul.point > li > div {width: 100%; height: 0;  padding-bottom: 100%; border: 1px solid #ddd; border-radius: 100%;  position: relative;}
#vision ul.point > li > div p, #vision ul.point li > div ul {  display: inline-block; position: absolute;  top: 50%; left: 0; padding: 0 30px; width: 100%; text-align: center;  transform:translateY(-50%); color: #000; font-size: 20px; line-height:30px; font-weight: 400;}
#vision ul.point li > div ul li:first-child{margin-bottom:10px;}
#vision ul.point > li span{font-size:26px;}
#vision ul.point > li span b{color:#057de2}
.vision_con{width:100%; padding:140px 0; margin-top: 150px; background:url('/img/main/vision_bg.jpg') no-repeat 50% 50%;     background-size: cover;}
.vision_con ul{width:60%}
.vision_con ul li{display: flex; flex-wrap: wrap;  flex-flow:column }
.vision_con ul li:first-child{margin-bottom:40px;}
.vision_con ul li span{display:inline-block; width:46px; line-height:46px; margin-bottom:10px; text-align:center; background:#fff; color:#002060; border-radius:50px; font-size:18px; font-weight:600; font-family: 'Outfit', serif !important;}
.vision_con ul li p{font-size:22px; color:#fff;}
.vision_con ul li p b{ font-family: 'Outfit', serif !important; font-weight:500;}

/*조직도*/
.contents-wrap{position:relative; clear:both; width:90%; max-width:1400px;margin:0 auto 130px; color:#888;z-index:1; line-height:1.5}
.organ0101, .organ0102{width:75%; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content: center;}
.organ0101 li, .organ0102 li{width:22%;}
.organ0101 > li > div{background:#057de2}
.organ0101 > li > div, .organ0102 > li > div {width: 100%; height: 0;  padding-bottom: 100%; border: 1px solid #00314e; border-radius: 100%;  position: relative;}
.organ0101 > li > div p, .organ0102 > li > div p{display: inline-block; position: absolute;  top: 50%; left: 0; padding: 0 30px; width: 100%; text-align: center;  transform:translateY(-50%); color: #00314e; font-size: 24px; line-height:1; font-weight: 500;}
.organ0102{margin-top:50px; justify-content: space-between;}
.organ0101 > li > div{background:#057de2; border:0 !important;}
.organ0101 > li > div p{color:#fff !important;}


/*
.organ-wrap li{text-align:center;}
.organ-wrap li:first-child > div{width:260px; height:70px;margin:0 auto;background:#00314e; font-size:22px; line-height:70px; color:#fff;font-weight:500 }
.organ-wrap li:nth-child(2){display:flex; flex-wrap:wrap;justify-content:space-between;margin-top:30px;}
.organ-wrap li:nth-child(2) > div:first-child{width:calc(35% - 10px);}
.organ-wrap li:nth-child(2) > div span{display:inline-block;height:70px; width:100%; max-width:260px;line-height:70px; background:#057de2; color:#fff;font-weight:500; font-size:18px;}
.organ-wrap li:nth-child(2) > div:nth-child(2){display:flex; flex-wrap:wrap;justify-content:space-between;width:calc(50% + 130px);}
.organ-wrap li:nth-child(2) > div:nth-child(2) > div{width:calc(100%/3 - 20px)}
.organ-part{display:flex; flex-wrap:wrap;justify-content:space-between;margin-top:30px;text-align:center}
.organ-part > div:first-child{width:calc(35% - 10px)}
.organ-part > div:nth-child(n+2){width:calc(65%/4 - 10px)}
.organ-part > div .part-tit{position:relative;width:100%;background:#73daae; height:60px;color:#fff;margin-bottom:20px}
.organ-part > div:first-child .part-tit,
.organ-part > div:nth-child(2) .part-tit{background:#3aa979}
.organ-part > div .part-tit p{position:absolute; width:100%; padding:0 10px;left:0; top:50%;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);line-height:1.3}
.organ-part > div .part-tit p span{display:block;font-size:14px}
.organ-part > div .team-wrap{display:flex; flex-wrap:wrap;justify-content:space-between;}
.organ-part > div .team-wrap span{position:relative;display:inline-block; width:calc(100%/3 - 5px);text-align:center;background:#bbb;color:#fff;height:50px; font-size:17px; font-weight:500;}
.organ-part > div .team-wrap span em{display:inline-block; font-style:normal;position:absolute; width:100%; padding:0 10px;left:0; top:50%;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);line-height:1.3}
.organ-part > div .team-con{text-align:left;padding:0 20px;}
.organ-part > div:first-child .team-con {display:flex; flex-wrap:wrap;justify-content:space-between;}
.organ-part > div:first-child .team-con dl{width:calc(50% - 10px)}
.organ-part > div .team-con dd{position:relative;font-size:.9em; padding-left:10px}
.organ-part > div .team-con dd:before{content:'';position:absolute;width:3px; height:3px; background:rgba(0,0,0,.2); border-radius:50px; left:0; top:12px;}
*/

/*인재채용*/
.network-txt{width:90%;margin:130px auto 80px auto;text-align:center; font-size:32px; color:#000; font-weight:300; position:relative;}
.network-txt:before{content:'';position:absolute;left:0; width:100%; height:56px;background:url('/img/common/icon01.png') no-repeat 50% 50%;margin-top:-30px;opacity:.1}
.advantage{width:100%; padding:130px;background:url('/img/sub/career-04.png') no-repeat 50% 50%; background-size:cover}
.recruit-info{display:flex; flex-wrap:wrap;justify-content:space-between;margin:50px 0 70px 0}
.recruit-info li{width:calc(100%/3 - 30px);display:flex; flex-wrap:wrap;justify-content:space-between;align-items:center}
.recruit-info li .img{width:120px;height:120px;border:1px solid #ddd; border-radius:100%;text-align:center; line-height:120px}
.recruit-info li .img img{max-width:65%}
.recruit-info li .con{width:calc(100% - 140px);}
.recruit-info li .con p{word-break:keep-all;font-size:16px;color:#666}
.recruit-info li .con p.tit{font-size:20px; margin-bottom: 10px;color:#000}


/*고객문의*/
.flex-wrap{display:flex; flex-wrap:wrap; justify-content:space-between}
.contact-con{width:calc(80% - 50px)}
.contact-kakao{width:20%;text-align:right; margin-top:75px}
.contact-kakao img{max-width:100%;position:sticky;top:150px;}




@media(max-width:1600px){
#main_visual .sd-txt01 {width: 45%;}
}




@media(max-width:1400px){
/*header*/
#hd, #gnb #gnb_1dul, #hd_wrapper, .hd-top > ul li.t-menu{height:100px;}
#gnb .gnb_1dli{line-height:100px;}
#logo img{width:160px}
.gnb_1da {font-size: 19px; padding: 0 15px;}
.hd-top > ul li.t-menu > a { padding: 0 12px;}
.hd-top > ul li.t-menu img{width:25px}
.hd-top > ul li.t-menu i {margin-left: 5px; font-size: 16px;}
.gnb_2dul{min-width:130px;}
.gnb_2da{font-size:14px; line-height:19px; padding:10px 15px;}
.t-smenu li{min-width:100px;}
.t-smenu li a{font-size:13px; padding:10px 15px; }
/*header*/

/*모달*/
#modal{height:290px;}
.md-left{right:initial; left:1%; }
.modal_close{top:18px;}
.modal_close img{width:24px;}
.md-txt img{width:80px;}
.md-txt h1{font-size:24px; margin:20px 0 15px 0;}
.md-txt p{font-size:16px; line-height:21px;}


/*메인비쥬얼*/
#main_visual{height:90vh}
#main_visual .slid-con{width:90%}
#main_visual .slid-txt{top:50%;  transform: translateY(-40%);}
#main_visual .slid-txt h1, .slid-txt0 h1{font-size: 56px; margin-bottom: 35px;}
#main_visual .slid-txt h2{font-size: 30px; margin-bottom: 65px;}
#main_visual .slid-txt p, .slid-txt0 h3{font-size:26px; line-height: 36px;}
#main_visual .slid-txt img{width:340px;}
#main_visual .swiper-slide-active .slid-txt {transform:translateY(-50%);}
#main_visual .swiper-pagination{width:21px; right:5%;}
#main_visual .swiper-pagination-bullet{width:10px; height:10px; margin:29px 0;}
#main_visual .swiper-pagination-bullet-active{width:21px;height:21px;}
#main_visual .sd-txt01{height:240px;}
.visual-05 .ph{transform: translateY(-40%);}
.visual-05 .ph img{width:240px;}
.slid-txt0 h3{margin-bottom:20px;}
.slid-txt0 p{font-size:23px !important; line-height:29px !important;}
.scroll{ bottom: -150px;}
.scroll span{height:140px;}
.scroll p{font-size:19px !important;}

/*서브상단비쥬얼*/
.sub-visual{height:640px;}
.sub-tit h1{font-size:32px;}
.sub-tit h1 span{margin-top:30px; font-size:54px; line-height:1;}
.sub-tit h2{font-size:52px; line-height:60px;}
.sub-tit h2 span{margin-top:30px; font-size:26px; line-height:35px;}
.sub-tit h3, .sub-tit h4{font-size:54px; bottom:95px;}
.sub-tit h3 span, .sub-tit h4 span{padding-top:22px; font-size:20px;}


/*section 01*/
#sec01 .sec-txt > div h3{font-size:26px; }
#sec01 .sec-txt > div h1{font-size:62px; margin-top:30px;}
#sec01 .sec-txt > div p{font-size:19px; line-height:28px; margin:65px 0 80px;}
#sec01 .sec-txt > div p span{margin-top:22px;}
.viewbtn{font-size:19px; font-weight:300;}
.viewbtn img{height: 18px; margin-left:10px;}
.viewbtn:hover img{margin-left:14px;}
#sec01 .sec01-ph img{width:260px; }


/*section02~04*/
#sec01, #sec02, #sec03, #sec04, #sec05{height:90vh}
.sec-txt0 h1{font-size:56px; line-height: 60px;}
.sec-txt0 p{font-size:26px; line-height:38px;  margin:34px 0;}
#sec02 .viewbtn, #sec04 .viewbtn{margin-top:110px;}
#sec03 .viewbtn, #sec05 .viewbtn{margin-top:110px;}
#sec04 .sec-txt0 h1{display: inline;}
#sec04 .sec-txt0 h1 span{ font-size:28px; top:-60px; right: inherit; left: 0;}
#sec03 .sec-txt0 h1 span, #sec05 .sec-txt0 h1 span{ font-size:28px; top:-60px; left:0;}
#sec02 .sec-txt0 div > img{width:300px}

/*bannter / office*/
#banner{height:500px;}
#banner .bntext p{font-size:22px; font-weight:300;}
#banner .bntext h1{font-size:52px; margin:25px 0 70px;}
#banner .bntext a.morebtn{font-size:19px; line-height:38px; padding:0 38px; }
#office{height:500px; }
#office p{font-size:16px;}


.sub_tit_b{font-size:40px; margin:110px 0 80px;}
#bo_gall, #bo_list, .flex-wrap, #bo_v{padding-bottom:110px !important;}
.contents-wrap{margin:0 auto 110px;}

/*비지니스 - 코그플레이*/
.about-cog{padding:110px 0 100px 0;}
.about-cog h1{font-size:36px; margin-bottom:60px;}
.about-cog h1::before{height:18px; bottom:-2px;}
.cogl img{width:260px;}
.cogr{width:calc(100% - 320px); margin-bottom:80px;}
.cogr span{font-size:24px; line-height:34px;}
#cog h2{font-size:34px; line-height:48px; margin:40px 0 30px;}
#cog p{font-size:19px; line-height:28px;}
.cog02{padding:150px 50px;}
.cog02 h2{margin:25px !important; }
.cog02 img{width:85px}
.more{width: 200px; margin-top:46px; }
.more a {font-size:17px; line-height:46px; } 

/*비전*/
.vision_tit {margin:25px auto 65px;}
.vision_tit h3{font-size:38px;}
.vision_tit p{font-size:23px; padding:13px 50px; margin-top:25px;}
.vision_logo img {width: 320px;}
#vision ul.point{width:80%;}
#vision ul.point > li > div p, #vision ul.point li > div ul {padding: 0 10px;  font-size: 18px; line-height:26px;}
#vision ul.point > li span{font-size:22px;}
.vision_con{padding:100px 0; margin-top: 130px;}
.vision_con ul{width:70%}
.vision_con ul li:first-child{margin-bottom:35px;}
.vision_con ul li span{width:42px; line-height:42px; font-size:16px; margin-bottom:8px; }
.vision_con ul li p{font-size:20px; line-height:27px;}

/*조직도*/
.organ0101, .organ0102{width:80%;}
.organ0101 > li > div p, .organ0102 > li > div p{ padding: 0 20px; font-size: 22px;}
.organ0102{margin-top:40px;}

/*인재채용*/
.network-txt{font-size:28px;}
.recruit-info li{width: calc(100%/3 - 10px);}
.recruit-info li .img{width:115px; height:115px; line-height:115px;}
.recruit-info li .con{width:calc(100% - 130px);}
.recruit-info li .con p.tit{font-size:19px; margin-bottom:8px;}
.recruit-info li .con p{font-size:15px;}



/* footer */
#ft {background: #000;  margin: 0 auto;  width: 100%; }
#ft_wr{padding-top:65px;}
#ft_company h1 {font-size:21px; margin-bottom:36px;}
#ft_company .ft_info li{font-size:17px; line-height:32px;}
#ft_company .ft_info li p a{font-size:15px; padding:4px 11px 3px 11px;}
.ft_right .fr_menu > ul > li a{ padding:0 18px; line-height:33px; font-size:15px;}
.ft_right .fr_menu > ul > li .f-smenu {font-size:14px}
.ft_right .fr_menu > ul > li .f-smenu li a{padding:0 18px; line-height:32px; font-size:14px;}
.to-top{font-size:17px; padding-top:24px;}
.to-top:before{font-size:15px; margin-left:-15px; width:30px; height:30px; line-height:30px;}
#ft_copy {margin:60px auto 0; padding:26px 0; font-size:15px;}
/* footer */
}


@media(max-width:1230px){
/*조직도*/
.organ0101, .organ0102{width:90%;}
.organ0101 li, .organ0102 li{width:22%;}
.organ0101 > li > div p, .organ0102 > li > div p{ padding: 0 10px; font-size: 20px;}
.organ0102{margin-top:30px;}
}


@media(max-width:1023px){
/*header*/
#hd, #gnb #gnb_1dul, #hd_wrapper, .hd-top > ul li.t-menu{height:90px;}
#gnb .gnb_1dli{line-height:90px;}
#logo img{width:150px}
#gnb_1dul, .hd-top{display:none !important;}
#gnb .gnb_menu_btn{display:block !important;}
#gnb_all{width: 100%; height:100vh;background: #fff; z-index: 9999999; position:fixed; left: 0; top: 50%; transform: translateY(-50%);}
.gnb_al_ul{width:90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display:flex; flex-flow:column;}
#gnb_all .gnb_al_li{width:100%; border-left:none; text-align: center; min-height:0; padding:0}
#gnb_all .gnb_al_li .gnb_al_a{font-size:24px; margin:0; padding:20px 0 5px 0; cursor: pointer; font-weight: 500; font-family: 'Outfit', serif !important;}
#gnb_all .gnb_al_li .gnb_al_a:hover{color:#666;}
#gnb_all .gnb_al_li li a{display:inline-block; color: #666; width:100%; font-size:18px; line-height:36px; font-weight:400;}
#gnb_all .gnb_al_li li:hover a{color:#000; font-weight:500}
#gnb_all .gnb_al_li ul{display:none; height:0;}
#gnb_all .gnb_al_li.open ul{height:auto; display:block; position:relative; margin-bottom:15px;}
#gnb_all .hd-top{display:block !important;  position: absolute; top: 16px; left: 30px;}
#gnb_all .hd-top > ul li.t-menu > a {padding:0; font-size:17px; font-family: 'Outfit', serif !important;}
#gnb_all .hd-top > ul li.t-menu{height:35px;}
#gnb_all .t-smenu{top:35px;}
#gnb_all .hd-top > ul li.t-menu i { margin-left: 5px;  color: #000;  font-size: 16px;}
#gnb_all .hd-top > ul li.t-menu{margin-right:20px;}
#gnb_all .hd-top > ul li.t-menu:last-child{margin-right:0;}
#gnb_all .t-smenu li {min-width: 100px;}
#gnb_all .t-smenu li a{font-size:13px; backdrop-filter: initial; padding: 10px 15px;}
/*header*/


/*모달*/
#modal{width:38%; height:270px;}
.md-left{right:initial; left:1%; }
.modal_close{top:16px;}
.modal_close img{width:22px;}
.md-txt img{width:74px;}
.md-txt h1{font-size:22px; margin:20px 0 15px 0;}
.md-txt p{font-size:15px; line-height:20px;}




/*메인비쥬얼*/
#main_visual{height:80vh}
#main_visual .slid-txt{top:50%;  transform: translateY(-40%);}
#main_visual .slid-txt h1, .slid-txt0 h1{font-size: 48px; margin-bottom: 25px;}
#main_visual .slid-txt h2{font-size: 22px; margin-bottom: 0px; letter-spacing:4px;}
#main_visual .slid-txt p, .slid-txt0 h3{font-size:20px; line-height: 29px;}
#main_visual .slid-txt img{width:270px;}
#main_visual .swiper-pagination{width:18px;}
#main_visual .swiper-pagination-bullet{width:9px; height:9px; margin:24px 0;}
#main_visual .swiper-pagination-bullet-active{width:18px;height:18px;}
#main_visual .sd-txt01{height:240px;}
.visual-05 .ph{transform: translateY(-40%);}
.visual-05 .ph img{width:200px;}
.slid-txt0 h3{margin-bottom:20px;}
.slid-txt0 p{font-size:19px !important; line-height:25px !important; margin-top:25px;}
.slid-txt0 span {  margin-top: 10px;  line-height: 21px;}
.scroll{ bottom: -90px;}
.scroll span{height:120px; margin-bottom:5px;}
.scroll p{font-size:17px !important;}

/*서브상단비쥬얼*/
.sub-visual{height:480px;}
.sub-tit h1{font-size:28px;}
.sub-tit h1 span{margin-top:26px; font-size:50px;}
.sub-tit h2{font-size:48px; line-height:55px;}
.sub-tit h2 span{margin-top:26px; font-size:23px; line-height:30px;}
.sub-tit h3, .sub-tit h4{font-size:48px; bottom:80px;}
.sub-tit h3 span, .sub-tit h4 span{padding-top:18px; font-size:19px;}

/*section 01*/
#sec01 .sec-txt > div h3{font-size:20px; font-weight:300 }
#sec01 .sec-txt > div h1{font-size:52px; margin-top:20px;}
#sec01 .sec-txt > div p{font-size:16px; line-height:23px; margin:45px 0 60px;}
#sec01 .sec-txt > div p span{margin-top:16px; line-height:19px;}
.viewbtn{font-size:17px; }
.viewbtn img{height: 15px; }
#sec01 .sec01-ph{padding-top:30px;}
#sec01 .sec01-ph img{width:200px; }


/*section02~04*/
#sec01, #sec02, #sec03, #sec04, #sec05{height:80vh}
#sec02::before, #sec03::before,#sec04::before, #sec05::before{width:40%;}
.sec-txt0 h1{font-size:50px; line-height: 54px;}
.sec-txt0 p{font-size:20px; line-height:28px;  margin:30px 0;}
#sec02 .viewbtn, #sec04 .viewbtn{margin-top:80px;}
#sec03 .viewbtn, #sec05 .viewbtn{margin-top:80px;}
#sec04 .sec-txt0 h1 span, #sec03 .sec-txt0 h1 span, #sec05 .sec-txt0 h1 span{ font-size:24px; top:-45px;}
#sec02 .sec-txt0 div > img{width:260px}

/*bannter / office*/
#banner, #office{height:420px;}
#banner .bntext p{font-size:20px;}
#banner .bntext h1{font-size:48px; margin:20px 0 60px;}
#banner .bntext a.morebtn{font-size:17px; line-height:34px; padding:0 34px; }
#office p{font-size:15px; bottom:30px; }


.sub_tit_b{font-size:36px; margin:100px 0 60px;}
#bo_gall, #bo_list, .flex-wrap, #bo_v{padding-bottom:100px !important;}
.contents-wrap{margin:0 auto 100px;}


/*비지니스 - 코그플레이*/
.about-cog{padding:100px 0 80px 0;}
.about-cog h1{font-size:34px; margin-bottom:50px;}
.about-cog h1::before{height:16px; bottom:-2px;}
.cogl img{width:180px;}
.cogr{width:calc(100% - 230px); margin-bottom:80px;}
.cogr span{font-size:20px; line-height:30px;}
#cog h2{font-size:27px; line-height:36px; margin:30px 0 25px;}
#cog p{font-size:17px; line-height:24px; font-weight:400;}
.cog02{padding:130px 50px;}
.cog02 h2{margin:25px !important; }
.cog02 img{width:75px}
.more{width: 200px; margin-top:40px; }
.more a {font-size:16px; line-height:42px; } 


/*비전*/
.vision_tit {margin:22px auto 55px ;}
.vision_tit h3{font-size:30px;}
.vision_tit p{font-size:20px; padding:13px 45px; margin-top:22px;}
.vision_logo img {width: 280px;}
#vision ul.point{width:90%;}
#vision ul.point > li{width:31%}
#vision ul.point > li > div p, #vision ul.point li > div ul {padding: 0 10px;  font-size: 17px; line-height:24px;}
#vision ul.point > li span{font-size:21px;}
.vision_con{padding:80px 0; margin-top: 120px;}
.vision_con ul{width:80%}
.vision_con ul li:first-child{margin-bottom:25px;}
.vision_con ul li span{width:38px; line-height:38px; font-size:15px; margin-bottom:7px; }
.vision_con ul li p{font-size:18px; line-height:24px;}

/*조직도*/
.organ0101, .organ0102{width:100%;}
.organ0101 li, .organ0102 li{width:23%;}
.organ0101 > li > div p, .organ0102 > li > div p{ padding: 0 10px; font-size: 19px;}
.organ0102{margin-top:30px;}

/*조직도
.organ-wrap li:first-child > div,
.organ-wrap li:nth-child(2) > div span{height:55px; line-height:55px}
.organ-wrap li:first-child > div,
.organ-wrap li:nth-child(2) > div span{max-width:200px; font-size:17px;}
.organ-wrap li:nth-child(2) > div:nth-child(2){width:calc(50% + 100px)}
.organ-part{margin-top:30px}
.organ-part > div:first-child{width:calc(35% - 10px)}
.organ-part > div:nth-child(n+2){width:calc(70%/4 - 5px)}
.organ-part > div .part-tit{margin-bottom:10px}
.organ-part > div .team-wrap,
.organ-part > div .team-con{padding:0px}
.organ-part > div .team-wrap span{width:100%; height:auto;padding:6px; font-size:16px;}
.organ-part > div .team-wrap span:nth-child(n+2){margin-top:5px;}
.organ-part > div .team-wrap span em{position:relative;}
.organ-part > div:first-child .team-con dl{width:100%}
.organ-part > div .team-wrap{margin:10px 0}*/

/*인재채용*/
.network-txt{font-size:24px; margin: 110px auto 60px auto;}
.network-txt:before {background-size: 80px;}
.recruit-info li{    flex-flow: column; justify-content: flex-start;}
.recruit-info li .con{width: 100%; text-align: center; margin-top:15px;}
.recruit-info li .img img { max-width: 60%;} 
.recruit-info li .con p.tit{font-size:18px;}
.recruit-info li .con p{font-size:14px; line-height:18px;}

/* footer */
#ft_wr{padding-top:60px;}
#ft_company h1 {font-size:20px; margin-bottom:30px;}
#ft_company .ft_info li{font-size:16px; line-height:28px;}
#ft_company .ft_info li p a{font-size:13px; padding:4px 9px 3px 9px;}
#ft_company .ft_info li p a:hover{border-radius:5px;}
.ft_right .fr_menu > ul > li a{ padding:0 12px; line-height:28px; font-size:14px;}
.ft_right .fr_menu > ul > li .f-smenu {font-size:13px}
.ft_right .fr_menu > ul > li .f-smenu li a{padding:0 12px; line-height:28px; font-size:13px;}
.to-top{font-size:15px; padding-top:24px;}
.to-top:before{font-size:14px; line-height:20px;}
#ft_copy {margin:55px auto 0; padding:20px 0; font-size:14px;}
/* footer */
}

@media (max-width: 800px){
#ft_wr{flex-flow:column}

}

@media(max-width:768px){
/*header*/
#hd, #gnb #gnb_1dul, #hd_wrapper, .hd-top > ul li.t-menu{height:80px;}
#gnb .gnb_1dli{line-height:80px;}
#logo img{width:140px}
#gnb .gnb_menu_btn{width:30px; height:30px;}
#gnb .gnb_menu_btn img, #gnb .gnb_close_btn img{width:27px;}

/*header*/
#gnb_all .gnb_al_li .gnb_al_a{font-size:22px;padding:16px 0 5px 0;}
#gnb_all .gnb_al_li li a{font-size:16px; line-height:32px;}
#gnb_all .gnb_al_li.open ul{margin-bottom:15px;}
#gnb_all .hd-top{top: 16px; left: 30px;}
#gnb_all .hd-top > ul li.t-menu > a {padding:0; font-size:17px; font-family: 'Outfit', serif !important;}
#gnb_all .hd-top > ul li.t-menu{height:35px;}
#gnb_all .t-smenu{top:35px;}
#gnb_all .hd-top > ul li.t-menu > a{font-size:15px;}
#gnb_all .hd-top > ul li.t-menu i {font-size: 14px;}
#gnb_all .hd-top > ul li.t-menu{margin-right:15px;}
#gnb_all .t-smenu li {min-width: 90px;}
#gnb_all .t-smenu li a{font-size:12px; padding: 9px 13px;}
/*header*/

/*모달*/
#modal{width:80%; height:300px; bottom: 50%; right: 50%; transform: translate(50%, 50%); }
.md-left{right:50%; left:initial; }
.modal_close{top:20px;}
.modal_close img{width:24px;}
.md-txt img{width:80px;}
.md-txt h1{font-size:24px; margin:25px 0 15px 0;}
.md-txt p{font-size:17px; line-height:24px;}


/*메인비쥬얼*/
#main_visual{height:70vh}
#main_visual .slid-txt{top:50%;  transform: translateY(-40%);}
#main_visual .slid-txt h1, .slid-txt0 h1{font-size: 36px; line-height:40px; margin-bottom: 20px;}
#main_visual .slid-txt h2{font-size: 20px; letter-spacing:3px;}
#main_visual .slid-txt p, .slid-txt0 h3{font-size:18px; line-height: 27px;}
#main_visual .slid-txt img{width:220px; margin-bottom:35px;}
#main_visual .swiper-pagination{width:14px;}
#main_visual .swiper-pagination-bullet{width:7px; height:7px; margin:18px 0;}
#main_visual .swiper-pagination-bullet-active{width:14px;height:14px;}
#main_visual .sd-txt01{width:100%; height:240px;}
.visual-05 .ph{display:none;}
.slid-txt0 h3{margin-bottom:20px;}
.slid-txt0 p{font-size:15px !important; line-height:21px !important; margin-top:18px;}
.slid-txt0 span {margin-top: 8px;  line-height: 19px;}
.scroll{ bottom: -40px;}
.scroll span{height:100px; margin-bottom:5px;}
.scroll p{font-size:16px !important; font-weight:200 !important;}

/*서브상단비쥬얼*/
.sub-visual{height:380px; background-position: center;}
.sub-tit h1{font-size:21px;}
.sub-tit h1 span{margin-top:21px; font-size:42px;}
.sub-tit h2{font-size:40px; line-height:47px;}
.sub-tit h2 span{margin-top:26px; font-size:19px; line-height:25px;}
.sub-tit h3, .sub-tit h4{font-size:40px; bottom:60px;}
.sub-tit h3 span, .sub-tit h4 span{padding-top:15px; font-size:17px;}

/*section 01*/
#sec01{flex-flow:column-reverse; position:relative;}
#sec01::before{content:''; display:block; width:100%; height:100%; background:rgb(0,0,0,.2); position:absolute; top:0; left:0;}
#sec01 .sec01-ph{width:100%; height:55%; padding-top:0px; background:transparent; position:absolute; top:3%;}
#sec01 .sec-txt{width:100%; height:100%}
#sec01 .sec01-ph img{width:130px; }
#sec01 .sec-txt > div{position:absolute; bottom:50px; left:50%; transform:translateX(-50%); }
#sec01 .sec-txt > div h3{font-size:16px; }
#sec01 .sec-txt > div h1{font-size:34px; margin-top:12px;}
#sec01 .sec-txt > div p{font-size:15px; line-height:21px; margin:20px 0 30px;}
#sec01 .sec-txt > div p span{margin-top:12px; line-height:19px;}
.viewbtn{font-size:15px; }
.viewbtn img{height: 13px; margin-left:12px;}


/*section02~04*/
#sec01, #sec02, #sec03, #sec04, #sec05{height:600px}
#sec02::before, #sec03::before,#sec04::before, #sec05::before{width:100%; height:100%; background:rgb(0,0,0,.2);}
.sec-txt0 h1{font-size:38px; line-height: 40px;}
.sec-txt0 p{font-size:17px; line-height:24px;  margin:15px 0;}
#sec02 .viewbtn, #sec04 .viewbtn{margin-top:60px;}
#sec03 .viewbtn, #sec05 .viewbtn{margin-top:60px;}
#sec04 .sec-txt0 h1 span, #sec03 .sec-txt0 h1 span, #sec05 .sec-txt0 h1 span{ font-size:21px; top:-40px;}
#sec02 .sec-txt0 div > img{width:210px; margin-top:10px;}

/*bannter / office*/
#banner, #office{height:340px;}
#banner .bntext p{font-size:18px;}
#banner .bntext h1{font-size:38px; margin:15px 0 40px;}
#banner .bntext a.morebtn{font-size:15px; line-height:32px; padding:0 32px; }


.sub_tit_b{font-size:30px; margin:80px 0 45px; font-weight:600}
#bo_gall, #bo_list, .flex-wrap, #bo_v{padding-bottom:80px !important;}
.contents-wrap{margin:0 auto 80px;}


/*비지니스 - 코그플레이*/
.about-cog{padding:80px 0 70px 0;}
.about-cog h1{font-size:32px; margin-bottom:45px;}
.about-cog h1::before{height:15px; bottom:-1px;}
.about-cog .wrap{flex-flow:column;}
.cogl{width:100%; text-align:center;}
.cogl img{width:160px;}
.cogr{width:100%; margin-bottom:0px; margin-top:20px;}
.cogr span{font-size:18px; line-height:27px;}
#cog h2{font-size:24px; line-height:32px; margin:25px 0 20px;}
#cog p{font-size:15px; line-height:19px;}
.cog02{padding:120px 30px;}
.cog02 h2{margin:20px !important; }
.cog02 img{width:60px}
@keyframes up-down{
  from{
    transform: translatey(0px);
  }
  to{
    transform: translatey(-15px);
  }
}
.more{width: 180px; margin-top:34px; }
.more a {font-size:14px; font-weight:500; line-height:40px; } 



/*비전*/
.vision_tit {margin:20px auto 40px;}
.vision_tit h3{font-size:23px; text-align:center;}
.vision_tit p{font-size:17px; padding:10px 38px; margin-top:12px;}
.vision_logo img {width: 200px;}
#vision ul.point{width:100%;}
#vision ul.point > li{width:32%}
#vision ul.point > li > div p, #vision ul.point li > div ul {padding: 0 6px;  font-size: 15px; line-height:22px;}
#vision ul.point > li span{font-size:19px;}
#vision ul.point li > div ul li:first-child{margin-bottom:8px}
.vision_con{padding:70px 0; margin-top: 110px;}
.vision_con ul{width:90%}
.vision_con ul li:first-child{margin-bottom:20px;}
.vision_con ul li span{width:36px; line-height:36px; font-size:14px; margin-bottom:6px; }
.vision_con ul li p{font-size:16px; line-height:22px;}

/*조직도*/
.organ0101 li, .organ0102 li{width:23%;}
.organ0101 > li > div p, .organ0102 > li > div p{ padding: 0 10px; font-size: 16px;}
.organ0102{margin-top:20px;}

/*조직도
.organ-wrap li:first-child > div,
.organ-wrap li:nth-child(2) > div span{height:40px; line-height:40px;font-size:13px}
.organ-wrap li:nth-child(2){margin-top:20px}
.organ-wrap li:first-child > div{max-width:100px}
.organ-wrap li:nth-child(2) > div span{max-width:230px}
.organ-wrap li:nth-child(2) > div:nth-child(2){width:calc(50% + 50px)}
.organ-wrap li:nth-child(2) > div:nth-child(2) > div{width:calc(100%/3 - 5px)}
.organ-wrap li:nth-child(2) > div:first-child{width:calc(50% - 60px)}
.organ-part{margin-top:10px}
.organ-part > div:first-child{width:calc(50% - 60px)}
.organ-part > div:nth-child(n+2){width:calc(70%/4 - 5px)}
.organ-part > div:nth-child(n+2){margin-top:15px}
.organ-part > div .part-tit{height:40px;}
.organ-part > div .part-tit p span{font-size:11px;display:inline-block}
.organ-part > div .team-con dd:before{top:8px}
.organ-part > div .team-wrap span{padding:6px; font-size:13px;}*/

/*인재채용*/
.network-txt:before {background-size: 70px;}
.network-txt {font-size: 18px; margin: 80px auto 50px auto;}
.recruit-info{flex-flow:column; margin:20px 0 60px;}
.recruit-info li{ width: 100%; margin-top:20px; flex-flow: row; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.recruit-info li .img{width:90px; height:90px; line-height:90px;}
.recruit-info li .img img{max-width:60%;}
.recruit-info li .con{width:calc(100% - 90px); text-align:left; padding-left:20px; margin-top:0;}
.recruit-info li .con p.tit{font-size:17px; margin-bottom: 7px;}
.recruit-info li .con p.tit strong{font-weight:600}
.advantage {padding: 100px;}

/*고객문의*/
.contact-con{width:100%}
.contact-kakao{position:fixed;z-index:99;top:auto;right:10px; bottom:10px; width:70px;;text-align:right; margin-top:75px}

/* footer */
#ft_wr{padding-top:55px;}
#ft_company h1 {font-size:19px; margin-bottom:25px;}
#ft_company .ft_info li{font-size:15px; line-height:25px;}
#ft_company .ft_info li p a{margin-left: 8px; font-size:12px; padding:5px 9px 4px 9px;}
#ft_company .ft_info li p a:hover{border-radius:5px;}
.ft_right .fr_menu > ul > li a{ padding:0 10px; padding-bottom:5px; line-height:1px; font-size:13px;}
.ft_right .fr_menu > ul > li .f-smenu {font-size:13px}
.ft_right .fr_menu > ul > li .f-smenu li a{padding:0 12px; line-height:24px; font-size:13px;}
.to-top{font-size:15px; padding-top:24px;}
.to-top:before{font-size:13px; line-height:20px;}
#ft_copy {margin:50px auto 0; padding:18px 0; font-size:13px;}
/* footer */
}



@media(max-width:500px){
/*header*/
#hd, #gnb #gnb_1dul, #hd_wrapper, .hd-top > ul li.t-menu{height:64px;}
#gnb .gnb_1dli{line-height:64px;}
#logo img{width:120px}
#gnb .gnb_menu_btn{width:30px; height:30px;}
#gnb .gnb_menu_btn img, #gnb .gnb_close_btn img{width:24px;}
#gnb_all .gnb_al_li .gnb_al_a{font-size:22px;padding:16px 0 5px 0;}
#gnb_all .gnb_al_li li a{font-size:16px; line-height:32px;}
#gnb_all .gnb_al_li.open ul{margin-bottom:15px;}
#gnb_all .hd-top{top: 70px; left: 30px;}
#gnb_all .hd-top > ul li.t-menu > a {padding:0; font-size:17px; font-family: 'Outfit', serif !important;}
#gnb_all .hd-top > ul li.t-menu{height:35px;}
#gnb_all .t-smenu{top:35px;}
#gnb_all .hd-top > ul li.t-menu > a{font-size:15px;}
#gnb_all .hd-top > ul li.t-menu i {font-size: 14px;}
#gnb_all .hd-top > ul li.t-menu{margin-right:15px;}
#gnb_all .t-smenu li {min-width: 90px;}
#gnb_all .t-smenu li a{font-size:12px; padding: 9px 13px;}
/*header*/

/*모달*/
#modal{width:90%; height:280px; }
.modal_close{top:16px;}
.modal_close img{width:22px;}
.md-txt img{width:70px;}
.md-txt h1{font-size:22px; margin:20px 0 15px 0;}
.md-txt p{font-size:14px; line-height:20px;}

/*메인비쥬얼*/
#main_visual{height:60vh}
#main_visual .slid-con{width:80%}
#main_visual .slid-txt{top:50%;  transform: translateY(-40%);}
#main_visual .slid-txt h1, .slid-txt0 h1{font-size: 29px; line-height:33px; margin-bottom: 20px;}
#main_visual .slid-txt h2{font-size: 19px; letter-spacing:3px;}
#main_visual .slid-txt p, .slid-txt0 h3{font-size:15px; line-height: 21px;}
#main_visual .slid-txt img{width:190px; margin-bottom:40px;}
#main_visual .swiper-pagination{width:12px;}
#main_visual .swiper-pagination-bullet{width:6px; height:6px; margin:16px 0;}
#main_visual .swiper-pagination-bullet-active{width:12px;height:12px;}
#main_visual .swiper-pagination::before{width:1px;}
#main_visual .sd-txt01{height:140px;}
.slid-txt0 h3{margin-bottom:10px;}
.slid-txt0 p{font-size:14px !important; line-height:20px !important; margin-top:10px;}
.slid-txt0 span {margin-top: 8px;  line-height: 17px;}
.scroll{ bottom: -80px;}
.scroll span{height:60px; margin-bottom:0px;}
.scroll p{font-size:14px !important; font-weight:200 !important;}

/*서브상단비쥬얼*/
.sub-visual{height:320px;}
.sub-tit h1{font-size:14px;}
.sub-tit h1 span{margin-top:15px; font-size:26px;}
.sub-tit h2{font-size:26px; line-height:32px;}
.sub-tit h2 span{margin-top:18px; font-size:16px; line-height:20px;}
.sub-tit h3, .sub-tit h4{font-size:32px; font-weight:500;  bottom:50px;}
.sub-tit h3 span, .sub-tit h4 span{padding-top:13px; font-size:14px; font-weight:400}

/*section 01*/
#sec01 .sec01-ph{height:50%; top:4%;}
#sec01 .sec01-ph img{width:100px; }
#sec01 .sec-txt > div{bottom:50px;}
#sec01 .sec-txt > div h3{font-size:14px; }
#sec01 .sec-txt > div h1{font-size:28px; margin-top:10px;}
#sec01 .sec-txt > div p{font-size:13px; line-height:18px; margin:15px 0 20px;}
#sec01 .sec-txt > div p span{margin-top:12px; line-height:19px;}
.viewbtn{font-size:13px; }
.viewbtn img{height: 11px; margin-left:10px;}


/*section02~04*/
#sec01, #sec02, #sec03, #sec04, #sec05{height:520px}
.sec-txt0 h1{font-size:29px; line-height: 34px;}
.sec-txt0 p{font-size:14px; line-height:20px;  margin:13px 0;}
#sec02 .viewbtn, #sec04 .viewbtn{margin-top:50px;}
#sec03 .viewbtn, #sec05 .viewbtn{margin-top:50px;}
#sec04 .sec-txt0 h1 span, #sec03 .sec-txt0 h1 span, #sec05 .sec-txt0 h1 span{ font-size:16px; top:-30px;}
#sec02 .sec-txt0 div > img{width:190px; margin-top:10px;}

/*bannter / office*/
#banner, #office{height:340px;}
#banner .bntext p{font-size:18px;}
#banner .bntext h1{font-size:38px; margin:15px 0 40px;}
#banner .bntext a.morebtn{font-size:15px; line-height:32px; padding:0 32px; }
#office p{font-size:14px; bottom:20px; }


.sub_tit_b{font-size:28px; margin:60px 0 35px; font-weight:600}
#bo_gall, #bo_list, .flex-wrap, #bo_v{padding-bottom:60px !important; }
.contents-wrap{margin:0 auto 60px;}


/*비지니스 - 코그플레이*/
.about-cog{padding:60px 0 70px 0;}
.about-cog h1{font-size:28px; margin-bottom:38px;}
.about-cog h1::before{height:14px;}
.cogl img{width:130px;}
.cogr{margin-top:10px;}
.cogr span{font-size:16px; line-height:24px;}
#cog h2{font-size:20px; line-height:27px; margin:20px 0 20px;}
#cog p{font-size:14px; line-height:19px;}
.cog02{padding:100px 20px; background-attachment: initial;}
.cog02 h2{margin:16px !important; }
.cog02 img{width:5s0px}
.more{width: 160px; margin-top:25px; }
.more a {font-size:13px; line-height:36px; } 

/*비전*/
.vision_tit {margin:15px auto 30px;}
.vision_tit h3{font-size:20px; line-height:25px; text-align:center;}
.vision_tit p{font-size:15px; padding:8px 30px; margin-top:13px;}

.vision_logo img {width: 160px;}
#vision ul.point{width:100%; flex-flow:column}
#vision ul.point > li{width:50%; margin-bottom:20px;}
#vision ul.point > li:last-child{margin-bottom:0;}
#vision ul.point > li > div p, #vision ul.point li > div ul {padding: 0 6px;  font-size: 15px; line-height:25px;}
#vision ul.point > li span{font-size:20px;}
#vision ul.point li > div ul li:first-child{margin-bottom:10px}
.vision_con{padding:60px 0; margin-top: 80px;}
.vision_con ul li:first-child{margin-bottom:20px;}
.vision_con ul li span{width:32px; line-height:32px; font-size:12px; margin-bottom:4px; }
.vision_con ul li p{font-size:15px; line-height:19px;}

/*조직도*/
.organ0101, .organ0102 { width: 90%;}
.organ0101 li{width:50%;}
.organ0102 li{width:47%}
.organ0102 > li:nth-child(1), .organ0102 > li:nth-child(2){margin-bottom:5px;}
.organ0102{margin-top:25px;}

/*조직도
.organ-wrap li:first-child > div, .organ-wrap li:nth-child(2) > div span{height:36px; line-height:36px; font-size:12px;}
.organ-part > div .team-wrap{margin:0;}
.organ-part > div .team-wrap span{font-size:12px;}*/

/*인재채용*/
.network-txt:before {background-size: 50px;}
.network-txt { font-size: 15px; margin: 70px auto 30px auto;}
.advantage{padding:80px;}
.recruit-info{margin:10px 0 50px;}
.recruit-info li .img{width:80px; height:80px; line-height:80px;}
.recruit-info li .con{width:calc(100% - 80px); padding-left:12px;}
.recruit-info li .con p.tit{font-size:16px; }
.recruit-info li .con p {font-size:13px; line-height:15px;}

/* footer */
#ft_wr{padding-top:50px; position:relative;}
#ft_company h1 {font-size:17px; margin-bottom:20px;}
#ft_company .ft_info li{ font-size: 14px; line-height: 20px; flex-flow: column; align-items: flex-start; margin-bottom: 10px;}
#ft_company .ft_info li:last-child{margin-bottom:0;}
#ft_company .ft_info li p{ flex-flow: column; align-items: flex-start;}
#ft_company .ft_info li p a{margin-left: 0px; margin-top:5px; font-size:11px; padding:4px 7px 3px 7px;}
#ft_company .ft_info li p a:hover{border-radius:5px;}
.ft_right .fr_menu{display:none;}
.to-top{font-size:13px; padding-top:22px; position:absolute; top:45px; right:0;}

#ft_copy {margin:40px auto 0; padding:15px 0; font-size:12px;}
/* footer */
}


@media (max-width: 420px){
#vision ul.point > li {width:65%}
}

@media(max-width:320px){
/*모달*/
#modal{height:250px; }
.modal_close{top:15px;}
.modal_close img{width:20px;}
.md-txt img{width:60px;}
.md-txt h1{font-size:19px; margin:20px 0 15px 0;}
.md-txt p{font-size:13px; line-height:18px;}

/*section 01*/
#sec01 .sec01-ph{top:3%;}
#sec01 .sec-txt > div{bottom:45px;}
#sec01 .sec-txt > div h3{font-size:13px; }
#sec01 .sec-txt > div h1{font-size:26px;}
#sec01 .sec-txt > div p{font-size:12px; line-height:17px;}
#sec01 .sec-txt > div p span{margin-top:12px; line-height:16px;}
.viewbtn{font-size:12px; }
.viewbtn img{height: 9px; margin-left:8px;}

/*section02~04*/
.sec-txt0 h1{font-size:27px; line-height: 32px;}
.sec-txt0 p{font-size:13px; line-height:19px;  margin:12px 0;}
#sec04 .sec-txt0 h1 span, #sec03 .sec-txt0 h1 span, #sec05 .sec-txt0 h1 span{ font-size:15px; top:-26px;}
#sec02 .sec-txt0 div > img{width:150px; margin-top:10px;}

/*조직도*/
.organ0101, .organ0102 { width: 100%;}
.organ0101 li{width:50%;}
.organ0102 li{width:48%}
.organ0101 > li > div p, .organ0102 > li > div p{font-size: 14px;}
.organ0102{margin-top:10px;}
}