@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/********************************************************
■ header
********************************************************/
body {overflow-x:hidden}
.row {margin-left: 0 !important; margin-right:0 !important}
.cs-at-header {height:90px;}
.cs-at-header .cs-right-icon {display:none}
.cs-pc-header {padding:0; }
.cs-pc-header .header-search {display:none}
.cs-pc-header .at-container {max-width:1700px !important; position:relative;}
.cs-pc-header .cs-logo {position:absolute; left:0; top:17px; z-index:11}
.cs-pc-header .cs-pc-menu {position:absolute; width:100%; left:50%; top:0; transform:translate(-50%,0); background:none; box-shadow:none;}
.cs-pc-menu, .cs-pc-menu .nav-full-back, .cs-pc-menu .nav-full-height {height:90px; width:75%; margin:0 auto}
.cs-pc-header .cs-pc-menu .nav-full.on {background:rgba(0,0,0,0); box-shadow:none; }
.cs-pc-header .cs-pc-menu .nav-full.on .nav-full-back {background:#fff; position:fixed; top:0; left:0; height:165px; border-bottom:1px solid #d9d9d9}
.cs-pc-header .cs-pc-menu .nav-full-back {background:rgba(0,0,0,0); transition:0.3s; transform:scale(2) translate(8.2%,0);}
.cs-pc-header .cs-pc-menu .nav-full .menu-ul {background:none; padding:0; margin-left:10px;padding-top:35px}
.cs-pc-header .cs-pc-menu .nav-full .menu-a {background:none; text-align:left; font-weight:400; font-size:18px; color:#000 }
.cs-pc-menu .nav-full .menu-li:hover .menu-a,
.cs-pc-menu .nav-full .menu-li.on .menu-a { background:none;}
.cs-pc-menu .nav-full .menu-li:hover .sub-1div {border:none;}
.cs-pc-menu .nav-full .menu-li:hover .sub-1div::before { display:none  }
.cs-pc-menu .nav-full .menu-li .sub-1div {border:0; padding-top:1em}
.cs-pc-menu .nav-full .menu-li:hover .sub-1div { background:none; border:0; box-shadow: none;}
.cs-pc-menu .nav-full .sub-1dli.on .sub-1da {background:none !important; color:#1a64b9}
.cs-pc-menu .nav-full .sub-1dli:hover .sub-1da { color:#000; font-weight:bold; background: none !important; }
.cs-pc-menu .nav-full .menu-li .sub-1da {padding:5px 0; text-align:left; color:#000; border:0; font-size:14px}
.cs-pc-menu .nav-full .nav-rw {display:none} 
.cs-pc-header .cs-pc-menu .nav-right {display:none}
.cs-top-link {position:absolute; right:0; top:28px; list-style:none; z-index:11;}
.cs-top-link > ul > li {float:left}
.cs-top-link .lang > span {display:block; width:82px; height:34px; border-radius:50px; background: url('../img/cheonsan/arrow_down_bk.png') no-repeat 55px 11px; border:2px solid #333; color:#333; line-height:34px; font-size:16px; text-align:left; padding-left:0.8em; border-left:1px solid #333; cursor:pointer}
.cs-top-link .lang ul {border:1px solid #000;background:#fff; border-top:none; padding:20px 0 3px; transform:translate(0,-13px); display:none;position:absolute;z-index:-1;width:82px}
.cs-top-link .lang ul li {padding-left:1.2em; text-align:left;}
.cs-top-link .lang ul li a {color:#000; font-size:16px; display:block; width:100%;}
.cs-top-link .heatness {margin-left:1em; border-left:1px solid #999; padding-left:1em}
.cs-top-link .heatness a {display:block; background:linear-gradient(90deg, rgba(236,140,12,1) 0%, rgba(209,14,37,1) 35%, rgba(70,58,133,1) 100%); color:#fff; font-size:16px; border-radius:50px; width:116px; height:34px; line-height:34px; text-align:center}
.cs-top-link .heatness a img {transform:translate(0,-2px);}
.cs-top-link .csmall a {display:block; background:#1be2ba; color:#fff; font-size:16px; border-radius:50px; width:116px; height:34px; line-height:34px; margin-left:5px; text-align:center}
.cs-top-link .csmall a img {transform:translate(0,-2px);}

#sidebar-btn {display:none !important}
#sidebar-box .sidebar-head {display:none !important}
#sidebar-box .sidebar-icon-tbl {display:none !important;}
#sidebar-content .login {display:none}
#sidebar-box .sidebar-menu .ca-head > a {font-size:14px}
#sidebar-content .cs-btn-group {height:auto; overflow:hidden}
#sidebar-content .cs-btn-group .logo a {display:block; width:120px;}
#sidebar-content .cs-btn-group .logo a img {width:100%}
#sidebar-content .cs-btn-group .lang> span {display:block; width:60px; height:26px; border-radius:50px; background: url('../img/cheonsan/arrow_down_bk.png') no-repeat 40px 8px; background-size:15%; border:2px solid #333; color:#333; line-height:22px; font-size:13px; text-align:left; padding-left:0.5em; border-left:1px solid #333; cursor:pointer; position:relative; z-index:2}
#sidebar-content .cs-btn-group .lang ul {border:1px solid #d9d9d9; border-top:none; padding:20px 0 3px; transform:translate(0,-13px); position:absolute; width:60px; background:#fff; z-index:1; display:none}
#sidebar-content .cs-btn-group .lang ul li {padding-left:1em; text-align:left; margin-bottom:2px}
#sidebar-content .cs-btn-group .lang ul li a {color:#888; font-size:13px; display:block; width:100%;}
#sidebar-menu {position:relative}
#sidebar-box .sidebar-menu .ca-head.active > a {color:#184e94 !important}
#sidebar-box .sidebar-menu .ca-sub li.on a { color: #184e94  !important; }
#sidebar-menu .sidebar-bottom-fix {width:100%; position:absolute; bottom:-60px; height:auto; overflow:hidden}
#sidebar-menu .sidebar-bottom-fix a {width:48%; display:block; float:left}
#sidebar-menu .sidebar-bottom-fix .heatness {background:linear-gradient(90deg, rgba(236,140,12,1) 0%, rgba(209,14,37,1) 35%, rgba(70,58,133,1) 100%); color:#fff; line-height:34px; text-align:center; border-radius:50px; margin-right:4%}
#sidebar-menu .sidebar-bottom-fix .mall {background:#1be2ba; color:#fff; line-height:34px; text-align:center;  border-radius:50px;}

@media all and (max-width:1400px) {
	.cs-m-header .cs-top-link {position:static}
	.cs-m-header .cs-top-link .heatness a {height:30px; line-height:30px; width:108px; font-size:14px;}
	.cs-m-header .cs-top-link .csmall a {width:95px; height:30px; line-height:30px; font-size:14px;}	
	.cs-m-header .cs-top-link .lang > a {height:30px; line-height:28px; width:80px; font-size:14px; background-position: 55px 9px}
	
}
@media all and (max-width:768px) {
	.cs-m-header .cs-top-link {display:none}
	.cs-at-header {height:60px}
	.cs-m-header .header-logo {width:225px; margin-top:3px}
	.cs-m-header .header-icon a {margin-top:8px}
}
@media all and (max-width:500px) {
	.cs-m-header .header-logo {width:180px; margin-top:0px}
	.cs-m-header .header-icon a {margin-top:1px}
}

/********************************************************
■ main
********************************************************/
.mainVisual .bxslider-title .item{height:100vh; background-size:cover !important; background-repeat:no-repeat; background-position:center bottom !important}
.mainVisual .bxslider .txt-wrap {max-width:700px; left:19%; top:40%; transform:translate(0%,-50%); word-break:keep-all}
.mainVisual .bxslider-title .mid-tit {color:#fff; font-size: 45px;}
.mainVisual .bxslider-title .big-tit {color:#fff; font-size:75px; letter-spacing:10px; font-weight:700; margin:10px 0 50px;}
.mainVisual .bxslider-title .sub-tit {color:#fff; font-size:24px; font-weight:300; width:65%; line-height:1.4}

.mainVisual .bxslider-title .item:nth-child(2) .mid-tit:before {content:'ANOTHER NAME OF TRUST';}
.mainVisual .bxslider-title .item:nth-child(2) .big-tit:before {content:'CHEONSAN';}
.mainVisual .bxslider-title .item:nth-child(2) .sub-tit:before {content:'We will repay for your faith by doing our best based on trust.';}
.mainVisual .bxslider-title .item:nth-child(3) .mid-tit:before {content:'THE LEADER OF HEATING TECHNOLOGY';}
.mainVisual .bxslider-title .item:nth-child(3) .big-tit:before {content:'CHEONSAN';}
.mainVisual .bxslider-title .item:nth-child(3) .sub-tit:before {content:'We will be a leader in heating technology with constant research and development.'; color:#fff}

@media all and (max-width:1400px) {
	.mainVisual .bxslider .txt-wrap {left:10%;}
	.mainVisual .bxslider-title .mid-tit {font-size:30px}
	.mainVisual .bxslider-title .big-tit {font-size:60px}
	.mainVisual .bxslider-title .sub-tit {font-size:20px}
	.bx-wrapper .bx-controls-direction a {width:39px; height:60px}
	.mainVisual .bx-wrapper .bx-prev {left:5%}
	.mainVisual .bx-wrapper .bx-next {right:5%}
}
@media all and (max-width:991px) {
	.bx-wrapper .bx-controls-direction a {height:30px;}
	.mainVisual .bx-wrapper .bx-prev {left:2.5%}
	.mainVisual .bx-wrapper .bx-next {right:2.5%}
	.mainVisual .bxslider .txt-wrap {left:0%;}
	.mainVisual .bxslider-title .mid-tit {color:#fff; font-size:36px;}
	.mainVisual .bxslider-title .big-tit {color:#fff; font-size:60px; letter-spacing:10px; font-weight:700; margin:10px 0 50px;}
	.mainVisual .bxslider-title .sub-tit {color:#fff; font-size:20px; font-weight:300; width:65%; line-height:1.4}
}
@media all and (max-width:768px) {
	.mainVisual .bx-wrapper .bx-prev {display:none}
	.mainVisual .bx-wrapper .bx-next {display:none}
	.mainVisual .bxslider-title .mid-tit {color:#fff; font-size:24px;}
	.mainVisual .bxslider-title .big-tit {color:#fff; font-size:45px; letter-spacing:10px; font-weight:700; margin:10px 0 50px;}
	.mainVisual .bxslider-title .sub-tit {color:#fff; font-size:18px; font-weight:300; width:80%; line-height:1.4}
}
@media all and (max-width:480px) {
	.mainVisual .bxslider .txt-wrap {text-align:center; }
	.mainVisual .bxslider-title .mid-tit {color:#fff; font-size:20px;}
	.mainVisual .bxslider-title .big-tit {color:#fff; font-size:36px; letter-spacing:10px; font-weight:700; margin:10px 0 50px;}
	.mainVisual .bxslider-title .sub-tit {color:#fff; font-size:18px; font-weight:700; width:100%; line-height:1.4}
}


#main .sec_tit1 {text-align:center; padding:60px 0 20px; font-size:45px;}
#main .sec_tit2 {text-align:center; padding: 0 0 60px; font-size:18px; font-weight:300; word-break:keep-all; line-height:1.35}

@media all and (max-width:1400px) {
	#main .sec_tit1 {font-size:40px}
}
@media all and (max-width:991px) {
	#main .sec_tit1 {font-size:36px}
}
@media all and (max-width:768px) {
	#main .sec_tit1 {padding:30px 0 0}
	#main .sec_tit2 {padding-bottom:30px !important}
}
@media all and (max-width:768px) {
	#main .sec_tit1 {font-size:26px}
	#main .sec_tit2 {font-size:16px}
}

#main #board {width:100%; height:200px;}
#main #board>div {width:50%;float:left;height:100%;}
#main #board .wr-icon {display:none}
#main #board .more {display:inline-block; position:relative; width:28px; height:28px; border:2px solid #fff; border-radius:50px; margin-top:20px; transition:0.3s ease-in;}
#main #board .more span {display:block; width:20px; height:2px; background:#fff; margin:0 auto; position:absolute; top:50%; left:50%;}
#main #board .more span:first-child {transform:translate(-50%,-50%);}
#main #board .more span:last-child {transform:translate(-50%,-50%) rotate(90deg);}
#main #board .more:hover {transform:rotate(180deg)}
#main #board .bo_cont {padding:1.5em 0; width:67%; height:200px; box-sizing:border-box}
#main #board #notice .bo_tit {width:33%; background: rgb(10,65,111); background: linear-gradient(90deg, rgba(10,65,111,1) 0%, rgba(74,149,188,0.8) 100%); color:#fff; height:100%; text-align:right; padding:1.5em; font-size:20px; letter-spacing:0; box-sizing:border-box}
#main #board #notice > div  {float:left;}
#main #board #notice .bo_cont .post-wrap {border-right:1px solid #888}
#main #board #notice .bo_cont .bod_wrap {width:100%; height:100%; border-right:1px solid #000; box-sizing:border-box; padding:0 3em; text-align:right}
#main #board #notice .article {text-align:left; margin:1.25em 0; padding-left:3em}
#main #board #tech .bo_tit {width:33%; background: rgb(82,208,189); background: linear-gradient(90deg, rgba(82,208,189,1) 0%, rgba(10,107,111,1) 100%); color:#fff; height:100%; text-align:right; padding:1.5em; font-size:20px; letter-spacing:0; box-sizing:border-box; float:right; text-align:left}
#main #board #tech > div  {float:left}
#main #board #tech .bo_cont .bod_wrap {width:100%; height:100%; box-sizing:border-box; padding:0 3em; text-align:left}
#main #board #tech .article {text-align:left; margin:1.25em 0; transform: translate(7em, 0);}
#main #board .bo_cont .miso-post-list .post-list li span {font-weight:300}
#main #board .slick-arrow {font-size:0; color:transparent; border:0}
#main #board .slick-prev {background:url('../img/cheonsan/arrow_up_bk.png') no-repeat 50% 50%; width:14px; height:11px; top:10px;z-index:999}
#main #board .slick-next {background:url('../img/cheonsan/arrow_down_bk.png') no-repeat 50% 50%; width:14px; height:11px; bottom:0; top:auto;z-index:999}
#main #board #notice .slick-arrow {float:right;}
#main #board #tech .slick-arrow {float:left;}

@media all and (max-width:1400px) {
	#main #board {width:100%; height:160px;}
	#main #board .bo_cont {height:160px; background:#fff}
	#main #board #notice .bo_tit {padding:0.8em 1em 1em}
	#main #board #tech .bo_tit {padding:0.8em 1em 1em; background: linear-gradient(-90deg, rgba(82,208,189,1) 0%, rgba(10,107,111,1) 100%);}
	#main #board #notice .bo_tit h2, #main #board #tech .bo_tit h2 {font-size:24px}
	#main #board .bo_cont .miso-post-list .post-list li {margin:0.95em 0}
	#main #board .bo_cont .miso-post-list .post-list li a {font-size:16px}
	#main #board .bo_cont .miso-post-list .post-list li span {font-size:14px;}
}
@media all and (max-width:1096px) {
	#main #board #notice .bo_tit h2, #main #board #tech .bo_tit h2 {font-size:20px}
	#main #board #notice .bo_cont .miso-post-list .post-wrap {padding-left:0}
	#main #board #tech .bo_cont .miso-post-list .post-wrap {padding-right:0}
}
@media all and (max-width:991px) {	
	#main #board .more {transform:scale(0.8) translate(0,9px); margin-top:5px}
	#main #board .more:hover {transform:scale(0.8) translate(0,9px) rotate(180deg)}
}
@media all and (max-width:768px) {
	#main #board {height:100px}
	#main #board>div {width:100%}
	#main #board .bo_tit > * {display:inline-block}
	#main #board .bo_cont {height:100px; padding: 1.25em 0.5em 0.75em 0}
	#main #board #notice .bo_cont {border-bottom:1px solid #d9d9d9}
	#main #board #notice .bo_cont .post-wrap {border-right:0}
	#main #board #tech .bo_tit {float:left; text-align:right}
	#main #board .bo_cont .miso-post-list .post-list li {margin:0.25em; padding:0 1em}
	#main #board .miso-post-list .post-wrap {padding:0 2em }
}
@media all and (max-width:500px) {
	#main #board #notice .bo_tit, #main #board #tech .bo_tit {padding-left:0; padding-right:0; text-align:center}
	#main #board #notice .bo_tit h2, #main #board #tech .bo_tit h2 {font-size:16px}
	#main #board .more {transform:scale(0.7) translate(0,11px); margin-top:5px}
	#main #board .more:hover {transform:scale(0.7) translate(0,11px) rotate(180deg)}
	#main #board #tech .bo_cont .miso-post-list .post-wrap {padding-left:1em}
	#main #board .bo_cont .miso-post-list .post-list li {transform:translate(0,3px)}
	#main #board .bo_cont .miso-post-list .post-list li a {font-size:16px}
	#main #board .bo_cont .miso-post-list .post-list li span {font-size:12px}
}

#main #business {background:url('../img/cheonsan/bg_business.png') no-repeat left 20%;}
#main #business .at-container {max-width:1400px; margin:0 auto; text-align:center}
#main #business .sec_tit1 {padding:60px 0 80px;}
#main #business .sec_cont {display:inline-block; height:auto; overflow:hidden}
#main #business .sec_cont>div {width:50%; float:left; max-width:500px; margin:0 30px 100px;}
#main #business .sec_cont .imgWrap {padding:0 2em; }
#main #business .sec_cont .imgWrap img {width:100%; box-shadow: 0px 3px 10px rgba(0,0,0,0.25);}
#main #business .sec_cont .txtWrap {padding:0 2em; text-align:left}
#main #business .sec_cont .txtWrap h2 {font-size: 30px; margin:20px 0}
#main #business .sec_cont .txtWrap p {font-size: 16px; font-weight:300; line-height:1.4; word-break:keep-all}
#main #business .more {display:inline-block; position:relative; width:26px; height:26px; border:1px solid #000; border-radius:50px; transition:0.3s ease-in; transform:translate(0,8%); margin-left:16px}
#main #business .more span {display:block; width:18px; height:1px; background:#000; margin:0 auto; position:absolute; top:50%; left:50%;}
#main #business .more span:first-child {transform:translate(-50%,-50%);}
#main #business .more span:last-child {transform:translate(-50%,-50%) rotate(90deg);}
#main #business .more:hover {transform:translate(0,8%) rotate(180deg)}

@media all and (max-width:1400px) {
	#main #business .sec_cont {padding:0 2%}
	#main #business .sec_cont>div {width:49.5%; margin:0 1% 100px 0;}
	#main #business .sec_cont>div:last-child {margin:0 0 100px; float:right}
	#main #business .sec_cont .txtWrap h2 {font-size:24px}
}
@media all and (max-width:991px) {
	#main #business .sec_cont .txtWrap h2 {font-size:20px}
}
@media all and (max-width:768px) {
	#main #business {background-position:left bottom}
	#main #business .sec_tit1 {padding:30px 0}
	#main #business .sec_cont {display:block; width:100%}
	#main #business .sec_cont>div {width:100%; max-width:100%; float:none; height:auto; overflow:hidden}
	#main #business .sec_cont .imgWrap {width:60%; float:left; margin-bottom:12px}
	#main #business .sec_cont .txtWrap {width:40%; float:right; padding-right:0; padding-right:1em}
	#main #business .more {margin-left:0px; transform:scale(0.8) translate(4px,6px) }
	#main #business .more:hover {transform:scale(0.8) translate(4px,6px) rotate(180deg)}
}
@media all and (max-width:500px) {
	#main #business .sec_cont .imgWrap, #main #business .sec_cont .txtWrap {width:100%}
	#main #business .sec_cont .busi1 {margin-bottom:30px}
	#main #business .sec_cont .txtWrap h2 {font-size:18px}	
	#main #business .sec_cont .txtWrap p {font-size:14px}	
}

#main #product {position:relative; z-index:1; height:auto; overflow:hidden}
#main #product .sec_cont {width:1400px; max-width:100%; margin:0 auto; padding:0 20px ; display:block;}
#main #product #product_slide {position:relative; padding-bottom:7%;}
#main #product .swiper-slide {display:table; table-layout: fixed; padding:0 ; opacity:0.53; transition:transform 1s}
#main #product .swiper-slide-prev, #main #product .swiper-slide-next {transform:translate(0,-30%)}
#main #product .swiper-slide-prev .imgWrap {text-align:right; float:right;}
#main #product .swiper-slide-next .imgWrap {text-align:left; float: left;}
#main #product .swiper-slide .item_cont {height:auto; overflow:hidden; width:100%;}
#main #product .swiper-slide .txtWrap {float:left}
#main #product .swiper-slide .imgWrap {display:inline-block;}
#main #product .swiper-slide .txtWrap {display:none;}
#main #product .swiper-slide .btnWrap {display:none;}
#main #product .swiper-slide-active {opacity:1; width:100% !important;padding:0 14%; transform:translate(0,0);}
#main #product .swiper-slide-active .imgWrap {float:left}
#main #product .swiper-slide-active .txtWrap {display:inline-block;}
#main #product .swiper-slide-active .btnWrap {display:block;}
#main #product .swiper-slide-active .txtWrap {position:relative; padding:80px 40px 0; max-width:50%; display:inline-block; text-align:left}
#main #product .swiper-slide .txtWrap img {transform:rotate(-90deg) translate(0%,45%); position:absolute; top:0;}
#main #product .swiper-slide .txtWrap h1 {font-size:45px; font-weight:400; letter-spacing:-1px; margin-bottom:20px}
#main #product .swiper-slide .txtWrap p {font-size:16px; font-weight:300; word-break:keep-all; line-height:1.35; width:100%; height:auto;}
#main #product .swiper-slide .txtWrap p span {display:inline-block; background: linear-gradient(90deg, rgba(10,65,111,1) 0%, rgba(74,149,188,1) 100%); height:3px; width:60px; margin-right:5px; transform:translate(0,-5px)}
#main #product .swiper-slide-active .btnWrap { text-align:center;  width:100%; margin-top:60px}
#main #product .swiper-slide .btnWrap a {display:inline-block; text-align:left}
#main #product .swiper-slide .btnWrap .detail {width:200px;height:50px;overflow:hidden;background:url('../img/cheonsan/arrow_go_gr.png') no-repeat 80% 50%; border: 1px solid #888; color: #888; font-size: 16px; line-height: 50px; padding: 0 20px; box-sizing: border-box; transition:0.3s; margin-right:5px }
#main #product .swiper-slide .btnWrap .detail:hover{border-color: #000; color: #000; background: url('../img/cheonsan/arrow_go_bk.png') no-repeat 90% 50%; font-weight:300;}
#main #product .swiper-slide .btnWrap .shopping {width:200px; height:50px; overflow:hidden; background:url('../img/cheonsan/arrow_go_green.png') no-repeat 85% 50%; border: 1px solid #42a393; color: #42a393; font-size: 16px; line-height: 50px; padding: 0 20px; box-sizing: border-box; transition:0.3s; font-weight:300; }
#main #product .swiper-slide .btnWrap .shopping:hover{ background: url('../img/cheonsan/arrow_go_green.png') no-repeat 95% 50%;}
#main #product .swiper-button-prev {background:url('../img/cheonsan/arrow_prev02.png') no-repeat 50% 50%; width:25px; height:60px; position:absolute; top:35%; left:10%; font-size:0; color:transparent; cursor:pointer; outline:0; z-index:4;}
#main #product .swiper-button-next {background:url('../img/cheonsan/arrow_next02.png') no-repeat 50% 50%; width:25px; height:60px; position:absolute; top:35%; right:10%; font-size:0; color:transparent; cursor:pointer; outline:0; z-index:4;}

@media all and (max-width:1400px) {
	#main #product {min-height:765px}
	#main #product .sec_cont {width:1000px}
	#main #product .swiper-button-prev {left:5%}
	#main #product .swiper-button-next {right:5%}
	#main #product .swiper-slide-active {padding:0 10%;}
	#main #product .swiper-slide-active .imgWrap {width:49%;}
	#main #product .swiper-slide-active .imgWrap img {width:100%}
	#main #product .swiper-slide-active .txtWrap {padding: 80px 20px 0}
	#main #product .swiper-slide .txtWrap h1 {font-size:30px; margin-top:0; margin-bottom:30px}
	#main #product .swiper-slide .txtWrap p span {width:36px}
	#main #product .swiper-slide .btnWrap .detail {font-size:14px; width:190px}
	#main #product .swiper-slide .btnWrap .shopping {font-size:14px; width:190px;}
}
@media all and (max-width:991px) {
	#main #product .swiper-slide-prev, #main #product .swiper-slide-next {opacity:0}
	#main #product .swiper-button-prev {left:2.5%}
	#main #product .swiper-button-next {right:2.5%}
}
@media all and (max-width:768px) {
	#main #product .sec_cont {}
	#main #product .swiper-slide-active .imgWrap {width:100%;}
	#main #product .swiper-slide-active .txtWrap {width:100%; max-width:100%}
	#main #product .swiper-slide .txtWrap img {transform:rotate(-90deg) translate(180%,45%)}
	#main #product .swiper-slide-active .txtWrap {padding: 60px 0 0 10px}
	#main #product .swiper-button-prev, #main #product .swiper-button-next {height:30px;}
}
@media all and (max-width:500px) {
	#main #product {min-height:705px}
	#main #product .sec_tit1 {padding:30px 10px 0 }
	#main #product .sec_tit2 {padding:0 10px; margin-bottom:0}
	#main #product .swiper-slide .txtWrap {padding-top:40px}
	#main #product .swiper-slide .txtWrap img {transform:rotate(-90deg) translate(218%,45%)}
	#main #product .swiper-slide .txtWrap h1 {font-size:20px; margin-bottom:16px}	
	#main #product .swiper-slide .txtWrap p {font-size:14px}
	#main #product .swiper-slide-active .btnWrap {position:absolute; left:0; right:0; margin-top:20px}
	#main #product .swiper-slide .btnWrap .detail {width:150px; padding:0 10px; background-size:30%; background-position:85% 50%}
	#main #product .swiper-slide .btnWrap .detail:hover {background-size:30%;}
	#main #product .swiper-slide .btnWrap .shopping {width:160px; padding:0 10px; background-size:30%; background-position:90% 50%}
	#main #product .swiper-slide .btnWrap .shopping:hover {background-size:30%;background-position:95% 50%}
}
@media all and (max-width:320px) {
	#main #product .swiper-slide-active {padding: 0 7%}
	#main #product .swiper-button-prev {left:0%; height:20px}
	#main #product .swiper-button-next {right:0%; height:20px}
	#main #product .swiper-slide .btnWrap .detail {width:131px;background-position:90% 50%}
	#main #product .swiper-slide .btnWrap .shopping {width:141px;background-position:95% 50%}
}

#main #company {position:relative; color:#fff; background-size:cover !important}
#main #company .at-container {max-width:1400px; margin:0 auto; }
#main #company .sec_cont {display:block; width:100%; height:auto; overflow:hidden; padding-bottom:50px}
#main #company .sec_cont > div {display:inline-block; float:left}
#main #company #video {width:55%; padding:0 2em;}
#main #company #video .textWrap { width:100%;}
#main #company #video .textWrap h4.transp {color:#fff; font-weight:700; font-size:1.91em; opacity:0.6; margin-top:1.75em}
#main #company #video .videoWrap {position:relative; width:100%; padding-bottom:56.25%}
#main #company #video .videoWrap iframe {position:absolute; width:100%; height:100%}
#main #company #menu-block {float:right; height:auto; overflow:hidden; width:40%; padding:1.5em 2em;}
#main #company #menu-block a.btn-wh {display:block; width:49%; border:1px solid #fff; background:rgba(255,255,255,0.3); color:#fff; float:left; text-align:center; margin:0.5%; transition:0.3s; position:relative; }
#main #company #menu-block a.btn-wh span {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:18px; font-weight:300}
#main #company #menu-block a.btn-wh:after {content:''; display:block; padding-bottom:100%}
#main #company #menu-block a.btn-wh:hover {border:1px solid #ffac36; background:rgba(255,172,54,0.3); }

@media all and (max-width:1400px) {
	#main #company .sec_cont {padding:2em 2em 50px 2em}
	#main #company #video {margin-left:2em}
	#main #company #menu-block {margin-right:2em;}
	#main #company #menu-block a.btn-wh span {font-size:16px}
}
@media all and (max-width:1054px) {
	#main #company #video {margin-left:1em}
	#main #company #menu-block {margin-right:1em;}
}
@media all and (max-width:991px) {
	#main #company #menu-block {padding-left:0}
	#main #company #menu-block a.btn-wh span {font-size:14px}
	
}
@media all and (max-width:768px) {
	#main #company .sec_cont {padding-top:0}
	#main #company #video {width:100%; float:none; margin:0; padding:0}
	#main #company #video .textWrap h4.transp {font-size:1.8em; opacity:0.25 }
	#main #company #menu-block {width:100%; float:none; padding:0; margin-right:0; margin-top:10px}
	#main #company #menu-block a.btn-wh {width:24%}
	#main #company #menu-block a.btn-wh span {left:0; right:0; transform:translate(0,-50%); text-align:center}
}
@media all and (max-width:500px) {
	#main #company #video .videoWrap {padding-bottom:30%}
	#main #company #video .textWrap h4.transp {font-size:1.242em}
}
@media all and (max-width:320px) {
	#main #company .sec_cont {padding-left:1em; padding-right:1em}
}

#main #banner {width:100%; height:auto; overflow:hidden}
#main #banner .banner1, #main #banner .banner2  {width:50%; float:left; color:#fff; padding:2em}
#main #banner .banner1 {background:url('../img/cheonsan/bg_event.jpg') no-repeat 50% 50% !important;}
#main #banner .banner2 {background:url('../img/cheonsan/bg_promote.jpg') no-repeat 50% 50% !important;}
#main #banner h2 {font-size:24px; word-break:keep-all;}
#main #banner p {font-size:16px; font-weight:300; margin-bottom:20px; word-break:keep-all;}
#main #banner .detail {display:inline-block; text-align:left; width:200px;height:50px;overflow:hidden;background:url('../img/cheonsan/arrow_go_wh.png') no-repeat 80% 50%; border: 1px solid #fff; color: #fff; font-size: 16px; line-height: 50px; padding: 0 20px; box-sizing: border-box; transition:0.3s; }
#main #banner .detail:hover{ background: url('../img/cheonsan/arrow_go_wh.png') no-repeat 90% 50%;}
#main #banner .slick-list {width:100%; padding:0}
#main #banner .slick-slide >div {height:auto; overflow:hidden}
@media all and (max-width:1400px) {
	#main #banner .banner1, #main #banner .banner2 {min-height:221px; background-size:cover !important}
	#main #banner h2 {font-size:22px; }
	#main #banner .detail {font-size:14px; width:190px; height:40px; line-height:40px}
}
@media all and (max-width:991px) {
	#main #banner .banner1, #main #banner .banner2 {min-height:auto; float:none }
	#main #banner .banner1, #main #banner .banner2 {padding:1em}
	#main #banner .txtWrap {text-align:center !important}
	#main #banner h2 {font-size:20px}
	#main #banner p {font-size:14px; margin-bottom:26px}
}
@media all and (max-width:768px) {
	#main #banner .banner1, #main #banner .banner2 {min-height:189px;  }
}
@media all and (max-width:500px) {
	#main #banner h2 {font-size:18px}
	#main #banner .detail {width:160px; background-size:30%; background-position:85% 50%}
	#main #banner .detail:hover {background-size:30%;}
}
@media all and (max-width:320px) {
	#main #banner .banner1, #main #banner .banner2 {min-height:210px}
}
/********************************************************
■ footer
********************************************************/
#cs_footer {background-color:#2e2e2e}
#cs_footer .at-links {background:none; border:0}
#cs_footer .at-links a {font-size: 14px; color:#fff; font-weight:400}
#cs_footer .at-links li:after {content:'';}
#cs_footer h4 {color:#fff; font-size:24px; font-weight:700; letter-spacing:-1px}
#cs_footer h2 {color:#fff; font-size:36px; font-weight:700; margin:10px 0}
#cs_footer p {color:#fff; font-size:14px}
#cs_footer .btn-orange {border:1px solid #ffac36; color:#ffac36 !important; font-weight:400; background:transparent; font-size:16px}

@media all and (max-width:1400px) {
	#cs_footer h4 {font-size:20px}
	#cs_footer h2 {font-size:30px}
	#cs_footer .btn-orange {font-size:14px}
}
@media all and (max-width:991px) {
	#cs_footer .media > div {float:none; display:block; width:100%; text-align:center}
	#cs_footer .at-links ul > li {float:none; display:inline-block}
	#cs_footer .at-about > li {float:none; display:inline-block}
	#cs_footer .at-infos .copyright {float:none; margin:0 auto}
}
@media all and (max-width:768px) {
	.at-go {display:block !important}
	body {padding-bottom: 0 !important}
}

/********************************************************
■ subvisual
********************************************************/
.subvisual {width:100%; height:330px; background-position:50% 50% !important; position:relative}
.subvisual .subtxt > * {text-shadow: 0 0 5px rgba(0,0,0,0.4); word-break:keep-all}

@media all and (max-width:768px) {
	.subvisual {height:250px}
	.subvisual .subtxt h1 {font-size:30px}
	.subvisual .subtxt p {font-size:16px}
}
@media all and (max-width:768px) {

}
@media all and (max-width:480px) {
	.subvisual {height:225px}
	.subvisual .subtxt {width:90%; font-size:14px}
}
/********************************************************
■ sub lnb
********************************************************/
#cs-sub-header {text-align:center}
#cs-sub-header nav {display:inline-block; height:auto; overflow:hidden; transform:translate(0,-50%)}
#cs-sub-header nav > a {display:block; float:left; text-align:center; border:1px solid #d9d9d9; width:300px; height:60px; line-height:60px; background:#efefef; font-size:16px; color:#666; font-weight:300}
#cs-sub-header nav > a:first-child {border-right:0}
#cs-sub-header nav > a:nth-child(2), #cs-sub-header nav> a:nth-child(3) {border-right:0}
#cs-sub-header nav > a.active {background: rgb(84,169,198); background: linear-gradient(90deg, rgba(84,169,198,1) 0%, rgba(12,46,93,1) 100%); border-color:transparent; color:#fff; font-weight:400; border-left:0}


#cs-sub-header nav.lnb {transform:translate(-50%,-30px);  position:absolute; left:50%;}
#cs-sub-header nav.lnb > ul {width:300px; float:left; height:auto; overflow:hidden;}
#cs-sub-header nav.lnb > .cate1>li{border-bottom:2px solid #000; background:#fff; border-right:1px solid #d9d9d9;}
#cs-sub-header nav.lnb > .cate2 >li{border-bottom:2px solid #000; background:#fff}
#cs-sub-header nav.lnb > ul > li { height:60px; line-height:60px; }
#cs-sub-header nav.lnb > ul > li a {font-size:18px; font-weight:400; color:#000; display:block; width:100%; height:100%; background:url('../img/cheonsan/arrow_down_bk.png') no-repeat 95% 50%;}
#cs-sub-header nav.lnb > ul ul { width:100%; top:60px; z-index:10}
#cs-sub-header nav.lnb > ul ul li {width:100%; height:60px;line-height:60px; background:#efefef; }
#cs-sub-header nav.lnb > ul ul li a {font-size:16px; font-weight:300; color:#666; display:block; width:100%; height:100%; }

@media all and (max-width:1400px) {
	#cs-sub-header nav {display:flex; padding: 0 40px}
	#cs-sub-header nav > a {float:none; flex:1;}

}

@media all and (max-width:768px) {
	#cs-sub-header nav {display:flex; padding: 0 20px}
	#cs-sub-header nav.lnb {width:100%; display:flex;}
	#cs-sub-header nav.lnb > ul {flex:1}	
}

@media all and (max-width:480px) {
	#cs-sub-header nav {padding:0;}
	#cs-sub-header nav > a {font-size:14px}
}
/********************************************************
■ page
********************************************************/
.page-content { line-height:22px; word-break: keep-all; word-wrap: break-word; }
.page-content .cs-page-container {max-width:1400px; margin:0 auto}
.page-content .cs-page-container .slogan { font-size:50px; font-weight:700; letter-spacing:-1px; margin-bottom:50px; line-height:1.35; color:#000;}
.page-content .cs-page-container .slogan2 {font-size:20px; font-weight:400; letter-spacing:-1px; line-height:1.45; color:#000; margin-bottom:90px}

@media all and (max-width:1400px) {
	.page-content .cs-page-container {padding: 0 40px;}
}

@media all and (max-width:991px) {
	.page-content .cs-page-container .slogan {font-size:40px}
	.page-content .cs-page-container .slogan2 {font-size:18px}
}

@media all and (max-width:768px) {
	.page-content .cs-page-container {padding:0 20px}
}

@media all and (max-width:480px) {
	.page-content .cs-page-container .slogan { font-size:34px; margin-bottom:50px;}
	.page-content .cs-page-container .slogan2 {font-size:16px; margin-bottom:50px}
}

/********************************************************
■ board
********************************************************/
.board-list {max-width:1400px; margin:0 auto}
.board-list .list-board {padding-top:30px}
.board-list .list-tsearch {padding: 0 !important}
.board-list .list-tsearch input[type=text] {width:180px}
.board-list .item-subject .wr-comment {display:none !important }
.board-list .list-page .pagination { width:100%; text-align:center}
.board-list .list-page .pagination>li {height:auto; overflow:hidden; display:inline-block}

.view-wrap h1 {margin-bottom:0 !important}

@media all and (max-width:1400px) {
	.board-list {padding:0 40px;}
	.view-wrap {padding:0 40px;}
	.write-wrap {padding:0 40px; border-top:0;}
	.write-wrap form {border-top:1px solid #000}
}

@media all and (max-width:768px) {
	.board-list {padding:0 20px;}
	.view-wrap {padding:0 20px;}
	.write-wrap {padding:0 20px;}
	.board-list .list-tsearch {float:none !important; margin-bottom:0}
	.board-list .list-tsearch input[type=text] {width:100%;}
	.board-list .list-board {padding-top:10px; margin-bottom:20px}
	.board-list .list-page {margin-bottom:10px}
}