@import"./nav_bar.css";
@import"./footer.css";
@font-face {
    font-family: "F1_bold";
    src: url("../font/Formula1-Bold.otf");
    /* src: url("https://alldata.sgp1.digitaloceanspaces.com/fonts/NotoSerifTC/NotoSerifTC-Light.otf"); */
}

@font-face {
    font-family: "F1_regular";
    src: url("../font/Formula1-Regular.otf");
    /* src: url("https://alldata.sgp1.digitaloceanspaces.com/fonts/NotoSerifTC/NotoSerifTC-Light.otf"); */
}

div.container {
    overflow-y: hidden;
}

#main_header nav.main_nav ul.link_list>li>a.o_f {
    color: black;
    text-decoration: none;
}

#main_header nav.main_nav ul.link_list>li>a.d_e {
    color: rgb(216, 40, 28);
    text-decoration: underline;
}

html {
    overflow-x: hidden;
}

div.pic_container {
    width: 100%;
    /* padding: ; */
    position: relative;
    height: 40vw;
    /* border: 2px solid red; */
}

div.pic_container>h1 {
    font-size: 5vw;
    color: white;
    display: block;
    position: absolute;
    z-index: 1;
    font-family: "F1_bold";
    bottom: 10%;
    margin: 0;
    left: 3%;
    text-shadow: black 0.1em 0.1em 0.2em;
}

div.pic_container>p {
    font-size: 18px;
    color: white;
    display: block;
    position: absolute;
    z-index: 1;
    top: 100%;
    font-family: "F1_regular";
    margin-left: 20px;
}

div.direction_topic {
    font-size: 16px;
    font-family: f1_bold;
    text-align: center;
    margin-bottom: 30px;
    color: white;
    background: rgb(216, 40, 28);
}

div.driving_steps {
    font-size: 12px;
    display: flex;
    /* border: 1px solid green; */
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: hsla(0, 0%, 0%, 0.9);
}

div.step_1 {
    height: 50%;
    width: 62%;
    margin-bottom: 10%;
    /* border: 1px solid black; */
    /* display: inline-block; */
    text-align: center;
    color: white;
}

div.content_1>h2 {
    font-family: f1_regular;
    margin-bottom: 5px;
    margin-top: 0px;
    text-align: center;
}

div.step_1 div.content_1 {
    /* border: 1px solid red; */
    font-size: 16px;
    display: inline-block;
    width: 100%;
    height: 140px;
    margin: 0px;
    vertical-align: top;
    font-family: 'Arimo', sans-serif;
    line-height: 1.5;
    text-align: left;
    /* margin-left: 10px; */
}

div.step_1 img {
    margin-bottom: 20px;
    margin-top: 60px;
}

div.step_2 {
    height: 50%;
    width: 62%;
    margin-bottom: 10%;
    /* border: 1px solid black; */
    /* display: inline-block; */
    text-align: center;
    color: white;
    /* border: 1px solid red; */
}

div.content_2>h2 {
    font-family: f1_regular;
    margin-bottom: 5px;
    margin-top: 0px;
    text-align: center;
}

div.step_2 div.content_2 {
    /* border: 1px solid red; */
    font-size: 16px;
    display: inline-block;
    width: 100%;
    height: 140px;
    margin: 0px;
    vertical-align: top;
    font-family: 'Arimo', sans-serif;
    line-height: 1.5;
    text-align: left;
    /* margin-left: 10px; */
}

div.step_2 img {
    margin-bottom: 20px;
}

div.step_3 {
    height: 50%;
    width: 62%;
    margin-bottom: 10%;
    /* border: 1px solid black; */
    /* display: inline-block; */
    text-align: center;
    color: white;
}

div.content_3>h2 {
    font-family: f1_regular;
    margin-bottom: 5px;
    margin-top: 0px;
    text-align: center;
}

