@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

/* con-title : 52(40), 40(32), 32(24), 24(20)*/
/* section-title : 24, 20, 16, 16*/

#header{background-color: rgba(0, 0, 0, 0.8);}

/* about */
#intro{position: relative; padding: 241px 0 120px 0; background-color: #000; }
#intro .sub_title{position: relative; top: -100px; opacity: 0;}
#intro .intro_top{padding: 0 8%;}
#intro .intro_top .con_title{position: relative; margin-bottom: 130px; top: -50px; opacity: 0;}
#intro .intro_banner{position: relative; background-image: url(../img/about_banner.jpg); background-size: cover; background-position: center; width: 100%; height: 516px; margin-bottom: 115px;}
#intro .intro_banner img{position: absolute; right: 10%; bottom: -100px; opacity: 0;}
#intro .intro_bottom{position: relative; padding: 0 8%; bottom: -100px; opacity: 0;}
#intro .intro_bottom .p1{font-size: 2rem; font-weight: 700; line-height: 1.6em; color: #fff; margin-bottom: 32px; width: 60%;}
#intro .intro_bottom .p2{font-size: 1.5rem; line-height: 1.6em; color: #fff; width: 60%;}

/* mission */
#mission{position: relative; padding: 120px 8% 100px 8%; background-color: #000;}
#mission .con_title{font-size: 40px; margin-bottom: 172px;}
#mission .mission_list{display: flex; width: 76%; justify-content: space-between; margin-left: auto;}
#mission .mission_list li{width: 27%; position: relative; bottom: -100px; opacity: 0;}
#mission .mission_list li img{margin-bottom: 90px; width: 80%;}
#mission .mission_list li .section_title{margin-bottom: 12px; font-size: 24px;}
#mission .mission_list li h3{font-size: 2vw; font-weight: 700; line-height: 1.5em; color: #fff;}

/* vision */
#vision{position: relative; padding: 100px 8% 100px 8%; background-color: #000;}
#vision .con_title{font-size: 40px;}
#vision div{width: 76%; margin-left: auto;}
#vision div img{width: 100%; margin-bottom: 44px;}
#vision div .section_title{margin-bottom: 18px;}
#vision div h3{font-size: 40px; color: #fff; font-weight: 700;}

/* value */
#value{position: relative; padding: 100px 8% 200px 8%; background-color: #000;}
#value .con_title{font-size: 40px; margin-bottom: 174px;}
#value .value_list{display: flex; justify-content: space-around; position: relative; bottom: -100px; opacity: 0;}
#value .value_list li{width: 33.3%; padding: 0 4%; border-right: 2px solid #0E0E0E; display: flex; flex-direction: column; justify-content: space-between;}
#value .value_list li:last-child{border-right: none;}
#value .value_list li .section_title{margin-bottom: 12px;}
#value .value_list li h3{font-size: 1.8vw; color: #fff; font-weight: 700; line-height: 1.5em; margin-bottom: 50px; width: 66%; word-break: keep-all;}
#value .value_list li p{color: #bbbbbb;}
#value .value_list li .value_icon{margin-top: 58px; margin-left: auto;}

/* global */
#global{position: relative; padding: 174px 8% 143px 8%;}
#global .con_title{color: #000; width: 40%; font-size: 52px;}
#global .global_title{display: flex; justify-content: space-between; margin-bottom: 64px;}
#global .global_title .more_btn2{color: #000; align-self: flex-end;}
#global .global_map{position: relative; width: 100%;}
#global .global_map>img{width: 100%;}
#global .map_icon1{position: absolute; top: calc(289 / 708 * 100%); left: calc(560 / 1480 * 100%);}
#global .map_icon2{position: absolute; top: calc(330 / 708 * 100%); left: calc(505 / 1480 * 100%);}
#global .map_icon3{position: absolute; top: calc(392 / 708 * 100%); left: calc(474 / 1480 * 100%);}
#global .map_icon4{position: absolute; top: calc(308 / 708 * 100%); right: calc(316 / 1480 * 100%);}
#global .map_icon>img{position: relative; cursor: pointer; width: 22px; height: 22px;}
#global .map_overbox{position: absolute; padding: 16px 4px; background-color: #000; width: 150px; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); border-radius: 4px; display: none; z-index: 2; opacity: 0;}
#global .map_overbox p{font-size: 14px; text-align: center; color: #bbb;}
#global .map_overbox p:nth-child(2){font-size: 18px; font-weight: 700; color: #fff;}
#global .map_overbox p.america{font-size: 18px; font-weight: 700; color: #fff;}

