@charset "utf-8";
/* CSS Document */
.PC{ display:none !important}
.PHONE{ display:block !important}

#header .gnb_area .ham_btn.PHONE{ display:inline-block !important;}

@media screen and (max-width:1400px){
#header .gnb_area .gnb{ padding-left:0;}
#header .gnb_area{ height:80px;}
}



@media screen and (max-width:1200px){
.PC{ display:none !important}
.PHONE{ display:block !important}
body{ font-family:'notokrR', sans-serif; font-size:14px}
.box0{ padding:0; width:100%; margin:0 auto; position:relative}
.box1{width:92%; margin:0 auto; position:relative;}
.box2{ width:90%; margin:0 auto; position:relative}


#contents .sub_visual_wrap .vm_wrap{ height:18em;}

#header .gnb_area{ height:68px;}
#header .gnb_area .right_menu{ right:0;}
#header .gnb_area .logo .logo1{ left:0;}
#header .gnb_area .ham_btn{ height:68px; width:68px;}
#header .gnb_area .right_menu .contact_dv{ height:68px; width:68px;}
#header .gnb_area .right_menu .contact_dv .xi{ line-height:68px;}

#header .gnb_wrap .gnb > li .dp1{ min-width:5em}
#header .logo{ top:.5em; left:1em}
#header .gnb_wrap{ padding:0 5em 0 13em}
#header .all_wrap .all .tit_wrap .btn.close{ margin-right:0}

.main_con2 .con3_ul > li{ margin-left:0}
.main_con2 .sec2_cont{ margin-left:0}
.main_con2 .con3_ul > li{ width:25%}

#contents .subNav_wrap .inner{ display:none}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li.m_0001_{ display:none;}

.section5 .main_con3 .sec4_in li{ margin-left:10px;}


}


@media screen and (max-width:900px){
#header .gnb_area .gnb{ display:none;}
}



