@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');

.hidden{width: 0;height: 0;overflow: hidden;opacity: 0; visibility: hidden;
    position: absolute; left: -9999px;
    font-size: 0; line-height: 0;text-indent: -9999px
}
.clearfix:after{content: ""; display: table; clear: both}

a{text-decoration: none; color: inherit}

body{font: 16px 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 'Apple Gothic', sans-serif; color: #555; letter-spacing: -0.25px; font-weight: 300
} 
*, :after, :before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.skip-menu>a{display: block; width: 100%; height: 30px;
    position: absolute; left: 0;top: -30px;
    background-color: #f00
}
.skip-menu>a:focus {top: 0}

/*HEADER-S*/
#header{width: 100%; height: 100px; 
    position: absolute;left: 0;top: 0; z-index: 10
}
#header-wrap{width: 1200px; margin: 0 auto;}
.logo{float: left; width: 130px; height: 56px; margin: 13px 106px 0 0; 
    background: url(../img/logo.png) no-repeat 0 0
}
.logo>a{width: 100%; height: 50px; display: block;
    text-indent: -9999px
}
#tnb{float: right}
#tnb>ul>li{float: left; margin-top: 13px}
#tnb>ul>li>a{font-size: 12px; color: #bebebe; font-weight: 300;
    transition: all 0.4s
}
#tnb>ul>li+li {margin-left:14px}
#tnb>ul>li:hover a{color:#c4004a}

#gnb{width: 1200px}
#gnb>ul>li{float: left; height: 110px; padding: 0 30px;
    position: relative; margin: 0 auto
}
#gnb>ul>li>a{display: block; height: 110px; width: 100%;
    text-align: center; font-size: 18px; line-height: 110px; font-weight: bold; color: #f4f4f4;
    transition: all 0.4s
}
#gnb>ul>li>ul{display: none; padding-top: 20px;
    position: absolute; left: 0; top: 100px; z-index: 20
}
#gnb>ul>li>ul>li{text-align: center; font-weight:300; color: #222; line-height: 40px; font-size: 15px
}
.gnb-paulbassett{padding-left: 35px}
.gnb-menu{padding-left: 15px}
.gnb-membership{padding-left: 35px}
.gnb-brand{padding-left: 5px}
.gnb-news{padding-left: 15px}
.gnb-store{padding-left: 10px}

.gnb-bg{display: none; width: 100%; height: 200px; min-width: 1200px;
    position: absolute; left: 0;top: 110px;z-index: 10;
    background-color: #f7f7f6  
}
.gnb-bg:after {content: ""; width: 203px; height: 45px;
    position: absolute; right: 360px; top: 150px; z-index: 15;
    background: url(../img/gnb-bg.png) no-repeat 0 0; opacity: 0.1; background-size: cover    
}
#gnb>ul>li>ul>li:hover {transform: scale(1.1); 
    color:#c4004a
}
#gnb>ul>li>a:hover {transform: scale(1.1);
    color:#c4004a
}
/*HEADER-E*/


