@charset "utf-8";
/*************************************************************************
* @ 서비스명   : commonui
* @ 파일명     : /css/commonui.css
* @ 페이지설명  : commonui.css
* @ 작성자     : 한주현 (pointweb)
* @ 작성일     :

**************************************************************************/

/* basic style */
* {box-sizing: border-box;}
html {width: 100%;height: 100%;}
body {overflow: inherit;width: 100%;}
body.on {overflow: hidden;}
#wrap {width: 100%;}
.layout{position:relative;margin: 0 auto;max-width: 1720px;}
.no-data {display: block !important;font-size: 16px !important;width: 100% !important;padding: 100px 0 !important;text-align: center;margin: 0 !important;}
.page-title{text-align:left;font-size:30px;}
.blind{position: absolute;top:-9999999px;left:-999999px;}
.required{color:#e32a2a;}
.overlay{display:none;position: fixed;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.5);z-index: 1000;}


/* dl style */
.dl-type1{}
.dl-type1 dt{position:relative;clear:left;float:left;}
.dl-type1 dd{position:relative;width:100%;}
.dl-type1 dd:after {content: "";display: table;clear: both;}

/* text style */
.t-align-left {text-align: left !important;}
.t-align-center {text-align: center !important;}
.t-align-right {text-align: right !important;}


#goTop{display:none;position: fixed;right:30px;bottom:90px;z-index: 10;}

#myVideo{display:block;width:100%;object-fit: cover;}

