.max_video{max-width: 1200px; margin: 0 auto}

.sub_visual{height: 520px; padding-top: 100px; background-position: center; background-size: cover;display: flex;
    justify-content: center;
    align-items: center;}
.sub_visual.bg02{background-image: url(../img/sub/subbg02.png)}
.sub_visual.bg03{background-image: url(../img/sub/subbg03.png)}
.sub_visual.bg04{background-image: url(../img/sub/subbg04.png)}
.sub_visual.bg05{background-image: url(../img/sub/subbg05.png)}


.sub_nav{    display: flex;
    padding: 30px 0 ;
    gap: 60px;
    justify-content: center;
    align-items: center; border-bottom: 1px solid #f5f5f5}
.sub_nav a{color: #1D1D1B; font-size: 22px; font-weight: 500; transition-duration: .5s; padding-bottom: 8px;  position: relative }
.sub_nav a:after{content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 0px; max-width: 0; 
transition-duration: .5s; visibility: hidden; background: #1B97D3}
.sub_nav a.on, .sub_nav a:hover{color: #1B97D3; }

.sub_nav.eng a{font-size: 18px}
.sub_nav a.on:after, .sub_nav a:hover:after{width: 100%; max-width: 500px; visibility: visible}


.sub_top_title{text-align: center; }
.sub_top_title p{color: #fff; text-transform: uppercase; font-size: 22px; font-weight: 500; margin-bottom: 10px}
.sub_top_title h2{color: #fff; font-size: 40px; font-weight: 600; }


.sub_section{padding: 150px 0}


.sub_title{margin-bottom: 70px}
.sub_title h2{font-size: 60px; font-weight: bold;  color: #644D5B}
.sub_title p{font-size: 18px; margin-top: 20px; word-break: keep-all}

.form_in ul{display: flex; gap:40px 20px;flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}
.form_in ul li{width: calc(50% - 10px)}
.form_in ul li.w100{width: 100%}

.form_in input, .form_in select{background: #fff; height: 60px; line-height: 60px;
 border-radius: 5px; padding: 0 20px; font-size: 16px; color: #1D1D1B; border: 0; width: 100%; border: 1px solid #ddd}

.form_in ul li label{color: #1D1D1B; font-size: 18px; margin-bottom: 10px; display: block; font-weight: bold}
.form_in ul li label span{color: red}

.form_in ul li .file_are{display: flex; gap:20px; justify-content: flex-start;
    align-items: center;}
.form_in ul li .file_are button{font-size: 16px; height: 60px; 
line-height: 60px; background: #1D1D1B; color: #fff; border-radius: 8px; width: 160px; font-weight: 600; border: 0;transition-duration: .5s;}
.form_in ul li .file_are input{background: #f5f5f5}

.form_in ul li .file_are button:hover{box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);}

.form_in textarea{background: #fff; height: 200px; line-height: 22px;
 border-radius: 5px; padding: 15px 20px; font-size: 16px; border: 0; width: 100%; border: 1px solid #ddd}



.ck_agree{display: flex; margin-top: 40px; gap:10px; justify-content: flex-start;
    align-items: center;}
.ck_agree input{display: none}
.ck_agree input + label{width: 20px; height: 20px; background: #fff; border: 1px solid #ddd; display: block; cursor: pointer; border-radius: 5px}

.ck_agree p{color: #1D1D1B; font-size: 16px;}
.ck_agree p a{font-weight: bold}
.ck_agree input:checked + label{background: #1B97D3}


.form_in .common_btn{margin-top: 70px}


.common_btn{display: flex;
    justify-content: center;
    align-items: center;}
.common_btn a, .common_btn button{padding: 0 35px; display: flex; gap:30px; 
height: 58px; line-height: 58px; color: #644D5B; font-size: 18px; font-weight: 600; transition-duration: .5s; 
border: 0; border-radius: 58px;  text-align: center;align-items: center;
    justify-content: center; border: 2px solid #644D5B}

.common_btn a:hover, .common_btn button:hover{box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);}

.product_brand .common_btn{margin-top: 100px}

.brand_txt{text-align: center; overflow: hidden; padding: 25px}
.brand_txt h2{font-size: 80px; line-height: 90px; font-weight: 600; transition-duration: 3s; filter: blur(10px); scale:.8; opacity: 0}
.brand_txt h2 b{color: #644D5B}
.brand_txt h2 span.color{color: #1B97D3}
.brand_txt h2 img{display: inline-block; margin-top: 30px}


.brand_txt.eng h2{font-size: 60px; line-height: 70px; }

.brand_txt p{font-weight: 600; margin-top: 30px; font-size: 24px; word-break: keep-all;
 transition-duration: 3s; filter: blur(10px); scale:.8; opacity: 0}

.brand_txt.blurcss h2{animation: blurAnimation 3s forwards;}
.brand_txt.show h2{animation: blurAnimation 3s forwards;}


.brand_txt.blurcss p{animation: blurAnimation 3s forwards;}
.brand_txt.show p{animation: blurAnimation 3s forwards;}

.fp-viewing-s01 .brand_txt h2{animation: blurAnimation 3s forwards;}

.brand_bg{height: 100vh; display: flex; overflow: hidden; background-position: center;
 background-size: cover;width: 100%;
    justify-content: center;
    align-items: center; position: relative; overflow: hidden}
    
    
.brand_bg01 .video_are{position: absolute; z-index: -1; left: 0; top: 0}    



.brand_bg02{background: url(../img/sub/brand_bg02.png);background-position: center;
 background-size: cover;}
.brand_bg03{background: url(../img/sub/brand_bg03.png);background-position: center;
 background-size: cover;}

.brand_bg .brand_txt h2{font-size: 60px; line-height: 80px;}

.brand_bg02 .brand_txt h2{color: #fff}
.brand_bg02 .brand_txt p{color: #fff; }

.product_brand {padding: 150px 0; background: #f9f9f9; overflow: hidden; min-height: 100vh}

.product_brand .brand_txt h2{font-size: 60px; line-height: 80px; filter: blur(0px);
        scale:1;
        opacity: 1}

.product_brand .brand_txt p{ filter: blur(0px);
        scale:1;
        opacity: 1}



.brand_bg .brand_txt.eng h2{font-size: 40px; line-height: 50px; }


@keyframes blurAnimation {
    0% {
        filter: blur(10px);
        scale:.8;
        opacity: 0
    }
    100% {
        filter: blur(0px);
        scale:1;
        opacity: 1
    }
}


.mouse{position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%)}
.mouse .box{display: block; width: 20px ; height: 32px; border: 2px solid #1D1D1B; border-radius: 30px; margin: 0 auto 10px}
.mouse .box span{position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 2px; height: 6px; background: #1D1D1B; border-radius: 6px;
animation: mouse 2s infinite; }
.mouse p{font-size: 16px}








@keyframes mouse {
    0% {
        top: 8px
    }
    50% {
        top: 15px
    }
    100% {
        top: 8px
    }
}


.brand_flex{display: flex; margin-top: 100px; gap:60px;     flex-wrap: wrap;}
.brand_flex a{width: calc(25% - 45px); transition-duration: 1s}


.brand_flex a:nth-child(2n){margin-top: -100px}

.brand_flex.show a:nth-child(2n){margin-top: -50px}




.brand_flex a .thum{position: relative; overflow: hidden; border-radius: 30px;}
.brand_flex a .thum .thum_img{display: block; width: 100%; height: 100%; object-fit: cover; scale:1.0; transition-duration: .5s}


.brand_flex a .thum .bg_thum{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,120,161,.5); opacity: 0; transition-duration: .5s}
.brand_flex a .thum .bg_thum .more_plus{position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; 
box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15); border-radius: 100px; display: flex;background: #fff;
justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%); }

.brand_flex a:hover .thum{box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);}
.brand_flex a:hover .thum .bg_thum{opacity: 1}
.brand_flex a:hover .thum .thum_img{ scale:1.1}


.brand_flex a h2{margin: 50px 0 20px; font-size: 30px; font-weight: bold; color: #1D1D1B; transition-duration: .5s;word-break: keep-all}
.brand_flex a p{font-size: 18px; line-height: 28px; font-weight: 500;word-break: keep-all}

.brand_flex a p span{display: block; font-size: 16px; color: #999}

.brand_flex a:hover h2{color: #1B97D3}


.brand_flex + .brand_txt{margin-top: 200px}



.brand_icon{margin-top: 100px; display: flex; }
.brand_icon .box{flex:1; text-align: center; opacity: 0; position: relative; bottom: -50px; transition-duration: .5s}
.brand_icon .box h3{font-weight: bold; font-size: 24px; margin: 40px 0 20px}
.brand_icon .box p{word-break: keep-all; font-size: 18px; line-height: 32px}



.brand_icon.show .box:nth-child(1){opacity: 1; bottom: 0; }
.brand_icon.show .box:nth-child(2){opacity: 1; bottom: 0; }
.brand_icon.show .box:nth-child(3){opacity: 1; bottom: 0; }


.brand_icon + .common_btn{margin-top: 80px}



.fp-warning, .fp-watermark{display: none}










.gall_list_style{display: flex; gap:20px; justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;}
.gall_list_style li{width: calc(33.33% - 13.339px)}
.gall_list_style li.empty_list{width: 100%}
.gall_list_style li .gall_img{overflow: hidden; border-radius: 10px; transition-duration: .5s}

.gall_list_style li .gall_img img{width: 100%;
    aspect-ratio: 16 / 9;
    height: 100%;
    object-fit: cover;}

.gall_list_style li:hover .gall_img{box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);}


.board_list_txt{margin-top: 25px}
.board_list_txt h3{font-size: 20px; white-space: nowrap; /* 텍스트가 한 줄에 나타나도록 설정 */
  overflow: hidden; /* 넘치는 텍스트 숨기기 */
  text-overflow: ellipsis; /* 넘치는 부분을 생략 부호로 표시 */ transition-duration: .5s}
.board_list_txt p{font-size: 18px; margin-top: 10px; opacity: .7}


.gall_list_style li:hover .board_list_txt h3{color: #1B97D3}

.board_common_btn_list{margin-top: 60px}
.board_common_btn_list ul{display: flex; gap:20px}
.board_common_btn_list ul a, .board_common_btn_list ul button{padding: 0 35px; display: flex; gap:30px; 
height: 58px; line-height: 58px; color: #fff; font-size: 18px; font-weight: 600; transition-duration: .5s; 
border: 0; border-radius: 58px; background: #1B97D3; text-align: center;align-items: center;
    justify-content: center;}
.board_common_btn_list ul a:hover, .board_common_btn_list ul button:hover    {box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);}
    

.common_btn + .admin_only{margin-top: 30px}


.down_flex{display: flex; gap:10px; width: max-content}
.down_flex span:first-child{width: calc(100% - 35px)}

.down_load{width: 25px; height: 25px; background:#1B97D3 ; border-radius: 25px; display: flex;
    justify-content: center;
    align-items: center;}
.down_load img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 12px;
}



.board_detail_title{text-align: center}
.board_detail_title h2{ font-size: 40px}
.board_detail_title p{margin-top: 10px; font-size: 16px; color: #CBCBCB}

.board_detail_content{margin-top: 60px; border-top: 1px solid #ddd; 
border-bottom: 1px solid #ddd; padding: 50px }


.board_detail_content p{font-size: 22px; line-height: 32px; word-break: keep-all}

.video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
  overflow: hidden; border-radius: 30px
}

.video-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.sub_subject{margin-bottom: 50px}
.sub_subject h2{font-size: 30px; font-weight: 700; }

.video-container + .sub_subject{margin-top: 150px}
.max_video + .sub_subject{margin-top: 150px}


.ceo_flex{display: flex; gap:100px;justify-content: flex-start;
    align-items: center;}
.ceo_txt h3{color: #fff; font-size: 30px; font-weight: 700; margin-bottom: 40px}
.ceo_txt p{color: #fff; font-size: 18px; line-height: 32px; word-break: keep-all}
.ceo_txt p + p{margin-top: 30px}

.ceo_txt p.ceo_sign{display: flex; text-align: right;align-items: center;
    justify-content: flex-end;
    gap: 15px}


.ceo_flex .thum{border-radius: 60px 10px;
box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20); overflow: hidden}

.ceo_flex .thum img{width: 100%; height: 100%; object-fit: cover;}



.history_flex{display: flex; gap:100px;justify-content: flex-start;
    align-items: flex-start;}

.history_flex .thum{border-radius: 60px 10px;
box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20); overflow: hidden;position: sticky;
    top: 120px;
    left: 0;}

.history_flex .thum img{width: 100%; height: 100%; object-fit: cover;}

.history_txt{flex:1}
.history_txt .box{display: flex; padding-bottom: 35px; gap:90px}
.history_txt .box + .box{padding-top: 35px; border-top: 1px solid rgba(255,255,255,.5)}

.history_txt .box h3{width: 100px; font-size: 40px; color: #fff; font-weight: 700}
.history_txt .box ul{flex:1; padding-top: 5px}
.history_txt .box ul li{display: flex; gap:15px; font-size: 22px; line-height: 35px; color: #fff}
.history_txt .box ul li + li{margin-top: 15px}


.organization_img{}
.organization_img img{display: block; margin: 0 auto; }




.awards + .sub_subject{margin-top: 150px}

.awards{display: flex; gap:70px 60px; flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}
.awards .box{width:calc(25% - 45px)}
.awards .box .thum{}
.awards .box .thum img{width: 100%}
.awards .box p{margin-top: 30px; color: #fff; font-size: 18px; word-break: keep-all}


.partner_sub .tab {
  display: flex;
  gap:20px;
}
.partner_sub .tab__item {
  height: 70px; border-radius: 20px 5px 20px 20px; border: 4px solid rgba(255,255,255,.2);
  width: 200px; text-align: center; font-size: 18px; color: #fff; line-height: 66px; font-weight: 500;
  transition-duration: .5s; cursor: pointer
}
.partner_sub .tab__item.active, .partner_sub .tab__item:hover {
  border-color: #551C87; 
}
.partner_sub .tab__content-wrapper {
  margin-top: 80px;
}
.partner_sub .tab__content {
  display: none;
}
.partner_sub .tab__content.active {
  display: block;
}

.partner_flex_sub{display: flex; gap:70px 24px;flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}
.partner_flex_sub .box{width: calc(25% - 18px); text-align: center}
.partner_flex_sub .box .thum{border-radius: 10px; border: 1px solid #DDDDDD; display: flex;
    justify-content: center;
    align-items: center; padding: 15px; height: 250px}

.partner_flex_sub .box p{margin-top: 30px; color: #fff; font-size: 18px; word-break: keep-all; opacity: .8}



.product_list{display: flex; gap:70px 60px;flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}

.product_list li{width: calc(25% - 45px);}
.product_list li .thum{border-radius: 10px; overflow: hidden; display: block; }
.product_list li .thum img{width: 100%; height: 100%; object-fit: cover;}

.product_list li .txt{display: block; margin-top: 25px;}
.product_list li .txt h3{font-size: 18px; word-break: keep-all; font-weight: 500}
.product_list li .txt p{margin-top: 5px;font-weight: 800; color: #644D5B; font-size: 18px; }

.top_product_flex{display: flex; gap:90px;     justify-content: flex-start;
    align-items: flex-start;}

.product_slide_are{width: 600px;}
.product_big img, .product_small img{max-width: 100%}

.product_title{text-align: left; margin-bottom: 30px}
.product_title h2{font-size: 42px; font-weight: 700; }

.product_big .slick-arrow{position: absolute; left: 0; top: 50%; z-index: 2; transform: translateY(-50%); width: 56px; height: 56px;}
.product_big .slick-arrow.slick-prev{left: 15px; background: url(../img/sub/product/prev.png);
 background-position: center; background-repeat: no-repeat; background-size: 56px auto; border: 0; font-size: 0}
.product_big .slick-arrow.slick-next{right: 15px; left: auto; background: url(../img/sub/product/next.png);
 background-position: center; background-repeat: no-repeat; background-size: 56px auto; border: 0; font-size: 0}

.product_small{margin: 0 -5px; padding-top: 5px}
.product_small .slick-slide{padding: 5px;  }
.product_small .slick-slide img{border-radius: 5px;
width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;}
.product_small .slick-slide.slick-current img{ box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.10);}

.product_big .slick-slide img{border-radius: 10px;
width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;}


.prodcut_info_are{flex:1; padding: 40px 0}

.prodcut_info_are .box{width: 100%}
.prodcut_info_are .box .info_txt{padding: 35px; background: #F9F9F9; border-radius: 20px; border: 1px solid #f5f5f5;}

.prodcut_info_are .box .info_txt p{font-size: 18px;  word-break: keep-all; line-height: 1.6;}

.prodcut_detail_img{margin-top: 150px}

.prodcut_detail_img img{max-width: 100%; display: block; margin: 0 auto}

.prodcut_detail_img .tlb{margin-top: 150px}

.p_row{margin-top: 50px;}
.p_row ul{display: flex; gap:15px;}
.p_row ul li{text-align: center}
.p_row ul li p{font-size: 16px; margin-top: 5px; word-break: keep-all}

.tlb{}
.tlb h2{font-size: 30px;
    font-weight: 700; margin-bottom: 50px}
.tlb table{width: 100% !important;border:0 !important; border-top: 1px solid #f5f5f5 !important; border-spacing: 0 !important; text-size-adjust: none;
-webkit-text-size-adjust: none;}

.tlb table th{background: #f9f9f9 !important; font-size: 
18px; font-weight: 500; padding: 20px 25px; word-break: keep-all;border-bottom: 1px solid #f5f5f5 !important;; vertical-align: top}
.tlb table th.left{text-align: left}
.tlb table td{background: #fff; font-size: 18px; 
font-weight: 500; padding: 20px 25px; border-bottom: 1px solid #f5f5f5 !important;
 border-left: 1px solid #f5f5f5 !important; word-break: keep-all; vertical-align: top; border-right: 0px !important}
.tlb table td:first-child{border-left: 0 !important}

.tlb table td li{position: relative; padding-left: 10px; 
font-size: 18px; line-height: 25px; word-break: keep-all; opacity: .9}
.tlb table td li:after{content: '·'; position: absolute; left: 0; top: 0}
.tlb table td ul{margin-top: 10px}

.tlb.board table td{border-left: 0}
.tlb.board table td.date{width: 200px; text-align: center}
.tlb.board table td.num{width: 80px; text-align: center}



.prodcut_detail_img_are + .sub_subject{margin-top: 150px}


.inquiry_bg{background:url(../img/sub/inquiry_bg.png); background-repeat: no-repeat; background-size: cover }

.send_iq{margin-top: 80px}
.send_iq button{border: 2px solid rgba(255,255,255,.8); height: 70px; line-height: 70px; 
width: 370px; border-radius: 20px 5px 20px 20px; color: #fff; font-size: 18px; 
font-weight: bold; display: flex; gap:30px; justify-content: center;
    align-items: center; transition-duration: .5s; background: transparent}




.send_iq button:hover{box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20); background: #551C87; border-color: #551C87}

.notice_custom{}
.notice_custom li{display: flex; position: relative; border: 2px solid rgba(255,255,255,.3); 
border-radius: 10px 10px 50px 10px; padding: 60px 45px; transition-duration: .5s; gap:40px}
.notice_custom .date{text-align: center; width: 60px;}
.notice_custom .date h2{font-size: 30px; font-weight: bold; color: #fff; opacity: .5; transition-duration: .5s}
.notice_custom .date p{font-size: 14px; color: #fff; opacity: .5; transition-duration: .5s}

.notice_custom li + li{margin-top: 20px}


.notice_custom li:hover{border-color: #551C87}

.notice_custom li:hover .date h2, .notice_custom li:hover .date p{opacity: 1;color: #551C87 }

.notice_custom .notice_txt{opacity: .8; transition-duration: .5s}
.notice_custom .notice_txt h3{font-size: 24px; font-weight: 600; color: #fff}
.notice_custom .notice_txt p{font-size: 16px; color: #fff; margin-top: 10px}


.notice_custom li:hover .notice_txt{opacity: 1}


.total_top{margin-bottom: 35px}
.total_top p{font-size: 18px; color: #fff}



.notice_custom li.empty_list{padding: 0; border: 0}

.notice_custom li .chk_box{position: absolute; left: 0; top: 0; z-index: 2}

.videop {
    position: relative;
    overflow: hidden;
    margin: 4em auto 0;
}

.videop video {
    width: 100%
}