html,body {
  scroll-behavior: smooth;
  height: 100%;
}
body {position:fixed;overflow-y:scroll;}
body.on {position:relative;}

/* 공통 */
#BRAND .section:last-child {margin-bottom:0;}
#BRAND .section .text_box {margin:0 8.333333%;}
#BRAND .section .g_title4_en {margin-bottom:40px;}
#BRAND .section .g_title5_en {line-height:1;margin-bottom:10px;}
#BRAND .section .g_title7_en {line-height:1;margin-bottom:14px; padding-top:8px;}


/* section_top */
#BRAND .section_top {width:100vw;min-height:100vh;min-width:1280px;position:relative;overflow:hidden;}
#BRAND .section_top .bg {width:100vw;min-height:100vh;min-width:1280px;background:url(../images/bg_tgt.jpg) no-repeat center / cover;background-attachment:fixed;}


#BRAND .section_top .title {text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;}
#BRAND .section_top .title > * {color:#fff;}
#BRAND .section_top .title > .g_title1_en {padding-bottom:40px;}
#BRAND .section_top .title > .g_text1:nth-of-type(2) {margin-bottom:30px;}
#BRAND .section_top .title > .g_title7_en {margin:0;padding:0;}
#BRAND .g_section {position:relative;min-width:1280px;padding-top:230px;}

/* section_value */
#BRAND .section_value .g_title7_en {line-height:1.4;}
#BRAND .section_value em {display:block;color:#0057B8;margin-bottom:25px; line-height:1;}

/* section_mission */
#BRAND .section_mission .g_title2 {font-size:3.333333vw;line-height:1.25; font-weight:300; word-break: break-word;}
#BRAND .section_mission .g_text2 br.break {display:none;}
#BRAND .section_mission .col:nth-of-type(2) {padding-top:6px;}

/* section_film */
#BRAND .section_film .g_title4_en {margin-bottom:64px;}
#BRAND .section_film .video_box {cursor:pointer;position:relative;overflow:hidden;}
#BRAND .section_film .video_box > img {width:100%;height:100%;}
#BRAND .section_film .video_box > img.slide_mask {position:absolute; width:100px;height:auto;top:-4px;left:-4px; z-index:1;pointer-events:none;}
#BRAND .section_film .video_box .video_btn {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; cursor: pointer; z-index: 1;}
#BRAND .section_film .video_box .video_btn:after {content: ''; position: absolute; width: 76px; height: 88px; background: url(../images/ico_play.svg) no-repeat center / contain; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9;transition:all .3s;}
#BRAND .section_film .video_box .video_btn:hover:after {background-image:url(../images/ico_play_on.svg);}
#BRAND .section_film .video_box .video {display: block; height: 100%; width: auto; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transition: all 0.2s; transform: translate(-50%,-50%); object-fit: contain;}
#BRAND .section_film .video_box .video.full {transform:translate(0,0)}

#BRAND .section_film .video_box:before {content: ''; position: absolute; width: 50%; height: 100%; background: #fff; right: 50%; top: 0; z-index: 3; transition: all 0.8s;}
#BRAND .section_film .video_box:after {content: ''; position: absolute; width: 50%; height: 100%; background: #fff; left: 50%; top: 0; z-index: 3; transition: all 0.8s;}
#BRAND .section_film.on .video_box:before {right: 100%;transition-delay:0.5s;}
#BRAND .section_film.on .video_box:after {left: 100%;transition-delay:0.5s;}

#BRAND .section_film .video_box.on .video_btn {display:none;}
#BRAND .section_film .video_box.on > img.slide_mask {display:none;}

/* section_ci */
#BRAND .section_ci .text_box {position:relative;}
#BRAND .section_ci .g_title5_en {margin-bottom:30px;color:#d0d0d0;}
#BRAND .section_ci .col4 {cursor:pointer;}
#BRAND .section_ci .col4 .g_title7_en {color:#cfcfcf;}
#BRAND .section_ci .col4 .g_text2 {color:#d6d6d6;}
#BRAND .section_ci .col4.on .g_title7_en {color:#111;}
#BRAND .section_ci .col4.on .g_text2 {color:#333;}
#BRAND .section_ci .col4:hover .g_title7_en {color:#111;}
#BRAND .section_ci .col4:hover .g_text2 {color:#333;}
#BRAND .section_ci .row {margin-bottom:105px;}
#BRAND .section_ci .logo_video video {display:none;margin:0 auto; width:654px;}
#BRAND .section_ci .logo_video video.on {display:block;}
#BRAND .section_ci .btn_area {position:relative; margin-right:8.3333%; margin-top:64px; font-size:0; text-align:right;}
#BRAND .section_ci .btn_area .g_btn:first-child {margin-right:8px;}
#BRAND .section_ci .small {display: none;}

/*=== ANIMATIONS ================================================================*/
#BRAND .section .text_box * {opacity:0;visibility:hidden;transform:translateY(80px);}
#BRAND .section.on  .text_box * {opacity:1;visibility:visible;transform:translateY(0);transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity 1s ease-out;}
#BRAND .section.on .g_title4_en {transition-delay:0.1s;}

#BRAND .section.on .text_box .g_title7 {transition-delay:0.2s;}
#BRAND .section.on .text_box .g_title7 + .g_text1 {transition-delay:0.2s;}
#BRAND .section.on .text_box .g_text2 {transition-delay:0.2s;}