#global .map_icon1 .map_overbox{display: block; opacity: 1;}
#global .map_icon2 .map_overbox{bottom: calc(-270% - 32px);}
#global .map_icon3 .map_overbox{bottom: calc(-270% - 32px);}

/* aboutBanner */
#aboutBanner{position: relative; width: 100%; height: 503px; background-image: url(../img/about_mini.jpg); background-size: cover; background-position: center; padding: 0 8%; box-sizing: border-box;}
#aboutBanner .con_title{padding-top: 192px; margin-bottom: 12px;}

@media screen and (max-width:1335px) {
    #intro .intro_top .con_title{margin-bottom: 190px;}
    #intro .intro_banner{height: 550px;}
}

@media screen and (max-width:1200px){
    #intro .sub_title{position: static; opacity: 1;}
    #intro .intro_top .con_title{position: static; opacity: 1;}
    #intro .intro_banner{position: relative; top: 0; opacity: 1;}
    #intro .intro_banner img{position: absolute; bottom: 0; opacity: 1;}
    #intro .intro_bottom{position: static; opacity: 1;}
    #mission .mission_list li{position: static; opacity: 1;}
    #value .value_list{position: static; opacity: 1;}

    #intro .intro_bottom .p1{font-size: 24px; width: 80%;}
    #intro .intro_bottom .p2{font-size: 20px; width: 80%;}
    
    #mission .mission_list{width: 90%;}
    #mission .con_title{margin-bottom: 86px;}
    #mission .section_title{font-size: 20px !important;}
    #mission h3{font-size: 24px !important;}
    #vision div{width: 90%; margin-top: 86px;}
    #vision div h3{font-size: 32px;}

    #value .con_title{margin-bottom: 86px;}
    #value .value_list li{padding: 0 2%;}
    #value .value_list li:nth-child(1){padding-left: 0;}
    #value .value_list li:nth-child(3){padding-right: 0;}
    #value .value_list h3{font-size: 24px !important;}

    #global .con_title{font-size: 40px;}
}

@media screen and (max-width:900px){
    #intro{padding: 109px 0 32px 0;}
    #intro .intro_top{padding: 0 4%;}
    #intro .intro_top .con_title{margin-bottom: calc(80px + 15vw);}
    #intro .intro_banner{height: 65vw; margin-bottom: 42px;}
    #intro .intro_banner img{width: 100%; left: calc(50% - 10px); transform: translateX(-50%);}
    #intro .intro_bottom{padding: 0 4%;}
    #intro .intro_bottom .p1{width: 100%; font-size: 24px; margin-bottom: 24px;}
    #intro .intro_bottom .p2{width: 100%; font-size: 16px;}

    #mission{padding: 64px 4% 32px 4%;}
    #mission .con_title{font-size: 32px; margin-bottom: 43px}
    #mission .mission_list{flex-direction: column; justify-content: center; align-items: center; width: 100%;}
    #mission .mission_list li{width: 50%; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 60px;}
    #mission .mission_list li:first-child{margin-top: 0;}
    #mission .mission_list li img{margin-bottom: 24px; width: 60%;}
    #mission .mission_list li .section_title{margin-bottom: 4px; font-size: 16px;}
    #mission .mission_list li h3{font-size: 24px;}

    #vision{padding: 64px 4% 32px 4%;}
    #vision .con_title{font-size: 32px;}
    #vision div{width: 100%; margin-top: 24px;}
    #vision div h3{font-size: 24px;}

    #value{padding: 64px 4% 52px 4%;}
    #value .con_title{font-size: 32px; margin-bottom: 24px;}
    #value .value_list{flex-direction: column;}
    #value .value_list li{width: 100%; border-right: none; padding: 24px 0;}
    #value .value_list li h3{margin-bottom: 24px; width: 100%;}
    #value .value_list li .value_icon{margin-top: 12px; width: 36px;}

    #global{padding: 96px 4% 64px 4%;}
    #global .global_title{display: block;}
    #global .con_title{width: 100%; margin-bottom: 8px; font-size: 32px;}
    #global .map_icon img{width: 15px; height: 15px;}

    #aboutBanner{height: 225px; padding: 0 4%;}
    #aboutBanner .con_title{padding-top: 86px; margin-bottom: 4px;}
}

