/******************************************
  컨텐츠 영역
******************************************/
.page_content {
    padding: 0px 0 200px;
}
.page_content .page_container  {
    /*max-width: 1200px;*/
    margin: 0 auto;
    position: relative;
}
/*.page_content .page_container img {max-width: 100%;}*/
@media screen and (max-width: 1200px) {
  .page_content .page_container  {
    /*padding: 0 2rem;*/
    width: 100%;
  }
}
@media screen and (max-width: 700px) {
  .page_content  {
    padding: 0px 0;
  }
}
.pc-only {display:block;}
.m-only {display:none;}



/***************************************
  브랜드
****************************************/
/* .brand .sub_top_visual,
.brand .page_location_nav{display: none;} */
.brand .page_content{padding: 0;}
.brand .page_content .page_container img{max-width: unset;}
.page_content .brand_container{max-width: 100%;}
.brandarea1{  overflow:hidden;    }
.brandarea1 .pin{width:100%; height:100vh; height:100dvh; background:transparent; color:#fff; text-align:center; overflow:hidden;}
.brandarea1 .sec1{position:relative; width:100%; height:100vh; height:100dvh; background:url(./img/bg_brand1.jpg) no-repeat center center; background-size:cover;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; z-index:2;}
.brandarea1 .bcont1{  width:100%;  text-align:center;  }
.brandarea1 .bcont1 > .lgbox1{  width:50%; max-width:500px;  margin:0 auto;  opacity:0;  transition:opacity ease .8s 0s;}
.brandarea1 .bcont1 > .lgbox1 > svg{  overflow: visible;}
.brandarea1 .bcont1 > .lgbox1 > svg > .leftp1{ transform: translateX(-100px); animation: moveleft1 1.2s forwards ease-in-out; animation-delay: 0.7s; }
.brandarea1 .bcont1 > .lgbox1 > svg > .leftp2{ transform: translateX(-50px); animation: moveleft2 1.2s forwards ease-in-out; animation-delay: 0.7s; }
.brandarea1 .bcont1 > .lgbox1 > svg > .rightp1{ transform: translateX(50px); animation: moveright1 1.2s forwards ease-in-out; animation-delay: 0.7s;}
.brandarea1 .bcont1 > .lgbox1 > svg > .rightp2{ transform: translateX(100px); animation: moveright2 1.2s forwards ease-in-out; animation-delay: 0.7s; }
@keyframes moveleft1 {
  from { transform: translateX(-100px);}
  to { transform: translateX(0px);}
}
@keyframes moveleft2 {
  from { transform: translateX(-50px);}
  to { transform: translateX(0px);}
}
@keyframes moveright1 {
  from { transform: translateX(50px);}
  to { transform: translateX(0px);}
}
@keyframes moveright2 {
  from { transform: translateX(100px);}
  to { transform: translateX(0px);}
}
.brandarea1 .bcont1 > .txt1{  position:relative; font-weight:300; color:#fff; font-size:35px; line-height:50px; letter-spacing:1px;}
.brandarea1 .bcont1 > .txt1 > span{  position:relative; bottom:0;  opacity:0;  display:block;  overflow:hidden;}
.brandarea1 .bcont1 > .txt1 em{  font-weight:600;}

.brandarea1 .bcont1 > .txt2{  font-weight:300; font-family:"Roboto"; color:rgba(255,255,255,.5); font-size:16px; line-height:16px; letter-spacing:1px;  white-space:nowrap;
  opacity:0; width:0;  overflow:hidden;  margin:0 auto;  text-align:center;  display:flex; justify-content:center;}
.brandarea1 .bcont1 > .txt2 > span{  display:inline-block;  vertical-align:middle;  margin:0 auto;}
.brandarea1 .bcont1 > .txt2 > span::before{  display:inline-block;  vertical-align:middle;  width:180px; height:1px;  margin-right:10px;  background:rgba(255,255,255,.5);  content:"";}
.brandarea1 .bcont1 > .txt2 > span::after{  display:inline-block;  vertical-align:middle;  width:180px; height:1px;  margin-left:10px;  background:rgba(255,255,255,.5);  content:"";}

.brandarea1 .bcont1 > .txt3{  font-weight:300; color:#fff; font-size:18px; line-height:26px; letter-spacing:1px;}
.brandarea1 .bcont1 > .txt3 > span{  position:relative; bottom:0;  opacity:0;  display:block;  overflow:hidden;}
.brandarea1 .bcont1 > .txt3 em{  font-weight:500;}
.brandarea1 .bcont1 .heightp1{  opacity:0;}
.brandarea1 .bcont1 .heightp1 > .downtxt1{  position:relative;  display:inline-block;  width:116px; height:116px;  background:url(./img/ico_mouse1.png) no-repeat center center;  font-size:0px; line-height:0;}
.brandarea1 .bcont1 .heightp1 > .downtxt1::before{  position:absolute; left:0; top:0;  width:100%; height:100%;  background:url(./img/txt_cir1.png) no-repeat center center; 
  background-position:cover;  animation:ratateLoop infinite 15s linear; -ms-animation:ratateLoop infinite 15s linear;  content:"";}

.brandarea1 .sec2{  position:relative; z-index:1; width:100%;   background:#fff; color:#000; transition: background-color ease .3s; }
.brandarea1 .bcont2{  position:relative;  width:100%; height:100vh; height:100dvh;  margin-bottom:20px;  z-index:1;  background:#fff; }
.brandarea1 .bcont2.fx{  text-align:center;  display:flex; align-items:center; justify-content:center;}  
.brandarea1 .bcont2.fx h3{  text-align:center;  display:inline-block;  background:#001a61;  border-radius:20px;  white-space:nowrap;  font-size:16px; line-height:16px;  padding:10px 0;  max-width:0; 
  transition:padding ease .5s 0s, max-width ease .5s 0s}
.brandarea1 .bcont2.fx h3 em{  display:block;  position:relative; left:50%;  transform:translateX(-50%);      font-weight:400; font-family:"Roboto"; color:#fff; }
.brandarea1 .bcont2.fx .tit1{  overflow:hidden;   white-space: nowrap;  margin-top:20px;  font-weight:900; font-family:"Roboto"; color:#001a61; font-size:100px; line-height:100px;  opacity:0;  transition:opacity ease .3s .4s}
.brandarea1 .bcont2.fx .tit1 span{  display:inline-block;  vertical-align:bottom;  line-height:100px;  color:#c6c6c6;  max-width:0;  opacity:0;  overflow:hidden;  transition:opacity ease .3s .4s  }
.brandarea1 .bcont2.fx .tit1 em{  color:#001a61;}
.brandarea1 .bcont2.fx .txt1{  margin-top:40px;  font-weight:300; color:#888; font-size:25px; line-height:40px;  opacity:0;  transform:translateY(10px);  transition:transform ease .3s .4s, opacity ease .3s .4s}
.brandarea1 .bcont2.fx .txt1 > em{  font-weight:300;  transition:font-weight ease .3s .4s, color ease .3s .4s }
.brandarea1 .bcont2.fx.on h3{  padding:12px 40px;  max-width:500px;  transition:padding ease .8s .7s, max-width ease .8s .7s}
.brandarea1 .bcont2.fx.on .tit1{  opacity:1;  transition:opacity ease .8s 1.3s}
.brandarea1 .bcont2.fx.on .tit1 span{  max-width:400px;  opacity:1;  transition:all ease 1.0s 2.0s, opacity ease .8s 2.2s}
.brandarea1 .bcont2.fx.on .txt1{  opacity:1;  transform:translateY(0);  transition:transform ease .8s 3.2s, opacity ease .6s 3.2s}
.brandarea1 .bcont2.fx.on .txt1 > em{  font-weight:600; color:#162259;  transition:font-weight ease .8s 3.8s, color ease .8s 3.8s }
.brandarea1 .bcont2:nth-of-type(2){     width: 100%;  height:100vh; height:100dvh;  position:relative;  z-index:2;  overflow: hidden;}
.brandarea1 .bcont2:nth-of-type(2) .background {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: #000;}
.brandarea1 .bcont2:nth-of-type(2) .background .media {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%; object-fit: cover;}
.brandarea1 .bcont2:nth-of-type(2) .background iframe {  position: absolute;  top: 50%;  left: 50%;  width: 100vw;  height: 56.25vw;  min-height: 100vh;  min-width: 177.77vh;  transform: translate(-50%, -50%);  object-fit: cover;}
.brandarea1 .bcont2:nth-of-type(3){height:auto; height:auto;  margin-bottom:0;  z-index:1;}
.brandarea1 .bcont2:nth-of-type(3) > div{  display:flex; justify-content:center;  width:1400px;  margin:0 auto;}
.brandarea1 .bcont2:nth-of-type(3) > div > *{  position:relative;  width:50%;}  
.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(1){  padding:120px 0;}
.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(1) .tit1{  font-family:"Roboto"; font-weight:800; color:#001a61; font-size:70px; line-height:70px;  opacity:0;  transform:translateX(-30px);  
  transition:transform ease .2s .6s, opacity ease .2s .6s;}
.brandarea1 .bcont2:nth-of-type(3) .hslist1{  margin-top:100px;  opacity:0;  transform:translateY(30px);  transition:transform ease .2s .6s, opacity ease .2s .6s;}
.brandarea1 .bcont2:nth-of-type(3) .hslist1 > li .tt1{  font-weight:600; color:#333333; font-size:30px; line-height:30px;}
.brandarea1 .bcont2:nth-of-type(3) .hslist1 > li .imgbox1{  margin-top:30px;}
.brandarea1 .bcont2:nth-of-type(3) .hslist1 > li > ul{  margin-top:30px;  display:flex; flex-wrap:wrap; gap:0 10px;  max-width:520px;  text-align:left;}
.brandarea1 .bcont2:nth-of-type(3) .hslist1 > li > ul > li{  position:relative;  width:calc(50% - 10px);  font-weight:300; color:#333333; font-size:16px; line-height:22px;  padding-left:12px;  box-sizing:border-box; letter-spacing: -1px;}
.brandarea1 .bcont2:nth-of-type(3) .hslist1 > li > ul > li::before{  position:absolute; left:0; top:7px;  width:4px; height:4px;  border-radius:50%;  background:#001a61;  content:"";}
.brandarea1 .bcont2:nth-of-type(3) .hslist1 > li > ul > li:nth-child(n+3){  margin-top:10px;}
.brandarea1 .bcont2:nth-of-type(3) .hslist1 > li:nth-child(n+2){  margin-top:80px;}
.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1{  position:relative; top:-20px;  z-index:0;  opacity:0;  transform:translateX(30px);  transition:transform ease .2s .6s, opacity ease .2s .6s}
.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1.fixed{  position:fixed;}

.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1 > .lnk1{  position:absolute; left:-97px; top:100px;  width:194px; height:194px;  display:flex; align-items:center; justify-content:center;}  
.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1 > .lnk1::before{  position:absolute; left:0; top:0;  width:100%; height:100%;  background:url(./img/txt_cir2.png) no-repeat; background-size:cover;
  animation:ratateLoop infinite 15s linear; -ms-animation:ratateLoop infinite 15s linear;  content:""}
.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1 > .lnk1::after{  position:absolute; left:11%; top:11%;  width:78%; height:78%;  background:#001a61;  border-radius:50%;  content:"";}  
.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1 > .lnk1 > span{  position:relative;  font-weight:400; color:#fff; font-size:19px;  z-index:1;}
.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1 > .lnk1 > span::before{  display:block;  margin:0 auto; margin-bottom:5px;  width:57px; height:16px;  
  background:url(./img/txt_logo1.png) no-repeat center center; background-size:cover;  content:"";}
.brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1 > .lnk1 > span::after{  display:block;  margin:0 auto; margin-top:6px;  width:25px; height:20px;
  background:url(./img/ico_arr1.png) no-repeat center center; background-size:cover;  content:"";}
.brandarea1 .bcont2:nth-of-type(3).on > div > *:nth-child(1) .tit1{  opacity:1;  transform:translateX(0px);  transition:transform ease .6s .3s, opacity ease .6s .3s;}
.brandarea1 .bcont2:nth-of-type(3).on .hslist1{  opacity:1;  transform:translateY(0px);  transition:transform ease .6s .5s, opacity ease .6s .5s;}
.brandarea1 .bcont2:nth-of-type(3).on > div > *:nth-child(2) > .imgbox1{  opacity:1;  transform:translateX(0px);  transition:transform ease .6s .3s, opacity ease .6s .3s, top ease ease-in-out 1.5s 2.5s;}


@keyframes ratateLoop{
  from{transform:rotate(0);transform:rotate(0)}
  to{transform:rotate(1turn);transform:rotate(1turn)}
}

@media screen and (max-width:1400px) {
  .brandarea1 .bcont1 > .lgbox1{max-width: 350px;}
  .brandarea1 .bcont1 > .txt1{font-size: 28px; line-height: 36px;}
  .brandarea1 .bcont1 > .txt2 > span::before{width: 100px;}
  .brandarea1 .bcont1 > .txt2 > span::after{width: 100px;}
  .brandarea1 .bcont1 > .txt3{font-size: 16px; line-height: 22px;}
  .brandarea1 .bcont2.fx .tit1{font-size: 50px;}
  .brandarea1 .bcont2.fx .txt1{font-size: 18px; line-height: 24px;}
  .brandarea1 .bcont2:nth-of-type(3){position: relative;}
  .brandarea1 .bcont2:nth-of-type(3) > div{width: 90%;}
  .brandarea1 .bcont2:nth-of-type(3) > div > *{width: 100%;}
  .brandarea1 .bcont2:nth-of-type(3) > .cont1 > div:last-child{position: absolute; top: 30px; right: 30px; width: 194px; height: 194px;}
  .brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1{position: absolute !important; top: 0px;}
  .brandarea1 .bcont2:nth-of-type(3).on > div > *:nth-child(2) > .imgbox1 a + img{display: none;}
  .brandarea1 .bcont2:nth-of-type(3) .hslist1{display: flex; justify-content: center; gap: 50px;}
  .brandarea1 .bcont2:nth-of-type(3) .hslist1 > li:nth-child(n+2){margin: 0;}
  .brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(2) > .imgbox1 > .lnk1{top: 0; left: 0;}
}
@media screen and (max-width:1200px){
  .brand .page_content .page_container{padding: 0;}
  .brand .page_content .page_container img{max-width: 100%;}
}
@media screen and (max-width:943px){
  .brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(1) .tit1{text-align: center;}
  .brandarea1 .bcont2:nth-of-type(3) .hslist1{flex-direction: column; align-items: center;}
}
@media screen and (max-width: 775px) {
  .brandarea1 .bcont1{padding: 0 40px; }
  .brandarea1 .bcont1 > .txt3{word-break: keep-all;}
  .brandarea1 .bcont2.fx{padding: 0 40px;}
  .brandarea1 .bcont2:nth-of-type(3) .hslist1{align-items: baseline;}
  .brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(1) .tit1 {font-size: 50px; text-align: left;}
}
@media screen and (max-width: 423px){
  .brandarea1 .bcont1 > .txt1 {font-size: 20px; line-height: 25px;}
  .brandarea1 .bcont2.fx .tit1{font-size: 30px;}
  .brandarea1 .bcont2.fx .txt1{word-break: keep-all;}
  .brandarea1 .bcont2:nth-of-type(3) > div{flex-direction: column;}
  .brandarea1 .bcont2:nth-of-type(3) > div > *:nth-child(1){padding: 60px 0 0;}
  .brandarea1 .bcont2:nth-of-type(3) > .cont1 > div:last-child{position: relative; top: 0; right: 0; margin: 65px auto;}
}
#wrap_content { width:100% !important }
/*brand*/