.button-type1{display:inline-block;width:230px;line-height:105px;height:105px;font-size: 15px;font-weight: normal;text-align: center;color: #202020;background: url(/_public/images2/icon/button_bg.svg) no-repeat;background-size:cover;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
.button-type1:hover{background: url(/_public/images2/icon/button_bg2.svg) no-repeat;background-size:cover;}

.sub-nav{position: relative;left:0;width:100%;z-index: 10;font-size:0;border-bottom: 1px solid #d0d3da;padding:0 20px;}
.sub-nav .layout{width:100%;}
.sub-nav a{position:relative;display: inline-block;line-height: 80px;font-size: 16px;font-weight: normal;color: #909090;;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;margin-right: 85px;}
.sub-nav a:before{content: "";position:absolute;left:0;bottom:0;display: block;opacity:0;width:100%;height:2px;background: #000;;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
.sub-nav a:hover{color:#000;}
.sub-nav a:hover:before{opacity: 1;}
.sub-nav a.on{color:#000;}
.sub-nav a.on:before{opacity: 1;}




.scroll{position: fixed;bottom:110px;left:40px;z-index: 10;text-align: center;}
.scroll i{display:block;}
.scroll i img{display:block;}
.scroll span{position:relative;display:block;margin:5px auto 0;width:2px;height:100px;background: #808080;}
.scroll span em{position: absolute;top:0;left:0;width:2px;height:0;background: #28e51a;}

header{position: absolute;top:0;left:0;width:100%;z-index: 100;padding:0 20px;}
header .layout{display: flex;justify-content: space-between;align-items: center;}
header .logo{display:inline-block;width:140px;height:30px;font-size:0;background:url(/_public/images2/common/logo.svg) no-repeat;background-size: cover;}
header .gnb{}
header .gnb ul{display: flex;}
header .gnb ul li{}
header .gnb ul li + li{margin-left:16px; }
header .gnb ul li > a{position:relative;padding:0 34px;display: block;line-height: 80px; font-size: 14px;font-weight: normal;color: #fff;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
header .gnb ul li > a:before{content: "";position: absolute;left: 0;top: 24px;display: inline-block;opacity:0;width: 100%;height: 34px;background: url(/_public/images2/icon/circle.svg) no-repeat;background-size: 100%;z-index: -1;   -moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
header .gnb ul li .dropdown{display:none;position: absolute;left:0;width:100%;z-index: 10;font-size:0;}
header .gnb ul li .dropdown a{position:relative;display: inline-block;line-height: 80px;font-size: 16px;font-weight: normal;color: #909090;;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;margin-right: 85px;}
header .gnb ul li .dropdown a.product-main{display: none;}
header .gnb ul li .dropdown a:before{content: "";position:absolute;left:0;bottom:0;display: block;opacity:0;width:100%;height:2px;background: #000;;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
header .gnb ul li .dropdown a:hover{color:#000;}
header .gnb ul li .dropdown a:hover:before{opacity: 1;}
header .gnb ul li .dropdown a + a{}
header .gnb ul li:hover > a{font-weight: 900;}
header .gnb ul li:hover > a:before{opacity: 1;}
header .mail-link{position:relative;padding-right:27px;font-size: 15px;font-weight: normal;color: #fff;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
header .mail-link:before{content: "";position: absolute;left: -15px;top:-4px;display: inline-block;opacity:0;width: 100%;height: 34px;background: url(/_public/images2/icon/circle.svg) no-repeat;background-size: 100%;z-index: -1;   -moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
header .mail-link:after{content: "";position: absolute;top: 2px;right: 0;display: inline-block;width: 16px;height: 12px;background: url(/_public/images2/icon/mail_icon.svg) no-repeat;background-size: 16px 12px;}
header .mail-link:hover{font-weight: 900;}
header .mail-link:hover:before{opacity: 1;}
header .m-mail-link{display: none;margin-top:60px;position:relative;font-size: 19px;font-weight: normal;color: #000;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;padding:0 20px;}
header .m-mail-link:after{content: "";position: absolute;top: 6px;margin-left:10px;display: inline-block;width: 16px;height: 12px;background: url(/_public/images2/icon/mail_icon.svg) no-repeat;background-size: 16px 12px;}
header .m-toggle{display:none;position: absolute;width:30px;height:30px;background: url(/_public/images2/icon/m_navi.svg) no-repeat;background-size: cover;font-size:0;top:16px;right:20px;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
header .m-toggle.active{background: url(/_public/images2/icon/m_close.svg) no-repeat;background-size: cover;}
header .gnb-bg{display:none;position: absolute;left:0;width:100%;height:80px;background: #fff;border-bottom: 1px solid #d0d3da;}
header.active{background: #fff;}
header.active .logo{background:url(/_public/images2/common/logo2.svg) no-repeat;background-size: cover;}
header.active .gnb ul li > a{color:#000;}
header.active .mail-link{color:#000;}
header.sub{background: #fff;}
header.sub .logo{background:url(/_public/images2/common/logo2.svg) no-repeat;background-size: cover;}
header.sub .gnb ul li > a{color:#000;}
header.sub .mail-link{color:#000;}
header.fixed{position: fixed;}
header.scroll-fixed{background: #fff;position: fixed;}
header.scroll-fixed .logo{background:url(/_public/images2/common/logo2.svg) no-repeat;background-size: cover;}
header.scroll-fixed .gnb ul li > a{color:#000;}
header.scroll-fixed .mail-link{color:#000;}




footer{padding:90px 20px;border-top:1px solid #909090;background: #fff;}
footer .layout{display: flex;justify-content: space-between;}
footer .left{}
footer .left .f-logo{display: inline-block;}
footer .left .f-logo img{display:block;}
footer .left p{margin-top:35px; font-size: 14px;font-weight: normal;line-height: 1.43;color: #303030;}
footer .right{text-align: right;}
footer .right .instagram{display:inline-block;position:relative;padding-right:23px;font-size: 14px;font-weight: normal;color: #000;}
footer .right .instagram:after{content:"";position:absolute;right:0;display: inline-block;width:20px;height:20px;background: url(/_public/images2/icon/view_arrow.svg) no-repeat;background-size: cover;}
footer .right copyright{margin-top:90px;display: block;font-size: 12px;font-weight: normal;color: #909090;}


.breadcrumbs{display: flex;justify-content: center;}
.breadcrumbs span{position:relative;display: inline-block;font-size: 13px;font-weight: normal;color: #808080;}
.breadcrumbs span:before{content: "";display: inline-block;background: url(/_public/images2/icon/breadcrumbs_arrow.svg) no-repeat;background-size: cover;width:15px;height:15px;position: absolute;left: -17px;top: -1px;}
.breadcrumbs span:first-child:before{display: none;}
.breadcrumbs span:last-child{color:#000;}
.breadcrumbs span + span{margin-left:20px;}


#pages{padding-top:80px;}
#pages .contents{padding:0 20px;}

/* tablet */
@media all and (max-width:1280px) {
    .button-type1{width:180px;height:82px;line-height: 82px;font-size:13px;}

    header{position: fixed;top:0;left:0;width:100%;background: #fff;height:70px;padding:0;}
    header .layout{padding:20px;display: block;position: relative;}
    header .logo{background: url(/_public/images2/common/logo2.svg) no-repeat;background-size: cover;width:110px;height:23px;vertical-align: middle;}
    header .gnb{position: fixed;top:70px;right:-100%;width:100%;height:calc(100vh - 70px);background: #fff;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;overflow-y: auto;}
    header .gnb ul{display: block;padding:0 20px;}
    header .gnb ul li > a{line-height:60px;font-size: 18px;font-weight: normal;color:#000;padding:0;}
    header .gnb ul li > a:after{content: "";display: inline-block;width:20px;height:20px;position: absolute;top:18px;right:0;background: url(/_public/images2/icon/pro-arrow.svg) no-repeat;background-size: cover;}
    header .gnb ul li > a.on:after{transform: rotate(-180deg);}
    header .gnb ul li > a:before{width: 100px;height: 21px;top: 16px;left: -5px;}
    header .gnb ul li > a.on:before{opacity: 1;}
    header .gnb ul li + li{margin:0;}
    header .gnb ul li .dropdown{position: relative;border-bottom:1px solid #000;padding:10px 0;}
    header .gnb ul li .dropdown a{display: block; font-size: 15px;font-weight: normal;line-height: 2.67;color: #000;}
    header .gnb.active{right:0;}
    header .mail-link{display: none;}
    header .m-toggle{display: block;}
    header .m-mail-link{display: block;}

    .sub-nav{overflow-x: auto; -ms-overflow-style: none;scrollbar-width: none;font-size:0;text-align: left;}
    .sub-nav .layout{font-size:0;display: inline-block;padding:0 !important;}
    .sub-nav a{display:inline-block;font-size:14px;line-height: 53px;margin:0;}
    .sub-nav a + a{margin-left: 30px;}
    .sub-nav::-webkit-scrollbar{display: none;}

    footer { padding: 50px 20px 120px}

    #pages{padding-top:70px;}
    #pages .contents{padding:0;}
}
/* mobile */
@media all and (max-width:768px) {

    .scroll { display: none;}
    #goTop{ bottom:40px;}
    footer .left p { font-size: 12px; margin-top: 10px;}
    footer .layout { flex-direction: column;}
    footer .right { margin-top: 50px;}
    footer .right copyright { margin-top: 40px;font-size: 12px}
    footer .right .instagram {font-size: 13px;}
}