@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1680px){	
body{ font-size:15px;}

}

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

}

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

}

@media screen and (max-width:1280px){	
body{ font-size:14px;}

}

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

}

@media screen and (max-width:1024px){
.pcHide {display: block !important; }
  
html.hidden,
html.hidden #header .head_wrap{ margin-right:0 !important;}

[data-aos^=fade][data-aos^=fade]{ opacity:1 !important; transform:translateZ(0) !important;}

.moAc{ text-align:center !important;}
.moAl{ text-align:left !important;}
.moBr br{ display:block !important;}

/* .goTop{ display:none;} */

/* Reset */
.box1, 
.box2,
.box3,
.box4 {width: 100%; max-width: 92%;}
#contents {max-width: 100vw; overflow: hidden;}


/* Header */
#header .gnb_wrap {display: none;}
/* #header.allOpen .all_wrap .btn_all .btn_in .ham {display: none;} */
#header.allOpen .all_wrap .btn_all .ham {height: auto;}
#header .all_wrap {justify-content: end;}
#header .all_wrap .all {width: 80vw; left: auto; right: 0; box-shadow: 0 0 20px rgba(0,0,0,0.1);}
#header .all_wrap .all .allconWrap {padding: 10vh 6vw;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li {flex: 1 1 100%; max-width: 49%;}

/* Main - Banner */
.visualSlider_wrap {height: 100vh;}

/* Section 1 */
#section1 {overflow: hidden; background: none; transform: translate(0);}
#section1 .sec1_bg {background: url(../images/main/prod_bg.jpg); position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; z-index: -1;}
#section1 .sec1_swiper_con .item {height: auto;}
/* Contents */
#contents .sub_tab .gnb > li .dp2 > li > a:before {display: none;}  

/* Sub - Company */
.sub_company_greetings {flex-direction: column-reverse; margin-bottom: 3em;}
.sub_company_greetings .con .tit1 {margin-top: 0;}
.sub_company_greetings .img,
.sub_company_greetings .con {width: 100%;}
.sub_company_greetings .img {height: 300px; overflow: hidden; }
.sub_company_greetings .img > img {object-fit: cover; object-position: center center; width: inherit; height: inherit;}
.sub_company_greetings .sign {padding-right: 1.5em;}
.sub_company_greetings .con .tt1 {font-size: 1.125em;}

/* Sub - Vision */
.vision_con  {gap: 1em; align-items: start !important; flex-direction: column;}
.vision_bg {padding: 0 0 3em 0;}
.vision_con.reverse {flex-direction: column;}
.vision_con .txt_wrap {padding: 0;}
.vision_con .txt_wrap .sub_tit {margin-bottom: 1em;}
.vision_con .txt_wrap .info_txt {font-size: 1.25em;}
.vision_con.reverse .txt_wrap {flex-direction: column;}
.vision_con.reverse .txt_wrap .rev_txt {width: 100%;}
.vision_con .img_wrap {flex: 1 1 100%; height: auto; width: 100%;}

/* Sub - History */
.history_area .history_lst {margin: 0;}
/* .history_area .history_lst .list {display: flex;} */
.history_area .history_lst .list dt {margin: 0;}
.history_area .history_lst .list dd {display: flex; align-items: center;}

/* Sub - Certificate */
.cert_wrap .inner {flex-wrap: wrap;}
.cert_wrap .inner .list {max-width: calc(50% - 1em); flex: 1 1 calc(50% - 1em);}

/* Sub - Ci */
.sub_tit > p {font-size: 1.5em; padding: 0 3em;}
.ci_con .logo_wrap {gap: 2em;}
.ci_con .color_wrap .color_info {gap: 1em;}
.ci_wrap .txt_wrap .info_txt {padding: 0 3em;}

/* Sub - Location */
.map_view {padding: 1em 0 0 0;}

/* Sub - Product */
.intro_wrap .intro_con {max-width: 92%;}

.compare-container {flex-direction: column;}
.conven-wrap:after {bottom: -1.5em; right: 50%; transform: translate(50%, -10%) rotate(90deg); top: auto;}

.prod_list .list .items {gap: 1em;}
.prod_list .items .item .prod_img {height: auto;}

.layer_wrap .layer_img .img img {max-width: 30vw; width: 100%;}
.layer_wrap .layer_img .img .title h3 {font-size: 1.25em;}

.compare_graph .inner-con {flex-direction: column;}
.compare_graph .right .graph-info > li .xi {flex: 1 1 0;}

.intro_wrap .advan_bg {padding-top: 2em;}
.intro_wrap .advan_bg .tt_wrap ul {gap: 1em; flex-wrap: wrap;}
.intro_wrap .advan_bg .tt_wrap ul > li:before {right: -1.5em; top: 30%; transform: translate(-60%, -50%);}

.compare-container {gap: 3em;}
.intro_wrap .advan_bg.bg_w .tt_wrap ul {flex-direction: row;}
.intro_wrap .advan_bg.bg_w .tt_wrap ul > li {flex: 1 1 calc(24% - .5em); flex-direction: column;}
.intro_wrap .advan_bg.bg_w .tt_wrap ul > li:first-child {padding-top: 2em;}
.advan_bg.bg_w .tt_wrap ul > li .img_box {margin-right: 0;}
.intro_wrap .advan_bg.bg_w .tt_wrap ul > li:before {right: -1.5em; top: 40%; transform: translate(-60%, -50%);}
.intro_wrap .advan_bg.bg_w .tt_wrap ul > li:nth-child(2):before {display: none;}
}