@media screen and (max-width:766px){
body{ font-family:'notokrR', sans-serif; font-size:14px}
.box0{ padding:0; width:100%; margin:0 auto; position:relative}
.box1{width:92%; margin:0 auto; position:relative;}
.box2{ width:90%; margin:0 auto; position:relative}
.PC{ display:none !important}
.PHONE{ display:block !important}

#contents .sub_visual_wrap .slogan{ margin-top:3em;}
#contents .sub_visual_wrap .slogan .t2{ font-size:1.250em;}
#contents .sub_visual_wrap .sub_gnb_wrap .box1{ width:100% !important;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li{ width:16.666% !important}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li > a{ height:2.5em;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li > a .vm_tt{ font-size:.750rem;}

#header .gnb_area .logo .logo1{ top:10px; max-height:60%;}

#header .gnb_area .gnb{ display:none;}
#header .gnb_wrap{ display:none}
#header .gnb_area .right_menu .contact_dv{ display:none;}
#header .gnb_area .ham_btn{ position:absolute; right:0;}
#header .ham_menu{ display:none !important;}
#header .pr{ background:#fff; height:4.625em}
#header .logo{ left:1em; top:0}

#header .logo img{ max-height:70%}
#header .pr{ height:4.25em}
#header .va_wrap{ height:4.25em}
#header .all_wrap .all .tit_wrap .btn.close{ margin-right:0}
#contents .sub_visual_wrap .va_wrap{ height:18em}
#header .all_wrap .gnb > li:hover > .dp1{ font-size:.875em}
#header .all_wrap .gnb > li .dp1{ font-size:.875em}
#header .all_wrap .gnb > li .dp2 > li > a{ font-size:.875em}

.l-nav .nav_logo > img{ height:35px;}
.l-nav .nav_logo{ text-align:left;}

#footer .menu_wrap{ display:none;}
#footer .info_wrap .logo{ display:none;}
#footer .info_wrap .info > li{ line-height:1.5;}
#footer .info_wrap .info > li:nth-child(2) span{ padding-right:.5em;}
#footer .info_wrap .info > li:nth-child(2) span:before{ display:none;}
#footer .goTop{ position:fixed; z-index:999; right:2%; bottom:3em; width:4.5em; height:4.5em; background:#535b69; color:#fff; border-radius:50%; visibility:hidden; opacity:0; transition:.3s;}
#footer .goTop .tt{ display:block; font-size:.750em; font-weight:600;}
#footer .goTop:hover{ background:#1b5b8f;}
.scroll #footer .goTop{ visibility:visible; opacity:1;}



#mainNav{ display:none}
#mainVisual .slogan{ top:30%;}
#mainVisual .slogan .t1{ font-size:2em;}
#mainVisual .slogan .t2{ font-size:1.750em}
#mainVisual .btn_wrap .main_paging{ width:120px;}
#mainVisual .btn_wrap .btn{ margin:0 10px;}

.main_tit .t1{ font-size:1.750em}
.main_tit .t2{ padding:0 2em; font-family:'notokrR'; margin-top:1em; font-size:.875em;}
.main_tit{ padding-top:7em}
.main_tit .tt_more{ margin:20px 0;}


.section1 .product_slide_wrap .product_slide .item{ width:50%; margin-bottom:.5em;}
.section1 .product_slide_wrap .product_slide .item .inner{ margin:0 5px;}
.section1 .product_slide_wrap .product_slide .item .inner .border_dv .t_img > img{ min-height:100px;}
.section1 .product_slide_wrap .product_slide .item .inner .border_dv .tt{ padding:1em 0;}
.section1 .product_slide_wrap .product_slide .item .inner .border_dv .tt .tit{ font-size:.875em;}

.section2 .sec2_in .product_ul .item{ width:50%;}
.section2 .sec2_in .product_ul .item .inner{ margin:0 5px;}
.section2 .sec2_in .product_ul .item .inner .border_dv .tt{ padding:1em 0 0 1em;}
.section2 .sec2_in .product_ul .item .inner .border_dv .tt .btn{ bottom:.5em; background:none;}
.section2 .sec2_in .product_ul .item .inner .border_dv .tt .tit{ font-size:1em;}
.section2 .sec2_in .product_ul .item .inner .border_dv .tt .tit_en{ font-size:.750em; display:inline-block; width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.section2 .sec2_in .product_ul .item .inner .border_dv .t_img{ height:100px;}

.section3 .product_equ_wrap .product_slide .item .inner .border_dv{ margin:0 40px;}
.section3 .product_equ_wrap .product_slide .item .inner .border_dv .t_img{ height:220px;}
.section3 .product_equ_wrap .control_arrow .next{ right:0; left:auto;}
.section3 .product_equ_wrap .control_arrow .prev{ left:-2em;}
.section3 .product_equ_wrap .control_arrow > li .xi{ width:40px; height:40px; line-height:40px;}


.section4 .top_bg{ padding:2em 0;}
.section4 .top_bg .t1{ font-size:.875em; padding:0 3em; line-height:1.5;}
.section4 .partner ul{ margin-left:-5px;}
.section4 .partner ul li div{ margin:5px 0 5px 5px;}
.section4 .partner ul li div .img span{ height:45px;}

.section5 .main_con3 .sec4_in li{ width:95%; padding:20px 0;}
.section5 .main_con3 .con5_faq_wrap input[type=text].input_st, input[type=tel].input_st, .section5 .main_con3 .con5_faq_wrap input[type=password].input_st{ height:30px; line-height:30px;}
.section5 .main_con3 .con5_faq_wrap .con5_input .txt{ top:0;}
.section5 .main_con3 .sec4_in li .tt{ font-size:.875em;}
.section5 .main_con3 .con5_faq_wrap textarea.input_st{ height:50px !important;}
.section5 .main_con3 .con5_faq_wrap .con5_btn{ height:35px; line-height:35px; font-size:.875em;}
.section5 .main_con3 .sec4_in li .tx_box .tx.c1 > span{ font-size:.875em;}
.section5 .main_con3 .sec4_in li .tx_box .tx.p_f3 > span{ font-size:.875em;}
.section5 .main_con3 .sec4_in li.right .xi{ font-size:.875em !important}
.section5 .main_con3 .sec4_in li.right{ display:none;}


.greetings_wrap .left, .greetings_wrap .right{ width:100%;}
.greetings_wrap .tt{ font-size:1.125em;}
.greetings_wrap .tt_en{ font-size:.570em; letter-spacing:1.5px;}
.greetings_wrap .left .in_img{ margin-bottom:1em;}

.business_wrap .tt{ font-size:1.250em;}
.business_wrap .t1{ font-size:.875em;}
.business_wrap .wide_wrap > ul > li{ width:50%; margin-bottom:1em;}
.business_wrap .in{ margin:0 5px;}
.business_wrap .in > dl > dt{ font-size:1em;}
.business_wrap .in > dl > dd{ min-height:80px;}
.business_wrap .in > dl > dd > p{ font-size:.750em; padding-left:1em;}
.business_wrap .in > dl > dd > p:before{ top:6px;}
.business_wrap .in > p > img{ min-height:150px;}


.board_photo_wrap.photo2 > li{ width:50% !important;}
.wrap_map{ height:280px !important;}
.sub_map_wrap .map_info1 .t1{ font-size:.750em;}
.sub_map_wrap .map_info1 .t1 span{ line-height:1.5;}
.sub_map_wrap .btn_in .more{ height:20px !important; width:100px;}
.sub_map_wrap .btn_in .more.va_wrap{ height:20px !important;}
.sub_map_wrap .map_info2 > li .info{ margin:0 0 0 120px;}
.sub_map_wrap .map_info2 > li.bus .info span{ font-size:.875em}
.sub_map_wrap .bs1{ font-size:.750em;}
.sub_map_wrap .map_info2 > li.subway .info p, .sub_map_wrap .map_info2 > li.bus .info p{ font-size:.750em;}
.sub_map_wrap .map_info2 > li h3 .xi{ font-size:1.250em;}
.sub_map_wrap .map_info2 > li h3{ font-size:1.250em;}


.board_search{ font-size:.750em;}
.prod_list_wrap .list > li{ width:50%;}
.prod_list_wrap .list > li .prod_st .con_wrap{ padding:15px 10px;}
.prod_list_wrap .list > li .prod_st .con_wrap .tit{ font-size:1em;}
.prod_list_wrap .list > li .prod_st .con_wrap .t1{ font-size:.750em;}

.prod_wrap .TAB_WRAP.t_st{ margin-top:-2em;}
.prod_wrap .TAB_WRAP .tab_ul li > a{ font-size:.750em; height:45px; line-height:45px;}
.prod_wrap{ margin:0 -.5em 0 0}
.prod_wrap .prod{ width:50%; margin-bottom:1em}
.prod_wrap .prod .inner{ margin:0 .5em .5em 0}

.prod_view_wrap > ul > li .inner_box .inner_in{ min-height:180px;}
.prod_view_wrap > ul > li{ left:0; width:100%}
.prod_view_wrap .img_wrap .big{ margin:0 auto; width:93.333%}
.prod_view_wrap .img_wrap .small.st1{ margin-left:1em; width:96.333%}
.prod_view_wrap > ul > li .inner_box{ position:inherit; margin:0 auto; width:96%}
.prod_view_wrap .img_wrap .big .resize2 .re{}
.prod_view_wrap > ul > li .inner_box .t1{ font-size:1.125em}
.prod_view_wrap > ul > li .inner_box dl{ font-size:.875em}
.prod_view_wrap > ul > li .inner_box dl dd{ font-size:.875em;}
.prod_view_wrap > ul > li .inner_box dl dt{ font-size:.875em;}
.prod_view_wrap .btn_in .more{ height:2.5em; font-size:.875rem;}
.prod_view_wrap .btn_in .catalog{ height:2.5em; font-size:.875em;}
.cont_view_wrap .view_tit{ font-size:1.125em;}
.cont_view_wrap .view_tit_wrap p{ font-size:1em;}
.input_st.s3{ height:35px !important; line-height:35px !important;}
.cont_view_wrap .view_in_wrap .t1{ word-break:break-all;}
.cont_view_wrap .view_in_wrap .table_wrap{ overflow-x:scroll;}
.cont_view_wrap .view_in_wrap .table_wrap .table_st{ table-layout:inherit;}
.cont_view_wrap .note-video-clip{ width:100% !important; height:250px !important}

.inp_w7{ width:30% !important;}
.inp_w8{ width:40% !important}
.inp_w5{ width:40% !important}

.equipment_w .equipment_list > li{ width:50%;}
.privacy_area.st .privacy_box{ padding:0;}
.privacy_area.st .privacy_box .privacy_in{ height:250px; overflow-y:scroll;}


.inq_btn{ width:60%}
.inq_btn .btn{ height:50px}



/*================================================================================*/

#contents .subNav_wrap .gnb{ width:100%; margin:0 auto;}
#contents .subNav_wrap .gnb > li{ position:relative; z-index:1;}
#contents .subNav_wrap .gnb > li .sel{ display:block; height:40px; background:#0948a7; font-size:.938em; color:#fff; font-weight:400;}
#contents .subNav_wrap .gnb > li .sel:after{ content:"\e941"; font-family:xeicon; vertical-align:middle; padding-left:.8em;}
#contents .subNav_wrap .gnb > li .sel.on{ background:#fff; color:#000; border:1px solid #222; border-bottom:none;}
#contents .subNav_wrap .gnb > li .dp2{ margin:0; display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #222; border-top:none;}
#contents .subNav_wrap .gnb > li .dp2 > li{ display:block; width:100% !important; font-size:.963rem;}
#contents .subNav_wrap .gnb > li .dp2 > li > a{ margin:0; height:35px; background:#fff; border-top:1px dashed #ddd; color:#666; font-weight:400;}
#contents .subNav_wrap .gnb > li .dp2 > li:first-child > a{ border-top-color:#222;}
#contents .subNav_wrap .gnb > li .dp2 > li:hover > a,
#contents .subNav_wrap .gnb > li .dp2 > li.on > a{ background:#f1f1f1; color:#000; border-top-color:#ddd;}
#contents .subNav_wrap .inner{ display:block}


#contents .doc{ padding:2em 0 10em 0}
#contents .sub_visual_wrap .slogan .tit{ font-size:1.750em}


.map_wrap{ width:100%;}
.map_wrap.fr{ margin-top:2em}
.map_wrap iframe{ height:250px}
.map_tb .table_st{ font-size:.875em}
.map_tb .table_st th{ padding:0}

.history_wrap .TAB_WRAP .tab_ul{ display:block}
.history_wrap .TAB_WRAP .tab_ul li > a{ font-size:.875em; padding:.5em 1em; width:auto;}
.history_wrap .TAB_WRAP .tab_ul li{ display:block; margin:0 .5em}
.history_area .history_lst{ margin-left:7em}
.history_area .history_lst .list{ padding:20px 0}
.history_area .history_lst .list dt .year{ font-size:2em; font-weight:bold}
.history_wrap .page_sec{ margin-top:2em !important}
.history_area .history_lst .list dd.first{ font-size:.875em}
.history_wrap .TAB_WRAP .tab_ul li.on > a:after{ opacity:0}


.board_photo_wrap.photo2 > li{ width:50%}
.greetings_wrap .tit{ font-size:1.570em}
.greetings_wrap .t1{ font-size:.875em}
.greetings_wrap ul li.tx{ width:100%}
.left_mobile{ width:100%}
.greetings_wrap ul li.img{ float:none; display:none}

.pagememo_wrap .t1{ font-size:.875em}
.pagememo_wrap.icon{ padding-left:8.5em}
.pagememo_wrap.icon:before{ left:0.5em}
.page_tit2 .t1{ font-family:'Aria';}
.data_wrap .list{ padding:1.5em}
.data_wrap .list li{ font-size:.875em;}
.data_wrap .info_wrap{ padding:1em}
.data_wrap .list2 li:nth-child(2){ border-top:1px dashed #ddd; border-bottom:1px dashed #ddd; padding:1em 0; margin-bottom:.5em}
.data_wrap .list2 span{ display:block}
.data_wrap .img_box{ padding:1em}
.data_wrap .img_box img{ padding:0}
.data_wrap .img_box .t1{ padding:0}
.data_wrap .table_wrap{ overflow-x:scroll;}
.data_wrap .table_wrap table{ table-layout:auto}
.tit_wrap .pro_tit{ font-size:1.250em}

.sub_tit{ font-size:1.570em; margin-top:1em}

/*.prod_wrap .TAB_WRAP{ margin-right:.5em; text-align:left; margin-bottom:1em}
.prod_wrap .TAB_WRAP .tab_ul{ background:#f5f5f5}
.prod_wrap .TAB_WRAP .tab_ul li{ width:50%}
.prod_wrap .TAB_WRAP .tab_ul li > a{ font-size:.750em; border:1px solid #ddd; background:#f5f5f5; height:30px; line-height:30px}
.prod_wrap .TAB_WRAP .tab_ul li.st > a{ padding:0 10px}
.prod_wrap .TAB_WRAP.t_st{ border-bottom:none; margin-top:1em;}
.prod_wrap .TAB_WRAP .tab_ul li > a:after{ height:2px; left:1.3em; width:100%; bottom:-1px; z-index:1}*/

.TAB_WRAP2{ left:0}
.TAB_WRAP2 .tab_ul{ width:96%; margin:0 auto}
.TAB_WRAP2 .tab_ul li > a{ font-size:.750em}
.TAB_WRAP2 .tab_ul li.st1{ width:48%}

.line1_wrap .con_box .intro li.left{ width:100%; padding:0; float:none}
.line1_wrap .con_box .intro li.right{ width:100%; padding:2em 0; float:none}
.line1_wrap .con_box .intro{ font-size:.875rem; padding:0 1em;}
.line1_wrap .wide_wrap .t1{ width:90%; padding:0;}
.line1_wrap .con_box2 .left{ width:100%; float:none}
.line1_wrap .con_box2 .right{ float:none; width:100%; padding:0}
.line1_wrap .con_box2{ padding-left:0}
.line1_wrap .con_box .intro .t1{ font-family:'Aria'; font-size:1.570em; font-weight:bold; letter-spacing:-1px}


.line2_wrap .con_box .intro li.left{ width:100%; padding:0; float:none;}
.line2_wrap .con_box .intro li.right{ width:100%; padding:2em 0; float:none}
.line2_wrap .con_box .intro{ font-size:.875rem; padding:0 1em}
.line2_wrap .wide_wrap .t1{ width:90%; padding:0}
.line2_wrap .con_box2{ padding:0 2em}
.line2_wrap .con_box2 .left{ padding:0; width:90%; float:none}
.line2_wrap .con_box2 .right{ width:90%; float:none; padding:0; margin:1em 0}
.line2_wrap .con_box .intro .t1{ font-family:'Aria'; font-size:1.570em; font-weight:bold; letter-spacing:-1px}
.line2_wrap .con_box2 ul span.tit{ font-family:'Aria'; margin:1em 0 1em 0}
.line2_wrap .b1{ letter-spacing:-1px; font-size:1.250em !important}

.line3_wrap .con_box .intro li.left{ width:100%; float:none; padding:0;}
.line3_wrap .con_box .intro li.right{ width:100%; float:none; padding:2em 0}
.line3_wrap .con_box .intro{ padding:0 1em; font-size:.875rem}
.line3_wrap .con_box2 .left{ width:90%; float:none; padding:0}
.line3_wrap .con_box2 .right{ width:100%; float:none; padding:2em 0}
.line3_wrap .con_box2{ padding:0 2em}
.line3_wrap .con_box .intro .t1{ font-family:'Aria'; font-size:1.570em; font-weight:bold; letter-spacing:-1px}
.line3_wrap .con_box2 ul span.tit{ font-family:'Aria'; margin:1em 0 1em 0}

}


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