@font-face {
  font-family: 'GmarketSansBold';
  font-weight: 700;
  src: url('/fonts/gmarketsansbold.woff2') format('woff2'),
    url('/fonts/gmarketsansbold.woff') format('woff')
}

@font-face {
  font-family: 'GmarketSansTTFMedium';
  src: url('/fonts/GmarketSansMedium.woff2') format('woff2'),
    url('/fonts/GmarketSansMedium.woff') format('woff')
}

@font-face {
  font-family: 'GmarketSansLight';
  src: url('/fonts/GmarketSansLight.woff2') format('woff2'),
    url('/fonts/GmarketSansLight.woff') format('woff')
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    word-break: break-all;
    font-family: "Noto Sans KR", sans-serif;
    letter-spacing: -1px;
}

html, body{width: 100%; min-width: 1200px; height: 100%; float: left; color: #333; font-size: 16px;}

li{list-style: none;}
img{max-width: 100%; vertical-align: middle;}
a{text-decoration: none;}

.commonBox{width: 100%; float: left;}
.commonBox > div{width: 1200px; margin: 0 auto;}
.commonBox > div > div{width: 100%; float: left;}

/*í—¤ë”*/
.head{width: 100%; float: left; position: absolute; z-index: 999; background-color: rgba(0, 0, 0, 0.6);}
.head > div > div{padding: 26px 0;}
.head > div > div .logo{width: 35%; float: left;}
.head > div > div .logo img{margin-right: 10px;}
.head > div > div .logo a{width: auto; float: left; color: #fff; font-size: 20px; font-weight: 400;}
.head > div > div .nav{width: 65%; float: left;}
.head .nav ul{width: 100%; float: left; height: 50px; line-height: 50px;}
.head .nav ul li {width: 25%;float: left;text-align: center;}
.head .nav ul li a{width: 100%; float: left; color: #fff; font-weight: 500; font-size: 17px;}
.head .nav ul li:last-child{border: 1px solid #fff; border-radius: 50px;}
.head .nav ul .jjinmall span{color: #fa5a2b;}
/*.head .nav ul li a > img {float:left; padding: 4px 57px;}*/

/*ë©”ì¸*/
.main_visual {width: 100%; float: left; height: 680px; overflow: hidden;}
.main_visual ul {width:100%; float:left; height:100%; transition: all 1s;}
.main_visual ul img {width: 100%; min-height: 680px;}
/* .main_visual{width: 100%; float: left; background-image: url(/images/main.jpg); background-position: center; background-repeat: no-repeat; height: 716px; padding-top: 105px;}
.main_visual .main_text{width: 1200px; margin: 0 auto; font-weight: 600; transform: translateY(-50%); top: 50%; height: 291px;}
.main_visual .main_text ul{width: 100%; float: left;}
.main_visual .main_text li{width: 100%; float: left; font-size: 22px; font-weight: 400;}
.main_visual .main_text .main_logo{margin-top: 10px;}
.main_visual .main_text .more{margin-top: 18px;}
.main_visual .main_text li .more_button{width: 254px; float: left; height: 50px; line-height: 45px; text-align: center; color: #ed7f06; border: 1px solid #ed7f06; border-radius: 5px; font-weight: 500;} */


.main_visual .main_visual_dot{ position: absolute; bottom: 20px; height: 20px; left: 50%; transform: translate(-50%, 0); }
.main_visual .main_visual_dot .dot{ width : 20px; float: left; height: 20px; border-radius: 50%; background-color: #fff; margin : 0 2px; cursor: pointer;}
.main_visual .main_visual_dot .dot.active{ background-color: #ed7f06; }

/*서브페이지*/
.sub_visual {width: 100%; float: left; height: 367px; overflow: hidden;}


/*ì´ë²¤íŠ¸ ëžœë”©ë§ˆì¼“*/
.sec_tit{width: 100%; float: left;}
.sec_tit .sec_sub{font-size: 33px; font-weight: bold;}
.sec_tit .sec_con{font-size: 18px; margin-top: 10px;}
.content01 .content_section01, .content03 .content_section02, .content04 .content_section03, .content05 .content_section04, .content07 .content_section05
{width: 100%; float: left; text-align: center;}
.content_box{margin-left: -2px;width: 25%;text-align: left;display: inline-block;min-height:600px;}
.content_box ul{width: 80%;float: left;position: absolute;left: 50%;transform: translateX(-50%);}
.content_box li {width: 100%; float: left;}
.content_box li:first-child {background-color: #f5f5f5; max-height:416.34px; overflow: hidden; min-height:416.34px;}
.content_box li:first-child  img { cursor: pointer; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; float:left; vertical-align:middle;}
.content_box li:nth-child(3){ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.content_box li img {object-fit: cover;}
.content_box .box_con, .content_box02 .box_con, .content_box03 .box_con{font-size: 15px; color: #666; margin-top: 10px; line-height: 20px;}
.content_box .box_tit{font-size: 20px; font-weight: bold; margin-top: 30px;}
.content_boxwrap{width: 100%; float: left; margin-top: 60px;}
.content01{width: 100%; float: left; margin-top: 100px;}

/*ë³µì§€ëª°, ë™ë„¤ë¶*/
.content02{width: 100%; float: left; margin-top: 100px; background-color: #f6f6f6;}
.content02 .img_main{width: 100%; float: left;}
.content02 .img_main .img_box{width: 50%; float: left;}
.content02 .img_main .left{width: 50%; float: left; text-align: left; padding: 102px 0; height: 500px;}
.content02 .img_main .right{width: 50%; float: left; text-align: right; padding: 102px 0; height: 500px;}
.content02 .img_main .img_text .img_tit{font-size: 28px; font-weight: bold;}
.content02 .img_main .img_text .img_tit > img { float:left; }
.content02 .img_main .img_text ul{width: 600px;}
.content02 .img_main .img_text .left01{float: left; padding-left: 100px;}
.content02 .img_main .img_text .right01{float: right; padding-right: 100px;}
.content02 .img_main .img_text li{width: 100%; float: left;}
.content02 .img_main .img_text .img_more{margin-top: 35px;}
.content02 .img_main .img_text .img_txt{font-size: 19px; color: #666; margin-top: 20px; line-height: 30px;}
.content02 .img_main .img_text .left02{width: 254px; float: left; height: 50px; line-height: 45px; text-align: center; font-size: 21px; color: #ed7f06; border: 1px solid #ed7f06; border-radius: 5px;}
.content02 .img_main .img_text .right02{width: 254px; float: right; height: 50px; line-height: 45px; text-align: center; font-size: 21px; color: #ed7f06; border: 1px solid #ed7f06; border-radius: 5px;}
.content02 .img_main .img_text .img_button:hover{color: #fff; background-color: #ed7f06;}

/*ìš°ìˆ˜ ëžœë”©ë§ˆì¼“*/
.content03{width: 100%; float: left; margin-top: 100px;}
.content03 .content_section02 .content_menu{width: 100%; float: left; margin-top: 45px;}
.content_menu ul{min-width: 1200px; float: left;}
.content_menu li{cursor: pointer; width: 300px; display: inline-block; margin-left: -3px; vertical-align: middle; font-size: 18px; font-weight: 500; height: 49px; line-height: 49px; border:solid 1px #ccc; border-right:none;}
.content_menu li:nth-child(4n) {border-right:solid 1px #ccc;}
.content_menu li:last-child{border-right:solid 1px #ccc;}
.content_menu a:nth-child(4n) > li { border-right:solid 1px #ccc; }
.content_menu a:nth-child(2) > li { border-right:none;}
.content_menu li a{width: 300px; float: left; color: #333;}
.content_menu li:hover {background-color: #ed7f06; border:solid 1px #ed7f06;  color:#FFF;width:300px; height: 49px; line-height: 49px;}
.content_menu li:hover a{color:#FFF;}
.content_menu li.active {background-color: #ed7f06; border:solid 1px #ed7f06;  color:#FFF;width:300px; height: 49px; line-height: 49px;}
.content_menu li.active a{color:#FFF;}


/*ì¶”ì²œ*/
.content04{width: 100%; float: left; margin-top: 100px; background-color: #e8e8e8; padding: 100px 0;}
.content04 .content_section03 .sec_tit { color:#222; }
.content04 .content_section03 .sec_tit .point_tt { font-weight: 500; }
.content04 .content_section03 .content_box02{ width: 19.2%; float: left; padding: 50px 0; margin-left:1%; border:1px solid #d1d1d1; border-style: dashed; background-color: #f7f7f7; border-radius:20px; }
.content04 .content_section03 .content_box02:nth-child(1) { margin-left:0%; }
.content04 .content_section03 .content_box02 ul{width: 100%; float: left; }
.content04 .content_section03 .content_box02 .box_tit{font-size: 20px; font-weight: 600; margin-top: 30px; color:#ed5710;}
.content04 .content_section03 .content_box02 .box_con{color:#333;}
.content04 .content_section03 .sec_con2 { margin-top:40px; font-size:14px; color:#666; }

/*ì¶”ì²œ ëžœë”©ë§ˆì¼“*/
.content05{width: 100%; float: left; margin-top: 100px;}
.content05 .content_section04 .content_menu{width: 100%; float: left; margin-top: 45px;}

/*ëžœë”©ë§ˆì¼“í”Œë ˆì´ìŠ¤ ë°”ë¡œê°€ê¸°*/
.content06{width: 100%; float: left; height: 600px; background-color: #f6f6f6; padding-top: 100px;}
.content06 .img_box{width: 50%; float: left;}
.content06 .img_01{width: 425px; height: 340px; float: left; box-shadow: 0px 4px 8px 0px #b1b1b1;}
.content06 .img_02{width: 230px; height: 296px; float: left; box-shadow: 0px 4px 8px 0px #b1b1b1; position: absolute; right: 0; bottom: -95px;}
.content06 .img_text{width: 50%; float: left; text-align: left; padding-top: 38px; padding-left: 100px;}
.content06 .img_text .img_tit{font-size: 33px; font-weight: bold; letter-spacing: 0px;}
.content06 .img_text .img_subtit{font-size: 24px; margin-top: 26px; font-weight: 500;}
.content06 .img_text .img_subtit span{color: #ed7f06;}
.content06 .img_text ul{width: 100%; float: left;}
.content06 .img_text li{width: 100%; float: left;}
.content06 .img_text li:nth-child(2){width: 85px; border: 1px solid #ed7f06; margin-top: 18px}
/*.content06 .img_text li:last-child{margin-top: 35px;}*/
.content06 .img_text .img_txt{font-size: 19px; color: #666; margin-top: 20px; line-height: 30px;}
.content06 .img_text .img_txt2{font-size: 19px; color: #666; margin-top: 10px; line-height: 30px;}
.content06 .img_text .img_button{width: auto; float: right; font-size: 21px; color: #ed7f06; border: 1px solid #ed7f06; border-radius: 5px; padding: 10px 85px;}
.content06 .img_text .img_button:hover{color: #fff; background-color: #ed7f06;}

/*ì²˜ìŒ ë°©ë¬¸*/
.content07{width: 100%; float: left; margin-top: 70px; background-color: #eee; padding: 100px 0px;}
.content07 .content_section05 .content_box03{width: 22%; float: left;}
.content07 .content_section05 .content_box03 ul{width: 100%; float: left;}
.content07 .content_section05 .content_box03 li{width: 100%; float: left;}
.content07 .content_section05 .content_box03 .box_point{width: 140px; height: 140px; border: 1px solid #333; border-radius: 100px; background-color: #ededed; font-size: 40px; padding-top: 37px; margin: 0 62px; font-weight: lighter;}
.content07 .content_section05 .content_box03 .box_tit{font-size: 20px; font-weight: 500; margin-top: 30px;}
.content07 .content_section05 .content_box03 .box_con{font-size: 16px; line-height: 22px;}
.content07 .icon{width: 3.75%; float: left; height: 140px; padding-top: 64px;}

/*í‘¸í„°*/
.footer{width: 100%; float: left; margin-top: 0px; background-color: #333;}
.footer_top{width: 100%; float: left; border-bottom: 1px solid #3d3d3d;}
.footer_top ul{width: 100%; float: left; text-align: center;}
.footer_top li{float: left; text-align: center; font-size: 15px; font-weight: lighter; padding: 20px 0; margin-left:50px;}
.footer_top .info{margin-left: 20px;}
.footer_top li a{width: 100%; float: left; color: #fff;}

.footer_con{padding: 50px 0;}
.footer_con .f_logo{width: 25%; float: left; text-align: center; font-size: 33px; font-weight: bold; padding: 18px 0;}
.footer_con .f_logo a{color: #000; letter-spacing: 0; font-family: 'GmarketSansBold';}
.footer_con .f_con{width: 75%; float: left;}
.footer_con ul{width: 100%; float: left;}
.footer_con li{width: 100%; float: left; color: #fff; font-size: 15px; font-weight: lighter; line-height: 24px; letter-spacing: 0;}
.footer_con li:last-child{font-size: 13px; color: #585858; margin-top: 15px;}


/* 팝업영역 */
.popupViewBox { position: absolute; width: 500px; background-color: #FFF; left: 0; top: 0; z-index: 999; overflow: hidden; }
.popupViewBox > .conWrap { width: 100%; float: left; }
.popupViewBox > .conWrap img { max-width: 100%; }
.popupViewBox > .btnWrap { width: 100%; float: left; background-color: #333; padding: 5px 10px; }
.popupViewBox > .btnWrap > a { height: 23px; line-height: 23px; font-size: 12px; color: #FFF; font-weight: 500; }
.popupViewBox > .btnWrap > a.left { float: left; opacity: 0.6; }
.popupViewBox > .btnWrap > a.right { float: right; }