@media screen and (max-width:600px) {
    #intro .intro_top .con_title{margin-bottom: calc(50px + 15vw);}
    #intro .intro_bottom .p1{font-size: 18px;}
    #intro .intro_bottom .p2{font-size: 16px;}

    #mission .con_title{font-size: 20px;}
    #mission .mission_list li .section_title{font-size: 16px !important;}
    #mission .mission_list li h3{font-size: 20px !important;}
    #mission .mission_list li img{width: 80%;}
    
    #vision .con_title{font-size: 20px;}
    #vision div h3{font-size: 18px;}
    
    #value .con_title{font-size: 20px;}
    #value .value_list li h3{font-size: 20px !important;}

    #global .global_title .con_title{font-size: 20px;}
    #global .map_icon img{width: 11px; height: 11px;}
    #global .map_icon .map_overbox{padding: 8px 0;}
    #global .map_icon .map_overbox p{font-size: 14px;}
}




/* history */
#history{background: linear-gradient(360deg, rgba(12,12,12,1) 0%, rgba(12,12,12,0) 100%), #000;}
#history .history_title .sub_title{position: relative; top: -30px; opacity: 0;}
#history .history_title .con_title{font-size: 52px; position: relative; top: -30px; opacity: 0;}
#history .history_title{margin-bottom: 100px; padding: 221px 8% 0 8%;}
#history .history_title p{font-size: 32px; font-weight: 700; margin-top: 24px; position: relative; top: 30px; opacity: 0;}
#history .history_banner{height: 516px; background-image: url(../img/history_banner.jpg); background-position: center; background-size: cover; position: relative; top: 30px; opacity: 0;}
#history .history_row1{display: flex;}
#history .history_row2{display: flex;}
#history .history_row3{display: flex;}

#history .history_con{padding: 178px 8%;}
#history .history_left{position: sticky; top: 150px; align-self: flex-start; margin-bottom: 150px;}
#history .history_left .season{display: block; font-size: 40px; color: #008CFF; margin-bottom: 45px; font-weight: 700;}
#history .history_left .con_title{font-size: 52px;}

#history .history_right{width: 50%; border-left: 1px solid #242424; margin-left: auto; padding-top: 80px;}
#history .history_right div{padding-left: 100px; margin-bottom: 178px;}
#history .history_right div>img{max-width: 100%;}
#history .history_right div>img.history_big{max-width: 80%;}
#history .history_year{position: relative; font-size: 40px; color: #fff; font-weight: 700; margin-bottom: 30px; transition-duration: 0.5s;}
#history .history_year::before{content: ''; position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; top: 20px; left: calc(-5px - 100px)}
#history .history_list{font-size: 20px; color: #fff; margin-bottom: 60px;}
#history .history_list li{margin-bottom: 12px;}

@media screen and (max-width:1200px) {
    #history .history_title .sub_title{position: static; opacity: 1;}
    #history .history_title p{position: static; opacity: 1;}
    #history .history_banner{position: static; opacity: 1;}

    #history .history_title .con_title{font-size: 40px; position: static; opacity: 1;}

    #history .history_left .season{font-size: 32px;}
    #history .history_left .con_title{font-size: 40px;}
    #history .history_year{font-size: 32px;}
    #history .history_year::before{left: calc(-5px - 60px); top: 14px;}

    #history .history_right div{padding-left: 60px;}
    #history .history_list{font-size: 16px;}
}

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

    #history .history_title{margin-bottom: 45px; padding: 221px 4% 0 4%}
    #history .history_title .con_title{font-size: 32px;}
    #history .history_title p{font-size: 24px !important;}
    #history .history_banner{height: 300px;}

    #history .history_con{padding: 72px 4%;}
    #history .history_row1{display: block;}
    #history .history_row2{display: block;}
    #history .history_row3{display: block;}

    #history .history_left{position: static; margin-bottom: 45px;}
    #history .history_left .season{font-size: 24px;}
    #history .history_left .con_title{font-size: 32px;}
    #history .history_right{width: 100%; margin-left: 0;}
    #history .history_right div{margin-bottom: 89px;}
    #history .history_year{font-size: 24px;}
}