@media screen and (max-width:768px){
body{ font-size:13px;}

/* Header */
#header.allOpen .all_wrap .all {width: 75vw;}
#header .all_wrap .all .wrap_in .all_scroll {overflow-y: scroll;}
#header.allOpen .all_wrap .all .allconWrap {box-sizing: border-box;}
#header .all_wrap .all .allconWrap .tit {font-size: 3.75em;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li {max-width: 100%;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp1 .tt {font-size: 2em;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li ul li a {padding: .5em 1em;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp2 > li > a .tt {font-size: 1.25em;}
/* Contents */
#contents .sub_tit_wrap .tit {font-size: 2.25em;}
#contents .doc {padding: 2em 0 4em 0;}

/* Main */
/* Section 1 */
.main_tit .t2 {font-size: 1.5em;}

/* Section 2 */
#section2 .news_slider {flex-direction: column; overflow: visible; position: relative;}
#section2 .sec2_swiper_control { position: absolute; right: 0; top: -5.5em;}
#section2 .inner_item {flex: 1 1 100%; width: calc(100vw - 5%); overflow: hidden;}
#section2 .items .list {width: 33vw !important;}
#section2 .btn_wrap {margin-right: 0;}
#section2 .main_news .tit:before {opacity: 0;}

/* Section 3 */
#section3 .intro {gap: 1em;}

/* Sub - History */
.history_area .history_lst .list dt {text-align: left; width: auto;}

/* Sub - Certificate */
.cert_wrap .inner {gap: 1em;}
.cert_wrap .inner .list {max-width: calc(50% - .5em); flex: 1 1 calc(50% - .5em);}

/* Sub - Ci */
.sub_tit > p {font-size: 1.5em;}
.ci_con .logo_wrap {flex-direction: column-reverse; padding: 0 0 3em 0; margin-top: 2em;}
.ci_wrap .txt_wrap .info_txt {padding: 0;}
.ci_wrap .typo_wrap .typo_img .img_re img {height: auto;}

/* Sub - Product */
.mockup-wrap .mock-up {background-position: 50% 0;}
.advan_bg .tt_wrap ul > li .img_box {width: 80px; height: 80px;}
.advan_bg.bg_w .tt_wrap ul > li .txt_box > h3 {font-size: 1.125em;}
.prod_list.mock .list .items {transform: scale(.4) translateY(-50%);}
.prod_list.mock .items .item .prod_img {height: auto;}
.mock-info {margin-top: -3em;}

.vertical_chart_box .axis_x .item {margin-right: 0;}
.prod_list .items .item .item_tit {padding: .5em .75em; z-index: 111;}
.prod_list .items .item .item_tit .tt {font-size: 1em;}

.vertical_chart_box .chart_box {padding-left: 0;}
.vertical_chart_box .axis_x .graph {width: 2.5em;}

.sub_tit_w > p {font-size: 1.5em;}
.prod_wrap .prod_tab .tab_idx > .tab_btn > a .va_tt {font-size: 1em;}

.prod_wrap .prod_tab {margin: 2em 0 3em 0;}

.compare_graph .left {padding: 1em 1em 2em 1em;}
}