div.step_3 div.content_3 {
    /* border: 1px solid red; */
    font-size: 16px;
    display: inline-block;
    width: 100%;
    height: 140px;
    margin: 0px;
    vertical-align: top;
    font-family: 'Arimo', sans-serif;
    line-height: 1.5;
    text-align: left;
    /* margin-left: 10px; */
}

div.step_3 img {
    margin-bottom: 20px;
}

div.step_4 {
    height: 50%;
    width: 62%;
    margin-bottom: 10%;
    /* border: 1px solid black; */
    /* display: inline-block; */
    text-align: center;
    color: white;
}

div.content_4>h2 {
    font-family: f1_regular;
    margin-bottom: 5px;
    margin-top: 0px;
    text-align: center;
}

div.step_4 div.content_4 {
    /* border: 1px solid red; */
    font-size: 16px;
    display: inline-block;
    width: 100%;
    height: 140px;
    margin: 0px;
    vertical-align: top;
    font-family: 'Arimo', sans-serif;
    line-height: 1.5;
    text-align: left;
    /* margin-left: 10px; */
}

div.step_4 img {
    margin-bottom: 20px;
}

div.sim {
    /* border: 1px solid red; */
    width: 100%;
    position: relative;
    height: 300px;
}

div.sim ul.simulator {
    /* position: absolute; */
    font-family: f1_regular;
    z-index: 1;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    padding: 0;
}

ul.simulator li:nth-child(2) {
    width: 50%;
}

ul.simulator li:nth-child(3) {
    width: 60%;
}

ul.simulator li:nth-child(1) {
    position: absolute;
    right: 0;
}

ul.simulator li>h1 {
    margin: 0;
    margin-left: 20px;
    font-size: 50px;
    font-family: f1_regular;
}

ul.simulator li>h3 {
    font-size: 18px;
    font-family: 'Arimo', sans-serif;
    margin: 0;
    margin-left: 20px;
    margin-top: 10px;
    /* border: 1px solid green; */
}

ul.simulator li:nth-child(4) {
    font-size: 16px;
    font-family: 'Arimo', sans-serif;
    width: 60%;
    line-height: 1.5;
    margin-left: 20px;
    margin-top: 10px;
    /* display: inline; */
    list-style: none;
}

div.briefing {
    /* border: 1px solid red; */
    width: 100%;
    position: relative;
    height: 300px;
    margin-top: 50px;
}

div.briefing ul.briefing_room {
    /* position: absolute; */
    font-family: f1_regular;
    z-index: 1;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    padding: 0;
}

ul.briefing_room li:nth-child(2) {
    width: 50%;
}

ul.briefing_room li:nth-child(3) {
    width: 60%;
}

ul.briefing_room li:nth-child(1) {
    position: absolute;
    right: 0;
}

ul.briefing_room li>h1 {
    margin: 0;
    margin-left: 20px;
    font-size: 50px;
    font-family: f1_regular;
}

ul.briefing_room li>h3 {
    font-size: 18px;
    font-family: 'Arimo', sans-serif;
    margin: 0;
    margin-left: 20px;
    margin-top: 10px;
    /* border: 1px solid green; */
}

ul.briefing_room li:nth-child(4) {
    font-size: 16px;
    font-family: 'Arimo', sans-serif;
    width: 60%;
    line-height: 1.5;
    margin-left: 20px;
    margin-top: 10px;
    /* display: inline; */
    list-style: none;
}

div.sim {
    /* border: 1px solid red; */
    width: 100%;
    position: relative;
    margin-top: 50px;
}

div.fbo ul.lobby {
    /* position: absolute; */
    font-family: f1_regular;
    z-index: 1;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    padding: 0;
}

div.fbo ul.lobby li:nth-child(2) {
    width: 50%;
}

div.fbo ul.lobby li:nth-child(3) {
    width: 60%;
}

div.fbo ul.lobby li:nth-child(1) {
    position: absolute;
    right: 0;
}

div.fbo ul.lobby li>h1 {
    margin: 0;
    margin-left: 20px;
    font-size: 50px;
}