@media screen and (max-width:600px) {
    #history .history_title{margin-bottom: 45px; padding: 109px 4% 0 4%}

    #history .history_title .con_title{font-size: 24px;}
    #history .history_banner{height: 200px;}

    #history .history_left .season{font-size: 20px; margin-bottom: 20px;}
    #history .history_left .con_title{font-size: 24px;}
    #history .history_year{font-size: 24px;}
    #history .history_year::before{left: calc(-5px - 30px); top: 10px;}

    #history .history_right{padding-top: 40px;}
    #history .history_right div{padding-left: 30px;}
    #history .history_right div>img{max-width: 90%;}
    #history .history_right div>img.history_big{max-width: 70%;}
    #history .history_list{font-size: 14px; margin-bottom: 45px;}
}





/* product */
#indyIntro{position: relative; padding-top: 221px; background-color: #000;}
#indyIntro .indy_title{padding: 0 8%; margin-bottom: 100px;}
#indyIntro .indy_title .sub_title{position: relative; top: -80px; opacity: 0;}
#indyIntro .indy_title .con_title{margin-bottom: 24px; font-size: 52px; position: relative; top: -80px; opacity: 0;}
#indyIntro .indy_title p{font-size: 32px; font-weight: 700; position: relative; top: 80px; opacity: 0;}
#indyIntro .indy_banner{height: 516px; background-image: url(../img/indy_banner.jpg); background-position: center; background-size: cover; position: relative; top: 80px; opacity: 0;}

#indyVideo{background-color: #000; padding: 178px 0 100px 0;}
#indyVideo .con_title{padding-left: 8%; margin-bottom: 45px;}
#indyVideo>div{width: 70%; height: 700px; margin: 0 auto;}

#indyKeyword{background-color: #000; padding: 100px 8%}
#indyKeyword .con_title{margin-bottom: 45px;}
#indyKeyword .indy_keyword{display: flex; width: 100%; gap: 24px 0; flex-wrap: wrap; justify-content: space-between;}
#indyKeyword .indy_keyword li{padding: 56px 47px; box-sizing: border-box; background-color: #171717; border-radius: 12px; width: 32%; position: relative; top: 80px; opacity: 0;}
#indyKeyword .indy_keyword li img{max-width: 30%; margin-bottom: 60px;}
#indyKeyword .indy_keyword li span{display: block; font-size: 20px; font-weight: 700; color: #888; margin-bottom: 8px;}
#indyKeyword .indy_keyword li h3{font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 24px;}
#indyKeyword .indy_keyword li p{color: #bbb;}

#indytools{position: relative; padding: 100px 8%; display: flex; background-color: #000; justify-content: space-between; align-items: center;}
#indytools .indytools_img{width: 50%;}
#indytools .indytools_img ul{display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between;}
#indytools .indytools_img ul li{box-sizing: border-box; padding: 31px 35px; border: 1px solid #242424; border-radius: 12px; width: 49%; margin-bottom: 2%;}
#indytools .indytools_img ul li img{width: 100%;}
#indytools .indytools_text{width: 43%; position: relative; left: 80px; opacity: 0;}
#indytools .indytools_text .con_title{margin-bottom: 24px;}
#indytools .indytools_text .more_btn{margin-top: 72px;}


#indyInfo{background-color: #000; padding: 100px 0; overflow: hidden;}
#indyInfo .con_title{padding-left: 8%; margin-bottom: 45px;}
#indyInfo .info_wrap{padding-left: 8%;}
#indyInfo .info_bg{background-color: #171717; border-radius: 12px 0 0 12px; padding: 88px 9% 88px 0; display: flex;}

