/* common */
.title{font-size: 3em; font-weight: 700;}



/* PC */
@media screen and (min-width : 1201px) {
/* main_banner */
#main_banner{position: relative; overflow: hidden;}
#main_banner video{position: relative; display: block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; transform: scale(1.01); opacity: 1;}
#main_banner .title{position: absolute; left: 50%; bottom: 25%; transform: translateX(-50%);}

/* your_world */
#your_world{position: relative; padding: 200px 0;}
#your_world .your_wrap{width: 92%; max-width: 1400px; margin: 0 auto;}
#your_world .your_wrap p{font-size: 1.4em; padding: 60px 0 40px 0;}
#your_world .your_list{position: relative; overflow: hidden; margin-top: 100px;}
#your_world .your_list ul{position: relative; width: 133.33%;}
#your_world .your_list ul::after{content: ""; display: block; clear: both;}
#your_world .your_list ul li{float: left; width: 23%; margin: 0 1%; border-radius: 10%; overflow: hidden;}
#your_world .your_list ul li img{width: 100%;}
#your_world .your_btn{position: absolute; top: 92%; left: 50%; transform: translate(-50%,-50%); width: 150px; display: flex; justify-content: space-between;}
#your_world .your_btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer;  padding: 10px;}
#your_world button:hover{background-color: rgba(255,255,255,1);}

/* tech */
#tech{position: relative; padding: 200px 0;}
#tech .tech_wrap{width: 92%; margin: 0 auto; max-width: 1400px; display: flex; flex-direction: column; align-items: end;}
#tech .tech_wrap p{font-size: 1.4em; text-align: end; padding: 60px 0 40px 0;}
#tech .tech_bg1{position: absolute; left: 100px; bottom: 43%; z-index: -1; width: 700px; height: 500px;}
#tech .tech_bg1 img{width: 100%;}
#tech .tech_bg2{position: absolute; right: 100px; bottom: 1%; z-index: -1; width: 300px; height: 300px; transform: rotate(45deg);}
#tech .tech_bg2 img{width: 100%;}

#tech .swiper-wrapper .box a{display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff;}
#tech .swiper-wrapper .box a p{text-align: center; font-size: 1.4em; padding-bottom: 20px;}
#tech .swiper-wrapper .box a .box_logo1{width: 100%; padding-bottom: 40px;}
#tech .swiper-wrapper .box a .box_logo2{width: 35%;}

.swiper {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 400px;
    height: 500px;
    display: flex;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

/* vision */
#vision{position: relative; padding: 150px 0;}
#vision .vi_wrap{position: relative; display: flex; flex-direction: column; align-items: center;}
#vision .vi_wrap h2{text-align: center; margin-bottom: 150px;}
#vision .vi_wrap .vi_text{position: relative; background-color: #fff; width: 100%; max-width: 1440px; display: flex; flex-direction: column; align-items: center;}
#vision .vi_wrap .vi_text>p{padding: 150px 0; text-align: center; font-size: 2.5em; font-weight: 700; opacity: 0;}
#vision .vi_wrap .vi_text ul{display: flex; width: 80%; justify-content: space-between; align-items: center;}
#vision .vi_wrap .vi_text ul li{display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0;}
#vision .vi_wrap .vi_text ul li h3{font-size: 2em; font-weight: 700; padding: 30px 0 40px 0;}
#vision .vi_wrap .vi_text ul li p{font-size: 1.3em; text-align: center; padding-bottom: 150px;}

/* flow */
#flow{position: relative; overflow: hidden; height: 100px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%)}
#flow .flow_wrap{position: absolute; left: 0; width: 200%; top: 50%; transform: translateY(-50%); display: flex;}
#flow .flow_wrap li{font-size: 2em; font-weight: 700; color: #fff; width:10%;}

/* accordion */
#accordion{position: relative;}
#accordion .acco_list{position: relative; display: flex;}
#accordion .acco_list li{position: relative; width: 25%; transition-duration: 0.5s; transition-timing-function: linear; overflow: hidden;}
#accordion .acco_list li h2{font-size: 2em; font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap; transition-duration: 0.5s; transition-timing-function: linear;}
#accordion .acco_list li p{font-size: 1.8em; white-space: nowrap; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition-duration: 0.7s;}
#accordion .acco_list li .more_btn{position: absolute; left: 50%; top: 65%; transform: translate(-50%,-50%); transition-duration: 0.5s; display: none;}
#accordion .acco_list li img{opacity: 0.25; transition-duration: 0.7s;}

#accordion .acco_list li.select{width: 70%;}
#accordion .acco_list li.select h2{font-size: 2.5em; top: 30%; transform: translate(-50%, -50%) rotate(0deg);}
#accordion .acco_list li.select p{opacity: 1;}
#accordion .acco_list li.select .more_btn{display: block;}
#accordion .acco_list li.select img{opacity: 0.74;}

#m_accordion{display: none;}
}
























/* Tablet 가로 */
@media screen and (min-width:901px) and (max-width:1200px) {
/* common */
.title{font-size: 3em; font-weight: 700;}

/* main_banner */
#main_banner{position: relative; overflow: hidden;}
#main_banner video{position: relative; display: block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; transform: scale(1.01); opacity: 1;}
#main_banner .title{position: absolute; left: 50%; bottom: 15%; width: 80%; text-align: center; transform: translateX(-50%);}

/* your_world */
#your_world{position: relative; padding: 150px 0;}
#your_world .your_wrap{width: 92%; max-width: 1400px; margin: 0 auto;}
#your_world .your_wrap p{font-size: 1.2em; padding: 60px 0 40px 0;}
#your_world .your_list{position: relative; overflow: hidden; margin-top: 100px;}
#your_world .your_list ul{position: relative; width: 133.33%;}
#your_world .your_list ul::after{content: ""; display: block; clear: both;}
#your_world .your_list ul li{float: left; width: 23%; margin: 0 1%; border-radius: 10%; overflow: hidden;}
#your_world .your_list ul li img{width: 100%;}
#your_world .your_btn{position: absolute; top: 92%; left: 50%; transform: translate(-50%,-50%); width: 150px; display: flex; justify-content: space-between;}
#your_world .your_btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer;  padding: 10px;}
#your_world button:hover{background-color: rgba(255,255,255,1);}

/* tech */
#tech{position: relative; padding: 150px 0;}
#tech .tech_wrap{width: 92%; margin: 0 auto; display: flex; flex-direction: column; align-items: end;}
#tech .tech_wrap p{font-size: 1.2em; text-align: end; padding: 60px 0 40px 0;}
#tech .tech_bg1{position: absolute; left: 40px; bottom: 60%; z-index: -1; width: 400px; height: 300px;}
#tech .tech_bg1 img{width: 100%;}
#tech .tech_bg2{position: absolute; right: 50px; bottom: 1%; z-index: -1; width: 200px; height: 200px; transform: rotate(45deg);}
#tech .tech_bg2 img{width: 100%;}

#tech .swiper-wrapper .box a{display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff;}
#tech .swiper-wrapper .box a p{text-align: center; font-size: 1.15em; padding-bottom: 20px;}
#tech .swiper-wrapper .box a .box_logo1{width: 100%; padding-bottom: 40px;}
#tech .swiper-wrapper .box a .box_logo2{width: 35%;}

.swiper {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 400px;
    display: flex;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

/* vision */
#vision{position: relative; padding: 150px 0;}
#vision .vi_wrap{position: relative; display: flex; flex-direction: column; align-items: center;}
#vision .vi_wrap h2{text-align: center; margin-bottom: 80px;}
#vision .vi_wrap .vi_text{position: relative; background-color: #fff; width: 92%; display: flex; flex-direction: column; align-items: center;}
#vision .vi_wrap .vi_text>p{padding: 50px 0; text-align: center; font-size: 2em; font-weight: 700; opacity: 0;}
#vision .vi_wrap .vi_text ul{display: flex; width: 95%; justify-content: space-between; align-items: center;}
#vision .vi_wrap .vi_text ul li{display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0;}
#vision .vi_wrap .vi_text ul li h3{font-size: 1.6em; font-weight: 700; padding: 30px 0 40px 0;}
#vision .vi_wrap .vi_text ul li p{font-size: 1.1em; text-align: center; padding-bottom: 50px;}

/* flow */
#flow{position: relative; overflow: hidden; height: 100px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%)}
#flow .flow_wrap{position: absolute; left: 0; width: 4000px; top: 50%; transform: translateY(-50%); display: flex;}
#flow .flow_wrap li{font-size: 2em; font-weight: 700; color: #fff; width: 500px;}

/* accordion */
#accordion{position: relative;}
#accordion .acco_list{position: relative; display: flex;}
#accordion .acco_list li{position: relative; width: 25%; transition-duration: 0.5s; transition-timing-function: linear; overflow: hidden;}
#accordion .acco_list li h2{font-size: 1.5em; font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap; transition-duration: 0.5s; transition-timing-function: linear;}
#accordion .acco_list li p{font-size: 1.3em; width: 80%; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition-duration: 0.7s;}
#accordion .acco_list li .more_btn{position: absolute; left: 50%; top: 65%; transform: translate(-50%,-50%); transition-duration: 0.5s; display: none;}
#accordion .acco_list li img{opacity: 0.25; transition-duration: 0.7s; height: 500px;}

#accordion .acco_list li.select{width: 70%;}
#accordion .acco_list li.select h2{font-size: 1.8em; top: 35%; transform: translate(-50%, -50%) rotate(0deg);}
#accordion .acco_list li.select p{opacity: 1;}
#accordion .acco_list li.select .more_btn{display: block;}
#accordion .acco_list li.select img{opacity: 0.74;}   

#m_accordion{display: none;}
}


























/* Tablet 세로 */
@media screen and (min-width:601px) and (max-width:900px) {
/* common */
.title{font-size: 1.7em; font-weight: 700;}

/* main_banner */
#main_banner{position: relative; overflow: hidden;}
#main_banner video{position: relative; display: block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; transform: scale(1.01); opacity: 1;}
#main_banner .title{position: absolute; left: 50%; bottom: 15%; width: 80%; text-align: center; transform: translateX(-50%);}

/* your_world */
#your_world{position: relative; padding: 100px 0;}
#your_world .your_wrap{width: 92%; margin: 0 auto;}
#your_world .your_wrap p{font-size: 1em; padding: 60px 0 40px 0;}
#your_world .your_list{position: relative; overflow: hidden; margin-top: 100px;}
#your_world .your_list ul{position: relative; width:200%;}
#your_world .your_list ul::after{content: ""; display: block; clear: both;}
#your_world .your_list ul li{float: left; width: 23%; margin: 0 1%; border-radius: 10%; overflow: hidden;}
#your_world .your_list ul li img{width: 100%;}
#your_world .your_btn{position: absolute; top: 95%; left: 50%; transform: translate(-50%,-50%); width: 150px; display: flex; justify-content: space-between;}
#your_world .your_btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer;  padding: 10px;}
#your_world button:hover{background-color: rgba(255,255,255,1);}

/* tech */
#tech{position: relative; padding: 100px 0;}
#tech .tech_wrap{width: 92%; margin: 0 auto; display: flex; flex-direction: column; align-items: end;}
#tech .tech_wrap p{font-size: 1em; text-align: end; padding: 60px 0 40px 0;}
#tech .tech_bg1{position: absolute; left: 40px; bottom: 78%; z-index: -1; width: 200px; height: 100px;}
#tech .tech_bg1 img{width: 100%;}
#tech .tech_bg2{position: absolute; right: 30px; bottom: 10%; z-index: -1; width: 100px; height: 100px; transform: rotate(45deg);}
#tech .tech_bg2 img{width: 100%;}

#tech .swiper-wrapper .box a{display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff;}
#tech .swiper-wrapper .box a p{text-align: center; width: 88%; font-size: 1em; padding-bottom: 10px;}
#tech .swiper-wrapper .box a .box_logo1{width: 100%; padding-bottom: 20px;}
#tech .swiper-wrapper .box a .box_logo2{width: 35%;}

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 250px;
    height: 350px;
    display: flex;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

/* vision */
#vision{position: relative; padding: 100px 0;}
#vision .vi_wrap{position: relative; display: flex; flex-direction: column; align-items: center;}
#vision .vi_wrap h2{text-align: center; margin-bottom: 50px;}
#vision .vi_wrap .vi_text{position: relative; background-color: #fff; width: 92%; display: flex; flex-direction: column; align-items: center;}
#vision .vi_wrap .vi_text>p{padding: 50px 0; text-align: center; font-size: 1.5em; font-weight: 700; opacity: 0;}
#vision .vi_wrap .vi_text ul{display: flex; width: 95%; justify-content: space-between; align-items: center;}
#vision .vi_wrap .vi_text ul li{width: 32%; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0;}
#vision .vi_wrap .vi_text ul li img{width: 60px;}
#vision .vi_wrap .vi_text ul li h3{font-size: 1.25em; font-weight: 700; padding: 30px 0 40px 0;}
#vision .vi_wrap .vi_text ul li p{font-size: 1em; text-align: center; padding-bottom: 50px;}

/* flow */
#flow{position: relative; overflow: hidden; height: 100px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%)}
#flow .flow_wrap{position: absolute; left: 0; width: 4000px; top: 50%; transform: translateY(-50%); display: flex;}
#flow .flow_wrap li{font-size: 2em; font-weight: 700; color: #fff; width: 500px;}

/* accordion */
#accordion{position: relative;}
#accordion .acco_list{position: relative; display: flex;}
#accordion .acco_list li{position: relative; width: 25%; transition-duration: 0.5s; transition-timing-function: linear; overflow: hidden;}
#accordion .acco_list li h2{font-size: 1.22em; font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap; transition-duration: 0.5s; transition-timing-function: linear;}
#accordion .acco_list li p{font-size: 1em; width: 80%; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition-duration: 0.7s;}
#accordion .acco_list li .more_btn{position: absolute; left: 50%; top: 65%; transform: translate(-50%,-50%); transition-duration: 0.5s; display: none;}
#accordion .acco_list li img{opacity: 0.25; transition-duration: 0.7s; height: 400px;}

#accordion .acco_list li.select{width: 70%;}
#accordion .acco_list li.select h2{top: 35%; transform: translate(-50%, -50%) rotate(0deg);}
#accordion .acco_list li.select p{opacity: 1;}
#accordion .acco_list li.select .more_btn{display: block;}
#accordion .acco_list li.select img{opacity: 0.74;}   

#m_accordion{display: none;}
}
    
    
    
  


















/* Mobile */
@media screen and (max-width:600px) {
/* common */
.title{font-size: 1.3em; font-weight: 700;}

/* main_banner */
#main_banner{position: relative; overflow: hidden;}
#main_banner video{position: relative; display: block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; transform: scale(1.01); opacity: 1;}
#main_banner .title{position: absolute; left: 50%; bottom: 15%; width: 80%; text-align: center; transform: translateX(-50%);}

/* your_world */
#your_world{position: relative; padding: 80px 0;}
#your_world .your_wrap{width: 92%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#your_world .your_wrap p{font-size: 1em; padding: 60px 0 40px 0; text-align: center;}
#your_world .your_list{position: relative; overflow: hidden; margin-top: 100px;}
#your_world .your_list ul{position: relative; width: 200%;}
#your_world .your_list ul::after{content: ""; display: block; clear: both;}
#your_world .your_list ul li{float: left; width: 23%; margin: 0 1%; border-radius: 10%; overflow: hidden;}
#your_world .your_list ul li img{width: 100%;}
#your_world .your_btn{position: absolute; top: 95%; left: 50%; transform: translate(-50%,-50%); width: 150px; display: flex; justify-content: space-between;}
#your_world .your_btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer;  padding: 10px;}
#your_world button:hover{background-color: rgba(255,255,255,1);}

/* tech */
#tech{position: relative; padding: 80px 0;}
#tech .tech_wrap{width: 92%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#tech .tech_wrap p{font-size: 1em; text-align: center; padding: 60px 0 40px 0;}
#tech .tech_bg1{position: relative; margin-bottom: 40px; display: flex; justify-content: center; align-items: center;}
#tech .tech_bg1 img{width: 100px;}
#tech .tech_bg2{position: relative; margin-top: 40px; display: flex; justify-content: center; align-items: center;}
#tech .tech_bg2 img{width: 100px;}

#tech .swiper-wrapper .box a{display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff;}
#tech .swiper-wrapper .box a p{text-align: center; width: 88%; font-size: 1em; padding-bottom: 10px;}
#tech .swiper-wrapper .box a .box_logo1{width: 100%; padding-bottom: 20px;}
#tech .swiper-wrapper .box a .box_logo2{width: 35%;}

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 200px;
    height: 300px;
    display: flex;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

/* vision */
#vision{position: relative; padding: 80px 0;}
#vision .vi_wrap{position: relative; display: flex; flex-direction: column; align-items: center;}
#vision .vi_wrap h2{text-align: center; margin-bottom: 50px;}
#vision .vi_wrap .vi_text{position: relative; background-color: #fff; width: 92%; display: flex; flex-direction: column; align-items: center;}
#vision .vi_wrap .vi_text>p{padding: 50px 0; text-align: center; font-size: 1em; font-weight: 700; opacity: 0;}
#vision .vi_wrap .vi_text ul{display: flex; width: 95%; flex-direction: column; justify-content: space-between; align-items: center;}
#vision .vi_wrap .vi_text ul li{width: 92%; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0;}
#vision .vi_wrap .vi_text ul li img{width: 40px;}
#vision .vi_wrap .vi_text ul li h3{font-size: 1.25em; font-weight: 700; padding: 30px 0 40px 0;}
#vision .vi_wrap .vi_text ul li p{font-size: 1em; text-align: center; padding-bottom: 50px;}

/* flow */
#flow{position: relative; overflow: hidden; height: 100px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%)}
#flow .flow_wrap{position: absolute; left: 0; width: 4000px; top: 50%; transform: translateY(-50%); display: flex;}
#flow .flow_wrap li{font-size: 2em; font-weight: 700; color: #fff; width: 500px;}

/* accordion */
#accordion{display: none;}

#m_accordion{position: relative;}
#m_accordion .m_list{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition-duration: 0.5s;}
#m_accordion .m_text{position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#m_accordion .m_list img{width: 100%; opacity: 0.5;}
#m_accordion>div h2{font-size: 1.3em; font-weight: 700; transition-duration: 0.5s;}
#m_accordion>div p{font-size: 1em; margin: 20px; transition-duration: 0.5s;}
}