/* Minification failed. Returning unminified contents.
(170,45): run-time error CSS1036: Expected expression, found '}'
(365,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(366,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(369,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(370,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(375,23): run-time error CSS1039: Token not allowed after unary operator: '-top'
(376,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(379,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(383,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(386,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(389,38): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(392,26): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(395,30): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(400,30): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(405,26): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(408,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(411,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(414,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(417,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(420,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(425,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(428,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(434,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(437,23): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(440,26): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(445,23): run-time error CSS1039: Token not allowed after unary operator: '-top'
(448,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(451,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(454,23): run-time error CSS1039: Token not allowed after unary operator: '-top'
(457,37): run-time error CSS1039: Token not allowed after unary operator: '-top'
(460,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(467,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(482,31): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(486,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(492,23): run-time error CSS1039: Token not allowed after unary operator: '-top'
(493,28): run-time error CSS1039: Token not allowed after unary operator: '-top'
(496,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(499,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(506,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(514,27): run-time error CSS1039: Token not allowed after unary operator: '-top'
(517,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(525,20): run-time error CSS1039: Token not allowed after unary operator: '-top'
(528,38): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(540,38): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(545,38): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(548,38): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(551,30): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(554,37): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(557,37): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(560,30): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(564,30): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(568,38): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(574,30): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(579,30): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(582,37): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(585,30): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(590,38): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(593,37): run-time error CSS1039: Token not allowed after unary operator: '-bottom'
(602,52): run-time error CSS1039: Token not allowed after unary operator: '-top'
(603,54): run-time error CSS1039: Token not allowed after unary operator: '-top'
 */

@charset "UTF-8";

.icon.menu{display:inline-block;width:20px;height:17px;background-position:0 -25px;background-image:url('/static/images/common/layout_sprite.png')}
.noTouchmove .company{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}
.company::-webkit-scrollbar{display:none}

.company > .layout{position:fixed;left:0;top:0;z-index:10;width:100%;height:291px;box-sizing:border-box;overflow:hidden}
.company > .layout .btn{position:absolute;top:3px;padding:10px}
.company > .layout .btnPrev{left:8px;top:7px}
.company > .layout .btnMenu{left:8px;top:7px}
.company > .layout .btnSnb{display:none;right:8px;top:4px}
.company > .layout .btn .icon{vertical-align:top}
.company > .layout .btn .menu{width:23px;height:18px;background-position:-205px -50px}

/* #492 변경*/
.company > .layout .controller span{display:inline-block;position:absolute;bottom:15px}
.company > .layout .controller span:after{content:'';display:inline-block;position:absolute;top:0;width:62px;height:7px;background-image: url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size: 360px auto}
.company > .layout .controller .prev{left:15px}
.company > .layout .controller .prev:after{left:0;background-position:-150px -35px}
.company > .layout .controller .next{right:15px}
.company > .layout .controller .next:after{right:0;background-position:-150px -25px}
.company > .layout .controller span a{display:inline-block;min-width:62px;padding-top:11px;font-size:12px;color:rgba(255,255,255,.8);text-align:center}

