/*============================================================*/
/*======================= Tablet 1024 px ~ =======================*/
/*============================================================*/
@media only screen and (max-width:1024px){
.pc {display:none !important;}
.tablet {display:block !important;}
.mobile {display:none !important;}
.tabmo {display:block !important;}
img {max-width:100%;}
img.pc_img {display:none;}
img.tablet_img {display:block;}
img.tabmo_img {display:block;}

/*header*/
#header,
#header.scroll {height: 80px;}
#header .top_util,
#topmenu {display: none;}
#header h1,
#header.scroll h1 {width: 200px; margin-top: 30px;}
#header h1 a {width: 100%; height: 21px;}

/* quick */
#quick {top: inherit; right: 4%; bottom: 6%; width: 50px; transform:translateY(0);}

/* allmenu */
#header .btn_menu {position: relative; float: right; display: block; width: 35px; height: 28px; margin-top: 26px; cursor: pointer;}
#header .btn_menu img {position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#header .btn_menu img.menu_b {opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}

#header:hover .btn_menu img.menu_b,
#header.scroll .btn_menu img.menu_b {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}
#header:hover .btn_menu img.menu_w,
#header.scroll .btn_menu img.menu_w {opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}

#allmenu {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; overflow-y: auto; z-index: 10000;}
#allmenu .btn_menu_close {position: absolute; right: 4%; top: 22px; width: 34px;}

#allmenu .language {position: absolute; top: 19px; left: 4%; font-family: 'Oswald', sans-serif;}
#allmenu .language a {position: relative; display: inline-block; padding: 0 2px; margin-left: 20px; font-size: 20px; font-weight: 500; line-height: 40px; color: #222; vertical-align: middle; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#allmenu .language a:first-child {margin-left: 0;}
#allmenu .language a.on:after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: #222; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#allmenu .language a:hover {color: #0b5ea0 !important;}
#allmenu .language a:hover:after {background-color: #0b5ea0 !important;}

#allmenu .allmenu_wrap {display: table; width: 100%; height: 100%; font-family: 'Oswald', 'Noto Sans KR', Sans-serif; text-align: center;}
#allmenu .allmenu_wrap .allmenu_con {display: table-cell; padding: 100px 0; vertical-align: middle;}
#allmenu .allmenu_wrap .allmenu_con dl dt {font-size: 35px; font-weight: 600; line-height: 1; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#allmenu .allmenu_wrap .allmenu_con dl dt span {position: relative; display: inline-block; padding-bottom: 10px; cursor: pointer;}
#allmenu .allmenu_wrap .allmenu_con dl dt span:after {content:''; position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: #0b5ea0; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#allmenu .allmenu_wrap .allmenu_con dl.on dt {color: #0b5ea0;}
#allmenu .allmenu_wrap .allmenu_con dl.on dt span:after {width: 100%;}
#allmenu .allmenu_wrap .allmenu_con dl {margin-top: 30px;}
#allmenu .allmenu_wrap .allmenu_con dl:first-child {margin-top: 0;}
#allmenu .allmenu_wrap .allmenu_con dl dd {display: none;}
#allmenu .allmenu_wrap .allmenu_con dl dd ul {margin-top: 10px;}
#allmenu .allmenu_wrap .allmenu_con dl dd li {font-size: 18px; font-weight: 500; line-height: 2.5;}
#allmenu .allmenu_wrap .allmenu_con dl dd li a {color: #666; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#allmenu .allmenu_wrap .allmenu_con dl dd li a:hover {color: #0b5ea0;}

/*main contents */
.mainConWrap .section, .section .fp-tableCell {height: auto !important;}
.main_section .fp-tableCell {padding-top: 0;}
.main_section .icon_scroll {display: none;}

#mainVisual .mainTxt {top: 50%; transform:translateY(-60%);}
#mainVisual .mainTxt p {font-size: 50px;}
#mainVisual .mainTxt span {padding-top: 30px; font-size: 25px;}
#mainVisual .mainSlider .slick-dots {bottom: 50px; width: auto;}
#mainVisual .mainSlider .slick-dots li button {width: 12px; height: 12px;}

.main_section {padding: 100px 0;}

.main_titleArea > b {padding-left: 45px; font-size: 14px;}
.main_titleArea > b:before {width: 35px;}
.main_titleArea h2 {font-size: 40px;}
.main_titleArea p {font-size: 22px;}
.main_titleArea > span {padding-top: 5px; font-size: 15px;}

.main_prd .prdThumbSlider {display: block; width: 100%; margin-left: 0; text-align: center;}
.main_prd .prdThumbSlider img {width: 500px; max-width: 100%; margin: 0 auto;}
.main_prd .prdCon {display: block; width: 100%; padding-left: 0; margin-top: 60px;}
.main_prd .prdSlider .list .TxtArea .prd_logo {width: 120px;}
.main_prd .prdSlider .list .TxtArea p {font-size: 18px; line-height: 25px;}
.prd_arrows .slick-arrow {width: 50px; height: 50px;}

.main_company_bg {height: 300px;}

.main_about {border-top: 1px solid #dfdfdf;}
.main_about .TXtArea .counterArea li .counter {font-size: 80px;}
.main_about .ImgArea {float: none; width: 100%; margin-top: 70px;}

.main_line_banner .btn_area {margin-top: 40px;}

.main_global {border-top: 1px solid #dfdfdf;}
.main_global .main_titleArea {margin-bottom: 40px;}

.main_thumb_slide {width: 104%; margin-left: -2%;}
.main_thumb_slide .slick-slide {padding: 0 2vw 20px 2vw;}
.main_thumb_slide .list:hover {-webkit-box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow:2px 2px 7px 0px rgba(0, 0, 0, 0.2); box-shadow:2px 2px 7px 0px rgba(0, 0, 0, 0.2);}
.main_thumb_slide .list .ThumbArea {height: 29vw;}
.main_thumb_slide .list .TxtArea {padding: 8%;}
.main_thumb_slide .list .TxtArea .title {margin-bottom: 4%; font-size: 20px;}
.main_thumb_slide .list .TxtArea p {height: 44px; line-height: 22px;}
.main_thumb_slide .prd_arrows .slick-arrow.slick-prev {left: calc(-2% - 2px);}
.main_thumb_slide .prd_arrows .slick-arrow.slick-next {right: calc(-2% - 2px);}

.main_contact {display: block; flex-wrap:inherit;}
.main_contact .TxtArea {display: block; width: 100%; padding: 80px 4%;}
.main_contact .TxtArea .contact_info ul li.tel {background-size: 18px;}
.main_contact .TxtArea .contact_info ul li.mail {background-size: 19px;}
.main_contact .TxtArea .contact_info .btn_area a {width: 180px; height: 45px; line-height: 43px;}
.main_contact .TxtArea .contact_info .btn_area a span.in {padding-left: 28px; background-size: 18px;}
.main_contact .TxtArea .contact_info .btn_area a span.lo {padding-left: 24px; background-size: 15px;}
.main_contact .MapArea {display: block; width: 100%;}
.main_contact .MapArea .root_daum_roughmap_landing {position: static; height: 450px !important;}

/* 서브비주얼 */
#subVisual {height: 400px;}
#subVisual .tb {padding-top: 50px;}
#subVisual .subv-title h2 {font-size: 40px;}
#subVisual .subv-title p {padding-top: 20px; font-size: 18px; line-height: 1.4;}

/*sub navigation bar*/
#SNB {height: 60px;}
.SNBWrap {line-height: 60px;}
.SNBWrap .home {width: 64px; height: 60px;}
.SNBWrap .depth {width: 240px;}
.SNBWrap .depth span {margin: 0 20px; font-size: 16px;}
.SNBWrap .depth ul {top: 60px;}
.SNBWrap .depth ul li {line-height: 35px;}
.SNBWrap .depth ul li a {padding: 0 20px;}

/*sub contents*/
.contentsArea {padding: 80px 0 120px;}
.contentsArea .TitleArea h3 {font-size: 38px;}
.contentsArea .TitleArea h3 b {font-size: 23px;}

.contentsArea .section {margin-top: 80px;}

/* Tab Style */
.TabType01 {margin-bottom: 60px;}
.TabType01 ul li {margin: 30px 30px 0 !important; font-size: 18px;}

/* 인사말 */
.Greeting .TitleArea {background-size: 90%;}
.Greeting .greeting_con {font-size: 18px;}
.Greeting .greeting_con strong {font-size: 22px;}
.Greeting .greeting_con strong br {display: none;}
.Greeting .greeting_con .ceo b {font-size: 22px;}

/* 회사소개 */
.Introduction .inner {padding-top: 80px; padding-bottom: 120px; background-size: 80%;}
.Introduction ul li {padding: 40px 0; line-height: 1.2;}
.Introduction ul li div {padding: 0 2%;}
.Introduction ul li img {width: 50px; margin-bottom: 15px;}
.Introduction ul li strong {padding-bottom: 8px; font-size: 20px;}
.Introduction ul li span {font-size: 15px;}

/* 경영이념과 핵심가치 */
.Management .philosophy {padding: 8% 4%;}
.Management .philosophy p {font-size: 35px;}

.Management .value ul {width: 440px; padding: 0; margin: 0 auto;}
.Management .value ul li {width: 180px; padding-left: 80px; margin-top: 60px;}
.Management .value ul li:nth-child(2n-1) {padding-left: 0;}
.Management .value ul li:nth-child(-n+2) {margin-top: 0;}
.Management .value ul li:before {top: 90px;}
.Management .value ul li:nth-child(2):after {content:''; position: absolute; top: 90px; right: -25vw; width: 25vw; height: 1px; background: url('/images/company/value_line.png') repeat-x 0 0;}
.Management .value ul li:nth-child(3):before {left: -25vw; width: 25vw;}
.Management .value ul li b {font-size: 22px;}
.Management .value ul li p {font-size: 18px;}

/* 연혁 */
.History .historySlider .ThumbArea {padding: 80px 0;}
.History .historySlider .ThumbArea span {font-size: 40px;}
.History .historySlider .ThumbArea b {padding-top: 10px; font-size: 60px;}
.History .histsory_arrows a {top: 120px; width: 20px; height: 36px;}
.History .histsory_arrows a.slick-prev {left: 4%;}
.History .histsory_arrows a.slick-next {right: 4%;}

.History .historySlider .history_list {position: relative; display: block; padding: 55px 0 120px;}
.History .historySlider .history_list:after {content:''; position: absolute; top: 0; left: 91px; width: 1px; height: 100%; background: #dfdfdf;}
.History .historySlider .history_list .cols {display: block; width: 100%; padding: 0; font-size: 18px;}
.History .historySlider .history_list .cols:first-child {padding-bottom: 0;}
.History .historySlider .history_list .cols:last-child {padding-top: 35px;}
.History .historySlider .history_list .cols:after {display: none;}
.History .historySlider .history_list .cols dl dt {width: 90px;}
.History .historySlider .history_list .cols dl dd {width: calc(100% - 90px);}

/* 오시는길 */
.Location .root_daum_roughmap .wrap_map {height: 450px !important;}
.Location .location_info ul {margin-top: 20px;}
.Location .location_info ul li {margin-right: 30px; padding-left: 32px; background-size: 24px !important; line-height: 25px;}

/* 제품 리스트 */
#subVisual .visual_slider_wrap {padding-top: 100px;}
#subVisual .prdThumbSlider {display: block; width: 100%; margin-left: 0; text-align: center;}
#subVisual .prdThumbSlider img {width: 500px; max-width: 100%; margin: 0 auto;}
#subVisual .prdCon {display: block; width: 100%; margin-left: 0; margin-top: 40px;}
#subVisual .prdSlider .TxtArea .category {margin-bottom: 30px; font-size: 32px;}
#subVisual .prdSlider .TxtArea .prd_logo {width: 120px;}
#subVisual .prdSlider .TxtArea p {font-size: 18px; line-height: 25px;}
#subVisual .progressBarContainer {margin-top: 30px;}
#subVisual .progressBarContainer ul li b {font-size: 16px;}
#subVisual .progressBarContainer ul li .progressBar.on {width: 45px;}
#subVisual .arrows {display: none;}

.prdInfo {display: block; margin: 50px 0;}
.prdInfo .TxtArea {display: block; width: 100%; padding: 8% 4%;}
.prdInfo .TxtArea img {width: 220px;}
.prdInfo .TxtArea p {padding-top: 20px; font-size: 20px;}
.prdInfo .ThumbArea {display: block; width: 100%; padding-left: 0; margin-top: 2%;}
.prdInfo .ThumbArea a {display: block;}
.prdInfo .ThumbArea img {width: 100%;}

/*개인정보 / 이용약관*/
.rule-txt-area textarea { height:400px;	}

/* footer */
#foot {font-size: 14px;}
#foot address br {display: none;}

/* 관리자 로그인 */
div#box {width:350px; bottom:50%; padding:30px 25px 20px 30px; margin-left:-207.5px; margin-bottom:-127.5px;}
div#box .login_center {padding:25px 0;}
div#p_input span.label {font-size:15px;}

}



/*===============================================================*/
/*======================= Tablet 850 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:850px){



}

/*===============================================================*/
/*======================= Tablet 768 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:768px){

}