
:root{
    --text_default:#000;
    --text_default_2:#212124;

    --line_gray_2:#464646;

    --border_radius_1:16px;
    --border_radius_1:12px;

    --pd_1:15px;
    --pd_2:20px;
}



.main_container{position: relative;width:100%;color:var(--text_default);}
.main_container .inner{position: relative;width:100%;max-width:1524px;margin:0 auto;padding:20px 0;}
.main_container .inner::after { content:""; display:block;clear:both;}
.main_container .tit{margin:0 0 15px 0;font-size: 24px;font-weight: 700;color:var(--text_default);}

.slick-slider{text-align: center;}
.slick-slider .item a{display: flex;justify-content: center;align-items: center;width: 100%;}
.slick-slider img{max-width: 100%;margin:0 auto;}
.slide_controler{display: flex;align-items: center;justify-content: center; position: relative;text-align: center;margin:10px 0 0 0;}
.slide_controler .slide_paging{font-size: 20px;font-weight: 500;letter-spacing: 5px;width: 120px;}
.slide_controler .slide_nav{display: flex;align-items: center; margin:0 0px; }
.slide_controler .slide_nav .arrow {overflow:hidden;text-indent: -9999px; display:inline-block;width: 25px; height: 25px; cursor:pointer; z-index: 10;}
.slide_controler .slide_nav .arrow_prev {background: url('../images/main/ico_angle_left.png') no-repeat center center;background-size: 10px auto;}
.slide_controler .slide_nav .arrow_next {background: url('../images/main/ico_angle_right.png') no-repeat center center;background-size: 10px auto;}
.slide_controler .toggleButton{overflow:hidden;text-indent: -9999px; width: 25px; height: 25px; margin:0 20px; z-index: 10;background: url('../images/main/ico_pause.png') no-repeat center center;background-size: 12px auto;}
.slide_controler .toggleButton.playing{background: url('../images/main/ico_pause.png') no-repeat center center;background-size: 12px auto;}
.slide_controler .toggleButton.paused{background: url('../images/main/ico_Play.png') no-repeat center center;background-size: 12px auto;}
.slick-track {display: flex;}
.slick-track .slick-slide {display: flex; height: auto; justify-content:center;}

.main_slide.slick-slider img{height:360px;}
.main_banner_01.slick-slider img{width:100%; height:249px;}
.main_banner_02 .slick-slider img{width:100%; height:249px;}

