@import url('./font.css');

body{
    font-family: 'SUIT', sans-serif;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

div{
    box-sizing:border-box;
}

body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

.container{
    width:100%;
    height:100vh;
    margin:0 auto;
    overflow-y: auto;
}

.left_menu{
    position:fixed;
    width:288px;
    height:100%;
    background:#243d80;
    padding-bottom: 50px;
    z-index: 2
}
.left_menu.none{width: 0; transition-duration: .5s; opacity: 0}

.content-wrap{
   width: calc(100% - 288px);
    height:100vh;
    background:white;
    position:relative;
    margin-left: 288px
}

.mt-100{
    margin-top:100px;
}

.mt-60{
    margin-top:60px;
}

.mt-120{
    margin-top:120px;
}

.mw-100{
    max-width:100%;
}

.medium{
    font-weight:600;
}

#home_btn{
    width:100%;
    height:150px;
    background:#192d66;
    display:flex;
    align-items: center;
    justify-content: center;
}

.menu_title{
    font-size:30px;
    color:#b0b3b5;
    margin-bottom:10px;
    text-align:center;
}

.menu_title.active{
    color:white;
}

.menu_subtitle{
    margin-top:20px;
    font-size:24px;
    color:#b0b3b5;
    text-align:center;
    cursor: pointer
}

.menu_subtitle.active{
    color:white;
}

#content_1,#content_2,#content_3,
#content_4,#content_5,#content_6,
#content_7,#content_8,#content_9,
#content_10,#content_11,#content_12,
#content_13,#content_14,#content_15,
#content_14,#content_17,#content_18,#content_19{
    background:white;
    height: 100%;
    position: relative;
}

.title_bg{
    height:150px;
    width:calc(100% - 8.3333vw);
    background-repeat:no-repeat;
    position:relative;
    background-size: cover;
    border-radius: 0 0 120px 0;
    background-position: center right
}

.title_bg p{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:48px;
    font-weight:600;
    color:white;
    left:120px;
}

.content{
    padding:60px 120px;
}
#content_7 .content,
#content_8 .content,
#content_9 .content,
#content_10 .content,
#content_11 .content,
#content_12 .content,
#content_13 .content,
#content_14 .content,
#content_15 .content,
#content_16 .content,
#content_17 .content,
#content_18 .content{
    padding:60px 120px;
}

.center-block{
    display:block;
    margin:0 auto;
}

.mt-10{
    margin-top:10px;
}

.mb-20{
    margin-bottom:20px;
}

.fw-600{
    font-weight:600;
}

.title-text-blue{
    font-size:30px;
    color:#034ea2;
    line-height:1.5;
}

.text-normal{
    font-size:24px;
    color:black;
    font-weight:300;
    line-height:1.5;
}

.text-normal b{
    font-weight:600;
}

.text-gray-box{
    padding:20px 30px;
    background:#eff0f1;
    margin-top:30px;
    text-align: justify;
}

.text-small{
    font-size:18px;
    line-height:1.5;
    color:black;
    word-break: keep-all;
}

.text-small b{
    font-weight:600;
}

#ceo_signature{
    font-weight:300;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:24px;
    margin-top:50px;
}

#ceo_signature span{
    font-size:30px;
    font-weight:600;
    letter-spacing:3px;
    padding-left:30px;
    padding-right:30px;
}

.text-center{
    text-align:center;
}

.footnotes{
    color:#939598;
    position:absolute;
    bottom:40px;
    right:120px;
    font-size:12px;
    z-index:1;
}

.content_4_list{
    display:flex;
    align-items: flex-start;
    justify-content: center;
    gap:5px;
    margin-bottom:30px;
}

.flex-center-evenly{
    display:flex;
    align-items: center;
    justify-content: space-evenly;
}

.flex-center-evenly img{
  max-height:320px;
}

.flex-center img{
  max-height:320px;
}

