@charset "UTF-8";

@media (max-width: 1500px) {
  #visual .v_slide.type3 .live_icon {
    margin-bottom: 2rem;
    background-size: 100%;
  }
  #visual .v_slide.type3 .tit {
    font-size: 4rem;
    line-height: 5rem;
    margin-bottom: 1rem;
  }
  #visual .v_slide.type3 .s_word {
    line-height: 6rem;
    font-size: 5rem;
  }
}

@media (max-width: 1380px) {
  #gnb1 > ul > li > a {
      font-size: 1.5rem;
  }
}

@media (max-width: 1300px) {
  #visual .txt {
    width: calc(100% - 4rem);
  }
}

@media (max-width: 1210px) {  
 .translated-ltr #gnb1 > ul > li > a { font-size: 1.2rem;}
  }

@media (max-width: 1280px) {
  #section2,
#section3 .slide,
#section4,
#section7,
#section5 .wrap,
#section6 .wrap {
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
    opacity: 1 !important;
  }
  #section1 .control {
    max-width: 35rem;
  }
  #section2,
#section3 {
    max-width: calc(100% - 2rem);
    margin-left: 2rem;
  }
  #section2 .control,
#section3 .control {
    right: 2rem;
  }
  #section5 .wrap > div {
    min-height: 254px;
  }
  #section5 .wrap > div.pop {
    width: 400px;
    height: 254px;
  }
  #section5 .wrap > div.pop .slick-slide img {
    width: 400px;
    height: 254px;
  }
  #section5 .wrap > div.link {
    width: calc((100% - 6rem - 400px) / 2);
  }
  #section5 .wrap > div.qck {
    width: calc((100% - 6rem - 400px) / 2);
  }
  #section5 .wrap > div.qck a {
    padding: 2.1rem 4rem;
  }
  #section5 .wrap > div + div {
    margin-left: 3rem;
  }
  #section6 .family_banner {
    padding: 0 5rem;
    width: 100%;
  }
  #section6 .family_banner .slick-list {
    -webkit-transform: translateX(0.75rem);
            transform: translateX(0.75rem);
  }
  #section6 .family_banner .slick-arrow {
    width: 4rem;
    height: 4rem;
    line-height: 3.8rem;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: calc(50% - 1rem);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 1;
    font-family: "xeicon";
    font-size: 1.6rem;
    text-align: center;
    border-radius: 50%;
    color: #AAAAAA;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  #section6 .family_banner .slick-arrow::before {
    display: block;
    content: "\e93b";
  }
  #section6 .family_banner .slick-arrow.slick-next {
    right: 0rem;
    left: inherit;
  }
  #section6 .family_banner .slick-arrow.slick-next::before {
    content: "\e93e";
  }
  #section6 .family_banner .slick-arrow:hover, #section6 .family_banner .slick-arrow:focus {
    border: 1px solid #666666;
    color: #888;
  }
}
@media (max-width: 1140px) {
  /* 비주얼 */
  #visual .txt {
    margin: 0 auto;
  }
  #visual .txt .tit {
    font-size: 5rem;
    line-height: 6.4rem;
  }
  #visual .txt .s_word {
    line-height: 15rem;
    font-size: 8rem;
  }
}
@media (max-width: 1080px) {
  /* 비주얼 */
  #visual .v_slide {
    position: relative;
    height: 60rem;
  }
  #visual .v_slide img {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #visual .v_slide .youtube + img {
    opacity: 0;
  }
  #visual .v_slide .txt .form {
    margin-top: 2rem;
  }
  #visual .v_slide.type2 .tit {
    font-size: 4rem;
    line-height: 5rem;
  }
  #visual .v_slide.type2 .s_word {
    line-height: 6rem;
    font-size: 5rem;
  }
  #visual .mov iframe {
    left: -25%;
    width: 150%;
  }
  #section5 .wrap > div.link {
    width: calc(100% - 400px - 1.5rem);
  }
  #section5 .wrap > div.qck {
    width: 100%;
    margin-left: 0;
    font-size: 0;
    min-height: auto;
    margin-top: 1.5rem;
  }
  #section5 .wrap > div.qck a {
    width: calc(32.9% - 1rem);
    padding: 2rem 2rem;
    font-size: 2rem;
    display: inline-block;
    min-height: auto;
    line-height: 4rem;
  }
  #section5 .wrap > div.qck a + a {
    margin-left: 2rem;
    margin-top: 0;
  }
  #section5 .wrap > div.qck a img {
    width: auto;
    height: 4rem;
  }
  #section5 .wrap > div + div {
    margin-left: 1.5rem;
  }
}
@media (max-width: 980px) {
  #section7 .box2 .notice_tab {
    width: 100%;
  }
  #section7 .box2 .incruit {
    width: 100%;
    padding-left: 0;
    margin-top: 5rem;
  }
  #section5 .wrap > div.link {
    width: calc(100% - 1.5rem - 400px);
    padding: 5rem 3rem;
  }
  #section5 .wrap > div + div {
    margin-left: 1.5rem;
  }
}
@media (max-width: 768px) {
  #header {
    height: 8.5rem;
  }
  #header .search .control.open {
    bottom: 2.5rem;
  }
  #header.fixed #logo {
    margin-top: 1.6rem;
  }
  #hnb {
    top: 3rem;
    font-size: 1.8rem;
  }
  #gnb2 .control.open {
    bottom: 3.1rem;
  }
  /* 비주얼 */
  #visual .v_slide.type2 .tit {
    font-size: 2.7rem;
    line-height: 4rem;
  }
  #visual .v_slide.type2 .s_word {
    line-height: 5rem;
    font-size: 3.7rem;
  }
  #visual .v_slide.type2 .form {
    margin-top: 3rem;
    width: 90%;
  }
  #visual .v_slide.type3 .tit {
    font-size: 3rem;
    line-height: 4rem;
  }
  #visual .v_slide.type3 .info {
    line-height: 3rem;
    font-size: 2rem;
  }
  #visual .txt .tit {
    font-size: 3rem;
    line-height: 4.4rem;
  }
  #visual .txt .bul {
    margin-top: 2rem;
  }
  #visual .txt .bul li + li {
    margin-top: 0.5rem;
  }
  #visual .txt .s_word {
    line-height: 10rem;
    font-size: 5rem;
  }
  #visual .txt .btn {
    margin-top: 2rem;
  }
  #visual .mov iframe {
    top: -16%;
    left: -80%;
    width: 270%;
  }
  #section1 .control {
    width: 73%;
    padding: 3rem 4rem 0 0;
  }
  #section1 .control .nav {
    margin-right: 1.5rem;
  }
  #section1 .scroll_info {
    display: none;
  }
  #section2 {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }
  #section2::before {
    top: auto;
    bottom: 0;
    height: 25rem;
  }
  #section2 h3.title {
    margin-top: 0;
  }
  #section2 .tab_wrap {
    height: auto;
  }
  #section2 .tab_wrap .tab_btn {
    left: 0;
    width: 11rem;
    font-size: 1.5rem;
    padding-right: 0;
  }
  #section2 .tab_wrap > ul {
    display: block;
    width: 100%;
  }
  #section2 .tab_wrap > ul li .tab_cont {
    left: 20rem;
    width: calc(100% - 20rem);
  }
  #section2 .tab_wrap > ul li:nth-child(0) .tab_btn {
    top: 2.9rem;
  }
  #section2 .tab_wrap > ul li:nth-child(1) .tab_btn {
    top: 7.8rem;
  }
  #section2 .tab_wrap > ul li:nth-child(2) .tab_btn {
    top: 12.7rem;
  }
  #section2 .tab_wrap > ul li:nth-child(3) .tab_btn {
    top: 17.6rem;
  }
  #section2 .tab_wrap > ul li:nth-child(4) .tab_btn {
    top: 22.5rem;
  }
  #section2 .tab_wrap > ul li:nth-child(5) .tab_btn {
    top: 27.4rem;
  }
  #section2 .tit_box {
    display: block;
    width: 100%;
    padding-bottom: 2rem;
    padding-right: 0;
  }
  #section3 {
    padding-bottom: 5rem;
  }
  #section3 .interactive {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }
  #section3 .interactive::before {
    top: 0;
    left: -9rem;
  }
  #section3 .interactive .tit_box {
    display: block;
    width: 100%;
    margin-bottom: 4rem;
  }
  #section3 .interactive .inter_slide {
    display: block;
    width: 100%;
  }
  #section3 .interactive .bar {
    width: calc(100% - 20rem);
  }
  #section4 {
    padding: 5rem 0;
  }
  #section4 .box1 ul {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
  }
  #section4 .box1 ul li {
    padding: 0 1rem;
  }
  #section4 .box1 ul li i {
    max-width: 100%;
    height: 14rem;
  }
  #section4 .box1 ul li i img {
    position: static;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  #section4 .box1 ul li a:hover i img,
