@charset "UTF-8";

.main.header {height: 910px;background: #0089ce url(../images/main_top_bg.png) 50% 50% no-repeat;background-size: 80%;background-position: 0% 101%;}
.main.header .inner {height: 100%}
.top_slide_container {position: relative; overflow: hidden; width: 100%; height: 100%;}
.top_slide_container .top_slide_wrapper {position: relative; height: 100%}
.top_slide_container .top_slide_cont {height: 100%}
.top_slide_container .bg_line:after {display: block; content: ""; position: absolute; left: 50%; bottom: 0; height: 100px; margin-left: -1px; border-left: 2px solid #fff}
.ara_top_txt {}
.ara_top_txt .head_copy {text-align: center; padding-top: 220px; color: #fff; font-size: 20px}
.ara_top_txt .ico_dot.head_copy {padding-top: 82px}
.ara_top_txt .ico_dot:before {display: block; content: ""; height: 143px; background: url(../images/main_top_tit_bg.png)50% 0 no-repeat}
.ara_top_txt .sub_copy {text-align: center;padding-top: 18px;color: #fff;}
.main h1.title {padding-top: 10px; line-height: 1}
.main h1.title span {font-weight: 300}
.main .link_top_area {margin-top: 53px; text-align: center}
.main .link_top_area li {display: inline-block;margin-left: 17px;}
.main .link_top_area li + li {border-left: 1px solid rgba(255,255,255,0.3)}
.main .link_top_area a {display: block; width: 128px; padding-top: 60px; font-size: 18px; color: #fff; font-weight: 800}
.main .link_top_area .ico_monthly {background: url(../images/monthly_icon.png) 50% 0 no-repeat}
.main .link_top_area .ico_discount {background: url(../images/discount_icon.png) 50% 0 no-repeat}
.main .link_top_area .ico_online {background: url(../images/online_icon.png) 50% 0 no-repeat}
.top_slide_container .slide_paging {position: absolute; right: 100px; top: 50%; margin-top: -44px; background: url(../images/btn_dot_bg.png) 50% 0 repeat-y}
.top_slide_container .slide_paging .slide_paging_bullet {display: block; width: 19px; height: 19px; background: url(../images/btn_slide_dot_off.png) 50% 50% no-repeat}
.top_slide_container .slide_paging .slide_paging_bullet + .slide_paging_bullet {margin-top: 15px}
.top_slide_container .slide_paging .slide_paging_bullet.on {background-image: url(../images/btn_slide_dot_on.png)}

/* main_container */
.main_container {}
.main_container .bg_gray {background: #e9e9e9}
.main_cont01 {position:relative; height: 640px}
.main_cont01:after {display: block; content: ""; position: absolute; left: 50%; top: 0; height: 50px; margin-left: -1px; border-left: 2px solid #0089ce}
.main_cont02 {width: 100%; max-width: 1200px; margin: 0 auto; height: 350px}
.main_cont02:after {display: block; content: ""; clear: both}

.main_container .slide_container {position: relative; width: 932px; height: 330px; margin: 0 auto}
.main_container .slide_cont {position: relative; height: 330px; text-align: center}
.main_cont01 .tit {display: block; padding-top: 83px; text-align: center; font-size: 46px; color: #3f6cb4}
.main_cont01 .txt {text-align: center; color: #3f6cb4 }
.main_cont01 .slide_cont {padding-top: 26px}
.main_cont01 .btn_area {text-align: center}
.main_cont01 .btn_area .btn_blue {display: inline-block; width: 198px; height: 70px; padding:0 30px; line-height: 70px; font-size: 20px; color: #fff; background: #0091ea; border-radius: 35px}
.main_cont01 .btn_area .btn_blue span {display: block; background: url(../images/arrow_right.png) 100% 50% no-repeat}
.main_container .slde_btn_next {position: absolute;right: 10%;top: 50%;width: 92px;height: 92px;margin-top: -46px;background: url(../images/btn_slide_next.png) 0 0 no-repeat;}
.main_container .slde_btn_prev {position: absolute;left: 10%;top: 50%;width: 92px;height: 92px;margin-top: -46px;background: url(../images/btn_slide_prev.png) 0 0 no-repeat;}

.slide_cont1 {width: 380px; height: 242px; margin: 0 auto; font-size: 0; color:transparent; background: url(../images/main_slide_cont1.png)}

.main_container .left {float: left; width: 50%;  padding-top: 85px; padding-right: 68px; box-sizing: border-box}
.main_container .right {float: right; position: relative; width: 50%;  padding-top: 85px; padding-left: 90px; box-sizing: border-box}
.main_container .right:after {display: block; content: ""; position: absolute; left: 0; top: 92px; height: 184px; border-left: 1px solid #e0e0e0}
.main_cont02 .txt {font-size: 30px; line-height: 36px; padding-bottom: 20px}
.link_blue {display: block; width: 60px; height: 60px; font-size: 15px; line-height: 60px; color: #fff; text-align: center; border-radius: 50%; background: #0091ea}
.ico_main_cont01 {min-height: 208px; background: url(../images/img_main01.png) 100% 0 no-repeat}
.ico_main_cont02 {min-height: 208px; background: url(../images/img_main02.png) 100% 0 no-repeat}
.m_block {display: inline}

@media (min-width: 767px) and (max-width: 1000px) {
    .main_cont01 {padding-right: 80px; box-sizing: border-box}
    .main_container .slide_container {width: 100%}
}

@media all and (max-width: 993px) {
    .ara_top_txt .sub_copy {font-size: 1.5rem;}
    .m_block {display: block}
    .m_none {display: none}
    .main.header {height: 50vh;margin-top: 68px;background:#0089ce  url(../images/m_main_top_bg.png) no-repeat 0 0;background-size: 88%;background-position: 0% 100%;}
    .ara_top_txt .ico_dot.head_copy {padding-top: 126px;}
    .ara_top_txt .ico_dot:before {height: 50px;margin-bottom: 20px;background-image: url(../images/main_top_tit_bg_m.png);background-size: 50px 50px;}
    .ara_top_txt .head_copy {font-size: 2rem;}
    .top_slide_container .bg_line:after {display: none}
    .top_slide_container .slide_paging {display: none}
    .main .link_top_area {margin-top: 26px}
    .main .link_top_area a {width: 64px;font-size: 2rem;padding-top: 52px;}
    .main .link_top_area .ico_monthly {background-image: url(../images/monthly_icon_m.png);background-size: 100%;}
    .main .link_top_area .ico_discount {background-image: url(../images/discount_icon_m.png);background-size: 100%;}
    .main .link_top_area .ico_online {background-image: url(../images/online_icon_m.png);background-size: 100%;}
    
    .main_cont01 {height: 337px; padding: 0 15px}
    .main_cont01:after {display: none}
    .main_cont01 .tit {padding-top: 33px; font-size: 2.3rem}
    .main_container .slide_container {width: 100%; height: 162px;}
    .main_container .slide_cont {height: 162px; padding-top: 20px}
    .slide_cont1 {width: 190px; height: 121px; background: url(../images/main_slide_cont1_m.png) 0 0 no-repeat; background-size: 190px 121px;}
    .main_container .slde_btn_next {width: 38px; height: 38px; margin-top:-19px; background-image: url(../images/btn_m_slide_next.png); background-size: 38px}
    .main_container .slde_btn_prev {width: 38px; height: 38px; margin-top:-19px; background-image: url(../images/btn_m_slide_prev.png); background-size: 38px}
    .main_cont01 .btn_area .btn_blue {height: 35px; font-size: 1rem; line-height: 35px;}
    .main_cont01 .btn_area .btn_blue span {background-image: url(../images/arrow_right_m.png); background-size: 4px 7px}
    
    .main_cont02 {height: auto; padding: 0 15px; box-sizing: border-box}
    .main_container .left {float: none; width: 100%; padding: 19px 9px 22px; box-sizing: border-box}
    .main_container .right {float: none; width: 100%; padding: 19px 9px 22px; box-sizing: border-box; border-top: 1px solid #e0e0e0}
    .main_container .right:after {display: none}
    .main_cont02 .txt {font-size: 1.5rem; line-height: 1.2; padding-bottom: 10px}
    .link_blue {width: 30px; height: 30px; font-size: 0.7rem; line-height: 30px}
    .ico_main_cont01 {min-height: 104px; background-image:url(../images/img_main01_m.png); background-size: 104px 104px}
    .ico_main_cont02 {min-height: 104px; background-image:url(../images/img_main02_m.png); background-size: 104px 104px}
    .main_cont01_ul {height: 300px;overflow: hidden;}
}