/*VISUAL-S*/
#visual{width: 100%; min-width: 1200px; height: 350px;
    position: relative; 
    background:url(../img/main-visual3.jpg) no-repeat 0 -150px;
    background-size: cover
}
#visual strong{display: block; padding-top: 150px; margin-bottom: 5px;
    text-align: center; font-weight: 500; color: #ededed; font-size: 45px; line-height: 50px
}
#visual p{text-align: center; color: #ededed; font-size: 18px; line-height: 22px}
.lnb{width: 100%; height: 100px;
    position: absolute; left: 0; top: 350px;
    background-color: #fff;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
}
.lnb div{width: 1200px; margin: 0 auto}
.lnb ul{text-align: center}
.lnb li{display: inline-block; padding-top: 25px; 
    color: #dedcdc   
}
.lnb>div>ul>li:nth-child(1) {color: #c4004a; transform: scale(1.1)}
.lnb a{padding-top: 20px;
    font-size: 15px; line-height: 25px; font-weight: 400;
    transition: all 0.4s
}
.lnb a>span{font-size: 20px; font-weight:600}
.lnb li:hover {color:#c4004a; 
    transform: scale(1.1)
}
.lnb li+li {padding-left: 70px}

/*VISUAL-E*/

/*MAIN-S*/
#main{width: 1200px; margin: 0 auto}
#main>div{margin-bottom: 300px}
.tit{text-align: center; font-size: 30px; color: #333; line-height: 45px; font-weight: 400
}
.tit-desc{text-align: center; font-size: 18px; color: #777; margin-bottom: 50px}

/*Brand-Identity*/
.Brand-Identity{margin-top: 300px}
.sign1{width: 1200px; height: 320px; margin: 0 0 350px 0;
    position: relative;
    background: url(../img/sub1-sign1.jpg) no-repeat 0 0; background-size: cover
}
.sign2{width: 1200px; height: 320px; 
    position: relative;
    background: url(../img/sub1-sign2.jpg) no-repeat 0 0; background-size: cover 
}
.Brand-Identity>div>div {width: 1000px; height: 350px; margin: 0 auto; padding-top: 35px;
    background-color: #fff;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
}
.sign1-wrap{z-index: 10; position: absolute; left: 100px; top: 250px}
.sign2-wrap{z-index: 10; position: absolute; left: 100px; top: 250px}


.sign-icon{width: 57px; height: 55px; margin: 0 auto;
    background: url(../img/sub1-sign-icon.png) no-repeat 0 0;
    opacity: 0.8; 
    text-indent: -9999px
}
.sign-tit{margin-bottom: 30px;
    text-align: center; font-size: 22px; color: #555; font-weight: 400
}
.sign-desc1, .sign-desc2{text-align: center; color: #777;}
.sign-desc1{margin-bottom: 20px}
.Brand-Identity span{color:#c4004a; font-weight: 400}

/*Brand-Logo*/
.Brand-Logo{padding-top: 200px}

/*1, 3번째 콘텐츠(왼쪽 정렬)*/
.left-img{width: 530px; height: 360px; float: left; 
    position: relative;
    background-color: #ededed;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
}
.left-bg{width: 460px; height: 300px; 
    position: absolute; left: 35px; top: 30px;
    background-color: #fff    
}
.logo-image{width: 250px; height: 104px; margin: -52px 0 0 -125px;
    position: absolute; left: 50%; top: 50%; 
    background: url(../img/sub-logo.png) no-repeat 0 0;
    text-indent: -9999px
}
.color-image{width: 303px; height: 258px; margin: -129px 0 0 -151px;
    position: absolute; left: 50%; top: 50%; 
    background: url(../img/sub-color.png) no-repeat 0 0;
    text-indent: -9999px
}
.left-txt{width: 670px; height: 360px; padding: 40px 50px; float:right;
    background-color: #fff;
}
.left-tit{margin-bottom: 40px; 
    position: relative;
    font-size: 25px; color: #555; font-weight: 400;
}
.left-tit>p{width: 4px; height: 30px; 
    position: absolute; left: -15px; top: 5px;
    background-color: #c4004a
}
.left-desc1{margin-bottom: 20px}
.left-txt span{font-weight: 500}

/*2, 4번째 콘텐츠(오른쪽 정렬)*/
.right-img{width: 530px; height: 360px; float: right; 
    position: relative;
    background-color: #ededed;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)   
}
.right-bg{width: 460px; height: 300px; 
    position: absolute; left: 35px; top: 30px;
    background-color: #fff
}
.crown-image{width: 197px; height: 80px; margin: -40px 0 0 -98px;
    position: absolute; left: 50%; top: 50%; 
    background: url(../img/sub-crown.png) no-repeat 0 0;
    text-indent: -9999px
}
.company-image{width: 154px; height: 39px; margin: -20px 0 0 -77px;
    position: absolute; left: 50%; top: 50%; 
    background: url(../img/sub-company.png) no-repeat 0 0;
    text-indent: -9999px
}
.right-txt{width: 670px; height: 360px; padding: 40px 50px; float:left;
    text-align: right;
    background-color: #fff    
}
.right-tit{margin-bottom: 40px; 
    position: relative;
    font-size: 25px; color: #555; font-weight: 400;
}
.right-tit>p{width: 4px; height: 30px; 
    position: absolute; right: -15px; top: 5px;
    background-color: #c4004a
}
.right-desc1{margin-bottom: 20px}
.right-txt span{font-weight: 500}
/*MAIN-E*/

/*FOOTER-S*/
#footer{width: 100%; min-width: 1200px; height: 200px; padding-top: 50px;
    background-color: #313131;
}
.f-wrap{width: 1200px; margin: 0 auto}
.f-wrap>h2{width: 130px; height: 56px; float: left; margin-top: 20px;    
    text-indent: -9999px;
    background: url(../img/logo.png) no-repeat 0 0;
}
.f-menu-wrap {margin-left: 35px; float: left; }
.f-menu {}
.f-menu li{float: left}
.f-menu li>a{color: #999; font-size: 12px; font-weight: 300; 
    transition: all 0.4s
}
.f-menu li+li{margin-left:15px}
.f-menu li+li:after {content: ""; display: block; width: 1px; height: 12px; float: left; margin: 10px 14px 0 0;
    background-color: #999
}
.f-menu li:nth-child(3) a {color: #d85083; font-weight: 400}
.f-menu li:hover a{font-weight: bold}

.addr{margin-top: 40px}
.addr address{color: #999; font-size: 12px; font-weight: 300}
.addr p{color: #999; font-size: 12px; font-weight: 300 }

.f-banner{float: right;}
.banner{float: right; margin-bottom: 15px;}
.banner li{float:right}
.banner li>p{text-indent: -9999px}
.banner li:nth-child(1){float:right; width: 42px; height: 46px; 
    background: url(../img/banner1.jpg) no-repeat 0 0;    
}
.banner li:nth-child(2){float:right; width: 59px; height: 38px; margin-right: 15px;
    background: url(../img/banner2.png) no-repeat 0 0;
}
.sns{clear: both}
.sns li{float: left}
.sns a{transition: all 0.3s}
.sns :nth-child(1) a{width: 40px; height: 40px; display: block;
    text-indent: -9999px;
    background: url(../img/sns-facebook.png) no-repeat 0 0;
    opacity: 0.2
}
.sns li:nth-child(1):hover a{width: 40px; height: 40px; display: block;
    text-indent: -9999px;
    background: url(../img/sns-facebook-hover.png) no-repeat 0 0;
    opacity: 0.9
}
.sns :nth-child(2) a{width: 40px; height: 40px; display: block;
    text-indent: -9999px;
    background: url(../img/sns-youtu.png) no-repeat 0 0;
    opacity: 0.2
}
.sns li:nth-child(2):hover a{width: 40px; height: 40px; display: block;
    text-indent: -9999px;
    background: url(../img/sns-youtu-hover.png) no-repeat 0 0;
    opacity: 0.9
}
.sns :nth-child(3) a{width: 40px; height: 40px; display: block;
    text-indent: -9999px; 
    background: url(../img/sns-twt.png) no-repeat 0 0;
    opacity: 0.2
}
.sns li:nth-child(3):hover a{width: 40px; height: 40px; display: block;
    text-indent: -9999px;
    background: url(../img/sns-twt-hover.png) no-repeat 0 0;
    opacity: 0.9
}
.sns :nth-child(4) a{width: 40px; height: 40px; display: block;
    text-indent: -9999px;
    background: url(../img/sns-insta.png) no-repeat 0 0;
    opacity: 0.2
}
.sns li:nth-child(4):hover a{width: 40px; height: 40px; display: block;
    text-indent: -9999px;
    background: url(../img/sns-insta-hover.png) no-repeat 0 0;
    opacity: 0.9
}
.sns li+li{margin-left: 10px}
/*FOOTER-E*/