/* section_01 */
.main_container .section_01{background: #EBF4FF;}
.main_container .section_01 .inner{display: flex; padding:30px 0 10px 0;}
.main_container .section_01 .part_01{overflow:hidden;width:calc(100% - 214px); position: relative; }
.main_container .section_01 .part_02{margin-left:auto; width:214px; margin:0 0 0 45px;}

.main_container .section_01 .cont_mainVisual .main_slide {overflow:hidden;max-height:360px;}

.main_container .section_01 .cont_appDown{ height:100%;max-height:360px;padding:15px;background: #fff;}
.main_container .section_01 .cont_appDown .txt_01{margin:0 0 10px 0;padding:90px 0 0 0;line-height:140%;text-align: center; font-size: 18px;font-weight: 700;color:var(--text_default_2);background: url('../images/renew/m_app_icon.png') no-repeat top center;background-size: 80px auto;}
.main_container .section_01 .cont_appDown .qr{margin:0 0 10px 0;text-align: center;}
.main_container .section_01 .cont_appDown .qr img{height:100px;}
.main_container .section_01 .cont_appDown .btn{width:100%;padding:10px 10px;font-size:16px;font-weight:500;color:#000;border: 1px solid var(--line_gray_2);border-radius: 8px;word-break: keep-all; height : initial;}

/* section_02 */
.main_container .section_02 .inner{display: flex;}
.main_container .section_02 .part_01{position: relative;width:calc(100% - 578px);}
.main_container .section_02 .part_02{margin-left:auto;position: relative;width:100%; max-width:578px;margin:0 0 0 34px;}

.main_container .section_02 .cont_service{display: flex;flex-wrap: wrap;margin:0 -11px; }
.main_container .section_02 .cont_service .item{position: relative; width:calc(100% / 3);height:100%;padding:0 11px;}
.main_container .section_02 .cont_service .item a{display: block;}
.main_container .section_02 .cont_service .item a:hover dl{background: #5C7BBF;}
.main_container .section_02 .cont_service .item a:hover dt,
.main_container .section_02 .cont_service .item a:hover dd{color:#fff;}
.main_container .section_02 .cont_service .item dl{position: relative;height:230px;padding:var(--pd_2);border-radius: var(--border_radius_1);background: #E7F2FF;}
.main_container .section_02 .cont_service .item dl dt{position: relative;margin:0 0 5px 0;padding:0px 0 0 0;font-size: 20px;font-weight: 500;text-align: center;word-break: keep-all;line-height:120%;}
.main_container .section_02 .cont_service .item dl dd{font-size: 18px;font-weight: 400;text-align: center;line-height: 140%;word-break: keep-all;}
.main_container .section_02 .cont_service .item dl dt::before{content:"";display:block;max-width:242px;height:100px;margin:0 auto 10px auto;}
.main_container .section_02 .cont_service .item_01 dl dt::before{background:#fff url('../images/main/main_img01.png') no-repeat center center;background-size: contain;border-radius: 8px;}
.main_container .section_02 .cont_service .item_02 dl dt::before{background:#fff url('../images/main/main_img02.png') no-repeat center center;background-size: contain;border-radius: 8px;}
.main_container .section_02 .cont_service .item_03 dl dt::before{background:#fff url('../images/main/main_img03.png') no-repeat center center;background-size: contain;border-radius: 8px;}

.main_container .section_02 .cont_utilizationApp{position: relative;height:230px;padding:var(--pd_2);border-radius: var(--border_radius_1);background: #E7F2FF;}
.main_container .section_02 .cont_utilizationApp .slick-slider img{height: 100%; max-height: 165px;} 

/* section_03 */
.main_container .section_03 .inner{display: flex;}
.main_container .section_03 .part_01{flex:1;margin:0 22px 0 0; min-width: 0;}
.main_container .section_03 .part_02{flex:1;margin:0 22px 0 0; min-width: 0;}
.main_container .section_03 .part_03{width:452px;}
.main_container .section_03 [class^="cont_"]{padding:var(--pd_2);;background: #FAFCFF;border-radius: var(--border_radius_1);border: 1px solid #B9B8B8;}

.main_container .section_03 .cont_article {height: 322px;}
.main_container .section_03 .cont_article .article_list li {display: flex; position: relative;padding:12px 0; border-bottom: 1px solid #B6B6B6; overflow: hidden; min-width: 0;width: 100%;}
.main_container .section_03 .cont_article .article_list li:last-child {border: none;}
.main_container .section_03 .cont_article .article_list li a {display: block; color: #333; font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; min-width: 0;}
.main_container .section_03 .cont_article .article_list li .date {font-size: 18px; margin-left: 25px; flex-shrink: 0;}

.main_container .section_03 .cont_faq {min-height: 322px;}
.main_container .section_03 .cont_faq .faq_list li {display: flex; position: relative;padding:12px 0; border-bottom: 1px solid #B6B6B6; min-width: 0;width: 100%;}
.main_container .section_03 .cont_faq .faq_list li:last-child {border: none;}
.main_container .section_03 .cont_faq .faq_list li .ico_q {font-size: 18px; margin-right: 10px; flex-shrink: 0;}
.main_container .section_03 .cont_faq .faq_list li a {display: block; color: #333; font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; min-width: 0;}

.main_container .section_03 .cont_promotional{height:322px;padding:20px 20px 10px 20px;}
.main_container .section_03 .cont_promotional .slick-slider img{height:249px; max-height: 250px; width:100%} 

@media (max-width: 1545px) {

    .main_container .inner{padding:30px 20px;}
    .main_container .section_02 .cont_service .item dl dt{margin:0 0 5px 0;}

}
@media (max-width: 1420px) {

    .main_container .section_02 .cont_service .item dl dt{font-size:18px;}
    .main_container .section_02 .cont_service .item dl dd{font-size:16px;}
    
}
@media (max-width: 1300px) {

    .main_container .section_01 .inner{display: block;}
    .main_container .section_01 .part_01{width:100%;}
    .main_container .section_01 .part_02{width:100%;margin:10px 0 0 0;}
    
    .main_container .section_01 .inner{padding:0 0 20px 0;}
    .main_container .section_01 .cont_appDown{display:flex;align-items: center;justify-content: center; width:100%;height: auto;max-height:100%;padding:10px;}
    .main_container .section_01 .cont_appDown .txt_01{display: flex;align-items: center;font-size:20px;min-height:130px;margin:0;padding: 0px 0  0 130px;background-size:auto 130px;background-position: left center;}
    .main_container .section_01 .cont_appDown .txt_01 span{display: block; padding: 10px 20px;}
    .main_container .section_01 .cont_appDown .qr_btn{display: flex;align-items: center;justify-content: center;}
    .main_container .section_01 .cont_appDown .qr{margin:0;}
    .main_container .section_01 .cont_appDown .qr img{height:130px;}
    .main_container .section_01 .cont_appDown .btn br{display: none;}

}

@media (max-width: 1260px) {

    .main_container .section_02 .inner{display: block;}
    .main_container .section_02 .part_01{width:100%;}
    .main_container .section_02 .part_02{max-width: 100%;margin:30px 0 0 0;}

    .main_container .section_02 .cont_service{margin: 0 -10px;}
    .main_container .section_02 .cont_service .item{padding: 0 10px;}
    .main_container .section_02 .cont_service .item dl{height:310px;}
    .main_container .section_02 .cont_service .item dl dt::before{max-width: 100%;height:190px;}

    .main_container .section_02 .cont_utilizationApp{height:auto;}
    .main_container .section_02 .cont_utilizationApp .slick-slider img {max-height: 320px;max-width: initial;width:100%;}

    .main_container .section_03 .inner{flex-wrap: wrap;}
    .main_container .section_03 .part_01{flex:1;width:calc(50% - 10px);margin:0 10px 0 0;}
    .main_container .section_03 .part_02{flex:1;width:calc(50% - 10px);margin:0 0 0 10px;}
    .main_container .section_03 .part_03{width:100%;margin:30px 0 0 0;}

    .main_container .section_03 .cont_promotional{height:auto;}
    
}

@media (max-width: 1023px) {

    .main_container .inner {padding: 20px 20px;}
    .main_container .tit { font-size: 22px;}

    .main_container .section_01 .cont_mainVisual .slide_controler .slide_paging{font-size:20px}
    .main_container .section_01 .cont_mainVisual .slide_controler .slide_nav .arrow_prev,
    .main_container .section_01 .cont_mainVisual .slide_controler .slide_nav .arrow_next{background-size: 10px auto;}
    .main_container .section_01 .cont_mainVisual .slide_controler .toggleButton{background-size: 12px auto;}
    .main_container .section_01 .cont_appDown .qr{display: none;}

    .main_container .section_03 [class^="cont_"]{padding:10px 20px;}
    .main_container .section_03 .cont_article{height:287px;}
    .main_container .section_03 .cont_article .article_list li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size:16px;}
    .main_container .section_03 .cont_article .article_list li .date{font-size:14px;}
    .main_container .section_03 .cont_faq{min-height:287px;}
    .main_container .section_03 .cont_faq .faq_list li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  text-decoration: none; display: block; font-size:16px; }

}

@media (max-width: 860px) {

    .main_container .section_02 .cont_service .item dl{padding:var(--pd_1);}
    .main_container .section_02 .cont_utilizationApp{padding:var(--pd_1);}

    .main_container .section_03 .part_01{flex: 100%;width:100%;margin:0;}
    .main_container .section_03 .part_02{flex: 100%;width:100%;margin:20px 0 0 0;}
    .main_container .section_03 .cont_article{height:auto;}
    .main_container .section_03 .cont_faq{height:auto;}

}

@media (max-width: 767px) {
    
    .slide_controler .slide_paging{display: none;}

    .main_container .inner{padding:10px;}
    .main_container .tit{font-size:20px;}

    .main_container .section_01 .inner{padding:0 0 10px 0;}
    .main_container .section_01 .part_02{margin:10px 0 0 0;}

    .main_container .section_01 .cont_mainVisual .slide_controler .toggleButton{background-size: 12px auto;}
    .main_container .section_01 .cont_mainVisual .slide_controler .toggleButton.playing{background-size: 12px auto;}
    .main_container .section_01 .cont_mainVisual .slide_controler .toggleButton.paused{background-size: 12px auto;}

    .main_container .section_01 .cont_appDown{display: block;}
    .main_container .section_01 .cont_appDown .qr{display: none;}
    .main_container .section_01 .cont_appDown .txt_01{justify-content: center; margin:0 0 10px 0;min-height:auto;padding: 0px 0 0 0px;background:none;}
    .main_container .section_01 .cont_appDown .txt_01 br{display: none;}
    .main_container .section_01 .cont_appDown .txt_01 span{display: flex; align-items: center;min-height:65px;padding:0 0 0 65px; background: url('../images/renew/m_app_icon.png') no-repeat left center;background-size: auto 60px;}
    .main_container .section_01 .cont_appDown .btn{padding:10px;}
    
    .main_container .section_02 .cont_service{display:block;margin:0;}
    .main_container .section_02 .cont_service .item{width:100%;margin:0 0 10px 0;padding:0;}
    .main_container .section_02 .cont_service .item dl{height:auto;}
    .main_container .section_02 .cont_service .item dl dt{font-size:18px}
    .main_container .section_02 .cont_service .item dt span{display: inline-block;}
    .main_container .section_02 .cont_service .item dl dd{font-size:16px}
    .main_container .section_02 .cont_service .item dl dd br{display: none;}

}

@media (max-width: 420px) {
    
    .slide_controler{flex-direction: column;justify-content: center;}
    .slide_controler .slide_nav{justify-content: center;}
}