/* section_top */

#BRAND .section_top .g_title1_en {margin-top:200px;opacity:0;}
#BRAND .section_top .scroll_line {opacity:0;transition: all 1s;}

#BRAND .section_top p {opacity:0;visibility:hidden;transform:translateY(50px);transition: all 1s; display:block;}


#BRAND .section_top.on .bg {
  animation:scale 2s forwards;
  -ms-animation:scale 2s forwards;
}
#BRAND .section_top.on p:nth-of-type(1) {transition-delay:0.6s;}
#BRAND .section_top.on p:nth-of-type(2) {transition-delay:0.7s;}
#BRAND .section_top.on p:nth-of-type(3) {transition-delay:0.8s;}

#BRAND .section_top.on p {opacity:1;visibility:visible;transform:translateY(0);}

#BRAND .section_top.on .scroll_line {opacity:1;}
#BRAND .section_top.on .scroll_line.hide {opacity:0;}

@-webkit-keyframes scale {
  0% {transform:scale(1.15); opacity:0;}
  100% {transform:scale(1); opacity:1}
}
@keyframes scale {
  0% {transform:scale(1.15); opacity:0;}
  100% {transform:scale(1); opacity:1}
}

/* section_value */
#BRAND .section_value.on .col:nth-of-type(1) {transition-delay:0.3s;}
#BRAND .section_value.on .col:nth-of-type(2) {transition-delay:0.45s;}
#BRAND .section_value.on .col:nth-of-type(3) {transition-delay:0.6s;}

/* section_mission */
#BRAND .section_mission .fill_text {display: inline-block;font-size: 0;font-weight: 300; line-height: 1.3;}
#BRAND .section_mission .mission_inner {margin:0 8.333333%;}
#BRAND .section_mission .fill_text {position: relative;}
#BRAND .section_mission .fill_text:nth-of-type(1) {margin-right: 5px;}
#BRAND .section_mission .fill_text img {display:block;}
#BRAND .section_mission .fill_text img + img {margin-top:13px;}
#BRAND .section_mission .fill_text .active {position:absolute;top:0;left:0;width:0;overflow:hidden;transition:width .6s;}
#BRAND .section_mission .fill_text.on .active {width:100%;}
#BRAND .section_mission .content {opacity:0;visibility:hidden;transform:translateY(80px);}
#BRAND .section_mission .content.on {margin-top:48px;opacity:1;visibility:visible;transform:translateY(0);transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity 1s ease-out;}
#BRAND .section_mission .content .g_text2 {display: none;}
#BRAND .section_mission .content.on .g_text2 {display: block;}
#BRAND .section_mission .col4 img {width:100%;margin-top:-68px;}
#BRAND .section_mission .col4 .default {position:absolute;z-index:2;top:0;left:0;pointer-events: none;}
#BRAND .section_mission .col4 .img {position:absolute;top:0;left:0;opacity:0;visibility:hidden;transition: opacity .4s, visibility .4s;}
#BRAND .section_mission .col4 .img.on {opacity:1;visibility:visible;}

/* section_film */
#BRAND .section_film.on .movie_area {transition-delay:0.3s;}

/* section_ci */
#BRAND .section_ci .btn_area {opacity:0;visibility:hidden;transform:translateY(80px);}
#BRAND .section_ci.on .btn_area {opacity:1;visibility:visible;transform:translateY(0);transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity 1s ease-out;}
#BRAND .section_ci.on .col {transition-delay:0.3s;}
#BRAND .section_ci.on .col:nth-of-type(1) {transition-delay:0.3s;}
#BRAND .section_ci.on .col:nth-of-type(2) {transition-delay:0.45s;}
#BRAND .section_ci.on .col:nth-of-type(3) {transition-delay:0.6s;}
#BRAND .section_ci.on .logo_img {transition-delay:0.75s;}
#BRAND .section_ci.on .col4 .g_title7_en {transition:color .3s;}
#BRAND .section_ci.on .col4 .g_text2 {transition:color .3s;}

.section_mission .g_text2 {
  padding-right: 0
}

@media screen and (min-width: 1700px) {
  #BRAND .section .text_box .g_title7_en, #BRAND .section .text_box .g_text2 {white-space:nowrap;}
}
@media screen and (max-width: 1700px) {
  .section_value .text_box .row .col:first-child .g_text2 {
    width: 230px;
  }
  .section_value .text_box .row .col:nth-child(3) .g_text2 {
    width: 250px;
  }
  #BRAND .section_ci .col4:nth-child(2) .g_text2 {
    width: 255px;
  }
  #BRAND .section_ci .col4 .g_text2 .block {
    display: block;
  }
  #BRAND .section_ci .small {display: block;}
  #BRAND .section_ci .normal {display: none;}
}



@media screen and (min-width: 1920px) {
  #BRAND .section_mission .g_title2 {font-size:64px;}
}


@media screen and (max-width: 1732px) {
  .section_value .text_box .row .col:nth-child(2) .g_text2 {
    width: 200px;
  }
  #BRAND .section_ci .col4:first-child .g_text2 {
    width: 252px;
  }
  
}

@media screen and (max-width: 1620px) {
  #BRAND .section_mission .g_title2 {font-size:54px;}
}

@media screen and (max-width: 1592px) {
  #BRAND .section_mission .g_text2 br.break {display:block;}
}