.title-label{
    font-size:18px;
    background:#e8e9e9;
    padding:6px 12px;
    color:#231f20;
}

.flex-center{
    display:flex;
    align-items: center;
}

.flex-center li{
    width:50%;
}

.gap-10{
    gap:10px;
}

.h-180-f-center{
    height:180px;
    padding-top:0px;
    padding-bottom:0px;
    display: flex;
    align-items: center;
    text-align: justify;
}

#content_17_wrap{
    margin-top:40px;
    height:500px;
    position:relative;
}

#content_17_wrap #content_17_lt{
    position:absolute;
    left:0px;
    top:0px;
}

#content_17_wrap #content_17_lb{
    position:absolute;
    left:0px;
    bottom:0px;
}


#content_17_wrap #content_17_rt{
    position:absolute;
    top:0px;
    right:0px;
}

#content_17_wrap #content_17_rb{
    position:absolute;
    bottom:0px;
    right:0px;
}

#content_17_rt p, #content_17_rb p{
    text-align:right;
}

#left_btn{
    position:absolute;
    top:50%;
    left:20px;
    transform:translateY(-50%);
    cursor:pointer;
    z-index:100;
}

#right_btn{
    position:absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    cursor:pointer;
    z-index:100;
}

#right_btn2{
    position:absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    cursor:pointer;
    z-index:100;
    display: none
}

#right_btn.none{display: none}
#right_btn2.none{display: inline-block}


#main{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    background-position:center center;
}

#main_btn_wrap{
    position:absolute;
    display:flex;
    top:200px;
    left:100px;
    flex-direction: column;
    align-items: center;
}

#main_btn_wrap a{
    background:#243d80;
    padding:6px 12px;
    border-radius:6px;
    font-size:22px;
    color:white;
    text-decoration: none;
    margin-top:20px;
}

#sub_btn_wrap{
    position:absolute;
    display:flex;
    top:500px;
    left:100px;
    flex-direction: column;
    align-items: center;
}

#sub_btn_wrap a{
    background:#243d80;
    padding:6px 12px;
    border-radius:6px;
    font-size:22px;
    color:white;
    text-decoration: none;
    margin-top:0px;
}

#main p{
    font-size:36px;
    position:absolute;
    bottom:100px;
    right:100px;
    text-align:right;
    color:white;
    line-height:1.5;
}

#content_19_wrap{
    width:100%;
    height:100vh;
    background-repeat: no-repeat;
    background-size: cover;
    transition-duration: .5s
}

#content_19_bottom{
    position:absolute;
    bottom:0px;
    width:100%;
    padding-top:40px;
    padding-bottom:40px;
    padding-left:80px;
    background:rgba(255,255,255,0.85);
}

#content_19_flex{
    display:flex;
    gap:30px;
    margin-top:20px;
}

#content_19_contact{
    font-size:20px;
    color:#243d80;
    font-weight:600;
}

.content_19_text{
    margin-bottom:10px;
    font-size:20px;
}

.content_19_text span{
    font-weight:600;
    margin-right:10px;
    display:inline-block;
}

#content_19_logo{
    position:absolute;
    top:300px;
    left:100px;
}

.content img.center-block.sub100{margin: 0}

.le50{margin-left: 100px}

