@charset "utf-8";
@import "./font.css";
@import "./base.css";

/* ==============================================================================================================
= v1.0 - 20190411
============================================================================================================== */

/* ==============================================================================================================
= Layout 기본스타일 지정
============================================================================================================== */

/*상단*/
.header{position:relative;border-bottom:1px #ddd solid;}
.header .topBar{height:30px;border-bottom:1px #ddd solid;}
.header .topLeft{position:absolute;top:0;left:0;border-left:1px #ddd solid;}
.header .topLeft li{float:left;position:relative;line-height:30px;border-right:1px #ddd solid;}
.header .topLeft li a{display:block;padding:0 10px;height:30px;font-size:0.85em;}
.header .topRight{position:absolute;top:0;right:0;overflow:hidden;}
.header .topRight li{float:left;position:relative;line-height:30px;}
.header .topRight li a{display:block;padding:0 10px;height:30px;font-size:0.85em;}
.header .topRight li:after{display:block;content:'';position:absolute;top:50%;right:-1px;margin-top:-5px;height:10px;border-right:1px #ddd solid;}
.header h1{height:80px;line-height:80px;text-align:center;}
.header #gnb{height:50px;line-height:50px;border-top:1px #ddd solid;}
.header #gnb > ul,
.header #gnb .inner > ul{padding-right:100px;}
.header #gnb > ul:after,
.header #gnb .inner > ul:after{display:block;content:'';clear:both;}
.header #gnb > ul > li,
.header #gnb > .inner > ul > li{float:left;width:12.5%;}/* 4:25%, 5:20%, 6:16.6666%, 7:14.2857, 8:12.5*/
.header #gnb > ul > li > a,
.header #gnb .inner > ul > li > a{display:block;font-size:1.15em;font-weight:bold;color:#333;text-align:center;}
.header #gnb > ul > li > ul{display:none;position:relative;background:#fff;border:1px solid #ddd;border-top:0;padding:0 0 10px 10px;z-index:2}
.header #gnb > ul > li > ul > li {display:block;line-height:30px;}
.header #gnb > ul > li.active > ul{display:block;}

#allMenu{display:none;position:absolute;top:130px;left:0;right:0;z-index:2;background:#f8f8f8;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:20px 0;}
#allMenu.active{display:block;}
#allMenu .depth01 > li{line-height:40px;padding-left:10px;box-sizing:border-box;float:left;width:14.2857%;}

#gnb.third .subMenu{display:none;position:absolute;top:50px;left:-200px;right:0;z-index:2;background:#f8f8f8;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
#gnb.third .subMenu.active{display:block;}
#gnb.third .subMenu > .inner > .depth02{float:left;padding:25px 20px;width:14.285714%;height:300px;background:#fff;border-right:1px solid #ddd;box-sizing:border-box;text-align:left;}
#gnb.third .subMenu > .inner > .depth02.first{border-left:1px solid #ddd;}
#gnb.third .subMenu > .inner > .depth02 > li{line-height:25px;}
#gnb.third .subMenu > .inner > .depth02 > li > a{display:block;margin-bottom:5px;height:32px;line-height:32px;font-size:1.05em;font-weight:bold;}

.header .gnbBar{height:80px;}
.header .gnbBar h1{position:absolute;top:50%;left:0;margin-top:-30px;height:60px;line-height:60px;text-align:left;}
.header .gnbBar #gnb{position:absolute;bottom:0;left:200px;right:0;border-top:0px none;}
.header .btn_searchToggle{position:absolute;bottom:0;right:50px;width:50px;height:50px;border:1px #ccc solid;box-sizing:border-box;}
.header .btn_navToggle{position:absolute;bottom:0;right:0;width:50px;height:50px;border:1px #ccc solid;box-sizing:border-box;}

/*하단*/
.footer{background:#ededed;border-top:1px solid #c2c2c2;}
.footer > .inner{margin-top:30px;padding:0 0 40px;}
.footer.useLogo > .inner{padding:0 0 40px 150px;}
.footer .footerNavBar{background:#343434;}
.footer .footerNavBar .inner{padding:0;border-left:1px #717171 solid;}
.footer .footerNavBar ul:after{display:block;content:'';clear:both;}
.footer .footerNavBar ul > li{float:left;width:14.2857%;border-right:1px #717171 solid;box-sizing:border-box;}/* 4:25%, 5:20%, 6:16.6666%, 7:14.2857, 8:12.5*/
.footer .footerNavBar ul > li > a{display:block;height:40px;color:#fff;line-height:40px;text-align:center;}
.footer .footerLogo{position:absolute;top:0;left:0;}
.footer .footerNav{margin:0 0 10px -20px;float:left;overflow:hidden;clear:both;}
.footer .footerNav li{position:relative;float:left;}
.footer .footerNav li a{display:block;padding:0 20px;font-size:0.9em;}
.footer .footerNav li:after{display:block;content:'';position:absolute;top:50%;right:-1px;margin-top:-5px;height:10px;border-right:1px #aaa solid;}
.footer .footerCopyright{font-size:0.85em;color:#444;line-height:140%;clear:both;}
.footer .footerLink{position:absolute;top:0;right:0;}
.footer .footerLink a{display:block;float:left;margin-left:10px;}

#container{margin:60px 20px;}

/*Guide*/
p{margin:10px 0;}
.exampleBox{display:block;position:relative;margin:10px 0;padding:20px;margin-bottom:20px;border:1px #111 solid;}

/*Transition*/
.transitionArea{}
.transitionArea:after{display:block;content:'';clear:both;}

/* 기본 */
.transFormBasic{float:left;display:block;width:80px;height:80px;margin:20px;background-color:#fff;border:1px solid #ccc;text-align:center;box-sizing:border-box;}
.transFormBasic:hover{transition-duration:1s;}
.transForm1-1:hover{border:2px solid red;}
.transForm1-2:hover{background-color:red;}
.transForm1-3:hover{font-size:1.2em;color:blue;font-weight:bold;}
.transForm1-4:hover{border-radius:40px;}
.transForm2-1:hover{transform:translate(50px,0);}
.transForm2-2:hover{transform:translate(0,50px);}
.transForm2-3:hover{transform:translate(50px,50px);}
.transForm3-1:hover{transform:rotate(90deg);}
.transForm4-1:hover{transform:scale(1.2);}
.transForm4-2:hover{transform:scale(0.8);}
.transForm5-1:hover{transform:skew(20deg, 0)}
.transForm5-2:hover{transform:skew(0, 20deg)}
.transForm5-3:hover{transform:skew(20deg, 10deg)}

/* 응용 */
.effectSection{position:relative;margin-bottom:40px;}
.effectSection:after{display:block;content:'';clear:both;}
.effectSection .title{display:block;padding:10px 0;margin:0;font-size:20px;}

.effectSection .header{width:1200px;height:100px;margin:0 auto;position:relative;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
.effectSection .header h1{display:block;width:200px;height:100px;line-height:100px;position:absolute;left:0;top:0;}

.effectSection .language{width:120px;position:absolute;right:0;top:0;background-color:#efefef;border-radius:0 0 10px 10px;z-index:9;}
.effectSection .language > .lang_selected{display:block;height:30px;line-height:30px;padding:0 20px;position:relative;font-size:0.85em;}
.effectSection .language > .lang_selected > span{display:block;width:8px;height:10px;line-height:10px;font-size:11px;color:#000;position:absolute;top:8px;right:10px;transition-duration:0.1s;}
.effectSection .language > .lang_list{display:none;padding:0 20px;}
.effectSection .language > .lang_list > a{display:block;height:30px;line-height:30px;border-top:1px dotted #ccc;font-size:0.85em;transition-duration:0.2s;}
.effectSection .language > .lang_list > a:hover{padding-left:10px;}
.effectSection .language:hover > .lang_selected > span{transform:rotate(180deg);}
.effectSection .language:hover > .lang_list{display:block;}

.effectSection .gnb{position:absolute;right:150px;top:30px;left:200px;z-index:7;}
.effectSection .gnb .deaph1{height:70px;background-color:#fff;}
.effectSection .gnb .deaph1:after{display:block;content:'';clear:both;}
.effectSection .gnb .deaph1 > li{float:left;width:25%;text-align:center;}
.effectSection .gnb .deaph1 > li > a{display:inline-block;height:70px;line-height:70px;position:relative;font-size:20px;z-index:1;}
.effectSection .gnb .deaph1 > li.menu1 > a{transition-duration:0.3s;}
.effectSection .gnb .deaph1 > li.menu1:hover > a{font-size:1.8em;color:#ff6600;}
.effectSection .gnb .deaph1 > li.menu2 > a:after{display:block;content:'';clear:both;width:6px;height:6px;position:absolute;left:50%;top:50%;margin-left:-3px;margin-top:-3px;border-radius:3px;background-color:#fff;z-index:-1;transition-duration:0.1s;}
.effectSection .gnb .deaph1 > li.menu2:hover > a:after{top:10px;background-color:#000;}
.effectSection .gnb .deaph1 > li.menu2 > a:after{display:block;content:'';clear:both;width:6px;height:6px;position:absolute;left:50%;top:50%;margin-left:-3px;margin-top:-3px;border-radius:3px;background-color:#fff;z-index:-1;transition-duration:0.1s;}
.effectSection .gnb .deaph1 > li.menu2:hover > a:after{top:10px;background-color:#ff6600;}
.effectSection .gnb .deaph1 > li.menu3 > a:after{display:block;content:'';clear:both;width:0;height:2px;position:absolute;left:50%;top:10px;margin-top:-2px;border-radius:1px;background-color:#fff;z-index:-1;transition-duration:0.2s;}
.effectSection .gnb .deaph1 > li.menu3:hover > a{color:#ff6600;}
.effectSection .gnb .deaph1 > li.menu3:hover > a:after{width:40px;margin-left:-20px;background-color:#000;}
.effectSection .gnb .deaph1 > li.menu4 > a:before{display:block;content:'';clear:both;height:1px;position:absolute;left:0;right:100%;top:0;background-color:#ff6600;transition-duration:0.1s;}
.effectSection .gnb .deaph1 > li.menu4 > a:after{display:block;content:'';clear:both;height:1px;position:absolute;left:100%;right:0;bottom:-1px;background-color:#000;transition-duration:0.1s;}
.effectSection .gnb .deaph1 > li.menu4:hover > a:before{right:0;}
.effectSection .gnb .deaph1 > li.menu4:hover > a:after{left:0;}

.effectSection .btnGnbAll{display:block;width:50px;height:50px;background:#fff url(../../images/injeinc/icon_btnGnbAll.png) no-repeat center center;position:absolute;right:0;bottom:10px;z-index:8;text-indent:-9999px;transition-duration:0.2s;}
.effectSection .btnGnbAll:hover{transform:rotate(45deg);}

.effectSection .slider{position:relative;}
.effectSection .slider > ul > li{height:300px;overflow:hidden;}
.effectSection .slider > ul > li img{display:block;width:100%;}
.effectSection .slider .sliderCtrl > a{display:block;width:100px;height:50px;position:absolute;top:50%;margin-top:-25px;text-indent:-9999px;}
.effectSection .slider .sliderCtrl > a:before{display:block;content:'';clear:both;width:50px;height:50px;position:absolute;top:0;border-bottom:1px solid rgba(255,255,255,0);transition-delay:0.1s;transition-duration:0.2s;}
.effectSection .slider .sliderCtrl > a.btn_slidePrev{left:10%;}
.effectSection .slider .sliderCtrl > a.btn_slidenext{right:10%;}
.effectSection .slider .sliderCtrl > a.btn_slidePrev:before{left:50px;background:url(../../images/injeinc/icon_btnSlidePrev.png) no-repeat left top;}
.effectSection .slider .sliderCtrl > a.btn_slidenext:before{right:50px;background:url(../../images/injeinc/icon_btnSlideNext.png) no-repeat right top;}
.effectSection .slider .sliderCtrl > a:hover:before{width:100px;height:23px;border-bottom:1px solid rgba(0,0,0,1);}
.effectSection .slider .sliderCtrl > a.btn_slidePrev:hover:before{left:0;}
.effectSection .slider .sliderCtrl > a.btn_slidenext:hover:before{right:0;}

.effectSection .maskBanner{margin:-10px;}
.effectSection .maskBanner:after{display:block;content:'';clear:both;}
.effectSection .maskBanner > li{float:left;width:25%;text-align:center;}
.effectSection .maskBanner > li .box{display:block;margin:10px;position:relative;box-sizing:border-box;overflow:hidden;transition-duration:0.2s;}
.effectSection .maskBanner > li .img{display:block;height:150px;}
.effectSection .maskBanner > li .img img{width:100%;min-height:150px;transition-duration:0.2s;}
.effectSection .maskBanner > li .mask{display:block;position:absolute;color:#fff;text-align:center;background-color:rgba(0,0,0,0.5);transition-duration:0.2s;}

.effectSection .maskBanner > li .box.type1 .mask{top:0;right:0;bottom:100%;left:0;}
.effectSection .maskBanner > li .box.type1:hover .mask{top:0;right:0;bottom:0;left:0;}
.effectSection .maskBanner > li .box.type2 .mask{top:100%;right:0;bottom:0;left:0;}
.effectSection .maskBanner > li .box.type2:hover .mask{top:0;right:0;bottom:0;left:0;}
.effectSection .maskBanner > li .box.type3 .mask{top:0;right:100%;bottom:0;left:0;}
.effectSection .maskBanner > li .box.type3:hover .mask{top:0;right:0;bottom:0;left:0;}
.effectSection .maskBanner > li .box.type4 .mask{top:0;right:0;bottom:0;left:100%;}
.effectSection .maskBanner > li .box.type4:hover .mask{top:0;right:0;bottom:0;left:0;}
.effectSection .maskBanner > li .box.type5 .mask{top:0;right:100%;bottom:100%;left:0;}
.effectSection .maskBanner > li .box.type5:hover .mask{top:0;right:0;bottom:0;left:0;}
.effectSection .maskBanner > li .box.type5:hover img{transform:scale(1.2);}
.effectSection .maskBanner > li .box.type6 .mask{top:50%;right:50%;bottom:50%;left:50%;}
.effectSection .maskBanner > li .box.type6:hover .mask{top:0;right:0;bottom:0;left:0;}
.effectSection .maskBanner > li .box.type6:hover img{transform:scale(1.2);}
.effectSection .maskBanner > li .box.type7 .mask{width:100px;height:50px;line-height:50px;left:-90px;transition-duration:0.1s;}
.effectSection .maskBanner > li .box.type7 .mask1{top:0;background-color:rgba(0,0,0,0.3);}
.effectSection .maskBanner > li .box.type7 .mask2{top:50px;background-color:rgba(0,0,0,0.6);}
.effectSection .maskBanner > li .box.type7 .mask3{top:100px;background-color:rgba(0,0,0,0.9);}
.effectSection .maskBanner > li .box.type7:hover .mask{left:0;}
.effectSection .maskBanner > li .box.type7 .mask:hover{background-color:rgba(255,100,0);}
.effectSection .maskBanner > li .box.type8 .mask{height:50px;line-height:50px;border-top:1px solid #000;opacity:0;}
.effectSection .maskBanner > li .box.type8 .mask1{width:100px;top:0;left:-100px;}
.effectSection .maskBanner > li .box.type8 .mask2{width:100px;top:50px;right:-100px;}
.effectSection .maskBanner > li .box.type8 .mask3{width:100px;top:100px;left:-100px;}
.effectSection .maskBanner > li .box.type8:hover .mask{opacity:1;}
.effectSection .maskBanner > li .box.type8:hover .mask1,
.effectSection .maskBanner > li .box.type8:hover .mask3{width:100%;left:0;}
.effectSection .maskBanner > li .box.type8:hover .mask2{width:100%;right:0;}
.effectSection .maskBanner > li .box.type8 .mask:hover{background-color:#000;}

.effectSection .btnMore{display:inline-block;height:11px;line-height:11px;padding-right:16px;position:absolute;top:-10px;right:10px;font-size:12px;overflow:hidden;}
.effectSection .btnMore:after{display:block;content:'';clear:both;width:11px;height:11px;position:absolute;top:0px;right:0;background:url(../../images/injeinc/icon_more.png) no-repeat 0 0;transition-duration:0.1s;}
.effectSection .btnMore:hover:after{right:-5px;transform:rotate(45deg);}

.effectSection .accordion.horizontal{float:left;width:595px;height:200px;margin-right:5px;position:relative;overflow:hidden;}
.effectSection .accordion.horizontal .accordionGup{padding-left:50px;height:200px;width:745px;box-sizing:border-box;}
.effectSection .accordion.horizontal .accordionGup:after{display:block;content:'';clear:both;}
.effectSection .accordion.horizontal .accordionGup .banner{float:left;width:170px;margin-left:-50px;z-index:0;transition-delay:0.1s;transition-duration:0.2s;transition-timing-function:linear;}
.effectSection .accordion.horizontal .accordionGup .banner.banner4{width:235px;}
.effectSection .accordion.horizontal .accordionGup .banner:hover{width:300px;z-index:1;}
.effectSection .accordion.horizontal .accordionGup .banner .box{display:block;position:relative;}
.effectSection .accordion.horizontal .accordionGup .banner img{display:block;height:200px;}

.effectSection .accordion.vertical{float:left;width:595px;height:200px;margin-left:5px;position:relative;overflow:hidden;}
.effectSection .accordion.vertical .accordionGup{height:200px;box-sizing:border-box;}
.effectSection .accordion.vertical .accordionGup .banner{display:block;height:50px;line-height:50px;padding-left:30px;border-bottom:1px solid rgba(255,255,255,0.3);color:#fff;box-sizing:border-box;transition-delay:0.1s;transition-duration:0.2s;transition-timing-function:ease;}
.effectSection .accordion.vertical .accordionGup .banner.banner1{background:rgba(0,0,0,0.2);}
.effectSection .accordion.vertical .accordionGup .banner.banner2{background:rgba(0,0,0,0.4);}
.effectSection .accordion.vertical .accordionGup .banner.banner3{height:100px;border-bottom:0;background:rgba(0,0,0,0.6);}
.effectSection .accordion.vertical .accordionGup .banner:hover{height:100px;}

.effectSection .iconLinkGup:after{display:block;content:'';clear:both;}
.effectSection .iconLinkGup > li{float:left;padding:5px;overflow:hidden;box-sizing:border-box;}
.effectSection .iconLinkGup > li .icon{display:block;width:34px;height:34px;text-indent:-9999px;}
.effectSection .iconLinkGup > li:hover .icon{transition-duration:0.5s;transform:rotateY(360deg);}
.effectSection .iconLinkGup > li .icon.icon1{background:url(../../images/injeinc/icon_sns.png) no-repeat 0 -34px;}
.effectSection .iconLinkGup > li .icon.icon2{background:url(../../images/injeinc/icon_sns.png) no-repeat 0 -68px;}


/* ==============================================================================================================
= Tab 기본스타일 지정
============================================================================================================== */
.tabBar{height:39px;margin-bottom:20px;border-bottom:1px solid #666;}
.tabBar > li{position:relative;float:left;margin-right:-1px;z-index:1;}
.tabBar > li > a{display:block;height:38px;line-height:38px;padding:0 25px;color:#777;border:1px solid #ddd;border-bottom:1px solid #666;background-color:#fff;}
.tabBar > li.active{z-index:2;}
.tabBar > li.active > a{color:#111;font-weight:bold;border:1px solid #666;border-bottom:1px solid #fff;}


/* ==============================================================================================================
= Slider 기본스타일 지정
============================================================================================================== */
.bx-wrapper .bx-viewport img{width:100%;}
.bx-wrapper .bx-controls div{display:inline-block;}
.bx-wrapper .bx-controls{position:absolute;bottom:30px;left:0;right:0;text-align:center;}
/*.bx-wrapper .bx-pager-item a{display:inline-block;margin:0 5px;width:15px;height:15px;background:none;border:1px #111 solid;text-indent:-9999em;border-radius:50%;}*/
.bx-wrapper .bx-pager-item a.active{background:#111;}
.bx-wrapper .bx-controls-direction a,
.bx-wrapper .bx-controls-auto-item a{display:inline-block;}
.slick-prev{position:absolute;top:50%;left:0;margin-top:-25px;width:50px;height:50px;text-indent:-9999px;background:#fff;z-index:1;}
.slick-next{position:absolute;top:50%;right:0;margin-top:-25px;width:50px;height:50px;text-indent:-9999px;background:#fff;z-index:1;}
.slick-dots{display:block;position:absolute;bottom:10px;left:0;right:0;text-align:center;}
.slick-dots li{display:inline-block;}
.slick-dots li button{display:inline-block;margin:0 5px;width:15px;height:15px;background:none;border:1px #111 solid;text-indent:-9999em;border-radius:50%;}
.slick-dots li.slick-active button{background:#111;}