@charset "utf-8";
/* CSS Document */
.box0{ width:94%; margin:0 auto;}
.boxM{ margin:0 3% 0 7em}
.box1{ width:1400px; max-width:94%; margin:0 auto}
.box2{ width:1280px; max-width:94%; margin:0 auto}
.box3{ width:1000px; max-width:94%; margin:0 auto}

/*시안*/
#header{ position: fixed; left:0; top:0; width:100%; z-index:1000; background:#fff; border-bottom:1px solid #f4f4f4;}
.headerH{ height:5em}
.headerT{ padding-top:5em}
#header .logo{ }
#header .logo > a{ display:block; height:3em; overflow:hidden}
#header .logo > a .in{ display:block; height:100%; transition:.3s}
#header .logo > a .in img{ height:100%; display:block}

/**/

#header .top_wrap .wrapH{ height:5em}
.headerT{ padding-top:5em}

#header .all_wrap .all_icon {z-index:3;}
#header .all_wrap .all_icon > a { display:block; height:2.188em; overflow:hidden}
#header .all_wrap .all_icon .in{ display:block; height:100%; transform:translateY(-100%);}
#header .all_wrap .all_icon .in img{ display:block; height:100%}
.scroll #header .all_wrap .all_icon .in, #header:hover .all_wrap .all_icon .in {transform:translateY(0);}

#header .top_wrap .logo {z-index:3;}

#header .top_wrap .gnb_wrap .gnb > li .dp1{ padding:1em 2em; box-sizing:border-box; height:5em; min-width:7em; text-align:center; position:relative}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1:after{ content:""; position:absolute; left:50%; bottom:0; width:2em; height:4px; background:#de2327; transform:translate(-50%, 50%)}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ font-size:1.25em;}
/*#header .top_wrap .gnb_wrap .gnb > li .dp2{ display:none;}*/
#header .top_wrap .etc_wrap .link{ padding:1em; font-size:.938em; opacity:.7}
#header .top_wrap .etc_wrap .all_wrap{ margin-left:2em}
#header .top_wrap .etc_wrap .all_wrap .allBtn .xi{ font-size:2.5em}
#header .top_wrap .etc_wrap .right_wrap li {margin-right:1em;}
#header .top_wrap .etc_wrap .right_wrap li.b1 a {color:#999; font-size:.95em;}
.scroll #header{ background:#fff; color:#111; box-shadow:0 0 2em rgba(0,0,0,.1)}
.scroll #header .top_wrap .logo .in{transform:translateY(0);}
.scroll #header .top_wrap .gnb_wrap .gnb > li .dp1:after{ background:#de2327}
.scroll #header .top_wrap .gnb_wrap .gnb > li .dp1 .va{color:#111;}

.scroll .goog-te-gadget-simple .goog-te-menu-value span, #header:hover .goog-te-gadget-simple .goog-te-menu-value span {color:#111 !important;}
.scroll .goog-te-gadget-simple .goog-te-menu-value span:last-child:before, #header:hover .goog-te-gadget-simple .goog-te-menu-value span:last-child:before {color:#111 !important;}
/*gnb*/
#header .va_wrap{ height:7.5em}

#header .gnb_wrap{ position:absolute; width:100%; left:0; top:0; box-sizing:border-box; text-align:center;}
#header .gnb_wrap .gnb{ display:inline-flex; justify-content:center; margin:0 auto}
#header .gnb_wrap .gnb:before{ content:""; position:absolute; left:0; top:5em; width:100%; height:calc(100% - 5em); background:rgba(255,255,255,.9); transform:scaleY(0); transform-origin:left top; transition:.3s; z-index:-1; box-sizing:border-box; box-shadow:0 1px 4px rgba(0,0,0,.2)}
#header .gnb_wrap .gnb > li{ position:relative}
#header .gnb_wrap .gnb > li.m_member,
#header .gnb_wrap .gnb > li.m_mypage,
#header .gnb_wrap .gnb > li.m_guide {display:none;}
#header .gnb_wrap .gnb > li .dp1{ position:relative; z-index:1; transition:.3s; display:block; padding:0 1em; min-width:10em; font-weight:500;}
#header .gnb_wrap .gnb > li:hover .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after{ width:3em}

#header .gnb_wrap .gnb > li:hover .dp1{ color:#5c5e5e;}
#header .gnb_wrap .gnb > li.on .dp1 {}
#header .gnb_wrap .gnb > li:hover .dp1:after{ transform:scaleX(1)}
#header .gnb_wrap .gnb > li .dp2{ display:block; opacity:0; height:0; overflow:hidden}
#header .gnb_wrap .gnb > li .dp2 > li > a{ height:auto; padding:.8em 0; color:#5c5e5e;}

/*#header .gnb_wrap .gnb > li .dp2 {border-right:1px solid #eee;}*/
/*#header .gnb_wrap .gnb > li:first-child .dp2 {border-left:1px solid #eee;}*/
#header .gnb_wrap .gnb > li .dp2 > li:hover > a,
#header .gnb_wrap .gnb > li .dp2 > li.on > a{ color:#de2327; }
#header .gnb_wrap .gnb > li .dp3{ display:none}
#header .gnb_wrap:hover .gnb:before{transform:scaleY(1); transition:.3s;}
#header .gnb_wrap:hover .gnb:after{ visibility:visible; transition-delay:.3s}
#header .gnb_wrap:hover .gnb > li .dp2{ opacity:1; height:calc(100% - 5em); overflow: visible; transition:.3s; padding:1em 0; box-sizing:border-box;}
#header .gnb_wrap  + .gnb_bg{ position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:-2; opacity:0; visibility:hidden}
#header .gnb_wrap:hover + .gnb_bg{opacity:1; visibility: visible; transition:.3s; transition-delay:.1s;}
#header .gnb_wrap .gnb > li:hover .dp2 {background:rgba(255,255,255,.9)}
/* .scroll #header .gnb_wrap:hover .gnb > li .dp2{height:calc(100% - 4em);} */

#header .lang_wrap {position:relative;}