#section4 .box1 ul li a:focus i img {
    -webkit-transform: scale(1.05) translate(0);
            transform: scale(1.05) translate(0);
  }
  #section7 .box2 {
    margin-top: 6rem;
  }
  #section5 .wrap > div.pop {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  #section5 .wrap > div.pop .slick-slide img {
    width: 100%;
    height: 100%;
  }
  #section5 .wrap > div.link {
    width: 100%;
    margin-left: 0;
    margin-top: 1rem;
  }
  #section5 .wrap > div.qck {
    padding-top: 2rem;
  }
  #section5 .wrap > div.qck a {
    display: block;
    width: 100%;
    min-height: 0;
    margin-top: 1rem;
    line-height: 41px;
  }
  #section5 .wrap > div.qck a + a {
    margin-left: 0;
    margin-top: 1rem;
  }
}
@media (max-width: 540px) {
  #section4 .box1 ul {
    width: 100%;
    margin: 0;
  }
  #section4 .box1 ul li {
    display: block;
    width: 100%;
    padding: 0;
  }
  #section4 .box1 ul li + li {
    margin-top: 2.5rem;
  }
  #section4 .box1 ul li i {
    height: 38rem;
  }
  #section7 .box2 .notice_tab {
    display: block;
    width: 100%;
  }
  #section7 .box2 .incruit {
    display: block;
    width: 100%;
    padding-left: 0;
    margin-top: 4rem;
  }
  #section5 .wrap > div.qck a {
    line-height: 3rem;
  }
  #section5 .wrap > div.qck a img {
    height: 3rem;
  }
}
@media (max-width: 400px) {
  #section1 .control .nav li::after {
    -webkit-transform: translateX(-2.3rem) scaleX(0);
            transform: translateX(-2.3rem) scaleX(0);
  }
  #section1 .control .nav li.on {
    margin-right: 7.5rem;
  }
  #section1 .control .nav li.on::before {
    width: 4.8rem;
    right: -7rem;
  }
  #section1 .control .nav li.on::after {
    width: 4.8rem;
    right: -7rem;
  }
  #section1 .control .nav li + li {
    margin-left: 1.5rem;
  }
  .tab_wrap .tab_btn {
    min-width: 14rem;
  }
  #section2 .tab_wrap > ul li .tab_cont {
    left: 16rem;
    width: calc(100% - 16rem);
  }
  #section4 h3 {
    font-size: 2.2rem;
  }
  #section7 .box2 .notice_tab {
    padding-top: 5rem;
  }
  #section7 .box2 .notice_tab::before {
    top: 5rem;
  }
  #section7 .box2 .notice_tab h3 {
    padding-bottom: 4.5rem;
  }
  #section7 .box2 .notice_tab > ul > li:first-child .tab_btn {
    left: 0;
  }
  #section7 .box2 .notice_tab > ul > li:nth-child(2) .tab_btn {
    left: 10.3rem;
  }
  #section7 .box2 .notice_tab > ul > li:nth-child(3) .tab_btn {
    left: 20.6rem;
  }
  #section7 .box2 .notice_tab > ul > li + li .tab_btn::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    left: -1.3rem;
    width: 2px;
    height: 12px;
    background-color: #D5D5D5;
  }
  #section7 .box2 .tab_btn {
    font-size: 2.2rem;
  }
  #section5 .wrap > div.qck a {
    width: 100%;
  }
  #section5 .wrap > div.qck a + a {
    margin-left: 0;
    margin-top: 1rem;
  }
}
@media (max-width: 300px) {
  #section7 .box2 .notice_tab > ul > li:nth-child(2) .tab_btn {
    left: 9.3rem;
  }
  #section7 .box2 .notice_tab > ul > li:nth-child(3) .tab_btn {
    left: 18.6rem;
  }
  #section7 .box2 .notice_tab > ul > li + li .tab_btn::before {
    top: 0.6rem;
    left: -0.9rem;
    width: 1px;
  }
}