div.fbo ul.lobby li>h3 {
    font-size: 18px;
    font-family: 'Arimo', sans-serif;
    margin: 0;
    margin-left: 20px;
    margin-top: 10px;
    /* border: 1px solid green; */
}

div.fbo li:nth-child(4) {
    font-size: 16px;
    font-family: 'Arimo', sans-serif;
    width: 60%;
    line-height: 1.5;
    margin-left: 20px;
    margin-top: 10px;
    /* display: inline; */
    list-style: none;
}

div.fbo {
    /* position: relative; */
    /* border: 1px solid red; */
    margin-top: 50px;
    width: 100%;
    height: 300px;
}

ul.lobby img.fbo {
    width: 450px;
}

@media (max-width: 1227px) {
    div.fbo ul.lobby li:nth-child(1) {
        position: static;
        right: 0;
        order: -1;
    }
    div.fbo ul.lobby li:nth-child(2) {
        width: 100%;
        text-align: center;
    }
    div.fbo ul.lobby li:nth-child(3) {
        white-space: nowrap;
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }
    ul.lobby {
        justify-content: center;
    }
    div.fbo {
        height: 600px;
    }
    div.briefing ul.briefing_room li:nth-child(1) {
        position: static;
        right: 0;
        order: -1;
    }
    div.briefing ul.briefing_room li:nth-child(2) {
        width: 100%;
        text-align: center;
    }
    div.briefing ul.briefing_room li:nth-child(3) {
        white-space: nowrap;
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }
    ul.briefing_room {
        justify-content: center;
    }
    div.briefing {
        height: 600px;
    }
    div.sim ul.simulator li:nth-child(1) {
        position: static;
        right: 0;
        order: -1;
        /* border: 1px solid red; */
    }
    div.sim ul.simulator li:nth-child(2) {
        width: 100%;
        text-align: center;
    }
    div.sim ul.simulator li:nth-child(3) {
        white-space: nowrap;
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }
    ul.simulator {
        justify-content: center;
    }
    div.sim {
        height: 600px;
    }
}

@media (max-width: 756px) {
    div.sim {
        height: 650px;
    }
    div.briefing ul.briefing_room li:nth-child(3) {
        white-space: normal;
        text-align: center;
    }
    div.sim ul.simulator li:nth-child(3) {
        white-space: normal;
        text-align: center;
    }
    div.fbo ul.lobby li:nth-child(3) {
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 640px) {
    div.fbo li:nth-child(4) {
        width: 100%;
    }
    div.sim li:nth-child(4) {
        width: 100%;
    }
    div.briefing li:nth-child(4) {
        width: 100%;
    }
}

@media (max-width: 500px) {
    div.sim {
        height: 700px;
    }
    div.sim ul.simulator li:nth-child(2) {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    div.fbo {
        height: 700px;
    }
    div.fbo ul.lobby li:nth-child(2) {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    div.briefing {
        height: 650px;
    }
    div.briefing ul.briefing_room li:nth-child(2) {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
}

@media (max-width: 440px) {
    div.sim {
        height: 770px;
    }
    div.fbo {
        height: 700px;
    }
    div.briefing {
        height: 650px;
    }
}

@media (max-width: 390px) {
    div.sim {
        height: 790px;
    }
    div.fbo {
        height: 730px;
    }
    div.briefing {
        height: 680px;
    }
}

@media (max-width: 726px) {
    div.step_1 {
        width: 100%;
    }
    div.step_2 {
        /* border: 1px solid white; */
        height: 400px;
        width: 100%;
    }
    div.step_3 {
        height: 400px;
        width: 100%;
    }
    div.step_4 {
        height: 400px;
        width: 100%;
    }
}

@media (max-width: 376px) {
    html {
        overflow-x: hidden;
    }
    div.step_1 {
        height: 400px;
    }
    div.step_2 {
        height: 440px;
    }
    div.step_3 {
        height: 450px;
    }
}