#header .lang_wrap .list{ position:absolute; left:0; width:100%; padding:.5em; box-sizing:border-box; background:#f5f5f5; transition:.3s; opacity:0; visibility:hidden; transform:translateY(-2em); box-shadow:0 0 .5em rgba(0,0,0,.2); z-index:33}
#header .lang_wrap .list > li > a{ display:block; margin:.25em 0; padding:.5em 1em; padding-right:2em; font-size:.813em; font-weight:500; color:#666; position:relative; overflow:hidden}
#header .lang_wrap .list > li > a .arrow{ position:absolute; right:.5em; line-height:1em; margin-top:-.5em; top:50%}
#header .lang_wrap .list > li:not(.on) > a .arrow{ transform: translateX(2em); transition:.3s}
#header .lang_wrap .list > li > a .arrow:before{content:"\e93f"}
#header .lang_wrap .list > li:hover > a{ background:#de2327; color:#fff}
#header .lang_wrap .list > li:not(.on):hover > a .arrow{ transform: translateX(0)}
#header .lang_wrap .list > li.on > a{ background:#1b327b; color:#fff}
#header .lang_wrap .list > li.on > a .arrow:before{content:"\e929"}
#header .lang_wrap:hover > a{ opacity:1}
#header .lang_wrap:hover .list{ opacity:1; visibility:visible; transform:translateY(0)}

#header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va .tt {color:#de2327; transition:.2s;}
/*etc*/
#header .etc_wrap {z-index:999; }
#header .etc_wrap .est_wrap {margin:0 1vw;}
#header .etc_wrap .est_wrap .est a {padding:.85em 2em; background:#de2327; border-radius:50px; color:#fff;}
#header .etc_wrap .mem_wrap {}
#header .etc_wrap .mem_wrap .etc {}
#header .etc_wrap .mem_wrap .etc > li {}
#header .etc_wrap .mem_wrap .etc > li .in { display:block; padding:0 .75em;}
#header .etc_wrap .mem_wrap .etc > li .in .xi {vertical-align:middle; display:inline-block; padding-right:3px; font-size:1.4em;}
#header .etc_wrap .mem_wrap .etc > li .in .tt {font-weight:700; vertical-align:middle; font-size:.95em;}
#header .etc_wrap .mem_wrap .etc > li .in .tt.st1 {border-radius:3em; border:1px solid #fff; padding:.2em 1.3em; font-size:.875em !important}
#header .etc_wrap .mem_wrap .etc > li:hover .in .tt {color:#de2327; transition:.3s;}

#header .etc_wrap .all_wrap{}
#header .etc_wrap .all_wrap .all_btn{ display:flex; align-items:center;}
#header .etc_wrap .all_wrap .all_btn i.tt{margin-right:12px; font-size: .875em;font-weight: 700;} 
/*#header .etc_wrap .all_wrap .all_btn:before{ content:""; position:absolute; left:0; top:0; width:100%; height:0; transition:.3s}*/
#header .etc_wrap .all_wrap .all_btn .xi{ font-size:2em; position:relative; color:#fff;}
/*#header .etc_wrap .all_wrap:hover .all_btn:before,
#header .etc_wrap .all_wrap.on .all_btn:before{ height:100%}*/
#header .etc_wrap .all_wrap.on .all_btn {line-height:4em;}
.scroll #header .etc_wrap .all_wrap .all_btn {line-height:4em;}

#header .etc_wrap .all_wrap .all{ position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; visibility:hidden; opacity:0; overflow-y:auto; transition:.3s; transform:scale(.5); z-index:10000}
#header .etc_wrap .all_wrap.on .all{ visibility:visible; opacity:1; transform:scale(1)}

#header .etc_wrap .all_wrap .all .close_btn{ position:absolute; top:1em; right:2em; width:3em; line-height:3em; text-align:center; opacity:.5; transition:.3s}
#header .etc_wrap .all_wrap .all .close_btn .xi{ font-size:3em; color:#333;}
#header .etc_wrap .all_wrap .all .close_btn:hover{ transform:rotate(90deg); opacity:1}
#header .etc_wrap .all_wrap .all .all_logo{ text-align:center; padding:3em 0; justify-content:center;}
#header .etc_wrap .all_wrap .all .gnb a{ height:auto}
#header .etc_wrap .all_wrap .all .gnb{ justify-content:space-between; padding-bottom:5em; color:#333;}
#header .etc_wrap .all_wrap .all .gnb > li{ flex:0 1 24%}
#header .etc_wrap .all_wrap .all .gnb > li.m_mypage,
#header .etc_wrap .all_wrap .all .gnb > li.m_guide {display:none;}
#header .etc_wrap .all_wrap .all .gnb > li .dp2,
#header .etc_wrap .all_wrap .all .gnb > li .dp3{ display:block}
#header .etc_wrap .all_wrap .all .gnb > li .dp1{ border-top:5px solid #ddd; border-bottom:1px solid #aaa; height:7.5em; position:relative}
#header .etc_wrap .all_wrap .all .gnb > li .dp1:after{ content:""; position:absolute; left:0; top:-5px; width:0; height:5px; background:#de2327; transition:.3s; color:#333;}
#header .etc_wrap .all_wrap .all .gnb > li .dp1 .va{ font-size:1.25em; font-weight:700}
#header .etc_wrap .all_wrap .all .gnb > li:hover .dp1{ color:#de2327}
#header .etc_wrap .all_wrap .all .gnb > li:hover .dp1:after{ width:100%}
#header .etc_wrap .all_wrap .all .gnb > li .dp2{}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li > a{ padding:1em; border-bottom:1px solid #ddd; text-align:left; position:relative; padding-left:2em; font-size:.938em;}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li > a:after{ content:"\e913"; font-family:xeicon!important; position:absolute; left:0; top:1em; width:2em; text-align:center; color:#aaa}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li:hover > a{ background:#f5f5f5; color:#de2327}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li:hover > a:after{ color:#de2327}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li:hover > .dp3{ background:#f9f9f9}
#header .etc_wrap .all_wrap .all .gnb > li .dp3{ padding:.5em 0; border-bottom:1px solid #ddd}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li > a{ padding:.25em .75em; text-align:left}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li > a .va{ font-size:.875em; color:#666}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li > a .va:before{ content:"- "; display:inline-block; padding-right:1em}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li:hover > a .va{ text-decoration:underline; color:#333}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li:hover > a .va:before{ text-decoration:none}

#header:hover .etc_wrap .mem_wrap .etc > li .in {color:#de2327;  }
#header:hover .etc_wrap .all_wrap .all_btn .xi {transition:.3s;}
#header:hover .etc_wrap .mem_wrap .etc > li .in .tt.st1 {border:1px solid #5c5e5e;}
/*#header .etc_wrap .all_wrap .all_btn:hover {background:#de2327; transition:.3s;}
#header .etc_wrap .all_wrap .all_btn:hover .xi {color:#fff !important;}*/
#header .gnb_wrap .gnb > li:hover .dp1 .va, #header .gnb_wrap .gnb > li.on .dp1 .va  {color:#de2327;}
/**/

