@charset "UTF-8";
/* 22.12.14 SDH */

/* patent section 01 - card */
.c_sec01 { background:#FAFAFA; }
.c_sec01 .inner { padding:140px 0; align-items:center; flex-direction:column; }
.c_sec01 .inner .m_txt01 { font-weight:300; }
.c_sec01 .inner .m_txt01 span { font-weight:500; }
.c_sec01 .inner .m_txt02 { margin:10px auto 0; line-height:1; }
.card_area { margin-top:100px; }
.card_area ul { display:flex; flex-wrap:wrap; justify-content:center; width:100%; }
.card_area li.flip_card { width:400px; height:410px; margin:0 40px 40px 0; border-radius:10px; perspective:1000px; }
.card_area li.flip_card:last-child { margin-right:0; }
.card_area li.flip_card .card_inner { position:relative; width:100%; height:100%; transition:all 0.6s; transform-style:preserve-3d; }
.card_area li.flip_card:hover .card_inner { transform:rotateY(180deg); }
.card_area li.flip_card .card_inner .card_front,
.card_area li.flip_card .card_inner .card_back { width:100%; height:100%; position:absolute; background:url('../../img/patent/card_bg.png') center no-repeat; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; }
.card_area li.flip_card .card_inner .card_front { display:flex; flex-direction:column; align-items:center; padding-top:156px; box-sizing:border-box; text-align:center; box-shadow:0 0 20px rgba(0,0,0,10%); }
.card_area li.flip_card .card_inner .card_front .card_line { width:100%; height:10px; background:#022D81; content:''; position:absolute; top:0; }
.card_area li.flip_card .card_inner .card_front .card_txt01 { width:67px; height:83px; padding-top:10px;box-sizing:border-box; font-size:20px; color:#FFF; letter-spacing:-0.03em; text-align:center; position:absolute; top:10px; left:20px; background:url('../../img/patent/card_banner.png') no-repeat; }
.card_area li.flip_card .card_inner .card_front .card_txt02 { margin-top:16px; font-size:26px; font-weight:500; color:#292929; letter-spacing:-0.03em; line-height:36px; }
.card_area li.flip_card .card_inner .card_back { display:flex; flex-direction:column; padding:54px 50px; box-sizing:border-box; text-align:left; background-color:#022D81; transform:rotateY(180deg); }
.card_area li.flip_card .card_inner .card_back .back_txt01 { font-size:20px; color:#FFF; letter-spacing:-0.03em;  }
.card_area li.flip_card .card_inner .card_back .back_txt02 { margin-top:12px; font-size:20px; font-weight:500; color:#FFF; letter-spacing:-0.03em; line-height:30px; }
.card_area li.flip_card .card_inner .card_back .back_line { width:100%; height:1px; margin:20px auto;padding:1px 0 0; box-sizing:border-box; background:#DADEE3; }
.card_area li.flip_card .card_inner .card_back .back_txt03 { font-size:20px; color:#FFF; letter-spacing:-0.03em; line-height:30px; }

/* patent secction 02 - auto */
.c_sec02 .inner { padding:140px 0; align-items:center; flex-direction:column; }
.c_sec02 .inner .m_txt01 { font-weight:300; }
.c_sec02 .inner .m_txt01 span { font-weight:500; }
.c_sec02 .inner .m_txt02 { margin:10px auto 0; line-height:1; }
.auto_system_area { width:100%; margin-top:30px; }
.auto_title { width:fit-content; margin:0 auto; padding:10px 16px; box-sizing:border-box; font-size:20px; color:#FFF; letter-spacing:-0.03em; background:#022D81; }
.auto_tab { display:flex; justify-content:space-between; width:550px; margin:100px auto 0; position:relative; }
.auto_tab li { display:flex; flex-direction:column; align-items:center; width:140px; z-index:2; }
.auto_tab li .img_box { width:90px; height:90px; border-radius:10px; border:1px solid #DADEE3; box-sizing:border-box; position:relative; background:#FFF; }
.auto_tab li .img_box img { height:50px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.auto_tab li .img_box .off { opacity:1; transition:all 0.3s; }
.auto_tab li .img_box .on { opacity:0; transition:all 0.3s; }
.auto_tab li .tab_txt01 { margin-top:16px; font-size:20px; color:#505967; letter-spacing:-0.03em; text-align:center; }
.auto_tab li.on .img_box { border:1px solid #022D81; background:#022D81; transition:all 0.3s; }
.auto_tab li.on .img_box .off { opacity:0; transition:all 0.3s; }
.auto_tab li.on .img_box .on { opacity:1; transition:all 0.3s; }
.auto_tab li.on .tab_txt01 { font-weight:500; color:#022D81; transition:all 0.3s; }
.auto_tab .line { width:calc(100% - 140px); height:1px; border-bottom:2px dotted #707070; position:absolute; top:45px; left:70px; z-index:0; }
.swiper_auto_cont { width:100%; margin-top:40px; position:relative; }
.swiper_auto_cont .bg { width:100%; height:330px; border-radius:20px; background:#F9FAFB; position:absolute; top:0; left:0; right:0; z-index:0; }
.swiper_auto_cont .bg .tracking_txt { font-size:20px; font-weight:500; color:#9BA7B9; letter-spacing:-0.03em; position:absolute; top:30px; left:30px; }
.swiper_auto_cont .swiper-wrapper { display:flex; align-items:center; width:100%; height:330px; z-index:1; }
.swiper_auto_cont .swiper-slide { display:flex; flex-direction:column; justify-content:center; align-items:center; width:135px; }
.swiper_auto_cont .swiper-slide:after { display:block; width:80px; height:13px; position:absolute; top:calc(50% - 22px); right:-90px; background:url('../../img/patent/auto_arrow.png')no-repeat; content:''; }
.swiper_auto_cont .swiper-slide:nth-child(10):after { display:none; }
.swiper_auto_cont .swiper-slide:last-child:after { display:none; }
.swiper_auto_cont .swiper-slide .auto_txt01 { margin-top:16px; font-size:20px; color:#292929; letter-spacing:-0.03em; text-align:center; line-height:1.2; word-break:keep-all; }
.swiper_auto_cont .swiper-slide .auto_txt02 { margin-top:8px; font-size:16px; color:#9BA7B9; letter-spacing:-0.03em; text-align:center; }
.swiper_auto_cont .swiper-slide .t_box { display:flex; flex-direction:column; justify-content:center; align-items:center; margin-bottom:18px; }
.swiper_auto_cont .swiper-slide .b_box { display:flex; flex-direction:column; justify-content:center; align-items:center; margin-top:18px; }
.swiper_auto_cont .swiper-slide.double:before { display:block; width:80px; height:165px; position:absolute; top:58px; left:-90px; background:url('../../img/patent/auto_arrow_lb.png')no-repeat; content:''; }
.swiper_auto_cont .swiper-slide.double:after { display:block; width:80px; height:165px; position:absolute; top:58px; right:-90px; background:url('../../img/patent/auto_arrow_rb.png')no-repeat; content:''; }
.tracking_txt span:first-child { display:block; }
.tracking_txt span:not(:first-child) { display:none; }

@media all and (max-width: 1024px) {
	.common_ban { height:240px; }
	.common_ban .inner { justify-content:flex-start; padding:30px 5% 20px; box-sizing:border-box; }
	.ban01 { height:100px; bottom:20px; right:20px; z-index:0; }
	.c_ban_txt01 { margin-bottom:10px; font-size:25px; line-height:1.2; position:relative; z-index:2; word-break:keep-all; }
	.c_ban_txt02 { padding-right:25%; box-sizing:border-box; font-size:16px; line-height:1.4; position:relative; z-index:2; word-break:keep-all; }
	.m_txt01 { margin-bottom:8px; font-size:22px; line-height:1.4; }
	.m_txt02 { font-size:15px; line-height:1.4; word-break:keep-all; }

	.c_sec01 .inner { padding:70px 5%; box-sizing:border-box; }
	.c_sec01 .inner .m_txt02 { line-height:1.4; }
	.card_area { width:100%; margin-top:50px; }
	.card_area li.flip_card { width:100%; height:205px; margin:0 auto 20px; }
	.card_area li.flip_card .card_inner .card_front { padding:0; justify-content:center; background-size:50%; }
	.card_area li.flip_card .card_inner .card_front .card_txt01 { width:45px; height:55px; font-size:13px; background-size:cover; }
	.card_area li.flip_card .card_inner .card_front .card_txt02 { margin-top:0; font-size:18px; line-height:1.4; }
	.card_area li.flip_card .card_inner .card_back { justify-content:center; padding:20px 5%; background-size:50%; }
	.card_area li.flip_card .card_inner .card_back .back_txt01 { font-size:14px; }
	.card_area li.flip_card .card_inner .card_back .back_txt02 { margin-top:6px; font-size:15px; line-height:1.4; }
	.card_area li.flip_card .card_inner .card_back .back_line { margin:5px auto; }
	.card_area li.flip_card .card_inner .card_back .back_txt03 { font-size:13px; line-height:1.4; }

	.c_sec02 .inner { padding:70px 5%; box-sizing:border-box; }
	.auto_system_area { margin-top:25px; }
	.auto_title { padding:5px 8px; font-size:14px; }
	.auto_tab { width:100%; margin:50px auto 0; }
	.auto_tab li { width:33%; }
	.auto_tab li .img_box { width:55px; height:55px; }
	.auto_tab li .img_box img { height:30px; }
	.auto_tab li .tab_txt01 { font-size:14px; }
	.auto_tab .line { top:27px; }
	.swiper_auto_cont .swiper-slide { width:75px; }
	.swiper_auto_cont .swiper-slide > img { height:30px; }
	.swiper_auto_cont .swiper-slide .auto_txt01 { margin-top:8px; font-size:14px; }
	.swiper_auto_cont .swiper-slide .auto_txt02 { margin-top:4px; font-size:13px; }
	.swiper_auto_cont .swiper-slide:after { width:40px; height:7px; background-position:center; background-size:cover; right:-50px; }
	.swiper_auto_cont .bg .tracking_txt { top:20px; left:20px; font-size:15px; }
	.swiper_auto_cont .swiper-slide .t_box { margin-bottom:9px; }
	.swiper_auto_cont .swiper-slide .t_box img { height:30px; }
	.swiper_auto_cont .swiper-slide .b_box { margin-top:9px; }
	.swiper_auto_cont .swiper-slide .b_box img { height:30px; }
	.swiper_auto_cont .swiper-slide.double:before { width:40px; height:82px; background-size:cover; top:100px; left:-50px; }
	.swiper_auto_cont .swiper-slide.double:after { width:40px; height:82px; background-size:cover;top:100px; right:-50px; }
}