#indyInfo .indy_sort ul{width: 110%; display: flex; flex-wrap: wrap; gap: 16px 8px; margin-bottom: 72px;}
#indyInfo .indy_sort ul li button{display: block; font-size: 16px; color: #666; position: relative; padding: 8px 8px; border-radius: 20px; width: 110px; background-color: #242424;}
#indyInfo .indy_sort ul li button:hover{background-color: #333;}
/* #indyInfo .indy_sort ul li button::before{content: ''; display: block; width: 8px; height: 8px; background-color: #666; position: absolute; top: 8px; left: -20px; border-radius: 4px;} */
#indyInfo .indy_sort ul li.select button{font-weight: 700; color: #000; background-color: #fff;}
/* #indyInfo .indy_sort ul li button.select::before{background-color: #008CFF;} */

#indyInfo .indy_info{min-width: 35%;}
#indyInfo .indy_info h2{font-size: 52px; color: #fff; margin-bottom: 45px;}
#indyInfo .indy_info h2>span{font-size: 24px; color: #888; font-weight: 400;}
#indyInfo .indy_info ul li>button img{margin-left: 8px;}
#indyInfo .indy_tb{width: 100%;}
#indyInfo .indy_tb td{border-bottom: 1px solid #242424; width: 50%; color: #fff; padding: 18px 0; padding-left: 10px; white-space: nowrap; font-size: 18px; box-sizing: border-box;}
#indyInfo .indyCB{margin-bottom: 190px;}
#indyInfo .indy_tb td.indy_tb_sort{padding-left: 0; color: #aaa;}
#indyInfo .indy_img{width: 43%; display: flex; justify-content: center; align-items: center; padding: 0 8%; box-sizing: border-box;}
#indyInfo .indy_img img{max-width: 100%; position: relative; left: 80px; opacity: 0; display: none;}
#indyInfo .indy_info>ul>li{position: relative; left: 80px; opacity: 0; display: none;}

#indyInfo .indy_img img:first-child{display: block; left: 0; opacity: 1;}
#indyInfo .indy_info>ul>li:first-child{display: block; left: 0; opacity: 1;}

#download{padding: 100px 8%; background-color: #000; display: flex; justify-content: space-between;}
#download .download{width: 75%; background-color: #0c0c0c; border: 1px solid #242424; border-radius: 8px; padding: 48px 44px; color: #bbb; display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 700;}
#download .download>div{position: relative}
#download .download .download_hover{position: absolute; top: 0; left: 0; opacity: 0;}
#download .download:hover{color: #008CFF; border-color: #008CFF;}
#download .download:hover .download_hover{opacity: 1;}

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

    #indyIntro .indy_title .sub_title{position: static; opacity: 1;}
    #indyIntro .indy_title .con_title{font-size: 40px; position: static; opacity: 1;}
    #indyIntro .indy_title p{font-size: 32px; position: static; opacity: 1;}
    #indyIntro .indy_banner{position: static; opacity: 1;}

    #indyVideo>div{height: 500px;}

    #indyKeyword .indy_keyword li:first-child{width: 100%;}
    #indyKeyword .indy_keyword li{padding: 32px; width: 48.5%; position: static; opacity: 1;}

    #indytools{display: block;}
    #indytools .indytools_img{width: 100%; margin-bottom: 45px;}
    #indytools .indytools_text{width: 80%; position: static; opacity: 1;}
    #indytools .indytools_text .more_btn{margin-top: 72px;}

    #indyInfo .info_wrap{padding: 0 8%;}
    #indyInfo .info_bg{display: block; border-radius: 12px; padding: 52px 44px;}
    #indyInfo .indy_img{width: 100%; margin-bottom: 52px;}
    #indyInfo .indy_img img{max-width: 40%;}
    #indyInfo .indy_info h2{font-size: 40px;}
    #indyInfo .indy_info h2>span{font-size: 20px;}
    #indyInfo .indy_info .indy_tb td{font-size: 16px; padding-left: 0;}
    #indyInfo .indy_sort ul{width: 100%;}

    #download{padding: 0 8%;}
    #download .download{width: 70%; padding: 32px 28px; font-size: 20px;}
}

