@charset "euc-kr";

/* keyframes */
@keyframes bounce {
    from {transform: translateY(0px);}
    to {transform: translateY(-10px);}}
@-webkit-keyframes bounce {
    from {transform: translateY(0px);}
    to {transform: translateY(-10px);}}

@keyframes loading {
   0%{
    opacity: 0.5;
    transform: scale(0.6);}
   100% {
    opacity: 0.1;
    transform: scale(1);}
      }




/* CSS Document */
 *{margin: 0; padding:0; box-sizing: border-box;}
ul {margin-bottom: 0px;}
li {list-style: none;}
a {
    text-decoration: none; 
    cursor: pointer; 
    color: unset;}
a:hover{text-decoration: none; color: unset;}
html {font-size: 16px; scroll-behavior: smooth;}
body {
    font-family: 'Noto Sans KR', sans-serif;
    border: 0; padding: 0px;}



/* Page */

.bold{font-weight: 600;}
.blue{color: #0075bc; fill: #0075bc; border-color: #0075bc;}
.orange{color: #e86b01; fill: #e86b01; border-color:#e86b01;}
.yellow{color: #f8bd00; fill: #f8bd00; border-color:#f8bd00}
.lime{color: #b7d100; fill: #b7d100; border-color:#b7d100}
.skyblue{color: #36bdef; fill: #36bdef; border-color:#36bdef}
.archivo{font-family: 'Archivo', sans-serif;}
.noto{font-family: 'Noto Sans KR', sans-serif;}
.montserrat{font-family: 'Montserrat', sans-serif;}
.center{
    display: block;
    margin: 0 auto;
    width: 1180px;
    height: 405px;
    overflow: hidden;}
.hr100{
    display: flex;
    border: 1px solid #f5f5f5;
    margin-top: -100px;}

.scrollTop {
    position: fixed;
    width: 40px;
    right: 20px;
    bottom: 50px;
    cursor: pointer;
    color: #000000;
    z-index: 15;}


.top_all{
    width: 100%; 
    height: auto; 
    background-color: #f8f8f8; 
    display: grid;}
.top_wrap{
    width: 1180px; 
    margin: 0 auto; 
    display: block; 
    height: auto; 
    padding: 40px 0px 20px;}	
.top_box_01{
    width: 50%; 
    float: left; 
    height: auto;}
.top_box_02{
    width: 50%; 
    float: right; 
    text-align: right; 
    height: auto;}
.top_logo_01{
    width: 200px; 
    height: auto;}
.top_logo_02{
    width: 220px; 
    height: auto; 
    margin-top: 0px}

.main_nav{
    width: 100%; 
    margin: 0 auto;   
    overflow: hidden;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: 1s;
    font-family: 'Archivo';}	 
.main_nav:hover{
    background: rgba(0, 0, 0, 0.9);
    transition: 0.5s;} 
.logo_wrap{
    width: 1180px;
    margin: 0 auto;
    margin: 44px 0px 40px;
    display: inline-block;}
.logo_box_01{
    width: 128px;
    height: auto;
    float: left;
    cursor: pointer;}
.logo_box_02{
    width: 120px;
    height: auto;
    float: right;
    cursor: pointer;}
.nav_wrap{
    width: 1200px;
    margin-left: -10px;
    display: inline-block;} 
.nav_box{
    width: 280px;
    margin: 0px 10px;
    float: left;
    color: #ffffff;
    text-align: left;
    font-size: 18px;} 
.nav_text{
    border-bottom: 1px solid #ffffff;
    padding-bottom: 20px;
    cursor: pointer; 
    font-weight: 600;}
.nav_sub{
    display: none;
    padding-bottom: 103px;}

.main_nav:hover #subnav{
    display: block!important;}
.main_nav:hover #subnav .nav_sub_text{
    width: 100%;
    display: block;
    padding-top:22px;
    color: #aaaaaa;}
.main_nav:hover #subnav .nav_sub_text a:hover{
    color: #ffffff;
    transition: 0.5s;}

.main_all{
    width: 100%; 
    height: 100vh;
    padding: 0px;
    position: relative;}	 
.main_wrap{
    width: 1180px; 
    margin: 0 auto;   
    overflow: hidden;
    position: absolute;
    display: contents;}
.main_title{
    margin: 0 auto; 
    padding: 24% 0px 0px;
    display: block; 
    text-align: center; 
    font-size: 58px;
    line-height: 1.2; 
    font-weight: 400;
    color: #fff; 
    font-family: 'Archivo', sans-serif;}	
.bg_black{
    background-color: #000000;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 20%;
    height: 100%;
    width: 100%;
    z-index: -1;
    object-fit: cover;}
.bg_video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;}
#videobcg {
    position: fixed;
    top: 0px;
    left: 0px;
    width: auto;
    z-index: 6;
    overflow: hidden;
    height: 100%;
    width: 100%;
    object-fit: cover;}
.nav_bg_b{
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    height: 400px;
    display: none;
    z-index: -1;}
.nav_bg{
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 400px;
    position: absolute;
    z-index: -2;}
.bg_company{background-image: url(../image/bg_company.png);}
.bg_business{background-image: url(../image/bg_business.png);}
.bg_contact{background-image: url(../image/bg_contact.png);}
.bg_dell{background-image: url(../image/bg_dell.png);}
.sub_nav{
    width: 100%; 
    margin: 0 auto;   
    overflow: hidden;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 400px;
    overflow: hidden;
    transition: all 1s;
    font-family: 'Archivo';}	 
.sub_nav:hover{
    transition-timing-function: ease-out;
    transition: all 1s;
    height: unset;} 
#sub_nav_on{display: none;height: 400px;
    overflow: hidden;} 
.sub_nav:hover #sub_nav_off{display: none;} 
.sub_nav:hover #sub_nav_on{display: block!important; transition: all 1s;} 
#nav_hover{display: none;} 
.sub_nav:hover #nav_none{display: none;} 
.sub_nav:hover #nav_hover{display: block;} 


.sub_nav:hover #subnav{
    display: block!important;}
.sub_nav:hover #subnav .nav_sub_text{
    width: 100%;
    display: block;
    padding-top:22px;
    color: #aaaaaa;}
.sub_nav:hover .nav_title{
    display: none;}
.sub_nav:hover .sub_nav_text{
    color: #ffffff;
    border-bottom: 1px solid #ffffff;}
.sub_nav:hover #subnav .nav_sub_text a:hover{
    color: #ffffff;
    transition: 0.5s;}
.sub_nav_box{
    width: 280px;
    margin: 0px 10px;
    float: left;
    color: #000000;
    text-align: left;
    font-size: 18px;} 
.sub_nav_text{
    border-bottom: 1px solid #000000;
    padding-bottom: 20px;
    cursor: pointer;
    font-weight: 600;}      
.nav_title{
    font-size: 54px;
    padding-top:94px;
    font-family: 'Archivo', sans-serif;}

.contents_all{
    width: 100%; 
    height: 100vh;
    padding: 0px;
    position: relative;
    background-color: #666666;
    display: contents;}
