@charset "UTF-8";
* {box-sizing: border-box;}
/*reset*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,  summary,time, mark, audio, video, button, input, select, textarea {
    margin: 0;
    padding: 0;
    font: inherit;
    vertical-align: top;
}
button,input {border-radius: 0}
fieldset,img {border: 0}
ol,ul {list-style: none}
address,em {font-style: normal}
a {text-decoration: none}
iframe {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,main {display: block;}
h1,h2,h3,h4,h5,h6 {font-weight: normal}
.blind {position: absolute;overflow: hidden;clip: rect(0 0 0 0);margin: -1px;width: 1px;height: 1px}
button {cursor:pointer;}
button, input, select {vertical-align: middle;}

/*테이블 칸 여백빼기, 선합치기*/
table {border-spacing: 0; border-collapse:collapse;}

/*스킵네비게이션*/
#accessibilityLink {
    position: relative;
    top: 0;
    left: 0;
    z-index: 999999;
}
#accessibilityLink a {
    position: absolute;
    left: 0;
    top: -9999px;
    background: #333;
    color: #fff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    width: 100%;
}
#accessibilityLink a:focus, #accessibilityLink a:active { 
    top: 0; 
}

/*영문단어 중단점을 음절로 처리,주로 모바일에서 사용*/
body {
    word-break: break-all;
/*    아이폰사파리에서 뷰포트크기 변경시 텍스트확대 방지*/
    -webkit-text-size-adjust:none;
}


/*공통스타일*/
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(255,255,255,0.3);
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(255,255,255,0.3);
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(255,255,255,0.3);
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(255,255,255,0.3);
}

/*main_iframe*/
#player3 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    margin-bottom: 44px;
    margin-top: 60px;	
    height: 0;
    top: 100px;
	background-color: #000;
/*	background: url(../img/01.jpg) center no-repeat;*/
	
}
#player3 iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#vol_off { position: absolute; top: 6%; right: 4%; z-index: 999; display: none; }
#vol_on { position: absolute; top: 6%; right: 4%; z-index: 999; }



/*main_iframe*/
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    margin-bottom: 44px;
    margin-top: 60px;	
    height: 0;
    top: 100px;'
	
}
.videoWrapper iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


.main_mv{background: url(../img/01.jpg) no-repeat center 100%/100%;}

.lo{background: url(../img/roll_bg.jpg) no-repeat center 100%/100%;}
.c5roll{background: url(../img/images/cont05_01.jpg) no-repeat center 100%/100%;}

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

body,input,button,textarea,select,table {
    font-size: 12px;
    font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
html,body {height: 100%;}
body { color: #333; overflow-x: hidden;}
body a {color: #555;}
body.on {overflow-y: hidden;}

/*스마트폰 최소 사이즈*/
#wrap {min-width: 320px; height: 100%;}

#header { 
    height: 60px; 
    width: 100%; 
    position: absolute;
    border-bottom: 1px solid #e9e9e9;
	z-index:999;
	background-color:#fff;


}



#header .btn_menu {
    width: 70px;
    height: 40px;
    background: url(../img/common/hem_menu.png) no-repeat 50% 50%;
    background-size: 50px;
    text-indent: -9999px;
    border: none;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -20px;
    outline: none;
}

#header .logo  {
    text-align: center; 
    padding-top: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -21px 0 0 -135px;
}

#header2 { 
    height: 60px; 
    width: 100%; 
    position: fixed;
	z-index:999;
	background-color:#232323;


}

#header2 .btn_menu2 {
    width: 50px;
    height: 50px;
    background: url(../img/common/hem_menu2.png) no-repeat 50% 50%;
    background-size: 25px;
    text-indent: -9999px;
    border: none;
    position: absolute;
    left: 3px;
    top: 50%;
    margin-top: -25px;
    outline: none;
}

#header2 .logo  {
    text-align: center; 
    padding-top: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -23px 0 0 -107px;
}




/*모바일메뉴*/
.m_menu {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 1000px;
    background: #fff;
    text-align: center;
    z-index: 999;
    display: none;
}
.m_menu .gnb>li {
    border-bottom: 1px solid #dfdfdf;
    position: relative;
}

