/* 
NOTICE: 
This CSS file contains customized styles for certain pages. Some components could be used in multiple pages.
Please add comment to each component so we can find what component does this style belong to, 
as we will merge CSS files together and remove unnecessary lines or duplicated lines.
When coping with responsive design, please follow the breakpoint in this file.
This file must be loaded after bootstrap.min.css.
*/

/* Desktop Style */
/*-- Orange dots <ul> --*/
.ul-orange-dot {
    font-size: 1.125rem;
}
.ul-orange-dot .li-orange-dot {
    position: relative;
}
.ul-orange-dot .li-orange-dot::before {
    position: absolute;
    content: "・";
    color: var(--color-orange-dark);
    left: -1.8rem;
}
/*--End of Orange dots <ul> --*/

/*-- External link on page 9003 --*/
.btn--9003 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 40px;
    position: relative;
    padding: 20px 30px;
    border-radius: 35px;
    height: 100%;
}
.btn--9003 .icon {
    height: 42px;
    position: absolute;
    left: 1.5rem;
}
.btn--9003 .btn--text {
    margin-left: 2.5rem;
}
.btn--9003 .btn--text .btn--text_icon {
    height: 12px;
}
/*--End of External link on page 9003 --*/

/* Responsive: Mobile view 390px~768px */
@media (max-width: 767.98px) {
    /*-- External link on page 9003 --*/
    .btn--9003 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 20px;
        border-radius: 25px;
        gap: .5rem;
        font-size: 15px;
    }
    .btn--9003 .icon {
        position: static;
        height: 52px;
    }
    .btn--9003 .btn--text {
        margin-left: 0;
    }
    /*--End of External link on page 9003 --*/
}
/*--END of mobile responsive--*/

/* Responsive: Tablet view 769px~1080px */
@media (min-width: 768px) and (max-width: 1079.98px) {
}
/*--END of table responsive--*/

/* Responsive: Desktop view 1440px~1920px only if necessary */
@media (min-width: 1440px) and (max-width: 1919.98px) {
}
/*--END of desktop responsive--*/

/* Responsive: Extra Large Desktop view > 1920px */
@media (min-width: 1920px) {
}
/*--END of extra large desktop responsive--*/