.contents_top{
    background-color: #0075bc;
    display: flex;
    width: 100%;
    margin: 0 auto;}
.contents_top_wrap{
    display: inline-block;
    margin: 0 auto;
    width: auto;
    justify-content: center;}
.contents_top_blank{height: 60px;}
.nav_subtitle{
    width: 200px;
    height: 60px;
    text-align: center;
    float: left;
    color: #ffffff;
    align-content: center;
    display: grid;
    font-size: 20px;
    font-family: 'Archivo', sans-serif;
    cursor: pointer;}
.nav_subtitle:hover{
    background-color: #ffffff;
    color: #0075bc;
    transition: 0.5s;}
.nav_subtitle:active{
    background-color: #ffffff;
    color: #0075bc;}
#nav_subtitle_on{
    background-color: #ffffff;
    color: #0075bc;}

.nav_sub_bar{display: none;}
.nav_on{color: #ffffff!important;}
.nav_on a .nav_sub_bar{display: block;}



.contents{
    width: 100%;
    margin: 0 auto;}
.box_01{
    width: 100%;
    background-color: #ffffff;
    display: inline-block;
    text-align: center;}
.box_02{
    width: 100%;
    background-color: #f6f7f7;
    display: inline-block;}
.contents_wrap{
    width: 1180px;
    margin: 0 auto;
    text-align: center;
    padding: 110px 0px;
    position: relative;
    display: flow-root;}
.contents_100{ width: 100%;
    background-color: #ffffff;
    margin: 0 auto;
    text-align: center;
    padding: 0px 0px;
    position: relative;
    display: flow-root;}
.contents_title{
    color: #0075bc;
    font-size: 50px;
    margin-bottom: 50px;}
.title_bar{
    width: 32px;
    text-align: center;
    margin: 0px 51.5% 50px 48.5%;}
.contents_text1{
    color: #1a1a1a;
    font-weight: bold;
    font-size: 30px;
    padding-bottom: 37px;    
    line-height: 1.8;}
.contents_text2{
    color: #262626;
    font-weight: 600;
    font-size: 22px;
    padding-bottom: 26px;
    line-height: 1.8;}
.contents_text3{
    color: #666666;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;}   
.contents_text4{
    width: 380px;
    color: #262626;
    font-weight: 400;
    font-size: 36px;
    text-align: right;
    float: left;
    z-index: 10;
    position: absolute;}   
.contents_text5{
    color: #666666;
    font-weight: 500;
    font-size: 22px;
    padding: 0px 0px 100px;
    margin-top: -25px;}


.image_weare{
    width: 502px;
    text-align: left;
    position: absolute;
    margin-left: -64px;
    top: 230px;
    left: 0;
    z-index: 0;}

.contents_subbox_wrap{
    width: 780px;
    float: right;
    position: relative;}   
.contents_subbox_wrap2{
    width: 100%;
    display: flex;}
.contents_subbox1{
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 1));
    border-radius: 20px;
    width: 380px;
    margin-right: 20px;
    padding: 24px 28px;
    float: left;
    margin-bottom: 20px;
    box-shadow: 4px 4px 25px #e9eaea;}
.contents_subbox2{
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 1));
    border-radius: 20px;
    width: 380px;
    padding: 24px 28px;
    float: left;
    margin-bottom: 20px;
    box-shadow: 4px 4px 25px #e9eaea;}
.contents_subbox3{
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 1));
    border-radius: 20px;
    width: 100%;
    padding: 24px 28px;
    float: left;
    box-shadow: 4px 4px 25px #e9eaea;
    margin-bottom: 20px;}
.contents_subbox4{
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 1));
    border-radius: 20px;
    width: 205px;
    height: 300px;
    padding: 35px 15px;
    float: left;
    box-shadow: 4px 4px 25px #e9eaea;
    margin-bottom: 20px;
    margin: 0px 10px;
    text-align: left;
    position: absolute;
    z-index: 10;}
.subbox_text1{
    color:#262626;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
    text-align: left;}  
.subbox_text2{
    color:#262626;
    font-size: 26px;
    font-weight: 400;
    display: block;
    text-align: right;}
.subbox_text3{
    color:#1a1a1a;
    font-size: 18px;
    font-weight: 200;
    margin-top: 25px;
    display: block;
    line-height: 1.7;}
.subbox_bar{
    width: 40px;
    border: 1px solid #262626;
    margin-bottom: 6px;
    margin-left: 8px;
    display: inline-block;}
.subbox_cat1{
    font-size: 16px;
    border: 1px solid;
    border-radius: 17px;
    padding: 1px 8px;
    margin-bottom: 14px;
    display: table;}
.subbox_cat2{
    font-size: 30px;
    border-bottom: 1px solid;
    padding-bottom: 15px;
    width: auto;
    display: table;}
.subbox_wrap{
    width: 236px;
    height: 320px;
    position: relative;
    display: inline-table;
    float: left;}
