/*Content CSS*/
#product3{overflow: hidden;}
section > article{padding: 50px 0;}
section > article:nth-of-type(even){background-color: #f7f7f7;}
.sub_inner{width: 100%; max-width: 1400px; padding: 0 20px; margin: 0 auto;}
#product3 br:not(.mob){display: none;}

.fs_48{font-size: 30px; font-weight: 700; line-height: 1;}
.fs_36{font-size: 23px; font-weight: 700; line-height: 1.5;}
.fs_27{font-size: 20px; font-weight: 700; line-height: 1;}
.fs_25{font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: -.5px; color: #fff; font-family: 'Poppins';}
.fs_22{font-size: 18px; font-weight: 400;}
.fs_20{font-size: 17px; font-weight: 700; letter-spacing: -.4px; line-height: 1.7;}
.fs_18{font-size: 15px; font-weight: 300; line-height: 1.7; letter-spacing: -.36px;}
.fs_17{font-size: 14px; font-weight: 300; line-height: 1.7; letter-spacing: -.45px;}
.fs_16{font-size: 13px; font-weight: 400; letter-spacing: -.32px; line-height: 1.7;}

/* dir_list */
.dir_list{display: flex; flex-wrap: wrap; margin-top: 30px;}
.dir_list li{width: 50%;}
.dir_list li a{display: block; text-align: center; padding: 15px; background-color: #f7f7f7; color: #333; min-height: 20px; line-height: 20px; border-left: solid 1px #ddd; border-top: solid 1px #ddd; transition: .3s; height: 100%;}
.dir_list li:nth-child(2n) a{ border-right: solid 1px #ddd; }
.dir_list li:nth-child(n+11) a{ border-bottom: solid 1px #ddd; }
.dir_list li .active{background-color: #46b035; border-color: #46b035; color: #fff; font-weight: 700;}
.dir_list li:hover a{background-color: #46b035; border-color: rgba(255,255,255,.2); color: #fff; }
/* title */
.tri{position: relative; padding-left: 15px; padding-bottom: 30px; border-bottom: solid 1px #ddd;}
.tri::before{content: ''; display: block; width: 18px; height: 18px; background: url('../img/tit_tri.png') 50% / cover no-repeat; position: absolute; top: -10px; left: 0;}
/* bar */
.bar{position: relative; padding-left: 14px; margin-top: 30px;}
.bar::before{content: ''; display: block; width: 4px; height: 24px; background-color: #46b035; position: absolute; top: 5px; left: 0;}
/* dot */
.dot{position: relative; padding-left: 14px; margin-bottom: 15px;}
.dot::before{content: ''; display: block; width: 6px; height: 6px; background-color: #000; position: absolute; top: 6px; left: 0;}
.dot .fs_18{letter-spacing: normal; font-weight: 400;}
/* under */
.under{border-bottom: solid 1px #ddd; padding-bottom: 20px; font-weight: 700; position: relative; margin-top: 25px;}
.under::after{content: ''; display: block; width: 70px; height: 3px; background-color: #000; position: absolute; bottom: -1.5px; left: 0;}


/* desc */
.desc{margin-top: 35px;}
.text{padding: 20px; background-color: #f7f7f7; border: solid 1px #ddd; text-align: center;}
.desc2 .text{padding-bottom: 35px; text-align: left;}
.desc3 .text{padding: 30px 20px;}
.box .text{margin-top: 15px;}
/* img_list */
.img_list{display: flex; justify-content: space-between; margin-top: 15px;}
.img_list li{width: calc(50% - 5px); border: solid 1px #ddd; overflow: hidden;}
.img_list li img{transition: .3s; width: 100%;}
.img_list li:hover img{transform: scale(1.1);}
.wrap{padding-bottom: 30px; border-bottom: solid 1px #ddd;}

/* num_list */
.num_list li{display: flex;  padding: 15px 0; border-top: solid 1px #ddd;}
.num_list li:last-child{border-bottom: solid 1px #ddd;}
.num_list li span{display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; margin-right: 15px; flex-shrink: 0;}
.num_list li:nth-child(odd) span{background-color: #46b035;}
.num_list li:nth-child(even) span{background-color: #333;}

/* bar_list */
.bar_list{}
.bar_list li{margin-bottom: 15px; border: solid 1px #ddd; border-top: solid 3px #46b035; padding: 27px 0; text-align: center;}
.bar_list li:last-child{margin-bottom: 0;}
.bar_list.fs_18{font-weight: 400;}

/* text_list */
.text_list{display: flex; flex-wrap: wrap; margin-top: 20px;}
.text_list li{flex-grow: 1;}
/* .text_list li:last-child{margin-right: 0;} */
.text_list li.long{width: 100%; }


/* fs_18 */
.text_flex{}
.text_ab p{font-weight: 400;}
.text_ab .arp1{margin-top: 13px; margin-left: 130px;}
.text_ab .arp2{margin-left: 45px; margin-top: 35px;}
.ex{display: inline-block; padding: 3.5px 15px; background-color: #333; color: #fff; margin-bottom: 15px; font-weight: 700;}
.ex + p{padding-bottom: 3px}
.ex + p span{border-bottom: solid 1px #000; position: relative;}
.ex + p .ar1::before{content: ''; display: block; width: 1px; height: 60px; background-color: #555; position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);}
.ex + p .ar1::after{content: ''; display: block; width: 11px; height: 9px; background: url('../img/arrow_tri.png') 50% / cover no-repeat; position: absolute; top: calc(100% + 60px); left: 50%; transform: translateX(-50%);}
.ex + p .ar2::before{content: ''; display: block; width: 20px; height: 20px; border-left: solid 1px #555; border-bottom: solid 1px #555; position: absolute; top: calc(100% + 7px); left: 20px;}
.ex + p .ar2::after{content: ''; display: block; width: 8px; height: 10px; background: url('../img/arrow_tri2.png') 50% / cover no-repeat; position: absolute; top: calc(100% + 22px); right: -9px;}

/* img */
.img{border: solid 1px #ddd; overflow: hidden; margin-top: 15px;}
.img img{transition: .3s;}
.img:hover img{transform: scale(1.1);}

/* flex_list */
.flex_list li{border-top: solid 1px #ddd; padding: 15px 0; }
.flex_list li:last-child{border-bottom: solid 1px #ddd; }
.flex_list li h6{margin-bottom: 5px;}
.flex_list li h6 span{font-weight: 700;}

/* check */
.check{ border: solid 2px #ddd; padding: 20px; text-align: center;}
.check i{display: inline-block; margin-bottom: 13px;}