@media screen and (max-width:901px) {
    #indyIntro{padding-top: 109px;}
    #indyIntro .indy_title{padding: 0 4%; margin-bottom: 45px;}
    #indyIntro .indy_title .con_title{font-size: 32px;}
    #indyIntro .indy_title p{font-size: 24px;}
    #indyIntro .indy_banner{height: 300px;}

    #indyVideo{padding: 72px 0 36px 0;}
    #indyVideo .con_title{padding-left: 4%;}
    #indyVideo>div{width: 92%; margin: 0 auto; height: 400px;}

    #indyKeyword{padding: 36px 4%;}
    #indyKeyword .indy_keyword{display: block;}
    #indyKeyword .indy_keyword li{width: 100%; margin-bottom: 20px;}
    #indyKeyword .indy_keyword li img{width: 60px; height: 60px; margin-bottom: 24px;}

    #indytools{padding: 36px 4%;}
    #indytools .indytools_text{width: 100%;}

    #indyInfo{padding: 36px 0 72px 0;}
    #indyInfo .con_title{padding-left: 4%;}
    #indyInfo .info_wrap{padding: 0 4%;}
    #indyInfo .info_wrap .info_bg{padding: 52px 32px;}
    #indyInfo .indy_sort ul{margin-bottom: 32px;}

    #download{display: block; padding: 0 4% 90px 4%;}
    #download .download{width: 100%; margin-top: 24px;}
}

@media screen and (max-width:601px) {
    #indyIntro .indy_title .con_title{font-size: 24px;}
    #indyIntro .indy_title p{font-size: 20px;}
    #indyIntro .indy_banner{height: 200px;}

    #indyVideo>div{width: 100%; height: 300px;}
    #indyVideo .con_title{margin-bottom: 24px;}

    #indyKeyword .con_title{margin-bottom: 24px;}
    #indyKeyword .indy_keyword li{padding: 24px;}
    #indyKeyword .indy_keyword li span{font-size: 16px;}
    #indyKeyword .indy_keyword li h3{font-size: 20px;}

    #indytools .indytools_img{margin-bottom: 24px;}
    #indytools .indytools_img ul li{padding: 16px;}
    #indytools .indytools_text .more_btn{margin-top: 48px;}

    #indyInfo .con_title{margin-bottom: 24px;}
    #indyInfo .info_wrap .info_bg{padding: 48px 16px;}
    #indyInfo .indy_img img{max-width: 60%;}
    #indyInfo .indy_info h2{font-size: 24px; margin-bottom: 24px;}
    #indyInfo .indy_info h2>span{font-size: 16px;}
    #indyInfo .indy_info .indy_tb td{font-size: 13px;}
    #indyInfo .indy_sort ul{margin-top: 24px;}

    #download{padding-bottom: 48px;}
    #download .download{font-size: 16px; padding: 16px 8px;}
}


/* location */
#location{position: relative; padding: 221px 8% 32px 8%; background-color: #000;}
#location .sub_title{position: relative; top: -80px; opacity: 0;}
#location>.con_title{font-size: 52px; position: relative; top: -80px; opacity: 0;}
#location .location_list{display: flex; justify-content: space-between; margin-top: 130px; position: relative; top: 80px; opacity: 0;}
#location .location_scroll{top: 0; opacity: 1;}
#location .location_list h2{position: relative;}
#location .location_list h2::after{content: ''; display: block; width: 8px; height: 65%; position: absolute; top: 50%; transform: translateY(-50%); right: -32px; background-color: #008CFF;}
#location .location_list .location_map{width: 75%;}
#location .location_list .location_map .location_map_wrap{width: 100%; height: 500px; border-radius: 12px; overflow: hidden;}
#location .location_info{margin-top: 45px;}
#location .location_info>div{display: flex; margin-bottom: 24px;}
#location .location_info>div h3{width: 15%; font-size: 18px; color: #fff;}
#location .location_info>div address{font-size: 18px; color: #fff; line-height: 1.6em;}
#location .location_info>div p{font-size: 18px; color: #fff;}
#location>ul{margin-top: 130px; display: flex; justify-content: space-between; flex-wrap: wrap;}
#location>ul>li{width: 24%; padding: 35px 28px; background-color: #171717; border-radius: 8px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;}
#location>ul>li>div{margin-bottom: 24px;}
#location>ul>li>div .location_global{display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px;}
#location>ul>li>div .location_global h3{font-size: 24px; color: #fff;}
#location>ul>li p{font-size: 16px; line-height: 1.5em; color: #ccc;}
#location span.bold{font-weight: 700;}