.subbox_circle1{
    width: 70px;
    height: 70px;
    background-image : linear-gradient(45deg, #e86b01, #f8bd00);
    border-radius: 35px;
    margin-top: -35px;
    margin-left: -25px;}
.subbox_circle2{
    width: 70px;
    height: 70px;
    background-image : linear-gradient(45deg, #f8bd00, #b7d100);
    border-radius: 35px;
    margin-top: -35px;
    margin-left: -25px;}
.subbox_circle3{
    width: 70px;
    height: 70px;
    background-image : linear-gradient(45deg, #b7d100, #36bdef);
    border-radius: 35px;
    margin-top: -35px;
    margin-left: -25px;}
.subbox_circle4{
    width: 70px;
    height: 70px;
    background-image : linear-gradient(45deg, #36bdef, #0075bc);
    border-radius: 35px;
    margin-top: -35px;
    margin-left: -25px;}
.subbox_circle5{
    width: 70px;
    height: 70px;
    background-image : linear-gradient(45deg, #0075bc, #002475);
    border-radius: 35px;
    margin-top: -35px;
    margin-left: -25px;}

.history_arrow{-webkit-animation: bounce .5s infinite alternate;}


.history input[type=radio] {
    display:none;}
.year label:hover{color: #000000;}
#year-1:checked ~ .year label:nth-child(1),
#year-2:checked ~ .year label:nth-child(2),
#year-3:checked ~ .year label:nth-child(3),
#year-4:checked ~ .year label:nth-child(4) {
    background-color: none;
    box-shadow: none;
    color: #000000;}
.historydetail > div {
    display: none;}
#year-1:checked ~ .historydetail div:nth-child(1),
#year-2:checked ~ .historydetail div:nth-child(2),
#year-3:checked ~ .historydetail div:nth-child(3),
#year-4:checked ~ .historydetail div:nth-child(4)  {
    display: inline-block;
    width: 100%;}
.history {
    margin: 0 auto;
    max-width: 100%;
    display: block;
    height: auto;
    margin-top: -120px;}
.year {
    overflow: hidden;
    width: 20%;
    float: left;
    display: block;}
.year label {
    width: 100%;
    display: block;  
    font-size: 32px;
    cursor: pointer;
    float: left;
    text-align: left;
    padding: 25px 0;
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    color: #a2a2a2;
    letter-spacing: 2px;
    user-select: none;
    -webkit-user-select: none;}

.historydetail {
    width: 80%;
    float: left;
    background-color: none;
    min-height: 250px;}
.historydetail > div{
     padding: 0px;
     line-height: 1.5;
     font-size: 17px;}
.history_box{
    width: 100%;
    display: inline-block;
    height: auto;
    border-top: 1px solid #d9d9d9;
    padding: 40px 0px;}
.history_bar{
    width: 13px;
    border-top: 1px solid #a2a2a2;
    display: inline-block;
    margin-bottom: 7px;
    margin-right: 3px;}

.history_center{margin-top: -9px;} 

.history_text1{
    width: 26%;
    color:#0075bc;
    font-size: 42px;
    font-weight: 600;
    float: left;
    font-family: 'Archivo', sans-serif;}
.history_text2{
    width: 74%;
    color:#1a1a1a;
    font-size: 20px;
    font-weight: 400;
    float: left;
    text-align: left;
    line-height: 2;}
.off{
    color:#cccccc;
    border-color: #cccccc;}  
.history_arrow{
    width: 41px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    display: block;
    cursor: pointer;
    animation: bounce .5s infinite alternate;
    -webkit-animation: bounce .5s infinite alternate;}

#pointon1{
    margin-left: -58px;
    margin-top: 54px;}  
#pointon2{
    margin-left: 355px;
    margin-top: 85px;}  
#pointon3{
    margin-left: 436px;
    margin-top: -159px;}  
#pointon4{
    margin-left: 260px;
    margin-top: 280px;}   

.pointon_wrap{
    display: none;
    width: 340px;
    height: 210px;
    position: absolute;
    cursor: pointer;
    transition: all 0.7s ease;}
.pointcir1{
    top: 0; 
    right: 0;
    width: 42px;
    height: 42px;
    background-image: linear-gradient(45deg, #e86b01, #f8bd00);
    border-radius: 35px;
    position: absolute;
    z-index: 6;}
.pointcir2{top: 0;
    left: -20px;
    width: 42px;
    height: 42px;
    background-image: linear-gradient(45deg, #f8bd00, #b7d100);
    border-radius: 35px;
    position: absolute;
    z-index: 6;}
.pointcir3{
    bottom: -20px;
    left: -20px;
    width: 42px;
    height: 42px;
    background-image: linear-gradient(45deg, #36bdef, #0075bc);
    border-radius: 35px;
    position: absolute;
    z-index: 6;}
.pointcir4{top: 0;
    left: -20px;
    width: 42px;
    height: 42px;
    background-image: linear-gradient(45deg, #b7d100, #36bdef);
    border-radius: 35px;
    position: absolute;
    z-index: 6;}

.pointbox{
    top: 20px; 
    left: 0;
    background: radial-gradient(ellipse, rgba(217, 217, 217, 0.4), rgba(220, 220, 220, 0.5),rgba(255, 255, 255, 1));
    border-radius: 20px;
    width: 320px;
    height: 190px;
    padding: 20px;
    float: left;
    box-shadow: 4px 4px 25px #e9eaea;
    margin: 0px;
    text-align: left;
    position: absolute;
    z-index: 10;}

.point_text1{
    width: fit-content;
    display: block;
    font-size: 16px;
    padding: 3px 12px;
    border: 1px solid;
    border-radius: 24px;}
.point_text2{
    width: 100%;
    display: block;
    font-size: 22px;
    padding: 7px 0px 10px;
    border-bottom: 1px solid;
    margin-bottom: 7px;}
.point_text3{ 
    width: 100%;
    display: block;
    font-size: 14px;
    letter-spacing: -0.4px;
    margin-bottom: 3px;}
.point_text4{
    width: 100%;
    display: block;
    font-size: 14px;}
.loading{cursor: pointer;}
.Xian{
    position: absolute;
    margin-left: 100px;}
.Xian_circle1 {
    display: block;
    width: 9px;
    height: 9px;
    background-color: #e76a01;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 2;
    top: 11.5px;
    left: 11.5px;}
.Xian_circle2 {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #e86b01;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 3;
    top: 6px;
    left: 6px;}
.Xian_circle3 {
    display: block;
    width: 32px;
    height: 32px;
    background-color: #e86b01;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;}
.Xian{
    position: absolute;
    left: 140px;
    top: 60px}
.Xian_circle1 {
    display: block;
    width: 9px;
    height: 9px;
    background-color: #e76a01;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 2;
    top: 11.5px;
    left: 11.5px;}
.Xian_circle2 {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #e86b01;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 3;
    top: 6px;
    left: 6px;}
.Xian_circle3 {
    display: block;
    width: 32px;
    height: 32px;
    background-color: #e86b01;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;}   
.Xian_pointname{
    width: fit-content;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    background-color: #e86a00;
    border-radius: 50px;
    border: 1px solid #cf6002;
    position: absolute;
    left: 0px;
    top: 50px;
    cursor: pointer;
    box-shadow: 2px 2px 12px #d3d3d3;}

.Suzhou{
    position: absolute;
    right: 340px;
    top: 88px;}
.Suzhou_circle1 {
    display: block;
    width: 9px;
    height: 9px;
    background-color: #f8bd00;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 2;
    top: 11.5px;
    left: 11.5px;}
.Suzhou_circle2 {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #f8bd00;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 3;
    top: 6px;
    left: 6px;}
.Suzhou_circle3 {
    display: block;
    width: 32px;
    height: 32px;
    background-color: #f8bd00;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;}
.Suzhou_pointname{
    width: fit-content;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    background-color: #f8bd00;
    border-radius: 50px;
    border: 1px solid #daa600;
    position: absolute;
    right: 40px;
    top: 95px;
    cursor: pointer;
    box-shadow: 2px 2px 12px #d3d3d3;}    

.Head{
    position: absolute;
    right: 260px;
    top: 35px;}
.Head_circle1 {
    display: block;
    width: 9px;
    height: 9px;
    background-color: #36bdef;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 2;
    top: 11.5px;
    left: 11.5px;}
.Head_circle2 {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #36bdef;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 3;
    top: 6px;
    left: 6px;}
.Head_circle3 {
    display: block;
    width: 32px;
    height: 32px;
    background-color: #36bdef;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;}
.Head_pointname{
    width: fit-content;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    background-color: #36bdef;
    border-radius: 50px;
    border: 1px solid #34afdb;
    position: absolute;
    right: 25px;
    top: 0px;
    cursor: pointer;
    box-shadow: 2px 2px 12px #d3d3d3;}    
        
.Vietnam{
    position: absolute;
    left: 250px;
    bottom: 80px;}
.Vietnam_circle1 {
    display: block;
    width: 9px;
    height: 9px;
    background-color: #b7d100;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 2;
    top: 11.5px;
    left: 11.5px;}
.Vietnam_circle2 {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #b7d100;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 3;
    top: 6px;
    left: 6px;}
.Vietnam_circle3 {
    display: block;
    width: 32px;
    height: 32px;
    background-color: #b7d100;
    border-radius: 50%;
    animation: loading 3s linear infinite;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;}
.Vietnam_pointname{
    width: fit-content;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    background-color: #b7d100;
    border-radius: 50px;
    border: 1px solid #84b500;
    position: absolute;
    right: 125px;
    bottom: 0px;
    cursor: pointer;
    box-shadow: 2px 2px 12px #d3d3d3;}    
        
.map{background-image: url(../image/map.jpg);
    background-attachment: inherit;
    background-repeat: no-repeat;
    background-position: center top;
    height: 1000px;}
.points{
    width: 680px;
    position: absolute;
    display: block;
    height: 370px;
    top: 310px;
    left: 50%;
    transform: translate(-50%, 0%);}

.service{width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 200px;}
.service_bgcircle{
    display: block;
    width: 506px;
    height: 506px;
    border-radius: 50%;
    border: 2px solid #e5e5e5;
    margin: 0 auto;}
.service_bgcircle img{
    margin: 0 auto;
    width: 224px;
    text-align: center;
    padding: 45% 0% 45%;
    display: block;}
.service_in{
    width: 1180px;
    position: absolute;
    display: block;
    height: auto;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-top: -30px;}
.service_box{   
    width: 50%;
    height: auto;
    display: inline-block;
    float: left;} 
.service_box2{   
    width: 50%;
    height: auto;
    display: inline-block;
    float: left;
    margin-top: 200px;} 

.ser_textbox1{     
    width: 50%;
    height: auto;
    display: inline-block;
    float: left;
    text-align: right;} 
.ser_textbox2{     
    width: 50%;
    height: auto;
    display: inline-block;
    float: right;
    text-align: left;} 
.ser_textbox3{    
    width: 50%;
    height: auto;
    display: inline-block;
    float: left;
    text-align: right;}
.ser_textbox4{     
    width: 50%;
    height: auto;
    display: inline-block;
    float:right;
    text-align: left;} 
  
.ser_circle_box1{width: 50%;
    height: auto;
    display: inline-block;
    float: left;
    padding-left: 40px;} 
.ser_circle_box2{width: 50%;
    height: auto;
    display: inline-block;
    float: right;
    padding-right: 40px;} 
.ser_circle_box3{width: 50%;
    height: auto;
    display: inline-block;
    float: left;
    margin-top: -120px;
    padding-left: 40px;} 
.ser_circle_box4{width: 50%;
    height: auto;
    display: inline-block;
    float: right;
    margin-top: -120px;
    padding-right: 40px;} 
  
.ser_text1{
    width: 100%;
    font-size: 24px;
    display: block;
    padding-bottom: 8px;}
.ser_text2{
    width: 100%;
    font-size: 17px;
    display: block;
    color: #1a1a1a;
    line-height: 1.6;
    text-align: left;}



.product_wrap{
        width: 1200px;
        margin: 0 auto;
        text-align: center;
        padding: 0px 0px 110px;
        margin-top: -30px; 
        position: relative;
        display: inline-block;}
.product_box{
    width: 580px;
    height: 260px;
    border-radius: 10px;
    margin: 10px 10px;
    float: left;
    overflow:hidden;
    position: relative;
    cursor: pointer;}  
.pr_bg{ 
    width: 580px;
    height: 260px;
    display: block;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    filter: brightness(60%);
    position: absolute;
    z-index: 0;
    border-radius: 10px;}
.pr_textbox_on{
    position: absolute;
    z-index: 2; 
    color: #ffffff;
    top: 0;
    width: 100%;
    display: grid;
    height: 260px;
    align-content: center;
    font-size: 28px;
    font-family: 'Archivo', sans-serif;}
.product_arrow1{
    position: absolute;
    display: block; 
    z-index: 4; 
    width:12px;
    right: 45px;
    top: 120px;}
.pr_textbox_hover{
    position: absolute;
    display:none; 
    z-index: 2; 
    color: #ffffff;
    top: 0;
    width: 100%;
    height: 260px;
    align-content: center;
    font-size: 28px;}
.product_arrow2{
    position: absolute;
    display: none; 
    z-index: 5; 
    width:21px;
    top: 55px;
    right: 45px;}

.product_box:hover .pr_textbox_on{display: none; transition: all 1s ease;}
.product_box:hover .product_arrow1{display: none; transition: all 1s ease;}
.product_box:hover .pr_textbox_hover{display: grid; transition: all 1s ease;}
.product_box:hover .product_arrow2{display: block; transition: all 1s ease;}
.product_box:hover .pr_bg{ 
    width: 580px;
    height: 260px;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    filter: blur(5px) brightness(30%);
    -webkit-transform: scale( 1.2, 1.2);
    transform: scale( 1.2, 1.2);
    position: absolute;
    z-index: 0;}
.product_text1{
    width: 100%;
    display: grid;
    align-content: center;
    font-size: 28px;
    color: #ffffff;
    font-family: 'Archivo', sans-serif;}
.product_text2{
    width: 100%;
    display: grid;
    padding: 30px 0px 20px;
    align-content: center;
    font-size: 18px;
    color: #36bdef;}
.product_text3{
    width: 100%;
    display: grid;
    align-content: center;
    font-size: 20px;
    color: #ffffff;}
.location_wrap{
    width: 1180px;
    margin: 0 auto;
    height: auto;
    margin-top: -100px;
    margin-bottom: 100px;
    display: inherit;}
.location_map{
    width: 100%;
    height: 450px;
    border: 1px solid #d9d9d9;
    overflow: hidden;
    position: relative;}   
.location_map img{
    width: 110%;
    padding-bottom: 43px;
    top: -60px;
    height: auto;
    display: block;
    position: absolute;
    cursor: pointer;} 
.location_map img:hover{
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    filter: brightness(95%);
    -webkit-transform: scale( 1.1, 1.1);
    transform: scale( 1.1, 1.1);
    position: absolute;
    display: block;
    z-index: 0;
    top:-50;
    left: 0;} 
.location{
    width: 100%;
    height: auto;
    margin-top: 60px;}
.location_text1{
    color: #1a1a1a;
    font-weight: bold;
    font-size: 30px;
    padding-bottom: 35px;}
.location_text2{
    color: #262626;
    font-weight: 500;
    font-size: 22px;
    padding-bottom: 20px;}
.location_text3{
    width: 100%;
    color: #666666;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    display: inline-block;}   
.loc_contact{
    width: 50%;
    padding: 0px 10px;}
.loc_contact img{
    width: 21px;
    height: auto;
    margin-bottom: -3px;
    margin-right: 3px;}
.location_sub{
    width: 100%;
    height: auto;
    margin-top: 60px;
    padding:0px 180px;}
.loc_sub_label1{
    width: fit-content;
    background-color: #ffd800;
    color: #ffffff;
    border-radius: 15px;
    padding: 3px 10px;
    display: inline-block;
    float: left;
    margin-right: 10px;}
.loc_sub_label2{
    width: fit-content;
    background-color: #b7d100;
    color: #ffffff;
    border-radius: 15px;
    padding: 3px 10px;
    display: inline-block;
    float: left;
    margin-right: 10px;}
.loc_sub_title1{
    width: 100%;
    float: left;
    display: inline-block;
    color: #262626;
    font-weight: 500;
    background-color: #f6f7f7;
    font-size: 20px;
    padding: 15px 20px;
    text-align: left;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;}
.loc_sub_title1 img{
    width: 20px;
    text-align: left;
    float: left;
    display: inline-block;
    margin-top: 6px;
    margin-right: 6px;}
.loc_sub_title2{
    width: 100%;
    float: left;
    display: inline-block;
    color: #262626;
    font-weight: 500;
    background-color: #f6f7f7;
    font-size: 20px;
    padding: 15px 20px;
    text-align: left;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;}
.loc_sub_title2 img{
    width: 20px;
    text-align: left;
    float: left;
    display: inline-block;
    margin-top: 4px;
    margin-right: 6px;}
.loc_sub_wrap{
    display: inline-block;
    width: 50%;
    float: left;}   
.loc_sub_box1{
    width: 100%;
    height: 317px;
    float: left;
    display: inline-block;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    padding: 5px 20px 15px 20px;}
.loc_sub_box2{
    width: 100%;
    height: 317px;
    float: left;
    display: inline-block;
    border-bottom: 1px solid #d9d9d9;
    padding: 5px 20px 15px 20px;}
.loc_sub_contents{
    width: 100%;
    display: inline-block;
    margin-top: 15px;}
.loc_sub_text1{
    width: fit-content;
    font-size: 16px;
    color: #1a1a1a;
    display: inline-block;
    float: left;
    margin-top: 2px;
    margin-right: 10px;}
.loc_sub_text2{
    width: fit-content;
    font-size: 16px;
    color: #666666;
    display: inline-block;
    float: left;
    margin-top: 2px;
    margin-right: 10px;}
.loc_sub_text3{
    width: fit-content;
    font-size: 14px;
    color: #e86b01;
    display: inline-block;
    float: left;
    margin-top: 5px;}   
.loc_sub_text4{
    width: fit-content;
    font-size: 14px;
    color: #666666;
    display: inline-block;
    float: left;
    margin-top: 5px;
    margin-right: 10px;}   
.loc_sub_text5{
    width: 100%;
    text-align: left;
    font-size: 16px;
    color: #1a1a1a;
    display: block;
    float: left;
    margin-top: 0px;
    margin-left: 60px;}



.privacy_wrap{
    width: 1180px; 
    margin: 0 auto; 
    display: inline-block;
    text-align: left;
    padding: 110px 0px;}
.privacy_text1{
    color: #262626;
    font-weight: 500;
    font-size: 22px;
    padding-bottom: 26px;}
.privacy_text2{
    color: #1a1a1a;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;}   
.privacy_text3{
    color: #1a1a1a;
    font-weight: 600;
    font-size: 16px;
    padding: 40px 0px 10px;}   
.privacy_text4{
    color: #1a1a1a;
    font-weight: 400;
    font-size: 16px;
    padding: 3px 0px 3px 20px;
    line-height: 2;}      
.privacy_text5{
    color: #1a1a1a;
    font-weight: 400;
    font-size: 16px;
    padding-left:42px;
    line-height: 1.8;
    padding-bottom: 5px;}    
 
.dell_boxwrap{
    width: 980px;
    display: flex;
    margin: 0 auto;
    padding: 90px 0px 40px;}    
.dell_box1{
    width: 280px; 
    display: inline-grid;
    float: left;
    align-items: center;}
.logo_dellshowcase{width: 229px;}
.dell_box2{
    width: 780px;
    display: inline-grid;
    margin-left: 50px;
    height: auto;
    float: left;
    align-items: center;}
.dell_contents{
    width: 1180px;
    display: block;
    margin: 0 auto;
    margin-bottom: 80px;}






.footer{
    width: 100%; 
    height: auto; 
    background-color: #ffffff;
    position: relative;
    text-align: center;
    border-top: 1px solid #d9d9d9;
    margin-top: 60px;}
.footer_wrap{
    width: 1180px; 
    margin: 0 auto; 
    display: inline-block;
    margin: 60px 0px;}		
.footer_box1{
    width: 200px; 
    float:left;}	
.footer_box1 img{
    width: 140px;
    text-align: left;
    cursor: pointer;}     
.footer_box2{
    width: 980px; 
    float:left;
    text-align: left;}
.footer_box3{
    width: 100%; 
    float:left;
    text-align: left;}	

.footer_text1{
    display: block;
    font-size: 16px;
    color: #aaaaaa;
    margin-bottom: 15px;}
.footer_text2{
    display: block;
    font-size: 14px;
    color: #aaaaaa;
    margin-bottom: 10px;}
.footer_text2 img{
    width: 21px;
    height: auto;
    margin-bottom: -3px;
    margin-right: 6px;
    opacity: 0.6;}	
.footer_text3{
    display: block;
    padding-left: 200px;
    font-size: 16px;
    color: #666666;
    margin-top: 60px;
    margin-bottom: 30px;
    text-decoration: none;}
.footer_text3:hover{color: #666666;}
.footer_text4{
    display: block;
    padding-left: 200px;
    font-size: 16px;
    color: #aaaaaa;
    font-family: 'Archivo', sans-serif;}


.m{display: none;}	
.m_contents_title{display: none;}
.m_history{display: none;}
.m_ser_circle_box1 {display: none;}
.m_ser_circle_box2 {display: none;}
.m_ser_circle_box3 {display: none;}
.m_ser_circle_box4 {display: none;}
.br_mobile{display: none;}



/* IE10+ */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {

	 
}



/* Tab */
@media(max-width:1199px) {

.main_nav {display: none;}
.sub_nav  {display: none;}
.contents_top {display: none;}
.m{display: block;}
.m_wrap{width:90%; margin: 0 auto; display: inline-block;}  
.contents_wrap {
    width: 100%;
    padding: 50px 0px;}
.br_pc {display: none;}
.center{
    width: 100%;
    padding: 0px 5%;}


.box_01 {padding: 0px 5%;}
.box_02 {padding: 0px 5%;}
.m_nav1{
    width: 100%; 
    height: auto; 
    text-align: center;
    padding: 24px 0px 20px;
    background: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    z-index: 20;}   
.m_nav2{
    width: 100%; 
    height: auto; 
    text-align: center;
    padding: 24px 0px 20px;
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    z-index: 20;}  
.m_nav_logo{
    width:100px; 
    float: left;
    cursor: pointer;
    margin-top: 7px;}   
.m_nav_icon{
    width:21px; 
    float:right;
    cursor: pointer;
    margin-top: 5px;}
#showmenu{
    padding: 25px 5%;
    display: none; 
    color: #ffffff; 
    position: absolute; 
    top: 0; 
    left: 0;}
.m_nav_menu{
    width: 100%; 
    background: rgba(0, 0, 0, 0.9);
    height: calc(100vh + 55px);}
.m_nav_menu img{
    width:20px;
    cursor: pointer;
    display: block;
    float: right;}

#submenu_on1{display:none;}
#submenu_on2{display:none;}
.sub_fix{display:block!important;}
.m_menu_box{margin-top: 70px;}

.m_menu_text1{
    width: 100%;
    font-size:30px;
    color:#ffffff;
    display: block;
    position: relative;
    text-align: left;
    cursor: pointer;}
.m_menu_text2{
    width: fit-content;
    font-size:22px;
    color:#d9d9d9;
    display: block;
    cursor: pointer;
    margin: 15px 0px 15px 10px;}
.m_menu_text2:hover{color: #36bdef;}


.m_nav_on{color: #36bdef!important;}
.m_nav_on .nav_sub_bar{
    float: left;
    display: block;
    margin-right: 5px;}
.m_menu_box #menu-1{display: none;}
.m_menu_box #menu-2{display: none;}
.m_submenu_detail{
    display: none;
    margin-bottom: 25px;}

#m_menu_arrow1{
    width: 21px; 
    float: right; 
    display: inline-block;
    position: absolute;
    right: 5%;
    top: 15px;}
#m_menu_arrow2{
    width: 21px; 
    float: right; 
    display: none;
    position: absolute;
    right: 5%;
    top: 15px;}

.m_menu_box #menu-1:checked~#m_sub-1{display: block;}
.m_menu_box #menu-1:checked~#title_menu-1 #m_menu_arrow1{display:none;}
.m_menu_box #menu-1:checked~#title_menu-1 #m_menu_arrow2{display: inline-block;}
.m_menu_box #menu-2:checked~#m_sub-2{display: block;}
.m_menu_box #menu-2:checked~#title_menu-2 #m_menu_arrow1{display:none;}
.m_menu_box #menu-2:checked~#title_menu-2 #m_menu_arrow2{display: inline-block;}


.m_menu_bar{
    border: 1px solid #aaaaaa;
    opacity: 0.3;
    margin: 25px -5.6%;}

.m_contents_title{
    display: block; 
    font-size: 24px; 
    color: #666666; 
    margin-bottom: 20px;}



.contents {padding-top: 80px;}  
.contents_title{
    text-align: left;
    margin-bottom: 15px;}
.title_bar {margin: 0px 50% 40px;}
.image_weare{display: none;}
.main_wrap {
    display: grid;
    width: 100%;
    height: 100vh;
    align-items: center;}
.main_title {
    padding: 0px 5%;
    font-size: 34px;
    line-height: 1.5;}

.contents_text1 {
    font-size: 20px;
    padding-bottom: 30px;
    position: relative;
    z-index: 10;}
.contents_text2 {
    font-size: 16px;
    padding-bottom: 20px;}
.contents_text3 {font-size: 14px;}
.contents_text4 {
    font-size: 30px;
    width: 100%;
    text-align: left;
    display: block;
    position: relative;
    margin-bottom: 25px;}
.contents_text5 {
    font-size: 14px;
    padding: 0px;
    margin-bottom: -35px;
    margin-top: -15px;}
.contents_subbox_wrap {
    width: 100%;
    float: left;
    position: relative;}

.contents_subbox1 {
    width: 100%;
    margin-right: 0px;}
.contents_subbox2 {
    width: 100%;
    margin-right: 0px;}
.subbox_text2 {
    text-align: left;
    font-size: 24px;}
.contents_subbox_wrap2 {
    width: 100%;
    display: inline-block;
    height: auto;
    margin-bottom: 60px;}
.subbox_wrap {
    width: 100%;
    display: block;
    height: auto;
    margin: 110px 5%;}
.contents_subbox4 {
    width: 92%; 
    padding: 20px 17px;
    height: auto;}

.subbox_text3 {
    margin-top: 12px;}

#history_pc{display: none;}
.history_box {
    border-top: none;
    padding: 15px 0px;}
    
.m_history{
    display: block;
    margin-bottom: 50px;}
.m_history #history-1{display: none;}
.m_history #history-2{display: none;}
.m_history #history-3{display: none;}
.m_history_detail{
    display: none;
    margin-bottom: 25px;
    padding:0px 5%;}
.m_history_text1{
    width: 100%;
    display: inline-block;
    font-size: 30px;
    color: #000000;
    position: relative;
    padding:20px 5%;
    margin-top: -6px;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    cursor: pointer;}
.m_history_text2{
    width: 100%;
    display: inline-block;
    font-size: 30px;
    color: #000000;
    position: relative;
    padding:20px 5%;
    margin-top: -6px;
    border-bottom: 1px solid #d9d9d9;
    cursor: pointer;}
.m_history_cat{
    float: left; 
    text-align: left;
    display: inline-block;}   
#m_history_arrow1{
    width: 21px; 
    float: right; 
    display: inline-block;
    position: absolute;
    top: 32px;
    right: 5%;}
#m_history_arrow2{
    width: 21px; 
    float: right; 
    display: none;
    position: absolute;
    top: 32px;
    right: 5%;}
.m_history_hr{
    width:100%;
    border-top: 1px solid #d9d9d9;}
.m_history #history-1:checked~#m_hissub-1{display: block;}
.m_history #history-1:checked~#title_history-1 #m_history_arrow1{display:none;}
.m_history #history-1:checked~#title_history-1 #m_history_arrow2{display: inline-block;}
.m_history #history-1:checked~#m_hissub-2{display: none;}
.m_history #history-1:checked~#m_hissub-3{display: none;}
.m_history #history-2:checked~#m_hissub-2{display: block;}
.m_history #history-2:checked~#title_history-2 #m_history_arrow1{display:none;}
.m_history #history-2:checked~#title_history-2 #m_history_arrow2{display: inline-block;}
.m_history #history-2:checked~#m_hissub-1{display: none;}
.m_history #history-2:checked~#m_hissub-3{display: none;}
.m_history #history-3:checked~#m_hissub-3{display: block;}
.m_history #history-3:checked~#title_history-3 #m_history_arrow1{display:none;}
.m_history #history-3:checked~#title_history-3 #m_history_arrow2{display: inline-block;}
.m_history #history-3:checked~#m_hissub-1{display: block;}
.m_history #history-3:checked~#m_hissub-2{display: block;}
.history_text1 {
    width: 100%; 
    font-size: 28px;
    font-family: 'Archivo', sans-serif;}
.history_text2 {
    width: 100%;
    font-size: 16px;
    padding-top: 3px;}

.hr100{display: none;}
.Xian_pointname {display: none!important;}
.Suzhou_pointname {display: none!important;}
.Head_pointname {display: none!important;}
.Vietnam_pointname {display: none!important;}
.wide{padding: 0px;}
.contents_100{margin-top: -110px;}
.points {width: 240px;}
.map{display: none;}
.map_m{background-image: url(../image/map_m.jpg);
    background-attachment: inherit;
    background-repeat: no-repeat;
    background-size: 1200px;
    background-position: top center;
    height: 600px;}
.Xian {
    left: -15px;
    top: -64px;}
.Head{
    right: 0px;
    top: -71px;}   
.Suzhou{
    right: 62px;
    top: -26px;}
.Vietnam{
    left: 123px;
    top: 98px;}
.points {width: 240px;}

#pointon1 {
    margin-left: -15%;
    margin-top: -67px;}
#pointon2 {
    margin-left: -15%;
    margin-top: -67px;}
#pointon3 {
    margin-left: -15%;
    margin-top: -67px;}
#pointon4 {
    margin-left: -15%;
    margin-top: -67px;}
.pointcir1 {display: none;}
.pointcir2 {display: none;}
.pointcir3 {display: none;}
.pointcir4 {display: none;}

.location {
    margin-top: 40px;
    margin-bottom: 50px;}
.location_wrap {
    width: 100%;
    margin-top: -50px;
    margin-bottom: 50px;}
.location_map {
    width: 100%;
    height: 270px;
    overflow: hidden;
    position: static;
    border: 1px solid #d9d9d9;}
.location_map img {
    width: 150%;
    padding-bottom: 0px;
    margin: -17% 20% 20% -21%;
    height: auto;
    display: block;
    position: unset;
    cursor: pointer;
    }
.location_map img:hover {
    position: unset;
    transform: none;}
.location_sub {padding:0px;}
.loc_sub_wrap {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;}
.loc_sub_box1 {
    width: 100%;
    height: auto;}
.loc_sub_box2 {
    width: 100%;
    height: auto;}
.location_text2 {
    margin-bottom: 10px;}
.location_text3 {
    line-height: 1.5;
    margin-bottom: 10px;}
.location {
    margin-top: 40px;
    margin-bottom: 30px;}
.loc_sub_title1{padding: 15px 15px;}
.loc_sub_box1{padding: 15px 15px;}
.loc_sub_title2{padding: 15px 15px;}
.loc_sub_box2{padding: 15px 15px;}
.loc_sub_label1{margin-right: 8px;}
.loc_sub_label2{margin-right: 8px;}
.loc_sub_contents {margin-top: 5px;}
.loc_sub_text1{margin-right: 6px;}
.loc_sub_text2{margin-right: 6px;}
.loc_sub_text5 {margin-right: 59px;}


.product_wrap {
     width: 100%;}
.product_box {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;}
.pr_bg {
    width: 100%;
    height: auto;}
.product_box:hover .pr_bg{ 
    width: 100%;
    height: auto;}
.service_bgcircle {display: none;}
.service_in {
    width: 100%;
    position: relative;}
.service_box {
    width: 100%;
    margin: 20px 0px;}
.service_box2 {
    width: 100%; 
    margin: 20px 0px;}
.ser_circle_box1 {display: none;}  
.ser_circle_box2 {display: none;} 
.ser_circle_box3 {display: none;}    
.ser_circle_box4 {display: none;}  
.m_ser_circle_box1 {
    width: 30%;
    display: block;
    height: auto;
    float: none;
    margin: 0 auto;
    padding-left: 5%;}
.m_ser_circle_box2 {
    width: 30%;
    display: block;
    height: auto;
    float: none;
    margin: 0 auto;
    padding-left: 5%;}
.m_ser_circle_box3 {
    width: 30%;
    display: block;
    height: auto;
    float: none;
    margin: 0 auto;
    padding-left: 5%;}
.m_ser_circle_box4 {
    width: 30%;
    display: block;
    height: auto;
    float: none;
    margin: 0 auto;
    padding-left: 5%;}   
.ser_textbox1 {
    width: 100%;
    height: auto;
    display: inline-block;
    float: none;
    text-align: left;}  
.ser_textbox2 {
    width: 100%;
    height: auto;
    display: inline-block;
    float: none;
    text-align: left;}  
.ser_textbox3 {
    width: 100%;
    height: auto;
    display: inline-block;
    float: none;
    text-align: left;}     
.ser_textbox4 {
    width: 100%;
    height: auto;
    display: inline-block;
    float: none;
    text-align: left;}     

.m_ser_line1 {
    border-top: 1px solid;
    width: 79%;
    margin-top: 18px;
    display: block;
    float: right;}
.m_ser_line2 {
    border-top: 1px solid;
    width: 83%;
    margin-top: 18px;
    display: block;
    float: right;}
.ser_cat_text{
    width: 100%;
    display: inline-block;}
.ser_text1 {
    width: fit-content;
    font-size: 24px;
    display: block;
    padding-bottom: 8px;
    float: left;}

.pr_textbox_on {
    align-items: center;
    height: inherit;}
.product_arrow1 {top: 48%;}   

.privacy_wrap {width: 100%;}






.dell_boxwrap {
    width: 100%;
    display: flex;
    margin: 0 auto;
    padding: 90px 5% 40px;}
.dell_contents {
    width: 100%;
    padding: 0px 5%;}



.footer{margin-top: 0px;}
.footer_wrap {
    width: 100%;
    margin: 40px 0px;
    padding: 0px 5%;}
.footer_box1 {
    width: 100%;
    text-align: left;}
.footer_text1 {
    font-size: 14px;
    margin: 10px 0px;}
.footer_text2 {
    display: inline-block; 
    margin-right: 20px;}
.footer_text3 {
    text-align: left;
    padding: 0px;
    margin-top: 40px;
    margin-bottom: 15px;}
.footer_text4 {padding-left: 0px;}


.footer_box1 img {
    width: 110px;}

.footer_box2 {
    width: 100%;}

.privacy_text1 {font-size: 22px;}
.privacy_text2 {font-size: 14px;}
.privacy_text3 {font-size: 14px;}
.privacy_text4 {font-size: 14px;}
.privacy_text5 {font-size: 14px;}






}



@media(max-width:800px) {
.product_wrap {
    width: 100%;}
.product_box {
    width: 100%;
    height: 200px;}

.m_ser_circle_box1 {width: 50%;}
.m_ser_circle_box2 {width: 50%;}
.m_ser_circle_box3 {width: 50%;}
.m_ser_circle_box4 {width: 50%;}


.product_arrow1 {top: 45%;}
.product_box:hover .pr_textbox_on{display: grid;}
.product_box:hover .product_arrow1{display: block;}
.product_box:hover .pr_textbox_hover{display: none;}
.product_box:hover .product_arrow2{display: none;}
.product_box:hover .pr_bg{display: block;} 
}






/* Mobile */
@media(max-width:500px) {
.br_mobile{display: block;}
.product_box {height: 150px;} 
.history_bar {
    width: 10px;
    border-top: 1px solid #a2a2a2;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 1px;}
.history_text2 {
    width: 100%;
    font-size: 14px;}
.location_map {height: 250px;}
.location_map img {
    width: 250%;
    margin: -35% 20% 20% -67%;}
.m_ser_circle_box1 {width: 70%;}
.m_ser_circle_box2 {width: 70%;}
.m_ser_circle_box3 {width: 70%;}
.m_ser_circle_box4 {width: 70%;}
.product_arrow1 {top: 44%;}



}




/* Galaxy Fold */
@media(max-width:370px) {
.loc_contact {
    width: 100%;
    padding: 0px 20px;
    display: block;
}


}


/* SOLUTIONS */

section > h1 { font-family:'Montserrat', sans-serif; font-size:36px; font-weight:700; letter-spacing:-0.25px; color:#333; text-align:center; }

#solutions { width:100%; padding:131px 0; }

.solution_menu_ul { display:table; width:auto; margin:71px auto 0 auto; text-align:center; }
.solution_menu_ul > li { float:left; width:160px; height:40px; line-height:39px; margin:0 4px; font-size:16px; font-weight:700; letter-spacing:-0.75px; color:#333; border:solid 1px #666; white-space:nowrap; cursor:pointer; transition:0.3s; transform:skew(-0.03deg); }
.solution_menu_ul > li:hover, .solution_menu_ul > li.sm_ul_on { color:#0055ab; border-color:#1669be; box-shadow:7px 7px 21px rgba(5,38,120,0.2); }

.solution_atc > div { display:none; margin-top:55px; text-align:center; transition:0.5s; }
.solution_atc > div > h5 { line-height:34px; font-size:24px; font-weight:900; letter-spacing:-0.6px; color:#333; word-break:keep-all; }
.solution_atc > div > h5 > span { color:#1669be; }
.solution_atc > div > h6 { margin-top:16px; font-size:16px; font-weight:700; letter-spacing:-0.35px; color:#555; transform:skew(-0.03deg); }
.solution_atc > div > h6 > img { margin:23px 0 40px 0; cursor:pointer; }
.solution_atc > div.solution_on { display:block; }

.solution_dell_ul { display:table; width:942px; margin:-2px auto 0 auto; }
.solution_dell_ul > li { float:left; width:173px; height:238px; margin:61px 71px 0 70px; background-position:center top; background-repeat:no-repeat; background-size:cover; cursor:pointer; transition:0.5s; }
.solution_dell_ul > li:nth-child(1) { background-image:url('../img/dell_img_01.png'); }
.solution_dell_ul > li:nth-child(2) { background-image:url('../img/dell_img_02.png'); }
.solution_dell_ul > li:nth-child(3) { background-image:url('../img/dell_img_03.png'); }
.solution_dell_ul > li:nth-child(4) { background-image:url('../img/dell_img_04.png'); }
.solution_dell_ul > li:nth-child(5) { background-image:url('../img/dell_img_05.png'); }
.solution_dell_ul > li:nth-child(6) { background-image:url('../img/dell_img_06.png'); }
.solution_dell_ul > li:nth-child(1):hover { background-image:url('../img/dell_img_01_on.png'); }
.solution_dell_ul > li:nth-child(2):hover { background-image:url('../img/dell_img_02_on.png'); }
.solution_dell_ul > li:nth-child(3):hover { background-image:url('../img/dell_img_03_on.png'); }
.solution_dell_ul > li:nth-child(4):hover { background-image:url('../img/dell_img_04_on.png'); }
.solution_dell_ul > li:nth-child(5):hover { background-image:url('../img/dell_img_05_on.png'); }
.solution_dell_ul > li:nth-child(6):hover { background-image:url('../img/dell_img_06_on.png'); }

/* Ethical Management */
.container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 30px;
    }

    .item {
      text-align: center;
      padding: 20px;
      border-radius: 8px;
    }

    .item img {
      width: 60px;
      height: 60px;
      margin-bottom: 16px;
    }

    .item h3 {
      font-size: 16px;
      margin-bottom: 8px;
    }

    .item p {
      font-size: 14px;
      line-height: 1.5;
      color: #555;
    }

    @media (max-width: 600px) {
      .item img {
        width: 50px;
        height: 50px;
      }
      .item h3 {
        font-size: 15px;
      }
      .item p {
        font-size: 13px;
      }
    } 
   .detail-section {
    margin-top: 60px;
    padding: 0 20px;
  }

  .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 항상 2개씩 */
    gap: 40px 30px;
    justify-content: center;
  }

  .detail-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: left; /* 왼쪽 정렬 */
  }

  .detail-item .number {
    font-weight: bold;
    color: #3c32dc;
    font-size: 14px;
  }

  .detail-item .title {
    display: inline;
    margin-left: 8px;
    color: #3c32dc;
    font-size: 18px;
  }

  .detail-item .bold {
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .detail-item ul {
    padding-left: 20px;
    color: #666;
    font-size: 14px;
  }

  .detail-item ul li {
    margin-bottom: 6px;
    list-style-type: disc;
  }

  @media (max-width: 768px) {
    .detail-grid {
      grid-template-columns: 1fr; /* 모바일은 1열 */
    }
  }

    .container22 {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
            text-align: left;
        }
        .anti-corruption-policy {
            padding: 20px;
            text-align: left;
        }
        .anti-corruption-policy h1 {
            font-size: 2rem;
            font-weight: bold;
            color: #3c32dc;
            margin-bottom: 20px;
            border-bottom: 2px solid #000;
            display: inline-block;
            padding-bottom: 5px;
        }
        .anti-corruption-policy p {
            font-size: 1rem;
            color: #666666;
            margin-bottom: 20px;
        }
        .anti-corruption-policy ul {
            list-style: disc; /* 기본 동그라미 마커로 설정 */
            padding-left: 20px; /* 들여쓰기 */
        }
        /* .anti-corruption-policy li {
            margin-bottom: 12px;
            font-size: 1rem;
        } */

        .anti-corruption-policy ul li {
    margin-bottom: 6px;
    list-style-type: disc;
    font-size: 1rem;
  }
        /* 반응형 스타일 */
        @media (max-width: 768px) {
            .anti-corruption-policy h1 {
                font-size: 1.5rem;
            }
            .anti-corruption-policy p,
            .anti-corruption-policy li {
                font-size: 0.95rem;
            }
        }

        @media (max-width: 480px) {
            .container22 {
                padding: 10px;
            }
            .anti-corruption-policy h1 {
                font-size: 1.3rem;
            }
            .anti-corruption-policy p,
            .anti-corruption-policy li {
                font-size: 0.9rem;
            }
        }

        .report-section {
    margin-top: 40px;
    text-align: left;
}

.report-section h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.report-section p {
    font-size: 1rem;
    color: #666666;
    margin-bottom: 20px;
}

.report-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.report-box {
    flex: 1 1 45%;
    border: 1px solid #ccc;
    padding: 20px;
    box-sizing: border-box;
}

.report-box h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.report-box ul {
    list-style: disc;
    padding-left: 20px;
}

.report-box li {
    margin-bottom: 8px;
    font-size: 1rem;
}

.contact-info p {
    font-size: 1rem;
    margin-bottom: 5px;
}

.contact-info a {
    color: #333333;
    text-decoration: underline;
}

/* 반응형 */
@media (max-width: 768px) {
    .report-boxes {
        flex-direction: column;
    }
}