@charset "utf-8";

/* s_visual */
#sub_top_Wrap{}

.s_visual { position:relative;width:100%; margin: 0 auto; height:500px; line-height:1.4; box-sizing:border-box;overflow:hidden; background:no-repeat center center; background-size:cover; padding-top: 140px;}
.s_visual .inner{height: 100%;}
.s_visual .inner .txt_box{position: absolute; bottom: 150px;}
.s_visual .s_visual_in { position:relative; display:table; width:94%; height:100%;  z-index:2; max-width:1280px; margin: 0 auto;}
.s_visual .sv_tit {box-sizing:border-box; color:#fff; text-align: center; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%)}
.s_visual .sv_tit h2 {font-size: 4.2rem; font-weight: 600; line-height: 1em;}
.s_visual .sv_tit p {font-size: 1.6rem; font-weight: 400; margin-top: 2rem; color: #fff; margin-bottom: 0;}

.sub_menu_wrap {width:100%; height:80px; line-height:80px; margin: 0 auto; max-width: 100%; position:relative; font-weight:400; box-sizing:border-box; z-index:14; background: transparent;}
.sub_menu_wrap .m_dep_tit,
.sub_menu_wrap .m_1dep_box,
.sub_menu_wrap br{display:none;}

.sub_menu_wrap .m_home{position:static; display:block; width:80px; height:80px; float:left; background:url("/images/sub/ico_home.png");  background-size: 100% auto; border: 1px solid #ddd; border-left: 0; border-top: 0;}
.sub_menu_wrap .m_2dep_box {text-align:center; width:100%; }
.sub_menu_wrap .m_2dep_box .smenu{display:block; background-color: #fff; border-width: 3px; border-style: solid; border-image: linear-gradient(to right, #75f6d2,#5e96dc, #39e5fc); border-image-slice: 3; border-top: 0; border-right: 0; border-left: 0;}
.sub_menu_wrap .m_2dep_box li {position:relative; display:inline-block; color:#686868; font-size: 1em; font-weight:400; padding: 0 2rem;}
.sub_menu_wrap .m_2dep_box li:first-child:before{display:none;}
.sub_menu_wrap .m_2dep_box li a{color: #666; font-size: 1.8rem; font-weight: 500;}
.sub_menu_wrap .m_2dep_box li a:hover{ color:#015889;}
.sub_menu_wrap .m_2dep_box li a{display: block; width: 100%; height: 100%;}
.sub_menu_wrap .m_2dep_box li a.on{ color:#015889;}

.s_visual .sv_tit h2{font-size: 3.6rem;}
.s_visual .sv_tit p{font-size: 1.5rem; margin-top: 1rem; margin-bottom: 0;}
.sub_menu_wrap .s-inner{width: 100%;}
/* Sub-Menu */
.sub_menu_wrap .m_2dep_box .smenu{display:block}
.sub_menu_wrap .m_2dep_box li {position:relative; display:inline-block; color:#686868; padding:0 30px; font-size: 1em; }
.sub_menu_wrap .m_2dep_box li:before{content:""; width:1px; height:12px; background:#e5e5e5; position:Absolute; left:0; top:50%; margin-top:-6px;}
.sub_menu_wrap .m_2dep_box li:first-child:before{display:none;}
.sub_menu_wrap .m_2dep_box li.s_on{color:#002358; }
.sub_menu_wrap .m_2dep_box li a.on{ color:#002358; }
.sub_menu_wrap .s-inner{background: #fff; margin: 0 auto; max-width: 1440px; height: 80px; width: 100%; border-bottom: 1px solid #ddd;  border-right: 1px solid #ddd;}
.sub_menu_wrap .m_home a{position:static; display:block;float:left; background: url("/images/sub/ico_home.png"); border:0; background-size: 100% auto; border-right: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-bottom: 1px solid #ddd;}
.sub_menu_wrap .m_dep_box{display:block; width:326px; float:left; border-right:1px solid rgba(255,255,255,0.3); text-align:left; cursor:pointer;height:60px; line-height:60px; border-right:1px solid #e5e5e5; font-size: 1.7rem; }
.sub_menu_wrap .m_dep_tit {display:block; background:url('/images/sub/arrow_down.png') no-repeat 90% center; height:60px; line-height:60px; color:#333333; box-sizing:border-box; padding:0 15px 0 35px; cursor:pointer;}
.sub_menu_wrap .m_dep_box .smenu{ display:none; width:calc(100% + 2px); margin-left:-1px; background:#f9f9f9; box-sizing:Border-box; border:1px solid #ddd; border-top:0;}
.sub_menu_wrap .m_dep_box .smenu li {margin:0; width:100%; display:block; box-sizing:border-box;  border-top:1px dotted #ddd; padding:0;}
.sub_menu_wrap .m_dep_box .smenu li:hover{}
.sub_menu_wrap .m_dep_box .smenu li:hover a { border:0; color: #101f34; font-weight: 500;}
.sub_menu_wrap .m_dep_box .smenu li a.on{color:#101f34; border:0; font-weight: 500;}
.sub_menu_wrap .m_dep_box .smenu li:first-child{border-top:0;}
.sub_menu_wrap .m_dep_box .smenu a{ color:#333; display:block; width:100%;  padding:1em 15px; box-sizing:border-box; line-height:normal; font-size: 0.9em;}
.sub_menu_wrap .m_2dep_box li:before{display:none;}

.sub_menu_wrap{height: 80px;}
.sub_menu_wrap .s-inner{height: 80px; border: 1px solid #ddd;}
.sub_menu_wrap .m_dep_box{ height: 80px;}
.sub_menu_wrap .m_dep_tit{padding-left: 5%; font-size: 1.5rem; height: 80px; line-height: 80px;}


/* #subTitle{font-size: 3.2rem; text-align: center; font-weight: 600; color: #222; padding: 70px 0;} */

@media all and (max-width:999px){
    /* #subTitle{padding: 7% 0; font-size: 3rem;} */
    .s_visual{padding-top: 80px; height: 50vh;}
    .sub_menu_wrap{height: 60px; margin-top: -60px;}
    .sub_menu_wrap .m_dep_tit{height: 60px; line-height: 60px;}
    .sub_menu_wrap .s-inner{height: 60px;}
    .sub_menu_wrap .m_home{width: 60px; height: 60px;}
    .sub_menu_wrap .m_dep_box{height: 60px; width: calc(50% - 30px);}
}
@media all and (max-width:640px){
    #subTitle{padding: 10% 0;}
}



.tabmenu { text-align: center; margin-bottom: 30px; overflow: hidden; }
.tabmenu li { display: inline-block; vertical-align: top;}
.tabmenu li a { position: relative; display: block; width: 150px; height: 150px; padding-top: 30px; border: 1px solid #d8e14c; border-radius: 100%; box-sizing: border-box;}
.tabmenu li a img { max-width: 40%; }
.tabmenu li p { color:#212121; font-size: 1.2em; margin-top: 15px; }
.tabmenu li a:hover::before { content: ''; position: absolute; left:0; top:0; border:8px solid #d8e14c; width: 100%; height: 100%; border-radius: 100%;}

/* ������ �ν��� ���� �κ� */
#tab01 .tabmenu a.menu1::before,
#tab02 .tabmenu a.menu2::before,
#tab03 .tabmenu a.menu3::before,
#tab04 .tabmenu a.menu4::before,
#tab05 .tabmenu a.menu5::before,
#tab06 .tabmenu a.menu6::before,
#tab07 .tabmenu a.menu7::before,
#tab08 .tabmenu a.menu8::before,
#tab09 .tabmenu a.menu9::before,
#tab10 .tabmenu a.menu10::before { content: ''; position: absolute; left:0; top:0; border:8px solid #d8e14c; width: 100%; height: 100%; border-radius: 100%; }

@media all and (max-width:976px) {
  .tabmenu li a { width: 120px; height: 120px; padding-top: 20px; }
  .tabmenu li a::before { border-width: 6px !important; }
}

@media all and (max-width:640px) {
  .tabmenu { padding: 0 7%; }
  .tabmenu li a { width: 22vw; height: 22vw; padding-top: 4vw; }
  .tabmenu li p { margin-top: 10px; }
}


.tabmenu2 { text-align: center; display: flex; justify-content: space-between; flex-wrap: wrap; width: 95%; max-width: 1440px; margin: 0 auto; overflow: hidden;  }
.tabmenu2 li {position: relative; width:24.5%; border: 1px solid #ddd; font-family:'Noto Sans KR', sans-serif; }
.tabmenu2.col2 { width: 50%; }
.tabmenu2.col2 li { width: 48%; }
.tabmenu2.col3 { width: 75%; }
.tabmenu2.col3 li { width: 31%; }
.tabmenu2.col5 li { width: 20%; }
.tabmenu2.col6 li { width: 15%; }
.tabmenu2.col7 li { width: 13%; }
.tabmenu2 li a {text-decoration: none; width:100%; height:70px; line-height: 70px; display: block; background:#fff; color:#525252; font-size:1.1em; box-sizing: border-box; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.tabmenu2 li:last-child a:before{display:none;}


/* ������ �ν��� ���� �κ� */
.tab01 .tabmenu2  a.menu1,
.tab02 .tabmenu2  a.menu2,
.tab03 .tabmenu2  a.menu3,
.tab04 .tabmenu2  a.menu4,
.tab05 .tabmenu2  a.menu5,
.tab06 .tabmenu2  a.menu6,
.tab07 .tabmenu2  a.menu7,
.tab08 .tabmenu2  a.menu8,
.tab09 .tabmenu2  a.menu9,
.tab10 .tabmenu2  a.menu10 { color:#fff; background:#101f34; font-weight:400; z-index:100; }


@media all and (max-width:976px) {
  .tabmenu2 li a { height:60px; line-height: 60px; font-size: 1.05em; }
}
@media all and (max-width:840px) {
  .tabmenu2 li { width:50%; }
  .tabmenu2 li:first-child, .tabmenu2 li:nth-child(2) { border-bottom: none; }
  .tabmenu2 li:first-child, .tabmenu2 li:nth-child(3) { border-right: none; }
}

@media all and (max-width:640px) {
	.tabmenu2 li a { height:50px; line-height: 50px; font-size: 1em; }
  .tabmenu2 li:last-child a:before{display:block;}
  .tabmenu2 li:nth-child(even) a:before{display:none;}


  .tabmenu2.col2,
  .tabmenu2.col3 { width: 100%; }
}


.tabmenu2.tabmenu3 {  max-width: 1400px; border-bottom: 3px solid #062b34; border-top: 1px solid #dedede ;  }
.tabmenu2.tabmenu3 li a { height:60px; line-height: 60px; display: block; background:#fff; color:#525252; font-size: 1.1em;border:1px solid #dedede; border-left-width:0; border-top-width:0;  box-sizing: border-box; }
.tabmenu2.tabmenu3 li a:before { display: none;  }




#subContent .vis_dep03{font-weight: bold; font-size: 30px;}


/* PORTFOLIO */

#pageCont{max-width: 1250px; margin: 0 auto 120px;}
.smenu{width: 420px; margin: 60px auto;}
.smenu ul{display: flex; justify-content: space-between; }
.smenu ul li a{font-family: 'Gilroy-Light'; color: #bbb;}
.smenu ul li.on a{color: #000;}
#pageCont .content{width: 100%;}
#pageCont .content ul{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 10px auto;align-content: flex-end;}
#pageCont .content ul li{max-width: 620px; margin-bottom: 20px;}
#pageCont .content ul li img{width: 100%;}
#pageCont .content .txt{border: 1px solid #ddd; padding: 15px;}
#pageCont .content .txt span{font-family: 'Gilroy-Light'; font-size: 14px; color: #212121; position: relative;}
#pageCont .content .txt span:nth-child(2){padding-left: 10px;}
#pageCont .content .txt span:nth-child(2)::after{display: none;}
#pageCont .content .txt span::after{content: ""; width: 1px; height: 10px; background-color: #212121; position: absolute; top: 4px; right: -8px;}
#pageCont .content .txt p{font-family: 'Pretendard'; font-size: 13px; color: #999; margin-top: 5px;}

@media all and (max-width:1300px) {
    #pageCont .content{width: 95%; margin: 0 auto;}
    #pageCont .content ul li{max-width: 49%;}
}
@media all and (max-width:740px) {
    .smenu{width: 370px; margin: 90px auto 40px;}
    .smenu ul li a{font-size: 14px;}
    #pageCont .content{width: 95%; margin: 0 auto;}
    #pageCont .content ul{justify-content: center;}
    #pageCont .content ul li{max-width: 100%;}
    #pageCont .content ul li img{width: 100%;}
    #pageCont .content .txt span{font-size: 13px;}
    #pageCont .content .txt p{font-size: 12px;}
}
@media all and (max-width:480px) {
    .smenu{width: 95%}
    .smenu ul{flex-wrap: wrap;}
    .smenu ul li a{font-size: 13px;}
}


/* ABOUT */


#pageCont .sec1{margin-top: 200px; padding-bottom: 90px; border-bottom: 1px solid #ddd;}
#pageCont .sec1 img{width: 100%;}
#pageCont .sec1 .txt{margin: 80px 0 60px; padding: 10px;} 
#pageCont .sec1 .txt p{margin: 40px 0; line-height: 2.3; color: #686868; font-size: 15px; opacity: 0.95;}
#pageCont .sec1 .txt .img{padding-top: 30px; width: 240px;  float: right;}
#pageCont .sec1 .txt img{width: 100%; image-rendering: auto;}
.about{font-family: 'S-CoreDream-3Light';}
.about .t-about{font-family: 'S-CoreDream-3Light'; font-weight: 600; color: #686868; line-height: -0.02em;}
.about h1{font-size: 25px; font-weight: normal; font-family: 'Gilroy-Light';}

#pageCont .sec2{margin-top: 100px; padding: 10px; font-weight: 300; padding-bottom: 100px; border-bottom: 1px solid #ddd;}
#pageCont .sec2 ul{width: 100%; display: flex; margin-top: 70px; justify-content: space-between; flex-wrap: wrap; height: 180px;}
#pageCont .sec2 ul li{width: 18%;padding-bottom: 30px; transition: 0.5s;}
#pageCont .sec2 ul li:hover img{opacity: 0.5; transition: 0.5s;}
#pageCont .sec2 ul li .img{width: 30px;}
#pageCont .sec2 ul li .txt{padding: 0px; margin: 15px 0;  width: 100%; color: #686868;transition: 0.5s; height: 25%;}
#pageCont .sec2 ul li .txt p{margin-top: 10px; font-size: 12px; line-height: 1.8;}
#pageCont .sec2 ul li img{width: 100%; transition: 0.5s;filter: brightness(60%);}


#pageCont .sec3{margin-top: 100px; padding: 10px; font-weight: 300;}
#pageCont .sec3 .img{margin-top: 70px; width: 100%; margin: 0 auto;}
#pageCont .sec3 img{width: 100%;}
#pageCont .sec3 .org_mo{display: none;}




@media all and (max-width:1300px) {
    #pageCont .sec1{ margin: 100px 20px;}
    #pageCont .sec2{ margin: 50px 20px 0px;}
    #pageCont .sec3{margin: 50px 20px 0px;}
}

@media all and (max-width:800px) {

    #pageCont .sec1 .txt{font-size: 14px;}
    .about h1{font-size: 25px;}

    #pageCont .sec2 ul{height: 100%;}
    #pageCont .sec2 ul li{width: 95%;}

    #pageCont .sec3 .org_pc{display: none;}
    #pageCont .sec3 .org_mo{display: block;}
    #pageCont{margin-bottom: 50px;}

}



/* CONTACT */

.contact{width: 60%; margin: 100px auto; font-family: 'Gilroy-Light','Pretendard';}
.contact .c-top{display: flex; margin: 60px 0 50px; padding: 0 10px;}
.contact .c-top .t-left{width: 22%; font-family: 'Gilroy-Light';}
.contact .c-top .t-left h4{margin-bottom: 6px;}
.contact .c-top .t-right p{margin-bottom: 5px;}

/* contact_230221 */

.contact{width: 60%; margin: 100px auto; font-family: 'Gilroy-Light','Pretendard';}
.contact .c-top{display: flex; margin: 130px 0 50px; padding: 0 10px;}
.contact .c-top .t-left1{width: 38%; font-family: 'Gilroy-Light';}
.contact .c-top .t-left1 h4{margin-bottom: 6px;}
.contact .c-top .t-left1 p{margin-bottom: 30px; font-size: 14px;}

input:focus {outline: none; border-bottom: 1px solid #000; color: #555555;font-family: 'Gilroy-Light','Pretendard';}
textarea:focus {outline: none; border-bottom: 1px solid #000;color: #555555;font-family: 'Gilroy-Light','Pretendard'; font-size: 14px;}
.contact .c-top .t-right1{margin-left: 12%; width: 50%;}
.contact .c-top .t-right1 > div { margin-bottom: 30px;}
.contact .c-top .t-right1 h5{font-weight: normal; margin-bottom: 10px;}
.contact .c-top .t-right1 #text{border: 0; border-bottom: 1px solid #aaa; padding: 10px 0; width: 100%;}
.contact .c-top .t-right1 #exp{border: 0; border-bottom: 1px solid #aaa; padding: 10px 0; width: 100%;}
.contact .c-top .t-right1 .phone-num{display: inline-block; position: relative; text-align: center;}
.contact .c-top .t-right1 .phone-num span{margin: 5px;}
.contact .c-top .t-right1 #tel_text{border: 0; border-bottom: 1px solid #aaa; padding: 10px 0; max-width: 50px; text-align: center;}
.contact .c-top .t-right1 .py-list{display: flex; flex-wrap: wrap; width: 120px;}
.contact .c-top .t-right1 .py-list input{margin: 5px 10px 0 5px;vertical-align: bottom;}
.contact .c-top .t-right1 .py-list .list{width: 100%; margin-bottom: 10px; font-size: 13px;}
.contact .c-top .t-right1 .button{width: 20%;margin: 0 auto; text-align: center;}
.contact .c-top .t-right1 #but{ border: 0; width: 70px; height: 40px; font-size: 14px;font-family: 'Gilroy-Light','Pretendard'; }
.contact .c-top .t-right1 .agree{text-align: center; margin-bottom: 20px;}
.contact .c-top .t-right1 .agree h5{margin-bottom: 0;}
.contact .c-top .t-right1 .agree label{display: inline-block; padding-left: 10px; vertical-align: top;}




@media all and (max-width:1400px) {
    .contact .c-top .t-left1{width: 100%;margin-top: 50px;}
    .contact .c-top .t-right1{width: 100%; margin-top: 50px;margin-left: 0;}
    .contact .c-top {flex-wrap: wrap; margin: 70px 0 50px;}
}

@media all and (max-width:1200px) {
    .contact{width: 70%;}
    .contact .c-top {margin: 0px 0 50px;}
}
@media all and (max-width:1024px) {
    .contact .c-top {margin: 60px 0 50px;}
}
@media all and (max-width:870px) {
  .contact{width: 90%;}
  .contact .c-top .t-left{width: 170px;}
  .contact .c-top .t-left h4{margin-bottom: 5px;font-size: 14px;}
.contact .c-top .t-right p{margin-bottom: 5px;font-size: 14px;}
}