.main #contents{ padding-top:0}
#contents .sub_visual_wrap{ position:relative; background:#333;}
.dp1_member #contents .sub_visual_wrap {display:none;}
.dp1_member #contents .sub_tit_wrap {display:none;}
#contents .sub_visual_wrap .wrap_in{ position:relative; height:30em}
#contents .sub_visual_wrap .wrap_in .twrap{ height:100%; color:#fff}
#contents .sub_visual_wrap .wrap_in .twrap .t1{ letter-spacing:.5px; opacity:.6; margin-bottom: 1em; font-size:1.25em;}
#contents .sub_visual_wrap .wrap_in .twrap .t2{ font-size:3.5em; font-weight:700;}
#contents .sub_tab .gnb > li{ width:100%}
#contents .sub_tab .gnb > li .dp2{ justify-content:center; padding-left:1px}
#contents .sub_tab .gnb > li .dp2:before {content:''; width:2000px;height: 4.7em;background: #000; position:absolute;opacity: .4; border-top: 1px solid #fff;}
#contents .sub_tab .gnb > li .dp2 > li{ flex:1 1 100%; max-width:25%; position:relative}
#contents .sub_tab .gnb > li .dp2 > li > a{ display:block; color:#fff; padding: 1.4em 0; opacity:.7}
#contents .sub_tab .gnb > li .dp2 > li > a .va{ font-size:1.45em; font-weight:600;}
#contents .sub_tab .gnb > li .dp2 > li:hover > a{ color:#fff}
#contents .sub_tab .gnb > li .dp2 > li.on{ z-index:1; }
#contents .sub_tab .gnb > li .dp2 > li.on:before {content:''; width:100%; position:absolute; height:4px; background:#fff; top:-2px;}
#contents .sub_tab .gnb > li .dp2 > li.on > a{ opacity:1; border-color:transparent; position:relative;}
#contents .sub_tab .gnb > li .dp2 > li > a:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:1em; background:#fff; opacity:.7;}
#contents .sub_tab .gnb > li .dp2 > li:first-child > a:before{ display:none;}
#contents .sub_tit_wrap{ padding:5em 0 0 0}
#contents .sub_tit_wrap .tit{ font-weight:700; font-size:2.75em; word-spacing:.063em;}
#contents .sub_tit_wrap .nav{ margin-top:1em}
#contents .sub_tit_wrap .nav > li{ color:#999; font-size:.938em}
#contents .sub_tit_wrap .nav > li:before{ content:"\e940"; font-family:xeicon; padding:0 .5em; vertical-align:middle}
#contents .sub_tit_wrap .nav > li:first-child:before{ display:none}
/*#contents .sub_tit_wrap .nav > li:last-child .tt{ text-decoration:underline}*/

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3{ display:none!important}
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}

#contents .doc{ padding:6em 0 8em 0}

/**/
.page_Sec1 {margin-top:1em !important;}
.page_Sec2 {margin-top:2em !important;}
.page_Sec3 {margin-top:3em !important;}
.page_Sec4 {margin-top:4em !important;}
.page_Sec5 {margin-top:5em !important;}
.page_Sec6 {margin-top:6em !important;}
.page_Sec7 {margin-top:7em !important;}
.page_Sec8 {margin-top:8em !important;}
.page_Sec9 {margin-top:9em !important;}

#footer{ background:#222; color:#fff}
#footer .goTop{ width:3.5em; height:3.5em; background:rgba(0,0,0,.7); color:#fff; position:fixed; z-index:10; right:1.5em; bottom:1.5em; border-radius:50%; opacity:0; transform:translateY(2em); transition:.3s}
#footer .goTop .xi{ display:block; font-size:1.75em; line-height:1}
#footer .goTop:hover{ background:#c00000}
.scroll #footer .goTop{ transform:translateY(0); opacity:1}
#footer .info_wrap{ padding:4em 0 4em 0}
#footer .info_wrap .menu{ text-align:right}
#footer .info_wrap .menu > li > a{ padding:.5em 0; opacity:.5; font-size:.875em}
#footer .info_wrap .menu > li > a:hover{ text-decoration:underline}
#footer .info_wrap .menu > li.point > a{ opacity:1}
#footer .info_wrap .info{}
#footer .info_wrap .info > li{ float:left; margin-right:3em; margin-bottom:.75em; font-size:.875em; letter-spacing:0;}
#footer .info_wrap .info > li.br{ clear:left}
#footer .info_wrap .info > li.copyright{ font-size:.75em; font-weight:300; opacity:.5; text-transform:uppercase; margin-top:1.5em}
#footer .info_wrap .info:after{ content:""; display:block; clear:both}
#footer .info_wrap .logo img{ height:6em}