@media screen and (max-width:1200px) {
    #location .sub_title{position: static; opacity: 1;}
    #location>.con_title{font-size: 40px; position: static; opacity: 1;}
    #location .location_list{position: static; opacity: 1;}
    #location .location_list .location_map .location_map_wrap{height: 400px;}
    #location>ul>li{width: 49%; margin-bottom: 2%;}
}

@media screen and (max-width:900px) {
    #location{padding: 109px 4% 72px 4%}
    #location>.con_title{font-size: 32px;}
    #location .location_list{margin-top: 72px; display: block;}
    #location .location_list h2{position: relative; margin-bottom: 24px; font-size: 24px;}
    #location .location_list h2::after{left: 100px;}
    #location .location_list .location_map{width: 100%;}
    #location>ul{margin-top: 72px;}
}

@media screen and (max-width:600px) {
    #location>.con_title{font-size: 24px;}
    #location .location_list{margin-top: 36px;}
    #location .location_list h2{font-size: 20px;}
    #location .location_list h2::after{left: 85px;}
    #location .location_list .location_map .location_map_wrap{height: 300px; border-radius: 4px;}
    #location .location_info{margin-top: 24px;}
    #location .location_info>div{margin-bottom: 24px; display: block;}
    #location .location_info>div h3{font-size: 14px; width: 100%; margin-bottom: 4px;}
    #location .location_info>div address{font-size: 14px;}
    #location .location_info>div p{font-size: 14px;}
    #location>ul>li{width: 100%; margin-bottom: 4%; padding: 24px;}
    #location>ul>li>div .location_global h3{font-size: 20px;}
    #location>ul>li p{font-size: 14px;}
}



/* contact */
#contact{position: relative; padding: 221px 4% 126px 4%;}
#contact .con_title{color: #000; text-align: center;}
#contact form{width: 100%;}
#contact .contact_form{max-width: 730px; margin: 0 auto; padding: 96px 0 38px 0;}
#contact .contact_form>div{margin-bottom: 58px;}
#contact .contact_form div h3{font-size: 20px; margin-bottom: 24px;}
#contact .contact_form div label{display: block; font-size: 18px; font-weight: 700;}
#contact .contact_form .contact_input{margin-top: 24px; font-size: 16px; padding: 28px 24px; border-radius: 8px; width: 100%; border: 1px solid #ccc; box-sizing: border-box;}
#contact .contact_form .contact_input_long{margin-top: 24px; font-size: 16px; padding: 28px 24px; border-radius: 8px; width: 100%; border: 1px solid #ccc; box-sizing: border-box; resize: none; height: 330px;}

#contact .contact_form select{padding: 28px 24px; border-radius: 8px; width: 50%; margin-top: 24px; font-size: 16px; border: 1px solid #ccc; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: url(../img/icon_dropdown.svg) no-repeat 94% 50%;}
#contact .contact_form .check>div{display: flex; align-items: center; margin-bottom: 20px;}
#contact .contact_form .check label{font-weight: 400; margin-left: 20px;}
#contact .contact_form .check>.contact_input{margin-top: 4px;}
#contact .contact_form input[type=radio]{width: 20px; height: 20px;}
#contact .contact_form input[type=checkbox]{width: 20px; height: 20px; border-radius: 4px;}
#contact .contact_form .agree{display: flex; flex-wrap: wrap; align-items: center;}
#contact .contact_form .agree span{color: #008CFF; margin-left: 28px;}
#contact .contact_form .agree>div{width: 100%; margin-top: 24px; line-height: 1.6em; padding: 24px; border-radius: 8px; background-color: #f9f9f9; height: 200px; overflow-y: scroll; font-size: 18px; color: #666;}
#contact input[type=submit]{display: block; width: 206px; height: 60px; margin: 0 auto; border-radius: 30px; border: none; font-size: 20px; margin-top: 32px; background-color: #008CFF; color: #fff; cursor: pointer;}