@charset "utf-8";

body{-webkit-text-size-adjust:none; -webkit-overflow-scrolling:touch; -webkit-font-smoothing: antialiased;}

.header_wrap{position: fixed; top:0; left:0; z-index: 7; transition:all .2s ease;}
.header_wrap.active.black .logo .black{display:block;}
.header_wrap.active.black .logo .white{display:none;}
.header_wrap.active .logo .default{display:none;}
.header_wrap.active .logo .white{display:block;}
.header_wrap.active.black:hover .logo .black{display:none;}
.header_wrap.active.black:hover .logo .default{display:block;}
.header_wrap:hover .logo .default{display:block;}
.header_wrap:hover .logo .white{display:none;}
.header_wrap.black .menu_wrap .menu_con > li > a{color:#111111;}
.header_wrap.active .menu_wrap{padding-top:6px;}
.header_wrap.active:hover .menu_wrap{padding-top:29px;}
.header_wrap.active .menu_wrap .menu_con > li > ul{display:none;}
.header_wrap .header_inner{}
.header_wrap .header_contents{}
.header_wrap .header_contact_us_con{position: absolute; top:0; width:93px; height:72px; background-color:#b5d002; display:none; line-height:72px; text-align: center; z-index: 3; opacity: 0; right:93px;}
.header_wrap:hover .header_contact_us_con{opacity: 1;}
.header_wrap .header_contact_us_con{opacity: 1; display:block;}
.header_wrap.active .header_contact_us_con{display:none;}
.header_wrap.active .menu_icon{display:none;}
.header_wrap.active:hover .header_contact_us_con{display:block;}
.header_wrap.active:hover .menu_icon{display:block;}
.header_wrap .header_contact_us_con img{width:38px;}
.header_wrap .header_con{padding-bottom:10px;}
.header_wrap .logo_con{float:left; position: relative; z-index: 3; padding-top:21px; transition:all 1s ease;}
.header_wrap.active .logo_con{padding-top:8px;}
.header_wrap.active:hover .logo_con{padding-top:31px;}
.header_wrap .logo{font-size:0; line-height:0;}
.header_wrap .logo .default{display:block;}

.header_wrap .logo .default svg{width:157px; height:37px;}

.header_wrap .logo .black svg{width:130px; height:28px;}
.header_wrap .logo .white svg{width:130px; height:28px;}
.header_wrap .logo .black{display:none;}
.header_wrap .logo .white{display:none;}
.header_wrap .logo > a{display:block;}
.header_wrap .language_wrap{float:right; position: relative; z-index: 3; padding-top:38px; transition:all 1s ease; display:none;}
.header_wrap.active .language_wrap{padding-top:13px;}
.header_wrap.active:hover .language_wrap{padding-top:38px;}
.header_wrap .language_con{font-size:0; line-height:0;}
.header_wrap .language_con > li{display:inline-block; vertical-align: middle; margin-left:25px;}
.header_wrap .language_con > li:first-child{margin-left:0;}
.header_wrap .language_con > li > a{font-size:16px; font-size:1.6rem; line-height:20px; line-height:2.0rem; letter-spacing: -0.02em; color:#fff; font-weight:700;
    display:block; padding-top:5px; border-bottom:1px solid transparent; transition:all .2s ease;}
.header_wrap.black .language_con > li > a{color:#111111;}
.header_wrap.black:hover .language_con > li > a{color:#fff;}
.header_wrap .language_con > li:hover > a{border-bottom-color:#fff;}

.header_wrap .header_fixed_dim{position: absolute; top:0; left:0; width:100%; height:72px; background-color:#202020; opacity: 1; transition:all .2s ease;}
.header_wrap .header_fixed_dim.depth_2{top:72px; height:73px; background-color:rgba(32, 32, 32, 0.6); display:none;}
.product .header_wrap .header_fixed_dim.depth_2{background-color:#626262;}
.header_wrap .header_fixed_dim.depth_2.active{opacity: 1;}

/*.header_wrap.active .header_fixed_dim{display:none;}*/
.sub .header_wrap .header_fixed_dim{display:block; opacity: 1;}

.sub .header_wrap.header_fixed{margin-top:-72px;}



.menu_icon{position: absolute; top:0; right:0; width:93px; height:72px; background-color:#13426b; box-sizing: border-box; display:block; z-index:8;}
.menu_icon span{width:43px; position: relative; top:50%; margin-top:-1px; background-color:#fff; height:2px; display:block; margin-right:auto; margin-left:auto; overflow: visible;}
.menu_icon span:before{content:""; position: absolute; bottom:-10px; background-color:#fff; height:2px; width:100%; transition:all .3s ease;}
.header_wrap.menu_active .menu_icon{background-color:#fff; display:block;}
.header_wrap.menu_active .menu_icon span:before{background-color:#202020; transform:rotate(45deg); bottom:0;}
.header_wrap.menu_active .menu_icon span{background-color:transparent;}
.menu_icon span:after{content:""; position: absolute; top:-10px; background-color:#fff; height:2px; width:100%; transition:all .3s ease;}
.header_wrap.menu_active .menu_icon span:after{background-color:#202020; transform:rotate(-45deg); top:0;}


.mobile_menu_wrap{position: fixed; top:-100%; z-index: 7; background-color:rgba(0, 0, 0, 0.98);height:100%; overflow:hidden;}
.mobile_menu_wrap .mobile_menu_list{height:calc(100% - 72px); overflow-y:auto; }
.mobile_menu_wrap .mobile_menu_list > li{overflow: hidden;}
.mobile_menu_wrap .mobile_menu_list > li > a{font-size:32px; font-size:3.2rem; line-height:38px; line-height:3.8rem; letter-spacing: -0.02em; color:#fff; font-weight:400;
    display:block; position: relative; padding-right:4%; padding-top:9px; padding-bottom:9px; transition:all .5s ease;}
.mobile_menu_wrap .mobile_menu_list > li > a:before{content:""; position: absolute; top:26px; height:34px; right:calc(4% + 17px); border-right:2px solid #fff; transition:all .5s ease;}
.mobile_menu_wrap .mobile_menu_list > li > a:after{content:""; position: absolute; top:43px; width:34px; right:4%; border-bottom:2px solid #fff; transition:all .5s ease;}
.mobile_menu_wrap .mobile_menu_list > li > a > span{padding-left:4%; display:block; padding-top:17px; padding-bottom:16px; position: relative;}
.mobile_menu_wrap .mobile_menu_list > li > a > span:before{content:""; position: absolute; width:70%; left:0; bottom:0; border-bottom:2px solid transparent; transition:all .5s ease;}
.mobile_menu_wrap .mobile_menu_list > li.gnb_open > a{color:#c3de03;}
.mobile_menu_wrap .mobile_menu_list > li.gnb_open > a > span:before{border-bottom-color:#c3de0e;}
.mobile_menu_wrap .mobile_menu_list > li.gnb_open > a:before{border-right-color:transparent;}
.mobile_menu_wrap .mobile_menu_list > li.gnb_open > a:after{border-bottom-color:#c3de0e;}
.mobile_menu_wrap .mobile_menu_list > li.active > a{color:#c3de0e;}
.mobile_menu_wrap .mobile_menu_list > li.active > a > span:before{border-bottom-color:#c3de0e;}
.mobile_menu_wrap .mobile_menu_list > li > ul{}
.mobile_menu_wrap .mobile_menu_list > li.active > ul{}
.mobile_menu_wrap .mobile_menu_list > li > ul > li{}
.mobile_menu_wrap .mobile_menu_list > li > ul > li > a{font-size:24px; font-size:2.4rem; line-height:30px; line-height:3.0rem; letter-spacing: -0.02em; color:#a9a9a9; font-weight:400;
    display:block; padding-left:40px; padding-top:12px; padding-bottom:12px;}
.mobile_menu_wrap .mobile_menu_list > li > ul > li.active{color:#c3de0e;}
.mobile_menu_wrap .mobile_menu_list > li > ul > li > ul{display:none;}


.mobile_menu_wrap .mobile_language_con{padding-top:27px; box-sizing: border-box; margin-bottom:10px; height:72px;}
.mobile_menu_wrap .mobile_language_list{font-size:19px; font-size:1.9rem; line-height:25px; line-height:2.5rem; letter-spacing: -0.02em; color:#fff; font-weight:700;
    display:inline-block; vertical-align: middle;  border-bottom:2px solid transparent; margin-right:43px;}
.mobile_menu_wrap .mobile_language_list:last-child{margin-right:0;}
.mobile_menu_wrap .mobile_language_list.active{border-bottom-color:#fff;}


.mobile_lnb_wrap{position: absolute; top:72px; left:0; opacity: 1;}
.mobile_lnb_wrap .mobile_lnb_list_con{text-align: center;}
.mobile_lnb_wrap .mobile_lnb_list_con > li{display:none;}
.mobile_lnb_wrap .mobile_lnb_list_con > li.active{display:block;}
.mobile_lnb_wrap .mobile_lnb_list_con > li > a{display:none;}
.mobile_lnb_wrap .mobile_lnb_list_con > li > ul{opacity: 0; overflow: hidden;}
.mobile_lnb_wrap .mobile_lnb_list_con > li > ul > li{border-top:1px solid #929292; box-sizing: border-box;}
.mobile_lnb_wrap .mobile_lnb_list_con > li > ul > li:first-child{border-top:none;}
.mobile_lnb_wrap .mobile_lnb_list_con > li > ul > li > a{font-size:22px; font-size:2.2rem; line-height:28px; line-height:2.8rem; letter-spacing: -0.02em; color:#fff; font-weight:400;
    display:block; padding-top:20px; padding-bottom:25px; background-repeat: no-repeat; background-position: right 20px center; box-sizing: border-box; transition:background .5s ease;}
.mobile_lnb_wrap .mobile_lnb_list_con > li.active > ul > li:first-child > a{background-color:transparent; background-image: url('../img/mobile_lnb_arrow.png');}
.mobile_lnb_wrap .mobile_lnb_list_con > li.active > ul > li:nth-child(2){border-top-color:#828282;}
.mobile_lnb_wrap .mobile_lnb_list_con > li.active > ul > li > a{background-color:rgba(123, 123, 123, 0.95);}
.mobile_lnb_wrap.active .mobile_lnb_list_con > li.active > ul > li:first-child > a{background-color:rgba(32, 32, 32, 0.95);}


.contact_us_contents_wrap{position: fixed; top:0; right:-100%; width:100%; background-color:#a1ca01; height:100%; z-index:9;}
.contact_us_dim{position: fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity: 0.6; z-index:8; display:none;}
.contact_us_send_after{position: fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity: 0.6; z-index:9; display:none;}
.contact_us_send_after img{width:250px;}
.contact_us_contents_wrap .contact_us_contents_con{}
.contact_us_contents_wrap .contact_us_close_btn_con{text-align: right; box-sizing: border-box;}
.contact_us_contents_wrap .contact_us_close_btn{background-color:#fff; display:inline-block; padding-top:16px; padding-right:27px; padding-left:27px; padding-bottom:16px;}
.contact_us_contents_wrap .contact_us_close_btn_con .default{display:none;}
.contact_us_contents_wrap .contact_us_close_btn_con .hover{display:inline; width:40px;}
.contact_us_contents_wrap .contact_us_title_con{text-align: right; width:330px; position: relative; margin-top:-55px;}
.contact_us_contents_wrap .contact_us_title_con:after{content:""; position: absolute; bottom:65px; width:calc(100% - 154px); left:0; border-bottom:7px solid #fff;}
.contact_us_contents_wrap .contact_us_title{font-size:64px; font-size:6.4rem; line-height:83px; line-height:8.3rem; letter-spacing: -0.02em; color:#fff; font-weight:700;}
.contact_us_contents_wrap .contact_us_input_con{padding-left:4%; box-sizing: border-box;}
.contact_us_contents_wrap .contact_us_input_list{border-bottom:1px solid rgba(255, 255, 255, 0.5);}
.contact_us_contents_wrap .contact_us_input_list:first-child .contact_us_input{padding-bottom:12px; padding-top:7px;}
.contact_us_contents_wrap .contact_us_input{font-size:20px; font-size:2.0rem; line-height:26px; line-height:2.6rem; letter-spacing: -0.05em; color:#fff; font-weight:700;
    padding-top:27px; padding-bottom:28px; padding-right:10px; padding-left:13px; margin:0; border:none; background-color:transparent; width:100%; box-sizing: border-box;
    -webkit-appearance: none; -moz-appearance: none; appearance: none; outline:none;}
.contact_us_contents_wrap .contact_us_input::-webkit-input-placeholder{color:#fff;}
.contact_us_contents_wrap .contact_us_input:-ms-input-placeholder{color:#fff;}
.contact_us_contents_wrap .contact_us_input:-moz-placeholder{color:#fff;}
.contact_us_contents_wrap .contact_us_input::-moz-placeholder{color:#fff;}
.contact_us_contents_wrap .contact_us_textarea{font-size:20px; font-size:2.0rem; line-height:26px; line-height:2.6rem; letter-spacing: -0.05em; color:#fff; font-weight:700;
    padding-top:28px; padding-bottom:20px; padding-right:10px; padding-left:13px; margin:0; border:none; background-color:transparent; width:100%; box-sizing: border-box;
    -webkit-appearance: none; -moz-appearance: none; appearance: none; outline:none; resize:none; max-height:300px;}
.contact_us_contents_wrap .contact_us_textarea::-webkit-input-placeholder{color:#fff;}
.contact_us_contents_wrap .contact_us_textarea:-ms-input-placeholder{color:#fff;}
.contact_us_contents_wrap .contact_us_textarea:-moz-placeholder{color:#fff;}
.contact_us_contents_wrap .contact_us_textarea::-moz-placeholder{color:#fff;}
.contact_us_contents_wrap .contact_us_send_btn_con{}
.contact_us_contents_wrap .contact_us_send_btn_con img{width:154px;}


.main .canvas_con{display:none;}
.canvas_con{ position: fixed; bottom:20px; right:30px; z-index: 4; border-radius:50%; border:2px solid #f0f0f0;  text-align: center; width:50px; height:50px; box-sizing: border-box; cursor: pointer; display:block; }  /* 2019-12-18 수정 */
.canvas_con.topShow { display:block;} /* 2019-12-18 추가 */
.canvas_con canvas{margin-top:-3px; margin-left:-3px; position: relative;}
.canvas_con:after{content:"Top"; position: absolute; top:0; left:0; width:100%; height:100%; font-size:14px; line-height:43px; text-align: center; color:#111; font-weight:700;}
.canvas_con:hover:after{content:""; background-image: url('../img/top_hover.png'); background-repeat: no-repeat; background-position: center center;}

@media all and (min-width:992px){
    .header_wrap .logo .default svg{width:170px;}
    .header_wrap .logo_con{padding-top:31px;}
    .header_wrap .header_contents{height:149px;}
    .header_wrap .language_wrap{display:block;}

    .header_wrap .header_fixed_dim{height:94px; opacity: 0;}
    .header_wrap .header_fixed_dim.depth_2{top:94px; height:55px; display:block;}
    .product .header_wrap .header_fixed_dim.depth_2{background-color:rgba(32, 32, 32, 0.6);}
    .header_wrap:hover .header_fixed_dim.depth_1{opacity: 1;}

    .header_wrap .header_contact_us_con{right:94px; width:94px; height:94px; line-height:94px;}

    .menu_icon{width:94px; height:94px;}
    .menu_icon span{height:1px; margin-top:0; width:40px;}
    .header_wrap.menu_active .menu_icon span{width:85px;}
    .menu_icon span:before{height:1px; bottom:-12px;}
    .menu_icon span:after{height:1px; top:-12px;}
    .sub .header_wrap.header_fixed{margin-top:-94px;}


    .contact_us_contents_wrap{right:-634px; width:634px;}
    .contact_us_contents_wrap .contact_us_input_con{padding-left:72px;}
    .contact_us_contents_wrap .contact_us_close_btn{background-color:transparent; padding:0;}
    .contact_us_contents_wrap .contact_us_close_btn_con{padding-top:10px; padding-bottom:10px;}
    .contact_us_contents_wrap .contact_us_close_btn_con .default{display:inline;}
    .contact_us_contents_wrap .contact_us_close_btn_con .hover{display:none;}
    .contact_us_contents_wrap .contact_us_title{font-size:80px; font-size:8.0rem; line-height:90px; line-height:9.0rem;}
    .contact_us_contents_wrap .contact_us_title_con:after{bottom:37px; width:calc(100% - 123px); border-bottom:2px solid #fff;}
    .contact_us_contents_wrap .contact_us_title_con{width:434px; margin-top:0;}
    .contact_us_contents_wrap .contact_us_input_list:first-child .contact_us_input{padding-top:0;}
    .contact_us_contents_wrap .contact_us_send_btn_con img{width:auto;}

    .mobile_menu_wrap{}
    .mobile_menu_wrap .mobile_menu_list{box-sizing: border-box; overflow: hidden; width:100%;
        text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; font-size:0; line-height:0;}
    .mobile_menu_wrap .mobile_menu_list:after{content: ""; display: inline-block; width: 100%;}
    .mobile_menu_wrap .mobile_menu_list > li{width:25%; display:inline-block; vertical-align: top; box-sizing: border-box;}
    .mobile_menu_wrap .mobile_menu_list > li:hover{}
    .mobile_menu_wrap .mobile_menu_list > li:hover > a{color:#b5d002;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li:hover > a{color:#b5d002;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li > ul > li:hover > a{color:#b5d002;}
    .mobile_menu_wrap .mobile_menu_list > li.active > a > span{border-bottom-color:#b5d002;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li.active > a{color:#b5d002;}
    .mobile_menu_wrap .mobile_menu_list > li > a{font-size:28px; font-size:2.8rem; line-height:34px; line-height:3.4rem; font-weight:700; padding-right:0;}
    .mobile_menu_wrap .mobile_menu_list > li > a > span{border-bottom:2px solid transparent; padding-left:0; display:inline; padding-top:0; padding-bottom:3px;}
    .mobile_menu_wrap .mobile_menu_list > li > a > span:before{display:none;}
    .mobile_menu_wrap .mobile_menu_list > li > a:before{display:none;}
    .mobile_menu_wrap .mobile_menu_list > li > a:after{display:none;}
    .mobile_menu_wrap .mobile_menu_list > li > ul{height:auto !important; padding-top:34px;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li{margin-bottom:16px;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li:last-child{margin-bottom:0;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li > a{font-size:18px; font-size:1.8rem; line-height:24px; line-height:2.4rem; padding-left:0; padding-top:7px; padding-bottom:3px;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li > ul{display:block;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li > ul > li{}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li > ul > li > a{font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem; letter-spacing: -0.02em; color:#a9a9a9; font-weight:400;
        display:block; padding-left:10px; position: relative; padding-top:4px; padding-bottom:4px;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li > ul > li > a:after{content:""; position: absolute; top:17px; border-bottom:1px solid #a9a9a9; width:5px; left:0;}
    .mobile_menu_wrap .mobile_menu_list > li > ul > li > ul > li:hover > a:after{border-bottom-color:#b5d002;}

    .mobile_menu_wrap .mobile_language_con{padding-top:45px; margin-bottom:114px;}
    .mobile_menu_wrap .mobile_language_list{font-size:20px; font-size:2.0rem; line-height:26px; line-height:2.6rem;}
    .mobile_menu_wrap .mobile_language_list:hover{border-bottom:2px solid #aaaaaa;}


    .mobile_lnb_wrap{opacity: 0;}

    .canvas_con{display:none; border:0; } /* 2019-12-18 수정 */
    .canvas_con.topShow { display:block;} /* 2019-12-18 추가 */
}

@media all and (min-width:1400px){
    .header_wrap .header_contact_us_con{display:block;}
}


/* 2019-11-13 다국어선택 style 변경 */
.language_wrap .lang { display:block; padding-left:22px; background:url("../img/icon_language.png"); background-repeat:no-repeat; background-position:0 2px; width:120px; box-sizing:border-box; }
.language_wrap .lang a { display:block; color:#fff; font-size:14px; font-weight:700; padding-right:20px; background:url("../img/icon_lang_arrow.png"); background-repeat:no-repeat; background-position:right center; }
.language_con.v2 { display:none; width:120px; padding:15px 12px 17px 19px; box-sizing:border-box; background-color:#202020; border:1px solid #fff; position:relative; margin-top:11px; }
.language_con.v2:after { position:absolute; content:''; display:block; background:url("../img/bg_language.png"); background-repeat:no-repeat; background-position:0 top; width:120px; height:6px; left:0; top:-6px; }
.language_con.v2 li { display:block; float:none; margin-left:0; margin-top:14px; }
.language_con.v2 li a { padding-top:0; line-height:1; border:0; }
.header_wrap .language_con.v2 > li:hover > a { border:0; }
.header_wrap.black .language_con.v2 li a { color:#fff; }
.language_con.v2 li a img { vertical-align:middle; }
.language_con.v2 li a img + span { vertical-align:middle; line-height:1.1; font-size:14px; margin-left:7px; }
.language_con.v2 li.active a img + span { border-bottom:1px solid #b5d002; }
/*.language_con.v2 li:hover a img + span { border-bottom:1px solid #fff; }*/
.language_con.v2 li:first-child { margin-top:0; }
.language_con.v2.on { display:block; }
.header_wrap.black .lang a { color:#111; }
.header_wrap.active.black .lang a { color:#111; }
.header_wrap.black .language_wrap .lang { background:url("../img/icon_language_b.png"); background-repeat:no-repeat; background-position:0 2px; }
.header_wrap.black .language_wrap .lang a { background:url("../img/icon_lang_arrow_b.png"); background-repeat:no-repeat; background-position:right center; }
.header_wrap.active:hover .lang a { color:#fff; }
.header_wrap.active:hover .language_wrap .lang { background:url("../img/icon_language.png"); background-repeat:no-repeat; background-position:0 2px; }
.header_wrap.active:hover .language_wrap .lang a { background:url("../img/icon_lang_arrow.png"); background-repeat:no-repeat; background-position:right center; }