/* 공통 */
.con_wrap { width:100%; max-width: 1400px; padding:0 50px; margin:0 auto; }
.sub_title { line-height: 1; text-align: center; margin-bottom: 50px; }
.sub_title h1 { position:relative; font-size:40px; font-weight: bold; }
.sub_title h1:before { content:""; display: block; margin:0 auto 25px; width:40px; height: 2px; background:#000; }
.sub_title.eng h1 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 45px; }
.sub_title.color h1 { font-size:40px; color:#f37f0c; line-height: 48px; }
.sub_title.none h1 { text-align: left; font-weight: 600; }
.sub_title.none h1:before { display: none; }
.sub_title p { font-size:21px; font-weight: 300; margin-top: 22px; line-height: 38px; word-break: keep-all; }

.dot_title { position:relative; padding-left: 20px; font-size:28px; font-weight: 600; font-family: 'Poppins', sans-serif; word-break: keep-all; }
.dot_title:before { content:""; position:absolute; left:0; top:17px; width:6px; height: 6px; background:#000; border-radius: 50%; }
.dot_title .color { color:#ea5b12; }


#product1 { position:relative; overflow: hidden; }

.tab_btn_wr { margin-top:30px; }
.tab { display: none;}
.tab.active { display: block;}
.tab_btn { display: flex; justify-content: center; }
.tab_btn li { width: 260px; margin:0 10px; text-align: center; }
.tab_btn li a { display: block; width: 100%; line-height: 65px; font-size:15px; color:#333; transition: all .3s ease; cursor: pointer; text-transform: uppercase; border:1px solid #ddd; }
.tab_btn li a.active { background-image: linear-gradient(to right, #333, #7b7b7b); color:#fff; }
.tab_btn li a:hover { border-color: #333; }


.flex { display: flex; }
.border { border:1px solid #ddd; }

.table_type1 { width:100%; border-collapse: collapse; border:1px solid #ddd; border-top: 0; }
.table_type1 thead th { padding:18px 10px; background:#000; color:#fff; font-size:18px; line-height: 22px; font-weight: 500; font-family: 'Poppins', sans-serif; word-break: keep-all; }
.table_type1 thead th span { font-size:14px; font-weight: 300; }
.table_type1 thead th ~ th { border-left: 1px solid rgba(255,255,255,.25); }
.table_type1 tbody td { padding:18px 10px; background:#fff; color:#333; font-size:16px; line-height: 22px; font-weight: 300; font-family: 'Poppins', sans-serif; text-align: center; word-break: keep-all; }
.table_type1 tbody td ~ td { border-left: 1px solid #ddd; }
.table_type1 tbody tr ~ tr { border-top: 1px solid #ddd; }
.table_type1 tbody td.bg { background:rgba(234,91,18,.2); }
.table_type1 tbody tr ~ tr .bg { border-top: 1px solid rgba(255,255,255,83); }
.table_type1 tbody td i { font-size:20px; }

#pro1_tab1 > div:nth-of-type(odd),
#pro1_tab2 > div:nth-of-type(odd) { background:#f7f7f7; }


/*Content CSS*/
/* tab1 */
/* tab1 s1 & tab2 s1 공통 */
#product1 .s1 { position:relative; z-index: 1; }
#product1 .s1:after { content:""; position:absolute; left:0; width:100%; top:0; height: 395px; background:#fff; z-index: -1; }
#product1 .s1 .s1_con { display: flex; align-items: center; padding:70px 50px 100px; }
#product1 .s1 .img { width:46.5%; border:1px solid #ddd; background:#fff; }
#product1 .s1 .img img { width:100%; }

#product1 .s1 .txt { width:53.5%; padding-left: 55px; }
#product1 .s1 .txt .top h2 { position:relative; font-size:23px; line-height: 37px; font-weight: 700; word-break: keep-all; }
#product1 .s1 .txt .top h2:before { content:""; display: block; width:40px; height:2px; background:#000; margin:40px 0; }
#product1 .s1 .txt .top h2 span { font-weight: 400; }
#product1 .s1 .txt .top p { margin-top: 20px; font-size:17px; font-weight: 300; color:#333; word-break: keep-all; line-height: 33px; }

#product1 .s1 .txt .bot { padding-top: 50px; margin-top: 50px; }
#product1 .s1 .txt .dot_title { text-transform: uppercase; }
#product1 .s1 .txt .bot p { padding-left: 20px; font-size:16px; font-weight: 300; color:#333; word-break: keep-all; }

#product1 .s1 .list_type1 { display: flex; flex-wrap: wrap; margin-top: 20px; }
#product1 .s1 .list_type1 li { width:310px; margin-top: 13px; border-radius: 25px; font-size:14px; color:#fff; background:#000; padding:0 30px; word-break: keep-all; transition: all .3s; }
#product1 .s1 .list_type1 li:nth-child(even) { margin-left: 17px; }
#product1 .s1 .list_type1 li a { display: flex; justify-content: space-between; align-items: center; line-height: 50px; }
#product1 .s1 .list_type1 li b { color:#fff; font-weight: normal; text-transform: uppercase; }
#product1 .s1 .list_type1 li span { color:#fff; font-size:18px; }

#product1 .s1 .list_type1 li:hover { background:#006069; }

/* tab1 s2 & tab2 s4 공통 */
#product1 .benefit .con_wrap { padding:80px 50px 110px; }
#product1 .benefit .bene_con li { width:calc(33% - 17px); border:1px solid #ddd; text-align: center; padding:40px 30px; }
#product1 .benefit .bene_con li ~ li { margin-left: 26px; }
#product1 .benefit .bene_con h2 { width:100%; font-size: 16px; font-weight: 500; background:#000; color:#fff; border-radius:30px; padding:20px 30px; word-break: keep-all; white-space: nowrap; }
#product1 .benefit .bene_con .img { margin:25px auto 20px; }
#product1 .benefit .bene_con p { font-size:16px; color:#333; line-height: 31px; word-break: keep-all; }

/* tab1 s3 */
#pro1_tab1 #tab1_s3 .con_wrap { padding:80px 50px 110px; }
#pro1_tab1 #tab1_s3 .s3_con { margin-top: 70px; padding:60px; display: flex; border:1px solid #ddd; background:#fff; }
#pro1_tab1 #tab1_s3 .s3_con .img { width:55%; }
#pro1_tab1 #tab1_s3 .s3_con .img img { width:100%; }
#pro1_tab1 #tab1_s3 .s3_con .txt_box { width:45%; display: flex; justify-content: center; padding-left: 60px; }
#pro1_tab1 #tab1_s3 .s3_con .txt { padding:0 45px; width:100%; border:3px solid #f37f0c; text-align: center; display: flex; flex-direction: column; justify-content: center; }
#pro1_tab1 #tab1_s3 .s3_con .txt h2 { margin:10px 0 60px; position:relative; display: inline-block; font-size: 37px; font-weight: bold;  }
#pro1_tab1 #tab1_s3 .s3_con .txt h2:before { content:""; position:absolute; left:50%; transform: translateX(-50%); bottom:3px; width:190px; height: 23px; background:rgba(241,129,13,.18); }
#pro1_tab1 #tab1_s3 .s3_con .txt p:first-of-type { border-top: 1px solid #ddd; }
#pro1_tab1 #tab1_s3 .s3_con .txt p { padding-top: 30px; font-size:22px; line-height: 40px; font-weight: 300; word-break: keep-all; }
#pro1_tab1 #tab1_s3 .s3_con .txt p b { font-weight: 500; }

/* tab1 s4 */
#pro1_tab1 #tab1_s4 .sub_title h1 { color:#f37f0c; font-size:40px; }
#pro1_tab1 #tab1_s4 .sub_title h1:before { background:#f37f0c; }
#pro1_tab1 #tab1_s4 .con_wrap { padding:80px 50px 110px; }
#pro1_tab1 #tab1_s4 .s4_con { padding:50px 0; border:1px solid #ddd; }
#pro1_tab1 #tab1_s4 .s4_con img { width:100%; }
#pro1_tab1 #tab1_s4 .s4_con .txt { padding:33px 95px 0; }
#pro1_tab1 #tab1_s4 .s4_con .txt p { padding:42px 20px; background:url('../img/pro_s4_ptn') repeat center rgba(193,188,188,.15); text-align: center; font-size:18px; line-height: 33px; word-break: keep-all; }

/* tab1 s5 */
#pro1_tab1 #tab1_s5 .sub_title { margin-bottom: 0; padding-bottom: 50px; border-bottom: 1px solid #ddd; }
#pro1_tab1 #tab1_s5 .con_wrap { padding:80px 50px 110px; }
#pro1_tab1 #tab1_s5 .s5_con > div { margin-top: 70px; }
#pro1_tab1 #tab1_s5 .s5_con img { width:100%; }
#pro1_tab1 #tab1_s5 .dot_title { margin-bottom: 26px; }

#pro1_tab1 #tab1_s5 .box2_con { background:#fff; padding:70px 100px; border:1px solid #ddd; }
#pro1_tab1 #tab1_s5 .box2_con .txt.flex { margin:20px 0 40px; padding-bottom: 40px; border-bottom: 1px solid #ddd; justify-content:space-between; }
#pro1_tab1 #tab1_s5 .box2_con p { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 300; color:#666; word-break: keep-all; }
#pro1_tab1 #tab1_s5 .box2_con .bot h3 { font-size: 23px; font-weight: 600; font-family: 'Poppins', sans-serif;  }
#pro1_tab1 #tab1_s5 .box2_con .bot .img { margin:10px 0 20px; }
#pro1_tab1 #tab1_s5 .box2_con .bot p { text-align: right; }

#pro1_tab1 #tab1_s5 .box3_con { padding:50px 100px; background:#fff; }
#pro1_tab1 #tab1_s5 .box3_con h3 { font-size: 20px; font-weight: bold; margin-bottom: 15px; }
#pro1_tab1 #tab1_s5 .box3_con .txt.flex { margin-top: 15px; justify-content:space-between; }
#pro1_tab1 #tab1_s5 .box3_con .txt.flex b { font-weight: 300; font-size:14px; color:#000; font-family: 'Poppins', sans-serif; }
#pro1_tab1 #tab1_s5 .box3_con > div + div { margin-top: 50px; }
#pro1_tab1 #tab1_s5 .box3_con p { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 300; color:#666; }
#pro1_tab1 #tab1_s5 .box3_con i { font-style: normal; font-size: 20px; }


/* tab2 */
/* tab2 s1 */
#pro1_tab2 .s1:after { height: 460px; }

/* tab2 s2 */
#pro1_tab2 #tab2_s2 .sub_title h1 { color:#f37f0c; font-size:45px; }
#pro1_tab2 #tab2_s2 .sub_title h1:before { background:#f37f0c; }
#pro1_tab2 #tab2_s2 .con_wrap { padding:80px 50px 110px; }
#pro1_tab2 #tab2_s2 .s2_con img { width:100%; }


/* tab2 s3 */
#pro1_tab2 #tab2_s3 .sub_title h1 { line-height: 51px; }
#pro1_tab2 #tab2_s3 .con_wrap { padding:80px 50px 110px; }
#pro1_tab2 #tab2_s3 .s3_con img { width:100%; }

/* tab2 s5 */
#pro1_tab2 #tab2_s5 .con_wrap { padding:80px 50px 110px; }
#pro1_tab2 #tab2_s5 .sub_title p { font-size: 16px; line-height: 30px; }
#pro1_tab2 #tab2_s5 .sub_title p b { font-size:21px; color:#f37f0c; word-break: keep-all; }
#pro1_tab2 #tab2_s5 .s5_con img { width:100%; }





@media screen and (max-width: 1400px) {
    /* con */
    /* tab1 s1 & tab2 s1 공통 */
    #product1 .s1 .list_type1 { flex-direction: column; }
    #product1 .s1 .list_type1 li { margin-top: 10px; }
    #product1 .s1 .list_type1 li:nth-child(even) { margin-left:0; }

    #product1 .s1 br { display: none; }
    #product1 .s1 .txt .bot { margin-top: 0; padding-top: 30px; }
    #product1 .s1 .txt { padding-left: 40px; }

    /* tab1 s2 & tab2 공통 */
    #product1 .benefit .bene_con .img img { max-width: 100%; }
    #product1 .benefit .bene_con h2 { white-space: normal; }
    #product1 .benefit .bene_con br { display: none; }
    #product1 .benefit .bene_con li { padding:30px 20px; }

    /* tab1 s3 */
    #pro1_tab1 #tab1_s3 .s3_con { margin-top: 40px; padding: 40px;}
    #pro1_tab1 #tab1_s3 .s3_con .img { width: 50%; }
    #pro1_tab1 #tab1_s3 .s3_con .txt_box { width: 50%; padding-left: 30px; }
    #pro1_tab1 #tab1_s3 .s3_con .txt { padding: 0 20px; }
    #pro1_tab1 #tab1_s3 .s3_con .txt h2 { margin: 10px auto 30px; }
    #pro1_tab1 #tab1_s3 .s3_con .txt p { font-size:20px; line-height: 35px; padding-top: 15px; }
}

@media screen and (max-width: 1024px) {
    /* 공통 */
    .sub_title { margin-bottom: 30px; }
    .sub_title h1 { font-size:32px; }
    .sub_title.eng h1 { font-size: 38px; text-align: center;  }
    .sub_title p { font-size: 19px; margin-top: 15px; line-height: 35px; }
    .con_wrap { padding:0 40px; }
    #products { padding: 30px 0 80px; }

    .dot_title { padding-left: 20px; font-size: 24px; }

    /* con */
    /* tab s1 & tab2 s1 공통 */
    #product1 .s1:after { height: 30%; }
    #product1 .s1 .s1_con { padding:50px 40px; flex-direction: column;  }

    #product1 .s1 .img { width:50%; }
    #product1 .s1 .txt { width:100%; padding-left: 0; padding-top: 30px; }
    #product1 .s1 .txt .top { text-align: center; }
    #product1 .s1 .txt .top h2:before { margin:20px auto; }
    #product1 .s1 .txt .bot { text-align: center; }
    #product1 .s1 .txt .bot p { padding-left: 0; }
    #product1 .s1 .txt .dot_title { display: inline-block; }
    #product1 .s1 .list_type1 { align-items: center; margin-top: 10px; }

    /* tab1 s2 % tab2 s4 공통 */
    #product1 .benefit .con_wrap { padding:50px 40px; }
    #product1 .benefit .bene_con ul { flex-wrap: wrap; }
    #product1 .benefit .bene_con li { width:calc(50% - 10px); }
    #product1 .benefit .bene_con li:last-child { width:100%; margin-left: 0; margin-top: 20px; }
    #product1 .benefit .bene_con li ~ li { margin-left: 20px; }

    #product1 .benefit .bene_con h2 { max-width: 350px; margin:0 auto; font-size: 15px; }

    /* tab1 s3 */
    #pro1_tab1 #tab1_s3 .con_wrap { padding: 50px 40px; }
    #pro1_tab1 #tab1_s3 .s3_con { padding: 30px; }
    #pro1_tab1 #tab1_s3 .s3_con .ico img { width:33px; }
    #pro1_tab1 #tab1_s3 .s3_con .txt h2 { font-size:28px; margin:0 auto 20px; }
    #pro1_tab1 #tab1_s3 .s3_con .txt p { font-size:17px; line-height: 30px; padding-top: 7px; }

    /* tab1 s4 */
    #pro1_tab1 #tab1_s4 .con_wrap { padding: 50px 40px; }
    #pro1_tab1 #tab1_s4 .sub_title h1 { font-size: 33px; }
    .sub_title.color h1 { line-height: 40px; }
    #pro1_tab1 #tab1_s4 .s4_con { padding: 30px 0; }
    #pro1_tab1 #tab1_s4 .s4_con .txt { padding: 25px 50px 0; }
    #pro1_tab1 #tab1_s4 .s4_con .txt p { padding: 32px 10px; font-size: 16px; line-height: 32px; }

    /* tab1 s5 */
    #pro1_tab1 #tab1_s5 .con_wrap { padding: 50px 40px 80px; }
    #pro1_tab1 #tab1_s5 .sub_title { padding-bottom: 30px; }
    #pro1_tab1 #tab1_s5 .s5_con > div { margin-top: 40px; }
    #pro1_tab1 #tab1_s5 .box2_con { padding: 50px; }
    #pro1_tab1 #tab1_s5 .box3_con { padding: 50px; }

    /* tab2 s2 */
    #pro1_tab2 #tab2_s2 .con_wrap { padding: 60px 40px; }
    #pro1_tab2 #tab2_s2 .sub_title h1 { font-size: 33px; }

    /* tab2 s3 */
    #pro1_tab2 #tab2_s3 .con_wrap { padding: 60px 40px; }
    #pro1_tab2 #tab2_s3 .sub_title h1 { line-height: 45px; }
    #pro1_tab2 #tab2_s3 .sub_title h1 br { display: none; }

    /* tab2 s5 */
    #pro1_tab2 #tab2_s5 .con_wrap { padding: 60px 40px; }
}

@media screen and (max-width: 768px) {
    /* 공통 */
    .con_wrap { padding:0 20px; }
    .sub_title h1 { font-size:26px; }
    .sub_title.eng h1 { font-size: 30px; line-height: 40px; }
    .sub_title h1:before { margin-bottom: 15px; }
    .sub_title { margin-bottom: 35px; }
    .sub_title p { font-size: 17px; margin-top: 10px; line-height: 30px; }
    .sub_title p br { display: none; }

    .tab_btn_wr { margin-top: 0; }
    .tab_btn li { width:50%; max-width: 200px; margin: 0 5px; }
    .tab_btn li a { line-height: 50px; }
    .tab_btn li a:hover { border-color:#ddd; }

    .dot_title { font-size:20px; }
    .dot_title:before { top:11px; }

    .table_type1 thead th { padding: 5px; font-size: 13px; }
    .table_type1 tbody td { padding: 8px 5px; font-size: 13px; line-height: 18px; }

    /* con */
    /* tab s1 & tab2 s1 공통 */
    #product1 .s1 .s1_con { padding:60px 20px; }

    #product1 .s1 .img { width:100%; }
    #product1 .s1 .txt { padding-top: 30px; }
    #product1 .s1 .list_type1 { align-items: center; margin-top: 10px; }
    #product1 .s1 .list_type1 li { width:270px; font-size: 13px; }
    #product1 .s1 .list_type1 li a { line-height: 45px; }
    #product1 .s1 .txt .top h2 { font-size:17px; line-height: 32px; }
    #product1 .s1 .txt .top h2:before { margin:-10px auto 20px; }
    #product1 .s1 .txt .top p { font-size:15px; line-height: 28px; }
    #product1 .s1 .txt .bot p { font-size:15px; line-height: 28px; }

    /* tab1 s2 % tab2 s4 공통 */
    #product1 .benefit .con_wrap { padding:60px 20px; }
    #product1 .benefit .bene_con li { width:100%; border:0; padding:0 0 30px; border-bottom: 1px solid #ddd; }
    #product1 .benefit .bene_con li:last-child { border-bottom: 0; margin-top: 30px; }
    #product1 .benefit .bene_con li ~ li { margin-left:0; margin-top: 30px; }

    #product1 .benefit .bene_con h2 { padding:15px 10px; }
    #product1 .benefit .bene_con .img { margin:0; }
    #product1 .benefit .bene_con p { font-size:15px; line-height: 28px; }

    /* tab1 s3 */
    #pro1_tab1 #tab1_s3 .con_wrap { padding: 60px 20px; }
    #pro1_tab1 #tab1_s3 .s3_con { flex-direction: column; border:none; padding:0; margin:20px 0 0; }
    #pro1_tab1 #tab1_s3 .s3_con .txt { order: 1; padding:20px; }
    #pro1_tab1 #tab1_s3 .s3_con .img { margin-top: 20px; order: 2; width:100%; text-align: center; padding:30px 20px; }
    #pro1_tab1 #tab1_s3 .s3_con .txt_box { width: 100%; padding-left: 0; }
    #pro1_tab1 #tab1_s3 .s3_con .txt p { font-size: 15px; line-height: 26px; padding-top: 10px; }
    #pro1_tab1 #tab1_s3 .s3_con .txt h2 { font-size: 24px; margin: 0 auto 20px; }
    #pro1_tab1 #tab1_s3 .s3_con .txt h2:before { width:120px; bottom:0; height: 17px; }

    /* tab1 s4 */
    #pro1_tab1 #tab1_s4 .con_wrap { padding:60px 20px; }
    #pro1_tab1 #tab1_s4 .sub_title { margin-bottom: 20px; }
    #pro1_tab1 #tab1_s4 .sub_title h1 { font-size: 22px; }
    .sub_title.color h1 { line-height: 30px; }
    #pro1_tab1 #tab1_s4 .s4_con { padding:0; border:0; }
    #pro1_tab1 #tab1_s4 .s4_con .txt { padding:20px 0 0; }
    #pro1_tab1 #tab1_s4 .s4_con .txt p { padding: 25px 10px; font-size: 15px; line-height: 30px; }

    /* tab1 s5 */
    #pro1_tab1 #tab1_s5 .con_wrap { padding: 60px 20px; }
    #pro1_tab1 #tab1_s5 .dot_title { margin-bottom: 18px;  }
    #pro1_tab1 #tab1_s5 .box2_con { padding:15px; border:none; }
    #pro1_tab1 #tab1_s5 .box2_con .flex { flex-direction: column; }
    #pro1_tab1 #tab1_s5 .box2_con .txt.flex {  margin: 20px 0; padding-bottom: 20px; }
    #pro1_tab1 #tab1_s5 .box2_con .bot h3 { font-size: 18px; }

    #pro1_tab1 #tab1_s5 .box3_con { padding: 20px 20px 40px; }
    #pro1_tab1 #tab1_s5 .box3_con h3 { font-size: 17px; }
    #pro1_tab1 #tab1_s5 .box3_con .txt.flex b { line-height: 24px; }
    #pro1_tab1 #tab1_s5 .box3_con .flex { flex-direction: column; }
    #pro1_tab1 #tab1_s5 .box3_con > div + div { margin-top: 30px;  }

    /* tab2 s2 */
    #pro1_tab2 #tab2_s2 .sub_title h1 { font-size: 22px; }

    /* tab2 s3 */
    #pro1_tab2 #tab2_s3 .sub_title h1 { font-size:22px; line-height: 34px; }
    #pro1_tab2 #tab2_s3 .con_wrap { padding: 60px 20px; }

    /* tab2 s5 */
    #pro1_tab2 #tab2_s5 .con_wrap { padding: 60px 20px 80px; }
    #pro1_tab2 #tab2_s5 .sub_title p b { font-size: 17px; }
}