@charset "utf-8";

/* sec01 */
dt { width: 110px; }
.box { margin: 10px 0 30px 150px; padding: 30px; background: var(--gray-fa); border-radius: 10px; }
.box >  ul { margin-top: 5px; display: flex; justify-content: flex-start; align-items: center; }
.box >  ul > li { padding-right: 20px; }
.box >  ul > li > span { display: inline-block; margin-right: 5px; width: 48px; height: 26px; line-height:26px; font-size: 13px; font-weight: 400; text-align: center;
    color: #fff; border-radius: 26px; background: var(--gray-bd); }
.down_wrap { margin: 60px 0 0 150px; display: flex; justify-content: flex-start; align-items: center; }
.down_wrap > .btn { margin-right: 20px; padding: 0; width: 460px; height: 100px; }
.down_wrap > .btn > a { display: block; width: 100%; height: 100%; }
.down_wrap button { display: block; width: 100%; height: 100%; background: #fff; border-radius: 50px; border: 1px solid var(--border-color); overflow: hidden; text-align: center; }
.down_wrap p { position: relative; padding-left: 50px; line-height: 98px; display: inline-block; font-size: 20px; font-weight: 700; background: #fff; }
.down_wrap p::after { position: absolute; top: 31px; left: 0; width: 35px; height: 35px; display: block; content: ""; border-radius: 50%; }
.down_wrap .down_01 p { color: var(--main-color); }
.down_wrap .down_01 p::after { background: var(--main-color) url(/theme/jahye/images/ico/download_fff.svg) no-repeat center/23px; }
.down_wrap .down_02 p { color: var(--gray-33); }
.down_wrap .down_02 p::after { background: var(--gray-33) url(/theme/jahye/images/ico/download_fff.svg) no-repeat center/23px; }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    dt { width: 91px; }
    .box { margin: 10px 0 30px 111px; padding: 20px; }
    .box >  ul > li > span { width: 45px; height: 24px; line-height:24px; font-size: 12px; }
    .down_wrap { margin: 40px 0 0 111px; }
    .down_wrap > .btn { margin-right: 20px; width: 300px; height: 80px; }
    .down_wrap p { padding-left: 36px; font-size: 15px; line-height: 76px; }
    .down_wrap p::after { top: 24px; width: 28px; height: 28px; }
    .down_wrap .down_01 p::after { background: var(--main-color) url(/theme/jahye/images/ico/download_fff.svg) no-repeat center/19px; }
    .down_wrap .down_02 p::after { background: var(--gray-33) url(/theme/jahye/images/ico/download_fff.svg) no-repeat center/19px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    .box { margin: 10px 0 30px 0px; padding:  20px 15px; }
    .box >  ul { margin-top: 15px; display: block }
    .box >  ul > li { margin: 5px 0 0 -5px; padding-right: 20px; }
    .box >  ul > li > span { width: 42px; height: 24px; line-height:24px; font-size: 12px; }
    .down_wrap { margin: 30px 0 0 0px; flex-wrap: wrap; }
    .down_wrap > .btn { margin: 5px; padding: 0; width: 230px; height: 55px; }
    .down_wrap > .btn:last-child { margin-right: 0px; }
    .down_wrap p { padding-left: 35px; line-height: 53px; font-size: 13px; }
    .down_wrap p::after { top: 15px; width: 26px; height: 26px; }
    .down_wrap .down_01 p::after { background: var(--main-color) url(/theme/jahye/images/ico/download_fff.svg) no-repeat center/17px; }
    .down_wrap .down_02 p::after { background: var(--gray-33) url(/theme/jahye/images/ico/download_fff.svg) no-repeat center/17px; }
}