.m_menu .gnb>li>a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    padding: 20px 0;
}
.m_menu .gnb>li:before {
    content: '';
    position: absolute;
    right: -5px;
    top: 0;
    background: url(../img/common/PlusIcon40.png) no-repeat 50% 50%;
    width: 60px;
    height: 60px;
    background-size: 20px; 
    cursor: pointer;
}
.m_menu .gnb>li.on>a {color: #ffffff;}
.m_menu .gnb>li.on:before{
    content: '';
    position: absolute;
    right: -5px;
    top: 0;
    background: url(../img/common/minusIcon40.png) no-repeat 50% 50%;
    width: 60px;
    height: 60px;
    background-size: 20px; 
    color: #fff;
    text-align: center;
}


/*브랜드카테고리*/
.m_menu .gnb .depth2{
    display: none;
    background:#fff;
}
.m_menu .gnb .depth2>li.on {border-top: 1px solid #efefef; }
.m_menu .gnb .depth2>li {position: relative;}
.m_menu .gnb .depth2>li>a {
    display: block;
    font-size: 13px;
    padding: 15px 0;
    color: #fff;
}
.m_menu .gnb .depth2>li>a:hover {color: #fff;}
/*.m_menu .gnb .depth2>li:after {
    content: '';
    position: absolute;
    right: 5px;
    top: 5px;
    width: 40px;
    height: 40px;
    background: url(../img/common/plus-empty24.png) no-repeat 50% 50%;
    background-size: 15px;
    cursor: pointer;
}*/
.m_menu .gnb .depth2>li.on:after{
    content: '';
    position: absolute;
    right: 5px;
    top: 5px;
    background: url(../img/common/minus-empty24.png) no-repeat 50% 50%;
    width: 40px;
    height: 40px;
    background-size: 15px; 
}


.m_menu .gnb .depth3 {
    border-bottom: 1px solid #c1c1c1; 
    border-top: 1px solid #c1c1c1;
    background: rgba(234,84,19,0.9);
}
.m_menu .gnb .depth3>li>a {
    display: block;
    padding: 11px 0;
    font-size: 13px;
    color: #fff;
}
.m_menu .gnb .depth2>li>.depth3 {display: none;}

.m_menu .gnb .depth {
    display: none;
}
.m_menu .gnb .depth>li>a {
    font-size: 13px;
    display: block;
    padding: 15px 0;
	background-color:#003d50;
}
.m_menu .gnb .depth>li>a:hover {
    color: #fff;
}



/*전화번호*/

#header .m_tel {
    position: absolute;
    right: 12px;
    margin: 10px 0 0 0;
   
}


#header .blog {
    position: absolute;
    right:105px;
    margin: 10px 0 0 0;
   
}



.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
   z-index: -999999;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -999999;
}

.mute_btn,.vol_off, .vol_on,.vol_off2, .vol_on2,.vol_off3, .vol_on3{position: absolute; top: 6%; right: 4%; z-index: 999;}





/*main txt*/
.main-txt {
    position: absolute;
    z-index: 998;
    display: inline-block;
    width: 100%;
    text-align: center;
    pointer-events: none;
    max-width: 600px;
	
}

.main-txt01 {
    position: absolute;
    animation-duration: 1s;
    animation-name: txt01;
    margin-top: 0px;
	animation-delay: 4.3s;
}

.main-txt02 {
    position: absolute;
    animation-duration: 2s;
    animation-name: txt01;
    margin-top: 0px;
	animation-delay: 4.3s;
}

.main-txt03 {
    position: absolute;
    animation-duration: 3s;
    animation-name: txt02;
    margin-top: 0px;
	animation-delay: 4.3s;
}



@keyframes txt01 {

  from {  opacity:0; }
  40%  {  opacity:0; } 
  50% {margin-top:-20px;}
  to { }
  
}

@keyframes txt02 {

  from {  opacity:0; }
  40%  {  opacity:0; } 
  50% {margin-top:20px;}
  to { }
  
}







.bo_btn{position: fixed; bottom: 0; z-index: 100; width: 100%; max-width: 720px; height:48px; line-height: 48px; font-size: 4vw; text-align: center; background: #b58b20; color: #fff;}
.bo_btn span{font-size: 2.8vw;}





/*intro*/
.start{position: fixed;  height:100%; width:100%; z-index:9999999; animation-duration:5s; animation-name: slidein; background-color:#161519;
	margin-top:0; left: 0; top: 0;
}

.intro_box { width: 100%; margin-top: 25%; }
.int01 { margin-top: -10px; opacity: 0; }
.int02 { margin-top: -10px; opacity: 0; }
.int03 { margin-top: -5px; opacity: 0; }
.int04 { margin-top: -10px; opacity: 0; }
.int05 { margin-top: -10px; opacity: 0; }
.intro_bg { position: absolute; left: 0; bottom: 0; }

/*main*/
.main_wrap{position:relative; z-index:99; width:100%; margin-top: -40px; overflow: hidden;}
.main_txt{position: absolute; top: 26%; width: 100%; text-align: center;}
	.main_txt p{opacity: 0; position: absolute; top: -20px; width: 100%; font-size: 3vw; line-height: 5vw; letter-spacing: -1.8px;}
	.main_txt h{opacity: 0; position: absolute; top: 12vw; left: 0; right: 0; font-size: 3.4vw; font-weight: bold;}
	.main_txt img{opacity: 0; position: absolute; top: 18vw; left: 0; right: 0; width: 50%; margin: 0 auto;}
	.main_s{opacity: 0; position: absolute; bottom: 4vw; left: -20%; width: 50%; }
	.main_bg.active{transform: scale(1);}
	.main_bg{position: relative; z-index: -1; transform: scale(1.2); transition: 1s;}


@media (min-width: 720px){
	.main_txt p{font-size: 2vw; line-height: 3.2vw;}
	.main_txt h{font-size: 2.8vw;}
	.main_txt img{opacity: 0; position: absolute; top: 18vw; left: 0; right: 0; width: 50%; margin: 0 auto;}
}




/*
@keyframes slidein {

  from { margin-top:0px; opacity:1; }
  80%  { margin-top:0px; opacity:1;} 
  to { }
  
}

@keyframes line {

  from { transform: scale(5); opacity: 0; }
  80% { }

  to { }
  
}
@keyframes logo {

  from {  opacity:0;}
  60%  {  opacity:0; } 
  to { }
  
}

@keyframes slidein1 {

  from {  opacity:0; margin-top: -20px;}
  60%  {  opacity:0; margin-top: -20px;} 
  to { }
  
}

@keyframes slidein2 {

  from {  opacity:0; margin-top: -20px; }
  70%  {  opacity:0; margin-top: -20px; } 
  to { }
  
}
*/