/**/
.h100{ height:100%}
.visualSlider .el{ position:relative; overflow:hidden; height:100%; background:#fff}
.visualSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.3)}
.visualSlider_wrap{ position:relative}
.visualSlider_wrap .slogan{ z-index:10; position:absolute; width:100%; left:0; top:30%; box-sizing:border-box; text-align:center; color:#fff}
.visualSlider_wrap .slogan .t1{ font-size:1.375em; font-weight:700; margin-bottom:.75em; transform:translateY(2rem); opacity:0}
.visualSlider_wrap .slogan .t2{ font-size:3.125em; font-weight:700; transform:translateY(2rem); opacity:0}
.visualSlider_wrap .slogan .t3{ font-size:1.188em; transform:translateY(2rem); opacity:0; line-height:1.5; margin-top:2em}
.visualSlider .el.swiper-slide-active .slogan .t1{ transform:translateY(0); opacity:1; transition:1s}
.visualSlider .el.swiper-slide-active .slogan .t2{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s}
.visualSlider .el.swiper-slide-active .slogan .t3{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1s}
.visualSlider .el.swiper-slide-active .bg,
.visualSlider .el.swiper-slide-duplicate-active .bg{ transform:scale(1) rotate(.001deg); transition:4s;}

.visualSlider_wrap .swiper_control{ position:absolute; z-index:10; bottom:2em; left:2em; width:auto}
.visualSlider_wrap .paging{ display:flex; align-items:flex-end; margin-left:2em; color:#fff}
.visualSlider_wrap .paging > span{ position:relative; background:#aaa; opacity:1; height:1px; width:2em; margin:0; margin-top:2em; border-radius:0; position:relative; counter-increment: mainVIndex; transition:.3s}
.visualSlider_wrap .paging > span:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:100%; background:#fff}
.visualSlider_wrap .paging > span:before{ content:"0" counter(mainVIndex) "."; position:absolute; left:0; top:-2em; font-weight:700; opacity:.7; font-size:.8135em}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active{ width:10em}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active:before{ opacity:1}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active:after{ width:100%; transition:4s; transition-delay:.5s; transition-timing-function:ease-out}

/*.swiper-pagination {bottom:3em;}
.swiper-pagination-bullet {
        width: 1.5em;
        height: 1.5em;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        opacity: 1;
        background: rgba(0, 0, 0, 0.5);
      }

      .swiper-pagination-bullet-active {
        color: #fff;
        background: #007aff;
      }*/

.mainScroll{ position:absolute; left:50%; bottom:1em; z-index:100; animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite; color:#fff; transform:translateX(-50%)}
.mainScroll .xi{ font-size:3.5em}
.mainScroll .box0{ position:relative}

@keyframes downAni{
70% {margin-bottom:0}
90% {margin-bottom:-.5em}
100% {margin-bottom:0}
}

.mainNav{ position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:999; opacity:0; margin-left:-2em; transition:.3s}
.scroll .mainNav{ opacity:1; margin-left:0}
.mainNav .list{ position:relative}
.mainNav .list > li{ }
.mainNav .list > li > a{ display:flex; align-items:center; justify-content:center; width:2em; height:1.5em; position:relative}
.mainNav .list > li > a .dot{ content:""; display:block; width:1em; height:1em; border-radius:50%; background:#111; font-size:.375em; transition:.3s}
.mainNav .list > li > a .tt{ position:absolute; left:100%; top:50%; transform:translateY(-50%); font-size:.813em; padding-left:1.5em; opacity:0; transition:.3s}
.mainNav .list > li > a .tt:before{ content:""; position:absolute; left:0; top:50%; width:1.25em; height:1px; background:#111}
.mainNav .list > li.on > a .dot{ border-radius:0; transform:rotate(45deg); font-size:.75em; background:#de2327}
.mainNav .list > li.on > a .tt,
.mainNav .list > li > a:hover .tt{ opacity:1}

#fullpage .section{ padding-bottom:3em}
#fullpage .section.bg1{ background:#f5f5f5}
#fullpage .slimScrollDiv,
#fullpage .fp-scrollable{ min-width:100%}
#fullpage .aniA{ opacity:0; visibility:hidden; transition:.7s}
#fullpage .aniT{ opacity:0; visibility:hidden; transform:translateY(10em); transition:1s}
#fullpage .aniL{ opacity:0; visibility:hidden; transform:translateX(-20em); transition:1s}
#fullpage .aniB{ opacity:0; visibility:hidden; transform:translateY(-10em); transition:1s}
#fullpage .aniR{ opacity:0; visibility:hidden; transform:translateX(20em); transition:1s}
#fullpage .active .aniA{ opacity:1; visibility:visible; transition-delay:.5s}
#fullpage .active .aniL{ opacity:1; visibility:visible; transform:translateX(0); transition-delay:.5s}
#fullpage .active .aniT{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:.5s}
#fullpage .active .aniB{ opacity:1; visibility:visible; transform:translateX(0); transition-delay:.5s}
#fullpage .active .aniR{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:.5s}

.main_tit_wrap{ padding:4em 0 1.5em 0}

.main_business .list{ position:relative}
.main_business .list .el{ width:50%; height:50%; position: absolute; transition:.7s; transition-delay:.3s}
.main_business .list .el:nth-child(1){ left:0; top:0}
.main_business .list .el:nth-child(2){ right:0; top:0}
.main_business .list .el:nth-child(3){ left:0; bottom:0}
.main_business .list .el:nth-child(4){ right:0; bottom:0}
.main_business .list .el .bg{ height:100%}
.main_business .list .el .con{ box-sizing:border-box; padding:3em}
.main_business .list .el .con .more{ position:absolute; right:0; bottom:0; width:4em; height:4em; transform:translate(-50%,-50%); color:#fff; opacity:0; transition:.3s}
.main_business .list .el .con .more .line{ border:2px dotted #fff; border-radius:50%}
.main_business .list .el .con .more:hover .line{ background:#de2327; border-color:transparent}
.main_business .list .el:hover{ width:55%; height:55%; }
.main_business .list .el:hover .con .more{ opacity:1; transition-delay:.3s}
.main_business .list[data-no="1"] .el:nth-child(2),
.main_business .list[data-no="2"] .el:nth-child(1),
.main_business .list[data-no="3"] .el:nth-child(4),
.main_business .list[data-no="4"] .el:nth-child(3){ width:45%; height:55%}
.main_business .list[data-no="1"] .el:nth-child(3),
.main_business .list[data-no="2"] .el:nth-child(4),
.main_business .list[data-no="3"] .el:nth-child(1),
.main_business .list[data-no="4"] .el:nth-child(2){ width:55%; height:45%}
.main_business .list[data-no="1"] .el:nth-child(4),
.main_business .list[data-no="2"] .el:nth-child(3),
.main_business .list[data-no="3"] .el:nth-child(2),
.main_business .list[data-no="4"] .el:nth-child(1){ width:45%; height:45%}

.main_app .wrap_con{ position:relative }
.main_app .applSlider .img{}
.main_app .applSlider .con{ width:35%; box-sizing:border-box; padding:5em 0; position:relative}
.main_app .applSlider .con:after{ content:""; position:absolute; left:100%; margin-left:-1px; top:0; width:5em; padding-left:1px; height:100%; background:#fff}
.main_app .applSlider .con .in{ transform:translateX(-5em); opacity:0}
.main_app .applSlider .con > *{ width:auto}
.main_app .applSlider .el{ opacity:0}
.main_app .applSlider .el.swiper-slide-active{ opacity:1}
.main_app .applSlider .el.swiper-slide-active .con .in{ transform:translateX(0); opacity:1; transition:1s; transition-delay:.5s}
.appSlider_control{ position:absolute; left:35%; bottom:1em; z-index:100; transform:translateX(-50%)}

.newsSlider_wrap{ padding-left:12em; margin-bottom:4em}
.newsSlider_wrap .el{ width:33.33%}
.newsSlider_wrap .el .wrap_in{ box-shadow:0 0 1em rgba(0,0,0,.1); background:#fff; border-radius:.5em; padding:2em; margin:0 1em}
.newsSlider_control{ position:absolute; left:0; bottom:1em; width:12em}

.main_link_wrap{ overflow:hidden; padding-bottom:4em}
.main_link > li{ width:50%; position:relative; color:#FFF}
.main_link > li .bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.main_link > li .bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; background:var(--bg0); opacity:.1; transition:.3s}
.main_link > li:nth-child(2n-1) .bg{ left:auto; right:0}
.main_link > li .in{ position:relative; padding:2.5em 4em}
.main_link > li .in .link{ background:rgba(0,0,0,.7); color:#fff; padding:.5em 1.5em; border-radius:.5em; margin-top:2em; font-size:.938em; transition:.3s}
.main_link > li:hover .bg:after{ opacity:.4}
.main_link > li:hover .in .link{ background:#de2327}

/**/
.tit1{ font-weight:700; font-size:2.5em}
.tit2{ font-weight:700; font-size:1.875em}
.tit3{ font-weight:700; font-size:1.75em}
.tt1{ font-size:1.063em; color:#777; line-height:1.8}
.tt2{ font-size:1.125em}
.tt3{ font-size:1.188em}

.list_st1 > li{ position:relative; padding-left:1em}
.list_st1 > li:before{ content:""; position:absolute; left:0; top:.75em; width:4px; height:4px; border-radius:50%; background:#de2327}

/***********회사소개 greetings************/
.greeting_Wrap {margin-top:0em;}
.greeting_Wrap .top_tw {width:50%; }
.greeting_Wrap .top_tw.line { position: relative; margin-top: 3em; }
.greeting_Wrap .top_tw.line:before { position: absolute; content: ""; width: 46%; height: 2px; background:#de2327; top: -30px; left: 50%; transform: translate(-50%, -50%); }
.greeting_Wrap .top_tw .hi { line-height:1.35; font-size:1.8em; color:#222; font-weight:500; margin-bottom:1.5em; margin-top:1em;}
.greeting_Wrap .top_tw .hi .col {color:#de2327; font-weight:700; vertical-align:baseline; font-size:1.375em;}

.greeting_Wrap .con2 > p { font-size:1.063em; color:#555; line-height:1.6; padding-bottom:1em;}
.greeting_Wrap .con2 .t2{ font-size:1.125em; text-align:right; margin-top:2em;}
.greeting_Wrap .con2 .t2 .name{ font-size:1.188em; margin-left:1em; color:#222;}
.greeting_Wrap .con2 .t3{ font-size:.9em; padding-bottom: 0;} 
.greeting_Wrap .imgw { width:50%; position:relative; text-align:center;}
.greeting_Wrap .imgw img{ position:relative; width:29em;}
.greeting_Wrap span.col {color:#57bec6; vertical-align: baseline;}

/*business_wrap*/
.business_wrap {width:100%;}
.business_wrap:first-child {margin-bottom:10em;}
.business_wrap .tit { text-align:center; margin-bottom:1em;}
.business_wrap .tit i {font-size:2em; position:relative;}
.business_wrap .tit i:before {content:''; width:100%; height:16px; background:#de2327 ; opacity:.2; position:absolute; bottom:0;  z-index:-1}
.business_wrap i.c_point { vertical-align: baseline;}
.business_wrap .txt {margin-bottom:3em; font-size:1.3em; text-align:center; color:#666;}
.business_wrap .ci_li .circle {width:7em; height:7em; background:#de2327; border-radius:50%; font-size:1.3em; color:#fff}
.business_wrap .ci_li .circle.col2 {background:#ffbdbe; color:#333}
.business_wrap .ci_li .circle.col3 {background:#eee; color:#333}

.page_ttbg .wrap_tt{ padding:0 0 2em 0}
.page_ttbg .wrap_img{ position:relative}
.page_ttbg .wrap_img .bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.page_ttbg_wrap > li{width:45%}
.page_ttbg_wrap > li:first-child{ margin-top:2em}
.page_ttbg_wrap > li:nth-child(2n-1) .wrap_img{order:-1}
.page_ttbg_wrap > li:nth-child(2n) .wrap_tt{ text-align:right}
.page_ttbg_wrap > li .wrap_tt .page_line{ display:inline-block}

.page_ttbg_wrap > li .wrap_tt{ width:100%}
.page_ttbg_wrap > li .wrap_tt .page_tit {font-size:1.5em; margin-bottom:.5em; font-weight:700}
.page_ttbg_wrap > li .wrap_tt .page_txt {line-height:1.6; font-size:1.125em; color:#333;}
.page_ttbg_wrap > li .wrap_img{ width:100%}

.page_ttbg_wrap > li:nth-child(2n){ margin-top:10em; margin-bottom:-3em}
.page_ttbg_wrap > li:nth-child(2n) .wrap_tt{ text-align:left}
.page_line.st1{ width:2em; height: 1px; margin-bottom:1em; background:#ce271e}

/*overseas_wrap*/

.overseas_wrap {width:100%; margin-bottom:5em}
.overseas_wrap .tit { text-align:center; margin-bottom:1em;}
.overseas_wrap .tit i {font-size:2em; position:relative;}
.overseas_wrap .tit i:before {content:''; width:100%; height:16px; background:#de2327 ; opacity:.2; position:absolute; bottom:0;  z-index:-1}
.overseas_wrap i.c_point { vertical-align: baseline;}
.overseas_wrap .txt {margin-bottom:3em; font-size:1.3em; text-align:center; color:#666;}

/**/
.lab_bg2 {background:#f4f4f4; padding:5em 0 5em;}
.lab_wrap {width:100%; margin-bottom:5em}
/*.lab_wrap .img {width:50%;}
.lab_wrap .txt_wrap {width:50%;}*/
.lab_wrap .tit { margin-bottom:1em; text-align:center;}
.lab_wrap .tit i {font-size:2em; position:relative;}
.lab_wrap .tit i:before {content:''; width:100%; height:16px; background:#de2327 ; opacity:.2; position:absolute; bottom:0;  z-index:-1}
.lab_wrap .txt_wrap .xi {margin-right:5px;}
.lab_wrap i.c_point { vertical-align: baseline;}
.lab_wrap .tt_wrap .txt {font-size:1.5em; line-height:1.6;margin-top:1em}
.lab_wrap .tt_wrap {}
.lab_wrap .tt_wrap .t1 {color:#666; font-size:1.25em; margin-top:.5em;}

/**/
.agree_box{ border:1px solid #ddd; box-shadow:1px 1px 1em rgba(0,0,0,.2); padding:2em}
.agree_box .tit{ font-size:1.188em; font-weight:500; color:#111; margin-bottom:1em; margin-top:2em}
.agree_box .tit:first-child{ margin-top:0}
.agree_box .con{ font-size:.875em; color:#666; line-height:1.6}
.agree_box .con.hSt {overflow-y:scroll; height:10em;}
.agree_box .con > *{padding-top:.5em;}
.agree_box .check{ border-top:1px solid #ddd; margin-top:1.5em; padding-top:1em}
label_st.agree_box ul{ margin-top:1em}
.agree_box table{ margin:1em 0; width:100%}
.agree_box table th,
.agree_box table td{ border:1px solid #ddd; padding:1em}
.agree_box table th{ background:#f5f5f5}
.agree_box p strong{ font-size:1.125em; color:#333}
.agree_box a{ vertical-align:top; color:#666; text-decoration:underline}
.agree_box a:hover{ opacity:.6}
.agree_box strong{ vertical-align:top; font-weight:500}
.agree_big_ti {padding:3em 0;}
.agree_big_ti > i {font-size:2.5em; text-align:center; font-weight:700;}

/**/
.map_tit .t1 img {padding:3px; box-sizing:border-box;}
.map_info1 { overflow:hidden; margin-bottom:20px; box-shadow:2px 3px 8px -1px #a4a4a4; padding:1.5em; margin-top:1em; font-weight:400; box-sizing:border-box; background:#fff;}
.map_info1 .t1 span { color:#666; display:inline-block; margin-right:30px; margin-bottom:10px; line-height:1.5;}
.map_info1 .t1 span:last-child { margin-right:0;}
.map_info1 .t1 .xi { font-size:1em; color:#fff; margin-right:10px; border-radius:50%; width:1.8em; height:1.8em; line-height:1.8em; text-align:center; background:#de2327}


/*MEMBER***************************/
.member_wrap{ letter-spacing:-.5px; margin-top:5em;}
.member_wrap .input_st{ height:3em;}
.member_wrap .login_box{ width:520px; max-width:100%; margin:0 auto;}
.member_wrap .join_box { width:600px; max-width:100%; margin:0 auto;}
.member_wrap .confirm_box{ width:45%; margin:0 auto}

.member_wrap .member_tab{ text-align:center; padding:0 1px 0 0;}
.member_wrap .member_tab > li{ width:50%;}
.member_wrap .member_tab > li .in{ position:relative; z-index:1; margin:0 -1px -1px 0; padding:1em .5em; background:#f0f0f0; border:1px solid #d4d5d8; font-size:1.125em; color:#72727d;}
.member_wrap .member_tab > li.on .in{ z-index:2; background:#fff; border-bottom-color:transparent; color:#0ea04f;}
.member_wrap .member_tab > li.on .in:before{ content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:4px; background:#0ea04f;}

.member_wrap .member_tit{ padding:0 0 2em 0; text-align:center;}
.member_wrap .member_tit .tit{ font-size:2.500em; color:#3c3c3d; font-weight:600; letter-spacing:0; text-transform:uppercase;}
.member_wrap .member_tit .txt{ font-size:1.125em; color:#69696b; font-weight:300; padding-top:.8em;}

.member_wrap .member_form{ padding:2.5em 2em; border:1px solid #ccc; border-top-width:4px; border-top-color:#de2327;}
.member_wrap .member_form.st1{ border-top:none !important}

.member_wrap .form > li:first-child{ margin-top:0;}
.member_wrap .form .inp_wrap{ position:relative; margin-top:.4em;}
.member_wrap .form .inp_wrap .xi{ position:absolute; top:0; left:0; width:2em; line-height:55px; text-align:center; font-size:1.750em; color:#3c3c3d;}
.member_wrap .form .inp_wrap .tt{ position:absolute; top:0; left:0; width:6em; line-height:55px; text-align:center; border-right:1px solid #ddd; color:#3c3c3d;}
.member_wrap .form .inp_wrap .inp{ box-sizing:border-box; width:100%; height:55px; padding:0 1em 0 4em; background:#fff; border:1px solid #ddd; border-radius:5px;}
.member_wrap .form { margin-top:1.2em;}
.member_wrap .form .find{ padding-top:.3em; text-align:right;}
.member_wrap .form .find .link{ position:relative; display:inline-block; *display:inline; zoom:1; vertical-align:middle; margin-left:.8em; padding-left:.8em; font-weight:300;}
.member_wrap .form .find .link:before{ content:""; position:absolute; top:10%; left:0; width:1px; height:80%; background:#ccc;}
.member_wrap .form .find .link:first-child{ margin-left:0; padding-left:0;}
.member_wrap .form .find .link:first-child:before{ display:none;}
.member_wrap .form .btn_wrap{ margin-top:.6em;}
.member_wrap .form .btn_wrap .btn{ display:block; box-sizing:border-box; text-align:center; width:100%; margin:.4em 0; padding:1em 1em; border:1px solid transparent; font-size:1.125em; border-radius:.3em}
.member_wrap .form .btn_wrap .btn.c1{ background:#de2327; color:#fff;}
.member_wrap .form .btn_wrap .btn.c2{ background:#ffffff; border-color:#de2327; color:#de2327;}
.member_wrap .form .btn_wrap .btn.c3{ background:#3e3e49; color:#fff;}
.member_wrap .form .msg_wrap{ margin-top:2em;}
.member_wrap .form .msg_wrap .tt{ margin:.4em 0; font-size:.938em; color:#3c3c3d; font-weight:300;}
.member_wrap .form .msg_wrap .tt.icon{ position:relative; padding-left:1.6em;}
.member_wrap .form .msg_wrap .tt.icon .xi{ position:absolute; top:0; left:0; line-height:1;}
.member_wrap .form .id_wrap{ padding:3em 1em; background:#f5f5f5; border:1px solid #e5e5e5; text-align:center; font-size:1.125em;}
.member_wrap .form .id_wrap strong{ vertical-align:baseline; color:#3f3f9f; letter-spacing:0;}

.member_wrap .form .sns_wrap{ margin-top:2em;}
.member_wrap .form .sns_wrap .btn{ position:relative; display:block; margin-top:.4em; border:1px solid #ccc; border-radius:5px;}
.member_wrap .form .sns_wrap .btn:first-child{ margin-top:0;}
.member_wrap .form .sns_wrap .btn .tt{ display:block; box-sizing:border-box; line-height:55px; padding:0 1em 0 6em; color:#3c3c3d;}
.member_wrap .form .sns_wrap .btn .icon{ position:absolute; top:-1px; left:-1px; bottom:-1px; width:2em; line-height:57px; border-radius:5px 0 0 5px; text-align:center; font-size:2.000em; color:#fff;}
.member_wrap .form .sns_wrap .btn .icon.naver{ background:#2CB400;}
.member_wrap .form .sns_wrap .btn .icon.daum{ background:linear-gradient(-225deg, #6e9cfc 0%, #fb676a 70%, #ffe001 100%); font-family:'Ms','NotoSans',sans-serif; font-weight:600;}
.member_wrap .form .sns_wrap .btn .icon.google{ background:#1A73E8;}
.member_wrap .form .sns_wrap .btn .icon.kakao{ background:#FAE100; color:#3C1E1E;}
.member_wrap .form .sns_wrap .btn:hover{}

.member_wrap .form2{ margin-top:1.5em; padding-top:1.5em; border-top:1px dashed #ccc;}
.member_wrap .form2 .tit{ font-size:1.125em; margin-bottom:.5em; display:block; font-family:'notokrB'}
.member_wrap .form2:first-child{ margin-top:0; padding-top:0; border-top:none;}
.member_wrap .form2 > li{ margin-top:.4em; font-weight:300;}
.member_wrap .form2 > li:first-child{ margin-top:0;}
.member_wrap .form2 .inp_wrap{ color:#3c3c3d;}
.member_wrap .form2 .inp_wrap select.input_st,
.member_wrap .form2 .inp_wrap input[type=text].input_st,
.member_wrap .form2 .inp_wrap input[type=password].input_st{ background-color:transparent;}
.member_wrap .form2 .inp_wrap input[disabled=disabled].input_st{ background-color:#f5f5f5;}
.member_wrap .form2 .check_wrap > *{/* display:inline-block;*/ zoom:1; vertical-align:middle; flex-wrap :wrap; align-items:center;}
.member_wrap .form2 .check_wrap .label_wrap{ width:100%;}
.member_wrap .form2 .check_wrap .label_wrap > *{ width:33.33%; margin:.2em 0;}
.member_wrap .form2 .check_wrap .tit{ display:block; font-size:1.125em; padding-bottom:1em}
.member_wrap .form2 .check_wrap .tit.st2 {padding-bottom:0; font-size:1em; color:#333;}
.member_wrap .form2 .check_wrap .check_ul{width:100%;}
.member_wrap .form2 .check_wrap .check_ul.st{ background:#fff}
.member_wrap .form2 .check_wrap .check_ul.st > li{ padding:0}
.member_wrap .form2 .check_wrap .check_ul > li{ width:20%;}
.check_ul > li .label_st .xi {font-size:1em;}
.member_wrap .form2 .check_wrap .check_ul > .last {flex:0 1 100%;}
.member_wrap .form2 .check_wrap .check_ul .last .w18 {width:18.5em;}
.member_wrap .form2 .ess{ display:none;}
.member_wrap .form2 .required .ess{ display:inline-block;}
.member_wrap .form2 .field{ position:relative;}
.member_wrap .form2 .field .txt{ position:absolute; z-index:-1; top:50%; left:1.2em; transform:translate(0, -50%); transition:transform .2s ease-out; transform-origin:0 0;}
.member_wrap .form2 .field.on .txt{ color:#69696b; transform:translate(0, -110%) scale(.7,.7);}
.member_wrap .form2 .colr .col_w1{ width:65.68%; margin-left:1%;}
.member_wrap .form2 .colr .col_w1:first-child{ width:66.66%; margin-left:0;}
.member_wrap .form2 .colr .col_w2{ width:32.34%; margin-left:1%;}
.member_wrap .form2 .colr .col_w2:first-child{ width:33.32%; margin-left:0;}

.member_wrap .form2 .tit.input_st{ background:#f5f5f5;}
.member_wrap .form2 .check_st{ position:relative; text-align:center; border-color:transparent; cursor:pointer;}
.member_wrap .form2 .check_st .on{ position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:#fff; border:1px solid #095282; border-radius:5px;}
.member_wrap .form2 .check_st .on ~ span{ position:relative; color:#095282;}
.member_wrap .form2 .check_st:hover input ~ .on,
.member_wrap .form2 .check_st input:checked ~ .on{ background:#095282;}
.member_wrap .form2 .check_st:hover input ~ .on ~ span,
.member_wrap .form2 .check_st input:checked ~ .on ~ span{ color:#fff;}
.member_wrap .form2 .check_st input[type=checkbox],
.member_wrap .form2 .check_st input[type=radio]{ width:0; height:0; overflow:hidden; opacity:0;}

.member_wrap .type_wrap{}
.member_wrap .type_wrap > li{ width:50%;}
.member_wrap .type_wrap > li .inner{ border-left:1px solid #ddd; padding:0 2em; text-align:center;}
.member_wrap .type_wrap > li:first-child .inner{ border-left:none;}
.member_wrap .type_wrap .icon{ height:8em;}
.member_wrap .type_wrap .txt{ margin-top:1em; min-height:5em;}
.member_wrap .type_wrap .txt .t1{ font-size:1.500em; color:#3f3f9f;}
.member_wrap .type_wrap .txt .t2{ font-size:.938em; color:#69696b; padding-top:.4em;}
.member_wrap .type_wrap .btn{ display:inline-block; *display:inline; zoom:1; margin-top:1em; padding:.6em 2.5em; background:#fff; border:1px solid #3f3f9f; border-radius:5px; color:#3f3f9f; transition:.2s;}
.member_wrap .type_wrap .btn:hover{ background:#3f3f9f; color:#fff;}

.member_wrap .terms_wrap .all_check{ padding:1em 0; border-bottom:1px dashed #bbb;}
.member_wrap .terms_wrap > li{ padding-top:1.5em;}
.member_wrap .terms_wrap > li:first-child{ padding-top:0;}
.member_wrap .terms_wrap .tit{ margin-bottom:.6em; font-size:1.125em; color:#3c3c3d; font-weight:600;}
.member_wrap .terms_wrap .c1{ color:#d31717;}
.member_wrap .terms_wrap .all_check .xi {font-size:1em;}

.member_wrap .finish_wrap{ text-align:center;}
.member_wrap .finish_wrap .tit{ font-size:1.500em; color:#3c3c3d; letter-spacing:-1px;}
.member_wrap .finish_wrap .txt{ padding:.4em 0; color:#69696b; font-weight:300;}
.member_wrap .finish_wrap .join_fin{ font-size:.938em; color:#3c3c3d;}
.member_wrap .finish_wrap .join_fin .th,
.member_wrap .finish_wrap .join_fin .td{ padding:.8em 1.5em; border:1px solid #ddd; text-align:left;}
.member_wrap .finish_wrap .join_fin .th{ width:10em; background:#f5f5f5;}
.member_wrap .finish_wrap .join_fin .td{ width:auto; letter-spacing:0;}

.member_btn_wrap{ margin:1.5em 0 0 -.4em;}
.member_btn_wrap > *{ width:50%;}
.member_btn_wrap .in{ margin-left:.4em;}
.member_btn_wrap .in .input_st.s4 {border-color:#de2327;}

.member_agree .agree{ padding:3em; border:1px solid #ddd; border-top:2px solid #3c3c3d; font-size:.938em; color:#69696b; font-weight:300; line-height:1.4em;}
.member_agree .agree.H{ padding:1.5em; border-top-width:1px; height:6em; overflow-y:scroll;}
.member_agree .agree p{ padding:.5em 0;}
.member_agree .agree *{ vertical-align:baseline;}
.member_agree .agree strong{ color:#3c3c3d;}
.member_agree .check{ padding:1em 2em; border:1px solid #ddd; border-top:none; border-radius:0 0 5px 5px; text-align:right; background:#f9f9f9}
.member_agree h1{ color:#111; font-weight:600}
.member_agree .check .xi {font-size:1em;}

/**/
.page_step_wrap{ text-align:center;}
.page_step_wrap .step{ display:inline-block; *display:inline; zoom:1;}
.page_step_wrap .step > li .in{ position:relative; padding:0 1em; min-width:8em;}
.page_step_wrap .step > li .in:before{ content:"\e940"; font-family:xeicon; position:absolute; font-size:2.000em; color:#ddd; top:.2em; left:-.5em;}
.page_step_wrap .step > li:first-child .in:before{ display:none;}
.page_step_wrap .step > li .in > *{ position:relative; display:block;}
.page_step_wrap .step > li .in .xi{ margin:.2em 0; font-size:2.500em; color:#ddd;}
.page_step_wrap .step > li .in .xi:before{ position:relative; z-index:2;}
.page_step_wrap .step > li .in .xi:after{ content:""; position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%, -50%); width:1.4em; height:1.4em; background:#f5f5f5; border-radius:100%;}
.page_step_wrap .step > li .in .tt{ font-size:1.125em; color:#aaa; font-weight:300;}
.page_step_wrap .step > li.on .in .xi{ color:#fff;}
.page_step_wrap .step > li.on .in .xi:after{ background:#de2327;}
.page_step_wrap .step > li.on .in .tt{ color:#3c3c3d;}


.page_cate{}
.page_cate .cate > li{ display:inline-block; vertical-align:top; margin:.25em 0;}
.page_cate .cate > li > a{ display:block; box-sizing:border-box; min-width:7em; padding:.8em .25em; text-align:center; background:linear-gradient(-180deg, #fff 0%, #fff 50%, #f4f4f4 100%); border:1px solid #ddd; border-radius:.3em; color:#333;}
.page_cate .cate > li > a .tt{ display:inline-block; line-height:1em;}
.page_cate .cate > li:hover > a{ border-color:#de2327; color:#de2327;}
.page_cate .cate > li.on > a{ background:#de2327; border-color:#de2327; color:#fff;}


.history_wrap{ position:relative; overflow:hidden; padding:2em 0;}
.history_wrap:before,
.history_wrap .lineAni{ content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#ddd}
.history_wrap .lineAni{ height:0; background:#de2327; transition:.3s}
.history_wrap .lineAni:before,
.history_wrap:after{ content:""; position:absolute; left:50%; top:0; margin-left:-.5em; width:1em; height:1em; background:#fff; border:.25em solid #de2327; border-radius:100%; box-sizing:border-box}
.history_wrap:after{ top:auto; bottom:0}
.history_wrap .history > li{ margin-top:4em}
.history_wrap .history > li:first-child{ margin-top:0}
.history_wrap .history > li .year{ width:50%; overflow:hidden; justify-content:flex-end}
.history_wrap .history > li .year .wrap_in{ position:relative; overflow:hidden; width:15em}
.history_wrap .history > li .year .tt{ display:inline-block; position:relative; padding:0 .5em; font-size:2.5em; color:#de2327; font-weight:700;}
.history_wrap .history > li .year .tt:before{ content:""; position:absolute; left:100%; top:50%; margin-top:-1px; width:100%; border-top:2px dotted #aaa}
.history_wrap .history > li .year .tt:after{ content:"'"; font-style:italic}
.history_wrap .history > li .list{ width:50%; margin-top:1em}
.history_wrap .history > li .list > li{ margin-top:.5em}
.history_wrap .history > li .list > li:first-child{ margin-top:0}
.history_wrap .history > li .list .wrap_in{ padding:0 2em}
.history_wrap .history > li .list .wrap_in .img_wrap .resize {padding-bottom:35% !important;}
.history_wrap .history > li .list .wrap_in .img_wrap .resize .img_r {text-align:right !important;}
.history_wrap .history > li .list .wrap_in .img_wrap .resize .img_l {text-align:left !important;}
.history_wrap .history > li .list .month{ flex:0 0 3em}
.history_wrap .history > li .list .month .tt{ color:#999; font-size:1.125em; letter-spacing:-1px}
.history_wrap .history > li .list .month .tt:after{ content:""; font-size:.813em; font-weight:500}
.history_wrap .history > li .list .detail > li{ margin-top:.5em}
.history_wrap .history > li .list .detail > li:first-child{ margin-top:0}
.history_wrap .history > li .list .detail .tt{ position:relative; padding:0 1.5em; margin-top:.125em; color:#333; font-size:.938em; line-height:1.7; font-weight:400;}
.history_wrap .history > li .list .detail .tt:before{ content:""; position:absolute; left:0; top:.5em; width:.75em; border-top:2px solid #ddd}
.history_wrap .history > li:nth-child(2n) .year{ justify-content:flex-start; text-align:right}
.history_wrap .history > li:nth-child(2n) .year .tt:before{ left:auto; right:100%}
.history_wrap .history > li:nth-child(2n) .list{ order:-1}
.history_wrap .history > li:nth-child(2n) .list > li > .flex{ justify-content:flex-end}
.history_wrap .history > li:nth-child(2n) .list .month{ text-align:right}
.history_wrap .history > li:nth-child(2n) .list .detail{ order:-1}
.history_wrap .history > li:nth-child(2n) .list .detail .tt{ text-align:right}
.history_wrap .history > li:nth-child(2n) .list .detail .tt:before{ left:auto; right:0}