@media screen and (max-width:500px){
/* Contents */
#contents .sub_visual_wrap .wrap_in {height: 23em;}
#contents .sub_visual_wrap .wrap_in .twrap .t2 {font-size: 1.85em; padding: 0 1em;}

/* Main Banner */
.visualSlider_wrap .slogan .t1 {font-size: 2em; margin-top: 1em;}
.visualSlider .el {background: #000;} 

/* Section 1 */
.main_tit .t1 sup {font-size: 1.125rem;}
.main_tit .t1.tt {font-size: 1.125em;}
.sec1_swiper_control  {display: none;}
#section1 .sec1_paging_num {display: block; text-align: center; margin-right: 0; }
#section1 .swiper-pagination-bullet {background: #fff !important; margin: 0 0.25em !important;}


/* Section 2 */
#section2 .items .list {padding: 0; padding-left: 1em;}
#section2 .main_news .tit .t1 {padding-left: .5em;}

/* Section 3 */
#section3 {padding: 4em;}
#section3 .intro {flex-direction: column;}
#section3 .intro > li > a {padding: 1.5em 5em;}
#section3 .intro > li > a .tt {font-size: 1.25em;}
/* Footer */
#footer .foot_wrap .wrap_in {flex-direction: column-reverse;}
#footer .foot_wrap .wrap_in .sitemap_wrap {width: 100%; flex-direction: column-reverse;}
#footer .foot_wrap .wrap_in .sitemap_wrap .inner .gnb {display: flex; gap: 1em;}
#footer .foot_wrap .wrap_in .info_wrap .logo > a {margin-top: 1em;}

/* Sub - Product */
.advan_bg .tt_wrap ul > li .txt_box > p {font-size: 1em;}
.advan_bg .tt_wrap ul > li .txt_box > h3 {font-size: 1.25em;}
.sub_tit > p {padding: 0 1em;}

.advan_bg .tt_wrap ul > li .img_box {width: 60px; height: 60px;}
.compare-container {padding-top: 0;}
.prod_list.mock .list .items {transform: scale(.4) translateY(-55%);}
.intro_wrap .result_con {margin-top: 1em;}
.sub_tit_w > p > b {display: block;}

.prod_wrap .prod_tab .tab_idx {flex-wrap: wrap; border-radius: 20px;}
.prod_wrap .prod_tab .tab_idx > .tab_btn {flex: 1 1 33%;}
.prod_wrap .prod_tab .tab_idx > .tab_btn:first-child, 
.prod_wrap .prod_tab .tab_idx > .tab_btn:last-child {border-radius: 0;}

.prod_list .items .item .info .size {font-size: 1em;}
.prod_list .list .items { flex-wrap: wrap;}
.prod_list .list .items .item {flex: 1 1 33%;}
.prod_list .list .items .item.iai {order: 2;}
.prod_list .list .tit .line {width: 65%;}


.layer_wrap {overflow: hidden;}
.layer_wrap .layer_img {justify-content: start; overflow-x: scroll;}
.layer_wrap .layer_img::-webkit-scrollbar {display: none;}
.layer_wrap .layer_img .img {padding: .25em;}
.layer_wrap .layer_img .img .title {width: 80vw;}
.layer_wrap .layer_img .img img {max-width: 100%;}
.layer_wrap .layer_img .popClose {top: 2vh; right: auto; left: 90vw; position: fixed;}

.vertical_chart_box .axis_x .item .text_box {text-align: left; bottom: -30px;}
.vertical_chart_box .axis_x .item .text_box .day {font-size: .7em;}
.vertical_chart_box .axis_x .graph .time.data2 {z-index: 1111;}
.blind {font-size: .8em;}
.blind.mint {font-size: .875em; top: -20%; left: 90%; color: #22d3c5;}
.blind {z-index: 1111;}
.compare_graph {overflow: hidden;}
.compare_graph .left {padding: 1em 1em 0 1em;}
.compare_graph .left .shame-box .shame-arrow {width: 30px;}
.compare_graph .right .graph-info > li {gap: 1em;}

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

}

@media screen and (max-width:380px){
body{ font-size:12px;}

}

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

}

@media screen and (max-width:280px){
body{ font-size:10px;}

}

@media all and (max-width:1024px) and (orientation:landscape){

}

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

}