@charset "utf-8";


/* ************************** 회사소개 ****************************** */
/* ----- 회사소개 :: 인사말 ----- */
/* 컨텐츠01 :: 타이틀 */
.company-tit-box{position: relative; margin-bottom: 100px}
.company-tit-box::after{content:""; position: absolute; bottom: 0; width: 100%; height:5px; background: url("../images/content/greeting_gray_line.png") center no-repeat}
.company-tit-box .since-txt{position: relative; display: block; margin-bottom: 50px; font-size: 32px; font-weight: 600; color: #ffb526; text-align: center}
.company-tit-box .since-txt::after{content:""; position: absolute; bottom: -15px; left: 50%; transform:translateX(-50%); width:100%; height: 14px; background: url("../images/content/greeting_since-txt_img.png") center no-repeat}
.company-tit-box > h4{font-size:52px; font-weight: 600; color: #111; letter-spacing: -0.5px; line-height: 1.15; text-align: center}
.company-tit-box > .ybm-txt-box{position: relative; width: 20%; margin: 10px auto; text-align: center}
.company-tit-box > .ybm-txt-box img{max-width: 100%; height: auto}
.company-page .red-txt{color: #e8463e}
.company-page .blue-txt{color: #004fa0}
.company-tit-box > .img-box{position: relative; top: -60px; z-index:-1; width: 100%; height: 0; padding-top: 40.16%; border-radius:45px; background: url("../images/content/greeting_tit_img.jpg") center/cover no-repeat}
.company-tit-box > .main-tit{padding-bottom: 60px; font-size:25px; font-weight: 400; color: #111; line-height: 2; letter-spacing: -0.5px; text-align: center}
.company-tit-box > .main-tit .bold{font-weight: 600}
/* 컨텐츠02 :: 이미지 오른쪽 */
/* 공통 */
.company-page .sub-img-box{display: flex; margin-bottom: 120px}
.company-page .sub-img-box:last-child{margin-bottom: 0}
.company-page .img-box-tit{margin-bottom: 30px; font-size:36px; font-weight: 400; color: #00a7d9; line-height: 1.16; letter-spacing: -1.5px}
.company-page .img-box-txt{font-size:19px; font-weight: 400; color: rgba(34,34,34,0.9); line-height: 2.21; letter-spacing: -1.1px}
.company-page .img-box-wrap .img-box{position: relative; width: 100%; height: 0; padding-top: 100%}
.company-page .img-box-wrap .img-box img{position: absolute; top: 0;left: 0;right: 0;bottom: 0;max-width: 100%;max-height: 100%}
.company-page .rt-img-box > .lt-txt-box{width: 72%; margin-right: 5%}
.company-page .rt-img-box > .img-box-wrap{width: calc(100% - 77%)}
.company-page .rt-img-box > .img-box-wrap .img-box::before{content:""; position: absolute; z-index:-1; top: 18px; left: -129px; width: 81px; height: 80px; background: url("../images/content/greeting_rt_point_img01.png") center/cover no-repeat}
.company-page .rt-img-box > .img-box-wrap .img-box::after{content:""; position: absolute; z-index:-1; top: 41%; right: -25%; width: 179px; height: 180px; background: url("../images/content/greeting_rt_point_img02.png") center/cover no-repeat}
/* 컨텐츠03 :: 이미지 왼쪽 */
.company-page .lt-img-box{align-items:center}
.company-page .lt-img-box > .img-box-wrap{width: 35%; margin-right: 8%}
.company-page .lt-img-box > .img-box-wrap .img-box::before{content:""; position: absolute; z-index:-1; top: -7%; left: -32%; width: 275px; height: 280px; background: url("../images/content/greeting_lt_point_img.png") center/cover no-repeat}
.company-page .lt-img-box > .rt-txt-box{width: calc(100% - 43%)}
.company-page .lt-img-box > .rt-txt-box .img-box-tit{color: #ef599d}
/* 컨텐츠04 :: 회색박스 포부 */
.company-page .promise-box{border-radius:60px; background: url("../images/content/greeting_promise_img.png") #f5f5f5 96% no-repeat}
.company-page .promise-box p{text-align: center; padding: 45px 153px; font-size: 22px; font-weight: 500; letter-spacing: -0.9px; line-height: 1.9; color: #111}
.company-page .promise-box p .red-txt, .company-page .promise-box p .blue-txt{font-weight: 600}

/* ----- 회사소개 :: 인사말 ----- */
@media all and (max-width:800px){
	/* 컨텐츠01 :: 타이틀 */
	.company-tit-box{margin-bottom: 80px}
	.company-tit-box .since-txt{margin-bottom: 25px; font-size: 21px}
	.company-tit-box .since-txt::after{bottom: -15px; width: 209px; height: 14px}
	.company-tit-box > h4{font-size:31px}
	.company-tit-box > .ybm-txt-box{width: 25%;}
	.company-tit-box > .img-box{top: -30px; border-radius:25px}
	.company-tit-box > .main-tit{padding-bottom: 50px; font-size:15px}
	/* 컨텐츠02 :: 이미지 오른쪽 */
	/* 공통 */
	.company-page .sub-img-box{flex-direction: column-reverse; text-align: center; margin-bottom: 80px}
	.company-page .img-box-tit{margin-bottom: 20px; font-size:23px}
	.company-page .img-box-txt{font-size:15px; line-height: 1.8}
	.company-page .img-box-wrap .img-box img{width: 100%; height: 100%}
	.company-page .rt-img-box > .lt-txt-box{width: 100%; margin-right: 0}
	.company-page .rt-img-box > .img-box-wrap{width: calc(100% - 40%); margin: 0 auto 35px}
	.company-page .rt-img-box > .img-box-wrap .img-box::before{left: -90px}
	/* 컨텐츠03 :: 이미지 왼쪽 */
	.company-page .lt-img-box{flex-direction: column}
	.company-page .lt-img-box > .img-box-wrap{width: 80%; margin-right: 0; margin:0 auto 35px}
	.company-page .lt-img-box > .img-box-wrap .img-box::before{top:-13px; width: 200px; height: 201px}
	.company-page .lt-img-box > .rt-txt-box{width: 100%}
	/* 컨텐츠04 :: 회색박스 포부 */
	.company-page .promise-box{border-radius:40px; background: url("../images/content/greeting_promise_img.png") #f5f5f5 96% no-repeat}
	.company-page .promise-box p{padding: 30px 150px 30px 30px; text-align: left; font-size: 16px}
}
/* ----- 회사소개 :: 인사말 ----- */
@media all and (max-width:480px){
	/* 컨텐츠02 :: 이미지 오른쪽 */
	.company-page .rt-img-box > .img-box-wrap .img-box::before{top:-9px; left: -81px}
	.company-page .rt-img-box > .img-box-wrap .img-box::after{top: 44%; width: 122px; height: 120px;}
	/* 컨텐츠04 :: 회색박스 포부 */
	.company-page .promise-box{position: relative; background-image:none}
	.company-page .promise-box::after{content:""; position: absolute; bottom: 15px; right: 15px; width: 105px; height: 101px; background: url("../images/content/greeting_promise_img.png") center no-repeat}
	.company-page .promise-box p{padding: 30px; max-width: 200px; text-align: left; font-size: 16px}
}

/* ************************** 연혁 ****************************** */
/* 컨텐츠02 :: 연혁 */
/* 연혁 탭메뉴 */
.history-page .sub-tab-wrapper-style{height: 77px}
.history-page .sub-tab-list-style ul{position: relative;}
.history-page .sub-tab-list-style ul::before{content:""; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 765px; height: 6px; background-color: #e2e2e2; border-radius:15px}
.history-page .sub-tab-list-style ul li{position: relative; display: inline-block; width: 255px; margin-left: 20px;}
.history-page .sub-tab-list-style ul li::before{content:""; position: absolute; top: 50%; transform: translateY(-50%); right: -22px; width: 10px; height: 10px; background-color: #ddd; border-radius:100%}
.history-page .sub-tab-list-style ul li:last-child::before{content:none}
.history-page .sub-tab-list-style ul li:first-child{margin-left: 0;}
.history-page .sub-tab-list-style ul li a{display:table; height: 77px; width:100%; background-color: transparent}
.history-page .sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:rgba(17,17,17,0.5); font-size:22px; font-weight: 500; letter-spacing:-0.5px; text-align:center;}
.history-page .sub-tab-list-style ul li.selected{z-index:1;}
.history-page .sub-tab-list-style ul li.selected::after{content:""; position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background-color: #00a8d9; border-radius:15px}
.history-page .sub-tab-list-style ul li.selected a em{color: #111;}
/* Tab Fixed Move*/
.history-page .sub-tab-list-style.top-fixed{z-index:1; top:0; background-color: #fff; height:77px;}
/* Mobile Tab Drop Menu */
.history-page .sub-drop-open-btn-style{display:none}
@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.history-page .sub-tab-list-style:before{border-bottom:0}
	.history-page .sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

@media all and (max-width:1120px){
	/* Tab Fixed Move*/
	.history-page .sub-tab-list-style.top-fixed{top: 160px}
}
@media all and (max-width:1024px){
	.history-page .sub-tab-list-style ul{display: table; width: 100%; padding: 0 5px; margin: 0; box-sizing:border-box}
	.history-page .sub-tab-list-style ul::before{width: calc(100% - 3%)}
	.history-page .sub-tab-list-style ul li{display: table-cell; width: 33.33%; margin: auto;}
	.history-page .sub-tab-list-style ul li::before{right: -10px}
}
@media all and (max-width:800px){
	/* Tab Fixed Move*/
	.history-page .sub-tab-list-style.top-fixed{top: 120px}
	.history-page .sub-tab-wrapper-style, .history-page .sub-tab-list-style.top-fixed, 
	.history-page .sub-tab-list-style ul li a{height: 55px}
	.history-page .sub-tab-list-style ul li::before{width: 5px; height: 5px; right: -2px}
	.history-page .sub-tab-list-style ul li a em{font-size: 16px; padding: 0 5px}
}


.history-list-con{position: relative; padding-top: 94px}
.history-list{padding-bottom: 70px;position: relative;}
.history-list-con::before{content:"";position: absolute; height: 98%; top: 110px; left: 50%; transform: translateX(-50%); border:1px dashed #ddd}
.history-list .list-wrap{position: relative; width: 50%}
.history-list .list-wrap::before{content:""; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; background-position: center; background-repeat: no-repeat}
.history-list:nth-child(1) .list-wrap::before{left: -650px; height: 90px; background-image: url("../images/content/history_point01.png")}
.history-list:nth-child(2) .list-wrap::before{right: -650px; height: 187px; background-image: url("../images/content/history_point02.png")}
.history-list:nth-child(3) .list-wrap::before{left: -650px; height: 177px; background-image: url("../images/content/history_point03.png")}
.history-list:nth-child(4) .list-wrap::before{right: -650px; height: 218px; background-image: url("../images/content/history_point04.png")}
.history-list:nth-child(5) .list-wrap::before{left: -650px; height: 279px; background-image: url("../images/content/history_point05.png")}
.history-list:nth-child(6) .list-wrap::before{right: -650px; height: 313px; background-image: url("../images/content/history_point06.png")}
.history-list:nth-child(7) .list-wrap::before{left: -650px; height: 235px; background-image: url("../images/content/history_point07.png")}
.history-list:nth-child(8) .list-wrap::before{right: -650px; height: 256px; background-image: url("../images/content/history_point08.png")}
.history-list:nth-child(9) .list-wrap::before{transform: translateY(-50%) rotate(180deg); left: -650px; height: 279px; background-image: url("../images/content/history_point05.png")}
.history-list:nth-child(10) .list-wrap::before{right: -650px; height: 313px; background-image: url("../images/content/history_point10.png")}
.history-list .right-con{float:right;} 
.history-list .left-con{float:left; text-align: right}
.history-list .right-wrap{position: relative; padding-left: 45px} .history-list .left-wrap{position: relative; padding-right: 45px}
.history-list .list-wrap .list-inner span.circle-one{content:""; position: absolute; top:10px; width: 20px; height: 20px; background-color: rgba(0,168,217,0.4); border-radius: 100%}
.history-list .list-wrap .list-inner span.circle-two{content:""; position: absolute; top: 4px; width: 33px; height: 33px; background-color: rgba(0,168,217,0.2);border-radius: 100%}
.history-list .list-wrap .list-inner i.circle-center{content:""; position: absolute; top: 20px; width: 8px; height: 8px; background-color: #fff; border: 2px solid #00a8d9; border-radius:100%; transform: translateY(-50%)}
.history-list .left-wrap span.circle-one{right: -10px} .history-list .left-wrap span.circle-two{right: -16px} .history-list .left-wrap  i.circle-center{right: -6px;}
.history-list .right-wrap span.circle-one{left: -10px} .history-list .right-wrap span.circle-two{left: -17px} .history-list .right-wrap  i.circle-center{left: -6px;}
.history-list .list-wrap .list-inner .year{position: relative; margin-bottom: 20px; font-size: 50px; font-weight: 600; letter-spacing: -0.9px; color: #00a8d9}
.history-list .list-wrap .list-inner ul li{position: relative; padding-left: 45px; margin: 15px 0; font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: -0.9px; color: #555}
.history-page #tabCon03 .history-list-con .history-list .list-wrap .list-inner ul li{padding-left: 60px}
.history-list .left-wrap .list-inner ul li{margin: 20px 0;}
.history-list-con .list-wrap .list-inner ul li .month{position: absolute; top: 0; left: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.5px; color: #111}
.history-list-con .left-con .list-inner ul li {padding-right: 45px}
.history-page #tabCon03 .left-con .list-inner ul li{padding-right: 60px}
.history-list-con .left-con .list-inner ul li .month{right: 0}

/* ---------- 연혁 ---------- */
@media all and (max-width:800px){
	/* 컨텐츠02 :: 연혁 */
	.history-list-con{padding: 45px 0 0 10px;}
	.history-list-con::before{top:55px; left: 10px; transform: translateX(0)}
	.history-list{padding-bottom: 35px;}
	.history-list .list-wrap{width: 100%} .history-list .right-wrap{padding-left: 30px} .history-list .left-wrap{padding-left: 30px; padding-right: 0}
	.history-list .list-wrap::before{content:none}
	.history-list .left-con{text-align: left}
	.history-list .list-wrap .list-inner span.circle-one{top: 4px;left: -8px;width: 18px; height: 18px} 
	.history-list .list-wrap .list-inner span.circle-two{top: -2px;left: -15px;width: 31px; height: 31px;}
	.history-list .list-wrap .list-inner i.circle-center{top: 13px; left: -4px;width: 6px; height: 6px;}
	.history-list .list-wrap .list-inner .year{font-size: 30px}
	.history-list .list-wrap .list-inner ul li{padding-left: 25px; margin: 15px 0; font-size: 13px}
	.history-page #tabCon03 .history-list-con .history-list .list-wrap .list-inner ul li{padding-left: 45px}
	.history-list .left-wrap .list-inner ul li{margin: 20px 0}
	.history-list-con .list-wrap .list-inner ul li .month{font-size: 13px}
	.history-list-con .left-con .list-inner ul li {padding-right: 25px}		
}

/* ************************** 판매처소개 ****************************** */
/* 상단 탭메뉴 */
.store-page .sub-tab-list-style ul li{display: inline-block; width: 158px; margin-left: 10px; margin-bottom: 10px}
.store-page .sub-tab-list-style ul li:first-child{margin-left: 0;}
.store-page .sub-tab-list-style ul li a{display:table; height: 60px; width:100%; background-color: #fff; -webkit-border-radius: 75px; border-radius: 75px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; border:1px solid #525252}
.store-page .sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#222; font-size:18px; font-weight: 400; letter-spacing:-0.5px; text-align:center;}
.store-page .sub-tab-list-style ul li.selected{z-index:1;}
.store-page .sub-tab-list-style ul li.selected a{background-color:#161616}
.store-page .sub-tab-list-style ul li.selected a em{font-weight: 600; color: #fff}
.store-page .sub-tab-wrapper-style{height: 74px}
.store-page .sub-drop-menu-style ul{width: 94%; margin: auto; overflow: hidden; border-radius:15px}
/* Tab Fixed Move*/
.store-page .sub-tab-list-style.top-fixed{position:fixed; z-index:1; top:0; left:0; padding: 10px 0; width:100%; height:auto; background-color: #fff}

/* 하단 컨텐츠 */
.store-page .sub-tab-con{margin: 50px 0}
.store-page .store-list-wrap > h4{margin-bottom: 30px; font-size:32px; letter-spacing: -0.5px; font-weight: 600; color: #222}
.store-page .store-list-wrap > .store-list-box{width: 100%; border-top: 2px solid #111}
.store-page .store-list-wrap > .store-list-box th{padding: 15px 20px; border-bottom: 1px solid #ddd; box-sizing: border-box; font-size:18px; font-weight: 600; color: #222; letter-spacing: -0.9px; line-height: 1.5; text-align: left}
.store-page .store-list-wrap > .store-list-box td{padding: 15px 20px; border-bottom: 1px solid #ddd; box-sizing: border-box; font-size:18px; font-weight: 400; letter-spacing: -0.9px; line-height: 1.5; color: rgba(34,34,34,0.8); word-break: break-all;}
.store-page .store-list-wrap > .store-list-box td.gps-icon > p, .store-page .store-list-wrap > .store-list-box td.call-icon > p{position: relative; padding-left: 22px}
.store-page .store-list-wrap > .store-list-box td.gps-icon > p::before,
.store-page .store-list-wrap > .store-list-box td.call-icon > p::before{position: absolute; top:-1px; left: 0; width: 18px; font-size:18px; font-family:'xeicon'; color: rgba(34,34,34,0.8)}
.store-page .store-list-wrap > .store-list-box td.gps-icon > p::before{content:"\eae2"}
.store-page .store-list-wrap > .store-list-box td.call-icon > p::before{content:"\e9d3"}

@media all and (min-width:1025px){
	/* 상단 탭메뉴 */
	.store-page .sub-tab-list-style:before{border:0; z-index:-1}
}
@media all and ( max-width: 800px ){
	/* 상단 탭메뉴 */
	.store-page .sub-tab-list-style ul li{display: block; width: auto;margin: 0}
	.store-page .sub-tab-list-style ul li a{display:table; height: auto; width:100%; box-sizing:border-box; padding: 15px; background-color: #fff; -webkit-border-radius: 0; border-radius: 0;border:0}
	.store-page .sub-drop-open-btn-style{padding:15px; border-radius: 50px; height:50px; line-height:19px}
	.store-page .sub-tab-list-style ul li a em{display:block; font-size:14px; text-align: left}
	.store-page .sub-tab-list-style ul li.selected a{background-color:#fff}
	.store-page .sub-tab-list-style ul li.selected a em{color: #161616}
	/* Tab Fixed Move*/
	.store-page .sub-tab-list-style.top-fixed{top:121px; left:0; width:100%; height:43px; padding: 0; box-sizing: border-box}
	/* 하단 컨텐츠 */
	.store-page .store-list-wrap > h4{margin-bottom: 20px; font-size:21px}
	.store-page .store-list-wrap > .store-list-box th{padding: 15px;font-size:14px}
	.store-page .store-list-wrap > .store-list-box td{padding: 15px; font-size:14px}
	.store-page .store-list-wrap > .store-list-box td.gps-icon > p, .store-page .store-list-wrap > .store-list-box td.call-icon > p{padding-left: 18px}
	.store-page .store-list-wrap > .store-list-box td.gps-icon > p::before,
	.store-page .store-list-wrap > .store-list-box td.call-icon > p::before{width: 14px; font-size:14px}
}

/* ************************** 게시판 ****************************** */
/* ---------- 이용가이드 ---------- */
/* 컨텐츠01 :: STEP */
.guide-page .guide-step-box{margin-bottom: 150px}
.guide-page .guide-step-list{display: flex; flex-wrap:wrap; justify-content:space-between}
.guide-page .guide-step-list .step-con{width: calc(50% - 50px); position: relative}
.guide-page .guide-step-list .step-con:nth-child(1)::after{content:""; position: absolute; top: 60%; transform:translateY(-50%); right: -74px; width: 46px; height: 45px; background: url("../images/content/guide_step_arrow.png") no-repeat}
.guide-page .guide-step-list .step-con .step-tit-box{margin-bottom: 15px}
.guide-page .guide-step-list .step-con .step-tit-box > span{padding-right: 5px; font-size: 25px; letter-spacing: -0.5px; font-weight: 600; color: #222}
.guide-page .guide-step-list .step-con .step-tit-box > em{font-size: 25px; letter-spacing: -0.5px; font-weight: 600}
.guide-page .guide-step-list .step-con:nth-child(1) .step-tit-box > em{color: #8572d1;}
.guide-page .guide-step-list .step-con:nth-child(2) .step-tit-box > em{color: #11bcbf;}
.guide-page .guide-step-list .step-con .step-img-wrap{position: relative; display: flex; flex-wrap: wrap; align-items:center; justify-content:center; height: 100%; border-radius:30px; padding: 30px 50px; box-sizing:border-box; text-align: center}
.guide-page .guide-step-list .step-con:nth-child(1) .step-img-wrap{background: #8572d1}
.guide-page .guide-step-list .step-con:nth-child(1) .step-img-wrap::before{content:""; position: absolute; top: 180px; right: 0; width: 103px; height: 102px; background: url("../images/content/guide_step01_arrow.png") no-repeat}
.guide-page .guide-step-list .step-con:nth-child(2) .step-img-wrap{background-color: #11bcbf}
.guide-page .guide-step-list .step-con .step-img-wrap .img-box img{max-width: 100%; height: auto}
.guide-page .guide-step-list .step-con .step-img-wrap .step-txt{font-size: 21px; font-weight: 400; letter-spacing: -1.2px; color: #fff; line-height: 1.5}
.guide-page .guide-step-list .step-con:nth-child(1) .step-img-wrap .step-txt{font-size:24px}
.guide-page .guide-step-list .step-con .step-img-wrap .step-add-txt{display: block; margin-top: 10px; font-size: 15px; font-weight: 400; letter-spacing: -0.5px; color: rgba(255,255,255,0.9); line-height: 1.5}
/* 컨텐츠02 :: e-book 사용방법 */
.guide-page .ebook-box > div{margin-bottom: 70px}
.guide-page .ebook-box > div:last-child{margin-bottom: 0}
.guide-page .ebook-box h4{margin-bottom: 40px; font-size: 42px; color: #111; font-weight: 600; letter-spacing: -0.5px; line-height: 1.6; text-align: center}
.guide-page .ebook-box .ebook-tit{position: relative; padding-left: 55px; margin-bottom: 30px; font-size: 34px; font-weight: 600; color: #111; letter-spacing: -0.9px; line-height: 1.3} 
.guide-page .ebook-box .ebook-tit::before{content:""; position: absolute; top: 8px; left: 0; width: 39px; height: 21px; background:url("../images/content/three_check_icon.png") center no-repeat}
.guide-page .ebook-box .gray-con-box{padding: 45px 60px; border-radius: 40px; background-color: #f6f6f6}
.guide-page .ebook-box .round-rect-tit{padding: 8px 20px;  box-sizing: border-box; text-align: center; border-radius: 50px; background-color: #111; font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.5px; line-height: 1.2}
.guide-page .ebook-box .num-info-txt{position: relative; margin-top: 20px; padding-left: 40px; font-size: 17px; font-weight: 400; color: #202020; letter-spacing: -1.0px; line-height: 1.4}
.guide-page .ebook-box .num-info-txt .num{position: absolute; top: 50%; transform: translateY(-50%); left: 0; display: table; width: 27px; height: 27px; border-radius: 100%}
.guide-page .ebook-box .num-info-txt .num > em{display: table-cell; vertical-align: middle; text-align: center; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -0.5px}
.guide-page .ebook-box .num-info-txt .yellow-num{background-color: #ffae00}
.guide-page .ebook-box .num-info-txt .mint-num{background-color: #11bcbf}
.guide-page .ebook-box .num-info-txt .purple-num{background-color: #8572d1}
.guide-page .ebook-box .num-info-txt .green-num{background-color: #9bcf08}
.guide-page .ebook-box .num-info-txt .pink-num{background-color: #ef599d}
.guide-page .ebook-box .num-info-txt .yellow-tit{color: #ffae00}
.guide-page .ebook-box .num-info-txt .mint-tit{color: #11bcbf}
.guide-page .ebook-box .num-info-txt .purple-tit{color: #8572d1}
.guide-page .ebook-box .num-info-txt .green-tit{color: #9bcf08}
.guide-page .ebook-box .num-info-txt .pink-tit{color: #ef599d}
/* Viewer */
.guide-page .ebook-box .view-tit-info{margin-bottom: 20px}
.guide-page .ebook-box .view-img-box {display: flex;}
.guide-page .ebook-box .view-img-box .img-box{width: 780px; margin-right: 50px}
.guide-page .ebook-box .view-img-box .img-box img{max-width: 100%; height: auto}
.guide-page .ebook-box .view-img-box .view-img-info{width: calc( 100% - 830px); position: relative; top: 34px}
.guide-page .ebook-box .view-img-box .view-img-info .info-list-box{margin-top: 40px}
.guide-page .ebook-box .view-img-box .view-img-info .num-info-txt{margin-bottom: 10px}
.guide-page .ebook-box .view-img-box .view-img-info .num-info-txt:last-child{margin-bottom: 0}
.guide-page .ebook-box .view-img-box .view-img-info .pd-none-txt{margin: 0; padding: 0; line-height: 1.5;}
/* ebook 설명리스트 공통 */
.guide-page .ebook-box .ebook-info-list{margin-top: 70px}
.guide-page .ebook-box .ebook-info-list .info-list-box{margin-top: 30px}
.guide-page .ebook-info-list .info-list-box .num-info-txt{display: flex; flex-wrap: wrap; align-items:center; justify-content: center} 
.guide-page .ebook-info-list .info-list-box .info-tit-box{display: inline-block; width: 20%}
.guide-page .ebook-info-list .info-list-box .info-txt{width: calc(100% - 20%)}
.guide-page .ebook-con .ebook-info-list .info-list-box .info-tit-box{display: inline-block; width: 15%}
.guide-page .ebook-con .ebook-info-list .info-list-box .info-txt{width: calc(100% - 15%)}
.guide-page .player-con .ebook-info-list .info-list-box .info-tit-box{display: inline-block; width: 40%}
.guide-page .player-con .ebook-info-list .info-list-box .info-txt{width: calc(100% - 40%)}
.guide-page .ebook-box .only-img-list{display: flex; flex-wrap:wrap; align-items: center}
.guide-page .ebook-con .only-img-list > .img-box:nth-child(1){width: 60%; margin-right: 5%}
.guide-page .ebook-con .only-img-list > .img-box:nth-child(2){width: 35%}
.guide-page .player-con .only-img-list > .img-box:nth-child(1){width: 55%; margin-right: 1%}
.guide-page .player-con .only-img-list > .img-box:nth-child(2){width: 44%}
.guide-page .ebook-box .only-img-list > .img-box img{max-width: 100%; height: auto}


/* ---------- 이용가이드 ---------- */
@media all and ( max-width: 1200px ){
	/* Viewer */
	.guide-page .ebook-box .view-img-box{flex-direction:column}
	.guide-page .ebook-box .view-img-box .img-box{width: 100%; margin-right: 0; margin-bottom: 40px}
	.guide-page .ebook-box .view-img-box .view-img-info{width: 100%; position: static; top: auto}
}
@media all and ( max-width: 1024px ){
	/* ebook 설명리스트 공통 */
	.guide-page .ebook-info-list .info-list-box .info-tit-box{width: 35%}
	.guide-page .ebook-info-list .info-list-box .info-txt{width: calc(100% - 35%)}
	.guide-page .ebook-con .ebook-info-list .info-list-box .info-tit-box{width: 35%}
	.guide-page .ebook-con .ebook-info-list .info-list-box .info-txt{width: calc(100% - 35%)}
}
@media all and ( max-width: 800px ){
	/* 컨텐츠01 :: STEP */
	.guide-page .guide-step-box{margin-bottom: 75px}
	.guide-page .guide-step-list{flex-direction: column}
	.guide-page .guide-step-list .step-con{width: 100%; margin-bottom: 20px; position: relative}
	.guide-page .guide-step-list .step-con:last-child{margin-bottom: 0}
	.guide-page .guide-step-list .step-con:nth-child(1)::after{content:""; position: absolute; top: 60%; transform:translateY(-50%); right: -74px; width: 46px; height: 45px}
	.guide-page .guide-step-list .step-con .step-tit-box{margin-bottom: 10px}
	.guide-page .guide-step-list .step-con .step-tit-box > span{font-size: 18px}
	.guide-page .guide-step-list .step-con .step-tit-box > em{font-size: 18px}
	.guide-page .guide-step-list .step-con .step-img-wrap{flex-direction: column; border-radius:15px; padding: 30px}
	.guide-page .guide-step-list .step-con:nth-child(1) .step-img-wrap::before{top: 40%; width: 95px; height: 95px}
	.guide-page .guide-step-list .step-con .step-img-wrap .img-box{margin-bottom: 20px}
	.guide-page .guide-step-list .step-con .step-img-wrap .step-txt{font-size: 16px}
	.guide-page .guide-step-list .step-con:nth-child(1) .step-img-wrap .step-txt{font-size:17px}
	.guide-page .guide-step-list .step-con .step-img-wrap .step-add-txt{margin-top: 5px; font-size: 12px}
	/* 컨텐츠02 :: e-book 사용방법 */
	.guide-page .ebook-box > div{margin-bottom: 60px}
	.guide-page .ebook-box h4{margin-bottom: 40px; font-size: 26px; line-height: 1.4;}
	.guide-page .ebook-box .ebook-tit{padding-left: 35px; margin-bottom: 15px; font-size: 22px} 
	.guide-page .ebook-box .ebook-tit::before{content:""; position: absolute; top: 4px; left: 0; width: 30px; height: 16px; background-size: contain!important;}
	.guide-page .ebook-box .gray-con-box{padding: 30px 15px; border-radius: 20px; background-color: #f6f6f6}
	.guide-page .ebook-box .round-rect-tit{padding: 7px 10px;  box-sizing: border-box; text-align: center; border-radius: 25px; font-size: 15px}
	.guide-page .ebook-box .num-info-txt{padding-left: 30px; font-size: 14px}
	.guide-page .ebook-box .num-info-txt .num{width: 24px; height: 24px}
	.guide-page .ebook-box .num-info-txt .num > em{font-size: 12px}
	.guide-page .ebook-box .view-img-box .view-img-info .info-list-box{margin-top: 25px}
	/* ebook 설명리스트 공통 */
	.guide-page .ebook-box .ebook-info-list{margin-top: 45px}
	.guide-page .ebook-box .ebook-info-list .info-list-box{margin-top: 25px}
	.guide-page .ebook-info-list .info-list-box .info-tit-box{width: 25%}
	.guide-page .ebook-info-list .info-list-box .info-txt{width: calc(100% - 25%)}
	.guide-page .ebook-con .ebook-info-list .info-list-box .info-tit-box{width: 25%}
	.guide-page .ebook-con .ebook-info-list .info-list-box .info-txt{width: calc(100% - 25%)}
	.guide-page .ebook-box .only-img-list{flex-direction: column}
	.guide-page .ebook-con .only-img-list > .img-box:nth-child(1){width: 100%; margin-right: 0; margin-bottom:15px; text-align: center}
	.guide-page .ebook-con .only-img-list > .img-box:nth-child(2){width: 100%; text-align: center}
	.guide-page .player-con .only-img-list > .img-box:nth-child(1){width: 100%; margin-right: 0; margin-bottom:15px; text-align: center}
	.guide-page .player-con .only-img-list > .img-box:nth-child(2){width: 100%; text-align: center}
}
@media all and ( max-width: 640px ){
	/* ebook 설명리스트 공통 */
	.guide-page .ebook-box .num-info-txt{margin-top: 25px}
	.guide-page .ebook-box .view-img-info .num-info-txt .num{top: 47%}
	.guide-page .ebook-box .num-info-txt .num{top: 16%; width: 22px; height: 22px}
	.guide-page .ebook-info-list .info-list-box .info-tit-box{width: 100%; padding-bottom:5px}
	.guide-page .ebook-info-list .info-list-box .info-txt{width: 100%}
	.guide-page .ebook-con .ebook-info-list .info-list-box .info-tit-box{width: 100%; padding-bottom:10px}
	.guide-page .ebook-con .ebook-info-list .info-list-box .info-txt{width:100%}
	.guide-page .player-con .ebook-info-list .info-list-box .info-tit-box{width: 100%; padding-bottom:10px}
	.guide-page .player-con .ebook-info-list .info-list-box .info-txt{width: 100%}
}


/* ************************** 온라인학습 ****************************** */
/* ---------- 온라인학습 ---------- */
.online-intro-con > article{margin-bottom: 80px}
.online-intro-con > article:last-child{margin-bottom: 0}
.online-intro-con .tit-book-img-box{position: relative; height: 0; padding-top: 66%}
.online-intro-con .tit-book-img-box img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%;height: 100%;}
.online-intro-con .check-box-wrap .check-box{margin-bottom: 60px}
.online-intro-con .check-box-wrap .check-box:last-child{margin-bottom: 0}
.online-intro-con .check-box-wrap .check-box > h4{position: relative; padding-left: 60px; margin-bottom: 20px; font-size: 26px; font-weight: 600; color: #000; letter-spacing: -0.5px; line-height: 1.6}
.online-intro-con .check-box-wrap .check-box > h4::before{content:""; position: absolute; top: 8px; left: 0; width: 39px; height: 21px; background:url("../images/content/three_check_icon.png") center no-repeat}
.online-intro-con .check-box-wrap .check-box .check-list .check-icon{position: relative; padding: 20px 60px; font-size:18px; font-weight: 500; color: #000; letter-spacing: -0.5px; line-height: 1.4; border-radius:15px}
.online-intro-con .check-box-wrap .check-box .check-list .check-icon:nth-child(2n-1){background-color: #f6f6f6}
.online-intro-con .check-box-wrap .check-box .check-list .check-icon::before{content:""; position: absolute; top: 23px; left: 30px; width: 20px; height: 18px}
.online-intro-con .check-box-wrap .check-box .check-list .pink-icon::before{background:url("../images/content/phonics_check_icon.png") center no-repeat}
.online-intro-con .check-box-wrap .check-box .check-list .blue-icon::before{background:url("../images/content/town_check_icon.png") center no-repeat}
.online-intro-con .check-box-wrap .check-box .check-list .red-icon::before{background:url("../images/content/town_check_icon02.png") center no-repeat}
.online-intro-con .step-box{padding: 60px; background-color: #f6f6f6; border-radius:30px}
.online-intro-con .step-box-inner > h5{margin-bottom: 40px; font-size: 30px; font-weight: 600; color: #000; letter-spacing: -0.5px}
.online-intro-con .step-box-inner > .step-list{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -25px;}
.online-intro-con .step-box-inner > .step-list .step-con{width: calc(20% - 50px); margin: 0 25px; position: relative}
.online-intro-con .step-box-inner > .step-list .step-con::after{content:""; position: absolute; top: 33%; right: -39px; width: 23px; height: 25px; background:url("../images/content/step_arrow_icon.png") center no-repeat}
.online-intro-con .step-box-inner > .step-list .step-con:last-child::after{content:none}
.online-intro-con .step-box-inner > .step-list .img-box{position: relative; width: 100%; height: 0; padding-top: 134.60%}
.online-intro-con .step-box-inner > .step-list .img-box img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%;height: 100%}
.online-intro-con .step-box-inner > .step-list .step-con .info-box .num{display: block; margin: 10px 0; font-size: 16px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.3}
.online-intro-con .step-box-inner > .step-list .step-con:nth-child(1) .info-box .num{color: #f85296}
.online-intro-con .step-box-inner > .step-list .step-con:nth-child(2) .info-box .num{color: #17aad0}
.online-intro-con .step-box-inner > .step-list .step-con:nth-child(3) .info-box .num{color: #f58934}
.online-intro-con .step-box-inner > .step-list .step-con:nth-child(4) .info-box .num{color: #77be4e}
.online-intro-con .step-box-inner > .step-list .step-con:nth-child(5) .info-box .num{color: #8c7ad2}
.online-intro-con .step-box-inner > .step-list .step-con .info-box > p{font-size: 17px; color: #000; font-weight: 500; letter-spacing: -0.9px; line-height: 1.3}
.online-intro-con .review-box{padding:40px; border:1px solid #e2e2e2; border-radius:30px; text-align: center}
.online-intro-con .review-box .book-img-box{margin: 60px 0;}
.online-intro-con .review-box .book-img-box img{max-width: 100%; height: auto}
.online-intro-con .review-box .review-info-box{padding: 20px; background-color: #f6f6f6; border-radius:20px; text-align: center}
.online-intro-con .review-box .review-info-box > .review-info-txt{font-size: 20px; font-weight: 500; letter-spacing: -0.9px; color: #000; line-height: 1.5}

/* ---------- 온라인학습 ---------- */
@media all and ( max-width: 1024px ){
	.online-intro-con .step-box-inner > .step-list{justify-content: center}
	.online-intro-con .step-box-inner > .step-list .step-con{width: calc(33.33% - 50px); margin: 20px 25px;}
	.online-intro-con .step-box-inner > .step-list .step-con:nth-child(4),
	.online-intro-con .step-box-inner > .step-list .step-con:nth-child(5){margin-bottom: 0}
	.online-intro-con .step-box-inner > .step-list .step-con::after{top: 39%; right: -35px}
	.online-intro-con .step-box-inner > .step-list .step-con:nth-child(3n)::after{content:none}
}
@media all and ( max-width: 800px ){
	.online-intro-con > article{margin-bottom: 60px}
	.online-intro-con .check-box-wrap .check-box{margin-bottom: 40px}
	.online-intro-con .check-box-wrap .check-box > h4{padding-left: 40px; font-size: 18px}
	.online-intro-con .check-box-wrap .check-box > h4::before{top: 4px; width: 30px; height: 16px; background-size: contain!important;}
	.online-intro-con .check-box-wrap .check-box .check-list .check-icon{padding: 20px 45px; font-size:14px}
	.online-intro-con .check-box-wrap .check-box .check-list .check-icon::before{top: 20px; left: 20px; width: 16px; background-size: contain!important;}
	.online-intro-con .step-box{padding: 30px; border-radius:15px}
	.online-intro-con .step-box-inner > h5{margin-bottom: 20px; font-size: 20px}
	.online-intro-con .step-box-inner > .step-list{margin: 0 -10px; justify-content:normal}
	.online-intro-con .step-box-inner > .step-list .step-con{width: calc(50% - 20px); margin: 10px}
	.online-intro-con .step-box-inner > .step-list .step-con:last-child{margin-bottom: 0}
	.online-intro-con .step-box-inner > .step-list .step-con::after{content:none}
	.online-intro-con .step-box-inner > .step-list .step-con .info-box .num{font-size: 13px}
	.online-intro-con .step-box-inner > .step-list .step-con .info-box > p{font-size: 14px}
	.online-intro-con .review-box{padding:20px; border-radius:15px}
	.online-intro-con .review-box .book-img-box{margin: 30px 0}
	.online-intro-con .review-box .review-info-box{padding: 20px; border-radius:15px}
	.online-intro-con .review-box .review-info-box > .review-info-txt{font-size: 15px}
}


/* ---------- 온라인학습 이용가이드 추가 ---------- */
.learning-guide-box h4{margin-bottom: 60px; font-size: 42px; color: #111; font-weight: 600; letter-spacing: -0.5px; line-height: 1.6; text-align: center}
.learning-guide-box .guide-step-list{display: flex; flex-wrap:wrap; justify-content:space-between}
.learning-guide-box .guide-step-list .step-con{width: calc(50% - 50px); position: relative}
.learning-guide-box .guide-step-list .step-con:nth-child(1)::after{content:""; position: absolute; top: 60%; transform:translateY(-50%); right: -74px; width: 46px; height: 45px; background: url("../images/content/guide_step_arrow.png") no-repeat}
.learning-guide-box .guide-step-list .step-con .step-tit-box{margin-bottom: 15px}
.learning-guide-box .guide-step-list .step-con .step-tit-box > span{padding-right: 5px; font-size: 25px; letter-spacing: -0.5px; font-weight: 600; color: #222}
.learning-guide-box .guide-step-list .step-con .step-tit-box > em{font-size: 25px; letter-spacing: -0.5px; font-weight: 600}
.learning-guide-box .guide-step-list .step-con:nth-child(1) .step-tit-box > em{color: #8572d1;}
.learning-guide-box .guide-step-list .step-con:nth-child(2) .step-tit-box > em{color: #11bcbf;}
.learning-guide-box .guide-step-list .step-con .step-img-wrap{position: relative; display: flex; flex-wrap: wrap; align-items:center; justify-content:center; height: 100%; border-radius:30px; padding: 30px 50px; box-sizing:border-box; text-align: center}
.learning-guide-box .guide-step-list .step-con:nth-child(1) .step-img-wrap{background: #8572d1}
.learning-guide-box .guide-step-list .step-con:nth-child(1) .step-img-wrap::before{content:""; position: absolute; top: 180px; right: 0; width: 103px; height: 102px; background: url("../images/content/guide_step01_arrow.png") no-repeat}
.learning-guide-box .guide-step-list .step-con:nth-child(2) .step-img-wrap{background-color: #11bcbf}
.learning-guide-box .guide-step-list .step-con .step-img-wrap .img-box img{max-width: 100%; height: auto}
.learning-guide-box .guide-step-list .step-con .step-img-wrap .step-txt{font-size: 21px; font-weight: 400; letter-spacing: -1.2px; color: #fff; line-height: 1.5}
.learning-guide-box .guide-step-list .step-con:nth-child(1) .step-img-wrap .step-txt{font-size:24px}
.learning-guide-box .guide-step-list .step-con .step-img-wrap .step-add-txt{display: block; margin-top: 10px; font-size: 15px; font-weight: 400; letter-spacing: -0.5px; color: rgba(255,255,255,0.9); line-height: 1.5}

@media all and ( max-width: 800px ){
	/* 컨텐츠01 :: STEP */
	.learning-guide-box h4{margin-bottom:30px; font-size: 26px}
	.learning-guide-box .guide-step-list{flex-direction: column}
	.learning-guide-box .guide-step-list .step-con{width: 100%; margin-bottom: 20px; position: relative}
	.learning-guide-box .guide-step-list .step-con:last-child{margin-bottom: 0}
	.learning-guide-box .guide-step-list .step-con:nth-child(1)::after{content:""; position: absolute; top: 60%; transform:translateY(-50%); right: -74px; width: 46px; height: 45px}
	.learning-guide-box .guide-step-list .step-con .step-tit-box{margin-bottom: 10px}
	.learning-guide-box .guide-step-list .step-con .step-tit-box > span{font-size: 18px}
	.learning-guide-box .guide-step-list .step-con .step-tit-box > em{font-size: 18px}
	.learning-guide-box .guide-step-list .step-con .step-img-wrap{flex-direction: column; border-radius:15px; padding: 30px}
	.learning-guide-box .guide-step-list .step-con:nth-child(1) .step-img-wrap::before{top: 40%; width: 95px; height: 95px}
	.learning-guide-box .guide-step-list .step-con .step-img-wrap .img-box{margin-bottom: 20px}
	.learning-guide-box .guide-step-list .step-con .step-img-wrap .step-txt{font-size: 16px}
	.learning-guide-box .guide-step-list .step-con:nth-child(1) .step-img-wrap .step-txt{font-size:17px}
	.learning-guide-box .guide-step-list .step-con .step-img-wrap .step-add-txt{margin-top: 5px; font-size: 12px}

}