@media only screen and (max-width: 1640px) {
	
	
	.mt-100{margin-top: 50px}
	
	.le50{margin-left: 0px}
    .container{
        width:100vw;
    }
    .content-wrap{width:calc(100vw - 288px);}
    .content{
        padding:30px;
    }
    .title_bg{
        height:80px;
    }
    .title_bg p{
        left:100px;
        font-size:25px;
        transform: translateY(-50%);
    }
    
    #content_19_bottom{padding-left: 100px}

    .mt-120{
        margin-top:40px;
    }

    #home_btn{
        height:80px;
    }

    .content_4_list li{
        width:12%;
    }

    .content_4_list li img{
        width:100%;
    }

    .flex-center-evenly img{
        max-width:100%;
    }

    .center-block{
        max-width:100%;
    }

    .h-180-f-center{
        min-height:180px;
        height:auto;
    }

    #main{
        width:100vw;
        height:100vh;
        background-repeat: no-repeat;
        background-size:cover;
        position:relative;
    }

    #main_btn_wrap{
        position:absolute;
        display:flex;
        top:200px;
        left:100px;
        flex-direction: column;
        align-items: center;
    }

    #main_btn_wrap a{
        background:#243d80;
        padding:6px 12px;
        border-radius:6px;
        font-size:22px;
        color:white;
        text-decoration: none;
        margin-top:20px;
    }

    #main p{
        font-size:36px;
        position:absolute;
        bottom:100px;
        right:100px;
        text-align:right;
        color:white;
        line-height:1.5;
    }
    
    .content-wrap{padding-bottom: 30px; overflow-y: auto; height: auto; min-height: 100vh;}
	.footnotes{bottom: 20px; right: 100px}
	.menu_title{font-size: 20px;}
	.menu_subtitle{font-size: 17px}
	
	.title-text-blue{font-size: 20px}
	.text-normal{font-size: 16px}
	.text-small{font-size: 14px; word-break: keep-all}
	.content .flex-center img{max-height: 290px}
	
	#ceo_signature{font-size: 16px;}
	#ceo_signature span{font-size: 20px}
	
	#content_19_logo{top: 20%}
	#sub_btn_wrap {
    top: auto;
    bottom: 40%;}
	
	#content_1 .content{padding: 30px 100px}
	#content_2 .content{padding: 30px 100px}
	#content_3 .content{padding: 30px 100px}
	#content_7 .content, #content_8 .content, #content_9 .content, #content_10 .content, #content_11 .content, #content_12 .content, #content_13 .content, #content_14 .content, #content_15 .content, #content_16 .content, #content_17 .content, #content_18 .content {
    padding: 30px 100px;
}
	.content img{max-height: 700px}
	
	.title-label{font-size: 14px}
	
	.content img.center-block{max-height: 290px}
	
	.content .flex-center-evenly img{max-height: 290px}
	
	.content img.center-block.sub100{max-height: inherit}


}

@media only screen and (max-width: 1380px) {
	
	img{max-width: 100%}
	
	.content-wrap{padding-bottom: 30px; overflow-y: auto; height: auto; min-height: 100vh;}
	.footnotes{bottom: 20px; right: 100px}
	.menu_title{font-size: 20px;}
	.menu_subtitle{font-size: 17px}
	
	.title-text-blue{font-size: 20px}
	.text-normal{font-size: 16px}
	.text-small{font-size: 14px; word-break: keep-all}
	.content .flex-center img{max-height: 290px}
	
	#ceo_signature{font-size: 16px;}
	#ceo_signature span{font-size: 20px}
	
	#content_19_logo{top: 20%}
	#sub_btn_wrap {
    top: auto;
    bottom: 40%;}
	
	#content_1 .content{padding: 30px 100px}
	#content_2 .content{padding: 30px 100px}
	#content_3 .content{padding: 30px 100px}
	.content{padding: 30px 100px}
	.content img{max-height: 700px}
	
	.title-label{font-size: 14px}
	
	.content img.center-block{max-height: 290px}
	
	.content .flex-center-evenly img{max-height: 290px}
	.content img.center-block.sub100{max-height: inherit}
	
	
	
	
}


.mob_menu{display:none;}

@media only screen and (max-width: 1200px) {

.flex-center {
    display: flex;
    align-items: flex-start;
}

.content img.center-block {
    max-height: 150px;
}

.h-180-f-center {
    min-height: 200px;
    height: auto;
    padding: 10px;
}

}