.company .section{padding-top:291px;padding-bottom:60px}
.company .header{position:fixed;top:0;right:0;left:0;z-index:4;overflow:hidden;height:291px;padding-top:0;padding-bottom:45px}
.company .header .slick-slider,
.company .header .slick-list,
.company .header .slick-track{height:100%;padding-bottom:45px;box-sizing:content-box}
.company .header .slider{overflow:visible}
.company .layout .slick-disabled{display:none !important}
.company .header .image{background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
.company .header [data-body-id="intro"] .image{background-image:url('/static/images/common/company_head_bg_01.jpg')}
.company .header [data-body-id="history"] .image{background-image:url('/static/images/common/company_head_bg_02.jpg')}
.company .header [data-body-id="vision"] .image{background-image:url('/static/images/common/company_head_bg_03.jpg')}
.company .header [data-body-id="motto"] .image{background-image:url('/static/images/common/company_head_bg_04.jpg')}
.company .header [data-body-id="social"] .image{background-image:url('/static/images/common/company_head_bg_05.jpg')}
.company .header [data-body-id="rightpeople"] .image{background-image:url('/static/images/common/company_head_bg_06.jpg')}
.company .header [data-body-id="marketing"] .image{background-image:url('/static/images/common/company_head_bg_07.jpg')}
.company .header [data-body-id="seminar"] .image{background-image:url('/static/images/common/company_head_bg_08.jpg')}
.company .header [data-body-id="brand"] .image{background-image:url('/static/images/common/company_head_bg_09.jpg')}
.company .header .slider .content{position:absolute;left:0;right:0;top:0;z-index:1;text-align:center;-webkit-transform:translateY(118px);transform:translateY(118px)}
.company .header .slider .content .logo{display:inline-block;position:absolute;left:50%;top:-65px;width:51px;height:44px;margin-left:-25px;background-image: url('/static/images/common/logo_white_102x87.png');background-repeat:no-repeat;background-size: 51px auto}
.company .header .slider .content h1,
.company .header .slider .content h2{position:relative;z-index:1;opacity:1;padding-bottom:10px}
.company .header .slider .content h1{font-size:30px;color:#fff;line-height:1.2}
.company .header .slider .content h2{margin-top:9px;font-size:18px;color:#fff;font-weight:bold}
.company .header .slider .content h1:after{content:'';display:inline-block;position:absolute;left:50%;bottom:0;width:26px;margin-left:-13px;border-top:1px solid #fff}
.company .header .clone{color:#fff;font-size:13px;opacity:0;transform:translateY(100%)}
.company .header .clone br{display:none}
.company .header .image{position:absolute;top:0;bottom:0;left:0;width:100%}
.company .header .image img{position:absolute;top:0;left:50%;width:auto;height:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.company .header .tab{position:absolute;top: 100%;left:0;z-index:5;width:100%}
.company .body h2.hide + .content{margin-top:30px}

.transition .company .header,
.transition .company .layout,
.transition .company .header .content,
.transition .company .header .content h1,
.transition .company .header .content h2,
.transition .company .header .content .logo,
.transition .company .header .content .clone{
	-webkit-transition:height 0.2s, opacity 0.2s, -webkit-transform 0.2s;
	transition:height 0.2s, opacity 0.2s, transform 0.2s;
}

.company.app .layout .btnPrev{top:42px}
.company.app .layout .btnSnb{top:38px}
.company.app .layout nav span{bottom:15px}
.company.app .header{padding-top:291px}
.company.app .header .slider > div{top:53px}

.company .video{position: relative}
.company #content{position:relative}
.company .tab.dark{display:none}
.company .slick-active .tab.dark{display:table}
.company .slick-active .tab.dark.scroll{display:block}
.company .tab.dark span.active a{color:#64d0f4;border-bottom:3px solid #64d0f4}
.company .verticalLine{position:relative;padding-left:19px}
.company .verticalLine:after{content:'';position:absolute;left:0;top:2px;width:4px;height:28px;background-color:#333}

.company .marketing,
.company .socialShare,
.company .motto,
.company .vision,
.company .history{padding-top:336px}

/* 개요 */
.company .section.intro .content > p,
.company .section.intro .content .video{margin-top:28px}

.company .tabContent{margin-top:30px}
.history .tabContent p{margin-top:5px}
.history .tabContent .record .list{overflow:hidden}
.history .tabContent .record .list li{position:relative}
.history .tabContent .record .list li .month{position:absolute;left:0;top:0;padding-top:8px;line-height:1.3;font-size:12px;font-weight:bold}
.history .tabContent .record .list li .month:after{content:'';display:inline-block;position:absolute;left:24px;top:12px;z-index:1;width:6px;height:6px;border-radius:50%;background-color:#707780}
.history .tabContent .record .list li.etc .month:after{content:none}
.history .tabContent .record .list li .content{position:relative;padding-left:40px;line-height:1.4;font-size:12px;color:#333}
.history .tabContent .record .list li .content:after{content:'';display:inline-block;position:absolute;left:26px;top:18px;height:100%;border-left:1px solid #c9c9c9}
.history .tabContent .record .list li .content li{padding-top:8px}
.history .tabContent .record .list.primary{margin:15px 0 25px}
.history .tabContent .record .list.primary li .month{font-size:14px}
.history .tabContent .record .list.primary li .month:after{background-color:#00b6f0}
.history .tabContent .record .list.primary li .content{font-size:14px}
.history .tabContent .record .list.primary li .content:after{border-left:1px solid #b2e9fa}
.history .tabContent .record .list.primary li:last-child .content:after{display:none}

.company .section.vision{font-size:14px}
.company .section.vision hr{margin:30px 0}
.company .section.vision .content:nth-of-type(1){padding-top:0}
.company .section.vision .content p{margin-top:20px}
.company .section.vision .content .color1{color:#d15555}
.company .section.vision .content .color2{color:#3b73d9}
.company .section.vision .content .color3{color:#538a13}
.company .section.vision hr{margin:30px 0}

.company .motto .tabContent{margin-top:30px}
.company .motto .tabContent hr{margin:30px 0}
.company .motto .tabContent .content{margin-top:30px}
.company .motto .tabContent .content small{display:block;margin-top:2px;font-size:15px}
.company .motto .tabContent .content > p{margin-top:20px}
.company .motto .tabContent .video{position:relative;margin-top:7px}
.company .motto .verticalLine:after{height:80px;top:5px}

.company .socialShare{font-size:14px}
.company .socialShare .verticalLine:after{height:93%;top:5px}
.company .socialShare .green{color:#78b17d}
.company .socialShare .violet{color:#7a5f94}
.company .socialShare .tab{margin-bottom:30px}
.company .socialShare .tabContent hr{margin:30px 0}
.company .socialShare .tabContent .content{margin-top:30px}
.company .socialShare .tabContent .content small{display:block;margin-top:3px;font-size:15px}
.company .socialShare .tabContent .content .dash{margin-top:10px}
.company .socialShare .tabContent .content .dash li{margin-top:5px}
.company .socialShare .tabContent .content .dash li:first-child{margin-top:0}
.company .socialShare .tabContent.growth .image{display:inline-block;width:229px;height:219px}
.company .socialShare .tabContent figure{margin:13px 0 15px}
.company .socialShare .tabContent figure p{margin-top:4px;font-size:9px}
.company .socialShare .tabContent .gallery{margin-top:15px;padding:15px}
.company .socialShare .tabContent .gallery .body small{margin-top:0;font-size:12px;color:#7f8792}
.company .socialShare .tabContent .slider{min-height:150px}
.company .socialShare .tabContent .slider .listSlide{position:static}
.company .socialShare .tabContent .slider .listSlide .item .image{overflow:hidden;text-align:center;vertical-align:middle}
.company .socialShare .tabContent .slider .listSlide .item .image img{display:inline-block}
.company .socialShare .tabContent .slider .listSlide .item .caption{margin-top:10px;}
.company .socialShare .tabContent .slider .controls{top:0;padding-top:21%}
.company .socialShare .tabContent.contribution .content > p{margin-top:5px}
.company .socialShare .tabContent.contribution .video{margin-top:16px}

.company .tabContent .slider .listSlide{display:none;position:static}
.company .tabContent .slider .listSlide.slick-slider{display:block} 

.company .recruit hr{margin:30px 0}
.company .recruit .content{margin-top:20px}
.company .recruit .content .body,
.company .recruit .content p{margin-top:5px}
.company .recruit .content .dash{line-height:1.8}
.company .recruit .iconList li{margin-top:20px}
.company .recruit .iconList li .head{position:relative;margin-bottom:15px;padding-left:72px;line-height:1.2}
.company .recruit .iconList li .head:after{content:'';display:inline-block;position:absolute;left:0; background-image:url('/static/images/common/recruit_icons.png');background-repeat:no-repeat;background-size:360px auto}
.company .recruit .iconList li .head.icon01:after{width:48px;height:52px;top:0;background-position:0 0}
.company .recruit .iconList li .head.icon02:after{width:45px;height:48px;top:0;background-position:-50px 0}
.company .recruit .iconList li .head.icon03:after{width:52px;height:44px;top:3px;background-position:-100px 0}
.company .recruit .iconList li .head.icon04:after{width:46px;height:38px;top:6px;left:5px;background-position:-155px 0}
.company .recruit .iconList li p{margin-top:5px}

.company .marketing .guide{margin:15px 0;padding:20px 5px;text-align:center}
.company .marketing .guide h3{margin-bottom:5px}
.company .marketing .ratings .plans{padding:}
.company .marketing .ratings .plans .rank{position:relative;min-height:80px}
.company .marketing .ratings .plans .rank:before{content:'';display:inline-block;position:absolute;left:40px;top:0;height:130%;border-left:1px solid #c9c9c9}
.company .marketing .ratings .plans .rank + .rank{margin-top:15px}
.company .marketing .ratings .plans .rank:last-child:before{content:none}
.company .marketing .ratings .plans .rank:after{content:'';display:block;clear:both}
.company .marketing .ratings .plans .rank .head{width:80px;height:80px;padding:28px 0 0;position:absolute;left:0;top:0;line-height:1.4;font-size:14px;color:#333;text-align:center;background-color:#fff;border-radius:50%;box-sizing:border-box}
.company .marketing .ratings .plans .rank .head strong{display:block}
.company .marketing .ratings .plans .rank .content{position:relative;float:right;width:70%;min-height:87px;margin-top:2px;padding:0 20px 15px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.company .marketing .ratings .plans .rank .content p{margin-top:13px;font-size:13px;color:#333}
.company .marketing .ratings .plans .rank .content:before,
.company .marketing .ratings .plans .rank .content:after{content:'';display:inline-block;position:absolute;top:30px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:0}
.company .marketing .ratings .plans .rank .content:before{left:-10px;border-right:10px solid #e2e2e2}
.company .marketing .ratings .plans .rank .content:after{left:-8px;border-right:10px solid #fff}
.company .marketing .ratings .plans .rank.color1 .head{border:3px solid #c6edfb}
.company .marketing .ratings .plans .rank.color2 .head{border:3px solid #96def6}
.company .marketing .ratings .plans .rank.color3 .head{border:3px solid #6ed4f5}
.company .marketing .ratings .plans .rank.color4 .head{border:3px solid #59d0f6}
.company .marketing .ratings .plans .rank.color5 .head{border:3px solid #00b6f0}

.company .marketing .benefit section + section{margin-top:20px}
.company .marketing .benefit section .bullet{margin-top:5px}
.company .marketing .benefit .table tbody td{text-align:center}
.company .marketing .benefit .board .list li .content{padding:15px;font-size:13px;color:#333}
.company .marketing .benefit .board .list li .content .box.primary{margin-top:15px;padding:12px 14px;font-size:12px}
.company .marketing .promotion section{margin-top:25px}
.company .marketing .promotion .table{margin-top:5px}
.company .marketing .promotion .table tbody th, 
.company .marketing .promotion .table tbody td{padding:10px}
.company .marketing .promotion .box.default{margin-top:15px;padding:15px}
.company .marketing .promotion .box.default .dash li{margin-top:4px;font-size:13px;color:#333}

.company .seminars .body{padding-top:30px}
.company .seminars .body .summary{margin-top:15px}
.company .seminars .body section{margin:25px 0 30px}
.company .seminars .body section .text17{margin-bottom:10px}
.company .seminars .body section .box.primary{margin:12px 0;padding:10px;font-size:13px}
.company .seminars .body section .bullet{margin-bottom:5px}
.company .seminars .body section .color1{color:#59b2c2}
.company .seminars .body section .color2{color:#f9993b}
.company .seminars .body section .color3{color:#5bc28d}
.company .seminars .body section .color4{color:#8781bd}

.company .brand .body{position:relative}
.company .brand .body section{margin:10px 0 30px}
.company .brand .body section ul li{position:relative;margin-top:5px;padding-left:9px;font-size:12px;color:#333}
.company .brand .body section ul li:after{content:'';display:block;width:3px;height:3px;position:absolute;left:0;top:7px;background-color:#707780}
.company .brand .body section .image{margin-top:15px}
.company .brand .marks{position:absolute;right:15px;top:5px;font-size:11px}
.company .brand .marks > span{position:relative;padding-left:10px;margin-left:3px}
.company .brand .marks span:first-child:after{content:none}
.company .brand .marks span:after{content:'';display:inline-block;position:absolute;left:0;top:4px;height:9px;border-left:1px solid #e2e2e2}
.company .brand .mark{display:inline-block;width:8px;height:8px;border-radius:50%;font:0/0 a;box-sizing:border-box;vertical-align:top;-webkit-transform:translateY(50%);transform:translateY(50%)}
.company .brand .mark.orange{background-color:#f9993b}
.company .brand .mark.green{background-color:#a1b404}
.company .brand .mark.violet{background-color:#8958fe}

.company .brand .consTit{padding:10px;font-size:14px}
.company .brand .body section dl{margin-top:16px;line-height:20px;color:#333}
.company .brand .body section dl dt{float:left;display:inline-block;margin-top:2px;font:0/0 a;text-align:center;width:28px;height:26px;background-image:url('/kr/m/static/images/common/icon_brand.png');background-repeat:no-repeat;background-size:250px auto;pointer-events:none}
.company .brand .body section dl dd{margin-left:34px;font-size:14px}
.company .brand .body section dl dd p:first-child{font-weight:bold;font-size:16px}
.company .brand .body section dl dt.health{background-position:0 0}
.company .brand .body section dl dt.skincare{background-position:-30px 0}
.company .brand .body section dl dt.makeup{background-position:-60px 0}
.company .brand .body section dl dt.hair{background-position:-90px 0}
.company .brand .body section dl dt.living{background-position:-120px 0}
.company .brand .body section dl dt.food{background-position:-150px 0}
.company .brand .body section dl dt.fashion{background-position:-180px 0}

.company .slider .controls button{-webkit-transform:translateZ(0);transform:translateZ(0)}
@charset "UTF-8";

@media screen and (min-width:481px){
	.shopMain .category li{min-width:11%}
	.tab.my span{width:25%}
}

/* Only iPhone 4,5 */
@media screen and (max-width:320px){
	#gnb .paymentApps > li{padding-left:17px}
	#gnb .footer div{padding-top:3px}

	.dialog.mobileNav .body .guide{padding-top:9px}
	.orderHistory .products .controls .select{width:100px}
	
	.table .btn.md{padding:0 5px}

	.lowerSalesList .board .content .item:first-child{width:65%}
	.lowerSalesList .board .content .item:last-child{min-width:35%}

	.topBanner .center{padding-right:20px}
	.topBanner p{font-size:14px}
	.topBanner .topBannerBtn{margin-left:0}

	.shopMain.mobile .products .list .info .thumb{width:100px;height:100px}
	.shopMain.mobile .products .list > li > div{padding-left:120px}
	.shopMain.mobile .products .card .info .fix{height:152px}

	.dialog.toCenter.navigation .layout{top:5%;bottom:5%}

	.buy .table .row.cell2 .col:last-child{width:50%}
	.buy .table .row.cell2 .col .btn{padding:0 10px}
	.buy .payment .btns li.item5 .btn{padding:6px 3px 0;vertical-align:middle;line-height:1.2}
	.buyDone .row.sides .itemCount .sub{max-width:100px}
	.paymentDone .row.sides .itemCount .sub{max-width:100px}
	
	.registerGate{padding-bottom:0}
	.registerGate .join{position:static;padding-top:20px}
	.registerGate .fixBottom{position:static}
	.registerGate .fixBottom .fixContent{position:static}

	.banner.colors a{height:auto;padding-bottom:8px}
	.banner.colors a strong{display:block}

    .products .list > li > div{padding-left:100px;height:126px}
    .products .list .info .thumb{left:5px;top:10px}
    .products .list .info .thumb.resize{width:90px;height:90px}
    .products .list .info .fix{padding:13px 5px 0 0}
    .products .list .info .reconts{margin-top: 11px}
    .products .list .info .price strong{font-size: 15px}
    .products .info .price dd{font-size: 12px}
    .products .row.quantity{padding-right:55px}
    .products .list .info .disable{left:7px;top:22px;width:85px;height:85px}
    .products .list .info .new{left:55px}
    .products .card .info .disable{top:15px}
    .products .card .info .thumb a img {height:140px}

    .favorite .products .list .info .thumb{top:7px}
    .favorite .products .list .info .disable{left: 45px;top: 15px}
    
    .favorite .products .list .disable,
    .cart .products .list .disable{left: 45px}

    .list.options .info .fix{padding: 0}
    
}
@media screen and (min-width:360px) and (max-width: 374px){
    .products .card .info .thumb a img {height:160px}
}
@media screen and (min-width:375px) and (max-width: 411px){
    .products .card .info .thumb a img {height:168px}
}

@media screen and (min-width:412px) and (max-width: 424px){
    .products .card .info .thumb a img {height:186px}
}

@media screen and (min-width:425px) and (max-width: 479px){
    .products .card .info .thumb a img {height:193px}
}

/* 가로모드 (iPhone4 기준이상) */
@media screen and (min-width:480px){
	.dialog.mobileNav .body nav span{width:25%}
	.dialog.mobileNav .body nav span a{height:50px;padding-top:16px;font-size:13px}
	.dialog.mobileNav .body nav span a:after{top:20px}
	.dialog.mobileNav .body .guide{height:66px;padding-top:12px}

	.dialog.toCenter.navigation .layout{top:5%;bottom:5%}

	.dialog.cart .body{max-height:200px;overflow-y:auto;overflow-x:hidden}
}

/* Only iPhone4,5 가로모드 */
@media screen and (min-width:480px) and (max-width: 568px){
	.dialog.cart .body .info{height:57px;padding-left:15px}
	.dialog.cart .body .info:after{content:'';display:block;clear:both}
	.dialog.cart .body .info .thumb{display:none}
	.dialog.cart .body .info .name{display:inline-block;float:left;width:49%}
	.dialog.cart .body .info .select{float:right;width:49%}
}

/* Only iPhone4 가로모드 */
@media screen and (min-width:480px) and (max-width: 481px){
	.dialog.cart .body{max-height:120px}
}
/* Only iPhone5 가로모드 */
@media screen and (min-width:568px) and (max-width: 569px){
	.dialog.cart .body{max-height:100px}
}

/* note 5 */
@media (-webkit-device-pixel-ratio: 3.5) and (min-width: 412px){
	.gateMain #body .slider{padding-top:90%}
	.video .dropDown .btn .icon.arrowBottom{margin-top:-5px}
	.lifeWrite .btn.md {line-height:35px}
	.lowerSalesList .headLine button .icon{margin-top:-5px}
}
@media (orientation: landscape){
	.ticketPreview .body .fixBottom{position:static;margin-top:20px}
	.ticketPreview .body .fixContent{position:static}
}

.ios{
    --top: 20pt;
    --bottom: 0px;
}
.ios.notch{
    --top: 33pt;
    --bottom: 35pt;
}

/* layout */
.ios #header{
    height: calc(var(--top) + 50px);
    padding-top: calc(var(--top) + 12px);
}
.ios #header .btn{
    top: calc(var(--top) + 5px);
}

.ios #body{
    padding-top: calc(var(--top) + 50px);
}
.ios #body.helpdeskMain{
    padding-top: calc(var(--top) + 70px);
}
.notch #body.cart{
    padding-bottom: calc(60px - var(--bottom) + 140px);
}
.notch #body.seminarInfo{
    padding-bottom: var(--bottom);
}
.notch .fixBottom.happyCenter .fixContent{
    height: calc(60px - var(--bottom) + 55px);
}

/* slide-popup */
.notch .slidePopup .slider .indicator.expand{
    bottom: calc(60px - var(--bottom) + 65px);
}

/* gnb */
.notch #gnb{
    padding-bottom: var(--bottom);
}
.ios #gnb .info{
    padding-top: calc(var(--top) + 52px);
}
.ios #gnb .info.nonmember{
    padding-top: calc(var(--top) + 22px);
}
.ios #gnb .info .local{
    top: calc(var(--top) + 11px);
}
.ios #gnb .info .setup a{
    top: calc(var(--top) + 15px);
}
.ios .menuClose{
    top: calc(var(--top) + 17px);
}

/* main */
.ios .gateMain #header .btnMenu{
    top: calc(var(--top) + 6px);
}
.ios .gateMain #header .btns{
    top: calc(var(--top) + 8px);
}
.notch .gateMain #footer .fixContent{
    bottom: 0;
}
.ios .gateMain #body{
    padding-top: calc(var(--top) + 50px);
}
.notch .gateMain #body #footer{
    bottom: calc(var(--bottom) + 18px);
}
.notch .gateMain #nav a{
    padding-bottom: var(--bottom);
}

/* company */
.ios .company > .layout{
    height: calc(var(--top) + 45px);
}
.ios .company > .layout .btnMenu{
    top: calc(var(--top) + 7px);
}
.ios .company > .layout .btnSnb{
    top: calc(var(--top) + 4px);
}
.ios .company .header{
    padding-top: var(--top);
}
.ios .company .header .content{
    transform: translateY(calc(var(--top) + 118px));
}
.ios .company .section{
    padding-top: calc(var(--top) + 291px);
}
.ios .company .marketing,
.ios .company .socialShare,
.ios .company .motto,
.ios .company .vision,
.ios .company .history{
    padding-top: calc(var(--top) + 336px);
}

/* dialog */
.notch .dialog.tutorial .layout{
    padding: 0;
    height: 100%;
}
.notch .dialog.tutorial .layout .body{
    display: flex;
    align-items: center;
    justify-content: center;
}

.notch .dialog.promotions .body{
    padding-bottom: calc(var(--bottom));
}

.ios .dialog.page .layout{
    padding-top: calc(var(--top) + 50px);
}
.ios .dialog.page.noHeader .layout{
    padding-top: 0;
}
.ios .dialog.page .layout header{
    height: calc(var(--top) + 50px);
    padding-top: calc(var(--top) + 9px);
}
.ios .dialog.page .dialogClose{
    top: calc(var(--top) + 16px);
}
.ios .treeLevel.dialog.page .dialogClose{
    top: calc(var(--top) + 8px);
    right: 9px;
}
.ios .treeLevel.dialog.page .dialogClose:after{
    top: 7px;
}
.ios .dialog .dialogPrev{
    top: calc(var(--top) + 16px);
}

.ios .dialog.search #header{
    height: 50px;
    padding-top: 12px;
}
.ios .dialog.search .layout{
    margin-top: calc(var(--top) + 50px);
}
.ios .dialog.search .layout + .dim{
    top: calc(var(--top) + 50px);
    bottom: 0;
}
.ios .dialog.search #body{
    padding-top: 50px;
}

.ios .dialog.mobileGuide.mobileQa .tab{
    top: calc(var(--top) + 50px);
}
.notch .dialog.findProduct .body{
    padding-bottom: calc(60px - var(--bottom));
}
.notch .dialog.findProduct .search{
    position: relative;
}
.notch .dialog.findProduct .search input[type='search']{
    padding-right: 30px;
}
.notch .dialog.findProduct .search .btnDelete{
    right: 0;
}
.notch .snsShare .layout{
    padding-bottom: calc(60px - var(--bottom));
}

/* shop */
.notch #snb{
    padding-bottom: calc(60px - var(--bottom));
}
.notch #footer .fixContent{
    padding-bottom: calc(60px - var(--bottom) + 101px);
}
.notch .notice.fixBottom{
    bottom: calc(60px - var(--bottom) + 171px);
}
.notch .products .list{
    margin-bottom: calc(60px - var(--bottom));
}
.notch .shopMain .btnMore{
    margin-bottom: calc(60px - var(--bottom) + 20px);
}
.notch .fixBottomBtn{
    bottom: calc(60px - var(--bottom) + 65px);
}
.notch .buy ~ .fixBottomBtn,
.notch .product ~ .fixBottomBtn{
    bottom: calc(60px - var(--bottom) + 75px);
}
.notch .row.btns .col,
.notch .noticeDetail .row.btns.margin.floating.box{
    padding-bottom: calc(60px - var(--bottom));
}
.notch .row.btns .col:first-child:last-child{
    padding-bottom: 0;
}
.notch .row.btns.floating{
    height: calc(60px - var(--bottom) + 70px);
}
.notch .favorite .row.btns.floating{
    height: 70px;
    padding-bottom: 0;
    bottom: calc(60px - var(--bottom) + 60px);
}
.notch .buy .agreement{
    margin-bottom: calc(60px - var(--bottom));
}
.notch .buy .row.btns.btnScroll{
    height: calc(60px - var(--bottom) + 70px);
}

/* myoffice */
.notch .planList .plans{
    padding-bottom: calc(60px - var(--bottom));
}
.notch .lowerSalesList .guide{
    margin-bottom: calc(60px - var(--bottom));
}

/* paynowBiz */
.notch .paymentMethod.dialog .layout .body ul li:last-child{
    padding-bottom: 15px;
}

/* OP-19094 리뉴얼 랜딩 페이지 - 아이폰 */
.notch .renewal-landing #renewalLang{top:calc(var(--top) + 15px) !important}
.notch .renewal-landing #container{padding-top: var(--top)}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}