@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1024px){
body{ font-size: 14px;}
.PC{ display:none !important}
.PHONE{ display:block !important}	
.box1{width:1200px; max-width:95%; margin:0 auto; position:relative;}
.PC1024{ display:none !important}
.PHONE1024{ display:block !important}	

#header .gnb_wrap .gnb > li .dp1{margin:0; min-width:5em;}

#header .etc_wrap .sns_list ul li{margin-right:2px;}

html.l-nav-open .l-nav{width:30%;}

.mainVisual .img.flex-active-slide .slogan .line.line4{width:30%;}
.mainVisual .img .slogan .line.line5{left:30%;}

.main_nav{height:160px; margin-top:50%;}

.maincon_1 .main_ctt_box ul li{ /*flex-basis:30%;*/}
.maincon_1 .main_ctt_box ul li .txt_box .txt_ctt{min-height:2rem;}

.maincon_3_1 .main_ctt_box .PT_wrap{width:880px; margin:0 auto;}


.dp1_1.dp2_1 .grt_box .img_box{display:flex; align-items:center;}

.dp1_1.dp2_2 .his_box .history_wrap .his_line{left:30px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li{flex-wrap:wrap; flex-direction:column; width:100%; margin:0; padding-left:40px; padding-right:40px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li > *{width:100%;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n-1) .his_years{text-align:left; padding-left:3em; padding-right:0;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n-1) .his_years:after{right:0; left:-8px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_years:after{left:-8px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl{flex-direction:row;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl .his_date{margin-left:0; margin-right:30px;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl .his_date:after{right:-24px; left:auto;}

.root_daum_roughmap{width:100% !important;}

.gnb_wrap{display:none;}

.sub2_1_v2 .prod_wrap > li .in .txt_box{background:#f5f5f5;}

.swiperBtn.ab_l{ position: relative; left: 0;}
.swiperBtn.ab_r{ position:relative; right: 0;}
.swiperBtn{ width: 4em;}

.mprod_list_wrap .prod_wrap{ width: 31.5%;}
.prod_detail_wrap .inner{ flex-direction:column;}
.prod_detail_wrap .inner .slide_wrap{ width: 100%; margin: 0 auto;}
.prod_detail_wrap .inner .slide_wrap .control_box{ display: none;}
.prod_detail_wrap .inner .info_wrap{ width: 100%;}
.prod_detail_wrap .info_wrap .in{ padding: 2em 0 0 0;}
.prod_detail_wrap .info_wrap .in .prod_info{ height: 230px;}
}

@media screen and (max-width:768px){
body{ font-size: 12px;}
.PC768{ display:none !important}
.PHONE768{ display:block !important}	


.main_nav{height:160px; margin-top:80%;}

.maincon_3_1 .main_ctt_box .PT_wrap .slides li{box-shadow:none;}
.maincon_3_1 .main_ctt_box .PT_wrap .slides li:first-of-type{margin-left:0;}
.maincon_3_1 .main_ctt_box .PT_wrap{width:600px; margin:0 auto;}
.maincon_3_1 .main_ctt_box .PT_wrap .slides li{width:285px !important;}

.maincon_3_2 .ctt_box{padding:48px;}


.dp1_1.dp2_1 .grt_box{flex-direction:column-reverse;}
.dp1_1.dp2_1 .grt_box > div{width:100%;}
.dp1_1.dp2_1 .grt_box > .txt_box{margin-top:2em;}

.dp1_1.dp2_2 .his_box .his_top .his_ctt ul{flex-wrap:wrap;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li{width:33.33%; flex:1 1 33.33%;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li:nth-of-type(n+3){margin-bottom:3em;}

.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(2){width:50%;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(3){width:50%;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(4){width:100%;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(5){display:block;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(5) ul{flex-wrap:wrap;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(5) ul li:first-of-type{margin-left:0;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(5) ul li{margin-top:10px;}

.board_photo_wrap > li{width:33% !important;}

.sub2_1_v2 .prod_wrap > li .in .txt_box{padding:.5em 1em 1em 1em;}
.sub2_1_v2 .prod_wrap > li .in .tit{font-size:1em;}

.dp1_2 .prod_ctt_box .prod_top{flex-direction:column; max-height:none;}
.dp1_2 .prod_ctt_box .prod_top .img_box{width:100%;}
.dp1_2 .prod_ctt_box .prod_top .sum_box{width:100%;}

.sub-tab-list-style2 ul .selected{ width: 25%;}
.maincon_1 .main_ctt_box ul > li{ padding: 1.5em;}
.c_boxwrap .icon_box{ display: none;}
.c_boxwrap .txt_box > p{ padding: 1.5em;}
}

@media screen and (max-width:500px){
.PC500{ display:none !important}
.PHONE500{ display:block !important}	

.l-nav{z-index:10000;}

#header .etc_wrap .sns_list{display:none;}

html.l-nav-open .l-nav{width:100%;}
#LeftNavigation .sns_list{width:100%; margin-top:.5em;}
#LeftNavigation .sns_list ul{display:flex; flex-wrap:nowrap; justify-content:space-around;}
#LeftNavigation .sns_list ul li{width:50px; height:50px; text-align:center; line-height:50px;}
#LeftNavigation .sns_list ul li a{display:block; width:100%; height:100%;}

.mainVisual .img .slogan{padding: 70px 0 0 0; width: 90%;}
.mainVisual .img .slogan .t1{font-size:2.5em;}
.mainVisual .img .slogan .t2{ font-size: 1.25em; font-weight: 500;}
.mainVisual .img.flex-active-slide .slogan .line{display:none;}


.main_nav{height:100%; margin-top:inherit; transform:none;}
.main_nav .nav{position:relative; right:-50%; bottom:-30%; opacity:.1; transition:.3s;}
.main_nav .nav.op1{opacity:1;}
.fl_wrap .link li:last-of-type{display:none;}
#footer .link_wrap .link > li > a:first-child{margin-right:1.5em;}
#footer .info_wrap{display:flex; flex-wrap:wrap; flex-direction:column;}
#footer .info_wrap .f_logo{width:100%;}
#footer .info_wrap .info{width:100%; margin-top:1em;}

#contents .subNav_wrap .nav div.depth_2 p.tt{padding:0 0 0 10px; min-width:140px;}
#contents .subNav_wrap .nav div.depth_2 p.tt:after{right:10px;}

#contents .subNav_wrap .nav .home .tt{width:55px;}
#contents .subNav_wrap .nav div[class^="depth"] .tt{padding:0 15px; min-width:100px;}

.maincon_1 .main_ctt_box ul{flex-direction:column;}
.maincon_1 .main_ctt_box ul li{display:flex; flex-wrap:nowrap; flex-basis:auto;}
.maincon_1 .main_ctt_box ul li .img_box{display:none;}
.maincon_1 .main_ctt_box ul li .txt_box{width:100%; padding:1.25em;}
.maincon_1 .main_ctt_box ul li .txt_box .txt_ctt{margin-bottom:.75rem;}
.maincon_1 .main_ctt_box ul li .txt_box .more_btn_1{float:right;}

.maincon_3_1 .main_ctt_box .PT_wrap{width:300px; margin:0 auto;}
.maincon_3_1 .main_ctt_box .PT_wrap .slides li{width:300px !important;}

.maincon_3_2 .ctt_box ul{flex-direction:column;}
.maincon_3_2 .ctt_box ul li:first-of-type{margin-bottom:2em;}
.maincon_3_2 .ctt_box ul li:last-of-type .more_btn_3{float:right;}

.maincon_4 .notice_wrap .notice_slide .flex-direction-nav{display:none;}
.maincon_4 .notice_wrap .notice_slide .slides li .notice_date{right:0;}
.maincon_4 .main_ctt_box ul li{ width: 100%;}
.maincon_4 .main_ctt_box ul li .img_box{display:none;}
.maincon_4 .main_ctt_box ul li .txt_box .txt_ctt{min-height:80px;}

.dp1_1.dp2_2 .his_bg{height:160px; padding-top:25px;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li .li_icon{margin-bottom:40px;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li .li_icon:after{height:30px; bottom:-50px;}
.dp1_1.dp2_2 .his_box .his_top .his_ctt ul li .li_tit{font-size:1em; min-height:38px;}

.dp1_1.dp2_2 .his_box .history_wrap .his_lists li{box-sizing:border-box;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li .his_ctt_wrap dl{flex-wrap:wrap; margin-bottom:1.5rem;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n-1) .his_ctt_wrap dl .his_date{display:block; width:100%; margin-bottom:.5em; font-size:1.25em;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n-1) .his_ctt_wrap dl .his_date:after{display:none;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl .his_date{display:block; width:100%; margin-bottom:.5em; font-size:1.25em;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li:nth-of-type(2n) .his_ctt_wrap dl .his_date:after{display:none;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li .his_ctt_wrap dl:not(:first-of-type) .his_date .his_year{opacity:1;}
.dp1_1.dp2_2 .his_box .history_wrap .his_lists li .his_ctt_wrap dl .his_ctt{}


.maincon_4 .main_ctt_box ul{ flex-direction:column;}

.root_daum_roughmap{height:300px !important;}

.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(2){width:100%;}
.dp1_1.dp2_3 .info_box > ul > li:nth-of-type(3){width:100%;}

.board_photo_wrap > li{width:50% !important;}
.certification .board_photo_wrap dd{height:231px !important;}

.sub2_1_v2 .prod_wrap > li{width:50% !important;}

.dp1_4.dp2_2 .online .board_st .input_st.w1{width:48%;}
.dp1_4.dp2_2 .online .board_st .input_st.w2{width:30%;}

.sub-tab-list-style2 ul .selected{ width: 50%;}

.sub_company_greetings{ flex-direction: column;}

.maincon_1 .main_ctt_box ul{ flex-direction: column;} 
.maincon_1 .main_ctt_box ul > li{ width: 100%;}
.sub_company_greetings .img{ width: 100%; height: 16em;}

.sub_company_greetings .con{ width :100%; margin-top: 3em;}
.bg_grayb:before{ display: none;}
#footer .info_wrap .f_logo > img{ width: 40%;}
.tab_idx.fs3 > li{ flex: 1 1 33.33%;}
.history_wrap .history > li .list .detail .tt{ padding: 0;}

.mprod_list_wrap .prod_wrap{ width: 48%;}
input[type=text].input_st{ width: 8em;}
.mprod_list_wrap .prod_wrap .prod_st .inner{ padding: 1em;}
.mprod_list_wrap .prod_wrap .prod_st .tit_wrap .t2{ -webkit-line-clamp: 3;}

#header .h_in_wrap{ /*display: flex; justify-content: space-between;*/}
#header .logo > a{ width: 60%;}
.p_btn .btn_list > li > a{ padding: 0.8em 1em;}
.sub_company_greetings .con .tit1{ margin-bottom: 1em;}
.w_form_tit{ width: 25% !important;}
.input_st.c1.re.m_w{ font-size: 1.25em;}
.input_st.c1.re.m_w .xi{ font-size: 1.25em;}
.nav_top{ margin-top: 3em;}
}

@media screen and (max-width:360px){
.PC360{ display:none !important}
.PHONE360{ display:block !important}	

.mainVisual .flex-control-paging{bottom:20%;}

.maincon_3_1 .main_ctt_box .PT_wrap{width:260px; margin:0 auto;}
.maincon_3_1 .main_ctt_box .PT_wrap .slides li{width:260px !important;}

.maincon_4 .notice_wrap .notice_slide .tt span{padding:10px;}
.maincon_4 .notice_wrap .notice_slide .slides li .notice_tit{margin-left:78px;}
.maincon_4 .main_ctt_box ul li{width:100%;}
.maincon_4 .main_ctt_box ul li .txt_box .txt_ctt{min-height:40px;}
#contents .subNav_wrap .nav div.depth_2 p.tt{ min-width: 120px;}
}

@media all and (orientation:landscape){
}