@media only screen and (max-width: 768px) {

    .container{
        width:100%;
    }

    .mt-80{
        margin-top:0px;
    }

    .left_menu{
        display:none !important;
    }
    

    .flex-center-evenly img{
      max-height:none;
    }

    .title_bg p{
        left:30px;
    }

    .mob_menu{display:block;}

    #mob_menu_header{
        width:100%;
        background:#192d66;
        display:flex;
        padding-top:10px;
        padding-bottom:10px;
    }

    #mob_menu_header img{
        height:40px;
        display:block;
        margin:0 auto;
    }

    #mob_menu_list_wrap{
        background:#243d80;
    }


    #mob_menu_list_wrap ul{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .menu_subtitle{
        font-size: 1.2rem;
        font-weight: 400;
        font-family: 'Barlow';
        color: #b0b3b5;
        padding-top:20px;
        padding-bottom:20px;
        padding-left:0;
        height:auto;
        line-height:inherit;
    }

    .menu_subtitle.active{
        background:none;
    }

    .content-wrap{
        width:100%;
        height:auto;
        float:none;
        margin-left: 0
    }

    .content{
        width:100%;
        height:auto;
        float:none;
    }

    .title_bg{
        background-size:cover;
    }

    .footnotes{
        display:none;
    }

    .title-text-blue{
        font-size:1.5rem;
    }

    .text-normal{
        font-size:1.2rem;
    }

    .text-small{
        font-size:1.0rem;
    }

    .content_4_list {
        flex-direction: column;
    }

    .content_4_list li{
        width:80%;
    }

    .flex-center-evenly {
        flex-direction: column;
        gap:30px;
    }

    #content_7 .content, #content_8 .content, #content_9 .content, #content_10 .content, #content_11 .content, #content_12 .content, #content_13 .content, #content_14 .content, #content_15 .content, #content_16 .content, #content_17 .content, #content_18 .content{
        padding:15px;
    }

    .flex-center{
        flex-direction: column;
        gap:30px;
    }

    .flex-center li{
        width:80%;
    }

    #left_btn,#right_btn{position:fixed; width:20px;}
    
    #content_17_wrap{
        height:auto;
    }

    #content_17_wrap #content_17_lt,#content_17_wrap #content_17_lb,#content_17_wrap #content_17_rt, #content_17_wrap #content_17_rb{
        position:relative;
        left:0px;
        right:0px;
        top:0px;
        bottom:0px;
        margin-top:10px;
    }

    .title-label{
        font-size:1.0rem;
    }

    #content_17_rt p, #content_17_rb p,#content_17_lt p, #content_17_lb p{
        text-align:center;
    }

    #main{
        width:100vw;
        height:100vh;
        background-repeat: no-repeat;
        background-size:cover;
        position:relative;
    }

    #main_btn_wrap{
        position:absolute;
        display:flex;
        top:100px;
        width:80%;
        left:50%;
        transform:translateX(-50%);
        flex-direction: column;
        align-items: center;
    }

    #main_btn_wrap img{
        max-width:100%;
    }

    #main_btn_wrap a{
        background:#243d80;
        padding:6px 12px;
        border-radius:6px;
        font-size:1.5rem;
        color:white;
        text-decoration: none;
        margin-top:20px;
    }

    #main p{
        font-size:1.8rem;
        position:absolute;
        bottom:100px;
        left:50%;
        transform:translateX(-50%);
        text-align:center;
        color:white;
        line-height:1.5;
        width:100%;
    }

    #content_19_wrap{
        width:100vw;
        height:100vh;
        background-repeat: no-repeat;
        background-size:cover;
        position:relative;
    }

    #content_19_logo{
        width:80%;
        top:100px;
        left:50%;
        transform:translateX(-50%);
    }

    #content_19_flex{
        flex-direction: column;
        align-items: center;
    }

    #content_19_bottom{
        padding:20px;
    }

    #content_19_contact{
        text-align:center;
    }

}