@charset "utf-8";
#contents.contents_brand{margin: 0; padding:0; width: 100%;}

/* 스킵메뉴 */
.skip_menu {position:fixed; right:40px; top:30%; z-index:15;}
.skip_menu .menu_wrap{position: relative; overflow: hidden; width:160px; height: 34px;}
.skip_menu .menu_wrap .skip_go {position: absolute; left:160px; background:url(/images/main/bg_move_btn.png) no-repeat 0 0; overflow:hidden; box-sizing:border-box; padding-left:40px; height:34px; width:160px;}
.skip_menu .menu_wrap > span{position: absolute; top:10px; right: 12px; z-index: 3; overflow: hidden; width:12px; height: 14px;}
.skip_menu .menu_wrap > span a img{position: absolute; top:0; left: 0;}
.skip_menu .menu_wrap .skip_go a {display:block; overflow:hidden; color:#fff; font-size:13px; line-height:34px;}
.skip_menu .menu_wrap .skip_go a:hover {text-decoration:none;}

.brand{position: relative;}
.brand .tit{position: absolute; top:70px; right:0; left:0; margin:0 auto; width:990px; z-index: 2; text-align: center;}
.brand .tit strong{position: relative; padding-bottom:30px; color:#fff; font-size: 30px;}
.brand .tit strong:after{content:''; position: absolute; right:0; bottom: 0; left:0; margin:0 auto; width: 50px; height:1px; background-color: #fff;}
.brand .tit p{margin-top:85px; color:#fff; font-size: 16px;}

.brand > [class^="part"]{position:relative; overflow: hidden; width:100%; height:880px;}
/*.brand #intro{height:699px; background-color:#d0d0d0; background-attachment: fixed;}
.brand #comp{height: 880px; background-color:#1165b0; background-attachment: fixed;}
.brand #ceo{height: 880px; background-color:#f2e9dd; background-attachment: fixed;}
.brand #history{height: 880px; background-color:#2f343f; background-attachment: fixed;}*/
.brand #intro{height:699px; background:url(/images/jpn/brand/intro_bg.jpg) 50% 0 no-repeat ;}
.brand #intro2{height:900px; background:url(/images/jpn/brand/intro_bg2.jpg) 50% 0 no-repeat ;}
.brand #comp{height: 880px; background-color:#1165b0;}
.brand #ceo{height:880px; background:url(/images/jpn/brand/ceo_bg.jpg) 50% 0 no-repeat ;}
.brand #history{height:880px; background:url(/images/jpn/brand/history_bg.jpg) 50% 0 no-repeat ;}

.brand #intro .cons{width:100%; height: 100%;}
.brand #intro .cons .book{position:absolute; top:720px; left:0; right:0; margin: 0 auto; width:1150px;}
.brand #intro .cons .book .p_1{position:absolute; top:125px; left:80px; opacity:0;}
.brand #intro .cons .book .p_2{position:absolute; top:270px; left:80px; opacity:0;}
.brand #intro .cons .book .p_3{position:absolute; top:40px; left:625px; opacity:0;}
.brand #intro .cons .book .p_4{position:absolute; top:415px; left:625px; opacity:0;}
.brand #intro .pat{position:relative; height:699px;}
.brand #intro .pat > span{position: absolute; z-index: 1;}
.brand #intro .pat .p_1{top:-43px; left:-15px;}
.brand #intro .pat .p_2{bottom:10px; right:10px;}

.brand #intro2 .cons{width:100%; height: 100%;}
.brand #intro2 .cons .book2{position:absolute; top:100px; left:0; right:0; margin: 0 auto; width:1080px;}
.brand #intro2 .cons .book2 .p_1{position:absolute; top:125px; left:80px; opacity:0;}
.brand #intro2 .cons .book2 .p_2{position:absolute; top:270px; left:80px; opacity:0;}
.brand #intro2 .cons .book2 .p_3{position:absolute; top:40px; left:625px; opacity:0;}
.brand #intro2 .cons .book2 .p_4{position:absolute; top:415px; left:625px; opacity:0;}
.brand #intro2 .pat{position:relative; height:699px;}
.brand #intro2 .pat > span{position: absolute; z-index: 1;}
.brand #intro2 .pat .p_1{top:-43px; left:-15px;}
.brand #intro2 .pat .p_2{bottom:10px; right:10px;}

.brand #comp .arrow_btn{position: absolute; top:405px; z-index: 16;}
.brand #comp .arrow_btn a{display: block; overflow: hidden;}
.brand #comp .arrow_btn.left{right:50%; margin-right: 580px;}
.brand #comp .arrow_btn.right{left:50%; margin-left: 580px;}
.brand #comp .ul_con{position: absolute; top:0; left:0; right:0; overflow: hidden; margin:0 auto; width:100%; height:100%;}
.brand #comp .ul_con > ul{overflow: hidden; width:100%;}
.brand #comp .ul_con > ul > li{position: absolute; top:0; left:0; z-index: 2; display: none; width:100%; height: 100%; text-align: center;}
.brand #comp .ul_con > ul > li .cons ul{position: absolute; top:243px; right:0; left:0; margin:0 auto; width:990px; height: 230px;}
.brand #comp .ul_con > ul > li .cons ul > li{position: absolute;}
.brand #comp .ul_con > ul > li .cons ul > li.l_1{left:25px;}
.brand #comp .ul_con > ul > li .cons ul > li.l_2{left:285px;}
.brand #comp .ul_con > ul > li .cons ul > li.l_3{left:545px;}
.brand #comp .ul_con > ul > li .cons ul > li.l_4{left:805px;}
.brand #comp .ul_con > ul > li .cons ul > li img{display: block;}
.brand #comp .ul_con > ul > li .cons ul > li em{display: block; margin-top: 30px; color:#fff; text-align: center; font-weight: bold; font-size: 16px; line-height: 150%;}
.brand #comp .ul_con > ul > li .cons .p_t{position: absolute; top:542px; right:0; left:0; margin:0 auto; width:990px; color:#fff; text-align: center; font-size: 14px; line-height: 170%; }
.brand #comp .pat_list{position: relative; height: 880px; background:url(/images/jpn/brand/comp_jpn_bg.png) 50% 0 no-repeat;}
.brand #comp .pat_list ul{position: absolute; z-index: 1; width:100%; height: 880px;}
.brand #comp .pat_list > ul > li > span{position: absolute;}
.brand #comp .pat_list > ul > li.l_1 .p_1{top:20px; left:-30px;}
.brand #comp .pat_list > ul > li.l_1 .p_2{top:575px; right:50px;}
.brand #comp .pat_list > ul > li.l_2 .p_1{top:20px; left:-30px;}
.brand #comp .pat_list > ul > li.l_2 .p_2{bottom:-5px; left:-5px;}
.brand #comp .pat_list > ul > li.l_2 .p_3{top:175px; right:-130px;}
.brand #comp .tab{position: absolute; bottom:100px; left:0; right:0; z-index: 3; overflow: hidden; height: 38px;}
.brand #comp .tab ul{position: absolute; top:0; left:0; right:0; display: inline-block; overflow: hidden; width:785px; margin:0 auto;}
.brand #comp .tab ul li{float: left; width:194px; height: 36px; border:1px solid #d9d9d9; text-align: center; border-left: 0;}
.brand #comp .tab ul li:first-child{border-left:1px solid #d9d9d9;}
.brand #comp .tab ul li.on{background-color: #fff;}
.brand #comp .tab ul li a{display: block; width:100%; height:100%; color:#fff; font-size: 14px; line-height: 36px; text-decoration: none;}
.brand #comp .tab ul li.on a{color:#333; font-weight: bold;}

.brand #ceo{text-align: center;}
.brand #ceo .tit strong{color:#000;}
.brand #ceo .tit strong:after{background-color: #000;}
.brand #ceo .cons{/* position: absolute; top:230px; right:0; left:0; margin:0 auto; width:990px; height: 100%; z-index: 2; */}
/*.brand #ceo .cons > img{position: absolute; right:0; left:0; margin:0 auto;}
.brand #ceo .cons > .c_1{top:0px;}
.brand #ceo .cons > .c_2{top:63px;}
.brand #ceo .cons > .c_3{top:493px; left:330px;}*/
.brand #ceo .cons > *{position: absolute;left:0; right:0;}
.brand #ceo .cons strong{top:204px; color:#8f7a5f; font-size: 36px;}
.brand #ceo .cons p{top:273px; color:#333; font-size: 14px; line-height: 180%;}
.brand #ceo .cons em{top:670px; color:#333; font-weight: bold; font-size: 18px;}
.brand #ceo .cons img{top:750px; left:0; right:0; margin:0 auto;}
.brand #ceo .pat > span{position: absolute;}
.brand #ceo .pat .p_1{top:0; left:0;}
.brand #ceo .pat .p_2{top:450px; left:250px;}
.brand #ceo .pat .p_3{top:345px; right:370px;}
.brand #ceo .pat .p_4{top:70px; right:50px;}

.brand #history .tit strong{color:#fff;}
.brand #history .tit strong:after{background-color: #fff;}
.brand #history .tab{position: absolute; top:160px; left:0; right:0; z-index: 3; overflow: hidden; height: 38px; text-align: center;}
.brand #history .tab ul{position: absolute; top:0; left:0; right:0; display: inline-block; overflow: hidden; margin:0 auto; width:586px;}
.brand #history .tab ul li{float: left; width:194px; height: 36px; border:1px solid #fff; border-left:0; background-color: #2f343f; text-align: center;}
.brand #history .tab ul li:first-child{border-left:1px solid #fff;}
.brand #history .tab ul li.on{background-color: #fff;}
.brand #history .tab ul li a{display: block; width:100%; height:100%; color:#999; font-weight: bold; font-size: 14px; line-height: 36px; text-decoration: none;}
.brand #history .tab ul li.on a{color:#333; }
.brand #history .cons{position: absolute; top:300px; right: 0; left:0; overflow: hidden; margin:0 auto; width:980px; height: 525px; text-align: center;}
.brand #history .cons .s_con{position: absolute; top:0; z-index: 2; width:100%; height: 100%;}
.brand #history .cons .s_con > ul{overflow: hidden;}
.brand #history .cons .s_con > ul > li{position: absolute; width:500px;}
.brand #history .cons .s_con > ul > li > .year{margin-bottom:20px;}
.brand #history .cons .s_con > ul > li > .year > span{display: inline-block; margin-left:-3px;}
.brand #history .cons .s_con > ul > li > ul > li{position: relative; margin-bottom:10px; color:#acacac;}
.brand #history .cons .s_con > ul > li > ul > li:after{content: ''; position: absolute; top:7px; right:0; display: inline-block; width:3px; height:3px; background-color: #999;}
.brand #history .cons .s_con > ul > li > ul > li.right:after{left:0;}
.brand #history .cons .scroll_drag{position: absolute; top:0; right:0; left:0; z-index: 3; display: inline-block; margin:0 auto; background: url(/images/jpn/brand/history_scroll_bg.png) no-repeat; width:10px; height: 514px;}
.brand #history .cons .scroll_drag .drag_obj{position: absolute; top:0; left:-7px;}
.brand #history .pat{position: relative; height: 880px; opacity: 0; filter:alpha(opacity=0);}
.brand #history .pat > span > img{position: absolute;}
.brand #history .pat > span .s_1{top:70px; right:7%;}
.brand #history .pat > span .s_2{bottom:120px; left:7%;}
.brand #history .pat > span{display: none;}
.brand #history .pat > span.p_1{display: block;}

.brand #ci .tab{position: absolute; top:160px; left:0; right:0; z-index: 3; overflow: hidden; height: 38px;}
.brand #ci .tab ul{position: absolute; top:0; left:0; right:0; display: inline-block; overflow: hidden; width:393px; margin:0 auto;}
.brand #ci .tab ul li{float: left; width:194px; height: 36px; border:1px solid #d9d9d9; background-color: #fff; text-align: center;}
.brand #ci .tab ul li:first-child{border-right: 0;}
.brand #ci .tab ul li:nth-child(2){border-left: 0;}
.brand #ci .tab ul li.on{border:1px solid #333;}
.brand #ci .tab ul li a{display: block; width:100%; height:100%; color:#777; font-weight: bold; font-size: 14px; line-height: 36px; text-decoration: none;}
.brand #ci .tab ul li.on a{color:#333;}
.brand #ci .tit strong{color:#000;}
.brand #ci .tit strong:after{background-color: #000;}
.brand #ci .cons{width:1095px; margin:0 auto; margin-top:230px;}
.brand #ci .cons > div > div > strong{display:inline-block; margin-bottom: 20px; color:#333; font-size: 18px;}
.brand #ci .cons > div > .top{margin-bottom: 70px;}
.brand #ci .cons .ci .top .ci_con{overflow: hidden;}
.brand #ci .cons .ci .top .ci_con > div{float: left;}
.brand #ci .cons .ci .top .ci_con .img{margin-right:30px;}
.brand #ci .cons .ci .top .ci_con .txt > img{display:inline-block; margin-bottom: 15px;}
.brand #ci .cons .ci .top .ci_con .txt > p{color:#777; font-size: 14px; line-height: 150%;}
.brand #ci .cons .ci .top .ci_con .txt > a{display: inline-block; margin-top: 20px;}
.brand #ci .cons .ci .bottom > img{display: inline-block; margin-bottom: 20px;}
.brand #ci .cons .ci .bottom > ul > li{margin-bottom: 10px; color:#777; font-size: 14px;}
.brand #ci .cons .ci .bottom > ul > li:before{content: ''; display: inline-block; margin-right: 8px; margin-bottom: 3px; width:3px; height: 3px; background-color: #bbb;}
.brand #ci .cons .bi .top ul{overflow: hidden; margin-top: -14px; margin-left:-14px;}
.brand #ci .cons .bi .top ul li{float: left; margin-top: 14px; margin-left:14px;}
.brand #ci .cons .bi .bottom ul{overflow: hidden; margin-left:-14px;}
.brand #ci .cons .bi .bottom ul li{float: left; margin-left:14px; width:260px; height:90px; border: 1px solid #e5e5e5;}
.brand #ci .cons .bi .bottom ul li > div{overflow: hidden; margin-top:20px;}
.brand #ci .cons .bi .bottom ul li:before{content: ''; display: inline-block; float: left; margin: 20px; width: 50px; height: 50px;}
.brand #ci .cons .bi .bottom ul li.blue:before{background-color: #0f4fa1;}
.brand #ci .cons .bi .bottom ul li.red:before{background-color: #ed1c24;}
.brand #ci .cons .bi .bottom ul li.purple:before{background-color: #b6265f;}
.brand #ci .cons .bi .bottom ul li.rightgreen:before{background-color: #00aaad;}
.brand #ci .cons .bi .bottom ul li > div strong{display: block; color:#333; font-size: 18px; margin-bottom: 10px;}
.brand #ci .cons .bi .bottom ul li > div em{display: block; color:#777; font-size: 13px;}

.brand #present{height: 880px; background: url(/images/jpn/brand/present_bg.jpg) 50% 0 no-repeat ;}
.brand #present .tit strong{color:#fff;}
.brand #present .tit strong:after{background-color: #fff;}
.brand #present .cons{width:1095px; margin:0 auto; margin-top:275px;}
.brand #present .cons .top{overflow: hidden;}
.brand #present .cons .top > div{float: left; overflow: hidden;}
.brand #present .cons .top .publish{margin-right: 14px;}
.brand #present .cons .top > div .img{position: relative; float: left; overflow: hidden; width:269px; height:252px;}
.brand #present .cons .top > div .img img{position: absolute; top:0; left:0;}
.brand #present .cons .top > div .txt{position: relative; float: left; overflow: hidden; width:269px; height:252px;}
.brand #present .cons .top > div .txt > span{position: absolute; top:0; left:0; display: inline-block; padding-top: 55px; width:269px; height:197px; background-color: #fff; text-align: center;}
.brand #present .cons .top > div .txt > span ul li a:hover{color:#333;}
.brand #present .cons strong{display: inline-block; margin-bottom: 25px; color:#333; font-size: 18px;}
.brand #present .cons .top li{margin-bottom: 10px;}
.brand #present .cons li a{color:#777; font-size: 14px;}
.brand #present .cons .bottom{position: relative; overflow: hidden; margin-top:15px; width:1090px; height:179px;}
.brand #present .cons .bottom .txt{position: absolute; top:0; height: 100%; background-color: #fff;}
.brand #present .cons .bottom .txt > ul{overflow: hidden;height: 100%;}
.brand #present .cons .bottom .txt > ul > li{float: left; width:180px; height: 179px; border-left:1px solid #e5e5e5; text-align: center;}
.brand #present .cons .bottom .txt > ul > li:first-child{border-left: none;}
.brand #present .cons .bottom .txt > ul > li > strong{display: inline-block; margin-top: 45px;}
.brand #present .cons .bottom .txt > ul > li > ul > li{margin-bottom: 15px;}

.brand #award{height: 880px; background: url(/images/jpn/brand/award_bg.jpg) 50% 0 no-repeat ;}
.brand #award .tit strong{color:#fff;}
.brand #award .tit strong:after{background-color: #fff;}
.brand #award .cons{width:1135px; margin:0 auto; margin-top:243px; }
.brand #award .cons ul{overflow: hidden; margin-left:-13px; padding:20px;}
.brand #award .cons ul li{position: relative; float: left; margin-bottom: 13px; margin-left: 13px; text-align: center;}
.brand #award .cons ul li .flipper{position: relative; width:260px; height:250px;}
.brand #award .cons ul li .flipper [class^='flip'] > div{position: absolute; width:258px; height:250px; border: 1px solid #fff;}
.brand #award .cons ul li .flipper [class^='flip'] > div p{margin-top: 105px; line-height: 150%; color:#fff; font-weight: bold; font-size: 16px;}
.brand #award .cons ul li .flipper [class^='flip'] > div em{display: inline-block; margin-top: 10px; color:#fff; font-weight: bold; font-size: 13px;}
.brand #award .cons ul li .flipper [class$='front'] > div{background: rgba(255,255,255,.1) url(/images/jpn/brand/award_icon_off.png) no-repeat 50% 16%;}
.brand #award .cons ul li .flipper [class$='back'] > div{display: none; background: #fff url(/images/jpn/brand/award_icon_on.png) no-repeat 50% 16%;}
.brand #award .cons ul li .flipper [class$='back'] > div p{color:#333;}
.brand #award .cons ul li .flipper [class$='back'] > div em{color:#333;}
.brand #award .cons ul li.on .flipper [class$='front'] > div{display: none;}
.brand #award .cons ul li.on .flipper [class$='back'] > div{display: block;}

.utill_menu {
    height: 40px !important;
}

/*상단 아이콘 추가 21-07-02*/


.user_menu_register, .user_menu_login{
}

.user_menu_register:before{
  content: '';
  background: url(/images/common/top_register.png) no-repeat;
  display: inline-block;
    width: 18px;
    height: 18px;
    margin: -2px 0px -2px 15px;
        background-position: 0px 2px;
    left: 10px;
    background-size: contain;
}
.user_menu_login:before{
  content: '';
  background: url(/images/common/top_login.png) no-repeat;
  display: inline-block;
    width: 16px;
    height: 16px;
    margin: -2px 0px -2px 15px;
    left: 10px;
    background-size: contain;
}

.user_menu_container > li.user_menu_register >  a, .user_menu_container > li.user_menu_login > a{
      display: inline-block;
    padding-left: 6px;
}


.head_search .unite_search .input_wrap .input_txt input[type="text"]:focus {
  outline: none;
}

.head_search .unite_search .input_wrap .input_txt input:-webkit-autofill,
.head_search .unite_search .input_wrap .input_txt input:-webkit-autofill:hover,
    .head_search .unite_search .input_wrap .input_txt input:-webkit-autofill:focus,
    .head_search .unite_search .input_wrap .input_txt input:-webkit-autofill:active {
   transition: background-color 5000s ease-in-out 0s;
   -webkit-transition: background-color 9999s ease-out;
     -webkit-box-shadow: 0 0 0px 1000px white inset !important;
     -webkit-text-fill-color: #000 !important;
   }


   .head_search .unite_search .input_wrap .input_txt input[type="text"] {
    
    font-weight: bold;
}

.head_search .unite_search .input_wrap, .head_search .unite_search .btn_search button[type="button"]{

    border-width: 2px !important;
}

.head_search .unite_search .input_wrap .input_txt input[type="text"] {
   
    height: 25px !important;
}

.head_search .unite_search .input_wrap {
  
    padding: 9px 10px !important;
}