/**************** gen ****************/
.color{color:var(--primary) !important;}
.white{color:white !important;}
.backcolor{background:var(--primary) !important;transition:0.4s;}
.backcolor:hover{background:#000 !important;}

.main_sec{overflow: hidden;padding:200px 0;}
.sec_con{ max-width:1320px; width:100%; margin:0 auto;padding:0 20px;  position: relative;  z-index: 2;}

.sec_title {width: 100%;max-width:650px;margin-bottom:90px; word-break: keep-all;font-family:'Pretendard';}
.sec_title > span{font-size:24px;font-weight:900;margin-bottom:20px;display:block;}
.sec_title h1{font-size:60px;text-align:left;font-weight:300; color:#333;line-height:1.2;transition-duration: 0.4s;word-break:keep-all;}
.sec_title h1 > span{font-weight:800;word-break: keep-all;}

.sub_sec{padding:200px 0;}
.sub_wrap{max-width:100%; width: 100%;margin: 0 auto;overflow: hidden;}
.sub_con{ max-width:1320px; width:100%; margin:0 auto;padding:0 20px;}

.sub_title {text-align:left;width: 100%;overflow: hidden;margin-bottom:50px;}
.sub_title h1{font-size: 90px;font-weight: 800;color: #333;position: relative;display: inline-block;}
.sub_title h1 span{color:var(--primary);}

.sub_tit h3{padding-top:15px;margin-bottom:30px;background-repeat: no-repeat; background-position: 0 0; font-weight: 400;font-size: 32px;line-height: 1.5;color: #000;word-break: break-all;}
.sub_tit h3 > span{color:var(--primary);}

.sub_btn{font-size: 15px;color: #fff;margin: 0;font-weight: 400;background: var(--primary);transition: 0.4s;display: inline-flex;padding: 12px 20px !important;width: 100%;max-width: 212px;align-items: center;justify-content: center;}

.paging_wrap {display: flex;justify-content: center;align-items: center;}

.submit_btn{margin:3px;font-size:18px;width: 100%;max-width:210px;background:var(--primary);border-radius: 0;height:60px;color: #fff;display: flex;align-items: center;justify-content: center;transition: 0.3s all;}
.submit_btn:hover{background:#050505;}

.checkbox {width: auto;display: inline-block !important;height: auto;margin-top:0;margin-bottom:0;}
.checkbox input{position: absolute;width:100%;height:100%;opacity: 0;margin-left:0 !important;}
.checkbox span{position: relative;cursor: pointer;}
.checkbox span:before {content: "";display: inline-block;border: 1px solid #ADB5BD;vertical-align: middle;background-image: url('../img/gen/icon-check.svg');width:25px;height:25px;background-size: 75% auto;background-repeat: no-repeat;background-position: 50% 50%;}
.checkbox input:checked + *:before {background-color:var(--primary);border-color:var(--primary);}


@media (max-width:1400px) {
    .main_sec{padding:150px 0;}
    .sec_title h1{font-size:50px;}
    .sec_title{max-width:600px;}
}

@media (max-width:850px) {
    .main_sec{padding:100px 0;}
    .sub_sec{padding:100px 0;}

    .obj_tit{font-size:20px;}
    .sec_title{margin:0 auto 70px;text-align:center;}
    .sec_title h1{font-size:48px;text-align:center;}

    .sub_title{padding:6rem 0; margin-bottom:0;}
    .sub_title h1{font-size:36px;padding: 0;word-break: break-all;}

    .sec_tab{font-size:16px !important;margin-bottom:5px;}
}
@media(max-width:650px){
    .sec_title > span{font-size:18px;}
    .sec_title h1{font-size:30px;}

    .sub_sec{padding:90px 0;}
}


/* tab */

.tab_wrap {display: flex;justify-content:flex-start;margin: 0 auto 100px;}

.sec_tab {width:auto;min-width:156px;height: 55px;padding:0 18px; max-width: 156px;background: #efefef;font-weight: 600;font-size: 18px;display: inline-flex;align-items: center;justify-content: center;text-align: center;word-break: keep-all;border-radius: 100px;color: #666;cursor: pointer;margin:0 5px;transition: all 0.3s;}
.sec_tab.on{color:#fff;background:var(--primary);}
.sec_tabcon{ display:none; overflow:hidden; }
.sec_tabcon.on{ display:block; }
.sub_wrap .sec_tab{max-width:280px;}
.sec_tab:hover{color:var(--primary);}
.sec_tab.on:hover{color:#fff;cursor:default;}

.sub_tab_wrap{display:flex;}
.sub_tab {width: auto;font-weight:600;margin: -1px 30px 0 -1px;font-size:18px;color: #333;text-align: left;cursor: pointer;word-break: keep-all;display: flex;align-items: center;justify-content: center;transition: all 0.3s;}
.sub_tab.on{cursor: inherit;pointer-events: none;}
.sub_tab.on:hover{cursor: inherit;pointer-events: none;}
.sub_tab:hover{color:#666;}
.sub_tab span {width:25px;height:25px;border: 1px solid #050505;margin-right: 12px;position:relative; z-index:1; transition-duration:0.3s; }
.sub_tab span:after{ content:''; position:absolute; z-index:0; top:0; left:0; width:0; height:100%; background-color:transparent; transition-duration:0.3s;}
.sub_tab:hover span:after{background-color:#000; width:100%; }
.sub_tab.on span{background:var(--primary);border-color:var(--primary);}
.sub_tab.on:hover span:after{background:var(--primary);border-color:var(--primary);}

.sub_tabcon{ display:none; overflow:hidden; }
.sub_tabcon.on{ display:block; }

@media(max-width:1010px){
    .sub_tab{font-size:18px;}
}

@media(max-width:850px){
    .sub_tab{margin-right:20px;}
    .sub_tab span{width:20px;height:20px;}
    .tab_wrap{margin:0 auto 70px}
}
@media(max-width:650px){
    .tab_wrap{flex-flow: row  wrap;}
    .sub_tab{margin:0 20px 20px 0;}
}


/**************** header ****************/

#hd{position:fixed;z-index:1000;top:0;left:0;width:100%;transition-duration:.3s;background:transparent;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%);}
.header_wrap{width:100%;z-index:200;height:100%;margin:0 auto;zoom:1;text-align:center;display:flex;justify-content:space-between;}

.header_logo_wrap{float:left;padding:21px 10px 21px 0;}
.header_logo_wrap:after,.header_logo_wrap:before{content:'';display:table;clear:both;}
.header_logo_wrap .logo_on{display:none;}

.gnb_1dli.addmenu{z-index:77;}
.menu_wrapper {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;}
.menu_wrapper > div {width:30px;height:auto;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;cursor: pointer;}
.menu_wrapper > div:hover, .menu_wrapper > div:focus {outline: none;}
.menu_wrapper .box {width:4px;height:4px;background:#fff;;margin: 3px 3px;display: inline-block;transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);}

.menu_wrapper .menu_item:hover .box{background:var(--primary);}

#nav_icon.close {opacity:1;}
#nav_icon.close .box:nth-child(2), #nav_icon.close .box:nth-child(4), #nav_icon.close .box:nth-child(6), #nav_icon.close .box:nth-child(8){opacity: 0;}

header#hd.fixed .menu_wrapper .menu_item .box{background:var(--primary);}
header#hd.hd_zindex .menu_wrapper .menu_item .box{background:var(--primary);}

header#hd.fixed{background:#fff;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%);}
header#hd.fixed .logo_on{display:block;transition-duration:.3s;}
header#hd.fixed .logo_off{display:none;transition-duration:.3s;}
header#hd.fixed .gnb_1dul li.gnb_1dli a{color:#333;}
header#hd.fixed .gnb_1dul li.gnb_1dli:after{background:#333;}

header#hd.hd_zindex .logo_on{display:block;transition-duration:.3s;}
header#hd.hd_zindex .logo_off{display:none;transition-duration:.3s;}
header#hd.hd_zindex.gnb_1dul li.gnb_1dli a{color:#333;}
header#hd.hd_zindex .gnb_1dul li.gnb_1dli:after{background:#333;}

header#hd.sub_hd .menu_wrapper .menu_item .box{background:var(--primary);}
header#hd.sub_hd{background:#fff;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%);}
header#hd.sub_hd .logo_on{display:block;transition-duration:.3s;}
header#hd.sub_hd .logo_off{display:none;transition-duration:.3s;}
header#hd.sub_hd .gnb_1dul li.gnb_1dli a{color:#333;}
header#hd.sub_hd .gnb_1dul li.gnb_1dli:after{background:#333;}
header#hd.sub_hd #gnb_1dul .gnb_1da{color:#333;}


/* 메뉴 */

#gnb{position:relative; text-align:center;}

#gnb_1dul{z-index:101;height:100%;}
#gnb_1dul .gnb_1dli{float:left;position:relative;height:100%;}
#gnb .gnb_1dli{position:relative;display:inline-block;zoom:1;line-height:50px;font-size:18px;letter-spacing:.05em;}
#gnb_1dul .gnb_1dli:before{content:"";position:absolute;left:0;right:100%;top:84px;height:2px!important;opacity:0;background-color:var(--primary);-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;height:100%;}
#gnb_1dul .gnb_1dli.add_menu:before{display:none;}
#gnb_1dul .gnb_1dli:hover:before{left:25px;right:25px;opacity:1;}
#gnb_1dul .gnb_1dli1{padding:0;}
#gnb_1dul .gnb_1da{padding: 12px 30px;display:inline-block;line-height:60px;font-size:17px;color:#fff;letter-spacing:-.02em;text-align:center; font-weight:700;transition: all ease .5s;}
#hd.fixed .gnb_1da{color:#333;}

/* #hd.hd_zindex #gnb_1dul .gnb_1da{padding: 12px 42px;min-width:140px;} */


#hd.fixed #gnb .gnb_1dli:after{background:#333;}
#gnb .gnb_1dli:last-child:after{display:none;}
#hd.hd_zindex #gnb .gnb_1dli:after{background:#333;}
.gnb_wrap {height: 100%;display: flex;}
#gnb_1dul {z-index: 101;height: 100%;}
#gnb_1dul #gnb_empty{text-align:center;color:#fff;}


/* 중메뉴 */
.gnb_2dli { display:none;}
.gnb_2dli{display:none}.gnb_2dul{display:none;position:absolute;top:0;left:0;}
.gnb_2da{display:block;text-align:center;/*text-transform:uppercase;*/text-decoration:none;position:relative;}
.gnb_2dli a.gnb_2da{font-size:15px;color:#777;line-height:1.3;padding:4px 0;letter-spacing:-0.025em;transition:.2s all;}
.gnb_2dli a.gnb_2da:hover{color:var(--primary);font-weight:600;}
#hd.hd_zindex #gnb-dep1{padding:15px 8px;}
.gnb_2da{-webkit-transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;-o-transition:.2s ease-in-out;transition:.2s ease-in-out;}

/* 대메뉴 오버시 */
#gnb .gnb_1dli:not(.gnb_mnal) { display:block; float:left; text-align:left;}
#gnb .gnb_1dli:last-child { margin:0; }
#gnb .gnb_2dul { top:0; min-width:auto; display:none; padding:10px 5px 15px;}
.gnb_2dul { position:relative; }
.gnb_2dli { display:block; }
#hd.hd_zindex { background-color:#fff; }
#hd.hd_zindex,
#hd.hd_zindex .gnb_1da,
#hd.hd_zindex .gnb_2dul { display:block; }
#hd.hd_zindex .gnb_1da{color:#333;}




/* 모바일 */

#mo_menu_wrap{display:none;position: relative;min-height:75px;width:40px;z-index: 10;transition: .25s ease-in-out;-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;}
ul.mo_gnb{display:none;}

#mo_menu_wrap{display:none;}

#m_nav_icon{height: 100%;display: flex;align-items: center;justify-content: center;flex-flow: column;position: relative;min-height:85px;width:100%;z-index:9998;transition: .25s ease-in-out;-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;}
#m_nav_icon .menu_wrapper{align-items: flex-end;}

#m_nav_icon.close{opacity:1 !important;color:#fff;}
#m_nav_icon.close .box:nth-child(2), #m_nav_icon.close .box:nth-child(4), #m_nav_icon.close .box:nth-child(6), #m_nav_icon.close .box:nth-child(8){opacity: 0;}

header#hd.active {min-height: 82px;}
body.active header#hd{background: transparent;border-bottom:none;box-shadow:none;}


#m_gnb{position:fixed;overflow-y:auto;z-index:9997;top:0;bottom: 0;right: -320px;width:100%;max-width:320px;padding-top:82px;background-color:#fff;line-height:1.5;transition: right 0.4s;box-shadow: 0 0 3px 5px rgb(0 0 0 / 5%);}

#m_gnb.open{right:0;height:100%;}
#m_gnb.open main#container:before{content:'';background:rgba(0,0,0,.4);width:100%;height:100%;z-index:999;position:absolute;top:0;left:0;}



#m_gnb  #gnb_1dul{height:auto;}
#m_gnb #gnb_1dul:after {content: '';display: block;clear: both;}
#m_gnb #gnb_1dul .gnb_1da{padding:12px 20px; color:#333;line-height:40px; width: 100%;text-align: left;position: relative;}
#m_gnb #gnb_1dul .gnb_1da:after{content: '';width: 10px;height: 10px;position: absolute;right:25px;top: calc(50% - 5px);border-top: 1px solid #333;border-right: 1px solid #333;transform: rotate(45deg);transition-duration: 0.3s;}
#m_gnb a.gnb_1da.open:after{transform: rotate(135deg)!important;}
#m_gnb #gnb_1dul .gnb_1dli{width:100%;height: auto;text-align: left;}

#m_gnb .gnb_2dul{background: #f4f4f4;padding: 10px 20px;margin: 2px 10px;}
#m_gnb .gnb_2dli a.gnb_2da{color:#999;text-align: left;}
#m_gnb .gnb_2dli a.gnb_2da:hover{color:#333;}
#m_gnb  #gnb_1dul .gnb_1dli:before{display:none;}

#m_gnb .add_menu_wrap {padding: 30px 20px 0;border-top: 1px solid #ddd;display: flex;margin:0 -2px;}
#m_gnb .add_menu_wrap .addmenu_pt{width:50%;margin:0 2px;}
#m_gnb .add_menu_wrap .addmenu_pt a{font-size:15px;color:#333;width:100%;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #333;}
#m_gnb li.add_menu.log_btn_wrap{display:block;}
#m_gnb li.add_menu.log_btn_wrap a{color:#333;}
#m_gnb a.hd_log_btn.login:after{background:#333;}
#m_gnb .logo {position: absolute;bottom: 60px;left: 50%;transform: translate(-50%, -0);opacity:0.6;}


body{right:0;transition: right 0.4s;width: 100%;position: relative;}
body.active {position: relative;right: 300px;transition: right 0.4s;}
body.active:before {content: '';position: absolute;z-index: 999;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0.5);}
#hd.active .header_logo_wrap{display:none;}
#hd.active .header_wrap{justify-content: flex-end;}



@media(max-width:1010px) {
    .header_logo_wrap img {width: 70%;}
    .header_logo_wrap{}
    .header_wrap {min-height:70px;align-items: center;height: 1px;}
    #gnb_1dul{display:none !important;}
    #mo_menu_wrap {display: flex;}
    #m_nav_icon{min-height:70px;}
    ul.gnb_1dul{display:none;}
    #gnb_btn{display:none;}
}



/**************** header_open ****************/

.gnb_all{display:flex;position:fixed;top:-100%;right:0;z-index:9;height:100%;width:100%;background:#000;overflow:hidden;align-items:center;transition:all ease .6s;}
.gnb_all.open{top: 0;}

.gnb_con{width:100%;max-width:1710px;margin:0 auto;position:relative;}
.gnb_all a.logo {margin: 0 auto; display: inline-block;}

button#gnb_close_btn { position: absolute; top:11px; right: 0;}
button#gnb_close_btn i {font-size:30px; color:#333;}

.gnb_all_wrap {width: 100%;height: 100%;display: flex;align-items: center;overflow-y: auto;justify-content: center;padding:30px}
#gnball .gnb_2dul{display: block;}

#gnball ul.gnb_all_1dul > li > ul{display:flex !important;flex-flow: row wrap;}
#gnball ul.gnb_all_1dul > li {width: 100%;position: relative;flex-flow: column;display: flex;margin-bottom:20px; border-bottom: 1px solid #ddd;padding-bottom:20px;}
#gnball ul.gnb_all_1dul > li:last-child{margin-bottom:0;border-bottom:none;}
#gnball ul.gnb_all_1dul > li .gnb_1da{padding:0 10px;line-height:1.2;}
#gnball ul.gnb_all_1dul > li.active .gnb_1da{color:var(--primary) !important;}

#gnball li.gnb_1dli > a {color: #999 !important;margin: 0;font-size: 24px;text-align: left;font-weight: 600;margin-bottom:8px;transition:0.3s;}
#gnball li.gnb_1dli > a:hover {color:var(--primary) !important;}
#gnball ul.gnb_all_1dul > li > ul > li > a{display:block;font-size:17px;color:#333;padding:5px 10px;position:relative;font-weight:400;}
#gnball ul.gnb_all_1dul > li > ul > li > a:hover{color:var(--primary);font-weight:600;text-decoration: underline !important;}


/* Case Study Showcase
================================================== */
.case-study-wrapper {position: absolute;top: 50%;left: 50%;z-index: 10;width: auto;margin: 0;padding: 0;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);list-style: none;}
.case-study-wrapper .case-study-name a {position: relative;list-style: none;margin: 0;display: block;text-align: center;padding: 0;font-size:60px;margin-top: 25px;margin-bottom: 25px;font-weight:800;line-height: 1.3;letter-spacing: 2px;color: #8e8d9a;opacity: 0.5;text-decoration: none;-webkit-transition: all 300ms linear;transition: all 300ms linear;}
.case-study-wrapper .case-study-name a:hover {text-decoration: none;}
.case-study-wrapper .case-study-name.active a {opacity: 1;color: #fff;}
.case-study-images {position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin:0;z-index:2;}
.case-study-images li {position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;list-style:none;-webkit-transition: all 300ms linear;transition: all 300ms linear;}
.case-study-images li .img-hero-background{position: absolute;width: 100%;height: 100%;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position:center center;background-repeat:no-repeat;top: 0;left: 0;overflow: hidden;list-style:none;opacity: 0;-webkit-transform: translateY(-30px);transform: translateY(-30px);-webkit-transition: all 300ms linear;transition: all 300ms linear;}
.case-study-images li.show .img-hero-background {opacity:0.5;-webkit-transform: translateY(0);transform: translateY(0);}
.case-study-images li .case-study-title{position: absolute;bottom: 30px;left: 30px;display: block;opacity: 0;color: #fff;z-index: 19;letter-spacing: 1px;font-size: 14px;-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;font-weight: 400;line-height: 16px;color: #fff;font-style: italic;-webkit-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition: all 300ms linear;transition: all 300ms linear;}
.case-study-images li.show .case-study-title {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}

.case-study-images .images01 .img-hero-background{background-image: url("../img/gen/gnball_01.jpg");}
.case-study-images .images02 .img-hero-background{background-image: url("../img/gen/gnball_02.jpg");}
.case-study-images .images03 .img-hero-background{background-image: url("../img/gen/gnball_03.jpg");}
.case-study-images .images04 .img-hero-background{background-image: url("../img/gen/gnball_04.jpg");}
.case-study-images .images05 .img-hero-background{background-image: url("../img/gen/gnball_05.jpg");}

@media(max-width:450px) {
    .case-study-wrapper .case-study-name a{font-size:48px;}
}



/**************** footer ****************/

footer{background:#050505; position: relative;}
footer p{color:#999;}
.ft_wrap{width:100%;max-width:1840px;margin:0 auto;padding:20px;}
.ft_top{padding:40px 20px;}

.ft_logo{color:#fff;font-size:18px;margin-bottom:20px;font-weight:700;}
.ft_wrap ul > li {display:flex;margin-bottom:10px;}
.ft_wrap ul > li:last-child{margin-bottom:0;}
.ft_wrap ul > li span{color:#fff;font-size:16px;font-weight:800;min-width:140px;}
.ft_wrap ul > li p{color:#999;font-size:16px;}
.ft_wrap ul > li > div{display:flex;flex-flow: column;}
.ft_copy{border-top:1px solid #999;font-size:15px;}


@media (max-width:650px) {
    .ft_top{text-align:center;}
    .ft_wrap ul > li {margin-bottom:20px;flex-flow: column;align-items: center;}
    .ft_wrap ul > li span{font-size:13px;width:100%;margin-bottom:5px;}
    .ft_wrap{text-align:left;}
    .ft_wrap ul > li > div{width:100%;text-align:left;}
    .ft_wrap ul > li p,footer p{font-size:13px;}
}

/* TOP버튼 */

#top_Button {position: fixed;z-index:1001;bottom:50px;right:10px;}

@media(max-width:850px){
    #top_Button{display:none !important;}
}



/***************** 좌우드래그 *****************/

.stockTbl-scrollbar-cover{display: none;}
.stockTbl-scrollbar-cover.off{display: none;}

@media(max-width:930px){
    .stockTbl-scrollbar-cover {display: block;position: absolute;  top: 0px;  left: 0px; right: 0px; bottom: 0px; background-color: rgba(0,0,0,0.5); }
    .stockTbl-scrollbar-cover .scroll-cover-txt {position: absolute; top: 50%; left: 0; width: 100%;text-align: center; color: #fff; font-size: 15px;}
    .stockTbl-scrollbar-cover .scroll-cover-txt i {font-size: 30px; display: block; margin-bottom: 20px; }
}


/**************** quick ****************/
.quick_menu {position: fixed;top: 50%;margin-top: -15rem;right: 0;z-index: 99;animation: quick-ani 0.8s 1s both;}
.quick_menu .quick_btn {padding: 2.5rem 0;width:4rem;height:24rem;background-color: #000;box-sizing: border-box;border: 1px solid rgba(255,255,255,0.3);display: flex;flex-wrap: wrap;flex-direction: column;align-items: center;justify-content: space-between;transition: 0.3S;}
.quick_menu .txt {color: #fff;font-weight: 800;width: 100%;height: auto;writing-mode: vertical-rl;display: flex;align-items: center;}
.quick_menu i{font-size:20px;color:#fff;}
.quick_menu .quick_btn:hover{background:var(--primary);border-color:var(--primary); }

@keyframes quick-ani { from {transform:translate(50% ,0); opacity:0;filter:Alpha(opacity=0);} to {transform:translate(0 ,0); opacity:1;filter:Alpha(opacity=100);}}

@media(max-width:1400px) {
    .quick_menu .quick_btn{width: 5rem;}
}
@media(max-width:850px) {
    .quick_menu{display:none;}
}